Unlimited WordPress themes, graphics, videos & courses! Unlimited asset downloads! From $16.50/m
Lessons:11Length:1.6 hours

Next lesson playing in 5 seconds

  • Overview
  • Transcript

2.1 GitHub's Atom

GitHub recently released a code editor called Atom. Built on WebKit, the extensible Atom is becoming a very powerful editor for Mac OS X and Windows.

Related Links

1 lesson, 00:40

Free Lesson

2.Code Editors
3 lessons, 23:10

Free Lesson
GitHub's Atom

Adobe's Brackets

Microsoft's Visual Studio

3.Runtime Environments
1 lesson, 10:41

Browser Development Tools

4.JavaScript Components
3 lessons, 39:01




5.Node Packages
2 lessons, 23:47

NPM and Browserify


1 lesson, 00:42


2.1 GitHub's Atom

Probably the most important tool that you will use not only for JavaScript development, but for development in general, is your code editor. Because this is where you're going to spend the majority of your time. And there are many editors out there to choose from. So it's just a matter of finding those that are appealing to you. And then spending time with them, finding the ones that best fits your needs. Of course there are some free editors and then there are others that cost money. But don't shy away from those that cost money because if it fits your needs, and if you are going to use it on a daily basis, then it's probably worth the price. In this lesson we're going to look at a free editor called ATOM. It's made by the people at GitHub. It is open-source and it is cross platform. So if those things are important to you, then this could be a consideration. There are two main selling points for ATOM. First of all, it is a hackable text editor. It's built upon a webkit and no js. And even though ATOM has only been out for a few months, you will find a lot of plugins and packages for it. The second selling point is its get integration. It is aware of get repositories. And it shows you what files have changed, what are new. And so on and so forth. Now, Git isn't as integrated as I would like it to be. There's no command line utility built in for committing and pulling and pushing and things like that, but we've been told that that is coming in the future. So to get ATOM, you want to go to atom.io. And if you're on a Mac, then you want to click on the big green Download For Mac button. It's going to download a zip file, so just extract the application and put it into your applications folder and then you're good to go. But there's also a command line utility called APM. It is a lot like Nodes Package Manager, NPM. In fact, you have to have nodejs and NPM installed in order to use APM. So, let's go to Nodejs.org, and let's download it and install it, and that will give us the ability to use the APM command line. If you've never installed Node before, it's very easy. Just follow the instructions, click on continue wherever you see continue, and accept the license agreement. And it's going to install nodejs, as well as NPM, and then once you have that installed, you can go into ATOM, and then enable the command line tools. So, let's go to ATOM. I already have it running. In the menu, we want to go to Atom and then Install Shell Commands. After we give it the authorization to install them, then we can use APM from the terminal. Before I get into the terminal, let's look at our preferences, because this is where we can see all of the packages that have been installed already and you can see that there are a lot there, but if we wanted to install a package we could do that very easily by going to packages and then searching. Like for example there is an auto complete package, in fact, there are many auto complete packages. There's too many to even talk about, but the one that I want to install Is called the Autcomplete Plus. And we could install that just by clicking on Install. Or we can do so in the terminal. The command is apm. Install, and then the name of the package. In this case it's autocomplete-plus, and then it will download and install that package. If you're on Windows, you can get Atom in two ways. You can download it with the big green download button, that'll give you a zip file that you just have to extract and then you're ready to go. Or you can install it with Chocolatey. And that's what I like to do because it is very easy to update atom this way. Chocolatey is a package manager for Windows. In fact it is described as a machine package manager. You can download and install applications with chocolatey. It's very useful and it's very easy to use. First of all, we have to install Chocolatey. And on the homepage they make it very easy. If you want to install it with just a plain command line you can click on this icon and it will add the command to your clipboard. If you want to install it with PowerShell. Then you click on the other icon, and then paste that into PowerShell. I'm going to use the command version. So, let's pull up the command line, and we need to run this as administrator, and then we just paste in the command. That one's kind of dangerous, but I trust these people. And, this is going to install Chocolatey for us. And once we have Chocolatey, then we can install Atom. And if we go back to Atom's package page on Chocolatey, we see that the command is choco install Atom. And this does take a few minutes to do. But I think that this is the best way to install Atom on Windows. Because it sets everything up for you, even the APM command line. So if we wanted to install that same package, autocomplete -+, then we can do that by using APM install autocomplete+ and it will install that package in Atom. But you can also look at and install the packages within Atom itself. So let's fire up Atom. And as they say, if you remember only one thing, make it Ctrl+Shift+P. Apple users will need Command+Shift+P. But this pulls up the command palette and that lists all the commands that you can run from within atom. The one that I want to run is Settings View Open. This will take us straight to the settings. And we can see all of the packages that are installed. We can also click on packages and do a search, let's do a search for autocomplete. Where we will find the Autocomplete Plus that we installed from the command line. And there it is right there. So now let's open up some code and see what it looks like. I'm going to open up a folder. It is a git repository for my event shim that I have on GitHub. This is a simple utility that adds some of the standard event API to IE8. And I don't want to really go over everything within this code because it's immaterial to looking at add item itself. But, I want to point out some of the changes that you're going to see on the left hand side. Because as we modify this file, we're going to see the colors over here change. Right now, there is nothing as far as out of the ordinary with the colors. It's kind of gray, the text is all gray. And this indicates that we have a clean repository. So, just to briefly give you an overview as to what this does, this adds the standard event properties and methods, to IE8's proprietary event object. So, things like the related target property and the target property, all of these things are added to the event object. So, you could write standard compliant event code in IE8 and it would just work, at least for the most part. It is IE8, so you can't do capture. But, for basic event code, it's going to work. Now one of the things that this does is it adds the addEventListener and removeEventListener methods to the HTML document objects, to Element objects, and then to the window itself. And what I want to focus on is this function, that adds an event listener to an object. Because whenever I wrote this I didn't take into account that the attachEvent method behaves very differently from the standard addEventListener method. Because the function that executes when an event occurs, actually executes within the context of window. And in order to be standard compliant it needs to execute within the context of the object. That the event listener was registered on. So it could be the documents or an element object, or even a window, if that's where you called addEventListener. So I need to change this from just passing fn to attachEvent but I need to bind that to this. Now whenever I save this, we're going to see that the file name on the left hand side changes to orange. This means that we have a change to this file and we can also see down in the lower right hand corner that there have been changes made to this file. If we click on this, it doesn't do anything unfortunately. It would be nice to pull up a diff or something like that. But you can also see that we are in the master branch. And I don't think that there's a way to change that as well. That would be nice to do, and I'm sure that eventually those types of features are going to be in Atom, we just have to wait for them. So the orange color over here indicates that a file has been changed, and if I add a new file, let's just call it food.js. We're going to see that it is green. That indicates that this is a new file. And then whenever we commit these changes, everything will go back to the grey color that we had before. First I'll need to add files and then I will commit them and for the message fixed attachEvent bug. And then whenever we go back to Atom, we're going to see that the colors are gone. And we are back to a clean repository. Now, of course, we can't cover everything within Atom because there are a lot of features there. But if you're looking for a development environment, this is a great place to start. Not only does it have basic JavaScript support, but it also supports a variety of other languages. And if doesn't support your chosen language then there's probably a package that adds that support.

Back to the top