2 posts tagged

фронтенд

Чему учиться в 20** году, если вы — фронтенд-разработчик

  1. Изучайте разные парадигмы программирования (императивное, функциональное, логическое, автоматное программирование). Не нужно следовать только одной парадигме — каждая из них может оказаться полезной в зависимости от задачи.
  2. Научитесь писать (и пишите!) тесты. Автоматическое тестирование:
    — намного дешевле ручного;
    — помогает выявлять баги ещё на этапе разработки;
    — вселяет в вас уверенность в своём коде;
    — поможет вам убедиться, что вы ничего не сломали очередным рефакторингом.
  3. Не изучайте новые фреймворки и библиотеки; изучайте подходы, лежащие в их основе.
  4. Изучайте структуры данных и связанные с ними алгоритмы: списки, графы (в частности деревья), битовые карты, хеш-таблицы. Это расширит ваш кругозор и вы станете видеть более эффективные и простые способы решения ежедневных задач.
  5. Учитесь думать о задачах в мире бизнеса, а не в мире разработки. Помните о том, что программистам платят за решение задач бизнеса, а не за количество написанных строчек кода. Думайте о бизнесе, прежде чем переписывать проект с нуля на очередном модном фреймворке. Думайте о бизнесе, когда нужно определиться со списком поддерживаемых браузеров — если клиенты бизнеса пользуются IE8, ваша работа поддержать его, а не выводить надпись «Ваш браузер устарел, обновитесь!!!».

Универсальный совет — изучайте фундаментальные, проверенные временем подходы и приёмы, а не меняющиеся каждые n месяцев инструменты.

2017   учёба   фронтенд

Поиск работы фронтендером в 2016 году

Этой осенью я искал новую работу. Собеседовался в четырёх компаниях: в Иннове, Тинькофф Банке , Нетологии и Рамблере. Ну и напоследок успел пообщаться с ребятами из Яндекса. В этой заметке расскажу о своих впечатлениях и приведу все запомнившиеся задачи с собеседований.

Иннова

В Иннове я работал удалённо последние 10 месяцев. С компанией общался насчёт перехода с удалёнки в офис. Мне сразу сказали, что нужно будет пройти серию интервью с разными сотрудниками. В итоге я пообщался с тимлидом Фогеймера (это проект, над которым я работал в Иннове), с эйчаром и с кем-то из руководства (так и не понял, с кем).

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

+ крутые проекты и интересные задачи (по собственному опыту);
+ обучение английскому языку за счёт компании;
+ классный офис с летней верандой, располагается на Таганской: http://map.inn.ru/

– длинный процесс найма.

Нетология

Пожалуй, наиболее приятные впечатления остались от Нетологии. Первое собеседование было с двумя штатными фронтендерами и с руководителем отдела разработки. Ребята (фронтендеры) поспрашивали меня минут десять, а затем мы полчаса просто непринуждённо общались на тему технологий и разработки. Затем пришёл руководитель отдела, с которым мы отдельно поговорили о моём опыте и о Нетологии. После первой встречи мне дали тестовое задание. Суть задания — сделать на Реакте и Редаксе редактируемый список сотрудников. Я не стал заморачиваться с вёрсткой и сделал только логику, сопроводив это рассказом о моём прошлом опыте вёрстки и ссылками на выполненные работы. После выполнения тестового задания посетил ещё две встречи — одну с продуктологом, другую с одним из основателей Нетологии.

+ чуваки улучшают российское онлайн-образование;
+ офис на Тульской (одна станция до кольца);

– нет ДМС;
– длинный процесс найма;
– на время испытательного срока понижают оклад.

Тинькофф Банк

Довольно прогрессивный банк, делающий ставку на онлайн-продукты. Было одно техническое собеседование, но с большим количеством вопросов на знание JS. По вёрстке почти ничего не спрашивали, по штукам вроде Реакта тоже. После собеседования попросили прислать анкету для проверки меня службой безопасности банка. Работа в банке выглядит заманчиво, но есть пара нюансов. По некоторым данным, в банке с отделом фронтенда всё не очень хорошо (в плане менеджмента). Ну и говорят, что довольно большую часть работы банк отдаёт на аутсорс.

+ корпоративный фитнес-центр;
+ большой отдел разработки, есть у кого учиться;
+ хорошая зарплата;
+ короткий процесс найма;

– офис на Водном Стадионе, что не очень близко к центру;
– часть работы отдают на аутсорс.

Рамблер

Раньше я видел список вакансий компании, но мне казалось, что я до их уровня ещё не дорос. Довольно неожиданно мне написали оттуда с предложением пообщаться о работе. Была одна встреча, с двумя эйчарами и одним разработчиком. Сперва эйчары попросили рассказать меня о своём опыте (куда без этого), затем разработчик давал разные задачи. Затем мне вкратце рассказали о компании и о том, чем нужно будет заниматься. В компании сейчас активно используется Реакт, вроде как делается своя библиотека компонентов, ну и в целом развивается инфраструктура.

+ довольно большая компания с большим количеством сотрудников и разных проектов;
+ офис на Тульской;
+ корпоративный английский;
+ бесплатные завтраки для сотрудников (по непроверенным данным);
+ короткий процесс найма.

– не все команды занимаются интересными задачами, где-то довольно жёсткие сроки;

Яндекс

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

+ крупная и известная компания;
+ серьёзные высоконагруженные проекты;
+ командировки в разные города;
+ n-ая сумма денег на бейджике для оплаты еды в близлежащих заведениях;

– высокий порог вхождения из-за БЭМ-стека.

Задания

Что выведется в консоль? Как добиться правильного вывода в консоль, не убирая setTimeout?

for (var i = 0; i < 10; i++) {
  setTimeout(function () {
    console.log(i); // ?
  }, 0);
}


Что выведется в консоль?

var a = b = {
  value: 1,
};

var b = {
  value: 2,
};

a.value = 3;

console.log(a.value); // ?
console.log(b.value); // ?


Что выведется в консоль?

var a = {
  v: 1,
};

var b = {
  v: 2,
};

function logValue() {
  console.log(this.v);
}

logValue.bind(a).bind(b)(); // ?


Что такое call, apply, bind, зачем они нужны.


Напишите полифил функции bind.


Дан массив целых чисел, найдите наибольшее из них.


Даны два массива целых чисел, найдите общие элементы.


Напишите функцию, принимающую на вход строку и проверяющую, является ли эта строка палиндромом. Приведите несколько вариантов решения.


Напишите функцию, принимающую массив произвольных слов и на выходе дающую двумерный массив анаграмм:

['стол', 'барокко', слот', 'кот', 'кошка', 'ток', 'коробка']
// ->
[
  ['стол', 'слот'],
  ['кот', 'ток'],
  ['барокко', 'коробка'],
]


Есть два класса: принтер с методом print() и сканер с методом scan(). Нужно получить класс МФУ, имеющий оба этих метода.


Напишите функцию, принимающую на вход время (в любом формате) и возвращающую угол между стрелками аналоговых часов.


Дано поле морского боя с размеченными на нём кораблями. Спроектируйте решение для подсчёта количества кораблей на этом поле.


Напишите функцию для сложения чисел, поддерживающую неограниченное количество вызовов:

sum(2)(3)(); // -> 5
sum(1)(2)(3)(4)(); // -> 10


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

[1, [2, [3, 4], 5], 6, [7]]
// ->
[1, 2, 3, 4, 5, 6, 7]


Чем поведение скрипта с атрибутом defer отличается от async?


Есть массив с адресами картинок. Как загрузить все картинки и выполнить какую-либо операцию после окончания загрузки всех картинок?


Дан односвязный список. Напишите функцию, которая вернёт значение n-ого с конца списка элемента.

{
  value: 0,
  next: {
    value: 5,
    next: {
      value: 2,
      next: null,
    },
  },
};


Расскажите всё, что вы знаете о событиях в JS.


В соцсети выложили фото котят, под ним динамически добавляются комментарии. У каждого комментария есть кнопка «лайк», при нажатии на которую нужно отправлять запрос к АПИ. Как эффективно реализовать сценарий с нажатием кнопки?


Как расположить элемент по центру экрана с помощью CSS (назовите все известные вам варианты).


Опишите процесс отрисовки страницы браузером.

2016   работа   собеседование   фронтенд