WeatherSense

-

image

WeatherSense's revamped UI was inspired by MerrySky, which itself was inspired by the OG: DarkSky.

Every five years or so, I’ve been rebuilding the same weather web app. It’s interesting to see how it has evolved.

WeatherSense is the latest version of my weather app:

What’s stayed the same

  • Displays historical weather data next to forecast
  • (Attempts to) automatically infer your location
  • Simple toggle between between C/F units
  • Unique format for nearby dates. “Su-11” for Sunday (May) 11th

What’s new

I started to prefer other weather apps because UltraWeather wasn’t fine-grained enough. In addition, I wanted more data like air quality and dew point. So I added the missing information:

  • More granular data: hourly instead of daily
  • Air Quality Index: AQI (both EU and US scales)
  • Dew point (and relative humidity)
  • Precipitation amount + probability
  • Sunrise, sunset
  • 28 different weather conditions vs. previous 9

It was interesting to compare the “feels like” temperature with the plain temperature, but I dropped it because it wasn’t that useful.

While I was at it, I added two major features:

  • Precipitation radar (added on a whim after seeing it in MerrySky. It seemed like it would be useful and simple to integrate.)
  • Use device location (GPS)

The new design took heavy inspiration from and expanded on MerrySky. The goal was to render more information in less space without looking too busy.

  • Reduced total numbers rendered
    • Dropped redundant time tick marks
    • Plot temperature instead of labeling tick marks
  • Unified time cursor works on hover of any timeline
  • Detailed numbers are sticky; always stay visible
  • Weather condition icons in timelines.

What’s missing

There were several more features planned, but I never got around to them. The current version was “just good enough.” Maybe I’ll add them to the next version in 2030?

  • 60 minute forecast. Just precipitation: I find it useful to know when rain will start or stop. Right now, just follow the link at the bottom to get OpenWeather’s 60 minute forecast.
  • Compared to the previous version, it’s a little more difficult to compare the historical weather with the forecast. So I wanted to toggle historical data on each weather timeline. Or maybe an overview graph with just the daily values.
  • Option to consolidate/simplify similar weather conditions on timeline. It was interesting to see the 28 fine-grained weather conditions, but the extra precision often just adds more noise. It may be too much precision compared to the actual accuracy of the weather conditions.
  • Toggle plots. The colored boxes in the top section are actually checkboxes. They were meant to toggle the plots in the weather timelines.
  • Adjustable number of days. WeatherSense is able to display up to 92 past days and 16 forecast days. I just need to add some way to set these. (Right now they are just some reasonable constants.)
  • Persist settings. It would be nice if the toggled checkboxes and C/F temperature persisted between loads.
  • UI for entering location. You can enter a custom location with the n or name URL parameter like https://weather-sense.leftium.com/?n=nyc or https://weather-sense.leftium.com/?name=55105, but it would be nice if there were UI for this.
  • BYO API key. Open meteo doesn’t offer a minute-by-minute 60 minute forecast like OpenWeather. However, OpenWeather’s free API quota is very limited. So allow using your own OpenWeather API key.

Tech Stack

  HyperWeather UltraWeather WeatherSense
Year 2015 2021 2025
Weather API DarkSky OpenWeather+ Open-Meteo
Chart library ChartistJS ChartJS Observable Plot
Language CoffeeScript CoffeeScript TypeScript
JS Tech jQuery Svelte SvelteKit
Templates Jade Pug* Svelte
Platform Glitch Netlify Vercel
Package Manager NPM Yarn PNPM

Open-Meteo

Open-Meteo is a great weather API with a generous free tier (for non-commercial use.)

  • Unlike other API’s, you can query historical + forecast data with a single unified API call
  • Offers an AQI API
  • Offers a geocoding API (name to latitude/longitude)
    • OpenWeather’s reverse geocoding API is used to get the name of a location from GPS coordinates.

Observable Plot

The charts I wanted to make for WeatherSense were much more complex than previous versions. I essentially wanted to make a “weather timeline” with many plots layered on top of each other. I was able to accomplish this with Observable Plot and a little bit of hacking.

Special thanks to Mark for his answers on StackOverflow! (Please give the man some upvotes for his helpful answers.)

I considered using merry-timeline, but it was too limited for what I wanted to do.

Rainviewer + Leaflet

The precipitation radar data is provided by Rainviewer, then rendered in a Leaflet map component. I chose the Stadia × Stamen watercolor map style because it was pretty and more detailed styles detracted from the main data: the radar overlays.

TypeScript

I started using TypeScript because a client project required it. At first, I spent a lot of time trying to figure out how to get rid of all the squiggly type errors. However, now I think the type errors help me catch silly bugs. And the type inference is helpful even before any type errors are detected. Once in a while, I still find myself doing type acrobatics to appease TypeScript.

There is a typed version of a CoffeeScript-like language called Civet. However, I find it easier to just stick with the more mainstream languages like TypeScript. I also switched editors from gVim to VS Code. I think tooling helps so writing code is easier even if it’s more verbose. For example: emmet.

Svelte templates

Although Pug templates were nice, these days I just use basic HTML in Svelte templates. I also tried MDSvex, which allows using Markdown inside Svelte files, but I missed the syntax highlighting and auto-formatting.

SvelteKit

SvelteKit is to Svelte what Next.js is to React. It’s a framework for building web apps. It is quite opinionated; I believe it’s a living example of web dev best practices. I learned a lot just from examining the SvelteKit skeleton template project.

Vercel

Vercel is a great platform for hosting serverless projects.

  • Vercel hired Rich Harris to work on SvelteKit full-time, so of course SvelteKit has first-class support.
  • Deploying is as simple as connecting your github repo and pushing changes.
  • Generous free tier (although not as generous as CloudFlare)

PNPM

One of the best practices I adopted from the SvelteKit project. SvelteKit sometimes doesn’t play well with Yarn, so I switched to PNPM. I use this so often, I have aliased it to pp in my shell.

Comments

Post a Comment

Popular posts from this blog

WMO Codes

-
Image
Periodic Table of WMO Weather Condition Codes Unlike some other " periodic tables ," this one uncovers several patterns in the WMO weather condition codes. How can you express the 28 (Open Meteo) WMO weather condition codes as distinct icons and colors? The Open Meteo documentation gives a short description of each code, but the best way to graphically visualize this information in a weather app is not obvious. Open Weather, another weather API, simply hands you everything on a single page . The previous version of my weather app used Open Weather. (My app’s icons were actually from DarkSky, one of the best weather API’s until they were acquired by Apple.) However I was not satisfied with just mapping the 9 icons onto Open Meteo’s 28 different conditions . Open Meteo provides more information, and I wanted to expose it all! Organizing the Codes There are actually 100 unique WMO codes , but Open Meteo only reports a subset of these. Open Meteo groups the codes ...
Read more

The Comeback Post

-
Image
The last time I tried growing my hair out was over ten years ago! My mom and me at the beach. When a Korean (pop) artist returns after being inactive for a prolonged period, Koreans call it a "comeback" album/concert. Often they remake their artistic style at the same time. I was sure "comeback" was a bit of Konglish because I never really heard it used outside of Korea, where I hear it all the time. However, a Google search indicates that the term "comeback" is indeed used outside of Korea/Asia. Anyhow, this is my blog's comeback post. I have made some major changes:
Read more

Automatic Inbox Cleanup with Two Simple Filters/Rules

-
Image
Automatic Inbox Cleanup with Two Simple Filters/Rules Only 47 important emails reached my inbox out of 1,236 total emails received in October 2023. Last month I received 1,236 emails, but only 47 emails reached my inbox. These were the truly important emails I wanted to see, mostly sent from real people. These are the only emails that triggered a notification on my phone as soon as they hit my inbox. The other 96% of the emails were silently and automatically filed into other categories/labels without a single notification. About once a day, I take a few seconds to check them in bulk. I just scan the subjects and senders to mark a few bulk/automated emails that interest me. Then two keystrokes marks all of them as read. Ten, twenty, a hundred at a time! How can you have your email sorted like this? You just have to add a few custom email filters/rules. Instructions and downloadable Gmail filter files are at the end of this article! TL;DR (Quick Instructions) Instruction...
Read more