A monorepo can be described as a repository that contains more than one logical project. These projects can be unrelated, loosely coupled or connected by dependency management tools, they are usually large in size, number of branches, commits and working developers.

React applications are all about components, when developing react apps you’ll be splitting it into components that aim to be reused within different areas of your application or multiple applications.

Sharing code across multiple repositories

Once you start feeling the need to share code across multiple applications you may choose to start creating different repositories and publishing them as npm packages. …


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 can adjust and format the output of a snapshot to make it more readable by using snapshot serializers (note that snapshot serializers are available in Jest 19+). …


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:


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 coming up in the changeset. Next is the snapshots, proof that what the tests promise is true. Finally, the changes to the codebase show up. By the time you’ve hit the changeset, you’re primed both by what has changed internally, and by what will be seen externally by users.


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.

Image for post
Image for post
Snapshot testing flow

How to use it

Given a simple React component:

const Button = ( props ) => (
<button className="button"
aria-pressed={ props.pressed}>
{ props.text …


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:

Into this:

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:

Your build config would then set the environment variable based on your preferences. In this case let’s set production as the value of node.process.env


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 the same version of javascript that was released on June 17 2015. …


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 smooth experience and a good perception of speed. …


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.

Image for post
Image for post
Total time spent across desktop, mobile apps and mobile browser by Comscore

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 at play: for starters browser vendors have some guilt here, inconsistent browser support and late adoption of API’s don’t make life easy for developers. …


The modern web is evolving at a crazy fast pace, new technologies are coming up all the time, new devices are being released constantly. Companies and developers need to follow the pace and be able to move fast, iterate, adapt and evolve.

Frontend Development is a discipline that moves particularly fast, where new frameworks and tools emerge constantly so fast adaptation is essential for survival.

“It is not the strongest of the species that survives, nor the most intelligent that survives. It is the one that is most adaptable to change.”

Charles Darwin

Why components?

By dividing your code in small reusable chunks, you’re reducing complexity, by narrowing your focus into small bits at a time, you’re improving reusability, so that you don’t have to reinvent the wheel every time you want to reuse something, that you or someone else has already done. …

About

Luis Vieira

A frontend developer that can handle its dose of UX 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