Ajax Type Ahead

This was a great run-through of using Ajax without using jQuery! I thought it would be more complicated than this. But for something as basic as this activity, it seemed like a good way to go.

http://codepen.io/digilou/pen/QpPJqj?editors=0010

Most of this was pretty new to me, so I needed to walk through it at a slower pace the second time around. The useful things I got out of this project:

• fetch(endpoint) instead of $.getJSON()
• .json() to identify type
• .then()
• (...data) to spread an array within an array
• practical use of filter() and map() and replace()
• more use of backtick
• CSS3 transform:perspective

Extra credit: changed .addEventListener('change') to ('input') so suggested list appears immediately rather than when user clicks outside of box

Array Cardio, Day Two

Wow! I think between this rundown and the Ajax Type ahead, I'm going to be able to fill in the missing pieces of a project I'm working on at work.

Material covered:

• some(): checks array for at least one instance
• every(): checks if every array item matches
• find(): returns the first one it finds, rather than a subset
• findIndex(): finds where something is within the array (the index number)

 const people = [
 { name: 'Wes', year: 1988 },
 { name: 'Kait', year: 1986 },
 { name: 'Irv', year: 1970 },
 { name: 'Lux', year: 2015 }
 ];
 const comments = [
 { text: 'Love this!', id: 523423 },
 { text: 'Super good', id: 823423 },
 { text: 'You are the best', id: 2039842 },
 { text: 'Ramen is my fav food ever', id: 123523 },
 { text: 'Nice Nice Nice!', id: 542328 }
 ];
 // Some and Every Checks
 
 // Array.prototype.some() // is at least one person 19 or older?
 const isAdult = people.some(person => (new Date()).getFullYear() - person.year >= 19);
 console.log({isAdult}); // shows name of variable as well as value
 
 // Array.prototype.every() // is everyone 19 or older?
 const allAdult = people.every(person => (new Date()).getFullYear() - person.year >= 19);
 console.log({allAdult});
 
 // Array.prototype.find()
 // Find is like filter, but instead returns just the one you are looking for
 // find the comment with the ID of 823423
 const findId = comments.find(comment => comment.id === 823423);
 console.log(findId);
 
 // Array.prototype.findIndex()
 // Find the comment with this ID
 // delete the comment with the ID of 823423
 const index = comments.findIndex(comment => comment.id === 823423);
 console.log(index);
 comments.splice(index, 1);
  // or create new array with updated content
 const newComments = [
 ...comments.slice(0, index), // spread array into new array
 ...comments.slice(index + 1)
 ];
 console.table(newComments);

Fun with HTML5 Canvas

http://codepen.io/digilou/pen/jBjeRe

So. Many. Things.

I need to spend more time with this, but I already feel better about my knowledge in the following just from this short tutorial:

• window.innerWidth && window.innerHeight can expand or shrink the canvas dimensions to the full browser window size
• canvas and several of its properties (strokeStyle, lineCap, lineWidth, lineJoin, beginPath, moveTo, lineTo, stroke)
• canvas context (2d vs. 3d)
• HSL and a great site to see how hsl works
• more addEventListeners (mousemove, mousedown, mouseout, mouseup)

Extra credit: I experimented with more addEventListeners to make it for touchscreen. Not successful yet, but I learned about touchstart, touchcancel, touchend, touchmove.

Extra extra credit: Added the following to give direction to the user:

context.fillText('Draw Here', canvas.width/2, canvas.height/2);

14 Must Know Dev Tool Tricks

Using Chrome Dev Tools, I can create a breakpoint to inspect via right-click on element > break on > attribute modifications.

A quick rundown by Wes:

const dogs = [{ name: 'Snickers', age: 2 }, { name: 'hugo', age: 8 }];

function makeGreen() {
 const p = document.querySelector('p');
 p.style.color = '#BADA55';
 p.style.fontSize = '50px';
}

// Regular
 console.log('hello');

// Interpolated
 console.log('Hello I am a %s string!', '💩');

// Styled
 // console.log('%c I am some great text', 'font-size:50px; background:red; text-shadow: 10px 10px 0 blue')

// warning!
 console.warn('OH NOOO');

// Error :|
 console.error('Shit!');

// Info
 console.info('Crocodiles eat 3-4 people per year');

// Testing
 const p = document.querySelector('p');

console.assert(p.classList.contains('ouch'), 'That is wrong!');

// clearing
 console.clear();

// Viewing DOM Elements
 console.log(p);
 console.dir(p);

console.clear();

// Grouping together
 dogs.forEach(dog => {
 console.groupCollapsed(`${dog.name}`);
 console.log(`This is ${dog.name}`);
 console.log(`${dog.name} is ${dog.age} years old`);
 console.log(`${dog.name} is ${dog.age * 7} dog years old`);
 console.groupEnd(`${dog.name}`);
 });

// counting

console.count('Wes');
 console.count('Wes');
 console.count('Steve');
 console.count('Steve');
 console.count('Wes');
 console.count('Steve');
 console.count('Wes');
 console.count('Steve');
 console.count('Steve');
 console.count('Steve');
 console.count('Steve');
 console.count('Steve');

// timing
 console.time('fetching data');
 fetch('https://api.github.com/users/wesbos')
 .then(data => data.json())
 .then(data => {
 console.timeEnd('fetching data');
 console.log(data);
 });

// table output
console.table(dogs);

Hold Shift to Check Multiple Checkboxes

http://codepen.io/digilou/pen/peMjem

Tidbits:

• click event comes from mouse or keyboard, unlike change event which detects the mouse
• instead of setting true or false, I can set a variable opposite from itself (!variable)
• it's better to rely less on targeting HTML structure in case updates are made in separate files
• properties new to me: shiftKey && checked

Extra credit: updated HTML to make it more semantic for web accessibility by using lists and labels rather than divs and paragraphs.