5. Apr 2022Frontend

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

A regular summary of the most important news, articles or tweets in the world of the front end is here! For the month of March, we have prepared the top 9 news that no frontend developer should miss. In addition, you will find links to other interesting articles that are worth reading.

1. React 18 is here! 

You will find the new version of React 18 available at npm. If you are interested in what is new in this version, then read the article on the official React blog, where you will find an overview of the news. There are really a lot of them, for example: client and server side rendering API, a lot of new hooks (useId, useTransition, useDeferredValue ...), Suspense, support for concurrency, etc ... If you are more interested in how to upgrade to the latest version, read this official instructions.

2. Interop 2022

For the first time, all major browsers have joined forces to address compatibility issues between browsers that have plagued web developers. If you are interested in how this project came about and what goals they have set, then read the article Interop 2022: browsers working together to improve the web for developers.

3. CSS news for 2022

The year 2022 brings a lot of news in CSS. Some browsers are already starting to support it and we still have to wait for some. If you are interested in an overview of these news, you will find a great article on the CSS-Tricks portal. Browser support is also mentioned for every feature, so you know what you can start using or what you can prepare for.

4. New features in Safari 15.4

A new version of Safari 15.4 is coming to WebKit with more than 70 new features. So this is a really big release. For example, you will find support for lazy loading images, <dialog> element, :has(), Cascade Layers, BroadcastChannel, new viewport units, etc ... If you are interested in all the news, read the article: New WebKit Features in Safari 15.4 on the WebKit blog.

5. Several articles on web performance

Chris Coyier from CSS-Tricks has written an overview of current articles on web performance. You can read them in this article: 7 Fresh Links on Performance For March 2022. Here you will find best practices for caching or how to speed up the Next.js framework even more.

6. New <selectmenu> element

Native form styling is among the top missing things for frontend developers. In the article Say Hello to selectmenu, and Fully Style-able select Element, Patrick Brosset introduces you to a new (so far only experimental) element for controlling <selectmenu> forms. You will learn how much easier it is to style this element compared to the traditional <select> element.

7. CSS Custom Highlight API

The CSS Custom Highlight API is a new W3C specification (currently in Working Draft state) that allows you to edit any range of text using JavaScript and then style it using CSS. You can read more in this article: CSS Custom Highlight API: The Future of Highlighting Text Ranges on the Web.

Príklad využitia CSS Custom Highlight API
Example of how to use the CSS Custom Highlight API

8. How to use HTML a CSS in e-mails in 2022

We can see in recent years that they are much more consistent in terms of HTML, CSS and JavaScript support. However, we cannot say the same about email clients. Read what you can use in emails in 2022 in the article: HTML and CSS in Emails: What Works in 2022?

9. Why to try out <dialog> element

The <dialog> element first appeared in 2014. However, it is only now that well-known browsers such as Safari or Firefox. The main idea of this HTML element is to facilitate the creation of modal and context windows. You can find a nice guide and an overview of this element in the article: A look at the dialog element's super powers.

Several articles on accessibility

  • The WebAIM Million - 2022 Report on the Accessibility of 1,000,000 Home pages. The results provide an overview of the current state of web accessibility.
  • A Designer’s Guide to Documenting Accessibility & User Interactions - Good documentation helps teams implement accessibility requirements correctly. In the article, you will find instructions on why and how designers can document various aspects of accessibility.
  • WCAG 2.1 Map - A comprehensive map of the WCAG 2.1 specification available for download.

More articles worth reading

Summary

If you liked the news overview, don't forget to subscribe to our newsletter. You can also read the news for last month, which we brought in the February Frontend Briefly.

Andrej NemečekFrontend Developer