WebDev+ | Веб-разработка
8.3K subscribers
507 photos
242 videos
10 files
702 links
Присоединяйтесь к нашему каналу и погрузитесь в мир веб-разработки

Связь: @devmangx
Download Telegram
This media is not supported in your browser
VIEW IN TELEGRAM
Blend mode — одна из моих любимых CSS-свойств

Использую его в своём следующем шаблоне для @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
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
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
2
API позиционирования якорей (anchor positioning API) в CSS берет на себя всю «магическую» работу по размещению тултипов.

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

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

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

@WebDev_Plus
3
This media is not supported in your browser
VIEW IN TELEGRAM
Вам сложно создавать дизайн для своих сайтов или приложений?

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

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

@WebDev_Plus
2
This media is not supported in your browser
VIEW IN TELEGRAM
При выравнивании иконок с текстом можно задать 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
7
This media is not supported in your browser
VIEW IN TELEGRAM
Японцы с ThreeJS создают веб-страницы, которые поражают воображение:

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

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

@WebDev_Plus
👍51
This media is not supported in your browser
VIEW IN TELEGRAM
Есть среда разработки, в которой ты буквально можешь вставить работающий сайт и «снять» с него все медиа просто перетаскиванием — как это и должно быть.

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

@WebDev_Plus
4
This media is not supported in your browser
VIEW IN TELEGRAM
Реализовал этот эффект прокрутки с помощью threejs. Он основан на этом коде

@WebDev_Plus
6
This media is not supported in your browser
VIEW IN TELEGRAM
Захватывает анимация, которую можно сделать с помощью GSAP всего за несколько строк кода:

@WebDev_Plus
2
Совет по JavaScript:

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

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

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

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

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

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

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

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

Что нового:

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

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

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

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

@WebDev_Plus
2👍2
This media is not supported in your browser
VIEW IN TELEGRAM
CSS-анимация автоизменения высоты с использованием grid

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
This media is not supported in your browser
VIEW IN TELEGRAM
Создайте анимацию входа на вашу веб-страницу с помощью SVG и нескольких строк CSS.

@WebDev_Plus
4
ПРО СОВЕТ: REST — это переинжиниринг. Просто сделайте один эндпоинт /api, который напрямую принимает SQL-запросы.

Из соображений безопасности я добавил в сниппет AI-проверку

. 😄

@WebDev_Plus
Please open Telegram to view this post
VIEW IN TELEGRAM
😁10
Команда ядра React, наверное, спит, а я выкладываю еретические советы по React

Знаете ли вы, что хуки можно использовать прямо внутри 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
1
This media is not supported in your browser
VIEW IN TELEGRAM
Веб-дизайнеры и разработчики, это может стать библиотекой анимации следующего уровня

https://reactbits.dev/

@WebDev_Plus
8