Web Weekly #197
Guten Tag! Guten Tag! π
Are you ready for the closedby attribute? Will you measure elements with containertiming? And do you use CSS infinity?
Turn on the Web Weekly tune and find some answers below. Enjoy!
Web Weekly Jukebox
GUTS 'METIS'
This one was recommended to me by Apple Music while driving back home last week. The moment I heard it for the first time I put it on loop and it was playing for the rest of the journey (1hr). Really positive 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 issue by looking at two developer surveys worth your time.
First, the State of Devs survey is open for participation. And if you have a moment, you should fill it out. I sound like a broken record, but things are changing. There's a lot of uncertainty and, frankly, occasionally I'm navigating a full-blown identity crisis. I'm very curious about whether I'm alone with these feelings...
And second, the State of CSS survey results are out! π As always it's a great read to discover new features and get a feeling for how "cutting edge" everybody is out there.
And to everyone who mentioned me in the resources section, thank you! I'm very humbled to be on this list of great people in the web dev community. π₯Ή
If you enjoy Web Weekly, share it with your friends and family.
A quick "repost" really helps this indie newsletter out. Thank you! β€οΈ
Building an AI Workflow UI in React? Start With JointJS
Most teams building AI workflow UIs start with a lightweight node graph library. Quick to a demo, but you hit a ceiling once the product gets real: UX gaps and slowdowns on large diagrams.
JointJS for React starts where that ceiling is. On UX, you get a full diagramming toolkit: a drag and drop canvas with editable nodes, validation, undo/redo, keyboard shortcuts, snaplines, and accessibility. On performance, rendering is optimized to stay smooth as pipelines grow to hundreds of nodes.
The JointJS AI Workflow Builder template gives you ~90% of the app, full source included. Wire up your execution backend and ship. Already trusted in production by teams at UiPath, DocuSign, and Bloomberg.
Web Weekly is open for sponsorships. When you want to reach 6k developers, you know what to do!
Web Weekly Housekeeping
This week's summer bag of karma points goes to Zerde, who started to support Web Weekly financially. This brings the supporter count to the amazing number of 54.
After subtracting the cost of sending and hosting, Web Weekly now makes around $150 per month. Thank you all for supporting this newsletter! β€οΈ
So, if you enjoy Web Weekly, give back with a small monthly donation on Patreon or GitHub Sponsors. It really makes a difference for me in these hard times of AI slop and low-effort web creation.
Something that made me smile this week
Guess what you'll find at clickclickclick.click. I can't help it; I just love people who put out silly things on silly domains. β€οΈ
No code
- Stage Fright. β "There's no way you can go through with this. But you do it anyway. Because it's too late to back out now. Because not doing it would be worse, somehow."
- What does "playing politics" mean for software engineers? β "If you have powerful enemies at a company (for instance, the CTO or an influential VP doesnβt like you), quit."
- How to Take Feedback without Getting Defensive β "Almost always, defensive behaviors are coping mechanisms for difficult emotions."
Browser Performance Timing APIs
Harry explained the new containertiming attribute, which is currently running as a Chrome Origin trial. If you're not knee-deep into perf topics, the post includes more than one rabbit hole to jump into. For example: Have you used the elementtiming attribute to get render information of image or text nodes? Or, do you use the User Timing API to mark certain render/performance milestones?
Promise.all but for good old objects
The "Await dictionary of Promises" ECMAScript proposal moved to stage three so that we'll finally be able to await objects. Can't wait!
On standards, processes, and specifications
Lea makes a strong case for the usefulness of polyfills. If you want to learn more about the current state of polyfills, ponyfills, and prollyfills (I hadn't heard that one before), this post includes tons of background info.
CSS Route and Navigation Matching
Bramus is working on new ways to make view transitions easier to handle in an MPA scenario. This is in its very early stages, but look at this funky CSS.
Bramus is looking for feedback!
The wonderful weird web β Dustin's website
Well, that's what I call yet another fancy personal website. π
CSS infinity
How could you stack on top of an element with the highest possible z-index (2147483647)? Correct! You use CSS infinity to get on top of the highest stack. Adam lists some more creative infinity use cases.
Follow the OS font size
Back in Web Weekly 182, I included the new text-scale meta element which enables sites to react to OS font size changes. I didn't realize that there's more to this topic.
Apparently, there's also the preferred-text-scale CSS env variable. Josh was involved in the spec and shares how a particular BBC problem led to this new font size approach.
Scale text automatically
Speaking of text scaling, apparently Chrome 150 shipped the new text-fit property. There are no real MDN docs, and the spec would be the best we've got if it weren't for Krijn, who documented all the options with visual examples.
Measure SPA navigations
With Chrome 151, soft navigations entered the mainstream. If you haven't heard the term, a soft navigation is anything that:
- is initiated by a user action.
- results in a visible URL change to the user.
- results in a visible paint.
So, we're talking about a new way to monitor and measure classical SPA navigations.
Side note: if you're using the web-vitals library, soft navigations are now supported with v6.
Random MDN β closedby
From the unlimited MDN knowledge archive...
We're not entirely there yet in terms of browser support, but the new closedby property ships in Chromium, Firefox and is already included in Safari TP, so it's about time to look into it.
TIL recap β use Intl to format and localize units!
Here's a quick party trick: did you know that you can use Intl to format numeric values with their units?
Find more short web development learnings in my "Today I learned" section.
New on the baseline
![Widely available: .something { animation-timing-function: linear(0, 0.25 25% 75%, 1); } Newly available: const german = new Intl.Locale("DE-de"); console.log(german.getTimeZones()); // Array [ "Europe/Berlin", "Europe/Busingen" ]](https://images.ctfassets.net/f20lfrunubsq/3rT5BcxgJKvhqp5A5EiOud/c46844057641449f8d970ce256fa9469/code-shot-baseline-linear-intl-locale.png?w=800&fm=avif)
The linear() easing function made it into Baseline widely available territory.
And since Firefox 153, all recent browsers support new info methods like getTimeZones, getTextInfo, or getHourCycles on Intl.Locale objects.
Three valuable projects to have a look at
- duongductrong/Snapzy β A macOS screenshot and screen recording app.
- charmbracelet/glow β Render markdown on the CLI.
- gkurt/tegaki β Handwriting animation for the web.
Thought of the week
This is by far my biggest concern with the "new world" we're in. As Koshy says, it's never been so easy to pretend without understanding what's going on.
[AI] makes it easy to simulate competence without building competence.
Did you learn something from this issue?
β€οΈ If so, join 54 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