WebDev+ | Веб-разработка

Если ты реально понимаешь эти типы , то ты официально больше не вайб-кодер. Или вообще им никогда не был!

Покажи решение получше! 🤟

@WebDev_Plus

Claude Code стал 3D монстром: держите 10 продвинутых Three.js скиллов.

Там есть все: от базовой сцены до геометрии, освещения, анимаций и красивых эффектов. 🤩

Это ускорит сборку шикарных WebGL-сцен и интерактивных 3D приколюх.

Некоторые скиллы получаются слишком детальными, можно слегка упростить и использовать так.

исходники

@WebDev_Plus

Спорю, ты не юзаешь эту настройку в VScode, а она тебе зайдет 🫰

Попробуй nativeTabs, если открываешь несколько окон VS Code (только mac).

Потом спасибо скажешь

@WebDev_Plus

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

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

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

@WebDev_Plus

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

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

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

@WebDev_Plus

CSS tip

Годами мы жили с кошмаром под названием z-index и stacking context, но скоро нас ждет кошмар похлеще, связанный с Anchor Positioning 😱

Когда оно не работает, это бесит, так что пора разобраться, как это реально устроено.

https://css-tip.com/anchor-issues/

@WebDev_Plus

CSS в 2026:

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

@WebDev_Plus

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

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

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

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

npx -y react-doctor@latest

@WebDev_Plus

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

@WebDev_Plus

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

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

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

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

@WebDev_Plus

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

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

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

→ npm install sileo

@WebDev_Plus

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

@WebDev_Plus

В теории графов есть алгоритмы, которые находят кратчайший путь между двумя узлами. Я сделал такой алгоритм на чистом CSS (включая отрисовку самого графа).

Перетаскивай узлы, и кратчайший путь будет пересчитываться в реальном времени!

[https://css-tip.com/graph-theory/]

Демо, которое работает на всех современных CSS-фичах 🤩

@WebDev_Plus

JavaScript-совет

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

@WebDev_Plus

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

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

→ https://svgl.app

@WebDev_Plus

Совет по HTML/JavaScript:

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

@WebDev_Plus

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

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

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

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

@WebDev_Plus

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

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

.item {
  position: relative;
}

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

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

@WebDev_Plus

BridgeJS подъехал

Вышел новый JS <-> Swift bridge, и он безумно быстрее текущего механизма.

⚡️По микробенчмаркам — примерно в 40 раз быстрее
⚡️Можно импортировать прямо из TypeScript type definitions

https://github.com/swiftwasm/JavaScriptKit/releases/tag/0.44.0

Если работаешь со Swift + JS — это серьезный апгрейд.


@WebDev_Plus