jQuery.Html5form »

HTML5 includes form validation as part of the spec, so once it's fully supported we won't need to use JavaScript to validate form input. Sadly, this is only supported by Webkit browsers at the moment (Safari & Chrome). This plugin addresses the gap for the other major browsers with a single line of code.

PaintbrushJS »

"A lightweight browser-based image processing library".

JavaScript's come a long way. This library provides a wealth of image manipulation capabilities, including tints, blur, noise, sepia and grayscale – all handled by the browser. What a sweet way to ensure you don't have to reprocess your images the next time you redesign your site.

HTML5 Boilerplate »

As noted on the site, this is "the professional badass's base HTML/CSS/JS template for a fast, robust and future-proof site" While I likely won't use this whole, there are some very interesting pieces to this worth using, especially in the style sheet and .htaccess files. I'll likely appropriate many of the concepts for my work.

This is an outstanding contribution to the Web development community by Paul Irish and Divya Manian as well as all of the people whose work they built upon.

How FuncUnit works »

An open source JavaScript web application testing framework that combines Selenium, jQuery, QUnit and Envjs and your debugger of choice (such as Firebug). Looks interesting.

html5shiv »

I didn't realize Google hosts the HTML 5 Shiv in addition to the other JavaScript frameworks that it's kind enough to provide the community. Nice!

If you want to use HTML 5, the shiv is pretty well a requirement as Internet Explorer (up to and including IE 8) doesn't support the new elements in the spec. Plus it's easy to implement and will only be downloaded by the browsers that need it.

boomerang »

"a piece of javascript that you add to your web pages, where it measures the performance of your website from your end user's point of view. It has the ability to send this data back to your server for further analysis. "

jQuery Enlightenment, A Review

jQuery Enlightenment by Cody LindleyA few months ago Cody Lindley asked if I would review his new book, jQuery Enlightenment after he saw me tweet about it. I jumped at the chance, but due to many other projects, this review has seen many delays. My apologies to Cody and to you for not posting this review sooner. That said, I’m very happy to share my thoughts now that time permits and I think you’ll find it useful.

The Short Review

jQuery Enlightenment is great for anyone who has some experience with jQuery and wants to step up their game or is familiar with another JavaScript framework like Prototype or Dojo and wants to ramp up on the increasingly popular jQuery framework. The book is not for complete beginners, but if you have a foundation, you’ll be able to jump right in and learn.

At $15 for the PDF ebook, it’s a no-brainer. Buy a copy.

Two Quick Notes

First: when Cody released this book, jQuery was at 1.3.2. Between then and the time of this writing, jQuery 1.4 has been released. While there are some key differences introduced in 1.4, I don’t think they detract from Cody’s work.

Second: Cody gave me a copy of the book in return for this review. Luckily, I really like the book, so I feel confident in staking my reputation on the recommendation. I’m not receiving any form of affiliate payment for encouraging you to buy the book.

A Longer Review

So, obviously I like it. Here’s why.

It’s Accessible

Cody’s writing style is friendly and he has a knack for transforming complex concepts into understandable knowledge that you can quickly apply. He’s included a wealth of code, even better, he’s posted all the samples on JS Bin for easy access.

Additionally, as the file is a PDF, it is easy to take it with you on your phone, or using my favorite method – DropBox, which maintains the file across multiple machines. Keeping your copy open makes it easy to search for a particular event, effect or method while you’re working.

It Covers What You Need to Know

jQuery Enlightenment starts by explaining core jQuery concepts, quickly moving into more detailed and advanced topics. While I won’t reiterate everything (check out the table of contents on the site), I think it’s important to list some of the key concepts he does cover to show the breadth of the book:

  • Traversing the DOM
  • HTML manipulation, including a chapter on forms
  • Events and Effects
  • AJAX
  • Performance Best Practices
  • Writing a jQuery plugin

Yeah, Cody covers a lot in this book. While I’m by no means an expert, I’m comfortable with jQuery and I learned a lot. For example, I had somehow missed the existence of preventDefault() and stopPropogation(), so I’ve relied on return: false. This works most of the time, but now I know that there’s extra granularity available to me should I need it. Nice.

Oh and don’t miss the gems in Chapter 12 (Miscellaneous Concepts) as he’s thrown in some very useful knowledge there at the end.

Wrapping Up

So, as I noted at the beginning, I think this is a great book and an easy purchase decision if you are familiar with JavaScript and are interested in jQuery.

Grab a Copy and Tell Us What You Think

I’d love to hear your opinion on the book. Would you recommend it too? Let me know in the comments.

SproutCore: Apple’s Flanking Move?

SproutCore LogoI wasn’t all that familiar with Sproutcore, Apple’s JavaScript framework prior to reading this article, but after thinking the arguments over, I think Apple has been flanking the other players in the application marketplace (both online and desktop) for a while. The article Cocoa for Windows + Flash Killer = SproutCore provides some very good reasons for Apple’s moves onto Windows with Safari and other apps; I highly recommend you read it if you’re the least bit interested in development on the Web, the iPhone and/or Rich Internet Applications (RIAs).

Being based on open web standards and being open source itself means SproutCore will enable developers to develop cross platform applications without being tied to either a plugin architecture or its vendor.

Sitting on top of web standards will also make it easy for Apple and the community to push SproutCore ahead without worrying about incompatible changes to the underlying layers of Windows, a significant problem for the old Yellow Box or some new Cocoa analog. SproutCore also lives in a well known security context, preventing worries about unknown holes being opened up by a new runtime layer.

Daniel Eran Dilger – Roughly Drafted

These developments are exciting for oru industry, but also for the world as a whole – a solid platform that can be as portable and accessible as the Web, yet have the power of the desktop has long been sought. We may finally have it in our grasp.

Debugging Safari

Check out this post by rakaz, which provides a quick walk-through on enabling the debug menu in Safari for Windows, which provides the ability to access JavaScript exceptions, show the JS console, enable a runaway JavaScript timer and turn off “Site-Specific Hacks”. This should make life a bit easier.

Firebug Beta 1 Released

The beta of Firebug 1.0 has been released and comes with some amazingly useful features. For those unfamiliar with this Firefox extension, Firebug provides a wealth of tools for developers to debug, monitor or edit portions of a site. Portions of it overlap the Web Developer’s toolbar, and in several cases, Firebug surpasses it hands down. Some of the features include:

  • Inspect & edit HTML & CSS within the browser to see how changes will impact the current page.
  • Visualize CSS metrics, including box model shading, measurements for each edge of a box (and the ability to edit those measurements in-line) , rulers and guides
  • Monitor network activity to see why a page takes too long to load, broken down by type. You can also see which items are cached or not and examine HTTP headers and XMLHTTP Requests.
  • Debug JavaScript, including the ability to set breakpoints and conditional breakpoints and line-at-a-time code execution. Additionally you can view JS stack traces broken down into the functions within the stack. Use tooltips to see the value of any variable within the JS, log function calls and profile the performance of the scripts. The improved JavaScript logging is amazing in its own right.
  • Explore the DOM and edit as you go (including auto-complete) with handy JS code navigation.
  • Vastly improved error handling and details.

This extension will actually reduce the need for several others you may have installed.

Mmmm Code Snippets

Code Snippets is an online resource, providing a central user-writable repository for chunks of reusable code. A stroll through the language-agnostic site provides a plethora of tasty bits and bytes from many programming languages and frameworks. Each snippet can be tagged and each tag can be followed via RSS. Users can comment on snippets as well, which is invaluable for anyone deciding whether or not they want to try out a piece of code.

Docking boxes

Docking boxes (dbx) “adds animated drag ‘n’ drop, snap-to-grid, and show/hide-contents functionality to any group of elements. And … in what might be another world-first for brothercake – dbx is fully accessible to the keyboard as well as the mouse, an action I’ve dubbed “press ‘n’ move”.” This looks interesting, and may well join my tool box for future sites. Though I need to compare its functionality with some of the other JS tool sets that are AJAXified, I’m very excited about the fact that it is keyboard accessible, and hope that it degrades nicely for screen readers.