<?xml version="1.0" encoding="UTF-8"?>
<rss version="2.0"
	xmlns:content="http://purl.org/rss/1.0/modules/content/"
	xmlns:wfw="http://wellformedweb.org/CommentAPI/"
	xmlns:dc="http://purl.org/dc/elements/1.1/"
	xmlns:atom="http://www.w3.org/2005/Atom"
	xmlns:sy="http://purl.org/rss/1.0/modules/syndication/"
	xmlns:slash="http://purl.org/rss/1.0/modules/slash/"
	>

<channel>
	<title>www.fooberry.com &#187; Web Development</title>
	<atom:link href="http://fooberry.com/category/web-development/feed/" rel="self" type="application/rss+xml" />
	<link>http://fooberry.com</link>
	<description>Sweetness Without Context</description>
	<lastBuildDate>Fri, 30 Jul 2010 14:17:02 +0000</lastBuildDate>
	<language>en</language>
	<sy:updatePeriod>hourly</sy:updatePeriod>
	<sy:updateFrequency>1</sy:updateFrequency>
	<generator>http://wordpress.org/?v=3.0</generator>
		<item>
		<title>YouTrack under SSL</title>
		<link>http://fooberry.com/2010/07/30/youtrack-under-ssl/</link>
		<comments>http://fooberry.com/2010/07/30/youtrack-under-ssl/#comments</comments>
		<pubDate>Fri, 30 Jul 2010 14:17:02 +0000</pubDate>
		<dc:creator>mark</dc:creator>
				<category><![CDATA[Web Development]]></category>
		<category><![CDATA[SSL]]></category>
		<category><![CDATA[YouTrack]]></category>

		<guid isPermaLink="false">http://fooberry.com/2010/07/30/youtrack-under-ssl/</guid>
		<description><![CDATA[<br/>I have to admit, this post is going to be lame. I won’t be offended if you stop reading now because it is mostly for my own benefit. Recently we moved our YouTrack server to a publicly accessible server and got it all setup with an URL like http://dev.acme.com. We then wanted to move out [...]]]></description>
			<content:encoded><![CDATA[<br/><p>I have to admit, this post is going to be lame. I won’t be offended if you stop reading now because it is mostly for my own benefit.</p>
<p>Recently we moved our YouTrack server to a publicly accessible server and got it all setup with an URL like <a href="http://dev.acme.com">http://dev.acme.com</a>. We then wanted to move out TeamCity server to the same box so moved both TeamCity and YouTrack into a Tomcat app server and gave them URLs like dev.acme.com/teamCity and dev.acme.com/youTrack. Sweet. Everything is going great.&#160; We have them talking to each other. </p>
<p>Let’s flip them over to talk on only SSL. This wasn’t was easy as I hoped. Actually it was super simple, but finding the steps was painful. If you look for how to setup SSL with Tomcat you find a load of articles using tools and certificates we don’t have handy. We do have our wild card certificate from IIS that we can export and then <a href="http://tp.its.yale.edu/pipermail/cas/2005-July/001337.html">the steps are easy</a>. </p>
<p>Sweet. While I was in that file I commented out the Tomcat connector on port 80 so IIS could listen on that port. I’m more familiar with IIS and setting up the HTTP to HTTPS redirect was easier for me in IIS…which I did next. </p>
<p>All done. Everything is golden right? It works. It redirects to HTTPS if you request HTTP. Awesome…except we cannot attach files. Bummer.</p>
<p>We get asked questions like:</p>
<blockquote><p>Are you using a proxy?     <br />Please specifiy procy if you are using one, otherwise it is impossible to post the attachment.</p>
</blockquote>
<p>Since we are not using a proxy I said “no” and then got another error message.</p>
<blockquote><p>Sorry, cannot attach the image.</p>
</blockquote>
<p>Luckily this was an <a href="http://youtrack.jetbrains.net/issue/JT-3522?projectKey=JT&amp;query=proxy">easy fix</a> as well. This was a fairly easy issue to find since JetBrains publicly tracks the issues with YouTrack. That was exactly out problem. We had YouTrack setup to listen on <a href="http://dev.acme.com/youTrack">http://dev.acme.com/youTrack</a> instead of <a href="https://dev.acme.com/youTrack">https://dev.acme.com/youTrack</a>. Switching that in the settings fixed our problem. </p>
]]></content:encoded>
			<wfw:commentRss>http://fooberry.com/2010/07/30/youtrack-under-ssl/feed/</wfw:commentRss>
		<slash:comments>0</slash:comments>
		</item>
		<item>
		<title>Mixing WebForms and MVC</title>
		<link>http://fooberry.com/2010/07/02/mixing-webforms-and-mvc/</link>
		<comments>http://fooberry.com/2010/07/02/mixing-webforms-and-mvc/#comments</comments>
		<pubDate>Fri, 02 Jul 2010 14:19:22 +0000</pubDate>
		<dc:creator>mark</dc:creator>
				<category><![CDATA[Web Development]]></category>
		<category><![CDATA[MVC]]></category>
		<category><![CDATA[web]]></category>
		<category><![CDATA[WebForms]]></category>

		<guid isPermaLink="false">http://fooberry.com/2010/07/02/mixing-webforms-and-mvc/</guid>
		<description><![CDATA[<br/>We have a moderately large WebForms web application, but we are trying to transition to MVC. On the surface it sounds pretty simple. We can create controllers to do small functions of our page. we can be AJAXy if we so desire and all will be great. Let’s give it a try.&#160; We want to [...]]]></description>
			<content:encoded><![CDATA[<br/><p>We have a moderately large WebForms web application, but we are trying to transition to MVC. On the surface it sounds pretty simple. We can create controllers to do small functions of our page. we can be AJAXy if we so desire and all will be great. </p>
<p>Let’s give it a try.&#160; We want to add a customer search to our master page.&#160; Simple enough right?</p>
<p><a href="http://fooberry.com/wp-content/uploads/2010/07/image.png"><img style="border-right-width: 0px; display: inline; border-top-width: 0px; border-bottom-width: 0px; border-left-width: 0px" title="image" border="0" alt="image" src="http://fooberry.com/wp-content/uploads/2010/07/image_thumb.png" width="643" height="431" /></a></p>
<p>All I really need is a controller that redirects to our existing search page.&#160; No problem. Seems simple enough. Let me code up the controller in a simpler, reduced test case.</p>
<p>Done in 15 minutes.</p>
<p>OK. Now we just need to drop a tiny form that posts to our controller on our master page…wait&#160; a minute. WebForms has a HUGE form that takes up the entire page! I can’t nest a form inside a form. This means I can’t post inside the form to anywhere but the same form.</p>
<p>I know&#160; what you’re thinking. I shouldn’t <em>post </em>to search anyway. I should <em>get</em> instead. Yes. I agree, but this example is contrived. I actually came across this problem when I wanted to create a controller that merged two customers together and redirect to the surviving customer. In that case we <em>do</em> want to post…so bear with my invalid semantics. </p>
<p>Anyway. We can’t POST. hmm..I guess we have to do something like this (remember in real life I’m merging and not searching&quot;):</p>
<pre name="code" css="c#">[HttpGet] public ActionResult SearchViaGet(string searchTerm, bool isQuickSearch){}</pre>
<p>It feels really nasty. What makes it even worse is we have to use Ajax to pull the values from the inputs and build the request URL. If they don’t have JavaScript enabled…oh well. No search for you!</p>
<p>I can’t really think of a way around this. With MVC, and without the giant WebForms form, this page would comprised of several tiny forms. For now, the no JS problem isn’t that big of a deal. The app is used by internal users only so if they don’t have JS enabled we can just laugh at them until they either turn it on, or we feel bad that they don’t know how to turn it on, and turn it on for them.</p>
<p>Where we do have a problem is when we try to use pages like this via our ancient mobile devices. We can’t trust JS on those bricks and if I had to bet, there would be no search for them either.</p>
]]></content:encoded>
			<wfw:commentRss>http://fooberry.com/2010/07/02/mixing-webforms-and-mvc/feed/</wfw:commentRss>
		<slash:comments>0</slash:comments>
		</item>
		<item>
		<title>Static Types Don&#8217;t Fail Me Now</title>
		<link>http://fooberry.com/2010/05/11/static-types-dont-fail-me-now/</link>
		<comments>http://fooberry.com/2010/05/11/static-types-dont-fail-me-now/#comments</comments>
		<pubDate>Wed, 12 May 2010 01:24:37 +0000</pubDate>
		<dc:creator>mark</dc:creator>
				<category><![CDATA[Web Development]]></category>
		<category><![CDATA[dynamic]]></category>
		<category><![CDATA[ruby c# types cucumber]]></category>

		<guid isPermaLink="false">http://fooberry.com/2010/05/11/static-types-dont-fail-me-now/</guid>
		<description><![CDATA[<br/>I&#8217;m really excited about using Cucumber. There has been a desire to get to that level of BDD-ish style tests ever since I first saw how readable they were. We&#8217;re ready to make that next step. Let&#8217;s pretend we have the following set of pages. Pretty straight forward. We should be able to write a [...]]]></description>
			<content:encoded><![CDATA[<br/><p>I&#8217;m really excited about using Cucumber. There has been a desire to get to that level of BDD-ish style tests ever since I first saw how readable they were. We&#8217;re ready to make that next step. Let&#8217;s pretend we have the following set of pages.</p>
<p><a href="http://fooberry.com/wp-content/uploads/2010/05/mockup.png"><img src="http://fooberry.com/wp-content/uploads/2010/05/mockup.png" alt="" title="mockup" width="435" height="239" class="aligncenter size-full wp-image-946" /></a></p>
<p>Pretty straight forward. We should be able to write a pretty simple Cucumber feature.</p>
<pre name='code'>
Feature: Add Foos
  In order to keep track of foos
  As a person who enters foos
  I want to be able to add a foo 

  Scenario: Adding a foo without searching
	Given I view the welcome page
	When I click the Add New Foo button
	Then I'm taken to the Add Foo page

  Scenario: Adding a Foo
    Given I've searched for a foo that doesn't exist
    When I click the "save" ...that should say "Add"
    Then I'm taken to the Add Foo page
</pre>
<p>Simple enough. I&#8217;m not going to walk you through how to write the steps for that. I&#8217;m more interested in how you organize the pages into page modules inside a static language. In Ruby you could do something like</p>
<pre name='code' class='ruby'>
class WelcomePage
  def intialize(browser)
    @browser = browser
    self.goto
  end

  def goto
  end

  def addFoo
    @browser.click '#add'
    AddFooPage.new(@browser)
  end

  def searchForFoo(query)
    @browser.type(query).into('#t') # made up syntax
    @browser.click '#b'
    SearchResultsPage.new(@browser)
  end

end

class SearchResultsPaage
  def initialize(browser)
    @browser = browser
  end
  def addFoo
    @browser.click '#add'
  end
end
</pre>
<p>That isn&#8217;t WatiR. It&#8217;s totally made up. I&#8217;m a Ruby Newby too so told shoot me for any syntax errors. </p>
<p>You can drive it with something like this.</p>
<pre name='code' class='ruby'>
Given /I view the welcome page/ do
  @page = WelcomePage.new(browser)
end

Given /I search for (.*)/ do |q|
  @page = page.searchFor(q)
end

Given /I click on the add button/ do
  @page = page.addFoo()
end
</pre>
<p>Pretty straight forward huh? Well how I do that in C#? All of those Navigate methods will either return a specific page type or a base type that will make it impossible to call the subsequent specific steps.</p>
<pre name='code' class='c#'>
public class WelcomePage{
  public SearchResultsPage SearchFor(query){
    _browser.Type(query).into('#q');
    _browser.Click('#btn');
    return new SearchResultsPage(_browser);
  }
}

public class SearchResultsPage{
  public AddFooPage AddFoo(){
    return new AddFooPage(_browser);
  }
}
</pre>
<p>Then drive it with this.</p>
<pre name='code' class='c#'>
var welcome = new WelcomePage(_browser);
var results = welcome.SearchFor('bar');
var add = results.AddFoo();
</pre>
<p>Doesn&#8217;t that feel messy? Luckily, I think a feature of .Net 4.0 might save the day!</p>
<pre name='code' class='c#'>
dynamic page = new WelcomePage(_browser);
page = page.SearchFor('bar');
page = page.AddFoo();
</pre>
<p>Three cheers for dynamic! </p>
]]></content:encoded>
			<wfw:commentRss>http://fooberry.com/2010/05/11/static-types-dont-fail-me-now/feed/</wfw:commentRss>
		<slash:comments>0</slash:comments>
		</item>
		<item>
		<title>Can you be too lexical in your syntax</title>
		<link>http://fooberry.com/2010/04/16/can-you-be-too-lexical-in-your-syntax/</link>
		<comments>http://fooberry.com/2010/04/16/can-you-be-too-lexical-in-your-syntax/#comments</comments>
		<pubDate>Fri, 16 Apr 2010 15:14:28 +0000</pubDate>
		<dc:creator>mark</dc:creator>
				<category><![CDATA[Web Development]]></category>
		<category><![CDATA[C#]]></category>
		<category><![CDATA[extension method]]></category>
		<category><![CDATA[Selenium]]></category>
		<category><![CDATA[syntax]]></category>

		<guid isPermaLink="false">http://fooberry.com/2010/04/16/can-you-be-too-lexical-in-your-syntax/</guid>
		<description><![CDATA[<br/>Anyone whom has read any of my recent code knows I love lexical syntax. I really love it when anyone, even our HTML designers, can read our code and understand exactly what is going on. I’m not the only one either. @MarkBorcherding amen, fellow believer in functionNamesShouldSayWhatTheyDo(AndParameterNamesShouldReflectWhyTheyAreNeededByTheFunction)! @noelweichbrodt A great example is the terrible Selenium [...]]]></description>
			<content:encoded><![CDATA[<br/><p>Anyone whom has read any of my recent code knows I love lexical syntax. I really love it when anyone, even our HTML designers, can read our code and understand exactly what is going on. I’m not the only one either.</p>
<blockquote><p>@MarkBorcherding amen, fellow believer in functionNamesShouldSayWhatTheyDo(AndParameterNamesShouldReflectWhyTheyAreNeededByTheFunction)!</p>
<p><a href="mailto:n@noelweichbrodt">@noelweichbrodt</a></p>
</blockquote>
<p>A great example is the terrible Selenium API. It is confusing to even me, at first…only for a second. Take a look at the following example.</p>
<pre class="c#" name="code">_selenium.Open(&quot;some.url&quot;);
_selenium.Type(&quot;css=id$=_username&quot;,&quot;homer&quot;);
_selenium.Type(&quot;css=id$=_password&quot;,&quot;beer.is.yummy&quot;);
_selenium.Click(&quot;css=id$=_submit&quot;,&quot;LoginButton&quot;);
_selenium.WaitForPageToLoad(&quot;30000&quot;)
Assert.Equal(&quot;Homer Simpson&quot;,_selenium.GetText(&quot;css=id$=_userFullName&quot;));
</pre>
<p>&#160;</p>
<p>Now that&#8217;s not terrible. I would even lean to say anyone would know what that does, but what is the “css=id$=_username”? That looks goofy.&#160; Why do we do that? Take a look at our extensions on top of the Selenium API.</p>
<pre class="c#" name="code">_theBrowser.Types(&quot;Homer&quot;).IntoAspNetControl(&quot;username&quot;);
_theBrowser.Types(&quot;beer.is.yummy&quot;).IntoAspNetControl(&quot;password&quot;);
_theBrowser.ClicksOnAspNetControl(&quot;LoginButton&quot;);
_theBrowser.WaitsForThePageToLoad();
&quot;userFullName&quot;.AspNetControl().TextIn(_theBrowser).ShouldBe(&quot;Homer Simpson&quot;);</pre>
<p>&#160;</p>
<p>It wouldn&#8217;t be hard to argue the second example is not much more clear. You don’t have to remember that CSS selector or why we did the “$=_” instead of just “=”. Overall, I’m pretty happy with our API. There is a valid argument that this syntax will take time to learn since any developer reading it will have zero experience with it or know what calls are available, but over time, I think the benefit of its readability out weight its learning curve.</p>
<p>So here is where I am today. I don’t like the following code.</p>
<pre class="html" name="code">&lt;input
    type=&quot;text&quot;
    id=&quot;&lt;%=Html.IdFor(x=&gt;x.CustomDomainName) %&gt;&quot;
    style='&lt;%= !Model.HasCustomDomainName ? string.Empty : &quot;display:none&quot; %&gt;'
    /&gt;</pre>
<p>&#160;</p>
<p>It’s a pretty typical ternary operator. In this case though, I have to explain to our designers what that actually means and how to read it. I’m really tempted to create the extension methods I need to have this syntax.</p>
<pre class="html" name="code">&lt;input
    type=&quot;text&quot;
    id=&quot;&lt;%=Html.IdFor(x=&gt;x.CustomDomainName) %&gt;&quot;
    style='&lt;%= Model.HasCustomDomainName.IsFalse().Then(()=&gt;&quot;display:none&quot;) %&gt;'
    /&gt;</pre>
<p>&#160;</p>
<p>Again, much more clear, but it feels like I’m starting to abuse the extension methods and making a mess of the language…but it reads so much nicer.</p>
]]></content:encoded>
			<wfw:commentRss>http://fooberry.com/2010/04/16/can-you-be-too-lexical-in-your-syntax/feed/</wfw:commentRss>
		<slash:comments>0</slash:comments>
		</item>
		<item>
		<title>Missing PK&#8217;s and LINQ to SQL</title>
		<link>http://fooberry.com/2010/04/05/missing-pks-and-linq-to-sql/</link>
		<comments>http://fooberry.com/2010/04/05/missing-pks-and-linq-to-sql/#comments</comments>
		<pubDate>Mon, 05 Apr 2010 21:40:39 +0000</pubDate>
		<dc:creator>mark</dc:creator>
				<category><![CDATA[Web Development]]></category>
		<category><![CDATA[LINQ]]></category>
		<category><![CDATA[SQL]]></category>

		<guid isPermaLink="false">http://fooberry.com/2010/04/05/missing-pks-and-linq-to-sql/</guid>
		<description><![CDATA[<br/>Let’s say you were designing a tool to generate code from a diagram. If you were try to generate code for a situation where you expect there to be a primary key on a table, and there isn’t, would you: a) assume you don’t need the PK and work around it. b) throw an error [...]]]></description>
			<content:encoded><![CDATA[<br/><p><a href="http://www.flickr.com/photos/blakewest/3084965561/"><img style="margin: 0px 0px 0px 5px; display: inline" align="right" src="http://farm4.static.flickr.com/3204/3084965561_e64644e3b4_m.jpg" /></a>Let’s say you were designing a tool to generate code from a diagram. If you were try to generate code for a situation where you expect there to be a primary key on a table, and there isn’t, would you:</p>
<p> a) assume you don’t need the PK and work around it. </p>
<p>b) throw an error dialog to the screen with a nice error message</p>
<p>c) just skip generating the functionality they were expecting and go on like they really never needed it</p>
<p>If you were the LINQ to SQL team, you would have picked “c”. I realize tables need PK’s and that trying to find an row when there is no PK might be a tad difficult, but at the same time a little help would be nice. A simple dialog “No PK found on table Moron” would have been all I needed.</p>
]]></content:encoded>
			<wfw:commentRss>http://fooberry.com/2010/04/05/missing-pks-and-linq-to-sql/feed/</wfw:commentRss>
		<slash:comments>0</slash:comments>
		</item>
		<item>
		<title>Routing Newbie Mistake</title>
		<link>http://fooberry.com/2010/04/01/routing-newbie-mistake/</link>
		<comments>http://fooberry.com/2010/04/01/routing-newbie-mistake/#comments</comments>
		<pubDate>Thu, 01 Apr 2010 18:35:54 +0000</pubDate>
		<dc:creator>mark</dc:creator>
				<category><![CDATA[.Net]]></category>
		<category><![CDATA[Web Development]]></category>
		<category><![CDATA[MVC]]></category>
		<category><![CDATA[web]]></category>

		<guid isPermaLink="false">http://fooberry.com/2010/04/01/routing-newbie-mistake/</guid>
		<description><![CDATA[<br/>So I’m a n00b in some areas and it is painful finding this out sometimes. I spent most of the morning trying to figure out why my ASP.Net Web Site application wasn’t routing to my MVC controller that is inside of my ASP.Net MVC Area. Granted, that is a weird setup so there are a [...]]]></description>
			<content:encoded><![CDATA[<br/><p><a href="http://www.flickr.com/photos/candiedwomanire/3397197237/"><img style="border-right-width: 0px; display: inline; border-top-width: 0px; border-bottom-width: 0px; margin-left: 0px; border-left-width: 0px; margin-right: 0px" title="008" border="0" alt="008" align="right" src="http://farm4.static.flickr.com/3605/3397197237_543c57dea8_m.jpg" width="240" height="240" /></a>So I’m a n00b in some areas and it is painful finding this out sometimes. I spent most of the morning trying to figure out why my ASP.Net Web Site application wasn’t routing to my MVC controller that is inside of my ASP.Net MVC Area. </p>
<p>Granted, that is a weird setup so there are a lot of things I thought could possibly go wrong. The real reason was embarrassingly obvious, but not embarrassing enough that I wouldn’t post it for the world to see. </p>
<p>What do you see wrong with this route:</p>
<pre class="c#" name="code">context.MapRoute(
    &quot;Default Route&quot;,
    &quot;ServerManagement/{controller}/{action}/{id}&quot;,
    new {   controller = &quot;farms&quot;,
            action = &quot;index&quot;
        });</pre>
<p>Give up? You <em>have</em> to give a default value if you have a placeholder in the route. In this case we have “/{id}” in the route, but we never a default value for the id. The following route worked fine. </p>
<pre class="c#" name="code">context.MapRoute(
    &quot;Default Route&quot;,
    &quot;ServerManagement/{controller}/{action}/{id}&quot;,
     new {   controller = &quot;Farms&quot;,
             action = &quot;index&quot;,
             id=&quot;&quot;
         });</pre>
<p>Lesson learned!</p>
]]></content:encoded>
			<wfw:commentRss>http://fooberry.com/2010/04/01/routing-newbie-mistake/feed/</wfw:commentRss>
		<slash:comments>2</slash:comments>
		</item>
		<item>
		<title>Fixing 500.22 Error Code 0&#215;80070032</title>
		<link>http://fooberry.com/2010/04/01/fixing-500-22-error-code-0x80070032/</link>
		<comments>http://fooberry.com/2010/04/01/fixing-500-22-error-code-0x80070032/#comments</comments>
		<pubDate>Thu, 01 Apr 2010 15:18:39 +0000</pubDate>
		<dc:creator>mark</dc:creator>
				<category><![CDATA[.Net]]></category>
		<category><![CDATA[Web Development]]></category>

		<guid isPermaLink="false">http://fooberry.com/2010/04/01/fixing-500-22-error-code-0x80070032/</guid>
		<description><![CDATA[<br/>It’s nice when fixing a problem is easy.&#160; It’s nice when you scratch your head for a bit and then smack your forehead because someone in front of you laid out exactly what to do, and exactly what needs to be done.&#160; I just had such a moment. While working MVC into out existing ASP.Net [...]]]></description>
			<content:encoded><![CDATA[<br/><p><a href="http://www.flickr.com/photos/civisi/3158222539/"><img style="border-right-width: 0px; margin: 0px 10px 0px 0px; display: inline; border-top-width: 0px; border-bottom-width: 0px; border-left-width: 0px" title="012" border="0" alt="012" align="left" src="http://farm4.static.flickr.com/3093/3158222539_e4603f2446_m.jpg" width="240" height="161" /></a> It’s nice when fixing a problem is easy.&#160; It’s nice when you scratch your head for a bit and then smack your forehead because someone in front of you laid out exactly what to do, and exactly what needs to be done.&#160; I just had such a moment. </p>
<p>While working MVC into out existing ASP.Net Web Site project we hit, what we thought was a brick wall. </p>
<pre>HTTP Error 500.22 - Internal Server Error
An ASP.NET setting has been detected that does not apply in Integrated managed pipeline mode.</pre>
<p>&#160;</p>
<p>Well the Visual Studio engineers deserve a hand for helping me get this going.&#160; After spending a minute looking into the web.config to find out what was wrong, I ran into this little bit of commented out configuration.</p>
<pre class="xml" name="code">&lt;!--
        The system.webServer section is required for running ASP.NET AJAX under Internet
        Information Services 7.0.  It is not necessary for previous version of IIS.

	&lt;system.webServer&gt;

        ...then some more config</pre>
<p>&#160;</p>
<p>That is exactly what was needed to take us into integrated mode in IIS, which is needed for MVC. </p>
]]></content:encoded>
			<wfw:commentRss>http://fooberry.com/2010/04/01/fixing-500-22-error-code-0x80070032/feed/</wfw:commentRss>
		<slash:comments>0</slash:comments>
		</item>
		<item>
		<title>Sharing master pages between WebForms and MVC</title>
		<link>http://fooberry.com/2010/03/29/sharing-master-pages-between-webforms-and-mvc/</link>
		<comments>http://fooberry.com/2010/03/29/sharing-master-pages-between-webforms-and-mvc/#comments</comments>
		<pubDate>Mon, 29 Mar 2010 21:55:15 +0000</pubDate>
		<dc:creator>mark</dc:creator>
				<category><![CDATA[.Net]]></category>
		<category><![CDATA[Web Development]]></category>
		<category><![CDATA[master page]]></category>
		<category><![CDATA[MVC]]></category>
		<category><![CDATA[web]]></category>
		<category><![CDATA[WebForms]]></category>

		<guid isPermaLink="false">http://fooberry.com/2010/03/29/sharing-master-pages-between-webforms-and-mvc/</guid>
		<description><![CDATA[<br/>Let’s face it. Everyone loves MVC. At least all the web purists love it. It’s clean, straight forward, and very testable. But let’s also face it. We have a huge investment in WebForms. I mean up until now, 100% of the stuff we built was WebForms, include 100% of the master pages. These pages govern [...]]]></description>
			<content:encoded><![CDATA[<br/><p>Let’s face it. Everyone loves MVC. At least all the web purists love it. It’s clean, straight forward, and very testable. But let’s also face it. We have a huge investment in WebForms. I mean up until now, 100% of the stuff we built was WebForms, include 100% of the master pages. </p>
<p>These pages govern how&#160; the entire site looks and a wee bit of its functionality. </p>
<p><a href="http://fooberry.com/wp-content/uploads/2010/03/a.png"><img style="border-right-width: 0px; display: inline; border-top-width: 0px; border-bottom-width: 0px; border-left-width: 0px" title="a" border="0" alt="a" src="http://fooberry.com/wp-content/uploads/2010/03/a_thumb.png" width="293" height="250" /></a> </p>
<p>It would be a real shame if we had to start being less DRY and copy all that markup, in potentially many files, to new, MVC master pages. Luckily, you don’t.</p>
<p><strong>Let me stop right there</strong>. Technically, no, you don’t. Mvc’s <a href="http://msdn.microsoft.com/en-us/library/system.web.mvc.viewmasterpage.aspx">ViewMasterPage</a> (VMP) inherits from <a href="http://msdn.microsoft.com/en-us/library/system.web.ui.masterpage.aspx">MasterPage</a> (MP), so you can just tell your VMP to use the MP you want and it will work, <strong>unless you have the single line I hate more than any other lines in your MP.</strong></p>
<pre class="html" name="code">&lt;form id=”Form1” runat=”server”&gt;</pre>
<p>&#160;</p>
<p>So this single line blows the possibility of using the master page as a VMP out of the water. No problem right, include that in a nested MP and put that runat=”server” around the content place holder, right?</p>
<p><a href="http://fooberry.com/wp-content/uploads/2010/03/a_3.png"><img style="border-right-width: 0px; display: inline; border-top-width: 0px; border-bottom-width: 0px; border-left-width: 0px" title="a_3" border="0" alt="a_3" src="http://fooberry.com/wp-content/uploads/2010/03/a_3_thumb.png" width="489" height="474" /></a> </p>
<p>That’s nice and all, but all those other bit out side of the WebForms specific master page needs to be inside that stupid form.</p>
<p><a href="http://fooberry.com/wp-content/uploads/2010/03/image.png"><img style="border-right-width: 0px; display: inline; border-top-width: 0px; border-bottom-width: 0px; border-left-width: 0px" title="image" border="0" alt="image" src="http://fooberry.com/wp-content/uploads/2010/03/image_thumb.png" width="605" height="271" /></a> </p>
</p>
<p>Uh oh! No way around that one! Either move the run at server form outside or convert those controls. I’d vote for convert the controls. </p>
<p>OK, so how about just use partial views and HtmlHelpers. That sounds like a good idea. Here’s another problem.</p>
<pre class="html" name="code">&lt;%= Html.MyMenu() %&gt;</pre>
<p>&#160;</p>
<p>System.Web.UI.MasterPage does not have a HtmlHelper attribute where we get all those nice HtmlHelper Extensions. What about just creating one and using it?</p>
<pre class="html" name="code">&lt;%= new HtmlHelper(null,null).MyMenu() %&gt;</pre>
<p>&#160;</p>
<p>Great! That compiles, but don’t get too excited. It doesn’t run. We can’t just pass null into HtmlHelper. We can new up the first parameter and create our own custom implementation of the second and it does work. </p>
<pre class="html" name="code">&lt;%= new HtmlHelper(new ViewContext(), new FakeViewDataContainer).MyMenu() %&gt;</pre>
<p>&#160;</p>
<p>That looks nasty too, but since that is my own customer helper extension, when not just call into that directly.</p>
<pre class="html" name="code">&lt;%= MyMenuHelper.MyMenu(null) %&gt;</pre>
<p>&#160;</p>
<p>That’s better, and since we aren’t using the HtmlHelper at all, we can clean up the syntax just a bit.</p>
<pre class="html" name="code">&lt;%= MyMenuHelper.CreateMenu() %&gt;</pre>
<p>&#160;</p>
<p>I can live with that, but if we ever need to do anything complicated that requires view data or other information to be passed along, we’re in a nasty situation. This works for us for now, so we’re going to ride this idea for a little longer and see how it goes. </p>
<p>Eventually all those WebForms pages will be moved over to MVC and this won’t be an issue. We’ll have <em>only</em> the MVC master page and everything will be simple. </p>
]]></content:encoded>
			<wfw:commentRss>http://fooberry.com/2010/03/29/sharing-master-pages-between-webforms-and-mvc/feed/</wfw:commentRss>
		<slash:comments>0</slash:comments>
		</item>
		<item>
		<title>It&#8217;s all about the plug-ins</title>
		<link>http://fooberry.com/2010/03/24/its-all-about-the-plug-ins/</link>
		<comments>http://fooberry.com/2010/03/24/its-all-about-the-plug-ins/#comments</comments>
		<pubDate>Wed, 24 Mar 2010 21:23:59 +0000</pubDate>
		<dc:creator>mark</dc:creator>
				<category><![CDATA[Web Development]]></category>
		<category><![CDATA[jQuery]]></category>

		<guid isPermaLink="false">http://fooberry.com/2010/03/24/its-all-about-the-plug-ins/</guid>
		<description><![CDATA[<br/>Let’s face it. jQuery has made writing JavaScript cool and fun. JavaScript had a bad reputation in my world for a long time, and for no really good reason. JavaScript is an amazing language. It’s the crappy compatibility browser implementation of that really sucks. Anyway, I’m digressing already. We write a lot of JavaScript to [...]]]></description>
			<content:encoded><![CDATA[<br/><p>Let’s face it. jQuery has made writing JavaScript cool and fun. JavaScript had a bad reputation in my world for a long time, and for no really good reason. JavaScript is an amazing language. It’s the crappy compatibility browser implementation of that really sucks. Anyway, I’m digressing already.</p>
<p>We write a lot of JavaScript to make the UI snazzy, attractive, quick and easy to use. I’m sure we all write a lot of a JavaScript. I’m sure we all have tons of JS files sitting around and we include a handful of them on each page, mix and match, pick and choose. What a mess!</p>
<p>Besides the nightmare of having to know which files to include, on which pages, this method is also a performance drag. Each page needs to request 15 to 20 JS files. Sure the page browser is going to cache some of them, but we still pay for the expense in some way or another.</p>
<p>In addition to the performance problem, there is a deployment headache where we have to minify 30 different files. Sure we could script that, but still sounds like a headache.</p>
<p>So how do I have only one JS file (minus the core jQuery stuff I pull from a CDN)? Plug-ins! Every bit of JS I use on my pages is wrapped in a jQuery plug-in. Of course there is a tiny bit of JS that invokes the plug-in that is either directly on the page or in its own JS file, but in comparison of lines, it is statistically insignificant.</p>
<p>What this lets me do is combine every JS file I have into a single giant JS file, minify that, and link it once. Everything I could possibly do is pulled down in that one file, one time, via one request.</p>
<p>I’m sure we all have JS like the following.</p>
<pre class="javascript" name="code">$().ready(function(){
  $(&quot;.myButton&quot;).click(function(){
      alert(&quot;You clicked me.&quot;);
      $(&quot;.message&quot;)
           .css(&quot;color&quot;,&quot;blue&quot;)
           .text(&quot;my message is blue&quot;);
  });

});</pre>
<p>Pretty typical jQuery. Everyone likes blue messages. What I don&#8217;t like about this script is I can&#8217;t drop it on the page where I don&#8217;t want that to happen. If it&#8217;s in my master JS file, every page is going to get this action, and that&#8217;s probably not what I want. </p>
<p>So let&#8217;s make a plug-in for it. This is my basic pattern for creating a jQuery plug-in.</p>
<pre class="javascript" name="code">(function($){
  $.fn.messageForm = function(options){
    var defaults = {};
    var params = $.extend(options, defaults);    

    // do stuff here

    return this;
  }
})(jQuery);</pre>
<p>There are a lot of websites out there that can explain the pattern better than I can, but the basics are simple. </p>
<p>First, we create an anonymous function with a $ parameter and pass the jQuery object to it. This avoids any naming conflicts we might have with $ and ensures we can use it in our plug-in.</p>
<p>We setup some default values, although empty are at this point, and then merge them with the options that are passed into the call to the plug-in. This lets us easily parameterize the call without adding loads of new variables. </p>
<p>Lastly we return the jQuery object the plug-in was called on so we can allow chaining of other plug-ins.</p>
<p>Throwing in the custom code and we end up with this.</p>
<pre class="javascript" name="code">(function($){
  $.fn.messageForm = function(options){
    var defaults = {
          buttonSelector : &quot;.myButton&quot;,
          messageSelector : &quot;.message&quot;,
          messageColor : &quot;blue&quot;
        };
    var params = $.extend(options, defaults);
    var $this = this;

    function buttonClick(){
       alert(&quot;You clicked me.&quot;);
       $(params.messageSelector,$this)
         .css(&quot;color&quot;,params.messageColor)
         .text(&quot;my message is &quot; + params.messageColor);
    }   

    $(params.buttonSelector,$this).click(buttonClick);

    return this;
  }
})(jQuery);</pre>
<p>&#160;</p>
<p>What I can do now is put this JS in a file next to dozens of other similar plug-ins and serve it up. We still have to call it from somewhere though. </p>
<pre class="javascript" name="code">$().ready(function(){
   $(&quot;body&quot;).messageForm();
});</pre>
<p>I know the purists out there would scream, but I don’t mind tacking this on the bottom of my HTML. You can pass some parameters to it as well.</p>
<pre class="javascript" name="code">$().ready(function(){
   $(&quot;body&quot;).messageForm({messageColor:&quot;red&quot;});
});</pre>
]]></content:encoded>
			<wfw:commentRss>http://fooberry.com/2010/03/24/its-all-about-the-plug-ins/feed/</wfw:commentRss>
		<slash:comments>0</slash:comments>
		</item>
		<item>
		<title>Package and Compress with Google Closure via MSBuild</title>
		<link>http://fooberry.com/2010/02/18/package-and-compress-with-google-closure-via-msbuild/</link>
		<comments>http://fooberry.com/2010/02/18/package-and-compress-with-google-closure-via-msbuild/#comments</comments>
		<pubDate>Thu, 18 Feb 2010 15:38:21 +0000</pubDate>
		<dc:creator>mark</dc:creator>
				<category><![CDATA[Visual Studio]]></category>
		<category><![CDATA[Web Development]]></category>
		<category><![CDATA[Visual Studio 2010]]></category>
		<category><![CDATA[web]]></category>

		<guid isPermaLink="false">http://fooberry.com/2010/02/18/package-and-compress-with-google-closure-via-msbuild/</guid>
		<description><![CDATA[<br/>The Problem So our problem is we are building a library of JavaScript files that we use all over the place. I’ve been pushing, on the project where I’m the sole developer, to wrote 99% of the JavaScript as jQuery plugins. This works great because we can compile that 99% into a single file, or [...]]]></description>
			<content:encoded><![CDATA[<br/><h1>The Problem</h1>
<p>So our problem is we are building a library of JavaScript files that we use all over the place. I’ve been pushing, on the project where I’m the sole developer, to wrote 99% of the JavaScript as jQuery plugins. This works great because we can compile that 99% into a single file, or to reverse the perspective, we can split that huge file into smaller, more manageable and logical files. </p>
<p>For example, we have a file called jquery.mycompany.core.js which does a variety of mundane tasks. The file is huge, but unlike C# code, it’s huge for a reason. We want the browser to make as few requests as possible so there is less handshaking, less overhead, and faster page loads. </p>
<p>Previously we had several files and we manually combine them to one and then run it through some online compressing tool once we get close to production. This <em>technically </em>worked, but changes found a way of making their way into the huge file and the segmented files become out of date and obsolete.</p>
<h1>The Hack</h1>
<p>So here was my plan, take a list of file, concatenate them, and then compress them. Simple enough right? Well, it actually isn’t that bad</p>
<pre class="xml" name="code">  &lt;ItemGroup&gt;
    &lt;JavaScriptFiles  Include=&quot;scripts\jQueryPlugins\Custom\core\**\*.js&quot; /&gt;
  &lt;/ItemGroup&gt;

  &lt;Target Name=&quot;Default&quot; DependsOnTargets=&quot;BuildAndCompressOrdersJavaScript&quot;&gt;

  &lt;/Target&gt;

  &lt;Target Name=&quot;BuildAndCompressJavaScript&quot;&gt;
    &lt;ReadLinesFromFile File=&quot;%(JavaScriptFiles.Identity)&quot; &gt;
      &lt;Output
          TaskParameter=&quot;Lines&quot;
          ItemName=&quot;lines&quot;/&gt;
    &lt;/ReadLinesFromFile&gt;

    &lt;WriteLinesToFile File=&quot;scripts\jquery.mycompany.core.uncompressed.js&quot;
                      Lines=&quot;@(Lines)&quot;
                      Overwrite=&quot;true&quot; /&gt;

  &lt;/Target&gt;</pre>
<p>Not so bad right? Lastly, just add a bit of Google Closure. I just shell out and run it from the command line here.</p>
<pre class="xml" name="code">&lt;Exec Command='java -jar ..\compiler.jar --js scpts\jq.myco.core.un.js &gt; scpts\jq.myco.core.js' /&gt;</pre>
<p>I shortened some paths and filenames there so it would fit better in the blog’s column, but you get the idea. </p>
<p>I threw this into a post build event even though I could have added it to the csproj directly. The post build event was easier and it avoids those nasty warnings when you open the csproj. </p>
<p>The only issue I see with it right now is it is not as portable as I would like it to be. You pretty much company and past the build steps if you need to use it again. This is my major gripe about MSBuild. It’s difficult to create <em>functions</em> you repeat in the build. </p>
<p>This is a total cheapskate way to accomplish this task. I should be creating a nice parameterized MSBuild task, or even better, dump MSBuild for Rake. MSBuild and I acknowledge we are never going to be friends and have come to a professional arrangement. MSBuild does nothing to accommodate me and I do as little as possible with it.</p>
]]></content:encoded>
			<wfw:commentRss>http://fooberry.com/2010/02/18/package-and-compress-with-google-closure-via-msbuild/feed/</wfw:commentRss>
		<slash:comments>0</slash:comments>
		</item>
	</channel>
</rss>
