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

1. What's new in CSS3?

CSS3 has brought a lot of useful things and fortunately the development is still continuing. In this article you will find an overview of what has been added to CSS since 2015. In addition, you will also find an overview of what news to expect in 2022.

2. CSS Cascade Layers

One of the most common causes of frustration when writing CSS is specificity. It often happens that we inadvertently rewrite styles. Sometimes we have nothing left but to use !important. A novelty, CSS Cascade Layers, is finally coming to the rescue, which solves just this problem. If you want to study more about it, be sure to check out Hello, CSS Cascade Layers by Ahmad Shadeed, who makes really good articles. Alternatively, read this A Complete Guide to CSS Cascade Layers on the CSS-Tricks website.

‍

3. How to test frontend

If you're looking for a detailed test guide, be sure to read Testing Pipeline 101 For Frontend Testing. Here you will find basic methods of frontend testing and you can also create an automated test pipeline using GitHub actions according to the instructions.

‍

4. Frontend predictions for 2022

Speculations on what we might see this year, including the return of micro frontends, functional JavaScript, and the demise of Jamstack as we know it. In addition, in the article you will find a summary for 2021 in the world of the front end.

‍

5. Four most important features coming in ES2022

ECMAScript 2022 is a new JavaScript standard that will be released in June 2022. Read about these four new features that come in ES2022:

1. Method at() in arrays
2. Error cause
3. Top-level await
4. Private slots and methods

6. New version of Next.js 12.1

A new version of the Next.js React Framework has been released. With the new version came several requested news, for example:

• Added support to the Next.js Compiler for Styled-components, Relay...
• Zero-configuration Jest plugin
• 7x faster minification than Terser
• React 18 & Server Components (Alpha): Improved stability and support.

You can find more in this article.

7. Better support of PWA on iOS

iOS 15.4 beta brought some interesting news. Finally, there is support for icons in the manifest. We have had iOS Safari for four years, which supports the manifest, but the icons declaration has so far been ignored. Furthermore, push notifications (but of course it has a catch), more CSS and UI tweaks (:has(), accent-color, <dialog>), Web XR for augmented and virtual reality ... and much more.

8. The State of JavaScript 2021

The results of The State of JavaScript survey are published. This survey ran from January 13 to February 2, 2022 and involved 16,085 respondents. Its goal is to identify upcoming trends in the web development ecosystem, which helps developers make technological decisions. This survey focuses on predicting what is to come in the coming years, rather than analyzing what is popular now. In addition, another State of Frontend 2022 survey is underway, in which you can participate and help identify new trends in the fronted world.

‍

Some articles about accessibility

• No Accessibility Without Disabilities - Developers often do not have enough knowledge about how people with disabilities actually use the web, leading to pre-combined solutions that make usability even worse.
• No Motion Isn’t Always prefers-reduced-motion - The prefers-reduced-motion setting does not always mean that you should turn off all animations. Learn what this setting actually means and why disabling all animations may not be appropriate.
• 5 Accessibility Quick Wins You Can Implement Today - Simple tips to improve your site's accessibility.

Other read worthy articles

• Aspect Ratio is Great - How to replace a padding hack with a single line of CSS code aspect-ratio.
• Replace JavaScript Dialogs With the New HTML Dialog Element - Why replace the javascript modal windows alert(), confirm() and prompt() with HTML <dialog>.
• How to Favicon in 2022: Six files that fit most needs - Instead of providing dozens of icons (favicons), you only need five icons and one JSON file.
• New to the web platform in January - New features that got into the stable but also beta versions of web browsers during January 2022.
• Bonus: MDN Web Docs has undergone redesign:

Conclusion

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 January Frontend Briefly ..