Artboard 16light, inspiration, solution, idea, innovation,Google Sheets iconSwift icon
Published at
Updated at
Reading time
7min
Web Weekly keeps you up to date, teaches you web development tricks and covers all things working in tech. If you like it, subscribe below.

Guten Tag! πŸ‘‹

How often do you use browser extensions to customize the websites you visit?

I use Refined GitHub to add tiny little features to the GitHub UI. You install it and forget about it. But then you'll be surprised that GitHub doesn't provide certain features when the extension isn't there β€” highly recommended!

Tweak new Twitter hides all the ads and removes all these Twitter innovations I don't use. It makes the platform so much more pleasant.

But it seems that more and more people are reaching for custom stylesheets these days. Ε ime Vidas shared how he implemented scroll snapping on Twitter, some folks use custom CSS to prevent themselves from getting lost in HackerNews comments and Eric Meyer blurs Twitter images without ALT text.

What are your little tweaks?

And with this, today you'll learn about:

  • How to build React from scratch
  • The VisualViewport API
  • How to exclude commits from git blame

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

Lastly, welcome to the 37 new subscribers! I'm super excited to have you around! πŸ‘‹

Something that made me smile this week

A motherfucking list of all motherfucking websites

You might have heard of motherfuckingwebsite.com. It's a classic parody of web development.

I was shocked when I learned that there are more of them:

And after discussing this on Twitter, @Saptak013 came along and collected them all on alistofmotherfucking.website. πŸ˜† I love the internet of nonsense!

3rd party JS running in WebViews

A table showing what platform inject what JavaScript

The following was quite big in the news.

Felix Krause (the guy tracking his every move in a public dashboard) discovered that apps inject JavaScript into their in-app web views. He put on his investigator hat to find out what these scripts do. The results are pretty disturbing but not surprising.

Use your default browser

TIL β€” How to exclude commits from git blame

git blame --ignore-rev a926bba49c index.js

After deciding to go all in on TABs and changing my first project, I ran into a wall. If you change hundreds of files from SPACES to TABs, you plaster git blame with unimportant commits.

Luckily, Git and even GitHub have a solution for this problem.

Blame the correct commits

A "poor" version of React built from scratch

Tejas Kumar's talk "Deconstructing React"

Tejas Kumar's live-coding session passed my timeline. In his 30min talk, Tejas builds a functional React clone from scratch. Solid! πŸ‘

Create your own React

More :has() resources

"Using :has() as a CSS Parent Selector and much more" ":has(): the family selector"

The entire web dev community is ready to open their champagne bottles and celebrate the arrival of the CSS feature that will unlock new CSS powers β€” the family selector aka :has().

But what's the browser implementation status?

Safari ships it, Chromium will soon, and Firefox is working on it behind a flag. If you want to learn what it can do, Jen Simmons and Jhey Tompkins published extensive articles with many examples selectors:

Google Search changed its JavaScript-rendering policy

Implement dynamic rendering – Dynamic rendering is a workaround and not a long-term solution for problems with JavaScript-generated content in search engines. Instead, we recommend that you use server-side rendering, static rendering, or hydration as a solution.

The Google Search folks were busy debunking the myth that Google Bot doesn't execute JavaScript over the last few years. The truth: it renders and indexes JS content just fine these days.

But there's news: Google now advocates for serving HTML. Yay! πŸ‘

Always serve HTML

HTTP/2 Push is dead

Removing HTTP/2 Server Push from Chrome

When HTTP/2 came around, everybody was excited about this new way to push resources to the browser before it requests them. In reality, it turned out that HTTP push was hard to implement and didn't consider the browser cache.

Preloading became the preferred option to speed things up, and the new Early Hints standard is now in the making.

So, it's time to say goodbye to Push.

Forget about Push

Back to boring

Stefan on stage: "If your site feels like a "boring" Multi Page App, maybe it should be one?"

My friends from the JSHeroes conference invited me to speak and they published the YouTube videos. If you want to hear me ranting about the overly complex web development practices we deal with today, this talk is for you.

Be boring

You got this!

You Got This! is a learning hub focused on core skills needed for a happy and healthy work life.

The lovely people behind the "You got this" conference expanded from only doing events to offering resources. The site includes videos and blog posts about getting started but also managing to work in tech. πŸ’™

Be happy in tech

Random MDN – the VisualViewport API

VisualViewport – The VisualViewport interface of the Visual Viewport API represents the visual viewport for a given window. For a page containing iframes, each iframe, as well as the containing page, will have a unique window object. Each window on a page will have a unique VisualViewport representing the properties associated with that window.

From the unlimited knowledge archive called MDN...

Have you heard of the VisualViewport JS API? No? MDN has you covered! πŸ‘‡

Learn more about the VisualViewport

If you want to learn more about web development, my @randomMDN Twitter bot posts random MDN pages multiple times a day.

TIL recap – addEventListener accepts event handler objects

// a class implementing // the `EventListener` interface class EventHandler {   constructor() {     this.eventCount = 0;   }    handleEvent() {     this.eventCount++;     console.log(`Event triggered ${this.eventCount} time(s)`);   } }  document.querySelector('button')   .addEventListener('click', new EventHandler());

Here's a quick JS fun fact: did you know that addEventListener also accepts objects as the second argument? 😲

Implement the EventListener interface

Find more short web development learnings in my "Today I learned" section.

Three valuable projects to have a look at

A new Tiny Helper

mediaquery.style – What was that media query code again?

Do you have to look up the media query syntax all the time? Yeah, me too. mediaquery.style is a handy bookmark for all things media queries.

Write your media queries with style

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

Thought of the week

I love how Josh Comeau sometimes describes very technical concepts with beautiful metaphors.

React.memo is a bit like a lazy photographer.

A song that makes you stop coding

Chris Luno on the roofs of Berlin

This week's song is not a song but rather a set from Chris Luno. As usual, Chris plays nicely bouncy house music, and I might be biased, but the flat Berlin skyline background is just beautiful.

Listen to the "Berlin rooftop mix"

This is all, friends!

Writing Web Weekly takes me roughly five hours every week, and I pay real money for sending almost 3k emails. If you enjoy it, consider supporting me on Patreon. β™₯️

Or tell others about it:

If you're not a subscriber, you can change that! πŸ˜‰

And with that, take care of yourselves, friends - mentally, physically, and emotionally. I'll see you next time! πŸ‘‹

Related Topics

Related Articles