Веб-технологии для дизайнеров — возвращаю долг

При чём здесь апельсины? Просто они — оранжевыеЕсть у меня долг перед Хабром. Два года назад я написал статью «Веб-технологии для дизайнеров — зачем и как», а продолжение статьи так и не выпустил.

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

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


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

  1. Борьба с рутиной в Скетче при помощи Крафта и JSON
  2. Как взять данные с сайта, превратить их в JSON и скормить Скетчу
  3. Простой способ создать прототип новой версии продукта при помощи Stylish
  4. Как создать расширение для браузера


Эти видео люди смотрели и лайкали. Всё выглядело так, что можно начинать разбирать тему более подробно. Поэтому я создал пример с шаблонизацией данных и записал про него вводное видео «Урок №−1: Почему у дизйнеров не получается изучать веб-технологии». Видео посмотрели 1296 раз, 83 раза лайкнули и 7 раз дизлайкнули.

Я хотел, чтобы пример был похож на реальный. Но большинству зрителей он показался слишком сложным. Чтобы объяснить принципы его работы, я записал разбор упрощённого примера: «Упрощённый пример шаблонизации данных».

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

И я начал записывать первые видео:

  1. Синтаксис JS
  2. Переменные
  3. Функции
  4. Объекты
  5. Массивы
  6. JSON


Видео получались длинными, по 15—20 минут каждое, и мало кто мог их досмотреть до конца. Поэтому я начал дробить темы на более мелкие. Например, разбор условных операторов выглядел так:

  1. Условные операторы: Основы
  2. Булевы значения и операторы сравнения
  3. Приведение типов к логическому
  4. Логические операции
  5. Тернарный оператор
  6. Условное присваивание
  7. Разбор домашки


Такой же набор видео я записал про основы работы с DOM:

  1. DOM: Основы
  2. Поиск узлов на странице
  3. Чтение свойств узлов и их содержимого
  4. Редактирование узлов
  5. Обход дерева узлов

  6. Разбор домашки


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

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

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

  1. Нашёл классный сэндокс для работы с кодом: codesandbox.io. В нём можно создавать не только отдельные кусочки как в codepen.io, но и целые проекты с файловой структурой.
  2. Научился работать с программой ScreenFlow, которая оказалась весьма удобной для монтажа скринкастов.
  3. Писать звук в бытовых условиях лучше на петличку, чем на большой микрофон. Добиться сносного качества гораздо проще, так как не приходится бороться с эхо от стен.
  4. Писать видео можно на телефон, но нужно немного сноровки. Например, в последних видео у меня очень низкое качество записи, а картинка постоянно прыгает. Похоже, это какая-то особенность стабилизации видео у Note 9.
  5. Надо сразу покупать свет. Два софтбокса с АлиЭкспресс обошлись в 3000₽, а качество видео стало заметно лучше.
  6. Узнал, что всю жизнь неправильно называл «тернанрный» оператор «тринарным».
  7. Перед записью видео лучше проверить произношение всех иностранных слов, а то потом будет стыдно. :)


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

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

P.P. S.: Если вам интересно следить за развитием курса, то есть Телеграм-канал detepr. Засорять Хабр статьями про основы разработки — рука не поднимается. Так что следующую статью про курс напишу где-то через пол года.

© Habrahabr.ru