Sign in

Michael Warren

@michaelwarren.dev
609 followers 408 following 1.2K posts

Vice President of Web Components; billiards enthusiast; father; thoughts and opinions are not AI generated. michaelwarren.dev

PostsRepliesMedia
Reposted by Michael Warren
Rick Viscomi @rviscomi.dev · 29/09/2026
v0.0.191 of Modern Web Guidance is out and it's a big one! *16* new guides covering: web components by @castastrophe.bsky.social Cross-Origin Storage by @tomayac.com security by @rowan.fyi UI and PWA by @jamessw.com and @sturobson.com Wasm by @sbc100.bsky.social github.com/GoogleChrome...
accessible-web-components: Make custom elements accessible by default, setting roles and ARIA state via the ElementInternals ARIA mixin, managing focus with delegatesFocus, and keeping ARIA relationships within a single shadow root.
custom-elements: Define, register, and manage the lifecycle of autonomous custom elements, covering constructor rules, lifecycle callbacks, upgrade timing, attribute/property reflection, and naming conventions.
form-associated-custom-elements: Make a custom control participate natively in forms with formAssociated and ElementInternals, submitting its own value, integrating with constraint validation, and reacting to reset, disable, and state-restore.
prerendering-custom-elements: Server-render a custom element, then hydrate it in place without re-rendering or a flash of unstyled content.
shadow-dom: Encapsulate a component's DOM and styles with Shadow DOM, construct the tree efficiently with HTML templates, and project consumer content with slots.
styling-web-components: Style across the shadow boundary with :host selectors, inherited and custom properties for theming, ::slotted and ::part, and cascade layers and container queries inside components.
web-components: Orientation and cross-cutting principles for authoring and using Web Components, covering Custom Elements, Shadow DOM, templates and slots, Declarative Shadow DOM, styling across the shadow boundary, Form-Associated Custom Elements, and accessibility requirements. Use this guide when building reusable UI components, design systems, or server-rendered custom elements.
avoid-redundant-large-asset-downloads: Avoid re-downloading and re-storing large shared assets, such as AI models, Wasm modules, or fully-bundled JavaScript libraries, that a visitor's browser may already hold from an unrelated site.
load-shared-resources-declaratively: Serve popular, unmodified scripts, stylesheets, and JavaScript modules from a shared cross-origin cache using markup or import syntax alone, witho…New Guides
migrate-web-app-origin: Transfer an installed web app to a new origin while preserving user configuration and OS-level shortcuts.
local-network-access: Access resources on a user's local network or loopback interface from a public web application.
trusted-types: Help prevent DOM-based XSS attacks by ensuring all untrusted content is sanitized before being inserted into the page.
responsive-table: Build a data table that presents tabular data with proper header semantics, and remains readable and navigable on small screens and with assistive technologies.
spatial-navigation: Implement accessible spatial navigation using arrow keys that works correctly in different layout modes (grid etc)
cpp-on-the-web: Compile C/C++ to WebAssembly using Emscripten

Updated the animated-select-picker guide to advise using standard value attributes on <option> elements to ensure standard form submission behavior.
Updated the branded-select-styling guide to emphasize retaining standard value attributes on <option> elements to preserve default form submission behaviors.
Updated the custom-select-picker-layouts guide with guidance on using :open::picker(select) selectors, customizing the ::checkmark pseudo-element, wrapping <selectedcontent> in a <button>, and managing keyboard navigation and accessibility constraints for grid layouts.
Updated the rich-media-picker guide to clarify that standard value attributes should be maintained on <option> elements to preserve form submission functionality.
Updated the out-of-order-html-streaming guide to document the full suite of static and streaming DOM insertion methods, detailing built-in sanitizer behaviors, WritableStream integration, and processing instruction marker practices.
Updated the sanitize-untrusted-html guide to detail node manipulation patterns using Document.parseHTML() to avoid mutation XSS, explain child preservation rules via replaceWithChildrenElements, and provide aligned DOMPurify fallback configurations.
Updated…Removed the prevent-text-wrapping guide.

HTML processing instructions: Added Chrome 150 and Edge 150 support in out-of-order-html-streaming.

A four-column table titled "Benchmark Evaluations" comparing unguided versus guided pass rates across 132 tasks and 1,124 assertions.

Row 1: codex_cli (gpt-5.6-sol) achieved a 59% unguided pass rate and an 81% guided pass rate, an uplift of +22 percentage points.

Row 2: claude_code (claude-sonnet-5) achieved a 54% unguided pass rate and an 87% guided pass rate, an uplift of +33 percentage points.

Row 3: antigravity (gemini-3.8-flash-medium) achieved a 65% unguided pass rate and a 91% guided pass rate, an uplift of +26 percentage points.
12210
Reposted by Michael Warren
Kevin Powell @kevinpowell.co · 29/09/2026
About a week ago I was talking with someone about the WordPress drama that had been going on what felt like about a year ago, and we were wondering how things were going... Apparently it's just getting even wilder 😅 www.youtube.com/watch?v=ylO0...
youtube.com
The most expensive 33 hours in WordPress history...
YouTube video by Fireship
5214
Reposted by Michael Warren
Web Awesome @webawesome.com · 29/09/2026
<wa-combobox> can pull options from your server now! Set a dataSource callback, get debounced fetch + loading/error/empty slots, and improve performance by not shipping thousands of options in your DOM.
143
Reposted by Michael Warren
Adrian Roselli, pH0 @aardrian.bsky.social · 28/09/2026
“OpenAI bots meddled with multiple US government agency sites” www.bbc.com/news/article... If only they were treated as Aaron Swartz was for far far less: en.wikipedia.org/wiki/United_... I’m on board with Lina Khan’s approach to lean on a 1934 precedent: www.theregister.com/ai-and-ml/20...
bbc.com
OpenAI bots meddled with US government agencies, including SEC and Census
OpenAI said its bots accessed public data from a range of institutions during test exercises.
244
Reposted by Michael Warren
Kevin Powell @kevinpowell.co · 28/09/2026
Ever double-tapped a button on your phone and had the page zoom in? In this post over on @piccalil.li, @bell.bz looks at a simple CSS one-liner of `touch-action: manipulation` to prevent that, rather than messing with the viewport meta. piccalil.li/blog/stop-bu...
piccalil.li
Stop buttons triggering zoom when they’re double tapped
It’s annoying when your browser zooms if a button is rapidly tapped. There’s actually a really simple fix and no, you don’t have to prevent all zooming with a meta tag!
3327
Reposted by Michael Warren
Kevin Powell @kevinpowell.co · 28/09/2026
Excited to see we'll eventually have responsive iframes. It's a one-liner in CSS with `frame-sizing: content-height;` but it does require a meta tag to opt-in from the embedded doc as well. Currenly only behind a flag in Chrome, but will be nice to have once it starts landing.
developer.chrome.com
Responsive iframes in Chrome 154  |  Blog  |  Chrome for Developers
Chrome 154 adds support for responsively-sized iframes, letting an iframe size itself based on the intrinsic size of its embedded document.
2506
Reposted by Michael Warren
comiCSS @comicss.art · 28/09/2026
The latest comiCSS strip is about web accessibility and my "love" for meetings. It was inspired by a Twonks cartoon, giving it a web development/accessibility twist. comicss.art/comics/259/ As usual, it is coded using HTML and CSS. #comic #cartoon #accessibility #humor #joke #a11y
Comic with 4 panels stacked vertically. They all show a meeting room with 5 people sitting around a table. The lead says "before starting the meeting, let's introduce ourselves and go through the 31-point agenda", everybody else look concerned. One of them presses tab on their laptop, a "skip to main content" links pop up and he presses enter while all look surprised. Then the lead says "Ok. So let's start with the main topic" and everybody has a smile on their faces.
1286
Michael Warren @michaelwarren.dev · 27/09/2026
i only ever watch cable tv when i’m staying in a hotel, which i don’t often do. is “regular tv” always this bad or is it the hotel? gotta say, if this is tv, i’ll take youtube any day lol. this shit is awful
030
Reposted by Michael Warren
Terence Eden @edent.tel · 26/09/2026
New blog post: No errors, no warnings, no gods, no masters - HTML Purity is a Fetish shkspr.mobi/blog/2026/09/no-errors-… "The problem with defending the purity of the HyperText Markup Language is that HTML is about as pure as a …
shkspr.mobi
No errors, no warnings, no gods, no masters - HTML Purity is a Fetish
"The problem with defending the purity of the HyperText Markup Language is that HTML is about as pure as a cribhouse whore. The standard doesn't just borrow concepts from better languages; on occasion, HTML has pursued other programming languages down alleyways to beat them unconscious and rifle their pockets for new syntax." Englitch is an pretty goode langwidge. even you no grok all the…
1126
Reposted by Michael Warren
Kevin Powell @kevinpowell.co · 25/09/2026
CSS keeps getting better and better, but the problem with hearing about amazing new features is that we're stuck not being able to use them for a few years because of browser support. So, this week I looked at a bunch of well-supported CSS features that I still see people turn to JS for.
youtu.be
Use these CSS features instead of JavaScript
YouTube video by Kevin Powell
5595
Reposted by Michael Warren
Justin Fagnani @justinfagnani.com · 25/09/2026
Holy crap. Lit team member @rictic.com used Claude to create a "How lit-html renders" video and it's frankly... jaw-dropping. Yes, it's a lot like my talk intro'ing lit-html, but that was a good talk! This is deeper, more clear, and has great visuals. lit-html-series-v1.a1.demo.rictic.com/renders/
lit-html-series-v1.a1.demo.rictic.com
How lit-html renders
An explainer video: one lit-html template, from the code you write to the DOM. Prepare, create, update, and the caches in between.
6336
Reposted by Michael Warren
Cory LaViska @cory.laviska.com · 25/09/2026
An honor, sir! Can’t wait to do it again. If you’re in the design system space, give @michaelwarren.dev a follow.
042
Michael Warren @michaelwarren.dev · 25/09/2026
Finally got to hang out with one of the cool kids in person! @cory.laviska.com it was great to finally get to meet you in person! It’s literally been years!
Michael and Cory hanging out in Florida
1120
Reposted by Michael Warren
Jen Simmons @jensimmons.bsky.social · 24/09/2026
Assuming the quality efforts that went into Safari 26.4, 26.5, 27.0 were some kind of one-and-done project? Nope! Just look at all the improvements in Safari Technology Preview 253. webkit.org/blog/18357/r...
webkit.org
Release Notes for Safari Technology Preview 253
Safari Technology Preview Release 253 is now available for download for macOS Golden Gate and macOS Tahoe.
1253
Reposted by Michael Warren
Cory LaViska @cory.laviska.com · 23/09/2026
Looks like Interop 2027 proposals close today. Got a web platform gap that still burns (CSS, a11y, web components)? File or boost an issue before the window shuts. webkit.org/blog/18283/s...
webkit.org
Submit your ideas for Interop 2027
It’s that exciting time of year again when we start considering Interop proposals for next year!
153
Reposted by Michael Warren
beyond tellerrand @beyondtellerrand.com · 23/09/2026
Aaand we continue the list of lovely people that show up at the #btconf Düsseldorf speaker page for 2027. Please say HELLO and WELCOME to Mr. Roel Nieskens. 🤗 beyondtellerrand.com/events/dusse...
beyondtellerrand.com
Roel Nieskens: Speaker at beyond tellerrand in Düsseldorf 2027
Roel Nieskens is an independent developer from the Netherlands who loves the web, fonts, webfonts and all combinations thereof. Under the name PixelAmbacht he does front-end development and (web)font ...
0105
Michael Warren @michaelwarren.dev · 23/09/2026
#Tupo - Sep 23rd 2026 (Medium) ⏱️ Solved in 9:27 💯 A perfect game! Play at playtupo.com
playtupo.com
Tupo · A daily sudoku-style logic puzzle with a twist
A simple logic puzzle of numbers and colors. One new puzzle every day, starting easy and getting harder through the week.
000
Reposted by Michael Warren
Andy Bell @bell.bz · 22/09/2026
The @piccalil.li PRICEFALL event ends at midnight UTC so there's still time to save 80 big ones piccalil.li/courses/
Autumn sale, September 8th until September 22nd. 

35% off all courses. 

Save over £80 with code “PRICEFALL”
165
Michael Warren @michaelwarren.dev · 22/09/2026
#Tupo - Sep 22nd 2026 (Easy) ⏱️ Solved in 2:52 💯 A perfect game! Play at playtupo.com
playtupo.com
Tupo · A daily sudoku-style logic puzzle with a twist
A simple logic puzzle of numbers and colors. One new puzzle every day, starting easy and getting harder through the week.
000
Reposted by Michael Warren
shoptalkshow.com @shoptalkshow.com · 21/09/2026
733: Treadmills, Bass Guitars, and Testing Web Components We're talking treadmill and musical gear, software maintenance, dependency management, technical debt, testing web components, and CSS-Tricks hot drama.
shoptalkshow.com
733: Treadmills, Bass Guitars, and Testing Web Components
We're talking treadmill and musical gear, software maintenance, dependency management, technical debt, testing web components, and CSS-Tricks hot drama.
182
Michael Warren @michaelwarren.dev · 22/09/2026
#Tupo - Sep 21st 2026 (Easy) ⏱️ Solved in 5:58 💯 A perfect game! Play at playtupo.com
playtupo.com
Tupo · A daily sudoku-style logic puzzle with a twist
A simple logic puzzle of numbers and colors. One new puzzle every day, starting easy and getting harder through the week.
010
Michael Warren @michaelwarren.dev · 22/09/2026
this is so good! I played today’s puzzle, and it’s a good amount of deep logic! lots of fun!
020
Reposted by Michael Warren
Vale @vale.rocks · 21/09/2026
This is an extremely odd article from WIRED. It almost seems to be trying to fabricate some sort of culture war around CSS? Bizarre.
14456
Reposted by Michael Warren
Chris Coyier @chriscoyier.net · 21/09/2026
It's a little surreal watching Kevin recap the current CSS-Tricks situation. www.youtube.com/watch?v=9_upvxCAUzM It's been rollercoastery after DigitalOcean's acquisition. Thoughts: DigitalOcean bought the site. They can do whatever they want... chriscoyier.net/2026/09/21/13985
chriscoyier.net
It's a little surreal watching Kevin recap the current CSS-Tricks situation. https://www.youtube.com/watch?v=9_upvxCAUzM It's been rollercoastery after DigitalOcean's acquisition. Thoughts: DigitalOcean bought the site. They can do whatever they want with it. At the very least, I hope it stays online. Aside from a general distaste for bitrot, a lot of people have bylines on that...
0304
Michael Warren @michaelwarren.dev · 21/09/2026
give this a listen when you have the time! turns out @davatron5000.bsky.social is a pretty good author of more than just web components :)
010
Reposted by Michael Warren
Nathan Knowler @knowler.dev · 19/09/2026
nazi devs fuck off.
2629
Reposted by Michael Warren
Jane Ori 💚 CSS Runner 👩‍💻 @janeori.propjockey.io · 19/09/2026
This is as close to a cry for help that you'd see from me. I need work. I need money for shelter and food in the meantime. I've run out.
14435
Reposted by Michael Warren
Geoff Graham @geoffgraham.me · 18/09/2026
The Front-End Community is Still Alive and Beautiful I thought about dropping an addendum into my last post to say just how overwhelmed I am, in the best possible way, by the way all of you in the... geoffgraham.me/the-front-end-commun…
geoffgraham.me
The Front-End Community is Still Alive and Beautiful
I thought about dropping an addendum into my last post to say just how overwhelmed I am, in the best possible way, by the way all of you in the front-end community have shown up to show support, both for me and for CSS-Tricks. I started to do that but then felt a new post...
111028
Michael Warren @michaelwarren.dev · 18/09/2026
i’ll throw in $300 to buy back CSS Tricks from scummy company…who’s with me?!
070
Reposted by Michael Warren
Kevin Powell @kevinpowell.co · 17/09/2026
What unit do devs use the most often in production? @trost.codes took his best guesses! (Shoutout to @projectwallace.com for the stats)
11659
Michael Warren @michaelwarren.dev · 18/09/2026
i’ve never had an account on @digitalocean.com and i’m glad. i also never will. scummy company gonna be scummy. CSS Tricks was the first web blog I ever read, back when @chriscoyier.net ran it. I won’t forget what DO has done to the site that’s helped make me want to be a dev. DO better fix this.
171
Michael Warren @michaelwarren.dev · 15/09/2026
who wants a blog article about something to do with tailwind? :)
000
Michael Warren @michaelwarren.dev · 15/09/2026
walk softly and carry a big UI framework
000
Reposted by Michael Warren
beyond tellerrand @beyondtellerrand.com · 14/09/2026
I have written a little blog post to welcome @kevinpowell.co – I have written about where we met, how the idea for his talk at #btconf was born and a few bits of background about him. Find our who Kevin is: beyondtellerrand.com/blog/speaker...
beyondtellerrand.com
Speaker Introduction – Kevin Powell
Kevin Powell joins beyond tellerrand Düsseldorf 2027. Leaving the CSS deep dive at home to tell the story of how a hobby turned into all of this.
084
Reposted by Michael Warren
Kevin Powell @kevinpowell.co · 14/09/2026
I've known that I'd be speaking at @beyondtellerrand.com for a little bit now and it was hard to contain my excitement, so I'm happy that I got to be the first one announced and I didn't have to wait any longer 😆
3383
Reposted by Michael Warren
beyond tellerrand @beyondtellerrand.com · 14/09/2026
Say hello to first speakers revealed for #btconf Düsseldorf. Let's start with @kevinpowell.co about whom I am absolutely happy. Knowing him for a while through other events, I know it is always a pleasure meeting him. Welcome Kevin! beyondtellerrand.com/events/dusse...
beyondtellerrand.com
Kevin Powell: Speaker at beyond tellerrand in Düsseldorf 2027
Kevin Powell is a CSS evangelist and educator whose primary goal is to help people fall in love with CSS and, failing that, to at least help them be a little less frustrated by it. He is best known fo...
2246
Michael Warren @michaelwarren.dev · 14/09/2026
can we collectively, as a society, start naming and shaming people that say “in my (whole) life” directly after a statement that implies the same thing? i hear it so often now. People will say stuff like: “This is the best food Ive ever had in my whole life”
100
Michael Warren @michaelwarren.dev · 12/09/2026
CSS eating JS for breakfast lunch and dinner: Exhibit #3892748817
080
Reposted by Michael Warren
Faris Aziz @farisaziz.com · 11/09/2026
@danielroe.dev make a brand new release of @npmx.dev on stage at @zurichjs.com
1416
Reposted by Michael Warren
Donnie D'Amato @donnie.damato.design · 11/09/2026
Hey, Don't use "because accessibility" as your scapegoat. If it's for accessibility explain how. Describe the kind of person it was designed for and what need it is addressing. Thanks.
0121
Reposted by Michael Warren
Dave Rupert @davatron5000.bsky.social · 11/09/2026
microlighter@v2.2.0 is out 🚀 - new themes: gruvbox, flexoki - new grammars: astro, ini, nginx, + fixes - custom element improvements - now ~2000x faster on large files thanks to @danielroe.dev - and now has full typescript types (@danielroe.dev again) Still ~2.09kb github.com/davatron5000...
github.com
Release v2.2.0 · davatron5000/microlighter
What's Changed Added gruvbox theme by @Descent098 in #13 perf: stop rescanning code blocks on every step by @danielroe in #18 Correct and align syntaxp URL by @j9t in #19 Add Flexoki theme by @crh...
4498
Michael Warren @michaelwarren.dev · 10/09/2026
i mean this with all sincerity when i say this. www.404media.co/wordpress-au... LOL.
404media.co
Automattic CEO Matt Mullenweg Put on 'Leave of Absence'
Mullenweg, co-founder of WordPress, wrote in a company-wide Slack messages on Wednesday, viewed by 404 Media, that board members "conspired" behind his back to vote to put him on leave.
150
Michael Warren @michaelwarren.dev · 09/09/2026
ayy! let’s go scoped custom elements!
051
Reposted by Michael Warren
Elle Cordova @ellecordova.bsky.social · 08/09/2026
I am the very model of a modern day typographer A font take on the tune “Modern Major General” by Gilbert & Sullivan #typography #fonts #graphicdesign
24550251556
Reposted by Michael Warren
konnaire @konnaire.bsky.social · 08/09/2026
Putting the :/ in https://
92260688
Reposted by Michael Warren
Brecht De Ruyte @utilitybend.com · 08/09/2026
🚀 Container style queries are baseline; New attr() capabilities are nearly there. Neat apart, but together they change how we can wire up components. Practice will make perfect, and I still need to rewire my brain for this combo. So, time to start that rewire. utilitybend.com/blog/contain...
utilitybend.com
Container style queries and advanced attr(): rethinking how to wire up my components in CSS | utilitybend
Wiring HTML attributes into CSS with advanced typed attr(), and letting container style queries pass that state down to child components.
23314
Michael Warren @michaelwarren.dev · 08/09/2026
why are most of the articles with AI subject matter written from the assumption that AI is here to stay? Why do people assume that? NFTs and “Web3” weren’t here to stay either. Do folks really think society can’t just fold these companies and product like origami?
100
Reposted by Michael Warren
Andreas Møller @handle.invalid · 06/09/2026
Please buy Sarah’s book “Engineering management for the rest of us” It is a great book, and I am not 100% sure she will be able to live off her comedy career.
1524
Reposted by Michael Warren
Kevin Powell @kevinpowell.co · 04/09/2026
That uneven feeling even when your top and bottom padding are identical? Fonts reserve room for ascenders and accents up top and descenders below. text-box-trim cuts it away! youtu.be/Tdpoa1j5fcU
youtu.be
This CSS property fixes a problem as old as CSS
YouTube video by Kevin Powell
0406
Reposted by Michael Warren
Jake Archibald @jakearchibald.com · 04/09/2026
Playing around with an idea: responsive code. The build script creates up to 5 versions of each code sample using Prettier, and a container query displays the right one. Brotli means the filesize overhead is very small. Live demo: jakearchibald.com/2026/css-cus...
1728928