Anyway, the cursor occasionally obscures the character and slows you down. Might be worth testing out a fish-eye effect as the cursor scrolls so you clearly know what you need to type.
No, I meant the cursor that's highlighting the current character. This could be my own vision problems, but the size of the text + color of the cursor + motion makes it slightly difficult to tell what character I'm supposed to type on the fly. I found myself stopping and squinting just to be sure. That's mainly why I recommended a fisheye - enlarging the current character would solve the problem, but perhaps it's not worth it for most users.
Thanks for the bug report. The next update will fix international keyboard layouts once I figure out the mess that is cross-browser, cross-language javascript key event handling:)
Thanks for the js library recommendations. I've taken a look at keymaster, and it's mostly focused around modifier keys used in shortcuts. I'm currently using google closure library, but I will need to add more key recognition and failsafes in case there is a unrecognized keyboard layout.
Not quite as important, but it seems that Caps Lock isn't being registered either (did the Rails demo and some of the constants would be rather tedious with only the shift key).
I'm using a standard Brazilian keyboard. The colon was mapped to the US layout location, but I could not type {, even though I knew the location on a US layout. Maybe because that key is a dead key here.
I would be very glad if there were an "ignore layout" option that dropped support for any layout difference, so I could type as in a US layout and at least finish the exercises.
Wouldn't it be better to have an input field and simply read what has been typed in it? It's not as if you need to have something else focused while doing it. That would eliminate all international keyboard problems in one go, even without a dedicated library.
Autocompletion is an important tool along side typing proficiency. Most of the autocomplete I've used only covers alphanumericVariableNames, so you still have to type the hard-to-reach symbol keys.
I made something similar except you can practice using any Gist you want. http://newtonapple.github.com/Gistype/#1 It still needs some work on the current cursor movement for longer Gists, but the basic functionality is there. No login required, just type. :) Note that if you have Vimium installed, you'll have to put the URL on your "excluded URLs" list.
Well done on the NoScript front. It's rare to see a site on HN that requires JS and falls back to a nice explanation of why it needs JS (Instead of just stating the fact, or worse, displaying a white page).
I didn't notice because I had scripting on at the time, but it deserves another compliment, seeing as so few websites seem to bother these days.
(even for those who think noscript browsing is not with the times any more, it's still good practice to give a decent error message / explanation instead of breaking or blanking)
You would prefer Facebook or Twitter? Or that they implement yet another authentication scheme and store their own accounts and credential database?
There's no free lunch. The OAuth providers are, on balance, pretty good at what they do and a better choice for account management at small sites. This one happened to pick Google.
> Or that they implement yet another authentication scheme and store their own accounts and credential database?
Yes, either this or openid. I don't have an account at google. I don't want an account at google. While it's a lower barrier than a facebook login, it's still enough that I'll bounce off the site when I see it.
I don't know about you, but I have a windows desktop, a windows laptop, and a macbook pro that I regularly work from in different contexts. I much prefer cloud services that store my account information, and let me log in from whatever computer I want ... local storage would remove that benefit for users like me who don't really care that they're using my google login ;)
I think github is a nice choice for a site like this, you could even do a rudimentary look through their public repositories to see what languages they generally use and give targeted examples.
This. Is. AWESOME. Let me tell you what this is useful for by telling you my story:
I'm a pretty fast typist (80-100WPM on TypeRacer, usually) and I really never put much thought into my typing, since it was good enough. But I recently started paying attention to the kinds of mistake I make on Typeracer, and realized that I have certain combinations of keys which I don't make using the "home row" of the keyboard, but rather, move my hands to make. Every time I hit one of these, I have a 50/50 chance of not getting back to the home row correctly, meaning I have a 50/50 chance of throwing off my typing.
And I am a heavy VIM user, by the way, which means I am very used to doing everything from the home row, including every navigation you can think of. I even have AutoHotKey scripts to give me vim-style navigation everywhere in windows, so I never have to move my hands.
Now with this program, I finished running an example and noticed 2 shocking things:
1. There are a lot of keys which I'm not used to typing from the homerow, which happen to show up a lot in regular Python code. For example, periods (.). And underscores. I was used to shifting my hand to type these characters. I don't notice this during every day work, since I'm actually programming, but I did notice this while playing a program specifically designed for typing.
2. At the end of the program, it gives you statistics, and I found out that I was only about 48% effective, meaning 52% of the keystrokes I made were accidents that had to be backspaced out. This is a lot. Part of it is "first time with this program" bias, but it still means I have a long way to go.
Anyway, I recommend running through this program, it will probably teach you a lot.
P.S. Just one bit of constructive criticism: the way the program presents mis-types is a little annoying, and hard to follow. I recommend doing the same as TypeRacer, that is, have the "mistaken" keystrokes be visible somewhere, so the typist is very clear on how many keys he needs to backspace out. This is much closer to how people type in the real world.
Thanks, I'm glad you found the stats useful. In my initial version, I wasn't requiring the user to correct errors. I was personally getting errors rates around 3~5% , which appear good but seemed too low for the amount of errors I feel I make. Adding the need to backspace and correct keys revealed the true cost of mistyping a key, namely the wasted keys typed before correcting and all the backspaces.
Thanks for pointing out typeracer. I will take a look at it and try to incorporate its error handling.
Hey, I agree this is awesome. I have noticed as I've optimized my workflow that I actually make a huge number of typing errors when I'm programming. Other typing programs don't test the whole set of symbols we use, so they're not as useful (and I type English considerably faster than code.)
One thing I would say is that it would be nice if it showed stats while I was typing, instead of just at the end.
I was taught in typing class that its better to skip errors and then come back and correct them when you are done. Not that I follow that advice especially often, but I wonder if it would be more helpful to do that. I didn't like during the demo that I was forced to correct the problem before continuing.
I agree. I believe the most typing classes are focused on the word processing end of things rather than programming. While waiting to correct errors afterwards can be faster for regular documents, I would absolutely never do that when programming.
Actually, I doubt it's even better for regular documents.
In the writing discipline, people will often tell you to write a first draft without correcting errors, then go back and error-correct on the second draft. But that's not about typing errors, but rather grammatic/narrative errors in your writing.
Take it from someone who averages 140 WPM and peaks at 160-170 WPM. Don't skip errors and return to them later. Do delete whole words (alt-backspace) and re-type them from the beginning. When you get really fast, almost all typing errors are transposition errors. By the time they register you are already several characters, even words, ahead. Trying to correct them character by character will throw you off.
If you use emacs, what do you think about `flyspell-auto-correct-previous-word`? It's like autocorrect, but it only happens when you invoke it and it always happens on the last misspelled word rather than the word under point.
Just in case I wasn't clear, I absolutely agree that you should force users to correct errors. It's just that the interface right now makes it harder to see how to correct the error, since you don't get visual feedback on the "wrong" characters that you've typed.
Supporting KILL and especially WERASE would be nice; I usually use one of those rather when I've made a string of errors, rather than watching and counting backspaces. And I agree with previous comments that it's hard to follow just how many backspaces are needed.
I had the same problem with not getting enough feedback on the errors I made. For example, I mistyped ")" a few times. But to correct it I need to know whether I hit the key to the left or to the right of ")" so I can move my finger accordingly. (I often type US-Dvorak on a spanish layout keyboard, so looking at the physical keys on the keyboard is pointless).
FYI I did the Symfony demo, then signed in with Google and got a 404 error. It did save my progress, but I had to re-authorize before I could get back to the list of languages.
Fantastic product, though. I see myself using this a lot. Any chance of a C# version coming along?
Yeah, that makes sense. I could foresee some cases where I was writing something documentation-y, such that it made sense to do in Word, but aimed at developers, such that I'd want to include code samples or the like.
They're completely valid brackets to use in writing. You don't tend to see them much but using different forms of brackets can add clarity to nested brackets (i.e. when you feel the urge to expand on your text in brackets [which I frequently do {and according to Wikipedia, others do too}])
Thanks so much for this bit of knowledge, I was not aware this was the grammatically accepted means of doing this. I always tried to reformulate sentences to avoid nested "expressions" due to the confusing nesting of parenthesis.
Exactly, and I'm a java programmer. For the record Sublime Text also inserts these for me. When I had to type '}' in the training program I actually had to look down at my keyboard!
Really fascinating to see my Javascript vs Python speed (the two I type the most in), JS around 45 and Python around 65. Super interested to see what the blog post shows!
The message google gives when trying to log in is really poor: "A third party service is requesting permission to access your Google Account.Please select an account that you would like to use."
What do you mean "access"? Do you mean "authenticate as"? Do you mean "go screw with my email"? I seem to remember that I sometimes see specific access requested, but this one is vague. Possibly this is the result of requesting sign in with no permissions at all.
Good question! I wanted to focus on helping users practice typing code with its often cumbersome symbols. The majority of comments are prose, comfortably near the home row, which I didn't feel deserved as much attention. Plus some comments (like the ones in the Guava projects) are longer than the code.
It doesn't appear to respect my keyboard layout - I'm using colemak (which works fine) but with UK symbols instead of US (which works everywhere else, including the HN comment box, but not in Typing.io where it wants me to type US symblos: eg " and @ are swapped).
yea, german keyboard here and it doesn't recognize my "=" ( so couldn't get past line one. Looks really cool though, I hope it gets I18lized sometime soon :)
Unfortunatelly suffering from the same problems, as soon as I type : or ( or = or anything other than normal characters, I get errors. :( Cool typing experience other than that!
Same here. I'm using swedish layout, and it could not recognize semicolon
It wasn't even enough to press the corresponding button where semicolon is placed on English layout, I had to actually switch keyboard-layout and then press the correct button to get past it.
I can't type underscore on my "British" layout MBP keyboard.
I wrote a typing tutor a while ago and this is a somewhat common pitfall, to manually handle characters by pulling key codes. Instead you should let the O/S tell you which character was typed (and also check key codes, for things like backspace) which then handles different layouts / locales etc.
Edit: Ok, it works in Chrome - so it's not working for me in Firefox 14.0.1 on OS X Lion.
Now that I can use it, I love it, but I have one request - I'd like to be able to go back and see my stats, please!
strange. i have no problems whatsoever regarding keyboard layout. and i am using an obscure one. is this os-dependent in a way? (i'm just curious and want to understand the problem)
Chrome on Windows 7 64bit does what I explained above. Chromium on Arch 64bit works fine.
In windows, I made my own keyboard layout in Microsoft Keyboard Layout Creator (so that I could switch the symbols to UK but also so I could add some dead keys to AltGr for various unicode symbols). I did "fix" the VK codes for the alphabethic characters, but I guess the symbols are still using whatever the key is assigned by default and I guess JS (at least in Chrome on Windows 7) checks the key code reported by the OS, rather than the value reported by the OS.
On Arch I use the GB colemak layout that came with the distro and I guess it sets all the key codes correctly to where all the symbols are...
Same problem with fr_FR on an azerty keyboard (Ubuntu or Windows 7). For example I can only type </> by typing <:> instead of the correct <shift> + <:>. For a <$> I would type <shift> + <'>.
This seems partially fixed. Though I cannot find a way to type <^>. On my azerty keyboard, I should type <^>+<^>, or on a querty one, simply <shift>+<6>, but neither works.
Can't type underscore at all, have to use the numpad to type dashes. If I have the layout set to US-International, I have to type alt-shift-doublequote to get "; it won't let me type shift-doublequote and then the next character (or space) like normal. CapsLock doesn't seem to work, so for some of the identifiers in the C++ example I need to hold down shift for a half-dozen letters in a row.
Things I particularly liked: not making me type the indentation (because any sane editor will do that for me), allowing backspace, providing examples in numerous languages.
Things that bugged me (and which only become an issue because the example otherwise proves sufficiently realistic that any remaining differences feel awkward, like an uncanny valley for typing code): showing faded-out code I'm not expected to type and skipping it, not allowing any navigation other than backspace (I frequently "correct" errors by ignoring them until I finish typing what I wanted to type and then going back and correcting them, which means the "collaterally typed before backspacing" characters are not wasted keystrokes), not allowing copy-paste (particularly important for lines like #include or import), not showing incorrect characters I've typed.
Things you probably can't do anything about: typing a file in a more natural order than top-to-bottom (the Haskell exercise starts with a giant export list, and the Python exercise starts with an import list). Normally, you'll extend those as you go, rather than typing them all at once.
Thanks for the feedback and criticism. I decided to keep error correct close to the error instead of allowing navigation to simplify navigation logic. Mimicking normal editing may have still felt stilted if I didn't support the mousing around or keyboard shortcuts programmers are used to with their editors.
I debated whether to require typing the import/include boilerplate at the start of code. As you noted, this usually done piecemeal and often inserted by an ide. I decided to include it as it's part of the code and looked for code samples that didn't go overboard. For the Java and Scala examples, I collapsed imports into wildcards imports.
With all of the emphasis on learning how to code I think this is really useful. The insight I really like is that simply learning to type in this weird way is a big part of being an efficient programmer.
Maybe when codeacademy students get frustrated they could spend a few minutes doing this.
Really nice.
It felt like shadow-boxing the creation of a language. What I mean is that the ability to type what giants typed before me in such an easy and accessible way made it worthwhile. I'll do it again.
223 comments
[ 2.1 ms ] story [ 205 ms ] threadAnyway, the cursor occasionally obscures the character and slows you down. Might be worth testing out a fish-eye effect as the cursor scrolls so you clearly know what you need to type.
Beautiful app though!
https://github.com/madrobby/keymaster
https://github.com/ccampbell/mousetrap
I would be very glad if there were an "ignore layout" option that dropped support for any layout difference, so I could type as in a US layout and at least finish the exercises.
ETA: looks fine in Chrome though, and I really like this idea :)
:)
I just checked my comment history and about 50% of my comments have been related to this issue. This is the first one that is complimentary.
(even for those who think noscript browsing is not with the times any more, it's still good practice to give a decent error message / explanation instead of breaking or blanking)
There's no free lunch. The OAuth providers are, on balance, pretty good at what they do and a better choice for account management at small sites. This one happened to pick Google.
Yes, either this or openid. I don't have an account at google. I don't want an account at google. While it's a lower barrier than a facebook login, it's still enough that I'll bounce off the site when I see it.
Of course there is. No sign-in at all.
My question should have been: Why do I have to sign in?
Presumably they are storing that information in their back-end somewhere.
I choose Google because I didn't want to worry about email verification, salting, key derivation functions, etc.
I'm a pretty fast typist (80-100WPM on TypeRacer, usually) and I really never put much thought into my typing, since it was good enough. But I recently started paying attention to the kinds of mistake I make on Typeracer, and realized that I have certain combinations of keys which I don't make using the "home row" of the keyboard, but rather, move my hands to make. Every time I hit one of these, I have a 50/50 chance of not getting back to the home row correctly, meaning I have a 50/50 chance of throwing off my typing.
And I am a heavy VIM user, by the way, which means I am very used to doing everything from the home row, including every navigation you can think of. I even have AutoHotKey scripts to give me vim-style navigation everywhere in windows, so I never have to move my hands.
Now with this program, I finished running an example and noticed 2 shocking things:
1. There are a lot of keys which I'm not used to typing from the homerow, which happen to show up a lot in regular Python code. For example, periods (.). And underscores. I was used to shifting my hand to type these characters. I don't notice this during every day work, since I'm actually programming, but I did notice this while playing a program specifically designed for typing.
2. At the end of the program, it gives you statistics, and I found out that I was only about 48% effective, meaning 52% of the keystrokes I made were accidents that had to be backspaced out. This is a lot. Part of it is "first time with this program" bias, but it still means I have a long way to go.
Anyway, I recommend running through this program, it will probably teach you a lot.
P.S. Just one bit of constructive criticism: the way the program presents mis-types is a little annoying, and hard to follow. I recommend doing the same as TypeRacer, that is, have the "mistaken" keystrokes be visible somewhere, so the typist is very clear on how many keys he needs to backspace out. This is much closer to how people type in the real world.
Thanks for pointing out typeracer. I will take a look at it and try to incorporate its error handling.
One thing I would say is that it would be nice if it showed stats while I was typing, instead of just at the end.
In the writing discipline, people will often tell you to write a first draft without correcting errors, then go back and error-correct on the second draft. But that's not about typing errors, but rather grammatic/narrative errors in your writing.
i use vim: so please support all vim movements. and the surround plugin. and while at it: my custom templating plugin as well :D.
Fantastic product, though. I see myself using this a lot. Any chance of a C# version coming along?
Does anyone know when this feature was implemented in Word?
Since it's being written on purpose as a 'product spec' like doc, company standards dictate that it be written in Word (unfortunately).
Someone else has also recommended https://github.com/MarcWeber/autohotkey_viper , which seems to be more feature filled than the others, but I haven't tried it out.
It is interesting. I wonder if I can learn to make fewer typos.
EDIT: also '_', as sp332 commented. Firefox on OS X.
I have a swiss german keyboard and I can't get past the first _'_ character. I'm using XP and Firefox. Otherwise a really neat idea.
What do you mean "access"? Do you mean "authenticate as"? Do you mean "go screw with my email"? I seem to remember that I sometimes see specific access requested, but this one is vague. Possibly this is the result of requesting sign in with no permissions at all.
but valid point nevertheless.
KeyboardJS has a basic locales mapping: https://github.com/RobertWHurst/KeyboardJS , Unfortunately it appears to only have en_US at the momment though
It wasn't even enough to press the corresponding button where semicolon is placed on English layout, I had to actually switch keyboard-layout and then press the correct button to get past it.
I wrote a typing tutor a while ago and this is a somewhat common pitfall, to manually handle characters by pulling key codes. Instead you should let the O/S tell you which character was typed (and also check key codes, for things like backspace) which then handles different layouts / locales etc.
Edit: Ok, it works in Chrome - so it's not working for me in Firefox 14.0.1 on OS X Lion.
Now that I can use it, I love it, but I have one request - I'd like to be able to go back and see my stats, please!
In windows, I made my own keyboard layout in Microsoft Keyboard Layout Creator (so that I could switch the symbols to UK but also so I could add some dead keys to AltGr for various unicode symbols). I did "fix" the VK codes for the alphabethic characters, but I guess the symbols are still using whatever the key is assigned by default and I guess JS (at least in Chrome on Windows 7) checks the key code reported by the OS, rather than the value reported by the OS.
On Arch I use the GB colemak layout that came with the distro and I guess it sets all the key codes correctly to where all the symbols are...
It occurs both in Chrome and Firefox.
This on Firefox 14, Chromium 18, Opera 12, for Linux Mint.
Otherwise, this is great!
EDIT: Does it read the key-code, instead of the character? Is it not possible to listen for the character input?
Things I particularly liked: not making me type the indentation (because any sane editor will do that for me), allowing backspace, providing examples in numerous languages.
Things that bugged me (and which only become an issue because the example otherwise proves sufficiently realistic that any remaining differences feel awkward, like an uncanny valley for typing code): showing faded-out code I'm not expected to type and skipping it, not allowing any navigation other than backspace (I frequently "correct" errors by ignoring them until I finish typing what I wanted to type and then going back and correcting them, which means the "collaterally typed before backspacing" characters are not wasted keystrokes), not allowing copy-paste (particularly important for lines like #include or import), not showing incorrect characters I've typed.
Things you probably can't do anything about: typing a file in a more natural order than top-to-bottom (the Haskell exercise starts with a giant export list, and the Python exercise starts with an import list). Normally, you'll extend those as you go, rather than typing them all at once.
I debated whether to require typing the import/include boilerplate at the start of code. As you noted, this usually done piecemeal and often inserted by an ide. I decided to include it as it's part of the code and looked for code samples that didn't go overboard. For the Java and Scala examples, I collapsed imports into wildcards imports.
recruiting coders?
optimizing keyboard layouts?
optimizing character usage for new language or framework development?
advertising open source projects?
Maybe when codeacademy students get frustrated they could spend a few minutes doing this.
Nice work!