Фронтендер на ICFP Contest 2019

Привет, я Вероника, и в этом году я помогала опытным зубрам ICFPC из команды tech.kontur.ru со всем, что связано с фронтендом, фотографией и меметичными фразами.

Я участвовала в ICFPC впервые, хотя уже три года подряд слушаю о нем рассказы. Меня очень впечатляло, как ребята пилили алгоритмы для сбора 3D-фигурок и складывания оригами. Когда слушаешь о таком, кажется, что это близко к невозможному — за 72 часа не просто научиться такое делать, а еще написать несколько алгоритмов и выбрать из них лучший для каждой задачи. 

За три года слушания рассказов я поняла, что хочу в этом поучаствовать. Но я фронтендер, писать на C# не умею (за меня C# пишет моя IDE, спасибо JetBrains за это), поэтому я напросилась помогать во всяком фронтендовом.

Фронтенд

Фронтендерская роль на ICFPC заключается в том, чтобы выводить всякие дашборды и делать визуализации. На этом контесте робот красил двумерную карту, и нужно было генерировать пути, по которым он ездил.

Сначала казалось, что визуализация не пригодится, ибо она уже была написана организаторами, но у ребят тут же появились дополнительные хотелки к ней: чтобы можно было делать шаг вперед и шаг назад, чтобы не надо было выбирать каждый раз файлы, а чтобы оно как-нибудь само. Пришлось скопировать 24 тысячи строк JavaScript-кода в одном файле от организаторов и попытаться их поправить.

Понятно, что это был не настоящий JavaScript, а скомпилированный из ScalaJS и обфусцированный. Однако немного реверс-инжиниринга, упорства и developer tools в браузере — и всё получилось. Доработки в визуализаторе сэкономили ребятам несколько человеко-часов, а может и дней.

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

Розовая кровища слева в клетках означает, что это решение посчитано меньше 10 минут назад. Желтые квадраты с песочными часами показывают, что это решение прямо сейчас считается.

Фотографии

Когда главное в визуализаторе стало готово, стало понятно, что особо много помощи от меня не надо. Поэтому я стала делать фоточки, развлекать ребят и присвоила себе роль Chief Meme Officer — начала вести в нашем чатике рубрику «лучшие цитаты контеста».

Фразы

Немного предыстории перед тем, как рассказать вам про мемасики.

Поначалу все очень аккуратно относились к именованию классов и методов. А потом появился метод с названием UsePalka — и понеслась. Появился другой класс EstimatorZakoulochki и его бета-версия EstimatorZakutochki. Я поделилась находками в репозитории со своими студентами:

А стратегии с названием RandomWalk и DeepWalk для краткости записывались как rand-walk и deep-walk и, разумеется, вслух произносились как рандомный волк и глубокий волк. Отличные названия для байкерского клуба.

А теперь рубрика «лучшие цитаты контеста»:

Куда это он? А он побежал размножаться... и это правильно! (Робот идёт к точке, где можно создать себе клона.)

Моя мама была бы довольна такой прокраской. (Робот из-за бага по несколько раз проходит каждую клетку, тщательно закрашивая все поле.)

Глубокий волк с вилами работает лучше всех! (Deep walk with wheels.)

Когда параллельно с другими работаешь, палка мешает. (Присоединение к роботу манипуляторов в виде длинного отростка плохо работает в сочетании с клонированием. Однако звучит пошловато.)

Палка в одну сторону дает больше, чем в два конца! (Сравниваем наш подход к присоединению манипуляторов с подходом другой команды.)

Стратегии раздачи денег: «коммунистическая» (забрать у богатых, раздать бедным), «капиталистическая» (раздать денег «богатым», они найдут им применение), «социалистическая» (раздать всем поровну).

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