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

Welcome to Web Weekly 14

And a special hello to all the new subscribers. ๐Ÿ‘‹ Over 50 people signed up for this newsletter this week, and I made it to over 900 subscribers. ๐Ÿ˜ฒ

That's unbelievable. Thank you all for being around! ๐Ÿ’™

Do you remember when I shared that I'll give the Moonlander keyboard a try? What shall I say? I failed badly, but... I'm not giving up and follow Salma's recommendation of using a Mistel Barocco MD770 RGB.

Split keyboard on my desk

This keyboard's layout is closer to the standard Mac one, it feels good, and I'm still able to type straight sentences. It'll work!

But enough about keyboards! This week's Web Weekly includes...

  • An article that made me reflect on situations in which I only complain
  • A JavaScript Array method that I haven't seen before
  • Ways to exploit setTimeout and setInterval for XSS (cross-site scripting)

... and, as always, GitHub repositories, new Tiny Helpers and some music.

Sounds good? Let's jump in!

Commenting vs making

I gained a lot of appreciation for people who make things, and lost a lot of tolerance for people who only pontificate.1 I found myself especially frustrated with my past self, whose default was to complain and/or comment, then wonder why things didnโ€™t magically get better.2

The following post really made me reflect on my behaviour. The post "Commenting vs making" describes the ease of complaining without doing anything.

How often did (and do) I simply complain about things without having the bigger picture in mind? How often do I just annoy someone else without helping out? It turns out, too often!

Start making, stop complaining

TIL โ€“ the JavaScript array method copyWithin

Source code: const array1 = ['a', 'b', 'c', 'd', 'e'];  // copy to index 0 the element at index 3 console.log(array1.copyWithin(0, 3, 4)); // expected output: Array ["d", "b", "c", "d", "e"]

Short and sweet: I learned that JavaScript Arrays have a copyWithin method. ๐Ÿ˜ฒ

Learn more about copyWithin

A beautiful newsletter about SVGs

viewBox โ€“ Your window into the magical world of SVG

The ViewBox newsletter sent by Cassie Evans and Louis Hoebregts is an excellent resource if you want to learn more about SVGs. I loved the last edition about SVG patterns.

Subscribe to the ViewBox newsletter

The problem of "being nice"

The be-nice-or-be-quiet mentality is one of the most destructive forces I've ever seen in both personal and professional settings. I've watched multiple friendships, relationships, and companies implode because everyone was so focused on being nice that they forgot to be kind.

Jason Lengstorf shares his experience with people being nice and compares it to people being kind. There's a difference between the two adjectives, and his article includes valuable advice on how to interact with friends, colleagues and family in the best possible way.

Read about the problem of being nice

Topframe โ€“ A local webpage screen overlay

Topframe screenshot showing HTML overlays on the mac os desktop

I haven't had the time to play around with Topframe but, it looks very cool. Topframe allows you to set up screen overlays using web technologies. And the best part: it's not using heavy Electron technology.

Check out Topframe

Words you should avoid in technical writing

Example: Now that the child elements are floated, obviously the element will collapse and we'll have to deal with that.

Technical writing is very challenging. It's especially tough to make you're writing inclusive and keep it beginner-friendly (which you should ๐Ÿ˜‰). Chris Coyier's post from 2014 shares words to avoid when blogging or documenting open source.

Clean up your technical writing

Random but valuable things for your home

I'm in buying mood. What's the best thing to get for your home that the most people don't think of?

I try to limit the number of useless things I buy for my apartment. The following Twitter thread didn't help with this, but there's some good and funny stuff in this list.

Find out about things you didn't know you need

TIL: How to style the select button of file inputs

Visualisation explaining that you can style the "browse" button of file inputs.

This week I learned that you can style the "browse" button of file inputs using the ::file-selector-button pseudo-element. I love the web platform for these tiny features!

Learn about ::file-selector-button

I โ™ฅ๏ธ reading about setups

How I've improve my remote presentation setup

Giving remote talks is tough. You don't get audience feedback, you can't make eye contact, you're just standing alone in a room talking to your computer. It's an entirely different experience. Lara Hogan shared her remote presentation setup, and there are good tips in this article.

Read more about Lara's setup

If you document your setup on a /uses page on your blog, please share it with me. I love reading these posts (here's mine)

TIL โ€“ setTimeout and setInterval are potential attack vectors

Source code: setTimeout(`   console.log('hello world');   const someVariable = 'some variable'; `, 1000);

I discovered another fascinating JavaScript fact this week. Did you know that setInterval and setTimeout accept source code strings as a first argument? This feature means that your JavaScript code could be exploited when using these methods with variables. Good to know!

Read the docs about setInterval

Shall I YouTube?

YouTube video - top-level await in Node.js

I play with the idea to post "Today I learned" posts on my blog and also publish the learnings on YouTube. I gave it a first try with the learning "top-level await in Node.js". What do you think?

Watch top-level await in Node.js

๐Ÿ’™ Shout outs โ€“ Thank you for doing this!

How I stay up to date from Johannes Scharlach

Johannes Scharlach published a great list of resources that he uses to stay up to date. He included my little newsletter. Thank you so much, Johannes!

Learn about resources to stay up to date

A new Tiny Helper

Screenshot of the Gradient Generator Tool

When creating CSS gradients, the result often includes an area that looks very "greyish". Use this gradient generator to create gradients that look sharp and beautiful!

Create beautiful gradients

Three useful projects to have a look at

A quote to think about

I agree 100% with Ali Spittel's quote of this week. Creating content helps to improve your writing and often forces you to dive deeper into a technical topic.

Even if nobody reads your content, someone still benefitted from it: you.

A song that makes you stop coding

Cover: Boys Noize "My moon my man"

I included Feist in a previous newsletter. ๐Ÿ™ˆ This week I listened to Boys Noize's epic "My moon my man" remix. It's a noisy but very slow electro and melodic track that gives me goosebumps every single time I listen to it!

Listen to the remixed "My Moon my man"

And that's a wrap for the fourteenth Web Weekly! ๐ŸŽ‰

Writing this newsletter takes me three hours every week. If you enjoyed it, a quick share means the world to me. โ™ฅ๏ธ

Stay safe, and I'll talk to you next week! ๐ŸŽ‰ ๐Ÿ‘‹

PS. I heard the cool kids use RSS. You can find multiple feeds on my site.

Was this post interesting?
Yes? Cool! You might want to check out the email version. The last edition went out 4 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