Tag Archives: html

JQuery Performance Tests – Bazaar

JQuery is currently the most popular JavaScript library on the world. Therefore apparently everybody seems to be an expert on it.

I just spend some time reading articles from ‘experts’ and what they advise you to do.

NB! All tests which follow are executed on the 3 browsers: Chrome 35, IE 11 and Firefox 30-32.

1. $(“#id”).find(“p”); JQuery performance is 2 times faster than $(“#id p”); .

After running tests on those 2 I can conclude only that he must be one passionate  IE user :)

For the 2 other browsers the process time for the both functions is nearly the same.

For those who want to try the test on their own: http://jsperf.com/jquery-performance-test-2


2. Learn the entire library.

The example that was given in this article to support this theory was the following.

You shouldn’t use that:

a.hasClass('b') ? a.removeClass('b') : a.addClass('b');

You should use that:


I agree that the second one is obviously shorter but that is pretty much all advantages to it.

Let’s prove it though instead of leaving empty statements in the air.

I run the both pieces of code in 3 browsers and here is the results.

The JQuery performance for all browsers is better with the manual and add/remove of class functionality than the toggle one.

Here is the actual test so you can try it on your own: http://jsperf.com/jquery-toggle-class-test

3. $(“#id p”);  performs faster than $(“p”);

The only browser on which that is true is Chrome. And in IE actually $(“p”); performs much better.

Here is the test http://jsperf.com/jquery-single-vs-nested-description

4. Id vs Class selectors vs HTMLselectors

This one is really old advice from the time when JavaScript was still not popular and the experts on it weren’t that many.

Since JQuery is built on JavaScript we would only expect that the  JQuery performance for IDs should be also the fastest.

In this test we have clearly faster ID search for all the browsers.

On second place is the class selector and the last place remains for the HTML selectors.

Development of emails – practical tricks

The purpose of this article is to give some practical advises for those who want to make professional and elaborate development of emails from scratch.

Every well developed email should consist of two parts: html and plain-text.


The plain-text version is used from some mail clients which are not able to process the html or are not able to process fully the email content-type.

The plain-text part is relatevely easy but there are still some issues that you should take into consideration during the development of this part of the email.

The most major one is the email constrain for 78 characters per line.

The text version is usually presented as is. That means that is there is a link which takes more and 78 characters it will be presented on several lines. In most cases the mail client highlights only the first line of the link or it makes empty space on the line switch. In both ways normally the client won’t be able to handle such link and he will consider as broken.


  • Consider using shorter links – that is obvious solution but sometimes the most easy solution is also the right one. There is no point for you to develop something too elaborate if you could get around it by making better named links
  • Use link-shortener – I could be buyest but I would recommend the Google library … It is easy to wrap your head around and it is pretty straight forward.

HTML part

The html part is the one that 90% of your clients will end up seeing and it is the one that usually creates the most troubles.

The first think that you should keep in mind when you develop emails is even though that you are using html and css most of the tag and structures won’t be recognized the same way as in a normal web browser.

n other words for those who know the html from 15-20 years ago – this is the level of tags and structures that you are able to use.

And here are some advises for those who don’t want to commit suicide in the middle of some email coding 😀 😀

1. The CSS should be inlined.

Most email clients doesn’t process at all styling which is different than inlined. On the other hand I believe that developing with inline styling is really frustrating in long term. So the thing that I usually do is develop with normal CSS in other style and afterwards I use auto-inline tools, functions, libraries which  process the entire document and put the needed styling on the right places.

Example of such tool is: http://beaker.mailchimp.com/inline-css

2. Use tables and avoid DIVs

Yes, probably that is exactly the opposite that you have heard which developing normal html pages but the truth is that you should consider the mail clients like really outdated browsers and using DIVs could end up horribly.

For example mail clients like Hotmail and Outlook don’t recognize padding and margin on divs at all. Furthermore background pictures on divs are problem in almost every mail client. Furthermore floating, positioning, negative margins and padding is no-go all mail clients.

3. Avoid pictures and text mixed in the same content.

Setting background in email picture can be tricky. Generally you should stick to tables and letting them define the size of the picture.

The code above will work for most mail clients but as usual Oulook is a bit ‘special’ 😀 😀 //as most Microsoft products

In order to make the picture also visible in Outlook you should add group of special tags which only Outlook can process:

4. Code for Gmail and fix for Outlook

You should get real with the fact that you won’t be able to make the email looking exactly as you want for all mailboxes that’s why you should focus your attention on the most popular ones. Gmail is not only one of the most popular clients but it is also the easier way to start with the emails. Once when you make the email looking good in Gmail the Hotmail/Outlook nightmare will begin.

5. Use ‘view online’ link

There are around 10% from the receivers of emails that press on the view online link immediately after opening the email. Having link like that will give additional possibility for your users which have unconventional mailboxes.

JQuery Multiselect – Abbreviation List

Recently I had a struggle with jQuery Multiselect Widget.

As general it is really flexible and easy to use, but I was willing to have a list with abbreviation of all selected values (separate with commas)

More or less it should look like that at the end:

Continue reading JQuery Multiselect – Abbreviation List