1. JavaScript30 day 22: Follow along links

    The goal for this challenge was to create a hover state that follows the cursor. The end result is a highlight that jumps from link to link: demo. There’s some interesting things going on to get the dimensions of the...

  2. JavaScript30 day 21: Geolocation based speedometer and compass

    In this challenge I used the Geolocation API to show a user’s speed/direction on screen. Playing around with the iOS emulator was a bit fiddly but I managed to get something working. I’ve had mixed results with the live demo....

  3. JavaScript30 day 20: Native speech recognition

    window.SpeechRecognition opens up a world of possibilites in the browser! This tutorial put spoken words on screen and hints at what else could be built - you can have keywords that call specific functions (e.g. asking for the weather). The...

  4. JavaScript30 day 19: Webcam fun

    It was quite fun accessing my webcam and playing around with RGB filters - all with HTML, CSS and JavaScript! Here’s the latest demo. I discovered a new event: canplay which fires when a video is detected and has buffered...

  5. JavaScript30 day 18: Adding up times with Reduce

    Challenge: Add up a list of times stored in list item data attributes. To do this we need to get minutes and seconds separately, store in an array, convert to seconds and add them together. I’ve done something similar before...

  6. JavaScript30 day 17: Sorting band names without articles

    Today’s challenge was to use of Array.prototype.sort() to sort a list of band names alphabetically. The challenging part was to ignore the articles A, An or The at the start of a name. My initial solution was quite long and...

  7. JavaScript30 day 16: CSS text shadow mouse move effect

    Today’s challenge was to animate the text-shadow of a word. offsetX, affsetY and a bit of maths was all that was needed. Notes offsetX and offsetY give you the position of your cursor on screen. Template literals are a huge...

  8. JavaScript30 day 15: Local storage and event delegation

    Today’s goal was to persist the state of a todo list using local storage. Notes ‘Preserve log’ in Chrome’s console is handy. It keeps messages that may flash on the screen too quickly and lets you know if the page...

  9. JavaScript30 day 14: Object and arrays - reference vs copy

    Updating a reference to an array/object will update the values in the original array/object. A way around this is to make a copy - there are a few of ways to do this: Make a copy of an array Array.prototype.slice()...

  10. JavaScript30 day 13: Slide in on scroll

    Ah scroll events. Not great for performance but people seem to like them! Today’s challenge was to animate images into place as the page is scrolled down. There’s a bit of maths based on screen position and image position but...