The Yahoo! YUI is an incredibly feature-rich JavaScript library with a LOT of functionality but getting your head around all of those features can be tough. The YUI team wants to help developers get up and running more quickly and announced yesterday the release of SimpleYUI; a basic and more streamlined version of the YUI library.

SimpleYUI will contain basic DOM access and manipulation including support for CSS 3 selectors in the selector engine, animations via the new transition module, the event system, Ajax and JSON support.

The great thing is that when you're ready to leverage more advanced features like managed attributes and custom events, you still have the ability to do on-demand loading just like you'd expect from the full-featured version of YUI. This includes any YUI 2 or 3 component or YUI 3 Gallery module.

YUI team member Eric Miraglia put up a nice post about SimpleYUI which shows you some of the goodness include.

Josh Duck has put together a fun and useful list of the 104 elements currently in the HTML5 working draft but organized like a periodic table of elements:

When you click on one of the tags more information appears:

Who says chemistry can’t be fun?

[via Jackson Harper]

By Dion Almaer
webOS 2.0 SDK has just launched, and it has node.js built in (and more). The following is taken from my personal blog

At our last Palm Developer Day, Ben and I discussed future APIs for webOS including “JavaScript services” as a way to write code that runs on the other side of the device service bus using JavaScript.

If you think about it, node delivers a services platform for the cloud, so is there a way that we could work together? We got together with Ryan Dahl of Node to try this out, and it turns out that node works fantastically well on a mobile device! Major kudos should go to the V8 team for creating a great VM and to Ryan for writing efficient code that scaled down from the cloud to the device.

Today we announce that node is part of webOS 2.0:

The popular Node.js runtime environment is built into webOS 2.0, which means that you can now develop not just webOS apps but also services in JavaScript. The active Node ecosystem is on hand to provide community support and a rapidly growing library of modules that you can use in your webOS services.

Besides powering the new Synergy APIs, JavaScript services strengthen webOS’s support for background processing and add new capabilities—like low-level networking, file system access, and binary data processing—to the web technology stack.

I am really excited about this move for us. The node community is top class. I get to see this time and time again, most recently over the weekend and this week as I judge the node knockout. There is magic in the air with Node. It feels like the Rails days. I remember being so happy to jump to Rails and get away from the heavy world of Enterprise Java. It was a breath of fresh air to not have to argue with folks about every piece of the stack. “What about JSF with HiveMind and Commons-Logging and ….” Argh! Too. Much. Choice. And, a logging abstraction above Log4J was hilarious :)

Node is low level, yet simple. It is more like Sinatra than Rails. The event-based opinions keep you in good stead, and with cloud solutions such as Heroku and no.de you have great deployment stories, unlike Rails back in the day.

If you check out the modules that are growing daily, and the fun real-time hacks from the knockout you will get a good feel for node.

It feels great to have webOS as the first mobile device that embeds node. With db8 we offer a JSON store than can sync to the cloud (e.g. sync with CouchDB). This stack is starting to look pretty great.

I stumbled on the Mozilla Foundation’s Drumbeat project recently:

Drumbeat gathers smart, creative people like you around big ideas, practical projects and local events that improve the open web.

It’s very well done combination of projects + community.

Drumbeat Toronto Meetup

There’s a whole slew of cool projects already one here. A small sample:

Last Friday, the “final” two episodes of Mastering jQuery went live: Using Custom Events and Upgrading to jQuery 1.4. While we’ll almost certainly add another episode when jQuery 1.5 is released, we’ve covered what we set out to.

Weighing in at nearly six hours of video, we covered a wide range of content, and have had overwhelmingly positive feedback on the series. I hope you’ve enjoyed the episodes as much as we’ve enjoyed recording them.

I want to thank those of you who helped promote Mastering jQuery through Twitter, word of mouth, and other avenues. It became one of the most viewed series on TekPub, and that couldn’t have happened without your help and support.

Ask the Expert with Dave Ward

With Mastering jQuery wrapped up, we’ve begun a new series in a format that’s entirely different than anything else currently on TekPub.

In this new format, you’re the boss.

Instead of James and I dictating the agenda of this series, we’re going to let you suggest and vote on the topics that you’d most like to see covered. Each week or two, we’ll pick one of the highest voted topics and produce an entire episode covering it in detail.

The goal of this series is to cover specific, scenario-based “How Do I?” questions. For example, the first episode covers a question I‘ve been asked dozens of times: how to asynchronously update a server-generated image during an AJAX request. The idea is that these topics should be specific enough that we can create a concrete example and cover it in about 30-60 minutes.

Rock the Vote

Not only are you in charge of what topics we cover, but if one of your suggestions is selected then you’ll get free access to the entire series.

Before you start submitting topics, a few general guidelines:

• Avoid subjective or abstract topics. While some very good discussions fall under that umbrella, most of them won’t make very good video tutorials.
• Do suggest topics specific enough that we can build a concrete example to show you and cover the relevant parts of it in an hour or less.
  • Bad: “How do I build a Facebook clone?”
  • Good: “How do I implement the infinite scroll pattern?”
• Stay within the general vicinity of web development (i.e. HTML, CSS, JavaScript, ASP.NET, jQuery, and the like). If I had to do an episode on low-level database optimization, I can guarantee that you would be disappointed.

You can submit your topic suggestions and vote on existing ones at vote.tekpub.com. We’re looking forward to seeing what you come up with!

You've been reading Announcing my new TekPub series, where you call the shots, originally posted at Encosia. I hope you enjoyed it, and thanks for reading.

Related posts:

1. Mastering jQuery now available at TekPub
2. I’m giving away 10 free months of TekPub this week
3. Hear me talk jQuery and ASP.NET on the jQuery Podcast

Google Rich Snippet
Oli Studholme has an excellent new article on HTML5 Doctor on the different ways HTML5 can be extended with things like microformats, the link tag, and more. Why would you want to do this?

While HTML5 has a bunch of semantic elements, including new ones like <article> and <nav>, sometimes there just isn’t an element with the right meaning. What we want are ways to extend what we’ve got, to add extra semantics that are machine-readable — data that a browser, script, or robot can use.

First, he starts with the options HTML4 gave us and what options we now have with HTML5:

There were five fundamental ways we could extend HTML 4:

• <meta> element
• class attribute
• rel attribute
• rev attribute
• profile attribute

In HTML5, rev has fallen by the wayside, becoming obsolete since hardly anyone used it correctly, and because it can be replaced by rel. profile is also obsolete, and there is no support for namespaces in HTML5. However,<meta>, class, and rel are all in HTML5. In fact, <meta> now has spec-defined names and a way to submit newname values, and rel has several new link types defined in the HTML5 specification and a way to submit more too.

Even better, WAI-ARIA’s role and aria-* attributes are allowed in HTML5, and HTML5 validators can check HTML5+ ARIA. Other new methods of extending HTML5 include custom data attributes (data-*), microdata, and RDFa. Guest doctor Chris Bewick introduced us to HTML5’s new data-* attribute system, which is perfect for adding private custom data for JavaScript, and we’ll no doubt meet microdata and RDFa sooner or later.

Finally there are microformats. As Dr. Bruce touched on microformats in his article on the <time> element, let’s delve a little deeper into what microformats are and how to use them in HTML5.

Oli then does a great deep dive of microformats, going over the different ones defined by the community to date (there are 33 microformat specifications!) and covering some of the common patterns that you can use if you need to roll your own microformat. If you’ve been wondering how to use things like hCard, hCalendar, XHTML Friends Network (XFN), etc. in your own systems then definitely give this article a gander.

[via John Allsop]

Dmitry Baranovskiy and team have released another version of Raphaël, an excellent drawing and animation library backed by SVG (VML on Internet Explorer). New features in Raphaël 1.5 include custom attributes and keyframes. Keyframes can be defined similar to CSS3 Animations:

Check out a demo of the new keyframe animation.

Custom attributes is also a new feature that makes it easier to do things like animating a portion of an attribute segment (demo).

Full release notes:

• fixed IE8 issue with the HTML element named Raphael
• fixed precision for arcs in IE
• added caching to getPointAtSegmentLength function
• added ability to do more than one animation of an element at the same time
• added "cubic-bezier()" as an easing method
• added new syntax for animation (keyframes)
• hsl2rgb now accept h as degree (0..360), s and b as % (0..100)
• show="new" instead of target="blank" for SVG
• added angle method
• added snapTo method
• cached popup || activeX for IE
• fixed insertAfter
• fixed timeouts for animation
• added customAttributes

BTW I just noticed that Dmitry is now at Sencha; they're assembling quite the team! Congrats Dmitry!

The SVG Web team has announced a new release. SVG Web is a drop in JavaScript library that makes it easy to display SVG graphics on Internet Explorer 6, 7, and 8 using Flash.

The new SVG Web release, like all of their releases, is named after especially silly D&D monsters. The new release is code named Owlephant:

You’ve heard of Elephants, you’ve heard of Owls… put them together and you get the fearsome Owlephant. If you encounter one, be sure it will be the last thing you ever, um, encounter. Hoot…. stomp!

With this release SVG Web now scores 55.45% on the SVG compatibility charts, almost at the same level as IE 9 (58%).

Major aspects of this new release includes overhauls and fixes for gradients, clipping, events, text placement, and more. It also includes a huge step forward in SMIL animation support, including being able to animate path segments and interpolate their values, scripting SMIL with JavaScript, and more.

This release has been built by the community, with major contributions from Bruce Duncan from VisualMining.com; Ken Stacey from SVGMaker.com; and the always awesome (and project co-leader) Rick Masters. Thanks to the many people like Michael Neutze, Bruce Rindahl, and more for their bug testing and evangelism!

Everything fixed in this release:

• Issue 471 : Radial gradient different between Flash and Native renders
• Issue 349 : gradients with bounding box cooordinates are positioned wrongly on circles
• Issue 475 : ‘this’ not getting set correctly in SVG element event callback
• Issue 477 : The change in the size of the ClipPath area is not reflected by Flash Renderer.
• Issue 483 : Changing gradient stop does not trigger redraw of referencing elements
• Issue 484 : Dynamic clip-path attribute changes are not reflected.
• Issue 476 : set Element Problems and numerous SMIL issues
• Issue 489 : Support beginElement() for animation elements
• Issue 494 : SVGTextNode.onDrawGlyph not removing glyph clones
• Issue 495 : Support units-per-em on SVG fonts
• Issue 492 : ‘button’ property missing in mouse event object
• Issue 472 : get svg.js even more compressed with Google’s closure compiler (30K reduction)
• Issue 499 : Object loaded svg with scripts not firing window load or SVGLoad event
• Issue 488 : Updating styles via Javascript does not visibly update child nodes in IE/Flash
• Issue 496 : Support exponents in path values
• Issue 502 : Radial Gradient userSpaceOnUse Matrix calculated incorrectly
• Issue 503 : Radial Gradient focalLen not used for stroke
• Issue 504 : Radial Gradient userSpaceOnUse Matrix calculated incorrectly for SVGCircle and SVGEllipse nodes
• Issue 497 : bad ‘target’ when click on text node
• Issue 342 : Event handler fires only after second mouse click.
• Issue 507 : Namespaced elements not allowed until svg element added to page
• Issue 158: Rotated text not rendering for native fonts (Mostly Fixed)
• Issue 467 : Namespace exception loading video example in IE8
• Issue 510 : Font Family not used when surrounded by single quotes in Flash 10.1
• Issue 57 : SVG default fill-rule ‘nonzero’ not supported by flash 9
• Issue 123 : Nested svg elements don’t show up in the DOM correctly
• Issue 145: dynamically creating SMIL elements and attributes
• Issue 356 : Show SVG Web Release Name and Revision in Right Click Menu
• Issue 513 : getElementsByTagNameNS returning text nodes
• Issue 515 : Call handleEvent on EventListener objects passed to addEventListener
• Issue 517 : Elements with fill set to ‘none’ should produce mouse events but do not
• Issue 518 : Avoid redraw on change to pointer-events attribute
• Issue 523 : Event listener from object element may be applied to svg element erroneously
• Issue 522 : Need way to create element with self declared namespace
• Issue 525 : Image element not respecting display=’none’
• Issue 524 : Jquery $(window).scroll event will not fire
• Issue 527 : Excessive messages for detached event listeners
• Issue 528 : Exception if remove event listener from detached element, then add to document
• Issue 321 : Support for animating path ‘d’ attribute (and interpolate between values)
• Issue 514 : clip-path not used when part of style attribute value
• Issue 526 : Object using clip path cannot have its opacity animated
• Issue 535 : Nested svg disappears when animated
• Issue 536 : Problems tracking whether elements attached to document or not
• Issue 537 : Animation added in onload listener does not initialize
• Issue 538 : Node removed while invalid causes endless frame listening
• Issue 539 : Animation with invalid or forward href causes exception
• Issue 540 : script stack space quota is exhausted by large svg file
• Issue 511 : Keyboard events are not supported properly

Download the release now and get started!

Please note that there are some breaking changes in this release that will affect code that uses older versions of SVG Web; more details here. Also note that SVG Web does not yet support the native SVG functionality in IE 9 preview releases.

[Disclosure: I'm a member of the SVG Web team]

Last week, Ralph Whitbeck was kind enough to have me as a guest on episode #32 of the jQuery Podcast. We spoke about topics including:

• Research I’ve done on the public CDNs that host jQuery, and why it matters which one you choose
• Why you should never use a "latest version" reference to scripts on those public CDNs
• The drawbacks of always waiting on $(document).ready()
• My video tutorial series, Mastering jQuery

I really enjoyed talking with Ralph, and I think the episode turned out great. You can listen to it at: http://podcast.jquery.com/2010/08/27/episode-32-dave-ward/

You've been reading Hear me talk jQuery and ASP.NET on the jQuery Podcast, originally posted at Encosia. I hope you enjoyed it, and thanks for reading.

Related posts:

1. Hear me talk about jQuery on the Polymorphic Podcast
2. Mastering jQuery now available at TekPub
3. Alt.NET Podcast – jQuery in ASP.NET

Perfect for a Monday is a cool 3D model editor built using the Canvas tag and created by Jayesh Salvi: