How I made a web app to create presentations

I had that idea for a while in my head. I was tired of every time I had to create a presentation and I was spending more time deciding where the header should go and if it's five pixels higher than it should be and if the colors match.

Today I'm glad to introduce you to Presentador. Now I can focus on writing the content of my presentation while Presentador takes care of the positioning of the elements and the colors. 🛠

In this post, I would like to explore some challenges I found along the way of creating a web app for presentations.

Presentation mode

A presentation app at the very least will allow you to present, meaning zooming the contents of the slides to play nicely on bigger screens, projectors, etc. When your presentation slides are basically HTML pages being rendered on a web browser, you can't rely on scaling using pixels or relative units like em. Different screens will have different resolutions and different user settings. So how do we scale to always make sure that the slides will keep their original shape? CSS scale to the rescue.

With scale we are able to resize our page in two dimensions. First, we get the viewport size of the current browser and then calculate how much to scale. Hats off to Reveal.js for giving me the idea. 💡

User text selection

I wanted to be able to edit all text-based components in place in each slide. I started experimenting with contenteditable and at first, it was serving its purpose greatly. Until I decided to add a simple WYSIWYG interface to allow me to add bold and italic text as well as links.

The biggest challenge I faced there was working text selection. The Selection is still experimental and besides that, I found it to be quite complicated. I wanted something easier to work with.

Enter Rangy. It makes working with user selection, a walk in the park. Unfortunately, it is outdated and hasn't been maintained for some time, but I still found it stable and simple. With some experimentation I was able to load it onto my app and I'm not exaggerating when I say: it saved lots of hours. Hats off to the author.

I'm using it to save and restore the user selection as well as to wrap or unwrap an HTML element around a specific selection, so to make it bold, italic or transform it to a link. 💥

Local file system

Saving presentations on the cloud you say? Well yeah but honestly, it wouldn't offer me that much at this point. These days, I'm working constantly from one single laptop so I wasn't worried about losing my work. But I had to save my work somewhere. Well, let's use that hard drive then.

File System Access API is here and while no major compatibility exists yet, this library will fallback to native implementation if the browser doesn't support it.

Now I'm able to save my work in a local file, store it on my cloud account and load it whenever I need it. 👍

Conclusion

There you go. Those were my biggest challenges creating a web app for creating presentations.

It was a great journey. Do use it and let me know if any feedback you may have. I'm looking forward to that. 🙏