This article explains why such habits as using nested HTML Tables to position content in the right place on the browser page is bad practice and, nowadays, avoidable. It is just one 'Markup smell' that it discusses on the way to demonstrating the ben ...

Paul Irish and Jonathan Neal have created a fun example of various CSS tweaks that you can make, and see the results instantly.

CSS3, Please! lets you play with fancy new rules such as:

• border-radius
• box shadow
• gradients
• rgba support in backgrounds
• transforms
• font-face

Really nice way to make tweaks inline in the page….. nicely done. Hope to see some other examples out there :)

Good old Kangax has been playing with HTML minification and has shared his new tool in an early stage.

What does it do?

Kangax has forked John Resig’s HTML parser which parses the HTML and sends that into the Minifier. This has rules that do things like whitespace optimization, comment removal, and collapsing boolean attributes (e.g. disabled=”true” -> disabled).

He also has a linter going:

While working on minifier, I realized that oftentimes the most wasteful part of the markup is not white space, comments or boolean attributes, but inline styles, scripts, presentational or deprecated elements and attributes. None of these can be simply stripped, as that could affect state of the document and is just too obtrusive. What can be done, however, is reporting of these occurences to the user. HTMLLint is even a smaller script, whose job is exactly that—to log any deprecated or presentational elements/attributes encountered during parsing. Additionally, it detects event attributes (e.g. onclick, onmouseover, etc.). The rationale for this is that moving contents of event attributes to external script allows to take advantage of resource caching.

Harmony is a new drawing tool, a HTML5/Canvas experiment with great potential. It provides some unique brush styles, and can produce some great-looking charcoal pencil style sketches, among other things. Better to try it out than explain it in words.

Creator Mr. Doob (Richard Cabello) explains how he used Canvas to make it darker the more you draw over it:

The whole thing is quite modular so I can keep adding more brush styles whenever I get inspired. During the process I found out that, for some reason (apparently lack of hardware acceleration), Firefox and Opera do not support context.globalCompositeOperation = ‘darker’. This was on the HTML5 spec before but got removed. Just so you know what I’m talking about, this is like the “multiply” blending in Photoshop. Webkit does support it tho. I hope they put it back on the specs and all browsers support it.

You can also save images using data URI encoding.

As it works on webkit, he made sure it worked on the mobile Android and iPhone browsers. No multi-touch as yet, but the touch UI still makes a nice input mechanism.

(Thanks FND)

MOUNTAIN VIEW, CALIF. – March 8, 2010 – Appcelerator®, the leading platform for rapidly developing native mobile, desktop, and iPad applications using web technologies, announced today the release of its flagship product, Appcelerator ...

The HTML5 specification introduces the and media elements, and with them the opportunity to dramatically change the way we integrate media on the web. The current HTML5 media API provides ways to play and get limited information about audio and video, but gives no way to programatically access or create such media. We present a new extension to this API, which allows web developers to read and write raw audio data.

The above quote is from the Audio Data API extension that joins a bunch of juicy developer work in Firefox 3.7.

Thomas Sturm has taken that API and created a spectrum visualization a kin to some of the great work by Scott Schiller (using Flash).

There is a new onaudiowritten attribute:

PLAIN TEXT HTML:

1.  
2. <audio src="song.ogg" controls="true"
3.            onaudiowritten="audioWritten(event);">
4. </audio>
5.  

that lets you get access to info such as the spectrum:

PLAIN TEXT JAVASCRIPT:

1.  
2.       function audioWritten(event) {
3.         spectrum = event.mozSpectrum;
4.        
5.         var specSize = spectrum.length, magnitude;
6.        
7.         // Clear the canvas before drawing spectrum
8.         ctx.clearRect(0,0, canvas.width, canvas.height);
9.        
10.         for ( var i = 0; i <specSize; i++ ) {
11.           magnitude = spectrum.item(i) * 4000; // multiply spectrum by a zoom value
12.          
13.           // Draw rectangle bars for each frequency bin
14.           ctx.fillRect(i * 4, canvas.height, 3, -magnitude);
15.         }
16.       }
17.  

Add to that the ability to write audio....

PLAIN TEXT JAVASCRIPT:

1.  
2. var audioOutput = new Audio();
3. audioOutput.mozSetup(2, 44100, 1);
4.  
5. var samples = [0.242, 0.127, 0.0, -0.058, -0.242, ...];
6. audioOutput.mozAudioWrite(samples.length, samples);
7.  

Nice work all around.

The Grinder is a Java load testing framework that makes it easy to run a distributed test using many load injector machines. It is freely available under a BSD-style open-source license.

modulr is a CommonJS module implementation in Ruby for client-side JavaScript

Ruby? what does that have anything to do with it? Ah, its from one of those Prototype guys isn't it.... Yup, Tobie is at it again, this time with modulr:

modulr accepts a singular file as input (the program) on which is does static analysis to recursively resolve its dependencies.

The program, its dependencies and a small, namespaced JavaScript library are concatenated into a single js file.

The bundled JavaScript library provides each module with the necessary require function and exports and module free variables.

This can also help sharing that CommonJS code. I recently did just that and had some:

PLAIN TEXT JAVASCRIPT:

1.  
2. // check to see if you are running inside of node.js and export if you are
3. if (typeof GLOBAL == "object" && typeof GLOBAL['node'] == "object") {
4.     exports.Appetite = Appetite;
5. }
6.  

I just came across this wonderful Gist on gitHub:

PLAIN TEXT JAVASCRIPT:

1.  
2. var $;
3. YUI().use('*', function(Y){
4.   $ = Y.get;
5.   for(var p in Y) {
6.       $[p] = Y[p];
7.   }
8. });
9.  
10. // test
11. $('body').append("boo!");
12.  

In case you want to use YUI3 but really really like jQuery syntax :) OK, it breaks the whole sandboxing idea of YUI3, but that's a small price to pay, right?

Bass Schouten is a cool name, and the Mozillan has presented Direct2D hardware acceleration.

You have to grab Firefox nightly, do the about:config / gfx.font_rendering.directwrite.enabled game, but then you get to see it in action.

IE9 showed off how they will support hardware rendering, and I am sure we will see more at MIX, but it is very cool to see this across the board.

CSS Transforms/Transitions/Animations are going to feel like butter in 2010!

Works even in IE6

Love that quote from the color picker over at RaphaelJS land. This plugin by Dmitry Baranovskiy gives you an easy color picker in short order:

PLAIN TEXT JAVASCRIPT:

1.  
2. var icon = Raphael("picker", 23, 23).colorPickerIcon(11, 11, 10);
3.  
4. icon.attr({cursor: "pointer"}).node.onclick = function () {
5.     document.getElementById("benefits").style.visibility = "visible";
6.     var out = document.getElementById("output");
7.     out.style.visibility = "visible";
8.                
9.     // this is where colorpicker created
10.     var cp = Raphael.colorpicker(document.body.offsetWidth / 2 - 150, 250, 300, "#eee", document.getElementById("picker2"));
11.                
12.     out.onkeyup = function () {
13.         cp.color(this.value);
14.     };
15.     // assigning onchange event handler
16.     cp.onchange = function (clr) {
17.         out.value = clr;
18.         document.body.style.background = clr;
19.         document.body.style.color = Raphael.rgb2hsb(clr).b <.5 ? "#fff" : "#666";
20.      };
21.      // that’s it. Too easy
22.                
23.      icon.node.onclick = null;
24. };
25.  

Part 2 in this series discusses how to integrate PHP and Java with two other methods. The first method—bridging—allows you to use Java objects from PHP, exposing another method of placing messages on JMS queues from PHP through Java. The second metho ...

This article takes a look under the covers of the tag and introduces another supporting API that has been added to JSF 2: the component client behavior model. We'll see how client behaviors can be used not just for enabling Ajax, but also for attachi ...

There are a number of ways to communicate between Flex and PHP but one of the more interesting is over sockets. Socket communication lets developers create near real-time communication by pushing information directly to the client. In this article yo ...

Andrew Hoyer shows his canvas Fu with Cloth, a great experiment using nice physics.

What makes this simulation special is the speed at which everything is computed. Javascript (the language this is written in) is not exactly the most efficient language for this type of computation. This being said, much time was spent squeezing out every little detail that slows things down.

The most computationally expensive part is trying to satisfy the constraints. To do this requires the calculation of distance between two points. This is easy to do with a little math, but that often involves an expensive square root. This is something that cannot simply be thrown out either, so what do you do? You approximate it. There are lots of mathematical tools for approximating functions, in this case I chose the first couple terms of a taylor expansion.

Check out his fast vector, constraints, and finally the cloth itself.

Marcus Westin has created a new templating language called fin. It is an interesting beast, and he gave us a run down:

Since this past November I've been working on a realtime templating system I call "fin". I'd love to get some eyes on it, and hope that you'll find it exciting. There is no demo, but quite a bit of information and if you're on OS X it's trivial to get the system set up on your own machine.

The basic idea is this... Rather than describing your data, you describe how you want your data to be viewed. Fin takes it from there in terms of persisting new data as it gets created. In addition, all views of any piece of data is globally synchronized. If one computer makes changes to a user's name for example, then those edits are reflected for anyone viewing that user's name as well, keystroke by keystroke. The way you create value views and input views goes like

PLAIN TEXT HTML:

1.  
2. <div> User name: (( Value user.name )) </div><div> Edit user name: (( Input user.name )) </div>
3.  

More detailed examples can be found here.

You can also chain references to items, for example (( Value user.friend.name )). Now, if user.friend.name changes, then the Value view is instantly updated. Even cooler, if the user's friend reference changes to a new friend, then the value view will accurately reflect the new friend's name.

To get started on OS X 10.6 is as easy as

git clone git://github.com/marcuswestin/fin.git
cd fin
sudo make install-node
make deps
make run-couchdbx

And voila! Just navigate to localhost/path/to/fin/examples/from-html.html and you're good to go.

GrinderStone is an Eclipse plug-in for Grinder load testing scripts development. The Grinder is a Java load testing open source framework that makes it easy to run a distributed test using many load injector machines.

SAN MATEO, Calif., February 22, 2010 — Fortify Software, the market leader in Software Security Assurance solutions, debuted the next generation hybrid security analysis technology for testing web applications. Developed in collaboration with H ...

Parancoe is a Java meta-framework aggregating in an useful way Hibernate/JPA, Spring 2, Spring MVC and, for the AJAX support, DWR.

Would we all like Steve to sit down with us on our project and do a performance case study? Well, we may not get that, but we are getting to at least sit in on others.

Steve has kicked off his long awaited series that runs performance case studies on third party content. I have been talking to Steve about this for a couple of years, so it is great to see it. It is a sensitive topic as you never want to show up a team when you are just trying to help and educate.

First on the block? The Digg widget.

Steve goes into detail and finds a lot of short comings. You could probably guess some of the bad actors. Mr. document.write() appears for example. We get the problems, and proposed solutions to the issue. Steve also tries to note what a user of third party content can do regardless of if the third party guys fix their issues (put in iframe!).

Here are the most important performance issues along with recommended solutions.

1. 9 HTTP requests, 52 kB transferred over the wire, and 107 kB of JavaScript (uncompressed) is a lot of content for a single widget.

   Recommendations:

   • Concatenate these three scripts: JS_Libraries, widgetjsvars, and omnidiggthis. (eliminates 2 HTTP requests)
   • Run Page Speed’s “Defer loading JavaScript” feature and see how much of the JavaScript is not used. If it’s sizable, delete it. (This feature is currently broken in the latest version of Page Speed, but a fix is imminent.) (eliminates ?? kB)
   • Optimize the images – widget-logo.png and get-widget.png can both be reduced by ~3 kB. (eliminates ~6 kB)
   • Sprite widget-logo.png and shade-com.png. (eliminates 1 HTTP request)
2. The widget’s scripts block the main page’s content from downloading. Looking at the waterfall chart, the main page includes the image “digg-waterfall.png” (row 10). Notice how this image doesn’t start downloading until after all the scripts for the Digg widget are received.
   Recommendations:
   • Instead of loading the scripts using document.write, load them without blocking other downloads. The scripts are already suffering from race condition behavior, as evidenced by this comment from widgetjsvars:
     1: if (!digg || !digg.$) setTimeout(function() { diggwb(obj); }, 200); //hack for IE not loading scripts that are included via document.write until it decides too

   So it probably isn’t too much work to avoid race conditions when making all the scripts load asynchronously.

3. The widget’s stylesheet blocks the main page from rendering in IE.

   Recommendations:

   • Instead of loading the stylesheet using document.write, load it via JavaScript as described in 5d dynamic stylesheets.
4. Four of the resources aren’t cached long enough.
   Recommendations:
   • Two scripts aren’t cacheable because they have an expiration date in the past. widgetjs is part of the snippet, so it can’t have a long expiration date, but something like an hour or a day would be better than a date in the past. widgetjsvars could have a far future expiration date since its URL is specified in widgetjs.
   • The three images are only cacheable for a day. They should have a far future expires header since the image filename can be change if it’s modified.
5. There are approximately 30 inefficient CSS selectors. Because this stylesheet is part of the main page, the selectors will cause the overall page to render more slowly when these selectors are applied to the elements in the main page.
   Recommendations:
   • Reduce the performance impact by simplifying these CSS selectors.
6. Four of the resources have ETags which reduces their cacheability.

   Recommendations:

   • Configure the ETags for widget.css, widget-logo.png, get-widget.png, and shade-com.png.

This is just the first example. What else would you like to see Steve tackle?