Background
Back in 2011 when I used to be a .Net developer, life felt great writing Visual Basic (my favorite programming language) and C# and the only way to render something on a web-page (that I knew and was comfortable with) was to use the Toolbox window within Visual Studio. I could specify all the behavior I wanted with my object-oriented language and visual customizations used to be done through the Property Window and even though it was sort of limited, I used to wonder why in the world would someone need CSS. Some part of that is because I was mainly into creating Windows applications and stepped into web-development a bit too late.
I soon moved to Windows Presentation Foundation for my application development and hence Silverlight for the web, the visual components of my creations got better. It was now that I was more in control of how something is being displayed and this time I got addicted to writing my own XAML, instead of relying on Visual Studio, even further the Expression Blend.
Fast-forward to my 'front-end' life
In 2012, I got introduced to a whole new world of development: the front-end. With Silverlight almost being deprecated and having had a small glimpse of what all is possible within the web-browser, I got fascinated with the client-side technology stack. Learning about basic JavaScript, re-introducing myself to HTML and filling the void left by XAML with CSS was all I spent time with.
My first browser-based presentation tool
There was a problem I always wanted to solve for myself: find something else instead of Microsoft Powerpoint to create presentations. Everyone I knew used the same software for the purpose.
Now that I knew my way in the web-browser, I soon came up with a presentation tool created with Knockout.js as a significant building block. It was great playing with CSS for slide-transition animations, not having to use Powerpoint and carrying my presentations anywhere I go, on the web. Even though it saved a lot of time spent with Powerpoint, the presentations still had to be created as HTML documents.
Later during my participation in technical training, using my experience with what I had achieved last time, I developed an improved tool for the same purpose, combining the power of ASP.Net MVC and the rest of the code with front-end stack. It was super useful to present technical training and the participants got to experience a different kind of presentations where I used to present training on topics related to front-end development, using slides developed using the same technology stack. This implementation shared the same problem though, I had to code everything as HTML and spend time to get it all right.
Bringing markdown to the browser
I was still on a quest to create something that would not require me to code HTML pages in order to present an idea. I wanted to have a workflow as simple as rapidly writing a plain text document and presenting it as a slide-show presentation.
I created faded-presenter as an experiment that went right. It was a simple under-developed online tool that you could drop markdown documents into and start switching slides using the keyboard left and right arrow keys. You could also print presentations as single documents. Now, this was something useful!
I still do not understand why I published it as an npm package where it was clearly an application and not a reusable package. Surprisingly, it shows over a thousand downloads today. I wonder how people consumed it :).
Combining the power of web-sockets with faded-presenter
I was thinking I could take this thing even further, maybe add more style to it: how about controlling the presentation remotely from another device, may be a computer or a smartphone? That is where my work on Slide Gazer started.
TLDR; Slide Gazer
While preparing for a presentation at work, the idea of being able to control a presentation from a remote device came into my mind. I had a feeling I could take this idea a bit further and decided to leave faded-presenter where it was and start with a fresh new implementation. Short for words I was as always, I named it Slide Gazer.
Built on the same core principle of faded-presenter, Slide Gazer is my fourth attempt to solve the problem and it adds many more features along with a clean design. Some of which are:
- Many slide-transition animations
- Slide auto-transition
- Emphasizing bold text on slides temporarily
- Being able to control a presentation from another device (the main purpose for this project to exist)
- You can still print a presentation from the browser and share it with the audience as a single document
It has come a long way from where it started in 2018 and unfortunately, I have not been able to spend much time on it so there's still so much I want to see in there. Some of my plans are:
- Add unit-tests!
- Improve UX, make it easier to use
- Implement 'slide-seek' so that you can jump to a slide directly
- Support browsers that are not so smart. I have been only testing on Google Chrome and almost never got a chance to try on other web-browsers except for Chrome on Android, which technically is Chrome again.
This simply means that this is still an ongoing experiment that is not yet complete. I have been using it to present all of my presentations and improving it piece by piece.
I've been waiting since so long to share this with the community and get their opinion so here I am writing this post.
You can see check it out at slide-gazer.teamfluxion.com and the source-code on GitHub.
So, what do you think?
Top comments (0)