Friday Issue Nr. 117 | 28/06/2024

Controversial news on HTMX, JS survey highlights, TS 5.5, Vuesion, Set(), Zod, and Valibot. In the CSS world, good sources on the Anchor tool and usage.

JavaScript News

Exploring JavaScript 2024

This book is written by Dr. Axel Rauschmayer (https://dr-axel.de/) and can be read online.

https://exploringjs.com/js/book/index.html

JavaScript survey highlights

https://socket.dev/blog/2023-state-of-javascript-survey-highlights

TypeScript 5.5

https://devblogs.microsoft.com/typescript/announcing-typescript-5-5/

Vuesion

“This boilerplate takes advantage of Nuxt.js and its vast ecosystem and glues together modern best practices across engineering & design.”

https://vuesion.github.io/docs/en/v5/

Recreating Queens Game in Vue

https://fadamakis.com/recreating-queens-game-in-vue-d7e3b3013ccb

Why not HTMX

To make a balance, here are posts with opposing thoughts on HTMX

https://gomakethings.com/why-not-htmx/

Oh, one more about potential security issues

https://www.sjoerdlangkemper.nl/2024/06/26/htmx-content-security-policy/

Anyway, here is the post from HTMX creator Carson Gross

https://htmx.org/essays/htmx-sucks/

Not sure if that is marketing trick, sarcasm or mix in between 🙂

Pivoting from React to Native DOM APIs

An interesting sentence at the end of the article:

“He added that finding developers who know vanilla JavaScript and not just the frameworks was an “unexpected difficulty.”

https://thenewstack.io/pivoting-from-react-to-native-dom-apis-a-real-world-example/

Inferring Type Predicates

Amazing journey of how to implement and make a PR for TypeScript. Really good read.

https://effectivetypescript.com/2024/04/16/inferring-a-type-predicate/

JavaScript Set methods

New JS Set methods are getting implemented in the browsers

https://developer.mozilla.org/en-US/blog/javascript-set-methods/

console.log()

I think everybody knows console.log('output') , but there are more to it. Did you know you can use a console with log, table, debug, time, dir and more?

https://developer.mozilla.org/en-US/docs/Web/API/console

Usage examples

https://www.builder.io/blog/console-log

Zod and Valibot

Zod v.3.23, with 9.8M/week download, is very popular. https://zod.dev/

However, there is also Valibot v.0.31: https://valibot.dev/, which claims to be smaller due to its modular design, tree shaking, and code splitting. It can reduce size by 95% compared to Zod.

Matter.js

Matter.js is a 2D physics engine for the web

https://brm.io/matter-js/

HTML & CSS News

WCAG Color Contract Checker

https://accessibleweb.com/color-contrast-checker/

Learning anchor

First is the tool with visualisation

https://anchor-tool.com/

Code and usage below

https://utilitybend.com/blog/lets-hang-an-intro-to-css-anchor-positioning-with-basic-examples

Loader

If your web is slow you can use this nice loader

https://codepen.io/jkantner/pen/yLWXOXd

It won’t make web faster but while your users wait they will have nice CSS animation

CSS Animations with AI

It probably works for some simple cases.

https://www.aicssanimations.com/

Comment on Mastodon