3 июля в рамках проекта «Мобилизация» откроется пятая Школа разработки интерфейсов.

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

Для поступления в школу нужно знать HTML, CSS и JavaScript и иметь опыт разработки интерфейсов — подойдёт даже маленький. На занятиях, среди прочего, мы поговорим про разработку для мобильных платформ с использованием веб-технологий (как для браузеров, так и для гибридных приложений). Опыт разработки мобильных приложений для поступления необязателен.

Слушателей Школы ждут два этапа. Первый состоит из курса лекций и практических занятий. Во второй этап попадут ученики, успешно завершившие первый. Для реализации совместного проекта участники объединятся в команды с менеджерами, дизайнерами и разработчиками из других школ «Мобилизации».

Программа рассчитана на три месяца. Занятия будут проходить в московском офисе Яндекса. Иногородним участникам мы оплатим проезд и проживание в Москве.

Как поступить?

Чтобы поступить, нужно выполнить тестовое задание. Приём работ закроется 24 апреля в 20:00 по московскому времени. Все, кто пришлёт анкеты и тестовые задания, получат обратную связь до 15 мая (включительно).

За ходом проекта можно следить в Telegram-канале «Мобилизации».

Вопросы, связанные со Школой, вы можете задать в письме на адрес
frontendschool@yandex-team.ru.

Тестовое задание

Решите задания и добавьте ссылки на решения в форму регистрации.

Задание 1

Мы хотим узнать, насколько хорошо вы применяете на практике языки HTML и CSS и разбираетесь в особенностях работы разных браузеров. Для этого мы предлагаем вам сверстать расписание лекций проекта «Мобилизация». В качестве примера можно использовать прошлогодние данные:

Страница должна быть адаптирована для мобильных браузеров и работать в современных версиях Яндекс.Браузера, Google Chrome, Edge, Firefox, Safari и Opera. По возможности используйте приёмы постепенной деградации CSS.
 Помимо того, как вы оформите расписание, нам важно оценить, как вы организуете код и сможете оптимизировать результат.


В расписании нужно указать данные для всех трёх школ, а именно:

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

Добавьте в программу 2–3 общие для всех школ лекции и также отобразите их в расписании. Лекции, которые уже прошли, должны быть помечены соответствующим образом. Для них должна быть доступна ссылка на материалы и видеозапись.

Дополнительное задание

Реализуйте фильтрацию по школам, лекторам и датам.


Результат нужно прислать в виде двух ссылок:

  • исходный код на GitHub,
  • результат на gh-pages.

Мы понимаем, что предложенные задачи сложно решить только средствами HTML и CSS и допускаем использование JavaScript. Взамен мы хотим увидеть объяснение выбора в пользу того или иного решения.

Задание 2

Напишите библиотеку, предоставляющую API для работы с расписанием лекций из первого задания.

Здесь мы хотим проверить ваши знания в области JavaScript и способность реализовать простые алгоритмы. Также нам важно увидеть, что вы можете выделить основные компоненты приложения и организовать их взаимодействие. Кроме того, мы хотим оценить ваше умение принимать обоснованные технические решения и объяснять их.

Предметная область

Студенты «Мобилизации» обучаются в нескольких школах и посещают лекции. Лекции проходят в аудиториях в определённые часы и дни. Некоторые лекции проводятся одновременно для студентов нескольких школ.

К примеру, лекция «Параллельные и распределённые вычисления» проводилась 15 июня с 19:00 до 21:30 в аудитории «Синий кит» для студентов Школы разработки интерфейсов и Школы дизайна.

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

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

  • просмотр расписания школы в заданный интервал дат;
  • просмотр графика лекций в аудитории в заданный интервал дат;
  • ввод и редактирование данных о лекциях;
  • ввод и редактирование данных о школах;
  • ввод и редактирование данных об аудиториях.

Библиотека должна гарантировать корректность и связанность данных:

  1. Для одной школы не может быть двух лекций одновременно.
  2. В одной аудитории не может быть одновременно двух разных лекций.
  3. Вместимость аудитории должна быть больше или равной количеству студентов на лекции.

Пожалуйста, придумайте и добавьте другие проверки.

Дополнительные задания

Любое из этих заданий не обязательно, но их выполнение будет плюсом.

  • Сериализация / десериализация в разные форматы данных.
  • Постоянное хранение данных где-либо.
  • Тесты к библиотеке.
  • Веб-интерфейс или интерфейс командной строки для реализованной библиотеки.

В качестве результата мы ждём:

  • исходный код на GitHub,
  • описание библиотеки и полноценный пример её использования.

Мы не ограничиваем вас в выборе инструментов и способов реализации, но хотим узнать, почему вы предпочли именно их.

Задание 3

Есть веб-приложение, позволяющее находить картинки в формате GIF по ключевым словам и добавлять понравившиеся в избранное. Приложение использует ServiceWorker для работы офлайн, позволяя при отсутствии интернета открыть интерфейс и посмотреть избранное.

Код приложения находится в репозитории на GitHub.

Однако офлайновый сценарий был сломан последовательностью действий:

  • Был проведён рефакторинг под названием «Более надёжное кеширование на этапе fetch», после которого стало невозможно обновить HTML-страницу: у клиентов она стала браться из кеша не только в офлайн-режиме, а всегда.
  • Был сделан фикс этого бага, но перестал работать офлайн-режим: основной документ не загружался при отсутствии сети.
  • Оказалось, что невозможно обновить статику из директорий vendor и assets. Но всё наладилось само собой после того, как был проведён рефакторинг под названием «Разложить файлы красиво». Правда, ServiceWorker перестал обрабатывать запросы за ресурсами приложения: HTML-страницей, скриптами и стилями из каталогов vendor и assets.
  • К сожалению, все коммиты в репозитории были объединены в один, поэтому необходимо исследовать проблему, локализовать и исправить ошибки.

    В этом задании мы хотим проверить вашу способность разобраться в незнакомом коде и API и оценить ваш навык отладки. В качестве ответа пришлите ссылку на fork этого репозитория, где исправен баг и в README дописан раздел про ход ваших мыслей: какие ошибки и как вы нашли, почему они возникли, и какие способы их исправления существуют. Большим плюсом будет, если в файле вы также ответите на вопросы, помеченные в коде ServiceWorker маркером.

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

    Дополнительное задание

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

Как проехать

ул. Льва Толстого, 16

Яндекс