Руслан Куянец | Reactify
5.86K subscribers
697 photos
52 videos
39 files
277 links
Я IT-специалист, ментор и основатель проекта YeaHub и сообщества Reactify. Здесь рассказываю про Frontend и IT.

Менторство:
https://reactify.ru

YouTube канал:
https://youtube.com/@reactify-it

YeaHub:
https://yeahub.ru/

Связь:
@ruslan_kuyanets
Download Telegram
Подготовка к собеседованиям

Два канала для подготовки к собеседованиям. Очень полезно окружить себя теорией.

@frontend_questions - канал разработчиков YeaHub. Вопросы собеседований, тесты и задачи с лайвкодинга

@front_questions - канал коллеги. Проходит собеседования и выкладывает вопросы в свой канал.

#frontend #interview
👍2🔥2🤝1
Собеседование на позицию Мидл, вилка 150к-220к

Как же легко искать работу, когда в резюме есть 3 года опыта и отличная подготовка! Мои ученики сейчас активно ищут работу: проходят скрининги, технические собеседования и лайвкодинг. На данный момент несколько из них находятся на финальных этапах — успешно прошли технические интервью и готовятся к встречам с руководителями и командами. Ожидаем предложения до середины сентября.

Вот список вопросов для собеседования:
- Какие существуют типы данных в JavaScript?
- Что такое hoisting и как он влияет на переменные и функции?
- Каковы основные области видимости в JavaScript?
- В чем заключаются особенности работы с комплексными объектами в JavaScript?
- Какие существуют виды функций в JavaScript и их ключевые особенности?
- Что такое Promise в JavaScript и какие методы он предоставляет для работы с асинхронными операциями?
- Как работает event loop в JavaScript и какое влияние он оказывает на выполнение кода?
- Что такое TypeScript и для чего он используется в разработке?
- Что такое React и какие задачи он помогает решать?
- Как работает virtual DOM в React и как это улучшает производительность приложений?
- Что такое Redux и как он помогает управлять состоянием в приложениях на React?
- Реагируют ли все reducers на dispatch action в Redux?
- Каковы ключевые особенности классов в JavaScript и как они используются?

+ лайвкодинг (разберем позже)

Лето подошло к концу, отпуск завершился, и начинается активный поиск специалистов. Вакансий становится больше, что значительно увеличивает шансы найти подходящую работу.

#frontend #interview
👍21🔥53💯3
🔝 Задача из Альфа Банк: Сортировка и группировка операций по дате

Позиция: Мидл/Мидл+/Сеньор

Вилка: 250к-350к

Опыт в резюме: 4 года

У вас есть массив объектов operations, представляющих операции с датами и суммами. Необходимо:

1. Отсортировать массив операций по датам.
2. Сгруппировать операции по году.
3. Представить результат в виде объекта, где ключи — это годы, а значения — массивы строк с датами в формате MM-DD, отсортированные по возрастанию.

Пример ожидаемого результата:

const result = {
"2017": [
"01-31",
"03-31",
"05-31",
"07-31",
"08-22",
"09-30",
"12-31"
],
"2018": [
"02-28",
"03-31",
"04-14",
"07-31",
"11-30"
]
};


Стартовый код:

const operations = [
{ "date": "2017-07-31", "amount": "5422" },
{ "date": "2017-03-31", "amount": "5220" },
{ "date": "2017-05-31", "amount": "5365" },
{ "date": "2017-08-22", "amount": "5451" },
{ "date": "2017-09-30", "amount": "5303" },
{ "date": "2017-01-31", "amount": "5545" },
{ "date": "2018-07-31", "amount": "5589" },
{ "date": "2018-11-30", "amount": "5567" },
{ "date": "2017-12-31", "amount": "5597" },
{ "date": "2018-03-31", "amount": "5359" },
{ "date": "2018-02-28", "amount": "5082" },
{ "date": "2018-04-14", "amount": "2567" }
];

function sortOperations(operations) {
// Ваша реализация здесь
}


#frontend #interview
Please open Telegram to view this post
VIEW IN TELEGRAM
👍14🔥32🤝2
👍 Тесты в ботах

В последнее время всё чаще компании просят пройти тестирование в ботах Telegram перед встречей. Это позволяет им предварительно оценить ваши знания и навыки. Вот примеры вопросов, которые могут встретиться в таких тестах:

Для того, чтобы совместить две части функционала, которые не планировали совмещать ранее, придётся реализовать паттерн?
- Decorator
- Adapter
- Facade
- Abstract Factory
- Executor

Как можно определить, что при загрузке страницы DOM построен?
- DOMContentLoaded
- DomLoaded
- onLoad
- onDomLoad

Можно ли передать query параметры в POST запросе?
- Да
- Нет
- Да, если не переданы в body
- Нет, если не переданы body

Имеет ли стрелочная функция свой контекст?
- Нет
- Да
- Да, если класс
- Нет, если класс

Произойдёт ли ошибка при использовании функции до (Function Declaration) её объявления?
- Нет
- Да
- Да, если класс
- Нет, если класс

Какой из данных паттернов относится к порождающим?
- Factory
- Mediator
- Command
- Adapter

Ваше мнение по поводу таких тестов?

#interview #frontend
Please open Telegram to view this post
VIEW IN TELEGRAM
👍93🔥1💯1
Трудоустройство: Финал.

Как я уже говорил, технические собеседования, кроме лайвкодинга, не вызывают трудностей у кандидатов, которые приукрашивают свой опыт. Но им становится сложно, когда речь заходит о проектах и процессах, которых не было. Кандидатов легко поймать на неуверенности, когда они говорят о разработке, которой не занимались. Это особенно заметно на финальных стадиях собеседования, когда происходит встреча с командой — руководителем, тимлидом или другими участниками. Они могут задавать вопросы о реальных проектах, процессах, ошибках и проблемах, с которыми вы сталкивались. Вопросы вроде "Какие баги прилетали от тестировщиков?" или "Во сколько были дейлики?" часто вводят таких кандидатов в ступор. Придумать ответы на ходу — непростая задача, и это становится заметно.

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

Чтобы улучшить свои ответы на собеседованиях, ученики после прохождения скринингов присылают записи в наш менторский чат. Мы вместе оцениваем их ответы, корректируем и делаем разбор. Так отрабатываются вопросы по любым компаниям: Сбер, МТС, Газпром, Яндекс, Вайлдберис. Всё проходит гладко, если в вашем опыте действительно были те процессы, о которых вы говорите.

За 2-3 месяца обучения ученики проходят большой путь: учатся решать задачи самостоятельно и знакомятся с процессами разработки. Это долго, но зато они становятся специалистами, которые могут конкурировать даже с мидлами. Такой опыт позволяет претендовать на зарплату от 200к+.

Главное — не выдумывать опыт из ничего. Если у вас нет коммерческих проектов, хотя бы создайте пет-проект и поработайте с функциональностью, которую указываете в резюме. Это сделает собеседования намного проще, когда вы говорите о реальных вещах, а не придумываете их на ходу. Сейчас учиться и получать опыт проще, чем когда-либо, и если у вас есть реальный опыт и понимание процессов, двери в любую компанию будут открыты.

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

#frontend #interview

👍 Менторство
Please open Telegram to view this post
VIEW IN TELEGRAM
👍64🔥4
Вопросы с собеседования в Авито

Позиция: Мидл/Мидл+

Вопросы:

1. Типы данных в js перечислить.
2. В чём отличие объекта от массива?
3. Как проверить, что объект является массивом?
4. В чём отличие var, let, const?
5. Как с помощью нативного js сделать выполнение кода при клике на кнопку?
6. Какие ещё способы назначить обработчик, кроме addEventListener?
7. Фазы жизненного цикла события.
8. Что такое Ивент таргет и каррент таргет?
9. Кнопка, внутри спан, навесили листенер на кнопку, кликнули на спан. Что будет таргет, а что каррент таргет?
10. Как отменить всплытие события?
11. Как найти все элементы на странице? И что передать в селектор?
12. Как отцентртровать блочный элемент в CSS?
13. Какие CSS свойства влияют на размеры блочного элемента?
14. Что такое Корс? Зачем он нужен? Где Корс передаётся на фронт?
15. Как браузер понимает, что можно выполнять запрос или нет? По каким атрибутам запроса понимает?
16. Что такое куки? Где хранятся? Можем ли мы куки добавить через фронт? Можем ли создать куку на клиенте?

Вроде ничего сверхсложного. Кто бы смог ответить на всё это? Попасть на собеседование реально, достаточно иметь три года опыта в резюме.

А вас часто приглашают на собеседования?

#interview #work #frontend
👍13🔥64💯2
🆕 Что РЕАЛЬНО надо знать Frontend Разработчику для трудоустройства

Сегодня требования к фронтенд-разработчикам значительно возросли. Откликаться на вакансии, зная только один React — бессмысленно. Вероятность получить работу при таком наборе навыков стремится к нулю. Я даже не говорю о тех, кто, освоив лишь только JavaScript, уже отправляет резюме на позиции фронтенд-разработчика, хотя там требуются фреймворки, и другие технологии.

Меня поражает, когда из 800 откликов на вакансию, более 600 — это резюме с минимальными навыками вроде HTML, CSS и базового JavaScript. Это не серьезный подход. Лучше потратить еще немного времени на изучение необходимых технологий и откликаться, когда вы действительно готовы. Идеально, если перед этим вы поработаете пару месяцев с полным стеком: React, Redux Toolkit, RTK Query, TypeScript. Напишите многостраничное приложение, выполняющее запросы к API.

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

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

На освоение всего пути с нуля уходит от 5 до 8 месяцев, в зависимости от вашего свободного времени и скорости обучения. Вот примерный план:

1️⃣ месяц на верстку,
2️⃣ месяца на изучение JavaScript,
1️⃣ месяц на React,
Затем 2 месяца практики: работа с React, Redux, TypeScript и JavaScript. Пишем приложения, углубляемся в теорию, закрываем пробелы в знаниях и активно готовимся к собеседованиям.

Это рассчитано на среднего человека с нормальными навыками обучения и возможностью уделять 2-3 часа в день плюс немного больше в выходные. Без фанатизма, но с регулярностью. За 5-6 месяцев можно научиться разрабатывать полноценные приложения с полным стеком. Далее идет подготовка к собеседованиям (примерно 1 месяц) и 1-2 месяца поиска работы параллельно с продолжением практики.

Это реальный сценарий. Главное — иметь четкий план обучения, список заданий и тем, которые нужно освоить. Плюс, желательно, ментор или сообщество для вопросов и поддержки.


📌 Итак, ключевые моменты:

✔️ Ты знаешь технологии, которые требуются для вакансии: React, TypeScript, Redux Toolkit, RTK Query.
✔️ Ты можешь самостоятельно разработать проект по ТЗ, используя эти технологии (с гуглением, но без копирования чужого кода).
✔️ Ты интересуешься продвинутыми темами: браузер под капотом, архитектура приложений, сборщики, тестирование и т.д.
✔️ Ты уверенно решаешь базовые задачи по лайвкодингу и знаешь теорию.
✔️ Ты грамотно составил резюме и подготовил самопрезентацию.

#frontend #work #interview
Please open Telegram to view this post
VIEW IN TELEGRAM
👍165🔥5
Компания: Ашан

Позиция: Middle

Вилка: От 260к

Вопросы:
Что такое SEO и какие основные факторы влияют на его эффективность?
Какие метатеги вы используете для оптимизации страниц и для чего они служат?
Как правильно настроить метатеги для улучшения видимости сайта в поисковых системах?
Что такое доступность веб-контента и почему она важна?
Как используются атрибуты ARIA для улучшения доступности веб-приложений?
Какие инструменты и методы вы применяете для обеспечения совместимости с экранными читалками?
Что такое семантическая разметка и как она влияет на доступность?
Как и когда использовать атрибут alt для изображений?
Какие технологии верстки вы используете в своих проектах?
Используете ли вы CSS-препроцессоры? Если да, то какие и почему?
Что такое SCSS и какие преимущества он предоставляет по сравнению с обычным CSS?
Что такое миксины в SCSS и для чего они используются?
Как использование миксинов влияет на общий объем CSS и как вы справляетесь с увеличением кода?
Как вы реализуете трехколоночную сетку с использованием CSS Grid?
Как обеспечить перенос колонок при уменьшении ширины контейнера без использования медиазапросов, используя auto-fit или auto-fill?
Что делать, если необходимо динамически менять количество колонок через пропсы в компоненте? Какие подходы вы используете (например, inline-стили, классы, переменные)?
Объясните, как работает Event Loop в JavaScript.
Какие способы клонирования объектов вы знаете и чем они отличаются?
Какую структуру данных вы бы выбрали для сохранения порядка элементов и почему?
Что такое WeakSet и WeakMap? В каких случаях их стоит использовать?
Чем отличаются MutationObserver и IntersectionObserver? В каких сценариях применяются каждый из них?
Что такое Proxy и Reflection в JavaScript? Приведите примеры их использования.
Какие типы хранилищ существуют в браузере (например, LocalStorage, SessionStorage, IndexedDB)? В чем их основные отличия и области применения?
Что такое CORS и как он работает? Как вы решаете проблемы, связанные с CORS в ваших проектах?
Какие хуки существуют в React и для чего они используются?
Расскажите подробнее о хуке useEffect. В чем разница между useEffect и useLayoutEffect?
В чем отличие между хуками useReducer и useState? Когда стоит использовать каждый из них?
Для чего используются хуки useMemo и useCallback? Как они помогают оптимизировать производительность?
Как вы оптимизируете работу с большими списками данных в приложении? Что такое виртуализация списка и как она реализуется?
Какие подходы вы используете для переопределения типов из библиотек в TypeScript (например, использование as never as SomeType)?
Какие виды тестов существуют в разработке (юнит-тесты, интеграционные, e2e и т.д.)? Какой подход вы предпочитаете и почему?
Какие методы вы используете для улучшения производительности веб-сайтов?
Какие метрики производительности вы отслеживаете и как используете инструменты типа Lighthouse для их анализа и оптимизации?

А говорите, что не спрашивают базовые вопросы. В Ашан, кстати, нет этапа лайводинга. Скрининг -> Тех Собес -> Финал с Руководителем


#work #interview #frontend
Please open Telegram to view this post
VIEW IN TELEGRAM
👍125🔥3
Forwarded from YeaHub
5 вопросов к разработчику, который накрутил опыт и устроился в IT

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

1. Что побудило вас накрутить опыт? Считаете ли вы это оправданным шагом, и как вы оцениваете его последствия для себя и рынка IT?
Я решительно хотел устроиться программистом в ограниченные сроки, обучение с ментором с проработкой легенды и доведением до трудоустройства для меня выглядело как более надёжный вариант. Сейчас со своими задачами на работе справляюсь, так что в целом мой работодатель получил для себя рабочее звено, которое ему требовалось. Но всё же без навыков просто через накрутку в моей компании работать бы не получилось, я работаю среди коллег с действительным сильным опытом. Толковым ребятам накрутка позволяет преодолеть некоторый воздушный барьер и занять позицию, где будет комфортно и им от хорошой зп и условий, и работодатель будет в целом доволен своим сотрудником. Но правда, что накрученные и при этом слабообученные и недостаточно компетентные специалисты идут бизнесу в минус, ухудшают рабочие процессы.


2. Какие трудности возникли во время накрутки? Было ли что-то, что вас особенно удивило или оказалось сложнее, чем ожидалось?
Было сложно от себя продумывать легенду, хотя на деле хватало небольшого базового рассказа на 2 минуты. Изучение технических вопросов собеседований в целом было самым лёгким этапом, хотя порой попадались вопросы, которые не затрагивал, или которые уже слышал, но подзабыл и перед собеседованием не повторил, или в каких-то вопросах немного не хватало детальности, но в целом вопросы - самое лёгкое. А вот задач собеседований много разных и можно наткнуться на ту, которую ты просто не знаешь или не знаешь какой-то трюк небольшой, хотя, прорешав достаточный набор разных, в целом можешь справиться или хотя бы просто показать своё мышление.


3. Какие инструменты и подходы вы использовали для создания правдоподобной легенды? Как убедились, что она выглядит достоверно?
Легенду отрабатывал вместе с ментором на тренировочных собеседованиях, также смотрел записи других собеседований и брал какие-то моменты оттуда. При выходе на рынок по сути уже на опыте тренировалась легенда даже на каких-то незначительных собеседованиях и после чувствовал себя более уверенно.


4. Как проходила подготовка к собеседованиям? Какие стратегии вы использовали, чтобы успешно пройти интервью?
Вёл конспект с задачами, где записывал просто пустой скелет задачи с пустой функцией и консоль логом для результата, потом по памяти проходился к такому списку и смотрел, что помню, а что нет, повторял те задачи, которые не помнил. Прогонял в голове вопросы собесов и легенду, вопросы собесов выучивал на созвонах в сообществе ментора, смотрел записи чужих собеседований.


5. Удалось ли устроиться? Насколько сложной оказалась работа на новом месте, и с какими трудностями вы сталкиваетесь в реальных задачах?
Устроился и работаю, справляюсь с задачами, первые 2 недели привыкал ко всему новому, потом стало гораздо спокойнее и стал просто работать размеренно. Даже за первые несколько рабочих недель прокачался значительно, привык выполнять ТЗ в большом проекте. Мне сильно помогли навыки, которые я приобрёл во время обучения у своего ментора так, что придя на работу я с первой же недели вклинился в проект и начал в нём выполнять задачи. Сейчас ещё просто хочется поскорее ещё понабраться опыта и поработать с разными рабочими задачами для большей уверенности. В целом задачи бывают разные, но решаемые, со временем приходит какое-то решение.


#interview
Please open Telegram to view this post
VIEW IN TELEGRAM
🔥9👍73
Компания: Промсвязьбанк

Позиция: Мидл+

Вилка: 250к-300к

Задачи:
1. На вход дается массив чисел и число-сумма. Нужно вернуть true/false в зависимости от того, есть ли в массиве два числа, которые в сумме дают это число. Нужно решить со сложностью O(n)

2. На вход дается массив кортежей. В каждом кортеже два числа: время подключения пользователя к трансляции и время, когда он отключился. Нужно найти максимальное количество единовременных пользователей.

3. В каком порядке выведутся консоль логи. Измениться ли порядок, если мы вызовем клик по кнопке с помощью button.click()

const container = document.querySelector('#grayContainerOne')
const button = document.querySelector('#buttonOne')

button.addEventListener('click', () => {
Promise.resolve()
.then(() => console.log('STEP 1'))

console.log('STEP 2')
})

container.addEventListener('click', () => {
console.log('STEP 3')
})


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

#interview
🔥12👍6💯1
🖥 Задачи с собеседований по TypeScript

Напиши нативный Pick<>
Напиши нативный Omit<>
Напишите кастомный Partial<Type>
Напишите кастомный Record<Keys, Type>

🔗 Сборник заданий по TypeScript

🔗 Платформа для решения задач

#typescript #livecoding #interview
Please open Telegram to view this post
VIEW IN TELEGRAM
👍94🔥3
🎙 Собеседование в 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
🔥21👍75🫡2😁1
💬 Frontend Собеседование с разбором. Browser, JavaScript, TypeScript, React. Групповой мок-формат

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

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

#frontend #interview
Please open Telegram to view this post
VIEW IN TELEGRAM
👍23🔥64
🎙 Собеседование в компанию Точка

На позицию 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
👍19🔥83
🖥 Лайвкодинг в компании 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
🔥19👍21🤝1
💬 Как работает HR в условиях текущего рынка?

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

Почему так происходит? Давайте разберёмся в логике HR-специалистов.

💡 Как HR отбирает кандидатов?

1. Первичная фильтрация: жёсткие критерии
На одну вакансию может прийти 1000+ откликов. В первую очередь HR задаёт максимально строгие фильтры, чтобы отсеять 90% кандидатов. Например:

- Город (только Москва/СПб, без релокации)
- Возраст (часто 25–35 лет, особенно для middle/senior)
- Опыт работы (не «от 3 лет», а «ровно 5+»)
- Уровень английского (B2+ даже там, где он реально не нужен)

После такой фильтрации остаётся 10–20 «идеальных» кандидатов. Их проверяют в первую очередь – зачем смотреть остальных, если среди этих уже может быть подходящий?

2. Постепенное расширение поиска: партийный отбор
Если среди топ-кандидатов никто не подошёл, HR ослабляет критерии, но не сразу. Например:
- Берут тех, кто соответствует 6–8 из 10 пунктов (например, опыт 4 года вместо 5, или английский B1 вместо B2).
- Приглашают партиями по 5–10 человек – если вакансия закроется на первых же кандидатах, остальных даже не увидят.

Проблема: пока HR дойдёт до вашего резюме (особенно если вы «середнячок»), вакансия может уже закрыться.


3. Влияние алгоритмов: «Лучший кандидат» и случайность
Платформы вроде HeadHunter используют автоматическую сортировку (например, функцию «Лучший кандидат»). Но алгоритмы работают неидеально:
- Они не понимают контекст (например, могут продвинуть резюме с кучей ключевых слов, но без реального опыта).
- HR часто доверяет этой сортировке и зовёт первых 5–10 из списка, не проверяя остальных.

Отсюда эффект рандома – иногда на скрининг попадает не самый подходящий, а просто тот, кого алгоритм поставил выше.


⚡️ Что это значит для вас?

- Даже маленький «недожёг» в резюме (например, 4 года опыта вместо 5) может отбросить вас во вторую/третью очередь.
- Важно попасть в топ выдачи (через ключевые слова, обновления резюме и т. д.).
- Скорость отклика критична – чем раньше, тем выше шанс попасть в первую партию.
- Алгоритмы несправедливы – иногда нужно «обходить» их вручную (писать HR напрямую, искать рефералов и т. д.).

Вывод: в текущих условиях пассивный поиск почти не работает. Нужна агрессивная стратегия – оптимизация резюме под алгоритмы, быстрые отклики и прямое взаимодействие с рекрутерами.


А как у вас дела? Получается ли находить работу? Делитесь лайфхаками!

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

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

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

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

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

#frontend #interview
Please open Telegram to view this post
VIEW IN TELEGRAM
👍27🔥73
🐝 Собеседование в компании Билайн

Позиция 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
👍29🔥65
👩‍💻 Техническое собеседование в VK на проект Mail

На собеседованиях в VK всегда интересные и достаточно сложные этапы. Дают алгоритмические задачи, глубоко спрашивают про опыт, задают много теоретических вопросов. Также часто встречаются вопросы на рассуждение — например, как бы вы поступили в той или иной ситуации.

Вопросы:
- Что делают preventDefault и stopPropagation?
- Как работают call, apply и bind? В чем их разница?
- В чем разница между arrow function и function declaration?
- Как ускорить алгоритмическую сложность кода?
- Как ускорить работу функции?
- Как удалить или вставить произвольные элементы из массива?
- Как перехватывать JavaScript-ошибки на странице?
- В чем разница между throw 'message' и throw new Error('message')?
- Чем можно заменить position: sticky, если бы его не существовало?
- Для чего нужен Service Worker?
- Как отменить fetch-запрос?
- Как получать данные в реальном времени?
- Зачем нужен Virtual DOM?
- Зачем нужны State Manager и Контекст? Почему нельзя просто использовать переменные?

Ответы на вопросы тут

#frontend #interview
Please open Telegram to view this post
VIEW IN TELEGRAM
1👍24🔥76🤔1