Steve Holstad’s "the bright lights"

Sep 09

Gadfly Upcoming Features

We’ve had a LOT of great feeback come in regarding Gadfly the past few weeks, thanks to everybody that’s made an effort to tell us what they love, hate and want to see in the future. I thought it was only fair to publish a list of upcoming items, both to whet your whistle and to commit me to getting them done in the very near future. Does anybody say “whet your whistle” anymore?

Upcoming Features:

Short URL preview control: This is going to be above and beyond any of the basic URL un-shortening previewers around today. We see this as a dynamic user control that pops the full, original url, some sort of page preview or screenshot of the destination, site metadata, and maybe even some video. Ever been stung by people shortening malicious links? With Gadfly, those days will be over. I can’t wait to get this control in place.

Threaded Conversations/In-Reply-To Tracking: This is a must-have that’s been requested by multiple users… we’ll be adding support for tracking a conversation by displaying a chain of tweets that have been involved in a “reply-to” thread, aka a Twitter conversation.

Drag and Drop Groups: A lot of requests for this one.

Trending Topics: I’ll come clean: I didn’t think people used these as much as they do. They’ll be in place soon.

Enhanced Geolocation Functionality: We have some ideas to make this more clean, more accurate and more fun. Also there may be some upcoming changes to the Twitter API that will enable Gadfly to do more with the raw geolocation data we currently generate.

Out of Browser Authentication: Gadfly already supports multiple Twitter accounts. These are fully functional in the web browser… but currently in the installed OOB version you can only access accounts you registered with Gadfly from the browser (so you can’t add new accounts directly in OOB). Looking for ways around this, but tough without the HTML Bridge available. I do have a method that works (click a tweet link in OOB)… so maybe this is possible.

Skinnable Gadfly. We’ve tossed around the idea of making Gadfly skinnable. A few requests for this and a very cool way to make it “yours” and show off some design skills. I’d love to host a Gadfly Skin library at some point. Creating a Zune-like skin would be one of our first attempts at this. GadZune. Flypaper. If you name it they will come.

Upcoming Bug Fixes:

We are aware of some issues with the Tweet controls inside the panels,where the profile pic floats a little bit to the side.

Quite a few minor tweaks will be included in the next release to continue stabilizing the Gadfly Beta.

And remember: we’re still listening and will be pushing a build soon,so keep feedback coming via comments or on Twitter @steveholstad or @gadflyclient

http://gadfly.claritycon.com

0 comments , permalink

Sep 09

Introducing Gadfly, The Silverlight Twitter Client (with Out of Browser support)

By: Steve Holstad

We recently released Gadfly, our Silverlight Twitter client, to public beta. This project stems from my old Twitterlight days, and thanks to a few kind souls here at Clarity, the project gained momentum and has become a very well received Silverlight offering. Gadfly has already become the everyday Twitter client for some, thanks to the feature list below and support for Silverlight Out-of-Browser (OOB), which is part of Silverlight 3. OOB applications are one-click installations onto a client system, and behave much as a desktop application would without the need for a separate framework installation, such as AIR. Another nice feature of OOB apps is the ability to deliver both web and desktop experiences to users while maintaining a single code base. And we’re talking cross-browser, cross-platform for these, too. OOB apps live in the browser sandbox for obvious security reasons, but I think that even with its current limitations out of browser will have a huge impact on RIA developers starting immediately and expanding more and more as the feature list grows.

To be sure,we’re still gathering feedback from users,planning additions and adding polish, but the current release is pretty solid and has a ton of features. We have even more additions in mind, check the next post for a few of the ideas we’ve started/brainstormed. I won’t rehash all of the features of Gadfly, as http://gadfly.claritycon.com has been launched with a cool-factor I could never achieve. It’s also the place for you to launch Gadfly and give it a go.

A quick overview of some of my favorite features:

Virtualizing Stack Panels. Lee Roth did the work on this custom control that produces significant performance gains and memory reduction by virtualizing the list of items bound to the panel, and recycling the Tweet controls to eliminate the need for newing up one control for each item in the list. Currently we store up to 300 friend tweets in isolated storage, without virtualization you’d see noticable lag while they are loaded, created and databound. I don’t have a screenshot because it’s a bit of an abstract concept, but just take a moment the appreciate the virtualization awesomeness in your head…..mmmmmmm….cool. Seriously this was a ton of work and Lee’s been knee deep in virtualization lately. Check out his write-up.

Slick design. Erik Klimczak put together the look and feel of the app, which I think really shows off some of what the Clarity Design Team can do in a very short period of time. Lots of detail and nuance in here.. you’ll have to discover on your own what the app does when Twitter is down or when you near the Twitter API limit. Hmm, apps can have a sense of humor now?

Multiple custom group types. Notice the left hand bar? That contains any search groups you’ve added, any users you’ve singled out, and custom groups of users you created, a few “system” groups most Twitter users love (DMs, Mentions, Public, etc), a customizable geolocating Nearby group, and Gadfly Picks, which we’ll discuss below. You can have as many of these groups active as you like, and they will resize to fit the current screen area. Horizontal scrolling is available for the rest, as well as the ability to click the group name to scroll the group back into view.

Fleep-A-Tweet. Yeah I just made that up. But you CAN click on the tweeter’s profile pic and the tweet will flip to view more detail about that person. Still not satisfied? Then click the expander and see that user’s recent timeline, or add/drop the person as a friend. And c’mon, you KNOW “fleep a tweet” is fun to say. It’s kinda Chef Boyardee. Yeah I said it.

Manage your custom groups. Pretty self explanatory.

The Nearby group and geolocating tweets. THE Kevin Marshall‘s contribution to Gadfly: If you open the “Nearby” system group, Gadfly will try to determine your current location. If your location is found, you’ll see all tweets by users located within 20 miles of the specified location. If you want to set the location manually, click the current location and enter a city, zip, landmark, etc and we’ll try to map it to a geolocation. A perfect feature for travelers who want to keep aware of local tweeters as they change areas. (Note, some providers and corporate networks will struggle to accurately display your current location). Btw he calls this type of thing a “Kevinnovation”. Patent pending.

Gadfly Picks. This feature from George Durzi has some HUGE potential. Here’s how it works: you rate tweets you love (5), hate (1) or whatever and Gadlfy starts to learn your preferences. As Gadfly Picks’ algorithm starts to identify other Gadfly users that have similar likes/dislikes as you, you’ll start to see Gadfly Picks populate with ~3 recommended tweeter’s timelines. The Picks are regenerated each hour, so if you don’t like some of the recommendations, just rank their tweets with a lower score and they’ll drop out of your Gadfly Picks from now on. You can also check out George’s post for more info.

So there are a few of my favorite additions, I really hope you give Gadfly a try. And PLEASE send feature requests, bugs and comments to me via blog comments or on twitter @steveholstad. And if you have any postive feedback we’ll take that too, as anything helps to bring Lee back from the virtual world he’s been living in.

The Gadfather.

http://gadfly.claritycon.com

0 comments , permalink

Mar 09

Silverlight March Madness Bracket Application

By: Steve Holstad

Last week was the start of the NCAA men’s basketball tournament, aka March Madness. I did the obligatory bracket predictions via the usual sites, but noticed this could be an excellent opportunity to showcase Silverlight. Jeff had been tossing around the idea of creating something like this for awhile, and he convinced me to get cracking. Basically the app is a data-driven bracket layout system that allows me to setup a visual tournament structure. Teams are assigned to a starting “slot” (2 slots per game of course). Once this is in place, the user can create a new predictions for each game by simply clicking or drag/dropping the desired team onto the desired slot.

Demo the app: http://brackets.claritycon.com

Adding drag and drop to a Silverlight application is becoming more and more trivial. I’ve done this manually in the past, but now use the Silverlight Drag Drop Manager framework found on CodePlex. The individual teams are each assigned to an instance of DragSource, while each game’s slots are assigned to a new DropTarget. I created a few user controls, one to bind to the team information I wished to display, and another to act as the “ghost”, which appears when a drag is in process. Then it’s a matter of dynamically determining which DragSources (teams) are allowed to be placed on which DropTargets. I then made some minor customizations the framework to suit my needs, added some styling and drag and drop was in place. In case you’re wondering, my modifications were basically to expand the legal droppable area to slightly outside of the actual DropTarget,as early testers didn’t feel the targets were easily hit.The brackets for this tournament setup are too large to cleanly show on one screen,so I added some transition animations to give a panning-like feel as the user navigates between four regions and the Final Four. Right now the effect is decent, but I am looking for a way to avoid the slight delay I’m seeing as the new page dynamically loads the DragSources and DropTargets. I have been told about some WPF workarounds, but nothing as yet for Silverlight. I’ll post an update if I find a solution.

In order to make the app a little more fun I’ve added the ability to create private groups, added per-round scoring, enabled Twitter updates when games results are posted, and a live chat module. It’s also utilizing the NCAA March Madness Developer Platform, which links directly to each game’s live video feed.

I’ve created a Sweet 16 version of the app (it spots you the first two rounds we missed)… if you want to try it out:

http://brackets.claritycon.com
Create a user under “New Player Registration”
Click the “2009 Sweet Sixteen” tournament
Under “Join Existing Group”, enter the following:

Group Name: TwitterTesters
Group Password: tweet
Entry Name: [your entry's nickname]

Click your entry name in the Group Home grid
Single-click or drag/drop your predictions into the open slots (As the tourney has already started you will have the first two rounds auto populated for you)
Don’t forget to navigate to all four regions, and the Final Four, to complete your picks
Picks are saved as you go, no need to “Submit”
If you enabled twitter updates, follow the ClarityBracket user at http://twitter.com/claritybracket – this is in early testing… but should see updates after a game is finalized by admin (me)
Chat is the newest feature, so feel free to post away… though keep in mind it is global and public!

Good luck, have fun and let me know what you think.

0 comments , permalink

Jan 09

Thirsty Developer Show – Twitterlight (Silverlight + Twitter Client)

By: Steve Holstad

Last week Larry Clarkin of The Thirsty Developer and I sat down to discuss my hobby project Twitterlight, a fully-functional Twitter client written in Silverlight. We discussed Twitter’s REST service, getting started with Silverlight development and some common pitfalls to avoid.

I think it turned out nicely, check it out and let me know if you have questions or thoughts: Listen to the podcast

The source code is available at http://employees.claritycon.com/sholstad/publicsource/Twitterlight_v22.zip

And of course, don’t forget to follow me on Twitter.

0 comments , permalink

Oct 08

Twitterlight updated to Silverlight RTW

By: Steve Holstad

Twitterlight, THE browser-based Silverlight Twitter client, has been updated from Beta 2 to the official Silverlight 2.0 RTW.

http://www.twitterlight.com

2 comments , permalink

Jul 08

WhereTheEL: Tracking the Chicago CTA "El" System

By: Steve Holstad

Try the WhereTheEL alpha

The past few weeks I have been spending some of my days creating a project we have discussed here at Clarity for quite some time: live tracking the trains of the Chicago “EL” system. Currently GPS data is not yet available for individual trains, so we decided to leverage the growing community of active Twitter users to “crowdsource” this information. A basic user scenario goes something like this:

Sweet Lou is standing on the platform of the Red Line’s Addison station. When his southbound train arrives, he hops on and pulls up a favorite Twitter client on his phone. He sends a quick Twitter message directed to the WhereTheEL Twitter user: “@WhereTheEL Red Add S” (red line, Addison, southbound). Happy with contributing to the community, he cranks up “Go Cubs Go” and enjoys the ride.

Ozzie is in the loop, waiting at the Jackson station for a Red Line train. In a hurry, he’s not sure how long he should wait before catching a cab… so he pulls up the WhereTheEL site on his phone and is happy to see the image below. Looks like a Red Line train is approaching the loop, so he skips the cab and waits for its arrival.

Building the App

The site checks in with its LINQ to SQL data context every thirty seconds to determine if/where any trains have been reported by Twitter users, and determines the trains’ current positions. On page load, the train routes are loaded from a kml file, and an overlay is created to draw the paths. A second map overlay is created to display the collection of EL stations loaded from the database,with each object containing customized markup to display when the station marker is clicked.

The brain behind the site mentally walks the tracks,estimating where the train should be according to the last reported position. The time between stations is calculated from the posted CTA schedules. For each active train, a marker object is geocoded to the appropriate station. In the scenario above, checking the site ten minutes after Lou reported seeing the Red Line would display a train approximately ten minutes past the Addison station. Users can click on the train icons to view basic sighting information, and station icons to view CTA schedules.

In order to keep the map constantly updated, a windows service was created to access the Twitter REST API to retrieve any messages targeted at the WhereTheEL user. These “replies” are then saved using LINQ to XML into message objects. The messages are parsed to perform the lookups for train line, station and direction. If a match is found, the object is inserted into the database via LINQ to SQL for mapping display on the web site.

Detailed instructions on how to contribute are posted on the site:

Some future feature ideas:

Notifications: allow user to subscribe to line/station/time specific text notifications via Twitter Direct message
Host Google map control within AJAX Update Panel when supported
Silverlight conversion for animation of active trains
Ability to notify service regarding accidents/delays/etc
Create mobile application to leverage phones’ GPS functionality (auto-reporting)
The bottleneck right now is the time from the Twitter Reply creation to availability in the API feed, so may need to find a more direct route (Twitter Direct messages)

0 comments , permalink

May 08

Twitterlight updated with animating wrap panel

By: Steve Holstad

Twitterlight has been updated with some new features that really up the usability of the app.

http://www.twitterlight.com

Defaulted the view to Public, so non-Twitter users can see data on page load
Added profile pics back in
Added link to Twitter page on username
Made some massive changes to how the app’s structure reorganizes:

Moved to Grid wrapper to support dynamic resizing
Removed C1 combobox due to bug (couldn’t locate parent canvas, as it’s now a grid)
Added Erik Klimczak’s animating wrap panel to handle animating tweet movement between positions (He claimed a mERIKle on this one)
On resize, tweets lose some opacity if they don’t cleanly fit on the screen… when resized back to larger size, tweets come back alive (disabled for Safari on Windows)
Added a zoom slider, mostly for fun, but because sometimes you just need to see a profile picture a little better… or free up some real estate

This has become a work in progress, so let me know if you have features you’d like to see. Some are:

Make password textbox actually a password textbox
store tweet history for paging back through older tweets
store username and/or pw
Add reply/direct messaging shortcuts

thanks for the help on this, especially Josh Holmes for his suggestions.

Uncategorized

0 comments , permalink

Apr 08

Twitterlight to Silverlight 2.0 Beta 1

By: Steve Holstad

Ok ok, I’ve bitten the bullet and upgraded the Twitterlight Silverlight Twitter client to Silverlight 2.0 Beta 1. The Coding4Fun article has been updated with the latest source.

The client is live at twitterlight.com.

The major updates involved changing how some of the synchronous web service calls (authenticate, create TinyUrl) work within the app, now that all web references (woops, “service references” now) are asynchronous. Some XAML tweaks and minor code changes, and we’re good to go.

View the initial post describing the article.

1 comment , permalink

Jan 08

Facebook Developer Toolkit 1.6 Released on CodePlex

By: Steve Holstad

We’ve released the latest version of the Facebook Developer Toolkit on CodePlex.

This release addresses a change to the Profile.SetFBML() method within the Facebook API. As of Thursday, Jan 17, 2008, Facebook will no longer accept the legacy version of this method, which allowed three versions of Facebook Markup Language (FBML) within the same parameter. The updated version of the Profile.SetFBML method will accept three separate parameters to limit unnecessary parsing, which will ease profile load times.

Using the Facebook Developer Toolkit, the previous call of

FBService.SetFBML(generalFBML, FBService.UserId);

now becomes

FBService.SetFBML(profileFBML, profileActionFBML, mobileProfileFBML, FBService.UserId);

A full example to test setting the profile FBML would look like:

new protected void Page_Load(object sender, EventArgs e)
{
base.Api = FACEBOOK_API_KEY;
base.Secret = FACEBOOK_SECRET;
base.Page_Load(sender,e);

if (!IsPostBack)
{
try
{
// Use the FacebookService Component to populate Friends
Facebook.Entity.User u = FBService.GetUserInfo();
Collection<Facebook.Entity.User> f = FBService.GetFriends();

//Test Get/Set FBML (Profile parameter)
string userMessage = string.Format(“Hello,{0}, you have {1} friends!”, u.Name, f.Count);
FBService.SetFBML(userMessage, null, null, FBService.UserId);
lblHelloWorld.Text = FBService.GetFBML(FBService.UserId);
}
catch (Exception)
{
// do error handling
}
}

This is a breaking change for existing code, which we felt was more logical than throwing a runtime exception. Post comments to the CodePlex site’s discussion board if you have questions or comments.

0 comments , permalink

Jan 08

Twitterlight: Silverlight 2.0 (Alpha) Twitter Mashup

By: Steve Holstad

The Twitterlight Coding4Fun article has been published. I’ve added some updates, including url link support. Check it out!

All the source code is available, just make sure you add in references to the C1.Silverlight.dll.

Enjoy. – steve

=======================================================================

I ended up with a bit of bench time this week, so I’ve been working on two projects here at Clarity: Eating Jimmy Johns like it’s going out of style, and immersing myself in Silverlight 1.1/2.0 and the accompanying control toolsets. Also my foos skills apparently never left.

Lately I’ve become a regular Twitter user (everyone: “hello, steve”), and was itching to play with the Twitter API, so I set out to create a Silverlight 1.1 mashup. I also wanted an auto-updating page to use for viewing my tweets, without having to install a desktop app.

Visit the Twitterlight Alpha.

My goals here were:

Experience the joy of working around Silverlight cross-domain call prevention. Btw, different ports in VS count as cross-domain too. This is achieved by hosting a local web service within your web project, which can in turn call external web services to marshal your Silverlight app its data. I’m not going to step through how to do this, as tutorials are popping up like crazy on this… although most refer to the “Add Silverlight Link” step as “magic”. This goal was job one for me,because,while it’s easy to see the initial draw to the beautiful designs created via XAML/Blend, unless true functionality can be added to these apps, this technology won’t spread at the speed I’m hoping it will.

Test drive some emerging control sets. For starters, I’ve used ComponentOne’s Sapphire Toolset Alpha. My cube neighbors can vouch for a bit of the learning curve you may experience tackling an alpha release component suite, but all in all I think C1 is doing a really nice job with their controls. Documentation and forum support are not great, but will come in time; and the coming of Blend support will only make using these controls easier. For now, I pretty much stuck with creating all C1 controls via C#, as Intellisense helps discover what’s available for use.

Deploy a Silverlight app. Done and done. The apprehension I felt regarding moving away from good old “localhost” was unnecessary… The only major change required by my solution was to select the Silverlight project’s Web Reference to the local web service, and change the “Web Reference URL” property to the new, deployed web service location. Copy, paste, deploy, foos.

You will need to install the Silverlight 1.1 Alpha September Refresh before running this… browser-wise I’ve tested in IE7 and Firefox 2.0. And of course, you’ll need a Twitter account! I’ll post the code in the near future for this app, in the meantime I plan to try some other toolsets.

Email me at sholstad@claritycon.com with feedback. I’m available on Twitter at http://twitter.com/steveholstad.

Upcoming additions:
– TinyUrl and hyperlink support
– Resize to full browser size
– Search for and follow other Twitterers

Some Silverlight 1.1 / ComponentOne Sapphire Gotchas: (Updating as I go)
– Textboxes would not accept text(!) unless FocusManager.Initialize(this) is called on page load.
– Tab does not move focus to next control, it moves focus back to the browser (enhanced silverlight keyboard support is on the way)
– Cannot create password-masked TextBox, and even the workaround posted cannot work due to an alpha bug in C1 control… this explains why I have the horrendous white background/white foreground password textbox in this demo…
– C1 controls are not functioning as expected in Safari
– Have heard reports that Vista x64 users can’t view Silverlight content

2 comments , permalink