🧿 Формы в shadcn/ui — это самая практичная часть

Когда говорят про shadcn/ui, часто вспоминают кнопки, диалоги и карточки. Но на практике самая полезная часть для фронтенда — это формы.

Почему:

shadcn/ui хорошо сочетается с React Hook Form и Zod. В итоге вы получаете не просто красивое поле ввода, а нормальную рабочую схему для продакшена:

— управление состоянием формы
— валидацию
— сообщения об ошибках
— единый стиль полей
— более предсказуемую структуру кода

🔤 Это особенно полезно в реальных сценариях: логин, регистрация, профиль, фильтры, checkout, админки, настройки.

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

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

#blueprint

Читать полностью…

🧭 Разбираем React вместе с Podlodka React Crew

Современные React-приложения становятся всё сложнее. Разработчики регулярно сталкиваются с проблемами производительности, утечками памяти и архитектурными вызовами.

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

💡Эксперты Podlodka React Crew решили разобраться с этой проблемой на онлайн-конференции под названием «Продвинутый React».

С 23 по 27 марта ее участники:

⚙️ узнают, как устроен рендер и внутренние механизмы в современном React

🧠 познакомятся с архитектурой приложений, где применяются React Server Components

📊 научатся профилировать React-приложения и выявлять медленные рендеры, memory leak

🛠познакомятся с дополнительными инструментами, которые помогут упростить отладку и выявить сложные проблемы

Формат — удобный и ламповый: пять дней, живые Zoom-сессии утром и вечером, закрытое профессиональное сообщество в Telegram и общение со спикерами.

Если хотите углубить свои знания про React в компании крутых экспертов, присоединяйтесь к Podlodka React Crew👇

🎟Забрать билет: https://podlodka.io/reactcrew

Читать полностью…

🌿 Git без хаоса: ветки, коммиты и первый PR

Полезный материал для тех, кто хочет нормально разобраться в базовом Git workflow.

🔜 В статье объясняют, как устроены ветки, как писать понятные коммиты, зачем синхронизировать ветку перед PR и что добавлять в описание Pull Request.

🔗 Ссылка

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

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

#readme

Читать полностью…

🔥 Полезная находка для тех, кто учит JavaScript и фронтенд

Внутри — руководства, шпаргалки, вопросы, сниппеты, алгоритмы и подборки полезных ссылок. Удобно как справочник, источник тем для повторения и подготовки к собеседованиям.

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

🔗 Ссылка на сайт

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

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

#stack

Читать полностью…

📌 Поиск неиспользуемого CSS

Оптимизация стилей перед продом:

npx purgecss --css styles.css --content index.html

➡️ --css — путь к стилям

➡️ --content — HTML/JS-файлы, откуда берутся используемые селекторы

➡️ На выходе — список «мёртвых» стилей, которые можно удалить

💡 Советы:

— Можно указать несколько файлов:

--content "./src/**/*.html" "./src/**/*.js»

— Работает с Tailwind, SCSS и шаблонизаторами

— Идеально подходит для прод-сборки: убирает всё лишнее из CSS

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

#readme #css

Читать полностью…

Кажется, мы окончательно перешли от игрушек к суровому AgentOps

Приглашаем на наш обновлённый курс по разработке ИИ-агентов. Никакой воды про «будущее нейросетей», только инженерный подход.

На курсе мы:

— пошагово строим готовые системы на LangGraph, CrewAI и MCP;
— настраиваем кэширование и роутинг, чтобы бот не сожрал токены;
— разбираемся со стейтом, учимся дебажить через time-travel и прикручиваем human-in-the-loop;
— выводим RAG в прод так, чтобы безопасники не завернули архитектуру из-за 152-ФЗ.

В пекло скучные лекции про общую инфраструктуру — сразу фокусируемся на агентных фреймворках и написании кода. Занятия ведут бывалые лиды из Газпромбанка и Альфы, набившие шишки на реальных задачах.

Кстати, на днях мы пилили агента в прямом эфире, если пропустили — есть запись вебинара.

Сегодня последний день, когда можно забрать курс по старым ценам. Базовый тариф сейчас стоит 49 000 ₽ (вместо 62 990 ₽), продвинутый трек — 99 000 ₽ (вместо 124 990 ₽). Если не хочется отдавать всю сумму сразу, есть рассрочка. Торопитесь — на потоке осталось всего 5 мест!

→ Зафиксировать цену и перейти к сборке своих агентов

Читать полностью…

📍 HTML-элемент для геолокации

В начале года в вебе появился <geolocation> — специальный элемент для запроса местоположения пользователя. На первый взгляд это просто кнопка, но на деле браузер очень жёстко контролирует её внешний вид и поведение.

🔜 В карточках разберём, как работает элемент, почему его почти нельзя кастомизировать, какие CSS-стили режутся и зачем браузер вообще ввёл такие ограничения. Спойлер: дело не только в доступности, но и в защите от манипуляций с геолокацией.

🔗 Ссылка на статью

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

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

#under_hood

Читать полностью…

А тебе потом за него все переделывать… 🚬

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

#pixel_pause

Читать полностью…

✍️ Нашли headless-редактор для React в стиле Notion

Yoopta Editor 6.0 — open-source библиотека под MIT для создания блочных текстовых редакторов в React.

✨ Главная фишка — headless-подход: редактор не навязывает внешний вид, поэтому UI можно полностью собрать под свой продукт. При этом в библиотеке уже есть готовые компоненты для быстрого старта.

🔤 Подойдёт для заметок, документации, CMS, админок и внутренних баз знаний. Если нужен гибкий редактор в духе Notion без жёстких ограничений по дизайну — на Yoopta точно стоит посмотреть.

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

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

#stack

Читать полностью…

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

#pixel_pause

Читать полностью…

⚡️ Свежие патчи за март

➖ Fastify 5.8

Быстрый веб-фреймворк получил тайм-ауты на уровне обработчиков и совместимость с Pino v9/v10.

➖ React Native Skia → 2.5.1

Поправили проблему с podspec, из-за которой Podfile.lock мог становиться нестабильным, и отдельно развязали color blending и layer blending в Atlas.

➖ jose → 6.2.1

Акцент сделан на внутренние доработки: убрали named exports в исходниках, добавили setKeyManagementParameters для GeneralEncrypt Recipient, ускорили путь проверки symmetric keys и улучшили накладные расходы на encoding/decoding.

➖ next-translate → 3.0.1

Докрутили Turbopack support, поправили работу project-relative alias paths для monorepo и обновили примеры под Next.js 16 / Remote Loading demos.

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

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

#release_digest

Читать полностью…

🌀 Компоненты vs утилиты в Tailwind

Во фронтенде часто разделяют стили на components и utilities. Но в экосистеме Tailwind эта граница не такая очевидная, как кажется.

В карточках разобрали:

— чем на самом деле отличаются components и utilities
— почему это разделение условное
— как обычно переопределяют стили компонентов
— более простой подход, который ближе к философии Tailwind

Полезно для тех, кто работает с Tailwind и хочет лучше понимать архитектуру стилей.

📎 Ссылка на статью

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

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

#blueprint

Читать полностью…

⚡️ ИИ, который генерирует чистый SVG

Появился инструмент Arrow 1.0, который создаёт векторную графику по текстовому запросу. Пишете короткий промпт — сервис генерирует чистый SVG-код, который можно сразу вставить в интерфейс или доработать вручную.

Подойдёт для:

— иконок
— иллюстраций
— логотипов
— UI-элементов

➡️ Главный плюс для фронтенда — это настоящий SVG, а не картинка. Его можно редактировать, стилизовать через CSS или использовать прямо в коде.

🔗 Попробовать можно бесплатно

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

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

#stack

Читать полностью…

🎨 Как вытащить дизайн-систему любого сайта за пару секунд

Dembrandt — CLI-инструмент, который сканирует страницу и извлекает её дизайн-токены: цвета, шрифты, отступы, тени, радиусы, компоненты и брейкпоинты.

Полезно для:

— анализа чужих интерфейсов
— бренд-аудита
— сборки своей дизайн-системы

🔜 Достаточно одной команды:

npx dembrandt stripe.com

Инструмент анализирует DOM и CSS, после чего выводит палитру, типографику, spacing и другие параметры. Результат можно сохранить в JSON или W3C Design Tokens.

📎 Ссылка на GitHub

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

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

#stack

Читать полностью…

😑 5 причин, почему WebAssembly не стал основным языком веба

6️⃣ Нет прямой интеграции с веб-платформой

WebAssembly не может напрямую работать с Web API. Чтобы вызвать даже простой console.log, нужен JavaScript-прослойка (glue code).

Это создаёт:

— лишний код
— сложную сборку
— дополнительную стоимость выполнения

2️⃣ Сложная загрузка модулей

JavaScript можно подключить одной строкой:

<script src="script.js"></script>

Wasm требует:

— загрузки через JS APIручной инициализации
— конфигурации imports

Для большинства разработчиков это слишком сложный вход.

3️⃣ Glue-код между Wasm и JS

Чтобы Wasm взаимодействовал с браузером, нужен код-мост:

— конвертация типов
— работа с памятью
— сериализация данных
— управление строками

Обычно он генерируется инструментами вроде wasm-bindgen, но:

— усложняет билд
— увеличивает runtime-накладные расходы.

4️⃣ Потеря производительности

Каждый переход Wasm → JavaScript → Web API стоит времени. Эксперименты показали, что удаление JS-прослойки ускоряет DOM-операции примерно на 45%.

5️⃣ Разработчику всё равно нужно знать JavaScript

Даже если вы пишете на Rust или C++:

— документация Web API — про JS
— ошибки приходится дебажить в JS
— иногда нужно писать собственные биндинги

То есть полностью уйти от JavaScript невозможно.

❓ Почему это тормозит распространение Wasm

Для JavaScript путь развития простой:

JS → библиотеки → фреймворки → сложные приложения

➖ Для WebAssembly старт выглядит так:

компилятор
+ toolchain
+ JS glue
+ загрузка
+ биндинги
+ интеграция с Web API

Получается «стена сложности», которую оправдывают только крупные проекты.

➖ Что может изменить ситуацию

Одно из ключевых решений — WebAssembly Component Model.

Идея:

— стандартный формат компонентов
— прямой доступ к Web API
— отсутствие JS glue
— единый интерфейс между языками
— запуск через обычный <script>.

Пример будущего сценария:

use std::web::console;

fn main() {
  console::log("hello world");
}

Без JavaScript-прослойки.

⚡️ WebAssembly уже мощный и быстрый, но его главная проблема — интеграция с веб-платформой.

Если Component Model реализуют полноценно, Wasm может перейти из категории «инструмент для power-users» в массовую технологию веб-разработки.

🔗 Выжимка из статьи

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

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

#code_battle

Читать полностью…

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

#pixel_pause

Читать полностью…

👩‍💻 Самый важный релиз Vite за последние годы

Главное в релизе — переход на Rolldown. Теперь Vite использует единый Rust-бандлер вместо связки esbuild + Rollup. Команда обещает до 10–30x faster builds и называет это самым крупным архитектурным изменением со времён Vite 2.

🔜 Что ещё добавили:

— Vite Devtools
— поддержку tsconfig paths
— встроенный emitDecoratorMetadata
— Wasm SSR
— проброс логов браузерной консоли в терминал dev-сервера
— @vitejs/plugin-react v6 без Babel для React Refresh

🔜 Из нюансов:

— Vite 8 стал тяжелее по install size
— нужен Node.js 20.19+ или 22.12+

🔗 Ссылка на блог

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

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

#release_digest

Читать полностью…

🤟 TanStack Start SSR за 6 минут

У Jack Herrington вышло видео про TanStack Start, где показывают главное: как здесь устроен SSR, почему его можно быстро отключить и чем удобен подход с data-only маршрутизацией.

Параллельно автор проходит по загрузке данных, server functions и типизации. Ролик отлично подходит, чтобы быстро уловить суть и понять, почему TanStack Start сейчас так активно обсуждают.

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

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

#read_watch

Читать полностью…

🔥 Топ-вакансий недели для фронтендеров

Vue.js Middle Developer — офис/гибрид (Москва)

Фуллстек разработчик (пайтон, реакт) в команду ИИ — до 140 000 ₽, гибрид (Тюмень)

Middle / Senior Frontend-разработчик — от 250 000 ₽, удаленно (Москва)

➡️ Больше офферов в канале: @jsdevjob

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

Читать полностью…

😧 Переписали 130K строк с React на Svelte за две недели

Интересный кейс от Strawberry: команда полностью перенесла фронтенд браузера с React на Svelte всего за две недели с помощью coding agents.

Причина была в производительности. Для браузера с постоянными AI-обновлениями, стримингом токенов и множеством параллельных UI-сценариев лишние ререндеры стали слишком дорогими.

После миграции интерфейс стал заметно отзывчивее, а FCP новой вкладки сократился с 300 мс до 124 мс.

🔗 В статье разбирают, почему команда ушла с React, как провела миграцию 130K строк через AI-агентов и что это дало по скорости, архитектуре и DX.

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

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

#read_watch

Читать полностью…

У «Библиотеки программиста» появился резервный канал в мессенджере MAX

Он нужен исключительно для связи с теми, кто не может следить за обновлениями здесь из-за трудностей с доступом. Поэтому, если вы видите это сообщение, распространите его среди жильцов вашего ЖЭКа.

Контент в MAX будет дублировать телеграмный — основной нашей площадкой был и остаётся Telegram. Надеемся, это временная мера.

→ Подписаться на «Библиотеку программиста» в MAX

Читать полностью…

⭐️ React one-liner для работы с children

const items = Children.toArray(children);

Нужен, когда children надо безопасно превратить в массив и дальше обработать через slice, filter или map. Полезно в wrapper-компонентах, tabs и compound components — но без фанатизма: сам React считает Children API скорее редким и ситуативным инструментом.

Например:

const firstChild = Children.toArray(children)[0];

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

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

#readme #react

Читать полностью…

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

#code_challenge

Читать полностью…

💡 CSS-свойство, которое может ускорить длинные страницы

content-visibility: auto позволяет браузеру отложить часть рендеринга offscreen-элементов, пока они не понадобятся.

.card {
  content-visibility: auto;
}

🔜 Это особенно полезно для длинных списков, каталогов и страниц с большим количеством блоков. Но чтобы браузер заранее понимал размер скрытого блока и не дёргал макет при появлении, обычно добавляют contain-intrinsic-size.

.card {
  content-visibility: auto;
  contain-intrinsic-size: auto 300px;
}

Использовать это стоит точечно: в больших списках и тяжёлых секциях эффект заметнее всего.

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

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

#readme #css

Читать полностью…

👍 HTMLBOOK — удобный справочник по HTML и CSS на русском

На сайте собраны материалы по вёрстке: HTML, CSS, структуре страниц, тегам и стилям с наглядными примерами. Его удобно использовать как быстрый справочник и подсказку во время работы.

🔗 Ссылка на сайт

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

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

#read_watch

Читать полностью…

Самый востребованный навык в ИТ в 2026-м — навык создания ИИ-агентов

Мы полностью переработали курс «Разработка AI-агентов» под реалии 2026 года. Никакой долгой теории — с самого начала пишем код. Обучать и делиться набитыми шишками будут эксперты-практики из Газпромбанка, Альфа-Банка и других бигтехов.

В программе:

— архитектура автономных систем с тестированием, ReAct-циклами и контролем токенов;
— практическая работа с актуальными фреймворками LangGraph, AutoGen, MCP и CrewAI;
— настройка продвинутого RAG для парсинга документов и точного поиска;
— внедрение решений с учётом действующего законодательства (152-ФЗ);
— дипломная работа, за основу которой можно взять свой рабочий проект или задачу, которую предложим мы.

Эксперты поделятся инсайтами из реального продакшна — тем, о чём вам никогда не расскажет ни одна нейросеть.

Запись первого открытого вебинара, на котором мы вместе с руководителем AI-направления в Альфа-Банке Полиной Полуниной пилили агента в прямом эфире.

Ах да, чуть не забыли! Дарим промокод AGENTSWEB на скидку 10 000 рублей и два курса сверху при покупке до 15 марта 🎁

→ Освоить разработку AI-агентов

Читать полностью…

🤔 Вопрос с собеседования на Middle Frontend

Почему async/await не делает код параллельным?

👇 Правильный ответ (нажми, чтобы прочитать):

async/await делает код асинхронным, но не запускает задачи параллельно автоматически.

Оператор await приостанавливает выполнение функции, пока Promise не завершится. Поэтому несколько await подряд выполняются последовательно.

Пример:

const a = await fetch('/api/a');
const b = await fetch('/api/b');

Здесь второй запрос начнётся только после завершения первого.

Чтобы запустить операции одновременно, их нужно сначала создать, а затем дождаться результата вместе:

const [a, b] = await Promise.all([
fetch('/api/a'),
fetch('/api/b')
]);

В этом случае оба запроса стартуют сразу, а await просто ждёт их общий результат.

📌 Почему это важно:

— последовательные await могут замедлять приложение
— независимые запросы лучше запускать конкурентно
— на собеседовании это показывает понимание Promises, event loop и конкурентности в JavaScript

👍 — знал/а
🔥 — стало понятнее

💼 Щелкаешь такие задачи как орешки? Найди проект с достойной зарплатой тут

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

#career_merge #middle

Читать полностью…

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

#pixel_pause

Читать полностью…

📌 Полезный приём во Vue — nextTick

Иногда после изменения данных нужно дождаться, когда Vue обновит DOM. Для этого используется nextTick.

this.$nextTick(() => {
  console.log('DOM уже обновлён')
})

🔜 Когда это нужно:

— получить обновлённый размер элемента
— работать с ref после рендера
— запускать сторонние UI-библиотеки после обновления интерфейса

Фактически nextTick откладывает выполнение кода до следующего цикла обновления DOM.

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

#readme #vue

Читать полностью…

🎮 Gamepad API в JavaScript

Браузер умеет работать с геймпадами. Можно отслеживать подключение контроллера и читать состояние кнопок прямо из JS.

➖ Что можно сделать:

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

❗️ Что важно помнить:

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

Полезно, если делаете браузерную игру, WebXR-интерфейс или просто хотите добавить нестандартное управление.

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

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

#readme #js

Читать полностью…