Saturday, October 24, 2015

Big Android BBQ

Just got back from Big Android BBQ, and it has been super fun!

Korean mall

I arrived the day before the conference to hang out with Virginia Poltrack, my partner on Fit Cat. I needed a pencil case for my Copic markers so we went to the Korean mall in Carrollton.

First stop was H-Mart, where we ate some yummy dumplings and bought Asian fruits and snacks. And then we went to Daiso, my favorite Japanese dollar store.

I found the perfect pencil case! It was actually a water bottle case, but the top-opening zipper let me see the color of all my markers. I love it.

BBQ decor

The Big Android BBQ team did an amazing job on the decor. The keynote stage was a diner set, and there were lots of nice touches everywhere.

Tech talks

To be honest, when I first looked into this conference I was worried that it is more of a party than a technical conference. I decided to go any way, betting on Google Developers to provide a healthy dose of Android on top of the BBQ.

Colt McAnlis opened the conference with a hilarious Texan keynote.

I went to the automatic performance testing codelab, which was really good, albeit the facilitators running it way too fast.

I ended up not going to too many Google sessions because I brought 3 lady speakers from Colorado with me, and they all gave excellent talks!

I also really enjoyed the animation talk by Marie. Love her method of sticky note + stop motion video for prototyping!

Espresso

I gave my Advanced Android Espresso talk towards the end of the last day. It was my second time giving this talk, so I was pretty relaxed about it. But the projector stopped working in the middle of my presentation! I stood on stage not sure what to do, and literally said, "Help!"

The AV technician came to debug, at which point all the plugging and unplugging crashed my laptop. So I asked to borrow a computer from the audience. After a while the projector was finally working, and what did I do? Accidentally close the browser on my loaner laptop, which had the slides preloaded. The conference wifi wasn't connecting, so a friend set up his Android phone as a wifi hotspot.

With all that, I finally resumed my presentation. I think I stayed quite calm during the whole fiasco, but it totally disrupted the flow of my talk. I was very pleased that the talk was recorded though, and the AV team at Google did an amazing job with the editing. I had to watch it 3 times to find the cut point!

Super friendly crowd

I really enjoyed Big Android BBQ. Everyone is so friendly, and there were many fun little details. The sessions vary in technical depth, but caught quite a few good ones. All in all a great event!

Tuesday, October 6, 2015

Espresso: Save and restore state

Do you save and restore state of your activities, fragments and custom views? Do you test them?

One way to test saving and restoring state is to rotate the screen in your Espresso test.

private void rotateScreen() {
  Context context = InstrumentationRegistry.getTargetContext();
  int orientation 
    = context.getResources().getConfiguration().orientation;

  Activity activity = activityRule.getActivity();
  activity.setRequestedOrientation(
      (orientation == Configuration.ORIENTATION_PORTRAIT) ?
          ActivityInfo.SCREEN_ORIENTATION_LANDSCAPE : 
          ActivityInfo.SCREEN_ORIENTATION_PORTRAIT);
}

With this helper function, you can write tests like this:

@Test
public void incrementTwiceAndRotateScreen() {
  onView(withId(R.id.count))
      .check(matches(withText("0")));

  onView(withId(R.id.increment_button))
      .perform(click(), click());
  onView(withId(R.id.count))
      .check(matches(withText("2")));

  rotateScreen();

  onView(withId(R.id.count))
      .check(matches(withText("2")));
}

Source code

https://github.com/chiuki/espresso-samples/ under rotate-screen

Like this article? Take a look at the outline of my Espresso book and fill in this form to push me to write it! Also check out the published courses: https://gumroad.com/chiuki

Saturday, October 3, 2015

How I prepared my keynote

The idea

My speaking buddy Corey Latislaw and I were both speaking at Write/Speak/Code. We talked about taking our speaking career further, and decided that keynote will be the logical next step. We were not sure how people get to keynote, but figured that we can brainstorm ideas and submit them as conference proposals.

Corey ended up keynoting at Droidcon NYC and I gave my keynote at Android Summit, just half a year since that day we brainstormed. Not bad!

Storyboard

This is a fancy word for cutting paper into little pieces, write one point on each, and arrange them on the table. This is how I organize my ideas. I like the transient feeling of pencil and paper. Nothing is set in stone, and I am free to rearrange everything.

Talk it out

Once I organized the storyboard into a linear narrative, I sounded out the ideas i.e. I gave a very early version of the talk to a lovely white wall in my house.

It was horrible. I stumbled in many places, unable to vocalize my thoughts. Normally I just talk to my technical slides without any scripts, but a keynote is very different. I need a strong narrative, and I decided that scripting is the way to go.

Write the script

I started writing my talk as if it was a blog post. Unlike speaking to my pencil-and-paper slides, I can jump from place to place to flesh out the paragraphs. I wrote 5 pages of text, and felt really good about it.

Read the script to time it

Next I read my script aloud to see how long it would be. It was 11 minutes, and I panicked, because my keynote was supposed to be 30 minutes.

Add more material

I knew I needed to add more material, but I was not sure what. At that point I was hosting the Technically Speaking hangout, and after we got off air I told Caroline Goyder that I am short on material. She told me to tell stories. Of course!

I added some personal stories, and also added a section at the end to give some counter points to balance the rosy picture I painted in the early part of the talk.

Make slides

My talk was much more meaty at this point, and it was time to try talk it out aloud to actual slides. That meant I had to make the slides.

My slides had a lot of illustrations. I redrew the pencil-and-paper slides on a drawing app on my tablet and imported them into Keynote, adding drop shadows to make them pop.

You can read more about how I draw the slides here: How to make hand-drawn slides.

Practice with my slides

Once the slides are done, I read my script while advancing the slides. It was 25 minutes long, which was perfect. Next I gave the talk to myself with just the slides, no script or speaker notes, to make sure there were enough visual cues for me to remember the flow. I recorded this version with Quicktime so I can make timing adjustments as necessary.

Live audience via Google Hangout

I want to get some feedbacks for my talk, so I scheduled a Google Hangout with my friends to give it to a live audience. We had quite some technical hiccups, namely, they could not see the slides. As a result some part of the talk was a bit confusing, but overall they liked the content, and gave me some pointers to improve.

Schedule tweets

Finally, I scheduled some tweets with Buffer so the audience can get relevant links as I speak.

I wrote a separate blog post to explain how I did it: Live tweet my own talk.

My outfit

I want to wear a dress for my keynote, but I need somewhere to clip the microphone. A belt wouldn't work since the dress I picked didn't have belt loops, and I didn't want to wear a jacket. I ended up wearing shorts under my dress.

The bad news is that I had to run to the bathroom to clip the microphones onto my shorts and thread them up to my neckline. The good news is that the shorts were robust enough to support the weight of two microphones, one for the sound system in the room, one for the video recording.

Show time

I went to the venue early to test the projector, walking to the back of the room to make sure that the text is readable. I also tried my presentation remote. After that I spoke with the cameraman and AV person to make sure that everything was in order. With that, I was ready for show time!

Video

How to make hand-drawn slides

I have been doodling quite a bit for my sketchnotes, and I wanted to use them to illustrate my Android Summit keynote.

Pencil-and-paper draft

When I organized my thoughts for the talk, I cut paper into small pieces and draw one picture on each. These are the draft illustrations.

Some of them I was not sure how to draw, so I searched on the web for outline images of the concept, and copied it.

Copy pictures from the web

When I first started sketchnoting, I was really hung up on the idea that I was doing art, and copying is a big no no. But I copy code from StackOverflow all the time, and had no problem with that whatsoever. So I started copying drawings, and found that it always comes out as my own style (due to the lack of artistic skills to make precise copies), so I don't feel bad at all about copying.


Elephant I tried to copy

My elephant

I pick images that have simple outlines, and not too many curves. I found it difficult to copy curves, and if the drawing depends on the curvature to convey the idea, my copy will look horrendous. So I just avoid those.

Redraw on tablet

Once I was happy with the draft slide deck, I redrew the slides on my tablet.

I did not have time to investigate which software I want to use, so I just did a search on a drawing app on Android that supports layers. I ended up using MediBang Paint.

I wanted layers because I reuse some components of my drawing. For instance, I have a book icon to describe experts as people who wrote books, and then later I have a "Rant Book" where I jot down talk ideas.

It was much harder to draw on the tablet than on paper. The tactile feedback was very different. Also if I rest my hand on the tablet, it will make marks in unexpected places. Frustrated, I wore a glove to prevent accidental touches.

Also, the export UX flow for MediBang Paint was quite clumsy, so I spent quite a lot of time preparing the image files.

Import to Keynote

After I exported all the images as transparent pngs, I imported them into Keynote. I added drop shadows to make them pop on the page. I then add reveals and animations as appropriate.

My style

It was a lot of work to make my own illustrations, especially since I am a developer by trade and did not have a good workflow. But it was totally worth it. I really like the final look-and-feel, which adds a personal touch to my talk.

Live tweet my own talk

My Android Summit keynote refers to many of my blog posts, and I want to provide links for people to read more. I could stuff all the links in the slide deck, but I decided to try something fun: Live tweet my own talk.

Timing

I used Quicktime to record my talk rehearsal, and watch the video with a pencil and note pad to jot down the minute marks that I am on a topic with a relevant blog post.

Buffer

With the timings, I schedule the tweets to using Buffer so they go live as I speak.

Ask people to follow

I put my twitter handle on every slide, and tell people to follow me so they can get the relevant links as I speak. People were really surprised to get notifications for my tweets while I was clearly still on stage busy speaking!