SVG Bike

Анимация движущегося велосипеда на чистом CSS. Велосипед адаптивен и полностью построен из SVG.

https://codepen.io/GyGInfographics/pen/YzpGyoJ

Подпишись👉 @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

AnimeJS Staggered Grid Effect

Эффект при клике по элементу сетки, выполненный с помощью CSS и библиотеки Anime.js

https://codepen.io/Hyperplexed/pen/zYWvXMM

Подпишись👉 @codepen_1

Tabbar с анимацией при наведении, выполненный с помощью SCSS, без использования JavaScript

https://codepen.io/sashatran/pen/abqXVvy

Подпишись👉 @codepen_1

PhotoSwipe — Библиотека для добавления галереи изображений

Позволяет просматривать изображения на сайте в удобном формате.

Особенности:
Не зависит от сторонних библиотек
Поддержка динамического импорта
Улучшеная производительность анимаций
Работает на тач-устройствах

https://github.com/dimsemenov/Photoswipe

Подпишись👉 @codepen_1

Кнопка с анимацией при клике, выполненная с помощью SCSS и JavaScript

https://codepen.io/kevinpowell/pen/ZErxmXO

Подпишись👉 @codepen_1

Электронные часы, выполненные с помощью SCSS и библиотеки React.js

https://codepen.io/Hyperplexed/pen/XWeaWGL

Подпишись👉 @codepen_1

🚀 С 25 по 29 августа пройдёт Podlodka React Crew #3 — сезон о паттернах и практиках фронтенда.

В программе:

💡 Паттерны и подводные камни View Transition API в React (Николай Шабалин, СберЗдоровье)

🧠 Глубокое погружение в архитектуру React Hooks (Максим Никитин, Rocket Science)

⚙️ Разбор FSD 2.1 на практике, без догм (Лев Челядинов, FSD Core team)

📚Подготовка к архитектурному интервью для фронтендеров (Игорь Антонов, Т-Банк)

📐Layout-паттерны за пределами Flexbox и CSS Grid (Саша Илатовский, Albato)

🎯 Все темы прикладные, с практикой и кейсами.

🔗 Подробности и билеты

P.S: Для подписчиков группы CodePen Community
скидка 500 р по промокоду react_crew_3_VvUtZc

Раскрывающиеся карточки

https://codepen.io/Jhonierpc/details/MWgBJpy

Подпишись👉 @codepen_1

Форма MasterCard

https://codepen.io/JavaScriptJunkie/pen/YzzNGeR

Подпишись👉 @codepen_1

📕Angular UI-Kit с нуля: Как построить библиотеку переиспользуемых компонентов - разработчикам JavaScript/TypeScript, Junior/Middle разработчикам, желающим освоить Angular, Frontend-разработчикам на других фреймворках (React, Vue)

На открытом уроке 29 октября в 20:00 мск мы разберёмся в применении Angular Reactive Forms и сигналов:

📗 На вебинаре:
1. Template syntax: директивы, биндинги, pipes.
2. Event handling и реактивность.

📘 В результате на практике изучите и освоите создание и настройка форм через FormBuilder, работу с FormGroup и FormControl, валидацию данных и обработку ошибок.

👉 Регистрация на урок и подробности о курсе Angular Developer: https://vk.cc/cQL6B1

Все участники открытого урока получат скидку на курс "Angular Developer"

Реклама. ООО «Отус онлайн-образование», ОГРН 1177746618576

Градиентные узоры, реализованные с помощью SCSS, без использования JavaScript и SVG

https://codepen.io/thebabydino/pen/NWxBzRv

Подпишись👉 @codepen_1

📕От нуля до пиццы за 60 минут: Angular Reactive Forms в бою - разработчикам JavaScript/TypeScript, Junior/Middle разработчикам, желающим освоить Angular, Frontend-разработчикам на других фреймворках (React, Vue)

На открытом уроке 13 ноября в 20:00 мск мы погрузимся в создание интерактивного конструктора пиццы с использованием Angular Reactive Forms и сигналов.

📗 На вебинаре:
1. Понимание архитектуры компонентов и Template syntax: директивы, биндинги, pipes
2. Погружение в Event handling и реактивность

📘 В результате на практике изучите и освоите создание и настройка форм через FormBuilder, работу с FormGroup и FormControl, валидацию данных и обработку ошибок.

👉 Регистрация на урок и подробности о курсе Angular Developer: https://vk.cc/cRfpIu

Все участники открытого урока получат скидку на курс "Angular Developer"

Реклама. ООО «Отус онлайн-образование», ОГРН 1177746618576

CSS 404 page

https://codepen.io/agathaco/pen/WKXREy

Подпишись👉 @codepen_1

Натюрморт на чистом CSS

Эта картинка от Бена Эванса — прекрасный пример того, на что способен CSS.

https://codepen.io/ivorjetski/pen/xMJoYO

Подпишись👉 @codepen_1

📕Создание приложения Movie Watchlist Manager на Angular: от компонентов до управления состоянием - разработчикам JavaScript/TypeScript, Junior/Middle разработчикам, желающим освоить Angular, Frontend-разработчикам на других фреймворках (React, Vue)

На открытом уроке 19 ноября в 20:00 мск мы погрузимся в созданию приложения по отслеживанию просмотренных фильмов/сериалов с использованием сигнальных сторов в Angular:

📗 На вебинаре разберем:
1. Создание компонентов и подключение API для поиска и добавления фильмов.
2. Организация архитектуры проекта и лучшие практики.

📘 В результате на практике изучите и освоите базовые концепции Angular (компоненты, сервисы, DI), работу с формами, API и реактивными потоками, использование store для управления состоянием приложения и лучшие методы построения современного SPA-приложения на Angular.

👉 Регистрация на урок и подробности о курсе Angular Developer: https://vk.cc/cRpDD6

Все участники открытого урока получат скидку на курс "Angular Developer"

Реклама. ООО «Отус онлайн-образование», ОГРН 1177746618576