Javascript30

Day 1: Drum kit 🎼

Learnings

• <kbd> element exists for keyboard input
• transition events and their objects
• that there are functions and properties available for specific elements e.g. .play(); and .currentTime

It also took me a little while to realise that the numerical value of the data-key attribute on the <div> and <audio> elements isn’t technically the same thing as the keyCode value generated from the keyDown event - they’re just the same number being used to link the two together.

Day 2: JS + CSS clock 🕙

Learnings

• transform-origin CSS property
• transition-timing-function CSS property and the cubic bezier explorer tool in Google Chrome Developer Tools
• setInterval() function
• Date object
• getSeconds(), getMinutes(), getHours() functions
• CSS gradients

I reskinned the provided clock to match a real one sold on Trouva and am very happy with the result.

Day 3: Scoped CSS variables & JS 🔅🔆

Learnings

• filter CSS property
• NodeList forEach() method
• change event
• a dataset object is an object that contains all the data attributes from a particular element

The solution to this day’s challenge was simple, but required previous knowledge of ES6 syntax and methods so the learning curve was a little steep.

Day 4: Array cardio I 💪

Learnings

• all the array functions like filter, sort etc
• console.table() function
• slightly more clarity around arrow/inline functions & ternery operators
• .map() will always return the same number of array items that it takes in
• template strings

This was a very light introduction to array methods and I don’t think I fully grasp them yet.

Day 5: Flex panels image gallery 🌄

Learnings

• more handling of event objects
• e.propertyName.includes('') check

I really like the practical applications of these small transition effects. This was another quite fast-paced tutorial but lays the ground for lots of fun ideas for animation page items.

Day 6: AJAX type ahead 🔮

Learnings

• fetch() method
• Javascript promises
• ES6 spreads
• changes events only fire when you go off the element
• RegExp()'' object
• global and insensitive flags for regex objects

Day 7: Array cardio II 💪💪

Learnings

• putting curly brackets round a variable in console.log() shows the name of the value

This challenge was completely filled with new array methods. I think it will be useful to return to in the future as a reference. Again the ES6 syntax was a little hard to grasp.

Day 8: HTML5 canvas 🎨

Learnings

• the context is what is drawn on, and this can be 2D or 3D
• ES6 functions can be inline or block

Loved this one.

Day 9: Console tricks ✨

Learnings

• string interpolation
• debugging/pausing using the console
• passing in arguments to console.log() to style the text in the console
• console.warn()
• console.error()
• console.info()
• console.assert()
• console.dir()
• console.group()”, console.groupCollapse()

Right at the end of this one was a brief look at fetching data from an API. I want to explore that further in a personal project.

Day 10: Hold shift to check multiple checkboxes ☑️

Learnings

• input Checkbox checked Property and how to set it

The logic to this one was really clever. The event objects have more capability than I realised, and being able to set checkboxes to checked via Javascript is easier than expected.

Day 11: Custom HTML5 video player 📺

Learnings

• :fullscreen pseudo class
• step attribute for slider elements
• that you can call querySelector() on node/object variables
• video element paused property
• accessing data attributes with dataset
• parseFloat() method
• timeupdate video event
• using ES6 function arrow notation to check if a variable is set to true before continuing running the function

While still a bit iffy on arrow functions (and it’s clear that’s an area I need to revise in-depth), I was able to build out additional functionality with a mute button. The button uses a little speaker emoji to indicate the status of the mute, and is linked to the adjacent volume slider which also mutes when it reaches zero while saving its current state. I found this challenging at first, before realising the video’s volume remains at its value, regardless of the video’s mute status.

I also added a restart playback button.

Day 12: Key sequence detection 🔍

Learnings

• join() method to convert arrays to strings
• includes() method

The splice calcuation blew my mind a little. I don’t think I could have figured out how to calculate/return the user’s typed input on my own.

(The secret code to type is ‘unicorn’).

Day 13: Slide in on scroll 🔜

Learnings

• scroll event listener
• performance issues with detecting scroll & the need for debouncing
• that you can set default function argument values as initial arguments (I think I already knew this but definitely a great refresher/example)
• window.scrollY and offsetTop properties
• how to access the height and width of DOM elements

It was really helpful to learn how the different properties of the images and the window can be used to calculate positions and heights. This felt like a real-life example of on-page animation that will be good to return to.

Day 14: References vs copying 👥

Learnings

• if you update an referenced array or object it will always reference back to the original
• empty slice() method with no arguments returns a copy of all the array data, concat() and ES6 spread work similarly
• using assign() creates a copy for objects, but only 1 level deep
• using JSON.parse() and JSON.clone() can make a deep copy but isn’t recommended

Day 15: Local storage & event delegation 📦

Learnings

• submit event listener
• ES6 shorthand for assigning object properties
• form elements reset() method
• localStorage converts things to strings
• that you can use OR operators in variable assignments
• event delegation
• e.target
• matches() method from the browser API

Day 16: Mouse move shadow 🐭

Learnings

• contenteditable HTML attribute
• that you can use document.querySelector() on an element that you’ve already selected using it
• how to adjust for the offset of the target element when hovering over those that are nested within others

This is incredibly clever. Before it started I thought the solution would be simple, but it really isn’t and I couldn’t have figured out the maths for this! It seems useful for some fun page styling, so glad to know how it’s done.

Day 17: Sorting without articles 🔤

Learnings

• sort() method on arrays and how to pass a function with two options to compare
• regex for stripping “a”, “the” or “an” and how to make it insensitive
• setting an array to innerHTML will call toString() and put a comma between each item - so using join('') will remove the commas

I kept my version of the code without ES6 as much as possible for readability (until I can better grasp ternerary operators, arrow functions and implicit returns at a glance without my brain exploding).

Day 18: Tally string times with reduce ➕

Learnings

• how to split out the time in minutes and seconds, convert to float and total them

My main learning from this is how methods can be strung together to perform several things at once - the solution here is quite elegant.

Day 19: Webcam fun 🎥

Learnings

• passing an image’s data into HREF gives you an image

There’s so much in this tutorial - not just the image manipulation but how to grab the webcam data and get it back on the page. Basically absolutely everything in this was a new thing.

Day 20: Speech detection 💬

Learnings

• the fact that speech recognition exists in the browser!
• how to listen for phrases and output responses

This is so cool - there are so many potential areas for use for something like this. I didn’t realise speech-to-text transcription essentially comes out the box in most browsers.

Day 21: Geolocation 🌏

Learnings

• how to access a device’s location and speed
• setting appropriate error messages if authorisation to access location is denied

I wasn’t able to test this one without XCode or running around outside with my phone.

Day 22: Follow-along link highlighting ☀️

Learnings

• getBoundingClientRect method
• how to set the width and height of a hover state

Day 23: Speech synthesis 🔊

Learnings

• speech synthesis API is available in most browsers
• using find() to loop through an array and match a value to a property
• various methods available to speak, stop speaking and change voices
• setting a flag as a default for a method’s parameter, but this can’t be passed with the flag to an event listener - you have to pass a function

I added some code to change the default language and filter to fewer languages.

Day 24: Sticky nav 🔝

Learnings

Very short and simple sticky nav after user scroll reaches a certain height. I like the CSS technique for applying the class via the <body> element and cascading to the elements within it to adjust the stickyness of the nav and placement of the main content.

Day 25: Event capture, propagation, bubbling and once 💥

Learnings

• the concept of ‘bubbling’ - triggering events on all parent elements in the document
• ‘capturing’ goes top-down; ‘bubbling’ goes back up
• passing a third argument in a event listener is an ‘options’ object and you can set if you want it to fire on the capturing
• stopPropagation() method will stop the bubbling up
• the ‘once’ option - which unbinds the event listener

Not much in the actual demo for this one but the concepts are very useful.

Day 26: Follow-along navigation ⤵️

Learnings

• that you can use a full CSS selector in querySelector() methods (with child or sibling selectors)
• mouseEnter and mouseLeave events
• in ES6 arrow functions, the value of this is inherited from any parent functions
• getBoundingClientRect() is used to get the bounding box of an element, but you need to account for extra elements above the content you want to place - which is taken care of in jQuery with offset() for you
• .style.setProperty(x,y) works by taking in the property as x and the thing you’re setting it to as y
• you can’t tell the width and the height of a hidden element
• classList.contains() checks if an element has a class
• the second portion of a statement evaluating using && won’t run if the first doesn’t evaluate to true (I think I already knew this on some level, but this was a great reminder!)
• perspective CSS property

This was a good recap on ES6 template strings and setting styles with Javascript, as well as a really nice animation effect based on a menu on Stripe’s website.

Day 27: Click and drag to scroll 🔛

Learnings

I love the maths used here - what x values to grab and how to calculate the scroll’s position.

Day 28: Video speed controller 💯

Learnings

• how to calculate a playback rate using the current mouse position within an element when it uses a different scale

Day 29: Countdown timer ⏳

Learnings

• Date.now() and clearInterval() methods
• use document.title() to update the title tag, which displays content in the tab top in the browser window
• passing the number of milliseconds past 1st January 1970 to a new Date object gives you a formatted timestamp
• how to access custom data attributes on elements using dataset property
• how to use clearInterval() to reset any existing timers
• if an HTML element has a name attribute, you can use dot notation to select it immediately without using docuement.querySelector etc, and further dots can be used to grab any named nested elements within
• the reset() method

Day 30: Whack-a-mole 🐹

Learnings

• returning a function within itself can help perform a check on its output, and is a form of recursion
• setTimeout() method to do something after a certain amount of time
• how to usefully calculate random numbers
• that you can use the isTrusted property on a mouse event to check if the click truly came from the user’s device (as opposed to Javascript)

It seems simpler to build a whack-a-mole game than I was expecting! I’d love to try making another tiny game from scratch sometime.