Espresso 2 by MacRabbit
If you design and develop websites and are looking for an excellent, feature-packed editor to speed up your coding, then you won’t go far wrong with Espresso 2 by MacRabbit! With built-in FTP support and a host of useful features, this is my favourite text editor to date.
Since moving away from the increasingly-bloated Dreamweaver some time ago, I have tried various other options for coding websites. I have tried TextWrangler, Komodo Edit, Coda (demo only as it never had all the features I expected to find, and the Coda 2 release is taking forever to arrive Update: Coda 2 finally released May 25) and TextMate which has been my longer-term favourite. However, I think my search for an editor may be over as Espresso 2 does (almost) everything I want and beautifully too! You can get a fully-functional 15-day demo here: http://macrabbit.com/espresso/.
Initial Steps
After installing, I had to make a couple of changes in my System Prefs, as I’m a UK user and Espresso uses the Mac’s internal understanding of word characters to govern its selection settings. (Double-clicking in URLs selected the entire string including the .com). To fix this I went to System Prefs > Language & Text > Text tab and chose English (United States computer) for my Word breaks. This worked fine after a restart of Espresso.
I then went to File and created a New Project. Like TextMate, if you do this you can do site-wide searches which is really hany when working with a CMS like WordPress and debugging or editing files. Project icons can be coloured and have graphics added to them, making it visually very quick to select from one of several projects.
Espresso in Action
The interface is really good to work with, particularly if you are a mainly front-end designer. You have the project files displayed in a vertical list down the left side and the edit window in the middle. On the right, there is the option to show the code navigator or CSS tools. This can be switched on and off with the slide of a button or using cmd + i.
The navigator helps you to quickly see and jump to points in your code, using a tree structure to display your document hierarchy. It has folded blocks so you can hide and show just what you need to. (The code editor has code-folding too which is one of the odd omissions that stopped me going any further with Coda as an editor.)
Other than code-folding, other very useful features include code-completion and syntax error detection and colouring. You can work with the defaults (I do) or make your own theme. Espresso uses Sugars to extend the functionality and these are much like TextMate’s bundles. My only wish is that there was a visual editor for creating your own Sugars. There is a Snippets editor and this provides a means to add quick code snippets to your files.
Standard HTML files can be previewed with live updates (no refresh needed) and there is a feature called X-Ray which lets you see how your CSS is affecting your layouts. This is a little like using Firebug and it’s a great little tool.
There is support for a range of languages including HTML5, CSS3, JavaScript, PHP, Ruby, Python and XML.
There is no native Diff support for checking or comparing files, although there is a Changes app Sugar which can be installed from Changes. You will need to set Espresso to open in 32-bit mode for this to appear on the Actions menu and I’m not able to get it working as it does properly in TextMate yet. This means running it in the background.
For CSS editing, MacRabbit have integrated their CSS Edit app, making it a breeze to style your content. In most cases, I find it quicker to manually write the styles for my elements, using the code-completion making it faster still, but for me, this really comes in to it’s own when it comes to colour selection:
When I want to colour my elements, I have often gone through a bit of trial and error to find the right tints and tones. With Espresso, this is now incredibly easy as I can work with a familiar colour picker, that lets me also control opacity! Best yet, there is a magnifying glass icon that lets me pick colours from outside of my Espresso workspace. This alone has made me very happy and it is one of my most-used features surprisingly!
Creating CSS3 radial and linear gradients is equally super-easy, making a pretty hefty chunk of code writing effortless. It automatically creates all the code for -moz and -webkit gradients, along with the angle in degrees. If you want to change the angle, it updates both vendor-prefixed lines on-the-fly.
Again, the navigator helps out by giving you visual feedback on the styles in your document. The styles can be re-ordered in your file by simply clicking and dragging them into their new place. This is a fast way to move styles about if you have issues with the cascade in your file. It is obvious that a lot of thought and work has gone into Espresso, from the point-of-view of the end-user and the support provided by Ian at MacRabbit has been excellent.
FTP Support
Once you are ready to upload your files, the built-in ftp options make this simple too. You have a choice to sync your site or use one of a couple of other handy methods; auto upload or quick publish. To get started you need to set up your server(s). Click on the Settings button and a nice animation opens the panel to set your servers up.
There is support for FTP, SFTP and S3 engines and you can have more than one server! This is yet another one of those really useful features. If you are working on a development server you can set that up, along with your live site, then you simply decide which server you want to upload files to. No more switching between settings or using a third-party FTP app, this is as simple as choosing from a drop-down menu! To enable auto-uploads, just switch the server of choice on and every time you save the file it uploads to the server. Or, you can right-click on your file in the left pane and upload it to whichever server from there. Or, you can connect to your ftp server and drag files from the left pane to wherever you want on your server via the side-by-side local and remote server views. Hover over your directories to expand/open them.
Summary
This really is a scratching-of-the-surface as far as Espresso 2 is concerned. I mentioned that you can extend the app with Sugars and I would suggest these for a start:
The HTMLBundle which includes some of the TextMate snippets.
This WordPress Sugar for adding auto-complete for WordPress sites!
The jQuery Sugar adds autocompletion for jQuery methods.
Ian’s Handy Sugar lets you edit, prepend/append multiple lines at once, and has a neat increment for numbers.
Espresso 2 is beautifully-written, a pleasure to use and makes coding quick and easy. At the moment it costs $79 (£50.61) which is certainly very good value for money. I keep discovering useful features and if built-in file comparisons and a visual sugar editor were added, this would be the best Espresso I ever tasted!
UPDATE 30 May 2012: Having tried out the demo of Coda 2, I’m still very happy sticking with Espresso. Coda 2 has added CSS3 gradients etc but only adds the -webkit prefixes. They have also added a very unnecessary file thumbnail scrolling panel above the editor. This takes up a lot of space and when switched to text-only labels, truncates file names making it difficult to work with. File edits also take a double-click to launch which is another missed opportunity to win back Espresso converts.
As of the present date (1/29/2012), Espresso 2 is the best text editor out there by a long shot. Every possible feature shines, with a few “extraordinary” features (that being the Navigator and CSS Edit – now a feature in Espresso 2). If there will ever come the day when new releases of Coda and TextMate finally show up, I’m sure they will be on par with Espresso 2. But for now, I have no desire to use anything else. I have 5 editors (including Coda and TextMate), but I always ask myself; “Why?” if I begin something in another editor. A Honda Civic will get you where you want to go, but I’d rather take a trip in a Mercedes. To-notch editor.
Pete – I have tried TextMate 2 Beta and don’t hold out much hope that it will come anywhere near Espresso 2! Would like border-radius added in the next Espresso update…
Thanks for your comments.
nice but without support perl (i found perl.sugar but its too buggy) ….then useless for me ;-(
On first inspection I really like the look of Espresso 2. I am new to Sugar though and am at a loss to how one would install sugars into Espresso. Any pointers would be greatly appreciated.
Sugars are installed by double-clicking. This requires relaunching Espresso to complete installation.
I’d also suggest looking at PHPStorm and Flux.
PHPStorm does a great job of code complete – it’s as good as Visual studio, It builds it’s auto complete from your code and understands includes, classes, pretty much everything. PHPStorm also indexes and autocompletes javascript files – since it’s building the index itself, there is no need for a “Sugar” to support jquery – you’ll get this automatically as soon as you reference jquery in your code.
Flux is another to watch – it’s got a pretty unique approach to CSS editing (Particularly the positioning of Divs and Spans – which can be done graphically on the page as if you were using Adobe Illustrator.
Thanks for these suggestions – I’ll certainly be checking them both out. The visual approach that Flux takes is appealing and seems very front-end designer-oriented.
I download a trail and I have to say it looks great but one MAJOR flaw… Do css hinting when adding your class to a div.
Ex.
It’s very annoying to have to look back in my css to remember what exactly what I named a css class…I’m I missing something?
Also no sass support…again am I missing something ?
I agree that the lack of CSS hinting is a missing feature that would be helpful to users. SASS support can be added by installing a Sugar: https://github.com/sfcgeorge/Sass.sugar like this one.