Skip to content

Instantly share code, notes, and snippets.


Text and Unicode in Blossom Notebook

The Absolute Bare Minimum You Need To Know

Consider the text:

Sent in my résumé! 😮‍💨

Computers represent that as zeroes and ones:


Minimalist Layout System

This super simple, fast, flexible layout system operates in a single pass (no reflow or constraint solving) and is probably <100 lines of non-comment, non-duplicate logic (there's a lot of duplicate logic between the top/left/right/bottom directional code that's not worth de-duplicating).

To layout PinLayout's Example 1:

pinlayout example 1

The code is much simpler than PinLayout's:


Simpler Stack Switching for Wasm

To me, #1360 "First-Class Stacks" seems like it started out great, in particular primitive stack-switching seems like a great low-level building block for everything you'd want to do including algebraic effects (#1359); but then it seems to me like it ended up both overly complex and yet also underspecified. In particular, stack extension and redirection seem like they should be extensions to stack-switching added later; whereas creating stacks seems like it would be immediately necessary for priority use cases like the Go and Erlang runtimes, and it seems like it would be a simple win to be able to send normal, non-exception values and thus remove the dependency on the exception-handling work.

Just like the TinyGo author suggested, it seems to me like it would be simplest to just have 3 instructions for creating, using, and destroying stack continuations, respectively:

  • (for brevity, `(cont X … -
View SAT_visualization.js
var paper = Raphael("paper", 600, 600)
var n = 7 // number of boolean variables
var C1 = function(x1, x2, x3, x4, x5, x6, x7) {
return !x2 || !x3 || !x4 || x5
var C2 = function(x1, x2, x3, x4, x5, x6, x7) {
return !x1 || !x5 || x6
View E2E (symmetric crypto only).vdx
<?xml version="1.0" encoding="utf-8"?><VisioDocument xml:space="preserve"><FaceNames><FaceName CharSets="1614742015 -65536" Flags="357" ID="1" Name="Arial Unicode MS" Panos="2 11 6 4 2 2 2 2 2 4" UnicodeRanges="-1 -369098753 63 0"/><FaceName CharSets="-2147483648 0" Flags="261" ID="2" Name="Symbol" Panos="5 5 1 2 1 7 6 2 5 7" UnicodeRanges="0 0 0 0"/><FaceName CharSets="-2147483648 0" Flags="261" ID="3" Name="Wingdings" Panos="5 0 0 0 0 0 0 0 0 0" UnicodeRanges="0 0 0 0"/><FaceName CharSets="1073742335 -65536" Flags="325" ID="4" Name="Arial" Panos="2 11 6 4 2 2 2 2 2 4" UnicodeRanges="-536859905 -1073711037 9 0"/><FaceName CharSets="262145 0" Flags="421" ID="5" Name="SimSun" Panos="2 1 6 0 3 1 1 1 1 1" UnicodeRanges="3 680460288 6 0"/><FaceName CharSets="1048577 0" Flags="421" ID="6" Name="PMingLiU" Panos="2 2 5 0 0 0 0 0 0 0" UnicodeRanges="-1610611969 684719354 22 0"/><FaceName CharSets="1073873055 -539557888" Flags="421" ID="7" Name="MS PGothic" Panos="2 11 6 0 7 2 5 8 2 4" UnicodeRanges="-536870145 179149

PackSec: Package-level capability-based security

What: A capability-secure version of Node.js, and an ecosystem of capability-secure repackaged versions of existing NPM packages, community-contributed and hosted on GitHub like Homebrew & DefinitelyTyped.

Why: Immediately, this provides strong defense against malicious dependencies (supply chain attacks) like event-stream, electron-native-notify, typosquatting like crossenv, and thousands more; as well as vulnerable dependencies like JS-YAML, [`express-fileupl


State and Side-Effects in Mechanical

I don't like:

  • control flow
    • it confuses perceptible time ("the user clicked on something and then the thing finished downloading") and control flow "time" ("this function is called and then this function is called"). This is confusing for end-user programmers because control flow "time" is perceived as instantaneous to end-users (until you hit a blocking or asynchronous function call)
  • RxObservables/cycle.js-style stream-based functional-reactive programming (aka denotative continuous-time programming)
    • I don't think it's natural to think of like, a textbox, as its initial value and then every keypress or toolbar button click that will change its contents. I think it's much more natural to think, okay when this toolbar button gets clicked, what changes
  • the very example that Steve Krouse uses to illustrate DCTP/FRP is described as: "When either in

Paranoid JS Sandbox in the browser

A design for a paranoid, secure-by-default, defense-in-depth JS sandbox.

3 different, complementary layers:

  • Web Worker with CSP blocking network requests, in a cross-domain iframe
  • everything but an allowlist is deleted from global scope in the worker and the iframe
  • transpilation & static analysis that intercepts access to globals (and intercepting calls to the function constructor)

These are very complementary: the first layer is simple and hard for us to get wrong, but reliant on the browser not get wrong; the second layer is hard for the browser to get wrong, but reliant on us not to get it wrong, at runtime; the third and final layer is really hard for the browser to get wrong, but really reliant on us not to miss anything.

View popcount.html
body {
font-family: monospace;
font-size: 16px;
color: #202122;
white-space: pre-wrap;
.nibble-sep {
margin: 0 -.15em;
font-size: 0.8em;

TL;DR: You can simulate 8-bit safe "bytestrings" in JavaScript by restricting each character to code points U+0000 to U+00FF, and there are even tricks to easily convert between ordinary UTF-16 JS strings and UTF-8 encoded as such a JavaScript "bytestring".

  • one weird trick to convert between ordinary UTF-16 JS strings and "bytestrings", using the deprecated function unescape():
    • binary_str = unescape(encodeURI(utf16_str))
    • utf16_str = decodeURIComponent(escape(binary_str))
    • the way this works is, encodeURI()/encodeURIComponent() first convert to UTF-8, then percent-encode each byte into 3 ASCII characters
    • whereas escape() directly percent-encodes each UTF-16 code unit into 3 or 6 characters, depending on whether it's >U+00FF or not
    • so unescape(encodeURI(utf16_str)) is parsing the 3-character percent-encoded byte values as code points, producing "bytestrings" of code points all U+0000 to U+00FF
  • and decodeURIComponent(escape(binary_str)) is parsing the 3-character per