https://owenthe.dev/work daily 1.0 2026-03-29 https://images.squarespace-cdn.com/content/v1/5d7bfb383197e14bd4e5f2e3/1568409173335-FPNRCP3DID6U0VC288GS/snowday.jpg Work https://images.squarespace-cdn.com/content/v1/5d7bfb383197e14bd4e5f2e3/1571262067155-TP6FKQ9X3UKOC6EOXQL9/pwbanner2.png Work https://images.squarespace-cdn.com/content/v1/5d7bfb383197e14bd4e5f2e3/1572125354029-Q2CMMNRGKZKPYSJ8ORO2/sdapi2.png Work https://images.squarespace-cdn.com/content/v1/5d7bfb383197e14bd4e5f2e3/1572125471705-D16DLWTM1GBBQO90A8C8/sddbanner.png Work https://images.squarespace-cdn.com/content/v1/5d7bfb383197e14bd4e5f2e3/1571252475544-RUN9XEJOISVXZ1KMOBHU/gcqa1-fix.png Work https://images.squarespace-cdn.com/content/v1/5d7bfb383197e14bd4e5f2e3/1588572576721-7PBM0CECLUIWUST08CXF/20200504_015834.jpg Work https://images.squarespace-cdn.com/content/v1/5d7bfb383197e14bd4e5f2e3/1613276368065-YT4F3HPFQ9WVIANGMXXR/Screen+Shot+2021-02-13+at+7.24.21+PM.png Work https://images.squarespace-cdn.com/content/v1/5d7bfb383197e14bd4e5f2e3/1622417187116-ED5I0SGHAEOVDH94LGGC/Screen+Shot+2021-05-30+at+7.24.19+PM.png Work The main homepage for CenHud Outage Trends. Bootstrap 5 provides a very down-to-earth, no frills UI here that I really enjoy. The top box shows the current number of customers out and outages, along with when the data was last updated. An automatic updating system (new to v3) shows when the page will update next. The next two boxes are the actual trends, at 1, 3, 6, and 12 hour intervals. The final box is the records that occurred in the last 72 hours, with server-side code to point out if the latest datapoint was a new record. https://images.squarespace-cdn.com/content/v1/5d7bfb383197e14bd4e5f2e3/1638217187061-K85M7Q38KR9OEE73YWK5/Screen+Shot+2021-01-27+at+1.15.48+PM.png Work The main screen for How Hot 2. It’s very similar to How Hot 1, just with much more data. The status indicators remain from How Hot 1 (including three more for humidity/dew point/air quality, but not for pressure. Where applicable, a delta to the outside condition is provided. All fields have some form of change in the past 24 hours to see if things are getting hotter, colder, more humid, less humid, etc etc. At some point in September 2021, I replaced the ambient light field with a dew point field, as I found this data more useful. There’s also a link to some long-term climate thing that got added…more on this later. https://images.squarespace-cdn.com/content/v1/5d7bfb383197e14bd4e5f2e3/1656654644503-VUYTFAQZ2PFC3ZUL23TT/Screen+Shot+2022-07-01+at+1.49.48+AM.png Work This is the main onboarding screen of SkyCast. A little blurb about what SkyCast does is offered, and then a MUI date picker is shown so you can pick what date you want a SkyCast for. The date field is set to the current date on page load. As of now, the users current location (determined via the Geolocation API) is used as the location for the SkyCast, but this will probably change in a future release to allow manual location input. https://images.squarespace-cdn.com/content/v1/5d7bfb383197e14bd4e5f2e3/1675129905539-EH06RVFI0NJETCIK68FW/IMG_0134.JPG Work https://images.squarespace-cdn.com/content/v1/5d7bfb383197e14bd4e5f2e3/1693341778834-GCZAEQEM8CY3AIKYG47J/Screenshot+2023-08-29+at+4.42.49+PM.png Work This is the main dashboard of How Hot 3 in Grafana. From here, I can get a pulse on all the key metrics across the apartment, in addition to looking at 6 hours of historical data of temperature & humidity from all rooms. The gauges and charts are colored based on thresholds from How Hot 2. https://images.squarespace-cdn.com/content/v1/5d7bfb383197e14bd4e5f2e3/1695759607867-XDM82ANA489LUAW6UFZX/Screen%2BShot%2B2023-04-09%2Bat%2B6.00.11%2BAM.png Work https://images.squarespace-cdn.com/content/v1/5d7bfb383197e14bd4e5f2e3/1693456091040-I7VWH8HEU3YHDZCINS6Y/IMG_1664.jpeg Work This is the hardware setup for OctoCam! The mounting plate is the work of Pimoroni’s now discontinued OctoCam project kit. Originally, this kit came with a Pi Zero W and a OV5647 5MP (commonly known as a ZeroCam) camera with a 80 degree FoV when I got it in March 2021. Then came the upgrades… First, in May 2021, I put in a wide-angle OV5647 sensor with a 120 degree FoV. The difference from the 80 degree FoV was night and day, and OctoCam was capturing so much more of the sky and what was happening on the ground. Then, in December 2021, I upgraded the board to the Pi Zero 2 W for much improved processing power. This allowed me to compress and timestamp images on the Pi, rather than on the backend (and reduce network usage too!). Finally, in June 2023, I took the plunge and upgraded the camera to the wide-angle version of the Raspberry Pi Camera Module 3. It took quite a bit of tinkering to fit a (relatively) massive camera on a mounting plate designed for a ZeroCam, but eventually it worked (at the expense of the Pi hanging off the mounting plate)! https://images.squarespace-cdn.com/content/v1/5d7bfb383197e14bd4e5f2e3/1717267462815-JAZU9RLWI8MKC0FYXPRR/Screenshot+2024-05-31+at+11.09.55%E2%80%AFPM.png Work https://images.squarespace-cdn.com/content/v1/5d7bfb383197e14bd4e5f2e3/1736216766264-5Q9T6K1BRWQ1X8L1U1K7/IMG_6646.jpeg Work https://images.squarespace-cdn.com/content/v1/5d7bfb383197e14bd4e5f2e3/1764295981113-08C1F7EQ67G03WUXM61Y/IMG_0665.jpeg Work Here it is in the flesh, in the wild, my latest project of 2025, the MBTA Screen. We’ll have a lot more to talk about with the UI/UX, but let’s start with hardware. The screen runs on a Raspberry Pi 5 with 2 GB of RAM, and the screen is a Pimoroni Hyperpixel 4.0 with touch enabled. The case is 3D-printed in PETG (rather than PLA since the Pi doesn’t have a heatsink on it, you’ll see why shortly), and connected to it is an official 27W Pi 5 power adapter that I had lying around (totally overkill, obviously). The screen resolution runs at 800×480, however, the MBTA Screen software runs at 533×320, which is upscaled at 150% - mostly for readability because of the Hyperpixel’s dense PPI. By the way - my phone is doing a really bad job exposing the screen - it is not this washed out in person! And the keen eyed among you may have realized that this sits below PyWeather 3 next to my door - very nicely done! https://owenthe.dev/trackeasterbunnycc daily 0.75 2020-05-11 https://images.squarespace-cdn.com/content/v1/5d7bfb383197e14bd4e5f2e3/1571245643612-HGN3JB0OTNP5F9MFJY71/screen_1555753218.99.jpg track.easterbunny.cc (Version 3) https://images.squarespace-cdn.com/content/v1/5d7bfb383197e14bd4e5f2e3/1571241856469-VOXY0PW9LNGT6ZS2DHMW/screen_1555748538.99.png track.easterbunny.cc (Version 3) track.easterbunny.cc Version 3 is pretty basic compared to Version 4, and this screenshot shows it all. The map is locked into hybrid mode, the UI in dark mode. A single question mark icon at the bottom left showed a small dialogue when clicked, with links to FAQs, News, and Acknowledgements. One thing that is seen here was pre-tracking. It had never been done before in the world of Easter Bunny Tracking. It’s a simple premises: display the Easter Bunny’s preparations for 3 hours to further engage users with the tracker, and show what happens behind the scenes. https://images.squarespace-cdn.com/content/v1/5d7bfb383197e14bd4e5f2e3/1571240882392-8P817S0RGC3G1MK71W9O/image-asset.jpeg track.easterbunny.cc (Version 3) - Welcome https://images.squarespace-cdn.com/content/v1/5d7bfb383197e14bd4e5f2e3/1571241425004-36NQ14P9HJV2X8JJ901T/ebt2.png track.easterbunny.cc (Version 3) Even with the lackluster UI, Version 3 was built with the goal of making a real-time tracker, and so I focused a lot on the underlying logic. Aside from a few hitches with the basket delivered count going too high sometimes, it worked great. I didn’t spend a great deal of time on the UI because it wasn’t the primary focus. https://images.squarespace-cdn.com/content/v1/5d7bfb383197e14bd4e5f2e3/1571241439851-XD3OJ0VOKKQN3QU8IOV6/ebt4.png track.easterbunny.cc (Version 3) https://static1.squarespace.com/static/5d7bfb383197e14bd4e5f2e3/5d9024bc0922d81f44fab12e/5da73bb157c03c3e07f7abe0/1571240621412/ track.easterbunny.cc (Version 3) - Welcome https://images.squarespace-cdn.com/content/v1/5d7bfb383197e14bd4e5f2e3/1571241454348-3BQUJT074OPG25Z7JNHW/ebt5.png track.easterbunny.cc (Version 3) https://images.squarespace-cdn.com/content/v1/5d7bfb383197e14bd4e5f2e3/1571241473403-4KREMNMZPSXD2T92JD0H/ebt6.png track.easterbunny.cc (Version 3) https://images.squarespace-cdn.com/content/v1/5d7bfb383197e14bd4e5f2e3/1571241602238-TU9JEQDG8M0130ZXCXE8/ebt7.png track.easterbunny.cc (Version 3) https://images.squarespace-cdn.com/content/v1/5d7bfb383197e14bd4e5f2e3/1571241617967-SOTAA39ZYVLPJYE0R0H9/ebt8.png track.easterbunny.cc (Version 3) https://images.squarespace-cdn.com/content/v1/5d7bfb383197e14bd4e5f2e3/1571241637406-EIE3GOQRT2JBUR4SYNQC/ebt9.png track.easterbunny.cc (Version 3) https://images.squarespace-cdn.com/content/v1/5d7bfb383197e14bd4e5f2e3/1571243274881-2LHGKEPPQSQ1DXGQI2C7/ebt11.png track.easterbunny.cc (Version 3) https://images.squarespace-cdn.com/content/v1/5d7bfb383197e14bd4e5f2e3/1571243151739-W0U60JAUISQ9P13PQI10/image-asset.jpeg track.easterbunny.cc (Version 3) This video is a 26-second summary of the highlights of the Easter Bunny’s journey in 2019. If you’d like to see the full timelapse (approx 11 minutes) of track.easterbunny.cc’s 2019 run, please see the video below. https://images.squarespace-cdn.com/content/v1/5d7bfb383197e14bd4e5f2e3/1571710955597-JNNTYNYR6ST1C9VONGVO/image-asset.jpeg track.easterbunny.cc (Version 3) This is the full timelapse of track.easterbunny.cc’s 2019 run. It compresses 28 hours of tracking captured by 40,000 images into just under twelve minutes of video. Make sure you set your video quality to 1080p and watch in full-screen if you can to get the best viewing experience. https://owenthe.dev/portfolio-updates daily 0.75 2025-11-06 https://owenthe.dev/portfolio-updates/site-updates-november-2022 monthly 0.5 2022-11-19 https://owenthe.dev/portfolio-updates/site-updates-october-2021 monthly 0.5 2021-11-30 https://owenthe.dev/portfolio-updates/site-updates-july-2021 monthly 0.5 2021-08-04 https://owenthe.dev/portfolio-updates/dark-mode-is-here monthly 0.5 2021-06-02 https://owenthe.dev/portfolio-updates/website-updates-post-migration-late-mayearly-june-2021 monthly 0.5 2021-06-04 https://owenthe.dev/portfolio-updates/portfolio-updates-may-2021 monthly 0.5 2021-05-30 https://owenthe.dev/portfolio-updates/portfolio-updates-april-2021 monthly 0.5 2021-04-16 https://owenthe.dev/portfolio-updates/portfolio-updates-january-2021 monthly 0.5 2021-01-30 https://owenthe.dev/portfolio-updates/portfolio-updates-november-2020 monthly 0.5 2020-11-14 https://owenthe.dev/portfolio-updates/portfolio-updates-october-2020 monthly 0.5 2020-10-20 https://owenthe.dev/portfolio-updates/portfolio-updates-may-2020 monthly 0.5 2020-05-16 https://owenthe.dev/portfolio-updates/portfolio-updates-april-2020 monthly 0.5 2020-05-02 https://owenthe.dev/trackeasterbunnycc-version-4 daily 0.75 2020-05-02 https://images.squarespace-cdn.com/content/v1/5d7bfb383197e14bd4e5f2e3/1588399460545-5LGALIMF31I6WD8ZZXKE/Screen-Shot-2020-04-11-at-11.40.23-PM-1.png track.easterbunny.cc (Version 4) Version 4 uses Material Design Bootstrap for a much lighter design language that’s easier on the eyes, and less bulky. The main controls for the tracker are in the bottom left in a vertical stack. The button priority is sorted from bottom to top - settings is most important, but centering controls aren’t incredibly important. https://images.squarespace-cdn.com/content/v1/5d7bfb383197e14bd4e5f2e3/1588399460545-5LGALIMF31I6WD8ZZXKE/Screen-Shot-2020-04-11-at-11.40.23-PM-1.png track.easterbunny.cc (Version 4) Version 4 uses Material Design Bootstrap for a much lighter design language that’s easier on the eyes, and less bulky. The main controls for the tracker are in the bottom left in a vertical stack. The button priority is sorted from bottom to top - settings is most important, but centering controls aren’t incredibly important. https://images.squarespace-cdn.com/content/v1/5d7bfb383197e14bd4e5f2e3/1588399470571-HIWWCBQ8UM6ZU498EIPK/Screen-Shot-2020-04-11-at-11.41.15-PM.png track.easterbunny.cc (Version 4) Dark mode was added in Version 4 of the tracker. The street map automatically goes into dark mode when it’s selected. https://images.squarespace-cdn.com/content/v1/5d7bfb383197e14bd4e5f2e3/1588399276864-6CP7YH6TKOS2DXCEP293/Screen-Shot-2020-04-11-at-11.40.23-PM-1.png track.easterbunny.cc (Version 4) https://images.squarespace-cdn.com/content/v1/5d7bfb383197e14bd4e5f2e3/1588399467767-E0MDS5PPR8UXFZ3BK9YE/Screen-Shot-2020-04-11-at-11.40.44-PM.png track.easterbunny.cc (Version 4) Customization of map modes were added to Version 4. The screenshot above shows Satellite mode, and the screenshot below shows Hybrid mode. https://images.squarespace-cdn.com/content/v1/5d7bfb383197e14bd4e5f2e3/1588399484519-OD5PSNT0BY604JRO57IC/Screen-Shot-2020-04-11-at-11.40.53-PM.png track.easterbunny.cc (Version 4) https://images.squarespace-cdn.com/content/v1/5d7bfb383197e14bd4e5f2e3/1588399485005-3YFGC41HSI1BXMCZO69U/Screen-Shot-2020-04-11-at-11.43.09-PM.png track.easterbunny.cc (Version 4) The about window of the tracker shows a quick guide on how to use the tracker, using the iconography of the tracker. https://images.squarespace-cdn.com/content/v1/5d7bfb383197e14bd4e5f2e3/1588399490478-8WKOUFM8CCAOTP3LG6J3/Screen-Shot-2020-04-11-at-11.43.18-PM.png track.easterbunny.cc (Version 4) The settings window is split into four different sections to control different parts of the tracker. https://images.squarespace-cdn.com/content/v1/5d7bfb383197e14bd4e5f2e3/1588399488685-9Y3VY42AJ7C65M2M1BED/Screen-Shot-2020-04-11-at-11.43.23-PM.png track.easterbunny.cc (Version 4) https://images.squarespace-cdn.com/content/v1/5d7bfb383197e14bd4e5f2e3/1588399502702-3GHZWQU0E5G26QXSE3T8/Screen-Shot-2020-04-11-at-11.43.29-PM.png track.easterbunny.cc (Version 4) https://images.squarespace-cdn.com/content/v1/5d7bfb383197e14bd4e5f2e3/1588399499027-6D3YW7HD6ZDXKLSTXDOX/Screen-Shot-2020-04-11-at-11.43.35-PM.png track.easterbunny.cc (Version 4) Reset settings is important - but I also added a set of optimized settings for streaming the tracker online. https://images.squarespace-cdn.com/content/v1/5d7bfb383197e14bd4e5f2e3/1588399501648-L3IONE2YC9LDS90XRH78/Screen-Shot-2020-04-24-at-12.35.52-AM.png track.easterbunny.cc (Version 4) Version 4 adds an estimated arrival time for the Easter Bunny, rounded to the nearest half hour. I used a method called IP geolocation to estimate locations of users. The tracker calls a basic system made in Python w/ Flask to get the approximate user location, and the tracker calculates the estimated arrival time. I made sure this could be turned off in settings - especially useful to protect the privacy of folks streaming the tracker online. https://images.squarespace-cdn.com/content/v1/5d7bfb383197e14bd4e5f2e3/1588399502627-RCEJ3XH1TZJBAPTO3057/Screen-Shot-2020-04-24-at-12.52.13-AM.png track.easterbunny.cc (Version 4) Clicking on basket icons pops up a stop information window. Each stop has information on arrival time, the weather on arrival, population, and elevation. An excerpt from Wikipedia is shown - with a direct link to learn more. https://images.squarespace-cdn.com/content/v1/5d7bfb383197e14bd4e5f2e3/1588400312331-6B13X1JMBFQSQXTY3QIU/Screenshot_20200411-230810.jpg track.easterbunny.cc (Version 4) Phone usability remained a top priority for Version 4 - and it worked out beautifully. I made a small tweak on mobile where the default zoom level was 1 level lower than that on desktop, so that mobile users could get a similar perspective. https://images.squarespace-cdn.com/content/v1/5d7bfb383197e14bd4e5f2e3/1588403313633-P0ZRQ5CQPLB65DGTIZKP/Screen-Shot-2020-04-24-at-2.08.06-AM.png track.easterbunny.cc (Version 4) Version 4 included a Twitter bot made in Python with Twython. The Twitter bot would tweet out every stop the Easter Bunny made, and every update during the Easter Bunny’s final preparations. https://images.squarespace-cdn.com/content/v1/5d7bfb383197e14bd4e5f2e3/1588401950471-WANBYD6A36LDDKYYJF2R/start+-+5+am.png track.easterbunny.cc (Version 4) https://images.squarespace-cdn.com/content/v1/5d7bfb383197e14bd4e5f2e3/1588401962572-MTT9XKO6CAW5Z49DTTQ2/australia+-+8+am.png track.easterbunny.cc (Version 4) https://images.squarespace-cdn.com/content/v1/5d7bfb383197e14bd4e5f2e3/1588401965624-5L6O26GKXJX1Q2UI8WXI/east+asia+-+845am.png track.easterbunny.cc (Version 4) https://images.squarespace-cdn.com/content/v1/5d7bfb383197e14bd4e5f2e3/1588401968564-VPQH9ZI4J67FU6QS893I/se+asia+-+1115am.png track.easterbunny.cc (Version 4) https://images.squarespace-cdn.com/content/v1/5d7bfb383197e14bd4e5f2e3/1588401971357-8XEG11V59G74VMF91MC8/india+-+1230pm.png track.easterbunny.cc (Version 4) https://images.squarespace-cdn.com/content/v1/5d7bfb383197e14bd4e5f2e3/1588401975103-BE2H31039J9ZDGAE4LW2/se+europe+-+330pm.png track.easterbunny.cc (Version 4) https://images.squarespace-cdn.com/content/v1/5d7bfb383197e14bd4e5f2e3/1588401980729-TFZQ7PD0EIFG4Y3PRAA6/middle+east+-+4pm.png track.easterbunny.cc (Version 4) https://images.squarespace-cdn.com/content/v1/5d7bfb383197e14bd4e5f2e3/1588401984838-8C2U2S473KVI6T2XPGGQ/europe+-+530pm.png track.easterbunny.cc (Version 4) https://images.squarespace-cdn.com/content/v1/5d7bfb383197e14bd4e5f2e3/1588401987653-CR0LLEZXA65FCGH5VU9Y/africa+west+coast+-+730pm.png track.easterbunny.cc (Version 4) https://images.squarespace-cdn.com/content/v1/5d7bfb383197e14bd4e5f2e3/1588402600519-41NT8PZJM000QLSY5T4R/uk+-+830pm.png track.easterbunny.cc (Version 4) https://images.squarespace-cdn.com/content/v1/5d7bfb383197e14bd4e5f2e3/1588402606042-FRPFTKKSINE1TIKO10J3/caribbean+-+10pm.png track.easterbunny.cc (Version 4) https://images.squarespace-cdn.com/content/v1/5d7bfb383197e14bd4e5f2e3/1588402611526-SZJIYSLPBSA39UEEYTIT/south+america+-+11pm.png track.easterbunny.cc (Version 4) https://images.squarespace-cdn.com/content/v1/5d7bfb383197e14bd4e5f2e3/1588402616353-VWFWH5N524CVZW4Y2AT7/southern+usa+-+1115pm.png track.easterbunny.cc (Version 4) https://images.squarespace-cdn.com/content/v1/5d7bfb383197e14bd4e5f2e3/1588402621261-XKGI7DMN83STG6PGGXKI/ne+usa+-+1150pm.png track.easterbunny.cc (Version 4) https://images.squarespace-cdn.com/content/v1/5d7bfb383197e14bd4e5f2e3/1588402627106-GY3THFBL1LACNXTV2QVQ/central+america+-+1am.png track.easterbunny.cc (Version 4) https://images.squarespace-cdn.com/content/v1/5d7bfb383197e14bd4e5f2e3/1588402633198-WQZA5EI1IY67UZL29OM3/midwest+-+230am.png track.easterbunny.cc (Version 4) https://images.squarespace-cdn.com/content/v1/5d7bfb383197e14bd4e5f2e3/1588402639055-H66GI6QNAH95EXJRCDMZ/west+coast+-+430am.png track.easterbunny.cc (Version 4) https://images.squarespace-cdn.com/content/v1/5d7bfb383197e14bd4e5f2e3/1588402646596-HTN6YOOMLMT2UQBZ1174/hawaii+-+530am.png track.easterbunny.cc (Version 4) https://images.squarespace-cdn.com/content/v1/5d7bfb383197e14bd4e5f2e3/1588402711245-EE8P57YJ5FZUQN2Z6U2Z/end+of+tracking.png track.easterbunny.cc (Version 4) https://owenthe.dev/experiments daily 0.75 2026-03-28 https://images.squarespace-cdn.com/content/v1/5d7bfb383197e14bd4e5f2e3/1571350877915-BTPDF1IJNBIKUBPOH8RI/cht2-2.png Experiments https://images.squarespace-cdn.com/content/v1/5d7bfb383197e14bd4e5f2e3/1589148769596-5HBA0NXMZESNKOT8I1J3/Screen+Shot+2020-05-10+at+6.08.28+PM.png Experiments The main screen of OKToFly https://images.squarespace-cdn.com/content/v1/5d7bfb383197e14bd4e5f2e3/1589149326477-7V38SIWXBQMIZMNNEPWN/Screen+Shot+2020-05-10+at+6.17.53+PM.png Experiments Portal Bot checked for every college. I applied to, and posted a screenshot accordingly. Unfortunately I don’t have video footage of the Portal Bot actually working (and entering passwords, etc), so these Slack screenshots will have to do. https://images.squarespace-cdn.com/content/v1/5d7bfb383197e14bd4e5f2e3/1589150313133-ZOR1IOIZ802CPIUP8I9A/Screen+Shot+2020-05-10+at+6.36.13+PM.png Experiments The main configuration of Flight Finder. This is where you input the starting airport, and then airports you want to visit. You also must put in the date of the flights. Flight Finder bases all the flights off of the date provided. However, if this was further developed, I would adjust the date by one day for each stop. https://images.squarespace-cdn.com/content/v1/5d7bfb383197e14bd4e5f2e3/1589160334002-VM8ILKAWYDBFXYTEOQNT/Screen+Shot+2020-05-10+at+9.21.20+PM.png Experiments Main College Spam Checker setup. CSC first asks for the email server to log into. CSC also does autofill for Gmail, Yahoo, and Outlook.com, and prompts to turn off less secure apps when needed. After that, you need to enter your username and password to log in. Once that’s all settled, CSC lists the inboxes to look in with numbers. In this case, I’d enter 11 because I want to check for mail in the College Spam folder. https://images.squarespace-cdn.com/content/v1/5d7bfb383197e14bd4e5f2e3/1589225702698-62W4KI6FZSSSKX8QBW3M/1-tebcc1.png Experiments There’s a lot going on in this image - a quick explanation. The plugin used for this tracker was Geo Mashup, which added geolocations to WordPress posts, and then displayed those WordPress posts on a map. I had two categories - current stop and previous stops. The map focused on the current stop, and a script in the background changed all other stops to previous stops with different iconography. https://images.squarespace-cdn.com/content/v1/5d7bfb383197e14bd4e5f2e3/1589226364399-YA25J2ISBSXWWYZEYF2I/Screenshot_20200511-154435_Termux.jpg Experiments https://images.squarespace-cdn.com/content/v1/5d7bfb383197e14bd4e5f2e3/1589906194221-RRBKODLPF0G5Y8JEPRHD/Screen+Shot+2020-05-19+at+12.26.30+PM.png Experiments The tools index page for the Snow Day Tools. Please excuse the dock shadow from macOS. https://images.squarespace-cdn.com/content/v1/5d7bfb383197e14bd4e5f2e3/1603177026455-CIML2BE5YSF2I3NARTQI/2020-10-20+02.44.07.jpg Experiments The main weather screen. Given I had a 400x300 resolution to work with, and that 16px text was around the cutoff for legibility, this is about the maximum data I can put on the screen. Up close, you can see the aliasing of the text which definitely looks off putting. However, at a distance of about 3 ft, the text is very readable. The top portion is dedicated to current weather conditions, with an icon, temperature in 24px font size, then the current conditions. Over on the right, you’ll find feels like, wind speed, and humidity. The middle portion is a 5-hour forecast (deliberately at 80px/interval because size constraints). Times are localized to the timezone of the forecasting location. The bottom (but not super bottom) portion is a 4 day forecast, with an icon, high and low temperature. The bottom bottom contains the indoor temperature & humidity reading, plus when the display was last updated. https://images.squarespace-cdn.com/content/v1/5d7bfb383197e14bd4e5f2e3/1590070934317-S54Q840XPSVQQ1EWY5PE/Screen+Shot+2020-05-21+at+10.18.05+AM.png Experiments This script does a lot in one. It first uses Selenium to capture the snow day predictor page, converts the image to a PDF using PIL (Twilio Fax API only supports pdf), then asks a number to fax to. Using that number, the Twilio Fax API sends out a real fax containing the predictor page to the number inputted. And that’s the entire script. Mostly made for the giggles of being able to fax something in the modern days where fax is very obsolete https://images.squarespace-cdn.com/content/v1/5d7bfb383197e14bd4e5f2e3/1605066230208-D3R9KFV7M408V37ZMIA1/Screen+Shot+2020-11-10+at+10.40.34+PM.png Experiments The main screen of How Hot Is It In My Dorm Room?(!) Up in the top box, it shows the last reading of the temperature, down to 2 decimal places. Below that, the latest humidity reading is shown. Additionally, the difference between the outdoor temperature/humidity is shown. In this case, the dorm room is hotter than outside by 20.52 degrees F, and less humid by 45.89%). The dot next to the temperature indicates my relative comfort in the current dorm room temperature. Green (below 77 degrees) means I can stay in the room for a while. Yellow (77-83 degrees) means it’s warm, I might sweat while sleeping, and after a while it might get uncomfortable. Red (83+ degrees) means I should probably study elsewhere on campus and avoid my dorm room. https://images.squarespace-cdn.com/content/v1/5d7bfb383197e14bd4e5f2e3/1605067495640-MJEUJ1DHV7ERKQ4EBN3H/Screen+Shot+2020-11-10+at+11.04.16+PM.png Experiments The main screen of WebWork Status. You’ll first notice that I screwed up the padding for the h3 that shows the status (ignore this, I’ll fix this soon). After you notice how bad of a developer I am, you’ll see how the site basically works. You’ll see a status of webwork (which varies depending on the latest response time, same with the status dot). Then an approximate range of how long pages should take to load (+/- 5 seconds from the last response time with a bottom cap of 0). Below that, information on the last response time measured (basically timing how long a requests request takes to the webwork site) is displayed. Right now, I’m playing with the idea of having the average response time for the last 30 minutes, but this needs some refinement. And then there’s the last updated screen for knowing when everything was last updated. https://images.squarespace-cdn.com/content/v1/5d7bfb383197e14bd4e5f2e3/1613278567041-JOGZR5PX1GVPLZPAC175/Screen+Shot+2021-02-13+at+11.51.21+PM.png Experiments DOCBatch 2 uses a “stepper” system, but in a way where it’s one step at a time, and you cannot see your total progress. This is the main screen where you select the location where you want to eat. But, it definitely looked much cleaner than the Dine On Campus app. The Reserve for Now functionality was added sometime around DOCBatch 1.2/1.3. When DOCBatch 2 was actually live, there was no Go back to DOCBatch 3 button. https://images.squarespace-cdn.com/content/v1/5d7bfb383197e14bd4e5f2e3/1616618345301-WOYNGFKLV0ZC36P865YK/IMG_0917.png Experiments Here’s the hardware setup of the OctoCam stuck on the window. You can see the Pi Zero W, the cable that is very securely attached to make sure the OctoCam doesn’t move, and outside. Note: As of May 2021, OctoCam is in a different position to accommodate the 120° wide-angle camera upgrade. https://images.squarespace-cdn.com/content/v1/5d7bfb383197e14bd4e5f2e3/1627538090446-BFKCRH71RSMROI612DB4/Screen+Shot+2021-07-29+at+1.04.01+AM.png Experiments https://images.squarespace-cdn.com/content/v1/5d7bfb383197e14bd4e5f2e3/1638311914286-05UEKM6V4F4I8NG17SU0/Screen+Shot+2021-11-30+at+5.35.57+PM.png Experiments This is the main screen of Laundry Connect 2. All laundry locations are visible, showing the percent of dryers and washers available. This is a huge improvement from Laundry Connect because it just…didn’t have a summary page. https://images.squarespace-cdn.com/content/v1/5d7bfb383197e14bd4e5f2e3/1675289967830-4Q4VVXKPIW3CH20QUN5E/IMG_1724.jpeg Experiments https://images.squarespace-cdn.com/content/v1/5d7bfb383197e14bd4e5f2e3/1681423169145-NMECPJECNC25D283MCQT/Screenshot+2023-04-13+at+5.58.08+PM.png Experiments And here’s the WPI purity test page. It’s pretty simple, just built with MUI and then themed to get the WPI colors on the topbar and checkboxes. As mentioned earlier, the instructions say that the test is only for things you’ve done during your time at WPI. In the spirit of the rice purity test, it also tells you that this is not a bucket list. Do not ask who Robert Foisie is. After that comes the actual list of questions. If you’ve done whatever is questioned there, you check it off. Rinse and repeat for the rest of the test. https://images.squarespace-cdn.com/content/v1/5d7bfb383197e14bd4e5f2e3/1706390232480-HZNBS6U6BB5HJNHJXFSK/Screenshot+2024-01-27+at+4.16.41%E2%80%AFPM.png Experiments Here it is…the beautiful website. The design is pretty simple - a box at the top telling you if Uranus is in retrograde, and then details on the 8 other planets (yes, Pluto IS a planet) and their retrograde status. Also shown is the switch date, for when a planet will enter/exit retrograde. The background image is also Uranus (imaged by Voyager 2 in 1984). Since Uranus has quite the unfortunate pronunciation, I ensured that all jokes on the website crack into this. The top box also has jokes depending on if Uranus is in retrograde or not. Generally, Uranus being in retrograde = you can be delusional, but not in retrograde = sad. There’s about ten of them for each retrograde status, and one is randomly picked when you load the site. https://images.squarespace-cdn.com/content/v1/5d7bfb383197e14bd4e5f2e3/1774665791834-BHP0GN1M4JDERSBBUDW9/Screenshot+2025-12-29+at+6.22.15%E2%80%AFPM.png Experiments Let’s start with the homepage of the UI. It’s made in React with Mantine. The frontend is largely vibe coded, as I did the backend by hand and I coded enough frontends for the year. It’s not public, it does the trick, and it’s been generated for the low price of free with Gemini & Codex, so that’s a good win in my book. The first box is tower status, which shows what the LEGO Eiffel Tower is doing. This includes details on the schedule & current preset it’s running, or if the cronjobs are running, paused (until the next day), or stopped, with buttons below that to control such state. The tower has different schedules for different times of year, and for special holidays with holiday lighting presets. I’ve done a lot of work to ensure that the tower is matching up to the real Eiffel Tower - thankfully, there’s a webcam on YouTube pointed at the tower so I can verify what I’m doing! Below that is the list of upcoming jobs to execute, which includes which preset it’ll be set to, the execution time, and options to pause & delete a specific cronjob. https://owenthe.dev/blog daily 0.75 2026-03-08 https://owenthe.dev/blog/in-defense-of-the-ipad-air monthly 0.5 2026-03-08 https://owenthe.dev/blog/a-review-of-the-brickstuff-lego-eiffel-tower-lighting-kit monthly 0.5 2025-11-25 https://images.squarespace-cdn.com/content/v1/5d7bfb383197e14bd4e5f2e3/85691630-ee5e-4594-9384-e02f10cfe77a/Screenshot+2025-11-25+at+12.40.25%E2%80%AFAM.png Blog - A review of the Brickstuff Lego Eiffel Tower Lighting Kit - Make it stand out Whatever it is, the way you tell your story online can make all the difference. https://images.squarespace-cdn.com/content/v1/5d7bfb383197e14bd4e5f2e3/b8d1c78c-1522-44c4-a632-11fa6f16171d/Screenshot+2025-11-25+at+12.47.32%E2%80%AFAM.png Blog - A review of the Brickstuff Lego Eiffel Tower Lighting Kit - Make it stand out Whatever it is, the way you tell your story online can make all the difference. https://images.squarespace-cdn.com/content/v1/5d7bfb383197e14bd4e5f2e3/38c363ad-aa8f-4547-8de9-0c9169d6eab7/IMG_0663.jpeg Blog - A review of the Brickstuff Lego Eiffel Tower Lighting Kit - Make it stand out Sorry for the really long image Squarespace kinda sucks at images https://images.squarespace-cdn.com/content/v1/5d7bfb383197e14bd4e5f2e3/932d201d-6ff5-4557-a087-7a6c64fd0ebd/Screenshot+2025-11-25+at+12.54.07%E2%80%AFAM.png Blog - A review of the Brickstuff Lego Eiffel Tower Lighting Kit - Make it stand out Whatever it is, the way you tell your story online can make all the difference. https://images.squarespace-cdn.com/content/v1/5d7bfb383197e14bd4e5f2e3/2ff1b5e3-8614-4c4d-ab83-97cfa0a028de/Screenshot+2025-11-25+at+1.03.49%E2%80%AFAM.png Blog - A review of the Brickstuff Lego Eiffel Tower Lighting Kit - Make it stand out Whatever it is, the way you tell your story online can make all the difference. https://owenthe.dev/blog/why-a-cheap-ssd-is-the-worlds-best-thumb-drive monthly 0.5 2023-10-17 https://images.squarespace-cdn.com/content/v1/5d7bfb383197e14bd4e5f2e3/ca9433a6-24f1-43cb-85b9-179dc155f7e0/Screenshot+2023-10-17+at+1.04.35%E2%80%AFPM.png Blog - Why a cheap SSD is the world's best thumb drive. - Make it stand out Whatever it is, the way you tell your story online can make all the difference. https://images.squarespace-cdn.com/content/v1/5d7bfb383197e14bd4e5f2e3/450d2c8c-05bd-4965-8d59-e3584151537e/Screenshot+2023-10-17+at+1.05.26%E2%80%AFPM.png Blog - Why a cheap SSD is the world's best thumb drive. - Make it stand out Whatever it is, the way you tell your story online can make all the difference. https://images.squarespace-cdn.com/content/v1/5d7bfb383197e14bd4e5f2e3/e4d95157-70ee-42ed-81e9-5d07e8efec61/Screenshot+2023-10-17+at+1.08.44%E2%80%AFPM.png Blog - Why a cheap SSD is the world's best thumb drive. - Make it stand out Whatever it is, the way you tell your story online can make all the difference. https://owenthe.dev/blog/an-honest-letter-to-smart-tv-manufacturers monthly 0.5 2023-06-28 https://owenthe.dev/blog/dji-mini-3-cool-drone monthly 0.5 2023-05-17 https://owenthe.dev/blog/fixing-a-very-odd-issue-with-macos-ventura-and-firefoxdavinci-resolve-crashing monthly 0.5 2023-03-07 https://owenthe.dev/blog/the-curious-tale-of-selling-a-phone-on-swappa-and-having-it-be-resold-for-100-more monthly 0.5 2023-04-10 https://images.squarespace-cdn.com/content/v1/5d7bfb383197e14bd4e5f2e3/2001e0a5-ee07-40c2-93c8-c87055468aaa/Screenshot+2023-03-07+at+4.52.00+PM.png Blog - The curious tale of selling a phone on Swappa and having it be resold for $100 more - Make it stand out Whatever it is, the way you tell your story online can make all the difference. https://images.squarespace-cdn.com/content/v1/5d7bfb383197e14bd4e5f2e3/a9819f4b-921b-471a-a112-a4a4a92c5e59/Screenshot+2023-03-07+at+5.06.27+PM.png Blog - The curious tale of selling a phone on Swappa and having it be resold for $100 more - Make it stand out Whatever it is, the way you tell your story online can make all the difference. https://images.squarespace-cdn.com/content/v1/5d7bfb383197e14bd4e5f2e3/d7f2e208-1bd3-4aab-b0ee-0f17ea13aec5/Screenshot+2023-03-07+at+5.02.21+PM.png Blog - The curious tale of selling a phone on Swappa and having it be resold for $100 more - Make it stand out Whatever it is, the way you tell your story online can make all the difference. https://owenthe.dev/blog/ive-been-using-the-iphone-13-mini-for-2-months-now-and-i-love-mini-phones monthly 0.5 2022-08-05 https://owenthe.dev/blog/the-iphone-13-mini-and-pro-max-two-different-worlds-i-have-both monthly 0.5 2022-05-29 https://owenthe.dev/blog/migrating-owenthedev-nameservices-to-cloudflare monthly 0.5 2022-01-20 https://owenthe.dev/blog/welcome-to-the-new-owenthedev monthly 0.5 2021-05-29 https://owenthe.dev/blog/april-fools-2021-on-my-projects monthly 0.5 2021-04-02 https://images.squarespace-cdn.com/content/v1/5d7bfb383197e14bd4e5f2e3/1617325473011-QHJMHOVCBMMV6AMRAIX6/Screen+Shot+2021-04-01+at+8.51.41+PM.png Blog - April Fools 2021 on my projects https://images.squarespace-cdn.com/content/v1/5d7bfb383197e14bd4e5f2e3/1617325515150-76XJGZTTVOG1W7868H73/Screen+Shot+2021-04-01+at+8.51.57+PM.png Blog - April Fools 2021 on my projects https://images.squarespace-cdn.com/content/v1/5d7bfb383197e14bd4e5f2e3/1617325598346-WKIGFERDDX2D1D21V257/Screen+Shot+2021-04-01+at+8.52.22+PM.png Blog - April Fools 2021 on my projects https://images.squarespace-cdn.com/content/v1/5d7bfb383197e14bd4e5f2e3/1617325622731-IWM6JFW7UIF9YFORYT5Z/Screen+Shot+2021-04-01+at+8.53.00+PM.png Blog - April Fools 2021 on my projects https://images.squarespace-cdn.com/content/v1/5d7bfb383197e14bd4e5f2e3/1617325905203-Q7HBP7F83HJ6C4RI8S3V/Screen+Shot+2021-04-01+at+8.53.15+PM.png Blog - April Fools 2021 on my projects https://images.squarespace-cdn.com/content/v1/5d7bfb383197e14bd4e5f2e3/1617325991438-6UYLI9MJH3FUY4LV6NF5/Screen+Shot+2021-04-01+at+8.53.24+PM.png Blog - April Fools 2021 on my projects https://images.squarespace-cdn.com/content/v1/5d7bfb383197e14bd4e5f2e3/1617325971975-RESU2BKFKW6LQXOXRB1J/Screen+Shot+2021-04-01+at+8.53.31+PM.png Blog - April Fools 2021 on my projects https://owenthe.dev/blog/welcome-to-the-new-blog monthly 0.5 2021-04-02 https://owenthe.dev/trackeasterbunnycc-version-5 daily 0.75 2021-08-10 https://images.squarespace-cdn.com/content/v1/5d7bfb383197e14bd4e5f2e3/1618528587091-VFGRKN43GYGUW64BPM28/Screen+Shot+2021-04-15+at+7.06.17+PM.png track.easterbunny.cc (Version 5) track.easterbunny.cc Version 5 virtually looks the same from Version 4. I continued to use Material Design Bootstrap 4 for the lightweight design. The main controls of the tracker are in the bottom left in a vertical stack - the order the same from last year. The only change was the addition of a button in the right-most box. This allows you to change the metric displayed during tracking, with five metrics to choose from. The first (and default) metric is baskets delivered. The baskets delivered metric got a nice overhaul from v4, being directly influenced by the population of the stops. This meant the baskets delivered metric was super accurate. https://images.squarespace-cdn.com/content/v1/5d7bfb383197e14bd4e5f2e3/1618528587091-VFGRKN43GYGUW64BPM28/Screen+Shot+2021-04-15+at+7.06.17+PM.png track.easterbunny.cc (Version 5) track.easterbunny.cc Version 5 virtually looks the same from Version 4. I continued to use Material Design Bootstrap 4 for the lightweight design. The main controls of the tracker are in the bottom left in a vertical stack - the order the same from last year. The only change was the addition of a button in the right-most box. This allows you to change the metric displayed during tracking, with five metrics to choose from. The first (and default) metric is baskets delivered. The baskets delivered metric got a nice overhaul from v4, being directly influenced by the population of the stops. This meant the baskets delivered metric was super accurate. https://images.squarespace-cdn.com/content/v1/5d7bfb383197e14bd4e5f2e3/1618528670483-HTJEQA2LSNHJ5R4NPEM5/Screen+Shot+2021-04-15+at+7.06.37+PM.png track.easterbunny.cc (Version 5) The second metric here is carrots eaten - basically the baskets delivered count divided by ~125, with some variation so it’s not a direct ratio. https://images.squarespace-cdn.com/content/v1/5d7bfb383197e14bd4e5f2e3/1618528732996-K70KBDM9OSSG0V2L1PMZ/Screen+Shot+2021-04-15+at+7.06.42+PM.png track.easterbunny.cc (Version 5) The third metric up is distance traveled. I had to do some localization efforts here, as it’s distance traveled in the US, but distance travelled outside of the US. https://images.squarespace-cdn.com/content/v1/5d7bfb383197e14bd4e5f2e3/1618528868785-ZFXIO5WS126AOCGN7IJZ/Screen+Shot+2021-04-15+at+7.06.48+PM.png track.easterbunny.cc (Version 5) Speed is the fourth metric. This was truly accurate, using the Haversine formula to get distance between two stops. I added in a random +/- 0.01% variation every 250ms, just so the speed meter was changing a bit here and there. https://images.squarespace-cdn.com/content/v1/5d7bfb383197e14bd4e5f2e3/1618528888523-95AOG9DEBZJ08BYZOBV0/Screen+Shot+2021-04-15+at+7.06.55+PM.png track.easterbunny.cc (Version 5) Distance from you is the final metric. A users’ location is determined by their IP location, as that’s good enough for the arrival estimate. For distance from you, this gets a bit trickier. MaxMind (the database I use) has an accuracy rating, so the metric displays “Under x km/mi” when the Easter Bunny is within the accuracy rating of the IP location, multiplied by 5. So, if my IP location accuracy is 20km, the metric would display “Under 100 km” when the EB is <100 km from my determined IP location. It’s a clever solution to avoid inaccuracies in this methodology. https://images.squarespace-cdn.com/content/v1/5d7bfb383197e14bd4e5f2e3/1618528945516-WJCUNCEQYZQG84Z7BCTO/Screen+Shot+2021-04-15+at+7.07.12+PM.png track.easterbunny.cc (Version 5) The settings page got a major rework compared to Version 4. On the left, iconography and shorter text defines each section. Additionally, I cut down on excess text in the descriptions for each setting. Otherwise, there’s some extra settings to reflect changes made from v4 to v5. https://images.squarespace-cdn.com/content/v1/5d7bfb383197e14bd4e5f2e3/1618529002141-B6LQCN1W1W245PLPH0O0/Screen+Shot+2021-04-15+at+7.07.23+PM.png track.easterbunny.cc (Version 5) The map settings have some additional options from last year. The default zoom level is now customizable when the tracker loads. On Chrome, an option to reduce the grey lines in the map (due to page zoom) is also available - at the expense of the zoom buttons disappearing. https://images.squarespace-cdn.com/content/v1/5d7bfb383197e14bd4e5f2e3/1628628742571-1Q9PZT6M7TJ4IDLC9RX0/Screen+Shot+2021-08-10+at+4.52.07+PM.png track.easterbunny.cc (Version 5) The Metrics tab is new for Version 5. It contains two settings - one for changing the metric displayed (this is how it’s changed on mobile devices - the button isn’t visible), and if metrics should be displayed in the last seen/next stop boxes on smaller devices. https://images.squarespace-cdn.com/content/v1/5d7bfb383197e14bd4e5f2e3/1618529043670-TDQTVBDKTFFVDY31KSXX/Screen+Shot+2021-04-15+at+7.07.35+PM.png track.easterbunny.cc (Version 5) The reset section is identical to Version 4. However, the modals presented to the user were changed, and are more descriptive about what’s changing. I also updated the optimized stream settings to reflect what people used on their streams for v4. https://images.squarespace-cdn.com/content/v1/5d7bfb383197e14bd4e5f2e3/1628629169334-IDI9YA0NN6ROFMOYL5AJ/IMG_1541.PNG track.easterbunny.cc (Version 5) Here’s what the settings page looks like on mobile devices. The iconography really helps in these situations. https://images.squarespace-cdn.com/content/v1/5d7bfb383197e14bd4e5f2e3/1628628919222-B45N7IBFWZ85U8XVGLUJ/IMG_0006.PNG track.easterbunny.cc (Version 5) Here’s what metrics on mobile look like. It goes above the Easter Bunny arrival text. There’s no point in having a button to do easy switching, as the tap target would be ridiculously small. As such, the metrics section is necessary in settings. https://images.squarespace-cdn.com/content/v1/5d7bfb383197e14bd4e5f2e3/1618529117522-I83OFKTP7LSTW1EGK7MK/Screen+Shot+2021-04-15+at+11.25.12+PM.png track.easterbunny.cc (Version 5) The estimated arrival time feature got some updates. Similar to last year, it decrements in half-hour steps, going to 1 hour out. After that, it decrements in 15-minute steps, going to 30 minutes out. Once that threshold has been passed, it updates to “The Easter Bunny will arrive shortly!”. https://images.squarespace-cdn.com/content/v1/5d7bfb383197e14bd4e5f2e3/1618529160412-XE9ZBZQWCPC7QXM8TEMF/Screen+Shot+2021-04-15+at+11.45.23+PM.png track.easterbunny.cc (Version 5) The most notable change is that the text now goes to “The Easter Bunny has arrived in your area!” when the Easter Bunny is +/- 10 minutes from a users nearest stop. In v4, “The Easter Bunny will arrive shortly!” text disappeared after reaching that nearest stop. Especially with the increased number of stops in v5, this helped ensure that “The Easter Bunny will arrive shortly!” text didn’t disappear prematurely or too late, and instead, just approximated that the EB arrived in your area. https://images.squarespace-cdn.com/content/v1/5d7bfb383197e14bd4e5f2e3/1618529281069-SDSL9Y2XCQQ0T0DY6HD8/Screen+Shot+2021-04-15+at+11.45.55+PM.png track.easterbunny.cc (Version 5) The ESD (Extended Stop Data) system got a nice update in v5. I added navigation arrows to the top on larger devices, so a user could easily navigate between stops. Having an excerpt from Wikipedia was a great addition in v4, but I manually did all the work. This meant that the length of that excerpt could vary widely! In v5, I made a script to grab the excerpt automatically, using Regex filtering to get rid of pronunciations (with a ~99% accuracy rate), then a manual pass from me, before going through the route compiler to remove attribution text ([1], [2], etc). Finally, the weather and elevation data is localized. In this example, it’s in Fahrenheit. https://images.squarespace-cdn.com/content/v1/5d7bfb383197e14bd4e5f2e3/1618529380005-PI5KIO5TYPC4VCAU5T2L/Screen+Shot+2021-04-15+at+7.20.02+PM.png track.easterbunny.cc (Version 5) In this example, now the data is in Celsius. Localization is entirely configurable in settings, allowing you to change between the imperial and metric unit systems easily. A half-baked feature from v4 makes its appearance in v5 - local arrival times. In v4, you could hover over the arrival time with a mouse to get the local arrival time, but it’s on display in v5 (configurable by settings). Moment.JS is used for all the time formatting stuff. https://images.squarespace-cdn.com/content/v1/5d7bfb383197e14bd4e5f2e3/1618529434418-4ZRWC2PIDQGXRONJ2RO2/Screen+Shot+2021-04-15+at+6.50.47+PM.png track.easterbunny.cc (Version 5) The localization affects other parts of the tracker too. The distance from you, distance traveled, and speed metrics all adapt to the imperial/metric unit systems. In this example, distance from you is in metric. https://images.squarespace-cdn.com/content/v1/5d7bfb383197e14bd4e5f2e3/1618529588680-KHU105YJIRXVETQG0D0S/image0000000.jpg track.easterbunny.cc (Version 5) Although the tracker remains in English (and will stay that way for a while), I used Moment.JS to localize time formatting to a user’s region. This screenshot is from an iPad in the UK, so you can see the UK time format. This screenshot was taken early on in v5 development, so many changes to the stop information window weren’t implemented yet. https://images.squarespace-cdn.com/content/v1/5d7bfb383197e14bd4e5f2e3/1618529833314-925L5HUQOTP6T7O3J9V5/Screen+Shot+2021-04-16+at+6.05.08+AM.png track.easterbunny.cc (Version 5) And that’s been track.easterbunny.cc Version 5! For the third year of operation, it was wildly successful, even though my wallet didn’t enjoy the map bill ($600 a lot given I’m a solo developer, and that no ads were running on the site!) For Version 6, I’m planning on refactoring the tracker - as it’s quite the spaghetti mess! New features are on the table too, and looking into monetization to recoup some of the map costs. https://owenthe.dev/trackeasterbunnycc-v56 daily 0.75 2022-04-26 https://images.squarespace-cdn.com/content/v1/5d7bfb383197e14bd4e5f2e3/1651010489371-IUSXKWBF0HBICVXN8RYO/Screen+Shot+2022-04-26+at+6.01.17+PM.png track.easterbunny.cc (v5.6) This is the main tracker interface when you visit the website. The design of the tracker takes inspiration from the NORAD Santa Tracker while also keeping things as simple and clean as possible. The new color style from Google Maps was adopted this year. At it’s core, track.easterbunny.cc is a truly client-side tracker. That means that once the tracker loads, all the data and code needed to run the tracker until the end of tracking is stored by the client, and the tracker never reaches out to my server again. While this does mean the initial load without browser caching is ~2 MB, that’s a small price to pay given I’ve seen partially server-side trackers go down under high traffic loads. With the help of Cloudflare, I was able to get the tracker to basically only hit my origin server for the IP location API (more on this later). Between the 99+% cache rate on Cloudflare, plus the truly client-side design, this tracker is incredibly scalable. https://images.squarespace-cdn.com/content/v1/5d7bfb383197e14bd4e5f2e3/1651010489371-IUSXKWBF0HBICVXN8RYO/Screen+Shot+2022-04-26+at+6.01.17+PM.png track.easterbunny.cc (v5.6) This is the main tracker interface when you visit the website. The design of the tracker takes inspiration from the NORAD Santa Tracker while also keeping things as simple and clean as possible. The new color style from Google Maps was adopted this year. At it’s core, track.easterbunny.cc is a truly client-side tracker. That means that once the tracker loads, all the data and code needed to run the tracker until the end of tracking is stored by the client, and the tracker never reaches out to my server again. While this does mean the initial load without browser caching is ~2 MB, that’s a small price to pay given I’ve seen partially server-side trackers go down under high traffic loads. With the help of Cloudflare, I was able to get the tracker to basically only hit my origin server for the IP location API (more on this later). Between the 99+% cache rate on Cloudflare, plus the truly client-side design, this tracker is incredibly scalable. https://images.squarespace-cdn.com/content/v1/5d7bfb383197e14bd4e5f2e3/1651012058771-KONM3SRQGBR28SL1NSQN/Screen+Shot+2022-04-26+at+6.27.32+PM.png track.easterbunny.cc (v5.6) The Last Seen, Next Stop, and Baskets Delivered fields are pretty standard for any tracker. This year, I added the flag of the country for the last seen and next stop boxes. Additionally, the tracker’s updates (map & metrics) were sped up by 2x this year, with options for even smoother settings. https://images.squarespace-cdn.com/content/v1/5d7bfb383197e14bd4e5f2e3/1651010668940-E18SCZ4MM4D6RIDBJ6KR/Screen+Shot+2022-04-26+at+6.04.21+PM.png track.easterbunny.cc (v5.6) Clicking on the icon in the baskets delivered box changes the metric. You can cycle through five metrics - baskets delivered, carrots eaten, distance traveled, speed, and distance from you. The next stop houses the Easter Bunny’s arrival time estimate. This is calculated using your IP location from a custom IP location API, and then doing lots of math client-side to figure out the arrival time. The bottom left houses three buttons - one for uncentering/recentering the map on the Easter Bunny, one to open settings, and one to open an info window. The donate button is new for this year. https://images.squarespace-cdn.com/content/v1/5d7bfb383197e14bd4e5f2e3/1651010790434-VCJ9BV5IHYXWJVK7NSXS/Screen+Shot+2022-04-26+at+6.06.24+PM.png track.easterbunny.cc (v5.6) One of the flagship features of track.easterbunny.cc is the extensive customization. This is unheard of in any tracker, and users can basically change anything they want in the tracker to make their own experience. The settings window has four tabs for four distinct types of settings. The first, and most commonly used tab, is the tracker tab. This is where users can control the appearance of the tracker, how smooth the tracker runs, in addition to hiding the Easter Bunny arrival time on streams. https://images.squarespace-cdn.com/content/v1/5d7bfb383197e14bd4e5f2e3/1651010917349-EP9FASHML5BWPHWEB355/Screen+Shot+2022-04-26+at+6.06.43+PM.png track.easterbunny.cc (v5.6) The map tab of settings has all the settings you’d need to control how the map looks. This includes if the Easter Bunny icon bounces, the map type, and even changing the default zoom level of the map! https://images.squarespace-cdn.com/content/v1/5d7bfb383197e14bd4e5f2e3/1651010919090-IXR9NPLK2GE5U02H49ZM/Screen+Shot+2022-04-26+at+6.06.47+PM.png track.easterbunny.cc (v5.6) The metrics tab controls all the metrics of the tracker - including which metric shows up, where they show up, and if certain metrics show up in the stop information window. https://images.squarespace-cdn.com/content/v1/5d7bfb383197e14bd4e5f2e3/1651010920792-9QY8I6L16RY2V6I23WY1/Screen+Shot+2022-04-26+at+6.06.53+PM.png track.easterbunny.cc (v5.6) The last tab (the reset tab) does what it says. However, because a lot of people stream (and want to stream) track.easterbunny.cc, I’ve included a handy reset button to the settings that most people use on streams. Every year, I go through all the track.easterbunny.cc streams on YouTube to see what settings most people use, and change the defaults every year. For instance, in 2022, most streams used the highest frequency of updates, so I’ll be adding that to the default streaming settings in 2023. https://images.squarespace-cdn.com/content/v1/5d7bfb383197e14bd4e5f2e3/1651010921767-7X8DI35RSCEEZSWXZA0Y/Screen+Shot+2022-04-26+at+6.07.06+PM.png track.easterbunny.cc (v5.6) And of course, track.easterbunny.cc remains the only tracker to have a full on dark mode. The buttons remain light to provide better contrast. https://images.squarespace-cdn.com/content/v1/5d7bfb383197e14bd4e5f2e3/1651011258735-QVNVIMYJPZGI67IL8IFL/Screen+Shot+2022-04-26+at+6.14.11+PM.png track.easterbunny.cc (v5.6) track.easterbunny.cc has a catalogue of about 900 stops that the Easter Bunny visits - which is 2x to what the nearest competitor has. For each stop, you can click on the basket icon on the map and launch the stop information window. Inside the window, stop basics are shown - when the Easter Bunny got there (the local time arrival is a setting you have to enable), the weather, population, and elevation. A short 4 sentence description from Wikipedia is gathered so you can get a gist of the stop, and a Wikipedia link is provided to learn more. https://images.squarespace-cdn.com/content/v1/5d7bfb383197e14bd4e5f2e3/1651011416901-R8R8N88CVDK73X3YW2XH/Screen+Shot+2022-04-26+at+6.16.53+PM.png track.easterbunny.cc (v5.6) At the top right of the stop information window, there’s navigation arrows to quickly navigate through the Easter Bunny’s route. It’s a good time to mention that this tracker also has localization for units other than American ones. The tracker will automatically (or manually via settings) localize the distance from you, speed, weather, and elevation into your preferred unit system. Additionally, number formatting and time formatting is also localized! The tracker is only available in English nonetheless. Translating is not a huge priority for me right now, and is very time intensive. https://images.squarespace-cdn.com/content/v1/5d7bfb383197e14bd4e5f2e3/1651011623554-NJ2ILVGN95YIEJX6FVKR/Screen+Shot+2022-04-26+at+6.20.19+PM.png track.easterbunny.cc (v5.6) Given that mobile usage outpaced desktop usage 3-to-1 this year, I’ve continued to make sure the tracker is optimized for usage on mobile devices. Mobile devices switch to only showing one box - but then put the metrics data as small text. And, by default, mobile devices have a default zoom level one higher than desktop for a relatively similar perspective. The settings menu is also optimized for mobile - having the 4 different tabs at the top of the modal (instead of beside). https://images.squarespace-cdn.com/content/v1/5d7bfb383197e14bd4e5f2e3/1651011757556-7P7KF785E8B1SG7QDUE1/Screen+Shot+2022-04-26+at+6.22.34+PM.png track.easterbunny.cc (v5.6) I also took into consideration users putting the tracker in landscape on mobile devices. Without any interventions, the Easter Bunny icon would get cut off by the top boxes when the screen height got under about 450px. When the screen height starts to go under 500px, the Easter Bunny icon is automatically shifted down, and centered on that shifted down point. In v5.6, this system was overhauled to work on all browsers on any device, instead of just happening on orientation changes. https://images.squarespace-cdn.com/content/v1/5d7bfb383197e14bd4e5f2e3/1651011972021-MG28F9008Q7NGOJ41EZ5/Screen+Shot+2022-04-26+at+6.26.09+PM.png track.easterbunny.cc (v5.6) Design considerations were also made for people on tablet devices that can show two boxes. In this case, the next stop and metrics boxes are shown. This is a change from last year, where the last seen and next stop boxes were shown with metrics in small text. I basically decided that the last seen box isn’t super helpful, and much more readable metrics was a better use of space. https://images.squarespace-cdn.com/content/v1/5d7bfb383197e14bd4e5f2e3/1651012571830-C9QHJVFI4FF191FI5N99/Screen+Shot+2022-04-26+at+6.36.03+PM.png track.easterbunny.cc (v5.6) Now, remember that IP location API we talked about earlier? It has a second purpose. This API is called every time the tracker is loaded to the point where JavaScript is enabled and working. In Cloudflare, it’s intentionally set up to bypass caching, so for every tracker load, my origin server gets queried once for an IP location. What I then realized was that you could make a pretty nifty hit counter out of this. So, for every call during tracking, it’ll atomically increment a hit counter on the disk. That’s it. Very simple. From that, I then built the custom TEBCC Hit Insights, which was basically a real-time hit counter to see how the tracker was doing in terms of hits. It starts with the hit counter updated every 20 seconds in the top left. Then, metrics on hits in the last hour (including hour-over-hour change), hits per minute/second, and the estimated Google Maps API cost are shown. Last but not least, because I am Owen, there’s graphs. There’s always gotta be graphs. https://images.squarespace-cdn.com/content/v1/5d7bfb383197e14bd4e5f2e3/1651012586596-1S0Y66Z4LUOYWQJV8G8P/Screen+Shot+2022-04-26+at+6.36.22+PM.png track.easterbunny.cc (v5.6) Graphs further down the page show the hits per minute and hits per hour. Data for these graphs is collected by calling the API every minute to get the latest hit count, logging that hit count, therefore creating historical data. With that historical data, the client-side performs calculations for all the extra data. To maintain the atomic incrementing, I needed to call the API instead of opening the file manually to ensure the hit count didn’t change while we were reading it. All API methods that dealt with the hit counter & historical hit counter data had locks to prevent race conditions. I actually had to implement locks, as at the start of tracking, there were about 200 users hitting the server in about 5 seconds, so there was the real chance there could be race conditions. Otherwise, the tracker was loaded every ~226ms at peak, so locks weren’t REALLY needed (the open/increment/save operation takes 10ms or less). https://images.squarespace-cdn.com/content/v1/5d7bfb383197e14bd4e5f2e3/1651010056884-83OL9TSUAR8U2N9WQGBX/Screen+Shot+2022-04-26+at+5.54.06+PM.png track.easterbunny.cc (v5.6) Behind the scenes, track.easterbunny.cc made extensive use of GitLab CI Pipelines to make the entire development process streamlined. Website deployments were all controlled via GitLab CIs that used SFTP upload to the web server. The route compiler entirely sat behind a relatively complex CI pipeline with 5 stages. Each stage of the compilation process can be enabled/disabled with a configuration file, in addition to other options. Having scheduled pipelines to compile the route right before tracking was a huge help. https://images.squarespace-cdn.com/content/v1/5d7bfb383197e14bd4e5f2e3/1651013449981-UZPXOX4IN3PIC5PKFUO6/Screen+Shot+2022-04-26+at+6.50.09+PM.png track.easterbunny.cc (v5.6) And that’s track.easterbunny.cc, more specifically, Version 5.6. It’s a very cool project that’s quite diverse in what to do, and I continue to have tons of fun with it. After this year with 127,000 hits, track.easterbunny.cc has now received a combined 268,000 hits during the 112 hours of tracking in the last 4 years. Add up the post-tracking periods, and that count is easily over 300,000 hits. At this point, you should take a look at the articles for v3/v4/v5! They’ll all show the iterations in design, and go more into how certain features are implemented. https://owenthe.dev/trackeasterbunnycc-v6 daily 0.75 2023-09-07 https://images.squarespace-cdn.com/content/v1/5d7bfb383197e14bd4e5f2e3/1681422981485-5D7ZNILVPNT19T3BEB6I/Screen+Shot+2023-04-09+at+6.00.11+AM.png track.easterbunny.cc (v6) https://images.squarespace-cdn.com/content/v1/5d7bfb383197e14bd4e5f2e3/1681422951635-FHOKOHJ19T77US8I2KW1/Screen+Shot+2023-04-08+at+6.20.19+PM.png track.easterbunny.cc (v6) track.easterbunny.cc Version 6 starts with a reskinned user interface that’s new yet familiar. Across the top are the three boxes that define the UI - last stop on the left, next stop in the middle, and metrics on the right. This year, the UI was reskinned with Material Design Bootstrap 5. It’s a significant step up from MDB4 with more rounded corners, better contrasts in typography, and overall a cleaner interface. I made some minor updates to the UI otherwise which will be mentioned shortly. The only notable change to the UI here is that there are arrows to switch metrics now so you can go backwards and forwards. Also, note the buttons in the bottom left - this is generally how you control the tracker and get into the different menus. https://images.squarespace-cdn.com/content/v1/5d7bfb383197e14bd4e5f2e3/1681406928484-L46IFN0DNEPMZOL4WI74/Screen+Shot+2023-04-08+at+6.20.55+PM.png 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. https://images.squarespace-cdn.com/content/v1/5d7bfb383197e14bd4e5f2e3/1681407330788-OUTT31SLIK0GGZOLO3QQ/Screen+Recording+2023-04-08+at+11.39.28+PM.gif track.easterbunny.cc (v6) 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. https://images.squarespace-cdn.com/content/v1/5d7bfb383197e14bd4e5f2e3/1681407157710-FV5SOL62N68WDLS1FV7A/Screen+Recording+2023-04-08+at+11.39.54+PM.gif track.easterbunny.cc (v6) 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. https://images.squarespace-cdn.com/content/v1/5d7bfb383197e14bd4e5f2e3/1681407692222-ZA9JJN9UFFPVF6GSTNMS/Screen+Shot+2023-04-08+at+6.21.12+PM.png track.easterbunny.cc (v6) 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). https://images.squarespace-cdn.com/content/v1/5d7bfb383197e14bd4e5f2e3/1681407857516-7MJRPJCGGK13YCT0PG2F/Screen+Shot+2023-04-08+at+6.21.23+PM.png track.easterbunny.cc (v6) 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. https://images.squarespace-cdn.com/content/v1/5d7bfb383197e14bd4e5f2e3/1681407943833-ESFJ1N8XX5516PJ9KP4I/Screen+Shot+2023-04-08+at+6.22.05+PM.png track.easterbunny.cc (v6) 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. https://images.squarespace-cdn.com/content/v1/5d7bfb383197e14bd4e5f2e3/1681421694617-76A23TTATKO2FSC0MGPZ/Screen+Shot+2023-04-08+at+11.46.39+PM.png track.easterbunny.cc (v6) 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. https://images.squarespace-cdn.com/content/v1/5d7bfb383197e14bd4e5f2e3/1681421699718-JDFTNUT6QFK7S84VN7OA/Screen+Shot+2023-04-08+at+11.47.27+PM.png track.easterbunny.cc (v6) 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! https://images.squarespace-cdn.com/content/v1/5d7bfb383197e14bd4e5f2e3/1681407952168-YL0BRVO03UXV4PKZDYPH/Screen+Shot+2023-04-08+at+6.22.16+PM.png track.easterbunny.cc (v6) 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. https://images.squarespace-cdn.com/content/v1/5d7bfb383197e14bd4e5f2e3/1681408120786-3SH5NO78GHMWIWRQD19X/Screen+Shot+2023-04-08+at+6.22.24+PM.png track.easterbunny.cc (v6) 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. https://images.squarespace-cdn.com/content/v1/5d7bfb383197e14bd4e5f2e3/1681408130479-ET73B0ALKOBETNE78B8E/Screen+Shot+2023-04-08+at+6.22.36+PM.png track.easterbunny.cc (v6) 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. https://images.squarespace-cdn.com/content/v1/5d7bfb383197e14bd4e5f2e3/1681408408013-6SITPG3IZILV1H81G5EF/Screen+Shot+2023-04-08+at+6.22.44+PM.png track.easterbunny.cc (v6) 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. https://images.squarespace-cdn.com/content/v1/5d7bfb383197e14bd4e5f2e3/1681408455156-WZN5F2PFJGN1TV0YFN9V/Screen+Shot+2023-04-08+at+6.22.53+PM.png track.easterbunny.cc (v6) 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. https://images.squarespace-cdn.com/content/v1/5d7bfb383197e14bd4e5f2e3/1681408459224-9S5ZG3I135I9MTDGLRRR/Screen+Shot+2023-04-08+at+6.23.01+PM.png track.easterbunny.cc (v6) 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. https://images.squarespace-cdn.com/content/v1/5d7bfb383197e14bd4e5f2e3/1681408611335-E5QH90KWAFDXVC59EY0J/Screen+Shot+2023-04-08+at+6.24.03+PM.png track.easterbunny.cc (v6) 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. https://images.squarespace-cdn.com/content/v1/5d7bfb383197e14bd4e5f2e3/1681408740678-EBUU9XBWORTBDXV4OGPF/Screen+Shot+2023-04-08+at+6.24.19+PM.png track.easterbunny.cc (v6) 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. https://images.squarespace-cdn.com/content/v1/5d7bfb383197e14bd4e5f2e3/1681408746254-ICVAKOXS6Q6XRNHZ4QJV/Screen+Shot+2023-04-08+at+6.25.01+PM.png track.easterbunny.cc (v6) 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. https://images.squarespace-cdn.com/content/v1/5d7bfb383197e14bd4e5f2e3/1681420983557-WTK5NTAQLV8PQ1J7U6K0/Screen+Shot+2023-04-08+at+6.25.22+PM.png track.easterbunny.cc (v6) 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! https://images.squarespace-cdn.com/content/v1/5d7bfb383197e14bd4e5f2e3/1681421210318-CJKZ12HUU8FKF86ZQD59/Screen+Shot+2023-04-08+at+11.35.50+PM.png track.easterbunny.cc (v6) 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. https://images.squarespace-cdn.com/content/v1/5d7bfb383197e14bd4e5f2e3/1681421213869-LEYTU8OQCOS9A0WO0G2L/Screen+Shot+2023-04-08+at+11.45.06+PM.png track.easterbunny.cc (v6) 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! https://images.squarespace-cdn.com/content/v1/5d7bfb383197e14bd4e5f2e3/1681421217478-E0BI4XLO0U1BVW99B3K1/Screen+Shot+2023-04-08+at+11.45.15+PM.png track.easterbunny.cc (v6) 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). https://images.squarespace-cdn.com/content/v1/5d7bfb383197e14bd4e5f2e3/1681421623107-NVXK795UO03P84NTFVBJ/Screen+Shot+2023-04-08+at+11.45.58+PM.png track.easterbunny.cc (v6) And when the Easter Bunny is very close to you, the distance from you metric gets quite excited. https://images.squarespace-cdn.com/content/v1/5d7bfb383197e14bd4e5f2e3/1681421169953-FX5Y735ICJIXZM691WXA/Screen+Shot+2023-04-08+at+11.21.20+PM.png track.easterbunny.cc (v6) 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! https://images.squarespace-cdn.com/content/v1/5d7bfb383197e14bd4e5f2e3/1681421186586-V9T2WY1VVHOARIRX1S6O/Screen+Shot+2023-04-08+at+11.20.27+PM.png track.easterbunny.cc (v6) 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. https://images.squarespace-cdn.com/content/v1/5d7bfb383197e14bd4e5f2e3/1681421190663-ND1XGOSDTS0IVEGNEXA0/Screen+Shot+2023-04-08+at+11.20.53+PM.png track.easterbunny.cc (v6) 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. https://images.squarespace-cdn.com/content/v1/5d7bfb383197e14bd4e5f2e3/1681421863018-M3NS15S5FVOBMSCUA1IC/Screen+Shot+2023-04-08+at+3.01.00+AM.png track.easterbunny.cc (v6) 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! https://images.squarespace-cdn.com/content/v1/5d7bfb383197e14bd4e5f2e3/1681421869465-T5XTJ219QMJLO0C7KIO9/Screen+Shot+2023-04-08+at+1.01.16+AM.png track.easterbunny.cc (v6) 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. https://images.squarespace-cdn.com/content/v1/5d7bfb383197e14bd4e5f2e3/1681422070008-1751VWUL1Q5WK0YH58RV/Screen+Recording+2023-04-08+at+1.59.37+AM.gif track.easterbunny.cc (v6) 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! https://images.squarespace-cdn.com/content/v1/5d7bfb383197e14bd4e5f2e3/1681421884908-2P5E84V4DCIQ2I59IC5P/Screen+Shot+2023-04-09+at+6.00.11+AM.png track.easterbunny.cc (v6) 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. https://owenthe.dev/trackeasterbunnycc-v7 daily 0.75 2024-04-04 https://images.squarespace-cdn.com/content/v1/5d7bfb383197e14bd4e5f2e3/1712258145286-1RC2WCFROBDAYQ0SQLVG/Screenshot+2024-03-30+at+8.16.33+PM.png track.easterbunny.cc (v7) track.easterbunny.cc Version 7 retained the same design that was introduced from Version 6 without any major changes. This article goes over all the changes made from Version 6 to Version 7, and will be light on details about how the rest of the tracker is designed and operates - so I recommend reading the Version 6 page to get the lowdown on all that info. Nonetheless - the basic UI of the tracker remained unchanged for this year. In the standard layout on desktop, three boxes at the top. Last stop on the left, next stop in the middle (with the Easter Bunny’s estimated arrival time), and the metric box on the right (showing Baskets delivered by default) https://images.squarespace-cdn.com/content/v1/5d7bfb383197e14bd4e5f2e3/1712258145286-1RC2WCFROBDAYQ0SQLVG/Screenshot+2024-03-30+at+8.16.33+PM.png track.easterbunny.cc (v7) track.easterbunny.cc Version 7 retained the same design that was introduced from Version 6 without any major changes. This article goes over all the changes made from Version 6 to Version 7, and will be light on details about how the rest of the tracker is designed and operates - so I recommend reading the Version 6 page to get the lowdown on all that info. Nonetheless - the basic UI of the tracker remained unchanged for this year. In the standard layout on desktop, three boxes at the top. Last stop on the left, next stop in the middle (with the Easter Bunny’s estimated arrival time), and the metric box on the right (showing Baskets delivered by default) https://images.squarespace-cdn.com/content/v1/5d7bfb383197e14bd4e5f2e3/1712258242293-Y20LYZKBPYVTUBBO6UWM/Screenshot+2024-03-30+at+8.17.01+PM.png track.easterbunny.cc (v7) The settings page got a minor rework from Version 6 to Version 7. One extra section got added - Stop Info, with settings relating to the Stop Info window moving here. Additionally, the order of the tabs in the settings window changed so that the more frequently accessed tabs were closer to the top. https://images.squarespace-cdn.com/content/v1/5d7bfb383197e14bd4e5f2e3/1712258611728-4FCB49NZCHUQYZ9UQ3ZS/Screenshot+2024-03-30+at+8.17.13+PM.png track.easterbunny.cc (v7) This is what the new Stop Info section contains - two settings that were previously in the tracker setting got moved here We’ll talk about the stop pronunciation settings very shortly! https://images.squarespace-cdn.com/content/v1/5d7bfb383197e14bd4e5f2e3/1712258249712-FQJ0O3WCI7KS2Y713O5S/Screenshot+2024-03-30+at+8.17.31+PM.png track.easterbunny.cc (v7) One of the biggest changes to track.easterbunny.cc Version 7 was finally having the ability to show multiple metrics at the same time. In prior versions of the tracker, users could choose between seeing one of five metrics. But if you wanted to keep tabs on all of them, you’d have to constantly flip between metrics. But not anymore with Version 7! The radios that were present in all previous version have moved to checkboxes, allowing you to see every metric at once. There’s also a “Hide value of distance from you metric” setting, which is useful for people who are streaming the tracker to avoid accidentally exposing their location. https://images.squarespace-cdn.com/content/v1/5d7bfb383197e14bd4e5f2e3/1712258266458-A3MYERN32XC8O0SQI6M0/Screenshot+2024-03-30+at+8.17.42+PM.png track.easterbunny.cc (v7) On desktop, this is what it would look like when all metrics were selected to be visible. Absolute game changer. Additionally, I made it clearer with the distance from you metric is being rendered using an IP location: rather than ~xxx miles, it’s now About xxx miles (or km). Kinda sucks this feature had to come in the last version of the tracker, but hey, better now than never! https://images.squarespace-cdn.com/content/v1/5d7bfb383197e14bd4e5f2e3/1712258270006-21CYEUOTM8X669V7LLEC/Screenshot+2024-03-30+at+8.17.55+PM.png track.easterbunny.cc (v7) This is what having all the metrics enabled looks like on mobile devices. In previous versions of the tracker, I had code that would shift the Easter Bunny down below the top box if your device’s height was too low on mobile devices. For this year, additional logic had to be built in to account for anywhere from 0-5 metrics being shown and how to handle shifting the Easter Bunny down on the screen. https://images.squarespace-cdn.com/content/v1/5d7bfb383197e14bd4e5f2e3/1712258591650-RGJQFC81N5P1ZTGY5F0F/Screenshot+2024-03-30+at+8.16.50+PM.png track.easterbunny.cc (v7) As was the case in every prior version of the tracker, clicking on a basket icon on the map throws up this stop information window. One of the coolest features in Version 7 was introducing a stop pronunciation button in this window. Especially for some global cities, it can be pretty hard to know how to pronounce them, so this feature attempts to solve that! The voices are generated using AWS Polly, which does a pretty good job of getting pronunciations correct. I generated them in six different English accents which correlated to the six English speaking regions that the tracker got the most hits from. The tracker looks at your browsers’ locale to determine which accent to use. Other than that, the stop info window largely remained unchanged from last year. https://images.squarespace-cdn.com/content/v1/5d7bfb383197e14bd4e5f2e3/1712258618387-JCZJCQCF31N72CGTQ4T7/Screenshot+2024-03-30+at+8.17.18+PM.png track.easterbunny.cc (v7) These are the two additional settings in the stop info window that control pronunciation settings. There’s a playback speed slider so you can globally change how fast the pronunciations run. You can also override the locale of the pronunciation here and pick from any one of the six locales up for offering. https://images.squarespace-cdn.com/content/v1/5d7bfb383197e14bd4e5f2e3/1712258870816-BAGFCSQX8OE7CLJE9QI7/Screenshot+2024-03-30+at+2.50.53+AM.png track.easterbunny.cc (v7) track.easterbunny.cc continues to be really the only tracker out there with an extensive “pre-tracking” experience - basically in the 3 hours leading to liftoff, updates on the Easter Bunny’s preparations are shown. Although this part of tracking doesn’t get a ton of hits, I still wanted to make it more interactive. For that, I added a metric box to pre-tracking, which shows the number of baskets wrapped and loaded depending on which stage of pre-tracking the tracker is in. https://images.squarespace-cdn.com/content/v1/5d7bfb383197e14bd4e5f2e3/1712258873736-3AYYYPY3YUB8NXV4E60T/Screenshot+2024-03-30+at+3.51.03+AM.png track.easterbunny.cc (v7) At about 1.5 hours into pre-tracking (when the Easter Bunny’s helpers finish wrapping baskets), the metric switches to baskets loaded. Once that process is complete (~30-40 minutes before liftoff), the metric is frozen at what will be the final baskets delivered count - a really cool attention to detail thing (that also required some nifty sheets magic to make it work!). https://images.squarespace-cdn.com/content/v1/5d7bfb383197e14bd4e5f2e3/1712258898167-WDK29A2NMXCLBUAJSYIW/Screenshot+2024-03-31+at+3.57.24+PM.png track.easterbunny.cc (v7) When tracking is over, I coded the tracker to show a pop-up indicating to users that the tracker would be shut down after this year. Here is that pop-up in action. https://images.squarespace-cdn.com/content/v1/5d7bfb383197e14bd4e5f2e3/1712258907074-CM1HLCFCKUN22I1HS0AO/Screenshot+2024-04-04+at+3.02.01+PM.png track.easterbunny.cc (v7) As has previously been the case, track.easterbunny.cc nominally reaches out to the Geo API whenever its loaded. The Geo API is an API I built to serve a users approximate location (via IP address) to power the estimated arrival time. However, it also has turned into the de-facto hit counter for the tracker - after all, when the tracker loads far enough (and with JS enabled), the Geo API is called and we can be sure that was a hit. The insights dashboard was a custom dashboard I made a couple years ago to keep tabs on hits during tracking. This is what the interface looked like for this year - showing lots of data on how the tracker performed during tracking. https://images.squarespace-cdn.com/content/v1/5d7bfb383197e14bd4e5f2e3/1712258909955-L47M2VY3LJ5JQVQ3TTMO/Screenshot+2024-04-04+at+3.02.21+PM.png track.easterbunny.cc (v7) Below the main hit counter graph are a bunch of extra graphs - hit per minute/hour graphs, growth compared to 2023 (in hindsight, this should’ve been 2022, but I’m surprised given the issues we had last year the turnout the tracker got!). There’s also the oh-so-lovely estimated Google Maps API cost graph, which shows in real-time how annihilated my wallet is. https://images.squarespace-cdn.com/content/v1/5d7bfb383197e14bd4e5f2e3/1712258913094-F5GPBASCK1JF1RFMD4ZB/Screenshot+2024-04-04+at+3.02.35+PM.png track.easterbunny.cc (v7) And that’s track.easterbunny.cc Version 7, the last version of this amazing project I’ve been running. This has been by far one of my most memorable and amazing projects - it genuinely taught me so much about web development and how to make a project scale for the web. Getting 140,000 hits in the final year was such an amazing way to go out - and it was insane to almost hit 300 hits/minute! Truly some insane numbers - and this doesn’t count the people on YouTube who were streaming it as well. While shutting down this tracker wasn’t an easy decision and I’m sad to do it (especially given the growth in the final year of operations!), I wanted this project to go out on such an amazing note - and it did exactly that. track.easterbunny.cc remains an open-source project though, and the source code for Version 7 will be released over Summer 2024, empowering others to make all sorts of exciting Easter Bunny Trackers! At the end of all this, I’m so incredibly proud of myself for making this project, maintaining and running it for 5+ years, and learning so much from making this tracker. But most of all, I’m so proud that this project genuinely left the world a little bit better than I found it. Dozens of people have told me about the memories they have (and will have!) from using this tracker - and I can only assume tens of thousands more will have these same memories, just like the ones I had on Christmas Eve as a kid when tracking NORAD. Hearing and knowing this is so incredibly special - it’s truly an honor to be able to have a positive impact on the world with what I built. https://owenthe.dev/about daily 0.75 2025-11-29 https://owenthe.dev/contact daily 0.75 2024-01-31 https://owenthe.dev/source-code daily 0.75 2023-04-10 https://owenthe.dev/not-found daily 0.75 2021-05-30 https://owenthe.dev/dovetails-dlc daily 0.75 2025-11-29 https://owenthe.dev/pyweather-archives daily 0.75 2023-12-04 https://owenthe.dev/home-network-setup daily 0.75 2025-11-06 https://owenthe.dev/pihole-block-pages daily 0.75 2025-11-29 https://owenthe.dev/archive daily 0.75 2021-11-30