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

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

🧬 HTML

📔 Могут ли SVG-символы влиять на производительности сети? Всё неоднозначно! Читайте комментарии.

📔 Что лучше — Bootstrap или Tailwind? Tailwind проще использовать в команде. А если вы новичок, то подойдёт любая библиотека.

🖌 CSS

📔 Переходим с transform: translateX(50%) rotate(30deg) scale(1.2);, на translate(), rotate(), scale(). Индвидуальные трансформации появились в начале 2022 и уже потихоньку внедряются браузерами.

📔 Гибкий размер медиавыражений. Используйте функцию clamp() для размеров шрифтов и отступов, которые зависят от размера шрифта.

📔 Изучение возможностей неявной сетки и автоматического размещения в гридах. Несколько отличных демок с использованием автоматического размещения.

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

🏗 JavaScript

📔 Проверяем поддержку селекторов с помощью JavaScript.

📔 Узнайте, был ли применён манкипатчинг к нативным JavaScript-функциям.

🚀 React

📔 Docusaurus 2.0. Новая мажорная версия генератора статических сайтов на React. Теперь с поддержкой MDX, новой системой плагинов и тёмной темой.

📔 От 500 мс до 1,7 мс. Чеклист для повышения производительности React-приложений.

📔 Android-приложение Discord переезжает на React Native. Теперь новые фичи будут появляться одновременно на всех платформах.

📔 Использование useState хука с TypeScript. Помогаем компилятору TS, используя аргументы типа.

📔 Изучите шейдеры с React Three Fiber. Полное руководство по работе с «униформами и вариациями» и созданию с их помощью динамических, интерактивных и компонуемых материалов.

📔 react-use. Большая библиотека с хуками.

💽 Node.js

📔 Новый синтаксис селектора зависимостей в npm. npm query — новая похожая на CSS-селектор команда в последней версии npm для запроса зависимостей проекта.

📔 node. js экосистема до сих пор имеет проблемы с тулингом. В package.json слишком много неоднозначных ключей. Нужно не забыть про конфиги для библиотек, например tsconfig.dist.json, который расширяет ts.config.node.json.

📔 node_modules кеш для Докера в вашём CI.

📔 Разбор аргументов командной строки с помощью util. parseArgs(), который был добавлен совсем недавно в node. js 18.3.

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

📔 Nativefier. Сделайте любую веб-страницу десктопным приложением.

📔 Вышел VS Code 1.70.

🕸 Браузеры

📔 Google пока не готов отказаться от third-party cookie. Пока идёт большое тестирование Privacy Sandbox, которое продлится до 2024.

📔 Safari Technology Preview 150 доступен для macOS.

🎓 Общее

📔 Анализ интерфейса Apple Music. Интерфейс — красивый, а вот использование не всегда происходит гладко.

📔 10 советов по использованию цветов в UI. Цвет — неотъемлемая часть визуального языка, который используется для общения с аудиторией продукта. Цвет может быть функциональным, чтобы подсказать, что делать дальше, а также декоративным, чтобы передавать определённое настроение.

📔 Кнопки. Посмотрите на разнообразие и ховер-эффекты кнопок. Простой прямоугольник, а столько вариаций.

📔 Краткая история цифровой клавиатуры. Начиная с 1820 года по 2007, когда был представлен калькулятор в iPhone.

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

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