/ News

Everything about Drafts

September 5, 2015

Blot lets you preview a draft post before publishing it to your live blog. You can see it in action in the demo video below:

The goal is to allow the user to view the post as it will appear on their blog as soon as possible. Blot makes this possible, in real time — the preview will update automatically as the draft changes.

How it works from the user’s perspective

  1. I write a post and save it to /drafts.
  2. A new file appears beneath the draft. Opening the file shows me how the draft will look when published. If I edit the draft, the preview updates automatically.
  3. To publish I move the draft from /drafts to elsewhere in Blot’s folder.

How it actually works

  1. Dropbox tells Blot that a user’s folder has a new file
  2. Blot fetches the new file from Dropbox
  3. If the new files looks like a draft, Blot will write a preview file to the user’s Dropbox folder. If the draft file is called pumpkin.txt, the preview file would be called pumpkin.txt.html. This format was chosen so that the preview file would be right after the draft file.
  4. Blot will process the draft as if it were a new entry, but ensure that it remains hidden.

The preview file

When the user opens the preview file in their browser, they see how the blog post will look when on their blog. The menu will work, the plugins will be applied etc..

When I first built the feature, I rendered the final HTML for the entry then wrote that to an HTML file which I then delivered to the user’s Dropbox. However, making a single change to the draft would require restarting this entire process.

Speeding things up

So, an improvement was to write a generic HTML file, containing a script tag and an iframe. When the HTML file is opened, the script checks window.location.href to determine the path of the file it should preview, updates the src of the iframe to a location on the users blog where the corresponding draft could be viewed.

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Draft of News </title>
<style>
body {margin:0;padding:0}
iframe {
position:absolute;
top:0;left:0;right:0;bottom:0;
border:none;
width:100%;
height:1000px
}
</style>
</head>
<body>
<iframe src="" />
</body>
</html>

And the javascript required to make the DOM update automatically is below:

var source = new EventSource('{streamURL}');
source.onmessage = function(e) {
    document.body.innerHTML = JSON.parse(e.data);
};

Since the preview file that needs to be written to a user’s Dropbox is always identical, Dropbox lets you create a copyref to speed up the copying process.

Making it update automatically

The preview route on the server sends a server-sent event to the client containing the new HTML for the page, which the client then uses.

In future, I’d like the server to know the state currently being viewed, compute the diff with the latest state of the entry, then only send that diff, and have an injected script in the draft viewing entry that knows how to handle the diff and update the DOM. This would make things even faster, and prevent the reloading of iframes and embeds when the DOM updates.