CSS3 Media Queries: Making Your Site Mobile-Friendly, Now With 50% Fewer Excuses!

by

If you’re like me, you probably do an increasing amount of your personal business on your mobile device, such as paying bills and conducting transactions with your banking accounts.  And why not?  It’s been five years now since the first iPhone came out, and since then mobile Internet use has become a part of everyday life.  What’s more, major institutions such as Wells Fargo, Citibank and AT&T have their own mobile apps.  So taking care of your financial business on your smartphone should be a complete breeze, right?

Wrong!

Where my docs at? (A smattering of pointers on AngularJS, one of which at least is difficult if not impossible to find on the Internet)

by

AngularJS is a young framework, still so downy-soft that much of the advice you’ll find on support forums refers to an earlier and almost completely incompatible minor version.

So long as you don’t hit a blind spot in the documentation or the community support, it’s a great framework for rapid development, but as soon as you try to do something that isn’t public knowledge, you’ll be scratching your head for hours.

iOS: Creating a Spin Animation using Transitions

by

Card Spinning Animation Example

Animations are one of the cornerstones of the iOS platform. Animations can add polish and visual interest to any application.

iOS comes with many default animations and effects. An animation between two views is referred to as a transition.

On a recent project, we needed to create an animation of a card to make it appear spinning. Creating this effect from scratch would involve a fair amount of code, but leveraging transitions made it easy.

UIWebView JavaScript to Objective-C communication

by

When building an iOS application there are times when the best solution for a particular view or screen is to build it as a webpage and then embed it into the app using a UIWebView. There are certain things a webview can do really well that are otherwise hard to replicate, and while not as sexy, web development can be much quicker than native iOS development. The specifics of when to use a webview and when to go native I won’t dive into, but if you decide to use a webview, the first major question you’ll probably wonder is how to communicate between the native app and the webview. For full integration into the app, being able to send messages from the JavaScript to Objective-C and back is critical, and luckily it’s quite easy.

How to deploy your web app to Amazon EC2 using Capistrano

by

What is Capistrano?

Capistrano is an open source tool mainly used to deploy web applications from source code management (SCM) to one or more servers. The aim of this guide is showing how to easily deploy your app to amazon EC2 using Capistrano. We can leverage its multi-stage extension to provide a different deployment strategy in different scenarios.

à la Flipboard

by

Flipboard, iPad app of the year in 2010.
Sporting a very intuitive interface, flipboard is still an inspiration for designing applications.

A few months ago, we were asked to create a showcase iOS web app. Among the requested features, was to give it a flipboard effect.

ExtJS 4: Ext.Ajax and Timeout

by

I was introduced to ExtJS a few months ago because I worked on a project that was heavily using the ExtJS 4 framework. Like many other frameworks, ExtJS had some really cool features, but also a few headaches. One headache I ran into was using the Ext.Ajax class to make a simple Ajax request. The Ext.Ajax class provides your basic event handling functionality for a successful/failed request. This class provides a timeout property that will execute an abort request when a certain amount of time has passed. However, I found that when a timeout does execute, a javascript error occurs. In Firebug, the error states:

Lessons Learned from My First HTML5 Video implementation

by

I recently had the opportunity to implement an HTML5 video for a client.  It was the first time I’d really worked with HTML5 video, and I ran into a few issues and quirks I thought I’d share for other developers who run into these issues.

 

1. HTML5 video with a fallback to Flash works really well.  The opposite doesn’t work as well. 

 

At first I started implementing my video in Flash with a fallback to HTML5 – not for any special reason, but only because a previous developer had implemented another of the client’s videos that way and I followed the pattern already set.  I soon discovered that although this works fine for a video that just plays in a fairly static page, it wasn’t ideal for the kind of video I was implementing, which required some custom controls and interactions with other elements on the page.  I first thought that the best way to handle this would be with a try / catch, but since my flash took a little bit of time to load, I would often get an exception when calling a flash function, even though the flash was ultimately playable.  The real crux of the problem was that in an HTML5 to Flash fallback implementation, the flash code doesn’t even exist as far as the browser is concerned unless HTML5 is not supported – in which case the <video> tags don’t exist.  The user can only ever interact with the HTML5 video or with the Flash – never with both.  If you implement it the opposite way, BOTH Flash and HTML5 video exist on the page, potentially leading to a situation where the user is interacting with both videos.  Once I found myself writing code to catch and prevent these weird interactions, I decided this was the wrong way to go.   The HTML5 to Flash fallback is the way this code is meant to be implemented, and leads to the cleanest implementation.