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

💬 Как работает 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

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

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

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

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

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

#frontend #interview

🥇 Что делать кандидату? Стратегия прорыва в условиях жесткого рынка

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

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

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

3. Альтернативные способы выхода на компанию
- Ищите вакансии на сайтах компаний — иногда их публикуют там раньше, чем на агрегаторах.
- Telegram-каналы, чаты по поиску работы — некоторые вакансии не доходят до HH.
- Митапы и конференции — нетворкинг до сих пор один из самых сильных инструментов.
- Изучите LinkedIn — это ещё одна возможность быть замеченным.
- Пишите не только HR, но и текущим работникам компании (можно найти в чатах и попросить зарефералить).

👩‍💻 Инжектирование эндпоинтов в RTK Query и организация API в отдельных файлах

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

Организация базового API

Рекомендуется создать отдельный файл для базового API, который будет содержать общие настройки, такие как baseQuery, reducerPath и другие параметры, а также общие эндпоинты.

// baseApi.js
import { createApi, fetchBaseQuery } from '@reduxjs/toolkit/query/react';

const baseApi = createApi({
  reducerPath: 'baseApi',
  baseQuery: fetchBaseQuery({ baseUrl: '/api' }),
  tagTypes: ['User', 'Post'], // Определяем типы тегов для инвалидации кэша
});

export default baseApi;

Создание эндпоинтов для различных сущностей

Теперь вы можете создать отдельные файлы для каждой сущности, добавляя в них необходимые эндпоинты и используя базовый API.

// userApi.js
import baseApi from './baseApi';

// injectEndpoints автоматически добавит эндпоинты к baseApi
const userApi = baseApi.injectEndpoints({
  endpoints: (builder) => ({
    fetchUsers: builder.query({
      query: () => 'users',
      providesTags: ['User'], // Указываем, что этот запрос использует тег 'User'
    }),
    addUser: builder.mutation({
      query: (newUser) => ({
        url: 'users',
        method: 'POST',
        body: newUser,
      }),
      invalidatesTags: ['User'], // Инвалидируем кэш для 'User'
    }),
  }),
  overrideExisting: false, // Не переопределяем существующие эндпоинты
});

export const { useFetchUsersQuery, useAddUserMutation } = userApi;
export default userApi;

Пример эндпоинтов для постов

// postApi.js
import baseApi from './baseApi';

// injectEndpoints автоматически добавит эндпоинты к baseApi
const postApi = baseApi.injectEndpoints({
  endpoints: (builder) => ({
    fetchPosts: builder.query({
      query: () => 'posts',
      providesTags: ['Post'], // Указываем, что этот запрос использует тег 'Post'
    }),
    addPost: builder.mutation({
      query: (newPost) => ({
        url: 'posts',
        method: 'POST',
        body: newPost,
      }),
      invalidatesTags: ['Post'], // Инвалидируем кэш для 'Post'
    }),
  }),
  overrideExisting: false, // Не переопределяем существующие эндпоинты
});

export const { useFetchPostsQuery, useAddPostMutation } = postApi;
export default postApi;

Инжектирование эндпоинтов в RTK Query позволяет вам создавать гибкую и масштабируемую архитектуру для работы с несколькими сущностями. Разделение логики API на отдельные файлы помогает поддерживать чистоту и порядок в коде, а использование базового API упрощает добавление новых эндпоинтов. Такой подход способствует улучшению читаемости и поддерживаемости вашего приложения.

🎤 Задание с лайвкодинга в Авито

Проанализируйте код и определите, что будет выведено в консоли.

(function () {
    function modifyItemData(price, platform) {
        price.rub = 5000;
        platform = 'iOS';
        isModified = true;

        function printItemData() {
             console.log(price); // ?
             console.log(platform); // ?
             console.log(isModified); // ?
        }

        return printItemData;
    }

    let price = { rub: 3500 };
    let platform = 'Android';
    let isModified = false;

    const printItemData = modifyItemData(price, platform, isModified);

    console.log(price); // ?
    console.log(platform); // ?
    console.log(isModified); // ?

    price = { usd: 100 };
    platform = 'Web';
    isModified = null;

    printItemData();
})();

Вопросы:

1. Почему price изменяется, а platform — нет?
2. Как работает область видимости переменной `isModified`?

#собеседование #лайвкодинг