Published at
Updated at
Reading time
7min
The Web Weekly newsletter keeps you up to date, teaches you web development tricks and covers all things working in tech.

Guten Tag! πŸ‘‹

Do Core Web Vitals have an impact on your Google Search ranking? How do you make your CSS transitions bounce without JavaScript? How can you animate SVGs to make them look hand-drawn?

This week's Web Weekly includes all the answers and much more. Enjoy!

Whenever I see lifetime data visualizations, I get jealous of the nifty bird eye view. I'm a sucker for looking at data, and it's even better when it's mine. It would be so cool to see my entire life in an interactive graphic, wouldn't it?

Look at Rory Flint's version.

A visualiztion of dots showing that on Sep 10 "We buy our first home together".

The visualization is neither complicated nor hard to build. Draw a circle for every week, make the highlights a bubble with a popup, and you're done. Easy peasy! But why do we have to build these things in the first place?

After reading Julian Lehr's post "Multi-layered calendars", I keep thinking about this problem.

Calendar integrating with Strava and headspace

My entire life circles around my calendar, yet I can't just zoom out, pick a random day, and see the photos I've taken, the music I've listened to or how much sleep I got the previous night. All this info exists in numerous different places and apps, though.

It shouldn't be too hard to connect all the data points and put it into a calendar view, or? Do you know of a solution to this problem? If so, let me know!

Something that made me smile this week

Tweet from Sam Becker: Every year I make a website for my sister for her birthdayβ€”each one significantly weirder than the last. https://ohmygodzoeturned.com/29

From the department of wonderful things to do for your loved ones: every year, Sam Becker builds a website for his sister's birthday. πŸ’™

My favorite is Zoe's 23rd birthday.

Build sites for your loved ones

The Refactor DX conference

Stefan and Darcy speaking at Refactor DX 2023

As mentioned last week, I traveled to Toronto to speak at the wonderful Refactor DX conf, and the videos went online! πŸŽ‰

My absolute favorite was Darcy Clarke's take on package management in the JS ecosystem. The former GitHub employee has been working on npm, so he knows what he's talking about. Highly recommended!

And if you want to see yours truly sharing his favorite new Frontend features on stage, my talk was published, too. 🫣

Watch some talks

A logo (af) that looks like it's written.

Animating the stroke-dasharray and stroke-dashoffset SVG properties will always have a place in my heart. Anthony Fu shared how he has built this nice handwriting effect.

Spice up your SVGs

Core Web Vitals and Google search ranking

Core Web Vitals for Search Engine Optimisation: What Do We Need to Know?

Does web performance affect your Google Search ranking? Is Lighthouse involved in evaluating the core web vitals? Can I be punished for a slow site?

Harry Roberts tries to answer all these questions after digging into an endless list of Google Search docs.

Disclaimer: As an independent freelancer, Harry doesn't have more insights into Google Search than you or I do, but his reasoning makes a ton of sense to me.

SEO up!

The wonderful weird web – cityhop

Website showing Berlin and a current tune.

If you're using multiple monitors, I put cityhop.cafe on my side screen to discover new places and listen to chilled music while doing light work. Can recommend!

And as a side note: Berlin is way less fancy than shown in the screenshot above. 🫣

Discover the world

What are your favorite internet corners? Send them my way, and I'll include them in Web Weekly!

Bouncy animations and transitions

Three linear easings visualized.

There's a new animation and transition timing function in town to bounce all these rectangles β€” linear(). It's already supported in Chromium and Firefox. Bramus has you covered if you want to learn more.

Bounce bounce bounce!

Open up Chrome and play with the new Easing Editor to understand how linear() works.

Node's asyncLocalStorage

import crypto from "node:crypto"; import http from "node:http"; import { AsyncLocalStorage } from "node:async_hooks";

This week, I learned that Node.js supports a way to store data throughout the lifetime of a request or other async operations. Sweet!

Pawel Grzybek describes what asyncLocalStorage is about.

Carry data async

CSS that couldn't be more artsy

A realistic cup, a running cheeseburger, a coke can, a chip, a man at a desk and cartonized woman.

What if I'd tell you that all the drawings above are made with a single HTML element? Magic? You bet!

Create CSS art

Random MDN – Infinity

const arr = \[1, 2, \[3, 4, \[5, 6, \[7, 8, \[9, 10\]\]\]\]\]; arr.flat\(Infinity\); // \[1, 2, 3, 4, 5, 6, 7, 8, 9, 10\]

From the unlimited MDN knowledge archive...

How often do you use Infinity in JavaScript? Yeah, I've never used it, but apparently, endlessness is valuable with the Array.flat method.

Find infinity

TIL recap – force pushing with +

git push --force origin feature-a; git push -f origin feature-a; git push origin +feature-a;

Think of the moment when you realize that force pushing a Git branch is only a single typo away. πŸ˜…

Don't force it

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

New on the platform

"New on the platform" is a new section I'm experimenting with. Should I keep it?

Three valuable projects to have a look at

A new Tiny Helper

Color contrast tool with controls for two colors.

OddContrast isn't the first contrast checker tool out there, but it's one of the few that supports new color spaces oklch and oklab. πŸ’―

Make your text readable

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

Thought of the week

This week's quote comes from the slightly ranty post "XML is the future". πŸ˜… But nevertheless, there's lots of truth in it. πŸ‘‡

Nothing is ever needed for everything.

A song that makes you stop coding

 Super Flu - Fibi Maybe

This week's track is an absolute Berlin House classic. Enjoy Super Flu's chilled summer track. It's fairly long, make sure to check it out at 5:00. 🫣

Listen to "Fibi Maybe"

This is all, friends!

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

Or tell your friends about it:

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

And with that, take care of yourself - mentally, physically, and emotionally.

I'll see you next week! πŸ‘‹

Was this post interesting?
Yes? Cool! You might want to check out the email version. The last edition went out 12 days ago.

Related Topics

Related Articles

About the author

Stefan standing in the park in front of a green background

Frontend nerd with over ten years of experience, "Today I Learned" blogger, conference speaker, Tiny helpers maintainer, and DevRel at Checkly.