Фронтенд-новости #18
- 9 августа 2022
- 631
Дайджест новостей и полезных статей из мира фронтенд-разработки за неделю 1–7 августа.
🔥 Три главные статьи
- Новый синтаксис селектора зависимостей в npm
- Проверяем поддержку селекторов с помощью JavaScript
- Краткая история цифровой клавиатуры
🧬 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 есть функция перевода страницы с любого популярного языка, а видео можно перевести в Яндекс Браузере.