Software Engineers Ангелина Пантелей и Лада Гордиенкова проводили образовательные митапы для ADC в рамках Education Function. Изучая понятия frontend разработки, участники писали код с помощью игры в Codesandbox, которую девушки написали сами. Всем очень понравилось, многие просили поделиться ссылкой, чтобы пройти ее еще раз самостоятельно. Серия митапов подошла к концу, а игра осталась — было жаль просто забыть о ней. Поэтому Ангелина решила дописать подробные инструкции и теорию на каждый уровень, чтобы была возможность автономно проходить игру как с навыками во frontend, так и без. Что случилось потом?
«Недавно я написала пост в Twitter об этой игре, при этом тегнув официальный аккаунт Codesanbox. И нас заметили! Нас ретвитнул официальный аккаунт Codesandbox. Создатель и несколько разработчиков тоже сделали ретвиты и написали очень тёплые отзывы о нашей игре. А самое главное, мы теперь в списке лучших сэндбоксов на странице Featured Sandboxes:dealwithitparrot: Мы безумно рады и очень надеемся, что игра еще какое-то время будет жить и доставлять кому-то радость или пользу», — рассказывает Ангелина.
В игре четыре уровня: создание блоков с помощью html тегов, создание css стилей, добавление логики на react, создание репозитория на github и деплой на хостинг. В инструкциях написано все, что необходимо делать. Вы пишете код в нужных файлах, окошко браузера обновляется. Если все сделали правильно, открывается следующий уровень.
«Перед нами стояла задача научить ADC писать код. Мы задумались над тем, что можно сделать, ведь за 1,5 часа невозможно объяснить человеку, что такое функция и переменная. Как сделать этот процесс интересным и понятным для людей, которые вообще никогда не писали код? Так возникла идея создать игру и разбить людей на команды, поскольку вместе гораздо проще думать над задачами. После этого мы стали искать инструмент, в котором можно работать нескольким людям одновременно — им стал Codesandbox, — поясняет Ангелина. — Мы увидели, что там можно нажать на кнопку и тем самым создать репозиторий в гитхабе без сложных команд в консоли. Я нашла милые картинки домиков и спрайт с мишкой, за выходные набросала функционал, чтобы мишка двигался нажатием мышки. Дальше решили работать в этом стиле, придумали идеи для каждого уровня. И все! Оставалось технически хитро реализовать каждый уровень — самой сложной оказалась проверка правильности кода».
Главный функционал авторы написали за пару месяцев, после этого Ангелина дорабатывала неключевые улучшения.
«Это настоящий стартап: когда в моей голове сложилось, что мы можем получить в итоге, я загорелась идеей, мне казалось, что рождается нечто невероятное! Я не жалела времени: сидела в Photoshop, вырезала картинки для комнат, придумывала инструкции, концепт каждой из них. Так получилось, что этой графикой я сильно усложнила задачу: никто не предполагал, что мы потратим на это много времени. Поэтому я пыталась максимально сделать все сама — хотелось, чтобы было идеально, а идеальность требует времени», — делится впечатлениями Ангелина.
Посмотреть, что получилось у наших замечательных JS Software Engineers можно здесь.
Релоцировались? Теперь вы можете комментировать без верификации аккаунта.