iiinova — where your digital self keeps evolving

drk @drk.wtf · 30/09/2026

I see so they're able to start inputting text then the ROOT of the app (JavaScript) is like… no no… I am at the ROOT now!

Captain Philips meme of pirate saying "JavaScript. I am the root now."

000

drk @drk.wtf · 09/09/2026

Just another day in SPA paradise.

Screenshot of bsky web app infinitely loading.

061

drk @drk.wtf · 16/08/2026

Does this seem cool?

Screenshot of a playground for the CQRS inspired JS API.

150

drk @drk.wtf · 10/07/2026

Working on a web-based peer client for herdr. Hoping to polish enough to use it on mobile. Currently using moshi and like it a lot, but also just wanted to see how far I could get.

100

drk @drk.wtf · 04/07/2026

Anyone want to hop on a call sometime this weekend/next week and chat about a server side JS tool belt I’m working on? orion-cli-tour.pages.dev#step-1

Screenshot of orion-cli-tour.pages.dev, a static interactive tour titled The Orion CLI, step by step. Intro text explains Orion is a zero-dependency toolbelt for real-time multiplayer hypermedia apps on Datastar, and that the page is a recording of a real orion run — nothing executes in the browser. On the left is a numbered list of 9 steps from Scaffold the app to Run it, each with its shell command; steps 3 and 5 are tagged HAND EDIT. On the right, a mock IDE shows step 1 selected: a file explorer tree (.claude/skills/orion, belt/, public/, config.ts, main.ts, etc. marked A for added), the open main.ts file with import statements pulling belt modules like sqliteStore, inProcessBus, and router, and a terminal panel showing the captured output of orion new myapp — created myapp (bare skeleton), 17 belt modules vendored. Footer reads 1/9 Scaffold the app.

182

drk @drk.wtf · 03/07/2026

Got me wondering if this tool belt could adapt to a p2p use case and it ended up (for POC) just authoring a new store adapter to swap out sqlite and it worked great.

100

drk @drk.wtf · 11/06/2026

Shipped a little live trace viewer w/ anonymized tracing across all sessions.

Dark-mode screenshot of "dbugs," a trace view debugging tool, showing a waterfall of recent HTTP and SSE traces. Each trace (like GET /traces and sse.push) expands into nested spans — render.regions, detail.read, sse.send — with colored timing bars and millisecond durations, plus a live "1 watching" indicator.

100

drk @drk.wtf · 14/05/2026

Had to whip up a script for stashing my YouTube tabs after discovering they consume a ton of resources/make the MacBook hot to the touch when sitting idle. I open YouTube links in new tabs all day and likely will never get around to watching them, but the script does keep my MacBook a lot cooler.

Screenshot of Obsidian base with stashed YouTube links.

Screenshot of custom youtube-stash cli after grabbing all YouTube tabs, enriching the stash data and adding them as documents in Obsidian.

210

drk @drk.wtf · 13/05/2026

After reading the Github write up on their PR page performance improvements I wanted to see how quickly I could prototype a performant diff viewer using Datastar. largediff.fly.dev largediff.fly.dev/doc

351

drk @drk.wtf · 08/03/2026

So this looks like the same experience I've been sharing recently, but it's running against an actual local server instead of service worker. It's basically the same server with adapters do db (indexdb vs sqlite).

000

drk @drk.wtf · 06/03/2026

Forgot about the command menu!

000

drk @drk.wtf · 05/03/2026

More progress on the local-first/offline @data-star.dev Kanban app. derekr.github.io/datastar-sw-ex…

Screenshot of a Kanban app in Chrome showing a command palette overlay with actions (Undo, Redo, Selection mode, History, etc.) and a list of boards.

Kanban card editor in a TODO column showing title "Hello," description "My first card!," color label picker, and Save/Cancel buttons.

Kanban board "Third board" showing a history timeline scrubber at step 8/12 with TODO, DOING, and DONE columns containing cards.

Kanban card detail page for "Hello" showing description field, label color picker, column selector (Todo/Doing/Done), and a sidebar with creation details, change history, and a Delete card button.

241

drk @drk.wtf · 15/02/2026

OK soft launching eg-grid. A 8.4kb gzip 0-dep bundle you can vendor in to your project and customize as needed. No npm. No versions. No guarantee. derekr.github.io/eg-grid/

EG Grid landing page showcasing a zero-dependency CSS Grid drag-and-drop library. Features an interactive demo with colorful gradient tiles labeled A-H in various sizes, and a comparison table showing EG Grid's advantages over Packery, gridster.js, and react-grid-layout in terms of file size, dependencies, and features.

2142

drk @drk.wtf · 14/02/2026

Writing about new realtime setup we deployed @basedash.bsky.social. Quick vibed interactive diagram to help jump start visuals. tl;dr - CQRS - Subscribe to topics over SSE - Get entities pushed over SSE (brotli compressed) - Upsert in to TS Query/DB cache snowy-silence-db6d.derekr.workers.dev

Architecture diagram showing a real-time data sync pipeline: AI Agent inserts content to Postgres, triggers PG Notify, which signals a Snapshot Backend to fetch delta rows and fan-out updates via SSE to multiple React Query viewers. A Replicache handles slower org/user state syncing as a background fallback path.

030

drk @drk.wtf · 13/02/2026

Here's another example. No shame on this project (I love it!), but SPA failure where page loads then content disappears.

210

drk @drk.wtf · 13/02/2026

So you land on a page, establish SSE connection and compression gets more efficient with every push.

Dashboard for testing SSE (Server-Sent Events) compression with Brotli algorithm. Shows compression settings at level 4, SSE event interval of 200ms with large entity size selected. Real-time stats display 89% savings with dictionary compression, reducing 1.88 MB uncompressed data to 217.22 KB (1.67 MB saved).

010

drk @drk.wtf · 12/02/2026

OK one more dig at SPAs. That's a lot of JS just to show me a animated SVG and some text.

Screenshot of Safari dev tools network summary showing 18.5mb loaded (4.76mb transfer).

100

drk @drk.wtf · 12/02/2026

I feel like @sentry.io hangs on their splash screen a lot these days. This is why SPAs/syncing client state to the frontend sucks.

100

drk @drk.wtf · 10/02/2026

So a lot of this comes from using the platform features. With CSS grid you get simple layout styling and your grid can be as responsive and fluid as needed. Combined with View Transitions most of the work is off the main thread keeping frame rates consistent.

Chrome DevTools Performance panel showing a drag-and-drop operation with consistent frame rates and smooth animation performance across the ~3,500ms recording, with minimal layout shifts and steady CPU activity.

020

drk @drk.wtf · 10/02/2026

Been noodling on my end game grid layout with drag and drop approach and think it's ready to share. derekr.github.io/eg-grid/

Screenshot of "Architecture Explorer," an interactive CSS Grid debugging tool. Shows a 4-column grid with colorful labeled blocks (C, D, E, F, G, H) of varying sizes. Item E is being dragged, highlighted with an orange border. A right sidebar displays real-time state machine status, drag events, ARIA announcements, and injected CSS properties.

130

drk @drk.wtf · 29/01/2026

I think a lot of people were requesting the GUI since config discovery was difficult. It's all configurable though. S

Screenshot of Zed keymap editor showing cmd+, and how you can configure opening settings UI or settings JSON as the first cmd+, invocation.

000

drk @drk.wtf · 22/01/2026

Vibe coded a bento box style grid with drag and drop/keyboard nav using CSS Grid and View Transitions. The dragged element uses the Web Animation API so it can transition from where it's being dragged. - Keyboard selection/movement - CSS Grid - View Transitions - Pragmatic Drag and Drop

151

drk @drk.wtf · 19/01/2026

Another example from this exploration was demonstrating how brotli compressing over SSE is very effective and often mitigates the need for complex diffing on the server to help with efficient syncing from a bandwidth perspective.