Author Archives: Anu

Dealing with databases in Laravel vol 1

Before running 
php artisan migrate
don't forget to make real database on server. Let's name it blogdb. In .env file following changes needed to be done:
  • DB_DATABASE=homestead rename as DB_DATABASE=blogdb
  • DB_USERNAME=homestead rename as DB_USERNAME=yourusername
  • DB_PASSWORD=secret rename as DB_PASSWORD=yourpassword

Page template and custom header

Few quick heurekas about these topics. Page template
  • Name your file like this: my-template.php
  • At the beginning of my-template.php add:
    Actually it showed up in both cases Template name: My-template and Template name: my-template. It is traditionally used with capital letter, but I have to check, maybe it is a standard
Different header
  • Name your file like this: header-yourheadername.php
  • To call it out on your about page, add into template-file.php or about-template.php:
    if(is_page('about')){
    
    get_header('yourheadername');

} else {
    get_header();
}

Show x latest blogposts

Needed a quick solution for displaying five latest blogposts on home-page. It will show only titles and makes them active links. This is the code: 
    
 '5' );
	$recent_posts = wp_get_recent_posts( $args );
	foreach( $recent_posts as $recent ){
		echo '
  • ' .   $recent["post_title"].' 
    •  ';
	}
	wp_reset_query();
?>
If different number of posts is needed, change the number 5 in this row: 
$args = array( 'numberposts' => '5' );
Source

JavaScript30 – Day 17

JavaScript30 is 30-day vanilla javaScript coding challenge by Wes Bos (@wesbos). The purpose of these posts is to reflect my troubles and moments of ahhaa. Sorting band names without a/an/the Lessons from Day 17 — a/an/the: Demo - Day 17
  1. Regex to replace a/an/the with ' ' 
    function strip(bandName){

  return bandName.replace(/^(a |the |an )/i,'').trim();

}
  2. Ternary operator - ?: is called ternary operator 
    return strip(a) > strip(b) ? 1 : -1
  3. How to write a function in three ways:
    //first
const sortedBands = bands.sort(function(a,b){
 return strip(a) > strip(b) ? 1 : -1
});

//as arrow-function
const sortedBands = bands.sort ((a,b) =>{
 return strip(a) > strip(b) ? 1 : -1
});

// if the only thing you are doing in function is returning - you can do implicit return
const sortedBands = bands.sort((a,b) => strip(a) > strip(b) ? 1 : -1);
  4. Output with/without commas 
    sortedBands.map(band => `
  5. ${band}
    6. `);
//will give you commas after the names:
["
  6. Anywhere But Here
    7. ", "
  7. The Bled
    8. ", "
  8. Counterparts
    9. ", "
  9. The Devil Wears Prada
    10. ", "
  10. The Midway State
    11. ", "
  11. Norma Jean
    12. ", "
  12. Oh, Sleeper
    13. ", "
  13. An Old Dog
    14. ", "
  14. Pierce the Veil
    15. ", "
  15. The Plot in You
    16. ", "
  16. Say Anything
    17. ", "
  17. A Skylit Drive
    18. ", "
  18. We Came as Romans
    19. "]

    sortedBands.map(band => `
  19. ${band}
    20. `).join('');
//will give

  20. Anywhere But Here
  21. The Bled
  22. Counterparts
  23. The Devil Wears Prada
  24. The Midway State
  25. Norma Jean
  26. Oh, Sleeper
  27. An Old Dog
  28. Pierce the Veil
  29. The Plot in You
  30. Say Anything
  31. A Skylit Drive
  32. We Came as Romans
    33.
Day 17 code on github.

JavaScript30 – Day 9

JavaScript30 is 30-day vanilla javaScript coding challenge by Wes Bos (@wesbos). The purpose of these posts is to reflect my troubles and moments of ahhaa. Lessons from Day 9: Demo - Day 9 Some console tricks (on Win Ctrl+Shift+I)
  1. Interpolated strings in console.log() 
        console.log('Hello');
    console.log('I am a %s string', 'awesome' );
    var string = "awesome";
    console.log(`I am ${string} string`);
    Interpolated string
  2. Styling console.log() 
        console.log('%c I am awesome string', 'color:#BADA55; font-size:20px;');
    Styled console.log()
  3. Warning—console.warn()
        console.warn("No!");
    consol. warn()
  4. Error—console.error() 
        console.error("Smth went wrong!");
    console_error
  5. Info—console.info() 
     console.info("console.info() is for providing info!");
    console_info
  6. Clearing console—console.clear()— simpliest way to clear console.
  7. Testing—console.assert() - returns only if the statemeny is false
        console.assert (1===1, 'That is true'); // won't show anything
    console.assert (1===2, 'That is wrong'); //shows text

    const p = document.querySelector('p');
    console.assert (p.classList.contains('whatever'), 'No such class!');
    console_assert
  8. Viewing DOM elements—console.dir
     console.log(p); //shows actual element itself
 console.dir(p); // shows all the element's attributes and methods
    Image shows only a fragment of console.dir(): console.dir()
  9. Grouping together—console.group()—uncollapsed version
    dogs.forEach(dog => {
      console.group(`${dog.name}`); // uncollapsed
      console.log(`This dog is ${dog.age} years old`);
      console.groupEnd(`${dog.name}`); // important to put otherwise inside each other

    });
    console_group_uncollapsed
  10. Grouping together—console.group()—collapsed version
    dogs.forEach(dog => {
      console.groupCollapsed(`${dog.name}`); // collapsed
       console.log(`This dog is ${dog.age} years old`);
      console.groupEnd(`${dog.name}`); // important to put otherwise inside eacother

    });
    Hugo is clicked open to show provided information: console_group_collapsed
  11. Counting—console.count()
        console.count('S');
    console.count('S');
    console.count('R');
    console.count('S');
    console.count('S');
    console.count('T');
    console.count('T');
    console.count('S');
    console.count('L');
    console_count
  12. Timing—console.time()— how long operation takes time
    console.time('fetching data');
    fetch('https://api.github.com/users/wesbos')
    .then(data => data.json())
    .then(data =>{
      console.timeEnd('fetcing data');
      console.log(data);
    });
    console_time
  13. console.table()—displays tabular data as table
    console.log(dogs);
console.table(dogs);//same size of objects
    console_table
Day 9 code on github.

JavaScript30 – Day 10

JavaScript30 is 30-day vanilla javaScript coding challenge by Wes Bos (@wesbos). The purpose of these posts is to reflect my troubles and moments of ahhaa. Lessons from Day 10: Demo - Day 10
  1. let var - another type of variable in JavaScript. Variables declared by let have as their scope the block in which they are defined, as well as in any contained sub-blocks . In this way, let works very much like var. The main difference is that the scope of a var variable is the entire enclosing function—MDN link
  2. inBetween = !inBetween is same as inbetween = true. It's also called a flag variable - a flag variable, in its simplest form, is a variable you define to have one value until some condition is true, in which case you change the variable's value.
  3. Warning‐change vs click I started it by myself and in this point - it didn't react anyhow. 
    if(e.shiftKey && this.checked){
	console.log("jep");
}
    As I listened to the 'change', I changed it to 'click' and voila - it worked.
Day 10 code on github.

JavaScript30 – Day 8

JavaScript30 is 30-day vanilla javaScript coding challenge by Wes Bos (@wesbos). The purpose of these posts is to reflect my troubles and moments of ahhaa. Lessons from Day 8: Demo - Day 8
  1. Organizing your variables and values as an array: 
    [lastX, lastY] = [e.offsetX, e.offsetY];
    is the same as: 
    lastX = e.offsetX;
lastY = e.offsetY;
  2. hsl— h is for hue (between 0-360), s is for saturation and l is for lightness.
  3. strokeStyle and lineWidth It's ctx.strokeStyle for color, but ctx.lineWidth for width.
  4. direction != direction and direction = !direction - let's assume that direction is true: 
    direction != direction // true isn't equal to true
direction = !direction  // change direction's value to opposite - if true, now be false
  5. Debugging:
    • console.log(canvas)- as it didn't do anything and no spelling mistakes so far - turned out I had accidentally deleted the -tag.
    • inside draw() - console.log(e) after the condition, if I console it before it gives me true and false, but I only want one of them.
    • calling out draw function - addEventListener('mousemove') worked but nothing else didn't care if it was false or true. Possible ways to debug:
      inside function draw(){
	console.log(isDrawing);
	if(isDrawing ="false") return;
}
      It turned out to be spelling mistake in addEventListener('mousedown'),()=> isDARwing = true); and not addEventListener('mousedown'),()=> isDRAwing = true);
Day 8 code on github.

JavaScript30 – Day 1

JavaScript30 is 30-day vanilla javaScript coding challenge by Wes Bos (@wesbos). Actually I saw this challenge at the beginning of the year and thought "no, won't take it because probably I won't finish it" ... but here I am. I'm still not sure about finishing, but if I can get it through till the end of the year - well done! The purpose of these posts is to reflect my troubles and moments of ahhaa. Lessons from Day 1: Demo - Day 1
  1. const– so far I've used only var to define variables. Const values cannot be changed or redeclared.
  2. ` back-ticks and template literals: 
    const audio = document.querySelector(`audio[data-key="${e.keyCode}"]`);
    This is the part I struggled the most. If I copied it, it worked, if wrote it on my own– it didn't. And I couldn't understand why? And no ideas what to google for. Fortunately there is always Twitter. Yes, I know there are different types of quotes - ",',´. But turns out there are also backticks - on Win you can type them ALT + (num keyboard on right) 9+ (num keyboard on right) 6 or you have to Google for which key to press. `${variable}` as templating literals allowing embedded variables.
  3. http://keycode.info/ to find quickly keyboard's key code.
  4. if(!Obj) return; – stop the function if the Obj is null (there is no such object). I think I'm familiar with the concept but why I haven't it used before?
  5. arrow-function So this function: 
     allAs.forEach(function(element) {
             element.classList.add('playing');
        });
    can be written as an arrow-function: 
     allAs.forEach(element => element.classList.add('playing'));
  6. <kbd> is html—tag for keyboard input
  7. Adding audio files I had to add .mp3 to the end.
  8. As I changed the word to "javascript" I had two "A"s. It got me some time to figure out that I can't detect if it is the first A or the second one by keypress. So, I had to modify my code: a) check if it is A b) if it is get all the A-s (document.querySelectorAll) c) and each of them add class "playing" 
     if(e.keyCode =="65"){
         // get all letter A                 
         allAs = document.querySelectorAll(`div[data-key="${e.keyCode}"]`);
         allAs.forEach(element => element.classList.add('playing'));
         
    } else {
       key.classList.add('playing');
    }
Day 1 code on github.