Road to Yandex (Школа разработчиков интерфейсов 2015)
Привет! Как сказал Михаил Трошев (Яндекс):
Лучше потратить 2-3 месяца на эффективное плотное структурированное обучение, чем 2-3 года (если повезет) на самообучение и хардкорный гуглинг.
Хватит хардгуглинга! Я достиг той точки, когда морально готов к настощим знаниям и личному росту.
Теперь мне нужно набрать достаточный уровень и базу, что бы пройти отбор в Школу Разработчиков Интерфейса (ШРИ) от Яндекса.
Что для этого потребуется:
- Подучить всякие штуки для заданий
- Выполнить 3 задания
- Выложить их на гитхаб
- Заполнить анкету
- Отправить заяву до 16 августа
Критерий завершения
Отправил заявку на участие в ШРИ
Личные ресурсы
Знания, время, желание, упорство, гибкость, понимание, сообразительность, мечта, вдохновение
Экологичность цели
Я хочу сделать этот важный и большой шаг в моей карьере. Это то, что помогло бы стать настоящим профессионалом.
-
Первое задание (Задание #3) Плеер WebAudio API
Создайте с помощью WebAudio API плеер, который:
- умеет открывать аудиофайлы (поддерживаемых браузером форматов) с локального диска;
- поддерживает drag'n'drop;
- имеет кнопки play и stop;
- выводит название проигрываемого файла;
- умеет отображать хотя бы один вариант визуализации (waveform или spectrum);
- работает в Яндекс.Браузере, Safari, Chrome, Firefox.
Дополнительно реализуйте возможность:
- выбора настройки эквалайзера (pop, rock, jazz, classic, normal);
- вывод названия песни и исполнителя из метаданных аудиофайла.
-
WebAudio API - что эта такое вообще?
-
Плеер воспроизводит музыку
-
Плеер принимает пользовательские файлы
-
Плеер drag'n'drop
-
play & stop
-
Название файла
-
Кроссбраузерность
-
Визуализация N2
-
Эквалайзер
-
Визуализация
-
Второе задание (Задание #1) Сверстать онлайн-табло аэропорта
Задание №1Сверстайте табло аэропорта. На нём должны быть представлены следующие данные:
- тип рейса (вылет/прилёт; например это может быть иконка);
- номер рейса;
- авиакомпания;
- логотип авиакомпании;
- тип воздушного судна;
- аэропорт назначения;
- плановое время вылета или прилёта;
- статус рейса (для вылетающих: регистрация, ожидание посадки, посадка закончена, вылетел; для прилетающих: по расписанию, летит, приземлился; для всех: задерживается до HH:MM, отменён);
- примечание (например, информация о код-шеринге с другими авиакомпаниями).
В качестве источника можно использовать данные онлайн-табло любого аэропорта мира.
Дизайн оформления выберите на своё усмотрение, при этом необходимо реализовать следующее:- по наведению курсора на определённое место в табло контрастным цветом выделяются соответствующие строка и столбец;
- нечётные строки табло темнее чётных;
- количество отображаемых данных по высоте больше высоты экрана, при прокрутке заголовок таблицы приклеивается к верхней части видимой области окна браузера;
- при изменении ширины экрана браузера в табло автоматически скрываются и/или сокращаются значения наименее важных столбцов (например, при ширине 1000 пикселей вы показываете всю таблицу, при ширине 900 пикселей — убираете название авиакомпании, оставляя только логотип, 800 пикселей — сокращаете название воздушного судна (Boeing 737-800 -> B737) и так далее);
- в дополнение к предыдущему пункту сделайте так, чтобы по клику на соответствующую строчку в выплывающем окне показывались все данные рейса;
- два чекбокса над самим табло: прилёт и вылет, по нажатию показываются только соответствующие рейсы.
Плюсом будет, если вам удастся реализовать табло без JavaScript.
-
Скелет таблоши
-
по наведению курсора на определённое место в табло контрастным цветом выделяются соответствующие строка и столбец;
-
нечётные строки табло темнее чётных;
-
количество отображаемых данных по высоте больше высоты экрана, при прокрутке заголовок таблицы приклеивается к верхней части видимой области
-
при изменении ширины экрана браузера в табло автоматически скрываются и/или сокращаются значения наименее важных столбцов (например, при шир
-
в дополнение к предыдущему пункту сделайте так, чтобы по клику на соответствующую строчку в выплывающем окне показывались все данные рейса;
-
два чекбокса над самим табло: прилёт и вылет, по нажатию показываются только соответствующие рейсы.
-
реализовать табло без JavaScript.
-
Третье задание (Задание #2) API Подсчет численности
Существует API, которое умеет отвечать по трём URL: /countries, /cities и /populations. Клиентское приложение подсчитывает численность населения в Африке. Запросы друг от друга не зависят. Чтобы браузер пользователя не простаивал, клиентскому приложению важно уметь делать все три запроса одновременно. Реализацией API является функция getData(url, callback), которая принимает строку с URL запроса и функцию обратного вызова. В случае ошибки в callback первым аргументом будет передана строка ошибки, в случае успеха вторым аргументом будет передан ответ API.
Вам досталась реализация клиентского приложения, которое должно решать описанную выше задачу. Но в коде приложения есть ошибки, из-за которых фактический результат работы отличается от ожидаемого. Сам код здесь.
Как должно быть: приложение выводит в консоль суммарную популяцию в Африке.
Как на самом деле: приложение не выводит в консоль ничего.-
Найти ошибку
-
Исправить
-
Описать как она могла появиться и почему, как её исправить
-
Новая функция:
-
Вывод диалога
-
Подсчет численности по стране
-
Подсчет численности по городу
-
-
Выложить все на гитхаб
Залить в репозитории через гит
-
Задание #1
-
Задание #2
-
Задание #3
-
-
Заполнить анкету
-
Общие вопросы
-
Расскажите о вашем опыте разработки.
-
Расскажите о своих должностных обязанностях. Доводилось ли вам работать в команде?
-
С какими ОС вы работали?
-
какими программными продуктами вы пользуетесь — от редактора до специализированных утилит
-
Пользуетесь ли вы командной строкой? Если да, то какие задачи решаете и с помощью каких команд? С какими программами вы чаще всего взаимодей
-
Не пропустите новые записи!
Подпишитесь на цель и следите за ее достижением
