Espresso 3 beta is out!

Hooray! Espresso 3 is at last available as a public beta! I’ve been one of the few people using this version of the app for a while (yikes, is it years now?), and I think you’re going to love some of the new features. You’re probably going to dislike a lot of the rough edges, but for what it’s worth I’ve been using Espresso 3 as my primary editor for the past 4-6 months and haven’t run into any huge show-stoppers (note that I’ve been basically using it only to edit text, though; not so much with the server connections, since my recent work has been all git-managed for deployments).

In any case, the beta has practically no documentation included, so how about I introduce you to some of the new features you’ll find in Espresso 3?

Text Editing

LESS and SCSS, sitting in a tree

Probably my favorite feature in Espresso 3 (and one of the ones I had a big hand in developing) is support for LESS and SCSS. Just pop open a LESS or SCSS file and sigh in relief at the comprehensible syntax coloring. Give the CSS tools a spin and giggle as they actually work on nested rules.

“But,” I hear you say, “almost all editors these days support syntax coloring for LESS and SCSS! What’s so special about Espresso 3?” I’m so glad you asked, because it leads me to one of my other favorite features: Dynamo.

Try this:

  1. In Espresso 3, create a new empty project; mine’s called “Blow my mind”

  2. Add a new file in the project named index.html and give it the following contents:

    <!DOCTYPE HTML>
<html lang="en-US">
<head>
    <meta charset="UTF-8">
    <title>My excellent file</title>
    <link rel="stylesheet" href="css/styles.css" />
</head>
<body>
    <h1>Is this text red?</h1>
</body>
</html>
  3. Preview your file. The text is, sadly, not red.

  4. Add a new folder named css, then add a new file inside named styles.scss with the following contents:

    h1 {
    color: red;
}
  5. Now for the magic: rename the folder css to css.esdynamo. Wait for it…wait for it…
  6. Observe the fact that Espresso has created a folder called css with a file named styles.css inside; switch back to your preview and observe your lovely red text.
  7. Try changing the color of your header in styles.scss and watch what happens in your preview.

Welcome to Dynamo.

(Dynamo can actually do a lot more than just automatically render CSS pre-processors, but I’ll leave that for another day.)

Welcome home, text re-indentation

In CSSEdit, you could automatically re-indent your CSS. This was incredibly handy for working with “minified” CSS, or fixing a co-workers’ poor “style choices”.

Espresso 2 sadly never gained this ability, and in fact largely dictated a single style of CSS formatting.

In Espresso 3, text re-indentation is back, and it lives in the Text menu. Not only that, but you can specify a specific style and have that be used for re-indentation. Whoo hoo!

Note that this is one area that is probably undertested; there will be bugs here.

Tab it your way

One of the most common complaints directed at Espresso 2 came from people who disliked the vertical tabs of the Workspace. In Espresso 3, you can continue to use the Workspace just like you always have, or you can ditch it in favor of tabs along the top of the window: just click the arrow next to “Workspace” and select Show Tab Bar.

Quick Open and the new filter bar

Want to find a file whose name you know? The Quick Filter now lives at the bottom of the left sidebar.

Want to find a file whose name you mostly know? Try the new Quick Open feature, accessible with command shift O (that’s the letter “oh”) or via the “target” menu icon in the toolbar.

Additionally, if you want a little more context about the files in your Workspace, click the star icon in the filter field at the bottom right corner of the left sidebar. You’ll get a filtered look at your project files showing only items that are currently open in the Workspace/tabs.

Zen and the art of snippet maintenance

Snippets no longer live in a floating window! Huzzah! Instead, you can find your snippets in the “zen” toolbar item. Snippets themselves are largely unchanged (same syntax, although the editor now syntax colors them so it should be easier to see when a stray question mark is going to trigger a tab stop zone instead of outputting a PHP variable!), but there are two nice additions worth calling out:

  1. You can specify a language context for your snippets (so Javascript snippets only show up in Javascript, for instance)
  2. If you save a snippet to the “Favorites bar” it will show up in the toolbar next to the “zen” icon

No, you can’t sort your snippets into groups. Give that one a rest already, there’s like a million other more important things on Jan’s plate! ;-)

Navigating the Navigator

If you’ve used Espresso 2 for any length of time you probably know that the Navigator can be a real boon for finding things quickly, but gets less and less useful the more complicated your file becomes. Now you can click the “filter” icon in the upper right corner of the Navigator and filter things visually based on their names. Whoo!

Syncing files

In Espresso 2, servers were saved within the context of individual projects. So if you had a single server that hosted multiple websites, you had better keep the username and password handy, because you were going to be entering it a bunch.

Espresso 3 does away with this, and allows you to instead save server credentials globally, and associate specific paths to projects.

If that makes you excited, check the upper left corner of your window for a happy little cloud icon; this is “Clodette” (I hope Jan doesn’t get mad at me for sharing her codename), and she’s going to be your very good friend.

To get started, click Clodette and choose Connect To; this interface will allow you to quickly create a new connection, or connect to a previously-saved server for file browsing and after you are done configuring the connection, the server will open up in your Workspace alongside your files. This is the most basic method for connecting to a server from an Espresso 3 project, but the connection will not persist after you close it in your Workspace.

For the full meal deal, click Clodette and choose Servers + Settings. This will replace your project sidebar with three new sections: Sync, Places, and Sync Specific Folders. Adding a server connection to Sync or Places is roughly equivalent to adding a server to an Espresso 2 project, except explicitly tied to a Sync or Browse server action. The main difference is that instead of accessing your servers in a list within the left sidebar, you will access them from Clodette (which will add them to your Workspace).

Sync Specific Folders is where the really fun new stuff comes into play. From here, you can add a sync server that only operates on a single folder in your project (just click the folder icon next to the folder you want to sync). So for instance, if you are building your website out with Gulp or whatever, you can attach a sync server to your build folder (in Espresso 2, you would need a secondary project for that folder to sync it). Or you could sync your assets folder to a CDN server and your program logic to another. The possibilities are pretty wide-open.

Just like the other server configuration options, adding a server basically saves a bookmark that you can then open in your Workspace when you need to work with it actively.

And of course since what Espresso is saving is the server path that’s associated with your project (or project’s folder), you can easily use your server credentials across multiple projects without needing to re-enter them.

Previewing

This is one of the buggier and more incomplete sections of the app, but it deserves mention. Espresso 3 now allows you to preview files either in Espresso, or in basically any other browser on your computer. Live reloading (and, although it’s not really functional yet, X-ray) come along for the ride regardless of where the preview is living.

No longer do you need to wonder why your swanky CSS3 is failing in weird ways; simply open it up in Chrome, Safari, Firefox, etc. and observe the behavior in a more modern rendering engine (Espresso is stuck with an older version of WebKit for technical reasons largely out of MacRabbit’s control).

But…what about my custom syntax coloring?

Older syntax themes are probably going to break with Espresso 3 (let’s be honest: a lot of them broke with Espresso 2). But fear not! For those of you with excellent taste in themes, Earthworm and Quiet Light are both up and running for Espresso 3, and I have additionally created a SCSS template for generating your own themes. You can find both here (the themes are included as examples with the template generator):

https://github.com/onecrayon/E3-Theme-Generator

Will this make it easier to create themes for Espresso? Who knows! On the plus side, it doesn’t require you to know much of anything about the specific syntax zones being used, but I will admit that the massive number of possible SCSS variables you can use might be a bit confusing. Now that Espresso 3 is actually out and other people might be using this beast, I am hoping to come back to it and improve it in my spare time. Feedback and pull requests are also always welcome!

Pricing

Before you ask, here’s what you’ll get from me: ¯\_(ツ)_/¯

Jan decided on Espresso 3’s new pricing scheme after I left MacRabbit, so you know as much as I do. I can say that Espresso 2’s pricing (and particularly it’s ridiculously lenient and dirt-cheap upgrade policy) was non-sustainable, though, so a pseudo-subscription makes a lot of sense from a business standpoint. I’m not too worried about it, frankly. One thing I learned working at MacRabbit is that Jan always, always has users in mind when making decisions for Espresso whether he’s making design decisions or figuring out upgrade and pricing policies.

So should I use Espresso 3?

Not that I’m incredibly biased or anything, but yes! At the very least, if the features I described above sound interesting, you should definitely test it out. Depending on what you rely on day-to-day, some of the rough or unfinished edges might prevent you from using it as your main editor until it’s a little more fleshed out and less “beta”, but there’s a lot to love about Espresso 3. In particular, one thing I didn’t mention is that Espresso 3 is a complete visual refresh for the editor and looks amazing. Seriously, Coda is eating its heart out, and I think I hear BBEdit crying softly in the corner right now.

And although I’m no longer affiliated officially with MacRabbit, feel free to ask me if you have any questions! I’m still hacking away at my custom Espresso plug-ins, and aside from Jan am arguably the person most familiar with the current state of Espresso. Rough edges and all, Espresso is still my absolute favorite editor for front-end development work (and just general happy state of mind while writing code). Sure, some of that is years worth of habit and lingering loyalty from working at MacRabbit, but you know what? Every good piece of software needs someone to proselytize it, and even in its current beta state Espresso 3 is a very good piece of software.

Don’t just take my word for it, though: try it yourself!

14 responses to “Espresso 3 beta is out!”

Leave a response

  1. Thomas Günther says:

    Thanks a lot for your summary!
    It really is a super promising beta. Quick Open, Zen, external preview, the amazing UI (as expected) and finally SCSS support had me unproductively clicking around the application the whole day. So awesome. Even just the confirmation my all time favorite macOS application is not dead is awesome by itself. The subscription pricing sounds like it will prevent a future zombie Espresso. Great!

    The decision about the internal old-webkit-based preview and the external preview without overrides or dynamic content like PHP really is a dilemma. I’m not sure what’s more important. Maybe there is a solution that enables overrides in external browsers similar to Emmet LiveStyle?

    Posted 12:59 PM on Nov. 26, 2016 ↑ ↩

  2. orsi says:

    Thank you very much for this unofficial «tutorial» for Espresso 3 beta. It helped me a lot to explore the hidden power of my favorite development tool. I’m looking forward to the final release.

    Posted 3:12 PM on Nov. 27, 2016 ↑ ↩

  3. Mario says:

    SCSS suport does not work. :-(

    My folder structure:

    foo/scss (with SCSS files
    foo/css (with compiled files)

    If I add foo als project and work on a scss file, nothing happens in in the css folder.

    Hope you can fix this.

    Posted 9:34 AM on Nov. 28, 2016 ↑ ↩

    • Ian Beck says:

      You’ll need to rename your SCSS folder like so:

      foo/css.esdynamo

      Once you do that, your foo/css folder will start auto-generating its contents whenever you make a change in the SCSS folder.

      For a little more context, Dynamo is always opt-in; it will never compile things in your project as it finds them unless you explicitly tell it to. However, it does have two modes:

      1. Compile tagged folders (this is what I am describing here)
      2. Compile the entire project (I haven’t described this at all, because it’s got a lot more complexity to it, but basically if you opt into this method of compilation all eligible files in your project will be compiled into a build folder rather than into renamed folders within the project)

      Posted 9:53 AM on Nov. 28, 2016 ↑ ↩

      • Joey Anthony says:

        Question for those of us who don’t nest our .scss files (mine live in the theme directory alongside my .css files). Is there an easy way for dynamo to pick up on this structure and compile my css for me?

        If not, I can continue to use Codekit, but once live reloading gets re-implemented, it would be interesting to see how this all comes to together.

        Posted 8:20 AM on Mar. 27, 2017 ↑ ↩

        • Ian Beck says:

          Any plain CSS files in an .esdynamo folder will simply be copied as-is. So if you add that extension to your existing theme folder, Espresso should compile everything across into your original theme folder. If you have a file that you do not wish to copy across (because it is imported by an SCSS, for instance), prefix the filename with an underscore: _only_importable.css

          Posted 9:34 AM on Mar. 27, 2017 ↑ ↩

  4. orsi says:

    I wonder, what the «ToDo™» entry inside the Project dropdown could mean?

    Posted 12:02 PM on Nov. 28, 2016 ↑ ↩

  5. Mario says:

    Just to understand it right. The Dynamo/Compile/Reload “thing” doesn’t work with php sites, right? I mean, when working on a CMS (WordPress, ProcessWire, whatever) there’s no way of live reloading and previewing when working with scss files.

    Posted 7:49 AM on Nov. 30, 2016 ↑ ↩

    • Ian Beck says:

      Since live reloading is not currently implemented in the beta, I can’t really say. Hopefully Dynamo will be smart enough to pick up on override comments in SCSS/LESS files and do the right thing, but we’ll have to see how the live reloading works once it’s up and running.

      Posted 11:47 AM on Nov. 30, 2016 ↑ ↩

  6. David Lewis says:

    The issue I’m having is when I try to break up my SASS into multiple files inside /css.esdynamo @import works fine and compiles to one file in /css but none of the SASS variables seem to be accessible across files. So if I have:

    /css.esdynamo/main.scss
    /css.esdynamo/_variables.scss
    /css.esdynamo/_typography.scss

    My main.scss file includes both partials and the typography file tries to use $colour-blue defined in variables.scss I get dynamo errors and live preview dies. Maybe this just hasn’t been implemented yet? I could just code everything in a single SASS file but that’s not very tidy.

    Posted 3:15 PM on Dec. 15, 2016 ↑ ↩

  7. Frederico Leonardo says:

    I am SO happy that Espresso has returned. Thanks for writing this. Would you be interested in writing a more detailed post about Dynamo?

    For example, I’d like to tell it where to compile my styles. I could have:

    /scss.esdynamo/styles.scss
    /scss.esdynamo/_main.scss
    …

    And have Espresso compile everything into a style.css file in the root folder.

    I see it creates a settings.json file. Maybe that’s where some instructions need to go?

    Also, and sorry for taking your time, what is smart HTML? Can you describe it a little, or how it could work?

    Thanks!

    Posted 6:09 AM on Mar. 3, 2017 ↑ ↩

    • Ian Beck says:

      Apologies for such a late response to this! I didn’t notice I had a comment pending moderation. :-\

      Would you be interested in writing a more detailed post about Dynamo?

      I am hoping to get a more detailed post about Dynamo out in the future; just haven’t had a chance (the .esdynamo folder extension is the tip of the iceberg).

      And have Espresso compile everything into a style.css file in the root folder.

      You cannot compile files in an .esdynamo tagged folder into the root of the project. However, it is possible to compile root project files. It is also possible, with a little Javascript, to compile only files at a particular path into arbitrary other paths. Sadly, that’s a complicated enough topic that it needs a post of its own.

      what is smart HTML? Can you describe it a little, or how it could work?

      It is very similar to the .kit features documented here, but with a few more bells and whistles (and no custom file extension). If you’ve ever wanted to have HTML templates that compile into static files without needing commandline programs like Jekyll, you’re going to love the full Dynamo toolset.

      Posted 9:25 AM on Mar. 27, 2017 ↑ ↩

Leave a response