Todd Wolfson

Software Engineer

July 24, 2013

Back in November 2012, I began working on a project titled kaleidoscope. The idea was a script that would take screenshots of multiple webpages in the browser and display them in a grid on a website. Each image would automatically refresh as any file it used was updated and it would be entirely standalone within the browser.

The reason for this was updating one line of CSS verifying isolated changes for a single page which requires checking multiple webpages.

If the technology sounds far-fetched, it is not and I had a working proof of concept.

Pre-existing technology

  • Resource-Collector can collect the information of resources from a webpage, and in theory even the information from an iframe.

  • File-Watcher can watch a list of resources for changes.

  • domvas converts any HTML element into an image

Technology built


snapshot.js was intended to be the flagship engine. However, due to implementation bugs in svg+xml images, it would not render some properties properly (e.g. background-image, box-shadow).

snapshot.js working

However, the grid system with screenshot-as-a-service worked quite well.

screenshot-as-a-service working

Why the abandonment?

I am marking this project as a failed experiment since the in-browser results would not render properly. It is great that I got it workign with screenshot-as-a-service but the purpose of the experiment was to be standlone in the browser.

The reason I am marking it as abandoned now rather than back then is I know what the next steps forward are; perceptual diffs. These are starting to show up more and more, Depicted being the most identifiable service.

tl;dr on perceptual diffs, take your original screenshot, change some code, take a new screenshot, take the visual difference of the images. Here are some images from an article on it.

Perceptual diff

A computer can pick up more subtle changes than a human can and magnify them for human consumption. Additionally, it can test out multiple webpages and tell if the state has changed or not for them.

I am currently thinking everything is a nail and looking forward to building tools to test with perceptual diffs. Adding perceptual diffs to a test suite will allow for quick and painless refactors of CSS and switching of templating engines. I am very eager to get started.

Top articles

Develop faster

Removing the tedium from creating, developing, and publishing repos.

Sexy bash prompt

A bash prompt with colors, git statuses, and git branches.

Recent articles

Testing the Invisible

How to test/prevent elements invisibly blocking other elements