Artboard 16light, inspiration, solution, idea, innovation,ionicons-v5_logosGoogle Sheets iconSwift icon
Published at
Updated at
Reading time
8min
The Web Weekly newsletter keeps you up to date, teaches you web development tricks and covers all things working in tech.

Happy Monday, party people!

I'm again a little late because I just had a person coming over to measure my new kitchen. Soon I'll be heads-down into interior design mode. I've no clue about these things, but I'll keep you posted! πŸ™ˆ

This time Web Weekly includes:

  • Frontend tools of 2021
  • A new JS framework betting on progressive enhancement
  • Beautiful office setups

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

On a personal note

Last week, I spent a good chunk of time procrastinating by improving my terminal.

Output comparison of the tools delta and difft

Difftastic is a diff tool that compares files based on their syntax. For example, if you wrap code in an if statement, difftastic would only highlight the added code and not all the changed indentations. It sounds fabulous, but after playing around with it, I decided to stick with delta for my git diffs. πŸ€·β€β™‚οΈ

Terminal prompt showing a clickable GitHub URL.

While doing a webinar with Jason Lengstorf last week, I learned a trick that made it into my setup, though. Jason structures his projects following the GitHub URL pattern. There's a directory called github.com, including a username directory that includes the project directory.

For example, my dotfiles live now at ~/projects/github.com/stefanjudis/dotfiles on my machine. Why's that cool?

If your directory structures match URLs, you can display them in your terminal prompt and click it to open the connected GitHub repository (at least in iTerm2). Magic!

If you want to look at my hacky theme, it's in my dotfiles.

Something that made me smile

Tweet: "I invented the Selfie Sandals so I could get the perfect selfie at a moments notice." including pictures of a guy taking selfies with his feet.

I had to laugh hard about all the innovations the Unnecessary Inventions Twitter account shares. Let it be the Noodle Nipper, the Cold shower shield or the PASSWORD keyboard; they're all much-needed inventions. πŸ™ˆ

Find unnecessary inventions

Frontend tools of 2021

What Were the Hottest Front-End Tools in 2021?

Louis Lazaris put together an extensive list of Frontend tools. It includes web apps, libraries and frameworks. Check it out!

Find new tools

WCAG in plain language

WCAG in plain language – 	  Build and test against the Web Content Accessibility Guidelines (WCAG) consistently by understanding what is a failure against the success criteria.

Do you struggle with reading the Web Content Accessibility Guidelines (WCAG) because they're too long and formal? Yeah, me too! thisiswcag.com shortens the success criteria and translates them to plain language. πŸ’―

Understand WCAG

Coding with atmosphere

A code editor showing a preview.

This one is wild! code-sound.vercel.app is an editor prototype playing atmospheric sounds and noises while you type. I was skeptical at first, but it's good!

Can someone build a VS Code extension playing soothing sounds, please?

Type with sound

A πŸ’™ for personal websites

Brian Lovin's website with a three column layout showing many different things. It's more like a knowledge app than a personal website.

There's no more to say other than that I love Brian Lovin's site. He documents things for himself and others on a site that looks more like an app than a personal website. πŸ’―

Check Brian's site

Test your CSS selector skills

 CSS Speedrun – How does it work?  Enter the CSS selector, which applies to all elements with an arrow ➑️ and press enter or the submit button.  The timer will start once you correctly solved the first puzzle.

CSS Speedrun is a nifty little game to test your CSS selector skills. But don't stress about it, it took me a while to finish it, too.

Select all the things

Is Remix a new framework betting on less JavaScript?

How is Remix different from Next.js?

Finally, there seems to be a push against JavaScript-heavy websites (Alex Russel keeps pointing out that React is slow).

I like 11ty (no client-side JavaScript by default), there's also Astro and now there seems to be Remix.

I haven't tried this new framework yet, but it looks like they're taking "a less JavaScript and more progressive enhancement" approach, too. 😲

The team behind Remix published an article comparing Next.js and Remix. It's an interesting read!

Learn more about Remix

You are the CEO of your company

Your β€œlittle-c” company is the latter type–the relationships you’ve formed over the years. Friends, co-workers, managers, direct-reports, and so on.

Chris Riccomini explains that we all work for two companies: a company in a commercial business and your company as in friends, family and co-workers. Great take!

Invest in your company

Beautiful work stations

A nicely designed desk with a big monitor showing a clock.

devandgear.com lists beautiful office spaces and desks. And it's the perfect timing because I'll take it as inspiration for my new office setup.

Find some office inspiration

A better deep clone in JavaScript

structuredClone() is a new function that will soon be supported by most browsers, Node.js and Deno. It creates deep copies of objects. This blog post explains how it works.

Deep cloning objects in JavaScript has always been fiddly. Luckily, there's a new method available that will help out here – structuredClone. Axel has you covered if you want to learn more about it.

Go deep

Talks with excellent storytelling

Russ Olsen on stage next to his slides showing a spaceship

I've watched a lot of conference talks in the last few years. Initially, I wanted to learn something new, but after giving a few conference talks, I started to analyze speakers, their stage presence and their talk's storyline.

I still remember Nickolas Means' Fronteers talk "How To Crash An Airplane". It was a showpiece in storytelling. Hundreds of people were sitting in this conference hall, all silent, thrilled and shocked by Nickolas' story. So good!

This week I watched another example of excellent storytelling. Russ Olsen shared the story of Apollo 11, its journey to the moon and all things that went wrong. I couldn't stop watching it!

Discover space

TIL recap: background-repeat has other values than repeat

Visualization of different background-repeat options: repeat, round, space

Did you know that the CSS property background-repeat has more options than repeat? Now you do. :)

Repeat all the backgrounds

If you learned something new, no matter if small or big, old or new, documented or not, I'd love to include more learnings in this newsletter. Send me an email, and I'm happy to share your discovery!

Three valuable projects to have a look at

  • casesandberg/react-reactions – Reactions from Slack, Facebook, Pokemon, Github and Youtube.
  • AlDanial/cloc – Count blank lines, comment lines, and physical lines of source code.
  • yairEO/knobs – UI knobs controllers for JS/CSS live manipulation of various parameters .

A new Tiny Helper

The Free Photo Editor in your Browser. No popups to close. No ads to ignore. No cookies to accept. No account to create. 100% Free ✨  A faster way to edit photos online.

If you're looking for a quick way to edit images, edit.photo is for you. It supports cropping, filters, redaction, and(!) runs entirely in the browser. No ads, no tracking, just frontend magic!

Tweak your images

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

A quote to think about

Company values have always been strange to me.

Often, the defined values are too vague or obvious to follow them. Netflix's company values from 2009 (updated until now) were more detailed than the values I've seen so far. The slide deck describing their values included this week's quote.

The actual company values, as opposed to the nice-sounding values, are shown by who gets rewarded, promoted, or let go.

A song that makes you stop coding

Tash performing in her living room.

I was surprised to discover that Tash Sultana's "Jungle" is a perfect running track. It matched my pace and pushed me to a decent time this week.

Listen to "Jungle"

Thank you for reading!

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

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

Related Topics

Related Articles