DeckDeckGo: Why building presentations with web standards makes sense

I’ve been an Apple Keynote warrior for a really long time. Over a decade plus. Why I use Apple Keynote rather than Microsoft Powerpoint or Google Docs like the rest of the planet? It is just that Keynote is that little bit nicer in comparison. Not to say that I stay away from Powerpoint and Google Docs, there are cases where I do not have a choice but to go and use Microsoft or Google alternatives and sometimes Libre Office, but as a preference, I’d very much prefer Keynote. That was until DeckDeckGo comes along…

RYMS
RYMS
May 6, 2020 · 7 min read
Photo by Austin Distel on Unsplash

My problems with Apple Keynote

“We don’t have a Mac, can you email us in PowerPoint”

“Pass your PowerPoint to me in this USB stick”

Do you have it in PowerPoint?”

Can I have it in PDF?”

The magic of Apple Keynote, which has remained quite the same over a decade plus since being introduced by the late Steve Jobs in 2003, is the attention to detail that is, still somewhat missing, from Microsoft PowerPoint and Google Presentation. There is an innate beauty in the animation, the transition, heck, even the fonts in the presentation itself is just that little bit smoother than your average font on your typical PC. This is the sort of attention to detail you’d expect from the late Steve Jobs, who ‘audited’ a font class while he was in Reed College (before he dropped out) and included a set of fonts (the first to do so) in the first GUI based Apple all those years ago.

In addition to the fonts, two things that blew my mind from my first impression of Apple Keynote all those years ago was the smoothness of the transition and embedding a video directly into your presentation (which is trivial today, but it was mind blowing then). Alas, the beauty will be lost if it is ‘flattened’ into a PDF OR converted into a PowerPoint, which seems to me, is my main problem.

Portability- the ability to be easily carried or moved.

Let’s face it, even in 2020, the world still runs on Microsoft. A majority of folks are still using PowerPoint for presentation and the only way for me to port over my presentations to folks without an Apple is to either convert it into a PDF or turn it into a PowerPoint presentation. Somehow, the beauty is lost when this happens, the images seemed cropped a little bit, the fonts seems to be a bit off and the transition is not as smooth.

I need to be able to deliver Apple Keynote style beauty in another alternative method. I need my presentation to be able to be viewed anywhere and accessible easily without sacrificing any of my original vision for the presentation. I need a way to conceive a presentation in total freedom using skills that I already have.

Thankfully someone did develop this…

Enter DeckDeckGo

It uses web based technologies such as HTML, CSS and TypeScript (a subset of JavaScript). If you are familiar with the above, then, just imagine what you can do with that skill on a presentation slide.

As a big fan of Ionic, and since Ionic is basically made out of web components, DeckDeckGo was built by integrating Ionic UI components at its core. Ionic UI components such as ion-list, ion-item, ion-grid and many more can be used directly in DeckDeckGo and because I am very familiar with Ionic, I feel at home using Ionic components to build my presentation.

I’m not really an authority on DeckDeckGo. But if you want to find out more about DeckDeckGo, do check out Medium articles written by David Dal Busco and DeckDeckGo’s own website:

How do I start building a presentation on DeckDeckGo?

The Easy Way

To get started the easy way, just go over to https://deckdeckgo.com and click on Write A Presentation. You can then sign up and straight away start building your first presentation. However, there are limitations as there is a lot that you are not able to edit in this version. But it is a good start if you want to know about DeckDeckGo and building a presentation on the web.

But of course, if you are still reading at this point, you want to get to the good stuff. How do I build it with my own hands ie, build your presentation with code.

The ‘Do It Like A Web Developer’ Way

First thing you need to is, of course, install NodeJS and NPM. You can do this by going to nodejs.org and get yourself the LTS (Long Term Support) of Node.

Next, assuming you have successfully install NodeJS (which automatically comes with NPM), navigate with the command line into your preferred folder. You will then need to type in the following into your command line:

npm init deckdeckgo

This will initiate a new DeckDeckGo project into your folder. You will then need to give your presentation a title and method to write the presentation. Of course, I select HTML.

You will also be asked if you want to import any particular font from Google. Being the ‘non-evil’ organisation that they are (referring to Google’s motto: “Don’t be evil”), you can select from a bevvy of free fonts on offer at font.google.com. My personal preference is Poppins, but its up to you what fonts you would like to use.

After this is done, the next step is to start editing your presentation.

Open your choice of IDE, navigate and open the folder. From here you can see the source code that makes up your presentation. Here are a few tips that, you need to keep in mind in building your presentation.

  1. Always plan out your presentation. Have a simple structure of what kind of message you want to present to your audience. It is not advisable to ‘build as you go’ with no structure because you might lose out on the placement of punchlines.
  2. Never more than 6 points per page and try to condense your words on your slides. No one likes presenters who reads their slides. No one. A good presenter like the late Steve Jobs (yes go search on youtube and watch his presentation from 1984-onwards), never ever read his slides. It was more of a point and elaborate kind of thing.
  3. To make it stick, make it entertaining, unless you are planning a snoozefest. Keep the audience engage by making your presentation entertaining. Keep them ‘on their toes’ and prepare some funny anecdotes.

Well. I guess that’s it on preparation to write a presentation. Now on to how to actually use Deckdeckgo to build your presentation.

Once you are able to open the Deckdeckgo folder on your choice of IDE, open the index.html file. The structure should roughly look like this:

<html>
<head>
.........
</head> <body>
<ion-app>
<ion-content> <deckgo-deck>
<!-- Presentation slides over here-->
</deckgo-deck>

</ion-content>
</ion-app> </body></html>

Everything in the <deckgo-deck> component is your presentation. There are several type of slides that you can use and since this is a starter project, you are able to see the whole capabilities of Deckdeckgo in all its glory in the template files provided.

Here’s a list of some of the things that you can implement in your presentation:

  1. deckgo-slide-author
  2. deckgo-slide-aspect-ratio
  3. deckgo-slide-big-img
  4. deckgo-slide-chart
  5. deckgo-slide-code
  6. deckgo-slide-content
  7. deckgo-slide-countdown
  8. deckgo-slide-gif
  9. deckgo-slide-poll
  10. deckgo-slide-qrcode
  11. deckgo-slide-split
  12. deckgo-slide-title
  13. deckgo-slide-video
  14. deckgo-slide-youtube

Reference

I am not going to go through each one, give all of the above a try and have a look at how they work.

Just for a demonstration, here’s how to use the title slide and the gif slide.

To test out this template, type in the following in the command line.

<deckgo-deck id="slider" pager-percentage="false"><!-- Title Slide -->
<deckgo-slide-title>
<h1 slot="title">Test Presentation</h1> </deckgo-slide-title>
<!-- Gif Slide -->
<deckgo-slide-gif style="background: var(--ion-color-dark);" src="https://media.giphy.com/media/3og0INAY5MLmEBubyU/giphy.gif " alt="Template for gif" fullscreen="true">
<h3 slot="header" style="font-weight: 200;--background: black; --color: var(--ion-color-light);">
Test 1, 2, 3 & 4...<br>THIS IS GREAT!
</h3>
</deckgo-slide-gif>
</deckgo-deck>

The following command will result in the following presentation:

First slide
Second slide- This screencap does not do this slide justice, but that’s a gif running

Finally…

Once you are done with building your presentation, you can easily turn your presentation into a Progressive Web App (PWA). To turn your presentation into a PWA, enter the following command into your terminal:

npm run build

It should produce a dist folder that you can now upload to a server. There you go. That’s it. So, next time anybody ask you for a copy of your presentation, you can just give them a web address.

Happy coding!

References

The Startup

Get smarter at building your thing. Join The Startup’s +794K followers.

Thanks to Sunil Sandhu

Sign up for Top 10 Stories

By The Startup

Get smarter at building your thing. Subscribe to receive The Startup's top 10 most read stories — delivered straight into your inbox, once a week. Take a look.

By signing up, you will create a Medium account if you don’t already have one. Review our Privacy Policy for more information about our privacy practices.

Check your inbox
Medium sent you an email at to complete your subscription.

RYMS

Written by

RYMS

Husband, son, father & multi award winning app developer. 😊❤️ TypeScript and JavaScript. Proud to be Malaysian. Sometimes I tweet @razmans

The Startup

Get smarter at building your thing. Follow to join The Startup’s +8 million monthly readers & +794K followers.

RYMS

Written by

RYMS

Husband, son, father & multi award winning app developer. 😊❤️ TypeScript and JavaScript. Proud to be Malaysian. Sometimes I tweet @razmans

The Startup

Get smarter at building your thing. Follow to join The Startup’s +8 million monthly readers & +794K followers.

Medium is an open platform where 170 million readers come to find insightful and dynamic thinking. Here, expert and undiscovered voices alike dive into the heart of any topic and bring new ideas to the surface. Learn more

Follow the writers, publications, and topics that matter to you, and you’ll see them on your homepage and in your inbox. Explore

If you have a story to tell, knowledge to share, or a perspective to offer — welcome home. It’s easy and free to post your thinking on any topic. Write on Medium

Get the Medium app