drk

@drk

428 Folgt301 Follower463 Posts

Ist das dein Profil?Übernimm es — dann gehört dir drk.dirty.social.Profil übernehmen

drk@drk· Jul 10

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.

drk@drk· Jul 4

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.

drk@drk· Jul 3

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.

drk@drk· Jun 11

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.

drk@drk· Jun 4

Fixed it.

Two-part architecture diagram. Top shows Zero's standard setup: browser app and zero-client talk over WebSocket to zero-cache (using SQLite as a cache), which syncs with your server and a PostgreSQL/MySQL database via replication. Bottom shows the simplified approach: the client app, separate server, and external database are crossed out in red, leaving one box that combines your server with an embedded SQLite database and sends HTML straight to the browser.

drk@drk· May 14

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.

drk@drk· May 13

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

drk@drk· Apr 13

drk@drk· Mar 8

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).

drk@drk· Mar 6

Forgot about the command menu!

drk@drk· Mar 5

A meme featuring Jeff Goldblum as Dr. Ian Malcolm from the 1993 film Jurassic Park, standing in a lab setting wearing a black leather jacket and glasses, with a serious expression. The text reads: "You were so preoccupied with whether or not you could, you didn't stop to think if you should."

drk@drk· Mar 5

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.

drk@drk· Mar 4

Screenshot of a Anthropic blog post where the content doesn't load because of SPA architecture.

drk@drk· Feb 15

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.

drk@drk· Feb 14

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.

drk@drk· Feb 14

Screenshot of BlueSky failing to load with just a loading spinner.

drk@drk· Feb 13

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

drk@drk· Feb 13

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).

drk@drk· Feb 12

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).

drk@drk· Feb 12

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.

drk@drk· Feb 12

Car salesman slaps roof meme: "This baby can do 4 sets of CSS variables"

drk@drk· Feb 10

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.

drk@drk· Feb 10

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.

drk@drk· Feb 10

drk@drk· Feb 6

Slack message from user "drk" at 9:50 AM saying "moving us to kubernetes" with a GIF of Jim Carrey from The Mask movie wearing a yellow hat and green face, captioned "STOP ME"

drk@drk· Feb 4

Screenshot of Gridiot Advanced Example, a CSS grid layout tool running on localhost, demonstrating excellent performance. Chrome DevTools Performance panel shows Core Web Vitals: LCP of 60ms (well under the 2.5s threshold) and CLS of 0 (no layout shift). The interface displays colorful gradient grid blocks (pink, cyan, green, purple) of various sizes with labels like B (2×1), C (2×1), D (1×2), and M (1×1). A help panel lists keyboard shortcuts for grid manipulation. The flame chart and breakdown show efficient rendering and scripting times.

drk@drk· Jan 29

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.

drk@drk· Jan 22

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

drk@drk· Jan 19

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.

Screenshot of a UI showcasing the effectiveness of a brotli compression window over a long-lived SSE connection.

drk@drk· Jan 19