💡 CodePen теперь может выступать полноценным хостингом для ваших проектов

Любой Pen из нового редактора можно превратить в отдельный сайт буквально одной кнопкой.

Что есть:

🟠 мгновенный деплой из CodePen
🟠 собственный домен или поддомен
🟠 SSL-сертификаты
🟠 CDN и кэширование
🟠 автоматический хостинг без настройки серверов

🔜 Поддерживаются:

— случайный поддомен вида project.codepen.app
— собственный домен через DNS
— субдомены через CNAME
— apex-домены через A-записи

Полезно для:

⚡ пет-проектов
⚡ демо для заказчиков
⚡ лендингов
⚡ прототипов
⚡ тестовых заданий

🔗 Ссылка на документацию

📍 Навигация: [Вакансии]

🐸 Библиотека фронтендера

#stack

👩‍💻 Vite+ — один CLI вместо половины фронтенд-стека

Vite+ — инструмент, который объединяет несколько популярных решений в один CLI.

Что входит:

🔵 Vite — dev-сервер и сборка
🔵 Vitest — тестирование
🔵 Oxlint — линтинг
🔵 Oxfmt — форматирование
🔵 Rolldown — бандлер
🔵 Node.js version management
🔵 единая команда для проверок проекта

Вместо набора:

npm run dev
npm run lint
npm run format
npm run test

можно использовать команды через vp.

🔗 Читать подробнее

📍 Навигация: [Вакансии]

🐸 Библиотека фронтендера

#stack #vite

💡 В VS Code можно за пару кликов открыть доступ к локальному приложению через интернет

Запускаете проект → вкладка Ports → Forward a Port → получаете ссылку на свой localhost

Доступ можно сделать публичным или ограничить авторизацией через GitHub ↩️

Полезно для демонстрации фич, тестирования вебхуков и быстрой совместной отладки без ngrok и настройки сети.

📍 Навигация: [Вакансии]

🐸 Библиотека фронтендера

#stack

🎨 Подборка готовых UI-анимаций для интерфейсов

Нашли библиотеку Transitions.dev с коллекцией плавных переходов для современных веб-приложений.

Внутри — готовые анимации для:

• карточек;
• модальных окон;
• выпадающих меню;
• табов и аккордеонов;
• уведомлений;
• скелетонов;
• загрузчиков;
• переключателей и других UI-компонентов.

Каждую анимацию можно сразу посмотреть в действии, изучить реализацию и адаптировать под свой проект ✅

📍 Навигация: [Вакансии]

🐸 Библиотека фронтендера

#stack

🍀 Лёгкая библиотека для слайдеров без зависимостей

Если нужен современный слайдер без перегруженных решений, обратите внимание на Splide.

Что умеет:

— работает без зависимостей;
— поддерживает React, Vue и обычный JavaScript;
— адаптируется под разные размеры экрана;
— есть автопрокрутка, lazy loading, вертикальный режим и миниатюры;
— поддерживает управление с клавиатуры и соответствует требованиям доступности.

При этом библиотека весит около 12 КБ в gzip и не ухудшает показатели Lighthouse.

📍 Навигация: [Вакансии]

🐸 Библиотека фронтендера

#stack

⚡️ Самый быстрый способ протестировать шрифты на любом сайте

Нашли удобное расширение Tinkerfont, которое позволяет тестировать шрифты прямо на реальных сайтах — без DevTools и правок CSS.

Можно посмотреть, какие шрифты использует страница, заменить их на любой из 1900+ Bunny Fonts или загрузить свой, а затем сразу скопировать код подключения.

Полезный инструмент для быстрого подбора типографики.

📍 Навигация: [Вакансии]

🐸 Библиотека фронтендера

#stack

🔥 Библиотека для создания веб-читалок комиксов и манги

Нашли Comimi — JS/TS-библиотеку для создания собственных читалок прямо в браузере.

Что умеет:

— разные режимы чтения;
— несколько вариантов отображения страниц;
— гибкая настройка поведения ридера;
— подходит для веб-просмотра комиксов и манги.

Полезно, если разрабатываете собственную платформу с цифровыми изданиями или просто ищете готовое решение вместо реализации с нуля.

📍 Навигация: [Вакансии]

🐸 Библиотека фронтендера

#stack #js

🎨 Meta открыла исходный код своей дизайн-системы Astryx

Компания выложила в open source Astryx — внутреннюю дизайн-систему, которую использует уже более 8 лет.

Что внутри:

🔹 150+ готовых UI-компонентов;
🔹 7 встроенных тем оформления;
🔹 поддержка кастомизации;
🔹 ориентирована на создание крупных интерфейсов.

🤖 Хотите глубже разобраться, как AI помогает в современной разработке? Посмотрите курс по AI-агентам в Proglib Academy⁠ 🔗

📍 Навигация: [Вакансии]

🐸 Библиотека фронтендера

#stack

🔥 200+ лучших ресурсов для веб-разработчиков — всё в одном месте

Если устали каждый раз искать хорошие библиотеки, сервисы или статьи — сохраните эту подборку.

Внутри:

🈂️ обучающие материалы и документация
🈂️ UI-библиотеки и компоненты
🈂️ CSS- и JavaScript-инструменты
🈂️ API и полезные сервисы
🈂️ хостинги и платформы для деплоя
🈂️ браузерные расширения
🈂️ генераторы, онлайн-инструменты и многое другое

Проект регулярно обновляется, а все материалы доступны как на сайте, так и на GitHub 🔗

📍 Навигация: [Вакансии]

🐸 Библиотека фронтендера

#stack

💡 Коллекция эффектных переключателей темы

Нашли open-source подборку анимаций для переключения светлой и тёмной темы.

🔵 Внутри — разные переходы, которые можно изучить, адаптировать и использовать в своих интерфейсах.

Хороший источник идей, если обычный toggle уже кажется слишком скучным.

🔗 Ссылка на GitHub

📍 Навигация: [Вакансии]

🐸 Библиотека фронтендера

#stack

💬 AI-чат для React за 3 строки кода

ChatbotLite — open source-виджет, который позволяет быстро добавить AI-чат в React-приложение.

Что умеет:

— Работает с React, Next.js, Shopify и WordPress
— Поддерживает 10+ LLM, включая OpenAI, Gemini, Groq, DeepSeek и Mistral
— Автоматически переключается между моделями при ошибках
— Использует ваши API-ключи (BYOK)
— Весит менее 50 КБ (gzipped)

➡️ Подключение занимает буквально несколько строк:

import { ChatWidget } from "chatbotlite/react";

<ChatWidget
  endpoint="/api/chat"
  title="Acme"
/>

Такой виджет подойдет для документации, внутренних инструментов, FAQ, поддержки пользователей и AI-функций в собственных продуктах.

🔗 Ссылка на GitHub

💡 Если хотите не просто встроить чат, а разобраться, как создавать полноценных ИИ-агентов с инструментами, памятью и RAG, обратите внимание на курс «Разработка ИИ-агентов», который стартует уже завтра 🔥


📍 Навигация: [Вакансии]

🐸 Библиотека фронтендера

#stack

😋 Продуктивность для фронтенд-разработчиков

Фреймворки и библиотеки — это основа, но в работе часто решают именно инструменты, которые экономят время и делают проекты удобнее.

Собрали подборку сервисов и тулз, которые стоит попробовать:

➡️ Windsurf — новый IDE с встроенным ИИ для автодополнений, рефакторинга и генерации тестов.

➡️ ESLint + Biome — линтеры и форматтеры нового поколения для единых кодстайлов и быстрой проверки ошибок.

➡️ Bundlephobia — моментально показывает размер npm-пакета и помогает выбрать оптимальную библиотеку.

➡️ React Developer Tools — официальный инспектор компонентов и профайлер для React/Next.js.

➡️ Fig / Warp — современные терминалы с автодополнением, скриптами и интеграциями для фронтендеров.

📍 Навигация: [Вакансии]

🐸 Библиотека фронтендера

#stack

🌈 Анимированные 3D-градиенты без Three.js

Neat — визуальный редактор для создания анимированных WebGL-градиентов. Выбираете цвета и эффекты, смотрите результат в реальном времени и переносите готовую конфигурацию в проект.

В новой версии движок переписали на чистый WebGL: размер сборки сократился примерно с 133 до 17 КБ gzip, а внешних зависимостей больше нет.

🔤 Есть готовые пресеты, React-пример, разные 3D-формы, зернистость, свечение и параллакс при скролле.

Использовать можно бесплатно, но для удаления водяного знака нужна лицензия за €12 на домен 📍

🔗 Попробовать редактор
🔗 GitHub

📍 Навигация: [Вакансии]

🐸 Библиотека фронтендера

#stack

🧩 UX Components — энциклопедия элементов интерфейса

Сервис помогает понять, какой UI-компонент выбрать и как его использовать.

Для аккордеонов, поиска, таблиц, чатов и других паттернов есть:

— сценарии использования и состояния;
— названия в разных дизайн-системах;
— иконки из 12 библиотек;
— рекомендации W3C ARIA;
— промпты для AI-инструментов.

Также можно изучить 210 дизайн-систем, сравнить компоненты и подключить базу через MCP.

🔗 Ссылка

📍 Навигация: [Вакансии]

🐸 Библиотека фронтендера

#stack

🫧 Генератор необычных SVG-фигур за пару кликов

Blobmaker помогает быстро создавать случайные органические формы для лендингов, иллюстраций и декоративных элементов.

Можно настроить количество точек и контраст между ними, подобрать подходящую «кляксу», а затем скачать её в SVG или сразу скопировать код.

🔗 Ссылка

📍 Навигация: [Вакансии]

🐸 Библиотека фронтендера

#stack

👾 Превращаем SVG и текст в 3D-компоненты для React

3dsvg.design — бесплатный браузерный инструмент, который превращает обычные SVG, текст и простую графику в объёмные интерактивные элементы.

Можно:

— загрузить SVG или добавить текст;
— настроить глубину, освещение и положение объекта;
— сразу посмотреть результат в браузере;
— экспортировать готовый React-компонент и вставить код в проект.

Полезно для лендингов, hero-блоков и интерфейсов, где хочется добавить 3D без ручной работы с WebGL.

📍 Навигация: [Вакансии]

🐸 Библиотека фронтендера

#stack #react

🔊 936 звуков для интерфейсов в одной библиотеке

Open-source-библиотека собрала звуковые эффекты для кнопок, уведомлений, загрузки, ошибок, успешных действий, переключателей и других состояний интерфейса.

Все звуки распределены по 12 стилям — среди них Minimal, Glass, Sci-Fi, Mechanical, Zen и Retro. Это помогает выдержать единый звуковой стиль во всём продукте.

⚡️ Звуки можно подключать вручную или использовать готовый промпт, чтобы AI-агент сам подобрал подходящий эффект.

Полезная находка для SaaS, игр и интерактивных интерфейсов. А разобраться, как внедрять такие решения в реальные проекты с помощью AI-инструментов, можно на курсе «ИИ для разработчиков» 👋

🔗 Ссылка

📍 Навигация: [Вакансии]

🐸 Библиотека фронтендера

#stack #ux_review

⚡ 35 млн точек в браузере — и около 72 FPS

ChartGPU — библиотека для визуализации больших датасетов через WebGPU вместо Canvas2D или WebGL.

⬇️Поддерживает стриминг данных,
⬇️несколько графиковна одном
⬇️GPUDevice, GPU-decimation и
⬇️даже 3D-серии. Авторы
⬇️показывают бенчмарк с 35
⬇️млн точек примерно при 72
⬇️FPS.

Особенно интересно для дашбордов, мониторинга, финтеха и observability-интерфейсов, где обычный Canvas уже становится узким местом.

❗️ Но есть важное ограничение: fallback на Canvas/WebGL нет, поэтому поддержку WebGPU нужно проверять отдельно.

🔗 Ссылка на GitHub

📍 Навигация: [Вакансии]

🐸 Библиотека фронтендера

#stack

🛠 Управляйте localhost-портами без лишнего lsof

Port-Whisperer — CLI для тех случаев, когда на 3000, 5173 или другом порту внезапно уже что-то запущено.

🤩 показывает занятые порты
🤩 определяет процессы и приложения
🤩 помогает завершать ненужные процессы
🤩 умеет мониторить порты в реальном времени

Полезная утилита для локальной разработки, особенно когда одновременно работают несколько проектов.

👩‍💻 GitHub

🐸 Библиотека фронтендера

#stack

🫧 Gooey-эффекты для React без мыла на тексте

liquid-gooey превращает обычные React-компоненты в «жидкие» интерфейсы: элементы могут сливаться, тянуться друг за другом и плавно менять форму.

🤩 Morph — объединяет элементы в gooey-массу
🤩 Move — создаёт жидкий след за движущимся элементом
🤩 Dissolve — позволяет изображениям «растворяться» при контакте

Эффект применяется к отдельному SVG-слою, а настоящий DOM остаётся сверху. Поэтому текст, иконки, фокус и интерактивность не страдают от blur-фильтров.

npm install liquid-gooey

<Liquid blur={6} contrast={18}>
  <Liquid.Item x={open ? -54 : 0} y={open ? -34 : 0}>
    <button>Menu</button>
  </Liquid.Item>
</Liquid>

Есть поддержка Safari, prefers-reduced-motion, CSS-темизации и MIT-лицензия.

🔗 Полезно, если делаете нестандартные UI, интерактивные меню, табы или микровзаимодействия.

📍 Навигация: [Вакансии]

🐸 Библиотека фронтендера

#stack