Creating a custom-sized PDF document from a web page using standard browser features is still somewhat tricky. For a recent project, I was curious to find adequate workflows for all major browsers on mac OS . I’ve used two simple test pages, one for each page orientation: landscape (64cm × 36cm) and portrait (36cm × 64cm) . The relevant CSS bits to configure the print output: @page { /* landscape…
While working on HTTP caching, a refresher , I learned about a recent development that immediately piqued my interest. Authored by Domenic Denicola and Jeremy Roman at Google, the No-Vary-Search HTTP response header field proposal enables a server to declare that some aspects of the URL ’s query string are irrelevant for the purposes of caching. Its syntax can express that the order of parameters…
This is a fresh reading of RFC 9111 (2022), the latest iteration of the HTTP Caching standard. The standard defines the Cache-Control HTTP header as a way to prescribe how caches should store and reuse HTTP responses, with regard to not just the browser cache, but to any other intermediary caches, such as proxies and content delivery networks, that may exist between the client and the origin…
This year I’ve listened to music for around 65,000 minutes, or about three hours daily. Here are 30 records I’ve played a lot, listed in alphabetical order. Anna von Hausswolff Iconoclasts YEAR0001 Baxter Dury Allbarone Heavenly / PIAS Big Thief Double Infinity 4AD Bon Iver SABLE, fABLE Jagjaguwar Burial Comafields / Imaginary Festival Hyperdub Daniel Avery Tremor Domino Die Wilde Jagd, Metropole…
Another Eleventy recipe, this time for bundling JavaScript, CSS , and other asset types with esbuild . You can adapt it to how you prefer your markup, or to other bundlers such as Vite . I’ve also used this approach to produce hashed front-end assets for WordPress and Kirby . In Eleventy, you’ll be able to reference a JavaScript source file in your Nunjucks template and have the src attribute…
I’ve started incorporating sample PNG s to illustrate typefaces in the Atlas of Type , and secretly hoped they’d work as OpenGraph previews just as well. Turns out tightly cropped, black-on-transparent images like the one below were not on most platforms’ og:image bingo cards: The sample PNG for the recently-released Betània Patmos , emphasised with a 1px border. The results were uniformly…
This is well-trodden ground, but this how I do HTTP 301 redirects in Eleventy, mostly to have a reference for the Apache vs. nginx syntax. I’m sticking with the Hugo aliases convention in the front-matter data: --- title: My post aliases: - /my-previous-url/ - /my-other-previous-url/ --- Here’s the Eleventy configuration to gather all the aliases in a collection of { from, to } objects. All…
Reviewing a recent post about my favorite records of 2024 , I noticed something off about two lists rendered next to each other. The unordered list has a larger line height than the ordered one, but only in Firefox. Why’s that? Firefox devtools showed in the Fonts tab that the marker is using a font named -moz-bullet-font , and not inheriting the font from its ancestors like the Rules panel…
I’m a sporadic writer. This year, I only managed a couple of articles between my end-of-year music lists doubling as mileposts, and a decade’s worth of writing fits comfortably on a single page. To shake things up, I’ve been meaning to carve out a separate section for posts that are shorter, smaller in scope, and more frequent. A bit like what Tom MacWright , Simon Willison , or David Bushell are…
This year I’ve listened to music for almost 100,000 minutes, or about four hours daily. Here are 47 albums I’ve played a lot, listed in alphabetical order. Adrianne Lenker Bright Future 4AD Alva Noto HYbr:ID III Noton Bacao Rhythm & Steel Band BRSB Big Crown Ben Lukas Boysen Alta Ripa Erased Tapes Beth Gibbons Lives Outgrown Domino Bon Iver Sable, Jagjaguwar Caribou Honey City Slang Coco 2 Self…
One of the great joys of having your own website is being able to publish all sorts of random pages, such as this listing of DOM events , because why not. Perusing these sort of reference pages I built for myself, it became increasingly grating that the basic feature of maintaining the scroll position during navigation seemed to be broken on iOS Safari. I checked: the issue didn’t affect all…
The days with an immobilized knee are long and I’ve just read through the Images section of the HTML Standard, as one does, hoping to better understand how responsive images work. What’s a responsive image? The term responsive image encompasses two complementary approaches. In the context of responsive web design , a responsive image is one that’s made fluid with the width , height , aspect-ratio…
In what is probably the heftiest, most profusely procrastinated edition so far, here are some of the links I’ve been hoarding these past few months. News WCAG 2.2 , the latest version of the Web Content Accessibility Guidelines specification, has been promoted to a W3C Recommendation . It adds nine new success criteria , which Patrick H. Lauke unpacks in What’s new in WCAG 2.2 . Firefox. The CSS…
Note: I will be updating this list beyond 2023. The additions are marked with the manicule (☞). Heavy rotation Some of the albums I’ve listened to a lot this year, in alphabetical order. Alternativ Quartet — Deocamdată suntem [ s/r ] Alternativ Quartet — Departe de solstițiu [ s/r ] Arvo Pärt — Tractus [ ECM ] Balmorhea — Pendant World [ Deutsche Grammophon ] Baxter Dury — I Thought I was Better…
You’ve decided you want a web feed for your website’s content. Some popular CMS es have you covered with built-in feeds. For WordPress, an RSS feed is available by default at your-website.com/feed , so it’s just a matter of making the feed visible in your HTML templates and you’re good to go. But if you have to implement one from scratch, this guide goes through the basics. To keep it short, it…
I was caught up with IRL things these past couple of months, so today’s edition packs almost a hundred links… oops! News Firefox. I was surprised to find among the Firefox 115 release notes some movement around editing, a powerful yet slow-progressing web platform feature that’s still rife with underdocumented behavior: The builtin editor now behaves similarly to other browsers with…
News Safari 17 will support Progressive Web Apps on the Mac, complete with Web Push and Badging, as presented by Rachel Ginsberg in the What’s new in web apps WWDC23 video. Thomas Steiner has documented the experience of installing and using Web Apps on mac OS Sonoma 14 Beta . For more details, check out the announcement post News from WWDC23 : WebKit Features in Safari 17 beta . I’ve…
News As Watch/Star/Fork was snoozing away the month of April, browser makers were busy bringing interoperability to several web platform features. Firefox 112 ships with support for the inert HTML attribute , which disables interaction with the element and excludes it from the accessibility tree. The attribute is now available across all three major browser engines. Although announced in the…
News Firefox 111 , out tomorrow, adds support for the remaining css-color-4 color spaces: lab() , lch() , oklab() and oklch() , as well as the color() syntax for the entire set of predefined spaces. As per the release notes , this feature is behind the layout. css. more_color_4. enabled flag. The release also includes support for the origin-private file system . Chrome 111. In addition to the CSS…
Some types of template data are awkward to maintain in any of the many places from where Eleventy can read it. Markdown's front-matter data can hold simple pieces of information just fine, but becomes unwieldy for rich content. If you've ever wanted to art-direct individual pages with custom styles defined inline, I'm sure you're not exactly thrilled with front-loading a wall of CSS-in-YAML: ---…
News Web Push. One of the standout features in Safari 16.4, now in beta, is its support for push notifications on iOS and iPadOS, along with other APIs useful for Progressive Web App developers. The Web Push feature will only be available once the user adds the website to their Home Screen, an action that's currently not very discoverable . Style goals . I love the concept of celebrating CSS…
News Firefox 110 has been released with support for Container Queries , a monumental feature which has made its way into all major browser engines in a remarkably short time. See the release notes for more. A surprising, niche feature in this new release is the ability to use CSS named pages for specifying page breaks for printing. A much appreciated signal of interest in Print CSS . Fingers…
News CSS Color. Chrome 111 (currently Canary) is preparing support for a whole bunch of CSS Color Module 4 features, as summarized by Adam Argyle in High Definition CSS Color Guide . The dynamic-range and color-gamut media queries mentioned in the article were new to me. The release also includes things from css-color-5 , namely the color-mix() function . Meanwhile, Safari TP 162 marks the debut…
There are many approaches to adding Sass support in Eleventy, and several plugins to abstract away these approaches. The docs page alone features four separate Sass plugins. When it comes to asset versioning, how you integrate Sass and Eleventy makes all the difference to the development experience. I've spent the day tweaking the setup for Eleventy 2.0 to work with content-hashed .scss files for…
News Chrome 109 ships with support for MathML ! Yes, that MathML, the XML-based language to describe math. It took about 25 years to get it done , says Brian Kardell, but hey, we did it . See Igalia's announcement for more details. Also included in the release is some good news for variable fonts: the font-weight , font-style and font-stretch descriptors get a new auto default value, which reads…
With Safari Technology Preview having supported it for a while, and Chromium 109 enabling user-facing support in a first batch of browsers, it's time to see a few ways in which the lh CSS unit is a useful addition. The lh unit is formally described as follows: Equal to the computed value of the line-height property of the element on which it is used, converting normal to an absolute length by…
It did it again the other day. I had tucked some research leads from Google Books — a website that lets you perform searches in the content of digitized books, many very old — into Safari's Reading List on my phone, for later reference. A while later, when it came to following the breadcrumbs I had left for myself back to the insight they were meant to help germinate, lo and behold — all links to…
Chris Ferdinandi's recent article for 12 Days of Web called FormData API reminded me about a helper function I wrote to quickly wire up plain HTML form controls in interactive demos of the move slider make thing happen type, without needing to reach for dat.gui or a similar library. When your set of controls is organized as a plain HTML form, the FormData DOM interface is a useful way to read the…
News WordPress is getting support for SQLite , which promises to make small websites faster and less resource-intensive, as well as more portable and easier to back up. Relatedly, WordPress Playground lets you experience a WordPress that runs entirely in your browser , a not entirely clear but nonetheless intriguing proposition (via Geoff Graham ). Articles Weathering Software Winter by Hundred…
News The Computer History Museum in Mountain View, California is making available the source code for Adobe PostScript. More context in PostScript: A Digital Printing Press . CSS parsing rules don't leave enough elbow room for CSS Nesting to have a syntax as straightforward as everyone would like. Jen Simmons invites authors to weigh in on their preferred alternative . WordPress 6.1 “Misha”…
December, the month of dwindling daylight and obligatory retrospection, is upon us once again. Here are my favorite records of the year 2022, ordered alphabetically. My top ten are marked with a ★ (star). Aldous Harding — Warm Chris ★ Alex Cameron — Oxy Music Angel Olsen — Big Time Anna Calvi — Tommy Arcade Fire — We Arctic Monkeys — The Car ★ Balmorhea — Solanales Beach House — Once Twice Melody…
Many-to-many relationships are a fixture of structured content. A basic example is a collection of Posts , each written by one or more Authors . So how do you shape the content so that it's easy to generate pages for Posts complete with nice bylines, and for individual Authors including a list of their posts? The setup The code snippets throughout this article use Eleventy 1.0.2, the latest…
Around the end of 2021, this little corner of the web started using a variable font. Newsreader is a beautiful design from Production Type commissioned by Google Fonts, whose sources are available on GitHub under the Open Font license (OFL). I'd been reading about variable fonts for a while, but had probably never actually typed up the CSS with my fingers for a project up to that point. Here are a…
News Astro, the zero JS by default framework for building content-first websites (which is safe to say is most websites), has reached its 1.0 release . Jeff Delaney blitzes through Astro's features in a tightly woven 3-minute video . CodeMirror 6.0 is a from-scratch implementation based on the experience of building and maintaining versions 1 to 5 for the past 13 years. It aims to be more…
News Node 18 gets us new features for which external packages were previously needed: a built-in fetch() function could replace node-fetch , and the node:test module has an API similar to tape . Node 18.3 also debuted the util.parseArgs command-line argument parser, which is being iterated on at pkgjs/parseargs ; in the meantime opsh will do. The ARIA Authoring Practices Guide got an excellent…
Grids of logos are my nightmare. I mean, never mind the opportunity to learn the bewildering, but admittedly finite, array of file formats in which visual assets can conceivably be stored and distributed. But the intricate dance of making all logos look equally prominent in the grid is something for which I can only muster very little enthusiasm. Like with all tedious things, I've found myself…
The <button type='button'> construct is HTML 's eat your veggies . It's good advice and you should always do it. Between you and me, we both know it's a bit silly: of course a button is a button, I mean… Well, buddy , if you've been omitting your type attribute with impunity, I'm here to tell you that one day, without warning, this habit is going to bite you in the ass. I know it because *cue…
With this short tip, we'll devise a way to tell when a DOM element's focus-within state changes, that is observing whenever the element, or any of its descendants, holds the focus. You may already be familiar with the the CSS :focus-within pseudo-class that provides such a hook: /* Emphasize the container when it has focus within. */ .container:focus-within { outline : 1px dotted currentColor ; }…
Here are my top 20 albums of 2021, in alphabetical order: A Winged Victory for the Sullen — Invisible Cities Akira Rabelais — À La Recherche Du Temps Perdu Balmorhea — The Wind Biosphere — Angel's Flight Dustin O'Halloran — Silfur ★ El Michels Affair — Yeti Season Enfant Sauvage — Petrichor Jay-Jay Johanson — Rorschach Test José González — Local Valley Kazuya Nagaya — Microscope of Heraclitus…
News CSS Snapshot 2021 has been released. It collects together into one definition all the specs that together form the current state of Cascading Style Sheets (CSS) as of 2021. Safari has been maintaining its newfound momentum with the release of Safari 15.2, which supports wide gamut color on <canvas> . While Chromium 94+ browsers have the display-p3 color space available, Safari 15.2 also adds…
News Safari Technology Preview 135 was released with support for the accent-color CSS property, and for lazy-loading images with the loading=lazy HTML attribute, in line with Firefox and Chromium-based browsers. It also premieres the new viewport units that solve the 100vh dilemma on mobile. Articles UX, Accessibility Growing in Your UX Career , a guide by Nielsen Norman Group. Unsure where to…
Interpreting multi-touch user gestures on the web is not as straightforward as you'd imagine. In this article we look at how current major browsers behave (and misbehave) in regards to gestures, and piece together a workable solution that uses wheel , touch , and gesture DOM events. Table of contents Anatomy of a gesture The relevant DOM events: wheel, touch, and gesture Putting browsers to the…
News Browsers & apps Firefox 94 released with support for the enterKeyHint attribute , which now has universal coverage across major browsers, and some groundwork for cascade layers . Chrome 95 is out, with support for the Eyedropper API (read a write-up by Patrick Brosset and Thomas Steiner) and URLPattern . An URLPattern polyfill is available if you want to start using the feature today. Safari…
Articles A Guide To CSS Debugging by Stephanie Eckles. We’ll look at a few categories bugs often fit into, see how we can evaluate the situation, and explore techniques that help prevent these bugs. In Custom properties with defaults: 3+1 strategies Lea Verou outlines ways to provide a styling API for your components using CSS custom properties. Browsing with a mobile screen reader by Henny Swan.…
News Safari was updated to version 15 across iOS, iPadOS and macOS. I took a look at some of the features in the final release, including the new color syntaxes, theme-color , the redesigned color picker, and more. Chrome 94 was released , with support for the display-p3 color space in the HTML <canvas> element. Articles CSS In Reducing The Need For Pseudo-Elements Marcel Moreau shows how…
A new major version of Safari was pitched back in June at the Apple WWDC 2021 event. In the Design for Safari 15 (33min video, transcript available), Jen Simmons and Myles C. Maxfield walk us through some of the biggest changes we could expect for the web platform. Last week Safari 15 was officially released as part of iOS/iPadOS 15. It was also included in a recent update to macOS Big Sur,…
News Browsers & the web platform Firefox 92 is out. It joins Chrome and Edge in supporting the accent-color CSS property for form inputs. Trying to stop developers from styling checkboxes and radio buttons is like trying to stop teenagers from having sex. You might as well accept that it’s going to happen and give them contraception so they can at least do it safely. says Jeremy Keith . Ruth John…
I thought I'd write a bit about my awkward but workable flow for adding several dozens of links to each Watch/Star/Fork edition, and my usage of bookmarks in general. From many inboxes to one So, out of the two available types of people, I am a bookmark person. The only time I have more than a dozen tabs open is while I research something, and even that dissipates as quickly as I ⌘-clicked my way…
A while back I wrote, as an exercise in minimalism, the nano-i18n library for localizing strings. You write internationalized strings with a template tag: import { t } from 'nano-i18n' ; const name = 'Dan' ; console . log ( t ` Hello, ${ name } ! ` ) ; It also provides a hook for missing translations, so you can log them to the browser console, or collect them in one place so that they're easier…
News CSS Nesting Module , which introduces the ability to nest one style rule inside another, has been published as a Working Draft. The syntax is a good fit for hred to make nested queries shorter as a replacement for :scope . Pre-recorded talks & slides are up for the W3C Workshop on Wide Color Gamut and HDR for the Web , and a live Questions & Answers session is due for September 13. Relatedly,…