Finely Crafted Digital Bits

PHP Exercise

My wife and I are traveling over the next 2 months, and as an exercise I created a page to let our families and friends know our location (roughly).

The result is quite neat, and I’ll explain a few of the finer points.

The Javascript Flipping Clock is a direct borrow from a NetTuts tutorial. Javascript wizard I ain’t, but it looks pretty swell.

The current activities are stored in one array per activity for a total of 6. To determine which array to pull from, I did a fairly straight forward elseif tree:

22
23
24
25
26
27
28
29
30
31
32
33
34
35

$array_to_use = ''; //always initialize
 
if ($now < 1258783201) {
	$array_to_use = $boston;
}
elseif (1258783201 < $now && $now < 1258956001 ) {
	$array_to_use = $driving;
}
//many other elseif
else {
	$array_to_use = $default; //in case the page is viewed later
}
 
$quote = $array_to_use[rand(0,count($array_to_use)-1)]; //picks one from the array

Some key points are highlighted, and these lead to robust code: Always initialize your variables and provide default values. There’s a potentially confusing part at the end to choose the actual phrase to display.

To access an array element, you provide it with an index. The first element in $Array is $Array[0], for example. This uses several nested functions. First it counts the elements in $array_to_use and subtracts 1 (to make the first element = 0). Then it picks a random number from 0-(# of elements in array), and uses that as the index for the array. The result is that each time to access the page, it shows a pseudo-random phrase.

The timeline was all displayed using CSS and HTML. It’s hard to be semantic for something so abstract, but the code is there for your inspection. There was a fair amount of math to ensure the chart was actually to scale, and I believe I wound up at roughly 8px per day. The final bit was making the yellow indicator move (slowly) as time passed. The HTML is a fairly straightforward

118

<div id="ticker" style="left:<?php echo $diff;?>px;"></div>

$Diff is calculated by some subtraction and scaling of times, like so:

5
6
7

$start = 1258092001; //midnight start date
$now = time() + 3600; //plus an hour for EST
$diff = round(($now-$start)/10800); //division puts it in the 3hrs/pixel range

This is a good demonstration of some basic PHP scripting. Let me know if you have any questions about it.

Facebook Application Workflow

This must be a gripe for anyone working on the platform: The workflow is just awful. My Gripe/Solution list for frustrated folks learning the ropes:

• “I just want to make a custom profile Tab, why is this so hard?”
  • Use the (seemingly) little-known Static FBML App from Facebook. Use basic FBML and HTML, on a tab.
• “My CSS won’t show up on my app/page/tab when I refresh it!”
  • Facebook caches all externally referenced CSS files. When you change the file and save it, make sure the link increments by one:
    style.css?v=1.0
    changes to
    style.css?v=1.1.
    They use version numbers to tell if they need to re-cache.
• “I can’t set up a local dev environment!”
  • You’re right. Test HTML locally, use the Dashboard for smaller API calls, but for testing larger pieces of the app you’ll need to push code to Facebook before you can really see how it works. They do sometimes take up to 5 minutes to propagate changes, however, so make some visual cue that you have a new version up so you’re not guessing if it’s the bug fix, or the bugged version.