Библиотека фронтендера | Frontend, JS, JavaScript, React.js, Angular.js, Vue.js

30 March 2026 13:01

📦 Container Queries — респонсив по контейнеру, а не по экрану

Проблема: карточка в гриде, сайдбаре и модалке выглядит по-разному. Media queries не помогут — они смотрят на viewport.

ℹ️ Кейсы:

— Виджеты в дашбордах
— UI-киты с гибкими компонентами
— Карточки в разных местах

🟡 Юниты: cqi, cqw — как vw, но для контейнера

⚙️ Поддержка: Chrome 105+, Safari 16+, Firefox 110+

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

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

#hotfix #css

Библиотека фронтендера | Frontend, JS, JavaScript, React.js, Angular.js, Vue.js

29 March 2026 15:03

🎈 PatternCraft — готовые фоны на CSS, которые не стыдно использовать

Небольшая библиотека с градиентами и геометрическими паттернами для интерфейсов.

— 250+ готовых вариантов
— чистый CSS + Tailwind
— можно посмотреть вживую и сразу скопировать код
— без зависимостей

Библиотека фронтендера | Frontend, JS, JavaScript, React.js, Angular.js, Vue.js

28 March 2026 10:01

🕺 AnimatiSS — коллекция CSS-анимаций

Библиотека готовых keyframe-анимаций: bounce, fade, shake, blur, jello и другие эффекты.

Можно посмотреть демо на странице и скопировать код нужной анимации. Всё на чистом CSS, легковесно.

📎 Ссылка

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

#readme #css

Библиотека фронтендера | Frontend, JS, JavaScript, React.js, Angular.js, Vue.js

27 March 2026 12:01

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

Почему бесконечная цепочка Promise.then может «заморозить» UI?

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

Promise.then попадает в очередь microtasks, которая выполняется раньше обычных задач (macrotasks) и полностью очищается.

Если внутри then постоянно добавлять новые задачи, браузер не успевает перейти к:
— отрисовке
— обработке событий
— setTimeout

🔜 поэтому UI выглядит зависшим

📌 Пример:

function loop() {
Promise.resolve().then(loop);
}

loop();

Код не блокирует поток напрямую, но бесконечно заполняет очередь microtasks.

— показывает реальное понимание event loop
— объясняет «фризы» без тяжёлых вычислений
— важно при работе с async и оптимизацией

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

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

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

#career_merge #middle

Библиотека фронтендера | Frontend, JS, JavaScript, React.js, Angular.js, Vue.js

26 March 2026 19:09

😱 Если ваш продукт не умеет отдавать данные в формате, понятном AI-агенту, то вас просто не существует

Скрипт не будет кликать по красивым кнопкам в браузере, он уйдёт к конкуренту с нормальным API. Перестроить архитектуру под машинных клиентов — это уже не хайп, а необходимое условие сохранения конкурентоспособности.

Как адаптировать продукт и не исчезнуть из выдачи:

— интегрировать MCP и A2A-взаимодействие, чтобы агенты могли вас читать;
— научиться контролировать стоимость (лимиты, кэш, роутинг между моделями);
— настроить AgentOps: трейсинг, логирование и отлов регрессий.

Всё это ждёт вас на обновлённом курсе «Разработка AI-агентов». Мы специально сделали фокус на утилитарном инжиниринге и production-ready решениях.

Кстати, до 29 марта можно забрать курс с большой скидкой, и стоит поторопиться — мест на потоке всё меньше.

Зафиксировать цену и начать деплоить агентов без слива бюджета 👈

Библиотека фронтендера | Frontend, JS, JavaScript, React.js, Angular.js, Vue.js

26 March 2026 12:02

👩‍💻 TypeScript 6.0 вышел

Это не просто очередной релиз, а переходная версия перед TypeScript 7.0, который обещает нативную скорость и новый компилятор на Go.

Что важно:

— улучшили type-checking для методов
— добавили target и lib: es2025
— появились встроенные типы для Temporal
— добавили типы для новых методов Map и WeakMap: getOrInsert и getOrInsertComputed
— RegExp.escape() теперь тоже типизирован
— dom.iterable и dom.asynciterable больше не нужно подключать отдельно — они вошли в dom

Библиотека фронтендера | Frontend, JS, JavaScript, React.js, Angular.js, Vue.js

25 March 2026 19:02

👩‍💻 HTML — база, которую большинство недоучивает

Именно здесь чаще всего всплывают проблемы: слабая семантика, кривые формы, неправильная структура. Этот курс — хороший способ освежить основы и закрыть пробелы.

Внутри:

— структура документа и метаданные
— семантическая разметка
— формы, таблицы, ссылки
— работа с атрибутами и контентом

Библиотека фронтендера | Frontend, JS, JavaScript, React.js, Angular.js, Vue.js

25 March 2026 10:06

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

Junior frontend-разработчик — удаленно/офис (Москва, Нижний Новгород, Санкт-Петербург)

Middle Frontend Developer — 140 000 —‍ 155 000 ₽, удаленно (Москва)

Senior React Developer (Облачная инфраструктура) — ≈ 250 000 —‍ 350 000 ₽, офис/гибрид (Москва)

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

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

Библиотека фронтендера | Frontend, JS, JavaScript, React.js, Angular.js, Vue.js

24 March 2026 19:03

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

#pixel_pause

Библиотека фронтендера | Frontend, JS, JavaScript, React.js, Angular.js, Vue.js

24 March 2026 08:12

🖍 Как сделать текст «красивым» без костылей в CSS

В браузере перенос строк непредсказуем: появляются «висячие» слова и ломается визуал.

Есть нативное решение:

.title {
  text-wrap: balance;
}

.title {
  text-wrap: pretty;
}

Библиотека фронтендера | Frontend, JS, JavaScript, React.js, Angular.js, Vue.js

23 March 2026 15:03

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

#code_challenge

Библиотека фронтендера | Frontend, JS, JavaScript, React.js, Angular.js, Vue.js

23 March 2026 08:00

💡 Совет по Chrome DevTools

Когда в Network сотни запросов, используйте поле Filter:

➡️ можно отфильтровать запросы по домену, методу (GET/POST), типу, статусу и приоритету.

📌 Особенно полезно, когда:

— ищете конкретный API-запрос
— отлавливаете ошибки (4xx / 5xx)
— проверяете загрузку ресурсов

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

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

#readme #devtools

Библиотека фронтендера | Frontend, JS, JavaScript, React.js, Angular.js, Vue.js

21 March 2026 14:02

📎 Теперь документацию React можно «скормить» ИИ

На сайте React dev появилась кнопка “Copy page” — она копирует любую страницу сразу в формате Markdown.

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

— можно вставить документацию прямо в Claude / ChatGPT
— ИИ будет отвечать на основе актуального контекста, а не памяти
— код и объяснения становятся точнее

Вместо:

«объясни useEffect»

«вот документация → объясни / перепиши / адаптируй под мой кейс»

Библиотека фронтендера | Frontend, JS, JavaScript, React.js, Angular.js, Vue.js

20 March 2026 19:02

🔥 Как делать покадровую анимацию в CSS без GIF

Разбор спрайтов от Джоша Комо — показывает, как анимировать их прямо в <img> через object-fit, object-position и steps().

Разбирает не только реализацию, но и когда спрайты реально выигрывают у GIF, а когда лучше делать анимацию по-другому.

🔗 Читать по ссылке

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

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

#read_watch

Библиотека фронтендера | Frontend, JS, JavaScript, React.js, Angular.js, Vue.js

20 March 2026 12:01

🔥 PVS-Studio запускает бета-тест анализатора для JavaScript и TypeScript

PVS-Studio расширяет поддержку новых языков и запустил бета-тест статического анализатора для JavaScript и TypeScript.

Подключиться может любой желающий: нужно заполнить форму на сайте и дождаться инструкций. Команда просит делиться ложными срабатываниями, пропущенными проблемами и сбоями, чтобы доработать инструмент.

📎 Подробнее о запуске и условиях участия

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

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

#release_digest

Библиотека фронтендера | Frontend, JS, JavaScript, React.js, Angular.js, Vue.js

30 March 2026 09:00

🔥 Готовишься к собесу на Middle Frontend?

Собрали шпаргалку — 50 вопросов с интервью по React + TypeScript. 9 тем: от Virtual DOM и Fiber до React Compiler 1.0, FSD и PPR.

С вас 🎈, если сохранили!

🔤 Забираем оффер тут: @jsdevjob

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

#readme

Библиотека фронтендера | Frontend, JS, JavaScript, React.js, Angular.js, Vue.js

29 March 2026 11:03

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

#pixel_pause

Библиотека фронтендера | Frontend, JS, JavaScript, React.js, Angular.js, Vue.js

27 March 2026 19:01

📕 Как выглядит современная CSS-архитектура в проде

Слои, токены, container queries, тёмная тема без костылей — CSS давно стал системой, а не просто стилями. Разобрали в карточках, как это реально устроено: без перегруза теорией, только практичные подходы.

🔗 Источник

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

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

#under_hood

Библиотека фронтендера | Frontend, JS, JavaScript, React.js, Angular.js, Vue.js

27 March 2026 08:00

❓ Почему ваш useEffect сложно читать

useEffect(() => {}) — стандарт, к которому все привыкли. Но проблема в том, что он говорит когда выполняется код, а не зачем.

Вот что меняется, если дать эффекту имя:

useEffect(function fetchUserData() {
  // логика
}, [userId]);

useEffect(() => {
  setFullName(first + last);
}, [first, last]);

Библиотека фронтендера | Frontend, JS, JavaScript, React.js, Angular.js, Vue.js

26 March 2026 19:01

⌨️ Почему React устроен именно так

useEffect с зависимостями, «задержка» state, странное поведение при async — сначала это выглядит как костыли. Но на практике это базовые ограничения UI в асинхронном мире, которые нельзя обойти.

🔜 В карточках — 2 вещи в React, которые чаще всего не понимают, и почему без них всё начинает ломаться.

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

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

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

#under_hood

Библиотека фронтендера | Frontend, JS, JavaScript, React.js, Angular.js, Vue.js

26 March 2026 08:03

📎 contrast-color() уже не только про чёрный и белый

Новый CSS-функционал contrast-color() автоматически подбирает чёрный или белый цвет с лучшим контрастом к фону. Но этим можно не ограничиваться — есть способы сделать цвета более гибкими и «живыми».

6️⃣ Подмешиваем цвет через color-mix()

.card {
  --bg: #6c1afb;
  background: var(--bg);

  color: color-mix(in oklch, var(--bg) 20%, contrast-color(var(--bg)));
}

@property --contrast-color {
  syntax: "<color>";
  initial-value: white;
  inherits: true;
}

.card {
  --bg: #6c1afb;
  --contrast-color: contrast-color(var(--bg));
}

.card-title {
  color: if(
    style(--contrast-color: white): antiquewhite;
    else: midnightblue;
  );
}

Библиотека фронтендера | Frontend, JS, JavaScript, React.js, Angular.js, Vue.js

25 March 2026 12:04

👩‍💻 Firefox 149 — что важно для фронтенда

➖ CSS

— shape-outside: xywh() — удобнее задавать обтекание
— @container теперь можно использовать проще (без лишних условий)

➖ API

— createImageBitmap() — теперь можно одновременно ресайзить и кропать изображение
— Reporting API — отслеживание CSP и integrity ошибок

➖ DOM

— showPicker() для <datalist> — можно открывать список программно
— CloseWatcher — обработка Esc / Back как у нативных компонентов

➖ Media

— captureStream() стал стандартным (без moz*)

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

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

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

#release_digest

Библиотека фронтендера | Frontend, JS, JavaScript, React.js, Angular.js, Vue.js

25 March 2026 08:05

🔥 Slowmo — замедляйте анимации прямо в браузере

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

— удобно разбирать CSS-анимации покадрово
— настраивать transition и тайминги
— изучать сложные UI-эффекты
— ловить баги и визуальные глитчи

Библиотека фронтендера | Frontend, JS, JavaScript, React.js, Angular.js, Vue.js

24 March 2026 12:05

🧑‍💻 Современный Node.js для фронтенда

Node.js стал платформой с веб-стандартами, встроенным тестированием и современными асинхронными паттернами.

В карточках разберем ключевые подходы:

— Модули
— Top-level await
— Встроенные веб-API
— Потоки
— Worker Threads

🔗 Читать полный текст статьи

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

#blueprint

Библиотека фронтендера | Frontend, JS, JavaScript, React.js, Angular.js, Vue.js

23 March 2026 19:04

✨ 80+ готовых шейдеров и эффектов для веба

Radiant — вежий набор визуальных эффектов, который можно просто взять и использовать в продакшене. Без зависимостей, с открытой лицензией (MIT).

Что внутри:

— поддержка разных цветовых тем

— реалистичные визуальные симуляции

— работает через WebGL и 2D Canvas

Библиотека фронтендера | Frontend, JS, JavaScript, React.js, Angular.js, Vue.js

23 March 2026 12:04

🔥 Как на самом деле работают события в браузере

Клики, скролл, hover — всё это выглядит просто, пока не начинаются странные баги: событие срабатывает дважды, не там или вообще не ловится. Причина почти всегда в том, что не понимают, как событие проходит через DOM.

Разобрали ключевые механики — всплытие, перехват и делегирование — в карточках выше 👆

🔗 Читать статью

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

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

#under_hood

Библиотека фронтендера | Frontend, JS, JavaScript, React.js, Angular.js, Vue.js

22 March 2026 14:01

😕😕

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

#pixel_pause

Библиотека фронтендера | Frontend, JS, JavaScript, React.js, Angular.js, Vue.js

21 March 2026 10:04

🔥 Что происходит, когда ошибка падает в React Server Components

На первый взгляд — просто ошибка в рендере. Но в RSC она проходит через несколько этапов, и на каждом ведёт себя по-разному. Где-то она превращается в данные, где-то ломает рендер, а где-то только появляется на экране.

Разобрали весь путь ошибки — от сервера до браузера — в карточках выше 👆

🔗 Источник

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

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

#under_hood

Библиотека фронтендера | Frontend, JS, JavaScript, React.js, Angular.js, Vue.js

20 March 2026 15:00

Почитали тут свежий отчёт по рынку ИИ-ускорителей в РФ: оказывается, 54% компаний тормозят внедрение ИИ исключительно из-за конских цен на инфраструктуру.

Ну, то есть написать пет-проект с вызовом API это задача на вечер, а вот запустить агента в продакшн так, чтобы он не сжёг бюджет отдела за неделю — суровая инженерия.

По сути, сейчас мало уметь собирать RAG. Нужно считать токены, настраивать time-travel дебаг в LangGraph и уметь роутить запросы на лету. Всё это мы учли в обновлённом курсе по разработке AI-агентов, где акцент сделан именно на AgentOps и жёсткий контроль ресурсов.

Также в программе:

— оценка качества, трейсинг и защита от деградации пайплайнов;
— мультиагентные паттерны и интеграция по протоколу MCP;
— локальный деплой Open Source под 152-ФЗ (когда данные нельзя выносить наружу).

Кажется, это единственный адекватный roadmap по переходу от блокнотов к enterprise-решениям.

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

👉 Зафиксировать цену и начать собирать агентов, за которых не стыдно в проде

Библиотека фронтендера | Frontend, JS, JavaScript, React.js, Angular.js, Vue.js

20 March 2026 10:30

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

Почему setTimeout(fn, 0) не выполняется мгновенно?

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

setTimeout(fn, 0) не означает «выполнить сразу». Колбэк таймера попадает в очередь задач и выполняется только после завершения текущего кода. Перед этим движок обрабатывает microtasks (например, Promise.then и async/await), поэтому они выполняются раньше.

Пример:

console.log("start");

setTimeout(() => console.log("timeout"), 0);

Promise.resolve().then(() => console.log("promise"));

console.log("end");

Результат:

start
end
promise
timeout

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

— помогает понимать порядок выполнения кода
— объясняет баги с асинхронностью
— показывает знание event loop

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

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

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

#career_merge #middle