You’re reading an excerpt of my upcoming book on clean code, “Washing your code: write once, read seven times.” Preorder it on Leanpub or read a draft online.

Traditional loops, like for or while, are too low-level for common tasks. They are verbose and prone to off-by-one error. You have to manage the index variable yourself, and I always make typos with lenght. They don't have any particular semantic value except that you're doing some operation probably more than once.

Replacing loops with array methods

Modern languages have better ways to express iterative operations. JavaScript has may useful methods to transform and iterate over arrays…


A conference was held on April 24–26 in Helsinki, Finland. I was there with a workshop on design systems for React developers and a talk. Check out my notes on the last year.

The conference

React Finland is one of my favorite conferences. It was my second time and both times I felt good as a speaker. Talks were great: two days with big breaks to have enough time to talk to your friends. I liked the selection of talks: design systems, animation, architecture. The venue (a building with a tower on a photo above) was also good.

The talks

MobX — The Journey by Michel Weststrate

Slides, video.

  • If you…


Photo by lalo Hernandez on Unsplash

Developers and code reviewers have seemingly conflicting goals: developers want to ship their code fast, reviewers want high code quality. But in my opinion these are two sides of the same goal: keep development velocity high by shipping high quality and maintainable code. Reviewers want to help developers to ship less bugs to production and make code easier to understand so feature improvements can be done faster.

By following these recommendations you’ll be able to reduce number of code review iterations and ship code faster.

Before you start

Every team has its own standards and best practices. In good teams they are well…


Photo by Artem Sapegin on Unsplash

When Jest announced snapshot tests in 2016, I was very excited. It felt like a perfect solution for testing React component. Since then I’ve written fewer and fewer snapshot tests. In this article I’ll try to explain why.

I’ll talk mostly about testing React components, because that’s where I’ve used or have seen snapshots the most, but the same can be said about testing other things.

So, why snapshots are problematic?

Easy to commit snapshots with bugs

When you write expect(mycomponent).toMatchSnapshot(), Jest creates a snapshot file, like mytest.spec.js.snap, with all snapshots of your test file. You don’t see this file unless you really want to.

That’s…


Photo by Artem Sapegin on Unsplash

This is a short cheat sheet for developers migrating from React 15 to React 16, or from earlier 16.x versions to 16.6. It focuses on features you’ll use often.

Returning multiple elements from components with fragments

Splitting UI into small reusable components may lead to creation of unnecessary DOM elements, like when you need to return multiple elements from a component. React 16 has several options to avoid that:

// React 15: extra wrapper element
const Breakfast = () => (
<ul>
<li>Coffee</li>
<li>Croissant</li>
<li>Marmalade</li>
</ul>
);

// React 16.0: array (note that keys are required)
const Breakfast = ()…


Photo by Artem Sapegin on Unsplash

👋 Support Styleguidist on Open Collective 👋

I’m happy to announce a new major release of React Styleguidist.

Webpack 4 support

Webpack 3 is still supported too.

Node.js 6 is the lowest supported version

Styleguidist won’t work with Node.js 4 anymore.

Examples are wrapped in React.Fragment

You don’t need to wrap multiple JSX tags in a div anymore.

// 6.x
<div>
<Button primary>Primary button</Button>
<Button secondary>Secondary button</Button>
</div>


// 7.x
<Button primary>Primary button</Button>
<Button secondary>Secondary button</Button>


Photo by yours truly

I love the open source community, especially the React ecosystem. Most of the folks there are supernice and helping each other. But sometimes something goes wrong.

I value my time and even more I value my mental health. I want to continue contributing to open source and avoid burnout. I try to be nice and helpful to every user of my projects. But sometimes it’s hard.

Every time I see or feel that someone is complaining about my project or my actions, or any unhealthy behavior towards me or other users, I immediately lock the conversation, or even block the…


We use many tools, like linters, test runners and continuous integration, to make our life as developers easier. But maintaining configuration for these tools is far from easy, especially if you want up-to-date configs in all your projects. Mrm tries to solve this problem.

Slightly different files. Photo by yours truly.

What’s the problem

The only thing that many times was preventing me from extracting some generic function to a separate package is a need to copy and modify a dozen of config files — all that .somethingrcs — just to publish a 50-line function.


There are two problems with testing components that use React Intl with Enzyme and Jest:

  1. injectIntl higher-order component will break shallow rendering because it will render a wrapper component instead of your component.
  2. An intl prop will make snapshot testing useless because each snapshot will contain all your messages.

The solution is based on React Intl’s wiki:

  1. Add two new helper functions to your Jest setup file (setupFiles):
import { IntlProvider, intlShape } from "react-intl";

// Create IntlProvider to retrieve React Intl context
const intlProvider = new IntlProvider(
{
locale: "en",
messages: {…


Photo by yours truly on Unsplash

I used to think that a personal code style is a good thing for a programmer. It shows you are a mature developer who knows what good code should look like.

My college professors told me that they knew when some of my classmates used my code in their work because of the different code style. Now I think it was because my code was at least somehow formatted and everyone else’s was a mess.

Since then I’ve spent a lot of time arguing code style and configuring tools to enforce it. It’s time for a change.

A few examples

After reading the…

Artem Sapegin

Frontend developer, passionate photographer and owner of crazy dogs. Creator of React Styleguidist.

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