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

Если ты пришёл из CSS, особенно приятно, как Tailwind даёт утилиты для работы с прямыми потомками, всеми потомками, произвольными вариантами и не только. Например, *:style применяется к прямым детям, **:style — ко всем потомкам, а [&.selector]:style позволяет создавать произвольные варианты. Узнайте об этом в официальной документации Tailwind @WebDev_Plus

Совет по JavaScript: Можно использовать метод console.table(), чтобы вывести табличные данные в виде таблицы в консоли. Ты, скорее всего, каждый день пользуешься console.log(). Но знаешь ли ты, что у объекта console есть и другие полезные методы — например, console.table() и console.error()? Подробнее — в статье Ещё больше трюков по JavaScript можно найти здесь @WebDev_Plus

⚡️ Бесплатное обучение фронтенд-разработке с нуля: JavaScript, React, TypeScript, Nuxt, Next — с поддержкой от наставника Для тех, кто хочет сократить путь до первой работы или фриланса и не тратить время на самостоятельный поиск инфомрации На канале Интенсивный JavaScript действующий тимлид и опытный разработчик помогает изучить фронтенд на практических задачах, которые интересно кодить С 8 октября стартует бесплтаное обучение, где он поможет разобраться в JavaScript и React; для тех, кто с опытом — покажет как работать с Nuxt и Next Вот план учебных спринтов: 💡 с 8 октября напишете фронтенд для своего вайлдбериса, JS+Nuxt 👩‍💻👩‍💻 💡 с 18 октября фронтенд для озона на JS+Next 👩‍💻👩‍💻 💡 а затем To-do List 👩‍💻 Обучение подойдёт, даже если у вас минимальный опыт в программирвоании — всё объясняюе так, чтобы поняла даже бабуля 🔖Ещё этот парень регулярно набирает новичков в свою команду и знает, как попасть на работу джуну или разрабу с опытом Помимо кода — пошаговый план обучения современному фронтенду, — способы поиска клиентов с помощью ИИ — как взять первый заказ на фрилансе без перегретых бирж. Подписывайтесь, чтобы участвовать, осталось 56 мест Учиться самому можно бесконечно, если не знать, куда копать. На интенсивах вы сократите время на поиск инфы и получите понятный план от разработчика, который сам нанимает новичков. ➡️Участвовать бесплатно Среди всех участников в октябре разыграет годовой доступ к топовому ИИ

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

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

Программисты из Telegram создали сильнейшие IT- каналы 🐍 Ghostly Python - автоматизируй всё, что можешь. Боты, скрипты, парсеры, утилиты - делаем Python простым и полезным. Уверенный старт для новичков и не только. ☕️ Easy Java - Java без боли. От основ до фреймворков. Просто, понятно и по делу. Если хочешь реально понять язык - тебе сюда. 😎 IT Syndicate - главный хаб для тех, кто живёт IT. GameDev, InfoSec, Frontend, DevOps, AI и многое другое. Готовь мозг, тут будет жарко. 🧡 Ghostly Frontend - фронтенд без лишнего шума. HTML, CSS, JavaScript, React, Vue — всё, что нужно, чтобы создавать быстрые и красивые интерфейсы.

Есть среда разработки, в которой ты буквально можешь вставить работающий сайт и «снять» с него все медиа просто перетаскиванием — как это и должно быть. Запомни: впервые ты увидел это в 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

Создавать высокоэффективные сайты можно даже с основами html! Время поговорить о книгах. О «Создаем динамические веб-сайты с помощью PHP, MySQL, JavaScript, CSS и HTML5». Седьмое издание бестселлера вышло у Sprint book! 🔎 В ней: 1. Создание мощных веб-сайтов в сочетании веб-стандартов и технологий с открытым исходным кодом. 2. Динамическое веб-программирование с использованием современных технологий: PHP, MySQL, JavaScript, CSS, HTML, Node.js и мощной библиотеки React. 3. Объясняется, как преобразовать сайт в мобильное веб-приложение. Заглядывайте за новинкой, заказывайте книгу и улучшите свои навыки в создании сайтов! 🖇 Сайт А если нет желания учить язык программирования, «ChatGPT, сделай мне сайт» покажет, как правильно составлять промт. 🖇 Покупайте на сайте! 2VtzqvpGx8V

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

🔥Прими участие в Хакатоне от ИТ-холдинга Т1 в Новосибирске и поборись за призовой фонд 800 000 рублей! Когда: 23–26 октября Формат: онлайн + финал на площадке Участвуй, если ты: 🔹обучаешься на технической или ИТ-специальности; 🔹развиваешься в направлении разработки, аналитики, CV, ML или DevOps; 🔹сможешь быть в Новосибирске 26 октября. Выбери свой кейс:

✴️Цифровой дресс-код: фон, который выделяет вас. Создай локальный ML-модуль сегментации видео и генератор персонализированных фонов. ✴️CodeMetrics: метрики, которые помогают расти. Разработай систему автооценки эффективности команд через анализ Git-метрик.

Почему стоит участвовать: 🔘Кейс в портфолио и полезная обратная связь от менторов Т1; 🔘Шанс проявить себя, чтобы начать карьеру в одной из крупнейших ИТ-компаний; 🔘Реальный опыт командной работы; 🔘Мерч и атмосфера сильного комьюнити — в Т1 более 5 000 джунов из 580+ вузов России и Беларуси. Регистрация открыта! ➡️ Успей до 21 октября по ссылке. erid: 2Vtzqwmd32u

В 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