Categories
Programming

Startup Weekend San Francisco 2012

Wow what a weekend it has been. I attended Startup Weekend SF, the second SW I’ve been to, and it was a blast.

Edit: Apparently this is the app that won at Startup Weekend Google. Similar idea, different name? Interesting.

Team SplitMyTab
Team SplitMyTab

Team
My team consisted of me (the frontend engineer), a designer, a business person and two backend engineers. Our App idea was called SplitMyTab, which helps people with all the trouble of calculating and figuring our their restaurant bills when tips, tax, credit cards, and cash all give people headaches when they split the bill. As you can see, we actually won honorable mentions in the competition for good storytelling and customer validation (as well as a free year of SendGrid service), hence the medal :).

App details
While the idea was simple, the app was actually difficult to implement. When the app is loaded, it asks you to take a picture of the bill using the camera. This part required iOS and native functionality. After this, our image OCR algorithm done in Python processes the image and extracts the data out and sends it to our Ruby on rails service, which stores it. The Ruby service uses templating along with Bootstrap and jQuery Mobile to display the web/mobile site.

Web/Mobile
Since I was the front end engineer, I was in charge of doing the web/mobile stuff. So I used HTML5 Boilerplate (I could’ve also used Bootstrap) and jQuery Mobile, along with jQuery UI and Backbone.js to support the JS animations and structure, respectively.

So initially we thought about using the phone’s contacts / numbers as a way to tell users what they owe, using PhoneGap or iOS to access native features, and Twilio for SMS, but turns out no one really knew PhoneGap or Objective C, and not enough time to figure out in one weekend.

So, we decided to go with Facebook API to message/email people.

Initial screen
Initial screen

We force users to login to Facebook on the initial page, with the photo that they’ve taken shown, and assuming that the image data from the receipt is available. Then we land on the calculate totals page, which calculates the total of the bill including tips that you enter. There’s also an autocomplete which pulls from your facebook friends list, who we assume you are eating with.

Calculate totals page
Calculate totals page

After that, we go to the final page, which is the page where we calculate who ate what and what the final totals were.

Receipt Totals Page
Receipt Totals Page

And after you confirm, it sends a message to all your facebook friends who ate with you telling them how much they owe you.

Issues
First, technology decisions. I chose jQuery Mobile over Sencha because it relies all on HTML5 page-roles and semantics, which is really nice and easy to learn, whereas Sencha has a learning curve. I used Backbone.js over AngularJS because Angular would’ve required more time to learn the syntax.

Interesting issues:
1) We couldn’t figure out a good mechanism in time for the Python program to communicate with our Rails server.
2) I figured out too late that jQuery mobile has quirks with dynamically inserted html, and should’ve used Ruby templating instead. I don’t know any Ruby so I had to work with just HTML5 without any templating engine like PHP/Rails.
3) jQuery mobile apparently doesn’t execute all the JS after an Ajax form submission. Actually, all of its page changes uses Ajax.
4) jQuery mobile fires its mobile initializing way before the document is ready, this causes problems with dynamically generated DOM elements.
5) Facebook API apparently deprecated its legacy REST API, and its Graph API doesn’t have a good way to message or email friends.
6) jQuery mobile apparently doesn’t play nicely with jQuery UI.
7) jQuery mobile also doesn’t like it when you put custom JS page init events in the main data-role=page div.
8) Always JSON stringify / parse objects when storing and retrieving from localStorage
9) DOM elements from a jQuery array are not jQuery objects themselves and have to be re-wrapped in a jQuery selector. This differs from Prototype.js which always wraps each sub-element in its selector.
10) Facebook API has terrible documentation. Seriously.

So yeah, I learned alot of interesting quirks about jQuery Mobile and Facebook API over the weekend. Next time, maybe I’ll try a different mobile framework, and use Zepto.js instead, a lighter weight jQuery alternative. And try using AngularJS, because Backbone requires a lot of boilerplate code to be written, though I like its use of MVC and SoC patterns. And yes, I’ll consider looking into SASS, Node.js, Socket.io and CoffeeScript (there’s too much stuff to learn blah). Overall I learned a lot, which is all I really wanted to get out of these events anyway. Take a break from CFM (coldfusion) and FTL (freemarker) for a while.

Where’s the app code?
Relax, the Github repo is here, and the prototype mobile site I’ve built is here (it’s not fully functional because of the jQuery mobile quirks).

Categories
Business Programming Tech

The Digital Revolution

Firstly, this post is designed as a way to show off my Piclens slideshow capabilities so the amount of images present may be more than my previous posts.

Today, I’d like to talk to you (dear readers and stalkers of my blog) about an important issue in society today. We are experiencing, or perhaps in the midst of, a digital revolution, started in the 1980s and continuing through the present. Like the industrial revolution before it, this revolution has social, political, economic, military and industrial impact. Therefore as soldiers of the digital revolution, our first step would be to familiarize ourselves with the technology.

Cloud Computing

How it works
How it works
Web 2.0 tree
Web 2.0 tree
Software as a service
Software as a service

The first trend I want to talk about is the notion of cloud computing.
Cloud computing is the concept of computing in a cloud – that is, the need for desktop applications is reduced to the concept of computing inside web applications. It combines the trends of software as a service and Web 2.0 in order to provide the needs of “anytime,anywhere” computing to everyone who has access to the internet. This development is another example of tying together other technological trends which I will explain further.

Knowledge anytime anywhere
Knowledge anytime anywhere

Social networking and media sharing

We live in an age where unprecedented access to information has become commonplace, where a person with no access to any books or institutions but can still obtain knowledge via the internet. This is vastly different then what we had 20 years ago and it is one of the most striking amenities of the digital revolution.

Blogs gives us unprecedented information on other people's lives
Blogs gives us unprecedented information on other people's lives
WoW, the largest MMORPG
WoW, the largest MMORPG

The propagation of social networking allows us to be connected to people all around the world, giving us a constant source of contact and with it, its good and ills. In a way, this proliferation of constant networking gives us citizens a deprivation of privacy but also a good platform for our social agendas. Even games allow us to network with others and to escape to a different life online, separate and distinct from our real lives, perhaps out of a need for social interaction or a need to have fun. Regardless, the social web is everywhere and it is hard to not be caught in it.

Youtube allows sharing of videos
Youtube allows sharing of videos
Flickr allows sharing of photos
Flickr allows sharing of photos

In addition, the advent of these web trends and techniques allows us to view photos, art,audio and video like never before. New sources of inspiration exist for users worldwide. The importance of ideas such as web, media and technological convergence is thus an important goal for the future. I will take a look at more of these devices later in this post, but take note that devices aside, all we need is a browser in order to enjoy the fruit of web convergence’s labors.

Twitter allows us to constantly notify others of our status
Twitter allows us to constantly notify others of our status
Facebook is the largest social networking site in the world
Facebook is the largest social networking site in the world

We as people, also have the right to refuse the invasion of our privacy for social purposes. But in this ever more interdependent world, are we losing contact with the outside world? Are games and social networking and MSN distracting us from the pressures of real life? Are we pressured to adopt the new trends of the time in order to stay ahead?
I think as this revolution sweeps over everyone, we have the urge to always stay ahead with new technology concepts.

Integration with real life

Ebay, The largest online auction site in the world
Ebay, The largest online auction site in the world
Amazon, the largest online retailer
Amazon, the largest online retailer

The extent of how online services affects us extends to our daily needs. Shopping online is now considered as a normal alternative to shopping at a brick and mortar retailer. Online matching making and sites such as craigslist blurs the online and offline way of interacting in a way that we have never seen before. Imagine that not so long ago, computers were limited to those with a high income and now it permeates our lifestyle where ever we go.

Open source development and hardware

Drupal is an open source CMS
Drupal is an open source CMS
Joomla!, another open  source CMS
Joomla!, another open source CMS

So as we struggle to stay ahead of all these new innovations, developers such as myself will also have to learn new web programming techniques. This is also facilitated by new Open source software development, new web programming tools such as AJAX and Ruby on Rails, and new CMSs such as the one on this website. Even development methodologies such as Agile has been used to take advantage of fast-paced development. These new trends allow developers, alongside consumers to develop new tools to establish this notion of cloud computing and web convergence.

Wordpress powers this blog
Wordpress powers this blog
PHP and MySQL work well together as web 2.0 tools
PHP and MySQL work well together as web 2.0 tools

But as we move forward, we take notes from the tools of past so we can better serve the people of the future. These new tools for web programming, that allow developers to serve the consumers, must evolve as the trends evolve. But as I will explain further, this evolutionary process is not only for the web, but extends to the whole of this digital revolution.

Ruby on rails is a popular web 2.0 application framework
Ruby on rails is a popular web 2.0 application framework
The iphone which started the multitouch trend
The iphone which started the multitouch trend

New trends in hardware often follow the software. The advent of Multi-touch computing is evolving, with many mobile phones and now tablet pc’s taking advantage of this trend. Hand-in-hand we must also consider the development of multi-touch applications to go along with it. Existing Frameworks for it have already been developed. One area of development must fuel the other.

Netbooks are also a prominent computing trend
Netbooks are also a prominent computing trend

We can also see the power of PCs grow exponentially over time, as predicted by Moore’s law. The evolution of all this should lead us to believe that in a few years time, the supercomputers of today will be the laptops and PCs of tomorrow. Such is the rate of technology that a brand new device would be rendered obsolete in a matter of weeks. Such is the convergence of technology that the smartphones of today were the PCs of yesterday, and even simple devices such as mp3 players can double as clocks and calculators. Such is the importance of internet to our daily lives that pocket-sized computers, tablets, and miniature laptops called netbooks (all with GPS functionality) were designed primarily to access the internet anywhere where there’s a wireless or cellular (3G) reception.

The web as we know it, dominated by applications
The web as we know it, dominated by applications

So looking from that standpoint, one must wonder when the digital revolution will end? Perhaps it never will, since over the past century, developments such as the automobile, airplanes, telephones, TVs, electric appliances and the PC which came about in only the last 20 years have come at a staggering pace in comparison to the previous centuries. Therefore, to wrap up this discussion, I think the question of “What’s the next big trend?” is not as important as “What trends will be the most influential and the most lasting?”, because just because a trend is big doesn’t guarantee it a status in this ever changing world. It’s the trends that have the most lasting consequences, the ones which act as ‘milestones’ in this digital revolution, that will shape the trends after it. So I encourage everyone to take part in computer science and software design and be a part of it, because although this field is constantly evolving, the rewards for experiencing the future are much greater. Thank you.