This media is not supported in your browser
VIEW IN TELEGRAM
Быстрый совет, который стоило узнать раньше:
Если ваше приложение зависло (например, из-за бесконечного цикла или useEffect), просто откройте вкладку Sources в DevTools и нажмите Pause script execution. (остановить выполнение скрипта)
Браузер сразу покажет строку кода, из-за которой произошло зависание.
@WebDev_Plus
Если ваше приложение зависло (например, из-за бесконечного цикла или useEffect), просто откройте вкладку Sources в DevTools и нажмите Pause script execution. (остановить выполнение скрипта)
Браузер сразу покажет строку кода, из-за которой произошло зависание.
@WebDev_Plus
❤7
This media is not supported in your browser
VIEW IN TELEGRAM
Японцы с ThreeJS создают веб-страницы, которые поражают воображение:
Сайт - https://kokuyo.com/special/curiosity-is-life/.
Я понятия не имею, о чем он, но он очень милый.
@WebDev_Plus
Сайт - https://kokuyo.com/special/curiosity-is-life/.
Я понятия не имею, о чем он, но он очень милый.
@WebDev_Plus
👍5❤1
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