The trick is to define the trigger for the MHTML module to trigger off of the regular module, & also make sure that the MHTML module will supersede the regular one. Then, it’s a simple matter of setting up either the simple UA check or a test function that returns true/false.

Note the when config setting’s value of “instead” that specifies that this module should replace “icons-css”. That only happens if the test function returns true, indicating hte module should be loaded. Since IE 8+ supports dataURIs, we return true only if running IE 7 or lower which causes the “icons-css” module to be replaced by “icons-css-mhtml”.

It’s a neat trick, huge thanks to Adam Moore of the YUI team for teaching me about it on the forums! Also thanks to Nicholas Zakas for creating CSSEmbed (also here), the tool that makes generating DataURI & MHTML versions of a stylesheet ridiculously easy. Stoyan Stefanov gets a mention here too because of his awesome DataURI/MHTML research.

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

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.

So then I started on it, I had grand plans. There were even icons that I was going to grab from… somewhere. That part of it was rather poorly planned. After doing the basic layout I spent about an hour trying to find the right icons. Eventually I threw up my hands and just dropped the whole idea.

Here’s what I’d planned for it to look like:

Notice my awesome hand-drawn icons…

Today I was feeling more up for a challenge though. I did some reading and decided to use YQL thanks to Chris Heilmann’s screencast illustrating how he used it to pull multiple sources of data together. After deciding to just ditch the icons I picked a few colors for the top-level sections instead, and here’s what I came up with.

I like it well enough. Still wish I could’ve found icons I was happy with.

So I added pagination. It’s currently super simple which makes for easy explanation. The PHP still collects and sorts every single image in the directory by date. I don’t think there’s any other way to do that. Afterwards it checks to see if the “o” query param was set and is an integer (thanks for adding filter_input to PHP5, PHP devs!). Once there’s an offset to start from, it slices the array at that point and takes the next 50 images.

After that there’s just some simple logic around drawing the pagination numbers and figuring out which one is the current page. The numbers are centered and boxed using a variation on Hedger’s inline-block work (Item List Grid : Practice with display:inline block across browsers) that I worked on for the next VYC release. It solves the problem with a minimum amount of code in a really semantic way that just makes my web developer brain as happy as can be. Granted the CSS is not what I would call “pretty” but it works everywhere and is not impossible to understand, so I’m not too bothered by it.

So here’s how it turned out. Be forewarned that I don’t control what is uploaded here, and as such there might be NSFW content on this page!

http://tivac.com/upload/images/

I said I was working on it this morning, and I wasn’t even lying!  I’ve just updated the Xbox Live Friends Gadget to version 1.1 which brings with it almost everything I promised in the previous post!

New Stuff!

I’ve created an actual landing page for the gadget, http://patcavit.com/xbox-live-gadget/. There’s also a page helping people copy gadgets from their old install to a new one, http://patcavit.com/xbox-live-gadget/how-to-update/. Both of these pages need a lot of work but it’s a start. Had to learn a lot of wordpress knowledge I had long forgotten to be able to do that stuff!

So here’s what did end up making the cut for 1.1

• The backend web service caches results now, makes updating faster (but the data is no less fresh!)
• Expanding in height was retarded, the guidelines were correct. To solve the problem of more than 5 online contacts without expanding there’s now pagination!
• Undocked state exists now, might even be marginally useful.
• Flyout has a link to open up xbox.com to send user a message over XBL
• Error Handling for bad data from the WS
• New background images, no longer quite so boring!
• List updates are animated with a subtle fade effect. Probably needs more tweaking, but I think it makes a big difference.
• Checks to make sure you have the latest version of the gadget and will nag you if not
• (Online) Instructions for updating the gadget to save you from having to retype your friends list
• (Online) Actual web page for the gadget to provide some useful info

Unfortunately showing offline contacts didn’t make it. That task is quite a bit bigger than I originally though, but may still be coming down the pipe in a future update. There’s already a list of things I’m going to be working on next, so here’s a peek

• Show total count of online friends somewhere
• Flyout wonkiness
• Make flyout more useful (it’s getting there slowly!)
• List update fades interfere with the hover effect. This will be amusing to fix, I just know it.

So there’s still plenty for me to do and that was just after having one other person look at this. I’d love to get some feedback so I could keep working on this. After really getting into it I’m having a blast working with gadgets.

And now, pictures!

1. The backend web service caches results now, makes updating faster (but the data is no less fresh!)
2. Expanding in height was retarded, the guidelines were correct. To solve the problem of more than 5 online contacts without expanding there’s now pagination!
3. Undocked state exists now, might even be marginally useful.
4. Flyout has a link to open up xbox.com to send user a message over XBL
5. Error Handling for bad data from the WS
6. New background images, no longer quite so boring!
7. List updates are animated with a subtle fade effect. Probably needs more tweaking, but I think it makes a big difference.

There’s still a few things left I want to do before making 1.1 official like update nagging and possibly adding a toggle to the settings page to show all your contacts and just filter it so that the only ones are a different color and show up first. Not sure about that one yet, but it’s a possibility.

Look, it’s a SCREENSHOT of the new stuff! Ok so mostly I wanted to play with a Windows Live Writer “Polariod Image” plugin, but it’s still a perfectly reasonable picture. I don’t feel bad for a second about posting it, so there!

One last thing, I’ve given the gadget a “proper” home page at http://patcavit.com/xbox-live-gadget/ thanks to WordPress’s support for pages and custom templates.  It took some hunting to figure out how to make a static page include a list of posts from a certain category, but http://www.transycan.net/blogtest/2007/09/10/static-frontpage-combined-with-dynamic-content/ was incredibly helpful in answering the questions I had.

Oh that reminds me I have to update the homepage in the gadget metadata…

Knowing when my friends are online on Xbox Live has been a problem I’ve struggled with for years. When Microsoft announced the Xbox Community Developers program I thought I had found the answer. Then the recipients of the 50 API keys they gave out promptly made a bunch of websites I couldn’t care less about…

Except for 360voice.com (<3 their RSS feeds, I’m right here). I really like the daily summaries that pop up into Bloglines, it’s cool knowing what games I should get so we can play more.

But even 360voice doesn’t handle the status info I was interested in. There’s no good way to have a list of my friends updating in the background so I can tell with a glance who is online and whether or not I should join them. Plus there’s the hassle of actually getting someone else to sign up for it, so far I think all of 3 or so friends of mine are on there.

The other issue is one that isn’t anyone’s fault, per se. I don’t want to have to open a webpage to know who is online. The Xbox.com friends page is certainly easy to read, and it sticks all your friends at the top so you can scan it quickly. It still suffers from the fact that I have to actively go to it if I want to see who is online. I could hook up one of the Firefox extensions that checks a page for updates, but that still isn’t what I’m looking for.

That sounds like it should work…

So how do I get an unobtrusive, automatically updating list of my friends to sit on my desktop so I know at a glance who is online? Well I’m rocking Vista and dual-monitors, so I fired up the Sidebar and added the Xbox Friends Watch gadget. It’s doubly neat because it not only does what I want but it uses Silverlight so there’s lots of fancy animations and the like.

I was pretty happy with this solution for a while, but it’s still not quite right. Despite me having more than 5 friends on Xbox Live, I can’t get updates for them. The gadget will happily add them and even appears to render them on its list, but it doesn’t support scrolling of any sort. You can kinda mouseover the very bottom and see the highlight travel to the other people on your list, but you’ll never know if they are online or not. Adding gamertags to it wasn’t the easiest thing in the world either, as the settings dialog expects tags to be commas-separated , which I always found to be pretty clunky.

Like I mentioned, the hard limit of 5 gamertags wasn’t a huge issue for me and I was happily using the Xbox Friends Watch gadget for several months. Eventually though I was having to swap people in and out of the list on a pretty regular basis, depending on which group of friends I was going to try and play with next. It didn’t make sense to me that I would have to do that, so I went looking to see if there were any other options out there.

Not quite, next!

The closest I found was Duncan MacKenzie’s Xbox to Twitter application. It’s very cool, and something I contemplated running for a while before deciding that I spammed Twitter (and Facebook, thanks to the Twitter App) and people probably wouldn’t care that much. Besides, I’m not looking for ways to broadcast to other people that I’m online, I want a way to keep tabs on my friends and know when they’re online.

So Xbox to Twitter wasn’t what I needed, but it did get me the hook I needed to be able to solve my problem. As part of his twitter app Duncan also put up a Webservice API you can hit to get Xbox status info for a gamertag. Even better, he put up a REST version of it that you can hit using plain old HTTP. It’s super simple, check this out:

http://duncanmackenzie.net/services/GetXboxInfo.aspx?GamerTag=Tivac

<?xml version="1.0"?>

<XboxInfo xmlns:xsi=http://www.w3.org/2001/XMLSchema-instance

xmlns:xsd="http://www.w3.org/2001/XMLSchema">

  <AccountStatus>Gold</AccountStatus>

  <PresenceInfo>

    <Valid>true</Valid>

    <Info>Last seen 58 minutes ago</Info>

    <Info2 />

    <LastSeen>2008-04-14T15:42:05-05:00</LastSeen>

    <Online>false</Online>

    <StatusText>Offline</StatusText>

    <Title>www.xbox.com</Title>

  </PresenceInfo>

  <State>Valid</State>

  <Gamertag>tivac</Gamertag>

  <ProfileUrl>http://live.xbox.com/member/tivac</ProfileUrl>

  <TileUrl>http://tiles.xbox.com/ti...8M6cr.jpg</TileUrl>

  <Country>United States</Country>

  <Reputation>99.98135</Reputation>

  <ReputationImageUrl>http://live.xbox.com/xweb/...gif</ReputationImageUrl>

  <GamerScore>12860</GamerScore>

  <Zone>Recreation</Zone>

  <RecentGames>

    <XboxUserGameInfo>

      <Game>

        <Name>Halo 3</Name>

        <TotalAchievements>49</TotalAchievements>

        <TotalGamerScore>1000</TotalGamerScore>

        <Image32Url>http://tiles.xbox.com/tiles/oo/P5/0...</Image32Url>

        <Image64Url>http://tiles.xbox.com/tiles/zS/3N/1W....jpg</Image64Url>

      </Game>

      <LastPlayed>2008-04-10T00:25:48-05:00</LastPlayed>

      <Achievements>25</Achievements>

      <GamerScore>770</GamerScore>

      <DetailsURL>http://live.xbox.com/en-...o=tivac</DetailsURL>

    </XboxUserGameInfo>

    ...

  </RecentGames>

</XboxInfo>

A little hard to parse in this format, I know. Hitting that URL in your browser will make it easier to understand though. I also shortened all the URLs and removed a the previous 9 games I had played because honestly, it’s not that interesting and it makes the XML way longer.

This is it though, the data that I needed to solve the problem of “I want to know what friends are on Xbox Live” (at least for me!). All I needed to do was to figure out how to use that info. Reaching back into the depths of my memory I recalled my previous attempt at building sidebar gadgets (http://patcavit.com/2007/05/04/vista-gadget-headaches/) and how I in fact had tried to build this very gadget once before. Except it failed horribly because I couldn’t automate a Windows Live login. Well wonder of wonders, with this API I don’t have to!

Finally, some progress!

So after a few days of hacking in JavaScript and PHP I’ve got a sidebar gadget that takes a list of Xbox gamertags and will update to let you know when any of them are online. It even uses the cool Gadget Persistent Storage library to store your list of gamertags when you remove and re-add the gadget. A lot of this is powered by a small subset of YUI because programming JS without it is too painful. Specifically I’m using Reset, DOM, Event, JSON & Connection.

There are of course some caveats to this, but there always are.

Getting a list of gamertags isn’t automated. I’m not even sure the people who have direct access to the Xbox Community Developers Program ever got this capability. I doubt it. It means that for now you’ll still need to input a bunch of gamertags by hand. Fortunately this list is newline separated, so it’s very quick to add a bunch of them. I’ve got some stub code in there to parse it from a copy/paste of your Xbox.com friends management page, but it isn’t ready for anyone to actually use yet.

1. It violates Microsoft’s Gadget UI Guidelines, in that gadgets shouldn’t change size on anything other than a click. Mine does automatically depending on the number of people online. It could even conceivably become taller than your monitor. Microsoft is definitely right about this and I think it sucks, but I didn’t figure out a clean way of paginating the data that could stand. This is something I’m going to work on in the future, but for now it’s crappy.
2. There’s no undocked state. More accurately, it’s the exact same docked to the sidebar and undocked. Ideally it would expand a bit to shower bigger icons, larger text, and gamerscore (at a minimum) when you undocked the gadget. That’s on the list of things I’d like to do someday, but since I never use the gadget undocked is pretty low priority.
3. There’s still some weird behaviors. Here’s the ones I know about.
   1. Sometimes the requests to the server for user info just take forever and return empty.
   2. Opening a new flyout when there’s already one open causes the flyout to lose focus until you click on it. This appears to be a Sidebar/Gadgets limitation so it’s unlikely to be fixed.

Still, it works like I need it to which is really the only important thing! I’d love to have some other people use it and give me feedback though. I’m always down for hearing about bugs as well, though no promises that they will be something easily fixable.

It’s not the prettiest thing in the world, I’ve modelled it after xbox.com and the flyout details are powered by the Embeddable Gamercards offered on xbox.com. Here’s an example of the what those look like

Put your gamertag here too.

It’s lazy but it gets the data I want in there without a lot of hassle on my part. In the future I would like to have a nicer flyout more akin to what Xbox Friends Watch has. Unfortunately, that’ll be a a good chunk of work to get the interactions right so that’s a challenge I’m putting off for another day. I don’t even really use the flyouts in my day to day gadget usage, but it’s nice to be able to interact and get a bit more information.

As usual I’ve written way too much and not posted enough links to just get the damn thing, so here you go!

Xbox Live Friends Gadget 1.0

I make no claims that this list is authoritative, in fact I’d love feedback pointing out really smart people I missed. I read a lot of feeds but none are more dear to me than the ones contained with my “development” folder. Adding new items to it is a joy each and every time.

• Usability/Design

  • 456 Berea Street, full text

    Roger Johansson does a great job of covering usability issues on the web.

  • 90 Percent of Everything: Usability Blog

    Harry Brignull and Andy Baker cover usability design both on the web and in client apps.

  • flow|state

    Usability fascinates me, and this is one of the best usability blogs I’ve ever seen. Updates are infrequent, but always incredibly insightful.

  • Looks Good Works Well

    Bill Scott left Yahoo! for Netflix but we won’t hold it against him. His UI design comments are fantastic.

  • Theresaneil’s Weblog

    Another really fantastic UI blog. I wish there were a lot more done this well.

• Web Development

  • A List Apart

    Great writers and a ton of content makes this a great resource. Doesn’t update that often, but always great content.

  • Bite Size Standards

    Tiny little nuggets of web knowledge, updates infrequently but with useful info.

  • Ajaxian

    Ajaxian’s great about updating with the newest and greatest javascript libraries and techniques.

  • Bartelme Design – Journal

    Small Design firm based out of Austria that posts nice wallpapers and some decent articles every now and then.

  • CSS Help Pile

    Monster collection of CSS tips and tricks, always a nice reference to have around.

  • CSS, JavaScript and XHTML Explained

    Browser quirks, CSS techniques, all sorts of stuff. Updated rarely.

  • DOM Scripting Task Force

    Unofficial group dedicated to promoting good Javascript, I can get behind that goal.

  • Douglas Crockford’s The Department of Style

    Crockford discovered JSON and writes great articles about Javascript best practices. Also see javascript.crockford.com and JSLint.com.

  • Dustin Diaz

    A Googler (we won’t hold it against him) yet he still loves YUI (yay!). Produces a lot of really interesting code snippets.

  • Fiftyfoureleven.com

    Mike Papageorge runs this general web developer resource/weblog. Good stuff though getting a little stale.

  • Firebug – Web Development Evolved

    Firebug development blog, updates almost never but good to have a subscription to in case it does.

  • Foo Hack

    Isaac Schlueter is a fellow Yahoo! and writes some fantastic pieces about web development.

  • Garrett Dimon

    Garrett Dimon’s weblog is wonderfully minimal, yet still provides really great insights into the development process.

  • HedgerWow`s Blog

    I worked with Hedger last summer, he’s a true mad scientist in the world of web developers. Seriously, I have no idea how he comes up with most of this but it’s insane and amazing.

  • If..Else Log

    Only occasionally development related, but still a good read.

  • JoeHewitt.com

    Joe created Firebug, so you know he’s pretty damn smart. Too bad his site appears to be unloved these days. Staying subscribed just in case!

  • John Resig

    Author of JQuery and an all-around Javascript genius, I love reading about John’s continuing adventures.

  • Johnnie Manzari

    Interesting observations about the web, definitely worth checking out.

  • Julien Lecomte’s Blog

    Julien’s the author of the YUI compressor and consistenly posts things you should be reading.

  • Matt Snider JavaScript Resource

    Matt Snider does a great job of breaking down JS and investigating all the 8 bajillion frameworks floating around these days.

  • Nate Koechley’s Blog

    One of the main YUI guys, Nate’s super smart and consistently posts interesting stuff. Not always web dev related, but always worth checking out.

  • Particletree RSS Digest

    Great articles, wish they’d start updating again a bit more regularly.

  • Pete Freitag’s Homepage

    Pete’s a Cold Fusion guy but still posts things that apply to web dev in general.

  • Ryan on WordPress

    I like WordPress an awful lot, so keeping tabs on its development is a good idea.

  • Schillmania: DHTML and other client-side experiments

    Scott Schiller is a web dev genius. I have no idea how he’s so good at what he does, I wish I did. He’s at Flickr now, before that he worked on the really impressive new Y! Photos that was canned.

  • Simon Willison’s Weblog Entries

    Django co-creator, Simon also writes a lot about OpenID.

  • SitePoint.com

    Lots of good articles to be found here.

  • snook.ca

    Lots of PHP talk, it’s good stuff.

  • Solution Watch

    Features new websites that do things well. Good for keeping up with the current state of web dev.

  • Vitamin Master Feed

    Vitamin is kind of like A List Apart, another big group of contributors writing amazing articles.

  • WordPress Development Blog

    Keeping tabs on WP development, even if I don’t have my hands into the guts as much as I used to.

• General Development

  • Coding Horror

    Jeff Atwood’s posts are always well thought out and engaging, I love his blog.

  • Joel on Software

    Joel Spolsky writes about software development from a very pratical place, having done quite a lot of it himself.

  • Programmer’s Notepad

    Programmer’s Notepad rocks my world. I use it every day and love it to pieces. Keeping up with releases via a feed is tops.

  • Rasmus’ Toys Page

    Rasmus is really, really smart. Not surprising, given that he wrote a bunch of PHP (the language itself, not just PHP code). He’s another Yahoo! as well.

  • StickBlog

    Lots of good development tips to be found, as well as general programming talk.

  • untidy blog » PN

    Programmer’s Notepad author’s personal blog. The feed is just for the PN category, because that’s the programming related stuff!

And just in case you made it to the end of that huge list, here’s a link to everything I read on a not-at-all daily basis. It’s a little ridiculous. My Feeds.