Nice!
Nice!
Forgot about the command menu!
This is evolving in to a learning resource to help showcase building a responsive app-like UI using Hypermedia and Datastar. Supporting docs can be found here derekr.github.io/datastar-sw-exβ¦.
Finished my big networking cutover with minimal downtime. Beer please.
Switched to treeline.money and it has some overlap, but is just a local app.
That said the downsides are real too. It has felt addictive and easy to always kick off one more task so something to manage and find balance in it all.
Not trying to share my workflow or advice or anything. Just another data point.
I still enjoy coding, but am finding I also enjoy seeing ideas come to be quickly. Doesn't mean they're always good, but I get them out of my head where otherwise they'd just take up space.
I'm not diagnosed, but have identified with ADHD symptoms and experienced the dopamine hits with completing tasks etc. After a period of frustration/waffling with the tech I'm at a place where I get a similar experience when rapidly completing a larger scope in a smaller amount of time.
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."
Also using βallow listβ isnβt a premature optimization. I just had a brain fart and I donβt think I can edit a post.
There's a lot of premature optimization out there, but a little advice⦠don't skip the NAT Gateway if you have people white listing your IP address.
The whole "server" is one JSX file in a service worker. ~2700 lines.
github.com/derekr/datastaβ¦
Live event log viewer β popup window at /events showing every event streaming in real-time. Human-readable summaries, board filter dropdown, expandable JSON. Open it from Cmd+K.
Card detail page β dedicated route with title, description, label picker, column move, and card-scoped history timeline. Navigate with view transitions that animate the card expanding/collapsing.
Cmd+K command menu β fuzzy search across all boards and cards. Context-aware actions (undo, redo, selection mode, time travel). Arrow keys to navigate, Enter to select. All rendered server-side via SSE.
Keyboard shortcut overlay β press ? to see all shortcuts. Speculation Rules prefetch board pages on hover. Small things that make it feel like a real app.
Offline indicator β status chip shows "Local" or "Offline" with live network detection. Card labels β 7-color swatches with undo/redo. Haptic feedback on tap, drag, and destructive actions.
Time travel β scrub through your entire board history with a slider. Every event is replayable. Undo/redo builds reverse events from the log. Event sourcing makes this trivial.
Board title editing β click-to-edit inline with full undo/redo support. All state lives in the service worker. Every mutation is an event written to IndexedDB.
Multi-tab presence β badge shows how many tabs have the same board open. Uses the SW Clients API as ground truth instead of tracking SSE connect/disconnect pairs.
Touch optimizations β eliminated tap delay, prevented input zoom, handled overscroll bounce and safe area insets. PWA manifest so it's installable to home screen.
Responsive overhaul β fluid CSS, edge-to-edge columns, touch-friendly targets. Mobile action sheets for cards and columns. Scroll snap between columns on small screens.
The service worker IS the server. No backend. Hono + JSX in the SW, Datastar for reactivity via SSE. Here's what shipped in ~26 hours:
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.
More progress on the local-first/offline @data-star.dev Kanban app. derekr.github.io/datastar-sw-exβ¦
Screenshot of a Anthropic blog post where the content doesn't load because of SPA architecture.
If you want to do the UI w/ web @tauri.app or electrobun.
@raycast.com gets it. www.youtube.com/watch?v=FGbmmg⦠if you're looking to do local-first or home grown/barefoot apps go native.