I agree with Crokford that only with copy/paste now JavaScript has the reputation of badly standardized language with no programmers that understand it at all. It’s true, but however this maybe made JavaScript so popular, now all the libraries come with that abstraction in mind and this gap seems to be smaller.

In addition I’ll say that’s fine if Crockford or PPK say something like that, but the primary goal of every web developer is not to be in good relations with Crockford, but to satisfy clients! I’d like to repeat – clients!

This is one of the main problems of web design and development now, even if it sounds strange. The thing is that with round corners the elements become more nice and groovy and most of the web designers make such design templates. The problem than comes over the web developer who’s supposed to convert this into HTML and CSS. Of course it would be nice if all browsers support rounded corners in CSS, but they don’t and guess what IE fully doesn’t support it.

-moz and -webkit

Most of you have heart about this patches in CSS when you can use this prefixes for Mozilla based and Safari’s Webkit based browsers. Than you can use border radius with no pain, and you get the same effect as with using images.

-moz-border-radius : 4px;
-webkit-border-radius : 4px;

Of course on IE this doesn’t work and the element remains with square corners. But what the question is, should we make both versions for non IE browsers without images and a version for the “great” MSIE and all of its versions?

My answer is: no!

Although many sites do that, see vimeo for instance, there’s no need to support that. As the rumor and the MSIE blog says in IE9 which is … coming soon there will be – border-radius property.

That’s awesome!

Finally Microsoft has done something good! So stop using background images! This is hard to maintain, difficult to make and it’s bad for the browser loading time, because of the extra images/sprites.

That’s why I decided to show what’s not and what is fancy tooltip, with the help of jQuery. Of course don’t hesitate to make with every other library or pure JS code.

What is NOT fancy?

It’s not fancy when the tooltip is with fixed position. In the example here I made one pretty small sample:

What is fancy?

In the other side you can make the tooltip moving with the mouse pointer which is way better, as you can see here:

If someone asks you what is the javascript in modern web developer, probably you should answer it’s almost the half of the traffic of your site and it’s almost everything when dealing with user experience.

Today’s big web apps are useless without it AJAX/JS part. Think about Facebook, Google products, Twitter, Yahoo!, Youtube.

Actually they made this a standart. The times when you used to use JavaScript as a helper language just to figure out how a drop down menu will work are far way in the past. Now JavaScript is everything in a rich web sites. With no JS they will be no rich at all! Then it comes the question how to improve sites with lots of javascript. Actually one of the main problems in the web now is that JavaScript is blocking content.

Blocked by the JavaScript

What that means at all is that until the browser receives and parses the JavaScript file/s it doesn’t process anything else, it even doesn’t load any other resources. Now you can imagine how big the problem is. When it comes to large files more than 100K the user experience will be very bad!

Optimize the web? What about optimizing JavaScript!

If the problem is so big as I described above why should we doubt about where to start with the optimization process? But of course with the JavaScript and the natural question that rises is how this can be optimized at all?

Three steps

Like me, many of you may heart of some techniques that improve javascript performance. Here are some I was able to select as important:

1. minify/compress

That’s rule number one. If everything that is a JavaScript file is processed once it arrives to the client than make it smaller and make it go faster trough the wire. Actually one technique to speed up things more is to concatenated all the files you have into one single big file. Although this will not spend you some space will reduce the HTTP requests and therefore speed up the loading process. Good tools that you can use to minify javascript files are the Yahoo’s YUI Compressor, that beside that compresses CSS and Google Closure Compiler. Both are extremely useful and by the last measurements the Google’s Compiler is even better, but it’s up to you to decide which one to pick up.

2 .write fast and smart code

You can minify everything that’s JavaScript and the code may remain slow. But why is that? That’s because the JavaScript is written in a bad way. You know there are many resources in the web describing what is a bad and what is a good practice when writing JS. Even more you can measure it by yourself if you’d like to use the Firebug’s profiler. That’s a good start to avoid bad practices.

3. improve loading – lazy loading

That’s a bit more complicated. If there’s a really big javascript file after compressing and concatenating all the JS functionality remains big. How to avoid that? Simply let’s the user to see the most important functionality and than load the entire app. Some good tutorials about lazy loading again can be found online. Don’t hesitate to search about.

Beside this really basic advices I’ll continue to write in my blog about specific techniques how to improve the JavaScript as this is one of the most interesting parts of web development by me.

What I’m about to say comes under the tag of “very good news” for those how didn’t know what repaint as and what cssText is.

When it comes to the repaint and reflow, which sounds really strange, there are lots and lots of articles what this is, but in breve, just to let you know what is and where’s the bad part of it I’ll describe it again.

Almost every web developer with little or more experience with JavaScript has accessed an element style property with it. This is done like so:

document.getElementById('element_id').style

Now when you try to dynamically place this object somewhere in the browser, you normally just write:

document.getElementById('element_id').style.top = '100px';
document.getElementById('element_id').style.left = '100px';

and that’s when you assume the element is correctly built and his position is absolute. If not – even worse you’ve to make it, again with JavaScript. Which is so sad.

But where is the bad thing that happen in the code above? The bad thing is that the browser should now repaint what you see, once to show you the element with different top position, and again for the left position. This, of course, for the normal browsers occurs very quickly, but don’t ask what price your CPU pays for that!

In the case with only one element moved only once, that’s OK, but what if we move thousands of markers around a map every ten seconds? Than you cannot move your mouse because of the CPU usage.

The simple solution, which in fact is very “software” clear, is to make one class in the CSS definition with both top and left positions predefined:

.my-class { top: 100px; left : 100px;}

and to assign it with:

document.getElementById('element_id').setAttribute('className', 'my-class');

That code makes the browser to reflow only once.

But to make the things clear, let’s ask what if this top and left positions are dynamically calculated? You cannot predefined thousands of thousands of classes, don’t you? And if you can where the hell the optimization is gone?

The right answer is: use cssText.

This is the solution for large scale apps. Just replace the above code with:

document.getElementById('element_id').style.cssText += 'top:100px;left:100px;';

That helps the browser reflow only once and your CPU to breath. Even better that helps other people CPUs to breath, because as you know JavaScript code is executed on the client!