Day 21 to 25

This is a series of posts going over the free JavaScript 30 course by Wes Bos that gets you to work through 30 vanilla (no framework) JavaScript ideas. Each post will cover a few days from the course. This is totally free and well worth taking a try at. As someone who hasn’t used JavaScript much in the last few years it was a great way to get myself rolling again and see all the cool things you can do with what’s built into the browser!

For reference each of the day comes with a set of files to start from - CSS and HTML was prebuilt. I just added the JavaScript.

Day 21 - Geolocation

• this one turned out to be really hard but not because of the JavaScript but due to getting Xcode and the iPhone simulator working, I was never able to 😢
• we did use browser sync to get a local server running as you won’t be able to get the information from the browser using a local file
• it was cool that browser sync also gave you an IP address you could use on your phone to load up your page
• the geolocation.watchPosition function is called back based so we needed to create functions to handle that which was pretty simple

Day 22 - Follow Along Link Highlighter

• this one required a bunch of string literals and more coordinate and scroll work
• using this.getBoundingClientRect() to get the various coordinates we needed made it much easier to do

Day 23 - Speech Synthesis

• now we got to work the other way around and had the browser speak to us, all this out of the box stuff is pretty amazing to be honest!
• there are a bunch of built in voices, if you use a non-english one they will speak in english with an accent, note emojis will be spoken in their language
• to get it to speak you need to create a SpeechSynthesisUtterance

Day 24 - Sticky Nav

• I’ve wanted to build a sticky nav for myself in a few upcoming projects so this was a fun one
• one pro-tip was to take into account nav height so that as you scroll it is buttery smooth. You do this by adding padding to the top for the amount of the nav if you are not past it then the padding would be zero

Day 25 - Event Capture, Propagation, Bubbling, and Once

• this was a more technical one explaining how event bubble up
• the page had 3 divs that were nested in each other so we could see what we had clicked on
• we also saw how to use event listener options like capture which will disable or enable bubbling and once which allows you to run it only once and then remove the handler or normally