https://github.com/crowdhailer/londonlayout
A fresh map for London's tube and rail network designed by an enthusiastic and frequent user.
https://github.com/crowdhailer/londonlayout
Last synced: 9 months ago
JSON representation
A fresh map for London's tube and rail network designed by an enthusiastic and frequent user.
- Host: GitHub
- URL: https://github.com/crowdhailer/londonlayout
- Owner: CrowdHailer
- Created: 2015-09-11T15:55:06.000Z (over 10 years ago)
- Default Branch: master
- Last Pushed: 2015-12-28T20:20:02.000Z (about 10 years ago)
- Last Synced: 2025-02-07T19:44:51.245Z (11 months ago)
- Language: HTML
- Size: 6.84 KB
- Stars: 0
- Watchers: 3
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
London Layout
=============
Alternative tube map for london
## Priorities
1. minimise HTML
1. Splash screen
1. Click off splash screen event (start time change to time zero)
1. Send load time and click off time to keen as datapoints
1. minimise JS
1. minimise CSS
1. Page speed index as build step
1. About page
1. 404 page
1. log level from query params
1. back button works to update app state
1. error tracking
1. inline actual map
1. click and drag map
1. search for station
1. comparison to existing tube map
## Technology
### Page Analytics
Uses Google Analytics to track interactions on the page.
Look at [piwik](http://piwik.org/) for similar analytics in the future.
Or look at [Keen](keen.io) when moving to an app and needed to better record page events.
### Loading duration
The very first rendering of the page will set the start time within the times object which can then be used as reference for later events.
```html
window.times = {start: Date.now()};
```
*code from Ampersand tool, [loading stats](https://www.npmjs.com/package/loading-stats)*
For IE 9+ there are no cross browser issues with checking for DOMContentLoaded.
This is dom setup before the loading of included resources is completed.
To check that an individual item is loaded can be done by setting an `onload` function.
This works on the `window` object and `element` objects.
```js
function time() {
console.log(Date.now() - window.times.start);
}
function ready(fn) {
if (document.readyState != 'loading'){
fn();
} else {
document.addEventListener('DOMContentLoaded', fn);
}
}
$img = document.querySelector('img');
$img.onload = time
ready(time);
```