loading...
Cover image for Introducing DeckDeckGo: the web open source editor for presentations

Introducing DeckDeckGo: the web open source editor for presentations

daviddalbusco profile image David Dal Busco ใƒป5 min read

We are very happy and excited to share with you today our web open source editor for presentations: DeckDeckGo

I still almost not believe that we managed to reach such a milestone. It took us a couple of months this year to develop it just for fun at nights and on weekends, but yes, we did it ๐ŸŽ‰

Before going further we would like first to thank all our off- and online friends, communities, contributors and early testers which always gave us plenty of motivation to develop our, as I like to call it, โ€œpetโ€ project. You are truly awesome โค๏ธ

But why yet again another editor for presentations?

Sure why? Seriously why?

We are fully aware that no one, absolutely no one, asked for yet again another editor for presentations and that even probably there is no such need. But you know what? We are fine with that. Of course we would love and hope that our editor and concept will be useful to some persons, but even if we might cry a bit if no one will use it, we are (kind of) ok with that.

We develop our project because we are, well, nerds and because we use this experience to improve our skills. Furthermore, we are engineers you know, we like to implement products from scratch until launch ๐Ÿ˜‰

So what makes it different?

Everything.

Of course Iโ€™m joking, not everything is different, itโ€™s even became a private joke between us. As soon as something is a bit new we say to each other โ€œMais mec, cโ€™est le futureโ€ ๐Ÿ˜น

That being said and as I briefly introduced it above, we had some, I hope you will find too, interesting ideas.

Cloud solution

My mum better understood โ€œa cloud solutionโ€ than โ€œwe developed it with the webโ€

DeckDeckGo is a cloud solution. It works everywhere on any devices, projectors, desktops, mobiles or tablets without any prior installation and without data save locally ๐ŸŽฅ๐Ÿ–ฅ๏ธ๐Ÿ’ป๐Ÿ“ฑโ˜๏ธ

There is by the way even no โ€œSaveโ€ button in our editor, it does the job for you and save your data when these have to be saved ๐Ÿ˜

Use an app to share apps

Use an app to share other apps

No export to PDF (at least not yet), therefore you may ask your self: How my gosh David, how Iโ€™m going to share my presentation then?

Well, hereโ€™s a cool thing: DeckDeckGo package and publish every single presentation you would like to share as a standalone application. Most precisely as Progressive Web Apps. Basically you are not going to send a PDF to your friends a colleagues but you are going to send them a link to your app respectively to your presentation which is compatible with any deviceโ€™s screen size and SEO friendly ๐Ÿš€

Online feed

Discover and share presentations

DeckDeckGo isnโ€™t โ€œjustโ€ an editor. It was actually developed to be also an online feed. A place where presentations can be discovered, shared and ultimately, if we let our selves dream a bit about the future, are indexed according your interests and maybe even can be discussed.

Features

Moreover, more than being able to develop slides with our editor, we also thought that adding some handy features would make the user experience a bit more enjoyable.

Full screen edition

Are you constantly switching between full screen and normal mode while editing your deck for your next presentation? Or did it you had more than one to correct a typo a couple of seconds before your talk? With our editor, your presentation is editable even in full screen mode.

More than edition, per design all features are available in full screen mode too

Unsplash

We have integrated Unsplash to our tool to let your find and use stock photos easily. The editor keeps also track of the last 10 media you would have used for even a quicker access.


Unsplash is integrated

Tenor

Gifs are life (probably). Same as the stock photo, Tenor is integrated, to let you find and integrate Gifs easily. There is even a special template which takes care of fitting the animated content to the all screen.

Gifs are life

Youtube

I was a bit more lazy on the integration of Youtube videos, we didnโ€™t interconnected any API, but still, itโ€™s pretty damn easy to add any videos from that source to your deck. Cherry on top, you could start and pause the videos remotely with our app too.

Drop Youtube videos in your presentation

Remote control

Out of the box, without any special hardware, any presentations could be remote controlled with our โ€œremote controlโ€ application. It handles currently actions like swiping slides, displaying notes, drawing on the presentation and even offers a countdown feature. We are also taking advantages of QR codes in order to establish easily the connection between the controller and the decks.

Hey, itโ€™s me, David ๐Ÿ‘‹

Technical fun facts

I wonโ€™t deep to dive too much in the technical facts, as I hope that we will find time in the future to share articles about them, but to summarize, our application is developed with StencilJS Web Components. On the other side, our publication engine is developed with Haskell, Nix and Terraform ๐Ÿš€

We are using Google Firebase for the authentication and to store the data (data you are editing and as storage) and are using Amazon AWS to deploy online the publications you would share.

Open source

DeckDeckGo is open source, itโ€™s in our DNA, sharing is caring. All our libraries are published under MIT license and our applications and infrastructure are published under AGPLv3 and above license.

Of course we are always looking for new contributors. We would love to hear from you, donโ€™t hesitate to join us on our slack channel or on Github ๐Ÿ™

Developer mindset

Something I particularly like in our project is that both the editor and our developer starter kit are using the exact same Web Components as engine ๐Ÿคช Any improvements in these libraries and applications are then automatically echoed to anyone regardless if you are using the graphical editor or are coding your own presentation using HTML or markdown, itโ€™s kind of the cherry on the cake ๐Ÿ’๐ŸŽ‚

Get started now ๐Ÿ”ฅ

A picture speaks a thousand words, get started now to create your next presentation: https://deckdeckgo.com

To infinity and beyond ๐Ÿš€

David

P.S.: Background photo of the cover by wisconsinpictures on Unsplash

Posted on by:

daviddalbusco profile

David Dal Busco

@daviddalbusco

Creator of DeckDeckGo | Organizer of the Ionic Zรผrich Meetup

Discussion

markdown guide
 

Awesome project. I use Google drive for everything and now I'm giving a try to latex presentations just for code highlighting. I copied, pasted and highlighted manually code in Google slides. If you feature code blocks in DDG you'll buy me ๐Ÿ˜

 

Yeah, code blocks would be a great feature for programming presentations!

I just checked the demo, and it seems it is already there: beta.deckdeckgo.io/daviddalbusco/i...

 

Yes it is already there. We have built a Web Components around Prism therefore a lot of different type of codes are already recognized.

Moreover, if you want, you could display line numbers, highlight specific lines and style the content (color and basic font size).

You could also duplicate and move slides, so once you have styled one piece of code you could clone it and replace it with your other piece of codes (if you have many to display).

In the future we would like to improve the styling by supporting some "themes", specially for the colors, like palette of colors.

 

Awesome, a few tech questions just curious: why StencilJS and not litElement? While I'm building my presentation, you are saving and deploying the project constantly to AWS? How is that happening, and what platform on AWS allows for that?

 

I went with Stencil probably because I already had a small experience with it and with Ionic. And well, I love it: Typescript, its tooling, prerendering, polyfill etc. it has plenty of nice add-ons on the top of the Web Components themselves which makes the developer experience just super cool. Also how Prop() and State() are "working" in Stencil are a really good match with our editor (as we are saving HTML in the DB).

That being said, I never tried litElement but it does look super cool too.

While you are editing your presentation, we are saving it constantly in Firestore. To do so, we are deboucing some events and if changes are noticed, then saves are performed. If you are interested about this, you could for example have a look at this helper class.

On demand, when you decide to publish or update your publication, the data are send to AWS, notably to a S3. During that process we generate or update a Progressive Web App for your presentation.

We have listed the services we are using in a specific page of our tool (list of services), it gives a bit, I hope, of transparency about it for the users.

Let me know if you've got more questions!

 
 

P.S.: About "debouncing", I published last week a blog entry about it, just in case dev.to/daviddalbusco/debounce-with...

 

Noice :)

Hey, it looks like the duck's beak in the logo got mixed up with the background color or it could be me just being weird ;) No offense to David and team. Great Job with the app.

 

It was actually the choice of Anita which designed and offered the logo ๐Ÿ˜‰

 

Great work! Gave it a try and it seems like you have a CORS error when trying to publish a presentation:

CORS error on deckdeckgo

 

I just tried out and it worked out ๐Ÿค”

Was that a new presentation or a previous one you would have had created with the (closed) beta version?

If new one, could you try to refresh your browser/the app, double check that you are login in and try again?

Thx a lot for the help!

 

I created the presentation today right after I was done reading this post.
Clearing the cache and reloading the page did it, now it is published. Thanks for the help :)

And what a cool presentation ๐Ÿคฉ

Happy to hear that and thx for trying out DeckDeckGo ๐Ÿ™

P.S: We will keep the issue under the radar!

 

Not so long time ago I needed to make a presentation. That time I found that I'm tired to use PowerPoint and then save it to flash card and after show it in another pc. I think DeckDeckGo is really cool tool for presenting any Idea. Thank you and team. I โ™ฅ๏ธ it)

 

I'm with you on the portability. I like the idea of being able to edit and review my presentations anywhere, on any devices, any time. Like being at home, editing my slides, then taking the tram to go to the event and reviewing it quickly on my phone to finally showcasing it on a projector.

Happy to hear you like the idea, thx for the feedback ๐Ÿ™

 

That remote app looks really, really useful -- a request though: I'd really like to use the annotations feature, but I think it would be a lot easier to use if the slide content was shown on the app too -- otherwise one has to kind of guess where the annotation will end up.

All-in-all, this looks like a serious competitor to Google Slides, and, tbh, I find the editing experience in Google Slides to be rather ๐Ÿ’ฉ, so I'm looking forward to taking this for a good spin the next time I have to do a presentation!

 

Thx Davyd for the cool feedback ๐Ÿ‘

Agree with you. I've got the idea since a while now to be able to synchronize the content in the remote too (github.com/deckgo/deckdeckgo/issue...). I never went too far forward with that idea, mostly because we developed many other features, the editor and also because I didn't had the inspiration on how to present the content in a correct way (in terms of format, projector is probably landscape, remote is portrait). But this could be solved soon in the future as we are currently discussing a rework of the UX and design of the remote to make it more user and presenter friendly (github.com/deckgo/deckdeckgo/issue...).

 

Well done, very useful and well designed app - congrats on the launch!

 

Thx for the nice words Yasin ๐Ÿ˜ƒ

 

I was reading your article with interest until I got to the animated gif for โ€˜Use an app to share other appsโ€™. I find the way the gif turns a real living obese baby of colour into a comic spectacle very disturbing and exploitative. I am sure you intended no harm or offence but imagine how that child might feel as they grow older if they saw that image of themselves being used as a joke.

 

Looks amazing.. something to move away from google slides. A question, how well is it's offline tolerance. Only benefit of google slides is that it's extremely functional even when it's offline.

 

The published presentations should work offline (PWA and service worker).

The editor itself is not yet offline ready but it's of course on our agenda/mind.

 

Nice to know that editor's offline capabilities are on your agenda. Then it would be truly google slides replacement. Thanks for open sourcing this. Nice to see you using Haskell. I learned it in college days as a hobby, but never got around actually using it. Everyone just want to use JS these days.

Thanks for the warm feedback! I think it's cool to try to mix technologies and Nicolas is, at least in my eyes, a true Haskell wizard ๐Ÿ˜‰

 

That's a great tool. I will definitely be using it

 
 
 

So happy to hear that, thx Christopher ๐Ÿ‘

 

Bravo les gars. ร‡a ร  l'air d'รชtre le future!

 

Haha excellent! C'est le premier message de la journรฉe que je lis, elle commence de bonne humeur du coup, merci ๐Ÿ˜ƒ

 
 

Lol, wanted to implement this project since 2010 and never got the chance to do it, very cool, thank you for posting it!

 
 

This looks really nice and promising. I've always chosen Google Slides to create my presentations but I'm giving DDG a try for one in October ๐Ÿ˜โœŒ๐Ÿฝ

 

Yeah awesome ๐Ÿ‘ Ping me for any feedbacks, questions or support, I'm happy to help!

 

Now it sounds interesting but I will surely want a HTML or PDF export

 

The export of the source is for sure somewhere in our mind ๐Ÿ˜‰

 

Is it some sort of coincidence or do you have some DuckDuckGo background history to tell us?

 
 

Currently, you are right, assets and presentations you would publish are made public on the internet.

In the other hand, presentations you are editing and you would not share are private.

But we aware that this concern might be a need for some, we should think about it for the future.

 

why duck toy for logo?
is it because duckduckgo ? :)))

cool project. but need more design for UI.

 

"mec c'est le futur" hahahah
looks like a really cool project ! good job !