Posts in Category "HTML"

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/ --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.

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 For more information on Shadow and LiveReload, see this post on the Adobe Shadow Team Blog.

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.

HTML Animation with requestAnimationFrame and Flash Professional CS6

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:

  1. It is synchronized with the browser’s repaint loop which allows for more highly optimized animations.
  2. Since it’s specifically designed and intended to be used for animation rather than being a general purpose timer, the browser knows that it’s safe to throttle it back when the tab isn’t active. Throttling back animations means freeing up CPU cycles, and reducing unnecessary battery drain on mobile devices.

If you want to see this animation in action (and/or check out the code), it’s available here (Hint: if it’s running slowly, try making your browser window smaller). Thanks to Chris Georgenes for the “rocker girl” animation. And finally, here are the resources I used to learn about requestAnimationFrame:

Continue reading…

A Short Simple Video Explaining the Shadow DOM and Web Components

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 want to check out the code used in this example, you can download it here.

If you want to learn more about the shadow DOM and web components, here are the resources I used:

Accessing the Accelerometer and Gyroscope in JavaScript

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:

Note that the compass application only works on devices with gyroscopes (no laptops that I know if), and requires iOS 5 or newer.