Don't Forgo the 'Basics' When Learning Shiny New Things ✨

Jolene Kearse — Sun, 01 Jan 2023 19:34:10 +0000

We've all done it... Discovered a brand spanking new (to us anyway 😜) technology, which gets us all riled up. Maybe you follow a tutorial and come up with this awesome thing or that creative use and can't wait to implement them. You forge ahead only to lose momentum as you hit a I can't believe I forgot how to do this wall.

This happened to me after learning a bit about Firebase. The deeper in I got, the more ideas💡I had. I was going to have my first full-stack app and it was going to be amazing!🤸‍♀️

Hold up!✋Before I could dive into the backend, there was the whole frontend to create. I wanted modals to pop up to sign up, and log in and out...

But I'd forgotten how to do that! 🤦‍♀️ I had done it once or twice in the past, but it was definitely not routine for me.

So, my full charge ahead was halted, but it was still a great learning experience. I had to uncheck ☑️ that item on my 'I got this down pat' list.

It did give me experience coding modals and overlays. And the way I see it 👀, there were two added bonuses:

My impatience to get to the shiny new thing 🎁 motivated me to deal with this task, and
It was a better memory 🧠 test, when I finally got back to Firebase!

Remember there is so much to learn and new knowledge only gives you more chances to practice your skills!

What I learned making Scrimba's Colour Tool 🍭

Jolene Kearse — Tue, 03 May 2022 21:12:37 +0000

After completing freeCodeCamp's JavaScript Algorithms and Data Structure's Certification, I was looking to apply JavaScript to a Frontend project. I remembered Scrimba's Build a color tool in vanilla JavaScript and decided to give it a go!

While Scrimba's beauty is it's interactive screencasts you can pause and code within, I wanted to work in VS Code. Only returning to the videos once I had completed the challenges.

I had a sweet reunion with CSS styling, after the at times brain-breaking exercises of my JavaScript bootcamp.

Then it was on to functions with the first real challenge of the course: Validate a Hex Code with JavaScript. I immediately thought of regex, and, surprise, surprise, mine worked!

I got cocky, thinking I'll be able to nail it out of the park. However, it was the things I struggled that taught me great lessons from this course. I'll outline 6 things I learned in this article

Lesson 1: Don't be afraid to use the learning materials

One part of the color tool was displaying the altered hex code in text on the page. I could show the user the correct colour to the screen with bracket notation, but had a pesky problem with the text displaying the hex code with NaN rather than the 0 I wanted. This lead to some, shall we say, odd codes like NaN7NaN.

Then I remembered I had training wheels! I un-paused the video and found the solution: .substring()! Not only was the proper colour showing, but the returned hex was correct and not gobbledygook!

Lesson 2: KISS - Keep It Simple Stupid

When converting RGB to hex, you need to place a zero in front of either of the red, green or blue values if it came back with only one character, so 9 would be 09.

I thought one of the new methods I had learned would do the job. I spent hours reading documentation and trying to cobble together complex series of functions with: map, filter, reduce. None worked until I remembered about ternary operators. Solved with one simple line: pair.length === 1 ? "0" + pair : pair;!

Lesson 3: Scope is important

My next problem occurred through one of my stretch goals: creating a copy button. I tried out solution after solution, even the deprecated document.execCommand('copy'), but nothing worked. All my tests were getting undefined. Somehow when I was spinning my wheels, I actually thought of scope. And when I read my code, there was my alteredHex imprisoned within a function. Again a one-liner, let alteredHex; placed above my function saved the day!

Lesson 4: Account for asynchronous events

I thought I was finally done my project... Hahaha!

The copy to clipboard function was working, but with a catch. Users would have had to click the copy button twice as the function seemed to be always one step behind. I even thought of a hacky solution like calling the function twice, then remembered asynchronous events:
copyBtn.addEventListener("click", async () => { await navigator.clipboard.writeText(alteredHex); alert(Hex code ${alteredHex} was copied to your clipboard) });

Lesson 5: Don't forget the basics

I used this project mainly to practice my JavaScript, but I neglected the basics! When working on accessibility for my page, I found I had completely forgotten to add :focus and :hover states.

I learned this when CSS was my focus, but lost sight of this important principle. While it didn't take too much to add them, I did feel like a fool for saving it until the end.

Lesson 6: 'Simple' is never simple

I wanted to add a gradient to my range slider as a visual clue. I thought it would be an easy thing; I know gradients, right?

Partly correct, it was easy to add a dark to light gradient, but what happens when the user switches to darken the colour? Now it's just a pretty gradient that doesn't help the user ahem, use, it.

The solution took a fair bit of research, but I found out I could declare the dark to light gradient in the root, then switch it in JavaScript with:
root.style.setProperty("--gradient", "linear-gradient(90deg, rgba(213,213,219,1) 0%, rgba(87,90,94,1) 60%, rgba(0,0,0,1) 100%)");

While I had 'learned' JavaScript basics, I'm just starting to apply it to frontend development. And it's awesome! Working on this project not only gave me a portfolio project, or, even just, practice working with the DOM. It taught me to about how to approach projects, and how important concepts, that I had breezed over during my JavaScript certification, really are important.

DEV Community: Jolene Kearse