Tabbed River 2.0

A couple of weeks ago I got inspired to combine two of my favorite technologies to create something new. The two technologies are: 1. River of News and 2. Bootstrap Toolkit. I had already had the two combined, I’ve basically added Bootstrap to everything I do. But I wanted to have multiple rivers accessible from the same page, and Boostrap had what I needed to do that — tabs.

A picture named newAccordionGuy.gifThe first incarnation of the tabbed-river page had the Olympics and a bunch of other news flows. But I knew the Olympics would end, and it has, so I thought about what should replace it as the “featured” river. It didn’t take much thought to come up with the answer. Apple.

Why Apple? Well, they have a very active and large news culture, very large, but also focused. I know three of the leading Apple bloggers, John Gruber, Brent Simmons and Marco Arment for their list of authoritative news source, and they very generously provided pointers, which I put together as an OPML reading list, and I started River2 churning up links in the form of a JSON river flow. Another reason to go with Apple is that there are some new products coming in September. When Apple has new stuff usually there is quite a build-up in rumors and news. Our river will be there to catch the flow.

http://tabs.mediahackers.org/?panel=apple

While the river was filling up, I went to work on the tabbed-river software, which is all JavaScript that runs in the browser inside Bootstrap and jQuery. I had left a bunch of loose-ends in the first implementation.

There were two main things I wanted in this release.

1. Each tab should have its own URL. So I should be able to point to the Apple river, or the New Orleans river, or my own personal river, externally, without having to use words to tell you how to get there. Simplify the user experience by removing a step.

2. I also wanted to try something new — putting a worldoutline rendering of a howto in a Boostrap dialog. Click on the About this App button in the upper left corner. You might not even notice that there’s something new there, it’s so natural. The outline is viewed inside a Bootstrap modal dialog. I edit that howto in the outliner, and store it in a public Dropbox folder. There is an amazing amount of cooool new stuff working there. And I’m absolutely confident that it will scale, because all the code runs in your browser, not on my servers. I love that part. :-)

A picture named loverss.jpegSince Scripting News has a deep technical focus, I wanted to point out that there is some deep tech that connects the pieces here. Aside from the About outline, there is no data in the tabbed-river page. All that comes from a series of JSON files that are maintained by my River2 server. That means that an inquisitive programmer could use these flows in lots of ways limited only by your imagination. It’s a new application so I went with the format of the moment — JSON (also because the jQuery code likes JSON, heh). I keep beating the drum on this format hoping that others will pick it up. I’m sure at some point that will happen. Here’s the JSON for the Apple river. View-source here to get links to the others.

Thanks for all the enthusiasm and help. Special thanks to Gruber, Simmons and Arment for the feeds. To Dan MacTough for help debugging the JavaScript app. And to the river-of-news community for developing the jQuery river.

One more thing. What’s next after Apple? Well, there is an election in the United States in November. :-)

Advertisements

About Dave Winer

Dave Winer, 54, pioneered the development of weblogs, syndication (RSS), podcasting, outlining, and web content management software; former contributing editor at Wired Magazine, research fellow at Harvard Law School, entrepreneur, and investor in web media companies. A native New Yorker, he received a Master's in Computer Science from the University of Wisconsin, a Bachelor's in Mathematics from Tulane University and currently lives in Berkeley, California.
This entry was posted in Uncategorized. Bookmark the permalink.

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s