Your Service Worker script will need to import in Workbox and initialize it before calling any of the routes documented in this write-up, similar to the below:
importScripts('workbox-sw.prod.v1.3.0.js');
const workbox = new WorkboxSW();
// Placeholder array populated automatically by workboxBuild.injectManifest()
| /* | |
| A (very) WIP collection of optimized/recommended jQuery plugin patterns | |
| from @addyosmani, @cowboy, @ajpiano and others. | |
| Disclaimer: | |
| ----------------------- | |
| Whilst the end-goal of this gist is to provide a list of recommended patterns, this | |
| is still very much a work-in-progress. I am not advocating the use of anything here | |
| until we've had sufficient time to tweak and weed out what the most useful patterns |
| { | |
| "name": "my-app", | |
| "version": "1.0.0", | |
| "description": "My test app", | |
| "main": "src/js/index.js", | |
| "scripts": { | |
| "jshint:dist": "jshint src/js/*.js", | |
| "jshint": "npm run jshint:dist", | |
| "jscs": "jscs src/*.js", | |
| "browserify": "browserify -s Validating -o ./dist/js/build.js ./lib/index.js", |
A tweet-sized debugger for visualizing your CSS layouts. Outlines every DOM element on your page a random (valid) CSS hex color.
One-line version to paste in your DevTools
Use $$ if your browser aliases it:
~ 108 byte version
| /** | |
| Code copyright Dustin Diaz and Ross Harmes, Pro JavaScript Design Patterns. | |
| **/ | |
| // Constructor. | |
| var Interface = function (name, methods) { | |
| if (arguments.length != 2) { | |
| throw new Error("Interface constructor called with " + arguments.length + "arguments, but expected exactly 2."); | |
| } | |
| this.name = name; |
Eric Bidelman has documented some of the common workflows possible with headless Chrome over in https://developers.google.com/web/updates/2017/04/headless-chrome.
If you're looking at this in 2016 and beyond, I strongly recommend investigating real headless Chrome: https://chromium.googlesource.com/chromium/src/+/lkgr/headless/README.md
Windows and Mac users might find using Justin Ribeiro's Docker setup useful here while full support for these platforms is being worked out.
Blink decodes off the main thread for image elements and for CSS styles (an image as an element's background style, for example). Moving the decode to the compositor thread (or the compositor worker thread pool?) does free-up the main thread to work on other tasks. We call this deferred decoding. With deferred decoding, the decode work remains on the critical path for presenting a frame to the display, so it can still cause animation jank.
The HTMLImageElement.decode() API should help with the jank problem. Also deferred decoding does not work with SVG
image resources. There are still cases where decoding images happens synchronously on the main thread: 2D canvas drawImage()
and createPattern(), and WebGL texture uploads.
| /* | |
| Flexbox CSS helpers from the Polymer team. Extracted from https://github.com/PolymerElements/iron-flex-layout for use as just CSS. | |
| Docs: https://elements.polymer-project.org/guides/flex-layout | |
| @license | |
| Copyright (c) 2017 The Polymer Project Authors. All rights reserved. | |
| This code may only be used under the BSD style license found at http://polymer.github.io/LICENSE.txt | |
| The complete set of authors may be found at http://polymer.github.io/AUTHORS.txt | |
| The complete set of contributors may be found at http://polymer.github.io/CONTRIBUTORS.txt |