HTML5 Reset (by Monkeydo) and HTML5 Boilerplate (Paul Irish & Divya Manian) are new HTML5 project skeletons. If you’re about to start a new HTML5 site, you can reach for one of these all-in-one kits that include everything you need to write great, forward-looking code, while still maintaining support for legacy browsers.

HTML5 Reset and HTML5 Boilerplate have a heck of a lot in common. To name just a few: Both tools give you a standard directory structure for your project assets; Both include Modernizr to add support for HTML5 elements in browsers that don’t support them natively; And both have reset stylesheets to zero out browser differences.

Of the two offerings, HTML5 Reset is the more stripped down. Indeed, it even comes in both “bare bones” and “kitchen sink” flavors.

Both libraries do include jQuery by default, which strikes me as a little unnecessary, even though I understand the reasoning behind its inclusion. However, there’s nothing preventing you from using your library of choice (or no library at all) in either case.

Still, there are some interesting things in HTML5 Boilerplate that aren’t in HTML5 Reset. Boilerplate’s .htaccess file has some handy tricks for correctly serving SVG & webfonts, as well as ensuring that newer IEs won’t default to the older rendering engine. Also, the script that adds PNG support to IE6 is a new one to me. It’s very ingenious, and one I’ll probably use outside of the Boilerplate.

Even if you don’t end up using either of these project skeletons as-is, or at all, you should definitely take a look at both of them to see what you can steal from them.

Choco

Choco is a new client-side MVC framework. Unlike other such frameworks like Sproutcore or Cappuccino that have robust DSLs or even whole languages baked in to them, Choco lets you develop with, more or less, the same old HTML/CSS/Javascript you’ve been using all along. A lot of Choco looks fairly Rails-y (the directory structure, the command-line generators, among other features) but the overall experience still strives to be that of plain old web development.

Under the hood, Choco uses JS-Model for its model layer which is very cool, though it still doesn’t handle persistence. Also, Sammy does a lot of the heavy lifting in the controllers and on routing.

As awesome as Sproutcore & Cappuccino are, it’s pretty refreshing to see an approach that still looks a lot like the kind of web development we’re all used to. Kudos to the Choco team for a nice little tool.

Smoothie

Smoothie is a very slick new data visualization tool. However, Smoothie differs from the host of charting & graphing tools out there in that it’s built to handle live streaming data. It smoothly animates its graphs in real-time when new data arrives. Very cool stuff, and well worth taking a look at.

Tim Caswell and TJ Holowaychuck, both of whom are members of the ExtJS team, have just released Connect: a middleware framework for NodeJS. In his blog post announcing Connect, Caswell cites Ruby’s Rack as an inspiration for the project.

A Connect server runs a set of middleware modules, each of which performs a specific action when it receives a particular type of message. When a request comes in to the server, each module in turn will see if it can do anything with the request and then pass it to the next module in the stack. The process is repeated in reverse with the server’s response on the way out.

Connect ships with a several stock modules that handle tasks such as authentication, logging, routing, serving static files, and even automatically generating CSS from SaSS stylesheets.

An important thing to understand about Connect is that it is not a web application framework in the traditional sense. You might, however, think of Connect as being a toolkit on which to base a web application framework. I’d wager that we’ll see several such frameworks built for Node using Connect in the coming months.

This is a really exciting project, and it has the potential to really change how the Node community builds applications. Big congratulations to Tim and TJ on this release.

Wu.js

Another functional programming-inspired Javascript library? Heck yeah! Wu.js takes the ball from other functional libraries (such as underscore.js and Functional.js) and carries it even further in following the functional paradigm.

In addition to all of the tropes that many of the functional libraries implement (currying, map/reduce, etc.), Wu has a rich set of iterator methods that give you several interesting permutations on the standard map/reduce patterns. Even better, Wu’s iterators are lazy, so you can go ahead and create one, but any code that it contains will only be executed when you want a value from it.

Seriously, I love this stuff. As long as people keep writing libraries like this, I’ll keep writing about them.

New blogs!

A couple of new blogs have popped up recently that should be of interest to JSMag readers. Badass Javascript showcases the kind of over-the-top awesome work that you’d expect to see on a blog with that name. Personally, I’m pretty partial to the post on the line-breaking algorithm.

Another great new resource is Microsoft’s ScriptJunkie. This site focuses more on tutorials & exposition than news, per se. They’ve already got some great content up, so definitely head over and check it out.

TXJS

Lastly, just a quick note of congratulation to Rebecca Murphey and the YayQuery team for putting on TXJS last weekend. I wasn’t able to go, but based on the tweets I was jealously reading, it seems like it was a great event. A lot of the speakers have posted their slides, so even if you weren’t there, you can still get something from the event. I’m saying this from experience, since Connect & Wu.js were both announced and/or promoted at TXJS.

Yes, it’s true! You can now run Javascript applications on Google’s App Engine platform thanks to the new AppengineJS project. The project is based on Rhino, the Java-based Javascript runtime, which is why it can run on Google’s Java- and Python-only platform. Of course, since Rhino has been around forever, simply executing Javascript on App Engine’s servers isn’t a new idea (RingoJS is server-side Javascript platform that runs on App Engine). Where AppengineJS stands out is in giving you easy access to many of the App Engine API’s (e.g. storage, memcache, OAuth, etc.). The library wraps the Python APIs to make them more friendly to Javascript developers.

Under the hood, AppengineJS uses the NitroJS library, which brings support for JSGI and CommonJS modules along with it. This gives you a huge amount of power & flexibility in how you build your server applications.

This is a really great set of tools. If you’ve been looking into ways of hosting server-side Javascript applications in the cloud, you really owe it to yourself to check out AppengineJS.

Tracer

Angus Croll of the javascript, Javascript blog has created a small but impressive tracer utility that tracks when a method is called and how long that method takes to execute. Just provide an object to the utility’s traceAll method, and whenever one of that object’s methods is called, the method name will be printed to the console along with its execution time. It’s a small (~50 lines) but ingenious bit of Javascript metaprogramming that feels like it could have all sorts of uses.

Souders on Frontend SPOF

Steve Souders, the frontend performance guru posted an extremely useful article on his blog regarding frontend SPOF (single point of failure). He looks at several kinds of resources that can interrupt pages loading and/or rendering, as well as workarounds to prevent such blocking. For instance, we all know that scripts should be loaded asynchronously so as to allow the page to render. However, Souders also looks into less-well-known points of failure, such as embedded fonts (Souders says it’s best to declare your @font-face rules inline).

As with everything Souders writes, this article is definitely worth a read.

SQLike

SQLike is a new library for creating SQL-like in-memory datastores in Javascript. Once you create a SQLike table (with data from the client or from the server via Ajax), you execute queries on it that return Javascript objects. As an added bonus, the code works just as well in ActionScript (if you happen to swing that way).

Of course, besides the ActionScript support, there’s nothing you can do with SQLike that you can’t do with native HTML5 SQL databases, but those aren’t universally supported yet. So rather than falling back on Google Gears, which has been mothballed, for SQL storage, you could fall back on SQLike. You would lose the real persistence you get from the native database, but in some cases that might be acceptable.

Node.Net

Hey, you know what’s awesome? NodeJS. Unfortunately, developers on WIndows machines have just had to take *nix-users’ word for it… until now! The new Node.Net project is a new NodeJS implementation that runs (perhaps unsuprisingly) on the .Net platform. The implementation is a long way from complete, but Windows users who have been itching to see what all of the fuss is about regarding Node might not care.

There have been several handy tutorials released lately, and I thought it might be useful to collect a few of them here.

• Ben Lister’s blog post, Getting Started with HTML5 Local Databases, is a clear, thorough introduction to client-side SQLite databases. The definitive resource is still Apple’s client-side storage reference, but Lister’s article is probably an easier place to start, if you’re completely new to client-side databases.
• Using CSS3 Transitions, Transforms and Animation is a truly fantastic roundup of all of the various animation and transformation properties and functions that are available in CSS3. The site features tons of examples that should be a tremendous help while you sort out the reasonably complicated syntax of some of these properties. This one is definitely worth a bookmark.
• HOWTO: Unobtrusive JavaScript with Rails 3 is a great article on the Rails Inside blog on how to swap out the Prototype-based unobtrusive Javascript helpers for the official jQuery version managed by the Rails team.
• It was just a couple of weeks ago that we last checked in on DailyJS’s “Let’s Make a Framework” series. This week, they’ve got another handy post on how to handle cross-domain Ajax requests with JSON-P. JSON-P is technique that’s usually used for consuming JSON data from APIs on a different domain from the one issuing the request. If this tool isn’t in your utility belt, definitely check out this article.
• Speaking of cross-domain Ajax, the intrepid Nicholas Zakas has a super-handy introduction to browser-native cross-domain Ajax via Cross-Origin Resource Sharing (CORS). CORS is actually pretty well supported among modern browsers, but for whatever reason, it hasn’t seen a lot of discussion or use by the web development community. Here’s hoping Zakas’s introduction can go towards changing that.

Akshell

Akshell is a nifty new tool for creating and hosting Javascript applications. It’s a lot like Heroku’s recently announced support for Node.js, although instead of Node, you build apps in a scratch-built Javascript MVC framework.

Akshell provides a number of useful resources for building web apps. It includes its own template library, and even offers database support. Further, it uses CommonJS-like modules for organizing code (the Akshell core engine is such a module).

Honestly, there might not be a ton of practical uses for a site like Akshell, where you have to learn yet another server-side Javascript framework (and one that’s only usable on the Akshell site). However, a lot of really solid work went into building this impressive tool, and it’s totally worth taking a minute to poke around the admin interface and read through the documentation.

Experiments with Audio

Experiments with Audio is a series of articles on the Bread and Circuits blog that covers innovations in web audio. The most recent post in the series covers some truly amazing work being done in processing audio in the browser. There are tons of mind-blowingly cool examples, but the thing that really floored me was the Javascript text-to-speech implementation. Imagine if sites were able to offer full, custom text-to-speech rendering of their content to any user-agent without needing a screen reader. Just great stuff.

RequireJS 0.11.0

It’s no secret that I’m a big fan of RequireJS, the non-blocking, asynchronous dependency manager/build tool for Javascript. Well, with the brand new 0.11.0 release, it’s even better. It’s now totally Caja compliant, so the security should be airtight, and you can now even name a JSON-P source as a dependency (I’m in love with this feature). There are more new goodies, so take a look a the release notes if you’re interested.

Probably the most notable aspect of the new release though, is that the the tool’s creator, James Burke, now feels Require meets the requirements that John Resig outlined for a .require() method in jQuery. Burke is making a strong case for integrating Require with jQuery.

Require was already a great tool, and it keeps getting better with every release. If you haven’t yet looked into it, now is the time to do so.

Understanding Node.js

There’s a growing consensus that Node.js is going to be huge (if it isn’t already). Unfortunately, some of the concepts on which Node is built aren’t the most straightforward (at least not at first glance). If you want to write great Node apps, you really have to get its conceptual underpinnings straight in your head. Fortunately, the Debuggable blog has an excellent post on understanding Node. The post takes a very high level look at what Node does and explains its fundamental concepts (evented programming, queues, etc.) in an extremely accessible fashion. If you’re an old hand at Node, it probably comes off as basic. But if you’ve been struggling to wrap you brain around Node, or just haven’t yet had time to dive in, I highly recommend giving this piece a read-through.

Speaking of Node, Heroku just announced experimental support for Node deployments on their servers. I haven’t looked into this yet, but if it’s as awesome as their Rails & Sinatra hosting, it’s going to be a tremendous resource.

Also, while we’re on the subject of learning Node, the YUI blog just posted the video of Node creator Ryan Dahl’s talk at the most recent Bayjax.

Fab

Okay, more Node stuff. Sue me. Fab is a new web framework for Node, but it’s wholly unlike any of the others that are currently available. Just take a look at Fab’s “Hello, world”:

with ( require( "fab" ) ) 

( fab )

  ( listen, 0xFAB )

  ( /^\/hello/ )

    ( tmpl )
      ( "Hello, <%= this %>!" )

    ( /^\/(\w+)$/ )
      ( capture.at, 0 )
      ( "world" )

  ( 404 );

The first thing everyone notices is all of the parentheses. Still, there’s nothing especially Lisp-y about Fab (at least no more than there is with vanilla Javascript). This example just listens on port 4011 (0xFAB). The regex (( /^\/(\w+)$/ )) is the catch-all route for the application.

There’s a heck of a lot you can learn about functional programming in Javascript by studying how fab works. Check out the slides from Fab’s creator Jed Schmidt’s talk at this year’s JSConf for a thorough introduction to the concepts Fab employs.

Garbage Collection

This week, the Ajaxian/WebOS Developer Relations guys linked to a great in-depth article on Palm’s website about garbage collection in Javascript. It goes into a fair amount of detail about how and when GC runs, and also gives some good advice on how to keep GC from running at inopportune times and bogging down your UI.

Historically, Javascript developers have been able to get away with not worrying too much about GC. However, applications are getting more complex and at the same time as they’re running on less capable hardware (read: mobile devices). So as we increasingly ask our Javascript to do more with less, it’s becoming more important to become aware of what’s going on under the hood.

Let’s make a framework

For the last couple of months, the DailyJS blog has been running a series on how to build a Javascript framework from start to finish. Along the way, they’ve covered topics like API design and building a selector engine, along with more process-oriented topics like the most recent post on how to package your library.

There’s a lot of great info in those posts, so you should definitely head over to DailyJS and check out all of their “Let’s make a framework” posts.

Go native with Cappuccino

Recent betas of Atlas, the web-based IDE for Cappuccino development, have included a new feature called NativeHost, that allows you to export your application as a web app or as a cross-platform desktop application.

If you want to actually see what a Cappuccino/NativeHost app looks like, you can check out the brand new interface to Github Issues that was built with Cappuccino on the web or download the native version. Of course, you should also check out what the Cappuccino team has to say about the project, as well.

How to detect everything

Last night/this morning, Mark Pilgrim posted Appendix A of his Dive into HTML5 book. The appendix, titled: THE ALL-IN-ONE ALMOST-ALPHABETICAL NO-BULLSHIT GUIDE TO DETECTING EVERYTHING is an exhaustive list of methods for detecting browser support for HTML5 features with Javascript. Should you be inclined to roll your own feature detection instead of incorporating a library like Modernizr to do it for you, It’s an extremely valuable resource, and well worth bookmarking.

• PHP Architect – http://phparch.com
• MySQL Magazine – http://www.paragon-cs.com/mag/
• GroovyMag – http://groovymag.com
• Python Magazine – http://pythonmagazine.com
• JSMag – http://jsmag.com
• Rails Magazine – http://railsmagazine.com
• The Rubyist – http://therubyist.com
• Java Express – http://dworld.pl/javaexpress (Polish)
• RailsWays – http://it-republik.de/railsway/magazin-ausgaben/Ruby-on-Rails-000281.html (German)
• Rubyist Magazine – http://jp.rubyist.net/magazine/ (Japanese)

I know I have to be missing some other good ones.  What are your favorites?

• What’s new in jQuery 1.3
• Don’t be Alert!
• Unit Testing in JavaScript
• Functional Programming inJavaScript
• Introduction to ExtJS
• and more!

Visit http://jsmag.com/latest for more information