JavaScript for Impatient Programmers (ES2022 edition)

A book on JavaScript by Axel Rauschmayer. This book makes JavaScript less challenging to learn for newcomers, by offering a modern view that is as consistent as possible. Covers all essential features of JavaScript, up to and including ES2022. You can read the entire contents online, or order PDF/EPUB/MOBI versions for $34 JavaScript for Impatient …

Lights at Sea — A map of Lighthouses

This map shows all the blinking beacons from OpenStreetMap. More specifically, it asks the Overpass API for all elements with an seamark:light:sequence attribute, decodes these, and displays them as coloured circles on the map using Leaflet. It also tries to take the seamark:light:range and seamark:light:colour into account. The cool part is that the size and …

Getting Started With CSS Cascade Layers

Stephanie Eckles, writing for Smashing Magazine: Cascade layers introduce the new at-rule of @layer. The intent is to help CSS authors be more intentional about ordering the “layers” of CSS rules as a new method of cascade management. Getting Started With CSS Cascade Layers → If you’re looking for the quick version on Cascade Layers, …

How I Got Pwned by My Cloud Costs

The author of the Have I Been Pwnd website got a nasty surprise: an AU $5,000 bill from Azure (that eventually racked up to $11,000). The culprit: a sudden spike of outgoing bandwidth due to a file no longer being cached properly. I guess I’m looking at this a bit like the last time I …

Nixery — Ad-Hoc Container Images

Nixery is a Docker-compatible container registry that is capable of transparently building and serving container images using Nix. Images are built on-demand based on the image name. For example: docker pull http://nixery.dev/shell/git/htop The command above will give you an image with an interactive Shell, that also has git and htop installed. Keep adding more path …

Comparing CSS Specificity Values

In CSS, Specificity is expressed as a triad/triple (A,B,C). An example value would be (1,1,2). To compare specificity — i.e. to see which value has a higher specificity — you need to compare each component of the triple until you find a difference: function compareSpecificity(x, y) { // x and y being arrays such as …

CSS Cascade Layers in 5 Minutes

In this video, Una digs into Cascade Layers: Quick show and tell on CSS cascade layers and the @layer property, coming to browsers in Chromium 99+ and Firefox 97+, plus they’re in the current Safari Tech Preview. The demo can be found on CodePen: https://codepen.io/web-dot-dev/pen/LYzqPEp Awaiting her post on the subject, you can check out …

Test your CSS Selector Skills with CSS Speedrun

Now that’s a fun little quiz by Vincent Will: A small fun app to test your CSS knowledge. Find the correct CSS selectors for the 10 puzzles as fast as possible. Finished my in 04:38:7. Level 8 tripped me up though: didn’t immediately see the pattern and lost more than 2 minutes on it 😅. …