Brackets hackathon in Adobe’s office in San Francisco
Yesterday, I have attended the Brackets hackathon in Adobe’s office in San Francisco. After several small presentations showing the history of the project, its features, how to hack it and its roadmap for the 1.0 release, we started coding Brackets extensions.
It is very easy to build a Brackets extension, you can just get started by creating a file main.js in a specific folder and by hitting F5 in Brackets to see the result. The documentation can be found directly in the source code of Brackets and it is very easy to find what you are looking for, even if a wiki page detailing the various components that you have access to could be helpful. You can still find this information by navigating the source code.
Coming from the world of the Eclipse IDE where everything is aggregated in one place, I came to this hackathon in order to build an extension to improve the integration of tests in Brackets. Since a hackathon is quite short, I’ve chosen to build an extension to display Karma code coverage results in the Brackets editor.
This extension adds a new action, Code Coverage, in the status bar at the bottom of the Brackets editor. Once clicked, it will highlight the pieces of code visited during your unit tests and it will open a panel showing some information regarding the code coverage of the file in the editor. If you click once again on the code coverage button, the highlighting will be removed and the panel will collapse.
Since it is the result of a couple hours of work while learning Brackets APIs, It is very basic and it does not display all the code coverage information (the function visited are not highlighted for example) and the panel does not display any meaningful data. I can easily improve those points since my main goal was to learn more about the APIs of Brackets. There are lot of very helpful APIs to build a Brackets extension and in the end, since the Brackets editor is “just” a webpage in Chromium embedded in a C++ runtime, you can still use the Chrome Devtools (F12) and the DOM APIs to customize it.
The Brackets developers were very helpful during the hackathon and they gave me very valuable tips in order to improve my extension. On top of that there were hot pizzas and cold beers, the perfect development environment :)
I will improve this extension in the next couple of days and publish it on my Github account (I need to clean the code and add more comments first). I will also try to create the same extension for Orion to compare the APIs of both projects.