Tools for technical writers – the super-useful list

I’ll be speaking about API technical writing at STC Summit 2014. Part of the presentation is about useful tools for API technical writers. Since there are already some great resources on the Web about editors and IDEs, I plan to focus on a motley collection of “other” tools. Those that do a specific job very well. Those of which you’d say, “When I need it, I really need it.”

There are plenty of blog posts and articles about tools for documentation and code, including open source tools. Particularly when talking about editors and IDEs (Integrated Development Environments) most people have their favourites. The debates about which tool is best can get quite fiery!

Here are some useful links:

So, aren’t you going to talk about editors at all? ;)

Hehe, I can’t resist mentioning my favourite editor, Komodo.  It supports a number of languages. I use it primarily for HTML, CSS and JavaScript. I do dip in and out of other editors when I need to. For example, if trapped on a Linux VM where I don’t have my own editor, I may find myself in Pico editor. I can even get by in vi.

My favourite IDE is Eclipse. I like to dabble in Android Studio and IntelliJ IDEA, just to see what’s happening.

Now that’s out of the way, let’s look at some super-useful and less-talked-about tools for API tech writers in particular.

Syntax highlighter for code samples

I frequently need to add a code sample to an HTML page, or include a slice of code in a presentation. Code is much easier to understand if the text is highlighted to indicate method names, variable declarations, and other syntactical essentials. And it just looks prettier too.

hilite.me converts a code snippet into styled HTML, which you can copy and paste into your page. Paste in your code, and select the coding language, to get the appropriate highlighting. Then click “Highlight!” to see the result. You can grab the HTML and CSS code, or copy and paste the highlighted text itself. You can even choose from a number of styles, such as “colorful”, “friendly”, “fruity”, and so on.

For example, I pasted in a Java “hello world” class, and asked for “tango” style highlighting. The “Preview” box at the bottom of this screenshot shows the result:

hilite.me

hilite.me

Testing web services and REST APIs

There’s an add-on for Chrome browser, called the Advanced REST Client, which I find very useful for getting examples of web service requests and responses. You can craft an HTTP request, then submit the request and see the response. This is a nice GUI alternative to a command-line tool like cURL.

Let’s say I want to use the Google Geocoding API to get a human-readable address for a pair of  latitude/longitude coordinates. My URL would look like this:

http://maps.googleapis.com/maps/api/geocode/json?latlng=40.714224,-73.961452&sensor=false


I’ve pasted the above URL into the Advanced REST Client tab in Chrome, then used the add-on to expand the URL parameters, making it easy to see the composition of the HTTP request:

Advanced REST Client - request

Advanced REST Client – request

Now press the “Send” button to see the response. This is a partial screenshot:

Advanced REST Client - response

Advanced REST Client – response

Very handy indeed.

Chrome Developer Tools

The Chrome Developer Tools are a little tricky to grok, but once you’ve figured out what’s going on, they’re coolth personified. To find them, click the three-barred icon at top right of the Chrome window (the tooltip says “Customize and control Google Chrome”) then choose “Tools” > “Developer Tools”. The keyboard shortcut is Ctrl+Shift+I or Cmd+Shift+I.

A panel opens at the bottom of the page. It’s pretty busy, so take your time getting used to it. You can click an option to undock the panel and see it as a separate window, if you prefer that. In this screenshot, the DevTools panel is open at the bottom of the screen, and is showing the “Elements” tab:

Chrome DevTools

Chrome DevTools

There are many many things you can do with the DevTools. The Chrome DevTools documentation is a good guide. These are the functions I use most often:

  • Check which CSS style is in effect on a particular block of HTML. This is particularly useful when there are a number of stylesheets at play. Sometimes the cascading effect of CSS doesn’t seem to follow the laws of gravity!
  • Debug a JavaScript function, using breakpoints and variable watches.
  • Watch the error messages scrolling past on the “Console” tab. :)
  • Edit HTML on the spot, to see the effect live on a web page before putting my changes into the source code.

Open Device Labs – Access to real devices and platforms for test-driving an app

It can be very difficult to try out an application on every supported device or platform. Especially for those of us dealing with mobile apps, there are just way too many devices out there for it to be feasible to have an example of each one.

One solution is to use emulators. But here’s an exciting initiative that I heard about recently: Open Device Labs.

OpenDeviceLab.com

OpenDeviceLab.com

The idea is that people may have last year’s mobile phone lying around, that they’d be willing to allow other people to use for testing. Some people may even want to donate new devices to the cause. Smart, enthusiastic people have set up hubs of Internet-connected devices at various locations around the world, and made them available to us all to use. For free!

I haven’t yet used a device from one of these labs, but the idea is awesome. What a great way to test an app, get screenshots, figure out the “how to” instructions you need to write, and just see how the user experience feels.

Mobile emulator in Chrome browser

With Chrome’s mobile emulation, you can make your desktop browser pretend that it’s something else. It can masquerade as an iPhone, Kindle, Blackberry, Nexus, and more. This is very useful for taking screenshots, and for seeing how responsive an app is to different device sizes and resolutions. The emulator is available via a fairly obscure setting in the Chrome Developer Tools panel.

Emulator in Chrome developers' tools

Emulator in Chrome Developer Tools

Source repositories

Online source repositories are good for sharing code. In a tutorial, it works well to include code snippets and point readers to the complete source in a repo. Bitbucket and GitHub are very popular. I have accounts on both, because I’ve worked with teams on both. GitHub works with Git, while Bitbucket supports both Git and Mercurial.

More?

That’s my list so far. If I find any more tools before the STC Summit in May, I’ll add them to the list I’m creating for my presentation. It will be fun to share them with the tech writers at the conference. Can you think of any super-useful tools to add to the list?

About these ads

About Sarah Maddox

Technical writer, author and blogger in Sydney

Posted on 2 February 2014, in technical writing and tagged , , , , , , , . Bookmark the permalink. 9 Comments.

  1. Also worthy of mention that Firefox offers the same debugging tools[1] as chrome (bar the device emulation) with a few super handy additions like the scratchpad.

    [1] https://developer.mozilla.org/en-US/docs/Tools/
    [2] https://developer.mozilla.org/en-US/docs/Tools/Scratchpad

  2. The Open Device Labs sounds fantastic, indeed! Thanks for the find (and the link — I should update that prezo one of these days). Good luck at STC!

  3. Sarah, you missed out emacs ;-) All the others look good to me though

  4. Thanks Sarah, these are really useful suggestions. It might be worth mentioning that mobile device emulation is not available on regular Chrome – you need to download ‘Chrome Canary’ to get this tool.

  5. Thanks for the post! The Google Chrome mobile emulation looks extremely useful. I was confused with the number of various parameters to configure, but then found the docs that explain many tricky aspects:

    https://developers.google.com/chrome-developer-tools/docs/mobile-emulation

    Also, I would add LICEcap to the list – a nice free screen capture tool that produces a GIF file as the output. GIFs are easier to use in online help as compared to video.

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

Follow

Get every new post delivered to your Inbox.

Join 1,488 other followers

%d bloggers like this: