Code for Coffee Logo

Adobe Edge Code review (aka Brackets): I want to believe

Posted on Jul 6, 2013

WYSIWYG editors: if not for them, I may have never become interested in development at all. As a kid, I tinkered with Visual Basic 3.0, Netscape’s Composer, and eventually Macromedia Dreamweaver. After years of exposure to various projects, languages, and environments I all but abandoned these types of editors and eventually fell into love with Sublime Text. Recently, I became aware of Adobe’s new Edge set of tools - more importantly, Edge Code (which happens to be based off an open source project called Brackets that is written in Javascript). Wait, Adobe + Open Source? I was intrigued. This review is based on the Adobe Creative Cloud version of Edge Code and not Brackets itself.

Installation is annoying. If you don’t have an Adobe Creative Cloud account, get the open source version of Brackets. Creating a Creative Cloud trial account in itself requires having to register, then downloading followed by updating the Creative Cloud client, and then installing Edge Code itself. Brackets is pretty straightforward: download and install. Once up and running however the editor looks semi clean.

One of the best features of Edge Code is the working sidebar; you select a folder and you can edit the files directly from the folder. Color coding for markup is clean and neat. You’re greeted with a quick tutorial of how the editor works. The first feature that you’re alerted to in the quick tutorial is the ability to edit CSS directly in the editor. To me, this feature seems amazing - sort of like the Chrome Developer Tools/Firebug merged into a text editor. So, I give it a shot and select the H3 tag and in the editor and select CTRl+E as the editor suggests. Bam, there’s the CSS for the element. Sounds too good to be true? It sort of is - as I learned when I tried to edit the paragraph tag, nothing happens. If your linked CSS file(s) do not define an element then nothing happens. So, if you pre-define all of your CSS styles out this feature is amazing. Arguably, perhaps I should be doing this for all projects but there are many times where I just begin coding and adding CSS in later.

[caption id=”attachment_81” align=”alignnone” width=”300”]Editing CSS in-line is awesome.. if only it always worked Editing CSS in-line is awesome.. if only it always worked[/caption]

Next up, live editing (CTRL+ALT+P). This feature allows you to directly launch into Google Chrome (and only Chrome at this time) and reflects changes that you make in the editor live. Works similarly to Chrome Developer Tools/Firebug, but this allows you to test CSS changes real time from your editor. Adobe intends to update this in the future. There also is the ability to edit colors in the same manner as CSS by right clicking on any color value and selecting edit. This is a pretty nice feature for on-the-fly editing for those of us who aren’t designers.

[caption id=”attachment_82” align=”alignnone” width=”300”]Edge Code's color editor Edge Code’s color editor[/caption]

In the end, I feel like Fox Mulder: I want to believe. Edge Code seems like a great tool in the making. For making edits to CSS I’d certainly use it if it were fully baked. As for now, I cannot see it replacing Sublime Text for every coding. However, I do see it as a useful tool for making quick edits when finalizing a page (especially if the CSS is fully designed or if I need a color tweak here/there). I’ll certainly keep my eye on the project and hope for the best.