Skip to content

Instantly share code, notes, and snippets.

@peerreynders
peerreynders / index.js
Created Mar 12, 2021
Marko - first steps
View index.js
// file: /src/index.js
import fastify from 'fastify';
import marko from 'marko';
import pointOfView from 'point-of-view';
const app = fastify({
logger: true
});
app.register(pointOfView, {
@peerreynders
peerreynders / permutations.html
Created Jan 5, 2021
itertools.permutations in vanilla JavaScript
View permutations.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>itertools.permutations in vanilla JavaScript</title>
</head>
<body>
<p>Check Developer Tools Console (Chrome) or Web Developer Web Console (Firefox) </p>
@peerreynders
peerreynders / index.html
Last active Oct 31, 2020
Quick'n dirty transformation benchmark
View index.html
<!doctype html>
<html lang="eng">
<!--
-->
<head>
<meta charset="utf-8"/>
<title>Transform Benchmark</title>
<style>
p {
font: 1.25em monospace;
@peerreynders
peerreynders / index.html
Last active Mar 21, 2021
Passing server generated data to client side code
View index.html
<!doctype html>
<html lang="eng">
<!--
Originally:
https://elixirforum.com/t/passing-json-between-simple-reactjs-and-phoenix-elixir/19799/6
See also:
https://developer.mozilla.org/en-US/docs/Web/HTML/Element/script#Embedding_data_in_HTML
-->
<head>
@peerreynders
peerreynders / children.html
Last active Oct 17, 2020
"Slots" in Preact
View children.html
<!doctype html>
<html lang="eng">
<!--
Based on: Getting Your Head Around Vue.js Scoped Slots - Anthony Gore
https://vuejsdevelopers.com/2017/10/02/vue-js-scoped-slots/
https://codepen.io/anthonygore/pen/zExPZX
-->
<head>
<meta charset="utf-8"/>
<title>"Slots" in Preact using children prop</title>
@peerreynders
peerreynders / es2015.js
Last active Oct 13, 2020
Differential Serving
View es2015.js
window._log('ECMAScript 2015 - with classes but no modules');
@peerreynders
peerreynders / index.html
Last active Jan 8, 2021
A progressive disclosure component with regular-elements
View index.html
<!DOCTYPE html>
<html lang="en">
<!--
"A progressive disclosure component"
https://piccalil.li/tutorial/a-progressive-disclosure-component
with regular-elements
https://github.com/WebReflection/regular-elements
instead of a web component
-->
<head>
@peerreynders
peerreynders / index.html
Last active Sep 23, 2020
"use initializer" custom hook
View index.html
<!doctype html>
<html lang="eng">
<head>
<meta charset="utf-8"/>
<title>useInitializer</title>
</head>
<body>
<script type="module">
import { html, render, useState } from '//unpkg.com/htm/preact/standalone.mjs';
@peerreynders
peerreynders / 01before.html
Last active Sep 21, 2020
useRefreshCallback - custom hook that also avoids creating garbage functions
View 01before.html
<!doctype html>
<html lang="eng">
<head>
<meta charset="utf-8"/>
<title>useCallback alternative BEFORE</title>
</head>
<body>
<script type="module">
import {
html, render, useState, useCallback
@peerreynders
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"
https://hankchizljaw.com/wrote/a-progressive-disclosure-component/
with wickedElements
https://github.com/WebReflection/wicked-elements