WebDev+ | Веб-разработка

Чистый дифф массивов в JavaScript через Set 👇 @WebDev_Plus

Подгонка изображений через object-fit Контролирует, как заменяемое содержимое (изображения, видео) заполняет контейнер: cover, contain, fill, scale-down, none. Без растянутых или сжатых изображений. Подробнее - https://developer.mozilla.org/en-US/docs/Web/CSS/object-fit @WebDev_Plus

Массово переключить CSS-классы, а потом сбросить прокрутку: две строки, которые заставляют браузер синхронно заблокировать главный поток. Я задокументировал, как это отловить в панели производительности и почему одного requestAnimationFrame недостаточно, чтобы это исправить - https://joanleon.dev/en/forced-synchronous-layout/ #WebPerf #CSS #DevTools #JavaScript @WebDev_Plus

Разбирайте и собирайте строки запросов простым способом URLSearchParams предоставляет удобное API для работы с параметрами URL. Получение, установка, добавление, удаление и итерация — без использования регулярных выражений. Подробнее: https://developer.mozilla.org/en-US/docs/Web/API/URLSearchParams @WebDev_Plus

Container Queries в CSS дают настоящую адаптивность на уровне компонента. @WebDev_Plus

Рекомендация для фронтенд-разработчиков: лёгкая опенсорс-библиотека для кодов верификации на сайтах — Cap, которая может выступать альтернативой классическим CAPTCHA. Она основана на механизме proof-of-work с использованием SHA-256, полностью отказывается от пазлов и распознавания изображений, весит всего ~20 КБ, практически не влияет на время загрузки, не занимается трекингом и не собирает данные. GitHub: http://github.com/tiagorangel1/cap Поддерживает гибкие варианты отображения: видимый, невидимый, плавающий и т.д., при этом стили фронтенда и логика валидации полностью настраиваются. Совместима с любым JavaScript-рантаймом, без зависимостей, разворачивается одной Docker-командой. @WebDev_Plus

Можно использовать разные favicon для светлой и тёмной темы сайта

<link rel="icon" href="/favicon-light.svg" media="(prefers-color-scheme: light)" />
<link rel="icon" href="/favicon-dark.svg" media="(prefers-color-scheme: dark)" />

@WebDev_Plus

Перестань усложнять код на React. Управление сложным состоянием быстро становится перегруженным. Использование нескольких useState приводит к запутанным и трудно поддерживаемым компонентам. Более эффективный подход — использовать хук useReducer. Он упрощает код за счёт более структурированной работы со связанными переменными состояния. Нужно глубже — абстрагируй детали редьюсера. Это даёт более чистый и простой интерфейс для компонентов. Эти техники критичны. Освой их, чтобы строить поддерживаемые и масштабируемые приложения на React. Разбор подробнее в статье: https://thetshaped.dev/p/how-to-use-reducer-in-react-for-better-and-simpler-state-management @WebDev_Plus

Mapped types в TypeScript + ремап ключей для выбора нужного обработчика #TypeScript @WebDev_Plus

Распространение событий в JavaScript Описывает, как события проходят по DOM при срабатывании. Событие не ограничивается одним элементом, а проходит через несколько узлов в заданном порядке. Важные моменты: ▪️ Две фазы: перехват (capturing, сверху вниз к целевому элементу) и всплытие (bubbling, от целевого элемента вверх) ▪️ Всплытие используется по умолчанию в большинстве случаев ▪️ Полезно при работе с вложенными элементами и несколькими обработчиками событий ▪️ Управляется через event.stopPropagation() Применение: Подходит для эффективной обработки событий в сложных интерфейсах — например, делегирование событий на родительский элемент или предотвращение лишних срабатываний во вложенных компонентах. @WebDev_Plus

Intl API — одна из самых мощных возможностей JavaScript, о которой редко говорят. @WebDev_Plus

Firefox 150 вышел и включает новые возможности веб-платформы: 🎉sizes="auto" для изображений 🎉поддержка light-dark() для изображений 🎉revert-rule в CSS 🎉ariaNotify() 🎉 медиа-псевдоклассы, такие как :playing Ни одна из этих возможностей пока не входит в базовый набор, проверяйте поддержку на MDN https://developer.mozilla.org/en-US/docs/Mozilla/Firefox/Releases/150 @WebDev_Plus

Контролируйте специфичность CSS с помощью @layer Каскадные слои позволяют явно задавать приоритет между группами стилей. Больше не нужно бороться с !important. Подробнее https://developer.mozilla.org/en-US/docs/Web/CSS/@layer @WebDev_Plus

image-set должен быть первым выбором при работе с фоновыми изображениями Одна строка CSS решает: → переключение между 1x/2x и даже 3x разрешениями → фолбэки для современных форматов — AVIF, JPEG, WebP Ноль JS. Чистый CSS! 💪 ✅ Широко доступен с сентября 2023 @WebDev_Plus

⚡️ Про-тип: используйте .at(-1) для более чистого доступа к последнему элементу в JavaScript #JavaScript @WebDev_Plus

Разбивайте текст на слова и предложения для любого языка Intl.Segmenter выполняет сегментацию текста с учётом локали, включая CJK-языки, где слова не разделяются пробелами. Подробнее : https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Intl/Segmenter @WebDev_Plus

Генерируй криптографически стойкие UUID прямо в браузере 🔐 crypto.randomUUID() встроен в Web Crypto API, никакой пакет из npm не нужен. Работает во всех современных браузерах и в Node.js 14.17+. Подробнее: https://developer.mozilla.org/en-US/docs/Web/API/Crypto/randomUUID @WebDev_Plus

Фиксированная ширина ломает адаптивный дизайн, делай так вместо этого: @WebDev_Plus

Автоматически балансируй заголовки text-wrap: balance равномерно распределяет текст по строкам и убирает некрасивые висячие слова. Подходит для заголовков и коротких текстовых блоков. https://developer.mozilla.org/en-US/docs/Web/CSS/text-wrap @WebDev_Plus