🧢 Stefan's Web Weekly #13 
Tags: webdev
Published: 2021-04-05 11:49:18

---
title: 🧢 Stefan's Web Weekly #13 
published: true
description: Logical CSS properties, Trump's hacked Twitter account and top-level await in Node.js. 
tags: webdev
canonical_url: https://www.stefanjudis.com/blog/web-weekly-13/
//cover_image: https://direct_url_to_image.jpg
series: Web Weekly
---

## Welcome to Web Weekly #13

It's been a week, huh? [Chrome rolls out the Federated Learning of Cohorts trial](https://www.eff.org/deeplinks/2021/03/google-testing-its-controversial-new-ad-targeting-tech-millions-browsers-heres) (ad tracking goes into the browser itself), [Facebook leaked 533 million user records ](https://www.theverge.com/2021/4/4/22366822/facebook-personal-data-533-million-leaks-online-email-phone-numbers) (including email addresses and phone numbers) and [the legendary Space Jam movie site got a refresh](https://www.spacejam.com/) (you can find [the original Space Jam site still there, though](https://www.spacejam.com/1996/). Nevertheless, I hope you had a good week and are safe and sound!

This week's Web Weekly includes...

- Logical CSS properties
- top-level await in Node.js ES modules
- How Trump's Twitter was hacked twice

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

Sounds good? Let's jump in!

## Podcast time: How Trump's Twitter was hacked by the same person twice

![Victor looks for vulnerabilities on the web and reports them responsibly. This is the story about discloser number 5780.](//images.ctfassets.net/f20lfrunubsq/3RpeHuChhvXMFOf9iNENvG/cc83a472469c63bc183f2b8912d0b89a/Screenshot_2021-04-05_at_10.33.16.png)

"Darknet Diaries" is one of my favourite podcasts. The podcast shares "stories about the dark side of the internet". The episodes are engaging and well researched. 

The Episodes 86, 87 and 88 share how [Victor Gevers](https://twitter.com/0xDUDE) hacked Trump's Twitter account twice. 😲 **It is wild!**

👉 <a class="btn btn__small" href="https://darknetdiaries.com/episode/88/">Listen to Darknet Diaries</a>

*If you want to find more great podcasts (and newsletters), [I list my favourites on my site](https://www.stefanjudis.com/staying-up-to-date/).*

## How to build playful 3D buttons

![Demo showing that a 3d button is built with several layers](//images.ctfassets.net/f20lfrunubsq/6O6oIUgMkkq08hdFeHubAV/4ffdd55fdb233bfa215f322c66b4aa61/Screenshot_2021-04-05_at_10.32.05.png)

Josh Comeau continues to amaze me with his tutorials. They include lots of interactive prototypes and explanations. Josh creates impressive high-value materials, and "Building a Magical 3D Button" is no exception.

👉 <a class="btn btn__small" href="https://www.joshwcomeau.com/animation/3d-button/">Build great 3D buttons</a>

## The difference between `innerText` and `textContent`

![The Node.textContent property gets all of the text content, including content inside elements that are not visually rendered on the page. The Element.innerText property returns only rendered text, similar to what a user would be able to select with their cursor or the keyboard when highlighting text.](//images.ctfassets.net/f20lfrunubsq/2fYjgmlfJgaoDw08tRW53G/41a4fc6bfa0960e2f66e396c49292c4d/Screenshot_2021-04-05_at_11.19.20.png)

Did you ever question the functionality of `innerText` and `textContent` in JavaScript? [Chris Ferdinandi](https://twitter.com/ChrisFerdinandi) shared details about the two JavaScript methods. 

👉 <a class="btn btn__small" href="https://gomakethings.com/the-difference-between-the-node.textcontent-and-element.innertext-properties-in-vanilla-js/">Learn more about innerText / textContent</a>

## When 8k requests per second hit your fun site...

![The website received around 50 million views in a 5 day period. That puts it roughly on par with the New York Times, though all the visitors to istheshipstillstuck.com were seeing exactly the same page. At its peak, there were 8,404 requests to the site per second:](//images.ctfassets.net/f20lfrunubsq/20GDqaIRGywNDFnHohIjFj/b77f6587638e144d18c2f097376b393b/Screenshot_2021-04-05_at_10.34.56.png)

I love random internet things and [shared the site istheshipsillstuck.com](https://twitter.com/stefanjudis/status/1376282560498651138). If you followed last week's news, the site's purpose is obvious. It shared information about the stuck ship in the Suez canal. The creator shared the experience of maintaining a website that went viral. It's a great read!

👉 <a class="btn btn__small" href="https://notfunatparties.substack.com/p/inside-a-viral-website">What happens when your site goes viral?</a>

## Chrome offers live captions for videos now

![Chrome's live caption feature shown in the Twitter UI](//images.ctfassets.net/f20lfrunubsq/22NLmLvu3wx2XuNZo3flHD/fda2bc4a9c46f4f852bbf6126e93f99e/Screenshot_2021-04-05_at_10.46.54.png)

It doesn't matter if I bing Netflix or watch YouTube; I always have captions turned on. That doesn't mean that I always read them, but if I didn't understand something (English is not my first language), I could quickly read what's going on.

Chrome released in-browser live captions, and I have to say, it's a great feature! The captions are not 100% accurate all the time, but when I browse Twitter now, I can now follow no matter if the video is muted or provides captions. 🎉 

Accessibility features make the web better for everyone!

👉 <a class="btn btn__small" href="https://blog.google/products/chrome/live-caption-chrome/">Enable live captions</a>

## A smart approach to download GitHub repository without its history

![npm init using small-tech/site-vite-svelte my-site](//images.ctfassets.net/f20lfrunubsq/7uRKrO61bF8X0menhggSOx/444318385eff5aaf6d7ab6ca44c6b4a6/Screenshot_2021-04-03_at_18.48.43.png)

If you're looking for a quick way to download GitHub repositories without the complete git history (or pressing the "Download zip" button), Aral Balkan shared how to use `npm init using`. And while that looks like npm functionality, it's just brilliant usage of the `npm init` command. Happy downloading!

👉 <a class="btn btn__small" href="https://ar.al/2021/04/01/npm-init-using/">Download things from GitHub</a>

## The idea that your startup (or career) will save you

![Feeling loved and welcome: I’d hoped that if I just worked hard enough and the business got big and successful enough, I’d fill the hole of wanting to feel welcome and loved in the world. It was a way to combat the scary loneliness I so desperately didn’t want to experience and feel.](//images.ctfassets.net/f20lfrunubsq/3PWcRSXfysjtzPIK5mtv1Y/65a200b204bc0354570f635e83cb46d2/Screenshot_2021-04-03_at_22.59.15.png)

Leo Widrich (Buffer co-founder) always thought that running a successful company will fix his life. A successful career helps feeling loved, having friends and being healthy, right? 

Wrong. While I'm not a running company, I see many parallels to my life in this article.

👉 <a class="btn btn__small" href="https://leowid.com/my-biggest-startup-mistake-thinking-it-would-save-me/">Read Leo's story</a>

## TIL: Top-level await works in Node.js modules

![Source code: // File: index.mjs // // Command line usage: node index.mjs  const asyncMsg = await Promise.resolve('WORKS!'); console.log(asyncMsg); // "WORKS!"](//images.ctfassets.net/f20lfrunubsq/62cYUhS2h8IorqDwP9bDy2/6002b2a1e6e9698dd7a6c7d69760f913/Screenshot_2021-04-05_at_10.37.48.png)

I haven't played much with ES modules in Node.js yet. This week I learned that Node.js supports top-level `await` when using ES modules.

👉 <a class="btn btn__small" href="https://www.stefanjudis.com/today-i-learned/top-level-await-is-available-in-node-js-modules/">Learn about top-level await in Node.js</a>

## Thinking about accessibility is our job as web developers

![Yes, people who are blind can play video games. They can use maps. They can read books. They can do anything they damn want to unless you build things that stop them from doing so.](//images.ctfassets.net/f20lfrunubsq/36z8WI6OCPSMYZyEeQU4A3/d6ac89429a14b195d77d182133d6a1a1/Screenshot_2021-04-05_at_10.49.48.png)

And here's another one from [Chris Ferdinandi](https://twitter.com/ChrisFerdinandi). 🙈 Chris got into arguments around web accessibility and shared his thoughts afterwards. If you're wondering why it's essential to learn about accessibility, this post is for you.

👉 <a class="btn btn__small" href="https://gomakethings.com/theres-no-such-thing-as-a-website-or-web-app-that-doesnt-need-to-be-accessible/">Read why web accessibility is important</a>


## Logical CSS properties

![Overview of logical CSS properties](//images.ctfassets.net/f20lfrunubsq/3F26mOQ0nM9BA81qIBAiPb/85f8bf31d413990250e570cb9b4099a9/Screenshot_2021-04-05_at_10.57.56.png)

This week [I learned about `text-align: start;` in CSS](https://twitter.com/stefanjudis/status/1378374165938442241). The values `start` and `end` are part of logical CSS values. Logical properties and values help to create multi-language websites. They enable developers to build sites that work in LTR (left-to-right) and RTL (right-to-left) languages.

👉 <a class="btn btn__small" href="https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Logical_Properties">Learn about logical properties and values</a>

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

![Comparison of old and new RandomMDN Tweet format](//images.ctfassets.net/f20lfrunubsq/2P1teoBv0F6r2Jxwb4q9v/42c7f00e1b3842df2cf3131b919b06f3/Screenshot_2021-04-05_at_12.12.37.png)

RandomMDN is a Twitter bot that shares random MDN pages several times a day. [Barry Pollard](https://twitter.com/tunetheweb) handed in a PR and improved the Tweet formatting to make it more readable. Thank you, Barry!

## New Tiny Helpers

![Screenshots of MakeTypes, ReX and Pagespeed compare](//images.ctfassets.net/f20lfrunubsq/4aleLh1KkaWMQl3NLZ42K4/542f5ef41256946ddb6932d12ba67329/Screenshot_2021-04-05_at_12.18.04.png)

- [MakeTypes](https://jvilk.com/MakeTypes/) – MakeTypes from JSON samples
- [ReX](https://rex.antfu.me/) – Transform texts with regular expressions.
- [Pagespeed Compare](https://pagespeed.compare/) – Compare performance metrics of pages against each other using Google PageSpeed Insights

## Three useful projects to have a look at 

- [ryanburgess/inclusion](https://github.com/ryanburgess/inclusion) – Resources to help educate and help with building a more inclusive work environment. 
- [duetds/date-picker](https://github.com/duetds/date-picker) – Duet Design System’s accessible date picker.
- [chromium/permission.site](https://github.com/chromium/permission.site) –  A site to test the interaction of web APIs and browser permissions.

## A quote to think about

Convincing people to do something can be a real challenge. [Sean Falconer shared valuable advice on how to convince people that developer experience matters](https://seanfalconer.medium.com/how-to-influence-people-to-prioritize-the-developer-experience-9d20099bb735).

> Passion about an idea is good, but anger is not.

## A song that makes you stop coding

![Screenshot of the video: Kris Orlowski – Believer](//images.ctfassets.net/f20lfrunubsq/3va5EUykDQ2WXxuulsLrpM/868bb7ded93127d09e9d75a761d132c9/Screenshot_2021-04-05_at_12.26.14.png)

I discovered Kris Orlowski's wonderful folk song "Believer". The chorus is beautiful, and the music video is a piece of art. 

I can't wait until we can enjoy live music again!

👉 <a class="btn btn__small" href="https://www.youtube.com/watch?v=oQADiymQSkQ">Listen to Kris Orlowski</a>

---

And that's a wrap for the thirteenth 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-13/). ♥️

**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/).