Подгонка изображений через 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

Это потрясающее расширение для VS Code, которое за секунды превращает вашу структуру папок в правильно отформатированное текстовое представление

Идеально подходит для создания чистой и структурированной документации без лишних усилий

#ресурсы

@WebDev_Plus

Container scroll-state queries позволяют применять стили к элементам в зависимости от состояния скролла контейнера — зафиксирован, привязан к точке, прокручиваемый

.section-header {
  ...
  container-type: scroll-state;
  container-name: sticky-hd;
}

@container sticky-hd scroll-state(stuck: top) {
  ...
}

Поддерживаемые состояния:

- stuck — элемент в состоянии position: sticky и «прилип» к краю
- snapped — элемент зафиксирован через scroll snap
- scrollable — контейнер имеет область прокрутки

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

@WebDev_Plus

JavaScript-совет:

Используй new Notification() для отправки нативных уведомлений в браузере (без отдельного приложения).

@WebDev_Plus

Реагирование на изменение размеров элемента, а не только окна

«Наблюдатель изменения размеров» срабатывает при изменении габаритов любого элемента, подходит для адаптивных компонентов.

⋅ отслеживает padding box, content box или border box
⋅ работает при динамических изменениях DOM

https://developer.mozilla.org/en-US/docs/Web/API/ResizeObserver

@WebDev_Plus

Node.js v26.0.0 вышел 💚

«Temporal API» включён по умолчанию,

https://nodejs.org/en/blog/release/v26.0.0

@WebDev_Plus

Улучшенная цепочка ошибок наконец появилась в JavaScript

Error.cause позволяет прикрепить исходную ошибку при повторном выбрасывании исключения, сохраняя полный контекст без потери стека вызовов.

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Error/cause

@WebDev_Plus

Ускорение рендеринга с помощью свойства CSS content-visibility: auto

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

Используется совместно с contain-intrinsic-size.

Обеспечивает практически нулевую стоимость реализации ленивой отрисовки.

https://developer.mozilla.org/en-US/docs/Web/CSS/content-visibility

@WebDev_Plus

Используй view-transitions и clip-path, чтобы анимировать переключение темы вместо простого переключения с transition

document.documentElement.animate(
  { clipPath: ["inset(0 0 100% 0)", "inset(0)"] },
  { pseudoElement: "::view-transition-new(root)", duration: 600 },
)

::view-transition-new(root) {
  animation: none;
  mix-blend-mode: normal;
}

Здесь clip-path задаёт раскрытие анимации сверху вниз.

@WebDev_Plus

Infinity в JavaScript используется нечасто.

Но array.flat(Infinity) неожиданно полезен при работе с глубоко вложенными массивами

#JavaScript