DEV Community: Typre

What's still worth practising when AI writes most of your code

Typre — Thu, 17 Sep 2026 11:40:40 +0000

Most of my code now starts as something a model wrote. My job is reading it, checking it and fixing it. Those skills don't build themselves — so I practise them on purpose.

Read code fast Good readers see shapes, not characters: a guard clause, a retry loop, a lookup map.

Drill: type out real, idiomatic code in your language. Typing makes you see every character once.

Spot wrong code Generated code compiles and looks right. When it's wrong, it's wrong in the logic.

Drill: write small functions from memory — debounce, binary search — then compare with a correct version.

Edit without friction The work is hundreds of tiny edits a day. Friction is mostly mechanical.

Drill: learn editor shortcuts until they're reflex, and practise typing brackets and operators specifically.

Learn syntax (beginners) You can get working code without ever learning syntax. Then you can't judge the code you get.

Drill: retype short, correct snippets for a few minutes a day.

Ask precisely Prompting well is writing a clear ticket.

Drill: write one sentence saying what "done" looks like before you ask.

I built Typre for drills 1, 3 and 4: 2,590 real snippets in 14 languages, VS Code and Vim shortcut drills, and chess you play by typing code. Free, no account.

What are you practising on purpose these days?

I added Chess to my typing-practice app — you move pieces by writing code

Typre — Sat, 05 Sep 2026 08:38:11 +0000

Typre is a free web app for practicing typing code in 14 languages. I just shipped a feature that had no business working as well as it does: chess, where every move is a real command you type, not a drag-and-drop.

Moves are code, literally

Pick your language, and moves look like this:

board.move('e2', 'e4');

board.move("e2", "e4")

Castling, captures, promotions — all typed, all validated against real chess rules (powered by chess.js under the hood).

The moments that matter got real effects

Castling — king and rook slide in a staggered one-two beat, then a fire/gold shield blooms around the king.
Promotion — the pawn dissolves from the bottom up and the new piece sweeps in with a burst of sparks and a warm glow.
Checkmate — the losing king slumps and raises two little pixel-art flags in surrender.

All rendered from raw SVG path data — same pixel-art set lichess uses, no image assets.

Play a bot, pass-and-play, or go online and actually compete

Three bot difficulty levels, or local two-player on one keyboard — no account needed, just show up and play.
Create a free account and it gets more interesting: online games are rated, and there's a real ELO leaderboard. Your rank is public, your rating moves with every win and loss, and it only counts games against other signed-in humans — no farming bots for points.

If you just want to poke at it, no signup required. But if you want to actually climb something, sign up at typre.dev and your first rated game is one click away.

Happy to answer questions about the implementation — the promotion crossfade bug alone (SVG clip-path sequencing to avoid two different piece silhouettes rendering half-visible at once) was a fun one to chase down.

Every typing site makes you type prose. I built one that makes you type code.

Typre — Sun, 30 Aug 2026 05:50:08 +0000

I have been typing for twenty years and I still slow down on =>.

Not on words. Words are fine. It is {}, [], &&, ::, ?., !== — the keys my fingers only ever meet inside code, and never inside the paragraphs every typing trainer feeds you.

So I built the one I wanted: Typre. It only serves real code.

Free, no account needed, open source.

What it actually is
2,170 hand-picked snippets across 14 languages, in 15, 30 and 60 second runs.

Everything is real code you would plausibly write — a Go error check, a SQL join, a React hook, a Rust match. Nothing generated, nothing padded with filler to hit a character count.

const results = await Promise.all(
urls.map((url) => fetch(url).then((r) => r.json())),
)
That is a snippet. You type it exactly, brackets and all.

Four things I made sure to get right
No repeated snippets. Snippets come from a shuffle bag — you go through the entire pool before seeing any of them twice, and that survives a page reload. Most trainers pick at random, so you hit the same line three times in ten runs and start typing from memory instead of reading.

A separate pool per run length. A 15 second run gives you one short idiom, not the first three lines of something longer that you never get to finish. Each language has its own short, medium and long pools.

A drill of nothing but punctuation. {} [] <> | ~ ^ && => !== ?. ?? <=> and nothing else. This is the one I use most.

A shortcut trainer. 61 VS Code and Vim shortcuts, where you actually press the chord and it checks the modifiers. Vim sequences like dd, gg, :wq are handled as sequences, not chords.

Plus the usual: WPM, raw WPM, accuracy, consistency, the characters you mistype most, XP and levels, a daily streak, per-language leaderboards, real-time races against another person, and challenge links to beat someone's score.

Two technical decisions worth explaining
Every snippet ships in the bundle. All 2,170 of them. That is most of why the JavaScript is 269 KB gzipped rather than something smaller — and it is deliberate. It means the whole app works with no network at all. Install it, get on a plane, keep practising. A typing trainer that needs a round trip to give you the next line is a typing trainer that stutters.

Syntax highlighting is real TextMate grammars, loaded per language. Shiki, the engine VS Code uses. Naively imported it costs about 11 MB across 309 files. Using createHighlighterCore with the JavaScript regex engine instead of the Oniguruma WASM build, plus a dynamic import per language, brings first load down to roughly 69 KB — core, one grammar, one theme. You only pay for the languages you actually open.

What is not good about it
Fair is fair:

WPM is measured client-side. Anyone with DevTools can submit a fake score for their own account. The database rejects impossible values and RLS stops you writing as someone else, but there is no server-side verification of a run. Treat the leaderboard as a bit of fun, not a record book.
It needs a physical keyboard. On a phone there is nothing to practise on, so it says so rather than pretending.
It has 2 users. I am one of them.
What I would like from you
Sixty seconds and an honest opinion.

Not "nice project" — I mean the thing that annoyed you. The snippet that felt wrong for the language. The metric you did not understand. The moment you almost closed the tab.

There is a report button inside the app: it captures the last few console errors, the build hash, your viewport and browser, and mails it to me the second you hit send. One click, no form, no account.

typre.dev — and the source is MIT if you want to see how any of it works.

Built with React 19, TypeScript, Vite, Tailwind v4, Zustand, Shiki and Supabase.

Typre.dev – A code typing platform to boost speed & master syntax in 14 languages

Typre — Tue, 18 Aug 2026 16:10:45 +0000

Hey DEV Community! 👋

Whether you are just writing your first lines of code or spent thousands of hours inside VS Code, one thing is clear: typing programming syntax is completely different from typing regular prose.

Special characters like { } [ ] < > => ; :: can slow down your coding rhythm and break your flow state.

That's why I created Typre.dev – a minimal, fast, and interactive code typing platform built to help both beginners and experienced developers master code syntax and typing speed!

🎯 Who is Typre.dev for?

1. 🐣 Programming Beginners

Master Syntax Faster: Learn where special characters are on the keyboard without staring at your keys.
Build Muscle Memory: Get comfortable with real code structures in 14 programming languages before diving deep into complex projects.

2. ⚡ VS Code & IDE Power Users

Regain & Upgrade Speed: Flex your fingers and sharpen your muscle memory to keep up with your brain's pace.
Stay in the Flow State: Eliminate those subtle micro-pauses when typing tricky syntax or long method signatures.

✨ Key Features:

💻 14 Languages Supported: Practice real syntax in JavaScript, Python, C#, C++, Go, Rust, TypeScript, and more!
📊 Real-time Stats: Track your WPM (Words Per Minute), accuracy, and consistency.
🎨 Clean & Minimal UI: Zero distractions, fast loading, designed for pure focus.

🔗 Give it a try!

Check it out at https://www.typre.dev/ and let me know what you think!

I'd love to hear your feedback:

What languages or specific code snippet categories (e.g., LeetCode patterns, algorithms) should I add next?
How does your code typing WPM compare to your regular prose WPM?

Happy coding! 💻✨