Artboard 16light, inspiration, solution, idea, innovation,Google Sheets iconSwift icon
Published at
Updated at
Reading time
6min
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.

Buna ziua, friends!

In preparation for my new talk "Back to boring" I looked at the Open UI project whose goal is to standardize more UI components.

The idea is simple. If there are components that are included and reinvented in every design system out there, shouldn't these components become HTML elements? Big yes from my side!

And there are good things in the making:

I can't wait until I can build accessible components like the one below without JavaScript.

A custom styled select menu

The project's still in the early stages, but I'm 100% convinced we need more high-level HTML components. The web evolved, and if 95% of developers reinvent the same components. It's time for the web platform to catch up.

I can't wait to see where this is going! πŸŽ‰

And with this, today you'll learn about:

  • Accessible ARIA patterns
  • JavaScript import maps
  • Polite phrases for your emails

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

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

Something that made me smile this week

Tweet with a laughing emoji

I won't spoil what's happening here, but it's hilarious!

Accessible ARIA patterns

Two aria pattern examples (Accordeon and alert)

This one's one for your bookmarks: the ARIA Authoring Practices Guide includes a section describing how to build components. The guide contains alerts, checkboxes, tooltips and many more.

Build accessible components

How to be a 1x engineer

Can be a slow coder. Has productive and unproductive days. Doesn't take themselves too seriously.

Luckily, I haven't seen folks discussing 10x engineers in a while! 1x engineering is the path forward anyways. πŸ˜‰

Become a 1x engineer

Emails on a schedule

Why I schedule all my emails – and you should too

Do you schedule your emails? I do. Not always, but sometimes. Deb shared why they think delayed replies make their life easier, and it makes a lot of sense to me.

Schedule your emails

Server/browser communication

Server-Timing: cdn_process;desc=”cach_hit";dur=123  Server-Timing: cdn_process;desc=”cach_hit", server_process; dur=42;

The Server-Timing header's a wonderful way to send server data to client monitoring. Sean explained how you can use Server-Timing and the Performance Timeline API to embed server metrics in your client-side tracking.

Send data to the client

HTML attributes worth knowing

These are a collection of HTML tips I learned that would definitely blow your mind!

Babi collected a valuable collection of not well-known HTML attributes. πŸ’―

Learn more about HTML

How to be polite

I couldn't care less. -> I will defer to your judgment on this as I am not passionate either way and I trust your expertise.

Have you ever wondered how to reply to an annoying message very politely? Of course, you did. πŸ˜‰ The following site helps out with phrases to use in a professional context.

Be polite

JavaScript import maps

A script of type "importmap"

Writing cross-platform JavaScript remains to be a challenge. But there's a lot of movement. More browser APIs are entering the server-side, and features like import maps will enable us to map and streamline ECMAScript imports.

Stefan explained how to use <script type="importmap"> which is available in Chromiums and Firefox (behind a flag).

Learn more about import maps

The world's fastest website

How much was adopted? Well, that's a long story.

I already included Taylor's series about building the fastest website in the past. It's now finished; every article includes countless links and is worth reading.

Make yourself a drink, and prepare some snacks. The entire series is worth reading if you want to level up your web performance skills.

See the results

Random MDN – Symbol.asyncIterator

const myAsyncIterable = { async* Symbol.asyncIterator() { yield "hello";         yield "async";         yield "iteration!";     } };

From the unlimited knowledge archive called MDN...

Did you know you can use Symbol.asyncIterator to create async iterators that work in for await of loops? πŸ™ˆ Now you do!

Iterate asynchronously

TIL recap – SVGs can be nested

Nested SVGs

Did you know that you can nest SVG elements? Now you do!

Nest all the things

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

  • Bhupesh-V/ugit – ugit helps undo git commands.
  • 11ty/is-land – Add interactive client-side components to your web site.
  • ranyitz/qnm – A CLI utility for querying the node_modules directory.

A new Tiny Helper

Six boxes with colorful gradient shadows.

If you're looking for a way to generate color gradient shadows, "CSS Shadow Gradients" helps out!

Create beautiful shadows

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

Thought of the week

I've spoken at an in-person conference this week. Yay!

But since it's been a while since I stood on stage in front of hundreds of people, I was super nervous. My friend, the imposter syndrome, kicked in big times.

Everything went well, but a sentence I picked up on Mike's blog made circles in my mind.

If you worry people think X about you, then you probably think X about yourself.

A song that makes you stop coding

Man singing in a microphone

This week's song is an absolute classic from Audioslave. "Be yourself" is one of these tracks with a beautiful and yet powerful chorus.

Listen to "Be yourself"

Thank you for reading!

And that's a wrap for the sixty-eighth 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