Nostr notes by Web Standards

Intent to ship: JPEG XL. @npub1dpj…e0jl explains that Firefox ...

2026-08-25T12:00:09Z

Intent to ship: JPEG XL. Jake Archibald (npub1dpj…e0jl) explains that Firefox is shipping JPEG XL support built on jxl-rs, the Rust decoder from Google Research that avoids the security surface of the 100,000-line C++ implementation. AVIF still wins on photos at lossy quality, but JPEG XL is better at lossless, recompressing JPEGs, and at progressive rendering, so large images appear as they download. Test both with a representative set of your own images. #image #firefox

https://hacks.mozilla.org/2026/08/intent-to-ship-jpeg-xl/

The case for tri-state dark mode toggles. @npub159n…rz7e ...

2026-08-19T10:00:58Z

The case for tri-state dark mode toggles. Bramus (npub159n…rz7e) replies to Lea Verou, PhD (npub1al7…kh5q) with the case two states can’t cover: an OS that switches themes by time of day. Pick light during the day, and a toggle that maps one value back to system goes dark at night, against an explicit choice. Two states work only if the automatic value is labelled, or if real values are stored, which then needs a reset. His poll ran 43 to 7 for three states. #design #color

https://www.bram.us/2026/08/18/the-case-for-tri-state-dark-mode-toggles/

Introducing Baseline Alerts. Jeremy Wagner presents a new ...

2026-07-08T10:00:40Z

Introducing Baseline Alerts. Jeremy Wagner presents a new notification system in the Web Platform Status dashboard that keeps you informed when web features change their interoperability status. Sign in with GitHub to track features and get alerts by email, RSS, or Slack when they reach Newly or Widely available. Set the frequency, save searches as personalized newsletters, and share results via URL or QR code. #baseline #interop

https://web.dev/blog/baseline-alerts

Introducing the field guide to grid lanes. @npub130l…n5e6 ...

2026-06-16T10:00:02Z

Introducing the field guide to grid lanes. Jen Simmons (npub130l…n5e6) announces a new interactive learning resource for CSS grid lanes. Tweak the playground with Waterfall and Brick modes, learn track sizing with fr, minmax(), and repeat(), and explore six real-world demos: photos, recipes, newspapers, menus, timelines, and pinboards. Best in Safari 26.4+. #css #layout

https://webkit.org/blog/18098/introducing-the-field-guide-to-grid-lanes/

CSS is filling the gaps with rules. @npub16zz…2ugy explores new ...

2026-06-03T10:00:23Z

CSS is filling the gaps with rules. Brecht (npub16zz…2ugy) explores new CSS gap decorations that let you style spacing in grid and flex layouts without workarounds. The column-rule and row-rule properties draw lines in gaps, while rule-break, rule-inset, rule-overlap, and rule-visibility-items fine-tune intersections, extension, and conditional display. The rules are animatable too. #css #layout

https://utilitybend.com/blog/css-is-filling-the-gaps-with-rules-a-way-to-style-gaps-in-grid-and-flex

Replacements.fyi. A tool from the @npub1658…xgzg collective ...

2026-05-29T10:00:14Z

Replacements.fyi. A tool from the e18e (npub1658…xgzg) collective that helps you find more performant and safer replacements for outdated or unnecessary npm packages. Type a package name like is-number, left-pad, or is-odd, and get drop-in alternatives or short code snippets you can paste instead. You can filter by runtime: Node, Bun, Deno, Cloudflare, or browser. Also browse all packages or scan a package.json to spot dependencies worth dropping. #npm #tools

https://replacements.fyi/

600+ million people write right-to-left: two fixes your app ...

2026-05-25T10:00:01Z

600+ million people write right-to-left: two fixes your app needs. Nina Torgunakova from Evil Martians (npub1rj0…8tgq) covers two scenarios. For English apps with free-form inputs, set dir="auto" so the browser picks direction from the first character, no JavaScript needed. For fully localized UIs, set dir="rtl" on <html> and swap physical CSS properties for logical ones like margin-inline-start, padding-inline-end, and text-align: start. #css #a11y

https://evilmartians.com/chronicles/600-million-people-write-right-to-left-2-fixes-your-app-needs

Media queries range syntax. @npub18q5…ah6v shows how the ...

2026-05-05T10:00:09Z

Media queries range syntax. Ahmad Shadeed (npub18q5…ah6v) shows how the classic min-width and max-width syntax creates overlap bugs at identical breakpoints, like two elements hiding at the same 300px. The fix: CSS range syntax with comparison operators like <=, >=, and >, supported in all browsers since March 2023. Clearer code, no 1px offsets, and the same logic works for container queries. #css #layout

https://ishadeed.com/article/range-syntax/

Your options for preloading images with JavaScript. Alex ...

2026-04-24T10:00:20Z

Your options for preloading images with JavaScript. Alex MacArthur compares five approaches to preloading images: new Image(), <link rel="preload">, a hidden <div> with a CSS background, the Cache API, and fetch(). Each method has different trade-offs around browser caching, CORS handling, and flexibility. The article breaks down when to use each technique to prevent lag when displaying images that haven’t been loaded yet. #js #performance

https://macarthur.me/posts/preloading-images/

Native JSON modules are finally real. Matt Smith explains how ...

2026-04-01T10:00:13Z

Native JSON modules are finally real. Matt Smith explains how import attributes let you load JSON files directly with import data from 'data.json' with { type: 'json' }, no bundler required. Browsers and runtimes handle JSON modules natively with explicit type declarations, eliminating build-time transformations and establishing a foundation for future structured module types. #json #js

https://allthingssmitty.com/2026/03/16/native-json-modules-are-finally-real/

Searchable, collapsible sections with hidden=until-found. Nathan ...

2025-11-07T08:53:34Z

Searchable, collapsible sections with hidden=until-found. Nathan Knowler demonstrates how to enhance the classic collapsible pattern by making its hidden content searchable with the new hidden=until-found attribute. The article covers progressive enhancement, accessibility, and browser support (Chrome, Firefox, Safari TP), showing how to combine it with the beforematch event for better UX. #html #a11y

https://knowler.dev/blog/searchable-collapsible-sections-with-hidden-until-found

Harmonizer, an accessible color palette generator. A Figma plugin ...

2025-11-05T10:18:50Z

Harmonizer, an accessible color palette generator. A Figma plugin and a web app by Evil Martians for generating consistent color palettes that work reliably in both light and dark themes. It uses the OKLCH color model and WCAG or APCA contrast formula to keep lightness and contrast perceptually uniform across hues and lightness levels. #design #a11y

https://harmonizer.evilmartians.com/

setHTML(), Trusted Types and the Sanitizer API. Ollie Williams ...

2025-11-03T13:02:40Z

setHTML(), Trusted Types and the Sanitizer API. Ollie Williams explains how the new setHTML() method and Sanitizer API help prevent XSS by safely inserting HTML into the DOM. Combined with the Trusted Types API, they provide a modern, configurable way to control what elements and attributes are allowed, eventually replacing libraries like DOMPurify. Supported in Firefox Nightly and Chrome Canary. #security #html

https://olliewilliams.xyz/blog/sanitizer/