A few weeks back Ryan Stewart posted on his idea for PhoneGap Starter projects. They were designed to take some of the grief out of getting started with various aspects of PhoneGap and PhoneGap Build projects.  I've contributed a project based on one of pet peeves with PhoneGap Build: the lack of productivity.

Don't get me wrong. I love PhoneGap Build.  I love not having to open multiple IDEs to work on mobile apps. I love working on HTML apps in HTML tools - but you lose a few things in the trade. You lose being able to click one button and have your work available on your device.  You miss being able to click and get a pop up that says your work is ready to view on the device.

These things seem small, but having tried to build actual projects in PhoneGap Build, I found them critical.  I would go kick off a build, and then have to wait for the build to be complete.  I'd open a browser windows while I waited. 20 minutes later, I would cycle through my Chrome windows and remember that I was waiting for a build to complete.  

A few months back I tried my hand and solving this and came up with a shell script that handled this for Android.  Over the past few weeks, I've added to, improved, and modified it. I now have a solution in ANT that does the following:

• Uploads files to PhoneGap Build triggering a rebuild
• Polls for IOS and Android to be finished
• Downloads ipa and apk files when ready
• Installs them onto connected iOS and Android devices
• Uses the "say" command to let you know when things are done.

It takes the form of an ANT build file, some properties, and 2 shell scripts. I've posted the whole thing as PhoneGap Starter Productivity on github. As far as I know this will only work on OS X, which I hope isn't a huge problem for anyone, and I'm willing to collaborate with someone to make them more cross platform friendly.

Also I feel it's important to note, that while these scripts mean you don't have to use the IDE to accomplish these tasks, you still have to have Xcode and the Android SDK on your machine to use them. 

Next week, I'll be speaking at D2WC, a designer/developer workflow conference in Kansas City, Missouri. 

I'll be talking about Using PhoneGap Build to simplify your mobile development life. One of the great things about PhoneGap is that it allows you to use HTML JS and CSS to build your applications, but you still have to use native tools to build your apps. PhoneGap Build helps immensely with this, but you make some productivity sacrifices. This session will show you how to maximize your work, and touch as little of the IDE as possible. 

First time for me at this conference, but from what I understand it's a great conference that tackles a specific topic: getting development and design to work together better. Great goal, really looking forward to it.

D2WC
May 16-18
Kansas City Marriott Country Club Plaza
4445 Main Street
Kansas City, Missouri 64111
USA

If you were not aware of them CSS Regions are proposal to CSS3 that would allow for some magazine like layouts in HTML pages. Adobe has been leading the charge on getting them into WebKit.  They are currently available in Chrome. (Also I think IE10)

Now the way they work:

• You create a bit of content in an element like an article
• You designate that article as the source of a "flow"
• You designate other elements as the recipients of the "flow" (We'll call them "regions")

Then when the browser renders the content

• The element designated as the "flow" is not shown
• The content of the "flow" pours into the "regions"

Assuming this HTML:

And this CSS:

You get something like this:

I have a demo. It only works in Chrome.  Resize the screen to see the flowing of the content.

I was presenting on them the other night and I got asked a pretty good question.

Have you thought about how these degrade?

I made a bad joke, then mumbled something about if the browser doesn't support CSS Regions then the original "flow" element gets displayed and all is well.

I tested it today. And all is not well. Because I still created those region elements. And they show up down at the bottom and add whitespace.

Check out the demo on any browser bu Chrome and you'll see what I'm talking about all the way at the bottom.

So after some experimentation I decided that the best way to handle this was to create my four regions with CSS exactly how I had but only inject the region holders if the browser supports regions, like so:

Here's a demo of the improved version.

In this case, I get a much better experience for non Chrome users--no weird mile of whitespace at the bottom of the content.

I'm headed up to New York on Wednesday April 11 at 7pm  for the April meeting of the NYC JavaScript and HTML5 Monthly Hackfest. I was originally intending to just attend but I got tapped to do a 15 min talk.

I'll be speaking about Adobe's CSS contributions to Webkit, specifically Regions and Exclusions.

If you're in NYC, it's a great group so come on and check it out. Sign up on their site to find out the location details.

Hello antipodeans and antipodiphiles, I will be speaking at webDU 2012 in Sydney, Australia in a few weeks.  If you have never heard of webDU, it is an absolutely fantastic web conference. It provides a great environment for honest open conversations and learning about the field.

I'll be giving two talks:

Semantic HTML5

A foray into the geekier elements of internet HTML plumbing.

The Future of HTML5 Motion Design

Talking about Adobe Edge, and showing off some of the cool things we are doing with browser technology.

If you're in the area, check it out.

webDU
May 3rd-4th
Sydney, Australia