Видел эти мелкие “мертвые зоны” между плотно стоящими элементами списка? Я тоже стал замечать их чаще.

Лечится просто: добавь каждому элементу CSS-псевдоэлемент ::before, чтобы расширить кликабельную область:

.item {
  position: relative;
}

.item::before {
  content: "";
  position: absolute;
  inset: -10px 0; /* расширяем область по вертикали на 10px */
}

Нюанс: чтобы не перекрыть клики, если внутри есть ссылки/кнопки, можно добавить pointer-events: none на ::before, а клики обрабатывать на самом .item (или наоборот, в зависимости от разметки).

@WebDev_Plus

Идеальный boilerplate, чтобы быстро собирать SaaS-проекты

Сделан на Next.js и уже из коробки настроен: аутентификация, подписки Stripe, база данных, авторизация, Tailwind и современные UI-компоненты.

Больше не нужно убивать дни на склейку auth и оплат. Просто клонируешь, настраиваешь и начинаешь пилить реальный продукт :)

Источник: http://github.com/webdevcody/ppai-next-starter

@WebDev_Plus

Совет по HTML/JavaScript:

Если использовать у кнопки атрибут commandfor, можно прямо указать на интерактивный элемент (например, <dialog> или popover) и задать, что именно с ним сделать.

@WebDev_Plus

Этот ресурс просто бомба. Если вы ищете SVG-файл любого логотипа, то здесь он точно есть. Здесь доступно 581 файл.

Оптимизированы и готовы к использованию в React, Vue, Angular и SVG:

→ https://svgl.app

@WebDev_Plus

JavaScript-совет

К элементам массива можно обращаться с "отрицательными" индексами через метод at().

@WebDev_Plus

Условно обязательные поля в TypeScript через mapped types

@WebDev_Plus

Вышла лучшая библиотека React 2026 года

Она называется Sileo и представляет собой компонент уведомлений.

✓ Красивый по умолчанию, не требует настройки
✓ Несколько состояний и положений
✓ Анимация с помощью SVG

→ npm install sileo

@WebDev_Plus

Функция calc() в CSS

Она позволяет делать математические вычисления прямо в CSS, чтобы верстка была гибкой и лучше адаптировалась под разные экраны.

Поддерживает сложение, вычитание, умножение и деление
Можно смешивать разные единицы: %, px, rem, vw
Вокруг операторов + и - нужны пробелы

Часто используют в адаптивной верстке: динамическая ширина, отступы, “плавающие” размеры шрифта.

@WebDev_Plus

Преобразование значений объектов в строгие типы объединения в TypeScript

@WebDev_Plus

Вышла тулза React Doctor, которая проверяет ваш React-код на наличие анти-паттернов:

- Лишние useEffect
- Проблемы с доступностью
- Prop drilling вместо context / композиции

Запускается как CLI или как агент-скилл. Повторяйте запуск, пока всё не пройдет проверки. Полностью опенсорс

Запустите в терминале, чтобы попробовать:

npx -y react-doctor@latest

@WebDev_Plus

CSS в 2026:

То, что ты видишь, сделано вообще без единой строчки JavaScript...
И при этом около 80% поддержки в браузерах.

@WebDev_Plus

Stremio это типа open-source Netflix.

✓ Веб и UI на React
✓ Движок написан на Rust
✓ Расширения, чтобы добавлять источники контента

Вся разработка открыта на GitHub:
→ http://github.com/Stremio/stremio-web

@WebDev_Plus

Очень важный скилл: это понимать, когда юзер закончил скроллить

Событие scrollend срабатывает, когда прокрутка завершилась: жест закончился и позиция скролла перестала обновляться. Удобно для lazy loading, аналитики или чтобы “дожать” финальные обновления UI без дерганий.

Как это работает - https://developer.mozilla.org/en-US/docs/Web/API/Document/scrollend_event

@WebDev_Plus

Как члены класса ведут себя при работе со ссылками

@WebDev_Plus

Ускорили React примерно на 74% при преобразовании payload серверных компонентов в элементы для рендера в браузере или во время SSR/SSG.

В реальных приложениях на Next.js это дает рендер в HTML на 15%–30% быстрее, в зависимости от размера RSC payload.

@WebDev_Plus