Офер в Яндекс для опытных фронтендеров за два дня

24–25 августа приглашаем фронтендеров с опытом работы от четырёх лет получить офер в Яндекс через multitrack за 2 дня. Достаточно решить задачи онлайн до 20 августа и пройти несколько технических секций 24 августа, чтобы уже 25-го получить офер и выбрать три команды, к которым вам было бы интересно присоединиться.

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

Узнать подробности и зарегистрироваться.

Реклама. ООО "Яндекс". ИНН 7736207543

Самая сложная часть собеседования

👉 @frontendInterview

Что такое Компонент высшего порядка (Higher-Order Component, HOC)?

Говоря просто, компонент высшего порядка — это функция, которая принимает компонент и возвращает новый компонент. HOC часто встречаются в сторонних библиотеках, например connect в Redux и createFragmentContainer в Relay.

const EnhancedComponent = higherOrderComponent(WrappedComponent);

Давайте реализуем функцию withSubscription — она будет создавать компоненты и подписывать их на обновления DataSource (наподобие CommentList и BlogPost). Функция будет принимать оборачиваемый компонент и через пропсы передавать ему новые данные:

const CommentListWithSubscription = withSubscription(
  CommentList,
  (DataSource) => DataSource.getComments()
);

const BlogPostWithSubscription = withSubscription(
  BlogPost,
  (DataSource, props) => DataSource.getBlogPost(props.id)
);

Первый параметр — это оборачиваемый компонент. Второй — функция, которая извлекает нужные нам данные, она получает DataSource и текущие пропсы.

Заметьте, что HOC ничего не меняет и не наследует поведение оборачиваемого компонента, вместо этого HOC оборачивает оригинальный компонент в контейнер посредством композиции. HOC является чистой функцией без побочных эффектов. Вот и всё! Оборачиваемый компонент получает все пропсы, переданные контейнеру, а также проп data. Для HOC не важно, как будут использоваться данные, а оборачиваемому компоненту не важно, откуда они берутся.

👉 @frontendInterview

Как устроен JavaScript

Большинство языков программирования выросли из древней парадигмы, порожденной еще во времена Фортрана. Гуру Javascript — Дуглас Крокфорд — выкорчевывает эти засохшие корни, позволяя нам задуматься над будущим программирования, перейдя на новый уровень понимания требований к Следующему Языку (The Next Language). Автор начинает с основ: имен, чисел, логических значений, символов и другой базовой информации. Вы узнаете не только о проблемах и трудностях работы с типами в JavaScript, но и о том как их можно обойти. Затем вы приступите к знакомству со структурами данных и функции, чтобы разобраться с механизмами, лежащими в их основе, и научитесь использовать функции высшего порядка и объектно-ориентированный стиль программирования без классов.

👉 @frontendInterview

Fix My Phone Numbers!

Номер телефона должен состоять из 11 цифр и всегда начинаться с 0.
Вам дана строка, где в номер телефона подмешаны различные символы. Очистите строку от лишних символов и верните номер.

👉 @frontendInterview

undefined и null

В JavaScript есть два отдельных типа для представления ничего.

Тип undefined
Это тип с единственным возможным значением: undefined.

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

Несколько случаев, когда возвращается undefined:
- При попытке доступа к глобальной переменной undefined (если она не изменена).
- Неявный возврат из функции при отсутствии в ней оператора return.
- Из операторов return, которые ничего не возвращают.
- В результате поиска несуществующего свойства у объекта (и доступа к нему).
- Параметры, которые не были переданы в функцию явно.
- При доступе ко всему, чьим значением является undefined.

Обработка изменений значения undefined
Поскольку глобальная переменная undefined содержит копию настоящего значения undefined, присвоение этой переменной нового значения не изменяет значения типа undefined.

Но при этом, чтобы сравнить что-либо со значением undefined, прежде нужно получить значение самой переменной undefined.

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

var undefined = 123;
(function(something, foo, undefined) {
    // в локальной области видимости `undefined`
    // снова ссылается на правильное значене.

})('Hello World', 42);

Другой способ достичь того же эффекта — использовать определение внутри обёртки.

var undefined = 123;
(function(something, foo) {
    var undefined;
    ...

})('Hello World', 42);

Единственная разница между этими вариантами в том, что последняя версия будет больше на 4 байта при минификации, а в первом случае внутри анонимной обёртки нет дополнительного оператора var.

Использование null
Значение null записывается литералом null. Оно является самостоятельным, а не свойством глобального объекта (как undefined). В API, null часто присутствует в местах где ожидается объект, но подходящего объекта нет.

null является определённым значением отсутствия объекта, тогда как undefined обозначает неопределённость. Например:

var element;
// значение переменной element до её инициализации не определённо: undefined

element = document.getElementById("not-exists");
// здесь при попытке получения несуществующего элемента, метод getElementById возвращает null
// переменная element теперь инициализирована значением null, её значение определено

👉 @frontendInterview

​Как добавить две фоновые картинки к одному элементу?

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

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

В качестве элемента, к которому добавляется фон, воспользуемся <div>, а чтобы отличать его от остальных элементов, к нему добавим класс block

<html>
 <head>
  <meta charset="utf-8">
  <title>Два фоновых изображения</title>
  <style>
   body {
    background: #f2f0e3; /* Цвет фона веб-страницы */ 
   }
   .block {
    background: url(/example/image/bg_left.png) repeat-y,
                url(/example/image/bg_right.png) repeat-y 100% 0 #fff; 
    padding: 10px; /* Поля вокруг текста */
   }
  </style>
 </head>
 <body>
  <div class="block">
   За 11 месяцев вахты радисты провели 8642 сеансов связи общим 
   объёмом 300625 групп. Это только метео и аэротелеграммы. 
   Принято от радиостанции мыс Челюскин 7450 групп.
  </div>
 </body>
</html>

👉 @frontendInterview

Два собеседования

Именно столько нужно, чтобы нанять или не нанять человека, считает автор. А всё остальное — непродуктивно. И это не просто желание из лени, тут есть смысл.

Допустим, когда на каждом этапе кандидата собеседуют разные люди, ответственность как бы делится между ними. А если ответственны все — то ответственность не несет никто.

Еще у опытных сеньоров просто не выдерживают нервы от количества этапов, и они уходят. Хотя компания думает наоборот, что самые опытные доходят до конца.

Короче, есть о чем подумать. В тексте еще много примеров в защиту двухэтапного собеса:

👉 @frontendInterview

Собрали MVP на скорую руку и отправили в прод

👉 @frontendInterview

​Приоритеты операторов

Приоритет операторов определяет порядок, в котором операторы выполняются. Операторы с более высоким приоритетом выполняются первыми.

Пример:

3 + 4 * 5 // возвращает 23

Ассоциативность
Ассоциативность определяет порядок, в котором операторы с одинаковым приоритетом обрабатываются. Например, рассмотрим выражение:

a OP b OP c

Левая ассоциативность (left-to-right) означает, что оно обрабатывается как (a OP b) OP c, в то время как правая ассоциативность (right-to-left) означает, что оно интерпретируется как a OP (b OP c). Операторы присваивания являются право-ассоциативными, так что Вы можете написать:

a = b = 5;

с ожидаемым результатом, что a и b будут равны 5. Это происходит, потому что оператор присваивания возвращает тот результат, который присваивает. Сначала b становится равным 5, затем a принимает значение b.

Данная таблица упорядочена с самого высокого приоритета (1) до самого низкого (18).

Основы TypeScript. 3-е изд.

Полностью обновленное третье издание классического бестселлера Адама Фримена. В нем освещены все возможности TypeScript 5, включая новые, такие как декораторы. Сначала вы узнаете, зачем и почему был создан язык TypeScript, а затем почти сразу перейдете к практическому применению статических типов.

Каждая глава посвящена навыкам, необходимым для написания потрясающих веб-приложений.

👉 @frontendInterview

С каждым годом собеседования в IT становятся всё сложнее. Пора начать готовиться к ним правильно!

Мы — сообщество «Собесит», и мы помогаем успешно проходить собеседования в IT для Java, GO, QA, ML, Python и других программистов. У нас есть бесплатная база реально пройденных и актуальных собеседований из крупных компаний в видеоформате с документациями, от Junior до Team Lead позиций, которые ты можешь использовать прямо сейчас.

Запускай нашего бесплатного бота и готовься к собеседованиям с умом!

Начни подготовку сегодня и сделай шаг к жирному офферу!

erid: LjN8K916w

Arrays of cats and dogs

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

Примеры:

solve(['D','C','C','D','C'], 2) = 2, because the dog at index 0 (D0) catches C1 and D3 catches C4. 
solve(['C','C','D','D','C','D'], 2) = 3, because D2 catches C0, D3 catches C1 and D5 catches C4.
solve(['C','C','D','D','C','D'], 1) = 2, because D2 catches C1, D3 catches C4. C0 cannot be caught because n == 1.
solve(['D','C','D','D','C'], 1) = 2, too many dogs, so all cats get caught!

👉 @frontendInterview

​Архитектурный паттерн MVC

Когда мы пишем сложные приложения, нам нужно выполнять различные операции, иногда совершенно друг на друга не похожие:
- обновить данные на сервере;
- показать всплывающее окно после клика пользователя;
- валидировать данные из формы;
- загрузить дополнительные ресурсы, картинки, скрипты;
- вызвать стороннее API и обработать ответ.

Считается хорошим тоном делить отличающийся код на модули, которые отвечают за свои конкретные задачи. Как именно разделить код на модули, по каким критериям и принципам — на эти вопросы старается ответить паттерн MVC.

MVC (сокращение от Model—View—Controller) — это архитектурный паттерн, который делит модули на три группы:

Model
Модель содержит данные приложения, за которыми приходит пользователь. Например, список своих заказов в интернет-магазине.

View
Представление показывает эти данные в понятном для пользователя виде. Например, на свёрстанной странице сайта или в приложении на телефоне.

Сontroller
Контроллеры принимают пользовательские команды и преобразуют данные по этим командам. Например, если пользователь нажимает кнопку «Удалить заказ», то контроллер отмечает этот заказ в модели удалённым.

👉 @frontendInterview