| <!DOCTYPE html> | |
| <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <title>Home</title> | |
| <script type="module"> | |
| function someClick() { | |
| alert("hello"); |
| async function totalCacheSize() { | |
| let size = 0; | |
| const cacheNames = await caches.keys(); | |
| for (const cacheName of cacheNames) { | |
| const cache = await caches.open(cacheName); | |
| const cachedRequests = await cache.keys(); | |
| for (const cachedRequest of cachedRequests) { | |
| const cachedResponse = await cache.match(cachedRequest); | |
| const responseBlob = await cachedResponse.blob(); | |
| size += responseBlob.size; |
| /** | |
| * @author ebidel@ (Eric Bidelman) | |
| * License Apache-2.0 | |
| * | |
| * Shows how to use Puppeeteer's code coverage API to measure CSS/JS coverage across | |
| * different points of time during loading. Great for determining if a lazy loading strategy | |
| * is paying off or working correctly. | |
| * | |
| * Install: | |
| * npm i puppeteer chalk cli-table |
| const stream = require('stream') | |
| const cache = new Map() // you might wanna use an lru here | |
| function createCacheStream (url) { | |
| const buf = [] | |
| return stream.Transform({ | |
| transform: function (data, enc, cb) { | |
| buffer.push(data) | |
| cb(null, data) | |
| }, |
Here is a checklist of all the things I need my CSS solution to handle.
I can explain any of the points. Leave a comment on the gist or tweet @DavidWells
Challenge: Take your favorite CSS solution and see how the checklist holds up.