Академия началась 10 лет назад с интерактивных тренажёров по вёрстке, которые сделал Саша Першин, но довольно быстро появились и полноценные интенсивные курсы для верстальщиков. Через какое-то время добавились курсы по JavaScript, а потом и по PHP. 

Всё это добро нужно было кому-то вести — сначала всё делали Саша и Лёша Симоненко, а потом появились и другие авторы. Некоторых вы и без меня хорошо знаете — например, Вадима Макеева. А всего за 10 лет у профкурсов Академии было 14 авторов. При этом автор — не наставник и не преподаватель в привычном смысле. Он не занимается отдельно с каждым студентом и не проверяет домашние задания и итоговые проекты. 

Чтобы узнать, чем на самом деле занимаются авторы, я подловил их в тёмном коридоре и задал кучу неудобных вопросов. Поговорили о работе авторов, секретах профессии, революциях в вебе, HTML 6 и ответственности за судьбы людей.

Привет. Расскажите, кто вы, чем занимаетесь и что любите делать больше всего?

Андрей Серёдкин: Джуниор-верстальщик и автор курсов в Академии (смеется) Нет, только автор курсов по вёрстке в Академии. Люблю играть в Splatoon и BOTW на Nintendo Switch.

Коля Шабалин: Автор профессиональных курсов в направлении HTML.

Кирилл Сенкевич: Автор курсов по PHP. Занимаюсь этим больше пяти лет, а всего в разработке 12 лет. Мне кажется, лучше всего у меня получается планировать работу, дробить её на отдельные этапы и уточнять требования.

Игорь Антонов: Автор курсов по JavaScript и техлид в HTML Academy. Пишу код с 2006 года. Люблю программировать и писать технические статьи.

Кто такой автор? Писать курс — это как? Что нужно уметь?

Кирилл: Нужно объяснять вещи простым языком и влезать в шкуру студента. Тебе может быть понятно всё, но студент при этом не понимает ни слова. Ещё нужно уметь структурировать информацию — чтобы не перегружать студентов, но раскрывать всю нужную теорию.

Коля: Моя версия — подбирать слова и быть сдержанным. Смотреть, что бывает в окружающем мире, понимать, какие приёмы использовать, а какие лучше не надо.

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

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

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

Правда, что автор курсов должен сначала поработать программистом, а только потом идти в авторы?

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

Кирилл: Я согласен, нужно отработать хотя бы 3-4 года. Это время, за которое можно стать опытным разработчиком и поучаствовать в проектах разной сложности. 

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

Игорь: Я скорее согласен с Колей и Кириллом. Многие вещи невозможно рассказать, пока сам не попробуешь и не набьешь кучу шишек.

На что похожа работа автора?

Игорь: Это смесь работы профессиональным разработчиком (потому что пишем код), тимлидом (потому что делаем ревью кода) и журналистом (потому что пишем статьи).

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

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

Кирилл: Это смесь из разработки и творчества. Первая часть — когда делаешь демонстрации, примеры кода. Вторая часть — творческая, когда ты как автор пишешь учебник.

Писать учебник — это как? Садишься и пишешь каждый день по 20 страниц как книжку?

Андрей: Нет. Это сложная командная работа. Написание курса — это очень много обсуждений, разговоров, споров и анализа. Чтобы учить, нужно понимать, чему учить, а эти вещи нужно сначала самому найти. Поэтому написание это, как ни странно, очень много чтения.

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

Так что если говорить о том, что делается каждый день — все понемножку. 

Что такое курс на выходе? Большой вордовский файл?

Коля: Нет. Это сервис, сайт для обучения студентов. Там уже есть всё, что нужно. Оно разложено по полочкам, в нужный момент о себе напомнит, протестирует, задаст вопросы.

Андрей: То, что видят студенты — и есть рабочий материал. Курс существует внутри интерфейса, а его контент — внутри репозитория. Эти вещи мы и обновляем. Нет какого-то отдельного места для хранения. Каждый поток — отдельный репозиторий.

Игорь, а правда, что в учебнике по Node.js миллион знаков?

Игорь: Правда, их почти 1 400 000. Два тома «Войны и мира».

Его вообще реально прочитать целиком?

Игорь: Да, я же его написал (смеётся).

Бывает ли у вас ощущение «Да о чём тут ещё рассказывать» перед очередным обновлением курса?

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

Коля: А у меня не было ни разу. Потому что стандарты развиваются, каждый месяц выходит по одной новой спецификации, которую внедрят через 5-8 лет, а значит, в любой момент времени есть спецификация, которую можно внедрить сейчас.

С вами над курсами в Академии работает много людей. Расскажите вкратце, кто они?

Андрей: Давай расскажу на примере курсов по вёрстке. Мы пишем курсы вдвоём с Колей. Второй автор — важная роль, в общении с другим человеком можно понять плюсы и минусы написанного.

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

Кураторы и адвайзеры — ещё одни руки, которые помогают при работе со студентами, своеобразная техподдержка, да и просто поддержка. Разработка помогает с интерфейсом курса. Контентщики пишут много статей, которые мы добавляем в учебные материалы.

Ну и господин Першин — методист, помогает в определении направления программы.

Кирилл: Добавлю, что на курсах по PHP кураторы помогают с технической частью, занести задания в репозиторий, найти ошибки в тексте, вычитку сделать. Иногда привлекаем сторонних людей, например, для курса по Laravel мы привлекли стороннего разработчика для консультаций и написания кода.

Как взаимодействуете со студентами? 

Коля: Давайте отвечу за всех. Всё начинается со знакомства на первом лайве и ответов на вопросы вживую. Дальше мы можем встретиться в студенческом чате в Дискорде. Третье — личная жизнь.Например, ко мне в соцсети может прийти любой студент и сказать «Коля, помоги перед первым собеседованием». Я помогаю.

Студенты не бесят? 

Коля, Андрей, Кирилл одновременно: Нет!

Игорь: Нет, не бесят. Общение со студентами — челлендж. Если они не понимают материал, то нужно пересмотреть повествование и сделать материал более простым и понятным.

Чего студентам точно не надо делать, чтобы успешно защититься?

Коля: Сейчас будет сложный ответ. Не ежедневно верстать и читать материалы. Думать о том, что «Не буду делать ничего в течение недели, а потом в субботу и воскресенье доделаю» — так не заработает. Не надо отвлекаться на посторонние вещи. 

У нас процесс обучения плотный, мы сразу предупреждаем студентов, что у них не будет времени на то, что мешает учёбе. Работать параллельно с курсом можно, но каждый день тусить с друзьями на вечеринках и марафонить сериалы времени точно не будет.

Игорь: Да, всё так. Есть соблазн, что в начале может быть слишком легко, но нагрузка меняется и можно наломать дров, если бежать вперед. А так студентам нужно обязательно читать все материалы, которые даются при подготовке к лайвам.

Чувствуете ли вы ответственность за судьбы студентов? 

Андрей: Я думаю, что люди влияют на свои судьбы сами. Мы можем помогать, упрощать моменты, связанные с пониманием разработки, но обычно студенты делают всё сами.

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

Технологии, спецификации, революции 

Это правда, что вы постоянно читаете спецификации? Что там интересного из свежего?

Коля: Да. Читаю спеки HTML еженедельно, но хотелось бы ежедневно. Из последнего читал про каскадные слои и это взорвало мне мозг, потому что это новая технология, которая только будет внедряться. И пока непонятно, для чего она нужна и для каких задач подходит. Я пока придумал одну типовую задачу — сторонние виджеты на сайте.

Андрей: Да, я тоже регулярно читаю спеку. Если что-то непонятно, то вместо поиска по форумам иду и читаю документацию. Например, недавно я читал про создание тултипов и доступность тултипов через aria-атрибуты или элементы взаимодействия.

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

Кирилл: Последнее из нового в PHP — типизация, близкая к уровню Java в последних версиях. Это очень круто. 

Коля, Андрей, когда нам ждать HTML6? 

Коля: Никогда, если не придут бунтари. HTML 5 это живой, вечнозелёный стандарт.

Андрей: Согласен, что HTML6 никогда не будет. Потому что HTML развивается эволюционно, и HTML не отменял то, что было раньше, он дополнял. 

Ну хотя бы JavaScript чем-нибудь новым заменят?

Игорь: Вряд ли. Это сложная задача, да и никто не захочет отказываться от миллионов уже существующих приложений. Поэтому и развивают обратную совместимость. Хороший пример — TypeScript. Он приносит много полезностей для разработчика, но не заменяет JavaScript.

Нужна ли вебу революция? Какой она должна быть?

Кирилл: Это так не работает, это невозможно. Таких революций история технологий не знает, может, только Flash. Веб-технологии развиваются эволюционно, а с чистого листа никогда.

Андрей: Кажется, это не очень хорошая идея, потому что это как «Всё плохо, давай переделывать». В итоге мы придём к такому же моменту, где находимся сейчас, а время потеряем.

Коля: Думаю, что революция не нужна. Конечно, в вебе куча проблем. Чтобы сверстать форму, можно знать всё про формы, быть гением форм. Но при этом можно подключить библиотеку и снять проблемы.

Что вас больше всего раздражает в ваших языках?

Игорь: Раздражает API в JavaScript. Местами он странный и разрозненный, потому что проектировался в разное время. Например, не всегда из названия функции или метода понятно, как эта штука работает. Другая проблема: многие вещи можно сделать несколькими способами. С одной стороны это хорошо, а с другой «зачем», да и как объяснить выбор новичку?

Плюс есть сложные темы, в которые нужно погрузиться, чтобы понять. Например, Event Loop, контекст или ООП, в котором используется прототипное наследование.

Кирилл: В PHP самая раздражающая вещь в том, что все до сих пор считают, что он 3 или 4 версии. В этом отчасти есть здравое зерно, потому что правда есть много легаси и плохих решений. Но в целом язык уже вырос, и сейчас меня раздражает только его имидж. Очевидно, что PHP не умирает.

Кирилл, к вопросу об имидже. Все говорят, что пора уходить с PHP на Go

Кирилл: А зачем уходить, если можно совмещать? Go — язык довольно узкого применения по сравнению с PHP. У Go есть свои плюсы, но это довольно нишевый язык, в том плане, что невозможно переписать всё с PHP на Go 1 в 1. А вот выучить стоит — хотя бы для повышения своей ценности, общего развития и для того, чтобы если встанет задача на проекте, которая лучше решается на Go, решить её.

А верстальщикам чего не хватает для счастья? 

Коля: Быстрого внедрения новых CSS-свойств. Ещё нет новых HTML-тегов. Ну и хочется, чтобы все тесты писались быстрее.

Андрей: Не хватает более тонкой работы над типографикой. Например, починить параметр line-height, который не совсем совпадает с книжной типографикой. Но это мелочи — так-то всего хватает.

Когда у веб-разработчика наступает середина карьеры?

Кирилл: У меня есть мнение, с которым могут не согласиться. Продолжительность карьеры разработчика 7-10 лет. Дальше можно продолжать, но это довольно грустно, потому что зарплата не растет, новых вызовов нет, большинство проектов не требуют десятилетнего опыта, поэтому разработчика легко могут заменить. Поэтому нужно идти в управление — тимлиды, техлиды и так далее.

Раскройте секрет — чего не рассказывают на курсах, но что потом встречается в реальной работе?

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

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

Игорь: Как минимум, на работе приходится не только применять навыки программирования, но и сталкиваться с другими инструментами — например, с консольными утилитами.

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

Лайвы и теннисные мячики

Каждую неделю вы ведёте лайвы, где полтора-два часа что-то рассказываете студентам. Как вы готовитесь?

Андрей: Если это новый материал, который я ещё не рассказывал, то устраиваем прогон лайва без зрителей. За счет этого ещё и время отмеряем. Только я не учу наизусть, а делаю как преподы по математике — как бы вывожу всё, что скажу, по тем материалам, которые уже есть.

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

Раз в неделю у вас полтора часа со специалистом по речи.Постановка речи — сложное занятие?

Коля: Невероятное сложное. Я не выговариваю Р и Л. Самое сложное упражнение — на выговаривание этих букв. А кроме этого тяжёлое упражнение на темпоритм — нужно управлять скоростью речи и балансировать ей по шкале от 1 до 9. Долго объяснять подробнее :)

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

В каждой студии, где проводятся лайвы, лежат теннисные мячики. Зачем они?

Коля: Это как раз инструмент для работы с речью. С помощью мячиков мы тренируем произношение. А ещё они постоянно пропадают.

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

Про уверенность в своих силах

Важно ли верить в то, что делаешь? 

Коля: Да. Особенно мне — я человек-сомнение.

Андрей: Да. Если мы учили пользоваться инструментом, а потом поняли, что это плохой инструмент, мы внутри команды обсуждаем это дело. И если все согласны, что он не ок, то проще его убрать. Но вот, например, Pixel Perfect никто не любит, но на начальном этапе это хороший инструмент, чтобы натренировать насмотренность.

Чувствуете себя звездами?

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

Андрей:Есть некоторое волнение перед людьми, но прям звездой, наверное, нет. На улицах ещё не узнают и фанатки не бегают. 

Коля: Вообще ноль. Один раз ко мне с журфака какого-то университета пришли и взяли интервью, но потом не было никакой обратной связи. Так что нет, звездой я себя не чувствую.

У вас есть сайд-проекты? 

Коля: Я человек с миллионом сайд-проектов. На 3 месте «Петрович» — склонятор фамилий и имён в онлайне. 2 место — генератор рандомной строки. 1 место — сервис по поиску статей по веб-разработке. Ещё я с недавнего времени составляю фронтенд-новости.

Игорь: Да, несколько пет-проектов. На них я тренируюсь в изучении новых технологии. Самый многострадальный — блог, у меня есть движок блога, который я постоянно перепиливаю. Второе — система мотивации моих детей, где можно оставить задачу и получить вознаграждение и ачивку за выполнение. Ещё я вхожу программный комитет Podlodka TechLead Crew и помогаю организовывать онлайн-конференции.

Андрей: А у меня нет. Я считаю, что если сайд-проект появляется, то он живет внутри работы. Соблюдаю ворк-лайф баланс.

Чем будешь заниматься, если фронтенд запретят?

Кирилл: Буду заниматься трафиком.

Андрей: Пойду копать каналы (смеется). Пойду в психологи или коучи. 

Игорь: Буду заниматься другой разработкой — я же начинал с десктопа на Delphi. Так что писал бы под мобилку или под десктоп. 

Коля: А я создам подпольную штаб-квартиру по изучению фронтенда. 

Если вы тоже хотите когда-нибудь создать подпольную штаб-квартиру по изучению фронтенда или просто любите выступать, делиться опытом и пишете код на JavaScript, React или Node.js, то давайте знакомиться. Напишите Соне — её контакты внутри ссылок, а она расскажет, что делать дальше.

Скоро стартует 32 поток нашего курса-долгожителя про профессиональную вёрстку сайтов. Кто-то из читателей запомнил его как «Базовый HTML и CSS» или даже как «Разработку веб-интерфейсов с помощью HTML и CSS». 

32 поток — знаковый для нас, и к его началу мы подготовили самое глобальное и серьёзное обновление курса за всю историю. Работа над ним заняла целых девять месяцев!

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

Обновление критериев качества

Критерии — это боль для авторов (серьёзно, их очень сложно делать и обсуждать), но это и сердце каждого курса, ведь всё начинается с них.

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

Зачем вообще было обновлять критерии

Ведь они и без того шлифовались от потока к потоку, зачем лишняя работа?

Ответ прост — в старой системе критериев накопилось очень много «технического долга». В индустрии многое изменилось за последние годы, и это повлияло и на то, как нужно верстать: случились пришествие флексов и гридов, отказ от ИЕ, переход с Фотошопа на Фигму. С ударами мы справлялись, латали отдельные критерии, но вся система страдала: копились противоречия и слепые пятна.

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

Здесь же отметим то, что нас особенно радует в новых критериях:

1. Критерии полностью синхронизированы с требованиями рынка и «Лиги А.». Представители Лиги Академии участвовали в разработке критериев от первых черновиков до окончательной шлифовки формулировок. Напоминаем, что «Лига А.» — это фронтенд-аутсорс Академии, в котором выпускники профессий работают над коммерческими проектами.

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

3. Мы избавились от «всенародно любимых» критериев-сборников наподобие «Б4. Грубые ошибки в разметке» (тут олды должны всплакнуть) и заменили их отдельными критериями с чётким перечнем правил проверки.

4. Система критериев свежа, бодра и актуальна, как резвый кот в четыре часа ночи, и прослужит нам ещё много лет.

С гордостью показываем финальный результат, о котором мы уже рассказывали в блоге. 

Обновления проектов

С их помощью которых студенты закрепляют учебный материал и оттачивают навыки.

На заре существования Академии проекты для курсов полностью зависели от дизайнера. В письме я просто перечислял примерные блоки, которые должны быть на макете («шапка, подвал, список товаров, форма входа и так далее»), а всё остальное дизайнер определял сам.

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

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

Поэтому мы решили не просто обновить макеты, а сделать это серьёзно и по науке! И провели предварительное исследование (ещё в конце 2020 года).

Сначала мы написали бота-скриншотера, который прошёлся по нескольким тысячам популярных сайтов и отскриншотил их. Потом методом «пристального взгляда» мы отсмотрели скриншоты и выделили типовые элементы интерфейса.

Затем мы попросили у «Лиги А.» (а у неё на тот момент было уже более 500 выполненных проектов) описать типовые элементы макетов, которые им приходится часто делать, и особенно те элементы, с вёрсткой которых у выпускников возникают проблемы.

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

В конце концов у нас появилась библиотека компонентов, которые чаще всего встречаются в современных интерфейсах. И из этих компонентов мы собрали новые учебные и личные макеты.

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

Можете полюбоваться обновлённым учебным проектом «Барбершоп».

Вёрстка учебного проекта

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

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

Пытались ли вы посадить рядом трёх взрослых мужиков и сделать так, чтобы они договорились о том, каким должен быть код? Пытались ли вы это сделать на десяти проектах подряд? Вот, то-то же. А теперь немного хронологии.

Ладно, давай обернём эти поля формы в тег <p>, а за это ты сможешь ставить точки в конце альтов

Март 2021 года. На руках у нас есть критерии и есть макет обновлённого учебного проекта. Мы планируем за недельку сделать его вёрстку и за пару неделек разбить её на шаги. В итоге на это ушло не три недели, а два месяца, Карл!

Что это за шаги вообще? Каждый шаг — это законченный этап работы, который может включать одну или несколько завершённых задач. Например, для вёрстки это могут быть разметка, сетки и так далее. Задачи в шаги можно объединять по-разному, но важно, чтобы эти задачи хорошо сочетались, и трудоёмкость шагов была равномерной.

Мы сделали конечную реализацию и стали планировать шаги. Получилось девять. Ок. Давайте писать код.

И тут выяснилось, что самое сложное не написать код, а договориться о конечном варианте. Было жарко, были и разумные аргументы, и шантаж, и торги разработческими фетишами: «Ладно, давай обернём эти поля формы в тег <p>, а за это ты сможешь ставить точки в конце альтов». Кстати, если у вас есть свои «специфические вкусы» в коде, вроде любви к тегу <b>, поделитесь в комментариях.

И всё-таки мы справились. Мы получили девять полностью готовых состояний проекта, больше 9000 строчек кода на HTML и CSS и полное понимание того, какие именно задачи нужно решить ученику на каждом этапе. И как бонус, полное взаимопонимание и согласие между авторами.

Це-ле-по-ла-га-ни-е

Это самая нудная, но важная, но скучная, но важная часть.

Вопрос: «А что мы учим делать на этом курсе?».

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

Ответ: «Учим делать идеальную вёрстку без адаптива в идеальных условиях»

Почему так, почему без адаптива, что такое идеальные условия?

Начнём с «идеальных условий». Такие условия наступают, когда верстальщик полностью контролирует свою разметку и у него достаточно времени, чтобы написать идеальный код. И ещё отсутствуют специфические требования, наподобие максимального приоритета скорости загрузки интерфейса над всем остальным. Чаще всего такое происходит при работе над интерфейсами в продуктовых компаниях.

Почему «без адаптива»? Максимально упрощённо: адаптив — это когда верстается не один компонент, а несколько его версий, по сути, несколько компонентов. Да, нужно продумать, как одна версия будет превращаться в другую. Но необходимый фундамент — это умение верстать отдельные компоненты, причём их самые сложные версии (то есть десктопные).

Зачем учить делать «идеальную вёрстку» и «идеальный код»? Потому что это самая сложная задача, и будущие крутые разработчики (а ведь крутым разработчиком хочет стать каждый) должны уметь решать задачи максимального уровня сложности. Вот какой ты сильный разработчик, если не можешь решить задачу на первоклассном уровне?

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

Думаю, теперь понятна роль каждого курса в профессии «Фронтенд-разработчик»:

1. HTML и CSS. Профессиональная вёрстка сайтов — «идеальная» вёрстка без адаптивности.

2. HTML и CSS. Адаптивная вёрстка и автоматизация — «идеальная» адаптивная вёрстка плюс инструменты автоматизации.

3. JavaScript. Профессиональная разработка веб-интерфейсов — «идеальная» реализация интерактивных компонентов на чистом JavaScript.

4. Подготовка вёрстки для cистем управления контентом (CMS) — «неидеальная» вёрстка в специфических условиях, связанных с системами управления контентом (например, часто теряется возможность контролировать разметку, ведь контент создаётся кем-то другим).

5. Вёрстка React-компонентов — «неидеальная» вёрстка с учётом требований экосистемы React.

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

Обновление программы

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

• определились, чему же мы учим (идеальная вёрстка в идеальных условиях),

• изучили рынок и собрали коллекцию компонентов интерфейсов,

• с помощью этой коллекции отрисовали обновлённые макеты,

• обновили систему критериев,

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

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

1. Для каждого шага анализируем код проекта,

2. Описываем задачи, которые решаются на этом шаге,

3. Подбираем материалы, которые нужны, чтобы научиться эти задачи решать.

Вот и весь алгоритм.

Намного интереснее сравнить новую программу и старую:

• В новой программе нагрузка распределена намного равномерней, чем в старой. Мы точно знали, какой объём кода нужно написать ученикам на каждом шаге и какова его сложность, поэтому смогли намного точнее определить время на изучение материалов и выполнение домашек. Например, теперь у нас три раздела про сетки вместо двух, а времени на эти разделы выделено в два раза больше!

• Ушли разделы про вёрстку контентных элементов и про JavaScript. Вёрстка контента – это специфическая задача, которая полностью раскрывается в отдельном курсе про вёрстку для CMS. А JavaScript и так уже отлично раскрывается в отдельном курсе профессии, поэтому мы просто избавились от дублирования.

• Ушёл и отдельный раздел про доступность. Но не потому что она вдруг стала не важна. Наоборот — мы «встроили» доступность в каждый раздел, теперь это неотъемлемая часть курса.

• В прошлой версии программы мы очень подробно рассказывали про отдельные этапы вёрстки (разметку, сетки и так далее), но не собирали всё воедино. В новой программе мы в начальных разделах подробно разбираем этапы вёрстки, а в завершающих разделах верстаем компоненты с нуля.

• В конце курса мы добавили новый раздел, который всегда так хотели: шлифовка итогового проекта по критериям и подготовка его к защите. Да-да, лектор вживую проходится по учебному проекту, проверяет его по критериям, находит ошибки и  исправляет их. Полностью, досконально, до честных 100%.

А тем временем уже 20 сентября стартует профессия «Фронтенд-разработчик», в которую входит обновлённый курс. Пройдите интенсивное обучение с наставниками на пяти курсах и производственный этап — грейдирование, прокачку скорости и качества работы в «Акселераторе» и оплачиваемую стажировку в «Лиге А.». Чтобы получить скидку 10 000 ₽, напишите нашему телеграм-боту, что хотите скидку. Мы расскажем, что делать дальше.

Не зря говорят, что геймдев безжалостен (и особенно к новичкам).

Rovio сделали Angry Birds с какой-там-сорок-с-лишним попытки, всякие новички регулярно проваливают ответственную задачу по доделыванию своих инди пиксельных платформеров на юнити, Башурова вон вообще забанил Эпл, хотя казалось бы — целый Башуров. Короче, жуть и ужас.

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

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

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

Ну и вот. Каждый Новый год мы наносим немного пользы сообществу и делаем тренажёры бесплатными, оборачивая это в какую-нибудь игровую механику в известном сеттинге. То «Очень странные дела», то космические приключения на Джаваскриптоне, а в этом году вообще замахнулись на Киберпанк. 

«Ну замахнулись и замахнулись, зачем об этом писать?» — подумает читатель и будет прав. То есть технически мы уже шестой год делаем какие-то новогодние игры, но только в 2021 попробовали сделать полноценную онлайн-игру с экономикой, рейдами, боссами и всем таким, ММОРПГшным.

То есть представьте: игроки делятся на 170 гильдий, каждая со своим чатом, нужно победить 7 боссов (у каждого своя история и локация), а ещё для самых бодрых работает ПвП-арена. А кор-механика — тренажёры по вёрстке, JavaScript и PHP. То есть быстро и много решаешь — супер, так держать. Тому, кто решал быстрее и больше всех, даже выдали бесплатное обучение на профессии, которое в мирное время стоит ого-го сколько. Ну и все тренажёры тоже бесплатные, даже те, которые обычно платные. 

Я смотрел в грустные глаза наших разработчиков примерно два месяца — весь ноябрь и декабрь 2020 ушли на разработку. На фронте React, на бэкенде PHP и Slim Framework. Для игры выделили выделенный сервер: 1 CPU, 2 Gb Ram, 50 GB HDD (чувствуете надвигающиеся грабли, да?).

Казалось бы, что может пойти не так. А пошло примерно всё (разве что, в отличие от настоящего CYBERPUNK 2077, релиз не перенесли). И перед тем, как начать второй сезон (хотфикс, если хотите), мы решили этим поделиться, чтобы вы не повторяли наших ошибок.

Грабли №1. Вовлечение игроков

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

Основная механика: решать задания по вёрстке и умнеть. Хорошо, если получится заработать за решение достаточно игровой валюты и забрать в игровом магазине главный приз, который существует в единственном экземпляре. Ну или потратить всё на скидки на другие продукты.

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

Главная грабля: мы недооценили упорство людей. Игроки решали задачи без перерывов на сон и отдых (и это 1 января!), в итоге главный приз был получен за считанные часы. За него всерьёз боролись два участника, и один из них просто пошёл часок подремать. В это время всё и случилось.

Мы даже взяли интервью у победителя — говорит, пил воду, ел пиццу, решал задания. Ничего необычного.

Продумывайте заранее, чем вы будете удерживать людей в игре.

Грабли №2. Так себе экономика

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

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

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

Грабли №3. Читеры

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

Арена устроена так:

1. Два человека получают одно и то же задание — сверстать или запрограммировать что-то.

2. Кто быстрее сделал, тот и победил. Деньги, слава, вот это всё.

Главная читерная механика была такая

1. У каждой из 170 гильдий был свой чат в телеграме. 

2. Участники сливали ответы на задания в чатах.

3. Люди заходили на арену, видели задание, быстро искали его в чате, и копипастили результат.

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

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

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

Грабли №5. Игровой баланс

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

Как было на самом деле: люди хотели наносить урон, но не было возможности, так как в каждом рейде было ограниченное количество заданий, а здоровья у боссов было слишком много. А ещё из-за проблем с экономикой (всё купили и разошлись) активность к последним рейдам снизилась, в итоге из семи боссов «уронили» только трёх первых.

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

На баланс влияют все части игры — тут важны и экономика, и мета, и вовлечение. Если где-то перекос, то всё упадёт.

Это всё, что касалось геймдизайна. Но не геймдизайном единым.

Грабли №6. А что тут вообще происходит?

Это моя личная редакторская боль.

Мы всем отделом планировали, что в игре будет большая красивая история про персонажей и боссов: сюжет, сеттинг, разные локации, шутки и прикольчики и вот эти все дела. Мы написали огромный документ про боссов, город Скриптомск (это вместо Найт-сити) и вообще обо всём, что происходит в таинственном мире киберпанка. Короче, вообще ни разу не сюжет игры Doom.

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

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

Во втором сезоне упростили ещё — для этого в таск-трекере появилась задача «Переписать текст главной страницы так, чтобы его понял даже медведь». Ну и переписали.

Перепишите тексты так, чтобы их понял даже медведь

Грабли №7. Технические проблемы

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

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

Сами себя заддосили. Уже после запуска разработчикам пришлось допиливать архитектуру. Некоторые места были написаны так, что при одном заходе на страницу рейда генерировалось несколько хитов, в итоге условные 1000 одновременных пользователей генерировали от 2 до 3 тысяч запросов к API. Для однопроцессорного сервера это оказалось чересчур и он снова торжественно прилёг, оставив разработчиков разбираться с этим в ночи.

Баги. Куда же без них. Свидетели говорят, что мониторинги звенели всю неделю. Случались кривые запросы, начисление очков не тем и не туда, undefined на проде (мама). Всю неделю разработка чинила разные баги — буквально днями и ночами — а поддержка поддерживала страждущих и заводила тикеты. В рабочих чатах было много интересных диалогов, которые всё равно из-за цензуры сюда постить нельзя.

На сайте @htmlacademy_ru проходит новогодняя битва HtmlPunk, в качестве награды за участие можно получить undefined коинов, присоединяйтесь если вы is not a function https://htmlacademy.ru

Пятиминутка React, 1 января 2021

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

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

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

Но нам понравилось и мы хотим ещё. Поэтому мы учли ошибки и запустили второй сезон как раз под майские праздники — и он начинается сегодня в полночь. Там меньше боссов, больше активности и меньше простора для читеров. И бесплатные тренажёры, причём даже те, которые обычно платные.

Главный приз второго сезона — курс по профессиональной верстке сайтов, и тут уже за 16 часов не отделаться. Приходите, если пока не придумали, как провести 11 выходных (ну или семь, у кого как).