Frontend

Push or Pull State with React Context (useContext, useState, useRef, useCallback)

tldr: this CodeSandbox demonstrates a way to fetch state via a context only when required, eliminating unnecessary renders. Overview The React Context API has made accessing state anywhere in the component tree (and writing clean code without prop drilling) easier than ever before. This article: examines a typical pattern for sharing state using the Context API, and discusses performance implications of the above pattern, and proposes a simple modification using the useRef and useCallback hooks to eliminates unnecessary renders.

Higher-Order Functional Components (HOCs) in React (with Typescript)

Higher-Order Components are “functions that take a component and return a new component”, and while they are not part of the React API, “they are a pattern that emerges from React’s compositional nature” (React docs). HOCs can be used to avoid repeated code in many scenarios such as: showing a loader, while waiting for data, conditionally rendering components, managing common user-interactions states, providing components with specific styles, and more generally, providing a component with any prop.

Browser debugging with bookmarklets

tl;dr Bookmarklet are browser bookmarks that, instead of linking to a web page, inject custom javascript into the current page. Here are a couple of bookmarklets I use regularly - to add them to your browser simply copy the minified code directly into the URL field for a new bookmark (remember to include the javascript: prefix). Track current mouse coordinates Use the below script to display the current mouse coordinates in the current tab title:

Human-readable time intervals in Python

Expressing time intervals in a format that is readable by humans is an old problem that every frontend developer will eventually face. While there are plenty of solutions available (this one is my favourite), I required a function that could provide different levels of granularity in it’s “human-readable” description of time. Take, for example, a component that tells the user how long in aggregate they have been using a service. If they have been using it for a few hours, it would be appropriate to display ## hours, ## minutes, ignoring the seconds and milliseconds.

Event review: BrisJs - Introducing the typescript compiler; Atomic design; Scrutinising the norm

I attended the first BrisJS meetup of the year last night. This was my first time attending a “programming language-centric” meetup, and I was surprised to find around 100 people in attendance. All presenters and the majority of the crowd looked to be in their 20’s, and while the presentations didn’t have the level of polish that I would usually expect for an event of this size, I was still able to learn a few things, and more importantly, have some interesting conversations with other developers about projects they are working on and opportunities in the market.