Artboard 16light, inspiration, solution, idea, innovation,ionicons-v5_logosGoogle Sheets iconSwift icon
Published at
Updated at
Reading time
8min
The Web Weekly newsletter keeps you up to date, teaches you web development tricks and covers all things working in tech.

Guten Tag!

Have you ever used custom elements without JavaScript? Or do you know that there's an SVG view element? Or that you can use the caption-side CSS property with HTML tables?

All the answers and much more are included in this week's Web Weekly. πŸ™ˆ Enjoy!

Thought of the week

Engineer showing printed out source code wishing a happy friday

I didn't think it would happen, but Elon has taken over Twitter. I can't imagine what happens next after his weird sink move, immediately firing execs and making developers print out source code. πŸ€¦β€β™‚οΈ The satire is real by now.

I'm still deciding whether to move off it, but I did check out the Feediverse and created a mastodon.social account.

But isn't this all super complicated? Yeah, I thought the same, but it's honestly not that bad!

My first misbelief was that people could only follow people on the same Mastodon server. This isn't true β€” follow whoever you like across all instances.

Okay, but then, what server should you join? There are many communities with different rules, moderators and goals. The first and biggest instance is mastodon.social. You can't be wrong with going with this one. Sign up, and you're good to go.

Getting started with Mastodon

If you want to learn more, Axel Rauschmayer's post has helped me understand how things work. And if you want to find all your Twitter friends, use Fedifinder.

Starting fresh has been a pleasant experience so far, and after being on Mastadon for a day now, the features and UX feel comparable. And surprisingly, many people are already there! 😲

If you're going to check it out, say hi! πŸ‘‰ @stefanjudis@mastodon.social

Something that made me smile this week

Tweet: Every time you watch,  focus on a different one among the 8 children. HilariousπŸ˜‚

The Tweet says it all... 🀣

Compete with style

The confusing Sec-CH-UA header

Before I spend any energy improving the docs (thanks for the bug, Alex), let me try to give the simplest answer to the question: how do I find out what major version of Chromium a user is on in the year 2022+?

The browser user agent has been a mess since forever. Chrome includes the Sec-CH-UA header and the navigator.userAgentData for a while now to improve things. If you want to learn more about it, Mike Taylor published a quick-to-read guide explaining how to evaluate the running Chrome version.

Inspect the browser version

The number one productivity tip

Text shortcuts: type faster and repeat yourself less

What's the one character combination I type the most? It's ;es. Why? I've set up Raycast to expand this snippet to my email address.

Whether you're using macOS, Windows or Linux, there are plenty of ways to enable text expansion. Janel Loi shared some good expansion snippets to get you started with typing less.

Type less

Write good shell scripts

Example shell script

Shrikant Sharat Kandula's post about shell scripting is one for your bookmarks because I can't be the only one who doesn't remember how to configure proper error handling using set, or?

Write good shell scripts

Git worktrees

$ git worktree list ~/Sites/pawelgrzybek.com            [master] ~/Sites/pawelgrzybek.com-post-one   [pawelgrzybek.com-post-one] ~/Sites/pawelgrzybek.com-post-two   [pawelgrzybek.com-post-two]

We all know the situation; you're working on a feature but need to switch branches. What do you do with all these uncommitted changes then? Adding a terrible WIP commit and rebase later? Stash them?

Pawel Grzybek discovered another solution β€” git worktrees!

Learn more about git worktrees

TIL β€” SVG has a view element

SVG element including a 'view' element

Vadim Makeev started blogging again, and it's so good! In his recent post, he shared ways to create SVG sprites, and I learned about the view element that controls the SVG viewport. πŸ‘

Create SVG sprites

A JS-free custom element

I chose to use a custom element 'tool-tip'. Authors don't need to make custom elements into web components if they don't want to. The browser will treat 'foo-bar' just like a 'div'. You could think of a custom element like a classname with less specificity. There's no JavaScript involved.

Adam Argyle published another UI component challenge, and it's, as always, an excellent read. This time it includes a hot take. Adam describes how to build a tool-tip custom element that works without JavaScript!

Neat! πŸ‘

Build without JS

Why you should use attribute selectors to style components

Styling based on ARIA attributes encourages more accessible markup, and styling based on custom data attributes makes it more robust and readableβ€Šβ€”β€Ša better experience for users and developers alike.

Elise Hein made strong points about using CSS attributes instead of relying on classes. The post is very well written, and I'll keep it in mind when writing my next CSS component!

Match all these attributes in CSS

Designed to be a reference for anyone building component-based user interfaces, The Component Gallery is an up-to-date repository of interface components based on examples from the world of design systems.

Have you ever dreamed of this one resource collecting all the component patterns across design systems? This one place to find out how this world builds modals. Or tabs. Or tooltips!

My friend, your dreams have been heard. 🫣 component.gallery is exactly this. πŸŽ‰

Check all these components

"Your code is too clever!"

Any fool can write code that a computer can understand. Good programmers write code that humans can understand.

Clever code is more often bad than good. James Sinclair shared a story describing how his most beautiful functional code didn't fly well with his coworkers because it was too hard to understand.

Whether we talk about coding, blogging or writing emails, writing is always about the audience. Nobody will ever complain about something being too easy to read and understand.

Write readable code

Random MDN – touch-action

touch-action β€” The touch-action CSS property sets how an element's region can be manipulated by a touchscreen user (for example, by zooming features built into the browser).

From the unlimited knowledge archive called MDN...

Did you know that you can control how DOM elements react to touch actions? Now you do!

Be touched

If you want to learn more about web development, my @randomMDN Twitter bot posts random MDN pages multiple times a day.

TIL recap – caption-side

table {   /* moves the caption to the bottom */   caption-side: bottom; }

HTML Tables should have an accessible name, and to provide it, you should include caption elements (or do some ARIA magic which I'll ignore here). A while ago, I learned that you can use caption-side to control the caption position. 😲

Control your table captions

Find more short web development learnings in my "Today I learned" section.

Three valuable projects to have a look at

A new Tiny Helper

OKLCH Color Picker & Converter with a bunch of graphs and controls

All these different color spaces are still a mystery to me. Sentences such as "RGB can't display this color!" confuse me. I mean, what? If you have good resources on the topic, send them my way!

Nevertheless, I've read this excellent article on oklch, and if you want to play around with the oklch color space, the included converter is excellent!

Convert colors to oklch

Find more single-purpose online tools on tiny-helpers.dev.

Thought of the week

Running the same code on the server and the client is still a magical concept to me. But with all the recent framework releases, it seems that we're inventing complex solutions to problems we only have because of this one idea β€” running the same code everywhere.

It may be time to separate the server and the client again. Remy Sharp's take on the topic is something many people ignore.

There are two JavaScripts. One for the server - where you can go wild. One for the client - that should be thoughtful and careful.

A song that makes you stop coding

Edward Sharpe & The Magnetic Zeros - Home (Official Video)

This week's track is an absolute classic. "Home" from Edward Sharpe & The Magnetic Zeros comes with the perfect chorus line "Home is wherever I'm with you". πŸ’™

Listen to "Home"

This is all, friends!

Writing Web Weekly takes me roughly five hours every week, and I pay real money for sending over 3.1k emails. If you enjoy it, consider supporting me on Patreon. β™₯️

Or tell your friends about it:

If you're not a subscriber, change that! πŸ˜‰

And with that, take care of yourself - mentally, physically, and emotionally. I'll see you next time! πŸ‘‹

Was this post interesting?
Yes? Cool! You might want to check out the email version. The last edition went out 7 days ago.

Related Topics

Related Articles