<?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"
	>

<channel>
	<title>Dragons in the Algorithm</title>
	<atom:link href="http://mcherm.com/feed" rel="self" type="application/rss+xml" />
	<link>http://mcherm.com</link>
	<description>Adventures in Programming</description>
	<pubDate>Thu, 04 Dec 2008 18:13:09 +0000</pubDate>
	<generator>http://wordpress.org/?v=2.6.5</generator>
	<language>en</language>
			<item>
		<title>My Security Nightmare</title>
		<link>http://mcherm.com/permalinks/1/my-security-nightmare</link>
		<comments>http://mcherm.com/permalinks/1/my-security-nightmare#comments</comments>
		<pubDate>Thu, 04 Dec 2008 18:13:09 +0000</pubDate>
		<dc:creator>mcherm</dc:creator>
		
		<category><![CDATA[Programming]]></category>

		<guid isPermaLink="false">http://mcherm.com/?p=210</guid>
		<description><![CDATA[As Willie Sutton didn&#8217;t say, &#8220;I rob banks because that&#8217;s where the money is.&#8221;
I work for a bank, and so I worry more about security than most programmers. After all, if a hacker were were truly motivated and competent who would they pick to go after? Probably a bank (the other good option is political [...]]]></description>
			<content:encoded><![CDATA[<p>As Willie Sutton <a title="&quot;Because that's where the money is&quot;" href="http://www.banking.com/ABA/profile_0397.htm">didn&#8217;t say</a>, &#8220;I rob banks because that&#8217;s where the money is.&#8221;</p>
<p>I work for a bank, and so I worry more about security than most programmers. After all, if a hacker were were truly motivated and competent who would they pick to go after? Probably a bank (the other good option is political or corporate espionage). Recently I saw two security-related stories which, when combined, form my ultimate nightmare: an effective attack for which I cannot imagine a possible defense.<span id="more-210"></span></p>
<p>The first story was <a href="http://www.usenix.org/event/leet08/tech/full_papers/king/king.pdf">a research article on microchip design</a> written by some researchers at the University of Illinois at Urbana-Champaign. The researchers asked an interesting question: suppose a smart, competent attacker were to make some changes to the design of a CPU: could they make the CPU vulnerable to some kind of hacking attack without making it obvious? It is not a question I had ever heard before: I am used to thinking of the hardware as fixed and looking for vulnerabilities in the software instead.</p>
<p><a href="http://www.flickr.com/photos/batterypower/470651580/"><img class="size-full wp-image-213 alignright" style="margin: 4px;" title="Circuitry" src="http://mcherm.com/blog/wp-content/uploads/2008/11/circuitry.jpg" alt="" width="240" height="160" /></a>The answer was a resounding &#8220;Yes!&#8221;. They came up with two attacks: each requiring around 1000 extra logic gates, on a chip that has around 1.8 million gates! One attack allowed a specially designed program to read anything in memory (including things like passwords), the other allowed extra programs to run that were invisible to the rest of the computer. Each could be activated by using a special &#8220;trigger phrase&#8221; &#8212; which could even be delivered by just sending a packet to the machine (you don&#8217;t necessarily have to hack into the machine to activate it). Once activated, the code you run can be completely invisible to the operating system, and can override any software running on the computer. It could collect passwords (allowing a conventional hack), modify data, replace programs with versions that have backdoors, and if done by a competent hacker, all of this would be impossible to detect.</p>
<p>An undetectable and unstoppable vulnerability: it&#8217;s a good thing that CPUs cost millions of dollars to manufacture (even for a very small run) and that we buy our computers from reputable companies like Dell who get their chips from reputable companies like Intel and AMG.</p>
<p><img class="alignleft size-medium wp-image-214" style="margin: 4px;" title="Hacked Scanner" src="http://mcherm.com/blog/wp-content/uploads/2008/11/hacked_scanner-300x244.jpg" alt="" width="300" height="244" />The second story is about a large multinational fraud that was being executed throughout parts of Europe. Over a period of months, MasterCard had noticed a suspicious pattern of credit card fraud throughout Northern England. Someone technically sophisticated was making fake duplicates of real credit cards, but the investigators could not determine how the fraudsters were obtaining the data. By <a href="http://online.wsj.com/article/SB122366999999723871.html">one account</a>, the break in the case came when a security guard at a grocery store noticed a burst of static on his cell phone; by <a href="http://www.telegraph.co.uk/news/newstopics/politics/lawandorder/3173346/Chip-and-pin-scam-has-netted-millions-from-British-shoppers.html">another account</a> the break came when someone duplicated a card that had only ever been used once. Either way, someone took apart one of the store scanners and discovered that it had an extra payload.</p>
<p>Someone had built in a device which stored data on a small portion of the cards that got scanned. Then once a day it would place a wireless call to someplace in Pakistan to drop off the data and pick up new instructions. Presumably from there an international criminal ring produced the fake cards.</p>
<p>Of course the fraud groups at MasterCard are well aware of this kind of scam, and they correlate stolen card numbers back to what stores and what devices those cards had been used in previously. Had it been just this one scanner with modified hardware, the folks at MasterCard would have identified it almost immediately. Scotland Yard noticed that the scanner with the bug in it weighed an extra 4 ounces. Soon investigators with scales were speeding to stores throughout Europe, checking for card-readers that weighed 4 oz more than they should. They found hundreds of compromised machines - even in major retailers like Wal-Mart, and there was no sign of tampering.</p>
<p>It turns out that the bugs were inserted not by agents in the store, but by someone in a factory in China back when the devices were first being manufactured. The criminals were quite smart in how they leveraged the information: never stealing so much from one site that it would give away the game. And they made off with at least 50-100 thousand dollars, perhaps more. No matter how careful the people at the stores were, they had no chance against devices that where compromised in the supply chain before the store ever received it.</p>
<p>. . .</p>
<p>So here is my nightmare senario: someone decides to target a bank (&#8217;cause that&#8217;s where the money is). They manufacture chips that allow them access below the operating system level, which is immune to any attempt to use virus checking, encryption or other such defenses. And they insert these into the supply chain somehow (how big a bribe would it take to get a couple of hours unobserved in a Dell warehouse?). Then they get competent programmers to slowly siphon off cash at levels that won&#8217;t be noticed. Sure, the costs of such a scheme probably run in the millions of dollars, but organized crime in places like Russia certainly have access to this kind of money.</p>
<p>And I cannot imagine anything that I, as a technical expert at a bank with a concern for security, could do to prevent this attack.</p>
]]></content:encoded>
			<wfw:commentRss>http://mcherm.com/permalinks/1/my-security-nightmare/feed</wfw:commentRss>
		</item>
		<item>
		<title>Election Guide, Nov 2008</title>
		<link>http://mcherm.com/permalinks/1/election-guide-nov-2008</link>
		<comments>http://mcherm.com/permalinks/1/election-guide-nov-2008#comments</comments>
		<pubDate>Sun, 02 Nov 2008 01:15:45 +0000</pubDate>
		<dc:creator>mcherm</dc:creator>
		
		<category><![CDATA[Politics]]></category>

		<guid isPermaLink="false">http://mcherm.com/?p=189</guid>
		<description><![CDATA[Here is a description of all items that will be on my local ballot for this upcoming election, along with my own personal recommendations on how I expect to vote, and why. For quite some time now, I&#8217;ve done this sort of research before elections; this time I decided to write it out. If anyone [...]]]></description>
			<content:encoded><![CDATA[<p>Here is a description of all items that will be on my local ballot for this upcoming election, along with my own personal recommendations on how I expect to vote, and why. For quite some time now, I&#8217;ve done this sort of research before elections; this time I decided to write it out.<span id="more-189"></span> If anyone thinks that my advice or some of the research I have done is useful, please feel free to consider it as one component in your own decision about how to vote. Whether you agree with my positions or not, please <em>do</em> vote.</p>
<p><em><strong>WARNING: Some local district lines were moved at the last minute (AFTER the primary). To verify your proper polling place, use <a href="https://www.pavoterservices.state.pa.us/Pages/PollingPlaceInfo.aspx">this link</a>. </strong></em></p>
<p><strong>President of the United States:</strong></p>
<ul>
<li><a href="http://www.bobbarr2008.com/home/skip/?s=0618">Bob Barr/Wayne A. Root</a> (Libertarian)</li>
<li><a href="http://www.johnmccain.com/">John McCain/Sarah Palin</a> (Republican)</li>
<li><a href="http://www.votenader.org/index.html">Ralph Nader/Matt Gonzales</a> (Independent)</li>
<li><a href="http://www.barackobama.com/index.php">Barack Obama/Joe Biden</a> (Democrat)</li>
</ul>
<p>Given the billion or so that has been spent by the candidates plus untold more spent by news media, you have almost certainly made up your mind already, and my opinion here means little. Suffice it to say, that I have great respect for John McCain &#8212; he is a man I would have voted for in a different election. But the positions he has taken to satisfy the Republican base disturb me, and his selection of an abundantly unqualified candidate for vice-president is unfortunate. On the other side, Barack Obama is <em>exactly</em> what we need. He is a charismatic leader, with an interest in bringing the country together. At the same time, his positions on many issues are much closer to mine than most politicians. He gives every indication of being a highly intelligent and thoughtful person &#8212; even in the book which he wrote <em>before</em> he considered entering politics. And his background as a community organizer and a constitutional lawyer are just what this country needs if we are to have any hope of recovering from the appalling damage of the past 8 years. I have contribute time and money to Obama&#8217;s campaign, and I will be out working for him on election day.</p>
<p><strong>US House of Representatives</strong></p>
<ul>
<li><a href="http://www.sestakforcongress.com/">Joe Sestak</a> (Democrat)</li>
<li><a href="http://www.craigwilliamsforcongress.com/">W. Craig Williams</a> (Republican)</li>
</ul>
<p>Joe Sestak is a former senior military leader (3-star admiral!) who has been serving for a term as a Democratic representative from a Republican-majority district. His stated priorities for this election are (1) economics, (2) health system, (3) economics, (4) energy (he wants to promote alternate energy AND drill more oil) and (5) defense. Frankly, I like this set of priorities. I have met Joe Sestak and I find that although I definitely do NOT agree with him on many issues, he was reasonable and thoughtful, had real reasons behind his choices, and was willing to explain those reasons to a constituent.</p>
<p>Craig Williams is his Republican challenger. Craig&#8217;s main points seem to be (1) Sara Palin endorses me, (2) we need to drill more oil to solve the energy crisis, (3) Government is too big and should regulate less &#8212; for instance, they shouldn&#8217;t allow airline traffic over our district [no... this doesn't make sense], (4) Health care should be fixed by privatizing it [yes, that IS what we already have]; specifically we should provide prescription drugs for senior citizens, &#8220;emphasize personal responsibility&#8221;, and put an end to &#8220;frivolous lawsuits&#8221;.</p>
<p>On the whole, Craig Williams&#8217; proposals do not even seem sensible, and Joe Sestak has proven to be quite reasonable and effective in his time so far. I intend to support Joe Sestak.</p>
<p><strong>Attorney General</strong></p>
<ul>
<li><a href="http://www.tomcorbett2008.com/">Tom Corbett</a> (Republican)</li>
<li><a href="http://www.johnmorganelli.com/">John M. Morganelli</a> (Democrat)</li>
<li><a href="http://www.rogersforattorneygeneral.org/">Marakay J. Rogers</a> (Libertarian)</li>
</ul>
<p>John Morganelli tells the League of Women Voters (and posts on his own website) that his #1 plan is to &#8220;Pass a gang statute that makes gang membership a crime so as to attack the gangs before the commit their next murder or drug deal&#8221;. Perhaps he does not quite understand what the constitutional guarantee of freedom of association means. Another proposal of his is to &#8220;Abolish parole for violent criminals.&#8221; Our prison system assigns one to serve a range of years for a crime depending on the judge and jury&#8217;s evaluation of the seriousness of the crime and on the individual&#8217;s behavior afterward. To completely ignore the latter in the name of &#8220;punishing violent criminals&#8221; is foolish and unwise.</p>
<p>Tom Corbett has been Attorney General for the past several years. As far as I can tell, all evidence suggests that he has done a reasonably good job.</p>
<p>Marakay Rogers is a bit more unusual &#8212; she has a history of running under various third parties. She has managed to get endorsements for various offices from the Libertarian party, the Green party, the Reform party and Ralph Nader. She feels evidence of racially unbalanced enforcement of the death penalty needs to be addressed. She questions Pennsylvania&#8217;s high rate of incarceration (3rd highest in the nation). She objects to the REAL ID act as violating PA constitutional privacy rights, and speaks out for the rights of immigrants.</p>
<p>I would feel very comfortable voting for Tom Corbett, who is qualified and competent. I would also feel comfortable voting for Marakay Rogers. <a href="http://grassrootspa.com/?p=12614">Polling</a> shows something in the neighborhood of 43% for Corbett to 31% for Morganelli to 3% for Marakay.</p>
<p><strong>Auditor General</strong></p>
<ul>
<li><a href="http://www.chetbeiler.com/">Chet Beiler</a> (Republican)</li>
<li><a href="http://www.lp.org/candidates/liberty-candidates-08/betsy-summers-0">Betsy Summers</a> (Libertarian)</li>
<li><a href="http://www.jackwagner.org/">Jack Wagner</a> (Democrat)</li>
</ul>
<p>Betsy Summers has not bothered to put up a website for her campaign, to populate the web page that her party provides for her, or even to answer questions for the League of Women Voters, so she is not even worthy of consideration.</p>
<p>Chet Beiler has a history as a successful businessman in a number of enterprises that he grew and ran successfully. He does not have a history of political involvement and bills himself as &#8220;not a career politician&#8221;. Jack Wagner is the currently serving Auditor General. I have read at least 5 different newspaper endorsements of Jack Wagner (I couldn&#8217;t find any newspapers endorsing Beiler). All of them said essentially the same thing: &#8220;In his current term, Jack Wagner has done audits that revealed serious issues (curiously, each newspaper seemed to list different audits) and has gone after mismanagement of funds. He should be returned to office to continue the good work.&#8221; With widespread endorsements like this, I intend to support Jack Wagner.</p>
<p><strong>State Treasurer</strong></p>
<ul>
<li><a href="http://ellis4treasurer.com/ellis/">Tom Ellis</a> (Republican)</li>
<li><a href="http://libertarianpartycandidates.us/candidates/berlie-etzel-2008-state-treasurer/">Berlie Etzel</a> (Libertarian)</li>
<li><a href="http://www.mccord2008.com/">Robert McCord</a> (Democrat)</li>
</ul>
<p>Tom Ellis failed to answer even the simplest of questions from the League of Women Voters; Berlie Etzel did that much but seems not to have a website (or event to have populated her page within her party&#8217;s site). Thus, these candidates were more difficult to research (Robert McCord has plenty of information available about himself and his positions.)</p>
<p>From what I can tell, Tom Ellis and Robert McCord have similar backgrounds. They are from the same area, both have political experience and business backgrounds, and both would be new to this office. McCord appears to have the ability to raise much more money - 23x as much - and to spend vast sums of his own money as well, but I mistrust that as an indicator in this case; I think it is likely to be due to large donors he knows rather than broad support.</p>
<p>Without any strong reason to prefer either candidate, I will probably select a candidate based on party endorsement (in my case, choosing McCord as the candidate of the Democratic party).</p>
<p><strong>State Senator</strong></p>
<ul>
<li><a href="http://www.votedaylin.com/index.html">Daylin Leach</a> (Democrat)</li>
<li><a href="http://www.lancerogers.com/">Lance Rogers</a> (Republican)</li>
</ul>
<p>Lance Rogers and Daylin Leach must have spent a fair amount of money because I got several mailings from them. Unfortunately, all of the mailings were either attack ads or responses to attack ads. The gist of it seemed to be that Rogers accuses Leach of having tried to weaken laws against drunk driving, but independent 3rd parties seem to claim that Leach was actually just changing the laws in an attempt to <em>strengthen</em> not weaken them. Frankly, I&#8217;m not impressed either way, and I wish they&#8217;d found a better way to spend their campaign dollars.</p>
<p>Rogers says his top issues are: (1) cutting government perks, (2) cutting taxes and spending, (3) fixing healthcare, (4) promoting jobs, (5) promoting green space and green construction/energy, and several others. Leach says his top issues are: (1) education, (2) environment, (3) political reform, (4) healthcare (he worked to get prescription drugs for those receiving health insurance from the state, and he works on women&#8217;s health issues).</p>
<p>On the whole, there is not a lot there on which to base a decision, but I tend to favor Leach&#8217;s approach. And I don&#8217;t like politicians who start very dirty negative campaigning (which is how independent parties characterized Rogers&#8217; mailings). So I&#8217;ll be voting for Daylin Leach.</p>
<p><strong>State House of Representatives</strong></p>
<ul>
<li><a href="http://www.haverfordtownship.com/department/division.php?fDD=2-88">Stephen D&#8217;Emilio</a> (Republican)</li>
<li><a href="http://www.votevitali.com/">Greg Vitali</a> (Democrat)</li>
</ul>
<p>Greg Vitali is a hero of mine. I still recall when the Pennsylvania legislature voted themselves a massive, undeserved and <em>blatantly unconstitutional</em> pay raise in the middle of the night. (The constitution forbids the legislature from raising its own pay during its term, so they effectively raised the amount of expenses allowed and said they wouldn&#8217;t be expecting to see any receipts.) Greg Vitali spoke out against this at the time. He spoke out so vocally that his own party stripped him of committee positions and power in an attempt to silence him &#8212; but he was not silent. Greg vitali has my vote and will continue to have my vote for a long, long time. It helps that I agree with him on many other issues, but ultimately, integrity is the most important issue for me.</p>
<p>And if you didn&#8217;t find THAT convincing enough, read <a href="http://www.delcotimes.com/articles/2008/10/09/today%27s%20stories/20158931.txt">our local newspaper&#8217;s article on the two candidates</a> (which does not endorse a candidate).</p>
<p><strong>Referendum on Bonds for Water and Sewer Improvement</strong></p>
<blockquote><p><span>Do you favor the incurring of indebtedness by the Commonwealth of $400,000,000 for grants and loans to municipalities and public utilities for the cost of all labor, materials, necessary operational machinery and equipment, lands, property, right and easements, plans and specifications, surveys, estimates of costs and revenues, prefeasibility studies, engineering and legal services and all other expenses necessary or incident to the acquisition, construction, improvement, expansion, extension, repair or rehabilitation of all or part of drinking water system, storm water, nonpoint source projects, nutrient credits and wastewater treatment system projects?</span></p></blockquote>
<p>I intend to vote &#8220;Yes&#8221; on this measure. I have read newspaper editorials both for and against the measure. It was my opinion that the &#8220;yes&#8221; editorials backed up their position with sensible arguments about the state of our water and sewer infrastructure and an analysis showing that this would not affect the state&#8217;s bond rating, while the &#8220;no&#8221; editorials backed up their position by simply saying &#8220;government spending is bad&#8230; they should take the money from cutting government waste&#8221;. But ultimately, these were not what swayed my opinion &#8212; the economy was. During a recession, governments <em>should</em> be using their creditworthiness to borrow in order to pay for public works projects. (And during boom times they should pay down debt and set up rainy-day funds.) This kind of behavior is what smooths out the extremes and restores our economic stability, from which we all benefit.</p>
]]></content:encoded>
			<wfw:commentRss>http://mcherm.com/permalinks/1/election-guide-nov-2008/feed</wfw:commentRss>
		</item>
		<item>
		<title>Separation of Concerns</title>
		<link>http://mcherm.com/permalinks/1/separation-of-concerns</link>
		<comments>http://mcherm.com/permalinks/1/separation-of-concerns#comments</comments>
		<pubDate>Mon, 27 Oct 2008 11:59:24 +0000</pubDate>
		<dc:creator>mcherm</dc:creator>
		
		<category><![CDATA[Uncategorized]]></category>

		<guid isPermaLink="false">http://mcherm.com/?p=127</guid>
		<description><![CDATA[Once upon a time (in the dark ages of web application development) we built our applications as a single monolithic Perl CGI script, or perhaps a large JSP file containing the entire application.  The code looked something like this:
costs.jsp

&#60;% Cost&#91;&#93; costs = CostHelper.calculateCosts&#40;loanData, currentDecision&#41;; %&#62;
&#60;h3&#62;Current Costs:&#60;/h3&#62;
&#60;table border=&#34;0&#34;&#62;
  &#60;tr&#62;
    &#60;th&#62;Cost&#60;/th&#62;
  [...]]]></description>
			<content:encoded><![CDATA[<p>Once upon a time (in the dark ages of web application development) we built our applications as a single monolithic Perl CGI script, or perhaps a large JSP file containing the entire application. <span id="more-127"></span> The code looked something like this:</p>
<p><strong>costs.jsp</strong></p>

<div class="wp_syntax"><div class="code"><pre class="html html" style="font-family:monospace;"><span style="color: #009900;">&lt;% Cost<span style="color: #66cc66;">&#91;</span><span style="color: #66cc66;">&#93;</span> costs <span style="color: #66cc66;">=</span> CostHelper.calculateCosts<span style="color: #66cc66;">&#40;</span>loanData, currentDecision<span style="color: #66cc66;">&#41;</span>; %&gt;</span>
<span style="color: #009900;">&lt;<span style="color: #000000; font-weight: bold;">h3</span>&gt;</span>Current Costs:<span style="color: #009900;">&lt;<span style="color: #66cc66;">/</span><span style="color: #000000; font-weight: bold;">h3</span>&gt;</span>
<span style="color: #009900;">&lt;<span style="color: #000000; font-weight: bold;">table</span> <span style="color: #000066;">border</span><span style="color: #66cc66;">=</span><span style="color: #ff0000;">&quot;0&quot;</span>&gt;</span>
  <span style="color: #009900;">&lt;<span style="color: #000000; font-weight: bold;">tr</span>&gt;</span>
    <span style="color: #009900;">&lt;<span style="color: #000000; font-weight: bold;">th</span>&gt;</span>Cost<span style="color: #009900;">&lt;<span style="color: #66cc66;">/</span><span style="color: #000000; font-weight: bold;">th</span>&gt;</span>
    <span style="color: #009900;">&lt;<span style="color: #000000; font-weight: bold;">th</span>&gt;</span>Amount<span style="color: #009900;">&lt;<span style="color: #66cc66;">/</span><span style="color: #000000; font-weight: bold;">th</span>&gt;</span>
  <span style="color: #009900;">&lt;<span style="color: #66cc66;">/</span><span style="color: #000000; font-weight: bold;">tr</span>&gt;</span>
  <span style="color: #009900;">&lt;% <span style="color: #000066;">for</span><span style="color: #66cc66;">&#40;</span>int i<span style="color: #66cc66;">=</span>0; i&lt;costs.length; i++<span style="color: #66cc66;">&#41;</span> <span style="color: #66cc66;">&#123;</span> %&gt;</span>
    <span style="color: #009900;">&lt;<span style="color: #000000; font-weight: bold;">tr</span>&gt;</span>
      <span style="color: #009900;">&lt;<span style="color: #000000; font-weight: bold;">td</span>&gt;&lt;<span style="color: #000000; font-weight: bold;">b</span>&gt;&lt;%costs<span style="color: #66cc66;">&#91;</span>i<span style="color: #66cc66;">&#93;</span>.getName<span style="color: #66cc66;">&#40;</span><span style="color: #66cc66;">&#41;</span>%&gt;&lt;<span style="color: #66cc66;">/</span><span style="color: #000000; font-weight: bold;">b</span>&gt;&lt;<span style="color: #66cc66;">/</span><span style="color: #000000; font-weight: bold;">td</span>&gt;</span>
      <span style="color: #009900;">&lt;<span style="color: #000000; font-weight: bold;">td</span>&gt;</span>$ <span style="color: #009900;">&lt;%costs<span style="color: #66cc66;">&#91;</span>i<span style="color: #66cc66;">&#93;</span>.getValue<span style="color: #66cc66;">&#40;</span><span style="color: #66cc66;">&#41;</span>%&gt;&lt;<span style="color: #66cc66;">/</span><span style="color: #000000; font-weight: bold;">td</span>&gt;</span>
    <span style="color: #009900;">&lt;<span style="color: #66cc66;">/</span><span style="color: #000000; font-weight: bold;">tr</span>&gt;</span>
  <span style="color: #009900;">&lt;% <span style="color: #66cc66;">&#125;</span> %&gt;</span>
<span style="color: #009900;">&lt;<span style="color: #66cc66;">/</span><span style="color: #000000; font-weight: bold;">table</span>&gt;</span>
<span style="color: #009900;">&lt;<span style="color: #000000; font-weight: bold;">p</span> <span style="color: #000066;">style</span><span style="color: #66cc66;">=</span><span style="color: #ff0000;">&quot;text-align: center; font-style: italic&quot;</span>&gt;</span>
  <span style="color: #009900;">&lt;<span style="color: #000000; font-weight: bold;">a</span> <span style="color: #000066;">href</span><span style="color: #66cc66;">=</span><span style="color: #ff0000;">&quot;costHelp.html&quot;</span> </span>
<span style="color: #009900;">      <span style="color: #000066;">onclick</span><span style="color: #66cc66;">=</span><span style="color: #ff0000;">&quot;</span>
<span style="color: #009900;">        window.open(this.href, 'Help');</span>
<span style="color: #009900;">        return false;</span>
<span style="color: #009900;">      &quot;</span></span>
<span style="color: #009900;">  &gt;</span>Explain these<span style="color: #009900;">&lt;<span style="color: #66cc66;">/</span><span style="color: #000000; font-weight: bold;">a</span>&gt;</span>
<span style="color: #009900;">&lt;<span style="color: #66cc66;">/</span><span style="color: #000000; font-weight: bold;">p</span>&gt;</span></pre></div></div>

<p>And it was confusing. But after a time we became enlightened and we realized that we should separate out the business logic from the rest of the presentation. We used tag libraries or velocity macros or any of a host of other technologies, and the code looked something like this:</p>
<p><strong>CostController.java</strong></p>

<div class="wp_syntax"><div class="code"><pre class="java java" style="font-family:monospace;">Cost<span style="color: #009900;">&#91;</span><span style="color: #009900;">&#93;</span> costs <span style="color: #339933;">=</span> CostHelper.<span style="color: #006633;">calculateCosts</span><span style="color: #009900;">&#40;</span>loanData, currentDecision<span style="color: #009900;">&#41;</span>;
modelAndView.<span style="color: #006633;">addObject</span><span style="color: #009900;">&#40;</span><span style="color: #0000ff;">&quot;costs&quot;</span>, costs<span style="color: #009900;">&#41;</span>;</pre></div></div>

<p><strong>costs.vm</strong></p>

<div class="wp_syntax"><div class="code"><pre class="html html" style="font-family:monospace;"><span style="color: #009900;">&lt;<span style="color: #000000; font-weight: bold;">h3</span>&gt;</span>Current Costs:<span style="color: #009900;">&lt;<span style="color: #66cc66;">/</span><span style="color: #000000; font-weight: bold;">h3</span>&gt;</span>
<span style="color: #009900;">&lt;<span style="color: #000000; font-weight: bold;">table</span> <span style="color: #000066;">border</span><span style="color: #66cc66;">=</span><span style="color: #ff0000;">&quot;0&quot;</span>&gt;</span>
  <span style="color: #009900;">&lt;<span style="color: #000000; font-weight: bold;">tr</span>&gt;</span>
    <span style="color: #009900;">&lt;<span style="color: #000000; font-weight: bold;">th</span>&gt;</span>Cost<span style="color: #009900;">&lt;<span style="color: #66cc66;">/</span><span style="color: #000000; font-weight: bold;">th</span>&gt;</span>
    <span style="color: #009900;">&lt;<span style="color: #000000; font-weight: bold;">th</span>&gt;</span>Amount<span style="color: #009900;">&lt;<span style="color: #66cc66;">/</span><span style="color: #000000; font-weight: bold;">th</span>&gt;</span>
  <span style="color: #009900;">&lt;<span style="color: #66cc66;">/</span><span style="color: #000000; font-weight: bold;">tr</span>&gt;</span>
  #foreach( $cost in $costs )
    <span style="color: #009900;">&lt;<span style="color: #000000; font-weight: bold;">tr</span>&gt;</span>
      <span style="color: #009900;">&lt;<span style="color: #000000; font-weight: bold;">td</span>&gt;&lt;<span style="color: #000000; font-weight: bold;">b</span>&gt;</span>$cost.name<span style="color: #009900;">&lt;<span style="color: #66cc66;">/</span><span style="color: #000000; font-weight: bold;">b</span>&gt;&lt;<span style="color: #66cc66;">/</span><span style="color: #000000; font-weight: bold;">td</span>&gt;</span>
      <span style="color: #009900;">&lt;<span style="color: #000000; font-weight: bold;">td</span>&gt;</span>$ $cost.value<span style="color: #009900;">&lt;<span style="color: #66cc66;">/</span><span style="color: #000000; font-weight: bold;">td</span>&gt;</span>
    <span style="color: #009900;">&lt;<span style="color: #66cc66;">/</span><span style="color: #000000; font-weight: bold;">tr</span>&gt;</span>
  #end
<span style="color: #009900;">&lt;<span style="color: #66cc66;">/</span><span style="color: #000000; font-weight: bold;">table</span>&gt;</span>
<span style="color: #009900;">&lt;<span style="color: #000000; font-weight: bold;">p</span> <span style="color: #000066;">style</span><span style="color: #66cc66;">=</span><span style="color: #ff0000;">&quot;text-align: center; font-style: italic&quot;</span>&gt;</span>
  <span style="color: #009900;">&lt;<span style="color: #000000; font-weight: bold;">a</span> <span style="color: #000066;">href</span><span style="color: #66cc66;">=</span><span style="color: #ff0000;">&quot;costHelp.html&quot;</span> </span>
<span style="color: #009900;">      <span style="color: #000066;">onclick</span><span style="color: #66cc66;">=</span><span style="color: #ff0000;">&quot;</span>
<span style="color: #009900;">        window.open(this.href, 'Help');</span>
<span style="color: #009900;">        return false;</span>
<span style="color: #009900;">      &quot;</span></span>
<span style="color: #009900;">  &gt;</span>Explain these<span style="color: #009900;">&lt;<span style="color: #66cc66;">/</span><span style="color: #000000; font-weight: bold;">a</span>&gt;</span>
<span style="color: #009900;">&lt;<span style="color: #66cc66;">/</span><span style="color: #000000; font-weight: bold;">p</span>&gt;</span></pre></div></div>

<p>And it was confusing. But after a time we became enlightened and we realized that we should separate out the styling from the rest of the presentation. We used CSS markup in separate files, and the code looked something like this:</p>
<p><strong>CostController.java</strong></p>

<div class="wp_syntax"><div class="code"><pre class="java java" style="font-family:monospace;">Cost<span style="color: #009900;">&#91;</span><span style="color: #009900;">&#93;</span> costs <span style="color: #339933;">=</span> CostHelper.<span style="color: #006633;">calculateCosts</span><span style="color: #009900;">&#40;</span>loanData, currentDecision<span style="color: #009900;">&#41;</span>;
modelAndView.<span style="color: #006633;">addObject</span><span style="color: #009900;">&#40;</span><span style="color: #0000ff;">&quot;costs&quot;</span>, costs<span style="color: #009900;">&#41;</span>;</pre></div></div>

<p><strong>costs.css</strong></p>

<div class="wp_syntax"><div class="code"><pre class="css css" style="font-family:monospace;"><span style="color: #6666ff;">.costName</span> <span style="color: #00AA00;">&#123;</span>
  <span style="color: #000000; font-weight: bold;">font-weight</span><span style="color: #00AA00;">:</span> <span style="color: #993333;">bold</span>;
<span style="color: #00AA00;">&#125;</span>
<span style="color: #6666ff;">.helpLink</span> <span style="color: #00AA00;">&#123;</span>
  <span style="color: #000000; font-weight: bold;">text-align</span><span style="color: #00AA00;">:</span> <span style="color: #993333;">center</span>;
  <span style="color: #000000; font-weight: bold;">font-style</span><span style="color: #00AA00;">:</span> <span style="color: #993333;">italic</span>;
<span style="color: #00AA00;">&#125;</span></pre></div></div>

<p><strong>costs.vm</strong></p>

<div class="wp_syntax"><div class="code"><pre class="html html" style="font-family:monospace;"><span style="color: #009900;">&lt;<span style="color: #000000; font-weight: bold;">h3</span>&gt;</span>Current Costs:<span style="color: #009900;">&lt;<span style="color: #66cc66;">/</span><span style="color: #000000; font-weight: bold;">h3</span>&gt;</span>
<span style="color: #009900;">&lt;<span style="color: #000000; font-weight: bold;">table</span> <span style="color: #000066;">border</span><span style="color: #66cc66;">=</span><span style="color: #ff0000;">&quot;0&quot;</span>&gt;</span>
  <span style="color: #009900;">&lt;<span style="color: #000000; font-weight: bold;">tr</span>&gt;</span>
    <span style="color: #009900;">&lt;<span style="color: #000000; font-weight: bold;">th</span>&gt;</span>Cost<span style="color: #009900;">&lt;<span style="color: #66cc66;">/</span><span style="color: #000000; font-weight: bold;">th</span>&gt;</span>
    <span style="color: #009900;">&lt;<span style="color: #000000; font-weight: bold;">th</span>&gt;</span>Amount<span style="color: #009900;">&lt;<span style="color: #66cc66;">/</span><span style="color: #000000; font-weight: bold;">th</span>&gt;</span>
  <span style="color: #009900;">&lt;<span style="color: #66cc66;">/</span><span style="color: #000000; font-weight: bold;">tr</span>&gt;</span>
  #foreach( $cost in $costs )
    <span style="color: #009900;">&lt;<span style="color: #000000; font-weight: bold;">tr</span>&gt;</span>
      <span style="color: #009900;">&lt;<span style="color: #000000; font-weight: bold;">td</span> <span style="color: #000066;">class</span><span style="color: #66cc66;">=</span><span style="color: #ff0000;">&quot;costName&quot;</span>&gt;</span>$cost.name<span style="color: #009900;">&lt;<span style="color: #66cc66;">/</span><span style="color: #000000; font-weight: bold;">td</span>&gt;</span>
      <span style="color: #009900;">&lt;<span style="color: #000000; font-weight: bold;">td</span>&gt;</span>$ $cost.value<span style="color: #009900;">&lt;<span style="color: #66cc66;">/</span><span style="color: #000000; font-weight: bold;">td</span>&gt;</span>
    <span style="color: #009900;">&lt;<span style="color: #66cc66;">/</span><span style="color: #000000; font-weight: bold;">tr</span>&gt;</span>
  #end
<span style="color: #009900;">&lt;<span style="color: #66cc66;">/</span><span style="color: #000000; font-weight: bold;">table</span>&gt;</span>
<span style="color: #009900;">&lt;<span style="color: #000000; font-weight: bold;">p</span> <span style="color: #000066;">class</span><span style="color: #66cc66;">=</span><span style="color: #ff0000;">&quot;helpLink&quot;</span>&gt;</span>
  <span style="color: #009900;">&lt;<span style="color: #000000; font-weight: bold;">a</span> <span style="color: #000066;">href</span><span style="color: #66cc66;">=</span><span style="color: #ff0000;">&quot;costHelp.html&quot;</span> </span>
<span style="color: #009900;">      <span style="color: #000066;">onclick</span><span style="color: #66cc66;">=</span><span style="color: #ff0000;">&quot;</span>
<span style="color: #009900;">        window.open(this.href, 'Help');</span>
<span style="color: #009900;">        return false;</span>
<span style="color: #009900;">      &quot;</span></span>
<span style="color: #009900;">  &gt;</span>Explain these<span style="color: #009900;">&lt;<span style="color: #66cc66;">/</span><span style="color: #000000; font-weight: bold;">a</span>&gt;</span>
<span style="color: #009900;">&lt;<span style="color: #66cc66;">/</span><span style="color: #000000; font-weight: bold;">p</span>&gt;</span></pre></div></div>

<p>And it was confusing. But after a time we became enlightened and we realized that we should separate out the dynamic JavaScript from the rest of the presentation. We called this <a href="http://www.slideshare.net/simon/unobtrusive-javascript-with-jquery">unobtrusive JavaScript</a>, and the code looked something like this:</p>
<p><strong>CostController.java</strong></p>

<div class="wp_syntax"><div class="code"><pre class="java java" style="font-family:monospace;">Cost<span style="color: #009900;">&#91;</span><span style="color: #009900;">&#93;</span> costs <span style="color: #339933;">=</span> CostHelper.<span style="color: #006633;">calculateCosts</span><span style="color: #009900;">&#40;</span>loanData, currentDecision<span style="color: #009900;">&#41;</span>;
modelAndView.<span style="color: #006633;">addObject</span><span style="color: #009900;">&#40;</span><span style="color: #0000ff;">&quot;costs&quot;</span>, costs<span style="color: #009900;">&#41;</span>;</pre></div></div>

<p><strong>costs.css</strong></p>

<div class="wp_syntax"><div class="code"><pre class="css css" style="font-family:monospace;"><span style="color: #6666ff;">.costName</span> <span style="color: #00AA00;">&#123;</span>
  <span style="color: #000000; font-weight: bold;">font-weight</span><span style="color: #00AA00;">:</span> <span style="color: #993333;">bold</span>;
<span style="color: #00AA00;">&#125;</span>
<span style="color: #6666ff;">.helpLink</span> <span style="color: #00AA00;">&#123;</span>
  <span style="color: #000000; font-weight: bold;">text-align</span><span style="color: #00AA00;">:</span> <span style="color: #993333;">center</span>;
  <span style="color: #000000; font-weight: bold;">font-style</span><span style="color: #00AA00;">:</span> <span style="color: #993333;">italic</span>;
<span style="color: #00AA00;">&#125;</span></pre></div></div>

<p><strong>costs.js</strong></p>

<div class="wp_syntax"><div class="code"><pre class="javascript javascript" style="font-family:monospace;">$<span style="color: #009900;">&#40;</span><span style="color: #003366; font-weight: bold;">function</span><span style="color: #009900;">&#40;</span><span style="color: #009900;">&#41;</span> <span style="color: #009900;">&#123;</span>
  $<span style="color: #009900;">&#40;</span><span style="color: #3366CC;">'.popup'</span><span style="color: #009900;">&#41;</span>.<span style="color: #660066;">click</span><span style="color: #009900;">&#40;</span><span style="color: #003366; font-weight: bold;">function</span><span style="color: #009900;">&#40;</span><span style="color: #009900;">&#41;</span> <span style="color: #009900;">&#123;</span>
    window.<span style="color: #000066;">open</span><span style="color: #009900;">&#40;</span> $<span style="color: #009900;">&#40;</span><span style="color: #000066; font-weight: bold;">this</span><span style="color: #009900;">&#41;</span>.<span style="color: #660066;">attr</span><span style="color: #009900;">&#40;</span><span style="color: #3366CC;">'href'</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">,</span> <span style="color: #3366CC;">'Help'</span><span style="color: #009900;">&#41;</span>;
    <span style="color: #000066; font-weight: bold;">return</span> <span style="color: #003366; font-weight: bold;">false</span>;
  <span style="color: #009900;">&#125;</span><span style="color: #009900;">&#41;</span>;
<span style="color: #009900;">&#125;</span><span style="color: #009900;">&#41;</span></pre></div></div>

<p><strong>costs.vm</strong></p>

<div class="wp_syntax"><div class="code"><pre class="html html" style="font-family:monospace;"><span style="color: #009900;">&lt;<span style="color: #000000; font-weight: bold;">h3</span>&gt;</span>Current Costs:<span style="color: #009900;">&lt;<span style="color: #66cc66;">/</span><span style="color: #000000; font-weight: bold;">h3</span>&gt;</span>
<span style="color: #009900;">&lt;<span style="color: #000000; font-weight: bold;">table</span> <span style="color: #000066;">border</span><span style="color: #66cc66;">=</span><span style="color: #ff0000;">&quot;0&quot;</span>&gt;</span>
  <span style="color: #009900;">&lt;<span style="color: #000000; font-weight: bold;">tr</span>&gt;</span>
    <span style="color: #009900;">&lt;<span style="color: #000000; font-weight: bold;">th</span>&gt;</span>Cost<span style="color: #009900;">&lt;<span style="color: #66cc66;">/</span><span style="color: #000000; font-weight: bold;">th</span>&gt;</span>
    <span style="color: #009900;">&lt;<span style="color: #000000; font-weight: bold;">th</span>&gt;</span>Amount<span style="color: #009900;">&lt;<span style="color: #66cc66;">/</span><span style="color: #000000; font-weight: bold;">th</span>&gt;</span>
  <span style="color: #009900;">&lt;<span style="color: #66cc66;">/</span><span style="color: #000000; font-weight: bold;">tr</span>&gt;</span>
  #foreach( $cost in $costs )
    <span style="color: #009900;">&lt;<span style="color: #000000; font-weight: bold;">tr</span>&gt;</span>
      <span style="color: #009900;">&lt;<span style="color: #000000; font-weight: bold;">td</span> <span style="color: #000066;">class</span><span style="color: #66cc66;">=</span><span style="color: #ff0000;">&quot;costName&quot;</span>&gt;</span>$cost.name<span style="color: #009900;">&lt;<span style="color: #66cc66;">/</span><span style="color: #000000; font-weight: bold;">td</span>&gt;</span>
      <span style="color: #009900;">&lt;<span style="color: #000000; font-weight: bold;">td</span>&gt;</span>$ $cost.value<span style="color: #009900;">&lt;<span style="color: #66cc66;">/</span><span style="color: #000000; font-weight: bold;">td</span>&gt;</span>
    <span style="color: #009900;">&lt;<span style="color: #66cc66;">/</span><span style="color: #000000; font-weight: bold;">tr</span>&gt;</span>
  #end
<span style="color: #009900;">&lt;<span style="color: #66cc66;">/</span><span style="color: #000000; font-weight: bold;">table</span>&gt;</span>
<span style="color: #009900;">&lt;<span style="color: #000000; font-weight: bold;">p</span> <span style="color: #000066;">class</span><span style="color: #66cc66;">=</span><span style="color: #ff0000;">&quot;helpLink&quot;</span>&gt;</span>
  <span style="color: #009900;">&lt;<span style="color: #000000; font-weight: bold;">a</span> <span style="color: #000066;">href</span><span style="color: #66cc66;">=</span><span style="color: #ff0000;">&quot;costHelp.html&quot;</span> <span style="color: #000066;">class</span><span style="color: #66cc66;">=</span><span style="color: #ff0000;">&quot;popup&quot;</span>&gt;</span>Explain these<span style="color: #009900;">&lt;<span style="color: #66cc66;">/</span><span style="color: #000000; font-weight: bold;">a</span>&gt;</span>
<span style="color: #009900;">&lt;<span style="color: #66cc66;">/</span><span style="color: #000000; font-weight: bold;">p</span>&gt;</span></pre></div></div>

<p>And it was better. Things get a little bit confusing because each screen is rendered from several different files instead of from a single one, but separating out the concerns of business logic, styling, and dynamic behavior made each piece easier to understand and work with.</p>
<p>Recently, though, I became enlightened, and realized that we still have too many things going on in the same file. The HTML file still contains two independent concerns: the definition of the <em>structure</em> and the actual <em>text</em>. These facets are not really related, and they tend to be edited by different people. (HTML designers don&#8217;t necessarily produce the marketing copy and other text.) So this is a perfect candidate for another separation of concerns. That&#8217;s why my current project is organized like this instead:</p>
<p><strong>CostController.java</strong></p>

<div class="wp_syntax"><div class="code"><pre class="java java" style="font-family:monospace;">Cost<span style="color: #009900;">&#91;</span><span style="color: #009900;">&#93;</span> costs <span style="color: #339933;">=</span> CostHelper.<span style="color: #006633;">calculateCosts</span><span style="color: #009900;">&#40;</span>loanData, currentDecision<span style="color: #009900;">&#41;</span>;
modelAndView.<span style="color: #006633;">addObject</span><span style="color: #009900;">&#40;</span><span style="color: #0000ff;">&quot;costs&quot;</span>, costs<span style="color: #009900;">&#41;</span>;</pre></div></div>

<p><strong>costs.css</strong></p>

<div class="wp_syntax"><div class="code"><pre class="css css" style="font-family:monospace;"><span style="color: #6666ff;">.costName</span> <span style="color: #00AA00;">&#123;</span>
  <span style="color: #000000; font-weight: bold;">font-weight</span><span style="color: #00AA00;">:</span> <span style="color: #993333;">bold</span>;
<span style="color: #00AA00;">&#125;</span>
<span style="color: #6666ff;">.helpLink</span> <span style="color: #00AA00;">&#123;</span>
  <span style="color: #000000; font-weight: bold;">text-align</span><span style="color: #00AA00;">:</span> <span style="color: #993333;">center</span>;
  <span style="color: #000000; font-weight: bold;">font-style</span><span style="color: #00AA00;">:</span> <span style="color: #993333;">italic</span>;
<span style="color: #00AA00;">&#125;</span></pre></div></div>

<p><strong>costs.js</strong></p>

<div class="wp_syntax"><div class="code"><pre class="javascript javascript" style="font-family:monospace;">$<span style="color: #009900;">&#40;</span><span style="color: #003366; font-weight: bold;">function</span><span style="color: #009900;">&#40;</span><span style="color: #009900;">&#41;</span> <span style="color: #009900;">&#123;</span>
  $<span style="color: #009900;">&#40;</span><span style="color: #3366CC;">'.popup'</span><span style="color: #009900;">&#41;</span>.<span style="color: #660066;">click</span><span style="color: #009900;">&#40;</span><span style="color: #003366; font-weight: bold;">function</span><span style="color: #009900;">&#40;</span><span style="color: #009900;">&#41;</span> <span style="color: #009900;">&#123;</span>
    window.<span style="color: #000066;">open</span><span style="color: #009900;">&#40;</span> $<span style="color: #009900;">&#40;</span><span style="color: #000066; font-weight: bold;">this</span><span style="color: #009900;">&#41;</span>.<span style="color: #660066;">attr</span><span style="color: #009900;">&#40;</span><span style="color: #3366CC;">'href'</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">,</span> <span style="color: #3366CC;">'Help'</span><span style="color: #009900;">&#41;</span>;
    <span style="color: #000066; font-weight: bold;">return</span> <span style="color: #003366; font-weight: bold;">false</span>;
  <span style="color: #009900;">&#125;</span><span style="color: #009900;">&#41;</span>;
<span style="color: #009900;">&#125;</span><span style="color: #009900;">&#41;</span></pre></div></div>

<p><strong>cmstext.properties</strong></p>

<div class="wp_syntax"><div class="code"><pre class="properties properties" style="font-family:monospace;"><span style="color: #000099;">cost-title</span><span style="color: #000000;">: Current Costs:</span>
<span style="color: #000099;">cost-col1-label</span><span style="color: #000000;">: Cost</span>
<span style="color: #000099;">cost-col2-label</span><span style="color: #000000;">: Amount</span>
<span style="color: #000099;">cost-help</span><span style="color: #000000;">: Explain these</span></pre></div></div>

<p><strong>costs.vm</strong></p>

<div class="wp_syntax"><div class="code"><pre class="html html" style="font-family:monospace;"><span style="color: #009900;">&lt;<span style="color: #000000; font-weight: bold;">h3</span>&gt;</span>#cms(&quot;cost-title&quot;)<span style="color: #009900;">&lt;<span style="color: #66cc66;">/</span><span style="color: #000000; font-weight: bold;">h3</span>&gt;</span>
<span style="color: #009900;">&lt;<span style="color: #000000; font-weight: bold;">table</span> <span style="color: #000066;">border</span><span style="color: #66cc66;">=</span><span style="color: #ff0000;">&quot;0&quot;</span>&gt;</span>
  <span style="color: #009900;">&lt;<span style="color: #000000; font-weight: bold;">tr</span>&gt;</span>
    <span style="color: #009900;">&lt;<span style="color: #000000; font-weight: bold;">th</span>&gt;</span>#cms(&quot;cost-col1-label&quot;)<span style="color: #009900;">&lt;<span style="color: #66cc66;">/</span><span style="color: #000000; font-weight: bold;">th</span>&gt;</span>
    <span style="color: #009900;">&lt;<span style="color: #000000; font-weight: bold;">th</span>&gt;</span>#cms(&quot;cost-col2-label&quot;)<span style="color: #009900;">&lt;<span style="color: #66cc66;">/</span><span style="color: #000000; font-weight: bold;">th</span>&gt;</span>
  <span style="color: #009900;">&lt;<span style="color: #66cc66;">/</span><span style="color: #000000; font-weight: bold;">tr</span>&gt;</span>
  #foreach( $cost in $costs )
    <span style="color: #009900;">&lt;<span style="color: #000000; font-weight: bold;">tr</span>&gt;</span>
      <span style="color: #009900;">&lt;<span style="color: #000000; font-weight: bold;">td</span> <span style="color: #000066;">class</span><span style="color: #66cc66;">=</span><span style="color: #ff0000;">&quot;costName&quot;</span>&gt;</span>$cost.name<span style="color: #009900;">&lt;<span style="color: #66cc66;">/</span><span style="color: #000000; font-weight: bold;">td</span>&gt;</span>
      <span style="color: #009900;">&lt;<span style="color: #000000; font-weight: bold;">td</span>&gt;</span>$ $cost.value<span style="color: #009900;">&lt;<span style="color: #66cc66;">/</span><span style="color: #000000; font-weight: bold;">td</span>&gt;</span>
    <span style="color: #009900;">&lt;<span style="color: #66cc66;">/</span><span style="color: #000000; font-weight: bold;">tr</span>&gt;</span>
  #end
<span style="color: #009900;">&lt;<span style="color: #66cc66;">/</span><span style="color: #000000; font-weight: bold;">table</span>&gt;</span>
<span style="color: #009900;">&lt;<span style="color: #000000; font-weight: bold;">p</span> <span style="color: #000066;">class</span><span style="color: #66cc66;">=</span><span style="color: #ff0000;">&quot;helpLink&quot;</span>&gt;</span>
  <span style="color: #009900;">&lt;<span style="color: #000000; font-weight: bold;">a</span> <span style="color: #000066;">href</span><span style="color: #66cc66;">=</span><span style="color: #ff0000;">&quot;costHelp.html&quot;</span> <span style="color: #000066;">class</span><span style="color: #66cc66;">=</span><span style="color: #ff0000;">&quot;popup&quot;</span>&gt;</span>#cms(&quot;cost-help&quot;)<span style="color: #009900;">&lt;<span style="color: #66cc66;">/</span><span style="color: #000000; font-weight: bold;">a</span>&gt;</span>
<span style="color: #009900;">&lt;<span style="color: #66cc66;">/</span><span style="color: #000000; font-weight: bold;">p</span>&gt;</span></pre></div></div>

<p>The code that processes this allows no markup in the cmstext.properties file &#8212; any metacharacters will be properly escaped. So in principle it would be easy to give this file directly to the business to edit without IT help &#8212; or even to allow them to edit it on the live website without needing a QA cycle. The down-side is that we have yet another file to deal with: time will tell whether the benefits outweigh that cost.</p>
]]></content:encoded>
			<wfw:commentRss>http://mcherm.com/permalinks/1/separation-of-concerns/feed</wfw:commentRss>
		</item>
		<item>
		<title>Many ways to attack websites</title>
		<link>http://mcherm.com/permalinks/1/many-ways-to-attack-websites</link>
		<comments>http://mcherm.com/permalinks/1/many-ways-to-attack-websites#comments</comments>
		<pubDate>Thu, 09 Oct 2008 14:26:51 +0000</pubDate>
		<dc:creator>mcherm</dc:creator>
		
		<category><![CDATA[Uncategorized]]></category>

		<guid isPermaLink="false">http://mcherm.com/?p=105</guid>
		<description><![CDATA[Developers of web applications have quite a few different kinds of &#8220;attacks&#8221; to worry about. I will try to describe the major categories I know of, including one which is &#8220;new&#8221; as of the past month or so.
SQL Injection
The most venerable is the SQL-injection attack (and related attacks for things other than databases). This is [...]]]></description>
			<content:encoded><![CDATA[<p>Developers of web applications have quite a few different kinds of &#8220;attacks&#8221; to worry about. I will try to describe the major categories I know of, including one which is &#8220;new&#8221; as of the past month or so.<span id="more-105"></span></p>
<h2>SQL Injection</h2>
<p>The most venerable is the SQL-injection attack (and related attacks for things other than databases). This is the danger that data entered by users will be treated as meta-characters not just as text, and will allow a visitor to your site to execute arbitrary code in your database (or some other system). Nothing illustrates this kind of attack better than this <a title="Random XKCD cartoon" href="http://dynamic.xkcd.com/comic/random/">XKCD</a> cartoon:</p>
<p><a href="http://xkcd.com/327/"><img class="aligncenter" title="SQL Injection Attack" src="http://imgs.xkcd.com/comics/exploits_of_a_mom.png" alt="" width="666" height="205" /></a></p>
<h2>XSS</h2>
<p>There are XSS attacks - which stands for &#8220;Cross Site Scripting&#8221; (the acronym &#8220;CSS&#8221; was <a title="Cascading Style Sheets" href="http://www.w3.org/TR/CSS2/">already taken</a>). XSS is the danger that your site might serve up some content which was entered by a user (or perhaps loaded from a 3rd party site). Normally, this makes sense: whole <a title="MySpace" href="http://www.myspace.com/">empires</a> have been built on the concept of allowing users to customize their own pages on your site. But browsers assume that any code served up by your site is <em>trusted</em>, and will allow it to do things like accessing you site&#8217;s cookies. Particularly if users can get <em>others</em> to view their content, this can be quite dangerous. The first line of defense is to carefully sanitize and properly escape all content from users that it intended as plain text. As for content from users that is <em>intended</em> to contain markup, some sites just prohibit this, while others can use a solution like <a title="Google Caja" href="http://code.google.com/p/google-caja/">Google caja</a>, which provides a secure sandbox for untrusted code to run in.</p>
<h2>CSRF</h2>
<p><img class="size-full wp-image-112 alignright" title="wikipedia lolcat" src="http://mcherm.com/blog/wp-content/uploads/2008/10/175px-wikipedia-lolcat.jpg" alt="Wikipedia lolcat" width="175" height="140" /></p>
<p>XSS attacks exploited the fact that the user (or the user&#8217;s browser) trusted content coming from your website (even if that content wasn&#8217;t written by the site owner). The <a title="&quot;converse&quot;" href="http://www.jimloy.com/logic/converse.htm">converse</a> is a CSRF attack which exploits the fact that the site trusts content coming from it&#8217;s user&#8217;s browser. One of your users visits a malicious site which contains some sort of link to your site &#8212; preferably a link which causes some action to be taken. The request comes from the user&#8217;s browser, it has the user&#8217;s cookies and everything, so your site thinks the user intended to send the request. The idea is for a site containing <a href="http://icanhascheezburger.com/">pictures of cute cats</a> to trick your banking site into transferring money to someone&#8217;s account. There are several defenses such as always using POST (helps, but doesn&#8217;t fix the problem), a per-session unique ID, and double-submit cookies.</p>
<h2>Clickjacking</h2>
<p>The latest <a title="Computer World jumps on the clickjacking issue" href="http://www.computerworld.com/action/article.do?command=viewarticlebasic&amp;articleid=9115818">hot issue</a> in the web security community is &#8220;<a title="What is Clickjacking?" href="http://hackademix.net/2008/09/27/clickjacking-and-noscript/">clickjacking</a>&#8220;. This is a variant of CSRF in that it occurs when your site&#8217;s user navigates through a malicious website. But instead of the foreign site trying to generate a &#8220;click&#8221; on your website by embedding an image or executing some JavaScript, the foreign site embeds your site, perhaps within an IFrame. They then cover it up so you can&#8217;t SEE it, but when you click you perform an action on the attacked site. You can see an innocuous example at <a href="http://noscript.net/getit">http://noscript.net/getit</a>, where the &#8220;install now&#8221; button installs from Firefox&#8217;s site, not from noscript&#8217;s site. The most evil versions will continually move the attacked site so it stays under the cursor&#8230; no matter <em>where</em> you click, the button you don&#8217;t see will be under your cursor. Some of the details of this exploit have <a title="Clickjack presentation cancelled" href="http://jeremiahgrossman.blogspot.com/2008/09/cancelled-clickjacking-owasp-appsec.html">not been released yet</a>, so it is too early to make clear statements about how a website (or a user) can protect themselves.</p>
<h2>Plenty of others</h2>
<p>I am sure that there are other fundamental forms of attack against web applications. Go ahead and add your own items in the comments below!</p>
]]></content:encoded>
			<wfw:commentRss>http://mcherm.com/permalinks/1/many-ways-to-attack-websites/feed</wfw:commentRss>
		</item>
		<item>
		<title>Threadsafe Java Servlets - a solution</title>
		<link>http://mcherm.com/permalinks/1/threadsafe-java-servlets-a-solution</link>
		<comments>http://mcherm.com/permalinks/1/threadsafe-java-servlets-a-solution#comments</comments>
		<pubDate>Tue, 07 Oct 2008 12:20:35 +0000</pubDate>
		<dc:creator>mcherm</dc:creator>
		
		<category><![CDATA[Programming]]></category>

		<guid isPermaLink="false">http://mcherm.com/?p=99</guid>
		<description><![CDATA[In a previous post I wrote about how nearly all web applications built on Java servlets suffer from potential threading issues. Web browsers can make multiple simultaneous requests, which will result in multiple threads concurrently modifying the (not threadsafe) HTTPSession. Most people just ignore the problems (which strike rarely), some serialize all requests for the [...]]]></description>
			<content:encoded><![CDATA[<p>In a <a href="http://mcherm.com/permalinks/1/threadsafe-java-servlets">previous post</a> I wrote about how nearly all web applications built on Java servlets suffer from potential threading issues. Web browsers can make multiple simultaneous requests, which will result in multiple threads concurrently modifying the (not threadsafe) HTTPSession. Most people just ignore the problems (which strike rarely), some serialize all requests for the same session, but neither of these works as well in a world where AJAX-based user interfaces are becoming more common. I hope to describe the basic outline of a solution; explaining, as I go, the reasoning I used in coming up with it.<span id="more-99"></span></p>
<p>As far as I can tell, there IS no universal solution to this problem &#8212; only particular solutions that optimize for certain kinds of application behavior. In our case (we&#8217;re building an online mortgage application) nearly all of the interaction will occur with a logged-in user, or at the very least will care whether the user is logged in, which almost certainly means reading user information from the Session. So almost every request will be reading from the Session. However, many of the requests will be used for display not update &#8212; they will be reading from the Session but <em>not</em> updating it.</p>
<p><img class="alignleft" style="float: left;" src="http://www.eecs.usma.edu/people/images/okasaki.jpg" alt="Chris Okasaki" width="120" height="120" />That observation immediately suggests the use of immutable data structures. Immutable data structures are a technique for concurrent programming that has been known for many years, but it has received a renewed spurt of interest recently sparked largely by the 1996 <a href="http://www.cs.cmu.edu/~rwh/theses/okasaki.pdf">thesis of Chris Okasaki</a> and others who expanded on it. What everyone had always known was that if a data structure is immutable (can&#8217;t be changed) then multiple threads can safely read it - essentially each thread gets a <a href="http://www.flickr.com/photos/cadenl/1420431917/"><img class="alignright size-full wp-image-100" title="frozen_data" src="http://mcherm.com/blog/wp-content/uploads/2008/10/frozen_data.jpg" alt="A \" width="240" height="181" /></a>&#8220;frozen&#8221; copy of the data as it looked at the moment the thread began working with it. What Chris&#8217;s thesis added was a coherent way of analyzing the performance behavior of immutable data structures and some clever ideas that made them nearly as fast as traditional mutable data structures.</p>
<p>So if we use an immutable data structure, then we can be sure that all requests that are just reading data and not updating it can proceed at full speed. They will receive a copy of the data as it looked when the thread began processing the request. Any changes to session that happen <em>during</em> the time that the request is being processed will not be seen, but that is probably the best behavior we could ask for &#8212; it is equivalent to assuming that the read-only request was executed so quickly that it finished before the update occurred.</p>
<p>So we&#8217;ll use some sort of an immutable data structure to hold our session data &#8212; perhaps it&#8217;s a linked list, or an immutable map, so far it doesn&#8217;t really matter. And we&#8217;ll handle requests that just read data by grabbing a copy of the structure once &#8212; that way no matter how logn the request takes, it will be seeing a single, coherent view of the session data. For requests that must both read and write data we can do the reading the same way: take a copy of the data structure at the beginning of the processing and do all reads from that copy. The difference is that at the end of the service we will have done some writes to the data &#8212; with an immutable data structure this means we&#8217;ll have generated a new structure which is just like the original except for the small number of changes we have made. The question remaining to be solved is what to do with this changed data.</p>
<p>The &#8220;obvious&#8221; solution is to just update the pointer in the HTTPSession to point to our newly changed data, but this won&#8217;t work. This won&#8217;t be safe in the face of threading issues. Imagine two requests that both do writes are occuring simultaneously: one modifies the customer&#8217;s current requested loan amount while the other modifies the customer&#8217;s address. Whichevre is processed second may overwrite the changes of the first &#8212; so one thread would update loan amount then the second (unaware of the first) will set back the loan amount while updating the address. In the end, the user thinks the loan amount has been changed, but it hasn&#8217;t.</p>
<p>I can think of two solutions here: &#8220;one-writer-at-a-time&#8221; and &#8220;merging&#8221;. The general idea behind &#8220;one-at-a-time&#8221; would be for any thread that intends to make modifications to obtain a lock before beginning. Then we would allow as many &#8220;read-only&#8221; threads as desired, but only one &#8220;read-write&#8221; thread per user session could execute simultaneously. If the application consists of lots of simultaneous AJAX calls to obtain data but very few that perform updates, then this is a simple and straightforward approach.</p>
<p>To make this idea more clear, let me define an API that would achieve &#8220;one-writer-at-a-time&#8221; semantics. In the Session, we would place a single ThreadsafeSessionData object, and all programmers would be enjoined not to use the HTTPSession.putValue(). A method ThreadsafeSessionData.getReadonlyData() would return an immutable Map containing immutable data objects with the contents of the session. Servlets that only needed to read data could call this once to obtain a consistent view of the data. Another method, ThreadsafeSessionData.getEditableData() would obtain a lock on the session (blocking if needed) and return an EditableData object. The EditableData object would have a getReadonlyData() method returning the same immutable Map, but it would <em>also</em> have a setValue() method for editing the data (by creating a new immutable Map). And it would have a commitChanges() method which would take the current immutable Map, store it in the ThreadsafeSessionData object, release the lock, and then lock down the EditableData object (no calling setValue() after commitChanges()).</p>
<p>It is <em>possible</em> to go even further than this. Multiple writer threads <em>could</em> operate at the same time, so long as they are not modifying the same piece of data, or relying on a value which is simultaneously being modified. The concept is rather like version control systems that use <a title="Versioning" href="http://svnbook.red-bean.com/en/1.0/ch02s02.html">merging rather than locking</a>. But it requires merging the data after a &#8220;commit&#8221;, which adds a great deal of complexity to the solution. As a programming exercise, I think it would be <a href="http://www.codecommit.com/blog/scala/software-transactional-memory-in-scala">fun to develop</a>, but finding a reliable means of merging changes is challenging enough that I think for production use I&#8217;ll stop with &#8220;one-writer-at-a-time&#8221;.</p>
]]></content:encoded>
			<wfw:commentRss>http://mcherm.com/permalinks/1/threadsafe-java-servlets-a-solution/feed</wfw:commentRss>
		</item>
		<item>
		<title>Threadsafe Java Servlets</title>
		<link>http://mcherm.com/permalinks/1/threadsafe-java-servlets</link>
		<comments>http://mcherm.com/permalinks/1/threadsafe-java-servlets#comments</comments>
		<pubDate>Tue, 23 Sep 2008 21:49:46 +0000</pubDate>
		<dc:creator>mcherm</dc:creator>
		
		<category><![CDATA[Programming]]></category>

		<guid isPermaLink="false">http://mcherm.com/?p=97</guid>
		<description><![CDATA[Web servers are inherently threaded applications: their primary purpose is to serve up a website or web application to a large number of users. Essentially all of the frameworks for creating web applications, such as Java&#8217;s &#8220;servlet&#8221; specification and all of the structure built on top of it, provide built-in support for handling queries from [...]]]></description>
			<content:encoded><![CDATA[<p>Web servers are inherently threaded applications: their primary purpose is to serve up a website or web application to a large number of users. Essentially all of the frameworks for creating web applications, such as Java&#8217;s &#8220;servlet&#8221; specification and all of the structure built on top of it, provide built-in support for handling queries from different users simultaneously, and they make it possible for these threads to operate &#8220;safely&#8221; (without data corruption) so long as a few basic rules are followed (&#8221;Don&#8217;t store anything in the servlet instance variables.&#8221;, and &#8220;Don&#8217;t access anything stored in static variables unless it is threadsafe.&#8221;).</p>
<p>However, threading issues for web servers are not limited to the fact that there are multiple simultaneous users &#8212; it is also possible to be processing multiple HTTP requests a single user at the same time.<span id="more-97"></span> In fact, this happens <em>all the time</em> with requests for images. Most browsers today download images 4 at a time (or more) after the basic page has loaded. Fortunately, downloading images tends to be a read-only operation with little opportunity for threading problems. In &#8220;the old days&#8221; (in our industry that probably means last year) users would mostly view one page, wait while it finished loading, then follow a link or submit a form to a new page. So images were the only thing happening &#8220;simultaneously&#8221; for a given user, and there was little danger of data corruption.</p>
<p>The advent of <a href="http://www.adaptivepath.com/ideas/essays/archives/000385.php">AJAX </a>and rich internet applications has changed all that. Modern websites don&#8217;t consist of a series of pages and forms, they consist of an interactive environment where the user modifies controls which communicate with the server. Think of <a href="http://mail.yahoo.com/">Yahoo Mail</a>, <a href="http://maps.google.com/">Google Maps</a>, or <a href="http://www.netvibes.com/">NetVibes</a>. And that means that the threading issues which formerly caused very little grief are now poised to become a major issue.</p>
<p>What, you may ask, is so special about multiple requests from the same user? If safely handling multiple simultaneous requests from different users is a solved problem, why would safely handling multiple requests from the same user be any different? Well, two threads can run safely as long as they do not share any objects. Avoiding instance variables in the servlet (or implementing <a href="http://java.sun.com/j2ee/1.4/docs/api/javax/servlet/SingleThreadModel.html">SingleThreadModel</a>, but that&#8217;s not as good a solution) prevents one possible kind of shared object. Avoiding static instance variables (except possibly those designed for threadsafe use) prevents another. And the specification for servlet says that the container is responsible for ensuring that the other objects available to the servlet are safe to use&#8230; except for one: the session.</p>
<p><img class="alignright size-full wp-image-98" title="Tomcat (a leading web application server)" src="http://mcherm.com/blog/wp-content/uploads/2008/09/tomcat.gif" alt="Tomcat (a leading web application server)" width="130" height="92" />The session (usually the HttpSession) is used to carry around data from one call to the next within a user&#8217;s session. (This is needed because the HTTP protocol is inherently stateless, but rich internet applications are quite stateful &#8212; the state is stored in the session). Some calls (like those downloading an image) won&#8217;t use the session, and those have no threading issues. But many calls will read some information from the session and write other information. If multiple threads are reading from and writing to the same object and that object is not specially designed to be threadsafe (and HttpSession is not), then it is a recipe for <a href="http://mcherm.com/permalinks/1/immutable-trees-and-threading-evil-part-2">threading disasters</a>.</p>
<p>So what is the solution? I will try to describe the some common &#8220;solutions&#8221; and why they are not satisfactory for the project I am starting on at the moment. Then (in a future post) I hope to sketch out a more complex but more capable solution which <em>does</em> meet my current needs.</p>
<p>The most common solution, the one used by the <em>vast</em> majority of Java web application programmers is called &#8220;pretend it doesn&#8217;t matter&#8221;. Whether through ignorance (probably), or a belief that &#8220;it won&#8217;t matter anyway&#8221;, they simply don&#8217;t do <em>anything</em> about the threading behavior of session. And that most of the time, they get away with it - after all, data corruption due to threading behavior is rare problem, occurring in an indeterminate fashion usually impossible to replicate in a test case. So the program &#8220;nearly always&#8221; works, and the few glitches are just ignored. For me, this approach (though tempting) is simply too dangerous: one should <em>never</em> rely on <a title="Demons may fly out of your nose" href="http://www.catb.org/jargon/html/N/nasal-demons.html">undefined behavior</a>, <em>particularly</em> not if you work for a bank: people tend to get peeved when their bank makes small, random data errors.</p>
<p>Another solution is simply to avoid storing any data in the user&#8217;s Session. While this would work, it rather undermines the usefulness of the display tier. For most non-trivial web applications we don&#8217;t want to have to re-fetch data from the database on each and every HTTP request &#8212; we need to cache various pieces of information in the Session.</p>
<p><a href="http://www.flickr.com/photos/richardsummers/269503769/"><img class="alignleft" src="http://www.flickr.com/photos/richardsummers/269503769/sizes/s/" alt="One long line slows traffic" /></a>The next simplest solution is to obtain a lock on the user&#8217;s Session (or some standard object in it) before reading from or writing to it. The advantage of this approach is that it is straightforward, and that it is guaranteed to avoid concurrent access. There is even support for it in several major frameworks, such as the synchronizeOnSession property on the <a href="http://static.springframework.org/spring/docs/2.0.x/api/org/springframework/web/servlet/mvc/AbstractController.html">AbstractController</a> in <a title="Spring MVC" href="http://static.springframework.org/spring/docs/2.0.x/reference/mvc.html">Spring MVC</a>. The disadvantage is that different HTTP requests are handled one-at-a-time by the server. This means that we don&#8217;t get to take full advantage of the massive multi-threaded server that is serving our application: sure, all hardware allows us to support hundreds of simultaneous users, but it won&#8217;t speed up the experience for any <em>one</em> user. It also means that if we issue several requests in quick succession, they will &#8220;line up&#8221; at the server&#8230; I have seen cases where one busy page &#8220;locked up&#8221; the server with a whole series of requests so that even if the user navigated away to a different page there was still a noticable delay while the server performed the already-queued requests. And finally, it would prevent one thing which I certainly want, which is for certain long-running requests to go on in the background while the user&#8217;s interactions continue. So this solution, while simple and elegant, won&#8217;t meet my needs.</p>
<p>The next obvious idea is that instead of locking on the entire session, you can just lock on specific bits of data. So if the session contains variables &#8220;loginSuccessful&#8221;, &#8220;userName&#8221;, &#8220;cachedUserData&#8221;, and &#8220;cachedUserPreferences&#8221; (the latter two being complex structures in their own right), then instead of obtaining a lock on the entire Session before reading or writing any of the variables, you could instead have a policy of getting a lock on an individual object before accessing it. Unfortunately, this approach is fraught with problems. One is the race condition for object creation: if two threads both check for a &#8220;cachedUserData&#8221; and find that it is missing, they might both try to load and save it simultaneously. This can be avoided (somewhat awkwardly) by having a separate lock object for every possible variable and creating <em>all</em> of the lock objects at Session initialization.</p>
<p>Unfortunately, there is a more serious problem: that of deadlock. Suppose two different HTTP requests both need to access the &#8220;userName&#8221; and the &#8220;cachedUserData&#8221;. If one locks the &#8220;useName&#8221; while the other locks the &#8220;cachedUserData&#8221; then each tries to obtain the other lock, they will deadlock, and neither can continue (nor can any other thread using these locks!). The only solution that <em>I</em> know of for this problem is to always obtain all locks in a fixed order&#8230; but that is particularly difficult: in the general case it requires global knowledge of ALL code in the entire application.</p>
<p>And weighed against these tricky threading difficulties, the benefits of locking on specific bits of data are not very impressive. There will often be a single piece of data (&#8221;cachedUserPreferences&#8221; perhaps) that is used by nearly every command - in which case it reduces to being essentially a lock on the session.</p>
<p>So how CAN one solve this dilemma? I am hoping to come up with a solution by using immutable (copy-on-write) data structures. But this is long enough already: that will have to be a topic for a <a href="http://mcherm.com/permalinks/1/threadsafe-java-servlets-a-solution">future essay</a>.</p>
]]></content:encoded>
			<wfw:commentRss>http://mcherm.com/permalinks/1/threadsafe-java-servlets/feed</wfw:commentRss>
		</item>
		<item>
		<title>How to email MY blog posts from Outlook</title>
		<link>http://mcherm.com/permalinks/1/how-to-email-blog-posts-from-outlook-2</link>
		<comments>http://mcherm.com/permalinks/1/how-to-email-blog-posts-from-outlook-2#comments</comments>
		<pubDate>Mon, 15 Sep 2008 12:40:35 +0000</pubDate>
		<dc:creator>mcherm</dc:creator>
		
		<category><![CDATA[Uncategorized]]></category>

		<guid isPermaLink="false">http://mcherm.com/?p=94</guid>
		<description><![CDATA[This post is mostly for my own use; it updates a previous posting with the details of exactly how I am sending out the email version of these blog postings.
I am sending email copies of the technical postings to this blog to an email list of people at my work (I suppose I&#8217;d accept others [...]]]></description>
			<content:encoded><![CDATA[<p>This post is mostly for my own use; it updates a <a href="http://mcherm.com/permalinks/1/how-to-email-blog-posts-from-outlook">previous posting</a> with the details of exactly how I am sending out the email version of these blog postings.<span id="more-94"></span></p>
<p>I am sending email copies of the technical postings to this blog to an email list of people at my work (I suppose I&#8217;d accept others also) who expressed interest. It started as a bonus goal project. Here is the process I came up with for sending the email from Outlook:</p>
<ol>
<li>First, publish the blog entry to the web normally.</li>
<li>Launch Outlook</li>
<li>Go to &#8220;Tools &gt; Options &gt; Mail Format&#8221; and set the email format to HTML while disabling the use of Microsoft Word for editing emails.</li>
<li>Go to “View &gt;  Toolbars &gt; Web” to enable the web toolbar.</li>
<li>Navitage to the website (http://mcherm.com/) and follow the link to the story to be emailed. Manually add &#8220;?stylesheet=outlook&#8221; to the end of the URL and hit return to view it.</li>
<li>Go to “Actions &gt; Send Web Page by E-mail”. This will launch Outlook’s terrible, almost unusable HTML editor. The page will look entirely wrong - for instance, it will ignore the stylesheet. Fortunately, only one thing really has to be fixed (everything else will look OK when viewed. That one thing is to delete the first three characters at the beginning of the page. (Sometimes is messes up quotes too&#8230; you can check the body of the story.)</li>
<li>Now copy the mailing list and add it to the BCC field. Be sure it&#8217;s the BCC field, not the CC or TO field, to protect the privacy of the message recipients.</li>
<li>Fix the email subject. It should read &#8220;Technical Essay Series: &lt;title-of-article&gt;&#8221;.</li>
<li>Hit send.</li>
</ol>
]]></content:encoded>
			<wfw:commentRss>http://mcherm.com/permalinks/1/how-to-email-blog-posts-from-outlook-2/feed</wfw:commentRss>
		</item>
		<item>
		<title>The Secret to Making Chrome</title>
		<link>http://mcherm.com/permalinks/1/the-secret-to-making-chrome</link>
		<comments>http://mcherm.com/permalinks/1/the-secret-to-making-chrome#comments</comments>
		<pubDate>Mon, 15 Sep 2008 11:57:31 +0000</pubDate>
		<dc:creator>mcherm</dc:creator>
		
		<category><![CDATA[Programming]]></category>

		<guid isPermaLink="false">http://mcherm.com/?p=89</guid>
		<description><![CDATA[Google has released a new browser, &#8220;Google Chrome&#8220;. It features quite a few innovations: some user interface innovations include tabs above the menus and URL bar, a single field combining the URL and search fields, search and status bars that disappear when not in use and a home page showing small versions of your 9 [...]]]></description>
			<content:encoded><![CDATA[<p><a title="Chrome" href="http://www.flickr.com/photos/cadmanof50s/62202965/"><img class="alignright size-full wp-image-91" style="float: right;" title="Chrome" src="http://mcherm.com/blog/wp-content/uploads/2008/09/chrome.jpg" alt="Chrome" width="261" height="333" /></a>Google has <a href="http://www.google.com/googlebooks/chrome/">released</a> a new browser, &#8220;<a title="Google Chrome" href="http://www.google.com/chrome">Google Chrome</a>&#8220;. It features quite a few innovations: some user interface innovations include tabs above the menus and URL bar, a single field combining the URL and search fields, search and status bars that disappear when not in use and a home page showing small versions of your 9 most-visited sites. Perhaps most interestingly, it runs each tab and plug-in in a separate process so errors or slow-downs in one cannot affect the rest. It also features a strikingly fast JavaScript engine (for those fancy &#8220;Web 2.0&#8243; AJAX pages) and some interesting security innovations like &#8220;scoping&#8221; pop-ups to remain over the page that generated them. And it supports a porn mode&#8230; sorry, &#8220;Incognito Mode&#8221; where no record is kept of your browsing (is this because Google knows something about our browsing habits?).<span id="more-89"></span></p>
<p>But those are just the <em>new</em> innovations &#8212; more impressive is the list of &#8220;standard&#8221; browser features that Chrome supports. It correctly renders the highly complex HTML and CSS standards, passing the <a title="ACID2" href="http://www.webstandards.org/files/acid2/test.html">ACID2</a> test (it fails <a title="ACID3" href="http://acid3.acidtests.org/">ACID3</a>, but still manages to attain a higher score <a href="http://mcherm.com/blog/wp-content/uploads/2008/09/chrome_screenshot.png"><img class="alignleft size-medium wp-image-92" style="float: left;" title="Chrome Screenshot" src="http://mcherm.com/blog/wp-content/uploads/2008/09/chrome_screenshot-300x282.png" alt="Chrome Screenshot" width="300" height="282" /></a>than Firefox or Internet Explorer). It supports the HTTP protocol, with all its complexity like content negotiation and compression, as well as HTTPS, FTP, and probably a few others. It has special handling for downloads (showing downloads in progress, locating them, etc. It implements the entire JavaScript language, and can correctly display hundreds of thousands of popular websites. It dynamically generates possible options as you type in the URL bar (like the recently released Firefox 3 &#8220;awesome bar&#8221;). It comes packaged with abilities or plug-ins for displaying flash, PDF, and all common graphics formats. All in all, it is a full-featured browser, quite capable of competing on features with <a title="Internet Explorer" href="http://www.microsoft.com/windows/products/winfamily/ie/default.mspx">Internet Explorer 7</a>, <a title="Firefox" href="http://www.mozilla.com/en-US/firefox/">Firefox 3</a>, <a href="http://www.apple.com/safari/">Safari 3</a>, or <a href="http://www.opera.com/">Opera 9</a>. Whether it will compete in market share is something only time will tell.</p>
<p>If you stop and think about it, this is an astounding accomplishment. A browser of this complexity is a HUGE piece of software &#8212; Google Chrome is 1.6 gigabytes of code (that would take a typical person 20 years just to type in, much less debug!) Now, Google has a lot of extremely smart people working for them, but even so, this is an incredible achievement. Consider: at one point, Netscape was the &#8220;king of the internet&#8221;, the company poised to take on Microsoft for domination of the computer industry. Then Netscape decided that most of their browser <a title="Never Rewrite from Scratch" href="http://www.joelonsoftware.com/articles/fog0000000069.html">needed to be rewritten</a>. Three years later, they released it&#8230; and in the meantime, Microsoft had won the first of the <a title="Browser Wars" href="http://en.wikipedia.org/wiki/Browser_wars">browser wars</a>, and Netscape was an irrelevant subdivision of AOL.</p>
<p>Given Google&#8217;s penchant for secrecy, it is difficult to say just how long they spent developing Chrome, but it is doubtful that it was under development for 3 years (perhaps more like 2). And many of the now &#8220;standard&#8221; features listed above didn&#8217;t exist when Netscape 6 was written. So what is Google&#8217;s secret, that allowed them to build this incredibly complex piece of software in an amazingly short period of time?</p>
<p>The answer is that Chrome is built on open source software. In fact, it uses at least <a title="Code reuse in Google Chrome browser" href="http://www.catonmat.net/blog/code-reuse-in-google-chrome-browser/">25 different software libraries</a>! And we&#8217;re talking about simple little helper utilities, the open source dependencies include &#8220;webkit&#8221; (the same HTML rendering engine that powers Safari), NSS (which provides all of the encryption needed for SSL and more), pthreads (which supports building a multi-threaded application) and sqllite (an entire database).</p>
<p><a href="http://mcherm.com/blog/wp-content/uploads/2008/09/richard_stallman.jpg"><img class="alignright size-full wp-image-90" title="Richard Stallman" src="http://mcherm.com/blog/wp-content/uploads/2008/09/richard_stallman.jpg" alt="" width="225" height="231" /></a>This is the new face of software development. Open source is no longer an obscure, pseudo-communist hippie movement dedicated to putting professional programmers out of business (it never was, despite the fact that Microsoft once wanted us to believe it). Instead, it is an essential part of building modern software applications.</p>
]]></content:encoded>
			<wfw:commentRss>http://mcherm.com/permalinks/1/the-secret-to-making-chrome/feed</wfw:commentRss>
		</item>
		<item>
		<title>The Wager</title>
		<link>http://mcherm.com/permalinks/1/the-wager</link>
		<comments>http://mcherm.com/permalinks/1/the-wager#comments</comments>
		<pubDate>Mon, 25 Aug 2008 12:38:55 +0000</pubDate>
		<dc:creator>mcherm</dc:creator>
		
		<category><![CDATA[Uncategorized]]></category>

		<category><![CDATA[backup]]></category>

		<category><![CDATA[bet]]></category>

		<category><![CDATA[lazy]]></category>

		<category><![CDATA[mozy]]></category>

		<category><![CDATA[review]]></category>

		<category><![CDATA[wager]]></category>

		<guid isPermaLink="false">http://mcherm.com/?p=86</guid>
		<description><![CDATA[You are really lazy. It&#8217;s nothing personal of course &#8212; everyone tends to procrastinate to some extent, but right now it&#8217;s YOUR turn. In just a moment, I am going to convince you that you want to do something. You&#8217;ll agree that it&#8217;s a good idea, you&#8217;ll tell yourself that you are going to do [...]]]></description>
			<content:encoded><![CDATA[<p>You are really lazy. It&#8217;s nothing personal of course &#8212; everyone tends to procrastinate to some extent, but right now it&#8217;s YOUR turn. In just a moment, I am going to convince you that you want to do something. You&#8217;ll agree that it&#8217;s a good idea, you&#8217;ll tell yourself that you are going to do it, but I&#8217;m betting that you are so lazy that in the end you won&#8217;t do it.<span id="more-86"></span></p>
<p>You probably have antivirus software protecting your computer from malicious computer viruses &#8212; in fact, you&#8217;d be a bit nervous about connecting to the internet if you didn&#8217;t have it. After all, viruses can make everything run more slowly, take over your computer and use it to send spam, or worst of all they can even delete files and destroy data. There are even a few viruses that <a href="http://www.schneier.com/blog/archives/2008/06/ransomware_1.html#c279319">take your data hostage</a> &#8212; encrypting it, deleting the original, then offering to decrypt it if an anonymous payment is made to a certain account.</p>
<p>It is less common these days (hard drives have gotten much better), but occasionally you&#8217;ll have a catastrophic failure &#8212; your hard drive will crash with no way to recover it. This can be a real disaster: the cost of a new hard drive is nothing compared to the loss of all your precious data.</p>
<p>Or it&#8217;s even POSSIBLE (unlikely, to be sure), that while you were cooking dinner your five-year-old got onto the computer you had left on (despite KNOWING he wasn&#8217;t supposed to) and sort of accidentally dragged into the trash a folder containing some files &#8212; files you had been working on for quite a long time. And, unlikely though it sounds, it&#8217;s possible that you didn&#8217;t notice this until AFTER you had already emptied the trash can and deleted the files forever.</p>
<p>Of course there is one solution to ALL of these problems &#8212; backups. Everyone knows that they ought to back up their files. But not everyone gets around to doing it; in fact nearly everyone doesn&#8217;t - until right after they have an accident and lose data. In fact, I am guessing that you, yes YOU have data someplace (probably at home) that isn&#8217;t backed up properly.</p>
<p>There is an obvious &#8220;right&#8221; way to do backups; just follow a few simple rules. First, the backups have to be frequent &#8212; a 9-month old backup isn&#8217;t going to be very useful; every few days is about right for most people. Second, you MUST test your backup.  A backup process, even one designed with the best of intentions, can&#8217;t be considered safe unless you have tried doing a restore from it. And succeeded. It doesn&#8217;t matter whether the backup is to CDs, tape, a spare hard drive, or over the internet, but you should store the backups someplace separate from the computer (otherwise they won&#8217;t be much help in case of a housefire).</p>
<p>And doing all this is a pain&#8230; particularly the part about doing it regularly. Murphy&#8217;s law says that you won&#8217;t lose data until sometime after you finally become lax and start skipping your backups. It is FAR better if the backups can be done automatically&#8230; so if you are lazy like the rest of us it will still get backed up. But for most of us, setting up some automated system is even harder than doing backups.</p>
<p>So what you really need is some product which will automatically back up your files for you every few days. It should be trivially easy to use, should take almost no time to install, and should work even if your computer isn&#8217;t on or net-connected 24/7. It should make restoring files a breeze (and not something you do only in case of catastrophe) and should automatically warn you if backups are NOT working for some reason. It should not require purchasing any special tape drives or other hardware. Oh yeah, and it should be free, or at least cheap.</p>
<p><img class="alignright size-full wp-image-88" title="Mozy" src="http://mcherm.com/blog/wp-content/uploads/2008/08/mozy-logo.png" alt="" width="206" height="52" />Fortunately, such a product exists! Actually, several such products exist, but I&#8217;m just going to talk about my favorite which is called &#8220;Mozy&#8221; (it&#8217;s for Windows and Mac&#8230; you Linux users will need to find a different alternative). <a title="Mozy" href="http://mozy.com" target="_self">Mozy</a>&#8217;s software installs quite easily. Once installed, it asks you to create an account: home use is FREE if you need to back up less than 2GB, and costs $5/month for unlimited amounts. (They have small business backup solutions also.) It will ask you to specify which directories need to be backed up and will send the data over the internet to Mozy&#8217;s servers. The documentation says that it is encrypted, so Mozy themselves cannot access your data without the password. (In case you were wondering, that&#8217;s a good thing.)</p>
<p>After the initial setup, Mozy runs without any supervision. It waits for a time when your internet connection is up and running but you are not currently working on your computer, and then it sends the changes (only the changes) from the backed-up directories over to Mozy&#8217;s servers. If it does not manage to do a backup within 7 days, then it begins to warn you that the backups are not current. And any time that you want to get files back, you can review the files stored on the server and restore any amount from a single file to the entire backup set.</p>
<p>There are a couple of features that I would want in an ideal backup system which Mozy lacks. I would want the entire disk backed up, including the OS so that I could completely swap in a new disk if needed. And I would want all versions of a backed-up file to be saved, not just the latest, so I could return to previous states of things rather like a version control system. But Mozy provides the most important features: it backs up my data, and it is very easy to use (good, because I&#8217;m too lazy to use it otherwise).</p>
<p><a href="http://www.flickr.com/photos/kubina/347687455/"><img class="alignleft size-full wp-image-87" style="margin: 2px; float: left;" title="slot_machine" src="http://mcherm.com/blog/wp-content/uploads/2008/08/slot_machine.jpg" alt="Wagers" width="160" height="240" /></a>So now we come to the wager. At this point, as I predicted, you are thinking to yourself &#8220;Gee, this Mozy sounds like a good idea. I should really install it on my own computer.&#8221; But it&#8217;s one thing to THINK about it, and quite another to actually go DO it. There is a certain mental inertia to overcome. So I&#8217;m placing a small bet - shall we say $5? - that you won&#8217;t actually step up and do it. If I lose&#8230; if because of reading this article, you actually DO go install Mozy or another automated backup tool, then post a reply using the reply box below, and I&#8217;ll pay up on my bet. (For the record: Yes, Mozy does have an affiliate program but No, I am not participating. I get no kickbacks with this deal - just the warm fuzzy feeling of having saved someone else from losing their data. <span style="font-size: x-small;">(Offer good only for the first 12 days after this is posted. Offer may be rescinded if this gets posted to the front page of <a href="http://slashdot.org/">Slashdot</a>, <a href="http://digg.com/">Digg</a>, <a href="http://reddit.com/">reddit</a>, or the like.)</span>)  You could have your data safe AND win $5 at the same time&#8230; what are you waiting for? Or are you too lazy?</p>
]]></content:encoded>
			<wfw:commentRss>http://mcherm.com/permalinks/1/the-wager/feed</wfw:commentRss>
		</item>
		<item>
		<title>Metaphorical Programming</title>
		<link>http://mcherm.com/permalinks/1/metaphorical-programming</link>
		<comments>http://mcherm.com/permalinks/1/metaphorical-programming#comments</comments>
		<pubDate>Mon, 28 Jul 2008 12:20:39 +0000</pubDate>
		<dc:creator>mcherm</dc:creator>
		
		<category><![CDATA[Programming]]></category>

		<guid isPermaLink="false">http://mcherm.com/?p=84</guid>
		<description><![CDATA[Unlike computers, humans tend to think in metaphors. That is, when we want to reason about something new or unfamiliar we reason by analogy with something familiar. This is a great mental trick and it is part of what allows humans to be flexible and to deal with unanticipated circumstances (exactly the kind of thing [...]]]></description>
			<content:encoded><![CDATA[<p>Unlike computers, humans tend to think in metaphors. That is, when we want to reason about something new or unfamiliar we reason by analogy with something familiar. This is a great mental trick and it is part of what allows humans to be flexible and to deal with unanticipated circumstances (exactly the kind of thing that computers cannot do), but there is a danger as well: where the analogy chosen is <em>not </em>a close match, our thinking can be led astray. One place where these analogies are often poor is in thinking about the process of programming.<span id="more-84"></span></p>
<h2>Programming is like doing mathematical proofs.</h2>
<p>Before the field of programming really came into existence, there was a metaphor for it: programming was like doing mathematical proofs. And before the invention of the electronic computer, it was a fairly good metaphor. After all, the first practical von Neumann machine wasn&#8217;t built <a title="Proof Without Words" href="http://www.math.umd.edu/~gfleming/JIM/PtPww/PtPwwFrame.html" target="_self"><img class="alignright" src="http://farm4.static.flickr.com/3136/2700981051_9d1fb9495c_o_d.gif" alt="Proof Without Words" /></a><a href="http://en.wikipedia.org/wiki/EDSAC">until 1949</a>, while Turing and Church were busy inventing the mathematical foundations of computer science in the early 1930s. The metaphor accurately captured the sense that programming required the same sort of logical precision as a mathematical proof. But it misleadingly implies that programs are perfectly error-free (most of us are not <a href="http://mail.python.org/pipermail/python-list/2003-October/230644.html">Knuth</a>), that creating them is a solitary process, that they are inaccessible to all but the brightest minds, and many other misleading implications. Fortunately, this analogy has been thoroughly abandoned.</p>
<h2>Programming is like writing a book.</h2>
<p>The next analogy I know of dates from the earliest days of programming on computers, and it is still with us today in some of the language we use. We speak of &#8220;writing&#8221; a program, or refer to the &#8220;author&#8217; of a particular piece of code because one of the early metaphors was that programming was like writing a book.</p>
<p><a title="(c) rachelvoorhees" href="http://www.flickr.com/photos/rachaelvoorhees/2551532922/" target="_self"><img class="alignleft" src="http://farm4.static.flickr.com/3156/2551532922_7365e6aec0_m_d.jpg" alt="(c) rachaelvoorhees " /></a>At a very shallow level, this metaphor is obvious: programming involves typing at a keyboard, just like writing. The metaphor actually has a bit more to offer than that (particularly for describing small programs and one-person efforts). Just like writing a book, the programmer begins with an outline or high-level plan. The programmer then works out the high level details in her head, but most of the details are not determined until the pen hits the page (or keyboard). Much like a book, it is important to have a good high-level structure (plot), but in the end it all comes down to proper execution of the details.</p>
<p>But the writing metaphor is also responsible for some of the most pernicious misunderstandings by non-programmers. It completely fails to capture the way in which the difficulty of programming scales more-than-linearly with the size of the program: writing a book that is 2x as long will take 2x as long but writing a program 2x as long may take 3x or 4x the effort. When poorly informed managers attempt to <a title="Why we measure productivity in LOC/month." href="http://www.folklore.org/StoryView.py?project=Macintosh&amp;story=Negative_2000_Lines_Of_Code.txt">measure productivity in Lines Of Code</a>, they are being mislead by the writing analogy. The writing metaphor fails to capture the vital role of testing and debugging in programming - which are <em>nothing</em> like editing a piece of writing. And perhaps most seriously of all, the writing metaphor does nothing to describe the fact that programming today is nearly always a <em>team</em> activity.</p>
<h2>Programming is like building a bridge.</h2>
<p>The &#8220;programming as writing&#8221; metaphor still lingers in some areas (particularly when speaking about the &#8220;lone programmer&#8221;), but the essential failure to capture the team nature of software development caused industry to adopt a different metaphor. They needed a metaphor for a large group of people coordinating to create something, and they cared deeply about the processes for measuring this process and making it repeatable; the analogy they chose was that programming is like an engineering project&#8230; the construction of a building or a bridge. The language of software projects is strongly influenced by this analogy: we speak of &#8220;building&#8221; our code, of creating scaffolding to test things.</p>
<p><a title="(c) joelogon" href="http://www.flickr.com/photos/joelogon/181070095/"><img class="alignleft" src="http://farm1.static.flickr.com/51/181070095_a56b9d7971_m_d.jpg" alt="A Bridge (c) joelogon" /></a>In many ways, the metaphor is extremely effective. It does a particularly good job of describing the way in which teams of developers are managed. The mechanisms from managing construction projects, from managerial structures to <a title="Open Source alternative to MS Project" href="http://ganttproject.biz/" target="_self">Gantt charts</a> have been applied to managing software projects, with a certain amount of success. The analogy also captures some of the role that solid requirements and good planning play in a software project.</p>
<p>But the bridge-building metaphor also fails in some important ways. One of the things that corporations want most from their programmers is predictability&#8230; most would willingly pay far more in time and cost if they could just be assured of predictable delivery. <img class="alignright" src="http://farm4.static.flickr.com/3149/2701340606_c6fdd500bb_o_d.png" alt="Gantt Chart" />Yet a substantial portion of <a title="Chart of software failure." href="http://www.infoworld.com/infoworld/img/33FEmyth2_ch2.gif">software projects fail</a>, and it can often be attributed to attempts to run a software project as if it were the building of a bridge. But when  building a bridge, one usually follows well-established engineering practices: most bridges follow an existing design. Software, by it&#8217;s nature, is constantly doing something NEW (otherwise, you&#8217;d just re-use the existing code). So problems like code running 100x slower than expected or detailed, or written requirements that bear little resemblance to what is actually needed&#8230; these problems are common in programming, yet are not even hinted at by the construction metaphor.</p>
<p>Buildings or bridges have ribbon-cutting ceremonies: the half-built bridge or incomplete building is unusable while work proceeds until a point when the project is finished and the edifice is available. This mindset has led to &#8220;big-bang delivery&#8221; in software projects&#8230; a common source of failure. And after the building is complete, the construction firm goes away &#8212; there are maintenance staff, but that is a different organization entirely. Programming effort don&#8217;t really &#8220;end&#8221; in the same way, but mislead by the construction metaphor, many software development projects <em>do</em> &#8220;end&#8221;.</p>
<h2>Programming is like gardening.</h2>
<p>In <a title="The Pragmatic Programmer" href="http://www.amazon.com/Pragmatic-Programmer-Journeyman-Master/dp/020161622X">The Pragmatic Programmer</a>, Hunt and Thomas propose a new metaphor: <a href="http://www.artima.com/intv/gardenP.html">Programming is like gardening</a>. I think that this metaphor offers significant benefits&#8230; enough that we should begin to make a conscious effort to use the gardening metaphor in our normal conversation. We should speak of &#8220;growing&#8221; the code, of &#8220;pruning&#8221; the technical debt, of &#8220;transplanting&#8221; libraries and of &#8220;weeding&#8221; out bugs.</p>
<p><a title="(c) guldfisken" href="http://www.flickr.com/photos/guldfisken/64241670/" target="_self"><img class="alignright" src="http://farm1.static.flickr.com/25/64241670_aba7638821_m_d.jpg" alt="(c) guldfisken" /></a>The first big &#8220;truth&#8221; to the gardening metaphor is that gardens aren&#8217;t suddenly opened to the public on a given date; they are slowly grown over time. Sure, you might host a garden party (marketing push) on a particular date, but that&#8217;s not the first time a non-gardener views it - there are several individual visitors to the garden before the party.</p>
<p>Also, after you get your garden planted it requires ongoing care; the plants may grow on their own, but they need constant tending. This is true of programming too. One would think that, since software is built from abstract thoughtstuff closer to Plato&#8217;s perfect forms than to base materials, it would be LESS subject to the ravages of time than mere bridges. Curiously, the truth is quiet the opposite: the Golden Gate Bridge was built 70 years ago and it stands solidly today; end of life for Windows 2000 came in <a title="End of life for MS products" href="http://www.microsoft.com/windows/lifecycle/default.mspx">2005</a>. Software suffers from <a title="Bit Rot / Software Rot" href="http://www.jargon.net/jargonfile/s/softwarerot.html">&#8220;bit rot&#8221;</a> - the tendency to stop working because of changes in hardware, libraries, operating systems, standards, or other pieces of the environment. A certain amount of ongoing care is needed to keep the software healthy.</p>
<p>There are many smaller ways in which the gardening metaphor bears fruit. Growing a plant in place &#8220;incrementally&#8221; produces a healthier plant than transplanting, but it takes longer. Different plants grow better depending on the soil quality. Sometimes you have to take out an unhealthy plant so its neighbors can flourish. There is a wealth of useful insight to be gained from this metaphor, and we should give it a serious try.</p>
]]></content:encoded>
			<wfw:commentRss>http://mcherm.com/permalinks/1/metaphorical-programming/feed</wfw:commentRss>
		</item>
	</channel>
</rss>

