Friday Issue Nr. 113 | 31/05/2024

Astro 4.9 added React Container API, performance in Chrome DevTools, what is the difference between async and defer, Vue and NextJS 15RC. Friday’s game (Super Mario) is made with pure CSS, Layouts without CSS frames and how to test layout responsiveness.

JavaScript News

async vs defer vs type=’module’

A concise post with a diagram to give full info on the differences between those three when loading your JS on the page.

https://webdeveloper.beehiiv.com/p/html-script-element-attributes-async-vs-defer-vs-typemodule

Performance analysis using Chrome DevTools

This well-written post provides a detailed explanation of how to navigate the DevTools and resolve performance issues.

https://blog.jiayihu.net/comprenhensive-guide-chrome-performance/

What’s new in Node.js

https://snyk.io/blog/10-modern-node-js-runtime-features/

Astro 4.9

  • Experimental: Container API

  • React 19 support for Astro Actions

  • Stabilised experimental features

https://astro.build/blog/astro-490/

Vue vs other JS framework

https://thenewstack.io/want-out-of-react-complexity-try-vues-progressive-framework/

Something about Laravel and Wasp

https://wasp-lang.dev/blog/2024/05/29/why-we-dont-have-laravel-for-javascript-yet

Next.js 15 RC

https://nextjs.org/blog/next-15-rc

HTML & CSS News

Super Mario with CSS

Maybe the game itself is not so impressive, but the fact that you can build something like that with CSS and HTML without JavaScript is another level of craziness.

https://codepen.io/t_afif/pen/OJYbVWP

Modern CSS Layouts without framework

I’m glad there are articles showing how you can build a CSS layout without any framework.

https://www.smashingmagazine.com/2024/05/modern-css-layouts-no-framework-needed/

Old Dogs, new CSS Tricks

Fantastic article about the latest extensive add-ons to CSS and why we are slow on adoption

https://mxb.dev/blog/old-dogs-new-css-tricks/

Testing for responsiveness

This is an interesting one. When I create the layout, I always test it by simply resizing the browser. However, this is not the best approach. I guess it is good enough to test the layout, but it makes sense to test it on different devices.

Browser resizing won’t account for Viewport height, Zoom level, Touch events, Orientation, User agent strings and device pixel ration.

https://www.jenchan.biz/blog/stop-resizing-your-browser-improve-responsive-testing

Mixed News

Naming design tokens

https://www.smashingmagazine.com/2024/05/naming-best-practices/

Comment on Mastodon