In a recent project, I was working on an MVC View that displayed a list of records with Edit and Delete buttons on them.  This project was using the Blueprint CSS framework as well as Jquery-UI.  Having both of my Edit and Delete buttons in the same cell was forcing one of them onto the next line, like so:

Here is the Html.Grid code I was using:

The problem here is evident, who wants buttons stacked like that?  Now a simple fix may have been to just apply some new CSS properties to better control default width, margin, or padding of these elements.  But that solution doesn't look as pretty in code and adds unneeded weight to the page.  The Blueprint span classes do not go smaller than "span-1", so controlling the content through Blueprint was also out of the question.  I wanted to give my 'Options' table header cell the attribute colspan a value of 2.  At first I wasn't sure of the best way to do this and after a few searches through Google and Stackoverflow I still didn't know the best route.  A coworker pointed out that I should probably start with the Attributes method, and a solution was born:

The solution was to set the HeaderAttribute with a colspan of 2 and then on the next column, override the Header() method with an empty string.  Usually you would place a <th> tag in the Header string, leaving it empty keeps it from rendering that column header.  Voila!  You'll notice I did still have to add width attributes to the content cells, that was unfortunate however I still feel good about the solution.

Tracker is a free, award winning, agile project management tool that enables real time collaboration around a shared, prioritized backlog.

- http://www.pivotaltracker.com/ 

On top of that, its a refreshing break from our previous project management tool,  Target Process.  While Target Process is no doubt a powerful, robust, agile project management solution; it was a bit much sometimes.  Pivotal Tracker is more asthetically pleasing as well as easy to use. 

Unfortunately, there wasn't a lot of help out there for integrating our .Net websites with their API.  The Pivotal Tracker API integration page does feature an exmple by Michael McKerlie here.  This was a decent start, so I've added to it and in turn answered some of the questions posted in his comments.  Behold, my first contribution to Google's Open Source project hosting - http://code.google.com/p/pivotal-tracker-api/.  Here you will find some great wiki pages on how to integrate Pivotal Tracker API for .Net into your solution as well as planned features.  

We currently use the API to integrate our user Feedback form with our Pivotal project.  This way, when a user submits feedback, it enters our project queue as a bug so that we have to take action on it.  It seems to work good in our enviornment, but thats probably because we have closed channel of users - I'm not sure I would recommend giving a public site this functionality.  Opening your Project Management queue to spam-bots would probably be a bad thing.

Two things I look forward to adding in the near future include examples for using with Asp.Net MVC and the ability to Export project stories during a build (NUnit) for backup.  Check back here or the project site often for updates.

Recently I was working on a web page that was overburdened with tabular data. The original goal was to database the information and just read/format the data with some server side code (PHP). The problem was that I had FTP access to the site but no administrative logins to setup and configure MySQL or another data store. This felt like a good time to experiment with another great extension to jQuery: $.csv() [http://plugins.jquery.com/project/csv ].

Drop the source code into an existing .js file or create a new one and make sure you link to it after you've loaded jQuery to the page. Now lets take a look at our HTML.

<h4>Select a year
<select id="year">
 <option>1900</option>
 <option>1910</option>
 <option>1920</option>
 <option>1930</option>
 </select>
</h4>

<table class="tableContent"> 
 <tr style="background-color:#516DB6; color: #fff;"> 
   <th>NAME</th><th>M/F</th><th>BORN</th><th>RESIDENCE AT HH</th> 
 </tr>
</table>

Now for the controls that will cause the update. You can see in the screen shot that we want to keep the update controls very simple. When a visitor changes the drop down list we want to take the new SELECT box value and search for that data.

Now that we have our HTML setup, lets start writing some javascript. We need to start by loading the CSV document on page load or once the document is ready. For this we can use the jQuery AJAX method $.get().

  $.get("documents/1900_Census.csv", function(data) { 
      array = $.csv() (data); 
      }); 

Now that we have our data in an Array, lets use jQuery to loop through each row.

  $.each(array, function() { 
          var row = String(this).split(",");
      }

The jQuery .each() function will setup each new row for our table. The line inside of this function splits the row into an array representing each column of data. We can later use those array elements to output our data.

Now that we can load the CSV data into our table. To clean things up a bit, lets put our code into a more complete function that will cause the table to fade out, load the data, then fade back in. Removing table rows with jQuery is simple, all we need to do is find every row but the first and call the .remove() method. Below you can see how we load the data once the document is ready and bind the change event of the drop down list.

 <script type="text/javascript">
  $(document).ready(function() {
     loadCSVFile(1900);
     $('#year').change(function() {
	loadCSVFile($('#year').val());
     });	
 });

function loadCSVFile(year)
{
  $('.tableContent').hide();
 
  $('#loading').fadeIn(); 
 
  $('.tableContent').find("tr:gt(0)").remove();
  $.get('documents/' + year + '_Census.csv', function(data) { 
      array = $.csv() (data); 
      $.each(array, function() { 
        var row = String(this).split(","); 
	if (row[0] != "") 
	{
          $('.tableContent').append("" + row[0] + "," + row[1] + "");
          $('.tableContent').append("" + row[2] + "" + row[3] + "" + row[4] + ""); 
	}
      }); 
  $('.tableContent tr:odd').css('background-color', '#ffc'); 
  $('.tableContent').fadeIn(); 
});
</script>

You can check out the final result here.

When developing our organizations Web Applications, most of us typically use Mozilla’s web browser; Firefox. Without going too in depth on why Firefox is or is not the best browser available, I believe its fair to say that Firefox has a wealth of Web Development tools that make developing applications quicker and easier to use. One could argue that IE 7 does have an IE Developer Toolbar that serves many of the same purposes, however, some features such as inline CSS (Cascading Style Sheets) editing are nonexistent in IE’s toolbar. As you may already know, Firefox and IE don’t always display content in the same fashion. Some CSS properties of a web page display differently across different browsers which may cause larger layout issues in the end. Even though I enjoy browsing and debugging in FF, the overwhelming majority of our visitors still use IE 7 or IE 6. This meant that those little browser differences needed to be resolved and I needed a better Developer tool.

A few weeks back I decided not to settle for the old “Save and See” method of making small tweaks to CSS to perfect a page in IE. The hunt was on. I needed to find an inline CSS editing tool that would work well with Internet Explorer. I came across a few small projects, but most were designed for IE 6.0 or earlier and didn’t play well with IE 7.

Finally, after several Google searches and forum perusing, I came upon DebugBar. This is a wonderful little addition to IE because it offers inline CSS editing and more. A feature packed DOM explorer, quick HTML validation, JavaScript Analyzer and Error Notifications, Color picker, the ability to send screen shots to email, and many more simple little features that make developing in IE easy again. One of my favorite little feature's is the ‘Layout’ feature which lets you visualize the margin, border, and padding effects on any selected element.  The Debugbar also features a handy little cross-hair for finding elements quick. This little tool is great for those times that your project has to look good in IE. It’s also a great solution for those of you that have ever experienced the traditional Dev Toolbar’s Stupid Ruler.

2008 started with a wealth of new experiences and opportunities for me.  Moving from the east coast to join the Rapidparts team, purchasing a home, and oddly enough what turned out to be one of the more difficult tasks was buying a new cell phone.  Until recently I was using an old company Blackberry.  It was ok for getting email and finding some small gems of info on the mobile web browser, but I was excited about the idea of one day buying my own super cell phone.  It had been over 5 years since the last time I purchase a cellular phone.  Back then your choices were mostly limited to phones with two line, one ‘color’ LCD screens and nothing to speak of by way of multimedia support or cameras.  With today’s polyphonic ringtones, Wifi, Bluetooth, GPS and 8.1 megapixel camera enabled phones, I figured that I would have my work cut out for me. 

So, the day came when my wife and I made our way to the local Verizon store and began sifting through the walls of inventory.  It wasn’t long before I realized that there really weren’t any great deals out there.  Sure some phones could play mp3’s and some were GPS enabled, but the nicer feature-packed smart phones required you to shell out some serious dough just for the ability to expand the lackluster interface.  You want integrated maps – that will cost you extra.  You want an email client - sure for $4.99/month.  Every feature that was integrated in to the phone to make it a better value just ended up being locked out by the service provider.

Enter Android.  Android is the new mobile operating system developed by Google that’s slated to appear in second half of this year.  It’s like having an incredibly small toy box that somehow contains all the toys you’ve ever wanted.  Moreover, you somehow have all the appendages necessary to play with as many of these toys as you want - all at once.  That is what Android feels like.  It’s not a phone, but it’s a promise that whatever phone it’s running on will be able to do more.  Recently Google shelled out almost 5 million in awards to developers who submitted new and original ideas for breakthrough mobile apps.  Round 2 of this contest begins later this year.

http://code.google.com/android/adc.html

I’m excited about getting an Android enabled phone when they come out.  I’m even more excited about the chance to create my own applications to make use of all the features of the underlying hardware.  Thanks Google, but I guess in the meantime I’ll settle for my hampered LG9900 with locked down GPS/mobile Web features, 2.0 Mega pixel camera, and a load of other cost-based inabilities and short comings.

http://code.google.com/android/