Alexis H. Munsayac lxsmnsyc

OAuth Device Flow

This is flow used by apps on Apple TV / Roku. However, it is also useful for CLIs.

Here is my rundown. Please correct me in comments if something is wrong or if there is a better way to do this.

Device pings the server to begin activation process

Pure ESM package

The package that linked you here is now pure ESM. It cannot be require()'d from CommonJS.

This means you have the following choices:

Use ESM yourself. (preferred)
Use import foo from 'foo' instead of const foo = require('foo') to import the package. You also need to put "type": "module" in your package.json and more. Follow the below guide.
If the package is used in an async context, you could use await import(…) from CommonJS instead of require(…).
Stay on the existing version of the package until you can move to ESM.

user-package-stats

I was poking around trying to figure out all the packages I have access to publish and got curious. So I write this little script to determine the download stats for all the packages I have publish access to.

Feel free to try it yourself. Just change the username passed to getUserDownloadStats.

By default, the stats are sorted by their average daily downloads (descending). That should give you an idea of the most "popular" package of a given user relative to how long that package has been around.

You can use it with npx like so:

useSubscription and useMutableSource¹ tearing and deopt behavior.

Mounting a new tree

The tree below represents a React application mounting. During mount, two components read from an external, mutable source. The first one (List) reads version 1 of that data and the second one (Item) reads version 2.

Deopt

`useSubscription` (legacy mode)

N/A.

Minimal Node Servers

A collection of code snippets that create servers in as few steps as possible.

Minimal HTTP Server

// setup (61 bytes):
const http = require('http');

	{
	"name": "remove-ts",
	"version": "1.0.0",
	"description": "I use this to automatically fix feedback links in my workshops",
	"bin": "./remove-ts.js",
	"dependencies": {
	"@babel/core": "7.13.8",
	"@babel/preset-typescript": "7.13.0",
	"glob": "7.1.6"
	}

	#! Aaaaaaaaaaa this is JS!!!
	// https://github.com/tc39/proposal-hashbang
	// This file is mixing all new syntaxes in the proposal in one file without considering syntax conflict or correct runtime semantics
	// Enjoy!!!
	// Created at Nov 23, 2018

	for await(const x of (new A // https://github.com/tc39/proposal-pipeline-operator
	\|> do { // https://github.com/tc39/proposal-do-expressions
	case(?) { // https://github.com/tc39/proposal-pattern-matching
	when {val}: class {

	var text by mutableStateOf("")
	val charCount: Int get() = text.length
	val todoList = mutableStateListOf<Item>(emptyList())
	val filteredTodoList get() = when (todoListFilter) {
	Filter.Completed -> todoList.filter { it.isComplete }
	Filter.Uncompleted -> todoList.filter { !it.isComplete }
	Filter.All -> todoList
	}

	@Composable fun Example() {

	export const h=(t,p,...c)=>({t,p,c,k:p&&p.key})
	export const render=(e,d,t=d.t\|\|(d.t={}),p,r,c,m,y)=>
	// arrays
	e.map?e.map((e,p)=>render(e,d,t.o&&t.o[p])):
	// components
	e.t.call?(e.i=render((render.c=e).t(Object.assign({children:e.c},e.p),e.s=t.s\|\|{},t=>
	render(Object.assign(e.s,t)&&e,d,e)),t.i\|\|d,t&&t.i\|\|{}),d.t=t=e):(
	// create notes
	m=t.d\|\|(e.t?document.createElement(e.t):new Text(e.p)),
	// diff props

	/*
	Copy this into the console of any web page that is interactive and doesn't
	do hard reloads. You will hear your DOM changes as different pitches of
	audio.

	I have found this interesting for debugging, but also fun to hear web pages
	render like UIs do in movies.
	*/

	const audioCtx = new (window.AudioContext \|\| window.webkitAudioContext)()