Archive for the ‘technology’ Category

Testing JavaScript in IE

Thursday, September 18th, 2008
Are libraries guns in the hands of children?

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.

Reblog this post [with Zemanta]

Undocumented jQuery constructor

Wednesday, September 17th, 2008

In jQuery it is possible to create nodes in a foreign document by calling jQuery('<div>sample html</div>', foreignElement.ownerDocument);. If somebody documented this I wouldn’t have lost the last hour or so.

This is why I like wiki style documentation.

Reblog this post [with Zemanta]

Reading JavaScript

Thursday, August 28th, 2008

Douglas CrockfordImage by Edd Dumbill via Flickr I’ve just received two books about JavaScript that will keep me entertained over the weekend. The first one is from the father of JSON, JSLint and JSmin Douglas Crockford, whose series of lectures on JavaScript is really a great video introduction from beginner to intermediate and sometimes even pro level and is called Javascript: The Good Parts. I haven’t even tried to look at it because I’m scared I’ll start reading it and won’t get any sleep.

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.

Reblog this post [with Zemanta]

Discovering Greasemonkey again

Friday, August 15th, 2008

Meissner effect: levitation of a magnet above ...Image via Wikipedia I’ve been rediscovering the joy of Greasemonkey scripts lately. For those who don’t know, Greasemonkey is one of the best extensions for Firefox ever made (the other being Zemanta of course:) that allows you to run JavaScripts on specified pages. This doesn’t really mean much to the non-technical crowd, but to us geeks this means you can do almost whatever you want with the page. As I make more and more of these I decided to share them here.

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.

Reblog this post [with Zemanta]

Firefox 3 Release Event 2008

Tuesday, June 24th, 2008

So I’ll be talking at Firefox 3 Release Event at Kiberpipa today. Feel free to come listen to the talks or just come to the party. If you can’t come you can watch the whole thing online (the link is likely to be available somewhere on the event page).

Review: Adria Airways and NLB

Monday, June 16th, 2008

Recently two more big and very frequented Slovenian sites relaunched and I think they too deserve a mention.

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.

Zemanta Pixie