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!
::: song by="Pablo" title="GENER8ION - STORM starring Yung Lean" youtube="x6_mbnsh6VU" 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! ❤️
::: highlight sponsored
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.
<a class="btn btn__small" href="https://www.chromatic.com/blog/vitest-visual-testing-sneak-peek/?utm_source=webWeekly&utm_medium=newsletter&utm_campaign=newsletterSponsorshipWebWeeklyVitestEAP">Get early access</a>
<small>Web Weekly is open for sponsorships. When you want to reach 6k developers, <a href="https://webweekly.email/sponsor">you know what to do</a>!</small> :::
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.
You know that I'm a sucker for single-purpose URLs and this one is right up my alley.
<a class="btn btn__small" href="https://noslopgrenade.com">Don't do it</a>
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."
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.
<a class="btn btn__small" href="https://alexwlchan.net/2026/wonky-web-apis/">Don't use the unused</a>
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.
<a class="btn btn__small" href="https://nelson.cloud/.gitignore-isnt-the-only-way-to-ignore-files-in-git/">Ignore</a>
view-transition-name: match-elementI 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.
<a class="btn btn__small" href="https://www.bram.us/2026/06/19/view-transition-name-attr-or-match-element/">Match it!</a>
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!
<a class="btn btn__small" href="https://developer.chrome.com/blog/declarative-partial-updates">Stream</a>
I've seen multiple people talk about the logic puzzle game "Clues by Sam". And I must admit, it's a lot of fun!
<a class="btn btn__small" href="https://cluesbysam.com/">Solve some puzzles</a>
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.
<a class="btn btn__small" href="https://developer.mozilla.org/en-US/blog/introducing-mdn-mcp-server/">Ask MDN</a>
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.
<a class="btn btn__small" href="https://prop-for-that.netlify.app/">Use props</a>
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.
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.
<a class="btn btn__small" href="https://accessibility.huit.harvard.edu/news/2026/05/deep-dive-contrast-themes">Be aware</a>
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.
<a class="btn btn__small" href="https://html-in-canvas.dev/">Check the future</a>
overscroll-behaviorFrom 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!
<a class="btn btn__small" href="https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/Properties/overscroll-behavior">Container</a>
Did you know that container size queries can detect landscape and portrait ratios? Now you do!
<a class="btn btn__small" href="https://www.stefanjudis.com/today-i-learned/size-container-queries-can-detect-landscape-portrait-orientation/">Detect</a>
::: highlight info Find more short web development learnings in my "Today I learned" section. :::
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!
webstonehq/tuxedo – A TUI for todo.txt
raphaelsalaja/audio – Declarative audio synthesis for the web.
useplunk/plunk – An open source email platform.
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.
Yep.
::: highlight quote
Paying for software isn't paying for a solution. It's paying for someone else to own a problem. :::
❤️ If so, join 50 other Web Weekly supporters and give back with a small monthly donation on Patreon or GitHub Sponsors.
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! 👋