My Profile Photo

My personal blog. Software, devops, security, music, and general nerditry.

Comps - design vs reality comparisons in Chrome

For a long time, I used the PixelPerfect Firefox add-on to compare rendered comps with my finished web work. This was a fast and effective way to make sure that I got the spacings, font sizes, and other such things done properly.

However, PixelPerfect doesn’t work all that well (well, at all) anymore, and Firefox is no longer my browser of choice. There weren’t any good options for Chrome, so I wrote one.

You can grab it straight from the Chrome store if you want (it’s free!), or you might be interested in perusing the source code.

Comps is very lightweight, and gets straight to the point - click the button, drop your comp into the webpage, and position it to make direct comparisons. Mousewheel over the comp to change its opacity, or you can toggle it on and off using the thumbnail drawer or the Comps button. It’ll remember your settings between sessions (and even pageloads!) so that you can tweak and refresh to your heart’s content, and instantly have your comp right there for comparison.

Give it a shot, let me know if/how you like it.

comments powered by Disqus