Frontend Briefly - News and insights from the world of frontend development #13
After a longer break, we have the latest updates, articles, and tweets from the frontend world again! 🎉 In September, we've prepared the top 8 updates that shouldn't be missed by any frontend developer. In addition, here you will find links to other interesting articles that are worth reading.
1. Node.js 16 died prematurely
Node.js 16 is dead since September 11, 2023. Support for version 16 ended seven months early to coincide with the end of support for OpenSSL 1.1.1. The current LTS version is Node 18, but I recommend you already migrate directly to Node 20. Active support for Node 18 ends in a few days, on October 18, 2023. Then, from October 25, 2023, there is a new LTS version of Node 20 with support until April 30, 2026. In addition, there is also native support for.env files in Node 20, which is another reason to migrate to version 20 🎉.
What's the difference between LTS and Current versions?
LTS versions are considered stable and intended for production environments. They are supported for a longer period of time, typically 30 months from the release date. During this time, critical bug fixes and security updates are regularly provided for the LTS version.
The current version includes the latest features, improvements, and updates. However, they may still undergo testing and are not recommended for use in a production environment. Current releases are a preview of what the next LTS version will be after testing, stabilisation, and community feedback.
2. Bun 1.0
A replacement for Node.js, so you don´t need:
bunxis 5 times faster
cross-env— Bun can read
.envfiles (now also in Node.js 😜)
pm2— built-in watch mode
ws— built-in WebSocket server
fetch(now also in Node.js 😜)
Transpiler — Bun can work with
.tsx files, so you can replace:
Package manager — Bun is an npm-compatible package manager, so you can replace:
And lots of other "improvements." You can find all the new features on the Bun blog.
2.1 Is it time to replace Node with Bun?
There's a big hype around Bun.js in the community. Does it mean we should replace Node.js?
3. Next.js 13.5
If you found Next.js slow and resource-intensive, try updating it to the latest version. Next.js 13.5 comes with the following improvements:
- 22% faster local server startup
- 29% faster HMR (Hot Reload)
- 40% less memory usage with the
- Optimised package imports
- Find more on the blog
4. Server Components
React has celebrated its 10th anniversary, yet it continues to bring groundbreaking improvements. A few months ago, React introduced Server Components. It will be a big change for React and frontend developers. That's why a lot of questions arise: what is it, how does it work, what are the benefits, or if it's the same as SSR...If you're also looking for answers to these questions, I found two great articles where you can find the answers:
You can also find the first experience with Server Components from a speed perspective in this article: React Server Components Made Our Site Faster.
5. Browser News
The biggest news that will ease developers a lot of nerves and work are exit/entry animations. Finally, we don't have to install different animation libraries just to animate
display: none. Now, the browser can handle these animations natively thanks to the
transition-behavior: allow-discrete attribute or
@starting-style rule. More can be found in the article: Four new CSS features for smooth entry and exit animations. Support is only in Chrome and Edge as of version 117. For other Chrome browser news, check out the article: New in Chrome 117.
A lot of new features have also been added to Safari. You can find all the new features on their blog at WebKit Features in Safari 17.0
6. Astro 3.0
Astro 3.0 is the first major web framework that supports the View Transitions API. It offers smoother web navigation with animation support, which was previously possible only in single-page applications (SPA). If you want to know more about the View Transitions API, read the article: View Transitions API & meta frameworks: a practical guide.
Other big updates in Astro v3 are:
- Image optimization (stable)
- Faster rendering
- SSR improvements for serverless
- HMR improvements for JSX
- Optimized build
7. State of HTML & CSS
8. New React Courses
The Joy of React and react.gg are two modern courses that are worth taking. They offer an interactive way to master modern React. I'm also a bit jealous that these courses didn't exist when I started with React. However, even more experienced React developers can benefit from these courses. You'll learn about new features like server components, suspense, or concurrent rendering.
Other articles worth reading
- One Thing Nobody Explained To You About TypeScript - How to correctly set up tsconfig for your project.
- useMemo overdose - When (not) to use the useMemo hook.
- Your Cache Headers Could Probably be More Aggressive - What we can do to push cache performance even further.
- Deep Dive: Caching and Revalidating - How cache and revalidation work in Next.js App Router.
- If you want to address tech debt, quantify it first - Addressing tech debt requires quantifying its cost and impact on productivity.
- Four common types of code coverage - What is code coverage and what are four common methods to measure it.
- The Hidden Cost of Open Source - Vue.js Live 2023 - What are the real costs that many companies don't consider when using open source.
- Remix v2 - What´s news in Remix v2.
A few articles about accessibility
Equivalent experience can cut both ways - Making the web accessible and usable from the start.
A11y-Driven Development - Why consider accessibility from the beginning of development.
If you liked the news overview, don't forget to subscribe to our newsletter. That way you won't miss any more news in the world of frontend.