DEV Community: Karel De Smet

Loading scripts with async / defer

Karel De Smet — Sat, 26 Dec 2020 18:47:54 +0000

Introduction: prism

To style code blocks on my personal website, I use Prism. It's dead simple, lightweight and looks great everywhere. Plus, you can select just the languages and themes you need, so there's little to no overhead.

Until recently, I included the <script> tag for Prism just before the closing </body> tag. Just like everyone always told us to do, right? Execution is synchronous, and you don't want your scripts blocking the rest of your page.

Async & defer

However, the attributes async and defer allow you to reach the same goal, namely to make sure that fetching and/or executing scripts does not block parsing.

As a simplified example, let's assume my page contains the following code:


<html>
    <head>
        <title>Async & defer</title>
    </head>
    <body>
        <p>Lorem ipsum dolor sit amet</p>
    </body>
</html>

Somewhere in this code, we need to include the script for Prism:


<script src="/assets/js/prism.js"></script>

What are our options?

Include it in the <head> section. But we know that's just a bad practice.
Include it just before the </body> tag.
Include it with async in the <head> section.
Include it with defer in the <head> section.

To be fair, I can't make the differences any clearer than Flavio Copes can. This means we can skip the detailed comparison here and go straight to how I approached this: with defer.

Defer

Deferred scripts are fetched asynchronously and executed immediately after parsing of the DOM.

Our simplified example now looks like this:


<html>
    <head>
        <script defer src="/assets/js/prism.js"></script>
        <title>Async & defer</title>
    </head>
    <body>
        <p>Lorem ipsum dolor sit amet</p>
    </body>
</html>

The flow here is:

Parsing starts
Parser encounters deferred script ➡️ fetching starts
Parsing continues in parallel with fetching
Fetching completes
Parsing completes
Script is executed
DOMContentLoaded event is fired

Async

With async, the flow would be a little different:

Parsing starts
Parser encounters asynchronous script ➡️ fetching starts
Parsing continues in parallel with fetching
Fetching completes
Script is executed
Parsing completes
DOMContentLoaded event is fired

This means that execution occurs immediately after fetching has completed. As opposed to defer, which executes only after the parsing has fully completed. Because we rely on the whole DOM being present before Prism does its magic, I preferred to defer the Prism script.

Another difference is that deferred scripts are executed in the order in which they were encountered. That's not the case for asynchronous scripts, making them a prime candidate for standalone scripts (e.g. ads, analytics ...).

Is the juice worth the squeeze?

Well, async and defer are not fully compatible with IE9 and older. However, I sincerely hope that's not relevant for you.

They also don't guarantee faster loading times. In my case, the time it takes before DOMContentLoaded is fired differs just a couple of miliseconds when the script is deferred.

The best piece of advice: perform tests if you plan to switch things up. The number of factors is just too high to provide a one-size-fits-all approach:

What if parsing ends before the fetching of your script?
What if you combine multiple approaches?
How much of your bandwidth is dedicated to fetching compared to other tasks that require bandwidth?

Then why go through all the trouble?

For me, using asynchronous or deferred scripts is about cleaning up your code. Because our scripts are meant to be somewhere in the <head>. Placing them anywhere else was just a cheeky workaround in the endeavour for maximum performance.

Course review: "Introduction to software testing" (Coursera)

Karel De Smet — Sat, 28 Nov 2020 19:42:25 +0000

A couple of months ago, I took a course on Coursera named "Introduction to software testing", which is a part of the "Software testing and automation" specialization. And I'd like to add my 2 cents.

Before we dive in, I'll TL;DR it for you:

The good:

Theoretical concepts are properly explained.
Provides a solid foundation for future learning about software testing.
Knowledgeable instructors from a respected university.

The bad:

Interaction with students and teachers is next to nothing.
Course content feels outdated or out of place at times.

Although I'm not the biggest fan, you can't blame this course for not doing what it says on the tin: provide an introduction to software testing. It touches on a fair amount of theoretical concepts which testers should understand. And even developers will find there's a lot in it for them.

The theory behind testing

Module 1 starts off by answering the questions "What is a test?", "Why should we test?" and "How can we test well?". The course then discusses the differences between validation and verification, and progresses towards the V-Model.

Although a strict application of the V-Model is perhaps rather unusual, being conscious of it is still beneficial towards a better understanding of software testing.

In the second module, topics such as dependability, structural testing, mutation testing and error-prone aspects (null pointers, boundaries ...) are also brought up.

Up to here, I was very enthusiastic. There's a lot of valuable information in these two modules. Even more for testers who don't have a background in software engineering, such as myself.

Test plan(ning)

However, the third module is where I started to feel lost. Some advice from the videos is definitely actionable (e.g. "also document what can not be tested"), but the content here feels outdated and too comprehensive. More specifically, the part about defect reporting seems like something I could've made in half an hour of browsing through JIRA tickets.

To make matters worse, the exercise we were given was an absolute mess. You are asked to draft a test plan for a fictional application by applying what you've learned, then submit it for review by your fellow students. I'm sorry to say that the requirements of the application under test make it feel like we're back at MS-DOS. Hello, 2020?!

After submission, you're also asked to review test plans from other students, using a list of multiple choice questions (e.g. "does the test plan include information about X?"). Unfortunately, based on the examples I've seen, a lot of students don't take the exercise (both writing and reviewing) serious and just want to make it through. I also seriously doubt whether the grading system truly evaluated the quality of a submission.

Writing unit tests

The fourth and final module covers writing unit tests (JUnit, Mockito) and code coverage (JaCoCo). You're asked to write unit tests and these should cover a specific percentage of the code and reveal the bugs in the code you were given. These assignments are graded via automated scripts, which is a fairly good process and I really enjoyed working on this.

Despite my enjoyment, it didn't feel like the right time and place for practical exercises about unit tests. Neither is it detailed enough to really grasp unit testing. Shouldn't this be incorporated into another course of this specialization?

Conclusion

I would very much recommend the first and second module of this course. But the third and fourth module just didn't feel right.

That holds me back from taking the next course in the specialization, which currently also has a lower review score. When you add the lack of interaction with other students and teachers, it's not encouraging me to continue. But it was well worth the effort!

Detecting if your user is online or offline

Karel De Smet — Mon, 19 Oct 2020 05:58:59 +0000

At work, we're developing a PWA (amongst others) and as a new feature, we needed to warn users when they are offline. This should incentivise them to first restore their network connection before taking further action, avoiding possible unwanted side effects from being offline.

After testing, I had a look at how it was implemented and was pleasantly surprised.

Navigator.onLine

The Navigator object, which you can access in the browser via window.navigator, has an onLine property. This boolean is prone to false positives, but we weren't looking for perfect coverage on this one.

Mind the capital 'L' though!

  
  window.navigator.online
  // undefined

  window.navigator.onLine
  // true

Online and offline events

So we know how to check if a user is online or offline. But how can we detect changes? Writing custom events has never been anyone's favorite, but luckily the online and offline events are readily available.

Want to try it out? Copy and paste the following code into an HTML file and open it in the browser. Then play with your network connection (in your OS or your browser's DevTools) to see it in action.

  
    <!DOCTYPE html>
    <html>
      <head>
        <meta charset="UTF-8" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
        <title>Online/offline</title>
      </head>
      <body>
        <h1 id="status"></h1>
      </body>
      <script>
        function userIsOnline() {
          document.getElementById("status").textContent = "User is online";
        }

        function userIsOffline() {
          document.getElementById("status").textContent = "User is offline";
        }

        if (window.navigator.onLine) {
          userIsOnline();
        } else {
          userIsOffline();
        }

        window.addEventListener("online", userIsOnline);
        window.addEventListener("offline", userIsOffline);
      </script>
    </html>

NetworkInformation

Although out of scope for our use case, it was interesting to discover window.navigation.connection contained more network goodies, in the form of a NetworkInformation instance.

In my case, it contained the following:

  
  downlink: 10,
  effectiveType: "4g",
  rtt: 50,
  saveData: false

Huh, my downlink seems slow as hell? It's supposed to represent my download speed in Mbps but it's not even close to what I would expect.

Well, it seems like Chrome arbitrarily caps this value at 10 as an anti-fingerprinting measure.

Well, thank you Google for keeping me safe and secure ;)

How to develop a Chrome extension

Karel De Smet — Sun, 20 Sep 2020 18:11:48 +0000

Cover photo by Sigmund on Unsplash

TL;DR

I've developed a fairly simple Chrome extension called "Mistake" and have shared the source code on Github.

To find out what it does and try it yourself, follow the instructions on Github or watch this video.

Now, let's shed some more light on why and how this was developed.

The problem

At work, I'm often confronted with the fact that it's outright dangerous to open multiple browser tabs containing the same application, but in different environments. For obvious reasons, you don't want to perform test actions on your production environment.

There are soms ways to avoid this, with one of the most common ones is to use environment variables for styling certain elements. For example, the production environment has a green background color for the navigation bar or document body, whilst the test environments have a red background color.

Unfortunately, the current application I'm working with doesn't have that feature. And after I almost performed an unwanted action on the production environment, thinking it was QA, I went looking for solutions.

Disclaimer: I contemplated working with Angular or React, but decided it just wasn't worth it. It definitely could have made my life easier, but I'm just not comfortable enough with it (yet) and I decided to go plain Javascript. This was something I actually needed, so I wanted to have a functional version ASAP.

Out of the box: Stylish

The first thing I found was Stylish. It lets you choose customized styles/themes for popular websites. But you can also write some of your own styles and apply it to URLs that match certain patterns.
Which sparked the idea to build something similar, which would allow me to display a custom message at the top of certain webpages. These messages could then serve as an indication of the environment in which I'm currently working.

Getting started on a custom solution

The first thing we need to do is create manifest.json. Here, we declare general application information and some configuration basics.

  
  {
    "name": "Mistake",
    "version": "1.0",
    "description": "Avoid disaster in production by displaying a message on pages that meet the criteria you define.",
    "permissions": ["webNavigation", "storage"],
    "content_scripts": [
      {
        "matches": ["<all_urls>"],
        "js": ["content.js"],
        "run_at": "document_idle"
      }
    ],
    "manifest_version": 2,
    "options_page": "options.html"
  }

The most important thing here is declaring the right permissions. For example, we need to tell Google Chrome that we need access to the storage API. Because in order to save the message and its details, we need a place to store that information.

Access to the webNavigation API is required, because every time a user navigates in Chrome, we want to check if the page matches one of the rules he has described on the options page.

Elaborating the options page

Next, we can get to work on the options page (options.html). This page lets the user define certain options. Let's look at an example for this extension:
e.g. As a user, I want to display a message "This is your local environment!" on any URL that begins with "https://localhost"

In short, we'll give users 3 options for pattern matching:

URL begins with
URL contains
URL ends with

And the following elements of the message should be customisable:

Text color
Background color
Text

We'll also add some info about our extension and place a button to add a new rule. It doesn't do anything yet but stick with it. Finally, we're loading Bootstrap from a CDN for easy styling.

options.html

  
  <!DOCTYPE html>
  <html>
    <head>
      <title>Mistake - Options</title>
      <link rel="stylesheet" href="./css/bootstrap.min.css">
      <style>
        h2 {
          margin: 2rem 0;
        }

        p {
          font-size: 1.5rem;
        }

        #add {
          margin-top: 2rem;
          font-size: 1.5rem;
        }

        .rule {
          border-bottom: 1px solid black;
        }

        .rule:last-of-type {
          border-bottom: none;
        }

        button[data-toggle="collapse"] {
          border: none;
          background-color: #fff;
          margin-top: 2rem;
          margin-bottom: 1rem;
          color: black;
          display:block; 
          outline: none;
          font-weight: 600; 
          font-size: 1.5rem;
        }

        button[data-toggle="collapse"]:hover, 
        button[data-toggle="collapse"]:visited, 
        button[data-toggle="collapse"]:active,
        button[data-toggle="collapse"]:focus {
          background-color: unset !important;
          color: unset !important;
          border: none;
          outline: 0 !important;
          outline-offset: 0  !important;
          background-image: none  !important;
          -webkit-box-shadow: none !important;
          box-shadow: none  !important;
        }

        .btn-light:focus, .btn-light.focus {
          box-shadow: 0;
        }

        input[type="color"] {
          display: block;
          border-radius: 50%;
          width: 50px;
          height: 50px;
          border: none;
          outline: none;
          -webkit-appearance: none;
        }

        input[type="color"]::-webkit-color-swatch-wrapper {
          padding: 0;   
        }

        input[type="color"]::-webkit-color-swatch {
          border-radius: 50%;
        } 
      </style>

    </head>
    <body style="padding-top: 5rem;">
      <div class="container">
        <h2>What does Mistake do?</h2>
        <p>Display a custom message at the top of any webpage that meets the criteria you define.</p>
        <h2>Why would I want to do such a thing?</h2>
        <p>Have you ever worked having <strong>multiple tabs of the same application</strong> open, but in <strong>different environments</strong>? Then you know how easy it is to live everyone's worst nightmare: screwing things up in production.</p>
        <p>After yet another near miss, I decided to take matters into my own hands and design this plug-in. Now, when I'm in production, at least I'm significantly reducing the odds of making a <i>Mistake</i>.</p>
        <h2>How does it work?</h2>
        <p>Start by adding a new rule using the button below. Add as many rules as you like.<br/>
        Now, whenever you open a tab with the URL that matches the pattern, your message will be displayed. Et voila!</p>

        <button type="button" class="btn btn-primary" id="add">
          Add a new rule
        </button>

        <div id="rules" style="padding-top: 20px;"></div>
        </div>

        <script src="./js/jquery-3.5.1.slim.min.js"></script>
        <script src="./js/popper.min.js"></script>
        <script src="./js/bootstrap.min.js"></script>
        <script src="config.js"></script>
        <script src="helpers.js"></script>
        <script src="options.js"></script>
    </body>
  </html>

Now we can move on to writing some logic in the Javascript options file (options.js). It consists of 5 important functions:

initializeRules gets any existing rules from storage on page load and displays them using the displayRules function.
createRule contains all the HTML and CSS for displaying one specific rule on the options page.
saveRule saves the information about a rule to storage and displays an alert if it was successful.
removeRule removes a rule from storage and from the screen.

options.js

  
  const buttonAddNewRule = document.getElementById("add");
  const rulesList = document.getElementById("rules");

  window.onload = function () {
    initializeRules();
    buttonAddNewRule.addEventListener("click", createRule);
    rulesList.addEventListener("click", saveRule);
    rulesList.addEventListener("click", removeRule);
  };

  function initializeRules() {
    chrome.storage.sync.get(null, function (syncItems) {
      displayRules(syncItems);
    });
  }

  function displayRules(rules) {
    for (const value of Object.values(rules)) {
      createRule(
        value.type,
        value.expression,
        value.message,
        value.textColor,
        value.backgroundColor
      );
    }
  }

  function createRule(type, expression, message, textColor, backgroundColor) {
    removeActiveAlert();

    const newRule = document.createElement("div");
    newRule.classList.add("rule", "pt-3");
    newRule.setAttribute("data-index", getCurrentNumberOfRules());

    const toggleButton = document.createElement("button");
    toggleButton.classList.add("btn", "btn-light");
    toggleButton.setAttribute("type", "button");
    toggleButton.setAttribute("data-toggle", "collapse");
    toggleButton.setAttribute("data-target", "#collapse" + getCurrentNumberOfRules());
    toggleButton.setAttribute("aria-expanded", "false");
    toggleButton.setAttribute("aria-controls", "collapse" + getCurrentNumberOfRules());
    if (!type || !expression) { 
      toggleButton.innerText = "New rule (unsaved)";
    } else { 
      toggleButton.innerHTML = `${type} "${expression}" ↓`;
    }

    const collapseDiv = document.createElement("div");
    collapseDiv.classList.add("collapse", "show", "mb-5");
    collapseDiv.setAttribute("id", "collapse" + getCurrentNumberOfRules());

    const card = document.createElement("div");
    card.classList.add("card", "card-body");

    card.appendChild(createTypeButtonGroup(type));
    card.appendChild(createExpressionInput(expression));
    card.appendChild(createMessageInput(message));
    card.appendChild(createColorInput("textColor", textColor));
    card.appendChild(createColorInput("backgroundColor", backgroundColor));
    card.appendChild(createButton("save"));
    card.appendChild(createButton("remove"));

    collapseDiv.appendChild(card);
    newRule.appendChild(toggleButton);
    newRule.appendChild(collapseDiv);
    rulesList.appendChild(newRule);
  }

  function saveRule(rule) {
    if (rule.target.getAttribute("data-action") === "save") {
      try {
        const ruleTargetParent = rule.target.parentNode;
        const ruleIndex = ruleTargetParent.parentNode.parentNode.getAttribute("data-index");
        const typeArray = ruleTargetParent.getElementsByClassName("active");
        if (typeArray.length !== 1) {
          throw new Error(
            "One and only one rule type should be selected. Please refresh the page and try again."
          );
        }
        const type = typeArray[0].textContent;
        const expression = ruleTargetParent.querySelector('[data-input="expression"]').value;
        const message = ruleTargetParent.querySelector('[data-input="message"]').value;
        const textColor = ruleTargetParent.querySelector('[data-input="textColor"]').value;
        const backgroundColor = ruleTargetParent.querySelector('[data-input="backgroundColor"]').value;

        chrome.storage.sync.set({
          [ruleIndex]: {
            type,
            expression,
            message,
            textColor,
            backgroundColor,
          },
        });

        const toggleButton = ruleTargetParent.parentNode.parentNode.querySelector('[data-toggle="collapse"]');
        toggleButton.innerHTML = `${type} "${expression}" ↓`;

        displayAlert("success", "The rule was successfully saved!");
      } catch (error) {
        console.log(error);
        displayAlert(
          "danger",
          "The rule could not be saved. Please refresh the page and try again."
        );
      }
    }
  }

  function removeRule(rule) {
    if (rule.target.getAttribute("data-action") === "remove") {
      try {
        const ruleNode = rule.target.parentNode.parentNode.parentNode;
        chrome.storage.sync.remove(ruleNode.getAttribute("data-index"));
        ruleNode.remove();
        displayAlert("success", "The rule was successfully removed!");
      } catch (error) {
        console.log(error);
        displayAlert(
          "danger",
          "The rule could not be removed. Please refresh the page and try again."
        );
      }
    }
  }

Our content script (content.js) represents the actual work being done by our extension. Every time we navigate to a page, it retrieves all rules from local storage and then checks if the URL of a page we are navigating to matches the pattern which we defined in a rule. If it does, then it will populate a paragraph element and insert it just after the opening <body> tag.

content.js

  
  chrome.storage.sync.get(null, function (items) {
    Object.values(items).forEach(function (item) {
      const ruleType = item.type;
      const url = window.location.href;
      const expression = item.expression;
      if (
        (ruleType === "URL begins with" && urlBeginsWith(url, expression)) ||
        (ruleType === "URL contains" && urlContains(url, expression)) ||
        (ruleType === "URL ends with" && urlEndsWith(url, expression))
      ) {
        document.body.prepend(
          createMessage(
            item.font,
            item.message,
            item.textColor,
            item.backgroundColor
          )
        );
      }
    });
  });

  function urlBeginsWith(url, expression) {
    const regex = new RegExp(expression + ".*");
    return regex.test(url);
  }

  function urlContains(url, expression) {
    const regex = new RegExp(".*" + expression + ".*");
    return regex.test(url);
  }

  function urlEndsWith(url, expression) {
    const regex = new RegExp(".*" + expression);
    return regex.test(url);
  }

  function createMessage(font, text, textColor, backgroundColor) {
    const paragraph = document.createElement("p");
    paragraph.style.backgroundColor = backgroundColor;
    paragraph.style.color = textColor;
    paragraph.style.fontFamily = font;
    paragraph.style.textAlign = "center";
    paragraph.style.padding = "1rem 0";
    paragraph.style.fontFamily = "Arial,Helvetica,sans-serif";
    paragraph.style.margin = "0 0 1rem 0";
    paragraph.innerText = text;
    return paragraph;
  }

In order to separate some of the element creation code, we also have a separate helpers file (helpers.js). The options.js file became too big and just wasn't easily scannable anymore. Those helper functions are mainly focused on creating the DOM elements for the options page.

helpers.js

  
  function createTypeButtonGroup(value) {
    const typeButtonGroup = document.createElement("div");
    typeButtonGroup.classList.add("btn-group", "btn-group-toggle", "mb-3");
    typeButtonGroup.setAttribute("data-toggle", "buttons");
    typeButtonGroup.setAttribute("data-purpose", "type");

    // Create dropdown options based on RULE_TYPE_OPTIONS array
    for (i = 0; i < RULE_TYPE_OPTIONS.length; i++) {
      const typeOptionLabel = document.createElement("label");
      typeOptionLabel.classList.add("btn", "btn-secondary");
      typeOptionLabel.textContent = RULE_TYPE_OPTIONS[i];

      const typeOptionInput = document.createElement("input");
      typeOptionInput.setAttribute("type", "radio");
      typeOptionInput.setAttribute("name", "options");
      typeOptionInput.setAttribute("id", "option" + (i + 1));

      if (value === RULE_TYPE_OPTIONS[i]) {
        typeOptionInput.checked = true;
        typeOptionLabel.classList.add("active");
      }

      typeOptionLabel.appendChild(typeOptionInput);
      typeButtonGroup.appendChild(typeOptionLabel);
    }
    return typeButtonGroup;
  }

  function createExpressionInput(expression) {
    const inputGroup = document.createElement("div");
    inputGroup.classList.add("input-group", "mb-3");

    const inputGroupPrepend = document.createElement("div");
    inputGroupPrepend.classList.add("input-group-prepend");

    const inputGroupText = document.createElement("span");
    inputGroupText.classList.add("input-group-text");
    inputGroupText.innerText = "String:";
    inputGroupPrepend.appendChild(inputGroupText);

    const input = document.createElement("input");
    input.setAttribute("type", "text");
    input.setAttribute("class", "form-control");
    input.setAttribute("placeholder", "https://www.example.com");
    input.setAttribute("aria-label", "URL");
    input.setAttribute("minlength", "1");
    input.setAttribute("maxlength", "255");
    input.setAttribute("data-input", "expression");
    if (expression) {
      input.value = expression;
    }

    inputGroup.appendChild(inputGroupPrepend);
    inputGroup.appendChild(input);

    return inputGroup;
  }

  function createMessageInput(message) {
    const inputGroup = document.createElement("div");
    inputGroup.classList.add("input-group", "mb-3");

    const inputGroupPrepend = document.createElement("div");
    inputGroupPrepend.classList.add("input-group-prepend");

    const inputGroupText = document.createElement("span");
    inputGroupText.classList.add("input-group-text");
    inputGroupText.innerText = "Message:";
    inputGroupPrepend.appendChild(inputGroupText);

    const input = document.createElement("input");
    input.setAttribute("type", "text");
    input.setAttribute("class", "form-control");
    input.setAttribute("placeholder", "Hi there!");
    input.setAttribute("minlength", "1");
    input.setAttribute("maxlength", "255");
    input.setAttribute("aria-label", "Message");
    input.setAttribute("data-input", "message");
    if (message) {
      input.value = message;
    }

    inputGroup.appendChild(inputGroupPrepend);
    inputGroup.appendChild(input);
    return inputGroup;
  }

  function createColorInput(colorType, color) {
    const div = document.createElement("div");
    div.classList.add("mb-3");

    const label = document.createElement("label");
    const input = document.createElement("input");
    input.setAttribute("type", "color");
    input.setAttribute("width", "50");

    if (colorType === "textColor") {
      label.setAttribute("for", "textColor");
      label.innerText = "Text color:";
      input.setAttribute("data-input", "textColor");
      input.setAttribute("aria-label", "Text color");
      input.defaultValue = DEFAULT_TEXT_COLOR;
    }
    if (colorType === "backgroundColor") {
      label.setAttribute("for", "backgroundColor");
      label.innerText = "Background color:";
      input.setAttribute("data-input", "backgroundColor");
      input.setAttribute("aria-label", "Background color");
      input.defaultValue = DEFAULT_BACKGROUND_COLOR;
    }
    if (color) {
      input.value = color;
    }

    div.appendChild(label);
    div.appendChild(input);
    return div;
  }

  function createButton(type) {
    if (type === "save") {
      const saveButton = document.createElement("button");
      saveButton.innerText = "Save";
      saveButton.classList.add("btn", "btn-primary", "mb-3", "mt-3");
      saveButton.setAttribute("data-action", "save");
      return saveButton;
    }

    if (type === "remove") {
      const removeButton = document.createElement("button");
      removeButton.innerText = "Remove";
      removeButton.classList.add("btn", "btn-danger", "mb-3");
      removeButton.setAttribute("data-action", "remove", "mt-3");
      return removeButton;
    }
  }

  function displayAlert(type, text) {
    removeActiveAlert();
    const newAlert = document.createElement("div");
    newAlert.setAttribute("role", "alert");
    newAlert.innerText = text;
    if (type === "success") {
      newAlert.classList.add("alert", "alert-success");
    }
    if (type === "danger") {
      newAlert.classList.add("alert", "alert-danger");
    }
    document.body.prepend(newAlert);
    setTimeout(function () {
      newAlert.remove();
    }, 2000);
  }

  function removeActiveAlert() {
    const activeAlert = document.getElementsByClassName("alert");
    if (activeAlert.length > 0) {
      activeAlert[0].remove();
    }
  }

  function getCurrentNumberOfRules() {
    return parseInt(document.querySelectorAll(".rule").length, 10);
  }

Last but not least, we'll also add a config file (config.js) so we can easily extend with more patterns or change default values in the future.

config.js

  
  const RULE_TYPE_OPTIONS = ["URL begins with", "URL contains", "URL ends with"];
  const DEFAULT_TEXT_COLOR = "#ffffff";
  const DEFAULT_BACKGROUND_COLOR = "#dc3545";

Extending the extension

So that was basically all the code needed to develop this Chrome extension. Ofcourse, this is the most simple form it could take and there's a lot of room for improvement. To name a few possible adjustments:

When adding a new rule, it should also check if there are any open tabs that match the pattern of that new rule and immediately insert the paragraph. Now, you'll need to refresh the page.
Add more customization options: font family, font size, adding images ...
The message is currently prepended to the <body>. That might produce unwanted results depending on the DOM structure. More testing on multiple (types of) websites and web applications is needed to discover gaps.
...

Hope you liked this. Feel free to comment or ask questions.

Creating and using an SSH key pair on Windows

Karel De Smet — Tue, 25 Aug 2020 18:54:48 +0000

Cover photo by Jorien Loman on Unsplash

For some reason, I've struggled in the past with creating an SSH key pair and adding it to an online service like Github. This walkthrough focuses on just that for Github on Windows, but the process for other services or on another OS is quite similar.

What is SSH?

SSH is a protocol for secure network communication, based on the principle of public-key cryptography. I like the analogy of one of my lecturers who said we need to see it as an unlimited stash of locks (= public keys). And we can provide any service with one of our locks and ask them to install it on their entrance door. We can then enter at any given time by using our (private) key.

So we'll now add a lock to Github and use our key to open the (virtual) door. This will prevent us from having to authenticate with our username and password every time we push, pull or otherwise interact with Github.

Requirements

Windows 10
OpenSSH installed and activated. This should be the case by default on the latest versions of Windows 10. If it's not, please refer to this page.

Creating a new key

Launch the command prompt.
Type ssh-keygen.exe and press Enter.
Press Enter again to save the key in the default file and folder (c:\Users\yourUsername.ssh\id_rsa). I would advise against using another folder to store the key, as this might lead to permission issues. If you already have a key with the default name in that folder and you want to keep it, make sure to specify another file name (i.e. c:\Users\yourUsername.ssh\id_rsa2).
I would suggest to leave the passphrase empty. If you don't, you will be prompted to enter it every time you connect to the service. Just remember that you can add that extra layer of security if needed.
Multiple confirmation messages will appear on your screen:
- "Your identification has been saved in c:...": This is the location of your private key.
- "Your public key has been saved in c:...": Obviously, this is the location of your public key.
- "The key fingerprint is: ..." and "The key's randomart image is ...": Just remember that both the fingerprint and the randomart image are simply a representation of your public key, making it easier to verify the authenticity of the server you are connecting to. Comparing the full key string, when in doubt, would be cumbersome.

Note: if you'd like to learn more about randomart, "The Drunken Bishop" is an excellent paper that will tell you all about it. Thanks to Aaron Toponce for summarizing and archiving it.

Adding the key to Github

Go to the folder containing your keypair (c:\Users\username.ssh by default) and open the .pub file with a text editor.
Copy the key but exclude the part after the final space (username@device-name).
In Github, go to Settings -> SSH and GPG keys -> New SSH key
Paste the key into the text area and click "Add SSH key".

Testing it out

When you're ready to test it out, make a commit on one of your local repositories and push the changes. Your terminal will state "The authenticity of host 'github.com (140.82.118.3)' can't be established. RSA key fingerprint is SHA256:[...]. Are you sure you want to continue connecting (yes/no/[fingerprint])?"
Enter "yes" to add Github to known_hosts, a file which resides in the same folder as your key pair. As a best practice, when connecting to a new service (or more specifically: server) via SSH, you should first add the domain name or IP address to this file, together with the public key. This ensures that a connection will only be established if the public key of the server you are connecting to equals the public key you have inserted into the known_hosts file for that server.

Congratulations!
You can now securely connect to Github via SSH. You don't need to type in your username/password anymore to get going.

Just remember:

Never share your private key with anyone.
Do not copy the key to another device. If you want to connect via SSH from another device, create a new key pair by following the same steps in this article.
If any of your private keys are compromised, immediately delete the matching public key from all services/servers to which you are connecting via SSH.

Laying down the foundations for automated UI testing

Karel De Smet — Wed, 05 Aug 2020 07:06:15 +0000

Ah yes, automated UI testing. That thing you want to implement without really knowing why. Or how. But how difficult can it be?

Well, quite difficult as it stands. It’s not just picking a tool and getting started, you need a solid foundation to make this work. Don’t make the mistake of building a proof of concept and presenting a flawless demo at the next management board. That will only heighten the astronomical expectations of your seniors.

Know what to achieve

Some of those expectations might include:

Reducing overall testing workload
Reducing the amount of bugs that make it into the production environment
Improving customer satisfaction
...

It's important to know what's expected. And don't just accept what they throw at you. Encourage your peers and seniors to be realistic. Test automation isn't going to bring world peace.

Make sure you know how to test it manually

Don’t try to run before you can walk. It’s better to develop a sound manual testing flow before you get to work on automation. For me personally, that means having a set of test cases per application in a spreadsheet (view an example here in Google ), with at least the following columns per test case:

ID
Name
Category
Prerequisites
Priority: Keep it simple. “Low”, “Medium” and “High” is usually sufficient. You can use this to see which test cases can be skipped when there’s not enough time to test them all. If you sometimes experience a lack of time to execute all test cases, it’s best to always start with the high and medium priority cases.
Scenario: Don’t describe the scenario with too much implementation detail. In my opinion, it’s better to write “log in” then “click on the username field, type in your username, click on the password field, type in your password, click on submit”. In most cases, that’s just too much detail.
Expected result: The same goes for the expected result. Too much implementation detail takes away the readability of your test cases. Yes, you’ll need that for automation. But you can detail that in a separate file the moment you need it.
Status: I usually tend to go with 5 possible values:
- Not completed
- Passed
- Failed
- Blocked
- Not applicable
Tester name
Extra information: This could be a link to JIRA, Confluence, Stackoverflow or just plain text describing whatever extra information the tester should know. If the test case has a status of “Failed”, “Blocked” or “Not applicable”, you should elaborate why here.

Now, you’ll probably want to collect input and feedback from your team members on how these test cases fare. Are they clear enough? Too specific? Any important test cases missing? Ask your colleagues to execute (some of) these test cases and let them provide honest feedback.
Then work through the feedback and discuss how you handled their questions and remarks. Re-iterate if necessary. In the end, any colleague that understands the application from a business perspective should be able to finish the whole set without asking themselves too many questions.

Write down the testing agreements

Next, define testing agreements so everyone’s on the same line. Some examples:

Which browser should be used for desktop testing?
Which device should be used for mobile testing?
When should these test cases be executed? Daily, weekly, monthly, before or after every release ...? If the full set is relatively large, you could also indicate the frequency per category.
In which environment should these test cases be executed?
What test data can and should be used? It’s advisable to have a separate tab that contains all test data and update it regularly.

Again, discuss these agreements together with your co-workers (and perhaps your seniors) to ensure you’re all on the same line. Communicate them clearly and include them in a separate tab of the spreadsheet that contains your test cases.

Measure the time you spend on manual testing

If you want to prove that automated UI testing is decreasing your workload, you need to figure out what manual testing incurs. So when you’re performing tests, just start the timer and note down how much time it took to complete.

Don’t just stick to the actual testing part though. Include everything that comes with it such as registering bugs, re-testing, discussing outcomes with your team members and communicating the results, as these are also tasks that could be (partially) automated.

Aim for the middle

Et voila! You can now tell your boss you’re embarking on a test automation adventure, and you’ll return with automated test cases. How many automated test cases you ask? Well, that depends.

Looking back at the intro, I warned against the “proof of concept” (POC) method to get some management backing for the time you’ll spend automating test cases. The problem with this approach is that most people will take easy-to-automate test cases and then management will think “Did he automate this in 2 days? Think about what he can do in 2 months!”.

On the other hand, you usually can’t automate the whole set without getting some feedback in-between. It’s too risky, and you might want to use that session to ask for more resources (e.g. extra software or assistance from developers). So it’s best to aim for the middle and take a reasonable number of test cases of average complexity. In my experience, somewhere between 5 to 15 percent of the total number should suffice.

Picking a tool

Now it's up you to make an educated decision on which tool to use. Although I wouldn't get too hung up on the details. Just make sure you're not stuck by committing to a big investment or long-term contract, so you can still switch if you feel you need to.

Good luck!