Do not use jQuery 1.4 or 1.4.1 with user generated content!

jQuery 1.4 branch added some great stuff, but let a really ugly bug through. Something that you could call jQuery injection.

replaceWith: function( value ) {
	if ( this[0] && this[0].parentNode ) {
		// Make sure that the elements are removed from the DOM before they are inserted
		// this can help fix replacing a parent with child elements
		if ( !jQuery.isFunction( value ) ) {
			value = jQuery( value ).detach();
		}
…

With previous versions you could easily do $('#myElement').replaceWith('some text'); to replace the selected node with a text node. In jQuery 1.4 and 1.4.1 you can’t - but just failing does not constitute a huge bug.

If you take a good look at the code above you can easily find that if value passed is a string that looks like a selector, it will detach nodes from the document. Consider calling $('#myElement').replaceWith('html'); - the screen goes blank and everything the user has been working on is gone.

Fortunately…

jQuery 1.4.2 fixed this issue by properly using detach only when value is not a string. If you are using jQuery 1.4 or 1.4.1 and for some reason cannot upgrade to 1.4.2 (or just don’t want to), you can still just copy the whole replaceWith method from jQuery 1.4.2 to your version.

Related articles by Zemanta

• 101 on jQuery Selector Performance (java.sys-con.com)
• It’s Easy to Fall in Love with jQuery (sitepoint.com)
• jQuery: Novice to Ninja (oreilly.com)

var elm = document.getElementById('myElement');
elm.innerHTML = 'Test';
alert(elm.innerHTML);
// alerts '<div xmlns="http://www.w3.org/1999/xhtml">Test</div>'

I just figured out the problem is that one of myElement ancestors is attached to a table as a non-table element. In my case there was a div attached to a tr. Changing that div to td fixed the problem.

And they say web development isn’t full of surprises…

The traffic graph is the number of visitors per day while the conversion rate is the percentage of the visitors converted. When you go mainstream your traffic will spike and plateau at a lower level a few days later. This will screw up your conversion rate. Don’t worry though - figure out who the visitors are and fix your landing pages to target them as good as you can.

This graph obviously focuses on start-ups that have a huge conversion rate at the beginning as most of the conversion happens on tech-news sites and only already “converted” people get to your page - conversion rates of 80% are common in such cases. It should also be valid for later stage companies, but you need to adjust the conversion rate numbers. Another fact of conversion rates is that as your number of visitors grows your conversion rate will drop due to the fact that more users will be “just browsing” (think about a store in a mall).

If you don’t belive me think about the what the Twitter homepage looked like in time. The first one I saw had the public stream on it - geeky as hell. They changed that into a still somewhat geeky homepage that explained what Twitter is and helped you register. The latest one is almost non-geeky and focuses on real-time search and has a prominent sign up button.

Related articles by Zemanta

• Conversion Rate Optimization Lessons Learned in 2009 (seomoz.org)
• Breaking A Goal Into Metrics (altitudebranding.com)

I was approached some time ago by a designer who was working on a fluid design but was having problems with a HTML/CSS only solution for a fluid searchbox. The idea to create a searchbox that grows when the window grows is simple, but becomes a tad more difficult when you add stuff to the left and right of it, some being fixed width (width in px or em) and some fluid width (width in %).

As I like challenges I took it on and produced a sample that worked on most modern browsers in a single evening. They didn’t like it because it didn’t work in IE7 (cause I never checked it) even though the fix for IE (it was only IE7 that didn’t work) was trivial. After a while I went back and checked it out again, changed the code a bit and I think it’s much better now.

The simple form

Creating a fluid search box when you only have a single element next to it is trivial. What you do is wrap the input in an element and use padding to create space for the fixed element, then position the fixed element absolutely (or relatively) in the space created by the padding.

HTML:

<fieldset>
	<div>
		<input type="text" name="q" value="" />
	</div>
	<input class="s" type="submit" value="Search" />
</fieldset>

CSS:

fieldset {position:relative;padding:0;}
div {padding-right:6em;}
div input {width:100%;}
input.s {width:5em;font-size:1em;position:absolute;right:0;top:0;}

Sample

You could target the input with input[type=submit] but that wouldn’t work in older browsers.

A complex form

The complex form from the intro includes a title, a search type drop-down (select element), the input box and a submit button. This gives us four elements, two of which are fixed and two fluid - and more stuff to hack around.

HTML

<fieldset>
	<div class="l">
		<span>Find</span>
		<select name="type">
			<option>in Books</option>
			<option>in DVDs</option>
		</select>
	</div>
	<div class="c">
		<input type="text" value="" name="q" />
	</div>
	<div class="r">
		<input type="submit" value="Search" />
	</div>
</fieldset>

CSS

fieldset {margin:0;padding:0;position:relative;border:0;}
fieldset .l {height:0;}
fieldset .l span {width:3em;display:inline-block;}
fieldset .l select {width:10%;}
fieldset .c {margin:0 60px 0 4em;padding:0 .7em 0 10%;}
fieldset .c input {width:100%;}
fieldset .r {position:absolute;right:0;top:0;}
fieldset .r input {width:60px;}
* html fieldset .l {float:left;width:100%;margin-right:-100%;}

The basics

I created three elements that help me align elements. I’m using classes l for left, c for center and r for right. The left element includes the title and the type, the central element includes the search box and the right element includes the submit button.

fieldset .l {height:0;}
fieldset .r {position:absolute;right:0;top:0;}

The left element has its height set to 0 so it seemingly doesn’t take any space. The central element includes the input and needs no special positioning, while the right element is positioned similar to the simple solution - absolute and set to right.

The surrounding elements

You can set the width of these elements in any unit you like. I set the width for the span element in em, type drop-down in % to make it fluid and submit button in px.

fieldset .l span {width:3em;display:inline-block;}
fieldset .l select {width:10%;}
fieldset .r input {width:60px;}

The only thing you need to do in CSS is set the width to these elements. You need to set the display property on the span element to work around the fact that inline elements don’t allow setting of width.

The fluid input

fieldset .c {margin:0 60px 0 4em;padding:0 .7em 0 10%;}
fieldset .c input {width:100%;}

The input needs its width set to 100% so it will stretch the whole available width of the parent. That happens due to the fact that block-level elements will grow to 100% automatically and the margin and padding will “shrink” its contents. This allows setting the spacing in two different units - one for margin and one for padding. If you look at the CSS rule, you’ll see that the widths are similar to those set for the surrounding elements - of course with some spacing added.

• Right: 60px margin (width of the submit button), .7em padding (spacing)
• Left: 4em margin (3em for the title + spacing), 10% padding (type select width)

The browsers

You can check out a sample page with the complex form. Working on Windows I’ve tested it in these browsers:

• Firefox: 2.0, 3.0, 3.5
• Opera: 10
• Safari: 4
• Google Chrome: 3
• Internet Explorer: 8 (with its rendering of IE7 Standards and Quirks)

As always at least one browser had to fail - IE6 did. The problem was height:0; as IE6 will render elements as high as their content. We can work around this by changing the way we make it zero width/height so it doesn’t affect the central element.

* html fieldset .l {float:left;width:100%;margin-right:-100%;}

I’m using the IE6 CSS filter to target IE6, you can use conditional comments or whatever you like best. The rule floats the element left, making it 100% wide, but resets the position by setting the right margin to -100%.

As I’m using display:inline-block; this will work a bit different on browsers that don’t support inline-block. In Firefox 2.0 you can use display:-moz-inline-box; in the rule for the span, but make sure you put it before the inline-block.

fieldset .l span {width:3em;display:-moz-inline-box;display:inline-block;}

Last words

You might want to fix some stuff in some browsers so everything aligns nice. The techinque used is derived from the multi-unit any-order column layout by Eric Meyer as it opens your mind on how to use multiple units in a single layout without fuss. I’ve tried all the browsers I have on my dev machine and I’m not saying it works everywhere. If you find a browser where it doesn’t post a comment; if you find a better way of doing things also post a comment.

You always expect some people to send you a job application request that will not conform to what you’re requesting and that’s ok - you can easily ignore these applications. You will also always get some people who don’t fit the requirements by a mile but are trying to get “on the shortlist” for possible openings in the future - that’s ok too. And you’ll also get a lot of people that will value their own knowledge far more that they should - these are the ones I wanna talk about here.

You’ve probably met a bunch of “airheads”, “egomaniacs” or whatever you call the people that are full of themselves and describe their knowledge as expert but turn silent when you pop a simple advance question. I call them “king of the hill” types.

Assessing your own knowledge is hard

It’s in our nature to compare. My “house” is bigger than your “house” is part of our minds, even more so in Slovenia, a small market where basically everybody knows everybody. So it’s only natural that we assess our knowledge based on comparison. There’s an obvious problem with that - I will have no idea who you’re comparing yourself with and therefore your score will make no sense to me. In that sense it’s similar to confidence levels in search.

You might think setting a comparison chart would make the scores better, but it really doesn’t. If you tell a developer that he should assess his knowledge of a language based on a scale where 1 is “can read it” and 10 is “i invented it” you’ll get a lot of 8s. Which would mean they’re basically the best developer for that language in the country. When you do, you can easily think that the guy saying it is a moron and discard him as a viable candidate. And you’d be wrong doing that, at least sometimes.

Are you King of the Hill?

When people overestimate their knowledge it’s because of two basic reasons:

1. They are genuine asswipes that think they know more than the guy that invented the language, but know showing they’re an egomaniac on the interview is not smart. So they’ll lower the score to an 8 to make you feel good. These guys are usually easy to recognize as they’ll be defensive and dismiss any questions they don’t know with something like “that sucks”, “i never need that”, …
2. They really have no idea what else is out there. I was sure that in the age of internet such people don’t exist anymore, but even in computer related industries you can easily find people that got stuck in a particular part of the web of amateur forums and people of the previous variety. This means they do actually know everything, but don’t realize that everything is a lot bigger than they know.

But this is only a part of the story.

Who to hire then?

I’ve drawn a simple graph to help explain this:

Don’t hire the King of the Hill!

The beginners

As you start learning about something you’ll know that you know next to nothing. You’ll also see a lot you can learn and might even see where you want to get - as near to the “i inveted it” as possible. At that time your think you know less than you really do - these are the people you should hire only if you are willing to wait until they learn more and if you believe they can. As you learn and overcome the problems you thought were the “the big problems” you’ll go over the equilibrium and become a smart-ass.

The kings

This is where it gets interesting. Some people like to be king of the hill so they will ignore everything beyond that point. They will also make sure that people lower on the actual knowledge axis will not see over that point. They’ll have all sorts of reasons why everything beyond this point is crap. These are the people that make the most damage to development communities, as they’re usually the vocal ones. You should not hire them.

The enlightened

But as I said before they might really just have no idea what’s beyond that point. That’s easily solvable even during the interview - you can show them some code, throw around some ideas and arguments on why that’s good and some people will say “Wow, I didn’t even know all that is possible!” (yep, I actually got a response like that). You should hire this people immediately - seriously, don’t let them leave the interview without signing a contract. Tell them they’re the last interview before the decision and that you decided already and don’t need to wait. And because they’re now sure they know less than they really do, you’ll be able to get great value for money.

You must however be really careful with developers in this stage. They will climb the curve fast and soon they’ll start whining about lack of challenging work. They’ll also start to want more money. They might even want to say they want to be a team leader. When they do, they’re really just saying they want more money. Don’t confuse expert developer knowledge for managerial skills!

The experts

The best you can do at this stage is making them architect or senior developer. And with that done you need to start sending them to topnotch conferences and encourage them to write papers trying to get a gig at one of them. They’ll meet with the inventors, see that they’re actually normal people with a unique set of knowledge that is much wider than they expected. The new “lack of focus” will keep them busy and inspire them. They might become a better developer or stay at the same level, but they’ll be happy. They’ll be the kid with a new toy. With the ability to find a new toy when this one gets boring. That’s what supporting extracurricular activities and flexibility is good for.

Related articles by Zemanta

• Introducing Balloons: Free multimedia overlays for bloggers (zemanta.com)
• New Zemanta Release (avc.com)
• Making The Web Smarter (myventurepad.com)

Are you the frontend developer we are looking for?

Zemanta is developing a platform for contextually enhancing content and your job would be to help us develop tools that make this easy and fun for writers and readers alike.

If you have an exceptional understanding of Javascript and the internals of browsers, thrive on challenges and love learning new skills, then we would love to talk to you. Knowing Python and Django framework is a plus, but not a prerequisite.

“I have nothing to offer but blood, toil, tears and sweat.”

(Winston Churchill on life at a startup)

Well, not quite. Working in a startup means working in an ever-changing environment. We expect you to be flexible, do what needs to be done when needed, but offer flexibility in return. We care about good work and meeting deadlines. We don’t care where or when you do it, as long as you keep true to mutual agreements which include occasional meetings and we promise not to overburden you with work. A self-reliant member of a team is how you see yourself.

Schools you might have attended are none of our concern. We care only about how good of a developer and person you are. We expect you to send us examples of your work or explain persuasively why we should hire you. Zemanta is an international company, so your application, as much of our communication, will have to be in English.

Please send your application saved as an HTML or TXT document to jobs@zemanta.com.

Closing date for applications: 31.7.2009

In a time when practically all pages include some sort of JavaScript I am surprised that we don’t have more JavaScript developers popping up - this now surely is a full time job even in Slovenia. So you are one challenge yourself and send your job application and if you know one, send him our way…

Related articles by Zemanta

• WTF is Python (slideshare.net)

That’s why I’m supporting had in trying to become the best result for retorik and retorika on Google and save 590 EUR that people would otherwise pay to get to learn how to become the first result on search engines.

Related articles by Zemanta

• How SEO Myths can mess you up (Free Report) (web-workathome.com)
• Make Your Blog Easy To Find Thru Web Directories (raketscience.com)
• Track Your Seo Performance (franklinbishop.net)
• Luring local traffic to your Web site (money.cnn.com)
• Utilizing Google Local For Your Business (unionstreetmedia.com)

Image via Wikipedia

1. The easiest way to be sure you’re getting a non cached file is to actually have it open in a tab and reload that tab. Emptying the cache does not seems to work as I’ve found out while caught in an alert loop.[1]

2. I found the “don’t run scripts on this page anymore” checkbox in the alert box fascinating, but less so after I clicked it and couldn’t find a way to turn scripts back on for that specific page. Fortunately restarting the browser did the job.

3. We load a loader.js that in turn loads other Javascript and CSS files. Unfortunately it seems I have to manually load these files in tabs in order to get them to work - even though I can see them in Dragonfly when I click them they seem to be blank. When I reload, the content appears. After that they work as expected. But even then I don’t see them loaded in the Network tab of Dragonfly.

4. Can’t get the CSS loaded from a script to work. I don’t have any ideas, they just don’t work. I don’t see them in Dragonfly network tab (but I don’t see Javascript files either and they work).

5. When using Dragonfly I cannot get out of the inspect DOm mode so I can’t use the site to do something while watching what is happening in the DOM - what you must do is switch to a different tab, do your stuff and then switch back.

6. When you look at errors on a Wordpress page Opera spits out loads of “-… is an unknown property” - thanks very much but properties that start with a - are supposed to be unknown to most of the browsers as they are vendor specific. This means that finding the error you’re looking for is much more difficult than it should be.

What I really hate the most when working with Opera is the lack of information about what is going on. They’ve added some really nice features in the recent releases but it is still quite far away from being a browser that people develop for. In this way it is sort of similar to IE but IE is a must and Opera isn’t…

If any of these are my mistakes I’d be glad if someone set me straight and taught me to use Opera as a developer. I bet others would too.

Related articles by Zemanta

• Opera 10 Beta Arrives (lockergnome.com)
• Faster, Sleeker Opera 10 Is Built for Better Web Apps (webmonkey.com)

1. When you have a loop that alerts something and you keep getting the alert - the only way of getting out is removing the alert from code, emptying cache and trying to hit reload between alerts. In Opera this does not seem to work as the only way to get the new file is to reload the file and you can’t do that between alerts. back

MozillaLabs released Jetpack - a lightweight way of extending the browser. It’s essentially an API that allows you to write extensions for Firefox with web technologies. You can check out the video here:

Mozilla Labs Jetpack - Intro & Tutorial from Aza Raskin on Vimeo.

While you’re at it you should also read the guiding principles.

What I want to do here is list what I want from a lightweight extending system (in no specific order):

• Only web technologies should be used in the development process (CHECK)
• Installing as easy as Greasemonkey user scripts (CHECK)
• Should take care that add-on authors don’t need to update for every version (CHECK)
• Provides local storage and cross-domain posting capabilities
• Add-on updates are handled automatically
• Central add-on repository with usage & install statistics
• Easy access to add-on options (think options button in add-ons list)
• Possibility to use web pages as configuration interfaces for add-on settings

My current way of creating Firefox add-ons is to build Greasemonkey user scripts and compiling them to add-ons into a full .xpi. This provides a good framework to add other things that normal Greasemonkey scripts cannot do.

As I checked Jetpack I missed a lot of the things from the list - too many to be able to create a Jetpack version of Tweecious. Since it’s still in 0.1 my hopes are still high.

Related articles by Zemanta

• Mozilla’s Jetpack to bring next generation add-ons (news.cnet.com)
• Strap In: Mozilla’s Jetpack May Be The Next Step In Browser Extensions (techcrunch.com)
• Introducing Jetpack, Call for Participation (labs.mozilla.com)

Image via CrunchBase

This is the list I compiled:

Infrastructure

These add-ons will enhance the capabilities of your browser. You might not need them right away, but it’s smart to have them installed for when you need them (and I’m sure you will).

1. Google Gears allows you to use off-line Gmail and makes a lot of web applications faster.
2. Greasemonkey lets you install user scripts that will make pages nicer, give them additional features and other kinky stuff.
3. Operator will expose microformated content so you can easily use it.

Developer

If you’re the dedicated support guy for this specific installation (people will call you when things go wrong) you should install these now - they’ll help you fix stuff later.

1. Firebug will let you inspect pages and see what’s wrong and why.
2. Html Validator validates the code on the page so it’s easier to spot why something looks weird on screen.
3. Web developer toolbar adds a lot of useful features for debugging pages to a handy toolbar.

Interface

These are just a few I like that make the browsing experience a bit nicer.

1. Cooliris makes searching for images a lot friendlier.
2. FoxTab helps when you have lots of tabs open. Unfortunately it isn’t supported on Mac OS X 10.5.6 yet
3. Inquisitor is a nice search add-on that will enhance the search box.
4. Fission moves the progress bar into the address bar (Safari style).

Sharing

To make your social networking and blogging a bit easier.

1. Delicious is a great add-on if you use their social bookmarking service.
2. Fotofox lets you upload photos to a bunch of photo sites easily.
3. Zemanta integrates with your blogging platform and recommends images, videos, links, articles and tags.
4. (Shameless plug) Tweecious is great for people who use Twitter and Delicious - it takes twittered links and posts them to Delicious.

You might also want to install dictionaries for the languages you use when writing in Firefox. You can get some more ideas at Fashion your Firefox.

1. Image by codepo8 via Flickr

   Guardian topic researcher is a API launch demo we at Zemanta did with The Guardian. It’s a simple mash-up that uses Guardian’s search API to get articles about a selected topic and then Zemifies them with the Zemanta API to get links to related concepts, be it people, places, bands, technologies… It’s buit using only jQuery (with the exception of a server-side proxy so the requests to Zemanta API are a bit faster) and jQuery UI. If you check it out you’ll see that we did a few things that one would normally not do on a regular web page - we did that here as an experiment in usability and browser speed.

2. I found a really annoying bug in my jQuery.windowName plug-in for jQuery due to a feature in jQueries param function that serialises JavaScript objects into a query string. It replaces %20 (space) with a + (plus) which broke the form creation. Don’t know how I didn’t get this sooner but it’s fixed now. I also fixed a bug with breaking IE when data object has fields with name method, target or action.

3. Tweecious is a small mash-up I’ve written in my first montly hack day. It’s an application that goes through your twitter feed, finds any links you posted and posts them to delicious. In between it does some less interesting but important stuff like expanding the link via longurl.org and tagging the content of the page via Zemanta API. Everything is done inside the browser so the app doesn’t need any credentials - if you’re logged into delicious it can post, if you’re not it will let you know. Expect a release soon - probably this week.

4. I decided to have monthly hack days. I will create small apps or just little snippets of JavaScript code that seem like a good idea at the time. The first one produced Tweecious which was actually a challenge from Brian King at Briks. I’m looking for ideas for the next one - it might be a generic bookmarks exporter.

Related articles by Zemanta

• jQuery UI 1.7 Released: New CSS Framework & Dramatic Updates to Controls (paulspoerry.com)
• JSOS: jQuery based desktop (ajaxian.com)

Numerous services are emerging on the web that provide data in a computer friendly form through APIs, microformats, feeds,… Even your blog is actually a database as it syndicates its content via feeds and new posts trigger a ping you can subscribe to.

This fact opens new ways of collaboration - so called mash-ups, but this isn’t really a new concept. What’s new about it is the fact that we don’t use this word anymore as all the new services are some sort of a mash-up leveraging existing services. But accessing data is not the only way to leveraging these services - it’s becoming increasingly easy to create an application that lives in other applications without their approval through browser extensions and bookmarklets.

Marko Mrdjenovič from Zemanta will talk about what you can do to make your site more mash-up friendly and why that’s becoming increasingly important. As a developer I’ll also present what options you have and give a few tips on what to do and what to avoid when developing these kind of apps.

If you have any questions during the talk use twitter to tell me and I’ll try to answer them. Or put them in the comments.

Update: The video is now online. It’s in English so go watch it and tell me what you think.

jQuery(function(){jQuery('#media-buttons a').tTips();});

What guarantees do you have that by the time the internal function executes the global jQuery will still be the one you expect it to be or that it will have the tTips plug-in you attached a few lines earlier? Nothing. You just ASSUME it will be. You didn’t put it there, so you can be sure that nobody will. Right.

jQuery developers knew this might be a problem so jQuery will pass a reference to the itself as an argument when triggering this event:

jQuery(function($){$('#media-buttons a').tTips();});

This would work and wouldn’t break. And it would make your platform a bit more hackable.

At Zemanta we have a few different ways of loading our scripts and we cannot always control when they do. The Firefox extension will load the scripts on DOM ready, WordPress plugin will load them somewhere in the middle of the HTML, Drupal and MovableType plugins will load them in the head and IE extension will load them sometime while loading the page.

This all means that we have to delay some of our code execution to when DOM is ready and scripts are loaded. Which is where the problem kicks in.

jQuery has this nice way of doing this with $(document).ready(fn) or short $(fn) which waits until the document is ready and executes the passed fn function. If the document is ready it will execute the function immediately. Our issue lies in what “document is ready” means to jQuery - it means different thing in different browsers.

In browsers that support DOMContentLoaded (Firefox, Webkit, Opera - let’s call them modern browsers) “document is ready” means that either DOMContentLoaded event fired on the document or the load event fired on its window. On IE “document is ready” means that either onreadystatechange fired with readyState === 'complete' on the document or document.documentElement.doScroll("left") is successful (Diego Perini hack). To make this short - if you load jQuery after all the events fired in modern browsers jQuery will never know that the document is ready.

To get around this (we really don’t like having our own hacked version of jQuery) I wrote this little plugin:

(function ($) {
$.readyOrDone = function (fn) {
	var s = document.readyState;
	if (s === 'complete') {
		$.ready();
	}
	$(fn);
};
})(jQuery);

As you can see this will check if document is in a “complete” state and fire the ready method on jQuery which usually fires when DOM is ready - if it fired before it will do nothing. It will then add the function to the ready queue which also has this nice feature of firing immediately if DOM is ready.

All you have to do is change your $(fn) calls to $.readyOrDone(fn) and you have a bulletproof solution for executing functions when DOM is ready even if jQuery was late to the party and has no idea if the document is really ready.

Update: Filed a bug and hoping for the best.

Update 2: I found out that not all browsers provide the readyState property - Firefox on Ubuntu for example. Devised a new version that tries to smartly handle such cases:

(function ($) {
	var time = setTimeout(function () {}, 0),
		lastelm = null;
	$.readyOrDone = function (fn) {
		var s = document.readyState, getLast = function () {
			var elms = document.getElementsByTagName('*');
			return elms[elms.length - 1];
		};
		if (s === ‘complete’) {
			$.ready();
		} else if (typeof s === ‘undefined’) {
			lastelm = getLast();
			clearTimeout(time);
			time = setTimeout(function () {
				if (getLast() === lastelm && typeof document.readyState === ‘undefined’) {
					 $.ready();
				}
			}, 1000);
		}
		$(fn);
	};
})($);

Related articles by Zemanta

• Enhance your emails and blog posts with Zemanta (read2know.com)
• Zemanta: Making Blogging Easier (webbugnet.wordpress.com)

This is especially true of contact/feedback and registration forms. On contact forms the only thing consumers want to give is the message, on the other hand what you want is at least a name and a way to contact them (the others in your company might want more, but that’s a different storypost). The registration form is somewhat similar in the way that you can make it really simple by just using email and password fields but then again it’s nice if you have a way of addressing your users other than an email address and if your application is at least a bit local you also want their location.

The other side of the story is obviously that consumers don’t want to fill the same forms all the time. As time passes they’re minds are saying “Not again…” which is not that far enough from “Why can’t they get it from some place I already use”.

Into the graph

There have been a lot of attempts at solving this issue of repetitive entering of same data. There’s a way to do it with OpenID, which unfortunately isn’t ready for mass use since not many people use it. Other possibilities are public APIs of numerous services that allow you to get at least some user information if you have some data about them.

One of these APIs is Flickr’s as it allows access to user information if you have the user’s email through flickr.people.findByEmail and then flickr.people.getInfo as is neatly demostrated by huffduffer which uses it to retrieve your Flickr avatar.

What you have now is the user’s name, “preferred” username, location and avatar (which you might have had already if the user is registered with gravatar).

The graph

Image by davemc500hats via Flickr

The other place where you can get decent information about the user is Google’s SocialGraph API. With it you get lots of services from which you can get all kinds of public information about a user. The problem with this API is that you first need a relevant entry point which must be a URL that the user owns. This can be a Flickr user URL (that you have if you successfully completed the previous step) but these don’t always produce very good results.

What seems to produce better results are twitter URLs - the only problem wasis how to get one. An easy way to get the users twitter URL is demonstrated in a blog post by Chris Heilmann. This will get you all the information you get from Flickr for all the users that are currently logged in to their twitter account. Seems that this is not possible anymore!

If you’re still not getting anything you can still ask a user for a URL - be it their blog or any social network service account. Or you can let her log in using other services that will give you a good starting point, like Facebook Connect or OpenID.

Data from the graph

What SocialGraph gives you is a list of services the user is registered with. You can also get their list of friends - if any of them are also users of your service you can suggest they also connect on your service. You might also get to know whether they use OpenID and suggest them that they use that login to log into your service too. Or you might be able to figure out what their blogs are - especially when they’re claimed on Technorati.

This information can also help you get in touch with your users as you can automatically contact them on services where you also have an account, like Facebook, twitter, friendfeed and others.

The thing is that once you have all this information you should be able to get all the public information the user has exposed on any of these services. And you can use this information to help the user by pre-filling forms or use it in other ways that a user might find helpful, but not spooky.

What you shouldn’t do is use this information in ways that might scare the user. For example if you can get the birth date from any of the services, don’t hide the fact that you did - offer a form to fill the date and prefill it. This way the user won’t be spooked if you send them a happy birthday note or you greet them with a happy birthday note.

This form should get your Twitter data and then get some of your services via Google’s SocialGraph. It’s all nicely wrapped in an hCard.

1. Sorry I forgot your name as I’m not yet used to bookmarking twitter statuses. back

internalObject = {/* code here */};
eventHandler = $(internalObject);

This means that you could now do

eventHandler.bind('customEvent', function (ev) {
	// this is a reference to internalObject
});

and of course also

eventHandler.trigger('customEvent', {some: 'data'});

which is great.

But in a part of my code this just wouldn’t work. Unfortunately it was my first try at doing jQuery({/* custom object */}) and since I obviously wasn’t at my best when writing it I was sure this couldn’t be done. So I hacked around it.

A few weeks ago I made me a test case and figured out it works when passed an empty object ({}). So I implemented it everywhere and sure enough a part of the code stopped working. Which made me delve into the code to figure out why - a bit of debugging made me think the bug was somewhere in jQuery and I found out that there is a problem with the makeArray function. When it’s trying to create an Array it will test if the object has a length property. But as the comment in uncompressed code neatly points out //the window, strings and functions also have ‘length’ it checks a few things that allows it to handle these objects differently.

This means that

eventHandler = $({});

will work normally, while

eventHandler = $({length:0});

won’t because eventHandler length will be 0.

My problem was that the object I was passing had a length property. As such it got sucked into the else that processes arrays and other array like objects (like arguments and most probably also NodeLists). This meant that what I got back was nothing since length was initially set at 0.

Important update: Don’t do this:

eventHandler = {};
internalObject = {
	customEvent: function () {
		eventHandler.trigger('customEvent');
		/* some other handling code */
	},
	/* more code */
};
eventHandler = $(internalObject);
eventHandler.bind('customEvent', function (ev) {
	// this is a reference to internalObject
});
internalObject.customEvent();

You will inadvertently create an indefinite recursion as jQuery will try to trigger the native event and will execute elem[ type ](); where elem will be your object and type your event name. If you need an event that has the same name as a method on the object you can use triggerHandler as it will not trigger the default event.

I managed to finish my thesis so I’m finally and officially Bsc of economics/business. My thesis talks about motivation of IT developers, an interesting subject for me and I learned a lot in the process of writing it. I hope to work more on this topic in the following years, especially with companies which have problems motivating people or just want to know how to motivate their employees better. We’ll see how it goes…

The other big change this year is that I switched jobs. After 8 years of working at a digital agency called Parsek I moved to a start-up called Zemanta. The responsibilities are quite different as at Parsek we worked for clients who sometimes made us do things that are not the best for end users (I know they meant good though). At Zemanta the team is smaller but the client base is much bigger as we have to cater directly to end users.

I’ve also won the Slovenian Young Interactive Entrepreneur award so I was a finalist for the International award and went on a tour of England’s digital industry in November. I didn’t win the award but it was a great tour with great contestants that I intend to keep in touch with.

A new start

In the new year I have a lot to do. A lot of the projects I was working on in 2008 are still running in 2009, I also hope to launch a new project this year. This means no rest for me - the first weeks of the new year are going to be hard work full time.

As posting in the previous months was quite slow I already have a set of things I want to write about in the new year so you can prepare for more reading in the near future.

I don’t want to go into details of my plans for the new year as it’s time to go celebrate - I’ll think and plan tomorrow.

In Bakersfield, California, a Mexican strawberry picker with an income of $14,000 and no English was lent every penny he needed to buy a house for $720,000.The End

Via markos.

Image via Wikipedia

I find this so utterly amazing even though people here tell me it’s not that hard to do. You can now search CCed Flickr photos by colour - this might probably be the easiest way to get to photos to use on mock-ups, much better than search where you have to rely on people tagging photos correctly. The urls are even bookmarkable, which means you I can give you a link to the colours used on this blog: About, Blog, Projects. You can even specify more colours (via had@koornk).

How it works

The plugin hijacks the $.ajax function and will do its magic when you’re POSTing to a foreign (domain not same as domain of document) domain or you specify settings.windowname to force it. If these conditions are not met it will use the default ajax function to create the request.

The script first creates an iframe that will be the target of its request. If the request is of type GET it will open the location with the specified data as querystring in the iframe, if it’s a POST request it will first create a form with hidden fields that represent all data being sent. To allow sending of method, target, action and submit some magic is done (those override some important form object stuff) after which the form is posted to the iframe. This is readyState 2.

After the posted file is loaded (meaning it should have now set the window.name) an onload event is fired that loads an empty local file into the iframe. The empty local (same domain as the page) file can be set in the settings (settings.localfile) - if it isn’t the script will first try loading /robots.txt and /crossdomain.xml (two files commonly found in the root that are small) and if both fail it will load the page it’s on. All this is done only on IE where 404 doesn’t count as local. This is readyState 3.

When the local file is loaded and it is surely local we can read the text from the window.name. If it’s a string and it isn’t our default we set status to 200 and set the string as responseText, otherwise we set a 502 status. We can now cleanup which means removing the form, the iframe and all references we created in the global space.

The whole thing is written in such a manner that it will return a fully qualified XMLHttpRequest object with all methods and properties. You can abort the request and it will cancel loading and clean up, you can access readyState, responseText and everything else you’d do to an XHR object. It does however not implement features that cannot be used due to the fact that it’s an ordinary form submit - setting headers and such.

Interesting use

I’ve found that window.name transport is ideal for saving files - you can force the window.name transport to a url that will return a file with an Content-disposition: attachment; header. When the file loads you’ll get a popup to save it and the frame will disappear automatically. It’s even more convenient if you’re creating the file with a POST request.

Download

You can download the plugin here or you can go to the jQuery plugins page to get it

Related articles by Zemanta

• Cross-Site XMLHttpRequest in Firefox 3
• Updates for AJAX in IE8 Beta 2
• State of Ajax at Google I/O: Performance, Performance, Performance