Привет!


Мы ищем frontend-разработчика (да-да, снова, мы растем!) в дружную команду Пикабу

Ежедневно Пикабу читают 2 млн человек. Мы помогаем, радуем и даже спасаем жизни. Наша цель - уютное сообщество с максимально интересными постами и обсуждениями. Давайте сделаем это вместе

Вам необходимо знать JS, HTML5, CSS и обязательно добрую старую библиотеку jQuery ;) Хотя бы немножко знать о LESS, SASS, ES6+, Node.js, Gulp, Webpack, Underscore, JSDoc, VCS.
С нас зарплата в плюсиках и чувство удовлетворения от работы.

Когда еще вы сможете читать Пикабу и получать за это деньги?

Если вам интересна вакансия, вы проживаете в РФ и ваш часовой пояс отличается от Московского не более, чем на 1 час, пожалуйста, ответьте на 13 теоретических и 9 практических вопросов.

Теоретическая часть

1. Почему Вы хотите быть разработчиком в команде Пикабу?

2. Назовите плюсы и минусы работы программистом.

3. Опишите, каким на Ваш взгляд является хороший разработчик?

4. Опишите, каким на Ваш взгляд является хороший руководитель?

5. Почему одни предпочитают коллективную ответственность, а другие - индивидуальную?

6. Руководитель в отпуске, а отдел работает так же хорошо. Как Вы это объясните?

7. Почему при одинаковых зарплатах в одних организациях люди воруют, а в других - нет?

8. На Ваш взгляд из-за чего следует сразу уволить разработчика?

9. Из-за чего случаются конфликты в коллективе?

10. Расскажите случай критики, который оказался для вас полезным.

11. Почему одни программисты стремятся применять более современные технологии и подходы, а другие предпочитают использовать старые, проверенные временем технологии?

12. В компании "А" принято комментировать и форматировать код по принятому стандарту. В компании "Б" уделяют этому меньше времени в угоду реализации проекта в срок. Какой подход лучше и почему?

13. Расскажите об опыте работы в IT. Как вы попали в сферу разработки? Какой был Ваш первый язык программирования?

Практическая часть

14. Напишите, пожалуйста, функцию, которая принимает строку, и превращает ее в хэштег:
- строка должна начинаться с символа #;
- каждое слово должно начинаться с прописной буквы, все остальные буквы строчные;
- функция должна возвращать false, если длина хэштега превышает 100 символов или равна 0;
- хэштег может содержать только буквы, цифры и символ #.
Пример:

let res = getHashTag('Пример НОВОГО "хэштега"');
console.log(res); // #ПримерНовогоХэштега

15. Юному специалисту поручили написать функцию валидации URL к сайту pikabu.ru:
- поддержка протоколов http/https;
- поддомен необязателен и может содержать только буквы, цифры и дефис;
- путь и параметры после домена не имеют значения.
Однако итоговая функция получилась некачественной и вам передали эту функцию на переработку.
Предложите, пожалуйста, вариант исправления данной функции:

function isValidUrl(url)
    return /(?:http|https):\/\/(?:[0-9A-z\-]*.)*(?:pikabu)(?:.ru)/.test(url);
}

16. Имеется массив флагов изменения версий продуктов number[][], в котором каждый элемент является массивом, содержащим следующие значения: id продукта, флаг изменения мажорной версии, флаг изменения минорной версии, флаг изменения патча.
Например, запись продукта #12 без изменения - [12, 0, 0, 0], с изменением минорной и патча - [12, 0, 1, 1], с изменением только мажорной - [12, 1, 0, 0].
Необходимо написать код сортировки массива по "силе" изменения версии продуктов, где самые сильные вначале массива. Например, [12, 1, 0, 0] будет сильнее, чем [12, 0, 1, 1], но слабее, чем [12, 1, 0, 1]
Пример массива:

let products = [
    [11, 0, 1, 0],
    [8, 1, 0, 0],
    [9, 1, 0, 1],
    [3, 0, 1, 1],
    [15, 0, 0, 1],
]

17. Необходимо реализовать функцию Caesar для кода ниже, которая будет применять шифр Цезаря с указанным ключом (сдвигом) для указанной строки. Алфивит - 256 символов.

let enc = Caesar(3);
enc('ABC');             // DEF
enc('hello');           // khoor
Caesar(10)('script');   // }m|sz~

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

class Base ....

if (Base.x + Base.x === 3 && (new Base().x) === Base.x + Base.x) {
    console.log('Nice!');
}

19. Есть функция, которая удаляет все элементы с data-role="user" внутри определенного контейнера. Однако в функции закралась ошибка, которая иногда дает о себе знать: некоторые элементы не удаляются. Необходимо исправить ошибку в данной функции:

function clearContainer() {
    let cont = document.querySelector('#container'),
        els = cont.childNodes;
    for (let i = 0; i < els.length; i++) {
        if (els[i].nodeType === Element.ELEMENT_NODE
            && els[i].dataset.role === 'user') {
            cont.removeChild(els[i]);
        }
    }
}

20. Пожалуйста, опишите какие вы видете реальные и потенциальные проблемы в следующем HTML коде:

<!doctype html>
<html>
	<head>
		<title>Тестовый пост</title>
		<meta http-equiv="content-language" content="ru" />
	</head>
	<body>
		<div class="header">
			<a class="item">Главная</a>
			<a class="item">Новое</a>
		</div>

		<div class="content">
			<div class="story" type="full" aid="56">
				<div class="header">Тестовый пост</div>
				<p>Что общего между этими <font size="5">фразами?</font>
				Все они уйдут в прошлое, потому что сегодня мы представляем новый конструктор
				создания постов! Удобный, функциональный, понятный каждому пользователю и,
				самое главное, позволяющий совмещать текст, фото и видео в одном посте.</p>
				<div style="display: none">
					<p>ВОЗМОЖНОСТИ НОВЫХ ПОСТОВ</p>
					<p>1. Совмещайте вместе фотографии текст и видео: &nbsp;</p>
				</div>
				<div class="button" onclick="$(this).hide().prev().show()">Прочитать полностью</div>
			</div>
		</div>

		<div id="footer" align="right">
			<a class="item">Главная</a>
			<a class="item">Новое</a>
		</div>
		<link rel="stylesheet" type="text/css" href="/main.css">
	</body>
</html>

21. Напишите, пожалуйста, наиболее точный CSS селектор (один, без запятых), который выберет в заданном HTML фрагменте SPAN элементы, справа от которых стоит комментарий <!-- этот -->
Однако не все так просто! :) Допускается в селекторе использовать только один раз псевдо-классы, начинающиеся с nth- (например, nth-child(), nth-of-type() и др).

<form>
  <div class="line">
    <input type="email" value="example@" required>
    <div>
      <a>link</a>
      <span>text</span>
      <span>text</span>
    </div>
  </div>

  ...здесь могут быть произвольные div элементы без input...

  <div>
    <input type="email" value="example@gmail.com" required>
    <div>
      <a>link</a>
      <span>text</span> <!-- этот -->
      <span>text</span>
      <span>text</span>
      <span>text</span> <!-- этот -->
      <span>text</span>
    </div>
  </div>

  ...здесь могут быть произвольные div элементы без input...

  <div class="line">
	<input type="email" value="example@gmail.com" required>
	<div>
      <a>link</a>
      <span>text</span>
      <span>text</span>
      <div>
        <input type="email" value="example@gmail.com" required>
        <div>
          <a>link</a>
          <span>text</span>
          <span>text</span>
        </div>
      </div>
    </div>
   </div>
</form>

22. Напишите, пожалуйста, код, который будет преобразовывать строку в волну:
- Каждый символ, должен быть помещен в span;
- До середины строки каждый тег span должен иметь увеличенный на 5 пикселей шрифт по отношению к предыдущему, начиная с 10 пикселей;
- После середины размер шрифта должен уменьшаться обратно;
- Пробелы не должны влиять на изменение размера.
Для реализации используйте строку из тега input, результат поместите в тег .result

<div><input type="text"></div>
<div class="result"></div>
Ожидаемый внешний вид:
пример реализации задания

Заключительная часть

Спасибо за прохождение теста :)
Пожалуйста, напишите Ваше имя, возраст и немного о себе:

Ваш email для связи:


Отправить