Featured

On the benefits of taking a course over learning by doing.

I am a self taught software engineer. It is something I take a great deal of pride in.

I started learning C programming language back in 1997. If I remember correctly I started by reading Sams Teach Yourself C in 21 Days and perhaps also C Programming Language by Brian W. Kernighan and Dennis M. Ritchie.

Then on January 5, 1999 I got a job working for Henter-Joyce (now Freedom Scientific) as an Associate Software Engineer. My responsibilities included writing code in the JAWS Scripting Language which a proprietary programming language that is used by the JAWS screen reader.

I quickly decided that I was not content with just writing code in the JAWS Scripting Language; I wanted to be able to modify the JAWS internals.

At that time almost all of the JAWS internal code was in the C++ programming language. Therefore I decided to teach myself C++.

To learn C++ I did the following.

  • I bought a copy of Sams Teach Yourself C++ in 21 Days and began reading it.
  • I wrote an application called SysInfo in C++ as a aid to our technical support department. SysInfo would gather information such as Video Card information, OS, memory, and send it to technical support via email. SysInfo was very similar to the current Microsoft System Information Tool.

This plan was so successful that I was promoted to Software Engineer in January 2000. I have used C++ as my primary programming language since then.

I never stopped learning. I have tried to keep up to date with new language standards and new technologies since then. But I always learned by doing. If the task I was working on required that I learn something new I would use Google and Stack Overflow and get the job done.

This has been my preferred method of gaining new knowledge until very recently.

On August 1, 2021 my knowledge of JavaScript was minimal. The last time I needed to use JavaScript as part of my job it took me two weeks to fix a bug that required that I change fewer than 10 lines of code.

Then I realized that there are some serious flaws with a browser extension for Google Chrome and Mozilla Firefox released by my employer that I am currently responsible for maintaining that necessitated a complete rewrite of the extension. I tried to make the necessary changes and found much to my horror that I could not even get started.

I had previously bought a lifetime membership to Eduonix and some courses on Udemy with the vague idea of taking the courses some day. However, I had made very minimal use of these educational resources.

I let my employer know what was going on and I was given permission to spend some time when I would normally be working on taking courses in JavaScript. I then spent every day for the next two weeks learning JavaScript.

In just four hours this Monday I rewrote one quarter of the Browser Extension. There is only one reason I did not finish the project; I was temporarily reassigned to another project.

I am not claiming that my knowledge of JavaScript is anywhere near my knowledge of C++. However, after just two weeks my knowledge of JavaScript is roughly equivalent to my knowledge of C++ back in 2001.

Looking back, I find myself wishing that I had followed a more structured approach to learning C++ back in the halcyon days of yore.

Using a select element to change the active stylesheet for a web page.

This article discusses the use of a select element to change the active stylesheet for a web page. It also provides step by step instructions on how to create the select element.

  • Add a link element to the head of your web page. Set the rel attribute to “stylesheet,” the href attribute to the URL of the default stylesheet you wish to use for your web page, and the id attribute to a unique value.

    Code Example:

    <link
      rel="stylesheet"
      href="https://www.w3.org/StyleSheets/Core/Swiss"
      id="W3C-Core-Styles" />
    

  • Add the select element. Set the value attribue of each option element to the URL of the stylesheet and the contents of each option element to the text you wish to be displayed for the combo box.

    Code Example:

    <select id="SeclectW3CCoreStyle">
    <option
      value="https://www.w3.org/StyleSheets/Core/Chocolate">
    Chocolate
    </option>
    <option
      value="https://www.w3.org/StyleSheets/Core/Midnight">
    Midnight
    </option>
    <option
      value="https://www.w3.org/StyleSheets/Core/Modernist">
    Modernist
    </option>
    <option
      value="https://www.w3.org/StyleSheets/Core/Oldstyle">
    Oldstyle
    </option>
    <option
      value="https://www.w3.org/StyleSheets/Core/Steely">
    Steely
    </option>
    <option
      value="https://www.w3.org/StyleSheets/Core/Swiss">
    Swiss
    </option>
    <option
      value="https://www.w3.org/StyleSheets/Core/Traditional">
    Traditional
    </option>
    <option
      value="https://www.w3.org/StyleSheets/Core/Ultramarine">
    Ultramarine
    </option>
    </select>
    

    Typically, I add this select element, along with a lable and the Set Style button, to the footer at the bottom of the page.

  • Add a Set Style button, as follows.

    Code Example:

    <input
      id="SetW3CCoreStyleButton"
      onclick="SetStyle('SeclectW3CCoreStyle', 'W3C-Core-Styles')"
      type="button"
      value="Set Style" />
    

  • Add the following JavaScript code to a script element in your page or to a .js file on your website.

    function isEmptyOrSpaces(str){
      if (str == null){
        return true;
      }
      if (str.length == 0){
        return true;
      }
      if (str.trim() === ''){
        return true;
      }
      return false;
    }
    
    function SetStyle(selectStyleElementId, linkElementId){
      console.log(
        "SetStyle('" + selectStyleElementId
        + "', '" + linkElementId
        + "') called.");
      let seclectStyleElement =  document.getElementById
        selectStyleElementId);
      if (!seclectStyleElement){
        console.log(
          "Could not find the '" + selectStyleElementId
          + "' element.");
        return false;
      }
      let seclectedStyle = seclectStyleElement.value;
      if (isEmptyOrSpaces(seclectedStyle)){
        console.log("Could not get the selected style.");
        return false;
      }
      let linkElement = document.getElementById(linkElementId);
      if (!linkElement){
        console.log(
          "Could not find the '" + linkElementId
          + "' element.");
        return false;
      }
      linkElement.setAttribute("href", seclectedStyle);
      return true;
    }
    

This example is fully functional. It does lack one key feature, the ability to store the selected style in a cookie. The article Store and Retrieve Cookies demonstrates the use of the localStorage.setItem and localStorage.getItem functions.

Modify the SetStyle function by adding the folloing line just above the ‘return true;’ line at the bottom of the function.


window.localStorage.setItem(
  "SeclectedStyle", seclectedStyle);

Note that the localStorage object is only supported on modern web browsers. That said, the Local storage with Window.localStorage page provides JavaScript code to emulate the feature for older browsers.

The next step is to set the style and the selected item in the select element when the web page loads. To acomplish this you need to add the following function.


function SetStyleFromCookie(selectStyleElementId, linkElementId){
  console.log(
    "SetStyleFromCookie('" + selectStyleElementId + "', '" + linkElementId + "') called.");
  let seclectedStyle = window.localStorage.getItem(
    "SeclectedStyle");
  if (isEmptyOrSpaces(seclectedStyle)){
    console.log(
      "Failed to get the value of the 'SeclectedStyle' cookie. Using the default value.");
    seclectedStyle = 'https://www.w3.org/StyleSheets/Core/Swiss';
  }
  let linkElement = document.getElementById(linkElementId);
  if (!linkElement){
    console.log("Could not find the '" + linkElementId + "' element.");
    return false;
  }
  linkElement.setAttribute("href", seclectedStyle);
  let seclectStyleElement =  document.getElementById(selectStyleElementId);
  if (!seclectStyleElement){
    console.log("Could not find the '" + selectStyleElementId + "' element.");
    return false;
  }
  seclectStyleElement.value = seclectedStyle;
  return true;
}

Finally, use the following code to call the SetStyleFromCookie function when the web page is loaded.


window.addEventListener('DOMContentLoaded', (event) => {
  SetStyleFromCookie('SeclectW3CCoreStyle', 'W3C-Core-Styles');
});

References

To see this code in action, go to Using a select element to change the active stylesheet for a web page.