Frontend Briefly - News & tips from the world of frontend development #7

1.Faster page loading with Early Hints

Early Hints is a new HTTP status code: 103 Early Hints. Thanks to it, during the generation of a time-consuming response, the server can send a hint to the client about additional resources that will probably need to be loaded (e.g. css or javascript files). The client does not have to wait for a response from the server, but can request additional resources while still waiting for the first response. You can read more on the Chrome Developers blog.

2. Support for Internet Explorer 11 has ended, kinda

Support for Internet Explorer 11 ended on June 15, 2022. On the official blog you will find details of what this means for regular users and developers. After this date, you will no longer open Internet Explorer, but you will be automatically redirected to the Edge browser with IE mode support. (Unfortunately) Microsoft has committed to supporting IE mode in Microsoft Edge at least until 2029, so we can only be partially happy.

3. News in React world

• News in the new version of Next.js 12.2 - Middleware, On-Demand ISR, Edge API Routes, SWC plugins, improvements for next/image...
• React Labs: What We've Been Working On – June 2022 - You can read the article on the official blog what React developers are working on.
• On Reddit, Dan Abramov explains why data fetching using useEffect is not an ideal solution.
• You Might Not Need an Effect - If you haven't caught it yet, React is working on new and clearer documentation. This month, a new section on useEffect has been added to it, which I definitely recommend reading together with the Synchronizing with Effects section.

4. News in ECMAScript 2022

On June 22, the new ECMAScript 2022 version for the JavaScript language was officially approved. If you want to know what news has been added, read this article: Ecma International approves ECMAScript 2022: What's new? In addition, you will learn how the approval of a new version of ECMAScript takes place or what is the difference between JavaScript and ECMAScript.

5. WebAssembly in JavaScript ecosystem

In the lecture, you will learn where WebAssembly (WASM) is used everywhere in the JavaScript ecosystem. You will also discover several benefits that WebAssembly brings compared to a fully native JS solution.

6. News in Chrome

The new version of Google Chrome 103 brought several innovations, for example:

• HTTP 103 status code (early hints)
• Local Font Access API
• AbortSignal.timeout(),
• etc...

Another innovation in Chrome 104 is the recording of media queries. They can now be written as follows:

@media (400px <= width <= 600px )  {
  // Styles for viewports between 400px and 600px.
}

In addition, do not forget to read about the news in DevTools.

Other articles worth reading

• My Wonderful HTML Email Workflow - How to HTML and CSS in emails that works in all email clients.
• When You Should Prefer Map Over Object In JavaScript - Many developers use plain object even though it is preferable to use Map.
• Stack Overflow Developer Survey 2022 - See the opinions of 70,000 developers in a survey from Stack Overflow.
• Notes on maintaining an internal React component library - Some useful thoughts on maintaining a component library in React.

A few articles about accessibility

• "That's not accessible!" and other statements about accessibility - How to look at web accessibility testing.
• Using accessibility literacy to counter accessibility ignorance - How to raise awareness of accessibility within the entire team.

Conclusion

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 may's Frontend Briefly.