open source work

these are open source tools i've built. they're mostly undocumented, but i'm hoping to change that soon.

  • ringtail
    lossless html templates
    bi-directional state management
    the future of web dev
    js framework
  • ondom
    dom change api
    easily extensible api
    powers html codecs.
    js framework
  • orca
    scheduling functions for javascript
    promise based api
    event-loop management
    js framework
  • ><
    html partials
    shadow dom support
    simple web component
    js framework
  • graph.js
    graph data-structures in js
    lean package
    data structures
  • codec
    bidirectional html
    turn markup into data
    hydrate markup with
    js framework
  • elm form
    simple semantic forms
    similar to html api
    virtual dom safe

recent posts

occasionally i write stuff.
occasionally it's interesting.

  1. ❤️‍🩹 Why leave a good thing behind?

    I've been cheating on my beloved website. This very one. I've gone and built another, only to realize that I already had everything I wanted.

    What I Missed

    Good Bones

    I have a good file structure. It's flexible in all the right places. I feel like adding new content is a breeze.

    Built right

    My build setup here is SO perfect. It's very minimal. Tailwind handles the CSS, 11ty handles the HTML. I might bring in esBuild to handle the JS.

    None of these portions are overstepping their bounds. In my new setup, I tried to combine all of these, and it's a nightmare!

    This site is basically sensible defaults that are easy to opt-out of. It's perfect.

    Why I left

    I wanted to tinker with different styles! I wanted to opt out of my CSS, explore DaisyUI. That's basically it.

    However, while I was tinkering with ways to reduce my pages into components, I found a couple patterns I'm really digging.

    So I've looted the new site of the gems it contained, and brought them back here.

    I've created multiple tailwind configs, and am keeping them at a public URL.

    I've building the CSS I need, when I need it.

    I've reshaped a couple things on this site, but kept lofi spirit.

    🗺 Road map

    1. Improve 404
    2. Improve chat
    3. Improve page organization
    4. Figure out x-html/11ty plugin
    5. Improve sidebar
    6. Expose games, books, and experiments
    7. Write docs and host my OSS stuff
    8. Rework the posts/post pages
    9. Improve head tag garbage
    10. Probably remove daisy-UI themes, (maybe keep interactive parts)
    11. Expose more tailwind vars (SystemColors, Interactive Colors, CurrentBackground, Dynamic Spacing, etc)
  2. ✍️ Ipads

    I recently got an ipad and I like it quite a bit. It's fun doodling, or reading blog posts, and it's gotten me interested in building a proper blog, rss feed and the works. I don't think it needs to be anything incredible, but something simple and automatic would be great. Leaving shortform notes, or whatever would be fun. I've really been enjoying the super casual feed Chris Coyier has. It's lowkey, quick reads, and generally interesting.

    The Ideal Stack

    11ty, some CMS-esque thing, easy publishing, near automatic releases. It's hard to that CMS-esque thing. I've tinkered with quite a few options, and none of them were great. However, a coworker recommended logseq and although the logo is pretty dull, it looks incredibly powerful and simple.

    The scariest part about it is all the graph stuff, and my excitement to really go deep on that. It seems so cool, and really opens up a blog to be less structured in a "narrative", since the stitching between notes is so simple and automatic. Reminds me of Project Xandu by Ted Nelson and the original promise of Hypertext. I want to tinker with logseq, I want to tinker with, @zachleat seems to be teasing 11ty 3.0. It's all so exciting and simple. All of it seems like a time sink if I'm not careful.

  3. 📌 Bookmarklets!

    Did you know you can run javascript with a URL?

    In place of a http: or https:, you can prefix a URL with javascript: and it will evaluate the following text as JS. You'll still need to URL encode the Text, but it does provide a handy way to use JS.

    Bookmarklets are a term for Bookmarks, which trigger some Javascript instead of loading a webpage.

    Some bookmarklets I use.

    Drag the Link into your bookmarks bar to use it yourself!

  4. 😱 Emoji OMG

    Pulling an emoji from text isn't super straightforward. There's no special character for emoji in regex.

    I'd like to start replacing the favicon for the page with a favicon found in the <h1> of the current section. So the first step is determining if there's an emoji in the <h1> at all. However, this task is tricker than it seems. EVERYTHING online indicates the best solution is a LONG LONG string of regex which tests the unicode data.

    I'll do some research and see if I can find a better way to do determine if a character is regex.

    My Findings!

    The typical advice you'll find online when searching for how to determine if a character is an emoji is to use RegEx, but I've found a MUCH easier way!

    Strings in js can be split into characters, and with the spread operator, it's easy!

    Splitting a String into Chars

        const string = "🤖: Hello World! 👋";
    const charList = [...string]; // [ "🤖", ":", " ", "H" [[...]] , "d", "!", " ", "👋" ]

    Which doesn't mean much on it's own. Frankly, it's more cumbersome to deal with. BUT! Javascript did something interesting! It didn't split up ALL the characters! As you can see from the any emoji regex example, Emojis are comprised of MANY characters! Those characters will render as a single, emoji.

    So JS is put in a weird position. The EXPECTED behavior of splitting a string, is accomplished. Yet, the LENGTH of each character, is technically different! Since Emojis are just unicode data rendered in a particular way, splitting a string does something fascinating in JS.

        "🤖".length; // outputs: 2
    "👋".length; // outputs: 2
    "📌".length; // outputs: 2

    What it means!

    Because JS splits a string by what is rendered, not by how it's represented in data, String.length does something super fascinating! It will give back a value greater than 1 for emojis!

    With this interesting tidbit, you can determine if a character in a string is an emoji! Furthermore, you are able to use the many Array Methods to deal with the characters!

        const string = "🤖: Hello World! 👋";
    const charList = [...string];
    charList.some(char => char.length > 1) // charList contains an emoji
    charList.filter(char => char.length > 1) // return an array of all of the emojis in charList
    charList.find(char => char.length > 1) // return the first emoji in charList

    I hope you found this helpful! I know it's much easier for me to deal with Emojis now.

  5. 🥣 Ought Mealy

    Some days the web seems woefully under-equipt. Today is one of those days. Here is where I bloviate so I can look up to see if I'm right later.

    I think a large unaddressed issue with the web is mealy machines. AKA Transitioning States.

    For Example, This navbar was a bit more complex than I wished it to be because there's no way to determine scroll direction. A scroll event will take a snapshot in time and say: """ Yes! There was a scroll! Here's my current position! """ Gee, thanks DOM, that's mostly useless, but alright.

    To know scroll direction, you need to preserve state, and compare the new state to the previous state.

    This should be built into the browser right? I'd imagine this is useful information. However, there seems to be a philosophy with the web where previous states, aren't preserved. Thus, knowing much more than X event happened, seems far more difficult than you'd wish.

    I'm not sure if I have any great insight here, This seems to be something that has been worked around, but never really through. xState has inspired much of my thought on this, but it seems to be a tool, without much opinion on how it's implemented. Perhaps having a good Library to handle State transitions, would be helpful beyond just handling events. I mean the core of adios is making changes based on data changes, if I can find a nice API to work with the entire platform and its events it could be a useful tool for building websites.

drop a line

feel free to shoot me a message. i don't bite, i swear.

max. 500 characters