Веб-технологии для дизайнеров — возвращаю долг
Есть у меня долг перед Хабром. Два года назад я написал статью «Веб-технологии для дизайнеров — зачем и как», а продолжение статьи так и не выпустил.
И вот, наконец, я могу вернуть часть этого долга. Весь ноябрь по утрам и выходным я записывал обучающие видео про JS для дизайнеров. По ходу проекта экспериментировал с разными форматами, оборудованием и постобработкой. В этом посте я подведу итог месяца работы над курсом и расскажу о том, чему научился сам, пока его записывал.
Перед курсом стояли две задачи:
- помочь дизайнерам увидеть как знание технологий им может пригодиться в повседневной работе;
- тем дизайнерам, которые захотят изучать технологии, дать лёгкую площадку для старта.
Для решения первой задачи, я записал несколько коротких видео, призванных помочь дизайнерам увидеть новые подходы к работе:
- Борьба с рутиной в Скетче при помощи Крафта и JSON
- Как взять данные с сайта, превратить их в JSON и скормить Скетчу
- Простой способ создать прототип новой версии продукта при помощи Stylish
- Как создать расширение для браузера
Эти видео люди смотрели и лайкали. Всё выглядело так, что можно начинать разбирать тему более подробно. Поэтому я создал пример с шаблонизацией данных и записал про него вводное видео «Урок №−1: Почему у дизйнеров не получается изучать веб-технологии». Видео посмотрели 1296 раз, 83 раза лайкнули и 7 раз дизлайкнули.
Я хотел, чтобы пример был похож на реальный. Но большинству зрителей он показался слишком сложным. Чтобы объяснить принципы его работы, я записал разбор упрощённого примера: «Упрощённый пример шаблонизации данных».
Дальше план был такой: разбирать на основе этого примера разные темы про JS, чтобы с каждым уроком пример становился всё понятнее. А потом, когда люди поймут основы — переписать пример из чистого JS на React и начать курс про него.
И я начал записывать первые видео:
- Синтаксис JS
- Переменные
- Функции
- Объекты
- Массивы
- JSON
Видео получались длинными, по 15—20 минут каждое, и мало кто мог их досмотреть до конца. Поэтому я начал дробить темы на более мелкие. Например, разбор условных операторов выглядел так:
- Условные операторы: Основы
- Булевы значения и операторы сравнения
- Приведение типов к логическому
- Логические операции
- Тернарный оператор
- Условное присваивание
- Разбор домашки
Такой же набор видео я записал про основы работы с DOM:
- DOM: Основы
- Поиск узлов на странице
- Чтение свойств узлов и их содержимого
- Редактирование узлов
- Обход дерева узлов
- Разбор домашки
Несмотря на то, что видео стали короче и легче, количество просмотров упало. Видео всё ещё слишком сложные, чтобы их смотреть между делом. А тем людям, которые готовы уделить время просмотру, проще посмотреть одно видео целиком, чем набор коротких. Кроме того, видео стали просто скучнее.
Что дальше делать с курсом — пока не совсем понятно. С одной стороны, десятки просмотров говорят о том, что интерес к теме сесть. С другой — меня не устраивает качество тех материалов, которые получаются и количество времени, которое уходит при этом на их создание.
В любом случае, создание курса было для меня интересным опытом, который научил меня нескольким вещам:
- Нашёл классный сэндокс для работы с кодом: codesandbox.io. В нём можно создавать не только отдельные кусочки как в codepen.io, но и целые проекты с файловой структурой.
- Научился работать с программой ScreenFlow, которая оказалась весьма удобной для монтажа скринкастов.
- Писать звук в бытовых условиях лучше на петличку, чем на большой микрофон. Добиться сносного качества гораздо проще, так как не приходится бороться с эхо от стен.
- Писать видео можно на телефон, но нужно немного сноровки. Например, в последних видео у меня очень низкое качество записи, а картинка постоянно прыгает. Похоже, это какая-то особенность стабилизации видео у Note 9.
- Надо сразу покупать свет. Два софтбокса с АлиЭкспресс обошлись в 3000₽, а качество видео стало заметно лучше.
- Узнал, что всю жизнь неправильно называл «тернанрный» оператор «тринарным».
- Перед записью видео лучше проверить произношение всех иностранных слов, а то потом будет стыдно. :)
Спасибо, что дочитали до конца. Если у вас возникли мысли, как можно сделать этот курс лучше — буду рад любым комментариям. Курс рассчитан на популяризацию технологий у дизайнеров, а не на разработчиков. Поэтому я опускаю вопросы производительности и иногда намеренно «учу плохому», так как производительность и чистота когда редко играют большую роль в прототипах.
P. S.: На комментарии буду отвечать обновлениями поста, чтобы новым читателям не приходилось задавать одни и те же вопросы.
P.P. S.: Если вам интересно следить за развитием курса, то есть Телеграм-канал detepr. Засорять Хабр статьями про основы разработки — рука не поднимается. Так что следующую статью про курс напишу где-то через пол года.
