JavaScript30 Day #04 – Updating CSS Variables with JS, slow update on ReactJS.

What I did today

Updating CSS Variables from JavaScript

Today’s JavaScript30 exercise was super interesting. We had to update CSS variables from within JavaScript. I had no idea you could do this, and learned lots of cool stuff today.

Here’s the CSS variables I’m talking about:

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

They are a part of next-generation CSS and can be used today with PostCSS. If backwards compatibility is not a concern, feel free to just use them; browser support is a solid ~95%.

  1. Updating it with JavaScript uses a cascading-like trick in CSS or scope & variable lookup routine from JavaScript. While you’ve defined your CSS variables on the :root element, we add inline styles on the html element to override them. Or any DOM element. Because it’ll be “found” sooner by CSS, it’ll be used as against the :root variables.A demo is available, as is the source code.
  2. I also learned of the datalist property, which is really nice and can make your JS codebase a bit more simple and maintainable.
  3. You can find the root element with document.documentElement.
  4. To my surprise, there’s an OS-native color picker that you can pop up with just type="color" on the input HTML element!
  5. As echoed by Chris Burnell today and read up by me on Stack Overflow just a couple of days ago, this in the context of event listener callbacks. It’s almost become second nature by now. Excited to feel the same about this in every context, like, ever! 🤯

ReactJS

Not much progress on ReactJS today either as I had a couple of engagements. One, a screening call with a company, and two, re-doing my home-page to better reflect me as a person. I do feel I need to put a lid on the latter for a while, maybe relegating it to just the weekends. After all, learning is super important right now and the priority. 😊

The couple of videos I did manage to watch today introduced the idea of components, writing one, and “importing” CSS into your JavaScript bundle generated by Webpack.

These are all things I already am aware of, but it’s really interesting to hear someone else explain them to you anyway. It’s a unique experience in that you get perspective on what details to abstract away if you were explaining the same concepts to someone else. Which, honestly, is also a great skill to have.