Skip to content

Instantly share code, notes, and snippets.

Justin Fagnani justinfagnani

Block or report user

Report or block justinfagnani

Hide content and notifications from this user.

Learn more about blocking users

Contact Support about this user’s behavior.

Learn more about reporting abuse

Report abuse
View GitHub Profile
View lottie-player.ts
import lottie from './lib/lottie-import.js';
export class LottiePlayerElement extends HTMLElement {
get src(): string | null {
return this.getAttribute('src');
set src(v: string | null) {
if (v == null) {
justinfagnani / index.html
Last active Jan 2, 2019 — forked from jridgewell/index.html
Text data vs nodeValue #jsbench #jsperf ( #jsbench #jsperf
View index.html
<!DOCTYPE html>
<meta charset="utf-8"/>
<title>Text data vs nodeValue #jsbench #jsperf</title>
<script src=""></script>
<script src="./suite.js"></script>
<h1>Open the console to view the results</h1>
justinfagnani / example.js
Last active Oct 28, 2018
the-platform with the platform
View example.js
import {LitElement, html} from 'lit-element';
import {UseWindowSize} from './useWindowSize.js';
class extends UseWindowSize()(LitElement) {
render() {
return html`
width: ${window.innerWidth}
height: ${window.innerHeight}
justinfagnani /
Created Oct 18, 2018
Preemptible JavaScript Functions

Preemptible JavaScript Functions

Can we allow JS functions to opt-in to be prempted?


An expensive synchronous function will jank the UI:

function expensive() {}
justinfagnani / example-worker.ts
Created Aug 7, 2018
ModuleWorker - Easily access and call exports of a JS module in a Worker
View example-worker.ts
export const a = 'hello';
export const f = (a: any, b: any, c: any) => {
return {
a, b, c
justinfagnani /
Last active Jul 1, 2019
Inline JavaScript Modules Definitions

Inline JavaScript Module Definitions


Domenic's blöcks proposal outlines a way to conveniently define functions that run in another worker/worklet as an inline, non-capturing scope, function body.

Blöcks as proposed have a few open questions and lack a few features that could generalize them to more use cases and with more practical ergonomics.

  • Blöcks don't allow static imports, which makes it harder for them to import neccessary library code. They must rely on dynamic import, which is somewhat more difficult to statically analyzer.
justinfagnani /
Last active Mar 1, 2018
Maximally Minimal Mixins
justinfagnani / Async Module
Last active Feb 25, 2019
Async Module Initialization with Inline Modules
View Async Module

Async Module Initialization with Inline Modules

The Problem

Modules may need to load non-JS resources that would clearly categorized as dependencies - the module is not truly ready until those resources are (example: templates for UI components). Loading APIs, like fetch() are asynchronous, and there is currently no way to make a module wait for asynchronous calls.

The Problem with Top-Level await

Top-level await, which would block execution within a module on a await expression, has been proposed as a way to solve this problem. It has a critical problem as highlighted here by Rich Harris.


Scoped Custom Element Definitions


Scoped Custom Element definitions is an oft-requested feature of Web Components. The global registry is a possible source of name collisions that may arise from coincidence, or from an app trying to define multiple versions of the same element, or from more advanced scenarios like registering mocks during tests, or a component explicitly replacing an element definition for its scope.

Since the key DOM creation APIs are global, scoping definitions is tricky because we'd need a machanis to determind which scope to use. But if we offer scoped versions of these APIs the problem is tractable. This requires that DOM creation code is upgraded to use the new scoped APIs, something that hopefully could be done in template libraries and frameworks.

This proposal adds the ability to construct CustomElementRegistrys and chain them in order to inherit custom element definitions. It uses ShadowRoot as a scope for definitions. ShadowRoot can be associated with a

View findIndexAsync.js
async function findIndexAsync(promises, predicate) {
let i = 0;
for await (const p of asyncIterate(promises)) {
if (predicate(p)) {
return i;
You can’t perform that action at this time.