brackets… another extension… annotation

To get into extending and adding functionality for Brackets is impressively easy…

David Deraedt has undertaken the feat of implementing an Annotation Extension which will provide developers with shortcuts to adding comments to their Brackets files…

Here is how it looks when I run it on my machine…

Obviously, the comment inserted is very simple, however remember this is very very early work and if you take a look at the code for generating this, you will appreciate the simplicity of the Brackets Extensibility Model and see that the entire extension is a mere 133 lines of JavaScript code at this point (including comments).

Check out the extension here…
https://github.com/davidderaedt/annotate-extension

…or have a look at other extension initiatives here…
https://github.com/adobe/brackets/wiki/Brackets-Extensions

…and please don’t forget, if you dont see what you like or need, its simple to just do it yourself using HTML, CSS and JavaScript combined with the elegant Extensibility API’s of Brackets.

BRACKETS… Your First Extension

…at the core of Brackets, you find an unparalleled open ness and tremendously awesome technology stack !

On top of the awesomeness of the technology stack and in the middle of some tremendously cool features build into Brackets by the team, you find a very simple extensibility model which allows anyone with knowledge of the basic Web Technologies, to write their own custom extensions in Brackets itself and using the same technologies we are using for the system we are making with Brackets…

Basically, every developers wet dream come true…

To get you started, the team behind Brackets has made a Quick-Start tutorial for getting started writing you own extension… it’s naturally a Hello World extension.

It will take you less than 5 mins to go through every step in the tutorial (including downloading the only 34 MB Brackets binary) and tweaking Mr. Hello World to say your name and make another or two small tweaks…

You can find the tutorial here…
https://github.com/adobe/brackets/wiki/How-to-Write-Extensions

The source code for the tutorial are made available, and can be found here…
https://github.com/adobe/brackets/wiki/Simple-%22Hello-World%22-extension

Now, obviously popping up an Alert in response to a MenuClick is poor UI, so don’t make that mistake; but instead take a look at the Extension UI Guidelines:
https://github.com/adobe/brackets/wiki/Extension-UI-Guidelines

If you’re working on anything big, its recommended you post to the brackets-dev Google group or the #brackets IRC channel on freenode early on so you can get feedback (there may be others working on similar ideas!).

For more detail on Brackets internals, see Brackets Development How Tos.
If you’re interested in contributing to the core Brackets codebase, see How to Hack on Brackets.

The Brackets Team… using Trello

In my optics (and obviously when wearing my coders goggles) Brackets is the most exciting news to come out of San Jose this year… not only is the team targeting to build an entirely new code IDE for web projects, but they have decided to do it in a new way… a way that may prove both to be more challenging as a traditional product development approach as well as more rewarding as members of the community starts joining the development effort by adding both core features as well as extensions (an extension API is on its way) even from the very beginning of its lifetime…

Anyways, what I wanted to share was that the Brackets team is using Trello as their SCRUM board.. being a happy Trello user myself, this is off course both interesting and exciting…

Image

The Brackets Team obviously practices Scrum. They have decided to work iteratively and produce stable builds every 2.5 weeks (12 coding days to be exact). A rather unusual number, however it works for the Adobe Brackets team… Development started in January 2012 so it’s still in the very early stages of the project.

The project goes under the parole: Code Free ! So I suggest you do exactly that, join the project, contribute a feature or two, learn a lot and then take this approach and apply to your development efforts in your own circles, being commercial or not, the approach is clever and when executed correctly, can empower to teams and the extended teams like no other approach…

Introducing Adobe Brackets… a new HTML/CSS/JavaScript Code IDE

Brackets… a new HTML/CSS/JavaScript Code IDE

…by putting this into the eco-system, Adobe has just shaken the bag once again… sparking off their ideas and possibilities on ways to optimize the development stack for Web Applications and Experiences… this is most recent newcomer…

Image

Among the most interesting aspects to this new IDE project is that…

  1. It’s Adobe Systems Inc.
  2. It’s 100% Open Source
  3. It’s being developed in entirely the open, a new approach by Adobe and means everyone is invited to join the team (and release party)
  4. Its written entirely in HTML, CSS and JavaScript itself…

Brackets seek to differentiate itself from other IDE’s by being envisioned with the following key parameters…

  • Tools shouldn’t get in your way. Instead of cluttering up your coding environment with lots of panels and icons, the Quick Edit UI in Brackets puts context-specific code and tools inline.
  • Brackets is in sync with your browser. With Live Development, Brackets works directly with your browser to push code edits instantly, set breakpoints, and jump back and forth between your real source code and the browser view.
  • Do it yourself. Because Brackets is open source, and built with HTML, CSS and JavaScript.

You can already now download a very early binary and start playing with it, or you can download the source code and compile for yourself.

It’s important to note that…

Brackets isn’t ready for general use yet. It’s still very early in development, is missing a lot of basic editor features, and probably has bugs. That said, we’ve actually been using Brackets to develop Brackets for awhile now, so what’s there is reasonably stable.

Although Brackets is built in HTML/CSS/JS, it currently runs as a desktop application in a thin native shell, so that it can access your local files. (If you just try to open the index.html file in a browser, it won’t work yet.) The native shell for Brackets lives in a separate repo, adobe/brackets-app, which includes this repo as a submodule.

The project is hosted at GitHub and offers you to both download binaries for MAC and Windows as well as the entire source code…

Check it out…
https://github.com/adobe/brackets

Brackets will be one of the first to take the place in the Code section among Tools and Services on Adobe’s page dedicate for HTML development… so that would be the place to check for public announcements along with Adobe Labs…
http://html.adobe.com/toolsandservices/

Introducing Adobe & HTML

With so many exciting things happening at all levels of the web “stack”, Adobe wanted to create a single place where everything they are working on can be shared with the community to improve what is possible on the web and simplify how wen professionals work with HTML, CSS, SVG and JavaScript. It is here that you can find up-to-date information about all of the different HTML projects Adobe is working on, discover which events that will be worth attending, and find out how you can join Adobe in making the web better.

You can read the introductory statement…
http://blogs.adobe.com/webplatform/2012/04/23/proudly-introducing-adobe-html/

…or you can head directly over to the new site… more resources will be added in the near future making this a very promising portal to learn about Adobe’s HTML initiatives…
http://html.adobe.com/

One I personally find particularly interesting is the statement under Tools & Services…

Code
We think there’s a need for a different type of code editor – we’re working on something and will have more to share soon.

UPDATE on May 3rd 2012: Check out this announcement on the emergence of “Adobe Brackets”
http://blog.petermolgaard.com/2012/05/02/introducing-adobe-brackets-a-new-htmlcssjavascript-code-ide/

However, check it out… its all good stuff and could potentially make your life as a web professional easier and more fun…

Newest Headlines from the Adobe Developer Connection Newsstand…

The following rather insomnious introduction to my post is relevant considering the current development in the industry, because from where I am sitting, we can either ignore the significance of the events, we can consider the recent changes a rogue wave after which everything will stabilize and become it old self again or we can start considering if its the turning of a era in the software industry…

Rogue waves – also known as freak waves, monster waves, killer waves, and extreme waves. These are relatively large and spontaneous ocean surface waves that occur in deep water, usually far out at sea, and are a threat even to large ships and ocean liners.

Anecdotal evidence from mariners’ testimonies and damages inflicted on ships have long suggested rogue waves occurred; however, their scientific measurement was only positively confirmed following measurements of the “Draupner wave”, a rogue wave at the Draupner platform, in the North Sea on January 1, 1995. During this event, minor damage was inflicted on the platform, confirming that the reading was valid.
In modern oceanography, rogue waves are defined not as the biggest possible waves at sea; but instead as extreme sized waves for a given sea state.

– WIKIPEDIA, Dec. 8. 2011

Now this brings me to the recent announcements from Adobe on their latest postings on the Adobe Developer Connection… check it out…

 

Getting started with PhoneGap
http://tv.adobe.com/watch/adc-presents-phonegap/getting-started-with-phonegap/

PhoneGap: Developing for iOS
http://tv.adobe.com/watch/adc-presents-phonegap/phonegap-developing-for-ios/

PhoneGap: Developing for Android
http://tv.adobe.com/watch/adc-presents-phonegap/phonegap-developing-for-android/

Introducing Adobe Flex 4.6 SDK
http://www.adobe.com/devnet/flex/articles/introducing-flex46sdk.html

What’s new in Flash Builder 4.6
http://www.adobe.com/devnet/flash-builder/articles/whatsnew-flashbuilder-46.html

Flex mobile performance checklist
http://www.adobe.com/devnet/flex/articles/flex-mobile-performance-checklist.html

Web and mobile reference applications with Flex 4.5 SDK and Flash Builder 4.5 (updated)
http://www.adobe.com/devnet/flex/articles/web-mobile-reference-apps.html

Adobe AIR with captive runtime support for desktop
http://tv.adobe.com/watch/adc-presents/adobe-air-with-captive-runtime-support-for-desktop/

Adobe AIR with captive runtime support for mobile
http://tv.adobe.com/watch/adc-presents/adobe-air-with-captive-runtime-support-for-mobile/

Dynamically adapt the layout of tablet and mobile apps
http://tv.adobe.com/watch/adc-presents/dynamically-adapt-the-layout-of-tablet-and-mobile-apps/

Adapt UIs for multiple mobile platforms
http://tv.adobe.com/watch/adc-presents/adapt-uis-for-multiple-mobile-platforms/

Hello World: Build a mobile app in five minutes (updated)
http://www.adobe.com/devnet/flash-builder/articles/hello-world.html

My top 10 ADEP publishing features by Anirudh Verma
http://www.adobe.com/devnet/enterprise-platform/articles/top-10-adep-features-anirudh-verma.html

 

Thanks to Adobe PowerWoman Rachel Luxemburg for the heads up on these great resources for developers using Adobe Technologies…