lloyd.io is the personal website of Lloyd Hilaiel, a software engineer who works for Team Ozlo and lives in Denver.

All the stuff you'll find here is available under a CC BY-SA 3.0 license (use it and change it, just don't lie about who wrote it). Icons on this site are commercially available from steedicons.com. Fonts used are available in Google's Web Font directory, and I'm using Ubuntu and Lekton. Finally, Jekyll is used for site rendering.

Finally, Atul, Pascal, and Stephen inspired the site's design. And in case you're interested, this site's code is available on github.

A Chromeless Snapshot
2011-02-11 00:00:00 -0800

There has been a ton of development in the Mozilla Labs Chromeless project since the 0.1 release, and I wanted to take a moment to give a snapshot of our progress.

Application Generation

Chromeless lets you build desktop apps with web technologies, but how do package those up for distribution? Back in january we implemented the ability for chromeless to embed your application code into a standalone application. On OSX the output is an application bundle, that is a special type of folder with a .app extensions. On linux and windows the output is a directory with a single binary that is named the same as your application.

Usage is simple, just pass ‘appify’ to chromeless on the command line:

$ ./chromeless appify examples/thumbnails
Generating a standalone, redistributable, application
Using Browser HTML at '/home/lth/dev/chromeless/examples/thumbnails/index.html'
Building application in >/home/lth/dev/chromeless/build/My Chromeless App< ...
  ... copying in xulrunner binaries
  ... placing xulrunner binary
Building xulrunner app in >/home/lth/dev/chromeless/build/My Chromeless App< ...
  ... copying application template
  ... creating application.ini
  ... copying in CommonJS packages
  ... copying in application code (/home/lth/dev/chromeless/examples/thumbnails)
  ... writing harness options
xul app generated in build/My Chromeless App

Once this is complete you have a standalone app that you can combine with your favorite installer technology to build a distributable application.

Native Menus, and Keybindings!!

Mike De Boer has contributed modules which expose access to native menus and allow you to control the display and behavior of your application menus. Full documentation isn’t yet available, but there’s some example code available that demonstrates how you can build up menus with icon and keybinding support:

Pretty Menus!

In addition to native menus, Mike has also put together a library to allow one to programatically configure shotcut key combinations, or hotkeys.

A Documentation System

As of 0.1, chromeless had no documentation. We’ve take the system from jetpack and reworked it a bit to fit for Chromeless. To generate docs from Chromeless, pass docs on the command line:

$ python2 ./chromeless docs
Generating documentation
Created docs in /home/lth/dev/chromeless/build/docs.

While the content isn’t very complete at this point, we now have a usable system that we can update as we go. You can checkout a snapshot of the chromeless docs on our github pages.

Startup Parameters

It’s important to be able to control basic application parameters in a simple way. To specify things like the initial height and width of your application window, whether it’s resizable, the name of the application, and the icon that should be used to represent it. To address this problem we now support a configuration file that may be placed in the same directory as your application code: appinfo.json. This configuration file looks something like:

{
  "name": "My First Browser",
  "version": "0.1",
  "icon": "appicon.png",
  "resizable": true,
  "initial_dimensions": {
    "width": 500,
    "height": 300
  }
}

Now while the only keys which are actually implemented right now are name and version, this is a place where any configuration which changes the initial behavior of your application will reside.

File System Interaction

Contributions from Mike De Boer and Alexandre Poirot have brought good api breadth around filesystem interactions. The basic design of the file system APIs includes three different modules:

In addition to these low level utilities, the app-paths offers an abstract way of getting at various standard filesystem paths.

OS Drag and Drop

Marcio Galli has put together example code for how one might go about supporting drag-in and drag out in their chromeless apps. It mostly leverages HTML5 support with a teeny tiny library to support native feeling drag-out.

Favicons and Mime-Type guessing

The mozilla platform (obviously) includes great tools for doing webby things! One example is displaying favicons, and that’s now wrapped up in a simple to use library. In addition there’s a new mime guessing library and lets you get a probable mime type given a file path.

Improved Embedding of Web Content

One of the primary goals of chromeless is to make it possible to build web browsers, and this means safely embedding web content is an important feature. The approach we take in chromeless is to transparently upgrade iframes that are direct children of your application code, to give you a deepened view as to what’s going on inside of them.

This upgrading concretely means two things:

Better Console Output

Mike De Boer has contributed tons of polish to the good ol' console.log() function, including pretty object introspection:

Introspection!

Simplified Web Requests

The addon-sdk community has written a nice little request library which simplifies issuing HTTP requests, and we’ve uplifted that into chromeless. Additionally, an API compatible version of XMLHttpRequest without the cross domain restriction is also available.

BIAB, and TTYL

Hopefully this whirlwind tour of new features in trunk gives you a good grasp of the project’s current state. The speed at which things are shaping up I feel is a testament to the quality of the platforms upon which chromeless is built, and the sheer awesome of the contributors.

Now, back to merging…