o0101

// server

async function showAuthorInfobox({target}, id) {
  const boxData = await getInfoBox(id);
  AuthorInfobox(boxData).to(target, 'hovercard');
}


app.get('/story/:id', async (req,res,next) => {
  const article = await getArticle(req.params.id);

o0101

  function R (parts, ...vals) {
    const handlers = {};
    let hid, lastNewTagIndex, lastTagName, str = '';

    parts = [...parts];
    vals = vals.map(parseValue);

    while (parts.length > 1) {
      let part = parts.shift(),
        attrNameMatches = part.match(LAST_ATTR_NAME),

o0101

with SSR without JS
we need a server endpoint for each view function
the endpoint also specifies an ID if the thing is keyed (so it can look up the data)
and it can take POST data
in order to "send" the data
there must be hidden form fields for anything that doesn't have a real form field.

there will no doubt be restrictions in this type of app.

SSR is pretty easy if you just want to do first render and then load everything up.

o0101

This is the process of setting up erlang, rebar3, and cowboy for a Hello World, starting with a clean Debian 8 install.

Update apt and install deps:

root@046edcaea45a:~# apt-get update
root@046edcaea45a:~# apt-get install erlang erlang-dev gcc
root@046edcaea45a:~# wget https://s3.amazonaws.com/rebar3/rebar3
root@046edcaea45a:~# mkdir ~/bin/
root@046edcaea45a:~# mv rebar3 ~/bin/
root@046edcaea45a:~# chmod +x ~/bin/rebar3 

o0101

#include <map>
#include <limits>

template<typename K, typename V>
class interval_map {
	std::map<K,V> m_map;

public:
    // constructor associates whole range of K with val by inserting (K_min, val)
    // into the map

o0101

Styling native elements

Native HTML controls are a challenge to style. You can style any element in the web platform that uses Shadow DOM with a pseudo element ::pseudo-element or the /deep/ path selector.

video::webkit-media-controls-timeline {
  background-color: lime;
}

video /deep/ input[type=range] {

o0101

// generate a random unique code that has ~ 51 bits of entropy
function randid({int:int=false}={}) {
  const randInt = Math.round((Math.random()*performance.now()*(+ new Date))/1000);
  if ( !! int ) return randInt;
  else return randInt.toString(36);
}

// generate a sequence of keys (that throws at MAX_SAFE_INTEGER, roughly ~53 bits)
function *nextkey(prefix = '') {
  let count = 1;

o0101

Ideas:

// state is just objects, but what are changes to state?
// probably also just objects
// but what is the easiest way to "change state"
// let's look at the different types of state
// an object is just a map of keys to values
// a key is a string (without loss of generality)

o0101

// Make an "icon font" / CSS sheet that I can use for icons, and make it the ONLY icons I use in all my apps // and use "the symbolism"

Owl - 🦉

Hexagon - ⬢

Circle star - ۞

Symbol 1 - ࿃

Symbol 2 - ࿋

o0101

run();

async function run() {
  const orders = await getOrders('http://files.olo.com/pizzas.json');
  const orderCounts = countOrders(orders);
  const topOrders = sortCounts(orderCounts).slice(0,20);
  console.log(JSON.stringify({topOrders},null,2));
}

async function getOrders(url) {