Zac Batten Developer portfolio

Notes / Build logs

Technical build logs.

Short logs on changes, tradeoffs, and next fixes. Use the quick path, topics, or case studies.

Start here

Read these first.

Three entries cover the strongest implementation signals.

Browse by topic

Browse notes by topic.

Static anchor links keep the archive readable without JavaScript.

Archive

All build logs.

Web Paint

Building a browser canvas editor without a framework

Date
Related project
Web Paint browser canvas drawing tool
Problem
A browser drawing editor needs fast tools, predictable pixels, safe imports, and reliable export in plain JavaScript.
Tool state
Canvas pixels are the document; tool, brush, color, selection, zoom, preview, and status live in JavaScript state.
Canvas rendering
Pointer events become canvas coordinates. Shape previews and resize work stay temporary until commit.
Undo/redo
Capped ImageData snapshots keep undo simple; large canvases make snapshots expensive.
Import/export
Imports check MIME type, size, and pixels. Exports use PNG, Clipboard APIs, local save/load, and fallbacks.
Text and shape tools
Tools share one loop: capture, preview, commit pixels, save history.
Mobile/touch constraints
Touch drawing needs large controls, stable sizing, pointer capture, and touch-action: none.
Nonvisual limitations
The shell has labels, focus, status, and grouped tools. Pixels still need shortcuts, layers/objects, and nonvisual descriptions.
Technical takeaway
The hard part is keeping events, UI state, pixel commits, history, and API failures easy to reason about.
TraverseOps

Designing field operations around maps, inspections, and work orders

Date
Related project
TraverseOps field-operations map and work-order sample app
Problem
Field operations break down when maps, inspections, and follow-up work live in separate tools.
Why maps help
A map-first interface makes location the organizing layer for assets, condition, inspections, and work orders.
Asset state
Each asset has identity, location, status, history, and open-work indicators. Filters keep the map scannable.
Inspections
Inspection screens model the field path: pick an asset, record condition, capture notes, and timestamp the change.
Work orders
Work orders turn findings into tasks tied to the asset, status, and supervisor review.
Imports
The import screen uses sample data. Production needs schema checks, duplicate detection, coordinate validation, rollback, and row errors.
Empty states
No selection, empty filters, missing reports, and no assigned work should show the next valid action.
Production gaps
Production needs auth, roles, offline sync, audit logs, validation, errors, security review, device testing, and dependable map/data sources.
Technical takeaway
The useful part is tying map context to state changes, history, follow-up work, and guardrails.
MovieBot

How the Twitch MovieBot turns chat votes into OBS playback

Date
Related project
StreamCinema Vote Bot / MovieBot
Problem
Manual movie nights mean reading chat, counting votes, resolving ties, finding files, and updating OBS live.
Chat command flow
Viewers use !vote, !results, !currentmovie, !time, and !movies. TwitchIO routes them to Python handlers.
Vote state
The bot keeps per-viewer votes and movie totals. Changed votes decrement the old title first.
Tie handling
At poll close, the bot sorts votes, resolves ties, and can choose randomly when nobody votes.
Movie folder scanning
The scanner refreshes the local catalog, avoids symlinks, and falls back when duration tools or files fail.
OBS WebSocket control
After a winner, the bot normalizes the path, updates OBS, switches scenes, and restarts playback.
Token refresh/reconnect
Long sessions use token refresh, IRC checks, guarded OBS calls, retries, and cleanup.
What changed
The portfolio now frames the bot as one pipeline: chat input, state, local files, OBS control, and reconnects.
Technical takeaway
The key work is coordinating chat, media, OAuth, OBS calls, and recovery in a long-running Python process.
What would improve next
Add an operator dashboard, dry-run mode, structured logs, health indicators, integration tests, and safer queue controls.
Portfolio site

Homepage and metadata pass

Date
Related project
Portfolio site / GitHub Pages developer portfolio
Problem
The homepage needed a faster read on role, projects, resume path, and evidence.
What changed
Reworked the homepage around selected work, CTAs, project cards, metadata, canonical URLs, and case-study paths.
Technical takeaway
A portfolio still needs clear actions, stable metadata, indexable pages, keyboard-friendly links, and working paths.
MovieBot

Stream room and searchable voting catalog split

Date
Related project
StreamCinema Vote Bot / MovieBot and Movie Library
Problem
The Twitch room and movie queue had different jobs: watch, read commands, browse titles, and copy votes.
What changed
Kept movie-night.html focused on the stream and moved search, posters, copyable !vote, and no-JS list to movie-library.html.
Technical takeaway
Splitting stream and catalog keeps pages simpler and improves mobile, QA, and fallback boundaries.
TraverseOps

Sample-data boundaries and field-ops framing

Date
Related project
TraverseOps field-operations map and work-order sample app
Problem
A map sample can look shallow without records, roles, sample-data limits, and risks.
What changed
Reframed TraverseOps around MapLibre UI, Supabase-style data, sample records, filters, inspections, work orders, imports, reports, roles, and a case study.
Technical takeaway
Operations software needs data ownership, roles, edge cases, and deployment constraints to read as credible.

Next step

Connect notes to work.

Use notes for implementation context, then jump to the finished project pages.

View selected work MovieBot case study Interactive Lab