Blog

Choosing keyboard shortcuts for websites

Keyboard shortcuts give users fast methods to interact with an application. Native apps like Microsoft Word have shortcuts for nearly every editor command. This lets the user focus on authoring text rather than shifting their focus to navigating an involved File menu.

If the web is the application platform of the future, websites should also offer keyboard shortcuts for efficiency. However, you can’t pick just any shortcuts.

For example, a few weeks ago a bug was reported in ProseMirror, an in-browser text editor. Normally when a Mac user is editing text, pressing Option+Right moves the cursor right by one word. Pressing this shortcut in ProseMirror was not doing this, because Option+Right was internally bound to custom, two-step shortcuts. For example, pressing Option+Right then * in ProseMirror would wrap the text selection in a bullet list. Oh crap!

This bug has been fixed ūüéČ but gives you a feel for the rocky terrain of keyboard shortcuts on the web.

Use familiar shortcuts

Google, Twitter and Facebook provide some common shortcuts. It’s likely your users will try these shortcuts on your site too.

If your website is a list of items (like emails in GMail or tweets in Twitter), pressing Up and Down arrow may navigate the user’s focus through the list. The browser default of scrolling up and down the screen is ignored, replaced by a behavior similar to the default in spirit but with more awareness of user context. The keys J and K often navigate up and down as well, which is a shortcut borrowed from the Vim text editor.

The Enter key may expand the view of a selected item (like opening an email).

The / key (forward slash) may focus the user’s text cursor in the site search (Also from Vim). Update: Eevee told me the / key opens Find in Page in Firefox, so keep that in mind while deciding whether to use this shortcut.

Make Shortcuts Discoverable

If your website offers keyboard shortcuts, your users will want to know what they are. Provide a link somewhere in your application to see a list of them, like under a menu. Users should not have to try key combinations to find shortcuts like a game of bobbing for apples. Shortcuts should be discoverable.

Twitter.com’s keyboard shortcut help modal

Pressing the ? key (question mark) is a common shortcut to bring up a list of available shortcuts.

Keep in mind that screen readers used by those with impaired vision override almost every single key shortcut. If a shortcut is critical to navigate your website consider placing them under modifier keys.

Using modifier keys

You may want to create multi-key shortcuts that include modifier keys (e.g. the Control, Command or Alt key).

If your website includes text input fields, you may want shortcuts on modifier key combinations so can trigger a shortcut while focused in an input field. If your website has a save command, you may want the familiar shortcut Command+S/Control+S to trigger this save command, rather than the browser default of saving the HTML of the current webpage to your computer.

A user’s operating system and web browser have built-in shortcuts which are bound to various modifier and key combinations. Here is a list of operating system and browser keyboard shortcuts. Are your OS/browser shortcuts not listed? Let me know and I’ll give you edit access.

With this list you can make informed decisions about what keyboard shortcuts to choose.

Most operating system behaviors cannot be prevented. e.g. Pressing Command+Tab on a Mac to switch between apps, and can’t be disabled.

Browsers also limit what shortcuts can be disabled. Command+1 in Mac Chrome switches the user to the first tab. This can be overridden, but not in Safari. See what shortcuts can be disabled in your browser in this demo, which tries to prevent the default behavior when any key is pressede.

Respect user intent

It is up to you to decide what shortcuts to offer users, and whether to override browser shortcuts.

Lea Verou makes an interesting case for overriding browser defaults. Her argument is that if your websites has tabs, overriding the browser shortcuts for switching between tabs is useful, and avoids hard-to-remember shortcuts like Control+Alt+1. She says,

the browser environment is merely a host, like your OS. The focus is the web app. When you’re working in a web app and you press a keyboard shortcut, chances are you’re looking to interact with that app, not with the browser Chrome.

These choices are up to you, but they are user experience questions which I don’t have answers for. Make informed decisions and consider what the user intends to do when they press a shortcut, and how your application reacts to it.

There are some shortcuts that should just work. Take the ProseMirror bug I mentioned before. When a Mac user is entering text, pressing Option+Right moves their text cursor right by one word. I’d expect this to work when I’m typing into a text field on a website, so a shortcut shouldn’t override it while I’m typing.

Expect edge-cases in international contexts

Operating systems around the world have made hard choices in the last 30 years to make the QWERTY keyboard work across different languages. This can lead to unexpected behavior, for example Polish users could not enter the Ňö character into Medium‚Äôs editor, and saw their document getting saved instead. Medium fixed this bug ūüéČ and if you get a bug like this, you should respect user intent too!

Now close this tab in your browser (Command+W/Control+W) and go add shortcuts to your website!

How to install Linux Mint on a PC

Here are the steps I took to install Linux Mint on a PC (ThinkPad X200T), with assistance from my MacBook.

Note: You’ll need a USB stick.

Get a Linux Mint disk image

First, get a Linux Mint disk image, which includes a bootable version of the operating system and the OS installer.

You can¬†get¬†a disk image on the Linux Mint download page. Here you’ll decide which desktop environment¬†you want to use. I didn’t think about this too much and went with Cinnamon.¬†You’ll also have to figure out¬†whether¬†your PC runs¬†a¬†32 or 64 bit processor.

The disk image is about 1.5 gigabytes, so downloading in the browser may take a while. I used the torrent download and got it in about 5 minutes.

You should now have a disk image file on your computer that resembles the filename¬†“linuxmint-18-cinnamon-64bit.iso”. The exact name will¬†depend on the version number, desktop environment and PC processor architecture.

Mount the disk image on the USB stick

Plug the USB stick into your computer.¬†First we’ll format the drive so¬†a PC¬†can read it. On a Mac open¬†Applications > Utilities > Disk Utility. Select the USB drive, and click the Erase¬†button. Under Format, select MS-DOS (FAT), and then click Erase.

To¬†mount¬†the ISO image on the USB stick, I use¬†UNetbootin. Download the application¬†and¬†open it.¬†A dialog box will pop up saying”osascript wants to make changes”¬†and ask¬†for an¬†administrator password.¬†Fill it out and continue.

UNetbootin can download a Linux distribution itself, or you can supply a disk image to mount. Since we downloaded one, select the second option and show it where the disk image file is on your computer.

Make sure the right USB drive is selected for mounting, and click OK. The mount process takes about 3 minutes. Afterwards, you can look at the content of the USB drive and see all the files that make up the Linux Mint trial/installer disk.

You can eject the USB and put your Mac away, we won’t need it anymore.

Give USB drive priority boot order

You may need to configure the PC’s BIOS to¬†boot from a¬†USB drive before the hard drive. Otherwise, the system ignores¬†the USB¬†and boots¬†from the¬†hard drive. On my ThinkPad X200T, I press the ThinkVintage button at startup¬†and enter the BIOS¬†setup utility. Then select Startup > Boot, and move the¬†USB drives¬†to the top of boot priority order.

Now, whenever I insert a bootable USB stick, it will load first.

Boot Linux Mint from USB

Plug the USB stick into your PC and restart the computer.

A UNetbootin boot menu will display. Select Start Linux Mint, which boots the OS. This hasn’t¬†installed anything yet,¬†the¬†operating system¬†is¬†just booting from the USB.¬†You¬†can¬†poke around¬†this “trial mode” of the system¬†and see if this is what you really want.

Install Linux Mint

On the Desktop of the booted-from-USB Linux Mint, click the Install Linux Mint icon. This opens an install wizard which should be straight-forward. I check off the¬†“Install third-party software for graphics etc.” I select “Erase disk and install Linux Mint” because it’s¬†all I want on this computer.

Let the installer run. Afterwards, reboot the computer, remove the USB and voila! You are a Linux user. Have fun!

A few extra niceties

Install drivers and multimedia codecs

When you start Linux Mint, a Welcome Screen opens that includes links to install drivers and multimedia codecs. Do both of these tasks if you want to have a good time.

Install Chrome

Install and use Chrome on Linux if you ever want to watch Netflix and chill again.

Disable annoying system beeps

My computer woke me up at 4am making a horrifying sound because it was low on battery. I have a hard time just watching scary movies so this was terrifying.

Disabling the beeps will depend on what computer and BIOS you have. On my ThinkPad X200T, I press the ThinkVintage button at startup and enter the BIOS setup utility. Then select Config > Beep and Alarm and disable all.

Don’t dual-boot Linux on your Mac

I have configured my Mac to dual-boot with Linux. When I turn my computer on I can choose to enter the Linux operating system or Mac OS X.

Having gone through this process, I would now suggest against it.

Most folks who run linux on a desktop only run the one operating system on the computer and don’t dual-boot. If you configure a Mac for dual-boot, you are the exceptional¬†use-case in the Linux community.

If¬†you want to learn to ride a bike, would you buy a pennyfarthing? I’d guess not. Most likely you would get the common bike¬†design of today, the¬†safety bicycle.¬†If you ride a pennyfarthing in 2016,¬†you are an exceptional use-case.¬†Your friends¬†don’t ride pennyfarthings so you can’t share riding tips with them and benefit from theirs. Bike shops don’t have the know-how to repair it.¬†Drivers may not¬†understand how to drive safely around your contraption of antiquity.

When you are the exceptional use-case, you don’t benefit¬†from network effect. When you are the common use-case,¬†answers to your¬†problems¬†are¬†quick¬†to find.

Here is what sucks:

I¬†just bought a ThinkPad X200,¬†which is a $150 laptop that can run¬†100%¬†free software. I’ll install GNU-linux on it.¬†The X200 with Libreboot pre-installed is one of three laptops that are¬†certified by the Free Software Foundation (basically Richard Stallman). More soon!

Update (August 4th 2016): Turns out installing¬†Libreboot is very hard. I’ll stick with an un-free BIOS¬†until I’ve¬†met someone else who’s installed it.

Pad, an online note-taking app

I¬†like¬†writing and I mainly do it in private. Just in the month of July I’ve created 83 “notes” in my Evernote account, which I use¬†in a lot of different contexts. I¬†note-take¬†in¬†meetings at work, I¬†write¬†Dear Diary-style¬†personal entries, and throw¬†notable educational videos¬†(the note here was “always get the bigger pizza?”). Evernote has basically been¬†my life’s¬†junk drawer.

There’s two main things Evernote does well:¬†It syncs¬†all my content to *~the cloud~* so I can access it at work, home¬†and the in-between,¬†and it¬†works while I’m in the subway, syncing¬†when I have¬†service again.

This has been a¬†lovely relationship with an app until Evernote decided to change their subscription model, limiting¬†users that don’t pay (including yours truly) to use on two devices. ūüėĎ

I will leave the Evernote¬†for¬†Pad, an in-browser note editor I made earlier this week.¬†It is a¬†work in progress (you can’t even delete a “note” yet!), but it is marginally usable now.¬†Try it out, but don’t count on it until I release version¬†1.0.

Pad is¬†free now and will always be free for any use. It’s free as in free software available on Github,¬†as well as free as in you don’t owe me anything.

I’m going to steal two things from Evernote, their best features:¬†syncing to the cloud and offline use.

Currently data is stored in your web browser, indefinitely, unless you clear¬†your “Local Storage.” I will never get access to your data since it is “local.” There’s no remote server that Pad relies on for saving your data. We can try to save¬†data to arbitrary data stores (e.g. Amazon S3 or in your Github Gists).¬†If your data is in a private place in¬†*~the cloud~*¬†then¬†you could use Pad on any of your devices ūüėé

Pad could work offline too, through the magic of which Progressive Web Apps.

How OJ won

I binge-watched the entirety of ESPN’s new documentary series on O.J. Simpson¬†over Fourth of July weekend. It is eight hours long and it is stunning.

As an 8 year-old during¬†the¬†O.J. murder trial in 1994-95, I had no idea what was going on. My attention was probably on beating¬†Super Metroid. I didn’t know¬†O.J.¬†held the single season rushing yards record, that he was a major black icon of the 70s and 80s, or the details of his¬†trial,¬†so this is¬†a good history lesson.

The central¬†tension in the murder case is that¬†the¬†evidence that proved he was guilty beyond any doubt, yet he is acquitted. They found¬†Nicole Simpson’s blood in O.J.’s white bronco.¬†O.J. owned the shoes that matched bloody footprints¬†at the crime scene, of which there were only 200 pairs made. How could the jury have acquitted him?

Other factors made for an involved case. O.J. assembled a legal “Dream Team” which included Johnny Cochran and Robert¬†Kardashian, costing him¬†$50k a day. During the trial, the D.A. was clever¬†enough¬†to¬†have¬†O.J. to try on the bloody glove found in his¬†backyard. It¬†didn’t fit. The¬†cop who found that¬†bloody glove? He turned out to be a racist¬†bigot, leading the public¬†to suspect a¬†conspiracy¬†with¬†racial¬†motivations were behind the case.

It seems like a poorly executed¬†prosecution on top of sloppy police work.¬†But then you hear one of the juror’s from the predominantly black jury explain her decision: this was her own payback for Rodney King, a victim of police brutality in L.A. a few years earlier. Cops get off all the time for using excessive force against and killing¬†innocent black persons. She wanted to make sure that¬†a¬†black man would win in the¬†trial of the century. As a member of a group endlessly oppressed by this¬†criminal justice system, why¬†would she vote any other way?

Reactions after an Intro to WordPress Workshop

Today I led a workshop to introduce folks to WordPress. Here are some quick reactions I had.

I installed ten fresh WordPresses on a single shared hosting plan for users to going through¬†exercises¬†in the admin interface with me in realtime.¬†Either the server could not deal with 20 concurrent users or the local network couldn’t.¬†Hosting is still hard¬†ūüė§

We often use “WordPress.com vs. WordPress.org” to describe the difference between running a site on¬†WordPress.com¬†and the¬†limits¬†that¬†imposes¬†vs. running a site with a more liberal web host. I get¬†the spirit of the comparison, but it’s confusing. For example, managed WP¬†hosts may blacklist plugins, so WP.com is not the only one that has a “walled¬†garden.”¬†Some other metaphor¬†like a “spectrum of control” is probably more to the point, with¬†WordPress.com being at one end, owning your own datacenter at the other, and most¬†web hosts¬†in the middle.

I have no clue¬†what the¬†difference is between Categories and Tags. On¬†the version 2.3 page¬†(when¬†Tags were introduced) “Web” is an example category and “web development on windows” is a tag.¬†The¬†distinction I glean from this¬†is categories are¬†to be¬†typed uppercase and tags lowercase. Suffice to say I’ll be removing the Tags feature from¬†my blog.

I found it intensely useful to take off my developer hat for a morning and get into the mindset of a user of software I work on, and see the inventive solutions of users without writing a line code.

Super Emoji Plus+ is now in beta

The other night I installed WordPress.¬†While writing¬†my first blog post¬†I wanted¬†to put an¬†emoji in the content.¬†I opened a new browser tab and¬†googled “100 emoji” just to copy and paste a character, like a¬†schlub. This process has got to end.

I’m pleased announce the release of my new WordPress plugin¬†Super Emoji Plus+, which¬†makes it easy to insert emoji into your WordPress content. ūüėé

After you install, click the Emoji button in the Editor to bring up a contextual menu to select your emoji. You can type to search for an emoji¬†(it¬†uses Emoji annotations for the search completion), and navigate results with the arrow keys.¬†Click on a character or hit Enter to insert it into the¬†content, and¬†press escape when you’re done.

Or, while you’re writing in the editor, type¬†a colon and a word for an emoji (like “:airplane”). The menu with search results will come up inline.

The plugin is in beta, so if you have any problems¬†let me know on Github!¬†ūüíĀ

Obligatory New Blog Statement of Intention

Oh man I just fired up a new web log. That means one thing: a statement of my plans and inspirations for this here digital notebook must be set. Unlike New Years resolutions I will actually keep to these tenets. So here we go:

  1. Keep it¬†ūüíĮ
  2. Blog Every Day‚ĄĘ
  3. Always be on the lookout for Hot New Widgets to keep my readers interested and engaged