Friday Issue Nr. 126 | 20/12/2024

The last newsletter of 2024 is loaded with great posts! TanStack, RockPack, ApexCharts, State of JS, a Svelte advent calendar, CSS one-liners to save the day, and many more good reads.

Merry Christmas and a Happy New Year!

JavaScript News

Reflections on Managing State

https://www.frontendundefined.com/posts/monthly/react-state-management-reflections/

TanStack Start

A full-stack React framework built on top of TanStack Router is designed to provide a balance between the client-side and server-side.

https://frontendmasters.com/blog/introducing-tanstack-start/

Next.js 15.1 adds support for React19

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

RockPack - alternative to Create-React-App

They promise to get your React App running with full support for SSR, bundling, and tests in less than 5 minutes.

https://alexsergey.github.io/rockpack/

Lessons learned from migrating from Webpack To Vite

https://neon.tech/blog/from-webpack-to-vite

State of JavaScript 2024

https://2024.stateofjs.com/en-US/

Svelte’s advent calendar

How did I miss that one to include in the previous post??

https://svelte.dev/blog/advent-of-svelte

Handling useState changes in child

Very subtle but powerful change to avoid unnecessary code complexity. This is a short and sound post.

https://matanbobi.dev/posts/stop-passing-setter-functions-to-components

What’s new in React19 from React Team

https://react.dev/blog/2024/12/05/react-19

Apex Charts

I'm using those in the current project and can recommend them. Easy to implement use, and very customisable and magically adapted to any size

https://github.com/apexcharts/apexcharts.js/releases/tag/v4.2.0

Collection of JS links and tutorials every developer should know

https://github.com/leonardomso/33-js-concepts?tab=readme-ov-file#-table-of-contents

HTML & CSS News

17th December was the birthday of the CSS

Chronology: https://www.w3.org/Style/CSS20/

Brief history: https://www.w3.org/Style/CSS20/history.html

CSS Wrapped 2024

Interactive Chrome and CSS journey.

https://chrome.dev/css-wrapped-2024/

nth(next-sibling)?

The power of *:nth-child()

https://chriskirknielsen.com/blog/nth-next-sibling-no-need/

Self-aware components with CSS

This is an absolutely fantastic example of using the quantity query technique.

https://piccalil.li/blog/making-content-aware-components-using-css-has-grid-and-quantity-queries/

Super useful CSS one-liners

I use all but 3 props from the list. Didn’t know about outline-offset, which is a really good one for highlighting focused elements.

https://moderncss.dev/12-modern-css-one-line-upgrades/

Few more for fun:

has(), subgrid, nesting, balanced text and query units

https://web.dev/articles/5-css-snippets-every-front-end-developer-should-know-in-2024

Animations with clip-path

https://emilkowal.ski/ui/the-magic-of-clip-path

Container queries, how-to with examples and a very thorough explanation

https://ishadeed.com/article/css-container-query-guide/

Mixed News

Image background removal

It’s free, fast and works on your machine, delivered by Addy Osmani

https://bg.addy.ie/

CSS official logo

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

WP parent company must stop blocking WP Engine

What a saga!

https://www.theverge.com/2024/12/10/24318350/automattic-restore-wp-engine-access-wordpress

Comment on BlueSky