Friday Issue Nr. 125 | 6/12/2024

React Router 7, Vite 6, and Astro 5 are the latest and greatest for the last two weeks. Also, the new animation library Motion and TanStack ditching adapters. There are also a couple of dev advent calendars and a nice 3D scene with illuminated moons.

JavaScript News

Typescript Advent Calendar

https://www.adventofts.com/

Deno vs Oracle

This is more like a developer community against Oracle, as you can sign a petition, too.

https://deno.com/blog/deno-v-oracle

Also, JavaScript turns 29 years old.

Using Transformers.js for AI in a browser

https://www.raymondcamden.com/2024/12/03/using-transformersjs-for-ai-in-the-browser

React Router 7

https://remix.run/blog/react-router-v7

Vite 6.0

https://vite.dev/blog/announcing-vite6.html

Astro 5.0

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

Motion

Animation library for React and JavaScript. Vue will be available from ~2025. However, you can buy early access.

https://motion.dev/

Framer Motion creator Matt Perry is spinning up his adventure Motion, but they will stay friends with Framer.

https://motion.dev/blog/framer-motion-is-now-independent-introducing-motion

JSONtr.ee

This is a fancy JSON tree visualisation. The best part is that you can run it locally, also without all the fancy drag-and-drop features. Special kudos for smart Estonia’s domain (ee) usage.

https://jsontr.ee/

TanStack Start is Ditching Adapters

In short, writing adapters for countless servers is a daunting task. However, there is Vinxi powered by Nitro and Vite, and suddenly, you can simply add config like this:

import { defineConfig } from '@tanstack/start/config'

export default defineConfig({
  server: {
    preset: 'vercel',
  },
})

https://tanstack.com/blog/why-tanstack-start-is-ditching-adapters

Don’t use NODE_ENV

Interesting thought on NODE_ENV vs ENV_NAME.

https://joshwoodcock.medium.com/dont-use-node-env-to-specify-your-environment-50ad69dd9662

NPM revamps search

https://socket.dev/blog/npm-updates-search-experience

Onlook

A Figma-like design app for React with Tailwind. There is ~ a 2m video, and it looks good! You can edit visuals, which will change your code. You can interact with elements and pause the screen to edit, for example, a popup.

https://onlook.dev/

HTML & CSS News

HTMLHell Advent Calendar

https://htmhell.dev/adventcalen

A Framework for Evaluating Browser Support

This is another great post from Josh Comeau. What is considered good support for a CSS feature? When should the fallback experience be provided? Which browsers should be supported?

https://www.joshwcomeau.com/css/browser-support/

Donut scoping

https://css-tricks.com/solved-by-css-donuts-scopes/

CSS Logo

Not like the most exciting news but it is still important: CSS is getting a new logo. The main logo uses purple rebeccapurple, #663399 or #639, as the background colour and white #FFFFFF as the font colour.

https://github.com/CSS-Next/logo.css

By the way, do you know the history of RebeccaPurple? This colour was added in 2014 and named after Rebecca Alison Meyer. Rebecca passed away on her sixth birthday after battling brain cancer. She had a deep love for the colour purple, which became the inspiration for this tribute

History of Rebecca

Moon Lamps

A 3D scene with a few illuminated moons, one of which is sitting in a chair, and the best part is that you can bounce them around.

https://codepen.io/wakana-k/pen/mdNvqQV

Mixed News

An IDE for React Native

https://ide.swmansion.com/

Dev joke (most probably outdated)

Two CSS properties walk into a bar. A barstool in a completely different bar falls over.

Thomas Fuchs

Comment on BlueSky