Yahoo’s NoScript Compatibility Saved My Fantasy Football Team

By  on  

One of the best parts of Thanksgiving is having another day of the week to sit and watch NFL football. Like any hardcore football fan, I have a more than one fantasy football team under my management. Updating my teams ever week is clearly important -- I have to make sure players aren't hurt, suspended, and so on.

Twenty minutes before the Jets @ Cowboys game on Thanksgiving, I realized I still had Cowboys receiver Patrick Crayton in my lineup. Crayton had a foot injury and it was announced the day before that he wouldn't be playing. In essence, I needed to go to Yahoo and update my team quickly so that Crayton wouldn't be locked into it.

I grabbed my laptop, fired up Firefox, and went to the player lineup screen to put Crayton on the bench. I waited for the page to load...waited...waited...and the player-switching part of the page never loaded. Noooooooo!

As you probably know, Yahoo has its own JavaScript framework/library called YUI. Yahoo's fantasy football lineup page uses YUI, and allows team managers to drag and drop players in and out out the manger's lineup. The problem was that Yahoo's JavaScript libraries weren't loading properly -- thus, no way to swap players out of my lineup.

I knew that with less than 10 minutes until game time, the JavaScript library issue wasn't going to be fixed in time. I went into Firefox's options and turned off JavaScript, hoping that the page would use the old method of editing a lineup. I quickly prayed refreshed the page.

When the "no script" version of the page loaded, I was provided HTML select elements and a standard "submit" button to update my lineup. In the end, I was able to substitute Deion Branch into my lineup and I beat the other manager's team.

The fantasy football part of this article should really be viewed as secondary. I hope this tale shows proves the importance of website usability. Using cool JavaScript frameworks like MooTools, YUI, Dojo, Prototype, etc. is a lot of fun, but not always functional. Without Yahoo maintaining page functionality for users without JavaScript, my user experience at Yahoo! would've been very negative. Instead, Yahoo earned my respect.

For those wondering, Branch had a solid game: 92 yards receiving and 1 TD. Houshamazilli. Lock it down. Championship!

Recent Features

  • By
    Designing for Simplicity

    Before we get started, it's worth me spending a brief moment introducing myself to you. My name is Mark (or @integralist if Twitter happens to be your communication tool of choice) and I currently work for BBC News in London England as a principal engineer/tech...

  • By
    CSS Gradients

    With CSS border-radius, I showed you how CSS can bridge the gap between design and development by adding rounded corners to elements.  CSS gradients are another step in that direction.  Now that CSS gradients are supported in Internet Explorer 8+, Firefox, Safari, and Chrome...

Incredible Demos

  • By
    MooTools Star Ratings with MooStarRating

    I've said it over and over but I'll say it again:  JavaScript's main role in web applications is to enhance otherwise boring, static functionality provided by the browser.  One perfect example of this is the Javascript/AJAX-powered star rating systems that have become popular over the...

  • By
    Vibration API

    Many of the new APIs provided to us by browser vendors are more targeted toward the mobile user than the desktop user.  One of those simple APIs the Vibration API.  The Vibration API allows developers to direct the device, using JavaScript, to vibrate in...

Discussion

  1. Just a quick note: You can always go into the non Drag-n-Drop layout with the switcher in the upper right hand corner of the roster pages (choose “classic mode”).

  2. I know — unfortunately, the page wasn’t even loading to that part of the page.

  3. “Graceful degradation” on a web application reveals careful planning and consideration towards one’s users. Good for Yahoo!

    (I noticed this very thing when I use Opera on Ubuntu — don’t ask why! — versus Firefox.)

Wrap your code in <pre class="{language}"></pre> tags, link to a GitHub gist, JSFiddle fiddle, or CodePen pen to embed!