Anyone following Cappuccino can see that Nick has been a valuable member of the community. He’s always offering help in the IRC channel and on the mailing list, and he’s also the most active contributor outside 280 North. On top of all that, he’s been working on some exciting new ideas for Cappuccino, some of which we hope to fold into the main repository in the coming months.

So congratulations to Nick! And as Cappuccino continues to progress, we look forward to adding even more committers to the project.

The Problem with Spriting

Image spriting is the act of taking all the images in your app (or framework, or library, or whatever) and combining them down to one single image. This has the advantages of being smaller (since each individual image has overhead associated with the format), as well as allowing you to grab it from your server with one request:

This is faster in an absolute sense, but even more so psychologically since it allows you to show the contents of your app faster without having all the images “flash in” later. Cappuccino currently uses a similar technique with the source code in your application: concatenating it all together and minifying it, but up until now we’ve had no automatic, or built-in, support for spriting, you’ve instead had to do it entirely yourself. And truthfully, no framework has really good support for this.

This is because the fundamental problem with spriting today is that the process isn’t really automated and the results are thus subpar. Sure, there are scripts which will put images together for you, but they all require you to configure them first and to update them as your use of the images in question changes. This is because traditional spriting is dependent on how you use your images. Whether you choose to repeat, stretch, scale, or even draw to a canvas affects which images can be sprited together, and even which can’t be sprited at all. This has a number of unfortunate side effects:

• Rarely do you actually end up with just one image: Instead, you can end up with 2, 3, or even more. This is because images have to be “grouped” by their use. For example, vertically repeating images can be sprited together, but not with horizontally repeating images.
• You may have to actually change your code: Since images are being mutated, the code you write needs to take into account these new images. If you are lucky you have a system that is relatively good at doing this for you. However, if you decide to use an image in a new way (such as drawing it to a canvas), you either have to update your configuration files or choose to code it differently. This is easy to forget.
• Your images are still shipped separately from your code: Even in the best case where you are lucky enough to successfully sprite all your images together, you still have to wait for them separately from when your code is ready, potentially leading to noticeable delays from latency, or a “flash in” effect.
• Inflexible due to loss of data: There exist cases where your code is meant to be used by others, such as with libraries and frameworks. In this case, images can’t be used in any way other than how you intended them to if they are sprited, because the original images are gone or would require a redundant second download.

So unfortunately there is currently no good one-size-fits-all solution for image spriting the way there is with “code spriting”. All of them require the user to actually become involved in the optimization process, and even still can produce less than stellar results. This is clearly not a solution that can scale, and most everyone agrees to this.

But we’re hoping to change this with the release of Cappuccino 0.8, as we’re introducing a whole new, completely cross-platform, way to sprite: base64 images. By encoding images as base64, we create a lossless text representation of images, allowing us not only to use them in whatever way we please, but to actually ship them with the code:

There are many advantages to this:

• One file, guaranteed: All images can always be sprited together regardless of how you plan to use them, and can be included with the actual source code. This has the added benefit that gzip can work its magic on the entirety of your web app as one, producing better results.
• No need to ever modify code or configuration files: Since we’ve eliminated the ambiguous part of spriting images, the Cappuccino build tools are able to perform this optimization on your code automatically without tedious configuration files or having to “learn” how to sprite.

Yes, This Works in IE 6 and 7.

I’m sure most people are wondering how we are pulling this off in versions of IE before 8, since they do not support data URLs. Notice that earlier I didn’t specifically mention data URLs though, I instead only referred to the more broad technology of base64 images. As it turns out, IE has had support for base64 images since version 6 (!) with a little-known technology called MHTML. MHTML allows you place all your resources in one “resources” file, which incidentally can be any file in your website… including the same file that contains all your code.

Cappuccino is already smart enough to be able to automatically download and use different code depending on what browser is being used (and with no server configuration), so we now simply ship data URL versions of this technique to modern browsers, and MHTML versions to older copies of IE:

This is a very exciting feature for us. This has been a weak point in Cappuccino and its nice to finally have a solution that not only works, but is drop dead simple to use. Our tests have been proven incredibly promising, giving us the fastest load times we’ve ever seen with Cappuccino, and absolutely fantastic perceived speed as well. Our tools have all been honed to use this at every level: Apps, frameworks, and themes will automatically sprite your images for you.

This is just one of the many enhancements coming with Cappuccino 0.8, and the best part is as usual you won’t have to change a single line of code to get all the benefits.

From a technology perspective, Enstore is a real milestone as the UI was built almost entirely using nib2cib, showing that Cappuccino doesn’t just let you build apps faster, but also creates drop dead stunning results.

Klaas Pieter has written up an excellent blog post about his experiences creating Enstore at Sofa where you can learn more, and a special thanks to him as well for contributing a lot of bug fixes along the way!

Check out the project on GitHub to start hacking on your own real time Cappuccino services!

Cappuccino officialy turned one last Friday. I suppose that technically Cappuccino is quite a bit older, but a year ago was when we finally released it into the open source community. It’s unbelievable to me that in just one year we went from being a completely unkown technology to one of the most popular JavaScript projects on GitHub. I’m a little embarrassed to admit this, but I can remember that just a few weeks before launching, the guys over at Heroku were still convincing us that we needed to switch from svn to git. Good times.

I’d like to take a step back and go over just some of the things that have happened with Cappuccino in the past year:

• We released one of our coolest tools: nib2cib. nib2cib actually lets you visually build your Cappuccino apps using Apple’s Interface Builder!
• We added a much requested theming engine. With the help of our friends over at Sofa, we also launched Aristo, a beautiful new open source UI to serve as the default look and feel for Cappuccino apps.
• We added native debugging and profiling support for Objective-J in WebKit, which now ships standard with Safari.
• We’ve begun to integrate some of the cool new features from HTML 5 into Cappuccino, like native drag and drop.
• We added KVC and KVO (key value coding and observing), to help you automatically propagate and sync changes from your models to your views.

But most importantly we’ve built an amazing community. People have really stepped in to fill the gaps in the Cappuccino environment, writing tutorials, filming screencasts, and of course creating awesome apps. Another place the community really outdid themselves is backend technologies. We originally wrote Cappuccino with the express intent of being completely server agnostic. Since then, backend support has been added for Java, Rails, and just recently Lift. We’ve even written an Objective-J module for the emerging CommonJS server-side JavaScript standard to get Cappuccino running on the backend too. The best part of course, is that people are contributing code faster than we can integrate it (we promise to get the fork queue back down to zero!). People have been working on core features in Cappuccino that I never imagined anyone outside the members of the core team tackling.

This year has truly been great and I’m incredibly thankful to everyone that has used and contributed to Cappuccino. But next year is going to be even better. We have so much planned for this project and the vision is far from complete. It’s already the case that building Cappuccino apps is a fundamentally different experience than any other web framework out there. It amazes me that someone can pick up a copy of Aaron Hillegass’ Cocoa Programming and use it to throw together a web app using drag and drop in no time. But just wait to see what’s in store. If you took a look at us when we first launched but never gave it a shot, or just haven’t had time to play around with it yet, now is a great time to join the party!

- Francisco

Summary

• Improvements to the way nib2cib handles custom classes in nibs.
• Improvements to menus and menu items in nib2cib
• Added automatic drag and drop support to CPImageView
• Better JSON support
• Better UTF8 Support
• Updated included version of Narwhal (http://narwhaljs.org/)

One completely new feature we added is an auto generated showcase app for the theming API we introduced in 0.7. This showcase allows you to better test your themes under a number of different conditions. You can check out the one for Aristo here.

Downloading

As always you can download this release from our downloads page, or update your source.

Thanks for all the help on this release!

Thanks to sponsorship by Sofa there will be food!

If you can’t make it before 9:00 we’ll likely be hanging around the bar at Jillian’s after, but check @280north on Twitter for updates.

0.7 By The Numbers

As of version 0.6, Cappuccino had 9 total contributors. Version 0.7 more than triples that number with 29 total contributors. And thanks to the inspiration and hard work of Xavier Noria and José Espinal, we’ve got a slick new website that keeps up to date tallies on all of the contributors to the project. Check it out here. If you find a mistake, be sure to let us know in the comments.

This release includes over 100 bug fixes, thanks in part to all the new contributors, and to the hard work of users taking the time to file quality bug reports. If you hadn’t noticed already, we’ve moved to github’s new issue tracking for bug reports, so check out the new system, and vote on issues that are important to you.

New Look

The biggest new feature of Cappuccino is our new new theme: Aristo. Aristo is the new look and feel for Cappuccino applications. Created by the talented designers at Sofa, Aristo is designed specifically to look good in the browser, and in any browser, whether it’s Firefox, Safari, or even Internet Explorer, Mac and Windows. We’ve also open-sourced the PSD file used to create Aristo. All the controls have been updated to use the new style, and we’ve added a few new controls as well, like checkboxes, radio buttons, and segmented controls.

Theming

We didn’t just build one new look for Cappuccino, though. Instead, we built an entirely new theme engine which will let anyone create a theme for Cappuccino. All the properties of the standard controls are fully themeable in all the different “theme states” (like “pushed”, “disabled”, “normal”, etc.). In the coming months, we’ll be sharing new themes with the community, and building a site for users to post their own themes for others to download and use.

Interface Builder

Those of you who come from a Cocoa background are used to using Apple’s Interface Builder tool to layout your Cocoa applications. Thanks to a technology in 0.7 called nib2cib, you can use Interface Builder to layout Cappuccino applications too. All of the classes supported in Cappuccino 0.7 that have Cocoa analogues are included. So, you can drag checkboxes, sliders, text fields, buttons, and lots more. You can even instantiate custom top level objects, or custom view subclasses, which will be converted to the right class in Cappuccino by the nib2cib tool. Once you’re done laying out the UI of your application with Interace Builder, you can use it’s target-action and outlet technology to build up its logic as well.

nib2cib is a powerful tool that drastically reduces the amount of code you need to write to build an interface with Cappuccino. The starter package now includes both a nib/xib based application template, and a standard, code based template, so you can choose which is best for you. From the command line you can use the new capp tool to generate a nib/xib project by typing “capp gen -t NibApplication MyApp”.

The Rest

As if that wasn’t enough, there are a lot more changes. First off, improved support for debugging in Cappuccino and Objective-J, thanks to some contributions to WebKit. For more details, see Francisco’s post on the topic.

We now build on top of Rake instead of ant, which has helped us create a much better build system that can improve quickly. Objective-J has improved support for deploying code to multiple platforms, like server (e.g. rhino) and browser. And we’re including the new Narwhal JavaScript standard library in Cappuccino as an external dependency.

Narwhal is still in the early stages, but eventually it will be a set of standard JavaScript APIs that work consistently across many different JavaScript implementations, making it easy to work on any JavaScript interpreter you have available. We’ll write more about all these new features as time goes on, especially all the new tools and APIs in 0.7, so stay tuned. In the mean time, you can check out information we’ve posted to the wiki.

Thanks again to everyone who’s contributed to Cappuccino for the 0.7 release, and to everyone using Cappuccino!

- Ross

Thomas Balthazar has also recapped a lot of the information in his latest installment of This Week in Cappuccino Edge. I encourage you to check it out and let us know how 0.7 beta is shaping up!