| # --------------------------------------------------------------------------- | |
| # | |
| # Description: This file holds all my BASH configurations and aliases | |
| # | |
| # Sections: | |
| # 1. Environment Configuration | |
| # 2. Make Terminal Better (remapping defaults and adding functionality) | |
| # 3. File and Folder Management | |
| # 4. Searching | |
| # 5. Process Management |
| /** | |
| * Get requestAutocomplete data. Can only be called as part of an interaction event | |
| * listener such as mouse up/down, click, key & touch. | |
| * | |
| * @param {{billing: boolean, shipping: boolean}} opts | |
| * If billing is true, credit card & billing address details will be requested. | |
| * If shipping is true, a shipping name & address will be requested. | |
| * @param {function(response:Object<string, string>)} callback [description] | |
| * You callback is passed a single response object in this format: | |
| * { |
Other people's code is awful, and your own code from months previous counts as someone else's. With this and the festive spirit in mind, I dug up a canvas snow demo I made two years ago to see how bad my code really was.
Turns out the performance landscape has changed quite a bit, but after applying a couple of workarounds, best practices, and memory management, I got the demo running smoother than it ever did.
Ugh, I can't believe I just wrote "performance landscape". Anyway...
| <style> | |
| @font-face { | |
| font-family: 'myfont'; | |
| src: url('font.woff'); | |
| unicode-range: U+61-7A; /* lowercase a-z */ | |
| } | |
| p { | |
| font-family: myfont, sans-serif; | |
| } | |
| </style> |
| <!-- we currently have srcset... --> | |
| <img src="banner.jpeg" srcset="banner-HD.jpeg 2x, banner-phone.jpeg 100w, banner-phone-HD.jpeg 100w 2x"> | |
| <style> | |
| /* We also have image-set */ | |
| .whatever { | |
| background-image: image-set( | |
| "foo.png" 1x, | |
| "foo-2x.png" 2x, | |
| "foo-print.png" 600dpi | |
| ); |
| (function(document){ | |
| var script = 'script', | |
| twitterWidgets = document.createElement(script), | |
| lastScript = document.getElementsByTagName(script)[0]; | |
| twitterWidgets.async = twitterWidgets.src = 'http://platform.twitter.com/widgets.js'; | |
| lastScript.parentNode.insertBefore(twitterWidgets, lastScript); | |
| })(document); | |
| // compressed 177 bytes |
My reply to https://helloanselm.com/2016/open-service-worker-questions/, which sets a new record for false statements per word.
The first thing I noticed after making sure that Service Worker are enabled (Chrome is behind flags)
No they're not. They've been in stable for over a year now.
was that I found no user setting or any hint in the developer tools about service workers
There's a service worker panel in the sources tab and in the resources tab. There's also chrome://serviceworker-internals/. The script also appears in the context dropdown (as iframes do). The script itself also appears in the sources panel. You can also type navigator.serviceWorker.controller into the console to inspect the controlling service worker for the page.
I’ve been having a play around with Mutation Observers this morning, trying to work out when notifications happen and what happens when removing a node that was just added.
If you’re unfamiliar with Mutation Observers, they let you receive notifications when an element, or elements, have been modified in a particular way (here's an intro to Mutation Observers from Mozilla).
Consider this:
| <!doctype html> | |
| <script> | |
| navigator.serviceWorker.addEventListener('controllerchange', () => window.location.reload()); | |
| navigator.serviceWorker.register('sw.js'); | |
| if (navigator.serviceWorker.controller) { | |
| var req = new XMLHttpRequest(); | |
| req.open('GET', 'xhr'); | |
| req.onload = function() { |
| <!-- | |
| In an HTTP2 world, delivering multiple small individually cachable | |
| and executable scripts can be more efficient than one big | |
| concatenated script. Can we better prepare for this? Can it be | |
| done in a way that works with existing JS files? | |
| Imagine a page that had 4 interactive modules, all of which | |
| depended on a couple of utility scripts. We could progressively | |
| add behaviour to the page by executing the 'action' scripts | |
| as soon as they download & the utilities have executed. |