Rvrsit was designed for use on the iPad and constructed using best practices of Sencha Touch, the best and most powerful HTML5 mobile framework and Impact JS, arguably the most modern JavaScript gaming framework on the market.

The history

I began development of this game over a year ago, when Sencha Touch 1.0 was in release candidate phase. My initial inspiration came from my experience in teaching my 4.5 year old son (now 6) how to play Othello. Little did I know that it would take over a year to get to this point!

I remember having an epiphany “If I can teach a 4.5 year old how to play Othello, surely I can teach (program) a computer!”. So, I set off to start developing Rvrsit, then known as Othello. I began by doing research into Othello (also known as Reversi) algorithms. I found a few JavaScript implementations including ones in Java and C++. All of them were really difficult to understand and some took different approaches to achieve AI. Most implementations of Othello (or Reversi, as it’s often called) were slow or not very attractive.

In order to figure out a fast way to get the AI working, I began to think about the rules of game play. Then, I needed to figure out how to get those rules into play. The result was an approach that was different compared to anything that I could find, but extremely fast!

Beginning with Sencha Touch, I decided to create components that could be placed into a game board. The Chip class was constructed to be smart enough to know whether or not it was an edge piece or not and know of its nearest neighbor.

With this logic configuration, Chip instances could literally talk to other Chip instances by means of a simple JavaScript reference. This allowed for rapid lookups throughout the game board for the game rules, which include whether or not the player made a valid move or not. The results of this game engine design can be seen in the Rvrsit prototype. (This version of the game does not come with the necessary A.I. to allow the computer to compete against the player)

Fast forward to 2012

Soon after the turn of the new year, I was able to begin focusing on Rvrsit again! I began by converting the Sencha Touch 1.0 code to 2.0. I was left with the same quick response time but faced CSS3 animation issues. I couldn’t have the silky smooth 3d transition of a two-colored chip that I wanted. This led me down the path of HTML5 game engines.

In my research, I found a lot of JavaScript HTML5 game engines but only one really stood out. That framework is ImpactJS. Impact JS was the only framework that was mature enough for me to use to develop such a game with ease. After a few days of tinkering, I was able to come up with a prototype that uses the exact same Chip connection logic, but this time we got the silky smooth transitions we were looking for.

I gave the prototype to my two boys, Takeshi and Kenji and they were able to play against each other without any issues.

After the migration to ImpactJS, I was able to leverage the Chip connection design to create efficient A.I., allowing the computer to make decisions based on which chips were available to be flipped. In this decision loop, the computer first gathers a list of chips that are currently visible. It then loops through that small list and asks those chips whether or not its neighbors are valid playing options. After it determines all of the valid moves, it figures out which is the biggest gain for it. It then flips the chips that gain it the biggest score, allowing for the human player to make their move. The speed of the AI is evident when playing against the computer, even in the slowest mobile tablets, including the Motorola Xoom, Blackberry Playbook and Kindle Fire.

After this prototyping phase, it was time for design. This is where team member Dave Ackerman came into play. Dave was able to take the initial game prototypes and add much-needed polish. Some of our design inspiration came from our good friend Michael Harris, with his wildly successful HTML5 Sudoku game, which can be found in the Google chrome store today.

That leaves us where we’re at today. A well-designed app that leverages the best HTML5 UI framework with the best HTML5 game framework.

Looking to the future

The Rvrsit evolution is not done! Here’s a list of features that we already have in the works.

• Use of HTML5 sound API for game sounds & in-game music
• Two player game play via the cloud
• Full integration with Silk JS, an up and coming Server side framework
• Multi-device UI layout
• Multiple layouts

In closing, as we progress, we’ll be providing in-depth blog posts. In these blog posts, we’ll be doing deep-dives into how we use each layer of the technology.

This is a big day for me personally, and for my co-founders, Jay Garcia, and Josh Izenberg.

We assembled and amazing team, starting with our first strategic hire, Aaron Smith, and our founding team: Steve Dalgetty, Dave Ackerman, Grgur Grisogono, Wil Boayue, and everyone who’s helped us get to an amazing first year: Crysfel Villa, Stanislav Bershadskiy, Michael Harrison, Scott White, Sean McDaniel, David Evans, David Norton, Denis Sheridan, and Michael Aldana.

We’ve developed great partnerships as well, firstly, with our longtime friends at Sencha, who have been great supporters of ours in the marketplace and have opened many doors for us with great top tier clients.

Secondly, to Rachel Caggiano, Irfan Kamal, Jon Melzer, and the DC office of Ogilvy PR Worldwide, who took a chance on us early on, and trusted us to help with some strategic internal product development efforts, and have given us amazing opportunities since then.

I owe a personal debt of gratitude to our informal and hugely valuable advisors DP Venkatesh, CEO of mPortal, who let me squat at a desk in his office before we had a place to call home, and gave me huge insights into running a mobile startup, and Larry FitzPatrick, CEO of Computech, who has been a sounding board for all of our ideas related to mobile government.

And of course we dedicate every day to our Customers. As a bootstrapped startup we’re eternally grateful to our customers, who entrust us with their funds and more importantly, their ideas, without which, there would be no amazing work for our awesome team. Thanks to all our awesome clients from year one, there will forever be a special place in my heart for making this one of the best year’s of my life!

Best,

Pat Sheridan CEO

As a fast growing mobile startup located a stone’s throw (and a metro ride) from the nation’s capital, I wanted to share some thoughts on the transformative effect mobile web apps will have on citizen engagement and agency missons.

First, a bit on my government experience. I was the User Interface Architect for Pay.gov from 2003-2005. Pay.gov is an eGovernment initiative managed by FMS and FRB-C to establish a centralized transaction gateway for federal agencies. It was one of the first SOA rollouts in the federal government and processes trillions of dollars in transactions each year. Following my work on on Pay.gov, I spent four years working on web enabling regulatory finance applications for NASD/FINRA.

In dealing with agencies large and small on the project, I saw the need for a unified content management systems for smaller agencies that were using limited free content creation capabilities Pay.gov offered to ‘hack together’ a free website for their bureau. Over the following years we’ve seen an ever growing services architecture on the backend, and cms platforms on the front end helping agencies connect with citizens.

A brief history of the world:

• 2000 – 2005 web enable applications.
• 2005 – 2010 hardware virtualization and getting apps into the ‘cloud,’ developing web services API layer.
• 2010 – 2015 convergence on all of the above with mobile.

With cloud computing, open government and ideas like Data.gov, we are awash in possibilities but still struggling for a big ‘aha’ moment tying it all together with mobile apps.

I see the first few years of post-iphone mobile as the ‘vanity app’ years. Up until this year, the focus has been ‘having a mobile app,’ or ‘mobile presence’ and not having the Flagship Apps that run agencies be mobile. With the enterprise clients we deal with every day, we feel the winds are changing because now usage data for mobile clearly points to accelerated trends outpacing desktop web. It’s happening with online advertising, bank sites, and digital content and streaming as well.

The need for a mobile first development exists for government right now. True citizen engagement depends on it.

If you look at the market demographics served by pre-paid cellphone companies, as well as the shift from feature phones to low end Android devices that serve these markets, it’s easy to predict that millions of American’s primary device for internet access will be a phone and not a desktop. In addition to enabling underserved populations, the transformative power of mobile webs is only now being considered for large enterprises, let alone, government agencies.

I believe the mobile browser is the third platform, providing the most accessible channel for citizens and most efficient to manage for government app owners. The reality is that the web stack is familiar and trusted, and in house development resources can be cross-trained to build HTML5 based mobile web apps. The browser is soon to become the next big OS.

So how will we get there?

We see ‘Hybrid Apps,’ that is, HTML5 code ‘wrapped’ in native code as the migration plan from native apps and ‘app stores’ to mobile web apps. One of our first project was a hybrid app for Intuit that exposed access to the corporate address book without storing the records on the device (think about the potential harm for a compromised device with local data stored). The idea for mobile apps is to provide a world class user experience without creating a world-class security problem.

It’s amazing to wonder what the future of government as we now it will be once the convergence of web apps, cloud api’s, and mobile devices takes shape over the next few years!

When you incorporate a business, you are generally required to have a person or organization resident in the state in which the business operates that can accept official correspondence on your behalf – also called, an agent for service of process. I don’t know this for a fact, but it has been my experience that most states will let a person act as their own agent for service of process if they live in the state in which their business operates.

So let’s say you live in the Commonwealth of Virginia and you want to start a new venture. By incorporating in Virginia, you will be able to save yourself a few hundred dollars a year in filing fees and agent fees by acting as your own agent. If you were to incorporate in Delaware, then you would need to pay a third party to act as your agent in Delaware and you would need to file to do business as a “foreign” corporation in Virginia – more fees and more paperwork. So then why should the average startup even consider incorporating in Delaware?

Well, for one, if you have thoughts of ever looking for funding, then being a Delaware company can have real advantages. The fact is that people who invest in companies tend to prefer Delaware companies (or at least their lawyers tell them they should) because of the breadth and predictability of Delaware corporate law. As a result, most VC deals are governed by Delaware law. When you go out to seek funding, if you are already a Delaware company then you will avoid the likely costs of having to “move” states. It’s also likely that you will incur less legal fees since the paperwork used for investments in Delaware companies is very standard and will take less time for a law firm to prepare and negotiate.

Delaware. It’s not just for the Fortune 500 anymore!

When people ask me the top ten things I care most about as the COO of a startup I tell them the top nine are all cash – and that I can’t remember what the tenth one is, so it must also be cash. Now obviously that’s not entirely true, there are other things I worry about – but it is true that I spend a lot of time worrying about money. My co-founders often accuse me of obsessing about it – and they’re right – I do. As a self-funded startup – even the kind of well positioned one I described in the paragraph above – cash is hugely important, it is your lifeblood and it needs to be properly managed.

The good news is that in a lean startup like ours cash management does not have to be difficult. There are two things that I have done in particular to help us manage our cash position.

The first one is to build a simple daily cashflow model to track all of our cash ins – client payments – and cash outs – payroll, contractor payables, taxes, insurance, rent, legal fees and other expenses. More importantly, the model also projects forward at least sixty to ninety days so that I can see where things might get tight in the near future. This model has been a crucial tool in our rapid growth over the last year.

Lean Cash Flow Model. Click to download the blank template in XLS format.

The second is the general approach I take to spending the company’s money – which is, I don’t like to spend money. All joking aside, we do spend money on things that really matter to the business, but when we travel, for example, we double up on hotel rooms and we use points to buy train tickets. When we buy computers for our developers, we buy top of the line machines, but we buy refurbished and save a few hundred dollars per machine. Every dollar matters in the lean startup.

The reality of startup life is that there are lots of things that can go wrong, including running out of cash. While most of the potential pitfalls of running a startup are going to be out of your control, cash management shouldn’t be one of them.

Define Your Primary Assumptions

For our first website launch we decided to use the blog posts to drive analytics on our primary market assumptions:

1. Many developers want to improve their skills with HTML5 and JavaScript.
2. As the mobile app maturity index increases, customers will increasingly prefer HTML5 and Hybrid apps over native apps.

Build

• A WordPress site – Will people read, comments & contact us?
• Partner channels – Can we build a word-of-mouth referral network?
• Meetup.com – Will developers sign up and show up?
• Eventbrite – Will developer pay for trainings and bootcamps?

Measure

• Google Analytics – Goals Conversions (website contact form)
• SugarCRM – Word of mouth lead generation funnels (how many leads do we need to generate to close an actual opportunity? what is the cost to acquire 1 training registration?)

Experiment

Our v1.0 website ‘Content Recipe’ was a basic articulation of our primary assumptions and a value statement on our products and services.

We used a Lean Canvas to organize our thinking and surprisingly it also helped us craft the website content strategy and messaging.

Speak to Actual Customers

Luckily for us, we run Meetup groups in New York and NoVa and many of the members are representative of our potential customers.  In a very real way, Meetup attendee interest in certain topics is a clear indicator for training course topics.

In order to identify signals worth following, we first had to create a lot of noise.  Activity, as they say, is meaningless without visibility.  So we focused on cross-linking our content into the following obvious outlets:

• Twitter
• LinkedIn
• Meetup.com
• Sencha Forums
• SlideShare
• Personal networks

Learn

This is quite possibly the hardest simple thing to do. Analytics and numbers can get overwhelming quickly and evaluating contradicting customer feedback can get frustrating. What we’ve found that has worked best is to look for harmonizing patterns, which means paying attention when two completely different people ask you for the same thing.  Often times with customers, failing to listening is the single biggest mistake entrepreneurs make.

Adjust (Pivot)

What we learned from our customers really, really surprised us. It allowed us to pivot our ideas to better increase our chances of achieving scale.  We learned that not only do individual developers want this training, but very large companies want to train very large development teams on our courses.  Additionally, we learned that companies are also interested in licensing our training and subscribing to online training materials we create.

Website Iteration

v1.0 – Get to market

Our v1.0 website allowed us to get to market in a weekend and start learning asap.  We focused on content more than style and getting the maximum reach and engagement for our content and offerings.  We focused on building a lead gen machine and on qualifying opportunities into sales.

v2.0 - Branding, Positioning, and a Marketing Plan

For v2.0, (and our 6 month anniversary) we planned our ‘Coming out party’ as a company and coordinated a website refresh/relaunch timed with SenchaCon 2011.  With even a short history and paying customer track record, we re-organized our site content to focus on third-party validation of our products and services.

• Crowd-sourced a logo and identity system
• Redesigned our WordPress Template (thanks to our friends at SpryFly)
• Created a Facebook Page
• Content/Information Architecture refresh

v3.0 – Learn From New Mistakes

As we continued to work on our content strategy and messaging, we felt the site was becoming overly static and lacked a sense of activity, recency, and motion.  In an effort to more accurately have the site reflect our HTML5-ness, we built a kitchen sink of sorts with video, keyboard navigation, and the works.

v4.0 – Device as Market Share – Leading with Mobile

We have spent the better part of the past nine months optimizing our web content in line with our services.  As a company that is embedded in the center of mobile web app development, it’s no surprise that our site is optimized for phone and tablet devices.  We’ve also experimented enough to know that our website is one part of a content-ecosystem that connects and distributes our content among various content destinations: Facebook, G+, Twitter, Slideshare, Stack Overflow, Sencha Forums, Github, and Quora.

In as close to real time as we can make it, our content is curated and correlated to business performance.

In defining and refining your product or service to achieve scale, treat your website like a garden that needs constant attention: constantly plant ideas and weed out non performing content.

Old Meets New

Ethan’s premise of using a flexible grid system to achieve a responsive design that degraded gracefully between screen resolutions was really nothing new. Flexible and fluid layouts have been a part of web design since the beginning. We’ve all at one point used percentages for widths. Flexible designs were never highly adopted because of the ever changing landscape of devices we use to view web content, and controlling the content within those flexible bounds was a difficult task.

Jeff Croft wrote an interesting article that aims to provoke thoughts about the future of responsive design. He makes great points about responsive design being just that — responsive design it ends at visual design. As user experience designers, we don’t take into account other user contextual situations, and we focus on what we can control. In this case, that’s the user’s screen resolution.

Just a few of the interactions Jeff mentions –

Some, off the top of my head: Where are they? Home? Work? Inside? Outside? Private place? Public? Moving? In a car? Driving (eeek!)? On a train? What’s the weather like? Who are they with? Are they alone? In a group?

Certainly some great scenarios, but no great solutions are available for this type of user context. Yet. This sort of contextual design is something that many designers are still learning to understand. Designing for your users environment has never really become a factor. With more and more users on the move, and the majority of them using smart phones, we need to be more concious of their surroundings and how a design could change based on that.

Modus Create's website on iPhone. Vertical stacking is common for mobile layouts.

Is it good for our industry?

At the end of this year, it would not surprise me if “responsive design” is the most searched term on every web design and development website. Everyone is jumping on the bandwagon, and I think it’s great. When people get behind a technology, and start contributing, only great things can happen. There are already several great frameworks for getting up and running quickly with a responsive grid system.

Innovation doesn’t come from following, however. Developers need to even know, start thinking beyond the fluid grid. What comes next? Hard to say. For a long time we have let the media in which users consume content dictate our development technology choices. With the introduction of many devices with many screen resolutions, comes the need to support many devices with minimal amount of overhead — which is how flexible grid systems were born.

Fixed width is not dead

Not by a long shot. There will always be a place for a well structured and designed fixed-width website. And even greater still, not every website or application needs to be responsive. Think about the goal of your application, think about who is going to be using it, and where. Then decide if it needs to be flexible enough to deal with multiple devices gracefully.

Going big?

When most people think of a fluid and responsive design, they usually think mobile. Your site needs to look great on mobile, which is true. But what about a large portion of users that have screen resolutions pushing 3000 pixels? Gizmodo took a stab at designing for those users with their “HD View”. Massive, beautiful images gracefully cover your available real-estate. Viewing the site on my 27″ Cinema display with it’s 2560×1440 resolution, the site looks wonderful. Just an example of a little innovation.

Modus Create's Training page on the iPad. Landscape provided a perfect amount of space for a 960 width grid.

Closing thoughts

I purposely wrote this post with the intention of not getting into technical details about how to pull of a responsive design. There are hundreds of sites, many of them copied from one another, who lay out different techniques for creating a fluid grid, fluid images, type, and everything else you would need to be successful with your design.

Topics being covered include:

• Introduction to Sencha Touch
• Ext JS Component foundations
• Panels and Layouts
• TabPanels
• Sheets and Pickers
• Data Stores
• List and Nested List
• Form Panels
• Media and Carousels
• Application development
• Performance considrations

Early bird pricing for the event ends on March 11th, so get your tickets now!

Tickets can be purchased from Eventbrite.

I have produced a set of Sencha Touch 2 OmniGraffle stencils based around the kitchen sink demo that Sencha has developed. Using this set of stencils, you should effectively be able to quickly wireframe and prototype a base theme Sencha Touch application.

Included are the majority of the UI elements, and in the set you will find buttons, toolbars, form elements, modals, overlays, alerts, tab bars, and a date picker.

• Download the OmniGraffle .gstencil here

The stencil will also be posted to Graffletopia shortly, so you can search for it inside of OmniGraffle and download it that way as well.

Update: The stencil has been approved on Graffletopia. You can find it here.

We’d love to hear your feedback!

HTML5 Evolves from Buzzword to Core Technology Platform

2012 is the year Mobile Web Apps will come online.  Most firms continue to struggle with mobile product development and the first generation of native mobile apps were held to a much lower standard for user experience.  As consumers expectations become more sophisticated, the ever increasing portfolio of novelty or ‘executive pet project’ mobile apps will have to be replace by a scalable, cost effective, HTML5 mobile web app model.

The ‘Hybrid App’ Development Becomes Migration Plan for Native Apps

Many firms we speak to look at HTML5 as their ‘everything else’ strategy beyond iOS.   For firms that have focused on native iOS apps, HTML5 will be their platform of choice for covering Android, Windows, and Blackberry devices.   Of course there are specific hardware features available to native mobile apps that packaging tools such as PhoneGap make available to HTML5 developers:  camera, GPS, compass, accelerometer, and local storage to name a few.  Hybrid Apps, apps that deploy HTML5 content wrapped in a native wrapper of code, allow for a smooth transition point to more scalable solutions.

Facebook embraces HTML5

Facebook will release project Spartan and most likely it’s own phone optimized to run HTML5 based games and apps as direct challenge to iOS.  Facebook acquired HTML5 platform company Strobe towards the end of 2011 and looks to be boosting it’s developer community relations.  With the release of ‘Timeline’ we believe Facebook is beginning to draw a line between the content and app experience on Facebook and HTML5 will be the technology that Facebook use to become an app distribution channel.

Open Government = Mobile Web Apps

Citizen engagement is predicated on citizen access.  Just as CMS platform like Drupal and WordPress revolutionized the way agencies standardize and manage web content, HTML5 based mobile friendly sites and apps that can easily pull content from existing CMS infratructure will revolutionize how agencies large and small achieve their mission.

HTML5 Challenges the “Native App & Store” Distribution (and Business) Model

Scale is the primary driver for HTML5 growth.  As enterprises shift mobile from vanity projects to core technology, the 30% ‘Tax’ levied to use native iTunes Store and Android Market will become increasingly seen as lost revenue.  Firms will increasingly look to hybrid apps and mobile web apps to grow their marketshare beyond iOS devices and leapfrog over the need to add native Android development to their operational stack.  As companies look to maximize mobile app revenues, they will be increasing motivated to recapture profit lost to pay for access to a delivery channel.