JavaScript30 - 3 Playing with CSS Variables and JS

Part 3 of the JavaScript30 was a different pace for me. The first two challenges felt like actual challenges whereas with this lesson I strictly followed along with Wes. I didn't do this lesson alone either as I had @billyjacoby following along via discord. Billy helped me with some syntax and together we discovered something that was a bit alarming. These videos/this course is about 7 years old.

Upon starting the JavaScript30 I had no idea when it was first released but I was excited to work on more JavaScript to continue my own personal journey into coding. After learning this course is a bit outdated I had a hard choice to make...Do I continue through despite this not being as relevant anymore or do I quit now and find another course that is more up to date?

After a debate with Billy and myself I figured I would stick with these lessons and see them through to the end. I need more practice with JavaScript and that's exactly what this is intended for. Also, it has become even more clear to me that Wes is extremely talented as his videos and website surrounding the JavaScript30 seem pretty modern and ahead of the curve for being so "old" by coding standards. This is someone I want to learn more from and that is more obvious to me now than ever before.

Oh right...the actual lesson...

So the lesson itself was pretty cool. Again, I approached this differently and did not stop the video short so I could try and come up with my own answers. There was no googling involved, no chat CPT, nothing else but just watching and coding along. Yeah it took significantly less time for me than the previous lessons but I don't feel as accomplished as I did after the last two and I'm not sure how much knowledge I actually retained this time.

Some of the code Wes was using was nothing I have ever encountered before (which I know is pretty normal and the exact reason I am doing his course). I have never worked with sliders nor did I know how to make them myself. So what this challenge was was to make 2 sliders and one color pallet interactive on the page. The middle of the page had a picture and each input was intended to modify this picture in some way (adding padding, a blur effect and changing the color of the padding). To do this you had to make CSS variables (that were extremely new at the time of recording) which was a concept I had no previous knowledge of but upon reflection make perfect sense to me.

  <div class="controls">
    <label for="spacing">Spacing:</label>
    <input id="spacing" type="range" name="spacing" min="10" max="200" value="10" data-sizing="px">

    <label for="blur">Blur:</label>
    <input id="blur" type="range" name="blur" min="0" max="25" value="10" data-sizing="px">

    <label for="base">Base Color</label>
    <input id="base" type="color" name="base" value="#ffc600">
  </div>

Once realizing what the variables were and how they were to be used the actual challenge was calling them via the sliders with JavaScript. I did learn that some of what Wes did is now somewhat outdated but is just as functional as it was years ago. For example the "this" syntax in JavaScript.

  <script>
    const inputs = document.querySelectorAll('.controls input');

    function handleUpdate() {
      const suffix = this.dataset.sizing || '';
      document.documentElement.style.setProperty(`--${this.name}`, this.value + suffix);
    }

    inputs.forEach(input => input.addEventListener('change', handleUpdate));
    inputs.forEach(input => input.addEventListener('mousemove', handleUpdate));
  </script>

So the biggest lessons I learned from this lesson are probably any practice is good practice and try to come up with your own solutions to problems if you want to keep growing and improving. Oh and how to put code into these posts without having to use screenshots! Well...thats basically all I've got for this one. Stay tuned for next time where we dive into: Array Cardio Day 1!