🧢 Stefan's Web Weekly #14  
Tags: webdev
Published: 2021-04-12 08:20:37

---
title: 🧢 Stefan's Web Weekly #14  
published: true
description: The ease of complaining, the copyWithin JavaScript methods and funny fact about `setInterval` 
tags: webdev
//cover_image: https://direct_url_to_image.jpg
canonical_url: https://www.stefanjudis.com/blog/web-weekly-14/
series: Web Weekly
---

## 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](https://twitter.com/stefanjudis/status/1367101254544064514)? What shall I say? I failed badly, but... I'm not giving up and follow [Salma's recommendation](https://whitep4nth3r.com/uses#mistel-barocco-md770-rgb-bt-with-cherry-mx-red-switches) of using [a Mistel Barocco MD770 RGB](https://amzn.to/3d8LVgD).

![Split keyboard on my desk](https://images.ctfassets.net/f20lfrunubsq/30snTUA7qkJSeYgDaw4ybV/dfac96e87c48145cc5a234da9bebf7e7/Screenshot_2021-04-11_at_18.50.43.png)

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](https://images.ctfassets.net/f20lfrunubsq/5J47eqnCNIgMe5A2OvyG3P/8b58e26c75350884d08b2b99c980ae46/Screenshot_2021-04-11_at_19.09.14.png)

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!

👉 <a class="btn btn__small" href="https://chiefofstuff.substack.com/p/commenting-vs-making">Start making, stop complaining</a>

## 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"]](https://images.ctfassets.net/f20lfrunubsq/5Lwqyir0AjwcUWC2GJLB3b/a35bd51b1a31edd3153756c06b036b88/Screenshot_2021-04-11_at_18.31.10.png)

Short and sweet: I learned that JavaScript Arrays have a `copyWithin` method. 😲

👉 <a class="btn btn__small" href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/copyWithin">Learn more about copyWithin</a>

## A beautiful newsletter about SVGs

![viewBox – Your window into the magical world of SVG](https://images.ctfassets.net/f20lfrunubsq/7qQY5JvhMdZ0ztfpdK7fTU/d3d09308e6889d58624e1cdc396b1f00/Screenshot_2021-04-11_at_18.24.14.png)

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](https://buttondown.email/viewBox/archive/box-9-bunnies-memphis-and-moire/).

👉 <a class="btn btn__small" href="https://buttondown.email/viewBox">Subscribe to the ViewBox newsletter</a>

## 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.](https://images.ctfassets.net/f20lfrunubsq/5A9IMVcOT0V5rVOlAHJdJE/7ec0e5abfce1da12951dc290c346f05b/Screenshot_2021-04-11_at_18.15.42.png)

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.

👉 <a class="btn btn__small" href="https://www.jason.af/be-kind">Read about the problem of being nice</a>

## Topframe – A local webpage screen overlay

![Topframe screenshot showing HTML overlays on the mac os desktop](https://images.ctfassets.net/f20lfrunubsq/7e1wa64p7y0PN3r1G4EP0R/c9235c4b81e81360f5334931e9107faf/Screenshot_2021-04-11_at_19.19.13.png)

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.

👉 <a class="btn btn__small" href="https://github.com/progrium/topframe">Check out Topframe</a>

## 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.](https://images.ctfassets.net/f20lfrunubsq/6fmF7UvuAt2af7sVaFczxF/70fc0893ee41a58670b2963e0fa968a0/Screenshot_2021-04-11_at_18.33.59.png)

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.

👉 <a class="btn btn__small" href="https://css-tricks.com/words-avoid-educational-writing/">Clean up your technical writing</a>

## 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?](https://images.ctfassets.net/f20lfrunubsq/2y0AHkZTMcZm2veyKS8LjJ/8519afbc817e373725a5874104a74414/Screenshot_2021-04-11_at_18.37.15.png)

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. 

👉 <a class="btn btn__small" href="https://twitter.com/csallen/status/1377287415946047492">Find out about things you didn't know you need</a>

## TIL: How to style the select button of file inputs 

![Visualisation explaining that you can style the "browse" button of file inputs.](https://images.ctfassets.net/f20lfrunubsq/4F1meveefCVhrWs500vHXb/87d5fd96eda9832df87b9e1f5687da05/Screenshot_2021-04-11_at_16.48.37.png)

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!

👉 <a class="btn btn__small" href="https://www.stefanjudis.com/today-i-learned/how-to-style-the-select-button-of-file-inputs/">Learn about ::file-selector-button</a>

## I ♥️ reading about setups

![How I've improve my remote presentation setup](https://images.ctfassets.net/f20lfrunubsq/5SDubgH614dT9GbDxGBike/3fc98bafb9851c54a10b859efe7fdc70/Screenshot_2021-04-11_at_18.42.22.png)

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.

👉 <a class="btn btn__small" href="https://larahogan.me/blog/remote-presentation-setup/">Read more about Lara's setup</a>

*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](https://www.stefanjudis.com/uses/))*

## TIL – `setTimeout` and `setInterval` are potential attack vectors

![Source code: setTimeout(`   console.log('hello world');   const someVariable = 'some variable'; `, 1000);](https://images.ctfassets.net/f20lfrunubsq/gyttcccOWNKxe2fD0L7Fw/34441422c54e860113eeb4755a90c69a/Screenshot_2021-04-11_at_19.37.13.png)

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!

👉 <a class="btn btn__small" href="https://developer.mozilla.org/en-US/docs/Web/API/WindowOrWorkerGlobalScope/setInterval">Read the docs about setInterval</a>

## Shall I YouTube?

![YouTube video - top-level await in Node.js](https://images.ctfassets.net/f20lfrunubsq/cuWNlf9BjuX6Cu2rtRM0d/506090deb4dcd6ddab3fe68e39b55d53/Screenshot_2021-04-11_at_20.33.32.png)

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?

👉 <a class="btn btn__small" href="https://www.youtube.com/watch?v=UcrdtZwcsgY">Watch top-level await in Node.js</a>

## 💙 Shout outs – Thank you for doing this!

![How I stay up to date from Johannes Scharlach](https://images.ctfassets.net/f20lfrunubsq/MOPe97tT9JoatQQEW7UMP/98e1f87238952ae3f4ce29b2a4f84baf/Screenshot_2021-04-11_at_19.29.42.png)

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!

👉 <a class="btn btn__small" href="https://dev.to/johannes_scha/how-i-stay-up-to-date-iik">Learn about resources to stay up to date</a>

## A new Tiny Helper

![Screenshot of the Gradient Generator Tool](https://images.ctfassets.net/f20lfrunubsq/5Ylz0ajPBy1AxjyjMNmzjO/33dcc36d9a417bcd2a791e99e128bf63/Screenshot_2021-04-11_at_20.02.45.png)

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!

👉 <a class="btn btn__small" href="https://learnui.design/tools/gradient-generator.html">Create beautiful gradients</a>

## Three useful projects to have a look at 

- [lukejacksonn/servor](https://github.com/lukejacksonn/servor) – A dependency-free file server for single page app development.
- [wfxr/forgit](https://github.com/wfxr/forgit) – A utility tool powered by fzf for using git interactively.
- [watson/awesome-computer-history](https://github.com/watson/awesome-computer-history) – An Awesome List of computer history videos, documentaries and related folklore.

## A quote to think about

I agree 100% with [Ali Spittel's quote of this week](https://twitter.com/ASpittel/status/1360302325718417411). 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"](https://images.ctfassets.net/f20lfrunubsq/38ngVEQZxOslLRR48GQqqM/fd29830a5ce52d7fb58884f88c985b2b/Screenshot_2021-04-11_at_19.46.12.png)

I included Feist in [a previous newsletter](https://www.stefanjudis.com/blog/web-weekly-9/). 🙈 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!

👉 <a class="btn btn__small" href="https://www.youtube.com/watch?v=7M15gNZfK-8">Listen to the remixed "My Moon my man"</a>

---

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](https://twitter.com/intent/tweet?text=I%20like%20@stefanjudis%20weekly%20newsletter&url=https://www.stefanjudis.com/blog/web-weekly-14/) and if you want to receive it in your inbox [you can sign up on my site](https://www.stefanjudis.com/newsletter/). ♥️

**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](https://www.stefanjudis.com/feeds/).