Испытание фронтенд разработчика от Пикабу

Наткнулся на просторах Пикабу на пост об открытии вакансии фронтенд разработчика в команду Пикабу собственно. Ну и решил ради интереса поучаствовать.

Далее будет разбор задач, для тех кто хочет попробовать свои силы сам можно перейти по следующим ссылкам на источник ( Задачи).

Введение

Нас встречает класс JobSeeker в котором нужно заменить пропуски (серый текст) нужными переменными, операторами, классами и тд тп. Всего в испытании присутствует 9 задач. Чтобы решение засчиталось нужно заменить пропуски корректными значениями, чтобы все проверки прошли успешно.

Assert 1/9

Не мудрствуя лукаво и не поддаваясь страху перед непонятным оператором “+++” здесь вместо someName вставляем valueOf, “+++” всего лишь написанные операторы “++” и “+”. При сравнении обе части выражения приводятся к примитивам и для этого используется метод класса valueOf.

При первом вызове valueOf переменная a = 0, а во время выполнения первая часть возвращает a = 0, а вторая уже a = 1, и возвращается значение 1. При следующем вызове складываются a = 1 и a = 2 и возвращается 3. При третьем вызове возвращается уже 5.

Assert 2/9

Здесь тоже все просто. При первом вызове метода calc аргумент запоминается в массиве, дальше идет объявление переменной fn, в которой если тип аргумента равен функции, то из переменной массива args вызывается метод reduce с передачей туда функции-аргумента. В противном случае мы вызываем из переменной массива метод push с аргументом и возвращается функция в ответ. Таким образом у нас накапливаются значения в массиве, а при передаче функции весь массив обрабатывается функцией-сумматором.

Assert 3/9

В данном случае у меня не сразу получилось и пришлось немного поломать голову. В проверке у нас парсятся данные из строки, при этом эти данные имеют тип объект, должны иметь проперти \u{0030} (значение 0), первое итерируемое проперти должны быть типа объект и приведение нулевого проперти к булеву значению должно быть равно false.

Пробовал разные варианты, сначала это был объект {“0”: {“a”:1}} в котором в нулевом ключе лежало значение объект. Дальше были попытки объявления нескольких ключей, определение минимального ключа. В итоге вспомнилось что typeof массива имеет значение object, так же значение object имеет null. Подставив массив с единственным нулевым значением все проверки сошлись.

Assert 4/9

Если вы разбираетесь в регулярных выражениях то вам не составит труда подставить нужные данные в шаблон. Далее уже нужно вытащить данные из шаблона, для этого понадобится использовать Web Components. Переменная repo это должно быть customElements, т.к. в self у нас находится объект window. Заменяем в промисе строку на “my-name,my-age,loc-city,prof-skills”, далее во время маппинга регистрируем компоненты методом define и возращаем в resolve массив ключ-значение. В конце апгрейдим (метод upgrade) документ и возвращаем на выходе из функции new Map(). Теперь у нас в результате метода getSeekerInfo получается Promise, который возвращает Map откуда мы можем вытаскивать нужные нам значения из шаблона.

Assert 5/9

Здесь у нас метод генератор который должен вернуть массив в котором все числа станут остатками от деления на 256. Если использовать оператор yield то мы “приостанавливаем” выполенение функции-генератора до запроса следующего значения. Но так же есть оператор yield* который может принимать функцию-генератор или итерируемый объект который можно разложить на составляющие. Далее нам нужно заменить класс на что-то итерируемое. Существует несколько встроенных в язык итерируемых объектов: String, Array, TypedArray, Map и Set. TypedArray имеет несколько разновидностей среди которых нам интересен Uint8Array, массив в котором все значения типа Byte (от 0 до 255). У него есть особенность, если в него добавить число значение которого большее 255, то оно просто будет остатком от деления этого числа на 256.

Assert 6/9

Суть задачи — откорректировать html код и получить из него текст чтобы он был равен значению “0123456789”. Первый селектор сделаем “:scope > div:first-child”, будем выбирать из текущего (:scope) элемента первый div и удалим его. Второй селектор сделаем “div:nth-child(1) > div > span”, выберем элемент и поменяем его местами со следующим от него элементом (элементы содержащие 4 и 3). Далее при выборе из дерева последнего элемента b, который содержит 8, получим его дочерний элемент который содержит только текст и добавим к нему 1 чтобы значение стало 9. В конце берется родительский элемент и через проперти innerText извлекаются все текстовые данные без самих элементов, убираются лишние невидимые символы и возвращается результатом.

Assert 7/9

В чем тут может быть сакральный смысл?) Здесь нужно просто подставить “[Symbol.hasInstance]”, т.к. этот метод используется внутри проверки на соответствие классу.

Assert 8/9

Здесь даже немного посмеяться над нами решили, потому что заменили бы наш background-color: rgba() на неправильное значение)) Но мы то с вами знаем что в браузере возможно не только rgba значение, но и hsl/hsla как один из возможных вариантов. Воспользовавшись конвертером конвертируем rgba(17, 34, 51, 0) в hsla(210, 50%, 13.3%, 0). Ну а дальше просто указываем ширину width: 200px, но ограничиваем max-width: 100px. Делаем левую границу 5px и box-sizing: border-box и трансформом двигаем элемент на 25 пикселей. И все тесты проходят. Шах и мат!))

Assert 9/9

Выглядит страшно на первый взгляд, больше кода чем в предыдущих испытаниях, но на деле не намного сложней. Для начала нужно создать canvas элемент. Далее в вертексном шейдере добавить переменную gl_Position. В фрагментном шейдере обозначить тип переменной uniform. Далее получаем позицию аттрибута aVertices. И рисуем массивы через метод drawArrays. Читаем полученные точки в которые мы “нарисовали” наши данные из программы шейдера. Найдя нужную точку делаем бинарный сдвиг на 2, т.е. делим число на 4 и получаем нужные нам значения.

Заключение

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

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