Kilg.us – Fantasy Stat Tracker …Tracker

A blog about the development of Kilg.us – The Fantasy Baseball Stat Tracker

Posts Tagged ‘CSS’

Welcome to Kilg.us 2010!

Wednesday, March 17th, 2010

Welcome to the new release of Kilg.us  for the 2010 season! Most noticeable is a completely re-vamped visual theme. This theme will be ported over to the Kilg.us Tracker …Tracker in the coming days, but for now it just lives on Kilg.us.

Kilg.us home page

Kilg.us home page

Other 2010 additions include:

  • the industry friends search now utilizes Lucene for search intelligence
  • drag-and-drop players to and from your bench
  • the Zend framework is installed on the server and being used at various places on the site
  • the sign-up and log-in forms have been combined to offer a quicker, easier experience
  • you can select from a series of major league ballpark  images for your background
  • new user accounts default to a “public” state so everyone can find their friends when they sign-up
  • invite as many of your friends at once as you’d like
  • Kilg.us …Tracker updates pulled directly into your Dashboard

Each of these additions will be described in more detail in future posts. For now, please log-in, poke around, and enjoy the new Kilg.us!

As always, if you encounter problems, email me or comment on an appropriate post.

2010 Launch

Tuesday, March 16th, 2010

Tomorrow (3/17) evening I plan to launch the 2010 updates for Kilg.us. Launch will probably commence around 10pm Mountain time. The launch will replace the entire Kilg.us code base with a new iteration. This will likely result in at least a few minutes–and as much as a few hours–of downtime.

I will blog and tweet (@kilgusTracker) updates to announce when the launch is completed.

In addition to the Kilg.us updates, I will be publishing a series of blog posts to describe the changes and how to use the new features of Kilg.us. For current users, you will find the interaction mechanisms to be very familiar. A new visual style is the most disruptive change. As the season progresses I’ll be getting back to refining the functionality of the tool

Chrome Player Layer Layout

Sunday, March 14th, 2010

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.

Incorrect layout of stats table in Google Chrome

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.

Proper layout of stats table in Google Chrome

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.

2010 Updates

Saturday, March 6th, 2010

I’m in the process of implementing a series of updates to Kilg.us for the 2010 season. The biggest noticeable difference will be an entire new look and feel. The new layout will allow for 1, 2, and 3-column pages that should let Kilg.us more efficiently use space.

Other changes in progress include:

  • Integrated log-in/sign-up function
  • User-defined backgrounds
  • More flexibility in the “invite friends” functionality
  • Updated log-in flow
  • Drag-and-drop bench
  • Integration with Zend framework

Among the other items I’m planning to get to before opening day:

  • Add OPS to statistics available for tracking
  • Implement Lucene search for “Find Friends”
  • SSL for log-in flow

If you have other suggestions, please add a comment or drop me a long at admin@kilg.us

I’ll go into more detail about the updated features over the coming weeks. In the mean time, I’m just trying to get things done before the season kicks-off!

Validation Improvements

Monday, June 22nd, 2009

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.

Tracker Styling

Tuesday, June 2nd, 2009

No functional updates to Kilg.us today–only asthetic updates to the Tracker Blog. Most of the styling changes are focused in the right rail. It no longer looks like the completely neglected navigation bar of a Developer. It now looks like the less neglected navigation bar of a Developer who is obviously not a Designer. Also some small tweaks to the meta-data elements of blog posts. All changes are completely CSS-based. There have been no mark-up changes.

Drag-and-Drop

Sunday, May 31st, 2009

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.

Email Tweaking

Monday, March 9th, 2009

Just a few minor updates to the Kilg.us boxscore emails I discussed the other day. One change was a fix so you can now un-subscribe from your boxscore emails. Apparently I didn’t get the logic quite right on that the first go-round. The email itself is also updated to provide an alternating tint to the table rows so the stats will be more scannable.

For now, the emails are spitting out all the stats the system collects. Down the road I might look at constraining the emails to only display the stats selected for the given team, but for now it’s pretty low priority. Too many stats is better than too few, I figure.

Yes, this is still the same blog…

Monday, June 2nd, 2008

As you have certainly noticed, I am finally applying a unique theme to the Fantasy Baseball Stat Tracker blog. The theme is nearly identical to the Fantasy Baseball Stat Tracker with a few additions as needed to handle blog-specific elements. The biggest variation from the Stat Tracker is the 2-column layout using a wide left column and thin right column. I don’t have any intention of re-using this layout elsewhere, but at least I’ll knows it’s available should I need it.

One other minor change: the title. You’ll notice the blog is now named the “Fantasy Stat Tracker …Tracker” rather than just the “Fantasy Stat Tracker.” Not a big deal but I thought I’d toss it out there.

Please bare with me as I work on the blog styling. I’ll try not to destroy any of the functionality as I work, but this is my first time styling a WordPress blog, so who knows what could happen.

Stylin’

Thursday, May 1st, 2008

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.