This exercise was a real eye-opener! I had not heard a bout CSS variables before doing this exercise and wow its powerful!
Again, I don’t like how in all exercises so far Wes Bos add event listeners on all the nodes he is targeting. This causes serious performance issues if its a lot of nodes and should be avoided to keep best practice. So again I have made my own solution that I think is more optimized.
Also I’m not a fan of using the new ES6 “ sugar for a lot of reasons.
1 (The real reason)
I think it makes the code less clear and also can lead to bad practices as always using “ instead of ”. The difference is that “ will be processed slower as the interpreter needs to check if there is any variables in there to check. You should therefore NEVER, and I mean NEVER put only a string within ` ` when you can use ” ” or ‘ ‘. Same issue as ” ” vs ‘ ‘ in PHP.
This is a highly subjective point, but this is my standpoint, I rather always stick with the same quotation marks for all strings and concatenate them accordingly when needed.
2. I sometimes code with different keyboard layouts, US,UK,Swedish,Spanish… I have learned where most things are on all keyboards but I have not learned where ` sits. I never used that symbol…
I code generally in UK keyboard layout and I must say that reaching all the way up to the left just underneath the ESC button just to make a ` is really annoying. I have to lift my left hand in order to push the button while most keys I can hit with just stretching my fingers a bit.
3. The ` looks a lot of like ‘ but have different functionality and “ on strings will have negative impact on performance just like “” in PHP.
4. It’s not even cleaner… in PHP you could argue that it makes the code cleaner:
$sentence = "my age is $age years"; //vs $sentence = 'my age is '.$age.'years';
At least in PHP it makes the statement shorter and cleaner but looks what happens if I write that in JavaScript.
let sentence = `my age is ${age} years`;
//vs
let sentence = 'my age is '+age+'years';
It doesn’t even make the statement shorter, they are exactly the same length!
Anyway, enough with the rant…
My optimized solution to the challenge:
const controls = document.querySelector('.controls');
function handleUpdate() {
let suffix = this.dataset.sizing || '';
document.documentElement.style.setProperty('--' + this.name, this.value + suffix);
}
controls.addEventListener("mousemove", function(event){
if(event.target.nodeName == "INPUT") {
handleUpdate.call(event.target);
}
});
controls.addEventListener("change", function(event){
if(event.target.nodeName == "INPUT") {
handleUpdate.call(event.target);
}
});
