🗂 Английский, который реально нужен в IT

Если вы читаете документацию без переводчика, но на созвоне зависаете на слове deploy — это норм. Проблема не в уровне языка, а в отсутствии рабочей лексики.

Мы нашли файл с базой терминов, которые постоянно встречаются в работе ⚡️

— глаголы: deploy, debug, compile, integrate, upgrade
— действия: install, reboot, restore, verify
— железо: CPU, GPU, SSD, motherboard
— софт: IDE, VCS, runtime, testing, OOP
— сеть: DNS, router, bandwidth, latency

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

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

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

#readme

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

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

B. На клиенте и обязательно на сервере

Клиент — это недоверенная среда. Пользователь может:

— подменить JS
— изменить localStorage
— отправить любой запрос напрямую через Postman

Поэтому:

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

📌 Как правильно:

— JWT хранит роль/права
— фронт читает → решает, что показать
— сервер валидирует токен и проверяет права на каждом запросе

🔴 если сервер не проверяет — защита отсутствует.

⚠️ Типичная ошибка

«Мы уже проверили роль на фронте — значит безопасно»

🔴 нет, это просто визуальное ограничение.

👍 — знал/а
🔥 — было полезно
💯 — спросят на собесе

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

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

#code_challenge

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

🛡️ TypeScript: безопасный доступ к вложенным свойствам

Никаких больше “Cannot read property of undefined”!

// Опасно
const city = user.address.city;
// Ошибка, если address === undefined

// Многословно
const city = user && user.address && user.address.city;

// Безопасно
const city = user?.address?.city ?? 'Не указан’;

➖ Optional chaining (?.)

Возвращает undefined, если слева null или undefined, и не пытается читать свойство дальше.

➖ Nullish coalescing (??)
Возвращает правую часть только если слева null или undefined.

❓ Чем отличается от ||:

const volume = settings.volume ?? 0.5;
// Если volume = 0, вернёт 0 — корректно

const volume = settings.volume || 0.5;
// Если volume = 0, вернёт 0.5 — нежелательное поведение

✅ Где использовать:

— ответы API
— вложенные объекты конфигурации
— поля форм, которые могут отсутствовать
— опциональные коллбэки

🈁 Примеры:

// Массивы
const first = users?.[0]?.name ?? 'Гость';

// Функции
onClick?.();

// Сложные цепочки
const price = product?.variants?.[0]?.price?.amount ?? 0;

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

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

#hotfix #ts

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

⚡️ Web Components можно было делать проще — и вот как

Идея Web Components звучит идеально, но в реальности: FOUC, проблемы с SSR и лишний JavaScript. Появился подход — Progressive Web Components:

➖ Сначала рендерится HTML + CSS
➖ Потом подключается JS как улучшение, а не как база

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

— интерфейс появляется сразу
— меньше layout shift
— проще SSR
— меньше зависимости от JS

📎 В статье показывают, как это реализовать на практике через лёгкую библиотеку (~2.6kB) Если делаете UI или дизайн-системы — стоит посмотреть.

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

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

#under_hood #webcomponents

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

⚡️ UI Kit с неоморфизмом

Внутри:

— кнопки, инпуты, карточки
— мягкие тени и pressed-эффекты
— состояния hover / active

Подойдет для быстрых прототипов, лендингов и концептов или изучения эффектов и теней в CSS.

🔗 Ссылка на Codepen

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

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

#stack

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

😱 Tinder для GitHub

Похоже, кто-то решил починить GitHub-дискавери. И сделал это максимально просто 👇

💡 Как это работает:

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

🔜 Что удобно:

— можно быстро находить полезные инструменты
— смотреть README прямо в приложении
— видеть статистику (stars, forks, апдейты)
— находить проекты раньше, чем они залетают в тренды

🔗 Забрать в App Store

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

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

#stack

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

Все логично 👍

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

#pixel_pause

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

📦 npm workspaces: что реально происходит под капотом

Почти любой проект растёт одинаково: сначала один файл → потом фронт, бэк и общие утилиты. И в какой-то момент начинаются проблемы:

— типы расходятся между фронтом и бэком
— зависимости дублируются
— в проекте внезапно два React → странные баги
— npm install в каждой папке

💡 Что дают workspaces:

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

/packages
  /frontend
  /backend
  /shared

Но при этом:

— ставите зависимости один раз на весь проект
— импортируете пакеты друг друга как обычные npm-пакеты
— не публикуете ничего в registry

⚡️ Как это работает на самом деле:

Есть две ключевые вещи, без понимания которых workspaces выглядят магией:

6️⃣ Общие зависимости

npm собирает все пакеты и считает их как один проект. Если frontend и backend используют React — он ставится один раз. Результат: нет дубликатов → нет конфликтов → меньше багов.

2️⃣ Как работает импорт

Когда вы пишете:

import { foo } from "shared»;

npm просто создаёт symlink:

node_modules/shared → ../packages/shared

А дальше уже Node.js:
— ищет пакет в node_modules
— находит ссылку
— загружает локальный код

Когда использовать:

✅ frontend + backend + shared типы
✅ монорепозитории
✅ тесно связанные пакеты

❌ если проекты независимы
❌ если нет общей логики

👍 — используете workspaces
🔥 — теперь стало понятнее, как это работает

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

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

#under_hood

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

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

#pixel_pause

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

🤔 Popper больше не нужен?

Раньше это выглядело так:

— ручные расчёты позиции
— пересчёты при scroll и resize
— Popper / Floating UI— ручные расчёты позиции

Теперь достаточно описать связь в CSS:

.tooltip {
  position-anchor: --btn;
  top: anchor(bottom);
}

🔜 Дальше браузер делает всё сам:

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

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

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

#css #readme

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

⚡ TypeScript без компиляции

Нашли любопытный инструмент — ts-blank-space. Это маленькая библиотека, которая просто вырезает типы из TypeScript и оставляет чистый JavaScript, почти не трогая исходный код.

— использует официальный TypeScript parser

— не генерирует новый JS, а «вырезает» типы

— без Wasm, native и лишних зависимостей

💡 Когда полезно:

— быстрые скрипты и тулзы
— ESM loader
— случаи, где не нужен полноценный tsc

🔴 Ограничения есть: это не транспайлер и не поддерживает весь TS-синтаксис. Но как быстрый type-stripper — очень сильный инструмент.

🔗 Ссылка на GitHub

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

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

#stack

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

📌 Flexbox: базa, которую спрашивают на собесе

— оси (main / cross)
— выравнивание (justify / align)
— поведение элементов (grow / shrink / basis)

🔜 Когда пригодится:

— быстро освежить перед версткой
— повторить перед интервью
— закрыть пробелы в базе

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

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

#readme

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

✏️ ::spelling-error — нативная подсветка опечаток в CSS

Браузер уже умеет находить слова с ошибками. Остаётся только нормально их оформить — без JS и лишней логики.

::spelling-error {
  text-decoration: underline wavy red;
}

🈂️ Где полезно:

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

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

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

#readme #css

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

🖥 JavaScript за 40 дней: от переменных до прод-уровня

Полноценная траектория:

— сначала база: переменные, условия, функции
— затем внутрянка: hoisting, scope, closures
— дальше DOM, события, асинхронщина
— и финал: OOP, performance, память, реальные проекты

🔗 Ссылка на курс

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

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

#read_watch

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

🎯 Accessibility — это не про «инклюзивность ради галочки»

Это про то, работает ваш продукт… или нет. Большинство интерфейсов выглядят нормально, пока вы кликаете мышкой. Но стоит попробовать пройти тот же сценарий с клавиатуры — и всё разваливается:

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

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

🔜 Выше — разбор, как это реально происходит в командах и как её внедряют на практике.

🔗 Источник

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

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

#blueprint

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

🤖 Ваш ИИ-агент съедает бюджет на токены и падает при сбоях API?

Пора переходить на новый уровень. Открыли продажи курса по AgentOps — управлению ИИ-агентами в рабочих процессах.

Рынок требует инженеров, которые умеют:

• Контролировать метрики и качество ответов;
• Эффективно работать с RAG-архитектурой;
• Строить системы, готовые к реальным нагрузкам.

Обучение займет 6-12 недель под руководством практиков с опытом в AI и Data Science в крупных IT-компаниях, таких как Яндекс, Сбер, МТС, Huawei, Raft и др.

🎁 Можно подождать, пока про AgentOps начнут говорить все. Или зайти сейчас — НА 30% ДЕШЕВЛЕ!

Работа с AI начинается с систем.
Системы — с AgentOps.

🔥 Забрать скидку и изучить программу.

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

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

Где корректнее всего проверять роль пользователя для защиты приватных роутов?

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

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

#code_challenge

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

😎 Subgrid теперь в Baseline

Раньше каждая вложенная grid работала независимо, из-за чего элементы часто “разъезжались” и приходилось подгонять всё вручную. Теперь используется одна общая сетка на всех уровнях — элементы автоматически выравниваются без костылей.

.item {
  display: grid;
  grid-template-columns: subgrid;
}

Работает во всех основных браузерах. Вложенные элементы могут использовать сетку родителя.

⚡️ Особенно полезно для:

— карточек
— форм
— сложных layout’ов

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

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

#release_digest

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

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

Frontend-разработчик (React)/Проектная работа от 1700 до 2200 $, удаленно

Frontend Engineer (React) Junior-Middle+ — 600 —‍ 2500 $, офис (Минск)

Middle Frontend-разработчик (React) — 110 000 – 160 000 ₽, удаленно

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

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

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

🔥 Состояние: где оно живёт и почему это важно

Неправильное место для state — это prop drilling через 5 компонентов, лишние рендеры и баги при обновлении страницы.

➡️ Разбираем все типы состояния в одной серии:

— Local state — когда useState достаточно, а когда нет;
— Global state — Context API vs Redux/Zustand;
— Server state — как React Query экономит запросы;
— URL state — недооценённое место для фильтров и шаринга.

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

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

#blueprint

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

🔥 4 git-команды для быстрого анализа чужого кода

🔵 Где чаще всего исправляли

git log --format=format: --name-only | sort | uniq -c | sort -rg | head -10

Обычно это core логика или самые проблемные места.

🔵 Кто писал этот код

git shortlog -sn

Сразу видно ключевых разработчиков и к кому идти с вопросами.

🔵 Где живут баги

git log --all --oneline --grep="fix\|bug»

Подсвечивает зоны, где часто что-то ломается и есть нестабильная логика.

🔵 Активность проекта

git log --date=format:'%Y-%m' --format='%ad' | sort | uniq -c

Помогает понять, когда были пики изменений.

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

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

#readme #git

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

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

#code_challenge

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

😮 Visual Types: типизация через картинки

Вместо чтения про "Union type позволяет переменной быть одним из нескольких типов" — видишь схему, и всё сразу понятно.

Что покрывает:

🔤 Примитивы, объекты, массивы, Union/Intersection типы, дженерики — все базовые концепции. Полезно для начинающих в TypeScript или тех, кто запутался в терминологии.

🔗 Ссылка на гид

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

#readme #ts

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

🤯 Представьте, что ваш AI-агент работает так же предсказуемо, как обычный микросервис. Звучит утопически, но это именно то, к чему должна прийти разработка в 2026 году.

Основная боль текущих реализаций — полная непредсказуемость поведения. Сегодня агент выполнил задачу за два шага, а завтра ушёл в рекурсию и потратил все лимиты.

Наш обновлённый курс «Разработка AI-агентов» научит, как приручить этот хаос с помощью Python и современных фреймворков. Мы не будем учить «общаться» с нейросетью, мы будем строить из неё надёжный инструмент.

✅ Что вы получите:

— понимание того, как управлять логикой агента на уровне кода;
— навыки работы с LangChain и библиотеками оркестрации;
— готовые паттерны для обработки ошибок и галлюцинаций;
— опыт создания систем, которые реально экономят время.

Есть пара мест со скидкой до завтра, решайтесь 👈🏻

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

🤔 Разрабатываете ИИ-агентов, но всё ещё не уверены в их стабильности и прогнозируемости?

Мы поговорили с десятками разработчиков ИИ-агентов и сделали отдельный курс по AgentOps.

🧠 На нём вы узнаете:

– как оптимизировать траты на токены;
– как на практике оценить качество работы агента;
– как «докручивать» RAG-системы без потери качества;
– как обеспечить устойчивость агента к сбоям внешних сервисов без падения всей системы и про многое-многое другое.

📅 Старт: 19 мая.

👥 Спикеры — практики с опытом в AI и Data Science в крупных IT-компаниях, таких как Яндекс, Huawei, МТС и др.

Длительность: 6-12 недель в зависимости от тарифа.

🔗 Программа курса и другие подробности

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

🤷‍♂️ MDN отказались от классического SPA

Раньше это был тяжёлый React-приложение с растущим техдолгом и сложной поддержкой. Теперь архитектура стала проще: страницы рендерятся на сервере, а интерактив добавляется только там, где он действительно нужен.

🔜 Вместо того чтобы тащить весь интерфейс в клиент, они оставили HTML как основу, а динамику вынесли в изолированные web components, которые подгружаются по мере необходимости.

В результате уменьшается бандл, ускоряется загрузка и упрощается поддержка кода.

В статье — разбор, как это устроено внутри 🔗

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

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

#under_hood

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

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

В чём разница между createAsyncThunk и обычным thunk?

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

createAsyncThunk — это обёртка над thunk с готовым lifecycle.

🔜 Что даёт из коробки:

— pending / fulfilled / rejected actions
— автоматическая генерация action types
— обработка ошибок

🔵 обычный thunk — это просто функция
🔵 createAsyncThunk — это структура + соглашение

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

— меньше ручного кода
— единый паттерн async
— проще поддержка

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

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

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

#career_merge

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

Фронтендеры и все фреймворки, которые им пришлось бы изучить 👍

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

#pixel_pause

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

🔍 Минималистичный WebGL-глобус прямо в браузере

Cobe — компактная WebGL-библиотека, которая рисует интерактивную Землю прямо на <canvas> без раздувания бандла.

Ключевые фишки:

— вес около ~5KB (gzip)
— нативный WebGL без зависимостей
— плавная анимация вращения
— маркеры и дуги между точками
— гибкая кастомизация цветов и эффектов

💡 Отдельный плюс — можно привязывать элементы через CSS и управлять их анимацией (opacity, blur, transitions).

➖ Идеально заходит для:

— лендингов
— дашбордов
— визуализации гео-данных

🔗 Ссылка на Github

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

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

#stack

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

👩‍💻 Chrome 147: минус 30% костылей в интерфейсах

➖ Теперь анимации можно запускать прямо на уровне элемента (startViewTransition()), а не всего документа. Это решает вечную боль сложных UI: переходы больше не конфликтуют и могут идти параллельно.

➖ CSS тоже прокачали: contrast-color() сам подбирает читаемый цвет текста, а border-shape позволяет делать нестандартные формы без SVG и лишних обёрток.

➖ В JS добрались до псевдоэлементов: теперь можно не только получить ::before, но и понять, что пользователь кликнул именно по нему. Раньше это было невозможно без костылей.

➖ Под капотом: точные вычисления через Math.sumPrecise(), preload для CSS/JSON, и переход на Rust в XML — меньше багов и уязвимостей.

❗️ И параллельно Chrome продолжает ужесточать правила: доступ к локальной сети теперь под контролем (WebSocket, WebTransport), чтобы сайты не сканировали окружение пользователя.

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

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

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

#release_digest

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