How to add preloading to your route based code split apps

Image for post
Image for post
Photo by Javier Allegue Barros on Unsplash

Click here for an improved and more accessible version of this article

Ever since I first got to use React Loadable and React Lazy and Suspense, I’ve been a big advocate of route base code splitting for big applications. They allow the client to only load the chunks of the apps they are actually accessing instead of having to download the whole app before rendering something on the screen. It works so well that this pattern is even featured on the official documentation of the React Library. However, I’m always looking for tips and tricks on how I could make the end-user experience even better and that’s why recently I’ve been trying to address the problem of how to preload chunks in a route base code split React app to make navigation between chunks more seamless. I’ve seen this behavior on some Gatsby sites and I really liked how discrete and efficient it is. …


Hi everyone,
Hope you’re all having a wonderful week! I’m writing you this little newsletter just to let you know that I started migrating off medium to https://blog.maximeheckel.com

What does this mean?
I started building my own personal blog, without any paywall or ads and with (I hope) a better reading experience for you all, especially on mobile. I also want to try more things in terms of writing, and having full control over the layout and the appearance is essential.

All my articles will be available for free on this blog, I’ll add the corresponding links to the medium posts that landed behind a paywall without me noticing.

If you’re a medium fan, don’t you worry! I’ll keep posting on medium in the future, and articles will be released publically at the same time.

Thank you for your support!


Make sure your UI projects follow accessibility standards before deploying to production

Image for post
Image for post
Photo by Philipp Deus on Unsplash

A more accessible, readable, mobile-friendly and up to date version of this story is available on my personal blog!

While writing tests (unit, integration or end to end) is core to my day to day workflow before pushing anything to production, I’ve often forgotten to bring my focus to whether or not what I was building was accessible to everyone. Accessibility or a11y (accessibility has 11 letters between the first and last letter) is nonetheless an essential part of every product development and should get as much if not even more attention than testing.
Skipping this was a mistake on my end, so I started looking to see if there were any ways I could integrate accessibility tests into my testing pipeline. The aim was similar to writing tests, although here there would be an additional acceptance item, which would be that a given feature or view would have to be compliant with a set of rules. …


From REST calls to powerful queries

Image for post
Image for post
Photo by Ishan @seefromthesky on Unsplash

A more accessible, readable, mobile-friendly and up to date version of this story is available on my personal blog!

Note: the content of this post and the code featured in it have been produced on my own personal time and does not reflect my current work being done at Docker.

For the past 6 years, I have been working with the Docker API almost on a daily basis, whether it’s been in the context of personal projects, or when building products at Docker. However, since I started building UIs for container management software, I’ve always struggled with how to know how the different Docker objects are related. This made building comprehensive and easy to use user interfaces challenging, especially because in order to get all the related resources orbiting around a service or a container, for example, we always ended up doing quite a few REST API calls, manipulating filters, and “over fetching” to get the data we were interested in displaying. …


Image for post
Image for post
Photo by Alex Knight on Unsplash

Stuck by the paywall? This story is available for free on my personal blog!

Since the release of macOS Mojave, a lot of people have expressed their love for dark mode and a lot of websites like Twitter, Reddit or Youtube have followed this trend. Why you may ask? I think the following quote from this Reddit post summarizes it pretty well:

Night is dark. Screen is bright. Eyes hurt.
Night is dark. Screen is dark. Eyes not hurt.

As I want to see even more websites have this feature, I started experimenting with an easy a non-intrusive way to add a dark mode to my React projects, and this is what this article is about.
In this post, I’m going to share with you how I built dark mode support for a sample React app with Emotion themes. We’ll use a combination of contexts, hooks, and themes to build this feature and the resulting implementation should not cause any fundamental changes to the app. …


A step by step guide to get Typescript, tslint and Prettier working on any existing Gatsby project.

Image for post
Image for post

A more accessible, readable, mobile-friendly and up to date version of this story is available on my personal blog!

After working on my personal portfolio with Gatsby, I took some time to transition my project to Typescript. It was the perfect opportunity to learn how to use it as I have never worked with it in the past.
Learning about how to write Typescript types and how to use it wasn’t much of a problem as I’m used to working with Flow. However, it was the whole set up of tslint, remembering to install type definitions and simply writing custom type definitions that were new to me and not as easy as I would have expected. …


A simple global state management package based on React constructs

Image for post
Image for post
Redux logo

A more accessible, readable, mobile-friendly and up to date version of this story is available on my personal blog!

There’s been a lot of hype recently about React Hooks and what they allow developers to achieve. Indeed, in the near future, we will be able to rely on a single React pattern to build pretty much anything we want. As of today, React consist of a lot of patterns, if not too many for some people: Stateful Classes, Functional components, Higher Order Components and render callbacks to mention just a few.
The React core team expressed several months ago their desire to slowly phase out React Classes. …


How the new React Suspense API might reshape the way we build components

A more accessible, readable, mobile-friendly and up to date version of this story is available on my personal blog!

Since I’ve started playing with React a couple of years ago, I’ve always been a big fan of functional components. Their simplicity and conciseness make them easy to read and test. The problem though was that, until now, there was no way to do asynchronous calls which is the crucial part of most applications in the real world, so classes were always the way to go.
However, starting from React 16.6.0 and the new Suspense API, this is not an issue anymore, functional components can now perform asynchronous calls and render data that comes from them. …


A more accessible, readable, mobile-friendly and up to date version of this story is available on my personal blog!

This post is part of an informal series of small articles focusing on Flow types usages that I’ve discovered and found useful over the past few months. The first article of this series can be found here.

Building generic React components can be a great way to simplify the codebase of a project. By combining overlapping functionalities into a single component, we reduce the entropy of components and thus reduce the amount of testing needed. However, typing generic React components can be a bit of hassle at first, especially when you‘re just getting started with Flow. …


A more accessible, readable, mobile-friendly and up to date version of this story is available on my personal blog!

This post is part of an informal series of small articles focusing on Flow types usages that I’ve discovered and found useful over the past few months.

For the past year, I’ve been using Flow as my static type checker on many of my projects whether they were personal or work-related. In the beginning, I was mainly using it as a replacement to React propTypes as they were difficult to enforce during dev and testing phases which resulted in misusages of some components way too many times.
However, while refactoring an entire codebase by adding proper Flow types, I realized that loosely typed components or functions were both harder to use and caused unwanted changes. That’s why I tried to look a bit more at how I could type them better. One of the main areas that I decided to focus on first was improving the static typing of some styled components. …

About

Maxime Heckel

Software engineer and space enthusiast. Currently working for @docker.

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store