If having a monorepo wasn’t complicated enough, trying to share code between multiple packages inside the monorepo usually becomes a battle that ends on “let’s just duplicate the code”. Workspaces —introduced into npm starting from version 7— let us solve this without manually running npm link. A common setup is…

Consuming diverse types of APIs, services, databases, other servers, etc. makes it complicated to handle responses and errors in a scalable way across your server because each consumable can have their own signatures, response, and error structures. TL; DR You can skip everything and jump into this codesandbox that I appended at…

Most of the JavaScript examples of the Decorator Pattern out there are either too complex or disappointingly simple. Almost everything is an object in JavaScript, so decorating —in general— is not a challenging task, but it is hard to make it scalable. TL; DR Look at this codesandbox implementation of the decorator…

Sometimes we want to re-try an action multiple times before throwing an error or giving an action item to the user. For example, with an infinite scroll loading items for a chat or a news feed. In a few words; we want to find a scalable solution to code that…

When working with the React context API, you might have noticed that it is difficult to have state updates without re-rendering every single component that is listening to the context. To fix this, we want to expose functions (methods/getters) only, so that the value of the context never changes. …

A remarkably simple polling function can be implemented with React hooks. There are two main differences between a usePollingEffect and a useInterval custom hook. First, the polling effect must execute as soon as it is called (contrary to an interval which would trigger the first call only after the specified…

Using media queries in JavaScript is relatively simple now if you use libraries like @emotion/react. Emotion is a performant and flexible CSS-in-JS library that allows you to style apps quickly with string or object styles. import { css } from '@emotion/react' const smallAndBigger = '@media only screen and (min-width: 300px)' …

It is considered a bad practice to listen to the resize event with JavaScript because it can lead to many UX issues, and it doesn’t consider more complex scenarios. Now with the window.matchMedia API we can safely use media queries just like in CSS. This is useful when in React…

This is my personal “uncommon but very useful git commands” cheat sheet. I use the command line constantly and I prefer not to use aliases unless I must. But what is “uncommon”? Well, anything that I don’t use that often and thus tends to be forgotten. git stash | by name Stash changes using a…