Karsten Januszewski

Weird Behavior With Twitter Rate Limiting

Karsten Januszewski — Wed, 21 Oct 2009 19:14:00 GMT

Twitter rate limiting was doing some funky stuff. Was using the Search API and getting 503, which means you are getting rate limited even though the error response is Server Too Busy. Discovered their rate limiting API, which you can call at http://twitter.com/account/rate_limit_status.xml to find out what was going on. When this was called from a browser, it return 150. But when called using WebClient and passing a User Agent string with a URI, the api returned with 20000 as the upper bound although it didn't seem to respect that. Another funny thing is that, although I'd send a single request, it would ding me for multiple requests. Not sure what is going on there under the hood.

Cross Domain Silverlight XAP Access in Silverlight

Karsten Januszewski — Tue, 04 Aug 2009 17:28:00 GMT

So you want to host a Silverlight application (aka a .xap) on a server, making it available to be called from other servers. I just had to do this and figure I'll document the steps. It isn't rocket science, but here's the story.

First, you need to place a clientaccesspolicy.xml or a crossdomain.xml file at the root of your server. Read this MSDN documentation for more.

Then, you need to set the enableHTMLAccess attribute to true in the object tag:

<param name="enableHtmlAccess" value="true" />

Lastly, make sure your server is sending the right mime type for the .xap (application/x-silverlight-app). Tip o' the hat to Joe Field for that one.

And, with that, walla -- you are good to go. Here's an example of a music player being served from http://visitmix.com where I'm dynamically passing in the URL to the .mp3, which sits entirely on another server:

XAML Playground: A XAML Designer Built In Silverlight For Gestalt

Karsten Januszewski — Thu, 23 Jul 2009 16:09:00 GMT

Seems like I can't get away from writing designer tools. After shipping Glimmer: a jQuery Interactive Designer, I helped out with the Gestalt project and assisted with the XAML Playground.

In the XAML Playground, you can drag and drop XAML controls onto the design surface, see the generated code-behind and even copy it into your own Gestalt applications. Note, however, that the XAML controls provided are a very small subset of those available.

Much of the code was written by Mike Harsh so mad props to him. I came in and added the property grid as well as some exception handling. Probably the most interesting part of writing this application for me was getting the databinding working between the property grid and the design surface itself. Nothing too crazy here and, if you look at the code, I took the easy route and did not do it based on reflection, but rather just picked a subset of properties to support. (Hey, if you want 'em all, go get Expression Blend!) Through two way data binding, the XAML playground will update the property grid as you resize a control and will update the control as soon as you change a property. Yee hah!

The other funky thing I had to deal with was the source attribute of MediaElement and Image, since I actually render the media or image on the surface. As such, my bindings have to deal with some goofy exception handling if the source is invalid. You can check out all the source code for the XAML Playground (and the entire Gestalt project, which is pretty rad) on Codeplex here.

Here's some screenshots:

Go Gestalt!

Øredev 2009

Karsten Januszewski — Mon, 22 Jun 2009 17:33:00 GMT

The good folks at Øredev 2009 have invited me to speak in November 2009. Here's the sessions I'll be giving: Developer/Designer Workflow with WPF/Silverlight and Glimmer: A jQuery Interactive Design Tool. I’m stoked! Here’s more about the conference (microformated no less!)

Øredev 2009
Øredev is the premier conference in Europe focused on the software development process - from programming to project management and more ...
Wednesday, November 4, 2009 (all day)

Malmö Exhibition & Convention Center Malmö Mässan

Malmö, 21119 Sweden

The Archivist: Notes on Development

Karsten Januszewski — Fri, 15 May 2009 17:50:00 GMT

Just came out with a new experiment from the Mix Online lab called The Archivist.

I put it together with Tim Aidlin, written in WPF, using this basic LINQ query for talking to Twitter search.

I used the Dan Crevier data model for doing everything asynchronously.

I used Jaime’s WPF port of the Silverlight chart controls for the chart. Probably should update the chart to use the latest port.

The application is deployed with ClickOnce, which is real handy because I can push updates to the application easily.

That’s it!

Glimmer Errata

Karsten Januszewski — Wed, 29 Apr 2009 17:56:00 GMT

--There’s a 17 minute video posted up on Channel9 that Tim Aidlin did which gets into exactly what Glimmer does. He goes into the motivations of why we built Glimmer from the design perspective. He also does some cool demos of how to use the tool.

--There’s a post from Tim Heuer, who used Glimmer to create a jQuery script on his site. Looking forward to seeing other examples of Glimmer used in the wild. If you deploy a Glimmer-generated script, please let us know on the wiki.

--In both Tim’s video and in the intro video, Glimmer is talked about being on Codeplex. However, we ended up putting both the setup.exe and a .zip with all the source code on http://code.msdn.microsoft.com/glimmer.

Ship It! Glimmer: a jQuery Interactive Design Tool

Karsten Januszewski — Tue, 28 Apr 2009 19:13:00 GMT

We just shipped Glimmer: a jQuery Interactive Design Tool. Now maybe it makes sense why half my posts have been about WPF and half have been about jQuery. Over the last few months, I've been building a WPF design tool for jQuery.

Once again, it was a collaboration with Tim Aidlin, who did all the design work, both for WPF and jQuery. He used Blend to build the UI of the application itself and then he used Glimmer to build all of the jQuery samples along with Expression Web. Go Tim! He's got a great post on his blog that shows the evolution of Glimmer and gets into why we built it in the first place.

There's a few things I'm particularly fired up about as far as features in the application:

Extensibility. From the start, I wrote Glimmer to be extensible. I think the model is pretty clean. If you want to create a wizard for Glimmer, you simply create a WPF User Control. You can pretty much do anything from there. If you want to create a new effect, you just need to subclass from the Effect class in GlimmerLib and then create a datatemplate. If anyone out there ends up wanting to write a Glimmer wizard or effect and is looking for help, let me know.
Interactive Design Surface. Joshua Allen and I collaborated to make the HTML design surface in Glimmer. It is pretty simple but powerful. Once you load an HTML file into Glimmer and you click "Select" either for the Action or Target, the HTML design surface becomes active, similar to if you use the IE8 Developer Tools and click the arrow. We then auto-populate Glimmer with any CSS IDs when they are hovered over.
Live Preview of Wizards. When you use one of the wizards, you get a live preview of the HTML/CSS/jQuery that's being built for you. I do this by using property change notifications in WPF to fire off an attached event that refreshes the web browser control that's hosted by Glimmer. So, for example, if you are building an image sequence wizard and you change the duration between flipping images, you'll immediately see it reflected in the preview pane even before you complete the wizard.
Preview in Browser. Okay, so it isn't Expression Web's SuperPreview, but it is quite handy when doing web development to be able to preview in different browsers right from the tool you are working in.

Overall, the application is probably the most ambitious WPF I've written. I ended up using a MVC pattern (mostly -- it isn't absolutely pure). Thanks to Jaime Rodriguez for some assistance on that front as well as a couple other WPF issues I hit. The entire thing is done using databinding and has datatemplates nested in datatemplates nested in datatemplates. I use commands and not event handlers (mostly -- it isn't absolutely pure) and do some funky things with attached events. The source code is posted for anyone who dares to dive in. :)

Looking forward to feedback as people give it a whirl...

Image Merge With Photoshop Slices: Another jQuery Experiment

Karsten Januszewski — Mon, 13 Apr 2009 07:30:00 GMT

Here's another jQuery experiment, done with Photoshop slices and then doing jQuery animations on absolute X and Y positions specified by the CSS which was generated by Photoshop. The result can be seen below or you can browse the page here.

(Photo of Crossfox drummer by Adam Forslund.)

Finding All Installed Browsers in Windows XP and Vista – beware 64bit!

Karsten Januszewski — Fri, 03 Apr 2009 20:39:00 GMT

In the application I’ve been working on, I needed to find all browsers that are installed on a user’s machine. The best way to go about this is to look in the registry under HKEY_LOCAL_MACHINE\SOFTWARE\Clients\StartMenuInternet. This is where browser manufacturers are told to put their information, per this MSDN article. But here’s a gotcha I hit: on 64bit, the keys get written to HKEY_LOCAL_MACHINE\SOFTWARE\WOW6432Node\Clients\StartMenuInternet.

No big deal: just need to check that key first.

So, here’s the code I ended up writing to get the name, file path and icon for the browsers installed on a user’s machine. (Note that the Browser object is my own class.)

RegistryKey browserKeys;
//on 64bit the browsers are in a different location
browserKeys = Registry.LocalMachine.OpenSubKey(@"SOFTWARE\WOW6432Node\Clients\StartMenuInternet");
if (browserKeys == null)
    browserKeys = Registry.LocalMachine.OpenSubKey(@"SOFTWARE\Clients\StartMenuInternet");

string[] browserNames = browserKeys.GetSubKeyNames();

for (int i = 0;i<browserNames.Length;i++)
{
    Browser browser = new Browser();
    RegistryKey browserKey = browserKeys.OpenSubKey(browserNames[i]);
    browser.Name = (string) browserKey.GetValue(null);
    RegistryKey browserKeyPath = browserKey.OpenSubKey(@"shell\open\command");
    browser.Path = (string)browserKeyPath.GetValue(null);
    RegistryKey browserIconPath = browserKey.OpenSubKey(@"DefaultIcon");
    browser.IconPath = (string)browserIconPath.GetValue(null);
    this.Add(browser);
}

Solving ComboBox SelectionChanged and MouseWheel Problem in WPF

Karsten Januszewski — Mon, 30 Mar 2009 05:21:00 GMT

I hit a WPF issue where I had a ComboBox and was wired up to the SelectionChanged event and the mouse wheel was causing SelectionChanged to get fired over and over again. Solution? Wire up the PreviewMouseWheel event on the ComboBox and set e.Handled to true.

Tetris Flotzam at MIX09

Karsten Januszewski — Thu, 19 Mar 2009 20:22:00 GMT

Check out some shots of Flotzam at MIX09 up on Flickr. Here's a couple that came out pretty well:

Consuming Twitter Search ATOM With Linq -- And Watch Out For Caching!

Karsten Januszewski — Thu, 19 Mar 2009 00:51:00 GMT

So you want to know what is happening right now. Twitter Search is the way. Constructing a query and parsing the ATOM is pretty easy.

Recently hit a gotcha where the network my app was running was caching the results. The way to override was to create a WebClient and set the cache policy explicitly. You can see how that works by setting the RequestCacheLevel to NoCacheNoStore. Then, call OpenRead() on the WebClient.

After that, I use Linq to parse the results. One gotcha is the need to explicitly add the namespace when querying the results. (If there is a better way, let me know!)

Here's the code.

string xml;
string term = "mix09"; 
using (WebClient webclient = new WebClient())
{
    RequestCachePolicy policy = new RequestCachePolicy(RequestCacheLevel.NoCacheNoStore);
    webclient.CachePolicy = policy;
    Stream stream = webclient.OpenRead
         (string.Format("http://search.twitter.com/search.atom?q={0}", term));
    StreamReader sr = new StreamReader(stream);
    xml = sr.ReadToEnd();
    sr.Close();
}
XDocument doc = XDocument.Parse(xml);
XNamespace xmlns = "http://www.w3.org/2005/Atom";
var tweet = from entry in doc.Descendants(xmlns + "entry")
            select new
            {
                Content = entry.Element(xmlns + "title").Value,
                Date = entry.Element(xmlns + "published").Value,
                Author = entry.Element(xmlns + "author").Element(xmlns + "uri").Value.Replace("http://twitter.com/", ""),
                Image = entry.Elements(xmlns + "link").ElementAt(1).Attribute("href").Value

            };
foreach (var c in tweet)
{

//do something here...
}

Note this code is used in Flotzam!

Text Fly: A jQuery Experiment in With Easing, Callbacks and Text Animation

Karsten Januszewski — Thu, 19 Feb 2009 02:28:00 GMT

Here’s another jQuery animation experiment, this time with animating text using an easing equation. You can see it here or check it out below:

There’s a few interesting things going on here. First off, I’m using the jQuery easing plug-in, which you can read about here. It uses Robert Penners easing equations for the math. In this case, I use the easeOutElastic effect to give the text that bounce feel when it completes its animation. I set the initial position of the text in jQuery to be off the screen.

I’m using the callback feature of jQuery to kick off the 2nd and 3rd text animations, passing the function name (flyin2 and flyin3) to get the next animation to kick off. It is interesting how, through the use of callbacks, you can almost start creating keyframes with jQuery animations.

The final thing to call out is the css, where I specify that all <p> tags have position:relative. I also had to make sure that the containing <div> element had overflow:hidden to prevent the scrollbar from showing up when the elements were positioned off the frame.

Here’s the jQuery code.:

jQuery(function($) {
function flyin(event)
{
     $("#p2").css("left","-700px");
     $("#p3").css("left","700px");
     $("#p1").css("left","700px");
     $("#p1").animate({ "left": 0 },300, "easeOutElastic", flyin2);
}

function flyin2(event)
{
    $("#p2").animate({"left":0},300, "easeOutElastic", flyin3);
}

function flyin3(event)
{
    $("#p3").animate({"left":0},300, "easeOutElastic", null);
}

flyin();



});

Follow The Menu: A jQuery Experiment In Position Animation

Karsten Januszewski — Tue, 17 Feb 2009 00:27:00 GMT

I was working with jQuery today and built a simple menu tracker in which a dot animates to whatever menu item is currently being hovered over, which you can see here:

All I did was make a container div and then two child div elements, one for the menu items and one for the ball. You can see that if you view source on the HTML.I did the menu items as a ul with a collection of li tags with list-style set to none. Not being super CSS savvy, it took some futzing with getting my positioning right until I realized that all I needed was to have position:absolute specified for my little ball.

Then, all I had to do was animate the left property of the of the ball using jQuery. It is super handy in jQuery that you can get the position of any element so that you can dynamically pass that to your animation. So, what I do is get the position of the li and then subtract its width divided by two so that the ball is cetnered underneath each menu item. I also set the ball’s initial position to the first item. Here’s the jQuery code:

jQuery(function($) {

function ActionName1(event)
{
    $("#ball").animate({ "left": ($("#li1").position().left + ($("#li1").width() / 2 )) }, 200, "linear", null);
}
function ActionName2(event) {
    $("#ball").animate({ "left": ($("#li2").position().left  + ($("#li2").width() / 2)) }, 200, "linear", null);
}

function ActionName3(event) {
    $("#ball").animate({ "left": ($("#li3").position().left  + ($("#li3").width() / 2)) }, 200, "linear", null);
}
function ActionName4(event) {
    $("#ball").animate({ "left": ($("#li4").position().left + ($("#li4").width() / 2)) }, 200, "linear", null);
}
$('#li1').bind('mouseover', ActionName1);
$('#li2').bind('mouseover', ActionName2);
$('#li3').bind('mouseover', ActionName3);
$('#li4').bind('mouseover', ActionName4);

$("#ball").css("left", $("#li1").position().left + ($("#li1").width() / 2));
});

The final thing I need to do is to make it more dynamic so that if you actually click something the ball stays with that item.

Workaround For When Textbox Border Remains After Expander is Closed When Using ValidatesOnDataErrors or DataErrorValidationRule

Karsten Januszewski — Wed, 04 Feb 2009 01:12:00 GMT

Recently hit a WPF issue with IDataErrorInfo where using ValidatesOnDataErrors with a TextBox creates a border around the textbox that doesn’t go away when used with an Expander. Screen shot below before closing expander:

Screenshot after closing expander:

The workaround? Create a style for Textbox (or TextboxBase, depending) which blows away the validation error template like this:

<Setter Property="Validation.ErrorTemplate" Value="{x:Null}"/>

And then manually sets the border, like this:

<Setter Property="ToolTip"
Value="{Binding RelativeSource={x:Static RelativeSource.Self},
Path=(Validation.Errors)[0].ErrorContent}"/>
<Setter TargetName="Border" Property="Background" Value="Red"/>
</Trigger>

That did the trick. Download a complete sample of the fix.