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…
My problems with Apple Keynote
Before I go ahead and explain why I am switching to using DeckDeckGo from now on, I would like to go over some of the grievances that I have faced as an Apple Keynote Warrior on my adventures giving presentations, any presentations, wherever I go, common phrases that are the norm that I always hear are:
“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…
Developed by David Dal Busco, DeckDeckGo is an open source web editor for presentations. Every presentation built with DeckDeckGo will be turned into a PWA that can be viewed anywhere, built into its own web application.
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-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:
Introducing DeckDeckGo: The Web Open-Source Editor for Presentations
DeckDeckGo isn’t just an editor — It was developed to also be an online feed for discovering and sharing presentations
The web open source editor for presentations
Make more than presentations. Create, present and share apps. Interact with your audience. With DeckDeckGo, edit your…
How do I start building a presentation on DeckDeckGo?
There’s the easy way, and there’s the do it like a web developer way.
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.
- 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.
- 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.
- 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:
......... </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:
DeckDeckGo - The open source web editor for presentations. 🚀 Create a PWA presentation using either our online editor…
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!
The following command will result in the following presentation:
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.