Mobile Development

Web Cascades Mobile Framework

I've started work on replicating Cascades (the mobile look and feel pioneered by BlackBerry 10) with web standards. Since the browser is a first class citizen on many of the latest smartphones, I'm convinced native applications powered by web technology can deliver the same smooth experience users yearn for (when done right).

Below is a quick preview of what's in store. Keep in mind this will seem jumpy given it was run in the simulator and recorded at a low frame rate.

On Github

Proper documentation will follow once more components and behaviours are included.

You can follow progress here: github.com/sterlingwes/web-cascades.

Live Demo

Run the demo on a BlackBerry Z10 or Q10 only (either the browser, or as a WebWorks / native webview app). You'll need a webkit browser at the very least.

Feedback

Let me know what you think! @SterlingWes or follow my company @mbywn for updates.



Archive

Top Posts

Rant

Heins, Please Fix

I'm not sure why BlackBerry doesn't establish a way to report bugs or make general OS suggestions. Seems like a pretty important way to interface with the end user... since it seems most of their workforce is stuck on old dev Z10 hardware which performs quite different from those they are selling to the general public. Here's a list of things I'd like fixed, for whoever might read this from BlackBerry.
Mobile Development

BlackBerry 10 Cascades WebView CORS

If you've tried to execute an AJAX request to a remote host via a Cascades Webview with web assets on the local file system, you'll hit the familiar HTTP access control (CORS), or the "access-control-allow-origin" error. This basically means the domain from which you've initiated your request (`local://`) does not match the remote host receiving your request (`http://example.com`). With BlackBerry WebWorks and similar SDKs like Phonegap/Cordova, you can whitelist remote hosts in order to circumvent this security restriction, but this has not been documented for native BB10 APIs. Here's a temporary workaround while we await an official resolution.
Mobile Development

BlackBerry 10 Web Clip "App"

It looks like BlackBerry's new operating system supports the same "web clip" functionality as Apple's iOS. So much so, that it explicitly looks for Apple's proprietary markup, which is probably why it's not well-documented. In any case, only one of the Apple tags is required to specify the icon you'd like to represent your site on the BB10 home screen:

      <link rel="apple-touch-icon-precomposed" href="/img/apple-touch-icon.png">

I found the optimal icon dimension was 114px square, full bleed (no padding).
Rant

How Virgin / Bell Bungled the Z10 Launch

Virgin/Bell bungled the launch of a great smartphone by making it dumb. Locking the APN settings is unfair to consumers. Buyers beware - here's my story (see below for an active discussion at CrackBerry.com).

I purchased outright the new BlackBerry Z10 from Virgin on launch day Tuesday. My initial reaction was that this is a fantastic device. It is everything a multitasking, messaging-oriented person could want from a smartphone. The keyboard is no Swype (on Android), but it's a massive improvement over all other touch keyboards I've used (iOS in particular), and the gesture-based take on getting around the OS is one of the biggest innovations I've seen in a while in mobile.

Programming

Windows 8 Port 80 Block

I recently upgraded my development machine to Windows 8 Pro, both out of curiosity and to explore developing for Microsoft's latest OS. Windows 7 was fairly developer friendly out of the box (I could run my server apps: Node.js, Nginx, MongoDB, MySQL, Apache, etc, without difficulty). First thing I noticed with Windows 8 was a problem running Nginx (specifically, binding to HTTP port 80).
Web Development

Tournament Bracket Generator

As part of my ongoing work with [ScoreiX](http://scoreix.com) for sports leagues and tournaments, I needed to be able to generate bracket style tournaments of various sizes. I also wanted to avoid using HTML tables to do so, which is cumbersome and plain old ugly code.

Check out the quick script I whipped together [here](http://wesquire.ca/misc/brackets.html). I plan on releasing a proper JS library once some additional features are baked in. Let me know what you think [@SterlingWes](http://twitter.com/SterlingWes)!

Startups

Shareholders' Agreement Checklist

In my previous startup I had experience drafting and negotiating a shareholders' agreement, which is an important consideration in the early development of any startup with multiple partners / founders / stakeholders. The following is a basic checklist of items that make up a shareholders' agreement as well as some of the situations it contemplates. This is meant as a guide for informational purposes only.

Web Development

Cloudflare & Websockets

With my latest projects I've been using Cloudflare religiously for superb caching, security and overall performance. Recently, though, I found that Cloudflare does not currently proxy websockets (you can see this by viewing your network resources in Web Inspector with content served by "cloudflare-nginx"). Since Nginx currently does not support Websockets in the stable branch (but has plans to do so)  I expect this will change. 
Web Development

Random Colours in Javascript

I recently needed to build a dashboard-like web interface with some charts that could have a variable number of series, and therefore a variable number of colours. It didn't make much sense to pull these from a predefined colour array or matrix, so I went in search of ways to do this.

Interesting

Alternative Olympic Rankings

There's always been plenty of discussion in the past around presenting Olympic results in a more equitable fashion. One that looks at relative performance while considering the inherent advantages of population size, demographics, and per capita wealth is one alternative. My take on this method follows. It will be updated daily throughout the remainder of the games and you can find the source spreadsheet with the raw data behind it via Google Docs.
Web Development

BackboneJS Model Array Push

I ran into a bit of an issue using the BackboneJS framework for my latest client-side web app. I like using Backbone.Model defaults in my app as it operates like a database schema (my app is largely offline to start). Having all the attributes clearly mapped out is advantageous as your app grows in complexity.
Mobile Development

Web & Mobile Synonymy

The phenomenon of the mobile app store is truly unprecedented. To think developers would be happy settling for $1 / sale for software with functionality that often rivals the best desktop applications might seem a little ridiculous if you traveled back to the pre-iPhone era. It still seems ridiculous to me now, and here's why.
Life

Toronto Life: Faulty Towers

Having purchased a condo in the downtown core fairly recently, I've been eager to read just about anything to do with the Toronto real estate market in the media these days. The tone has been generally the same for the past year: worries about oversupply, Canadian debt burdens / easy money, foreign speculators, and general bubble speculation. No new news, same worries.
Mobile Development

Resolve a Shortened Link with Javascript

For one of my mobile web apps a la Phonegap / WebWorks, I needed to find a way to resolve a shortened URL (ie: bit.ly, goo.gl, etc.) and figure out the link at the end of the redirect chain. While this hack isn't the best, hopefully it'll save people some time.
WebWorks

PlayBook WebWorks API Gotchas

I spent this past weekend throwing together a PlayBook app that I'll be releasing later today. In the process I've come across a few roadblocks where API documentation was lacking. Notably when it comes to working with the file system APIs. Here were some of the big 'gotchas' for me.
Startups

Toronto's Startup Scene

When I first immersed myself in the startup world over a year ago, I was blown away by the vibrance of Toronto's startup community. While it's obvious there's some much 'larger' hubs in the United States, Toronto is clearly Canada's answer to Silicon Valley. This is my humble attempt at putting together a list of some of the best startup resources and people in the area that newcomers should certainly know about.