Jake Archibald jakearchibald

## .bash_profile
#  ---------------------------------------------------------------------------
#
#  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

## fudfudfudfud.md

      
              1 file
            
          
              0 forks
            
          
              11 comments
            
          
              3 stars
            
          
                jakearchibald
                / fudfudfudfud.md
            
            
              Last active
              November 17, 2017 06:15
            
          
    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.

  
## index.html
<!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() {

## gist:8a9c47094b6e31de5cb2
function assertOkResponse(response) {
  if (response.type === 'opaque' || response.status === 200) {
    return response;
  }
  throw Error("Bad response: " + response.status);
}

fetch(url, {'mode': 'cors'}).then(assertOkResponse).then(function(response) {
  // cache
}).catch(function(err) {

## gist:5774636
/**
 * 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:
 *   {

## gist:5618497
<!--
  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.

## gist:5611910
<script src="jquery.js" async id="jq-script"></script>
<script src="carousel-ui.js" async requires="#jq-script"></script>
<script src="dialog-ui.js" async requires="#jq-script"></script>

<!--
  All files load async in parallel.

  jquery.js will execute first of the three

  carousel-ui.js & dialog-ui.js will execute in load order after jquery.js

## gist:4960056
<!-- 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
    );

## gist:4489851

      
              1 file
            
          
              0 forks
            
          
              6 comments
            
          
              1 star
            
          
                jakearchibald
                / gist:4489851
            
            
              Last active
              December 10, 2015 20:38
            
              
                Setting innerHTML and IE
              
          
    What do you think this will output?
var div = document.createElement('div');
div.innerHTML = '<span>Hello world!</span>';
var span = div.firstChild;
div.innerHTML = '<span>Uh oh!</span>';
console.log(span.innerHTML);

  
## gist:4354269
<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>
	# ---------------------------------------------------------------------------
	#
	# 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
	<!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() {
	function assertOkResponse(response) {
	if (response.type === 'opaque' \|\| response.status === 200) {
	return response;
	}
	throw Error("Bad response: " + response.status);
	}

	fetch(url, {'mode': 'cors'}).then(assertOkResponse).then(function(response) {
	// cache
	}).catch(function(err) {
	/**
	* 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:
	* {
	<!--
	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.
	<script src="jquery.js" async id="jq-script"></script>
	<script src="carousel-ui.js" async requires="#jq-script"></script>
	<script src="dialog-ui.js" async requires="#jq-script"></script>

	<!--
	All files load async in parallel.

	jquery.js will execute first of the three

	carousel-ui.js & dialog-ui.js will execute in load order after jquery.js
	<!-- 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
	);
	<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>