This also makes me just so much more stoked for container queries landing soon! It’ll make this kind of magic size-based rearrangement easier to attain (and much more flexible). The future of web dev is super exciting!

We have a component on the ChromeOS.dev homepage that uses the magic flexbox inline/block switching technique. I just reused it on a new section that has a grid of 2 items instead of 3, that magic kicked in, and it made me so happy.

@Una @ibmdesign Very much same

@wesruv Agree that’s what it’s commonly used as today because we don’t have any other “this is interactive” indicator that’s quite as quick and easy. Wonder what one would be that could still distinguish between a link and a button

@wesruv Ooo I know this one! Because “pointer” is spec’d to indicate the thing is a link. Buttons aren’t links (or at least shouldn’t be, at least not by default) so they don’t get it.

w3.org/TR/CSS21/ui.html#propdef-cursor

RT @jh3yy: ⚡️ Speedy CSS Tip! ⚡️

Create “That” animated boujee gradient text effect 💅

Learn which ✨ magic ✨ property makes it possible an…

RT @ChromiumDev: 📜 Want to learn how to build a Progressive Web App? Our new course takes you right through the process.

Written by @firt…

RT @awhalefact: many people don’t realize just how big a whale can be when the image isn’t to scale

RT @elizposadas: Highly educational and accurate thread about whales with immaculate alt text that is also educational and accurate. Please…

@ChromiumDev @firt @tropicadri @rachelandrew @petele @medleyjp A lot of the content is based on the new PWA training from last year (web.dev/new-pwa-training), and the codelabs from that training are now integrated into this course. If you were using that training, time to move over to Learn PWA

Want to learn how to make a Progressive Web App? @ChromiumDev just launched the final chapter of the Learn PWA course written by @firt with @tropicadri, @rachelandrew, @petele, @medleyjp, and myself. There’s lots of great stuff in there, check it out!

web.dev/learn/pwa

@zeldman We try and do this on chromeos.dev using clamp for spacing. Line height is tough because we can’t get unitless numbers out of clamp/calc, but padding and width we’re doing, even some other sizing based on font size which is fluid

@lpohutsky19 Looks delicious!

@Una @daKmoR Hey all! Fixed it! The fix was small, but we also needed to update the actual image, which took a bit longer.

Thanks for point it out y’all!

chromeos.dev/en

Ha. Issue 404 in the ChromeOS.dev GitHub repo is to fix missing assets.

RT @grigs: Still the best responsive design advice. Thanks @stephenhay

RT @brad_frost: start with the small screen first, then expand until it looks like shit. TIME FOR A BREAKPOINT! @stephenhay #bdconf

The team bringing @Steam to @googlechrome OS has written the first of a series of articles on how the integration works! If you like games, Chrome OS, or OS internals, it’s an interesting read!

chromeos.dev/en/posts/bringing-steam-to-chromeos

@MaximoMussini @ilesjs @patak_dev @eleven_ty @vitest_dev @svelte @sveltejs @vuejs Thanks! I’ll keep an eye out, as sadly this won’t work for me until I’m able to do HTML transforms.

@ilesjs @patak_dev @eleven_ty @vitest_dev @MaximoMussini @svelte @sveltejs @vuejs So I’m playing around, I’m trying to get vite-plugin-posthtml to work, and I’m seeing in dev it’s running but there appears to be client-side rendering happening preventing it from doing its job, and it doesn’t appear to run during build at all. Thoughts on why?

@patak_dev @eleven_ty @vitest_dev @MaximoMussini @ilesjs This looks good on first blush, and like that I can use @svelte for interactive bits. I’m going to investigate more! Ty!

Oh and I meant @vite_js powered, but integrated Vitest is a plus too

@patak_dev @eleven_ty @vitest_dev @MaximoMussini @ilesjs I meant just Vite in that tweet, but Vitest is a good addition too!

I haven’t seen that, I’ll take a look. Thanks!

Also, Markdown support and file-system based pagination.

@astrodotbuild seems to have some of the above, as does @slinkitydotdev and @sveltejs kit, but none feel like they have all of the above.

This is what I want from a static site generator:

• @eleven_ty like data cascade and layouts
• single file components with a DSL (not JSX/like) w/island architecture for client-side JS
• Dynamic page generation and i18n support included
• @vitest_dev powered

Does this exist?