4.2 Atom

Atom is a text editor built by the folks at GitHub and its description basically says it all, a hackable text editor for the 21st century. Hackable because it's really customizable. You can change pretty much everything you want on it and really make it your own. So Let's have a look at it. This is the very simple and clean UI of Atom. So on the left side, we have again the file list basically, for the currently open project. And that's about it, basically. Here, where the editor is gonna be, at the beginning, you see a couple of quick tips. This shows some of the things you can do with Atom and also their corresponding keyboard shortcuts. So, let's actually open an HTML file here. And As you can see, very nice editor style right from the beginning. If you open multiple files, you'll see that they open in tabs on the top, so it's really easy to switch between them and also to close them like this. So, if you make a change to one of these files, you'll get a blue dot on it, telling you that, that file needs to be saved. And let's have a look at how you actually write code on this thing. So you'll do h1. This is a test. And as you can see it has a pretty cool code completion. So let's do another one, let's do a div, and we can choose between these. It automatically adds a class if you want. You can also do an ID here. So adding attributes here is actually very, very simple. You can just see the contextual menus that appear when you hit the space key, really nice. You can click on the More tab, that's gonna actually open a browser window. But all in all, it looks very, very good. Now let's go ahead and save this. And let me show you the fuzzy finder, which you can access using the command or control T. So once you hit this you'll basically have quick access to all of your files. So let's say you want to open the normalized.css file. Well I'll just hit No and I get to normalize.css. And I hit Enter and it opens that file for me, or let's do that again. Let's search, maybe for the Picture Fill script. There it is, really fast. And using the combination Command or Ctrl Shift P, you can now open the command palette which basically gives you access to everything that Atom can do. So do you want to add a project folder? Well that's fine, you know you can do this. So basically everything you find with the menus here you can find in this window. So let's say you want to install a package or something. Install package. Okay, so we can go to settings, View Install Packages and Themes. We can view the installed packages. So let's actually take a look at the settings here. The settings, very nice. Opens in yet another tab here on the top. So you can quickly access it. And this is very nice because you don't have to edit a file for this. You can setup a lot of different things like some general settings, editor settings here, indentation, font family, font size, line height, invisible characters. It's really customizable, and then you get to the key bindings and here you can see the entire list of shortcuts you can use. It's a very big list. So when you see this many keyboard shortcuts, you can know already that this is like a developer's editor. Because developers usually work a lot with the keyboard instead of the mouse. So having a lot of keyboard shortcuts can really help them. And then you have packages. Now packages, again, are like plugins. You can see the full list here with the version number. I guess this is the number of downloads. Also options for uninstalling and disabling it. And then you have access to themes. On themes, and this is really cool, you can basically choose a theme for the UI, which is this. And let's choose Atom Light. And we change this to this. And one theme for the syntax. So if we open this you can see the syntax looks like this. But if we change this to One Light, for example, it also changes the editor theme which is really, really cool. But I kind of like the dark version so I'm just gonna leave them at that. And it can also create your own style by editing the style sheet here. So this is a very, very customizable editor. Then you have the updates, and then you have all the packages. So, these are the community-built packages, basically. And you can install packages or plugins or themes. And you have a few featured themes here. And if you want a full list of the packages, you go to Atom.io and you'll get the full list there. Now Atom also features panes. So if you go to View, Panes, you can choose to Split Up, Down, Left, Right, for example, so let's do a Split Down here. Yeah and you can open actually another file in here and you can move things around for example. If you want to move this over here, you can do so and again this is really useful when working on large displays. Now a very cool feature of Atom is multiple selections and cursors. So for example, let's say you have these two images that both have the word cropped, and for some reason, you wanna change them. You wanna remove cropped and also change their extension from jpg to png. So a very easy way to do this is to use the multiple selection. So you would double-click this. You would select cropped, and then you would hit command or ctrl+d, and it's gonna select the next instance of that selected text. And if I have another one, it's gonna select it again when I press ctrl or command+d. And then I can quickly rename this or just delete it altogether, and the same goes for jpg, png, there we go. And I can also use multiple cursors. So let's say that I have a list with list item and some items inside. So let's just past that a couple of times. Now, let's say that I want to change the text here all at once. So instead of item, I need to change it to something else. Well, while holding a command or control. I can quickly click there and chose Item number. And I can edit in multiple places at once and that is multiple cursors. All right and those are just some of the features of Atom. As you can see this is a pretty good editor. So let's have a look at the pros and cons. And we'll start with the pros because there are lots of them. First of all, it is free, it is open source, licensed under MIT, and it is cross-platform. BIg, big plus there. Then, it's really customizable, from the thousands of plug-ins and themes created by the community. You can really customize it and make it your own. Then there's the fuzzy finder, which is really helpful for finding and opening files just by typing their file name. Then multiple selections and multiple cursors, big plus, and multiple panes, especially useful when you're working on large displays. Then there are snippets, and these are reusable pieces of text that can be called with just a keyword, really helpful. Finally, the preference UI or the user interface. It's really good when you have a visual user interface to control your preferences instead of a text-based file. So that's a big plus. Now for the cons and for the cons really the only one I can think about is maybe the lack of a project management, of a built in project management system, or an FTP client. But this functionality can be achieved using plugins so it's not such a big deal. Overall Atom is a very, very good editor. Now let's have a look at one more editor, and I left this for the end, it is Sublime Text.