HTML Lint is a tool that makes sure your code looks good. While XHTML was very strict with syntax HTML 5 is more lenient like previous versions of HTML, which means keeping consistent code styles will become more difficult. Validating is not good enough anymore.

HTML Lint is under constant development. If you find a bug, report it on Twitter.

It started in Seattle, at An Event Apart. Jeremy Keith said in his presentation that validation for HTML5 doesn’t make much sense anymore and that there should be a Lint tool. I started thinking about it and after lunch I asked Jeremy what options he wanted in it. I added some of my own and made the first version of it flying to Phoenix (going to IA Summit) and then fixed it flying back to Ljubljana.

We released the first version soon and updated it with a new design a few days ago. I’ve been putting the update off as I had a few other projects going on, but Jeremy mentioned it at Drupalcon and Remy pointed his htmllint.com to it and tweeted about it. So it had to be done.

HTML Lint was coded in Python by MMM, which consists of me (Marko Mrdjenovič) and Marko Samastur. The design for it was done by Sara Tušar Suhadolc. The source code should be available soon.

Related articles by Zemanta

• Book Review: A Book Apart’s HTML5 for Web Designers by Jeremy Keith (reybango.com)
• validate() || dont() (wait-till-i.com)
• The value of HTML validation (nczonline.net)
• CSS3 is not HTML5 (456bereastreet.com)

A lot has been said about why Keynote on the iPad is bad. I agree that most of the issues mentioned are a problem, but there are just a few I really care about:

1. No presenter notes. I like my numbers in notes and not on slides. In case anybody asks I’d like to be able to check the screen and tell them. How about a drawer similar to the slide index that comes from the bottom of the screen? Oh, and not removing notes on import…
2. Can’t see which slide I’m on. I have the problem of checking the projection as it is, I don’t need the software to make me do it even more. This is also problematic when using “the laser pointer” – you have no idea what you’re pointing at unless you check the projection. I could do with a faded slide in the background.

Most of the others would be nice to have, but these are just a big pain. Until they’re fixed the iPad to VGA connector was just a waste of money…

I’ve been trying to write something for some time now. As I obviously suck at blogging I decided to just post this short list of stuff that happened in between.

1. I now work part time at Zemanta. I’ve also downgraded to Head of Frontend as knowing everything as VP Engineering would be kind of hard. This gives me more time to work on my own projects.
2. I’ve been to Seattle for An Event Apart and I have proof. It was a great conference and I’m writing a review post. It’s taking more time than I expected. I should have known better.
3. I’ve been to Phoenix for IASummit. Another great conference and a great community. The closing plenary by Whitney Hess made me want to go again next year and help out. I promised to write a rookie review, but haven’t yet. I also hope to make it a review post.
4. I have an iPad. I love it. I should write a post about it but I probably won’t. First observations? I tweet more. I attribute that I’m chattier on Twitter to that and to the conferences. I need to upgrade my blog so I can blog from it. Maybe then I’ll blog more.
5. At An Event Apart Jeremy Keith said that it would be lovely if somebody made a tool that would check HTML5 for more than the validator does. I did the first version on the plane (SEA-PHX and PHX-ZUR). Marko Samastur wrote most of the Django app and it’s now online at http://lint.brihten.com. It has an API and will be opensourced soon. It is the first MMM project.
6. I started thinking of doing something very cool next year due to Andy Budd‘s convincing at the IASummit karaoke, hosted by the very cool Kevin M. Hoffman. I shall disclose the details at a later date, but it will be also a MMM thing.
7. EuroIA call for papers is open and it will only be open until Sunday, May 16 24:00 CET. The conference will be in Paris in September and I think you should check it out.

Enough about me, how about you? Who am I kidding, there’s no one out there…

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…

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)

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)

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.

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

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.

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.

Adria Airways

The first page I want to put to the test is the new page of the first and the biggest Slovenian airline. It was recently launched by my ex colleagues at Parsek as the second version to be made there. The first edition was designed and prepared in another agency and Parsek only did the backend while the new version is all Parsek. To be fair the biggest and the most important part — the reservation module — is still made by the french company Amadeus.

The new design tries to incorporate a leaner navigation with less elements even though it became wider, almost reaching the 1000px mark. The front page is much more sales oriented, displaying a lot of useful information. I can’t get past the color scheme that is really too dull. There are quite a few validation errors, the ones in HTML mostly due to non–escaped ampersands, while those in CSS are just sloppy coding without checking the validator.

I was surprised to see that some stuff doesn’t work well with Firefox 3 and Safari 3 even though the first one isn’t released yet (will be tomorrow) and the second one doesn’t have a lot of users in Slovenia. I’d still stick to what Yahoo! has to say in their Graded Browser support table for browser support.

I was positively surprised at how well some inside pages are designed down to the last dot and icon and negatively how bad the pages that “only” present CMS content look. I don’t know whose fault this is and I don’t even care, it doesn’t matter for the end user. I’m sure the guys at Parsek will check these pages out and try to make changes that will make them better. When I first saw the design while I was still at Parsek I wasn’t sure if the title on the right would work but now that I’m surfing the page I actually think it does. There is one problem there though – if you visit this page (screenshot) you’ll see that you can see its title “About us” four times in a very small area. It’s nice to know where you are but isn’t this a little bit too much?

NLB

The next big redesign is the biggest Slovenian bank which redesigned their site after quite a while. I don’t really know what to say about the redesign – the last one was horrendous so this one is easy on the eye. It too got wider and restructured so people can find relevant information easier. The home page lists all the products for residents and businesses so you can access them directly.

If the design got overhauled the backend didn’t — if it did it got it fashion tips from the 90s. Validation returns a lot of errors and — prepare for a shock — the encoding is iso-8859-2. The number of non semantic elements is significant and inline scripts are there too (<SCRIPT language=JavaScript>).

The most interesting thing about the new page is the fact that it now uses “friendly URLs”. And how utterly broken they are. You could also say this page is a textbook case for how wrong things can go when you don’t think about them. So you’ll have two pages, one at /nalozbe-v-vrednostne-papirje and the other at /nalozbe-v-vrednostne-papirje1. I have no idea how that tells you anything about how the content behind these links is different. It would tell you more if the first was prefixed with /residential and the second one with /businesses.

Another funny thing I noticed is how banners are designed to look as if they weren’t images but rather just HTML parts of the page. The reason I noticed is that I was on the Mac while checking the page and since font rendering is different it looks really weird. I think I might have seen the same difference on Vista with ClearType on.

function fcc_text_reverse(e){
	var j=(e.childNodes)?e.childNodes.length:0;
	for(var i=0;i<j;i++){
		var n=e.childNodes[i];
		if(n.nodeType==1){fcc_text_reverse(n);}
		else if(n.nodeType==3){
			n.nodeValue=n.nodeValue.split('').reverse().join('');
		}
	}
};
fcc_text_reverse(document.getElementsByTagName('body')[0]);

You can also use the favelet / bookmarklet — just drag Reverse text to bookmarks.