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.

Heidi Ho, friends!

As you may know, I started a new job recently and had to set up a new Gmail account. I discovered that there are some customizations I can't live without. Maybe they're valuable for you, too!

The auto-advance feature in Gmail.

My morning routine includes getting my inbox as close to zero as possible. To not get distracted, I turn on auto-advance. Find the feature under the "Advanced" settings and automatically move to the next email after replying, deleting or archiving an email. It's perfect for flying through your inbox while keeping the flow!

Keyboard shortcut mappings

Keyboard shortcuts are hidden behind the "Advanced" settings, too. Once you have enabled it, you can navigate your inbox using your keyboard! πŸ’―

Gmail inbox with multiple inboxes

And lastly, I wrote about Gmails multiple stars and inbox features in the past. You can group and structure your inbox like the above!

Grouping my inbox helps me to have important emails always on the radar!

And with this, today you'll learn about:

  • JavaScript design patterns
  • Lesser-known CSS features
  • How new browser features make SPAs less important

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

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

Something that made me smile this week

Mini Drums in a shower

Did you ever wonder how the drums of a System of a Down track sound played on a tiny drumset? Yeah, me neither, but the randomness of this video is just beautiful.

A big thanks goes to Pawel for forwarding me this song!

How to use Netlify as your Dropbox replacement

MacOS menu bar including a "Sync Netlify CDN" option

I love everything about Jim's series explaining how he uses Netlify as a Dropbox alternative. He explains the problem, describes his development approach and shares a solution at the end. πŸ‘

Be in sync with Netlify

JavaScript design patterns

Improve how you architect web apps

patterns.dev is a massive resource to level up your software architecture knowledge. It comes with countless examples, beautiful animations and ready-to-use demos. Highly recommended!

Write maintainable code

A little bit of command line magic

Find commands at the speed of thought – Commands.dev is a searchable, templated catalog of popular terminal commands curated from across the internet.

commands.dev is a searchable collection of CLI commands. Happy command browsing!

Shine on the command line

Interviews are a two-way street

Tweet from Lily Konings: Give yourself full permission to interview your future managers back. When they ask "Do you have any questions for me," take the opportunity to expose what your next 1+ years under this person might be like.  Here are 5 questions I have or wished I'd asked of my future managers:

Interviewing for a new job is terrifying, and it usually feels like you're the only one to be measured and evaluated. But, hold on!

A Job interview's purpose is to evaluate both ways. Sally's article Questions to ask on a new job search is a good start to getting to know the company you're interviewing with.

And additionally, Lily's recent Twitter thread includes some stellar questions. πŸ‘‡

Ask more questions

TIL - the stroke-linejoin attribute

SVG example showing stroke-linejoin="round"

SVG includes so much functionality that it's just mind-boggling. SVG Filters alone are an art by themselves.

This week, Mariana taught me how stroke-linejoin works and hopefully I'll remember it the next time I'll have to deal with sharp SVG path edges.

Learn more about SVG

Lesser known CSS features

Lesser-Known And Underused CSS Features In 2022

Adrian covered good ground in his Smashing Article about underused CSS features. It includes all, counter-reset, scroll-padding and much more!

Get the most out of CSS

Did we build SPAs because browsers had to catch up?

To be clear, though, I don’t think SPAs are going to go away entirely. I’m not sure how you could reasonably implement something like Photoshop or Figma as an MPA. But if new browser APIs and features keep landing that slowly chip away at SPAs’ advantages, then more and more teams in the future will probably choose to build MPAs.

Nolan shared some thoughts on MPAs (Multi-page apps) and SPAs (Single-Page Apps) and argues that more developers will opt for "old-school" multi-page architectures because browsers catch up and ship more app-like features. I tend to agree...

Evaluate your SPA usage

Cordova's successor - Capacitor

Graphic comparing 2014 and 2022 showing that apps can be shipped with web technology

My friend Radimir's a big fan of Ionic's Capacitor framework. Whenever we talk about it, I tell him that I don't see the framework being used in the web development communities. Until today!

Chris shared his success of dropping native apps for a web platform approach. It's a good read!

Note: With Project Fugu and PWAs continuing to evolve, I wonder when we will reach the point of truly native and cross-platform supported web apps. I guess Apple is holding us back on that one? πŸ€”

Use web technology

Random MDN – Client-side form validation

JavaScript source code: const email = document.getElementById("mail");  email.addEventListener("input", function (event) {   if (email.validity.typeMismatch) {     email.setCustomValidity("I am expecting an e-mail address!");     email.reportValidity();   } else {     email.setCustomValidity("");   } });

From the unlimited knowledge archive called MDN...

It's been a while since I checked what validation methods are available in Vanilla JavaScript these days. setCustomValidity and reportValidity are only a tiny portion of validation functionality today. As usual, MDN has you covered to learn more.

Validate the vanilla way

TIL recap – How to specify the starting number of an ordered HTML list

Tweet sharing the `value` attribute on HTML list items

A while ago, I learned that li elements support a value attribute to control its number in an ordered list. After sharing this finding, I realized that there are more ways to manage the number display of lists. Read more on the blog.

Control all the numbers

If you learned something new, whether 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

A new Tiny Helper

Text Cleaner: Text cleaner is an all-in-one text cleaning and text formatting online tool that can perform many simple and complex text operations including format text, remove line breaks, strip HTML, Convert case,  and find and replace text online.

If you're looking for a quick online utility to clean up text, textcleaner.net is a handy tool to convert spaces, remove whitespace or decode HTML entities.

Clean it up

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

Thought of the week

Oldie but goldie; here's some wisdom from Ceej Silverio.

Code is never the challenge. Well-rested comfortable people who feel emotionally safe have solved every problem I’ve put in front of them.

A song that makes you stop coding

Cover of "Little talks"

This week's song is another Indie classic. "Little Talks" from "Of Monsters and Men" is one of these songs I used to listen to on repeat.

Listen to "Little Talks"

Thank you for reading!

And that's a wrap for the sixty-seventh Web Weekly! If you enjoy this newsletter, I'd love you to 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 week! πŸ‘‹

Related Topics

Related Articles