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

Middle Frontend разработчик — от 170 000 ₽, гибрид (Москва)

Frontend Developer Pixi — 3 000 —‍ 5 500 $, удаленно

Frontend разработчик — от 150 000 ₽, офис (Краснодар)

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

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

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

🧠 Бесплатный курс по алгоритмам на JavaScript

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

Внутри:

— Big O  
— сортировки  
— графы  
— структуры данных  
— деревья

Курс старый и не обновляется, но фундаментальные темы всё ещё актуальны.

🔗 Доступен по ссылке

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

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

#stack

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

🛠 Быстрая проверка CSS прямо в DevTools

Необязательно менять код проекта, чтобы проверить CSS. Можно добавить inline-стиль прямо в DevTools и сразу увидеть результат.

🔜 Как найти:

— Chrome / Edge: Styles → element.style
— Firefox: Rules → element
— Safari: Styles → Style Attribute

Полезно, когда нужно быстро понять:

— сработает ли CSS-свойство
— перебьёт ли оно текущий каскад
— почему правило не применяется
— как элемент поведёт себя без правки исходников

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

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

#readme #devtools

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

Туц-туц-туц 🎵 Слышите?

Это звуки Техно-Квартирника, регулярной встречи от сообщества разработчиков интерфейсов (фронтенд) Альфа-Банка — A?.Frontend.

27 мая в 19:00 в режиме техно будем разбирать примеры и кейсы, как использовать ИИ-агенты в разработке интерфейсов:

➡️ «Чистая архитектура frontend-приложений и причём здесь ИИ-агенты?»
Илья Агапов, технический лидер разработки, Альфа-Банк
Данила Звягин, ведущий разработчик, Альфа-Банк
➡️ «Как я поднял ИИ-агента и снова стал высыпаться: OpenClaw, скиллы и корпоративная рутина»
Роман Троицкий, старший разработчик интерфейсов (frontend), Сбер
➡️ «Как ИИ ломают привычную модель веб-безопасности?»
Анастасия Егорова, разработчик интерфейсов (frontend), CozyFrontend
➡️ «AI как QA-инженер: механики тестирования с помощью агентов для frontend-инженеров»
Илья Шорин, разработчик интерфейсов (frontend), Авито Товары

После каждого доклада будут дискуссии самых горячих трендов, а вечер завершим вот чем:
🗣 Консультациями по ИИ-агентам
💿 Диджей-сетом
🤝 Нетворкингом

Регистрируйтесь по ссылке!


Реклама. АО «Альфа-Банк», ИНН 7728168971. Erid 2VtzqvYFDNp

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

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

#code_challenge

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

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

#pixel_pause

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

⭐️ А что если тестировать Vue-компоненты прямо в браузере — без Playwright, Vitest и Node?

Автор статьи показывает browser-native подход к frontend testing: Vue-компоненты монтируются прямо в DOM, а тесты работают с интерфейсом без отдельного JS-runtime.

Внутри:

— рендер компонентов в тестовом DOM
— waitFor() вместо случайных sleep()
— работа с form events вручную
— reset fixture-данных через API
— coverage через Chrome DevTools

Подход не решает все проблемы тестирования, но идея интересная.

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

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

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

#read_watch #testing

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

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

Почему чрезмерное следование DRY может навредить проекту?

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

Если слишком рано объединять похожий код в одну абстракцию, система становится сложнее:

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

Иногда два похожих блока кода проще и безопаснее поддерживать отдельно, чем тащить преждевременную abstraction.

❌ Плохой DRY:

handleUser(type, data, options, flags)

✅ Нормальный подход:

createUser()
updateUser()
deleteUser()

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

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

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

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

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

#career_merge

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

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

#pixel_pause

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

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

Senior TypeScript — от 440 000 ₽, удаленно

Frontend-разработчик (TypeScript) — от 110 000 до 200 000 ₽, офис (Санкт-Петербург)

Junior Frontend Developer (React/Angular/Vue) — от 50 000 до 100 000 ₽, удаленно (Москва)

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

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

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

⚡️ 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

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

👩‍💻 React лучше всего учится не по туториалам, а через pet-проекты

Нашли большой репозиторий с идеями React-проектов разного уровня — от простых счётчиков и Todo до SaaS Dashboard, WebRTC и AI Chat UI.

Внутри проекты разделены по уровням:

🟢 Beginner
🟡 Intermediate
🔴 Advanced

Полезно, если:

— не знаете, что сделать для портфолио
— хотите практиковать React на реальных задачах
— ищете идеи для pet-проекта
— готовитесь к frontend-собеседованиям

🔗 Ссылка на GitHub

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

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

#stack #react

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

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

Что такое миксины в CSS-препроцессорах?

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

Миксины — это переиспользуемые наборы CSS-правил в препроцессорах вроде SCSS или LESS. Их можно подключать в разных местах и передавать параметры, чтобы не копировать одинаковые стили вручную.

🔜 Например, в SCSS:

@mixin flex-center($gap: 0) {
display: flex;
justify-content: center;
align-items: center;
gap: $gap;
}

.card {
@include flex-center(16px);
}

После компиляции правила из миксина попадут в итоговый CSS внутри .card.

⚠️ Важно:

Миксины — не то же самое, что @extend. @extend объединяет селекторы, а миксины вставляют набор правил в то место, где их вызвали.

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

Миксины — это переиспользуемые CSS-шаблоны в препроцессорах. Они помогают выносить повторяющиеся стили и подключать их в нужных местах, в том числе с параметрами.

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

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

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

#career_merge

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

Темным временам пришел конец 😑

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

#pixel_pause

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

⚠️ GitHub Actions cache poisoning — опасная проблема современного open source

Во многих репозиториях кэш в GitHub Actions общий для проверки PR и релизного процесса.

Из-за этого атакующий может:

— отправить вредоносный PR
— записать заражённый кэш
— дождаться сборки релиза
— выполнить код в CI с доступом к публикации пакетов

Через похожие цепочки уже атаковали TanStack, Cline и другие проекты из JS-экосистемы.

✅ В статье разбирается:

— чем опасен pull_request_target
— как общий кэш ломает границы доверия
— зачем закреплять actions по SHA
— почему AI-боты в CI становятся новой точкой атаки

Полезно всем, кто работает с GitHub Actions, npm, CI/CD и open source.

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

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

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

#under_hood

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

🖍 formatToParts() — недооценённый метод в Intl.NumberFormat

Обычный .format() возвращает готовую строку:

"$1,234.56"

А formatToParts() разбивает число на отдельные части:

new Intl.NumberFormat("en-US", {
  style: "currency",
  currency: "USD"
}).formatToParts(1234.56)

🔴 Результат:

[
  { type: "currency", value: "$" },
  { type: "integer", value: "1" },
  { type: "group", value: "," },
  { type: "integer", value: "234" },
  { type: "decimal", value: "." },
  { type: "fraction", value: "56" }
]

Это полезно, когда нужно:

— отдельно стилизовать валюту
— уменьшать дробную часть
— кастомно оформлять separators
— анимировать части числа отдельно

Production-ready API, который активно используют в fintech, analytics и dashboard-интерфейсах.

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

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

#readme #js

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

👩‍💻 VS Code shortcuts, которые ускоряют работу

🔵 Быстрый переход к файлу по названию.

Ctrl + P

🔵 Переход к функции, компоненту или переменной внутри файла.

Ctrl + Shift + O

🔵 Переход к конкретной строке.

Ctrl + G

🔵 Переместить строку вверх или вниз без copy-paste.

Alt + ↑ / ↓

🔵 Выделить все совпадения выбранного текста.

Ctrl + Shift + L

🔵 Переименовать переменную/функцию во всём scope безопаснее, чем через поиск.

F2

🔵 Открыть быстрые исправления: auto import, fix lint, convert, refactor.

Ctrl + .

Для macOS можно заменить Ctrl на Cmd, а Alt на Option.

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

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

#readme #vscode

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

🛡️ HTML Sanitizer API: безопасная вставка HTML без лишних костылей

innerHTML давно остаётся одной из самых опасных точек во frontend: если вставить пользовательский HTML без очистки, можно получить XSS.

🈂️ Новый HTML Sanitizer API переносит часть этой работы на браузер. Например, setHTML() вставляет HTML безопасно по умолчанию: удаляет <script>, inline-обработчики вроде onerror и другие XSS-опасные части.

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

— почему innerHTML опасен
— чем setHTML() отличается от innerHTML
— какие есть safe/unsafe методы
— зачем нужен parseHTML()
— как применять API в React
— почему DOMPurify пока всё ещё нужен как fallback

🔜 Особенно интересен кейс с optimistic UI: можно безопаснее показать пользовательский комментарий сразу, пока backend ещё обрабатывает запрос.

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

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

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

#under_hood #js

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

🔗 Как сделать эффект «матового стекла» в CSS

Glassmorphism до сих пор активно используют в:

— dashboard-интерфейсах
— модалках
— sidebar
— карточках
— landing page

Основной эффект создаётся через backdrop-filter.

.card {
  background: rgba(255, 255, 255, 0.12);

  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);

  border: 1px solid rgba(255,255,255,0.25);
  border-radius: 20px;

  box-shadow: 0 20px 50px rgba(0,0,0,0.25);
}

❗️ Что важно:

— backdrop-filter размывает фон позади элемента, а не сам элемент

— без изображения или градиента на фоне эффект почти незаметен

— сильный blur может быть дорогим для рендера, особенно на мобильных

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

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

#readme #css

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

🌑 Новый API для изоляции JavaScript-кода

В TC39 продолжают работу над ShadowRealm — API для запуска JavaScript в изолированном окружении с собственным globalThis, built-in объектами и отдельным scope.

const shadow = new ShadowRealm(); 

shadow.evaluate(`   globalThis.secret = "shadow"; `); 

console.log(globalThis.secret); // undefined

Главное отличие от Web Worker:

🈁 ShadowRealm не создаёт новый поток. Код выполняется в том же thread, но в отдельном execution context.

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

— изолировать сторонние библиотеки
— уменьшать pollution глобального scope
— запускать sandbox/plugin-логику
— делать «чистые» окружения для тестов
— безопаснее работать с внешним кодом

Proposal сейчас находится на Stage 2.7.

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

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

#under_hood #js

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

📎 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

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