Me when I found out how tree shaking really works

I’m willing to bet you have a lot of “dead” code in your webpack bundles. I used to think unused code was magically excluded by webpack but it turned out I was wrong. Oh the woe for slow websites around the world. Here is how it all started…

The Discovery

I put a website into Page Speed Insights today and one of the opportunities to make my site faster was to reduce unused Javascript. It appeared that around half of my Javascript was unused. If this Javascript is unused, why is it being bundled into my application?

A few years ago I heard the term tree-shaking, which was the removal of unused code from a bundle. The big hype I inferred was that Webpack 4 would tree-shake while bundling, thus eliminating unused code and making bundles significantly smaller. Was this true? Not really, for two reasons:

1. Packages have to explicitly...

I made this visualisation to illustrate what happens during the day of the September equinox. On this day the sun rises almost directly to the east and sets almost directly to the west. But the thing I was most proud of is that this isn’t a FFMPEG compilation of screenshots but an actual recording of WebGL code executing in the browser on a retina screen.

How I got here

It’s been a learning journey to remove jitter/jank/lag from ShadeMap. The first version used +/-5 minute increment buttons because using a slider quickly caused the app to freeze. I’ve been able to improve the rendering performance by a factor of 20 over the last 6 months. Today, I’m even offering a High Quality retina option, which means crunching 4 times as many pixels as before.

I was a complete beginner at WebGL and at first I used the gpu.js library to write my rendering code in plain Javascript and transpile it...

I woke up the next morning from the type of deep sleep that makes you forget where you put your phone the night before. Eventually I found it in the pocket of my puffy and we snoozed it for another hour. Going to bed the night before we both had a “let’s see how we feel in the morning” attitude, but now we were going to have to move if we had any chance of making it up Sherpa. The technique for me is to just fire up the stove and see how I feel, make and eat the oatmeal and see if I still want to go, filter the water and so on. Each small action added to the snowball effect and by 6:45am we were packed and walking on the Ingalls Creek trail.

Heading up the meadow from Ingalls Creek

The uphill trail to Sherpa starts on climbers left of a meadow or you can start in the bushes to the left, but the best track is eventually through the trees. It was a nice change of pace to quickly make...

Sunset on Argonaut

A wise man once said, “Good plans are all alike, each bad plan is bad in its own way”. Cassondra suggested (for the record) that we try Argonaut and Sherpa over Labor Day weekend. I love being enveloped in 30 mph winds as I bask in summit glory, so the forecast seemed about right. We took most of Saturday to organise gear. After spending all summer in 30L packs, we decided to dust off the ol’ 60L to make sure we wouldn’t go hungry. We got a few hours of sleep, left Bothell at 4am and arrived at Beverly Turnpike trailhead around 6:30am. A casual 3 hour approach with brilliant views of Argonaut brought us to Ingalls Creek.

Basecamp: where we spent a total of 6 hours all weekend

We pitched camp and I asked Cassondra for the stats on Argonaut. Four thousand feet of gain? Hmmm, that’s not super tall. We can probably take a nap. We packed our summit packs and set out...

I first tried to climb Mt Rainier in 2011 with my friends Jordan and Jake. I had just spent the previous week on the John Muir trail camping above 12,000’ so I felt acclimated and confident I could do it. Jake was not feeling his best that day and stayed at Camp Muir. Jordan and I called it quits around 5am at Ingraham Flats. I’ve had a nagging feeling over the years that maybe we could have made it that day, but we weren’t really committed to trying. Stopping due to objective hazards like weather absolves you from failure, but giving up with gas in the tank can eat at you sometimes.

The white whale

Well, I got a chance at redemption this week. Cassondra and I are very fortunate to be able to plan climbs on short notice and the weather on Sunday night was incredible - summit temperatures just below freezing and wind speeds at 5-10 mph. In order to climb Rainier you must reserve a...

A couple of exciting things have happened during the past three months:

• traffic to the site grew substantially
• performance improved and new features were added
• I’ve started to think about a monetising strategy

Traffic

Snapshot of live traffic

I always anticipated that Hacker News would be the place to get traffic from. The users are highly technical and appreciate novel uses of technology. It may still be true that Shade Map would be a big hit IF it made it to the front page but without gaming the system it’s proved impossible to get enough upvotes. Shade Map is visual eye candy and it’s hard to showcase that on a text based community like HN.

I’ve never been a reddit user, but I posted a link to Shade Map in r/webgl and received some modest interest and valuable feedback. I stumbled across r/MapPorn at some point and its visual nature captured my attention. It’s true what they...

I added search functionality to shademap.app today. The correct term is actually Geocoding, which is the process of converting search terms into latitude and longitude coordinates. Because Google is a leader in search technology, I decided to use Google Maps API for the task.

I like the way the Google Maps search bar looks, so I used Developer Tools to copy the relevant markup and styles into my project as a React component. The search bar stretches from edge-to-edge on mobile devices but has a bit of margin on larger screens. I chose not to implement an auto-complete dropdown at this point because I have no revenue and the Google Autocomplete api is an extra cost. Without autocomplete, the Google Maps free-tier allows for 40,000 geocode requests per month.

Some errors I encountered. The first was the result of using the wrong NPM library.

"error_message" : "API keys with referer

Monkey Face is a distinct pillar in the center of Smith Rock State Park outside of Bend, OR. One side of it resembles the face of a monkey (although, I would say ape) with eyes and forehead slanting away from a protruding mouth and nose. There’s also a relatively accessible climb, Pioneer Route, leading up the monkey’s neck, through its mouth, over the nose and up the forehead. In the end you get to stand on top of the monkey’s head with cliffs dropping away from you on all sides.

Getting ready in the parking lot

Cassondra and I saw the climb in March on our first visit to Smith Rock. A few friends of mine had climbed it about a decade ago. I think I missed out because I had moved back to the midwest. Either way, it sounded epic. Aid climbing a bolt ladder - something I had never done, and a 60m free hanging rappel - something guaranteed to make you poop your pants. It’s also...

I added buildings to Shade Map (may take a few seconds to load)

From the beginning, Shade Map used contour maps in order to calculate which valleys are in the shade and which hill tops are in the sun. However, most cities are relatively flat and the main contributor to shade in these areas are buildings. I stumbled across a free GeoJSON API for buildings and decided to add buildings to Shade Map.

The elevation data I use for shading mountains and valleys is encoded in an image. Each pixel of the image corresponds to an elevation at that point. Here is an example elevation data map tile:

In contrast, the building data comes is GeoJSON format which is a text representation. Here is an example:

{
            "id": "27915177",
            "type": "Feature",
            "properties": {
                "levels": 2,
                "type": "school",
                "roofLevels": 0