joshmade

[joshmade]

I started What The FlexBox?!

I literally just finished the #javascript30 course by Wes Bos. It was awesome. 

Part of me wants to slow down and spend some time revisiting some sessions but instead I think I'll jump straight into another course, What The Flexbox?!

Flex, Josh.

[joshmade]

Closing Video

Wes Bos did a FANTASTIC job with this #javascript30 day course. I learned so much but I know I'll only retain it if I do it over and over again. Like they say, practice makes permanent.

Wes encourages us to build 1,000 things. Well, I've only got 970 more.

I've already been thinking and jotting down notes about how I can take some of these lessons and turn them into something I can call my own.

Wes encourages us to help teach others. To write a blog post, to make a YouTube video, to share with others what I know.

I'm looking forward to circling back and revisiting some of these sessions and eventually starting another Wes Bos course. He is a great teacher and has a lively personality.

Check him out at wesbos.com.

Peace.

[joshmade]

Whack A Mole Game

In session thirty we built a whack a mole game. This is the game where you have critters popping up in random holes and you have to click them to get a point.

The game consisted of five functions and only one event listener.

We created a function randomTime() which takes in min and max values of milliseconds and returns a value between those bounds.

We created a function randomHole() which takes in our holes variable which is a nodeList of every div.hole. The function selected a random hole and then checked to make sure the hole selected did not equal the last hole selected. If it did, we return randomHole( holes ). This is recursion. In the last few lines of the function we set lastHole equal to hole, then we return hole.

We created a function peep(). This function creates a couple variables. A time variable holds the value of a function call to randomTime( 200, 1000 ). A hole variable holds the value of a function call to randomHole( holes ). Then we add a class to hole to make the mole popup. Then we use setTimeout to remove the class based on the time from the time variable. We also check if timeUp is not false before calling peep() from itself.

We created a function startGame() which sets the scoreBoard to zero, sets timeUp to false, sets the score to zero, calls peep(). It also sets TimeUp to true after ten seconds. This is how long the game will last.

Our last function bonk() is called by a click event on a mole. This function first checks to see whether or not the click was simulated. e.isTrusted will be true if it was an actual mouse click. If it is not true we return before anything in the function happens. If it was an actual click then we increment score, remove the up class from the mole, and update the text on the scoreBoard.

I'm amazed at how complex these exercises seem yet how simple the code is.

That's the end.

[joshmade]

Countdown Clock

In session twenty nine we created a countdown timer that will show us how many minutes and seconds are left in a task like a lunch break.

setInterval might not be reliable all the time, like when you switch tabs or on iOS setInterval will sometimes lag when scrolling. To compensate for this we stored now in a variable and stored then which is now plus seconds times one thousand. Then we can use setInterval to display the difference between then and Date.now(). This way if the timer lags or gets off, our time will still be accurate because then is saved.

We created a few functions, displayTimeLeft(), displayEndTime(), and startTimer.

The buttons and input field called the startTimer() function which started the timer().

See ya.

[joshmade]

Video Speed Controller UI

In session twenty eight we created a custom video speed slider that changed the playback speed of the video as you moused over the control. The neat thing about this is that you can increase the speed during some parts of a video and slow it down when you really need to hear what is going on.

We listened for mousemove over the speed bar. When the cursor was near the top of the div we decreased the playback speed. When the cursor was near the bottom of the div we increased the playback speed.

We changed the height of the bar and the text of the bar to reflect the playback speed. And then we set the video.playbackRate = playbackRate.

playbackRate = percent * (max - min) + min;

Our max speed was 4 and our min speed was 0.4.

Talk to you soon.

[joshmade]

Click and Drag to Scroll

In session twenty seven, we learned how to do click and drag from scratch. You can scroll with your cursor or you can click the screen and drag with your cursor. Wes saw this feature on hoverstat.es.

We figured out where someone clicked and if they scrolled to the left 20px, we should scroll the div 20px.

We used several event listeners to accomplish this: mousedown, mouseleave, mouseup, mousemove.

There wasn't a lot of code to get this working but the end result is pretty impressive.

Later.

[joshmade]

Stripe Follow Along Dropdown

Stripe.com has a really neat effect on their dropdown navs. When you hover over each top level nav link, the background of the dropdown seems to morph with the content of each dropdown.

This is session twenty six but back in session twenty two, we played with a simple example of this.

We created two functions to handle the mouseenter and mouseleave events and then add event listeners to each of our triggers.

We managed showing the content and effects by adding and removing css classes. We added a class of trigger-enter and trigger-enter-active after 150 ms.

'this' within the function is the trigger item, li in this case. When you run setTimout within a function, the value of this is of the window.

setTimeout( function() { this.classList.add( 'trigger-enter-active' ); // this is window }, 150);

However, if you use an arrow function, the value of this is inherited from the parent function.

setTimeout( () => { this.classList.add( 'trigger-enter-active' ); // this is window }, 150);

To keep the classes from getting out of sync when we hovered really fast back and forth of the nav items, we needed check if trigger-enter had been added before we added trigger-enter-active.

if ( this.classList.contains( 'trigger-enter' ) ) { this.classList.add( 'trigger-enter-active' ); }

The dropdown is set to display: none and opacity: 0. To achieve our animation we used the two css classes. trigger-enter will change it to display: block. trigger-enter-active will change it to opacity: 1. With transition: all 0.5s set, the dropdown fades in. This is how animations within React or Angular. They use two separate classes to achieve the effect.

With the mouseleave function, we just removed our classes right away, no need for the setTimeout.

Then we used getBoundingClientRect() to get the coords of the dropdown we were hovering and the nav. We used these values to set the properties for the dropdown background. This is another reason we used two classes. We needed the dropdown to be display block so that we get size and position info of the element.

background.style.setProperty( 'width', `${coords.width}px` ); background.style.setProperty( 'height', `${coords.height}px` ); background.style.setProperty( 'transform', `translate(${coords.left}px, ${coords.top}px` );

Really cool exercise.

Talk more later.

[joshmade]

Event Capture, Propagation, Bubbling and Once

In session twenty five we talked about addEventListener.

We started with 3 divs nested with classes one, two, and three.

Note: I've noticed throughout these sessions that when writing our JavaScript, we've defined and initialized our variables at the top of our script, composed our functions next, then added our event listeners last.

When you click on the inner most div, you're actually also clicking on the next parent div, and the next parent div after that, and the body, and the html, and the tab, and the browser, and so on. This is known as bubbling.

How this actually works in JavaScript, the browser will first actually do a capture. It starts at the body, then the div, and works it's way down. It goes from the top down. Then it starts at the bottom and it starts to bubble up. When the bubbling process begins, this is when the events start firing.

divs.forEach( div => div.addEventListener( 'click', logText, { capture: true // default is false } ) );

Specifying capture equals true, the logText will be called on the way down.

By calling e.stopPropagation() in your function, this will prevent the bubbling from happening. If you click on the inner most div with class three, logText() will be called for div.three but will not be called for div.two and div.one.

There is also an option for once.

divs.forEach( div => div.addEventListener( 'click', logText, { capture: true, once: true } ) );

What this does is unbind the event listener after it has been run the first time. It's the same as saying divs.removeEventListener( 'click', logText ); Something like this can be used with a store checkout button.

Peace out.

[joshmade]

Sticky Nav

In session twenty four we learned how to fix position a nav once we've scrolled to it.

When you make an element fixed it is no longer taking up space in the document. It is sort of floating on top of the page.

We listened for the scroll event on the window object. When window.scrollY is greater than of equal to nav.offsetTop, we added the class fixed-nav to the body. Using a class on the body allows us to change multiple elements on the page if we wanted to and not just the nav.

To accomodate for the jerky jump when the nav becomes fixed, we need to add some padding to the body. The amount of padding should equal the same amount of space the nav took up before it was fixed.

document.body.style.paddingTop = nav.offsetHeight + 'px';

One benefit to adding the padding programmatically instead of using a class is that the padding will be more dynamic. If the nav height ever changes we won't have to change the padding amount in the stylesheet.

Next we animated a logo appearing in the nav menu once the nav becomes fixed. Initially the logo is in the nav but it has properties of overflow hidden and max-width 0. When the body gets the fixed-nav class, we change the max-width to 500px (something much larger than it needs to be). We used max-width because width cannot be animated.

One last thing we went over was scaling down the .site-wrap to 0.98 and scaling it back up to 1 when the body gets the fixed-nav class. This added a subtle little zoom effect.

Not a lot of code but it was fun to play with.

Later.

[joshmade]

Speech Synthesis

In session twenty three we are working with the Speech Synthesis API that comes in most modern browsers. This is text to voice.

We used SpeechSynthesisUtterance to hold our message and speechSynthesis.speak to speak the message.

We created a populateVoices function which looped over speechSynthesis.getVoices() and populated a voices dropdown with different voice options.

We created a setVoice function which listened for a change event. It then used find() to locate the voice.name that equaled the selected voice option.

We created a toggle function which ran speechSynthesis.cancel() and speechSynthesis.speak( message ). We added a parameter of startOver with a default of true. So, if startOver is false, we will just stop the speaking. We then called this function from the setVoice function.

We created a setOption function which listened for changes to the rate and pitch sliders and textarea and updated the message value accordingly. message[this.name] = this.value. We called toggle() at the end of the function.

We setup event listeners for the buttons. When the speak button is clicked, we called the toggle function. When the stop button is clicked, we called the toggle function like this, toggle.bind( null, false ) or () => toggle( false ).

The Voiceinator 5000 is complete.

Talk to ya later.

[joshmade]

Follow Along Links

In session twenty two we had a series of hyperlinks and when you hover over a link a pill appears and when you hover another link, the pill resizes and moves across the screen to where your cursor is.

First thing we did was get our triggers. These are things that will be hovered and need a background behind it.

Then we had a span element with a class of highlight. This is what will be manipulated and transformed across the screen.

Then we figured out the width, height, x, and y of the element we hovered. We were able to use a method named getBoundingClientRect() which gave us all of this information. Score!

Then we just had to update the styles for the highlight span. We changed the width and height and transformed the location using translate.

There was one problem. When you scroll down the page, the highlight span didn't exactly line up with the hovered link. We compensated for this by adding window.scrollY to linkCoords.top and window.scrollX to linkCoords.left.

Really cool and simple effect.

See ya.

[joshmade]

Geolocation based Speedometer and Compass

This is session twenty one and we are talking about geolocation and not just latitude and longitude of geolocation but also the heading (like a compass, number of degress relative to N) and speed at which you are moving.

You can fake coordinates in Chrome but you can't fake heading and speed. So the only way to test this is with the iOS simulator that comes with Xcode.

Just like accessing the web cam and microphone, you'll need to have a server (secure origin) by running 'npm install' and 'npm start' from terminal. Note that you'll press control + z to stop browser-sync.

You can use the Safari Web Inspector with your simulator which is helpful for any errors.

Since the code is so short, I'm including it here.

const arrow = document.querySelector( '.arrow' ); const speed = document.querySelector( '.speed-value' );

navigator.gelocation.watchPosition( ( data ) => { speed.textContent = data.coords.speed; arrow.style.transform = `rotate(${data.coords.heading}deg)`; }, ( err ) => { console.log( err ); alert( 'This won\'t run without access to your location.' ); } );

Moving on.

[joshmade]

Speech Detection

In session twenty we learned about speech recognition in the browser. This is where you speak something out loud and the browser types what you said.

SpeechRecognition is a global variable that lives in the browser.

This also needs to run through a server or localhost.

When we talk, it records what we say and adds it to a paragraph on the page. When we stop talking for a moment, the script creates a new paragraph and adds what we say to the next paragraph.

We also explored checking if the speech includes a certain phrase, such as 'get the weather' then we could call a function to get the weather.

See you tomorrow.

[joshmade]

Unreal Webcam Fun

In session nineteen, we played with some cool effects for a webcam.

We have the video from the webcam piped into a canvas element.

You can take photos of the video, add a red effect, add an RGB split, play with the alpha which is like a ghosting effect, and making a green screen.

For this session, we actually needed a server. Because we are playing with the webcam we needed a secure origin, either HTTPS or localhost.

For each effect, we created functions that manipulated each and every pixel. The video is actually just a huge array of color values. I don't know why but I was really surprised at how fast the computer can calculate changes on the pixels and refresh without noticable lag.

Later.

[joshmade]

Tally String Times with Reduce

We learned how to add minutes and seconds in session eighteen. Imagine you had a list of videos and you wanted to know the total time of the list.

We selected all of the elements with a data-time attribute. This gave us a nodeList which we converted into an array using Array.from().

With the array, we used map to first get the time, then map again to split the time at the colon so we could get the minutes and seconds individually. Since we used split, the values were strings which we then converted to numbers by mapping again with parseFloat. Then we converted the minutes to seconds and returned the total number of seconds of each individual video.

Next, we used reduce to get a total number of seconds of all the videos.

Note: If map takes in an array and returns an array. Reduce will take in an array and return anything you want, like a number or a string.

We created a variable named secondsLeft and made it equal to seconds.

We created a constant named hours which was the floor of secondsLeft divided by 3600. After we determined the number of hours, we set secondsLeft equal to secondsLeft modulus 3600 which gives us seconds left after the whole hours are taken out.

We created a constant named mins which was the floor of secondsLeft divided by 60. After we determined the number of minutes, we set secondsLeft equal to secondsLeft modulus 60 which gives us seconds left after the whole minutes are taken out.

And now we have hours, minutes, and seconds.

Talk more later.

[joshmade]

Sorting Band Names Without Articles

In session seventeen we learned how to sort a list without articles such as 'the', 'a', 'an', etc.

We used the sort method which called a function we created that stripped off the articles from the band name before the sort comparison occurred.

function strip( str ) { return str.replace( /(a|an|the) /i, '' ).trim(); }

Keep in mind that when you try to set innerHTML to something that is not a string, .toString() will be called on the variable.

Next!

[joshmade]

CSS Text Shadow Mouse Move Effect

We learned how to make a shadow move with the mouse in session sixteen.

Learned another way to write an assignment.

const width = hero.offsetWidth; const height = hero.offsetHeight;

or

const { offsetWidth: width, offsetHeight: height } = hero; // ES6 destructuring

Something to be mindful of is if you are listening on mousemove, you can get offsetX and offsetY coordinates as you'd expect but when you mouse over a child element the x and y coordinates start over. This means you'll need to do special math in such cases.

let { offsetX: x, offsetY: y } = e;

if ( this !== e.target ) { x = x + e.target.offsetLeft; y = y + e.target.offsetTop; }

Moving on.