Presentation based YouTube Application

I run a YouTube channel, and wanted to share how I went about doing so using RevealJS, Pug, and ES6.

My approach to YouTube

I don’t like sharing my face; video of me on the channel just isn’t useful. In addition, my materials don’t need a face! The topics I discuss are best served in presentation format. I will do a few “livestream” type videos to highlight less related ideas or how they all intertwine into a single application (see my webpack video, for instance).

RevealJS

I used RevealJS for Angular training at my first job. It is an extremely slick Javascript framework. Simply writing HTML with given classes leads to slick transitions and logical groupings of slides. In addition, it throws all sorts of controls and configuration options for you to set up to your liking.

I highly suggest you check it out. As web developers, it gives you the control you like when it comes to layout and look, with the presentation framework that is extremely professional looking.

Pug, Markdown

I chose to write my presentation materials in Pug. It allows me to logically break down my presentations into its sections, and then include them in a master presentation. Here’s an example section:

When I want to combine them all into a single presentation, all I need to do is add all the sections together:

I include all of the common features, such as the slide-show wrapper, a schedule slide that represents the entire schedule for a given YouTube series (like ES6). It’s a great experience.

I also use Markdown in some sections. It’s easier to do a bunch of inline formatting than it is in Pug. However, since Markdown just boils down into HTML, it’s not common that I do this, since Pug is just as capable.

Github.io

I needed to be able to share my slides if my viewers wanted to follow along, or have reference to a piece of code. I found that I could host my static application on github.io without cost. It’s pretty simple. All you need to do is build your project, have an index page, and that’s it. Going to {{your github user id}}.github.io will show you your application. Using the URL to create the repository in Git, all you have to do is push to that repo and you’re good to go. You can see my Github source here.

Multiple Presentations in a single Application

My approach to a Single Page app that shows the proper presentation was to use ES6 and query parameters. The basic approach to this is to:

  1. Register the HTML and JS for a given presentation
  2. Determine which presentation is attempting to be loaded (using the sub-appquery param).
  3. Look up the presentation in the AVAILABLE_APPS variable.
  4. Grab the container node and populate it with the HTML defined from the sub-app's Pug template.
  5. Execute the RevealJS initialization javascript.

You can see this entire process in my index.js file. It’s pretty straightforward, if you ask me. There’s some repetition that I’d like to get rid of, but for now, this works.

You can see any of the registered sub-apps at http://m3fawner.github.io/dist/index.html?sub-app=es6-modules. Replacing the query param with a valid presentation will load that presentation.

Success?

I have found relatively good succcess with this approach. I’ve gotten nearly 1000 views on topics that are probably over saturated on the web. My best videos are on Pug, because that’s more of a niche topic. I’ve received good feedback from people I’ve spoken with in regards to the approach.

I haven’t made it big, yet. I think a blog in tandem with the YouTube channel can allow for me to keep a more engaged user base (blogging is so much quicker and easier). My hope is that I can elaborate on ideas for the YouTube channel in the blog and give more concrete examples in text as opposed to speaking.

Try it Out

You can always clone my github.io repo and try it for yourself. I find it pretty simple to use. I’d love to hear any feedback or receive suggestions on how to better improve my approach!

Front End Developer

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store