Using Source Code Pro with Sublime Text 2 and Terminal

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 that it does an excellent job of differentiating between similar glyphs. Here are a few easily confused characters in my blog’s default font:

1Il|iO0oB8

And here they are in Source Code Pro:

1Il|iO0oB8

Here’s a good look at some metacharacters:

<>&"^$\/()|?+*[]{},.

Since I frequently use Vim as my editor, I decided to try Source Code Pro with the terminal, as well. Here’s the before picture (using Menlo):

And here’s the terminal with Source Code Pro:

If you want to give it a try, here’s what you do:

  1. Download the Source Code Pro font and unzip the file.
  2. Install the font…
    • On Mac:
      1. Open the Font Book application.
      2. Click on the + button under the Font column.
      3. Navigate to the fonts you want to install (I installed the OpenType version).
    • On Windows:
      1. Navigate to the folder containing the fonts you want to install.
      2. Select all the fonts in the directory.
      3. Right-click and select Install.
  3. Follow these instructions for changing your font in Sublime Text 2.

Let me know what you think. So far, I really like it, but I’ll need to live with it for a few days before I know for sure.

Integrating Brackets and Phone Gap Build

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

Video: Building Your First Chrome Extension

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 be ready to start writing your own.


All About Chrome Flags

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 way to enable or disable functionality in Chrome that may not be fully implemented, standardized, or that might still be a little buggy. Rather than wait until a feature is fully ready to be released, Google can just disable the functionality by default using a Chrome flag. That means developers and particularly curious end users can opt into experimenting with the cutting edge of the web without everyone else’s browsing experience potentially being negatively affected.

To turn experimental features on or off in Chrome, follow these steps:

  1. Open a new tab or window in Chrome.
  2. Type chrome://flags (or about://flags) in the location bar.
  3. Find the feature or functionality you want to toggle on or off. Note that you can use find in page (control/command + f) to quickly locate a particular feature.
  4. Click on the Enable or Disable link.
  5. Click on the Relaunch Now button at the bottom of the page.

Once your browser has relaunched, you can start experimenting with whatever feature or new piece of functionality you just enabled.

Chrome Canary

Another way to experiment with the cutting edge of the web is to use Chrome Canary (as in a canary in a coal mine, but more humane). Chrome Canary has the latest and greatest browser features and functionality that haven’t made it into the main release of Chrome yet. It’s intended for developers and early adopters who are willing to trade a little stability for the chance to play with the most recent web technologies.

One of the things I really like about Chrome Canary is that you don’t have to choose between the stable version of Chrome or Chrome Canary since you can run them both side-by-side (as I often do).

Command Line Flags

If you’re comfortable with the command line, you can also change Chrome’s behavior by launching it with command line flags. For example, the command below launches Chromium (the open-source version of Chrome) and tells it to cycle through the list of URLs in the specified text file, then exit:

/Applications/Chromium.app/Contents/MacOS/Chromium --visit-urls=/Users/cantrell/tmp/urls.txt

You can find a comprehensive list of command line flags (sometimes called switches) on Peter Beverloo’s blog, and an explanation of how to use them in the Chromium documentation.

Other Chrome URLs

For a list of other special Chrome URLs which expose various functionality and information about Chrome, type chrome://about in your location bar.

CSS Regions Aren’t Just For Columns

I recently wrote a new text layout engine that uses CSS Regions to do two things:

  1. Wrap text from two different columns around a centered graphic.
  2. 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 are frequently referred to as "pull-quotes".)

Here it is in action:


As you can see, CSS regions aren’t just for columns. Regions allows text to flow from one element to another automatically — regardless of size, position, or order — and allows that text to reflow when necessary (when content is added or removed, when elements get resized, when the font sizes changes, etc.). Of course, you can use regions to implement columns if you want to, but remember that you’re not actually creating columns; you’re creating regions that just happen to be arranged as columns. Additionally, you can use the CSS Object Model (CSSOM) to script regions in order to do some very cool things (more on this below).

Here’s a nice simple diagram of CSS regions I stole from Razvan Caliman’s post, Working with CSS Regions and the Shadow DOM:

In the screenshot below, it looks like my content is arranged in columns which wrap around a central graphic and pull-quote:

This is actually done with a series of strategically placed regions:

I’m also using CSS Regions to do something for which it wasn’t really intended: getting text of an arbitrary length to perfectly fill an element of arbitrary size. For example, in the two screenshots below, the first pull-quote is longer, and therefore requires a smaller font size than the one after it.

Using regions, I’m able to dynamically determine the perfect font size regardless of text length or element dimension. It works like this:

  1. All the pull-quotes are extracted from the story (span tags with their class attributes set to "pull_quote").
  2. Pull-quotes are matched to text that appears on each page (since you don’t want a pull-quote that corresponds to text on a previous or subsequent page).
  3. Unique named flows are created for each pull-quote. Those named flows are used for the flow-into CSS property of the quotes, and the flow-from property of the pull-quote elements.
  4. Each region has a regionLayoutUpdate event attached to it.
  5. Each pull quote has a font size of 1em to start. In the regionLayoutUpdate event handler, the regionOverflow property is checked to see if the text fits or not.
  6. If the text fits — if the value of the regionOverflow property is "fit" — the font size is increased by 1/10th of an em. This process is repeated until the text no longer fits (when the regionOverflow property is "overflow").
  7. Now that the text no longer fits, the size is backed down 1/10th of an em and the regionLayoutUpdate event listener gets removed.

In the video, you can actually see the process in action for the first quote (all the quotes are actually being resized simultaneously, but only the quote on the first page is visible). If I really wanted to polish the code, I would optimize the process by using an algorithm that could arrive at the optimal size faster, and I’d probably hide the quotes until they were the right size, but for the demo, I like the visual effect of them expanding.

If you want to check out the code, you can see a demo here (press "Esc" to reveal the regions). Be sure you’re using Google Chrome, and that you have CSS Regions enabled in chrome://flags (and that you’ve restarted your browser after enabling regions). Also, the resizing behavior is still a little buggy, so if you resize your browser window, you might get some unexpected results.

My Google I/O Presentation: New Web Tools and Advanced CSS/HTML5 Features from Adobe & Google

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 really had to struggle to fit everything into a single hour, but I think it’s a very comprehensive overview with a lot of great demos.


Mapping Global Keyboard Shortcuts to Web Apps

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 moving parts (node.js, a Chrome extension, a third-party app to map global keyboard shortcuts to shell scripts), but I was able to do almost all of it just with JavaScript, and once everything is in place, it works really well:


If you want to check out the code, it’s available over on my personal blog.

A Complete Tour of Adobe Shadow in 10 Minutes (including integration with LiveReload)

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 almost exactly ten minutes.

The video below covers:

  • Configuring Adobe Shadow.
  • A demo of Shadow on four devices simultaneously.
  • Integrating Adobe Shadow and LiveReload.


If you want to learn more about Adobe Shadow and/or download it and give it a try, check out the Shadow page on html.adobe.com. For more information on Shadow and LiveReload, see this post on the Adobe Shadow Team Blog.

My FITC Slides are Online

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 only works in Chrome, Safari, and Firefox.
  • Use the arrow keys to navigate forward and back through the deck.
  • A lot of the presentation was demos, so I added links to videos that should be sufficient substitues.
  • The slides were designed for 1024×768, so they might look scrunched on your big monitor.
  • If you view the slide that talks about filters effects in Chrome Canary, clicking on the filter names in the list applies them to the image.

The slides are available here. If you have any questions, feel free to post in the comments. (Session photo by @treesrustle.)

Building the Keyboard from TRON Legacy with Web Technologies

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 entirely with web technologies. I discovered I was able to do everything I wanted — except type particularly well.

Below is an explanation of the project (along with some conclusions on virtual keyboards in general). All the source code for the project is available on GitHub.