Frontend Briefly - News & Insights from Frontend development world #10
A regular summary of the most important news, articles or tweets in the frontend world is here! For the month of September, 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. Web Almanac - state of the web report 2022
The Web Almanac is a detailed report on the state of the web supported by data from a dataset of 8,360,179 web sites, 43.88 TB of data and 108 experts who worked on data analysis. The report has 22 chapters, where you will find clear graphs with current data on the state of the web, information on emerging trends and also tips for improving the current state.
2. News in Next.js
2.1 Next.js 12.3
The new version of Next came with interesting news:
- Improved Fast Refresh: .env, jsconfig.json and tsconfig.json files are hot reloaded.
- TypeScript Auto-Install: After adding .ts, typescript will be automatically configured and installed.
- Image Component: next/future/image is now stable.
- SWC Minifier: The new code minifier is 7 times faster than the original version with Terser.
- New Router + Layouts Update: New information about upcoming features in Next.js.
2.2 Next.js Layouts RFC
The detailed RFC for the biggest Next.js update has been available for several months. Here you will learn about the planned changes for routing, layout or data fetching. In the article Next.js Layouts RFC in 5 minutes you will learn about the most important functions that will come in the new major version of Next.js.
2.3 Next.js Conf 2022
Next.js Conf 2022 will be held on October 25. The topics of this year's conference are
- Features using Server Components, Streaming or Suspense
- Conventions that make it easier for developers to optimize and scale applications
- Open-source tools that speed up development and building
3. News in web platform
In September, new versions of the Firefox 105, Chrome 106 and Safari 16 browsers were released, which brought several interesting novelties:
- Container queries
- Grid layout
- Encoding API
- New Intl API
Read more in the article on web.dev.
4. React Router 6.4
React Router 6.4 came with several new features that it took over from the Remix framework:
- Loading data using Route loader
- Mutation of data using Route action
- Error handling using Route errorElement
- Defer non-critical data with defer and Await
- and many more functions…
5. The Web is Good Now
The evolution in the web environment has simplified a lot of work for developers. In the lecture The Web is Good Now, you can look at improvements for typography, layout animations or media manipulation...
6. :focus-visible available in all modern browsers
CSS pseudo class :focus, creates an ugly outline around buttons or links when clicked. That's why developers often remove styling for the :focus state. However, by doing so, we break accessibility for people using a keyboard to navigate the web. The new CSS property :focus-visible displays the outline only when navigating with the keyboard.
More articles worth reading
- Optimize long tasks - How to optimize long tasks and prevent blocking of the main browser thread.
- Critical CSS? Not So Fast! -Critical CSS pattern sounds like the right choice for web optimization, but it often fails to meet developers' expectations.
- GIFs Without the .gif: The Most Performant Image and Video Options Right Now -Why not use .gif images anymore and what are the best alternatives.
- React I Love You, But You're Bringing Me Down - An article that caused a bit of a stir among React developers and @dan_abramov also responded to it.
A few articles about accessibility
- Making Sense Of WAI-ARIA: A Comprehensive Guide - In the article you will find when and how to use WAI-ARIA correctly.
- Learn Accessibility - New course on accessibility on the web.dev portal.
- What's new in WCAG 2.2? - WCAG 2.2 is close to release. What news will it bring?
- Better accessible names - How to write accessible and useful names.
- A Designer’s Guide to Documenting Accessibility & User Interactions by Stéphanie Walter - Good documentation helps teams implement accessibility requirements.
- Should I Use a Button or a Link? -A detailed article on the use of links and buttons.
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 August Frontend Briefly.