In this first post we will cover basic concepts, taking the implementation of the gateway Stripe as a reference point. In our next articles we'll give examples of real intergrations.

In this post we will use Github Actions to automatically trigger the following processes on every merge to master or pull request:

• Fire up a clean linux + nodejs instance.
• Download the repository source code.
• Install the project dependencies.
• Execute the associated unit tests.
• Generate a docker image including the production build.
• Tag it and Publish it into the Docker Hub registry.

We will configure this for both a Front End project and a Back End project.

Managing Form State (holding field information, check if a control has been touched, if the user has clicked the submit button, who owns the current focus…) can be tedious and prone to errors. We can get help from Formik to handle these challenges for us.

Form validation can get complex (synchronous validations, asynchronous validations, record validations, field validations, internationalization, schemas definitions…). To cope with these challenges we will leverage this into Fonk and Fonk Formik adaptor for a Forkmik seamless integration.

In this post we will use Travis to automatically trigger the following processes on every merge to master or pull request:

Fire up a clean linux + nodejs instance. Download the repository source code. Install the project dependencies. Execute the associated unit tests. Generate a docker image including the production build. Tag it and Publish it into the Docker Hub registry.

We will configure this for both a Front End project and a Back End project.

Managing a Form can be darn simple. Just let the user fill in some fields, submit it to the server and if there are any errors notify them and let the user start over again. Is that a good approach? The answer is no, you don't want users to get frustrated waiting for a server round trip to get some form validation result.

I'm sure you've heard or read about this programming paradigm. In this post you will learn what functional programming is and see some examples that will make you think about how you code and maybe even encourage you to apply it in some project.

Validating a Form can become a cumbersome task, we have created Fonk a library that allows you to isolate and reuse form validations

With the release of context API in React 16.3 and especially hooks in React 16.8, a new world of possibilites suddenly arose. As we discovered the cleanliness and simplicity of hooks, Redux started to feel like overly complex and verbose with all those containers, reducers, action creators and so on. The question didn't take too long; if new React context was designed to feed a whole component tree with data, wouldn't it be possible to redefine the global state pattern by using native context plus hooks?

Docker has left behind its "buzzword" time. By now it has been deeply incorporated by the industry due to its simplicity for packaging applications and later running applications, especially in distributed systems. In the cloud, Docker avoids having to install tons of dependencies, which makes it really easy to upgrade production systems and their maintenance.

If (almost) everyone is running their applications using containers, especially Docker, I bet you want to learn it, too, right?

ES6 ships a namespace to handle internationalization, but if we create tests that use that namespace and run them using Jest likely will fail.

Jest tests don’t run on top of the browser; they run under Node.js, which doesn’t ship the full internationalization support by default.

Jest has become the de facto standard for building unit tests. Writing tests in JavaScript / TypeScript is fine, but old hands coming from the .net/java/karma approaches will soon start to miss something... How on God's green earth can I debug this? The answer is using Visual Studio Code !! You can just place breakpoints, choose whether or not to make a single run, enable watch mode, or even only execute the tests of the current opened file.

Bitbucket pipelines allows us to easily set up a continuous integration environment. In this post we will check how to set up all this configuration starting from scratch, going step by step, and follwing a cost wise approach.

Some months ago class components were cool, since the arrival of React Hooks not anymore, Why are class components not a great thing anymore? In this post we are going to enumerate the main paint points when working with class components.

When you are developing your web application, you have to perform asynchronous operations, e.g. perform a fetch/ajax call to obtain data from the server. Sometimes you need to do silent background operations, whereas in other cases you need to block the user interface or notify them that something is going on.

A typical way of handling this, is using a boolean flag to show/hide the spinner...

This post is based on this excellent Gist created by Carlos Hidalgo.

When we use imports one of the most of the things that hurts is working with relative paths. Can you show me an example? Let's imagine we are working with the following folder structure...

Working with arrays, we usually fill in our code with loops, cases such as...

“Check that an element is in array...”

“Calculate total sales, if it's more than a given amount then offer free shipping costs...”

“Get annual sales average...”