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. …


I just feel like sharing my opinion about a somewhat trivial, minor thing in programming. I never really understood why so many projects have unit tests which are labeled as “Should do x” or “Should not be y”. The unit test performs a certain action, and has an assertion to test if the outcome matches your expectation.

Example class and method in Javascript:

class Foo {
bar(){
return "baz";
}
}
module.exports = Foo;

Javascript unit test with Jasmine syntax

let foo;
describe("Foo", function(){
beforeEach(function(){
foo = new Foo();
});
describe(".bar", function(){
beforeEach(function(){
result = foo.bar();
});
// I USE THIS
it("returns 'baz'", function(){
expect(result).toEqual("baz"); …


I’ve been creating a couple of boilerplate setups for frontend projects lately and while doing that I was digging into all the different stack setups, mainly focusing on the building and compiling phase. I’ve found some opinionated blogs which really favor one over the other, but then in the comments often a really heated discussion emerges discussing pros and cons. I think all tools have their purposes and I am grateful they exist. The decision on which one to use really depends on variables like the existing knowledge, the size of the project(s) and the size of the team/organisation.

When to use what, in my opinion? …


I’ve been working on the front-end of websites for a while, and I’m used to being a key person between UX and graphic designers, backend developers, business specialists and testers. While working at a small company I also got involved with sales people and direct users of our products or websites. This really helped to develop my “soft skills”, by that I mean I’m feeling comfortable and self assured at the meeting table, having discussions with the different parties involved.

I believe this is extremely important for all developers. Because we all should challenge our bosses, designers and other people that want us to build something they think they need. …

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