Freelance Front-End/Javascript | Creator of Gantt Chart Software Tom'splanner

Best practice: Asynchronous Tracking

noreply@blogger.com (Thomas Ummels) — Fri, 05 Feb 2010 09:52:00 +0000

Don't you want your users to have to wait until the google analytics code is loaded in your page before they can start working? Well I don't! So that's why I didn't include google analytics on the Tom's Planner tool itself until now. Because it is all about performance with these kind of apps. But I just found out about asynchronous tracking. Check it out: Asynchronous Tracking. Seems best practice to me.

Why the iPad is good news for JavaScript developers

noreply@blogger.com (Thomas Ummels) — Wed, 27 Jan 2010 21:12:00 +0000

To my surprise the iPad does not support Flash. This means that flash will be less and less of a viable option for public accessible website or webapplications. Which means more work for the JavaScript developers :-) And it is the fun type of work. Writing JavaScript code for flashy applications is a lot of fun and challenging I can tell you from my experience from building Tom's Planner!

pushing the limits

noreply@blogger.com (Thomas Ummels) — Tue, 26 Jan 2010 14:37:00 +0000

Did you know that IE has a maximum on the possible left offset a html element can have! Somewhere around 1 point 3 million. I didn't know that. Really strange.
click here for an example

magic mouse

noreply@blogger.com (Thomas Ummels) — Tue, 08 Dec 2009 13:53:00 +0000

Something completely unrelated to JavaScript. But related to Development in general: Apple's magic mouse.

When coding more than once you will find your self scrolling through pages and pages of code. So a good scrolling mechanism has it's benefits. Here enters apple's new magic mouse. I just got one and it is really really good.

It has a touchpad and to scroll you just have to swipe over it. It senses how hard you want to scroll by measuring the speed of your swipe gesture. This makes it possible to scroll really fast and it also has momentum so your page keeps scrolling although you just swiped once. When you see the part of the code scrolling by on your screen you were looking for just tap your mouse and it stops scrolling. Also you can swipe horizontally so it is a lot easier to handle long lines of code.

I truly believe that you can speed up your coding significantly by just simply using good hardware. A fast and responsive computer, really big screen, a good set of headphones and from now on a magic mouse from apple for me.

Ext-js good to knows

noreply@blogger.com (Thomas Ummels) — Fri, 23 Oct 2009 08:08:00 +0000

I have been working with the Ext-js framework for quite a while now and there are two things that seem counter intuitive (to me) but are good to be aware of:

1. if you add a component to a container you should call the doLayout method of the container and not the component itself if you want the component to be rendered correctly. If you know how the ext-js framework is set up this totally logically but if you are building an app. it seems really illogical.

2. If you apply the layout type 'fit' to a component it means the content of the component will fit the component not that the component will fit it's container.

And if you are just starting with Ext-js spend some time studying the difference between an Ext-js Element (encapsulated dom element) and an Ext-js Component (a purely js object). It will help you to find your way around in the API a lot easier.

And a last remark: don't be discouraged by the framework in the beginning. I have worked with a couple of different javascript frameworks now (jQuery, Mootools and YUI) and this is by far the one with the hardest learning curve and has the barest documentation. But when applied in the right context Ext-js can be really powerful and worth the effort.

printyourtwitter.com

noreply@blogger.com (Thomas Ummels) — Thu, 21 May 2009 06:36:00 +0000

Recently I built printyourtwitter.com. I built it for fun and because I wanted to print my own tweets . But it turns out that there is a lot of interest for it. Yesterday it was featured on the nerdboytv channel (item starts at 1:45).

From a technological point of view it is interesting to note that this is a 100% clientside app so the infrastructure for this app is minimal. I just serve the 11k of html from my own server and all the js, css and images files are being served from amazon s3 servers. That makes the infrastructure needed for this app really simple and minimal. Which is nice thing if you see what kind of impact it already is making.

Also mentioned on: computeridee.nl, bright.nl, dutchcowgirls.nl and pcmweb.nl, jimlyonsobservations.com and featured on the dutch radio 1 show 'tros radio online' (last 4 minutes).

And the latest buzz on twitter.com

10 Checks Before Launching Your Javascript

noreply@blogger.com (Thomas Ummels) — Thu, 09 Apr 2009 09:09:00 +0000

Inspired by the the article 15 Essential Checks Before Launching Your Website a small list of simple checks to a avoid unnecessary errors when getting your js code in production.

It does not contain the plain good old best practice rules on how you write your js code but these checks are mainly about code snippets that help you develop and debug your code in a fast and easy way that should not be around in the live version.

check for console statements (console.log, console.startTime....)
check for debugger statements
check your outcommented try catch statements
check for large outcommented old code fragments. If you are at the stage of going live this might be the time to get rid of it.
look for fixed url's which might work in the development environment but not on the production server
if you are using google maps make sure you have an api key for the live server
check for credentials in your comments or code (like usernames and passwords)
when using javascript libraries or frameworks make sure you include the minified production version and not the fully commented debug version.
off course the same goes for your own js files
and this last check works for me personaly: check on the "TO DO" string in the js code. When I still need to do some work on a part of the code I always flag it with a //TO DO comment.

This list is probably far from complete. Anybody any suggestions?

Google chrome's javascript at lightening speed.

noreply@blogger.com (Thomas Ummels) — Wed, 03 Sep 2008 06:12:00 +0000

Google just released their own browser chrome. It is said to have a javascript with lightening speed. Since the TomsPlanner code is all about javascript performance I was curious if it would be noticeable. And I can tell you it IS! After testing TomsPlanner for months on IE6 on a five year old laptop while developing, running it in Chrome truly seems at lightening speed. I am really enthusiastic!

To be honest I don't expect the whole world to ditch IE and switch to Chrome instantly. People are just to stuck in their own ways (otherwise everybody would be using Opera right now). In that perspective the arrival of Chrome could be seen as a nuisance. It just means another browser to test against when developing websites and applications. And IE6 on my five year old laptop stays my main testing setup. But with also Firefox 3.1 coming up the benchmark for javascript engine speed for the IE team is getting higher and higher which is a really good thing for the javascript language in general. So exiting times coming up!

Some performance gain almost for free!

noreply@blogger.com (Thomas Ummels) — Thu, 24 Jul 2008 07:31:00 +0000

I am currently writing tomsplanner.com (you can check it out at tomsplanner.com).

And I can tell you developing RIA's is mainly about three things: performance performance and performance.

Today I stumbled upon this trick: http://yuiblog.com/blog/2008/07/22/non-blocking-scripts/

I didn't know it. What an easy way to gain some performance! It is almost as if you get some for free :o). It made my day.

Avoid default drag and drop behaviour in FF3

noreply@blogger.com (Thomas Ummels) — Fri, 04 Jul 2008 09:02:00 +0000

Fierfox 3 offers the user the possibility to drag and drop images around on the pages by default. Which is nice.... I guess. But this behaviour can mix with drag and drop routines written in javascript. So how to cancel the default drag & drop in Firefox 3?

document.addEventListener("draggesture", function(event){event.stopPropagation()},true);

or if you are using jquery: $(document).bind("draggesture",function(){return false})

I haven't seen any mention of this on the net so far so I thought is was worth mentioning it.

(For IE use $(document).bind("drag",function(){return false}))

search the most recent pages with goolge

noreply@blogger.com (Thomas Ummels) — Tue, 03 Jun 2008 10:03:00 +0000

On google.com you can now search on dates! See: http://www.google.com/advanced_search. So you now can get the most recent pages on a subject. That is so handy when looking for information on for example javascript. I was just searching for info on cookies and then you get 5 year old information about netscape. And that happens a lot. Note that the dutch version of google doesn't have this option yet.

a really old tric

noreply@blogger.com (Thomas Ummels) — Wed, 07 May 2008 07:09:00 +0000

I sometimes still use the javascript pseudo protocol in the adressbar of the browser. For instance when diagnosing a javascript related problem when working on a computer with no decent javascript debugger installed.

Until now I always used to put my javascript code inside an alert to avoid being redirected to a new page. But using alert makes it impossible to debug focus and blur events properly. So I searched for an alternative and found out that you can also use void() for this.

So instead of "javascript:alert(put your js code here)" you can do "javascript:void(put your js code here)"

I know it is javascript at it's simplest and it turns out to be standard practice when writing bookmarklets but I didn't know it and haven't seen anyone using it so I thought it was worth mentioning it.

(5) 4 reasons that make IE a better browser than Firefox (from the webapplication developers perspective)

noreply@blogger.com (Thomas Ummels) — Mon, 28 Apr 2008 18:27:00 +0000

- the unbeforunload event gives you the chance to warn the user when he/she leaves the page without saving his/her work.
- the contenteditable property of almost every element.
- direct access to the clipboard so you can actually implement a real cross page/document copy and paste functionality
- you can programaticaly open the 'save as' and the 'open' dialogs of the browser for saving data on the harddisk (later this year I will write a more detailed post on this).
- printing! Printing is sloppy in all browsers but IE7 (I don't know how IE8 is doing). When you print pages they seem to get rerendered by a totally different process then the process that renders the page for the screen. And this separate rendering process is full of nasty little bugs in every well known browser but IE7. With IE7 you actually get the feeling that it prints what you see on the screen.

Note: these are just 5 reasons that make IE a better browser than firefox. I am not saying that IE is a better browser than FF. There are a ton of reasons why you might consider firefox to be a better browser then IE. But to me it always seems possible to work around these bugs and quirks of IE with a bit of creative programing. But the above mentioned features can't be implemented by any amount of javascript programming in FF and that leaves you with... ehm nothing or at least less features for the FF user.

PS i know you can work around the lack of the contenteditable property in FF by using iframes and designmode... but editable content seems to me in the current time such a trivial option that I can not believe it is not implemented in FF yet.

handy

noreply@blogger.com (Thomas Ummels) — Thu, 20 Dec 2007 18:42:00 +0000

for the bookmarks http://www.sprymedia.co.uk/article/Design

A utility for in-page grid layout, measurement and alignment, in the form of a JavaScript bookmarklet. So zero-install :o)

performance json

noreply@blogger.com (Thomas Ummels) — Tue, 04 Dec 2007 19:54:00 +0000

Transformation of a big extensive javascript object to a json string can be slow. Working on tomsplanner I found that the generic functions to do such a thing get to slow in IE6. So I wrote a custom stringifier for the tomsplanner json-schema.

The result is that instead of 2413 milliseconds (using json2.js from json.org) it now takes 70 milliseconds to stringify a standard tomsplanner javascript model in IE6. In Firefox it takes 17 miliseconds instead of 1392 miliseconds.

Conclusion: if you work with big javascript objects you want to pass via json and performance is an issue then it really pays off to build your custom stringifier (especially because it is pretty straight forward and easy to do). Note: in tomsplanner the json will be checked for code injection so in my custom version I keep the security checks to a minimum.

The test page can be found here

conflict jquery json part 2

noreply@blogger.com (Thomas Ummels) — Tue, 04 Dec 2007 19:45:00 +0000

In my previous post i mentioned that json and jquery conflict with each other. Well Douglas Crockford recently changed his version of json.js in json2.js and doesn't use the augmenting of variable types anymore. So now they live in peace next to each other in one page. I advice you to use http://www.json.org/json2.js instead of my solution in the previous post. Douglas's version works perfectly.

Conflict jQuery and JSON

noreply@blogger.com (Thomas Ummels) — Fri, 31 Aug 2007 17:45:00 +0000

Douglas Crockfords json.js and John Resigs jquey.js conflict with each other. This is caused by a flaw in Javascript that is described in this article: http://yuiblog.com/blog/2006/09/26/for-in-intrigue/

So what do you do... Both libraries are really well written. and I haven't found any decent alternatives for Douglas json or Resigs jquery. So correct json or correct jQuery?

Of course the for..in loops in jQuery should be fixed. But fixing json.js is a more pragmatic aproach of the problem. Fixing json.js is a lot easier then fixing jQuery and more importantly json.js will have probably far less new versions and releases as jQuery. So the effort to stay up to date will be a lot smaller.

The adjusted version can be downloaded: json-noaugmenting.js

bug in IE7 when you change position of elements when pagezoom is used

noreply@blogger.com (Thomas Ummels) — Tue, 14 Aug 2007 11:32:00 +0000

In my humble opinion the pagezoom in IE7 is one of the most underestimated improvements of IE. Okay it has its flaws but it is a lot better then just resizing font-sizes. And imagine what you can do with it... now you can actually zoomin on the complete user interface of an application. I haven't seen any desktop application yet that can do just that.

But this pagezoom functionality also turns out to be one buggy $#%%^&$. (sorry for that)

What's wrong?
Just zoom your page to 125% and dynamically reposition an element with text in it. IE7 mispositions the text completely and it does it in a pretty random way. When you resize the browser window, after repositioning your element, IE7 will force some kind of redraw of the page and the problem will be corrected.

This a test page before repositioning:

this it what happens after repositioning the div 200px to the right:

You see what happens?! Even the text in the button is not rendered well!

Then resize the window:

And voila... all is fine....

For an working example click here. (don't forget to set the zoom level of the page)

What does that mean?
This makes for example drag&drop in IE7 within a zoomed page almost impossible.

The solution?
You tell me. I am still looking, i have tried a lot of options. The weird thing is that I haven't found any mention of this problem on the net. All the well known libraries don't seem to have a solution. I have checked YUI, mootools, pkk's new drag&drop script and backbase.

So if you have any idea let me know as soon as i find something I will publish it here.

added 14-8-2007 17:21
okay i have something that works... it is really ugly and needs to be improved (broswer detection, pagezoom detection, values relative to page) but it is a start:

function shakeItUp(){
document.getElementsByTagName("body")[0].style.height="10000px";
window.scrollBy(0,6000);
window.scrollBy(0,-6000);
document.getElementsByTagName("body")[0].style.height="auto";
}

After repositioning your element just shakeItUp()

click here for an working example

Gilde van Front-Enders

noreply@blogger.com (Thomas Ummels) — Tue, 03 Jul 2007 08:37:00 +0000

On the initiative of Peter-Paul Koch, a group of Dutch Web developers is founding the Gilde van Front-Enders (Guild of Front-End Programmers) towards certification and professionalism of commercial Web development in the Netherlands. (Het Gilde van Front-Enders in oprichting nodigt alle Nederlandstalige front-end programmeurs uit zich aan te sluiten. Voornaamste doelstelling van het Gilde is de verdere professionalisering van het beroep.)

for the bookmarks

noreply@blogger.com (Thomas Ummels) — Thu, 07 Jun 2007 14:42:00 +0000

this is verry handy: http://ajaxload.info

Goodbye IE6 and goodbye Font Scaling

noreply@blogger.com (Thomas Ummels) — Fri, 25 May 2007 21:38:00 +0000

Last week it occured to me that probably along with saying goodbye to IE6 we also can say goodbye to worrying about what happens with the page layout when fonts get scaled up by the user.

Firefox and IE7 have both a good zooming button in the right lower corner of the browser. This way of zooming gives a much better user experience then just scaling the fonts. When you come to think of it from a users perspective it seems pretty strange to just only scale the texts on a page and leave the rest as it is.

The only problem is that in my experience elderly (who use font scaling the most) don't tend to use the most modern equipment. They mostly seem quite content (even proud) with their 5 year old PC still in working order. So we might have to wait a little while.

Logging in the console of firebug without errors in IE

noreply@blogger.com (Thomas Ummels) — Fri, 25 May 2007 15:16:00 +0000

In some cases the console in firebug is really helpfull. For instance when you are debugging mouse-events. The downside of using "console.log()" is that it triggers errors in IE. But there is a really simple sollution for that problem. Include the folowing line of code in one of your js scripts and no more errors in IE:

if(!console){var console = new Object();console.log = function(){}}

This snippet is tested in IE7 and IE6

update 13-11-2007: or use firebuglite: http://getfirebug.com/lite.html