Web development quirks

I’ve been working all kinds of software projects over the years. Many of them had atleast one graphic interface, most of those were websites. And out of all of those projects, the websites are the ones that still work perfectly fine, even on modern up-to-date machines. And the web isn’t a new thing either, the first websites existed before my birth. The crazy part is that almost all ancient websites (that plain HTML/CSS) are still working perfectly fine. Ofcourse, there are some exceptions (looking at you, flashplayer, silverlight and ActiveX)

If you have ever designed something with changing requirements, you know that previous assumptions are no longer valid when certain changes are made. This is usually not a problem, but when you need to ensure backwards compatibility the complexity increases dramatically. And if backwards compatibility is essential, you will often need to resort to hacks or unexpected quirks. The web is a perfect example of this, its being updated and changed constantly, while still being almost perfectly backwards-compatible for over 30 years. In this article, I will point out some quirks that come as a result from this.

Colours

It won’t suprise you that the current web comes with a sizable list of predefined colours, from red to rebeccapurple. But this list was initially much smaller, and started with a handful of colours. One of these colours is grey, which looks like this:

Later, when new colours were added, a bunch of light-, and dark- colours were added. So for example, blue gained a lightblue, and a darkblue.

Grey gained a lightgray and darkgray. But unlike the original colours, these new ones were not hand-picked. Instead they got copied from the X11 window system. Because of backwards-compatibility, colours which already existed in CSS were not overwritten. As a result, a quirk now exists, where the light- and dark- versions of the colour grey are based on a different original grey (from X11) than the original grey in CSS.

The squares above layout the colour gray in a light to dark, according to the colour’s name. But as you can see, gray is clearly darker than darkgray. If you want to avoid this issue, simply use other ways of representing colours, such as HEX or RGB. But web-developers will often encounter this quirk when creating a quick mockup.

Javascript dates

There are also plenty of javascript examples, some of which are downright stupid. Apart from questionable type coersion, there are a few hidden gotcha’s in the handling of dates. Try to spot the awkward results of the code below:

const date = new Date(2024, 2, 2);
const timeString = date.toDateString();
console.log(timeString);
// 'Sat Mar 02 2024'

const date = new Date(2024, 2, 2);
const years = date.getYear();
console.log(years);
// 124

const date = new Date(2024, 0, 0);
const timeString = date.toDateString();
console.log(timeString);
// 'Sun Dec 31 2023'

Because its completely expected that months, and days use a different indexing for the first item. Months start at 0, and days obviously start at 1. the getYear() function also obviously returns the year-1900, because in 1995, when the code was written, nobody could ever possibly predict that years might not be prefixed with 19 forever. Sigh.

Javascript array functions

In the modern day, with influences from functional programming, we have very nice array functions such as .map, filter or .every. Very similar to something like LINQ from C#. Theres also a bunch of functions which change the array, but these functions do not mutate the original array, they instead create a copy. Examples of this are: .concat, .toReversed or .toSorted. However, there are also some array functions which are slightly older, and mutate the array in-place! You might know these functions as .reverse, or .sort. As you can see, the immutable versions were also added. But if you’re unaware, it might be a nasty suprise.

const a = [1,2,3,4,5];
const b = a.reverse();
const c = a.toReversed();

console.log(a);
// [5, 4, 3, 2, 1]
console.log(b);
// [5, 4, 3, 2, 1]
console.log(c);
// [1, 2, 3, 4, 5]
// a already got reversed by a.reverse(),
// so this is the original ordering again.

Conclusion

The web is impressive, and after many years the backwards compatibility is unmatched. But this did cause many quirks. This article only mentions a handful, but there are many more. If you happen to know a few of them that you’ve run into, feel free to place them in the comments.