JavaScript30 — Day 3

Design by Wes Bos, for JavaScript30

Today’s project was focused on something I’ve often wondered about but neve knew how to explore! We used JavaScript with CSS to update styles based on user interactions. Previously, I had only addressed HTML elements with JS, so this was a total crash course for me.

Bits

• Today I discovered savee.it (essentially a less-consumerist Pinterest for visual designers). Their adjustable padding view on the homepage is akin to the “spacing” we used in today’s project! I love to see UI features in the wild that I can trace back to code I’d at least recognize.
• The forEach() method in my own words: you can append forEach() to a variable that addresses multiple HTML elements (like “const inputs” gets at spacing, blur, and base in this project), and it will apply the function inside its parentheses to each of the elements addressed by the single variable. Note: forEach() is often (and perhaps, more commonly?) used with arrays.
• I’m picking up on a program writing process wherein you write the shell of a function, and fill it with only a console.log() statement while you write other parts of your code. This allows you to make sure everything is hooked up correctly, and registering in the console, before you write the actual content of the function.

My attempt at articulating “forEach()” in the comments.

Blindspots

• This project’s HTML utilizes several tags I’m unfamiliar with. I want to take a closer look at <input> and <label> tags, as well as the attribute “for”.
• Declaring CSS variables on the “:root” selector at the top of your CSS document — this seems to be the “highest” or most global (?) level on which you could declare a variable in CSS, and it plays an integral role in connecting JS with CSS variables. I’m wondering: why does the selector follow a semicolon? Why do we use a double dash prior to the properties we declare within the :root selector? Halp!
• Wes is going in on “data attributes” again — this time he’s talking about how any suffix you add to “data-” becomes an object. An object in what, JS? Across all languages used in the document? In this project, the spacing and blur variables have a data attribute of “data-sizing: ‘px’;”. In this example, I think “sizing” is considered the suffix and “px” is considered the object that results from setting the data-attribute, but… I clearly have not fully made sense of this.

Breakdown

Yesterday’s confusing syntax came back to haunt me in today’s project, and I have a feeling it’s here to stay! Here it is again:

I commented out this line of code just to see exactly what it accomplishes, and it turns out this is THEE-double-E code that makes the site interactive, so I can’t afford to fear it any longer.

Turns out this is called a template literal, or template string. The two backticks (`) around the template literal are what open and close the phrase — they take the place of single or double quotation marks. Template literals can contain “placeholders”, which are specified by the ${} notation. The text inside the dollar sign and curly braces (placeholder) is called an “expression”. The placeholder and any other text within the backticks can be passed to a function. (In this case… is the function the setProperty() method?)

I have a funny feeling I’ll need to see this in practice a whole lot more before it clicks, but it’s always good to be reminded that you can Google something as unintelligible as “`${this.name}` js syntax” and find helpful resources.

That’s all for now, folks! My code for this project is here and you can read it if you’re into that sort of thing! I’m off to melt my brain with Codecademy’s JavaScript courses for the rest of the day.

-C