Friday, August 29th, 2008
Category: jQuery
When I was doing an interview with John Resig for the Open Web Podcast, he mentioned that the redesign of jQuery.com had a lot of people talking, and it seems like people have strong feelings about the Rock Star for whatever reason.
Ignoring the style, the redesign is more than just that:
The entirety of the site has a new layout. With drastically improved multi-layer navigation and a standardized sidebar it should become much easier to navigate the individual portions of the site.
You should probably wear a hard hat while exploring the interior pages - font sizes, spacing, and colors are all in need of tweaking, which will be handled over the upcoming week (it’s fun working against Trac, Wordpress, Drupal, and Mediawiki simultaneously).
Category: GWT, Google, Java, Library
I have seen the GWT team working very hard indeed on GWT 1.5, and they must be very happy to see the final release shipped and complete:
GWT 1.5 delivers what we think are an impressive number of improvements, about four hundred issues if you’re counting. We’re also happy that one of those is issue 168, our most-requested feature, Support for Java 5.
The high level new feature sets are:
- Java 5 language support and enhanced JRE emulation
- Performance optimizations and easier JavaScript interop
- Prettier widgets, better DOM, accessibility, and bi-di
You can see a lot of this at work in the showcase area. There you will see all of the widgets and examples that come out of the box, and the community has developed even more for you. In particular, Ray Cromwell has some great real world examples that he shares in his book and talk.
Download GWT and take a look.
Category: JavaScript, Library
qooxdoo 0.8 has been released and it appears to have a lot of big changes. Andreas Ecker told us a little about it:
While at first qooxdoo 0.8 looks like a minor jump in version number
over the previous 0.7.3, the actual changes are huge. In particular the
UI capabilities as well as the developer tool chain were improved
substantially.
qooxdoo 0.8 features a complete rewrite of the GUI toolkit. It is state-of-the-art and supports all major browsers (IE, Firefox, Safari, Opera). The GUI toolkit has a layered architecture: on-top of a low-level DOM-oriented layer (that might be used as a separate library), it includes a large set of widgets and layout managers (perfect for building RIAs). Online demos are available.
Users can very easily implement additional custom widgets or layouts to fit their individual needs. Theming of widgets continues to be independent from the widget code itself, and now allows for virtually
unlimited styling possibilities, e.g. rounded borders, gradients, shadows. While qooxdoo comes with two new attractive themes, it is also easy to create custom themes, without any CSS knowledge required.
Besides the exciting changes in the GUI toolkit, the developer tool chain has also been improved to a large extend. It frees the developer from such tedious and complex tasks as compressing and optimizing the JS code, resolving dependencies between classes, using a JS linker to produce a custom build of the app ready for deployment. Some further highlights of the comprehensive, built-in tooling include: searchable API reference, internationalization, source code validation, unit testing, combined images, and much more. The entire tool chain is platform-independent: all that is needed is a working Python installation, which is trivial to setup on any operating system, including MS Windows.
While API documentation is quite complete already, wiki documentation is still being updated to account for all the changes and improvements. Download the qooxdoo 0.8 package, and see the
included index.html to
Category: JavaScript, jQuery
John Resig posted on degrading script tags and adding functionality to <script> so you can add a src attribute and a body of code that will be executed one the external script loaded error free:
JAVASCRIPT:
-
-
<script src="some-lib.js">
-
var foo = use_some_lib();
-
foo.do.stuff();
-
</script>
-
To make this all work, John shows us a jquery aware version that detects loading and such:
JAVASCRIPT:
-
-
-
(function(){
-
var scripts = document.getElementsByTagName("script");
-
var curScript = scripts[ scripts.length - 1 ];
-
-
if ( curScript.executed )
-
return;
-
-
// ... jQuery ...
-
-
curScript.executed = true;
-
var script = curScript.innerHTML;
-
if ( script ) {
-
jQuery(document).ready(function(){
-
jQuery.globalEval( script );
-
});
-
}
-
})();
-
Where this kicks in, is more than just saving a script code block. Steve Souders has been researching different ways to tie blocks of code to scripts and having the optimal ordering for performance. We can tie this learning to John's work, and the developer can choose what they want to do (e.g. when loading don't have the icon moving etc etc).
Category: Dojo, Prototype, The Ajax Experience, jQuery
We talked a few months ago about something new we're doing at the Ajax Experience this year: the "Framework Summit." Basically, we're providing space for Prototype, jQuery, and Dojo to hold their own half-day events on-site, and these events are free and open to the general public.
Since we announced the summit, the frameworks have created their agendas for their events for their events:
Dojo Developer Day:
- Welcome, Introductions (Alex Russell, Dylan Schiemann)
- Tutorial - Progressive Dojo (Peter Higgins)
- Presentation - DojoX GFX and FX (Matthew Russell)
- Presentation - Secrets of DojoX (Tom Trenka)
- Tutorial - Getting going ... Zend + Dojo (Matthew O'Phinney)
- Tutorial - Dijit Layouts In and Out (Nikolai Onken)
- Tutorial - Reusable code, Widgeting (Peter Higgins)
- Community - Getting Involved (Peter Higgins, Nikolai Onken)
- Lightning Demos - What do you have? Show us.
Prototype Developer Day
- Welcome, Introductions (Prototype Core members)
- Contributing docs (Christophe Porteneuve)
- Contributing code (Andrew Dupont)
- Prototype & Performance
- Extended Q&A (Prototype Core members)
jQuery Developer Day
- State of jQuery (Rey Bango)
- Progressively Enhancing the User Experience Using jQuery (Karl Swedberg)
- An In-Depth Look at jQuery UI (Paul Bakaus)
- jQuery Team Code Review (jQuery Team)
Other Frameworks?
Some have asked why we didn't also include Framework X, Y, and Z at the summit. We have a simple answer: we only had room for three frameworks so we choose the three most popular frameworks (according to every survey we've seen). If the concept is successful this time around, we hope to do it on a bigger scale next year.
Obviously we hope you can make it to the entire Ajax Experience event, but if you can't do that, consider coming to one of the Framework Summit events. See you there!
Thursday, August 28th, 2008
Category: SVG
I recently ran across Inkscape, an open source very high-quality graphics editor that can output SVG that I'm blown away by. Even better, it runs on Linux, Windows, and Mac OS X. From the Inkscape website:
[Inkscape is] an Open Source vector graphics editor, with capabilities similar to Illustrator, CorelDraw, or Xara X, using the W3C standard Scalable Vector Graphics (SVG) file format.
Inkscape supports many advanced SVG features (markers, clones, alpha blending, etc.) and great care is taken in designing a streamlined interface. It is very easy to edit nodes, perform complex path operations, trace bitmaps and much more. We also aim to maintain a thriving user and developer community by using open, community-oriented development.
Here's a screenshot looking at one of the samples, a vector image of a car; there are a huge number of great tools in this beastie:
Screenshot of Inkscape showing vector image of car
One of the coolest features of Inkscape is it can take a bitmap image, and do tracing of the edges to create a vector representation! Vector images are inherently more "impressionistic"; they are for more illustration type purposes. I decided to take this feature for a spin and took a photograph I have of myself and do edge detection. Here is the photograph before, loaded into Inkscape ready to process:
Inkscape with bitmap, non-vector photograph
Here are the results after playing around with the various options; on the right-hand side of the screen is the options dialog that you can use to fiddle around with the various settings for edge detection:
Screenshot of Inkscape with traced, vector representation
Now, I can save this into an SVG file suitable for the web. I could then edit the markup, or bring it onto a web-page. More on embedding SVG in a future post.
One of the strengths of SVG is that it is a file format suitable for exporting such things; while the Canvas tag is great for having a canvas that JavaScript can draw onto, you can't easily export illustrations into calls to a Canvas as you can with SVG.
Category: Canvas, SVG
As part of the Open Web Advocacy work I've started with Dion and others at Google, one of my goals right now is to help increase awareness and support around doing 2-D/vector graphics on the open web. This includes tools such as the Canvas tag, SVG (Scalable Vector Graphics, an XML markup language for vector graphics), and open source cross-browser drawing toolkits such as Dojo GFX, ExplorerCanvas, and Raphael.
One of the big reasons for this is that 2-D drawing/vector graphics is the top requested feature by double the amount of other feature requests in the recent Open Ajax Alliance Browser Feature Wish List vote-off. As part of this effort I'm doing a bootcamp right now to come up to speed on the latest developments in both Canvas and SVG. I've been using Shelley Powers excellent Painting the Web book to find out the state of vector graphics on the web in 2008. During this education I've run across two interesting things.
First, I wanted to know what the status of SVG support is across the different browsers. I found Jeff Schiller's very complete SVG Test Suite results that are actively kept up to date:
SVG 1.1 became a W3C recommendation on January 13, 2003. Five years later, this page records my results of running various SVG implementations (web browsers and browser plugins) through the official SVG Test Suite. Last updated 2008-06-18.
A screenshot with some of the results:
SVG Test Results Against Browsers for SVG 1.1
Things are pretty good with Firefox 3, Safari 3, and the winner, Opera. There is a strong subset of SVG that can be used cross-browser with these. Of course, Internet Explorer is the limiting factor here, with a grand score of 0% for all tests:
Internet Explorer SVG Support
This means that for open web vector graphics to be realistic we need some kind of shim for Internet Explorer (Adobe used to have a browser plugin for IE that had very high quality, but its quite large and was end of lifed in 2007). Internet Explorer actually has an earlier vector graphics standard named VML (Vector Markup Language) that can be used to 'trick' it into having 2-D graphics support that is used by a number of open source toolkits. However, VML can run into some performance issues when you start to get into a large number of nodes and animation with the available open source drawing toolkits.
One natural avenue is to emulate SVG or other 2-D graphics on Internet Explorer using Flash. I had always heard about this possibility but recently found a small company actually doing it to good effect. They have not finished yet, but their demo is impressive:
SVG Render Using Flash
Here we are viewing the source of the SVG being rendered by this Flash:
SVG Renderer in Flash (View Source)
I emailed the developers to get some more information on this Flash-based renderer and they responded:
Our SVG viewer and editor is not open source. It will be part of the new InputDraw version and with some more features - like draw recognition - will be part of the new Comics Sketch site, so users can create advanced comics strips.
We are part of a small company in Lisbon, Portugal named inEvo that works with a lot of web development, rich interfaces and other areas like computer graphics and artificial intelligence.
While I respect the hard work it took inEvo to create this and their need to charge for it, it looks like using Flash to emulate SVG is a valid approach for Internet Explorer and it would be great to have something similar available open source. Just the basic viewer being available would make sense as open source and would probably even drive more business to them for their higher level tools; it looks like inEvo has created lots of cool things above this that make sense as being commercial-only, such as an SVG editor, drawing recognition, social comics creation and sharing site, etc.
Category: Articles, Editorial, Standards
I met with a colleague recently who wants to take his project and create a standard on the web that actually gets adopted. We talked for a long time, and when we finished up I pointed him at a paper that had a huge impact on me, called "In Praise of Evolvable Systems" by Clay Shirky.
This paper was written a long time ago in the ancient year of 1996 by the web's timeline, but everything in it still holds on why the web won and some possibilities of how we can move forward from where we are today. Under the tagline for his paper Clay has the summary "Why something as poorly designed as the Web became The Next Big Thing, and what that means for the future."
Clay starts by pointing out how bad the Web is:
If it were April Fool's Day, the Net's only official holiday, and you wanted to design a 'Novelty Protocol' to slip by the Internet Engineering Task Force as a joke, it might look something like the Web:
- The server would use neither a persistent connection nor a store-and-forward model, thus giving it all the worst features of both telnet and e-mail.
- The server's primary method of extensibility would require spawning external processes, thus ensuring both security risks and unpredictable load.
- The server would have no built-in mechanism for gracefully apportioning resources, refusing or delaying heavy traffic, or load-balancing. It would, however, be relatively easy to crash.
- Multiple files traveling together from one server to one client would each incur the entire overhead of a new session call.
- The hypertext model would ignore all serious theoretical work on hypertext to date. In particular, all hypertext links would be one-directional, thus making it impossible to move or delete a piece of data without ensuring that some unknown number of pointers around the world would silently fail.
- The tag set would be absurdly polluted and user-extensible with no central coordination and no consistency in implementation. As a bonus, many elements would perform conflicting functions as logical and visual layout elements.
HTTP and HTML are the Whoopee Cushion and Joy Buzzer of Internet protocols, only comprehensible as elaborate practical jokes. For anyone who has tried to accomplish anything serious on the Web, it's pretty obvious that of the various implementations of a worldwide hypertext protocol, we have the worst one possible.
Except, of course, for all the others.
The web, however, was better than the contenders of that time. He argues that all the other formats, such as Gopher, Interactive TV, and so on were too well designed and had too much internal consistency:
These various [non-web] protocols and services [Gopher, Interactive TV, AOL, etc.] shared two important characteristics: Each was pursuing a design that was internally cohesive, and each operated in a kind of hermetically sealed environment where it interacted not at all with its neighbors. These characteristics are really flip sides of the same coin -- the strong internal cohesion of their design contributed directly to their lack of interoperability. CompuServe and AOL, two of the top online services, couldn't even share resources with one another, much less somehow interoperate with interactive TV or CD-ROMs...In other words, every contender for becoming an "industry standard" for handling information was too strong and too well-designed to succeed outside its own narrow confines. So how did the Web manage to damage and, in some cases, destroy those contenders for the title of The Next Big Thing? Weakness, coupled with an ability to improve exponentially.
Clay then goes on to argue that successful systems must be evolvable and gives three rules:
Evolvable systems -- those that proceed not under the sole direction of one centralized design authority but by being adapted and extended in a thousand small ways in a thousand places at once -- have three main characteristics that are germane to their eventual victories over strong, centrally designed protocols.
- Only solutions that produce partial results when partially implemented can succeed. The network is littered with ideas that would have worked had everybody adopted them. Evolvable systems begin partially working right away and then grow, rather than needing to be perfected and frozen. Think VMS vs. Unix, cc:Mail vs. RFC-822, Token Ring vs. Ethernet.
- What is, is wrong. Because evolvable systems have always been adapted to earlier conditions and are always being further adapted to present conditions, they are always behind the times. No evolving protocol is ever perfectly in sync with the challenges it faces.
- Finally, Orgel's Rule, named for the evolutionary biologist Leslie Orgel -- "Evolution is cleverer than you are". As with the list of the Web's obvious deficiencies above, it is easy to point out what is wrong with any evolvable system at any point in its life. No one seeing Lotus Notes and the NCSA server side-by-side in 1994 could doubt that Lotus had the superior technology; ditto ActiveX vs. Java or Marimba vs. HTTP. However, the ability to understand what is missing at any given moment does not mean that one person or a small central group can design a better system in the long haul.
I know we sometimes get frustrated with the state of the web today, but its useful to know why we are here, and what characteristics any new ideas, features, or standards probably need to have in order to be successful; Clay's paper helps guide me in terms of navigating these issues.
Category: GWT, Gears, Google
GWT has long had a project that aimed to give rich support for Google APIs called GALGWT, or "Google API Libraries for Google Web Toolkit".
This project has stepped up to higher gear recently, and we have seen the GALGWT 1.0 release candidate appear.
What is in GALGWT?
The project is a collection of libraries that provide Java language bindings
and API specific 'plumbing' for some Google JavaScript APIs. The goal is to
make it easy for developers to use these JavaScript APIs with GWT. Libraries
available at this time include a new version of Gears, as well as new
libraries for Gadgets and the Google AJAX Search API.
Gears 1.1 Library
A new version of the Gears library is available. In addition to the earlier
version's support for the Gears LocalServer, Database, and WorkerPool, 1.1
adds integrated support for offline applications and updated sample
applications. The bindings have also been refactored to use GWT 1.5
JavaScript overlay types and a new package hierarchy.
Gadgets 1.0 Library
The Gadgets library simplifies gadget development with GWT by automatically
generating a Gadget specification from Java source and inserting a selection
script in the specification much like a regular GWT project. After compiling
your gadget with GWT, all files are in place to publish your gadget. This
version currently supports the legacy Gadgets API based on the _IG_...
namespace.
Google AJAX Search 1.0 Library
The Google AJAX Search API lets you put Google Search in your web pages,
including Web, Local, and Multimedia searches. This library allows you to
access the API from Java code compiled with the GWT compiler without having
to write additional JavaScript code.
Wednesday, August 27th, 2008
Category: Announcements, Browsers, IE
Internet Explorer 8 Beta 2 was released today. There are several cool UI enhancements that this beta brings to the table that I won't cover in this post, but you can learn more about them on the IEBlog. Instead, I want to talk about how beta 2 affects IE's relationship to web standards.
First, CSS Expressions are no longer supported in Standards Mode:
Also known as 'Dynamic Properties', CSS expressions are a proprietary extension to CSS with a high performance cost. As of Internet Explorer 8 Beta 2, CSS expressions are not supported in IE8 standards mode. They are still supported in IE7 Strict mode and Quirks mode for backward compatibility.
In case you don't know, CSS expressions were actual bits of JavaScript that you could run from CSS rules; this was commonly used to simulate the CSS max-width property for IE:
CSS:
-
-
div.someClass {
-
/* Internet Explorer */
-
width: expression(document.body.clientWidth> 600) ? "600px" : "auto";
-
/* Standards-compliant browsers */
-
max-width: 600px;
-
}
-
IE 8 beta 2 also now supports alternate style sheets:
Internet Explorer 8 now supports alternative style sheets as specified by HTML4 and CSS2.1. The alternative styles that are defined by the Web page author is available through the Style menu under the Page menu. The styles are also available through the Style menu under the View menu. The No Style option on either menu can be used to disable all authors styling.
In terms of the Known Issues with IE 8 Beta 2, the first is related to Ajax bookmarking and back button support and using window.location.hash to do cross-domain communication:
Internet Explorer 8 create entries in the travel log and back button for each instance of window.location.hash that is set. This is part of the behavior for Internet Explorer 8 AJAX Navigation. If you use this technique to communicate between documents, we recommend that you switch to the Internet Explorer 8 Cross Document Messaging feature that is based on Section 6.4 of the HTML 5.0 specification.
Finally, there are some issues with the onload event for IE's XDomainRequest object that helps with cross-domain communication:
The onload event may not fire reliably. We recommend you use the onprogress events which continues to fire as the data is received.
Unfortunately this is it for this release. You can see the full Beta 2 release notes, or download it yourself.
On a related note, IE 8 Beta 2 includes cross-site scripting attack (XSS) protection:
The XSS Filter operates as an IE8 component with visibility into all requests / responses flowing through the browser. When the filter discovers likely XSS in a cross-site request, it identifies and neuters the attack if it is replayed in the server’s response. Users are not presented with questions they are unable to answer – IE simply blocks the malicious script from executing.
Finally, PPK has also published a post on IE 8 Beta 2 and its changes.
Category: Gears
While we posted about the Gears 0.4 features a lot of the press only really talked about the Geolocation piece.
I think that is important, and posted on that too, but Brad's piece discussed the full gamut including the Blob API, resummable HTTP, and Desktop API improvements to allow controlled file system access. The example that Brad built was the upload movie tool which ties this all together.
Check out the source code and you will see the parts and pieces in action:
Geolocation
JAVASCRIPT:
-
-
MovieTool.prototype.getLocation = function(callback) {
-
var geolocation = google.gears.factory.create('beta.geolocation');
-
if (!geolocation.getPermission('Upload Movie Tool', '',
-
'This sample can use your '
-
+ 'geographic coordinates in order to tag '
-
+ 'uploaded videos with your location')) {
-
document.getElementById('location').innerHTML = 'Permission denied';
-
callback();
-
return;
-
}
-
-
var self = this;
-
geolocation.getCurrentPosition(
-
function(p) {
-
var addr = p.gearsAddress;
-
var address = addr.city + ', ' + addr.region + ', ' + addr.country;
-
var latitude = p.latitude;
-
var longitude = p.longitude;
-
self.geoAddress_ = address + ' (' + latitude + ', ' + longitude + ')';
-
document.getElementById('location').innerHTML = self.geoAddress_;
-
callback();
-
},
-
-
function(err) {
-
var msg = 'Error retrieving your location: ' + err.message;
-
document.getElementById('location').innerHTML = msg;
-
callback();
-
},
-
-
{
-
enableHighAccuracy: true,
-
gearsRequestAddress: true,
-
gearsLocationProviderUrls: ['http://www.google.com/loc/json']
-
}
-
);
-
}
-
HTTPRequest
JAVASCRIPT:
-
-
var req = google.gears.factory.create('beta.httprequest');
-
req.open('GET', '/list');
-
var self = this;
-
req.onreadystatechange = function() {
-
if (req.readyState == 4) {
-
if (req.status == 200) {
-
var loadingMsg = document.getElementById('loadingFilesMsg');
-
loadingMsg.parentNode.removeChild(loadingMsg);
-
self.movieList_ = eval(req.responseText);
-
for (var i = 0; i <self.movieList_.length; i++)
