Skip to content

Instantly share code, notes, and snippets.

View justinfagnani's full-sized avatar

Justin Fagnani justinfagnani

View GitHub Profile
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 January 2, 2019 22:41 — forked from jridgewell/index.html
Text data vs nodeValue #jsbench #jsperf (http://jsbench.github.io/#b962f11b0802e9be42b4b0a660520727) #jsbench #jsperf
<!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 October 28, 2018 06:23
the-platform with the platform
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 October 18, 2018 19:57
Preemptible JavaScript Functions

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 August 7, 2018 14:12
ModuleWorker - Easily access and call exports of a JS module in a Worker
export const a = 'hello';
export const f = (a: any, b: any, c: any) => {
return {
a, b, c
};
};
@justinfagnani
justinfagnani / findIndexAsync.js
Created October 17, 2017 13:22
findIndexAsync.js
async function findIndexAsync(promises, predicate) {
let i = 0;
for await (const p of asyncIterate(promises)) {
if (predicate(p)) {
return i;
}
i++;
}
}
@justinfagnani
justinfagnani / custom-element-conformance.js
Created October 8, 2017 22:38
Web Components Conformance Tests
const NativeHTMLElement = window.HTMLElement;
const documentWrite = document.write;
const documentOpen = document.open;
window.HTMLElement = class extends NativeHTMLElement {
constructor(...args) {
console.assert(args.length === 0);
super();
<!doctype html>
<html>
<head>
<script src="shadow-root.js"></script>
</head>
<div>
<div slot="main">
I'm some projected content.
</div>
<shadow-root>
{
"font-roboto": "https://raw.githubusercontent.com/PolymerElements/font-roboto/v1.0.1/",
"iron-flex-layout": "https://raw.githubusercontent.com/PolymerElements/iron-flex-layout/v1.0.2/",
"paper-material": "https://raw.githubusercontent.com/PolymerElements/paper-material/v1.0.1/",
"paper-styles": "https://raw.githubusercontent.com/PolymerElements/paper-styles/v1.0.10/",
"polymer": "https://raw.githubusercontent.com/Polymer/polymer/v1.0.7/",
"webcomponentsjs": "https://raw.githubusercontent.com/webcomponents/webcomponentsjs/v0.7.7/"
}
import 'dart:async';
import 'package:postgresql/postgresql.dart';
void main() {
var username = "TheRightMan";
var password = "WithTheRightSecret";
var DBname = "AtTheRightPlace";
var uri = 'postgres://$username:$password@localhost:5432/$DBname';