A helper function to streamline lazy loading components in React. The function returns an anonymous React component that prepares and resolves the import. When the import is in flight; a fallback is displayed until the import has finished loading. This is a simple way to introduce intentional code splitting to…

(This is revision to post I wrote some months ago for an earlier version of UI-Router. The concepts are the same; just updated to reflect some minor changes in how UI-Router should be implemented.) React is very selective about what ships with its core. This results in a leaner library…

Chrome’s security policy will only allow you to access your device’s microphone/camera when a site’s has a secure origin. See here for a detailed explanation about what a secure (and unsecure) origin is. In summary; you need to host your site on https or called localhost (for when in development). …

Double clicks can be a real pain point in UI development. Clicking buttons too many times (or before an action has had time to finish) can have a variety of buggy consequences. …

(I have since written a revision for this post for a newer version of UI-Router. The concepts are the same; just updated to reflect some minor changes in how UI-Router should be implemented. This can be found here.) React has a key advantage over other frameworks. It’s very selective about…

When starting a new React project its easy to imagine not using anything from the window object; it feels old-timey and makes your code looks terrible. The thing is though, so many SDKs and third party libraries still (and will always) utilise it. …

Promises are a common part of JavaScript development these days. One of the things I find a bit frustrating is detecting whether something is a Promise or another type of built in object . When using a promise it will usually have a callback and a catch chained on the…

When testing React components you want to be very specific about what’s being tested, keeping everything lightweight. Loads of configuration in a test is usually a sign something is not right with your approach to the test (or the component). You should always be looking to use shallow rendering. This…

Over the past year at Gecko we’ve added several new members to the team. As a result, one thing in particular became apparent. Our approach to planning was not sustainable. (This is a story for another time.) An obvious area of concern for us was where the work was spec’d…