HTML5 Slides

When I prepared my Android Layout 101 talk, I looked for an easy way to put my slides online. I started with Landslide because it has a lot of options: table of contents, speaker notes, export to pdf etc. But then I hit a major limitation: I wanted to show xml files with certain words highlighted. Since Landslide generates syntax-highlighted html with pygments, there is no easy way to add custom style. This was a tie-breaker for this particular talk I need the answers highlighted within the xml context.

I looked around some more and settled with the Google HTML5 slide template. I edit the html directly, and syntax highlighting is done by javascript, so I can layer my own css style on top. I really miss the compact Markdown syntax for Landslide, but the flip side is that I lose fine styling control.

A bonus for using the Google HTML5 slide template is that it works with my wireless presenter, so I can be anywhere in the room. Very convenient.

Android Layout 101

Sarah Allen invited me to teach Android classes at Blazing Cloud, and we kicked off last night with Android Layout 101.

Presenting: Android Layout 101

We started with the Hello World app, gradually introducing more and more layout types and attributes. From time to time I showed a screenshot and asked everyone to modify the xml file to achieve the same layout.

"hmm... how I do get the buttons to go to the second line?"

By the end of the workshop we were implementing this screen:

This can be done with either LinearLayout or RelativeLayout. The LinearLayout version uses a nested horizontal LinearLayout to specify the second row, with android:gravity="right" to scoot the buttons over. One of the students, Anne, went on to experiment with setting android:layout_gravity="right" on the buttons themselves, but that did not work. We were quite baffled.

Turns out android:layout_gravity="right" is only honored by a vertical LinearLayout, not horizontal one. I guess the LinearLayout expects to put down one View after another horizontally, so if it puts the first button to the right, the second button would have nowhere to go. As a result it simply ignores the layout_gravity attributes. Still, it was rather confusing, and it is precisely the kind of nuance you only find out when you get your hands dirty.

The screenshot exercises gave everyone a chance to put theory into practice, and see how the elements interact with each other. You can try them as well. Just go to http://www.sqisland.com/talks/android-layout-101. Even if you are already familiar with the basic layout components, you may still want to check out puzzles at the end. Some of the solutions may surprise you!

It warms my heart to read a nice review

Puzzle Pal caters to puzzle aficionados who want a little help, but often people download it without reading the description, and get disappointed because it is not a game. So I am always elated to read a review of someone who appreciates it. Today I saw one in the NOOK store:

If you use an app and you like it, go write a nice review. That's what fuels developers to create even more awesome apps!

Random Hacks of Kindness: Drop2Drink

I have always been intrigued by the idea of programming for good, and tried many times to contribute to open source projects. Finally I got my acts together and attended Random Hacks of Kindness this weekend.

As my newbie, my goal was simple: observe how a charity hackathon is run, contribute whatever I can. Random Hacks of Kindess maintains a list of project proposals at the website, and we could use that as a starting point. However, the site was down during the day. Fortunately some people came with project ideas, and we heard 6 people explain their projects. We then split into groups, essentially interviewing the different projects to figure out which one was want to spend time on.

I ended up working on the project proposed by Sarah Filley, Drop2Drink. Apparently San Francisco uses potable water for fire fighting, so to ensure that there is enough drinking water during an emergency, the City of San Francisco has designated 67 Emergency Drinking Water Fire Hydrants, marked with a blue water drop. Sarah would like to use them as anchors to spread awareness for diaster preparation. 

Hydrant #33. Photo by Sarah Filley

We gathered around and brainstormed. Since the group was quite large, it took a while to hear everybody. While all the talking was happening, Christiaan was typing furiously. He was grabbing the address of the hydrants from a PDF and populating a Fusion Table with it. By the time we wrote all our ideas on the white board, he had a Google Map showing all the hydrants! Awesome. Initially I was a bit worried since there was a lot more talking than doing, but seeing the map made me feel much better.

Lunch came and went, and we split into a few subteams: website, foursquare, tropo and QR code. I was in charge of the dynamic part of the website, generating one page per hydrant. Finally I got to code! I set up an appengine instance, fetched the data from Fusion Table, and populate each page with a row. This serves as the landing page when people click on a map marker, or scan the QR code we were putting on the hydrants themselves.

It didn't take me that much time to set up the base site, but the iterations were a bit slow, mostly because I had a sore throat and I couldn't talk. That turned out to be a huge problem. Since I was there to help with a problem defined by others, communication was really important. I would say the split is 80/20 - 80% talking, 20% coding. And since I couldn't talk, I couldn't contribute as much as I'd like to. By the end of Saturday I actually lost my voice, so I stayed home on Sunday to rest. I really wished I didn't have a sore throat!

All told I had a great experience, and I would probably attend more charity hackathons, knowing that the most important aspect is co-ordination. In a way it's leadership bootcamp: you meet tons of new people, try to figure each person's skill and passion, and align everything to the project goal. It's an interesting challenge.

I'm happy to report that Team Drop2Drink has risen to the challenge beautifully: we were selected as first place winner of RHoK SF! Check us out at http://www.drop2drink.org.

Puzzle Pal now in the NOOK store

I attended the NOOK Apps Workshop at App Dev Hackathon, and decided to submit Puzzle Pal to the NOOK store just to see how it works. 

Bundle the dictionary

Puzzle Pal was first developed for the G1, which has very little on-device space for apps. This drove the decision to deliver the wordlist in a separate package for storing on SD card. But it makes the initial install a little cumbersome, requiring the user to juggle between two apps. Since the NOOK store has an approval process, I decided it is easier to have a single package with the wordlist bundled. It only adds 1MB to the package, which is not a big deal as long as you are not running the G1 :)

Test on the emulator

I did a round of testing on the emulator from the NOOK sdk. Everything works fine except the about dialog. The AlertDialog on NOOK uses a white background even if you specify a dark theme, so the white text on my about dialog was not visible. I used a WebView to link to the data source for the wordlist, setting the text color with css. With the NOOK, I had to switch AlertDialog.Builder.setMessage so the system can set both the background color and the text color. The side effect is that I could not have clickable links, which is fine. I simply spell out the url.

The many steps of app submission

Now my app is ready, I started the app submission process. Man, there are so many steps!

1. Upgrade to NOOK App Developer status

   I signed up at the Nook Developer Site to download the SDK, but to submit an app, my account needs to be upgraded to developer status. I did not understand why. Fortunately since I attended the NOOK Apps Workshop, I was granted access fairly quickly.

2. Get the developer account approved

   Next I had to fill in tons of information including my bank account and tax information. And all these needs to be approved. Why? I am not even selling anything. I just want to offer Puzzle Pal for free. Again, the saving grace was that it took only a few hours for the account to be approved.

3. Get the app metadata approved

   Finally I got to the point where I filled in the basic information for my app. They wanted a 300x300 icon. No problem, I resized mine that way. A few screenshots with the app running on the NOOK. Fair request, I captured a few. I put everything together, and BAM, the icon was rejected. Why? Because it has a transparent background. What? What's wrong with a transparent background? And oh, it cannot be white either. Why? I ended up adding a random blue gradient background to my icon. But this is so arbitrary.

   And now I wait for the metadata to be approved. That didn't take long, because some script rejected it, saying that the description "makes references to the app being for a phone". I was pretty sure I did not do that, but I checked my description text anyway. Turns out I said you can use Puzzle Pal for "phone spell", which is a standard puzzle technique to translate numbers to letters according to the dial pad, e.g. 3569377 becomes FLOWERS. I didn't have the energy to explain that, so I just removed the words "phone spell" from the description.

4. Get the apk approved

   Finally I got to upload my apk! That turned out to be the easy part. No issues whatsoever, the apk was approved within a day.

Check the NOOK store

I was waiting patiently for Puzzle Pal to show up at the NOOK store, which should take 24 to 48 hours according to the status message for my app. A week went by and nothing happened. I filed a ticket to figure out why. Someone responded within a few hours:

Hello! Yes, it's being worked on and hopefully resolved by the end of the week. Stay tuned on this. You've done everything right, we're working on our build system and your account had missing information which is on us.

Very happy that they reassured me that I've done everything right. Also very happy that I pinged them, because I had no idea that my account had missing information.

Two days after I filed the ticket, Puzzle Pal is on the NOOK store today!

I did not expect this to be such an adventure. How I miss the straightforward Android Market! Hopefully they will streamline the process so us developers can focus on producing wonderful apps instead of stressing over getting our apps approved and published.