Patrick Brosset
@patrickbrosset
Edge web platform PM @Microsoft. Previously @Mozilla. WebDX CG. OWD GC. Husband and father of 3. he/him The Interwebs · patrickbrosset.com
A new level of mind-blowing just dropped: css-dos.ahmedamer.co.uk Run MSDOS in the browser, 100% in CSS! There's a bit of compiler magic so it doesn't take 3 months to load, but there's an option to load the raw CSS instead if you want, which does crash the tab 😁
CSS mixins are great for little utilities, to shorten the code and make it easy to reuse. Tailwind could be a really good candidate for a mixins refactor! Left: tailwind, styles all over your HTML 🤮 Right: mixins, same DRY reuse, plus separation of concerns, semantic HTML, and parameters.
Very clever @webdevs.firefox.com DevTools feature 🦊 When you go to a page from a file URL, with DevTools open, you can now map "https://firefox.localhost" to the file's parent folder. So, now, I have "https://firefox.localhost" wired up to my Downloads folder. No servers. Thank you Firefox!
Oh, what a way to start the week 😍 CSS mixins implementation is starting in Chromium, from my team at Microsoft.
I love the web features explorer monthly update RSS feed. Each month I get a little report about what became Baseline, and what browsers shipped that month 📆 Quick to read, to the point ⏩ RSS: web-platform-dx.github.io/web-features...
Web dev challenge: use the 3 most recent Baseline Newly Available features to build a demo of some kind. - field-sizing - :open - container style queries Easy, they're all CSS things. field-sizing and :open both work with <select> elements. So, maybe some fun responsive drop-down.
😮🤩🥹 when some of your web heroes start following you on social media.
#cssday continued… Great chats with @schepp.dev and @erwinhofman.bsky.social, advanced CSS talks with @kizu.dev, learned a lot from @joshtumath.uk, got my brain melted by @html5test.com, and of course special thanks to @rgadellaa.bsky.social for fighting the good battle with @open-web-advocacy.org.
The wonderful smashing and BT folks @charismagic.bsky.social Jarijn and @marcthiele.com. My CSS personal hero @meyerweb.com. DevTools Swiss Army knife @kilianvalkhof.com. And of course the best organiser of all @quirksmode.org. And more to come, all at #cssday…
More #cssday friends! @sjoy.lol who gave a wonderful talk. @ohhelloana.blog the amazing MC. @kevinpowell.co who is everyone front-end best friend. And the one and only @una.im. Amazing to meet you all. And more to come…
And more WebDX friends! @atopal.bsky.social @lea.verou.me Daniel Beck @sachagreif.com @estelle.bsky.social
Great conference, great people! My WebDX partners in @rviscomi.dev and @atopal.bsky.social. The one and only CSS documentarian @estelle.bsky.social. And the awesome @matuzo.at. Many more who I didn’t have a chance to get a selfy with, but will tomorrow.
👋 Want to learn about and try CSS Grid Lanes (aka CSS Masonry)? 🎤 If so, join me on Friday for "Fun with Grid Lanes" at @cssday.nl (or watch the recording later, when it comes out). 🛝 Also check our many samples to learn about the syntax and possibilities: github.com/MicrosoftEdg...
Oh, and, quick announcement too, I'll be at @oredev.org in November, later this year too. See you in Malmö!
Little side project! ⌨️ wf: a little command line tool to search for web features and associated data like browser compat/Baseline, docs, links to bugs, and more 📖 Install and learn more at www.npmjs.com/package/web-...
⭐ Making custom elements inherit native behaviors ⭐ Checkout our latest experiment ➡️ microsoftedge.github.io/Demos/platfo... This gives your custom elements native behaviors! For now we support form submission. Your <fancy-button> can now submit forms, no platform code duplication needed!
The shape() CSS function (which works with clip-path, border-shape, ...) is very cool! Supported across browsers, very flexible and powerful. Demo patrickbrosset.com/lab/shapes/ (Chromium-only sorry, using at-function in this one). Learn more developer.mozilla.org/docs/Web/CSS...
Getting inspired by all the things the new CSS grid lanes layout can do. Like this bottom-up and top-down layout. Sure, this layout isn’t the best for when order is important. But, man, is it cool for visual creativity.
There are lots of web compat resources out there. Can-I-Use and MDN, to name the two obvious ones. But, there are way more things, and they're all interconnected somehow, and relying on some of the same data. Check out this really cool visualization: webcompat.dev
We'd like to adopt a logo for the WebDX community group (the group that's responsible for web-features data, which powers Baseline). We have 3 proposals from our community. Help us choose by voting at github.com/web-platform... with a 👍 on the one you prefer!
😪 Large web apps often fetch many resources at once, including 3rd party parts they don't control, creating slow UX. 💡 Network Efficiency Guardrails helps you catch and fix load bottlenecks. ℹ️ Check out our proposal to monitor and improve your app’s load perf: blogs.windows.com/msedgedev/20...
Tried lyra.horse/css-clicker/ by @rebane2001.bsky.social. Very impressive how far CSS has come.
Curious about custom <select>? I wrote about some of my recent demos over at @css-tricks.com! Take a look ✨ css-tricks.com/abusing-cust...
I feel like this is either very dumb or very clever. Either way, I blogged about it: Using CSS animations as state machines to remember focus or hover states in CSS only. patrickbrosset.com/articles/202...
This demo doesn't use a single line of JS code to respond to the arrow keys. Movement of the player is handled 100% by the upcoming `focusgroup` HTML attribute! Focusgroup was definitely *not* made for this 😅 But, so cool to have this out of the box on the web. More ➡️ open-ui.org/components/s...
Soon across all browsers: CSS contrast-color()! It returns a color that has guaranteed contrast against an other color. Very useful for computing text color with enough contrast against an unknown background. Demo ➡️ codepen.io/captainbross... Docs ➡️ developer.mozilla.org/en-US/docs/W...
You'll never guess how I made these illustrations! (pssst: I'm using CSS gap decorations) Check out the source code ➡️ patrickbrosset.com/lab/gap-deco... ⚠️ This currently requires a recent Chromium browser.