Frontend Briefly - News and insights from the world of frontend development #9

1. News in browsers

This month brought some great news to browsers. What I am most looking forward to are the news in CSS, such as container queries or new scale, rotate, and translate properties:

1.1 New way of writing media queries

Google Chrome 104 added support for the new media queries entry. For now, only Chrome and Firefox browsers support the new feature, but there is a PostCSS plugin that rewrites the new syntax into the old form. You can find other news in Google Chrome 104 in this article.

// Before:
@media (min-width: 400px) and (max-width: 600px) {
  /* Styles for viewports between 400px and 600px. */
}

// Now you can use:
@media (400px <= width <= 600px) {
  /* Styles for viewports between 400px and 600px. */
}

1.2 New properties in CSS

Until now, we had to write the transformation functions for the CSS transform property in one. However, from now on we can write scale, rotate, and translate as separate CSS properties. This news will simplify our work, especially with animations. The new notation is supported in all browsers since the release of Google Chrome 104! You can read more about the new CSS transform notation in the article on the web.dev portal.

// Before
.target {
  transform: translateX(50%) rotate(30deg) scale(1.2);
}

// Now you can use individual properties:
.target {
  translate: 50% 0;
  rotate: 30deg;
  scale: 1.2;
}

1.3 CSS container queries

Especially when creating components, we sometimes need to style not based on the entire width of the screen, but only based on the width of the component. This is what container queries are for, which came along with other new features in Google Chrome 105 🎉.

Ahmad Shadeed wrote in his article about container queries that this is a similar big change as when media queries came to styling responsive websites. However, we still have to wait for better support, as container queries are currently only supported by Chrome 105 and Safari 16.

‍

2. A few tips for working in DevTools

If you use Google Chrome for development, be sure to check out these tips for working in DevTools:

2.1 Web performance overview

We use Core Web Vitals metrics to analyze website performance. If you're looking for a way to effectively debug these metrics, check out the Performance insights panel in the browser's DevTools. In it, you can view an overview of the website's performance and detect potential problems. You can find more about Performance insights panels in this article.

2.2 Explore and edit animations directly in DevTools

In DevTools you will find the Animations tab, where you can slow down, replay, adjust the timing of animations and see the results immediately. On the web.dev portal, you can find a video where the panel with animations was analyzed in more detail.

2.3 Shortcuts in the console

• Instead of document.querySelector(), you can use the shortcut $ just like in jQuery
• Display event listeners via getEventListeners()
• Instead of console.log(object) use table(object) and you will get a clear table
• You can find more shortcuts in the article on the web.dev portal

3. Big changes awaits for Deno

Deno (an alternative to Node.js) is a simple, modern, and secure runtime for JavaScript, TypeScript, and WebAssembly that runs on V8 and is built in Rust. According to what they write on their blog, Deno will soon move forward significantly:

• Deno will soon support easy npm package import
• Deno aims to be the fastest JavaScript runtime (it will be interesting to watch the battle with Bun.js)
• Deno recently passed 4.1 million downloads on GitHub

You can also watch a comparison of Deno and Bun.js in the video: Bun and Deno: New Runtimes for the Third Age of JavaScript.

4. CSS Day 2022

Layout styling in CSS has moved significantly in recent years. In addition to flexbox and grid, we also have aspect-ratio, min, max and clamp functions, logical properties, etc... In addition, subgrid, container queries, :has() pseudo-class and several others are waiting for better support... Therefore, even in CSS the problem is not whether it can be styled, but which way to choose. At the CSS Day 2022 conference, the Creative CSS Layout lecture was on this very topic. If you want to watch a recording of other lectures, you can find them on YouTube.

5. Support for WebAssembly in Edge

Thanks to WebAssembly support in Vercel's Edge, you can write your code e.g. in Rust, Go or C to run on a serverless architecture. Any language that can be compiled into Wasm can now be run in Vercel's Edge Functions. You can read more about Wasm and its support in Edge on their blog.

6. Astro v1.0

Astro is an all-in-one web framework that was released in August with version 1.0. A little about this framework:

1. Astro was designed for content-rich websites
2. The content is rendered on the server
3. The resulting website is very fast
4. Easy to use (I haven't had a chance to verify it yet)
5. It supports React, Preact, Svelte, Vue, Solid, Lit and many others

You can find more about this framework on their new website.

‍

Other articles worth reading

• Why React Re-Renders -Many developers work daily with React without knowing how it works in the background. Read the article by Josh W. Comeau where he explains how re-render works in React.
• Understanding useMemo and useCallback – In the article you will learn everything you need to know about the useMemo and useCallback hooks, why they are useful and how to get the most out of them.
• Improving INP with React 18 and Suspense - How to use Suspense to improve the Interaction to Next Paint metric and speed up the website.
• Rakuten – Rakuten 24 constantly measures, optimizes and monitors Core Web Vitals and other metrics, which has had a significant positive impact on their business.

A few articles about accessibility

• How Our Organization Improved Web Accessibility (Case Study) - How "Understood" managed to improve the usability of their websites.
• Designing Better Error Messages UX -How to error messages to make them useful and improve usability.
• Bag some AAA wins where you can - If possible, we should also try to implement the WCAG AAA recommendations.

Summary

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