I Miss Smarty
The last couple of days I’ve been getting my hands dirty with the codebase of one of the projects at work. At first I was kind of excited because it’s always a good experience becoming familiar with the unfamiliar. But imagine how my heart sank when I opened that first .php file and saw code like the following:
<table>
<?php foreach($tableData as $dataRow) { ?>
<tr>
<?php foreach($dataRow as $data) { ?>
<td><?php echo $data; ?></td>
<?php } ?>
</tr>
<?php } ?>
</table>
Yes that’s right. PHP code mixed with the HTML markup. It’s a far cry from the neatly formatted Smarty templates that I’ve been working with the past 2-3 months.
There are three places where I usually see this kind of ‘unfortunate’ code:
- PHP for dummies books
- Templating systems
- Ajax payloads from the server
A free cookie to the first reader to guess correctly which category The Project falls in.
Although there’s a good reason why much the codebase is written like the above, that justification doesn’t make working with it any easier. Case in point: I spent the better part of this afternoon pulling my hair out trying to figure out why a block of HTML wasn’t showing up and it was all because I misplaced a </div> insde a triple nested <foreach> structure.
Not the best way to spend your afternoon. Especially during the first week of a new job…
A New Job
So just imagine going into work on a Monday morning. You’re immediately called into an unscheduled meeting (which in my experience is never a good thing). You’re informed that due to budgetary concerns you’re being laid off.
However a similiar position at another company has been generously arranged for you. It’s just a matter of you accepting. And as tempting as it is for you to sit a home all day and collect six months worth of employment insurance, you accept.
And that’s how I got a new job.
In case anybody’s wondering: This new position entails me to use the same set of technologies that I’m familiar with (PHP, Javascript, HTML, Ajax). The new workplace is even the same type of workplace environment (even down to the machines itself). So really it just feels like I’m been assigned to a different development team more than anything else.
Javascript Snake
I made a Javascript version of that ubiquitous snake game. Why? Well certainly not because the world is lacking of Javascript based Snake games. I came across a copious amount of free time at work today and feeling that I had to code something while at work I figure a snake game would be straight forward(ish).
Displaying The Snake:
The basic premise is the following grid (where yellow represents the snake and green represents the snake head):
| 0 | 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 |
| 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | 19 |
| 20 | 21 | 22 | 23 | 24 | 25 | 26 | 27 | 28 | 29 |
| 30 | 31 | 32 | 33 | 34 | 35 | 36 | 37 | 38 | 39 |
| 40 | 41 | 42 | 43 | 44 | 45 | 46 | 47 | 48 | 49 |
To appear to move the snake you manipulate the head (27) and tail (22) cells by changing its colour. For example to move up colour cells 17, 22, and 27 green, white, and yellow respectively. I’m more than sure there’s a name for this kind of ‘illusion’.
Changing the colour is as simple as changing the cell’s background-color property.
Surprisingly the biggest hurdle that I had to overcome was coming up with the HTML to make the grid. I tried using a bunch of <div>s and aligning them with float:right but of course I couldn’t get that to work across browsers. The Designer helpfully suggested that I just use a good old fashioned <table> and lo and behold that worked beautifully!
Moving The Snake:
The snake’s cell numbers are stored internally in a deque. When the snake moves push the new head and pop the old tail.
get new head position
if new head position is the wall or the snake itself
end the game
else
if new head position is food
place food in a new position
grow the snake
update the score
else
remove the tail from the snake deque
add the new head position to the snake deque
Determining The New Head Position:
The new head position is determined by the current direction of the snake. For example in the grid above the new head positions would be 17, 28, and 37 for up, right, and down respectively. Note that left is an invalid direction. The current direction is controlled by whatever arrow the user presses during the game. Of course you want to check if whatever the user presses is a valid direction.
Anyways… play the game. Let me know what you think…
Music Database
How awesome is JQuery’s Ajax and XML parsing functions? It helped me implement the basics for my ajaxish music database application all during my lunch break today at work. I’ve been putting off creating it mainly because I didn’t want to deal with writing the tedious Ajax and XML parsing code that’s necessary for Ajax stuff.
And when I say ‘basics’ I mean everything except for the interface (ie. the HTML / CSS part). I was trying to go for the Homebrew style of OS X’s Terminal application but since I’m not much of a designer it was difficult getting that exact look. Also note that ‘basics’ really means ‘not production ready’ but since this is just a personal project kind of thing what do I care how polished things are.