Alex Russell slightlyoff

## push_payloads_userland.md

      
              1 file
            
          
              3 forks
            
          
              20 comments
            
          
              23 stars
            
          
                slightlyoff
                / push_payloads_userland.md
            
            
              Last active
              September 30, 2022 23:11
            
              
                Delivering H/2 Push Payloads To Userland
              
          
    Background

One of the biggest missed opportunities thus far with HTTP/2 ("H/2") is that we are not yet able to sunset WebSockets in favor of H/2. Web Sockets and H/2 both support multiplexing messages bi-directionally and can send both textual and binary data.
Server Sent Events ("SSE"), by contrast, are not bi-directional (they're a "server-push-only" channel) and binary data cannot be sent easily. They are, however, very simple to implement. Adding to the menagerie of options, RTCPeerConnection can also be used to signal data to applications in a low-latency (but potentially lossy) way.
Because H/2 [does not support the handshake (upgrade) that WebSockets use to negotiate a connection](https://daniel.haxx.se/blog/2016/06/15/no-websockets-

  
## shortcodes_snippet.js
  // Phil Hawksworth's Netlify LMS <picture> img generator
  let getPicture = (url, alt="Missing alt text", width, height, style) => {
    let w = width ? width : "500";
    let w_attr = width ? `width="${width}"` : "";
    let h_attr = height ? `height="${height}"` : "";
    let s_attr = style ? `style="${style}"` : "";

    return `<picture>
      <source
        media="(min-width: 1200px)"

## .eleventy.js
// Here's how I use this shortcode in my .md files:
//
// {% picture
//  "/2020/06/platform-adjacency-theory/relevance_gap_opt.png",
//  "Mind the gap."
// %}
//
// And for the <figure> version that puts the alt text visibly below the image:
//
// {% figure

## index.html
<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>TikTok spinner</title>
  <style>

    :root {
      --base: 4px;

## push_api_sketch.md

      
              1 file
            
          
              1 fork
            
          
              10 comments
            
          
              10 stars
            
          
                slightlyoff
                / push_api_sketch.md
            
            
              Last active
              June 7, 2018 07:15
            
              
                Service Worker + Push API
              
          
    Motivation

The current Push API Draft specifies a system that has no notion of push channel persistence. Further, it does not include push message payloads, a feature that many developers want.
This gist outlines an API which:

integrates with the Service Worker to enable delivery of push messages to applications which do not have visible tabs
enables a JSON-formatted body of content
guards access to registration for pushes on potential user consent


## error-first-futures-examples.js
var log = console.log.bind(console);

// Like .then(), except we move to a single callback
asyncAPI().when(function(err, value) {
  if (err) {
    // error handling/recovery
    // ...
    // If return is instanceof Error, continues error chain
    return new Error(err.toString());
  }

## connectionchange.js
class ConnectionInfo {
  constructor(media="unknown",
              className="unknown",
              classId=0) {
    this.media = media;
    this.className = className;
    this.classId = classId;
  }
}

## ctrl.js
// ctrl.js
//   origin: http://example.com
//   scope: "/*"

"use strict";

// Called when this controller is installed as the newest version
// for a scope. Perhaps a clearer name for what is now sketched
// as "onupdate". Note that this is called BEFORE "onupgrade" is
// sent to a previous version's controller.
	// Phil Hawksworth's Netlify LMS <picture> img generator
	let getPicture = (url, alt="Missing alt text", width, height, style) => {
	let w = width ? width : "500";
	let w_attr = width ? `width="${width}"` : "";
	let h_attr = height ? `height="${height}"` : "";
	let s_attr = style ? `style="${style}"` : "";

	return `<picture>
	<source
	media="(min-width: 1200px)"
	// Here's how I use this shortcode in my .md files:
	//
	// {% picture
	// "/2020/06/platform-adjacency-theory/relevance_gap_opt.png",
	// "Mind the gap."
	// %}
	//
	// And for the <figure> version that puts the alt text visibly below the image:
	//
	// {% figure
	<!DOCTYPE html>
	<html>
	<head>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width">
	<title>TikTok spinner</title>
	<style>

	:root {
	--base: 4px;
	var log = console.log.bind(console);

	// Like .then(), except we move to a single callback
	asyncAPI().when(function(err, value) {
	if (err) {
	// error handling/recovery
	// ...
	// If return is instanceof Error, continues error chain
	return new Error(err.toString());
	}
	class ConnectionInfo {
	constructor(media="unknown",
	className="unknown",
	classId=0) {
	this.media = media;
	this.className = className;
	this.classId = classId;
	}
	}
	// ctrl.js
	// origin: http://example.com
	// scope: "/*"

	"use strict";

	// Called when this controller is installed as the newest version
	// for a scope. Perhaps a clearer name for what is now sketched
	// as "onupdate". Note that this is called BEFORE "onupgrade" is
	// sent to a previous version's controller.