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 😅. …

Life of a Pixel

Interesting talk from “Chromium University 2020”, digging into Chrome’s Rendering Pipeline. A tour of the internals of Chromium’s rendering architecture, tracing the steps in the pipeline from web content to display pixels. Concretizes high-level concepts with pointers to important classes and data structures in the codebase While the main concepts — such as a Main …

Synchronized Scrolling Tickers

These Scrolling Tickers by Fabrizio Calderan are quite nice. By calculating the rendered width (via JS, passed to CSS using a Custom Property) and taking that into account to calculate the animation-duration he’s able to synchronise their speeds. What I like most though is how the repetition of the ticker’s content is achieved. Where I’ve …

Exploiting IndexedDB API information leaks in Safari 15

There’s a pretty nasty exploit in Safari 15, where sites/tabs that interact with an IndexedDB database leak that name to other tabs. In Safari 15 on macOS, and in all browsers on iOS and iPadOS 15, the IndexedDB API is violating the same-origin policy. Every time a website interacts with a database, a new (empty) …

Parcel CSS: A new CSS parser, compiler, and minifier written in Rust (+ example project)

From Devon Govett, author of Parcel, comes Parcel CSS: Parcel CSS is a new CSS parser, compiler, and minifier written in Rust. It has significantly better performance than existing tools, while also improving minification quality. Looking at the charts, it pretty darn fast indeed. The key feature does not come from its Minification or Vendor …

Contributing to Open Source: Be a Mimic

Luke Downing made a contribution to Laravel. Before starting to write code, he took the time to look at how the repo was structured and how the code was written. By mimicking the ruling code style, his PR got accepted immediately: When Dries [one of the maintainers] reviewed my PR, he understood the code immediately. …