We owe a great deal of our early success to FeedStitch’s fantastic visual design. What you see today was no small feat for Owen, our designer, who subsisted on nothing but Tab and Run DMC records while we pelted him in the head with box after box of Adidas. When he finally emerged from the haze, we were treated to this:

While it has been a boost to our collective egos to see the design featured on numerous CSS and design galleries across the web, we were really flattered when we saw this gem:

I’m happy that the folks behind Clinical Reader (clinicalreader.com) thought so highly of our design that they decided to pay tribute to our original (thanks to Chris Martin for the head’s up).

We exchanged emails, identified the problem, and pushed out a fix:

We live to serve our customers, even if it’s during the weekend.

All of the source code for this example is available from gist.github.com. Go ahead and open up that gist link to follow along.

In our HTML page, we include two JavaScript files. The first is a FeedStitch group, in JSON format, as evidenced by the .json extension. Notice that we’re adding a variable, feedstitch, as a parameter. When you use do this, FeedStitch modifies its output to assign the JSON object to the variable we name. You can also specify the name of a JavaScript function using the callback parameter; if you do this, FeedStitch modifies its output to call that callback function with the JSON text as an argument. This technique, sometimes called JSONP, allows you to simply include the FeedStitch script and have a JavaScript object automatically prepared with the contents of the group.

(This would be a good place to mention that this technique allows the remote site (in this case, FeedStitch) to theoretically inject any content into your web page. At FeedStitch, we are only interested in good, not evil, so we will never intentionally use this functionality to do evil things. But you should still proceed thus informed.)

The second JavaScript file does all the work of inserting the group content into the page. Using the standard DOM methods, we create a list and populate it with entries from our group. This is only one way to do it, and it’s frankly the hard way; the easy way would be to use jQuery and its JSON parser. Keith Muth covers using jQuery on the Viget Inspire blog, if you’re interested in seeing a different approach.

Since we didn’t write any CSS, this looks plain, but our group is there on the page:

This demonstration is pretty basic, but given that parsing the JSON produces a full-fledged JavaScript object, there are all kinds of possibilities, like widgets, desktop clients, or anything else. If JavaScript’s not your language of choice, JSON parsers are available for nearly every modern programming language. Give it a try and see what you can do with FeedStitch and JSON!

What is it?

In brief, it’s a simplified feed aggregator that generates feeds that are designed to be shared with others. That’s it. The key to this being a useful tool relies on it being simple with a focus on sharing. While many sites assume that you want to share feed data as a web page, we think the real value is in sharing in other computer-readable formats like RSS and JSON. To see how easy it is to use, let’s step through an example – we’ll create a feed to stalk keep up-to-date with the FeedStitch developers.

Sign In

In the interest of ease-of-use, we opted to go with OpenID as a simple approach for combined sign-in and registration functionality. To get started, just use one of the supported OpenID providers (you do have a GMail account, don’t you?):

Add Sources

Once you’re signed in, you can start adding feeds:

Go ahead and enter the URL to the feed or, if the site has an auto-discovery link, the URL of the site itself – the application is smart enough to do the right thing. Don’t want to remember the RSS URLs for Flickr, Twitter, Github or others? Neither do we:

Get Ready to Share!

Added all your source feeds? Good. Let’s share them as a group:

Before we can impress our friends with our Internet skills, we’ll need to do something about our current URL. Let’s go from this:

To this:

That was close, now we can …

Share With Friends!

Click the name of your newly-created group to see how it looks:

Everything okay? Good. Grab that URL and share it with your friends, enemies, or even your mother-in-law*.

Sharing on the web is really only a small part of the idea – go ahead and grab the RSS feed to plug into your favorite reader, or pull the JSON data onto your site using JSONP through jQuery:

Get To It

Go ahead and check out the sample feed we created in this post (in RSS and JSON too) and then start stitching together one of your own.

* Neither the developers of FeedStitch nor its parent company, Pointless Corp, will accept the responsibility for any headaches, unwanted technical support, or awkward discussions about why you haven’t moved closer. Share at your own risk.