add demo

denar90 · Mar 6, 2018 · 4751b0f · 4751b0f
1 parent 750bb2c
commit 4751b0f
Show file tree

Hide file tree

Showing 5 changed files with 114 additions and 1 deletion.
diff --git a/README.md b/README.md
@@ -41,3 +41,12 @@ After adding new permissions commands below has to be run.
 2>/dev/null openssl rsa -in key.pem -pubout -outform DER |  shasum -a 256 | head -c32 | tr 0-9a-f a-p
  
 ```
+
+
+## Demo
+
+- `npm run run-regular-site-demo` 
+- open `http://localhost:8000/`
+- `npm run run-throttled-site-demo`
+- open pages `http://localhost:8001/`, `http://localhost:8001/page-2.html` and apply throttling with extension for them
+
diff --git a/demo/regular-site/index.html b/demo/regular-site/index.html
@@ -0,0 +1,34 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8">
+  <title>Regular site</title>
+  <script>
+    const timing = window.performance.timing;
+    const renderTimer = time => {
+      const el = document.querySelector('h1');
+      if (el)
+        document.querySelector('h1').innerHTML = `Regular site is loaded in - ${time} ms`;
+    };
+
+    const interval = setInterval(() => {
+      renderTimer(Date.now() - timing.navigationStart)
+    });
+  </script>
+  <link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet">
+  <script src="https://code.jquery.com/jquery-3.3.1.js"></script>
+  <script src="https://cdnjs.cloudflare.com/ajax/libs/lodash.js/4.17.5/lodash.fp.min.js"></script>
+</head>
+<body>
+<h1>Regular site is loaded in </h1>
+<img src="https://user-images.githubusercontent.com/6231516/37058426-27e19c8e-2193-11e8-8670-5ff70100b326.gif">
+<script>
+  window.addEventListener('load', () => {
+    setTimeout(() => {
+      clearInterval(interval);
+      renderTimer(timing.loadEventEnd - timing.navigationStart);
+    }, 0);
+  }, false);
+</script>
+</body>
+</html>
diff --git a/demo/throttled-site/index.html b/demo/throttled-site/index.html
@@ -0,0 +1,34 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8">
+  <title>Throttled site</title>
+  <script>
+    const timing = window.performance.timing;
+    const renderTimer = time => {
+      const el = document.querySelector('h1');
+      if (el)
+        document.querySelector('h1').innerHTML = `Throttled site is loaded in - ${time} ms`;
+    };
+
+    const interval = setInterval(() => {
+      renderTimer(Date.now() - timing.navigationStart)
+    });
+  </script>
+  <link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet">
+  <script src="https://code.jquery.com/jquery-3.3.1.js"></script>
+  <script src="https://cdnjs.cloudflare.com/ajax/libs/lodash.js/4.17.5/lodash.fp.min.js"></script>
+</head>
+<body>
+<h1>Throttled site is loaded in </h1>
+<img src="https://user-images.githubusercontent.com/6231516/36938869-cb6b0c92-1f30-11e8-9085-26b386b7a39a.gif">
+<script>
+  window.addEventListener('load', () => {
+    setTimeout(() => {
+      clearInterval(interval);
+      renderTimer(timing.loadEventEnd - timing.navigationStart);
+    }, 0);
+  }, false);
+</script>
+</body>
+</html>
diff --git a/demo/throttled-site/page-2.html b/demo/throttled-site/page-2.html
@@ -0,0 +1,34 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8">
+  <title>Throttled site page-2</title>
+  <script>
+    const timing = window.performance.timing;
+    const renderTimer = time => {
+      const el = document.querySelector('h1');
+      if (el)
+        document.querySelector('h1').innerHTML = `Throttled site page-2 is loaded in - ${time} ms`;
+    };
+
+    const interval = setInterval(() => {
+      renderTimer(Date.now() - timing.navigationStart)
+    });
+  </script>
+  <link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet">
+  <script src="https://code.jquery.com/jquery-3.3.1.js"></script>
+  <script src="https://cdnjs.cloudflare.com/ajax/libs/lodash.js/4.17.5/lodash.fp.min.js"></script>
+</head>
+<body>
+<h1>Throttled site page-2 is loaded in </h1>
+<img src="https://user-images.githubusercontent.com/6231516/37059624-9d14f2e6-2196-11e8-960f-156dc1eb10ca.gif">
+<script>
+  window.addEventListener('load', () => {
+    setTimeout(() => {
+      clearInterval(interval);
+      renderTimer(timing.loadEventEnd - timing.navigationStart);
+    }, 0);
+  }, false);
+</script>
+</body>
+</html>
diff --git a/package.json b/package.json
@@ -3,7 +3,9 @@
   "version": "0.1.0",
   "description": "Brings connection like your users have to you ;)",
   "scripts": {
-    "test": "mocha ./test/test.js"
+    "test": "mocha ./test/test.js",
+    "run-regular-site-demo": "cd demo/regular-site && python -m SimpleHTTPServer 8000",
+    "run-throttled-site-demo": "cd demo/throttled-site && python -m SimpleHTTPServer 8001"
   },
   "author": "",
   "license": "MIT",