. Как получить стажировку в Яндекс на позицию javascript программиста
Как получить стажировку в Яндекс на позицию javascript программиста

Как получить стажировку в Яндекс на позицию javascript программиста

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

Что представляет из себя позиция

Лучше бы они переименовали позицию на Фронт-енд стажер, так как данная позиция подразумевает не только знание джаваскрипта. И так разберем, что вам нужно знать

Минимум:

  1. Верстка (HTML/CSS)
  2. JS (core + DOM API)

Что прибавит вес вашей кандидатуре:

  1. Опыт разработки на SPA технологиях (React, Angular, Vue, etc.)
  2. Опыт работы со сборщиками и таск раннерами, умение писать свои конфиги (webpack, grunt, gulp)
  3. Опыт работы с npm или yarn
  4. Опыт работы с пре- или пост- процессорами (Sass, Less, Styles, PostCSS)
  5. Умение настраивать окружение и деплоить проект
  6. Знание серверных технологий и опыт разработки на них
  7. БЭМ

Первый список обязательный, хоть там только два пункта, они за собой кроют уйму знаний, даже не старайтесь изучить что-то из “по-сложнее” основательно не подготовившись к этим двум пунктам. Именно они будут тестироваться на technical interview

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

Но я бы выделил изучение БЭМ из этого, он не такой сложный, и думаю польстит им, как разработчикам этой методологии 😃

Этапы рассмотрения вашей кандидатуры

1. Скрининг резюме

Это первая и обязательная часть почти любой подачи на стажировку. Резюме должно быть не более 1-ой страницы, покрывать только основную информацию (Основная личная информация, Образование, Опыт работы, Сторонние проекты). Нет ничего страшного в легком приукрашивании, но нужно знать когда остановиться. Если вы пару раз пробовали Sass, и примерно поняли как он работает, смело пишите в резюме.

2. Тестовое задание

В прошлом было задание на верстку, смею предположить что и в будущем будет так же. Дается задание сверстать небольшой блок, с каким нибудь небольшим функционалом (имеется ввиду блок, как самостоятельная единица веб страницы, это может быть шапкой, подвалом, кнопкой или другой мутью). JS должен быть чистым, без jquery

В моем случае, было задание сверстать такой блок, который к тому же должен реагировать на различные инпуты и тогглы которые идут с ним. Задание не показалось мне сложным, но заняло около 8 часов, некоторые вещи пришлось гуглить.

Верстка ориентирована на мобильные платформы, и плюсом было сделать ее адаптивной относительно ориентации телефона (как на картинке). Центральный кружок реагирует на инпут Value, заполняясь ровно на столько же процентов, на тоггл Animate, при активации кружок начинается крутится вокруг центра, последний тоггл Hide, просто скрывает кружок.

Интерактивность как возможно вы догадались, достигается при помощи магии джаваскрипта (ну и CSS тоже)! Тогллы призваны изменить состояние кружка, по канону БЭМ-а это реализуется с помощью модификаторов, при активации тоггла, на определенный блок или элемент вешается модификатор

Реакция на Value было самым сложным, понадобилось знание как работать с svg в html5, это я подучил на ходу (раньше никогда с svg особо не работал)

Реакция на Animate достигалась при помощи свойства css animate, transform

Hide это обычный visibility: hidden

Стили

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

В конце статьи можете найти ссылку на демку и код

3. Техническое интервью

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

Содержание интервью:

0–30 мин: Интервьюер расспрашивал меня про мой опыт разработок, технологии с которыми я знаком. Пару вопросов которые мне запомнились:

  1. Когда начал заниматься фронтендом. Работаю ли я, и если да, то сколько.
  2. Чем лучше/хуже React по сравнению с другими SPA технологиями
  3. Умею ли я писать свои конфиги для webpack
  4. Умею и люблю ли я настраивать окружение
  5. Что мне нравится в Sass
  6. Какие движки шаблонов я знаю (знал только Pug, JSX, ejs)

Ничего кодить не пришлось, отвечал все устно, я так понял что интервьюер убеждался в правдивости моих слов по тому насколько уверенно и развернуто я отвечал

30–45 мин: Задание и вопросы на верстку. Прямо в скайпе, к частью скайп поддерживает markdown.

  1. Был дан html/css код, и нужно было устно описать как выглядела бы страница, где находились бы элементы.
  2. Способ центрального позиционирования (по горизонтали и вертикали). Было сказано написать css код. Я написал рабочий код, но он сказал что есть еще способ (видимо вопрос именно был про этот способ) через отрицательные марждины
  3. Сверстать небольшую раскладку (content, sidebar), и описаны размеры, позиции:
  • ширина раскладки 70% от вьюпорта, но не меньше 760px;
  • 2 колонки: сайдбар шириной 150px и остальное место под контент;
  • раскладка выровнена по центру экрана.

45–60 мин: JS и DOM API.

  1. Задание навешать event listener на горстку вложенных элементов, и прологить реакцию каждого из них (смотреть в сторону отличий target и currentTarget в методе addEventListener )
  2. Каверзный js
  • typeof null
  • typeof typeof undefined
  • были даны способы как внести элемент в массив, и сказать какой из них аналогичен методу push(0) (ответ: array[array.length]=0 )

Что учить и к чему готовиться

Верстка

  • Умение базовой верстки, знание всех основных тегов и их поведение
  • Основной css
  • Верстка на flex

Git (основы)

  • add, commit, push, pull
  • branching
  • pull requests
  • merging/rebase

Javascript

  • Основы языка (тут будет нужен опыт на js)
  • Как работает Лексическое Окружение
  • Чем отличаются var, let, const
  • Block scope, function scope, замыкания (closure)
  • Контекст функции
  • IIFE (immediately invoked function expressions)
  • Hoisting
  • Строчные операции (string operations)
  • RegExp
  • Прототипное наследование
  • основы чтобы писать простые скрипты (создание файлов, переименовывание, итерация по папка и файлам)

DOM API

  • event listeners (target vs currentTarget)
  • Основные методы для поиска и получения DOM элементов
  • querySelectors
  • Как работает event loop (основа)

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

📎📎📎📎📎📎📎📎📎📎