The nice thing about not having an actual programmer's job is that I can experiment and contribute coding at work without the pressure of immediate product. A recent enhancement I got to work on while editing content on a page: changing the style of several form options that did not reference a file.

function grayOptions(){
  const options = document.querySelectorAll('option[value=""]');
  options.forEach(option => option.classList.add('gray-out'))
}
document.addEventListener('DOMContentLoaded', grayOptions, false);

I was so proud of myself! Until Internet Explorer beat me down. Why, oh, why do only half of these things work in IE?!? I removed the fat arrow function, changed out 'classList.add()' with 'className', and changed up the forEach method a bit. All to accommodate IE's partial or lack of support. Phew!

CSS-Tricks wrote a great article Loop Over querySelectorAll Matches to help me understand the forEach problem. My new solution that now works across all browsers:

function grayOut(){
        const options = document.querySelectorAll('option[value=""]'),
              optionsLen = options.length;
        let i;
        for(i = 0; i < optionsLen; ++i){
            options[i].className = 'gray-out';
            options[i].setAttribute('title','no file available');
        }
}
document.addEventListener('DOMContentLoaded', grayOut, false);

It's these little coding wins that give me the encouragement I need to keep on digging deeper into the complex art of front-end development.