Keyboard Command Craziness

April 10, 2013

Heads up! This blog post hasn't been updated in over 2 years. CodePen is an ever changing place, so if this post references features, you're probably better off checking the docs. Get in touch with support if you have further questions.

The most common complaint we get about CodePen is how we override the keyboard commands for some functions. Most notably, ⌘-1, ⌘-2, and ⌘-3. If you have the CodePen editor open and that tab active, those keyboard commands will expand the HTML, CSS, or JS editor respectively rather than change active tabs, as many browsers do by default.

Having keyboard commands for these actions is important to us (literally, we use it ourselves all the time). So we want to find the best solution we can here.

Modifier Key Required

These commands are often fired when you are literally inside of a textarea. We can't bind commands to the keys alone. You need those to type! We also can't use the option key, because most of the useful keys produce special characters in combination with the option key. 1, 2, 3 produce ¡, ™, £.

So we're left with Command or Control.

Command vs. Control

Right now, we use Command for Macs (most common key for this kind of thing). There is no command key on PCs, so we use Control (their most common key for this kind of thing).

We could switch to Control for both, which solves the problem on Macs, but the problem is still there for PCs.

Solution?

This blog post is a call out for ideas from you on how you would envision this being handled.

Do you think we should do anything?
Should we make the simple control-for-both switch and fix Macs?
Would you like to see a simple preference to turn off keyboard commands?
Should we allow you to re-map keyboard commands to your own preferences?
Are there better default mappings you can imagine that would be less of a conflict?

Update

We're going to remove the ⌘-1, ⌘-2, and ⌘-3 keyboard commands for now. Instead, in the editor, there will be an icon indicating expansion that you can click to expand the editors.

Adding shift to the command was super close to perfect, except for that ⌘-Shift-3 on Macs is for taking as screenshot and cannot be overridden.

Adding an option to disable the commands was a possibility, but that doesn't help anonymous users or logged in users who just don't know about it. We'd probably continue annoying more people than we would be helping.

We are all for revisiting this from time to time as the app evolves. Keyboard commands are a hard thing to get right on the web, especially in apps that need modifier keys.