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

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

«как сделать 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

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

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

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

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

@WebDev_Plus

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

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

@WebDev_Plus

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

#TypeScript

@WebDev_Plus

Функция calc() в CSS

Позволяет выполнять вычисления прямо в CSS для задания значений свойств. Можно смешивать разные единицы измерения и считать значения на этапе рендеринга.

Важные моменты:
▪️поддерживает базовые операции: сложение, вычитание, умножение, деление
▪️можно комбинировать разные единицы (px, %, vw, rem)
▪️вокруг операторов нужны пробелы (100% - 20px)
▪️работает с множеством свойств: ширина, высота, отступы, паддинги и т.д.

Применение:
подходит для адаптивных интерфейсов, например когда ширина элемента задаётся как calc(100% - ширина боковой панели) или когда нужно делать пропорциональные отступы без хардкода значений.

@WebDev_Plus

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

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

Подробнее

@WebDev_Plus

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

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

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

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

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

@WebDev_Plus

Чистый дифф массивов в 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