• Top Parent 1
• Child 1-1
• Child 1-2
• Sub-Child 1-2-1
• Sub-Child 1-2-2
• Child 1-3
• Top Parent 2
• Child 2-1
• …

Each element is it’s own entry in the one dimensional array. This makes outputting that data in any kind of readable form very difficult, where keeping track of parents and branches are required in order to make sense of it. This gets pretty messy, pretty quickly. And the deeper the tree, the more complicated the process.

To make this easier to deal with, the array should be built in a tree format as follows:

• Top Parent 1
  • Child 1-1
  • Child 1-2
    • Sub-Child 1-2-1
    • Sub-Child 1-2-2
  • Child 1-3
• Top Parent 2
  • Child 2-1
  • …

Where the children of the elements in the tree are actually children of the elements in the array.

In order to do this quickly and painlessly, we are going to parse through this array twice… no iterations, just a couple of foreach loops and we’ll get our tree exactly how we want it.

In order to do this, we must first make sure our array indexes are the same as the IDs of the items we are sorting (because we are pulling this from a database, right?).

To do this in CakePHP we run it through the Set::combine function like so:
Set::combine($tree_data, '/Model/id', '/.');

If you are not using CakePHP, you can create a new array, and as you foreach through your original array, set elements in the new array accordingly:

$old_tree_data = $tree_data;
$tree_data = array( );
foreach ($old_tree_data as $node) {
	$tree_data[$node['Model']['id']] = $node;
}

Now that we have our array indexes set to our model ID, we can proceed.

The trick to this method is not to move the nodes around, because if we did that, we’d still have to keep track of what went where, and that’s exactly what we’re trying to avoid. Instead, we’re going to use references to keep track of our data as it gets moved around. That way we still have our original base array element that we can play with without having to know where it actually is in the tree.

Here is the code, and then we’ll go through it and explain.

foreach ($tree_data as $key => $node) {
	if ( ! $node['Model']['parent_id']) {
		continue;
	}

	if ( ! isset($tree_data[$node['Model']['parent_id']]['Child']) {
		$tree_data[$node['Model']['parent_id']]['Child'] = array( );
	}

	$tree_data[$node['Model']['parent_id']]['Child'] =& $tree_data[$key];
}

Now to explain… We parse through the array and for each element, we first test the element to see if it has a parent, if it does not, we just skip it, there’s no need to go further.

We then check and see if the parent element has an index called ‘Child’ and if it does not, we create one and set it as an array.

Then we do the magic. We set the next item in the parent node’s Child element to the reference of the current node. We don’t actually move the node. So now if you look at the array, you’ll see two entries for the current node, one inside the parent element, and one that was the original in the flat array.

WARNING: One thing to note here, is that we are not setting it to the reference of $node, but to the reference of $tree_data[$key]. The reason for this is because if the element is referenced to $node, the next time through the loop, the value of $node will change and all of the referenced elements will be set to the new value of $node, and we certainly don’t want that.

The magical part of this, is that no matter where the references end up, the original is still there to be modified. So for instance if I have a branch path with IDs as follows: 12, 5, 13, 14… it doesn’t matter what that path is, I can still access the element with ID 14 by modifying $tree_data[14]. So if element 14 has child nodes, I can place them in the tree by modifying $tree_data[14]['Child'], and wherever that node is actually supposed to be, it will get modified there as well. That’s the beauty of references.

Now to clean up the array, we just parse through it once more, and clear out the original reference nodes (the ones that have parents):

foreach ($tree_data as $key => $node) {
	if ( ! empty($node['Model']['parent_id']) {
		unset($tree_data[$key]);
	}
}

And that’s it! No messing around with paths… no iterative functions… just twice through an array (maybe three times), and it’s all sorted, compartmentalized, and pretty.

If you have other methods of getting your trees into a usable form, please let us know in the comments. We love seeing how other people do things.

Although not technically a piece of the HTML5 spec, it is commonly used in conjunction with HTML5 and easy to use.

The geolocation API exposes three methods on the navigator object in javascript, two for getting location information about your user getCurrentPosition and watchPosition, and the other is a paired method for watchPosition, it is clearWatch.

The first, getCurrentPosition, returns a one time shot of where the user is. This is good for pinning a map or giving static directions. The second, watchPosition, continues polling at regular intervals to keep tabs on where the user is. This is perfect for giving dynamic directions, or tracking a movement. The two calls are mirrors of one another in that they both accept three arguments (success handler, error handler, geolocation options). The two calls are also both asynchronous, with a caveat that if this is a user’s first visit to your site they may be prompted to allow their position to be shared, this could cause the browser to stop loading.

The odd ball function here is clearWatch, which simply clears any watches you have assigned, in other words it stops tracking your user.

Now that we know the basics let’s dig in!

if(navigator.geolocation){
     navigator.geolocation.getCurrentPosition(function (position){
         var lat = position.coords.latitude;
         var lon = position.coords.longitude;

         alert('Lat: '+ lat +' \nLon: '+ lon);
     }
}

The example above is about as simple as it gets, a simple one shot to get the users coordinates and then output them to the browser.

That is all there is to Geolocation in the browser, pair it up with Google Maps API and you have an award winning geolocation application ready to please the world.

Smashing Magazine – HTML5/CSS3 Cheatsheet – http://bit.ly/aj0yfA

Ben Ludman – URL shorteners and CakePHP – Snook.ca http://bit.ly/btTmSP

And this site – HTML5 Doctor – I couldn’t track down the tweet that I found it from, but it is a great resource for HTML5.

I looked for some tweets about Magento, but just couldn’t find any that were appealing.

Luke, Redesign v. Realign
I really liked this article. As designers when we are approached by a client we always start to redesign their project. Sometimes all they want is a realign though. This article defines what a redesign is and what a realign is. The way each is approached is different and when they are followed I think it will lead to more happy clients. The hard part is defining when each is needed. This article will help with that. Web designers give this a read.

Mike, Better Buttons with CSS3
With better browser support, CSS3 is finally starting to get some traction. While IE is still emerging from the dark ages, there’s no reason we can’t start using CSS3. Web Designer Wall recently published an article on creating web buttons with nothing more than CSS. Even though rounded corners, gradients, text shadows, and box shadows aren’t all supported, your buttons will look fantastic for browsers that do, and perfectly usable for the ones that don’t.

Check it out here: Magento and Stackable Hosting, A Perfect Fit!

We have run a couple of installs on Stackable and it truly is a great product. If you haven’t already, check out our Magento specific site – Magento Mavens

For more information:

Event Website
Facebook Event Page

1. Custom Font Replacement: We had been using sIFR, but shortly after we built this site, cufón came around and we fell in love. Any custom fonts you see are now generated by cufón.

2. Dynamic Sidebar: The old sidebar was hard coded. I took that out and made each section it’s own widget which allows to move them around easily if needed and also add third-party widgets should we choose to do so.

3. RSS: I created a FeedBurner RSS so be sure to update – http://feeds.feedburner.com/TheCodeDojo

4. The Clan: Under The Clan section in the sidebar, you can now click on one of the names and it takes you to a new page with that persons bio and all the posts they have written.

5. Facebook Fan Page: We started a Facebook Fan Page – you can become a fan here: http://www.facebook.com/CodeGreene

6. Custom Share Icons: Mike built us custom share icons to fit our ninja theme. Thanks Mike!

7. Contact Page: Rather than sending you, the user, to codegreene.com to fill out a contact form, you can now send us your requests by going here: http://dojo.codegreene.com/ninjas-for-hire – so drop us a line.

A few subtle changes will be coming in the future – let us know what you think!

Luke, Future of Web Typography
For years typography on the web has been very limited when compared to what can be in the print world. Over the last few years though we have been given more and more tools to help us accomplish good typography on the web. As time goes on these tools will get better and will become more widely supported. There was an article on Smashing Magazine this week that talked about a lot of these tools that are available to web designers. I really enjoyed reading up, refreshing my memory of code I haven’t used in a while, and also learning some new ways of styling type. Read it over, the text on your website will be very happy you did.

Benjam, 20 Helpful jQuery Methods You Should Be Using
While developing a website, I use a lot of tools, both in the creation of the website files (my text editor of choice, file manager, etc.), and within the website itself (CakePHP, jQuery, CSS, etc.), and I’m always interested in finding features of those tools that I might not be very familiar with.  While I have a deep familiarity with the features I use regularly, and a passing familiarity with most of the features of these tools, it’s always good to get a refresher on what I could be using more.  Here is a post highlighting 20 jQuery methods/features (actually 33 methods in 20 groups) that should be in everybody’s familiarity tool box.

Mac, April Fools – PHP Style
This discusses a topic that we often only think about once or twice a year, but it is still worthy of our attention and deserves some practice to improve our skills. Also, while you are there, subscribe to the PHP Developers feed. The main guy, Chris Cornutt, does an excellent job of filtering the best PHP articles.

Lets say that a client decided they would like the background of every other <li> tag to be darker than the rest. This <li> is created dynamically. In the past I would have to go contact a Back End Dev and have him write some code to put a class on every other <li>. Then I would go style those with the new class. With the use of the nth-child pseudo selector I can do this with the CSS alone. Here’s how:

ul li:nth-child(2n+1) { background:#212121; }

The expression 2n+1 will match the first, third, fifth, seventh, and so on, elements if they exist. 2n+1 isn’t the only expression you can run. Here is a list of a few possibilities:

• 4n+1 would select the first, fifth, ninth, thirteenth…
• 4n would select fourth, eighth, twelfth, sixteenth…
• -n+5 would select fifth, fourth, third, second, first, none

If this isn’t making perfect sense yet just run the math loop in your head and it will. Lets take the first example again. 2n+1

• 2*0+1=1
• 2*1+1=3
• 2*2+1=5
• 2*3+1=7

Before we go out and use this everywhere I should point out that IE doesn’t support this in any of its versions. The saving point to this though is that jQuery does support all CSS selectors so if you are using jQuery you should be fine. For examples of how the nth-child works with jQuery see this page. Happy Coding.

So, I’m going to do my part: I found a workaround that I think might work very well for a lot of people who run into this problem. It’s biggest advantage is that it is very very easy to try, and has almost no downside, even if it doesn’t work for your particular situation. In my case, I found that Apache did indeed have a lot of files open, including log files for all my VirtualHosts, all the libraries that httpd depends on, files from sites that are hosted there (though it seems to open and close those just fine), and a large buildup of hundreds of entries for /tmp that were open and apparently never got closed properly. In my case, the server in question has an uptime of over 2 years, and while “apachectl restart” runs at least daily for log rotation, it seems that doesn’t really close unused file descriptors. The workaround I discovered was running “apachectl stop” followed by “apachectl start” which fixed the problem completely for me, at least for the next year or two I hope. From over 1600 open files, after restarting Apache fully that way, it only reopened about 325 files. And the imap_open() calls started succeeding as they should.

One last thought before I hop off my soapbox: when you find an answer to a problem, and that answer was hard to find or was not well documented, do your part to remedy that for the next guy or girl to hit that problem, and post your solution somewhere that Google will find it. It makes the internet a better place for all of us, and makes us all more productive. Who knows, maybe down the road you’ll run into the same problem again yourself, and not remember how to solve it until you find your own post from years before, and it will be your own time you’ll save. I fully recognize that a lot of what I accomplish each day is based on work done by others that I have found and emulated, as they say, standing on the shoulders of giants. Each contribution to the body of human knowledge lets us reach that much higher, so when you can, add your bit and as we all do that, it adds up.