Tag: javascript30

JavaScript 30 – Day 4

Posted on Posted in UncategorizedTagged , , , , , , , , , , , Leave a comment

Array cardiooooo! Thanks to Wes, I can say I got some cardio in today, because goodness knows I didn’t get a jog in. 😬 I digress, let’s talk about all the array methods!

Overview

Array methods were the star of this day. Map, reduce, sort and filter were used to manipulate some predefined data, each one getting a little more challenging.

What I Learned

While I have been exposed to all of these concepts, including destructuring and arrow functions, I have only extensively used map and filter. Since those were at the beginning, I was doing pretty well. Even the first sort I did fine with. Then reduce I came to a screeching halt as I have only used it a handful of times.

Biggest Challenge

The sort and reduce array methods for sure. Reduce more so than sort. I need to get a lot more practice in with these methods until I can visualize them in my head like I can with map and filter.

Future Iterations

I think the best way to iterate on this in the future is simply to revisit it and test my skills. See how far I can get without watching any of the video. Then see how far I can get without looking up documentation. I can’t remember the last time I looked up the map method because I use it so much and know it well. I want to get there with all the methods.

JavaScript 30 – Day 3

Posted on Posted in JavaScript 30Tagged , , , , , , , , , , , Leave a comment

On day 3, which I did last week and am late writing this, I got to play with css variables!

Overview

Day 3 was all about manipulating the elements with variables. We used a base color that could change with a color picker, a blur effect, and spacing for our image. These variables were changed with inputs.

What I Learned

I’m almost embarrassed to say this because I have been using css for nearly 15 years, but I have never used css variables. It’s always been one of those things in the back of my mind that I need to learn them along with SCSS or LESS or something. That always seems to fall to the wayside for learning something else, usually with JS or a framework.

Logically I know that learning these tools will save me a ton of time and make my styling code so much cleaner. Mental block I need to put on my goals and dive in, I suppose. No harm in letting go of old ways that might not be best suited anymore.

Biggest Challenge

This lesson didn’t have a lot of great challenges in it. There wasn’t anything too complicated with the JavaScript, and I know CSS incredibly well. If I had to pinpoint a toughest part for this lesson, I would say it was my own typos getting in the way. We all have those days as developers, ammiright?

Future Iterations

I’d like to play with more variables in the future. Add more to the site or see what else I can manipulate. Change the fonts, etc.

JavaScript 30 – Day 2

Posted on Posted in JavaScript 30Tagged , , , , , , , , , , , , Leave a comment

Back with an update for Day 2 of the JavaScript 30 course!

Overview

Today’s lesson focused on a simple clock using JavaScript to get the current time and css to transform the hands.

What I Learned

I don’t have a list of things for you today like I did yesterday. It was a fairly straightforward assignment. I did learn that when adding style.transform to the element, it’ll overwrite the transform properties you set in the css. It was an easy fix since I only had one transform in the css for the individual clock hands to make them distinct from each other, so I added those to the end of the dynamic transform.

Biggest Challenge

The biggest challenge for me today was playing around with how to get the hour hand to display more accurately between numbers on the clock. When I first did the math, the hand was at 3, and then only moved to 4 when it turned 4:00. That was more jarring than I wanted it to be, so I had to figure out how to make it a better ratio.

Future Iterations

The hour adjustment I made mentioned above is not all that pleasant still. In the future, I want to transform the clock to be super smooth instead of more like a tick that I have now. Not sure what challenges that will take, to be honest.

One other idea I had would be to create one of those clock walls with all the different time zones where my friends live scattered about the world.

Conclusion

Today was another fun one that took less than half of my lunch to complete. It was a quick, easy win that reinforced concepts I haven’t touched in awhile. I don’t use transform with css all that often, but I like the strong possibilities out there for uses.

JavaScript 30 – Day 1

Posted on Posted in JavaScript 30Tagged , , , , , , , , , , , , , , Leave a comment

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.

JavaScript 30 – The Refresh

Posted on Posted in JavaScript 30Tagged , , , , , , , , , , , , , , , , Leave a comment

Hey all!

It’s been a while, huh? Quick catch-up: I graduated from LaunchCode CodeCamp, surpassed my goal of getting an apprenticeship in March by getting one in January, and since then I have worked as a VueJS developer for the last two years.

Things have slowed down for me a little bit at work and life in general, and I have been feeling the need to really bring it back to the basics. The past two years, while fantastic, have been at such a fast pace that I haven’t had the time to really master much. I’ve learned a ton, have kept my head above water, and grown tremendously as a developer, but now it’s time to get better.

On a recent episode of Syntax (ep. 424 New Year, New You. What to Focus on in 2022. Go give it a listen!), Wes mentioned his Javascript 30 course and it was like the sky opened and sunshine rained from the heavens. Except that it was miserably cold in Florida and overcast and rainy and the complete opposite, but I digress.

I decided to pick up where I left off three years ago on his course: At the very beginning.

Yup, that’s right. I never even started on it back when I was gobbling up resources doing audacity’s Frontend Nanodegree and totally overwhelmed. Now, I’m ready to test my chops and see it through to the end.

I’ll be making a blog post daily on my experiences, so follow along with me! If you want to start and haven’t, or if you want a partner to go through the course with, hit me up!