Posted on 15 August 2008.
Henri Sivonon has taken Hixie’s Live DOM Viewer, and is now running the Validator.nu HTML Parser within it, using GWT 1.5 RC2, which fixed a bug to do with JavaScript in hosted mode.
Simply open the tool and put in some markup and see the puppy run. Below is an example that I saw on Sam Ruby’s blog.

Posted in Web 2.0
Posted on 15 August 2008.
AppJet, the server side JavaScript Y Combinator startup, has been improving all the time, including these new updates which allow for better database work:
JAVASCRIPT:
-
-
storage.threads
-
.sortBy('-timestamp') //sort first so we skip the right ones
-
.skip(start)
-
.limit(items)
-
.forEach(function(thread){
-
printp(thread.text)
-
})
-
Also, they just released a bunch of tutorials that cover JavaScript and HTML using an app that that they wrote on their engine itself.
For example, this will fire up an in-browser test area that you can tweak and play with to see what happens in real-time in front of your eyes.
Posted in Web 2.0
Posted on 14 August 2008.
YUI 3 has a preview release for us to check out.
The goals are:
- lighter (less K-weight on the wire and on the page for most uses)
- faster (fewer http requests, less code to write and compile, more efficient code)
- more consistent (common naming, event signatures, and widget APIs throughout the library)
- more powerful (do more with less implementation code)
- more securable (safer and easier to expose to multiple developers working in the same environment; easier to run under systems like Caja or ADsafe)
What's New
- Sandboxing: Each YUI instance on the page can be self-contained, protected and limited (
YUI().use()). This segregates it from other YUI instances, tailors the functionality to your specific needs, and lets different versions of YUI play nicely together.
- Modularity: YUI 3 is architected to use smaller modular pieces, giving you fine-grained control over what functionality you put on the page. If you simply want to make something draggable, you can include the
dd-drag submodule, which is a small subset of the Drag & Drop Utility.
- Self-completing: As long as the basic YUI seed file is in place, you can make use of any functionality in the library. Tell YUI what modules you want to use, tie that to your implementation code, and YUI will bring in all necessary dependencies in a single HTTP request before executing your code.
- Selectors: Elements are targeted using intuitive CSS selector idioms, making it easy to grab an element or a group of elements whenever you’re performing an operation.
- Custom Events++: Custom Events are even more powerful in YUI 3.0, with support for bubbling, stopping propagation, assigning/preventing default behaviors, and more. In fact, the Custom Event engine provides a common interface for DOM and API events in YUI 3.0, creating a consistent idiom for all kinds of event-driven work.
- Nodes and NodeLists: Element references in YUI 3.0 are mediated by Node and NodeList facades. Not only does this make implementation code more expressive (
Y.Node.get("#main ul li").addClass("foo");), it makes it easier to normalize differences in browser behavior (Y.Node.get("#promo").setStyle("opacity", .5);).
- Chaining: We’ve paid attention throughout the new architecture to the return values of methods and constructors, allowing for a more compressed chaining syntax in implementation code.
Some example snippets
JAVASCRIPT:
-
-
// Creates a YUI instance with the node module (and any dependencies) and adds the class "enabled" to the element with the id of "demo".
-
YUI().use('node', function(Y) {
-
Y.get('#demo').addClass('enabled');
-
});
-
-
// Creates an instance of YUI with basic drag functionality (a subset of the dd module), and makes the element with the id of "demo" draggable.
-
YUI().use('dd-drag', function(Y) {
-
var dd = new Y.DD.Drag({
-
node: '#demo'
-
});
-
});
-
-
// Adds the class "enabled" to the all elements with the className "demo".
-
Y.all('.demo').addClass('enabled');
-
-
// Sets the title attribute of all elements with the className "demo" and removes the class "disabled" from each.
-
Y.all('.demo').set('title', 'Ready!').removeClass('disabled');
-
-
// Adds the Drag plugin to the element with the id "demo", and enables all of its h2 children drag as handles.
-
Y.get('#demo').plug(Y.Plugin.Drag, {
-
handles: 'h2'
-
});
-
-
// Attaches a DOM event listener to all anchor elements that are children of the element with the id "demo". The event handler prevents the anchor from navigating and then sets a value for the innerHTML of the first em element of the clicked anchor.
-
Y.on('click', function(e) {
-
e.preventDefault();
-
e.target.query('em').set('innerHTML', 'clicked');
-
}, '#demo a');
-
Very exciting stuff to the team. I look forward to seeing a full up code repository too!
Posted in Web 2.0
Posted on 14 August 2008.
Aaron Newton has relaunched clientside.cnet.com with a cleaner, leaner, look and feel. The news for the launch is:
- The Mootorial (the MooTools tutorial) is now updated for MooTools 1.2 and on it's own domain www.mootorial.com
- The wikiTorials(tm! - not really) for all of CNET's codebase have been updated for our updated 1.2 code (which launched in June)
- The MooTools book (Apress) is available for sale! You can get the PDF today, and you can pre-order the paper back which should ship in just a few days time.
Posted in Web 2.0
Posted on 14 August 2008.
Mark Pilgrim has released his second This Week in HTML 5 episode that covers window.navigator, a new Worker, talk on alt, and more.
Navigator standardization
The navigator attribute of the Window interface must return an instance of the Navigator interface, which represents the identity and state of the user agent (the client), and allows Web pages to register themselves as potential protocol and content handlers.
Currently, HTML 5 defines four properties and two methods:
appName
appVersion
platform
userAgent
registerProtocolHandler
registerContentHandler
This is only a subset of navigator properties and methods that browsers already support. See Navigator Object on Google Doctype for complete browser compatibility information.
More content-language's
Content-Language. No, not the HTTP header, not even the <html lang> attribute, but the <meta> tag! As reported by Henri Sivonen,
It seems that some authoring tools and authors use <meta http-equiv='content-language' content='languagetag'> instead of <html lang='languagetag'>.
This led to revision 2057, which defines the <meta> http-equiv="Content-Language"> directive and its relationship with lang, xml:lang, and the Content-Language HTTP header.
In the continuing saga of the alt attribute, the new syntax for alternate text of auto-generated images (which I covered in last week's episode) has generated some followup discussion. Philip Taylor is concerned that it will increase complexity for authoring tools; others feel the complexity is worth the cost. James Graham suggested a no-text-equivalent attribute; similar proposals have been discussed before and rejected.
Switching to the new Web Workers specification (which I also covered last week), Aaron Boodman (one of the developers of Gears) posted his initial feedback. This kicked off a long discussion and led to the creation of the Worker object.
Posted in Web 2.0
Posted on 14 August 2008.
John Resig is working on the Secrets of the JavaScript Ninja book, which I am sure will be a success.
Manning has been kind enough to give us a sneak peak at some of the chapters:
How closures work
This content introduces the closure, an important aspect of JavaScript, and describes its use. It goes into detail on making private data, and dealing with callbacks and timers.
Using (function(){})()
Next up introduces the construct (function(){})() and describes its use in relationship to closures. See how you can create encapsulated temporary scopes.
Instantiation and Prototypes
This section introduces the technique of instantiating a function to give its prototype property functionality.
Class-like Code
And finally we are introduced to the technique of emulating classical-style inheritance in JavaScript.
Posted in Web 2.0
Posted on 14 August 2008.
JavaScript: How to make cool hint or tooltip
Realy useful thing. No hints - no money. :
Source code:
money