Forwarded from Веб-стандарты (Vadim Makeev)
Temporal: девятилетний путь к исправлению времени в JavaScript. Джейсон Уильямс рассказывает, как предложение Temporal прошло от идеи до Stage 4, заменив устаревший Date API, унаследованный от Java в 1995 году. В статье описаны иммутабельные объекты, явная поддержка часовых поясов и наносекундная точность, а также temporal_rs — общая библиотека на Rust, позволяющая нескольким движкам использовать одну реализацию. #ecmascript #temporal
https://bloomberg.github.io/js-blog/post/temporal/
https://bloomberg.github.io/js-blog/post/temporal/
Forwarded from Веб-стандарты (Vadim Makeev)
Неожиданные кастомные селекты. Патрик Броссет создаёт три креативные демки с новым кастомизируемым элементом
https://css-tricks.com/abusing-customizable-selects/
<select>: изогнутую стопку папок с CSS-трансформациями и sibling-index(), веер игральных карт с anchor positioning и круговой эмодзи-пикер на тригонометрических функциях CSS. Все демки сохраняют доступность и адекватно деградируют в неподдерживающих браузерах. #css #htmlhttps://css-tricks.com/abusing-customizable-selects/
Forwarded from Веб-стандарты (Vadim Makeev)
Загнутый уголок на CSS. Китти Жиродель разбирает эффект при наведении, при котором угол изображения загибается. Техника сочетает
https://kittygiraudel.com/2026/03/05/folded-corner-with-css/
clip-path для обрезки, белый треугольник для складки и тени под ним. Статья также описывает фолбек для эффектов размытия с помощью нескольких смещённых элементов и показывает, как CSS-переходы обеспечивают плавную анимацию. #css #animationhttps://kittygiraudel.com/2026/03/05/folded-corner-with-css/
Forwarded from Веб-стандарты (Vadim Makeev)
Выпуск №519. Никита Дубко, Алексей Симоненко и Вадим Макеев про статистику из браузеров, Virtual Keyboard API, обновление Shower, модалки или страницы.
— Лайв на Ютубе
— Слушайте на Ютубе
— Ссылки на сайте
— Лайв на Ютубе
— Слушайте на Ютубе
— Ссылки на сайте
519. Статистика из браузеров, Virtual Keyboard API, обновление Shower…
Веб-стандарты
00:01:15 Статистика из браузеров
00:19:27 Virtual Keyboard API
00:45:13 Обновление Shower
01:14:26 Модалки или страницы
01:43:23 Ответы на вопросы
00:19:27 Virtual Keyboard API
00:45:13 Обновление Shower
01:14:26 Модалки или страницы
01:43:23 Ответы на вопросы
Forwarded from Веб-стандарты (Vadim Makeev)
CSSkit, высокопроизводительный CSS-тулчейн на Rust. Проект Кита Циркеля объединяет парсинг, минификацию, линтинг, форматирование, транспиляцию, бандлинг и анализ CSS в одном инструменте без конфигурации. Также включает интеграцию с LSP для поддержки в IDE. Проект вдохновлён oxc и находится в стадии альфы. #css #tools
https://csskit.rs
https://csskit.rs
Forwarded from Веб-стандарты (Vadim Makeev)
Новинки Firefox 149 для разработчиков. Релиз добавляет значение
https://developer.mozilla.org/en-US/docs/Mozilla/Firefox/Releases/149
popover="hint", CloseWatcher для кастомных закрываемых компонентов, поддержку xywh() в shape-outside, vertical-align как сокращённое свойство, опциональные условия @container, HTMLSelectElement.showPicker() для элементов <datalist> и HTMLMediaElement.captureStream(). #firefox #browserhttps://developer.mozilla.org/en-US/docs/Mozilla/Firefox/Releases/149
Forwarded from Веб-стандарты (Vadim Makeev)
Новинки WebKit в Safari 26.4. Джен Симмонс представляет 44 новые фичи: grid lanes для masonry-раскладок, WebTransport для двусторонней связи с низкой задержкой и Keyboard Lock API для перехвата клавиатурных сокращений в полноэкранном режиме. Также добавлены name-only container queries, потоковые scroll-driven animations, ReadableByteStream и улучшения раскладки, Web Inspector и доступности. Плюс 191 багфикс. #safari #browser
https://webkit.org/blog/17862/webkit-features-for-safari-26-4/
https://webkit.org/blog/17862/webkit-features-for-safari-26-4/
Forwarded from Веб-стандарты (Vadim Makeev)
Под капотом: CSS-архитектура редизайна. Брехт де Рёйте рассказывает о каскадных слоях для приоритета стилей, трёхуровневой системе дизайн-токенов, функции
https://utilitybend.com/blog/under-the-hood-a-closer-look-at-the-css-architecture-behind-the-redesign
light-dark() для переключения тем, нормализации стилей через :where(), выражениях от контейнера для адаптивных компонентов, логических свойствах и прогрессивном улучшении через @supports. #css #designhttps://utilitybend.com/blog/under-the-hood-a-closer-look-at-the-css-architecture-behind-the-redesign
Forwarded from Веб-стандарты (Vadim Makeev)
The Layout Maestro — практический курс по CSS-раскладкам. Курс Ахмада Шадида учит думать о раскладке, а не просто запоминать синтаксис. Он охватывает флексы, гриды, выражения от контейнера и
https://thelayoutmaestro.com
:has() через визуальные уроки и интерактивные демо, помогая строить устойчивые раскладки, которые не ломаются при изменении контента или размера экрана. #css #learnhttps://thelayoutmaestro.com
Forwarded from Веб-стандарты (Vadim Makeev)
Выпуск №520. Полина Гуртовая, Вадим Макеев и Алексей Симоненко про Safari 26.4, Firefox 149, TypeScript 6.0 и миксины в CSS.
— Лайв на Ютубе
— Слушайте на Ютубе
— Ссылки на сайте
— Лайв на Ютубе
— Слушайте на Ютубе
— Ссылки на сайте
520. Safari 26.4, Firefox 149, TypeScript 6.0 и миксины в CSS
Веб-стандарты
00:01:07 Safari 26.4
00:42:52 Firefox 149
01:19:03 TypeScript 6.0
01:41:42 Миксины в CSS
01:59:28 Ответы на вопросы
00:42:52 Firefox 149
01:19:03 TypeScript 6.0
01:41:42 Миксины в CSS
01:59:28 Ответы на вопросы
Forwarded from Веб-стандарты (Vadim Makeev)
CSS is DOOMed: рендеринг DOOM в 3D на CSS. Нильс Линхир создал версию классической игры, где каждый визуальный элемент — это
https://nielsleenheer.com/articles/2026/css-is-doomed-rendering-doom-in-3d-with-css/
<div>, расположенный в 3D-пространстве с помощью CSS-трансформаций, а JavaScript отвечает только за игровую логику. Проект использует тригонометрические функции CSS, @property для анимируемых кастомных свойств, anchor positioning для HUD и SVG-фильтры для призрачных врагов. #css #3dhttps://nielsleenheer.com/articles/2026/css-is-doomed-rendering-doom-in-3d-with-css/
Forwarded from Веб-стандарты (Vadim Makeev)
Кастомные элементы с поддержкой форм на практике. Роб Левин делится опытом добавления поддержки Form-Associated Custom Element в библиотеку AgnosticUI с помощью ElementInternals API. Статья описывает две стратегии валидации: делегирование нативным элементам формы и реализацию валидации напрямую, с пошаговыми примерами для input, radio и combobox, включая проблемы изоляции Shadow DOM. #webcomponents #html
https://frontendmasters.com/blog/form-associated-custom-elements-in-practice/
https://frontendmasters.com/blog/form-associated-custom-elements-in-practice/
Forwarded from Веб-стандарты (Vadim Makeev)
Нативные JSON-модули наконец-то стали реальностью. Мэтт Смит объясняет, как атрибуты импорта позволяют загружать JSON-файлы напрямую через
https://allthingssmitty.com/2026/03/16/native-json-modules-are-finally-real/
import data from 'data.json' with { type: 'json' } без сборщика. Браузеры и рантаймы обрабатывают JSON-модули нативно с явным указанием типа, что избавляет от трансформаций на этапе сборки и закладывает основу для будущих типов модулей. #json #jshttps://allthingssmitty.com/2026/03/16/native-json-modules-are-finally-real/
Forwarded from Веб-стандарты (Vadim Makeev)
Squarespace и веб-стандарты: как мы помогли добавить ленивую загрузку видео и аудио в HTML. Скотт Джел рассказывает, как инженеры Squarespace предложили
https://engineering.squarespace.com/blog/2026/squarespace-and-web-standards-how-we-helped-bring-html-video-and-audio-lazy-loading-to-todays-browsers
loading="lazy" для элементов <video> и <audio>, работали с WHATWG, написали Web Platform Tests и сотрудничали с командами Mozilla, Apple и Chromium, чтобы фича стала официальным стандартом 23 марта 2026 года. #html #performancehttps://engineering.squarespace.com/blog/2026/squarespace-and-web-standards-how-we-helped-bring-html-video-and-audio-lazy-loading-to-todays-browsers
Forwarded from Веб-стандарты (Vadim Makeev)
Великое расширение CSS. Павел Лаптев рассматривает CSS-фичи, заменяющие JavaScript-библиотеки: anchor positioning вместо Floating UI, Popover API и
https://blog.gitbutler.com/the-great-css-expansion
<dialog> вместо Radix, scroll-driven animations вместо GSAP, view transitions вместо Motion и кастомизируемый <select> вместо React Select. Вместе они могут убрать до 322 КБ JavaScript. #css #performancehttps://blog.gitbutler.com/the-great-css-expansion
Forwarded from Веб-стандарты (Vadim Makeev)
Выпуск №521. Никита Дубко и Полина Гуртовая про Container Timing, другую пользу Pretext, партизанскую доступность и взлом Axios.
— Лайв на Ютубе
— Слушайте на Ютубе
— Ссылки на сайте
— Лайв на Ютубе
— Слушайте на Ютубе
— Ссылки на сайте
521. Container Timing, другая польза Pretext, партизанская доступность…
Веб-стандарты
00:01:46 Container Timing
00:17:46 Другая польза Pretext
00:40:48 Партизанская доступность
01:05:19 Взлом Axios
01:30:49 Ответы на вопросы
00:17:46 Другая польза Pretext
00:40:48 Партизанская доступность
01:05:19 Взлом Axios
01:30:49 Ответы на вопросы
Forwarded from Веб-стандарты (Vadim Makeev)
Что такое CSS containment и как его использовать? Гарри Робертс объясняет недооценённую возможность CSS, позволяющую браузеру пропускать лишнюю работу по раскладке и отрисовке. Статья разбирает каждое значение
https://csswizardry.com/2026/04/what-is-css-containment-and-how-can-i-use-it/
contain (layout, paint, size, style), сокращения content и strict, а также content-visibility для ленивого рендеринга. Приводится пример OpenTable, где contain: strict сократил время раскладки с 11 до 2 мс, ограничив область с 4371 до 73 элементов. #css #performancehttps://csswizardry.com/2026/04/what-is-css-containment-and-how-can-i-use-it/
Forwarded from Веб-стандарты (Vadim Makeev)
Как сделать так, чтобы вашей статьёй делились: советы из десяти лет курирования рассылки. Скотт Вандехей, который более десяти лет собирал фронтенд-ссылки, делится практическими советами: добавляйте Open Graph теги, используйте уникальное изображение для шеринга, пишите описательные заголовки, добавляйте краткую аннотацию, правильно настраивайте канонический URL и всегда указывайте дату публикации. #html #learn
https://cloudfour.com/thinks/getting-your-article-shared-tips-from-ten-years-of-newsletter-curation/
https://cloudfour.com/thinks/getting-your-article-shared-tips-from-ten-years-of-newsletter-curation/