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

Image by Phillie Casablanca via Flickr

After a week of mostly testing and fine-tuning the code I finally released the windowName transport plugin for jQuery. You can get the plugin here but I suggest you first check the plugin page.

I need help testing

If you have an obscure browser / OS combination that is supported by jQuery I urge you to test the plugin. There are no good test pages yet so my temporary test page will have to do. The test page POSTs the querystring passed to it to a nonlocal domain and should open a JavaScript alert with the same querystring plus php=true.

On a sidenote - I figured out that the page looks better without the background images. So I changed the theme - let me know what you think.

Related articles by Zemanta

• Microsoft Gets a Clue, Adopts jQuery

Image by Friedcell via Flickr

As nowadays less and less development goes on in Internet Explorer and the versions that are currently available and widely used have some quirks — to be fair they are by the book and others aren’t — I’m starting this post to have a list of stuff that you need to keep in mind if you don’t want problems when testing in IE.

1. Trailing comma in object literals

   This is very common in multiline object definitions. someObject = {a:17,b:19,}; looks wrong but when you have a newline after everything it’s hard to find. Firefox lets it be, IE breaks silently. This one is easy to catch with JSLint.

2. String is not an array

   Even though many languages treat it this way. Using str[i].charCodeAt() breaks while str.charCodeAt(i) doesn’t.

3. Element ownership matters.

   This means that you have to take care when creating elements and attaching them to different documents. If you’re using jQuery beware - jQuery(someElement).append(someHtml); is ok since it will check what the owner document is but jQuery(someHtml).appendTo(someElement); might break if execution and someElement are in different documents. You can use jQuery(someHtml, someElement.ownerDocument).appendTo(someElement); though.

What I do before testing in any browser other than Firefox (Opera is sometimes even stricter) is to check with JSLint how damaged the code is. It will catch all the weirdly written code that might break a browser. And it catches that trailing comma I mentioned.

I’m quite sure the list should be longer but these are the things I encountered in the last few days. When I find more I’ll add them to the list. If you know any that are not on the list add a comment.

Related articles by Zemanta

• Which Browser Is Best Equipped for the Web of the Future?

This is why I like wiki style documentation.

Image via Wikipedia

Just now the chief of Slovenian Police (about 10.000 employees according to their website) said that he cannot be held responsible for a thing that a guy 20 levels below him did wrong while talking about Slovenian Interpol not responding to an Austrian Interpol request within a year.

Funny - while working at Parsek I worked on the Cisco Systems Slovenia website. If I recollect correctly our contact at Cisco Slovenia was only about 7 or 8 steps from the CEO of the company which has about 66.000 employees (according to Wikipedia).

Can you please tell me how to add external stylesheets with JavaScript? I’m trying to add them by creating a link element with a rel=”stylesheet”, type=”text/css” and a valid href and then appending this to the head element but it doesn’t seem to work. I’m quite sure my css files are good since when stripped down they only contain body {background-color:#ff0000;}.

It’d be great if you could post a solution because I really don’t want to spend another hour thinking about this - I already spent four and I got nowhere.

Image by Edd Dumbill via Flickr

The other one is from the new kid on the block, the jQuery author and JavaScripter extraordinaire John Resig, called Pro Javascript Techniques. Reading the jQuery code is always one of the most fascinating parts of work, so I just had to order it.

I’ll try to post a review of both of them as soon as possible, but it might be later than I hope since I have a lot to do in these coming weeks.

Image via Wikipedia

For my Slovenian readers

1. Finance unfixed is a script that will unfix the header of finance.si. This means the header will scroll and you’ll get more space to read the article.
2. RTVSlo OI is a script that will remove the header from the OI page on rtvslo.si again leaving you with more real estate for reading.
3. Delo is a script that will help your eyes when reading delo.si news site since it’s small default line-height might make them hurt.

Developers

1. JSLint highlighter will help you read the JSLint results. If you write JavaScript and don’t know what JSLint is you should go check!

How to work it

Well first you have to have Greasemonkey installed. After that installing a user script should be as simple as a click of a link. When a script activates you’ll see a little green box that will say ‘Greased’ in the top right corner. Clicking it will toggle the script - either it’s on and active (green) or off and the page looks as it would in the first place (red). You can also toggle the script with alt+g.

Related articles by Zemanta

• Make Google Reader Widescreen-Friendly [Featured Greasemonkey User Script]
• Get More Work Space with Writing Room 4 Google Documents [Featured Greasemonkey User Script]
• Play Chickenfoot With the DOMinoes of the Web
• Roll your own Firefox scripts with Chickenfoot
• iGoogle Header Remover Improves Screen Real Estate [Featured Greasemonkey User Script]
• Get Download Links to High Quality YouTube Vids [Featured Greasemonkey User Script]

Book cover via Amazon

It’s mostly a bugfix release on the front-end part while there are quite a few fascinating developments on the back end. The first one is that we now suggest CrunchBase links to companies and people and we also suggest images to go with that. So if you’re writing about a start-up, a funding round, investors or anything else that is present in CrunchBase you’re likely to get better suggestions.

We’ve also added Amazon book covers for books that we find in Amazon (like Designing With Web Standards by Jeffrey Zeldman or Transcending CSS by Andy Clarke).

The biggest news is that we were able to transfer the Zemanta experience to Windows Live Writer which is our first desktop application integration. I hope this brings joy to the users of Live Writer. Being the first desktop application integration it didn’t go without glitches but I hope we fixed all the bugs, even those that were found by the first users.

We also have a new home page for everybody who doesn’t yet know what we do. If you don’t have our extension/plugin installed and you’re a blogger give it a go - you won’t regret it.

Image via Wikipedia

1. Consistency

   There’s probably a lot of stuff that acts completely consistently but I think we can find this in all operating systems. What I really hate is that moving through text with the keyboard is really utterly inconsistent on a Mac. My Macbook keyboard is missing buttons that are very valuable to me when coding - Page down, Page up, Home, End. There are hints of these with Fn + arrow keys but in every application these act differently. And this all changes when using the wireless keyboard. The same goes for jumping over words / phrases…

2. Intuitivity

   I didn’t get the install. Why would I have to drag something to Applications if I already decided to install it? It’s like a waiter coming back and rechecking your order. And it’s not really that intuitive - it took me a few installs (to get one where it was neatly explained with a “drag the app to the Applications to install”) to get it.

3. Effective and appropriate metaphors

   I could agree with this but then again I have the desktop set to two screens and when on the top screen and an application is positioned so that it should appear on the bottom screen it doesn’t. Which isn’t really consistent. After a few tries I figured out that you can actually move stuff around if you persist long enough. Made me think though.

4. Informative error reporting on-demand

   If this was true it would tell me that my wireless connection went down and I wouldn’t have to recheck it all the time. And it goes down often even though the other side is a Time Capsule which should be totally compiant.

5. Hiding the technical details

   Great for novice users. But once in a while you want to get to know something more about your computer. And then you have to download 1GB of developer tools to get a simple compiler. I know, I’m not the target audience, I should really have a Linux instalation, right?

6. Fitts’ Law

   I’m quite sure that I do a lot more mouse miles on a Mac than on a PC. There’s a simple reason — when you have two screens you have to decide where your menu bar will be. And if you’re using an application on the other screen you’re bound to have to make a trip every time you don’t know a keyboard shortcut. And you don’t if you’re a rookie user like me. I think this was a neat idea in the age of small single screens but times have changed - need to move on Apple…

7. User input feedback

   Having no OK and using auto-save and auto-apply where possible is great. If it really would be used this way consistently. Unfortunately some situations aren’t really the auto-save type and this makes you think - will the next click already apply or will it just change it and I can undo everything I made with a simple click on the Cancel button?

8. User support and navigation

   This really is a great feature but it’s not a plus anymore. Vista has the same feature implemented and if we only look at it from a view of a user the only difference is that Vista’s is a bit slower. On the other hand it finds more stuff.

9. Workflow

   This has more to do with the way you use an OS then the features of Mac OS. The only difference is that Mac OS actively discourages maximizing apps and has more features that help you find lost windows. The difference is getting smaller though.

10. Even kernel panic looks nice!

    Haven’t ever seen a kernel panic yet. That doesn’t mean my Mac has never crashed, it only means I never saw a the panic screen. It crashed with a black screen, auto restart or just freezing.

I agree that there are many features that stand out on the Mac OS X but it also has a lot of stuff that is not as good as it could be. A nice example is the Finder that looks the same when opened as an application or when used as the browse window in another application. The only problem is that in the second case all the control-click options are gone and if you try to open a file and remember you have to update your repository first you have to go to another window and update it there.

Related articles by Zemanta

• Windows’ days may be numbered
• How the Mac is Becoming an IT Standard in the Enterprise
• A New Era of Platforms, Is This Web 3.0?

Yep, again.

Image via Wikipedia

I guess the trick is to set up IMAP access to the account from another app first - when I added the account to my Apple Mail app and tried again it set the account up immediately.

Let’s say you have 10 divs that you attach to and 10 elements that you need to attach. In the “normal” case this means you will call appendChild 100 times and cloneNode 100 times. In the “fragment” case you will only call appendChild 20 times (10 to append the elements to the fragment and 10 to append the fragment to the divs) and cloneNode 10 times (when appending the fragment to the div). My thinking was that with clone you don’t really gain much as it in effect must clone 100 nodes even though it is called only 10 times, but you do gain some time with less appends and you might gain some more time by not appending each node to the visible document which should trigger less redrawing.

As I don’t like to be in the dark I set off to test some of these assumptions. I didn’t run the test in all browsers so Firefox 3 on Mac will have to do:

Append 10 nodes to a detached node

60us

Append 10 nodes to an attached node

360us

Append 10 nodes to an attached node, display:none

160us

Append 10 nodes to a fragment

60us

This means that appending does seem to be slower when you are attaching to nodes that are in the displayed document but also that appending to an element is no slower than appending to a DocumentFragment.

The next test I wanted to do is to see how speed of clone changes when you have the same number of elements in different depths:

Clone a detached empty node

15us

Clone an attached empty node

15us

Clone an empty fragment

15us

Clone an empty node (deep)

15us

Clone an empty fragment (deep)

15us

Clone a detached node with 9 subnodes (total of 10 nodes)

27us

Clone an attached node with 9 subnodes (total of 10 nodes)

29us

Clone a fragment with 9 subnodes (total of 10 nodes)

27us

Clone a detached node with deep subnodes (total of 10 nodes)

28us

Clone an attached node with deep subnodes (total of 10 nodes)

28us

Clone a fragment with deep subnodes (total of 10 nodes)

27us

Clone 10 detached empty nodes in a loop

95us

As you can see the changes in test times between similar variations aren’t significant. It does however pay off to clone bigger chunks of the tree with the deep parameter.

This means you should only gain by using DocumentFragment when you’re attaching many sibling nodes that don’t have a single parent node. A simple case for this would be when you’re attaching items (<li>) to an existing list. On the other hand if you are attaching a whole list you would not gain anything since what you could do is set up a list and clone the whole list and attach that:

Append 10 items to a single list (directly)

100us

Append 10 items to a single list (fragment first)

107us

Append 10 items to 10 lists (directly)

2000us

Append 10 items to 10 lists (fragment first)

570us

In the first case, when attaching to a single list, you actually lose time with the fragment first method because you first attach items to the fragment and then attach the fragment to the list. I must remind you that you don’t need to do any cloning here since you’re only attaching the items to a single list. This means no gain due to clone being faster on bigger chunks. The second case mimics the case that John presented in his post and the difference is obvious.

The lesson: if you’re about to attach a lot of sibling nodes into more than one location (in other words you’ll need cloning) it’s smart to use a DOM DocumentFragment for that.

Related articles by Zemanta

• Increase DOM Node Insertion Performance
• DOM DocumentFragments

Image via Wikipedia

This idea that how famous you are, and how many people know your name, actually increases the value of everything you own and everything you do, is kind of fascinating to me. But just how famous do you have to be? And is there some direct correlation between how many people have heard of you and the worth of your actions and possessions? Kevin Rose has 50,000 followers on Twitter. How much do you think he could get for his toothbrush?sarahcpr

I don’t think he’d get much actually. He’s too accessible. Oh and by the way - we have a new reblog.

Since this was probably just left out of the interface I opened about:config and filtered with cache which gave me a few entries. The most interesting one was browser.cache.check_doc_frequency. Unfortunately it has a numeric value with a hidden meaning. And I had no idea what that meaning is.

I googled the thing and found a mozillaZine article about it. It explains how it works — the property defines how often the browser checks for a new version of a specific file. The possible values are as follows:

0

once per session

1

everytime

2

never

3

when out of date (default)

The default is 3 which is not very good for development purposes when you want changes to take effect immediately. What you want is 1 which means that every request will go to the server every time. You’ll get many 304s but you’ll also get a 200 as soon as a file changes on the server. So I changed the value to 1 and now I’m a happy developer.

Image via WikipediaThe JavaScript speed testing I do is very simple. I take a user specified piece of code and eval it, then I take the name of the function to call and eval that which means I get a pointer to a function I need to call. I set the number of times I want the function to be executed and then I prepare the interval.

The testing takes place in a function that is called every second which should give functions enough time to do what they’re supposed to do the specified number of times. The time is measured by setting a variable to the current date (and time of course) and then the function is executed in a for loop specified number of times. Immediately after the loop the time is measured again and the difference is the time spent by the loop. To be able to validate the output of the function I assign whatever the function returns to a variable (all the variables are set up before any of this happens). So the code looks like this:

t0 = new Date();
for (i=0;i<times;i++) {
	r = fn();
}
t1 = new Date();

The first thing when doing such speed test is to run an empty test. What we want to know is how much the whole time measuring takes. It’s got something to do with the fact that as soon as you measure the time you change what’s going on and also the time it takes to do that. And the fact that we’ve got a loop, a compare and an assignement going on.

So I ran this function test(){} a 100000 times. Since it doesn’t actually do anything you’d expect to get small and very similar times. And you do. So the next thing was to try something that actually does something, like function test(){var a={b:1};}. I expected bigger times but still quite similar. And I got such times in all browser I tested except Firefox. At first I thought that it might be something with the operating system. Or the extensions. Or any other number of things that could delay a JavaScript. But after quite a lot of tests on other browsers and platforms I’m quite sure that Firefox is the one to blame.

I tested Firefox 2 and Firefox 3 and both have the same problems. The only difference being that Firefox 3 has bigger problems — the times go up by 3-4 times the normal time, while in Firefox 2 I only saw a 2 times increase. I should mention that the biggest time in Firefox 3 (even with the increase) was still smaller than all the Firefox 2 times. What I did find out is that Firefox is a completely unreliable browser for speed testing. I have no idea what’s causing this but I’d really like to know. Anyone?

And while am at it — with Firebug 1.2 and all the panels on the times were about 3 times slower on Firefox 3.