This media is not supported in your browser
VIEW IN TELEGRAM
Есть среда разработки, в которой ты буквально можешь вставить работающий сайт и «снять» с него все медиа просто перетаскиванием — как это и должно быть.
Запомни: впервые ты увидел это в Unit.
@WebDev_Plus
Запомни: впервые ты увидел это в Unit.
@WebDev_Plus
❤4
This media is not supported in your browser
VIEW IN TELEGRAM
Захватывает анимация, которую можно сделать с помощью GSAP всего за несколько строк кода:
@WebDev_Plus
@WebDev_Plus
❤2
Совет по JavaScript:
Можно использовать метод console.table(), чтобы вывести табличные данные в виде таблицы в консоли.
Ты, скорее всего, каждый день пользуешься console.log().
Но знаешь ли ты, что у объекта console есть и другие полезные методы — например, console.table() и console.error()?
Подробнее — в статье
Ещё больше трюков по JavaScript можно найти здесь
@WebDev_Plus
Можно использовать метод console.table(), чтобы вывести табличные данные в виде таблицы в консоли.
Ты, скорее всего, каждый день пользуешься console.log().
Но знаешь ли ты, что у объекта console есть и другие полезные методы — например, console.table() и console.error()?
Подробнее — в статье
Ещё больше трюков по JavaScript можно найти здесь
@WebDev_Plus
Если ты пришёл из CSS, особенно приятно, как Tailwind даёт утилиты для работы с прямыми потомками, всеми потомками, произвольными вариантами и не только.
Например, *:style применяется к прямым детям, **:style — ко всем потомкам, а [&.selector]:style позволяет создавать произвольные варианты.
Узнайте об этом в официальной документации Tailwind
@WebDev_Plus
Например, *:style применяется к прямым детям, **:style — ко всем потомкам, а [&.selector]:style позволяет создавать произвольные варианты.
Узнайте об этом в официальной документации Tailwind
@WebDev_Plus
Новость от OpenAI! Они выпустили Apps SDK для создания собственных приложений прямо внутри ChatGPT.
Что нового:
React для разработки интерфейса
MCP для работы с API и логикой
Сохранение состояния и доступ к моделям ИИ
Круто, правда?
@WebDev_Plus
Что нового:
React для разработки интерфейса
MCP для работы с API и логикой
Сохранение состояния и доступ к моделям ИИ
Круто, правда?
@WebDev_Plus
❤2👍2
This media is not supported in your browser
VIEW IN TELEGRAM
CSS-анимация автоизменения высоты с использованием grid
стрелки для навигации📍
@WebDev_Plus
li > div[inert] {
grid-template-rows: 0fr;
}
li > div {
grid-template-rows: 1fr;
transition: grid-template-rows .26s;
}стрелки для навигации
@WebDev_Plus
Please open Telegram to view this post
VIEW IN TELEGRAM
❤3
ПРО СОВЕТ: REST — это переинжиниринг. Просто сделайте один эндпоинт /api, который напрямую принимает SQL-запросы.
Из соображений безопасности я добавил в сниппет AI-проверку
.
@WebDev_Plus
Please open Telegram to view this post
VIEW IN TELEGRAM
😁10
Команда ядра React, наверное, спит, а я выкладываю еретические советы по React
Знаете ли вы, что хуки можно использовать прямо внутри JSX?
Конечно, так делать не стоит, но технически можно.
Это нарушает первое правило хуков, но всё равно работает, потому что хук вызывается в одном и том же порядке каждый раз.
@WebDev_Plus
Знаете ли вы, что хуки можно использовать прямо внутри JSX?
Конечно, так делать не стоит, но технически можно.
Это нарушает первое правило хуков, но всё равно работает, потому что хук вызывается в одном и том же порядке каждый раз.
@WebDev_Plus
❤1👍1
This media is not supported in your browser
VIEW IN TELEGRAM
Лучшая утилита для создания софтвэр диаграмм.
К тому же бесплатная и совместимая с GitHub!
Идеально подходит для UML, потоков и процессов.
Экспорт в изображение, PDF, HTML и другие форматы.
→ http://app.diagrams.net
@WebDev_Plus
К тому же бесплатная и совместимая с GitHub!
Идеально подходит для UML, потоков и процессов.
Экспорт в изображение, PDF, HTML и другие форматы.
→ http://app.diagrams.net
@WebDev_Plus
❤1
This media is not supported in your browser
VIEW IN TELEGRAM
Веб-дизайнеры и разработчики, это может стать библиотекой анимации следующего уровня
https://reactbits.dev/
@WebDev_Plus
https://reactbits.dev/
@WebDev_Plus
❤8
Меняй значение border-radius в зависимости от размера контейнера или экрана — всего одной строкой кода.
Условный Border Radius на CSS
По умолчанию значение равно 2rem. Когда элемент занимает всю ширину (его ширина равна ширине контейнера), радиус скругления становится 0.
Если контейнер не задан, 100cqi автоматически подставит 100vw (ширину экрана).
Попробуй менять размер экрана или контейнера в демке , чтобы увидеть, как это работает:
@WebDev_Plus
Условный Border Radius на CSS
.box {
border-radius: calc(sign(100cqi - 100%) * 2rem);
}По умолчанию значение равно 2rem. Когда элемент занимает всю ширину (его ширина равна ширине контейнера), радиус скругления становится 0.
Если контейнер не задан, 100cqi автоматически подставит 100vw (ширину экрана).
Попробуй менять размер экрана или контейнера в демке , чтобы увидеть, как это работает:
@WebDev_Plus
🤔1
может быть полезно → добавьте это в ваш css (сверху), это отменит избыточный вес шрифта tailwind на сайте, и вес шрифта будет выглядеть точно так же, как на figma.
@WebDev_Plus
@WebDev_Plus
❤7🎉1👌1
This media is not supported in your browser
VIEW IN TELEGRAM
Visual Effect теперь с открытым исходным кодом
https://github.com/kitlangton/visual-effect
Со звуком: https://effect.kitlangton.com/effect-repeat-while-output
@WebDev_Plus
https://github.com/kitlangton/visual-effect
Со звуком: https://effect.kitlangton.com/effect-repeat-while-output
@WebDev_Plus
This media is not supported in your browser
VIEW IN TELEGRAM
Раньше: 30 минут перетаскивания и сортировки папок.
Теперь: "Warp, наведи порядок в этом беспорядке, пожалуйста".
Вот это ИИ, который делает мою жизнь лучше, хахаха.
→ http://midu.link/warp
@WebDev_Plus
Теперь: "Warp, наведи порядок в этом беспорядке, пожалуйста".
Вот это ИИ, который делает мою жизнь лучше, хахаха.
→ http://midu.link/warp
@WebDev_Plus
😁1
This media is not supported in your browser
VIEW IN TELEGRAM
Используй CSS-свойства вроде blur и opacity в анимациях, чтобы всё выглядело плавно, а не топорно.
Размытие, изменения прозрачности и пружинная анимация и есть причина, по которой анимации у Apple выглядят гладко.
@WebDev_Plus
Размытие, изменения прозрачности и пружинная анимация и есть причина, по которой анимации у Apple выглядят гладко.
@WebDev_Plus
👎4👍1
Chrome DevTools — без сомнений, мой любимый MCP-сервер.
Запустив всего две команды в терминале, ты можешь подключить Claude Code прямо к браузеру с полным доступом:
Запускаем Chrome:
Добавляем MCP, который коннектится к браузеру:
@WebDev_Plus
Запустив всего две команды в терминале, ты можешь подключить 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
This media is not supported in your browser
VIEW IN TELEGRAM
Закреплённый сайдбар с переходом
Чистый CSS, ноль JS для перехода лейаута.
Куча мелких настроек, с которыми можно поиграться
@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
This media is not supported in your browser
VIEW IN TELEGRAM
Динамическое позиционирование тултипа с использованием Anchor Positioning
С помощью anchor positioning можно «привязать» один элемент к другому и при этом гарантировать, что он останется видимым на экране, даже если привязанный элемент смещается. Теперь представим, что этот элемент — тултип. А что насчет его «хвостика»? Его тоже можно настроить так, чтобы он всегда указывал на якорь.
https://css-tip.com/tooltip-anchor/
@WebDev_Plus
С помощью 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
❤6