A quick look at Ionic Creator


Recently I had the chance to talk with Matt Kremer, the project lead behind the Ionic Creator web app. For those not familiar with this app, it is an online design tool for creating Ionic frameworks apps. Drifty (the company behind Ionic) has a long history of developing tools like this; Codiqa (for jQuery Mobile) and JetStrap (for Bootstrap), so seeing a visual design tool for Ionic was to be expected.

I had explored an earlier version of the tool, and it had a number of rough edges. Recently, Matt has made a number of improvements to it, and spent an hour showing me the new features.

Right off the bat, Creator now supports multiple projects via a nice clean landing page. If you had used the app before, you might remember how clunky it was. Where this comes into play, is you can now have team accounts, thus allowing your designers, developers, and other team members the ability to reference the project. The team feature is a paid option for the service.

Next up is the expansion of starter templates. For those who use the Ionic CLI, you are probably familiar with the three templates available; Blank, Side Menu, and Tabs. Creator has a slightly different set of templates; Blank, Login, Signup and Tabs. Now, the Login and Signup templates are very similar. One noticeable difference is the lack of a SideMenu template. Matt explained some of the difficulties in integrating this template into the app. He is hopeful as the app migrates to leverage the v2 framework, those issues will be resolved.



In the past, I had tried to mockup a simple tab based UI and had a lot of trouble. I can say in this latest build of the tool, I was able to mockup my UI with little or no trouble. One area in particular was being able to properly set the tab’s icon.

Another improvement is the app is now smarter about components themselves. Previously, when you tried to add a checkbox and did not have a containing form element, the app would not allow it. Not only that, there was no feedback as to why you could not drag and drop the component onto the canvas. The underlying answer was there was no containing form element for the checkbox. So, Creator will now automatically add a containing form element if one is not already there. No longer do you have the appearance of the tool being broken.

Through the app, I was also impressed with the performance gains that had been made. The earlier version was quite sluggish. While there is still more to be done (isn’t that always the case?), the app has reached an acceptable level of performance for my usage.

Now, once we are done with the design, what can we do with it? Creator allows the project to be shared via URL, email or SMS, and can also require a passcode to view it. But beyond that we can reference it as a template source directly from the Ionic CLI. Simply click the export button and select the Ionic CLI option, and a unique code will be generated. Or if you prefer, you can download it as a .zip file.

As with all visual editors, there comes the question of what does the code look like? Again, I am pleased to say that Matt has done a nice job at providing a decent starting point to begin build your awesome Ionic app.

I am looking forward to the continued development of the this tool, as it is great way for my students to mock up their apps quickly. Plus, there is some more cool stuff coming that I can’t reveal yet, so stay tuned.

Atom Autocomplete Packages


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:

Ionic Framework element and attribute autocompletions

OnsenUI Framework element and attribute autocompletions

jQuery Mobile Framework element and attribute autocompletions

Zurb Foundation for Apps element and attribute autocompletions

Angular Material element and attribute autocompletions


Polymer Project element and attribute autocompletions



Ionic Training at HTML5DevConf!


I am pleased to announce that I will be conducting a full day training on Ionic Framework at the upcoming HTML5DevConf Autumn 2015! This full day training will be on Thursday October 22nd.

AngularJS, Cordova and Ionic are a perfect blend of technologies for building hybrid applications that behave like a native app across multiple mobile platforms. In this course, you will learn how to build an Ionic application from scratch using the Ionic CLI and explore its various components. We will also examine how to architect the AngularJS foundation of services, controllers, and views. Finally, we will extend our application to leverage some mobile specific capabilities.

Polymer code hinting


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.

The Smyth Report – Kindle version

Atomic Energy for Military Purposes

Atomic Energy for Military Purposes: The Official Report on the Development of the Atomic Bomb Under the Auspices of the United States Government As part of my ongoing efforts to digitally preserve aspects of the atomic age, I recently published a Kindle version of what is generally known as “The Smyth Report”. My good friend, Geoff Williams helped in recreating the cover. The text is available on atomicarchive.com, but thought I should make a proper ebook out of it.

With the 70th anniversary of the first atomic test in the desert of New Mexico, and the bombings of Hiroshima and Nagasaki, expect to see some more atomic themed posts here.

Even More Brackets!


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.