Friday Issue Nr. 102 | 1/03/2024

This week brings some thoughts on Tailwind CSS vs Semantic CSS, big news on Remix, how big your average website’s JavaScript is, a deep dive into View Transitions, and a few interesting pieces in mixed news.

JavaScript News

Remix V.2.7.0

It comes with stable Vite support, SPA mode, Cloudflare Pages support and more.

https://remix.run/blog/remix-vite-stable

Size of the websites

This is fun research but a slightly sad one. How much JavaScript do you need for a simple website?

booking.com: 12MB, Gmail: 20MB, but those are not the winners. LinkedIn did surprise me and Slack even more.

https://tonsky.me/blog/js-bloat/

Instant Search Params with React Server Components

That is a very nice post with the result and code.

https://buildui.com/posts/instant-search-params-with-react-server-components

VUExyz

Collection of Vue composables for creative coding.

https://github.com/vuexyz/vuexyz

Demos:

https://vuexyz.org/demo/basic-primitives.html

Rendering emails with Svelte

Well, not only was Svelte used in the process, but the journey to find a solution was fascinating.

https://www.yieldcode.blog/post/rendering-emails-with-svelte/

CSS News

TailwindCSS vs Semantic CSS

In my info bubble, I suddenly noticed two posts from different sources. Both triggered my curiosity. The thing is, I’m not Tailwind fun because I do not get it. I know how to use it, but why would I use it? So, I’m delighted there are others who have the same questions.

https://nuejs.org/blog/tailwind-misinformation-engine/

This one has an example between two pages - one is made by TailwindCSS, and the other using that “old school” CSS.

https://nuejs.org/blog/tailwind-vs-semantic-css/

MojoCSS

Although I’m not fond of Tailwind style CSS frames, if that is the trend, it probably makes sense to acknowledge similar frames. Who knows, maybe I will change my mind at some point.

https://mojocss.com/

Minimal CSS Framework for Semantic HTML

So, first of all, there is no need for any build tool; just add CSS and, of course, go with your design.

https://picocss.com/

View transitions: Handling aspect ratio changes.

As usual, this is a fantastic, step-by-step post from Jake Archibald on the View Transitions and how to fix different sizes, texts, and animations to make seamless transitions.

https://jakearchibald.com/2024/view-transitions-handling-aspect-ratio-changes/

Mixed News

Codrops demos

Collection of 500+ unique demos

https://tympanus.net/codrops/demos/

For example, this one is impressive:

https://tympanus.net/Development/3DPortalCard/

Transparent laptop?

https://www.theverge.com/24082244/lenovo-concept-transparent-laptop-mwc-2024-drawing-tablet

17 Equations that Changed the World - Rewritten in JavaScript

https://runjs.app/blog/equations-that-changed-the-world-rewritten-in-javascript

Comment on Mastodon