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.

Happy Monday Tuesday, party people!

You might have noticed that Web Weekly's a day late. I was busy yesterday (more on that later) and life's exciting. I hope you're alright yourself!

This time Web Weekly includes:

  • the flatMap array method
  • smart CSS tricks
  • software development principles, theories and laws

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

On a personal note

Window view looking at the Berlin TV tower

This week started super moving (literally)! Firstly, I was reminded of a game I used to play when I was little, but more importantly, I received the keys to my new apartment. It's been a long and draining process of over a year, but now it's finally time to move. And I can't wait!

Something that made me smile

Comic in which a designer hands a "SVG" to a developer.

I love SVGs. They're vector-based, nicely nerdy and powerful. But how often did you work with clean and well-structured SVGs? Max Böck shared a prime example of what can go wrong when working with SVGs.

A JavaScript one-liner to filter and map array values

JavaScript: [-3, -1, 1, 3, 5]   .flatMap((num) => (num >= 0 ? [num * 2] : []));    // -> [2, 6, 10]

Dmitri Pavlutin wrote a post about the Array method flatMap, and I have to admit that I haven't used it before. It turns out that you can use it to manipulate and filter arrays in one go.

I love one-liners, but they have to be readable, too. It's probably better to stick with filter/map combinations in this case, but it's good to know that the method exists.

Learn more about flatMap

The internet's on fire (again)

The developer of these libraries intentionally introduced an infinite loop that bricked thousands of projects that depend on 'colors' and 'faker.'

And here we are again: an open-source maintainer intentionally released broken versions of their packages (colors and faker). The topic of open source maintenance, burned-out maintainers, and sustainable software development won't disappear, and I hope we'll sort it out eventually...

Find out what happened

Prettify your terminal

Terminal ll command showing all included files and directories with matching icons.

Thanks to Mike Cordell's blog post on terminal aesthetics, I learned that the command line tool exa supports icons! If a beautiful terminal is your thing, this post is for you.

Pimp your terminal

A very smart CSS-trick

Adam Argyle’s Sick Mouse-Out CSS Hover Effect

Geoff Graham shared a new-to-me way to create background CSS animations. It's super smart! The CSS trick enables a background that transitions in from one side and leaves on another. 😲

Animate your backgrounds

Enjoy worldwide radio

Radio garden playing a station from London

Last week I listened to a random radio station from Chicago an entire day. How? Radio Garden is a website that lets you tune it to radio stations from all around the world. I love discovering new music, and even though I shared the site previously, here we are again.

Enjoy the music!

Turn on the radio

What will Future You think?

Future You '22 is about remembering your future self. It’s about taking into account tomorrow’s feelings when you make today’s decisions. It means thinking longer term and making the sacrifices necessary so your future self can merit the benefits.

How are your 2022 resolutions going? I'm no fan of doing everything better just because we entered a new year. Instead, I'm trying to adopt the mindset of thinking long-term. How will I feel about a decision that I take today in a month from now? What will my future self think?

Trevor McKendrick published a valuable post on the topic. I loved it!

Consider Future You

Hacker laws

hacker laws – Laws, Theories, Principles and Patterns that developers will find useful.

There's Cunningham's law, Murphy's law, the Dunning-Kruger effect, the Two-Pizza rule and many more theories in software development. Dave Kerr collects and explains them all on GitHub.

Learn about all the laws

Internationalisation in CSS

Internationalisation is the design and development of a product, application or document that enables easy localisation for target audiences that vary in culture, region, or language.

I don't work on sites in multiple languages, but I'd give Chen Hui Jing's post on CSS internationalization a read if I had to. It includes many CSS gems ranging from the :lang() pseudo-class to the text-emphasis CSS property. Great read!

Properly internationalize your sites

How to be busy

Busy simulator – Feign importance with repeating app sounds!

I love the randomness of the "Busy simulator". The site repeatedly plays notification sounds, and even though it triggers immediate anxiety, I love finding such things on the web.

Be busy

TIL recap: box-decoration-break controls how to render fragments across line breaks

Paragraph including a styled link. The styles of the link are "cut off".

Did you ever style links only to find out that the styles are cut off when the element is spread over two lines? Two years ago, I learned that box-decoration-break can help out there.

Style across line breaks

Three valuable projects to have a look at

A new Tiny Helper

Screenshot of the gradient generator PolyChroma.

If you're creating CSS gradients, there's a high chance that you're passing the "grey zone". This greyish color area can appear when transitioning from one color to another one. Polychroma is a quick-to-use app to avoid it.

Create beautiful CSS gradients

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

A quote to think about

I'm reading Gumroad's founder Sahil Lavingia's book Minimalist Entrepreneur right now, and I enjoy the included examples a lot. Sahil shares stories and advice on building sustainable businesses without VC money, unlimited scaling and hyper-growth.

If you build a product to solve your own problem, you will have at least one user – more than most startups ever get.

A song that makes you stop coding

Band in a room playing. Blur – Song 2.

Blur's Song 2 passed me this week, and there's nothing else to say than "wooooohoooooo"!

Listen to "Song 2"

Thank you for reading!

And that's a wrap for the fifty-second Web Weekly! If you enjoy my newsletter, I'd love you to tell others about it. ♥️

If you're not a subscriber, you can change that! 😉

Stay safe, and I'll talk to you next week! 🎉 👋

If you enjoyed this article...

Join 5.3k readers and learn something new every week with Web Weekly.

Web Weekly — Your friendly Web Dev newsletter
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