Building An Auto-Save Feature For My Blog

Welcome to my first blog post about a feature I built for my website! The reason I wanted to start blogging was to solidify the learning that I've done through building real life things. My hope is that if I can explain this stuff to someone else, then that means that I've actually got a decent understand of it myself. In addition, I hope this can serve as a resource for someone who is trying to build the same thing, or someone who is just curious about the process.

I'm going to split this up into two blog posts. This one will be a high-level walk-through of the feature; why I built it, and what it does. The second one will be a more technical explanation of what I did for those interesting in digging into the code.

I've been building this website to do two things: I wanted a place to showcase my technical projects and I wanted a place that I could write about what I've learned. To achieve the second goal, I've built way to write and publish blogs on this website. Here is a short GIF of the 'flow' to create a new blog post. A quick note: if you click on the menu like in this video, you will not see the option to create a new post. This is because I am the administrator for the site and only admin users can create new posts. Maybe one day I'll have guest bloggers, but right now I'm just focused on writing content that is useful for others who are trying to learn.

Since I am the sole author, I wanted to make sure that if my writing session was interrupted for any reason, I would not lose any unsaved work. You've probably seen similar functionality with Google Docs - every couple seconds anything that is unsaved will be automatically saved for you. 

There were two basic strategies that I could think of to implement a similar feature for my site. The first approach would be to save my changes to the database that my website uses. This involves connecting to the the internet, sending the contents of my blog post to the server, and then saving it to the database. The other approach is to save my changes locally to my computer, and then if my session was interrupted, I could restore my unsaved changes by reloading them from my computer. The advantage of this second approach is that if I lost internet connection, I could still save my changes locally and then save them to the database once my connection was restored.

I decided to try to take the first approach - I would auto-save every 30 seconds or so over the internet to my database. I wanted to try to 'version' my blog posts - saving incremental versions of the same post so that I could have a version history and then have the option of displaying them and choosing which version to restore. Unfortunately, I didn't know how to do that. 

So, I did what I always do when I don't know how to do something in Rails - I looked for a gem to do it for me. A gem in Rails is a software library that someone else has written to tackle a particular problem. You can download this software library and include it in your project. I found this active_versioning gem that seemed like it would do what I wanted, but when I dug in deeper, I saw that it wasn't yet compatible with the version of Rails that I was using. (Rails is a 'framework' that allows you to build websites)

Once I hit that roadblock, I considered just automatically saving the post to the server at regular intervals without worrying about versioning. I decided against this strategy because at that point I hadn't thought about the concept of having 'published' versus 'unpublished' posts. Therefore, if I had taken that approach, every auto-save of a draft or unfinished post would be available immediately on the website, which is not what I wanted.

At this point, I thought I was left with one option - to save my changes locally and then restore them if my session was interrupted.  So, I started to build the feature. On the surface, it seemed like a pretty easy thing to do. I would setup an interval timer using javascript that every 30 seconds would grab the contents of the post that I was writing and save them to my computer using the localStorage API. Then, when I loaded the form for creating or editing a blog post, I would check to see if I had any content saved, and then present the user with an alert saying that we found unsaved changes and then further presenting them with the difference between the last saved version and the unsaved changes. This is basically what I ended up doing, but it was a lot more complex and challenging than I first thought it would be.

Picking up from the last GIF, I've created that post - meaning I've successfully saved it. Now I'll go to the page where I can edit an existing post. In this case, I'll update the title, the content, and some of the tags.

The user is presented with a screen that lets them know that there are some unsaved changes, with details of the differences between the last saved version and any unsaved changes. They're given the option to restore any unsaved changes, and if they do, we take them back to the edit post page with the changes updated in the editor. Since we don't automatically save the restored changes, we flash a notification reminding them to save their changes, which will then persist the edits to the database.

That's how my auto-save feature for my blog works. I'm pretty happy with how it turned out, and the bonus is that I've felt more secure while writing this blog knowing that I'm covered in the unlikely case that my laptop dies while I'm writing. The only regret I have, like I mentioned earlier, is that I started on this feature before I had added a 'published' attribute to my blog posts. I think that if I had added that before I started working on this feature, I might have saved myself the trouble of saving the posts locally, and instead I would have just auto-saved directly to the server. In that case, it would save all changes to the database at a regular interval, but that would not have mattered because the posts would not be published to the site until I was ready to do so. But again, the silver lining is now I can continue to write posts and have any unsaved changes stored locally even if I lose connection to the internet.