The Javascript Dollar Sign ($) Function

Recently, I’ve been seeing a lot of Javascript functions prefixed with a dollar sign ($) or simply named $. I thought, what sort of magical property does the dollar sign have in Javascript? What sort of esotericism had I uncovered?

The Dollar Sign Magician

I checked the O’Reilly Rhinoceros book, and found that the dollar sign has no special properties.

However, I have come to discover that dollar sign function has become the more-or-less de facto shortcut to document.getElementById(). Let’s face it, we all use document.getElementById() a lot. Not only does it take time to type, but it adds bytes to your code as well.

Here’s the version from prototype.js, which can return more than just a single element:

function $(element) {
  if (arguments.length > 1) {
    for (var i = 0, elements = [], length = arguments.length; i < length; i++)
      elements.push($(arguments[i]));
    return elements;
  }
  if (Object.isString(element))
    element = document.getElementById(element);
  return Element.extend(element);
}


Because it has become a common shortcut to document.getElementById(), it means that various Javascript libraries should play nicely together: if the dollar sign function in one .js file is overwritten by the same dollar sign function in another .js file, everything should still work. That also means that creating your own dollar sign function that does something different is probably not a good idea.


In case you were wondering, the underscore has no special properties either. But let’s face it, $(‘myVal’) looks more like programming than _(‘myVal’).


Update 2012

By now, the most common use of the $() function is as synonym for jQuery() in the popular jQuery Javascript framework. It returns a jQuery object (or objects), which includes much more than just a reference to the DOM element. (In jQuery, you can still access the underlying DOM element using .get().)


Likewise, the Prototype code I cited above also returns more than just a reference to a DOM element, as it returns an extended version of the element. As such, Prototype and jQuery will almost certainly not work well together in the majority of cases.

	


	
	






	
	

		
schizophrenic code (It talks to itself)
	


	

		
The third part in the Introspective debugger code breakdown, Lets look at what happens when the code actually stops at a breakpoint…


The first chunk of code uses some globals and the backtrace to figure out if it should actually stop or just keep going I will break this down in detail later, when I go over the breakpoint code

function idbg_tick_function(){

  global $idbg_stop_flag, $idbg_id, $idbg_var_spy, $idbg_last_line, $idbg_backtrace;  $idbg_backtrace = debug_backtrace();

//  echo ($idbg_last_line. ” ?= ” .$idbg_backtrace[0][‘line’] .” in “.$idbg_backtrace[0][‘file’].”<Br/>” );

if($idbg_stop_flag and $idbg_last_line != $idbg_backtrace[0][‘line’] and !strpos($idbg_backtrace[0][‘file’], ‘STOP.php’))

{    //echo(“</hr> idbg_tick_function START <br/>”);Next Up We open up a tcp server on the socket of our ID, which will always be a high port.     $socket = stream_socket_server(“tcp://”.$_SERVER[“REMOTE_ADDR”].”:$idbg_id”, $errno, $errstr);    if (!$socket) { echo “<h1>Debugger couldn’t open socket: $errstr ($errno)<h1/>\n”;} else { because, its what they did in the example code for opening sockets, we read using a while string.I’m pretty sure that when you open the socket your thread sleeps until there is a connection to it anyway, so this is fine.When it does get a connection, we read the first 1024 bites that got sent to it, and store them in msgIn, This is going to tell us what sort of information is being looked for      while ($conn = stream_socket_accept($socket)) {	$msgIn = fread($conn, 1024);	echo($msgIn);


The flush call is pretty important for this, it makes sure that the version of the page that the users are looking atis up to date (and not being stashed away in the buffer)


flush();For command and control we just send back a serialized version of the backtrace, and our spied variables. Much more onvariable spying in a later post (Code in RED is from a different chunk of code, its basically the other end of the conversation)

if ($msgIn == ‘cnc’){	  fwrite($conn, serialize(array(“trace”=>$idbg_backtrace,”vars” => $idbg_var_spy)));  $responce = unserialize(idbg_socket_client(“cnc”));<font color="#990000">  foreach($responce["trace"] as $key =&gt; $val){    echo("&lt;a href='".$callBackName."file&amp;idbg_open_line=".$val['line'].	 "&amp;idbg_open=".$val['file']."#anchor' target='infoframe'&gt;".strrchr($val['file'],"/")."&lt;/a&gt;");    echo(" Line:". $val['line'] . " Function:" . $responce["trace"][$key+1]["function"]. "  &lt;a href='#' onClick=\"document.getElementById('v_$key').style.display='block'\"&gt;+&lt;/a&gt;          &lt;div id='v_$key' style='display:none'&gt;&lt;pre&gt;");    print_r($responce["vars"][$responce["trace"][$key+1]["function"]]);    echo("&lt;/pre&gt;&lt;/div&gt;&lt;hr/&gt;"); </font> }


If the message is step, then we return, so the program keeps running, but we don't turn off the "STOP" flags,we also update the "last line" so that we don't end up hitting the same line over and over.	} else if ($msgIn == 'step'){	  fclose($conn);	  fclose($socket);	  $idbg_last_line = $idbg_backtrace[0]['line'];	  return(TRUE);If the message is cont, then we turn off the "STOP" flags, and then we go on further	} else if ($msgIn == 'cont'){	  //	  fwrite($conn, "ACK");	  fclose($conn);	  fclose($socket);	  $idbg_last_line = 0;	  $idbg_stop_flag = FALSE;	  return(TRUE);If we didn't get a command that we know about, send back a generic message, just showing that we heard them.Regardless after this we are going to close down the connection, and then the socket. We also susspended error messaging while we were in the debug code, so we will re-enable it before exiting. 	} else {	  fwrite($conn, " This is a SERVER Responce \n");	}	fclose($conn);      }      fclose($socket);    }  }}//else just keep goingerror_reporting($old_error_level);

	


	
	






	
	

		
Introspective Debugger — the basic structure
	


	

		
So the first thing that this script does is decide which instance of the script it is. What I mean by this that this page now loads completely diffrent code and behaves differently depending on what the situation is.So by default when you load the page, its going to generate an ID number (which will be used as a high port), load a very simple frameset, and then die


if(!array_key_exists("idbg_mode",$_GET)){  /* Display Frame Mode */  echo("&amp;lt;html&amp;gt; &amp;lt;frameset rows='65%,35%'&amp;gt;   &amp;lt;frame src='$callBackName"."cnc' name='infoframe'&amp;gt;   &amp;lt;frame src='$callBackWvars"."run' name='scriptframe'&amp;gt;&amp;lt;/frameset&amp;gt;&amp;lt;/html&amp;gt;");  exit();


each of the two frames within the frame set then calls the same script, but passes variables to it that drastically change its behaviorOne of them calls with the cnc option (command and control) and one of them calls with the run option, which tells the program to go ahead and run, with the degbugging code active.In each case, the instances are passed (as a get variable) the instance id that was generated with the frameset, which is how they know what port to find eachother on.


I’ll go into how CNC works, and how the processes talk to eachother a good bit more in later posts, but for now I want to look at how the “run” instance works. Run  depends on a very obscure php language feature called “register_tick_function” which allows you to set a function that will be run every X statements that are viewed.in addition to registering the tick function it is necessary to start the ticks firing by using the line declare(ticks=1);Honestly I’m a little curious why this languge feature is in PHP at all, but its there, So I think I might as well use it. This is also the feature that was the inspiration for the whole damn project.So the very Astute among you might notice that I do not ever actually call declare(ticks=1), but instead require the user to put it in there code right after they include my file, which is horribly inelegant. Why you might ask?As it turns out the declare statement (possibly only with refrence to ticks, but ticks are the ONLY thing that you can use the declare statement for currently, I guess we will find out if this is universal when we move on to php6) seems to only apply to includes at the same depth and lower in the file inclusion tree as it.This means that since you are including my file in your file, my file is at depth 2 and your file is at depth 1, if I put the declare statement in my file, it will not apply to your file, though it will start applying to any other files that you include. This problem is not documented, and honestly drove me batty for a good long time, because it generates such strange behavior.


else if (array_key_exists("idbg_mode",$_GET) &amp;&amp; $_GET["idbg_mode"] == "run"){

echo ("&amp;lt;h1&amp;gt; I am running DIV $idbg_id &amp;lt;/h1&amp;gt;");  register_tick_function("idbg_tick_function");}

I need to cover a lot more of what happens at each tick, but I want to keep each post pretty short, so I’m going to save that for tomorrow.In the meantime I should try to get some paid work done.

	


	
	






	
	

		
The most Interesting Code I Have Ever Written
	


	

		
I wrote this about a month back, and Honestly blew my own mind with it. Its far from the best code I have ever written, something which is further exacerbated by the fact that I was shooting to keep it short and small, which never makes your code good, I was also aiming not to use anything that is not a core function in PHP. The flip side is that I used a lot of really uncommon php calls that do some very, very cool things. At one point this was an ajax app, but I discovered that it could be smaller and cleaner by just using frames.


This will be the first post in a series where I go through this code and explain it, and some of the cooler calls that it is using, as well as some advanced php and programming concepts. But for now I’m just going to give a one paragraph overview of what the code does and get it into the post. There is one other file which I will also post and explain at some point.


So read On to take a look at the nitty-gritty, and get a feel for what it does in total

 Continue reading The most Interesting Code I Have Ever Written

	


	
	






	
	

		
Are you proud of your code?
	


	

		
I know that I am consistently ashamed of my code. it is quite rare that I turn out any code which I don’t feel dissatisfied with. (I don’t think this is a reflection on my quality as a coder, I think that most of the code that I encounter is complete crap) 


Other people are constantly happy with the code that produce. I wonder what the key difference in there personal outlook is, and if it ultimately makes them happier or sadder, as well as if it makes them better or worse coders and or more or less diligent. (speaking of being ashamed of things, that sentence was horrible)


It seems obvious that those who are always happy with there code would be less likely to revise it, but I’m not sure that this is true. I know that when I do have code that I feel happy about having written, I’m pretty enthused to keep working on it. To make it cleaner and better. On the other hand with most of my code I feel more like “when can I be done with this and work on something that doesn’t suck” I start to get sloppy and try to rush to the finish line, which I’m sure instills bad habits.


So I have decided that I am going to make a real effort to start trying to write code that I’m happy to come back and work on going forward from here. Of course I feel like I make myself that promise every other month. 

	


	
	






	
	

		
Strange Projects on the Horizon
	


	

		
On Friday I was approached to work on one of the oddest and probably most ill-conceived projects I  have ever encountered, and I might just take it anyway. Basically a company has a very good, very modular framework built for them in C# using .Net by a bunch of Russians who they hired remotely. I can tell by looking at the output that the code is quite modular, if it might be a little unclean. It looks like it would actually be some pretty good code to support.


They have been selling boiler plate instillations of this framework, with just some simple skinning done, and selling them hand over fist, apparently they are making a mint. 


So anyway, For some reason they want to hire one of my companies, (and hence me) to do the occasional “special project” for clients who need something that is just slightly more custom than what they have. There are a few basic problems with this. 
1) I don’t know C# 
2) I don’t know Russian 
3) I don’t think I even get access to the code base at all!


It seems that each part of the site that the framework builds can be loaded as a “section” which can easily be included on sites other than the primary site. (that is to say you can throw a little javascript or something into your own website, and have it display, say the friends list from the primary site, and it was built to have this work). For some reason they think it’s a good idea to have me build a second site, in php, that covers their additional functionality, and then have it load each of the bits of the primary site and display them. This seems bizzaro to me, but hey, I’m willing to do it because I bet I can learn something cool and they would still be paying me.


What I’m really hoping is that this is NOT actually what they expect me to do, and that there is a SOAP interface to what the Russians built.

	


	
	






	
	

		
Code refactoring VS feature addition.
	


	

		
I’m currently working on a pretty major overhaul to a custom Content Management System that I wrote for some clients, and I have found that I am both reworking the interface, and doing code refactoring at the same time. I notice that I often end up performing these two tasks simultaneously, partially because its hard to sell clients on pure code refactoring but it does have to happen, and partly because feature creep is an ever-present evil. 


The question is, would I do much better to try to wear these hats one at time? would code refactoring first, without changing any features, followed by a round of feature changes result in a more manageable process? Or am I just deluding myself, thinking that something else looks better because I’m not elbows deep in it at the moment?

	


	
	






	
	

		
Welcome, Chris Petersen!
	


	

		
My friend and former co-worker, Chris Petersen, is going to be contributing to this blog as well.


Like me, he’s a bit of an accidental developer. However, he also has a master’s degree in information science from the University of Michigan School of Information, so he’ll be able to share his expertise on subjects like prototyping and usability testing. He develops primarily in ColdFusion.

	


	
	






	
	

		
Totally Hosed My Dev Environment
	


	

		
So I have been trying to play with the Zend Framework, which by all accounts is pretty cool, and trying to get it set up on the dev environment that I have here on my cute little macbook. Sadly, for some reason the version of os X 10.5 that ships with it doesn’t have pdo_mysql support installed (though it has pdo_mysqllite ?? I mean, come on, seriously?) So it’s off to the recompile mines. Sadly, once you recompile PHP you need to recompile Apache, which wouldn’t be a big deal at all other than my not knowing about it and it not giving me anything like a coherent error message regarding this. Fine, whatever….


Next, I discover that I can’t user the PEAR auto-installer, because it can’t find the damn modules directory, and neither can I. I have even tried making new ones in every likely place. What’s worse, I seem to have also lost traditional MySQL support as well.


I’m getting pretty annoyed with OSX here, It’s a damn nice client OS, but it’s driving me nuts on the server side. (Still better than Windows, it’s just a bit like the The Twilight Zone, things are close enough to where they should be to make you think that you know what’s going on, but when you try to actually do something….)


I guess I’ll try MAMP now. I have been meaning to look at that anyway.