Dependency injection and component injection for testing purposes is not a new topic. Indeed, the ability to provide a custom implementation of a component/hook while testing or writing storybooks and examples it is extremely valuable. react-magnetic-di enables it without the downsides of prop based solutions.

The dependencies problem

While coding complex components that are the result of the integration of several other units, it is quite important to be able to reduce and simplify their internals so that tests can focus on the details that matter.

Such statement is even more important given the direction that React is taking: components for both UI…

For the past months I’ve been part of the team responsible to transform Atlassian’s Jira into a modern SPA. We took this opportunity to experiment with new concepts, especially around state management.

Our first macro component to be built was the navigation app. A navigation app poses quite a few challenges, because of the way other apps have to interact with it. We were not much concerned about data fetching, which would eventually be solved by React Apollo, but more focused on how we could share generic data (like UI state) and trigger cross-app actions.

Why current solutions didn’t taste good enough

We evaluated and implemented several…

One of the new patterns getting popular across the React community is the render props pattern and Unstated is an experiment of using that pattern to manage state across your app. An interesting approach that exposes some of the render props challenges.

First of all, this is not a critique Jamie’s inspiring work. I think his approaches are an excellent way of pushing forward the discussion around state management in React.

Using Unstated for data fetching

Most of the React developers are used to Redux (or a similar “store provider”) to handle state in a React app, but other solutions like Apollo are trying to…

Recently, while surfing on my laptop, I noticed the fan suddenly starting making a lot of noise and, to my surprise, I saw in “Activity Monitor” that 3 Safari processes from 2 domains were loading 100% of my CPU units each! Upon inspection, those web pages were still fully interactive so I started digging further in order to understand what was going on “under the hood”.

Opening the browser console and forcing the JavaScript debugger to pause the JavaScript execution brought me to an obfuscated script that quickly turned out to be a coin mining script.

TL;DR: provide the service endpoint dynamically, so it can be changed to localhost and return fixtures during testing. Bonus: use node-replay to automatically record requests/responses.

Most articles about UI integration/E2E tests assume that you are in control of the API service, so you can customise its setup and teardown to be in “test mode”, or that the service itself provides test account/env, so you don’t need to worry about messing around with data. However that is not always the case. Recently, I had to find a way to write UI integration tests for a React frontend that was talking directly…

Did you know that you can use the key prop to force reset a component state? Most of the times you want to prevent that, but sometimes it is particularly helpful and helps keeping your code clean.

What is the key prop?

React key prop is a special prop that can be added to any component in order to explicitly tell React its identity. The common scenario where a component requires a key prop is within a list: React needs it in order to understand which items have been added, removed or, more generically, modified. This allows for advance DOM manipulations, preventing nodes from being…

HTML canvas interface implements a series of security related features that prevent cross domain manipulation unless explicitly allowed by the origin domain.

What does that mean in practice? In order to be able to read the pixels data of an image on a different domain, the hosting server must first declare the appropriate Access-Control-Allow-Origin header. Once done, the consumer will be able to load the image into a canvas:

var img = new Image(),
    canvas = document.createElement("canvas"),
    ctx = canvas.getContext("2d"),
    src = "http://example.com/image.jpg";img.onload = function() {
    canvas.width = img.width;
    canvas.height = img.height;
    ctx.drawImage(img, 0, 0);
}
img.src = src;

…

Let me begin by saying that unless you have really specific needs, textarea is what you should use to get plain text input. The reason why I had to use contenteditable is because I need the box to be content aware and adapt its size dynamically (both width and height).

Getting content changed notifications

Assuming you have no other choice but using a contentEditable div as a textarea, your first problem is how to listen to user interactions. On modern browsers there is a unified event that you can subscribe to in order to get content changes: input. It will fire every time content…