Skip to content

Instantly share code, notes, and snippets.

Avatar

Justin Fagnani justinfagnani

View GitHub Profile
@justinfagnani
justinfagnani / example.ts
Created Mar 4, 2020
Observable LitElement
View example.ts
class ExampleElement extends ObservableLitElement {
@property()
src: string;
@observe('src')
protected async _onSrcChange() {
// fetch the new URL...
}
}
View README.md

This is a reproduction for https://bugs.chromium.org/p/chromium/issues/detail?id=1050221

To reproduce:

  1. Download gist
  2. run npm i
  3. run npm start

Chrome will start, cycle through some async tasks, and print the duration to the document and the terminal running node. On my laptop it takes ~500ms.

Next, run npm start again, bug switch back to the terminal as soon as Chrome launches. There should be enough time to put Chrome in the background before the task completes. The tasks should either never start or never complete. If you put Chrome in the foreground, the tasks will finish quickly.

@justinfagnani
justinfagnani / index.html
Created Dec 14, 2019 — forked from jridgewell/index.html
Creating an TreeWalker, DOM element, and setting a walker's currentNode #jsbench #jsperf (https://jsbench.github.io/#26a49a6033a8a5de00d00e05bf2cb275) #jsbench #jsperf
View index.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"/>
<title>Creating an TreeWalker, DOM element, and setting a walker's currentNode #jsbench #jsperf</title>
<script src="https://cdnjs.cloudflare.com/ajax/libs/benchmark/1.0.0/benchmark.min.js"></script>
<script src="./suite.js"></script>
</head>
<body>
<h1>Open the console to view the results</h1>
View index.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"/>
<title>Directive Implementations</title>
<script src="https://cdnjs.cloudflare.com/ajax/libs/benchmark/1.0.0/benchmark.min.js"></script>
<script src="./suite.js"></script>
</head>
<body>
<h1>Open the console to view the results</h1>
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
justinfagnani / index.html
Last active Jan 2, 2019 — forked from jridgewell/index.html
Text data vs nodeValue #jsbench #jsperf (http://jsbench.github.io/#b962f11b0802e9be42b4b0a660520727) #jsbench #jsperf
View index.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"/>
<title>Text data vs nodeValue #jsbench #jsperf</title>
<script src="https://cdnjs.cloudflare.com/ajax/libs/benchmark/1.0.0/benchmark.min.js"></script>
<script src="./suite.js"></script>
</head>
<body>
<h1>Open the console to view the results</h1>
@justinfagnani
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`
<p>
width: ${window.innerWidth}
height: ${window.innerHeight}
</p>
@justinfagnani
justinfagnani / preemptible-js.md
Created Oct 18, 2018
Preemptible JavaScript Functions
View preemptible-js.md

Preemptible JavaScript Functions

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

Synchronous

An expensive synchronous function will jank the UI:

function expensive() {}
@justinfagnani
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
justinfagnani / README.md
Last active Apr 24, 2020
Inline JavaScript Modules Definitions
View README.md

Inline JavaScript Module Definitions

Motivation

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.
You can’t perform that action at this time.