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

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

    И вот, наконец, я могу вернуть часть этого долга. Весь ноябрь по утрам и выходным я записывал обучающие видео про 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. Засорять Хабр статьями про основы разработки — рука не поднимается. Так что следующую статью про курс напишу где-то через пол года.
    • +10
    • 2,8k
    • 3
    Поделиться публикацией
    Комментарии 3
      0
      Спасибо
        0
        Свет софтбоксов для чего? Вы же скринкасты делаете.
          0
          После первых выпусков, которые были чистыми скринкастами, зрители попросили добавить запись с камеры, чтобы было как в летсплеях. :)

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

        Самое читаемое