track.easterbunny.cc (v6)

One of the core additions to v6 was the Easter Bunny properly arriving at stops. Previously in v5, the Easter Bunny just bounced between stops without ever properly stopping. I took inspiration from Google’s Santa Tracker and put my own spin on it.

Rather than have the Easter Bunny spend 60 seconds at each stop regardless of population or interval between cities, I made a custom formula that automagically calculated how long to stop for, taking into consideration the size of the city and how long it was between stops. Doing this allowed not only for much lower arrival times (5-30 seconds on average) so the tracker is fast-paced, but also to keep all existing stops without modification to the route.

Additionally, you’ll see metrics on the top right - this is exactly the same as last year with the tracker providing 5 metrics. Baskets delivered, carrots eaten, distance traveled, speed, and distance from you.

And here’s a demo of the Easter Bunny arriving at stops! Excuse the absolute horrible quality, Squarespace compresses .gif files to eternity and beyond. It looks much better/smoother on the tracker.

In short, on arrival, the map zooms in by 3 zoom levels on arrival, then a custom animation by a community member is played depicting the Easter Bunny has arrived.

Additionally, the baskets delivered count rises significantly on arrival - it’s a 60/40 split between baskets delivered while en-route versus stopped.

The stopping ability was built into the refactored tracker as one of the first features.

And on departure, the opposite happens! The map zooms out to depict the Easter Bunny is en-route once again and the tracker moves to the next stop.

Overall, this was one of the coolest features of the tracker and a lot of people enjoyed it.

Clicking on the cog button in the bottom left brings up the settings window, the meat and potatoes of this tracker.

One of the core things that sets track.easterbunny.cc apart from anyone is the extensive customization of the tracker. This year I took the opportunity to really polish up the settings window so it’s easier than ever to customize settings.

There’s 6 (yes, six) different sections of settings you can customize. It starts with the tracker section, where I moved some settings elsewhere because it made sense. From here, you can control the appearance of the tracker, if the estimated arrival time is on/off, and the smoothness of the tracker (which got an update this year).

track.easterbunny.cc is one of the smoothest trackers around, and I let users play around with the settings if they want maximum smooth or want to be more conservative (as the smoother the updates, the more CPU power is used).

MDB 5 comes with some nifty popover features, and I used them to their advantage in the smoothness setting. Users could now see how fast the map and metrics would update on certain settings this year.

One of the new tabs this year is the localization tab, which is where users can control how the tracker is localized to their liking.

It starts with the already existing tracker units setting, but then a new setting to change how times are rendered in the tracker. Browsers surprisingly don’t have great support to figure out which time setting your device is in (instead, defaulting to the locale’s default), so I let users override this here.

Additionally, there’s a your location accuracy feature…but we’ll talk more about this later.

Here’s an example of that locale work paying off big time here with local time arrivals.

It’s a bit early to introduce, but clicking on any basket means you open up a stop information window.

This window contains data on when the Easter Bunny arrives at a location, the weather (on arrival), elevation, and population. Lastly, there’s about a 4-sentence description that is automatically grabbed from Wikipedia and put through lots of filtering to remove annotations, pronunciation, etc.

The stop information window definitely has a nice UI compared to last year, you can see MDB5 working wonders here.

And here’s that time format setting working in the stop information window, in addition to manually set units (the units here are in metric).

Overall, very cool!

Next up is the map section of settings, which as you guessed controls everything with the map. There’s really no changes from last year aside from a new UX for controlling the default map zoom which is…10x better than whatever dropdown I put in for years prior.

Users can control the map style, if the Easter Bunny bounces or not, if the map zooms in on stop arrival (which is GREAT if you’re timelapsing the tracker), and a Chrome-specific feature to get around a still very well known bug in Chrome with the GMaps API. I will not explain further, it’s existed for YEARS and Google has not fixed it.

Next up is the metrics tab which controls all the metrics! On mobile devices this is where you select which metric is shown. Additionally, you can control whether or not metrics are shown on mobile devices and flags are shown in the last/next stop boxes.

This section also controls extended stop data related settings, and this is where some settings migrated from the tracker section this year. There’s two settings to control if you see a weather summary in the stop information data, and the local arrival time of cities.

Since I switched to using Luxon for time rendering this year, this local arrival time feature required some work! In moment.js (which was used in v5.6 and prior), it included timezone abbreviations for most timezones, but Luxon relies on the Intl implementation in browsers. When you request a locale, it usually only gets abbreviations for any timezones in that locale.

What I had to do was use GeoNames to get the Unicode locale string, throw that into the route, then use that data to properly set the locale when doing time rendering. Then the proper abbreviation (e.g. BST, JST, etc) would show up. If I did not do this, any stops outside your locale would just show a GMT offset.

The fifth tab is the reset section, and this contains two new sets of default settings for this year!

In addition to the standard reset settings and streamer default settings, there’s an additional low-performance defaults (since the tracker is heavier this year with React). I also added a set of default settings to try and emulate the v3 tracker experience as a little Easter egg.

Whenever you click on one of the default settings options (that isn’t reset settings), you’ll get a modal that explains what settings are about to be applied.

The last tab in the settings is the new help tab for this year. This tab contains some information about how users can get support for the tracker, including some tips for streaming the tracker as well.

Scroll down and you’ll be greeted with some diagnostic information in case you ever needed to contact support (I got zero emails in 2023, so I guess the tracker is pretty reliable!). Diagnostic information includes your browser and all the settings (and is mostly a way for me to see diagnostic info while testing, but shush) that you’ve set.

Because the tracker uses a brand new settings stack for this year (one dictionary in local storage rather than a individual key/value pairs for each setting), there’s an automatic migration system so that if users have v5 settings, they’re automatically migrated into v6 ones.

Click on the info icon in the bottom left and you’ll be greeted with the information modal, which got an update this year!

The info modal still contains information about what all the icons mean in the tracker. Depending on the state of the state of the tracker, information is shown conditionally (e.g. the uncenter/recenter button info is not shown except during tracking). During the countdown, the info button shows when the Easter Bunny will lift off.

Past that, the way links were flowed got updated and allowed me to put more links in the info window.

There’s also the usual version & copyright information in here as well.

One of the nifty things this year was that the donate modal got completely redone for 2023. The ko-fi widget is now embedded into the tracker for much easier donating.

And remember that fullscreen button from earlier! Here it is in action.

In short, when clicking the button, the tracker goes fullscreen without any URL bars or other UI elements. Once you’re done, you can use your browsers controls to exit fullscreen, or click the fullscreen button to exit.

The fullscreen button uses browser compatibility checks to ensure that it’s appearing on browsers that are fullscreen capable, so it wasn’t working on every single browser. In v7, I’m hoping to expand support to more browsers.

Remember that precise location feature from earlier? Here it is…sort of in action.

In short, the tracker uses IP location approximation to try and figure out where you are but it’s just that - an approximation. That means the tracker doesn’t actually know if the location being reported is where you are.

That’s where precise location comes in. You can click on this option, the tracker finds your location, and now knows with precision where you are! Using a reverse geocoder, I provide user feedback at a city level just so the user knows everything’s working correctly.

There’s a couple benefits unlocked with precise location, so let’s go over them!

First things first, the arrival estimate updates in quarter hour increments. Additionally, when the Easter Bunny is within 10 stops of your location, it’ll actually count down the number of stops to go. In this example, you can see that the Easter Bunny is 9 stops away.

Another benefit of precise location is that because it’s not an approximation, the distance from you metric can work all the way down to wherever you are! Previously it said “The Easter Bunny is nearby!” once it got past a certain accuracy threshold, but not with precise location.

Starting with v6, approximate location users had a tilda next to the distance from you and it only updated every 10 mi/km.

Additionally, as the Easter Bunny gets closer, the distance from you metric gets quite excited!

When the Easter Bunny is heading to your stop, it’ll say that it has arrived. It says that while en-route to the closest stop and leaving the closest stop to the user (to cover the largest geographic area).

And when the Easter Bunny is very close to you, the distance from you metric gets quite excited.

As mobile users outpaced desktop users by 2.5 to 1 this year, the tracker was optimized for usage on mobile devices.

Notably, I ended up decreasing the font size on small viewports (because I assume in this case you’re running on a higher DPI display) to squeeze some extra space out of the UI. And as was done before, a single metric is visible alongside the arrival estimate on mobile.

You can also see the map gets zoomed out an extra level on mobile devices to provide a similar amount of viewable map area to that of desktop devices.

And lastly, here’s the new dark mode for this year!

Optimizations are also made for devices with very low height viewports (in this example, some cursed 25:9 viewport). Regardless, the Easter Bunny shifts down depending on your screen height so it can avoid the top boxes.

Additionally, the buttons on the left side get smaller so that they don’t collide with the top boxes, and when they do, they don’t obstruct any text.

Another change made this year was having two boxes from 576px-992px viewports. Previously, the threshold for three boxes was ~768px, but I found that it’s a better UX to let that threshold be 992px (and the last stop box isn’t reaaaaally necessary).

So this is what it usually looks like on tablet devices in portrait mode, for instance.

Couple more things here that I didn’t mention last year. track.easterbunny.cc has a thing called pre-tracking, where for 3 hours before actual tracking begins, users can get insights into what the Easter Bunny is doing on Easter Island while he makes final preparations.

In previous years, these updates rolled around every 5 minutes, but this year it was every 2.5 minutes!

And of course, this is what the tracker looks like in pre-tracking mode. The map is locked to Easter Island at zoom level 3. Once pre-tracking is done, the map zooms into tracking!

And before all of this gets going, there’s a countdown page. Now, this may look boring. And it is. But it’s been here for five years now and honestly it’s part of the tracker’s identity to have this plain countdown.

Plus, it’s kinda cool to watch a countdown just tick down to zero after you’ve been waiting for quite a very long time. I think it’s quite artistic. And there’s other trackers out there that offer loads of entertainment and games before tracking begins, so you know, you can always go there.

Then come back to TEBCC for tracking.

I also don’t know how to code children’s games.

And this is what the transition from the countdown to pre-tracking looks like.

After five years, finally the tracker doesn’t do any actual page redirects between what I call route states (since TEBCC is finally a single-page app).

In 2019 it had to do two redirects (countdown -> pre-tracking -> tracking), in 2020-2022 it had to do one redirect (countdown -> pre-tracking then tracking on the same page), and now it’s down to zero! Woohoo!

And that’s track.easterbunny.cc Version 6! It’s the fifth iteration of a project that genuinely is so much fun to run and develop, and I can’t wait to see where it goes in the future.

At this point, I recommend reading the previous pages on track.easterbunny.cc’s history so you can see where the tracker has come from! It’s definitely been a lot of slow but steady iterations over 5 years as I’ve gained more web development experience.