🎯 3. Название и позиционирование
💼
Frontend на собес
@frontend_sobees (или @frontsobees)
Варианты названий
- Frontend на собес — прямо, по делу ⭐
- ФронтInterview — нейтральнее
- Frontend Interview Hub — для тех кто ищет "hub"
- Прошёл собес — нарративное
- Frontend за 5 минут до собеса — остро
Концепция
Канал для фронтенд-разработчиков, которые готовятся к собеседованиям — от первого junior до сеньорного перехода. Не просто теория, а как отвечать, что проверяют и как думать вслух.
Описание канала (текст в шапке)
💼 Готовлю фронтендеров к собеседованиям
Здесь не просто теория — здесь разбираем, что реально спрашивают, как отвечать и где ловушки.
📌 Что найдёшь:
— Вопросы с реальных собесов (Junior → Senior)
— Разборы ответов: что нравится интервьюеру
— TypeScript, перформанс, архитектура
— Live coding и system design
— HR-вопросы и soft skills
🎯 Цель: ты знаешь код — теперь научись его продавать.
🤝 Связь: @your_handle
📝 8. 14 готовых постов (Неделя 1 + 2)
Готовые тексты — копируй и публикуй. Форматирование для Telegram (без HTML-тегов).
⚡ 5 минут до собеса
Closure
Junior
⚡ Замыкание — шпаргалка за 5 минут
Если собес через час — вот что нужно знать:
▸ Замыкание — это функция + переменные из внешнего скоупа, которые она «запомнила»
▸ Замыкание создаётся каждый раз, когда создаётся функция
▸ Внутренняя функция имеет доступ к переменным внешней даже после того, как внешняя уже завершилась
▸ Используется в: счётчиках, приватных переменных, debounce/throttle, мемоизации
Кодом:
function makeCounter() {
let count = 0; // эта переменная «запомнилась»
return () => ++count;
}
const counter = makeCounter();
counter(); // 1
counter(); // 2
counter(); // 3 — count живёт!
⚠️ Частая путаница: замыкание — это НЕ то, что функция возвращает другую функцию. Замыкание — это сам механизм доступа к внешнему скоупу.
Сохрани 🔖
#шпаргалка #замыкание #junior
❓ Вопрос дня
Junior
❓ Вопрос с собеса — Junior
«Объясни разницу между null и undefined»
━━━━━━━━━━━━━━━
✅ Хороший ответ:
undefined — значение, которое JS присваивает автоматически: необъявленная переменная, функция без return, отсутствующий параметр.
null — явное «ничего». Разработчик сам пишет null, чтобы сказать: «здесь намеренно пусто».
typeof undefined → "undefined"
typeof null → "object" (баг с 1995 года, исправить нельзя)
null == undefined → true
null === undefined → false
❌ Типичная ошибка:
«Это одно и то же, просто разные слова» — так говорят 40% джунов. Интервьюер сразу слышит.
💡 Бонус:
Упомяни typeof null === "object" и объясни почему это баг — это покажет, что ты читаешь спецификацию, а не только туториалы.
#вопрос_дня #null #undefined #junior
🤝 HR-раунд
🤝 HR-вопрос: «Расскажите о себе»
Этот вопрос слышат 95% на первом скрининге. И большинство его проваливают.
❌ Плохо:
«Меня зовут Иван, мне 24 года, я из Москвы, занимаюсь программированием 2 года, люблю React...»
HR не спрашивал биографию. Он хочет понять: зачем ты нам нужен?
✅ Хорошо — формула «Прошлое → Настоящее → Будущее»:
«Я [X] лет работаю фронтенд-разработчиком, специализируюсь на [стек]. В последнем проекте [конкретное достижение]. Сейчас ищу [что именно] — и ваша компания интересна, потому что [конкретная причина].»
📌 Структура ответа:
▸ 1–2 предложения о текущем опыте и стеке
▸ 1 конкретное достижение (цифра или результат)
▸ Почему именно эта компания/роль
Длина: 60–90 секунд. Не больше.
⚠️ Не говори «я хочу развиваться» без конкретики — это ни о чём.
#hr_раунд #soft_skills #собес
❓ Вопрос дня
Middle
❓ Вопрос с собеса — Middle
«Как работает Event Loop в JavaScript?»
━━━━━━━━━━━━━━━
✅ Хороший ответ:
JS — однопоточный. Event Loop — механизм, который позволяет «имитировать» асинхронность.
Порядок выполнения:
1. Call Stack — синхронный код
2. Microtask Queue — Promise.then(), queueMicrotask(), MutationObserver
3. Macrotask Queue — setTimeout, setInterval, I/O, UI events
Важно: после каждого macrotask — полностью очищается microtask queue.
console.log('1'); // Call Stack
setTimeout(() => console.log('2'), 0); // Macrotask
Promise.resolve().then(() => console.log('3')); // Microtask
console.log('4'); // Call Stack
// Вывод: 1, 4, 3, 2
❌ Типичная ошибка:
Сказать «setTimeout выполняется асинхронно» и остановиться. Интервьюер ждёт упоминания microtask vs macrotask.
💡 Бонус:
Упомяни requestAnimationFrame — он выполняется между macrotask и отрисовкой.
#вопрос_дня #event_loop #middle
📊 Квиз-пятница
📊 Квиз-пятница — проверь себя
Что выведет этот код?
const obj = { a: 1 };
function change(o) {
o.a = 99;
o = { a: 0 };
}
change(obj);
console.log(obj.a);
→ Голосуй ниже, разбор в субботу ⬇️
Варианты:
A) 1
B) 99
C) 0
D) undefined
💬 Это классика собеседований на понимание передачи по ссылке vs переприсваивание
#квиз #пятница #javascript
🎯 Ловушка интервьюера
🎯 Ловушка интервьюера #1
Сначала — разбор вчерашнего квиза:
Ответ: B) 99
Почему? В JS объекты передаются «по ссылке на значение». o.a = 99 меняет оригинальный объект. Но o = { a: 0 } — переприсваивает локальную переменную, не оригинал.
━━━━━━━━━━━━━━━
Теперь ловушка 🎯
Вопрос: «В чём разница между == и ===?»
80% отвечают: «=== строже, проверяет тип»
Интервьюер кивает... и задаёт следующий вопрос:
«А что вернёт [] == false?»
[] == false → true 😱
Потому что == использует алгоритм Abstract Equality Comparison, который приводит типы. [] → "" → 0, false → 0. Равны!
Как ответить правильно с первого раза:
«== применяет неявное приведение типов по сложному алгоритму, что даёт неочевидные результаты вроде [] == false === true. Именно поэтому в продакшне всегда используют ===.»
Это показывает, что ты не просто знаешь правило — ты понимаешь причину.
#ловушка #coercion #javascript
⚡ 5 минут до собеса
Event Loop
Middle
⚡ this в JavaScript — шпаргалка за 5 минут
this — одна из топ-5 тем на любом фронтенд-собесе.
▸ В обычной функции: this = тот, кто вызвал
▸ В стрелочной функции: this = значение из внешнего скоупа (лексический this)
▸ В методе объекта: this = объект
▸ При new: this = новый объект
▸ call/apply/bind: явно задаёт this
Кодом:
const obj = {
name: 'Alice',
regular() { console.log(this.name); }, // 'Alice'
arrow: () => console.log(this.name), // undefined!
};
obj.regular(); // Alice
obj.arrow(); // undefined — стрелка взяла внешний this
⚠️ Частая путаница: стрелочные функции НЕ имеют своего this. Они берут this там, где были объявлены, а не где вызваны.
⚠️ Ловушка: setTimeout с обычной функцией — this будет window (или undefined в strict mode).
Сохрани 🔖
#шпаргалка #this #javascript
❓ Вопрос дня
Junior
❓ Вопрос с собеса — Junior
«Что такое Promise и чем отличается от callback?»
━━━━━━━━━━━━━━━
✅ Хороший ответ:
Callback — функция, передаваемая в другую функцию для вызова позже. Проблема: callback hell при нескольких вложенных асинхронных операциях.
Promise — объект, представляющий результат асинхронной операции. Три состояния: pending → fulfilled / rejected.
Преимущества Promise:
▸ Цепочки (.then().then()) вместо вложенности
▸ Единый .catch() для всей цепочки
▸ Promise.all(), Promise.race(), Promise.allSettled()
// Callback hell
getData(function(a) {
getMore(a, function(b) {
getEven(b, function(c) { // 😵
...
});
});
});
// Promise
getData()
.then(a => getMore(a))
.then(b => getEven(b))
.catch(err => handle(err)); // ✅
❌ Типичная ошибка:
Сказать только «Promise удобнее» без объяснения почему.
💡 Бонус:
Упомяни async/await — синтаксический сахар над Promise, делает код ещё читаемее.
#вопрос_дня #promise #async #junior
🤝 HR-раунд
🤝 HR-вопрос: «Почему вы ищете новое место?»
Один из самых «минных» вопросов на скрининге.
❌ Плохо:
«Не сошлись характерами с менеджером» — ты жалуешься
«Мало платят» — без контекста звучит меркантильно
«Скучно стало» — кажется, ты быстро теряешь интерес
✅ Хорошо — формула «рост + новый вызов»:
«На текущем месте я сделал [конкретное достижение], вырос в [область]. Сейчас хочу [чего не хватает / новый масштаб задач]. Ваша компания привлекает тем, что [конкретная причина из вакансии/сайта].»
📌 Принципы:
▸ Говори о том, К ЧЕМУ идёшь, а не ОТ ЧЕГО бежишь
▸ Если причина — деньги, можно сказать: «хочу вознаграждение, соответствующее рынку и моему уровню»
▸ Никогда не критикуй бывшего работодателя — это красный флаг для любого HR
⚠️ Если тебя уволили — честность лучше уклончивости. «Компания провела оптимизацию» — нормально.
#hr_раунд #soft_skills #собес
🧩 TypeScript на собесе
Middle
🧩 TypeScript на собесе: что спрашивают чаще всего
Если в вакансии есть TS — готовься к этим вопросам:
1️⃣ «Что такое interface vs type?»
// interface — расширяемый, для объектов
interface User { name: string }
interface User { age: number } // ✅ мёрж
// type — более гибкий, для всего
type ID = string | number; // union
type Readonly = { readonly [K in keyof T]: T[K] } // mapped
Правило: для публичного API объектов — interface. Для всего остального — type.
2️⃣ «Что такое generic?»
Параметр типа — как параметр функции, но для типов:
function identity(arg: T): T { return arg; }
identity('hello'); // T = string
3️⃣ «Что такое unknown vs any?»
any — отключает проверку типов полностью 😈
unknown — безопасная альтернатива: нужно проверить тип перед использованием ✅
❌ Самая частая ошибка на собесе: использовать any «потому что работает».
#typescript #вопрос_дня #middle
📊 Квиз-пятница
📊 Квиз-пятница — классика собесов
Что выведет код?
async function foo() {
return 1;
}
async function bar() {
const result = foo();
console.log(result);
}
bar();
Варианты:
A) 1
B) Promise { 1 }
C) Promise {
}
D) undefined
→ Голосуй ниже, разбор в субботу ⬇️
💬 Этот вопрос проверяет понимание async/await и что возвращают async-функции. Часто встречается в блоке по Promise на junior-собесах.
#квиз #пятница #async #javascript
🚀 Перформанс
Middle+
🚀 Core Web Vitals на собесе — что нужно знать
Google сделал CWV частью ранжирования. Теперь это обязательная тема для middle+.
Разбор квиза: Ответ C) Promise {
}
Async-функция всегда возвращает Promise. Без await мы получаем Promise, а не значение.
━━━━━━━━━━━━━━━
Три метрики CWV:
📦 LCP (Largest Contentful Paint)
— время отрисовки наибольшего элемента
— цель: < 2.5 сек
— что влияет: изображения без lazy load, медленный SSR, нет CDN
👆 INP (Interaction to Next Paint)
— время отклика на взаимодействие (заменил FID)
— цель: < 200 мс
— что влияет: тяжёлые обработчики событий, долгие JS-задачи
📐 CLS (Cumulative Layout Shift)
— суммарный сдвиг элементов при загрузке
— цель: < 0.1
— что влияет: изображения без width/height, динамически вставляемые баннеры
💡 На собесе спросят: «Как ты оптимизировал производительность?»
Отвечай с конкретикой: «Снизил LCP с 4.2 до 1.8 сек, добавив preload для hero-изображения и перейдя на CDN»
#перформанс #core_web_vitals #middle
❓ Вопрос дня
Senior
❓ Вопрос с собеса — Senior
«Расскажи о своём опыте с micro-frontends. Когда это оправдано?»
━━━━━━━━━━━━━━━
✅ Хороший ответ:
Micro-frontends — архитектурный паттерн, где фронтенд разбивается на независимо деплоящиеся части, как микросервисы на бэке.
Когда оправдано:
▸ Разные команды работают над разными частями продукта
▸ Нужна независимость деплоя (одна команда деплоит, не блокируя других)
▸ Разные технологические стеки (React + Vue в одном приложении)
Реализации:
▸ Module Federation (Webpack 5) — самый популярный
▸ iframes — просто, но проблемы с UX
▸ Web Components — нативно, медленно набирает популярность
Цена: сложность оркестрации, дублирование зависимостей, проблемы с SSR.
❌ Антипаттерн:
Использовать micro-frontends для стартапа из 3 разработчиков — оверинжиниринг.
💡 Главный вопрос, который задаст интервьюер: «Какие проблемы ты решал?» Будь готов с конкретным примером.
#вопрос_дня #microfrontends #архитектура #senior
💭 Думай вслух
Live Coding
💭 Live coding: как не провалиться
Самый страшный момент собеса для многих — «напишите код прямо сейчас».
Вот как думает интервьюер:
Ему важно НЕ только решение. Ему важен процесс твоего мышления.
📌 Алгоритм поведения:
1️⃣ Уточни задачу
«Правильно ли я понимаю, что нужно...?»
«Каков ожидаемый формат входных данных?»
→ 2 минуты на уточнение лучше, чем 30 минут не в ту сторону
2️⃣ Думай вслух
«Сначала подумаю о O(n) решении, потом попробую оптимизировать»
→ Тишина пугает интервьюера
3️⃣ Начни с грубого решения
Рабочее O(n²) лучше несуществующего O(n log n)
4️⃣ Покрой крайние случаи
«А что если пустой массив? Null? Отрицательное число?»
→ Это показывает production-мышление
5️⃣ Предложи улучшения сам
«Можно оптимизировать до O(n), если использовать Map»
→ Не жди, что интервьюер попросит
❌ Самая частая ошибка: молчать и смотреть в экран.
✅ Лучшая стратегия: превратить live coding в диалог.
Сохрани 🔖 — пригодится перед следующим собесом.
#live_coding #советы #собес