JavaScript30 Series

I started fo­cus­ing much more keenly on ReactJS and JavaScript while I looked for a job. This post is a part of the se­ries ti­tled JavaScript 30’, which be­gan early October 2020.

What I did to­day

Updating CSS Variables from JavaScript

Today’s JavaScript30 ex­er­cise was su­per in­ter­est­ing. We had to up­date CSS vari­ables from within JavaScript. I had no idea you could do this, and learned lots of cool stuff to­day.

Here’s the CSS vari­ables I’m talk­ing about:

:root {
--brand-primary: #bada55;
}

They are a part of next-gen­er­a­tion CSS and can be used to­day with PostCSS. If back­wards com­pat­i­bil­ity is not a con­cern, feel free to just use them; browser sup­port is a solid ~95%.

  1. Updating it with JavaScript uses a cas­cad­ing-like trick in CSS or scope & vari­able lookup rou­tine from JavaScript. While you’ve de­fined your CSS vari­ables on the :root el­e­ment, we add in­line styles on the html el­e­ment to over­ride them. Or any DOM el­e­ment. Because it’ll be found” sooner by CSS, it’ll be used as against the :root vari­ables.

    A demo is avail­able, as is the source code.

  2. I also learned of the datalist prop­erty, which is re­ally nice and can make your JS code­base a bit more sim­ple and main­tain­able.

  3. You can find the root el­e­ment with document.documentElement.

  4. To my sur­prise, there’s an OS-native color picker that you can pop up with just type="color" on the input HTML el­e­ment!

  5. As echoed by Chris Burnell to­day and read up by me on Stack Overflow just a cou­ple of days ago, this in the con­text of event lis­tener call­backs. It’s al­most be­come sec­ond na­ture by now. Excited to feel the same about this in every con­text, like, ever! 🤯

ReactJS

Not much progress on ReactJS to­day ei­ther as I had a cou­ple of en­gage­ments. One, a screen­ing call with a com­pany, and two, re-do­ing my home-page to bet­ter re­flect me as a per­son. I do feel I need to put a lid on the lat­ter for a while, maybe rel­e­gat­ing it to just the week­ends. After all, learn­ing is su­per im­por­tant right now and the pri­or­ity. 😊

The cou­ple of videos I did man­age to watch to­day in­tro­duced the idea of com­po­nents, writ­ing one, and importing” CSS into your JavaScript bun­dle gen­er­ated by Webpack.

These are all things I al­ready am aware of, but it’s re­ally in­ter­est­ing to hear some­one else ex­plain them to you any­way. It’s a unique ex­pe­ri­ence in that you get per­spec­tive on what de­tails to ab­stract away if you were ex­plain­ing the same con­cepts to some­one else. Which, hon­estly, is also a great skill to have.