Warhol

We are Warhol

Published on 28.01.2019 by Peter Kröner and Hans Christian Reinl

The Warhol logo

Our Mission, our vision

We are Warhol.

With Warhol we want to make frontend development easier for you. Our goal is to help you to ensure that the components in your web page or app look exactly how you define them in your component library. This greatly reduces style bugs in production. While developing, it makes sure that things look right from the beginning to finish. Our browser extension highlights style inconsistencies as soon as you "create" them. Furthermore our automated services report bugs in each commit and can even permanently monitor your production system.

Not just Visual Regression Testing

Warhol takes ideas from visual regression testing and turns them into something that goes beyond just comparing pixels. Regular visual regression testing usually takes screenshots of a component library and compares them against earlier screenshots of said component library. The usefulness of this approach is limited in a number of ways:

  • it is usually slow - way to slow to check for bugs in the developer's browser
  • it can't tell changes in design from changes in content and thus can't be used to check the design of a production website or app
  • it reports errors in pixels and does not offer any clue into which CSS might actually cause an error

Apart from that, screenshots only represent a specific state of a system: a specific browser on a specific computer. This leads to false negatives when comparing screenshots taken on different devices, different versions of an operating system and, of course, different browsers.

What Warhol does differently

Warhol's core algorithm understands your CSS and not just the pixels that result from CSS. Therefore, Warhol can not only tell you where an implementation of a component diverges from the styles defined in the component library but also

  • exactly how the style declarations that apply to an element are different from those in the component library
  • which CSS properties are missing or where CSS values are not as expected
  • if colors not allowed in the component library are in use anywhere on the page
  • where pseudo elements are missing or not working

The algorithm is fast enough to check pages inside a browser. Just install a browser extension and get reports about unexpected CSS that pinpoint style bugs to specific elements, CSS rules and even individual values - including CSS variables of course.

On top of that, Warhol only requires a minimal amount of configuration: you just specify selectors for your components and the algorithm does the rest of the work for you. Warhol works with every JavaScript framework, every content management system, every CSS paradigm, every kind of component library tool and can easily be used with legacy and brownfield projects - all you need is some kind of component library.

Our plan

In this blog we will soon provide you with more information on how Warhol works, what we found out while building it (get ready for some juicy browser bugs and CSS specification lore) and how you can use Warhol to make your products look consistently good. Stay tuned and subscribe to our newsletter. We will be in touch!

Subscribe to newsletter Get the RSS feed Follow us on Twitter

A picture of the author

Written by

Peter Kröner

Trainer for frontend technologies, podcaster @workingdraft.

Twitter
A picture of the author

Written by

Hans Christian Reinl

JavaScript Development. @workingdraft, @nightlybuildio

Twitter

More from the blog

Be the first to know

You want to know more? Stay tuned and subscribe to our mailing list. We keep you posted of the progress of Warhol.