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 IE support.
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.
If you're impatient and would like to preview the 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
Where the beacon
values are:
clear
cloudy
raining
snowing
sox-rainout
sox-champs
(only works withnighttime
)
And the time
values are:
daytime
nighttime
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: