Image for post
Image for post
Command Line Interface output of (snapshot) unit tests with Jest of React components. Viewed with VS Code.

In the past couple of years I’ve been working with mainly React. I embrace unit tests for all my components, but based on the type of component and how complex the rendering is, there are different ways of asserting output. So I’ve split up my unit test approach for these well-known categories:

  • Presentational Components: Also known as “dumb” components. They are not concerned with business logic and rarely have their own state.
  • Container Components: Also known as “smart” components. They contain business logic, might maintain state of their own, and orchestrate presentation components.

Let’s start with the building blocks of most React applications, the so-called Presentational…


Image for post
Image for post
Example of a response of my bot in case Bitcoin value has gone up. It displays the current market value, the change since the start of the day, and it attaches a chart of the trend of the last two months.

A lot of coworkers of mine have invested in Bitcoin, Ethereum and other blockchain currencies and are always bragging about the money they have gained on their investments. Since we use mainly Slack for communication, I thought it would be funny to create a simple Slack App that would trigger on the word “bitcoin” and would then fetch the development of the average market value, and respond with (silly) advice for either dumping or buying bitcoins.

Recently I’ve picked up on Stdlib, a cloud service that allows you to write simple Node (javascript) functions that are deployed on an endpoint. When you call that endpoint, the function is executed. Sounds simple? It is! This means that you don’t need to bother yourself to setup listeners with Express or Restify, and figure out what (Node) hosting provider you need, but you can just simply start coding right away! Of course when you need to do a lot of data persistence or maintain server state, this solution is not recommended. But for microservices and simple processes (think of functional programming), this is a really good way to get something up and running in a matter of hours. …


Image for post
Image for post
The famous Babelfish from Douglas Adams: The Hitchhikers Guide To The Galaxy.

With plenty of international web projects under my belt, I’ve encountered different implementations of “Internationalisation” (referred to as i18n). This can be a tedious part of your application if you don’t do it right. Missing translations, keys without context, or even English translations in the French translation file are just a couple of examples. There are some rules of thumb which I use that greatly help to reduce these mistakes and can give you a common ground with designers, translators and developers to get a smooth multilingual experience of your app.

Don’t use a language as a translation source. Use translation keys.

There are many libraries that offer you the option to use a language (often English) as the source language, and you can start translating from there. The advantage you get is that you don’t have to translate “to” English so it saves you time. However, now you have semantic keys. So if someone doesn’t know the application that well, they might (and will) translate it completely wrong based on the lack of context. Simple strings like Next or Continue can occur at many places in the application, but might have very different meaning depending on their position. The literal translation to French, Spanish or other languages might be very inappropriate. …

About

Justus Romijn

I’m a frontend developer at Frontmen, a company that focuses on frontend only. Beside my work I also enjoy tennis & table tennis, music, movies and games!

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