Я веду канал на YouTube и хочу рассказать, как мне это удалось с помощью RevealJS, Pug и ES6.

Мой подход к YouTube

Я не люблю делиться своим лицом; видео со мной на канале просто бесполезно. Кроме того, моим материалам не нужно лицо! Темы, которые я обсуждаю, лучше всего представлены в формате презентации. Я сделаю несколько видео в прямом эфире, чтобы выделить менее связанные идеи или то, как все они переплетаются в единое приложение (например, см. мое видео веб-пакета).

RevealJS

Я использовал RevealJS для обучения Angular на своей первой работе. Это чрезвычайно гладкий фреймворк Javascript. Простое написание HTML с заданными классами приводит к плавным переходам и логичным группировкам слайдов. Кроме того, он предлагает всевозможные элементы управления и параметры конфигурации, которые вы можете настроить по своему вкусу.

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

Мопс, Уценка

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

section  
    h2 Inline Return
    pre.
      const getGreeting = (name) => `Hello, ${name}!`;
      console.log(getGreeting());
    p.fragment.
      By removing the curly braces, it will return the result of the expression inside the arrow function.
    p.fragment.
      Note: You are unable to perform more than 1 line of code in these inlined arrow functions.

Когда я хочу объединить их все в одну презентацию, все, что мне нужно сделать, это добавить все разделы вместе:

extends ../../common/slide-show/slide-show.pug  
block slides  
    include ./slides/topic.pug
    include ../schedule.pug
    include ./slides/syntax.pug
    include ./slides/this-keyword.pug
    include ./slides/why-use-it.pug
    include ../../common/slide-show/contact-me.pug

Я включил все общие функции, такие как обертка слайд-шоу, слайд расписания, который представляет полное расписание для данной серии YouTube (например, ES6). Это отличный опыт.

Я также использую Markdown в некоторых разделах. Проще сделать кучу встроенного форматирования, чем в Pug. Однако, поскольку Markdown просто сводится к HTML, я делаю это нечасто, поскольку Pug обладает такими же возможностями.

Github.io

Мне нужно было иметь возможность делиться своими слайдами, если мои зрители хотели следовать за ними, или иметь ссылку на фрагмент кода. Я обнаружил, что могу бесплатно разместить свое статическое приложение на github.io. Это довольно просто. Все, что вам нужно сделать, это создать свой проект, иметь индексную страницу, и все. Перейдя на страницу {{ваш идентификатор пользователя github}}.github.io, вы увидите свое приложение. Используя URL-адрес для создания репозитория в Git, все, что вам нужно сделать, это нажать на этот репозиторий, и все готово. Вы можете увидеть мой исходник на Github здесь.

Несколько презентаций в одном приложении

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

  1. Зарегистрируйте HTML и JS для данной презентации
  2. Определите, какая презентация пытается быть загружена (используя параметр sub-appquery).
  3. Найдите презентацию в переменной AVAILABLE_APPS.
  4. Возьмите узел container и заполните его HTML-кодом, определенным из шаблона Pug подприложения.
  5. Выполните javascript инициализации RevealJS.

Весь этот процесс вы можете увидеть в мой файл index.js. Это довольно просто, если вы спросите меня. Есть некоторое повторение, от которого я хотел бы избавиться, но пока это работает.

Вы можете увидеть любое из зарегистрированных под-приложений на http://m3fawner.github.io/dist/index.html?sub-app=es6-modules. Замена параметра запроса допустимой презентацией загрузит эту презентацию.

Успех?

Я нашел относительно хороший успех с этим подходом. Я получил почти 1000 просмотров на темы, которые, вероятно, перенасыщены в Интернете. Мои лучшие видео на Мопсе, потому что это скорее нишевая тема. Я получил хорошие отзывы от людей, с которыми общался, относительно подхода.

Я еще не сделал это большим. Я думаю, что блог в тандеме с каналом YouTube может позволить мне поддерживать более активную пользовательскую базу (ведение блога намного быстрее и проще). Я надеюсь, что смогу развить идеи для канала YouTube в блоге и привести более конкретные примеры в тексте, а не в устной форме.

Попробуйте

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