🌩 Steady blue, clear view. Flashing blue, clouds due. Steady red, rain ahead. Flashing red, snow instead.
Switch branches/tags
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
src
.editorconfig
.gitignore
.htmlhintrc
.remarkrc
.scss-lint.yml
.stylelintrc
.travis.yml
AUTHORS
CHANGELOG.md
CONTRIBUTING.md
ISSUE_TEMPLATE.md
LICENSE
PULL_REQUEST_TEMPLATE.md
README.md
gulpfile.js
labels.json
package.json
secrets.tar.enc

README.md

hancock.lighting

Steady blue, clear view. Flashing blue, clouds due. Steady red, rain ahead. Flashing red, snow instead.

Table of Contents

  1. Motivation

Motivation

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.

Technology

Browser Support

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.

Installation

Assuming you have Node and Node Package Manager installed, you can install a local copy by:

  1. 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.

Previewing Conditions

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:

  • clear
  • cloudy
  • raining
  • snowing
  • sox-rainout
  • sox-champs (only works with nighttime)

And the time values are:

  • daytime
  • nighttime

Note: Changing the site's time and weather states won't affect the outside world.

Contributing

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:

License

MIT License