JavaScript30 by Chris Burnell Welcome to my attempt at this 30-day JavaScript challenge! The Challenges 24. Sticky Nav Another Intersection Observer one. Not much else to say. published 30 October 2020 23. Speech Synthesis Today’s was pretty fun to work through, which I managed to do mostly without the video at all. I’m feeling like these skills are really solidifying themselves now, especially those ES6 Array methods. published 29 October 2020 22. Follow Along Links Nothing much to today’s challenge either; nailing down what we’ve learned, I suppose. published 28 October 2020 21. Geolocation based Speedometer and Compass Interesting but very short challenge today; although, I can see myself using this on walks, if I could get it to work… published 27 October 2020 20. Native Speech Recognition While this one was fun, there wasn't a lot for me to learn from it. published 26 October 2020 19. Unreal Webcam Fun Genuinely fun stuff today! Not sure how often this will come into use, but it was definitely interesting to learn about how to handle a stream of video (I used requestAnimationFrame after all) and how to manipulate a stream of pixels being painted to the canvas. published 25 October 2020 18. Tally String Times with Reduce Not much to say about this one today; although, I'm feeling a lot more comfortable with reduce after practicing quite a bit! published 24 October 2020 17. Sorting Band Names without articles Had fun with this one today, ended up really close to Wes’s solution in the end as well… published 23 October 2020 16. CSS Text Shadow Mouse Move Effect I love fun little effects like these, and this one was a lot of fun to make! I also made further use of my range-mapping function. published 22 October 2020 15. LocalStorage and Event Delegation LocalStorage is great—I need to spend more time playing with it! published 21 October 2020 14. Object and Arrays - Reference VS Copy Not much to show today! published 20 October 2020 13. Slide In On Scroll Intersection Observer to the rescue today! published 19 October 2020 12. Key Sequence Detection (KONAMI CODE) This was a fun exercise that I completed without going along with the video, except for the corny bit at the end! published 18 October 2020 11. Custom HTML5 Video Player Found this one a little long, but was nice to revisit controlling media. I've never built a custom set of controls before, so this has also spurned me to revisit my old Media Controls project. published 18 October 2020 10. Hold Shift to Check Multiple Checkboxes Struggled with writing something performant for today's challenge. Still not entirely happy with what I came up with… but hey, this is what multi-select elements are for, right?… published 17 October 2020 9. 14 Must Know Dev Tools Tricks Pretty sparse on the visuals today, but again, useful to run through options when firing data into the browser console! published 15 October 2020 8. Fun with HTML5 Canvas This one was fun! Enjoyed thinking about where else I could take these concepts with canvas and tried implementing a very rough map for mouse velocity to lineWidth. published 14 October 2020 7. Array Cardio Day 2 Quick and easy one today! published 13 October 2020 6. Ajax Type Ahead An interesting challenge today. I changed a few (minor) things to be a bit cleaner, but the gist of the challenge remains the same. published 12 October 2020 5. Flex Panels Image Gallery Found today's pretty heavy on CSS, rather than JS. Interesting component to code up though. published 11 October 2020 4. Array Cardio Day 1 I'm a bit sad that today's challenge doesn't really have any visual aspect to show off, but it was good to be put through my paces and test my mettle with ES6 Array functions. (You'll have to look at the console for this one!) published 10 October 2020 3. Playing with CSS Variables and JS I felt pretty comfortable with this one. One thing I really wanted to solve was the repetition between the HTML's input values and CSS variables, so I had a little trouble keeping my JS free from repetition as well, but managed it after reading into addEventListener() and the ever-elusive this. published 09 October 2020 2. CSS + JS Clock Not quite as challenging as as the first, but nice to refresh myself with the Date object. published 08 October 2020 1. JavaScript Drum Kit I really enjoyed starting this challenge; it was actually a great first challenge for me because I’ve had a lot of fun tinkering with interactions triggering audio events and the Web Audio API. Shout out to Ru Singh for putting this on my radar and giving me the push to make it a daily challenge for me! published 07 October 2020 Go to JavaScript30.com for more details and to get started yourself! Pals also working through these challenges: Ru Singh
23. Speech Synthesis Today’s was pretty fun to work through, which I managed to do mostly without the video at all. I’m feeling like these skills are really solidifying themselves now, especially those ES6 Array methods. published 29 October 2020
22. Follow Along Links Nothing much to today’s challenge either; nailing down what we’ve learned, I suppose. published 28 October 2020
21. Geolocation based Speedometer and Compass Interesting but very short challenge today; although, I can see myself using this on walks, if I could get it to work… published 27 October 2020
20. Native Speech Recognition While this one was fun, there wasn't a lot for me to learn from it. published 26 October 2020
19. Unreal Webcam Fun Genuinely fun stuff today! Not sure how often this will come into use, but it was definitely interesting to learn about how to handle a stream of video (I used requestAnimationFrame after all) and how to manipulate a stream of pixels being painted to the canvas. published 25 October 2020
18. Tally String Times with Reduce Not much to say about this one today; although, I'm feeling a lot more comfortable with reduce after practicing quite a bit! published 24 October 2020
17. Sorting Band Names without articles Had fun with this one today, ended up really close to Wes’s solution in the end as well… published 23 October 2020
16. CSS Text Shadow Mouse Move Effect I love fun little effects like these, and this one was a lot of fun to make! I also made further use of my range-mapping function. published 22 October 2020
15. LocalStorage and Event Delegation LocalStorage is great—I need to spend more time playing with it! published 21 October 2020
12. Key Sequence Detection (KONAMI CODE) This was a fun exercise that I completed without going along with the video, except for the corny bit at the end! published 18 October 2020
11. Custom HTML5 Video Player Found this one a little long, but was nice to revisit controlling media. I've never built a custom set of controls before, so this has also spurned me to revisit my old Media Controls project. published 18 October 2020
10. Hold Shift to Check Multiple Checkboxes Struggled with writing something performant for today's challenge. Still not entirely happy with what I came up with… but hey, this is what multi-select elements are for, right?… published 17 October 2020
9. 14 Must Know Dev Tools Tricks Pretty sparse on the visuals today, but again, useful to run through options when firing data into the browser console! published 15 October 2020
8. Fun with HTML5 Canvas This one was fun! Enjoyed thinking about where else I could take these concepts with canvas and tried implementing a very rough map for mouse velocity to lineWidth. published 14 October 2020
6. Ajax Type Ahead An interesting challenge today. I changed a few (minor) things to be a bit cleaner, but the gist of the challenge remains the same. published 12 October 2020
5. Flex Panels Image Gallery Found today's pretty heavy on CSS, rather than JS. Interesting component to code up though. published 11 October 2020
4. Array Cardio Day 1 I'm a bit sad that today's challenge doesn't really have any visual aspect to show off, but it was good to be put through my paces and test my mettle with ES6 Array functions. (You'll have to look at the console for this one!) published 10 October 2020
3. Playing with CSS Variables and JS I felt pretty comfortable with this one. One thing I really wanted to solve was the repetition between the HTML's input values and CSS variables, so I had a little trouble keeping my JS free from repetition as well, but managed it after reading into addEventListener() and the ever-elusive this. published 09 October 2020
2. CSS + JS Clock Not quite as challenging as as the first, but nice to refresh myself with the Date object. published 08 October 2020
1. JavaScript Drum Kit I really enjoyed starting this challenge; it was actually a great first challenge for me because I’ve had a lot of fun tinkering with interactions triggering audio events and the Web Audio API. Shout out to Ru Singh for putting this on my radar and giving me the push to make it a daily challenge for me! published 07 October 2020