Уже доступно! Исследование Telegram 2025 — ключевые инсайты года 
WebDev+ | Веб-разработка
Открыть в Telegram
Присоединяйтесь к нашему каналу и погрузитесь в мир веб-разработки Связь: @devmangx
Больше8 303
Подписчики
-424 часа
-277 дней
-9130 день
Архив постов
Как 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)
);
}
Закреплённый сайдбар с переходом
.layout:has(:popover-open) {
grid-template-columns: var(--sidebar-width) 1fr;
}
aside:popover-open {
translate: 0 var(--ctrl);
height: var(--extend);
}
Он тимлид в российском бигтехе! Но ещё с универа мечтает о переезде в Лондон!
Он отправил уже несколько тысяч откликов на вакансии! Позади — сотни собеседований и столько же отказов 😳
Какое-то время он даже жил в лесу, чтобы ничего не отвлекало его от подготовки к интервью.
Он 14 лет в ИТ: писал сервисы, менеджерил команды, ломал монолиты и собирал новые 😅
Он видел всё — и даже то, чего не стоило бы видеть.
Весь свой опыт, знания и советы он публикует в своём канале, говорит простым и понятным языком.
Подпишись на его канал @artur_speaking
Узнай первым о том, что тебя ждёт впереди, чтобы оставить конкурентов далеко позади, добраться до самых вершин карьеры — и наказать своих врагов и завистников 💀
Chrome DevTools — без сомнений, мой любимый MCP-сервер.
Запустив всего две команды в терминале, ты можешь подключить Claude Code прямо к браузеру с полным доступом:
Запускаем Chrome:
google-chrome --remote-debugging-port=9222 --user-data-dir="$HOME/.config/google-chrome"claude mcp add chrome-devtools -- npx -y chrome-devtools-mcp@latest -u http://localhost:9222
Используй 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);
}
Веб-дизайнеры и разработчики, это может стать библиотекой анимации следующего уровня
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
Опа, тут бывший сеньор одного из IT-отделов Яндекса Игорь Никитин выкатил целый канал про Python — и это лучшее, что есть в рунете по теме.
Качественные гайды. Советы от известных прогеров. Тематические мемасы. Короче, ничего лишнего.
Хватит душить питона, учись его кодить: https://t.me/+MHz6ewg03OVkZjcy 🐍
Создайте анимацию входа на вашу веб-страницу с помощью SVG и нескольких строк CSS.
@WebDev_Plus
CSS-анимация автоизменения высоты с использованием grid
li > div[inert] {
grid-template-rows: 0fr;
}
li > div {
grid-template-rows: 1fr;
transition: grid-template-rows .26s;
}
Новость от OpenAI! Они выпустили Apps SDK для создания собственных приложений прямо внутри ChatGPT.
Что нового:
React для разработки интерфейса
MCP для работы с API и логикой
Сохранение состояния и доступ к моделям ИИ
Круто, правда?
@WebDev_Plus
Требуются парни и девушки в возрасте 19–40 лет, желающие работать в сфере IT.
Опыт в программировании не нужен.
Завтра запускаем бесплатный онлайн-интенсив по Frontend-разработке, где будем показывать, как разрабатывать сайты и веб-приложения используя ChatGPT.
За 7 дней обучения ты:
1. Создашь полноценный веб-сайт на HTML и CSS;
2. Оживишь страницу с помощью JavaScript;
3. Используешь фронтенд-фреймворк Angular;
4. Подключишь Backend и загрузишь сайт на хостинг;
5. Получишь советы по доработке своего проекта;
6. Научишься использовать ChatGPT и Giga во Frontend-разработке;
7. Узнаешь 9 способов найти первый заказ на фрилансе даже без опыта.
А главное, ты увидишь, что разрабатывать сайты и приложения не так сложно, как кажется. И поймёшь, как тебе развиваться в этой профессии, чтобы уже через пару месяцев зарабатывать от 1000$ на вёрстке сайтов.
👉 Проскочить на интенсив бесплатно
🔥 С 2019 стабильно помогаем с обучением, практикой, зарабатывать на фрилансе и проходить собеседования.
