Diffd

Compare website versions before you deploy.

1 follower

Compare website versions before you deploy.

1 follower

Visit website

Launch tags:Web App•Tech

Launch Team

CloudflareStill paying to deploy your apps? Try Cloudflare Workers for free

Promoted

Diffd

Maker

Picturing how a code diff will affect your site is almost impossible. We built Diffd to make it easier to see layout bugs before you push new versions of your website. It finds and highlights visual differences between your staging and production environments on a variety of devices so you can fix bugs before you release.

Report

11yr ago

Gift Genie AI

@mchlstwrt great work, love the simplicity of zero configuration, multiple browsers and sizes! What sorts of bugs have been found so far using this platform? What sorts of false-negatives were tough to work around early on?

Report

11yr ago

Diffd

Maker

@bcjordan Thanks Brian! We've found a bunch of bugs so far just using it on our own site. An example is a button that doesn't contain its text at a certain screen size:

Report

11yr ago

Diffd

Maker

@bcjordan As far as the first false difference go we've worked through a few so far. The first type we had to address was that when the size of one section changes everything below it seems different if you just do a simple pixel difference. There are also a number of tricky false differences that are caused by dynamic aspects of a page such as a gif or auto playing video. The before and after screenshots don't always match up exactly so it often indicates that something has changed. We're working on a way to allow you to mark these areas as not actually different so we can learn that and stop including them in the diff.

Report

11yr ago

Gift Genie AI

@mchlstwrt very nice, it's certainly not an easy tool to build! Last year my brother and I made a simple list of URLs -> screenshots in email diff alarm tool for the YC hackathon. Who knew sub-pixel font differences between exact same content screenshots could cause diffs! For handling varying / random areas like videos, I would recommend taking a look at how Applitools handles marking and expecting a certain visual to display on page but anywhere within a certain area. Updating those areas when the top part of the page changes, though, can become tedious.

Report

11yr ago

Gift Genie AI

@mchlstwrt have definitely found ROI for this type of testing can be huge—early this year I started using Eyes (a visual diff/alert service from Applitools that hooks in to Selenium / automated tests) and have been amazed at the sorts of things that pop up—once it caught an inadvertent style change in line-height on nearly all pages, losing precious centimeters of vertical space. May have never caught that otherwise 😦 One slightly painful part in practice is updating baselines and marked areas as the page layout changes, especially as you build up hundreds of assertions—innovation in mass update operations could make a big difference here. 💪👍

Report

11yr ago

Hunter

Diffd compares your new website changes with your existing site visually. See the difference between two versions and find bugs before you push code live.

Report

11yr ago

Diffd

Maker

@kwdinc Thanks for posting Kevin!

Report

11yr ago

Coworker Coffee

"Stop staring at code diffs" - I can't quite tell from your demo if you also show code changes or not. If not, it would be great if the visual changes you highlight in red or green were also highlighted in the code at the same time. Can't believe this hasn't been done already - great idea guys.

Report

11yr ago

Realm

Maker

@alangarrec Thanks Alan. We can't show you all code changes but we do show you what that code changes on your site visually.

Report

11yr ago

Bounce Bar

Does Diffd have support for comparing logged in pages?

Report

11yr ago

Diffd

Maker

@forresttooker Not yet. That's something that we'll be adding soon.

Report

11yr ago

Bounce Bar

@mchlstwrt Nice, how will that work? Will I have to login manually each time for testing?

Report

11yr ago

Diffd

Maker

@forresttooker We're currently planning on implementing a process that would go something like this: - You enter the login page URL - You enter the username and password of a testing account (which is stored on our servers) - Our servers make a login request to that URL at the start of each diff. All of the cookies that are returned with that login request are then used for subsequent requests.

Report

11yr ago

Reviews