Блог веб-разработчика v 1.0.0
Symfony2, AngularJS, React, Gulp, PhpStorm и много других страшных слов

Участие в международной олимпиаде по веб-разработке

3 года назад
1562 просмотра
1С-Битрикс Олимпиада Развлечения

Группа компаний "1С" и "1С-Битрикс" проводит международную студенческую олимпиаду по веб-разработке. В первом, региональном туре возможно как очное, так и заочное участие. Мне повезло: первый тур проходит в Краснодаре и до места проведения ехать всего 20 минут.

О чем речь?

Первый тур международной олимпиады по веб-разработке проверяет наши знания HTML/CSS/JS. Смотря на тестовое задание можно, примерно угадать каким будет реальное задание первого тура. Правда, я все равно особо не готовился, т.к. "знания HTML/JS/CSS" это довольно размытое понятие и могут оказаться всем чем угодно. Оценив свои силы и забив на подготовку (с экзаменами в колледже это прокатывало) я подал заявку на очное участие в первом туре. За день до его проведения пришла SMS и E-mail с информацией о том, где будет проходить первый тур.

Квест номер ноль. Корпус А3

Самым сложным оказалось найти место проведения. "Корпус А3" - спрашивал я у всех местных прохожих около 20 минут, но лишь один мужичок подсказал куда идти. Спустя еще какое-то время удалось обнаружить заветный офис 718. Я оказался первым прибывшим на место участником олимпиады.

Конечно, можно было позвонить и спросить как добраться. Милая девушка, одна из организаторов, с радостью объяснит пути подхода к корпусу А3. Но мы не ищем легких путей.

Офис 718

В отличие от предыдущего пункта, здесь все отлично. Меня добродушно встретили, спросив, действительно ли так сложно найти это место. В довольно хорошем учебном классе находилось трое человек проводивших первый тур олимпиады в Краснодаре. Не смотря на то, что рекомендовалось взять свой ноутбук, в классе было большое количество компьютеров для участников олимпиады. Этот маленький момент не мог не радовать (мы то знаем, как обычно бывает с подобными вещами). Я пришел со своим ноутбуком (на халяву арендованным у лучшего друга), поэтому штатные ПК мне не понадобились.

Оставалось всего 10 минут до начала первого тура и я был единственным участником на тот момент находившимся в учебном классе. После пары шуток на тему того, что мне будет легче выиграть в одиночку, мы прислушивались ко всем шагам приближающимся ко входу в учебный класс. Спустя какое-то время подтянулось еще три человека и в итоге первый тур начался. На самом деле должен был быть еще один, но, вероятно, он заблудился и не дошел.

Спидометр для мышки

Нам раздали задание на, примерно, пяти листах А4. Суть задания заключалась в создании фронтэнд приложения для измерения скорости мыши. Мышкой нужно было двигать по определенному блоку и на Canvas-спидометре отображалась бы текущая скорость. На первый взгляд кажется, что задание довольно маленькое, но, учитывая кучу нюансов (окно с настройками, хранение истории в LocalStorage, различные условия для хранения и измерения скорости указателя), оно как раз растянулось на запланированные четыре часа отведенного времени. В задании не рекомендовалось использовать jQuery для модификации DOM. Вместо нее было предложено использовать некоторый набор библиотек-фреймворков, но по сути никто не ограничивал участников и каждый мог писать на том, на чем он умеет.

Порадовало качество интернета, предоставленного участникам. Все грузилось довольно шустро и единственную поломку канала починили за пару минут сменив сеть на местную Yota.

В шапке приложения ничего особенного. Выстроенные в ряд иконки и кнопка для вызова окна с настройками. Дальше идут две колонки. Одна со спидометром и блоком для измерения скорости мыши, а другая с таблицей результата. Я последовал рекомендациям к заданию и мой вариант решения был чуть больше, чем полностью написан на AngularJS. Так же использовался Bootstrap и Font Awesome для иконок (тоже из рекомендаций).

Тур длился с 11:00 до 15:00. Примерно в два часа закончил первый участник (я не ожидал увидеть в первых рядах именно этого человека, т.к. про досрочное выполнение спрашивал абсолютно другой участник олимпиады). Не знаю на сколько полностью он выполнил задание, но ушел довольно уверенным в себе. Спустя минут 15 я закончил написание пояснительного README к выполненной работе, минифицировал скрипты и стили, точно так же сдал задание и ушел домой.

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

После проведения первого тура остались только положительные эмоции. Конечно, выполнить квест по поиску офиса было не просто, но в остальном организаторы провели отличный конкурс. Вежливо и неформально общались с нами и отвечали на наши дурацкие вопросы (на самом деле, в основном, мои).

4500 пикселей в секунду

Порадовал один из участников, который намеревался развить скорость курсора 4500 пикселей в секунду. По условиям задачи при пересечении этого порога скорости строка результатов должна была подсвечиваться. На мой вопрос о том, что нереально так резко и четко (нельзя выходить за границы области) двинуть мышку, чтобы развить 4500 px/sec он почему-то парировал, что можно "очень быстро ей двигать". Надеюсь, мы не увидим этого действия вживую.

А в итоге?

В конце получилось такое веб-приложение: MouseMoveSpeed

Конечно, в нем есть недоработки и, наверное, много недоработок. Но суть задания была показать способности, а не сделать спидометр для мышки. И очевидных косяков - тормозит отрисовка спидометра в Firefox. Я нашел полу-готовый скрипт отрисовки спидометра, модифицировал его под свои нужны и получилось то, что получилось. За оставшиеся пол часа вряд ли я бы успел поправить этот баг, поэтому пришлось отдать как есть. Правда, если бы не условие использования Canvas, то был бы у меня спидометр на HTML/CSS, который работал бы куда быстрее.

Еще один баг - слишком маленькие скорости мышки. Нашелся умелец, разогнавший мой пример до 250 px/sec. В целом алгоритм верен. Находим расстояние в пикселях между позициями мышки в двух последовательных событиях движения мыши и делим на прошедшее время в секундах. Но в итоге получается, что на рабочем поле нереально развить даже 50 px/sec, какие уж там 4500.

Что еще почитать