Friday Issue Nr.61

Using Maps and WeakMaps, a very handy tool - RegExGPT, Qwik v1.0, UX dark pattern study, scoped CSS and fancy animation examples

JavaScript News

Using Maps and WeakMaps instead of Objects for DOM nodes

I never remember using map() when working with DOM nodes, but this use case makes sense to me.

https://www.macarthur.me/posts/maps-for-dom-nodes

Practical guide to not blocking the event loop

https://www.bbss.dev/posts/eventloop/

The interactive guide to rendering in React

This is a very nice and interactive page.

https://ui.dev/why-react-renders

RegExGPT - Regex

https://regexgpt.app/

I bet you can guess what it does.

Qwik Reaches v1.0

https://www.builder.io/blog/qwik-v1

Capacitor

I didn’t know about this Cross-platform native runtime for web apps.

https://capacitorjs.com/

Also, they just announced Capacitor 5.0

https://ionic.io/blog/announcing-capacitor-5

Probably for cross-platform native PWA, this is a good-to-know tool.

Pretty TypeScript Errors

This is a plugin for VS Code.

https://marketplace.visualstudio.com/items?itemName=yoavbls.pretty-ts-errors

CSS News

Fancy animation examples

Gradient Tracing is fantastic.

https://rauno.me/craft/nextjs

Accessible target size

https://www.smashingmagazine.com/2023/04/accessible-tap-target-sizes-rage-taps-clicks/

Nice discussion about comfortable icon size on mobile devices. Spoiler alert: between 30x30 is good and 48x48 comfortable, but it depends.

UX dark patterns - case study

Fantastic slides on dark patterns: https://builtformars.com/case-studies/dominos-pizza

The only issue is that I want to order a pizza after digging through the slides! 🙂

Scoped CSS

So, with the scoped CSS https://keithjgrant.com/posts/2023/04/scoped-css-is-back/

and if we add nested CSS https://developer.chrome.com/articles/css-nesting/

, and of course, functions: https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Functions

Then, to me, CSS feels more like a programming language, right?

Ah, and variables, too! https://developer.mozilla.org/en-US/docs/Web/CSS/Using_CSS_custom_properties

Write CSS by using the JS function pattern.

https://www.smashingmagazine.com/2023/04/write-better-css-borrow-ideas-javascript-functions/

Quite a long read, but if nothing else, I find the usage of width: max(x, y) quite interesting.

https://developer.mozilla.org/en-US/docs/Web/CSS/max

Mixed News

A lock icon will be replaced with a tune icon

https://blog.chromium.org/2023/05/an-update-on-lock-icon.html

30th Anniversary WWW is released into the public domain

https://www.w3.org/blog/2023/04/30th-anniversary-of-licensing-the-web-for-general-use-and-at-no-cost/

This timeline makes me feel so old: https://www.w3.org/comm/assets/graphics/2023-04-30_timeline-1994-2023/2023-04-30_timeline-1994-2023.pdf

Image Carbon

Oh, this one is a great resource!

https://www.imagecarbon.com/

You can check how much of your website’s carbon footprint is based on images.