
An image diff is worth a thousand words - tylernappy
https://blog.usebutton.com/an-image-diff-is-worth-1-000-words-e03a4b682cea
======
unabst
To be perfectly honest, I find nothing "excellent" about the right image at
the beginning of the article.

Clearly there is room for two lines there. The "excellent" image would be the
left image centered properly. It would be legible and without secrecy. If I
didn't want to read all of it I wouldn't. But a "..." gives me no choice, nor
any further information.

This trend to increase font size was suppose to be for better legibility and
simplicity. But instead, we are truncating text where it would naturally fit
fine. We are hiding valuable information where conveying information is the
only function of that space.

The worst example of this is Google Drive. In grid view, only up to 15
characters of a file name are displayed. That means I cannot prefix anything.
"2017-06-10 something" is already "2017-06-10 some..". Photos taken with an
Android phone have names too long to fit.

This in a space that could easily fit two lines, that has excessive padding
and a tiny icon surrounded by an invisible circle that is then excessively
padded on top of that. Why not move that icon to the top left corner of the
file preview? And hide it when the file preview is just a huge version of that
same icon? The fact that such redundancy is not made an issue already shows a
lack of interest in maximizing interface space.

A name is guaranteed to be meaningful, and we use names to help sort and
organize our files. Same with titles, and same with captions of things. And
the bottom line is, you're not being more concise when you truncate things!
There is only one way to do that, and it's by changing our words.

~~~
DiThi
I thought it was a joke showing "the home of the Colossal D".

------
robbiemitchell
Great to see more examples of image diffing. Segment recently wrote a post
about their process, too: [https://segment.com/blog/perceptual-diffing-with-
niffy/](https://segment.com/blog/perceptual-diffing-with-niffy/)

------
Flenser
The image-diff library the article uses[0] depends on ImageMagick. If you want
a library that does it entirely in JS there is js-imagediff[1] which is used
by the excellent CSSCritic[1] to do visual regression testing entirely in the
browser.

[0] [https://github.com/uber-archive/image-diff](https://github.com/uber-
archive/image-diff) [1] [https://github.com/HumbleSoftware/js-
imagediff](https://github.com/HumbleSoftware/js-imagediff) [2]
[https://github.com/cburgmer/csscritic](https://github.com/cburgmer/csscritic)

------
egypturnash
I know the main thrust of the post is building a complex visual test harness,
but:

    
    
        .ellipsis {
          text-overflow: ellipsis;
          white-space: nowrap;
          overflow: hidden;
        }
    

> In both my application code and my unit test, I’ve mistakenly written
> .ellipses. Unfortunately, all the unit tests pass.

I kinda feel like a graceful way to handle this _particular_ error is to
acknowledge that "ellipsis" is a word that is super easy to misspell, and
either declare this class to apply to _both_ the proper word and the
misspelling that's going to constantly get scattered throughout the codebase,
or to pick another name entirely such as ".truncated" or, I dunno, ".elided"
maybe?

Naming stuff is hard.

~~~
wodenokoto
Shouldn't the unit test highlight unused css properties, as well as elements
linked to non-existent css properties?

I feel like such a mistake ought to be caught by a unit test.

------
nicolashahn
Shameless plug, but another (simpler, almost trivial) option for the actual
image diffing part in python using PIL I made when doing a similar task for a
past company: [https://github.com/nicolashahn/python-image-
diff](https://github.com/nicolashahn/python-image-diff)

------
rui8
Interesting post. While not exactly the same, but test scripts made with
Sikuli and Kantu work well for us to check for unwanted UI changes.

~~~
jasonmoo
I've always wanted to do more with Sikuli. I could see it working well for
this.

------
haburka
This is so awesome! I bet it wouldn't be too difficult to test many browsers
and resolutions this way! I love the image diff idea to produce results that
are very easy to check for accuracy.

Of course the setup work seems pretty miserable. I don't think I'll be
implementing this ever but it's certainly a great task for an intern.

------
hyuuu
I would like to point out a library that does this that is an npm/yarn install
away: [https://github.com/gemini-testing/gemini](https://github.com/gemini-
testing/gemini)

it's quite full featured for my needs and it's backed by Yandex

------
deedubaya
Haven't used it yet, but [https://percy.io/](https://percy.io/) does this for
you. They offer a startup discount.

