WebDev+ | Веб-разработка

CSS-анимация автоизменения высоты с использованием grid

li > div[inert] {
  grid-template-rows: 0fr;
}
li > div {
  grid-template-rows: 1fr;
  transition: grid-template-rows .26s;
}

стрелки для навигации 📍

@WebDev_Plus

Новость от OpenAI! Они выпустили Apps SDK для создания собственных приложений прямо внутри ChatGPT.

Что нового:

React для разработки интерфейса

MCP для работы с API и логикой

Сохранение состояния и доступ к моделям ИИ

Круто, правда?

@WebDev_Plus

Если ты пришёл из CSS, особенно приятно, как Tailwind даёт утилиты для работы с прямыми потомками, всеми потомками, произвольными вариантами и не только.

Например, *:style применяется к прямым детям, **:style — ко всем потомкам, а [&.selector]:style позволяет создавать произвольные варианты.

Узнайте об этом в официальной документации Tailwind

@WebDev_Plus

Совет по JavaScript:

Можно использовать метод console.table(), чтобы вывести табличные данные в виде таблицы в консоли.

Ты, скорее всего, каждый день пользуешься console.log().
Но знаешь ли ты, что у объекта console есть и другие полезные методы — например, console.table() и console.error()?

Подробнее — в статье

Ещё больше трюков по JavaScript можно найти здесь

@WebDev_Plus

Захватывает анимация, которую можно сделать с помощью GSAP всего за несколько строк кода:

@WebDev_Plus

Реализовал этот эффект прокрутки с помощью threejs. Он основан на этом коде

@WebDev_Plus

Есть среда разработки, в которой ты буквально можешь вставить работающий сайт и «снять» с него все медиа просто перетаскиванием — как это и должно быть.

Запомни: впервые ты увидел это в Unit.

@WebDev_Plus

Японцы с ThreeJS создают веб-страницы, которые поражают воображение:

Сайт - https://kokuyo.com/special/curiosity-is-life/.

Я понятия не имею, о чем он, но он очень милый.

@WebDev_Plus

Быстрый совет, который стоило узнать раньше:

Если ваше приложение зависло (например, из-за бесконечного цикла или useEffect), просто откройте вкладку Sources в DevTools и нажмите Pause script execution. (остановить выполнение скрипта)

Браузер сразу покажет строку кода, из-за которой произошло зависание.

@WebDev_Plus

При выравнивании иконок с текстом можно задать height: 1lh

Это значение соответствует line-height элемента, поэтому иконки выравниваются идеально.

@WebDev_Plus

Вам сложно создавать дизайн для своих сайтов или приложений?

Google выпустил приложение Stitch, которое генерирует пользовательский интерфейс с помощью искусственного интеллекта.

Это бесплатно, а результат впечатляет:

@WebDev_Plus

API позиционирования якорей (anchor positioning API) в CSS берет на себя всю «магическую» работу по размещению тултипов.

Не нужно никаких ухищрений с JS.

Более того, тултип можно автоматически «переворачивать», чтобы он не вылезал за пределы экрана — для этого используется position-try.

Подробнее об этом можно прочитать здесь

@WebDev_Plus

clip-path реально недооценён.

С его помощью можно обрезать элементы по любым формам

https://developer.mozilla.org/en-US/docs/Web/CSS/clip-path

@WebDev_Plus

Вышел 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

В CSS теперь можно использовать конструкцию :nth-child(... of ...), чтобы выбирать n-й элемент только среди определённых селекторов.

Это открывает новые возможности для точного таргетинга элементов без лишних костылей в разметке или дополнительных классов.

✔️ Поддержка в браузерах уже почти всеобщая — около 93%

@WebDev_Plus

Blend mode — одна из моих любимых CSS-свойств

Использую его в своём следующем шаблоне для @framer, чтобы меню и логотип всегда оставались видимыми 👀

@WebDev_Plus

Эта ошибка в HTML убивает пользовательский опыт

Не использовать атрибут inputmode в своих <input>.

Атрибут подсказывает браузеру, какую клавиатуру открыть:
"numeric", "email", "tel", "url"...

Работает и на Android, и на iOS, и сильно прокачивает UX.

@WebDev_Plus

Anime.js 4.2.0 вышел

Теперь все модули можно импортировать отдельно через под-пути, добавлена поддержка значений CSS-переменных, упростили Spring API с параметрами bounce и duration, стало больше встроенных easing-функций из WAAPI, а ещё появился редактор для easing-функций. И, конечно, куча фиксов и улучшений

@WebDev_Plus

Нашли бесплатный плагин для браузера — Font Tester

Он позволяет на любом сайте изменить шрифт (в базе свыше 1500 вариантов), настроить размеры и интервалы, чтобы проверить, какой вариант смотрится лучше.

@WebDev_Plus

Это страница из 200 строк, созданная с помощью обычного JavaScript:

Демо: http://pong-wars.vercel.app
Код: http://github.com/vnglst/pong-wars

@WebDev_Plus