It was St. Patricks Day last night, and I have a funny feeling that some green beer and Guiness lead to Brian LeRoux and Rob Ellis creating Crockford Facts. It isn’t Friday yet…. well it is in Australia right?

Silliness. Oh, and John Resig has some competition for Doug too. We demand a dance off?

A certain someone was talking to me about how they find it interesting that node.js, the JavaScript server framework du jour which loves all things async, starts life with a bunch of synchronous require() calls. Now, this is actually quite fine since the startup of the server is not the issue at hand.

However, if you are running require()-esque loader code in the browser you want to avoid blocking calls else Steve Souders will come over and beat you up.

I have seen a couple of interesting items in this area:

RequireJS

James Burke of Mozilla Messaging has spent a lot of time in the depths of dojo.require(). He has taken another look at the problem and RequireJS a solution that offers:

• some sort of #include/import/require
• ability to load nested dependencies
• ease of use for developer but then backed by an optimization tool that helps deployment

He walks through the problem and why other solutions like LABjs, CommonJS require, and Dojo itself don't cover all of his bases.

The end result is:

1.  
2. // code that runs asynchronously when the library is loaded
3. require(["some/script.js"], function() {
4.     //This function is called after some/script.js has loaded.
5. });
6.  
7. // defining the module and dependencies
8. require.def(
9.     // The name of this module
10.     "types/Manager",
11.  
12.     // The array of dependencies
13.     ["types/Employee"],
14.  
15.     // The function to execute when all dependencies have loaded. The arguments
16.     // to this function are the array of dependencies mentioned above.
17.     function (Employee) {
18.         function Manager () {
19.             this.reports = [];
20.         }
21.  
22.         // This will now work
23.         Manager.prototype = new Employee();
24.  
25.         // return the Manager constructor function so it can be used by other modules.
26.         return Manager;
27.     }
28. );
29.  

Google Analytics "async add to []" Pattern

When talking to Davis Frank of Pivotal about some Google Analytics code, he pointed me to details about the new GA asynchronous loader that we very excitedly blogged about since GA was such a blocking offender on the Web.

Part of the asynchronous API is that you, the developer create an array, and use the push() method to put commands on a queue. This means that you can start pushing commands immediately.

Then, when the GA code loads asynchronously, it takes over that array and wraps those standard methods. Now it can take the commands and fire them back to GA and push() can do more. Freaking brilliant.

Registration for the jQuery Conference 2010: San Francisco Bay Area is now open!

Register here:

http://events.jquery.org/2010/sf-bay-area/registration

The agenda is still being worked on and will be announced shortly. It’s fully expected that the conference will sell out again (as it has every year, so far) so if you’re interested in coming please sign up sooner rather than later!

Interested in speaking? Please fill out our call for speaking submissions form

David Desandro has developed a newtypeface family named Curtis and done so in an interesting way.... using CSS:

Each character is wrapped in a <span> and then depending on the complexity of that character, more empty <span> elements are added to the markup to render each shape. Here's the markup for R:

1.  
2. <span class="css_char r">
3.         R
4.         <span class="inside split_vert"></span>
5.         <span class="outside split_vert"></span>
6.         <span class="stroke"></span>
7.         <span class="fill"></span>
8. </span>
9.  

The Curtis CSS font wasn’t conceived of any practical application. I was more interested in seeing if it could be pulled off, and if so, what the final result would look like.

Fun and crazy!

Disclaimer: Ben and I work for Palm and created this program. I wanted to make sure that you were aware of it over here, since Web developers have a great chance of getting some $ :)

At Palm we wanted to reward the mobile Web developers who build great applications that our users can enjoy. We didn't want to do an "Mobile App Idol". For one, I didn't want to play the role of Simon (being the token Brit and all), and for two we find it hard to judge correctly.

So, we came up with the Hot Apps program that rewards based on the market (which while not perfect, takes out emotion from the judging system).

We put in 1 million dollars, and wanted to be sure to reward two sets of developers... those that created paid apps, and those that generously offered up their code for free. It is kinda fun to be able to say "oh, thanks for giving this away for free, but here is a reward for your hard work."

We also didn't want to just give money to the top couple of developers, but wanted to spread the love (whilst still having prize amounts that are meaningful). If you take a look at Project Appetite you can do some math on how you still have a great chance to make some $ if you get a great app into the competition.

So, if you fancy flexing some Web skills in mobile.... consider giving a run for Hot Apps.

Want to see some of the tools and a quick app build? Here is a screencast walkthrough that shows building a simple webOS app taken from a look at a helper script that I wrote:

Update: Here is a full set of release notes on the platform preview (called that as it is more of a shell than a browser.

Rey Bango (Ajaxian and now Microsoft employee) will do a post that rounds up the news from MIX today where the IE9 team shared a first preview release of IE9 that comes with new features from HTML5+ (video, SVG, CSS3, addEventListener, JavaScript compilation spread across multicore, and more). All of this is hardware accelerated. Yum. Missing was news on canvas and I didn't see deets on CSS transforms and the like (which would be awesome with hardware acceleration too).

John Resig just got on stage to talk about the collaboration between jQuery and Microsoft and how Microsoft is now contribution resources and code. For example, templates (all on GitHub which gives you:

1.  
2. <script type="text/javascript">
3.  
4.     var product = { name: "Laptop", price: 788.67 };
5.  
6.     $(showProduct);
7.  
8.     function showProduct() {
9.         $("#results").html( tmpl("productTemplate", product) );
10.     }
11.  
12.     function formatPrice(price) {
13.         return "$" + price;
14.     }
15.    
16. </script>
17.  
18. <script type="text/html" id="productTemplate">
19.     Product Name: <%= name %>
20.     <br />
21.     Product Price: <%= formatPrice(price) %>
22. </script>
23.  
24. <div id="results"></div>
25.  

updated with info from Microsoft press release:

As part of Microsoft’s broad engagement with open source communities, Corporate Vice President Scott Guthrie today announced that Microsoft is investing resources to contribute to the development of the jQuery JavaScript Library to help improve the development process of standards-based Web applications. Microsoft will also work to provide better interoperability between ASP.NET and the jQuery JavaScript Library by enhancing ASP.NET so .NET developers can better incorporate jQuery capabilities. In addition, Microsoft will actively promote and distribute versions of the jQuery JavaScript Library by packaging it with popular products such as Microsoft Visual Studio 2010 and ASP.NET MVC 2. As a first step, Microsoft will contribute a templating engine to the jQuery JavaScript Library Team to simplify Web applications.

It is early days (preview release) but great to see a solid go at it here. I *really* want the IE9 team to help us put the Silverlight team out of business :)

The jQuery Project is excited to announce that Microsoft is expanding its support of the jQuery JavaScript Library through new initiatives, to include code contributions, product integration, and the allocation of additional resources.

Building on two years of collaboration with the jQuery Project, Microsoft announced today at MIX 2010 that it will be working with the jQuery Core Team and community to provide source code that will help to further advance the jQuery JavaScript Library. The planned contributions target specific functionalities in areas of mutual interest. They include:

• Templating
• Script Loading
• Data Binding

The initial focus will be on a new templating engine that will allow for easy and flexible data rendering via defined templates. Microsoft has submitted a proposal for public review along with an experimental plugin, and is actively collaborating with the jQuery team and community on a unified implementation. The templating engine will be reviewed and considered for inclusion into the jQuery JavaScript Library or maintained as an official jQuery plugin.

Microsoft will also ship a current release of the jQuery JavaScript Library in both Visual Studio 2010 and ASP.NET MVC as well as continue to host current versions of the library on the Microsoft CDN.

Lastly, Microsoft will be providing resources to assist in QA testing of jQuery in new environments to ensure continued stability and longevity of the library.

We see these contributions as a tremendous benefit to the jQuery effort and community and look forward to continued collaboration with Microsoft.

The Chromium folk have posted about JavaScript conformance as they release a test runner for Sputnik, that allows you to easily run the complete test suite from within your browser:

Sputnik touches all aspects of the JavaScript language defined in the 3rd edition of the ECMA-262 spec. In many ways it can be seen as a continuation of and a complement to existing browser conformance testing tools, such as the Acid3 test. While we are always focused on improving speed, Sputnik is not about testing how fast your browser executes JavaScript, but rather whether it does so correctly.

Since we released the Sputnik tests as an open source project, the most requested feature has been the ability to run the tests in a browser, and we are excited to launch that functionality today. The new test runner lets you run the tests from a single URL and quickly see the results in your browser. This makes it easier both for users to see how well their browser conforms to the JavaScript spec, as well as for browser makers to find bugs and incompatibilities.

You can also use Sputnik to compare browser conformance.

The dart board shows relative conformance based on the number of tests that hit or miss. Of course, in the real world, all tests are not equal. This has been an issue with Acid tests. The race to 100 is socially interesting, but if you miss a few core tests that could be worse than meeting 10 corner cases in SVG :)

The jQuery Project is very excited to announce the dates for our first-ever San Francisco Bay Area conference. The conference will be held at the Microsoft Silicon Valley Research Center in Mountain View, California on April 24th and 25th, 2010.

The San Francisco Bay Area conference is the second of four events planned by the jQuery Project in 2010. The first was the jQuery14 event, and additional conferences are being planned in Europe and on the East Coast for later this year.

This venue is the largest that the project has worked with to date (Harvard Law School in ‘07, the MIT Stata Center in ‘08 and Microsoft New England Research Center in ‘09) and we expect to sell out very quickly.

Registration is currently scheduled to open on Wednesday, March 17th; tickets will be priced at $199. In addition to General Admission tickets, we’re offering a limited number of discounted student tickets priced at $99, with a valid student ID.

Watch the jQuery blog or jQuery Twitter feed for notification when registration opens.

A brief synopsis of some of the content that you’ll be able to expect:

• jQuery
• jQuery UI
• jQuery Plugins
• Complex Application Development
• jQuery Case Studies

In addition to two days of jQuery sessions, for the first time we’ll be adding an additional day of jQuery training, prior to the main event. The training will be provided by appendTo and focused on helping you and your team get up to speed on jQuery prior to attending the conference. The training will cover the following topics:

• Introduction to jQuery
• Finding Something
• Doing Something With It
• Chaining
• Introduction to jQuery UI
• Implementing jQuery UI Widgets

The training will be held on April 23rd at the Microsoft San Francisco offices in downtown San Francisco; tickets will cost $299. All proceeds from training go to the jQuery Project.

Interested in speaking? Please fill out our call for speaking submissions form and watch the jQuery Blog for updates.

Cedric Dugas feels so passionate about fixed positioning in WebKit that he created A Better Mobile Web to talk about it:

The Problem

It is impossible to have an element fixed in CSS on the page in the mobile Webkit browser. When you are surfing the web on your phone, webkit opens the page completely and acts as a viewport.

"Imagine a book in front of you. Take a piece of paper, cut a 320*416 square in it, and lay it over the book. To read the book, move the paper around and position the hole over the words you want to see." -Richard Herrera

Why it is important

To create better mobile applications and websites, we need fixed positionning to give the user better tools to browse the web on handled devices. Like a real mobile app, we could have a fixed toolbar when scrolling on a site, it is critical to not take the user in hostage in very long list or on long content pages. This is something we can't really emulate in javascript as mobile devices are not really powerful.

The solution

The Webkit team could give us a proprietary CSS property that would overwrite the viewport behavior, and this is the proposition here. Give us a CSS property like position: -webkit-viewport-fixed that we can apply on a div so it can be fixed to the viewport.

That is one feature request, but surely there we can add to that? The broad domain of "abettermobileweb.com" deserves more!

What would you like to see for mobile specifically that isn't covered in the current Web and device API standard work?

Ben Cherry has a really nice detailed analysis of the module pattern.

He starts with the simple pattern that Crock-y documented back in the day..... and then goes on to discuss augmentation (loose and strict) and then deeper into some cool patterns:

Cloning and Inheritance

1.  
2. var MODULE_TWO = (function (old) {
3.     var my = {},
4.         key;
5.      
6.     for (key in old) {
7.         if (old.hasOwnProperty(key)) {
8.             my[key] = old[key];
9.         }
10.     }
11.      
12.     var super_moduleMethod = old.moduleMethod;
13.     my.moduleMethod = function () {
14.         // override method on the clone, access to super through super_moduleMethod
15.     };
16.      
17.     return my;
18. }(MODULE));
19.  

This pattern is perhaps the least flexible option. It does allow some neat compositions, but that comes at the expense of flexibility. As I've written it, properties which are objects or functions will not be duplicated, they will exist as one object with two references. Changing one will change the other. This could be fixed for objects with a recursive cloning process, but probably cannot be fixed for functions, except perhaps with eval. Nevertheless, I've included it for completeness.

Cross-File Private State

One severe limitation of splitting a module across multiple files is that each file maintains its own private state, and does not get access to the private state of the other files. This can be fixed. Here is an example of a loosely augmented module that will maintain private state across all augmentations:

1.  
2. var MODULE = (function (my) {
3.     var _private = my._private = my._private || {},
4.         _seal = my._seal = my._seal || function () {
5.             delete my._private;
6.             delete my._seal;
7.             delete my._unseal;
8.         },
9.         _unseal = my._unseal = my._unseal || function () {
10.             my._private = _private;
11.             my._seal = _seal;
12.             my._unseal = _unseal;
13.         };
14.      
15.     // permanent access to _private, _seal, and _unseal
16.      
17.     return my;
18. }(MODULE || {}));
19.  

Any file can set properties on their local variable _private, and it will be immediately available to the others. Once this module has loaded completely, the application should call MODULE._seal(), which will prevent external access to the internal _private. If this module were to be augmented again, further in the application's lifetime, one of the internal methods, in any file, can call _unseal() before loading the new file, and call _seal() again after it has been executed.

This pattern occurred to me today while I was at work, I have not seen this elsewhere. I think this is a very useful pattern, and would have been worth writing about all on its own.

Sub-modules

Our final advanced pattern is actually the simplest. There are many good cases for creating sub-modules. It is just like creating regular modules:

1.  
2. MODULE.sub = (function ()) {
3.     var my = {};
4.     // ...
5.      
6.     return my;
7. }());
8.  

While this may have been obvious, I thought it worth including. Sub-modules have all the advanced capabilities of normal modules, including augmentation and private state.

Nice work Ben!

This week Elijah and Ralph talked with John Resig about details from the recent jQuery 1.4 point releases. We also get updates on the next point releases and other features that are in the works.

You can subscribe to the show in iTunes or via the raw RSS feed or you can download the MP3.

Here are the show notes for this episode:

• Two point releases have been released since Jan 14
• jQuery 1.4.1 
  • Features
    • Blog post
  • Notable Bugs
    • 25 bugs closed
• jQuery 1.4.2
  • Features
    • Blog post
    • Delegate/Undelegate
      • “Event Delegation with jQuery” by Brandon Aaron
      • Video of John Resig talk at the first jQuery Boston Meetup
    • Performance Improvements
      • 2x speed in the task speed test suite
    • Events Rewrite
      • “jQuery Click Outside Plugin” by Ben Alman
  • Notable Bugs
    • 40 Bugs closed
• jQuery 1.4.3
  • .bind(“click”, false) – shortcut for .bind(“click”, function() { return false; });
  • .unbind(“click”, false) – shortcut for .unbind(“click”, function() { return false; });
  • .click(false) – shortcut for .click(function() { return false; })
  • Faster jQuery Trim Forum Thread
• What is ahead for jQuery and future releases?
  • Mobile
  • Templating – Forum thread
  • Dynamic Script Loading

Follow the show on twitter for up to date information regarding upcoming guests at http://twitter.com/jquerypodcast. Follow Ralph and Elijah on Twitter as well.

You can send feedback about this episode or send in questions to podcast@jQuery.com or use the call-in number (804) 4jQuery, (804) 457-8379.

“jQuery Theme” created by Jonathan Neal

Sergey Chikuyonok gets his Philips Ambilight foo on as he created a HTML5 video + canvas sample that mimics the TV effect.

As the video runs, a snapshot is sent over to JavaScript land where colors are worked out:

1.  
2. function getMidColors(side) {
3.         var w = buffer.width,
4.                 h = buffer.height,
5.                 lamps = getOption('lamps'),
6.                 block_width = getOption('block_size'),
7.                 block_height = Math.ceil(h / lamps),
8.                 pxl = block_width * block_height * 4,
9.                 result = [],
10.  
11.                 img_data = buffer_ctx.getImageData(side == 'right' ? w - block_width : 0, 0, block_width, h),
12.                 total_pixels = img_data.data.length;
13.  
14.  
15.         for (var i = 0; i <lamps; i++) {
16.                 var from = i * w * block_width;
17.                 result.push( calcMidColor(img_data.data, i * pxl, Math.min((i + 1) * pxl, total_pixels - 1)) );
18.         }
19.  
20.         return result;
21. }
22.  

Then, two canvas objects are placed, one on each side, of the video itself.

The foundation of every great open source project is its community. The MooTools Team creates the base framework code but it’s all of you that take the framework and build outstanding plugins. These are just some of the new developments floating around the MooTools community.

Jacob Thornton’s NetTuts article, 12 Steps to MooTools Master, is a high-level introduction to the MooTools JavaScript framework. The informative article touches on such MooTools topics as Mutators, Prototypal Inheritance, custom events, binding, and more. This tutorial probably isn’t for the complete beginner, but is a good place to start for people still relatively new to MooTools and those considering it for the first time.

http://net.tutsplus.com/tutorials/javascript-ajax/12-steps-to-mootools-mastery/

Meio.Autocomplete is the latest plugin from MooTools Contributor Fábio M. Costa. Fábio’s class is packed full of options and events, making it one of the most flexible MooTools Autocomplete plugin available. Great work Fábio!

http://mootools.net/forge/p/meio_autocomplete

DynamicTextarea is a MooTools class that resizes TEXTAREA elements as the user types. DynamicTextarea boasts numerous options and events for maximum control over chosen TEXTAREAs.

http://mootools.net/forge/p/dynamictextarea

Array.Math is an outstanding set of Math methods you can add to JavaScript’s native Array object. Need to find the sum of numbers in an array? Need to normalize elements in an array? Need to get the vector length of an array of numbers? Be sure to download Array.Math! Kudos to Arian Stolwijk for his excellent work!

http://mootools.net/forge/p/array_math

LazyLoader is a unique MooTools plugin created by David Chan which allows you to defer loading of MooTools classes until they are needed. This is especially helpful when building large web applications. LazyLoader is very easy to use and implement.

http://mootools.net/forge/p/lazyloader

Locate is a Geolocation plugin authored by Christopher Beloch. Christopher’s plugin taps into the power of HTML5 and offers a few useful options and events to control the Locate instance.

http://mootools.net/forge/p/locate

These are just a few of the great MooTools plugins floating around the MooTools community recently. Keep up the good work and we look forward to featuring your plugins in future posts!

I just finished doing some talks on geo hacking (slides are available here) and how to use some of the Geo technologies Yahoo and Google provide as part of a University gig in Atlanta.

As a lot of the students liked the idea of APIs like GeoPlanet and Placemaker but had a hard time getting their head around them I thought it a good idea to build a small JavaScript library that does the job for them.

I give you the YQL Geo library (and its source on GitHub). Using this library you can do the following:

• Detecting the visitor's location with the W3C geo API and with IP as a fallback
• Find geo location from text
• Find location from lat/lon pair
• Find locations in a certain web document (by URL)
• Get the location for a certain IP number

And all of that in pure JavaScript. For example:

1. yqlgeo.get(
2.   'paris,fr',
3.    function(o){
4.      console.log(o);
5.   }
6. )

Will get you:

1. "place":{
2.   "lang":"en-US",
3.   "uri":"http://where.yahooapis.com/v1/place/615702",
4.   "woeid":"615702",
5.   "placeTypeName":{
6.     "code":"7",
7.     "content":"Town"
8.   },
9.   "name":"Paris",
10.   "country":{
11.     "code":"FR",
12.     "type":"Country",
13.     "content":"France"
14.   },
15.   "admin1":{
16.     "code":"",
17.     "type":"Region",
18.     "content":"Ile-de-France"
19.   },
20.   "admin2":{
21.     "code":"FR-75",
22.     "type":"Department",
23.     "content":"Paris"
24.   },
25.   "admin3":null,
26.   "locality1":{
27.     "type":"Town",
28.     "content":"Paris"
29.   },
30.   "locality2":null,
31.   "postal":null,
32.   "centroid":{
33.     "latitude":"48.856918",
34.     "longitude":"2.341210"
35.   },
36.   "boundingBox":{
37.     "southWest":{
38.       "latitude":"48.658291",
39.       "longitude":"2.086790"
40.     },
41.     "northEast":{
42.       "latitude":"49.046940",
43.       "longitude":"2.637910" 
44.     }
45.   }
46. }

Other uses:

This gets the name and the country of a lat/lon pair:

1. yqlgeo.get(33.748,-84.393,function(o){
2.   alert(o.place.name + ',' + o.place.country.content);
3. })

This finds the visitor's location (on W3C geo API enabled browsers it asks them to share it - otherwise it detects the IP and locates this one on the planet)

1. yqlgeo.get('visitor',function(o){
2.   alert(o.place.name + ',' + o.place.country.content + 
3.         ' (' + o.place.centroid.latitude + ',' +
4.                o.place.centroid.longitude + ')'
5.         );
6. });

Read all about it on my blog and enjoy!

Erik Dahlström and Vincent Hardy have put together a cool website, called SVG Wow!, that showcases SVG doing things you didn't expect SVG can do:

There are alot of unique demos on there.

One of my favorites uses SVG, HTML5 Audio, Web Fonts, and YUI to play music accompanied by flying animated lyrics (Chrome and Safari only):

There are lots of other great samples for you to play with and study!

The Ext JS team have announced the 3.2 beta which includes new components and goodness.

Take the animated DataView transitions for example:

On top of that, the release includes:

• Multiple sorting and filtering on Ext.data.Store
• Composite Fields
• Slider improvements
• Toolbar plugins: ToolbarReorderer and ToolbarDroppable
• New Accessibility Theme: compliant with Section 508 of the Disabilities Act.
• Quality Assurance: Unit Testing: over 180 bug fixes and enhancements over 3.1

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)

Last week, Yahoo! JavaScript architect Douglas Crockford delivered the fourth installment of his Crockford on JavaScript series:

1. Volume One: The Early Years
2. Chapter 2: And Then There Was JavaScript
3. Act III: Function the Ultimate
4. Episode IV: The Metamorphosis of Ajax
5. Part V: The End of All Things (March 31 — RSVP)

In this session, Douglas tackles the DOM. On the one hand there was JavaScript, he says, and JavaScript is “what made the browser work.”

On the other hand, there was the Document Object Model, also known affectionately as the DOM. It is what most people hate when they say they hate JavaScript. Most of the people who say they hate JavaScript don’t know JavaScript, might have never seen JavaScript, but they’ve felt the DOM alright. If you don’t know what the difference is and you say, “JavaScript is the stupidest thing I’ve ever seen,” you’re not talking about JavaScript, you’re talking about the DOM. The DOM is the browser’s API. It is the interface. It provides JavaScript for manipulating documents.

The DOM may be imperfect, but it’s nonetheless crucial to what frontend engineers do when they write web applications. In this talk, Douglas provides an overview, situated historically, of where the DOM came from, how it achieved ascendance with Ajax, and what the future might hold. In Douglas’s inimitable fashion, this history starts with Sir John Harrington and takes us up to the present day. A few choice words for CSS are among the many applause lines for veteran developers:

I find within the community of people who use CSS great affection for it. They’re totally invested in CSS, they love it. They can’t imagine any other way of doing formatting in a document. It’s it. It’s sort of like watching an episode of Cops where the cops come in and break up the family dispute, and there’s this “CSS ain’t bad, you just don’t understand it like I do. I know it hurts me, but I make mistakes, I’m wrong.” CSS is awful, and it amazes me the way people get invested in it. It’s like once you figure it out, kind of go “oh, OK, I see how I might be able to make it work,” then you flip from hating it to loving it, and despising anybody who hasn’t gone through what you’ve gone through. It doesn’t make sense to me.

If the video embed below doesn’t show up correctly in your RSS reader of choice, be sure to click through to watch the high-resolution version of the video on YUI Theater.

• Download HD video (480p ~720MB)
• Download video (m4v)
• Download slides
• A high-resolution, transcripted version of this talk is available on the YUI Theater site

• Douglas Crockford: Crockford on JavaScript — Act III: Function the Ultimate — Yahoo!’s JavaScript architect Douglas Crockford continues his lecture series on the JavaScript programming language with a discussion of functions in JavaScript. ‘Functions are the very best part of JavaScript,’ Crockford says. ‘It’s where the power is, it’s where the beauty is.’ Watch the video to learn why.
• Douglas Crockford: Crockford on JavaScript — Chapter 2: And Then There Was JavaScript — Yahoo!’s JavaScript architect Douglas Crockford surveys the features of the JavaScript programming language.
• Douglas Crockford: Crockford on JavaScript — Volume 1: The Early Years — Douglas Crockford puts the JavaScript programming language in its proper historical context, tracing the language’s structure and conventions (and some of its quirks) back to their roots in the early decades of computer science.
• Christian Heilmann: YQL and YUI: Building Blocks for Quick Applications — The Yahoo! Developer Network’s international evangelist Christian Heilmann discusses his philosophy for creating fast, powerful, compelling applications using the Yahoo Query Language (YQL) and the Yahoo User Interface Library (YUI).

• YUI Theater RSS feed
• YUI Theater on iTunes

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:

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:

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....

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.

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:

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.