Alternative tube map for london
- minimise HTML
- Splash screen
- Click off splash screen event (start time change to time zero)
- Send load time and click off time to keen as datapoints
- minimise JS
- minimise CSS
- Page speed index as build step
- About page
- 404 page
- log level from query params
- back button works to update app state
- error tracking
- inline actual map
- click and drag map
- search for station
- comparison to existing tube map
Uses Google Analytics to track interactions on the page. Look at piwik for similar analytics in the future. Or look at Keen when moving to an app and needed to better record page events.
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.
<!DOCTYPE html>
<html lang="en">
<head>
<script>window.times = {start: Date.now()};</script>
<!-- other headers -->
</head>code from Ampersand tool, 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.
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);
React
Typescript
Django
Laravel
Facebook
Microsoft
Google
Alibaba
D3
Tencent