Templates - How to Kick Start Your Next Development Project

Published January 13, 2010 11:00 AM by Brian Beckham in Best Practices

Time to start a new project ... what do you do? Maybe check out previous projects from subversion (or insert your code control system here) and take what you need?

Reusing code this way is troublesome.  It's an easy thing to do, but there are problems - first, you'll need to properly extract out what is needed and configure it. Second, make sure that any 3rd party components are up to date with current releases.  Third remove any elements that are unneeded overhead from the existing project. And fourth - test it to make sure the base platform is working correctly.

Our basic .NET platform is a good example - we utilize several 3rd party components - nHibernate, Spring.NET, Lucene, etc., etc., etc.  Some elements (for example Spring.NET) have pieces that reach out and interact with other libraries (like nHibernate). 

Using Snippet Garden, we've started the practice of creating project templates.  

We start by building a minimal project, including all the external libs, configuration files, and some sample code - add in a little documentation for the configuration and test instructions, zip it, and upload to our Snippet Garden site.  By using these empty sample projects, with all of the related plumbing, my development team can start quicker, and don't have to worry about updating or testing the base platform.  

We've also found that the templates are easier to maintain this way - when a new release of a component comes out, update, test, and upload it back into the system.  These project templates don't just jump start projects, we use them to teach development team members how these frameworks work.  With Snippet Garden's role based user accounts, I can make sure only senior developers can update the templates, and within a single snippet, we can upload several versions of the template for different purposes, or include "snips" of alternate configuration options for the developer to choose from.

Using Snippet Garden's tagging feature, all templates are tagged with - well "Template" so they're easy to find.  Other developers are encouraged (strongly) to use the templates, and add comments that document any problems that might incur when using the template. Capturing these experiences is essential so that future users avoid any pitfalls experienced by other team members.  

So, how does your development team do it?


 

Digg It!DZone It!StumbleUponTechnoratiRedditDel.icio.usNewsVineFurlBlinkList

Snippets today are a little more, well... complicated

Published January 13, 2010 9:10 AM by Brian Beckham in Best Practices

Today developers have it great - there are tons of 3rd party libraries, API's and tools that handle the most mundane tasks, shorten our code, and in some cases allow different people with different talents to contribute to the overall project good.  The bad news is that developers today deal with lots of different frameworks and languages to accomplish even the simplest programming feat.

So, to properly demonstrate a good snippet - let's take a simple example - rollover main menu.  How many times have you coded that one, eh?

There are lots of approaches - man, I think I have done them all.  Lately, we seem to use this sprite method a lot.  So to set this up - let's discuss.  First, the menu needs 3 states, normal, hover, and selected.  And to use a sprite, I need a single image that includes all 3 states.

Here's one:

Next, I need some html - how to "embed" the menu into the page.  I like using unordered lists, so here that is:

<div id="navigation">
   <ul>
      <li id="n1"><a id="A1" runat="server" href="/HowItWorks/Gallery.aspx">Take 
         a tour</a></li>
      <li id="n2"><a id="A2" runat="server" href="/blog">Blog</a></li>
      <li id="n3"><a id="A3" runat="server" href="/SignUp/Enrollment.aspx">Plans / Sign Up</a></li>
      <li id="n4"><a id="A4" runat="server" href="/FeedBack/SendFeedback.aspx">Contact</a></li>
   </ul>
</div>

Next, we need a little css:

#navigation
{
    width: 467px;
    padding: 64px 0 0;
    height: 42px;
    float: right;
    display: inline;
    clear: right;
}


#navigation ul
{
    position: relative;
    width: 467px;
    height: 42px;
    background-image: url(images/nav/top_nav.gif);
    margin: 0;
    padding: 0;
}

#navigation ul li
{
    margin: 0;
    padding: 0;
    list-style: none;
    position: absolute;
    top: 0;
}

#navigation ul li, #navigation a
{
    display: block;
    height: 42px;    
}

#navigation ul li a
{
    text-indent: -9999px;
    text-decoration: none;
}

#n1 { left: 0; top: 0; width: 110px; }
#n2 { left: 111px; top: 0; width: 70px; }
#n3 { left: 182px; top: 0; width: 139px; }
#n4 { left: 322px; top: 0; width: 145px; }

#n1 a:hover { background: transparent url(images/nav/top_nav.gif) 0 -42px no-repeat; border-bottom: 0; }
#n2 a:hover { background: transparent url(images/nav/top_nav.gif) -111px -42px no-repeat; border-bottom: 0; }
#n3 a:hover { background: transparent url(images/nav/top_nav.gif) -182px -42px no-repeat; border-bottom: 0; }
#n4 a:hover { background: transparent url(images/nav/top_nav.gif) -322px -42px no-repeat; border-bottom: 0; }

#n1 a.selected { background: transparent url(images/nav/top_nav.gif) 0 -84px no-repeat;border-bottom: 0; }
#n2 a.selected { background: transparent url(images/nav/top_nav.gif) -111px -84px no-repeat;border-bottom: 0; }
#n3 a.selected { background: transparent url(images/nav/top_nav.gif) -182px -84px no-repeat; border-bottom: 0; }
#n4 a.selected { background: transparent url(images/nav/top_nav.gif) -322px -84px no-repeat; border-bottom: 0; }

Finally, since this is a .NET application, I'll add some code-behind to dynamically set the "selected" css class when a menu option is the current selection:

protected void Page_Load( object sender,
                          EventArgs e )
{
   if ( IsPostBack ) return;
   ResetUserHeaderItems( );
}

private void ResetUserHeaderItems( )
{
    string pathLower = Request.Url.AbsolutePath.ToLowerInvariant( );

    if ( pathLower.Contains( "/howitworks/" ) )
    {
        A1.Attributes[ "class" ] = "selected";
    }
    else if (pathLower.Contains("/blog/"))
    {
        A2.Attributes[ "class" ] = "selected";
    }
    else if (pathLower.Contains("/signup/"))
    {
        A3.Attributes[ "class" ] = "selected";
    }
    else if (pathLower.Contains("/feedback/"))
    {
         A4.Attributes[ "class" ] = "selected";
    }
}

So even in this simple example, we are using 3 different languages to accomplish a single task. But there is really one more thing I should do - this could be better with a functioning example page. So I can upload a mini-project, complete with my image, a .css file, a .aspx and the codebehind .cs file.

Now, this is a simple example, but you can certainly imagine a larger more complex scenario - how about a snippet to teach the basics of LINQ to Entities? Maybe a dependency injection sample using Castle?

Digg It!DZone It!StumbleUponTechnoratiRedditDel.icio.usNewsVineFurlBlinkList