Web Weekly #136
- Published at
- Updated at
- Reading time
- 10min
Should you write a readme about yourself? (YES!) What makes an animation good? And when will the new relative color CSS syntax (oklch(from red l c h)) be ready to use?
Turn on the Web Weekly tune and find all the answers below. Enjoy!
Hauke listens to Wir sind Helden — Der Krieg kommt schneller zurück als du denkst
The title is German for "the war will return faster than you may think". That song aged very well. When I was listening to my favorite bands from the 00's I stumbled upon this gem. I stopped coding when I realized how accurate the song is. "How far is far away enough?" "How long is long gone?". "What is so funny about peace love [and understanding]?"
Do you want to share your favorite song with the Web Weekly community? Hit reply; there are two more songs left in the queue.
🎁 And I have a surprise for you this week: If you're based in Berlin, Germany or even Europe and want to attend the We Are Developers World Congress (17 - 19 July), I have two tickets to give away for free. What do you have to do?
Because I enjoy the Web Weekly jukebox so much 👆, add a song to the queue by replying to this email.
I'll pick one lucky winner next weekend who can then take a friend to join the conference fun here in Berlin!
What makes a great open source project?
That it works? That it's written in Rust? That the code is readable?
Of course it should work, but I vote for good docs and a well-written Readme because both show that the maintainer cares. I know the maintainer wants me to succeed if there's a polished Readme.
But isn't it funny that we put so many thoughts into shipping software, but when we interact with colleagues, friends and family, we're like "Here I am! Deal with me!"? And then we're disappointed because people don't treat us the right way, yet we didn't tell them what to do. Often we forget to set people up for success.
Malte published the "Malte Handbook", and I'm super into it. It's like a well-written readme for people at work.
Malte describes how he "works" as Vercel's CTO. He includes his values, how he sees engineering, some private facts and that he likes lists. (Yay, lists!)
Imagine you have such a document about yourself, and then you join a new team, and everyone has one about themself, too. You all share some Readme links, and off you go!
Wouldn't this be fabulous? You'd know what people like for fun, how they want to receive feedback, when they'll be available and what you should avoid doing because it triggers them.
Here's another example from Sascha as Miro board.
When I was leading a team, I had such a document for me as a first-time manager and "forced" everyone to create one, too. I think the Readmes helped us and want to believe that they were well received.
I'm working for myself again, but I think my Readme should be online. Should /readme be another Slashpage movement? What do you think?
Blacksmith helps companies run their GitHub Actions up to twice as fast by running CI on modern gaming CPUs instead of GitHub's decade-old server hardware. It's a one-line code change to integrate Blacksmith and takes <5 mins. 50+ companies use Blacksmith, including Slope, Muzz, Gitbook, and Fieldguide.
Web Weekly is open for sponsorships. When you want to reach 5k developers, you know what to do!
- Always interesting: the results of the State of JS are out.
- TIL — if you're looking for animated Emojis, Google has you covered.
- Lynn's "a single div" project is ten years old.
How often does the code above trigger a rerender, and what value will count have at the end? It's a trick question, but our friends at ui.dev shared a fantastic interactive guide on React rendering. It's very good, trust me!
Here's a quick list of attributes to slap onto your input elements to improve UX. But be careful: autocapitalize is a tricky one. If you set it incorrectly, you'll drive me nuts.
Last week, I shared Geoff's notes on the recent CSS specs for "inline ifs". Now Lea, the spec proposer, shared her thoughts and explains why if() or media() might be a good idea in CSS.
Disclaimer: All this is still very far away from being implemented anywhere.
How fast is the internet connection on the South Pole? Surprise, surprise — it's anything but fast. It's barely working slow.
This post describes extreme conditions but still shows how we fail to build a web for everyone and how some small UX improvements can go a long way.
Wowza! Would you enjoy getting Web Weekly straight to your inbox?
I remember how much time I spent with drawing apps when I was little. I could sit for hours pressing buttons to see what they would put on the screen.
If you did the same, turn on sound and relive your childhood.
One day, I'll move my dotfiles over to a bare git repo because this approach is just too clean for managing config files.
With Silicon Valley sucking in all the "free" content, people slowly start to fight back. By now, it's obvious that defining a robots.txt or ai.txt won't prevent AI companies from slurping in all the juicy words. Why should they stop?
Going the extra mile and trying to block AI bots based on their user agent may help. However, this approach assumes that the crawlers set an honest user agent. Why should they tell you about who they are?
What's left to do, then? You could add invisble but machine-readable instructions, and trick the LLMs into doing something else.
And here's Eric considering something similar.
Sadly, we have reached this last resort of content defense and are now starting to "watermark" and obfuscate our words. We're burning tons of energy for… I don't know what.
On my end, I can only say that I'm giving up. I keep blogging and won't spend any effort to stop AI bots. It's an uphill battle that I won't win. But I went all legal and stuff and put a proper content license on my blog this week. Will this prevent anyone from taking my content? Nope. But at least it's now written on my blog that the content ain't free for all.
Creating an animation or transition isn't hard these days. CSS has you covered. But what makes an animation good? When is a transition well done?
Emil says that great animations feel natural and fast, and they're interruptable and accessible. Word! His post is packed with lots of eye candy to level up your animation game!
This is wild! What you see above is Temani creating yet another CSS-only magic trick. It's Chromium only because it relies on @property, anchor-positioning and scroll-driven animations, but it once again shows what a powerhouse CSS has become.
![const arr = \[1, 2, 3, 4, 5\]; console.log(arr.with(2, 6)); // \[1, 2, 6, 4, 5\] console.log(arr); // \[1, 2, 3, 4, 5\]](https://images.ctfassets.net/f20lfrunubsq/594NdsoZBihZSrf7JG4Gri/702c6e9ea1f251ca29cec6530d0d35b5/Screenshot_2024-06-23_at_19.17.16.png)
From the unlimited MDN knowledge archive...
Did you know there's a cross-browser-supported way to change arrays in an immutable way? Now you do!
Do you use oklch() in CSS? If not, it's perfect for color palettes because when you rotate the color angle, it tries to keep the color's lightness.
Find more short web development learnings in my "Today I learned" section.
Firefox 128 ships in 9 days and includes the new relative color syntax. Chromium and Webkit have already supported it for a while.
In a nutshell, you can now use the from keyword to destructure color parts (think of hue, saturation and lightness for hsl()) and do some fancy math with them. This will be perfect for creating color palettes and variations.
If you want to learn more, here's the MDN page for relative colors. And if you still need more, Adam published a massive explainer on the Chrome developers blog.
- jesseduffield/lazygit – A simple terminal UI for git commands.
- ascorbic/cdn-cache-control – An opinionated CDN cache header handling library.
- jordanbaird/Ice – A powerful menu bar manager for macOS.
If you're looking for some hand-drawn SVG beauty, there's a high chance you'll find it here.
Find more single-purpose online tools on tiny-helpers.dev.
I use AI. I write my code with Copilot and use ChatGPT to summarize text. But I don't trust any output because there's always the chance that AI isn't so intelligent after all.
I'm not scared it'll take my job anytime soon. Does it take the busy work off my plate? Sure, and it does this very well. But for anything that needs logic, talent or some logical thinking, I'm 100% with Andrew's take on writing.
The people who are most confident AI can replace writers are the ones who think writing is typing.
💙 If so, give back and support me with a small monthly donation. You can't imagine how much these small gestures fill my motication tank.
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! 👋
Yes? Cool! You might want to check out the email version. The last edition went out 3 days ago.
Frontend nerd with over ten years of experience, freelance dev, "Today I Learned" blogger, conference speaker, and Open Source maintainer.