Christian Cantrell

Using Source Code Pro with Sublime Text 2 and Term

posted: 15 Oct 2012

I just downloaded the new Source Code Pro font (blog post | GitHub project) and decided to give it a try in Sublime Text 2. I like the results. Here’s the "before" screenshot: And here’s the "after" (with Source Code Pro): (See these images side-by-side here.) One of the strengths of Source Code Pro is [...]

Integrating Brackets and Phone Gap Build

posted: 01 Oct 2012

Interested in integrating Brackets and PhoneGap Build? There’s an extension for that. Here it is in action:

Video: Building Your First Chrome Extension

posted: 05 Sep 2012

The other day, I did a presentation called "Building Your First Chrome Extension." I decided to do it again and record it so I could share it with the world. It’s about 25 minutes long, but at the end of it, you will know just about everything there is to know about Chrome extensions and [...]

All About Chrome Flags

posted: 31 Jul 2012

I find myself mentioning Chrome flags frequently in articles, blog posts, and presentations, so I decided to put together a video and detailed description as a central reference. Here’s everything you need to know about Chrome flags (with Chrome Canary and command line flags thrown in for good measure): Chrome Flags Chrome flags are a [...]

CSS Regions Arent Just For Columns

posted: 24 Jul 2012

I recently wrote a new text layout engine that uses CSS Regions to do two things: Wrap text from two different columns around a centered graphic. Determine the optimal font size for pull-quotes so that they always fill the entire available space. (Quotes that are pulled from a story and displayed in a larger font [...]

My Google I/O Presentation: New Web Tools and Adva

posted: 09 Jul 2012

I had the good fortune of doing a presentation this year at Google I/O along with my coworker Vincent Hardy and Alex Danilo from Google. The topic is essentially everything Adobe is doing (or at least everything we’re ready to talk about) in the HTML space including tooling, services, and direct contributions to HTML5/CSS. We [...]

Mapping Global Keyboard Shortcuts to Web Apps

posted: 20 Jun 2012

I’ve been playing around with a project that allows me to map global keyboard shortcuts to web apps. The primary motivation was to be able to control web-based music players (Google Music, Amazon Cloud Player, Pandora, etc.) with hotkeys similar to how iTunes can be controlled globally with media keys. There are a lot of [...]

A Complete Tour of Adobe Shadow in 10 Minutes (inc

posted: 03 May 2012

I recently demoed Adobe Shadow during the FITC keynote, but I didn’t have much time. There was more I wanted to show, so I decided to make a video of my segment and include the parts I had to leave out. I think I managed to cover all the most important features of Shadow in [...]

My FITC Slides are Online

posted: 25 Apr 2012

I just put the slides from my FITC session up if you want to check them out. The presentation is called The New Playground: Adobe and HTML5. Before you start looking it, a few quick notes: It’s written in HTML, and since I wasn’t thinking about sharing it when I put it together, it probably [...]

Building the Keyboard from TRON Legacy with Web Te

posted: 19 Apr 2012

I recently re-watched TRON: Legacy, and after the scene where Sam types a few Unix commands on a virtual keyboard, I decided I had to try one out for myself. In addition to wanting to see what it was like to use a virtual keyboard, I also wanted to see if I could build it [...]

HTML Animation with requestAnimationFrame and Flas

posted: 29 Mar 2012

If you’re curious about the new requestAnimationFrame API, here’s a demo along with a code walk-through: The requestAnimationFrame API is a replacement for setTimeout and setInterval in the context of HTML animations. It has two primary advantages over timer functions: It is synchronized with the browser’s repaint loop which allows for more highly optimized animations. [...]

Stop Using rm on the Command Line (Before Its T

posted: 27 Mar 2012

True story… While writing a Python script one day to do a little screen scraping and reporting, the topic of data loss came up between a friend and myself. I was bragging that I had never in my life accidentally lost a single file or piece of data that I wasn’t able to recover. Literally seconds [...]

A Short Simple Video Explaining the Shadow DOM and

posted: 22 Mar 2012

I’ve been playing around with the shadow DOM and web components, so I thought I’d put together a quick video explaining the advantages: You can starting experimenting with these concepts today using Chrome Canary. Just make sure you enable the Shadow DOM and scoped style flags by typing “chrome://flags” into your location bar: If you [...]

Accessing the Accelerometer and Gyroscope in JavaS

posted: 20 Mar 2012

Now that you can access motion sensors in both Google Chrome and mobile browsers, I decided to demo a couple of sample application which hook into the accelerometer and gyroscope: If you want to see these applications in action and/or check out the code, the links are below: Parallax Compass Note that the compass application [...]

Mouse Pointer Lock in HTML: Video and Sample Code

posted: 15 Mar 2012

I got curious about the new pointer lock APIs in Chrome, so I decided to create a sample application. Pointer lock refers to the ability to lock the mouse pointer in one location and hide it while still getting certain mouse events like mousemove. This is critical for immersive experiences like games since the user [...]

The Next Step in Mobile HTML Workflows

posted: 07 Mar 2012

If you do a lot of mobile web development, you might want to check out Adobe Shadow. Shadow is a way to easily push web content from your desktop to any number of mobile devices while you’re developing or testing so you don’t have to type in cumbersome URLs and keep refreshing. Additionally, Shadow allows you to [...]

Prototyping in HTML

posted: 20 Feb 2012

Over the weekend, I built an e-book reader prototype to demonstrate some ideas that might make the digital book reading experience better. Although I was prototyping a native application, I found the easiest way to build it was with HTML, JavaScript, and CSS. Once CSS regions make it into all mobile browsers, I might put [...]

CSS Regions: Whats Possible Now, and Whats Comin

posted: 13 Feb 2012

I just made a quick screencast to show the current state of CSS Regions, and to demonstrate some new capabilities that will be here soon. In general, there are two aspects to CSS Regions: The ability to have text automatically flow between regions. The ability to hook into that flow using JavaScript in order to [...]

CSS Regions Support in Google Chrome for Android

posted: 09 Feb 2012

I’ve been working on some CSS Regions prototypes recently (if you’re new to CSS Regions, check out this post), so when the Chrome for Android beta came out the other day, I decided to see how some of my samples looked on mobile. It turns out, they work perfectly: The CSS Regions capabilities currently in [...]

Setting Text Selection Colors in JavaScript

posted: 03 Feb 2012

If you’re building any kind of a text editor in JavaScript, you might want to be able to dynamically set or change the text selection color. I discovered it wasn’t as easy to do as I expected it to be, so I thought I’d share the code. I created this extreme (and admittedly, somewhat obnoxious) [...]

How to Create a Custom File Input (For Use With th

posted: 31 Jan 2012

I’m working on an HTML/JS application that lets users work with local files directly in the browser, and I’m using some new HTML5 APIs to access local files. It works great (in Chrome and Firefox, anyway — see note below), however my UI calls for a custom file input rather than the default (and usually [...]

How to Download Data as a File From JavaScript

posted: 27 Jan 2012

I’m currently working on an HTML/JavaScript application that allows you to author content entirely on the client. I want to let users download that content and save it locally, but without bouncing it off a server. After some trial and error, I have it working fairly well using a data URI. Rather than explain it, [...]

A Summary of the WebKit Developer Tools

posted: 17 Jan 2012

I use the WebKit developer tools extensively in both Chrome and Safari, but it occurred to me the other day that I was probably only using a fraction of their capabilities. After researching them more fully, I was pleasantly surprised by how comprehensive they are, so I decided to make a quick list of all [...]

Creating a Loading Spinner Animation in CSS and Ja

posted: 14 Dec 2011

Since I’m not a very good designer, I usually try to do as much styling, design, and graphics in code as I can. For instance, when I wrote this mobile compass application in HTML, I did all the graphics programmatically using Canvas and CSS. I’m now working on a project that requires one of those [...]

Loading Data Across Domains with JavaScript

posted: 07 Dec 2011

I’m working on a project now that makes heavy use of XHR (XMLHttpRequest) to load data from a server. I’m writing the HTML/JS portion of the application on my local machine, but my server development environment is on a remote server under a different domain. Typically cross-domain XHR request aren’t allowed due to browser security [...]

Making XHR Requests Across Domains

posted: 07 Dec 2011

I’m working on a project now that makes heavy use of XHR (XMLHttpRequest) to load data from a server. I’m writing the HTML/JS portion of the application on my local machine, but my server development environment is on a remote server under a different domain. Typically cross-domain XHR request aren’t allowed due to browser security [...]

Adding prependChild to Element

posted: 30 Nov 2011

If you’ve ever done much DOM scripting, you have almost certainly used the appendChild function on Element. For instance, you might have done something like this: var hello = document.createElement('p'); hello.innerText = 'Hello, world!'; document.getElementById('myDiv').appendChild(hello); Nice and easy, but what if you want to prepend the child rather append? You could do this: var hello [...]

My Thoughts on Flash and HTML (as Expressed in an

posted: 11 Nov 2011

I’m a big fan of the video and podcast Tech News Today. It’s one of the best technology shows I know of, and I seldom miss an episode. As some of you know, I sent them an email yesterday about our recent announcements around Flash and HTML, and they were kind enough to read some [...]

Building an Offline Mobile Web Application

posted: 04 Nov 2011

If you’re interested in building a mobile web application that works offline and is virtually indistinguishable from a native installed application, this post explains most (if not all) of what you need to know. (To see an example of an offline mobile web application, see the post, Porting an AIR Application to HTML.) What is [...]

Porting an AIR Application to HTML

posted: 02 Nov 2011

Check out on your device (see requirements below). I recently wrote a simple compass application in AIR to demonstrate the use of ANEs (AIR Native Extensions) for accessing sensor data that we don’t have API support for yet. When I heard that iOS 5 brought orientation APIs to mobile Safari, I decided to port [...]

Secure Data Persistence with AIR 3

posted: 18 Oct 2011

AIR 3 offers two new capabilities that can make data persistence much more secure than what was possible with previous versions of AIR. If your AIR application persists information like credentials or sensitive relational data that must remain secure, this article is for you. flash.crypto.generateRandomBytes() The new flash.crypto.generateRandomBytes function provides a way to generate far [...]

Parsing Exif Data From Images on Mobile Devices

posted: 13 Oct 2011

If you’re interested in parsing Exif data from images on devices using AIR, you’re in the right place. But first, a little background to put this example in context. Someone asked me a really good question at MAX about getting metadata about images on mobile devices. I don’t recommend using the file property of MediaPromise [...]

Providing Hints to the Garbage Collector in AIR 3

posted: 11 Oct 2011

AIR 3 has a new API to allow developers to provide the runtime’s garbage collector with hints. The API is called System.pauseForGCIfCollectionImminent(), and it requires a little explanation to understand both it’s utility and value. Before I get into how the function works, let’s start with why you’d want to give the garbage collector pointers [...]

Slides, Links, and Questions From my MAX 2011 Pres

posted: 07 Oct 2011

I wanted to post some additional information from my sessions at MAX 2011 for those of you who weren’t able to make it. Below you can find my slides, all the links contained in my presentation, and some of the questions (with answers) I received. Slides The recording of my presentation isn’t available yet, but [...]

Accessing Compass Data With AIR 3

posted: 29 Sep 2011

I just finished writing a simple compass application for AIR 3 that uses an ANE (AIR Native Extension) to get orientation data from the Android operating system. All the code (AIR application, Java native extension, and "glue" library code) is available on Github if you want to see how it works.

New Audio Capabilities in AIR 3

posted: 26 Sep 2011

AIR 3 has two important new audio capabilities: Device speaker selection. Play audio through a phone’s speaker, or through its earpiece. Background audio playback on iOS. Keep audio playing in the background when a user switches away from your application, and even when the screen is switched off. Device Speaker Selection Toggling between a phone’s [...]

Writing a Cross-platform and Cross-device Applicat

posted: 22 Sep 2011

If you’re writing a cross-platform, cross-device AIR application that allows users to pick an image from their local computer/device, there’s a relatively simple technique you can use to make sure the app does the right thing in all contexts (desktop, phones, and tablets). Specifically, I define "the right thing" as: On phones and Android tablets, [...]

Native Text Input with StageText

posted: 09 Sep 2011

One of the major new features of AIR 3 (release candidate available on Adobe Labs) is the introduction of the StageText API. StageText allows developers to place native text inputs in their mobile AIR applications rather than using the standard flash.text.TextField API. StageText is essentially a wrapper around native text fields, so the resulting input [...]

Socket Improvements in AIR 3

posted: 25 Aug 2011

In AIR 3 (currently in beta, available on Adobe Labs), we added a frequently requested feature to the Socket class: an output progress event. The Socket class has always dispatched a ProgressEvent which is designed to let you know when data is ready to read from the socket, however there was no event indicating how [...]

How to Correctly Use the CameraRoll API on iPads

posted: 23 Aug 2011

Now that iPads have built-in cameras, we have to start thinking about how to use camera-related APIs in a more cross-platform way. In particular, the CameraRoll API requires some consideration. On most devices, you can just call browseForImage on a CameraRoll instance, and trust that the right thing will happen. On iPads, however, that’s not [...]

Native JSON Support in AIR 3

posted: 18 Aug 2011

One of the many new features in AIR 3 (in beta, available on Adobe Labs) is the new native JSON parser. It has always been possible to parse JSON with ActionScript, but AIR 3 provides native JSON support which is faster than ActionScript implementations, and more efficient in terms of memory usage. The two main [...]

Front-facing Camera Support in AIR 3

posted: 16 Aug 2011

Adobe AIR for mobile has had consistent camera support since AIR 2.6, and now in AIR 3 (in beta, available on Adobe Labs), we’ve introduced support for front-facing cameras, as well. The introduction of the new position property on Camera along with the constants in the new CameraPosition class (BACK, FRONT, and UNKNOWN) allow you [...]

How to File Adobe AIR Bugs

posted: 15 Aug 2011

I just wanted to post a quick reminder that we now have a public bug base for Adobe AIR. You can find it at, and it currently supports both AIR and Flash Player (along with a few other products). In case you’re not accustomed to filing bugs, it’s hugely important to be as thorough [...]

How to Tell Which Flex Components Have Been Mobile

posted: 12 Aug 2011

Even when you work for Adobe, it’s hard to keep up with everything we’re doing — especially when it comes to AIR, Flex, and Flash Builder. I started building a new Flex Mobile application yesterday, and I realized that I didn’t know exactly which Flex components had been mobile optimized to-date. Rather than just asking [...]

How to Use the AIR 3 Beta SDK

posted: 10 Aug 2011

The AIR 3 runtime has been out in beta for some time, and now the AIR 3 SDK is available, as well. If you’re interested in checking it out, you can find it over on Adobe Labs. If you’ve downloaded the SDK and want to give it a try, you’ll need to know how to [...]

When AIR Applications Prevent Shutdown or Restart

posted: 26 Jul 2011

My friend Ben Simon occasionally uses AIR when he has clients who need cross-platform desktop applications. Recently, Ben discovered that an AIR application he’s working on is preventing OS X from shutting down or restarting. Specifically, when the application is running, choosing "Restart…" or "Shut Down…" from the Apple menu results is the OS claiming [...]

Screencast of CSS Regions

posted: 12 May 2011

One of the most popular demos at the Adobe booth at Google I/O this year was CSS Regions. CSS Regions represents Adobe’s attempts to bring magazine-level production to the web in a simple and standard way. Here’s a quick demo: These samples are available on Adobe Labs along with documentation. For more details, check out [...]

Tooling for Adobe AIR 2.6

posted: 25 Mar 2011

Since we launched AIR 2.6, I’ve seen a lot of questions online about tooling support, so I thought I’d try to clear some things up. We frequently release the AIR runtime and SDK in advance of releasing new versions of tools (Flash Builder and Flash Professional) for two reasons: The tools need some additional time [...]

Owned Windows in AIR 2.6

posted: 24 Mar 2011

One of the new desktop features in AIR 2.6 is owned windows. Owned windows are primarily designed for when you want a utility or a lightweight window to be related to another window as in the case of a tool pallet. The following describes the relationship between owned windows and their owners: Owned windows always [...]

Native Cursors in AIR 2.6

posted: 23 Mar 2011

One of the coolest new desktop features in AIR 2.6 is the ability to use native cursors. By "native cursor," I mean custom cursors at the OS level as opposed to the runtime level. In other words, rather than hiding the mouse cursor and rendering a sprite in its place (the old way to do [...]