📎 6 полезных CSS-фич для современного frontend

В карточках собрали CSS-сниппеты, которые реально встречаются в production и помогают писать более гибкий интерфейс без лишних костылей.

➖ Полезно как для джунов, так и для тех, кто давно не следил за новыми возможностями CSS.

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

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

#readme

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

🎯 Большинство CSS-багов начинаются не со сложных фич

Обычно всё ломается из-за мелочей:

— блок внезапно стал шире  
— z-index перестал работать  
— shorthand сбросил половину стилей  
— !important начал воевать сам с собой

В карточках разобрали 5 ошибок, которые до сих пор регулярно встречаются даже в production-проектах.

🔜 Полезно не только джунам — многие из этих проблем всплывают и в больших frontend-кодовых базах.

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

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

#readme #css

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

🤔 Почему ARIA может навредить интерфейсу

ARIA часто воспринимают как «быстрый способ сделать accessibility». Но проблема в том, что неправильные роли могут запутать screen reader сильнее, чем их отсутствие.

🔤 Например:

html <div role="button">Save</div>

Визуально выглядит как кнопка, но без keyboard support и правильного поведения такой элемент ломает ожидания пользователя.

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

➖ какие бывают ARIA roles
➖ где они реально нужны
➖ какие ошибки встречаются чаще всего
➖ и почему accessibility нельзя проверять только линтером

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

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

#blueprint

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

🧩 Прозрачный <image> без градиентных костылей

В CSS готовят функцию image(). Она позволит описывать одноцветное или прозрачное изображение как полноценное значение типа <image>.

Сейчас для «пустой картинки» часто используют обходной путь:

css background-image: linear-gradient(transparent);

С новой функцией это будет выглядеть прямее:

css background-image: image(transparent);

Зачем это нужно:

➖ none в разных CSS-свойствах ведёт себя по-разному
➖ в list-style-image он отключает маркер, а не рисует прозрачность
➖ typed custom properties с синтаксисом <image> не принимают none
➖ light-dark() сможет корректно возвращать прозрачное image-значение

Небольшая фича, но полезная для тех, кто работает с CSS на уровне спецификаций, дизайн-систем и кастомных свойств ✅

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

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

#under_hood #css

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

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

#pixel_pause

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

📌 Полезные JS-инструменты, о которых знают не все

Во frontend быстро накапливается рутина:

— ручные API-клиенты
— синхронизация state с URL
— мёртвый код
— бесконечные ESLint-конфиги
— валидация данных в нескольких местах сразу

🔜 В карточках собрали 6 инструментов, которые помогают закрывать такие задачи быстрее и чище: от поиска unused-кода до генерации API-клиентов и runtime-валидации.

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

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

#stack

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

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

#pixel_pause

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

🗺 Roadmap для фронтендера

На этой карте собраны основные направления, через которые обычно проходит frontend-разработчик: от HTML/CSS/JS до архитектуры, SSR, тестирования и оптимизации.

Удобно использовать как:

— карту для обучения
— чеклист по пробелам
— навигатор перед собеседованием
— обзор современного frontend-стека

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

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

#blueprint #frontend

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

🧩 Микрофронтенды без привязки к Webpack

Module Federation позволяет нескольким JavaScript-приложениям делиться кодом, зависимостями и модулями во время выполнения. Изначально паттерн стал известен через Webpack 5, но теперь вырос в более самостоятельную платформу для микрофронтендов и больших frontend-приложений.

Что даёт:

→ разделение монолита на micro-frontends
→ загрузку remote-модулей в runtime
→ переиспользование общих зависимостей
→ независимую разработку и деплой частей приложения

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

🔗 Сайт | GitHub

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

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

#stack #microfrontend

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

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

Почему в React нельзя использовать index как key в списке?

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

key нужен React для правильного сопоставления элементов между рендерами.

Если использовать index, то при удалении, сортировке или вставке элементов React может переиспользовать state не того компонента.

Из-за этого:

— input может «потерять» значение
— UI начнёт вести себя странно
— сломаются анимации и focus

➖➖➖➖➖➖➖
items.map(item => (
<Row key={item.id} />
))
➖➖➖➖➖➖➖

🔜 Идеальный короткий ответ:

index как key безопасен только для статичных списков, которые не меняются и не сортируются.

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

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

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

#career_merge

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

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

#pixel_pause

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

🔥 Почему интерфейс «прыгает» при открытии модалки

При блокировке скролла браузер убирает scrollbar. Из-за этого меняется ширина viewport, и layout может сдвинуться на несколько пикселей.

Особенно заметно:

— в модалках
— drawer/sidebar
— fullscreen overlay

Нативное решение уже есть в CSS и работает в большинстве современных браузеров.

➡️ Интерфейс перестаёт дёргаться и ощущается заметно стабильнее.

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

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

#hotfix #css

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

🎤 Ваши знания по ИИ-агентам + наша аудитория в 1 млн человек = профит

Мы в Proglib активно качаем тему ИИ-агентов. Если вы в теме, то у нас есть предложение 👇

Что с нас?

- Огромный охват: пропиарим ваши соцсети и продукты на 1 000 000+ айтишников.
- Личный бренд: станете узнаваемым экспертом в самой горячей нише 2026 года.
- Никакой рутины: наши редакторы сами упакуют ваши мысли в крутые посты.

Что с вас?

Любой экспертный контент по ИИ-агентам: кейсы из прода, шпаргалки, статьи, наработки по стеку (LangGraph, CrewAI, AutoGen и др.) или просто мысли по архитектуре.

👉 Стать экспертом и заявить о себе

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

❔ Как правильно форматировать числа в JS

Intl.NumberFormat помогает форматировать числа под конкретную локаль: с правильными разделителями, символами валют и единицами измерения.

Вместо ручной склейки строк можно использовать встроенный API:

new Intl.NumberFormat("de-DE", {
  style: "currency",
  currency: "EUR"
}).format(123456789);
// 123.456.789,00 €

new Intl.NumberFormat("pt-PT", {
  style: "unit",
  unit: "kilometer-per-hour"
}).format(50);
// 50 km/h

new Intl.NumberFormat("fr-FR", {
  style: "unit",
  unit: "kilobyte",
  unitDisplay: "long"
}).format(123456);
// 123 456 kilooctets

↖️ Что это даёт:

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

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

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

#readme #js

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

👩‍💻 HTML в Canvas: новый playground для UI

Экспериментальный API позволяет отрисовывать обычный HTML внутри canvas и дальше работать с ним как с пикселями: добавлять эффекты, анимации и шейдеры через WebGL/WebGPU, не теряя семантику, формы и DOM.

В статье:

— как перенести DOM в canvas через drawElementImage()
— как управлять рендерингом через requestPaint()
— как работать с пикселями и делать эффекты
— как подключать GPU и шейдеры
— и почему это может поменять подход к UI

Пока всё за флагом и не для продакшена — но как playground для экспериментов выглядит очень мощно.

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

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

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

#read_watch #js

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

⚡️ Astro 6.2

Что нового:

➖ experimental SVG optimizer API
➖ JSON logger и кастомные логгеры для structured logging
➖ experimental_getFontFileURL() для работы со шрифтами при генерации OG-image
➖ alpha Astro 7 с Vite 8
➖ Rust compiler теперь станет дефолтным
➖ allowedHosts для preview server
➖ новый jsx-режим для compressHTML

Astro продолжает двигаться в сторону более быстрых билдов, tooling для AI/coding agents и гибкой asset-инфраструктуры.

🔗 Источник

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

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

#release_digest #astro

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

😕 TypeScript невозможно нормально выучить только через туториалы

Пока не начинаешь писать сложные generic-типы, разбирать infer, conditional types и narrowing — кажется, что TS заканчивается на interface и type.

🔤 TypeHero — платформа для практики TS через реальные задачи. Можно решать готовые челленджи, прокачивать понимание type system и даже публиковать собственные задачи.

Особенно полезно тем, кто:

✅ готовится к frontend-собесам
✅ хочет лучше понимать TS inference
✅ постоянно натыкается на странные ошибки типов
✅ хочет выйти за пределы «базового TypeScript»

🔗 Ссылка

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

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

#stack #typescript

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

🔥 Знакомьтесь с экспертом Proglib.academy: Эмиль Сатаев

Эмиль — эксперт с 8-летним опытом в разработке, который специализируется на внедрении LLM и агентных подходов в реальные коммерческие сервисы. Он точно знает, как проектировать архитектуру так, чтобы ИИ-функции работали стабильно в связке с внешними системами.

🏃‍♀️ Уже 14 мая Эмиль проведет открытый вебинар!

Обсудим самую «больную» тему: «Почему AI-продукты на базе LLM ломаются и как сделать, чтобы работало».

🗓 Когда: 14 мая в 19:00 (Мск)

Почему Эмиля стоит послушать:

🟣 8+ лет в разработке (Backend и Frontend)

Прошел путь от фулстека до Backend Platform Developer в SMIT.Studio.

🟣 Международный исследовательский опыт

Работал исследователем в Институте ИИ НИУ ВШЭ и в Национальном университете Сингапура (NUS).

🟣 Преподаватель-практик

Ведет семинары в НИУ ВШЭ, в том числе по проектированию и разработке агентских систем.

🟣 Мастер интеграции AI в Backend

Его главная суперсила — умение правильно встраивать LLM через API, выстраивать workflow и агентную логику в сложных распределенных системах.

🔗 Зарегистрироваться на вебинар

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

🟥 Визуализация методов массивов в JavaScript

map, filter, slice, flat, push, pop — большинство знает их по названию, но на практике многие всё ещё путаются:
что мутирует массив, что возвращает новый, а что вообще меняет тип данных.

🔴 На шпаргалке — наглядное сравнение популярных array methods: как именно меняется массив после каждого вызова.

Особенно полезно:

— джунам
— перед собеседованием
— чтобы быстро освежить базу по JS

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

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

#readme #javascript

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

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

#code_challenge

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

📄 Базовая шпаргалка по CSS

Селекторы, псевдоклассы, box model, позиционирование, текст и основные свойства — всё, что постоянно всплывает в вёрстке и на собеседованиях.

Подойдёт:

🔴 новичкам как краткая база
🔴джунам перед собесом
🔴как быстрый рефреш перед работой

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

#readme #css

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

🗓 14 мая в 19:00 (Мск) встречаемся в онлайне.

Тема: Почему AI-продукты на базе LLM ломаются и как сделать, чтобы работало.

В кружке выше Эмиль Сатаев рассказал, какие именно проблемы с LLM в проде будем разбирать.

Что в программе:

- Разберем реальные кейсы стартапов и ограничения LLM.
- Обсудим рабочие архитектуры: RAG, human-in-the-loop, контроль качества.
- Ответим на ваши вопросы и разберем кейсы участников.

🎁 Бонусы: в конце вебинара подарим промокод на скидку 10.000 ₽ на курсы и разыграем подписки на полезные AI-сервисы.

👉 Зарегистрироваться на вебинар

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

🔊 В Safari DevTools можно поставить «звуковой» breakpoint

Вместо console.log и постоянных остановок debugger Safari умеет проигрывать звук при выполнении строки кода.

🔵 Как включить:

→ Sources → поставьте breakpoint → ПКМ по breakpoint → Edit Breakpoint... → Add Action → Play Sound

После этого Safari будет издавать beep каждый раз, когда код доходит до этой строки.

💡 Полезно для:

— отладки частых событий (scroll, mousemove)
— поиска лишних вызовов
— проверки, срабатывает ли handler
— дебага без засорения console.log

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

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

#readme #devtools

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

🧩 Почему GitHub не разваливается от количества информации

PR, issues, diff, CI, review, notifications, discussions — в GitHub одновременно живут десятки сущностей. Но интерфейс всё равно остаётся читаемым.

🔵 Разберём в карточках, как GitHub управляет сложностью через UX: от diff-view и review flow до labels, статусов и навигации внутри репозитория.

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

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

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

#ux_review

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

🪟 Удобный CLI для localhost и dev-серверов

Port Whisperer — CLI-инструмент для тех случаев, когда локально запущено слишком много dev-серверов, Docker-контейнеров и фоновых процессов.

Он показывает, что именно слушает порты на машине: процесс, PID, проект, framework, uptime и статус.

Что умеет:

→ показать активные dev-порты
→ найти, кто занял конкретный порт
→ завершить процесс по порту, PID или диапазону портов
→ смотреть логи процесса
→ мониторить изменения портов в реальном времени
→ находить orphaned/zombie dev-процессы

🔵 Запуск без установки:

npx port-whisperer

🔵 Установка глобально:

npm install -g port-whisperer

Полезная штука, когда localhost:3000 занят, а вы уже не помните, какой проект оставили жить в фоне.

🔗 Ссылка на GitHub

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

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

#stack

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

🧩 Почему крупные приложения всё чаще рендерят UI с сервера

В обычной схеме даже небольшое изменение layout может превратиться в несколько PR и отдельные релизы для web, iOS и Android.

Server-Driven UI решает это по-другому: backend отправляет JSON с описанием экрана, а клиент собирает интерфейс из уже известных компонентов.

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

— как выглядит SDUI
— зачем нужен component registry
— как JSON превращается в React tree
— и где такой подход реально даёт пользу

В оригинальной статье больше деталей про versioning, actions, mobile-ограничения и архитектурные нюансы крупных приложений ↖️

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

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

#under_hood

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

🔥 Что нового в Chrome 147 и Firefox 150

🔜 contrast-color()

CSS-функция для автоматического выбора чёрного или белого текста в зависимости от фона. Полезно для accessibility и динамических UI.

color: contrast-color(#8b5cf6);

🔜 Math.sumPrecise()

Точное суммирование чисел без проблем floating point.

Math.sumPrecise([0.1, 0.2]);
// 0.3

🔜element.startViewTransition()

Локальные view transitions для отдельных элементов, а не всей страницы.

🔜 border-shape

Новые формы для border: круги, полигоны и не только.

🔜 ariaNotify()

Новый API для screen reader-уведомлений без ARIA live regions.

document.ariaNotify("Saved successfully»);

🔜 sizes="auto" для lazy-loaded изображений

Браузер сам сможет выбирать подходящий размер из srcset.

В beta-версиях ещё интереснее:

— container style queries
— lazy loading для video/audio
— :open pseudo-class
— @supports at-rule()

🔗 Источник

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

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

#release_digest

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

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

Middle Frontend-разработчик (React / React Admin) — от 180 000 ₽, гибрид (Москва)

Senior Frontend Engineer (React / Next.js) — remote (Europe)

Frontend-разработчик — от 2 000 до 2 500 $, удаленно (Москва)

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

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

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

⚡️ Опенсорсный viewer для больших зумируемых изображений на JS

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

🔴 Что умеет:

— zoom и pan для изображений высокого разрешения
— работа на desktop и mobile
— поддержка DZI, IIIF, Zoomify, OpenStreetMap, TMS и других tile-источников
— overlays, navigator, rotation, toolbar
— плагины для аннотаций, SVG/Canvas/HTML-оверлеев, WebGL-фильтров и скриншотов

🔗 Посмотреть демо

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

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

#stack

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

📂 Короткая шпаргалка по циклам в JavaScript

На картинке — базовые отличия, которые часто всплывают в коде и на собеседованиях.

Сохраняйте, чтобы быстро освежить в памяти 🎈

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

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

#readme #js

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