Funny stuff! But all kidding aside, I personally feel like PHP was ugly enough without goto. To me, one of the language’s biggest downfalls has always been that it practically encourages sloppy design, and this is a huge step in the wrong direction. How do you feel about it?

(Link via Isaac Schlueter)

But time is a commodity nowadays. I’ve got way less time to write, and when I do, I’d rather be writing code than tutorials (or honestly, playing video games). Sorry about that, but I hope the (well-commented!) source will help those of you out there who’d like to contribute to the slowly growing world of DHTML games.

You’ll notice that this code is over 6 months old. And I’m the kind of developer who constantly updates his style, methods and patterns. Given that, there may very well be many mistakes or bad practices in here, some of which I may have improved upon by now, but others maybe not. Either way, feel free to comment on them, and I’ll answer any questions as well.

Thanks for checking it out, and please be good to it. I’d love to know about any projects created with this source as a basis, and would appreciate links back here. Also please don’t claim it as your own, that’s not cool.

Enjoy!

I often see questions similar to, “I’ve got these few lines of PHP code, how would I do this in JavaScript?” I’ve actually already answered a question like this, but I kept getting more questions, so I thought I’d cover many at once:

• Pushing to an array
• die() or exit
• include or require
• Redirection
• Static classes
• String manipulation

Pushing to an array

Pushing a new value to the end of an array is a common, trivial task. Here’s some PHP to accomplish this:

<br /> $my_array = array();<br /> $my_array[] = ‘a’;<br /> array_push($my_array, ‘b’);<br />

Also note this quick pointer from php.net’s array_push() documentation:

If you use array_push() to add one element to the array it’s better to use $array[] = because in that way there is no overhead of calling a function.

This isn’t the case in JavaScript. The native Array.push method is most optimal:

<br /> var myArray = [];<br /> myArray.push(’a'); // This is the way to go<br /> myArray[myArray.length] = ‘b’; // This method is possible but bad<br />

die() or exit

There has been much confusion regarding what JavaScript is and how it works in the browser. When looking for an equivalent to exit, one probably doesn’t understand that client-side JavaScript is a behavioral language that’s intended to react to events. In PHP, a script executes, stopping only when told to do so, and then it’s done. JavaScript lives and breathes on the page, reacting to the mouse being moved, keys being pressed and even time changing.

So it’s important to understand why this is not a fair equivalent, and that even asking for one shows a misunderstanding. That said, a bit of procedural JavaScript can be exited by using an anonymous function. Here’s some example PHP and then similar code in JavaScript:

<br /> if ($next_action == ‘exit’) {<br /> exit;<br /> }</p> <p>echo ‘Made it here!’;<br />

<br /> (function() {</p> <p> if (nextAction == ‘exit’) {<br /> return;<br /> }</p> <p> alert(’Made it here!’);</p> <p>})();<br />

While the language behavior is not one-to-one, taking advantage of JavaScript’s closure already has advantages, among them being able to easily exit a function via return.

include or require

There have been some arguments about this equivalence in JavaScript. Just like the previous example, this equivalence is not one-to-one and should be thought about in very different terms. That said, here is a quick example of including a PHP file within a PHP script:

<br /> // Nothing to it, just include the file:<br /> include(’my_file.php’);</p> <p>// This code will only execute after my_file.php has been included:<br /> echo ‘File included!’;<br />

To include an external script in JavaScript, writing a method or including a library is definitely best. I wrote about this once, but there are libraries such as YUI that have better support with more options. Here’s what this would look like using YUI:

<br /> // Call YUI’s method<br /> var objTransaction = YAHOO.util.Get.script(”http://example.com/my_file.js”, {<br /> // This function will only fire after my-file.js has been included:<br /> onSuccess : function() {<br /> alert(”File included!”);<br /> }<br /> });<br />

Redirection

This one is easy and straightforward. A redirect is accomplished with PHP’s header() function:

<br /> header(’Location: http://example.com’);<br /> exit; // Not necessary but a good practice<br />

Also very simple in JavaScript:

<br /> location.href = ‘http://example.com’;<br />

Static classes

In PHP, it’s a pretty common programming pattern to use a static class for encapsulation, sort of namespacing some methods and properties. Here’s an example:

<br /> class Tools {</p> <p> public static function check_stuff() {<br /> return true;<br /> }</p> <p>}</p> <p>echo Tools::check_stuff();<br />

For this JavaScript equivalence, it probably makes the most sense to use an object literal:

<br /> Tools = {<br /> checkStuff : function() {<br /> return true;<br /> }<br /> };</p> <p>alert(Tools.checkStuff());<br />

String manipulation

String manipulation is absolutely mandatory in most applications. Fortunately, it’s a breeze thanks to PHP’s fantastic string functions:

<br /> // Replace portions within a string<br /> echo str_replace(’Hey’, ‘Hi’, ‘Hey there’); // outputs “Hi there”</p> <p>// Capitalization<br /> echo strtolower(’Hey there’); // outputs “hey there”<br /> echo strtoupper(’Hey there’); // outputs “HEY THERE”</p> <p>// Get a portion of a string<br /> echo substr(’Hey there’, 0, 2); // outputs “He”</p> <p>// Get rid of extraneous whitespace<br /> echo trim(’     Hey there     ’); // outputs “Hey there”<br />

Each of these have perfect equivalents except for trim(), which we need to implement ourselves:

<br /> // Replace portions within a string<br /> alert(’Hey there’.replace(’Hey’, ‘Hi’)); // outputs “Hi there”</p> <p>// Capitalization<br /> alert(’Hey there’.toLowerCase()); // outputs “hey there”<br /> alert(’Hey there’.toUpperCase()); // outputs “HEY THERE”</p> <p>// Get a portion of a string<br /> alert(’Hey there’.substr(0, 2)); // outputs “He”</p> <p>// Get rid of extraneous whitespace<br /> trim = function(txt) {<br /> return txt.replace(/^\s+|\s+$/g, ”);<br /> };</p> <p>alert(trim(’     Hey there     ’)); // outputs “Hey there”</p> <p>

Or, we can augment the String global so that strings will have this method natively:

<br /> String.prototype.trim = function() {<br /> return this.replace(/^\s+|\s+$/g, ”);<br /> };</p> <p>// Get rid of extraneous whitespace<br /> alert(’     Hey there     ’.trim()); // outputs “Hey there”<br />

While not all of these equivalents are smooth (or even recommended), it’s typically helpful when learning a new language to have it compared to a language one is already familiar with. If you can think of any other common PHP tasks that have relatively similar equivalents in JavaScript, please let me know in the comments.

Here’s a simple example of what this will look like:

<br /> $object_instance = new My\PEAR\Module(’myvar’);<br />

PHP 5 already already has its criticisms. The developers looked at many different options, including **, ^^, %%, :>, :) and :::, but eventually decided on \, which is an odd decision, given that it doesn’t remotely resemble its cousins. In fact, it most closely resembles directories in MS-DOS or other Windows features.

The argument was also made that current operators such as :: or -> could have been used, but they already had other duties. The argument doesn’t go far, however, because PHP of course uses the backslash character for escaping.

<br /> $my_string = “This string\n”;<br /> $my_string .= “spans multiple\n”;<br /> $my_string .= “lines.\n”;<br />

Thankfully, PHP has the benefit of heredoc syntax, which makes code like this much easier to read, write and maintain:

<br /> $my_string = <<<MYSTRING<br /> This string<br /> spans multiple<br /> lines.<br /> MYSTRING;<br />

E4X

But what about JavaScript? There is no native heredoc support, but there are some other workarounds that can be used. The first I’ll offer up is ECMAScript for XML (E4X).

<br /> var myString = ” + <myString><![CDATA[This string<br /> spans multiple<br /> lines.<br /> ]]></myString>;<br />

The first line in the above example is a bit confusing. The XML will return an xml object by default, but what we want is a String. We can type the return as a String by concatenating to an empty string ('').

Next, an element must be wrapped around the CDATA to trigger the XML parser. This step is similar to PHP’s heredoc syntax in that it requires an identical beginning and ending identifier.

You can test this yourself in the lab.
Currently, it looks like only Gecko browsers (such as Firefox and Camino) support E4X. This obviously doesn’t include Internet Explorer, which is (unfortunately) often a large portion of most websites’ user bases. While this workaround is interesting, it’s definitely not realistic to assume all of your users are using Firefox, despite its rising popularity (also, it will fail to validate).

Hidden Element Hack

Another workaround I’ve seen is to place the string inside of an element (often hidden from view) and to read it in via JavaScript. Here’s an example:

<br /> /* Based on this markup:<br /> <div id=”multilines” style=”display: none;”><br /> This string<br /> spans multiple<br /> lines.<br /> </div><br /> */<br /> var myString = document.getElementById(’multilines’);<br />

This solution is clever, but definitely a hack job: not very clean, and with a bad accessibility case. The primary issue though is that it doesn’t completely solve the problem. Markup is needed to interact with the JavaScript code, so to use this solution one couldn’t maintain a completely independent .js file.

Escaping linebreaks

Another solution is very simply just to escape line breaks:

<br /> var myString = “This string\<br /> spans multiple\<br /> lines.”;<br />

By escaping the linebreak, you’re free to continue the string on the next line (note: this doesn’t include spaces, so if you want to separate words, you’ll need to begin each new line with a space). This solution is not as attractive as the E4X workaround, but has the benefit of being perfectly cross-browser compatible. Therefore, it looks like it’s currently the best method available.

Do you know of any other workarounds? If so, please let me know in the comments section.

Many JavaScript libraries support the evaluating of data returned via XHR. Some, like YUI, do not (yet). In other cases, folks have rolled their own “AJAX library” but still want this behavior. The below script supports searching HTML for scripts and evaluating them:

<br /> /**<br /> * Evaluate the passed content for <script> tags<br /> * @param {String} html The string to parse<br /> */<br /> var evalHTML = function(html) {</p> <p> var piece,<br /> res = html.split(/<script/);</p> <p> res.shift();</p> <p> for (var i = 0, len = res.length; i < len; i++) {</p> <p> (piece = res[i].split(/>/)).shift();</p> <p> try {<br /> eval(piece.join(’>').split(’</scr’ + ‘ipt>’).shift());<br /> } catch (e) {}</p> <p> }</p> <p>};<br />

You can execute some examples yourself below:

<br /> // Example 1 – script inside of a div<br /> evalHTML(’<div><scr’ +<br /> ‘ipt>alert(”Hello, JavaScript!”);</scr’ +<br /> ‘ipt>’);<br />

Execute example 1

<br /> // Example 2 – script sets a global variable then displays it<br /> evalHTML(’<scr’ + ‘ipt>var foo = “bar”;</scr’ +’ipt>’ +<br /> ‘<scr’ + ‘ipt>alert(foo);</scr’ +’ipt>’);<br />

Execute example 2

• [Download eval.js] (376 bytes)
• [Download eval-min.js] (214 bytes; compressed)

Update 9/28/08: Fixed a bug thanks to Isaac Schlueter (see comments).

./clh.php local-site.com/public_html/

Note: you must be root to run it

Given this command, the script will change DocumentRoot to local-site.com/public_html/ and restart apache2.
I work on a lot of websites (developing most of them on my laptop running apache2)
so I use this script constantly.

Here’s the code:

<br /> #!/usr/bin/php<br /> <?php</p> <p>/*<br /> ChangeLocalHost v0.1 – last updated Mar 07 2007<br /> Must be root to execute. Alters the DocumentRoot in Apache2’s conf file, then restarts Apache2.<br /> */</p> <p>$obj_clh = new ChangeLocalHost(’/etc/apache2/sites-available/’, ‘default’, ‘/home/www/’);</p> <p>$obj_clh->setArgs($_SERVER['argv']);<br /> $obj_clh->run();</p> <p>/**<br /> * CLH class constructor<br /> * @constructor<br /> */<br /> class ChangeLocalHost {</p> <p> private $arr_args,<br /> $bit_msgs,<br /> $str_dir,<br /> $str_file,<br /> $str_pre;</p> <p> protected $str_version;</p> <p> /**<br /> * Constructor method<br /> * @param string str_dir The location of the Apache conf file to mod<br /> * @param string str_file The name of the Apache conf file to mod<br /> * @param string str_pre The needle to search for in the conf file<br /> */<br /> function __construct($str_dir, $str_file, $str_pre) {</p> <p> $this->str_version = ‘ChangeLocalHost v0.1′;</p> <p> $this->arr_args = Array();<br /> $this->bit_msgs = true;<br /> $this->str_dir = $str_dir;<br /> $this->str_file = $str_file;<br /> $this->str_pre = $str_pre;</p> <p> }</p> <p> /**<br /> * Modify Apache’s DocumentRoot<br /> * @param string str_file The (conf) file to mod<br /> * @param string str_new_dir The new directory to set as DocumentRoot<br /> * @private<br /> */<br /> private function alterLocalHost($str_file, $str_new_dir) {</p> <p> $str_contents = file_get_contents($str_file);</p> <p> if (!$str_contents) {<br /> $this->showError(’Could not read ‘ . $str_file);<br /> }</p> <p> $int_begin = strpos($str_contents, $this->str_pre);<br /> $int_end = strpos(substr($str_contents, $int_begin), “\n”);<br /> $str_search = substr($str_contents, $int_begin, $int_end);<br /> $str_contents = str_replace($str_search, $str_new_dir, $str_contents);<br /> $bit_written = file_put_contents($str_file, $str_contents);</p> <p> if ($bit_written) {<br /> $this->showMessage(’Successfully set DocumentRoot to ‘ . $str_new_dir);<br /> } else {<br /> $this->showError(’Could not write ‘ . $str_file);<br /> }</p> <p> }</p> <p> /**<br /> * Validates the new directory to set<br /> * @param string str_new_dir The potential new directory<br /> * @private<br /> */<br /> private function checkLocalHost($str_new_dir) {</p> <p> $str_set_to = $this->str_pre . $str_new_dir;</p> <p> if (is_dir($str_set_to)) {</p> <p> $this->setLocalHost($str_set_to);<br /> $this->restartApache2();</p> <p> } else {<br /> $this->showError($str_set_to . ‘ is not a valid directory.’);<br /> }</p> <p> }</p> <p> /**<br /> * Ensures this app is being executed as root<br /> * @private<br /> */<br /> private function checkRoot() {</p> <p> // Make sure user is root<br /> $str_command = ‘whoami’;</p> <p> exec($str_command, $arr_output, $int_return);</p> <p> if ($arr_output[0] != ‘root’) {<br /> $this->showError(’You must be root to run this program.’);<br /> }</p> <p> }</p> <p> /**<br /> * Makes a backup of the Apache conf file<br /> * @param string str_source The original to copy<br /> * @param string str_new The location of the backup<br /> * @return bool Whether the copy was successful or not<br /> * @private<br /> */<br /> private function makeCopy($str_source, $str_new) {</p> <p> $bit_copy = copy($str_source, $str_new);</p> <p> if (!$bit_copy) {<br /> $this->showError(’Could not make copy of ‘ . $str_source);<br /> }</p> <p> return true;</p> <p> }</p> <p> /**<br /> * Restarts Apache2<br /> * @private<br /> */<br /> private function restartApache2() {</p> <p> $str_command = ‘apache2ctl restart’;</p> <p> exec($str_command, $arr_output, $int_return);</p> <p> if ($int_return > 0) {<br /> $this->showError(’Could not restart Apache2.’ . $str_source);<br /> }</p> <p> $this->showMessage(’Successfully restarted Apache2.’);</p> <p> }</p> <p> /**<br /> * Executes the script<br /> */<br /> function run() {</p> <p> $this->checkRoot();</p> <p> $str_new_dir = $this->arr_args[1];</p> <p> switch ($this->arr_args[1]) {</p> <p> case ‘-c’ :<br /> case ‘–current’ :<br /> $this->showCurrent();<br /> break;</p> <p> case ” :<br /> case ‘-h’ :<br /> case ‘–help’ :<br /> $this->showHelp();<br /> break;</p> <p> case ‘-q’ :<br /> case ‘–quiet’ :<br /> $str_new_dir = $this->arr_args[2];<br /> $this->bit_msgs = false;<br /> break;</p> <p> case ‘-v’ :<br /> case ‘–version’ :<br /> $this->showVersion();<br /> break;</p> <p> default :<br /> break;</p> <p> }</p> <p> $this->checkLocalHost($str_new_dir);<br /> exit(0);</p> <p> }</p> <p> /**<br /> * Create a copy of the arguments global<br /> * @param array array_args The arguments to set<br /> */<br /> function setArgs($arr_args) {<br /> $this->arr_args = &$arr_args;<br /> }</p> <p> /**<br /> * Call the other methods to initiate the altering of the DocumentRoot<br /> * @param string str_new_dir The new value of DocumentRoot<br /> * @private<br /> */<br /> private function setLocalHost($str_new_dir) {</p> <p> $str_ext = ‘.bak’;<br /> $str_file = ($this->str_dir . $this->str_file);<br /> $str_backup = $str_file . $str_ext;</p> <p> if (is_file($str_file)) {</p> <p> if ($this->makeCopy($str_file, $str_backup)) {<br /> $this->showMessage(’Copied backup of ‘ . $this->str_file . ‘ to ‘ . $this->str_file . $str_ext);<br /> }</p> <p> $this->alterLocalHost($str_file, $str_new_dir);</p> <p> } else {<br /> $this->showError($str_file . ‘ cannot be found.’);<br /> }</p> <p> }</p> <p> /**<br /> * Show what DocumentRoot is currently set to<br /> * @private<br /> */<br /> private function showCurrent() {</p> <p> $str_file = ($this->str_dir . $this->str_file);</p> <p> if (is_file($str_file)) {</p> <p> $str_contents = file_get_contents($str_file);</p> <p> if (!$str_contents) {<br /> $this->showError(’Could not read ‘ . $str_file);<br /> }</p> <p> $int_begin = strpos($str_contents, $this->str_pre);<br /> $int_end = strpos(substr($str_contents, $int_begin), “\n”);<br /> $str_search = substr($str_contents, $int_begin, $int_end);</p> <p> $this->showMessage(’The current DocumentRoot is: ‘ . $str_search);<br /> exit;</p> <p> } else {<br /> $this->showError($str_file . ‘ cannot be found.’);<br /> }</p> <p> }</p> <p> /**<br /> * Display a message and exit<br /> * @param string str_error The message to display<br /> * @private<br /> */<br /> private function showError($str_error) {</p> <p> echo ‘Error: ‘ . $str_error . “\n”;</p> <p> exit(1);</p> <p> }</p> <p> /**<br /> * Show the help text and exit<br /> * @private<br /> */<br /> private function showHelp() {</p> <p> $str_help .= ‘Usage: clh [DIRECTORY]… [OPTIONS]‘ . “\n”;<br /> $str_help .= ‘Alter the DocumentRoot in Apache2.’ . “\n”;<br /> $str_help .= “\n”;<br /> $str_help .= ‘ -c, –current display current DocumentRoot and exit’ . “\n”;<br /> $str_help .= ‘ -h, –help display this help and exit’ . “\n”;<br /> $str_help .= ‘ -q, –quiet suppress most messages’ . “\n”;<br /> $str_help .= ‘ -v, –version output version information and exit’ . “\n”;<br /> $str_help .= “\n”;<br /> $str_help .= ‘Report bugs to <scriptnode@gmail.com>.’ . “\n”; // Hahahaha</p> <p> echo $str_help;</p> <p> exit(0);</p> <p> }</p> <p> /**<br /> * Display a message to the user<br /> * @param string str_message The message to show<br /> * @private<br /> */<br /> private function showMessage($str_message) {</p> <p> if ($this->bit_msgs) {<br /> echo $str_message . “\n”;<br /> }</p> <p> }</p> <p> /**<br /> * Attempt to be more like a real application by displaying the version<br /> * @private<br /> */<br /> private function showVersion() {</p> <p> echo $this->str_version . “\n”;</p> <p> exit(0);</p> <p> }</p> <p>}<br />

You’ll notice that the script is at least a year and a half old.
Usually if code of mine is more than a year old, it’s completely unusuable because my habits change pretty often.
But I think I’ve finally gotten to that sweet spot where it’s not total garbage, it just needs tweaking.

I was surprised that the code isn’t too bad really. It’s easily readable and well organized. There are many things that I wouldn’t have done were I to write this again;
for example, I stopped using type prefixes long ago (such as an array of users as $arr_users). I understand why I used to do this, but it’s not necessary
and only clutters up the code.

Anyway, I find this script useful and I thought someone else might too. Enjoy!

• [Download clh.php.txt] (6,614 bytes)
• [Download clh.zip] (1,975 bytes)

1. No var in globals (JavaScript)

   I’d be lying if I said I wasn’t externally influenced on this one. Douglas Crockford has a lot of great recommendations, and this is one I tend to agree with. When applicable and realistic, making your JavaScript code smaller is always a good thing. It means a faster download for your users which leads to a better user experience.

   <br /> // Before:<br /> var scriptNode = {};</p> <p>// After:<br /> scriptNode = {};<br />

2. Not abbreviating beyond readability

   This is probably a lesson most programmers learned long ago. I went back to some of my older code recently, hoping to reuse it. The good news was that the code itself was written well enough that I could use it with minimal editing. The bad news was that I first had to figure out what many of the variables were for because they were so badly named:

   <br /> // Before:<br /> var setCoords = function(c, dir) {<br /> var nc = {<br /> x : c.x,<br /> y : c.y<br /> };<br /> if (dir == ‘l’) {<br /> nc.x–;<br /> } else {<br /> nc.x++;<br /> }<br /> return nc;<br /> };</p> <p>// After:<br /> /**<br /> * Set the coordinates based on direction<br /> * @param {Object} coords An object with x/y keys<br /> * @param {String} dir The direction [l, r]<br /> * @return {Object} An x/y object with the new coordinates<br /> */<br /> var setCoords = function(coords, dir) {<br /> var newCoords = {<br /> x : coords.x,<br /> y : coords.y<br /> };<br /> if (dir == ‘l’) {<br /> newCoords.x–;<br /> } else {<br /> newCoords.x++;<br /> }<br /> return newCoords;<br /> };<br />

   I’m not suggesting Hungarian notation, but descriptive variable and function names are the way to go. You don’t want to hate yourself a month later (or for whoever is working with your code to hate you) when it needs to be maintained later. And thanks to tools like YUI Compressor, even JavaScript files won’t be negatively affected by adding a few characters here and there.

3. CSS dashes instead of camelCase

   The logic here is that a language should look like itself. I understand why I used to prefer camelCase; even minified CSS files can’t alter class names or IDs, so dashes make for a larger download. But when revisiting a file, it looks less alien when the nomenclature is cohesive. This makes everything easier.

   <br /> /* Before: */<br /> .userOptions {<br /> font-family: verdana, sans-serif;<br /> }<br /> div#mainCommentBubble {<br /> background-image: url(bubble.gif);<br /> }</p> <p>/* After: */<br /> .user-options {<br /> font-family: verdana, sans-serif;<br /> }<br /> div#main-comment-bubble {<br /> background-image: url(bubble.gif);<br /> }<br />

4. Leaning more towards OO

   Again, I think many programmers have learned this lesson already, and likewise I’ve been using these practices for a while now. The difference is that my code has become so much more maintainable that I preach these lessons often and have become something of an advocate of these patterns.

   <br /> // Before:<br /> showError();<br /> toggleElement(content);<br /> hideError();</p> <p>// After:<br /> error.show();<br /> content.toggle();<br /> error.hide();<br />

5. Clean, organized MySQL queries

   Thoughout my entire programming career (more than four years now), I have constantly changed the way I organized MySQL queries in my PHP code. Recently I noticed that editing my older code was a pain in the ass, and I sought to change that. Adding a WHERE clause or an extra SELECT parameter should be an easy task, and the solution to me was to break each section into new lines, tabbing in the same manner that I did in my code blocks:

   <br /> // Much before:<br /> $qry = ’select chats.*, users.username from chats, users where chats.room_id = ‘ . $room_id . ‘ and chats.user_id = users.user_id’;</p> <p>// Before:<br /> $qry = sprintf(’SELECT chats.*, users.username<br /> FROM chats, users<br /> WHERE (chats.room_id = %s) AND (chats.user_id = users.user_id)’,<br /> $room_id);</p> <p>// After:<br /> $qry = ”<br /> SELECT<br /> chats.*,<br /> users.username<br /> FROM<br /> chats,<br /> users<br /> WHERE<br /> (chats.room_id = $room_id)<br /> AND (chats.user_id = users.user_id)<br /> “;<br />

6. Using a Single Event Listener When Possible

   Events can be tricky. They can be the cause of memory leaks, and having too many can bog browsers down. So when dealing with multiple instances of similar events, why not combine them? Events are not difficult to parse to figure out what happened to what:

   <br /> // Before:<br /> var handleClick = function(e) {<br /> // Something useful here<br /> };</p> <p>var el, container = document.createElement(’ul’);<br /> container.id = ‘container’;</p> <p>for (var i = 0; i < 10; i++) {<br /> el = document.createElement('li');<br /> el.innerHTML = 'List item ' + i;<br /> YAHOO.util.Event.addListener(el, 'click', handleClick);<br /> container.appendChild(el);<br /> }</p> <p>document.body.appendChild(container);</p> <p>// After:<br /> var handleClick = function(e) {<br /> var el = YAHOO.util.Event.getTarget(e);<br /> if (el.nodeName == 'LI') {<br /> // Something useful here<br /> }<br /> };</p> <p>var el, container = document.createElement('ul');<br /> container.id = 'container';</p> <p>for (var i = 0; i < 10; i++) {<br /> el = document.createElement('li');<br /> el.innerHTML = 'List item ' + i;<br /> container.appendChild(el);<br /> }</p> <p>YAHOO.util.Event.addListener(container, 'click', handleClick);<br /> document.body.appendChild(container);<br />

Small improvements like these can add up to make much better code. If you’re a developer and you haven’t noticed a positive change in your code in the last few months, I highly recommend reading up on useful patterns and practices.

]]> http://scriptnode.com/article/my-new-coding-habits/feed/ 2 http://scriptnode.com/article/an-accident-i-constantly-see-in-php-scripts/ http://scriptnode.com/article/an-accident-i-constantly-see-in-php-scripts/#comments Tue, 29 Jul 2008 03:18:19 +0000 Matt Hackett http://scriptnode.com/?p=45 It’s quite normal to have multiple engineers working on an individual file or files with conflicting styles. Preferences come into play that do not affect the code at all. For example, I don’t like the one-true-brace style:

<br /> if ($condition)<br /> {<br /> my_function();<br /> }<br />

My braces stay on the same line as the conditional. But I understand that it’s just preference, and that’s fine; the application behaves the same either way. If a file already uses this pattern for the most part, I will leave it alone and sometimes even code in that style to keep things cohesive. But there is a bad PHP habit that I’ve recently come to believe is a mistake, and will change when I see it:

<br /> $first_name = “Jonny”;<br /> $last_name = “Chambers”;<br />

To me, this is accidental. These lines are parsed for variables, and when that feature isn’t being used, there’s an unnecessary performance hit happening. Granted, it’s a very nominal performance hit, but they can add up, and why suffer at all when there is no reason?

Don’t get me wrong: double quotes have their place, and I use them (properly) very frequently, such as:

<br /> $user_id = 1;<br /> $sort = ‘username;<br /> $query = “SELECT * FROM users<br /> WHERE (user_id > $user_id)<br /> ORDER BY $sort”;<br />

Style is one thing, and intention is another. Some people prefer double quotes over single quotes, sure, but I think most engineers don’t intend to parse their strings twice every time, and so I often see using double quotes as a mistake.

]]> http://scriptnode.com/article/an-accident-i-constantly-see-in-php-scripts/feed/ 3