Можно сделать sticky-navbar, который меняется при скролле, на чистом CSS — без JS и библиотек анимаций.

header {
  container-type: scroll-state;
  position: sticky;
  top: 0;
}

@container scroll-state(stuck: top) {
  .nav-bar {
    max-width: 56rem;
    border-radius: 0.75rem;
    background: rgb(255 255 255 / 0.92);
  }
}

Теперь браузер сам понимает, когда sticky-элемент «прилип» к верхней границе, и всё срабатывает через один container query.
Пока доступно только в Chromium-браузерах — без Firefox и Safari, что, конечно, обидно.

@WebDev_Plus

Если хотите, чтобы Claude нормально делал вам слайды, не используйте Claude Design.

Используйте Reveal.js. - https://github.com/hakimel/reveal.js

Пусть Claude генерирует презентации как обычные HTML + Markdown-файлы.

Это намного приятнее:

→ слайды лежат в коде
→ их легко редактировать
→ можно хранить в Git
→ можно версионировать
→ можно быстро менять структуру
→ можно деплоить как обычную веб-страницу

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

Для разработчиков это ощущается естественнее.

Слайды становятся не «файлом презентации», а частью нормального рабочего процесса.

@WebDev_Plus

Открой X.

Выполни этот JavaScript в консоли браузера:

s = document.createElement("style");
s.innerHTML = "*{font-family:comic sans ms!important}";
document.head.append(s);

Наслаждайся.

@WebDev_Plus

npm install новый месяц

npm install возможности

Цитата с верой

@WebDev_Plus

Design Engineering Tip

Попробуйте делать textarea, которая растёт вместе с контентом, вместо вложенного скролла внутри поля.
Так пользователю проще писать длинный текст, а форму легче просматривать целиком.
CSS:

textarea {
  field-sizing: content;
}

Маленькая деталь, но UX сразу становится приятнее.

@WebDev_Plus

Кейс большой frontend-миграции от ВКонтакте. Команда перевела ключевые разделы vk.com на SPA. В итоге получили ускорение первой отрисовки страницы на 25% и ускорение среднего времени перехода между разделами в 3,5 раза.

Переход был плавным: снаружи все привычно, внутри — новая платформа

https://www.cnews.ru/news/line/2026-06-03_vkontakte_obnovila_veb-platformu

@WebDev_Plus

Мой набор JavaScript-библиотек, без которых уже сложно представить разработку:

🛡 zod → валидация схем и типобезопасная проверка данных
📅 date-fns → работа с датами без боли и лишнего веса
📊 tanstack-table → мощные и гибкие таблицы для React
🔐 better-auth → аутентификация пользователей без лишней возни
🎞 motion → анимации на JavaScript с современным API
🔤 fontsource → подключение веб-шрифтов прямо через npm
📈 chart.js → доступные и удобные HTML5-графики
🐻 zustand → простое глобальное управление состоянием
🖱 pragmatic-drag-and-drop → drag-and-drop от команды Atlassian
⌨️ hotkeys-js → горячие клавиши и клавиатурные шорткаты

@WebDev_Plus