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

Как 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

Он тимлид в российском бигтехе! Но ещё с универа мечтает о переезде в Лондон! Он отправил уже несколько тысяч откликов на вакансии! Позади — сотни собеседований и столько же отказов 😳 Какое-то время он даже жил в лесу, чтобы ничего не отвлекало его от подготовки к интервью. Он 14 лет в ИТ: писал сервисы, менеджерил команды, ломал монолиты и собирал новые 😅 Он видел всё — и даже то, чего не стоило бы видеть. Весь свой опыт, знания и советы он публикует в своём канале, говорит простым и понятным языком. Подпишись на его канал @artur_speaking Узнай первым о том, что тебя ждёт впереди, чтобы оставить конкурентов далеко позади, добраться до самых вершин карьеры — и наказать своих врагов и завистников 💀

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