Category Archives: jQuery

Injecting BidiChecker to test Arabic web pages

Google has just announced the release of BidiChecker – an open source tool to automatically test Arabic web pages for issues related to bidirectional support. This is a great news, as bidirectional support is always a huge problem and requires both deep Arabic language understanding and deep technical HTML/CSS understanding, preferably at the same time. Any level of automation would be useful.

However, all the tool usage descriptions are geared towards using it with automated JavaScript testing library. I just wanted to test the tool on a couple of public web pages, both ones we maintain and others.

Here is the sequence of steps to inject and trigger BidiChecker into any Arabic page using jQuery and Firefox+Firebug:

  1. Load the page in the Firefox with Firebug console enabled.
  2. Inject jQuery if you don’t have it on the page already. I use jQuerify bookmarklet
  3. In Firebug’s console paste the following code:
    jQuery.getScript(
         "http://bidichecker.googlecode.com/svn/trunk/lib/bidichecker_packaged.js", 
         function(){
             var bidiErrors = bidichecker.checkPage(true, top.document.body);
             bidichecker.runGui(bidiErrors);
    });
  4. If there are any BiDi issues, the BidiChecker’s error navigation window will pop up and the offending text will be shown in red in the page itself. If you used jQuerify plugin, you may get one for the “jQuery injected” message itself.

Loading BidiChecker library directly from Google Code’s SVN is probably not a particularly polite way of doing it, but it is great for a quick test and introduction to the tool.

It is also possible to use a standalone BidiChecker bookmarklet, but I prefer Firebug approach as it then lets me to explore the page further using Code Inspector and other tools.

jQuery: Cycling between multiple classes with random start

A directed graph.
Image via Wikipedia

I saw an interesting question on StackOverflow on how to cycle between 3 states for list items , but with initial state for each item being potentially different.

This random start position part of the problem was making me think, so I used it as an exercise to try some newish jQuery functions, such as delegate and advanced class selectors.

My solution was basically to build a reduced case of state transition diagram with a cycle.  The advantage of it is that any number of states can be iterated through.  It  could even be a plugin, if need be.

My full test example can be found in the original SO question, probably toward the bottom. I am also including it here as a Pastie:

Enhanced by Zemanta

jQuery for multilingual web development

I have (nearly) finished developing a mini-website in 6 languages (Arabic, Chinese, English, French, Russian, Spanish). The layout was the same, so ideally it would have been driven by a content management system. Not in this case unfortunately, as I was not given enough time to setup the infrastructure.

As I know nearly nothing of at least two of the languages above (Arabic and Chinese), I had to keep rechecking the content provided to ensure the right text ends up in the right place on a page. Google Translate helped with that by back-translating from another language back into English and making sure I got right sentence boundaries, etc.

However, even with content in the right place, I still needed to visually verify that things are correct. Also, some of the late arriving changes needed to be implemented for all 6 sets of files. For example, some of the URLs changed, some classes for javascript enhancements were added or removed, and so on.

Initially, I tried to check things in the editor by using regular expressions. This worked for basic things, but as the project progressed and markup (and javascript enhancements) became more complex, the regular expressions became not sufficient. I needed something that understood HTML structure and could easy to run interactively.

I already was using jQuery for progressive enhancement and my Firefox always has Firebug setup. And I have been poking at random web-pages with jQuerify bookmarklet for ages. But with this project, jQuery+Firebug combination of tools has now graduated to a 1st class development and troubleshooting toolkit specifically for multi-lingual content.

Here is a couple of basic queries I run in Firebug console window:

  • I had most of the links going to a new window and needed to check I did not miss a target attribute: $(“a[target != ‘_blank’]”)
  • When comparing languages side-by-side, I needed to see whether URL links were the same. The easiest way to do that was by looking at where those links were actually pointing out. I could of course select an element with Firebug to see all of its content, but it was easier to print a particular attribute automatically, when I hovered over it with a mouse: $(“a”).mouseenter(function(){console.log( $(this).attr(‘href’));})
  • If I quickly needed to check which elements were affected by a particular class, I would just highlight them: $(“.NYOnly”).css(“background-color”, “red”)

None of these are hidden secrets, however it may not always be obvious what can be done and how far a couple of lines of jQuery code can go. Here is an example that gets pasted right into Firebug window. It uses jQuery-translate extension to hook into Google Translate API and prints out translated content of a table cell that is clicked on:

$.getScript('http://jquery-translate.googlecode.com/files/jquery.translate-1.3.9.min.js');

$(“td”).click(function(){
$(this).translate(‘ar’, ‘en’, {
replace: false,
each: function(i){console.log( this.translation[i] ) }
})
});