2.2 Espresso

Another popular editor for Mac OS is Espresso. And although this is very simple, compared to Coda, it's positioned at a similar price tag, at $75. So let's see about its features. When you open Espresso for the first time, you're going to see the projects window. Now this is a big plus because it has this built-in project manager. So what you can do is create a new project from here. And I chose a folder from my desktop there, and it created this project. So let me show you that, here we go, Lessons, and I can actually edit this. I can edit the color. If I want to, I can change the little icon there, I can even choose a custom image for it. So all in all it's pretty good. Now if you double-click it will open this window ,which is the main user interface for the editor. So let's have a look. We have a workspace here, first of all. So if you open a file, that file will open in the workspace. So if you open multiple files, these will be your tabs basically, and you can switch between them any time you want. And you can also close them. Below that, you can find the project files. Basically, the list of all the files inside your added folder. You have some options here, create a New File, New Folder, maybe open the parent folder in the terminal window. So if you do that, for example, it will open the window and it's gonna set the path to that folder. Now, Espresso also features a built in FTP client, so you can add publish settings to your project. You just click this button here, Add Server, and you would just add the protocol here, FTP or maybe Amazon, the connection data, and you click Save. And then you can upload your files to that server. Now, let's open this file here. As you can see, the editor is on this side here. And you can click the Preview icon to open it in this built-in navigator. Now if we go back here, you're gonna notice on the right side we have a navigator. And basically, it's gonna help you get a tree structure of your document, basically a visual DOM. And that can be really helpful so, for example, let's open actually a bigger page here, for example, Lesson 8. So we have the head. We have a couple of styles here, and the cool thing is it detects inline styling. So you can click that and it's gonna highlight everything on the left. And then it also gets the comments here. For example, this is a comment, or this, or this. And it gets all the HTML elements as well. Now if you're in an HTML file here, you have the option to create the new tag using this button. and it can change it for example, header and it's gonna change the closing tag as well. Or you can comment this basically. So comment, uncomment. This is a nice button there. You can also toggle these, this navigator, on and off. And if you're on a CSS file, for example, this group of buttons will actually change from adding a new tag to adding a new style or a new group, like this. And again, you have the ability to comment or uncomment. And since we're here, let's actually have a look at the navigator inside a CSS file. So this is how it looks like. Again, we can see the comments, we can see the rules. Now, probably one of the best features of Espresso is the CSS Visual Builder that you can see on this side here. So, let's say, for example, that I'm in the body tag here. So inside the body tag, I can basically use this control here to write my CSS. So let's say I want to add a color, right? I would click on this, I would select the color, and the editor automatically adds that color. Maybe I want a font size here, 34 pixels. Maybe I want all the text to be bold. So just by using these, you can see the editor adds CSS rules. And this is really helpful for people that are not as good with CSS and they need a helping hand. You also have options for alignment here. You can even add shadows if you want. And then you have some other tabs like decoration. You can set background images, positions, again, shadows, borders, the layout, again. It can set margins, paddings, positions, the size if you want. If you want to make this 90%, you just select % here and then just type 90. And it's gonna add a width of 90%. So all in all, a really helpful feature. Now the last thing that I want to show you is about the preview. So if you preview the page we have this thing called x-ray. So if we click on the Inspector here, and then we select an element, we get some information about this. I can get a sense of the size of it and also the distance between the surrounding elements. And then if I want, I can add a new style to this directly. Or I can go to my style that's already applied, by double-clicking here. So it's not too complex, but it does give you the option to kind of view the page from a different perspective. And that's about it for Espresso. Now, let's see about the pros. And I think number one is that Espresso is a pretty light editor, especially compared to Coda. Number two, you have the option to create projects and connect to an FTP server, which is a good thing. Number three, you can create or you can add new themes to it, and that's good. Then, there's the navigator on the right side of the editor, which can be really helpful. Another pro is the fact that the CSS Visual Builder that I showed you can be really useful for people with limited knowledge of CSS. And it's a great learning opportunity as well. And then the last pro, I would say, is the fact that it supports plugins so we can always add extra functionality to it. All right, now for the cons. And the very first one is about the price. I think the price is a bit too high for an editor that doesn't really offer a lot, especially compared to Coda. Number two, the built-in inspector for the live preview, is a bit too basic, too limited. And then on number three, the tabs, they're not on the top of the editor window, they're on the side, which makes switching between windows a bit counterintuitive. This is not a big deal, but it could bother some people. And that's basically it for Espresso. Overall, a pretty good editor, especially useful for beginners but with a pretty high price tag, and again, it's Mac only. Next up, let's have a look at a Windows only editor, which is Notepad++. So that's coming up next.