Monthly Archives: March 2017

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.