Software Engineering by Thomas Prochazka

Understanding the WebPageTest Waterfall Chart

2020-05-24T15:15:00+00:00

If you earn a living developing websites, one of your considerations should be website performance. An invaluable tool for investigating performance issues and finding bottlenecks is WebPageTest. If you have never heard of it before, be sure to check it out and give it a try.

It may seem quite complex and confusing at first, since they condense a lot of information into a few charts. However, it is well worth the effort to learn and understand it. If you are wondering what all those charts, lines and colors mean, be sure to read this awesome article “Reading a WebPageTest Waterfall Chart” from Matt Hobbs. He explains every little piece of WebPageTest and helps you kickstart your web performance debugging capabilities with WebPageTest.

Resources

VS Code Extension: Formatting Toggle

2020-05-12T20:38:00+00:00

If you are using VS Code and working with code formatters like Prettier regularly, this extension might come in handy. If everything is setup correctly, the code formatters are straight forward and help tremendously. However, sometimes you might need to disable them, because they contradict some linter rules or are not setup correctly in a different project.

That’s where the Formatting Toggle extension helps. It’s statement is simple:

VS Code extension that allows you to toggle the formatter (Prettier, Beautify, …) ON and OFF with a simple click. https://marketplace.visualstudio.com/items?itemName=tombonnike.vscode-status-bar-format-toggle

That is all it does, but it does the trick. It adds a toggle to the VS Code Status Bar, that let’s you quickly enable and disable formatters. Give it a try. It will surely be a useful addition.

Resources

VS Code Extension: Formatting Toggle

pomb.us - Build your own React

2020-05-08T20:48:00+00:00

If you are interested in how the magic behind react works and what it takes to build your own basic version of react, be sure to check out Build your own React on pomb.us.

It is a fantastic read. You will learn to build your own react from the ground up. Starting with the createElement and render function and working your way up to function components and even hooks. A fair warning though, you will need a bit of time to go through the whole article. However, as a bonus you will find one of the best ways to present evolving code that I have seen in a long time.

Resources

Build your own React

CTRL+R is broken in VS Code

2020-04-13T13:56:00+00:00

If you routinely work with VS Code you might be familiar with the CTRL + R shortcut. By default it is configured to open the “File: Open Recent…” window. This is especially handy, if you work on multiple projects in parallel and want to switch between them quickly.

However, this functionality broke for me recently, after reinstalling my notebook. As it turns out, the culprit was an extension: The eg2.vscode-npm-script extension which improves npm support for VS Code. So why did it break exactly? The extensions adds several new keyboard shortcuts. Some of them use chords including the CTRL + R keys. This stopped VS Code from accepting the CTRL + R shortcut, because it was waiting for the second part of a chord.

The authors of the extension (from Microsoft) recognized in hindsight, that this was a mistake and recommend in their README to remap the shortcut for these commands.

Now it is up to you to decide, if it is worth to keep the extension and remap the shortcuts or to remove it altogether. In my opinion it offers some interesting functionality, but can safely be removed, since VS Code offers great support for npm out of the box.

Resources

Help! My NodeList is not an Array

2020-04-04T20:48:00+00:00

Let’s say that you have to find a list of all links on a page. This is a fairly basic task and can be solved in different ways. For our purposes, using Vanilla JS, we could either use document.getElementsByTagName or document.querySelectorAll. While the former returns a HTMLCollection, the latter returns a NodeList. They are similar enough for our example, so we’ll go with querySelectorAll. Our code will look something like this:

// let elements = document.getElementsByTagName("a")
// HTMLCollection(3) [a, a, a]

let elements = document.querySelectorAll("a")
// NodeList(3) [a, a, a]

That looks promising! As a next step, we want to get the "href" attribute from each link. So that we end up with a list of urls that page links to. Since we are well versed developers and want to use a functional approach, we use the map function. As a reminder, the map function will execute the callback for each element in the array and create a new array from the return values. Combined with arrow functions we get some concise, expressive code:

let links = elements.map(elem => elem.getAttribute("href"));
// Uncaught TypeError: document.querySelectorAll(...).map is not a function

However, that will result in a nasty TypeError. But why? Both the NodeList and the HtmlCollection look like arrays and can even access single items with elements[index]. As it turns out, there are iterable objects as well as “array-like objects”. Array-like objects have a length property and can access elements via an index, but don’t have all the methods, that natural arrays have. Which is precisely the case with NodeList and HtmlCollection.

There are two quick and easy solutions (probably more, but those should be sufficient) to solve this problem:

Array.from

"The Array.from() method creates a new, shallow-copied Array instance from an array-like or iterable object."

"Array.from" is a new built-in function in ES6 (polyfills for IE are available), which can convert the NodeList and other objects into actual arrays. With that, we are now able to finally use the map function to implement our logic.

let elements = document.querySelectorAll("a");
let links = Array.from(elements).map(elem => elem.getAttribute("href"));

Spread/Rest operator

The second solution utilizes the new spread and rest operators. By extracting the elements of a NodeList and immediately spreading it into a new array.

let elements = document.querySelectorAll("a");
let links = [...elements].map(elem => elem.getAttribute("href"));

Conclusion

Both solutions work fine for that example. The main take away is, that you should be aware that not everything that looks like an array at first glance, really can be used in all situations like an array. However, additions with ES6 like the spread operator make dealing with arrays (and objects) easier and more comfortable.

Resources

git check-ignore: a helpful utility

2020-04-01T20:05:00+00:00

If you ever wondered, why you can’t add a file to git that you just created, it is probably somewhere ignored in a .gitignore file. But from what file and through which rule exactly? Luckily, it is possible to check that with git check-ignore.

The usage is quite straight forward. You pass it the path to a file. The command outputs the path if it is ignored.

> git check-ignore <pathname>
> git check-ignore -v <pathname>

If you use the verbose option -v, the command will additionally output, the exclude pattern that matched the path as well as the .gitignore file and the exact line number.

> git check-ignore -v .vscode/settings.json
.gitignore:4:.vscode    .vscode/settings.json

Resources

Git - git-check-ignore Documentation

Inspect the return value of a method in Visual Studio Debugger

2020-03-30T19:36:00+00:00

There is a neat functionality in Visual Studio that is quite helpful while debugging .Net applications. While the functionality itself has been around for a while, I am not sure that everyone working with Visual Studio is aware of it. It is possible to inspect the returned value of a method immediately after it has returned.

Suppose you have a method like Calc in the following example. The result of the expression on line 10 is immediately returned. However, during debugging, you might want to inspect the return value before it is passed into another method on line 3.

static void Main(string[] args)
{
    SomeOtherCalc(Calc(1, 2));
    var foo = "";
    // ...
}

static int Calc(int a, int b)
{
    return a + b;
}

static void SomeOtherCalc(int c)
{
    // ...
}

Traditionally, you could temporarily introduce a local variable result, store the computation and return result afterwards. However, that would require you to rebuild the project and introduce temporary unnecessary code.

// Possible, but we try to avoid that
static int Calc(int a, int b)
{
    var result = a + b;
    return result;
}

Instead, you can add a breakpoint on your expression on line 10. Once hit, you “Step Out” of the method. This will place the debugger on the line, where the method has been called (line 3). Exactly at this point, you can now inspect the returned value either via the “Immediate Window” by typing $ReturnValue or via the “Autos” window, where the value will also be displayed.

Inspect the returned value with Visual Studio Debugger

With this useful functionality, you can inspect the return values of methods more easily without actually modifying the source code. Take note, that you won’t be able to inspect the return value anymore as soon as you move the debugger forward.

Resources

How to see the value returned by a method in Visual Studio Debugger?

OrderBy and null in C#

2020-02-26T20:36:00+00:00

Recently, I came across an - at first glance - startling interaction between OrderBy and null. Suppose you have a list of players with their name and number of losses. Since it is a legacy implementation, new players “Losses” are initialized with null.

class Player {
    public string Name { get; set; }
    public decimal? Losses { get; set; }
}

var allEntries = new List<Player>
{
    new Player { Name = "Player A", Losses = 5 },
    new Player { Name = "Player B", Losses = 8 },
    new Player { Name = "Player C", Losses = null },
    new Player { Name = "Player D", Losses = 1 },
    new Player { Name = "Player F", Losses = 10 },
};

We want to get the top 3 players with the lowest number of losses to reward them. We can easily achieve that by using OrderBy and Take.

var topEntries = allEntries
    .OrderBy(e => e.Losses)
    .Take(3)
    .ToList();

Normally, we would expect our topEntries to contain the Players “Player D”, “Player A” and “Player B” with 1, 5 and 8 losses respectively. However, soon we realize, that actually “Player C” is the top player with his Losses = null. So if you ever have to sort by a nullable property, be sure to remember that null values are ordered first by default. In the example, a fix would be trivial by filtering out null values before ordering.

var topEntries = allEntries
    .Where(e => e.Losses != null)
    .OrderBy(e => e.Losses)
    .Take(3)
    .ToList();

A deeper dive

How does that actually work internally? OrderBy uses an IComparer to compare entries and order them properly. It is possible to specify a custom implementation as the second argument for the OrderBy method. If no argument is provided, it will fall back to Comparer<decimal?>.Default. Since our type is nullable, this will be a NullableComparer<decimal?>. You can checkout the whole logic and implementation on GitHub. The important part is the Compare method.

// NullableComparer<T> implementation
public override int Compare(Nullable<T> x, Nullable<T> y) {
    if (x.HasValue) {
        if (y.HasValue) return x.value.CompareTo(y.value);
        return 1;
    }
    if (y.HasValue) return -1;
    return 0;
}

If you are unsure, what the return values of -1, 0 and +1 mean in that context, you can always refer to the Documentation. Basically, if the value is less than zero, “x” is ordered first. If the value is greater than zero, “y” is ordered first. So if we examine the NullableComparer<T>::Compare implementation, we get the following results:

If “x” is NOT NULL and “y” is NOT NULL ➡ The smaller numeric value will be ordered first
If “x” is NOT NULL and “y” is NULL ➡ “y” (null) is ordered first
If “x” is NULL and “y” is NOT NULL ➡ “x” (null) is ordered first
If “x” is NULL and “y” is NULL ➡ Both are null and don’t need to be reordered.

And that is the explanation, why null values are ordered first. As you see, with Microsoft publishing a lot of their source code on GitHub, it is straight forward to find the implementation of Framework functionality and reason about it.

Resources

Use webpack aliases with TypeScript

2020-02-04T19:11:00+00:00

If you work on a decently sized TypeScript application, chances are that your source directories are nested quite a bit and you will have various components which need to import something from completely different folders. So if you find yourself writing a lot of imports with ../../../, then this tip might be helpful for you!

A useful tool in that case are import aliases. If you are using webpack these are part of the Module Resolution. Justin Tulk wrote a great post about import aliasing with webpack, VS Code and Jest, so be sure to check that one out!

Advent of Code 2019

2019-12-05T18:10:00+00:00

Christmas time is here. Work is going slow. There is not a lot of stuff to do. If that applies to you and you enjoy a programming challenge, then I have news for you! Check out this years version of Advent of Code! Each day a new puzzle will be published with two parts. You can earn stars for each completed puzzle and even compete on a leaderboard (the first 100 solutions receive more stars).

The author, Eric Wastl, puts in a lot of effort into Advent of Code each year. So show him some love and spread the word!

Advent of Code is an Advent calendar of small programming puzzles for a variety of skill sets and skill levels that can be solved in any programming language you like. People use them as a speed contest, interview prep, company training, university coursework, practice problems, or to challenge each other. https://adventofcode.com/2019/about

I will also join in on the fun and publish my solutions on GitHub at zlypher/advent-of-code. However, I am already a few days behind, so don’t count on it being completely up to date.

If you are stuck or simply want to exchange some thoughts and solutions with other people, I encourage you to check out the Advent of Code on Reddit. Don’t be intimidated though, there are some impressive solutions posted.

Resources