FanFeedr Widgets Are Live!

Over the past few weeks we had the opportunity to work with FanFeedr to put together some widgets for their sports news platform. Previously, FanFeedr had been using Sprout to build their widgets but this required someone to hand build a Flash widget for every “resource” on FanFeedr (there are a lot). In addition, since the Sprout widgets are Flash they aren’t easily crawled by search engines.

Our widgets are different. They allow FanFeedr to generate widgets on the fly for any of their pages and allow users to customize the color schemes. Check out a widget builder for the NY Yankees here.

Basically, our widget builder works by allowing users to customize the size and colors used in the widget. This data is serialized as a JSON object and then base64 encoded so that it can be sent to the “generator” on the server. Then, the server unpacks the payload and builds a widget according to the data specified in the JSON object. In addition, our embed code includes a noscript tags so that search engines pick up the links in the widget as well.

Anyway, working with FanFeedr was a great experience and we hope to continue our relationship moving forward. Go build yourself a widget!

sfWidgetjQueryTimepickr – Symfony timepickr widget

A couple of months ago John Resig posted on his blog about a “new” way for users to pick time.

The component is a jQuery plugin called timepickr and I thought it was particularly neat. Anyway, I finally needed to write a form which had a time component so I figured I’d drop in the timepickr jQuery plugin.

It didn’t look like there was a Symfony Forms widget for it so I whipped one up. You can grab it here.

The only issue with timepickr is that it introduces a ton of dependencies. It requires jQuery, jQuery-ui, jQuery.utils, jQuery.string, and ui.dropslide. Additionally, it needs the dropslide css as well as the timepickr css.

The form widget assumes that you will include jquery-ui by yourself since everyone usually has different naming conventions. It will include the other JS files and CSS files for you.

You can download a package with all of the JS and CSS you need here. Again this DOES NOT include the jQuery-ui stuff. YOU have to include that yourself in your Symfony project as well as on the page that you deploy this widget.

To use it, just drop it in your Symfony project somewhere where classes get autoloaded (projectdir/lib works) and then instantiate a widget with new sfWidgetjQueryTimepickr() . It currently will support all of the timepickr options passed in as widget options (on the constructor). Full documentation for timepickr is here.

Have fun picking time.

Use Greasemonkey to extract your Facebook Phonebook

7/19/2010 UPDATE: There is a BRAND NEW version of the script available on Userscripts here.
10/12/2009 UPDATE: Added fixes from Marcel Chastain
UPDATE: It looks like the version that got uploaded was missing a * in the trigger URL! That might be the issue everyone is having.
UPDATE: Video of the process: fbimport

Facebook’s API + FBConnect is great but it has some severe limitations. Notably, it doesn’t expose all the functionality available on the Facebook  site. Tonight in particular, I wanted to be able to copy a dump of my friends’ names and phone numbers off the site to load into a fresh cell phone. Unfortunately, looking at the API this isn’t possible.

Never fear – Greasemonkey provides enough of a hook into Firefox that it would be possible to write a UserScript to accomplish this loans-cash.net.

Continuing beyond this point is probably against the Facebook TOS and will probably severely void your warranty.

You have been warned.

The following describes how to use this userscript to extract your Facebook “Phonebook”. It produces of a CSV of your friends’ names and phone numbers. Fair warning – this is a rough prototype and does almost no error handling. Also, since the “Phone” field is a free text field I can’t promise people will have formatted their numbers in any sane fashion. But either way it’s a good start to revering lost numbers.

займы онлайн на карту круглосуточно

So here is what you need to do to use the script:

1. Install Greasemonkey – https://addons.mozilla.org/en-US/firefox/addon/748

2. Follow these instructions to install the script – http://userscripts.org/about/installing

Edit: The script is also on Userscripts at http://userscripts.org/scripts/show/43681

3. Navigate over to http://m.facebook.com/friends.php? (You’ll have to login)

4. Answer yes to the prompt and sit back – the script will move through your phonebook and eventually dump you a CSV of the results.

5. Copy/Paste the CSV wherever you want.

6. Un-install the Greasemonkey script.

So that’s it, one less walled garden to worry about. And hopefully one less “I lost my cellphone!” event/group on facebook!

The script:

Facebook Phonebook Exporter

Client side RSS aggregator

One of our clients came to us a few days ago asking us if we could build something to aggregate several RSS feeds and then display it on their site.

Easy enough. Except the caveats were 1) This had to be done on a shoe string budget and 2) We had no permission to script on the server side (only client side scripting allowed kids).

We put our heads together and realized that Yahoo Pipes would provide the functionality to easily combine several RSS feeds, sort them, filter them, ect. And best part? It’s all built and all free. Pipes also provides the functionality to export a pipe as a JSON feed (as opposed to RSS).

So that takes care of problem 1 and almost fixes problem 2. Of course the remaining problem is getting around the cross domain XHR restrictions on the JSON. I did some poking around the Yahoo Pipes documentation and it turns out you can add a _callback parameter to the URL and bang it wraps the JSON in a JS callback!

Issues solved. The final part was to mix in a little jQuery to load the JSON+callback feed into a <script> tag and then display it.

Total lines of code: 27 lines of javascript.

EDIT. Now with code!

Playing with appjet

The other day one of my friends jokingly mentioned that he thought strippers were being “marginalized” as profession. I thought this was funny, so I leveraged the powers of the internet to prove to him that in fact strippers are less marginalized then say podiatrists.

Enter amimarginalized.com

Anyway, with all of the hub-dub about Javascript being the next “big thing” I decided to give appjet a whirl. Appjet allows developers to develop and deploy server side Javascript applications. Additionally, appjet recently released “appjet in a jar” which lets users deploy the appjet platform on a different server.

Getting the appjet platform up and running was really simple. I already had Java 6 installed on one of our servers so all I had to do was download the appjet jar and fire it up with “java -jar appjet.jar”

In general, getting things moving was pretty easy with appjet. It also just “feels” natural to write Javascript for the client and the server. Switching between client and server is done with a comment directive:

/* appjet:client */
/* appjet:server */

appjet also provides a special directive for CSS styles:

/* appjet:css */

The other feature I really liked about appjet is its support for printing HTML elements. Appjet comes with a tag library that makes creating HTML tags particularly simple. The syntax looks something like this:

print(

FORM({action:"/", method:"get", onsubmit: "javascript: return submitJob()"},
SPAN({id: "job-label"}, "Job Title: "),
INPUT({text:"text", name:"jobField", id: "jobField"}),
INPUT({type:"hidden", name:"isPost", id: "isPost", value: "1"}),
INPUT({type: "submit", value: "Submit"})
)
);

And boom you have a XHTML compliant form.

The other neat feature, (from the appjet docs) is that “You can also treat a tag like a JavaScript array (it has all the same methods) and add to it programmatically.” so something like this works:

var list = UL();

list.push(LI("One item"));
list.push(LI("Two item"));

["Red","Blue"].forEach(
function(color) {
list.push(LI(color+" item"));
}
);

printp("The following "+list.length+" items may be of interest.");
print(list);

I was also really impressed with the appjet persistent storage system. The platform lets you persist arbitrary Javascript objects in “collections” that can then be iterated, filtered, and sorted. On amimarginalized.com I have about 800 elements loaded up and it seems to perform reasonably well.

The one issue I have with the storage library is that there isn’t any way to just load a bunch of data into the system. You can only load data from inside an appjet script file. The problem I ran into is that I hit the Java 64kb file size limit pretty quickly. It would be really awesome if the JAR had some functionality to load up say a file full of JSON objects.

All and all, using appjet has been a positive experience. It was really easy and fun to build an “easy” app using it. I’d really like to know some more about how appjet is put together but the documentation is sparse. The only information I could find was the logos on the download page. They suggest that appjet is composed off AppJet, Rhino, Jetty and of course Java. I’d be interested to know if there are any plans to expose JVM libraries to appjet code. It seems like this would allow the platform to quickly gain extensive library support – including the JDBC.

Anyway, the amimarginalized.com site uses “advanced” algorithms to determine how marginalized your career is. It just counts the number of results on Yahoo BOSS for the job you enter and compares it to a set of about 800 saved jobs.

You can download the source code here.