Posts in Category "Web Development"

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.

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.

Screencast of CSS Regions

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 Arno Gourdol’s article, CSS3 regions: Rich page layout with HTML and CSS3.

Weekend update to Newsbrew

A couple weeks ago, I blogged about a Google App Engine news aggregator I wrote called Newsbrew (original post). A few days later, Google announced the availability their RESTful feed API. Since the trickiest part of Newsbrew was the aggregation code, I decided to refactor the application to use Google’s new service.

Newsbrew still stores feed and post data, but rather than retrieving and parsing the feeds myself (a surprisingly complex and error-prone process), Newsbrew now uses Google’s REST feed API. All data, regardless of the underlying syndication format, is returned in a nice normalized JSON format.

With just a few hours of work, I was able to make Newsbrew much more robust, and because I no longer have code for parsing nine different formats of RSS and Atom, Newsbrew is much less error prone, and the code base is simpler.

I also added Ajaxian to the blogroll at the request of Dion Almaer. If you know of any other sites I should add, let me know.

Newsbrew is now a Google Application

I wrote a news aggregator a couple of years ago called Newsbrew which I primarily used for my own news-reading needs. I think I took it down when I got tired of paying for the server, and worrying about keeping it up.

After Google launched the Google App Engine, I decided to take a little break from Flex and AIR and rewrite Newsbrew in Python to get a good feel for the GAE experience. You can see the current beta version here.

Overall, I was very pleased GAE. It took me about five days to write this version of Newsbrew, but that included learning Python, Django, and everything about GAE. The application is fairly comprehensive, consisting of a user interface, aggregation service, and a secure administrator section. Unfortunately, I didn’t get to all the features and bug fixes that I wanted, but the app still seems to work reasonably well.

It’s still going to be a little while before we’re writing real-world production apps on GAE as it still has several rough patches, bugs, and missing functionality. But it’s very clear where Google is going with this, and there’s no doubt that GAE is a very powerful concept and platform. I’m certainly going to keep my eye on GAE, and use it as much as I can.

Firefox 2 Live Titles

I’m sure most Firefox users are familiar with Live Bookmarks by now — bookmarks that point to RSS feeds, and update themselves as the feed is updated. Firefox 2 has now introduced Live Titles — page titles that also update themselves. If you’re using Firefox 2 and you want to see an example, go to woot.com and bookmark it. Rather than the typical name text field, you’ll see a combo box that lets you enter a static title, or choose one of woot’s two Live Titles, which is a brief description of the item currently being sold. Makes perfect sense for both woot and woot fans.

Live Titles are actually "microsummaries" which are easily implemented using a link tag with a rel value of "microsummary". For more information, check out this page on the Mozilla wiki. You can also find a list of microsummary-enabled sites here. And finally, check out the Firefox 2 Release Notes for more information on what’s new in Firefox 2.

Programmatically Determining a Site’s Language

I was having a conversation with a couple guys the other day about data aggregation, and the topic of language came up. They wanted to know how you can programmatically determine what language a site is written in (language as in spoken and written language, not computer language). Off the top of my head, I guessed one could uncover clues in the site’s HTTP headers, character encoding, or by geocoding the site’s IP address.

It turns out to be a harder problem to solve than I initially thought. HTTP headers are really no more help than a site’s character encoding which really isn’t much help at all since UTF-8 can pretty much encode any language there is. And geocoding an IP address is really nothing more than a hint for all the regular reasons geocoding IP address doesn’t always work, and for the additional reason that a server being in a particular country doesn’t really tell you anything about the language the sites on the server are written in (I used to live in Japan, but never posted a single thing in Japanese).

I did a little research, and it looks like folks like Google use very complex techniques for determining a site’s language like comparing characters and words against known sets of characters and words in a database. This seems like a reasonable approach, but not one that I could implement in a reasonable amount of time (like a couple of hours), so I did what I always do when faced with a very complex problem: I looked for an obvious and simple solution.

Continue reading…

Firefox + Exposé = foXposé

I can’t remember where I came across this yesterday, but I somehow stumbled upon the foXposé Firefox extension. It basically tiles all your tabs inside of a single window, and lets you click on one to select it. Very cool. I’ve never been a big fan of Exposé on OS X, but I’m testing this extension to see if I find it useful as it is impressive.

I’ve also started pulling all the essential Firefox hacks and extensions together under a Firefox del.icio.us tag. Expect it to continue to grow.

Firefox 1.5 possibly (hopefully) available today

The rumor is that Firefox 1.5 will be released today. Keep an eye on GetFirefox.com. My favorite new feature: drag and drop reordering of tabs. I’ve been waiting for this for as long as I’ve been doing tabbed browsing, and have always found the plugins that provide this functionality to be sketchy, especially on OS X. I’m glad to see Ansers.com is being added to the search engine list, as well. And of course performance improvements are always welcomed.

Mozilla.org has a full list of new features (for RC 3, not the final release). Let’s hope it’s today. I could use something to brighten up this dreary San Francisco morning.

Update: As mentioned in the comments, it’s available now. Also, when I installed 1.5, I was told that the SpellBound and Live HTTP Headers extensions would not work, and were being disabled. I uninstalled them both (along with the dictionaries), then reinstalled, and they both work fine.