Newism Pty Ltd

Newcastle, NSW Australia

Anthony Short — Monday 30th March, 11:07am

Espresso - A sugar sweet web development experience

In case you haven’t heard yet, or don’t use Twitter, Espresso by MacRabbit was released a couple of days ago.

Describing Espresso is rather easy. Imagine all of the good parts about Coda (the all-in-one solution and the nice interface), and all of the good parts about TextMate (awesome text editing capabilities, snippets, and most of all, expandability), and you’ve got Espresso.

I’ve been working with Espresso since the private beta, and it’s come a long way. I won’t do a complete feature breakdown or comparison here, I’d just like to go through some of my favourite features and explain why it’s worth taking a look at.

As flexible as they come

One of my favourite features of Espresso is the window / tab management. You can have your project open and select which files to put into the ‘Workspace’ – an area that works like tabs, but doesn’t sit where tabs normally sit. Instead it sits above your project listing. This makes more sense than the standard tab convention in my opinion. You can see in a glance which files are open, you can view files in your project without actually opening them for editing and cluttering your workspace (like tabs do), you can see which folder they belong to, if there are duplicate names, and you can grab, move and play with the tabs as you see fit.

Want to see that document next to that document? Just grab the tab and rip it from the sidebar. When you’re done, just grab it and put it back it. You can grab a few files at a time, or just one. It really does work better than the one-window concept, as it gives you the flexibility to do whatever you want with your windows, and they never get lost.

Packed to the rafters

The built-in FTP client is pretty special. It doesn’t work like Transmit or Coda where you just choose a folder and drop everything in there, it syncs with your current project, determining what’s new, what’s changed and what’s been deleted. Transmit has similar functionality, but this is built directly into Espresso, right next to your project.

This encourages you to use a better workflow. Rather than creating your project, uploading it, occasionally editing a file directly on the server and then realising you’ve lost work, you keep your project files and the server in sync.

It even comes with Quick Publish, which will upload your file to the server whenever you save it. In case you really need to, remote file editing is in there too.

Sugars – the sweetest plugins ever

‘Sugars’ are a collection of files put together to form an Espresso plugin. They can do all sorts of wonderful things ranging from the simple - syntax highlighting and code completion - to super complex features such as the Cocoa API. The power given to developers is huge. Just about any feature that isn’t present, you could probably create with a Sugar.

Extra sugars can be downloaded from the Coffee House, a 3rd-party site which aggregates sugars. Most sugar developers are using GitHub to host their code, so you might want to have a peek around there as well.

I’m planning on writing a post in a couple of weeks about making a simple sugar and explaining in detail how they work. Stay tuned!

Themes

The code theming in Espresso is pure gold. It’s just CSS! You can style up a whole theme using CSS, including text, backgrounds, font weights, colours… you name it. It’s also really easy. All you do is pin-point the part of the syntax you want to change like a normal CSS selector.

I’ll put together a tutorial next week on making your own theme, so keep an eye out.

Super-duper sexy

The interface. The icons. The window. The fonts. They’re all beautiful! MacRabbit has done an amazing job putting the interface together. They even created a custom monospace font, ‘Espresso Mono’. These sort of features aren’t vital to the functionality of the app, but the fantastic icons and UI really make it a pleasurable experience.

The downsides

When I got the email saying Espresso 1.0 was released, I thought I was caught in some wildly nerdy dream. That’s not because I was excited, but because I didn’t think it was 100% finished. But then again, no app is ever really finished is it?

I was hoping for some better snippet management, CSSEdit’s x-ray capabilities and some integration with Git. But hey, no big deal, it will all come eventually.

Espresso’s main drawback is at the same time its greatest strength. While sugars can provide almost limitless expandability, it will rely on sugar developers to make it truly great. That’s why I went ahead and created the ExpressionEngine sugar. We already have sugars for most popular languages, and next will come frameworks like Rails and CodeIgniter. It’s just a matter of time.

The snippet functionality is also a bit lacking. It’s better than Coda but not quite as good as Textmate. It does however, use the same snippet syntax as Textmate, so you should have no trouble converting your old snippets over to Espresso. Hopefully they update the snippets in the next release - it’s one of the most important features needed at this point (along with CSSEdit’s X-ray, which would blow the competition out of the water).

ExpressionEngine supported

The reason I wanted to get on-board with Espresso so early was that I wanted to create a plugin for ExpressionEngine. ExpressionEngine support in other apps is sadly lacking. Sure, we have a lot of nice snippets for Textmate, but I wanted more than that. I wanted an app that knew the ExpressionEngine template syntax, knew all of the attributes and tags and had snippets. On top of that we can start to look at extending it further - we have access to Cocoa and can hook into other functionality of the app. I’ll leave this to your imagination for now, but I’d love to hear some of your ideas.

You can get a copy of the ExpressionEngine sugar from GitHub. I’m updating it fairly frequently, so expect it to improve pretty quickly. I’m open to any suggestions or criticisms you may have, but keep in mind I’m still working on the snippets. Here’s what you can grab right now:

Auto-complete for variables, tags and attributes
All of the Textmate snippets you know and love
Templates for common EE tasks
Detailed syntax highlighting
Code folding (based on the syntax, it’s real code folding)

I’d recommend you check out my theme too - Quiet Night – as it has some colouring specifically for ExpressionEngine. One major development I’m working on (which I did have working at one point) is context-sensitive auto-complete. Inside a weblog:entries tag you’ll have access to all the variables contained therein. Inside a categories tag? You’ll have to auto-complete functionality. For now, you have access to all variables, at all times.

You can download the ExpressionEngine sugar from GitHub.

Highly recommended

While I find Espresso to be amazing, of course not everyone will. If you’re one of these people, I strongly encourage you to take the time to play around with it for a few days. Create your own theme for it, one which suits you best. A lot of people are set in their ways, and won’t leave TextMate and a lot of people won’t separate from their love affair with Coda, but I highly recommend you at least give Espresso a try.

You can buy Espresso now from MacRabbit for €59.95, or in the latest MacHeist bundle which is going for US$39 for 12 apps. If you’re still not sure, you can try it out for 15 days for free via the MacRabbit site.

Comments

The following 32 people were compelled to have their say. We encourage you to do the same.

Mathew Patterson said on Monday 30th March, 12:20pm: 1

Nice review Anthony, I’m going to have to check it out. I’ve given up on using Coda mostly, but with Expression Engine syntax hints, Espresso could be sweet.
Jason Hudnutt said on Monday 30th March, 12:30pm: 2

Excellent review! The only reason I have not purchased Espresso as of today is the “slim” hope that macheist.com will unlock it!
Rob Morris said on Monday 30th March, 12:36pm: 3

Thanks for the write-up. Looks really nice.

@Mathew you may want to check this out http://expressionengine.com/forums/viewthread/51330/#249899.
Travis Hensgen said on Monday 30th March, 12:42pm: 4

Excellent write up Anthony. I tried Espresso very quickly and the general editing capabilities just didn’t feel quite as nice as TextMate - well the first thing I did was tried “block selection” which I use all the time in TM, and that didn’t work as well IMHO.

It certainly looks like a very nice app though, with an amazing amount of polish, especially for a version 1 release. I’m just so stubborn about changing my workflow.

I’ll have to give it more of a chance… already got my MacHeist bundle, so hopefully it’ll get unlocked!
Anthony Short said on Monday 30th March, 2:38pm: 5

@Travis The text editing actions/shortcuts aren’t as perfect as Textmate just yet, but they’re getting there. Most of the major actions are there, but now it comes down to the little details. I’d imagine the next update will address these text-editing woes.

Also, the sugar which handles most of the html text actions was out-of-date when Espresso 1.0 was released. The updated version of this sugar fixes a number of bugs and little annoyances.
Jonathan Longnecker said on Monday 30th March, 3:02pm: 6

Aha! So you did the EE sugar. Very nicely done sir! I’ve been using it since the private beta as well and am loving my freedom from Dreamweaver bloat. Can’t wait to see where it’s going!
Peter said on Monday 30th March, 6:11pm: 7

Nice writeup Anthony. I’ve been using Coda for quite a while now, alogn with Textmate for most of the module / extension programing part. I’ve given Espresso a try, but for now, Coda just fits my workflow better. I’m lookin forward though how Espresso evolves in the future, it might be worth switching some time.
Franco said on Monday 30th March, 6:23pm: 8

For your EE work I’ll make you a monument ! I have been looking for soooo long for something like this. Finally it’s here! Thank you sooo much.

A quick question: in Coda it’s possible to do a live preview, which is really very nice. See http://expressionengine.com/blog/entry/live_preview_with_coda_and_other_ides/

Is it possible to do something similar in Espresso?
Colin said on Monday 30th March, 10:40pm: 9

Fantastic work, thank you.
Anthony Short said on Monday 30th March, 11:48pm: 10

@Franco Unfortunately, you can’t do live previews of dynamic content just yet. People have been complaining about that for a couple of months, so I expect they will add it eventually :)
Mark Huot said on Tuesday 31st March, 1:43am: 11

The _only_ think holding me back from diving head first into Espresso is its inability to show “hidden” files (files prefixed by a period). I have too many hidden EE templates that Espresso simply will not show me.
binocle said on Tuesday 31st March, 3:52am: 12

I have quickly tested it, and was not convinced at all to abandon Coda for Espresso.
But your enthusiasm and your EE sugar make me want to give it a second thought ^__^
Angsty said on Tuesday 31st March, 1:03pm: 13

Just had a quick look at the site with the intention to try/buy, but its Leopard only *sigh*

Oh well, maybe later :)
Ryan Masuga said on Wednesday 1st April, 6:46am: 14

Espresso sounds OK, but I’m just not sure it will even come close to rivaling TextMate’s editing (not just the snippets). Duplicating lines/blocks with a quick key command, columnar editing, and other little things that I’m very used to.

Also, with the ExpressionEngine bundle for TextMate, I can highlight any core EE tag and hit Ctrl-E and I go right to the EE docs for that tag…invaluable. (Can your Sugar do similar?)

Unlike Mark Hout, I prefix all my hidden templates with an underscore, so I won’t have the “hidden templates not showing” problem.

Nice write up, and I’m sure your Espresso Sugar is really sweet *ahem*. I’ll probably give all this a test-drive soon.
Anthony Short said on Wednesday 1st April, 2:43pm: 15

@Masuga A lot of those advanced editing features can be replicated. There’s a sugar out now, TEA (Textmate Emulation Actions) written in Python, which adds a whole lot more functionality when it comes to text editing. You can even add your own custom actions with XML. But yes, it is a little behind in that regard.

The documentation shortcut will be tricky. I wanted to try and somehow embed it into the app by creating a HUD or something similar, but I haven’t actually put too much thought into it yet.
Jim said on Wednesday 1st April, 4:28pm: 16

Total noob to all this and nothing seems to be happening when I double-click on your Sugar. big ExpressionEngine fan - would love to get this to work - but can’t seem to figure it out.
Anthony Short said on Wednesday 1st April, 4:38pm: 17

@Jim - If you’ve got the latest Espresso, 1.0.1, you should just be able to double click the sugar and it will install. If you’ve downloaded it from GitHub, rename the unzipped folder to ‘expressionengine.sugar’ and then double click.

After that, just restart Espresso. If your template isn’t automatically detected as EE, then go to View > Language > ExpressionEngine.

I’ll probably change the way it’s structured on Github so when you download it the sugar is right there :)
Jim said on Thursday 2nd April, 7:12am: 18

Thanks - I figured that part out (renaming to .sugar) and that seemed to work.

The only problem is that now the theme doesn’t work for me. Made the folder (as explained in Coffee House) and dragged the .css in there. I can pick it in preferences - but it doesn’t do anything. In fact, all it did was change all the cool EE color stuff you did with the Sugar, it changed all the text back to basic black on white.

I have the latest Espresso version. Am I missing a step?
Wade Sakundiak said on Thursday 2nd April, 6:08pm: 19

@Jim - For some reason Espresso will reset the Language to PHP for some reason and disregard the highlighting of the sugar (even with the exp:template tag in the top). Kind of caught me off guard a couple of times.
A. H. said on Friday 3rd April, 9:30am: 20

Everyone make sure to get MacHeist so we all get Espresso for cheap!
Florent V. said on Friday 3rd April, 5:59pm: 21

Espresso looks interesting, but i probably won’t invest time in checking it out more than a few minutes. Like i did for TextMate or Coda. They are all great apps (from what i’ve seen and mostly what i’ve heard), but i’m focusing my learning efforts on multiplatform software. Mac OS X is nice, but it’s not without its faults, and i just happen to prefer the Linux+Gnome environment (namely Ubuntu but it could be another Gnome-based distribution).

So i run OS X on my iMac, Ubuntu on my laptop, and ActiveState’s Komodo Edit on both. It’s a nice and powerful editor, not as great as Coda or Espresso UI-wise, but it’s quite good.
Erik Kraft said on Saturday 4th April, 11:56am: 22

Oh man. I would already be grateful to you for the ExpressionEngine Sugar, but then you had to go and port the Blackboard theme from TextMate—which is, I’m not proud to admit, one of the key reasons I’ve been reluctant to switch to a different editor. THANK YOU KIND SIR.
Jim said on Saturday 4th April, 12:01pm: 23

Same issue for me still - downloaded .css from the link. Dropped into the Themes folder, selected in Preferences but all it does is turn everything black on white.

Switched Language Pref. to ExpressionEngine - same thing - no change. Am I missing a step?
Peter said on Tuesday 7th April, 2:13am: 24

Not being able to see hidden files on the FTP is a pretty huge drawback. Of course you can use your own naming for “hidden” templates in EE (@masuga), but that’s not only working around something that should be in Espresso in the first place. Let’s hope they add that, for now, Coda and Textmate.
Travis Lehman said on Friday 10th April, 2:34pm: 25

This might be the push I need to give Espresso a fair chance vs. Coda! Thanks for a good review. I’ll be trying out your EE Sugar!
Zac said on Wednesday 22nd April, 5:00am: 26

Your EE plugin makes me want to give this app a second chance!
Shaun said on Monday 27th April, 4:14am: 27

The EE Sugar really slowed my copy of espresso to a crawl so I had to uninstall it. OK, I’m on an old G5 1.8Ghz iMac but it was ridiculously slow.

Espresso’s plugin system needs a bit of work still I think.
Steve said on Saturday 9th May, 7:30am: 28

It figures Espresso and your EE sugar come along so close to the launch of a web site where both would have been invaluable.

I have the same big issue as Mark Huot, as I hide my embeds as a rule. I really hope this behavior can be fixed with an upgrade or sugar, as enabling hidden files mac-wide (if that will even fix the display issue) isn’t acceptable.
Dane said on Saturday 16th May, 4:19pm: 29

Loving the EE sugar - a nice additional would be the ability to quickly add an EE comment rather than the default HTML style comments.

The EE comments {!— comment —} don’t get rendered and I often use them through a sites template.
Jonathan Longnecker said on Wednesday 27th May, 2:53pm: 30

I seem to have strange issues with auto-complete…get lots of weird characters. Am I just crazy?
quicklycode said on Wednesday 28th April, 7:03pm: 31

Espresso cheat sheet:
http://www.quicklycode.com/cheatsheets/espresso-shortcuts-cheat-sheet
Christopher Beckwith said on Thursday 27th May, 3:30am: 32

Great Sugar. Where is Coda does not have a complete EE “Mode” this certainly increases the worth of Espresso for EE developers. Being new to EE, I am starting of with EE2, rather than learning EE1 only have to start learning 2. Does the sugar include all the syntax for EE2 as well? Since things are now called channels instead of weblogs, and such. Thanks in advance!