The New Clock and the Evolution of JavaScript

The attentive readers among you might have noticed that the artsy clock that appears on every page of this blog (except on mobile devices) behaves slightly different now. In fact, I’ve removed its dependency to the old and unsupported Raphael.js library, and migrated it to new and modern JavaScript features.

What are some of those “modern” features of JavaScript?

• Using let and const instead of var (duh).
• The class keyword and full OOP capabilities: private fields with #, setters and getters, constructor, etc.
• Using requestAnimationFrame instead of setInterval, a new API with broad browser support in 2024.
• Drawing on a native HTML canvas, instead of the original version made with Raphael.js.
• Finally, I gave the code some refactoring love, and I think it has better encapsulation now, and it’s easier to understand.

To use it, just download the source and use the HTML shown below.

<canvas id="canvas" width="400" height="400"></canvas>

<script src="clock.js"></script>
<script>
const clock = new Clock("canvas", 150);
clock.start();
</script>

This exercise made me reflect on my history with the JavaScript programming language. The oldest piece of JavaScript in this blog is almost 28 years old. To put this in perspective: I have colleagues that are younger than that code. Not only that, but 28 years before 1997 it was… 1969, and Neil Armstrong was about to walk on the moon.

JavaScript is the language that has been the most constant in my career. I wrote server apps in 1997 and in the 2020s with it, I wrote books about it, I debugged it, I blogged about it, I helped people learn about it, I made mobile apps with it, I read the best books about it, I ranted about it, and I experimented in as many ways as I could with it. It is still one of my preferred languages.

I’ve witnessed its evolution from the front row. Almost exactly 20 years ago, before the <canvas> element even existed, I used Walter Zorn’s DHTML Drawing Library (still available and still working on modern browsers!) to create a Flash-less, Java Applet-less solution for a complex browser-based app.

These days, there aren’t (finally!) any more shenanigans between “modern” browsers: all of that “if (ie) {…} else {…}” is gone, and now addEventListener() is a single point of entry for creating events. We can even subscribe to server-side events and create interactive systems that not even AJAX permitted 23 years ago.

JavaScript is now boring tech and that’s great. All browsers come bundled with developer tools that make developers incredibly productive, and you can even plug your Visual Studio Code editor if all else fails.

We can even load old Flash movies and Java applets our our web pages… without forcing our users to install Flash or Java. The era of jQuery is over, and we can now use vanilla JavaScript for most purposes, across all browsers. Oh, did I forget about template strings? That’s also awesome.

The only API I truly miss is the Web SQL database. The official IndexedDB doesn’t cut it, IMHO. The latter is truly a clusterfuck of an API, unusable as it is, and I haven’t seen much progress in its version 2.

Even the search engine in this page uses modern JS features:

async function search (query) {
	const url = `/search/index.php?q=${encodeURIComponent(query)}`;
	const response = await fetch(url);
	const json = await response.json();
	return json;
}

Anyway. Maybe the script above doesn’t ring a bell to you, but for us who have been in contact with the language for almost three decades, it’s amazing to see how much it has evolved, and how much better it has become.

The source code of the new JavaScript clock is available to download, for your personal enjoyment, reuse, or whatever you want to do with it.