Introducing Brackets – An Open Source Code Editor for Web Developers
A guest post by Ingo Richter, a Computer Scientist/Web P&A with Adobe Systems who is currently working on Brackets and you can find him @ingorichter.
For example, placing the cursor on the
<H3> HTML element and pressing
Ctrl/CMD+E will open the Quick Editor to show you all of the matching CSS rules for this element, and in which CSS file the rule is defined. Hit
ESC and the Quick Editor will go away. That’s easy in Brackets:
Getting Started with Brackets
First we need to get a copy of Brackets. You have two different ways to get Brackets:
- Download the latest installer from brackets.io.
- Clone the GitHub repositories and build it yourself.
For a first time Brackets user, I recommend downloading the latest installer. Brackets is available for Mac OS X (10.6 through 10.9), Windows (XP, Vista, 7, 8.x), Linux (32- and 64-bit)
Note: The Linux version is mostly driven by the great Brackets community. So expect some rougher Edges for the Linux version. The Brackets wiki has more details about the Linux version.
After you have downloaded Brackets to a local directory, you need to install Brackets on your machine. To start the installation on Windows and Linux you need to start the installer by double-clicking the
deb file that you downloaded. On OS X, you need to double-click the
dmg and drag Brackets to your Application folder. That’s it!
To use the Live Preview feature with Brackets, you need to have the Chrome Browser installed. Otherwise Brackets will tell you to get it the first time you want to use Live Preview. But why wait? Get it now and you are ready to explore Brackets.
Now find the Brackets Application on your system and launch it. You should now see something like this:
Wouldn’t it be great to develop your website a little more interactively? And I don’t mean the usual
refresh cycle that you usually have to go through. I mean truly interactively.
Now is a good time to try Live Preview that provides this interaction. Look for the Thunderbolt Icon in the upper right corner of the Brackets Window. Click on it, and Brackets will open your HTML page in Chrome. The first launch brings up this dialog, telling you a bit about Live Preview. Click OK and Chrome will launch and display the index.html page.
Next, make some changes to the HTML document. You can immediately see your changes in Chrome without reloading the page. This is a great productivity boost and it makes developing HTML pages so much easier.
Let’s change the background color of the page:
- Place the cursor inside of the
Ctrl/Cmd+Eto open the Quick Edit window to change the CSS rule for the body tag.
- Place the cursor after the
background-colorproperty and change it from #FFFFFF to #C00001. You can even see how the background color changes while you are typing.
To finish Live Preview, click again on the Thunderbolt icon:
We’ve also integrated a Node.js server into Brackets to enable advanced features like Live Preview and Extension Management.
In the next post I will give you more information about building your own Brackets Extensions.
We briefly scratched the surface of Brackets in this post. I showed you where to download the latest version, how to install it on your machine, and how to have your first Live Preview session. I gave you a brief overview of the components that we use to build Brackets and where to find Extensions to add new features to Brackets.
Not a subscriber? Sign up for a free trial.
Safari Books Online has the content you need
About the author
|Ingo Richter is a Computer Scientist/Web P&A with Adobe Systems, and is currently working on Brackets. He has successfully worked through five release cycles of the Adobe Creative Suite and is experienced in creating products from start to finish. He moved from Hamburg, Germany to the Bay Area to explore the Wild West. You can find him on Twitter @ingorichter.|