Skip to content

Instantly share code, notes, and snippets.

View firstResolvedByArrayOrderWins.js
function log(value) {
console.log(value);
}
function executor(resolve, _reject) {
const resolveValue = () => resolve('3 Resolved now');
self.setTimeout(resolveValue, 1000);
}
const pending = new Promise(executor);
@peerreynders
peerreynders / filterMap.html
Last active Jun 10, 2020
filterMap utility function using JavaScript iteration protocols
View filterMap.html
<!DOCTYPE html>
<html lang="en-us">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>Filter Map</title>
</head>
<body>
<script>
@peerreynders
peerreynders / DisclosureToggle.svelte
Last active Apr 18, 2020
Andy Bell's progressive disclosure (web) component implemented with Svelte 3
View DisclosureToggle.svelte
<!-- file: src/DisclosureToggle.svelte -->
<svelte:options tag={ null }/>
<script>
import { onMount } from 'svelte';
// prop names ("buttonLabel") aren't converted to
// attribute names ("button-label")
export let label = 'Toggle content';
let trigger;
@peerreynders
peerreynders / reactIsAFramework.md
Last active Jun 8, 2020
React is a (view component) framework
View reactIsAFramework.md

"Art prior" to React:

Martin Fowler: InversionOfControl (2005-Jun-26)

Inversion of Control is a key part of what makes a framework different to a library. A library is essentially a set of functions that you can call, these days usually organized into classes. Each call does some work and returns control to the client.

A framework embodies some abstract design, with more behavior built in. In order to use it you need to insert your behavior into various places in the framework either by subclassing or by plugging in your own classes. The framework's code then calls your code at these points.

The litmus test:

  • If your code calls it, it's a library.
@peerreynders
peerreynders / demo.exs
Last active Sep 8, 2019
Vampire Numbers Elixir demonstration script
View demo.exs
# Cobbled together ("untested") demonstration code - no production value
# The intention is to flood all CPU cores with "work"
#
# Created for: https://elixirforum.com/t/finding-vampire-numbers/25098/10
#
defmodule Primes do
require Integer
@primes :primes
@init_last 3
@peerreynders
peerreynders / another_handler.ex
Created Jul 29, 2019
Replacing GenEvent with DynamicSupervisor + GenServer
View another_handler.ex
# file: lib/em_demo/some_handler.ex
#
defmodule EmDemo.AnotherHandler do
use GenServer
@impl true
def init([to_pid, token] = arg) do
IO.puts("#{__MODULE__}: init(#{inspect(arg)})")
{:ok, {to_pid, token}}
end
@peerreynders
peerreynders / colorpicker_karma-test.mjs
Created Apr 14, 2019
Web Components in Action v7; 13.3 Comparing to a Standard Test Setup with Karma - minimal with modules
View colorpicker_karma-test.mjs
/* file: components/wcia-color-picker/test/karma-test.mjs
original: https://github.com/bengfarrell/webcomponentsinaction/blob/master/chapter12and13/components/colorpicker/test/karma-test.js
*/
import _dontCare from '../src/wcia-color-picker.mjs'
const makePicker = (function() {
const pickerSize = 500
const thumbCenterOffset = 5/2 + 3 // width/2 + left border
const markup =`
<wcia-color-picker
@peerreynders
peerreynders / index.html
Created Apr 5, 2019
Web Components in Action v6; Listing 10.10 Using CSS Variables in a Web Component’s Shadow DOM
View index.html
<!DOCTYPE html>
<html>
<head lang="en">
<!--
file: index.html
Web Components in Action MEAP v6
original: https://github.com/bengfarrell/webcomponentsinaction/blob/master/chapter10/10.2-cssvariables/shadow.html
#1
Defining a default value in case the custom property is not defined
@peerreynders
peerreynders / index.html
Last active Apr 2, 2019
Web Components in Action v6: 7.5.1 Slots without a Name (p.156)
View index.html
<html>
<head>
<!--
file: index.html
Web Components in Action MEAP v6
https://livebook.manning.com/#!/book/web-components-in-action/chapter-7/v-6/comment-487676
original: https://github.com/bengfarrell/webcomponentsinaction/blob/master/chapter7/7.5-slotsandtemplates/unnamedslots.html
#1:
prevent undefined custom element FOUC (flash of unstyled content)
@peerreynders
peerreynders / biz-card.mjs
Last active Apr 2, 2019
Web Components in Action v6: 7.5 Entering the Shadow DOM with Slots (p.152)
View biz-card.mjs
// file: components/biz-card/biz-card.mjs
import { patchContentMap } from '../../helpers/templateLoader.mjs'
/*
#1:
See patchContentMap call below which creates
static get _contentMap
static set _templateUri
#2:
You can’t perform that action at this time.