Web Weekly #195
Guten Tag! Guten Tag! 👋
Did you check out the new WebKit grid-lanes resources already? Do you "view transition" with match-element? And have you heard of HTML streaming maybe becoming a thing?
Turn on the Web Weekly tune and find some answers below. Enjoy!
Web Weekly Jukebox
GENER8ION - STORM starring Yung Lean
I loved the cinematography, choreography and the whole bad-boys-from-high-school vibe.
Do you want to share your favorite song with the Web Weekly community? Hit reply; there are five more songs left in the queue.
Let's open this week with some fancy CSS grid stuff!
Peter-Paul explained how the grid layout algorithm works. For most cases you don't need to think about the internals, but it's good to know how things work. If you don't know what grid-auto-flow does, this post is for you!
And speaking of the grid algorithm, things get more and more complicated when you consider the new display: grid-lanes (Safari-only so far). Our friends at WebKit released a new cheatsheet with a built-in configurator and lots of examples. It has strong vibes of the CSS-Tricks materials back in the day!
And if all this isn't enough, Patrick published a tutorial explaining alignment in the new masonry world.
That's some funky new CSS we'll be able to use eventually! 🎉
If you enjoy Web Weekly, share it with your friends and family.
A quick "repost" really helps this indie newsletter grow. Thank you! ❤️
Turn your component tests into visual coverage
The new Chromatic plugin for Vitest’s Browser Mode adds visual tests and collaborative UI review with no changes to your existing test suite. Tests run in a stable, parallelized cloud infrastructure for reduced flake and accelerated shipping.
Early access includes hands-on support from the Chromatic team and free usage while the plugin is in beta.
Web Weekly is open for sponsorships. When you want to reach 6k developers, you know what to do!
Web Weekly Housekeeping
A huge bag of karma points goes to Caspar, Den, Marco, Savio, and Zoe this week. 50 people now support Web Weekly financially, thank you all! ❤️
If you enjoy Web Weekly, give back with a small monthly donation on Patreon or GitHub Sponsors.
The state of content creation is rough these days, and while I have let go of the idea of making this newsletter a sustainable income, every tiny support helps me keep going.
Something that made me smile this week
You know that I'm a sucker for single-purpose URLs and this one is right up my alley.
No code
- We have a communication problem → "I'm convinced that many of society's problems come from how we communicate online."
- If You are Asking for Human Attention, Demonstrate Human Effort → "If you are requesting human attention, demonstrate human effort."
- Why DIY Software Is Great Until It Is Not → "When you build for others, you are working with someone else’s idea of what the product should do, not yours."
Web development trivia
Here's something for you to shine at nerdy dinner parties. Did you know that history.pushState has a parameter that's "officially" unused? Alex gives a nice history lesson.
TIL — there's three ways to ignore files in Git
So, I've been using global Git ignores since forever (bye bye .DS_Store), but I didn't know .git/info/exclude is a thing.
view-transition-name: match-element
I can't be the only one not realizing match-element works across browsers these days, can I? Bramus explains when to use match-element or go for the advanced attr() CSS function.
Streaming HTML?
I've got no idea how I could have missed that, but Ollie shared that streaming HTML might become a thing. Granted, it's very early days still but this is exciting. It's yet another example of framework patterns entering the web!
The wonderful weird web – Clues by Sam
I've seen multiple people talk about the logic puzzle game "Clues by Sam". And I must admit, it's a lot of fun!
MDN now has an MCP server
I know that many Web Weekly readers aren't big AI fans. However, the new MDN MCP server is very useful to access docs and browser support data.
There's a prop for that...
Adam released a new JS library that transforms JS runtime values into CSS custom properties. Just like that? Yes, if you want to use form values, pointer positions or even the current time in CSS, prop-for-that will make that possible without writing custom JS.
Side note: Adam also spoke at CSS Day and presented a MEGA LIST of the ways CSS can enable highly adaptive, contextually relevant components. This slide deck is very well worth your time. Trust me.
Good to be aware: contrast themes
You're probably checking light and dark mode when writing your CSS. But do you check contrast, too? Here's a quick explainer telling what to watch out for.
HTML in canvas demos
HTML in canvas is still a long way off, but of course people are going wild with it already. I also wonder how useful this all will be, but hey... I'm always game for some eye candy.
Random MDN – overscroll-behavior
From the unlimited MDN knowledge archive...
Overscroll behavior is one of those CSS properties that aren't used enough. I'm using a Mac and way too often do I accidentally swipe the history, just because a horizontal scroller wasn't containing the scroll. Let's fix that!
TIL recap – orientation in container size queries
Did you know that container size queries can detect landscape and portrait ratios? Now you do!
Find more short web development learnings in my "Today I learned" section.
New on the baseline
I've mentioned CSS field-sizing plenty of times here and with Firefox supporting it now with version 152, it's finally baseline newly available.
And it feels like yesterday, but native CSS nesting is now widely available. Time flies!
Three valuable projects to have a look at
- webstonehq/tuxedo – A TUI for
todo.txt - raphaelsalaja/audio – Declarative audio synthesis for the web.
- useplunk/plunk – An open source email platform.
A new Tiny Helper
With more and more throwaway tools being generated, I started to question Tiny Helper's usefulness. The project is also "under fire" with lots of useless vibe code submissions.
What do you think? Should we keep it? If 50 people reply and let me know that it's valuable, I'll keep going. Otherwise, I think it's time to "finish" this project.
Thought of the week
Yep.
Paying for software isn't paying for a solution. It's paying for someone else to own a problem.
Did you learn something from this issue?
❤️ If so, join 50 other Web Weekly supporters and give back with a small monthly donation on Patreon or GitHub Sponsors.
This is all, friends!
Loved this email? Hated this email? I want to hear about it!
If you think something needs improvement or something sparked some joy, reply to this email because I want to know more!
And with that, take care of yourself - mentally, physically, and emotionally.
I'll see you next week! 👋
Join 6.5k+ developers and