I like to create comic strips. Up until recently, I used to create them in GIMP and then I manually exported them to PNG for my personal website and as separate JPG frames for Instagram.

Even though I had several templates into which I just wrote text, manual compositioning and exporting of the strip and its frames was still tedious.

One day, I got this idea to create an application that would take a JSON configuration, source images and composite everything into a comic strip automatically.

The Strippr was born.

Technologies⌗

  • NodeJS + TypeScript
  • Jimp
  • Yargs
  • Gulp

Graphicsmagick vs Jimp⌗

My first working prototype used Graphicsmagick. It is a command line tool that has a NodeJS wrapper called gm. While trying the first prototype out, I ran into several problems.

One big gotcha was that only two images could be composited together. That meant writing each frame as temporary file, then putting text in, then saving it again. Then doing the same with header and footer and, finally, taking each of the components and gradually saving it into a file.

Quite clumsy, innit?

Another serious problem was that the application required Graphicsmagick installed. That would have been a complication for distribution of the app.

I did a bit of research then and ended up with Jimp. A pure javascript solution which allows doing all the necessary stuff in memory and then exporting the result as necessary.

Of course, Jimp is not perfect. For instance, it cannot render true type fonts, only bitmap fonts are supported. That is a problem but fortunately there is a load of free fonts online and they can be converted, for example using this page.

TypeScript⌗

The first prototype was written in pure Javascript. However, with growing complexity, the language started hitting its limits. It became hard to keep track of method signatures - their argument order and types. So I decided to switch from Javascript to TypeScript. This was my first NodeJS project where I dared to do so.

It was a great new experience since there was some tinkering and tuning in order to set everything up. A great opportunity to learn some Gulp, too. Why? TypeScript transpiler does not have any configuration for copying non-typescript resources, such as images, to the dist folder. You need to use an external tool.

See, here is the funny part - TypeScript makes Javascript’s problems less painful. It has a good IDE support and the type hints are awesome; however, it makes things complicated in other aspects. Having to tinker around with something in order to make it work with unit tests and deployment is in my opinion not optimal.

The development should be straightforward. Clean. In ideal case, we should just have to open our IDE, write the code and tests, tell the environment where to deploy everything and hit 'run' instead of tuning a million external tools and plugins in order to just set up the development environment for a pretty simple application.

Sorry about the rant but I just had to let it out.

EDIT
I did some research and consulted the stuff with a former colleague who is a NodeJS developer now - and learned how to use npm only. So I got rid of Gulp in the end and the tech stack is a bit narrower.

Next Steps⌗

The application is good enough now, it means that I can now generate simple comic strips from given resource files exactly as I needed. Let’s call it a minimal viable product. However, there is still a lot to do. I would like to publish the application as a runnable npm package.

Here is what is missing:

  • Input validation (config file validity)
  • Error handling - displaying conscise errors instead of raw exception objects.
  • Unit tests for case of further continuous development
  • Finish build and deployment automation
  • Complete the documentation

To be continued? Most likely!

Links⌗