Hire a web Developer and Designer to upgrade and boost your online presence with cutting edge Technologies

Tuesday, November 29, 2011

The developer's guide to RSI prevention

The developer's guide to RSI prevention

Web developer doesn't use a mouse nor any other form of pointing device. Here we give an overview of the day-to-day tools she does use, without taking her hands off of the keyboard

Most of time, I don't use a mouse. No, I don't use a trackpad either. No, nor a trackball or tablet. I literally use my computer all day, every day, in my job as a web development consultant, without taking my hands off the external keyboard (this isn't strictly true. I lean across my desk to my laptop glidepad in order to interact with Skype and to see the tooltip on an xkcd cartoon).
I didn't throw away my mouse out of choice, but I have acquired a repetitive strain injury which doesn't hurt enough to stop me from working – if I keep my hands on the keyboard. I often get comments when I'm co-working somewhere, when you see me with my hands on the keyboard, but I'm surfing – I can quite appreciate that it does look a bit weird! While I'm not sure everyone wants to go quite as far on the no-pointing-device journey as I have, we're quicker on the keyboard than switching between that and a mouse, so I thought I'd share the way I work.

For the most part, I'm helped hugely by using a Linux platform – I'm a Kubuntu user and since Linux is pretty well designed for keyboard users, it's fairly easy going. I can run programs with Alt + F2 and switch desktops quickly with Ctrl + F1/F2/F3/F4. I have been using Vim for a good few years and this is how I write my code, and pretty much everything else besides!

Development

All the machines I use – netbook, laptop, development servers, virtual machines, live boxes – run similar ubuntu operating systems; I just use the same set of skills to run everything and that means command line, optionally over ssh. For a remote server, I'm always running screen or byobu, so I can easily spawn another terminal without having to log in again (particularly useful if a few "hops" are needed to access a particular server) and I can just reattach to the session if I lose my connection or need to disconnect to move between locations, for example. Drop by my desk and things can look a bit console-tastic, with multiple windows open, all with multiple tabs, most of them running screen – and probably only one document and a web browser open in addition to that!

For writing code, which for me is mostly PHP, I simply use Vim. It loads a lot faster than any other IDE I've seen, and once you get past the time it takes to get really good with it, it's superbly fast. Watch an experienced Vim user at their console ... it's an efficient way to work.  Contrary to what many people seem to think, I have syntax highlight, file browsing, autocomplete, code folding and can very easily move around a file and between files. I regularly have multiple tabs open in a single editor session, easily cut and paste between them, and also view more than one at a time with split windows. Since I run Vim on the command-line, this means that I can simply drop my config and plug-ins into my home directory on any other server and have my familiar tools at my fingertips. Vim has built-in powerful regex find and replace, so I'm often dropping in to Vim when I'm at someone else's computer to fix something particular – and of course copying and pasting out of WordPress text areas when it has "eaten" my code snippets once again!
When I work with databases, I use the command-line. SQL is inherently text-based so it makes complete sense to work this way – MySQL's command-line client does have autocomplete but you also learn to "show tables" and "desc [table]" to keep track of everything. I was almost an Oracle DBA in a previous life, and so the command line is a natural way for me to interact with a database. Those same skills are really handy when I need to quickly ssh in to a live server without any GUI and figure something out from the DB, and although I sometimes use scripts to pull out data in to pretty graphs (thanks to Google Charts!), I'll always develop the queries at the commandline.

So much of what we do as developers is inherently command-line based. I find I often teach command-line tricks when I'm actually supposed to be teaching something else completely! In fact, when I deliver workshops or training sessions around source control, regardless of which product it is, I insist on teaching it from command line only. If you understand what to do there, you can use any of the wrapper and helper tools that are available. But when the going gets tough, you'll be back at the command line, and that's absolutely a key skill.

It helps a lot in my regular development job that I do so much server-side technology. Much of what I do is based around APIs, or command-line worker scripts. For the APIs, I simply test everything with cURL, or at a push, a command-line PHP script. The workers are usually a framework bootstrapped from the command-line and so it's very easy for me to work with.  When things go wrong, what do we do? Tail log files ... from the command line, of course!  Even when I'm writing training materials, those code snippets never get tested via a web server, I simply fire them off using php -f – this covers most eventualities, although of course I do also use a browser as well.

Web Browsing: Opera

I am aware of various adaptive tecnologies and plug-ins available for other browsers, but I use Opera. Over the years, Opera's accessibility suport has enabled me to keep working, I am confident using it and they have more than earned my loyalty (I don't do any frontend work at all, so lack of browser choice isn't a huge problem).

For general surfing, I just open a tab (ctrl + t), type into the address bar either a URL (which will autocomplete) or a speed-dial number. To move around the page, I hold shift and press the arrow keys – it's surprising how quick it is to use a page this way. To go back and forwards, you just use ctrl + left (or backspace) and ctrl + right respectively. To move left and right between tabs, use 1 and 2 respectively – you can also ctrl + tab to cycle through the most recently used. To search, type / and then whatever you're searching for, using F3 to find additional instances.

There are some general gotchas using the web this way:
  • You can only interact with things that are hyperlinks or forms or some other genuine HTML element, anything which requires hovering or clicking isn't going to work.
  • Sites sometimes implement their own keyboard shortcuts – if they pass through the ones they don't want to the brower and don't clash too badly with Opera's, that's fine. Otherwise, I will shortly be on my way to your competitor's website!
  • Some sites like to tell you to upgrade your browser because they don't support Opera.  Simply switch your user agent to firefox (it's a per-site option) and everything will work – usually.
  • You can't interact much with plug-ins – once they've got focus, they don't like to release it.
It's an interesting way to view the world and, for me, the most remarkable thing to happen lately is the advent of HTML5. To put this in context, I have had all plug-ins disabled in my browser for the last five years or so. I used to disable JavaScript too, but I find that the majority of sites now work pretty well for me with it enabled. However as HTML5 adoption rates rise, suddenly pieces of my web, the version of the internet that I see, have started to dance. I see videos! For a person for whom YouTube didn't exist (but I have at least seen the one with the sneezing baby panda!), this is pretty exciting!

Opera has fantastic per-site preferences, so I can set it to turn scripts, plug-ins, and other things on or off on a per-site basis, and it remembers the setting. The BBC News relaunch about a year ago, with the scrolling video block, is absolutely unusable for me – but Opera knows I need JavaScript disabled for that one site, so although it looks a bit strange in layout terms, I can interact with it perfectly now (well, I can't watch the videos, but I can navigate past them to the bits I do want, and I'm calling that a win).

Email: Google Apps Basic HTML View

My mail is with Google Apps and I have found that it drops its IMAP connection too often to make using Mutt or Alpine a good experience. I have also tried hard to adopt desktop products such as Thunderbird, but most of them have some keyboard shortcuts, while still allowing you to get your cursor wedged in a sidebar if you're not careful. The basic HTML view from Google Apps is absolutely adequate if not exactly pretty or fast. Oh, and you can't change your "from" address, which is deeply annoying.
I also use Google Apps for the calendar, which doesn't work brilliantly but I can add appointments with my phone and view really easily in the web browser. Google calendar does have keyboard shortcuts, but passes through the ones it isn't using to the browser, and doesn't seem to clash with the keys I use, which is fabulous. I'll miss that when someone changes it and I can't use it any more!

Documents: LibreOffice

LibreOffice comes with a raft of keyboard shortcuts and also has customisable ones. As a software developer, I didn't do a lot with documents, but as a consultant and now a book author, these days I do. Now I've learned the shortcuts I need most, I can sit and write documents all day, and edit formatting, in a way I wasn't sure I'd be able to. My favourites are the ctrl + 1, 2, etc for headings, ctrl + 0 for default formatting, and the F12 or shift + F12 for numbered or bulletted lists.

Social Media: A bit of this, a bit of that

Since Twitter bought TweetDeck (which was mostly/almost accessible), I've stopped using it, but haven't really settled to an alternative. I have a console-based Twitter client, ttytter, which is great at showing me new tweets on my timeline and anyone mentioning me. I also have a little dashboard that I use in a web browser to show any messages matching a number of searches covering brands that I'm involved with, events I'm attending, and so on. The output on the dashboard includes a link to each tweet on twitter's mobile site (their real site requires the ability to hover, so is no use. Actually most mobile sites work pretty well for me!), which I use to view the tweets, reply to them, or see what they are in response to, etc. Again, GUI applications exist, some of them attempt to be accessible, but I haven't found one that has worked really well for me so I use a bit of a mix.
Twitter's mobile site is accessible, since it doesn't require the ability to hover
Twitter's mobile site is accessible, since it doesn't require the ability to hover
I use Facebook less and less, it seems to get less accessible every time I visit, and I'm not really hooked on many other social networks. As for RSS readers, I think one day I'll have to write my own! It's simple, text-based content, but so few sites just display it as text. Every single product I've seen is useless (for me, they're obviously quite good for the mainstream users), the links aren't real links, or it has "helpful" keyboard shortcuts that do unexpected things in my browser. I'd really like one with no script, no keyboard shortcuts, no nothing – and at the moment I'm reduced to a console-based one which is not ideal as I use a number of different machines and it doesn't sync.

Presentations: LaTeX and Graphviz

Presentations have been a struggle – I speak frequently but also deliver a lot of training where I'm writing my own slides. This year I finally found an alternative to open office: to mark up slides in LaTeX. It sounds crazy and arcane, and at times it is, but I'm now able to work with content in presentations, moving slides around and tweaking them.
As I'm a Vim user and there's a plug-in for Vim, working with LaTeX markup is actually a nice way to do it. It's true that I don't have much freedom with placing objects or doing any transition effects, but for technical training slides (and with my design abilities), perhaps that's a feature rather than a bug!

Alongside the LaTeX slides, I've started using Graphviz to generate diagrams. I am almost always working with very factual content: UML diagrams, flow charts, that type of thing – and Graphviz allows me to produce perfectly nice-looking diagrams without being able to point at
anything to drag it around. Again, there's no room for creativity but I think that's a good thing – I'd really like to work with someone who cares about these things if I'm going to create shinier presentations.
A presentation of mine using LaTeX and Graphviz

No mouse

In general, I think for developers to have a good command of the line (pun intended), is a good tool in the toolbox. I don't recommend Vim at the mercy of all other tools, in fact if you ask me to recommend a PHP IDE, I'm unlikely to even mention it. To be fluent at the command-line has kept me working in an industry that I thought I was too broken for, and that's precious.  Whether you pick up a tool mentioned above, or finish this post thinking about how your websites would look to someone like me, thanks for reading.

No comments:

Post a Comment