AREA 17 covers multiple timezones around the world. This project displays each timezone, shows the current weather and temperature in the city using Forecast.io and allows you to type a time to see what that time is in the other A17 timezones.
Default settings are:
- digital clock
- 12 hour time format
- temperature displayed
- degrees Celsius
Optionally can:
- show an analogue clock
- show 24 hour time format for the digital clocks
- hide the current temperature
- show weather information (with rain chance %age, feels like temperature)
Timezone conversion, in page and in Hipchat can accept:
5:12pm NYCwhich will convert 5:12pm to the other time zonesPariswhich will show you the current time in ParisTimwhich will show you the current time in Tennessee6pm Pablowhich will convert 6pm Tucumán to the other time zones
The A17 locale info is reasonably loose - you can use city, country, state, local airport code and in some instances staff member names.
NB: If Pablo is in the New York office, time.area17.com doesn't know that and so will always show his time as being in Tucumán.
For A17 staff who use Slack, there is a /time command available in project rooms:
/timewhich prints out the current time in all timezones/time Pariswhich prints out the current time in Paris/time 3:30pm NYCwhich will convert 3:30pm NYC to the other time zones/time Timwhich prints out the current time for Tim in Tennessee/time 6pm Mikewhich will convert 6pm UK to the other time zones
Appending ?screensaver=true to the URL switches the JavaScript to check for query string parameters for its settings and for the CSS to hide the conversion and settings prompt: time.area17.com?screensaver=true.
Used in A17TimeZones-ScreenSaver.
Additional parameters set different options:
&clocktype=analogue- sets the clock type to analogue&digitalformat=24- sets the digital time format to 24 hour&temperature=false- hides the temperature display&weather=true- shows the weather info&temperatureunits=fahrenheit- switches temperature units to Fahrenheit
- Redesigned to reflect new AREA17 website,
- Added HipChat integration with hook '/time' which is powered by a PHP file,
- Timezone differences and conversions are done via shared PHP now,
- Written out moment.js and moment-timezones.js and replaced with using PHP to provide timezone info. Takes 130kb off the JS weight,
- Written out ForecastIO.js which caused a hang on load. Replaced with a different PHP proxy to ajax weather info. Much faster, no hang and reduces JS by 20kb,
- Added display of feels like temperature and % chance of rain, with emoji.
- Redesigned to reflect David's art direction,
- Written out skycons.js to use emoji to display the weather instead, looses 20kb (7kb minified) JavaScript,
- Written out min.js as it was using an old version, looses 3kb (1kb minified) JavaScript,
- Split the clock types up into separate behaviors
- Updated settings panel
- Updated JavaScript and SCSS to be A17 Boilerplate structure,
- Updated SCSS to use BEM,
- Added moon phase display of the moon on clear nights,
- Settings method revamped to use an internal object,
- Added screen saver mode with parameter controlled options,
- Somehow dropped the minified CSS down another 2kb
- updated footer links
- using SVG use to repeat icons rather than have an animated safe list. First step to icon optimisation.
- added Los Angeles as Myles is out in LA
- renamed Memphis to Jackson as Tim is in Jackson TN and not Memphis TN
npm audit fix
- Added Lagos, Cairo, Nairobi and Shanghai (to make an even 10)
- Digital clock layout fix
- adding package.json version number to CSS and JS file src to combat cache for screen savers
- Refactored analogue clock JS to have more accurate display and removed
-webkitprefixed props - Dropping Cairo and Shaghai timezones
- Added Australia Eastern Standard time for Jen
- Also added Doha to balance the list out
- Added Amsterdam as Liv is currently living there
- Added Cairo for our new hire, Yasien
- Moved Luis back to Paris
- Removed Doha and Australia - Jen is now in London
- Moved to a Webpack build process from Grunt
sw.jscreated from dedicatedworkboxtask
- include re-exported icons with paths split out
- adds animated snow, fog and wind
- updates animated sun, cloudy day, cloudy night
- migrate away from Dark Sky weather API to Visual Crossing weather API
- removed Cairo and Taipai
- added London and Montreal
- on time convert, guess a location ID not a timezone, so we can have multiple locations in a single timezone
- reveal more weather data when hovering location weather
- style scrollbars
- removed Montreal, added Tbilisi
- showing weather API credit in screen saver mode (its been removed from the latest version of the screen saver)
- added Kyiv
- added map view
Prep for server move:
- move public assets to
publicfolder - remove Kyiv and Lagos
- hide screensaver link (doesn't work in Sonoma)
- ran
npm audit fix
For the weather conditions time.area17.com uses Visual Crossing which needs an API key. The API key lives in .env and can be found in the A17 Redux vault.
$ npm install
$ npm run build
For dev purposes: concats but doesn't minify CSS/JS and places the compiled files in /css/ and /js/. These files are not committed to the GIT repo.
$ npm run prod
Concats and minifies CSS/JS and places the compiled files in /css/ and /js/. These files are not committed to the GIT repo.
You'll probably want to run:
$ npm run watch
We have some very very basic responsive happening. There is a $breakpoints sassmap in the _variables.scss. To target a breakpoint in the SASS you need to:
@include breakpoint(small) {
.foo { ... }
}
These values are read by JavaScript and stored in a variable:
timezones.currentMediaQuery
This variable is updated as breakpoints are crossed.
Currently _body.scss manually lists the breakpoints. When grunt-sass supports looping of maps we can use:
@each $name, $point in $breakpoints {
@include breakpoint('#{$name}') {
head {
font-family: '#{$name}';
}
body:after {
content: '#{$name}';
}
}
}
Among other things:
- compiled CSS
- compiled JS
- minified SVG
- env file