I have run into twtxt a couple of times.
Alos arvelie.

So anyway I was thinking about something like: What if twtxt but more hypertext? Or: If you want more of the basics, like, uh, “retwtxt” or replies, then I guess each twtxt needs an id of some kind. I guess url*timestamp is unique. What if a timestamp was shorter and looked more id-like? Maybe the way arvelie-dates look more id-like to me.

Playing with that idea. Regular calendar and time system. Just some formatting.

Alphabet

With a 60-character alphabet I can use one character for minute, one for day, and one for month. (And one for second, but eh, minute-precision seems fine.)

Also by avoiding base 64 I can use only ASCII letters and digits. Also I don't like the way the normal base 64 alphabet is ordered. Digits then uppercase letters then lowercase letters makes it easier to use regular string comparison stuff for comparing timestamps.

Trying this: 8 digits, 26 uppercase letters, 26 lowercase letters. Only the first 8 digits since that somehow seems less arbitrary to me than dropping some of the letters.

const alphabet = "01234567ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz";

Numbers to chars and chars to numbers

const b60FromInt = (i) => {
  let rest = i;
  let res = "";
  while (rest >= alphabet.length) {
    res = alphabet[rest % alphabet.length] + res;
    rest = (rest / alphabet.length) >>> 0;
  }
  return alphabet[rest] + res;
};

const intFromB60 = (s) => {
  let res = 0;
  for (const c of s) {
    const idx = alphabet.indexOf(c);
    res = (res * 60) + (idx < 0 ? 0 : idx);
  }
  return res;
};

Datetime

• Last character is minute.
• The one before that is hour.
• The one before that is day of month.
• The one before that is month of year.
• Everything before that is the year.

const dateFromB60 = (s) => {
  const res = new Date();
  res.setUTCFullYear(intFromB60(s.slice(0, -4)));
  res.setUTCMonth(intFromB60(s.slice(-4, -3)));
  res.setUTCDate(intFromB60(s.slice(-3, -2)) + 1);
  res.setUTCHours(intFromB60(s.slice(-2, -1)));
  res.setUTCMinutes(intFromB60(s.slice(-1)));
  res.setUTCSeconds(0);
  res.setUTCMilliseconds(0);
  return res;
};

const b60FromDate = (d, minYLength = 0) => {
  const year = b60FromInt(d.getUTCFullYear()).padStart(minYLength , "0");
  const month = b60FromInt(d.getUTCMonth());
  const day = b60FromInt(d.getUTCDate() - 1);
  const hour = b60FromInt(d.getUTCHours());
  const minute = b60FromInt(d.getUTCMinutes());
  return year + month + day + hour + minute;
};

Test:

console.log(b60FromDate(new Date()));
console.log(dateFromB60(b60FromDate(new Date())));

Stuff

It’s all within ASCII, so one byte per character in UTF-8: 4 bytes, or a 32-bit value, for month*day*hour*minute. As many bytes as I’d like for year, depending on which years I’m interested in. 2 bytes goes up to year 3600, 3 and 4 bytes go up to way more. If I want negative-number-years I can introduce a sign-byte.

I wonder if I should timestamp my posts here with something like this instead of how I currently do it. Mostly just obfuscation: I like the idea of not immediately being able to tell like “this is current, this is old.” I dunno.

If you run this in a browser with JavaScript enabled you should be able to turn the page into kind of a slideshow thing by running this code:

init("24px", "40rem");

You can edit the code and change the "24px" and "40rem" to adjust font-size and width of page/slides.

Some new buttons should show up. You can enter slideshow mode and hop between slides with those, or with the q, w and e keys. (Also show/hide the bit that shows the current time with t.)

If you don’t run the JavaScript, you can still read through the page. There will be some repeated headings that would otherwise be on different slides.

If you want to (modify and) run the JavaScript as you read through the page, you can use use “wait” in the URL query thing:
This page, but it lets you edit and run the JavaScript as you go.

Background

This one time I needed to make some slides for a presentation and I thought:

• I don’t want to use Microsoft PowerPoint or Google Slides.
• It’d be handy to put the slides somewhere I can point a web browser at.

Background

There are HTML presentation frameworks.

• They let you create things like “stunning presentations.”
• They’re frameworks, with probably hundreds or thousands of lines worth of stuff in them.

I didn’t really want either of those things.

Background

• I decided that what I wanted was a very plain web page with some controls for showing different parts of the page.
• I cobbled something together, and I’ve kind of remade it once or twice for other presentations.
• This is me putting a version of it somewhere I’ll remember it.
• This version has some basics. I can copy and modify it as needed.

elem

Okay. Some code.

elem function from other post:

const elem = (tagName, props, ...children) => {
  const el = Object.assign(document.createElement(tagName), props);
  el.replaceChildren(...children);
  return el;
};

How much time is left?

Not that much about the slides, but: When I give a talk I want to not use more time than I’m supposed to. I think it’s hard to keep track of time. If I put the time on top of the slides it’s a little easier for me.

How much time is left?

We’ll make an element that stays in a fixed position:

document.head.appendChild(elem("style", {}, `
.time {
  position: fixed;
  font-family: monospace;
  font-size: 2rem;
  top: 0.5rem;
  right: 0.5rem;
}
`));
const time = elem("div", { className: "time" }, "it is now");
document.body.appendChild(time);

How much time is left?

And we’ll make it show the correct time:

let showTime = true;

const refreshTime = () => {
  const str = new Date().toISOString().slice(-13, -8);
  time.innerHTML = showTime ? str : "";
};
refreshTime();

How much time is left?

Since what time it is changes every now and then, we’ll refreshTime frequently. We’re only showing hours and minutes, so refreshing a couple of times each second should be more than enough:

const timer = () => {
  refreshTime();
  setTimeout(timer, 500);
};
timer();

Slides then

Idea is:

• Run through the contents of the page and make a list of slides from it.
• Make stuff for showing a slide, next/previous stuff, entering and leaving slideshow.
• Add slideshow controls to page.
• Stuff.

A list of slides and the currently selected slide.

current is the index of the slide we’re showing, or null if we’re showing the full page.

const slides = [[]];
let current = null;

A slide is a list of elements

We’ll just run through the page and add stuff to the current slide. We’ll add a new current slide whenever we run into a heading. (At least H1-H3. I never bother with the other ones.)

[...document.body.children].forEach((x, i) => {
  if (["H1", "H2", "H3"].includes(x.tagName)) {
      slides.push([]);
  }
  slides[slides.length - 1].push(x);
});

This makes it so the first slide is just the bit with date and index-link, before the first heading. Not the best slide I’ve seen, but I’m okay with it.

Showing a slide

We show a slide by replacing everything in the <body> with the elements from the slide-list:

const addSlide = (slide) =>
  document.body.append(...slide);

const show = (i) => {
  current = Math.min(slides.length - 1, Math.max(0, i));
  const slide = slides[current];
  document.body.replaceChildren(time);
  addSlide(slide);
  slide[0].scrollIntoView(true);
}

Next and previous slide

slide is also a verb. Like you slide in this or that direction.

const slide = (offset) => {
  if (current !== null) {
    show(current + offset);
  }
};

Entering

If we’re viewing the full page and want to enter slideshow mode, we can find the first slide that is currently within view:

const enter = () => {
  if (current !== null) {
    return;
  }
  const elementInView = el => el.getBoundingClientRect().bottom > 0;
  const inView = slide => elementInView(slide[slide.length - 1]);
  const idx = slides.findIndex(inView);
  show(idx < 0 ? 0 : idx);
};

Leaving

We go back to the full page by putting the content of all the slides in the <body>. And we scroll the previously shown slide into view so that we end up in kind of the right part of the page.

const fullPage = () => {
  current = null;
  document.body.replaceChildren(time);
  slides.forEach(addSlide);
};

const leave = () => {
  if (current !== null) {
    const slide = slides[current];
    fullPage();
    slide[0].scrollIntoView(true);
  }
};

Keyboard shortcuts

• q/e for previous/next slide.
• w toggles between full page and slideshow.
• t turns the element with the time on/off.

const commands = new Map([
  ["q", () => { enter(); slide(-1); }],
  ["e", () => { enter(); slide(1); }],
  ["w", () => (current === null ? enter: leave)()],
  ["t", () => { showTime = !showTime; refreshTime(); }]
]);

Keyboard shortcuts

const addKeys = () =>
  document.onkeydown = (e) => {
    const key = e.key.toLowerCase();
    if (commands.has(key)) {
      e.preventDefault();
      commands.get(key)();
    }
  };

Buttons

We’ll add some clickable buttons to the start of each slide:

const button = (text, title, onclick, disabled) =>
  elem(
    "button",
    { title: title, onclick: onclick, disabled: disabled },
    text
  );

Buttons

const addButtons = () =>
  slides.forEach((slide, i) => {
    const toggle = () => {
      if (current === null) {
        show(i);
      } else {
        leave();
      }
    };
    const buttons = elem(
      "div",
      {},
      button("◀", "Previous", () => show(i - 1), i === 0),
      button("⛶", "Toggle", toggle, false),
      button("▶", "Next", () => show(i + 1), i === slides.length - 1)
    );
    slide.unshift(buttons);
  });

Resizing stuff

Slideshows often have larger letters and stuff.

const sizeElement = (rem, width) => elem("style", {}, `
:root {
  font-size: ${rem};
}
.slideshow {
  max-width: ${width};
  margin: 0 auto 0 auto;
}
`);

Resizing stuff

Resizing a textarea so the content kind of fits is kind of hacky.

const resizeTextarea = (ta) => {
  ta.setAttribute("style", "height: 0;");
  const height = ta.scrollHeight;
  ta.setAttribute("style", `height: ${height }px;`);
  const extra = ta.offsetHeight - ta.clientHeight;
  ta.setAttribute("style", `height: ${height + extra}px;`);
};

Init

init does the things. Arguments are passed along to sizeElement.

let size = null;

const init = (rem, width) => {
  if (size === null) {
    addKeys();
    addButtons();
    fullPage();
  } else {
    size.remove();
  }
  size = document.head.appendChild(sizeElement(rem, width));
  document.body.className = "slideshow";
  for (const editor of document.getElementsByClassName("editor")) {
    resizeTextarea(editor);
  }
};

That’s it

That more or less it I guess.

Variations, considerations

I’ve previously done like a <div class="slide"> for each slide. Makes it more straightforward to grab the list of slides with code. But a bit more nested stuff when writing the slides. I think I like this way better, but I dunno.

Variations, considerations

Also I’ve previously used some “container” element instead putting stuff directly into <body>. Makes it so I can put the time-element outside of the container instead of making sure I add it whenever I replace the contents of <body>.

On a similar note: The buttons could be moved to outside of the actual slides. I kind of like having them all over the place so that you have like a button for entering this slide and a button for entering that slide and so on, but...

Variations, considerations

It’s easy to change which elements should start new slides. It’s also possible to have separator-elements between slides instead/as well, like if I want slides with no headings. E.g. I could make it so that <hr> starts a new slide but is not added to the slide content. (Might wanna change the slide data structure to something that can hold on to the separator in addition to the content of the slide, if I want to restore the separators when I’m doing fullPage.)

Variations, considerations

I’m only dealing with elements when I put stuff into slides. If I also had text nodes directly under <body> I’d maybe have to do more stuff.

Okay that’s actually all of it

Done.

All of the code:

const editors = [...document.querySelectorAll(".editor")];

const code = `
${editors.slice(1, -2).map((e) => e.value).join("\n\n")}

${editors[0].value}
`;
console.log(code);

(You need to view this in a browser with JavaScript enabled to use the editor.)

Controls:

• Add a new lines-point or reposition text: Click within the outlined svg-element.
• Deselect: Enter or right-click within the outlined svg-element.
• Add new text: Start writing when no thing is selected.
• Select things to edit: Click, ctrl-click or shift-click the buttons. Also ctrl+arrow keys. Also ctrl+A.
• Move selected things: Arrow keys.
• Remove last point or character of selected thing(s): Backspace.
• Remove selected things: Delete.
• Resize drawing: Edit the numbers at the end of the ``` lines-line in the textarea.

(Things got a little single-page application here. Some browser keyboard shortcuts are broken. Sorry.)

Text-format:

• ``` lines <w h>: opening with w×h-size.
• l <x1 y1> ... <xn yn>: Lines from point to point.
• t <x y> <text>: <text> centered at x,y.
• ```: closing line.

Editing the text updates the drawing. Editing the drawing updates the text. Size of drawing can only be edited as text. If you need to edit/move individual points within a series-of-lines-thing that can (currently?) only be done in text.

The coordinate system is like based on the font size. When rendering to svg four units make one em.

Glorpdown

I’d been playing with the idea of putting inline svg or something in my posts.
Then I saw Kartik Agaram’s “Plain text. With lines.”
And that looked like a better fit for my markup language: A small language for drawings with lines in them. Also I was already using similar ```-toggling for various stuff :)

I want to have stuff like text with lines or arrows between them. So my language supports lines and text. It’s also pretty Glorpdown-like, line-oriented and that, and can be parsed in a similar way.

Example in Glorpdown-editor here.

It is currently used for the syntax tree in the “What do the lambdas?”-post. (Was previously separate svg-file.)
Can copypaste this into the textarea to see:

``` lines 104 80
t 59 8 (application)
t 59 12 (λa.a (foo a)) bar
l 52 15 36 22
t 36 25 (abstraction)
t 35 29 λa.a (foo a)
l 65 15 81 22
t 82 24 (reference)
t 82 28 bar
l 34 32 34 35
t 35 38 (application)
t 34 43 a (foo a)
l 29 46 18 49
t 16 52 (reference)
t 15 56 a
l 37 46 48 49
t 51 52 (application)
t 50 56 foo a
l 46 59 36 63
t 35 65 (reference)
t 34 69 foo
l 55 59 63 63
t 65 65 (reference)
t 66 69 a
```

Implementation

(The code below is picked up and executed when this page is loaded.)

const elem = (tagName, props, ...children) => {
  const el = Object.assign(document.createElement(tagName), props);
  el.replaceChildren(...children);
  return el;
};

const styles = `
.column {
  display: flex;
  flex-direction: column;
}

.buttons {
  display: flex;
  flex-direction: column;
  width: 20rem;
}

.lines-button {
  text-align: left;
  font-size: 1rem;
}

.row {
  display: flex;
  flex-direction: row;
}

.svg-canvas {
  outline-style: solid;
  margin: 0.3rem;
}

.lines-text {
  width: 25rem;
}
.selection-marker {
  width: 1rem;
}
`;
document.head.appendChild(elem("style", {}, styles));

const svgStyle = `
<style>
  svg {
    stroke: currentColor;
    fill: none;
  }
  text {
    stroke: none;
    dominant-baseline: middle;
    text-anchor: middle;
    fill: currentColor;
  }
  .selected {
    stroke: #00ff00;  
  }
  text.selected {
    stroke: none;
    fill: #00ff00;
  }
</style>
`;

class Vector {
  constructor(x, y) {
    this.x = x;
    this.y = y;
  }
  add(v) {
    return new Vector(this.x + v.x, this.y + v.y);
  }
  static get left() {
    return new Vector(-1, 0);
  }
  static get right() {
    return new Vector(1, 0);
  }
  static get up() {
    return new Vector(0, -1);
  }
  static get down() {
    return new Vector(0, 1);
  }
}

class Lines {
  constructor(positions) {
    this.positions = positions === undefined ? [] : positions;
  }
  match(cases) {
    return cases.lines(this.positions);
  }
  move(vec) {
    this.positions = this.positions.map((pos) => pos.add(vec));
  }
  addPosition(position) {
    this.positions.push(position);
  }
  addCharacter(c) {}
  back() {
    this.positions.splice(-1, 1);
  }
}

class Text {
  constructor(position, str) {
    this.position = position;
    this.str = str === undefined ? "" : str;
  }
  match(cases) {
    return cases.text(this.position, this.str);
  }
  move(vec) {
    this.position = this.position.add(vec);
  }
  addPosition(position) {
    this.position = position;
  }
  addCharacter(c) {
    this.str += c;
  }
  back() {
    this.str = this.str.slice(0, -1);
  }
}

class Drawing {
  constructor(size = new Vector(60, 40), things = []) {
    this.size = size;
    this.things = things;
  }
}

const regCase = (str, list) => {
  for (const [regex, f] of list) {
    const match = str.match(regex);
    if (match !== null) {
      return f(match);
    }
  }
  return null;
};

const parse = new (class {
  vec(str) {
    const match = str.match(/^\s*(\d+)\s+(\d+)\s*$/);
    return match === null
      ? null
      : new Vector(parseInt(match[1]), parseInt(match[2]));
  }
  vecs(str) {
    const res = [];
    let rest = str;
    while (true) {
      const match = rest.match(/^\s*(\d+)\s+(\d+)\s*(.*)$/);
      if (match === null) {
        return res;
      }
      res.push(new Vector(parseInt(match[1]), parseInt(match[2])));
      rest = match[3];
    }
  }
  drawing(str) {
    const res = new Drawing();
    for (const line of str.split("\n")) {
      regCase(line, [
        [
          /^```\s+lines\s+(\d+\s+\d+)\s*$/,
          (match) => {
            res.size = this.vec(match[1]);
          },
        ],
        [
          /^l(.*)$/,
          (match) => {
            res.things.push(new Lines(this.vecs(match[1])));
          },
        ],
        [
          /^t\s*(\d+\s+\d+)\s+(.*)$/,
          (match) => {
            res.things.push(new Text(this.vec(match[1]), match[2]));
          },
        ],
      ]);
    }
    return res;
  }
})();

const unparse = new (class {
  thing(thing) {
    return thing.match({
      text: (position, str) => `t ${position.x} ${position.y} ${str}`,
      lines: (positions) => {
        let str = "l";
        for (const pos of positions) {
          str += ` ${pos.x} ${pos.y}`;
        }
        return str;
      },
    });
  }
  drawing(drawing) {
    let res = "``` lines ";
    res += `${drawing.size.x} ${drawing.size.y}`;
    drawing.things.forEach((t) => {
      res += `\n${this.thing(t)}`;
    });
    res += "\n```";
    return res;
  }
})();

class Selection {
  constructor(limit = 0) {
    this.limit = limit;
    this.ids = new Set();
  }
  isSelected(id) {
    return this.ids.has(id);
  }
  hasSelection() {
    return this.ids.size > 0;
  }
  valid(id) {
    return id !== null && id >= 0 && id < this.limit;
  }
  wrap(id) {
    if (this.limit < 1) {
      return null;
    }
    let res = id;
    while (res < 0) {
      res += this.limit;
    }
    while (res >= this.limit) {
      res -= this.limit;
    }
    return res;
  }
  select(id) {
    if (this.valid(id)) {
      this.ids = new Set([id]);
    }
  }
  deselect() {
    this.ids = new Set();
  }
  selectAll() {
    for (let i = 0; i < this.limit; i++) {
      this.add(i);
    }
  }
  add(id) {
    if (!this.valid(id)) {
      return;
    }
    this.ids.add(id);
  }
  remove(id) {
    this.ids.delete(id);
  }
  toggle(id) {
    if (this.isSelected(id)) {
      this.remove(id);
    } else {
      this.add(id);
    }
  }
  expand(id) {
    const min = Math.min(id, ...this.ids);
    const max = Math.max(id, ...this.ids);
    for (let i = min; i <= max; i++) {
      this.add(i);
    }
  }
  move(num) {
    if (!this.hasSelection()) {
      if (num < 0) {
        this.ids = new Set([0]);
      } else if (num > 0) {
        this.ids = new Set([-1]);
      }
    }
    const res = new Set();
    for (const i of this.ids) {
      res.add(this.wrap(i + num));
    }
    this.ids = res;
  }
  resize(limit) {
    this.limit = limit;
    for (const id of this.ids) {
      if (id >= limit) {
        this.ids.delete(id);
      }
    }
  }
  itemsFrom(list) {
    const res = [];
    for (let i = 0; i < this.limit; i++) {
      if (this.isSelected(i)) {
        res.push(list[i]);
      }
    }
    return res;
  }
}

class State {
  constructor(drawing = new Drawing()) {
    this.drawing = drawing;
    this.position = new Vector(0, 0);
    this.selection = new Selection(drawing.things.length);
  }
  selectedThings() {
    return this.selection.itemsFrom(this.drawing.things);
  }
  pushThing(thing) {
    this.drawing.things.push(thing);
    this.selection.resize(this.drawing.things.length);
    this.selection.select(this.drawing.things.length - 1);
  }
  selectedDo(f, orelse = () => {}) {
    if (this.selection.hasSelection()) {
      this.selectedThings().forEach(f);
    } else {
      orelse();
    }
  }
  move(vec) {
    this.selectedDo((thing) => thing.move(vec));
  }
  addPosition() {
    this.selectedDo(
      (thing) => thing.addPosition(this.position),
      () => this.pushThing(new Lines([this.position]))
    );
  }
  addCharacter(c) {
    this.selectedDo(
      (thing) => thing.addCharacter(c),
      () => this.pushThing(new Text(this.position, c))
    );
  }
  delete() {
    this.drawing.things = this.drawing.things.filter(
      (thing, id) => !this.selection.isSelected(id)
    );
    this.selection.deselect();
    this.selection.resize(this.drawing.things.length);
  }
  back() {
    this.selectedDo((thing) => thing.back());
  }
}

const svgScale = (size)  => (v) => {
  return {
    x: `${v.x * (100 / size.x)}%`,
    y: `${v.y * (100 / size.y)}%`,
  };
};

const drawToSvg = (state, svg) => {
  const drawing = state.drawing;
  const scale = svgScale(drawing.size);
  svg.setAttribute("width", `${drawing.size.x / 4}em`);
  svg.setAttribute("height", `${drawing.size.y / 4}em`);
  let res = svgStyle;
  drawing.things.forEach((thing, id) => {
    const selected = state.selection.isSelected(id) ? ` class="selected"` : "";
    thing.match({
      lines: (positions) => {
        let prev = null;
        for (const current of positions) {
          if (prev !== null) {
            const scaledPrev = scale(prev);
            const scaledCurrent = scale(current);
            res += `<line${selected} x1="${scaledPrev.x}" y1="${scaledPrev.y}" x2="${scaledCurrent.x}" y2="${scaledCurrent.y}" />`;
          }
          prev = current;
        }
      },
      text: (position, str) => {
        const scaled = scale(position);
        res += `<text${selected} x="${scaled.x}" y="${scaled.y}">${str}</text>`;
      },
    });
  });
  svg.innerHTML = res;
};

const editor = (state) => {
  const posEl = document.createElementNS(
    "http://www.w3.org/2000/svg",
    "circle"
  );
  posEl.setAttribute("r", "2");

  const div = elem("div", { className: "row" });
  const buttons = div.appendChild(elem("div", { className: "buttons" }));
  const svgCol = div.appendChild(elem("div", { className: "column" }));

  const svg = svgCol.appendChild(
    document.createElementNS("http://www.w3.org/2000/svg", "svg")
  );
  svg.classList.add("svg-canvas");
  const p = svgCol.appendChild(elem("p"));

  const textarea = div.appendChild(elem("textarea", { className: "lines-text" }));
  textarea.oninput = () => {
    state.drawing = parse.drawing(textarea.value);
    state.selection.deselect();
    state.selection.resize(state.drawing.things.length);
    render.drawing();
    render.buttons();
  };

  const render = new (class {
    drawing() {
      drawToSvg(state, svg);
      render.mouse();
    }
    mouse() {
      const scaled = svgScale(state.drawing.size)(state.position);
      posEl.setAttribute("cx", scaled.x);
      posEl.setAttribute("cy", scaled.y);
      svg.appendChild(posEl);
      p.innerText = `${state.position.x},${state.position.y}`;
    }
    buttons() {
      buttons.replaceChildren();
      state.drawing.things.forEach((thing, i) => {
        const str = unparse.thing(thing);
        buttons.appendChild(
          elem(
            "div",
            { className: "row" },
            elem(
              "div",
              { className: "selection-marker" },
              state.selection.isSelected(i) ? ">" : ""
            ),
            elem(
              "button",
              {
                className: "lines-button",
                onclick: (e) => {
                  if (e.shiftKey) {
                    state.selection.expand(i);
                  } else if (e.ctrlKey || e.metaKey) {
                    state.selection.toggle(i);
                  } else {
                    state.selection.select(i);
                  }
                  render.drawing();
                  render.buttons();
                },
              },
              str.length > 38 ? str.slice(0, 35) + "..." : str
            )
          )
        );
      });
    }
    text() {
      textarea.value = unparse.drawing(state.drawing);
    }
  })();

  const posFromMouse = (e, size) => {
    const point = new DOMPoint(e.clientX, e.clientY);
    const translated = point.matrixTransform(svg.getScreenCTM().inverse());
    const box = svg.getBoundingClientRect();
    const x = Math.round((translated.x / box.width) * size.x);
    const y = Math.round((translated.y / box.height) * size.y);
    return new Vector(x, y);
  };

  svg.onmousemove = (e) => {
    state.position = posFromMouse(e, state.drawing.size);
    render.mouse();
  };
  svg.oncontextmenu = (e) => e.preventDefault();
  svg.onmousedown = (e) => {
    state.position = posFromMouse(e, state.drawing.size);
    render.mouse();
    if (e.buttons < 2) {
      state.addPosition();
    }
    if (e.buttons == 2) {
      state.selection.deselect();
    }
    render.drawing();
    render.buttons();
    render.text();
  };

  const keyToSelectionOffset = (key) => {
    return key === "ArrowUp" ? -1 : key === "ArrowDown" ? 1 : null;
  };
  const keyToDir = (key) => {
    return key === "ArrowLeft"
      ? Vector.left
      : key === "ArrowRight"
      ? Vector.right
      : key === "ArrowUp"
      ? Vector.up
      : key === "ArrowDown"
      ? Vector.down
      : null;
  };

  document.onkeydown = (e) => {
    const active = document.activeElement.tagName;
    if (active === "INPUT" || active === "TEXTAREA") {
      return;
    }
    const key = e.key;
    if (e.ctrlKey || e.metaKey) {
      const y = keyToSelectionOffset(key);
      if (y !== null) {
        e.preventDefault();
        state.selection.move(y);
        render.buttons();
        render.drawing();
        return;
      }
      if (key.toLowerCase() === "a") {
        e.preventDefault();
        state.selection.selectAll();
        render.buttons();
        render.drawing();
        return;
      }
      return;
    }
    if (state.selected === null) {
      return;
    }
    if (key === "Enter") {
      state.selection.deselect();
    } else if (key === "Delete") {
      state.delete();
    } else if (key === "Backspace") {
      state.back();
    } else {
      const dir = keyToDir(key);
      if (dir !== null) {
        state.move(dir);
      } else {
        if (key.length > 1) {
          return;
        }
        state.addCharacter(e.key);
      }
    }
    e.preventDefault();
    render.drawing();
    render.buttons();
    render.text();
  };
  
  render.mouse();
  render.drawing();
  render.text();
  render.buttons();
  return div;
};

const state = new State(parse.drawing(
`
\`\`\` lines 100 60
l 35 21 35 25
l 51 21 51 26
l 31 32 31 32 36 37 48 38 56 32
t 42 30 o
\`\`\`
`
));
const h1 = document.getElementsByTagName("h1")[0];
h1.parentNode.insertBefore(editor(state), h1.nextSibling);

Bla blah. Some JavaScript for treating single bytes as RGB-values. Only works in browser with JavaScript and so on.

From Wikipedia:

The simplest form of quantization is to simply assign 3 bits to red, 3 bits to green and 2 bits to blue, as the human eye is less sensitive to blue light.

Bit    7  6  5  4  3  2  1  0
Data   R  R  R  G  G  G  B  B

So that’s like 3-bit values (0-7) for R and G and a 2-bit value (0-3) for B. I multiply the R and G values by 36 and the B values by 85. Because that seems fine.

const elem = (tagName, props, ...children) => {
  const el = Object.assign(document.createElement(tagName), props);
  el.replaceChildren(...children);
  return el;
};

const styles = `
.palette {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
}
.row {
  display: flex;
  flex-direction: row;
}
.square {
  box-sizing: border-box;
  border: none;
  width: 2rem;
  height: 2rem;
}
.selectedColor {
  border-style: dashed;
}
`;
document.head.appendChild(elem("style", {}, styles));

let rFactor = 36;
let gFactor = 36;
let bFactor = 85;
const colorFromByte = (byte) => {
  const r = ((byte & 0b11100000) >> 5) * rFactor;
  const g = ((byte & 0b00011100) >> 2) * gFactor;
  const b = (byte & 0b00000011) * bFactor;
  const hex = (i) => i.toString(16).padStart(2, "0");
  return `#${hex(r)}${hex(g)}${hex(b)}`;
};
console.log(colorFromByte(15));

const palette = () => {
  const colors = elem("div", { className: "palette" });
  let selectedColor = 0;
  const buttons = [];
  const selectColor = (idx) => {
    buttons[selectedColor].classList.remove("selectedColor");
    selectedColor = idx;
    buttons[selectedColor].classList.add("selectedColor");
  };

  const rowLength = 4;
  
  for (let row = 0; row < 256 / rowLength; row++) {
    const rowDiv = elem("div", { className: "row" });
    colors.appendChild(rowDiv);
    for (let col = 0; col < rowLength; col++) {
      const byte = (row * rowLength) + col;
      const button = elem("button", { className: "square" });
      rowDiv.appendChild(button);
      buttons.push(button);
      const color = colorFromByte(byte);
      button.style.background = color;
      button.onclick = () => {
        selectColor(byte);
        colors.dispatchEvent(
          new CustomEvent("selectColor", {
            detail: { byte: byte, color: color },
          })
        );
      };
    }
  }
  colors.selectColor = (idx) => {
    if (idx >= 0 && idx < colorButtons.length) {
      selectColor(idx);
    }
  };
  return colors;
};
let pal;
let div;

Anyway run the code below to get a palette with clickable colours. Can also adjust some values and things in the code:

rFactor = 36;
gFactor = 36;
bFactor = 85;
pal = palette();
div = document.createElement("div");
div.style.width = "10rem";
div.style.height = "5rem";
outElement.replaceChildren(pal, div);
pal.addEventListener("selectColor", (e) => (div.style.background = e.detail.color));

I tend to write a helper function for making a DOM element and these days it tend to end up looking kind of like this:

const elem = (tagName, props, ...children) => {
  const el = Object.assign(document.createElement(tagName), props);
  el.replaceChildren(...children);
  return el;
};

• tagName is the tag name.
• Object.assign copies all the props over, so I can pass in className and such through that.
• replaceChildren puts the rest of the arguments in there.

So uh we can use it for things. Beep boop:

const styles = `
.red {
  background-color: red;
}
.blue {
  background-color: blue;
}
.green {
  background-color: green;
}
`;
document.head.appendChild(elem("style", {}, styles));

outElement.appendChild(
  elem(
    "div",
    {},
    elem("p", { className: "red" }, "blue"),
    elem("p", { className: "blue" }, "red"),
    elem(
      "p",
      {
        onclick: (e) => e.target.classList.toggle("green"),
      },
      "green?"
    )
  )
);

(Best viewed in a browser with JavaScript enabled. You can click the play/run-buttons to run the JavaScript in the embedded editors. It should behave mostly like running the same code in the JavaScript console. (Hitting F12 or something and finding the console might also be useful if you wanna look around and inspect stuff more or something.))

Previously we made the cat move.

const canvas = outElement.appendChild(document.createElement("canvas"));
const scale = 3;
const ctx = canvas.getContext("2d");

let level;
let moveList;

const moveListP = outElement.appendChild(document.createElement("p"));

const setLevel = (str) => {
  level = str.split("\n").map((x) => x.split(""));
  if (level[0].every((x) => x === " ")) {
    level.shift();
  }
  if (level[level.length - 1].every((x) => x === " ")) {
    level.pop();
  }
  moveList = "";
  canvas.width = level[0].length * 16 * scale;
  canvas.height = level.length * 16 * scale;
  ctx.imageSmoothingEnabled = false;
  drawLevel();
};
const level1 = `
#########
#  $ @..#
# $ $   #
#  ###  #
# $     #
##  ##..#
#########
`;

const levelGet = (position) => level[position.y][position.x];
const levelSet = (position, value) => level[position.y][position.x] = value;

const spriteSheet = document.createElement("img");
spriteSheet.src = "./../assets/soko-sprites.png"
spriteSheet.alt = "sprite sheet";

const vector = (x, y) => ({ x: x, y: y });
const plus = (a, b) => vector(a.x + b.x, a.y + b.y);
const directions = {
  u: vector(0, -1),
  d: vector(0, 1),
  l: vector(-1, 0),
  r: vector(1, 0),  
};

const sprites = {
  " ": vector(0, 0), // top left is empty floor
  "#": vector(1, 0), // top right is wall
  "@": vector(0, 1), // middle left is player
  "+": vector(0, 1), // same sprite for player on goal square
  "$": vector(1, 1), // middle right is “box”
  ".": vector(0, 2), // bottom left is goal square
  "*": vector(1, 2), // middle left is “bosdx” on a goal square
};

const drawSquare = (square, position) => {
  const sprite = sprites[square];
  ctx.drawImage(
    spriteSheet,
    sprite.x * 16,
    sprite.y * 16,
    16,
    16,
    position.x * 16 * scale,
    position.y * 16 * scale,
    16 * scale,
    16 * scale
  );
};

const drawLevel = () => {
  level.forEach((row, y) => row.forEach((square, x) => drawSquare(square, vector(x, y))));
  moveListP.innerText = moveList;
};

spriteSheet.onload = () => setLevel(level1);

const playerPosition = () => {
  for ([y, row] of level.entries()) {
    for ([x, square] of row.entries()) {
      if (square === "@" || square === "+") {
        return vector(x, y);
      }
    }
  }
};

const player = ["@", "+"];
const box = ["$", "*"];
const floor = [" ", "."];

const move = (thing, from, direction) => {
  const fromIdx = thing.indexOf(levelGet(from));
  if (fromIdx < 0) {
    return false;
  }
  const to = plus(from, direction);
  const toIdx = floor.indexOf(levelGet(to));
  if (toIdx < 0) {
    return false;
  }
  levelSet(from, floor[fromIdx]);
  levelSet(to, thing[toIdx]);
  return true;
};

const movePlayer = (directionLetter) => () => {
  const direction = directions[directionLetter];
  const position = playerPosition();
  const movedBox = move(box, plus(position, direction), direction);
  const movedPlayer = move(player, position, direction);
  if (!movedPlayer) {
    return false;
  }
  moveList += movedBox ? directionLetter.toUpperCase() : directionLetter;
  return true;
};

const commands = new Map([
  ["w", movePlayer("u")],
  ["a", movePlayer("l")],
  ["s", movePlayer("d")],
  ["d", movePlayer("r")]
]);

const doCommand = (key) => {
  if (commands.has(key)) {
    commands.get(key)();
    drawLevel();
  }
};
canvas.tabIndex = 0;
canvas.onkeydown = event => doCommand(event.key.toLowerCase());

const button = (key) => {
  const element= outElement.appendChild(document.createElement("button"));
  element.innerText = key;
  element.style.fontSize = "2rem";
  element.style.width = "3rem";
  element.onclick = () => doCommand(key);
};

const space = outElement.appendChild(document.createElement("div"));
space.style.float = "left";
space.style.height = "1px";
space.style.width = "3rem";
button("w");
outElement.appendChild(document.createElement("br"));
"asd".split("").forEach(button);

Win condition

You’ve won the game if every goal has a box on it. So if there are no goal squares left with either nothing on them or player on them:

const won = () =>
  !level.some((row) => row.some((square) => square === "." || square === "+"));

console.log(won());

We’ll test it with a won level:

setLevel(`
######
# @  #
#*  *#
######
`);
console.log(won());

Seems fine. Let’s fix the commands so they take winning into account, and switch to very winnable level for testing:

const wonP = document.createElement("p");
moveListP.insertAdjacentElement("beforebegin", wonP);

const takeWinningIntoAccount = (command) => () => {
  if (!won()) {
    command();
    wonP.innerText = won() ? "Yay!" : "";
  }
};
[...commands.entries()].forEach(([key, command]) => commands.set(key, takeWinningIntoAccount(command)));

setLevel(`
######
# @  #
#   $#
#.$ .#
######
`);

Seems fine.

Undo

Also let’s implement undo. Undoing a move is kind of like moving in the opposite direction:

const opposite = (v) => vector(-v.x, -v.y);
console.log(opposite(directions.r));

We undo by:

• Removing the last character from moveList.
• Moving the player in the opposite direction of the move we removed from moveList.
• If the move we removed was in uppercase, “dragging” a box along after the player.

const undo = () => {
  if (moveList === "") {
    return;
  }
  const moveMade = moveList.slice(-1);
  moveList = moveList.slice(0, -1);
  const moveDir = directions[moveMade.toLowerCase()];
  const undoDir = opposite(moveDir);
  const playerPos = playerPosition();
  move(player, playerPos, undoDir);
  if (moveMade === moveMade.toUpperCase()) {
    move(box, plus(playerPos, moveDir), undoDir);
  }
};
commands.set("z", undo);
outElement.appendChild(document.createElement("br"));
button("z");

We can restart a level by undoing a lot:

const restart = () => {
  while (moveList !== "") {
    undo();
  }
};
commands.set("r", restart);
button("r");

Okay okay. It’s probably a game now...

setLevel(level1);

(Best viewed in a browser with JavaScript enabled. You can click the play/run-buttons to run the JavaScript in the embedded editors. It should behave mostly like running the same code in the JavaScript console. (Hitting F12 or something and finding the console might also be useful if you wanna look around and inspect stuff more or something.))

In previous post we drew a level.

const canvas = outElement.appendChild(document.createElement("canvas"));
const scale = 3;
const ctx = canvas.getContext("2d");

let level;
let moveList;

const moveListP = outElement.appendChild(document.createElement("p"));

const setLevel = (str) => {
  level = str.split("\n").map((x) => x.split(""));
  if (level[0].every((x) => x === " ")) {
    level.shift();
  }
  if (level[level.length - 1].every((x) => x === " ")) {
    level.pop();
  }
  moveList = "";
  canvas.width = level[0].length * 16 * scale;
  canvas.height = level.length * 16 * scale;
  ctx.imageSmoothingEnabled = false;
  drawLevel();
};
const level1 = `
#########
#  $ @..#
# $ $   #
#  ###  #
# $     #
##  ##..#
#########
`;

const spriteSheet = document.createElement("img");
spriteSheet.src = "./../assets/soko-sprites.png"
spriteSheet.alt = "sprite sheet";

const vector = (x, y) => ({ x: x, y: y });

const sprites = {
  " ": vector(0, 0), // top left is empty floor
  "#": vector(1, 0), // top right is wall
  "@": vector(0, 1), // middle left is player
  "+": vector(0, 1), // same sprite for player on goal square
  "$": vector(1, 1), // middle right is “box”
  ".": vector(0, 2), // bottom left is goal square
  "*": vector(1, 2), // middle left is “bosdx” on a goal square
};

const drawSquare = (square, position) => {
  const sprite = sprites[square];
  ctx.drawImage(
    spriteSheet,
    sprite.x * 16,
    sprite.y * 16,
    16,
    16,
    position.x * 16 * scale,
    position.y * 16 * scale,
    16 * scale,
    16 * scale
  );
};

const drawLevel = () => {
  level.forEach((row, y) => row.forEach((square, x) => drawSquare(square, vector(x, y))));
  moveListP.innerText = moveList;
};

spriteSheet.onload = () => setLevel(level1);

Some vectors

We want to move the cat. We can make a function that returns its position, so that we know where to move it from. (Cats tend to move from where they are.)

const playerPosition = () => {
  for ([y, row] of level.entries()) {
    for ([x, square] of row.entries()) {
      if (square === "@" || square === "+") {
        return vector(x, y);
      }
    }
  }
};

console.log(playerPosition());

A Sokoban solution is like a string where each character corresponds to one move made.

We will make vectors for the directions the cat can move in, and a plus-function that we can use for adding a direction to a position. We’ll use the (lowercase) letters that are used in Sokoban solutions as property names.

const directions = {
  u: vector(0, -1),
  d: vector(0, 1),
  l: vector(-1, 0),
  r: vector(1, 0),  
};

const plus = (a, b) => vector(a.x + b.x, a.y + b.y);

console.log(plus(playerPosition(), directions.l));

Should be the position of the square to the left of the cat.

Stupid is fun

Okay the array with the arrays with the characters is not a great way to model things, but I like using the symbols from the level format. Like this is fun:

console.log(level.map(x => x.join("")).join("\n"));

But it is awkward having more than one symbol for one thing (it’s the player if it’s a @ or a +, and so on). Something that takes different “collision layers” or something into account probably makes it easier to implement some things.

PuzzleScript is cool btw.

Also, instead of one move being a functional update of the game state or something like that, we’ll just mutate the arrays. I dunno I just think the side-effecty way to do the movement is somehow neat. And it’s fun to kind of recklessly mutate state and then trust that we can implement undo-functionality in order to restore the state we destroyed :)

Moving one thing

const levelGet = (position) => level[position.y][position.x];
const levelSet = (position, value) => level[position.y][position.x] = value;

const player = ["@", "+"];
const box = ["$", "*"];
const floor = [" ", "."];

const move = (thing, from, direction) => {
  const fromIdx = thing.indexOf(levelGet(from));
  if (fromIdx < 0) {
    return false;
  }
  const to = plus(from, direction);
  const toIdx = floor.indexOf(levelGet(to));
  if (toIdx < 0) {
    return false;
  }
  levelSet(from, floor[fromIdx]);
  levelSet(to, thing[toIdx]);
  return true;
};

console.log(move(box, vector(3, 1), directions.l));
console.log(move(player, playerPosition(), directions.l));
console.log(move(player, playerPosition(), directions.l));
console.log(move(player, playerPosition(), directions.l));
drawLevel();

So I think is at least mildly stupid-clever, what with the arrays and the indexes, but kind of fun. We use indexOf to check if the from-square is the expected thing (player or box), and to check that the to-square is floor. indexOf also finds out if a square has a goal on it:

• If fromIdx is 0 the to-square has the expected thing and its on empty floor.
• If it is 1 the square has the expected thing on a goal square.
• If it is less than 0 the expected thing is not on the square and we can’t make the move.

Same with toIdx but for floor: 0 is empty floor, 1 is goal square with nothing on it. Less than 0 means it’s blocked (wall or a floor/goal square with something on it).

And then we use those indexes to choose the correct characters for the two squares when making the moves. If the to-square was a goal square then we choose the “on goal” character from thing, and so on.

Pushing a box

Anyway: We attempted to move things four times. First the box near the top one move to the left. Then the player to the left, three times. The last player-move didn’t go through since the to-square was blocked by the box. When moving the player we want to attempt to move any box on the to-square first, in the same direction. Then we can add the move to the move list by checking which moves went through:

• If the player didn’t move, no move was made.
• If the player moved and a box was moved we add the direction letter in uppercase.
• If the player moved and no box was moved we add the direction letter in lowercase.
• It can’t be the case that a box was moved and the player did not move. If a box was moved that must have made room for the player to make its move too.

const movePlayer = (directionLetter) => () => {
  const direction = directions[directionLetter];
  const position = playerPosition();
  const movedBox = move(box, plus(position, direction), direction);
  const movedPlayer = move(player, position, direction);
  if (!movedPlayer) {
    return false;
  }
  moveList += movedBox ? directionLetter.toUpperCase() : directionLetter;
  return true;
};

console.log(movePlayer("l")());
console.log(movePlayer("d")());
console.log(movePlayer("l")());
console.log(movePlayer("l")());
drawLevel();

The movelist says LDl: We pushed a box to the left, then pushed a box down, then moved to the left. (Then tried to move to the left again. But wall.)

Controls

That’s pretty much it for movement. If we make so we can push some buttons to call the movePlayer function things will be pretty gamelike:

const commands = new Map([
  ["w", movePlayer("u")],
  ["a", movePlayer("l")],
  ["s", movePlayer("d")],
  ["d", movePlayer("r")]
]);

const doCommand = (key) => {
  if (commands.has(key)) {
    commands.get(key)();
    drawLevel();
  }
};
canvas.tabIndex = 0;
canvas.onkeydown = event => doCommand(event.key.toLowerCase());

const button = (key) => {
  const element= outElement.appendChild(document.createElement("button"));
  element.innerText = key;
  element.style.fontSize = "2rem";
  element.style.width = "3rem";
  element.onclick = () => doCommand(key);
};

const space = outElement.appendChild(document.createElement("div"));
space.style.float = "left";
space.style.height = "1px";
space.style.width = "3rem";
button("w");
outElement.appendChild(document.createElement("br"));
"asd".split("").forEach(button);

The tabIndex thing makes it so that the canvas can have focus and send keydown events. So you should be able to click the level and then move the cat with wasd. Also buttons. Maybe you can click on them if you don’t have a keyboard.

Can restart with setLevel:

setLevel(level1);

Okay that’s it for now. Boop.

JavaScript is not a Lisp and a web browser is not a Lisp machine. But, you know, definitely more Lisp machiney than most of the things that everyone has installed. I like how alive things are in them, and how lots of fun stuff is like very within reach if you’re in one :)

Sokoban is fun stuff.

Anyway, this is best viewed in a browser with JavaScript enabled. You can click the play/run-buttons to run the JavaScript in the embedded editors. It should behave mostly like running the same code in the JavaScript console. (Hitting F12 or something and finding the console might also be useful if you wanna look around and inspect stuff more or something.)

A level

Sokoban level format.

• # is wall
• space is empty floor
• . is goal square
• @ is player, or + if the player is on a goal square
• $ is box, or * if the box is on a goal square

const levelString = `
#########
#  $ @..#
# $ $   #
#  ###  #
# $     #
##  ##..#
#########
`;
const level = levelString.slice(1, -1).split("\n").map(x => x.split(""));
console.log(level);

Image onto a canvas

We have a variable called outElement here. outElement is just some div, and like it’d also work to just do document.body.appendChild(...) or something, but outElement is automatically moved to where we’re at when we run some code:

const spriteSheet = outElement.appendChild(document.createElement("img"));
spriteSheet.src = "./../assets/soko-sprites.png"
spriteSheet.alt = "sprite sheet";

The sprite sheet is a set of 8 sprites. Each sprite is 16×16 pixels.

We’ll create a canvas and put it in the outElement.
Then we can get a CanvasRenderingContext2D and use drawImage on that.
Also we turn off image smoothing because pixels. Also also, we multiply some numbers by 3, because more pixels.

const canvas = document.createElement("canvas");
outElement.replaceChildren(canvas);
const scale = 3;
canvas.width = spriteSheet.width  * scale;
canvas.height = spriteSheet.height * scale;
const ctx = canvas.getContext("2d");
ctx.imageSmoothingEnabled = false;

ctx.drawImage(
  spriteSheet,
  0,
  0,
  spriteSheet.width * scale,
  spriteSheet.height * scale
);

Drawing one square

We’re going to need objects with x and y properties for a bunch of stuff. First for positions of sprites. Later for positions in the level and also for directions the player can move in. We make a vector data structure:

const vector = (x, y) => ({ x: x, y: y });
console.log(vector(4, 2));

We’ll create an object for keeping track of where in the sprite sheet the different sprites are. Then, by passing a bunch of arguments to drawImage we can specify coordinates and width/height both for the part of the source image we want to draw and for the destination in the canvas. (The last 4 arguments are “destination” arguments. The ones that are multiplied by scale.)

const sprites = {
  " ": vector(0, 0), // top left is empty floor
  "#": vector(1, 0), // top right is wall
  "@": vector(0, 1), // middle left is player
  "+": vector(0, 1), // same sprite for player on goal square
  "$": vector(1, 1), // middle right is “box”
  ".": vector(0, 2), // bottom left is goal square
  "*": vector(1, 2), // middle left is “box” on a goal square
};

const drawSquare = (square, position) => {
  const sprite = sprites[square];
  ctx.drawImage(
    spriteSheet,
    sprite.x * 16,
    sprite.y * 16,
    16,
    16,
    position.x * 16 * scale,
    position.y * 16 * scale,
    16 * scale,
    16 * scale
  );
};

ctx.clearRect(0, 0, canvas.width, canvas.height);
drawSquare("@", vector(1, 2));

Drawing the level

canvas.width = level[0].length * 16 * scale;
canvas.height = level.length * 16 * scale;
ctx.imageSmoothingEnabled = false;
level.forEach((row, y) => row.forEach((square, x) => drawSquare(square, vector(x, y))));

Is level.

So I write posts in Glorpdown, but web browser support for Glorpdown is not spectacular. There exists a HyperText Markup Language that is sometimes used for marking up hypertext. And it is possible to convert Glorpdown to HTML and serve that instead. Many web browsers come with support for HTML :)

HTML has a bunch of stuff in it.
Glorpdown has less stuff in it.
So when converting I get to choose which bits of HTML to use for what. I’ve learned some HTML and have ended up with something like this for now:

HTML

Reasonably semantic. h1/h2/h3, p, ul and li, figure and figcaption, blockquote, em and code and pre. Stuff like that. No divs. Almost no CSS classes. No JavaScript for pages that are basically just text content. I use JavaScript when I have actually interactive content, like editors with REPL-functionality in the lambda calculus posts.

For images I used to use an img tag and put any description in its alt attribute. Then I wanted the description to show up not just as an alternative to the image so I also put it in the title attribute. I think that was a bad idea and that a screen reader would maybe read both the title and the alt, and also title seems a little awkward since you often have to like go look for it by hovering over the image or something. Now I put the img in a figure, leave the alt empty and put the description in a figcaption instead.
This “alt and figcaption”-answer seems good.

I could add stuff like nav and main and maybe header. I haven’t bothered with it since there’d be so little stuff outside of main anyway, like the nav would contain only the index-link. But I dunno maybe I should.

Also CSS

The HTML should be mostly fine on its own. It’d be nice if user style sheets were more of a thing and I could just give HTML and let it be styled according to the preferences of whoever was reading. But because circumstances, I apply some styling. I think my “philosophy” is that if I think that a piece of CSS is small and understandable and makes something look better, then okay fine. If something takes a lot of CSS and/or it feels like I’m fighting with it, then I won’t bother. I might look for an alternative solution or something, or maybe just decide that no actually I want it to look the way it does without additional styling.

I use one CSS class that I've called “page”. It sets max-width to 70rem, which seems to make for a line length that isn’t too bad. For the regular text content pages, I put the page-class on the body-element. Not styling the body directly here because I’m using the same CSS file for stuff like my Glorpdown editor, where I want to use more of the horizontal space (editor and preview side by side).

For everything else I use element selectors, or :root. Like I apply some styling to the ps, not to some class I’m using for my paragraphs. I used to think I should use classes for styling. I don’t remember why. Maybe it appeared to be best practice or “more flexible” or something, or maybe it was just that I though that “classes are CSS stuff.” Either way, I don’t actually want to have like five different ways to style paragraphs and it’s less noisy without the classes :)

So there’s stuff like:

• font-family: sans-serif, because because.
• max-width set to 100% for img to keep them within the 70rem thing. Also I let the images be links to the themselves, so if the image is too small and you don’t want to zoom in on the page you can click the image instead.
• I mostly set padding to 0 and use margin instead. My impression is that the margin collapse thing makes sense for stuff like this. (Like, I want at least this much space above a h2, but I don’t need to have it in addition to the empty space that I want to have under the last p before the heading.)
• Mostly rem-values for margins and font sizes.
• I set font-size for the heading-elements and for pre/code. I think code/monospace and regular text next to each other looked a bit weird before I increased the font size for the code.
• I add a border to the left of blockquotes. I’m a bit uncertain about that choice. Feels a little extravagant. Also padding to the left since the the padding (but not the margin) goes between the border and the text.
• color-scheme: light dark for :root:. So if people want dark they get dark.

I dunno. Okay.

The CSS I’m using is here. It’s like 60-70 lines these days, which seems okay to me.

I’ve remade this website a few times. One of the times I did that I thought I wanted to make it look good and I read some practical typography. I no longer want to make it look good. But like I guess it’s a nice book if you’re into that kind of thing:
Butterick’s Practical Typography
I mean it’s probably the only book on typography that has a section called “Why Racket? Why Lisp?”

Each of these projects contributed its own lessons, tools and techniques. Moore carried microfiche listings of all previous projects in his briefcase, and often referred to them to get the code for some unique primitive or driver from the past. Frequently used words might become a standard fixture of the system. Also, improved techniques for solving common problems were integrated into the system.

The Evolution of Forth

A thing I like about Chuck Moore’s briefcase is that “briefcase” kind of sounds like it could be a metaphor of the same kind as “library.” Clearly more personal and less “published works” than a library, but you can have some pretty of useful stuff there. Maybe sets of ideas/“patterns”, tricks and techniques and ways of thinking about things. Not necessarily complete and final solutions but like, things you bring along with you because they’ve worked for you.

I think Einar said that if you want to blog you should write blog posts, not write blog engine. At least sometimes people say something like that.

Einar uses WordPress.
So when Einar writes about weird DSL for writing HTML it is typically not a description of how his blog works.

Anyway it’s a thing that makes sense. So here’s a new home-made markup language for my home-made blog engine.

I’ve played around with making my own language for this a few times. I like the idea of having something where it’s so easy to implement tooling for it that, if I ever need or want to reimplement it, maybe in a different language/environment, then that won’t be a big deal. Preferably not even much of a factor in deciding if I’m going to move to a different language or something. And also simple enough so that I can write (and read) posts in that format correctly without much help from specialized tools or something.

I tend to mess up and things tend to get too complicated.

Gemtext

Gemtext

I ran into Gemtext the other day. Gemtext takes a pretty straightforward approach to some things.

You get one kind of list and you can't nest them

Which goes for most things. Like generally you can’t have <thing> within <other thing>. No quote within a list, or link within a heading, or whatever. Or, it’s very line-oriented, and you can’t like, nest lines.

It’s not too hard to build a Gemtext-parser. It’s also really easy to write Gemtext in any text editor.

Also it tends to look kind of like my plaintext-notes would look anyway. E.g. I tend to end up with stuff like paragraphs being long lines and use separate lines for links.

(Also also I like how using a full line for a link tricks me into writing more self-contained link texts (instead of stuff like the link text being “here”). Which I’m told people using screen readers sometimes appreciate.)

Glorpdown

So I decided to steal ideas from Gemtext and make something with a lot less functionality than what I have attempted previously:

A Glorpdown editor.
This post in Glorpdown.

Some basics:

• A line usually goes like <start><arguments><text>. The line type (typically determined by the <start> of the line) decides how many (whitespace-separated) arguments there are. E.g. a link (starts with =>) has two arguments, link type and path. A blockquote has no arguments, just a >-start followed by the text that goes in the quote.
• Within the <text> you can format text: Text between _-characters is emphasized. Text between `-characters is code. You can’t nest/combine those things.
• Within the <text> you can escape a character with a \-character. Necessary for escaping formatting characters or for having regular text lines start with the <start> of another line type.

Most of the things:

Regular text/paragraphs

More or less like in Gemtext. The <start> of a regular text line is the empty string. Or: If the start of a line does not match the <start> of any of the other line types, it is a regular text. Should be empty lines between paragraphs. Line breaks within paragraphs are preserved when translating to HTML and such.

Headings

Same as in Gemtext, three levels: Lines that start with #, ## or ###. E.g. I do this for the following heading:

### Blockquotes

Blockquotes

Same as in Gemtext: Lines that start with >

> Hello.

Hello.

Lists

Same as in Gemtext: Lines that start with * are list items.

* Item one
* Item two

• Item one
• Item two

Linky bits

Regular links are similar to the ones in Gemtext, but with a “type” argument before the path/url:

=> url https://placekitten.com/ Kittens

Kittens

Unlike in Gemtext there’s a different line type for stuff that should be included in, or viewed in context of, the document. Typically images:

<= img https://placekitten.com/200/300 A kitten!

(In my mind the way this makes sense is that the =>-arrow points to some thing that you can go to, while the <=-arrow is more like, the thing is moving into the current document.)

Preformatted text

Same as in Gemtext, preformatted text is turned on by a line that starts with ```. Not like in Gemtext, any non-whitespace characters directly after the ``` are considered part of the <start> and must be matched by the start of a later line to turn it off again (so you can e.g. do four backticks for the <start> if you want to have a line of preformatted text start with three backticks without that being a “turn off the preformatted text”-line). No line types or text formatting or escaping characters within preformatted text.

So:

````
code here
```
not turned off yet so things are still code
````

Becomes:

code here
```
not turned off yet so things are still code

In Gemtext you can write some stuff after the <start> of a line that turns preformatted text on and have that be “alt text.” In Glorpdown this text is instead potentially used when rendering. E.g. for marking some preformatted text as a “repl,” so that later code can turn it into a editable textare or something.

If there’s text after the <start> of a line that turns preformatted text off, then that’s used as a caption for the preformatted text.

Lines

A section of preformatted text where the text after the <start> if the line that turns it on goes like lines <w h>.

More lines-stuff, including an editor.

``` lines 40 36
t 33 5 oh no
l 20 14 19 8 11 8 10 14 3 18 4 21 10 20 9 31 12 31 15 24 17 30 21 31 19 20 25 21 25 17 20 14
l 13 10 13 11
l 17 10 17 11
l 14 14 16 14
l 23 11 29 8
```

Details

Not in gemtext. This it “toggled,” kind of like with the preformatted text. Lines that start with +++. The text after the first +++ becomes the summary. The content between a first and second +++-line is details (the stuff you see if you click to expand or something).

+++ Things
* One thing
* Another thing
* A third thing
+++

Key-value pairs

Not at all in Gemtext. Mostly for metadata. Lines that start with : are key-value lines. If a line goes :<argument> <text> then <argument> is the key and <text> is the value. E.g. this post has a line that goes:

:date 2022-12-06

And then I have some blogging machinery that uses that date for displaying list of posts with their dates.

Horizontal rule/thematic change

Not in Gemtext. Lines that start with ----

----

Blah blah. That’s mostly it.

We start with

#lang racket

or

#lang lazy

And make some natural and/or unnatural numbers:

(struct zero () #:transparent)
(struct succ (pred) #:transparent)

(define one (succ (zero)))
(define two (succ one))
(define (inf) (succ (inf)))

And a less-than-or-equal-to function:

(define (<= a b)
  (cond
    [(zero? a) #t]
    [(zero? b) #f]
    [else (<= (succ-pred a) (succ-pred b))]))

(<= is a function with parameters a and b: If a is zero then true else if b is zero then false else try with one-less-than-a and one-less-than-b instead.)

Okay. We can try to apply the function to some arguments. The following are are fine and evaluate to #t and #f.

(<= one two)

(<= two one)

If we started with #lang racket the next two will run forever and we won’t get values back. If we started with #lang lazy they’re fine and evaluate to #t and #f.

(<= two (inf))

(<= (inf) two)

The next one will run forever in both #lang racket and #lang lazy.

(<= (inf) (inf))

(Forever means until we are out of memory or something.)

Anyway. We can choose:

• If we want as many expressions as possible to give back values, we might prefer #lang lazy
• If we want as many applications as possible of <= to give back values, we might prefer #lang racket

(In #lang racket the forever happens when evaluating the (inf)-arguments before the <=-function is applied. In #lang lazy we might have to decide: Is it the (inf) or the <= that causes forever? Is it reasonably to expect there to be a base case?)

Standard ML code
JavaScript code
The Little MLer

In chapter 6 of The Little MLer there is some stuff.

There is fruit:

datatype fruit =
    Peach
  | Apple
  | Pear
  | Lemon
  | Fig

There is tree:

datatype tree =
    Bud
  | Flat of fruit * tree
  | Split of tree * tree

There is height, which looks kind of like this in the book:

(* height : tree -> int *)
fun height Bud = 0
  | height (Flat(_,  t)) = 1 + height (t)
  | height (Split(s, t)) = 1 + Int.max (height(s), height(t))

And some other stuff that we don’t want for this. Anyway we can make a couple of trees:

val smol_tree = Split (Bud, Flat (Peach, Bud))
val larger_tree = Split (Flat (Apple, Flat (Lemon, Bud)), Flat (Peach, Bud))

And so in a REPL:

- height smol_tree;
val it = 2 : int

- height larger_tree;
val it = 3 : int

Okay.

So JavaScript is a pretty nonstandard ML. If you view this in a web browser you should be able to click the play/run buttons to run the JavaScript.

In the book we use sums for the tree-stuff. Sums are also sometimes called tagged unions. We will make a tag-function for tagging some stuff and then try to tag something:

const tag = t => (...args) => ({ tag: t, values: [...args] });
console.log(tag("label")(1, "horse", [2,3]));

Which gives us an object with "label" for its tag and [1, "horse", [2, 3]] for its values. That is the tag and the stuff we passed in. Good. We can make constructors and some trees now:

// fruit constructors:
const Peach = tag("Peach")();
const Apple = tag("Apple")();
const Pear = tag("Pear")();
const Lemon = tag("Lemon")();
const Fig = tag("Fig")();

// tree constructors:
const Bud = tag("Bud")();
const Flat = tag("Flat");
const Split = tag("Split");

smol_tree = Split(Bud, Flat(Peach, Bud));
const larger_tree = Split(Flat(Apple, Flat(Lemon, Bud)), Flat(Peach, Bud));

console.log(smol_tree);

So we have half the sum stuff now. We can construct. We want destruct.

Okay with sums it’s like, in order to construct a value you have to do one of the things. A fruit is a peach or an apple or one of the other ones. In order to construct one we only have to choose one of them.

But when we’re going to destruct a value, that value can be any one of the things, so we have to know how to deal with all the things. We have to know what to do if it is a peach and we have to know what to do if it is an apple and so on.

So if we have a product of all the things, like maybe an object along the lines of:

{
  Peach: // what to do if it is a peach
  Apple: // what to do if it is an apple
  // and so on...
}

Then we can use the tag from the sum-thing to look up the “what to do” in the product-thing. We will make a match-function for destructing sums:

const match = cases => x => cases[x.tag](...x.values);

const is_apple =
  match(
    {
      Peach: () => false,
      Apple: () => true,
      Pear: () => false,
      Lemon: () => false,
      Fig: () => false
    }
  );

console.log(is_apple(Apple));
console.log(is_apple(Fig));

Gives us true and false. Seems fine.

height then:

const height =
  match(
    {
      Bud: () => 0,
      Flat: (_, t) => 1 + height(t),
      Split: (a, b) => 1 + Math.max(height(a), height(b))
    }
  );

console.log(height(smol_tree));
console.log(height(larger_tree));

Gives us 2 and 3. Okay.

Small over large.

I value the item on the left more.

The central idea of traditional object-orientation is that everything is a function. The thing we can do with a function is apply it to an argument. We cannot inspect it, look into how it was constructed. Only apply.

In a traditional object-oriented language, the argument a function is applied to is a selector-and-arguments-tuple.

E.g. some Smalltalk:

3 + 2.
5 negated.
3 to: 10 by: 2.

That is:

• 3 applied to the selector + and a list of arguments containing 2.
• 5 applied to the selector negated and the empty list of arguments.
• 3 applied to the selector to:by: and a list of arguments containing 10 and 2.

There are details and there is often some cheating and pragmatism going on somewhere. But the idea is that everything is a function and we cannot “look inside” a function.

A number is a function that behaves and responds appropriately when applied to an argument. We do not care how the number is constructed. More precisely, we cannot care how the number is constructed.

If a function walks like a number and it quacks like a number, then it must be a number.

―Alonzo Church

(Contrast with more data-oriented languages like those in the extended ML family. Here we tend to define numbers by how they are constructed. “A natural number is zero or the successor of a natural number.” And when operating on a number we look into how it was constructed and do case analysis (typically by using pattern matching). “If it is zero, then such and such, if it is the successor of something, then this other thing instead.”)

I think this title is pretty thought leader because it sounds like fairly assertive and also has a number in it.

• Technical debt
• Not technical debt
• Technical not debt
• Not technical not debt

Blah. So functions are fun and for me they are often a useful way to think about programs.

And then, for me, types more or less come with the territory. A function applied to an argument can be evaluated to a result value. When I think about a function, I tend to think about things like:

• What do arguments I can apply this to look like?
• Which expressions are likely to evaluate to things I can use as arguments?
• What will results I get from applying the function look like?
• Where can I use such results?

And that is like, type stuff, far as I can tell.

(Which is not to say that the thinking is necessarily in terms of a type system, or that any of this has a thing to do with type checking, or anything. Just, types, okay yes.)

public final class Instant
extends Object
implements Temporal, TemporalAdjuster, Comparable<Instant>, Serializable

This class models a single instantaneous point on the time-line. Time is one and undivided.

If you throw even a cursory glance into the past, at the life which lies behind you, not even recalling its most vivid moments, you are struck every time by the singularity of the events in which you took part, the unique individuality of the characters whom you met. This singularity is like the dominant note of every moment of existence; in each moment of life, the life principle itself is unique. To achieve this, the class stores a long representing epoch-seconds and an int representing nanosecond-of-second, which will always be between 0 and 999,999,999.

Life, constantly moving and changing, allows everyone to interpret and feel each separate moment in his own way; use of identity-sensitive operations (including reference equality (==), identity hash code, or synchronization) on instances of Instant may have unpredictable results and should be avoided.

public final class Duration
extends Object
implements TemporalAmount, Comparable<Duration>, Serializable

A time-based amount of time, such as '34.5 seconds'.

This class models a quantity or amount of time in terms of seconds and nanoseconds. But I am not thinking of linear time, meaning the possibility of getting something done, performing some action. The action is a result, and what I am considering is the cause which makes man incarnate in a moral sense.

A physical duration could be of infinite length. The model is of a directed duration, meaning that the duration may be negative. It is not possible to catch the moment at which the positive goes over into its opposite, or when the negative starts moving towards the positive. Infinity is germane, inherent in the very structure.

public abstract class Clock
extends Object

A clock providing access to the current instant, date and time using a time-zone.

In a certain sense the past is far more real, or at any rate more stable, more resilient than the present. The present slips and vanishes like sand between the fingers, acquiring material weight only in its recollection.

Best practice for applications is to pass a Clock into any method that requires the current instant.

public class DateTimeException
extends RuntimeException

Time can vanish without trace in our material world for it is a subjective, spiritual category. This exception is used to indicate problems with creating, querying and manipulating date-time objects.

(There's a list with all the lambda notes here.)

Previously we made zero and successor:

0 ≜ λf.λx.x

S ≜ λn.λf.λx.f (n f x)

Now there are some things. Or maybe this encourages a way of thinking about some things.

One thing is: We can think that any natural number must necessarily be built from 0 and a series of Ses. (and if want to we can think about the types of things and think that 0 : nat and S : nat -> nat)

Another thing is: A number like this is a function. And that function kind of is the “eliminator function” for that number. An “eliminator function” like this is similar to the foldr-function for lists: We can think of it as a function for doing “constructor replacement.”

If we have a number built from S (S 0), and we wanna replace the Ses with foos and the 0 with bar, we can apply the number to foo and bar:

(S (S 0)) foo bar

Let's say we have the numbers 2 and 3:

S (S 0)

S (S (S 0))

Reduced to normal form:

2 ≜ λf.λx.f (f x)

3 ≜ λf.λx.f (f (f x))

And let's say we want to add them together. If we want the sum, we can take the number 2 and do the “constructor replacement” thing. The number 2 is built from the 0-constructor and 2 S-contructors: S (S 0). We should be able to get sum by taking that number and, keeping all the Ses, replacing the 0 with 3: S (S 3).

We'll try. Taking the number 2, we replace S with S, which should let us “keep” all the Ses, and we replace 0 with 3:

2 S 3

We get 5 :)

A bit of abstraction and we will have a +-function.

+ ≜ λa.λb.a S b

+ 2 3

Or maybe we want to multiply 2 by 3.

This time the idea is that we want to replace things so that we turn the number 2, or S (S 0), into + 3 (+ 3 0). We replace the Ses with a function that adds 3 to something, and we replace 0 with 0:

2 (+ 3) 0

6!

Again, abstraction:

* ≜ λa.λb.a (+ b) 0

* 2 3

(So, uh. In my experience, thinking about these things in terms of constructors and constructor replacement lets me look away from the “inner workings” of the numbers a little bit, and also make the things feel slightly more like working with datatypes in e.g. an ML dialect. It sometimes makes some things clearer to me. But like, we totally did do addition and multiplication earlier, and it’s not like the functions we did here are very different from those earlier ones. Just a little different.)

(There's a list with all the lambda notes here.)

We have made some numbers and some functions for working with numbers. Also some other datatypes.

We haven’t really done so here, but sometimes when we define numbers we fuss more about how they are constructed, about what the constructors are. We say things like: “A natural number is zero or it is the successor of a natural number.” (In a Standard ML we might say: datatype nat = Zero | Succ of nat)

We can do something similar but with the lambdas.

---

We already know what zero looks like:

0 ≜ λf.λx.x

We do not know that successor looks like:

S ≜ λn.λf.λx.f (n f x)

It takes a number, n, as its argument. S applied to n should return a number that is one larger than n.

(Remember: The number n is a function that, if given two arguments, applies the first argument n times to the second.)

So, S takes a number, n, as its argument, and returns one of those λf.λx.-functions. Within that function we do n f x (we apply n to f and x). This should amount to applying f “n times” to x. And then we apply f to the result of n f x”, so that in total f should be applied “n+1 times” to x.

We can test it some and see if it looks right:

S 0

S (S 0)

S (S (S 0))

S (S (S (S (S 0))))

And like that’s it, that’s our successor. Maybe less impressive than the addition and multiplication functions we did earlier. But it’s kind of cool:

• We have zero-and-successor constructors. Much like the grown-ups have.
• We can build any natural number with 0 and S. We have 0, and we can throw Ses at it until we have the number we really want.
• Related: We kind of don’t really have to write the λf.λx.-bit ever again. Unless we want to. If we’re defining addition and we stick to 0 and S, we won’t have to do the λf.λx.-bit in order to construct the result-number.

Will take a look at that last ting later.

Kind of a companion post for a Code Mesh talk we did:
Infinite Lambda Calculus

The code we used for the talk
The file we ended up with in the talk (it is what it is)

Also there are some lambdas over here

Maybe the talk has a main point. Goes like this:

• We wanna get something like infinite, or at least pretty infinite, loops.
• Lambda calculus is Turing complete, but it kind of wasn’t supposed to be?
• Turing complete things can probably do infinite loops,
• Type systems tend to get rid of like accidental Turing completeness.

We can come up with a recipe for making a loopy thing:

• Look for a tiny expression that wouldn't typecheck if we had a type system-and-checker (if the type system doesn’t like an expression, then maybe that expression has something to do with Turing completeness and leads to infinite loops)
• Type checkers sure don’t like λx.x x
• (λx.x x) (λx.x x) goes on and on. Maybe for forever.
• Adding e.g. foo like so: (λx.x x) (λx.foo (x x)) will give us as many foos as we want. Doing a few steps of evaluation will get us foo (foo ((λx.foo (x x)) (λx.foo (x x)))). If we do more steps we get more foos.
• We can do this with any f, instead of just with foo, because lambda abstraction: λf.(λx.x x) (λx.f (x x))
• One step of evaluation takes us from λf.(λx.x x) (λx.f (x x)) to λf.(λx.f (x x)) (λx.f (x x))

λf.(λx.f (x x)) (λx.f (x x)) is the Y combinator :)

I dunno. Does taking away some sugar and infixity make some things more clear?

Some Standard ML:

- nonfix +;
nonfix +
- + (1, 2);
val it = 3 : int
- nonfix ::;
nonfix ::
- :: (1, :: (2, :: (3, nil)));
val it = [1,2,3] : int list
- foldr + 0 (:: (1, :: (2, :: (3, nil))));
val it = 6 : int

(We removed the infix thing from + and :: (the plus function and the list “cons”). They take tupled arguments. Infix 1 + 2 is nonfix + (1, 2), and so on.)

Here, I guess we can say that

foldr + 0 (:: (1, :: (2, :: (3, nil))))

is kind of equivalent to

+ (1, + (2, + (3, 0))).

And it is maybe more clear how

+ (1, + (2, + (3, 0)))

is similar to the list

0 (:: (1, :: (2, :: (3, nil)))

It is like the list we but with the list constructors, :: and nil, replaced with + and 0 (the first two values we gave to foldr).

Also maybe unsurprising that

foldr :: nil (:: (1, :: (2, :: (3, nil))))

will be equivalent to

:: (1, :: (2, :: (3, nil)))

and evaluate to a list that looks like the one we started with?

(At least, more clear than when saying that

foldr (op +) 0 [1, 2, 3]

is equivalent to

1 + (2 + (3 + 0))?)

And also like maybe not I dunno.

(There's a list with all the lambda notes here.)

Prelude. Some things we defined in earlier posts:

0 ≜ λf.λx.x
1 ≜ λf.λx.f x
2 ≜ λf.λx.f (f x)
+ ≜ λa.λb.λf.λx.a f (b f x)
* ≜ λa.λb.b (+ a) 0

We wanna make some 2-tuples, or pairs. Pairs are good for building things and we’re going to need them to build a thing reasonably soon.

A pair is a “finite ordered list” of two elements. It’s a thing with two things. Since it can’t not be, a pair is going to be a function. The way we’re going to use a pair is we’re going to apply it to an argument. And then that argument (another function) must somehow get access to the two elements that the pair is holding on to.

So: A pair should be a function that, given one function as an argument, gives its two elements to that argument-function. A pair with the elements foo and bar, then, should look like this:

foobarpair ≜ λf.f foo bar

If we give the pair an argument, that argument will go in the place of the f in f foo bar, and then foo and bar will be given to it:

foobarpair (λa.λb.a b quux)

That is, λa.λb.a b quux is given foo and bar as arguments from the foobarpair, so in the body a b quux, a and b are replaced with foo and bar. We can access the elements of a pair by accessing a and b within some λa.λb.-function that we apply the pair to.

So it looks like we have a pair that kind of works. We sometimes want other pairs than the “foo and bar” one, so we will build a constructor-function. A constructor for pairs will be a function that takes two arguments, and returns something along the lines of that λf.f foo bar-function. Only instead of foo and bar, we should use the two arguments we got.

pair ≜ λa.λb.λf.f a b

(pair foo bar) (λa.λb.a b quux)

(pair far boo) (λa.λb.a b quux)

And that’s really everything we need. But if we want to, for convenience, we can make a couple of “getter”-functions. We can get the first element of a pair by applying it to a two-argument function that returns its first argument:

foobarpair (λa.λb.a)

We will make a fst-function that will do that, but with some pair given as an argument instead of with the foobarpair. And a snd-function that does the same as fst, only it will use a function that returns its second argument.

fst ≜ λp.p (λa.λb.a)
snd ≜ λp.p (λa.λb.b)

fst foobarpair

snd foobarpair

Now we can do useful things. We can make a function that takes a number as an argument and like, doubles the number and squares the number, and returns a pair with the two result-numbers. And a function that takes a pair of numbers and adds those two numbers together.

useful-thing1 ≜ λn.pair (+ n n) (* n n)
useful-thing2 ≜ λp.+ (fst p) (snd p)
compose ≜ λf.λg.λx.f (g x)
useful-things ≜ compose useful-thing2 useful-thing1

useful-things (+ 1 2)

Woop.

(There's a list with all the lambda notes here.)

Bit of prelude first.

Some stuff from an earlier numbery post:

0 ≜ λf.λx.x
1 ≜ λf.λx.f x
2 ≜ λf.λx.f (f x)
5 ≜ λf.λx.f (f (f (f (f x))))
+ ≜ λa.λb.λf.λx.a f (b f x)

(And in the earlier post we said something like: The number n is a function that, if given two arguments, applies the first argument n times to the second. The +-function takes the numbers a and b as arguments and gives back a new λf.λx.-function that applies f “a times” to the result of applying f “b times” to x.)

We can do multiplication as well before moving on. Multiplication is like addition, just more. We will make a function that, if given the numbers a and b as arguments will start with the number zero, and add a “b times” to it:

* ≜ λa.λb.b (+ a) 0

* 5 2

Soo. We have several numbers and also a couple of ways to make more numbers. So we pretty much have business: We can decide that one of the numbers is the number of monies and another one is the number of products. If we also have booleans we can do business logic.

Booleans are used for if-then-else. We have a stuff we maybe wanna do and another stuff we maybe wanna do instead, and we use a boolean to pick one of the stuffs. So, we would like to have a true-value and a false-value, and we wanna set things up so that something like if true stuff otherstuff will evaluate to stuff, and something like if false stuff otherstuff will evalute to otherstuff.

We will make the two boolean values be functions. (A reasonably easy choice, so long as we can only make functions in our language.) true will, if given two arguments, return the first one. false, if given two arguments, will return the second one.

true ≜ λa.λb.a
false ≜ λa.λb.b

true stuff otherstuff

false stuff otherstuff

Okay so it looks like true stuff otherstuff evaluates to stuff just fine on its own, and false stuff otherstuff evaluates to otherstuff, and we don’t really need if. But if we want an if we can have one. It can take a boolean as its first argument and then two more arguments, and then just hand those two last arguments over to the boolean.

if ≜ λb.λt.λe.b t e

if true stuff otherstuff

if false stuff otherstuff

Should get same results as with just the booleans. (If we want to, we can redefine if to be the identity function, λx.x. Will work fine.)

Okay, some boolean logic bits:

• not takes one boolean, b. If b is true, we return false. If b is false, we return true.
• and takes two booleans, a and b. If a is true, we return b. If a is false, we return false.
• or takes two booleans, a and b. If a is true, we return true. If a is false, we return b.

not ≜ λb.if b false true
and ≜ λa.λb.if a b false
or ≜ λa.λb.if a true b

if (and (or true false) (not false)) stuff otherstuff

We’ll do some boolean stuff with numbers. We can check if a number is zero by giving it two arguments. The first argument is a function that always returns false: λ_.false. If the number is not zero this function will be applied to something and we’ll get false back. The second argument is true. If the number is zero this true will be returned, without any applying of the λ_.false function.

zero? ≜ λn.n (λ_.false) true

zero? 0

zero? 2

Good. Now we can do everyday business logic things. Like you know when boss is like hey we need a program that checks if the number of monies times the number of products is zero and if it is zero we should add five to the number of monies and if it is not zero we should multiply the number of products by 2. No problem:

do-business ≜ λmonies.λproducts.if (zero? (* monies products)) (+ 2 monies) (* 2 products)

do-business 2 5

do-business 2 0

That’s a lot of business.

(Oh. If we cared about side effects or performance or something, we could worry about stuff like: Will the else-stuff be evaluated even if the boolean is true and we really only want the then-stuff? We don’t really care, since it’s going to correctly return the stuff we want either way. But if we cared: We’re evaluating things in normal order, and will give the then-stuff and the else-stuff to the boolean first, before we “step into” any of the then-stuff or else-stuff. So in the case of true the else-stuff will disappear before we do anything with it.)

(There's a list with all the lambda notes here.)

An expression is one of the following:

• <identifier> (variable reference)
• λ<identifier>.<exp> (function abstraction, but sometimes we’ll just call it a lambda)
• <exp> <exp> (function application)

Is like tree. Variable references are leaves. Function application branches into two sub-trees, one for function and one for argument.

Function application is left associative. So a b c and (a b) c works out the same.

For example, can take a look at expression (λa.a (foo a)) bar and its sub-expressions:

• (λa.a (foo a)) bar is a function application with a function (λa.a (foo a)) and an argument bar
• λa.a (foo a) is a function abstraction with a parameter x and a body a (foo a)
• a (foo a) is a function application with a function a and argument foo a
• foo a is a function application with a function foo and argument a

(So really, syntax is mostly like in an ML family language or a Haskell or something. Only instead of like, fn x => foo or fun x -> foo or x -> foo), we do λx.foo. Andalso there’s never any infix stuff for function application.)

Evaluation is mostly: (λ𝐱.𝐁) 𝐀 ⟶ [𝐀/𝐱]𝐁.

Meaning something like, a “reducible expression” (the bit to the left of the arrow) is:

• a function application
• with a function-part that is a function abstraction, with some identifier 𝐱 as its parameter and some expression 𝐁 as its body
• and with an argument-part that is some expression 𝐀

And if we have a reducible expression, then we can do “beta reduction”: Substitute the argument 𝐀 for every free occurence of the parameter 𝐱 in the body 𝐁, and replace the whole function application with the result of that.

(The part that goes [𝐀/𝐱]𝐁 means that substitution thing: 𝐁 but with every free x replaced with 𝐀. So (λ𝐱.𝐁) 𝐀 ⟶ [𝐀/𝐱]𝐁 is a bit like a pattern match on the syntax of an expression. The expression to the left of the arrow binds the variables 𝐱 and 𝐁 and 𝐀, and the expression to the right uses them.)

Can try. With the expression (λz.z bar) foo, the parameter 𝐱 is z, the body 𝐁 is z bar, and the argument 𝐀 is foo. So for this “instance” of (λ𝐱.𝐁) 𝐀 ⟶ [𝐀/𝐱]𝐁 we get (λz.z bar) foo ⟶ [foo/z]z bar. It should evaluate to the body z bar with every free z replaced by the argument foo: foo bar.

(λz.z bar) foo

A variable reference is free if it is not bound by a parameter in a function abstraction. With the expression (λz.z (λz.bar z) bar) foo, the parameter 𝐱 is z, the body 𝐁 is z (λz.bar z) bar, and the argument 𝐀 is foo. Here, only the first z in the body z (λz.bar z) bar is free, so only that one is replaced with foo.

(λz.z (λz.bar z) bar) foo

(In maybe more programmy jargon, we could maybe say that the inner z shadows the outer.)

Sometimes we have to change the names of some variables before doing beta reduction, in order to avoid having “variable capture” change the meaning of our expression. With the expression (λx.λy.y x) y, the parameter 𝐱 is x, the body 𝐁 is λy.y x, and the argument 𝐀 is y. If we just replace the x in λy.y x with y, we get λy.y y. Our argument-y becomes bound (“captured”) by the parameter of the lambda within the body. Since we should be able to keep referring the outer y, we change the name of the parameter of the lambda (and all references to it) before we do beta reduction. (ctrl+enter two times, since the first one will just rename the parameter)

(λx.λy.y x) y

That’s mostly it. We:

• look through our expression-tree in some order
• maybe find a reducible expression
• rename things if necessary
• and do the substitution thing

The order we look through the expression-tree is “normal order”. We check the outermost expression first, and then the function-parts of applications before the argument-parts. If we can’t find any reducible expression, then the expression is on “normal form”.

Typically we want to evaluate something down to normal form. So we run through those steps over and over until it is. (If we’re unlucky that takes actually forever. But that’s kind of fun too.)

Can do (ctrl+shift+enter) to evaluate the following until it’s on normal form:

(λz.z foo) (λx.λy.x bar y) quux

(There's a list with all the lambda notes here.)

Assuming you're viewing this in a web browser with JavaScript and so on...

Some editors are readonly. Its content is evaluated when page loads or so. Mostly for adding definitions to toplevel so they can be used later in the post:

id ≜ λx.x
0 ≜ λf.λx.x
ω ≜ λx.x x

In the regular editors we can do stuff.

(can do stuff here)

Normal text-editor-stuff should work. Also:

• ctrl+l inserts a λ (or you can use ` instead of λ)
• ctrl+d inserts a ≜ (or you can use := instead of ≜)
• ctrl+enter is used to add a definition to toplevel, or remove a definition, or do one step of evaluation
• ctrl+shift+enter is used to do a bunch of evaluation (stops when the term is on normal form, or after a thousand steps of evaluation)
• ctrl+r is used to replace the names used in toplevel definitions with terms from the definitions

ctrl+enter, ctrl+shift+enter and ctrl+r all work on the line the cursor is on. Results are printed on new line(s), after. (And the cursor moves to end of result.)

So, normally, if we have written some term that uses some of the toplevel defintions, we do ctrl+r and then either ctrl+enter a few times, or ctrl+shift+enter once.

(λa.λb.b a) 0 ω 0

Lines with ≜ (or := are for definitons). ctrl+enter on a line that goes like <identifier> ≜ <term> adds a definition.

S ≜ λn.λf.λx.f (n f x)

(Most characters can be used in identifiers. But not whitespace ones, and not the ones that are used for other stuff: :, `, ≜, λ, ., (, ).)

The terms used in definitions can use the names of definitions that already exist. We can define 2 like this now, as long as we have defined 0 and S first: (ctrl+enter)

2 ≜ S (S 0)

(We can evaluate it to check that the result looks reasonably twoish. Two applications of f is very two-like, so the result should look like λf.λx.f (f x). (ctrl+r, then ctrl+shift+enter))

2

If we wanna get rid of a definition we can do <identifier> ≜. We’ll remove ω (it’s scary): (ctrl+enter)

ω ≜

If we try to evaluate the thing we did earler, we won’t get the same result now, since ω will just be treated as some free variable... (ctrl+r, then ctrl+shift+enter)

(λa.λb.b a) 0 ω 0

That’s more or less it. In posts like this it’s mostly enough to do ctrl+enter on definitions, and ctrl+r and then ctrl+shift+enter on other stuff...

(There's a list with all the lambda notes here.)

Somewhat a test-post, for having not-dead lambda calculus within a post. If you're viewing this in a web browser and it runs the JavaScript and so on, it should be interactive.

(There’s also kind of a lambda playground over here.)

To try, put cursor on line below and do ctrl+enter couple of times:

(λx.λy.y x) bar foo

If it works (if the ctrl+enter-business leads to a line that goes foo bar), we can make a few numbers... (ctrl+enter each line).

0 ≜ λf.λx.x
1 ≜ λf.λx.f x
2 ≜ λf.λx.f (f x)
5 ≜ λf.λx.f (f (f (f (f x))))

The idea, or at least one way to look at it, is that the number five is the function that does something five times. So, if we want to foo a bar five times, then we can... (ctrl+r to replace 5 with the lambdas from the definition we did above. Then ctrl+enter a couple of times.)

5 foo bar

Which maybe evaluated to foo (foo (foo (foo (foo bar)))). Five foos.

Okay. Addition is pretty numbery. Below is a function that takes arguments a and b, and gives back, uh, a λf.λx.-function. This function applies f to x and it will do that “b times.” And it will apply f to the result of that “a times.” Hopefully that amounts to f being applied “a + b times” to x (ctrl+enter on line below)

+ ≜ λa.λb.λf.λx.a f (b f x)

If things seem fine so far, we can try to use it. ctrl+r on line below to replace the names of the things we’ve defined with their lambdas. Then ctrl+enter a bunch of times to evaluate. (Or ctrl+shift+enter one time.)

5 (+ 5 2)

It’s maybe twelve! (Hopefully.)

Hi okay one time I ran into a number problem that went something like this: “How many (natural) numbers less than or equal to one million are there whose digits add up to forty-two?”

Okay let’s solve this using Racket. Racket is a maybe a LISP. In LISP, pretty much the only thing that matters is you have to use parentheses.

Parentheses essentially are the basis of computation.

―Robert Constable, 8 minutes or so into this OPLSS 2015 lecture

Anyway we can stare at this problem for a while and then notice three things.

• One thing is that the digits in one million do not add up to forty-two.
• Another thing is that the numbers less than one million all have six digits (or they might as well have, and can be padded with leading zeroes).
• Anothother thing is that forty-two divided by six equals seven.

So. We only need to care about numbers that have six digits, and if every digit is seven they add up to forty-two. More, if the digits in a number are “balanced around seven” they also add up to forty-two. (A six can be made up for by an eight, a three by two nines, and so on.)

Okay so that’s extremely good to know. We pretty much just wanna balance stuff. And parentheses are like incredibly good things to balance.

Racket comes with a read-procedure. read reads an expression from something, and it makes sure parentheses are balanced. Problem solved, then, more or less...

#lang racket

We need some halp. read-string will read a string until its end. If any parentheses are out of balance, read will throw and the with-handlers-bit will catch and make it so that we return the number zero. Otherwise one.

(define (read-string s)
  (with-handlers
      ([(λ (_) #t) (λ (_) 0)])
    (define in (open-input-string s))
    (let loop ()
      (unless (eof-object? (read in))
        (loop)))
    1))

Woop woop. We can use read-string to kind of check if a string has balanced parentheses. If we can turn numbers into strings, so that a string only has balanced parentheses in it if the digits in the number add up to forty-two, then stuff.

number->chars will turn a number into a list of characters, maybe padded with some zeroes:

(define (number->chars n)
  (string->list (~a n
                    #:min-width 6
                    #:pad-string "0")))

Now we can have one character for every digit in a number. We make a char->string-function that will turn a character like that into a string. The string will have parentheses that are just as much balanced as the digit was balanced around seven:

(define (char->string c)
  (match c
    [#\0 "((((((("]
    [#\1 "(((((("]
    [#\2 "((((("]
    [#\3 "(((("]
    [#\4 "((("]
    [#\5 "(("]
    [#\6 "("]
    [#\8 ")"]
    [#\9 "))"]
    [_ "horses"]))

So, in order to turn a number into a good string, we use number->chars, then char->string each digit-character. And then adjust as necessary: We will sort the characters in the string so that any left parentheses come before any right parentheses. number->string does:

(define (number->string n)
  (define char-list
    (map char->string (number->chars n)))

  (list->string
   (sort (append* (map string->list char-list))
         char<?)))

Now all that remains is to pick the numbers we care about, then feed to read-string the strings we get by applying number->string. read-string should return one if things are balanced and zero if not, so if we add together all those zeroes and ones we’re good.

(for/sum ([n (in-range 1000000)])
  (read-string (number->string n)))

You can get the full program at blah. Put it into your DrRacket, press F5 or so, and voi—some 20 seconds wait—là, you will have an answer.

It does extend animal.

If you have like an A -> B, then you can usually count on getting a B back if you pass in an A. In this or that language, there may be exceptions to this. For example, an exception would be an exception.