Dion and I talk frequently about how the web platform’s capabilities are approaching the desktop, which features like canvas and faster JavaScript run-times. It’s great to get a piece of humble pie like this one.
Asa Dotzler of Mozilla has tried to compile data from a bunch of resources to create the chart above, a view of the Web over time from a browser perspective.
The first thing that really jumps out at me is that Netscape, for all its early success, was used by relatively few people. The pie was just a lot smaller at the end of the last century.
The second thing that jumps out is that the blue IE shape kinda looks like the Twitter Fail Whale :-) We just need a year or so of them actually losing users in absolute terms.
Asa quickly points out that the data may not be 100% correct, and hopefully we will see more and more stats opened up so we can clarify things, but still…. an interesting visualization.
FirePHP solves the problem of AJAX debugging by sending debug information along with the response. To avoid breaking the response content, the debug information is placed into special HTTP response headers. This works for all types of requests, not just AJAX requests, which means you can even debug requests for images that are dynamically generated by a PHP script. You can use FirePHP in your development environment, or use it to track down bugs that only appear on your production site.
There are two ways to include a stylesheet in your web page. You can use the LINK tag:
<link rel='stylesheet' href='a.css'>
Or you can use the @import rule:
<style>
@import url('a.css');
</style>
I prefer using LINK for simplicity—you have to remember to put @import at the top of the style block or else it won’t work. It turns out that avoiding @import is better for performance, too.
He shows that while always using @import by itself is actually okay, there are a number of scenarios where @import can jack you up:
link mixed with @import breaks parallel downloads in IE
using @import from within a LINKed stylesheet breaks parallel downloads in all browsers
LINK blocks @import embedded in other stylesheets in IE
@import causes resources to be downloaded out-of-order in IE
His conclusion:
It’s especially bad that resources can end up getting downloaded in a different order. All browsers should implement a small lookahead when downloading stylesheets to extract any @import rules and start those downloads immediately. Until browsers make these changes, I recommend avoiding @import and instead using LINK for inserting stylesheets.
See the full blog post for fancy charts and more detail.
Fabien Ménager has created an interesting new library called canvas-text that simply "adds the three canvas text functions (strokeText, fillText and measureText) to the canvas implementation of the browsers which don't already have these functions (Firefox 2/3.0, Internet Explorer 6+, Opera 9+, Safari 3, Chrome 1.0). It doesn't change the already implemented functions in Firefox 3.1+, Safari 4 and Chrome 2."
Having the methods work is one thing, but what about the performance?
Well, there are some interesting examples for you to test:
I talked to Fabien about performance and he shed some more light:
The only bad performance issues are the font face download, JSON eval,
and data parsing. I try to use a cache when possible, but it's not
always possible.
A workaround would be to have two font face files : a full one, with
lots of characters, and a reduced one, with only the common ones. The
browser cache does the rest for the font face file download
(downloaded via Ajax or a script tag).
For IE, I think I'll have to make a VML renderer for IE that wouldn't send the
instructions to ExCanvas but would work directly on the VML.
Obviously, this is something I really want to play with and see how far we can get with this type of thing and Bespin. It is very much in an alpha state right now, but looking good.
Gauge.js 1.0 allows you to add programmable gauges (with shading and reflection) to your webpages.
It uses unobtrusive javascript to keep your code clean.
It works in all the major browsers - Mozilla Firefox 1.5+, Opera 9+, IE6+ and Safari.
On older browsers, it'll degrade and your visitors won't notice a thing.
Of course we didn't get there without a few hard knocks. As an evolving standard, HTML5 has been fast-changing target and we've skinned our knees and bruised ourselves along the way. So rather than just deliver the fruit of all those bumps and scratches to end users in our own products, we decided we wanted to write a few blog posts to share what we've learned so that others can take advantage of HTML5 as well.
Great to see the mobile Web continue to merge as just One Web, and I look forward to hearing from the trenches on issues the team ran into, so we can learn from them.
TIBCO was one of the first companies to help out Ajaxian, and I remember hanging out with Dylan Scheiman, Kevin Hakman, and Scott Fingerhut to chat Ajax.
Dylan has talked about how the Dojo foundation was happy to bring in a great tool so people don't have to reinvent the wheel. Over time, we should see nice integration within and outside of Dojo the toolkit itself.
The Qooxdoo gang have created tests for Taskspeed with some surprising results:
On IE qooxdoo is by far the fastest framework.
Across browsers and frameworks, qooxdoo gained the highest ranks on all versions of IE (i.e. 6, 7 and 8), and made its lowest mark coming out third on Firefox 3.0. This exceptional IE performance also leads to the best overall score. The IE results are a big surprise and we'll try to investigate, what we do different (better) than all the other JavaScript libraries.
As always performance tests should be taken with a grain of salt. It's hard to judge whether all implementations are really equivalent. For example in the jQuery tests John Resig implemented all tests in a pure jQuery way. There are obvious optimizations he consciously omited, but it apparently reflects the genuine jQuery coding style. There is no official qooxdoo way to work with the DOM yet, so we modeled our tests closely after the Dojo and jQuery tests.
Fabian Jakobs analyzes why they've performed so well, speculating that because they built a GUI toolkit they've been optimizing DOM operations since the beginning to keep it fast--and because they use Sizzle, their lack of attention to CSS optimizations didn't kill them.
Fabian also mentions that these results encourage their intention to make qooxdoo's DOM API available stand-alone:
These results show that we have a good base and encourage us to move forward in this direction.
There are a few CSS features that Microsoft pioneered and has had available to developers in Internet Explorer for a long time now. One of those features is the text-overflow property, which is now in CSS3 and has implementations in Safari, and Opera. Firefox still does not support this feature, but I have heard that it will in Firefox 3.1.
Here is a rundown of what the property does. When text overflows an element’s box, the text-overflow property helps leave a visual hint to the user that there is more text. When a value of ellipsis is used, three dots will be shown before the text is clipped by overflow: hidden.
Lorem ipsum dolor sit amet, c…
I wanted to be able to use this feature in all browsers, so I wrote a small jQuery plugin in order to support Firefox. To use, just call ellipsis() on a jQuery object. For example:
This is how you will probably create a new tab using the Chrome extensions API when it comes out.
Aaron Boodman talked about the choice and how they are looking to make the APIs look more like this:
I'm using the CRUD pattern as a starting point for all the major sub-systems' APIs. My hope is that this will have a number of positive effects:
Minimize API design hand-wringing
Provide a large base of functionality quickly
Make it easy for Chromium developers to add new APIs
Make it easy for extension developers to learn new APIs
I got this all working for a few methods, and then I got to writing the validation code. I could write the code by hand, but that's so much work. And why bother when somebody has gone and invented JSON Schema.
That's right, it's a schema language for JSON. And of course it has a schema, written in JSON schema. Whee!
So we should be able to just declare the expected structure for our API parameters and push the validate() button. Probably there will have to be extra stuff around the edges, but this should get rid of a majority of the grunt work.
I have found that I favor this approach a lot, and you see the same in libraries such as Prototype (Ruby does a lot of this hash munging too). I wish we could just get named parameters in the language so this all just integrated very nicely indeed. What do you think?
We all witnessed the full licensing toil wrt ExtJS over the years. Now the team has released Ext Core 3.0 beta with an MIT license.
What is different?
Ext Core is a subset of the upcoming Ext JS 3.0 release optimized for speed & file size. Developers familiar with Ext JS can leverage their existing skillset to provide an enhanced user experience to their web pages.
DOM manipulation and traversal
CSS management
Event handling
Dimensions and Sizing
AJAX and JSON Support
Animations
In addition to providing cross-browser abstractions for the DOM, Ext Core also includes some of the most used and popular utilities from Ext JS.
Classical Inheritance Class System
Observable Class
Markup generation and Templating
Timed code execution
URL encoding and decoding
It appears that you get the guys of Ext via MIT now, and if you want the component library, styles etc, that is when you go to ExtJS.
Launched in June, 2007, AjaxRain.com has continued its steady growth of aggregating awesome extensions for the popular JavaScript frameworks. It was a late starter coming after the popular site MiniAjax but while MiniAjax unfortunately stopped updates, AjaxRain continued loading up with top scripts from around the web. Currently listing 1200+ scripts, it has become the starting place for finding cool features to leverage in your apps.
Looking at the jQuery, MooTools & Prototype categories you can see a wealth of options for all types of functionality.
They've also just updated the site:
Enhancing the UI
Improving advanced search options to increase discoverability
Tags for every aspect of UI design
In addition, they've now started to leverage Twitter and Facebook to spread the word about new scripts.
Finding good scripts is tough as it is with so many being hosted all over the web. So it's good to see a service which is offering to wrap all of these up in a nice centralized manner.
