A week with Wes Bos’s JS30 Pt 1

Took a small break to have fun and practice with the totally free #JavaScript30 by Wes Bos, here’s what I learned and loved!

I had signed up for JS30 at the very beginning of my JavaScript journey, in April?? I remember looking at the projects and being absolutely terrified. Since I’ve wrapped up Tier 1 of P1xt, and soon to be beginning a few courses in Racket Language, I thought I’d freshen up with a bit of VanillaJS. It’s amazing how much I had learned in a few months. I spent a few hours each day on this (each lesson is going to take about 30 minutes depending on if you watch the video first or spend time on MDN), and it took me a little over a week to get through. You could do an exercise each day for a month, but I tend to go H.A.M. on these things.

If you just want to visit my repo with all the solutions, feel free to go HERE.

I’m not going to write much about every challenge, as many have done this before me, but I’ll highlight the things I learned which were especially exciting. All of the challenges were beautifully designed and don’t take more than an hour each. I got a few done each evening over the last week or so, which working on my template clone by day. I’m glad to say each and every lesson taught me something new. Lastly, each project on its own is pretty small but could be a jumping point for a large fun project, or part of something else.

• Drumkit: The first challenge reminded be about attribute selectors in CSS/JS, as opposed to class/ID selectors these can also be useful. I used a lot of the video for this, because I was scared of the data-key attribute, it also reminded me about the new ES6 Templating markup.
• Clock: The second challenge I attempted without much help from the video, and with a few visits to MDN to review the Date() methods I was able to do it! I needed a bit of help to make the fun Bezier function from Chrome, which is a neat little design tool.
• Picture Editor: I didn’t know about new CSS variables (though of course I knew about Sass!). I actually did a bit of research and put together some sloppy code of my own first, with a separate event listener using mouseup for each input, it mostly worked… Once I watched the first 7–8 minutes of his video, introducing the change and mousemove listeners, along with a refactoring via querySelectorAll, .forEach, this and especially this.dataset, I was able to finish it off on my own in a tidier and DRY-er fashion. My original code has 12 lines, and I brought it down to 7!
• Array Cardio: I love cardio so this was fun too. I made a point a few months back to learn functional JS basics and to implement them, so most of these were familiar. Take a look at the MDN documentation before this exercise, it’ll help a lot! I did find an easier way to complete exercise 7, without bothering to split the arrays the sort function will still work. Fun learnings: console.table
• Image Gallery: I am not the strongest with flexbox, so I needed to code along for the whole video. A reminder about this binding with arrow functions i.e. the following code will not behave as expected:

Instead you’ll need to use a anonymous function expression to get this bound as required. Or better, write a named function to call.

Go Go Go!

• Ajax TypeAhead: This is something I wanted to implement back in my wiki viewer, but never got around to. I got a lot of this done on my own, a bit of MDN-crawling required to remember XMLHttpRequests, then I watched his video to polish it up. He used fetch and a few other things I didn’t (he held cities in an array, I used a JSON.parse call). He used a RegExp and I used the .includes to search. Our functions were designed in very different ways. I enjoyed the regex practice in this one, I need it!
• Array Cardio Day 2: A fun and brief intro to some new (to me) methods on Arrays which are some, every, find and findIndex. Special shoutout to using spread operator to make new arrays!
• HTML5 Canvas: An entirely new subject for me, outside of playing a bit with paper.js, I’ve never used HTML canvas before, so I learned a lot of interesting methods on the canvas context object, and I was thinknig to include a bit of canvas background animation to a future portfolio
• DevTools: Mostly fun with console.xxx tools, and a bit on breakpoints. Nothing earth shattering but we have many ways to debug ;)
• Hold Shift and Check Boxes: Wes was really adamant that we try this one ourselves first, so I went ahead and did it. Actually mine worked out pretty well, the code itself could be improved. Again, a lot of help from MDN but I was also happy for the previous Array videos. My code below. Honestly, I had trouble to understand his algorithm the first time and had to view it twice. Also I just noticed we solved slightly different problems, mine requires that the user is hitting shift for the initial selection!

my version to solve the checkboxes

Coffee Break!

• Custom Video Player: First thought? OMG 25-minute video. I started off following along closely with Wes, but after viewing the methods and properties of videos, it became pretty straightforward to figure out the various requirements. Been unable to figure out the fullscreen requirement, another //TODO
• Konami Code: I sat down and thought about this one for a while, for sure it would need to involve strings and/or arrays. Logging each keypress into a pressed array was the first step. Then you need to check if the keys pressed matches your secret code. First I tried with a loop, but any loop can usually be replaced with a better function, in this case, the includes method. My solution is a tiny bit different than Wes’s, if the code is never input, mine will log keys indefinitely. He cleverly implements a splice function to keep the length of pressed to that of the code.
• Slide In On Scroll: This project is useful for adding some animations to say a portfolio, article, etc. Wes provides with some starter code, a function called debounce, which prevents the event from firing too often. I got pretty far in this one myself, missing a bit of the scroll in and out logic. A lot of console.log required for me to keep straight all the numbers (top/bottom of window and top/bottom of image.
• Objects/Array Copying: Thank you a ton to YDKJS for teaching me this already! If you haven’t read that series you totally should. My hint is: if you find yourself writing code that requires deep copying of objects/arrays, seriously consider refactoring.
• localStorage and Event Delegation: This one is a doozy at 30 minutes, one of the longest courses in the series! Like HTML5 Canvas, localStorage is a completely new animal for me, I think it could be helpful in future app writings as well! The first thing I remembered is that to listen for a submit event and not refresh the page, you need to preventDefault, thanks Colt Steele. Another important topic, event delegation, refers to when you “trust” a parent element to “report” on what happens to its child elements. If you want to assign event listeners to objects that haven’t yet been added to the DOM, this is how you do it. I like how it seems now these projects are re-using old topics, like data-xxx properties and fun with templating. Wes gives a last //TODO to implement a clearAll, checkAll, unCheckAll buttons…!

I’m going to sign off now, videos 16–30 will be published in a few days time. Nobody is going to read a 15-minute-long Medium article these days. Until then, keep coding forward!