🧢 Stefan's Web Weekly #23
Tags: webdev
Published: 2021-06-14 06:26:59

---
title: 🧢 Stefan's Web Weekly #23
published: true
description: Import assertions in JavaScript, free Image tools and flexbox tips. 
tags: webdev
canonical_url: https://www.stefanjudis.com/blog/web-weekly-23/
//cover_image: https://direct_url_to_image.jpg
---

## Welcome to Web Weekly #23!

Howdy friends! That was a busy week, wasn't it? It started strong with half of the internet going down. Luckily, these situations are rare, but I can't imagine the pressure of working on a bug or misconfiguration that affects Reddit, Twitter, and large parts of the internet. 😲

On the bright side of things: [I added a new character to my 404 page](https://twitter.com/stefanjudis/status/1404112069889306626), ran a new 10km best time, and even made it to book a vaccination appointment. So it's been a good week. 

Before we get to web stuff, look at this cuteness overload! Did you ever wonder how a running duck sounds on different surfaces? Neither did I, but [this video will show you](https://twitter.com/CarolSaysThings/status/1403254936830451712), and it's adorable!

![A duck running on concrete](https://images.ctfassets.net/f20lfrunubsq/4UrrZYpGp4OEEReo9AN0iO/20bf4f78e0c431d246736d43d2016567/Screen_Shot_2021-06-13_at_23.02.20.png)

This week's Web Weekly includes:

- Import assertions in JavaScript
- Image tools (online and in VS Code)
- Flexbox tips

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

Ready? Steady. Go!

## Import assertions in JavaScript

![The motivating use case for import assertions was importing JSON data as a module. That looks as follows (and is further specified in a separate proposal):  import config from './data/config.json' assert { type: 'json' };](https://images.ctfassets.net/f20lfrunubsq/5MT5pXbFpKLu7BgFkHm0jv/dd5c397a904d485f0f3e4c0a3ffeac1d/Screen_Shot_2021-06-13_at_23.31.05.png)

Last week I shared that [JSON modules landed in Chrome](https://www.stefanjudis.com/snippets/how-to-import-json-files-in-es-modules/). However, to load JSON files using `import`, you have to use the `assert` keyword. I haven't seen this one before and, of course, Axel Rauschmayer already covered the feature on his blog in January. 🙈

👉 <a class="btn btn__small" href="https://2ality.com/2021/01/import-assertions.html">Learn more about "assert"</a>

## If you want to stay up-to-date with all new things JavaScript

![ES.next news News – The latest in JavaScript and cross-platform tools](https://images.ctfassets.net/f20lfrunubsq/7kPeTh5PVfezFuffUMcpHf/e52ae67fb7d21dc2af070f0dea494f6f/Screen_Shot_2021-06-13_at_23.37.44.png)

Speaking of cutting-edge JavaScript, Axel also runs a weekly newsletter with Johannes Weber that includes five links to new JavaScript things. If you want to be aware of all the new stuff, this newsletter is a treasure.

👉 <a class="btn btn__small" href="http://esnextnews.com/">Check out ES.next news</a>

## A "senior" title is more than just coding skills

![An incomplete list of skills senior engineers need, beyond coding – For varying levels of seniority, from senior, to staff, and beyond.](https://images.ctfassets.net/f20lfrunubsq/4agmvVzgHYH7lrNpmfEl9e/d20e5c8d262ff84350f4668e316fdc8f/Screen_Shot_2021-06-12_at_09.05.25.png)

[Camille Fournier](https://www.camilletalk.com/), the author of "Manager's Path", shared an extensive list of skills and qualities a senior engineer should have. It's a great reminder that "senior" means more than a lot of experience in writing code.

👉 <a class="btn btn__small" href="https://skamille.medium.com/an-incomplete-list-of-skills-senior-engineers-need-beyond-coding-8ed4a521b29f">Level up your non-coding skills</a>

## The new Safari is on its way, and here's what you need to know

![Jen Simmons next to a red iMac](https://images.ctfassets.net/f20lfrunubsq/273Yte7HoAefhhTnmT1Aec/0c7d5e24bc08aa3c9227535352cc51e0/Screen_Shot_2021-06-13_at_22.01.54.png)

Apple's worldwide developer conference (WWDC) took place last Monday. I don't pay much attention to these events, but there were some interesting Safari announcements. Jen Simmons summarized all the new Safari features (`aspect-ratio`, `theme-color`, and more) in a 30min video.

👉 <a class="btn btn__small" href="https://developer.apple.com/videos/play/wwdc2021/10029/">Learn what's coming to Safari</a>

*If you wonder if the new Safari finally fixes the well-known and surprising `100vh` behavior, [Luke Channings tested the new Safari right away and shared his findings](https://lukechannings.com/blog/2021-06-09-does-safari-15-fix-the-vh-bug/).*

## Three Frontend Auditing Tools I Discovered Recently

![Use The Best Tools To Build The Best Websites. As you’ve seen, the tooling landscape includes many valuable tools. And while some of the tools scan for a wide range of issues, there’s no tool covering everything. The usual mantra applies: “Use the right tool for the job.”](https://images.ctfassets.net/f20lfrunubsq/2uhZXZq2WSkAFcpLUY1he0/49be441e99025c15b56becea9bf96198/Screen_Shot_2021-06-13_at_22.16.48.png)

I published a short article on Smashing Magazine this week. 😲😊 It lists three tools that help you identify issues in your websites.

👉 <a class="btn btn__small" href="https://www.smashingmagazine.com/2021/06/three-frontend-auditing-tools/">Add more tools to your frontend toolbelt</a>

## How to make yourself replaceable

![A good philosophy to live by at work is to “always be quitting”. No, don’t be constantly thinking of leaving your job 😱. But act as if you might leave on short notice 😎. Counterintuitively, this will make you a better engineer and open up growth opportunities.](https://images.ctfassets.net/f20lfrunubsq/5EWWFiq4Ij2wmm1a6iGBhE/9c1fa0ded02f966acd6330c3b9285b6c/Screen_Shot_2021-06-12_at_12.33.18.png)

Julio Merino, Principal Software Engineer at Microsoft, shared that he approaches work like he'd be always quitting the next day. This behavior leads to more documentation, more knowledge transfer, and more collaboration. It sounds extreme, but I like the approach!

👉 <a class="btn btn__small" href="https://jmmv.dev/2021/04/always-be-quitting.html">Behave like it's your last day</a>

## A "safer" way to center elements with flexbox

![don't do this  Code: `<div class="modal">   <div class="modal__main"></div> </div>` ` .modal {   display: flex;   justify-content: center;   align-items: center; }`](https://images.ctfassets.net/f20lfrunubsq/4fTqMGN8kjuKYzVcwRI2x4/f7f6c272fd96557aa3808bebaf0c7218/Screen_Shot_2021-06-14_at_00.16.54.png)

Stas Melnikov shared three flexbox tips and I learned that my usual way of centering elements (`display: flex; justify-content: center; align-items: center;`) has a drawback. Stas advises to use `margin-auto` instead. 

👉 <a class="btn btn__small" href="https://dev.to/melnik909/my-3-tips-about-flexbox-that-will-make-your-css-better-50g6">Read the flexbox tips</a>

## Be careful with the free tools you use

![I was actually using an HTML cleaner (html-online.com/editor/) since last year, which was working fine as intended in the initial months but a few weeks back I realised that the tool has suddenly started secretly injecting links to the HTML content.](https://images.ctfassets.net/f20lfrunubsq/T5tmqHtC5wK7NcL2hZO80/be4a95c6e3f9ab5819001fe7832f7f35/Screen_Shot_2021-06-12_at_13.01.35.png)

This story is wild! If you're using free online HTML tools, make sure to check their output before pasting it somewhere. Caspar van Wrede found out that some HTML tools inject links to other sites. Why? Great question; to increase the number of sites linking to a particular site.

👉 <a class="btn btn__small" href="https://casparwre.de/blog/seo-scam/">Read the SEO scam</a>

## A free Photoshop in the cloud

![Photopea with file format icons psd, ai, xd, sketch, pdf, xcf, raw and any](https://images.ctfassets.net/f20lfrunubsq/3sGX8hnLIxf9JScb6qj0ZX/760e735c47dbda45b38f46778cda3503/image.psd.jpg)

Whenever I need to edit, crop, or manipulate photos, I use [photopea.com](https://www.photopea.com/). Photopea is a Photoshop alternative that runs entirely in your browser. And I always thought it's a super tiny project, but this week [I read a Reddit AMA about the project](https://www.reddit.com/r/IAmA/comments/i8j5te/i_made_a_free_alternative_to_photoshop_that_is/) and learned that the project had 7 million visitors in July 2020 alone (it's most likely much more now). 

A single person from the Czech Republic maintains it. __I love it when developers are successful with their side projects!__

👉 <a class="btn btn__small" href="https://www.photopea.com/">Try Photopea</a>

## Image operations in VS Code 

![Luna interface in VSCode](https://images.ctfassets.net/f20lfrunubsq/uF3AxFjlQlnsBbVEcvS1f/0b1f7ee84fd05fa5b4eb4ec83c749c29/Screen_Shot_2021-06-14_at_06.38.38.png)

Speaking of image manipulations, "Luna Paint" is a VS Code extension to resize, crop and paint images. I played with it a few minutes and it looks exactly like the tool I want/need in VS Code!

👉 <a class="btn btn__small" href="https://marketplace.visualstudio.com/items?itemName=Tyriar.luna-paint">Manipulate images in Code</a>

## Reader shout out 💙

![How do you stay up to date with the latest developments in tech?](https://images.ctfassets.net/f20lfrunubsq/2XLrFDQF2c1Ts2OFhP98BX/3f7c5b3176e02942169a822f3b5639fe/Screen_Shot_2021-06-14_at_00.23.04.png)

Josefine Schfr kicked off a discussion on dev.to. She asked for resources that help to stay up to date with web development, and she recommended Web Weekly. 😊 The post sparked a great conversation on ways to stay up to date, too!

Thank you so much, Josefine! And thank you all for reading along. 💙

👉 <a class="btn btn__small" href="https://dev.to/s2engineers/how-do-you-stay-up-to-date-with-the-latest-developments-in-tech-3a0d">Join the discussion</a>

## Three valuable projects to have a look at 

- [microsoft/vscode-remote-repositories-github](https://github.com/microsoft/vscode-remote-repositories-github) – Quickly browse, search, edit, and commit to any GitHub repository directly from within Visual Studio Code. 
- [julesforrest/womenwhodesign](https://github.com/julesforrest/womenwhodesign) –  A Twitter directory of accomplished women in the design industry,
- [MIDIBlocks/handsfree](https://github.com/MIDIBlocks/handsfree) – Quickly integrate face, hand, and/or pose tracking to your frontend projects in a snap.

## A new Tiny Helper

![ Compress Image Online: Compress JPG and PNG images at light speed with Browser based Image compressor. Private, Works Offline, No Limits, 0 carbon emission.](https://images.ctfassets.net/f20lfrunubsq/6nfMORK8yERUvZ9L6fUDWj/8ce8ac6be9470802291c8d089d2576a5/Screen_Shot_2021-06-13_at_22.54.20.png)

Compression plays a substantial role in image file size. If you're looking for an easy-to-use tool to compress your images, this one is for you.

👉 <a class="btn btn__small" href="https://compressimage.io">Compress your images</a>

## A quote to think about

I listened to diversity, equity & inclusion leader [Sheree Atcheson](https://www.shereeatcheson.com/) this week. In [a conversation with Suzan Bond, she said this week's quote](https://www.youtube.com/watch?v=pc2u9T9KuzE&t=1259s). 

> One of the biggest privileges is being listened to.

I keep thinking about it, and there's a whole lot of truth in this sentence.

## A song that makes you stop coding

![Rufus Martin singing](https://images.ctfassets.net/f20lfrunubsq/6EJXy9Q26Wo1lsxWWNzFxi/dcf88a0d0efbc8b813756f2a238246fe/Screen_Shot_2021-06-13_at_22.35.22.png)

This week's song is a cover song of Paul Kalkbrenner's "Sky and Sand". And wow – the song comes with a beautiful piano, an orchestra, an incredible voice, and it is even danceable (sort of). 

This cover did not only made me stop writing this newsletter, but I got up, turned up the volume, and enjoyed this song in its full glory standing in my living room.

👉 <a class="btn btn__small" href="https://www.youtube.com/watch?v=Hnyn33UDVDA">Listen to this "Sky and Sand" cover</a>

## Thank you for reading!

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

- [Share it on Twitter](https://twitter.com/intent/tweet?text=I%20like%20@stefanjudis%20weekly%20newsletter%20because%20...&url=https://www.stefanjudis.com/blog/web-weekly-23/).
- Forward it to someone who might like it.

If you're not a subscriber, [you can change that](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/).