Project Docs

Practice Ground Plan

Goal

Improve the JavaScript and TypeScript practice grounds so they feel like a proper coding workspace, not a small text area.

Implemented Improvements

  • Larger side-by-side editor and console layout on desktop.
  • Separate copy buttons for:
    • code input,
    • console output.
  • Support Tab inside the editor for indentation.
  • Support Shift + Tab inside the editor for outdent.
  • Add Alt + ArrowDown shortcut for duplicating the current line or selected block.
  • Add Ctrl/Command + Enter shortcut for running code.
  • Add Ctrl/Command + L shortcut and a visible button for clearing console output.
  • Add a compact editor shortcuts reference.
  • Show separate copy feedback for code and console output.
  • Apply the same UX to both JavaScript and TypeScript practice pages.
  • Extract editor transform behavior into shared pure utilities for indentation, outdent, and duplicate-line shortcuts.
  • Add run identity, visible system output lines, console entry caps, long-message truncation, and copyable truncation notices.
  • Add a TypeScript-only feedback panel with idle, checking, compiled, and error states plus copy feedback support.
  • Add focused automated tests for editor transform utilities with text and selection assertions.
  • Add saved snippets per language with versioned local storage, empty state, load, delete, conflict confirmation, and responsive snippet cards.
  • Add saved-snippets QA documentation linked from the project docs index.
  • Add a Volume 9 final QA checklist for Q450 closure, artifact checks, and next-volume follow-ups.
  • Let JavaScript and TypeScript practice pages use a wider workspace than reading pages.
  • Keep editor and console panels side by side with larger equal-height work areas on desktop.
  • Replace the code-copy control with the clearer copy icon and label console copying as Copy console.
  • Remove hardcoded light backgrounds from the shortcut strip so dark mode stays readable.
  • Add the first lightweight React practice console at /practice/react.
  • Support local App component input, JSX/TSX transpilation, render preview, console output, reset, clear, and copy controls.
  • Add React starter examples for props, derived state, events, conditional rendering, and list rendering.
  • Add React source length, console entry, and long-message caps with visible truncation notices.
  • Add React saved snippets with local storage, empty state, load, delete, and conflict confirmation.
  • Add a shared practice labs QA checklist for JavaScript, TypeScript, and React workflows.
  • Add an in-page React sandbox scope note so users understand the current same-page render boundary before iframe isolation is implemented.
  • Add the first iframe-backed React preview surface so rendered markup and preview styles are isolated from the main document.
  • Add side-by-side JavaScript and TypeScript comparison drills at /practice/compare.
  • Add handbook output-question presets that connect comparison drills back to relevant Volume 9 questions.
  • Add focused helper tests for console caps, truncation notices, run-state labels, and preset metadata.
  • Let comparison drill presets open directly in the JavaScript or TypeScript console through a one-time tab-local transfer.
  • Add a return panel from transferred JavaScript and TypeScript console drills back to the originating comparison preset.

UX Notes

The editor and console should remain visible together on desktop. On mobile, they can stack vertically with stable dimensions.

The shortcuts reference should be visible but compact, designed for quick recall during practice.

Next Improvements

  • Theme control is now simplified to a light/dark toggle while still respecting system preference as the initial default.
  • Deepen React iframe isolation with a stricter JS execution boundary before expanding the console into broader arbitrary drills.
  • Deep-link comparison preset cards so external notes can point to a specific drill.
  • Run and record manual QA coverage across JavaScript, TypeScript, React, dark mode, and mobile.
  • Refresh portfolio screenshots after the latest Volume 9 UI and content pass.