Ajax

I noticed the new iPod Engraving Gallery that is a nice use of Coherent to show a slick UI with engraving suggestions.

I was also talking to a friend that has leopard beta bits and he was playing with an updated Dashcode. It appears that the Coherent library is now used for the widgets too. Yay data binding!

Rodrigo Reyes has announced a new project called AbstractCanvas, a GWT project that sits on top of HTML Canvas and Java2D.

The same code can thus run in the browser, or on the server.

You can then write code such as:

PLAIN TEXT JAVA:

1.  
2.  VerticalPanel vPanel = new VerticalPanel();
3.  
4.  CanvasPanelExt canvas1 = new CanvasPanelExt(300,150);
5.  
6.  canvas1.setFillStyle(Color.WHITE);
7.  canvas1.setGlobalAlpha(1.0);
8.  canvas1.fillRect(0, 0, canvas1.getCoordWidth(), canvas1.getCoordHeight());
9.        
10.  canvas1.addCanvasPainter(new ColorTest()); // <- Note the use of CanvasPainter here
11.  canvas1.addCanvasPainter(new PathTest());     <- and here
12.  
13.  vPanel.add(canvas1);
14.  

Mary Jo Foley has an article called Move over, Ajax. Here comes Microsoft’s ‘Kojax’. The thing is, I don't get what it actually is:

Kojax is a mobile development platform, according to my sources, that will allow Microsoft- — and third-party-developed — applets run in an Ajax-like way, using a combination of Visual Studio tools and JavaScript, on Java-based mobile phones.

Erm, is this just JavaScript running on the JVM? This is the big deal instead of the PDC touted "write using .NET and deploy everywhere"?

Mary goes on:

What kinds of mobile applets are we talking about here? Nothing iPhone-like, such as restaurant reviews or “I am Rich.” More like a virtual wallet for online payments, a group messaging service and photo-sharing app — things that build on top of Windows Live for Mobile services. Some of these Kojax-based applets will ad-funded; others will likely be transaction- and subscription-based.

Another interesting part of the Kojax tips I’ve received: Microsoft allegedly is aiming its Kojax applet plans primarily at users in emerging markets.

The Kojax work may or may not be related to a recent Unlimited Potential initiative about which I recently heard, known as “Mobile First.” Mobile First is all about users whose first Microsoft-related experience tends to be in the mobile-phone, rather than the PC, realm. (Given Microsoft’s recent acknowledgment that China Mobile will offer the first handsets running Internet Explorer 6, it’s not far-fetched to see how/why Microsoft is putting so much emphasis on emerging-market customers.)

I haven’t been able to glean much more about Kojax and Microsoft’s mobile applet plans. So before you ask, I don’t know what stage Kojax is at: It could be anything from a glimmer in a Microsoft development team’s eye, or something in private beta.

Aaron Boodman posted about the new design document that discusses what the extension system should look like in Chromium and thus Google Chrome:

Chromium can't be everything to all people. People use web browsers in a variety of environments and for a wide variety of jobs. Personal tastes and needs vary widely from one user to the next. The feature needs of one person often conflict directly with those of another. Further, one of the design goals of Chromium is to have a minimal light-weight user interface, which itself conflicts with adding lots of features.

User-created extensions have been proposed to solve these problems:

• The addition of features that have specific or limited appeal ("that would be great as an extension").
• Users coming from other browsers who are used to certain extensions that they can't live without.
• Bundling partners who would like to add features to Chromium specific to their bundle.

They then define the goals:

An extension system for Chromium should be:

• Webby

• Developing and using extensions should be very similar to developing and using web pages.
• We should reuse the web platform wherever possible instead of creating new proprietary APIs.
• Web developers should be able to easily create Chromium extensions.
• Installing and using an extension should feel lightweight and simple, like using a web app.

Rich

• It should be possible to create extensions as polished as if they had been developed by the Chromium team.
• Eventually, it should be possible to implement major chunks of Chromium itself as extensions.

General

• There should be only one extension system in Chromium that handles all types of extensibility.
• Infrastructure like autoupdate, packaging, and security should be shared.
• Even traditional NPAPI plugins should be deployable as extensions.

Maintainable

• The system should require low ongoing maintenance from the Chromium team, and minimize potential for forward compatibility issues.
• We should not need to disable deployed extensions when we release new versions of Chromium. 

Stable

• Extensions should not be able to crash or hang the browser process.
• Chromium should assign blame to extensions that are overusing resources via tools like the task manager and web inspector.
• Poorly behaving extensions should be easy to disable.

Secure

• It must not be possible for third-party code to get access to privileged APIs because of the extension system.
• Extensions should be given only the privileges they require, not everything by default.
• Extensions should run in sandboxed processes so that if they are compromised, they can't access the local machine.
• It should be trivial for authors to support secure autoupdates for extensions.
• We must be able to blacklist extensions across all Chromium installations.

Open

• Extension development must not require use of any Google products or services.
• Extensions should work the same in Chromium as in Google Chrome.

As the new kid on the block, they get to learn from the good and bad of other add on systems (IE, Firefox, etc). What would you like to see? I love the idea of being able to do as much as possible by using the Web platform as it is, and doing things like adding some new APIs, but also additions to CSS and the like versus a new system.

I would also love to see the Chromium folks working with others to start sharing some work here. For example, it would be great to have the vbox/hbox work shared. David Hyatt did a lot of work there back in the day with WebKit already.

Now this could only fly on a Friday ;)

Ed Spencer has coded up a bra size calculator in JavaScript:

One of the more mesmerizing websites I've worked on recently was for a lingerie boutique in the UK. Aside from the unenviable task of having to look at pictures of women in lingerie all day, I was also forced (forced!) to write a bra size calculator.

The theory behind bra size calculation is arcane and somewhat magical. Understanding of it does not come easily to man nor beast, so it is lucky that I, falling cleanly into neither category, have passed through pain and torment to save you the trouble.

After hours of testing he came up with the BraCalculator:

PLAIN TEXT JAVASCRIPT:

1.  
2. var BraCalculator = {
3.  
4.   /**
5.    * The string to be returned when the result could not be calculated.  Overwrite to change this
6.    */
7.   unknownString: "Unknown",
8.  
9.   cupSizes: ["A", "B", "C", "D", "DD", "E", "EE", "F", "FF", "G", "GG", "H", "HH",
10.              "J", "JJ", "K", "KK", "L", "LL", "M", "MM", "N", "NN"],
11.  
12.   /**
13.    * Returns the correct bra size for given under bust and over bust measurements
14.    * @param {Number} underBust The measurement taken under the bust (in inches)
15.    * @param {Number} overBust The measurement taken over the bust (in inches)
16.    * @return {String} The correct bra size for the given measurements (e.g. 32C, 40DD, etc)
17.    */
18.   calculateSize: function(underBust, overBust) {
19.     var bandSize = this.calculateBandSize(underBust);
20.     var cupSize  = this.calculateCupSize(bandSize, overBust);
21.    
22.     if (bandSize && cupSize) {
23.       return bandSize + cupSize;
24.     } else {
25.       return this.unknownString;
26.     };
27.   },
28.  
29.   /**
30.    * Calculates the correct band size for a given under bust measurement
31.    * @param {Number} underBust The measurement under the bust
32.    * @return {Number} The correct band size
33.    */
34.   calculateBandSize: function(underBust) {
35.     var underBust = parseInt(underBust, 10);
36.     return underBust + (underBust % 2) + 2;
37.   },
38.  
39.   /**
40.    * Calculates the Cup size required given the band size and the over bust measurement
41.    * @param {Number} bandSize The measured band size (should be an even number)
42.    * @param {Number} overBust The measurement taken over the bust
43.    * @return {String} The appropriate alphabetical cup size
44.    */
45.   calculateCupSize: function(bandSize, overBust) {
46.     var bandSize = parseInt(bandSize, 10);
47.     var overBust = parseInt(overBust, 10);
48.     var diff     = overBust - bandSize;
49.    
50.     var result   = this.cupSizes[diff];
51.    
52.     //return false if we couldn't lookup a cup size
53.     return result ? result : false;
54.   }
55. };
56.  

Check it out in action

Greg Reimer is doing really interesting work with reglib and he now has a neutral post on events and how he favours the pattern of mouse enter / leave to mouse over / out.

He shows an example using the pyramid illustrations (as above) and then ends with:

The title of this post is a bit misleading. The mouseenter/leave events are never used. It's all still accomplished via mouseover/out, but there's enough information available in the handling element, event.target and event.relatedTarget elements--and their positions relative to each other--to know whether to execute the handler. Since the actual mouseenter/leave events don't bubble, and in any case are IE-only, reglib wants nothing to do with them. This code is checked in to the trunk, and with a little more testing will be released as reglib version 1.0.5.

One thing also, I'd be curious to know if anybody knows of a reason this would be *undesirable* behavior.

What do you think?

PLAIN TEXT HTML:

1.  
2. <!doctype html>
3.  

That is what HTML 5 defines, and Dustin Diaz agrees as he lays down the skinny:

Doctypes have long been in standardista discussions circles. Why to use them. Which one to use. Which one is best. These are all <sarcasm>really fun details</sarcasm> to get into, but the most important aspect of any doctype is simply having one, since without one, you’re stuck in the lovely world of “quirks mode”. If you’re interested in understanding the anatomy of a doctype, then by all means, dive in.

There is really, absolutely no reason you need the rest of the doctype in your declaration unless you’re validating code. Furthermore, it does not mean that your page is even invalid. In the end, it puts your webpages into standards mode, which is what really matters. (Plus it’s easy to memorize ;)

Try it out. It will fix your box model in IE6 and clobber all those other funny gotchas when you’re in quirks mode. Cheers.

Do you concur?

If you skip in 20 minutes to the presentation above you will find Charles Jolley talking about SproutCore:

During this presentation I actually built and deployed a small application on stage but the most interesting thing, I think, is the part where I talk about how thick client frameworks like SproutCore change the way you build your server side as well. It’s a model I call “microservices.”

SproutCore 1.0 is coming together nicely, and we keep seeing improvements such as mixin support that allows you to simply:

PLAIN TEXT JAVASCRIPT:

1.  
2. MyApp.MyMixin = {
3.   initMixin: function() {
4.    console.log("mixin inited!");  // just for demo
5.   }
6. };
7.  
8. MyApp.myController = SC.Object.create(MyApp.MyMixin, {
9.   // other properties
10. });
11. // => "mixin inited!"
12.  

s3slider is a simple jQuery plugin that smoothly lets you fade through a set of images.

You include the script and then:

PLAIN TEXT HTML:

1.  
2. // setup the images
3. <div id="s3slider">
4.    <ul id="s3sliderContent">
5.       <li class="s3sliderImage">
6.           <img src="#" />
7.           <span>Your text comes here</span>
8.       </li>
9.       <li class="s3sliderImage">
10.           <img src="#" />
11.           <span>Your text comes here</span>
12.       </li>
13.       <div class="clear s3sliderImage"></div>
14.    </ul>
15. </div>
16.  

Setup the CSS, and finally the JS

PLAIN TEXT JAVASCRIPT:

1.  
2. $(document).ready(function() {
3.    $('#s3slider').s3Slider({
4.       timeOut: 4000
5.    });
6. });
7.  

I realise that we are an international community here at Ajaxian, but for the American Thanksgiving holiday, I thought it would be OK to take stock and say some thanks too.

Firstly, to the bright hackers who brought us not only XHR (thanks Microsoft), but porting it to other browsers, and then the hard work of giving us the Ajax libraries. The Ajax framework authors have done the hard work so we don't have too. They boldly go where no Web developer wants to.

Thanks to the browser vendors, especially recently got getting back in the game and charging ahead. We have another game on our hands as we see browsers add features and come a huge way with respect for performance.

Finally, thanks for you all. You provide the colour that we get to cover. You build the great applications that we get to showcase. The engine that is Ajax matters little if there isn't a great body on top. Thanks for pushing the Web forward, and for supporting the platform that tries hard to be Open for all. We have a unique opportunity to have developers "own" the platform that we all build on rather than a particular vendors. We need to push even more to make this happen in spades.

If you notice that we haven't covered something that you have found cool... perhaps you made it, please don't assume that we glossed over it. Chances are that we simply didn't see it. So please email us and contribute some news! One of the Ajaxians will make sure to check it out. To the other Ajaxian editors, I appreciate ever post that you do to contribute to this community.

Have a great Thursday chaps.

We are using software applications more than ever before. As the demand for new capabilities and functions grows, companies strive to provide an adequate response to business needs. The rate of application evolution places an ever-larger burden on the shoulders of software producers, vendors, and even consumers. In addition, much of the costly software used by organizations was not designed to respond to a rapidly changing marketplace or highly dispersed workforce, requiring its substitution or modernization.

read more

Damian Wielgosik has created Drawter, a web based tool to layout pages:

Drawter is a tool written in JavaScript and based on jQuery library. It provides you the possibility to literally draw your website's code. It runs on every single web-browser which makes it really useful and helpful. Each tag is presented as a layer you have drawn.

Currently Drawter is available in Pro version, which means that it is intended for webmasters use only - knowledge of HTML and CSS is required.

Drawter is not a tool for laymen, for the time being, but the whole team behind the project is putting every effort to launch a new version called "Amateur". Soon you will be able to draw your websites without any knowledge of HTML or CSS. Launching soon, really soon.

He has a detailed screencast of the tool in action where you see how you can flip between draw and edit modes to build up your page. Nicely done!

From the first days of Rich Internet Application (RIA) technology, many enthusiasts found an analogy between RIA and service-oriented architecture (SOA). Some of them talked about the benefits of a would-be-wonderful use of SOA in RIA; others saw RIA as a SOA face. Nonetheless, there are experts who see a discrepancy between RIA and SOA concepts.

read more

Dion and I were just talking about NetBeans (Sun's free Java IDE) with some colleagues the other day. To those in the Java community, just mentioning "NetBeans" can conjure up some of the worst memories of mounting file systems and purple-hued user interfaces.

But in reality, today's NetBeans is a fantastic IDE with a modern-looking interface and some very cool and well-implemented features. Tor Norbye, one of Sun's star engineers, took a minute to update us on the state of JavaScript 1.7 support in NetBeans:

I just checked in support for JavaScript 1.7. This means that NetBeans will no longer give you syntax errors if you try to use the new language...

This work isn't done; I'd like it to be smarter about generators, and there may be some issues with scope handling. But at least the editor doesn't get in your way with false error messages now - you can start writing JavaScript 1.7 clean code. (This is with NetBeans 7.0 dev).

For example, the yield keyword is recognized (as shown above) and

the let keyword can be used, as well as destructuring assignments, generators and iterators, etc. (See New In JavaScript 1.7 for more information).

Tor has a blog entry with a bit more information.

One of the best aspects of living in the Bay Area is bumping into all sorts of interesting computer folks. Today I'm working from a coffee shop and bumped into Tantek Çelik, CSS and Microformats man. He pointed me to a fabulous blog series introducing Microformats and all the major formats for a more lay-person audience, created by Emily Lewis:

• Getting Semantic With Microformats, Introduction
• Getting Semantic With Microformats, Part 1: rel
• Getting Semantic With Microformats, Part 2: XFN
• Getting Semantic With Microformats, Part 3: hCard
• Getting Semantic With Microformats, Part 4: hCalendar
• Getting Semantic With Microformats, Part 5: hAtom
• Getting Semantic With Microformats, Part 6: hResume
• Getting Semantic With Microformats, Part 7: Themes & Issues

Lots of great information and tutorials in that blog series.

Tantek also pointed me to an interesting wiki page laying out how browsers and web pages can integrate Microformats more deeply into their user-interfaces:

Recently there have been many really good user interface ideas and suggestions for working with microformats. This page serves to collect and document them so that we may be inspired by and iterate on each others' works.

The Operator plugin for Firefox, which natively supports deep UI integration for Microformats and discussed on the wiki page as well:

Bertrand Le Roy pointed me to Seadragon Ajax, a JavaScript client that gives you deep zoom (think: Google Maps) ability in short order.

To build the thing itself you use Deep Zoom Composer and then you choose whether you want the Silverlight version or this Ajax one.

The embed viewer is easy to use too.

Seadragon.embed("400px", "300px", "http://seadragon.com/content/images/bike.dzi", 10928867, 8733113, 256, 1, "jpg", [[0,0,10928867,8733113,0,13],[1419478,6113179,977900,840135,0,14],[2292790,1716032,776276,1031768,0,14],[332489,946425,1452824,740129,0,14],[5430673,5897341,1292784,739918,0,14],[8474153,2177085,1544685,467074,0,14],[3991769,1044238,2758612,939629,0,14],[7640107,3470480,1088461,606256,0,14],[1419478,6113179,977900,840135,0,15],[2292790,1716032,776276,1031768,0,15],[332489,946425,1452824,740129,0,15],[5430673,5897341,1292784,739918,0,15],[8474153,2177085,1544685,467074,0,15],[6318312,1563854,346301,259725,0,15],[6494963,1832061,169649,127237,0,15],[6318312,1832061,169650,127237,0,15],[6011840,1563860,296584,395445,0,15],[4777472,1788675,207127,155345,0,15],[4988845,1788675,207126,155345,0,15],[5200220,1788675,207126,155345,0,15],[5411592,1788675,207127,155345,0,15],[4913716,1612081,231772,173828,0,15],[5149687,1612081,231771,173828,0,15],[5385659,1612081,231771,173828,0,15],[4779148,1612081,130371,173828,0,15],[7640107,3470480,1088461,606256,0,15],[1503658,6533661,505196,378897,0,16],[2217765,6534674,108027,144035,0,16],[2095335,6534674,108026,144035,0,16],[2095335,6717609,230457,172843,0,16],[2422167,2310347,517517,388139,0,16],[1066232,1044238,294749,221063,0,16],[1391231,1100691,249999,187499,0,16],[1516230,1300691,225000,168749,0,16],[1441230,1500689,194750,146063,0,16],[1241232,1500689,149999,112500,0,16],[1241232,1400690,99999,75000,0,16],[1309088,1335214,80052,60040,0,16],[1406554,1350690,62443,46833,0,16],[1423489,1409561,54839,41129,0,16],[1403794,1459170,33059,24794,0,16],[1375606,1462800,21875,16406,0,16],[5875845,6355289,357124,267843,0,16],[1364665,1444316,21882,16411,0,16],[1370450,1426159,20000,14999,0,16],[9753087,2361955,244573,183430,0,16],[1393794,1418659,20000,14999,0,16],[1409052,1435316,12000,9000,0,16],[6318312,1563854,346301,259725,0,16],[1405052,1447566,8000,6000,0,16],[6494963,1832061,169649,127237,0,16],[1397284,1447566,6165,4624,0,16],[6318312,1832061,169650,127237,0,16],[1397284,1442433,4510,3383,0,16],[6011840,1563860,296584,395445,0,16],[1402445,1438316,4000,3000,0,16],[4777472,1788675,207127,155345,0,16],[1397598,1442045,4510,3382,0,16],[4988845,1788675,207126,155345,0,16],[5200220,1788675,207126,155345,0,16],[5411592,1788675,207127,155345,0,16],[4913716,1612081,231772,173828,0,16],[5149687,1612081,231771,173828,0,16],[5385659,1612081,231771,173828,0,16],[4779148,1612081,130371,173828,0,16],[7640107,3470480,1088461,606256,0,16],[1503658,6533661,505196,378897,0,17],[2217765,6534674,108027,144035,0,17],[2095335,6534674,108026,144035,0,17],[2095335,6717609,230457,172843,0,17],[2422167,2310347,517517,388139,0,17],[1066232,1044238,294749,221063,0,17],[1391231,1100691,249999,187499,0,17],[1516230,1300691,225000,168749,0,17],[1441230,1500689,194750,146063,0,17],[1241232,1500689,149999,112500,0,17],[1241232,1400690,99999,75000,0,17],[1309088,1335214,80052,60040,0,17],[1406554,1350690,62443,46833,0,17],[1423489,1409561,54839,41129,0,17],[1403794,1459170,33059,24794,0,17],[1375606,1462800,21875,16406,0,17],[5875845,6355289,357124,267843,0,17],[1364665,1444316,21882,16411,0,17],[1370450,1426159,20000,14999,0,17],[9753087,2361955,244573,183430,0,17],[1393794,1418659,20000,14999,0,17],[1409052,1435316,12000,9000,0,17],[1405052,1447566,8000,6000,0,17],[6494963,1832061,169649,127237,0,17],[1397284,1447566,6165,4624,0,17],[6318312,1832061,169650,127237,0,17],[1397284,1442433,4510,3383,0,17],[6011840,1563860,296584,395445,0,17],[1402445,1438316,4000,3000,0,17],[4777472,1788675,207127,155345,0,17],[1397598,1442045,4510,3382,0,17],[4988845,1788675,207126,155345,0,17],[5200220,1788675,207126,155345,0,17],[5411592,1788675,207127,155345,0,17],[4913716,1612081,231772,173828,0,17],[5149687,1612081,231771,173828,0,17],[5385659,1612081,231771,173828,0,17],[4779148,1612081,130371,173828,0,17],[8378574,3833276,279907,209930,0,17],[8378574,3612101,279907,209930,0,17],[1503658,6533661,505196,378897,0,18],[2217765,6534674,108027,144035,0,18],[2095335,6534674,108026,144035,0,18],[2095335,6717609,230457,172843,0,18],[1066232,1044238,294749,221063,0,18],[1391231,1100691,249999,187499,0,18],[1516230,1300691,225000,168749,0,18],[1441230,1500689,194750,146063,0,18],[1241232,1500689,149999,112500,0,18],[1241232,1400690,99999,75000,0,18],[1309088,1335214,80052,60040,0,18],[1406554,1350690,62443,46833,0,18],[1423489,1409561,54839,41129,0,18],[1403794,1459170,33059,24794,0,18],[1375606,1462800,21875,16406,0,18],[5875845,6355289,357124,267843,0,18],[1364665,1444316,21882,16411,0,18],[1370450,1426159,20000,14999,0,18],[9753087,2361955,244573,183430,0,18],[1393794,1418659,20000,14999,0,18],[1409052,1435316,12000,9000,0,18],[1405052,1447566,8000,6000,0,18],[6494963,1832061,169649,127237,0,18],[1397284,1447566,6165,4624,0,18],[6318312,1832061,169650,127237,0,18],[1397284,1442433,4510,3383,0,18],[6011840,1563860,296584,395445,0,18],[1402445,1438316,4000,3000,0,18],[4777472,1788675,207127,155345,0,18],[1397598,1442045,4510,3382,0,18],[4988845,1788675,207126,155345,0,18],[5200220,1788675,207126,155345,0,18],[5411592,1788675,207127,155345,0,18],[4913716,1612081,231772,173828,0,18],[5149687,1612081,231771,173828,0,18],[5385659,1612081,231771,173828,0,18],[4779148,1612081,130371,173828,0,18],[8378574,3833276,279907,209930,0,18],[8378574,3612101,279907,209930,0,18],[2217765,6534674,108027,144035,0,19],[2095335,6534674,108026,144035,0,19],[2095335,6717609,230457,172843,0,19],[1391231,1100691,249999,187499,0,19],[1516230,1300691,225000,168749,0,19],[1441230,1500689,194750,146063,0,19],[1241232,1500689,149999,112500,0,19],[1241232,1400690,99999,75000,0,19],[1309088,1335214,80052,60040,0,19],[1406554,1350690,62443,46833,0,19],[1423489,1409561,54839,41129,0,19],[1403794,1459170,33059,24794,0,19],[1375606,1462800,21875,16406,0,19],[1364665,1444316,21882,16411,0,19],[1370450,1426159,20000,14999,0,19],[9753087,2361955,244573,183430,0,19],[1393794,1418659,20000,14999,0,19],[1409052,1435316,12000,9000,0,19],[1405052,1447566,8000,6000,0,19],[6494963,1832061,169649,127237,0,19],[1397284,1447566,6165,4624,0,19],[6318312,1832061,169650,127237,0,19],[1397284,1442433,4510,3383,0,19],[1402445,1438316,4000,3000,0,19],[4777472,1788675,207127,155345,0,19],[1397598,1442045,4510,3382,0,19],[4988845,1788675,207126,155345,0,19],[5200220,1788675,207126,155345,0,19],[5411592,1788675,207127,155345,0,19],[4913716,1612081,231772,173828,0,19],[5149687,1612081,231771,173828,0,19],[5385659,1612081,231771,173828,0,19],[4779148,1612081,130371,173828,0,19],[1241232,1400690,99999,75000,0,20],[1309088,1335214,80052,60040,0,20],[1406554,1350690,62443,46833,0,20],[1423489,1409561,54839,41129,0,20],[1403794,1459170,33059,24794,0,20],[1375606,1462800,21875,16406,0,20],[1364665,1444316,21882,16411,0,20],[1370450,1426159,20000,14999,0,20],[1393794,1418659,20000,14999,0,20],[1409052,1435316,12000,9000,0,20],[1405052,1447566,8000,6000,0,20],[1397284,1447566,6165,4624,0,20],[1397284,1442433,4510,3383,0,20],[1402445,1438316,4000,3000,0,20],[1397598,1442045,4510,3382,0,20],[1406554,1350690,62443,46833,0,21],[1423489,1409561,54839,41129,0,21],[1403794,1459170,33059,24794,0,21],[1375606,1462800,21875,16406,0,21],[1364665,1444316,21882,16411,0,21],[1370450,1426159,20000,14999,0,21],[1393794,1418659,20000,14999,0,21],[1409052,1435316,12000,9000,0,21],[1405052,1447566,8000,6000,0,21],[1397284,1447566,6165,4624,0,21],[1397284,1442433,4510,3383,0,21],[1402445,1438316,4000,3000,0,21],[1397598,1442045,4510,3382,0,21],[1375606,1462800,21875,16406,0,22],[1364665,1444316,21882,16411,0,22],[1370450,1426159,20000,14999,0,22],[1393794,1418659,20000,14999,0,22],[1409052,1435316,12000,9000,0,22],[1405052,1447566,8000,6000,0,22],[1397284,1447566,6165,4624,0,22],[1397284,1442433,4510,3383,0,22],[1402445,1438316,4000,3000,0,22],[1397598,1442045,4510,3382,0,22],[1409052,1435316,12000,9000,0,23],[1405052,1447566,8000,6000,0,23],[1397284,1447566,6165,4624,0,23],[1397284,1442433,4510,3383,0,23],[1402445,1438316,4000,3000,0,23],[1397598,1442045,4510,3382,0,23],[1405052,1447566,8000,6000,0,24],[1397284,1447566,6165,4624,0,24],[1397284,1442433,4510,3383,0,24],[1402445,1438316,4000,3000,0,24],[1397598,1442045,4510,3382,0,24]]);

Magic Software has announced the release of uniPaaS version 1.5, the company's flagship Rich Internet Application (RIA) and SaaS Enabled Application Platform (SEAP), designed to allow organizations to develop and deploy applications in approximately one-fifth of the time and effort it takes other technologies. The new release includes a migration utility for legacy application versions and a native .NET Rich Internet Application Client that allows users to take full advantage of .NET capabilities to provide a richer and more powerful user experience.

read more

Another experiment with sound, data: URIs, and the embed tag.

SK has shown that it's possible to generate wave file in Javascript and play it. All this happens in the browser and without requiring Flash. He's built a sine wave generator and a song player.

I came across a post about putting .wav files in data: URIs (via an Ajaxian post) so my immediate question was whether I could generate .wav files on the fly. There’s nothing particularly complicated about the .wav format, and I had done it before in PHP, so I applied the idea to JavaScript.

There’s a limit to data URIs, so you’re not able to do too much with it, but at least I was successful in generating a sine waveform with JavaScript. I had to lower the sample rate significantly so that I could fit the data in. I’ve found it to work on Firefox, Opera, Safari, and Google Chrome, but I didn’t test it in Internet Explorer 8 (not installed). You can increase the size of the generated .wav file by changing around the parameters, but be aware that it will stop working if the URI grows to be too large.

We posted on Steve's UA Profiler tool, and John Resig has taken a nice look at the current results.

It actually now looks like Minefield (Firefox nightly) is getting 10 out of 11, and the other browsers are doing great too.

Jonas Sicking of Mozilla has a really nice comment that talks about what the engines are doing and some nuances. For example, if you have a CSS file and a JS file, do you block just in case the JS looks into CSS values (e.g. "in case there is a call to .offsetTop in the script"). How about looking ahead to see? That is the case. You can download away and try to do the right thing. document.write() is another beast that seems to do a lot of harm. Having the browser be smart about it ("they don't do that") will be good.

Back to John, he also discusses features that we can use as developers:

Prefetching

This is part of the HTML 5 specification and allows for pages to specify resources which should be opportunistically downloaded in case they should be used in the future (the common example of image rollovers could be used here).

There's a full page describing how to use them on the Mozilla developer wiki but it isn't that hard to get started. It's as simple as including a new link element in the top of your site:

PLAIN TEXT HTML:

1. <link rel="prefetch" href="/images/big.jpeg">

And that resource will be downloaded preemptively.

Inline Images

The final case that the profiler tests for is the ability of a browser to support inline images using a data: URI. Data URIs give developers the ability to include the image data directly within the page itself. While this saves an extra HTTP request it's important to note that the resource will not be cached (at least not as external resource - it may be cached as part of the complete page). The use of this technique will vary on a case-by-case basis but having a browser support it is absolutely important.

Ernest is up to his old canvas tricks again. This time he has published a car navigation demo that lets you drive around a set of tiles from a map (Google Maps, OpenStreetMap) and it paints your course at the same time.

How did he do it?

The key of the whole implementation is the use of the drawImage method for canvas. The fact that this method can take two possible source elements (an image element or another existing canvas element in the document) allows you to create very nice features like cropping images, image distortion or even a copy/paste selection feature as the one in photoshop.

In this case, Joshua already did the hard work of using the drawImage multiple times to split the original image into horizontal strips and then create the 3D effect. Another example of this technique is the one I did to create the Quicktime VR-style panorama effect using vertical strips instead.

For the car navigation map we have added an extra step to create the source image from the nine openstreetmap tiles. Merging first the tiles to a temporary canvas and then using this temporary canvas as the source of the final 3D map.

There's still more room to play around with it like improving the camera view or porting the collision system of the Mario Kart example.

A common issue some users find the first time they play with the canvas tag is the same origin policy which will prevent one from exporting the canvas to an image (using the toDataURL method) if the drawImage method uses images from another place. In order to solve that we need to proxy the images first.