DEV Community

Stefan Judis
Stefan Judis

Posted on • Originally published at stefanjudis.com

🧒 Stefan's Web Weekly #20

Welcome to Web Weekly #20!

Hello friends! Do you remember last week? I was so proud of sending this tiny newsletter to 1000 people for the first time. In the previous seven days, 200 more people signed up. 😲 I'm so grateful and excited to have you all read along! A big welcome to all the new subscribers!

Before we jump into web stuff, let me share what with you made me laugh this week. Check out this URL lengthener (yes, you read that right!): the idea, the URL, the wording... I love everything about this random project. πŸ™ˆ

Are you tired of your URLs being just too darn short? Worry no further, as aaa.aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa.com has got your back. No need to be anxious about people thinking the size of your URL is too small, as it will guaranteed be the largest one around. So what are you waiting for? Give it a go!

This week's Web Weekly includes:

  • a free live-caption service
  • automation with Puppeteer
  • Node.js running natively in the browser

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

Ready? Steady. Go!

A tool to find the RSS feeds of the people you follow on Twitter

Discover feeds of your followings – Login with twitter to show URLs and feeds

It looks like Google is considering bringing RSS support into Google Chrome. RSS is the perfect technology to stay up to date with new resources created by the people you like. You can discover things on your own time without relying on some algorithm tricking you into doing something.

Luca Hammer wrote a tool to export RSS feeds based on the people you follow on Twitter. Wonderful!

πŸ‘‰ Use RSS instead of Twitter

On the topic of privilege

Cover slide of the talk "Lending privilige"

I am a white cis guy working in tech. I have a lot of privilege. I have privilege I don't even realize I have. Anjuan Simmons' explains how lending privilege to others leads to a fairer, better, and friendlier world. I recommend watching it.

πŸ‘‰ Watch "Lending Privilege"

Live-captioning in your browser

webcaptioner.com showing an example sentence

I found out about webcaptioner.com this week. The site creates captions right in your browser window and it's impressive! Unfortunately, it's also Chrome-only. :/ I still will give it a try for my future live online activities, though.

πŸ‘‰ Try out Web Captioner

Plans to get rid of the user-agent string

const isMobile = navigator.userAgentData.mobile;

It's been a while since the Chrome folks started talking about their plans to deprecate the user-agent header so that everybody forgot about it. But now there seems to be some movement! Rowan Merewood explains their motivation and the proposed solution – User-Agent client hints.

What's worrying is that according to chromestatus.com only Chromium browsers are open for that change. Let's see where this goes!

πŸ‘‰ Learn about User-Agent client hints

Automate and monitor all the things with Puppeteer

Generate a Lighthouse report for a URL and output it to a local HTML file. For more details, see the official guide to using Puppeteer with Lighthouse.

One for the bookmarks: A year ago, Addy Osmani published 20 Puppeteer (a Node.js library to control Headless Chrome) scripts for tasks such as Lighthouse report generation or filmstrip generation. This handy post helps you level up your automation game!

πŸ‘‰ Automate all the things!

Workshops from my lovely friends at Smashing

Online workshops from Smashing Conference

Since starting web development, I’m a big fan of Smashing Magazine! They publish countless resources, and I learned so many things thanks to Smashing! There are many Smashing Books on my bookshelf. πŸ™ˆ

Smashing runs online workshops with Frontend experts such as Brad Frost on Design Systems, Stephanie Eckles covering Modern CSS and Vitaly Friedman (find all workshops online). The workshops are broken into 2.5h long live sessions, span across weeks, and you can directly ask all your questions.

And the best thing; they sent me a friendly link to share with you to save $50 on all workshops! Have fun!

πŸ‘‰ Use the friendly link

Holy moly! Will we run Node.js in the browser soon?

Again, these environments are not running on remote servers. Instead, each environment is completely contained within your web browser. That’s right: the Node.js runtime itself is running natively, inside the browser, for the first time ever.

Online editors leveled up big times over the last few years. I started with CodePen years ago, and I occasionally use CodeSandbox these days. But honestly, I still stick to my local machine for most of my development work. It just feels "better".

The online editor StackBlitz released a new feature called "WebContainers". WebContainers allow you to run Node.js in the browser using WebAssembly. 🀯 And if these containers hold StackBlitz' promise, we're about to enter a new era of fast online editors that even work offline.

πŸ‘‰ Learn about WebContainers

I wrote a shell auto-completion function! πŸ’ͺ

dev command with auto-completion

I went down the deep rabbit hole of shell scripting this week – my mission: a new dev command. The command should navigate me into a project directory, run npm run dev, and open VS Code.

The tricky part: I wanted it to support auto-completion. It took a while, but I succeeded. πŸ™ˆ

πŸ‘‰ Auto-complete all the things

DOM events visualized

Dom events visualised interface

JavaScript events seem to be "easy" at first sight. I still remember my confusion when I realized how much functionality is included when using a "simple" onClick. It took me ages to understand the event capture phase. Alex Reardon builds domevents.dev; it's a fantastic resource to visualize and explain DOM events. Well done, Alex!

πŸ‘‰ Visualize DOM events

New web features need clear migration paths

Feature detection support table

I still can't believe that we might be able to use container queries eventually. Miriam Suzanne wrote an insightful article that doesn't describe the functionality of new feature but takes a look at what it will take to start using container queries.

It's an excellent article on progressive enhancement, feature queries and approaches to evolve the web.

πŸ‘‰ Learn about feature queries

Reader shout out πŸ’™

Aman's Blog – Curated list of Newsletters to level up your coding skills

Amandeep Singh published an extensive list of web development newsletters that help you level up your coding skills. I'm honored that Web Weekly is listed next to these famous publications. 😊

Thank you, Amandeep! And thank you all for reading along. πŸ’™

A new Tiny Helper

Open source illustration kit – Designed 100 awesome illustrations during 100 days of illustration challenge (Now added more than 120+ illustrations). You can download all illustrations completely free and use these to design awesome - landing pages, mobile app or presentations.

Vijay verma published illustrations.co. The site offers gorgeous illustrations to download for free.

πŸ‘‰ Find illustrations for your next project

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

Three valuable projects to have a look at

A quote to think about

This week's quote from Jakob CosoroabΔƒ is not completely serious but highlights the importance of good documentation. πŸ™ˆ

6 hours of debugging can save you 5 minutes of reading documentation.

A song that makes you stop coding

Music video screenshot: The Kooks - Sofa Song

I discovered a new indie classic playlist on Spotify. It is so good! I was a massive "The Kooks" fan back in the days and "Sofa Song" was just what I needed this week.

πŸ‘‰ Listen to "Sofa Song"

Thank you for reading!

And that's a wrap for the twentieth 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! πŸŽ‰ πŸ‘‹

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

Top comments (0)