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: ["
  7. Anywhere But Here
  8. ", "
  9. The Bled
  10. ", "
  11. Counterparts
  12. ", "
  13. The Devil Wears Prada
  14. ", "
  15. The Midway State
  16. ", "
  17. Norma Jean
  18. ", "
  19. Oh, Sleeper
  20. ", "
  21. An Old Dog
  22. ", "
  23. Pierce the Veil
  24. ", "
  25. The Plot in You
  26. ", "
  27. Say Anything
  28. ", "
  29. A Skylit Drive
  30. ", "
  31. We Came as Romans
  32. "]
    sortedBands.map(band => `
  33. ${band}
  34. `).join(''); //will give
  35. Anywhere But Here
  36. The Bled
  37. Counterparts
  38. The Devil Wears Prada
  39. The Midway State
  40. Norma Jean
  41. Oh, Sleeper
  42. An Old Dog
  43. Pierce the Veil
  44. The Plot in You
  45. Say Anything
  46. A Skylit Drive
  47. We Came as Romans
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 functionMDN 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.