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

<channel>
	<title>Matt Penner &#187; Development</title>
	<atom:link href="http://mattpenner.info/category/development/feed/" rel="self" type="application/rss+xml" />
	<link>http://mattpenner.info</link>
	<description>All about Matt Penner - blog, work experience, project portfolio, skills, etc</description>
	<lastBuildDate>Wed, 30 Nov 2011 23:11:09 +0000</lastBuildDate>
	<language>en</language>
	<sy:updatePeriod>hourly</sy:updatePeriod>
	<sy:updateFrequency>1</sy:updateFrequency>
	<generator>http://wordpress.org/?v=3.2.1</generator>
		<item>
		<title>Should SSMS be built into Visual Studio?</title>
		<link>http://mattpenner.info/2011/11/30/should-ssms-be-built-into-visual-studio/</link>
		<comments>http://mattpenner.info/2011/11/30/should-ssms-be-built-into-visual-studio/#comments</comments>
		<pubDate>Wed, 30 Nov 2011 23:10:34 +0000</pubDate>
		<dc:creator>admin</dc:creator>
				<category><![CDATA[Development]]></category>

		<guid isPermaLink="false">http://mattpenner.info/2011/11/30/should-ssms-be-built-into-visual-studio/</guid>
		<description><![CDATA[SQLServerCentral sends out a daily email and today had an interesting offer to take a survey from redgate.&#160; They were asking questions of Visual Studio developers that heavily use/interact with databases. If you fit into this crowd help out by taking their survey here. Initially I really distrust the idea of having SSMS like functionality [...]]]></description>
			<content:encoded><![CDATA[<p><a href="http://www.sqlservercentral.com/" target="_blank">SQLServerCentral</a> sends out a daily email and today had an interesting offer to take a survey from <a href="http://www.red-gate.com/" target="_blank">redgate</a>.&#160; They were asking questions of Visual Studio developers that heavily use/interact with databases.</p>
<p>If you fit into this crowd help out by taking <a href="https://www.surveymk.com/s/DW5VDLM" target="_blank">their survey here</a>.</p>
<p>Initially I really distrust the idea of having SSMS like functionality within VS.&#160; I know it is already there but I just have really avoided them, though I try to use them from time to time just to give them the benefit of the doubt.</p>
<p>For some reason Microsoft tends to like to dumb down anything in VS that’s not strictly developer oriented.&#160; This is a huge separation from their current “give the power to the programmer” mentality when it comes to features like VS Add-Ins, NuGet, T4 templates, EF4 Code First, etc.&#160; For some reason DBA tools have fallen into this “black magic, we’ll hide it for you” dark side of VS.&#160; So, since VS 2003 and probably a little before, any database interaction was kept at a very high level.&#160; You simply couldn’t dive right into necessary tools like T-SQL easily.</p>
<p>Consequently I’ve always developed with VS and SSMS side by side.&#160; So, I’m in that old school stick in the mud crowd waiving my cane in the air shouting, “I&#8217;ll give you my SSMS when you pry it from my cold, dead hands!” Call me old fashioned.</p>
<p>As SSMS just continues to improve (throw SSMS Tools and other indispensible add-ons in the mix) I have had no desire to even attempt DBA functions within VS.&#160; Honestly, SSMS is becoming so nice to use it is pretty much on par with my respect of VS 2010 as <strong><em>the </em></strong>developers IDE.&#160; SSMS is <strong><em>the </em></strong>DBA’s tool of choice for me and quite happily so.</p>
<p>If they literally took SSMS and put it into VS I think I&#8217;d still avoid it.&#160; The need to Alt-Tab between the two really creates a mental context switch in my head that helps my productivity.&#160; Read my post on <a href="http://mattpenner.info/2011/11/30/alt-tab-aids-my-mental-context-switching/" target="_blank">Alt-Tab Aids My Mental Context-Switching</a> for more info on this, but it is a real productivity asset to think about.</p>
<p>If switching between SSMS and VS tools (literally and mentally) all inside the IDE were any more complicated than a simple Alt-Tab I would not be inclined to switch.&#160; </p>
<p>It would need to offer enough extra &quot;can&#8217;t live without&quot; features to overcome the current simplicity of Alt-Tabbing between VS and SSMS.&#160; For instance, I would love the idea of being able to code against a dev database and having the IDE help generate a change script, all which would be kept in source control.&#160; The entire database design should be kept in my source control as well, so that when I add a column or an index the change script and create script are entered on the next commit.</p>
]]></content:encoded>
			<wfw:commentRss>http://mattpenner.info/2011/11/30/should-ssms-be-built-into-visual-studio/feed/</wfw:commentRss>
		<slash:comments>1</slash:comments>
		</item>
		<item>
		<title>Alt-Tab Aids My Mental Context Switching</title>
		<link>http://mattpenner.info/2011/11/30/alt-tab-aids-my-mental-context-switching/</link>
		<comments>http://mattpenner.info/2011/11/30/alt-tab-aids-my-mental-context-switching/#comments</comments>
		<pubDate>Wed, 30 Nov 2011 22:57:17 +0000</pubDate>
		<dc:creator>admin</dc:creator>
				<category><![CDATA[Development]]></category>

		<guid isPermaLink="false">http://mattpenner.info/2011/11/30/alt-tab-aids-my-mental-context-switching/</guid>
		<description><![CDATA[A recent blog post about combining the functionality of SQL Server Management Studio within the Visual Studio IDE got me really thinking. Any any given moment I have at least 6-8 applications running, usually quite a bit more.&#160; When developing an app I usually have a work environment consisting of VS 2010, SSMS, Firefox (with [...]]]></description>
			<content:encoded><![CDATA[<p><a href="http://mattpenner.info/2011/11/30/should-ssms-be-built-into-visual-studio/" target="_blank">A recent blog post</a> about combining the functionality of SQL Server Management Studio within the Visual Studio IDE got me really thinking.</p>
<p>Any any given moment I have at least 6-8 applications running, usually quite a bit more.&#160; When developing an app I usually have a work environment consisting of VS 2010, SSMS, Firefox (with at least 6 tabs open), Outlook, Word, etc.&#160; Each application is only an Alt-Tab away.</p>
<p>I initially rebel at putting SSMS DBA features into VS2010 (yes, I know they are already there, I just don’t use them).&#160; Much of this has to do with the fact that historically these tools have lacked functionality, but I now realize a large part is the mental context switching that Alt-Tab provides.</p>
<p>If someone walks into my office or a phone call grabs my attention I can easily Alt-Tab to another app, or simply Ctrl-T to open a new tab in Firefox (which starts at Google) ready to handle that particular request.&#160; It doesn’t matter what I was doing before.&#160; For some reason Alt-Tab simply puts my current mental state on the stack (forgive the metaphor <img style="border-bottom-style: none; border-right-style: none; border-top-style: none; border-left-style: none" class="wlEmoticon wlEmoticon-winkingsmile" alt="Winking smile" src="http://mattpenner.info/wp-content/uploads/2011/11/wlEmoticon-winkingsmile.png" />) ready to be called up when I Alt-Tab back sometime in the future.</p>
<p>Switching between different duties using Alt-Tab seems to really trigger a context switch in my head.&#160; All this happens in the .2 seconds it takes to press Alt-Tab.</p>
<p>While DBA duties are really integrated into my development process (in my work I am the developer and DBA) I love the clean separation of concerns when I Alt-Tab between VS and SSMS.&#160; Even if SSMS were completely duplicated within VS I don’t think I’d care for it.&#160; There is just such a satisfaction with mentally putting on my DBA hat for SSMS work, even if it is simply for 20 seconds while I add a column to a table.&#160; It just <strong><em>seems </em></strong>cleaner.&#160; Unless the integration of the two tools really provides support that each tool individually couldn’t accomplish I actually see less value in combining these.&#160; Additional features, such as integrating source control over my database assets and generating data migration scripts, would prepare me to mentally believe these two tools really should be combined.</p>
<p>Now I guess I need to start to evaluating add-ons and other tools based on how easily I can task-switch the context in my head when I need to use them.</p>
]]></content:encoded>
			<wfw:commentRss>http://mattpenner.info/2011/11/30/alt-tab-aids-my-mental-context-switching/feed/</wfw:commentRss>
		<slash:comments>1</slash:comments>
		</item>
		<item>
		<title>Visual Studio JavaScript &amp; CSS Outlining</title>
		<link>http://mattpenner.info/2011/10/14/visual-studio-javascript-css-outlining/</link>
		<comments>http://mattpenner.info/2011/10/14/visual-studio-javascript-css-outlining/#comments</comments>
		<pubDate>Fri, 14 Oct 2011 17:11:26 +0000</pubDate>
		<dc:creator>admin</dc:creator>
				<category><![CDATA[Cool]]></category>
		<category><![CDATA[Development]]></category>

		<guid isPermaLink="false">http://mattpenner.info/2011/10/14/visual-studio-javascript-css-outlining/</guid>
		<description><![CDATA[Sometimes it’s the little tools that really make your day. &#160; I finally got fed up with my growing JavaScript files and thought it would be great if Visual Studio allowed me to collapse functions just like it does with c# and other source files.&#160; So I did a Google search. &#160; Well, Velio Ivanov [...]]]></description>
			<content:encoded><![CDATA[<p>Sometimes it’s the little tools that really make your day.</p>
<p>&#160;</p>
<p>I finally got fed up with my growing JavaScript files and thought it would be great if Visual Studio allowed me to collapse functions just like it does with c# and other source files.&#160; So I did a <a href="http://lmgtfy.com/?q=visual+studio+outlining+javascript" target="_blank">Google search</a>.</p>
<p>&#160;</p>
<p>Well, <a href="http://artembg.com/" target="_blank">Velio Ivanov</a> created a great little Add on that does just this and for CSS too!&#160; Thanks Velio!!!</p>
<p>&#160;</p>
<p>Check it out: <a title="http://jsoutlining.codeplex.com/" href="http://jsoutlining.codeplex.com/">http://jsoutlining.codeplex.com/</a></p>
]]></content:encoded>
			<wfw:commentRss>http://mattpenner.info/2011/10/14/visual-studio-javascript-css-outlining/feed/</wfw:commentRss>
		<slash:comments>0</slash:comments>
		</item>
		<item>
		<title>Adding a group of computers to an AD Group using PowerShell</title>
		<link>http://mattpenner.info/2011/07/14/adding-a-group-of-computers-to-an-ad-group-using-powershell/</link>
		<comments>http://mattpenner.info/2011/07/14/adding-a-group-of-computers-to-an-ad-group-using-powershell/#comments</comments>
		<pubDate>Thu, 14 Jul 2011 19:10:38 +0000</pubDate>
		<dc:creator>admin</dc:creator>
				<category><![CDATA[Cool]]></category>
		<category><![CDATA[Development]]></category>
		<category><![CDATA[PowerShell]]></category>
		<category><![CDATA[Add-ADGroupMember]]></category>
		<category><![CDATA[Get-ADComputer]]></category>

		<guid isPermaLink="false">http://mattpenner.info/2011/07/14/adding-a-group-of-computers-to-an-ad-group-using-powershell/</guid>
		<description><![CDATA[PowerShell is a lot of fun but I don’t always get to play with it.&#160; Anytime I have to do large tasks that move a lot of simple data or AD type tasks then I’ll sometimes pull it out. Recently we installed Windows 7 across our district.&#160; During that process we renamed all the computers [...]]]></description>
			<content:encoded><![CDATA[<p>PowerShell is a lot of fun but I don’t always get to play with it.&#160; Anytime I have to do large tasks that move a lot of simple data or AD type tasks then I’ll sometimes pull it out.</p>
<p>Recently we installed Windows 7 across our district.&#160; During that process we renamed all the computers because our old naming convention wasn’t always followed and it created a lot of confusion and inconsistency.</p>
<p>All our library staff computers have a special application that allows them to download barcodes that are read using a handheld barcode scanner for inventories.&#160; This previously was pushed out by a group policy.&#160; Since the computers were erased during the Win7 install and the computer names had changed we had about 25 computers that needed to be added to the group again.</p>
<p>Sounds like a perfect chore for PowerShell.</p>
<p>First of all, I forgot the name of the group that they needed to be added to, but I knew it had “dolphin” in the name, since that is the name of the software.&#160; Active Directory Users and Computers (ADUC) won’t let you search on a portion of the name, just the beginning or the end.&#160; Not much help there.</p>
<p>PowerShell makes this trivial:</p>
<p>Get-ADGroup -filter {name -like &quot;*dolph*&quot;}</p>
<p>This returned the following:</p>
<p>DistinguishedName : CN=g-InstallLibraryDolphin,OU=Computer,OU=Software Install,DC=valverde,DC=edu   <br />GroupCategory&#160;&#160;&#160;&#160; : Security    <br />GroupScope&#160;&#160;&#160;&#160;&#160;&#160;&#160; : Global    <br />Name&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160; : g-InstallLibraryDolphin    <br />ObjectClass&#160;&#160;&#160;&#160;&#160;&#160; : group    <br />ObjectGUID&#160;&#160;&#160;&#160;&#160;&#160;&#160; : 0909537b-ddcc-41c1-bd37-667fdb943a95    <br />SamAccountName&#160;&#160;&#160; : g-InstallLibraryDolphin    <br />SID&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160; : S-1-5-21-1659004503-746137067-682003330-69446</p>
<p>That’s the one!</p>
<p>Our naming convention for or library computers is wXX-Library, where XX is the two character code for the school the computer is at.&#160; However, simply filtering on this wouldn’t help, because we name all our library student computers as follows: wXX-LibrarySYY, where YY is simply a number stating at 01 and goes up for however many student computers are in the library.</p>
<p>So, here is the PowerShell command that stores all our library staff computers into a $libcomps variable, excluding the student machines:</p>
<p>$libcomps = Get-ADComputer -filter {name -like &quot;*library*&quot; -and name -notlike &quot;*libraryS*&quot;}</p>
<p>Since you cannot pipe computer objects straight into the Add-ADGroupMember commandlet (why, I have no idea but it doesn’t make sense to me) you have to iterate over the $libcomps collection and add them one by one:</p>
<p>foreach ($c in $libcomps) {Add-ADGroupMember g-InstallLibraryDolphin -Members $c}</p>
<p>The command ran for about .25 seconds and did all the work for me.&#160; I think researching the right commands to use took about 2 minutes, which is still faster than had I had to move them all over one by one.&#160; </p>
<p>Heck, this post took longer than the entire task all together. <img style="border-bottom-style: none; border-right-style: none; border-top-style: none; border-left-style: none" class="wlEmoticon wlEmoticon-smile" alt="Smile" src="http://mattpenner.info/wp-content/uploads/2011/07/wlEmoticon-smile1.png" /></p>
]]></content:encoded>
			<wfw:commentRss>http://mattpenner.info/2011/07/14/adding-a-group-of-computers-to-an-ad-group-using-powershell/feed/</wfw:commentRss>
		<slash:comments>1</slash:comments>
		</item>
		<item>
		<title>Extending Your jQuery Application with Amplify.js</title>
		<link>http://mattpenner.info/2011/07/07/extending-your-jquery-application-with-amplify-js/</link>
		<comments>http://mattpenner.info/2011/07/07/extending-your-jquery-application-with-amplify-js/#comments</comments>
		<pubDate>Thu, 07 Jul 2011 15:00:19 +0000</pubDate>
		<dc:creator>admin</dc:creator>
				<category><![CDATA[Development]]></category>
		<category><![CDATA[JavaScript]]></category>
		<category><![CDATA[jQuery]]></category>
		<category><![CDATA[Amplify.js]]></category>

		<guid isPermaLink="false">http://mattpenner.info/2011/07/07/extending-your-jquery-application-with-amplify-js/</guid>
		<description><![CDATA[This was a pretty amazing article about how to extend your jQuery code even further using Amplify.js.&#160; Elijah has a great writing style with very organized and clear examples.&#160; He first starts out with what I think is a pretty nice and clean example app.&#160; Then he proceeds to discuss various improvements he makes using [...]]]></description>
			<content:encoded><![CDATA[<p>This was a pretty amazing article about how to extend your jQuery code even further using Amplify.js.&#160; Elijah has a great writing style with very organized and clear examples.&#160; </p>
<p>He first starts out with what I think is a pretty nice and clean example app.&#160; Then he proceeds to discuss various improvements he makes using Amplify.js and refactoring to various patterns that really start to bring out the flexibility of the app.</p>
<p>Definitely take a look!</p>
<p><a title="http://msdn.microsoft.com/en-us/scriptjunkie/hh147623.aspx" href="http://msdn.microsoft.com/en-us/scriptjunkie/hh147623.aspx">http://msdn.microsoft.com/en-us/scriptjunkie/hh147623.aspx</a></p>
]]></content:encoded>
			<wfw:commentRss>http://mattpenner.info/2011/07/07/extending-your-jquery-application-with-amplify-js/feed/</wfw:commentRss>
		<slash:comments>0</slash:comments>
		</item>
		<item>
		<title>Microsoft Surface 2 with PixelSense</title>
		<link>http://mattpenner.info/2011/07/06/microsoft-surface-2-with-pixelsense/</link>
		<comments>http://mattpenner.info/2011/07/06/microsoft-surface-2-with-pixelsense/#comments</comments>
		<pubDate>Wed, 06 Jul 2011 18:09:29 +0000</pubDate>
		<dc:creator>admin</dc:creator>
				<category><![CDATA[Cool]]></category>
		<category><![CDATA[Development]]></category>
		<category><![CDATA[Hardware]]></category>
		<category><![CDATA[Microsoft Surface 2]]></category>

		<guid isPermaLink="false">http://mattpenner.info/2011/07/06/microsoft-surface-2-with-pixelsense/</guid>
		<description><![CDATA[This is just amazing stuff.&#160; When Microsoft Surface first came out you knew this was opening the door to the future.&#160; All the flashy futuristic movies where video screens are interactive and everywhere, tables, walls, etc are now coming to reality. With Surface 2 they have really taken a huge leap forward.&#160; Now they are [...]]]></description>
			<content:encoded><![CDATA[<p>This is just amazing stuff.&#160; When Microsoft Surface first came out you knew this was opening the door to the future.&#160; All the flashy futuristic movies where video screens are interactive and everywhere, tables, walls, etc are now coming to reality.</p>
<p>With Surface 2 they have really taken a huge leap forward.&#160; Now they are using LCD screens with what they call PixelSense technology.&#160; Along with R, G and B pixels there is now a fourth pixel that can detect in the infrared range.&#160; The LCD screen actually can detect the objects on the table.</p>
<p>What this does is change the older hardware with complex projectors, cameras and sensors into a sleek tabletop design.</p>
<p>Just to give you an idea here is what the original Surface typically looked like:</p>
<p><img src="http://www.microsoft.com/presspass/presskits/surfacecomputing/images/image001_low.jpg" width="266" height="179" /></p>
<p>The large enclosed portion below the glass is actually hiding the set of projectors and cameras along with the computer hardware.</p>
<p>Now, with most of the complex sensing technology actually built into the LCD they can now produce tables that look like this:</p>
<p><img src="http://technabob.com/blog/wp-content/uploads/2011/01/011011_rg_MSSurface2_02.jpg" width="329" height="234" /></p>
<p>I’ve seen Microsoft Surface products built into the wall at fancy hotels or casinos in Las Vegas.&#160; Now we’ll start seeing a lot more of these pop up everywhere.</p>
<p>It’s an amazing time to be alive! <img style="border-bottom-style: none; border-right-style: none; border-top-style: none; border-left-style: none" class="wlEmoticon wlEmoticon-smile" alt="Smile" src="http://mattpenner.info/wp-content/uploads/2011/07/wlEmoticon-smile.png" /></p>
]]></content:encoded>
			<wfw:commentRss>http://mattpenner.info/2011/07/06/microsoft-surface-2-with-pixelsense/feed/</wfw:commentRss>
		<slash:comments>0</slash:comments>
		</item>
		<item>
		<title>Making F1 Do Something Useful in Visual Studio</title>
		<link>http://mattpenner.info/2011/02/11/making-f1-do-something-useful-in-visual-studio/</link>
		<comments>http://mattpenner.info/2011/02/11/making-f1-do-something-useful-in-visual-studio/#comments</comments>
		<pubDate>Fri, 11 Feb 2011 20:04:37 +0000</pubDate>
		<dc:creator>admin</dc:creator>
				<category><![CDATA[Cool]]></category>
		<category><![CDATA[Development]]></category>
		<category><![CDATA[Fun]]></category>
		<category><![CDATA[User Experience]]></category>

		<guid isPermaLink="false">http://mattpenner.info/2011/02/11/making-f1-do-something-useful-in-visual-studio/</guid>
		<description><![CDATA[Have you ever wished that hitting the F1 key in Visual Studio actually returned good search results in a quick manner?&#160; Personally I think the F1 key returns decent results, but there certainly are a lot out there who don’t.&#160; I mostly work in .Net so I’m in the camp of users that F1 works [...]]]></description>
			<content:encoded><![CDATA[<p>Have you ever wished that hitting the F1 key in Visual Studio actually returned good search results in a quick manner?&#160; </p>
<p>Personally I think the F1 key returns decent results, but there certainly are a lot out there who don’t.&#160; I mostly work in .Net so I’m in the camp of users that F1 works well for.</p>
<p>The think I really don’t like though is the 30 seconds or so it takes to launch the help window.&#160; Once you’re there navigation is pretty painful.</p>
<p>For the last several years I’ve all but abandoned F1 and just search Google with “msdn” and my search term.&#160; 95% of the time this returns exactly what I want in the first hit.</p>
<p>Wouldn’t it be nice if we could make Visual Studio do this for us?&#160; Well, we can, and have been able to for years!</p>
<p>Check out <a href="http://www.codeproject.com/Tips/156089/Making-F1-do-something-useful-in-Visual-Studio.aspx" target="_blank">OriginalGriff’s solution on Code Project</a>.&#160; He clearly outlines the steps and I have to say his solution is quite nice and tidy.</p>
<p>However, I had two very minor criticism, purely for my own tastes.&#160; This solution opens the webpage inside of Visual Studio’s web browser inside the IDE.&#160; This works, but I really like using my own default browser (currently Chrome).&#160; This allows me to open up various hits in several tabs and bookmark interesting solutions.&#160; I can’t do that in the VS browser window.</p>
<p>Second is it grabs the selected text and performs the search on this.&#160; If you don’t select anything it just opens up a search for “msdn”.&#160; The original F1 functionality use to search whatever word your text cursor was on, nothing had to be selected.&#160; I’m lazy and I like this ability.</p>
<p>Last, but not least, as I was writing this blog post and stated above that 95% of the time my search term came up in the first result it hit me. <img alt="OMG" align="top" src="http://www.codeproject.com/script/Forums/Images/smiley_OMG.gif" /> If I think that what I want will be my first hit, why not just return Google&#8217;s first result; the equivalent of hitting the older I&#8217;m Feeling Lucky button on Google&#8217;s home page. If you look at Griff’s solution you will see below it that I proposed an alternate solution that adds these three features.&#160; Now, when I hit F1 or Shift+F1 I, respectively, get the Google search or the first hit directly.</p>
<p>Enjoy!</p>
]]></content:encoded>
			<wfw:commentRss>http://mattpenner.info/2011/02/11/making-f1-do-something-useful-in-visual-studio/feed/</wfw:commentRss>
		<slash:comments>0</slash:comments>
		</item>
		<item>
		<title>Testing Browser Compatibility Made Easier with Microsoft VHDs</title>
		<link>http://mattpenner.info/2010/12/16/testing-browser-compatibility-made-easier-with-microsoft-vhds/</link>
		<comments>http://mattpenner.info/2010/12/16/testing-browser-compatibility-made-easier-with-microsoft-vhds/#comments</comments>
		<pubDate>Thu, 16 Dec 2010 22:57:22 +0000</pubDate>
		<dc:creator>admin</dc:creator>
				<category><![CDATA[Development]]></category>

		<guid isPermaLink="false">http://mattpenner.info/2010/12/16/testing-browser-compatibility-made-easier-with-microsoft-vhds/</guid>
		<description><![CDATA[When you are a website developer, hardly ever do you get to mandate what browsers your users will use.&#160; At my last employment we built a lot of Intranet web applications for our users, who all used the same version of IE that was managed automatically on their work computers via Active Directory.&#160; That was [...]]]></description>
			<content:encoded><![CDATA[<p>When you are a website developer, hardly ever do you get to mandate what browsers your users will use.&#160; At my last employment we built a lot of Intranet web applications for our users, who all used the same version of IE that was managed automatically on their work computers via Active Directory.&#160; That was nice.</p>
<p>At my current position the websites I create are used by a variety of school districts and the public.&#160; While the majority of users are browsing my sites with IE7 and IE8 there are a few Chrome, FireFox, Safari and, yes, IE6 users.</p>
<p>&#160;</p>
<p>There is a great community of software applications and web services to help you test how your site will react with different browsers.&#160; Most of them are fairly static showing you how a page will render, but with highly dynamic sites you just need to see how it will work on the actual browser.</p>
<p>Fortunately Microsoft makes this really easy by releasing VHDs with various operating systems and browsers loaded, from WinXP and IE6 up to Vista and IE8.&#160; That’s not the whole Microsoft gamut but it is a good portion and easy to use.&#160; Just load up Microsoft Virtual PC and you are set to go.</p>
<p>Take a look at Microsoft’s offerings <a href="http://www.microsoft.com/downloads/en/details.aspx?FamilyID=21eabb90-958f-4b64-b5f1-73d0a413c8ef&amp;displaylang=en" target="_blank">here</a>.</p>
]]></content:encoded>
			<wfw:commentRss>http://mattpenner.info/2010/12/16/testing-browser-compatibility-made-easier-with-microsoft-vhds/feed/</wfw:commentRss>
		<slash:comments>0</slash:comments>
		</item>
		<item>
		<title>Alternating Ordered List Item Styles</title>
		<link>http://mattpenner.info/2010/12/07/alternating-ordered-list-item-styles/</link>
		<comments>http://mattpenner.info/2010/12/07/alternating-ordered-list-item-styles/#comments</comments>
		<pubDate>Tue, 07 Dec 2010 18:28:39 +0000</pubDate>
		<dc:creator>admin</dc:creator>
				<category><![CDATA[Cool]]></category>
		<category><![CDATA[Development]]></category>
		<category><![CDATA[JavaScript]]></category>

		<guid isPermaLink="false">http://mattpenner.info/2010/12/07/alternating-ordered-list-item-styles/</guid>
		<description><![CDATA[We have Policies and Procedures document that we are making available on our website.&#160; This document in its entirety easily spans several hundred pages and has a pretty lengthy table of contents.&#160; To help make this easy to navigate and easier to consume we are posting several of the larger topics as individual documents and [...]]]></description>
			<content:encoded><![CDATA[<p>We have Policies and Procedures document that we are making available on our website.&#160; This document in its entirety easily spans several hundred pages and has a pretty lengthy table of contents.&#160; </p>
<p>To help make this easy to navigate and easier to consume we are posting several of the larger topics as individual documents and making them available from a linked table of contents that is created as a web page.</p>
<p>The requirement is that the table of contents uses different numbering styles at each indentation.&#160; So, for instance, the outline below:</p>
<p><font face="Times New Roman">Topic A</font></p>
<p><font face="Times New Roman">&#160;&#160; Sub-topic A.1</font></p>
<p><font face="Times New Roman">&#160;&#160; Sub-topic A.2</font></p>
<p><font face="Times New Roman">&#160;&#160;&#160;&#160;&#160; Sub-topic A.2.1</font></p>
<p><font face="Times New Roman">&#160;&#160;&#160;&#160;&#160; Sub-topic A.2.2</font></p>
<p><font face="Times New Roman">Topic B</font></p>
<p><font face="Times New Roman">Topic C</font></p>
<p>would become:</p>
<p><font face="Times New Roman">1. Topic A</font></p>
<p><font face="Times New Roman">&#160;&#160; a. Sub-topic A.1</font></p>
<p><font face="Times New Roman">&#160;&#160; b. Sub-topic A.2</font></p>
<p><font face="Times New Roman">&#160;&#160;&#160;&#160;&#160; i. Sub-topic A.2.1</font></p>
<p><font face="Times New Roman">&#160;&#160;&#160;&#160;&#160; ii. Sub-topic A.2.2</font></p>
<p><font face="Times New Roman">2. Topic B</font></p>
<p><font face="Times New Roman">3. Topic C</font></p>
<p>This document isn’t maintained in a database yet so for now the table of contents is created in good old fashioned HTML.&#160; Using a standard &lt;ol&gt; (ordered list) element in HTML looks initially like this:</p>
<ol>
<li>Topic A
<ol>
<li>Sub-topic A.1 </li>
<li>Sub-topic A.2
<ol>
<li>Sub-topic A.2.1 </li>
<li>Sub-topic A.2.2 </li>
</ol>
</li>
</ol>
</li>
<li>Topic B </li>
<li>Topic C </li>
</ol>
<p>The way to change the numbering style is by using the CSS list-style-type style on the &lt;ol&gt; element with various options such as decimal, lower-alpha and lower-roman.&#160; You can find a great example of this at <a href="http://www.w3schools.com/css/pr_list-style-type.asp" target="_blank">w3schools</a>.&#160; So, I could manually change the list style of each &lt;ol&gt; tag based on how much it was indented, but this would be a pain to maintain.&#160; Anytime we changed the layout I would have to change the list-style-type styles and be sure to keep everything consistent.&#160; I thought this would be a perfect place to use <a href="http://www.jquery.com" target="_blank">jQuery</a>.</p>
<p>Using jQuery I was able to define an array of the types I wanted to use.&#160; jQuery would then find all the &lt;ol&gt; and nested &lt;ol&gt; elements and change the style for each indentation.&#160; Once done I could simply maintain the table of contents and jQuery would handle the styling. I couldn’t find any jQuery plug-ins that did this so here is the code I came up with.&#160; If I end up using more than a couple of times I’ll probably create a plug-in for it.</p>
<div style="border-bottom: #cecece 1px solid; border-left: #cecece 1px solid; padding-bottom: 5px; background-color: #fbfbfb; min-height: 40px; padding-left: 5px; width: 456px; padding-right: 5px; overflow: auto; border-top: #cecece 1px solid; border-right: #cecece 1px solid; padding-top: 5px;  color: #000000">
<div style="background-color: #fbfbfb; margin: 0em; width: 100%; font-family: consolas,&#39;Courier New&#39;,courier,monospace; font-size: 12px">  1:      <span style="color: #0000ff">function     </span> styleOutline() {    </div>
<div style="background-color: #fbfbfb; margin: 0em; width: 100%; font-family: consolas,&#39;Courier New&#39;,courier,monospace; font-size: 12px">  2:          <span style="color: #0000ff">// List-item-styles we would like to use     </span>   </div>
<div style="background-color: #fbfbfb; margin: 0em; width: 100%; font-family: consolas,&#39;Courier New&#39;,courier,monospace; font-size: 12px">  3:          <span style="color: #0000ff">var     </span> olStyles = ['decimal', 'lower-alpha', 'lower-roman'];    </div>
<div style="background-color: #fbfbfb; margin: 0em; width: 100%; font-family: consolas,&#39;Courier New&#39;,courier,monospace; font-size: 12px">  4:     </div>
<div style="background-color: #fbfbfb; margin: 0em; width: 100%; font-family: consolas,&#39;Courier New&#39;,courier,monospace; font-size: 12px">  5:          <span style="color: #0000ff">// Process the parent element.     </span>   </div>
<div style="background-color: #fbfbfb; margin: 0em; width: 100%; font-family: consolas,&#39;Courier New&#39;,courier,monospace; font-size: 12px">  6:     styleOl($(&#8216;ol:first&#8217;), 0);    </div>
<div style="background-color: #fbfbfb; margin: 0em; width: 100%; font-family: consolas,&#39;Courier New&#39;,courier,monospace; font-size: 12px">  7:     </div>
<div style="background-color: #fbfbfb; margin: 0em; width: 100%; font-family: consolas,&#39;Courier New&#39;,courier,monospace; font-size: 12px">  8:          <span style="color: #0000ff">function     </span> styleOl(element, styleIndex) {    </div>
<div style="background-color: #fbfbfb; margin: 0em; width: 100%; font-family: consolas,&#39;Courier New&#39;,courier,monospace; font-size: 12px">  9:              <span style="color: #0000ff">// Apply style     </span>   </div>
<div style="background-color: #fbfbfb; margin: 0em; width: 100%; font-family: consolas,&#39;Courier New&#39;,courier,monospace; font-size: 12px"> 10:         element.css(&#8216;list-style-type&#8217;, olStyles[styleIndex % olStyles.     <span style="color: #0000ff">length     </span>]);    </div>
<div style="background-color: #fbfbfb; margin: 0em; width: 100%; font-family: consolas,&#39;Courier New&#39;,courier,monospace; font-size: 12px"> 11:     </div>
<div style="background-color: #fbfbfb; margin: 0em; width: 100%; font-family: consolas,&#39;Courier New&#39;,courier,monospace; font-size: 12px"> 12:              <span style="color: #0000ff">// Call recursively for each nested ol     </span>   </div>
<div style="background-color: #fbfbfb; margin: 0em; width: 100%; font-family: consolas,&#39;Courier New&#39;,courier,monospace; font-size: 12px"> 13:         element.children().each(    </div>
<div style="background-color: #fbfbfb; margin: 0em; width: 100%; font-family: consolas,&#39;Courier New&#39;,courier,monospace; font-size: 12px"> 14:                  <span style="color: #0000ff">function     </span> (i) {    </div>
<div style="background-color: #fbfbfb; margin: 0em; width: 100%; font-family: consolas,&#39;Courier New&#39;,courier,monospace; font-size: 12px"> 15:                      <span style="color: #0000ff">var     </span> ol = $(     <span style="color: #0000ff">this     </span>).children();    </div>
<div style="background-color: #fbfbfb; margin: 0em; width: 100%; font-family: consolas,&#39;Courier New&#39;,courier,monospace; font-size: 12px"> 16:                      <span style="color: #0000ff">if     </span> (ol) {    </div>
<div style="background-color: #fbfbfb; margin: 0em; width: 100%; font-family: consolas,&#39;Courier New&#39;,courier,monospace; font-size: 12px"> 17:                     styleOl(ol, styleIndex + 1);    </div>
<div style="background-color: #fbfbfb; margin: 0em; width: 100%; font-family: consolas,&#39;Courier New&#39;,courier,monospace; font-size: 12px"> 18:                 }    </div>
<div style="background-color: #fbfbfb; margin: 0em; width: 100%; font-family: consolas,&#39;Courier New&#39;,courier,monospace; font-size: 12px"> 19:             }    </div>
<div style="background-color: #fbfbfb; margin: 0em; width: 100%; font-family: consolas,&#39;Courier New&#39;,courier,monospace; font-size: 12px"> 20:         );    </div>
<div style="background-color: #fbfbfb; margin: 0em; width: 100%; font-family: consolas,&#39;Courier New&#39;,courier,monospace; font-size: 12px"> 21:     }    </div>
<div style="background-color: #fbfbfb; margin: 0em; width: 100%; font-family: consolas,&#39;Courier New&#39;,courier,monospace; font-size: 12px"> 22: }    </div>
<div style="background-color: #fbfbfb; margin: 0em; width: 100%; font-family: consolas,&#39;Courier New&#39;,courier,monospace; font-size: 12px"> 23:    </div>
</p></div>
<p>This works great and took me only a couple of minutes to do. Definitely an improvement over the manually written way.&#160; I hope this helps someone else out there!</p>
]]></content:encoded>
			<wfw:commentRss>http://mattpenner.info/2010/12/07/alternating-ordered-list-item-styles/feed/</wfw:commentRss>
		<slash:comments>0</slash:comments>
		</item>
		<item>
		<title>When Bad UI Sticks Around &#8211; JavaScript Alert Boxes</title>
		<link>http://mattpenner.info/2010/12/01/when-bad-ui-sticks-around-javascript-alert-boxes/</link>
		<comments>http://mattpenner.info/2010/12/01/when-bad-ui-sticks-around-javascript-alert-boxes/#comments</comments>
		<pubDate>Wed, 01 Dec 2010 18:42:00 +0000</pubDate>
		<dc:creator>admin</dc:creator>
				<category><![CDATA[Development]]></category>
		<category><![CDATA[JavaScript]]></category>
		<category><![CDATA[User Experience]]></category>

		<guid isPermaLink="false">http://mattpenner.info/2010/12/01/when-bad-ui-sticks-around-javascript-alert-boxes/</guid>
		<description><![CDATA[We recently migrated from one online IEP vendor to another.&#160; This is a program for collecting and managing Special Ed information, but it is an enterprise app and worthy of critique and comment.&#160; They do a great job, but there are some small UI issues I wish could be fixed. For instance, when you enter [...]]]></description>
			<content:encoded><![CDATA[<p>We recently migrated from one online IEP vendor to another.&#160; This is a program for collecting and managing Special Ed information, but it is an enterprise app and worthy of critique and comment.&#160; They do a great job, but there are some small UI issues I wish could be fixed.</p>
<p>For instance, when you enter data onto a form and try to leave the form without saving they do a nice job of alerting you that you are about to lose the valuable data you just entered.&#160; However, there is a catch:</p>
<p><a href="http://mattpenner.info/wp-content/uploads/2010/12/SNAGHTML97e6ac4.png"><img style="border-bottom: 0px; border-left: 0px; display: inline; border-top: 0px; border-right: 0px" title="SNAGHTML97e6ac4" border="0" alt="SNAGHTML97e6ac4" src="http://mattpenner.info/wp-content/uploads/2010/12/SNAGHTML97e6ac4_thumb.png" width="302" height="127" /></a></p>
<p>Ouch, did you read that correctly?&#160; “Hit CANCEL to Leave this page.”&#160; The problem with that is I would say 99% of users are used to hitting Cancel when they realize they made a mistake and want to undo it.&#160; Several times I’ve had to stop my knee-jerk reaction to hit cancel when I realized I updated something and didn’t hit Save.</p>
<p>Not only are the button actions inconsistent with what users are used to but I would go further and state they are <strong><em>actually opposite</em></strong>, which to me is one of the worst UI anti-patterns.&#160; In addition the buttons are not very informative, OK and Cancel just don’t tell you what they are doing with your data.&#160; Unfortunately I think it might be stuck as it is.&#160; The software now boasts adoption of over half the state of California.&#160; That’s a good sized client base and the current users are already conditioned to hitting OK to go back to the page and hit the Save button.&#160; If the vendor were to reverse the impact of the buttons now I can just imagine the outcry there would be over users losing data because they are simply used to hitting OK.&#160; You see, no matter how many emails, home page news alerts or training documents you give out half the users won’t even bother to read them.&#160; They won’t know there is a change until they have already lost their data.&#160; Not a good thing.</p>
<p>If I were to have to implement this change I would re-label the buttons all together.&#160; This would not only alert the user that something functions differently then what they are used to but it would also make the dialog more usable, which is also a good UI pattern.&#160; Unfortunately you cannot do this with plain JavaScript.&#160; Since the vendor already makes use of <a href="http://jquery.com/" target="_blank">jQuery</a> the <a href="http://jqueryui.com/demos/dialog/" target="_blank">UI Dialog</a> plug-in is a great tool to use.&#160; It also standardizes the dialog boxes since JavaScript alerts are handled inconsistently between browsers.</p>
<p>Here’s a sample of what I would do using the jQuery UI Dialog plug-in.&#160; I think it is easy to read and clear in informing the user on what they are about to do.&#160; While this would be a change to what users are used to I think it would be one that is easily adapted to.</p>
<p><a href="http://mattpenner.info/wp-content/uploads/2010/12/image1.png"><img style="border-bottom: 0px; border-left: 0px; display: inline; border-top: 0px; border-right: 0px" title="image" border="0" alt="image" src="http://mattpenner.info/wp-content/uploads/2010/12/image_thumb1.png" width="478" height="85" /></a></p>
]]></content:encoded>
			<wfw:commentRss>http://mattpenner.info/2010/12/01/when-bad-ui-sticks-around-javascript-alert-boxes/feed/</wfw:commentRss>
		<slash:comments>0</slash:comments>
		</item>
	</channel>
</rss>

