May 1, 2024

🌸 April 2024: ESLint 9, React 19 and TS 5.5 Betas, Signals

Hey front end platform fam!

Hope you all had a lovely April. I’m definitely noticing myself getting happier as the days get longer. On the front end platform side of things, I worked on a tooling overview page for the site. You can get a sense of the current ecosystem and browse by category. Check it out here.

Now let’s review what happened this past month.

April Highlights

• The next major version of ESLint is here. ESLint v9 makes the new flat config the default. Check out the migration guide for the full list of breaking changes.

• The React team released the Beta for React 19. There’s several new hooks and APIs, such as use, useOptimistic, useActionState, as well as support for Server Components. React 19 also improves existing APIs, e.g. simplifying forwardRef and context providers. Check out the React 19 Beta upgrade guide as well as the types-react-codemod repo for codemods. The React team recommends upgrading to 18.3 as an intermediate step, which adds warnings for deprecated APIs.

• April was a big month for Betas. On top of the React 19 Beta, we also have the TypeScript 5.5 Beta which brings us the much awaited Inferred Type Predicates feature (deep dive on the making of this feature). 5.5 also disables a number of options that were marked as deprecated in 5.0. They will do nothing starting 5.5 and be removed entirely in 6.0.

• There’s a new TC39 proposal for JavaScript Signals that aims to provide infrastructure for managing reactive application state. Give it a try in this JS playground.

Tooling Roundup

• Biome 1.7 adds the ability to easily migrate from ESLint in a single command.

• Bun 1.1 brings support for Windows.

• Astro 4.7 brings improvements to the Dev Toolbar API and makes it easier to keep your project up-to-date.

• TC39 advanced several proposals.

• Node released version 22 as well as security updates for 18, 20, and 21.

• Cypress adds new accessibility features.

• Shadcn adds Lift Mode to Blocks, which makes it easy to lift smaller components from blocks to copy and paste.

• pnpm 9.0 improves the lockfile format and resolution of peer dependencies.

• There’s an open conversation on changes to configurations for the next major version of typescript-eslint.

• Vitest 1.5 is released as well as a new official Vitest VS Code extension.

• Stylelint 16.4 adds no-unknown-custom-media and updates/fixes several existing rules.

• React Native 0.74 adds Yoga 3.0, batched onLayout updates (New Architecture), and Yarn 3 as the default package manager for new projects.

• The Tailwind playground now has support for v4.

• Deno 1.43 improves language server performance.

Articles and Guides

HTML, Accessibility, and Design Systems

• HTML popover Attribute

• HTML attributes vs DOM properties

• Don’t use the maxlength attribute to stop users from exceeding the limit

• Managing User Focus with :focus-visible

• Demystifying Screen Readers: Accessible Forms & Best Practices

• Don’t put crap in the design system

CSS and Styling

• An Interactive Guide to CSS Container Queries

• The Unreasonable Effectiveness of Inlining CSS

• Hardest Problem in Computer Science: Centering Things

• Cool queries

• Help Webkit invent CSS Grid Level 3, aka “Masonry” layout and An alternative proposal for CSS masonry

• The Two-Tree Problem with Styling on the Web

• A primer on the cascade and specificity

• CSS Button Styles You Might Not Know

• Detect JavaScript Support in CSS

Performance and Testing

• Deep Dive into Rspack and Webpack Tree Shaking

• Profile Node.js performance with the Performance panel

• Faster Connectivity !== Faster Websites

• Improving our Jest execution time by 300%

• Optimizing WebKit & Safari for Speedometer 3.0

Infrastructure and Architecture

• The Least Worst Architecture

• Deno: How we built JSR

• Fantastic Rewrites and How to Avoid Them

• From the 80's to 2024 - how CI tests were invented and optimized

Tooling

• Trip report: Node.js collaboration summit (2024 London)

• An intro to TSConfig for JavaScript Developers

• How to write a code formatter

• The Cost of a Lint Rule

• Upgrading jQuery: Working Towards a Healthy Web

• What is Vite (and why is it so popular)?

• How we migrated the massive DefinitelyTyped repository from using a linter for formatting to the dprint formatter

• JSR is Not Another Package Manager

• GitHub Actions: UI Improvements

React

• React Compiler & React 19

• CSS in React Server Components

• How does useOptimistic work internally in React?

Productivity and Documentation

• Using GitHub Copilot in your IDE: Tips, tricks, and best practices

• Healthy Documentation

• Open Source Security (OpenSSF) and OpenJS Foundations Issue Alert for Social Engineering Takeovers of Open Source Projects

Miscellaneous

• Guest Writing for CSS-Tricks

• Share your thoughts on the future of Node.js

• Vite San Francisco Meetup on May 9

• StackBlitz San Francisco Meetup on May 13

---

That's all for now, folks! 👋

Got thoughts or questions? I'd love to hear from you. My DMs @fe_platform are open.

Enjoyed what you've read? Do the ultimate good deed – pass it on to a friend who'd love it as much as you did!