One of the best practices for properly using snapshots is to commit them, so that others can code review the changes you’ve made to the expected output.

For this process to work smoothly your snapshots need to have a clean and highly readable output, that makes it really easy for others to see and identify the changes made.

I’ve previously touched on some best practices for doing this with react components.

But if you’re using snapshots to test something else than a react component there are also some improvements you can do to improve the readability of your snapshots.

You…

Snapshots are a great new way of testing UI components but their applicability can go beyond that, and they can be really useful in other contexts too.

In reality with Jest snapshots it’s possible to test and assert the output of any serializable value.

Let’s assume the following scenario: we have a list of todos (Array<Obj>) and somewhere in our app we want to be able to filter them by one of it’s attributes. Let’s write a function and some tests for it:

var ToDos = [ { 'Id': '1', 'Title': 'Shop groceries', 'Status': 'done' }, { 'Id': '2', 'Title'…

Snapshot testing with React makes writing tests for UI components a much easier task, but as always there are some good rules to follow and be aware of when getting started with snapshots.

Always commit your snapshots
Snapshots should always be committed to source control as it allows others to easily visualize what’s changed in the expected output and code review it.

Healthy code review process
A healthy code review process is fundamental so that changes can be peer reviewed and problems detected early.

Snapshots give code reviews a narrative. Tests show up first, offering a promise of what is…

Since version 14 Jest introduced a feature called snapshot testing. Snapshot testing is a way to assert the result of a given test by generating a Json representation of its output.

Snapshot Testing how does it work?

The first time your test is run, a Json representation of your expected output is saved to a file. The next time you run the same test, a diff runs between a new and the previously stored snapshot. If there are no differences the test passes, otherwise the test fails and the resulting diff is returned.

How to use it

Given a simple React component:

import React from 'react';const Button = (…

Envifying is a simple and often misunderstood tool to create custom builds based on a predefined variable.

How envifying works

Envifying is the process of replacing this:

if(node.process.env === "production")

Into this:

if("production" === "production")

This is done based on a predefined variable set on your build process, in this case we’re using node.process.env but we could be using any other custom variable.

So let’s say you want to conditionally load a module based on your environment config:

if (node.process.env === "production") {
    const test = require('./test.prod'); 
} else {
    const test = require('./test.dev');
}

Your build config would then set the environment…

Javascript as a language has been dormant for a few years, but from now on a new version of the language will be released every year. Javascript is now a constantly evolving language and transpilers are here to stay, to allow us to take advantage of these features today.

What is a Transpiler?
A transpiler is a tool that will read code and output equivalent code written in another language

ES2015

If you haven’t heard about this before, ES2015 is the name of the latest version of javascript, you may also have seen the term ES6 before but both refer to…

Many of todays performance concerns focus on getting assets to the user as fast as possible, page load time and time to first byte are often the most important and audited metrics, but runtime performance is many times forgotten and as important as these metrics.

It’s no good to have a optimized critical rendering path and a 1s time to first render, if then we provide an experience where scrolling feels slow and animations stutter, your website will still be perceived as slow and engagement will suffer.

Scrolling performance is crucial for content discovery, and fluid animations critical for a…

If we look at some of the latest data, that compares the mobile web, with native apps, we can see that the mobile web, clearly has a broader reach, but lacks by a much larger extent on engagement.

Why is this happening?

This seems to be an experience related problem, these days native apps seem to consistently provide better experiences than their web counterparts, with better performance, smoother animations, and fully integrated with the device OS.

Why are we failing to deliver the same level of experiences on the mobile web that native apps are able to provide?

I believe there are several factors…