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 just finished a very simple plugin that enables JSON-syndication for blogs running on WordPress. You can test the output on this blog.

http://frontendbook.com/feed/json/?callback=? (content-type:application/json)

Find out more

• Plugin home
• Github
• Readme

Why

• I think JSON is a very powerful way to syndicate content and data
• I think we should not need to write stupid proxies for aggregating feeds via JavaScript
• Opening up your data is a good thing
• I could not find a working example that was a plugin, all solutions I found was hacks in the actual source code of WordPress.

jQuery Example Retrieving JSON

$(function(){
$("body").append('<div id="wp-json">Loading JSON</div>');
$("#wp-json").css({
'position' : 'fixed',
'right' : '0px',
'top' : '0px',
'background' : '#f00'
});
$.getJSON('http://frontendbook.com/feed/json/?callback=?', function(json){
var result = '<ul>';
$.each(json.items, function(){
result += '<li><a href="' + this.link \
+ '">' + this.title + '</a></li>';

})
result += '</ul>';
$("#wp-json").css({
'background' : '#fff'
}).html(result);
});
});

Download

• Download at Github

I missed GeekMeet yesterday because I “had” to join in on the company pool tournament and free-beer thing, but lucky enough we had the opportunity to listening in on Chris Heilemann not once, not twice but three times today. He made a really good presentation for the whole department where he focused on where the web is today and where he thinks it is moving, really nice for business owners who still believe the web today is the same as 5-10 years ago. Later on we had the same presentation as he held during GeekMeet about performance and how a leaner front-end can make wonder on site performance and user experience. I believe Yahoo is doing a great job here, and it was nice to listen in on Chris input and ideas. Finally we listened in on how to manage JavaScript in larger teams, this is something that will be very important on my department where we are a lot of Web Developers and JavaScript knowledge is widely spread from beginner to more savvy developers. Interesting. If you get the chance to listen and talk to Christian, take the time. He is enthusiastic, funny, professional, pragmatic and obviously he loves his work. He made my day better, and I felt confident that we will build better products when I left the office (hopefully the feeling is still there on monday when reality hits the fan).

Presentations

• Watch “Shifting Gears” right here, right now
• Read “Playing With The Web” with Easy SlideShare

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).

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).

Below I have listed a couple of JavaScript articles you should read to prepare for the awakening of JavaScript as the main web development tool. It doesnt matter if you consider yourself a .NET or Java-developer, if you do not learn JavaScript you will probably have a hard time finding a job within a couple of years if you would like to work with web development. And by the way: JavaScript-solutions today is not the same solutions you where scared with when you grew up.

Writing jQuery Plugins by jQuery Team

One of the strengths with the jQuery javascript library is the plugin framework that lets you easily create your own plugins. This article/HOWTO guides you in the art of writing jQuery Plugins

JavaScript Inheritance by John Resig

John Resig, creator of jQuery JavaScript Library has a nice article on how to simulate inheritance in JavaScript. This article is a good read for people who, by nature and religious reason, avoids JavaScript because the lack of inheritance and other must have OO-principles.

Event Driven JavaScript by Christian Heilmann

Christian Heilmann, Lead Developer at Yahoo!, has written a piece on JavaScript that dives into event driven javascript, custom events and planning your frontend application.

Simple Class Instantiation by John Resig

Another interesting article from John, focusing on Class Instantiation in JavaScript. Do not stop reading after the article, in the comments you find some interesting comments from a lot of people who are well known in the JavaScript-sphere, among them Brendan Eich, the creator of JavaScript.

JavaScript Closures by Richard Cornford

“A closure is formed by returning a function object that was created within an execution context of a function call from that function call and assigning a reference to that inner function to a property of another object.”

Closures are as cool as they are hard to get.

From Most Misunderstood to Worlds Most Popular Programming Language by Douglas Crockford

Douglas Crockford, architect at Yahoo! and introducer of JSON (JavaScript Object Notation) as data interchange format between applications has a mixed emotion relationship to JavaScript, that makes his articles more interesting to read.

Conclusion

I believe that more than 50% of all web development will be made in JavaScript within 10 years. JavaScript is the language for Mashups and AJAX-solutions and we are not going to see fewer solutions based on that. Combine that with open API:s from data providers such as Google, Yahoo and Blogs.

JavaScript is here to stay, make sure you read these good and advanced articles from people who will build the foundation you will develop on tomorrow.

Robert Nyman announced that DOMAssistant 2.7 was released today. They have some good competiton from jQuery, Prototype, MooTools, Ext and all the others. Interesting to see that DOMAssistant is the first library to actually take things like Unicode-support seriously. Of course localisation and full unicode support will be added to jQuery and Prototype in some way, either as plugins or in the core. I would like to see developers who actually used DOMAssistant in a live project to share their thoughts on it. Why should someone switch from jQuery?

There is a strong team that works on DOMAssistant, maybe it would have been better to actually add these efforts into a library that has more users in order to build a “standard” library.

In order to choose the correct library for your front end architecture it is crucial that you take aspects such as traffic, security, maintenance and competence into account.