So, you got an API and you want to use it in the frontend. How do you process the response data? Are we good to go with a JSON.parse after fetch?

I have seen many frontend projects just use whatever the API returns directly without further processing, and I would…

Great, so we both on the same page in regard to the principle of components' responsibility boundary.

Now it might be your turn to explain more about why we *have to* do it with pure CSS (and with margin)? Does it sound very dogmatic? …

A better way of handling spacing between components in React

When coding for UI layout, we need something to represent the spacing between elements, and yes, we have been using margin for a long time.

However, when using a component-based framework such as React, we may need to rethink if margin is still the best choice.

Here are my thoughts:

The problem of margin

In React Testing Library, there is no global configuration to change default timeout of waitFor, but we can easily wrap this function to provide our own default values.

That is, we can create a waitFor.ts file under test-utils folder as shown below:

In this file, we import the original…

What Early Returns/Guard Clauses are, why you should use them, and examples of how to use in React

Agenda

In this article, we will go through the following sections:

  • The basic concept of Early Return
  • The reasons for using Early Return
  • Using Early Return with React
  • Using Early Return with Hooks

Now, let’s get started.

What is Early Return?

Early Return is a pattern that suggests us to avoid nested if-else statements by…

Github Repo: https://github.com/zzdjk6/simple-abortable-promise

Image source: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Promise

Short Story

Truth: a Promise can’t be aborted or canceled. It can only be fulfilled or rejected.

Trick: But we can reject a Promise early if we want :)

Long Story

Let’s face it, we all have the needs to abort or cancel the Promise sometimes. For example, in a single-page…

A real use case of redux-thunk-routine

When dispatching async actions with redux-thunk, we usually have three actions for each thunk: REQUEST, SUCCESS and FAILURE. Imagine we have a thunk to fetch data, we would dispatch FETCH_DATA_REQUEST before we send the API request, then dispatch FETCH_DATA_SUCCESS when the request succeeds or dispatch FETCH_DATA_FAILURE when the request fails.

Send/Proxy Network Requests With Native Code In An Asynchronous Manner Using Promise

Background

I was facing the CORS problem while building a web-based iOS app using WKWebView. …

TLDR;

npm install redux-thunk-routine

Motivation

redux-thunk gives us the ability to create asynchronous actions, but do you feel that you are writing boilerplate code again and again?

Do you feel things are getting even worse when you trying to add static typing?

Inspired by redux-saga-routines which is a library for redux-saga, we…

The original idea is from this blog, but I prefer a more clear and simpler way to describe and implement this feature, so there is a blog post here :)

At the very beginning, let’s review how we utilize GraphQL over HTTP(s) protocol in its essential:

  • We have a /graphql

Thor Chen

Passionate JS/TS Developer with a Fullstack Background

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