Basefactor Blog

December 4th 2019

Validating Forms with Formik + Fonk

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.

November 24th 2019

Hello Docker CI / CD - Travis

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.

November 19th 2019

Form validation with React Final Form + Fonk

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.

November 12th 2019

Functional Programming Introduction in JavaScript

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.

October 30th 2019

Hello Fonk: Rock-solid form validation

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

September 3rd 2019

Global state with React

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?

August 27th 2019

Hello Docker !!

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?

July 2nd 2019

JavaScript ES6 Intl not working properly when running Jest tests

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.

June 18th 2019

Using Visual Studio Code to debug Jest based unit tests

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.

May 28th 2019

Setting up Bitbucket pipelines in a Front End project

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.

May 9th 2019

React class components pitfalls

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.

February 3rd 2019

React how to display a loading indicator on fetch calls

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

February 3rd 2019

Configuring aliases in webpack + VS Code + Typescript + Jest

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

January 24th 2019

ES6, For loops? Forget it!

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

Doers/

Location/

C/ Pintor Martínez Cubells 5 Málaga (Spain)

General enquiries/

info@lemoncode.net

+34 693 84 24 54

Copyright 2018 Basefactor. All Rights Reserved.