This media is not supported in your browser
VIEW IN TELEGRAM
Anime.js 4.2.0 вышел
Теперь все модули можно импортировать отдельно через под-пути, добавлена поддержка значений CSS-переменных, упростили Spring API с параметрами bounce и duration, стало больше встроенных easing-функций из WAAPI, а ещё появился редактор для easing-функций. И, конечно, куча фиксов и улучшений
@WebDev_Plus
Теперь все модули можно импортировать отдельно через под-пути, добавлена поддержка значений CSS-переменных, упростили Spring API с параметрами bounce и duration, стало больше встроенных easing-функций из WAAPI, а ещё появился редактор для easing-функций. И, конечно, куча фиксов и улучшений
@WebDev_Plus
❤5
This media is not supported in your browser
VIEW IN TELEGRAM
Эта ошибка в HTML убивает пользовательский опыт
Не использовать атрибут inputmode в своих <input>.
Атрибут подсказывает браузеру, какую клавиатуру открыть:
"numeric", "email", "tel", "url"...
Работает и на Android, и на iOS, и сильно прокачивает UX.
@WebDev_Plus
Не использовать атрибут inputmode в своих <input>.
Атрибут подсказывает браузеру, какую клавиатуру открыть:
"numeric", "email", "tel", "url"...
Работает и на Android, и на iOS, и сильно прокачивает UX.
@WebDev_Plus
❤11
This media is not supported in your browser
VIEW IN TELEGRAM
Blend mode — одна из моих любимых CSS-свойств
Использую его в своём следующем шаблоне для👀
@WebDev_Plus
Использую его в своём следующем шаблоне для
@framer, чтобы меню и логотип всегда оставались видимыми @WebDev_Plus
Please open Telegram to view this post
VIEW IN TELEGRAM
👍5
This media is not supported in your browser
VIEW IN TELEGRAM
В CSS теперь можно использовать конструкцию :nth-child(... of ...), чтобы выбирать n-й элемент только среди определённых селекторов.
Это открывает новые возможности для точного таргетинга элементов без лишних костылей в разметке или дополнительных классов.
✔️ Поддержка в браузерах уже почти всеобщая — около 93%
@WebDev_Plus
Это открывает новые возможности для точного таргетинга элементов без лишних костылей в разметке или дополнительных классов.
@WebDev_Plus
Please open Telegram to view this post
VIEW IN TELEGRAM
❤10
Вышел React 19.2!
В обновлении появились: Activity, useEffectEvent, React Performance Tracks, частичный pre-rendering и другие фичи.
Список всего, что вошло в этот выпуск, можно найти в анонсе React 19.2 в блоге: https://react.dev/blog/2025/10/01/react-19-2
@WebDev_Plus
В обновлении появились: Activity, useEffectEvent, React Performance Tracks, частичный pre-rendering и другие фичи.
Список всего, что вошло в этот выпуск, можно найти в анонсе React 19.2 в блоге: https://react.dev/blog/2025/10/01/react-19-2
@WebDev_Plus
❤2
This media is not supported in your browser
VIEW IN TELEGRAM
clip-path реально недооценён.
С его помощью можно обрезать элементы по любым формам
https://developer.mozilla.org/en-US/docs/Web/CSS/clip-path
@WebDev_Plus
С его помощью можно обрезать элементы по любым формам
https://developer.mozilla.org/en-US/docs/Web/CSS/clip-path
@WebDev_Plus
❤2
API позиционирования якорей (anchor positioning API) в CSS берет на себя всю «магическую» работу по размещению тултипов.
Не нужно никаких ухищрений с JS.
Более того, тултип можно автоматически «переворачивать», чтобы он не вылезал за пределы экрана — для этого используется position-try.
Подробнее об этом можно прочитать здесь
@WebDev_Plus
Не нужно никаких ухищрений с JS.
Более того, тултип можно автоматически «переворачивать», чтобы он не вылезал за пределы экрана — для этого используется position-try.
Подробнее об этом можно прочитать здесь
@WebDev_Plus
❤3
This media is not supported in your browser
VIEW IN TELEGRAM
Вам сложно создавать дизайн для своих сайтов или приложений?
Google выпустил приложение Stitch, которое генерирует пользовательский интерфейс с помощью искусственного интеллекта.
Это бесплатно, а результат впечатляет:
@WebDev_Plus
Google выпустил приложение Stitch, которое генерирует пользовательский интерфейс с помощью искусственного интеллекта.
Это бесплатно, а результат впечатляет:
@WebDev_Plus
❤2
This media is not supported in your browser
VIEW IN TELEGRAM
При выравнивании иконок с текстом можно задать
Это значение соответствует line-height элемента, поэтому иконки выравниваются идеально.
@WebDev_Plus
height: 1lhЭто значение соответствует line-height элемента, поэтому иконки выравниваются идеально.
@WebDev_Plus
👍4🔥2
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