Webmasters Gallery

Susumu Yoshida is a visual interface designer in Japan. He has created a set of iPhone style sidebar icons for us. They are 16px icons in PNG format. Of course, it is not restricted to use these icons on your sidebar. If you think it is suitable to use them on your blogs or web applications, you are free to do so as well.

Over at the Mozilla Developer Tools Lab, we’re starting work on a new tool to help web developers understand what’s going on with the memory management of their application:

So how does a developer troubleshoot memory problems? There’s only one way good way to do it: use the operating system’s tools. Unfortunately, this option doesn’t provide the right level of detail; you can either see how much memory the browser is consuming in aggregate (which is fine to let you know that your memory use is increasing, but doesn’t tell you why) or you can see which data structures in the browser itself are consuming the memory (which is fine if you understand the guts of the browser, but it’s pretty hard for anyone else to understand how this maps into the web application they’ve developed).

What’s missing is a tool targeted at web developers that makes it easy to understand what’s happening with their application’s memory usage. We propose to create such a tool.

Check out the full entry over at my blog for more on the motivations inspiring us to tackling this problem and for details on the first phase of this approach. Let us know what you think!

James Graham of Opera has a post about how section is not just a semantic div that argues against the folks that think that we can get by with just div class="section" for example:

HTML 5 introduces new elements like <section>, <article> and <footer> for structuring the content in your webpages. They can be employed in many situations where <div> is used today and should help you make more readable, maintainable, HTML source. But if you just go through your document and blindly replace all the <div>s with <section>s you are doing it wrong.

This is not just semantic nit-picking, there is a practical reason to use these elements correctly.

In HTML 5, there is an algorithm for constructing an outline view of documents. This can be used, for example by AT, to help a user navigate through a document. And <section> and friends are an important part of this algorithm. Each time you nest a <section>, you increase the outline depth by 1 (in case you are wondering what the advantages of this model are compared to the traditional <h1>-<h6> model, consider a web based feedreader that wants to integrate the document structure of the syndicated content with that of the surrounding site. In HTML 4 this means parsing all the content and renumbering all the headings. In HTML5 the headings end up at the right depth for free).

You can also talk about other items such as the new menu tag that the browser can render with an interesting native menu item.

You may have noticed that day 2 at MIX was IE8 day (compared to the Silverlight 3 day one) in that the puppy launched!

This is good news in that IE 8 is better than IE 7, which is better than IE 6. Maybe, with 6 being two versions back, we have more weight to get rid of the chap. However, even though Microsoft has recently claimed that IE 8 is the fastest browser, its legacy weight still shows for now, and the other browsers are sprinting ahead.

I have a sneaky suspicion that IE 9 is going to be different and a lot better (new team? got the old greats back? or are they on Azure?), but that is wild speculation on my part.

We had a lot of comments on the news today, and one person who will rename anonymous purely because I don’t know if he would like to be attached or not said this:

When you do your IE8 post, don’t forget to toss out a line indicating the writing-mode bug was not fixed. Their only CSS3 feature and they’ve now effectively prevented the entire web for using it for the next x years. Hilariously, they also tried to cover up the bug by marking it fixed and forcing me to open a new one with the same description.

• OLD
• New

I also count two regressions in IE7 compatibility mode that make it different from IE7. Kind of a headache for those counting on sending that header.

So, thanks for the better browser guys, and we can’t wait to see what happens next. Shortly we will have IE 8, Firefox 3.5, Safari 4, Chrome 2, Opera 10, and others….. and the Web will have nicer cars to drive around on it. Let’s build applications that take these cars on a decent joy ride instead of boring them in the slow lane.

Erik Arvidsson, one of our Knights, has shared a new Explorer Canvas release that has enabled excanvas folks to keep on trucking wrt IE 8 users. The way IE 8 does VML has been tweaked, so the library had to be changed accordingly.

You can also check out the Silverlight bridge too.

Here are the release notes:

• Implement transform and setTransform. This passes all the tests in the HTML5 canvas tests for 2d.transformation.*
• Remove fallback content that caused some issues when resizing the canvas element.
• Fix issue where strokeRect, fillRect and clearRect incorrectly cleared the current path.
• Added 2 new tests and modified an existing test to ensure that the new code works as expected and tested this in all modern browsers
• Fix for IE8. This involved passing one more argument to namespaces.add as well as ensuring all CSS lengths have units (px). Passes all the test cases in all modes in IE8.
• Fixes for linear gradients.
• Added two test cases for linear gradients.
• Changed the calculation method of line width. An averaged line width is calculated from the determinant of matrix, which is valid even when transform() method is implemented someday.
• Improved the rendering of lines. Lines with the width less than 1px look better now.
• Fixed the bug that stroke() ignored lineCap, lineJoin and miterLimit when fillStyle attribute was set.
• Removed the settings of strokeweight, strokecolor and fillcolor. They are unnecessary since they are overridden by the weight and color attributes in <v:stroke> and <v:fill>. </v:fill></v:stroke>
• This fixes issues where translate, rotate and scale is used during a path is being constructed. Previously we did the coord translations just before we draw the path. That is incorrect and now we do the translations when we add each individual piece to the path
• Added very limited support for scaling of the stroke width. Currently we do the scaling by calculating the position in the final coordinate space and we therefore cannot do non uniform scaling of the stroke. For now we just do the max x/y scale factor.
• Fix stroke. It should not close the path
• Fix memory leaks
• Fix issue where the path was not closed when strokeRect/fillRect was called.
• Use the document.createElement('canvas') hack that was exposed by Sjoerd Visscher last week. This allows us to remove fixElement_ completely.
• Added globalAlpha to the list of attributes copied for save/restore, as per the canvas specification.

Matthew Russell wrote the most in depth article on dojo.gfx that I have seen. It appeared in Linux Journal and has now been re-printed online.

The article runs the gamut. It starts off discussing the place that dojo.gfx lives in the Dojo world:

Then we learn about how gfx abstracts on top of the various underlying graphics subsystems that various browsers expose (Canvas, SVG, VML, Flash, Silverlight, …). gfx will choose for you automatically, or you can ask to use a particular rendered:

PLAIN TEXT

HTML:

2. <script type="text/javascript"

3.     djConfig="gfxRenderer:’canvas’"

4. src="http://o.aolcdn.com/dojo/1.2/dojo/dojo.xd.js">

5. </script>

Then we delve into the drawing API itself:

PLAIN TEXT

JAVASCRIPT:

2. dojo.addOnLoad(function() {

3. var node = dojo.byId("surface");

4. var surface = dojox.gfx.createSurface(node, 600, 600);

6.     rect1 = surface.createRect({

7. /* x and y default to (0,0) */

8.         width : 200,

9.         height:200

10. })

11.     .setFill("red")

12.     .setTransform([

13.         dojox.gfx.matrix.translate(200,200),

14.         dojox.gfx.matrix.rotategAt(45,100,100)

15. ])

16.     ;

17. });

From here Matthew covers topics such as manipulating groups, and how you can make areas moveable, and the 2D charting API.

Richard Stallman, founder of the GNU project and the Free Software Foundation, warns against the “trap” of running web apps whose Javascript is not licensed.

Most web apps have source code that is “open” as far as being available in source code form (unless it’s obfuscated/compressed/generated). Indeed, this openness is a major factor in the rapid growth in our understanding of Ajax; formerly obscure tricks and techniques could be studied in their full visible source code glory, and patterns could be systematically mined from the huge corpus of real-world Javascript code out there. However, most of the Javascript code in web apps assumes a conventional copyright license, and Stallman’s complaint is that it should instead be issued under free software licenses.

Stallman suggests that free Javascript licenses should be one of the features of open web standards:

A strong movement has developed that calls for web sites to communicate only through formats and protocols that are free (some say “open”); that is to say, whose documentation is published and which anyone is free to implement. With the presence of programs in web pages, that criterion is necessary, but not sufficient. Javascript itself, as a format, is free, and use of Javascript in a web site is not necessarily bad. However, as we’ve seen above, it also isn’t necessarily ok. When the site transmits a program to the user, it is not enough for the program to be written in a documented and unencumbered language; that program must be free, too. “Only free programs transmitted to the user” must become part of the criterion for proper behavior by web sites.

Silently loading and running non-free programs is one among several issues raised by “web applications”. The term “web application” was designed to disregard the fundamental distinction between software delivered to users and software running on the server. It can refer to a specialized client program running in a browser; it can refer to specialized server software; it can refer to a specialized client program that works hand in hand with specialized server software. The client and server sides raise different ethical issues, even if they are so closely integrated that they arguably form parts of a single program. This article addresses only the issue of the client-side software. We are addressing the server issue separately.

The last comment is a reminder of the Affero GPL, which (among other things) obligates web developers to publish their server-side code if it uses AGPL software. Thus, the Free Software Foundation is targeting the full web app stack – server-side code and Javascript client code.

The article goes on to propose a Greasemonkey-related means of substituting in free code for Javascript web apps; as well as suggesting developers should open source their web apps, Stallman is proposing a world in which free software projects would arise to act as alternative web clients to those apps that don’t open source.

James Hall saw the good news in Bugzilla that CSS3 multiple backgrounds are now in the Firefox tree, and you can test a Firefox Nightly (Minefield). Firefox joins Safari in the support.

Usage?

Great news for Web developers and users, Safari 4 has a public beta, and it comes with some nice features such as: tabs on top and top sites (a la Chrome), full page zoom, history view, and ARIA Support.

The Twitter thumbnail is interesting

But, what about the engine? Here are some of the features as Apple see’s them:

Speculative Loading

Safari loads the documents, scripts, and style information required to view a web page ahead of time, so they’re ready when you need them.
CSS Effects
Pioneered by Safari, CSS effects help developers add polish to websites by stylizing images and photos with eye-catching gradients, precise masks, and stunning reflections that require only a few lines of code.

CSS Canvas
Using CSS Canvas, web designers can position canvas elements anywhere an image can be placed using CSS. Safari is the first web browser to support CSS Canvas.

Acid 3 Compliance
Safari is the first — and only — web browser to pass Acid 3. Acid 3 tests a browser’s ability to fully render pages using the web standards used to build dynamic, next-generation websites, including CSS, JavaScript, XML, and SVG.

Nitro JavaScript Engine
Safari 4 introduces the Nitro JavaScript engine, an advanced bytecode JavaScript engine that makes web browsing even faster. In fact, Safari 4 executes JavaScript up to 6 times faster than Internet Explorer 8 and up to 4 times faster than Firefox 3.1.

HTML 5 Offline Support
Web developers can now create applications that you can use even when you don’t have access to the Internet. Thanks to HTML 5 offline support, designers can build web applications that store themselves on your computer, where you have immediate access to them. Along with the application, web developers can also choose to store the application’s data on your system, so you always have the information you need. Applications and data can be stored in a traditional SQL-like database serving as an application cache or as a “super cookie,” which stores data in the familiar cookie format.

Speaking of bookmarklets, in a recent blog post Nathan Kurtyka discusses a scenario familiar to many Ajax developers:

However, I can’t even begin to think about how much time I’ve wasted hunting through source code hoping there might be some event I can subscribe to (e.g. “What event is published when someone clicks on a Tree widget node?”).

So naturally, he created a little something to scratch that itch:

I created a Dojo bookmarklet that can be used to log all events to the console.

So to not only see how rich Dojo is with event publishing (you probably haven’t been leveraging either), but to also see the bookmarklet in action, head on over Dojo Campus. Just enable Firebug, give the bookmarklet a click, browse the demos.. and behold — events everywhere!!

Check out the blog for the bookmarklet.