This media is not supported in your browser
VIEW IN TELEGRAM
Китайская компания 4dv запустила инструмент, который превращает обычные 2D-видео в полностью интерактивные 4D-видео.
Пока что это бета-версия, но на их сайте можно попробовать несколько демо-видео :)
@WebDev_Plus
Пока что это бета-версия, но на их сайте можно попробовать несколько демо-видео :)
@WebDev_Plus
❤4
This media is not supported in your browser
VIEW IN TELEGRAM
Фантастическая библиотека анимаций для разработчиков на React Native
Она упрощает создание плавных и высокопроизводительных анимаций, а также добавление движения в ваш UI :)
Благодарю всех , кто поддерживает канал лайками✏️
https://github.com/software-mansion/react-native-reanimated
@WebDev_Plus
Она упрощает создание плавных и высокопроизводительных анимаций, а также добавление движения в ваш UI :)
Благодарю всех , кто поддерживает канал лайками
https://github.com/software-mansion/react-native-reanimated
@WebDev_Plus
Please open Telegram to view this post
VIEW IN TELEGRAM
👍11👎2
Копался я в исходниках MongoDB — и внезапно нашёл внутри инстанс Postgres с такой вот таблицей.
@WebDev_Plus
@WebDev_Plus
😁4🔥1
Как веб-разработчик, ты будешь использовать множество инструментов и фреймворков при создании сайтов и приложений.
И чтобы помочь тебе разобраться с ключевыми технологиями, Playback Press подготовил этот гайд.
В нём ты изучишь основы фронтенда и бэкенда: HTTP, Node, Express, JSON, Mongo, HTML, CSS, Web Components и React.
Ссылка: Animated Intro to Web Development
@WebDev_Plus
И чтобы помочь тебе разобраться с ключевыми технологиями, Playback Press подготовил этот гайд.
В нём ты изучишь основы фронтенда и бэкенда: HTTP, Node, Express, JSON, Mongo, HTML, CSS, Web Components и React.
Ссылка: Animated Intro to Web Development
@WebDev_Plus
🔥4❤2
This media is not supported in your browser
VIEW IN TELEGRAM
Ищешь вдохновение для веб-дизайна?
Эта страница собирает лучшие идеи и тренды
Каждый день публикуются новые сайты для вдохновения:
→ http://godly.website
@WebDev_Plus
Эта страница собирает лучшие идеи и тренды
Каждый день публикуются новые сайты для вдохновения:
→ http://godly.website
@WebDev_Plus
👍5
This media is not supported in your browser
VIEW IN TELEGRAM
Это страница из 200 строк, созданная с помощью обычного JavaScript:
Демо: http://pong-wars.vercel.app
Код: http://github.com/vnglst/pong-wars
@WebDev_Plus
Демо: http://pong-wars.vercel.app
Код: http://github.com/vnglst/pong-wars
@WebDev_Plus
❤5💯4🔥3
This media is not supported in your browser
VIEW IN TELEGRAM
Нашли бесплатный плагин для браузера — Font Tester
Он позволяет на любом сайте изменить шрифт (в базе свыше 1500 вариантов), настроить размеры и интервалы, чтобы проверить, какой вариант смотрится лучше.
@WebDev_Plus
Он позволяет на любом сайте изменить шрифт (в базе свыше 1500 вариантов), настроить размеры и интервалы, чтобы проверить, какой вариант смотрится лучше.
@WebDev_Plus
❤3
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