← Back to WatchStarFork

wsf-xxix

Published · Updated

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 clip-path, linear-gradient() and background-blend-mode can replace traditional techniques based on pseudo-elements.

The Future of CSS: Cascade Layers (CSS @layer), a detailed guide by Bramus to declaring separate layers for CSS rules using @layer. It's a new feature in the CSS Cascade and Inheritance Level 5 specification, so that authors can create layers to represent element defaults, third-party libraries, themes, components, overrides, and other styling concerns—and are able to re-order the cascade of layers in an explicit way, without altering selectors or specificity within each layer, or relying on source-order to resolve conflicts across layers.

JavaScript

FormData and fetch, why is serialising a form such a pain?, asks Baldur Bjarnason. Also on the subject: all the ways of encoding data for POST requests, by Jake Archibald.

Web Components: from zero to hero, a three-part series by Pascal Schilp.

Dev tools

Why husky has dropped conventional JS config. Husky is a tool that helps you, and anyone npm install-ing your repo, set up Git hooks to trigger scripts when you perform a Git action, such as commitcommit). The design of hooks is not particularly conductive to this sort of workflow, but Git's ability to configure the path to hooks (with the core.hooksPath option) makes it a bit more straightforward.

Comparing the New Generation of Build Tools, a summary by Hugh Haworth covering esbuild, Snowpack, Vite, and wmr.

Interaction Design, Accessibility

Browsing with a desktop screen reader, a very useful overview by Henny Swan. (Update: there's a companion piece about mobile screen readers.) Related: How can screen readers be used in accessibility testing? by Marissa Sapega.

Designing Empty States in Complex Applications: 3 Guidelines by Kate Kaplan. Empty states provide opportunities for designers to communicate system status, increase learnability of the system, and deliver direct pathways for key tasks. This article provides guidance for designing empty-state dialogues for content-less containers.

One last time: custom styling radio buttons and checkboxes by Scott O'Hara. Now (2021), with Internet Explorer support being dropped left and right, and Edge now being Chromium-based, and Firefox quirks having been ironed out, these limitations have largely lifted. I hope this is the last time I write about this subject.

An update on the accessibility of conditionally revealed questions by the GOV.UK Acccessibility team.

The Line of Death, i.e. the line between trusted (browser) and untrusted (web page) UI. Interesting perspective! (via Henri Sivonen)

Creative coding

An End-to-End Guide to Photogrammetry with Mobile Devices, an impressive series of guides by the New York Times R&D Lab. Sophisticated 3D experiences can be expensive and complex productions, often requiring the use of specialized equipment such as mirrorless cameras and drones, as well as a fair amount of custom coding. Fortunately, the latest generation of smartphones contain powerful cameras, processors and apps that make it increasingly possible for anyone with a little technical proficiency to create publication-quality 3D models.

the digital review, an annual journal dedicated to the preservation and publication of innovative, born-digital essays. Each theme-based issue will offer a curated combination of commissioned work, submitted work and "rediscovered" work.

Tiny advice for "I want to make pen plotter art, help!", lovely pointers by Rev Dan Catt.

Moo Card Player, Jon Hicks on using NFC tags to automatically play music on the iPhone.

The Unix CLI

Search & replace with ripgrep. The tool is primarily meant for matching and extracting patterns, but with a bit of effort you can replace text in the original files. A couple of guides: Linux Fu: Global Search And Replace With Ripgrep by Al Williams, and Search and replace tricks with ripgrep by Sundeep Agarwal.

See also: Understading awk by Adam Gordon Bell.

Tools & resources

Online tools

An nginx playground by Julia Evans. I was talking to a friend about how it would be cool to have an nginx playground website where you can just paste in an nginx config and test it out. And then I realized it might actually be pretty easy to build, so got excited and started coding and I built it.

SQLime, an online SQLite playground for debugging and sharing SQL snippets. Kinda like JSFiddle, but for SQL instead of JavaScript.

Explore JavaScript Dependencies With Lighthouse Treemap, discover all JavaScript downloaded and used/unused for a site in a handy data visualization.

Yes please! Marginalia Search is a search that favors text-heavy, old-school websites.

Libraries

Mechanic, an open source framework that makes it easy to create custom, web-based design tools that export design assets right in your browser.

Theatre.js by Aria Minaei, a JavaScript animation library with a GUI. It animates the DOM, WebGL, and any other JavaScript variable.

FettePalette by David Aerne, a color ramp generator using curves within the HSV color model.

prettymaps by Marcelo Prates, a small set of Python functions to draw pretty maps from OpenStreetMap data.

partytown, relocate resource intensive third-party scripts off of the main thread and into a web worker. Super smart.

ct.css, a diagnostic CSS snippet that exposes potential performance issues in your page’s <head> tag.

Resources

Basic Pattern Repository, copy-pastable SVG patterns by Thomas Michael Semmler.

Frontend Dogma, articles and books, tips and tricks, craft and beauty from the world of frontend development, by Jens Oliver Meiert.

TIL

Cropping a video on macOS

I had made a screen recording on iOS and was looking for a way to focus in on a single detail in the video. The Preview app on macOS doesn't have a way to crop a video the same way you would a static image, but I found a devious idea online: simply record an area of of your screen while the video is playing in Quicktime. The keyboard shortcut is Command + Shift + 5.

Mutating array methods

JavaScript's array API is… let's say, eclectic. Some methods change the original array, some don't. The distinction may be inconsequential but then, infrequently and catastrophically, a missing slice() in front of reverse() really does a number on you. I was thinking on ways to prevent that from happening, once and for all, and wondered if there's any initiative to fix this. Turns out there is! tc39/proposal-change-array-by-copy, which provides additional methods to Array.prototype to enable changes on an array by returning a new copy of it with the change, is in Stage 2. Not convinced about the names (withSorted(), withReversed(), etc.), but those might change.

A wholesome browser game. LingYourLanguage, a collaborative effort to bring the world’s languages to a wider audience in an entertaining, engaging way. The goal is to guess the language being spoken in short audio clips. (Via Recomendo)

A book. Jeremy Wagner's Responsible JavaScript is available for pre-order.

Two albums. José González's Local Valley and Saint Etienne's I've Been Trying To Tell You have been on heavy rotation these few weeks.

Two documentaries. Oliver Sacks: His Own Life, a film by Ric Burns. Last and first men, a film by Jóhann Jóhannsson narrated by Tilda Swinton.