paint-brush
Tailwind CSS v4 Beta, New React Framework, BEST JavaScript Animations, and More - This Week in JSby@thisweekinjavascript
247 reads

Tailwind CSS v4 Beta, New React Framework, BEST JavaScript Animations, and More - This Week in JS

by This Week in JavaScriptDecember 3rd, 2024
Read on Terminal Reader
Read this story w/o Javascript
tldt arrow

Too Long; Didn't Read

Today, we’ll take a look at the latest Tailwind CSS v4 Beta and explore Tuono’s Rust-powered backends, along with showcasing tools that will supercharge your JavaScript workflow.
featured image - Tailwind CSS v4 Beta, New React Framework, BEST JavaScript Animations, and More  - This Week in JS
This Week in JavaScript HackerNoon profile picture

Hello, JavaScript Enthusiasts!


Today, we’ll take a look at the latest Tailwind CSS v4 Beta and explore Tuono’s Rust-powered backends, along with showcasing tools that will supercharge your JavaScript workflow.


Let’s jump right in!

JavaScript Is Everywhere

We all know JavaScript powers our favorite web applications, but did you know it also runs behind the scenes on some surprising platforms?

  • GNOME Desktop: Nearly 50% of the GNOME desktop environment relies on JavaScript for its user interface elements.


  • React Native in Windows 11: Microsoft’s Start Menu and other key parts of Windows 11 use React Native to manage UI components.


  • PlayStation 5: Even the PlayStation 5’s operating system has JavaScript under the hood, helping to run its smooth gaming interface!


It’s safe to say that JavaScript’s role in modern development goes far beyond websites—it's shaping our desktops, operating systems, and even gaming experiences. This versatility is why we revisit the language every week.

Tailwind CSS v4 (Beta) Is Here!

If you love Tailwind CSS, you’ll be excited to hear that **Tailwind CSS v4 (beta)**has just dropped, bringing some significant improvements for developers working with large front-end projects.


Here’s a quick rundown of its new features:

  • Faster Build Times: The Tailwind team focused on improving performance, especially for developers working with massive frontend monorepos.


  • CSS Configurations: The new configuration system moves away from JavaScript files to pure CSS. This could take a bit of getting used to, but it simplifies styles and makes configurations easier to manage.


  • Container Queries: These queries are finally here, allowing you to design components that respond to their container size rather than the viewport size.


  • 3D Transforms & RGB-Based Color Palette: Tailwind v4 introduces utilities for 3D transformations and expands its color palette with RGB options for more creative flexibility.


This update takes Tailwind’s utility-first approach to new heights, giving developers even more control over their designs.

Tuono: Rust + JavaScript = Speed

For those exploring the Rust ecosystem, a new project called Tuono offers something truly groundbreaking. Think of it as the Rust equivalent of Next.js, designed for high-performance server-side rendering (SSR).


  • React Integration: Tuono uses React on the frontend, but where it shines is on the backend, leveraging Rust’s unmatched speed for SSR.


  • Blazing Performance: It handles up to 136,000 requests per second, making it ideal for projects that need to scale without sacrificing speed or performance.


If you’re looking for a way to combine the best of JavaScript’s flexibility with Rust’s efficiency, Tuono might just be your next big experiment.

Tools & Releases You Need to Know

Let’s speed-run through some of the coolest tools and releases this week!

  • Motion: A lightweight animation library for JavaScript and React. At just 10% of the size of GSAP, it’s perfect for creating smooth, fluid animations and transitions with ease.


  • Jam: This browser extension takes bug reporting to the next level by capturing instant replays and developer logs with one click. Already used by 140K+ users, it integrates smoothly with tools like Jira and Asana, making bug logging 20x faster.


  • Viselect: An ultra-lightweight (~4kb) library for selecting DOM elements with ease. It works with vanilla JavaScript and popular frameworks like React, Vue, and Preact—perfect for adding interactive selection features without added overhead.


  • Vue Data UI 2.4: A powerhouse for Vue developers, this library offers over 40 customizable charts. Whether you’re building data stories or interactive graphs, this is your go-to tool.


  • Mantine v7.14.0: A huge update for React developers with new components like AngleSlider, RadialBarChart, and FunnelChart, plus enhanced features for managing multiple modals and drawers.


  • Turborepo 2.3: Introducing exciting updates like the Boundaries RFC to enforce monorepo structure, package task shortcuts, and simplified cache control. Be sure to update with npx @turbo/codemod migrate to stay ahead!


If you found these JavaScript updates useful, give this post an upvote to help others discover it. Don’t forget to share it with your fellow developers, and keep an eye out for more insights in the JavaScript world.


Until next time, keep coding and stay curious!

References

Tailwind CSS v4

Tuono

Viselect

Jam

Vue Data UI 2.4

Motion

Mantine v7.14.0

Turborepo v2.3