Making dark mode play nicely with bfcache
I try to avoid making this blog be about adding features to the blog, but I recently implemented a dark mode and hit a few snags that I felt might be worth talking about.
Guilherme Simões
The writings, experiments and assorted output of Guilherme Simões.
Latest posts
The Importance Of (The Main Thread) Being Idle
Mandatory listening for this post.
Web Component: Hand-drawn Checkbox
This is my first try at a Web Component. This one progressively enhances an <input type="checkbox" />. So even if the user blocks JavaScript, a regular HTML checkbox is still rendered. The custom element can be used like this:
Classes considered harmful when authoring a JavaScript library
Let me start by saying I’m the biggest OOP fan. I love Ruby. I have a copy of POODR on my bookcase. I look back fondly to the times of React.createClass({ mixins: [MyMixin], ... }). I loathe HOCs and hooks and whatever patterns FP zealots have been trying to push for the past couple of years. However, classes and OOP may not always be the best approach.
Writing metadata to CBZ files with Calibre
Comic books and mangas are usually stored as comic book archives, a type of file for the purpose of sequential viewing of images. This archive file is not a distinct file format but merely a filename extension naming convention. The filename extension indicates the archive type used:
Narrowing TypeScript Unions without the `in` operator
When using a Union Type such as this:
Minifying private properties and methods with Terser
As we saw last time, minifiers / compressors such as Terser do not minify class properties and methods by default. If a class has lots of properties and methods, their names can make quite the difference in the total size of an application. In the following example:
Making setTimeout return number instead of NodeJS.Timeout in TypeScript
For the longest time we had to deal with the fact that NodeJS types were being included in a web project at work. The most visible aspect of this issue was that the return type of setTimeout was a NodeJS.Timeout when it should be a number. In order to fix this we used to place the following at the top of each file that used setTimeout:1 Another option was to surrender to NodeJS.Timeout and use…
Animating a pirate treasure map path
Animating an SVG line is nothing to write home about. It has already been described in great detail many, multiple, different times. We make the line use dashes, configure it so that there is a single dash that spans the entire line, and then we animate the offset of that dash. Done.
Service Class vs Service Module
This is just a quick post to get this out of my system. I further explore this subject in the follow-up post “Classes Considered Harmful”.