I’m going to replicate some technical posts I made on tumblr on here so they don’t get lost in the chaos of my tumblr account. This one is the first:
How the shortcut-armaggedom started:
So, as you may know, my main area of work for quite some time has been the new tumblr web editor. The editor has been ‘feature complete’ for quite a while, so the last few months has been all about removing bugs and polishing it. We have prioritized the bugs that gets more reports to be fixed first, and we have been doing a lot of work around them, so in the last couple of months we have been already paying attention to things that get a really low number of complains (we are talking about single-digit per week). One of those things was“Ctrl+Z doesn’t work in the new editor”. Not “it works odd” or “sometimes it deletes my entire post” or “it crashes the editor when I try to ctrl+z”. Those were things we fixed, because we could reproduce the error and when you can see it, you can fix it. This case was “ctrl+z doesn’t do anything”. Which… you know, I tried every browser, every OS, primary blogs, secondary blogs, every kind of variation I could think of, and nothing, ctrl+z always worked for me. Until one day I posted about about the editor on my blog here, and a very nice person I won’t @ here for privacy matters commented it didn’t work for them at all. So I DMed them and started talking about what was going on, trying to figure what was different between their setup and mine, and why it didn’t work for them and it did for me. We talked for a while until something clicked in my head. It was a weekday, morning. My morning. I’m in Europe. The changes that someone from the Americas or Asia is online on a weekday at my noon are … small. So I asked them where they were from. France. AZERTY. Fuck.
A little technical detour:
Now, I need to explain how browsers and shortcuts work. It will be technical but not long, bear with me. Long story short, if you are programming a site, and you want to use a shortcut for anything, you tell the browser “hey, when you detect a key press, run this program”. So you write some code that gets ran every time the user press a key while on your web. The browser gives that program some info about the key being pressed, so you can decide if you want to do something or not. Let’s say that you have a site and you want to play a goat bleating every time the user press ‘e’. So you tell the browser “hey, run this when there’s a key press”, and then in your program, you read which key was pressed, and if it’s not ‘e’, you just do nothing, and if it’s ‘e’, you play “goat.mp3”. The browser gives you a lot of info about what’s going on, but what’s interesting in this case, it’s to detect which key is the one that’s being pressed, and for that, it gives you two different values: ‘Code‘ and ‘Key‘.’Key‘ returns whatever the value of that key press is. In our example, it would be key=’e’. But if the user has CapsLock on, it would be key=’E’, and if they are in a european keyboard and they are also pressing alt-gr, it would be key=’€’. ‘Code‘, on the other side, gives you a code representing the position of the pressed key. In this case, it would be ‘KeyE‘. And if CapsLock is on? still ‘KeyE‘. If AltGr is pressed? yup, also ‘KeyE‘. So when the Tumblr team was programming the new version of the dashboard, 3-4 years ago, for simplicity sake, they decided that our shortcuts would use “code” as our way to detect which key has been pressed. At the end of the day, we don’t care if Caps is on or not, right? just which key you pressed. A good and rational decision based in limited information, that we have kept for a long time, still based on that limited information, until the complete view exploded in our faces 🙂
The mess:
See, the thing about us developers, is that we know a lot of stuff out of memory, but unless you have been bitten in the ass by a particularly nasty bug, you rarely know the W3C specifications by memory. The W3C is the organism that define the standards that browsers (and your code) needs to follow to be “internet ready”, in a way. They define the rules. The rules are… long. Pages and pages and pages of
standards. You really don’t need to look at them almost ever. And when you do, it’s because something is biting you in the ass hard enough to need to become very familiar with a long technical doc to get rid of it.See where I said “Code gives you a code representing the position of the pressed key” up there? Yeah, that’s what I knew. That’s what most of us knew. But … where that code comes from? where does it gets defined which key returns which code? Oh, yeah, in a W3C doc. This is what it says about “code”:
Hmm, ok, that doesn’t clear much. Let’s try to find something on Mozilla’s web developement docs:
What? FUCKING WHAT?? The… the fuckers are returning the value of the key IN A QWERTY ENGLISH KEYBOARD? No matter which keyboard layout, no matter which language, you are using?? WHAT?!?!?Dear reader, the value of the pressed key you get is the code of which key would be in that position in a english QWERTY standard keyboard. And you know what they don’t use in France? A QWERTY standard keyboard. They use AZERTY. The key “Z” is the same position of where “W” is in regular english keyboards.
Dear reader, the value of the pressed key you get is the code of which key would be in that position in a english QWERTY standard keyboard. And you know what they don’t use in France? A QWERTY standard keyboard. They use AZERTY. The key “Z” is the same position of where “W” is in regular english keyboards.
So, when someone from France was trying to do “ctrl+Z” in the tumblr editor, our shortcut sytem were informing us that they were pressing “ctrl+W” instead. Obviously, that didn’t do anything. Once I realized what’s going on, the ctrl+Z issue was easy to fix. But… the implications were deep. Very deep. Very few non-english-speaking countries in the world use “Standard english QWERTY” keyboards. Pretty much for every single language or keyboard layout variation, the symbols are in different positions. Some of them have extra keys. Some of them change the position of some letters. And on tumblr web, every single one of them were being treated as if they were QWERTY english keyboards.Long story short, the tumblr web shortcuts only worked fully for anglo-speakers using normative keyboards (if you used DVORAK or any other layout different than QWERTY, you were fucked even if it was the english version). For everyone else? Some shortcuts would work, others didn’t. For example, for myself (who use a QWERTY spanish keyboard) the ? shortcut to focus on the search box never worked, because ? is placed in an entirely different key in the spanish layout. Everything was broken for half of our users. All good uh?
The bumpy road to a solution:
We started talking about it. I’ve been fighting our shortcut system for a long time, and at this point I’m probably the one with more experience with it, so I started working on getting the mess fixed. The road to make the shortcuts work for (almost) everyone was clear: Just stop using ‘code’, start reading ‘key’. It needs some extra code, given the different values, but it’s what it’s, ‘code’ is not really reliable.
So I moved every shortcut to work with ‘key’ instead. I was happy with the change, a lot of smallish adjustments, but not a big deal. Then my coworkers starting to test my work. A bunch of shortcuts just didn’t work for them anymore. What the fuck?You see, most of the people working for Automattic use macbooks. I’m a weirdo and use Linux. It turns out that macbooks doesn’t really differentiate between left and right Alt keys. You know how in windows (and linux) you have “alt” on the left and “alt gr” on the right? Apple doesn’t do that. You know how “alt” is used mostly for shortcuts, and “alt-gr” is used for characters like ‘€’ that need altgr+key to be printed? Apple just do that with both of the Alt keys.So every time I pressed “alt+r” to test the reblog shortcut on my laptop, my code was receiving “{ key: ‘r’, altKey: true }“, but when someone on a macbook tested it, the code received “{ key: ‘¶’, altKey: true }“. Fuck the fuck. Fuck. So if we wanted to support shortcuts on apple products and non-english keyboards at the same time, we needed to get rid of ‘Alt’.Now, using “ctrl+whatever” is a difficult choice. It turns out that a lot of keys, when combined with ctrl or ctrl+shift, are already in use by the browser or OS native shortcuts. To make it funnier, every browser and every different OS language version may have different shorcuts for the same thing. So finding a good alternative to ‘alt+r’ wasn’t an easy task.Then, I suggested to get rid of ‘alt’ entirely. “R” could be the shorcut for reblogs. “Q” for queuing a post, etc. It made sense, it was similar to the previous version, it was simpler and nicer. So we went with it.
The ghosts of past keystrokes:
A week passed. Now every shortcut worked for almost everyone, which was great. But … our support folks started to get reports of phantom reblogs. People were seeing reblogged posts in their blogs they swore they haven’t done themselves.Obviously this is a huge deal. I started to look into it, in case my code changes were making something to reblog things automatically behind the scenes. But friends, it was much dumber than that.It looks that when you make shortcuts too simple and easy to press… accidental key presses thrive. People may have their hands on the keyboard and press ‘q’ without realizing, so a post is queued and surprises them a few hours after. Cats may jump on your keyboard and suddenly you have reblogged 5 posts and queued another three. You may want to use one of the native shortcuts of your browser, let’s say, ctrl+R to reload, but you release the ctrl key a fraction of a second before you release R, so now the browser has detected a R press and have reblogged whatever you had focused just before reload the site. Etc.It’s really not a technical issue. The system is behaving as expected. But we are humans and … well, those things happens. It can’t be avoided. And it needs to be taken into account. And, honestly, if you inadvertently press “j” while browsing your dash and the view jumps to the next post is not a big deal. If you reblog something without realizing? It kind of is. So, well, simplifying the reblog and queue shortcuts so much? Not the best idea.
Where we are now:
After talking about it, we are going to change the reblog & queue shortcuts back again. It’s pretty crappy to change them again so soon after changing them just two weeks ago, but I think it’s better to admit there were unintended side-effects what we didn’t foresee and move forward quick than trying to insist on something that’s not working great.@april, who is a much smarter person than I am, realized that we can use ‘shift+R/Q’ and don’t collide with any browser or OS shortcuts: They avoid using “shift” for shortcuts because, well, you need to be able to write uppercase characters without triggering a shortcut, right? But in our case, since those shortcuts only work when there’s no editable element in focus, we can use them! So I’m literally working on doing that change and probably tomorrow we will have new shortcuts for reblogging and queuing and we finally will have a shortcuts system that works for everyone and doesn’t generate ghost reblogs in exchange.So that’s what has been happening and the reason for all the changes on this area. So if you are a developer: Run away from keyboard shorcuts. Just Say No. Save yourself.
