Распространение событий в JavaScript

Описывает, как события проходят по DOM при срабатывании. Событие не ограничивается одним элементом, а проходит через несколько узлов в заданном порядке.

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

Применение:
Подходит для эффективной обработки событий в сложных интерфейсах — например, делегирование событий на родительский элемент или предотвращение лишних срабатываний во вложенных компонентах.

@WebDev_Plus

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

#TypeScript

@WebDev_Plus

Перестань усложнять код на React.

Управление сложным состоянием быстро становится перегруженным.

Использование нескольких useState приводит к запутанным и трудно поддерживаемым компонентам.

Более эффективный подход — использовать хук useReducer.

Он упрощает код за счёт более структурированной работы со связанными переменными состояния.

Нужно глубже — абстрагируй детали редьюсера.

Это даёт более чистый и простой интерфейс для компонентов.

Эти техники критичны.

Освой их, чтобы строить поддерживаемые и масштабируемые приложения на React.

Разбор подробнее в статье:

https://thetshaped.dev/p/how-to-use-reducer-in-react-for-better-and-simpler-state-management

@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

Рекомендация для фронтенд-разработчиков: лёгкая опенсорс-библиотека для кодов верификации на сайтах — Cap, которая может выступать альтернативой классическим CAPTCHA.

Она основана на механизме proof-of-work с использованием SHA-256, полностью отказывается от пазлов и распознавания изображений, весит всего ~20 КБ, практически не влияет на время загрузки, не занимается трекингом и не собирает данные.

GitHub: http://github.com/tiagorangel1/cap

Поддерживает гибкие варианты отображения: видимый, невидимый, плавающий и т.д., при этом стили фронтенда и логика валидации полностью настраиваются.

Совместима с любым JavaScript-рантаймом, без зависимостей, разворачивается одной Docker-командой.

@WebDev_Plus

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

@WebDev_Plus

Разбирайте и собирайте строки запросов простым способом

URLSearchParams предоставляет удобное API для работы с параметрами URL. Получение, установка, добавление, удаление и итерация — без использования регулярных выражений.

Подробнее: https://developer.mozilla.org/en-US/docs/Web/API/URLSearchParams

@WebDev_Plus

Массово переключить CSS-классы, а потом сбросить прокрутку: две строки, которые заставляют браузер синхронно заблокировать главный поток.

Я задокументировал, как это отловить в панели производительности и почему одного requestAnimationFrame недостаточно, чтобы это исправить - https://joanleon.dev/en/forced-synchronous-layout/

#WebPerf #CSS #DevTools #JavaScript

@WebDev_Plus

Подгонка изображений через object-fit

Контролирует, как заменяемое содержимое (изображения, видео) заполняет контейнер: cover, contain, fill, scale-down, none.

Без растянутых или сжатых изображений.

Подробнее - https://developer.mozilla.org/en-US/docs/Web/CSS/object-fit

@WebDev_Plus

Сегодня исторический день для JavaScript.

Temporal API теперь доступен в Node.js.

Наконец нормальный API для работы с датами.

Прощай new Date("2026-04-28")
Привет Temporal.PlainDate.from("2026-04-28")

✓ даты без странных проблем с часовыми поясами
✓ добавление дней, месяцев и лет без багов
✓ меньше типичных ошибок старого Date

@WebDev_Plus

Планирование выполнения в нужный момент через очередь микрозадач (queueMicrotask())

Запускает функцию обратного вызова после текущей задачи, но до отрисовки. Более предсказуемо, чем setTimeout(fn, 0), легче, чем Промис.

Подробнее

@WebDev_Plus

Exclude<T, U> в TypeScript позволяет вырезать подмножество из объединённого типа

#TypeScript

@WebDev_Plus

Преобразуй потоковые данные на лету

TransformStream находится между читаемым и записываемым потоками и позволяет модифицировать чанки по мере прохождения через него. Подходит для кодирования, сжатия или парсинга.

@WebDev_Plus

В JavaScript появились немутабельные методы массивов ✨

toSorted(), toReversed(), toSpliced() и with() возвращают новый массив вместо изменения исходного.

Больше не нужен [...arr].sort(), чтобы избежать побочных эффектов.

Подробнее: MDN Web Docs

@WebDev_Plus

Ты, скорее всего, уже гуглил что-то вроде этого:

«как сделать div, чтобы он сжимался под контент»
«ширина элемента по содержимому»
«автоширина, но не на всю ширину»

В CSS есть специальная штука, которая решает это — fit-content.

Что делает:
Заставляет элемент сжиматься под содержимое, но не становиться шире своего контейнера.

Элемент остаётся с display: block (занимает свою строку), но ширина подстраивается под контент вместо растягивания на всю ширину.

Карточка сжимается по ширине текста и идеально центрируется.

.alert-card {
  /* 1. Сжать блок строго по содержимому */
  width: fit-content;

  /* 2. Центровка без вмешательства в родительский контейнер */
  margin-inline: auto;

  /* 3. Не допускать выхода за границы экрана на мобильных */
  max-width: 90vw;

  padding: 2rem;
  background: var(--bg-surface);
  border-radius: 12px;
}

Где это использовать:

- Центрированные кнопки, которые не должны растягиваться на всю ширину
- Карточки, которые подстраиваются под свой контент
- Модальные окна, которые увеличиваются вместе с текстом
- Теги и бейджи
- Элементы навигации

@WebDev_Plus

TypeScript официально отказывается от JavaScript. Грядущая версия (7.0) полностью переписана на Go, и скорость компиляции выросла в 10 раз.

Годами основной компилятор (tsc) был написан на самом TypeScript и выполнялся в среде Node.js. С точки зрения стратегии это было отличным решением для привлечения разработчиков, но с инженерной стороны — серьёзная проблема для крупных проектов. JavaScript по своей природе однопоточный и сильно ограничен в задачах с интенсивной нагрузкой на процессор.

В больших проектах, когда кодовая база превышает миллион строк, время сборки становится критичным. Разработчик меняет одну строку в интерфейсе и ждёт завершения проверки типов.

Переход на Go (нативный порт) полностью устраняет эту проблему. Ключевой момент — многопоточность.
Компилятор теперь использует все ядра процессора через горутины. Большой код разбивается на части и анализируется параллельно. Накладные расходы V8 больше не участвуют в процессе.

Эффект не только в удобстве разработки. В корпоративной среде это означает более быстрые пайплайны CI/CD на серверах и заметное снижение затрат на облачные сборки.

@WebDev_Plus

кто-то выложил в открытый доступ набор компонентов для карт в стиле shadcn для React.

проект называется mapcn. поддерживает темы, полностью композиционный, построен на MapLibre GL, поэтому даёт полный функционал картографии без оплаты Mapbox.

100% открытый исходный код.

@WebDev_Plus

Переключаем режим редактирования для всего документа

Когда мы изменяем HTML, обычно нужно дождаться обновления страницы, чтобы увидеть изменения. Вы можете сэкономить время, используя designMode, который позволяет мгновенно изменять страницу

Чтобы переключить режим разработки, введите следующий код:

document.designMode="on"

#советы

@WebDev_Plus