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

2.2 Adobe's Brackets

Brackets recently hit the 1.0 mark. Like Atom, it’s built on WebKit, it’s extensible, and it’s cross-platform.

Related Links

1.Introduction
1 lesson, 00:40

Free Lesson
1.1
Introduction
00:40

2.Code Editors
3 lessons, 23:10

Free Lesson
2.1
GitHub's Atom
09:30

2.2
Adobe's Brackets
06:06

2.3
Microsoft's Visual Studio
07:34

3.Runtime Environments
1 lesson, 10:41

3.1
Browser Development Tools
10:41

4.JavaScript Components
3 lessons, 39:01

4.1
Require.js
13:31

4.2
Modernizr
09:43

4.3
Handlebars
15:47

5.Node Packages
2 lessons, 23:47

5.1
NPM and Browserify
08:42

5.2
Grunt
15:05

6.Conclusion
1 lesson, 00:42

6.1
Conclusion
00:42


2.2 Adobe's Brackets

There's no question that GitHub's Atom is a nice code editor. But it's also relatively new to this space, and as such, it's missing a lot of features that you would find in other code editors. So in this lesson we're going to look at another code editor called Brackets. And like Atom, this is free, open source, and it's also cross platform. So once again, if that is something that's important to you, then this could be something that you would want to look at. The website is brackets.io and even though this is open source, it is controlled by the people at Adobe. Which I find rather interesting because, well, it's Adobe. And this has been in development for quite some time, at least a year. And if finally reached 1.0, and like Atom, this is also based upon some version of WebKit. I'm not exactly sure which version, but there is a feature called Live Preview, which only works with Chrome. So I have a feeling it's based upon some Chrome version of WebKit, and it might even be based upon Blink. But the installation is simple, just download Brackets and install it. And there's two versions. There's one with this extract feature, which their description is that it inspects a PSD and lets you use some of the information from that PSD. But if you don't want extract, then you can download without extract. And I already have it downloaded and installed, so let me just pull it up and we'll take a look at the editor itself. It's very nice, in that it's nice and clean, and it's very responsive, even though it's based upon a browser engine. We can start typing in, everything is very responsive. But the big selling point of Brackets, at least in my opinion, well, there's really two. First of all, it is extensible, and because it is an application written in HTML, CSS, and JavaScript. Just about anybody can write an extension, so that's really cool, and the other thing is, as I mentioned, the live preview. If we go to the Brackets menu, and it's not there, If we go to File > Live Preview, this is going to pull up this page, index.html, inside of Chrome. And if you run it for the first time, you get a message that says that, this is a feature that only works on chrome. If you are going to modify the HTML in CSS, it's going to automatically update on the page. And if you modify it in JavaScript, it will automatically refresh the page whenever you save the JavaScript, and that makes sense. Because you don't want it to refresh the JavaScript as you're typing, otherwise you're going to get a lot of errors. So let's just change the text inside of this h1, that says getting started with Brackets. Let's just change that to simply say, hello Brackets. And then whenever we go back to the browser, we're going to see that that value did indeed change. Now we have, Hello World. And any change that we make, not only to the HTML but also to the CSS. So if we open up this main.css, let's change the background color to black. And I'm not even saving this file. If we go back to Chrome, we see that the background color is black. So this is a very nice feature, so that as you are typing your code, you can get immediate feedback, to see how exactly that's going to work in the browser. Well here we are in Windows, and I've opened up the event shim file from the previous lesson. I want to quickly go over a couple more features. And these are features that aren't just in Windows. I'm in Windows because I have everything set up like I want it, so keep in mind that everything you see here Is also applicable to Mac OS. So first of all I want to point out that Brackets has built in JS lent support. If you look in the lower right hand corner, we see that we have this little warning icon, this JS lent, and it says that there are some problems with my code, which is not surprising. So if you click on this, it shows you all of the problems, and then clicking on any one of the problems, takes you to that point within your code. So it's very nice that this linting tool Is built into brackets. The other that I want to point out, is the extension manager. Because having extensions just opens the doors to a wide variety of features, that you can add with just a couple of clicks of the mouse. For example, I wanted full get integration with Brackets. I went to the extension manager, and I downloaded this Brackets Git extension. It's the third in the list, and I'm not sure how this list is ordered. I don't know if it's by the amount of downloads, or the last time that something was updated. I don't know. But what I installed was Brackets Git. And all I did was click the Install button. I set the settings for this extension, which I took all of the defaults. And then everything was ready to go. And this add full Git integration into Brackets. So you can see over here, that we have eventShim which is the folder, the project that I'm in. But then there's also the branch. I'm in the master branch, and that's the only branch I have within this repository. So I can add a new branch, if I wanted to. I'm not going to, but let's say that I want to do some other things Git related. Over here in the top right hand side is the Git icon. If we click on that, another panel is brought up that gives us basically everything that we need to do with kits. So if I make a change, let me just find where I can change something. I guess I can remove one of these calls to the bind method. And whenever save this, we see that this file was modified, and we can stage that change and Commit it if we wanted to. And we can push it to the origin, if that's something that we want. You can also view the div of this file. We can see that there were two changes made. Something was done with the first line. And then of course the removal of the. So, even though brackets didn't have get integration by default, it was easy enough to add that integration thanks to the extensions and the extension manager. And there you have a very quick overview of brackets. It's a very nice code editor, and it will be interesting to see where it goes in the future.

Back to the top