Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
A talk proposal for React conf 2016
Diffux CI lightning talk proposal
Talk title: Visual diffing for React components
Are you worried that your CSS changes will break the styling of a component?
Are you scared that your code refactoring will result in visual bugs? Do you
find it difficult to understand how a code change affects the appearance of your
components? If you answer yes to any of the questions above, you want a visual
diffing tool. While many exist, Diffux-CI is the best one for React.
Diffux-CI is an open source tool that takes screenshots of rendered components
and diffs them against previous screenshots. When diffs are found, the UI will
help you understand how to interpret the change.
By being able to run headlessly, Diffux-CI integrates perfectly with continuous
integration environments such as Travis, Jenkins, and others. Components are
rendered and screenshotted in a real browser (Firefox).
During the lightning talk we will demo Diffux-CI in action. We will show how to
add new components to the test suite and how the tool will find visual
regressions when they are introduced. We will show how to integrate with a CI
environment and run a suite on more than 500 examples. And we might wear funny
hats.
@lencioni

This comment has been minimized.

Copy link

@lencioni lencioni commented Dec 12, 2015

While many exists

should be "exist"

@lencioni

This comment has been minimized.

Copy link

@lencioni lencioni commented Dec 12, 2015

open-source

I think this is usually not hyphenated.

@lencioni

This comment has been minimized.

Copy link

@lencioni lencioni commented Dec 12, 2015

tool that renders components, takes screenshots of how they look, and diffs those screenshots against previous screenshots.

Might be better as: "...tool that takes screenshots of rendered components and diffs them against previous screenshots." Even further: "...tool that diffs screenshots of versions of components." but does that phrasing lose something important?

@lencioni

This comment has been minimized.

Copy link

@lencioni lencioni commented Dec 12, 2015

the built-in diffing UI will help you understand

Might be better as "the UI will help you understand"

@lencioni

This comment has been minimized.

Copy link

@lencioni lencioni commented Dec 12, 2015

It might be worth mentioning that the screenshots are taken with a real browser.

@lencioni

This comment has been minimized.

Copy link

@lencioni lencioni commented Dec 12, 2015

During the five minute lightning talk

Probably don't need to say "five minute" here

@lencioni

This comment has been minimized.

Copy link

@lencioni lencioni commented Dec 12, 2015

run a suite on a codebase with more than 500 examples

Could probably drop "on a codebase" here.

@trotzig

This comment has been minimized.

Copy link
Owner Author

@trotzig trotzig commented Dec 13, 2015

Might be better as: "...tool that takes screenshots of rendered components and diffs them against previous screenshots." Even further: "...tool that diffs screenshots of versions of components." but does that phrasing lose something important?

I picked the first option. Not that the second one is wrong, but it didn't read well to me.

@trotzig

This comment has been minimized.

Copy link
Owner Author

@trotzig trotzig commented Dec 13, 2015

Might be better as "the UI will help you understand"

Done.

@trotzig

This comment has been minimized.

Copy link
Owner Author

@trotzig trotzig commented Dec 13, 2015

It might be worth mentioning that the screenshots are taken with a real browser.

I added that in the "By being able to run headlessly" section.

@trotzig

This comment has been minimized.

Copy link
Owner Author

@trotzig trotzig commented Dec 13, 2015

Probably don't need to say "five minute" here

Gone.

@trotzig

This comment has been minimized.

Copy link
Owner Author

@trotzig trotzig commented Dec 13, 2015

Could probably drop "on a codebase" here.

Gone.

@trotzig

This comment has been minimized.

Copy link
Owner Author

@trotzig trotzig commented Dec 13, 2015

By being able to run headlessly, Diffux-CI integrates perfectly with your
continuous integration environment such as Travis, Jenkins, and others.

I dropped the "your" from this sentence.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment