I'm taking the JavaScript30 course by Wes Bos. I've seen several recommendations for this challenge, but it was Kent C Dodds whose recommendation finally pushed me to sign up and check it out.

I'm going to keep a diary here of my experience. After I finish each day, I'll provide a short list of the key concepts and a brief writeup on my thoughts.

Hopefully this will be a good article for people who are curious about what the experience is like or working along and want to compare notes.

Day 1: JavaScript Drum Kit

Concepts:

• key events (these)
• Web Audio API (this)
• Listener for trasitionend event (CSS transitions)
• data attributes

Thoughts:

Wow: that took more time than I'd have liked. But, what a strong exercise to start on. As a musician, it was a really cool experience. I've never used the Web Audio API, so I had to read quite a bit to find the documentation for available methods. I like the way he snuck in el.classList property. That's a great jQuery alternative.

Day 2: CSS + JS Clock

Concepts:

• transform-origin (CSS)
• transition-timing-function (the easing curve can be shaped manually in Chrome DevTools!)
• setInterval()
• Date()

Thoughts:

Okay. This is a very well-designed course. I just built an analog clock! I honestly learned more about CSS than JS with this one, because I've used setInterval() and Date() plenty, but I've never used the transform and transition properties to achieve the effect of rotating clock hands.

Day 3: Playing with CSS Variables and JS

Concepts:

• CSS Variables
• NodeList (this, which has a different prototype from standard arrays)
• dataset property in NodeList prototype (to access data attributes)

Thoughts:

Again, I feel like I'm learning more about CSS than I expected, but I'm not complaining. This is awesome. I did not know that CSS had native variables yet. But it does, and unlike preprocessed styling (Sass, Less, etc.) they can be updated dynamically by JavaScript... in runtime!

Day 4: Array Cardio 1

Concepts:

• map()
• reduce()
• filter()
• sort()
• console.table()

Thoughts:

I've mentioned the last few days have been CSS heavy, not the case today. While I'm familiar with all these array functions, it's always fun to get another chance to use them. I was not familiar with console.table and it's highly useful for visualizing standard output in the console. My favorite exercise was scraping the Boulevards of Paris from Wikipedia.

Day 5: Flex Panels Image Gallery

Concepts:

• flex (css)
• event-driven class toggle
• transform: translate()
• cubic-bezier

Thoughts:

Very cool exercise. I really enjoy the ones like these that touch on event-driven transitions and animations via class toggle. It's such a common pattern, but the possibilities for creative interactivity are endless. I didn't learn many new concepts per se, but it was a very creative and unique idea.

Stay tuned...

Day 6: AJAX Type Ahead

Concepts:

• Fetch API
• Promises & then()
• json()
• Spread syntax

Thoughts:

This is the best pattern (common and useful) for filtering large datasets in realtime as a user interacts with a form. I always appreciate when this type of feedback is provided into the UI.

Day 7: Array Cardio 2

Concepts:

• .some()
• .every()
• .find()
• .findIndex()

Thoughts:

I love arrays. JavaScript provides many useful methods for operating on arrays. Knowing all the methods and when to use them is a very useful skill for a JS developer.

Day 8: Fun with HTML5 Canvas

Concepts:

Thoughts: