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

Модалки бесят.

Хочешь, чтобы они бесили чуть меньше?

Используй overscroll-behavior: contain;

Что это делает:

Ты скроллишь модалку, доходишь до её конца и продолжаешь крутить дальше.

И тут бах, начинает скроллиться страница под ней. Модалка всё ещё открыта, но позиция на странице сзади уже уехала.

Это называется scroll chaining. Это свойство как раз это и останавливает.

Как это работает:

Когда пользователь доходит до конца прокручиваемого элемента, а модалки для этого вообще идеальный кейс, скролл просто останавливается. Он не продолжает передаваться родителю по цепочке.

На мобилках заодно не триггерит pull-to-refresh.

Где использовать:

• модалки и диалоги
• сайдбары и навигационные меню
• фиксированные контейнеры с overflow: scroll
• мобильные карусели

Поддержка браузеров: 95%

Одна строка CSS.

Модалки всё ещё бесят, но уже чуть меньше 😄

@WebDev_Plus

Это самый простой способ переключаться между режимами Dark, Light и System.

Просто добавьте элемент с выбранным режимом data-theme или удалите его из DOM, чтобы переключиться на System mode.

Может, это и не идеальный вариант, но это самый быстрый и простой способ!

@WebDev_Plus

Angular совет дня: твое приложение ходит в несколько API, но интерсепторы не могут понять, к какому из них относится запрос!?

Оберни. Отфильтруй. Готово

@WebDev_Plus

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

Пофиксил чисто CSS-хакам через inset-shadow:

autofill:shadow-[inset_0_0_0px_1000px_var(--color-background)]

Чтобы принудительно поставить нужный фон и убрать нативный синий.

https://micro.bossadizenith.me/writing/taming-chromes-autofill

@WebDev_Plus

Если ты веб-разработчик и используешь ИИ, поставь это!

Agent Skills от Addy Osmani (Google) для:

* Web Performance
* best practices
* доступности (a11y)
* технического SEO

Под React, Vue, Angular или что угодно.

npx add-skill addyosmani/web-quality-skills

Вот какие skills поставятся:

* web-quality-audit - полный аудит в стиле Lighthouse
* performance - загрузка и оптимизация
* core-web-vitals - LCP, INP, CLS
* accessibility - WCAG и навигация с клавиатуры
* seo - meta-теги и структура
* best-practices - безопасность и стандарты

@WebDev_Plus

🔥 @MoshniyWeb
Если ты:
-хочешь быть в курсе AI-инструментов, которые реально ускоряют работу
-ищешь честные обзоры (без рекламы, с реальным опытом)
-любишь готовые сниппеты с CodePen, адаптированные под задачи
-иногда полезно глянуть, как работают React, Next или просто JS в реальных ситуациях
...залетай 👇

AI-инструменты
Показываю, что реально помогает в работе

Сниппеты с CodePen
Адаптирую код, чтобы ты просто брал и использовал.

Честные сравнения
Тестирую на личных проектах -рассказываю, что работает, а что пустышка.

Короткие заметки
React, Next, JS -без растягиваний, просто по делу.

👉 @MoshniyWeb

Laravel Tip

Когда нужно обновить запись, но не трогать колонку updated_at, используй updateQuietly().

Без таймстампов. Без событий. Тихое, чистое обновление, когда оно реально нужно.

@WebDev_Plus