Brackets

Atom Autocomplete Packages

atom_logo

After a few fits and false starts, I have finally been able to port my various code hinting modules that I wrote for the Bracket editor to the Atom editor. I switch between these two editors and not having my code completion functionality for my various frameworks was frustrating.

Luckily, I found the autocomplete-html package that is now built into the Atom editor by default. What was an added bonus, the tag and attribute sources were actually from the Brackets repo! Thus meant once I understood the Atom packaging publishing flow, I should be able to port each of the Brackets extensions.

To install the package, go to Atom > Preferences > Install. Then enter the package name and press enter.

The available packages are:

autocomplete-ionic-framework
Ionic Framework element and attribute autocompletions

autocomplete-onsenui
OnsenUI Framework element and attribute autocompletions

autocomplete-jquery-mobile
jQuery Mobile Framework element and attribute autocompletions

autocomplete-zurb-apps
Zurb Foundation for Apps element and attribute autocompletions

autocomplete-angular-material
Angular Material element and attribute autocompletions

autocomplete-polymer-project

Polymer Project element and attribute autocompletions

Enjoy!

 

Polymer code hinting

polymerBrackets

While watching the recent Google I/O videos, I was intrigued by the 1.0 release of the Polymer Project. I had been watching the effort for sometime, but never really exploring it too deeply. Given I know my way around the code hinter in Brackets, I thought why not make another one. The documentation is not a clean as one would expect from a company like Google, so if you find an issue, please let me know. I am not doing much active development in Polymer at the moment, so I can’t discover those issues like I have with other code hinters. Since Polymer is very extensible, I am thinking of a method for people to insert their custom mark up into their code hinter. This could be applied to some of the Angular code hinters as well.

You can download it directly from its GitHub repo (https://github.com/chrisgriffith/Polymer-Brackets-Extension), or install it via the Extension Manager within Brackets.

Even More Brackets!

angularMaterialBrackets

In exploring the various Angular UI solutions I stumbled on the Angular Material Project. In reading the documentation, I thought, why not create a code-hinter for it? I got started and was mostly finished except for the layout section. I put it aside for sometime. When I decided to do the Zurb Foundation for Apps code hinter, I promised that I would take the time to finish this one off as well.

You can download it directly from its GitHub repo (https://github.com/chrisgriffith/Angular-Material-Brackets-Extension), or install it via the Extension Manager within Brackets.

OnsenUI code hinting for Brackets

onsenuiBrackets_small

After releasing a code hinting module for the Ionic Framework for Brackets, several people asked if I could do one for the OnsenUI framework as well. I have not spent that much time using it, so I was less familiar with it. But the documentation was well written, so I took a stab at developing it…so here it is: onsenuibrackets.com

To install the extension simply:

  1. Install Brackets 1.0 or later.
  2. In Brackets, click the menu item File > Extension Manager…
  3. Go to the “Available” tab of the dialog that appears.
  4. Type “onsen code hinter” in the search box.
  5. Click the “Install” button in the search result for Onsen Code Hinter.
  6. Let me know if you have any issues or comments. Happy coding!

Note: You can only have one code hinter active at a time in Brackets. I am trying to figure out how to resolve that issue.

Let me know if you have any issues or comments. Happy coding!

Creative Coding: Front End Design & Development with Brackets

At the recent Adobe MAX conference, Peter Flynn (@knownissues), one of the engineers on the Brackets team gave a great talk entitled “Creative Coding: Front End Design & Development with Brackets“. Toward the end of his talk he covered some of the great extensions that are available:

Emmet (https://github.com/emmetio/brackets-emmet)

Quick Markup (https://github.com/redmunds/brackets-quick-markup)

Brackets Snippets (https://github.com/jrowny/brackets-snippets)

Everyscrub (https://github.com/peterflynn/everyscrub)

SVG Preview (https://github.com/peterflynn/svg-preview)

DevDocs Viewer (https://github.com/gruehle/dev-docs-viewer)

CanIUse (https://github.com/cfjedimaster/brackets-caniuse)

Response (https://github.com/kidwm/brackets-response)

Brackets Git (https://github.com/zaggino/brackets-git)

Brackets SASS (https://github.com/jasonsanjose/brackets-sass)

LESS AutoCompile (https://github.com/jdiehl/brackets-less-autocompile)

and of course if you happen to be doing jQuery Mobile development with Brackets, please feel free to get my extension from http://jqmbrackets.org/

Adobe CreateNow Camp Orange Country!

Had a wonderful time presenting at Adobe CreateNow Camp Orange Country. They certainly know how to run an event!

It was a pleasure talking with so many of the attendees about the various Edge Tools. As promised here is the presentation that I gave:

http://aj-software.com/presentations/edgetools/#/

If you have any questions on any the tools and services, please ping me. Also if you want to know more about the mobile schedule site I wrote, ask way…

Here are the urls that I used as well:

Edge Animate

http://pmkwilliams.com/
http://www.projectluna.com/

Edge Reflow

http://adventurecodemo.com/

TypeKit

http://welcometotakeout.com/
http://lostworldsfairs.com/eldorado/
http://lostworldsfairs.com/moon/
http://www.newyorker.com/