Today...
Practice
- Grab the first exercise in Wes Bos’s JavaScript30 program by cloning the repo at https://github.com/wesbos/JavaScript30. Code along with the Video Tutorial to build the rest of the exercise.
The first exercise in Wes Bos's JavaScript is to make a JavaScript Drum Kit in Vanilla JS.
I won't go over everything in the video, but here are a few things I learned or found interesting:
The exercise touched on data attributes in HTML They were used to associate the value of the key to the elements. To create the attribute, prefix it with "data-" plus desired attribute name. More information on data attributes: https://developer.mozilla.org/en-US/docs/Learn/HTML/Howto/Use_data_attributes
When removing a class style, don't use setTimeout() because of the upkeep to change the time in multiple places. Use 'transitionend' event to listen for the end of the event. Wes used querySelectorAll() to create an array of all the key elements. Then he looped through each element and added an event listener. You cannot add an event listener to an array for a "transition end". You must explicitly assign an event listener to each item in the array.
The transitionend event returned every TransitionEvent that occurred. To end the event, he suggested picking the longest transition. In this case, the elapsed time was all the same and he went with "transform" property.
He used the this keyword, to refer to the key object when removing the class. I wasn't familiar with how the this keyword worked and ended up watching ProgrammingwithMosh's video to learn more about it.
Wes then displayed, in the console, the "playing" class being added then removed as the key is pressed. The classes "key" and "playing" were separated by a space to indicate multiple classes in HTML element.
Next is Practice #2:
- Watch the Event Capture, Propagation and Bubbling video from Wes Bos’s JavaScript30 program. If you want to code along with the video, you can use the contents of folder #25 from the repo you cloned above.
Frontend Newsletter Articles
Recently, I signed up for a lot of different frontend newsletters to keep up on what's going on in the community. Here are some cool articles I've been looking through:
Frontend Focus
https://www.iamdeveloper.com/posts/frontend-developer-resources-2022-4cp2/
CSS Weekly
https://www.aleksandrhovhannisyan.com/blog/writing-better-css/?utm_source=CSS-Weekly&utm_campaign=Issue-488&utm_medium=email
Top comments (2)
thanks for sharing.
No problem! Thank you for reading!:)