← Back to WatchStarFork

wsf-xxxi

Published

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 Technology Previews have been on a roll in recent months. Highlights from Safari TP 134 include the <dialog> element, support for color spaces in <canvas> (like in Chrome, srgb and display-p3 are currently available), and cascade layers. On top of that, WebKit is getting a new layer-based SVG engine, developed by Igalia with backing from *checks notes* the makers of the Thermomix multicooker? Neat!

Adobe Photoshop and Illustrator are coming to the browser. A write-up on web.dev describes the technicall nitty-gritty that makes this possible. In the desktop app, Photoshop added perceptual gradient interpolation in the Oklab color space, which is also being added to the CSS Color Level 4 spec.

Learning & documentation

During Chrome Dev Summit 2021 new learning paths were announced on web.dev:

And with the occasion of the PWA Summit, Microsoft have refreshed their own documentation: Learn to build great Progressive Web Apps.

The highly-anticipated React.js docs rewrite around hooks is in beta.

Libraries & tools

A whole bunch of projects saw major releases recently.

Articles

Patterns and idioms

In HTML Concepts: Common Idioms, Jens Oliver Meiert points to a section in the HTML spec that proposes markup patterns for things that don't have dedicated elements, such as footnotes or breadcrumb navigation.

Let's Talk about Native HTML Tabs, Dave Rupert on <spicy-sections>: With one HTML, we can solve two birds with one stone. We get an accordion and a tabs control from the same single element. We can actually use one element and have infinite affordances.

Speaking of native, in Having an open dialog, Scott O'Hara revisits the <dialog> element to see what has changed in the last couple of years: <dialog> is almost here. [...] But, until the <dialog> is actually fully delivered, I personally suggest continuing to use trusted and robust custom dialogs.

Evaluating Clever CSS Solutions by Michelle Barker. Designers have always exploited API affordances to their advantage. We're now seeing new idioms, enabled by recent additions to CSS, that are downright cryptic without documentation.

Layout Patterns, a collection of layout patterns built using modern CSS. (Previously: SmolCSS by Stephanie Eckles, 1-line layouts by Una Kravets.)

Security and performance

Which SVG technique performs best for way too many icons? by Tyler Sticka explores the best way to include lots of SVGs on a page: If you want all the features of SVG and your icons are well optimized, inline SVG is your best bet. Simple and performant. If your icons are complex or poorly optimized, or if you don’t need all the bells and whistles of SVG, image elements are the most performant option, especially using data URIs (encoded as escaped XML, not Base64).

Finding and Fixing DOM-based XSS with Static Analysis from Mozilla's Frederik Braun discusses an ESLint plugin that spots unsafe coding practices, such as assigning to innerHTML without sanitizing, and plans for Firefox to support the native Sanitizer API.

Making things

Tom MacWright has been blogging about technical decisions in Placemark, his work-in-progress geospatial data editor.

The State Of The Web by Jeremy Keith. There’s a great German word, ‘Verschlimmbessern’: the act of making something worse in the attempt to make it better. Perhaps we verschlimmbessert the web.

The Greatest CSS Tricks Vol. I eBook (PDF and EPUB). Chris Coyier enlisted the help of Baldur Bjarnason to produce an ebook of choice CSS Tricks articles.

Smashing Podcast #43: What Is Astro?, a conversation between Drew McLellan and Matthew Phillips on the static site builder.

Creative coding

Curves and Surfaces, a massive interactive article by Bartosz Ciechanowski.

Assorted useful maths by Inigo Quilez, such as computing the bounding box of a Bézier curve.

Tools

CleanUp.pictures, a web app and open-source project that lets you remove objects from images. It uses LaMa, an open-source model from Samsung’s AI Lab to automatically & acurately redraw the areas that you delete.

Clerk, local-first notebooks for Clojure. Clerk gives you a rich notebook experience, built on top of regular Clojure namespaces, enhanced with markdown comments.

CookLang, a lightweight recipe markup language.

TIL

Showing GitHub issue titles inline. Simon Willison: if you paste in a link to an issue or PR in another repo it will display it as a truncated URL, but if you instead add it in a hyphenated bullet point it will display the title of the issue and and indicate if it is open or closed. — very useful!

Math.hypot(). A function I write over and over is the distance between two points. I wasn't aware there's Math.hypot() to compute just that, so I can write it shorter and clearer:

// Before:
let distance = Math.sqrt(Math.pow(p2.x - p1.x, 2) + Math.pow(p2.y - p2.y, 2));

// After:
let distance = Math.hypot(p2.x - p1.x, p2.y - p1.y);

Fixed-angle gradients in SVG. Did you know the length of the CSS linear gradient depends on the object's width and height? I looked at how to obtain the SVG equivalent in this Observable notebook.

An animation of how the length of the CSS gradient line varies with the angle, making a butterfly shape.

Media

Learning Music, interactive lessons by Ableton. In these lessons, you'll learn the basics of music making. No prior experience or equipment is required; you'll do everything right here in your browser. (Previously: Learning Synths)

sicp.js Structure and Interpretation of Computer Programs, the classic textbook, gets a JavaScript edition next year. (via Dan Ports)