Time for a reset

I have been writing my Squarespace blog for about two years now. Yet, I can never achieve a consistent writing routine. Months go by without any posts. Over the Christmas break, I thought about why this was the case.

While the blog represents my thoughts, they do not belong to a topic or theme. I don’t have a strong goal set to break droughts, or to police pieces that are quickly becoming novels. I have many abandoned posts in my iA Writer folder that have simply grown too large.

I’m getting organised this year. I “started with why”, like Simon Sinek prescribes.

So why does this exist? 

I believe there is a practical and meaningful way to live a good, healthy, balanced life in this technology dominated world.

Given that I am working in the industry, I have a unique insight to this crazy tech world. I want to explore and tell people about products and ideas that help me achieve a balanced life. I want to talk about how technology influences what I do.

Therefore, I am renaming my blog. It is no longer “Android with an Apple shaped heart”. It is a little more agile, little more relevant and a whole lot simpler. It is going to set the theme for the posts from now on:

Incrementally Better

Yes, it is a reset. If Star Wars, along with so many other Hollywood franchises, can do reboots, so can my blog. It’s gonna be awesome!


Mobile First Design

If you are designing for many screen sizes, where should you begin?

Traditionally, most designers will start the design process at desktop size. This is where most content is going to fit in well. Then you figure out how to squeeze it down to a tablet, then a phone.

I believe this is the wrong path to take, when designing a mobile responsive page (or any website for that matter). Just because a desktop page can flow responsively on a small-width screen, it doesn’t make it suitable for mobile.

The best thing you can do is to start with a mobile design. Straight away, you are met with a conundrum: how do I fit all this content into the tiny screen? You can no longer just drop a matrix or a data table on to the screen — there really isn’t enough space.

You are forced to think about questions like:

  • what you are trying to do?
  • what are the most important elements a user needs to interact with?
  • what is the most important action that needs to be taken after viewing the content?
  • can the content/data be summarised and simplified?
  • can you offer a better way to drill down to your content?
  • can my data fit into an existing metaphor (like a map or a calendar)?

Once you are done with the design process, you might have a crazy realisation: all the questions you asked yourself, and the resulting design decisions you made — they apply on desktop too.

That’s right. A good design is already responsive.

Now, desktop design becomes more about enhancement over a lazy content dump. You’ve already made the decision up front on what is important and what is not. You no longer feel dirty, having to add ‘small-hidden’ css classes everywhere.

Start with a mobile design on your next project. Your design will be better for it. When you pick tools like the responsive grid, pick one that starts with mobile too. Bootstrap 3, for example, switched gears to do exactly this.

Responsive is hard. Mobile is hard. But the thoughtfulness and effort we put into what we build will delight our customers. And our customers are the reason we exist.

Why techies make crap early adopters

Recently, I’ve been working on apps and business ideas like AlwaysHungry, 60Hz and Secret Hotels (for lastminute.com.au). Finding early adopters to test these products are not easy. Things are even more complicated because my friends and colleagues tend to be very tech savvy.

It seems like people associate early adopters with being able to use a phone really well, or know their way around Safari with shortcuts on a Mac. What I observed in my time observing people using things I build is that they use products in anger.

What do I mean “using in anger”?

These users deal with the app in an aggressive manner. They press anything and everything. There is no real purpose behind the usage. They experience the product in a very detached manner.

There’s nothing wrong with all of this. In fact, it is a great form of stress testing. What sucks about it though is the lousy feedback you get. Feedback that sets you down the wrong path because the content never spoke to them in the first place.

Comments like “this button looks out of place”, “I like how Tweetbot does it” is irrelevant if they had used the app with a real purpose. These forms of feedback generally point you towards whether you’ve built the product right, not so much if you built the right product.

I think this contributes to even the biggest companies in the world building things that are irrelevant. Designers and developers build things to be used in anger. They go for rounded corners and bug-free apps rather than apps that flow well and really work hard to present content well (rounded corners rarely help the cause).

Reddit is the most relevant example I can think of. That thing looks like a shit website, reminds you of a dirty alleyway in the city somewhere. But it works. It’s got such awesome, random, awesome content I keep going back to it!

Back to early adopters.

If you want these special beings, find places they hang out in like forums etc. Look for people who are already solving the problem manually and bitching about it. The most important quality you are after in a person is that they are “someone who endures bugs, lack of rounded corners and much much more for the right content or solution”.

Good Luck!

How to create a great pitch video for your idea

Creating a professional video is expensive and extremely time consuming. When done right, a video can be very effective in getting users and spreading your idea to a large audience. For a small startup, videos might end up taking their entire marketing budget! I’ve been exploring ways to pitch an idea effectively while keeping time and cash investment to a minimum. Here’s how I got a great video done in 2 days and $35 for AlwaysHungry.

 

Researching for great videos

Epipheo is a great place to start. There is no doubt they make the best pitch videos! They are fun, clear and informative. I love their focus on relaying an idea instead of showing feature X and Y of a product. Of course, these videos also cost around $20,000 to make (I asked).

Take a look at their YouTube channel for some inspiration.

 

Storytelling tools

I looked for a tool that might help me tell a story specifically. I found Adobe Voice!

Adobe Voice is an awesome app that focuses on just telling a story. It only allows you to use icons, graphics and pictures coupled with music and a voice over. If you have a wonderful voice and happy with very simple graphics, this is your stop.


A little more Jazz

I wanted something a little better for AlwaysHungry. So what is similar to Adobe Ideas but has much better animations, and gives you more control over your content? Keynote! Keynote has slides, animations, graphics and all the other bells and whistles you need for a basic video. It also has a nifty feature that allows you to export your slide deck to a movie (mp4 file).

What about the icons? I immediately noticed that Adobe Voice used TheNounProject icons. It just so happens that AlwaysHungry icons are taken from TheNounProject too!

I wrote a script. You have to write a script. It helps you organise your thoughts and keep your narrative concise. You can start storyboarding your idea as you progress the script. Here's the final version of my script: Video Script.

... 
[Subway icon comes in] 
you constantly end up eating the same old thing, because you are too hungry to make a decision! 
[tone and emotion we want to convey is that it’s a downer]
...

I used simple icons, text and graphics to come up with a set of slides on Keynote. I focused on creating slides that supported the ideas conveyed on the script, sprinkling in animations where relevant. All of this turned out to be an exercise in creativity: trying to use the most basic elements to tell a story. I believe this kept me true to what I was trying to achieve.

Additionally I added some screen recordings from my iPhone to show off the app.


Searching for a voice

The right voice helps a video convey its message really well. VoiceBunny has a large number of voice actors who posses many unique attributes. They will deliver audio recordings within a day or two. My script came to about $100 all up for a VoiceBunny job.
#protip: email their support and ask for a discount :)

Another place you can find voice actors is Fiverr. Freelance community has a lot to offer on the Internet. We found @drewthedj who offered to do the voice over for just… $35! As you might have guessed, we went with Fiverr.


Getting it right first time

If you have a small budget, you want to get this audio recording right the first time around. Here’s what I did:

  • I imported the movie produced by Keynote to iMovie.
  • I started reading the script out loud while continuously playing the iMovie file over and over. 
  • Each time, I would shorten or extend the length of a section, based on how long I took to read out the script comfortably.
  • Following these steps, I ended up with about a minute long silent movie. I went on to edit the script and iMovie project further to get it down to about 50 seconds. I found that people generally leave around 50s mark for other YouTubes I've made. 

I sent the silent movie to @drewthedj. Drew was extremely professional, sent me back files with these formats: WAV, MP3, and Video with audio + background music!!! Whoa! If you need some royalty free music premiumbeat.com is great too.

I went back to iMovie and synced the audio file with my video timeline. Exported the video at full resolution and… DONE!

 

Concluding thoughts

The AlwaysHungry pitch video only took a weekend to make and it turned out to be better than a lot of expensively made videos out there! It is really a matter of channeling your creativity through some of the basic tools available to make something awesome. Focus on what matters: conveying the idea. Don't get distracted with showing off everything you have to offer. Simple things are easier to understand.

Image cache compatible with iOS7 in Swift

We recently released AlwaysHungry Brisbane app which was completely written in Swift! We used a few awesome libraries out there to pick up pace on the development. One of these libraries was HanekeSwift, which at the time of development, the only Swift Image Downloading & Caching library around! Despite the lack of competition, it is really good; with one caveat: iOS8+ only!

Given the slow adoption of iOS8, I’ve had to go back and add iOS7 support, which meant writing a brand new image caching library to be used in our app. Keep in mind AlwaysHungry’s image use is... extreme.
 

Research

  1. iOS7 has a new network stack under the NSURLSession classes. NSURLSession comes with Task classes that facilitate uploading and downloading that frameworks like Alamofire is already using in the background.

  2. NSURLCache is how everyone seems to be doing caching these days. It carries and in-memory and disk cache. An app can carry multiple caches too. I highly recommend reading this NSHipster article from @mattt. Focus on the caching policy settings.
     

Implementation Highlights

1. Creating a new cache (20mb memory cache, 100mb disk cache):

var URLCache = NSURLCache(memoryCapacity: 20 * 1024 * 1024, diskCapacity: 100 * 1024 * 1024, diskPath: "ImageDownloadCache")

2. NSURLSession with caching policy set to load from cache:

var config = NSURLSessionConfiguration.defaultSessionConfiguration()
// always try to load from cache
config.requestCachePolicy = NSURLRequestCachePolicy.ReturnCacheDataElseLoad
config.URLCache = URLCache
self.session = NSURLSession(configuration: config, delegate: self, delegateQueue: nil)

3. Structure: we need 3 methods

  • Get an image: SimpleCache.sharedInstance.getImage(url:NSURL, completion:((UIImage?, NSError?)->())?)
  • Get an image from cache without initiating a download: SimpleCache.sharedInstance.getImageFromCache(url:NSURL, completion:(UIImage?, NSError?)->())
  • Cancel a download: SimpleCache.sharedInstance.cancelImage(requestUrl:NSURL?)

4. getImage() method

When a request comes in for a URL, we first create a request:

let urlRequest = NSURLRequest(URL: url, cachePolicy: NSURLRequestCachePolicy.ReturnCacheDataElseLoad, timeoutInterval: 30.0)

Then we look into the cache first!

if let response = URLCache.cachedResponseForRequest(urlRequest) {
var image = UIImage(data: response.data)
dispatch_async(dispatch_get_main_queue()) {
completion?(image, nil)
return
}
}

In getImageFromCache, we just do this part.

Not there? Then we initiate a NSURLSessionDataTask and commit the successful response into the cache:

let task = self.session.dataTaskWithRequest(urlRequest) { [weak self] (data, response, error) in
...
strongSelf.URLCache.storeCachedResponse(NSCachedURLResponse(response:response, data:data, userInfo:nil, storagePolicy:NSURLCacheStoragePolicy.Allowed), forRequest: urlRequest) // commit it into the cache
...
}
task.resume()

5. cancelImage() simply removes the task from the queue.

I chose not to stop the download due to the nature of its use in AlwaysHungry.
 

Usage

SimpleCache.sharedInstance.getImage(request) { image, error in
if let err = error {
// thou shall handle errors
} else if let fullImage = image {
imageView.image = fullImage
}
}
override func prepareForReuse() {
...
SimpleCache.sharedInstance.cancelImage(requestUrl)
}
SimpleCache.sharedInstance.getImageFromCache(itemUrl) { image, error in
...
}

 

Happy days!

https://github.com/m2d2/SimpleImageCache

Performance of this cache is on par with what HanekeSwift was managing. It is extremely simple to use and understand. I am opening the source for this on Github so you can roll your own solutions with this implementation as a start point.

There’s a lot to be improved. Couple of things you may want to tackle:

  • Queueing the downloads by introducing a NSOperationQueue
  • Ability to cancel and resume downloads
  • Better error handling

How to make an Android App (video tutorial)

I did a brownbag session at Wotif office about how to make an Android app. It covers a lot of the basics of making an app with Android Studio.

This is an introduction session for Android. It covers the following:

  • Introduction to core concepts like: android building blocks, activities, intents, back stacks, services etc.
  • Covers project structure using Android Studio.
  • We create a basic app that downloads cat pictures from Instagram API.
  • Work with a ListView to display data.
  • Code is available at: https://github.com/dmendis/android-intro-cat-viewer
  • Cover some core concepts with resource folders in Android 

Resources:

Email me or leave a comment if you'd like to see more videos like this (much shorter ones).