I've read that something about being on planes makes people cry. I can't remember if it's psychological or physiological, but I've experienced this myself when I moved from the UK to Australia, and again when I moved back.

When I'm not too busy crying, I always get ideas for programming when I'm travelling. I think there's something great about having no internet connection (or even a bad internet connection); being cut off from your responsibilities seems to let creativity happen. It's great.

So I pull my laptop out of my bag and open up VSCode, then I immediately run into a hurdle: I need dependencies, and I can't have them.

Do I need dependencies to be creative?

No, but I think I'm about 20 times more productive if I get to use React or Vue or something. I don't think this is bad or even unusual in 2022 - it's just really useful to be able to map application state onto UI without dealing with the DOM myself (especially if I have no internet and I can't pull up MDN docs).

The other thing is ES6: according to CanIUse.com, browser support for ES6 is up to 96% these days! Definitely good enough for anything I'm doing on a plane, but if I'm using React I want JSX, and browsers don't speak JSX. Maybe I could start writing components without JSX, but it's a lot of typing:
React.createElement('div', { className: 'hero' }, 'Hello, World!').

So while we technically can manage without React and Babel, everything takes longer and involves more typing, and it can be hard to type when you're crammed into the middle of 3 seats and you're not feeling assertive enough to claim the armrests.

How do we solve this?

The solution here is to build an offline mirror with some commonly used NPM packages that we can use while we're on a plane and don't have internet. We'll do this into 2 parts: Part 1 where we have an internet connection and we set up our offline mirror to use later, and Part 2 where we use our offline mirror to build a simple react application.

Part 1 - While you have internet

Yarn has the ability to install project dependencies from an offline mirror instead of fetching them from NPM.

First let's tell yarn (globally) where to put our mirror:
yarn config set yarn-offline-mirror ~/offline-yarn-mirror

Now let's make a new project with yarn, which we'll just use to populate our mirror:
cd ~/projects; mkdir add-stuff-to-mirror; cd add-stuff-to-mirror; yarn init;

Finally let's install some stuff:
yarn add parcel react react-dom

Once that's finished we can ls our offline-mirror directory and see what's there:

chris@chris kanban % ls $(yarn config get yarn-offline-mirror)
total 43312
-rw-r--r--  1 chris  staff    37K 28 Aug 11:26 @lezer-common-0.15.12.tgz
-rw-r--r--  1 chris  staff    34K 28 Aug 11:26 @lezer-lr-0.15.8.tgz
-rw-r--r--  1 chris  staff   5.3K 28 Aug 11:26 @mischnic-json-sourcemap-0.1.0.tgz\
...

Part 2 - After Takeoff

Now that we've set up our offline mirror, we can use it by telling yarn to install things with the --offline flag.

First let's set up a fresh project and initialise yarn:
cd ~/projects; mkdir use-the-mirror; cd use-the-mirror; yarn init;

Next, disable your internet connection (no cheating!) and add the same dependencies as before, but remembering to use the offline mirror:
yarn add --offline parcel react react-dom

On my M1, this installs everything in about 2 seconds, which is just awesome.

Conclusion

In Neal Stephenson's Snow Crash, there's a chapter where the protagonist (who happens to be called Hiro Protagonist) is on a boat with the Mafia, preparing to assault a floating island made of hundreds of boats to rescue a hostage and save the world from a neuro-linguistic mind-virus... maybe trying to summarise the plot here was a bad idea.

The point is, Hiro spends much of his time on the boat doing various bits of heroic programming in preparation for the task ahead, and I always loved that. Neal Stephenson has this great way of making his characters "save the day" by doing software engineering, often in situations where they get by on the strength of their fundamentals and their ability to be productive without an internet connection.

These days I'm mostly doing web development, so in theory it should be unusual or pointless for me to work without an internet connection. But it does happen sometimes, and I always feel like a bit of a sham if I can't be productive without NPM, MDN documentation and Stack Overflow. It's great to stand on the shoulders of giants, but sometimes you just want to build something small before you get back on the ground.