mastodon 4.8.0-nightly.2026-10-06Daily web platform news by @pepelsbey@mastodon.social
Fully local code embeds. Aleksandr Hovhannisyan built a web component that renders isolated code sandboxes using iframe srcdoc, without relying on third-party services like CodePen or CodeSandbox. The component takes HTML, CSS, and JavaScript from a template element and produces a fully local, isolated preview. It works anywhere HTML and JavaScript are supported and has zero dependencies. #html #js
https://www.aleksandrhovhannisyan.com/blog/local-code-embeds/
WebKit features for Safari 26.5. @jensimmons@front-end.social introduces the :open pseudo-class for styling open , , , and elements, the element-scoped keyword for random(), color-interpolation with linearRGB for SVG gradients, ToggleEvent.source for the popover API, and the new Origin API for structured origin comparisons. Plus 63 bug fixes across SVG, WebRTC, networking, anchor positioning, and scroll-driven animations. #safari #browser
https://webkit.org/blog/17938/webkit-features-for-safari-26-5/
Progressive web components. @ariel@front-end.social introduces Elena, an open-source library for building web components that work with HTML and CSS first, then hydrate with JavaScript. Elena addresses common pain points like layout shifts, accessibility issues, and poor server-side rendering support. The library weighs just 2.6 kB and includes over 1,000 tests with 100% code coverage for its core package. #webcomponents #js
Media queries range syntax. @shadeed9@front-end.social 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
Using safe-area-inset to build mobile-safe layouts. Modern phones have notches, cutouts, and floating buttons that overlap your UI unless you account for them. The Polypane blog walks through env(safe-area-inset-*), why you need viewport-fit=cover in the , combining insets with calc() for extra spacing, and the new safe-area-max-inset-* values that stay stable even when the address bar hides on scroll. #css #layout
https://polypane.app/blog/using-safe-area-inset-to-build-mobile-safe-layouts/
Introducing CSS grid lanes. The @webkit@front-end.social team announced the next major step in web layouts: CSS grid lanes bring masonry-style layouts to the web. With the first implementation available now in Safari Technology Preview 234, it enables flexible and accessible content and UI designs without JavaScript. It uses the new item-tolerance CSS property and leverages full CSS grid power. #css #layout
SVG filters guide: getting started with the basics. @anatudor@mastodon.social walks through the fundamentals of SVG filters, from setting up the and elements to understanding filter regions, primitive subregions, and color interpolation. The guide covers how primitives are chained, when to use result, in, and in2 attributes, and the difference between filterUnits and primitiveUnits for responsive effects. #svg #filter
https://frontendmasters.com/blog/svg-filters-guide-getting-started-with-the-basics/
SVG from scratch. @carmenansio@front-end.social presents SVG not as a graphics format but as a DOM: every shape is an element, every attribute is a style, that could be selected with CSS, animated with transitions, and targeted with JavaScript. She covers viewBox, the five core shapes (circle, rect, line, polygon, path), stroke-dasharray draw-on animations, , , and JS helpers like getTotalLength(). #svg #animation
What is CSS containment and how can I use it? @csswizardry@webperf.social explains an underused CSS feature that lets the browser skip unnecessary layout and paint work. The article covers each contain value (layout, paint, size, style), the content and strict shorthands, and content-visibility for lazy rendering. It includes an OpenTable example where contain: strict cut layout time from 11 ms to under 2 ms by limiting scope from 4,371 nodes to just 73 #css #performance
https://csswizardry.com/2026/04/what-is-css-containment-and-how-can-i-use-it/
The great CSS expansion. @pawellaptew@mastodon.social tours CSS features that replace JavaScript libraries: anchor positioning for Floating UI, the Popover API and element for Radix, scroll-driven animations for GSAP, view transitions for Motion, and customizable for React Select. Together they can cut up to 322 kB of minified, gzipped JavaScript from a typical app. #css #performance
A polyfill for the HTML switch element. @tomayac@toot.cafe shares a polyfill, bringing near-native to browsers beyond Safari, with accessibility mapping, high-contrast tweaks, and FOUC-safe loading. #html #polyfill
https://blog.tomayac.com/2026/01/12/a-polyfill-for-the-html-switch-element/
CSS is DOOMed: rendering DOOM in 3D with CSS. @html5test@front-end.social built a version of the classic game where every visual element is a div positioned in 3D space using CSS transforms, with JavaScript handling only the game logic. The project uses CSS trigonometric functions, @property for animatable custom properties, anchor positioning for HUD, and SVG filters for spectral enemies. #css #3d
https://nielsleenheer.com/articles/2026/css-is-doomed-rendering-doom-in-3d-with-css/
Introducing masonry-gridlanes-wc: a native-first masonry web component. @schalkneethling@hachyderm.io created a web component that provides masonry layouts aligned with display: grid-lanes from the CSS Grid Level 3 spec. In browsers that support native grid lanes, it steps aside entirely. Otherwise, it uses a JavaScript fallback for column and row masonry packing with configurable gaps and column widths. #webcomponents #layout
A production-ready web component starter template. @Aaron@front-end.social presents a GitHub template with a setup wizard, flexible import options, Vitest and Happy DOM testing, ESLint and Prettier, GitHub Actions CI, and secure npm publishing, plus docs on custom element best practices. #webcomponents #js #tools
https://www.aaron-gustafson.com/notebook/a-web-component-starter-template/
Firefox 150 release notes for developers. The release adds sizes="auto" for lazy-loaded images, color-mix() with multiple colors, light-dark() with image values, media pseudo-classes like :buffering, :paused, and :playing for and elements, animation range properties for scroll-driven animations, the revert-rule keyword, ariaNotify() for screen reader announcements, and an overscroll-behavior fix for elements with overflow: hidden. #firefox #browser
https://developer.mozilla.org/en-US/docs/Mozilla/Firefox/Releases/150
Dictionary compression is finally here, and it’s ridiculously good. @pimterry@toot.cafe explains how Compression Dictionary Transport works with Zstandard and Brotli over HTTP, using previous responses as dictionaries to compress data down to near-diffs. YouTube JS bundles shrink up to 90% vs plain Brotli, Google Search HTML nearly 50%. Already deployed by Google, Shopify, Pinterest, and Notion. Chrome 130+, Safari and Firefox on the way. #performance #http
https://httptoolkit.com/blog/dictionary-compression-performance-zstd-brotli/
From React to native web with nanotags: a migration that saved 100 KB. Pavel Grinchenko explains how they migrated an Astro marketing site from React and Ark UI to native Web Components, cutting JavaScript by 100 KB. Nanotags is a sub-2.5 KB wrapper that adds validated props, typed refs, and automatic cleanup, plus reusable accessibility attachments for ARIA patterns. With nanostores, it covers dropdowns, modals, and toggles. #webcomponents #react
The Layout Maestro, a practical CSS course on building web layouts. @shadeed9@front-end.social’s course teaches how to think about layout decisions, not just syntax. It covers Flexbox, Grid, container queries, and :has() through visual lessons and interactive demos, helping you build resilient layouts that don’t break when content or screen size changes. #css #learn
Your options for preloading images with JavaScript. Alex MacArthur compares five approaches to preloading images: new Image(), , a hidden
Playwright accessibility testing: what axe and Lighthouse miss. David Mello explains that automated tools like axe and Lighthouse catch only 30-40% of WCAG violations, leaving most issues undetected. The article covers ten categories of accessibility defects that scanners miss, from ambiguous link text to keyboard navigation problems, and provides practical Playwright testing patterns and manual audit strategies to fill those gaps. #a11y #testing
Soon we can finally banish JavaScript to the ShadowRealm. @Wilto@front-end.social walks through the TC39 ShadowRealm proposal, which creates isolated execution contexts with their own pristine globals while running on the same thread as the host. With just two methods, evaluate() and importValue(), ShadowRealms could sandbox third-party scripts, ads, and test suites without polluting the main realm. Currently at Stage 2.7, not yet in browsers. #js #ecmascript
https://css-tricks.com/soon-we-can-finally-banish-javascript-to-the-shadowrealm/
How to control infinite CSS animations. In part 1 of 2, @css@front-end.social shows how to speed up, slow down, and reverse infinite CSS animations on demand. He uses animation-composition: add to layer two animations, CSS variables for duration and a speed factor, and abs() and sign() functions to control velocity and direction independently, without restarting the animation. #css #animation
https://frontendmasters.com/blog/how-to-control-infinite-css-animations-part-1-of-2/
Design token naming conventions: a practical guide. @sturobson@front-end.social breaks down how to build token names that scale. He covers three token tiers (primitives, semantic, and component) and walks through five naming conventions, from category-property-modifier to multi-layered structures. Key takeaways: consistency beats perfection, prioritize clarity over brevity, use semantic intent over visual descriptions, and design for growth. #design #component
https://www.alwaystwisted.com/articles/design-token-naming-conventions
The web is fun again: first experiments with HTML in . @amit_sheen@mastodon.cloud explores the experimental Canvas Draw Element API behind the flag in Chrome 146, which renders native HTML into a while keeping semantics, forms, and interactions intact. Using the layoutsubtree attribute and drawElementImage(), he walks through transform sync, pixel manipulation for color and distortion effects, mouse-driven ripples, and WebGL shaders. #html #api
https://frontendmasters.com/blog/the-web-is-fun-again-first-experiments-with-html-in-canvas/
Automate the browser from the terminal with Chrome DevTools MCP CLI. @nucliweb@mastodon.social walks through chrome-devtools-mcp, a CLI that controls Chrome through shell commands instead of Puppeteer or Playwright. A persistent daemon keeps state across commands for navigation, network throttling, and form interaction. You can grab accessibility trees, evaluate JavaScript, capture screenshots, run Lighthouse audits, and trace Core Web Vitals. #devtools #tools
The end of responsive images. @Wilto@front-end.social, former chair of the Responsive Image Community Group, looks back on a decade of wrestling with the sizes attribute and explains how sizes="auto" with loading="lazy" finally hands that work back to the browser for most images. Now supported across Firefox, Safari, and Chrome, descriptive sizes values can be reserved only for above-the-fold images. #html #performance
State of AI 2026. Devographics launched a new survey focused on how developers use AI tools, models, and coding assistants in their daily workflows. The survey covers topics like code generation, prompt engineering, AI-powered testing, and model preferences. It takes about 15-20 minutes to complete and will help map the rapidly evolving landscape of AI in software development. #ai #survey
https://survey.devographics.com/en-US/survey/state-of-ai/2026
Sprites on the web. @joshwcomeau@front-end.social shows how to animate spritesheets in CSS within the viewport: object-fit, object-position, and steps(jump-none) for clean frame-by-frame motion, plus when sprites beat GIFs, and when procedural animation is better. #css #animation
Inverted themes with light-dark(). @davatron5000@mastodon.social explains how to build adaptive theme switching using the CSS light-dark() function and container style queries. The technique uses a data-theme=inverted attribute to automatically flip elements to their opposite color scheme based on browser preference, all in a single stylesheet without duplication. For browsers lacking container style query support, a JS polyfill provides graceful degradation. #css #color
Under the hood of MDN’s new frontend. Leo McArdle explains how the MDN team replaced their aging React-based SPA with a modern architecture built on web components and Lit. The new setup uses server components for static templating, lazy-loads interactive elements as custom elements, and leverages Baseline to decide which web APIs to adopt. The result: a dev environment that starts in 2 seconds instead of 2 minutes. #mdn #webcomponents
https://developer.mozilla.org/en-US/blog/mdn-front-end-deep-dive/
Top layer troubles: popover vs dialog. Stephanie Eckles opens this year’s HTMHell Advent Calendar with a peculiar case: a toast notifications promoted to the top layer with the Popover API can appear above a modal dialog yet stay inert. How showModal() makes background popovers unreachable and how to fix it by moving toasts into the dialog DOM and using popover="manual". #a11y #css
Scroll-driven animations. @joshwcomeau@front-end.social dives into CSS animation-timeline, mapping keyframes over scroll distance instead of duration. He covers timing functions, animation ranges (cover, contain, entry, exit), range percentages, scroll progress timelines, and linked timelines that track one element while animating another, with view-timeline and timeline-scope. Around 85% browser support, with Firefox behind a flag. #scroll #animation
https://www.joshwcomeau.com/animation/scroll-driven-animations/
Highlights from Git 2.54. Taylor Blau walks through new features including git history reword, which opens your editor with a commit’s message and rewrites it in place without touching the working tree or index, and git history split, which lets you interactively split a commit into two by selecting hunks to carve out into a new parent commit. Unlike git rebase, these commands work in bare repositories and refuse operations that would cause merge conflicts. #git #tools
https://github.blog/open-source/git/highlights-from-git-2-54/
Modern CSS feature support for shadow DOM. Adobe Spectrum Web Engineering tracks CSS feature support within and across the shadow DOM. The project covers :has(), @property, @scope, anchor positioning, cascade layers, container queries, and native nesting, documenting functional status, cross-boundary behavior, and browser bugs. Each feature includes Web Platform Tests results and links to spec issues. #css #webcomponents
What’s new in Chrome 147. Element-scoped view transitions allow multiple concurrent transitions on arbitrary elements. CSS contrast-color() returns black or white for best contrast. The border-shape property enables non-rectangular borders like polygons and circles. Other additions include Math.sumPrecise, timeline named range scroll, CSSPseudoElement interface, local network access restrictions, and Rust-based XML parsing. #chrome #browser
Getting your article shared: tips from ten years of newsletter curation. @spaceninja@hachyderm.io, who has curated front-end links for over a decade, shares practical advice on making your articles more shareable: add Open Graph tags, use a distinctive sharing image, write descriptive titles, include a concise blurb, set canonical URLs correctly, and always add a publication date. #html #learn
https://cloudfour.com/thinks/getting-your-article-shared-tips-from-ten-years-of-newsletter-curation/
What’s new in Chrome 148. CSS name-only container queries can match by container-name without a container-type. The at-rule() function in @supports tests CSS at-rule support. Video and audio elements gain loading="lazy" for deferred loading. The Prompt API exposes on-device AI language models. Other additions include Web Serial API on Android, Web Authentication Immediate UI mode, text-decoration-skip-ink: all, and revert-rule. #chrome #browser
