How I made a web app to create presentations
Tags: opensource, webdev, javascript
Published: 2021-05-17 18:36:58

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](https://presentador.app). 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`](https://developer.mozilla.org/en-US/docs/Web/CSS/transform-function/scale()) to the rescue.

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/54045xgtb9gk6ugwfcgt.png)

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](https://github.com/Presentador/presentador.app/blob/master/src/components/Slide/SlideWrapper.tsx#L27-L58). Hats off to [Reveal.js](https://revealjs.com/) 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.

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/vwarzmdyn7pv42xf51cj.png)

The biggest challenge I faced there was working text selection. The [Selection](https://developer.mozilla.org/en-US/docs/Web/API/Selection) is still experimental and besides that, I found it to be quite complicated. I wanted something easier to work with.

Enter [Rangy](https://github.com/timdown/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](https://github.com/Presentador/presentador.app/blob/master/src/components/Slide/EditableToolbar.tsx#L8-L9) 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](https://github.com/Presentador/presentador.app/blob/master/src/components/Slide/EditableToolbar.tsx#L170-L178) 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](https://developer.mozilla.org/en-US/docs/Web/API/File_System_Access_API) API is here and while no major compatibility exists yet, this [library](https://github.com/GoogleChromeLabs/browser-fs-access) will fallback to native implementation if the browser doesn't support it.

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/8c3bkff4yq4lruu8553h.png)

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](https://presentador.app) and let me know if any feedback you may have. I'm looking forward to that. 🙏