tag:code.tutsplus.com,2005:/categories/bracketsEnvato Tuts+ Code - Brackets2018-02-27T13:45:35Ztag:code.tutsplus.com,2005:PostPresenter/cms-304949 Real-Time Code Collaboration Tools for Developers<p>Real-time code collaboration has been improving at a fast pace in recent years, impacting how developers work within teams touching the same code base. In this article we’ll dive into some of the best tools available today.</p><h2>The Tools</h2><p>
I’ll bet my lunch money any developer has experienced moments in their career when they need to share code or gain some assistance when something is just not going their way. Typical scenarios may involve isolated demos, copy and pasting snippets into gists, or pushing code to a repository. </p><p>The following tools (in no particular order) are a selection based on research, browsing over documentation, and with some; personal testing. While some tools listed will require a porting of code for the workflow, the majority allow developers to keep their code local without the big shuffle.</p><h2>
<span class="sectionnum">1.</span> Atom</h2><figure class="post_image"><img alt="" data-src="https://cms-assets.tutsplus.com/uploads/users/638/posts/30494/image/teletype.png"></figure><p><a href="https://teletype.atom.io" target="_self">Teletype</a> is a free and open source package created specifically for <a href="https://atom.io" target="_self">Atom</a>. For those concerned with privacy, shared data flows over an encrypted peer-to-peer connection. Servers never see your files or edits, thus maintaining privacy and minimizing latency between you and your collaborators.</p><figure class="post_image"><img alt="The Teletype Corporation Model 28 Line of Equipment" data-src="https://cms-assets.tutsplus.com/uploads/users/30/posts/30494/image/teletype.jpg"><figcaption><a href="https://en.wikipedia.org/wiki/Teletype_Model_28" target="_self">The Teletype Corporation Model 28 Line of Equipment</a></figcaption></figure><p>To install the Teletype package enter the following line from your terminal using the <code class="inline">apm</code> command:</p><pre class="brush: bash noskimlinks noskimwords"> apm install teletype</pre><p>You can also install Teletype from your <a href="https://flight-manual.atom.io/using-atom/sections/atom-packages/" target="_self">package manager</a> by entering “teletype” within the search bar. Once installed, follow this sequence of steps:</p><ul>
<li>Click the <strong>antenna</strong> icon in the Atom status bar located in the bottom right of the editor window.</li>
<li>Authorize Teletype through GitHub.</li>
<li>Choose Teletype from Atom’s package menu and select <strong>share portal</strong>.</li>
<li>Copy the Portal ID provided in the bottom right of your editor window.</li>
<li>Share the portal’s secret ID with collaborators via your preferred method.</li>
<li>Collaborators enter your portal by clicking <strong>Join</strong> in the collaboration window once they’ve entered your unique portal ID.</li>
</ul><p>After joining your portal, collaborators see a new tab in their workspace that lets them view and edit the contents of your active editor. Everyone gets their own cursor, and everyone can type at the same time; but only the owner can save. For now, Teletype only transmits text, so it’s a good idea to combine it with an application for voice communication. Ultimately the creators hope to incorporate these kinds of features directly into the package along with a long list of other improvements.</p><ul>
<li><a href="https://teletype.atom.io/">teletype.atom.io</a></li>
<li>
<a href="https://github.com/atom/teletype">teletype</a> on GitHub</li>
<li><a href="https://blog.atom.io/2017/11/15/code-together-in-real-time-with-teletype-for-atom.html" target="_self">Code together in real time with Teletype for Atom</a></li>
<li><a href="https://github.com/blog/2468-introducing-teletype-for-atom-code-collaboratively-in-real-time" target="_self">Introducing Teletype for Atom: Code collaboratively in real time</a></li>
<li>
<a href="https://www.youtube.com/watch?v=z1A4Zb9KY-c" target="_self">Teletype by Atom</a> on YouTube Zachary R Newton</li>
</ul><h2>
<span class="sectionnum">2.</span> Brackets</h2><figure class="post_image"><img alt="" data-src="https://cms-assets.tutsplus.com/uploads/users/638/posts/30494/image/brackets.png"></figure><p>This code editor by Adobe allows for the ability of real-time collaboration via an extension. To get started follow these steps:</p><ul>
<li>Open the folder containing your project.</li>
<li>Press the <strong>sync</strong> icon on the right toolbar.</li>
<li>Enter the same room ID.</li>
<li>Click the <strong>sync</strong> button again to leave the room, join the voice call, or fetch code.</li>
</ul><p>Brackets doesn’t allow for microphone access by default, but you can enable voice calls by launching brackets with the following command from your terminal:</p><pre class="brush: bash noskimlinks noskimwords">brackets --args --enable-media-stream</pre><p>The extension points to an author’s server by default, and no code is sent through another server as long as your version of Brackets supports <a href="https://webrtc.org/" target="_self">WebRTC</a> (most do).</p><ul>
<li><a href="http://brackets.io/">http://brackets.io</a></li>
<li>
<a href="https://github.com/multihack/multihack-brackets">multihack-brackets</a> on GitHub</li>
<li>
<a href="https://multihack.github.io/">multihack.github.io</a> (web version)</li>
</ul><ul class="roundup-block__contents posts--half-width roundup-block--list"><li class="roundup-block__content"><a class="roundup-block__content-link" href="https://webdesign.tutsplus.com/courses/introduction-to-brackets"><img class="roundup-block__preview-image" data-src="https://cms-assets.tutsplus.com/uploads/users/71/courses/362/preview_image/IntroBrackets.png"><div class="roundup-block__primary-category topic-webdesign">Brackets</div>
<div class="roundup-block__content-title">Introduction to Brackets</div>
<div class="roundup-block__author">Craig Campbell</div></a></li></ul><h2>
<span class="sectionnum">3.</span> Coda</h2><figure class="post_image"><img alt="" data-src="https://cms-assets.tutsplus.com/uploads/users/638/posts/30494/image/coda.png"></figure><p>Die hard Coda users might be unaware that there’s a real-time file sharing feature already included. Originally developed by <a href="https://www.codingmonkeys.de/subethaedit/" target="_self">Coding Monkeys</a>, this file sharing feature has lived within Coda quietly since version 1. It allows two or more users to share files over a LAN, or with any remote user through your computer’s IP address, or a special “Sharing URL” to connect a remote user to your file. This allows multiple users to work on the same file simultaneously in real-time.</p><p>To start, this real-time feature will require users to select the <strong>file sharing</strong> option from their system preferences menu. Once completed:</p><ul>
<li>Select the file you wish to share.</li>
<li>Click <strong>Share</strong> followed by the <strong>Bonjour</strong> button at the bottom of your editor window.</li>
<li>Copy the share url from Coda’s <strong>menu &gt; file</strong>.</li>
<li>The remote user will click the provided link (with Coda open) and your file automatically opens in their application.</li>
</ul><ul>
<li>
<a href="https://panic.com/coda/">coda</a> homepage</li>
<li><a href="https://qreativ.space/tutorials/software/coding/coda/coda-file-sharing.html" target="_self">Coda’s Unsung Feature</a></li>
</ul><h2>
<span class="sectionnum">4.</span> SublimeText</h2><figure class="post_image"><img alt="" data-src="https://cms-assets.tutsplus.com/uploads/users/638/posts/30494/image/remote-collab.png"></figure><p>Remote Collab is an open-source SublimeText plugin for remote pair programming, allowing multiple developers to work together on the same project in real-time. It can be installed through <strong>Package Control</strong> and found under <strong>RemoteCollab</strong>.</p><ol>
<li>Open the file you wish to collaboratively edit.</li>
<li>Open Command Palette using menu item <strong>Tools &gt; Command Palette.</strong>
</li>
<li>Choose <strong>Remote: Host Session.</strong>
</li>
<li>Give your IP address to the remote colleague.</li>
<li>Open the Command Palette using Sublime’s menu item <strong>Tools &gt; Command Palette.</strong>
</li>
<li>Choose <strong>Remote: Connect to Session.</strong>
</li>
<li>Enter the IP address of the host whose session you wish to connect to.</li>
<li>You’re now collaboratively editing a document with the host.</li>
</ol><ul>
<li>
<a href="https://packagecontrol.io/packages/RemoteCollab">RemoteCollab</a> (free/OS)</li>
<li>
<a href="http://teamremote.github.io/remote-sublime/">remote-sublime</a> (free/OS)</li>
<li>
<a href="https://floobits.com/">floobits</a> (paid)</li>
<li>
<a href="https://github.com/Floobits/floobits-sublime">floobits-sublime</a> on GitHub (paid)</li>
</ul><h2>
<span class="sectionnum">5.</span> CodePen</h2><figure class="post_image"><img alt="" data-src="https://cms-assets.tutsplus.com/uploads/users/638/posts/30494/image/codepen.png"></figure><p>If you’re a pro on CodePen then you’ll already know that you have access to “Collab Mode” allowing more than one person to edit a Pen at the same time. When you open Collab Mode, the URL for your Pen will change in your browser’s address bar. Copy this provided collab URL and share it with the people you desire to collaborate with.</p><p>Cloud-based tools like CodePen require developers to move parts or entire pieces of their workflow into a hosted environment. Collab comes with a chat feature as well, allowing communication between one another during your session. Each time someone types there is a notification indicated as a green border on the bottom of the chat button. Collaborators can edit and type at the same time, however collaborators cannot save, but can fork and heart. Collaborators can even add external files, and edit settings–but not descriptions.</p><p>Depending on your plan you’ll be limited to the amount of collaborators that can be invited, and only the owner of the pen needs a pro subscription; everybody else can have free accounts, or be anonymous. If you’re collaborating on a public pen and want to save the progress, you can click the <strong>Fork</strong> button to save the exact state at that time of your current progress. A great tool for simple scenarios when working on initial prototypes, demos or even coding interviews is a must.</p><ul>
<li><a href="https://codepen.io/">codepen.io</a></li>
<li>
<a href="https://blog.codepen.io/documentation/pro-features/collab-mode/" target="_self">Collab Mode</a> on CodePen blog</li>
<li>
<a href="https://vimeo.com/154349112" target="_self">Collab Session</a> on Vimeo</li>
</ul><h2>
<span class="sectionnum">6.</span> Codeshare</h2><figure class="post_image"><img alt="" data-src="https://cms-assets.tutsplus.com/uploads/users/638/posts/30494/image/codeshare.png"></figure><p>Codeshare is a web app service that is very simplistic in its goals. It still requires code to be ported over to its service from your local environment, but it also gives you the ability to talk over video. This can be used for different types of scenarios like code reviews, internal hiring interviews, and learning while still offering the ability to debug code with peers. </p><p>Sharing code is free, but only remains saved for 24 hours unless you login to create an account giving you the ability to save your progress.</p><ul><li><a href="https://codeshare.io/">codeshare.io</a></li></ul><h2>
<span class="sectionnum">7.</span> Visual Studio</h2><figure class="post_image"><img alt="" data-src="https://cms-assets.tutsplus.com/uploads/users/638/posts/30494/image/visual-studio.png"></figure><p>Visual Studio is an editor by Microsoft that’s had a pretty hot run since its release. It’s also working on an extension for real-time collaboration with other Visual Studio users called “Live Share”. Live Share allows you to share the context of the code, so you get instant, bi-directional collaboration.</p><p>At this time of this writing, Live Share isn’t available to the public, but I was lucky enough to get a tour by one of its developers <a href="https://codepen.io/davidkpiano/" target="_self">David Khourshid</a>.</p><p>To begin using Live Share you’ll need an extension installed and signed in with a Microsoft account, or authorized using your GitHub account. The inviter will then send a link that reopens your editor on the collaborator’s end with the Live Share session, giving collaborators the ability to view the entire project files from the editors file pane.</p><p>Here are some observations made during my preview:</p><ul>
<li>Icon in bottom lets you find the file the person is editing.</li>
<li>Can share a local server through a port by opening up the command palette, and look for Live Share Local Servers.</li>
<li>Both sides can save the file being worked on.</li>
<li>Node projects can accomplish tasks such as live debugging.</li>
</ul><p>I’m currently an Atom user, but I was thoroughly impressed after my tour of the capabilities Live Share brings to Visual Studio. If you’re a Visual Studio user, I’m happy to say you’re in for a very big treat.</p><ul>
<li><a href="https://code.visualstudio.com/">code.visualstudio.com</a></li>
<li><a href="https://code.visualstudio.com/blogs/2017/11/15/live-share" target="_self">Introducing Visual Studio Live Share</a></li>
<li>
<a href="https://www.youtube.com/watch?v=BoHuTm--D0E" target="_self">VS Code: Showcasing The Power of Real Time Collaboration (and Other Cool Features)</a> on YouTube</li>
<li>
<a href="https://sec.ch9.ms/ch9/2bb5/d67e7e78-2ced-4b72-9353-31334c7a2bb5/CONN17T254_mid.mp4" target="_self">Introducing Visual Studio Live Share</a> video</li>
</ul><h2>
<span class="sectionnum">8.</span> Slack</h2><figure class="post_image"><img alt="" data-src="https://cms-assets.tutsplus.com/uploads/users/638/posts/30494/image/slack.png"></figure><p>I was floored when I first experienced the power of Screenhero (now integrated into Slack) that allows users to control your machine remotely.</p><p>Once the video call is initiated collaborators can walk through issues such as debugging while controlling your machine remotely. This feature is part of any paid plan, but not available for free accounts.</p><ul>
<li><a href="https://slack.com/">slack.com</a></li>
<li><a href="https://get.slack.help/hc/en-us/articles/115003501303-Share-your-screen-with-Slack-Calls" target="_self">Share your screen with Slack Calls</a></li>
<li>
<a href="https://www.youtube.com/watch?v=9Yyn1SN0ibY" target="_self">Screen Hero for Remote Pair Programming screen sharing</a> on YouTube<br>
</li>
</ul><h2>
<span class="sectionnum">9.</span> Codeanywhere</h2><figure class="post_image"><img alt="" data-src="https://cms-assets.tutsplus.com/uploads/users/638/posts/30494/image/codeanywhere.png"></figure><p>This code editor is built with collaboration in mind, providing a built-in terminal console for tasks such as ssh, ftp/sftp allowing developers to code from anywhere on any platform. </p><p>With Codeshare remote collaboration is as easy as sending a share link to a collaborator. Participants that click on this share link will get a preview on Codanywhere’s website, and each share can have its own unique permissions. You can share entire projects, files, or folders with any other developer anywhere in the world. Click on your fellow collaborator’s icon while pair programming and scroll to their current cursor position. Pair program with one or as many collaborators you want; there is no limit.</p><ul>
<li><a href="https://codeanywhere.com">codeanywhere.com</a></li>
<li><a href="https://codeanywhere.com/pricing">Codeanywhere pricing</a></li>
<li>
<a href="http://docs.codeanywhere.com/features/share.html">Codeanywhere docs</a> </li>
</ul><h2>Parting Thoughts</h2><p>There are certainly plenty of options available today for multiple developers to work efficiently with one another. Have you used any of the tools mentioned above? What worked and what didn’t? Did you experience any idiosyncrasies during your experience or tips that you’d like to share? Let us know in the comments below and happy coding!</p>2018-02-27T13:45:35.581Z2018-02-27T13:45:35.581ZDennis Gaebeltag:code.tutsplus.com,2005:PostPresenter/net-36781Creating Brackets Extensions<p>A little while ago I wrote about the <a href="https://dev.tutsplus.com/tutorials/deeper-in-the-brackets-editor--net-35527">recent updates</a> to the Brackets editor. <a href="https://github.com/adobe/brackets">Brackets</a> is an open source project focused on web standards and built with web technologies. It has a narrow focus and therefore may not have a particular feature you've come to depend upon. Luckily, Brackets ships with a powerful extension API that lets you add any number of new features. In this article, I'm going to discuss this API and demonstrate how you can build your own extensions.</p>
<p></p>
<p>It is <em>crucial</em> that you remember that Brackets is in active development. This article is being written in December of 2013. It is certainly possible that the code demonstrated below is now out of date. Keep that in mind and be sure to check the <a href="https://github.com/adobe/brackets/wiki/How-to-Write-Extensions">wiki</a> for the latest updates to the extension API.</p>
<hr>
<h2>Getting Started</h2>
<p>I'm going to assume you read my last article and are already familiar with the extension manager. This provides a simple, one click method of installing extensions. One of the best ways you can learn to write extensions is by looking at the work done by others (that's how I learned). I'd recommend grabbing a few extensions (there's almost 200 available now) and tearing apart their code. Don't be afraid to break a few while you're at it.</p>
<p>Brackets puts all installed extensions within one main folder. To find that folder, go to the <strong>Help</strong> menu and select "<strong>Show Extensions Folder</strong>". For my OS X install, this was located at <strong>/Users/ray/Library/Application Support/Brackets/extensions/user</strong>. If you go up from that folder, you'll notice a disabled folder as well. Brackets will make a valiant effort to load no matter what, but if you ever find yourself in a situation where Brackets has completely crapped the bed and simply will not work, consider moving potentially bad extensions into the disabled folder. Later on in the article, I'll discuss how you can monitor and debug extensions to help prevent such problems in the first place.</p>
<p>Begin by going to your user folder and creating a new folder, <code>helloworld1</code>. Yes, even though it is completely lame, we're going to build a HelloWorld extension. Don't hate me, I like simple. Inside that folder create a new file called <code>main.js</code>. Listing one shows what the contents of this file should be. Note that in this article I'll go through a couple of different iterations of the <code>helloworld</code> extension. Each one will be named with a progressively higher number. So our first example is from <code>helloworld1</code>, the next <code>helloworld2</code>, and so on. It would make sense for you to simply copy the code into one folder, <code>helloworld</code>, instead of copying each one by themselves. If you do, you'll have multiple related extensions running at once and that can definitely confuse things.</p>
<pre class="brush: noskimlinks noskimwords">Listing 1: helloworld1/main.js
define(function(require, exports, module) {
function log(s) {
console.log("[helloworld] "+s);
}
log("Hello from HelloWorld.");
});</pre>
<p>The first line defines our extension as a module that will be picked up by Brackets automatically on application load. The rest of the extension is a custom log message (you will see why in a second) and a call to that logger. Once you have this file saved, go back to Brackets, select the Debug menu, and hit Reload. (You can also use <strong>Command/Control+R</strong> to reload as well.) </p>
<p>Brackets will reload and ... nothing else will happen. The extension we built didn't actually do anything that we could see, but it did log to the console. But where is that console? Brackets provides an easy way to view the console. Simply go back to the <strong>Debug</strong> menu and select <strong>Show Developer Tools</strong>. This will open a new tab in Chrome with a familiar Dev Tools UI. In the screen shot below I've highlighted our log. Other extensions, and Brackets itself, will also log messages to this screen. By prefixing my log messages with <code>[helloworld]</code>, I can make my own stuff a bit easier to find.</p>
<figure>
<img width="600" alt="Brackets console messages" data-src="https://cdn.tutsplus.com/net/uploads/2014/01/s1.jpeg" height="268"><br>
</figure>
<p>Note that the full Chrome <code>console.api</code> works here. You can do stuff like this to format your console messages:</p>
<pre class="brush: noskimlinks noskimwords">
function log(s) {
console.log("%c[helloworld] "+s,"color:blue;font-size:large");
}</pre>
<p>Go crazy, but try to remove these messages before you share your code with the rest of the world. In case you're curious, you can't use dev tools in another browser, like Firefox, at this time.</p>
<hr>
<h2>Integration Points</h2>
<p>Now that you know the (very) basics, let's talk about what Brackets extensions can do to the editor:</p>
<ul>
<li>They can create keyboard shortcuts, allowing them to respond to custom keystrokes.</li>
<li>They can add to the top level menu.</li>
<li>They can add context menus (and to a specific area, like the file listing or the editor window).</li>
<li>They can create UI items. This can be a modal dialog or even a panel. (Currently the panel is locked to the bottom of the screen).</li>
<li>They can create a linting provider (essentially they can register themselves as a code checker for a file type).</li>
<li>They can create their own inline editors (a major feature of Brackets).</li>
<li>They can register as a documentation provider (for example, adding MDN support for docs).</li>
<li>They can integrate with Quick Find and Quick Open.</li>
<li>They can add custom code hints and syntax colors.</li>
<li>They can read the current file open in the editor as well as modify it. (They can also see the current selected text, if any.)</li>
</ul>
<p>That describes how extensions can modify Brackets, but what can extensions actually do in terms of code? Keeping in mind that you're writing extensions in pure web standards (HTML, JavaScript, and CSS), you actually have quite a bit of power. The only real limits relate to binary data. There is a File system API that gives you control over files but is limited to text data only. Luckily, you have a way out.</p>
<p>Any Brackets extension can integrate with Node.js. If you've got an existing Node.js package your extension can make calls to it and do, well, whatever Node.js can do, which is essentially anything.</p>
<p>Let's update our extension to integrate with the editor a bit better. I'll start by simply adding a menu item for the extension.</p>
<pre class="brush: noskimlinks noskimwords">Listing 2: helloworld2/main.js
/*
Based - in part - on the HelloWorld sample extension on the Brackets wiki:
https://github.com/adobe/brackets/wiki/Simple-%22Hello-World%22-extension
*/
define(function(require, exports, module) {
var CommandManager = brackets.getModule("command/CommandManager"),
Menus = brackets.getModule("command/Menus"),
AppInit = brackets.getModule("utils/AppInit");
function log(s) {
console.log("[helloworld2] "+s);
}
function handleHelloWorld() {
alert("You ran me, thanks!");
}
AppInit.appReady(function () {
log("Hello from HelloWorld2.");
var HELLOWORLD_EXECUTE = "helloworld.execute";
CommandManager.register("Run HelloWorld", HELLOWORLD_EXECUTE, handleHelloWorld);
var menu = Menus.getMenu(Menus.AppMenuBar.VIEW_MENU);
menu.addMenuItem(HELLOWORLD_EXECUTE);
});
});</pre>
<p>We've got a few changes here so let's tackle them one by one. You'll notice that the extension begins with three calls to brackets.getModule. All extensions have access to a brackets object that provides an API where we can load in core functionality from the editor. In this case the extension has loaded two libraries we'll need for the menu (CommandManager and Menus) and one which will be used to help initialize the extension (AppInit). </p>
<p>Lets talk about AppInit. You can see that most of the extension is now loaded with a appReady callback. This callback is fired when Brackets has completed loading and is generally considered "best practice" for extensions to make use of. </p>
<p>Registering a menu item takes a few steps. I begin by defining a "command ID", a unique identifier for the item I'll be adding to the UI. The typical way to do this is with the format <code>extensionname.someaction</code>. In my case, I used <code>helloworld.execute</code>. I can then register this command along with the function (<code>handleHelloWorld</code>) that should be called when the command is fired.</p>
<p>The final step is to add this command to the menu. You can probably guess that my menu item will be added under the View menu based on this value: Menus.AppMenuBar.VIEW_MENU. How did I know that value? Simple, I saw other extensions do it. Seriously though, there is no specific list of items like this yet. Don't forget that Brackets is open source. I can easily pop over to the GitHub repo and check it out. In this case, the file is <code>Menus.js</code>, located on <a href="https://github.com/adobe/brackets/blob/master/src/command/Menus.js">Github</a>. In there I can see where the various different core menus are defined:</p>
<pre class="brush: noskimlinks noskimwords">/**
* Brackets Application Menu Constants
* @enum {string}
*/
var AppMenuBar = {
FILE_MENU : "file-menu",
EDIT_MENU : "edit-menu",
VIEW_MENU : "view-menu",
NAVIGATE_MENU : "navigate-menu",
HELP_MENU : "help-menu"
};</pre>
<p>As a general rule of thumb, it makes sense to have at least a cursory understanding of what's available in Brackets itself. Your extensions will, from time to time, make use of multiple different features so it's definitely in your best interest to at least know the lay of the land. </p>
<p>After reloading Brackets, you'll now see the menu item in the <strong>View</strong> menu. Exactly where it is may be a bit random as you may have other extensions installed.</p>
<figure>
<img width="600" alt="View menu updated" data-src="https://cdn.tutsplus.com/net/uploads/2014/01/s2.png" height="447"><br>
</figure>
<p>You can actually be a bit more specific about your position. Again, this is where the source code will help you. The same file I linked to above also contains the addMenuItem definition. </p>
<hr>
<h2>Put Some Lipstick on That Pig</h2>
<p>Now that you've seen a simple example of how an extension can integrate into Brackets, let's look at how we update the UI. In the previous version of our code, an alert was used to send a message. While this works, it isn't very pretty. Your code can access the Brackets editor just like any other DOM modification code. While you <i>can</i> do anything you want, there are a few standard ways extensions update the UI in Brackets. (As a warning, in general you do not want to touch the DOM of the main editor UI. You can, but with future updates, your code may break. Also, users may not be happy if your extension changes something core to Brackets.)</p>
<p>The first method we'll look at uses modal dialogs. Brackets already uses this and has an API available for extensions to call. As a simple example, let's just update the HelloWorld extension to use a modal instead.</p>
<pre class="brush: noskimlinks noskimwords">Listing 3: helloworld3/main.js
/*
Based - in part - on the HelloWorld sample extension on the Brackets wiki:
https://github.com/adobe/brackets/wiki/Simple-%22Hello-World%22-extension
*/
define(function(require, exports, module) {
var CommandManager = brackets.getModule("command/CommandManager"),
Menus = brackets.getModule("command/Menus"),
Dialogs = brackets.getModule("widgets/Dialogs"),
DefaultDialogs = brackets.getModule("widgets/DefaultDialogs"),
AppInit = brackets.getModule("utils/AppInit");
function log(s) {
console.log("[helloworld3] "+s);
}
function handleHelloWorld() {
Dialogs.showModalDialog(DefaultDialogs.DIALOG_ID_INFO, "Hello World", "Same Important Message");
}
AppInit.appReady(function () {
log("Hello from HelloWorld3.");
var HELLOWORLD_EXECUTE = "helloworld.execute";
CommandManager.register("Run HelloWorld", HELLOWORLD_EXECUTE, handleHelloWorld);
var menu = Menus.getMenu(Menus.AppMenuBar.VIEW_MENU);
menu.addMenuItem(HELLOWORLD_EXECUTE);
});
});</pre>
<p>Note the addition of two additional Brackets modules: <code>Dialogs</code> and <code>DefaultDialogs</code>. The next change is in <code>handleHelloWorld</code>. One of the methods in the Dialog library is the ability to show a dialog (no surprise there, I suppose). The method wants a class, a title, and a body, and that's it. There's more you can do with dialogs, but for now, this demonstrates the feature. Now when we run the command, we get a much prettier UI. (Along with default buttons and behaviours to handle closing the dialog.)</p>
<figure>
<img width="600" alt="Dialog example" data-src="https://cdn.tutsplus.com/net/uploads/2014/01/s3.png" height="397"><br>
</figure>
<p>That's one example, now lets look at another: creating a bottom panel. As with dialogs, we've got support from Brackets to make it easier. Let's look at an example and then I'll explain the changes.</p>
<pre class="brush: noskimlinks noskimwords">Listing 4: helloworld4/main.js
/*
Based - in part - on the HelloWorld sample extension on the Brackets wiki:
https://github.com/adobe/brackets/wiki/Simple-%22Hello-World%22-extension
*/
define(function(require, exports, module) {
var CommandManager = brackets.getModule("command/CommandManager"),
Menus = brackets.getModule("command/Menus"),
PanelManager = brackets.getModule("view/PanelManager"),
AppInit = brackets.getModule("utils/AppInit");
var HELLOWORLD_EXECUTE = "helloworld.execute";
var panel;
function log(s) {
console.log("[helloworld4] "+s);
}
function handleHelloWorld() {
if(panel.isVisible()) {
panel.hide();
CommandManager.get(HELLOWORLD_EXECUTE).setChecked(false);
} else {
panel.show();
CommandManager.get(HELLOWORLD_EXECUTE).setChecked(true);
}
}
AppInit.appReady(function () {
log("Hello from HelloWorld4.");
CommandManager.register("Run HelloWorld", HELLOWORLD_EXECUTE, handleHelloWorld);
var menu = Menus.getMenu(Menus.AppMenuBar.VIEW_MENU);
menu.addMenuItem(HELLOWORLD_EXECUTE);
panel = PanelManager.createBottomPanel(HELLOWORLD_EXECUTE, $("&lt;div class='bottom-panel'&gt;HTML for my panel&lt;/div&gt;"),200);
});
});</pre>
<p>Let's focus on the changes. First, I dropped the Dialog modules as I'm no longer using them. Instead, we load up the PanelManager. Down in the appReady block I've defined a new panel using the PanelManager API method createBottomPanel. Like the menu command this takes in a unique ID so I just reuse <code>HELLOWORLD_EXECUTE</code>. The second argument is a jQuery-wrapped block of HTML (and in case you're wondering, yes we can do this nicer), and finally, a minimum size. This sets up the panel but doesn't actually execute it.</p>
<p>In the event handler, we have tied to the menu, we can ask the panel if it is visible and then either hide or show it. That part should be pretty trivial. For fun I've added in a bit more complexity. Notice that <code>CommandManager</code> lets us get a menu item and set a checked property. This may be unnecessary as the user can see the panel easily enough themselves, but adding the check just makes things a little bit more obvious. In the screen shot below you can see the panel in its visible state.</p>
<figure>
<img width="600" alt="Panel example" data-src="https://cdn.tutsplus.com/net/uploads/2014/01/s4.png" height="493"><br>
</figure>
<p>Right away you may be wondering about the panel HTML. Is there a better way to provide the HTML? Anyway to style it? Yep, lets look at a more advanced version.</p>
<pre class="brush: noskimlinks noskimwords">Listing 5: helloworld5/main.js
/*
Based - in part - on the HelloWorld sample extension on the Brackets wiki:
https://github.com/adobe/brackets/wiki/Simple-%22Hello-World%22-extension
*/
define(function(require, exports, module) {
var CommandManager = brackets.getModule("command/CommandManager"),
Menus = brackets.getModule("command/Menus"),
PanelManager = brackets.getModule("view/PanelManager"),
ExtensionUtils = brackets.getModule("utils/ExtensionUtils"),
AppInit = brackets.getModule("utils/AppInit");
var HELLOWORLD_EXECUTE = "helloworld.execute";
var panel;
var panelHtml = require("text!panel.html");
function log(s) {
console.log("[helloworld5] "+s);
}
function handleHelloWorld() {
if(panel.isVisible()) {
panel.hide();
CommandManager.get(HELLOWORLD_EXECUTE).setChecked(false);
} else {
panel.show();
CommandManager.get(HELLOWORLD_EXECUTE).setChecked(true);
}
}
AppInit.appReady(function () {
log("Hello from HelloWorld5.");
ExtensionUtils.loadStyleSheet(module, "helloworld.css");
CommandManager.register("Run HelloWorld", HELLOWORLD_EXECUTE, handleHelloWorld);
var menu = Menus.getMenu(Menus.AppMenuBar.VIEW_MENU);
menu.addMenuItem(HELLOWORLD_EXECUTE);
panel = PanelManager.createBottomPanel(HELLOWORLD_EXECUTE, $(panelHtml),200);
});
});</pre>
<p>As before, I'm going to focus on the changes. First note that I've included a variable called <code>panelHtml</code> that is loaded via require. This lets me define my HTML outside of my JavaScript code. (You can also use templating engines. Brackets ships with Mustache.) The HTML behind the panel is rather simple.</p>
<pre class="brush: html noskimlinks noskimwords">Listing 6: helloworld5/panel.html
&lt;div class="bottom-panel helloworld-panel" id="helloworldPanel"&gt;
&lt;h1&gt;My Panel&lt;/h1&gt;
&lt;p&gt;
My panel brings all the boys to the yard,&lt;br/&gt;
And they're like&lt;br/&gt;
It's better than yours,&lt;br/&gt;
Damn right it's better than yours,&lt;br/&gt;
I can teach you,&lt;br/&gt;
But I have to charge
&lt;/p&gt;
&lt;/div&gt;</pre>
<p>Returning to <code>main.js</code>, I've demonstrated another feature, loadStyleSheet. This lets you load an extension specific style sheet. I created a file, <code>helloworld.css</code>, with some simple (but tasteful) CSS styles.</p>
<pre class="brush: css noskimlinks noskimwords">Listing 7: helloworld5/helloworld.css
.helloworld-panel h1 {
color: red;
}
.helloworld-panel p {
color: blue;
font-weight: bold;
}</pre>
<p>Note that I prefixed my styles with a unique name. This helps ensure my classes don't conflict with anything built into Brackets. With these simple changes my panel now looks much better, and you can see why I'm known world wide for my superior design skills. </p>
<figure>
<img width="600" alt="Epic CSS" data-src="https://cdn.tutsplus.com/net/uploads/2014/01/a5.png" height="396"><br>
</figure>
<hr>
<h2>Packaging and Sharing Your Kick Butt Extension</h2>
<p>Of course, just creating the coolest Brackets extension isn't quite enough. You probably (hopefully!) want to share it with others. One option is to just zip up the directory and put it on your website. Folks can download the zip, extract it, and copy it to their Brackets extensions folder. </p>
<p>But that's not cool. You want to be cool, right? In order to share your extension and make it available via the Brackets Extension manager, you simply need to add a <code>package.json</code> file to your extension. If you've ever used Node.js, then this will seem familiar. Here is a sample one for our extension.</p>
<pre class="brush: noskimlinks noskimwords">Listing 8: helloworld6/package.json
{
"name": "camden.helloworld",
"title": "HelloWorld",
"description": "Adds HelloWorld support to Brackets.",
"homepage": "https://github.com/cfjedimaster/something real here",
"version": "1.0.0",
"author": "Raymond Camden &lt;raymondcamden@gmail.com&gt; (http://www.raymondcamden.com)",
"license": "MIT",
"engines": {
"brackets": "&lt;=0.34.0"
}
}</pre>
<p>Most of this is self-explanatory, but the real crucial portion is the engines block. Brackets updates itself pretty rapidly. If Brackets added a particular feature at some point that your extension relies on, you can add a simple conditional here to ensure folks don't try to install your extension on an incompatible version. (You can find a full listing of the possible settings on <a href="https://github.com/adobe/brackets/wiki/Extension-package-format#packagejson-format">the Wiki</a>.)</p>
<p>Once you've done this, the next part is to upload it to the <a href="https://brackets-registry.aboutweb.com/">Brackets Registry</a>. You will need to log in via your GitHub account, but once you've done that, you can then simply upload your zip. Your extension will then be available to anyone using Brackets. Even better, if you update your extension, the Extension Manager will actually be able to flag this to the user so they know an update is available.</p>
<hr>
<h2>What Else?</h2>
<p>Hopefully, you've seen how easy it is to extend Brackets. There's more we didn't cover, like the <a href="http://blog.brackets.io/2013/10/07/new-linting-api/">Linting API</a> and <a href="https://github.com/adobe/brackets/wiki/Brackets-Node-Process:-Overview-for-Developers#usage-example">NodeJS integration</a>, but this article should be more than enough to get you started. As a reminder, do not forget there is a large collection of extensions available for you to start playing with right now. Good luck!</p>2014-02-03T14:00:21.000Z2014-02-03T14:00:21.000ZRaymond Camdentag:code.tutsplus.com,2005:PostPresenter/net-35527Deeper In the Brackets Editor<h2>Brackets Turns 30 (Ditches the Minivan and Goes for the Jet Pack!)</h2>
<p>Nearly one year ago, Jeffrey Way <a href="https://net.tutsplus.com/tutorials/tools-and-tips/a-peek-at-brackets/">reviewed</a> the open source Brackets project. In the time since that review Brackets has come quite far, recently celebrating it's 33rd Sprint release. In this article I'll talk about many of the updates as well as demonstrate why Brackets is my favorite editor.</p>
<p><!--more--></p>
<hr>
<h2>Ok, What Is Brackets Again?</h2>
<blockquote class="pullquote">
<p>Brackets primary focus is on web development.</p>
</blockquote>
<p>Just in case you aren't aware, <a href="http://brackets.io">Brackets</a> is an open-source code editor focused on web development and built with web standards. Yes - an editor built with HTML, JavaScript, and CSS. It was originally released in July 2012 on GitHub (<a href="source">http://github.com/adobe/brackets</a>). While launched by Adobe, the commiters behind Brackets include folks from numerous sources. (As an aside, the Brackets team makes it a priority to focus on <em>non</em>-Adobe pull requests.)</p>
<p>Brackets primary focus is on web development. You get the expected editing and code hinting for HTML, CSS, and JavaScript of course, but you also get some powerful features on top of this. The "Live Preview" feature connects your Brackets editor to your browser. As you edit CSS, updates happen in real time providing instant feedback. Just selecting CSS items will provide highlights within the browser so you know exactly what you are working with. Another feature, quick editing, let's you select an HTML tag and instantly get to the CSS code that applies to that part of the DOM. What isn't directly supported in Brackets can be achieved via a rich extension API (again using web standards) to let developers add whatever feature they want. Extensions have been created for CSS linting, HTML validation, GitHub integration, and more. (I'm writing this article in Markdown within my Brackets editor using a Markdown extension that gives me a live update of the display.)</p>
<p>That's where Brackets began. Now let's talk about where it has come and what we can expect in the future.</p>
<hr>
<h2>The Basics - Covered</h2>
<blockquote class="pullquote">
<p>Improvements have been made in all aspects (HTML, CSS, and JavaScript).</p>
</blockquote>
<p>When Brackets first launched, it was something of an experiment. Could you use web standards to build an editor for web developers? Even more importantly, could you build something that would perform? Because this was something of an experiment and there were many low level architectural concerns, some things that you would expect in any decent editor, like renaming files for example, did not ship for a long time. Brackets was <em>not</em> marketed as being ready for prime time. Instead, the idea was to try something new and see what worked.</p>
<p>It is now fair to say that Brackets has all of the basics covered. Things like creating new files, deleting, opening from the file system, etc. are now baked in. While not necessarily something to crow about, if the lack of these basic features were the only thing keeping you from using Brackets, now is definitely the time to check it out. (And for those of you waiting for a Linux version - one is ready for you!)</p>
<p>Along with basic file operations, code hinting has been dramatically improved over time. Improvements have been made in all aspects (HTML, CSS, and JavaScript). Recently, Brackets added support for parsing and hinting of your own functions. Imagine that you've written two JavaScript functions. As you type your calls to these functions, Brackets tries to understand both the arguments and the types of arguments required and provide code support as you type. Here is a simple example:</p>
<pre class="brush: js noskimlinks noskimwords">/*
* @param {number} x First number
* @param {number} y Second number
*/
function ringTheBell(x, y) {
'use strict';
var total = x + y;
return total;
}
function sayHello(name) {
'use strict';
return "Hello, " + name;
}</pre>
<p>My code has two functions, one called <code>ringTheBell</code> and one called <code>sayHello</code>. I provided some additional metadata for <code>ringTheBell</code>, but that isn't required. Providing it though will make code hinting a bit nicer. Now I'm going to type a call to <code>ringTheBell</code>:</p>
<figure class="tutorial_image">
<img data-src="https://cdn.tutsplus.com/net/uploads/2013/11/ch1.png" alt="ch1" width="500" height="403" class="alignnone size-full wp-image-35532"><br>
</figure>
<p>Notice how it detected the arguments <em>and</em> and type. If I enter a value for the first argument, notice how the code hinting bolds the second argument:</p>
<figure class="tutorial_image">
<img data-src="https://cdn.tutsplus.com/net/uploads/2013/11/ch2.png" alt="ch2" width="500" height="458" class="alignnone size-full wp-image-35533"><br>
</figure>
<p>Even in cases where Bracket's can't determine the type of argument being used in a function, it will still provide you with the <em>name</em> of the argument which can be useful:</p>
<figure class="tutorial_image">
<img data-src="https://cdn.tutsplus.com/net/uploads/2013/11/ch3.png" alt="ch3" width="500" height="247" class="alignnone size-full wp-image-35534"><br>
</figure>
<hr>
<h2>Live Connect for HTML</h2>
<blockquote class="pullquote">
<p>Recently Brackets added <em>real</em> support for HTML live connect.</p>
</blockquote>
<p>Live Connect is probably one of the cooler aspects of Brackets. As I mentioned above, it lets you edit CSS and see updates in real time. Need to tweak padding or margins? You can use your editor and see the impact immediately. Browsers typically allow for this (Chrome Dev Tools), but don't normally provide an easy way to get those changes back out into source. Chrome has made strides in this area recently, but as much as I love Chrome, I'd rather write my code in an editor.</p>
<p>While that worked great for CSS, it did not support HTML. Brackets would automatically reload your browser on saving an HTML file, but if you wanted to preview your changes <em>without</em> a save, you were out of luck. Recently Brackets added <em>real</em> support for HTML live connect. As you modify your HTML code the browser will update in real time. You will also see highlights in the DOM for the area you're modifying. This doesn't really translate well to screenshots, but imagine the following HTML.</p>
<pre class="brush: html noskimlinks noskimwords">&lt;!doctype html&gt;
&lt;html&gt;
&lt;head&gt;
&lt;title&gt;Test&lt;/title&gt;
&lt;/head&gt;
&lt;body&gt;
&lt;h2&gt;This is a Test&lt;/h2&gt;
&lt;p&gt;
fooioikkkllklkkopkk
&lt;/p&gt;
&lt;/body&gt;
&lt;/html&gt;</pre>
<p>If I click in the <code>h2</code> above, Chrome will render a highlight of that item:</p>
<figure class="tutorial_image">
<img data-src="https://cdn.tutsplus.com/net/uploads/2013/11/1.png" alt="1" width="500" height="248" class="alignnone size-full wp-image-35528"><br>
</figure>
<p>If I modify text inside the <code>h2</code>, Chrome will reflect those changes immediately.</p>
<hr>
<h2>Working With Extensions</h2>
<p>Another important update to Brackets involves extension support. Behind the scenes, what extensions can do and how they can do it have been progressively improving with each sprint. While not necessarily that important to an end user, for people writing extensions the improvements had made it much easier to add new features to Brackets. If you can spend less time on boilerplate code and more time on features, that's an all around win for extending Brackets. Brackets also exposes the ability to use Node.js itself for extensions. This feature gives your extensions the ability to make use of anything Node can - which by itself pretty much opens the entire world to you. This is a rather complex topic but if you want to learn more, read this guide: <a href="https://github.com/adobe/brackets/wiki/Brackets-Node-Process:-Overview-for-Developers">Brackets Node Process</a>.</p>
<p>That's behind the scenes, but for the end user, Brackets has come a long way in making it easier to actually use extensions. Brackets now ships with a full-fledged Extension Manager. Available via the <strong>File</strong> menu or an icon in the right gutter, clicking it will launch the manager:</p>
<figure class="tutorial_image">
<img data-src="https://cdn.tutsplus.com/net/uploads/2013/11/2.png" alt="2" width="500" height="354" class="alignnone size-full wp-image-35529"><br>
</figure>
<p>Notice that for each extension have installed, you can see details about the version, links for additional information, and even better, a quick way to remove the extension if it is causing problems. At the bottom of this manager is a button that lets you install extensions from a URL. That's handy if you <em>know</em> what extension you want (as well as the GitHub URL), but what if you don't? Simply click on the <strong>Available</strong> tab:</p>
<figure class="tutorial_image">
<img data-src="https://cdn.tutsplus.com/net/uploads/2013/11/em_available.png" alt="em_available" width="500" height="353" class="alignnone size-full wp-image-35538"><br>
</figure>
<p>You can now browse (and even filter) through a <em>long</em> list of available extensions. Even better, installation is as simple as clicking a button. Note the Bracket's Extension Manager is even smart enough to recognize when an extension may not be compatible with your version of Brackets:</p>
<figure class="tutorial_image">
<img data-src="https://cdn.tutsplus.com/net/uploads/2013/11/em_bad.png" alt="em_bad" width="500" height="353" class="alignnone size-full wp-image-35539"><br>
</figure>
<hr>
<h2>Theseus Integration</h2>
<p>Probably the most exciting update to Brackets (at least for me) is the integration of the <a href="https://github.com/adobe-research/theseus">Theseus</a>. Theseus is an open source project created by folks from both Adobe and MIT. It is focused on providing debugging support for both Chrome <em>and</em> Node.js applications. Imagine being able to debug a Node.js application made up of server-side JavaScript as well as client-side code. Theseus provides just that. While still early in development, Theseus is now integrated into Brackets and can be used within the editor itself.</p>
<p>Theseus currently provides three main features:</p>
<ul>
<li>Code coverage in real-time</li>
<li>Retroactive inspection</li>
<li>Asynchronous call tree</li>
</ul>
<p>Let's look at a few examples of these. Theseus's code coverage support will show how often a function is called. It sounds simple, but can be powerful. I recently tried Theseus on a simple demo that made use of AJAX to call a server-side program. I noticed that my demo wasn't working, and the Theseus-integration in Brackets confirmed this. Notice the "0 calls" report by my callback:</p>
<figure class="tutorial_image">
<img data-src="https://cdn.tutsplus.com/net/uploads/2013/11/theseus1.png" alt="theseus1" width="600" height="386" class="alignnone size-full wp-image-35542"><br>
</figure>
<p>Turns out my server-side code wasn't set up right <em>and</em> I didn't write my JavaScript code to support an error callback for the AJAX call. This was literally the first time I played with Theseus and it immediately helped point out a problem in my code. After modifying my front-end code, I could see the difference right away:</p>
<figure class="tutorial_image">
<img data-src="https://cdn.tutsplus.com/net/uploads/2013/11/theseus2.png" alt="theseus2" width="479" height="350" class="alignnone size-full wp-image-35543"><br>
</figure>
<p>To be clear, this is all done in real-time. With Brackets open and Chrome open, I can click around in my application and see the updates in Brackets in sync with my actions in the browser.</p>
<p>On top of just seeing the call count, I can also click on an item and see what was passed to it. This is the retroactive inspection feature I mentioned above. Note that you can click into complex properties and really dig into the data.</p>
<figure class="tutorial_image">
<img data-src="https://cdn.tutsplus.com/net/uploads/2013/11/theseus_log.png" alt="theseus_log" width="500" height="303" class="alignnone size-full wp-image-35541"><br>
</figure>
<p>Finally, for asynchronous calls that my occur at an undefined time after their initial call, Theseus has no problem handling and correctly organizing these calls under their initiator.</p>
<figure class="tutorial_image">
<img data-src="https://cdn.tutsplus.com/net/uploads/2013/11/theseus_from_site.png" alt="theseus_from_site" width="500" height="179" class="alignnone size-full wp-image-35540"><br>
</figure>
<hr>
<h2>Adding New CSS Rules</h2>
<p>One of the earliest features in Brackets was inline editing for CSS items. You could put your cursor in any HTML element, hit <strong>CMD/CTRL+E</strong>, and Brackets would scan your project to find relevant CSS files as well as the appropriate matching rule. This made it incredibly easy to quickly update the style sheets applicable for your content.</p>
<p>This worked well - as long as your content actually <em>had</em> a matching CSS rule. In the latest update to Brackets, the editor will now recognize when an element doesn't have a matching CSS rule.</p>
<figure class="tutorial_image">
<img data-src="https://cdn.tutsplus.com/net/uploads/2013/11/addnewcss.jpg" alt="addnewcss" width="600" height="565" class="alignnone size-full wp-image-35530"><br>
</figure>
<p>You can now directly add a new CSS rule right from the inline editor.</p>
<figure class="tutorial_image">
<img data-src="https://cdn.tutsplus.com/net/uploads/2013/11/addnewcss2.jpg" alt="addnewcss2" width="600" height="281" class="alignnone size-full wp-image-35531"><br>
</figure>
<hr>
<h2>New Theme</h2>
<p>Finally, a new "shell" look is being added to Brackets. Currently available to Windows only (but will be in the OSX build soon), the "Dark" look is the future of the Brackets look and feel.</p>
<figure class="tutorial_image">
<img data-src="https://cdn.tutsplus.com/net/uploads/2013/11/dark.jpg" alt="dark" width="600" height="372" class="alignnone size-full wp-image-35535"><br>
</figure>
<hr>
<h2>What Next?</h2>
<blockquote class="pullquote">
<p>Your primary editor is a <em>very</em> personal decision for a developer.</p>
</blockquote>
<p>Your primary editor is a <em>very</em> personal decision for a developer. I found myself using Sublime Text a few months ago and noticed that something wasn't working right. Turns out, I was trying to use a Brackets feature. That day I switched from Sublime as my primary editor to Brackets. I still use Sublime (and to be clear, it is a pretty darn awesome editor!) but now my day to day work is done almost entirely in Brackets.</p>
<p>Obviously I'd love for you to go - right now - and <a href="http://download.brackets.io">download Brackets</a>. But if you want to dig a bit more before you commit (hey, I understand, building a relationship with an editor is a serious undertaking), check out these resources:</p>
<ul>
<li>First and foremost, the Bracket's <a href="http://brackets.io">home page</a> is your core location for everything about Brackets.</li>
<li>Even if you have no plans on contributing to Brackets, looking at the <a href="http://www.github.com/adobe/brackets">source code</a> on GitHub would be a great way to look at a <em>seriously</em> cool application built with web standards.</li>
<li>Have a question or a problem with Brackets? Head over to the <a href="http://groups.google.com/group/brackets-dev">Google Group</a> to post your question. That's where I go when I have problems and I typically get help pretty quickly.</li>
<li>Finally, if you want to know what's coming <em>next</em> with Brackets, you can find everything at the <a href="https://trello.com/board/brackets/4f90a6d98f77505d7940ce88">Trello board</a>.</li>
</ul>
2013-11-08T17:05:47.000Z2013-11-08T17:05:47.000ZRaymond Camdentag:code.tutsplus.com,2005:PostPresenter/net-28356A Peek At Brackets<p><a href="http://brackets.io">Brackets</a> is an interesting new editor on the scene that leverages HTML, CSS, and JavaScript to the max: it's built with those very technologies! What this means is that, particularly for frontend developers, the sky's the limit, when it comes to configuration and extensibility.</p>
<p>In this video, I'll go over some of what I consider to be the most innovate features in this new editor, including live previews, CSS highlighting, and quick edits.<br>
</p>
<div>
<iframe data-src="https://www.youtube.com/embed/HZkrlX7jJcg" width="600" height="450" frameborder="0"></iframe><br>
Choose 720p for best clarity, or <a href="https://cdn.tutsplus.com/net/uploads/legacy/2166_Brackets/A-Peek-At-Brackets.mp4">Download the video</a>.
</div>2012-12-07T17:30:29.000Z2012-12-07T17:30:29.000ZJeffrey Way