Frontend Briefly - News and insights from the world of frontend development #11
A regular summary of the most important news, articles or tweets in the frontend world is here! For the month of October, we have prepared the top 6 news that should not be missed by any frontend developer. In addition, here you will find links to other interesting articles that are worth reading.
1. Next.js 13
The biggest update of Next since its release is finally here 🎉. It was presented in style at the Next.js Conf 2022 conference, which I definitely recommend watching. Here are some news:
- folder app/ (beta) that supports Layouts, React Server Components, Streaming
- Turbopack bundler (alpha): Up to 700x faster than Webpack
- New next/image (stable): Faster and with native lazy loading support
- New @next/font (beta): Without layout shift.
- Improved next/link: Simplified API.
However, the new version of Next also has several breaking changes, e.g. the minimum version of React has been moved from 17.0.2 to 18.2.0. You can also find everything important on the Next blog.
Now it's time to replace Webpack with Turbopack, also built on Rust. Here are some (marketing) comparisons:
- 10x faster than Vite and 700x faster than Webpack
- Turbopack can run an application with 3,000 modules in 1.8 seconds. In the case of the Vite, it is 11.4 seconds.
Turbopack will be used in Next.js 13 as a development server, and later it will also provide a production build. You can read everything important on the Vercel blog.
The question is to what extent these are marketing numbers. Evan You, the creator of Vite, wrote a reaction to the first (marketing) benchmarks:
3. Node.js 18 LTS
Node.js 18 is in Long-term Support (LTS) 6 months after its release. You can easily develop new applications on the new Node and update older projects. Node.js 18 will be supported until April 2025. The biggest changes are e.g.:
- fetch API (experimental)
- Web Streams API (experimental)
- Blob, BroadcastChannel
- Test runner module (experimental)
You can find more on the Node.js website or on the node.green website, where you can view a clear table with supported functionality for all its versions.
4. The future of the web is on the Edge
We usually deploy our web applications on a server in one of the large data centers, e.g. in California, Germany... However, the future trend is different. We can already distribute static content around the world closer to users via CDN. However, this trend is also starting for dynamic web applications that you can deploy anywhere in the world. Is the future of the web on the Edge? You can find out on the Deno blog.
5. State Of CSS Survey
Take a few minutes to fill out the survey: State of CSS 2022. In addition to learning about new trends in CSS from the survey, you will also help browser developers prioritize their plans and work on better cross-browser compatibility. Also based on the last survey, browsers have implemented several improvements that have troubled CSS developers until then. You can also read more on the Smashing Magazine portal.
6. The future of rendering in React
In the article The future of rendering in React, you will read about the current rendering patterns in React, their problems and how the new patterns in React 18 try to solve these problems. Even if they are not currently ready for production, it is good to prepare for them.
Other articles worth reading
- The wasted potential of CSS attribute selectors - Styling with data-* and aria attributes improves web accessibility and code clarity.
- What if the team hates my functional code? - Almost any developer can write code that a computer understands, but good programmers only write code that humans understand.
- Customize and automate user flows beyond Chrome DevTools Recorder - How to export user flows from Chrome DevTools to automated tests such as Cypress.
A few articles about accessibility
- When life gives you lemons, write better error messages - Tips on how to write better error messages and what to avoid.
- aria-description crash course - New attribute to improve accessibility, but still not ready for production.
- How to write good alt text - What does a good alternative text look like and what mistakes do we make when writing it?
- SEO and Accessibility Are Symbiotic - Why accessibility is important for good SEO.
If you liked the news overview, don't forget to subscribe to our newsletter. You can also read the news from last month, which we brought in the September Frontend Briefly.