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.

Facebook Photoshop Template

I’ve been doing a lot of work on the Facebook platform these days and kept finding myself presenting comps with personal information mistakenly included! I had taken screenshots of the various “chromes” that a designer has to create for a fan page, tabbed view, canvas view, friend pickers, dialogue boxes… The list of designs was huge and they all had my targeted ads in the rail and my name and message count sprayed about. Nonsense, I say!

So I made an anonymized .PSD that I’d like to share. Highlights include:

• Generic names for all application areas
• Pleasant image placeholders that are the same size as those on Facebook
• Text treatments that are as close as possible to what Facebook shows you (it appears that Safari and Photoshop don’t quite render Tahoma identically)

This will be updated as I take on more projects that necessitate generic templates; let me know what you’d like to use most.

The generic-ized application template

Twitter Lists Launched

Twitter launched a new aggregation tool called “Lists” today. You follow a list, which has been curated (hopefully) by someone you know or respect, and you follow all of the people on that list.

Robert Scoble, for example, made this list of important tech folk to listen to. Indexing information is a documented problem, but I believe Lists force the user into a decision to use Twitter for information gathering and ground-listening, or to use it socially. Twitter doesn’t excel as a tool for both simultaneously. You can use it to replace your feed reader and listen to Scoble’s 38 new folks, or use it to make snarky comments into the listening void of your friends, but I don’t think it’s a both/and decision.

Inaugural Post

As they say (with only a little irony) in the software world, shipping is a feature. The verb for web developers would be “launching”, but the sentiment is the same: Nip, tuck, tweak, and nudge only until you can get something out the door. In front of people. That’s the idea behind this early iteration of Small Batch Studio’s very own website.

You’ll see the different pages fill in as I roll through my templates, and the copy with undoubtably change as the method of the studio is refined a bit, but that’s that. A website. Built. Out there. Waving at the googlebot as it whizzes by. Hello!