Months ago, i bought a copy of Espresso, a html editor designed and made by Macrabbit, a Belgian company. Macrabbit is well-known for their award winning CSS application CSSEdit, a helpful application to help you visually make up your designs with CSS.

A week ago, i opened Espresso after not having used it for a while and decided to give it another try. The reason for that was that i asked a question on Twitter where designers store their code snippets. I usually do this in an application called Code Collector Pro. After i got a few answers, i decided to give Espresso another go and till today, i'm using it every day. I dug a bit deeper into the app and found out that it is a great and clever editor, especially for designers, not only beautifully designed but also fast and effective.

_{Espresso, Mac web development, more productive than caffeine}

Projects

making new projects

After the install, when launching Espresso, you'll see the new projects window (shortcut Cmd + Shift + 1).

_{Projects in Espresso}

What's cool about the projects is the fact that every project is adaptable in the way you like, the map icon is adjustable, you can put your clients logo onto the map and give the map another color, this way you can give your projects a personal touch, very nice.

i did the exercise with my own company logo and one client's logo, it's simple, just create a 256 x 256 pixels icon, save as a transparent PNG in black-white and put it on one of your projects maps.

_{Customize your projects folders in Espresso}

Integrated FTP tool

setting up your server

_{Adjustable toolbar in Espresso}

After adding a new project, you will see the dialog appear for the setup of your server. This integrated FTP tool is very effective as it has some nice build-in features like the ability to:

• Browse remote server
• Update manually from local server to the remote server
• Merge files manually from local server to remote server
• Mirror the 2 servers and publish your files manually

While you're coding, you also have the ability (with the on/off button) to Quick Publish your changes just by saving your document.

_{Adjustable toolbar in Espresso}

Interface & Workspace

Files and Workspace

Starting a new project will result in making new folders and files, this can be done in the Files left bar. Above the File overview, you will see the Workspace, here are all the files that you have opened. Preview your files by clicking the Eye icon (shortcut Alt + Cmd + P).

The right Navigator pane is super handy. You have an overview of the overall HTML document structure. You're able to expand and contract the list just by simple clicking the tag. You see where images are placed in your document, you can view the comments, the CSS named groups etc.

Adjust the toolbar by adding or removing icons and functionalities

_{Adjustable toolbar in Espresso}

Sugars

extensions to the program

Extend the program possibilities with Sugars. Sugars are Espresso plugins, little bits of extra functionalities. These are developed by 3rd-party developers. Check the sugar page on the Macrabbit site to see functionalities. You can also choose different themes.

• HTMLBundle.sugar
• HTML5.sugar
• ExpressionEngine.sugar
• CSS3.sugar
• TEA for Espresso.sugar
• jQuery.sugar

Visit the Sugars page: http://sugars.macrabbit.com/

The Sugar Forum

Syntax Inspector

Opening and closing tags

The syntax inspector is handy to control whether all html tags are closed. Control your code with this inspector to see if your document is well-structured.

Espresso Forum

Questions and info

As i'm just a beginner, FAQs and other information can be found on the forum. Here, you can follow the development of sugars, etc …

Shortcomings

some missing features

Although i am enthousiast about this editor, some features are missing in my opinion in the middle of my coding process:

• converting a html block selection in 1 action to the encoded entities
• snippets: i couldn't find yet the ability to adjust a snippet after it has been added in the user section
• a floating pane like the syntax inspector with the sugars in it would be handy

Note: you can integrate Snippets app with Espresso, but you'll have to purchase Snippets app first, read this blog article.