CodePen Community

👨‍💻 Фронтенд с AI: что можно делегировать агентам 5 октября, стартует конференция Podlodka Frontend Crew — сезон о том, как применять AI во фронтенд-разработке на практике. Участники конференции узнают: • Как находить prompt injection и противостоять таким атакам; • Какие подходы помогают повысить доверие к результатам агентской разработки; • Как проводить ревью кода, созданного AI-агентами; • Как AI помогает упростить починку багов. В программе ещё много практических кейсов. Также нужно отметить, что у конференции очень удобный формат. Это пять дней Zoom-сессий по утрам и вечерам и закрытое Telegram-комьюнити, где можно обсудить новый опыт и узнать от единомышленников то, что не догадаешься спросить у своей LLM. Приходите, чтобы разобраться, какие задачи уже можно делегировать AI, где важно сохранять контроль и как выстроить системную работу с AI в команде или проекте. Скидка по промокоду codepen 🔗 Программа и билеты: https://podlodka.io/fecrew

🎲Tap / click to roll dice https://codepen.io/creativeocean/pen/oNEPggW Подпишись👉 @codepen_1

💻Angular — один из самых строгих и системных инструментов разработки пользовательских интерфейсов. Его выбирают крупные компании, где важны масштабируемость, предсказуемость кода и возможность развивать продукт долгие годы. Мы расскажем вам как работать с этим инструментом. Записывайтесь на открытые уроки в преддверии старта курса «Angular-разработчик»: 📆26 марта в 20:00 МСК на открытом уроке разберём, как LLM ускоряют фронтенд-разработку. Покажем их развитие, подготовим Angular-проект к работе с ИИ, создадим приложение и обсудим, где ИИ реально помогает разработчику. 📆9 апреля в 20:00 МСК на открытом уроке разберём сигналы в Angular: создадим реактивную форму с валидацией, обсудим управление состоянием и сравним с подходом на RxJS. 📆21 апреля в 20:00 МСК разберём архитектуру Angular-приложения: слои, feature-подход, разделение UI, логики и API, а также паттерны и структуру реального проекта. Подробности об уроках и регистрация: https://vk.cc/cVBl0E Реклама. ООО «Отус онлайн-образование», ОГРН 1177746618576, www.otus.ru

Button — анимация появления разноцветных фигур при клике на кнопку, реализованная с помощью JavaScript. https://codepen.io/Anna_Batura/pen/RwKgmLw Подпишись👉 @codepen_1

Раскрасьте этот диван! Кайл Веттон создал интерактивный Pen, в котором вы можете раскрасить диван и фон. Может использоваться на e-commerce сайтах по продаже мебели. https://codepen.io/kylewetton/pen/OJLmJoV Подпишись👉 @codepen_1

Натюрморт на чистом CSS Эта картинка от Бена Эванса — прекрасный пример того, на что способен CSS. https://codepen.io/ivorjetski/pen/xMJoYO Подпишись👉 @codepen_1

CSS 404 page https://codepen.io/agathaco/pen/WKXREy Подпишись👉 @codepen_1

Градиентные узоры, реализованные с помощью SCSS, без использования JavaScript и SVG https://codepen.io/thebabydino/pen/NWxBzRv Подпишись👉 @codepen_1

Форма MasterCard https://codepen.io/JavaScriptJunkie/pen/YzzNGeR Подпишись👉 @codepen_1

AnimeJS Staggered Grid Effect Эффект при клике по элементу сетки, выполненный с помощью CSS и библиотеки Anime.js https://codepen.io/Hyperplexed/pen/zYWvXMM Подпишись👉 @codepen_1

🔥Podlodka React Crew – онлайн-конференция для React-разработчиков. И в новом сезоне ребята решили разобраться, какие инструменты и знания включают в роадмапы профессионального развития и насколько они применимы. Что в программе: 💬 Говорим на одном языке с пользователями: i18n в React-приложениях – Виталий Баев, контрибьютор Next.js и Vite 🌍 Как выбрать инструменты и сделать интерфейс удобным для всех? 📡 OpenTelemetry для фронтенд-разработчика – Валерий Катцин, frontend-разработчик в Точке 📊 Как собирать данные о работе приложения и использовать их для улучшения продукта? 🔥 "Долгожданный" React 19 – Алекс Рассудихин, разработчик с опытом во Vue, React, Next и Astro 🚀 Какие фичи вышли в продакшен, а какие – нет? 🤖 AI Integrated Developer Experience – Марк Байдебура, Senior Full-stack Engineer в Influencer 🧠 Где AI реально помогает, а где пока его лучше не использовать? 📅 Конференция пройдет 10-14 февраля. Ты не просто узнаешь по новые фичи и подходы, но и определишься, какие из них включить в свой roadmap и как расти дальше. 🔗 Регистрируйтесь: podlodka.io/reactcrew

SVG Bike Анимация движущегося велосипеда на чистом CSS. Велосипед адаптивен и полностью построен из SVG. https://codepen.io/GyGInfographics/pen/YzpGyoJ Подпишись👉 @codepen_1

Evervault Hover Effect Необычный эффект при наведении. Реализована с помощью CSS и JavaScript https://codepen.io/Hyperplexed/pen/VwqLQbo Подпишись👉 @codepen_1

Мини игра "Выровнять картину", выполненная с помощью SVG, SCSS и библиотеки GSAP.js https://codepen.io/a-trost/pen/jOZXdoP Подпишись👉 @codepen_1

Эффект при наведении на картинку, выполненный на чистом CSS, без использования JavaScript https://codepen.io/tiffachoo/pen/wvyXRzL Подпишись👉 @codepen_1

Боковое меню со светлой и тёмной темами оформления, реализованное с помощью SCSS и библиотеки React.js https://codepen.io/aybukeceylan/pen/wvpBmrq Подпишись👉 @codepen_1

Градиентные узоры, реализованные с помощью SCSS, без использования JavaScript и SVG https://codepen.io/thebabydino/pen/NWxBzRv Подпишись👉 @codepen_1

Куб с зеркальными гранями, выполненный с помощью Pug, Sass и библиотеки Three.js https://codepen.io/vcomics/pen/JjpgBwY Подпишись👉 @codepen_1

Страница навигации, выполненная с помощью Pug, CSS и JavaScript https://codepen.io/Saramazal/pen/LYyywNb Подпишись👉 @codepen_1

Страница навигации, выполненная с помощью Pug, CSS и JavaScript https://codepen.io/Saramazal/pen/LYyywNb Подпишись👉 @codepen_1