JavaScript Typing Drill

( ) { } => ; . ' ` $

Every passage contains: ( ) { } ; . ' ` $ · =>

Net 0 wpmGross 0 wpmAcc 100%

console.log(`found ${count} rows`); await fetch('/api/rows').then((r) => r.json()); return list.reduce((sum, n) => sum + n, 0); await fetch('/api/rows').then((r) => r.json()); } return list.reduce((sum, n) => sum + n, 0); return list.reduce((sum, n) => sum + n, 0); } console.log(`found ${count} rows`); items.filter((x) => x.active).forEach(run); return list.reduce((sum, n) => sum + n, 0); } const { name, size } = options; } return list.reduce((sum, n) => sum + n, 0); let index = 0; } let index = 0; if (count > 0 && ready) { setTimeout(() => tick(index), 250); setTimeout(() => tick(index), 250); return list.reduce((sum, n) => sum + n, 0); if (count > 0 && ready) { console.log(`found ${count} rows`); const { name, size } = options; } console.log(`found ${count} rows`); let index = 0; } await fetch('/api/rows').then((r) => r.json()); items.filter((x) => x.active).forEach(run); await fetch('/api/rows').then((r) => r.json()); const { name, size } = options; function total(list) { export default function render() {} } const { name, size } = options; function total(list) { } await fetch('/api/rows').then((r) => r.json());

QWERTY layout assumed. Backspace corrects; uncorrected errors count against net WPM.

Arrow syntax appears five times across this drill's dozen-odd lines — const rows = items.map((item) => item.value); alone has one. Every occurrence types a bare equals sign first, no modifier attached, and then asks for Shift on the very next keystroke instead, sourced from the opposite hand and landing on a different finger than the one that just finished the equals sign. Reverse the order and compare it with the Maths Operator Drill's y>=x: there, the identical greater-than key comes first, shifted, and the equals sign follows it unshifted — the same two characters, the same two keys, arriving in the opposite sequence.

Template literals ask for something else again. `found ${count} rows` opens with a backtick — a key most ordinary English writing never touches at all — then, partway through, the sequence ${ demands a dollar sign (left index finger, right hand holding Shift) followed immediately by an opening brace (right pinky, left hand holding Shift instead). The hand supplying Shift switches from right to left between those two characters while the reaching finger switches from left index to right pinky, both inside two consecutive keystrokes with nothing between them. const label = `${first} ${last}`; does that twice in one short line.

Brackets of every kind show up constantly and rarely alone: items.map((item) => item.value) nests a function call inside a method call inside another set of parentheses, and export default function render() {} closes with an empty parameter list immediately followed by an empty body — four bracket characters in a row with nothing typed between any of them.

Why This Drill

Five repetitions of the same handoff inside one short passage raise the real cost of a mistimed Shift, since missing it anywhere breaks whichever line it lands in, and the next chance to get it right is never more than a couple of lines away.

The hand-crossing inside ${ is the more demanding pattern in this whole passage, since it asks both hands to trade which one is holding Shift within a two-character span, twice over in a single line like const label = `${first} ${last}`;. Nothing else in this batch of code drills packs that particular a switch into so short a space.

The backtick deserves its own mention simply because of how rarely it comes up outside this exact context — a typist can go through ordinary written English for a very long stretch without a single reason to press it, then suddenly need it several times in one file the moment a template literal is involved. Getting comfortable finding that one key by feel, without a habit built from everyday use to fall back on, is most of what makes this drill worth returning to.

An Arrow Built From an Unshifted Key and a Shifted One

The equals half of => needs nothing from Shift at all; only the greater-than half does, and that demand lands on the very next keystroke with no letter or space to prepare for it. items.filter((x) => x.active).forEach(run) buries that exact handoff in the middle of a chained line, with a complete method call sitting on either side of the arrow itself.

Two Hands Trading the Shift Key Inside One Template Literal

Producing ${ means the right hand holds Shift while the left index finger reaches for the dollar sign, then, one keystroke later, the left hand takes over Shift while the right pinky reaches for the brace. `${first} ${last}` repeats that full handoff twice in a single short line, with nothing longer than a single word's worth of characters between the two occurrences.

A Key Ordinary Writing Almost Never Touches

The backtick sits in the top-left corner of the keyboard, reached by the left pinky, and has essentially no role in ordinary English sentences — no other drill on this site asks for it at all. A template literal needs one at the start and one at the end of every string it opens, so this passage asks for a key a typist's hand may not have built any real habit around.

Four Bracket Characters With Nothing Between Any of Them

export default function render() {} closes an empty parameter list and an empty function body back to back — parenthesis, parenthesis, brace, brace, four keystrokes with no letter, digit or space anywhere among them. The Bracket & Parenthesis Drill covers this same empty-pair motion in isolation; here it arrives as the tail end of a full line of code rather than as its own dedicated exercise.

Frequently Asked Questions

Is the equals sign in => actually shifted, the way the greater-than sign is?

No — the equals sign itself needs no Shift at all. What makes the arrow demanding is that Shift has to engage immediately afterward, for the very next character, with no letter or space in between to give the hand a moment to prepare.

What's actually happening in the hands when typing ${count}?

The Shift-holding hand changes sides between the two characters. One hand holds while the other reaches, then they swap — twice in a row, at speed.

Why does this drill make such a point of the backtick specifically?

Because ordinary English writing gives a typist almost no occasion to press it, so a template literal is often the first and only reason that key gets used regularly, and it appears at both ends of every one this passage contains.

Is the {} in function render() {} the same motion as the {} in the Bracket & Parenthesis Drill?

The keystrokes are identical, but here they follow an equally empty pair of parentheses with nothing between any of the four characters, a denser run than that drill's own bare-pair examples typically ask for on their own.

Why does this page count five arrow occurrences instead of just showing the pattern once?

Because that's how many times => actually appears across this drill's passage, and repetition at that frequency is what makes the unshifted-to-shifted handoff worth practising rather than something a typist only meets once in a while.

How does this compare to the TypeScript Typing Drill, which uses the same arrow syntax?

The TypeScript Typing Drill keeps this exact arrow and adds a second layer on top of it — angle brackets for generics and a pipe for union types — so everything here still applies, with more shift-heavy punctuation stacked around it.