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

Стажер JavaScript — удаленно

Middle Frontend — удаленно (Москва)

Middle Frontend-разработчик (Vue) — 150 000 - 180 000 ₽, удаленно/гибрид (Санкт-Петербург)

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

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

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

❓ Почему модалки ломают архитектуру быстрее, чем кажется

В больших интерфейсах модалки перестают быть «просто UI». Они начинают тянуть на себя управление состоянием, логику и связи между компонентами.

В итоге:

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

🔜 и это уже вопрос архитектуры, а не реализации

Разобрали подход, который это решает: типизированный стек оверлеев + управление через хук + разделение контекстов ✅

🔗 Источник

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

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

#blueprint

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

⌨️ CSS больше не страдает с height: auto

Раньше анимация раскрывашек выглядела так:

— либо костыли с max-height
— либо JS
— либо вообще без анимации

Потому что height: auto нельзя было анимировать

💡 Теперь можно:

:root {
  interpolate-size: allow-keywords;
}

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

— можно анимировать height: auto
— можно анимировать width: auto
— работает с layout, а не через хаки

Браузер сам интерполирует значения.

📌 Пример:

.accordion {
  height: 0;
  overflow: hidden;
  transition: height .3s ease;
}

.accordion.open {
  height: auto;
}

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

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

#readme #css

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

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

Нужно, чтобы фон:

🔜 повторялся только по вертикали
🔜 растягивался на всю ширину блока
🔜 выглядел корректно при ресайзе

Что выбрать?

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

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

#code_challenge #middle

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

📕 Эта книга отделяет джуна от мидла

Она не про «как объявить переменную», а про то, как работает JS под капотом и как писать зрелый код.

Что внутри:

— современные возможности языка: async/await, прокси, итераторы, модули
— фундамент: DOM, события, обработка ошибок
— реальные API: fetch, service workers, потоки, web crypto
— много практических примеров

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

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

#career_merge

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

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

#pixel_pause

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

🔍 BaseWatch — следит за фичами вместо тебя

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

🔜 Вы просто подписываетесь на нужные фичи
🔜 И получаете уведомление, когда они «дозрели»

Как это использовать:

— следишь за CSS Grid Lanes → получаешь сигнал, когда можно юзать

— ждёшь JPEG XL → не пропустишь момент

— не тратишь время на постоянные проверки

🔴 Почему это полезно:

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

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

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

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

#stack

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

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

Почему useEffect может выполниться дважды в dev-режиме?

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

В React при включённом Strict Mode в dev-режиме React специально делает дополнительный цикл mount → unmount → mount.

Что происходит:

— компонент монтируется
— эффект выполняется
— затем компонент сразу размонтируется (cleanup)
— и монтируется заново

👉 поэтому useEffect срабатывает дважды

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

— выявить побочные эффекты
— проверить корректность cleanup
— найти утечки (подписки, таймеры)

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

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

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

#career_merge

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

🛠 50+ инструментов, которые заменят половину ваших сервисов

Cборник браузерных утилит, где всё запускается локально и без трекинга. От генераторов и работы с изображениями до regex и Tailwind — всё в одном месте.

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

🔤 можно спокойно добавить в закладки и использовать как быстрый toolkit

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

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

#stack

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

🖍 3 причины, почему ваш проект раздувается

6️⃣ Поддержка того, что уже никому не нужно

Многие пакеты существуют ради:

— старых движков (IE, древний Node)
— защиты от изменения глобальных объектов
— edge-case вроде iframe / realm

🌟В реальности:

Вы не пишете под IE6
Вы не работаете с cross-realm
Но зависимости — уже внутри

2️⃣ Пакеты из 1 строки кода

Типичный пример:

Array.isArray(val) ? val : [val]

→ отдельный npm-пакет

🌟Что происходит:

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

И главное — рост attack surface (больше точек взлома)

3️⃣ Ponyfill’ы, которые забыли удалить

Когда-то они были нужны. Сейчас — нет.

🌟 Примеры:

— globalthis
— object.entries
— indexof

🌟Проблема:

Фича есть в браузерах уже много лет, но пакеты продолжают устанавливаться «по инерции»

❓ Что с этим делать

Минимум:

— задавать вопрос: «зачем этот пакет?»
— вычищать неиспользуемые зависимости
— проверять, есть ли нативная альтернатива

Инструменты:

— knip → ищет мусор
— e18e CLI → предлагает замены
— npmgraph → показывает, где жир

Мы живём в современном JS, но тащим за собой решения из эпохи ES3. И пока никто не задаёт вопрос «зачем», проекты продолжают раздуваться сами по себе 😂

🔗 Источник

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

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

#under_hood

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

✌🏻 У нас две новости — хорошая и плохая!

Хорошая: Ваших знаний, скорее всего, хватит, чтобы собрать рабочую демку AI-агента в Colab. 🫡

Плохая: Вы вряд ли выведете его в прод, не обанкротившись на токенах и не слив базу. 🤯

Для защиты от таких сценариев мы полностью пересобрали курс «Разработка AI-агентов». Теперь внутри плотная работа с экономикой ресурсов, дебаг через time-travel в LangGraph, извлечение данных из кривых сканов для RAG и комплаенс по 152-ФЗ.

Если всё ещё сомневаетесь, послушайте голосовое от спикера курса Влада Прошинского, где он объясняет, как правильно тестировать агентов перед релизом.

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

ВАЖНО! До 5 апреля на курс действует скидка, но свободные места могут закончиться раньше.

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

👩‍💻 В HTML хотят убрать <div>

В WHATWG рассматривают упрощение разметки: универсальный <div> признали «антипаттерном без семантики».

Вместо него предлагают новый элемент:

<block>
  <block>
    <text>Hello world</text>
  </block>
</block>

Аргумент простой:

➡️ если элемент ничего не значит — он не должен существовать.

ESLint уже готовит правило no-div.

Попались? С первым апреля! 😁

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

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

#release_digest

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

🔥 CSS может знать, открыт элемент или нет

details[open] {
  background: black;
}

Это значит:

— не нужен JS для toggle-стилей
— можно строить UI только на CSS
— работает как state

Частая ошибка:

🔜 люди пишут JS там, где уже есть [open]

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

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

#readme #css

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

👩‍💻 Safari 26.4: что нового

➖ CSS Grid Lanes — наконец-то нативный masonry-like layout без JS-библиотек

➖ Name-only container queries — теперь можно писать @container sidebar { ... } без size-условий

➖ min(), max(), clamp() в img[sizes] — адаптивные изображения стали гибче

➖ WebTransport — современная low-latency альтернатива WebSocket для real-time сценариев

➖ Keyboard Lock API — можно перехватывать клавиши в fullscreen для игр, remote desktop и сложных web-app

🔜 Плюс релиз сильно про совместимость: WebKit завёз много фиксов в CSS, SVG, таблицы, MathML и zoom. Если раньше у вас что-то ломалось только в Safari, возможно, сейчас это уже работает нормально.

🔗 Источник

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

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

#release_digest

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

А что ваш умеет? 🚬

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

#pixel_pause

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

🖼 image-set() — адаптивные фоны без костылей

Обычно адаптивность делают через <picture>, но фоновые изображения часто игнорируют.

📌 Решение:

.hero {
  background-image: image-set(
    url("bg-1x.webp") 1x,
    url("bg-2x.webp") 2x
  );
}

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

— чёткие картинки на retina
— меньше лишнего веса
— контроль прямо в CSS

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

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

#readme #css

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

💥 Когда замыкания начинают есть память

Замыкания — одна из самых мощных фич JavaScript. Но именно из-за них в проде появляются утечки, которые сложно отследить.

В статье разбирают:

— как замыкания блокируют сборку мусора
— почему даже «невинный код» может держать мегабайты в памяти
— чем опасен eval в этом контексте
— утечки через обработчики событий
— как использовать WeakMap и WeakSet правильно

🔜 И главное — как это диагностировать через DevTools.

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

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

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

#under_hood #javascript

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

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

#pixel_pause

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

С вас 🎈, если было полезно!

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

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

#career_merge

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

⭐️ Шпаргалка по Grid alignment

Если вы хоть раз путались между justify-* и align-* — вы не один. Где ось, где контент, где items — в голове это часто смешивается, особенно в реальных макетах.

🔜 Что внутри:

— разница между justify-content и justify-items
— как работает align-content vs align-items
— все ключевые значения: start, end, center, stretch, space-*
— наглядно по осям

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

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

#readme #css

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

🧩 shape() — как CSS забирает работу у SVG

Раньше любые blob’ы, волны и «рваные» края = SVG или картинки. Теперь это можно генерировать прямо в CSS.

В чем суть:

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

⚙️ Как это работает:

— задаёшь плотность (сколько кривых)

— добавляешь немного случайности

— соединяешь точки по правилам

🔜 получаешь любую форму: волны, blob, «жидкие» края

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

— минус SVG и лишние ассеты
— формы становятся частью CSS
— можно анимировать как обычные стили
— открывает новый уровень UI (особенно в анимациях)

🔗 Ссылка на пост с примерами кода

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

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

#under_hood

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

🧠 Реальное собеседование на Middle/Senior

Внутри: техвопросы + лайвкодинг + разбор мышления кандидата. Особенно полезно, если готовитесь к собесу и хотите понять уровень ожиданий.

🔗 Смотреть видео

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

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

#read_watch

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

🍩 Donut scope — локальные стили с исключениями

Иногда нужно применить стили не ко всему блоку, а ко всему, кроме конкретного вложенного элемента. Это паттерн, который называют donut scope — область со «сквозным исключением» внутри.

📌 Идея:

— ограничиваем область действия стилей (@scope)
— находим нужное состояние (:has())
— исключаем вложенный участок

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

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

— меньше override-правил
— предсказуемый каскад
— проще поддерживать сложные UI
— чище структура стилей

🔜 Где используется:

— вложенные меню (drill-down)
— компоненты с состояниями
— сложные layout-паттерны

🔗 Посмотреть туториал по паттерну

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

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

#under_hood

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

Как frontend-разработчику получить оффер в Big Tech?

Платят как джуну, а спрашивают как с лида 🙄 Зарплата не растёт, задачи скучные.

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

Стабильность с маленькой зп, или дестрой рынка и выход на максимальную? Синяя или красная таблетка, Нео?! 👾

Меня зовут Тихон, привет! Я — действующий Frontend-разработчик и ментор.

Помогаю устроиться на хорошие позиции в Big Tech и сопровождаю на испытательном сроке.

В своем канале:
👉Разбираю самые популярные и каверзные вопросы на собесах
👉Рассказываю как пройти фильтр HR
👉Борюсь с убеждениями, которые мешают развиваться
👉Делюсь лайфхаками, например как аккуратно “пинговать” рекрутеров

Регулярно публикую полезные материалы:

▪️100 вопросов, которые точно помогут тебе на собеседовании ▪️Подборка из 100+ каналов с вакансиями для разработчиков
▪️10 задротских вопросов про JavaScript, после которых ты усомнишься, что вообще знаешь JS. Часть 1
▪️Чек лист проверки своего резюме

Подписывайся, нас уже 4500 🤓: ссылка

Реклама, erid: 2W5zFGxjPj7 ИП Галактионов Тихон Витальевич, ИНН 771618975809

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

⚡️ @scope — локальный CSS без конфликтов

Стили больше не влияют на весь проект. Теперь можно ограничить их область действия — прямо в CSS.. Работает как локальная зона стилей без Shadow DOM.

🔴 Где полезно:

— компонентная верстка
— дизайн-системы
— большие проекты

Меньше конфликтов → проще поддержка 💡

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

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

#hotfix #css

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

🔖 Удобный справочник по фронтенду

Собрали в одном месте всё, что обычно ищешь в процессе работы: HTML, CSS, JavaScript, а также дополнительные темы вроде SEO и jQuery.

Фишка — интерактивный формат: можно сразу копировать код, убирать комментарии и использовать как быстрый референс прямо в процессе работы ⌨️

🔗 Ссылка на HTMLCheatSheet

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

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

#stack

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

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

Frontend-разработчик — до 230 000 ₽, офис (Москва)

Senior React Native Developer (Mobile) — от 6 000 $, удаленно (Кипр)

Frontend-разработчик — от 120 000 до 180 000 ₽, удаленно (Санкт-Петербург)

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

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

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

✏️ Как выбрать идеальный шрифт для IDE

Сервис CodingFont делает это через мини-баттлы:

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

💡 Можно скрыть названия → никакого «JetBrains Mono же модный» → только реальное ощущение от чтения. В итоге остаётся один фаворит — ваш, а не из топа на Reddit.

🔗 Попробовать

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

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

#stack

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

💡 <details> — нативный toggle, который вы игнорируете

<details>
  <summary>Открыть</summary>
  Контент
</details>

Что важно:

— работает из коробки (без JS)
— есть встроенное состояние [open]
— доступность уже реализована (a11y)

➡️ Используйте для:

— аккордеонов
— FAQ
— простых меню

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

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

#readme #html

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

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

#code_challenge

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