Front-End Book

I found this post by Karl Swedberg on Learning jQuery interesting.

Two years ago I made the somewhat immodest claim that 2007 would be the “Year of jQuery.” Since then, jQuery’s popularity has grown in ways that none of the core contributors could have imagined. Now I’m ready to make another bold pronouncement: 2009 will be the year of jQuery UI. Here’s why:

Read the full story at Learning jQuery

News in jQuery UI 1.6

• New classes for error, highlight and disabled states
• Extended, sprite-based ThemeRoller icon set
• Class system for adding rounded corners via CSS (Firefox and Webkit, gracefully degrades)
• New ThemeRoller tool with inspector style view
• Theme gallery with voting and user-generated themes
• Improved documentation for generating custom themes and using the class framework

News in jQuery 1.3

• Selector Engine (Sizzle)
• DOM Manipulation rewrite
• Event Namespaces
• Event Triggering

I have had an idea for some time, writing a jQuery plugin that enhances the user experience on forms unobtrusively. I started playing with my plugin jForm but development have halted, and I need inspiration. The goal with the plugin is/was to add things such as input elements as labels, out of the box form validation, tooltip for inputs, check-all-check-none functionality and more. The idea is to use classes for bootstrapping the unobtrusive form plugin. The philosophy behind the plugin is to focus more on roles using it as designers, and not as developers, trying to abstract all code away. A lot of the plugins today are very configurable and aims at solving each and every problem that could occur. I believe what designers need are more out-of-the-box functionality with no or very little confguration needed. And if they need more functionality the plugin could expose the possibility to actually do more specified things, but these things should be implemented when requirements exists, not in order to cover all potential problems.

Wrote a little plugin for using the default value in text elements as label, you know. Look at the right hand side in the newsletter form for an example.

$.fn.label = function(options){

	var default_settings = {
		clearLabels : true
	};

	var settings = $.extend(default_settings, options);

	return this.each(function(){
		var elm = $(this);
		if($(this).val().length > 0) {
			$.data(elm, 'default', $(this).val());
			elm.focus(function(){
				if($(this).val() == $.data(elm, 'default')) {
					$(this).val('');
				}
			}).blur(function(){
				if($(this).val() == '') {
					$(this).val($.data(elm, 'default'));
				}
			});

			if(settings.clearLabels) {
				$(this.form).submit(function(){
					if($(this).val() == $.data(elm, 'default')) {
						$(this).val('');
					}
				});
			}
		}
	});
}

Wouldn’t it be great to have a generic CSS parser implemented in JavaScript in order to move presentational options to the stylesheet instead of having presentational and behavioural settings it in the markup. I ran across the problem the other week when I was writing a jQuery plugin for grabbing external data using getJSON-function. First I intended to only use an anchor as a bootstrap for the jQuery plugin, that worked well until the designers went Andy Warhol and started saying: Sometimes we want this generic solution to be more generic, and other times we want it to be yellow, and sometimes yellow is just not the colour we are after, yada yada. And I replied: As long as you treat those babies the same when they appear on the same page. But of course they had some crack-brain-solution where they would go bezerk on usability and treat all of these generic items as they were specific, I felt the need for some smart way to adjust the presentation via parameters, and I used John Resigs metadata plugin, which is neat when you need to treat every instance passed to a generic plugin specific. But I was a bit annoyed moving presentation settings to the markup, it would have been neat to have a non-standard css-based stylesheet for handling these kind of issues. Typical plugins that could use such a plugin is of course all lightbox-clones (it would be great to move presentation data such as width, height, position to a stylesheet) and form validation plugins and other plugins that are heavy on configuration.

I do not know if this is a good idea, I have to check for existing solutions and see what the side-effects are? Probably someone have already implemented this, but I have yet to find the solution, otherwise I might as well try to write it (and fight all the potential browser bugs that I am sure will evolve during an implementation of such a solution).

I just released a new free wordpress theme the other day on Wordpress.org, NeeWee, my goal with NeeWee is to build a good theme for quickly set up a website (not only blogs) built on WordPress, in the first version, I have only added support for Google Analytics and Feedburner, but I plan adding support for more things that I addressed in an earlier post about how to build the perfect wordpress theme. NeeWee is also i18n-enabled and distributed in two languages and a translatable pot-file for adding more languages. In short NeeWee features are:

• Blueprint CSS design
• jQuery for JavaScript
• jQuery UI for interaction elements such as tabs
• i18n enabled
• Three color schemes (blue, black and orange)
• Featured Category
• Google Analytics Support
• FeedBurner Integration (Feeds and Stats)

In Zend Framework 1.7 there will offer native jQuery UI support.

The link above offers good documenation on different potential use-cases for jQuery UI plugins as helpers and how they will be implemented in Zend Framework. There is also a link to some examples and some comments on how the implementation may look like. Interesting. I made a list 1,5 year ago on why jQuery will win the race as the standard JavaScript library and it looks like number 9 in that list is the thing that will make sure that John and jQuery sets the standards for how You are going to work with JavaScript solutions in the future.

There are more interesting things in the 1.7 Preview Release, though not feature complete. See list below and download the Preview Release from http://framework.zend.com/download/latest

While 1.7PR is not a feature complete release in the 1.7 series, it
nevertheless contains some very important features scheduled for the 1.7
production release:

* New Zend_AMF component
* Dojo Toolkit 1.2.0
* New ZendX_JQuery component
* Support for dijit editor
* Metadata API in Zend_Cache
* Google book search API
* Performance enhancements
* Application-wide locale with other i18n enhancements
* File upload form element enhancements

John Resig, Mr jQuery, has his first article out on Ars Technica, it is about Extreme JavaScript Performance, where John discuss performance of JavaScript Engines SquirrelFish Extreme, TraceMonkey and V8.

Interesting to start read John on Ars Technica. He plans on being a regular poster:

I plan on contributing an article per week, or so, on topics related to JavaScript, browsers, and standards. I consider this to be a good challenge for myself - I have to perform considerably more research (interviewing, etc.) than I would for a normal blog post (which isn’t to say that I won’t for my blog - but that this is starting to get me in the good habit of doing additional fact-checking).

jQuery looks more and more as the standard JavaScript-library, distributed with Microsoft Visual Studio and Nokias SKD:s for widgets in the future.

“Additionally Microsoft will be developing additional controls, or widgets, to run on top of jQuery that will be easily deployable within your .NET applications.”

“Nokia is looking to use jQuery to develop applications for their WebKit-based Web Run-Time. The run-time is a stripped-down browser rendering engine that allows for easy, but powerful, application development. This means that jQuery will be distributed on all Nokia phones that include the web run-time.”

“In fact their [Microsoft and Nokia] developers will begin to help contribute back to the jQuery project by proposing patches, submitting test cases, and providing comprehensive testing against their runtimes. As with any contribution that comes in to the jQuery project it’ll be closely analyzed, reviewed, and accepted or rejected, based upon its merits, by the jQuery development team - no free ride will be given.”

Read more:

http://jquery.com/blog/2008/09/28/jquery-microsoft-nokia/ http://weblogs.asp.net/scottgu/archive/2008/09/28/jquery-and-microsoft.aspx http://www.hanselman.com/blog/jQueryToShipWithASPNETMVCAndVisualStudio.aspx

Not a big update. 

John Resig is writing a new selector engine, sizzle, interesting

I wonder when John have the time to write code, write books, write documentation, write for his blog AND work for Mozilla. He is one productive client side coding entrepreneur. Sizzle is Work In Progress, but John claims it is 4 times faster than the jQuery Selector Engine.

YUI has a new Interaction Pattern in their library

I do not know how many times I have been part of discussions about how to implement a sign in procedure the best way. This new pattern from YUI tries to describe the characteristics of the problem. I really like Yahoo’s initiative with YUI trying to help designers and likes from revinventing the wheel time after time.

Parallax scrolling made easy with JavaScript

10 years ago something, we believed DHTML and JavaScript where the solution to everything, and there are solutions I am proud of from that time, and solutions I wouldnt mention even under torture. These days all client side stuff is focused on availability, usability and other non-relevant bilities ;-). Where is all the cool stuff? jParallax is cool, and from a first point of view, somewhat useless, but hey, keep em coming.

Blueprint CSS 

I hate CSS. No I like separation of content, design and behaviour. But lets be honest, CSS is repetetive and often you find yourself chasing browser bugs hitting CTRL+S, ALT-TAB, CTRL-R, ALT-TAB …. That is why I believe we must minimize the rows of CSS we are actually writing, just as we try to do that with JavaScript using libraries such as jQuery, Prototype or Mootools. Blueprint CSS is interesting, I am thinking of implementing it into my mindset as the default CSS-library together with jQuery for JavaScript and Smarty for templating.

YAML (Yet Another Multicolumn Layout)

This one looks interesting as well, but the only reason I list this is because the name is the same as the configuration language YAML I will talk about below. 

YAML (YAML Ain’t Markup Language)

Before I have used XML for configuration, moving more and more over to JSON, because of the benefits parsing and using it. But YAML is what I have started using for some types of configuration, because of its easiness to read, write and share. Look into it. I love it for configuring navigations.