Mobile Tutorials
How to Create a Twitter Card
One of my favorite social APIs was the Open Graph API adopted by Facebook. Adding just a few META tags to each page allowed links to my article to be styled and presented the way I wanted them to, giving me a bit of control...
Vibration API
Many of the new APIs provided to us by browser vendors are more targeted toward the mobile user than the desktop user. One of those simple APIs the Vibration API. The Vibration API allows developers to direct the device, using JavaScript, to vibrate in...
Disable Autocomplete, Autocapitalize, and Autocorrect
Mobile and desktop browser vendors do their best to help us not look like idiots by providing us autocomplete, autocorrect, and autocapitalize features. Unfortunately these features can sometimes get in the way; we don't always want or need the help they provide. Luckily most browsers allow...
Telephone Link Protocol
We've always been able to create links with protocols other than the usual HTTP, like mailto, skype, irc ,and more; they're an excellent convenience to visitors. With mobile phone browsers having become infinitely more usable, we can now extend that convenience to phone numbers: The
tel
...Firefox OS Simulator
If you haven't heard yet, Mozilla is working on an awesome new phone OS called Firefox OS. From a developer's perspective, highlights include: all apps are and will be created from CSS, JavaScript, and HTML the OS is open source each app runs as its...
Locating the iPhone and iPad Simulators on Mac
I recently received a new MacBook Pro and started configuring debugging tools I had debugged ages ago on my personal machine. In doing so, I completely forgot that the iOS Simulator provided by XCode isn't added directly to the Applications directory; instead, you have to dig...
QUOTA_EXCEEDED_ERR in Mobile Safari
I've been working on an HTML5 application for the new Mozilla Marketplace, writing a tutorial along the way to help all of you create and promote your HTML5 web-powered app. The HTML5 app uses localStorage to save basic search history, as well as other newer...
CSS Animations Between Media Queries
CSS animations are right up there with sliced bread. CSS animations are efficient because they can be hardware accelerated, they require no JavaScript overhead, and they are composed of very little CSS code. Quite often we add CSS transforms to elements via CSS during...
Detect Orientation Change on Mobile Devices
Unless your mobile application allows for only portrait or only landscape views, there's a good chance you will need to adjust a few things. Even if you've built your layouts in a fluid fashion, you may need to programmatically make some changes. There are...
Force Hardware Acceleration in WebKit with translate3d
Ever notice an odd flicker within WebKit-powered desktop and mobile browsers, or simply want to use hardware acceleration of a given device? There's a really neat trick you can use to force hardware acceleration! The WebKit CSS The use of
translate3d
pushes CSS animations into hardware acceleration.