Telegram Group Search
🎙 Собеседование в OZON Tech на позицию Middle Frontend Разработчик

Два этапа тех собесов с задачами и вопросами. Вопросы были разнообразные: http, cors, browser и тд.

1. Переписать функцию с помощью async/await

getJson('json/1')
.then(json => {
if(json.key) {
return getJson('json/2')
}
throw new Error('No key')
})
.then(json => {
return json.key2
})
.catch(e => {
console.log(e)
})


2. Написать обертку вокруг нативного fetch, которая будет в случае ошибки пробовать еще retriesCount раз, и только потом упадет с ошибкой

function fetchWithRetries(retriesCount, ...fetchArgs) {
/* */
}



3. Типизировать функцию reduce чтобы она принимала дженерики:
function reduce(array, callback, initial) {
let acc = initial

for(let i = 0; i < array.length; i++) {
acc = callback(acc, array[i], i)
}

return acc
}


4. Написать функцию которая сворачивает диапазоны:
compress([1, 4, 3, 2]) // '1-4'

compress([1, 4]) //'1, 4'


5. Реализовать паттерн наблюдатель:
class Store {
/* */
}

const store = new Store()

const firstSubscriber = (data) => console.log('first', data)
const secondSubscriber = (data) => console.log('second', data)

store.subscribe(firstSubscriber)
store.subscribe(secondSubscriber)

store.data = {newKey: 'newString'}

/** CONSOLE
* first {newKey: 'newString'}
* second {newKey: 'newString'}
*/

store.unsubsribe(firstSubscriber)

/** CONSOLE
* second {newKey: 'newString'}
*/
}


#interview #frontend
Please open Telegram to view this post
VIEW IN TELEGRAM
🖥 Разбор задач по Event Loop с собеседований

В этом видео мы подробно разберем выполнение кода в задачах по Event Loop шаг за шагом. Мы визуализируем процесс на схеме, чтобы показать, что происходит с кодом в момент его выполнения. Разберемся, как работает стек вызовов, что такое микротаски, макротаски и как они взаимодействуют в процессе обработки событий. Это видео поможет вам глубже понять внутреннюю работу Event Loop в JavaScript, что критически важно для собеседований и практических задач.

Видео уже на канале!
Я не оставляю ссылку, так как видео лучше продвигается, если заходить на него напрямую с YouTube. Это помогает улучшить его рейтинг и увеличить шансы на органическое продвижение.

🔗 СХЕМА

#frontend #javascript #eventloop
Please open Telegram to view this post
VIEW IN TELEGRAM
🖥 Задачи по Event Loop с собеседований

Задача №1

setTimeout(() => {
console.log('setTimeout')
})

const promise = new Promise((resolve, reject) => {
console.log(1);
setTimeout(() => {
console.log("timerStart");
resolve("success");
console.log("timerEnd");
}, 0);

Promise.resolve().then(() => {
console.log('resolve')
})
console.log(2);
});

promise.then((res) => {
console.log(res);
});

console.log(4);


Задача №2
setTimeout(function timeout() {
console.log('Таймаут 1');
}, 0);

let p = new Promise(function(resolve, reject) {
console.log('Создание промиса');

setTimeout(function timeout() {
console.log('Таймаут 2');
}, 0);

resolve();
});

p.then(function(){
console.log('Обработка промиса');
});

console.log('Конец скрипта');


Задача №3

const myPromise = (delay) => new Promise((res, rej) => { setTimeout(res, delay) })

setTimeout(() => console.log('in setTimeout1'), 1000);

myPromise(1000).then(res => console.log('in Promise 1'));

setTimeout(() => console.log('in setTimeout2'), 100);

myPromise(2000).then(res => console.log('in Promise 2'));

setTimeout(() => console.log('in setTimeout3'), 2000);

myPromise(1000).then(res => console.log('in Promise 3'));

setTimeout(() => console.log('in setTimeout4'), 1000);

myPromise(5000).then(res => console.log('in Promise '));


Задача №4

console.log(1);

setTimeout(() => console.log(2));

Promise.resolve().then(() => console.log(3));

Promise.resolve().then(() => setTimeout(() => console.log(4)));

Promise.resolve().then(() => console.log(5));

setTimeout(() => Promise.resolve().then(() => console.log(6)));

console.log(7);


Задача №5

console.log('start');

const promise1 = Promise.resolve().then(() => {
console.log('promise1');
const timer1 = setTimeout(() => {
console.log('timer1')
const promise2 = Promise.resolve().then(() => {
console.log('promise2');
const timer2 = setTimeout(() => {
console.log('timer2')
}, 0)
})
}, 0);
});

const timer3 = setTimeout(() => {
console.log('timer3');
const promise3 = new Promise(resolve => {
setTimeout(() => {
console.log('promise3');
resolve();
}, 0);
}).then(() => {
console.log('promise3 then');
})
}, 0);

async function asyncFunction() {
console.log('async start');
await new Promise(resolve => setTimeout(resolve, 0));
console.log('async middle');
await Promise.resolve().then(() => console.log('async promise'));
console.log('async end');
}

asyncFunction();

console.log('end');
Please open Telegram to view this post
VIEW IN TELEGRAM
😅 Псс... Прокачаться не надо?

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

Съемка видео, написание сценария и монтаж — это непростая задача. На 20-минутное видео уходит три дня работы. А ведь у меня еще YeaHub, блог, менторство и социальные проекты.

Лучшая поддержка - это просмотр видео. Спасибо!

https://www.youtube.com/@reactify-it
🎉 Ровно год в менторстве!

Год назад, 8 февраля, я выложил пост у себя на канале о том, что начинаю обучать новичков. И с тех пор у меня было около 100 учеников, более 70 из которых пришли в разработку почти с нуля.

Больше всего учеников пришло осенью: сентябрь, октябрь, ноябрь. Почти все, кто начал обучение раньше, уже нашли работу. А сейчас многие заканчивают обучение и выходят на рынок. Каждый ученик — уникален, со своими сильными сторонами и трудностями, но всех нас объединила разработка.

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

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

Я постоянно стараюсь делать обучение лучше. Вот, например, сейчас — суббота, 22:55, а я пишу практический курс для учеников по Docker и CI/CD. 😅

Мне хочется формировать не просто сообщество разработчиков, а сильное комьюнити людей, которые не просто найдут работу, а станут реально крутыми специалистами. Надеюсь, у меня это получается!

Так что с праздником меня — с первой годовщиной в менторстве! 🥳😎

📹 Во вторник новое видео - Принципы ООП в React

👇Тот самый пост
https://www.group-telegram.com/reactify_IT.com/709
Please open Telegram to view this post
VIEW IN TELEGRAM
👩‍💻 Принципы ООП в React.

В этом видео разберем основные принципы ООП — инкапсуляцию, наследование, полиморфизм и абстракцию — и покажем, как они работают в React. Узнаем, что такое Render Props, Component Injection, композиция и декомпозиция, и применим их в функциональных компонентах, Custom Hooks и HOCs.

Видео уже на канале!
Я не оставляю ссылку, так как видео лучше продвигается, если заходить на него напрямую с YouTube. Это помогает улучшить его рейтинг и увеличить шансы на органическое продвижение.

🔗 Репозиторий

#frontend #react #ооп
Please open Telegram to view this post
VIEW IN TELEGRAM
👩‍💻 Продвинутый React

Выпущено три видео по паттернам и принципам программирования:

📹 5 продвинутых паттернов в React – изучаем ключевые подходы и паттерны в разработке React-приложений: Render Props, Slot Pattern (Component Injection), Proxy Component, Function as a Child, Compound Components.

📹 Принципы SOLID в React – учимся создавать переиспользуемые компоненты, используя SOLID-принципы. Разбираем, как правильно декомпозировать код и проектировать архитектуру с учетом лучших практик.

📹 Принципы ООП в React – закрепляем понимание объектно-ориентированного программирования, разбираем, откуда берутся паттерны и подходы, и как они помогают в разработке.

💡 Для чего это нужно?

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

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

#frontend #react #solid #oop
Please open Telegram to view this post
VIEW IN TELEGRAM
Please open Telegram to view this post
VIEW IN TELEGRAM
💬 Frontend Собеседование с разбором. Browser, JavaScript, TypeScript, React. Групповой мок-формат

В этом видео группа ребят, которые хотят устроиться на работу в IT, отвечают на теоретические вопросы от ведущего ментора. Это полноценная тренировка: участники учатся выступать перед аудиторией, формулировать свои мысли, дополнять ответы других и внимательно слушать, как отвечают их коллеги. В этом видео мы поговорим о ключевых технологиях: Browser, JavaScript, TypeScript и React.

Видео уже на канале!
Я не оставляю ссылку, так как видео лучше продвигается, если заходить на него напрямую с YouTube. Это помогает улучшить его рейтинг и увеличить шансы на органическое продвижение.

#frontend #interview
Please open Telegram to view this post
VIEW IN TELEGRAM
Опрос про накрутку опыта 2024 (статистика открыта для всех)

Время подвести итоги 2024 года: помогает ли накрутка достигнуть ваших целей, увольняют ли на испытательном сроке, палит ли служба безопасности. За прохождение опроса бесплатный доступ в сообщество на 3 дня. Итоги опубликую в этом канале.

https://forms.gle/H3YbVcf1xKNUJUey9

Всем блогерам от 100 подписчиков раздам доступ к полученным ответам за репост (пишите в комментах со ссылкой на репост в ваших соц сетях)
📹 Собеседование на Middle Frontend | 50 вопросов студенту IT-Incubator

Когда-то давно я учил React по курсу React Самурай от Димыча. Недавно предложили на его канале провести собеседование. Я согласился :)

🔗 Список вопросов с ответами

📹 Видео
Please open Telegram to view this post
VIEW IN TELEGRAM
📈 Ситуация на рынке труда в IT

Вакансий на рынке действительно мало, и он до сих пор не оправился после новогодних праздников. Ранее прогнозировалось, что к февралю количество предложений восстановится до уровня осени 2024 года, когда по всей России было около 4 тысяч вакансий. Однако сейчас их число колеблется в пределах 2300–2400, что почти в два раза меньше.

До нового года ситуация была иной: офферы приходили уже через неделю активного поиска (пример: оффер за 1 неделю). Количество собеседований доходило до 6–10 в неделю, и найти работу за месяц не составляло труда. Сейчас же поиск работы может затянуться до двух месяцев. В условиях такой высокой конкуренции важно быть максимально подготовленным.

Означает ли это, что найти работу невозможно?

Нет, даже в текущих условиях ребята продолжают получать офферы. Вот несколько примеров:
- Оффер на 250 тысяч рублей с нуля
- Два оффера в копилку наших ребят
- Еще два оффера
- Два ученика получили офферы
- Оффер на 210 тысяч рублей в Big Tech
- Оффер за один день

🔝 Кому сейчас легко?

Никому. Рынок требует адаптации, и важно быть сильнее других кандидатов. Это время для работы над своими навыками и повышения конкурентоспособности.

Прогнозы:
Ожидаем, что количество вакансий восстановится к концу весны. На это повлияет улучшение общей экономической ситуации, а также сезонные факторы. Однако стоит понимать, что рынок IT становится более зрелым и требовательным.

🌧 Стоит ли бросать учебу?

Нет. Текущая ситуация — это естественная конкуренция, которая существует в любой профессии.

Например:
- Среди студентов медицинских вузов лишь около 20% становятся врачами узких специальностей или хирургами. Остальные работают медперсоналом, лаборантами или врачами общей практики.
- Среди выпускников юридических факультетов только 10% достигают карьерных высот, становясь судьями, прокурорами или успешными адвокатами. Остальные работают в юридических фирмах, занимаясь рутинной работой.

То же самое происходит и в IT. Если вам нравится разработка, и вы готовы учиться, вы сможете пройти через конкуренцию. Рынок очищается от тех, кто пришел в IT только из-за хайпа и высоких зарплат, после курсов и думал, что с небольшой базой можно легко вкатиться.

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

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

Ваше будущее в ваших руках. Учитесь, адаптируйтесь и будьте на шаг впереди.
Please open Telegram to view this post
VIEW IN TELEGRAM
🎙 Собеседование в компанию Точка

На позицию Middle Frontend Разработчик

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

1. В каком порядке будут выведены логи?
console.log('1')
Promise.resolve('2')
.then((res) => {
console.log(res);

Promise.resolve('3')
.then((res) => {
console.log(res);
setTimeout(() => {console.log('4')}, 0);
})
})
.then((res) => console.log(res))
.finally((res) => {
console.log(res);
setTimeout(() => {console.log('5')}, 0);
});
console.log('6');


2. А если изменив первый Promise?
console.log('1')
Promise.reject('2')
.then((res) => {
console.log(res);

Promise.resolve('3')
.then((res) => {
console.log(res);
setTimeout(() => {console.log('4')}, 0);
})
})
.catch((res) => console.log(res))
.then((res) => console.log(res))
.finally((res) => {
console.log(res);
setTimeout(() => {console.log('5')}, 0);
});
console.log('6');


3. Что выведет этот код?
function foo() {
const x = 10;

return {
x: 20,
bar: () => {
console.log(this.x)
},
baz: function() {
console.log(this.x)
}
};
}

const obj1 = foo();

obj1.bar(); // ...
obj1.baz(); // ...

const obj2 = foo.call({ x: 30 });
obj2.bar(); // ..
obj2.baz(); // ...


4. Напиши и типизируй функцию для определения типа фигуры
type Rectangle = {
width: number ;
height: number ;
};

type Circle = {
radius: number;
};

type AvailableFigure = Rectangle | Circle;

function isCircle(figure) {
...
}

function getCircleArea(figure: Circle): number {
return Math.pow(figure.radius, 2) * Math.PI
}

function getRectangleArea(figure: Rectangle): number {
return figure.width * figure.height
}

function getArea(figure: AvailableFigure): number {
return isCircle(figure)
? getCircleArea(figure)
: getRectangleArea(figure);
}


5. Напиши нативный Pick<>
type MyPick<T, U extends keyof T> = {
[key in U]: T[key]
}


Все эти задачи мы разбирали в видео:
- 5 типичных задач по TypeScript для Frontend собеседований
- Разбор задач по Event Loop с собеседований
- 5 типичных задач по JavaScript на собеседовании

#interview
Please open Telegram to view this post
VIEW IN TELEGRAM
🖥 Лайвкодинг в компании Postgres Pro

Позиция Middle Frontend Разработчик

Достаточно сложные вопросы были по опыту, проектам. А так же не было стандартных технических вопросов.

На собеседовании нужно было реализовать Игру "Crush the mole".
Описание задачи:
Необходимо реализовать игру "Crush the mole" на TypeScript. Игра представляет собой поле 4x4 клетки, на котором через случайные промежутки времени в случайной клетке появляется крот. Игрок должен успеть "прихлопнуть" крота, кликнув по нему левой кнопкой мыши. После успешного клика крот исчезает и появляется в новой случайной клетке. Игру можно остановить и начать заново с помощью кнопки.

Требования:
- Поле игры: Игровое поле состоит из 16 клеток (4x4).
- Появление крота: Крот появляется в случайной клетке через случайные промежутки времени.
- Управление: Игрок кликает по клетке, чтобы "прихлопнуть" крота. Если клик был по клетке с кротом, крот исчезает и появляется в новой случайной клетке.
- Кнопка управления: Игру можно остановить и начать заново с помощью одной кнопки.
- Отображение крота: Крот отображается символом, например, @.
- Генерация случайных чисел: Для генерации случайного числа можно использовать Math.random().


import React from 'react';

const elements = Array(16).fill(0);

export default function App() {
const [randomIndex, setRandomIndex] = React.useState(0);
const [isStart, setStart] = React.useState(false);

// Ваш код здесь

return (
<div className="App">
<h1> Crush the mole </h1>
<button onClick={() => { /* Ваш код здесь */ }}>
{isStart ? "Остановить" : "Начать игру"}
</button>
<div className="container">
{elements.map((elem, index) => (
<div
key={index}
className="item"
onClick={() => { /* Ваш код здесь */ }}
>
{index === randomIndex ? "@" : ""}
</div>
))}
</div>
</div>
);
}


Задачи для кандидата:
- Реализовать логику появления крота в случайной клетке через случайные промежутки времени.
- Реализовать обработку клика по клетке: если клик был по клетке с кротом, крот исчезает и появляется в новой случайной клетке.
- Реализовать кнопку, которая будет останавливать и запускать игру.
- Убедиться, что игра корректно работает и не содержит багов (например, крот не появляется в той же клетке сразу после исчезновения).

Дополнительные вопросы для обсуждения:
- Как можно оптимизировать код для улучшения производительности?
- Как можно добавить дополнительные функции в игру (например, счетчик очков, таймер, уровни сложности)?
- Как можно протестировать эту игру?

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

#interview
Please open Telegram to view this post
VIEW IN TELEGRAM
Please open Telegram to view this post
VIEW IN TELEGRAM
👩‍💻 Сложное Frontend Собеседование + Live Coding. Promises, This, Memo, Generics, Solid, HTTP

Изначально запись этого собеседования не планировалась для публикации — она была сделана для детального разбора навыков и поведения Даниила. Для него это был первый опыт мокового собеседования, и, как он сам отметил, волнение и стресс сопровождали его на протяжении всего процесса. Однако такой формат оказался крайне полезным: он позволил объективно оценить слабые места и наметить план работы.

Какие проблемы выявил разбор?
- Ответы давались кратко, без необходимой аргументации и пояснений
- Активное использование слов-паразитов: «наверное», «вроде», «не знаю», что создавало впечатление неуверенности
- Даже правильные ответы звучали неубедительно из-за нерешительной манеры подачи
- Многие вопросы оставались раскрытыми неполно, без углубления в суть
- На базовые вопросы, которые кажутся очевидными, давались неполные или частично верные ответы

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

Видео уже на канале!
Я не оставляю ссылку, так как видео лучше продвигается, если заходить на него напрямую с YouTube. Это помогает улучшить его рейтинг и увеличить шансы на органическое продвижение.

#frontend #interview
Please open Telegram to view this post
VIEW IN TELEGRAM
🥇 Что делать кандидату? Стратегия прорыва в условиях жесткого рынка

Сейчас недостаточно просто отправить резюме и ждать — нужно атаковать рынок со всех сторон. Чем больше действий, тем выше шансы. Вот рабочие тактики:

1. Оптимизация резюме и профиля
- Ключевые слова из вакансии — HR и алгоритмы ищут по ним.
- Несколько версий резюме под разные вакансии (или даже новый аккаунт с другим телефоном/почтой).
- Обновляйте резюме раз в 1-2 дня, чтобы подняться в поиске.
- Цифры и метрики — автоматические системы любят конкретику.
- Приукрашивайте опыт, усиливайте достижения, используйте сильные слова.

2. Обход алгоритмов и фильтров
- Откликайтесь в первые часы после публикации — чем раньше, тем выше шанс.
- Реферальные ссылки — если есть знакомые в компании, просите приглашение (таких кандидатов часто рассматривают в приоритете).
- Пишите напрямую HR или рекрутерам (но коротко — 3-4 предложения о вашем соответствии).

3. Альтернативные способы выхода на компанию
- Ищите вакансии на сайтах компаний — иногда их публикуют там раньше, чем на агрегаторах.
- Telegram-каналы, чаты по поиску работы — некоторые вакансии не доходят до HH.
- Митапы и конференции — нетворкинг до сих пор один из самых сильных инструментов.
- Изучите LinkedIn — это ещё одна возможность быть замеченным.
- Пишите не только HR, но и текущим работникам компании (можно найти в чатах и попросить зарефералить).
Please open Telegram to view this post
VIEW IN TELEGRAM
🐝 Собеседование в компании Билайн

Позиция Middle Frontend Разработчик

1. Разница между WebSocket и SSE?
2. Разница между юнит-тестами и интеграционными тестами?
3. Допишите код хука и его типы:

type UseArrayActions = {
push: (item) => void,
removeByIndex: (index) => void
}

export function useArray(initialValue): { value } & UseArrayActions {
const [value, setValue] = useState(initialValue);

const push = (item) => setValue();
const removeByIndex = (index) => setValue();

return { value, push, removeByIndex };
}


4. Дан массив строк (не меньше 3 элементов), в котором одна из строк отличается по составу входящих в неё букв от остальных строк в массиве. Порядок, количество, регистр букв и пробелы роли не играют. Реализовать метод, который принимает на вход такой массив строк, и возвращает отличающуюся строку.

console.assert( findUniq(['a', 'a Aa', 'ab a', 'AA a']) === 'ab a' );
console.assert( findUniq(['ab', 'a Aa', 'ab a', 'bAA a']) === 'a Aa' );
console.assert( findUniq([1,2,1,1]) === 2 );
console.assert( findUniq(['aBca', 'ac b', 'bac', 'fO o', 'bca', 'cabaccBA', ' Ccba']) === 'fO o' );

function findUniq(strings) {
???
}


5. Объясните, что произойдет при выполнении следующего кода:

const Andrey = {
name: 'Андрей',
surname: 'Малахов',
city: {
name: 'Москва'
},
}

const Genadius = {
name: 'Генадий',
surname: 'Малахов',
city: Andrey.city,
}

Genadius.city.name = 'Санкт-Петербург'


6. В каких случаях может выполниться “something code”?

const checkIntervalMs = 2000;
const toleranceMs = 2000;
let lastCheckStamp: number = null;

setInterval(
() => {
const now = Date.now();
if (lastCheckStamp && now - lastCheckStamp > checkIntervalMs + toleranceMs){
//something code
}
lastCheckStamp = now;
},
checkIntervalMs
);


7. Что такое Server-Sent Events?
8. Опыт работы с постоянным соединением через WebSocket?
9. Что такое Event Loop?
10. Что происходит при вводе адреса в адресной строке и нажатии Enter?
11. Что такое чистая функция?

#interview
2025/04/13 16:18:14
Back to Top
HTML Embed Code: