Developer Oracles » JavaScript

DefiThis un-minified Javascript and code explanation

Gary Illyes — Sat, 31 Jan 2009 10:16:34 +0000

We published a while ago a small WordPress plugin which enables the users to look up words in a specific database, by highlighting with the mouse the word they want to look up then following a link to an administrator set online database (like Google Definition service or Dictionary.com) which will do the rest of the job.

Worthless to say that this plugin is based on JavaScript in almost 80%, the rest is a bit of PHP which hooks the Javascript code to the WordPress engine and a bit of CSS to style the plugin.

A few words about our coding style: we almost always minify the code made by us. This means that we run a code through a compressor software which strips the unnecessary white spaces and other characters. This applies to both Javascript and CSS. This is not meant to obfuscate the code, but to preserve the bandwidth.
It’s also good to know that we never use longwinded function names or variables. It’s likely that you will never see in code released by us function or variable names like:
function this_is_a_cool_function_used_for_nothing(){ } /*or variable like*/ var this_is_a_useless_variable = '';

Instead, we use function and variable names like this:
function c_D(){ } /*or variable like*/ var A = '';

The explanation for this habit is that long variable and function names only eats up unnecessary bandwidth, which we don’t like, and javascript understands both forms of declaration.

If you want to understand the functions we use, you may want to know that each function name is an abbreviation. For example the R_D() function is used for Rendering Defithis, the c() function is used for Centering the widget, aph() for fixing Alpha transparency in Internet Explorer, and so on.

So, as requested by Fernando Ramirez, here’s the unminified javascript code from Defithis. Unobfuscated version does not exist since we believe it’s not obfuscated. Follow this link to the script: http://devoracles.com/examples/defithis.js

If you need explanation regarding anything from within the code, feel free to ask. We listen and will answer.

The best method to check for Internet Explorer in Javascript

Gary Illyes — Thu, 08 Jan 2009 10:59:09 +0000

If you will code in Javascript, or if you already familiarized yourself with it, you encounter many times problems related to the fact that Internet Explorer doesn’t understand a lot of functions which the other browsers can. But the browser market-share dictates that we still have to code in the way to make the script work on Internet Explorer, too.

This meant, many invented small, or relatively small functions to detect the user’s browser. Many times the function is a dozen of lines long, and it’s called every time the script needs to know whether the user’s browser is Internet Explorer or other modern browser.

But there’s a way better way. Better said the simplest way possible. Here it is:

var IE = /*@cc_on!@*/false;

I guess that needs a bit of explanation, right?
What we see up there? I declared a new variable, called IE, which has the value a comment block followed by ‘false‘.
The above variable will be understood by IE: var IE = !false, because Internet Explorer uses JScript — a Javascript-like dialect of the standard ECMAScript — instead of Javascript which is used by all the other browsers. JScript can parse the comments, just like Internet Explorer (see conditional HTML comments post). This is a unique feature of IE, none of the other browsers can do it, so Firefox, Chrome, Safari, Opera, all will understand the above declaration as IE = false.

How to use this in your codes? Put the above code in the first line of your script, then when you need to know whether the browser is Internet Explorer or not, use conditions, like this:
if(IE){ //IE specific code goes here }else{ //code for all the other browsers }

Hope this helps you as it helped me many times.

jQuery : Error: $(document).ready is not a function — Sure!

Gary Illyes — Sun, 19 Oct 2008 19:17:20 +0000

This error message appears only if another framework is in conflict with the almighty jQuery. For example You try to use Prototype/Scriptaculous for Lightbox but you also need Thickbox for something else, which requires jQuery.

Since no framework is compatible with another framework, you have to find a workaround to get things working.

And here comes jQuery in your help. The jQuery team was smart enough to realize that there will be conflicts between frameworks, especially the $ will cause massive headaches since it’s the basic of each framework. $ is the shortcut for the word “jQuery”

So, they invented jQuery.noConflict();. This will let you to replace the $ with the word jQuery, in all your code. So, when you need to call this: $(document).ready(function(){ … You simply replace the $ as I said above: jQuery(document).ready(function(){ …, don’t forget to call jQuery.noConflict(); before this.

So, when you use the noConflict() function, your code should look something like this:

World saved again, now you can use 2 frameworks together.

What do you think about the Gears Geolocation API

Gary Illyes — Thu, 04 Sep 2008 19:56:03 +0000

What you see on the top of the sidebar is not server side code. More than that, not even a bit of PHP has been used. In fact, even HTML is almost not present. It’s Gears and its GeoLocation API.

When you allow Devoracles to collect some data about you, more exactly your location on the Earth, Gears queries Google about your location. Again, not even a bit of server side code on Devoracles’s side.

This is the GeoLocation API of Gears. And What can be used for? Think about AdSense, for the matter of the example. It always knows where you are. OK, almost always.

Any thoughts on this API?