This week is more about JavaScript, memory leaks, promises, a Big(O) notation and data fetching patterns. CSS has interesting reads about tooltips, aria-label, The Gap and CSS-only timer. Happy Friday, Happy Reading!
Hopefully, the new compiler will be able to deal with those memory leaks. However, till that moment, this is a good read on closures and how memory leaks happen.
https://schiener.io/2024-03-03/react-closures
As a joke, I said that a few times, but somebody made a post about the same. 🙂
https://dev.to/artiumws/react-compiler-when-react-becomes-svelte-5969
Even if you know all about Promises, Josh's blog post is always a pleasure to read. It provides perfect-to-detail examples, not only of JavaScript Promises but also of JavaScript single threads and how they work.
https://www.joshwcomeau.com/javascript/promises/
https://www.mux.com/blog/react-19-server-components-and-actions
The article claims that the find() method is not that great, but it all depends on the amount of data. There is no point in winning a few ms and losing the readability of the code. However, it is good to refresh memory on the Map() method and how looping through data can impact code efficiency.
https://medium.com/codex/stop-using-find-method-in-javascript-dfdb40b10821
https://martinfowler.com/articles/data-fetch-spa.html
Interesting experiment between flat vs nested DOM and performance of it.
https://frontendatscale.com/blog/how-deep-is-your-dom/
The list of tooltip names from the article: "tooltip," "infotip," "toggle tip," "hint text," "balloon help," "info bubble," "inaccessible overlay of shame"... the list goes on.”
My personal favourite is “inaccessible overlay of shame”.
https://sarahmhigley.com/writing/tooltips-in-wcag-21/
Extensive list on aria usage.
https://piccalil.li/blog/lets-make-a-floating-button-sign-up-form-pattern/
As usual, Ahmad Shadeed explained in detail why the flexbox gap property resolves many issues when trying to adjust elements with the usual margin/padding technique. It is interesting to go through all those cases that create problems once you remove an element or add it, but with the gap property, it is just one line, and everything works out of the box.
https://ishadeed.com/article/the-gap/
Another craziness with CSS and the use of custom property.
https://frontendmasters.com/blog/how-to-make-a-css-timer/
I like this website's design. It has many details (hovers, scroll effects), a fancy colour schema and works well in all sizes.
Comment on Mastodon