Is Espresso Your Cup of Web Design Coffee?

I’m a fairly recent Mac switcher and, as a web developer, I started wondering which coding environment I would choose. I spotted two main apps that seemed to stand out from the crowd: Coda and Espresso. Although we’ve covered Espresso in the past, I thought it was worth taking another look at this fantastic web development app today.

When Espresso was reviewed here for the first time, it was still in beta. Though we could see what the app would look like and some of the features it would include, the app wasn’t complete. Since Espresso came out of beta, lots of things have been added to the product. Features such as a project manager and better publishing options have really helped Espresso become an all-round better candidate.

Espresso has some superb features, but also a few aspects that could be improved. And how does it stand up to Panic’s Coda? In today’s review, we’ll put Espresso through its paces.

Features I Like

The Interface

Espresso’s interface is beautiful. It’s simplistic look actually turns out to be a big time-saver; rather than trying out all the different features, you get down to coding. The interface is divided into three main sections: the sidebar, the editor and the tools sidebar.

The Espresso Interface

The Espresso Interface

Managing Open Files

Workspace

Workspace

The developers of Espresso innovated in this domain. Rather than just implementing tabs (like in TextMate or Coda), MacRabbit implemented the “workspace”. According to Espresso’s official website, the workspace area “combines the best of both worlds [sidebar and tabs]. Space efficient, organized and convenient like a sidebar; dynamic and flexible like tabs.”

The Project Manager

Added since we last reviewed Espresso, the project manager is a welcome addition. It shows you all the projects you have created in Espresso, fully searchable to easily find what you’re looking for as your project list grows.

Project Manager

Project Manager

You can set a color and an image for each website, making them very easily identifiable. The information concerning your project is stored in a file called Name of project.esproj, found in the folder containing your site’s files.

Viewing a Project File

Viewing a Project File

The Tools Sidebar

Tools Sidebar

Tools Sidebar

Espresso’s right sidebar is very complete. It is made of three sections: the code navigator, the quick publish area, and snippets. I enjoy all three of these “widgets” but some areas could be improved.

The Code Navigator

This feature gets particularly useful when working on larger sites. It shows you all the elements in the page you are currently coding. You can also replace elements from this “widget” with drag and drop. The elements are collapsible, making it easy to hide or show certain parts of code.

Espresso is probably the only editor that offers a code navigator that is so complete.

Quick Publish

When doing some “quick and dirty” editing on a webpage, this feature is invaluable. It’s functionality is quite simple: when saving a file, it also uploads it to the server of your choice.

Though this feature is very practical, it would be great if it could alert us once the file upload is complete (with a Growl notification, for example).

Snippets

The snippets functionality in Espresso is actually very smart. It has a few standard snippets built in, and you can add your own (just like in many code editors). The clever thing is that Espresso changes the snippets shown based on the language you are coding in at the moment. For example, if you are coding in HTML, the standard snippets provided will mostly be HTML tags and page templates. If you are coding in PHP, you’ll be shown relevant PHP functions.

One thing helpful addition would be the possibility to organize our snippets into folders to make them easier to find. For the moment though, this isn’t directly integrated into the snippets manager.

Powerful Publishing

Powerful Publishing

Advanced Publishing Features

Espresso gives you many ways to publish your files to your server: quick publish (which we saw above), right clicking on “Publish”, or (my favourite) the Advanced Sync Tools.

These haven’t changed since the last time we reviewed Espresso. You can choose between Update, Merge or Mirror, and Espresso will detect missing/outdated files and add, update or delete them. Once you get the hang of using it, you wonder how you ever managed without.

Version Control?

So many developers use version control today, it really feels like something that should definitely be integrated into Espresso. Whether it’s Subversion (SVN) or Git, a solution built directly into Espresso would be a huge benefit, and would certainly give it the crown of being an “all-in-one web development solution”. This is already supported in Espresso’s competitor, Coda.

Final Thoughts

In short, I really like Espresso. Before switching to a Mac, I had heard a lot about Coda and Espresso and couldn’t wait to try them both. It’s actually quite ironic that I wanted to try these two applications. One seems to be trying to pack everything in (Coda) and the other one seems to want to streamline the whole web development process (Espresso). Advanced publishing features and the code navigator in Espresso are very useful to me, but there are still a few things that need to be fixed.

To be very honest, both Coda’s and Espresso’s icons sit on my dock ready to be used. It depends on how I feel that day and the type of project I am working on. If I am working on a smaller, static site, I’ll probably use Espresso because it has a live preview, and because it doesn’t pack plenty of options I won’t necessarily need. On the other hand, if I work on a bigger project where I constantly need to preview dynamic files, I’ll probably end up using Coda.

The truth is, choosing a web development editor is a very personal thing. Take a look at the features you need the most, and decide which interface you’re the most comfortable with!


Summary

Espresso is an all-in-one web development app, providing a simple way to code, organise your files, preview pages, and publish your project with one click.

8
  • Alex Stone

    I love Espresso. I picked it up in a MacHeist bundle and that’s how I discovered it. I’d gladly pay full price for it, though. MacRabbit makes great software. Espresso goes garret with CSSEdit and I love the ZenCoding sugar.

    I agree, some built in git/svn would make this IDE absolutely perfect.

    I also like that you point out that picking an IDE is very personal. A lot of people are die hard fans of various tools, but people forget it’s about what works best to help you get work done.

  • http://www.twitter.com/evilmeteor Jaime

    In an effort to let you in on a secret, with the danger of being called a fanboy, try Vim. It’s free and it destroys both Coda and Expresso. As a bare minimum any coder doing anything beyond basic html should be using Textmate, as it is the best editor in OSX after the usual suspects (MacVim and Emacs for OSX). They all have a learning curve that deters beginners from sticking with them, but a few weeks will make you realize what you where missing. You won’t believe how you could code without it before.

    • http://id.linkedin.com/in/rizky Rizky Syazuli

      agree.. once u get used to TextMate and it’s abundant Bundles. all the other editor just seems lame..

    • Quine

      Textmate is pretty-much the most amazing editor ever. It also has live preview of static files and, with a bit of work, dynamic ones.

  • http://drdkl.isgreat.org Dreadedkilla

    It might be worth noting that Espresso has code folding support, which Coda does not. This is invaluable for me when I develop my Tumblr themes, especially when I need to have my CSS in the same file as the HTML.

    However, I don’t like how they implemented the workspace tabs. I prefer their CSSEdit style tabs, which they do have, but are not there when I’m working from a project. This totally sucks. Another thing that’s not so good with Espresso is the lack of validation like Coda. Still, Espresso looks nicer than Coda in many ways and is more flexible for my needs.

  • Lucien

    I still prefer Dreamweaver. Sure, it’s bulky, and you need to pay a good price to get it, but it’s got tons of tools and it’s very powerful for website development. A must.

  • Andrew D

    I’m no professional web designer, but I do like to write html code in my spare time. I use CSS Edit, and love it. However, I’m in-decided on html editors for Mac. Right now, I’m using Taco HTML Edit, and love it, but this program also looks good. Can you guys do a post on Taco vs Coda? Thanks!!

  • http://curtismchale.ca curtismchale

    I don’t think that SVN or Git should be integrated into the code editor. Sure it makes these things easier to learn but at some point in every project they come back to command line. If you’ve only learned how to use the GUI (usually only has 1/2 the features) your totally stuck.

    • http://develemental.com Casen

      I couldn’t agree more. I personally use TextMate, because it’s just a powerful text editor. Not an IDE. Combine TextMate with the command line, and you have a real winner! The ONLY downside to TextMate is that there is no active development on it, and no regular updates or feature additions.

      • http://curtismchale.ca curtismchale

        To true, TextMate 2 is a big joke for almost any programmer. I’m sure we’ll see it about the time Zeus decides to make a reappearance.

      • http://www.twitter.com/evilmeteor Jaime

        True it’s not being updated since ages ago, but that speaks to it’s quality… It’s still better than %99 of all editors out there without it being updated frequently ad getting new features added.

        I insist though. Try Vim… it’s a godsend.

  • http://nataliaventre.com Natalia Ventre

    I use and love Espresso, but I think Tim that you missed all the good parts, like the actions menu, there are many useful features there, like “wrap with abbreviation”. You didn’t mention either the possibility to extend the app with sugars. As someone else commented, Zen Coding rocks.

    I don’t understand why you want a growl notification for quick publish, it takes less than a second! Maybe for publishing a folder, but not for a single file.

    • Tim

      Of course, this article could have extended itself for very long. But I chose the features that I use the most and I find the most useful. Yes it is pretty selfish but I think everyone likes different parts of a software.

      For the growl notification, I was saying this as a suggestion. What would be great is just a visual confirmation. You said it, it is really fast. Sometimes, I don’t even have the time to see the little loader and I don’t even know if my file was published. ;)

  • http://twitter.com/brunogama Bruno Gama

    TextMate + SparkUp for HTML it’s a must have, and even for python it does a great job, I miss a better code completion for frameworks like django, but if you got a nice coded bundle it does a great job.

  • http://www.btko.ca Brendan

    I tried Espresso for a few weeks and I just couldn’t get a handle on how projects were laid out. Maybe I need to give it another try but it just seemed to confusing. Plus the price is a bit high, IMO. I’m sticking with Coda for now.

  • http://connorcrosby.me Connor Crosby

    I am a fan of Coda, it is similar to Espresso except more features.

  • http://www.s-z.se zamson

    I like the simple look of Espresso and use it together with CSSEdit. I really feel these two apps should be one app. It’s a shame MacRabbit “never” update their software…

  • http://toastr.net Jacob

    I got my work to purchase me a licence of Espresso as I’m always in a code editor, and I’ve really pleased with it. The Project management, Quick Publish and Live Preview features are real time savers and make certain tasks less tedious.

    At home however I use Textmate, which is by far my favourite code (and text) editor to work in.

  • http://www.mikekey.com Mike Key

    Being a recent Mac convert, I am still hanging onto Dreamweaver. I picked up copy of Coda, and tried out the trail of Espresso. I just can’t seem to jump right into either yet. But I’m still having a hard time being as productive on my Mac as I am on my PC, I can just move around the PC faster it seems.

  • Tom

    Glad someone else mentioned the complete lack of updates for many months. That and the lack of documentation is a real turn off.

  • Karl

    you probably mixed up both apps in the last column: coda attempts to streamline development and espresso is feature laden, as your explaining in the second paragraph.

  • Stephane

    I use to be a coda guy but lately I’ve switch to Espresso. The main reason was code collapsing but since I’ve started to work with HTML 5 and XML regularly I can’t work in Coda anymore as it doesn’t close HTML 5 tags or any other not in it’s dictionary. Espresso will close any tags you want, even XML custom tags.

  • http://cloudystudio.com Rasmus

    I have tried both Coda and Espresso they both have there pros and cons. Textmate rocks for back-end!

  • mark

    Coda is the best overall editor. Great UI, full feature set, and actively developed. 1.7 is out soon and 2.0 is going to be a major update after that.

  • http://firelabdesign.com Aaron Bazinet

    I’ve been using Espresso for a long time now. I used to use Coda, but never touch it anymore, though I keep it in my Dock. When Coda 2.0 comes out, all this may change, but until then, Espresso is awesome.

    What helps a ton is Tea for Espresso: http://onecrayon.com/tea/. Also, add the HTMLBundle.sugar from the same site, and HTML5 (http://github.com/minimalweb/HTML5.sugar) and CSS3 (http://github.com/minimalweb/CSS3.sugar) Sugars.

    • http://kedaiweb.com Panji

      Thanks for the sugar, need to sweeten up my Espresso.. Cheers.

  • http://fairheadcreative.com Adam Fairhead

    I’ve used both Coda and Espresso. I purchased Espresso in ’09, and I’ve never looked back.

    Coda is a beautiful app which, as you rightly explain, packs in everything one could want in a web dev app. Espresso is much “lighter” than Coda; it doesn’t do as much. Coda’s CSS editor is better than Espresso’s. Espresso integrates with CSSEdit so beautifully, however, that Espresso therefore has the better CSS Editor to my mind.

    Great roundup, I enjoyed reading it :)

  • Tyler

    I use Espresso and really like it. Only a couple issue.. One being that it loads up kinda slow, when you first start writing to it, it takes a few seconds to start typing. They also haven’t been updating as often as they used to.

    Sugars have to be reinstalled if you run an application update. (Themes, etc.) Which is really annoying.

  • gg

    Coda and Espresso are for noobs. Real coder use Texmate or even Vim

    • Brandon S. Adkins

      Get off of your elitist high horse. There’s no such thing as a “fake coder” or “real coder”. Everyone uses the tools that help them the best.

      Espresso is basically an enhanced version of using a text-based/hand-coding program. It’s hand-coding + live preview – that says nothing noob about it at all. It’s an efficient tool for professional users. Where’s the noob part? Oh, that’s right, there isn’t one.

      Same with Coda – you’re still hand-coding all of it. I would agree with you more had you mentioned Dreamweaver, because of its WYSIWYG editor and its propensity to royally screw up and bloat code.

      Textmate and Vim are great, but that doesn’t make Coda or Espresso any less useful for designers. “Noobs”, I would think, generally wouldn’t be hand-coders, so they wouldn’t be able to use Coda or Espresso either.

      Please make sense next time you speak up.

      • Brandon S. Adkins

        err, “that help them the best.” should read “that help them most.”

  • Pingback: Tuesday Morning News | MacTalk Australia

  • Pingback: Mac Software / Apps - Page 10 - DesignersTalk

  • gazzer

    BBEdit + CSSEdit + Cornerstone (SVN) + built in Apache server (i.e. mirror your website identically locally)

    Nothing touches CSSEdit for any CSS work. Live preview means that everything else is lightyears behind. CSSEdit is by the makers of Espresso but I never use Espresso.

  • http://www.brandonsadkins.com Brandon S. Adkins

    I live and die by Espresso when coding on the Mac. The true live preview saves me A TON of time and headaches. It literally has cut my coding time probably in half, or at least by a third. (I know you can get xRefresh on Windows, but it sucks in comparison, because it’s not exactly live, you have to save the file to see the changes – this goes for a lot of “live preview” features.)

    Espresso’s live preview is instant. If you change a CSS border value, for instance, you see the border changing AS you’re typing. This is invaluable when trying to make things pixel-perfect and trying to make sure everything is in the right place.

  • MO

    Program CODA:

    Hello, may I please ask you, why not see external CSS style when
    press CSS buton in open HTML document.

    This works:

    element 01 {
    font-size: 12px;
    font-weight: bold;
    font-family: Helvetica, Verdana, Arial, sans-serif;
    }

    but this does not work

  • mo

    but this does not work:

    link rel=”stylesheet” href=”css/main.css” type=”text/css” media=”screen”

  • http://twitter.com/z0r z0r

    Espresso is just Lovely. While Coda is “ok” and “nice”, Espresso is lovely. You will do no mistakes with code navigator like forgetting to close tags. Best solution for web designers so far.

    PS – DW sucks.

  • http://w77webdesign.co.uk Hambag

    Tried both coda & espresso both seem very similar, settled on espresso got a bundle deal
    With CSS edit, which im yet to use properly!! The preview in espresso is better, looks like firebug(probably is)the thing is both are the same price give or take & 250 less than DW.

    The FTP is much better in espresso, and the code pane is really handy although
    I still seem to use ctrl+f, this function in espresso is not as good compared to dreamweaver where i preferred the replace next/ replace all or the ability to move to the next found piece of code etc.

    Snippets manager really needs folders as mentioned, again DW does it better.

    I no longer use DW since switching to mac from pc, I hated that it always crashed so avoided it on mac, but i do miss some of the useful features in code mode they where useful. No crash issues on espresso yet.

  • Maruse

    I’m quite worried about the total lack of updates . Not Espresso, not CSSEdit have shown up on the Mac App Store. There is no info from the developers… (their last blog post was in May of 2010!!!).
    I wonder if Espresso is dead or still alive…..

    • Dustin

      While there has been no official release date, they have announced their plans for 2.0 (no date yet) and their hopes to bring it to the app store. Seems they are more active on Twitter than their blog…

      http://twitter.com/#!/espressoapp

  • Womp

    I like the Dreamweaver has code hinting does Textmate have a bundle for that? or Coda? or Espesso?

  • Pingback: Some of My New Favorite Things

  • Dustin

    Well, for anyone who finds this review and comment before… Espresso stated it will most likely release version 2 in the first of of 2011. That leaves just four weeks!

    http://twitter.com/#/espressoapp/status/18041354806370304

  • http://rainydaymedia.net ed

    Is there going to be an update or new article regarding Espresso 2.0 (with CSSEdit integrated) or maybe a whole new comparison to Coda 1.7.4… I’d like to see a new pros and cons for both…all over again, or maybe any new players in the game.

theatre-aglow
theatre-aglow
theatre-aglow
theatre-aglow