Made of Everything You're Not

One of the things I’ve done way too much of is the creation of language select pages. These are the types of pages on a website that visitors first encounter asking them to pick their language and they are a pain in the ass.

Weirdly, it’s a trend to have language select pages that contain a country flag. There’s a pretty strong arguments against this approach though, which makes a lot of sense considering there is no real correlation between country and language. It seems to me that any country with any amount of immigration knows this is true.

Dunce

Now, I may not like language select pages as a web developer, which I’ll go into more detail on in a minute, but I reeeaaaallllllly hate them when I visit a website that uses them. No matter what link I go to, whether I go directly to a page from a search engine or a bookmark, unless I’ve been through their language page I get forced to deal with it.

That’s just jarring and a little rude to me. I have the link. Just show me the stuff already!

Anyway, this begs the question, “WTF?” because nine times out of ten the website already knows what language I want pages served in.

Why It’s Stupid…

See, all modern browsers send this data along with every page request but, as evidenced by the proliferation of language select pages, web developers have yet to take advantage of that info.

In FireFox 3 go to Tools->Options->Content->Languages

FireFox3 Language Select

In IE 7 go to Tools->Internet Options->Languages

IE 7 Language Select

In Google Chrome click on the little wrench icon in the upper right hand corner and select Options from the drop down. Select Minor Tweaks and choose Change fonts and language settings.

Chrome Lang Select Page

In php you can access this info using the below variable.

<?php 
echo $_SERVER['HTTP_ACCEPT_LANGUAGE']; 
?>

In ASP.NEW you use the below:

<% Response.Write(Request.ServerVariables("HTTP_ACCEPT_LANGUAGE")) %>

In PERL the below does it:

print $ENV{'HTTP_ACCEPT_LANGUAGE'};

On my computer using FireFox 3 this is the value:

 en-us,en;q=0.5

So right there it’s saying I’m in the US and I prefer English as my language. It’s trivial for any programmer worth their salt to parse that into something usable. Use that as my preference instead of wasting my time by making me click on a stupid flag.

Facebook Connect is a new(ish) service from Facebook that allows integration between a users Facebook account and a third party website. The basic idea being that if a user updates their profile on Facebook the data gets updated on the third party website.

Facebook Logo

Basics

To start there are 4 different areas of integration with Facebook:

Identity. Seamlessly connect the user’s Facebook account and information with your site
Friends. Bring a user’s Facebook friends into your site. You can link friends that have existing accounts and even invite new friends to your site.
Discovery. Publish information back into their friends’ News Feeds on Facebook.
Privacy. Bring dynamic privacy to your site using XFBML.

Using the above description, it appears that integrating FriendFeed Connect on your site, especially a social site, allows users to keep their online profiles in sync between websites.

For example:
Assume I have a social site with Friends, profile pages and privacy settings.

When a Facebook user logs into my site I can prepopulate their profile data on my site with their profile data on Facebook. If there are other users on my site with a Facebook account I can move the users Friend list over as well. Finally, if my site allows customization of certain privacy settings I can keep those in sync as well.

Additionally, activity done on my site by a Facebook user can be pushed out to their Facebook profile.

And the coolest part? The user just updates their Facebook page to update my site!

Pretty cool really.

Not all sweet though…

There are some interface destroying guidelines, as well as some restrictions, third party sites have to abide by.

1. The website must display and use one of the approved Facebook Connect buttons on Facebook Connect Login Buttons to begin the “Connect” process.

2. When Facebook Connect is used to allow a user to “sign in” or authenticate with your website, the Facebook Connect option must be presented at least as prominently as the most prominent of any other sign in or authentication method on your site, and not as a secondary option.

4. When a user has connected their account and is currently logged in on your site, the application must show the profile picture and name of the user in a visible place on the page. This profile picture should be no smaller than 16×16 pixels and should include the Facebook “f” favicon in the lower right corner. If the profile picture is too small to position the icon over the lower right corner, you can position the favicon to the right of the picture.

6. If you have an application on Facebook and a website that implements Facebook Connect, the user will need to explicitly connect on your website before your website can use their information. However, once the user has both authorized the application and connected to your website, you can link the information.

8. Facebook Connect applications cannot publish one line stories automatically via the Facebook Platform API (i.e., without being presented to the user in a Feed form) unless the story and template have been approved through the Facebook Connect approval process.

9. When a user completes an action in an application that would prompt a Feed form, the application should add a check box (to the part of the flow associated with completing the action) asking the user if they want to share this information through Facebook (e.g., “Share this run with my Facebook friends?”). The check box may be pre-checked by default, but if the user unchecks this check box during the flow, the Feed form should not be shown.

11. When representing a list of friends to a user on the website, which includes a set of friends from the user’s full Facebook friend list, the website must indicate that the friend relationship on this website is associated with their friend relationship on Facebook. It is recommended that you use a Facebook favicon or the word “Facebook” to indicate that these friend relationships are associated with Facebook.

Still, even with all the work the above entails, it’s a compelling service.

So often in the development process shifting requirements can wreak havoc on the entire project. But sometimes, every once in a while, if the moon is in just the right place and the wind is blowing in the proper direction, you can walk away a better coder for it.

Rhino

Take for example my recent experience integrating the FriendFeed API into a client’s site.

Pop Quiz

The client has a website that utilizes the FriendFeed API, on the homepage only, to display information about their online activities. Basically, they want the site to be updated automatically whenever they update their MySpace or YouTube pages and the like. They’ve specified the layout to be something like the below:

“ClientName” just published a piece titled “Title” on “Site”. Published “X hours ago”

Pretty simple right? An obvious design would go something like this:
1. Connect to FriendFeed API.
2. Make request for data.
3. Display on the page.

The only issue is the formatting of the date / time difference. No worries though; there’s php code all over the place for that:

function RelativeTime($timestamp){
	$difference = time() - $timestamp;
	$periods = array("sec", "min", "hour", "day", "week","month", "years", "decade");
	$lengths = array("60","60","24","7","4.35","12","10");
 
	if ($difference > 0) { // this was in the past
		$ending = "ago";
	} else { // this was in the future
		$difference = -$difference;
		$ending = "to go";
	}
 
	for($j = 0; $difference >= $lengths[$j]; $j++) {
		$difference /= $lengths[$j];
	}
 
	$difference = round($difference);
	if($difference != 1) {
		$periods[$j].= "s";
	}
 
	$text = "$difference $periods[$j] $ending";
	return $text;
}

Using the above you can just execute the output like the below:

echo $me.' just published a piece titled '.$post_title.' on '.$site;
echo ' Published '.RelativeTime($relative_time);

Feeling pretty proud of yourself you show it off to the Producer in charge of the program and they come back with, “Nice! But how will it hold up after caching is enabled?”.

Well, I hadn’t thought of that (my bad fully)…

The Oh Shit Moment

Turns out, they’re expecting a lot of traffic (or the website is pretty resource intensive; take your pick) so full page caching is going to be required.

The problem is the timestamp; since all output is going to be cached the generated time, “5 minutes ago” or “2 days ago”, etc, isn’t going to change until the cache expires. This is not good…

How I Fixed This (The Wrong Way)

The first thing I did was make the conclusion that if php couldn’t be used then the job of formatting the string is up to JavaScript. “OK”, I thought, “fine, I’ll just port the php function to JavaScript and go about my day.

Here’s what I came up with:

 
function getUnixTimestamp(timeObj) {
	var dateObj = null;
	if (timeObj != null) {
		dateObj = new Date(timeObj);
	} else {
		dateObj = new Date();
	}
	return (parseInt(dateObj.getTime().toString().substring(0, 10)));
}
 
function RelativeTime(timestamp){
 
	difference = getUnixTimestamp() - timestamp;
	periodArr = new Array();
	periods = "sec,min,hour,day,week,month,years,decade";
	periodArr = periods.split(',');
 
	TimeLengths = new Array()
	timelength = "60,60,24,7,4.35,12,10";
	TimeLengths = timelength.split(',');
 
	if (difference > 0) { // this was in the past
		ending = "ago";
	} else { // this was in the future
		difference = - difference;
		ending = "to go";
	}
 
	for(j = 0; difference >= TimeLengths[j]; j++) {
		difference /= TimeLengths[j];
	}
 
	difference = Math.round(difference);
	if(difference != 1) {
		periodArr[j] = periodArr[j]+"s";
	}
	text = difference+' '+periodArr[j]+' '+ending;
	document.write(text);
}

Feeling sure of myself, again, a thought occurs to me that this still doesn’t fix the issue 100%. Sure, the date format will be consistent with the relative requirement, but the feed won’t be updated in “Real Time” so the full requirement isn’t there.

The Real Solution

A better idea would be to use AJAX to populate the area of the site where the blurb will be displayed. Since the AJAX request is independent of the rest of the site caching won’t be an issue. Sure, it’s a little more complicated but by doing an AJAX call the client gets exactly what they want.

The Lesson

Now, I’m not going to go into detail about the AJAX solution, mostly because I haven’t written it yet , but, to me, this is the far superior solution.

Admittedly, I was a little frustrated that I didn’t think of the AJAX solution sooner. That is, until I realized how much I had learned going in the “wrong” direction.

I had no idea that generating a UNIX timestamp in JavaScript was “complicated”.
I learned a lot about JavaScript string handling.
I got a quick primer in how JavaScript’s builtin Split function works.
I got a little humility out of the process too.

Sometimes, it’s good to go astray on a project.

By: buttershug

Validation and web standards have been on my mind a lot lately so it’s pretty fitting that Jeff Atwood would write a post titled “HTML Validation: Does It Matter?“. I swear that guy has a wireless link straight to my brain. Fucker…

I couldn’t help feeling that validating as HTML 4.01 strict, at least in our case, was a giant exercise in to-may-to versus to-mah-to, punctuated by aggravating changes that we were forced to make for no practical benefit. (Also, if you have a ton of user-generated content like we do, you can pretty much throw any fantasies of 100% perfect validation right out the window.)

To be clear, I agree 100% with him on this. The act of validating a website’s (X)HTML is just a HUGE freaking waste of time. I’ve gotten a lot of flack for this opinion but it’s mine and I stand by it.

In the world of web development the above statement is heresy but it’s true none the less. The reason it’s true is because NO ONE BUT WEB DEVELOPERS CARES about validation, time is expensive and, in the end, most sites have no control over their content anyway so you’re essentially pissing in the wind even attempting it.

The thing is, I have yet to have my mother ask me why my sites don’t validate. I’ve never had my girlfriend, neighbor, friend, mechanic, doctor, dentist, veterinarian, or, hell, anyone, ask why my site doesn’t validate. All they care is that it works on their computer / browser. That’s all anyone, who matters, cares about; web developers just aren’t a part the “He Who Matters” club.

Like most new web developers I was initially bitten by the validation bug and fought vehemently at the company I worked at to make sure our sites validated. Now, admittedly, this was around 2001 when there were only 2 web browsers to care about, Internet Explorer and Netscape (just barely though), on Windows only of course, so validation wasn’t the chore it is now.

Hell, back then it was perfectly acceptable to just place a note on your site saying that it only worked with a particular browser on a particular platform and no one cared. It was just an awesome cop-out true, but a practical one. Good times…

My attempt failed though because of the amount of work required to validate our code base. Obviously, this is due to poor design of the program architecture and not the act of validation itself, but the example does highlight a significant issue with the idea of validation. The difficulty in implementing validation is a rampant issue throughout most companies and since they can’t quantify the project, and since the experience doesn’t improve, it’s just not practical to the bottom line.

Which is the other issue with validation; there’s just no money in it. It doesn’t matter how many hours you spend or how many lines of HTML you refactor; at the end of the day the end user experience is no better than it was before you started the validation process.

Of course, this is assuming you have a working site to begin with. If you don’t, you’ve got bigger problems

Now, the validation trolls may say money shouldn’t be a part of the argument. That it’s up to the developer to know their skills and raise the level of their markup. That it’s still important to ensure 100% validation. My employers’ clients beg to differ.

Not to be patronizing, but it’s important to recognize this point. Not all of us work in ivory towers built on COBOL and mainframes. In my experience, most us have too many projects going on at the same time with too few resources and too little time. From a business standpoint it makes sense; more projects done by fewer people equals more money.

$money = ($project*$x)/($employees-$y);

For example, on my team, we do everything ourselves; the server hardware, database, scripting (both server and client), CSS and HTML. And it needs to be done yesterday. Out of all of the above the only one, well 2 really, that has zero downside for not following the “rules” is HTML (and to a lesser extent CSS). It’s not a hard choice.

And then there’s the user generated content curse (UGC). As Jeff mentioned, if you let users add their own HTML into your site you’re done. Give up. It’s never going to happen. YOU ARE FUCKED. All it takes is one user to confuse:

<br />

with

<br>

to completely destroy your validation plans.

Not that validation, as an idea, is bad though. Having a tool that will parse provided (X)HTML and present a detailed list of possible issues is a really nice debugging tool. I use it a great deal when fixing cross browser compatibility issues.

The thing you have to keep in mind while doing this is to take all output with a grain of salt. Just because there are errors doesn’t mean you have to spend time fixing them; just those errors that fix the issue in question. Stick to using it to find malformed tags and you’re good; attempt to fix issues that don’t improve the experience for the user and you’re just wasting your time and your client/companies money.

Of course, Jeff stole that thought too…

There is some truth to this. Learning the rules of the validator, even if you don’t agree with them, teaches you what the official definition of “valid” is. It grounds your markup in reality. It’s sort of like passing your source code through an ultra-strict lint validation program, or setting your compiler to the strictest possible warning level. Knowing the rules and boundaries helps you define what you’re doing, and gives you legitimate ammunition for agreeing or disagreeing. You can make an informed choice, instead of a random “I just do this and it works” one.

Get out of my head Jeff. Please man….

It’s taken way too long to do but I’ve finally fixed a bunch of issues people have been experiencing. In fact, this was supposed to just be a bug release but I got a little carried away with the design and added in a couple overdue features.

First, The Bugs

Big Bug!! (by Denis Collette)

To be blunt, there were a couple nasty bugs in 0.3 that pretty much ruined the experience for a lot of people. I’m sorry for that. I swear, it worked on my blog

Anyway, the bugs that were fixed include 2 that prevented the system from tracking (Gary) and a bug that pretty much destroyed a users blog (Joerg) plus a one that prevented the comment body from being parsed as well as a couple spelling issues.

The Gary bug prevented the tracker from working because of a simple pathing issue. I didn’t take into account that people might have their blog in a sub-directory of the domain so my calls were going to the ether instead of the WordPress installation. So, you know, my bad…

The Joreg bug was a little more insidious and harder to track down though. It basically consisted of a couple issues, that when combined, caused a memory failure on the users blog. This is pretty much the worst case scenario when developing for other people (to destroy the system) and I, unfortunately, didn’t experience this myself so it only became apparent on other peoples blogs. This one bugged the shit out of me.

To fix I had to take content from Joreg’s blog and add it to my system. After I did that my computer instantly burst into flames. I didn’t know that was even possible but there you go…

The actual cause of the bug came from 3 different causes:

1. Email (mailto:) links
2. Anchor (#top) links
3. Missing (empty hrefs) links

Turns out that my regex skills were lacking because I didn’t account for any of the above. To fix I just added checking for those types of links to the parser and am ignoring them for now. This is a no brainer for the missing and anchor links (why would you want to track those?) but I can see a reasonable argument for wanting to track mailto links.  I’ll be working on getting that working with the next release.

The comment parsing bug was easily fixed by changing the parse priority in the WordPress hook to a higher level than 1. This was an issue because WordPress uses it’s own plugin system to create links placed into comments to href links automagically so when I was parsing the href wasn’t created yet. I went with a priority of 9 and it worked great.

Now, The Features

New Gold Dream... (by law_keven)

So, while I was trying to figure out the Joerg bug I got a little motivated and started work on a couple new features no really asked for but I felt the system could use. The biggest is a mod to add links for external distribution. If I’m going to be honest, this really started as a bit of  a copout on my part. I originally wanted the entire experience to be seemless to the user so they wouldn’t have to go through the pain of manually adding links to the system but with all the problems people were having with the parser and me not being able to figure it as fast as I wanted I thought having a fallback mechanism to add links made sense. It should be noted that this decision was made at 3AM after a night on the town.

Like most coding decisions made while, ahem…”comfortable“, this mod required more work than I initially thought. I don’t want to bore with the technical crap but suffice it to say  a HUGE refactoring was required so I wouldn’t gouge my eyes out while working on the plugin. Technical debt, you’ve got to pay the price at some point…

I also built in a little configuration panel so blog owners can explicitly state what portions of the code they want to parse and which they don’t. This was, again, meant as a stop gap for the Joerg bug with the idea being that blog owners could lower the parsing coverage if performance issues came up.

And that’s 0.4. I hope this one goes better than 0.3 but I have no idea at this point. I did include the activation monitor so I can keep an eye on how many times it’s activated and/or deactivated so I’ll find out in about a week if people are actually using the plugin.

In the meantime, if anyone experiences any bugs or issues, no matter how small, please don’t hesitate to post a comment on the official WP-Click-Track 0.4 page.

One of the more nagging issues I have with releasing my code into the wild is that once it’s gone I have no idea what it’s being used for. I do have some limited data from various sources; for example I can easily track downloads from my site and the various counters some of the 3rd party sites who distribute my code have but this is painful and, frankly, flawed.

Magnifying Glass

Since I personally reuse downloaded code multiple times, while only downloading it once, I’m assuming there are other people who work the same way. This makes download tracking inaccurate for usage stats. Even if that wasn’t true, I would have to visit a few sites to get a total count and I’m pretty lazy so that kind of sucks…

Taking a cue from desktop programs I’m going to start keeping track of who’s using my shit.

Starting with the next release of Wp-Click-Tracker I’m going to be including a little script that let’s me know when a WordPress plugin is activated and/or deactivated.

For privacy hounds let me say this: the only information I’m going to collect is the URL of the site as well as the name and time of the action. This information will be kept strictly confidential though I will be publishing statistics about my plugin usage in the future. I will never, ever, ever, EVER, collect more data than what’s mentioned above.

To that end, the script I’m going to use is a new WordPress plugin I wrote I’m calling Activation Counter. I’ll be releasing it in the coming weeks for other WordPress plugin developers but I’ve been using it since the 0.3 release of wp-click-tracker and, so far anyway, it’s worked perfectly. Every time someone activates or deactivates wp-click-tracker a little “ping” is sent to my server which records the data.

Right off the bat, it’s allowing me to collect information about how many people are trying wp-click-tracker, obviously, but also how long someone keeps the plugin active. Because of that I’ve become aware of quite a few issues with the existing code that I’ll be fixing in the next release (0.4). I never would have been able to know about the issues if I hadn’t started monitoring the plugin.

I’ve been following iPhone app gossip for a while now and wanted to pass on some notes in the minute chance I knew something you didn’t (fat chance I know

iphone

1. In order to install an app on a non jail-broke phone it has to be from the iPhone App Store. Otherwise the phone has to be jail-broken (did you jail-break your phone).
2. Apple is notoriously Nazi about the App Store; they have very strict rules and regulations about what they will allow and their approval process is INTENSE.
3. iPhone apps are written in Objective C which is outside our comfort zone (freelancers are EXPENSIVE for Objective C)
4. There’s usually a 6 month approval process for an app to be allowed into the iPhone App Store. The app needs to be complete before requesting approval.
5. There’s a $99 application fee to add phones to the App Store (even for free apps)

The way I understand it Objective C is a kissing cousin (Eww!) of C so the concepts in C apply (which I’m already, elementarily, familiar with). From what I’ve read, iPhone app development is extremely painful and slow though. There’s no way to test or debug until you try to load the app; even the compiler doesn’t throw errors (which is weird).

That being said; I’m into it. I’m going to download some open source iPhone apps from sourceforge and dig into the code. Hopefully, there’s some good stuff out there