How to Write a Custom Babel Plugin 👵📚

I wrote a custom Babel plugin that lets you write React with emoji. It was not a productive use of time.

A preview of the `grandmas-own-jsx` babel plugin

How To Write a Babel Plugin

In this post I’m going to walk you through how to make a Babel plugin, so you can make your own custom one, like grandmas-own-jsx.

I suppose you could also make a plugin that’s actually useful. I mean — I can’t physically stop you.

Before we add anything to Babel, we first need to understand it a bit. …


The Art of Getting Things Done with Deadlines

Someone writing a checklist of goals
Someone writing a checklist of goals

There are few philosophers today who have a truly profound grasp of the universe. Individuals with such inherent wisdom, that to ignore their advice is an exercise in folly.

So, when I heard the Aristotle of the 21st century say these words:

“This is a new year. A new beginning. And things will change.”
— Taylor Swift

I listened.

While consulting scholars on the many interpretations of Swift’s words, I was surprised to find a large number of people angry about the mere existence of New Year’s resolutions.

You may be surprised to hear that anyone on the internet could…


When used correctly, animations can greatly improve the user experience. But animating on a page transition which is handled by React Router can be a huge pain — one that we’ve recently had to deal with at Onfido.

This post is further to a talk I gave at JS Monthly, but I’ll go into a bit more technical detail here.

The end result we’re going for is something like this:

Demo for animated React Router code

The Challenge

First of all, let’s explore why using React Router makes animating inherently hard.

React Router is designed to immediately update the view-tree according to…


Interactive Mario Kart with Only CSS

People say JavaScript is a bad language. No built-in types, a fatiguing ecosystem, and demanding you to constantly explain, “no, no, JavaScript” to anyone even vaguely non-technical.

That’s why for my new Mario Kart knock-off game, I’ve logically decided against using JavaScript at all. To be clear, this is 100% CSS. My Photoshop licence ran out a while back, so this is:

  • 0 images
  • 0 lines of JavaScript
  • Just 100% CSS
  • (okay fine, and 13 lines of HTML)

You can control the racer using WASD controls. So how does it work? Let’s break it down.

Racers

A cool thing that…


Seven 3 second changes to reduce build time by 77%

It’s only so often you can wait 5 whole seconds for your build to apply your color: blue; to color: red; change…

At Onfido, we use webpack as our module bundler. As is always the case given the speed of development, our webpack config grew organically, and the speed of the pipeline was an after-thought.


Measure the speed of your webpack loaders and plugins

Measuring may not be the sexiest part of going fast, but it’s an important one. That’s why I’m excited to announce the Speed Measure Plugin for webpack, that I’ve been working on. Super easy to use, and compatible with all loaders and plugins by default — it’s available to use now, from GitHub and npm.

Speed Measure Plugin

Just changing your webpack config from{ plugins: [new XPlugin()] } to smp.wrap({ plugins: [new XPlugin()] }) — gives you console output like this:


This post is about how we at Onfido recently chipped out a React SPA from a Rails/Ember monolith, with no feature/code-freeze.

Most companies have monoliths that they regret. We all know the pattern: code is added to one repo at crunch-time because it’s easier. Splitting out a separate pipeline would take longer, so we resolve to clean things up later… More features are added, and the clean-up is pushed back until we have a little more time… Until one day, we finally look up to see the monolith we’ve created, only to notice it’s now beginning to blot the sun…

Stephen Cook

Software engineer at @Thread. Saving up to fulfil true dream of professional Mario Kart… https://stephencook.dev/

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