Adium 1.2.5

Adium 1.2.5 is now available! This is a great bug fix release, correcting problems with Yahoo! Japan and ICQ connectivity, contact list tooltips when using Spaces in 10.5, and certain Jabber authentication setups, among many others. 22 fixes in all. This will likely be the last release in the Adium 1.2 series as we move toward a 1.3 beta; more on what to expect from Adium 1.3 another time. Quack on, my friends. Quack on.

Don’t forget to read Contributing to Adium to learn how you can submit patches and code, help hunt down bugs, and donate to support the project!

We greatly appreciate the donated resources of our excellent site and code host NetworkRedux and our download host CacheFly. :)

(Via Adium News.)

FancyUpload: Swiff meets Ajax

Harald Kirschner has created a new version of FancyUpload “a file-input replacement which features an unobtrusive, multiple-file selection menu and queued upload with an animated progress bar.”

A good example is the Queued Photo Uploader which is coded by:

PLAIN TEXT

JAVASCRIPT:

1.  
2. var swiffy = new FancyUpload2($(‘demo-status’), $(‘demo-list’), {
3.         ‘url’: $(‘form-demo’).action,
4.         ‘fieldName’: ‘photoupload’,
5.         ‘path’: ‘../../source/Swiff.Uploader.swf’,
6.         ‘onLoad’: function() {
7.                 $(‘demo-status’).removeClass(‘hide’);
8.                 $(‘demo-fallback’).destroy();
9.         }
10. });
11.  
12. /**
13. * Various interactions
14. */
15. $(‘demo-browse-all’).addEvent(‘click’, function() {
16.         swiffy.browse();
17.         return false;
18. });
19.  
20. $(‘demo-browse-images’).addEvent(‘click’, function() {
21.         swiffy.browse({‘Images (*.jpg, *.jpeg, *.gif, *.png)’: ‘*.jpg; *.jpeg; *.gif; *.png’});
22.         return false;
23. });
24.  
25. $(‘demo-clear’).addEvent(‘click’, function() {
26.         swiffy.removeFile();
27.         return false;
28. });
29.  
30. $(‘demo-upload’).addEvent(‘click’, function() {
31.         swiffy.upload();
32.         return false;
33. });
34.  

(Via Ajaxian.)

DjangoSnippets: YUI Loader as Django Middleware

Over on DjangoSnippets.org, akaihola has posted a YUILoader class (based on Adam Moore’s client-side YUI Loader) that makes it a snap to pull YUI components into your Django projects.

This server-side middleware implements some of the functionality in the Yahoo User Interface Loader component. YUI JavaScript and CSS modules requirements can be declared anywhere in the base, inherited or included templates, and the resulting, optimized <script> and <link rel="stylesheet"> tags are inserted at the specified position of the resulting page.

Requirements may be specified in multiple locations. This is useful when zero or more components are included in the HTML head section, and inherited and/or included templates require possibly overlapping sets of YUI components in the body across inherited and included templates. All tags are collected in the head section, and duplicate tags are automatically eliminated.

The middleware understands component dependencies and ensures that resources are loaded in the right order. It knows about built-in rollup files that ship with YUI. By automatically using rolled-up files, the number of HTTP requests is reduced.

Back in August on DjangoSnippets, pigletto posted a nice YUI snippet for use with the YUI AutoComplete Control.

(Via Yahoo! User Interface Blog.)

Dojo QuickStart Guide

At SitePen, we’ve just added a new Dojo QuickStart Guide. This guide was developed by the SitePen support team.

(Via The Dojo Toolkit blogs.)

CSS Masks

WebKit now supports alpha masks in CSS. Masks allow you to overlay the content of a box with a pattern that can be used to knock out portions of that box in the final display. In other words, you can clip to complex shapes based off the alpha of an image.

Here is a snapshot of the Speed Racer movie trailer clipped to the Safari compass icon. This is in fact a mask applied to the <video> element.

We have introduced new properties to provide Web designers with a lot of control over these masks and how they are applied. The new properties are analogous to the background and border-image properties that already exist.

-webkit-mask (background)
-webkit-mask-attachment (background-attachment)
-webkit-mask-clip (background-clip)
-webkit-mask-origin (background-origin)
-webkit-mask-image (background-image)
-webkit-mask-repeat (background-repeat)
-webkit-mask-composite (background-composite)
-webkit-mask-box-image (border-image)

Use of a mask results in a stacking context being created (similar to how opacity and transforms work). The mask will therefore overlay the child and all of its descendants, and at a minimum will knock out everything outside the border box of the object.

From a Web designer’s perspective, think of the mask as being constructed the way the backgrounds and border-image of a box are constructed. Multiple backgrounds are stacking on top of one another (possibly overlapping) with their own tiling and clipping rules. A border-image can then potentially be stretched or tiled over the backgrounds.

The final resultant image built from putting all of the mask images together, tiling them, stretching them, etc., then becomes the mask used to clip the content. Alpha values of 0 in the mask mean that nothing should be drawn. Alpha values of 1 mean the content should display normally. Anything in between ends up partially transparent.

One key difference between mask-box-image and its border-image counterpart is that it doesn’t attempt to fit itself to border widths. It will just render the corners unscaled and tile/stretch itself into the border box without regard for the border itself. This lets you easily use nine-piece-image effects as masks on elements without borders (often image or video elements).

Here are two sample images. The source image that we want to mask and then the image that we will use as the mask.

We can place a mask on the image element simply by doing this:

<img src=”kate.png” style=”-webkit-mask-box-image: url(mask.png) 75 stretch;”>

The result looks like this:

CSS gradients can be used as the mask image source as well. In the following example a linear gradient is used to achieve a fade effect. For example:

<img src=”kate.png” style=”-webkit-mask-image: -webkit-gradient(linear, left top, left bottom, from(rgba(0,0,0,1), to(rgba(0,0,0,0))”>

Masks respect the border-radius curves of an object. We can add a border-radius to the previous example, and have both the gradient fade effect with rounded corners.

<img src=”kate.png” style=”-webkit-border-radius: 10px; -webkit-mask-image: -webkit-gradient(linear, left top, left bottom, from(rgba(0,0,0,1), to(rgba(0,0,0,0))”>

SVG images can be used as masks. For example, a partially transparent circle:

can be applied as a mask like so:

<img src=”kate.png” style=”-webkit-mask-image: url(circle.svg)”>

The end result is shown below:

All of the power of the multiple background and border-image syntax is at your disposal when building masks!

As usual leave feedback in the comments and file bugs on any problems you notice at http://bugs.webkit.org/.

(Via Surfin’ Safari.)

Ext JS 2.1 and Ext GWT 1.0 released, preview of Ext JS 3.0

Ext JS is pleased to announce the latest release of the Ext JS toolkit and the introduction of a new product, Ext GWT 1.0. The Ext JS version has been updated to 2.1 and includes new components, performance improvements, bug fixes and documentation enhancements. Ext GWT 1.0, is a Java library for building rich internet applications with the Google Web Toolkit (GWT).

(Via Ext JS Blog.)

iPhone Remote Debugger

Jon Brisbin is a Java programmer doing iPhone development, and decided to scratch his own itch for a better iPhone remote debugger, creating iPhoneDebug:

The iPhone Debug Consle is meant to give greater visibility and interactivity on your iPhone/iPod Touch while doing development. I grew frustrated having to go through the “include console.log statement then reload” method of debugging. I wanted something similar to Firebug’s fantastic console and debugger.

I grew frustrated with trying to debug my iPhone/iPod Touch apps because I had no interactivity with the page. I couldn’t interrogate variable values or CSS values unless I put in a console.log statement and reloaded the page. This is far from ideal.

In trying to find something that would fit my needs, I came across Joe Hewitt’s iPhone/Firebug integration, but I wanted something more robust and that worked without firebug and requiring “console.log” in the desktop browser.

I’m a Java programmer, so naturally I thought of using COMET and Jetty to pass messages between a desktop browser and the iPhone. A couple days later, I had a workable solution. It lets you log things in your mobile JavaScript to a desktop console, but the biggest plus for my situation is that I can send JavaScript to the iPhone to be executed there, with the results logged back to my desktop console. Just like in Firebug, I can call methods, retrieve CSS values, and all manner of debugging activities I’ve grown used to doing while building apps with Firebug. There is also rudimentary UP and DOWN arrow command retrieval on the prompt.

Here it is in action, getting commands from the console:

(Via Ajaxian.)

Google App Engine Helper for Django

Posted by Matt Brown, Google App Engine Team

Since the launch of Google App Engine one of the most common requests has been for better integration with the popular Django framework.

We’ve been working hard and we’ve made available a helper that eases the process of developing a Django project to run on Google App Engine.

The helper will initially provide you with:

• The ability to use most manage.py commands
• A BaseModel class that appears the same as the standard Django Model class.
• The ability to serialize and deserialize model instances to JSON, YAML and XML.
• Access to Django’s test framework with a test datastore and support for fixtures.

We are releasing the helper under the Apache 2.0 license. We look forward to working with the Django community to add further functionality as time goes on.

You can download the helper from http://code.google.com/p/google-app-engine-django. Issues and Feature Requests should be added to the tracker within that project.

(Via “officialgoogleblogs-dev” via Google Reader in Google Reader.)

CSS Canvas Drawing

Currently the set of images you can use from CSS consists of the following:

Bitmap Images (PNG, GIF, JPG)
SVG Images
Gradients

A notable missing ability when compared with explicit DOM content is programmatic drawing into CSS images. The <canvas> element represents a foreground bitmap image that can be drawn into programmatically, but – aside from inefficient hacks involving toDataURL – there hasn’t been any way to draw into the image buffers used by CSS images.

Until now!

In the latest nightlies, you can try out a new feature: the ability to specify named image buffers in CSS and then to draw into them programmatically from JavaScript. Here’s how it works.

background: -webkit-canvas(mycanvas);

Instead of specifying an image URL, you specify a canvas and an identifier to use for that canvas. The following new API on documents can then be used to obtain a drawing context for that canvas.

CanvasRenderingContext getCSSCanvasContext(in DOMString contextType, in DOMString identifier, in long width, in long height);

There is only one CSS canvas for a given global identifier per document. When you obtain the drawing context you also specify the size. The canvas will not be cleared as long as you repeatedly request the same size. Specifying a new size is equivalent to the kind of behavior you’d expect if you resized a <canvas> element, and so the canvas buffer will be cleared.

All objects that observe a CSS canvas of the same name are sharing that canvas. This means that (similar to how animated GIFs work), you can do animations and have them happen in lockstep on all the clients of the canvas. Drawing changes will be propagated to all clients automatically.

Here is an example:

Canvas as Background Image

(Via Surfin’ Safari.)

PyAMF 0.3 Released

PyAMF is a lightweight library that allows Flash and Python applications to communicate via Adobe’s ActionScript Message Format.

AMF3 and RemoteObject are supported in all the implemented Remoting gateways, currently compatible with Django, Twisted, TurboGears 2, Web2Py and other WSGI supported web frameworks.

This release provides compatibility with Google App Engine and comes with the following changes and fixes:

• Make util.BufferedByteStream endian aware (Ticket:231)
• Issue with Twisted threads (Ticket:233)
• Fix interpretation of integers in AMF3 (Ticket:241)
• Support for Google App Engine deployment (Ticket:237)
• Classic class decoding throws an error (Ticket:248)
• Make adapter framework load sub-modules (Ticket:246)
• Added an adapter module for google.appengine.ext.db so that Model classes can be serialised easily (Ticket:247)
• Problems with Importing and reloading files (Ticket:250)

Check out the download page, installation instructions or the API documentation.

Got questions? First stop is the mailing list but we also hang out on IRC.

(Via PyAMF blog.)