Hello, hello!

It’s Day 1 of the JavaScript 30 course.

Overview

Today’s assignment is building a drum kit. The starter code sets you up with the sounds, a fancy background and keys, the css with transitions already in place, and your job is to make it function.

What I Learned

I actually learned quite a bit today! Not a whole lot in JavaScript, but that’s only one aspect of being a developer.

First, I challenged myself to use my terminal to set everything up and not rely on the GUI directory system. I set up my own repository, cloned Wes’ for the starter code, and needed to copy the directory for Day 1 into my own repo. I have only copied files before, never a directory, and today I learned that using the -r flag will make that possible.

Second, I learned the semantic HTML tag <kbd> to use for keyboard input from a user. I’ve never come across this tag, and it made me curious to go through and quickly browse all the tags again. I didn’t spend a lot of time here, but A11y is super important and the more you know, the better it is for everyone.

Third, Wes mentioned keycode.info as a resource he likes to use to find out what code each key is represented by, and this is so fun! Much better than googling a table.

Fourth, I had seen data-* attributes before, but I had never looked into them. Wes quickly explained that they are used to embed custom data in a semi-standardized way. You have to use data- and can then follow it with any lowercase string. You can then access that in javascript like you would css attributes. Super cool.

Fifth, I had worked with the audio HTML tag before in very basic application, but never looked into the object properties I only added in controls previously as an HTML attribute. There are a whole lot more functions I’d like to play around with.

Sixth, and last I’ll list, I promise, I only ever played with transitions in css. When they ended, they ended. Never occurred to me that you could be able to listen to the transitions using JavaScript. Of course, that seems obvious now. When Wes was going over it, I wondered about animations, too, since I have that on my Want-to-Learn list this year, and he mentioned that (again, of course) you can listen to animations the same way! Huzzah!

Biggest Challenge

Today wasn’t all that challenging. I didn’t think it would be, given that it’s the first day and if he made it difficult immediately, interest would wane fast.

That said, I did try to challenge myself by doing as much as I could before watching through the video. I didn’t have a ton of time today, but I would pause before he wrote any further code and try to guess where he was going next. I would then compare what he was doing with what I had thought of.

Considering today was a bunch of event listeners, I didn’t stray from what he was thinking.

Tomorrow I’ll leave myself more time and complete the exercise by myself, or at least until I get stuck, and then watch through to the end for his full solution.

Future Iterations

To improve upon the project and continue to test my skills, I want to add options for sounds. The drums are fun, but what about switching it to a piano? Or a guitar? Or a harmonica?

How difficult would it be to add tracks? I’d like to set the option to use an extra key to set the play to repeat, and give the user the ability to speed up or slow it down after putting the sound on repeat.

I suppose, ultimately, I’d like to take the project from a simple drum kit to a fully functional recording keyboard.

Conclusion

Day 1 was a lot of fun, and it really got my developer brain thinking. I’m looking forward to Day 2 and what else I’m going to learn, not just about JavaScript, but all the other useful skills to pack away in my bag as a developer.