How Espresso assumes you build a web site

Most web development applications that are worth using force you into a particular way of working. For example, Panic’s excellent Coda works most efficiently if you work directly with files on a single server. Sure, you can use it to edit files on your machine, but its project management and FTP interfaces all work best when you work directly on the remote server.

Espresso appears designed around the following basic development workflow:

1. You organize your various projects into different folders on your computer
2. You create and edit project files locally, possibly using source control (RIGHT???!)
3. You preview those files locally (possibly running on a server application) as you edit them.
4. After you’re done, push those files via FTP directly to one or more remote servers.

If that matches how you work, Espresso might be the best web development application available.

The Workspace

Espresso’s “Workspace” (their term for the list of open files) is awesome. It proves that there is innovation to be found in tabbed interfaces.

For starters, instead of a horizontal strip of open tabs, the workspace is a vertical list. This isn’t revolutionary, but it means it’s easier to deal with more open documents and files with longer names. If the list of open files gets long, you can limit how much space it takes up in the sidebar.

Not all files that you open are added to the workspace. You have to double-click or edit the file before it shows up there; this means you can open files, scan through them, and even copy text without then having to close a lot of files that would be clogging up your workspace.

If you have more than one file with the same name open, Espresso shows the name of the folder next to the filename. Hallelujah! If you’ve ever lost your mind trying to figure out exactly which index.html file you’re looking at, this feature alone is so useful that other development tools are unusable in comparison.

Oh, right, I decided to spruce up the screen shots with rage comics. You’re welcome.

FTP FTW

Espresso has easily the most useful and intuitive interface I’ve ever used for managing a project locally and then pushing it out to a server with FTP.

Multiple FTP servers per project

You can also have multiple FTP servers for a given project, which is nice when you have, say, a dedicated staging server along with the live production server. This isn’t necessary for every project, but it’s nice to have it available.

Auto-publish

While you’re editing, there’s a little toggle in the workspace (in Espresso 1, this was in the other sidebar) that lets you automatically push a copy of the file to the remote server every time you save the document. This is great when you’ve been working with one file locally and want to quickly fire it out to the remote server.

UPDATE 2011 October 12: When you turn on this Quick Publish mode for a file, it applies the same action automatically for every other file in your project. Although this took some adjustment coming from Espresso 1 (where you had to turn it on individually for every file), this is much more convenient.

Browsing remote files

While browsing a remote server, the sidebar shows you the most important information right there: file name, file type, full server path, and file permissions. That’s everything you need to know immediately, right there. This is clearly made by people that understand the most important details web developers need to deal with over FTP.

The Sync view

The Sync view alone is worth the price of admission for this application. It scans your local workspace and the server, shows you the differences between them, and lets you decided file-by-file or folder-by-folder exactly what you’d like to do (upload? download? nothing?). It’s a real thing of beauty, being intuitive, graceful, and powerful. Whether you need to just shove every single file out there, surgically target a select few, or make your local and remote files are mirror images of each other, Espresso has you covered.

The closest equivalent I’ve seen is Transmit 4’s Sync tool, but I think Espresso’s is a little easier to use as it’s right there in the same application that you’re using to write code.

Code Editing

Oh, right, you’re supposed to write code in these things. Well, in general, it’s very pleasant.

Code completion

Espresso is less aggressive than TextMate or Eclipse when it comes to writing code for you, but the features it has are generally useful.

If you have an open HTML element, Espresso will automatically drop in the appropriate closing tag as soon as you type </.

If you’re adding HTML attributes or CSS values, the editor will auto-complete valid values, which is hugely useful. Especially with the most recent update, it has a very complete library of HTML5 and CSS3 goodies.

Like Coda, as you type you’ll get a little window under your cursor with suggestions to complete your code (along with common attributes or properties).

However, this brings me to a point of contention.

Developers: I want more more opinionated code completion

I wish the code suggestions were more opinionated. What do I mean by that? Here’s an example: In HTML, when I start typing “<di”, you would think that 99.9% of the time, I’m going to type “<div>”. But the first element that Espresso shows me is “<dir>”, which not only is deprecated but also is so uncommon that Google thinks it’s a typo.

Or try CSS: in Espresso 1, every time you would start a new line to add a property, the code suggestion window would pop up immediately with a list of properties topped with … azimuth? WTF is azimuth? Why not something – anything! – more generally useful or frequently accessed like background or color or margin or padding as the first options?

(I’ve noticed Espresso 2 doesn’t do this any more, partially because it has additional CSS properties like appearance but mostly because it waits for you to type a letter before showing any suggestions. Good fix.)

This is not to single out Espresso; every editor with code suggestions does this. The problem is that they all are of the opinion that alphabetical order is meaningful. It isn’t.

Although I know that alphabetical order is easy, a few logical adjustments to put common elements and properties on top would probably make typing code that much faster.

More built-in languages

UPDATE 2011 October 12: Espresso 2 now has a built-in Apache configuration language mode, so you’ll get code suggestions and syntax highlighting when tinkering in .htaccess files, which is hugely useful. My only suggestion would be to add suggestions for the rewrite variables (like %{REQUEST_URI}).

The Find-Replace tool has moves

Find-Replace automatically takes you to the first match as you type, which is a little jarring at first but is so obviously and frighteningly useful that it’s hard to believe not every application does this.

CSS navigation

Espresso has the first code navigation system I’ve used that actually works (This was also in CSSEdit). Here’s what you do: you start a CSS comment with @group and a name. Then, after some selectors, you add another comment with @end:

/* @group Typography */

   body { font-size: 100%; }
   h1 { font-size: 2em; }
   ...

/* @end */

And, boom, a folder pops up in your sidebar called Typography. You can nest groups in other groups and build up a great little folder structure for your styles that you can navigate quickly. Perfect.

The navigation also serves as a partial preview of your styles; it shows your selectors with some styling (like text color, background color, and a few others) from your CSS.

One problem: color: white will make the selector invisible in the Navigator. Watch out.

CSS3 vendor-specific properties

One nice addition in Espresso 2: the CSS editing tools from CSSEdit, which I normally wouldn’t use, but now they auto-provide vendor-specific properties for experimental CSS. For example, punch in a box-shadow and you get this:

-moz-box-shadow: 0 0 2px rgba(0,0,0,0.5);
-webkit-box-shadow: 0 0 2px rgba(0,0,0,0.5);
box-shadow: 0 0 2px rgba(0,0,0,0.5);

If you edit a value, all the vendor-specific properties are updated simultaneously. Neat.

A fine selection of text manipulation tools from other applications

If you’re coming from TextMate, you’ll be happy to know that many of TextMate’s built-in HTML manipulation tricks (entity conversion, wrap some text or multiple lines in a tag) are also in Espresso in the Actions > HTML menu. You can flesh out that collection a bit with the 3rd-party HTMLBundle.sugar add-on that adds a few other useful conversions and tab-triggered snippets.

Zen Coding is built-in.

Espresso also has many of the cooler text tools that are in BBEdit such as Zap Gremlins (searches for problematic, invisible characters that might have snuck in) and Balance (selects the entire contents of an HTML tag or JavaScript function).

There are a variety of other add-ons and themes (called “Sugars” – how cute) available, although not all of them work in Espresso 2 yet. I’ve added only a few languages (ExpressionEngine, for example) and themes (I’m fond of Freshy).

You guys, it’s soooo pretty

Finally, Espresso looks stunning. Yeah, yeah, this shouldn’t matter, but, really, it does. Espresso has a real polish beyond most other applications, let alone most text editors or development kits I’ve ever used. Coda comes close, but Espresso leapfrogs it.

Headers in the sidebars float above their content as if they’re punched out above the rest of the list. Toggles are animated switches instead of radio buttons.

The use of animations is superb. When you edit the settings for your project, the gears in the toolbar icon spin and the whole window slides up. The FTP view doesn’t just open, it gracefully lands over your workspace. The “Go To Line” dialog doesn’t just appear, it springs up like it’s ready for action, then disapppears to a point like it’s getting sucked into a black hole.

Every little detail seems fussed over.

I initially thought the animations would be distracting, but they’re very fast and don’t get in the way. It’s actually kind of fun. Kudos.

What is not great

All is not perfect. Here are the various nitpicks that I couldn’t find a place for above.

Every once in a while in Espresso 1, code suggestions would inexplicably stop working. I would need to restart the application to get them back. I haven’t seen this in version 2, so grain of salt on that one.

Espresso doesn’t highlight an opening parentheses or brace as you type a closing one like Coda, BBEdit, or TextMate. You can use code folding to see where they match, but I’d rather see the visual confirmation as I type.

The toolbar icons are a mixture of big and small icons that takes up a decent chunk of vertical space. There’s no option for all “smaller” icons. You could remove the toolbar completely, but that’s not practical because you must have it around to navigate the FTP interface.

Finally, multi-file searching in a project with lots (hundreds) of folders is pretty slow. In Espresso’s defense, I’m comparing it to BBEdit 10 which scans thousands of files so quickly that it must be powered by some sort of hyper-caffeinated, text-hungry rage zombie.

I want to use it

The MacRabbit folks have really put together a stellar set of features in a beautiful package. Espresso 2 is out now for $79 new, with a lot of discounts for existing Espresso or CSSEdit users. There’s a trial period if you want to try it out. I highly suggest taking a look.

The greatest compliment that I can give Espresso is that I look forward to using it. How many productivity apps can you say that about?

And now I wonder what Coda 2 will look like…