Skip to content

Instantly share code, notes, and snippets.

@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 / 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 / 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:
@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 / index.html
Last active Mar 30, 2019
Web Components in Action v6: 5.2.1 Creating a Musical Instrument with Web Components and JS Modules
View index.html
<html>
<head>
<!--
file: index.html
https://livebook.manning.com/#!/book/web-components-in-action/chapter-5/v-6/comment-487548
https://github.com/bengfarrell/webcomponentsinaction
-->
<title>Web Harp</title>
<link href="./main.css" type="text/css" rel="stylesheet">
<link href="./csshake.min.css" type="text/css" rel="stylesheet">
@peerreynders
peerreynders / index.html
Created Mar 24, 2019
Web Components in Action v5; Chapter 2 Your First Web Component: MyCustomTag using in page template element
View index.html
<html lang="en">
<!-- file: index.html -->
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Chapter 2: Your First Web Component</title>
<style>
my-custom-tag {
background-color: blue;
padding: 20px;
display: inline-block;
You can’t perform that action at this time.