patrickgwsmith

Both greater constraints and more introspective capabilities will let us more confidently move faster with coding agents.

Recently I’ve made a debugger for WebAssembly: you can step over each wasm instruction and see the memory and state at each point.

Because the debugger is a TUI, a coding agent can also use the debugger! I tell the agent to optimize using the debugger and it can benchmark before and after and study how the code it changes compiles and executes.

Here’s a rgb to hex wasm module:

echo 'rgb(101, 79, 240)' | npx @qip.dev/qipx qip.dev run text/rgb-to-hex.wasm

"#654ff0"

patrickgwsmith

#include <assert.h>
#include <errno.h>
#include <inttypes.h>
#include <stdlib.h>
#include <stdio.h>
#include <string.h>
#include <time.h>
#include <unistd.h>
#include <arpa/inet.h>
#include <sys/socket.h>

patrickgwsmith

import { setState } from "react";

class SharedState<State> extends EventTarget {
  #state: State;
  constructor(state: State) {
    super();
    this.#state = state;
  }
  get current() {
    return this.#state;

patrickgwsmith

(module $YouTubeURLParser
  (memory (export "memory") 1)
  (global $YouTubeURLParser.Input.bump_offset (mut i32) (i32.const 0))
  (func $YouTubeURLParser.Input.alloc! (param $byte_count i32) (result i32)
    (local $new_ptr i32)
    (global.get $YouTubeURLParser.Input.bump_offset)
    (local.set $new_ptr)
    (i32.gt_u (i32.add (local.get $new_ptr) (local.get $byte_count)) (i32.const 65536))
    (if
      (then

patrickgwsmith

defmodule ParseU8 do
  @moduledoc """
  https://lemire.me/blog/2023/11/28/parsing-8-bit-integers-quickly/
  """

  # Orb lets you write WebAssembly with friendly Elixir syntax: https://github.com/RoyalIcing/Orb
  use Orb

  Memory.pages(1)
  wasm_mode(U32)

patrickgwsmith

const undefinedValue = Symbol();

export class MapWithFallback<Key, Value> {
  #map: Map<Key, Value>;
  #fallback: Value;
  
  constructor(fallback: Value) {
    this.#map = new Map();
    this.#fallback = fallback;
  }

patrickgwsmith

// Hard to read nested arrays.
const c = new Map([['a', 1], ['b', 2]])
console.log(c)

// Have to write using object wrapped in two layers of calls.
const d = new Map(Object.entries({ a: 1, b: 2}))
console.log(d)

patrickgwsmith

// Constants are values with names.
// Functions accept values and return values.

const favoriteNumber = 7
const favoriteNumber2 = (n: number) => n * 2
const doubleNumber = (n: number) => n * 2

const a = doubleNumber(favoriteNumber)
// = 14

patrickgwsmith

import { start, on } from "https://unpkg.com/yieldmachine@0.5.1/dist/yieldmachine.module.js"

function TrafficLightsMachine() {
  const { Green, Yellow, Red } = {
    *Green() {
      yield on("timer", Yellow);
    },
    *Yellow() {
      yield on("timer", Red);
    },

patrickgwsmith

export function* ReactComponent() {
  function* Initial() {
    yield on("render", Rendering);
  }
  function* Rendering() {
    yield on("resourceSuspended", Suspended);
    yield on("error", Errored);
    yield on("commit", Committed);
  }
  function* Suspended() {