Бесконечная галерея на 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