RSSAmplifier

Blog

Scott Jehl's Blog

Writing, links, presentations, etc.

scottjehl.comRSS feed ↗68 posts

Latest posts

On Dollar Slice and Making Stuff

Over the long, rainy weekend here in NYC, I made DollarSlice.nyc from a variety of materials: pencil & paper, Procreate’s brush tool, Figma for drawing the vector lines, static HTML, some lucky doughy font discoveries, free buoy data from NOAA, 11ty. It’s been a delight to put together, and it’s certainly not finished, but I’m happy with it so far—and with making stuff like this, just in general.…

ShopTalk Show Podcast: Lazy Loading the Web with Scott Jehl

How To Use Standard HTML Video & Audio Lazy-Loading on the Web Today

Squarespace & Web Standards: How We Helped Bring HTML Video & Audio Lazy Loading to Today’s Browsers

Standard HTML Video & Audio Lazy-loading is Coming!

In case you haven't already heard, my team at Squarespace has been working to standardize HTML Video & Audio element lazy-loading, and good things are happening! Update, April 2026: Since this was originally posted, this feature has become a web standard and is starting to roll out in browsers, so much of this post is now outdated. Be sure to check out Squarespace's posts on how we proposed and…

Enhancing Web Components Safely with Self-Destructing CSS

A month ago, I wrote about a defensive CSS convention I've been calling Self-Destructing CSS . As CSS patterns go these days this one is delightfully low-tech, but in my work I've seen it have an outsized impact in ensuring usable experiences for increasingly-heavy websites when network or device conditions aren't ideal. This notion of delivering "optimistically" while planning for failure is…

Could Open Graph Just Be a CSS Media Type?

If you were to link to a page on my website (and many others) from another social media website, you'd likely see an image preview of the page appear. This is handled via Open Graph , a protocol defining a group of meta tags that specify the page's title, social preview image, URL, and more. For example, here's a social preview OG image for my most recent blog post about Self-Destructing CSS: The…

For Your Convenience, This CSS Will Self-Destruct

As a web developer, I find that good performance, accessibility, and reliability is often acheived by playing defense against the many problems folks may encounter while using the web. The more I ask myself questions like, "what could go wrong here if JavaScript fails to fully load, or has a runtime error, or merely takes a while to load?," the more I find my sites are usable when those things…

Fast & Smooth Third-Party Web Fonts

If you're loading fonts from a popular third party provider like Google Fonts or Typekit, the stylesheet link -based loading snippets they offer are not great from a performance perspective . Like any ordinary stylesheet, they block page rendering while they are loading, and for all that delay, the CSS you get merely contains font-face definitions for fonts that may be subsequently downloaded if…

Building a QR Code HTML Web Component

Recently, a friend asked if I knew of a Web Component that generates a QR Code from meaningful HTML. She said that there seemed to be plenty of options for creating QR codes in general , but none that worked by extending already-useful HTML instead of just configuring it all with JavaScript. I couldn't find any either, but thinking through these kinds of patterns is probably what I enjoy most…

Smashing Conf NYC 2024: Web Components Can't Save Us, But You Can!

Frontend Masters: Relatively New Things You Should Know about HTML Heading Into 2025

Let's Standardize Async CSS!

6 years back I posted the Simplest Way to Load CSS Asynchronously to document a hack we'd been using for at least 6 years prior to that. The use case for this hack is to load CSS files asynchronously, something that HTML itself still does not support, even though script elements have supported both defer and async attributes for quite some time. The hack takes advantage of browsers' built-in…

Syntax.fm Podcast: Web Components Can't Save Us

I had the great opportunity to go on the Syntax podcast and talk about web performance, web components, the Boston Globe project, JavaScript over reliance, Squarespace, my Web Components Course , and a lot more. It was fun to jump on a show I listen to regularly. That episode is live with an utterly linkbait title wherever you get your podcasts! PS: use the code SYNTAX for 30% off my Web…

The History of Web Performance

Now Released! The Web Components Demystified Online Course

Big news! My new online course, Web Components Demystified has launched and is open for enrollment! What's It About? There's a shift underway in front-end development. The largest companies in the world are transitioning away from the complicated, bloated frameworks that have dominated our practices in the last decade, and they're choosing to build on standard Web Components instead. Web…

HTML Web Components Can Have a Little Shadow DOM, As A Treat

Well, I swore myself off blogging until I get this course launched and sure enough, here I am again. But a little idea about HTML Web Components has been squatting in my brain for a little while and I needed a place to put it. There's been a lot of great writing about HTML Web Components in the past year, and as an advocate of performant, resilient, progressive enhancement patterns, I'm a big fan…

Have It All: External, Styleable, & Scalable SVG

It has been a few years since I'd last tinkered with approaches for embedding SVG into webpages, but a nice post making the rounds today prompted me to take a look back at where I'd last landed. While that post cites a few perfectly good ways to include SVG into a page, here I'll demonstrate a 4th approach that I think hits the center of the venn diagram for External, Styleable, and Scalable SVG.…

Joining Squarespace

Big News! I'm excited to share that I'll soon be joining Squarespace as a software engineer on the web performance team! As you may already know, Squarespace is a website design, development, management, and delivery platform that has been used to create millions of websites for online businesses, artists, bloggers, restaurants, bands, and more. In this role, I know there will be loads of…

Responsive Video Works Now. These Features Could Make It Work Better.

Recently in the Web Performance Slack group , there was some discussion around Responsive Video and what else it is lacking, now that it works at a baseline level . I thought I'd write a quick post that lists a few features that are on my wishlist and include relevant links to WhatWG issues where you might lend your feedback! Responsive Poster Images: Now that we can offer multiple sources for a…

Just Speculating: You May Not Need a SPA framework

If you follow Web Performance topics closely, perhaps you've heard about Speculation Rules , a new browser API that aims to improve page-to-page navigation speed for multi-page websites ( aka normal websites ). While not yet a W3C standard, Speculation Rules are already fully supported in the stable version of Chromium-based browsers. That means you can use them today to improve the time it takes…

Announcing Web Components Demystified, an Online Course

I have some exciting news! I just launched a crowdfunding campaign for a new online course I plan to produce. It's called Web Components Demystified , and it aims to explore web components holistically, covering not only the details of the collective standards behind web components, but also how they're being used across the web today and what's ahead as well. The time for learning web components…

How would you build Wordle with just HTML & CSS?

I’ve been thinking about the questions folks are typically asked in front-end interviews these days, and how well those questions assess a candidate's depth of understanding of web standard technologies, and not just their ability to employ JavaScript algorithms and third-party frameworks. It made me think about the sort of questions I would like to hear or ask in an interview myself. I think this…

New Work: Begin.com's New Site & Brand Extensions

When I began consulting with the Begin team in late 2023, they had a "good problem" on their hands. Several years prior, the team took a calculated risk, anticipating that our industry would soon grow weary–and wary–of the fragile, complicated, and slow web delivery methods they'd been using for so long. They foresaw a shift towards resilient, simpler, and performant standards-driven patterns and…

HTML Web Components on the Server Are Great

I'll start this post by echoing what many others have been saying: Web Components are having a moment lately! After a decade dominated by fragile, complicated, and slow Single-Page Application delivery patterns, it's refreshing to see folks stepping back to look for simple, resilient, standards-based alternatives... and discovering Web Components. Meanwhile, there's an understandable "what took so…

An HTML Templating Language That Keeps Its Secrets

Most of the websites I work on use some kind of templating language to generate their HTML using data. If you build websites too, you're probably familiar with these languages... for example, Mustache, Handlebars, Nunjucks, Liquid, and even JavaScript template literals (which I've come to appreciate a lot as I've been working with the elegant Enhance.dev framework). Technically, any server-side…

Conditional Web Components are Perfect for Polyfills

Yesterday, I released an HTML Web Component that makes responsive HTML video a little responsive-r . In short, the new (standard!) behavior of responsive video is great to have ( and I'm a fan ), but it falls a little short of many folks' expectations for truly responsive web design because it's only "responsive" at initial page load, and not after that. My Web Component patches that behavior, but…

Extending Responsive Video with HTML Web Components

Responsive HTML video is a web standard again, and with recent patches to Firefox ( oh hey! ) and Chrome that match Safari's preexisting support, it now works across all modern browsers! That means you can use media queries for delivering your videos and potentially save your users some precious bytes. As I've noted in prior articles , this is great news for web performance fans, as video is by…

How to Use Responsive HTML Video (...and Audio!)

In case you haven't already heard, you can use media queries for delivering HTML video again! Just a few days ago, Firefox 120 landed and it includes a patch (hey btw, I wrote it! ) to bring back support for this web standard, and Chrome 120 will be out on November 29th with renewed support as well. Safari never removed their support in the first place, so that makes things wonderfully…

You May Not Need Progressive Enhancement, The Term

Recently, I’ve heard several peers lament that Progressive Enhancement, a term describing a process of building resilient, user-first websites, isn’t working anymore–that it has been redefined, even maligned, to mean different things to different people, with some even understanding it to mean reducing our online experiences to a sad, minimally-viable bar. As an early investor in the term , I have…

Collab Time! I'm Teaming Up with Enhance Dev

Announcement! Today I am starting a new work collaboration that I’m real excited about! I’ve teamed up for a short while with the talented crew at Enhance.Dev (and Begin ) to help broaden awareness of their products and tools, which I happen to think are great . Practically speaking, that’ll mean I'll be doing some public learning and blogging, a bit of product design and strategy, and ultimately…

We're Bringing Responsive Video Back!

It's been a couple of years since I wrote HTML Video Sources Should Be Responsive , where I expressed frustration about the lack of a straightforward, declarative HTML solution for delivering different video sizes to different devices. I also pointed out that there used to be a graceful solution to this issue! That's right. We used to have standard, cross-browser responsive video. However, in…

Measure & Improve Your Site's Footprint with Carbon Control from Catchpoint WebPageTest

Video: Experimenting with Performance at the Edge

New WebPageTest Experiment: Edit Response HTML!

How Fast Is Your Web App? How to Test Page Transition Performance

Will Serving Real HTML Content Make A Website Faster? Let's Experiment!

Catchpoint Acquires Lightning-Fast Web Performance Online Course

A Backstage Tour of WebPageTest's New UI

HTML Video Sources Should Be Responsive

We need more inclusive web performance metrics

Lightning-Fast Web Performance, an online course

Move Fast & Don't Break Things

ASPIRE: Ideals to Aspire to When Building Websites

5G Will Definitely Make the Web Slower, Maybe

The Simplest Way to Load CSS Asynchronously

Shifting the Performance Burden

HTML Includes That Work Today

Tuning Performance for New and 'Old' Friends

Styling a Select Like It's 2019