Skip to content

Instantly share code, notes, and snippets.

peerreynders / index.html
Created Sep 11, 2020
A progressive disclosure component with wickedElements
View index.html
<!doctype html>
<html lang="eng">
"A progressive disclosure component"
with wickedElements
peerreynders /
Last active Sep 2, 2020
React is a (view component) framework

"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.
View fizzbuzz01.js
**Very Rough** approximation of
fizzbuzz :: Int String
fizzbuzz n = (test 3 "fizz" test 5 "buzz") id (show n)
test d s x | n ‘mod‘ d 0 = const (s ++ x "")
| otherwise = x
test :: Int String (String String) String String
View firstResolvedByArrayOrderWins.js
function log(value) {
function executor(resolve, _reject) {
const resolveValue = () => resolve('3 Resolved now');
self.setTimeout(resolveValue, 1000);
const pending = new Promise(executor);
peerreynders / filterMap.html
Last active Jun 10, 2020
filterMap utility function using JavaScript iteration protocols
View filterMap.html
<!DOCTYPE html>
<html lang="en-us">
<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>
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 }/>
import { onMount } from 'svelte';
// prop names ("buttonLabel") aren't converted to
// attribute names ("button-label")
export let label = 'Toggle content';
let trigger;
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:
defmodule Primes do
require Integer
@primes :primes
@init_last 3
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}}
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
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 =`
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>
<head lang="en">
file: index.html
Web Components in Action MEAP v6
Defining a default value in case the custom property is not defined
You can’t perform that action at this time.