📄 Базовая шпаргалка по 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

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

🧩 components / hooks / utils — структура, которая стареет первой

В маленьком проекте папки по типам файлов выглядят удобно. Но на масштабе код одной фичи расползается по разным директориям, связи теряются, а utils превращается в склад всего подряд.

🔴 В карточках разобрали идею Vertical Codebase: когда код группируют не по типу файла, а по смыслу — вокруг фич, доменов и зон ответственности.

В оригинальной статье больше нюансов: про shared-код, публичные интерфейсы модулей, границы между вертикалями и монорепы 🔗

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

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

#under_hood

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

🦾 Почему ваши AI-продукты на базе LLM ломаются (и как это чинить)?

Выкатили ИИ-фичу в прод, а она галлюцинирует, падает или выдает мусор? Приглашаем на открытый вебинар, где разберем реальную боль внедрения LLM-агентов и научимся делать так, чтобы «всё работало».

🗓️ Когда: 7 мая в 19:00 МСК
⏱️ Формат: 60 минут мяса + 30 минут ответов на ваши вопросы

🧑🏻‍💻 Кто вещает: Эмиль Сатаев — Backend Platform Developer (8+ лет в разработке). Человек, который своими руками внедряет LLM и агентные системы в реальные коммерческие сервисы.

🎁 Главный бонус для онлайна:
Только участникам прямого эфира подарим уникальный промокод на скидку 10.000 ₽ на большой курс AgentOps.

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

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

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

#pixel_pause

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

🪩 alg0 dev — визуализатор алгоритмов

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

— Big O, рекурсия, two pointers, sliding window
— stack, queue, linked list, hash table, heap
— сортировки: quick, merge, heap, radix и другие
— поиск: binary, linear, jump, interpolation
— графы: BFS, DFS, Dijkstra, Prim, topological sort
— DP: Fibonacci, Knapsack, LCS
— backtracking: Sudoku, N-Queens, maze pathfinding

🔗 Ссылка

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

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

#stack

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

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

Как пробросить ref в кастомный React-компонент?

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

Зависит от версии React.

В React 18 и ниже ref в кастомный функциональный компонент пробрасывают через forwardRef:

const Input = React.forwardRef((props, ref) => {
return <input ref={ref} {...props} />;
});

В React 19+ ref можно принимать как обычный prop:

function Input({ ref, ...props }) {
return <input ref={ref} {...props} />;
}

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

Раньше для проброса ref использовали forwardRef, потому что ref не попадал в props. В React 19 ref можно передавать как обычный prop, но в проектах на React 18 и ниже всё ещё нужен forwardRef.

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

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

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

#career_merge

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

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

#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

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

Особенно после трех дней выходных 🌟

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

#pixel_pause

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

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

#code_challenge

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

🔗 transform вместо left/top: анимации без лагов

Если двигать элемент через left или top, браузер пересчитывает раскладку страницы:

.element {
  position: absolute;
  left: 0;
  transition: left .3s;
}

.element:hover {
  left: 100px;
}

Такой подход может вызвать layout → paint → composite и просадить FPS.

✅ Лучше двигать через transform:

.element {
  transition: transform .3s;
}

.element:hover {
  transform: translateX(100px);
}

transform обычно не ломает layout и чаще уходит на этап composite, поэтому анимация получается плавнее.

🔜 Что это даёт:

— меньше перерисовок
— выше FPS
— плавнее UI на слабых устройствах

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

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

#readme #css

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

❓ Почему TypeScript забывает проверенный тип

Type guard и assertion function помогают TypeScript понять тип данных из неизвестного источника: например, после JSON.parse() или ответа API. Разница — в области действия.

🟡 Обычный type guard сужает тип только внутри условия:

function isUser(value: unknown): value is User {
  return typeof value === "object" && value !== null && "name" in value;
}

if (isUser(data)) {
  data.name; // data: User
}

data; // снова исходный тип

🟡 А assertion function работает иначе:

function assertIsUser(value: unknown): asserts value is User {
  if (typeof value !== "object" || value === null || !("name" in value)) {
    throw new Error("Expected User");
  }
}

assertIsUser(data);

data.name; // data: User

💡 Если assertion function не выбросила ошибку, TypeScript считает значение проверенным дальше по текущей области видимости.

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

🔗 Источник

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

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

#under_hood

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

🥳 Фронтенд-неделя: Firefox, Git, TypeScript и AI-агенты

В новом выпуске собрали темы, которые уже влияют на рабочий стек разработчика: от браузерных API и Git до редакторов с AI-агентами.

Внутри:

🆚 что нового в Firefox 150
🆚 зачем смотреть на Git 2.54
🆚 как Zed запускает параллельных агентов
🆚 что меняется в TypeScript 7.0 Beta
🆚 почему снова обсуждают адаптивные картинки
🆚 что значит Temporal в Node.js по умолчанию

🔗 Ссылка

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

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

#read_watch

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

🧩 git fetch vs git pull: в чём разница

git fetch просто забирает свежие изменения с удалённого репозитория и обновляет ссылки на remote-ветки. Локальная ветка и ваши текущие изменения при этом не трогаются.

git fetch

А git pull делает больше: сначала выполняет fetch, а затем сразу применяет изменения к текущей ветке — обычно через merge, иногда через rebase, если так настроено.

git pull

📌 Коротко:

— fetch — посмотреть, что изменилось
— pull — забрать и сразу влить в свою ветку

Если хотите сначала оценить изменения без риска получить конфликты — используйте git fetch.

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

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

#readme

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