Although fb is pretty clear on how to do it (http://bit.ly/2eGfFDv) – many developers are still doing it wrong. So this blog post is here to be reminder for me and others, also it will propose small upgrade to the fb recommended practice.

The naive and wrong way to do it

<script src="//ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>
<script>
window.fbAsyncInit = function()
	{
		FB.init({
			appId      : 'your-app-id',
			xfbml      : true,
			version    : 'v2.8'
			});
		
		// do something with DOM and jQuery
		$('#loginbutton,#feedbutton').removeAttr('disabled');
		FB.getLoginStatus(updateStatusCallback);
	};

  (function(d, s, id){
     var js, fjs = d.getElementsByTagName(s)[0];
     if (d.getElementById(id)) {return;}
     js = d.createElement(s); js.id = id;
     js.src = "//connect.facebook.net/en_US/sdk.js";
     fjs.parentNode.insertBefore(js, fjs);
   }(document, 'script', 'facebook-jssdk'));
</script>

The problem with this is the race condition: at the time fbAsyncInit gets called there is no guaranty that DOM is ready and that #loginbutton or #feedbutton is there, ready to be used.

This bug is hard to spot and debug – since it will not always manifest. It is very likely that you as developer with fast connection and computer will never experience this bug – but your clients (visitors) might.

So it is best not to leave this to chance since fix is so easy.

Facebook recommendation

Learn more: http://bit.ly/2eGfFDv

<script src="//ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>
<script>
$(document).ready(function()
{
	$.ajaxSetup({ cache: true });
	
	$.getScript('//connect.facebook.net/en_US/sdk.js',
				function()
				{
					FB.init({
					appId: '{your-app-id}',
					version: 'v2.8'
				}
			);

		$('#loginbutton,#feedbutton').removeAttr('disabled');
		FB.getLoginStatus(updateStatusCallback);
	});
});
</script>

Problem with this approach is that you are changing global jQuery ajax cache settings.

The better way

<script src="//ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>
<script>
$(document).ready(function()
{
	$.ajax(
			{
				url: '//connect.facebook.net/en_US/sdk.js',
				dataType: 'script',
				cache: true,
				success:function(script, textStatus, jqXHR)
				{
					FB.init(
						{
							appId      : '{your-app-id}',
							xfbml      : true,
							version    : 'v2.8'
						}
					);
					
					$('#loginbutton,#feedbutton').removeAttr('disabled');
					FB.getLoginStatus(updateStatusCallback);
				}
			});
});
</script>

Now we did it. No race condition between jQuery, fb SDK for JS and loading of DOM. Also global jQuery Ajax settings are untouched.

Cheers! :)

The specified path, file name, or both are too long. The fully qualified file name must be less than 260 characters, and the directory name must be less than 248 characters

Yes, Windows can’t delete this directory because of the limitations in system. What now? Don’t worry, NPM comes to the rescue.

Just install Node package rimraf.

> npm install rimraf -g

Move to direcotry above node_modules and execute.

> rimraf node_modules

Tell me how it goes :)

I wrote a simple regexp to strip few characters (pipe, minus, apostrof and white-space) that are added before the actual item.

 function cleanOptionText(txt)
 {
 return txt.replace(/^[\s|'-]+/, '');
 };

It worked just fine on FF9 and Chrome but in IE8 only the first pipe (|) was removed. After some debugging I discovered that I have both spaces and non-breaking spaces that should be removed and that in IE8 class shorthand \s (which should include all white space) doesn’t include non-breaking space.

Code for non-breaking space is 0xa0 (dec 160) so regexp should be updated as follows:

function cleanOptionText(txt)
{
return txt.replace(/^[\s\xA0|'-]+/, '');
};

Also we took opportunity to update our javascript trim functions:

String.prototype.trim = function()
{
return this.replace(/^[\s\xA0]+|[\s\xA0]+$/g,"");
}

String.prototype.ltrim = function()
{
return this.replace(/^[\s\xA0]+/g,"");
}

String.prototype.rtrim = function()
{
return this.replace(/[\s\xA0]+$/g,"");
}

Here is complete html test file:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
  <head>
    <title>nbsp test</title>
  </head>
  <body>
    <form action="#">
      <fieldset>
      <select id="testselect">
        <option value="1">&nbsp; &nbsp; Some option</option>
      </select>
      </fieldset>
    </form>

    <script type="text/javascript">
      /*<![CDATA[*/

      var txt=document.getElementById('testselect').options[0].text;

      var analyizeTxt='';
      var l=txt.length;
      for(var i=0; i<l; i++)
      {
        analyizeTxt+= '[ ('+txt.charCodeAt(i)+')=('+txt.charAt(i)+')]';
      }

      alert(analyizeTxt);

      var newTxt1 = txt.replace(/^\s+/, '');
      alert('Using only \\s = ('+newTxt1+')');


      var newTxt2 = txt.replace(/^[\s\xA0]+/, '');
      alert('Using \\s and \\xA0= ('+newTxt2+')');
      /*]]>*/
    </script>
  </body>
</html>

$("div").attr("id", "holder");  // OK  
$("video").attr("autofocus", true);  // OK  
$(window).attr... // NO  
$(document).attr...  // NO  

First, a little introduction to the subject of tooltips:

The tooltip is a common graphical user interface element. It is used in conjunction with a cursor, usually a mouse pointer. The user hovers the cursor over an item, without clicking it, and a tooltip may appear — a small “hover box” with information about the item being hovered over. (Wikipedia)

In your regular computer usage, you see tooltips every day (all day) and chances are that you don’t even notice them anymore. All browsers display the title attribute of an HTML element as a tooltip when a user hovers the mouse cursor over that element. Some browsers will also display the alt attribute of an image as a tooltip in the same manner (if a title attribute is also specified, it will override the alt attribute for tooltip content).

On the wide spaces of world wide web you can also find custom generated tooltips (eg. in javascript or Flash or just by absolutely positioning of elements via css), but they are not the subject of this post. I did my fair share of tooltips in different Flash projects I was working on, and each time we did a new tooltip type, we tried to make tooltips an integral part of visual part of design having in mind usability.

From user stand point – I never paid too much attention to browser tooltips. Probably because I got used to them. If website I am visiting is done well, if I hover something (probably an image) – a default browser tooltip will appear over that element. That usual and expected behavior was enough for me to put browser tooltips somewhere in back of mi mind. But, recently something about tooltips started to bother me and I couldn’t pinpoint it.

Just around the time when we were working on release of Globus portal, I finally did figure out what was wrong with tooltips – tooltips in Firefox to be exact.

Firefox (tested on 3.5.5) has a nasty bug which causes hovered element to fire up onmouseout event when you rollover a default browser tooltip which that element invoked. When you rollout of the tooltip (because tooltip disappears), the browser element fires onmouseover event again, and that can cause some really nasty behavior.

Firefox 3 tooltip bug
[flash https://www.nivas.hr/pub/default-browser-tooltip-bug/firefox.swf w=321 h=274]
(i’ve recorded this behaviour. you’ll need flash player to see the video. if you can’t – try MOV or AVI file.

On Globus that bug caused so much problem in elements which change layout when you hover them – that we had to remove title tags completely. And that from SEO standpoint is a BIG inconvenience. I’ve tested tooltips in all browsers, and AFAIK only Firefox 3.5 (Win) tooltips are “working” that way. I’ve submitted this bug to Bugzilla so will see what they’ll say about it.

While doing tests in browsers I had around (Firefox, Safari, Chrome and IE8), I’ve noticed another inconvenience. Not a single browser did not displaying the tooltip the same way.

I’ve put up a little html demo for you to test by your self (ignore my css ‘skills’). The ‘demo’ contains one div with image inside it with a link. If you hover the image, the link’s title will show up in a default browser tooltip. Take notice how tooltip:

1. appears when you roll over element
2. disappears when you roll out
3. behaves when you move around element
4. behaves when you try to rollover the tooltip it self

You will notice that not a single respected browser currently available on Windows is not displaying tooltip the same way.

Chrome 3 toolip
– lazy (shows and dissapears with an delay), you can rollover it with your mouse without any side effects. The fact that you can rollover tooltip in combination with rather long hide delay can be inconvenience.
[flash https://www.nivas.hr/pub/default-browser-tooltip-bug/chrome.swf w=321 h=274]
(MOV | AVI)

Internet Explorer 8 toolip
– pretty standard windows based tooltip behaviour. if you hover a tooltip – it will disappear which I think it’s best behavior.
– has a nasty habbit of blinking two times when you hover an element. it doesn’t produce other nasty effects to dom events
[flash https://www.nivas.hr/pub/default-browser-tooltip-bug/ie8.swf w=321 h=274]
(MOV | AVI)

Safari 4 toolip
– has a nasty habit of disappearing and reappearing while you are still hovering the element. it doesn’t produce other nasty effects to dom events
[flash https://www.nivas.hr/pub/default-browser-tooltip-bug/safari4.swf w=321 h=274]
(MOV | AVI)

I haven’t tested Opera on purpose. It’s market share is just too low. :-(

I have no idea why not a single web browser doesn’t have tooltip behavior configuration setting like follow mouse, delay in ms, different show/hide effects etc. I think that would be cool. :)

Feedback is welcome!

After some thinking and pimping, you can get straight A out of yslow. That’s a fact. But then one day client comes and says – I need this banner here and that banner there and this tracking code and that tracking code…. 5 days later your straight A page becomes bullseye F. Why? Because you had to put tons and tons of inline javascript which not only broke your wonderful w3c compliant markup, but also completely f*cked up page loading/rendering time. Each page render now has to coup with inline javascript (even iframes) and loading of external javascript, images and flash files from different slow and overcrowded ad servers.

Until today I was mislead by thought that only we have that kind of problems, but my recent try to browse www.bbc.co.uk encouraged me to write this post.

Guys at BBC use (like many other) DoubleClick for banner management. There is nothing wrong with DoubleClick, or any other banner management software. In picture below you can see what timeout did to a bbc homepage. After 60 seconds or so, page eventually loaded, but was missing banners:

On our recent project, we didn’t liked the fact that ad server is slowing our page render time by 300-500%. OpenAds didn’t update their banner publishing scheme for at least 5 years so we did a little trick.

There is a placeholder that holds layout and displays “loading…” msg where banner should appear. Then we load the banner at the bottom of the page and once the banner is loaded we append it to the placeholder on top of the page .

This technique works well but can’t be used in every configuration. Btw, if you are using jQuery, just be sure to use v1.2 since appendTo later on contains a bug. Eventually you could patch your current with this fix.

This won’t solve all of your problems, and will off course introduce new ones but will help your page render time slightly and make your visitors not so annoyed. You should reconsider how to solve bottleneck to your ad server by making a farm or something.

The new version is a complete rewrite from SWFObject 1.5, so it needs to be tested like hell before officially launch because it will replace the older SWFObject and UFO scripts. And since they have Adobe involved, they will be including this embed system in the Adobe authoring tools in the future. GREAT NEWS! Meanwhile, grab the beta from google code.