Nick Harrison

No excuses for Tables Breaking your Responsive Designs

Nick Harrison — Wed, 03 Apr 2013 15:05:40 GMT

Originally posted on: http://geekswithblogs.net/nharrison/archive/2013/04/03/no-excuses-for-tables-breaking-your-responsive-designs.aspx

Modern thinking on web design is shunning the much loved table tag in html. The most compelling reason is to make it easier to accommodate responsive designs, but there are additional reasons as well.

For many the last bastion for the table is when displaying a list of records, after all tabular data should still fill at home in a table, butt if you allow this exception you bump into challenges leading to the table tags fall from grace in the first place.

The problem is that tables require a rigid structure. You need to be able to scan down a column of data to compare values. You need to be able to easily keep context with a key column as you scan across a row of related data. This does not lend itself well to smaller screens.

Zurb Foundation includes provides an approach to accommodate responsive tables using JavaScript to make the first column “sticky” and the rest of the columns will scroll on smaller screens. This way you are less likely to loose context.

CSS Tricks also has a running commentary on various other approaches that have popped up. Some approaches are better than others depending on you needs and project requirements. Some relying on allowing the user to identify which columns are important and which can be hidden. Some rely switching from a traditional table to duplicating the headers for each row and turning the table on its side when space becomes an issue. One option showcased actually switches from a table to a graph at a key break point. The key thing is that you get a regular table when you have the space but something that is still usable when space gets tight.

There is also footable which is a jQuery plugin that allows you to specify breakpoints that will get nested in the table as expandable regions when the screen width gets smaller.

All of these approaches solve the problem of a rigid table breaking a responsive design without having to make many changes to your existing code. Zurb’s solution and footable particularly can slip into your existing application with minimal interruption. Now there is no excuse for tables of data breaking your responsive design.

So how do you accommodate tables in your responsive design?

Can Trim Packages Help Us Make Sense of OS Editions?

Nick Harrison — Thu, 21 Mar 2013 17:52:06 GMT

Originally posted on: http://geekswithblogs.net/nharrison/archive/2013/03/21/can-trim-packages-could-help-us-make-sense-out-of.aspx

I was thinking about some of the confusion that springs up from time to time over how Microsoft names the editions of it Operating Systems.

We can all agree that Windows RT is a particularly bad name.

Unfortunately despite their best efforts, none of their names have been overwhelmingly successful. There is always confusion over which version has which features and which version would be best for which user.

I was thinking about how cars solve this problem. They use trim levels. Commonly this may be something along the lines of :

CE Classis Edition
LE Luxury Edition
XLE Extra Luxury Edition
Touring Edition
Limited Edition

This Limited edition catches my attention. Talk about counter intuitive. With cars, this is the top of the line, but in any other context this would be the entry level model. If you go to a Limited Service Hotel you will probably get little more than a basic bed in a cramped room with few other perks. A Limited Service Restaurant would offer few features and a narrow menu. A Limited Starbucks may drop some of the more esoteric drink options.

So maybe we could use the car trim level model but turn it on its head to match what the rest of the world expects.

RT becomes Windows 8 Limited
Windows 8 becomes Windows 8 CE
Windows 8 Pro becomes Windows 8 LE
Windows 8 Enterprise could stay Windows 8 Enterprise cause that is already clear

I would like to see Windows 8 Touring being high end hardware on a laptop / tablet form factor. Mobile ready to go on a tour!

I don’t know. I think these levels may make more sense and could be more easily recognizable to consumers.

This is also one of the area where BlackBerry fell short. Even when they had the “Must Have” product, they had the worst names. Calling a handset the Curve 9790 or the Bold Touch 9900 may make sense to the engineers designing them, but consumers are lost.

Lenova is beginning to figure this out. It is hard to get excited about T Series, X Series, L Series, S Series, etc. But it is easier to understand the difference between “ThinkPad” “IdeaPad”, and Essential Series.

It is even easier to build excitement for Yoga. Plus consumers can easily grasp the difference between Yoga 11 and Yoga 13. So glad they decided not to go with a name like Y620 or something similar.

Now if we could brand it as Yoga Touring Edition, we would have marketing magic!

Lenova if you read this, I am more than happy to accept a product sample to do a complete review! Just let me know. :)

4 Simple CSS Tricks to Make Web Input Fields Look Better

Nick Harrison — Tue, 19 Mar 2013 18:07:39 GMT

Originally posted on: http://geekswithblogs.net/nharrison/archive/2013/03/19/4-simple-css-tricks-to-make-web-input-fields-look.aspx

Most web sites will have an input form somewhere even if it is nothing more than a contact form. Any web application will have lots of input forms.

Regardless of why you have the input form or what it is prompting form, we should strive to have them look as nice as possible to keep the user visually engaged.

So here are a few CSS tricks we can use to make an input more visually engaging, less intimidating, and hopefully a little easier to use.

Let’s start with a simple unassuming input form for entering search criteria:

Padding is our friend
By adding a little padding to the left, the input values are not crammed against the left most border. This will help make the form seem less compressed and will enhance white space. I find that half an em works nicely
Round the Corners
Rounded corners can help to soften the look of a harsh collection of rectangles for input fields. We don’t have to round them by much unless that is the look you are going for. Even something as subtle as adding a .5em border radius can make a subtle but nice addition, softening the edges
Add focus
By using the :focus selector, you can make it easier for the user to track where they are. You can set the back ground color, add a box shadow, or whatever fits into the theme and look and feel for your site. One key thing to remember is that you don't want your page to have to reflow as the individual controls get focus so you may want to avoid changing the font or padding, etc. Here I added a :focus selector to add a gradient color to the background and change the font color as well as add a box shadow.
Add a little Color

No where is it written that the input fields must be white. Have some fun. You have many options:

Try a solid background:

or a subtle gradient

or a background image

Experiment and see what looks best in your application.

For most of my sights, I use something similar to this changing the actual values based on the color scheme I am using.

   1:  input[type=text] {

   2:      height:1.5em;

   3:      padding:5px 5px 0px .4em;

   4:      margin-bottom: 10px ;

   5:      border-radius:.5em;

   6:      -moz-border-radius:.5em;

   7:      -webkit-border-radius:.5em;

   8:      text-transform:none;

   9:      width:150px;

  10:      background:#5E768D;

  11:      background:-webkit-gradient(linear, left top, left 25, from(#FFFFFF),

  12:              color-stop(4%,#c6d1da), to(#5E768D));

  13:      color:#fff;

  14:      font-size:1.1em;

  15:  }

  16:  input[type=text]:focus{

  17:      box-shadow:3px 3px 10px #446;

  18:      outline:none;

  19:  }

For drop down lists, I recommend Chosen.

How do you style your input controls?

The Art and Science of Blogging

Nick Harrison — Thu, 14 Mar 2013 13:23:48 GMT

Originally posted on: http://geekswithblogs.net/nharrison/archive/2013/03/14/the-art-and-science-of-blogging.aspx

Many of us with technical blogs started a blog as just a place to jot down stuff we figured out so that we could easily find it later.

But if you have ever been thrilled to check the stats on your blog and see that 1,000 people have read one of your entries or been excited to see your blog mentioned on twitter, or had a boost of confidence when someone in an interview mentioned reading your blog, you will want that feeling again.

Regardless of why you blog, you quickly learn that blogging effectively is as much art as science.

Kiesha Easley has an active blog at WeBlogBetter devoted to flushing out some of this art and science that can help you capture some of the excitement and energy.

While she is probably not a true “geek” she approaches many of these concepts with a no nonsense sensibility that appeals to geeks. Her site offers practical advice with posts such as

If you blog just to have an online spot to log your own thoughts, you may not be interested.

But if you are interested in kicking things up a notch, spend some time on her site. You may learn a new trick or two.

If you are already rising to the ranks of celebrity programmer, hit the comments and share what has worked for you.

Reviewing Knockout.js Succinctly

Nick Harrison — Mon, 11 Mar 2013 12:29:38 GMT

Originally posted on: http://geekswithblogs.net/nharrison/archive/2013/03/11/reviewing-knockout.js-succinctly.aspx

Over the weekend I sat down with another book in the Succinctly series. I have wanted to learn more about Knockout.js for a while now.

I approached this book knowing very little about Knockout.js, but I do know a fair amount about JavaScript, jQuery, etc. Turns out I am their target audience.

If you need a book that will introduce and explain JavaScript. This is not the book for you.

If you need a book that will explain how AJAX works. This is not the book for you.

If you need a book that will explain how to use HTML or CSS. This is not the book for you.

If you are already familiar with these concepts but want to quickly get up to speed on Knockout.js, this is the book for you.

The book is very well structured. It flows nicely from concept to concept with each concept building on the previous one in a nice logical progression. The author does a good job of isolating details that are not relevant to the core concepts being discussed. He briefly mentions that any server side language can be used for responding to AJAX calls without getting bogged down with any details on how. He briefly mentions that any tool or framework can be used to render the html and JavaScript without getting bogged down in the details of how or why.

It doesn’t matter whether you are using ASP.Net, MVC, JSP, PHP, PERL, Ruby, etc. The book stays true to its core intention of explain Knockout.js.

Having read this book and worked my way through the various sample pages he presents, I am ready to try my hand at a little Knockout.js on my own. Also like the other Succinctly books that I have looked at, this will easily be a handy quick reference after the fact.

If you already know Knockout.js still it check it out. I would love to hear your perspective. If you are using Knockout.js, I would love to hear what you are doing. Share your experiences in the comments.

A Simple Grammar for Excel Views in MVC

Nick Harrison — Tue, 05 Mar 2013 21:17:16 GMT

Originally posted on: http://geekswithblogs.net/nharrison/archive/2013/03/05/a-simple-grammar-for-excel-views-in-mvc.aspx

In a recent blog, I wrote about Building A Custom View Engine to Create Excel Files in MVC. In this blog, I skipped over the grammar that we might use in the View definition.

I have had a few people email me to fill in this gap.

If you haven’t already read this blog, I encourage you to do so before continuing. Most of the content here will assume that you are already familiar with what we have already covered.

In this previous blog, we defined a new View Engine that could be used to build and send Excel files back to the user as the view. The goal being to separate the content of the View from the mechanics of creating the actual spread sheet.

Let’s consider a typical use case.

You have a page that displays a list of search results and you want to export these results to Excel. This is a very common user request. By structuring this as an Excel view, we don’t have to get bogged down in the mechanics of creating the spread sheet and the grammar that we follow allows the View Engine to be oblivious to what is actually going into the final spreadsheet.

In defining our simple grammar. We are going to make a couple of assumptions:

The Model passed to the View will be an IList<T> where T is the type for the data being displayed
All of the values mapped to the excel file will be retrieved through properties of T (or properties of properties of T)
Our grammar will not support calling functions or conditional logic only property references

With these assumptions in mind, let’s consider what we may need to define for our Excel file. We want to be able to specify:

Column Headers
Column Values
Column Widths

For this grammar we will have three keywords:

HEADER:
VALUES:
WIDTHS:

To keep things simple, we will require that each key word be on a line by itself and that the values for the key word be separated by the pipe character “|”

With these rules in place, a sample View Definition may look this:

   1:  HEADER:Unique Id|Name| PhoneNumber|Status|Payment Scheduled Date

   2:  VALUES: UniqueId | Name |  TelephoneNumber | DecodedStatus| PaymentsDate

   3:  WIDTH:14|32|15|30|30

This will define that we 5 columns with these specified headers and we have specified widths for each of these columns. The values listed after the VALUES: keyword will correspond to properties in the object making up the model.

We want to keep this grammar simple because we don’t have editor support for maintaining this file. Also as long as you are using an View Model for your Model the restriction of requiring property references is not as restrictive as it may seem at first. You can easily implement your property in the View Model to accommodate any function calls that would be required.

Our View Engine will stay the same from the previous blog with one exception. The CreateView method now looks like this:

   1:  protected override IView CreateView(ControllerContext controllerContext, string viewPath, string masterPath)

   2:  {

   3:     var modelType = controllerContext.Controller.ViewData.ModelMetadata.ModelType;

   4:     var contentType = modelType.GetGenericArguments().FirstOrDefault();

   5:     var item = CreateGeneric(typeof (ExcelView<>), contentType

   6:                                       , viewPath) as IView;

   7:     return item;

   8:  }

Because we assume that the Model will be of type IList<T>, we only need to let the View know about the T.

Most of the changes in the View will be seen in the render method:

1: public void Render(ViewContext viewContext, TextWriter writer)

   2:  {

   3:      string filePath = viewContext.HttpContext.Server.MapPath(ViewPath);

   4:      string[] fileContents = File.ReadAllLines(filePath);

   5:      var model = viewContext.ViewData.Model as IList<ContentType>;

   6:      string action = viewContext.RouteData.Values["action"].ToString();

   7:      using (var excelPackage = new ExcelPackage())

   8:      {

   9:          ActiveSheet = excelPackage.Workbook.Worksheets.Add(action);

  10:          ActiveSheet.Name = action;

  11:          viewContext.HttpContext.Response.ClearContent();

  12:          CurrentRow = 1;

  13:          foreach (var line in fileContents)

  14:          {

  15:              ProcessHeader(line);

  16:              ProcessWidth(line);

  17:              ProcesValues(line,model);

  18:          }

  19:          var response = viewContext.HttpContext.Response;

  20:          response.BinaryWrite(excelPackage.GetAsByteArray());

  21:          response.AddHeader("content-disposition",

  22:                              string.Format("attachment;filename={0}.xlsx", action));

  23:          response.ContentType = "application/excel";

  24:          response.Flush();

  25:          response.End();

  26:      }

  27:  }

Everything should look familiar from the earlier blog up the three methods called called inside the for loop.

These three methods check for their specific keywords and handle the appropriate processing.

   1:  private void ProcessHeader( string line)

   2:  {

   3:      if (line.StartsWith("HEADER:"))

   4:      {

   5:          var template = line.Replace("HEADER:", "");

6:

   7:          var headers = template.Split('|');

   8:          int col = 1;

   9:          foreach (var header in headers)

  10:          {

  11:              ActiveSheet.Cells[CurrentRow, col++].Value = header;

  12:          }

  13:          ActiveSheet.Cells[CurrentRow, 1, 1, col]

  14:              .Style.Font.Bold = true;

  15:          CurrentRow++;

  16:      }

  17:  }

We will simply output the values associated with the HEADER keyword unchanged.

   1:  private void ProcessWidth( string line)

   2:  {

   3:      if (line.StartsWith("WIDTH:"))

   4:      {

   5:          var template = line.Replace("WIDTH:", "");

   6:          int col = 1;

   7:          foreach (var width in template.Split( '|'))

   8:          {

   9:              ActiveSheet.Column(col).Width = Int32.Parse(width);

  10:              col++;

  11:          }

12:

  13:      }

  14:  }

The EPPlus library makes it easy to set the width of a column.

   1:  private void ProcesValues( string line, IEnumerable<ContentType> model)

   2:  {

   3:      if (line.StartsWith( "VALUES:"))

   4:      {

   5:          var template = line.Replace("LIST:", "");

   6:          var columns = template.Split('|');

   7:          foreach (var item in model)

   8:          {

   9:              int col = 1;

  10:              foreach (var column in columns)

  11:              {

  12:                  ActiveSheet.Cells[CurrentRow, col++].Value =

  13:                      EvaluateValue(item, column);

  14:              }

  15:              CurrentRow++;

  16:          }

  17:      }

  18:  }

The outer loop loops through the items in the model while the inner loop loops through the values associated with the VALUES keyword.

The magic of pulling the requested value from the model happens in the EvaluateValue method:

   1:  private static string EvaluateValue (ContentType record, string value)

   2:  {

   3:      var genericArgument = typeof (ContentType);

   4:      var pe = Expression.Parameter(genericArgument, "p");

   5:      value = value.Trim();

   6:      if (string.IsNullOrEmpty(value))

   7:          return "";

   8:      var components = value.Split('.');

   9:      Expression referenceExpression = null;

  10:      if (components.Count() > 0)

  11:      {

  12:          referenceExpression = Expression.Property(pe, components[0]);

  13:          foreach (var component in components.Skip(1))

  14:          {

  15:              referenceExpression = Expression.Property(referenceExpression, component);

  16:          }

  17:      }

  18:      if (value.StartsWith("\""))

  19:          referenceExpression = Expression.Constant(value);

  20:      if (referenceExpression == null)

  21:          return "";

  22:      referenceExpression = Expression.Convert(referenceExpression, typeof (object));

  23:      var expression = Expression.Lambda<Func<ContentType, object>>

  24:          (referenceExpression, pe).Compile();

  25:      var data = expression.Invoke(record );

  26:      return data != null ? data.ToString() : "";

  27:  }

The foreach loop on line 13 shows the recursive calls that are needed to pull nested properties. This allows you to refer to properties such as Data.Contact.Address.State

When you start worrying about performance or if you are dealing with large excel exports, you may want to consider caching the reference expressions to optimize this functions, but that should be fairly straightforward.

This simple grammar allows us to define some fairly complex Excel exports without ever having to write any excel code or deal with any of the objects in the EPPlus library outside of the View Engine.

This should provide a good foundation to build up your own grammar for defining Excel views.

Please share the grammars that you come up with or the use cases that you find.

Programming Is Not for Everybody? Everyone needs to be Encouraged!

Nick Harrison — Mon, 04 Mar 2013 20:48:24 GMT

Originally posted on: http://geekswithblogs.net/nharrison/archive/2013/03/04/programming-is-not-for-everybody.aspx

I just read this blog Programming Is Not for Everybody. I have to admit to being taken aback by the premise.

I believe that in their heart of hearts everyone wishes that they could program computers. No it is not always a glamorous profession. It is often boring and tedious. It is almost always difficult to explain what you do. There are days when you wonder why do you put yourself through it all.

But if you ever experience a “Holy Crap It worked” moment, you are hooked.

Many programmers are more artist than anything else. We adapt to work in the business world. We adapt to solve business problems or scientific problems or whatever domain we have find that signs the pay checks, but the passion that drives us is the pursuit of the elegant solution, the beauty of a design brought to life (even if very few will ever see the true beauty), and the thrill of bending a computer to your will.

How do I know that this is the secret dream of the masses?

If you are in a programming shop, ask yourself how many of your co workers studied computer science. Chances are, not all of them will have a degree in Computer Science. Chances are you will know many people who studied something else first. I have friends who studied History in college, and went on to be outstanding DBAs. I have friends who earned their CPA only to discover that they preferred an Access database or the macros in Excel to their accounting duties. I know people from dozens of different educational backgrounds who migrated to IT and development specifically after college. I know many who discovered their passion earlier and skipped college all together, and are still successful. Granted you will have the best chances for success by starting out with a degree in Computer Science, but this hardly the only entry point.

I do not know anyone who studied Computer Science who has not stayed in that field. Where else can you make that claim.

Programming may not be for everyone, but if you have ever toyed with the idea, it probably is for you. If you have ever taken a calculator apart wondering how it works. If you have ever stared in awe at the source code for a web page and wondered how does this work, it probably is for you.

We have a shortage of programmers in this country. Anyone with an interest needs to be encouraged to pursue it. Not with false claims of glory and glamour, but with the realization that when the code works, there is no greater thrill. We need to aggressively seek out anyone who looks like they have the potential to enjoy this passion, and encourage them. It is not always easy, but it is rewarding, and we need more programmers.

If you have ever wondered if programming is right for you, by simply asking the question, you have answered it for yourself. That curiosity alone means that it is and you will have the ride of your life finding it out.

Dynamic Sorting with LINQ

Nick Harrison — Mon, 04 Mar 2013 18:01:08 GMT

Originally posted on: http://geekswithblogs.net/nharrison/archive/2013/03/04/dynamic-sorting-with-linq.aspx

If you use LINQ to retrieve data and display this data in a grid, you may have come across the problem of allowing the user to control how the data is sorted. Users always want to be able to sort data on their own.

GridView makes it easy to wire up an event handler or trigger an action to handle the sorting. The problem is that such sorting is not necessarily so straightforward with LINQ.

A common approach is to hard code a giant if statement listing out the possibilities:

   1:  public IQueryable<FileImport> SortFiles

   2:                (IQueryable<FileImport> files,

   3:                 string orderBy)

   4:  {

   5:      if (orderBy == "FileName")

   6:          files = files.OrderBy(o => o.FileName);

   7:      if (orderBy == "ImportDate")

   8:          files = files.OrderBy(o => o.ImportDate);

   9:    . . .

  10:      return files;

  11:  }

While this is dynamic, it only works for the one data type, forces a brittle dependency on the property names, and has to be changed whenever a new property is added.

A better approach may be to use ExpressionTrees and dynamically build up the whole call to the OrderBy function.

Consider this extension method:

   1:  public static IOrderedQueryable<TSource>

   2:      GenericEvaluateOrderBy<TSource>

   3:          (this IQueryable<TSource> query,

   4:          string propertyName)

   5:  {

   6:      var type = typeof (TSource);

   7:      var parameter = Expression.Parameter(type, "p");

   8:      var propertyReference = Expression.Property(pe, propertyName);

   9:      var sortExpression = Expression.Call(

  10:          typeof (Queryable),

  11:          "OrderBy",

  12:          new Type[] {type},

  13:          null,

  14:          Expression.Lambda<Func<TSource, bool>>

  15:              (propertyReference, new[] { parameter }));

  16:      return query.Provider.CreateQuery<TSource>(sortExpression);

  17:  }

With this method in place, you can sort by any column on any ViewModel:

   1:  if (!string.IsNullOrEmpty(sortExpression))

   2:     query = query.GenericEvaluateOrderBy(sortExpression);

   3:  return query;

In this case the sortExpression variable would come from the Sort method on the GridView.

Learn this and other tricks at Simple Talk

How are you using Dynamic LINQ queries?

Jedi Mind Meld

Nick Harrison — Mon, 04 Mar 2013 17:11:43 GMT

Originally posted on: http://geekswithblogs.net/nharrison/archive/2013/03/04/jedi-mind-meld.aspx

I try to keep politics out of my technical blog, but I figured that as long as I keep the focus, narrowly defined, I guess we should be OK.

We need to be careful reading too much into this slip of the tongue. I think the president as proving repeatedly that he is a fan of both franchises. I pretty sure that this is a humorous slip of the tongue and nothing more.

If the tech community wants to get up and arms over the President, we have other issues worthy of out attention. Cyber weapons, privacy, piracy, and drones come to mind.

If you want to focus on what he has done for the tech community we can focus on how he embraces social media, the role of big data in the campaign, or the fact that he does seem to be the first one to take cyber security even a little bit serious.

So while there are plenty of issues to praise him for and to take offense by, the Jedi Mind Meld is simply not one of them. Hopefully it will actually become a funny Internet meme along the lines of the treasured “Use the Force Harry”

Thus ends the political portion of this blog.

Exporting XML Comments to Your Application

Nick Harrison — Fri, 01 Mar 2013 17:07:00 GMT

Originally posted on: http://geekswithblogs.net/nharrison/archive/2013/03/01/exporting--xml-comments-to-your-application.aspx

Recently I blogged about adding SQL Doc Documentation to you Application. This makes it easy to keep your documentation visible and more likely current.

I wanted to do the same thing with my code documentation. I wanted to leverage the work taken to add XML comments and add even more visibility.

There are already tools readily available to convert these XML comments to MSDN looking documentation or help files, and these comments get incorporated into intellisense as you are writing code.

I did not want MSDN style documentation. I wanted documentation that could be incorporated into the actual application and look like it flowed with everything else.

When you build a project, you can specify the XML Documentation file. All of your XML Comments will be added to this file:

Since this is XML, getting the output to look the way that I want seems like a perfect problem for XSLT to solve.

A little Google searching, brought me to this page on Code Project. Here Emma Burrows provides a base template formatting this XML.

Out of the box, we have a vanilla set of documentation. Not bad, but not fancy, and it does not look like it flows with the rest of the application. We have a blank slate ready to style:

For the most part, all we really have to do is style the output. In some cases, I added classes to the template to simplify matters.

I created the following classes:

typeName to Style the Types
summary to give consistent formatting to the summary sections in the documentation
memberType to separate the different member types such as properties, methods, events, etc
memberName to separate the individual members

Adding the class to the template is straightforward. You just find where the corresponding element is being created. Emma has already done most of the heavy lifting for us.

So this code:

   1:    <!-- Display the type's name and information -->

   2:    <H2><xsl:value-of select="$MemberName"/></H2>

   3:    <xsl:apply-templates/>

become this:

   1:    <!-- Display the type's name and information -->

   2:    <H2 class ="typeName"><xsl:value-of select="$MemberName"/></H2>

   3:    <xsl:apply-templates/>

Also if you wanted to change the tags being used, this is also a fairly trivial change as well.

In honesty, the tags that Emma uses work well. You don’t actually have to add the classes, but it does make it easier to style.

Inside your application, there are a couple of things you will need to do to wire all of this together:

Fist, add an extension method similar to Jigar Desia's RenderXML. This method makes it easy to associate an XmlDocument and an XSLT template.

Mine looks like this:

   1:  public static void RenderXML<T>(this  ViewPage<T> page,

   2:      XmlDocument xmlDocument, string xsltPath,

   3:      Dictionary<string, string> xslArgParams)

   4:  {

   5:      var context = page.Html.ViewContext;

   6:      var xslArgs = new XsltArgumentList();

   7:      if (xslArgParams != null)

   8:      {

   9:          foreach (string key in xslArgParams.Keys)

  10:          {

  11:              xslArgs.AddParam(key, null, xslArgParams[key]);

  12:          }

  13:      }

  14:      var t = new XslCompiledTransform();

  15:      t.Load(xsltPath);

  16:      t.Transform(xmlDocument, xslArgs,

  17:                  context.HttpContext.Response.Output);

  18:  }

Next I defined a CodeDocumnentationViewModel

public class CodeDocumentationViewModel
{
    public XmlDocument Code { get; set; }
    public IList<string> AvailableFiles { get; set; }
}

This will provide an XmlDocument for the file currently selected as well as list of all available XML files

Inside the View, this is all we need to do display the formatted documentation:

   1:  <%

   2:      if (Model.Code != null)

   3:      {

   4:  %>

   5:          <div class = "codeComments">

   6:          <%

   7:          this.RenderXML(Model.Code,

   8:                         Server.MapPath("/Documentation/CodeComments/documentation.xsl"), null);

   9:  %>

  10:          </div>

  11:          <%

  12:      }

  13:      else

  14:      {

  15:    %>

  16:      <img src="../../Content/images/CodeComments.png" />

  17:    <%

  18:      }

  19:    %>

If we don’t have a valid XmlDocument, we will simply display a place holder picture, otherwise, we will call the RenderXML.

The other thing left to do is to add a display listing out the available files.

   1:  <h1 class="ui-widget-header">Available Files</h1>

   2:  <ul class = "ui-widget">

   3:  <% foreach (var file in Model.AvailableFiles  )

   4:  {

   5:    %>

   6:    <li class ="ui-state-default"><%= Html.ActionLink(file, "ShowCode", new {fileName= file}) %> </li>

   7:    <%

   8:  } %>

   9:  </ul>

  10:  </div>

In the end, I think that the format looks pretty good. What do you think?

Adding SQL Doc Documentation to your Project

Nick Harrison — Thu, 28 Feb 2013 16:22:52 GMT

Originally posted on: http://geekswithblogs.net/nharrison/archive/2013/02/28/adding-sql-doc-documentation-to-you-project.aspx

In a recent blog post, we talked about using SQL Doc to stream line documenting your database. This tool makes it a lot easier to put the documentation close to the source so that it is more likely to stay current.

Another problem with documentation like this though is its visibility. If you squirrel it away on a file server somewhere, it is easily forgotten. Again the key is to keep it closer to the source or at least where it will be the most relevant.

So I decided to add the outputted documentation to the application using the database. This keeps in more in the mind of the folks supporting and maintaining the application itself. Of course, you would also want to make sure to make this accessible only to the folks who can use this information and who should be using it. This would of course be a treasure trove for a hacker and intimidating to a casual user.

Now this part is largely personal preference, the default look for the generated HTML documentation looks rather pedestrian:

It doesn’t match the look of the rest of the site, plus there are some details that I don’t really want to include such as the properties and the SQL Script.

In looking at the generated HTML, we discover a couple of nice features baked into the HTML.

First off in the Style folder there is a Master.css file that we can edit to change the look incorporating the colors and styles from the rest of the site so that it looks like the documentation flows with everything else.

Matching the fonts, colors, and backgrounds from the rest of my site, we get a look like this:

Since I am using the jQuery UI start theme in my site, this looks consistent.

The next couple of things that I want to do is remove the navigation links at the top, the Properties table, and the SQL Script.

The SQL Script and the QuickLinks are relativly easy.

.sqlScript
{
   display:none;
}

along with:

.QuickLinks
{
   display:none;
}

will remove these components.

Getting rid of the Properties Section is a bit tougher.

To get rid of the section title, we need this little trick:

a[name="properties"]
{
   display:none;
}

Finally to embed this content in my application, I use an IFrame.

<iframe src = "../../Documentation/ghenghis/index.html" id = "db" >
</iframe>

And a little jQuery to keep the height of the iframe looking right:

<script>
    $(window).resize(function () {
        $("#db").height($(window).height() - ($("#db").position().top + $("#main").position().top));
    });
    $(window).resize();
</script>

I think that the final effect looks pretty good.

Do You Dream in LINQ?

Nick Harrison — Thu, 28 Feb 2013 13:38:44 GMT

Originally posted on: http://geekswithblogs.net/nharrison/archive/2013/02/28/do-you-dream-in-linq.aspx

New article on Simple Talk exploring various ways to build dynamic queries with LINQ

Some of the examples are fairly straight forward, but in the end, I step you through creating complex queries from scratch using reflection and Expression Trees.

Expression Trees are the neglected corner of DotNet voodoo. Hopefully this will shed some light on this “scary topic”.

Hit the comments and tell me how you dream in LINQ

Reviewing Syncfusion: jQuery Succinctly

Nick Harrison — Mon, 25 Feb 2013 17:53:10 GMT

Originally posted on: http://geekswithblogs.net/nharrison/archive/2013/02/25/reviewing-syncfusion-jquery-succinctly.aspx

The nice folks at Syncfusion reached out to me last week to tell me a little bit about their Succinctly series of books. As they describe the concept, their goal is take 500+ pages of content and distill it down to 100 pages of essentials.

I was intrigued but apprehensive with visions of “For Dummies” books running through my head.

So I looked through their offerings and decide to check out a topic that I am already somewhat familiar with. I downloaded jQuery Succinctly to examine.

I was pleasantly surprised. The author is none other than Cody Lindley who definitely has street cred for knowing his jQuery. I also liked that you can download it for the Kinle

This is not another take on “For Dummies” There are no annoying cartoons, there is no pandering, there is not trudging through elementary concepts that you should already know before considering a topic like jQuery.

While jQuery is a massive pervasive topic, the author distills it down nicely by following a couple of conventions that I greatly appreciate.

First, he doesn’t waste time reminding you what a function is, what a variable is, what html is, etc. He assumes that you already know how to build a web application and that you now want to know the basics of jQuery. This is very refreshing. In his own words:

This book is intended for three types of readers. The first is someone who has read introductory material on jQuery and is looking for the next logical step. The second type of reader is a JavaScript developer, already versed in another library, now trying to quickly learn jQuery. The third reader is I, the author. I crafted this book to be used as my own personal reference point for jQuery concepts. This is exactly the type of book I wish every JavaScript library had available.
Cody Lindley

Second, he takes the perspective; that the text is secondary to the sample code. He expects you to examine the code samples closely; “It is my opinion that a code example is actually worth a thousand words.”

There are many times while reading this book that I would skip over the brief surrounding text and only read the code examples.

He adds comments in line that explain the expected output. This really is worth a thousand words. You can imagine how much text would be needed to explain this simple example.

<! DOCTYPE html >
<html lang=" en">
<body>
    <div id=" parent2">
        <div id=" parent1">
            <div id=" parent0">
                <div id=" start">
                </div>
            </div>
        </div>
    </div>
    <script src=" http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js">
    </script>
    <script>        (function ($) {
            // Alerts "parent0" x4 
            alert($('#start').parent().attr(' id'));
            alert($('#start').parents('# parent0').attr(' id'));
            alert($('#start').parents()[0].id);
            // Gets actual DOM element 
            alert($('#start').closest('# parent0').attr(' id'));
            // Alerts "parent1" x4 
            alert($('#start').parent().parent().attr(' id'));
            alert($('#start').parents('#parent1').attr(' id'));
            alert($('#start').parents()[1].id); // Gets actual DOM element
            alert($('#start').closest('# parent1').attr(' id'));
            // Alerts "parent2" x4
            alert($('#start').parent().parent().parent().attr(' id'));
            alert($('#start').parents('#parent2').attr(' id'));
            alert($('#start').parents()[2].id);
            //Gets actual DOM element 
            alert($('#start').closest('#parent2').attr(' id'));
        })(jQuery);
    </script>
</body>
</html>

He doesn’t waste time trying to explain why you might want to do something like add a class to every image on the page. Instead he shows several different ways to work such magic.

If you are already familiar with JavaScript, html, css, and now want to learn jQuery without having to hash through a bunch of stuff that you already know, this is the book for you.

If you are looking for an introduction to web programming, this is not going to give you what you need, and you will be disappointed. Cut your teeth on a couple of other introductory books first and then come back. If you want introductory books on a particular topic, hit the comments and I can give you my two cents worth.

As the author mentions in the introduction, he designed it to be used as his own personal reference for jQuery concepts. So, unlike many other introductory texts, this one you will want to keep handy for quick reference after the initial read.

Next, I think that I will read about up Pdf. http://www.syncfusion.com/resources/techportal/ebooks/pdf

Book Review of Under the Hood of .Net Memory Management

Nick Harrison — Fri, 22 Feb 2013 19:58:37 GMT

Originally posted on: http://geekswithblogs.net/nharrison/archive/2013/02/22/book-review-of-under-the-hood-of-.net-memory-management.aspx

I don’t really like to toot my own horn, but I am not above shining the light on someone doing it for me.

Ein Gedanke has written a wonderful review of the book that I co wrote.http://blog.fabse.net/2012/11/20/book-finished-under-the-hood-of-dotnet-memory-management/

I thoroughly enjoyed reading his review.

After reading his review, feel free to wander over to Amazon and see how you can get a copy for yourself

Do You Use SQL Doc from Red Gate?

Nick Harrison — Fri, 15 Feb 2013 20:28:08 GMT

Originally posted on: http://geekswithblogs.net/nharrison/archive/2013/02/15/do-you-sql-doc-from-red-gate.aspx

Do you have a database? Then you should be using SQL Doc! http://www.red-gate.com/products/sql-development/sql-doc/

SQL Doc scans the data dictionary and associated metadata to produce the documentation for your database. You can output this documentation in several different formats depending on your needs:

You can also explicitly pick and chose which components to include and save these selections in a project file to make it easy to refresh the documentation:

Now for the kicker, you can easily update the metadata for the objects that you are documenting. Tables, columns, Views, Stored Procedures, Parameters, Indexes all have extended metadata where you can enter a comment.

If you have entered such comments, they will be incorporated into the resulting documentation.

This is nice because this metadata is not necessarily easy to get to, and it is cumbersome to update in Management Studio. This is where SQL Doc truly shines.

When reviewing the documentation created for a table, you can easily update this metadata.

Simply click on the Edit button and then type away to your heart’s content.

Instead of hitting Update Database, click Next or Previous and move through the columns. Once you have entered all of the comments that you want for this table, hit the Update Database button and all of your comments will be added to the database and incorporated into the documentation.

This is a huge advantage compared to what you would have to do in Management Studio.

As much as I like this tool, and I do there are still a few things missing:

We really need spell checker in the edit box.
Be nice to draw attention to components that are not yet documented.
There are some documentation that the tool should be able to figure out and add on its own. I should never have to write a comment that a field is part of a foreign key or a primary key. I should not have to list out

The other problem that I have is that I wished I had more control over the generated output. It would be nice if the HTML was structured with rebranding in mine or if you could associate a style sheet with the generated output. Never fear though, we can easily add the style sheet our selves af2ter the fact and in future blogs, we may explore how you can rebrand this output to meet our needs with style sheets and maybe a little bit of jquery.