cover image courtesy of Nathan Anderson

Is It an Article or a Deck of Slides?


Bits by bits I'm building a feature in my personal site, where all my talks have a readable "article" mode which is literally just my talk script, and a "presentation" mode which turns the same content into playable slides. Privately, there's also "speaker" and "notes" modes which includes or exclusively displays my notes.

Note This article is not finished. And it will be a nonsense article documenting the stories and thoughts behind building the features, with links to notes about things I learned building them.

Why this


Prior arts

Why still do dis

Clearly you're joking, Wei

I got a push into actually doing this when me and our co-organizer, Ken, were preparing for our first React Knowledgeable meetup. Throughout our past year of running RK internally, we had been passing markdown notes on what to include in each week's session. This then became another use case for the idea, why don't we simply compile the notes into a presentation slides?

It was the weekend before our first meetup. Ken was going to host this and he asked if I had anything in mind in particular that we should include. I told him I'd create slides for him that he could then add on to. So that became the initial version, which I was clearly cheating. All I did was to put each heading into a <section> tag, and make each <section> full screen size. And you "page" by pressing the spacebar 😅. You need to tweak the height a little bit to make it equal to how far a spacebar travels.


I then moved the whole cooking into my personal site and slowly building the thing bits by bits. And I'm using it for my own talks such as why i write docs for JSConf China, devtools for RK, and more.

Over the course, whenever I want certain feature from normal presentation, I struggle between

Slowly, I find myself struggle less and less between the options because my slides are getting more refined, satisfying more of my needs, and more fun to use because I can build whatever I like, such as:


And it then becomes my playground to learn about web techniques:

Request Fullscreen

Slides should be played full screen when prensenting. When you maximize window with Chrome, it hides the URL and the bookmark bars for you. But if you use FireFox, you cannot hide them unless you request fullscreen.



Prior arts

Link to my notes