Дело было в период локдауна. Каждое воскресенье в 8:30 утра кухня превращалась в… превращалась в… в импровизированную студию для вебинаров с лайвкодингом.
Дело было в период локдауна. Каждое воскресенье в 8:30 утра кухня превращалась в… превращалась в… в импровизированную студию для вебинаров с лайвкодингом.

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

Удаленщиком я стал по зову сердца, еще в 2017-м. Работа из дома высвободила мне около 10 часов в неделю — и я впервые задумался о том, чтобы делиться опытом. Так я стал наставником в одной известной онлайн-школе, и остаюсь им по сей день: ревьюю код студентов, помогаю им с вопросами по учебным проектам. 

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

Идеальный шторм

Годами идея так и оставалась идеей. То времени не хватало, то шел поток сильных ребят (а им вроде и не нужно) — короче, я долго находил какие-то отговорки. Но все изменилось в начале 2020-го. 

Удаленка дала мне еще одну возможность: больше времени проводить с семьей. Пока дети маленькие, каждую зиму мы стали уезжать в теплые страны: часть времени я работаю, часть провожу в полноценном отпуске. Та поездка оказала самое благоприятное влияние на мысли и цели. 

Шри-Ланка. Месяц до локдауна. И полтора месяца до старта всей затеи.
Шри-Ланка. Месяц до локдауна. И полтора месяца до старта всей затеи.

Где-то в тот момент я прочитал о технике достижения целей Майкла Роуча. Алгоритм простой, всего 4 шага. Если кратко: поставить себе любую цель, найти человека, который тоже хочет к ней прийти, помогать ему бесплатно раз в неделю — и искренне радоваться его достижениям. 

Мне захотелось проверить этот метод на практике. Так что я подумал: вернусь и напишу в соцсетях анонс о наборе группы для обучения программированию. А там — будь, что будет.

В марте 2020-го мы вернулись домой, а через пару недель был объявлен режим самоизоляции. 

У многих вынужденно появилось по несколько свободных часов в день. Я подумал: возможно, найдутся те, кто захочет потратить их на обучение азам программирования. Тогда и решил - либо начинаю прямо сейчас, либо пора выбросить эту затею из головы.

Я разместил пост в соцсетях... и записалось 3 человека 

Я не стал заморачиваться с лендингами и прочим: короткое описание и форма регистрации, больше ничего не было.
Я не стал заморачиваться с лендингами и прочим: короткое описание и форма регистрации, больше ничего не было.

То, что курс будет бесплатным, я решил четко (уж больно хотелось попробовать метод Роуча). Плюс, я не маркетолог: поэтому платную рекламу отверг сразу. Оставались посты в соцсетях. Чтобы написать их, я сел формулировать идею курса. Вот что получилось.

  • JavaScript, потому что они же новички — по сути, имея браузер, ребята с первого занятия смогут что-то сделать, не заморачиваясь с настройкой окружения. Мне вообще-то ближе PHP, на работе пишем на нем.

  • Лекции с лайвкодингом, как у Пола Хегарти из Стэнфорда — одно время я руководил командой мобильных разработчиков и смотрел его курсы по iOS-разработке, чтобы лучше въехать в тему. И скажу, что живое программирование — это очень круто. Даже опечатки и прочие сбои играют на руку: для лектора это возможность что-то дообъяснить. А для студентов, кто только думает о работе программистом, это даст понимание, как оно бывает.  

  • Занятия по воскресеньям, в 9 утра — требований к опыту я не предъявлял, готов был обучать с нуля. Но вот требования по мотивации, особенно при учете бесплатности, оставил. Когда-то я ходил в воскресную школу программирования при ННГУ. Да, иногда было тяжело, но программирование это не легкая прогулка, привыкайте)

Да и с учетом основной работы, так было проще: нужна была хотя бы суббота, чтобы набросать план нового занятия.

Время на практику и ��амоподготовку - это важно. Те, кто не делал первую домашку, со второй лекции стали отстающими.
Время на практику и самоподготовку - это важно. Те, кто не делал первую домашку, со второй лекции стали отстающими.

Между лекциями нужна объемная домашняя работа. На стримах планировался в основном лайвкодинг плюс разъяснения у доски, а теория, тренажеры, — все это уйдет в самостоятельную работу. Плюс, чтобы ребята научились писать базовые алгоритмы и решать задачи, изучили возможности JavaScript в браузере, написали финальный проект для портфолио — нужно много практики между занятиями. О том, что на домашку потребуется от 10 часов в неделю, я честно говорил в анонсе и повторял в анкете регистрации.

За 6 дней до старта у меня были: анонс, анкета, план первого урока и цель — провести шесть занятий. Я шел путем, принятым в продуктовой разработке: накидываем видение, тестируем спрос, потом итеративно пилим фичи. Неожиданно, спрос превысил предложение, и пару фич пришлось запиливать в авральном режиме.

Через день: у меня 49 желающих. Как это автоматизировать?

Исходно я рассчитывал на 5-10 учеников, но соцсети сходу принесли лишь пару заявок. Поэтому у меня был запасной план. У нас в Skyeng работают несколько десятков тестировщиков, и вечером того же дня я закинул анонс в канал QA. Ребята из тестирования оказались очень благодарной публикой. Кто-то задумывался о переходе в разработку и хотел попробовать занятия с наставником, большинство — увидели в изучении JS возможность автоматизировать рабочую рутину.

По истории скриншотов можно заметить, что я хотел попробовать для занятий Skype, затем Hangouts - но за пару дней до старта поменял решение. А потом поменял его еще раз.
По истории скриншотов можно заметить, что я хотел попробовать для занятий Skype, затем Hangouts - но за пару дней до старта поменял решение. А потом поменял его еще раз.

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

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

Помню, как над тестами пришлось сидеть до 2 ночи. Зато потом это сэкономило мне кучу времени и нервов.
Помню, как над тестами пришлось сидеть до 2 ночи. Зато потом это сэкономило мне кучу времени и нервов.

Я завел репозиторий на гитхабе, придумал 12 задач для основного курса, плюс выпускные проекты на выбор. Весь остаток недели оформлял задачки и писал к ним тесты. Зато потом мне надо было просто отправлять студентам ссылку на задачку гитхабе: они решали ее, запускали мои тесты, и если они были зелеными — домашка зачтена.

Собираем всех в одном месте. Я решил сделать телеграм-канал для анонсов, рассылки домашек, публикации напоминаний. Чтобы оповестить всех записавшихся, написал скрипт рассылки. 

Единственное, что не удалось автоматизировать - это написание текстов) А тк телеграм тогда формально блокировали, сделал зеркало.
Единственное, что не удалось автоматизировать - это написание текстов) А тк телеграм тогда формально блокировали, сделал зеркало.

Параллельно с каналом появился чат — туда можно было писать вопросы по домашкам. Я или ребята, кто был посильнее, всегда отвечали. Но так как формат был бесплатным, персональной обратной связи студентам не предполагалось.

Автоматизируем сбор обратной связи от студентов. Курс рождался на ходу, ��не важно было собирать фидбек после занятий. Я создал гугл-форму для анонимных отзывов: просил поставить оценку занятию и в свободной форме написать, что понравилось, а что стоит улучшить. Заодно прикрутил к каналу-каналу ControllerBot — он помогал автоматизировать постинг, добавлять реакции и ссылки в виде кнопок к постам, — особенно это выручало, когда линков было много.

Так выглядел пост по итогам первого занятия.
Так выглядел пост по итогам первого занятия.

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

Утром 29 марта 2020 года я был готов начать курс. Единственное, что меня беспокоило — это трансляция. Так как времени на поиск инструмента было немного, я попросил доступ к корпоративному Zoom: в нем проходят внутренние митапы нашей разработки.

Первый стрим комом

Само занятие прошло хорошо. Я начал с демонстрации тезиса, что каждый может немного программировать, если у него есть браузер: показал, как локально менять код, предложил ребятам повторить. Затем добавил интерактива: открывал порты через ngrok на своем компьютере и ребята получали реальные ответы от моего сервера. А в конце занятия мы уже писали простенький сайт и настраивали рабочее окружение: VSCode, git, cmdr + либа parcel для быстрого запуска кода.

Результаты из той самой анонимной формы обратной связи.
Результаты из той самой анонимной формы обратной связи.

Но вот Zoom меня подвел. Во-первых, запись получилась кривой — я только постфактум узнал, что нужно настраивать отображение для записи, чтобы лица не перекрывалась часть экрана :)

Черная область на записи - еще одна моя боль.
Черная область на записи - еще одна моя боль.

А главное, я не смог быстро научиться управлять сменой планов в Zoom:

  • Мой экран в режиме демонстрации.

  • Я перед ноутбуком.

  • Я возле физической доски, на которой иногда нужно что-то рисовать.

  • Плюс, комментарии ребят, за которыми нужно следить.

В общем, я решил искать инструмент для стримов дальше. И когда заливал видео на ютуб-канал, решил посмотреть, а что сам хостинг советует для организации трансляций. Оказалось, у них есть хорошая документация: в частности, там были ссылки на несколько инструментов. Я быстро прочитал отзывы и по ним мне понравился OBS

Я нашел на ютубе 10-минутный рассказ, как запустить стрим через эту софтину. Понял принцип ее работы. И решил попробовать.

Как я тюнил трансляцию и запись

Старый жидкокристаллический дисплей я забрал у родителей: они уже было хотели его выкидывать, а мне он пригодился,  чтобы чекать трансляцию на ютубе. Вместе с этим потребовалась хитрая система переходников с VGA на Type-C.
Старый жидкокристаллический дисплей я забрал у родителей: они уже было хотели его выкидывать, а мне он пригодился, чтобы чекать трансляцию на ютубе. Вместе с этим потребовалась хитрая система переходников с VGA на Type-C.

За следующую неделю я поставил OBS и разобрался, как стримить на ютуб, имея несколько источников захвата: камеру макбука (чтобы было видно меня в окошке), экран с IDE и браузером, внешнюю камеру на триподе для съемки объяснений у доски. Также для стабильности сигнала я отказался от вайфая и прокинул на кухню 20 метров патч-корда. 

Стало сильно лучше.
Стало сильно лучше.

Чуть позже я открыл, что при связке macOS и iPhone можно также выводить в трансляцию экран смартфона — и иногда пользовался для работы с комментариями.

Заодно придумал, как автоматизировать создание таймкодов. Оказалось, в настройках ютуба можно включить создание автосубтитров: если скачать их, то откроется список таймкодов — остается найти там ключевое слово и скопировать таймстамп в описание ролика. 

Как была устроена подготовка к стриму

В пятницу вечером я отвозил детей и жену к родителям в деревню. Всю субботу мы отдыхали, а когда все ложились спать, я писал верхнеуровневый план и тайминг лекции — здороваемся, разбираем домашку, разбираем темы, работаем в IDE. Помимо сценария, для тренировки писал код, который хотел показать на стриме, — заранее запускал-проверял, а затем распечатывал и подсматривал как в шпаргалку. 

Заодно учил ребят код-стайлу - и почему это важно.
Заодно учил ребят код-стайлу - и почему это важно.

В воскресенье рано утром я ехал домой вести курс — час в дороге, и вот ты в пустой квартире. Удачно, что в это время никто обычно не сверлит, не устраивает домашних дискотек и так далее.

Разложиться - почти как к концерту подготовиться. Процесс занимал минут 20-30. Я доставал большую сумку (там хранились монитор, провода, переходники, гарнитура), заваривал чай и начинал все расставлять и настраивать для эфира.

  • переставлял стол;

  • приносил детское кресло — на него ставился трипод для камеры;

  • доставал удлинитель на 5 розеток, запитывал монитор, принтер, ноут и телефон;

  • включал авиарежим на телефоне;

  • выключал Docker — на втором стриме ноут гудел очень сильно, а когда я полез разбираться, оказалось, рабочие проекты Skyeng крутились в фоне;

  • заходил в VSCode, создавал папку и пустые проекты — чтобы на стриме переключил экраны и все готово;

  • и, конечно, отключал все нотификации на телефоне.

Бэкенд. Коробка из-под обуви очень выручала.
Бэкенд. Коробка из-под обуви очень выручала.

Чтобы ничего не забыть, я завел чек-лист подготовки и шел по нему. Минут за 15 до занятия все было готово — оставалось запустить клиент OBS, проверить настройки (включен ли чат, не сбились ли битрейты) и быть готовым выйти в эфир.

Фронтенд. Это мы разбираем проекты ребят на финальном занятии.
Фронтенд. Это мы разбираем проекты ребят на финальном занятии.

Казалось, к третьему занятию все наладилось. Но затем возникла новая проблема.

Они не делают домашки... Что делать?

Ребята активно подключались к лекциям. А вот задачи между стримами делали не так хорошо. Тогда я придумал конкурс: ввел систему рейтинга и объявил, что лишь те, кто решит все 12 задачек и пришлет их до майских, получат доступ к финальным проекту. 

В качестве финальных проектов я выбрал “Арканоид” и “Тир”.
В качестве финальных проектов я выбрал “Арканоид” и “Тир”.

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

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

Желтым отмечены как раз такие необычности.
Желтым отмечены как раз такие необычности.

Домашки участников конкурса я перепроверял вручную — 15 человек, 12 решений. 180 раз я запускал программу. Сидел в субботу до двух ночи, так как обещал, что в воскресенье на предпоследнем занятии объявлю результаты. 

Я рассказал ребятам про финальные проекты, а также подсказал классный хостинг — Surge, там можно бесплатно и быстро (просто из командной строки, без регистрации) размещать фронтовые проекты. Так мы разошлись “до после майских” и финального стрима, где я обещал разобрать их готовые проекты. 

Студенты делятся на два типа

Несколько ответов из формы заявки на курс — с какими ожиданиями приходили люди:

Хочу

Чтобы программировать разные штуки)

Не хватает знаний JS, чтоб писать автоесты. Ну и просто это очень интересно! :)

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

За месяц группа поредела на две трети. Я сел анализировать, почему так. И быстро заметил, что студенты поделились на две категории: те, у кого все получалось почти самостоятельно. И те, у кого “скобки не ставились”.

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

Люди думали, что интерпретатор их поймет, но... нет. Нам, разработчикам, многие вещи кажутся очевидными. Например, что у языка жесткий синтаксис — фигурные, круглые скобки, точка с запятой. Или то, что переменные вне и внутри функции, даже если обе названы А, они разные — это же две разные области видимости. И даже когда ты это показал и рассказал, не факт, что человек все уяснил. 

Бывали и обратные случаи: ученик сразу пробовал отправлять запросы на сервера, изучать фреймворки — еще не разобравшись с базовыми вещами. Это выглядело как попытка сразу перескочить из 1-го класса в 5-й. И примерно также оканчивалось...

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

Что по итогу

  • 49 человек зарегистрировалось, примерно столько же смотрело прямые эфиры.

  • 15 человек решили все задачи, финальный проект сделали 4. Один дослал проект через полгода. 

  • Один студент — тот самый новичок, решил продолжать развитие в веб-разработке. Он пошел на другие, уже платные курсы, плюс мы потихоньку продолжили изучение технологий и пилили пет-проекты. За год он дорос до уровня джуна: разместил резюме и сейчас ходит на собеседования. 

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

Кстати, про деньги. Хотя курс был бесплатным, еще в анонсе я заявлял, что не против донатов. И после первого занятия (того самого, с глючным зумом) завел форму для сбора денег.

От первого к последнему занятию динамика выглядела так.
От первого к последнему занятию динамика выглядела так.

Всего набралось около 7 тысяч рублей. На один из первых донатов я купил пару переходников для монитора, чтобы улучшить стримы. На оставшееся — оплатил небольшое обучение себе.

Вот как-то так прошла моя самоизоляция.

А еще, от курса остались артефакты:

Если вы думали делать свои уроки или искали простые задачки по JS, надеюсь, вам пригодится.