Skip to content

Latest commit

 

History

History
250 lines (171 loc) · 10.1 KB

File metadata and controls

250 lines (171 loc) · 10.1 KB

DevKeys — Overview & Principles

Overview

  • Name: DevKeys
  • Tagline: Type faster. Code smarter.
  • Purpose: A lightweight, privacy-first typing trainer for developers that combines real code practice with muscle-memory building.
  • Origin: Created out of necessity when switching to a split design keyboard. Generic typing trainers weren't cutting it—I needed to practice with real code, not lorem ipsum.
  • Model: Free, open-source, privacy-first, and offline-friendly.
  • Primary users: Developers, CS students, coding bootcamp learners, and anyone who wants to improve their typing speed with actual code.

What makes DevKeys different

1. Code-native content
Every prompt is real, idiomatic code—not random words or generic sentences. Practice algorithms, syntax patterns, and framework idioms that you'll actually use in your work.

2. Privacy-first design
All personal data stays on your device. Sessions, metrics, and custom prompts live in IndexedDB. Optional anonymous analytics track only aggregate usage patterns (no personal data). Your typing data is yours alone.

3. Editor-like experience
The UI borrows from modern IDEs: file-based prompt organization, language switching, syntax highlighting with VS Code themes, and Tab-aware indentation that respects code structure.

4. Performance-first architecture
Rust-powered WASM engine delivers sub-50ms keystroke latency. The entire app loads in under 2 seconds and runs smoothly on mid-tier hardware.

5. Developer ergonomics
Keyboard shortcuts (Cmd/Ctrl + R to restart, Cmd/Ctrl + K for explorer), draggable windows, expandable stats panels, and session history—everything optimized for the way developers actually work.

6. Composable & extensible
Custom prompts, pluggable themes, modular component architecture, and a standardized pack format make it easy to extend without forking the codebase.


Core Principles

1. Typing comes first

Landing on DevKeys should immediately place focus in the editor with a prompt ready to type. No distractions, no configuration paralysis. The fastest path to practice is zero clicks from page load.

In practice:

  • Auto-focus on the typing surface
  • Invisible textarea maintains native input behavior
  • Minimal UI chrome—prompt and metrics are all you need

2. Stay in developer context

Generic typing trainers use news articles or literature. DevKeys uses code that developers actually write: loop patterns, function signatures, error handling, data structures, and framework idioms.

In practice:

  • All prompts are curated, syntactically correct code
  • Language-specific idiomatic patterns (e.g., Rust lifetimes, TypeScript generics)
  • Real-world algorithm implementations, not pseudocode

3. Own your data

Privacy isn't a feature—it's the foundation. Sessions, progress, and custom prompts never leave your device. Optional anonymous analytics are self-hosted and track only aggregate usage.

In practice:

  • IndexedDB for local persistence
  • No personal data sent to external services
  • Anonymous analytics (if enabled) track only: page views, runs started, runs completed
  • Browser devtools provide full data access and export capability
  • Clear localStorage/IndexedDB to reset completely

4. Fast feedback everywhere

Every keystroke should provide instant, unambiguous feedback. Metrics update in real-time. Animations confirm actions. No waiting, no loading spinners during active use.

In practice:

  • Character-level correctness highlighting (<50ms latency)
  • Animated WPM, accuracy, and completion in the menu bar
  • Toast notifications for prompt/language switches
  • Smooth transitions powered by Framer Motion
  • Stats panel expands without layout jank

5. Composable architecture

Features should be modular and hooks-based. Components own their concerns. State flows predictably through Zustand. New modes or UI variations shouldn't require rewriting core logic.

In practice:

  • Feature-based organization (editor/, stats/, session/, explorer/)
  • Custom hooks encapsulate complex logic (usePromptSelection, useSessionMetrics)
  • Shared components are purely presentational
  • Engine is swappable (Rust WASM ↔ TypeScript)

6. Progressive enhancement

The app works with the TypeScript evaluator out of the box. When the Rust WASM bundle is present, it seamlessly upgrades to the higher-performance engine without code changes.

In practice:

  • TypeScript fallback evaluator for dev iteration
  • WASM bundle auto-loaded when available
  • Identical API surface for both engines
  • Error states gracefully degrade, never crash

7. Offline matters

Once the app loads, it should work indefinitely without network access. Prompts ship with the bundle. Metrics stay local. Optional analytics are self-hosted and don't affect core functionality.

In practice:

  • All prompt packs bundled at build time
  • No CDN dependencies for fonts or icons
  • IndexedDB persists across sessions
  • Static deployment (works on any file server)
  • Analytics (if enabled) are self-hosted and optional

Design Philosophy

Minimalism with personality

DevKeys embraces a monochrome, low-contrast aesthetic inspired by tools like Midday.ai and Linear. The grid backdrop, radial blur accents, and lowercase branding create a calm, focused environment without sacrificing visual interest.

Visual principles:

  • Monochrome grid background (subtle depth without distraction)
  • Glassmorphic panels with animated glows
  • Lowercase typography for approachability
  • Syntax colors from VS Code (familiar, accessible)
  • Smooth animations that feel intentional, not gratuitous

Desktop metaphors in the browser

The draggable window frame, titlebar controls, and resizable panes bring desktop app ergonomics to the web. This makes DevKeys feel like a tool, not a website.

Interaction patterns:

  • Drag the titlebar to reposition
  • Minimize/maximize controls (future: remember position)
  • Keyboard shortcuts mirror desktop conventions
  • File-based prompt organization (not "levels" or "exercises")

Developer mindset

DevKeys assumes users are comfortable with code, terminals, and developer tools. Documentation references technical concepts without hand-holding. The UI uses file extensions, syntax themes, and keyboard shortcuts as first-class citizens.

Language choices:

  • Prompts named like files (rust/binary_search.rs)
  • Stats panel, not "scoreboard"
  • Engine errors shown with stack traces (when helpful)
  • GitHub-style markdown in documentation

Target Audience

Primary: Working Developers

  • Want to improve typing speed with actual code (not generic text)
  • Comfortable with terminal commands and setup steps
  • Value privacy and offline-first tools
  • Appreciate performance and clean UX

Secondary: CS Students & Bootcampers

  • Typing code feels unfamiliar (lots of symbols, indentation)
  • Need to build muscle memory for common patterns
  • Want to prepare for technical interviews
  • Learning multiple languages simultaneously

Tertiary: Mechanical Keyboard Enthusiasts

  • Practice new layouts (Colemak, Dvorak) with code
  • Learning split keyboards (Ergodox, Moonlander, Corne, Kinesis)
  • Benchmark typing speed across different keyboards
  • Enjoy minimal, aesthetic interfaces
  • Appreciate open-source and customizability

Success Criteria

DevKeys succeeds when:

  1. Users improve — Measurable WPM increase after consistent practice
  2. It feels native — Typing code in DevKeys feels similar to typing in an IDE
  3. Privacy holds — Zero compromises on local-first architecture
  4. Community grows — Contributors add prompt packs and features
  5. It's fast — Sub-50ms latency maintained as features expand

DevKeys fails if:

  1. It requires cloud sync or accounts
  2. Keystroke latency becomes noticeable
  3. The bundle size grows beyond 500KB (gzipped)
  4. Privacy model changes to collect personal data
  5. Core features require JavaScript frameworks beyond React

Non-Goals

These are explicitly not goals for DevKeys:

  • ❌ Gamification (XP, badges, levels)
  • ❌ Social features (friends, messaging, profiles)
  • ❌ Paid tiers or subscriptions
  • ❌ Typing non-code content (prose, chat logs)
  • ❌ Server-side rendering or SSR complexity
  • ❌ Native mobile apps (mobile web may come later)
  • ❌ Real-time multiplayer typing races
  • ❌ Integration with closed-source platforms

Comparison to Alternatives

Feature DevKeys Monkeytype Typing.io Keybr
Code-first content ✅ Yes ❌ No ✅ Yes ❌ No
Privacy-first ✅ Local + optional anonymous ⚠️ Optional account ❌ Account required ⚠️ Analytics
Custom prompts ✅ Yes ✅ Yes ❌ No ❌ No
Syntax highlighting ✅ Yes ❌ No ✅ Yes ❌ No
Open source ✅ MIT ✅ GPL-3.0 ❌ No ❌ No
Offline-ready ✅ Yes ✅ Yes ❌ No ❌ No
WASM engine ✅ Yes ❌ No ❌ No ❌ No
Desktop UI ✅ Yes ❌ No ❌ No ❌ No

Long-Term Vision

Year 1: Establish DevKeys as the go-to typing trainer for developers. Grow to 10k+ users and 50+ prompt packs across 15+ languages.

Year 2: Introduce adaptive learning and weak-point analysis while maintaining privacy. Launch community pack sharing with moderation.

Year 3: Explore optional AI-assisted prompt generation behind a privacy-preserving proxy. Desktop app via Tauri for true offline-first experience.

Year 5: DevKeys is the standard typing practice tool for CS education programs and coding bootcamps. Developer tools integrate DevKeys as a muscle-memory training module.


Contributing to This Vision

If these principles resonate with you, we'd love your contributions:

  • Add prompt packs for languages you love
  • Improve the engine with better diff algorithms
  • Extend the UI with accessibility features
  • Write documentation for onboarding new contributors
  • Share feedback via issues and discussions

See CONTRIBUTING.md for details.


DevKeys exists to make developers faster at what they love: writing code.