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…

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…

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…

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! …

How to run integration tests of frontend code when you have no control over the API service (and the service has no test environment)? — 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…

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…

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…

It is no news that HTML contenteditable is a mess, however it is challenging even getting a plain text value of the user input. — 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).

Required workaround to properly distribute a library built with Typescript, Babel and Webpack. — As my latest project is a standalone library, I decided to give Typescript a go in order to increase consistency and documentation. After spending some time in order to get the Typescript compiler building my files, I realised that I was missing the great Babel plugin ecosystem. So, I decided…