React provides a nice API to share state globally and across components, the Context API, but while working at scale in Jira, we discovered how it can easily become a developer’s nightmare if not properly guarded.
Letʼs imagine we want to create a dropdown that renders a list of categories: we may use GraphQL via React-Apollo, but assuming we cannot yet, we create something with a similar API in the meantime, easy replaceable in the future. We start our first iteration by just using local state:
class CategoriesQuery extends Component {
state = { data: null, loading: false, error: null…
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.
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.
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.
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.
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).
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…
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 to enhance my dev experience and my build process. I added Webpack, Babel and I’ve made all three of them working together thanks to the awesome awesome-typescript-loader. Next was about time to test the build.
There are several options when you want to distribute your library as a bundle ready…
Being a Frontend Developer is learning something new every day