Maximally Minimal Build Process
In my previous post I described how I set up sightread.org with no build process and modern JavaScript. The goal was raw ES modules, no transpilation, no bundling, just <script type=”module”> and we’re off. That worked great for a minute but I wanted just one more thing: long-lived immutable JS resources that can be cached […]
Import JavaScript like it’s 2026
I started this new project called sightread.org to generate music to practice sight reading. (Still early days, it works with rhythms only). I wanted to go for no build process and modern JS and modern HTML. How modern is modern? IE8? IE10? In my head when I think “modern” it always brings an image of […]
Introducing Lizzy.js
I created this joke-y “framework” to build a website, or a blog if you will, from markdown files. The idea is to (ab)use Apache’s default directory listing. The “index” page reads the Apache’s HTML of a given directory and produces a list of articles. When the user clicks, the markdown file (corresponding to an article) […]
First timid steps in Rust
I’m working on a new site at https://highperformancewebfonts.com/ where I’m doing everything wrong. E.g. using a joke-y client-side-only rendering of articles from .md files (Hello Lizzy.js) Since there’s no static generation, there was no RSS feed. And since someone asked, I decided to add one. But in the spirit of learning-while-doing, I thought I should […]
A quick WordPress Super Cache fix
When you use a bog-standard WordPress install, the caching header in the HTML response is Cache-Control: max-age=600 OK, cool, this means cache the HTML for 10 minutes. Additionally these headers are sent: Date: 2024年12月07日 05:20:02 GMT Expires: 2024年12月07日 05:30:02 GMT These don’t help at all, because they instruct the […]
Turn an animated GIF into a <video>
Animated gifs are fun and all but they can get big (in filesize) quickly. At some point, maybe after just a few low-resolution frames it’s better to use an MP4 and an HTML <video> element. You also preferably need a “poster” image for the video so people can see a quick preview before they decide […]
AI’s “streaming text” UIs: a how-to
You’ve seen some of these UIs as of recent AI tools that stream text, right? Like this: I peeked under the hood of ChatGPT and meta.ai to figure how they work. Server-sent events Server-sent events (SSE) seem like the right tool for the job. A server-side script flushes out content whenever it’s ready. The browser […]
Inverse font subsetting
While at the most recent performance.now() conference, I had a little chat with Andy Davies about fonts and he mentioned it’d be cool if, while subsetting, you can easily create a second subset file that contains all the “rejects”. All the characters that were not included in the initially desired subset. And as the flight […]
Web font sizes: a more complete data set
This is part 4 of an ongoing study of web font file sizes, subsetting, and file sizes of the subsets. I used the collection of freely available web fonts that is Google Fonts. In part 1 I wondered How many bytes is “normal” for a web font by studying all regular fonts, meaning no bolds, […]
@supports and @font-face troubles
I’ve been crafting a nice font-face fallback, something like this: @font-face { font-family: fallback; src: local(‘Helvetica Neue’); ascent-override: 85%; descent-override: 19.5%; line-gap-override: 0%; size-adjust: 106.74%; } It works well, however Safari doesn’t yet support ascent-override, descent-override, nor line-gap-override in @font-face blocks. It does support size-adjust though. Since my code requires all 4, the results with […]
Letter frequency in the Bulgarian language
In this post, I talked about the letter frequency in English presented in Peter Norvig’s research. And then I thought… what about my own mother tongue? So I got a corpus of 5000 books (832,260 words), a mix of Bulgarian authors and translations, and counted the letter frequency. Here’s the result in CSV format: letters.csv […]
Web font file size study: a variable font addition
TL;DR: If your variable font file is significantly larger than 35K you may ask yourself “How did I get here?” Two font files (of the same family) means more bytes than one variable font that does both For context see part 1 and part 2. After publishing part 2 of my ongoing web fonts file […]
The zebra jumps quickly over a fence, vexed by a lazy ox
The zebra jumps quickly over a fence, vexed by a lazy ox. Eden tries to alter soft stone near it. Tall giants often need to rest, and open roads invite no pause. Some long lines appear there. In bright cold night, stars drift, and people watch them. A few near doors step out. Much light […]
Lessons learned from 222,557 font file subsets?
Earlier this year I wondered how many KB is “normal” for a web font file size (spoiler 20-ish KB). I finished the post questioning how much subsetting really helps, meaning how much do you save from painstakingly choosing which characters should stay in the subset as opposed to just broad strokes (ASCII vs Latin vs […]
Font-face toggler bookmarklet v2
This is a different version of a font on/off toggler bookmarklet. I did one such bookmarklet earlier this year, which works by messing up font-family inside @font-face. This new version works my messing up url() inside @font-face blocks. By “messing up” I mean changing the string “woff” to “woof” which means making the font files […]
“Your app crashes my browser” talk
Today I gave a talk on memory leaks in web apps at the wonderful dotJS conference in Paris’ Folies Bergère theater. It was only 5 minutes, so not much time for links and such. Here’s more or less what I said including the links. Bonjour à toutes et à tous, who’s excited about… Memory Leaks!? […]
Chrome extension: Open in this tab
Do you hate it when sites open new tabs, for example from search results? Yeah, me too. So I thought a good idea would be to have a right-click “Open in this tab” similar to “Open in a new tab” option. Voilà, a new Chrome extension. You can install it from the store. How it […]
Minimal SVG Favicon
Why minimal? I like “minimum-viable”s of all sorts. As a performance enthusiast I’m fascinated by anything minimal. So here goes a minimum viable SVG favicon. Why favicon? Welp, browsers will look for one and if you don’t have it, enjoy the 404s! Why SVG? It could be tiny, almost as tiny as a CDN URL, […]
Capturing web page video with a couple of bookmarklets
I recently saw someone sharing a blog post on social media using a video that just scrolls through the blog post. I wondered if a video like this can be created easily and automatically. Using a simple bookmarklet. Turns out yes! I ended up with two bookmarklets because they do different and independent things: one […]
The Truth(tm) about encoding SVG in data URIs
tl;dr: You can stop worrying and URL-encode only the # character. What? So you want to have an SVG image in a CSS stylesheet. Yup, using data URIs (hey lookie, a 2009 post). There are a number of reasons not to embed images in CSS to begin with (caching, reuse), but hey, sometimes you’re not […]
How many bytes is “normal” for a web font: a study using Google fonts
TL;DR: If your font file is significantly larger than 20K you may ask yourself “How did I get here?”. For images I think we (web developers) have a sense of how many bytes we can expect an image we see on a page to be. A JPEG photo? 100-ish K is ok for a decent […]
Font-face toggler bookmarklet
Update: a different version that supports the use of local() is now available Ever wanted to look at your page and turn Web Fonts on and off? Experience the layout shift repeatedly, like some sort of UX torture? Look no further, here comes the handy bookmarklet. Install Drag this link to a bookmark toolbar near […]
Image requests in hidden content
You know the pattern: spit out some markup, probably server-side, but hide it for later. On-demand features (not to overwhelm the UI), dialogs waiting to pop, and so on. <div class=”modal hidden”>content here…<div> And what happens when the “content here…” includes resources, such as images? Is the browser going to download them? Let’s check. What […]
Minimum viable no-image image src
Remember spacer.gif? Yeah, “good” old days… We may now have all the CSS features to make everything better but sometimes the ghost of spacer gif rears its transparent head. And that’s an HTTP request. A request that’s better devoted to something useful. Like an LCP image or something, I dunno. So anyway, sometimes a simple […]
Perfplanet calendar ’23 call for articles
Hello, dear reader and web performance enthusiast! It’s time to sit down and write an article for the performance calendar. Here are some more details. Or if you’re not feeling like writing, look around you and recruit the person you think should share their knowledge with the world. What can you write about? Just share […]