The own your mistakes edition

Photo by Brett Jordan on Unsplash

In February 2020 I’ve published a story with this same title. In this story, I argued that it was hard to determine what to include and exclude in an npm package using the files field in the package.json and the .npmignore file.

The fact is that, at the time, I thought it was not possible to define exclude patterns in the files field, and offered an Adhoc solution: preprocess an extended syntax using some scripting before packing.

I was wrong. As a kind reader pointed in the comments: You most certainly can.

The optional files field is an array of…

Photo by Annie Spratt on Unsplash

First, I must apologize. This could have been a story about how and when to use comments in code, but it’s not. It’s about being a respectable human being.

Since we started this Medium publication, we have stuck to technical topics and shied away from giving strong opinions. We want this publication to be useful for both new and experienced developers, and we are not into endless debates that, for the most part, end up being a matter of taste and preferences. However, when the year is coming to an end we always write a piece where we reflect about…

Photo by Carli Jeen on Unsplash

We have been teaching React for several years now, both to our peers at Trabe and to employees of companies that hired our services. Since the introduction of Hooks we have adapted our courses for beginners. As of now we start by teaching Function Components, then we jump to Class Components, and lastly, we introduce Hooks.

In March 2019, I came upon a tweet that started a very interesting thread (I’ve wanted to write about this for months, never got the time. It’s still relevant, though 😌):

One particular answer, from Kent C. Dodds, a very well known figure…

Photo by pixpoetry on Unsplash

It’s possible that you still don’t know this:

The Promise returned from fetch() won’t reject on HTTP error status even if the response is an HTTP 404 or 500. Instead, it will resolve normally (with ok status set to false), and it will only reject on network failure or if anything prevented the request from completing. (Fetch API — MDN)

I find myself explaining this during PRs and training sessions more often than not, so I thought that I might as well write it down. …

Photo by Nick Fewings on Unsplash

Some days ago I wrote about using functions and composition instead of hoarding props to define flexible React components. I would like to dig deeper into this concept outside the scope of React.

In this story we’ll make a refactoring exercise to get to a conclusion: functions and composition can help us build flexible APIs that are easy to understand, maintain and extend.

The big function approach

Let’s start coding a synthetic example: a data fetching operation. It allows us to use options to configure how the data is fetched and the response handled:

  • Define which HTTP verb will be used.
  • Prefix a base…

Photo by Tim Mossholder on Unsplash

The other day I was refactoring some tests so I made a wrapper to access some mocked information with ease. This wrapper contained some getters and one of them retrieved a value asynchronously. Unfortunately, JavasScript syntax does not support asynchronous getters.

So. Is it not possible to have async getters? Well, it is. JavaScript lacks an async get syntax but you can rely on several workarounds.

Just return a promise

As you should know by now:

Async functions always return a promise. If the return value of an async function is not explicitly a promise, it will be implicitly wrapped in a promise.

Photo by iMattSmart on Unsplash

Authorization, frontend-wise, is just showing or hidding stuff. In React apps the usual way to handle authorization is having a component that conditionally renders its children based on some authorization condition (having a specific login or having some role, for example).

Props, props, props

Let’s assume that we have some sort of authentication mechanism and using a Hook we can get the current user: a simple object with all its authorization related information.

Using this Hook we can create a Visible component that receives a prop for each condition we want to check.

And we can use it in our code:

Photo by Silas Köhler on Unsplash

One of our customers gives us user-by-user access to their systems through a proprietary VPN that we cannot set up on our CI infrastructure.

When we need to deploy their Rails application we rely on mina scripts that connect to the deploy machines using SSH connections (over the VPN). To work properly mina needs you to exchange SSH keys with the server. These are legacy projects, so we use Docker to run our local development environment. So, how can we deploy using Docker?

One key to rule them all

One option would be to create a new shared deploy key for the project using ssh-keygen, exchange…

A story about the React lifecycle and side-effects

Photo by Christian Egli on Unsplash

The React docs say this about Portals:

Portals provide a first-class way to render children into a DOM node that exists outside the DOM hierarchy of the parent component.

This means that they are the tool to use when we need to render parts of our UI in a different layer. What makes them awesome it’s how portals behave:

Even though a portal can be anywhere in the DOM tree, it behaves like a normal React child in every other way. …

Photo by Mathew Schwartz on Unsplash

When you want to have real time updates on a web application, you can rely on old-fashioned periodic polling or try to use some push capable modern technology. Your first impulse may be using WebSockets. However, if you just want to receive data from the server you can use Server Sent Events.

Traditionally, a web page has to send a request to the server to receive new data; that is, the page requests data from the server. With server-sent events, it’s possible for a server to send new data to a web page at any time, by pushing messages to…

David Barral

Co-founder @Trabe. Developer drowning in a sea of pointless code.

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