Are you afraid the next Pull Request in your React repository, will be the one that causes a serious visual regression? You’ve got plenty of PRs being sent to your GitHub repository every day. You try and review them all closely, but you’ve never felt confident reviewing changes to HTML and CSS. You maintain a high development velocity…but just hope you don’t accidentally break your website.

With routine-design, you can create a safety net against visual regressions. Routine-design is a simple free tool you can immediately start using in your React repository. Routine-design works best on components that have…


Update: I wrote a new and improved version of this blog post here: Be Fearless with Screenshot Testing and routine-design

Do you review pull requests (PR) with HTML/JSX/React and CSS/Sass code? Do you find yourself relying on the PR author to test that the HTML/CSS actually works? Is it stressful when the PR author makes a mistake?

What if you had a safety net, so it was impossible to submit HTML/CSS code that does not work?

Photo by Alberto Bigoni on Unsplash

You can set up visual regression testing of your HTML/CSS in four easy steps. First, I’ll show you how to capture screenshot images on…


Photo by Carlos Muza on Unsplash

Are you comfortable using screenshots in your development workflow?

If you’re working in a large React code base, with lots of components…you probably want screenshots of individual components.

I created routine-design so developers can capture screenshots of their React components. Routine-design is easy to install in your Node.js repository. Once you set up a Google Cloud project, you can capture screenshots of individual React components and store them on the cloud.

(This story is building off 4 Secrets to Comfortably Working With Screenshots. I basically automated the code parts.)

Google Cloud

Do not save screenshot images in a repository. Git does…


Photo by Daria Nepriakhina on Unsplash

Are you comfortable using screenshots in your development workflow?

If you’re working in a large React code base, with lots of components…you probably want screenshots of individual components.

We all want screenshots to help us code review HTML and CSS.

This blog post gives you a lightweight way to integrate screenshots into your React development. I’ll give you my secret recipe for good screenshot workflow. And I’ll teach you the secret to managing images in a repository.

Screenshot Workflow

There are two secrets to good screenshot workflow

  • Automation
  • Screenshot individual components

Automate taking screenshots, and you are more likely to use…


Photo by rawpixel on Unsplash

When you create a React component, you put HTML in the render method. How do you know that HTML will render the way you want it to render?

And what about the Sass file you bundled with the React component. Does it style the HTML in the way you intended?

I created routine-design so developers can check how browsers render their React components. Routine-design is easy to install in your Node.js repository. Once it is set up, it is easy to debug individual React components.

(This story is building off Three Techniques for Quickly Rendering a Component. …


Photo by NESA by Makers on Unsplash

Do you wish you could debug a React component in isolation? If you’re working in a large React code base, with lots of components…sometimes you want to debug/experiment/play with just one component.

We want component sandboxes because they make pull requests easier to finish. We want to confidently write React code, test that it works, and merge the pull request.

I propose creating a separate server (aka, not the one npm start starts), where you register component code to unique URLs. Each URL becomes it’s own sandbox. This server is backed by a minimal Webpack configuration. …

Lynn Jepsen

Software Engineer. MIT alum. Expert at JavaScript, CSS and HTML. On a mission to align code and design.

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store