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!

Next week I'll start my new job, and I can't wait to set up my new working laptop. Why?

First of all, it's a new Mac, and who doesn't like unboxing these. But also, years ago, I invested some time into my dotfiles. Today, I just love kicking off a script to set up a new machine entirely. If you don't have your computer configuration in code, you should consider it. You'll use it your entire life!

My dotfiles are a combination of configuration files and scripts installing and linking all sorts of things. Unfortunately, I failed to document them properly, but they're still good enough to poke around and give you some ideas.

Here are some examples to get you started:

I also heard good things about chezmoi to get started, and if you're looking for ways to automate more things on your Mac, I spent way too much time looking into awesome-macos-command-line last week.

But let me not brabble about CLI tooling much longer. Shall we get into it?

Today you'll learn about:

  • differences in keyboard button clicks (space and enter)
  • Emoji rendering struggles
  • the autocapitalize attribute

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

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

Something that made me smile this week

Tweet: "Just merged a community PR then saw this on his twitch stream" including a video with a kid having fire in the background.

Kudos to Supabase for this one. They tweeted this video of a kid going absolutely wild on Twitch. But I couldn't stop at the Tweet.

It turns out, the shared Twitch account belongs to Crossmauz, and the streams of this teenager are "really something". Imagine you have this kid living in your house. πŸ˜†

You better read these confirmation dialogs

So the answer to the question is, unfortunately, the following: GitHub will restore a repo damaged by making it private. But only if it’s one of their own projects, not a community one. The latter gets a tweet, at best.

HTTPie started as a CLI HTTP client ten years ago and, as of late, was one of the most successful API tools on GitHub with over 50k stars.

I double-checked the count; today, the project has only 19.1k GitHub stars. So, what happened? Well, it's a mix of not reading confirmation dialogs, bad UX and GitHub being unwilling to run a backup script.

Jakub describes what happened on the HTTPie blog.

Read the full story

fetch is coming to Node

April 19, Node.js 18 was released, and it includes a fetch method so that fetch polyfills and additional HTTP package become redundant. The new global fetch is based on the undici package.

Short'n'sweet; the browser method fetch landed in Node 18. It's another milestone on the journey to JavaScript that runs in the browser and on the server.

Fetch all the things

A city in a bottle

Tweet: "A city in a bottle" followed by source code which renders a city

There are no words for these 256 characters of exceptional code golfing. I can't even imagine how this code works. Try it yourself!

Copy the code, paste it into CodePen and see a canvas city skyline in front of you. How? I have no idea.

Be amazed by code

The differences in keyboard button clicks

a) A native 'button' fires on key down when that key is Enter. If you hold down the Enter key, it continues to fire for as long you hold Enter (or something crashes). b) A native 'button' fires on key up when that key is Space. If you do not release the Space, and also press Tab to move away from the control, the control will not fire.

I learned that clicking a button with Space or Enter behaves differently. Adrian explains the details. πŸ‘‡

Hit that button

The world's a scammy place

I'm a security engineer and I still almost got scammed

Robert describes how he almost fell for a phone scam. It's a good reminder that we can't trust anyone today. 😒

Watch out for the scams

Should you use native Emojis on the web?

In any case, even if this blog post has only served to dissuade you from ever trying to use native emoji on the web, I hope that I’ve at least done a decent job of summarizing the current problems and making the case for browsers to help solve it.

I apologize if the following emojis aren't rendering correctly on your machine.

But did you know that the polar bear (πŸ»β€β„οΈ) is a combination of the bear (🐻) and a snowflake (❄️)? Or that the bald person (πŸ§‘β€πŸ¦²) is a combination of the person (πŸ§‘) and bald emoji (🦲)?

I'll forever be amazed by how Emojis can be combined, and this week, I discovered that there's a Unicode document listing all these combinations.

But now, do all these Emojis render for you? If not, it's because Emoji and Unicode rendering is a huge mess. Nolan explains lots of details on his blog.

Learn more about native Emojis

Today I learned: there's an autocapitalize input attribute

Input element with including autocapitalize="words"

Manuel shares how the autocapitalize input attribute affects virtual keyboards.

Improve the mobile experience

The burden of single-page applications

"I decided this called for an MPA. (aka a traditional web app. Site. Thang. Not-SPA. Whatever.)" – Okay, but why did I decide that? To demo the fastest possible Kroger.com, I should consider all options β€” why not a Single-Page App?

Taylor continues sharing his thoughts on building the fastest website possible. The topic this time is the question if a single-page application can provide a fast, secure and accessible routing experience.

It's a valuable read covering a lot of ground with many linked resources to dig deeper! πŸ’―

Reconsider doing everything in the client

Random MDN – The User Timing API

πŸ¦– Random MDN: Using the User Timing API πŸ¦–  https://developer.mozilla.org/en-US/docs/Web/API/User_Timing_API/Using_the_User_Timing_API  The User Timing interface allows the developer to create application specific timestamps that are part of the browser's performance timeline. There are two types of user defined timing ent…

From the unlimited knowledge collected on MDN: the global performance object holds methods belonging to the User Timing API. Use them to measure, time and mark all your source code!

Time everything

TIL recap – how to find out if a page was reloaded

if (performance.navigation.type === 1) {   // gather metrics after a reload and   // tell your monitoring service about it! }

Speaking of the global performance object; did you know that you can use it to determine if the current page was a reload, too? Now you do. πŸ˜‰

Check the navigation type

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

  • esimov/triangle – Convert images to computer-generated art using delaunay triangulation.
  • MartinHeinz/ga-extractor – A tool for extracting Google Analytics data suitable for migrating to other platforms/databases.
  • lukevella/rallly – A free group meeting scheduling tool.

A new Tiny Helper

Software licenses in plain English – Lookup popular software licenses summarized at-a-glance.

Do you know that there's a Sleepy Cat Software license? Yeah, me neither, but I also have to admit that software licenses aren't my strong suit.

tl;drLegal is a site that translates all this lawyer speech to plain English.

Understand your licenses

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

Thought of the week

Here's a quick reminder to take care of yourself from Brad Frost.

Your health is more important than your deadline.

A song that makes you stop coding

Bonobo music video screenshot showing generative art.

I've been out to see Bonobo live on Saturday, so naturally this week's track is a chilled one from their new album.

Listen to "Rosewood"

Thank you for reading!

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

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