Frontend Briefly - News & tips from the world of frontend development #5
A regular summary of the most important news, articles or tweets in the world of the front end is here! For the month of April, we have prepared the top 7 news that no frontend developer should miss. In addition, you will find links to other interesting articles that are worth reading.
1. Faster loading thanks to fetchpriority
2. Modal windows using the <dialog> element
The HTML element <dialog> has recently gained support in all modern browsers. With this element you can create modal windows that will be styleable and especially natively accessible. You don't have to deal with e.g. focus or close with the ESC key. You can find all the important information in the article Building a dialog component or you can watch the video.
3. What is new in ECMAScript 2022
- top level await,
- private attributes and methods in classes,
- method .at(),
4. Article series # 30DaysOfPWA
To learn more about Progressive Web Applications (PWA), be sure to check out the "30 Days of PWA" Blog Series. The series of articles is structured into 4 main categories:
- Basic PWA concepts.
- Advanced PWA options and application examples.
- Developer tools for debugging, testing, etc.
- Best practices and PWA support for individual platforms.
5. News in Google Chrome
You can read the changes as well as the news that came with the new version of Google Chrome in the following articles:
- Deprecations and removals in Chrome 101 - Probably the most important change is the reduction of information in the User-Agent string.
- What's New In DevTools - I was most interested in importing and exporting recorded user steps as a JSON file. It can be of good use when reporting bugs.
6. How to update TypeScript in React 18
Not all changes in the new major version of React 18 are backward compatible. If you are going to update a project to React 18 that uses TypeScript, then first read the instructions: Upgrading to React 18 with TypeScript. You will find information in it that will save you a lot of time when fixing the project.
7. Software Engineering at Google Book
This book is not directly about programming, but about the engineering approaches they use at Google. You will learn how to maintain even large projects while maintaining their quality. The book is suitable for you if you are interested, as they have e.g. processes used by Google or how people collaborate on projects. The book is available in PDF completely free of charge.
Several articles on accessibility
- The "inert" attribute is finally coming to the web - New inert attribute that allows you to block a certain part of the page. For example, when you open a modal window, we want to lock the content of the page so that other elements cannot be clicked or focused.
- Keyboard button clicks with Space and Enter behave differently - Some elements, such as buttons on a page, can be clicked with the space bar or Enter. But how do these clicks differ?
- Web Accessibility Checklist - Studying the complete WCAG specification is quite exhaustive. Therefore, it is advisable to start with a checklist first, where you will find a summary of how to make the site accessible.
More articles worth reading
- New to the web platform in April - An overview of the features that got into the stable and beta versions of web browsers during April 2022.
- Understanding Layout Algorithms -If you want to be good at CSS, you need to know how CSS works. In this article, Joshua Comeau explains how layout algorithms work.
- The Front-End Developer's Guide to the Terminal - As a frontend developer, you must also be able to work with the terminal. In this article you will find instructions on how to use it.
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 March Frontend Briefly.