Дайджест новостей и полезных статей из мира фронтенд-разработки за неделю 29 августа—5 сентября.

🔥 Три главные статьи

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

📔 API геолокации представлено в виде рекомендации W3C.

🧬 HTML

📔 Почему размер сайта должен быть меньше 14 килобайт. Буквально, чтобы два раза не вставать.

📔 Погружение в недооценённый элемент <output>. С его помощью, например, можно сделать свой markdown-редактор, а вы о нём даже не слышали.

🖌 CSS

📔 Выражения от контейнера уже здесь. Краткий обзор того, как работают выражения от контейнера. Как их использовать с реальными примерами из жизни и как выглядит утверждённый синтаксис.

📔 Современные альтернативы БЭМ: Cube, HECS, WILS, GPC, а также другие акронимы. БЭМ — это очень хорошо, но он не учитывает вступление в новую CSS эру с выражениями от контейнера, теневым DOM, каскадными слоями и новыми селекторами.

📔 CSS-клаcсы — это вредно. Имена классов — архаичная система, которая служит плохим посредником для ваших примитивов пользовательского интерфейса.

📔 Удобное использование каскадных слоёв.

📔 Именованные грид-области: использование и визуализация.

🏗 JavaScript

📔 Список необходимых знаний для TypeScript. Для тех, у кого нет времени на детальное изучение инструмента.

📔 Выпущен TypeScript 4.8 — эволюционное обновление с небольшими улучшениями.

📔 Узнайте, как телескоп James Webb использует JavaScript.

📔 Как вы произносите JSON?

📔 Шаблоны Typescript: API контрактов. Рассмотрим подход к написанию практичных API-контрактов, который устраняет целый класс ошибок.

📔 Экспортирование по умолчанию в JavaScript-модулях ужасно. Узнайте, почему экспорт по умолчанию не стоит использовать.

🚀 React

📔 Почему важно понимать процессы повторного рендеринга для максимально возможной производительности вашего приложения. Узнайте, почему в React происходит повторный рендеринг.

📔 Погрузиться в принципы композиции для проектирования и создания масштабируемых повторно используемых компонентови забыть обо всём на свете.

📔 Узнайте, как использовать формы. Знания помогут легко освоить React Hook Form или Formik.

📔 7 способов создать новое приложение на React. СRA один из них, но есть и другие.

🎥 Изучите React Router v6 за 45 минут.

📔 Улучшите метрики взаимодействия с помощью React 18 и Suspense.

📔 Доступно про useMemo и useCallback. Почему полезны, когда использовать и как извлечь максимальную пользу.

📔 Чем хорош useContext и почему он может не подходить вашей команде.

📔 Отлавливаем ошибки в React.

📔 Когда использовать useLayoutEffect вместо useEffect. Если у вас мерцает интерфейс, то, возможно, вы используете не тот хук: всё дело в том, срабатывает хук до или после того, как браузер отрисовал интерфейс.

💽 Node.js

📔 Выпущен Node v16.17.0 (LTS) c util.parseArgs для синтаксического анализа CLI-аргументов, экспериментальным загрузчиком ESM, node:test.

📔 Выпущен Node v18.8.0 (Current) с -build-snapshot и -snapshot-blob для создания моментальных снимков на уровне пользователя. npm обновился до 8.18.0, в которой представлена команда npm query.

📔 Пересмотрите использование устоявшихся шаблонов и инструментов. 9 общих подходов к пересмотру, включая Dotenv, Passport. js и условный код на основе NODE_NV.

📔 Большие изменения в Deno. Одна из целей — «заставить подавляющее большинство npm-пакетов работать в Deno».

📔 4 способа минимизировать количество зависимостей

⚡ Производительность

📔 Как создать E-commerce сайт с идеальной оценкой Lighthouse.

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

📔 react-easy-crop 4.5 — инструмент для обрезки изображений и видео.

📔 ReacTOUR 3.0 — путеводитель по компонентам в интерфейсе.

📔 file-type 18.0 — для определения типа файла из буфера. Ориентирован исключительно на нетекстовые форматы.

📔 Soketi — простой и быстрый WebSocket-сервер.

📔 brotli-wasm — компрессор и декомпрессор Brotli. Работает в Node. js и браузере.

📔 NodeGui — для создания кроссплатформенных настольных приложений с помощью JavaScript и CSS. Под капотом использует Qt GUI, а не Electron.

📔 pico. js — библиотека распознавания лиц в 200 строках JS.

📔 Focus Trap 7.0 — ловушка фокуса внутри DOM-узла.

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

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