<?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>jDowdle.com &#187; Web Design</title>
	<atom:link href="http://jdowdle.com/wp/category/code/web-design/feed/" rel="self" type="application/rss+xml" />
	<link>http://jdowdle.com/wp</link>
	<description></description>
	<lastBuildDate>Fri, 18 May 2012 21:49:44 +0000</lastBuildDate>
	<language>en</language>
	<sy:updatePeriod>hourly</sy:updatePeriod>
	<sy:updateFrequency>1</sy:updateFrequency>
	
		<item>
		<title>Remove Firebug&#8217;s Console.Debug() calls in 3 lines</title>
		<link>http://jdowdle.com/wp/2009/03/remove-firebugs-consoledebug-calls-in-3-lines/</link>
		<comments>http://jdowdle.com/wp/2009/03/remove-firebugs-consoledebug-calls-in-3-lines/#comments</comments>
		<pubDate>Wed, 11 Mar 2009 19:09:44 +0000</pubDate>
		<dc:creator>Jon Dowdle</dc:creator>
				<category><![CDATA[Web Design]]></category>
		<category><![CDATA[firebug]]></category>
		<category><![CDATA[IE]]></category>

		<guid isPermaLink="false">http://jdowdle.com/wp/?p=231</guid>
		<description><![CDATA[I love Firebug's console.debug() calls and use them often while writing &#38; debugging Javascript. I find it extremely helpful (it does dump out objects after all) and it is much faster than setting a break point and stepping through. So why would I want all of my console.debug calls not to work? One of (the [...]]]></description>
			<content:encoded><![CDATA[<p>I love Firebug's console.debug() calls and use them often while writing &amp; debugging Javascript. I find it extremely helpful (it does dump out objects after all) and it is much faster than setting a break point and stepping through. So why would I want all of my console.debug calls not to work?</p>
<p>One of (the many) reasons IE sucks is that it doesn't have an equivalent to Firebug*. Until that glorious day arrives when it does, those calls can render the JS non-functioning. If you have ever seen "console is not defined" you're getting warmer. So to 'neutralize' these calls in any other browser not cool enough to have Firebug all you need is these 3 lines. Don't worry, it shouldn't affect Firefox w/ Firebug installed.</p>
<pre class="javascript"><span style="color: #000066; font-weight: bold;">if</span><span style="color: #66cc66;">&#40;</span> <span style="color: #000066; font-weight: bold;">typeof</span><span style="color: #66cc66;">&#40;</span>console<span style="color: #66cc66;">&#41;</span> == <span style="color: #3366CC;">&quot;undefined&quot;</span><span style="color: #66cc66;">&#41;</span><span style="color: #66cc66;">&#123;</span>
    console = <span style="color: #003366; font-weight: bold;">new</span> Object<span style="color: #66cc66;">&#40;</span><span style="color: #66cc66;">&#41;</span>;
    console.<span style="color: #006600;">debug</span> = <span style="color: #003366; font-weight: bold;">function</span><span style="color: #66cc66;">&#40;</span>str<span style="color: #66cc66;">&#41;</span><span style="color: #66cc66;">&#123;</span> <span style="color: #000066;">alert</span><span style="color: #66cc66;">&#40;</span>str<span style="color: #66cc66;">&#41;</span>; <span style="color: #66cc66;">&#125;</span>
<span style="color: #66cc66;">&#125;</span></pre>
<p>* Note: Before anyone yells that there is Firebug Lite, I know that. It still doesn't rule nearly as much. <a href="http://getfirebug.com/lite.html">Get Firebug Lite here</a> **</p>
<p>** Note, you don't have to use alert(), actually I implore you not to (it's really annoying)</p>
]]></content:encoded>
			<wfw:commentRss>http://jdowdle.com/wp/2009/03/remove-firebugs-consoledebug-calls-in-3-lines/feed/</wfw:commentRss>
		<slash:comments>0</slash:comments>
		</item>
		<item>
		<title>Switch Subdomain Bookmarklet</title>
		<link>http://jdowdle.com/wp/2009/02/switch-subdomain-bookmarklet/</link>
		<comments>http://jdowdle.com/wp/2009/02/switch-subdomain-bookmarklet/#comments</comments>
		<pubDate>Tue, 10 Feb 2009 16:14:36 +0000</pubDate>
		<dc:creator>Jon Dowdle</dc:creator>
				<category><![CDATA[Code]]></category>
		<category><![CDATA[Web Design]]></category>
		<category><![CDATA[javascript]]></category>
		<category><![CDATA[tools]]></category>

		<guid isPermaLink="false">http://jdowdle.com/wp/?p=182</guid>
		<description><![CDATA[At work it is often necessary for us to swap subdomains to go between working copies, QA and production. So to make this a little easier I've made a simple bookmarklet to do the work for me. Just bookmark the link below to see this in action. This one is hardcoded to swap the subdomain [...]]]></description>
			<content:encoded><![CDATA[<p>At work it is often necessary for us to swap subdomains to go between working copies, QA and production. So to make this a little easier I've made a simple bookmarklet to do the work for me. Just bookmark the link below to see this in action. </p>
<p>This one is hardcoded to swap the subdomain to "dev".</p>
<p><a href='javascript:location.href=location.protocol+"//"+"dev"+"."+(location.host.split(".").length==3?location.host.split(".").slice(1,location.host.split(".").length).join("."):location.host)+location.pathname+location.search;'>Subdomain Bookmarklet</a></p>
<p>Here is one that prompts for the subdomain</p>
<p><a href='javascript:location.href=location.protocol+"//"+prompt("What subdomain?","dev")+"."+(location.host.split(".").length==3?location.host.split(".").slice(1,location.host.split(".").length).join("."):location.host)+location.pathname+location.search;'>Subdomain Bookmarklet</a></p>
]]></content:encoded>
			<wfw:commentRss>http://jdowdle.com/wp/2009/02/switch-subdomain-bookmarklet/feed/</wfw:commentRss>
		<slash:comments>0</slash:comments>
		</item>
		<item>
		<title>Design Patterns in Coldfusion (Iterator Pattern)</title>
		<link>http://jdowdle.com/wp/2008/07/design-patterns-in-coldfusion-iterator-pattern/</link>
		<comments>http://jdowdle.com/wp/2008/07/design-patterns-in-coldfusion-iterator-pattern/#comments</comments>
		<pubDate>Wed, 09 Jul 2008 03:00:18 +0000</pubDate>
		<dc:creator>Jon Dowdle</dc:creator>
				<category><![CDATA[Code]]></category>
		<category><![CDATA[Programming]]></category>
		<category><![CDATA[Web Design]]></category>
		<category><![CDATA[adobe]]></category>
		<category><![CDATA[coldfusion]]></category>
		<category><![CDATA[design pattern]]></category>
		<category><![CDATA[iterator]]></category>

		<guid isPermaLink="false">http://jdowdle.com/wp/code/design-patterns-in-coldfusion-iterator-pattern</guid>
		<description><![CDATA[This is the second article on design patterns in Coldfusion. Part one can be viewed here. Quick Description The iterator provides a single way to loop over a collection of elements without having to worry which type of collection (list, struct, array, query) it is. The interface for an iterator is quite simple with the [...]]]></description>
			<content:encoded><![CDATA[<p>This is the second article on design patterns in Coldfusion. Part one can be viewed <a href="http://jdowdle.com/wp/code/design-patterns-in-coldfusion-decorator-pattern">here</a>.</p>
<p><strong>Quick Description</strong><br />
The iterator  provides a single way to loop over a collection of elements without having to  worry which type of collection (list, struct, array, query) it is. The interface for an iterator is quite simple with the main methods being hasNext() and next(). hasNext() returns true or false depending on if there are additional elements, while next() returns the next elements.</p>
<p>Speaking of collections, there is a collection class included with the source files. Using a class to contain the collection is preferable because it abstracts the data storage method for groups of objects, which lets us use the iterator class seamlessly. I find being ignorant of the underlying data type gives much more flexibility. I plan on going to more detail with the AbstractCollection and the implementation more in a future post.</p>
<p>Most of the code is taken from Brendan O'Hara's article, with the largest exception being the addAll() method in my PersonCollection.cfc. So again, many thanks to him for his wonderful post on CFDJ.</p>
<p><strong>Included  Examples:</strong></p>
<ul>
<li>AbstractIterator.cfc
<ul>
<li>Abstract class (with CF8 this could be replaced  with &lt;cfinterface&gt;)</li>
</ul>
</li>
<li>ArrayIterator.cfc
<ul>
<li>Class to handle iterating over Arrays</li>
</ul>
</li>
<li>PersonCollection.cfc
<ul>
<li>Maintains a collection of  Persons</li>
</ul>
</li>
<li>Person.cfc
<ul>
<li>Basic  class</li>
</ul>
</li>
<li>Test.cfm
<ul>
<li>Instantiates  and displays output for all these CFCs</li>
</ul>
</li>
</ul>
<p><strong>Links:</strong><br />
<a href="http://jdowdle.com/wp/wp-content/uploads/2008/07/iterator.zip">Iterator Source Files</a></p>
<p><a href="http://coldfusion.sys-con.com/read/41587.htm">Brendan O'Hara's Iterator Article</a></p>
]]></content:encoded>
			<wfw:commentRss>http://jdowdle.com/wp/2008/07/design-patterns-in-coldfusion-iterator-pattern/feed/</wfw:commentRss>
		<slash:comments>2</slash:comments>
		</item>
		<item>
		<title>Design Patterns in Coldfusion (Decorator Pattern)</title>
		<link>http://jdowdle.com/wp/2008/07/design-patterns-in-coldfusion-decorator-pattern/</link>
		<comments>http://jdowdle.com/wp/2008/07/design-patterns-in-coldfusion-decorator-pattern/#comments</comments>
		<pubDate>Fri, 04 Jul 2008 03:15:11 +0000</pubDate>
		<dc:creator>Jon Dowdle</dc:creator>
				<category><![CDATA[Code]]></category>
		<category><![CDATA[Programming]]></category>
		<category><![CDATA[Web Design]]></category>
		<category><![CDATA[adobe]]></category>
		<category><![CDATA[coldfusion]]></category>
		<category><![CDATA[decorator]]></category>
		<category><![CDATA[design pattern]]></category>

		<guid isPermaLink="false">http://jdowdle.com/wp/code/design-patterns-in-coldfusion-decorator-pattern</guid>
		<description><![CDATA[Implementing the decorator pattern from the GoF in Coldfusion.]]></description>
			<content:encoded><![CDATA[<p>Recently, I have become <span style="text-decoration: line-through;">interested</span> obsessed with design patterns.  What caused the spark of excitement was that I was working on an algorithm similar to one of the patterns (I can't remember which) when I read Head First Design Patterns and realized it had already been created for me! By the way, I'd recommend Head First, it's a great learning series.</p>
<p>Also, I use the term "class" for "component" and "method" for "function". So without further ado,  my first article on implementing design patterns in Coldfusion.</p>
<p><strong> Decorator Pattern</strong></p>
<p>A decorator more or less wraps a base class and well...decorates it. This can be useful when you have a scenario that would need a lot of classes to cover all of the possible combinations of objects.</p>
<p><strong> My Implementation</strong><a title="Source Files" href="http://jdowdle.com/wp/wp-content/uploads/2008/07/decorator.zip"></a></p>
<p>I followed the example by Hal Helms as far as the class organization is concerned.  Some of the decorators are me being funny (piglatin and mirror), but I can see some value in the TableDecorator, JsonDecorator and XmlDecorator.</p>
<p>Let me explain each file a bit more.</p>
<ul>
<li>Test.cfm
<ul>
<li>Instantiates the components and outputs results</li>
</ul>
</li>
<li>Person.cfc
<ul>
<li>Base class (whose methods will be overridden by the decorators)</li>
</ul>
</li>
<li>PersonDecorator.cfc
<ul>
<li>Base decorator class (all decorators for Person will inherit from this class)</li>
</ul>
</li>
<li>PersonJsonDecorator.cfc
<ul>
<li>Creates a JSON representation of a Person.</li>
</ul>
</li>
<li>PersonXmlDecorator.cfc
<ul>
<li>Creates a XML representation of a Person by wrapping the elements with nodes that represent each element</li>
</ul>
</li>
<li>PersonTableDecorator.cfc
<ul>
<li>Creates a table representation of a Person by wrapping elements with &lt;td&gt;'s and the entire Person with &lt;tr&gt;</li>
</ul>
</li>
</ul>
<p><strong>Links</strong></p>
<p><a title="Source Files" href="http://jdowdle.com/wp/wp-content/uploads/2008/07/decorator.zip">Source Files</a></p>
<p><a href="http://en.wikipedia.org/wiki/Decorator_pattern" target="_blank">Wikipedia's Page on Decorators</a></p>
<p><a href="http://coldfusion.sys-con.com/read/47450.htm" target="_blank">Hal Helm's Decorator Article</a></p>
]]></content:encoded>
			<wfw:commentRss>http://jdowdle.com/wp/2008/07/design-patterns-in-coldfusion-decorator-pattern/feed/</wfw:commentRss>
		<slash:comments>1</slash:comments>
		</item>
		<item>
		<title>Integrating freeform &lt;select&gt; with JavaScript and CSS</title>
		<link>http://jdowdle.com/wp/2007/03/integrating-freeform-select-with-javascript-and-css/</link>
		<comments>http://jdowdle.com/wp/2007/03/integrating-freeform-select-with-javascript-and-css/#comments</comments>
		<pubDate>Mon, 12 Mar 2007 19:14:36 +0000</pubDate>
		<dc:creator>Jon Dowdle</dc:creator>
				<category><![CDATA[Code]]></category>
		<category><![CDATA[Programming]]></category>
		<category><![CDATA[Web Design]]></category>
		<category><![CDATA[Work]]></category>
		<category><![CDATA[html]]></category>
		<category><![CDATA[javascript]]></category>

		<guid isPermaLink="false">http://jdowdle.com/wp/?p=8</guid>
		<description><![CDATA[At work I have an application that requires a user to select a choice from a drop down box or a &#60;select&#62; control for the HTML savvy. As far as I know (or could find) there is no such control in HTML 4.01 that allows both a select box with the added bonus of taking [...]]]></description>
			<content:encoded><![CDATA[<p>At work I have an application that requires a user to select a choice from a drop down box or a &lt;select&gt; control for the HTML savvy.  As far as I know (or could find) there is no such control in HTML 4.01 that allows both a select box with the added bonus of taking free form user input.  So to meet the needs of this project I crafted one up using CSS and JavaScript.  This is my first dive into CSS/JS in a while so be gentle.<br />
<span id="more-8"></span><br />
I accomplished this by creating two elements (SELECT & INPUT) and then switching the elements visibility properties.<br />
<code><br />
&lt;script type="text/javascript" &gt;<br />
function showOther(id, id2){<br />
&nbsp;&nbsp;if(id.options[id.selectedIndex].label == "Other"){<br />
&nbsp;&nbsp;&nbsp;id.style.visibility = "hidden";<br />
&nbsp;&nbsp;&nbsp;id2.style.visibility = "visible";<br />
&nbsp;&nbsp;}<br />
}<br />
&lt;/script&gt;<br />
&lt;select id="sel1" onChange="showOther(sel1, inp1)"<br />
 style="position:absolute; left:10; top:10;" &gt;<br />
&nbsp;   &lt;option value="0" label=""&gt;&lt;/option&gt;<br />
&nbsp;   &lt;option value="1" label="Choice1"&gt;Choice1&lt;/option&gt;<br />
&nbsp;   &lt;option value="2" label="Choice2"&gt;Choice2&lt;/option&gt;<br />
&nbsp; &lt;option value="3" label="Other"&gt;Other&lt;/option&gt;<br />
&lt;/select&gt;<br />
&lt;input&nbsp;type="text"&nbsp;id="inp1"&nbsp;style="visibility='hidden'"<br />
style="position:absolute; left:10; top:10;" /&gt;<br />
</code></p>
<p>To see it in action go <a href="http://www.jdowdle.com/code/selectInputJs.html">here</a></p>
]]></content:encoded>
			<wfw:commentRss>http://jdowdle.com/wp/2007/03/integrating-freeform-select-with-javascript-and-css/feed/</wfw:commentRss>
		<slash:comments>5</slash:comments>
		</item>
		<item>
		<title>Site Update</title>
		<link>http://jdowdle.com/wp/2007/02/site-update/</link>
		<comments>http://jdowdle.com/wp/2007/02/site-update/#comments</comments>
		<pubDate>Thu, 22 Feb 2007 12:23:17 +0000</pubDate>
		<dc:creator>Jon Dowdle</dc:creator>
				<category><![CDATA[Web Design]]></category>
		<category><![CDATA[Work]]></category>

		<guid isPermaLink="false">http://jdowdle.com/wp/?p=5</guid>
		<description><![CDATA[Haven't had much time for work on much. After work I really don't have an abundance of time or much energy. I have done some sample logos but I can't seem to find a color scheme that I like. I wanted a basic layout (with some kind of graphics) to be done by Wednesday...yes...the Wednesday [...]]]></description>
			<content:encoded><![CDATA[<p>Haven't had much time for work on much.  After work I really don't have an abundance of time or much energy.</p>
<p>I have done some sample logos but I can't seem to find a color scheme that I like.  I wanted a basic layout (with some kind of graphics)  to be done by Wednesday...yes...the Wednesday that happened yesterday.  The more I think about it the more I think I might just whip up a nice textual site and come back with the graphics.</p>
<p>I also plan on looking into (and writing on) automating a process I've been having to wake up and do every other week at 5am.  Basically compressing TISAM files on the system we use at work.</p>
<p>Until later</p>
<p>-J</p>
]]></content:encoded>
			<wfw:commentRss>http://jdowdle.com/wp/2007/02/site-update/feed/</wfw:commentRss>
		<slash:comments>0</slash:comments>
		</item>
		<item>
		<title>Site Setup</title>
		<link>http://jdowdle.com/wp/2007/02/site-setup/</link>
		<comments>http://jdowdle.com/wp/2007/02/site-setup/#comments</comments>
		<pubDate>Sun, 11 Feb 2007 20:22:05 +0000</pubDate>
		<dc:creator>Jon Dowdle</dc:creator>
				<category><![CDATA[Web Design]]></category>

		<guid isPermaLink="false">http://jdowdle.com/wp/?p=3</guid>
		<description><![CDATA[I'm finally getting around to setting up this and a few other sites. Just to make life harder on myself I decided to use another registrar than the one that previous sites have used. So as of now it looks like this: jdowdle.com &#38; dowdle.org Registrar: Yahoo Hosting: Bluehost memilo.com Reg and Hosting: Bluehost blitzcow.com [...]]]></description>
			<content:encoded><![CDATA[<p>I'm finally getting around to setting up this and a few other sites.  Just to make life harder on myself I decided to use another registrar than the one that previous sites have used. So as of now it looks like this:</p>
<ul>
<li>jdowdle.com &amp; dowdle.org
<ul>
<li>Registrar: <a href="http://smallbusiness.yahoo.com">Yahoo</a></li>
<li>Hosting: <a href="http://www.bluehost.com">Bluehost</a></li>
</ul>
</li>
<li>memilo.com
<ul>
<li>Reg and Hosting: <a href="http://www.bluehost.com">Bluehost</a></li>
</ul>
</li>
<li>blitzcow.com
<ul>
<li>Reg:<a href="http://www.godaddy.com"> GoDaddy</a></li>
<li>Host: <a href="http://www.bluehost.com">Bluehost</a></li>
</ul>
</li>
<li>machsource.com &amp; machroot.com
<ul>
<li>Reg: <a href="http://www.godaddy.com">GoDaddy</a></li>
<li>No hosting yet</li>
</ul>
</li>
</ul>
<p>I plan on focusing on this site and using the blog as a way to write about work and personal projects.  This is why I have started here first.  See you soon.</p>
]]></content:encoded>
			<wfw:commentRss>http://jdowdle.com/wp/2007/02/site-setup/feed/</wfw:commentRss>
		<slash:comments>0</slash:comments>
		</item>
	</channel>
</rss>

