Телеграм канал «WebDev+ | Веб-разработка»

Не допускайте появления растянутых изображений на вашем сайте. Это выглядит ужасно! И это легко исправить с помощью одной строки CSS @WebDev_Plus

Большинство CSS-переходов плавные, но display переключается мгновенно. allow-discrete делает так, что элемент еще немного остается видимым, чтобы анимация выхода выглядела гладко, и только потом уходит в display: none. Ключевое слово allow-discrete применяет тайминги transition к дискретным свойствам. Для exit-анимаций элемент остается видимым, проигрывает переход, а затем переключается в display: none уже после завершения transition. Подробнее на MDN: https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/Properties/transition-behavior Свойство overlay управляет тем, остается ли диалог в top layer во время перехода. Без него диалог сразу “провалится” назад, за другой контент. MDN: https://developer.mozilla.org/en-US/docs/Glossary/Top_layer CSS-сниппет: dialog { opacity: 1; scale: 1; transition: opacity 0.2s ease-out, scale 0.2s ease-out, overlay 0.2s ease-out allow-discrete, display 0.2s ease-out allow-discrete; @starting-style { opacity: 0; scale: 0.95; } } И: dialog::backdrop { background-color: rgb(0 0 0 / 0.5); transition: background-color 0.2s ease-out, overlay 0.2s ease-out allow-discrete, display 0.2s ease-out allow-discrete; @starting-style { background-color: rgb(0 0 0 / 0); } } @WebDev_Plus

Наконец-то! Можно начинать прощаться с new Date() в JS. Temporal API доехал до Google Chrome 144. Это новый способ работать с датами и временем. Там куча утилит и улучшений: // 1) Разница между датами - без миллисекунд и без головняка const start = Temporal.PlainDate.from('2026-01-10') const end = Temporal.PlainDate.from('2026-01-30') console.log(`Длительность: ${start.until(end).days} дней`) // Длительность: 20 // 2) Создаём время без даты и таймзоны const opensAt = Temporal.PlainTime.from('09:30') console.log(`Открывается в ${opensAt.hour} часов и ${opensAt.minute} минут`) // Открывается в 9 часов и 30 минут // 3) Конвертим таймзоны без боли const meeting = Temporal.ZonedDateTime.from( '2026-03-15T18:00[Europe/Madrid]' ) console.log('Мадрид:', meeting.toString()) console.log('Токио:', meeting.withTimeZone('Asia/Tokyo').toString()) // 4) Прибавляем время, не ломая даты const release = Temporal.PlainDate.from('2026-02-01') console.log('Следующий релиз:', release.add({ months: 1 }).toString()) // Следующий релиз: 2026-03-01 // 5) Instant - точка во времени (логи, события, метрики) const now = Temporal.Now.instant() console.log('Точный таймстамп:', now.toString()) @WebDev_Plus

В Chrome DevTools MCP добавили улучшение, о котором просили многие 🦌 Новый апдейт даёт возможность агентам напрямую подключаться к активным сессиям браузера. Представьте, что вы хотите, чтобы ваш агент по программированию исправил проблему, доступ к которой возможен только после авторизации. Теперь ваш агент может напрямую получить доступ к вашей текущей сессии просмотра, не требуя дополнительной авторизации. Теперь агенты могут получать доступ к активным сеансам отладки в пользовательском интерфейсе DevTools. Например, если вы обнаружите запрос с ошибкой на панели «Сеть» в Chrome DevTools, выберите запрос и попросите своего агента исследовать его. То же самое работает и с элементами, выбранными на панели «Элементы». @WebDev_Plus

В последнем апдейте Vue Language Tools для vuejs директива v-for теперь ведёт себя с ключами типа number так же, как TypeScript и рантайм Vue.js: ключи автоматически считаются строками. Больше консистентности, меньше сюрпризов. И это ещё не всё! Добавили поддержку Template Literal Types в v-for: если у ключа union из числовых литеральных типов, он автоматически "строкифицируется" 1 | 2 → "1" | "2" @WebDev_Plus

Лучший дев-портфолио снова в строю! Бруно Симон опять переплюнул сам себя и выкатил новую версию своей легендарной личной страницы. Сайт сделан на Three.js и WebGPU, выглядит просто нереально круто: → http://bruno-simon.com @WebDev_Plus

Покажите мне API мутаций лучше, чем вот это. https://fate.technology/guide/actions @WebDev_Plus