Фронтенд-новости #19

Дайджест новостей и полезных статей из мира фронтенд-разработки за неделю 8–14 августа.

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

• Примеры использования, производительность и ограничения :has()
• Аннотация типов в JavaScript
• Причины, по которым вам следует использовать Firefox

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

📔 Рассказ о работе слепых программистов-первопроходцев, которые десятилетиями работали над созданием инструментов, необходимых сообществу.

📔 Лучшие практики для инклюзивных текстовых сайтов. Большое количество советов по улучшению доступности текстовых сайтов.

📔 Как организация Understood улучшила доступность Интернета.

🧬 HTML

📔 Самый первый сайт спустя 31 год и небольшая предыстория. Обязательно посмотрите на разметку первого сайта.

🖌 CSS

📔 Анимация границ. Существует несколько методов установки границ: border, outline, box-shadow. Каждый из них имеет свои плюсы и минусы. Например, border чаще всего не используют из-за анимации.

📔 Не всегда удаление единиц измерения у 0 это хорошо. 0 может быть и <число>, <длина>, <процент>. Calc() не всегда способен определить тип значения.

📔 О переполнение текста. Почему text-overflow — не самое лучшее решение.

📔 Выражение от контейнера и :has(). Как использовать их вместе.

📔 Google Chrome 105 о :has(). Примеры использования, производительность и ограничения.

🏗 JavaScript

📔 Аннотация типов в JavaScript.

🚀 React

📔 Шаблоны проектирования и шаблоны компонентов для создания приложений.

📔 «Почему нам пришлось отказаться от React Query» и что нам это дало.

💽 Node.js

📔 Как использовать многопоточность. Пошаговое руководство о том как в Node.js работают потоки.

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

📔 Генерация регулярных выражений из представленных примеров.

🕸 Браузеры

📔 Причины, по которым вам следует использовать Firefox.

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

📔 Инструменты Core Web Vitals. Определите, сравните, проанализируйте и исправьте свои показатели Core Web Vitals, чтобы повысить производительность.

🎓 Общее

📔 Группы против фреймов в Фигме. Простые ответы на вопрос «В чём разница между группами и фреймами в Фигма, и когда использовать одно вместо другого».

📔 Дизайн длинных статей. Увеличьте размер шрифта, ограничьте размер строки, увеличьте высоту строки, используйте семантические теги для режима чтения, используйте lazy-load для изображений.

📔 UX: формы в модальных окнах. Форма в модальном окне — всегда плохо. Но это можно исправить, если приложить гору усилий.

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

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