Заметки Андрея Романова

Пишу о жизни, учёбе и работе

Ctrl + ↑ Later

О состоянии потока

Людвиг Быстроновский в одной из своих лекций сказал, что состояние потока — зло.

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

Возможные последствия этого — стресс, недосып, да и вообще забивание на всё, что не связано с потоком (семья и личная жизнь, правильное питание, здоровье и так далее).

Избежать этих проблем просто: каждой задаче нужно уделять небольшое количество времени, после чего обязательно делать перерыв. Людвиг уделяет каждой задаче не больше 15 минут в день (конечно этого мало, если начинать делать задачу за два дня до дедлайна, но он начинает заранее и занимается задачей каждый день не больше 15 минут).

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

Пока, 2016

Как водится, пора подводить итоги года.

Омск и военкомат

В начале года стартап, в котором я работал, развалился, и я стал искать новую работу в Омске. Меня позвали в местный Сбертех, и их служба безопасности попросила какую-то справку из военкомата. Проблема была в том, что я в военкомате на учёте не стоял и даже не имел приписного удостоверения. Делать нечего, я подготовился и ближе к концу мая пошёл в военкомат вставать на учёт. Это было ошибкой, потому что в то же время мне пришло письмо из Яндекса о том, что я прошёл отбор в ШРИ и меня ждут в июле в Москве. К счастью, мне каким-то непонятным образом удалось решить все дела с военкоматом примерно за месяц, и я освободился до конца июня.

Школа разработки интерфейсов

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

Переезд в Москву

Спустя два месяца учёбы в ШРИ я неожиданно для себя стал ходить по собеседованиям. В итоге я получил несколько оферов и выбрал Рамблер, так как он казался мне наиболее привлекательным из всех. По окончанию ШРИ я уехал в Омск на пару недель, и десятого октября я вышел на работу в Рамблер.

Работа в Авито

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

Какие планы на 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 (назовите все известные вам варианты).


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

Как я попробовал отказаться от лент соцсетей и почему эта затея провалилась

Какое-то время назад я понял, что постоянно лезу в соцсети, чтобы поскроллить ленту и прочесть новые записи. Всё бы ничего, но это отнимало слишком много времени (в том числе рабочего). Мне это надоело, и я сгоряча решил поступить радикально: полностью отказаться от чтения новостных лент.

Первые несколько дней у меня это почти получалось: я машинально открывал ленту и на второй-третьей записи вспоминал, что я запретил себе делать это. Мне удалось повысить продуктивность и использовать освобождённое время с пользой: я снова взялся за чтение книг, которые постоянно откладывал на потом.

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

Мой основной жизненный принцип (о нём я, возможно, как-нибудь расскажу отдельно) — избавляться от всего лишнего. В рамках соцсетей он работает так: если я вдруг вижу в ленте что-то, никак не связанное с моими интересами, я это удаляю из ленты навсегда. Есть небольшая тонкость: публикация может быть вроде бы и интересной, но пользы она никакой не несёт (например, юмор или какие-нибудь офигительные истории). Такое тоже нужно удалять несмотря на кажущуюся интересность материала. Такая фильтрация очень сильно сократила количество записей в моей ленте, и если раньше я утром тратил на соцсети около часа, то теперь могу пролистать все записи за 15 минут.

Ну и по возможности я стараюсь читать ленты в пути — заняться в дороге всё равно особо больше нечем.

Скачивание изображений в IE10+

Возникла необходимость реализовать скачивание изображений при клике по ссылке.

К счастью, в спецификации HTML5 появился новый атрибут “download”, указывающий браузеру на то, что ресурс по ссылке следует скачать. К несчастью, этот атрибут не поддерживается в Сафари и IE.

Для IE удалось найти относительно простое альтернативное решение, основанное на блобах:

document.querySelector('a[download]').addEventListener('click', (event) => {
  // следующий код сработает только в IE10+
  if (navigator && navigator.msSaveOrOpenBlob) {
    event.preventDefault();
    const href = event.target.href;
    const xhr = new XMLHttpRequest();

    xhr.open('GET', href, true);
    xhr.responseType = 'blob';

    xhr.onload = () => {
      const filename = href.replace(/^.*\//g, '');
      return navigator.msSaveOrOpenBlob(xhr.response, filename);
    };

    xhr.send();
  }
});
Ctrl + ↓ Earlier