Have you heard of the new Git history commands? Are you overwhelmed by Chrome's performance profiler? And do you use the inert attribute in your sites?
Turn on the Web Weekly tune and find some answers below. Enjoy!
I recently learned about the band Wet Leg when I saw them perform on NPR's Tiny Desk on YouTube. Their album moisturizer has been on repeat often since then.
Do you want to share your favorite song with the Web Weekly community? Hit reply; there are three more songs left in the queue.
I've been cleaning up some tabs the last couple of days and even though I'm no font person, here are some fonts that might come in handy in the future.
Datatype is a variable font that turns text into charts. 🤯 I've got no idea how this works technically, but it can definitely be useful for inline graphics or sparklines. Disclaimer: be aware of accessibility issues. You should probably go with a role="img" and span combination when using it.
Redacted Script is a font that looks like hand-written placeholder text. I'd love to see a skeleton placeholder with it. 😅
And if that's too fancy, Flow Block does the same but without the handwriting.
Maybe I should sit down one day to understand how all this font magic works...
If you enjoy Web Weekly, share it with your friends and family.
A quick "repost" really helps this indie newsletter out. Thank you! ❤️
This week's summer bag of karma points goes to Nadja and Charles, who started to support Web Weekly financially. This brings the supporter count to the amazing number of 56.
After subtracting the cost of sending and hosting, Web Weekly now makes around $160 per month. Thank you all for supporting this newsletter! ❤️
If you enjoy Web Weekly, give back with a small monthly donation on Patreon or GitHub Sponsors. It really makes a difference in these hard times of AI slop and low-effort web creation.
There's nothing to see here, it's just a browser running in your browser.
The "No code" section turned out to be rather technical this week. 🫣 If you have good articles outside of the tech bubble, shoot them my way!
git history command 
Git ships a new history command that makes it easier to change and fix commits. If you dislike interactive rebasing, you'll really like this one.
I really liked this one. Daniel put CSS states (:focus-visible, :popover-open, :fullscreen etc) next to possible JavaScript implementations. He also went into the fairly new event-trigger CSS props and that's some fancy stuff!
I dig this a lot! Edge now ships an experimental feature that warns you about and monitors network activity that isn't optimized, like uncompressed assets or large images.
If you're intimidated by the Chrome DevTools performance tool, you'll dig this one. Joan put together a nice explainer about all the details you need to know!
I'd say I was pretty aware of all the possibilities and information my browser shares about me, but it's still wild to see all this data in black and white.
Here's Temani yet again doing Temani things explaining how to tweak and adjust the overflow of individual images using object-fit and object-position.
The
<img>element (the HTML element) is the “container”, and the image resource (the actual image) is loaded inside that “container” and becomes the “content”. We have our container-content relation so we can talk about overflow.
It's a great read to understand img fundamentals.
Have you ever noticed that "things become unclickable" when a view transition is running? If you're running long animations, Chris shared what you can do about it.
Since releasing the Web Weekly redesign, I've been waiting for CSS gap decorations to ship across browsers, because the design includes plenty of borders, and styling everything across viewports caused a mild headache.
CSS gap decorations are shipping in Chromium already. If you want to dive deeper, here are some links.
I'm pretty sure I read this post years ago (seems to have been extended since) and I'm still following some of the rules. These easy-to-remember rules will help you out if you don't have an eye for design.
inert 
From the unlimited MDN knowledge archive...
If you're dealing with elements that shouldn't be accessible or reachable at all, the HTML inert attribute helps out!
@keyframe animations in the CSS cascade 
Did you know that keyframe animations have a special place in the CSS cascade? No? Then this post is for you!
There doesn't seem to be a new feature that recently went on the baseline, so let me share three things that just went baseline widely available! 🎉
I might be getting old, but it still feels like these features landed yesterday.
The folks behind the TanStack software factory released another tool to compare npm download stats. It's not the first site that does this, but it has some more config options if you want to dive deeper.
As I'm turning 41 this week, I feel every word of this post. Keeping friendships alive often becomes hard work and "friends for life" can quickly become "people I used to know" if you're not careful.
Adult friendship became one of the most emotionally significant and least discussed losses of modern life.
❤️ If so, join 56 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! 👋
Join 6.5k+ developers and
此内容由惯性聚合(RSS阅读器)自动聚合整理，仅供阅读参考。 原文来自 — 版权归原作者所有。