Published at
Updated at
Reading time
7min
The Web Weekly newsletter keeps you up to date, teaches you web development tricks and covers all things working in tech.

Howdy ho, friends!

Let's talk about a never-ending programming argument: TABS vs. SPACES. I know, I know... but hear me out! πŸ˜‰

I don't care too much about it because wrangling code into whatever coding convention is an editor's job. Prettier for the win!

But I've always been in "the space camp" for my projects. It's my code, and I make the rules, right?

This week I took a big step, moved camps and changed my first repo to be tabs-first!

I've been a "spaces" guy for forever but today's the day: I'm switching to tabs. 😲  βœ… Better for accessibility βœ… Takes less disk space  Now I only have to get used to all these arrows. πŸ˜…

So, what changed my opinion?

The Prettier maintainers consider moving to tabs with their next major release because it saves bytes and is more flexible. Let's dive into these points.

I converted all JS files (including all node_modules) of my blog's code base to tabs and saved a whooping 11MB on my hard drive. So, this is a weak argument at best.

But off to the second argument: code with tabs is not only more flexible, but it is also more accessible to blind programmers using braille displays. Things should be as accessible as possible, so that's enough to convince me; I'm sold!

What do you think? Will you pack your stuff and move camps, too?

And with this, today you'll learn about:

  • The kbd HTML element
  • New CSS layout tricks
  • Chrome's new performance panel

... and, as always, GitHub repositories, a new Tiny Helper and some music.

Lastly, welcome to the 44 new subscribers! I'm super excited to have you around! πŸ‘‹

Something that made me smile this week

Tweet showing a man about to go down some stairs.

I spent way too much time watching the videos on this Twitter account sharing CCTV footage.

New CSS layout capabilities

A list of container-relative units

Michelle Barker, who you might know from her blog "CSS { In Real Life }", gave a massive rundown on all modern and upcoming CSS features. Flex, grid, container queries, subgrid, you name it!

Find out what's coming

Git tip: force pushing without a -f flag

Source code: git push --force origin main, git push -f origin main, git push origin +main

If you use Git force pushing, you may want to save some characters and use the +branch-name pattern.

But be careful! If you work with others on a project, you might want to prefer pushing with --force-with-lease over normal force pushing.

Mathias' dotfiles

πŸ”§ .files, including ~/.macos β€” sensible hacker defaults for macOS

Mathias Bynens dotfiles crossed my path once again, and they're such a treasure trove. I learned how to configure the hot corners on my computer programmatically.

If you want to get started with dotfiles, this repo is more than a solid foundation.

Invest in dotfiles

webplatform.news is back

"webplatform news" headline made of HTML elements

It was a little quiet around Ε ime Vidas' project webplatform.news, but it's back! The site got a refresh, and Ε ime was already busy posting.

If you care about the web platform, the included RSS feed is worth subscribing. I'm a huge fan!

Rock the platform

Big names living in your area

A map showing multiple names of notable people.

Do you know if notable people lived or were born in your hometown? If you want to find out, Topi Tjukanov's project helps out.

Explore some areas

Chrome's new performance panel

The new Chrome performance panel.

Whenever I open Chrome's performance panel, I'm a little overwhelmed. Luckily, the Chrome folks are working on a new experimental performance panel. I played around with it, and it's already an improvement. πŸ’―

Measure performance

Emoji wallpaper

An wallpaper built of basecaps and the πŸ™ˆ emoji.

Disclaimer: the following site will make your computer fly, but I had a lot of fun generating Emoji wallpapers. It's worth it!

Have fun with Emojis

Emoji text wrap oddities

Two boxes showing the πŸ’© emojis are text wrapped whereas ⚠️ is not.

Speaking of Emojis, do you know that the πŸ’© Emoji gets text-wrapped whereas the ⚠️ is not? Bramus tells you why!

Get into Emoji details

Random MDN – the kbd element

kbd: The Keyboard Input element β€” The kbd HTML element represents a span of inline text denoting textual user input from a keyboard, voice input, or any other text entry device. By convention, the user agent defaults to rendering the contents of a kbd element using its default monospace font, although this is not mandated by the HTML standard.

From the unlimited knowledge archive called MDN...

Have you used the kbd HTML element already? No? Maybe it's time. πŸ˜‰

Use kbd

TIL recap – . doesn't match every character in regular expressions

/a.b/.test('a\nb');     // false /a.b/.test('a\rb');     // false /a.b/.test('a\u2028b'); // false /a.b/.test('a\u2029b'); // false

I've always thought that the . in regular expressions matches any character. That's not true, though. Learn more about it on the blog.

Match everything

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

Three valuable projects to have a look at

A new Tiny Helper

TEMPMAIL - Your Temporary Email Address

If you're looking for a quick way to generate temporary email addresses, TEMPMAIL's for you.

Create your throw-away email address

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

Thought of the week

I agree with Peter van Grieken's hot take of the week. 🌢️

If you don’t know HTML, you shouldn't use ARIA.

A song that makes you stop coding

Mojjo, Meca, LUISAH - Love The Way

We're melting under a massive heat wave here in Germany. In this spirit: here's a funky house track that couldn't sound more like summer.

Listen to "Love the way"

And this is all, friends!

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

Or tell others about it:

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

And with that, take care of yourselves, friends - 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 13 days ago.
Stefan standing in the park in front of a green background

About Stefan Judis

Frontend nerd with over ten years of experience, freelance dev, "Today I Learned" blogger, conference speaker, and Open Source maintainer.

Related Topics

Related Articles