wlib

Towards a More Useful Model of Distributed System State

How I Think About Programs

I like to model all programs as state machines with pure functions within them. These individual state machines compose into larger ones where sometimes it’s easier to visualize as a hierarchy and other times as a distributed network of actors. One system that applies this model is Erlang’s OTP, but this model is very general and comes up just about everywhere.

An issue with obsessing over generalization is the “turing tarpit” — that every computation can be modelled on a turing machine’s tape or using lambda calculus or some other simple system. The key to abstraction is to purposefully attempt to model things with the least powerful/expressive language reasonably possible. If you can solve a problem correctly with a si

ryanflorence

// TODO: make `pages` optional and measure the div when unspecified, this will
// allow more normal document flow and make it easier to do both mobile and
// desktop.
import {
  createContext,
  useCallback,
  useContext,
  useEffect,
  useMemo,
  useRef,

wlib

const Task = run => ({
  // (a -> e) -> (a -> r) -> Task(a) // Might be inaccurate idk
  run,

  // undefined -> undefined
  log: () =>
    run(console.error)
       (console.log),

  // (a -> b) -> Task(b)

wlib

<a href="javascript:(function(){if(document.body.contentEditable==='true'){document.body.contentEditable='false';}else{document.body.contentEditable='true';}})();">Edit this</a>
<br>
<a href="javascript:(function(){regex=/\/(edit|view)/;path=location.pathname;if(regex.test(path))location.pathname=path.replace(regex, '/preview');})();">Preview google drive</a>
<br>
<a href="javascript:(function(){Runner.instance_.loadImages();style=document.createElement('style');document.head.appendChild(style);style.sheet.insertRule('.snackbar-show { animation: unset }');})();">Unblock chrome://dino</a>
<br>
<a href="javascript:(function(){editor=document.querySelector('div.commit-create > div.CodeMirror');editor.setAttribute('style'%2C'height%3A50%25');})();">Enlarge gist edit window</a>
<br>
<a href="javascript:Array.from(document.querySelectorAll('.tv-dialog__modal-wrap, .tv-dialog__overlay')).forEach(e => e.remove());">Clean tradingview</a>
<br>

ooflorent

const ext = (...suffix) => new RegExp(`\\.(?:${ suffix.join('|') })(?:[?#].*)?$`)

const loaders = [
  // Traditional cases
  { test: ext('css'), loaders: ['style', 'css'] },  // single
  { test: ext('js', 'jsx', 'es6'), loaders: ['babel'] }, // multiple
  
  // Complex case: Font-Awesome adds query strings and/or hashs to files
  { test: ext('otf', 'eot', 'svg', 'ttf', 'woff', 'woff2'), loaders: ['file?name=[name].[ext]'] },
]