To be perfectly honest, I find nothing "excellent" about the right image at the beginning of the article.<p>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.<p>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.<p>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.<p>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.<p>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.
Great to see more examples of image diffing. Segment recently wrote a post about their process, too: <a href="https://segment.com/blog/perceptual-diffing-with-niffy/" rel="nofollow">https://segment.com/blog/perceptual-diffing-with-niffy/</a>
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.<p>[0] <a href="https://github.com/uber-archive/image-diff" rel="nofollow">https://github.com/uber-archive/image-diff</a>
[1] <a href="https://github.com/HumbleSoftware/js-imagediff" rel="nofollow">https://github.com/HumbleSoftware/js-imagediff</a>
[2] <a href="https://github.com/cburgmer/csscritic" rel="nofollow">https://github.com/cburgmer/csscritic</a>
I know the main thrust of the post is building a complex visual test harness, but:<p><pre><code> .ellipsis {
text-overflow: ellipsis;
white-space: nowrap;
overflow: hidden;
}
</code></pre>
> In both my application code and my unit test, I’ve mistakenly written .ellipses. Unfortunately, all the unit tests pass.<p>I kinda feel like a graceful way to handle this <i>particular</i> error is to acknowledge that "ellipsis" is a word that is super easy to misspell, and either declare this class to apply to <i>both</i> 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?<p>Naming stuff is hard.
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: <a href="https://github.com/nicolashahn/python-image-diff" rel="nofollow">https://github.com/nicolashahn/python-image-diff</a>
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.<p>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.
I would like to point out a library that does this that is an npm/yarn install away:
<a href="https://github.com/gemini-testing/gemini" rel="nofollow">https://github.com/gemini-testing/gemini</a><p>it's quite full featured for my needs and it's backed by Yandex
Haven't used it yet, but <a href="https://percy.io/" rel="nofollow">https://percy.io/</a> does this for you. They offer a startup discount.