Безопасные правила дизайна: подборка простых правил визуального дизайна, которые можно без опаски применять, если вы не дизайнер → https://anthonyhobday.com/sideprojects/saferules/
Читать полностью…Простые и плавные анимации перехода с View Transitions API: введение в новый браузерный API, позволяющий анимировать трансформации DOM и даже переходы между страницами → https://developer.chrome.com/docs/web-platform/view-transitions
Читать полностью…Будет ли в JavaScript добавлена нативная поддержка JSX? WebAssembly когда-нибудь заменит JavaScript? Почему нельзя просто сломать веб в угоду новым возможностям?
TC39 FAQ: полуофициальная подборка ответов (и возможность задать свой вопрос!) от делегатов комитета, стоящего за разработкой ECMAScript → https://github.com/tc39/faq/
Meta выложили в опенсорс StyleX, CSS-in-JS библиотеку, на которой работают Facebook, Instagram и WhatsApp → https://stylexjs.com
Ключевые особенности:
— framework-agnostic: можно использовать хоть с React, хоть с Angular
— размер конечного CSS-бандла выходит на плато даже при добавлении множества новых компонентов благодаря статическому атомарному CSS на выходе без рантайм-инъекций
— поддержка темизации
— API полностью покрыт типами TypeScript и Flow
monaspace, инновационное суперсемейство шрифтов для кода от GitHub: пять вариативных комбинируемых шрифтов с лигатурами и оптической компенсацией символов разного размера без потери моноширинности → https://monaspace.githubnext.com
Читать полностью…JS minification benchmarks, актуальное сравнение популярных минификаторов (от esbuild до closure compiler) по скорости и эффективности работы → https://github.com/privatenumber/minification-benchmarks
Читать полностью…WOFF покинул чат: если вы подключаете веб-шрифты в новом проекте в 2023 году, вероятно, вам не нужны никакие форматы, кроме WOFF2 → https://matthiasott.com/notes/woff-has-left-the-building
Читать полностью…Опорная архитектура Node.js-приложений: рекомендации группы инженеров из IBM и Red Hat по разработке и эксплуатации Node.js-приложений → https://nodeshift.dev/nodejs-reference-architecture/
Читать полностью…Миграция миллионов строк кода Stripe на TypeScript: мотивация к переезду на TS, сложности, процесс и впечатления после переезда → https://stripe.com/blog/migrating-to-typescript
Читать полностью…Новые единицы измерения вьюпорта в CSS: решение для вёрстки, учитывающей скрытие адресной строки в мобильных браузерах → https://ishadeed.com/article/new-viewport-units/
Читать полностью…Есть ли приемлемая альтернатива GIF? Сравнение современных форматов для отображения анимированых изображений в вебе → https://cloudfour.com/thinks/animated-gif-alternative
Читать полностью…Knip, продвинутый инструмент для поиска неиспользуемого кода в JS/TS-проектах
— находит неиспользуемые зависимости/файлы/экспорты
— находит используемые зависимости, неучтённые в package.json
— поддерживает монорепозитории с воркспейсами
— расширяется через плагины
— есть отчёты для CI
https://github.com/webpro/knip
Давние желания, сбывающиеся благодаря scroll-driven анимациям: стилизация sticky-элементов в состоянии прилипания, появление и скрытие тени при прокрутке, оглавление с подсветкой текущей секции. Роман Комаров экспериментирует с новой CSS-фичей → https://kizu.dev/scroll-driven-animations/
Читать полностью…Пишем собственный JS-бандлер: Кристоф Наказава объясняет общие принципы работы бандлеров на примере написания собственного бандлера → https://cpojer.net/posts/building-a-javascript-bundler
Читать полностью…Cворачиваемые вложенные списки без JS: современное руководство по вёрстке деревьев на HTML/CSS с хорошей семантикой и полноценной навигацией с клавиатуры → https://iamkate.com/code/tree-views/
Читать полностью…DeviceScript, платформа для программирования микроконтроллеров на TypeScript с фокусом на хорошем developer experience → https://microsoft.github.io/devicescript/
Читать полностью…Исчерпывающее руководство по IndexedDB: Ник Мостовой из WhatsApp делится своим опытом работы с IndexedDB на протяжении 3+ лет → https://blog.xnim.me/indexeddb-guide
Читать полностью…Итоги 2023 для CSS: обзор множества уникальных и долгожданных возможностей, появившихся в CSS в этом году. Архитектурные основы, работа с цветом, типографика, отзывчивая вёрстка, интерактивные анимации, стилизация нативных контролов → https://developer.chrome.com/blog/css-wrapped-2023
Читать полностью…ESLint упраздняет правила для форматирования кода: официальная рекомендация — использовать специализированные форматтеры вроде Prettier → https://eslint.org/blog/2023/10/deprecating-formatting-rules/
Читать полностью…Синтаксис относительного цвета в CSS: введение в новый синтаксис, позволяющий нативно делать цвета темнее/светлее/контрастнее и производить другие манипуляции над цветами без препроцессоров → https://developer.chrome.com/blog/css-relative-color-syntax/
Читать полностью…За пределами NPM: обзор инструментов для более осознанного и эффективного поиска, выбора и оценки зависимостей для проекта → https://forweb.dev/en/blog/npm-tools/
Читать полностью…Нативная поддержка .env-файлов в Node.js: в непримечательном релизе v20.6.0 добавили возможность задания переменных окружения из .env-файлов. Раньше эта задача решалась сторонним пакетом dotenv с 22 млн скачиваний в неделю → https://nodejs.org/en/blog/release/v20.6.0
Читать полностью…Идеального вьюпорта не существует: исследование Set Studio, показывающее, что разнообразие вьюпортов делает бессмысленной жёсткую привязку к определённым брейкпойнтам → https://viewports.fyi
Читать полностью…driver.js, библиотека для пошагового знакомства пользователей с продуктом: без зависимостей, работает с любым фреймворком, написана на TypeScript → https://driverjs.com
Читать полностью…WebKit Standards Positions: разработчики браузерного движка WebKit опубликовали страницу для отслеживания их позиции касательно внедрения новых стандартов → https://webkit.org/standards-positions
Читать полностью…Perfectionist, ESLint-плагин с набором правил для сортировки всего: импортов, ключей объектов, JSX-пропов, енамов в TypeScript и других частей кода. Поддерживает автофикс → https://github.com/azat-io/eslint-plugin-perfectionist
Читать полностью…Улучшаем UX сообщений об ошибках: обзор практических приёмов с примерами и постер-шпаргалка в PDF → https://www.nngroup.com/articles/error-message-guidelines/
Читать полностью…Введение в popover API, новый API для всплывающих элементов, нативно решающий большинство проблем вроде позиционирования поверх страницы, управления фокусом, закрытия при нажатии Escape → https://developer.chrome.com/blog/introducing-popover-api/
Читать полностью…Сокращение Total Blocking Time в Википедии: Николас Рэй рассказывает, как пара простых исправлений позволила уменьшить фризы интерфейса в больших статьях → https://www.nray.dev/blog/300ms-faster-reducing-wikipedias-total-blocking-time/
Читать полностью…Верстаем письма на React: инженеры Yelp рассказывают, как они адаптировали для разработки писем привычные их фронтендерам инструменты вроде React и Storybook → https://engineeringblog.yelp.com/2022/07/writing-emails-using-react.html
Читать полностью…