Yuji Sugiura leaysgur

Chrome Dev Summit 2020まわりの記事メモ

はじめに

このgistにあるもの

Chrome Dev Summit 2020の前後でGoogleのひとが公開した記事を、やる気の続く限り読んで書いたメモ。
主にみているのは以下のサイト。

Note: Since writing this, I've been pointed to some exciting new research/tooling called Project Cambria https://www.inkandswitch.com/cambria.html I'll likely have to rewrite this article taking that into account. Leaving this up for posterity's sake.

(This series isn't meant to be a primer/tutorial, though we might do something regarding it in the future. For official documentation and starters, see https://developers.cloudflare.com/workers/learning/using-durable-objects.

Further - these are my personal views; I expect to be wrong about a lot of them. Indeed, I'm not paying much attention to presenting these well at the moment, simply writing down thoughts. As such, expect these writeups to change often, particularly as the platform takes shape. I'm also mostly a front end guy, so don't get mad if I get it very wrong. Give me feedback! Always happy to learn and make changes.)

Durable Objects are a fascinating new storage primitive from cloudflare for their workers platform. There's a lot of 'cool'

Preact: Progressive Hydration

Preact now supports seamless progressive hydration.

Any component can throw during hydration (or new tree creation like a route change!), and if a component somewhere higher in the tree catches that via componentDidCatch, hydration gets paused.

Re-rendering the tree (via setState, etc) simply resumes hydration where it left off.

User Agent client hintsのJavaScript APIとHTTP Headerについてのメモ

Demo

Tested: Chrome Canary 86.0.4231.0

Demo: https://client-hint-different-origin.glitch.me/
- Allow Cross Origin version via Feature-Policy HTTP Header
https://client-hint-different-origin.glitch.me/allow-cross-origin/?uach=UA-Arch&uach=UA-Full-Version&uach=UA-Mobile&uach=UA-Model&uach=UA-Platform-Version&uach=UA-Platform&uach=UA

My FE/DOM Libraries

a gist to recap the current status, also available as library picker!

Minimalistic Libraries

do one thing only and do it well

µhtml (HTML/SVG auto-keyed and manual keyed render)
augmentor (hooks for anything)
wickedElements (custom elements without custom elements ... wait, what?)

	/**
	* Get a Google auth token given service user credentials. This function
	* is a very slightly modified version of the one found at
	* https://community.cloudflare.com/t/example-google-oauth-2-0-for-service-accounts-using-cf-worker/258220
	*
	* @param {string} user the service user identity, typically of the
	* form [user]@[project].iam.gserviceaccount.com
	* @param {string} key the private key corresponding to user
	* @param {string} scope the scopes to request for this token, a
	* listing of available scopes is provided at

	import { getTokenFromGCPServiceAccount } from '@sagi.io/workers-jwt'

	/**
	* Getting the access token to use in the header.
	*/

	// For example's sake, the file contents (modified) from the private key has been
	// listed below, but the recommended way would be to use environment variables.
	export async function getAccessToken() {
	const jwtToken = await getTokenFromGCPServiceAccount({

	/* global SLACK_SIGNING_SECRET */

	const SIGN_VERSION = 'v0' // per documentation, this is always "v0"

	/**
	* Verify that a request actually came from Slack using our Signing Secret
	* and HMAC-SHA256.
	*
	* Based on code examples found in Cloudflare's documentation:
	* https://developers.cloudflare.com/workers/examples/signing-requests

	'use strict';

	/**
	* @callback BeforeShutdownListener
	* @param {string} [signalOrEvent] The exit signal or event name received on the process.
	*/

	/**
	* System signals the app will listen to initiate shutdown.
	* @const {string[]}

	/*
	It's now a package. You can find it here:

	https://github.com/joshnuss/svelte-local-storage-store
	*/



	// Svelte store backed by window.localStorage
	// Persists store's data locally