Since I need to keep moving on this stuff I’ve had to devise my own solution to the issue I’m experiencing. For background, we use Apache Ant to create a “Deploy” version of the WordPress theme on the blog. This process runs through CSS/JS & renames files, compresses them, updates references, does DataURI stuff, etc. It’s pretty nice and allows for easily deploying a very optimized site without making development a nightmare. As part of that I’ve had it roll up two JS files that are always requested together into one file to avoid making an extra HTTP request. Unfortunately when I tried a simple replace of the previous filenames with the new aggregate file’s name YUI 3′s Loader was loading the file twice.

So until I can get a working version of what Adam has suggested here’s how I’ve set up the build system to allow for replacing individual modules in development mode with a single aggregate file for deploying.

//DEV CONFIG
YUI_config = {
    //yes this is a little gross but sadly it's necessary to make loader work how we want w/ ant
    /* dev */ ignore : [ "sidebar-rollup" ], //dev */
    /* live ignore : [ "chiclet", "slider-plugin" ], //live */
    groups : {
        anet : {
            combine : false,
            base : "/blog/wp-content/themes/arenanet/js/lib/",
            modules : {
                "chiclet" : {
                    path : "chiclet.js",
                    skinnable: false,
                    requires : [ "base", "widget", "anim-base", "anim-easing", "sidebar-rollup" ]
                },
 
                "slider-plugin" : {
                    path : "slider.js",
                    requires : ["plugin", "node", "anim-base", "anim-easing", "sidebar-rollup" ]
                },
 
                "gallery-lightbox" : {
                    path : "lightbox.js",
                    requires : ["base", "node", "anim-base", "selector-css3"]
                },
 
                "scroller-plugin" : {
                    path : "scroll.js",
                    requires : ["plugin", "node", "selector-css3", "event-delegate", "anim-base", "anim-scroll", "anim-easing"]
                },
 
                "social-counts" : {
                    path : "social.js",
                    requires : [ "gallery-yql", "node" ]
                },
 
                "sidebar-rollup" : {
                    path : "sidebar.js"
                }
            }
        }
    }
};

which is modified by the Ant build script to

//DEPLOY MODE
YUI_config = {
    //yes this is a little gross but sadly it's necessary to make loader work how we want w/ ant
    /* dev  ignore : [ "sidebar-rollup" ], //dev */
    /* live */ ignore : [ "chiclet", "slider-plugin" ], //live */
    groups : {
        anet : {
            //omitted for brevity, see above code block because this doesn't change between them
            }
        }
    }
};

The comments get stripped out during compression so it doesn’t look quite so gnarly when sent to end-users. It’s also pretty easy to do as an Ant task, all it takes is this

<!-- update references to old js files to new concatted file -->
<replace file="${js.dir}/loader.js" token="/* dev */" value="/* dev " summary="yes" />
<replace file="${js.dir}/loader.js" token="/* live " value="/* live */" summary="yes" />

to do the switch. Later in my custom loader script those two modules are used with

YUI().use("node", "event-base", "imageloader", "selector-css3", "chiclet", "slider-plugin", function(Y) {
    // Code goes here...
});

which will always make sure that both the “Chiclet” and “Slider-Plugin” modules are available. In dev mode it will request chiclet.js & slider.js versus just asking for sidebar.js when deployed.

Does anybody have a better way of doing this? I think Adam’s version is nicer looking in the config but I’m not sure how it will work if a) the rollup file doesn’t exist or b) you don’t want to use the rollup except in production. I guess you could always just do something similar to what I’m doing now to configure it. That all assumes that the issues with it not actually loading the module get figured out, because if the modules aren’t added to the Y instance what’s the point?

Here’s the rundown:

• Twitter
• GuildWars.com News
• Flickr
• NCSoft Jobs page
• Press Releases

I certainly wasn’t looking forward to building parsers for the multiple different feed types that entails, but YQL came along and saved the day again. I only had to do simple things manually like make sure that Twitter links & @username replies were properly wrappped in <a> tags. To keep from bashing on YQL every time the page is loaded it stores the transformed results of the updates for an hour in a local APC cache. This provided the best of both worlds and made caching super-easy.

The site itself was built using YUI grids, YUI 3b1, and DD_belatedPNG to solve transparent PNG issues in IE6. It’s also using my favorite new PHP framework, Nice Dog. It’s a nano framework (about 100 lines) that is more of a VC than MVC. For a site like Arena.net it’s perfect as there’s no need for models. I could’ve plugged in an ORM to make it the full stack but when getting all your data is as simple as

apc_fetch($key);

the need to build a “proper” MVC site kinda isn’t there any longer.

Then I stumbled across a post from Simon Steele, the developer of Programmer’s Notepad.

Tools I Rely On – Those I Use From PN

So now I knew that you could use JSLint from within Programmer’s Notepad, and had a starting point in the link he provides to the Windows Scripting Host compatible version. I began stumbling around the tools menu in PN, trying to figure out how to get the jslint.js file I had downloaded to be usable as a tool. I figured it out with some help from Simon on the PN forums, Issues with using JSLint as a tool.

With that in place, I was able to get JSLint working as a easily-called tool within PN. With a simple keystroke I can sanity check my JS for all sorts of nasty behaviors, it’s totally awesome. Here’s a quick walkthrough I wrote up after mentioning this on a Yahoo! internal mailing list and getting a question about it.

1. Downloaded the WSH version of JSLint from http://jslint.com/wsh/index.html and copied it into a tools subdirectory in the Programmer’s Notepad directory (just for ease of referencing).
2. Added a new tool for Javascript files:
   Tools -> Add Tools -> Scheme: Javascript -> Add
3. Settings are as follows:
   

Those settings allow for double-clicking the JSLint output line and having PN jump to it, which is really handy. Unfortunately it stops after every error and always complains about a null character at the end of files, but those are minor annoyances. It works really well and is pretty quick to get started, which I appreciate.

I’d love to get it so that it’ll run JSLint every time I save a .js file, but I don’t think PN supports that for tools yet. Something to ask about on their forums, I suppose.

I started building up the JS scaffolding  around that and promptly ran into another issue.  While the ActiveX object is thinking it calls a predetermined callback method in the JS to give status updates.  Unfortunately, you can’t declare this callback until the object is in the page.  This means dynamically inserting a new JS file in the initialization after dynamically inserting the ActiveX object.  That’s a lot of dynamic inserting and it makes me a bit nervous but it works fine in IE and since we’re using ActiveX that’s all I have to test!

The next step is getting asynchronous uploading using an IFrame working.  This is being complicated by most tutorials that cover this technique being old as dirt.  We’re talking 2002 old as dirt here, before AJAX was anything more than a cleaning product.  “Script Remoting” is not what I want to do (I have XMLHTTPRequest for that, thank god) but that’s what most of these tutorial focus on.  It makes parsing out the useful info needlessly complex and it’s really driving me up the wall.

Having a a good time at JumpCut though.

Turns out, they’re using the YUI grids component to space everything out on the page. That’d normally be fine, but the terms of the BSD license for the YUI modules requires that you leave in the copyright notice. Google didn’t do this, so technically they are stealing the code. Tsk tsk.

Here is Zach’s much more in-depth article: Google Using YUI Grids CSS

Somehow I’m still leading Gordon but we all know that won’t last. He’s a monster even with being farmed out to HITS part-time. Kian’s apparently taken himself out of the running by making the script ignore all his checkins. Seems to me he just doesn’t like losing.

More than anything this just reminds me of how long I’ve been doing this, it’s definitely time I let somebody else take their hack at it. I’m really curious to see what new apps come out as well as where the old ones are taken. It’s harder nowadays to justify a wide-ranging rewrite to Deb but I bet if someone really clever comes along it could be arranged. Things have settled out and become a lot more stable during my time at Restek but there’s always room for improvement in these kind of things.

All New My Yahoo

I worked on the team that made that, albeit in a earlier and less polished form. It’s hard to tell what of my code survived since according to my old manager they had to throw out a lot of the old designs. However, the weather widget still looks like the same one I wrote with some moderate refactoring. That was cool to see as I’m pretty proud of that weather widget. The “Set My Yahoo! as your Home Page” link is still there and appears to still work the same way. I can’t say for sure on any of this because untangling jsmin’d javascript is no fun.

The new beta can be accessed by going to http://cm.my.yahoo.com/upgrade and I have to say I like it quite a bit. The inclusion of the big ad on the right is too bad but with AdBlock I never see it so it’s a non-issue for me. The team has done a really amazing job on this in the 6 months I’ve been gone, a lot of the early designs have been polished until they practically shine. It’s definitely still feeling the performance blues but I have no doubt that they’ll get it running smoothly before launch.

If I had to try and prove signups were from people though, I’d be damn tempted to use Microsoft Research’s recently announced Asirra Project. It’s a lot like KittenAuth only they’ve got a DB of 2 million pet images and add about 10k new ones each day. Definitely an interesting approach. If cute animals aren’t your thing maybe you would prefer Hot Captcha which Asirra cites as inspiration. They went with animals for a couple of good reasons, hotness is relative and pictures could be offensive.

All interesting attempts at solving a very complex problem: how does a machine generate something that a machine cannot recognize, but a human can?

First though, a quick overview of how BBAuth works. You set up an entry in the BBAuth DB for whatever site/webapp you’re going to use it with, providing some general info like contact details and the endpoint for when a user has successfully logged-in. Once that’s done you get a shared secret and an application ID. These are used in all future calls to hash info so that it’s reasonably secure and can’t be easily snooped along the wire. A special login URL is crafted that points the user to Y!’s login page, and once they enter their Y! credentials they are asked to give permission to whatever site for the info that has been requested. Once they agree they are redirected back to the site along with some encrypted info depending on what the site had asked for.

BBAuth works just fine, but even if you don’t ask for any Y! info your users still have to go through and agree to allow the site to use their info. My problem is then that I don’t want the user’s info. When I set up my site to use BBAuth I even told Y! that I didn’t want to use any info. All I want is Yahoo!’s promise that the user is a real Y! user and some sort of unique hash that my system can use. I’ll get the info I need for whatever app I’m running at the time, but none of what I do would be asking for Y! Photos info. I’m not saving any login credentials via cookies or anything, I just want a simple login mechanism that I don’t have to maintain. Clicking through one page doesn’t sound so bad until you realize that every time the user logs in they have to go through it. That’s pretty annoying and makes the jump to a Y! login page even more jarring.

There’s a post on the ydn-auth group by Jeremy Zawodny (Jeremy’s Post) that addresses this issue and says that this functionality is apparently a special case for BBAuth. Seems a little odd but I suppose that they were more concentrated on the usage cases for sharing a user’s Y! info with a 3rd party site. So they know about it and are looking into it, but until then I can’t really say I’m pleased with the actual implementation of BBAuth as a SSO provider.

After implementing BBAuth and being disappointed with the SSO performance, I began looking into other solutions. I really didn’t want to require users to sign up for yet another account because everyone hates that. It seems like there’s been a lot of buzz lately around OpenID (Technorati stats for “OpenID”). I figured I should at least give it a shot considering the large surge of interest behind it. First I had to figure out how OpenID actually worked.

Short Version: instead of a login that is some clever play on your name (Tivac lol) or something you identify yourself using a URI that links back to an identity provider. The identity provider stores your details and provides password authentication, so that when you visit an OpenID-enabled site you enter in your identifying URI and get bumped to your identity provider. You log in there, specify what details the site should be able to see from your profile, and then say “Ok” and get sent back. Note that this is what it’s like using MyOpenID.com because I was too lazy to set up my own half-assed identity provider.

So, how does OpenID work as a SSO provider? From a user’s point of view it’s pretty dead-simple. Looking at it as a developer adding it to an existing property proved to be considerably more work than I expected. I used the JanRain OpenID Library for PHP when working to get OpenID logins enabled on my testing site. Now I know the title of the article doesn’t say I’m comparing the libraries I used for each, but it’s still interesting to look at the differing amounts of code required for BBAuth and OpenID implementation in a fairly typical hosting environment.

The first thing that struck me as kind of odd was that I needed to move two folders totaling 33 files onto my shared path. I had forgotten that OpenID uses Yadis (Wikipedia page linked because the homepage at yadis.org has been vandalized) as part of the protocol. I didn’t realize that I’d need to be installing classes to support Yadis as well as OpenID. Once I had gotten all those files copied into the proper places and confirmed they were on my shared path it was time to look at the examples provided.

OpenID provides a decent example setup for both consumer and server roles, where consumer is providing the SSO login and server is actually running your own identity server. I only want to run a consumer right now, so I used just those files. After getting the form setup and trying it out I discovered that my PHP install has no big integer math library installed. This necessitates running in “Dumb Mode” which according to the documentation means my login form is more susceptible to relay attacks. Great.

After defining a new constant telling OpenID to run in dumb mode I was able to be successfully bounced out to my Identity Provider, sign in, and be bounced back to my site.

Avoiding any in-depth analysis of the security between the two as I’m not qualified to comment, which did I prefer implementing and using? That’s not actually an easy question to answer. BBAuth was certainly much smaller in terms of code required. It also has the advantage of using Yahoo!’s login system, it’s not exactly scientific but I don’t know anyone who doesn’t have a Y! account. So BBAuth has a huge built-in userbase right there. Both services require bumping the user out to a 3rd party login page so that’s a draw. I knew it was part of how both worked going in and it isn’t an issue for me in this case. Implementing OpenID had some bumps but thanks to the distributed nature of the project I don’t need to go sign my web application up anywhere. If I want to shift around page names I don’t have to remember to go update any entries in a Y! database anywhere. Any OpenID Identity Provider worth their salt will also provide a mechanism to say “Always Allow this site” which is something that BBAuth currently lacks.

In the end I wasn’t able to come up with a conclusive win on either one. BBAuth has that annoying extra page every visit but tons of people have Y! accounts. Implementation was also pretty quick and easy. OpenID took more work but with a decent Identity Provider will only require one page not on my site. It’s also got the whole distributed thing going for it. As it stands now I’ve implemented both and users can just choose their favorite. I’d prefer to just offer one but I don’t think there is one that offers a compelling enough featureset over the other to go with a single one yet. Going with both gives me flexibility and an excuse to keep playing with both of them.