Вышла лучшая библиотека 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

Ecommerce-сайт с фильтрами это SEO-кошмар.

Каждая комбинация фильтров создает новый URL:

- /shoes/
- /shoes/?color=red
- /shoes/?color=red&size=10
- /shoes/?color=red&size=10&brand=nike

50 фильтров = 1+ млн возможных URL.

Crawl budget у Google раздувается.
Штрафы за дублирующийся контент.

Вот как исправить faceted navigation и не убить фильтры:

1/ Проблема faceted navigation

Удобные для пользователя фильтры создают SEO-бардак:

10 категорий × 20 цветов × 15 размеров × 10 брендов
= 30 000 возможных URL

И все они показывают похожие товары.
Google тратит crawl budget впустую.
Ни один из них нормально не ранжируется.

У клиента было 127 000 индексируемых комбинаций фильтров.
Ценных было только 200.
Google не понимал, что именно ранжировать.

2/ Решение 1: обработка параметров в GSC

Google Search Console → Settings → Crawling → URL Parameters

Настройте каждый параметр:

No URLs:

- Параметры, которые не меняют контент
- Трекинговые коды (utm_source)
- Session ID

Representative URL:

- Параметры, которые меняют контент
- Дайте Google самому решить, что индексировать

Every URL:

- Параметры, создающие уникальные ценные страницы

Клиент настроил 15 параметров.
Индекс сократился с 127K до 3K страниц.
Позиции выросли.

3/ Решение 2: стратегия с robots meta tag

Используйте noindex на отфильтрованных страницах:

<?php if (isset($_GET['color']) || isset($_GET['size'])) { ?>
  <meta name="robots" content="noindex, follow">
<?php } ?>


Позволяет:
✅Пользователи могут фильтровать
✅Google может обходить ссылки
✅Link equity передается
❌Google не будет индексировать страницы с фильтрами

Индексируйте только основные страницы категорий.

4/ Решение 3: Canonical на версию без фильтров

Все комбинации фильтров → canonical на основную категорию:

<!-- On /shoes/?color=red&size=10 -->
<link rel="canonical" href="https://example.com/shoes/" />

Это консолидирует сигналы в один URL.

Но: теряется возможность ранжироваться по запросу вроде red shoes size 10

Используйте, если:

- У комбинаций фильтров нет search volume
- Вам не нужно, чтобы страницы фильтров ранжировались

5/ Решение 4: стратегическая индексация (лучший вариант для большинства)

Индексируйте только ценные комбинации фильтров.

Индексировать:

/shoes/ (основная категория)
/shoes/red/ (цвет с высоким спросом)
/shoes/nike/ (популярный бренд)
/shoes/running/ (подкатегория)

Noindex для:

/shoes/?color=red&size=10&brand=nike&sort=price
Любой комбинации с 2+ фильтрами
Фильтров без search volume

Как реализовать:

$params = count($_GET);
if ($params > 1) {
  echo '<meta name="robots" content="noindex, follow">';
}

6/ Решение 5: чистые URL для ценных фильтров

Перепишите URL фильтров так, чтобы они выглядели как категории:

Вместо: /shoes/?color=red
Сделайте: /shoes/red/

Плюсы:

- Выглядит как страница категории
- Лучше для SEO
- Можно отдельно оптимизировать title/meta
- Проще внутренняя перелинковка

У клиента было 20 ценных комбинаций фильтров.
Их перевели на clean URLs.
Все начали ранжироваться в течение 6 недель.

7/ Стратегия "View All"

Для небольших наборов товаров (<200 позиций):

Уберите пагинацию и фильтры полностью.
Покажите все товары на одной странице.

Пример:

- В категории 47 товаров
- Показываем все 47 на /category/
- Пользователь фильтрует через CTRL+F
- Или JavaScript-фильтрация (без изменения URL)

Просто. Без дублей.
Все товары на одной индексируемой странице.

8/ Мониторинг faceted navigation

Проверяйте каждый месяц:

□ Google Search Console → Coverage
□ Сколько URL в индексе?
□ Должно быть: категории + только ценные фильтры

□ Site: http://example.com
□ Сколько URL с параметрами в индексе?

□ Crawl через Screaming Frog
□ Сколько уникальных комбинаций параметров?

У клиента количество индексируемых страниц фильтров упало с 89K до 200.
Трафик ВЫРОС на 67%.

Меньше = лучше.

@WebDev_Plus

Чувак собрал полноценный эмулятор x86 CPU на CSS (без JavaScript).

Ты можешь писать программы на C, компилировать их в x86-машинный код через GCC и запускать прямо внутри CSS.

https://lyra.horse/x86css/

@WebDev_Plus

Я до сих пор считаю, что это одна из лучших фич, которые современный CSS нам дал!

Кто знает, что значит only?

@WebDev_Plus

Быстрый способ улучшить поведение текста в приложении — использовать text-wrap: balance. Это свойство равномерно распределяет текст по строкам, избегая "висячих" слов

Поддержка ограничена небольшим количеством строк (примерно <6–10 в зависимости от браузера), поэтому лучше всего применять его для заголовков или коротких абзацев

@WebDev_Plus

Знакомьтесь: abs() в CSS

Функция abs() возвращает абсолютное значение вычисления, то есть делает число, длину или процент всегда положительными. Полезно для более безопасной вёрстки и предсказуемого визуала.

Подробнее здесь ↓
https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/Values/abs

@WebDev_Plus

HTML-совет

Тег <abbr> используют, чтобы пометить аббревиатуру или акроним (сокращение) от фразы или длинного слова.

Он улучшает доступность и понимание: можно дать расшифровку, которая появится при наведении.

Обычно <abbr> используют вместе с атрибутом title. Значение title показывается как подсказка, когда пользователь наводит курсор на содержимое <abbr>.

В этом примере:

WWW это сокращение от World Wide Web.
Когда пользователь наведёт на WWW, появится тултип с полной расшифровкой World Wide Web.

Зачем использовать <abbr>?

Доступность: скринридеры могут озвучивать полную форму, когда пользователь фокусируется на сокращении. Это помогает людям с нарушениями зрения.
Удобство: пользователь быстро видит смысл термина, не уходя со страницы и не ломая поток чтения.

@WebDev_Plus