├── .gitignore
├── LICENSE.md
├── README.md
├── critical-rendering-path
    ├── .gitignore
    ├── index.html
    ├── package-lock.json
    ├── package.json
    └── server.js
├── css-animation
    ├── .gitignore
    ├── index.html
    ├── package-lock.json
    ├── package.json
    ├── script.js
    ├── server.js
    └── style.css
├── fonts
    ├── .gitignore
    ├── index.html
    ├── package-lock.json
    ├── package.json
    ├── sansation_light.woff
    └── server.js
├── layers
    ├── 1
    │   ├── index.html
    │   ├── script.js
    │   └── style.css
    ├── 2
    │   ├── index.html
    │   ├── script.js
    │   └── style.css
    ├── 3
    │   ├── index.html
    │   ├── script.js
    │   └── style.css
    ├── 4
    │   ├── index.html
    │   ├── script.js
    │   └── style.css
    ├── 5
    │   └── index.html
    ├── .gitignore
    ├── index.html
    ├── package-lock.json
    ├── package.json
    ├── script.js
    ├── server.js
    └── style.css
├── layout-trashing
    ├── 1
    │   └── index.html
    ├── 2
    │   └── index.html
    ├── 3
    │   └── index.html
    ├── 4
    │   ├── app.js
    │   ├── index.html
    │   ├── logo-1024px.png
    │   └── styles.css
    ├── 5
    │   └── index.html
    ├── .gitignore
    ├── index.html
    ├── package-lock.json
    ├── package.json
    └── server.js
├── lazy-load-images
    ├── 1
    │   ├── index.html
    │   ├── script.js
    │   └── style.css
    ├── 2
    │   ├── index.html
    │   ├── script.js
    │   └── style.css
    ├── 3
    │   ├── index.html
    │   └── style.css
    ├── .gitignore
    ├── index.html
    ├── package-lock.json
    ├── package.json
    ├── server.js
    └── style.css
├── lighthouse
    ├── .gitignore
    ├── assets
    │   ├── css
    │   │   ├── banner.css
    │   │   ├── gallery.css
    │   │   └── index.css
    │   ├── images
    │   │   └── coding.png
    │   ├── js
    │   │   ├── banner.js
    │   │   ├── imageoptimizer.js
    │   │   ├── main.js
    │   │   └── performance.js
    │   └── libs
    │   │   ├── jquery.js
    │   │   ├── jquery.min.js
    │   │   ├── lodash.js
    │   │   └── lodash.min.js
    ├── index.html
    ├── logs
    │   └── performance.csv
    ├── package-lock.json
    ├── package.json
    ├── report.html
    └── server.js
├── network
    ├── .gitignore
    ├── css
    │   ├── color.css
    │   ├── style1.css
    │   ├── style2.css
    │   ├── style3.css
    │   ├── style4.css
    │   ├── style5.css
    │   ├── style6.css
    │   ├── style7.css
    │   └── style8.css
    ├── images
    │   ├── bootcamp-web-performance.png
    │   └── coding.png
    ├── index.html
    ├── js
    │   ├── script1.js
    │   ├── script2.js
    │   ├── script3.js
    │   ├── script4.js
    │   ├── script5.js
    │   ├── script6.js
    │   ├── script7.js
    │   └── script8.js
    ├── libs
    │   ├── animate.css
    │   └── bootstrap.css
    ├── links.txt
    ├── package-lock.json
    ├── package.json
    ├── script.js
    └── server.js
├── paint-profiler
    ├── .gitignore
    ├── index.html
    ├── package-lock.json
    ├── package.json
    └── server.js
├── parser-blocking
    ├── 1
    │   ├── index.html
    │   └── script.js
    ├── 2
    │   ├── index.html
    │   └── script.js
    ├── 3
    │   ├── index.html
    │   └── script.js
    ├── .gitignore
    ├── index.html
    ├── package-lock.json
    ├── package.json
    ├── script.js
    └── server.js
├── render-blocking
    ├── 1
    │   ├── index.html
    │   ├── style1.css
    │   └── style2.css
    ├── 2
    │   ├── index.html
    │   ├── style1.css
    │   └── style2.css
    ├── 3
    │   ├── index.html
    │   ├── style1.css
    │   └── style2.css
    ├── 4
    │   ├── color.css
    │   ├── index.html
    │   └── style1.css
    ├── 5
    │   ├── index.html
    │   ├── style1.css
    │   └── style2.css
    ├── 6
    │   ├── index.html
    │   └── style1.css
    ├── 7
    │   ├── index.html
    │   └── style1.css
    ├── .gitignore
    ├── index.html
    ├── package-lock.json
    ├── package.json
    └── server.js
└── web-performance.pdf


/.gitignore:
--------------------------------------------------------------------------------
1 | .DS_Store
2 | lighthouse-complete/
3 | node_modules
4 | yarn.lock


--------------------------------------------------------------------------------
/LICENSE.md:
--------------------------------------------------------------------------------
 1 | MIT License
 2 | 
 3 | Copyright (c) 2022 Devkode.io
 4 | 
 5 | Permission is hereby granted, free of charge, to any person obtaining a copy
 6 | of this software and associated documentation files (the "Software"), to deal
 7 | in the Software without restriction, including without limitation the rights
 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
 9 | copies of the Software, and to permit persons to whom the Software is
10 | furnished to do so, subject to the following conditions:
11 | 
12 | The above copyright notice and this permission notice shall be included in all
13 | copies or substantial portions of the Software.
14 | 
15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
21 | SOFTWARE.
22 | 


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
 1 | <div align="center">
 2 | 	<h1>Web Performance Bootcamp</h1>
 3 | 	<h3>Critical Rendering Path, Web Vitals, Lighthouse, Profilers and many more...</h3>
 4 | </div>
 5 | 
 6 | <div align="center">
 7 |     <p>
 8 |       <a name="stars"><img src="https://img.shields.io/github/stars/devkodeio/web-performance-bootcamp?style=for-the-badge"></a>
 9 |       <a name="forks"><img src="https://img.shields.io/github/forks/devkodeio/web-performance-bootcamp?logoColor=green&style=for-the-badge"></a>
10 |       <a name="contributions"><img src="https://img.shields.io/github/contributors/devkodeio/web-performance-bootcamp?logoColor=green&style=for-the-badge"></a>
11 |       <a name="license"><img src="https://img.shields.io/github/license/devkodeio/web-performance-bootcamp?style=for-the-badge"></a>
12 |     </p>
13 | </div>
14 | 
15 | <div align="center">
16 | 	<p><a href="https://t.me/teamdevkode" target="_blank">Join the frontend telegram community</a></p>
17 | 	<p>Show your support by giving a ⭐&nbsp;&nbsp;to this repo</p>
18 |   To download the slides as PDF, <a href="./web-performance.pdf" target="_blank">Click here</a>
19 | </div>
20 | 


--------------------------------------------------------------------------------
/critical-rendering-path/.gitignore:
--------------------------------------------------------------------------------
1 | node_modules/
2 | .DS_Store
3 | 


--------------------------------------------------------------------------------
/critical-rendering-path/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 |   <head>
 4 |     <meta charset="UTF-8" />
 5 |     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
 6 |     <title>CRP</title>
 7 |   </head>
 8 |   <body>
 9 |     <div id="container"></div>
10 |     <button onclick="addItem()">Add Item</button>
11 | 
12 |     <script>
13 |       const container = document.getElementById("container");
14 |       let counter = 0;
15 |       function addItem() {
16 |         const div = document.createElement("div");
17 |         div.innerText = ++counter;
18 |         container.appendChild(div);
19 |       }
20 |     </script>
21 |   </body>
22 | </html>
23 | 


--------------------------------------------------------------------------------
/critical-rendering-path/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "parser-blocking",
 3 |   "version": "1.0.0",
 4 |   "description": "",
 5 |   "main": "server.js",
 6 |   "scripts": {
 7 |     "start": "nodemon server.js",
 8 |     "test": "echo \"Error: no test specified\" && exit 1"
 9 |   },
10 |   "config": {
11 |     "port": 3001,
12 |     "js-delay": 0
13 |   },
14 |   "author": "",
15 |   "license": "ISC",
16 |   "dependencies": {
17 |     "express": "^4.17.1"
18 |   },
19 |   "devDependencies": {
20 |     "nodemon": "^2.0.7"
21 |   }
22 | }
23 | 


--------------------------------------------------------------------------------
/critical-rendering-path/server.js:
--------------------------------------------------------------------------------
 1 | const fs = require("fs");
 2 | const express = require("express");
 3 | const config = JSON.parse(fs.readFileSync("package.json")).config;
 4 | 
 5 | const server = express();
 6 | 
 7 | server.use((req, res, next) => {
 8 |     if(req.url.slice(-2) == 'js') {
 9 |         setTimeout(next, config["js-delay"]);
10 |     }else{
11 |         next();
12 |     }
13 | });
14 | 
15 | server.use(express.static('./', { etag: false }));
16 | 
17 | const port = parseInt(config["port"], 10);
18 | server.listen(port, () => {
19 |     console.log(`Server is listening on http://localhost:${port}/`);
20 | });
21 | 


--------------------------------------------------------------------------------
/css-animation/.gitignore:
--------------------------------------------------------------------------------
1 | node_modules/
2 | .DS_Store
3 | 


--------------------------------------------------------------------------------
/css-animation/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 | <head>
 4 |     <meta charset="UTF-8">
 5 |     <meta name="viewport" content="width=device-width, initial-scale=1.0">
 6 |     <title>CSS Animation</title>
 7 |     <link rel="stylesheet" href="style.css">
 8 | </head>
 9 | <body>
10 |     <div class="container">
11 |         <div class="one">
12 |             <div class="box bad-box"></div>
13 |         </div>
14 |         <div class="two">
15 |             <div class="box good-box"></div>
16 |         </div>
17 |     </div>
18 |     <script src="./script.js"></script>
19 | </body>
20 | </html>


--------------------------------------------------------------------------------
/css-animation/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "parser-blocking",
 3 |   "version": "1.0.0",
 4 |   "description": "",
 5 |   "main": "server.js",
 6 |   "scripts": {
 7 |     "start": "nodemon server.js",
 8 |     "test": "echo \"Error: no test specified\" && exit 1"
 9 |   },
10 |   "config": {
11 |     "port": 3001,
12 |     "font-delay": 0
13 |   },
14 |   "author": "",
15 |   "license": "ISC",
16 |   "dependencies": {
17 |     "express": "^4.17.1"
18 |   },
19 |   "devDependencies": {
20 |     "nodemon": "^2.0.7"
21 |   }
22 | }
23 | 


--------------------------------------------------------------------------------
/css-animation/script.js:
--------------------------------------------------------------------------------
 1 | document.addEventListener("keyup", (e) => {
 2 |   switch (event.key) {
 3 |     case "n":
 4 |       console.log("Main thread blocks for 5 seconds");
 5 |       delay(5000);
 6 |       break;
 7 |   }
 8 | });
 9 | function delay(duration) {
10 |   const start = new Date().getTime();
11 |   while (new Date().getTime() < start + duration) {}
12 | }
13 | 


--------------------------------------------------------------------------------
/css-animation/server.js:
--------------------------------------------------------------------------------
 1 | const fs = require("fs");
 2 | const express = require("express");
 3 | const config = JSON.parse(fs.readFileSync("package.json")).config;
 4 | 
 5 | const server = express();
 6 | 
 7 | server.use((req, res, next) => {
 8 |     if(req.url.slice(-4) == 'woff') {
 9 |         setTimeout(next, config["font-delay"]);
10 |     }else{
11 |         next();
12 |     }
13 | });
14 | 
15 | server.use(express.static('./', { etag: false }));
16 | 
17 | const port = parseInt(config["port"], 10);
18 | server.listen(port, () => {
19 |     console.log(`Server is listening on http://localhost:${port}/`);
20 | });
21 | 


--------------------------------------------------------------------------------
/css-animation/style.css:
--------------------------------------------------------------------------------
 1 | .container {
 2 |     display: flex;
 3 |     justify-content: space-around;
 4 |     align-items: center;
 5 |     height: 100vh;
 6 | }
 7 | 
 8 | .one, .two {
 9 |     flex: 1;
10 |     display: flex;
11 |     justify-content: center;
12 |     align-items: center;
13 |     position: relative;
14 | }
15 | 
16 | .box {
17 |     background: red;
18 |     height: 100px;
19 |     width: 100px;
20 | 	animation-duration: 3s;
21 |     animation-iteration-count: infinite;
22 |     position: inherit;
23 | }
24 | 
25 | .bad-box {
26 | 	animation-name: bad-animation;
27 | }
28 | @keyframes bad-animation {
29 | 	0%, 100% {
30 | 		top: 0;
31 | 		left: -100px;
32 | 	}
33 | 	25% {
34 | 		top: -100px;
35 | 		left: 0;
36 | 	}
37 | 	50% {
38 | 		top: 0;
39 | 		left: 100px;
40 |  	}
41 | 	75% {
42 | 		top: 100px;
43 | 		left: 0;
44 | 	}
45 | }
46 | 
47 | .good-box {
48 | 	animation-name: good-animation;
49 | }
50 | @keyframes good-animation {
51 | 	0%, 100% {
52 | 		transform: translate(-100px, 0);
53 | 	}
54 | 	25% {
55 | 		transform: translate(0, -100px);
56 | 	}
57 | 	50% {
58 | 		transform: translate(100px, 0);
59 | 	}
60 | 	75% {
61 | 		transform: translate(0, 100px);
62 | 	}
63 | }


--------------------------------------------------------------------------------
/fonts/.gitignore:
--------------------------------------------------------------------------------
1 | node_modules/
2 | .DS_Store
3 | 


--------------------------------------------------------------------------------
/fonts/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 |   <head>
 4 |     <meta charset="UTF-8" />
 5 |     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
 6 |     <title>Fonts</title>
 7 |     <style>
 8 |       body{
 9 |         font-family: sans-serif;
10 |       }
11 |       @font-face {
12 |         font-family: myFont;
13 |         src: url(sansation_light.woff);
14 |       }
15 |       h2 {
16 |         font-family: myFont, sans-serif;
17 |       }
18 |     </style>
19 |   </head>
20 |   <body>
21 |     <h1>Heading 1</h1>
22 |     <h2>Heading 2</h2>
23 |   </body>
24 | </html>
25 | 


--------------------------------------------------------------------------------
/fonts/package-lock.json:
--------------------------------------------------------------------------------
   1 | {
   2 |   "name": "parser-blocking",
   3 |   "version": "1.0.0",
   4 |   "lockfileVersion": 1,
   5 |   "requires": true,
   6 |   "dependencies": {
   7 |     "@sindresorhus/is": {
   8 |       "version": "0.14.0",
   9 |       "resolved": "https://registry.npmjs.org/@sindresorhus/is/-/is-0.14.0.tgz",
  10 |       "integrity": "sha512-9NET910DNaIPngYnLLPeg+Ogzqsi9uM4mSboU5y6p8S5DzMTVEsJZrawi+BoDNUVBa2DhJqQYUFvMDfgU062LQ==",
  11 |       "dev": true
  12 |     },
  13 |     "@szmarczak/http-timer": {
  14 |       "version": "1.1.2",
  15 |       "resolved": "https://registry.npmjs.org/@szmarczak/http-timer/-/http-timer-1.1.2.tgz",
  16 |       "integrity": "sha512-XIB2XbzHTN6ieIjfIMV9hlVcfPU26s2vafYWQcZHWXHOxiaRZYEDKEwdl129Zyg50+foYV2jCgtrqSA6qNuNSA==",
  17 |       "dev": true,
  18 |       "requires": {
  19 |         "defer-to-connect": "^1.0.1"
  20 |       }
  21 |     },
  22 |     "abbrev": {
  23 |       "version": "1.1.1",
  24 |       "resolved": "https://registry.npmjs.org/abbrev/-/abbrev-1.1.1.tgz",
  25 |       "integrity": "sha512-nne9/IiQ/hzIhY6pdDnbBtz7DjPTKrY00P/zvPSm5pOFkl6xuGrGnXn/VtTNNfNtAfZ9/1RtehkszU9qcTii0Q==",
  26 |       "dev": true
  27 |     },
  28 |     "accepts": {
  29 |       "version": "1.3.7",
  30 |       "resolved": "https://registry.npmjs.org/accepts/-/accepts-1.3.7.tgz",
  31 |       "integrity": "sha512-Il80Qs2WjYlJIBNzNkK6KYqlVMTbZLXgHx2oT0pU/fjRHyEp+PEfEPY0R3WCwAGVOtauxh1hOxNgIf5bv7dQpA==",
  32 |       "requires": {
  33 |         "mime-types": "~2.1.24",
  34 |         "negotiator": "0.6.2"
  35 |       }
  36 |     },
  37 |     "ansi-align": {
  38 |       "version": "3.0.0",
  39 |       "resolved": "https://registry.npmjs.org/ansi-align/-/ansi-align-3.0.0.tgz",
  40 |       "integrity": "sha512-ZpClVKqXN3RGBmKibdfWzqCY4lnjEuoNzU5T0oEFpfd/z5qJHVarukridD4juLO2FXMiwUQxr9WqQtaYa8XRYw==",
  41 |       "dev": true,
  42 |       "requires": {
  43 |         "string-width": "^3.0.0"
  44 |       },
  45 |       "dependencies": {
  46 |         "string-width": {
  47 |           "version": "3.1.0",
  48 |           "resolved": "https://registry.npmjs.org/string-width/-/string-width-3.1.0.tgz",
  49 |           "integrity": "sha512-vafcv6KjVZKSgz06oM/H6GDBrAtz8vdhQakGjFIvNrHA6y3HCF1CInLy+QLq8dTJPQ1b+KDUqDFctkdRW44e1w==",
  50 |           "dev": true,
  51 |           "requires": {
  52 |             "emoji-regex": "^7.0.1",
  53 |             "is-fullwidth-code-point": "^2.0.0",
  54 |             "strip-ansi": "^5.1.0"
  55 |           }
  56 |         }
  57 |       }
  58 |     },
  59 |     "ansi-regex": {
  60 |       "version": "4.1.0",
  61 |       "resolved": "https://registry.npmjs.org/ansi-regex/-/ansi-regex-4.1.0.tgz",
  62 |       "integrity": "sha512-1apePfXM1UOSqw0o9IiFAovVz9M5S1Dg+4TrDwfMewQ6p/rmMueb7tWZjQ1rx4Loy1ArBggoqGpfqqdI4rondg==",
  63 |       "dev": true
  64 |     },
  65 |     "ansi-styles": {
  66 |       "version": "4.3.0",
  67 |       "resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-4.3.0.tgz",
  68 |       "integrity": "sha512-zbB9rCJAT1rbjiVDb2hqKFHNYLxgtk8NURxZ3IZwD3F6NtxbXZQCnnSi1Lkx+IDohdPlFp222wVALIheZJQSEg==",
  69 |       "dev": true,
  70 |       "requires": {
  71 |         "color-convert": "^2.0.1"
  72 |       }
  73 |     },
  74 |     "anymatch": {
  75 |       "version": "3.1.1",
  76 |       "resolved": "https://registry.npmjs.org/anymatch/-/anymatch-3.1.1.tgz",
  77 |       "integrity": "sha512-mM8522psRCqzV+6LhomX5wgp25YVibjh8Wj23I5RPkPppSVSjyKD2A2mBJmWGa+KN7f2D6LNh9jkBCeyLktzjg==",
  78 |       "dev": true,
  79 |       "requires": {
  80 |         "normalize-path": "^3.0.0",
  81 |         "picomatch": "^2.0.4"
  82 |       }
  83 |     },
  84 |     "array-flatten": {
  85 |       "version": "1.1.1",
  86 |       "resolved": "https://registry.npmjs.org/array-flatten/-/array-flatten-1.1.1.tgz",
  87 |       "integrity": "sha1-ml9pkFGx5wczKPKgCJaLZOopVdI="
  88 |     },
  89 |     "balanced-match": {
  90 |       "version": "1.0.0",
  91 |       "resolved": "https://registry.npmjs.org/balanced-match/-/balanced-match-1.0.0.tgz",
  92 |       "integrity": "sha1-ibTRmasr7kneFk6gK4nORi1xt2c=",
  93 |       "dev": true
  94 |     },
  95 |     "binary-extensions": {
  96 |       "version": "2.2.0",
  97 |       "resolved": "https://registry.npmjs.org/binary-extensions/-/binary-extensions-2.2.0.tgz",
  98 |       "integrity": "sha512-jDctJ/IVQbZoJykoeHbhXpOlNBqGNcwXJKJog42E5HDPUwQTSdjCHdihjj0DlnheQ7blbT6dHOafNAiS8ooQKA==",
  99 |       "dev": true
 100 |     },
 101 |     "body-parser": {
 102 |       "version": "1.19.0",
 103 |       "resolved": "https://registry.npmjs.org/body-parser/-/body-parser-1.19.0.tgz",
 104 |       "integrity": "sha512-dhEPs72UPbDnAQJ9ZKMNTP6ptJaionhP5cBb541nXPlW60Jepo9RV/a4fX4XWW9CuFNK22krhrj1+rgzifNCsw==",
 105 |       "requires": {
 106 |         "bytes": "3.1.0",
 107 |         "content-type": "~1.0.4",
 108 |         "debug": "2.6.9",
 109 |         "depd": "~1.1.2",
 110 |         "http-errors": "1.7.2",
 111 |         "iconv-lite": "0.4.24",
 112 |         "on-finished": "~2.3.0",
 113 |         "qs": "6.7.0",
 114 |         "raw-body": "2.4.0",
 115 |         "type-is": "~1.6.17"
 116 |       }
 117 |     },
 118 |     "boxen": {
 119 |       "version": "4.2.0",
 120 |       "resolved": "https://registry.npmjs.org/boxen/-/boxen-4.2.0.tgz",
 121 |       "integrity": "sha512-eB4uT9RGzg2odpER62bBwSLvUeGC+WbRjjyyFhGsKnc8wp/m0+hQsMUvUe3H2V0D5vw0nBdO1hCJoZo5mKeuIQ==",
 122 |       "dev": true,
 123 |       "requires": {
 124 |         "ansi-align": "^3.0.0",
 125 |         "camelcase": "^5.3.1",
 126 |         "chalk": "^3.0.0",
 127 |         "cli-boxes": "^2.2.0",
 128 |         "string-width": "^4.1.0",
 129 |         "term-size": "^2.1.0",
 130 |         "type-fest": "^0.8.1",
 131 |         "widest-line": "^3.1.0"
 132 |       }
 133 |     },
 134 |     "brace-expansion": {
 135 |       "version": "1.1.11",
 136 |       "resolved": "https://registry.npmjs.org/brace-expansion/-/brace-expansion-1.1.11.tgz",
 137 |       "integrity": "sha512-iCuPHDFgrHX7H2vEI/5xpz07zSHB00TpugqhmYtVmMO6518mCuRMoOYFldEBl0g187ufozdaHgWKcYFb61qGiA==",
 138 |       "dev": true,
 139 |       "requires": {
 140 |         "balanced-match": "^1.0.0",
 141 |         "concat-map": "0.0.1"
 142 |       }
 143 |     },
 144 |     "braces": {
 145 |       "version": "3.0.2",
 146 |       "resolved": "https://registry.npmjs.org/braces/-/braces-3.0.2.tgz",
 147 |       "integrity": "sha512-b8um+L1RzM3WDSzvhm6gIz1yfTbBt6YTlcEKAvsmqCZZFw46z626lVj9j1yEPW33H5H+lBQpZMP1k8l+78Ha0A==",
 148 |       "dev": true,
 149 |       "requires": {
 150 |         "fill-range": "^7.0.1"
 151 |       }
 152 |     },
 153 |     "bytes": {
 154 |       "version": "3.1.0",
 155 |       "resolved": "https://registry.npmjs.org/bytes/-/bytes-3.1.0.tgz",
 156 |       "integrity": "sha512-zauLjrfCG+xvoyaqLoV8bLVXXNGC4JqlxFCutSDWA6fJrTo2ZuvLYTqZ7aHBLZSMOopbzwv8f+wZcVzfVTI2Dg=="
 157 |     },
 158 |     "cacheable-request": {
 159 |       "version": "6.1.0",
 160 |       "resolved": "https://registry.npmjs.org/cacheable-request/-/cacheable-request-6.1.0.tgz",
 161 |       "integrity": "sha512-Oj3cAGPCqOZX7Rz64Uny2GYAZNliQSqfbePrgAQ1wKAihYmCUnraBtJtKcGR4xz7wF+LoJC+ssFZvv5BgF9Igg==",
 162 |       "dev": true,
 163 |       "requires": {
 164 |         "clone-response": "^1.0.2",
 165 |         "get-stream": "^5.1.0",
 166 |         "http-cache-semantics": "^4.0.0",
 167 |         "keyv": "^3.0.0",
 168 |         "lowercase-keys": "^2.0.0",
 169 |         "normalize-url": "^4.1.0",
 170 |         "responselike": "^1.0.2"
 171 |       },
 172 |       "dependencies": {
 173 |         "get-stream": {
 174 |           "version": "5.2.0",
 175 |           "resolved": "https://registry.npmjs.org/get-stream/-/get-stream-5.2.0.tgz",
 176 |           "integrity": "sha512-nBF+F1rAZVCu/p7rjzgA+Yb4lfYXrpl7a6VmJrU8wF9I1CKvP/QwPNZHnOlwbTkY6dvtFIzFMSyQXbLoTQPRpA==",
 177 |           "dev": true,
 178 |           "requires": {
 179 |             "pump": "^3.0.0"
 180 |           }
 181 |         },
 182 |         "lowercase-keys": {
 183 |           "version": "2.0.0",
 184 |           "resolved": "https://registry.npmjs.org/lowercase-keys/-/lowercase-keys-2.0.0.tgz",
 185 |           "integrity": "sha512-tqNXrS78oMOE73NMxK4EMLQsQowWf8jKooH9g7xPavRT706R6bkQJ6DY2Te7QukaZsulxa30wQ7bk0pm4XiHmA==",
 186 |           "dev": true
 187 |         }
 188 |       }
 189 |     },
 190 |     "camelcase": {
 191 |       "version": "5.3.1",
 192 |       "resolved": "https://registry.npmjs.org/camelcase/-/camelcase-5.3.1.tgz",
 193 |       "integrity": "sha512-L28STB170nwWS63UjtlEOE3dldQApaJXZkOI1uMFfzf3rRuPegHaHesyee+YxQ+W6SvRDQV6UrdOdRiR153wJg==",
 194 |       "dev": true
 195 |     },
 196 |     "chalk": {
 197 |       "version": "3.0.0",
 198 |       "resolved": "https://registry.npmjs.org/chalk/-/chalk-3.0.0.tgz",
 199 |       "integrity": "sha512-4D3B6Wf41KOYRFdszmDqMCGq5VV/uMAB273JILmO+3jAlh8X4qDtdtgCR3fxtbLEMzSx22QdhnDcJvu2u1fVwg==",
 200 |       "dev": true,
 201 |       "requires": {
 202 |         "ansi-styles": "^4.1.0",
 203 |         "supports-color": "^7.1.0"
 204 |       },
 205 |       "dependencies": {
 206 |         "has-flag": {
 207 |           "version": "4.0.0",
 208 |           "resolved": "https://registry.npmjs.org/has-flag/-/has-flag-4.0.0.tgz",
 209 |           "integrity": "sha512-EykJT/Q1KjTWctppgIAgfSO0tKVuZUjhgMr17kqTumMl6Afv3EISleU7qZUzoXDFTAHTDC4NOoG/ZxU3EvlMPQ==",
 210 |           "dev": true
 211 |         },
 212 |         "supports-color": {
 213 |           "version": "7.2.0",
 214 |           "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-7.2.0.tgz",
 215 |           "integrity": "sha512-qpCAvRl9stuOHveKsn7HncJRvv501qIacKzQlO/+Lwxc9+0q2wLyv4Dfvt80/DPn2pqOBsJdDiogXGR9+OvwRw==",
 216 |           "dev": true,
 217 |           "requires": {
 218 |             "has-flag": "^4.0.0"
 219 |           }
 220 |         }
 221 |       }
 222 |     },
 223 |     "chokidar": {
 224 |       "version": "3.5.1",
 225 |       "resolved": "https://registry.npmjs.org/chokidar/-/chokidar-3.5.1.tgz",
 226 |       "integrity": "sha512-9+s+Od+W0VJJzawDma/gvBNQqkTiqYTWLuZoyAsivsI4AaWTCzHG06/TMjsf1cYe9Cb97UCEhjz7HvnPk2p/tw==",
 227 |       "dev": true,
 228 |       "requires": {
 229 |         "anymatch": "~3.1.1",
 230 |         "braces": "~3.0.2",
 231 |         "fsevents": "~2.3.1",
 232 |         "glob-parent": "~5.1.0",
 233 |         "is-binary-path": "~2.1.0",
 234 |         "is-glob": "~4.0.1",
 235 |         "normalize-path": "~3.0.0",
 236 |         "readdirp": "~3.5.0"
 237 |       }
 238 |     },
 239 |     "ci-info": {
 240 |       "version": "2.0.0",
 241 |       "resolved": "https://registry.npmjs.org/ci-info/-/ci-info-2.0.0.tgz",
 242 |       "integrity": "sha512-5tK7EtrZ0N+OLFMthtqOj4fI2Jeb88C4CAZPu25LDVUgXJ0A3Js4PMGqrn0JU1W0Mh1/Z8wZzYPxqUrXeBboCQ==",
 243 |       "dev": true
 244 |     },
 245 |     "cli-boxes": {
 246 |       "version": "2.2.1",
 247 |       "resolved": "https://registry.npmjs.org/cli-boxes/-/cli-boxes-2.2.1.tgz",
 248 |       "integrity": "sha512-y4coMcylgSCdVinjiDBuR8PCC2bLjyGTwEmPb9NHR/QaNU6EUOXcTY/s6VjGMD6ENSEaeQYHCY0GNGS5jfMwPw==",
 249 |       "dev": true
 250 |     },
 251 |     "clone-response": {
 252 |       "version": "1.0.2",
 253 |       "resolved": "https://registry.npmjs.org/clone-response/-/clone-response-1.0.2.tgz",
 254 |       "integrity": "sha1-0dyXOSAxTfZ/vrlCI7TuNQI56Ws=",
 255 |       "dev": true,
 256 |       "requires": {
 257 |         "mimic-response": "^1.0.0"
 258 |       }
 259 |     },
 260 |     "color-convert": {
 261 |       "version": "2.0.1",
 262 |       "resolved": "https://registry.npmjs.org/color-convert/-/color-convert-2.0.1.tgz",
 263 |       "integrity": "sha512-RRECPsj7iu/xb5oKYcsFHSppFNnsj/52OVTRKb4zP5onXwVF3zVmmToNcOfGC+CRDpfK/U584fMg38ZHCaElKQ==",
 264 |       "dev": true,
 265 |       "requires": {
 266 |         "color-name": "~1.1.4"
 267 |       }
 268 |     },
 269 |     "color-name": {
 270 |       "version": "1.1.4",
 271 |       "resolved": "https://registry.npmjs.org/color-name/-/color-name-1.1.4.tgz",
 272 |       "integrity": "sha512-dOy+3AuW3a2wNbZHIuMZpTcgjGuLU/uBL/ubcZF9OXbDo8ff4O8yVp5Bf0efS8uEoYo5q4Fx7dY9OgQGXgAsQA==",
 273 |       "dev": true
 274 |     },
 275 |     "concat-map": {
 276 |       "version": "0.0.1",
 277 |       "resolved": "https://registry.npmjs.org/concat-map/-/concat-map-0.0.1.tgz",
 278 |       "integrity": "sha1-2Klr13/Wjfd5OnMDajug1UBdR3s=",
 279 |       "dev": true
 280 |     },
 281 |     "configstore": {
 282 |       "version": "5.0.1",
 283 |       "resolved": "https://registry.npmjs.org/configstore/-/configstore-5.0.1.tgz",
 284 |       "integrity": "sha512-aMKprgk5YhBNyH25hj8wGt2+D52Sw1DRRIzqBwLp2Ya9mFmY8KPvvtvmna8SxVR9JMZ4kzMD68N22vlaRpkeFA==",
 285 |       "dev": true,
 286 |       "requires": {
 287 |         "dot-prop": "^5.2.0",
 288 |         "graceful-fs": "^4.1.2",
 289 |         "make-dir": "^3.0.0",
 290 |         "unique-string": "^2.0.0",
 291 |         "write-file-atomic": "^3.0.0",
 292 |         "xdg-basedir": "^4.0.0"
 293 |       }
 294 |     },
 295 |     "content-disposition": {
 296 |       "version": "0.5.3",
 297 |       "resolved": "https://registry.npmjs.org/content-disposition/-/content-disposition-0.5.3.tgz",
 298 |       "integrity": "sha512-ExO0774ikEObIAEV9kDo50o+79VCUdEB6n6lzKgGwupcVeRlhrj3qGAfwq8G6uBJjkqLrhT0qEYFcWng8z1z0g==",
 299 |       "requires": {
 300 |         "safe-buffer": "5.1.2"
 301 |       }
 302 |     },
 303 |     "content-type": {
 304 |       "version": "1.0.4",
 305 |       "resolved": "https://registry.npmjs.org/content-type/-/content-type-1.0.4.tgz",
 306 |       "integrity": "sha512-hIP3EEPs8tB9AT1L+NUqtwOAps4mk2Zob89MWXMHjHWg9milF/j4osnnQLXBCBFBk/tvIG/tUc9mOUJiPBhPXA=="
 307 |     },
 308 |     "cookie": {
 309 |       "version": "0.4.0",
 310 |       "resolved": "https://registry.npmjs.org/cookie/-/cookie-0.4.0.tgz",
 311 |       "integrity": "sha512-+Hp8fLp57wnUSt0tY0tHEXh4voZRDnoIrZPqlo3DPiI4y9lwg/jqx+1Om94/W6ZaPDOUbnjOt/99w66zk+l1Xg=="
 312 |     },
 313 |     "cookie-signature": {
 314 |       "version": "1.0.6",
 315 |       "resolved": "https://registry.npmjs.org/cookie-signature/-/cookie-signature-1.0.6.tgz",
 316 |       "integrity": "sha1-4wOogrNCzD7oylE6eZmXNNqzriw="
 317 |     },
 318 |     "crypto-random-string": {
 319 |       "version": "2.0.0",
 320 |       "resolved": "https://registry.npmjs.org/crypto-random-string/-/crypto-random-string-2.0.0.tgz",
 321 |       "integrity": "sha512-v1plID3y9r/lPhviJ1wrXpLeyUIGAZ2SHNYTEapm7/8A9nLPoyvVp3RK/EPFqn5kEznyWgYZNsRtYYIWbuG8KA==",
 322 |       "dev": true
 323 |     },
 324 |     "debug": {
 325 |       "version": "2.6.9",
 326 |       "resolved": "https://registry.npmjs.org/debug/-/debug-2.6.9.tgz",
 327 |       "integrity": "sha512-bC7ElrdJaJnPbAP+1EotYvqZsb3ecl5wi6Bfi6BJTUcNowp6cvspg0jXznRTKDjm/E7AdgFBVeAPVMNcKGsHMA==",
 328 |       "requires": {
 329 |         "ms": "2.0.0"
 330 |       }
 331 |     },
 332 |     "decompress-response": {
 333 |       "version": "3.3.0",
 334 |       "resolved": "https://registry.npmjs.org/decompress-response/-/decompress-response-3.3.0.tgz",
 335 |       "integrity": "sha1-gKTdMjdIOEv6JICDYirt7Jgq3/M=",
 336 |       "dev": true,
 337 |       "requires": {
 338 |         "mimic-response": "^1.0.0"
 339 |       }
 340 |     },
 341 |     "deep-extend": {
 342 |       "version": "0.6.0",
 343 |       "resolved": "https://registry.npmjs.org/deep-extend/-/deep-extend-0.6.0.tgz",
 344 |       "integrity": "sha512-LOHxIOaPYdHlJRtCQfDIVZtfw/ufM8+rVj649RIHzcm/vGwQRXFt6OPqIFWsm2XEMrNIEtWR64sY1LEKD2vAOA==",
 345 |       "dev": true
 346 |     },
 347 |     "defer-to-connect": {
 348 |       "version": "1.1.3",
 349 |       "resolved": "https://registry.npmjs.org/defer-to-connect/-/defer-to-connect-1.1.3.tgz",
 350 |       "integrity": "sha512-0ISdNousHvZT2EiFlZeZAHBUvSxmKswVCEf8hW7KWgG4a8MVEu/3Vb6uWYozkjylyCxe0JBIiRB1jV45S70WVQ==",
 351 |       "dev": true
 352 |     },
 353 |     "depd": {
 354 |       "version": "1.1.2",
 355 |       "resolved": "https://registry.npmjs.org/depd/-/depd-1.1.2.tgz",
 356 |       "integrity": "sha1-m81S4UwJd2PnSbJ0xDRu0uVgtak="
 357 |     },
 358 |     "destroy": {
 359 |       "version": "1.0.4",
 360 |       "resolved": "https://registry.npmjs.org/destroy/-/destroy-1.0.4.tgz",
 361 |       "integrity": "sha1-l4hXRCxEdJ5CBmE+N5RiBYJqvYA="
 362 |     },
 363 |     "dot-prop": {
 364 |       "version": "5.3.0",
 365 |       "resolved": "https://registry.npmjs.org/dot-prop/-/dot-prop-5.3.0.tgz",
 366 |       "integrity": "sha512-QM8q3zDe58hqUqjraQOmzZ1LIH9SWQJTlEKCH4kJ2oQvLZk7RbQXvtDM2XEq3fwkV9CCvvH4LA0AV+ogFsBM2Q==",
 367 |       "dev": true,
 368 |       "requires": {
 369 |         "is-obj": "^2.0.0"
 370 |       }
 371 |     },
 372 |     "duplexer3": {
 373 |       "version": "0.1.4",
 374 |       "resolved": "https://registry.npmjs.org/duplexer3/-/duplexer3-0.1.4.tgz",
 375 |       "integrity": "sha1-7gHdHKwO08vH/b6jfcCo8c4ALOI=",
 376 |       "dev": true
 377 |     },
 378 |     "ee-first": {
 379 |       "version": "1.1.1",
 380 |       "resolved": "https://registry.npmjs.org/ee-first/-/ee-first-1.1.1.tgz",
 381 |       "integrity": "sha1-WQxhFWsK4vTwJVcyoViyZrxWsh0="
 382 |     },
 383 |     "emoji-regex": {
 384 |       "version": "7.0.3",
 385 |       "resolved": "https://registry.npmjs.org/emoji-regex/-/emoji-regex-7.0.3.tgz",
 386 |       "integrity": "sha512-CwBLREIQ7LvYFB0WyRvwhq5N5qPhc6PMjD6bYggFlI5YyDgl+0vxq5VHbMOFqLg7hfWzmu8T5Z1QofhmTIhItA==",
 387 |       "dev": true
 388 |     },
 389 |     "encodeurl": {
 390 |       "version": "1.0.2",
 391 |       "resolved": "https://registry.npmjs.org/encodeurl/-/encodeurl-1.0.2.tgz",
 392 |       "integrity": "sha1-rT/0yG7C0CkyL1oCw6mmBslbP1k="
 393 |     },
 394 |     "end-of-stream": {
 395 |       "version": "1.4.4",
 396 |       "resolved": "https://registry.npmjs.org/end-of-stream/-/end-of-stream-1.4.4.tgz",
 397 |       "integrity": "sha512-+uw1inIHVPQoaVuHzRyXd21icM+cnt4CzD5rW+NC1wjOUSTOs+Te7FOv7AhN7vS9x/oIyhLP5PR1H+phQAHu5Q==",
 398 |       "dev": true,
 399 |       "requires": {
 400 |         "once": "^1.4.0"
 401 |       }
 402 |     },
 403 |     "escape-goat": {
 404 |       "version": "2.1.1",
 405 |       "resolved": "https://registry.npmjs.org/escape-goat/-/escape-goat-2.1.1.tgz",
 406 |       "integrity": "sha512-8/uIhbG12Csjy2JEW7D9pHbreaVaS/OpN3ycnyvElTdwM5n6GY6W6e2IPemfvGZeUMqZ9A/3GqIZMgKnBhAw/Q==",
 407 |       "dev": true
 408 |     },
 409 |     "escape-html": {
 410 |       "version": "1.0.3",
 411 |       "resolved": "https://registry.npmjs.org/escape-html/-/escape-html-1.0.3.tgz",
 412 |       "integrity": "sha1-Aljq5NPQwJdN4cFpGI7wBR0dGYg="
 413 |     },
 414 |     "etag": {
 415 |       "version": "1.8.1",
 416 |       "resolved": "https://registry.npmjs.org/etag/-/etag-1.8.1.tgz",
 417 |       "integrity": "sha1-Qa4u62XvpiJorr/qg6x9eSmbCIc="
 418 |     },
 419 |     "express": {
 420 |       "version": "4.17.1",
 421 |       "resolved": "https://registry.npmjs.org/express/-/express-4.17.1.tgz",
 422 |       "integrity": "sha512-mHJ9O79RqluphRrcw2X/GTh3k9tVv8YcoyY4Kkh4WDMUYKRZUq0h1o0w2rrrxBqM7VoeUVqgb27xlEMXTnYt4g==",
 423 |       "requires": {
 424 |         "accepts": "~1.3.7",
 425 |         "array-flatten": "1.1.1",
 426 |         "body-parser": "1.19.0",
 427 |         "content-disposition": "0.5.3",
 428 |         "content-type": "~1.0.4",
 429 |         "cookie": "0.4.0",
 430 |         "cookie-signature": "1.0.6",
 431 |         "debug": "2.6.9",
 432 |         "depd": "~1.1.2",
 433 |         "encodeurl": "~1.0.2",
 434 |         "escape-html": "~1.0.3",
 435 |         "etag": "~1.8.1",
 436 |         "finalhandler": "~1.1.2",
 437 |         "fresh": "0.5.2",
 438 |         "merge-descriptors": "1.0.1",
 439 |         "methods": "~1.1.2",
 440 |         "on-finished": "~2.3.0",
 441 |         "parseurl": "~1.3.3",
 442 |         "path-to-regexp": "0.1.7",
 443 |         "proxy-addr": "~2.0.5",
 444 |         "qs": "6.7.0",
 445 |         "range-parser": "~1.2.1",
 446 |         "safe-buffer": "5.1.2",
 447 |         "send": "0.17.1",
 448 |         "serve-static": "1.14.1",
 449 |         "setprototypeof": "1.1.1",
 450 |         "statuses": "~1.5.0",
 451 |         "type-is": "~1.6.18",
 452 |         "utils-merge": "1.0.1",
 453 |         "vary": "~1.1.2"
 454 |       }
 455 |     },
 456 |     "fill-range": {
 457 |       "version": "7.0.1",
 458 |       "resolved": "https://registry.npmjs.org/fill-range/-/fill-range-7.0.1.tgz",
 459 |       "integrity": "sha512-qOo9F+dMUmC2Lcb4BbVvnKJxTPjCm+RRpe4gDuGrzkL7mEVl/djYSu2OdQ2Pa302N4oqkSg9ir6jaLWJ2USVpQ==",
 460 |       "dev": true,
 461 |       "requires": {
 462 |         "to-regex-range": "^5.0.1"
 463 |       }
 464 |     },
 465 |     "finalhandler": {
 466 |       "version": "1.1.2",
 467 |       "resolved": "https://registry.npmjs.org/finalhandler/-/finalhandler-1.1.2.tgz",
 468 |       "integrity": "sha512-aAWcW57uxVNrQZqFXjITpW3sIUQmHGG3qSb9mUah9MgMC4NeWhNOlNjXEYq3HjRAvL6arUviZGGJsBg6z0zsWA==",
 469 |       "requires": {
 470 |         "debug": "2.6.9",
 471 |         "encodeurl": "~1.0.2",
 472 |         "escape-html": "~1.0.3",
 473 |         "on-finished": "~2.3.0",
 474 |         "parseurl": "~1.3.3",
 475 |         "statuses": "~1.5.0",
 476 |         "unpipe": "~1.0.0"
 477 |       }
 478 |     },
 479 |     "forwarded": {
 480 |       "version": "0.1.2",
 481 |       "resolved": "https://registry.npmjs.org/forwarded/-/forwarded-0.1.2.tgz",
 482 |       "integrity": "sha1-mMI9qxF1ZXuMBXPozszZGw/xjIQ="
 483 |     },
 484 |     "fresh": {
 485 |       "version": "0.5.2",
 486 |       "resolved": "https://registry.npmjs.org/fresh/-/fresh-0.5.2.tgz",
 487 |       "integrity": "sha1-PYyt2Q2XZWn6g1qx+OSyOhBWBac="
 488 |     },
 489 |     "fsevents": {
 490 |       "version": "2.3.2",
 491 |       "resolved": "https://registry.npmjs.org/fsevents/-/fsevents-2.3.2.tgz",
 492 |       "integrity": "sha512-xiqMQR4xAeHTuB9uWm+fFRcIOgKBMiOBP+eXiyT7jsgVCq1bkVygt00oASowB7EdtpOHaaPgKt812P9ab+DDKA==",
 493 |       "dev": true,
 494 |       "optional": true
 495 |     },
 496 |     "get-stream": {
 497 |       "version": "4.1.0",
 498 |       "resolved": "https://registry.npmjs.org/get-stream/-/get-stream-4.1.0.tgz",
 499 |       "integrity": "sha512-GMat4EJ5161kIy2HevLlr4luNjBgvmj413KaQA7jt4V8B4RDsfpHk7WQ9GVqfYyyx8OS/L66Kox+rJRNklLK7w==",
 500 |       "dev": true,
 501 |       "requires": {
 502 |         "pump": "^3.0.0"
 503 |       }
 504 |     },
 505 |     "glob-parent": {
 506 |       "version": "5.1.2",
 507 |       "resolved": "https://registry.npmjs.org/glob-parent/-/glob-parent-5.1.2.tgz",
 508 |       "integrity": "sha512-AOIgSQCepiJYwP3ARnGx+5VnTu2HBYdzbGP45eLw1vr3zB3vZLeyed1sC9hnbcOc9/SrMyM5RPQrkGz4aS9Zow==",
 509 |       "dev": true,
 510 |       "requires": {
 511 |         "is-glob": "^4.0.1"
 512 |       }
 513 |     },
 514 |     "global-dirs": {
 515 |       "version": "2.1.0",
 516 |       "resolved": "https://registry.npmjs.org/global-dirs/-/global-dirs-2.1.0.tgz",
 517 |       "integrity": "sha512-MG6kdOUh/xBnyo9cJFeIKkLEc1AyFq42QTU4XiX51i2NEdxLxLWXIjEjmqKeSuKR7pAZjTqUVoT2b2huxVLgYQ==",
 518 |       "dev": true,
 519 |       "requires": {
 520 |         "ini": "1.3.7"
 521 |       }
 522 |     },
 523 |     "got": {
 524 |       "version": "9.6.0",
 525 |       "resolved": "https://registry.npmjs.org/got/-/got-9.6.0.tgz",
 526 |       "integrity": "sha512-R7eWptXuGYxwijs0eV+v3o6+XH1IqVK8dJOEecQfTmkncw9AV4dcw/Dhxi8MdlqPthxxpZyizMzyg8RTmEsG+Q==",
 527 |       "dev": true,
 528 |       "requires": {
 529 |         "@sindresorhus/is": "^0.14.0",
 530 |         "@szmarczak/http-timer": "^1.1.2",
 531 |         "cacheable-request": "^6.0.0",
 532 |         "decompress-response": "^3.3.0",
 533 |         "duplexer3": "^0.1.4",
 534 |         "get-stream": "^4.1.0",
 535 |         "lowercase-keys": "^1.0.1",
 536 |         "mimic-response": "^1.0.1",
 537 |         "p-cancelable": "^1.0.0",
 538 |         "to-readable-stream": "^1.0.0",
 539 |         "url-parse-lax": "^3.0.0"
 540 |       }
 541 |     },
 542 |     "graceful-fs": {
 543 |       "version": "4.2.6",
 544 |       "resolved": "https://registry.npmjs.org/graceful-fs/-/graceful-fs-4.2.6.tgz",
 545 |       "integrity": "sha512-nTnJ528pbqxYanhpDYsi4Rd8MAeaBA67+RZ10CM1m3bTAVFEDcd5AuA4a6W5YkGZ1iNXHzZz8T6TBKLeBuNriQ==",
 546 |       "dev": true
 547 |     },
 548 |     "has-flag": {
 549 |       "version": "3.0.0",
 550 |       "resolved": "https://registry.npmjs.org/has-flag/-/has-flag-3.0.0.tgz",
 551 |       "integrity": "sha1-tdRU3CGZriJWmfNGfloH87lVuv0=",
 552 |       "dev": true
 553 |     },
 554 |     "has-yarn": {
 555 |       "version": "2.1.0",
 556 |       "resolved": "https://registry.npmjs.org/has-yarn/-/has-yarn-2.1.0.tgz",
 557 |       "integrity": "sha512-UqBRqi4ju7T+TqGNdqAO0PaSVGsDGJUBQvk9eUWNGRY1CFGDzYhLWoM7JQEemnlvVcv/YEmc2wNW8BC24EnUsw==",
 558 |       "dev": true
 559 |     },
 560 |     "http-cache-semantics": {
 561 |       "version": "4.1.0",
 562 |       "resolved": "https://registry.npmjs.org/http-cache-semantics/-/http-cache-semantics-4.1.0.tgz",
 563 |       "integrity": "sha512-carPklcUh7ROWRK7Cv27RPtdhYhUsela/ue5/jKzjegVvXDqM2ILE9Q2BGn9JZJh1g87cp56su/FgQSzcWS8cQ==",
 564 |       "dev": true
 565 |     },
 566 |     "http-errors": {
 567 |       "version": "1.7.2",
 568 |       "resolved": "https://registry.npmjs.org/http-errors/-/http-errors-1.7.2.tgz",
 569 |       "integrity": "sha512-uUQBt3H/cSIVfch6i1EuPNy/YsRSOUBXTVfZ+yR7Zjez3qjBz6i9+i4zjNaoqcoFVI4lQJ5plg63TvGfRSDCRg==",
 570 |       "requires": {
 571 |         "depd": "~1.1.2",
 572 |         "inherits": "2.0.3",
 573 |         "setprototypeof": "1.1.1",
 574 |         "statuses": ">= 1.5.0 < 2",
 575 |         "toidentifier": "1.0.0"
 576 |       }
 577 |     },
 578 |     "iconv-lite": {
 579 |       "version": "0.4.24",
 580 |       "resolved": "https://registry.npmjs.org/iconv-lite/-/iconv-lite-0.4.24.tgz",
 581 |       "integrity": "sha512-v3MXnZAcvnywkTUEZomIActle7RXXeedOR31wwl7VlyoXO4Qi9arvSenNQWne1TcRwhCL1HwLI21bEqdpj8/rA==",
 582 |       "requires": {
 583 |         "safer-buffer": ">= 2.1.2 < 3"
 584 |       }
 585 |     },
 586 |     "ignore-by-default": {
 587 |       "version": "1.0.1",
 588 |       "resolved": "https://registry.npmjs.org/ignore-by-default/-/ignore-by-default-1.0.1.tgz",
 589 |       "integrity": "sha1-SMptcvbGo68Aqa1K5odr44ieKwk=",
 590 |       "dev": true
 591 |     },
 592 |     "import-lazy": {
 593 |       "version": "2.1.0",
 594 |       "resolved": "https://registry.npmjs.org/import-lazy/-/import-lazy-2.1.0.tgz",
 595 |       "integrity": "sha1-BWmOPUXIjo1+nZLLBYTnfwlvPkM=",
 596 |       "dev": true
 597 |     },
 598 |     "imurmurhash": {
 599 |       "version": "0.1.4",
 600 |       "resolved": "https://registry.npmjs.org/imurmurhash/-/imurmurhash-0.1.4.tgz",
 601 |       "integrity": "sha1-khi5srkoojixPcT7a21XbyMUU+o=",
 602 |       "dev": true
 603 |     },
 604 |     "inherits": {
 605 |       "version": "2.0.3",
 606 |       "resolved": "https://registry.npmjs.org/inherits/-/inherits-2.0.3.tgz",
 607 |       "integrity": "sha1-Yzwsg+PaQqUC9SRmAiSA9CCCYd4="
 608 |     },
 609 |     "ini": {
 610 |       "version": "1.3.7",
 611 |       "resolved": "https://registry.npmjs.org/ini/-/ini-1.3.7.tgz",
 612 |       "integrity": "sha512-iKpRpXP+CrP2jyrxvg1kMUpXDyRUFDWurxbnVT1vQPx+Wz9uCYsMIqYuSBLV+PAaZG/d7kRLKRFc9oDMsH+mFQ==",
 613 |       "dev": true
 614 |     },
 615 |     "ipaddr.js": {
 616 |       "version": "1.9.1",
 617 |       "resolved": "https://registry.npmjs.org/ipaddr.js/-/ipaddr.js-1.9.1.tgz",
 618 |       "integrity": "sha512-0KI/607xoxSToH7GjN1FfSbLoU0+btTicjsQSWQlh/hZykN8KpmMf7uYwPW3R+akZ6R/w18ZlXSHBYXiYUPO3g=="
 619 |     },
 620 |     "is-binary-path": {
 621 |       "version": "2.1.0",
 622 |       "resolved": "https://registry.npmjs.org/is-binary-path/-/is-binary-path-2.1.0.tgz",
 623 |       "integrity": "sha512-ZMERYes6pDydyuGidse7OsHxtbI7WVeUEozgR/g7rd0xUimYNlvZRE/K2MgZTjWy725IfelLeVcEM97mmtRGXw==",
 624 |       "dev": true,
 625 |       "requires": {
 626 |         "binary-extensions": "^2.0.0"
 627 |       }
 628 |     },
 629 |     "is-ci": {
 630 |       "version": "2.0.0",
 631 |       "resolved": "https://registry.npmjs.org/is-ci/-/is-ci-2.0.0.tgz",
 632 |       "integrity": "sha512-YfJT7rkpQB0updsdHLGWrvhBJfcfzNNawYDNIyQXJz0IViGf75O8EBPKSdvw2rF+LGCsX4FZ8tcr3b19LcZq4w==",
 633 |       "dev": true,
 634 |       "requires": {
 635 |         "ci-info": "^2.0.0"
 636 |       }
 637 |     },
 638 |     "is-extglob": {
 639 |       "version": "2.1.1",
 640 |       "resolved": "https://registry.npmjs.org/is-extglob/-/is-extglob-2.1.1.tgz",
 641 |       "integrity": "sha1-qIwCU1eR8C7TfHahueqXc8gz+MI=",
 642 |       "dev": true
 643 |     },
 644 |     "is-fullwidth-code-point": {
 645 |       "version": "2.0.0",
 646 |       "resolved": "https://registry.npmjs.org/is-fullwidth-code-point/-/is-fullwidth-code-point-2.0.0.tgz",
 647 |       "integrity": "sha1-o7MKXE8ZkYMWeqq5O+764937ZU8=",
 648 |       "dev": true
 649 |     },
 650 |     "is-glob": {
 651 |       "version": "4.0.1",
 652 |       "resolved": "https://registry.npmjs.org/is-glob/-/is-glob-4.0.1.tgz",
 653 |       "integrity": "sha512-5G0tKtBTFImOqDnLB2hG6Bp2qcKEFduo4tZu9MT/H6NQv/ghhy30o55ufafxJ/LdH79LLs2Kfrn85TLKyA7BUg==",
 654 |       "dev": true,
 655 |       "requires": {
 656 |         "is-extglob": "^2.1.1"
 657 |       }
 658 |     },
 659 |     "is-installed-globally": {
 660 |       "version": "0.3.2",
 661 |       "resolved": "https://registry.npmjs.org/is-installed-globally/-/is-installed-globally-0.3.2.tgz",
 662 |       "integrity": "sha512-wZ8x1js7Ia0kecP/CHM/3ABkAmujX7WPvQk6uu3Fly/Mk44pySulQpnHG46OMjHGXApINnV4QhY3SWnECO2z5g==",
 663 |       "dev": true,
 664 |       "requires": {
 665 |         "global-dirs": "^2.0.1",
 666 |         "is-path-inside": "^3.0.1"
 667 |       }
 668 |     },
 669 |     "is-npm": {
 670 |       "version": "4.0.0",
 671 |       "resolved": "https://registry.npmjs.org/is-npm/-/is-npm-4.0.0.tgz",
 672 |       "integrity": "sha512-96ECIfh9xtDDlPylNPXhzjsykHsMJZ18ASpaWzQyBr4YRTcVjUvzaHayDAES2oU/3KpljhHUjtSRNiDwi0F0ig==",
 673 |       "dev": true
 674 |     },
 675 |     "is-number": {
 676 |       "version": "7.0.0",
 677 |       "resolved": "https://registry.npmjs.org/is-number/-/is-number-7.0.0.tgz",
 678 |       "integrity": "sha512-41Cifkg6e8TylSpdtTpeLVMqvSBEVzTttHvERD741+pnZ8ANv0004MRL43QKPDlK9cGvNp6NZWZUBlbGXYxxng==",
 679 |       "dev": true
 680 |     },
 681 |     "is-obj": {
 682 |       "version": "2.0.0",
 683 |       "resolved": "https://registry.npmjs.org/is-obj/-/is-obj-2.0.0.tgz",
 684 |       "integrity": "sha512-drqDG3cbczxxEJRoOXcOjtdp1J/lyp1mNn0xaznRs8+muBhgQcrnbspox5X5fOw0HnMnbfDzvnEMEtqDEJEo8w==",
 685 |       "dev": true
 686 |     },
 687 |     "is-path-inside": {
 688 |       "version": "3.0.3",
 689 |       "resolved": "https://registry.npmjs.org/is-path-inside/-/is-path-inside-3.0.3.tgz",
 690 |       "integrity": "sha512-Fd4gABb+ycGAmKou8eMftCupSir5lRxqf4aD/vd0cD2qc4HL07OjCeuHMr8Ro4CoMaeCKDB0/ECBOVWjTwUvPQ==",
 691 |       "dev": true
 692 |     },
 693 |     "is-typedarray": {
 694 |       "version": "1.0.0",
 695 |       "resolved": "https://registry.npmjs.org/is-typedarray/-/is-typedarray-1.0.0.tgz",
 696 |       "integrity": "sha1-5HnICFjfDBsR3dppQPlgEfzaSpo=",
 697 |       "dev": true
 698 |     },
 699 |     "is-yarn-global": {
 700 |       "version": "0.3.0",
 701 |       "resolved": "https://registry.npmjs.org/is-yarn-global/-/is-yarn-global-0.3.0.tgz",
 702 |       "integrity": "sha512-VjSeb/lHmkoyd8ryPVIKvOCn4D1koMqY+vqyjjUfc3xyKtP4dYOxM44sZrnqQSzSds3xyOrUTLTC9LVCVgLngw==",
 703 |       "dev": true
 704 |     },
 705 |     "json-buffer": {
 706 |       "version": "3.0.0",
 707 |       "resolved": "https://registry.npmjs.org/json-buffer/-/json-buffer-3.0.0.tgz",
 708 |       "integrity": "sha1-Wx85evx11ne96Lz8Dkfh+aPZqJg=",
 709 |       "dev": true
 710 |     },
 711 |     "keyv": {
 712 |       "version": "3.1.0",
 713 |       "resolved": "https://registry.npmjs.org/keyv/-/keyv-3.1.0.tgz",
 714 |       "integrity": "sha512-9ykJ/46SN/9KPM/sichzQ7OvXyGDYKGTaDlKMGCAlg2UK8KRy4jb0d8sFc+0Tt0YYnThq8X2RZgCg74RPxgcVA==",
 715 |       "dev": true,
 716 |       "requires": {
 717 |         "json-buffer": "3.0.0"
 718 |       }
 719 |     },
 720 |     "latest-version": {
 721 |       "version": "5.1.0",
 722 |       "resolved": "https://registry.npmjs.org/latest-version/-/latest-version-5.1.0.tgz",
 723 |       "integrity": "sha512-weT+r0kTkRQdCdYCNtkMwWXQTMEswKrFBkm4ckQOMVhhqhIMI1UT2hMj+1iigIhgSZm5gTmrRXBNoGUgaTY1xA==",
 724 |       "dev": true,
 725 |       "requires": {
 726 |         "package-json": "^6.3.0"
 727 |       }
 728 |     },
 729 |     "lowercase-keys": {
 730 |       "version": "1.0.1",
 731 |       "resolved": "https://registry.npmjs.org/lowercase-keys/-/lowercase-keys-1.0.1.tgz",
 732 |       "integrity": "sha512-G2Lj61tXDnVFFOi8VZds+SoQjtQC3dgokKdDG2mTm1tx4m50NUHBOZSBwQQHyy0V12A0JTG4icfZQH+xPyh8VA==",
 733 |       "dev": true
 734 |     },
 735 |     "make-dir": {
 736 |       "version": "3.1.0",
 737 |       "resolved": "https://registry.npmjs.org/make-dir/-/make-dir-3.1.0.tgz",
 738 |       "integrity": "sha512-g3FeP20LNwhALb/6Cz6Dd4F2ngze0jz7tbzrD2wAV+o9FeNHe4rL+yK2md0J/fiSf1sa1ADhXqi5+oVwOM/eGw==",
 739 |       "dev": true,
 740 |       "requires": {
 741 |         "semver": "^6.0.0"
 742 |       },
 743 |       "dependencies": {
 744 |         "semver": {
 745 |           "version": "6.3.0",
 746 |           "resolved": "https://registry.npmjs.org/semver/-/semver-6.3.0.tgz",
 747 |           "integrity": "sha512-b39TBaTSfV6yBrapU89p5fKekE2m/NwnDocOVruQFS1/veMgdzuPcnOM34M6CwxW8jH/lxEa5rBoDeUwu5HHTw==",
 748 |           "dev": true
 749 |         }
 750 |       }
 751 |     },
 752 |     "media-typer": {
 753 |       "version": "0.3.0",
 754 |       "resolved": "https://registry.npmjs.org/media-typer/-/media-typer-0.3.0.tgz",
 755 |       "integrity": "sha1-hxDXrwqmJvj/+hzgAWhUUmMlV0g="
 756 |     },
 757 |     "merge-descriptors": {
 758 |       "version": "1.0.1",
 759 |       "resolved": "https://registry.npmjs.org/merge-descriptors/-/merge-descriptors-1.0.1.tgz",
 760 |       "integrity": "sha1-sAqqVW3YtEVoFQ7J0blT8/kMu2E="
 761 |     },
 762 |     "methods": {
 763 |       "version": "1.1.2",
 764 |       "resolved": "https://registry.npmjs.org/methods/-/methods-1.1.2.tgz",
 765 |       "integrity": "sha1-VSmk1nZUE07cxSZmVoNbD4Ua/O4="
 766 |     },
 767 |     "mime": {
 768 |       "version": "1.6.0",
 769 |       "resolved": "https://registry.npmjs.org/mime/-/mime-1.6.0.tgz",
 770 |       "integrity": "sha512-x0Vn8spI+wuJ1O6S7gnbaQg8Pxh4NNHb7KSINmEWKiPE4RKOplvijn+NkmYmmRgP68mc70j2EbeTFRsrswaQeg=="
 771 |     },
 772 |     "mime-db": {
 773 |       "version": "1.46.0",
 774 |       "resolved": "https://registry.npmjs.org/mime-db/-/mime-db-1.46.0.tgz",
 775 |       "integrity": "sha512-svXaP8UQRZ5K7or+ZmfNhg2xX3yKDMUzqadsSqi4NCH/KomcH75MAMYAGVlvXn4+b/xOPhS3I2uHKRUzvjY7BQ=="
 776 |     },
 777 |     "mime-types": {
 778 |       "version": "2.1.29",
 779 |       "resolved": "https://registry.npmjs.org/mime-types/-/mime-types-2.1.29.tgz",
 780 |       "integrity": "sha512-Y/jMt/S5sR9OaqteJtslsFZKWOIIqMACsJSiHghlCAyhf7jfVYjKBmLiX8OgpWeW+fjJ2b+Az69aPFPkUOY6xQ==",
 781 |       "requires": {
 782 |         "mime-db": "1.46.0"
 783 |       }
 784 |     },
 785 |     "mimic-response": {
 786 |       "version": "1.0.1",
 787 |       "resolved": "https://registry.npmjs.org/mimic-response/-/mimic-response-1.0.1.tgz",
 788 |       "integrity": "sha512-j5EctnkH7amfV/q5Hgmoal1g2QHFJRraOtmx0JpIqkxhBhI/lJSl1nMpQ45hVarwNETOoWEimndZ4QK0RHxuxQ==",
 789 |       "dev": true
 790 |     },
 791 |     "minimatch": {
 792 |       "version": "3.0.4",
 793 |       "resolved": "https://registry.npmjs.org/minimatch/-/minimatch-3.0.4.tgz",
 794 |       "integrity": "sha512-yJHVQEhyqPLUTgt9B83PXu6W3rx4MvvHvSUvToogpwoGDOUQ+yDrR0HRot+yOCdCO7u4hX3pWft6kWBBcqh0UA==",
 795 |       "dev": true,
 796 |       "requires": {
 797 |         "brace-expansion": "^1.1.7"
 798 |       }
 799 |     },
 800 |     "minimist": {
 801 |       "version": "1.2.5",
 802 |       "resolved": "https://registry.npmjs.org/minimist/-/minimist-1.2.5.tgz",
 803 |       "integrity": "sha512-FM9nNUYrRBAELZQT3xeZQ7fmMOBg6nWNmJKTcgsJeaLstP/UODVpGsr5OhXhhXg6f+qtJ8uiZ+PUxkDWcgIXLw==",
 804 |       "dev": true
 805 |     },
 806 |     "ms": {
 807 |       "version": "2.0.0",
 808 |       "resolved": "https://registry.npmjs.org/ms/-/ms-2.0.0.tgz",
 809 |       "integrity": "sha1-VgiurfwAvmwpAd9fmGF4jeDVl8g="
 810 |     },
 811 |     "negotiator": {
 812 |       "version": "0.6.2",
 813 |       "resolved": "https://registry.npmjs.org/negotiator/-/negotiator-0.6.2.tgz",
 814 |       "integrity": "sha512-hZXc7K2e+PgeI1eDBe/10Ard4ekbfrrqG8Ep+8Jmf4JID2bNg7NvCPOZN+kfF574pFQI7mum2AUqDidoKqcTOw=="
 815 |     },
 816 |     "nodemon": {
 817 |       "version": "2.0.7",
 818 |       "resolved": "https://registry.npmjs.org/nodemon/-/nodemon-2.0.7.tgz",
 819 |       "integrity": "sha512-XHzK69Awgnec9UzHr1kc8EomQh4sjTQ8oRf8TsGrSmHDx9/UmiGG9E/mM3BuTfNeFwdNBvrqQq/RHL0xIeyFOA==",
 820 |       "dev": true,
 821 |       "requires": {
 822 |         "chokidar": "^3.2.2",
 823 |         "debug": "^3.2.6",
 824 |         "ignore-by-default": "^1.0.1",
 825 |         "minimatch": "^3.0.4",
 826 |         "pstree.remy": "^1.1.7",
 827 |         "semver": "^5.7.1",
 828 |         "supports-color": "^5.5.0",
 829 |         "touch": "^3.1.0",
 830 |         "undefsafe": "^2.0.3",
 831 |         "update-notifier": "^4.1.0"
 832 |       },
 833 |       "dependencies": {
 834 |         "debug": {
 835 |           "version": "3.2.7",
 836 |           "resolved": "https://registry.npmjs.org/debug/-/debug-3.2.7.tgz",
 837 |           "integrity": "sha512-CFjzYYAi4ThfiQvizrFQevTTXHtnCqWfe7x1AhgEscTz6ZbLbfoLRLPugTQyBth6f8ZERVUSyWHFD/7Wu4t1XQ==",
 838 |           "dev": true,
 839 |           "requires": {
 840 |             "ms": "^2.1.1"
 841 |           }
 842 |         },
 843 |         "ms": {
 844 |           "version": "2.1.3",
 845 |           "resolved": "https://registry.npmjs.org/ms/-/ms-2.1.3.tgz",
 846 |           "integrity": "sha512-6FlzubTLZG3J2a/NVCAleEhjzq5oxgHyaCU9yYXvcLsvoVaHJq/s5xXI6/XXP6tz7R9xAOtHnSO/tXtF3WRTlA==",
 847 |           "dev": true
 848 |         }
 849 |       }
 850 |     },
 851 |     "nopt": {
 852 |       "version": "1.0.10",
 853 |       "resolved": "https://registry.npmjs.org/nopt/-/nopt-1.0.10.tgz",
 854 |       "integrity": "sha1-bd0hvSoxQXuScn3Vhfim83YI6+4=",
 855 |       "dev": true,
 856 |       "requires": {
 857 |         "abbrev": "1"
 858 |       }
 859 |     },
 860 |     "normalize-path": {
 861 |       "version": "3.0.0",
 862 |       "resolved": "https://registry.npmjs.org/normalize-path/-/normalize-path-3.0.0.tgz",
 863 |       "integrity": "sha512-6eZs5Ls3WtCisHWp9S2GUy8dqkpGi4BVSz3GaqiE6ezub0512ESztXUwUB6C6IKbQkY2Pnb/mD4WYojCRwcwLA==",
 864 |       "dev": true
 865 |     },
 866 |     "normalize-url": {
 867 |       "version": "4.5.0",
 868 |       "resolved": "https://registry.npmjs.org/normalize-url/-/normalize-url-4.5.0.tgz",
 869 |       "integrity": "sha512-2s47yzUxdexf1OhyRi4Em83iQk0aPvwTddtFz4hnSSw9dCEsLEGf6SwIO8ss/19S9iBb5sJaOuTvTGDeZI00BQ==",
 870 |       "dev": true
 871 |     },
 872 |     "on-finished": {
 873 |       "version": "2.3.0",
 874 |       "resolved": "https://registry.npmjs.org/on-finished/-/on-finished-2.3.0.tgz",
 875 |       "integrity": "sha1-IPEzZIGwg811M3mSoWlxqi2QaUc=",
 876 |       "requires": {
 877 |         "ee-first": "1.1.1"
 878 |       }
 879 |     },
 880 |     "once": {
 881 |       "version": "1.4.0",
 882 |       "resolved": "https://registry.npmjs.org/once/-/once-1.4.0.tgz",
 883 |       "integrity": "sha1-WDsap3WWHUsROsF9nFC6753Xa9E=",
 884 |       "dev": true,
 885 |       "requires": {
 886 |         "wrappy": "1"
 887 |       }
 888 |     },
 889 |     "p-cancelable": {
 890 |       "version": "1.1.0",
 891 |       "resolved": "https://registry.npmjs.org/p-cancelable/-/p-cancelable-1.1.0.tgz",
 892 |       "integrity": "sha512-s73XxOZ4zpt1edZYZzvhqFa6uvQc1vwUa0K0BdtIZgQMAJj9IbebH+JkgKZc9h+B05PKHLOTl4ajG1BmNrVZlw==",
 893 |       "dev": true
 894 |     },
 895 |     "package-json": {
 896 |       "version": "6.5.0",
 897 |       "resolved": "https://registry.npmjs.org/package-json/-/package-json-6.5.0.tgz",
 898 |       "integrity": "sha512-k3bdm2n25tkyxcjSKzB5x8kfVxlMdgsbPr0GkZcwHsLpba6cBjqCt1KlcChKEvxHIcTB1FVMuwoijZ26xex5MQ==",
 899 |       "dev": true,
 900 |       "requires": {
 901 |         "got": "^9.6.0",
 902 |         "registry-auth-token": "^4.0.0",
 903 |         "registry-url": "^5.0.0",
 904 |         "semver": "^6.2.0"
 905 |       },
 906 |       "dependencies": {
 907 |         "semver": {
 908 |           "version": "6.3.0",
 909 |           "resolved": "https://registry.npmjs.org/semver/-/semver-6.3.0.tgz",
 910 |           "integrity": "sha512-b39TBaTSfV6yBrapU89p5fKekE2m/NwnDocOVruQFS1/veMgdzuPcnOM34M6CwxW8jH/lxEa5rBoDeUwu5HHTw==",
 911 |           "dev": true
 912 |         }
 913 |       }
 914 |     },
 915 |     "parseurl": {
 916 |       "version": "1.3.3",
 917 |       "resolved": "https://registry.npmjs.org/parseurl/-/parseurl-1.3.3.tgz",
 918 |       "integrity": "sha512-CiyeOxFT/JZyN5m0z9PfXw4SCBJ6Sygz1Dpl0wqjlhDEGGBP1GnsUVEL0p63hoG1fcj3fHynXi9NYO4nWOL+qQ=="
 919 |     },
 920 |     "path-to-regexp": {
 921 |       "version": "0.1.7",
 922 |       "resolved": "https://registry.npmjs.org/path-to-regexp/-/path-to-regexp-0.1.7.tgz",
 923 |       "integrity": "sha1-32BBeABfUi8V60SQ5yR6G/qmf4w="
 924 |     },
 925 |     "picomatch": {
 926 |       "version": "2.2.2",
 927 |       "resolved": "https://registry.npmjs.org/picomatch/-/picomatch-2.2.2.tgz",
 928 |       "integrity": "sha512-q0M/9eZHzmr0AulXyPwNfZjtwZ/RBZlbN3K3CErVrk50T2ASYI7Bye0EvekFY3IP1Nt2DHu0re+V2ZHIpMkuWg==",
 929 |       "dev": true
 930 |     },
 931 |     "prepend-http": {
 932 |       "version": "2.0.0",
 933 |       "resolved": "https://registry.npmjs.org/prepend-http/-/prepend-http-2.0.0.tgz",
 934 |       "integrity": "sha1-6SQ0v6XqjBn0HN/UAddBo8gZ2Jc=",
 935 |       "dev": true
 936 |     },
 937 |     "proxy-addr": {
 938 |       "version": "2.0.6",
 939 |       "resolved": "https://registry.npmjs.org/proxy-addr/-/proxy-addr-2.0.6.tgz",
 940 |       "integrity": "sha512-dh/frvCBVmSsDYzw6n926jv974gddhkFPfiN8hPOi30Wax25QZyZEGveluCgliBnqmuM+UJmBErbAUFIoDbjOw==",
 941 |       "requires": {
 942 |         "forwarded": "~0.1.2",
 943 |         "ipaddr.js": "1.9.1"
 944 |       }
 945 |     },
 946 |     "pstree.remy": {
 947 |       "version": "1.1.8",
 948 |       "resolved": "https://registry.npmjs.org/pstree.remy/-/pstree.remy-1.1.8.tgz",
 949 |       "integrity": "sha512-77DZwxQmxKnu3aR542U+X8FypNzbfJ+C5XQDk3uWjWxn6151aIMGthWYRXTqT1E5oJvg+ljaa2OJi+VfvCOQ8w==",
 950 |       "dev": true
 951 |     },
 952 |     "pump": {
 953 |       "version": "3.0.0",
 954 |       "resolved": "https://registry.npmjs.org/pump/-/pump-3.0.0.tgz",
 955 |       "integrity": "sha512-LwZy+p3SFs1Pytd/jYct4wpv49HiYCqd9Rlc5ZVdk0V+8Yzv6jR5Blk3TRmPL1ft69TxP0IMZGJ+WPFU2BFhww==",
 956 |       "dev": true,
 957 |       "requires": {
 958 |         "end-of-stream": "^1.1.0",
 959 |         "once": "^1.3.1"
 960 |       }
 961 |     },
 962 |     "pupa": {
 963 |       "version": "2.1.1",
 964 |       "resolved": "https://registry.npmjs.org/pupa/-/pupa-2.1.1.tgz",
 965 |       "integrity": "sha512-l1jNAspIBSFqbT+y+5FosojNpVpF94nlI+wDUpqP9enwOTfHx9f0gh5nB96vl+6yTpsJsypeNrwfzPrKuHB41A==",
 966 |       "dev": true,
 967 |       "requires": {
 968 |         "escape-goat": "^2.0.0"
 969 |       }
 970 |     },
 971 |     "qs": {
 972 |       "version": "6.7.0",
 973 |       "resolved": "https://registry.npmjs.org/qs/-/qs-6.7.0.tgz",
 974 |       "integrity": "sha512-VCdBRNFTX1fyE7Nb6FYoURo/SPe62QCaAyzJvUjwRaIsc+NePBEniHlvxFmmX56+HZphIGtV0XeCirBtpDrTyQ=="
 975 |     },
 976 |     "range-parser": {
 977 |       "version": "1.2.1",
 978 |       "resolved": "https://registry.npmjs.org/range-parser/-/range-parser-1.2.1.tgz",
 979 |       "integrity": "sha512-Hrgsx+orqoygnmhFbKaHE6c296J+HTAQXoxEF6gNupROmmGJRoyzfG3ccAveqCBrwr/2yxQ5BVd/GTl5agOwSg=="
 980 |     },
 981 |     "raw-body": {
 982 |       "version": "2.4.0",
 983 |       "resolved": "https://registry.npmjs.org/raw-body/-/raw-body-2.4.0.tgz",
 984 |       "integrity": "sha512-4Oz8DUIwdvoa5qMJelxipzi/iJIi40O5cGV1wNYp5hvZP8ZN0T+jiNkL0QepXs+EsQ9XJ8ipEDoiH70ySUJP3Q==",
 985 |       "requires": {
 986 |         "bytes": "3.1.0",
 987 |         "http-errors": "1.7.2",
 988 |         "iconv-lite": "0.4.24",
 989 |         "unpipe": "1.0.0"
 990 |       }
 991 |     },
 992 |     "rc": {
 993 |       "version": "1.2.8",
 994 |       "resolved": "https://registry.npmjs.org/rc/-/rc-1.2.8.tgz",
 995 |       "integrity": "sha512-y3bGgqKj3QBdxLbLkomlohkvsA8gdAiUQlSBJnBhfn+BPxg4bc62d8TcBW15wavDfgexCgccckhcZvywyQYPOw==",
 996 |       "dev": true,
 997 |       "requires": {
 998 |         "deep-extend": "^0.6.0",
 999 |         "ini": "~1.3.0",
1000 |         "minimist": "^1.2.0",
1001 |         "strip-json-comments": "~2.0.1"
1002 |       }
1003 |     },
1004 |     "readdirp": {
1005 |       "version": "3.5.0",
1006 |       "resolved": "https://registry.npmjs.org/readdirp/-/readdirp-3.5.0.tgz",
1007 |       "integrity": "sha512-cMhu7c/8rdhkHXWsY+osBhfSy0JikwpHK/5+imo+LpeasTF8ouErHrlYkwT0++njiyuDvc7OFY5T3ukvZ8qmFQ==",
1008 |       "dev": true,
1009 |       "requires": {
1010 |         "picomatch": "^2.2.1"
1011 |       }
1012 |     },
1013 |     "registry-auth-token": {
1014 |       "version": "4.2.1",
1015 |       "resolved": "https://registry.npmjs.org/registry-auth-token/-/registry-auth-token-4.2.1.tgz",
1016 |       "integrity": "sha512-6gkSb4U6aWJB4SF2ZvLb76yCBjcvufXBqvvEx1HbmKPkutswjW1xNVRY0+daljIYRbogN7O0etYSlbiaEQyMyw==",
1017 |       "dev": true,
1018 |       "requires": {
1019 |         "rc": "^1.2.8"
1020 |       }
1021 |     },
1022 |     "registry-url": {
1023 |       "version": "5.1.0",
1024 |       "resolved": "https://registry.npmjs.org/registry-url/-/registry-url-5.1.0.tgz",
1025 |       "integrity": "sha512-8acYXXTI0AkQv6RAOjE3vOaIXZkT9wo4LOFbBKYQEEnnMNBpKqdUrI6S4NT0KPIo/WVvJ5tE/X5LF/TQUf0ekw==",
1026 |       "dev": true,
1027 |       "requires": {
1028 |         "rc": "^1.2.8"
1029 |       }
1030 |     },
1031 |     "responselike": {
1032 |       "version": "1.0.2",
1033 |       "resolved": "https://registry.npmjs.org/responselike/-/responselike-1.0.2.tgz",
1034 |       "integrity": "sha1-kYcg7ztjHFZCvgaPFa3lpG9Loec=",
1035 |       "dev": true,
1036 |       "requires": {
1037 |         "lowercase-keys": "^1.0.0"
1038 |       }
1039 |     },
1040 |     "safe-buffer": {
1041 |       "version": "5.1.2",
1042 |       "resolved": "https://registry.npmjs.org/safe-buffer/-/safe-buffer-5.1.2.tgz",
1043 |       "integrity": "sha512-Gd2UZBJDkXlY7GbJxfsE8/nvKkUEU1G38c1siN6QP6a9PT9MmHB8GnpscSmMJSoF8LOIrt8ud/wPtojys4G6+g=="
1044 |     },
1045 |     "safer-buffer": {
1046 |       "version": "2.1.2",
1047 |       "resolved": "https://registry.npmjs.org/safer-buffer/-/safer-buffer-2.1.2.tgz",
1048 |       "integrity": "sha512-YZo3K82SD7Riyi0E1EQPojLz7kpepnSQI9IyPbHHg1XXXevb5dJI7tpyN2ADxGcQbHG7vcyRHk0cbwqcQriUtg=="
1049 |     },
1050 |     "semver": {
1051 |       "version": "5.7.1",
1052 |       "resolved": "https://registry.npmjs.org/semver/-/semver-5.7.1.tgz",
1053 |       "integrity": "sha512-sauaDf/PZdVgrLTNYHRtpXa1iRiKcaebiKQ1BJdpQlWH2lCvexQdX55snPFyK7QzpudqbCI0qXFfOasHdyNDGQ==",
1054 |       "dev": true
1055 |     },
1056 |     "semver-diff": {
1057 |       "version": "3.1.1",
1058 |       "resolved": "https://registry.npmjs.org/semver-diff/-/semver-diff-3.1.1.tgz",
1059 |       "integrity": "sha512-GX0Ix/CJcHyB8c4ykpHGIAvLyOwOobtM/8d+TQkAd81/bEjgPHrfba41Vpesr7jX/t8Uh+R3EX9eAS5be+jQYg==",
1060 |       "dev": true,
1061 |       "requires": {
1062 |         "semver": "^6.3.0"
1063 |       },
1064 |       "dependencies": {
1065 |         "semver": {
1066 |           "version": "6.3.0",
1067 |           "resolved": "https://registry.npmjs.org/semver/-/semver-6.3.0.tgz",
1068 |           "integrity": "sha512-b39TBaTSfV6yBrapU89p5fKekE2m/NwnDocOVruQFS1/veMgdzuPcnOM34M6CwxW8jH/lxEa5rBoDeUwu5HHTw==",
1069 |           "dev": true
1070 |         }
1071 |       }
1072 |     },
1073 |     "send": {
1074 |       "version": "0.17.1",
1075 |       "resolved": "https://registry.npmjs.org/send/-/send-0.17.1.tgz",
1076 |       "integrity": "sha512-BsVKsiGcQMFwT8UxypobUKyv7irCNRHk1T0G680vk88yf6LBByGcZJOTJCrTP2xVN6yI+XjPJcNuE3V4fT9sAg==",
1077 |       "requires": {
1078 |         "debug": "2.6.9",
1079 |         "depd": "~1.1.2",
1080 |         "destroy": "~1.0.4",
1081 |         "encodeurl": "~1.0.2",
1082 |         "escape-html": "~1.0.3",
1083 |         "etag": "~1.8.1",
1084 |         "fresh": "0.5.2",
1085 |         "http-errors": "~1.7.2",
1086 |         "mime": "1.6.0",
1087 |         "ms": "2.1.1",
1088 |         "on-finished": "~2.3.0",
1089 |         "range-parser": "~1.2.1",
1090 |         "statuses": "~1.5.0"
1091 |       },
1092 |       "dependencies": {
1093 |         "ms": {
1094 |           "version": "2.1.1",
1095 |           "resolved": "https://registry.npmjs.org/ms/-/ms-2.1.1.tgz",
1096 |           "integrity": "sha512-tgp+dl5cGk28utYktBsrFqA7HKgrhgPsg6Z/EfhWI4gl1Hwq8B/GmY/0oXZ6nF8hDVesS/FpnYaD/kOWhYQvyg=="
1097 |         }
1098 |       }
1099 |     },
1100 |     "serve-static": {
1101 |       "version": "1.14.1",
1102 |       "resolved": "https://registry.npmjs.org/serve-static/-/serve-static-1.14.1.tgz",
1103 |       "integrity": "sha512-JMrvUwE54emCYWlTI+hGrGv5I8dEwmco/00EvkzIIsR7MqrHonbD9pO2MOfFnpFntl7ecpZs+3mW+XbQZu9QCg==",
1104 |       "requires": {
1105 |         "encodeurl": "~1.0.2",
1106 |         "escape-html": "~1.0.3",
1107 |         "parseurl": "~1.3.3",
1108 |         "send": "0.17.1"
1109 |       }
1110 |     },
1111 |     "setprototypeof": {
1112 |       "version": "1.1.1",
1113 |       "resolved": "https://registry.npmjs.org/setprototypeof/-/setprototypeof-1.1.1.tgz",
1114 |       "integrity": "sha512-JvdAWfbXeIGaZ9cILp38HntZSFSo3mWg6xGcJJsd+d4aRMOqauag1C63dJfDw7OaMYwEbHMOxEZ1lqVRYP2OAw=="
1115 |     },
1116 |     "signal-exit": {
1117 |       "version": "3.0.3",
1118 |       "resolved": "https://registry.npmjs.org/signal-exit/-/signal-exit-3.0.3.tgz",
1119 |       "integrity": "sha512-VUJ49FC8U1OxwZLxIbTTrDvLnf/6TDgxZcK8wxR8zs13xpx7xbG60ndBlhNrFi2EMuFRoeDoJO7wthSLq42EjA==",
1120 |       "dev": true
1121 |     },
1122 |     "statuses": {
1123 |       "version": "1.5.0",
1124 |       "resolved": "https://registry.npmjs.org/statuses/-/statuses-1.5.0.tgz",
1125 |       "integrity": "sha1-Fhx9rBd2Wf2YEfQ3cfqZOBR4Yow="
1126 |     },
1127 |     "string-width": {
1128 |       "version": "4.2.2",
1129 |       "resolved": "https://registry.npmjs.org/string-width/-/string-width-4.2.2.tgz",
1130 |       "integrity": "sha512-XBJbT3N4JhVumXE0eoLU9DCjcaF92KLNqTmFCnG1pf8duUxFGwtP6AD6nkjw9a3IdiRtL3E2w3JDiE/xi3vOeA==",
1131 |       "dev": true,
1132 |       "requires": {
1133 |         "emoji-regex": "^8.0.0",
1134 |         "is-fullwidth-code-point": "^3.0.0",
1135 |         "strip-ansi": "^6.0.0"
1136 |       },
1137 |       "dependencies": {
1138 |         "ansi-regex": {
1139 |           "version": "5.0.0",
1140 |           "resolved": "https://registry.npmjs.org/ansi-regex/-/ansi-regex-5.0.0.tgz",
1141 |           "integrity": "sha512-bY6fj56OUQ0hU1KjFNDQuJFezqKdrAyFdIevADiqrWHwSlbmBNMHp5ak2f40Pm8JTFyM2mqxkG6ngkHO11f/lg==",
1142 |           "dev": true
1143 |         },
1144 |         "emoji-regex": {
1145 |           "version": "8.0.0",
1146 |           "resolved": "https://registry.npmjs.org/emoji-regex/-/emoji-regex-8.0.0.tgz",
1147 |           "integrity": "sha512-MSjYzcWNOA0ewAHpz0MxpYFvwg6yjy1NG3xteoqz644VCo/RPgnr1/GGt+ic3iJTzQ8Eu3TdM14SawnVUmGE6A==",
1148 |           "dev": true
1149 |         },
1150 |         "is-fullwidth-code-point": {
1151 |           "version": "3.0.0",
1152 |           "resolved": "https://registry.npmjs.org/is-fullwidth-code-point/-/is-fullwidth-code-point-3.0.0.tgz",
1153 |           "integrity": "sha512-zymm5+u+sCsSWyD9qNaejV3DFvhCKclKdizYaJUuHA83RLjb7nSuGnddCHGv0hk+KY7BMAlsWeK4Ueg6EV6XQg==",
1154 |           "dev": true
1155 |         },
1156 |         "strip-ansi": {
1157 |           "version": "6.0.0",
1158 |           "resolved": "https://registry.npmjs.org/strip-ansi/-/strip-ansi-6.0.0.tgz",
1159 |           "integrity": "sha512-AuvKTrTfQNYNIctbR1K/YGTR1756GycPsg7b9bdV9Duqur4gv6aKqHXah67Z8ImS7WEz5QVcOtlfW2rZEugt6w==",
1160 |           "dev": true,
1161 |           "requires": {
1162 |             "ansi-regex": "^5.0.0"
1163 |           }
1164 |         }
1165 |       }
1166 |     },
1167 |     "strip-ansi": {
1168 |       "version": "5.2.0",
1169 |       "resolved": "https://registry.npmjs.org/strip-ansi/-/strip-ansi-5.2.0.tgz",
1170 |       "integrity": "sha512-DuRs1gKbBqsMKIZlrffwlug8MHkcnpjs5VPmL1PAh+mA30U0DTotfDZ0d2UUsXpPmPmMMJ6W773MaA3J+lbiWA==",
1171 |       "dev": true,
1172 |       "requires": {
1173 |         "ansi-regex": "^4.1.0"
1174 |       }
1175 |     },
1176 |     "strip-json-comments": {
1177 |       "version": "2.0.1",
1178 |       "resolved": "https://registry.npmjs.org/strip-json-comments/-/strip-json-comments-2.0.1.tgz",
1179 |       "integrity": "sha1-PFMZQukIwml8DsNEhYwobHygpgo=",
1180 |       "dev": true
1181 |     },
1182 |     "supports-color": {
1183 |       "version": "5.5.0",
1184 |       "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-5.5.0.tgz",
1185 |       "integrity": "sha512-QjVjwdXIt408MIiAqCX4oUKsgU2EqAGzs2Ppkm4aQYbjm+ZEWEcW4SfFNTr4uMNZma0ey4f5lgLrkB0aX0QMow==",
1186 |       "dev": true,
1187 |       "requires": {
1188 |         "has-flag": "^3.0.0"
1189 |       }
1190 |     },
1191 |     "term-size": {
1192 |       "version": "2.2.1",
1193 |       "resolved": "https://registry.npmjs.org/term-size/-/term-size-2.2.1.tgz",
1194 |       "integrity": "sha512-wK0Ri4fOGjv/XPy8SBHZChl8CM7uMc5VML7SqiQ0zG7+J5Vr+RMQDoHa2CNT6KHUnTGIXH34UDMkPzAUyapBZg==",
1195 |       "dev": true
1196 |     },
1197 |     "to-readable-stream": {
1198 |       "version": "1.0.0",
1199 |       "resolved": "https://registry.npmjs.org/to-readable-stream/-/to-readable-stream-1.0.0.tgz",
1200 |       "integrity": "sha512-Iq25XBt6zD5npPhlLVXGFN3/gyR2/qODcKNNyTMd4vbm39HUaOiAM4PMq0eMVC/Tkxz+Zjdsc55g9yyz+Yq00Q==",
1201 |       "dev": true
1202 |     },
1203 |     "to-regex-range": {
1204 |       "version": "5.0.1",
1205 |       "resolved": "https://registry.npmjs.org/to-regex-range/-/to-regex-range-5.0.1.tgz",
1206 |       "integrity": "sha512-65P7iz6X5yEr1cwcgvQxbbIw7Uk3gOy5dIdtZ4rDveLqhrdJP+Li/Hx6tyK0NEb+2GCyneCMJiGqrADCSNk8sQ==",
1207 |       "dev": true,
1208 |       "requires": {
1209 |         "is-number": "^7.0.0"
1210 |       }
1211 |     },
1212 |     "toidentifier": {
1213 |       "version": "1.0.0",
1214 |       "resolved": "https://registry.npmjs.org/toidentifier/-/toidentifier-1.0.0.tgz",
1215 |       "integrity": "sha512-yaOH/Pk/VEhBWWTlhI+qXxDFXlejDGcQipMlyxda9nthulaxLZUNcUqFxokp0vcYnvteJln5FNQDRrxj3YcbVw=="
1216 |     },
1217 |     "touch": {
1218 |       "version": "3.1.0",
1219 |       "resolved": "https://registry.npmjs.org/touch/-/touch-3.1.0.tgz",
1220 |       "integrity": "sha512-WBx8Uy5TLtOSRtIq+M03/sKDrXCLHxwDcquSP2c43Le03/9serjQBIztjRz6FkJez9D/hleyAXTBGLwwZUw9lA==",
1221 |       "dev": true,
1222 |       "requires": {
1223 |         "nopt": "~1.0.10"
1224 |       }
1225 |     },
1226 |     "type-fest": {
1227 |       "version": "0.8.1",
1228 |       "resolved": "https://registry.npmjs.org/type-fest/-/type-fest-0.8.1.tgz",
1229 |       "integrity": "sha512-4dbzIzqvjtgiM5rw1k5rEHtBANKmdudhGyBEajN01fEyhaAIhsoKNy6y7+IN93IfpFtwY9iqi7kD+xwKhQsNJA==",
1230 |       "dev": true
1231 |     },
1232 |     "type-is": {
1233 |       "version": "1.6.18",
1234 |       "resolved": "https://registry.npmjs.org/type-is/-/type-is-1.6.18.tgz",
1235 |       "integrity": "sha512-TkRKr9sUTxEH8MdfuCSP7VizJyzRNMjj2J2do2Jr3Kym598JVdEksuzPQCnlFPW4ky9Q+iA+ma9BGm06XQBy8g==",
1236 |       "requires": {
1237 |         "media-typer": "0.3.0",
1238 |         "mime-types": "~2.1.24"
1239 |       }
1240 |     },
1241 |     "typedarray-to-buffer": {
1242 |       "version": "3.1.5",
1243 |       "resolved": "https://registry.npmjs.org/typedarray-to-buffer/-/typedarray-to-buffer-3.1.5.tgz",
1244 |       "integrity": "sha512-zdu8XMNEDepKKR+XYOXAVPtWui0ly0NtohUscw+UmaHiAWT8hrV1rr//H6V+0DvJ3OQ19S979M0laLfX8rm82Q==",
1245 |       "dev": true,
1246 |       "requires": {
1247 |         "is-typedarray": "^1.0.0"
1248 |       }
1249 |     },
1250 |     "undefsafe": {
1251 |       "version": "2.0.3",
1252 |       "resolved": "https://registry.npmjs.org/undefsafe/-/undefsafe-2.0.3.tgz",
1253 |       "integrity": "sha512-nrXZwwXrD/T/JXeygJqdCO6NZZ1L66HrxM/Z7mIq2oPanoN0F1nLx3lwJMu6AwJY69hdixaFQOuoYsMjE5/C2A==",
1254 |       "dev": true,
1255 |       "requires": {
1256 |         "debug": "^2.2.0"
1257 |       }
1258 |     },
1259 |     "unique-string": {
1260 |       "version": "2.0.0",
1261 |       "resolved": "https://registry.npmjs.org/unique-string/-/unique-string-2.0.0.tgz",
1262 |       "integrity": "sha512-uNaeirEPvpZWSgzwsPGtU2zVSTrn/8L5q/IexZmH0eH6SA73CmAA5U4GwORTxQAZs95TAXLNqeLoPPNO5gZfWg==",
1263 |       "dev": true,
1264 |       "requires": {
1265 |         "crypto-random-string": "^2.0.0"
1266 |       }
1267 |     },
1268 |     "unpipe": {
1269 |       "version": "1.0.0",
1270 |       "resolved": "https://registry.npmjs.org/unpipe/-/unpipe-1.0.0.tgz",
1271 |       "integrity": "sha1-sr9O6FFKrmFltIF4KdIbLvSZBOw="
1272 |     },
1273 |     "update-notifier": {
1274 |       "version": "4.1.3",
1275 |       "resolved": "https://registry.npmjs.org/update-notifier/-/update-notifier-4.1.3.tgz",
1276 |       "integrity": "sha512-Yld6Z0RyCYGB6ckIjffGOSOmHXj1gMeE7aROz4MG+XMkmixBX4jUngrGXNYz7wPKBmtoD4MnBa2Anu7RSKht/A==",
1277 |       "dev": true,
1278 |       "requires": {
1279 |         "boxen": "^4.2.0",
1280 |         "chalk": "^3.0.0",
1281 |         "configstore": "^5.0.1",
1282 |         "has-yarn": "^2.1.0",
1283 |         "import-lazy": "^2.1.0",
1284 |         "is-ci": "^2.0.0",
1285 |         "is-installed-globally": "^0.3.1",
1286 |         "is-npm": "^4.0.0",
1287 |         "is-yarn-global": "^0.3.0",
1288 |         "latest-version": "^5.0.0",
1289 |         "pupa": "^2.0.1",
1290 |         "semver-diff": "^3.1.1",
1291 |         "xdg-basedir": "^4.0.0"
1292 |       }
1293 |     },
1294 |     "url-parse-lax": {
1295 |       "version": "3.0.0",
1296 |       "resolved": "https://registry.npmjs.org/url-parse-lax/-/url-parse-lax-3.0.0.tgz",
1297 |       "integrity": "sha1-FrXK/Afb42dsGxmZF3gj1lA6yww=",
1298 |       "dev": true,
1299 |       "requires": {
1300 |         "prepend-http": "^2.0.0"
1301 |       }
1302 |     },
1303 |     "utils-merge": {
1304 |       "version": "1.0.1",
1305 |       "resolved": "https://registry.npmjs.org/utils-merge/-/utils-merge-1.0.1.tgz",
1306 |       "integrity": "sha1-n5VxD1CiZ5R7LMwSR0HBAoQn5xM="
1307 |     },
1308 |     "vary": {
1309 |       "version": "1.1.2",
1310 |       "resolved": "https://registry.npmjs.org/vary/-/vary-1.1.2.tgz",
1311 |       "integrity": "sha1-IpnwLG3tMNSllhsLn3RSShj2NPw="
1312 |     },
1313 |     "widest-line": {
1314 |       "version": "3.1.0",
1315 |       "resolved": "https://registry.npmjs.org/widest-line/-/widest-line-3.1.0.tgz",
1316 |       "integrity": "sha512-NsmoXalsWVDMGupxZ5R08ka9flZjjiLvHVAWYOKtiKM8ujtZWr9cRffak+uSE48+Ob8ObalXpwyeUiyDD6QFgg==",
1317 |       "dev": true,
1318 |       "requires": {
1319 |         "string-width": "^4.0.0"
1320 |       }
1321 |     },
1322 |     "wrappy": {
1323 |       "version": "1.0.2",
1324 |       "resolved": "https://registry.npmjs.org/wrappy/-/wrappy-1.0.2.tgz",
1325 |       "integrity": "sha1-tSQ9jz7BqjXxNkYFvA0QNuMKtp8=",
1326 |       "dev": true
1327 |     },
1328 |     "write-file-atomic": {
1329 |       "version": "3.0.3",
1330 |       "resolved": "https://registry.npmjs.org/write-file-atomic/-/write-file-atomic-3.0.3.tgz",
1331 |       "integrity": "sha512-AvHcyZ5JnSfq3ioSyjrBkH9yW4m7Ayk8/9My/DD9onKeu/94fwrMocemO2QAJFAlnnDN+ZDS+ZjAR5ua1/PV/Q==",
1332 |       "dev": true,
1333 |       "requires": {
1334 |         "imurmurhash": "^0.1.4",
1335 |         "is-typedarray": "^1.0.0",
1336 |         "signal-exit": "^3.0.2",
1337 |         "typedarray-to-buffer": "^3.1.5"
1338 |       }
1339 |     },
1340 |     "xdg-basedir": {
1341 |       "version": "4.0.0",
1342 |       "resolved": "https://registry.npmjs.org/xdg-basedir/-/xdg-basedir-4.0.0.tgz",
1343 |       "integrity": "sha512-PSNhEJDejZYV7h50BohL09Er9VaIefr2LMAf3OEmpCkjOi34eYyQYAXUTjEQtZJTKcF0E2UKTh+osDLsgNim9Q==",
1344 |       "dev": true
1345 |     }
1346 |   }
1347 | }
1348 | 


--------------------------------------------------------------------------------
/fonts/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "parser-blocking",
 3 |   "version": "1.0.0",
 4 |   "description": "",
 5 |   "main": "server.js",
 6 |   "scripts": {
 7 |     "start": "nodemon server.js",
 8 |     "test": "echo \"Error: no test specified\" && exit 1"
 9 |   },
10 |   "config": {
11 |     "port": 3001,
12 |     "font-delay": 0
13 |   },
14 |   "author": "",
15 |   "license": "ISC",
16 |   "dependencies": {
17 |     "express": "^4.17.1"
18 |   },
19 |   "devDependencies": {
20 |     "nodemon": "^2.0.7"
21 |   }
22 | }
23 | 


--------------------------------------------------------------------------------
/fonts/sansation_light.woff:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/devkodeio/web-performance-bootcamp/0c56374d01efcf5f9694d4e22e78ed1082870bea/fonts/sansation_light.woff


--------------------------------------------------------------------------------
/fonts/server.js:
--------------------------------------------------------------------------------
 1 | const fs = require("fs");
 2 | const express = require("express");
 3 | const config = JSON.parse(fs.readFileSync("package.json")).config;
 4 | 
 5 | const server = express();
 6 | 
 7 | server.use((req, res, next) => {
 8 |     if(req.url.slice(-4) == 'woff') {
 9 |         setTimeout(next, config["font-delay"]);
10 |     }else{
11 |         next();
12 |     }
13 | });
14 | 
15 | server.use(express.static('./', { etag: false }));
16 | 
17 | const port = parseInt(config["port"], 10);
18 | server.listen(port, () => {
19 |     console.log(`Server is listening on http://localhost:${port}/`);
20 | });
21 | 


--------------------------------------------------------------------------------
/layers/.gitignore:
--------------------------------------------------------------------------------
1 | node_modules/
2 | .DS_Store
3 | 


--------------------------------------------------------------------------------
/layers/1/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 |   <head>
 4 |     <meta charset="UTF-8" />
 5 |     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
 6 |     <title>Layers</title>
 7 |     <link rel="stylesheet" href="style.css" />
 8 |   </head>
 9 |   <body>
10 |     <div class="sidebar-wrapper">
11 |       <div id="sidebar" class="sidebar"></div>
12 |     </div>
13 |     <div class="hamburger" id="hamburger">
14 |       Sidebar
15 |     </div>
16 |     <div id="container">
17 |     </div>
18 |     <script src="./script.js"></script>
19 |   </body>
20 | </html>
21 | 


--------------------------------------------------------------------------------
/layers/1/script.js:
--------------------------------------------------------------------------------
 1 | document.addEventListener("DOMContentLoaded", (event) => {
 2 |   document.getElementById("hamburger").addEventListener("click", () => {
 3 |     document.getElementById("sidebar").classList.toggle("is-open");
 4 |   });
 5 | 
 6 |   const fragment = document.createDocumentFragment();
 7 |   for (let i = 0; i < 1000; i++) {
 8 |     const grid = document.createElement("div");
 9 |     grid.classList.add("grid");
10 |     const col = Math.floor(Math.random() * 7);
11 |     for (let i = 0; i < col; i++) {
12 |       const div = document.createElement("div");
13 |         div.innerHTML = `
14 |               Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod
15 |               tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim
16 |               veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea
17 |               commodo consequat.
18 |               `;
19 |       grid.append(div);
20 |     }
21 |     fragment.append(grid);
22 |   }
23 |   document.getElementById("container").append(fragment);
24 | });
25 | 


--------------------------------------------------------------------------------
/layers/1/style.css:
--------------------------------------------------------------------------------
 1 | * {
 2 |     box-sizing: border-box;
 3 | }
 4 | 
 5 | body {
 6 |   height: 100vh;
 7 |   display: flex;
 8 |   flex-direction: column;
 9 |   align-items: center;
10 |   font-family: sans-serif;
11 | }
12 | 
13 | .hamburger {
14 |     background: #3c99c2;
15 |     color: #fff;
16 |     width: 100%;
17 |     padding: 3px;
18 |     text-align: center;
19 |     text-transform: uppercase;
20 |     cursor: pointer;
21 |     margin-bottom: 20px;
22 | } 
23 | 
24 | .sidebar-wrapper {
25 |   position: absolute;
26 |   z-index: 2;
27 |   top: 0;
28 |   left: 0;
29 |   bottom: 0;
30 | }
31 | 
32 | .sidebar {
33 |   position: absolute;
34 |   left: 0;
35 |   width: 0;
36 |   height: 100%;
37 |   z-index: 2;
38 |   background-color: #000;
39 |   overflow-x: hidden;
40 |   transition: 1s;
41 | }
42 | 
43 | .sidebar.is-open {
44 |   width: 450px;
45 | }
46 | 
47 | #container {
48 |   width: 100%;
49 | }
50 | 
51 | .grid {
52 |   display: grid;
53 |   gap: 1rem;
54 |   grid-auto-flow: column;
55 |   margin: 0 0 1rem 0;
56 | }
57 | 
58 | .grid > div {
59 |   height: 100px;
60 |   background: #46b8e9;
61 |   color: #fff;
62 |   overflow: hidden;
63 |   min-width: 10px;
64 |   padding: 10px;
65 | }
66 | 


--------------------------------------------------------------------------------
/layers/2/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 |   <head>
 4 |     <meta charset="UTF-8" />
 5 |     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
 6 |     <title>Layers</title>
 7 |     <link rel="stylesheet" href="style.css" />
 8 |   </head>
 9 |   <body>
10 |     <div class="sidebar-wrapper">
11 |       <div id="sidebar" class="sidebar"></div>
12 |     </div>
13 |     <div class="hamburger" id="hamburger">
14 |       Sidebar
15 |     </div>
16 |     <div id="container">
17 |     </div>
18 |     <script src="./script.js"></script>
19 |   </body>
20 | </html>
21 | 


--------------------------------------------------------------------------------
/layers/2/script.js:
--------------------------------------------------------------------------------
 1 | document.addEventListener("DOMContentLoaded", (event) => {
 2 |   document.getElementById("hamburger").addEventListener("click", () => {
 3 |     document.getElementById("sidebar").classList.toggle("is-open");
 4 |   });
 5 | 
 6 |   const fragment = document.createDocumentFragment();
 7 |   for (let i = 0; i < 1000; i++) {
 8 |     const grid = document.createElement("div");
 9 |     grid.classList.add("grid");
10 |     const col = Math.floor(Math.random() * 7);
11 |     for (let i = 0; i < col; i++) {
12 |       const div = document.createElement("div");
13 |         div.innerHTML = `
14 |               Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod
15 |               tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim
16 |               veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea
17 |               commodo consequat.
18 |               `;
19 |       grid.append(div);
20 |     }
21 |     fragment.append(grid);
22 |   }
23 |   document.getElementById("container").append(fragment);
24 | });
25 | 


--------------------------------------------------------------------------------
/layers/2/style.css:
--------------------------------------------------------------------------------
 1 | * {
 2 |     box-sizing: border-box;
 3 | }
 4 | 
 5 | body {
 6 |   height: 100vh;
 7 |   display: flex;
 8 |   flex-direction: column;
 9 |   align-items: center;
10 |   font-family: sans-serif;
11 | }
12 | 
13 | .hamburger {
14 |     background: #3c99c2;
15 |     color: #fff;
16 |     width: 100%;
17 |     padding: 3px;
18 |     text-align: center;
19 |     text-transform: uppercase;
20 |     cursor: pointer;
21 |     margin-bottom: 20px;
22 | } 
23 | 
24 | .sidebar-wrapper {
25 |   position: absolute;
26 |   z-index: 2;
27 |   top: 0;
28 |   left: 0;
29 |   bottom: 0;
30 | }
31 | 
32 | .sidebar {
33 |   position: absolute;
34 |   left: -450px;
35 |   width: 450px;
36 |   height: 100%;
37 |   transform: translateX(0);
38 |   z-index: 2;
39 |   background-color: #000;
40 |   overflow-x: hidden;
41 |   transition: 1s;
42 | }
43 | 
44 | .sidebar.is-open {
45 |   transform: translateX(450px);
46 | }
47 | 
48 | #container {
49 |   width: 100%;
50 | }
51 | 
52 | .grid {
53 |   display: grid;
54 |   gap: 1rem;
55 |   grid-auto-flow: column;
56 |   margin: 0 0 1rem 0;
57 | }
58 | 
59 | .grid > div {
60 |   height: 100px;
61 |   background: #46b8e9;
62 |   color: #fff;
63 |   overflow: hidden;
64 |   min-width: 10px;
65 |   padding: 10px;
66 | }
67 | 


--------------------------------------------------------------------------------
/layers/3/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 |   <head>
 4 |     <meta charset="UTF-8" />
 5 |     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
 6 |     <title>Layers</title>
 7 |     <link rel="stylesheet" href="style.css" />
 8 |   </head>
 9 |   <body>
10 |     <div class="sidebar-wrapper">
11 |       <div id="sidebar" class="sidebar"></div>
12 |     </div>
13 |     <div class="hamburger" id="hamburger">
14 |       Sidebar
15 |     </div>
16 |     <div id="container">
17 |     </div>
18 |     <script src="./script.js"></script>
19 |   </body>
20 | </html>
21 | 


--------------------------------------------------------------------------------
/layers/3/script.js:
--------------------------------------------------------------------------------
 1 | document.addEventListener("DOMContentLoaded", (event) => {
 2 |   document.getElementById("hamburger").addEventListener("click", () => {
 3 |     document.getElementById("sidebar").classList.toggle("is-open");
 4 |   });
 5 | 
 6 |   const fragment = document.createDocumentFragment();
 7 |   for (let i = 0; i < 1000; i++) {
 8 |     const grid = document.createElement("div");
 9 |     grid.classList.add("grid");
10 |     const col = Math.floor(Math.random() * 7);
11 |     for (let i = 0; i < col; i++) {
12 |       const div = document.createElement("div");
13 |         div.innerHTML = `
14 |               Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod
15 |               tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim
16 |               veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea
17 |               commodo consequat.
18 |               `;
19 |       grid.append(div);
20 |     }
21 |     fragment.append(grid);
22 |   }
23 |   document.getElementById("container").append(fragment);
24 | });
25 | 


--------------------------------------------------------------------------------
/layers/3/style.css:
--------------------------------------------------------------------------------
 1 | * {
 2 |     box-sizing: border-box;
 3 | }
 4 | 
 5 | body {
 6 |   height: 100vh;
 7 |   display: flex;
 8 |   flex-direction: column;
 9 |   align-items: center;
10 |   font-family: sans-serif;
11 | }
12 | 
13 | .hamburger {
14 |     background: #3c99c2;
15 |     color: #fff;
16 |     width: 100%;
17 |     padding: 3px;
18 |     text-align: center;
19 |     text-transform: uppercase;
20 |     cursor: pointer;
21 |     margin-bottom: 20px;
22 | } 
23 | 
24 | .sidebar-wrapper {
25 |   position: absolute;
26 |   z-index: 2;
27 |   top: 0;
28 |   left: 0;
29 |   bottom: 0;
30 | }
31 | 
32 | .sidebar {
33 |   position: absolute;
34 |   left: -450px;
35 |   width: 450px;
36 |   height: 100%;
37 |   transform: translateX(0);
38 |   z-index: 2;
39 |   background-color: #000;
40 |   overflow-x: hidden;
41 |   transition: 1s;
42 |   will-change: transform;
43 | }
44 | 
45 | .sidebar.is-open {
46 |   transform: translateX(450px);
47 | }
48 | 
49 | #container {
50 |   width: 100%;
51 | }
52 | 
53 | .grid {
54 |   display: grid;
55 |   gap: 1rem;
56 |   grid-auto-flow: column;
57 |   margin: 0 0 1rem 0;
58 | }
59 | 
60 | .grid > div {
61 |   height: 100px;
62 |   background: #46b8e9;
63 |   color: #fff;
64 |   overflow: hidden;
65 |   min-width: 10px;
66 |   padding: 10px;
67 | }
68 | 


--------------------------------------------------------------------------------
/layers/4/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 |   <head>
 4 |     <meta charset="UTF-8" />
 5 |     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
 6 |     <title>Layers</title>
 7 |     <link rel="stylesheet" href="style.css" />
 8 |   </head>
 9 |   <body>
10 |     <div class="sidebar-wrapper">
11 |       <div id="sidebar" class="sidebar"></div>
12 |     </div>
13 |     <div class="hamburger" id="hamburger">
14 |       Sidebar
15 |     </div>
16 |     <div id="container">
17 |     </div>
18 |     <script src="./script.js"></script>
19 |   </body>
20 | </html>
21 | 


--------------------------------------------------------------------------------
/layers/4/script.js:
--------------------------------------------------------------------------------
 1 | document.addEventListener("DOMContentLoaded", (event) => {
 2 |   document.getElementById("hamburger").addEventListener("click", () => {
 3 |     document.getElementById("sidebar").classList.toggle("is-open");
 4 |   });
 5 | 
 6 |   const fragment = document.createDocumentFragment();
 7 |   for (let i = 0; i < 1000; i++) {
 8 |     const grid = document.createElement("div");
 9 |     grid.classList.add("grid");
10 |     const col = Math.floor(Math.random() * 7);
11 |     for (let i = 0; i < col; i++) {
12 |       const div = document.createElement("div");
13 |         div.innerHTML = `
14 |               Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod
15 |               tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim
16 |               veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea
17 |               commodo consequat.
18 |               `;
19 |       grid.append(div);
20 |     }
21 |     fragment.append(grid);
22 |   }
23 |   document.getElementById("container").append(fragment);
24 | });
25 | 


--------------------------------------------------------------------------------
/layers/4/style.css:
--------------------------------------------------------------------------------
 1 | * {
 2 |     box-sizing: border-box;
 3 | }
 4 | 
 5 | body {
 6 |   height: 100vh;
 7 |   display: flex;
 8 |   flex-direction: column;
 9 |   align-items: center;
10 |   font-family: sans-serif;
11 | }
12 | 
13 | .hamburger {
14 |     background: #3c99c2;
15 |     color: #fff;
16 |     width: 100%;
17 |     padding: 3px;
18 |     text-align: center;
19 |     text-transform: uppercase;
20 |     cursor: pointer;
21 |     margin-bottom: 20px;
22 | } 
23 | 
24 | .sidebar-wrapper {
25 |   position: absolute;
26 |   z-index: 2;
27 |   top: 0;
28 |   left: 0;
29 |   bottom: 0;
30 | }
31 | 
32 | .sidebar {
33 |   position: absolute;
34 |   left: -450px;
35 |   width: 450px;
36 |   height: 100%;
37 |   transform: translateX(0);
38 |   z-index: 2;
39 |   background-color: #000;
40 |   overflow-x: hidden;
41 |   transition: 1s;
42 |   will-change: transform;
43 | }
44 | 
45 | .sidebar.is-open {
46 |   transform: translateX(450px);
47 | }
48 | 
49 | #container {
50 |   width: 100%;
51 | }
52 | 
53 | .grid {
54 |   display: grid;
55 |   gap: 1rem;
56 |   grid-auto-flow: column;
57 |   margin: 0 0 1rem 0;
58 | }
59 | 
60 | .grid > div {
61 |   height: 100px;
62 |   background: #46b8e9;
63 |   color: #fff;
64 |   overflow: hidden;
65 |   min-width: 10px;
66 |   padding: 10px;
67 | }
68 | 


--------------------------------------------------------------------------------
/layers/5/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 |   <head>
 4 |     <meta charset="UTF-8" />
 5 |     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
 6 |     <title>Layers</title>
 7 |     <style>
 8 |         .fixed {
 9 |             position: fixed;
10 |             top: 0;
11 |         }
12 |         .container {
13 |             margin-top: 30px;
14 |         }
15 |     </style>
16 |   </head>
17 |   <body>
18 |     <div class="fixed">I am fixed</div>
19 |     <div class="container">
20 |         <h1>Hello World!</h1>
21 |     </div>
22 |     <!-- <iframe src="https://learn.devkode.io/" frameborder="0"></iframe> -->
23 |   </body>
24 | </html>
25 | 
26 | <!-- Paytm.com -->
27 | 


--------------------------------------------------------------------------------
/layers/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 |   <head>
 4 |     <meta charset="UTF-8" />
 5 |     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
 6 |     <title>Layers</title>
 7 |     <link rel="stylesheet" href="style.css" />
 8 |   </head>
 9 |   <body>
10 |     <div class="sidebar-wrapper">
11 |       <div id="sidebar" class="sidebar"></div>
12 |     </div>
13 |     <div class="hamburger" id="hamburger">
14 |       Sidebar
15 |     </div>
16 |     <div id="container">
17 |     </div>
18 |     <script src="./script.js"></script>
19 |   </body>
20 | </html>
21 | 


--------------------------------------------------------------------------------
/layers/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "parser-blocking",
 3 |   "version": "1.0.0",
 4 |   "description": "",
 5 |   "main": "server.js",
 6 |   "scripts": {
 7 |     "start": "nodemon server.js",
 8 |     "test": "echo \"Error: no test specified\" && exit 1"
 9 |   },
10 |   "config": {
11 |     "port": 3001,
12 |     "css-delay": 2000
13 |   },
14 |   "author": "",
15 |   "license": "ISC",
16 |   "dependencies": {
17 |     "express": "^4.17.1"
18 |   },
19 |   "devDependencies": {
20 |     "nodemon": "^2.0.7"
21 |   }
22 | }
23 | 


--------------------------------------------------------------------------------
/layers/script.js:
--------------------------------------------------------------------------------
 1 | document.addEventListener("DOMContentLoaded", (event) => {
 2 |   document.getElementById("hamburger").addEventListener("click", () => {
 3 |     document.getElementById("sidebar").classList.toggle("is-open");
 4 |   });
 5 | 
 6 |   const fragment = document.createDocumentFragment();
 7 |   for (let i = 0; i < 1000; i++) {
 8 |     const grid = document.createElement("div");
 9 |     grid.classList.add("grid");
10 |     const col = Math.floor(Math.random() * 7);
11 |     for (let i = 0; i < col; i++) {
12 |       const div = document.createElement("div");
13 |         div.innerHTML = `
14 |               Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod
15 |               tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim
16 |               veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea
17 |               commodo consequat.
18 |               `;
19 |       grid.append(div);
20 |     }
21 |     fragment.append(grid);
22 |   }
23 |   document.getElementById("container").append(fragment);
24 | });
25 | 


--------------------------------------------------------------------------------
/layers/server.js:
--------------------------------------------------------------------------------
 1 | const fs = require("fs");
 2 | const express = require("express");
 3 | const config = JSON.parse(fs.readFileSync("package.json")).config;
 4 | 
 5 | const server = express();
 6 | 
 7 | server.use(express.static('./', { etag: false }));
 8 | 
 9 | const port = parseInt(config["port"], 10);
10 | server.listen(port, () => {
11 |     console.log(`Server is listening on http://localhost:${port}/`);
12 | });


--------------------------------------------------------------------------------
/layers/style.css:
--------------------------------------------------------------------------------
 1 | * {
 2 |     box-sizing: border-box;
 3 | }
 4 | 
 5 | body {
 6 |   height: 100vh;
 7 |   display: flex;
 8 |   flex-direction: column;
 9 |   align-items: center;
10 |   font-family: sans-serif;
11 | }
12 | 
13 | .hamburger {
14 |     background: #3c99c2;
15 |     color: #fff;
16 |     width: 100%;
17 |     padding: 3px;
18 |     text-align: center;
19 |     text-transform: uppercase;
20 |     cursor: pointer;
21 |     margin-bottom: 20px;
22 | } 
23 | 
24 | .sidebar-wrapper {
25 |   position: absolute;
26 |   z-index: 2;
27 |   top: 0;
28 |   left: 0;
29 |   bottom: 0;
30 | }
31 | 
32 | .sidebar {
33 |   position: absolute;
34 |   left: -450px;
35 |   width: 450px;
36 |   height: 100%;
37 |   z-index: 2;
38 |   background-color: #000;
39 |   overflow-x: hidden;
40 |   transition: 1s;
41 | }
42 | 
43 | .sidebar.is-open {
44 |   left: 0;
45 | }
46 | 
47 | #container {
48 |   width: 100%;
49 | }
50 | 
51 | .grid {
52 |   display: grid;
53 |   gap: 1rem;
54 |   grid-auto-flow: column;
55 |   margin: 0 0 1rem 0;
56 | }
57 | 
58 | .grid > div {
59 |   height: 100px;
60 |   background: #46b8e9;
61 |   color: #fff;
62 |   overflow: hidden;
63 |   min-width: 10px;
64 |   padding: 10px;
65 | }
66 | 


--------------------------------------------------------------------------------
/layout-trashing/.gitignore:
--------------------------------------------------------------------------------
1 | node_modules/
2 | .DS_Store
3 | 


--------------------------------------------------------------------------------
/layout-trashing/1/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 |   <head>
 4 |     <meta charset="UTF-8" />
 5 |     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
 6 |     <title>Layout</title>
 7 |     <style>
 8 |       .box {
 9 |         height: 100px;
10 |         width: 100px;
11 |         background: #46b8e9;
12 |         margin: 5px;
13 |         color: #fff;
14 |         font-size: 18px;
15 |         display: inline-flex;
16 |         justify-content: center;
17 |         align-items: center;
18 |       }
19 |     </style>
20 |   </head>
21 |   <body>
22 |     <div id="box1" class="box">1</div>
23 |     <div id="box2" class="box">2</div>
24 |     <div id="box3" class="box">3</div>
25 |     <div id="box4" class="box">4</div>
26 |     <div id="box5" class="box">5</div>
27 |     <div id="box6" class="box">6</div>
28 | 
29 |     <hr />
30 |     <button onclick="increaseHeight(10)">Increase height</button>
31 |     <button onclick="displayNone('box3')">Display:none (Box 3)</button>
32 |     <button onclick="visibilityHidden('box4')">Visibility:hidden (Box 4)</button>
33 | 
34 |     <script>
35 |       function increaseHeight(size) {
36 |         var box1Height = document.getElementById("box1").clientHeight;
37 |         var box2Height = document.getElementById("box2").clientHeight;
38 |         var box3Height = document.getElementById("box3").clientHeight;
39 |         var box4Height = document.getElementById("box4").clientHeight;
40 |         var box5Height = document.getElementById("box5").clientHeight;
41 |         var box6Height = document.getElementById("box6").clientHeight;
42 | 
43 |         document.getElementById("box1").style.height = box1Height + size + "px";
44 |         document.getElementById("box2").style.height = box2Height + size + "px";
45 |         document.getElementById("box3").style.height = box3Height + size + "px";
46 |         document.getElementById("box4").style.height = box4Height + size + "px";
47 |         document.getElementById("box5").style.height = box5Height + size + "px";
48 |         document.getElementById("box6").style.height = box6Height + size + "px";
49 |       }
50 | 
51 |       function displayNone(id) {
52 |         document.getElementById(id).style.display = 'none';
53 |       }
54 | 
55 |       function visibilityHidden(id) {
56 |         document.getElementById(id).style.visibility = 'hidden';
57 |       }
58 |     </script>
59 |   </body>
60 | </html>
61 | 


--------------------------------------------------------------------------------
/layout-trashing/2/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 |   <head>
 4 |     <meta charset="UTF-8" />
 5 |     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
 6 |     <title>Layout</title>
 7 |     <style>
 8 |       .box {
 9 |         height: 100px;
10 |         width: 100px;
11 |         background: #46b8e9;
12 |         margin: 5px;
13 |         color: #fff;
14 |         font-size: 18px;
15 |         display: inline-flex;
16 |         justify-content: center;
17 |         align-items: center;
18 |       }
19 |     </style>
20 |   </head>
21 |   <body>
22 |     <div id="box1" class="box">1</div>
23 |     <div id="box2" class="box">2</div>
24 |     <div id="box3" class="box">3</div>
25 |     <div id="box4" class="box">4</div>
26 |     <div id="box5" class="box">5</div>
27 |     <div id="box6" class="box">6</div>
28 | 
29 |     <hr />
30 |     <button onclick="increaseHeight(10)">Increase height</button>
31 |     <button onclick="displayNone('box3')">Display:none (Box 3)</button>
32 |     <button onclick="visibilityHidden('box4')">
33 |       Visibility:hidden (Box 4)
34 |     </button>
35 | 
36 |     <script>
37 |       function increaseHeight(size) {
38 |         var box1Height = document.getElementById("box1").clientHeight;
39 |         setTimeout(() => {
40 |           document.getElementById("box1").style.height =
41 |             box1Height + size + "px";
42 |         });
43 | 
44 |         var box2Height = document.getElementById("box2").clientHeight;
45 |         setTimeout(() => {
46 |           document.getElementById("box2").style.height =
47 |             box2Height + size + "px";
48 |         });
49 | 
50 |         var box3Height = document.getElementById("box3").clientHeight;
51 |         setTimeout(() => {
52 |           document.getElementById("box3").style.height =
53 |             box3Height + size + "px";
54 |         });
55 | 
56 |         setTimeout(() => {
57 |           document.getElementById("box4").style.height =
58 |             box4Height + size + "px";
59 |         });
60 |         var box4Height = document.getElementById("box4").clientHeight;
61 | 
62 |         setTimeout(() => {
63 |           document.getElementById("box5").style.height =
64 |             box5Height + size + "px";
65 |         });
66 |         var box5Height = document.getElementById("box5").clientHeight;
67 | 
68 |         setTimeout(() => {
69 |           document.getElementById("box6").style.height =
70 |             box6Height + size + "px";
71 |         });
72 |         var box6Height = document.getElementById("box6").clientHeight;
73 |       }
74 | 
75 |       function displayNone(id) {
76 |         document.getElementById(id).style.display = "none";
77 |       }
78 | 
79 |       function visibilityHidden(id) {
80 |         document.getElementById(id).style.visibility = "hidden";
81 |       }
82 |     </script>
83 |   </body>
84 | </html>
85 | 


--------------------------------------------------------------------------------
/layout-trashing/3/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 |   <head>
 4 |     <meta charset="UTF-8" />
 5 |     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
 6 |     <title>Layout</title>
 7 |     <style>
 8 |       .box {
 9 |         height: 100px;
10 |         width: 100px;
11 |         background: #46b8e9;
12 |         margin: 5px;
13 |         color: #fff;
14 |         font-size: 18px;
15 |         display: inline-flex;
16 |         justify-content: center;
17 |         align-items: center;
18 |       }
19 |     </style>
20 |   </head>
21 |   <body>
22 |     <div id="box1" class="box">1</div>
23 |     <div id="box2" class="box">2</div>
24 |     <div id="box3" class="box">3</div>
25 |     <div id="box4" class="box">4</div>
26 |     <div id="box5" class="box">5</div>
27 |     <div id="box6" class="box">6</div>
28 | 
29 |     <hr />
30 |     <button onclick="increaseHeight(10)">Increase height</button>
31 |     <button onclick="displayNone('box3')">Display:none (Box 3)</button>
32 |     <button onclick="visibilityHidden('box4')">
33 |       Visibility:hidden (Box 4)
34 |     </button>
35 | 
36 |     <script>
37 |       function increaseHeight(size) {
38 |         var box1Height = document.getElementById("box1").clientHeight;
39 |         requestAnimationFrame(() => {
40 |           document.getElementById("box1").style.height =
41 |             box1Height + size + "px";
42 |         });
43 | 
44 |         var box2Height = document.getElementById("box2").clientHeight;
45 |         requestAnimationFrame(() => {
46 |           document.getElementById("box2").style.height =
47 |             box2Height + size + "px";
48 |         });
49 | 
50 |         var box3Height = document.getElementById("box3").clientHeight;
51 |         requestAnimationFrame(() => {
52 |           document.getElementById("box3").style.height =
53 |             box3Height + size + "px";
54 |         });
55 | 
56 |         requestAnimationFrame(() => {
57 |           document.getElementById("box4").style.height =
58 |             box4Height + size + "px";
59 |         });
60 |         var box4Height = document.getElementById("box4").clientHeight;
61 | 
62 |         requestAnimationFrame(() => {
63 |           document.getElementById("box5").style.height =
64 |             box5Height + size + "px";
65 |         });
66 |         var box5Height = document.getElementById("box5").clientHeight;
67 | 
68 |         requestAnimationFrame(() => {
69 |           document.getElementById("box6").style.height =
70 |             box6Height + size + "px";
71 |         });
72 |         var box6Height = document.getElementById("box6").clientHeight;
73 |       }
74 | 
75 |       function displayNone(id) {
76 |         document.getElementById(id).style.display = "none";
77 |       }
78 | 
79 |       function visibilityHidden(id) {
80 |         document.getElementById(id).style.visibility = "hidden";
81 |       }
82 |     </script>
83 |   </body>
84 | </html>
85 | 


--------------------------------------------------------------------------------
/layout-trashing/4/app.js:
--------------------------------------------------------------------------------
  1 | /* Copyright 2016 Google Inc.
  2 |  *
  3 |  * Licensed under the Apache License, Version 2.0 (the "License");
  4 |  * you may not use this file except in compliance with the License.
  5 |  * You may obtain a copy of the License at
  6 |  *
  7 |  * http://www.apache.org/licenses/LICENSE-2.0
  8 |  *
  9 |  * Unless required by applicable law or agreed to in writing, software
 10 |  * distributed under the License is distributed on an "AS IS" BASIS,
 11 |  * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
 12 |  * See the License for the specific language governing permissions and
 13 |  * limitations under the License. */
 14 | 
 15 | (function(window) {
 16 |   'use strict';
 17 | 
 18 |   var app = {},
 19 |       proto = document.querySelector('.proto'),
 20 |       movers,
 21 |       bodySize = document.body.getBoundingClientRect(),
 22 |       ballSize = proto.getBoundingClientRect(),
 23 |       maxHeight = Math.floor(bodySize.height - ballSize.height),
 24 |       maxWidth = 97, // 100vw - width of square (3vw)
 25 |       incrementor = 100,
 26 |       distance = 3,
 27 |       frame,
 28 |       minimum = 10,
 29 |       subtract = document.querySelector('.subtract'),
 30 |       add = document.querySelector('.add');
 31 | 
 32 |   app.optimize = false;
 33 |   app.count = minimum;
 34 |   app.enableApp = true;
 35 | 
 36 |   app.init = function () {
 37 |     if (movers) {
 38 |       bodySize = document.body.getBoundingClientRect();
 39 |       for (var i = 0; i < movers.length; i++) {
 40 |         document.body.removeChild(movers[i]);
 41 |       }
 42 |       document.body.appendChild(proto);
 43 |       ballSize = proto.getBoundingClientRect();
 44 |       document.body.removeChild(proto);
 45 |       maxHeight = Math.floor(bodySize.height - ballSize.height);
 46 |     }
 47 |     for (var i = 0; i < app.count; i++) {
 48 |       var m = proto.cloneNode();
 49 |       var top = Math.floor(Math.random() * (maxHeight));
 50 |       if (top === maxHeight) {
 51 |         m.classList.add('up');
 52 |       } else {
 53 |         m.classList.add('down');
 54 |       }
 55 |       m.style.left = (i / (app.count / maxWidth)) + 'vw';
 56 |       m.style.top = top + 'px';
 57 |       document.body.appendChild(m);
 58 |     }
 59 |     movers = document.querySelectorAll('.mover');
 60 |   };
 61 | 
 62 |   app.update = function (timestamp) {
 63 |     for (var i = 0; i < app.count; i++) {
 64 |       var m = movers[i];
 65 |       if (!app.optimize) {
 66 |         // un-optimized code
 67 |         var pos = m.classList.contains('down') ?
 68 |             m.offsetTop + distance : m.offsetTop - distance;
 69 |         if (pos < 0) pos = 0;
 70 |         if (pos > maxHeight) pos = maxHeight;
 71 |         m.style.top = pos + 'px';
 72 |         if (m.offsetTop === 0) {
 73 |           m.classList.remove('up');
 74 |           m.classList.add('down');
 75 |         }
 76 |         if (m.offsetTop === maxHeight) {
 77 |           m.classList.remove('down');
 78 |           m.classList.add('up');
 79 |         }
 80 |       } else {
 81 |         // optimized code
 82 |         var pos = parseInt(m.style.top.slice(0, m.style.top.indexOf('px')));
 83 |         pos = m.classList.contains('down') ?
 84 |         pos + distance : pos - distance;
 85 |         if (pos < 0) pos = 0;
 86 |         if (pos > maxHeight) pos = maxHeight;
 87 |         m.style.top = pos + 'px';
 88 |         if (pos === 0) {
 89 |           m.classList.remove('up');
 90 |           m.classList.add('down');
 91 |         }
 92 |         if (pos === maxHeight) {
 93 |           m.classList.remove('down');
 94 |           m.classList.add('up');
 95 |         }
 96 |       }
 97 |     }
 98 |     frame = window.requestAnimationFrame(app.update);
 99 |   }
100 | 
101 |   document.querySelector('.stop').addEventListener('click', function (e) {
102 |     if (app.enableApp) {
103 |       cancelAnimationFrame(frame);
104 |       e.target.textContent = 'Start';
105 |       app.enableApp = false;
106 |     } else {
107 |       frame = window.requestAnimationFrame(app.update);
108 |       e.target.textContent = 'Stop';
109 |       app.enableApp = true;
110 |     }
111 |   });
112 | 
113 |   document.querySelector('.optimize').addEventListener('click', function (e) {
114 |     if (e.target.textContent === 'Optimize') {
115 |       app.optimize = true;
116 |       e.target.textContent = 'Un-Optimize';
117 |     } else {
118 |       app.optimize = false;
119 |       e.target.textContent = 'Optimize';
120 |     }
121 |   });
122 | 
123 |   add.addEventListener('click', function (e) {
124 |     cancelAnimationFrame(frame);
125 |     app.count += incrementor;
126 |     subtract.disabled = false;
127 |     app.init();
128 |     frame = requestAnimationFrame(app.update);
129 |   });
130 | 
131 |   subtract.addEventListener('click', function () {
132 |     cancelAnimationFrame(frame);
133 |     app.count -= incrementor;
134 |     app.init();
135 |     frame = requestAnimationFrame(app.update);
136 |     if (app.count === minimum) {
137 |       subtract.disabled = true;
138 |     }
139 |   });
140 | 
141 |   function debounce(func, wait, immediate) {
142 |     var timeout;
143 |     return function() {
144 |       var context = this, args = arguments;
145 |       var later = function() {
146 |         timeout = null;
147 |         if (!immediate) func.apply(context, args);
148 |       };
149 |       var callNow = immediate && !timeout;
150 |       clearTimeout(timeout);
151 |       timeout = setTimeout(later, wait);
152 |       if (callNow) func.apply(context, args);
153 |     };
154 |   };
155 | 
156 |   var onResize = debounce(function () {
157 |     if (app.enableApp) {
158 |         cancelAnimationFrame(frame);
159 |         app.init();
160 |         frame = requestAnimationFrame(app.update);
161 |     }
162 |   }, 500);
163 | 
164 |   window.addEventListener('resize', onResize);
165 | 
166 |   add.textContent = 'Add ' + incrementor;
167 |   subtract.textContent = 'Subtract ' + incrementor;
168 |   document.body.removeChild(proto);
169 |   proto.classList.remove('.proto');
170 |   app.init();
171 |   window.app = app;
172 |   frame = window.requestAnimationFrame(app.update);
173 | 
174 | })(window);
175 | 


--------------------------------------------------------------------------------
/layout-trashing/4/index.html:
--------------------------------------------------------------------------------
 1 | <!--
 2 |   Copyright 2016 Google Inc.
 3 | 
 4 |   Licensed under the Apache License, Version 2.0 (the "License");
 5 |   you may not use this file except in compliance with the License.
 6 |   You may obtain a copy of the License at
 7 | 
 8 |   http://www.apache.org/licenses/LICENSE-2.0
 9 | 
10 |   Unless required by applicable law or agreed to in writing, software
11 |   distributed under the License is distributed on an "AS IS" BASIS,
12 |   WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
13 |   See the License for the specific language governing permissions and
14 |   limitations under the License.
15 | -->
16 | 
17 | <!-- referenced in: https://developers.google.com/web/tools/chrome-devtools/evaluate-performance/ -->
18 | 
19 | <!doctype html>
20 | <html>
21 |   <head>
22 |     <title>Janky Animation</title>
23 |     <meta name="viewport" content="width=device-width, initial-scale=1">
24 |     <link rel="stylesheet" type="text/css" href="styles.css"/>
25 |     <script src="app.js" async></script>
26 |   </head>
27 |   <body>
28 |     <img class="proto mover" src="./logo-1024px.png"/>
29 |     <div class="controls">
30 |       <button class="add"></button>
31 |       <button class="subtract" disabled></button>
32 |       <button class="stop">Stop</button>
33 |       <button class="optimize">Optimize</button>
34 |       <a href="https://developers.google.com/web/tools/chrome-devtools/evaluate-performance/"
35 |          target="_blank">
36 |         <button class="optimize">Help</button>
37 |       </a>
38 |     </div>
39 |   </body>
40 | </html>
41 | 


--------------------------------------------------------------------------------
/layout-trashing/4/logo-1024px.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/devkodeio/web-performance-bootcamp/0c56374d01efcf5f9694d4e22e78ed1082870bea/layout-trashing/4/logo-1024px.png


--------------------------------------------------------------------------------
/layout-trashing/4/styles.css:
--------------------------------------------------------------------------------
 1 | /* Copyright 2016 Google Inc.
 2 |  *
 3 |  * Licensed under the Apache License, Version 2.0 (the "License");
 4 |  * you may not use this file except in compliance with the License.
 5 |  * You may obtain a copy of the License at
 6 |  *
 7 |  * http://www.apache.org/licenses/LICENSE-2.0
 8 |  *
 9 |  * Unless required by applicable law or agreed to in writing, software
10 |  * distributed under the License is distributed on an "AS IS" BASIS,
11 |  * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or
12 |  * implied. See the License for the specific language governing permissions
13 |  * and limitations under the License. */
14 | 
15 | * {
16 |   margin: 0;
17 |   padding: 0;
18 | }
19 | 
20 | body {
21 |   height: 100vh;
22 |   width: 100vw;
23 | }
24 | 
25 | .controls {
26 |   position: fixed;
27 |   top: 2vw;
28 |   left: 2vw;
29 |   z-index: 1;
30 | }
31 | 
32 | .controls button {
33 |   display: block;
34 |   font-size: 1em;
35 |   padding: 1em;
36 |   margin: 1em;
37 |   background-color: beige;
38 |   color: black;
39 | }
40 | 
41 | .subtract:disabled {
42 |   opacity: 0.2;
43 | }
44 | 
45 | .mover {
46 |   height: 3vw;
47 |   position: absolute;
48 |   z-index: 0;
49 | }
50 | 
51 | .border {
52 |   border: 1px solid black;
53 | }
54 | 
55 | @media (max-width: 600px) {
56 |   .controls button {
57 |     min-width: 20vw;
58 |   }
59 | }


--------------------------------------------------------------------------------
/layout-trashing/5/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 |   <head>
 4 |     <meta charset="UTF-8" />
 5 |     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
 6 |     <title>Request Animation Frame</title>
 7 |     <style>
 8 |       .box {
 9 |         height: 100px;
10 |         width: 100px;
11 |         background: red;
12 |         position: absolute;
13 |       }
14 |       #box1 {
15 |         top: 10px;
16 |       }
17 |       #box2 {
18 |         top: 150px;
19 |       }
20 | 
21 |       .footer {
22 |         position: absolute;
23 |         top: 300px;
24 |       }
25 |     </style>
26 |   </head>
27 |   <body>
28 |     <div class="box" id="box1"></div>
29 |     <div class="box" id="box2"></div>
30 |     <div class="footer">
31 |       <button onclick="run()">Run Animation</button>
32 |     </div>
33 | 
34 |     <script>
35 |       //Conventional Animation
36 |       function conventionalAnimation() {
37 |         var elem = document.getElementById("box1");
38 |         var pos = 0;
39 |         var id = setInterval(frame, 10);
40 |         function frame() {
41 |           if (pos == 600) {
42 |             clearInterval(id);
43 |           } else {
44 |             pos++;
45 |             elem.style.left = pos + "px";
46 |           }
47 |         }
48 |       }
49 | 
50 |       //requestAnimationFrame
51 |       function requestAnimation() {
52 |         var stopId;
53 |         var progress = 0;
54 |         var element = document.getElementById("box2");
55 |         function step(timestamp) {
56 |           if (progress > 600) {
57 |             cancelAnimationFrame(stopId);
58 |             return;
59 |           } else {
60 |             progress = progress + 3;
61 |             element.style.left = progress + "px";
62 |             stopId = window.requestAnimationFrame(step);
63 |           }
64 |         }
65 |         window.requestAnimationFrame(step);
66 |       }
67 | 
68 |       function run() {
69 |         conventionalAnimation();
70 |         requestAnimation();
71 |       }
72 |     </script>
73 |   </body>
74 | </html>
75 | 
76 | <!-- https://vilvaathiban.medium.com/javascript-animations-element-animate-vs-requestanimationframe-vs-conventional-animation-550380b9e05e -->


--------------------------------------------------------------------------------
/layout-trashing/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 |   <head>
 4 |     <meta charset="UTF-8" />
 5 |     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
 6 |     <title>Layout</title>
 7 |     <style>
 8 |       .box {
 9 |         height: 100px;
10 |         width: 100px;
11 |         background: #46b8e9;
12 |         margin: 5px;
13 |         color: #fff;
14 |         font-size: 18px;
15 |         display: inline-flex;
16 |         justify-content: center;
17 |         align-items: center;
18 |       }
19 |     </style>
20 |   </head>
21 |   <body>
22 |     <div id="box1" class="box">1</div>
23 |     <div id="box2" class="box">2</div>
24 |     <div id="box3" class="box">3</div>
25 |     <div id="box4" class="box">4</div>
26 |     <div id="box5" class="box">5</div>
27 |     <div id="box6" class="box">6</div>
28 | 
29 |     <hr />
30 |     <button onclick="increaseHeight(10)">Increase height</button>
31 |     <button onclick="displayNone('box3')">Display:none (Box 3)</button>
32 |     <button onclick="visibilityHidden('box4')">Visibility:hidden (Box 4)</button>
33 | 
34 |     <script>
35 |       function increaseHeight(size) {
36 |         var box1Height = document.getElementById("box1").clientHeight;
37 |         document.getElementById("box1").style.height = box1Height + size + "px";
38 | 
39 |         var box2Height = document.getElementById("box2").clientHeight;
40 |         document.getElementById("box2").style.height = box2Height + size + "px";
41 | 
42 |         var box3Height = document.getElementById("box3").clientHeight;
43 |         document.getElementById("box3").style.height = box3Height + size + "px";
44 | 
45 |         var box4Height = document.getElementById("box4").clientHeight;
46 |         document.getElementById("box4").style.height = box4Height + size + "px";
47 | 
48 |         var box5Height = document.getElementById("box5").clientHeight;
49 |         document.getElementById("box5").style.height = box5Height + size + "px";
50 | 
51 |         var box6Height = document.getElementById("box6").clientHeight;
52 |         document.getElementById("box6").style.height = box6Height + size + "px";
53 |       }
54 | 
55 |       function displayNone(id) {
56 |         document.getElementById(id).style.display = 'none';
57 |       }
58 | 
59 |       function visibilityHidden(id) {
60 |         document.getElementById(id).style.visibility = 'hidden';
61 |       }
62 |     </script>
63 |   </body>
64 | </html>
65 | 


--------------------------------------------------------------------------------
/layout-trashing/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "parser-blocking",
 3 |   "version": "1.0.0",
 4 |   "description": "",
 5 |   "main": "server.js",
 6 |   "scripts": {
 7 |     "start": "nodemon server.js",
 8 |     "test": "echo \"Error: no test specified\" && exit 1"
 9 |   },
10 |   "config": {
11 |     "port": 3001,
12 |     "css-delay": 2000
13 |   },
14 |   "author": "",
15 |   "license": "ISC",
16 |   "dependencies": {
17 |     "express": "^4.17.1"
18 |   },
19 |   "devDependencies": {
20 |     "nodemon": "^2.0.7"
21 |   }
22 | }
23 | 


--------------------------------------------------------------------------------
/layout-trashing/server.js:
--------------------------------------------------------------------------------
 1 | const fs = require("fs");
 2 | const express = require("express");
 3 | const config = JSON.parse(fs.readFileSync("package.json")).config;
 4 | 
 5 | const server = express();
 6 | 
 7 | server.use(express.static('./', { etag: false }));
 8 | 
 9 | const port = parseInt(config["port"], 10);
10 | server.listen(port, () => {
11 |     console.log(`Server is listening on http://localhost:${port}/`);
12 | });


--------------------------------------------------------------------------------
/lazy-load-images/.gitignore:
--------------------------------------------------------------------------------
1 | node_modules/
2 | .DS_Store
3 | 


--------------------------------------------------------------------------------
/lazy-load-images/1/index.html:
--------------------------------------------------------------------------------
 1 | 
 2 | <!DOCTYPE html>
 3 | <html lang="en">
 4 | 
 5 | <head>
 6 |     <meta charset="UTF-8">
 7 |     <meta name="viewport" content="width=device-width, initial-scale=1.0">
 8 |     <title>Lazy load images</title>
 9 |     <link rel="stylesheet" href="./style.css">
10 |     <script src="./script.js" defer></script>
11 | </head>
12 | 
13 | <body>
14 |     <div class="gallery">
15 |         <div class="image"><img class="lazy" data-src="https://source.unsplash.com/random/600" /></div>
16 |         <div class="image"><img class="lazy" data-src="https://source.unsplash.com/random/601" /></div>
17 |         <div class="image image-big"><img class="lazy" data-src="https://source.unsplash.com/random/602" /></div>
18 |         <div class="image"><img class="lazy" data-src="https://source.unsplash.com/random/603" /></div>
19 |         <div class="image image-big"><img class="lazy" data-src="https://source.unsplash.com/random/604" /></div>
20 |         <div class="image"><img class="lazy" data-src="https://source.unsplash.com/random/605" /></div>
21 |         <div class="image"><img class="lazy" data-src="https://source.unsplash.com/random/606" /></div>
22 |         <div class="image image-horizontal"><img class="lazy" data-src="https://source.unsplash.com/random/607" /></div>
23 |         <div class="image"><img class="lazy" data-src="https://source.unsplash.com/random/608" /></div>
24 |         <div class="image image-vertical"><img class="lazy" data-src="https://source.unsplash.com/random/609" /></div>
25 |         <div class="image"><img class="lazy" data-src="https://source.unsplash.com/random/610" /></div>
26 |         <div class="image"><img class="lazy" data-src="https://source.unsplash.com/random/611" /></div>
27 |         <div class="image"><img class="lazy" data-src="https://source.unsplash.com/random/612" /></div>
28 |         <div class="image"><img class="lazy" data-src="https://source.unsplash.com/random/613" /></div>
29 |         <div class="image"><img class="lazy" data-src="https://source.unsplash.com/random/614" /></div>
30 |         <div class="image image-big"><img class="lazy" data-src="https://source.unsplash.com/random/615" /></div>
31 |         <div class="image"><img class="lazy" data-src="https://source.unsplash.com/random/616" /></div>
32 |         <div class="image image-big"><img class="lazy" data-src="https://source.unsplash.com/random/617" /></div>
33 |         <div class="image"><img class="lazy" data-src="https://source.unsplash.com/random/618" /></div>
34 |         <div class="image"><img class="lazy" data-src="https://source.unsplash.com/random/619" /></div>
35 |         <div class="image image-horizontal"><img class="lazy" data-src="https://source.unsplash.com/random/620" /></div>
36 |         <div class="image"><img class="lazy" data-src="https://source.unsplash.com/random/621" /></div>
37 |         <div class="image image-horizontal"><img class="lazy" data-src="https://source.unsplash.com/random/622" /></div>
38 |         <div class="image"><img class="lazy" data-src="https://source.unsplash.com/random/623" /></div>
39 |         <div class="image"><img class="lazy" data-src="https://source.unsplash.com/random/624" /></div>
40 |         <div class="image"><img class="lazy" data-src="https://source.unsplash.com/random/625" /></div>
41 |         <div class="image"><img class="lazy" data-src="https://source.unsplash.com/random/600" /></div>
42 |         <div class="image"><img class="lazy" data-src="https://source.unsplash.com/random/601" /></div>
43 |         <div class="image image-big"><img class="lazy" data-src="https://source.unsplash.com/random/602" /></div>
44 |         <div class="image"><img class="lazy" data-src="https://source.unsplash.com/random/603" /></div>
45 |         <div class="image image-big"><img class="lazy" data-src="https://source.unsplash.com/random/604" /></div>
46 |         <div class="image"><img class="lazy" data-src="https://source.unsplash.com/random/605" /></div>
47 |         <div class="image"><img class="lazy" data-src="https://source.unsplash.com/random/606" /></div>
48 |         <div class="image image-horizontal"><img class="lazy" data-src="https://source.unsplash.com/random/607" /></div>
49 |         <div class="image"><img class="lazy" data-src="https://source.unsplash.com/random/608" /></div>
50 |         <div class="image image-vertical"><img class="lazy" data-src="https://source.unsplash.com/random/609" /></div>
51 |         <div class="image"><img class="lazy" data-src="https://source.unsplash.com/random/610" /></div>
52 |         <div class="image"><img class="lazy" data-src="https://source.unsplash.com/random/611" /></div>
53 |         <div class="image"><img class="lazy" data-src="https://source.unsplash.com/random/612" /></div>
54 |         <div class="image"><img class="lazy" data-src="https://source.unsplash.com/random/613" /></div>
55 |         <div class="image"><img class="lazy" data-src="https://source.unsplash.com/random/614" /></div>
56 |         <div class="image image-big"><img class="lazy" data-src="https://source.unsplash.com/random/615" /></div>
57 |         <div class="image"><img class="lazy" data-src="https://source.unsplash.com/random/616" /></div>
58 |         <div class="image image-big"><img class="lazy" data-src="https://source.unsplash.com/random/617" /></div>
59 |         <div class="image"><img class="lazy" data-src="https://source.unsplash.com/random/618" /></div>
60 |         <div class="image"><img class="lazy" data-src="https://source.unsplash.com/random/619" /></div>
61 |         <div class="image image-horizontal"><img class="lazy" data-src="https://source.unsplash.com/random/620" /></div>
62 |         <div class="image"><img class="lazy" data-src="https://source.unsplash.com/random/621" /></div>
63 |         <div class="image image-horizontal"><img class="lazy" data-src="https://source.unsplash.com/random/622" /></div>
64 |         <div class="image"><img class="lazy" data-src="https://source.unsplash.com/random/623" /></div>
65 |         <div class="image"><img class="lazy" data-src="https://source.unsplash.com/random/624" /></div>
66 |         <div class="image"><img class="lazy" data-src="https://source.unsplash.com/random/625" /></div>
67 |         <div class="image"><img class="lazy" data-src="https://source.unsplash.com/random/600" /></div>
68 |         <div class="image"><img class="lazy" data-src="https://source.unsplash.com/random/601" /></div>
69 |         <div class="image image-big"><img class="lazy" data-src="https://source.unsplash.com/random/602" /></div>
70 |         <div class="image"><img class="lazy" data-src="https://source.unsplash.com/random/603" /></div>
71 |         <div class="image image-big"><img class="lazy" data-src="https://source.unsplash.com/random/604" /></div>
72 |         <div class="image"><img class="lazy" data-src="https://source.unsplash.com/random/605" /></div>
73 |         <div class="image"><img class="lazy" data-src="https://source.unsplash.com/random/606" /></div>
74 |         <div class="image image-horizontal"><img class="lazy" data-src="https://source.unsplash.com/random/607" /></div>
75 |         <div class="image"><img class="lazy" data-src="https://source.unsplash.com/random/608" /></div>
76 |         <div class="image image-vertical"><img class="lazy" data-src="https://source.unsplash.com/random/609" /></div>
77 |         <div class="image"><img class="lazy" data-src="https://source.unsplash.com/random/610" /></div>
78 |         <div class="image"><img class="lazy" data-src="https://source.unsplash.com/random/611" /></div>
79 |         <div class="image"><img class="lazy" data-src="https://source.unsplash.com/random/612" /></div>
80 |         <div class="image"><img class="lazy" data-src="https://source.unsplash.com/random/613" /></div>
81 |         <div class="image"><img class="lazy" data-src="https://source.unsplash.com/random/614" /></div>
82 |         <div class="image image-big"><img class="lazy" data-src="https://source.unsplash.com/random/615" /></div>
83 |         <div class="image"><img class="lazy" data-src="https://source.unsplash.com/random/616" /></div>
84 |         <div class="image image-big"><img class="lazy" data-src="https://source.unsplash.com/random/617" /></div>
85 |         <div class="image"><img class="lazy" data-src="https://source.unsplash.com/random/618" /></div>
86 |         <div class="image"><img class="lazy" data-src="https://source.unsplash.com/random/619" /></div>
87 |         <div class="image image-horizontal"><img class="lazy" data-src="https://source.unsplash.com/random/620" /></div>
88 |         <div class="image"><img class="lazy" data-src="https://source.unsplash.com/random/621" /></div>
89 |         <div class="image image-horizontal"><img class="lazy" data-src="https://source.unsplash.com/random/622" /></div>
90 |         <div class="image"><img class="lazy" data-src="https://source.unsplash.com/random/623" /></div>
91 |         <div class="image"><img class="lazy" data-src="https://source.unsplash.com/random/624" /></div>
92 |         <div class="image"><img class="lazy" data-src="https://source.unsplash.com/random/625" /></div>
93 |     </div>
94 | </body>
95 | 
96 | </html>


--------------------------------------------------------------------------------
/lazy-load-images/1/script.js:
--------------------------------------------------------------------------------
 1 | document.addEventListener("DOMContentLoaded", function () {
 2 |   const lazyImages = [...document.querySelectorAll("img.lazy")];
 3 |   const inAdvance = 300;
 4 | 
 5 |   const _throttle = (func, delay) => {
 6 |     let inThrottle;
 7 |     return function () {
 8 |       if (!inThrottle) {
 9 |         func.apply(this, arguments);
10 |         inThrottle = true;
11 |         setTimeout(() => {
12 |           inThrottle = false;
13 |         }, delay);
14 |       }
15 |     };
16 |   };
17 | 
18 |   function lazyLoad() {
19 |     lazyImages.forEach((image) => {
20 |       if (
21 |         image.offsetTop <
22 |         window.innerHeight + window.pageYOffset + inAdvance
23 |       ) {
24 |         if (!image.dataset.src) return;
25 |         image.src = image.dataset.src;
26 |         delete image.dataset.src;
27 |         image.onload = () => image.classList.remove("lazy");
28 |       }
29 |     });
30 |   }
31 | 
32 |   lazyLoad();
33 | 
34 |   window.addEventListener("scroll", _throttle(lazyLoad, 16));
35 |   window.addEventListener("resize", _throttle(lazyLoad, 16));
36 | });
37 | 


--------------------------------------------------------------------------------
/lazy-load-images/1/style.css:
--------------------------------------------------------------------------------
 1 | * {
 2 |   margin: 0;
 3 |   padding: 0;
 4 |   box-sizing: border-box;
 5 | }
 6 | 
 7 | .gallery {
 8 |   display: grid;
 9 |   grid-auto-flow: dense;
10 |   grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
11 |   grid-auto-rows: 200px;
12 |   grid-gap: 10px;
13 |   padding: 10px;
14 | }
15 | 
16 | .gallery .image {
17 |   grid-area: span 1 / span 1;
18 | }
19 | 
20 | .gallery .image-horizontal {
21 |   grid-area: span 1 / span 2;
22 | }
23 | 
24 | .gallery .image-vertical {
25 |   grid-area: span 2 / span 1;
26 | }
27 | 
28 | .gallery .image-big {
29 |   grid-area: span 2 / span 2;
30 | }
31 | 
32 | .gallery img.lazy {
33 |   opacity: 0.1;
34 |   will-change: opacity;
35 |   transition: all 0.3s;
36 | }
37 | 
38 | .gallery img {
39 |   height: 100%;
40 |   width: 100%;
41 |   object-fit: cover;
42 |   border-radius: 3px;
43 |   background: #ccc;
44 |   transition: 0.5s;
45 | }
46 | 
47 | .gallery img:hover {
48 |   transform: scale(1.1);
49 | }
50 | 
51 | @media (max-width: 400px) {
52 |   .gallery .image-horizontal,
53 |   .gallery .image-vertical,
54 |   .gallery .image-big {
55 |     grid-area: span 1 / span 1;
56 |   }
57 | }
58 | 


--------------------------------------------------------------------------------
/lazy-load-images/2/index.html:
--------------------------------------------------------------------------------
 1 | 
 2 | <!DOCTYPE html>
 3 | <html lang="en">
 4 | 
 5 | <head>
 6 |     <meta charset="UTF-8">
 7 |     <meta name="viewport" content="width=device-width, initial-scale=1.0">
 8 |     <title>Lazy load images</title>
 9 |     <link rel="stylesheet" href="./style.css">
10 |     <script src="./script.js" defer></script>
11 | </head>
12 | 
13 | <body>
14 |     <div class="gallery">
15 |         <div class="image"><img class="lazy" data-src="https://source.unsplash.com/random/600" /></div>
16 |         <div class="image"><img class="lazy" data-src="https://source.unsplash.com/random/601" /></div>
17 |         <div class="image image-big"><img class="lazy" data-src="https://source.unsplash.com/random/602" /></div>
18 |         <div class="image"><img class="lazy" data-src="https://source.unsplash.com/random/603" /></div>
19 |         <div class="image image-big"><img class="lazy" data-src="https://source.unsplash.com/random/604" /></div>
20 |         <div class="image"><img class="lazy" data-src="https://source.unsplash.com/random/605" /></div>
21 |         <div class="image"><img class="lazy" data-src="https://source.unsplash.com/random/606" /></div>
22 |         <div class="image image-horizontal"><img class="lazy" data-src="https://source.unsplash.com/random/607" /></div>
23 |         <div class="image"><img class="lazy" data-src="https://source.unsplash.com/random/608" /></div>
24 |         <div class="image image-vertical"><img class="lazy" data-src="https://source.unsplash.com/random/609" /></div>
25 |         <div class="image"><img class="lazy" data-src="https://source.unsplash.com/random/610" /></div>
26 |         <div class="image"><img class="lazy" data-src="https://source.unsplash.com/random/611" /></div>
27 |         <div class="image"><img class="lazy" data-src="https://source.unsplash.com/random/612" /></div>
28 |         <div class="image"><img class="lazy" data-src="https://source.unsplash.com/random/613" /></div>
29 |         <div class="image"><img class="lazy" data-src="https://source.unsplash.com/random/614" /></div>
30 |         <div class="image image-big"><img class="lazy" data-src="https://source.unsplash.com/random/615" /></div>
31 |         <div class="image"><img class="lazy" data-src="https://source.unsplash.com/random/616" /></div>
32 |         <div class="image image-big"><img class="lazy" data-src="https://source.unsplash.com/random/617" /></div>
33 |         <div class="image"><img class="lazy" data-src="https://source.unsplash.com/random/618" /></div>
34 |         <div class="image"><img class="lazy" data-src="https://source.unsplash.com/random/619" /></div>
35 |         <div class="image image-horizontal"><img class="lazy" data-src="https://source.unsplash.com/random/620" /></div>
36 |         <div class="image"><img class="lazy" data-src="https://source.unsplash.com/random/621" /></div>
37 |         <div class="image image-horizontal"><img class="lazy" data-src="https://source.unsplash.com/random/622" /></div>
38 |         <div class="image"><img class="lazy" data-src="https://source.unsplash.com/random/623" /></div>
39 |         <div class="image"><img class="lazy" data-src="https://source.unsplash.com/random/624" /></div>
40 |         <div class="image"><img class="lazy" data-src="https://source.unsplash.com/random/625" /></div>
41 |         <div class="image"><img class="lazy" data-src="https://source.unsplash.com/random/600" /></div>
42 |         <div class="image"><img class="lazy" data-src="https://source.unsplash.com/random/601" /></div>
43 |         <div class="image image-big"><img class="lazy" data-src="https://source.unsplash.com/random/602" /></div>
44 |         <div class="image"><img class="lazy" data-src="https://source.unsplash.com/random/603" /></div>
45 |         <div class="image image-big"><img class="lazy" data-src="https://source.unsplash.com/random/604" /></div>
46 |         <div class="image"><img class="lazy" data-src="https://source.unsplash.com/random/605" /></div>
47 |         <div class="image"><img class="lazy" data-src="https://source.unsplash.com/random/606" /></div>
48 |         <div class="image image-horizontal"><img class="lazy" data-src="https://source.unsplash.com/random/607" /></div>
49 |         <div class="image"><img class="lazy" data-src="https://source.unsplash.com/random/608" /></div>
50 |         <div class="image image-vertical"><img class="lazy" data-src="https://source.unsplash.com/random/609" /></div>
51 |         <div class="image"><img class="lazy" data-src="https://source.unsplash.com/random/610" /></div>
52 |         <div class="image"><img class="lazy" data-src="https://source.unsplash.com/random/611" /></div>
53 |         <div class="image"><img class="lazy" data-src="https://source.unsplash.com/random/612" /></div>
54 |         <div class="image"><img class="lazy" data-src="https://source.unsplash.com/random/613" /></div>
55 |         <div class="image"><img class="lazy" data-src="https://source.unsplash.com/random/614" /></div>
56 |         <div class="image image-big"><img class="lazy" data-src="https://source.unsplash.com/random/615" /></div>
57 |         <div class="image"><img class="lazy" data-src="https://source.unsplash.com/random/616" /></div>
58 |         <div class="image image-big"><img class="lazy" data-src="https://source.unsplash.com/random/617" /></div>
59 |         <div class="image"><img class="lazy" data-src="https://source.unsplash.com/random/618" /></div>
60 |         <div class="image"><img class="lazy" data-src="https://source.unsplash.com/random/619" /></div>
61 |         <div class="image image-horizontal"><img class="lazy" data-src="https://source.unsplash.com/random/620" /></div>
62 |         <div class="image"><img class="lazy" data-src="https://source.unsplash.com/random/621" /></div>
63 |         <div class="image image-horizontal"><img class="lazy" data-src="https://source.unsplash.com/random/622" /></div>
64 |         <div class="image"><img class="lazy" data-src="https://source.unsplash.com/random/623" /></div>
65 |         <div class="image"><img class="lazy" data-src="https://source.unsplash.com/random/624" /></div>
66 |         <div class="image"><img class="lazy" data-src="https://source.unsplash.com/random/625" /></div>
67 |         <div class="image"><img class="lazy" data-src="https://source.unsplash.com/random/600" /></div>
68 |         <div class="image"><img class="lazy" data-src="https://source.unsplash.com/random/601" /></div>
69 |         <div class="image image-big"><img class="lazy" data-src="https://source.unsplash.com/random/602" /></div>
70 |         <div class="image"><img class="lazy" data-src="https://source.unsplash.com/random/603" /></div>
71 |         <div class="image image-big"><img class="lazy" data-src="https://source.unsplash.com/random/604" /></div>
72 |         <div class="image"><img class="lazy" data-src="https://source.unsplash.com/random/605" /></div>
73 |         <div class="image"><img class="lazy" data-src="https://source.unsplash.com/random/606" /></div>
74 |         <div class="image image-horizontal"><img class="lazy" data-src="https://source.unsplash.com/random/607" /></div>
75 |         <div class="image"><img class="lazy" data-src="https://source.unsplash.com/random/608" /></div>
76 |         <div class="image image-vertical"><img class="lazy" data-src="https://source.unsplash.com/random/609" /></div>
77 |         <div class="image"><img class="lazy" data-src="https://source.unsplash.com/random/610" /></div>
78 |         <div class="image"><img class="lazy" data-src="https://source.unsplash.com/random/611" /></div>
79 |         <div class="image"><img class="lazy" data-src="https://source.unsplash.com/random/612" /></div>
80 |         <div class="image"><img class="lazy" data-src="https://source.unsplash.com/random/613" /></div>
81 |         <div class="image"><img class="lazy" data-src="https://source.unsplash.com/random/614" /></div>
82 |         <div class="image image-big"><img class="lazy" data-src="https://source.unsplash.com/random/615" /></div>
83 |         <div class="image"><img class="lazy" data-src="https://source.unsplash.com/random/616" /></div>
84 |         <div class="image image-big"><img class="lazy" data-src="https://source.unsplash.com/random/617" /></div>
85 |         <div class="image"><img class="lazy" data-src="https://source.unsplash.com/random/618" /></div>
86 |         <div class="image"><img class="lazy" data-src="https://source.unsplash.com/random/619" /></div>
87 |         <div class="image image-horizontal"><img class="lazy" data-src="https://source.unsplash.com/random/620" /></div>
88 |         <div class="image"><img class="lazy" data-src="https://source.unsplash.com/random/621" /></div>
89 |         <div class="image image-horizontal"><img class="lazy" data-src="https://source.unsplash.com/random/622" /></div>
90 |         <div class="image"><img class="lazy" data-src="https://source.unsplash.com/random/623" /></div>
91 |         <div class="image"><img class="lazy" data-src="https://source.unsplash.com/random/624" /></div>
92 |         <div class="image"><img class="lazy" data-src="https://source.unsplash.com/random/625" /></div>
93 |     </div>
94 | </body>
95 | 
96 | </html>


--------------------------------------------------------------------------------
/lazy-load-images/2/script.js:
--------------------------------------------------------------------------------
 1 | document.addEventListener("DOMContentLoaded", function() {
 2 |   const lazyImages = [].slice.call(document.querySelectorAll("img.lazy"));
 3 | 
 4 |   if ("IntersectionObserver" in window) {
 5 |     let lazyImageObserver = new IntersectionObserver(function(entries, observer) {
 6 |       entries.forEach(function(entry) {
 7 |         if (entry.isIntersecting) {
 8 |           let lazyImage = entry.target;
 9 |           lazyImage.src = lazyImage.dataset.src;
10 |           lazyImage.classList.remove("lazy");
11 |           lazyImageObserver.unobserve(lazyImage);
12 |         }
13 |       });
14 |     });
15 | 
16 |     lazyImages.forEach(function(lazyImage) {
17 |       lazyImageObserver.observe(lazyImage);
18 |     });
19 |   } else {
20 |     console.error('IntersectionObserver is not supported');
21 |   }
22 | });


--------------------------------------------------------------------------------
/lazy-load-images/2/style.css:
--------------------------------------------------------------------------------
 1 | * {
 2 |   margin: 0;
 3 |   padding: 0;
 4 |   box-sizing: border-box;
 5 | }
 6 | 
 7 | .gallery {
 8 |   display: grid;
 9 |   grid-auto-flow: dense;
10 |   grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
11 |   grid-auto-rows: 200px;
12 |   grid-gap: 10px;
13 |   padding: 10px;
14 | }
15 | 
16 | .gallery .image {
17 |   grid-area: span 1 / span 1;
18 | }
19 | 
20 | .gallery .image-horizontal {
21 |   grid-area: span 1 / span 2;
22 | }
23 | 
24 | .gallery .image-vertical {
25 |   grid-area: span 2 / span 1;
26 | }
27 | 
28 | .gallery .image-big {
29 |   grid-area: span 2 / span 2;
30 | }
31 | 
32 | .gallery img.lazy {
33 |   opacity: 0.1;
34 |   will-change: opacity;
35 |   transition: all 0.3s;
36 | }
37 | 
38 | .gallery img {
39 |   height: 100%;
40 |   width: 100%;
41 |   object-fit: cover;
42 |   border-radius: 3px;
43 |   background: #ccc;
44 |   transition: 0.5s;
45 | }
46 | 
47 | .gallery img:hover {
48 |   transform: scale(1.1);
49 | }
50 | 
51 | @media (max-width: 400px) {
52 |   .gallery .image-horizontal,
53 |   .gallery .image-vertical,
54 |   .gallery .image-big {
55 |     grid-area: span 1 / span 1;
56 |   }
57 | }
58 | 


--------------------------------------------------------------------------------
/lazy-load-images/3/index.html:
--------------------------------------------------------------------------------
 1 | 
 2 | <!DOCTYPE html>
 3 | <html lang="en">
 4 | 
 5 | <head>
 6 |     <meta charset="UTF-8">
 7 |     <meta name="viewport" content="width=device-width, initial-scale=1.0">
 8 |     <title>Lazy load images</title>
 9 |     <link rel="stylesheet" href="./style.css">
10 | </head>
11 | <body>
12 |     <div class="gallery">
13 |         <div class="image"><img loading="lazy" src="https://source.unsplash.com/random/600" /></div>
14 |         <div class="image"><img loading="lazy" src="https://source.unsplash.com/random/601" /></div>
15 |         <div class="image image-big"><img loading="lazy" src="https://source.unsplash.com/random/602" /></div>
16 |         <div class="image"><img loading="lazy" src="https://source.unsplash.com/random/603" /></div>
17 |         <div class="image image-big"><img loading="lazy" src="https://source.unsplash.com/random/604" /></div>
18 |         <div class="image"><img loading="lazy" src="https://source.unsplash.com/random/605" /></div>
19 |         <div class="image"><img loading="lazy" src="https://source.unsplash.com/random/606" /></div>
20 |         <div class="image image-horizontal"><img loading="lazy" src="https://source.unsplash.com/random/607" /></div>
21 |         <div class="image"><img loading="lazy" src="https://source.unsplash.com/random/608" /></div>
22 |         <div class="image image-vertical"><img loading="lazy" src="https://source.unsplash.com/random/609" /></div>
23 |         <div class="image"><img loading="lazy" src="https://source.unsplash.com/random/610" /></div>
24 |         <div class="image"><img loading="lazy" src="https://source.unsplash.com/random/611" /></div>
25 |         <div class="image"><img loading="lazy" src="https://source.unsplash.com/random/612" /></div>
26 |         <div class="image"><img loading="lazy" src="https://source.unsplash.com/random/613" /></div>
27 |         <div class="image"><img loading="lazy" src="https://source.unsplash.com/random/614" /></div>
28 |         <div class="image image-big"><img loading="lazy" src="https://source.unsplash.com/random/615" /></div>
29 |         <div class="image"><img loading="lazy" src="https://source.unsplash.com/random/616" /></div>
30 |         <div class="image image-big"><img loading="lazy" src="https://source.unsplash.com/random/617" /></div>
31 |         <div class="image"><img loading="lazy" src="https://source.unsplash.com/random/618" /></div>
32 |         <div class="image"><img loading="lazy" src="https://source.unsplash.com/random/619" /></div>
33 |         <div class="image image-horizontal"><img loading="lazy" src="https://source.unsplash.com/random/620" /></div>
34 |         <div class="image"><img loading="lazy" src="https://source.unsplash.com/random/621" /></div>
35 |         <div class="image image-horizontal"><img loading="lazy" src="https://source.unsplash.com/random/622" /></div>
36 |         <div class="image"><img loading="lazy" src="https://source.unsplash.com/random/623" /></div>
37 |         <div class="image"><img loading="lazy" src="https://source.unsplash.com/random/624" /></div>
38 |         <div class="image"><img loading="lazy" src="https://source.unsplash.com/random/625" /></div>
39 |         <div class="image"><img loading="lazy" src="https://source.unsplash.com/random/600" /></div>
40 |         <div class="image"><img loading="lazy" src="https://source.unsplash.com/random/601" /></div>
41 |         <div class="image image-big"><img loading="lazy" src="https://source.unsplash.com/random/602" /></div>
42 |         <div class="image"><img loading="lazy" src="https://source.unsplash.com/random/603" /></div>
43 |         <div class="image image-big"><img loading="lazy" src="https://source.unsplash.com/random/604" /></div>
44 |         <div class="image"><img loading="lazy" src="https://source.unsplash.com/random/605" /></div>
45 |         <div class="image"><img loading="lazy" src="https://source.unsplash.com/random/606" /></div>
46 |         <div class="image image-horizontal"><img loading="lazy" src="https://source.unsplash.com/random/607" /></div>
47 |         <div class="image"><img loading="lazy" src="https://source.unsplash.com/random/608" /></div>
48 |         <div class="image image-vertical"><img loading="lazy" src="https://source.unsplash.com/random/609" /></div>
49 |         <div class="image"><img loading="lazy" src="https://source.unsplash.com/random/610" /></div>
50 |         <div class="image"><img loading="lazy" src="https://source.unsplash.com/random/611" /></div>
51 |         <div class="image"><img loading="lazy" src="https://source.unsplash.com/random/612" /></div>
52 |         <div class="image"><img loading="lazy" src="https://source.unsplash.com/random/613" /></div>
53 |         <div class="image"><img loading="lazy" src="https://source.unsplash.com/random/614" /></div>
54 |         <div class="image image-big"><img loading="lazy" src="https://source.unsplash.com/random/615" /></div>
55 |         <div class="image"><img loading="lazy" src="https://source.unsplash.com/random/616" /></div>
56 |         <div class="image image-big"><img loading="lazy" src="https://source.unsplash.com/random/617" /></div>
57 |         <div class="image"><img loading="lazy" src="https://source.unsplash.com/random/618" /></div>
58 |         <div class="image"><img loading="lazy" src="https://source.unsplash.com/random/619" /></div>
59 |         <div class="image image-horizontal"><img loading="lazy" src="https://source.unsplash.com/random/620" /></div>
60 |         <div class="image"><img loading="lazy" src="https://source.unsplash.com/random/621" /></div>
61 |         <div class="image image-horizontal"><img loading="lazy" src="https://source.unsplash.com/random/622" /></div>
62 |         <div class="image"><img loading="lazy" src="https://source.unsplash.com/random/623" /></div>
63 |         <div class="image"><img loading="lazy" src="https://source.unsplash.com/random/624" /></div>
64 |         <div class="image"><img loading="lazy" src="https://source.unsplash.com/random/625" /></div>
65 |         <div class="image"><img loading="lazy" src="https://source.unsplash.com/random/600" /></div>
66 |         <div class="image"><img loading="lazy" src="https://source.unsplash.com/random/601" /></div>
67 |         <div class="image image-big"><img loading="lazy" src="https://source.unsplash.com/random/602" /></div>
68 |         <div class="image"><img loading="lazy" src="https://source.unsplash.com/random/603" /></div>
69 |         <div class="image image-big"><img loading="lazy" src="https://source.unsplash.com/random/604" /></div>
70 |         <div class="image"><img loading="lazy" src="https://source.unsplash.com/random/605" /></div>
71 |         <div class="image"><img loading="lazy" src="https://source.unsplash.com/random/606" /></div>
72 |         <div class="image image-horizontal"><img loading="lazy" src="https://source.unsplash.com/random/607" /></div>
73 |         <div class="image"><img loading="lazy" src="https://source.unsplash.com/random/608" /></div>
74 |         <div class="image image-vertical"><img loading="lazy" src="https://source.unsplash.com/random/609" /></div>
75 |         <div class="image"><img loading="lazy" src="https://source.unsplash.com/random/610" /></div>
76 |         <div class="image"><img loading="lazy" src="https://source.unsplash.com/random/611" /></div>
77 |         <div class="image"><img loading="lazy" src="https://source.unsplash.com/random/612" /></div>
78 |         <div class="image"><img loading="lazy" src="https://source.unsplash.com/random/613" /></div>
79 |         <div class="image"><img loading="lazy" src="https://source.unsplash.com/random/614" /></div>
80 |         <div class="image image-big"><img loading="lazy" src="https://source.unsplash.com/random/615" /></div>
81 |         <div class="image"><img loading="lazy" src="https://source.unsplash.com/random/616" /></div>
82 |         <div class="image image-big"><img loading="lazy" src="https://source.unsplash.com/random/617" /></div>
83 |         <div class="image"><img loading="lazy" src="https://source.unsplash.com/random/618" /></div>
84 |         <div class="image"><img loading="lazy" src="https://source.unsplash.com/random/619" /></div>
85 |         <div class="image image-horizontal"><img loading="lazy" src="https://source.unsplash.com/random/620" /></div>
86 |         <div class="image"><img loading="lazy" src="https://source.unsplash.com/random/621" /></div>
87 |         <div class="image image-horizontal"><img loading="lazy" src="https://source.unsplash.com/random/622" /></div>
88 |         <div class="image"><img loading="lazy" src="https://source.unsplash.com/random/623" /></div>
89 |         <div class="image"><img loading="lazy" src="https://source.unsplash.com/random/624" /></div>
90 |         <div class="image"><img loading="lazy" src="https://source.unsplash.com/random/625" /></div>
91 |     </div>
92 | </body>
93 | </html>


--------------------------------------------------------------------------------
/lazy-load-images/3/style.css:
--------------------------------------------------------------------------------
 1 | * {
 2 |   margin: 0;
 3 |   padding: 0;
 4 |   box-sizing: border-box;
 5 | }
 6 | 
 7 | .gallery {
 8 |   display: grid;
 9 |   grid-auto-flow: dense;
10 |   grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
11 |   grid-auto-rows: 200px;
12 |   grid-gap: 10px;
13 |   padding: 10px;
14 | }
15 | 
16 | .gallery .image {
17 |   grid-area: span 1 / span 1;
18 | }
19 | 
20 | .gallery .image-horizontal {
21 |   grid-area: span 1 / span 2;
22 | }
23 | 
24 | .gallery .image-vertical {
25 |   grid-area: span 2 / span 1;
26 | }
27 | 
28 | .gallery .image-big {
29 |   grid-area: span 2 / span 2;
30 | }
31 | 
32 | .gallery img.lazy {
33 |   opacity: 0.1;
34 |   will-change: opacity;
35 |   transition: all 0.3s;
36 | }
37 | 
38 | .gallery img {
39 |   height: 100%;
40 |   width: 100%;
41 |   object-fit: cover;
42 |   border-radius: 3px;
43 |   background: #ccc;
44 |   transition: 0.5s;
45 | }
46 | 
47 | .gallery img:hover {
48 |   transform: scale(1.1);
49 | }
50 | 
51 | @media (max-width: 400px) {
52 |   .gallery .image-horizontal,
53 |   .gallery .image-vertical,
54 |   .gallery .image-big {
55 |     grid-area: span 1 / span 1;
56 |   }
57 | }
58 | 


--------------------------------------------------------------------------------
/lazy-load-images/index.html:
--------------------------------------------------------------------------------
 1 | 
 2 | <!DOCTYPE html>
 3 | <html lang="en">
 4 | 
 5 | <head>
 6 |     <meta charset="UTF-8">
 7 |     <meta name="viewport" content="width=device-width, initial-scale=1.0">
 8 |     <title>Lazy load images</title>
 9 |     <link rel="stylesheet" href="./style.css">
10 | </head>
11 | 
12 | <body>
13 |     <div class="gallery">
14 |         <div class="image"><img src="https://source.unsplash.com/random/600" /></div>
15 |         <div class="image"><img src="https://source.unsplash.com/random/601" /></div>
16 |         <div class="image image-big"><img src="https://source.unsplash.com/random/602" /></div>
17 |         <div class="image"><img src="https://source.unsplash.com/random/603" /></div>
18 |         <div class="image image-big"><img src="https://source.unsplash.com/random/604" /></div>
19 |         <div class="image"><img src="https://source.unsplash.com/random/605" /></div>
20 |         <div class="image"><img src="https://source.unsplash.com/random/606" /></div>
21 |         <div class="image image-horizontal"><img src="https://source.unsplash.com/random/607" /></div>
22 |         <div class="image"><img src="https://source.unsplash.com/random/608" /></div>
23 |         <div class="image image-vertical"><img src="https://source.unsplash.com/random/609" /></div>
24 |         <div class="image"><img src="https://source.unsplash.com/random/610" /></div>
25 |         <div class="image"><img src="https://source.unsplash.com/random/611" /></div>
26 |         <div class="image"><img src="https://source.unsplash.com/random/612" /></div>
27 |         <div class="image"><img src="https://source.unsplash.com/random/613" /></div>
28 |         <div class="image"><img src="https://source.unsplash.com/random/614" /></div>
29 |         <div class="image image-big"><img src="https://source.unsplash.com/random/615" /></div>
30 |         <div class="image"><img src="https://source.unsplash.com/random/616" /></div>
31 |         <div class="image image-big"><img src="https://source.unsplash.com/random/617" /></div>
32 |         <div class="image"><img src="https://source.unsplash.com/random/618" /></div>
33 |         <div class="image"><img src="https://source.unsplash.com/random/619" /></div>
34 |         <div class="image image-horizontal"><img src="https://source.unsplash.com/random/620" /></div>
35 |         <div class="image"><img src="https://source.unsplash.com/random/621" /></div>
36 |         <div class="image image-horizontal"><img src="https://source.unsplash.com/random/622" /></div>
37 |         <div class="image"><img src="https://source.unsplash.com/random/623" /></div>
38 |         <div class="image"><img src="https://source.unsplash.com/random/624" /></div>
39 |         <div class="image"><img src="https://source.unsplash.com/random/625" /></div>
40 |         <div class="image"><img src="https://source.unsplash.com/random/600" /></div>
41 |         <div class="image"><img src="https://source.unsplash.com/random/601" /></div>
42 |         <div class="image image-big"><img src="https://source.unsplash.com/random/602" /></div>
43 |         <div class="image"><img src="https://source.unsplash.com/random/603" /></div>
44 |         <div class="image image-big"><img src="https://source.unsplash.com/random/604" /></div>
45 |         <div class="image"><img src="https://source.unsplash.com/random/605" /></div>
46 |         <div class="image"><img src="https://source.unsplash.com/random/606" /></div>
47 |         <div class="image image-horizontal"><img src="https://source.unsplash.com/random/607" /></div>
48 |         <div class="image"><img src="https://source.unsplash.com/random/608" /></div>
49 |         <div class="image image-vertical"><img src="https://source.unsplash.com/random/609" /></div>
50 |         <div class="image"><img src="https://source.unsplash.com/random/610" /></div>
51 |         <div class="image"><img src="https://source.unsplash.com/random/611" /></div>
52 |         <div class="image"><img src="https://source.unsplash.com/random/612" /></div>
53 |         <div class="image"><img src="https://source.unsplash.com/random/613" /></div>
54 |         <div class="image"><img src="https://source.unsplash.com/random/614" /></div>
55 |         <div class="image image-big"><img src="https://source.unsplash.com/random/615" /></div>
56 |         <div class="image"><img src="https://source.unsplash.com/random/616" /></div>
57 |         <div class="image image-big"><img src="https://source.unsplash.com/random/617" /></div>
58 |         <div class="image"><img src="https://source.unsplash.com/random/618" /></div>
59 |         <div class="image"><img src="https://source.unsplash.com/random/619" /></div>
60 |         <div class="image image-horizontal"><img src="https://source.unsplash.com/random/620" /></div>
61 |         <div class="image"><img src="https://source.unsplash.com/random/621" /></div>
62 |         <div class="image image-horizontal"><img src="https://source.unsplash.com/random/622" /></div>
63 |         <div class="image"><img src="https://source.unsplash.com/random/623" /></div>
64 |         <div class="image"><img src="https://source.unsplash.com/random/624" /></div>
65 |         <div class="image"><img src="https://source.unsplash.com/random/625" /></div>
66 |         <div class="image"><img src="https://source.unsplash.com/random/600" /></div>
67 |         <div class="image"><img src="https://source.unsplash.com/random/601" /></div>
68 |         <div class="image image-big"><img src="https://source.unsplash.com/random/602" /></div>
69 |         <div class="image"><img src="https://source.unsplash.com/random/603" /></div>
70 |         <div class="image image-big"><img src="https://source.unsplash.com/random/604" /></div>
71 |         <div class="image"><img src="https://source.unsplash.com/random/605" /></div>
72 |         <div class="image"><img src="https://source.unsplash.com/random/606" /></div>
73 |         <div class="image image-horizontal"><img src="https://source.unsplash.com/random/607" /></div>
74 |         <div class="image"><img src="https://source.unsplash.com/random/608" /></div>
75 |         <div class="image image-vertical"><img src="https://source.unsplash.com/random/609" /></div>
76 |         <div class="image"><img src="https://source.unsplash.com/random/610" /></div>
77 |         <div class="image"><img src="https://source.unsplash.com/random/611" /></div>
78 |         <div class="image"><img src="https://source.unsplash.com/random/612" /></div>
79 |         <div class="image"><img src="https://source.unsplash.com/random/613" /></div>
80 |         <div class="image"><img src="https://source.unsplash.com/random/614" /></div>
81 |         <div class="image image-big"><img src="https://source.unsplash.com/random/615" /></div>
82 |         <div class="image"><img src="https://source.unsplash.com/random/616" /></div>
83 |         <div class="image image-big"><img src="https://source.unsplash.com/random/617" /></div>
84 |         <div class="image"><img src="https://source.unsplash.com/random/618" /></div>
85 |         <div class="image"><img src="https://source.unsplash.com/random/619" /></div>
86 |         <div class="image image-horizontal"><img src="https://source.unsplash.com/random/620" /></div>
87 |         <div class="image"><img src="https://source.unsplash.com/random/621" /></div>
88 |         <div class="image image-horizontal"><img src="https://source.unsplash.com/random/622" /></div>
89 |         <div class="image"><img src="https://source.unsplash.com/random/623" /></div>
90 |         <div class="image"><img src="https://source.unsplash.com/random/624" /></div>
91 |         <div class="image"><img src="https://source.unsplash.com/random/625" /></div>
92 | 
93 |     </div>
94 | </body>
95 | 
96 | </html>


--------------------------------------------------------------------------------
/lazy-load-images/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "parser-blocking",
 3 |   "version": "1.0.0",
 4 |   "description": "",
 5 |   "main": "server.js",
 6 |   "scripts": {
 7 |     "start": "nodemon server.js",
 8 |     "test": "echo \"Error: no test specified\" && exit 1"
 9 |   },
10 |   "config": {
11 |     "port": 3001,
12 |     "css-delay": 2000
13 |   },
14 |   "author": "",
15 |   "license": "ISC",
16 |   "dependencies": {
17 |     "express": "^4.17.1"
18 |   },
19 |   "devDependencies": {
20 |     "nodemon": "^2.0.7"
21 |   }
22 | }
23 | 


--------------------------------------------------------------------------------
/lazy-load-images/server.js:
--------------------------------------------------------------------------------
 1 | const fs = require("fs");
 2 | const express = require("express");
 3 | const config = JSON.parse(fs.readFileSync("package.json")).config;
 4 | 
 5 | const server = express();
 6 | 
 7 | server.use(express.static('./', { etag: false }));
 8 | 
 9 | const port = parseInt(config["port"], 10);
10 | server.listen(port, () => {
11 |     console.log(`Server is listening on http://localhost:${port}/`);
12 | });


--------------------------------------------------------------------------------
/lazy-load-images/style.css:
--------------------------------------------------------------------------------
 1 | * {
 2 |     margin: 0;
 3 |     padding: 0;
 4 |     box-sizing: border-box;
 5 |   }
 6 |   
 7 |   .gallery {
 8 |     display: grid;
 9 |     grid-auto-flow: dense;
10 |     grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
11 |     grid-auto-rows: 200px;
12 |     grid-gap: 10px;
13 |     padding: 10px;
14 |   }
15 |   
16 |   .gallery .image {
17 |     grid-area: span 1 / span 1;
18 |   }
19 |   
20 |   .gallery .image-horizontal {
21 |     grid-area: span 1 / span 2;
22 |   }
23 |   
24 |   .gallery .image-vertical {
25 |     grid-area: span 2 / span 1;
26 |   }
27 |   
28 |   .gallery .image-big {
29 |     grid-area: span 2 / span 2;
30 |   }
31 |   
32 |   .gallery img.lazy {
33 |     opacity: 0.1;
34 |     will-change: opacity;
35 |     transition: all 0.3s;
36 |   }
37 |   
38 |   .gallery img {
39 |     height: 100%;
40 |     width: 100%;
41 |     object-fit: cover;
42 |     border-radius: 3px;
43 |     background: #ccc;
44 |     transition: 0.5s;
45 |   }
46 |   
47 |   .gallery img:hover {
48 |     transform: scale(1.1);
49 |   }
50 |   
51 |   @media (max-width: 400px) {
52 |     .gallery .image-horizontal,
53 |     .gallery .image-vertical,
54 |     .gallery .image-big {
55 |       grid-area: span 1 / span 1;
56 |     }
57 |   }
58 |   


--------------------------------------------------------------------------------
/lighthouse/.gitignore:
--------------------------------------------------------------------------------
1 | node_modules/
2 | .DS_Store
3 | 


--------------------------------------------------------------------------------
/lighthouse/assets/css/banner.css:
--------------------------------------------------------------------------------
 1 | .consent-banner {
 2 |   position: relative;
 3 |   width: 100%;
 4 |   background: #3348ca;
 5 |   color: #fff;
 6 |   /* position: fixed;
 7 |   bottom: 0; */
 8 | }
 9 | 
10 | .consent-banner .container {
11 |   display: flex;
12 |   justify-content: space-between;
13 |   align-items: center;
14 |   padding: 60px;
15 |   font-size: 18px;
16 |   cursor: pointer;
17 | }
18 | 
19 | .consent-banner a {
20 |     text-decoration: underline;
21 |     color: #fff;
22 |     margin-left: 15px;
23 | }


--------------------------------------------------------------------------------
/lighthouse/assets/css/gallery.css:
--------------------------------------------------------------------------------
 1 | .gallery {
 2 |   display: grid;
 3 |   grid-auto-flow: dense;
 4 |   grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
 5 |   grid-auto-rows: 200px;
 6 |   grid-gap: 10px;
 7 |   padding: 10px;
 8 | }
 9 | 
10 | .gallery .image {
11 |   grid-area: span 1 / span 1;
12 | }
13 | 
14 | .gallery .image-horizontal {
15 |   grid-area: span 1 / span 2;
16 | }
17 | 
18 | .gallery .image-vertical {
19 |   grid-area: span 2 / span 1;
20 | }
21 | 
22 | .gallery .image-big {
23 |   grid-area: span 2 / span 2;
24 | }
25 | 
26 | .gallery img.lazy {
27 |   opacity: 0.1;
28 |   will-change: opacity;
29 |   transition: all 0.3s;
30 | }
31 | 
32 | .gallery img {
33 |   height: 100%;
34 |   width: 100%;
35 |   object-fit: cover;
36 |   border-radius: 3px;
37 |   background: #ccc;
38 |   transition: 0.5s;
39 | }
40 | 
41 | .gallery img:hover {
42 |   transform: scale(1.1);
43 | }
44 | 
45 | @media (max-width: 400px) {
46 |   .gallery .image-horizontal,
47 |   .gallery .image-vertical,
48 |   .gallery .image-big {
49 |     grid-area: span 1 / span 1;
50 |   }
51 | }
52 | 


--------------------------------------------------------------------------------
/lighthouse/assets/css/index.css:
--------------------------------------------------------------------------------
 1 | @import url(/assets/css/banner.css);
 2 | @import url(/assets/css/gallery.css);
 3 | 
 4 | * {
 5 |     margin: 0;
 6 |     padding: 0;
 7 |     box-sizing: border-box;
 8 | }
 9 | 
10 | body {
11 |     background: #fff;
12 |     font-family: Arial, Helvetica, sans-serif;
13 | }
14 | 
15 | .unused-class{
16 |     background: red;
17 |     color: #fff;
18 | }
19 | 
20 | #unused-id{
21 |     background: red;
22 |     color: #fff;
23 | }
24 | 
25 | .bg {
26 |     width: 100%;
27 | }
28 | 
29 | .home {
30 | 	position: relative;
31 | 	height: 100%;
32 |     height: 300px;
33 |     background: linear-gradient(57deg, rgba(0, 198, 167, 1) 33%, rgba(30, 77, 146, .8) 100%);
34 |     color: #fff;
35 |     font-size: 28px;
36 |     display: flex;
37 |     justify-content: center;
38 |     align-items: center;
39 | }
40 | 
41 | .footer {
42 |     position: relative;
43 | 	height: 100%;
44 |     height: 200px;
45 |     background: #333;
46 |     color: #fff;
47 |     font-size: 18px;
48 |     display: flex;
49 |     justify-content: center;
50 |     align-items: center;
51 | }
52 | 
53 | .info {
54 |     padding: 20px;
55 | }
56 | 
57 | .info p {
58 |     margin: 20px 0;
59 | }


--------------------------------------------------------------------------------
/lighthouse/assets/images/coding.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/devkodeio/web-performance-bootcamp/0c56374d01efcf5f9694d4e22e78ed1082870bea/lighthouse/assets/images/coding.png


--------------------------------------------------------------------------------
/lighthouse/assets/js/banner.js:
--------------------------------------------------------------------------------
 1 | /**
 2 |  * This renders a Cookie consent banner into the page.
 3 |  */
 4 | (function (ready) {
 5 |   if (document.readyState === "complete") {
 6 |     ready();
 7 |   } else {
 8 |     document.addEventListener("readystatechange", function (event) {
 9 |       if (document.readyState === "complete") {
10 |         ready();
11 |       }
12 |     });
13 |   }
14 | })(function main() {
15 |   /* the document is now ready. */
16 |   var consentBannerEl = document.createElement("div");
17 |   consentBannerEl.classList.add("consent-banner");
18 |   consentBannerEl.innerHTML = `
19 |         <div class="container">
20 |         <p>This website uses cookies to ensure you get the best experience on our website.</p>
21 |         <div>
22 |             <a href="javascript:void(0);" class="btn-decline">Decline</a>
23 |             <a href="javascript:void(0);" class="btn-accept">I Understand</a>
24 |         </div>
25 |         </div>
26 |       `;
27 |   consentBannerEl.querySelector(".btn-decline").addEventListener("click", function () {
28 |     document.body.removeChild(consentBannerEl);
29 |   });
30 |   consentBannerEl.querySelector(".btn-accept").addEventListener("click", function () {
31 |     document.body.removeChild(consentBannerEl);
32 |   });
33 | 
34 |   setTimeout(() => {
35 |       document.body.insertBefore(consentBannerEl, document.body.children[0]);
36 |   }, 1000);
37 | });
38 | 


--------------------------------------------------------------------------------
/lighthouse/assets/js/imageoptimizer.js:
--------------------------------------------------------------------------------
 1 | const path = require('path');
 2 | const fs = require('fs').promises;
 3 | const imagemin = require('imagemin');
 4 | const imageminJpegtran = require('imagemin-jpegtran');
 5 | const imageminPngquant = require('imagemin-pngquant');
 6 |  
 7 | (async () => {
 8 |     const files = await imagemin(['assets/images/*.{jpg,png}'], {
 9 |         plugins: [
10 |             imageminJpegtran(),
11 |             imageminPngquant({
12 |                 quality: [0.6, 0.8]
13 |             })
14 |         ]
15 |     }).then((files) => {
16 |       files.forEach(async (file) => {
17 |         const source = path.parse(file.sourcePath);
18 |         file.destinationPath = `${source.dir}/${source.name}.min${source.ext}`;
19 |         await fs.writeFile(file.destinationPath, file.data);
20 |       });
21 |     });
22 |   })();
23 | 
24 | 
25 |   // https://www.npmjs.com/package/imagemin
26 |   // https://www.npmjs.com/package/imagemin-jpegtran


--------------------------------------------------------------------------------
/lighthouse/assets/js/main.js:
--------------------------------------------------------------------------------
1 | function delay(duration) {
2 |   const start = new Date().getTime();
3 |   while (new Date().getTime() < start + duration) {}
4 | }
5 | 
6 | delay(1500);
7 | 


--------------------------------------------------------------------------------
/lighthouse/assets/js/performance.js:
--------------------------------------------------------------------------------
 1 | (function (callback) {
 2 |     if (document.readyState === "complete" || document.readyState === "interactive") {
 3 |         callback();
 4 |     } else {
 5 |       document.addEventListener("readystatechange", function() {
 6 |         if (document.readyState === "complete") {
 7 |           callback();
 8 |         }
 9 |       });
10 |     }
11 |   })(function perf() { /* the document is now complete. */
12 |   
13 |     var data = {
14 |       url: window.location.href,
15 |       dcl: 0,
16 |       load: 0,
17 |       fcp: 0,
18 |       lcp: 0,
19 |       cls: 0,
20 |       fid: 0
21 |     };
22 |   
23 |     var fcpObserver = new PerformanceObserver(function handleFCP(entryList) {
24 |       var entries = entryList.getEntries() || [];
25 |       entries.forEach(function(entry) {
26 |         if (entry.name === "first-contentful-paint") {
27 |           data.fcp = entry.startTime;
28 |           console.log("Recorded FCP Performance: " + data.fcp);
29 |         }
30 |       });
31 |     }).observe({ type: "paint", buffered: true });
32 |   
33 |     var lcpObserver = new PerformanceObserver(function handleLCP(entryList) {
34 |       var entries = entryList.getEntries() || [];
35 |       entries.forEach(function(entry) {
36 |         if (entry.startTime > data.lcp) {
37 |           data.lcp = entry.startTime;
38 |           console.log("Recorded LCP Performance: " + data.lcp);
39 |         }
40 |       });
41 |     }).observe({ type: "largest-contentful-paint", buffered: true });
42 |   
43 |     var clsObserver = new PerformanceObserver(function handleCLS(entryList) {
44 |       var entries = entryList.getEntries() || [];
45 |       entries.forEach(function(entry) {
46 |         if (!entry.hadRecentInput) {
47 |           data.cls += entry.value;
48 |           console.log("Increased CLS Performance: " + data.cls);
49 |         }
50 |       });
51 |     }).observe({ type: "layout-shift", buffered: true });
52 |   
53 |     var fidObserver = new PerformanceObserver(function handleFID(entryList) {
54 |       var entries = entryList.getEntries() || [];
55 |       entries.forEach(function(entry) {
56 |         data.fid = entry.processingStart - entry.startTime;
57 |         console.log("Recorded FID Performance: " + data.fid);
58 |       });
59 |     }).observe({ type: "first-input", buffered: true });
60 |   
61 |     window.addEventListener("beforeunload", function() {
62 |       var navEntry = performance.getEntriesByType("navigation")[0];
63 |       data.dcl = navEntry.domContentLoadedEventStart;
64 |       data.load = navEntry.loadEventStart;
65 |   
66 |       var payload = JSON.stringify(data);
67 |       navigator.sendBeacon("/api/performance", payload);
68 |       console.log("Sending performance:", payload);
69 |     });
70 |   
71 |   });
72 |   


--------------------------------------------------------------------------------
/lighthouse/index.html:
--------------------------------------------------------------------------------
  1 | <!DOCTYPE html>
  2 | <html lang="en">
  3 |   <head>
  4 |     <meta charset="UTF-8" />
  5 |     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  6 |     <title>Web performance</title>
  7 |     <!-- <link rel="preconnect" href="https://fonts.gstatic.com" /> -->
  8 |     <!-- <link rel="preconnect" href="http://localhost:3000"> -->
  9 |     <!-- <link rel="preload" href="./assets/css/banner.css" as="style"> -->
 10 |     <link rel="stylesheet" href="./assets/css/index.css" />
 11 |     <script src="./assets/js/main.js"></script>
 12 |     <script src="./assets/js/performance.js"></script>
 13 |     <script src="./assets/js/banner.js"></script>
 14 |     <script src="./assets/libs/jquery.js"></script>
 15 |     <script src="./assets/libs/lodash.js"></script>
 16 |   </head>
 17 |   <body>
 18 |     <div>
 19 |       <div class="home">Thanks for joining :)</div>
 20 |       <div class="info">
 21 |         <p>
 22 |           Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do
 23 |           eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad
 24 |           minim veniam, quis nostrud exercitation ullamco laboris nisi ut
 25 |           aliquip ex ea commodo consequat. Duis aute irure dolor in
 26 |           reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla
 27 |           pariatur. Excepteur sint occaecat cupidatat non proident, sunt in
 28 |           culpa qui officia deserunt mollit anim id est laborum.
 29 |         </p>
 30 |         <p>
 31 |           Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do
 32 |           eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad
 33 |           minim veniam, quis nostrud exercitation ullamco laboris nisi ut
 34 |           aliquip ex ea commodo consequat. Duis aute irure dolor in
 35 |           reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla
 36 |           pariatur. Excepteur sint occaecat cupidatat non proident, sunt in
 37 |           culpa qui officia deserunt mollit anim id est laborum.
 38 |         </p>
 39 |         <p>
 40 |           Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do
 41 |           eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad
 42 |           minim veniam, quis nostrud exercitation ullamco laboris nisi ut
 43 |           aliquip ex ea commodo consequat. Duis aute irure dolor in
 44 |           reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla
 45 |           pariatur. Excepteur sint occaecat cupidatat non proident, sunt in
 46 |           culpa qui officia deserunt mollit anim id est laborum.
 47 |         </p>
 48 |         <p>
 49 |           Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do
 50 |           eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad
 51 |           minim veniam, quis nostrud exercitation ullamco laboris nisi ut
 52 |           aliquip ex ea commodo consequat. Duis aute irure dolor in
 53 |           reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla
 54 |           pariatur. Excepteur sint occaecat cupidatat non proident, sunt in
 55 |           culpa qui officia deserunt mollit anim id est laborum.
 56 |         </p>
 57 |         <p>
 58 |           Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do
 59 |           eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad
 60 |           minim veniam, quis nostrud exercitation ullamco laboris nisi ut
 61 |           aliquip ex ea commodo consequat. Duis aute irure dolor in
 62 |           reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla
 63 |           pariatur. Excepteur sint occaecat cupidatat non proident, sunt in
 64 |           culpa qui officia deserunt mollit anim id est laborum.
 65 |         </p>
 66 |         <p>
 67 |           Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do
 68 |           eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad
 69 |           minim veniam, quis nostrud exercitation ullamco laboris nisi ut
 70 |           aliquip ex ea commodo consequat. Duis aute irure dolor in
 71 |           reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla
 72 |           pariatur. Excepteur sint occaecat cupidatat non proident, sunt in
 73 |           culpa qui officia deserunt mollit anim id est laborum.
 74 |         </p>
 75 |         <p>
 76 |           Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do
 77 |           eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad
 78 |           minim veniam, quis nostrud exercitation ullamco laboris nisi ut
 79 |           aliquip ex ea commodo consequat. Duis aute irure dolor in
 80 |           reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla
 81 |           pariatur. Excepteur sint occaecat cupidatat non proident, sunt in
 82 |           culpa qui officia deserunt mollit anim id est laborum.
 83 |         </p>
 84 |       </div>
 85 |       <img class="bg" src="./assets/images/coding.png" />
 86 |       <div class="gallery">
 87 |         <div class="image">
 88 |           <img src="https://source.unsplash.com/random/600" />
 89 |         </div>
 90 |         <div class="image">
 91 |           <img src="https://source.unsplash.com/random/601" />
 92 |         </div>
 93 |         <div class="image image-big">
 94 |           <img src="https://source.unsplash.com/random/602" />
 95 |         </div>
 96 |         <div class="image">
 97 |           <img src="https://source.unsplash.com/random/603" />
 98 |         </div>
 99 |         <div class="image image-big">
100 |           <img src="https://source.unsplash.com/random/604" />
101 |         </div>
102 |         <div class="image">
103 |           <img src="https://source.unsplash.com/random/605" />
104 |         </div>
105 |         <div class="image">
106 |           <img src="https://source.unsplash.com/random/606" />
107 |         </div>
108 |         <div class="image image-horizontal">
109 |           <img src="https://source.unsplash.com/random/607" />
110 |         </div>
111 |         <div class="image">
112 |           <img src="https://source.unsplash.com/random/608" />
113 |         </div>
114 |         <div class="image image-vertical">
115 |           <img src="https://source.unsplash.com/random/609" />
116 |         </div>
117 |         <div class="image">
118 |           <img src="https://source.unsplash.com/random/610" />
119 |         </div>
120 |         <div class="image">
121 |           <img src="https://source.unsplash.com/random/611" />
122 |         </div>
123 |         <div class="image">
124 |           <img src="https://source.unsplash.com/random/612" />
125 |         </div>
126 |         <div class="image">
127 |           <img src="https://source.unsplash.com/random/613" />
128 |         </div>
129 |         <div class="image">
130 |           <img src="https://source.unsplash.com/random/614" />
131 |         </div>
132 |         <div class="image image-big">
133 |           <img src="https://source.unsplash.com/random/615" />
134 |         </div>
135 |         <div class="image">
136 |           <img src="https://source.unsplash.com/random/616" />
137 |         </div>
138 |         <div class="image image-big">
139 |           <img src="https://source.unsplash.com/random/617" />
140 |         </div>
141 |         <div class="image">
142 |           <img src="https://source.unsplash.com/random/618" />
143 |         </div>
144 |         <div class="image">
145 |           <img src="https://source.unsplash.com/random/619" />
146 |         </div>
147 |         <div class="image">
148 |           <img src="https://source.unsplash.com/random/621" />
149 |         </div>
150 |       </div>
151 |       <div class="footer">devkode.io © 2021. All Right Reserved.</div>
152 |     </div>
153 |   </body>
154 | </html>
155 | 
156 | <!-- web.dev -->
157 | 


--------------------------------------------------------------------------------
/lighthouse/logs/performance.csv:
--------------------------------------------------------------------------------
1 | time,url,dcl,load,fcp,lcp,cls,fid
2 | 1616278588117,http://localhost:3000/,3125.319999991916,6017.9799999750685,3145.8699999784585,3223.634,0.11391130073991401,0
3 | 1616278594527,http://localhost:3000/,3122.540000011213,5112.185000005411,3143.8400000042748,3217.35,0.11391130073991401,3.850000008242205
4 | 


--------------------------------------------------------------------------------
/lighthouse/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "web-performance",
 3 |   "version": "1.0.0",
 4 |   "description": "",
 5 |   "main": "server.js",
 6 |   "scripts": {
 7 |     "start": "nodemon server.js",
 8 |     "image-compress": "node ./assets/js/imageoptimizer.js",
 9 |     "test": "echo \"Error: no test specified\" && exit 1"
10 |   },
11 |   "config": {
12 |     "port": 3000,
13 |     "delay": 1000,
14 |     "compress": false
15 |   },
16 |   "author": "",
17 |   "license": "ISC",
18 |   "dependencies": {
19 |     "compression": "^1.7.4",
20 |     "csvtojson": "^2.0.10",
21 |     "express": "^4.17.1"
22 |   },
23 |   "devDependencies": {
24 |     "imagemin": "^7.0.1",
25 |     "imagemin-jpegtran": "^7.0.0",
26 |     "imagemin-pngquant": "^9.0.2",
27 |     "nodemon": "^2.0.7"
28 |   }
29 | }
30 | 


--------------------------------------------------------------------------------
/lighthouse/report.html:
--------------------------------------------------------------------------------
  1 | <!DOCTYPE html>
  2 | <html lang="en">
  3 |   <head>
  4 |     <meta charset="UTF-8" />
  5 |     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  6 |     <title>Performance report</title>
  7 |     <script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.9.4/Chart.min.js"></script>
  8 |     <style>
  9 |       body {
 10 |         display: flex;
 11 |         justify-content: center;
 12 |         align-items: center;
 13 |       }
 14 |       #myChart {
 15 |         height: 500px !important;
 16 |         width: 500px !important;
 17 |       }
 18 |     </style>
 19 |   </head>
 20 |   <body>
 21 |     <div
 22 |       class="chart-container"
 23 |       style="position: relative; height: 40vh; width: 80vw"
 24 |     >
 25 |       <canvas id="chart"></canvas>
 26 |     </div>
 27 | 
 28 |     <script>
 29 |       function drawChart({ labels, fcp, lcp, fid }) {
 30 |         var ctx = document.getElementById("chart");
 31 |         var myChart = new Chart(ctx, {
 32 |           type: "line",
 33 |           data: {
 34 |             labels: labels,
 35 |             datasets: [
 36 |               {
 37 |                 label: "FCP",
 38 |                 fill: false,
 39 |                 backgroundColor: "red",
 40 |                 borderColor: "red",
 41 |                 data: fcp,
 42 |                 yAxisID: "y-axis-1",
 43 |               },
 44 |               {
 45 |                 label: "LCP",
 46 |                 fill: false,
 47 |                 backgroundColor: "green",
 48 |                 borderColor: "green",
 49 |                 data: lcp,
 50 |                 yAxisID: "y-axis-1",
 51 |               },
 52 |               {
 53 |                 label: "FID",
 54 |                 fill: false,
 55 |                 backgroundColor: "blue",
 56 |                 borderColor: "blue",
 57 |                 data: fid,
 58 |                 yAxisID: "y-axis-2",
 59 |               },
 60 |             ],
 61 |           },
 62 |           options: {
 63 |             responsive: true,
 64 |             title: {
 65 |               display: true,
 66 |               text: "Performance chart",
 67 |             },
 68 |             elements: {
 69 |               line: {
 70 |                 tension: 0,
 71 |               },
 72 |             },
 73 |             scales: {
 74 |               yAxes: [
 75 |                 {
 76 |                   type: "linear",
 77 |                   display: true,
 78 |                   position: "left",
 79 |                   id: "y-axis-1",
 80 |                 },
 81 |                 {
 82 |                   type: "linear",
 83 |                   display: true,
 84 |                   position: "right",
 85 |                   id: "y-axis-2",
 86 | 
 87 |                   gridLines: {
 88 |                     drawOnChartArea: false,
 89 |                   },
 90 |                 },
 91 |               ],
 92 |             },
 93 |           },
 94 |         });
 95 |       }
 96 | 
 97 |       fetch("api/performance")
 98 |         .then((res) => res.json())
 99 |         .then((data) => {
100 |           console.log(data.data);
101 |           const payload = {
102 |             labels: [],
103 |             fcp: [],
104 |             lcp: [],
105 |             fid: [],
106 |           };
107 |           data.data.forEach((el) => {
108 |             payload["fcp"].push(el.fcp);
109 |             payload["lcp"].push(el.lcp);
110 |             payload["fid"].push(el.fid);
111 |             const time = new Date(Number(el.time));
112 |             payload["labels"].push(time.getHours() + ":" + time.getMinutes());
113 |           });
114 | 
115 |           drawChart(payload);
116 |         });
117 |     </script>
118 |   </body>
119 | </html>
120 | 


--------------------------------------------------------------------------------
/lighthouse/server.js:
--------------------------------------------------------------------------------
 1 | const fs = require("fs");
 2 | const path = require("path");
 3 | const express = require("express");
 4 | const bodyParser = require("body-parser");
 5 | const compression = require("compression");
 6 | const CSVToJSON = require('csvtojson');
 7 | const config = JSON.parse(fs.readFileSync("package.json")).config;
 8 | const logDir = path.resolve(__dirname, "./logs");
 9 | const logFile = path.resolve(logDir, "performance.csv");
10 | 
11 | const server = express();
12 | if (config["compress"]) {
13 |   server.use(compression({ filter: () => true }));
14 | }
15 | 
16 | server.use((req, res, next) => {
17 |   setTimeout(next, config["delay"]);
18 | });
19 | 
20 | server.use((req, res, next) => {
21 |   res.setHeader("Cache-Control", "no-store");
22 | //   res.setHeader("Cache-Control", "max-age=31536000"); // seconds
23 |   next();
24 | });
25 | 
26 | if (!fs.existsSync(logDir)) {
27 |   fs.mkdirSync(logDir, { recursive: true });
28 | }
29 | if (!fs.existsSync(logFile)) {
30 |   fs.writeFileSync(logFile, "time,url,dcl,load,fcp,lcp,cls,fid\n", {
31 |     flag: "wx",
32 |   });
33 | }
34 | 
35 | server.post(
36 |   "/api/performance",
37 |   bodyParser.json({ type: "*/*" }),
38 |   (req, res, next) => {
39 |     const now = new Date().getTime();
40 |     const record = `${now},${req.body.url},${req.body.dcl},${req.body.load},${req.body.fcp},${req.body.lcp},${req.body.cls},${req.body.fid}`;
41 |     console.log(record);
42 | 
43 |     fs.appendFile(logFile, `${record}\n`, (err) => {
44 |       if (err) {
45 |         console.error(err);
46 |         res.sendStatus(500);
47 |       } else {
48 |         res.sendStatus(200);
49 |       }
50 |       next();
51 |     });
52 |   }
53 | );
54 | 
55 | server.get("/api/performance", (req, res) => {
56 |     CSVToJSON().fromFile('./logs/performance.csv')
57 |     .then(data => {
58 |         res.json({data});
59 |     }).catch(err => {
60 |         console.log(err);
61 |     });
62 | });
63 | 
64 | server.use(express.static("./", { etag: false }));
65 | 
66 | const port = parseInt(config["port"], 10);
67 | server.listen(port, () => {
68 |   console.log(`Server is listening on http://localhost:${port}/`);
69 | });
70 | 
71 | 


--------------------------------------------------------------------------------
/network/.gitignore:
--------------------------------------------------------------------------------
1 | node_modules/
2 | .DS_Store
3 | 


--------------------------------------------------------------------------------
/network/css/color.css:
--------------------------------------------------------------------------------
1 | .unused-class {
2 |     color: red;
3 | }
4 | 
5 | .unused-id {
6 |     color: blue;
7 | }


--------------------------------------------------------------------------------
/network/css/style1.css:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/devkodeio/web-performance-bootcamp/0c56374d01efcf5f9694d4e22e78ed1082870bea/network/css/style1.css


--------------------------------------------------------------------------------
/network/css/style2.css:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/devkodeio/web-performance-bootcamp/0c56374d01efcf5f9694d4e22e78ed1082870bea/network/css/style2.css


--------------------------------------------------------------------------------
/network/css/style3.css:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/devkodeio/web-performance-bootcamp/0c56374d01efcf5f9694d4e22e78ed1082870bea/network/css/style3.css


--------------------------------------------------------------------------------
/network/css/style4.css:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/devkodeio/web-performance-bootcamp/0c56374d01efcf5f9694d4e22e78ed1082870bea/network/css/style4.css


--------------------------------------------------------------------------------
/network/css/style5.css:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/devkodeio/web-performance-bootcamp/0c56374d01efcf5f9694d4e22e78ed1082870bea/network/css/style5.css


--------------------------------------------------------------------------------
/network/css/style6.css:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/devkodeio/web-performance-bootcamp/0c56374d01efcf5f9694d4e22e78ed1082870bea/network/css/style6.css


--------------------------------------------------------------------------------
/network/css/style7.css:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/devkodeio/web-performance-bootcamp/0c56374d01efcf5f9694d4e22e78ed1082870bea/network/css/style7.css


--------------------------------------------------------------------------------
/network/css/style8.css:
--------------------------------------------------------------------------------
1 | @import url(./color.css);
2 | 
3 | 
4 | 


--------------------------------------------------------------------------------
/network/images/bootcamp-web-performance.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/devkodeio/web-performance-bootcamp/0c56374d01efcf5f9694d4e22e78ed1082870bea/network/images/bootcamp-web-performance.png


--------------------------------------------------------------------------------
/network/images/coding.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/devkodeio/web-performance-bootcamp/0c56374d01efcf5f9694d4e22e78ed1082870bea/network/images/coding.png


--------------------------------------------------------------------------------
/network/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 | <head>
 4 |     <meta charset="UTF-8">
 5 |     <meta name="viewport" content="width=device-width, initial-scale=1.0">
 6 |     <title>Network</title>
 7 |     <link rel="stylesheet" href="css/style1.css">
 8 | </head>
 9 | <body>
10 |     <div>Hello World!</div>
11 | </body>
12 | </html>


--------------------------------------------------------------------------------
/network/js/script1.js:
--------------------------------------------------------------------------------
1 | console.log('Script 1');


--------------------------------------------------------------------------------
/network/js/script2.js:
--------------------------------------------------------------------------------
1 | console.log('Script 2');


--------------------------------------------------------------------------------
/network/js/script3.js:
--------------------------------------------------------------------------------
1 | console.log('Script 3');


--------------------------------------------------------------------------------
/network/js/script4.js:
--------------------------------------------------------------------------------
1 | console.log('Script 4');


--------------------------------------------------------------------------------
/network/js/script5.js:
--------------------------------------------------------------------------------
1 | console.log('Script 5');


--------------------------------------------------------------------------------
/network/js/script6.js:
--------------------------------------------------------------------------------
1 | console.log('Script 6');


--------------------------------------------------------------------------------
/network/js/script7.js:
--------------------------------------------------------------------------------
1 | console.log('Script 7');


--------------------------------------------------------------------------------
/network/js/script8.js:
--------------------------------------------------------------------------------
1 | console.log('Script 8');


--------------------------------------------------------------------------------
/network/links.txt:
--------------------------------------------------------------------------------
 1 | <link rel="preload" href="css/color.css" as="style">
 2 | <link rel="dns-prefetch" href="https://cdnjs.cloudflare.com" >
 3 | <link rel="stylesheet" href="css/style1.css">
 4 | <link rel="stylesheet" href="css/style2.css">
 5 | <link rel="stylesheet" href="css/style3.css">
 6 | <link rel="stylesheet" href="css/style4.css">
 7 | <link rel="stylesheet" href="css/style5.css">
 8 | <link rel="stylesheet" href="css/style6.css">
 9 | <link rel="stylesheet" href="css/style7.css">
10 | <link rel="stylesheet" href="./libs/bootstrap.css">
11 | <link rel="stylesheet" href="./libs/animate.css">
12 | 
13 | <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.css">
14 | <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.css">
15 | <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/4.1.1/animate.css">
16 | <script src="https://cdnjs.cloudflare.com/ajax/libs/lodash.js/4.17.21/lodash.js"></script>
17 | <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.js"></script>
18 | <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.js"></script>
19 | <script src="https://cdnjs.cloudflare.com/ajax/libs/axios/0.21.1/axios.js"></script>
20 | <script src="https://cdnjs.cloudflare.com/ajax/libs/d3/6.6.0/d3.js"></script>
21 | <script src="https://cdnjs.cloudflare.com/ajax/libs/typescript/4.2.3/typescript.js"></script>
22 | <script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/r126/three.js"></script>
23 | <script src="./js/script1.js"></script>
24 | 
25 | 
26 | 
27 | <link rel="prefetch" href="css/color.css" as="style">
28 | 


--------------------------------------------------------------------------------
/network/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "parser-blocking",
 3 |   "version": "1.0.0",
 4 |   "description": "",
 5 |   "main": "server.js",
 6 |   "scripts": {
 7 |     "start": "nodemon server.js",
 8 |     "test": "echo \"Error: no test specified\" && exit 1"
 9 |   },
10 |   "config": {
11 |     "port": 3001,
12 |     "delay": 500,
13 |     "compress": false
14 |   },
15 |   "author": "",
16 |   "license": "ISC",
17 |   "dependencies": {
18 |     "compression": "^1.7.4",
19 |     "express": "^4.17.1"
20 |   },
21 |   "devDependencies": {
22 |     "nodemon": "^2.0.7"
23 |   }
24 | }
25 | 


--------------------------------------------------------------------------------
/network/script.js:
--------------------------------------------------------------------------------
1 | console.log('Hello World!');


--------------------------------------------------------------------------------
/network/server.js:
--------------------------------------------------------------------------------
 1 | const fs = require("fs");
 2 | const express = require("express");
 3 | const compression = require("compression");
 4 | const config = JSON.parse(fs.readFileSync("package.json")).config;
 5 | 
 6 | const server = express();
 7 | 
 8 | if (config["compress"]) {
 9 |   server.use(compression({ filter: () => true }));
10 | }
11 | server.use((req, res, next) => {
12 |   // if(req.url.slice(-2) == 'js') {
13 |   //     setTimeout(next, config["delay"]);
14 |   // }else{
15 |   //     next();
16 |   // }
17 |   setTimeout(next, config["delay"]);
18 | });
19 | 
20 | server.use((req, res, next) => {
21 |     res.setHeader("Cache-Control", "no-store");
22 |     // res.setHeader("Cache-Control", "max-age=31536000"); // seconds
23 |     next();
24 |   });
25 | server.use(express.static("./", { etag: false }));
26 | 
27 | const port = parseInt(config["port"], 10);
28 | server.listen(port, () => {
29 |   console.log(`Server is listening on http://localhost:${port}/`);
30 | });
31 | 


--------------------------------------------------------------------------------
/paint-profiler/.gitignore:
--------------------------------------------------------------------------------
1 | node_modules/
2 | .DS_Store
3 | 


--------------------------------------------------------------------------------
/paint-profiler/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 |   <head>
 4 |     <meta charset="UTF-8" />
 5 |     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
 6 |     <title>Rasterization</title>
 7 |     <style>
 8 |       * {
 9 |         margin: 0;
10 |         padding: 0;
11 |       }
12 |       body {
13 |         display: flex;
14 |         justify-content: center;
15 |         flex-direction: column;
16 |         align-items: center;
17 |         height: 100vh;
18 |         font: 400 16px/24px sans-serif;
19 |       }
20 |       .card {
21 |         width: 400px;
22 |         height: 150px;
23 |         border: 10px solid #3a99c2;
24 |         background: #46b8e9;
25 |         color: #fff;
26 |         text-transform: uppercase;
27 |         font-size: 14px;
28 |         display: flex;
29 |         justify-content: center;
30 |         align-items: center;
31 |       }
32 | 
33 |     </style>
34 |   </head>
35 |   <body>
36 |     <!-- <h2>Sunny</h2> -->
37 |     <div class="card">
38 |       It's time for paint profiler
39 |     </div>
40 |   </body>
41 | </html>
42 | 


--------------------------------------------------------------------------------
/paint-profiler/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "parser-blocking",
 3 |   "version": "1.0.0",
 4 |   "description": "",
 5 |   "main": "server.js",
 6 |   "scripts": {
 7 |     "start": "nodemon server.js",
 8 |     "test": "echo \"Error: no test specified\" && exit 1"
 9 |   },
10 |   "config": {
11 |     "port": 3001,
12 |     "css-delay": 2000
13 |   },
14 |   "author": "",
15 |   "license": "ISC",
16 |   "dependencies": {
17 |     "express": "^4.17.1"
18 |   },
19 |   "devDependencies": {
20 |     "nodemon": "^2.0.7"
21 |   }
22 | }
23 | 


--------------------------------------------------------------------------------
/paint-profiler/server.js:
--------------------------------------------------------------------------------
 1 | const fs = require("fs");
 2 | const express = require("express");
 3 | const config = JSON.parse(fs.readFileSync("package.json")).config;
 4 | 
 5 | const server = express();
 6 | 
 7 | server.use(express.static('./', { etag: false }));
 8 | 
 9 | const port = parseInt(config["port"], 10);
10 | server.listen(port, () => {
11 |     console.log(`Server is listening on http://localhost:${port}/`);
12 | });


--------------------------------------------------------------------------------
/parser-blocking/.gitignore:
--------------------------------------------------------------------------------
1 | node_modules/
2 | .DS_Store
3 | 


--------------------------------------------------------------------------------
/parser-blocking/1/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 | <head>
 4 |     <meta charset="UTF-8">
 5 |     <meta name="viewport" content="width=device-width, initial-scale=1.0">
 6 |     <title>Parser blocking</title>
 7 | </head>
 8 | <body>
 9 |     <span>Hello</span>
10 |     <script src="./script.js"></script>
11 |     <span>World</span>
12 | </body>
13 | </html>


--------------------------------------------------------------------------------
/parser-blocking/1/script.js:
--------------------------------------------------------------------------------
1 | console.log('Hello world!');
2 | 
3 | var span = document.getElementsByTagName("span")[0];
4 | span.style.color = "blue";


--------------------------------------------------------------------------------
/parser-blocking/2/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 | <head>
 4 |     <meta charset="UTF-8">
 5 |     <meta name="viewport" content="width=device-width, initial-scale=1.0">
 6 |     <title>Parser blocking</title>
 7 | </head>
 8 | <body>
 9 |     <span>Hello</span>
10 |     <script src="./script.js"></script>
11 |     <span>World</span>
12 | </body>
13 | </html>


--------------------------------------------------------------------------------
/parser-blocking/2/script.js:
--------------------------------------------------------------------------------
 1 | function delay(duration) {
 2 |   const start = new Date().getTime();
 3 |   while (new Date().getTime() < start + duration) {}
 4 | }
 5 | delay(2000);
 6 | 
 7 | console.log("Hello world!");
 8 | 
 9 | var span = document.getElementsByTagName("span")[0];
10 | span.style.color = "blue";
11 | 


--------------------------------------------------------------------------------
/parser-blocking/3/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 |   <head>
 4 |     <meta charset="UTF-8" />
 5 |     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
 6 |     <title>Parser blocking</title>
 7 |   </head>
 8 |   <body>
 9 |     <span>Hello</span>
10 |     <script>
11 |       function delay(duration) {
12 |         const start = new Date().getTime();
13 |         while (new Date().getTime() < start + duration) {}
14 |       }
15 |       delay(2000);
16 | 
17 |       console.log("Hello world!");
18 | 
19 |       var span = document.getElementsByTagName("span")[0];
20 |       span.style.color = "blue";
21 |     </script>
22 |     <span>World</span>
23 |   </body>
24 | </html>
25 | 


--------------------------------------------------------------------------------
/parser-blocking/3/script.js:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/devkodeio/web-performance-bootcamp/0c56374d01efcf5f9694d4e22e78ed1082870bea/parser-blocking/3/script.js


--------------------------------------------------------------------------------
/parser-blocking/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 | <head>
 4 |     <meta charset="UTF-8">
 5 |     <meta name="viewport" content="width=device-width, initial-scale=1.0">
 6 |     <title>Parser blocking</title>
 7 |     <script src="./script.js"></script>
 8 | </head>
 9 | <body>
10 |     <span>Hello</span>
11 |     <span>World</span>
12 | </body>
13 | </html>


--------------------------------------------------------------------------------
/parser-blocking/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "parser-blocking",
 3 |   "version": "1.0.0",
 4 |   "description": "",
 5 |   "main": "server.js",
 6 |   "scripts": {
 7 |     "start": "nodemon server.js",
 8 |     "test": "echo \"Error: no test specified\" && exit 1"
 9 |   },
10 |   "config": {
11 |     "port": 3001,
12 |     "js-delay": 0
13 |   },
14 |   "author": "",
15 |   "license": "ISC",
16 |   "dependencies": {
17 |     "express": "^4.17.1"
18 |   },
19 |   "devDependencies": {
20 |     "nodemon": "^2.0.7"
21 |   }
22 | }
23 | 


--------------------------------------------------------------------------------
/parser-blocking/script.js:
--------------------------------------------------------------------------------
1 | console.log('Hello World!');


--------------------------------------------------------------------------------
/parser-blocking/server.js:
--------------------------------------------------------------------------------
 1 | const fs = require("fs");
 2 | const express = require("express");
 3 | const config = JSON.parse(fs.readFileSync("package.json")).config;
 4 | 
 5 | const server = express();
 6 | 
 7 | server.use((req, res, next) => {
 8 |     if(req.url.slice(-2) == 'js') {
 9 |         setTimeout(next, config["js-delay"]);
10 |     }else{
11 |         next();
12 |     }
13 | });
14 | 
15 | server.use(express.static('./', { etag: false }));
16 | 
17 | const port = parseInt(config["port"], 10);
18 | server.listen(port, () => {
19 |     console.log(`Server is listening on http://localhost:${port}/`);
20 | });


--------------------------------------------------------------------------------
/render-blocking/.gitignore:
--------------------------------------------------------------------------------
1 | node_modules/
2 | .DS_Store
3 | 


--------------------------------------------------------------------------------
/render-blocking/1/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 |   <head>
 4 |     <meta charset="UTF-8" />
 5 |     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
 6 |     <title>Render blocking</title>
 7 |   </head>
 8 |   <body>
 9 |     <style>
10 |       span {
11 |         color: blue;
12 |       }
13 |     </style>
14 |     Hello 
15 |     <span>World</span>
16 |     <link rel="stylesheet" href="style1.css">
17 |   </body>
18 | </html>
19 | 


--------------------------------------------------------------------------------
/render-blocking/1/style1.css:
--------------------------------------------------------------------------------
1 | span {
2 |   color: red;
3 | }
4 | 


--------------------------------------------------------------------------------
/render-blocking/1/style2.css:
--------------------------------------------------------------------------------
1 | span {
2 |   color: green;
3 | }
4 | 


--------------------------------------------------------------------------------
/render-blocking/2/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 |   <head>
 4 |     <meta charset="UTF-8" />
 5 |     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
 6 |     <title>Render blocking</title>
 7 |   </head>
 8 |   <body>
 9 |     <style>
10 |       span {
11 |         color: blue;
12 |       }
13 |     </style>
14 |     Hello 
15 |     <span>World</span>
16 |     <link rel="stylesheet" href="style1.css"> <!-- 3 seconds (red)--> 
17 |     <link rel="stylesheet" href="style2.css"> <!-- 0 milli seconds (green)-->
18 |   </body>
19 | </html>
20 | 


--------------------------------------------------------------------------------
/render-blocking/2/style1.css:
--------------------------------------------------------------------------------
1 | span {
2 |   color: red;
3 | }
4 | 


--------------------------------------------------------------------------------
/render-blocking/2/style2.css:
--------------------------------------------------------------------------------
1 | span {
2 |   color: green;
3 | }
4 | 


--------------------------------------------------------------------------------
/render-blocking/3/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 |   <head>
 4 |     <meta charset="UTF-8" />
 5 |     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
 6 |     <title>Render blocking</title>
 7 |   </head>
 8 |   <body>
 9 |     <style>
10 |       span {
11 |         color: blue;
12 |       }
13 |     </style>
14 |     Hello 
15 |     <span>World</span>
16 |     <link rel="stylesheet" href="style1.css">
17 |     <link rel="stylesheet" href="style2.css">
18 |   </body>
19 | </html>
20 | 


--------------------------------------------------------------------------------
/render-blocking/3/style1.css:
--------------------------------------------------------------------------------
1 | span {
2 |   color: red !important;
3 | }
4 | 


--------------------------------------------------------------------------------
/render-blocking/3/style2.css:
--------------------------------------------------------------------------------
1 | span {
2 |   color: green;
3 | }
4 | 


--------------------------------------------------------------------------------
/render-blocking/4/color.css:
--------------------------------------------------------------------------------
1 | span {
2 |   color: green !important;
3 | }
4 | 


--------------------------------------------------------------------------------
/render-blocking/4/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 |   <head>
 4 |     <meta charset="UTF-8" />
 5 |     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
 6 |     <title>Render blocking</title>
 7 |   </head>
 8 |   <body>
 9 |     <style>
10 |       span {
11 |         color: blue;
12 |       }
13 |     </style>
14 |     Hello 
15 |     <span>World</span>
16 |     <link rel="stylesheet" href="style1.css">
17 |   </body>
18 | </html>
19 | 


--------------------------------------------------------------------------------
/render-blocking/4/style1.css:
--------------------------------------------------------------------------------
1 | @import './color.css';
2 | 
3 | span {
4 |   color: red;
5 | }
6 | 


--------------------------------------------------------------------------------
/render-blocking/5/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 |   <head>
 4 |     <meta charset="UTF-8" />
 5 |     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
 6 |     <title>Render blocking</title>
 7 |     <link rel="stylesheet" href="style2.css">
 8 |   </head>
 9 |   <body>
10 |     <style>
11 |       span {
12 |         color: blue;
13 |       }
14 |       </style>
15 |     Hello 
16 |     <span>World</span>
17 |     <link rel="stylesheet" href="style1.css">
18 |   </body>
19 | </html>
20 | 


--------------------------------------------------------------------------------
/render-blocking/5/style1.css:
--------------------------------------------------------------------------------
1 | span {
2 |   color: red;
3 | }
4 | 


--------------------------------------------------------------------------------
/render-blocking/5/style2.css:
--------------------------------------------------------------------------------
1 | span {
2 |   color: green;
3 | }
4 | 


--------------------------------------------------------------------------------
/render-blocking/6/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 |   <head>
 4 |     <meta charset="UTF-8" />
 5 |     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
 6 |     <title>Render blocking</title>
 7 |   </head>
 8 |   <body>
 9 |     Hello 
10 |     <link rel="stylesheet" href="style1.css">
11 |     <span>World</span>
12 |   </body>
13 | </html>
14 | 


--------------------------------------------------------------------------------
/render-blocking/6/style1.css:
--------------------------------------------------------------------------------
1 | span {
2 |   color: red;
3 | }
4 | 


--------------------------------------------------------------------------------
/render-blocking/7/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 |   <head>
 4 |     <meta charset="UTF-8" />
 5 |     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
 6 |     <title>Render blocking</title>
 7 |   </head>
 8 |   <body>
 9 |     Hello 
10 |     <link rel="stylesheet" media="print" onload="this.media='all'" href="style1.css">
11 |     <span>World</span>
12 |   </body>
13 | </html>
14 | 


--------------------------------------------------------------------------------
/render-blocking/7/style1.css:
--------------------------------------------------------------------------------
1 | span {
2 |   color: red;
3 | }
4 | 


--------------------------------------------------------------------------------
/render-blocking/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 |   <head>
 4 |     <meta charset="UTF-8" />
 5 |     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
 6 |     <title>Render blocking</title>
 7 |   </head>
 8 |   <body>
 9 |     <style>
10 |       span {
11 |         color: blue;
12 |       }
13 |     </style>
14 |     Hello <span>World</span>
15 |     <style>
16 |       span {
17 |         color: red;
18 |       }
19 |     </style>
20 |   </body>
21 | </html>
22 | 


--------------------------------------------------------------------------------
/render-blocking/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "parser-blocking",
 3 |   "version": "1.0.0",
 4 |   "description": "",
 5 |   "main": "server.js",
 6 |   "scripts": {
 7 |     "start": "nodemon server.js",
 8 |     "test": "echo \"Error: no test specified\" && exit 1"
 9 |   },
10 |   "config": {
11 |     "port": 3001,
12 |     "css-delay": 2000
13 |   },
14 |   "author": "",
15 |   "license": "ISC",
16 |   "dependencies": {
17 |     "express": "^4.17.1"
18 |   },
19 |   "devDependencies": {
20 |     "nodemon": "^2.0.7"
21 |   }
22 | }
23 | 


--------------------------------------------------------------------------------
/render-blocking/server.js:
--------------------------------------------------------------------------------
 1 | // Simulator
 2 | 
 3 | const fs = require("fs");
 4 | const express = require("express");
 5 | const config = JSON.parse(fs.readFileSync("package.json")).config;
 6 | 
 7 | const server = express();
 8 | 
 9 | server.use((req, res, next) => {
10 |     if(req.url.endsWith('style1.css') || req.url.endsWith('color.css')) {
11 |         setTimeout(next, 3000);
12 |     }else{
13 |         next();
14 |     }
15 | });
16 | 
17 | server.use(express.static('./', { etag: false }));
18 | 
19 | const port = parseInt(config["port"], 10);
20 | server.listen(port, () => {
21 |     console.log(`Server is listening on http://localhost:${port}/`);
22 | });


--------------------------------------------------------------------------------
/web-performance.pdf:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/devkodeio/web-performance-bootcamp/0c56374d01efcf5f9694d4e22e78ed1082870bea/web-performance.pdf


--------------------------------------------------------------------------------