CSS
CSS:the bomb inside your inbox
It's quite common for webmail clients to render untrusted CSS in a trusted UI. They attempt to make this safe using CSS sanitization. In this paper I'm going to show you how to break out of trust boundaries, exfiltrate tokens, compromise 3rd party websites and even steal passwords.
Using and Styling the Dialog Element
There's a lot of nuance to the <dialog> element, a seemingly little piece of web architecture. I've got some notes from digging into it.
Animating CSS border-image
The CSS border-image property is one of those features we take for granted. And it’s not new at all. In fact, Andy Clarke has a fairly recent article that “revisits” the property and shows just how creative we can get with it. Go read that article — it’s worth it.
The TL;DR is that we can use an image or gradient as a border instead of standard styles, say, solid or dashed border lines. What I want to do is take them a little further to show how we can animate border images for even more interesting user interfaces.
Unlock Immediate Diagonal Scrolling with CSS scroll-axis-lock: none
When you scroll a 2D scroller on a website, the browser does a lot of work behind the scenes to keep you on track. One of the things it typically does is scroll axis-locking (aka “railing”), ignoring some minor scroll deltas in the non-main scrolling axis. While helpful most of the times, this sometimes can get in the way such as in map or image zoom interfaces. With the new CSS scroll-axis-lock property you can disable the browser's default scroll axis-locking behavior, allowing users to immediately perform a diagonal scroll.
Improved CSS Text-Stroke
Arriving late to the party for this fun little CSS trick (with a few gotchas).
CSS Units — The Complete Reference
A complete interactive reference to every CSS measurement unit. From the basics of px and rem to the nuances of svh, dvh, and cqw.
JavaScript
20 Modern JavaScript Tricks for Cleaner Everyday Code
Practical patterns for arrays, objects, strings, and regular expressions.
React Router v8 in Action: Lazy Loading and Nested Routes
A practical guide to modern React routing with lazy pages, nested layouts, URL params, and navigation.
HTML over WebSockets: real-time SPAs with barely any JavaScript
Building a SPA is a complex puzzle: a JavaScript framework that draws the view, an API serving JSON, and 2 independent codebases forced to understand each other through contracts. It is an accepted, professionalized scenario. But being a standard does not make it the only way. I want to show you another approach, one that is not new but has gained traction over the years: HTML over WebSockets.
The idea is this: instead of sending JSON and assembling the HTML in the browser, the server sends the HTML already built and the client just places it where it belongs. All the rendering logic stays in the Back-End, in a single language, with no need for contracts or an API.
Signals and Effects Using Vanilla JavaScript & Web APIs
I’m a strong advocate for “you don’t need to lock yourself in a web framework ecosystem to take advantage of their amazing features”. JavaScript and Web Standards alone allow you to replicate anything independently using Web APIs.
There is currently a proposal to bring signals to JavaScript but until then, let me show you a way to get these using JavaScript and widely available web API.
Tearline — any HTML, printed as a receipt
One custom element that renders anything you wrap in it as a thermal receipt, then exports it as a PNG. Zero dependencies, no build step, MIT.
How Baseline Can Help You Ship Less JavaScript
The gap between “you need a library for this” and “the browser does this” keeps closing. A practical guide to auditing your dependencies and finding what the web platform can now handle for you.
Innovations of Solid 2.0
So Solid 2.0 release candidate is now out and I’ve been trying to think of how to best market it. It’s not just a “faster React”, it’s something different. Something pushing the boundaries of what’s possible with frontend UIs.
Today I want to show you why it’s worth paying attention to by showcasing its innovations.
Miscellaneous
morphicons — SVG icon morphing library for React, Vue & Svelte
Morph any SVG icon into any other with spring physics. Animate Lucide, Tabler and Heroicons in React, Vue, Svelte, React Native, Astro or vanilla JS. Zero dependencies, ~6 KB gzip.