top | item 9643579

Show HN: Diff.io

194 points| wickedlogic | 10 years ago |diff.io | reply

99 comments

order
[+] llamataboot|10 years ago|reply
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|10 years ago|reply
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/ (?)

[+] schappim|10 years ago|reply
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/

[+] no_gravity|10 years ago|reply
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
[+] nbevans|10 years ago|reply
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.

[+] encoderer|10 years ago|reply
Absolutely, 100% disagree. Paying customers are not a foregone conclusion. You need proof, and product guidance, and you need it early and often.

I agree with you about only focusing on the essential at first. I too believe in launching a very MVP and I launched my saas service without even a way to rebill a customer, knowing I had 30 days to finish that. But the plans and subscription are essential for launch unless your product is not stable, in which case you should do an invite-only beta with your friends.

[+] bliti|10 years ago|reply
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.
[+] zongitsrinzler|10 years ago|reply
Random guy from HN says: "Your business model should be as follows", geez..

I have found that in most cases asking for money earlier than later is the way to go. There is a difference between finding users and finding users willing to pay.

[+] blowski|10 years ago|reply
I agree that the landing page needs some work to make it clear what the product does, and why I would want to pay for it.

However I disagree that you must start by offering the service for free. By charging from day one, you can limit your user base only to those people who are prepared to pay for it. You're less likely to get explosive growth this way, but it's easier to keep the service running as you're not subsidising freeloaders.

One of the assumptions in an MVP is that people are prepared to pay for the service, and you can only establish that by requiring people to part with cash as early as possible.

[+] liquidise|10 years ago|reply
i disagree with this assessment. What harm is there in having a pricing page? I'd support offering a free option, but why on earth would you ever disallow willing customers from paying you money?

On the contrary, i am now tempted to build a "Buy" button on a basic marketing page before i ever write a line of code on future product ideas.

[+] js4|10 years ago|reply
This is horrible advice. Charge as early as you can.
[+] curiously|10 years ago|reply
> 1. Make something new, useful and free.

FREE IS NOT A FEATURE

[+] morgante|10 years ago|reply
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.

[+] unclebucknasty|10 years ago|reply
>mumbo jumbo...cult...terrible marketing

Meh, I don't think it's that big a deal, nor do I think the marketing is bad. You clearly understood that there was some "cool technology" there, right? And, CI is just one use case, right? Still, while the creator doesn't appear to have designed it so narrowly, you are nevertheless seeing the potential application and inquiring. I'd say that's a marketing win.

Of course, with more interest and feedback, the product and message can be honed.

So, maybe your feedback will help the creator, but there are better ways to communicate your opinion. Don't want to be "harsh"? Then, don't be. No need for the side commentary about cults, mumbo-jumbo, and terrible marketing. Those phrases contributed nothing to your otherwise potentially useful feedback. But, they may be discouraging early words for someone who's just poured a lot into a project.

[+] wickedlogic|10 years ago|reply
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?

[+] nodesocket|10 years ago|reply
One solution would be to use an existing GitHub integration to trigger a screenshot on diff.io.

Shameless plug: I'm the founder of https://commando.io, and we have a GitHub service that allows users to run scripts (we call them recipes) on push of a repo on servers. You could write a simple recipe in Commando.io in bash to trigger the screenshot on diff.io:

http://public.recipes/Xr1eCr

[+] empressplay|10 years ago|reply
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|10 years ago|reply
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.
[+] ohitsdom|10 years ago|reply
I agree that a very limited, free tier should help the product gain traction and let people try it out. But:

> can build themselves for free

Bootstrapping startups should not be focused on trying to save $10/month here and there by recreating microservices. A startup may decide to build their own solution for valid reasons, but it most certainly is not "free".

[+] mrweasel|10 years ago|reply
I don't know... I see your point, but people really need to learn that stuff isn't free.

If you do a free tier, you run the risk of having to support infrastructure for people that will never need to exceed whatever you free limit is, just because they couldn't be bother to do the work themself, even if the tools where free.

[+] Permit|10 years ago|reply
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

[+] stephentmcm|10 years ago|reply
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|10 years ago|reply
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.
[+] jwklemm|10 years ago|reply
Nice work! We have a similar feature built into Ghost Inspector: 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/) 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 (starts around 12:25)

[+] Addie_B|10 years ago|reply
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|10 years ago|reply
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|10 years ago|reply
Hey nice! I've actually done something similar myself as a weekend project - https://page-watch.com

Also checkout the following projects, https://visualping.io/ and 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|10 years ago|reply
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/

[+] marcelerz|10 years ago|reply
You are probably using Blink-Diff for the image comparison. Isn't it? https://github.com/yahoo/blink-diff

For example: https://raw.githubusercontent.com/yahoo/blink-diff/master/ex...

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...

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

[+] wickedlogic|10 years ago|reply
It isn't Blink-Diff, but I had looked at that project at one point. It has some interesting options. :)
[+] uptownfunk|10 years ago|reply
I want to know what this does, the youtube video does not explain clearly in layman's terms.
[+] ivanhoe|10 years ago|reply
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_|10 years ago|reply
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.

[+] olivierkaisin|10 years ago|reply
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. : )

[+] gcb0|10 years ago|reply
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|10 years ago|reply
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...

[+] bliti|10 years ago|reply
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.