Q381: Editor Workflow Drill Shortcuts Copy Actions and Practice Console UX

What Interviewers Want To Evaluate

This drill tests whether you can design developer-facing UI with real workflow empathy.

A practice console is not only a textarea and an output box.

It needs useful keyboard behavior, copy actions, readable layout, clear execution feedback, error visibility, and a low-friction path for repeated practice.

The interviewer wants to see whether you think about the user who will run code many times.

Short Interview Answer

For a practice console, I would design the editor and console as large side-by-side work areas on desktop, stack them on mobile, support common editor shortcuts such as tab indentation and line movement, add copy buttons for code and console output, and keep execution feedback visible. The goal is to make repeated practice fast without forcing the learner to fight the UI.

User Workflow

The learner wants to:

read a prompt
write code
run code
inspect output
copy code
copy console logs
adjust quickly
repeat

Every extra click slows the loop.

The UI should support repetition.

Layout Decision

Desktop:

editor on the left
console on the right
large height
sticky controls
visible run and copy buttons
shortcut hints near the editor

Mobile:

editor first
console below
controls reachable
copy buttons still visible
no horizontal overflow

Side-by-side is valuable only when there is enough width.

On small screens, readability wins.

Shortcut Support

Useful shortcuts:

Tab inserts spaces
Shift Tab removes indentation
Alt ArrowDown duplicates or moves current line
Ctrl Enter runs code
Ctrl L clears console
Ctrl A selects code in focused editor

Start with the shortcuts that reduce repeated friction.

Do not overload the first version with every editor feature.

Tab Key Behavior

Native textarea behavior moves focus on Tab.

For a code editor, learners expect indentation.

Implementation idea:

on keydown
if key is Tab
prevent default
insert two spaces or indent selected lines
preserve selection

This is a small feature with a big quality impact.

Copy Buttons

Add separate copy controls:

copy code
copy console
copy selected output if selection exists

Feedback should be visible:

Copied
Copy failed
Nothing to copy

Do not silently fail.

Console Design

The console should show:

log level
message
objects formatted safely
errors with stack when available
execution timestamp or run number
clear action
copy action

For learning, console output should be readable before it is fancy.

JavaScript and TypeScript Separation

Separate JS and TS modes because they teach different skills.

JavaScript practice focuses on:

runtime behavior
closures
async ordering
arrays
objects
browser APIs

TypeScript practice focuses on:

types
inference
narrowing
generics
compile errors
runtime boundaries

The UI can be similar, but feedback should be different.

Accessibility

The editor UI should include:

labels
button names
focus styles
keyboard reachable controls
announced copy feedback
clear error text
high contrast console output

Developer tools still need accessible interaction.

Keyboard support is especially important here because the product is keyboard-heavy.

State Ownership

Persist:

last code draft
theme preference
selected mode
recent snippets if added later

Avoid persisting:

large console output
sensitive pasted values
temporary errors

Persistence should help learning, not surprise the user.

Testing Strategy

Test:

Tab inserts spaces
copy code works
copy console works
run button executes code
console clear works
keyboard shortcut runs code
mobile layout stacks cleanly
theme does not reduce contrast

The best tests follow the practice loop.

They should prove the learner can write, run, inspect, copy, and repeat.

Common Mistakes

• Making the editor too small.
• Hiding console output below the fold on desktop.
• Forgetting copy buttons.
• Letting Tab escape the editor unexpectedly.
• Adding shortcuts without visible hints.
• Treating TypeScript like JavaScript with a label change.
• Ignoring mobile layout.
• Not announcing errors or copy feedback.

Final Mental Model

A good practice console is:

large enough to think
fast enough to repeat
clear enough to debug
keyboard friendly
copy friendly
theme aware

The interface should make practice feel like flow, not form filling.