Notes from Brackets / Adobe Edge Code and Inspect preso

August 14, 2013

Last night Rob Huddleston came to our Sac Interactive meeting and gave a great presentation on Brackets, Adobe Edge Code, and Edge Inspect. As per usual, Rob's presentation was great. Below are my notes from the presentation. Thanks again to Rob for doing just a great job!

BRACKETS --
Open source editor.
Built WITH the web, FOR the web
Brackets itself is written in HTML, CSS, and JavaScript

www.brackets.io
super small download
new build every 12 days or so

Prioritizing community feature requests over team features. So if the community votes more loudly for a feature than Adobe's team, the community feature wins and gets the focus.

Adam Lehman is the Product Manager.

They're keeping Brackets focused on HTML, CSS, and JavaScript. So requests for PHP code hinting, etc, won't happen as soon (though you could write a plugin for it if you want).

Extensive plugin architecture.
And because of the architecture, to build a plugin, you only need to know HTML, CSS and JavaScript to build them!

Brackets is now available Debian / Ubuntu, as well as Windows and OS X.

Lightweight tool = loads quickly, not as much bloat as, say, DreamWeaver (though it doesn't DO everything DreamWeaver does either, hence the trade-off)

Brackets uses "Source Code Pro" as the default font for editing.
-- an Adobe font, developed specifically for coding
-- so things like zero and "oh" are noticeably different.
-- ditto for "eye", "el", "EL", and "one" (ilL1)


Really good code-hinting for HTML and CSS
new build every 12 days = the code hinting is pretty up to date with the latest browser changes, etc.

big deal, so what's so special...

ctrl-E -- in-line CSS editing
actually opens the CSS file, in a little "popup" so i can edit the CSS without having to leave focus from my HTML file.
no more flipping between the files

same thing also works w/ javascript

Live Preview
-- only works w/ Chrome
-- (needs Chromium in order to do it)

-- CSS changes happen on the fly
-- HTML changes -- page need to be refreshed before they'l show up

Extension Manager --
lists all the installed and available extensions
some examples:
caniuse -- plugs into caniuse.org, to tell you which browsers support which tags, etc.
phonegap -- links to the phonegapbuild site, makes pushing my code up there automatic
etc

New build every 12 days = new features being added all the time!

ADOBE EDGE CODE --
a commercial build of Brackets

new release every month-ish (every other build of Brackets)

currently in Preview Mode -- everyone can get it for free
eventually will be only for Creative Cloud subscribers

Edge Code comes with preinstalled extensions (specifically built to work with Creative Cloud)
-- Edge Inspect
-- Edge Web Fonts
-- Also includes Kuler extension which is NOT available to Brackets

Brackets: cutting edge, constant releases
Edge Code: fewer release, auto updating thru CC, preinstalled extensions

Brackets will tell you when there is a new build, but you have to download/install it yourself.
Edge Code will automatically update (as part of Creative Cloud)

ADOBE EDGE INSPECT ---

Preview Chrome's active tab on any number of mobile devices
-- IF you are a paid subscriber to Creative Cloud
-- IF you're NOT a paid subscriber to Creative Cloud, can to go creative.adobe.com, get a TRIAL version of CC for the normal 30-day trial
-- with Edge Inspect it's not timed based (can use it forever) but can only connect to 1 device

3 pieces to Edge Inspect
1) The Desktop App
2) The Chrome Extension
3) The Mobile App

Desktop App
-- no UI, it just runs in the background, ala a Windows Service

Chrome Extension
-- all of your interaction happens here (and with the mobile app)
-- free (because you already paid on the Creative Cloud side)

The mobile app
-- install this on all your devices

ALL devices need to be on the same network
(they all need the same subnet mask)

Enter the little PIN# thing and the devices all connect together.

Now anything you do in Chrome on your desktop, automatically happens across all the mobile devices too. (with a 1 or 2 second delay)

Edge Inspect isn't doing screen captures, it is actually rendering the HTML as a real browser would (it's Chome under the hood...I think)

Edge Inspect is automagically integrated into Edge Code. just click the switch and turn it on

Uses the wifi network, so if your wifi is spotty, will affect your experience using the tool.
but don't have to upload your HTML to a server for it to work. can just edit your apache HOST file to use localhost and serve everything that way