Practice Makes Permanent: #JavaScript30 — Day 1
In order to practice vanilla JavaScript and help land my first job as a software engineer, I am undertaking Wes Bos’ #JavaScript30 challenge
Last week I completed The Grace Hopper Program at Fullstack Academy, a 17-week intensive software engineering program, centered on full-stack JavaScript development. But over the past few months, while we always used JavaScript, we also focused on learning other technologies: Node.js, Express, Sequelize ORM for PostgreSQL databases, React and Redux, HTML & CSS, Socket.io, and for myself in particular Three.js and Phaser.io.
When preparing for graduation, our instructors recommended we practice our vanilla JavaScript in addition to algos and mock-interviews for successful job hunting. And then, amazingly, one of my capstone partners found this course and shared it. Wes Bos’ #JavaScript30. A course for short, complete vanilla JavaScript (HTML and CSS as well) designed to be done everyday for 30 days. Myself and 2–3 of my peers decided it was a perfect way to practice JavaScript, keep on a schedule, pair code as well as complete solo-projects, and still manage all it takes to job hunt and prepare for technical interviews. I will not be doing a challenge everyday, but I do aim to get through all 30!
DAY 1
Wes Bos says you can complete these activities in a variety of ways. He provides a video with the activity overview, then you can pause and attempt it, or you can continue watching the video for their process and then attempt it on your own. For Day 1, three of us decided to take on the challenge together. That challenge was creating a Drum Kit where if you hit a specific key on your keyboard, it would light-up, make a sound, and return to normal.
And above is the result! The solution only needed about 20 lines of script, but it was excellent practice for CSS class types, querying from the DOM, and adding eventListeners. We hit two points of notability.
- A typo in the word transform. It was ‘tranform’ for about 30 minutes before the bug was found. I took away a reminder to do a thorough and slow code review before trying too many new solutions. Many were not necessary and time could have been spent more efficiently.
- As mini activities, the code is short, so Wes Bos contains their script in their html file. But anything longer than a few dozen lines can get very messy. So we decided to move our script into its own file in order to allow for scalability and legibility.
From start to finish, Day 1 took a little over a couple of hours. This certainly could have been done faster. That typo! But we also spent time looking into best code practices and documentation on potentially deprecated code and thought through changing the file structure and simplifying our solution code to be as clean as possible. It was time well spent and a good hands-on practice working DOM elements.
Day 1 was a fun, satisfying challenge that provided practice and a decent amount of achievable challenge. If you want to check out the code, here’s my repo: I’ll be adding 29 more soon!
