
Show HN: Diff.io - wickedlogic
https://diff.io
======
llamataboot
I see some green blobs, some pricing info, and hear some marketing speak about
letting my CMS be a "self-actuated change awareness system".

I want to know how I integrate this API into my tests, what exactly it tells
me, and how to use it. How about a free plan to test it out? How about
developer docs? How about something more than a few screenshots and a 30
second video that is incomprehensible marketroid speak?

Sorry for the harshness, but I really think visual diff tools are needed for
integration testing. I want to figure out which ones are flexible and how they
can be used. This site helps me do none of that.

~~~
wickedlogic
Harshness is fine :)

There is still more work to be done on making the service more flexible,
mostly just opening up the rest of the api on my end.

How would you describe a CMS that self documents externally?

Perhaps this helps a little: [http://blog.diff.io/show-hn-diff-
io/](http://blog.diff.io/show-hn-diff-io/) (?)

~~~
egwor
This could be used as a way to make sure a web 2.0 app hasn't got some error
and lost some content... e.g. some pane is empty

~~~
rplnt
Would it find errors here? :)

[https://i.imgur.com/xg3BSNs.png](https://i.imgur.com/xg3BSNs.png)

~~~
wickedlogic
Hah, sounds like I need start tweaking that theme's css. That's bad. Email
matt@diff.io the device/browser/resolution?

~~~
rplnt
Weirdly, I can't reproduce it now, so you either fixed it, or it was a bug on
my side (browser, extension, ..?). Anyway, it was a screenshot from Opera 29
(Chromium 42) on Windows 7 with uBlock as one possibly related extension.

~~~
greggman
I got the same the first time but can't repo either

------
schappim
If you want a DIY version of this, try ImageMagick's compare command:

compare bag_frame1.gif bag_frame2.gif compare.gif

Documentation:
[http://www.imagemagick.org/Usage/compare/](http://www.imagemagick.org/Usage/compare/)

~~~
no_gravity
Interesting. And to render the html you can use cutycapt. Which is in the
Debian repos too. I just tried it, and this rendered a nice diff of two pages
for me:

    
    
      cutycapt --url=http://www.xyz.com/1 --out=1.png
      cutycapt --url=http://www.xyz.com/2 --out=2.png
      compare 1.png 2.png diff.png

~~~
easytiger
Now make it a webservice and charge $200/month!

~~~
_pmf_
> Now make it a webservice and charge $200/month!

I don't actually see the problem here. They provide a real service, so they
can demand real money. There are multi billion dollar companies that do less
for their users.

------
nbevans
Tip: Remove the "plans" page. This thing is too early stage to start talking
about $ plans. Nobody even knows what the hell this is or what it is good for.

Your business model should be as follows:

1\. Make something new, useful and free. 2\. Get people hooked on it, like a
drug. 3\. Grow a modest user base. 4\. Introduce "value added" features,
marked as preview or beta, for enterprise customers and integration into other
web services. 5\. Once features added in step 4 have matured, remove the beta
clauses and slap a price tag on them.

~~~
bliti
I sell products that don't even have a website. Even sell products that are
not even finished. That doesn't stop people from paying for them or finding
then useful. In fact, I close a client once a month in b2b sales and I don't
even know how to sell that well. If I followed your plan, I'd be out if money
and my clients would have way more problems.

~~~
joshmn
Would love to hear some actionable tips or insight, or resources you found
useful.

~~~
bliti
I mean, its not that complicated. I just talk to people and ask if I can talk
to them about their business problems. I only do it with people I've sort of
met before because I'm afraid of cold sales (based on a pure fear of
rejection). For example:

Last Saturday was my kids birthday party. We invited her friends from school.
The parents stayed for the party, which turned out to be great. I knew of the
parents was a lawyer. I say hi to her and outright ask her if I could drop by
her office to talk about making her life easier through the use of software.
That is literally what I said. She smiled and said 'Yes! I need to organize
myself better. Please, visit me next Wednesday (tomorrow). I will be there and
you can help me.'I was afraid of asking here. Lawyers are scary! But they are
also the kind of business owner who relies on technology to get their job
done. Document management, appointments, client tracking, billing, etc. So I'm
going there tomorrow, with absolutely no plan to sell anything. But an
interest in understanding what she needs and wants.

Notice that I don't sell one product. I'm looking to build products for them
and them charge them a monthly fee. It takes me about a week or so to build
something that (barely) works. Which then gives them the chance to use it and
give me feedback. Who knows if one of those products will turn into something
big? The aim is not to have an idea for a product, but to find actual
needs/wants from businesses and building a product to solve it. The exact
opposite of what people normally do. Dont focus on an idea, focus on other
peoples problems.

~~~
joshmn
> if I could drop by her office to talk about making her life easier through
> the use of software

That is exactly what I always intend to say, but my brain has this awesome
tendency of not knowing what words to put together in what order. Not
dyslexic, just very happy all the time.

------
morgante
This seems like it could be great—can I drop this into my CI workflow to find
visual regressions?

That's the question you should be answering. Not trying to sell some "self-
actuated change awareness" mumbo jumbo. The video literally sounds like an
infomercial for a cult.

Sorry for being harsh, but it sounds like you have some cool technology which
is unfortunately overwhelmed by terrible marketing.

~~~
wickedlogic
Good feedback, thanks.

I do see your pointed about CI workflow, but I think visual regressions are
the current obsession and a limited use case. A very valuable and useful use
case, granted.

But if something like diff.io was in place in your browser, in your content
publishing system, in your social networks, having it just in your CI would
seem limited. Would you agree?

~~~
morgante
> But if something like diff.io was in place in your browser, in your content
> publishing system, in your social networks, having it just in your CI would
> seem limited. Would you agree?

No, I don't. I have about 0 interest in seeing diffs of social networks or
most web pages. It _might_ make sense in a CMS but even there I think most
people are better served by traditional textual diffs.

It sounds like you've found a good solution for a medium problem (preventing
visual regressions) but want to expand it into a "movement."

------
empressplay
Your "bootstrap" level should be free. I don't see any bootstrapping startup
paying for a service they don't need / can build themselves for free (if
they're really desperate for it.)

You want to capture that potential future business, and hope that you can
convert them to paying customers as they become profitable; you don't want
them to go "hey, great idea, but I'm not paying for that" and then implement
their own solution.

~~~
bliti
Isn't it better to just sell to people who can pay? I mean, why being so
against asking for money? Its strange how you say that if they really needed
it they could just build it. That's a bit of a stretch. Why build something
you can pay for and focus on making money instead? Dunno. I'm just confused.

~~~
tlrobinson
Maybe, but many people (myself included) may be reluctant to use it if they
can't even try it out without paying for it.

Especially if the core product can be replicated with 3 lines of code using
open source libraries.

~~~
bliti
Three lines of code? Is this something you could do in three lines? I mean,
only deploying this live requires way more than that. One thing people seem to
forget is that building your own tools means that you also have to deploy,
maintain, and fix them. If programmer time is > $100, how much will it cost
you to deploy something like this? I'd rather pay the money and move onto
building products that make me money.

~~~
tlrobinson
True, but this is just a service, you're going to have to write code to
integrate with it anyway, why not just call ImageMagick (or whatever)
directly?

------
Permit
I just want to say that I strongly disagree with the people here who are
complaining about your pricing page.

You need to validate that people will pay money for this product, and the
quickest way to do so is to ask up front. I really don't buy this "Give it
away for free, get them hooked and then staple on paid features" approach.

PG said it best: "Better to make a few users love you than a lot
ambivalent."[1]

One of the best ways to find out if people love what you're building is to ask
them to pay for it.

[1][http://www.paulgraham.com/13sentences.html](http://www.paulgraham.com/13sentences.html)

------
stephentmcm
I've half built a tool to do this using PhantomJS, and a really half-baked
API. The image grab part is easy. The diffing is what's hard... well sort of.

What I tried and what this site appears to do is a straight pixel change
detection, which fails to account for how important that change is. Minor
things change on a site all the time it's catching major breaking changes
that's hard, say a CSS rule change that looks fine on desktop but ruins the
site on mobile.

~~~
Kimitri
I've used CasperJS, PhantomCSS and PhantomJS for visual regression testing on
dozens of Drupal sites and, while not a perfect solution by any means, it's
worked pretty well. PhantomCSS seems to be pretty configurable and makes it
rather easy to detect breaking changes.

~~~
stephentmcm
O nifty I hadn't seen PhantomCSS before.

------
jwklemm
Nice work! We have a similar feature built into Ghost Inspector:
[https://ghostinspector.com/#visual-
regressions](https://ghostinspector.com/#visual-regressions) \-- It includes a
tolerance setting so you can basically say "I only want to hear about it if
the screenshot changes by xx% or more." Effective visual regression testing at
scale is tough though and is really more of a secondary feature for us.

If anyone is interested in other solutions, ImageMagick has a nice "compare"
tool built-in. There are also plenty of open source projects like Huxley,
PhantomCSS, etc. I recently saw a demo of Applitools Eyes
([https://applitools.com/](https://applitools.com/)) and it's quite powerful
(though it's a paid service).

Lastly, I did a presentation that involved visual regression testing here:
[https://www.youtube.com/watch?v=mK0l__jmpTA](https://www.youtube.com/watch?v=mK0l__jmpTA)
(starts around 12:25)

~~~
Addie_B
Applitools Eyes has a free account option as well, which grants access to all
automated visual testing capabilities as in the paid packages - for a single
user.

------
kasparloog
Monitoring is a good idea. However, pixel-based comparison services are quite
pointless for web pages. Banners, dynamic content etc. simply drives spam.

Try Browserbite with its feature-based comparison. There are other regression-
oriented tools out there as well that use pixel-based methods as well.

------
zoidb
Hey nice! I've actually done something similar myself as a weekend project -
[https://page-watch.com](https://page-watch.com)

Also checkout the following projects,
[https://visualping.io/](https://visualping.io/) and [https://dpxdt-
test.appspot.com/](https://dpxdt-test.appspot.com/)

If you are using something like phantomjs to generate website screenshots I
wonder how you are dealing with dynamic content. A lot of pages have
continuous animations that can screw with simple image diff comparisons. For
this reason you may want the option to limit your compare to a subset of the
page.

------
bcjordan
Very nice! Your CMS integration looks like a fantastic way to mitigate the
onboarding pain of most integration testing systems.

Definitely a useful type of test to have and certainly comes from a place of
pain. Last year I worked on a bootleg similar project during the YC Hacks
event—it was hard to get it to work right.

Recently Applitools Eyes[0] started gaining popularity for CI-based visual
testing, I hooked it up to some Selenium integration tests at work earlier
this year and the things it catches have consistently amazed me. Catches
nearly all of the bugs that manage to slip past the typical unit / end-to-end
tests.

One hard part they navigated well has been the interface for being able to
review changes, set new baselines, and set a certain area as "ignored". IIRC
they even use some fancy computer vision algorithms to handle slight
variations in screenshots (e.g. font alignment false positives).

[0]: [https://applitools.com/](https://applitools.com/)

------
marcelerz
You are probably using Blink-Diff for the image comparison. Isn't it?
[https://github.com/yahoo/blink-diff](https://github.com/yahoo/blink-diff)

For example: [https://raw.githubusercontent.com/yahoo/blink-
diff/master/ex...](https://raw.githubusercontent.com/yahoo/blink-
diff/master/examples/YDN_Sort_output.png)

You can change the highlight-color to green (it is a configuration option),
just like it is on the page there:
[https://diffio.global.ssl.fastly.net/v1/diffs/2015-05-28/eee...](https://diffio.global.ssl.fastly.net/v1/diffs/2015-05-28/eee2f08b89fa67377fd18ccb990c7d45f1464f95/montage.png)

And the "montage" is called a "composition" in Blink-Diff.

~~~
wickedlogic
It isn't Blink-Diff, but I had looked at that project at one point. It has
some interesting options. :)

------
uptownfunk
I want to know what this does, the youtube video does not explain clearly in
layman's terms.

------
ivanhoe
Looks like a useful service. Just a word of warning, your SSL certificate is
not trusted by Chrome and possibly some other browsers. You have to install
Intermediate certificates to make it work for everyone.

~~~
rb2k_
Works for me on Chrome 43.0.2357.81 (OS X)

Green lock + "The identity of this website has been verified by COMODO RSA
Domain Validation Secure Server CA but does not have public audit records."

No warnings.

~~~
ivanhoe
Now it works for me to, I guess they fixed it in a meantime.

~~~
wickedlogic
Yes, thank you for pointing that out.

I had recently installed new certs, but failed to point it to the ssl-bundled
cert and instead it was just the main cert without the intermediates.

Things are happier now:
[https://www.ssllabs.com/ssltest/analyze.html?d=diff.io&hideR...](https://www.ssllabs.com/ssltest/analyze.html?d=diff.io&hideResults=on)
"A+"

------
Gigablah
Your API documentation isn't public. That's an instant turn-off.

~~~
wickedlogic
The dashboard api is still a work in progress, but the actual api is
documented here: [http://blog.diff.io/talking-to-api-diff-io-via-json-web-
toke...](http://blog.diff.io/talking-to-api-diff-io-via-json-web-token/)

------
olivierkaisin
Great project!

This is really a need for monitoring consistency of UX of any website.

Although I just think you should simplify your pricing model. I don't
understand why you are talking about "requests". Who cares about bandwidth
today anyway? Just make people pay for the number of pages the frequency of
the checks.

Also, you should allow people to set up e-mail alerts when some parts of their
website pages change (e.g. payment forms).

I would definitely pay for such product. : )

------
foton1981
[https://github.com/bslatkin/dpxdt](https://github.com/bslatkin/dpxdt)

~~~
heyalexej
Here's a Video that explains how the Google Survey team uses perceptual visual
diffs (dpxdt) in their deployments:
[https://www.youtube.com/watch?v=UMnZiTL0tUc](https://www.youtube.com/watch?v=UMnZiTL0tUc)

------
gcb0
the license plates image is misleading as hell!

for a moment you think it is smart enough to realize subject and background
and only show you changes on the normalized objects.... but it is actually
just an edited image on the other side to add a clean element for the diff.

~~~
wickedlogic
This is strictly over images, not video. I guess I see your point, didn't
consider it that way at all, since it was a picture of my plate and a modified
img change to generate populate the diff.

I could swap it with the real plate and the real plate with a sticker, or
something. As a regression I thought it was straightforward. :|

Was the confusion that you thought it was doing something like wordlens:
[http://1.bp.blogspot.com/-X95Ga7iMP74/T_vjrp2PF2I/AAAAAAAAFM...](http://1.bp.blogspot.com/-X95Ga7iMP74/T_vjrp2PF2I/AAAAAAAAFMA/bNfjJpp5qhM/s1600/word-
lens-app-nemo-s-travels.png)

~~~
gcb0
yep. i assumed it did some image transformation to find the minimum diff
between two images as to compensate for two differently angled pictures or
something.

------
wldlyinaccurate
This reminded me of Wraith, a screenshot comparison tool which The BBC
developed for integration testing: [https://github.com/bbc-
news/wraith](https://github.com/bbc-news/wraith)

------
bliti
Your landing page might benefit from using wordpress as an example. I saw the
service and immediately thought about how to integrate this into wp. Maybe
even turn it into a wp plugin? Dunno. This does seem useful.

------
joshcanhelp
This looks fantastic. I was just looking into doing this "manually" with an
automated screenshot process for a site I'm refactoring part by part.

------
audaxion
[https://github.com/facebookarchive/huxley](https://github.com/facebookarchive/huxley)

------
bgraves
Hmm, is this built on top of url2png by any chance? :)

~~~
wickedlogic
Yup, at least that is the primary source of screenshots :)

------
OneTwoFree
The site shows an SSL warning message. The certificate details says it was
issued by "Avast untrusted CA".

~~~
swatkat
It's more likely a problem with Avast security software, not the website
itself. Are you using Avast Anti-Virus or Web/Mail Shield? Avast installs a
root certificate to intercept and scan HTTPS traffic[0].

[0] [https://itnerd.wordpress.com/2015/05/21/avast-responds-to-
my...](https://itnerd.wordpress.com/2015/05/21/avast-responds-to-my-post-
about-their-anti-virus-product/)

~~~
OneTwoFree
Thanks. I use Avast Anti-Virus. I didn't know they are doing man-in-the-
middle. But as I learned, this is quite common for modern antivirus softwares,
so I turned off this option in Avast.

------
omarchowdhury
Could use this to monitor competitor's landing pages and see what they split
test.

------
cekanoni
your ssl is signed by unknown vendor so i wouldn't trust it..

~~~
kennycox
This error occurs while you are using a self-signed certificate, it is
advisable to go through the trusted third party certificates.

You can use SSL installation checker to diagnosis troubleshoots.

[https://www.ssl2buy.com/wiki/ssl-installation-
checker/](https://www.ssl2buy.com/wiki/ssl-installation-checker/)

[https://www.sslshopper.com/ssl-checker.html](https://www.sslshopper.com/ssl-
checker.html)

[https://ssltools.websecurity.symantec.com/checker/views/cert...](https://ssltools.websecurity.symantec.com/checker/views/certCheck.jsp)

------
mastercoms
Nice theme. [http://startbootstrap.com/template-
overviews/grayscale/](http://startbootstrap.com/template-overviews/grayscale/)

------
LaFolle
Nice idea. But it would have been great if there could have been a trial/free
version. I would like to test the service so that I understand what exactly it
is about. Watching a video and reading text does not help much until you try
it out by yourself.

