The Secret of My Success - a WYSIWYG Comic Editor

One thing I haven't written much about is the editor that I use to make the comics. Sure, the framework that turns the JSON data into a comic is somewhat interesting, but it's mostly just some Jade templates and basic Express routes. The really complex part of the comic is the editor.

When I started out to make a comic, I knew that being able to publish consistently would be a big issue. How many web comics succeed when their publishing schedule is erratic? The key to success, in my opinion, was the ability to make comics quickly. That way I could keep up with a schedule of multiple new comics per week. Ideally, I should be able to throw together a comic in well under an hour. After many months of fine-tuning the editor, that's exactly what I can do.

The Comic Editor in action

This isn't the first time I've done something like this. Way back in the late 90's, before it was popular, I had the idea that web pages with dynamic content should be editable from a WYSIWYG editor that was either built right into the pages or was accessible from an administration page. This was not some high-minded exercise in human-computer-interaction, it was just my way of streamlining the production of web sites for clients. If I could give them a way to change their own page content by clicking on the page and typing new data, they wouldn't have to call me up every time they wanted to have a sale on potato chips (I did a chip factory site once. Really). I could focus on programming instead of fixing basic text, which freed up more time to make more complex web sites. It was a win-win.

Of course, back in those days the interface was a lot less refined. We didn't have all the nice HTML5 and JavaScript capabilities we have today. But it worked, and over the years I've created a number of different editors for different web applications. Most have been WYSIWYG or, as I like to call it, NearlyWYG (pretty close to WYSIWYG, but not exact). My web comic editor looks almost 100% identical to the way the comics look when published, and it's all HTML/JavaScript.

The comic editor gets refined over time as I use it and fight with it. When I find myself going into the JSON directly to tweak some content, I ask myself if I should add a feature (or fix a feature) in the editor instead. There are a lot of front-end JavaScript tricks I learned along the way, so I thought I'd take the next few blog posts to share some of them.

I made today's comic in about 45 minutes, including the time it took me in Inkscape to draw the cat. You're either saying to yourself, "Wow! Only 45 minutes!" or "Yeah? I would have guessed 10" depending on your opinion of my work...

Amphibian.com comic for 4 May 2015