Дайджест новостей и полезных статей из мира фронтенд-разработки за неделю 25–31 июля.

👨 Доступность

📔 Используйте Firefox для тестирования доступности сайта.

🍶 Спецификации

📔 Обновления с 91 встречи TC39. Hashbang грамматика перешла на stage 4.

📔 Payment Request API 1.1. В новой версии внесены уточнения, как обрабатывать необязательные данные в платёжном запросе.

🧬 HTML

📔 Как правильно выбрать <article> или <section>.

📔 Как сделать многоязычный сайт более работоспособным в RTL-режиме используя только HTML и CSS.

🖌 CSS

📔 Совет из будушего как улучшить микро взаимодействие с инпутом с помощью: has.

📔 Текущее состояние Masonry(кирпичной кладки) с помощью CSS. Спецификация CSS Grid Layout Module Level 3 и статья из 2020.

📔 Помогите выбрать синтаксис для вложения в CSS.

📔 Когда применять: focus-visible?

📔 Как делать Masonry-раскладки с помощью гридов и object-fit: cover.

📔 Совместное использование container queries и: has().

🏗 JavaScript

📔 Узнайте как перезагрузить страницу с помощью History API, по действию, спустя время.

📔 15 частых ошибок новичков в JavaScript.

📔 Всё что нужно знать о картах иморта.

🚀 React

📔 Кодовые базы крупных React-приложений для самостоятельного изучения.

📔 Как пользоваться React? История от разработчика, который пишет на React с самого создания библиотеки.

📔 Почему Remix не React-фреймворк, а по сути фреймворк с полным стеком.

📔 Полностью знакомимся с жизненным циклом на примере крестиков-ноликов.

📔 Как сделать range-слайдер с помощью rc-slider.

💽 Node. js

📔 Начались тесты для Bun. В некоторых задачах Bun явно опережает node. js и Deno. Сможет ли Bun обогнать Deno и бросить вызов Node. js? Нам ещё придется подождать и посмотреть.

📔 Что такое Bun? Какие проблемы решает и что не так с другими средами выполнения JavaScript.

📔 Ещё больше улучшений для безопасности в npm: улучшенный интерфейс npm cli, новая команда для проверки целостности npm-пакетов.

📔 Создайте shell-скрипты на основе ESM для Unix и Windows.

📔 Node v18.7.0(Current): обновены npm и Undici, http теперь отправляет dropRequest-событие когда запросы отбрасываются из-за server. maxRequestsPerSocket, util. parseArgs продолжает улучшаться.

🛠 Инструменты

📔 Mantime 5.0 библиотека React-компонентов.

📔 Storybook 7.0 предварительный обзор мажорной версии.

📔 React-intersection-observer.

🕸 Браузеры

📔 Как новый режим блокировки(lockdown mode) в iOS влияет на производительность и работоспособность WebApi.

🎓 Общее

📔 4 важных UI-элемента для взаимодействия: инпуты, навигация, аккордеоны, информационные элементы.

📔 Узнайте как дизайнеры пришли к новой иконке Chrome.

📔 Как разработать элемент выбора даты учитывая: мобилку и десктоп, типы полей ввода, доступность, показ текущей даты, блокировку дат, уменьшение ненужных данных.

Как читать статьи на английском языке

В дайджесте много статей и видео на английском языке, чтобы это не стало препятствием: в Google Chrome есть функция перевода страницы с любого популярного языка, а видео можно перевести в Яндекс Браузере.