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

Никогда больше не программируйте в одиночку в VSCode

Это расширение добавляет домашних животных в ваш редактор

@WebDev_Plus

Прогрессивные CSS-индикаторы пагинации без JS c anchor positioning

nav::before { position-anchor: --h; }
nav::before { left: anchor(left); }
a:hover { anchor-name: --h; }

Идея такая: наводишься на ссылку, у неё появляется якорное имя --h, а nav::before привязывается к этому якорю через position-anchor и выравнивается по left: anchor(left). Для разметки используй псевдоэлементы самого nav: ::before — для индикатора наведения (intent), ::after — для индикатора текущей страницы (current).

@WebDev_Plus

Самый гибкий паттерн, который я нашел для построения составных интерфейсов — это headless store, то есть хранилище состояния без привязки к UI.

Сначала ты создаешь экземпляр стора — локальный или глобальный, потом передаешь его в компоненты напрямую или через контекст. Такой подход дает больше контроля, чем render props, HOC, refs или классические compound-компоненты.

Store отвечает за три простые вещи: хранит и управляет состоянием как единым источником правды, предоставляет методы для обновления состояния и выполняет сайд-эффекты, когда происходят изменения или переходы. Этого достаточно, чтобы собирать даже довольно сложные интерфейсы

@WebDev_Plus

Как Apple делает эти безумные видеопереходы при прокрутке?

Давайте воссоздадим это с помощью чистого CSS с анимацией, управляемой прокруткой, и view-timeline.

Именно так, никаких слушателей событий прокрутки

Получить фрагменты кода, подсказки и полное руководство можно здесь

@WebDev_Plus

Не знаете, какие единицы измерения использовать в CSS?
px, rem, em, fr, %, vh... Их слишком много 😡

Эта диаграмма подскажет вам решение и объяснит его.

Решите с помощью информации, какая единица является правильной.
→ http://whatunit.com

@WebDev_Plus

Динамическое позиционирование тултипа с использованием Anchor Positioning

С помощью anchor positioning можно «привязать» один элемент к другому и при этом гарантировать, что он останется видимым на экране, даже если привязанный элемент смещается. Теперь представим, что этот элемент — тултип. А что насчет его «хвостика»? Его тоже можно настроить так, чтобы он всегда указывал на якорь.

#anchor {
  position: absolute;
  anchor-name: --anchor;
}

#tooltip {
  --d: 1em;   /* расстояние между якорем и тултипом */
  --s: 1.2em; /* размер хвостика */
  
  position: absolute; 
  position-anchor: --anchor;
  /* размещаем тултип сверху */
  position-area: top;
  bottom: var(--d);
  margin-top: var(--d); /* этот margin наследуется псевдоэлементом, здесь он ничего не делает */
  /* если сверху тултип не помещается — переключаемся вниз (margin перевернётся автоматически) */
  position-try-fallbacks: flip-block; 
  anchor-name: --tooltip;
}

/* хвостик тултипа */
#tooltip:before {
  content: "";
  position: fixed;
  z-index: -1;
  width: var(--s);
  background: inherit;
  /* вертикальное положение относительно тултипа */
  top:    calc(anchor(--tooltip top) - var(--d));
  bottom: calc(anchor(--tooltip bottom) - var(--d));
  /* горизонтальное положение относительно якоря */
  left: calc(anchor(--anchor center) - var(--s)/2);
  margin: inherit; /* делает магию — скрывает верх или низ формы в зависимости от положения */
  /* форма стрелки */
  clip-path: polygon(
    50% .2em,
    100% var(--d),
    100% calc(100% - var(--d)),
    50% calc(100% - .2em),
    0 calc(100% - var(--d)),
    0 var(--d)
  );
}

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

@WebDev_Plus

Закреплённый сайдбар с переходом

.layout:has(:popover-open) {
  grid-template-columns: var(--sidebar-width) 1fr;
}
aside:popover-open {
  translate: 0 var(--ctrl);
  height: var(--extend);
}

Чистый CSS, ноль JS для перехода лейаута.
Куча мелких настроек, с которыми можно поиграться

@WebDev_Plus

Chrome DevTools — без сомнений, мой любимый MCP-сервер.

Запустив всего две команды в терминале, ты можешь подключить Claude Code прямо к браузеру с полным доступом:

Запускаем Chrome:

google-chrome --remote-debugging-port=9222 --user-data-dir="$HOME/.config/google-chrome"

Добавляем MCP, который коннектится к браузеру:

claude mcp add chrome-devtools -- npx -y chrome-devtools-mcp@latest -u http://localhost:9222

@WebDev_Plus

Используй CSS-свойства вроде blur и opacity в анимациях, чтобы всё выглядело плавно, а не топорно.

Размытие, изменения прозрачности и пружинная анимация и есть причина, по которой анимации у Apple выглядят гладко.

@WebDev_Plus

Раньше: 30 минут перетаскивания и сортировки папок.
Теперь: "Warp, наведи порядок в этом беспорядке, пожалуйста".

Вот это ИИ, который делает мою жизнь лучше, хахаха.

→ http://midu.link/warp

@WebDev_Plus

Visual Effect теперь с открытым исходным кодом

https://github.com/kitlangton/visual-effect

Со звуком: https://effect.kitlangton.com/effect-repeat-while-output

@WebDev_Plus

может быть полезно → добавьте это в ваш css (сверху), это отменит избыточный вес шрифта tailwind на сайте, и вес шрифта будет выглядеть точно так же, как на figma.

@WebDev_Plus

Меняй значение border-radius в зависимости от размера контейнера или экрана — всего одной строкой кода.

Условный Border Radius на CSS

.box {
  border-radius: calc(sign(100cqi - 100%) * 2rem);
}

По умолчанию значение равно 2rem. Когда элемент занимает всю ширину (его ширина равна ширине контейнера), радиус скругления становится 0.
Если контейнер не задан, 100cqi автоматически подставит 100vw (ширину экрана).

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

@WebDev_Plus

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

https://reactbits.dev/

@WebDev_Plus

Лучшая утилита для создания софтвэр диаграмм.

К тому же бесплатная и совместимая с GitHub!

Идеально подходит для UML, потоков и процессов.
Экспорт в изображение, PDF, HTML и другие форматы.

→ http://app.diagrams.net

@WebDev_Plus

Команда ядра React, наверное, спит, а я выкладываю еретические советы по React

Знаете ли вы, что хуки можно использовать прямо внутри JSX?

Конечно, так делать не стоит, но технически можно.

Это нарушает первое правило хуков, но всё равно работает, потому что хук вызывается в одном и том же порядке каждый раз.

@WebDev_Plus

ПРО СОВЕТ: REST — это переинжиниринг. Просто сделайте один эндпоинт /api, который напрямую принимает SQL-запросы.

Из соображений безопасности я добавил в сниппет AI-проверку

. 😄

@WebDev_Plus

Создайте анимацию входа на вашу веб-страницу с помощью SVG и нескольких строк CSS.

@WebDev_Plus