Фронтенд-новости #22
- 5 сентября 2022
- 959
Дайджест новостей и полезных статей из мира фронтенд-разработки за неделю 29 августа—5 сентября.
🔥 Три главные статьи
- Как вы произносите JSON? Джéйсон? Джейсо́н? Джей-эс-оу-эн? Нет. Дуглас Крокфорд, создать стандарта, расскажет, как правильно.
- Современные альтернативы БЭМ: смотрим на Cube, HECS, WILS, GPC.
- Экспортирование по умолчанию в JavaScript-модулях ужасно. Узнайте, почему экспорт по умолчанию не стоит использовать.
🍶 Спецификации
📔 API геолокации представлено в виде рекомендации W3C.
🧬 HTML
📔 Почему размер сайта должен быть меньше 14 килобайт. Буквально, чтобы два раза не вставать.
📔 Погружение в недооценённый элемент <output>
. С его помощью, например, можно сделать свой markdown-редактор, а вы о нём даже не слышали.
🖌 CSS
📔 Выражения от контейнера уже здесь. Краткий обзор того, как работают выражения от контейнера. Как их использовать с реальными примерами из жизни и как выглядит утверждённый синтаксис.
📔 Современные альтернативы БЭМ: Cube, HECS, WILS, GPC, а также другие акронимы. БЭМ — это очень хорошо, но он не учитывает вступление в новую CSS эру с выражениями от контейнера, теневым DOM, каскадными слоями и новыми селекторами.
📔 CSS-клаcсы — это вредно. Имена классов — архаичная система, которая служит плохим посредником для ваших примитивов пользовательского интерфейса.
📔 Удобное использование каскадных слоёв.
📔 Именованные грид-области: использование и визуализация.
🏗 JavaScript
📔 Список необходимых знаний для TypeScript. Для тех, у кого нет времени на детальное изучение инструмента.
📔 Выпущен TypeScript 4.8 — эволюционное обновление с небольшими улучшениями.
📔 Узнайте, как телескоп James Webb использует JavaScript.
📔 Шаблоны Typescript: API контрактов. Рассмотрим подход к написанию практичных API-контрактов, который устраняет целый класс ошибок.
📔 Экспортирование по умолчанию в JavaScript-модулях ужасно. Узнайте, почему экспорт по умолчанию не стоит использовать.
🚀 React
📔 Почему важно понимать процессы повторного рендеринга для максимально возможной производительности вашего приложения. Узнайте, почему в React происходит повторный рендеринг.
📔 Погрузиться в принципы композиции для проектирования и создания масштабируемых повторно используемых компонентови забыть обо всём на свете.
📔 Узнайте, как использовать формы. Знания помогут легко освоить React Hook Form или Formik.
📔 7 способов создать новое приложение на React. СRA один из них, но есть и другие.
🎥 Изучите React Router v6 за 45 минут.
📔 Улучшите метрики взаимодействия с помощью React 18 и Suspense.
📔 Доступно про useMemo и useCallback. Почему полезны, когда использовать и как извлечь максимальную пользу.
📔 Чем хорош useContext и почему он может не подходить вашей команде.
📔 Когда использовать 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 есть функция перевода страницы с любого популярного языка, а видео можно перевести в Яндекс Браузере.