Back to News
Advertisement
jjsax about 3 hours ago 6 commentsRead Article on brolly.sh
The UK MET office recently redesigned their site, adding a lot of additional whitespace, scrolling, and animations. This significantly reduced its usability for me, and left me wanting an ā€˜at a glance’ weather site.

I made https://brolly.sh, a minimalist, plain text weather forecasting site. You can use it to view weather from around the world, with: 7 day forecast; Previous day log (so you can confirm it definitely was cooler / hotter / wetter / drier yesterday!); Hourly rain, wind, temperature, conditions; Hourly UV, air quality and pollen, including pollen type specific forecasts within the EU / UK; Location search and last 5 locations; Location specific units.

I mostly made the site for myself, if anyone else also benefits from it that’s an added advantage.

You can check out the weather in York, UK at https://brolly.sh/forecast/RWFP2qW8, or search for a location at https://brolly.sh

The site is deliberately styled as a single long scrollable column, to work on mobile phones. You can view it on desktop too, there's just a lot of horizontal padding. I naturally took a lot of inspiration from plaintextsports.com. Despite not being a sports fan, I love its aesthetic. But, you'll hopefully see that this site isn't a rip off, and has its own deliberate look and feel.

Visualisations are really important to showing information at a glance. I spent a lot of time designing the different visualisations and making them work with only characters. My favourite is the hourly heat map used for pollen count.

It's also frustrating to have an interactive site, where you can't share a page with a friend and have them see what you're seeing. To solve this, all page state (i.e. location, selected day, expanded / collapsed sections), is stored in the URL. You can share or bookmark the specific view, and know that you'll always be able to come back to it.

The site uses PocketBase. It’s written in Go and plain HTML/JavaScript/CSS. All pages are backend rendered, with light JavaScript to handle re-loading content without page jumps when using interactive features like next / previous day navigation. Weather forecasts are fetched from open-meteo.com, which has a very generous free tier. However, I also built a custom LRU cache on top of PocketBase’s SQLite DB to cache forecasts for 5 minutes, and avoid putting unnecessary pressure on the open-meteo API.

Advertisement

⚔ Community Insights

Discussion Sentiment

100% Positive

Analyzed from 154 words in the discussion.

Trending Topics

#precipitation#graph#text#something#plain#horizontal#half#next#html#wttr

Discussion (6 Comments)Read Original on HackerNews

devindotcom•31 minutes ago
This is cool and I appreciate how compact it is. I'd love to have this as a regular load on my desktop. My only note would be that the precipitation graph feels unnecessarily bulky - wouldn't it work with the same type of horizontal graph seen for the ones below it? I know precipitation demands somewhat more precision and immediacy, but you could also do a variable graph - left half next hour, right half next 12 hours or something.
jsax•24 minutes ago
Thanks for the feedback!

I agree, it’s definitely something to work on as it takes up a considerable amount of vertical space.

I found the precipitation chart challenging as you need to present both the forecasted precipitation, and the potential likelihood of the precipitation occurring. Something I’ve considered is using a horizontal graph with different shades of grey through black in each bar to represent the probability, but it would somewhat reduce accessibility.

kachnuv_ocasek•40 minutes ago
How do you turn on the text-only mode? I've tried Accept: text/plain but I always get HTML.
raajg•37 minutes ago
Don't think it's 'true' plain text. HTML/CSS rendering 'like' plain text.

Still beautiful though!

wormpilled•30 minutes ago
popalchemist•23 minutes ago
DIG IT. This is how the web used to feel.