Blog Post

How-To: Replicating Coda’s Books Feature With Google Quick Search Box

Stay on Top of Enterprise Technology Trends

Get updates impacting your industry from our GigaOm Research Community
Join the Community!

Espresso IconI recently made the switch to the newest version of the web development application Espresso. After having used Coda for all my previous web development needs, I’m naturally making some comparisons between the two. I’ll leave the blow by blow evaluation to others but thought it worth noting that the one feature I find myself really missing the most from Coda is the ability to quickly search through reference books. This surprised me a bit as I wouldn’t normally list this as a “killer feature” of Coda, but more than anything else I’ve found myself continuously cursing the lack of this option in Espresso.

Thinking others might be feeling the same way I quickly threw together this Google Quick Search Box plug-in (ZIP, 742kb) that will let you send searches to reference sources for HTML, CSS, JQuery, PHP, MySQL, Python, and WordPress. You can start the query by entering text directly into QSB or by selecting text within Espresso itself, or any other application for that matter.

It seems like a simple feature hardly worth mentioning but I’ve found that having the option to quickly check up on the details of a particular function, element, declaration, etc. is an essential part of the way I work. In Coda you can add your own reference books directly into the application associating each one with a particular code type, e.g. php, css, javascript.

Coda Screenshot

While in the code editor you can then select some text and choose “Look Up in Reference Books” from the contextual menu which will execute a search at the associated reference source using the text as the query. Unfortunately, one of the drawbacks to this approach is that you can’t quickly send queries to more than one source for a given code type. Nevertheless, over time I’ve really become dependent on being able to run these quick lookups.

I figured the best way to close this gap in Espresso was by building a QSB plug-in. To install the plug-in just add the codex.hgs file into your ~/Library/Application Support/Google/Quick Search Box/PlugIns directory. Once installed you will need to restart QSB in order to access the new actions.

QSB Screenshot

Once you have everything working, just add any text into QSB (don’t forget to prepend with a space) press “tab” to pivot to an action and select a codex to search. Typing “codex” will bring up all available sources or you can just type the name of a specific source, e.g. WordPress, JQuery, and so on. Once you have selected the codex to be searched, press return to send the query. Alternatively, you can also start by sending text to QSB from within Espresso, or whatever other editor you’re using, by selecting the appropriate bit of code and choosing “Send to Quick Search Box” from the services menu.

With the theory that a picture is worth a thousand words I recorded this quick video demonstrating the plug-in in action.

Now that I have quick access to all my reference books I think I’ll be switching over to Espresso full-time. I’d be interested in hearing if anyone else has recently made the switch to Espresso and if so what they’ve been missing the most.

11 Responses to “How-To: Replicating Coda’s Books Feature With Google Quick Search Box”

  1. Bryan Schuetz

    @QuadMachine this is where something like TEA for espresso (linked above) comes in real handy. You can wrap selections in tags&links and with Zen Coding it will also support the use of abbreviations.

    For example:

    Starting of with a few lines of text that look like they could make a site nav – select the lines – choose the “Wrap in Abbreviation” action – add in an abbreviation for the wrap that you want:

    (in the example above I’m using a Zen Coding abbreviation to tell Espresso that I want to wrap each line in a List Item with an id of “itemX” within a UL with an id of “nav” and to include an anchor in each li)

    Hit enter and you get :

    The syntax for zen coding is super easy to learn (it works a lot like CSS) and with full editor support it becomes really powerful.

  2. Any idea how to get wrap-around snippets in Espresso?
    For example I have: “some words” and i wanna wrap it in some words or any other tag for that matter…
    So i just select the text I want and insert the snippet, and it wraps it with the tags I want…
    How do I get that in Espresso?

  3. Bryan Schuetz

    @koki I know what you mean about the project window vs. the “new file” window. I’ve always stuck with the project window and assumed the other was just for quickly working with files that have no real project.

    @kdub I love TexMate but comparing it to Coda/Espresso is a bit of Apples and Oranges. Plus with TEA for Espresso: with Zen Coding ( ) and “TextMate like” commands I feel like I have the best of both worlds.

  4. I’ve made the full switch to Espresso for my latest project, which involves a lot of HTML and PHP. It’s pretty nice lightweight editor, and when used in conjunction with CSS Edit 2, you can achieve a pretty great workflow.

    One of my gripes are that there isn’t enough control over your code in the preferences – I can’t customize too much of what happens as I type my code.

    Another gripe is that there’s a lot of confusion between the project window and then a single window. In the project window, everything is visualized from the workspace in your sidebar. In a single window, you can drag and drop documents via a tabbed interface. But which one does Espresso want me to use?