CSS ::checkmark обещает убрать лишний JavaScript из кастомных дропдаунов

Псевдоэлемент ::checkmark из CSS Form Control Styling Module Level 1 позволяет стилизовать галочку выбранного пункта в нативном <select> без кастомной разметки и скриптов. Вместо div-обёртки, стрелочки и ручной навигации с клавиатуры вы задаёте appearance: base-select и переопределяете content у ::checkmark.

Ловушка в двух ограничениях: на момент статьи он не работает в Safari и Firefox, а в остальных браузерах поддерживается только для <option> внутри <select> — чекбоксы и радиокнопки пока недоступны. Поэтому кастомные контролы пока остаются нужны.

Подробности в разборе Сунканми Фафоворы.

Отлаживать WASM в Chrome оказалось удобнее, чем кажется

Если вы компилируете что-то в WebAssembly, отладка сгенерированного кода обычно боль. Eli Bendersky показывает, что в Chrome DevTools уже есть полноценный WASM-отладчик: в Sources → Page → wasm лежит декомпилированный WAT. Можно ставить точки останова, смотреть локальные переменные и стек вызовов.

Особенно полезен режим паузы на исключениях. В WASM многое ломается на инструкциях вроде ref.cast, и без debugger'а вы видите только красную строку в консоли. С включённым «Pause on exceptions» DevTools остановится прямо на виноватой инструкции и покажет, откуда она взялась.

В статье — рабочий сценарий: компилируете WAT через watgo, раздаёте локально через http.server, открываете в Chrome и ловите баги в gc-print-scheme-pairs. Я бы сохранил этот материал на случай, когда придётся разбираться в чужом WASM-модуле или своём компиляторе.

Obs.js подстраивает сайт под устройство и сеть

Если страница летает на десктопе, а на мобильном еле шевелится, виноват не всегда код. Гарри Робертс собрал браузерные сигналы о соединении, мощности устройства и батарее в библиотеку Obs.js, чтобы фронтенд мог подстраиваться под реальные условия читателя.

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

Библиотека даёт сигнал, но решение за вами: упростить анимации, отложить скрипты или убрать эффекты. Поддержка зависит от браузерных API, поэтому я бы начал с одного сценария и использовал бы её как прогрессивное улучшение. Подробности у Робертса.

GEO приходит на смену SEO: что делать веб-разработчику

Поисковая строка всё чаще уступает место чат-ботам: люди задают вопросы в ChatGPT, Perplexity, Copilot, Gemini и Claude. HackerNoon считает, что традиционный SEO умирает, а на смену приходит GEO — генеративная оптимизация, где важен не рейтинг, а упоминание ИИ-ассистентом.

ИИ-модели выбирают контент, который написан качественно, проверен фактами и подкреплён ссылками. Автор материала считает, что бренд может обойтись без отдельного сайта, но не без сильного цифрового опыта. Для веб-разработчика это значит: меньше фокуса на плотности ключевиков, больше — на доверии, структуре и цитируемости.

Учитывайте этот сдвиг при проектировании лендинга, документации или раздела блога: если блок можно процитировать, у него есть шанс стать источником для генеративного ответа. Разбор на HackerNoon.

Remix 3 beta: фреймворк уходит от React и забирает у бандлера последнее слово

Если вас раздражает, что фреймворк диктует, как жить импортам и что происходит с запросом, посмотрите на Remix 3 beta preview. Команда React Router переписала его с нуля: вместо React runtime — форк Preact с императивной моделью, роуты стали Fetch API роутами, а контроллеры возвращают веб-Response.

Мне тут особенно интересны frames: серверные фрагменты с src, которые подгружаются независимо. Некоторые сравнивают их с HTMX, но это внутри самого Remix. Ещё unbundling — Remix сам компилирует и раздаёт ассеты, у импортов пропадает особая семантика.

Источник.

Дизайнеры теперь отдают код

Вместо макетов дизайнер всё чаще сдаёт в прод прототипы, собранные ИИ-агентами. Рынок ответил на спор «должен ли дизайнер кодить»: UX/UI-роли требуют разработки с ИИ и production-ready доставки. Для фронтендера это меняет интерфейс работы: вы получаете работающий, но не всегда чистый код, и придётся отстаивать ревью перед релизом.

Самый цепкий момент для меня, пожалуй, цифры: спрос на UX/UI/Product Design растёт на 16% к 2034, а дизайнерские навыки обогнали кодинг и облака в ИИ-продуктах. Компании хотят перевод технической возможности в человечный интерфейс, поэтому договариваться об архитектуре придётся раньше.

Как пишет автор статьи, сгенерированный функционал — это ещё не хороший функционал.

Ternlight: поиск по смыслу прямо в браузере, без сервера и ключей

Ternlight превращает текст в векторы и ищет по смыслу прямо в браузере на CPU. Весь пакет включает модель, токенизатор и движок вывода и занимает ≈7 МБ, а сервер, GPU и API-ключи не нужны. Установка: npm i @ternlight/base, после чего embed() даёт 384-мерный вектор, а similar() ранжирует небольшую выборку документов за ≈5 мс на одной вкладке.

Это можно воспринимать как Fuse.js, но с поиском по смыслу вместо символов: библиотеку вешаете на страницу документации или справки, и она находит «как отменить подписку», даже если пользователь написал «хочу вернуть деньги». Демо работает офлайн, посмотрите на ternlight.dev/demo.

Если нужен семантический поиск без инфраструктуры, загляните в статью: там примеры кода и сравнение с классическим текстовым поиском.

Бесконечная галерея на GSAP, которая не дергается при скролле

Codrops делает бесконечную ленту разбросанных картинок: каждая движется со своей скоростью, а клик плавно раскрывает изображение во весь экран через GSAP Flip.

Под капотом — GSAP Observer для колеса и тача, Flip для морфинга и SplitText для появления текста. Три независимых слоя (скролл, reveal и transition) удобно отделены друг от друга, поэтому можно взять только параллакс или только переход.

Если проект на React или Vue, стоит подумать, как интегрировать ручное управление DOM с вашей реактивностью. Разбор от Codrops.

Modern Web Guidance: не даём ИИ-агенту тащить лишние зависимости

Просишь агента сделать модалку — получаешь портал, setTimeout и лишнюю библиотеку. Modern Web Guidance учит агента использовать актуальные API веб-платформы.

Устанавливается через npx modern-web-guidance@latest install или плагин для редактора. Укажите целевой Baseline в AGENTS.md/CLAUDE.md — и агент спросит, можно ли обойтись браузером.

В демо это сработало: CSS Anchor Positioning вместо Floating UI для тултипа, нативный <dialog> вместо самодельного модала, scheduler.yield() вместо useMemo при поиске по 2000 задач.

Сразу говорю, версия ранняя. Но идея здравая: ИИ-код должен ориентироваться на актуальную платформу. Подробности.

Он изобрёл human side adaptive

Google может выкинуть новый сайт, если открыть слишком много страниц сразу

Если планируете запускать каталог или доску вакансий с тысячами страниц, эта история для вас. Автор запустил две почти идентичные доски вакансий: юридическую в феврале 2026 года и бухгалтерскую в мае. Первая росла постепенно от небольшого ядра; вторая сразу открыла страницы под редкие запросы, и Google проиндексировал её кратковременно, а затем почти полностью удалил.

Я бы сохранил этот разбор перед запуском фильтров или раздела вакансий: на свежем домене большой массив индексируемого контента — риск. Лучше начать с ядра, дать поисковику время на доверие и наращивать объём. Подробности на HackerNoon.

JSON.stringify тихо портит ваши данные

Вот пример, который стоит проверить в консоли: вызов JSON.stringify для {id: 9007199254740993} вернёт 9007199254740992. Число меняется на единицу, ничего не падает, и это легко пропустить в большом payload.

Если добавить undefined, NaN и Date, картина хуже: свойства с undefined исчезают, дата превращается в строку, а NaN — в null. Стандартный цикл сериализации и парсинга больше не гарантирует, что вы получите назад то же самое.

Для веба это значит, что JSON — не бесплатная операция копирования, а точка потери типов и точности. Я бы пересмотрел, где вы полагаетесь на JSON как на источник правды, особенно для больших идентификаторов, дат и полей, которые могут быть null. Подробнее в статье.

Новые модели выходят быстрее, чем все успевают их внедрять, а прогнозы про ИИ устаревают ещё быстрее, поэтому на кафедре техпреда МФТИ запустили «Точку сборки».

Это серия открытых вебинаров, на которых спикеры делятся опытом внедрения агентов, быстрой сборки MVP и конкретными кейсами своих команд.

Больше о «Точке сборки», о первом вебинаре и о том, как попасть на следующие читайте в новом материале на Tproger: https://tproger.ru/articles/pochemu-opyt-razrabotchikov-luchwe-prognozov-pro-ii

В Node.js 26.6.0 распилили crypto на три бэкенда и переписали потоки на ring buffers

Релиз от 3 августа выглядит как минорный, но внутри две структурные вещи.

Первая — модуль crypto больше не монолит. Его разделили на три независимых бэкенда: OpenSSL 3.x, BoringSSL из Chromium и legacy-слой OpenSSL. До этого любая оптимизация под конкретную платформу упиралась в общий код, который нельзя трогать, не задев остальных. Теперь ветки развиваются отдельно. Заодно приехали фиксы вокруг ключей: сохранение DER для публичных ключей RSA-PSS, очистка памяти из-под приватных ключей и корректная обработка неполных приватных ключей.

Вторая — потоки. Их переложили на ring buffers и сократили количество аллокаций. Это тот случай, когда выигрыш не виден в бенчмарке «hello world», но заметен на прокси, стриминге и всём, что весь день гоняет данные через pipe.

Что делать. Если вы на 22.x или 24.x — не спешите: в конце июля вышли security-релизы для всех трёх линий, накатите их. А вот замерить свои горячие пути на 26.x уже стоит: ветка в Current с мая, поддержка до 30 апреля 2029, и именно туда уедут все дальнейшие оптимизации крипты. Если ваш сервис упирается в TLS-хендшейки или в стримы — это первый за долгое время релиз, где прирост можно получить, ничего не переписывая.

https://nodejs.org/en/blog/vulnerability/july-2026-security-releases

#nodejs #новости

💡 Хватит мучить железо. Выносите тесты, небольшие сервисы и личные проекты на надежный сервер.

У Selectel виртуальный выделенный сервер (VDS) поднимается за пару минут. Получите изолированные ресурсы, полный административный контроль и скорость быстрых NVMe-дисков.
И всё это — от 200 ₽/мес. А новым клиентам дарят ещё и бесплатный домен 🎁
Нервы и ресурс ноутбука стоят дороже.

➡️ Арендуйте сервер для своего проекта выгодно с Selectel.

Реклама. АО "Селектел". erid:2W5zFHGPF8M

Тултип, который сам перепрыгивает вниз, когда не влезает сверху

Позиционирование поповеров годами было задачей для JS: посчитать координаты кнопки, прибавить размеры тултипа, проверить, не вылез ли он за вьюпорт, пересчитать всё это на скролле и ресайзе. Ровно ради этого в проект приходили Floating UI и Popper.js.

Теперь то же самое умеет CSS:

.btn { anchor-name: --btn; }

.tooltip {
position: absolute;
position-anchor: --btn;
position-area: block-start center;
position-try-fallbacks: flip-block;
}

Последняя строка — самое интересное. Это та самая логика «не влезло сверху, покажем снизу», за которую раньше платили килобайтами зависимости. Браузер сам проверяет доступное место и применяет запасной вариант.

Anchor positioning в Baseline и работает во всех четырёх движках. В State of CSS 2026 разработчики назвали её лучшей новой фичей года. Но там много и другой полезной информации: https://2026.stateofcss.com/en-US

#css #лайфхак

Как измерить Core Web Vitals в SPA, где переходы не перезагружают страницу

Классическая беда одностраничников: роутер меняет содержимое, а для браузера это всё та же первая загрузка. LCP, CLS и INP посчитаны один раз при входе, дальнейшие переходы не мерит никто. Отсюда и метрики, в которые никто в команде не верит.

С Chrome 151 Soft Navigations работает без флага. Проверка поддержки и подписка выглядят так:

```if (PerformanceObserver.supportedEntryTypes.includes('soft-navigation')) {
new PerformanceObserver(console.log)
.observe({ type: 'soft-navigation', buffered: true });
}```

Дальше логика простая. В каждой записи есть name — URL, к которому относится новый экран, и navigationId — уникальный идентификатор перехода, потому что один и тот же URL за жизнь приложения можно открыть десять раз. Получили запись — финализируйте метрики предыдущего экрана, отправьте их под старым URL и начинайте копить заново.

LCP для мягкой навигации приходит через interaction-contentful-paint, а у самой записи soft-navigation есть getLargestInteractionContentfulPaint() — он вернёт крупнейший такой пейнт, чтобы не буферизовать записи вручную.

Главное — не сравнивайте новые цифры со старыми напрямую. Они почти наверняка окажутся хуже, но не потому, что вы что-то сломали: эти переходы просто впервые попали под замер. Соберите пару недель параллельно и только потом делайте выводы.

https://developer.chrome.com/docs/web-platform/soft-navigations

#перформанс #spa