Steady blue, clear view. Flashing blue, clouds due. Steady red, rain ahead. Flashing red, snow instead.
It's almost a rite of passage for designers to make a flashy weather app of questionable utility. By looking down at your screen, this project replicates the experience of looking up in a limited geographic area to view the manually-controlled lights on the tip of a tower. This gives you the information you need to decipher a poem that gives you a high-level description of your current area's current weather conditions.
When I was working at the Boston Globe, I tried my hardest to resurrect the old Boston.com weather beacon feature. It captured a delightful little detail of the city's rich history, but unfortunately, the project was never made a priority.
This site makes good on that attempt, and is a little love letter to the city that's been my home for the past decade. It's also a chance to put a lot of CSS techniques into practice, including some new approaches and technologies I wanted a chance to try out. Fortunately, I was also able to browbeat my friend Dan into helping with the icky Python part.
This site makes liberal use of evergreen browser features such as flexbox, SVG, viewport units, CSS blend modes, etc. As such, it makes few concessions for older browsers such as Internet Explorer.
Assuming you have Node and Node Package Manager installed, you can install a local copy by:
- Cloning from
https://github.com/ericwbailey/hancock.lighting.git
- Running
npm install - Then running
gulp
This should pull down this repo's code, install all required Node modules, then build the site and open it in your browser via Browsersync.
You can tap on the different lines of the poem to change it to the relevant weather condition. You'll still have to wait for either day or night to see the different times of day, though. Same for a Sox game rainout or championship win (that'd spoil the fun).
If you would like to preview different states without waiting for the time and weather to change, you can append the following to the end of the URL: /?beacon=cloudy&time=nighttime when running locally.
Where the beacon values are:
clearcloudyrainingsnowingsox-rainoutsox-champs(only works withnighttime)
And the time values are:
daytimenighttime
Note: Changing the site's time and weather states won't affect the outside world.
Please follow the contributing guidelines for submitting Issues and Pull and Feature Requests.
If you'd just like to show a little love, contacting the authors on Twitter is probably your best bet: