Kilg.us – Fantasy Stat Tracker …Tracker

It was brought to my attention this morning that Chrome was not laying-out the player detail layer as intended. The season stats table was showing below the player’s photo.

Before: Incorrect layout of stats table in Google Chrome

The culprit seemed to be a lack of a width defined for the element that contained the season stats table. I do not understand why it was a problem. Depending on the player, the width needed to be set to smaller and smaller values for the layout to work properly. I have set it to what, as best I can tell, is a low enough value to work for all players. This change is only in place in the new 2010 code base, so you won’t see the fix until I launch in the next day or two.

After: Proper layout of stats table in Google Chrome

As I said, I don’t understand why this was a problem. The width values are well below the width of the actual table that they contain. The overflow is set to “visible” so that the extra width of the table isn’t hidden. All values are well less than the actual physical space available for the element.  Unless I didn’t identify the real problem, it seems that there is a flaw in the Chrome rendering engine for this.

After launch, if you encounter a player detail layer that still isn’t laying out properly, please let me know.

While clicking through my team stats today on Kilg.us, I noticed that the stats display layer seemed to be out of date. After a little investigation, I found that the XML feed for the stats had not been updated since June 16. A little more digging turned up what looks like a change in the way MLB is storing their data. The format of the data itself seems to be the same, but they moved its home on the server. After updating the path to the data, all seems to be well and cumulative stats are up-to-date again.

In other news, I resolved an issue that yesterday’s IE7 “fixes” introduced. In the mega-drop-down, the new JavaScript set a negative top-margin for IE browsers. Turns out IE8 is enough better than IE7 for this to be a problem. So that method has been updated to only apply the margin to Internet Explorer version 7.

And lastly, some new language throughout the site. The Account Info page now displays an alert message if the User’s profile is set to Public but they don’t have a first or last name defined. Obviously it is difficult to find people in a search if you can’t search on their name(s). The new language encourages the inclusion of a name to help other Users in their searches. The Account Info and Sign-up pages now also have note text added to the password sections indicating that passwords must be at least 6 characters long. Previously the only way to know this would be to enter a password that was too short and try to submit it. At that point an alert would pop-up identifying the shortcoming. Now the User is informed up front.

No new functionality today–just incremental improvements to Kilg.us. I started by trying to clean up some IE7 display issues. No surprise, I was quickly reminded why Internet Explorer is the bane of every web developer’s existence.

IE7 was totally breaking the mega-drop-down team switcher. For some reason, it insisted on forcing the second column of the drop-down vertically below the first column. No margin overlaps. No width issues. No clearing/float issues. IE is just a piece of shit. After trying a half-dozen elegant solutions, I resorted to a JQuery work-around. Each time the mega-drop-down is opened in IE7, the height of the left column is calculated and the right column is given a negative top margin equal to that value. Ugly, but it works.

Next up was the odd top spacing of the right column on the Select Stats page. Not surprisingly, this was also an IE joke. Not a margin issue, not a float, clearing, line-height, or any other reasonable issue. So I decided to ignore it. If you are using any version of IE and experience functional or display issues–it’s almost certainly your browser. Try a real one.

After becoming exasperated with IE, I went back to legitimate fixes. I navigated through the site running each page through the W3C HTML Validator. This is something I do from time to time, but hadn’t for a month or two so there were a number of issues to fix. I’d gotten into a bad habit of giving my form elements a name attribute (shame on you!) as well as not placing my hidden input elements within a block-level container. In addition there was a nesting issue (un-closed un-ordered list on the Find Users page) and a couple labels with improper for attributes. All-in-all I fixed a dozen or so validation issues.

Because I removed some attributes and manipulated some forms a bit, it is possible I broke something. I tried to test all the flows I could think of to ensure their performance, but if you notice something that isn’t working please let me know.

Finally, after months of development (also known as “inactivity”), Kilg.us now has a mobile-optimized verion: m.kilg.us! Currently Kilg.us Mobile only allows for tracking of stats–no account or team management. With a very simple interface you can log-in, view your dashboard–complete with summary stats for all teams, and track the stats of all your fantasy teams and players.

I currently only have an iPhone, so that is what the site is optimized for. If you have a Pre, Blackberry, or Android phone I would appreciate any feedback and screenshots you can send me of how the site is rendering and performing.

The interface is still undergoing some tweaking, but it is very minor and should not impact the current functionality. After I get a feel for how the mobile version of Kilg.us is performing, I’ll start to plan out the addition of more functionality. I’m not sure if the mobile site will ever be feature-complete, but I expect it will be moving in that direction.

Luckily the object-oriented architecture of Kilg.us made the mobile site painless to implement. I would guess it’s been less than 8 hours in development and most of that time has gone into fine-tuning the interface. Hopefully future additional functionality will be as simple to add!

It is now possible to change the order in which your Kilg.us Industry teams display on your Dashboard and team-selection drop-down menu. Both displays use the same ordering. To change the order, click the “Select teams to Display” link from the “My Industry” section of your dashboard. This will open a page that lists all the teams your Industry friends have exposed for you to view. In addition to selecting to show or hide the teams, you can drag-and-drop to change the order of list. After making all the show/hide and ordering changes, click the “Save Display Selections” button to save your changes.

For a team to be visible on your Dashboard and team-selection drop-down, they must have the “Show” option selected. All teams (whether shown or not) can be re-ordered on the page, but only teams marked to Show will be visible to you elsewhere in Kilg.us.

The new drag-and-drop functionality is done using a JQuery plug-in–TableDnD. It should work across all modern browsers, but if you have any difficulty with it, please let me know.

In other developments, I tweaked the display of the Find Users page to utilize avatars and look more like the Owners list on the Dashboard. Doing so removed the “+” that used to be the activator to request an Owner join your Industry. You can now click anywhere (their avatar, name, email, etc.) on the Owner to make the request. There is still a confirmation dialog before the request is actually make so you won’t accidentally add people you don’t know to your Industry.

I also did some tuning to the logic behind the process of requesting Owners to join your Industry and the acceptance/denial flow thereafter.

Lastly, some style tweaks for all elements that use avatars and contain links. To identify hover-states, those elements will now display a gray border. The style uses the border-radius attributes from CSS3 that Webkit (Safari, Chrome) and Firefox make available. Those of you using less capable browsers (ie, IE) will have to suffer through square corners on your borders.

I received reports that some Users were unable to Bench players. No surprise, those Users are using Internet Explorer (7 and 8). Why “No surprise”? For those who don’t know, Internet Explorer has long been a pathetic attempt for a web browser. The rendering engine is miserable (although, admittedly better in IE7 and better yet in IE8) and the JavaScript engine is slow and broken. As such, Kilg.us is never tested on IE. Development occurs with Firefox. If I need to test multiple accounts, I’ll use Chrome or Safari as well. So, if something doesn’t work in Kilg.us, try a real browser and you’ll likely have better luck.

Because I’d rather have more people use Kilg.us, though, if you experience issues in IE and let me know about them, I’ll try to get them fixed. I’ve had two reports this Spring and both have been fixed within 24 hours. I can’t promise that speed all the time, but I try.

Today’s issue specifically had to do with the “class” attribute. See, with every real browser, you can access the “class” attribute by using the name “class” (just like you access the “href” attribute with “href” or the “style” attribute with “style”). So this is how Kilg.us was referencing the “class” attribute value to determine if a player was benched or not. In IE, though, you reference the “href” attribute with the word “href” and the “style” attribute with the word “style”…but the “class” attribute is accessed with the word “className”. It’s the only attribute like that. Thank you Internet Explorer.

To fix the problem immediately, I had to implement a standard check to see if the browser was IE and if so use “className” instead of “class”. That fixed the problem, but further confused what was already an unelegant function. So the long-term solution was to rewrite the entire function utilizing some JQuery class-manipulation functions to perform the desired action.

Long story short, you should be able to bench players in Internet Explorer now.

Though I would strongly recommend you try any browser but…

Another day, another FTP issue. Again limited to the functionality (and horrible usability) of the hosting provider’s File Manager, I focused primarily on visual design and style. I’m not enthralled with my current design, but at least it’s some progress. I spent a few hours working in Photoshop today creating visual elements then writing out the stylesheet.

With all my development projects I start my styling by writing as close to the W3C standard as possible and using Firefox (with Firebug) for testing. Down the line, I’ll flush out the styles to ensure compatibility with IE7, Safari, and Konqueror. At this point, IE6 has brought my life so much stress and turmoil that I have no intention of supporting it.

Tomorrow won’t offer much time for development on the Fantasy Stat Tracker, so I’ll probably continue to work on minor visual elements. The next functionality development tasks will include creating user accounts and teams and editing those items. Hopefully that will be in place before the end of the weekend.