🎙 Личный опыт

Моя первая работа была в аутсорс-аутстафф компании, где я был джуном и получал 25 тысяч рублей в месяц, а работал аутстаффом за 350 тысяч рублей в иностранной компании. Представьте, сколько компания заработала на мне. При этом я справлялся с 80% задач. Если возникали сложности, мой наставник помогал мне, и я как будто сам сдавал задачу. Достаточно отлаженный механизм: один наставник и пять джунов, которые пишут задачи на других проектах, а ты за ними следишь и иногда помогаешь. Джуны получают 25 тысяч, а компания – по 200-300 тысяч за аренду. Все всё понимают и всех всё устраивает, ведь задачи закрываются. Накрутка – это частая практика в компаниях.

📌 На фото моя первая работа

#interview #work

🔝 Задача из Альфа Банк: Сортировка и группировка операций по дате

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

Вилка: 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

👍 Тесты в ботах

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

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

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

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

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

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

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

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

#interview #frontend

Трудоустройство: Финал.

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

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

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

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

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

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

#frontend #interview

👍 Менторство

🖥 Задачи с собеседований по TypeScript

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

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

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

#typescript #livecoding #interview

🎙 Собеседование в 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

💬 Frontend Собеседование с разбором. Browser, JavaScript, TypeScript, React. Групповой мок-формат

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

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

#frontend #interview

🎙 Собеседование в компанию Точка

На позицию 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

🖥 Лайвкодинг в компании 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

👩‍💻 Сложное Frontend Собеседование + Live Coding. Promises, This, Memo, Generics, Solid, HTTP

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

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

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

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

#frontend #interview

👩‍💻 Техническое собеседование в 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