(205,223,4,1,1,NULL,'{\"authorId\":1,\"title\":{\"title\":{}},\"slug\":\"weekly-link-round-up-26\",\"postDate\":1208017103,\"expiryDate\":null,\"enabled\":1,\"fields\":{\"2\":\"<p>It was a pretty busy week with regular work and freelance work, but here are a few things that I found interesting this week:<\\/p>\\n\\n<ul>\\n<li><a href=\\\"http:\\/\\/bokardo.com\\/archives\\/you-didnt-come-here-from-google\\/\\\">You didn&rsquo;t come here from Google<\\/a>\\n<p>Apparently Joshua Porter&rsquo;s blog was flooded with spam links, and his blog was dropped from the Google index. This was the result of a well-known WordPress hack. This example shows the importance of staying on top of upgrading when a new version is released. On the other hand, it is really sad the society we live in. Do these hackers really gain that much from this crap? It&rsquo;s really annoying.<\\/p>\\n<\\/li>\\n<li><a href=\\\"http:\\/\\/www.email-standards.org\\/gmail-appeal\\\">The 2008 Gmail Appeal<\\/a>\\n<p>Easily the best thing I saw this week. I think Outlook 2007 is more of a problem than Gmail, but really it is just HTML emails in general.<\\/p>\\n<p><object type=\\\"application\\/x-shockwave-flash\\\" width=\\\"450\\\" height=\\\"340\\\" data=\\\"http:\\/\\/www.vimeo.com\\/moogaloop.swf?clip_id=873823&amp;server=www.vimeo.com&amp;fullscreen=1&amp;show_title=1&amp;show_byline=1&amp;show_portrait=0&amp;color=\\\"> <param name=\\\"quality\\\" value=\\\"best\\\" \\/><param name=\\\"allowfullscreen\\\" value=\\\"true\\\" \\/> <param name=\\\"scale\\\" value=\\\"showAll\\\" \\/><param name=\\\"movie\\\" value=\\\"http:\\/\\/www.vimeo.com\\/moogaloop.swf?clip_id=873823&amp;server=www.vimeo.com&amp;fullscreen=1&amp;show_title=1&amp;show_byline=1&amp;show_portrait=0&amp;color=\\\" \\/><\\/object><\\/p>\\n<\\/li>\\n<\\/ul>\\n<!--more-->\\n<ul>\\n<li><a href=\\\"http:\\/\\/www.alistapart.com\\/issues\\/256\\\">A List Apart: Issue 256<\\/a>\\n<p>Interesting issue this week from A List Apart. Two articles about adding some non-textual visualizations to your sites. First, in <a href=\\\"http:\\/\\/www.alistapart.com\\/articles\\/accessibledatavisualization\\\">Accessible Data Visualization with Web Standards<\\/a>, &ldquo;Wilson Miner demonstrates three techniques for incorporating data visualization into standards-based navigation patterns&rdquo;. Next, in <a href=\\\"http:\\/\\/www.alistapart.com\\/articles\\/takecontrolofyourmaps\\\">Take Control of Your Maps<\\/a>, Paul Smith shows that we do not have to only rely on the Google Maps UI to create awesome mapping solutions.<\\/p>\\n<\\/li>\\n<li><a href=\\\"http:\\/\\/alphablogdesigns.com\\/2008\\/04\\/08\\/signs-obsessed-with-design\\/\\\">24 Checkpoint Signs You&rsquo;re Obsessed with Web\\/Graphic Design<\\/a>\\n<p>Pretty funny list, even thought I am really not a designer.<\\/p>\\n<\\/li>\\n<li><a href=\\\"http:\\/\\/www.readwriteweb.com\\/archives\\/google_crawling_html_forms.php\\\">Googlebot Crawls Through HTML Forms<\\/a>\\n<p>It is going to be very interesting to see how this changes some of the stuff indexed. Although they do note that only forms submitted with the GET method will be crawled, which makes sense.<\\/p>\\n<\\/li>\\n<\\/ul>\",\"4\":{\"website\":{}}}}','2014-01-19 12:59:54','2014-08-08 19:32:28','d7b6caeb-9ed1-4046-a3e4-a93a23538538',1),(206,224,4,1,1,NULL,'{\"authorId\":1,\"title\":{\"title\":{}},\"slug\":\"why-ill-be-going-naked-tomorrow\",\"postDate\":1207651252,\"expiryDate\":null,\"enabled\":1,\"fields\":{\"2\":\"<p>Tomorrow is the third annual <a href=\\\"http:\\/\\/naked.dustindiaz.com\\/\\\">CSS Naked Day<\\/a>, and I will be participating, just as I did last year. Some people may wonder: why would you strip the design from your site for a whole day? Won&rsquo;t you lose visitors?<\\/p>\\n\\n<p>Well, you may, but you are helping to promote web standards. I take the time and effort to write well structured XHTML, so my site is perfectly usable without the design.<\\/p>\\n\\n<p>I&rsquo;ll be striping my design with the <a href=\\\"http:\\/\\/wordpress.org\\/extend\\/plugins\\/css-naked-day-noscript\\/\\\">CSS Naked Day WordPress Plugin<\\/a>. I encourage everyone else to <strong>strip down and show off your <code>body<\\/code><\\/strong>.<\\/p>\",\"4\":{\"website\":{}}}}','2014-01-19 12:59:54','2014-08-08 19:32:28','47e4be93-490a-45bc-a794-3c40e201bc3a',1),(207,225,4,1,1,NULL,'{\"authorId\":1,\"title\":{\"title\":{}},\"slug\":\"weekly-link-round-up-25\",\"postDate\":1207440798,\"expiryDate\":null,\"enabled\":1,\"fields\":{\"2\":\"<p>It was crazy to see the amount of traffic I got for <a href=\\\"http:\\/\\/trevordavis.net\\/blog\\/tutorial\\/the-6-most-important-css-techniques-you-need-to-know\\/\\\">The 6 Most Important CSS Techniques You Need To Know<\\/a>. Because of it, I stopped using <a href=\\\"http:\\/\\/novemberborn.net\\/sifr3\\\">sIFR<\\/a> because of how much it was slowing down the page loading. I think it&rsquo;s great for a few instances on a page, but if you use it for every heading, then you begin to get into trouble. Only a few interesting things I found this week:<\\/p>\\n\\n<ul>\\n<li><a href=\\\"http:\\/\\/www.andyrutledge.com\\/non-commitment.php\\\">A Sense of Non-Commitment<\\/a>\\n<p>This article was very interesting considering I have a full-time job and do some freelancing on the side. I do have to get all of my freelance work cleared with my company though.<\\/p>\\n<\\/li>\\n<li><a href=\\\"http:\\/\\/cameronmoll.com\\/archives\\/2008\\/04\\/extensible_css_interface_testing_extensibility\\/\\\">Extensible CSS Interface IV: Testing for Extensibility<\\/a>\\n<p>The final part of the IV part series. This was a great series, combining numerous excellent techniques.<\\/p>\\n<\\/li>\\n<li><a href=\\\"http:\\/\\/www.darrenhoyt.com\\/2008\\/04\\/02\\/timthumb-php-script-released\\/\\\">TimThumb PHP Script Released<\\/a>\\n<p>Very nice PHP on-the-fly image resizing.<\\/p>\\n<\\/li>\\n<li><a href=\\\"http:\\/\\/ilovetypography.com\\/2008\\/04\\/04\\/on-choosing-type\\/\\\">On Choosing Type<\\/a>\\n<p>Great article discussing a few guidelines to follow when choosing type.<\\/p>\\n<\\/li>\\n<\\/ul>\",\"4\":{\"website\":{}}}}','2014-01-19 12:59:54','2014-08-08 19:32:28','6754f81d-5db4-4fe1-bda5-5a0338681bd5',1),(208,226,4,1,1,NULL,'{\"authorId\":1,\"title\":{\"title\":{}},\"slug\":\"the-6-most-important-css-techniques-you-need-to-know\",\"postDate\":1206924013,\"expiryDate\":null,\"enabled\":1,\"fields\":{\"2\":\"<p>I thought I would give a quick tutorial, with examples, of the 6 most important CSS techniques that I think you need to know:<\\/p>\\n<ol>\\n<li>Get a Consistent Base Font Size<\\/li>\\n<li>Get Consistent Margins<\\/li>\\n<li>Set a Float to Clear a Float<\\/li>\\n<li>Image Replacement<\\/li>\\n<li>Faux Columns<\\/li>\\n<li>CSS Sprites<\\/li>\\n<\\/ol>\\n<!--more-->\\n<h2 class=\\\"replaceHeadline\\\">1. Get a Consistent Base Font Size<\\/h2>\\n\\n<div class=\\\"codeblock\\\"><code>\\nbody&nbsp;&#123;&nbsp;font-size:&nbsp;62.5%;&nbsp;&#125;&nbsp;\\n\\n<\\/code><\\/div>\\n\\n<p>Until IE finally supports the resizing of text in pixels, this is the best technique to gain full control over your font sizes. By setting the body <code>font-size<\\/code> to 62.5%, that will set your font size to 10 pixels. That way, 1em is equal to 10 pixels.<\\/p>\\n\\n<p>Although I typically then set my container <code>font-size<\\/code> to 1.2em, which in turn sets the <code>font-size<\\/code> to 12 pixels. But still, then you know that 1em is equal to 12 pixels.<\\/p>\\n\\n<p><a href=\\\"http:\\/\\/trevordavis.net\\/play\\/important-css-techniques\\/base-font-size\\/\\\">See the example &raquo;<\\/a><\\/p>\\n\\n<h2 class=\\\"replaceHeadline\\\">2. Get Consistent Margins<\\/h2>\\n<p>There are <a href=\\\"http:\\/\\/meyerweb.com\\/eric\\/tools\\/css\\/reset\\/\\\">some great CSS resets<\\/a> out there, but I usually don&rsquo;t need one that goes so far. I like to just remove the margin and padding from every element.<\\/p>\\n\\n<div class=\\\"codeblock\\\"><code>\\nhtml,&nbsp;body,&nbsp;div,&nbsp;h1,&nbsp;h2,&nbsp;h3,&nbsp;h4,&nbsp;h5,&nbsp;h6,&nbsp;ul,&nbsp;ol,&nbsp;dl,&nbsp;li,&nbsp;dt,&nbsp;dd,&nbsp;p,&nbsp;blockquote,&nbsp;pre,&nbsp;form,&nbsp;fieldset,&nbsp;table,&nbsp;th,&nbsp;td&nbsp;&#123;&nbsp;margin:&nbsp;0;&nbsp;padding:&nbsp;0;&nbsp;&#125;&nbsp;\\n\\n<\\/code><\\/div>\\n\\n<p>Then, you can set the margins that you want accordingly.<\\/p>\\n\\n<p><a href=\\\"http:\\/\\/trevordavis.net\\/play\\/important-css-techniques\\/get-consistent-margins\\/\\\">See the example &raquo;<\\/a><\\/p>\\n\\n<h2 class=\\\"replaceHeadline\\\">3. Set a Float to Clear a Float<\\/h2>\\n\\n<p>Floating is probably one of the most important things to understand with CSS, but knowing how to clear floats is necessary too. All you need to remember is: <strong>Set a Float to Clear a Float<\\/strong>.<\\/p>\\n\\n<p>I have created a <a href=\\\"http:\\/\\/trevordavis.net\\/play\\/important-css-techniques\\/set-a-float-to-clear-a-float\\/\\\">simple page with two floating columns next to each other<\\/a>. You will notice in the example that the grey background does not contain the floating columns. So, the easiest thing to do is to <a href=\\\"http:\\/\\/trevordavis.net\\/play\\/important-css-techniques\\/set-a-float-to-clear-a-float\\/set-a-float-to-clear-a-float-fixed\\/\\\">set the containing element to float<\\/a>. But now, you will see that the container background doesn&rsquo;t contain the content area.<\\/p>\\n\\n<p>Since the container has <code>margin: 0 auto<\\/code>, we do not want to float it because it will move it to whichever side we float it. So another way to clear the float, is to <a href=\\\"http:\\/\\/trevordavis.net\\/play\\/important-css-techniques\\/set-a-float-to-clear-a-float\\/set-a-float-to-clear-a-float-fixed-more\\/\\\">insert a clearing element<\\/a>. In this case, I just use an empty <code>div<\\/code> set to <code>clear: both<\\/code>. Now, there are other ways to <a href=\\\"http:\\/\\/www.positioniseverything.net\\/easyclearing.html\\\">clear a float without markup<\\/a>, but I have noticed some inconsistencies with that technique, so I just sacrifice an empty <code>div<\\/code>.<\\/p>\\n\\n<h2 class=\\\"replaceHeadline\\\">4. Image Replacement<\\/h2>\\n<p>Sure, <a href=\\\"http:\\/\\/www.mezzoblue.com\\/tests\\/revised-image-replacement\\/\\\">there are a lot of different image replacement techniques<\\/a>. But, I think that you get to most benefits from this technique. I also discussed this technique in a previous article, <a href=\\\"http:\\/\\/trevordavis.net\\/blog\\/tutorial\\/improved-navigation-image-replacement\\/\\\">Improved Navigation Image Replacement<\\/a><\\/p>\\n\\n<h3 class=\\\"replaceHeadline\\\">The Markup<\\/h3>\\n<div class=\\\"codeblock\\\"><code>\\n&lt;h1&nbsp;id=\\\"logo\\\"&gt;Company&nbsp;Name&lt;span&gt;&lt;\\/span&gt;&lt;\\/h1&gt;&nbsp;\\n\\n<\\/code><\\/div>\\n\\n<h3 class=\\\"replaceHeadline\\\">The CSS<\\/h3>\\n<div class=\\\"codeblock\\\"><code>\\nh1#logo&nbsp;&#123;<br \\/>&nbsp;height:&nbsp;110px;<br \\/>&nbsp;overflow:&nbsp;hidden;<br \\/>&nbsp;position:&nbsp;relative;<br \\/>&nbsp;width:&nbsp;560px;<br \\/>&#125;<br \\/>h1#logo&nbsp;span&nbsp;&#123;<br \\/>&nbsp;background:&nbsp;url(\\/images\\/content\\/2008\\/03\\/logo.gif)&nbsp;no-repeat;<br \\/>&nbsp;display:&nbsp;block;<br \\/>&nbsp;height:&nbsp;100%;<br \\/>&nbsp;left:&nbsp;0;<br \\/>&nbsp;position:&nbsp;absolute;<br \\/>&nbsp;top:&nbsp;0;<br \\/>&nbsp;width:&nbsp;100%;<br \\/>&#125;&nbsp;\\n\\n<\\/code><\\/div>\\n\\n<p>Basically, all we are doing is absolutely positioning an image over top of the HTML text.<\\/p>\\n\\n<p>The reason that I like this technique is because even when images are disabled, the text is still visible. Of course this means that you cannot use a transparent image to lay over top of the text, so it will not work in all situations.<\\/p>\\n\\n<p><a href=\\\"http:\\/\\/trevordavis.net\\/play\\/important-css-techniques\\/image-replacement\\/\\\">See the example &raquo;<\\/a><\\/p>\\n\\n<h2 class=\\\"replaceHeadline\\\">5. Faux Columns<\\/h2>\\n\\n<p>It is very common in layouts to have 2 columns next to each other, with one column having a background color, and the other column just being white. Since the columns will almost never have the same amount of content in them, the easiest way to fake this, is to have a <strong>1px tall background image<\\/strong> being repeated vertically in the containing element of the 2 columns.<\\/p>\\n\\n<h3 class=\\\"replaceHeadline\\\">The Markup<\\/h3>\\n<div class=\\\"codeblock\\\"><code>\\n&lt;div&nbsp;id=\\\"container\\\"&gt;<br \\/>&nbsp;&lt;div&nbsp;id=\\\"primaryContent\\\"&gt;<br \\/>&nbsp;&nbsp;&lt;h1&gt;Primary&nbsp;Column&lt;\\/h1&gt;<br \\/>&nbsp;&nbsp;&lt;p&gt;&amp;hellip;&lt;\\/p&gt;<br \\/>&nbsp;&lt;\\/div&gt;<br \\/>&nbsp;&lt;div&nbsp;id=\\\"secondaryContent\\\"&gt;<br \\/>&nbsp;&nbsp;&lt;h2&gt;Secondary&nbsp;Column&lt;\\/h2&gt;<br \\/>&nbsp;&nbsp;&lt;p&gt;&amp;hellip;&lt;\\/p&gt;<br \\/>&nbsp;&lt;\\/div&gt;<br \\/>&nbsp;&lt;div&nbsp;class=\\\"clearing\\\"&gt;&lt;\\/div&gt;<br \\/>&lt;\\/div&gt;&nbsp;\\n\\n<\\/code><\\/div>\\n\\n<h3 class=\\\"replaceHeadline\\\">The CSS<\\/h3> \\n<div class=\\\"codeblock\\\"><code>\\ndiv#container&nbsp;&#123;&nbsp;<br \\/>&nbsp;background:&nbsp;url(\\/images\\/content\\/2008\\/03\\/content-bg.gif)&nbsp;repeat-y&nbsp;top&nbsp;right;<br \\/>&nbsp;padding:&nbsp;10px&nbsp;0;<br \\/>&nbsp;width:&nbsp;640px;<br \\/>&#125;<br \\/>div#primaryContent&nbsp;&#123;&nbsp;float:&nbsp;left;&nbsp;padding:&nbsp;0&nbsp;10px;&nbsp;width:&nbsp;400px;&nbsp;&#125;<br \\/>div#secondaryContent&nbsp;&#123;&nbsp;float:&nbsp;right;&nbsp;padding:&nbsp;0&nbsp;10px;&nbsp;width:&nbsp;200px;&nbsp;&#125;&nbsp;\\n\\n<\\/code><\\/div>\\n\\n<p>Pretty simple: a containing element, 2 floating columns, and a clearing element so that the containing element will contain the floating columns (as noted in the <strong>Set a Float to Clear a Float<\\/strong> technique above).<\\/p>\\n\\n<p><a href=\\\"http:\\/\\/trevordavis.net\\/play\\/important-css-techniques\\/faux-columns\\/\\\">See the example &raquo;<\\/a><\\/p>\\n\\n<h2 id=\\\"cssSprites\\\">6. CSS Sprites<\\/h2>\\n<p>CSS sprites is the technique of combing images to lessen the number of calls that need to be made to the server. Then you just shift the position of the background image to view the correct part of the image. May sound complicated, but it just takes a little math. <em>Note: In both of these examples, I am using the <strong>Image Replacement<\\/strong> technique discussed above.<\\/em><\\/p>\\n\\n<h3 class=\\\"replaceHeadline\\\">Example #1<\\/h3>\\n<p>For this example, we are just going to have one download link that we want to replace with a nice graphic. Then, on hover, we want to change the image.<\\/p>\\n\\n<h4 class=\\\"replaceHeadline\\\">The Markup<\\/h4>\\n<div class=\\\"codeblock\\\"><code>\\n&lt;a&nbsp;href=\\\"#\\\"&nbsp;id=\\\"download\\\"&gt;Download&nbsp;Now&lt;span&gt;&lt;\\/span&gt;&lt;\\/a&gt;&nbsp;\\n\\n<\\/code><\\/div>\\n\\n<h4 class=\\\"replaceHeadline\\\">The CSS<\\/h4>\\n<div class=\\\"codeblock\\\"><code>\\na#download&nbsp;&#123;&nbsp;<br \\/>&nbsp;display:&nbsp;block;&nbsp;<br \\/>&nbsp;height:&nbsp;75px;&nbsp;<br \\/>&nbsp;overflow:&nbsp;hidden;&nbsp;<br \\/>&nbsp;position:&nbsp;relative;&nbsp;<br \\/>&nbsp;width:&nbsp;150px;&nbsp;<br \\/>&#125;<br \\/>a#download&nbsp;span&nbsp;&#123;&nbsp;<br \\/>&nbsp;background:&nbsp;url(\\/images\\/content\\/2008\\/03\\/download.gif)&nbsp;no-repeat;&nbsp;<br \\/>&nbsp;display:&nbsp;block;&nbsp;<br \\/>&nbsp;height:&nbsp;100%;&nbsp;<br \\/>&nbsp;left:&nbsp;0;&nbsp;<br \\/>&nbsp;position:&nbsp;absolute;&nbsp;<br \\/>&nbsp;top:&nbsp;0;&nbsp;<br \\/>&nbsp;width:&nbsp;100%;<br \\/>&#125;<br \\/>a#download:hover&nbsp;span&nbsp;&#123;&nbsp;background-position:&nbsp;0&nbsp;-75px;&nbsp;&#125;&nbsp;\\n\\n<\\/code><\\/div>\\n\\n<p>As you can see from the code, on hover, we shift the position of the background image to view a different part of the image.<\\/p>\\n\\n<p>Oh, and also, IE6 and 7 suck, so here are the styles we are serving to them:<\\/p>\\n\\n<h5 class=\\\"replaceHeadline\\\">Styles to IE6 and IE7<\\/h5>\\n<div class=\\\"codeblock\\\"><code>\\na#download&nbsp;&#123;&nbsp;cursor:&nbsp;pointer;&nbsp;&#125;&nbsp;\\n\\n<\\/code><\\/div>\\n<p>I realize that we could just put that in the regular stylesheet since it has no affect on other browsers, but I prefer to move stuff like that to the IE only stylesheets.<\\/p>\\n\\n<h5 class=\\\"replaceHeadline\\\">Styles to IE6 Only<\\/h5>\\n<div class=\\\"codeblock\\\"><code>\\na#download:hover&nbsp;&#123;&nbsp;background-position:&nbsp;0&nbsp;0;&nbsp;&#125;&nbsp;\\n\\n<\\/code><\\/div>\\n<p>This is some weird bug where the images shift when you hover, but then when you mouse-out, the images don&rsquo;t shift back.<\\/p>\\n\\n<p><a href=\\\"http:\\/\\/trevordavis.net\\/play\\/important-css-techniques\\/css-sprites\\/\\\">See the example &raquo;<\\/a><\\/p>\\n\\n<h3 class=\\\"replaceHeadline\\\">Example #2<\\/h3>\\n<p>For the second example, we are going to use the CSS sprites technique, but for the entire navigation. This way, only one call needs to be made to the server to load the navigation. We are basically creating a CSS sprites matrix.<\\/p>\\n\\n<h4 class=\\\"replaceHeadline\\\">The Markup<\\/h4>\\n<div class=\\\"codeblock\\\"><code>\\n&lt;ul&nbsp;id=\\\"nav\\\"&gt;<br \\/>&nbsp;&lt;li&nbsp;id=\\\"home\\\"&gt;&lt;a&nbsp;href=\\\"#\\\"&gt;Home&lt;span&gt;&lt;\\/span&gt;&lt;\\/a&gt;&lt;\\/li&gt;<br \\/>&nbsp;&lt;li&nbsp;id=\\\"about\\\"&gt;&lt;a&nbsp;href=\\\"#\\\"&gt;About&lt;span&gt;&lt;\\/span&gt;&lt;\\/a&gt;&lt;\\/li&gt;<br \\/>&nbsp;&lt;li&nbsp;id=\\\"work\\\"&gt;&lt;a&nbsp;href=\\\"#\\\"&gt;Work&lt;span&gt;&lt;\\/span&gt;&lt;\\/a&gt;&lt;\\/li&gt;<br \\/>&nbsp;&lt;li&nbsp;id=\\\"play\\\"&gt;&lt;a&nbsp;href=\\\"#\\\"&gt;Play&lt;span&gt;&lt;\\/span&gt;&lt;\\/a&gt;&lt;\\/li&gt;<br \\/>&nbsp;&lt;li&nbsp;id=\\\"contact\\\"&gt;&lt;a&nbsp;href=\\\"#\\\"&gt;Contact&lt;span&gt;&lt;\\/span&gt;&lt;\\/a&gt;&lt;\\/li&gt;<br \\/>&lt;\\/ul&gt;&nbsp;\\n\\n<\\/code><\\/div>\\n\\n<h4 class=\\\"replaceHeadline\\\">The CSS<\\/h4>\\n<div class=\\\"codeblock\\\"><code>\\nul#nav&nbsp;&#123;&nbsp;background:&nbsp;#91c6d5;&nbsp;float:left;&nbsp;list-style:&nbsp;none;&nbsp;width:&nbsp;510px;&nbsp;&#125;<br \\/>ul#nav&nbsp;li&nbsp;&#123;&nbsp;float:&nbsp;left;&nbsp;&#125;<br \\/>ul#nav&nbsp;a&nbsp;&#123;&nbsp;color:&nbsp;#000;&nbsp;display:&nbsp;block;&nbsp;font-size:&nbsp;1.5em;&nbsp;height:&nbsp;38px;&nbsp;text-align:&nbsp;center;&nbsp;position:&nbsp;relative;&nbsp;&#125;<br \\/>ul#nav&nbsp;span&nbsp;&#123;&nbsp;background:&nbsp;url(\\/images\\/content\\/2008\\/03\\/nav.gif)&nbsp;no-repeat;&nbsp;display:&nbsp;block;&nbsp;height:&nbsp;100%;&nbsp;left:&nbsp;0;&nbsp;position:&nbsp;absolute;&nbsp;top:&nbsp;0;&nbsp;width:&nbsp;100%;&nbsp;&#125;<br \\/><br \\/>ul#nav&nbsp;li#home&nbsp;a&nbsp;&#123;&nbsp;width:&nbsp;102px;&nbsp;&#125;<br \\/>ul#nav&nbsp;li#home&nbsp;a:hover&nbsp;span&nbsp;&#123;&nbsp;background-position:&nbsp;0&nbsp;-38px;&nbsp;&#125;<br \\/><br \\/>ul#nav&nbsp;li#about&nbsp;a&nbsp;&#123;&nbsp;width:&nbsp;106px;&nbsp;&#125;<br \\/>ul#nav&nbsp;li#about&nbsp;span&nbsp;&#123;&nbsp;background-position:&nbsp;-102px&nbsp;0;&nbsp;&#125;<br \\/>ul#nav&nbsp;li#about&nbsp;a:hover&nbsp;span&nbsp;&#123;&nbsp;background-position:&nbsp;-102px&nbsp;-38px;&nbsp;&#125;<br \\/><br \\/>ul#nav&nbsp;li#work&nbsp;a&nbsp;&#123;&nbsp;width:&nbsp;92px;&nbsp;&#125;<br \\/>ul#nav&nbsp;li#work&nbsp;span&nbsp;&#123;&nbsp;background-position:&nbsp;-208px&nbsp;0;&nbsp;&#125;<br \\/>ul#nav&nbsp;li#work&nbsp;a:hover&nbsp;span&nbsp;&#123;&nbsp;background-position:&nbsp;-208px&nbsp;-38px;&nbsp;&#125;<br \\/><br \\/>ul#nav&nbsp;li#play&nbsp;a&nbsp;&#123;&nbsp;width:&nbsp;79px;&nbsp;&#125;<br \\/>ul#nav&nbsp;li#play&nbsp;span&nbsp;&#123;&nbsp;background-position:&nbsp;-300px&nbsp;0;&nbsp;&#125;<br \\/>ul#nav&nbsp;li#play&nbsp;a:hover&nbsp;span&nbsp;&#123;&nbsp;background-position:&nbsp;-300px&nbsp;-38px;&nbsp;&#125;<br \\/><br \\/>ul#nav&nbsp;li#contact&nbsp;a&nbsp;&#123;&nbsp;width:&nbsp;131px;&nbsp;&#125;<br \\/>ul#nav&nbsp;li#contact&nbsp;span&nbsp;&#123;&nbsp;background-position:&nbsp;-379px&nbsp;0;&nbsp;&#125;<br \\/>ul#nav&nbsp;li#contact&nbsp;a:hover&nbsp;span&nbsp;&#123;&nbsp;background-position:&nbsp;-379px&nbsp;-38px;&nbsp;&#125;&nbsp;\\n\\n<\\/code><\\/div>\\n\\n<p>That may seem crazy, but it all makes sense if you take the time to think about it.<\\/p>\\n\\n<p>Again, we have to serve some similar styles to IE6 and 7 from the previous example:<\\/p>\\n\\n<h5 class=\\\"replaceHeadline\\\">Styles to IE6 and IE7<\\/h5>\\n<div class=\\\"codeblock\\\"><code>\\nul#nav&nbsp;a&nbsp;&#123;&nbsp;cursor:&nbsp;pointer;&nbsp;&#125;&nbsp;\\n\\n<\\/code><\\/div>\\n\\n<h5 class=\\\"replaceHeadline\\\">Styles to IE6 Only<\\/h5>\\n<div class=\\\"codeblock\\\"><code>\\nul#nav&nbsp;a:hover&nbsp;&#123;&nbsp;background-position:&nbsp;0&nbsp;0;&nbsp;&#125;&nbsp;\\n\\n<\\/code><\\/div>\\n\\n<p><a href=\\\"http:\\/\\/trevordavis.net\\/play\\/important-css-techniques\\/css-sprites\\/\\\">See the example &raquo;<\\/a><\\/p>\\n\\n<h2 class=\\\"replaceHeadline\\\">In Conclusion<\\/h2>\\n<p>This list is definitely not exhaustive; they are just the 6 that I think are extremely important. <strong>What other techniques do you think are important to know?<\\/strong><\\/p>\",\"4\":{\"website\":{}}}}','2014-01-19 12:59:54','2014-08-08 19:32:28','4414f0aa-13f8-42e7-91b8-1a126bf304d7',1),(209,227,4,1,1,NULL,'{\"authorId\":1,\"title\":{\"title\":{}},\"slug\":\"upgraded-to-wordpress-2.5\",\"postDate\":1206830174,\"expiryDate\":null,\"enabled\":1,\"fields\":{\"2\":\"<p>I just upgraded to <a href=\\\"http:\\/\\/wordpress.org\\/development\\/2008\\/03\\/wordpress-25-brecker\\/\\\">WordPress 2.5<\\/a> tonight, and I must say it&rsquo;s pretty awesome.<\\/p>\\n\\n<p>The automatic upgrade of plugins is amazing, and I really like the new organization of the admin area.<\\/p>\\n\\n<p>Well, I&rsquo;m sure I&rsquo;ll have a lot more to say about it once I&rsquo;ve used it more. Kudos to <a href=\\\"http:\\/\\/happycog.com\\/\\\">Happy Cog<\\/a> and <a href=\\\"http:\\/\\/automattic.com\\/\\\">Automattic<\\/a> for this release.<\\/p>\",\"4\":{\"website\":{}}}}','2014-01-19 12:59:54','2014-08-08 19:32:28','cd6c7aa4-e699-42fa-aeff-efdcc3c3689d',1),(210,228,4,1,1,NULL,'{\"authorId\":1,\"title\":{\"title\":{}},\"slug\":\"weekly-link-round-up-24\",\"postDate\":1206743267,\"expiryDate\":null,\"enabled\":1,\"fields\":{\"2\":\"<p>So many late nights this week watching basketball and working on a freelance project. Lots of good things to read this week:<\\/p>\\n\\n<ul>\\n<li><a href=\\\"http:\\/\\/www.cssglobe.com\\/post\\/1446\\/5-most-common-web-standards-misconceptions\\\">5 Most Common Web Standards Misconceptions<\\/a>\\n<p>I love the first item: <strong>Web Standards = Validation<\\/strong>. Just because your site is valid, that doesn&rsquo;t mean it&rsquo;s not crap.<\\/p>\\n<\\/li>\\n\\n<li><a href=\\\"http:\\/\\/psdtuts.com\\/articles\\/core-principles-for-rapidly-attaining-creative-flow\\/\\\">Core Principles for Rapidly Attaining Creative Flow<\\/a>\\n<p>Some simple techniques for achieving &ldquo;a state of focused concentration&rdquo;. I find it hard to stay focused some times; I need to try some of these.<\\/p>\\n<\\/li>\\n\\n<li><a href=\\\"http:\\/\\/www.alistapart.com\\/issues\\/255\\\">A List Apart: Issue 255<\\/a>\\n<p>As usual, A List Apart delivers two solid articles: <a href=\\\"http:\\/\\/www.alistapart.com\\/articles\\/findabilityorphan\\\">Findability, Orphan of the Web Design Industry<\\/a> and <a href=\\\"http:\\/\\/www.alistapart.com\\/articles\\/signupforms\\\">Sign Up Forms Must Die<\\/a>. While I don&rsquo;t really agree with the thought that all Sign Up Forms Must Die, I think Luke Wroblewski brings up a lot of interesting points.<\\/p>\\n<\\/li>\\n<\\/ul>\\n<!--more-->\\n<ul>\\n<li><a href=\\\"http:\\/\\/www.techcrunch.com\\/2008\\/03\\/24\\/the-secret-to-googles-success-free-beer-and-sushi\\/\\\">The Secret To Google&rsquo;s Success: Free Beer And Sushi<\\/a>\\n<p>So you&rsquo;re telling me that I just have to tell my job that I will work better with beer and sushi? Yeah, I&rsquo;m sure that would fly.<\\/p>\\n<\\/li>\\n\\n<li><a href=\\\"http:\\/\\/www.simplebits.com\\/notebook\\/2008\\/03\\/25\\/ie8.html\\\">Decision or Bug?<\\/a>\\n<p>Can you imagine actually being able to use pixels for font size? I guess we can dream.<\\/p>\\n<\\/li>\\n\\n<li><a href=\\\"http:\\/\\/www.smashingmagazine.com\\/2008\\/03\\/26\\/grid-based-design-six-creative-column-techniques\\/\\\">Grid-Based Design: Six Creative Column Techniques<\\/a>\\n<p>Six creative techniques for making your grid design extra special.<\\/p>\\n<\\/li>\\n\\n<li><a href=\\\"http:\\/\\/www.digital-web.com\\/articles\\/ten_tips_for_email_campaigns\\/\\\">10 Tips For Your First Email Campaign<\\/a>\\n<p>Ugh, just thinking about HTML emails makes me want to cry. At least this article discusses the non-design factors when preparing a campaign.<\\/p>\\n<\\/li>\\n\\n<li><a href=\\\"http:\\/\\/www.airbagindustries.com\\/archives\\/airbag\\/farnsworth.php\\\">Farnsworth.<\\/a>\\n<p>Wow, they call all of their clients every week? That&rsquo;s pretty awesome.<\\/p>\\n<\\/li>\\n\\n<li><a href=\\\"http:\\/\\/www.thinkvitamin.com\\/features\\/webapps\\/the-thrill-of-launch\\\">The thrill of launch<\\/a>\\n<p>This is a great article for two reasons:<\\/p>\\n<ol>\\n<li>It was really interesting to read about the hectic day that <a href=\\\"http:\\/\\/clickpass.com\\/\\\">Clickpass<\\/a> had leading up to their launch. (I know the feeling)<\\/li>\\n<li>I think that OpenID is going to be really important this year. With services like Clickpass making it easier for developers to add OpenID to their sites, I am hoping that OpenID will really take off this year.<\\/li>\\n<\\/ol>\\n<\\/li>\\n<\\/ul>\",\"4\":{\"website\":{}}}}','2014-01-19 12:59:54','2014-08-08 19:32:29','b95cb931-8d6e-4b63-becf-44f1bf788178',1),(211,229,4,1,1,NULL,'{\"authorId\":1,\"title\":{\"title\":{}},\"slug\":\"using-web-development-to-make-a-difference\",\"postDate\":1206575496,\"expiryDate\":null,\"enabled\":1,\"fields\":{\"2\":\"<p>During my senior year of college, I wasn&rsquo;t quite sure what I wanted to do with my life, so I applied to some graduate programs. I knew one thing for sure: <strong>I wanted to make a difference<\\/strong>. Thankfully, I was rejected from both graduate programs I applied to.<\\/p>\\n\\n<p>While I may not be making a difference in the Army or anything like that, I think that there are definitely ways to make a difference using web development.<\\/p>\\n<!--more-->\\n<p>At my company, we are broken up into 4 teams, each of which has a pro-bono client:<\\/p>\\n<ul>\\n<li><a href=\\\"http:\\/\\/www.doorwaysva.org\\/\\\">Doorways<\\/a><\\/li>\\n<li><a href=\\\"http:\\/\\/www.weaveincorp.org\\/\\\">WEAVE: Women Empowered Against Violence<\\/a><\\/li>\\n<li><a href=\\\"http:\\/\\/www.melanomafund.org\\/\\\">Timothy Aycock Melanoma Research Foundation<\\/a><\\/li>\\n<li><a href=\\\"http:\\/\\/www.warl.org\\/\\\">The Washington Animal Rescue League<\\/a><\\/li>\\n<\\/ul>\\n\\n<p>While there are times that we have to tell our pro-bono clients that we are simply too busy to fill their needs, we always try and get to them as quickly as possible.\\n\\n<p>A few weeks ago, some of the employees from Doorways came in to talk to us more about their organization. It was pretty powerful to hear what they had to say. To think that these people sacrifice so much time for the betterment of others is amazing to me.<\\/p>\\n\\n<p>I think it is extremely important for those of us who can to give back to those who are less fortunate. Whether it is donating time to a local non-profit to help them establish their web presence or just to provide some consulting time, it all will help.<\\/p>\\n\\n<p>Last year, I donated time to slice and integrate the <a href=\\\"http:\\/\\/trevordavis.net\\/work\\/worldwide-breast-cancer\\/\\\">Worldwide Breast Cancer<\\/a> site into WordPress, and I encourage everyone to try and find something to donate their time or services to.<\\/p>\\n\\n<p><strong>Make a difference.<\\/strong><\\/p>\",\"4\":{\"website\":{}}}}','2014-01-19 12:59:54','2014-08-08 19:32:29','f93dc55a-6227-4201-8b8d-a117c5e6cdaa',1),(212,230,4,1,1,NULL,'{\"authorId\":1,\"title\":{\"title\":{}},\"slug\":\"weekly-link-round-up-23\",\"postDate\":1206141951,\"expiryDate\":null,\"enabled\":1,\"fields\":{\"2\":\"<p>Wow, crazy week at work. I felt like everything I had to do had a deadline of <strong>immediately<\\/strong>. I&rsquo;m so glad it&rsquo;s the weekend, and I can watch some college basketball. So, here are a few interesting things from this week:<\\/p>\\n\\n<ul>\\n<li><a href=\\\"http:\\/\\/snook.ca\\/archives\\/other\\/maintain_personal_brand\\/\\\">Maintaining your Personal Brand Online<\\/a>\\n<p>Some nice tips to create and maintain your person &ldquo;brand&rdquo;. I&rsquo;ve been trying to do some of these things recently.<\\/p>\\n<\\/li>\\n\\n<li><a href=\\\"http:\\/\\/www.techcrunch.com\\/2008\\/03\\/17\\/charlie-rose-face-plants-to-save-his-macbook-air\\/\\\">Charlie Rose Face Plants To Save His MacBook Air<\\/a>\\n<p>I would definitely do the same to save my MacBook Pro.<\\/p>\\n<\\/li>\\n\\n<li><a href=\\\"http:\\/\\/wordpress.org\\/development\\/2008\\/03\\/25-sneak-peek\\/\\\">WordPress: 2.5 Sneak Peak<\\/a>\\n<p>Can they release this version already? It looks like it has some great improvements. Great work by <a href=\\\"http:\\/\\/happycog.com\\/\\\">Happy Cog<\\/a>.<\\/p>\\n<\\/li>\\n<\\/ul>\\n<!--more-->\\n<ul>\\n<li><a href=\\\"http:\\/\\/www.formfiftyfive.com\\/?p=1059\\\">Youtube Quality<\\/a>\\n<p>So you can add an extra parameter to the query string and get higher quality videos on <a href=\\\"http:\\/\\/youtube.com\\/\\\">YouTube<\\/a>? That&rsquo;s awesome. How did they find that out?<\\/p>\\n<\\/li>\\n\\n<li><a href=\\\"http:\\/\\/www.andyrutledge.com\\/styling-text-links.php\\\"><em>Why and How<\\/em>: Styling Text Links<\\/a>\\n<p>Very good article discussing how to style links more effectively. When you think about it, <strong>links are the most important part of the web<\\/strong>.<\\/p>\\n<\\/li>\\n\\n<li><a href=\\\"http:\\/\\/cameronmoll.com\\/archives\\/2008\\/03\\/extensible_css_interface_adding_ajax\\/\\\">Extensible CSS Interface III: Adding Ajax Interactivity<\\/a>\\n<p>This time Cameron shows how to add in some simple AJAX functionality. I&rsquo;m loving this series of articles.<\\/p>\\n<\\/li>\\n<\\/ul>\",\"4\":{\"website\":{}}}}','2014-01-19 12:59:54','2014-08-08 19:32:28','5cbf7d26-b302-45d7-ab5f-1fc8d6a702ff',1),(213,231,4,1,1,NULL,'{\"authorId\":1,\"title\":{\"title\":{}},\"slug\":\"sometimes-its-the-small-things-that-count\",\"postDate\":1205883791,\"expiryDate\":null,\"enabled\":1,\"fields\":{\"2\":\"<p>Last fall, I bought a 2008 Nissan Altima. I absolutely love it, and I chose it over other cars like the Accord and Camry because of the way it drove. But, there is one thing that really bugs me: <strong>the steering wheel controls<\\/strong>. More particularly, the volume and next\\/previous track controls.<\\/p>\\n\\n<p><img src=\\\"http:\\/\\/trevordavis.net\\/images\\/content\\/2008\\/03\\/altima-controls.jpg\\\" alt=\\\"Nissan Altima Steering Wheel Controls\\\" align=\\\"right\\\" class=\\\"imageLeft pullLeft frame\\\" \\/>As I wrote in <a href=\\\"http:\\/\\/trevordavis.net\\/blog\\/web\\/the-importance-of-testing\\/\\\">The Importance of Testing<\\/a>, I feel like some problems with products could be resolved pretty easily with just a little testing. The steering wheel controls on the 2008 Nissan Altima are no different.<\\/p>\\n<!--more-->\\n<p>For some reason, Nissan decided to have the volume, which you turn <strong>up<\\/strong> and <strong>down<\\/strong>, be a horizontal control. So basically, if you want to turn the volume up, you hit the control to the right. If you want to turn the volume down, you hit it to the left.<\\/p>\\n\\n<p>Also strange, when you want to go to the next song, you hit the control up, and to go to the previous song, you hit the control down.<\\/p>\\n\\n<p>Is that just completely opposite or what? It reminds me of the Seinfeld episode: <a href=\\\"http:\\/\\/www.imdb.com\\/title\\/tt0697744\\/\\\">The Opposite<\\/a><\\/p>\\n\\n<blockquote>\\n<p><strong>George:<\\/strong> Hey, I just found twenty dollars! I tell you this, something is happening in my life. I did this opposite thing last night. Up was down, black was white, good was &mdash;<\\/p>\\n\\n<p><strong>Jerry:<\\/strong> Bad.<\\/p>\\n\\n<p><strong>George:<\\/strong> Day was &mdash;<\\/p>\\n\\n<p><strong>Elaine:<\\/strong> Night.<\\/p>\\n<p class=\\\"citation\\\"><cite>&mdash; <a href=\\\"http:\\/\\/www.imdb.com\\/title\\/tt0697744\\/\\\">Seinfeld: The Opposite<\\/a><\\/cite><\\/p>\\n<\\/blockquote>\\n\\n<p>Every time I am about to adjust the volume level or change the song, it takes me that extra second to think about it. Maybe it&rsquo;s because I&rsquo;m not used to it yet, but if the volume were up and down, and the change track control were left and right, it would be what I expect and wouldn&rsquo;t take that extra time to process.<\\/p>\\n\\n<p>So to relate it to the web, <strong>sometimes, it&rsquo;s the small things that count<\\/strong>. Think about conventions that exist in everyday life and see if they can be applied to the web as well. <a href=\\\"http:\\/\\/www.amazon.com\\/Dont-Make-Me-Think-Usability\\/dp\\/0321344758\\/ref=pd_bbs_1?ie=UTF8&amp;s=books&amp;qid=1205898086&amp;sr=8-1\\\">Don&rsquo;t Make Me Think<\\/a>.<\\/p>\",\"4\":{\"website\":{}}}}','2014-01-19 12:59:54','2014-08-08 19:32:28','cc1bdadc-f465-4b45-a20f-33a1edbd7804',1),(214,232,4,1,1,NULL,'{\"authorId\":1,\"title\":{\"title\":{}},\"slug\":\"weekly-link-round-up-22\",\"postDate\":1205581173,\"expiryDate\":null,\"enabled\":1,\"fields\":{\"2\":\"<p>Well, I didn&rsquo;t get much sleep this week, because I spent the entire week staying up late playing with my new MacBook Pro. It&rsquo;s amazing. Best purchase ever. When I wasn&rsquo;t playing, this is what I found interesting this week:<\\/p>\\n\\n\\n<ul>\\n<li><a href=\\\"http:\\/\\/reference.sitepoint.com\\/html\\\">HTML Reference<\\/a>\\n<p>Nice reference of all of the HTML elements, attributes, deprecated attributes, etc. Nothing new, but just good for reference.<\\/p>\\n<\\/li>\\n\\n<li><a href=\\\"http:\\/\\/www.smashingmagazine.com\\/2008\\/03\\/11\\/the-secrets-of-grunge-design\\/\\\">The Secrets Of Grunge Design<\\/a>\\n<p>I love this style, to an extent. I want to incorporate some small touches into the next redesign.<\\/p>\\n<\\/li>\\n\\n<li><a href=\\\"http:\\/\\/ilovetypography.com\\/2008\\/03\\/12\\/newzald-moleskine-to-market\\/\\\">Newzald: From Moleskine to Market<\\/a>\\n<p>Wow, that is quite a process. I think I&rsquo;ll let the experts create the fonts, and I will just enjoy the fruits of their labor.<\\/p>\\n<\\/li>\\n<\\/ul>\\n<!--more-->\\n<ul>\\n<li><a href=\\\"http:\\/\\/ma.tt\\/2008\\/03\\/wordpress-is-open-source\\/\\\">WordPress is Open Source<\\/a>\\n<p>Uh oh, Wordpress vs. Movable Type drama. I&rsquo;ll tell you what: switching from Movable Type to Wordpress was the best decision ever. I think Wordpress has a much brighter future.<\\/p>\\n<\\/li>\\n\\n<li><a href=\\\"http:\\/\\/www.hulu.com\\/\\\">Hulu<\\/a>\\n<p>So after being in beta for a while, Hulu finally went public. I must say, I was really impressed. Plus, it gives me a chance to catch up on my new obsession: <a href=\\\"http:\\/\\/www.hulu.com\\/30-rock\\\">30 Rock<\\/a><\\/p>\\n<\\/li>\\n\\n<li><a href=\\\"http:\\/\\/ajaxian.com\\/archives\\/firefox-3-memory-usage\\\">Firefox 3 Memory Usage<\\/a>\\n<p>This looks really promising. I know on a PC, Firefox is a memory hog, but I haven&rsquo;t noticed it since I&rsquo;ve been on my Mac.<\\/p>\\n<\\/li>\\n\\n<li><a href=\\\"http:\\/\\/www.adaptivepath.com\\/blog\\/2008\\/03\\/13\\/apples-design-process-through-a-keyhole\\/\\\">Apple&rsquo;s Design Process Through a Keyhole<\\/a>\\n<p>Holy crap, Apple designs 10 mock ups before narrowing it down!? Maybe that&rsquo;s why their products are almost always awesome. That design process it pretty intense.<\\/p>\\n<\\/li>\\n<\\/ul>\",\"4\":{\"website\":{}}}}','2014-01-19 12:59:54','2014-08-08 19:32:28','7d9b8be0-26e3-442f-872a-8833fe2a6196',1),(215,233,4,1,1,NULL,'{\"authorId\":1,\"title\":{\"title\":{}},\"slug\":\"use-jquery-to-open-all-external-links-in-a-new-window\",\"postDate\":1205273499,\"expiryDate\":null,\"enabled\":1,\"fields\":{\"2\":\"<p>In a recent project at work, I had completed implementing a site, and the client was reviewing it. Their company decided that they wanted all external links to open in a new window. This is not a practice that I really like, and others agree:<\\/p>\\n\\n<blockquote>\\n<p>Opening up new browser windows is like a vacuum cleaner sales person who starts a visit by emptying an ash tray on the customer\'s carpet. Don\'t pollute my screen with any more windows, thanks (particularly since current operating systems have miserable window management). If I want a new window, I will open it myself!<\\/p>\\n<p><cite>Jakob Nielsen: <a href=\\\"http:\\/\\/www.useit.com\\/alertbox\\/990530.html\\\">The Top Ten Web Design Mistakes of 1999<\\/a><\\/cite><\\/p>\\n<\\/blockquote>\\n\\n<p>Breaking the back button is never a good thing. But this article is not about that.<\\/p>\\n\\n<p>Back to the site I was implementing. I was really not interested in adding <code>target=\\\"_blank\\\"<\\/code> to every single external link, so I came up with a better solution&hellip;<\\/p>\\n<!--more-->\\n<h2 class=\\\"replaceHeadline\\\">The Solution<\\/h2>\\n<p>The site was already using jQuery for other functions, so I figured that I should just use some of its powerfulness to make my life easier.<\\/p>\\n\\n<p>With a couple lines of code, I solved my problem:<\\/p>\\n\\n<div class=\\\"codeblock\\\"><code>\\n$(document).ready(function()&#123;<br \\/>&nbsp;$(\\\"a&#91;@href^=\'http\'&#93;\\\").attr(\'target\',\'_blank\');<br \\/>&#125;);&nbsp;\\n\\n<\\/code><\\/div>\\n\\n<p><a href=\\\"http:\\/\\/trevordavis.net\\/play\\/jquery-open-external-links-in-new-window\\/\\\">Check out the demo to see the results.<\\/a><\\/p>\\n\\n<h3 class=\\\"replaceHeadline\\\">Explanation<\\/h3>\\n<p>If you know anything about <a href=\\\"http:\\/\\/trevordavis.net\\/blog\\/tutorial\\/css-attribute-selectors-explained\\/\\\">attribute selectors<\\/a>, that should look familiar to you. Basically, it is saying, apply the attribute <code>target=\\\"_blank\\\"<\\/code> to all links that begin with <strong>http<\\/strong>.<\\/p>\\n\\n<p>Really easy, really powerful, problem solved. Some may say it almost might be preferable to browse the site with JavaScript disabled so that the external links would just open in the same window. But that debate is for another time.<\\/p>\",\"4\":{\"website\":{}}}}','2014-01-19 12:59:54','2014-08-08 19:32:28','29bdc4d7-01cb-4a7d-897d-313f205ad036',1),(216,234,4,1,1,NULL,'{\"authorId\":1,\"title\":{\"title\":{}},\"slug\":\"weekly-link-round-up-21\",\"postDate\":1204930423,\"expiryDate\":null,\"enabled\":1,\"fields\":{\"2\":\"<p>It was a busy week at work this week, but a good busy. I was slicing a site, and implementing it into Wordpress. It&rsquo;s going to be a good edition to <a href=\\\"http:\\/\\/trevordavis.net\\/work\\/\\\">my portfolio<\\/a> when it&rsquo;s done. So, enough of the small talk, this is what I found interesting this week:<\\/p>\\n\\n<ul>\\n<li><a href=\\\"http:\\/\\/blogs.msdn.com\\/ie\\/archive\\/2008\\/03\\/03\\/microsoft-s-interoperability-principles-and-ie8.aspx\\\">Microsoft&rsquo;s Interoperability Principles and IE8<\\/a>\\n<p>We awoke on Monday morning to very interesting news:<\\/p>\\n<blockquote><p>We&rsquo;ve decided that IE8 will, by default, interpret web content in the most standards compliant way it can. This decision is a change from what we&rsquo;ve posted previously.<\\/p><\\/blockquote>\\n<\\/li>\\n\\n<li><a href=\\\"http:\\/\\/www.smashingmagazine.com\\/2008\\/03\\/04\\/creating-a-successful-online-portfolio\\/\\\">Creating A Successful Online Portfolio<\\/a>\\n<p>Great article discussing the common mistakes in online portfolios and 12 Principles of Effective Portfolio Design.<\\/p>\\n<\\/li>\\n\\n<li><a href=\\\"http:\\/\\/cameronmoll.com\\/archives\\/2008\\/03\\/extensible_css_interface_css_selectors_jquery\\/\\\">Extensible CSS Interface II: CSS Selectors &amp; jQuery<\\/a>\\n<p>The second article in the four-part series, &ldquo;The Highly Extensible CSS Interface&rdquo;. This one touches on some <a href=\\\"http:\\/\\/trevordavis.net\\/blog\\/tutorial\\/ajax-forms-with-jquery\\/\\\">jQuery<\\/a> and <a href=\\\"http:\\/\\/trevordavis.net\\/blog\\/tutorial\\/css-attribute-selectors-explained\\/\\\">attribute selectors<\\/a>.<\\/p>\\n<\\/li>\\n<\\/ul>\\n<!--more-->\\n<ul>\\n<li><a href=\\\"http:\\/\\/alistapart.com\\/issues\\/254\\\">A List Apart: Issue 254<\\/a>\\n<p>Two great articles on design: <a href=\\\"http:\\/\\/alistapart.com\\/articles\\/oncreativity\\\">On Creativity<\\/a> and <a href=\\\"http:\\/\\/alistapart.com\\/articles\\/designisinthedetails\\\">Design is in the Details<\\/a>. I found both articles to be really interesting, especially since design is the area that I am trying to improve the most in.<\\/p>\\n<\\/li>\\n\\n<li><a href=\\\"http:\\/\\/www.456bereastreet.com\\/archive\\/200803\\/first_impressions_of_internet_explorer_8_beta_1\\/\\\">First impressions of Internet Explorer 8 Beta 1<\\/a>\\n<p>That&rsquo;s right everyone, <a href=\\\"http:\\/\\/www.microsoft.com\\/windows\\/products\\/winfamily\\/ie\\/ie8\\/getitnow.mspx\\\">IE8 Beta 1 is available for download<\\/a>. Roger gives a nice round-up of it&rsquo;s improvements and it&rsquo;s shortcomings (so far).<\\/p>\\n<\\/li>\\n\\n<li><a href=\\\"http:\\/\\/www.thinkvitamin.com\\/features\\/css\\/coding-for-the-mobile-web\\\">Coding for the mobile web<\\/a>\\n<p>Chris Mills from Opera discusses the do&rsquo;s and don&rsquo;ts of coding for the mobile web. I still think that it&rsquo;s not really going to explode until we see more interfaces like the iPhone, and until cell phone carriers reduce the price of their unlimited data plans. But still, some good tips for the time being.<\\/p>\\n<\\/li>\\n\\n<li><a href=\\\"http:\\/\\/www.37signals.com\\/svn\\/posts\\/893-workplace-experiments\\\">Workplace Experiments<\\/a>\\n<p>My co-worker flagged this to me. Four day work weeks? Freedom to buy a book or software whenever? That sounds amazing.<\\/p>\\n<\\/li>\\n<\\/ul>\\n\\n<p>Oh and in other news, my brand spanking new 15\\\" MacBook Pro should be arriving Monday. The anticipation is killing me. I didn&rsquo;t know they ship from China!<\\/p>\",\"4\":{\"website\":{}}}}','2014-01-19 12:59:54','2014-08-08 19:32:28','512c593e-9206-4ba5-876b-b8e18db95e25',1),(217,235,4,1,1,NULL,'{\"authorId\":1,\"title\":{\"title\":{}},\"slug\":\"pngs-the-alphaimageloader-filter-and-haslayout\",\"postDate\":1204842302,\"expiryDate\":null,\"enabled\":1,\"fields\":{\"2\":\"<p>I recently wrote an article discussing <a href=\\\"http:\\/\\/trevordavis.net\\/blog\\/tutorial\\/the-ultimate-png-guide\\/\\\">how to use PNGs effectively in all browsers (including IE6)<\\/a>. For work, I had to slice a site that used a lot of PNGs, and I ran into something that I had never encountered before.<\\/p>\\n<!--more-->\\n<p>I was trying to use the Microsoft proprietary <a href=\\\"http:\\/\\/msdn2.microsoft.com\\/en-us\\/library\\/ms532969(VS.85).aspx\\\">AlphaImageLoader Filter<\\/a> because they background images were PNGs that were going to scale to fit the background. The <code>div<\\/code> that I was setting the PNG as the background to, did not have a height or width specified. Apparently, to use the AlphaImageLoader property, the element that you are using it on must have another Microsoft propriety property: <a href=\\\"http:\\/\\/msdn2.microsoft.com\\/en-us\\/library\\/ms533776.aspx\\\">hasLayout<\\/a>.<\\/p>\\n\\n<p>From the Microsoft Developer Network Site:<\\/p>\\n<blockquote><p>The object that the filter is applied to must have layout before the filter effect will display. You can give the object layout by setting the <strong>height<\\/strong> or <strong>width<\\/strong> property, setting the position property to <strong>absolute<\\/strong>.<\\/p>\\n<\\/blockquote>\\n\\n<h2 class=\\\"replaceHeadline\\\">An Example<\\/h2>\\n<p>I am going to use <a href=\\\"http:\\/\\/trevordavis.net\\/play\\/pngs\\/example-4\\/\\\">the same working example<\\/a> I used in my <a href=\\\"http:\\/\\/trevordavis.net\\/blog\\/tutorial\\/the-ultimate-png-guide\\/\\\">Ultimate PNG Guide<\\/a>. But this time, I am going to add the following to the head of the page:<\\/p>\\n<div class=\\\"codeblock\\\"><code>\\n&lt;style&nbsp;type=\\\"text\\/css\\\"&gt;<br \\/>div#container&nbsp;div.inner&nbsp;&#123;&nbsp;width:&nbsp;auto;&nbsp;&#125;<br \\/>&lt;\\/style&gt;&nbsp;\\n\\n<\\/code><\\/div>\\n\\n<p>Obviously not how you would want to really add that style to the page, but I am just trying to prove that in IE6, to use a PNG with the AlphaImageLoader Filter applied, the element must <strong>have layout<\\/strong>. <a href=\\\"http:\\/\\/trevordavis.net\\/play\\/pngs\\/pngs-and-haslayout\\/\\\">So here is the new page, which should be broken in IE6.<\\/a><\\/p>\\n\\n<p>So there you have it, remember to give elements <strong>layout<\\/strong> if you are going to use the <strong>AlphaImageLoader Filter<\\/strong>.<\\/p>\",\"4\":{\"website\":{}}}}','2014-01-19 12:59:54','2014-08-08 19:32:28','0e169445-3bae-4634-9a4b-11551b6d2934',1),(218,236,4,1,1,NULL,'{\"authorId\":1,\"title\":{\"title\":{}},\"slug\":\"weekly-link-round-up-20\",\"postDate\":1204413118,\"expiryDate\":null,\"enabled\":1,\"fields\":{\"2\":\"<p>Wow, I can&rsquo;t believe I have written these weekly link round-up 20 times. The time sure has flown by.<\\/p>\\n\\n<ul>\\n<li><a href=\\\"http:\\/\\/www.smashingmagazine.com\\/2008\\/02\\/26\\/navigation-menus-trends-and-examples\\/\\\">Navigation Menus: Trends and Examples<\\/a>\\n<p>Nice discussion of navigation trends, with lost of examples. I really like the first trend: <strong>Trend toward &ldquo;speaking&rdquo; block navigation<\\/strong>. I may consider doing something like that in the next redesign.<\\/p>\\n<\\/li>\\n\\n<li><a href=\\\"http:\\/\\/www.thinkvitamin.com\\/features\\/design\\/how-to-recreate-silverbacks-parallax\\\">How to recreate Silverback&rsquo;s Parallax<\\/a>\\n<p>Tutorial explaining the creative use of PNGs on the <a href=\\\"http:\\/\\/silverbackapp.com\\/\\\">Silverback<\\/a> site.<\\/p>\\n<\\/li>\\n\\n<li><a href=\\\"http:\\/\\/freelanceswitch.com\\/clients\\/10-phrases-every-freelancer-should-kick-out-of-their-vocabulary\\/\\\">10 Phrases Every Freelancer Should Kick-Out of Their Vocabulary<\\/a>\\n<p>The title speaks for itself. Some good stuff to remember.<\\/p>\\n<\\/li>\\n<\\/ul>\\n<!--more-->\\n<ul>\\n<li><a href=\\\"http:\\/\\/ilovetypography.com\\/2008\\/02\\/28\\/a-guide-to-web-typography\\/\\\">A Guide to Web Typography<\\/a>\\n<p>Awesome tutorial about how to choose web typography: Contrast, Size, Hierarchy, and Space<\\/p>\\n<\\/li>\\n\\n<li><a href=\\\"http:\\/\\/www.webdesignerwall.com\\/tutorials\\/jquery-tutorials-for-designers\\/\\\">jQuery Tutorials for Designers<\\/a>\\n<p>I am a big advocate of jQuery. Nice collection of 10 simple tutorials.<\\/p>\\n<\\/li>\\n\\n<li><a href=\\\"http:\\/\\/cameronmoll.com\\/archives\\/2008\\/02\\/extensible_css_interface_the_foundation\\/\\\">Extensible CSS Interface I: The Foundation<\\/a>\\n<p>Part I of the IV part series. Good start, I am interested to see the rest.<\\/p>\\n<\\/li>\\n<\\/ul>\",\"4\":{\"website\":{}}}}','2014-01-19 12:59:54','2014-08-08 19:32:28','e434a56b-bc2f-4415-aefe-179c9b0715b6',1),(219,237,4,1,1,NULL,'{\"authorId\":1,\"title\":{\"title\":{}},\"slug\":\"gracious-spam\",\"postDate\":1204219946,\"expiryDate\":null,\"enabled\":1,\"fields\":{\"2\":\"<p>I&rsquo;m glad that some of my spam comments appreciate the time that I put into my site:<\\/p>\\n\\n<blockquote>\\n<p>You have an outstanding good and well structured site. I enjoyed browsing through it.T<\\/p>\\n<\\/blockquote>\\n\\n<blockquote>\\n<p>Good site - you\'re a pretty good writer.u<\\/p>\\n<\\/blockquote>\\n\\n<blockquote>\\n<p>Thanks bro! Real good work!i<\\/p>\\n<\\/blockquote>\\n\\n<blockquote>\\n<p>Good site, thanks!<\\/p>\\n<\\/blockquote>\\n\\n<blockquote>\\n<p>simple but quality, thanks!<\\/p>\\n<\\/blockquote>\\n\\n<p>I don&rsquo;t even know how Akismet figures out that those are spam and not real comments.<\\/p>\",\"4\":{\"website\":{}}}}','2014-01-19 12:59:54','2014-08-08 19:32:28','1d494966-d357-4faa-be2a-a712222a793d',1),(220,238,4,1,1,NULL,'{\"authorId\":1,\"title\":{\"title\":{}},\"slug\":\"help-name-that-font\",\"postDate\":1204054036,\"expiryDate\":null,\"enabled\":1,\"fields\":{\"2\":\"<p>So, they just painted big letters and numbers in my parking garage at work. Can you name that font? With the numbers being below the baseline of the text, it makes me think it&rsquo;s Georgia. Anyone else have a guess?<\\/p>\\n<p><img src=\\\"http:\\/\\/trevordavis.net\\/images\\/content\\/2008\\/02\\/parking-garage.jpg\\\" alt=\\\"Parking Garage Font\\\" class=\\\"frame\\\" height=\\\"462\\\" width=\\\"462\\\" \\/><\\/p>\",\"4\":{\"website\":{}}}}','2014-01-19 12:59:54','2014-08-08 19:32:28','e3b73f8d-e798-4777-a8ec-a601c43de86e',1),(221,239,4,1,1,NULL,'{\"authorId\":1,\"title\":{\"title\":{}},\"slug\":\"macbook-vs-macbook-pro-help-me-decide\",\"postDate\":1204019752,\"expiryDate\":null,\"enabled\":1,\"fields\":{\"2\":\"<div class=\\\"update\\\">\\n<h2>Update<\\/h2>\\n<p>I went with a MacBook Pro. <a href=\\\"http:\\/\\/trevordavis.net\\/blog\\/news\\/i-picked-a-macbook-pro\\/\\\">Find out what helped me to make my decision.<\\/a><\\/p>\\n<\\/div>\\n\\n<p>I have been craving an Apple laptop for about a year and a half now. Since Apple, just updated <a href=\\\"http:\\/\\/apple.com\\\">both the MacBook and the Macbook Pro<\\/a> today, I think it&rsquo;s finally time. But now, the hard part comes up, which do I get: the MacBook or the MacBook Pro?<\\/p>\\n<!--more-->\\n\\n<h2 class=\\\"replaceHeadline\\\">MacBook<\\/h2>\\n<p>So here are the specs for the MacBook that I would get:<\\/p>\\n<ul>\\n<li><strong>Size:<\\/strong> 13 inch<\\/li>\\n<li><strong>Processor:<\\/strong> 2.4GHz Intel Core 2 Duo<\\/li>\\n<li><strong>Memory:<\\/strong> 2GB 667MHz DDR2 SDRAM - 2x1GB<\\/li>\\n<li><strong>Hard Drive<\\/strong> 160GB Serial ATA Drive @ 5400 rpm (or go to 250GB for $100 more)<\\/li>\\n<li><strong>AppleCare Protection Plan:<\\/strong> $249<\\/li>\\n<li><strong>Price:<\\/strong> $1,548.00<\\/li>\\n<\\/ul>\\n\\n<h2 class=\\\"replaceHeadline\\\">MacBoook Pro<\\/h2>\\n<p>Now, here are the specs for the MacBook Pro I would get:<\\/p>\\n<ul>\\n<li><strong>Size:<\\/strong> 15 inch<\\/li>\\n<li><strong>Processor:<\\/strong> 2.4GHz Intel Core 2 Duo<\\/li>\\n<li><strong>Memory:<\\/strong> 2GB 667MHz DDR2 SDRAM - 2x1GB<\\/li>\\n<li><strong>Hard Drive<\\/strong> 200GB Serial ATA Drive @ 5400 rpm (or go to 250GB for $50 more)<\\/li>\\n<li><strong>AppleCare Protection Plan:<\\/strong> $349<\\/li>\\n<li><strong>Price:<\\/strong> $2,348.00<\\/li>\\n<\\/ul>\\n\\n<h2 class=\\\"replaceHeadline\\\">Comparison<\\/h2>\\n<p>Based on those specs, it seems like the MacBook pro isn&rsquo;t packing that much more. But in addition to all that, it has a better graphics card, backlit keyboard, and a multi-touch trackpad.<\\/p>\\n\\n<p>The backlit keyboard and 15 inch screen are big for me. But is it worth that much more? I&rsquo;m not sure.<\\/p>\\n\\n<p>I wish Apple would update their <a href=\\\"http:\\/\\/store.apple.com\\/Catalog\\/US\\/Images\\/comparison_chart.html\\\">laptop comparison chart<\\/a>. Hopefully they will get to it today.<\\/p>\\n\\n<p>So what do <strong>YOU<\\/strong> think? Which would you get?<\\/p>\",\"4\":{\"website\":{}}}}','2014-01-19 12:59:54','2014-08-08 19:32:28','18e979da-bd16-48eb-9192-493b945a09fd',1),(222,240,4,1,1,NULL,'{\"authorId\":1,\"title\":{\"title\":{}},\"slug\":\"weekly-link-round-up-19\",\"postDate\":1203778350,\"expiryDate\":null,\"enabled\":1,\"fields\":{\"2\":\"<p>There has been a lot of discussion\\/arguments recently about IE8&rsquo;s rumored version targeting. I have been a little in between on which side to take, but I think a few articles from this week really helped me to make my decision.<\\/p>\\n<ul>\\n<li><a href=\\\"http:\\/\\/www.alistapart.com\\/articles\\/theyshootbrowsers\\\">They Shoot Browsers, Don\'t They?<\\/a>\\n<p>Jeremy Keith has a great discussion about why the default version targeting is incorrect. He does not think you should have to add extra code (ok, just one line) in order to &ldquo;enable&rdquo; new browser features.<\\/p>\\n<\\/li>\\n<li><a href=\\\"http:\\/\\/www.alistapart.com\\/articles\\/minorthreat\\\">Version Targeting: Threat or Menace?<\\/a>\\n<p>Jeffrey Zeldman takes a different approach and discusses how huge IE&rsquo;s market share is, and that a majority of people are not developing their websites with Web Standards, and their sites would &ldquo;break&rdquo; (display differently) in IE8 (if by default, it would act like IE8).<\\/p>\\n<p>Imagine all of those large and powerful companies having their sites &ldquo;broken&rdquo;, Microsoft couldn&rsquo;t take it. This is what I think really sold me. While I don&rsquo;t think it&rsquo;s necessarily correct, it is probably the right thing for Microsoft to do to protect themselves.<\\/p>\\n<\\/li>\\n<li><a href=\\\"http:\\/\\/meyerweb.com\\/eric\\/thoughts\\/2008\\/02\\/19\\/common-bonds\\/\\\">Common Bonds<\\/a>\\n<p>Eric Meyer brings up a fantastic point here regarding the two different views of version targeting:<\\/p>\\n<blockquote>\\n<p>We all want to advance web standards. We all want browsers to improve their support. We all want better and more advanced specifications. We all want to reduce inconsistencies. We all want a better web.<\\/p>\\n<\\/blockquote>\\n<\\/li>\\n<\\/ul>\\n<!--more-->\\n\\n<p>Here is the rest of this stuff that I found interesting this week:<\\/p>\\n<ul>\\n<li><a href=\\\"http:\\/\\/cameronmoll.com\\/archives\\/2008\\/02\\/scrutinizing_the_xo_olpc_user_experience\\/\\\">Scrutinizing the XO (OLPC) user experience<\\/a>\\n<p>Very interesting review of the affordable <a href=\\\"http:\\/\\/laptop.org\\/\\\">XO laptop<\\/a>.<\\/p>\\n<\\/li>\\n\\n<li><a href=\\\"http:\\/\\/www.ironicsans.com\\/2008\\/02\\/idea_a_new_typography_term.html\\\">Idea: A new typography term<\\/a>\\n<p>While I am not a print\\/type designer, I found this amusing.<\\/p>\\n<\\/li>\\n\\n<li><a href=\\\"http:\\/\\/www.markboulton.co.uk\\/journal\\/comments\\/start_your_own_business\\/\\\">Start Your Own Business<\\/a>\\n<p>I want to start my own sometime in the future. Great guide about what you need to do it right.<\\/p>\\n<\\/li>\\n\\n<li><a href=\\\"http:\\/\\/freelanceswitch.com\\/working\\/balancing-work-family\\/\\\">Balancing Work & Family<\\/a>\\n<p>Nice list of 5 important things to remember before working so many hours.<\\/p>\\n<\\/li>\\n\\n<li><a href=\\\"http:\\/\\/www.thinkvitamin.com\\/features\\/design\\/awesome-up-your-design-with-ab\\\">Awesome up your design with A.B.<\\/a>\\n<p>Simple tutorial about how to spruce up your design with an <strong>auroral background<\\/strong>.<\\/p>\\n<\\/li>\\n\\n<li><a href=\\\"http:\\/\\/www.techcrunch.com\\/2008\\/02\\/21\\/500-million-downloads-of-firefox-almost\\/\\\">500 Million Downloads of Firefox (almost)<\\/a>\\n<p>Damn, that&rsquo;s awesome. Still not enough though&hellip;<\\/p>\\n<\\/li>\\n\\n<li><a href=\\\"http:\\/\\/developer.yahoo.net\\/blog\\/archives\\/2008\\/02\\/conversation-with-matt-mullenweg.html\\\">A Conversation with Matt Mullenweg<\\/a>\\n<p>Wow, Matt just turned 24. I&rsquo;m turning 24 soon! Amazing what he has accomplished. I am anxiously awaiting the new version of Wordpress to see what the admin section looks like.<\\/p>\\n<\\/li>\\n<\\/ul>\",\"4\":{\"website\":{}}}}','2014-01-19 12:59:55','2014-08-08 19:32:29','dfbce7b2-30e6-49b1-bc9f-24f25f50abb0',1),(223,241,4,1,1,NULL,'{\"authorId\":1,\"title\":{\"title\":{}},\"slug\":\"weekly-link-round-up-18\",\"postDate\":1203192165,\"expiryDate\":null,\"enabled\":1,\"fields\":{\"2\":\"<p>Wow, I&rsquo;m actually all caught up with my feeds. I&rsquo;m really looking forward to this 3-day weekend. I really could use the extra time to work on a personal project.<\\/p>\\n\\n<p>Here is what I found interesting this week:<\\/p>\\n\\n<ul>\\n<li><a href=\\\"http:\\/\\/www.456bereastreet.com\\/archive\\/200802\\/make_sure_your_website_works_with_or_without_www\\/\\\">Make sure your website works with or without www<\\/a>\\n<p>It&rsquo;s surprising how many sites you see that don&rsquo;t work one way or the other. Not to mention that this can hurt your search engine optimization. Oh, by the way, I&rsquo;m in the <a href=\\\"http:\\/\\/no-www.org\\/\\\">no-www<\\/a> crowd.<\\/p>\\n<\\/li>\\n<li><a href=\\\"http:\\/\\/www.css3.info\\/image-replacement-in-css3\\/\\\">Image Replacement in CSS3<\\/a>\\n<p>This would be an awesome addition to CSS. Think about how much we use image replacement. We should really have a <a href=\\\"http:\\/\\/trevordavis.net\\/blog\\/tutorial\\/improved-navigation-image-replacement\\/\\\">bulletproof implementation<\\/a> without adding extra markup.<\\/p>\\n<\\/li>\\n<li><a href=\\\"http:\\/\\/fadtastic.net\\/2008\\/02\\/12\\/25-ways-to-improve-your-site-in-5-minutes\\/\\\">25 Ways To Improve Your Site In 5 Minutes<\\/a>\\n<p>I need to go through this list and see if there is anything I should do.<\\/p>\\n<\\/li>\\n<li><a href=\\\"http:\\/\\/www.readwriteweb.com\\/archives\\/heavy_clickers.php\\\">Study: 6% of People Online Contribute 50% of Display Ad Clicks<\\/a>\\n<p>Wow, that&rsquo;s crazy. I barely ever click on any ads.<\\/p>\\n<\\/li>\\n<li><a href=\\\"http:\\/\\/www.techcrunch.com\\/2008\\/02\\/13\\/google-officially-hijacks-404-pages-what-do-you-think\\/\\\">Google Officially Hijacks 404 Pages, What Do You Think?<\\/a>\\n<p>At first, I kind of had mixed feelings about this. On one side, if someone was on my site and got a Google 404 page I would not be happy. On the other hand, the people have the option to just remove the toolbar if they don&rsquo;t want it. And I guess to make it even better, it only displays the Google 404 page if the 404 page on the site is under 512 bytes. I think it could actually be pretty useful.<\\/p>\\n<\\/li>\\n<\\/ul>\",\"4\":{\"website\":{}}}}','2014-01-19 12:59:55','2014-08-08 19:32:29','69e17fd7-c930-4792-a3fc-d76bb305fab2',1),(224,242,4,1,1,NULL,'{\"authorId\":1,\"title\":{\"title\":{}},\"slug\":\"weekly-link-round-up-17\",\"postDate\":1202579462,\"expiryDate\":null,\"enabled\":1,\"fields\":{\"2\":\"<p>Well, I&rsquo;m actually writing my weekly round-up on time this week. Guess it helps to actually keep up with my feeds. Here are a couple of items from <strong>last week<\\/strong> that I didn&rsquo;t get a chance to read until this week.<\\/p>\\n<ul>\\n<li><a href=\\\"http:\\/\\/www.smashingmagazine.com\\/2008\\/01\\/31\\/10-principles-of-effective-web-design\\/\\\">10 Principles Of Effective Web Design<\\/a>\\n<p>Nice overview of 10 principles to make designs usable. Remember, web design is all about the user.<\\/p>\\n<\\/li>\\n<li><a href=\\\"http:\\/\\/www.thinkvitamin.com\\/features\\/css\\/stay-on-target\\\">Stay on :target<\\/a>\\n<p>Some examples of how to use  the CSS3 pseudo selector: <strong>target<\\/strong>. If only browsers could keep up.<\\/p>\\n<\\/li>\\n<\\/ul>\\n<!--more-->\\n<p>Now for the items from <strong>this week<\\/strong> that I found interesting:<\\/p>\\n\\n<ul>\\n<li><a href=\\\"http:\\/\\/freelanceswitch.com\\/general\\/why-being-an-average-freelancer-might-just-be-enough\\/\\\">Why Being An &lsquo;Average&rsquo; Freelancer Might Just Be Enough<\\/a>\\n<p>I feel like I am an &lsquo;average&rsquo; freelancer, and I am perfectly happy with it. My design ability is not amazing, but it&rsquo;s not bad either. That&rsquo;s not saying I don&rsquo;t want to improve it.<\\/p>\\n<\\/li>\\n\\n<li><a href=\\\"http:\\/\\/www.nytimes.com\\/2008\\/02\\/04\\/technology\\/04link.html\\\">Is Obama a Mac and Clinton a PC?<\\/a>\\n<p>I love Obama&rsquo;s website. It does feel very <strong>Mac-y<\\/strong>.<\\/p>\\n<\\/li>\\n\\n<li><a href=\\\"http:\\/\\/www.sitepoint.com\\/article\\/principles-beautiful-html-email\\\">The Principles of Beautiful HTML Email<\\/a>\\n<p>This most important part is simplicity. This is my favorite section: <strong>&ldquo;An Email is Not a Web Page&rdquo;<\\/strong>.<\\/p>\\n<\\/li>\\n\\n<li><a href=\\\"http:\\/\\/thebignoob.com\\/posts\\/cinematic-web-design\\/\\\">Cinematic Web Design<\\/a>\\n<p>I love the analogy.<\\/p>\\n<\\/li>\\n\\n<li><a href=\\\"http:\\/\\/abriefmessage.com\\/2008\\/02\\/06\\/saffer\\/\\\">No Child Left Behind Is Leaving Designers Behind<\\/a>\\n<p>I agree totally. I wish I would have received more design training. I&rsquo;m trying on my own though&hellip;<\\/p>\\n<\\/li>\\n\\n<li><a href=\\\"http:\\/\\/ajaxian.com\\/archives\\/jquery-ui-and-jquery-enchant-alpha-versions-released-today\\\">jQuery UI and jQuery Enchant Alpha Versions Released Today<\\/a>\\n<p>More jQuery coolness. I love the demos.<\\/p>\\n<\\/li>\\n\\n<li><a href=\\\"http:\\/\\/fadtastic.net\\/2008\\/02\\/07\\/calls-to-action-click-here\\/\\\">Calls To Action - Click Here!<\\/a>\\n<p>Calls to Action: such an important part of turning visitors into conversions.<\\/p>\\n<\\/li>\\n\\n<li><a href=\\\"http:\\/\\/www.maxdesign.com.au\\/2008\\/02\\/09\\/comment-anatomy\\/\\\">Anatomy of a comment<\\/a>\\n<p>Interesting discussion breaking down the different parts of a comment and what popular sites display which pieces.<\\/p>\\n<\\/li>\\n\\n<li><a href=\\\"http:\\/\\/weneedgirlfriends.tv\\/\\\">We Need Girlfriends<\\/a>\\n<p>Ok, so I think I&rsquo;m really late with this, but this show is hilarious. Started out as an online show, and now CBS bought the show. The episodes take a long time to download from the site, so I would also recommend checking them out on <a href=\\\"http:\\/\\/youtube.com\\/user\\/StevenTsapelas\\\">YouTube<\\/a><\\/p>\\n<\\/li>\\n<\\/ul>\",\"4\":{\"website\":{}}}}','2014-01-19 12:59:55','2014-08-08 19:32:29','0ea8abbc-70da-4f71-8716-165ba87edab2',1),(225,243,4,1,1,NULL,'{\"authorId\":1,\"title\":{\"title\":{}},\"slug\":\"php-get-age-function\",\"postDate\":1202247917,\"expiryDate\":null,\"enabled\":1,\"fields\":{\"2\":\"<p>Such things like copyright dates, ages, etc. can cause problems on websites unless they are dynamic. For example, I have my age in the little about me blurb in the sidebar. I made a little function to calculate my age so that I don&rsquo;t have to go in every year on my birthday and add another year to my age.<\\/p>\\n\\n<!--more-->\\n\\n<h2 class=\\\"replaceHeadline\\\">The Function<\\/h2>\\n<div class=\\\"codeblock\\\"><code>\\nfunction&nbsp;age($bMonth,$bDay,$bYear)&nbsp;&#123;<br \\/>&nbsp;<br \\/>&nbsp;$cMonth&nbsp;=&nbsp;date(\'n\');<br \\/>&nbsp;$cDay&nbsp;=&nbsp;date(\'j\');<br \\/>&nbsp;$cYear&nbsp;=&nbsp;date(\'Y\');<br \\/><br \\/>&nbsp;if(($cMonth&nbsp;&gt;=&nbsp;$bMonth&nbsp;&amp;&amp;&nbsp;$cDay&nbsp;&gt;=&nbsp;$bDay)&nbsp;||&nbsp;($cMonth&nbsp;&gt;&nbsp;$bMonth))&nbsp;&#123;<br \\/>&nbsp;&nbsp;return&nbsp;($cYear&nbsp;-&nbsp;$bYear);<br \\/>&nbsp;&#125;&nbsp;else&nbsp;&#123;<br \\/>&nbsp;&nbsp;return&nbsp;($cYear&nbsp;-&nbsp;$bYear&nbsp;-&nbsp;1);<br \\/>&nbsp;&#125;<br \\/>&#125;&nbsp;\\n\\n<\\/code><\\/div>\\n\\n<p>This function takes 3 arguments: the birth month, the birth day, and the birth year. It will return the calculated age. It obviously won&rsquo;t work with an age in the future; it will return a negative number. I could add in checking to see if it&rsquo;s a valid date, but I don&rsquo;t think it&rsquo;s really necessary.<\\/p>\\n\\n<p><a href=\\\"http:\\/\\/trevordavis.net\\/play\\/php-get-age-function-examples\\/\\\">Check Out Some Examples<\\/a><\\/p>\\n\\n<p>Nothing too complicated. Let me know if anyone has any suggestions to shorten the code.<\\/p>\",\"4\":{\"website\":{}}}}','2014-01-19 12:59:55','2014-08-08 19:32:29','171280a9-b024-41e1-af04-dba8475b5433',1),(226,244,4,1,1,NULL,'{\"authorId\":1,\"title\":{\"title\":{}},\"slug\":\"weekly-link-round-up-16\",\"postDate\":1202158161,\"expiryDate\":null,\"enabled\":1,\"fields\":{\"2\":\"<p>Another busy weekend, so I&rsquo;m a little late on my weekly link round-up from last week. Just a few links, but here it is:<\\/p>\\n\\n<ul>\\n<li><a href=\\\"http:\\/\\/www.digital-web.com\\/articles\\/the_perfect_portfolio\\/\\\">Creating The Perfect Portfolio<\\/a>\\n<p>Pretty good article discussing the ways to build a perfect portfolio. The key is to make sure you know your audience.<\\/p>\\n<\\/li>\\n<li><a href=\\\"http:\\/\\/www.boston.com\\/bostonglobe\\/ideas\\/articles\\/2008\\/01\\/27\\/what_font_says_change\\/\\\">What font says &lsquo;Change&rsquo;?<\\/a>\\n<p>Two type designers discuss the typography used in the presidential candidates logos. I personally like Obama&rsquo;s and John Edwards&rsquo; the best.<\\/p>\\n<\\/li>\\n<li><a href=\\\"http:\\/\\/outlawdesignblog.com\\/2008\\/graphic-design-contracts-agreement-forms-webdesigner-contrats\\/\\\">Graphic Designer Contracts Agreements Forms &amp; Web Designers Contracts<\\/a>\\n<p>A nice list of contracts and forms for web designers and developers.<\\/p>\\n<\\/li>\\n<\\/ul>\",\"4\":{\"website\":{}}}}','2014-01-19 12:59:55','2014-08-08 19:32:29','bf3e88d8-0788-4723-bfc9-b1841e6d4f83',1),(227,245,4,1,1,NULL,'{\"authorId\":1,\"title\":{\"title\":{}},\"slug\":\"weekly-link-round-up-15\",\"postDate\":1201538899,\"expiryDate\":null,\"enabled\":1,\"fields\":{\"2\":\"<p>Yeah, so I am a little late with my weekly round-up from last week. Better late than never:<\\/p>\\n\\n<ul>\\n<li><a href=\\\"http:\\/\\/bokardo.com\\/archives\\/the-power-of-a-bruised-ego\\/\\\">The Power of a Bruised Ego<\\/a>\\n<p>I view the source of almost every site I go to.<\\/p>\\n<\\/li>\\n<li><a href=\\\"http:\\/\\/www.456bereastreet.com\\/archive\\/200801\\/standards_mode_is_the_new_quirks_mode\\/\\\">Standards mode is the new quirks mode<\\/a>\\n<p>Roger gives a good round-up of this whole Doctype switching non-sense that had been going on last week.<\\/p>\\n<\\/li>\\n<li><a href=\\\"http:\\/\\/www.digital-web.com\\/articles\\/building_facebook_applications\\/\\\">How To Build A Facebook Application<\\/a>\\n<p>I haven&rsquo;t built one, but this seemed like a good getting started tutorial.<\\/p>\\n<\\/li>\\n<li><a href=\\\"http:\\/\\/www.readwriteweb.com\\/archives\\/the_work_from_home_generation.php\\\">The &ldquo;Work From Home&rdquo; Generation<\\/a>\\n<p>I need to start doing this.<\\/p>\\n<\\/li>\\n<li><a href=\\\"http:\\/\\/video.google.com\\/videoplay?docid=6265391640558960074\\\">Helvetica: The Movie<\\/a>\\n<p>Hmm, it&rsquo;s not available right now. Hopefully they add it back, I need to watch this.<\\/p>\\n<\\/li>\\n<li><a href=\\\"http:\\/\\/ajaxian.com\\/archives\\/animated-png-in-firefox-3\\\">Animated PNG in Firefox 3<\\/a>\\n<p>Just what we need, more animated graphics.<\\/p>\\n<\\/li>\\n<\\/ul>\",\"4\":{\"website\":{}}}}','2014-01-19 12:59:55','2014-08-08 19:32:29','1cd94537-768f-4d24-b439-610da79a53ae',1),(228,246,4,1,1,NULL,'{\"authorId\":1,\"title\":{\"title\":{}},\"slug\":\"weird-green-background-in-firefox\",\"postDate\":1201166793,\"expiryDate\":null,\"enabled\":1,\"fields\":{\"2\":\"<div class=\\\"update\\\">\\n<h2 class=\\\"replaceHeadline\\\">How to Fix<\\/h2>\\n<p>So it appears that there are two different fixes. One of them completely removes FireShot, and the second leaves FireShot installed. Both appear to work.<\\/p>\\n<h3 class=\\\"replaceHeadline\\\">Fix #1<\\/h3>\\n<ol>\\n<li>Uninstall FireShot 0.31<\\/li>\\n<li>Restart Firefox<\\/li>\\n<li>Enter <strong>about:config<\\/strong> in the address bar<\\/li>\\n<li>Search for any variables that contain <strong>fireshot<\\/strong> (I think this is the one that is causing the problem: <em>general.useragent.extra.fireshot<\\/em>)<\\/li>\\n<li>Right click on each one, and select reset<\\/li>\\n<li>If you want, re-install FireShot version 0.25<\\/li>\\n<\\/ol>\\n<h3 class=\\\"replaceHeadline\\\">Fix #2<\\/h3>\\n<ol>\\n<li>Open the FireShot preferences<\\/li>\\n<li>Uncheck <strong>Add information about FireShot into user-agent string<\\/strong><\\/li>\\n<li>Restart Firefox<\\/li>\\n<\\/ol>\\n<\\/div>\\n\\n<p>So a couple of my Firefox add-ons had updates this morning. I installed them all without even thinking about it, and my co-worker <a href=\\\"http:\\/\\/seeyouin1984.com\\/\\\">Adrian<\\/a> asked why I added the green background to my sIFR headings. I had no idea what he was talking about. He said he also had a Firefox add-on that was updated, <a href=\\\"https:\\/\\/addons.mozilla.org\\/en-US\\/firefox\\/addon\\/5648\\\">FireShot<\\/a>.<\\/p>\\n\\n<img src=\\\"http:\\/\\/trevordavis.net\\/images\\/content\\/2008\\/01\\/home-green-background1.jpg\\\" alt=\\\"Homepage with weird green backgrounds\\\" class=\\\"frame imageCenter\\\" height=\\\"224\\\" width=\\\"462\\\" \\/>\\n\\n<p>I checked in Firefox on the Mac, IE, and another co-worker\'s Firefox on PC, and none of them had the green backgrounds. I disabled JavaScript, and the green backgrounds went away. So something is going on with my sIFR headings. Weird.<\\/p>\\n\\n<p>Anyone else seeing the green backgrounds? Anyone know why?<\\/p>\",\"4\":{\"website\":{}}}}','2014-01-19 12:59:55','2014-08-08 19:32:29','0dc8c2ad-6184-48a4-8eb0-967cb6807938',1),(229,247,4,1,1,NULL,'{\"authorId\":1,\"title\":{\"title\":{}},\"slug\":\"the-importance-of-testing\",\"postDate\":1201040821,\"expiryDate\":null,\"enabled\":1,\"fields\":{\"2\":\"<p>It is great when you can take situations in your everyday life and relate them to the web.<\\/p>\\n\\n<p><img src=\\\"http:\\/\\/trevordavis.net\\/images\\/content\\/2008\\/01\\/dishwasher-exterior.jpg\\\" alt=\\\"Bosch Dishwasher Exterior Photo\\\" class=\\\"leftSide pullLeft\\\" height=\\\"289\\\" width=\\\"228\\\" \\/>First, I am going to discuss a well designed product with one major problem that I used to use daily. Then I will discuss how we can use experiences from our every day lives to make the web a better place.<\\/p>\\n\\n<p>So, my parents have this <a href=\\\"http:\\/\\/www.boschappliances.com\\/\\\">Bosch<\\/a> dishwasher that they bought a few years ago. It really was awesome. It is super quiet, cleans well, and has a nice stainless steel finish. In the store and online, this thing looks great, and it&rsquo;s easy to see why my parents bought it. But, there is just one big flaw&hellip;<\\/p>\\n<!--more-->\\n<p>As you can see by the photo, this is as slick as a dishwasher can get. The nice clean front with no buttons or switches to get in the way, its looks really nice. Since it&rsquo;s so quiet when it runs, you don&rsquo;t hear all those horrible dish-washing sounds.<\\/p>\\n\\n<h2 class=\\\"replaceHeadline\\\">The Problem<\\/h2>\\n<p>This is where the major problem comes in. It&rsquo;s so quiet, that you don&rsquo;t even realize it&rsquo;s running. You have to open the door to see the control panel on the top of the door.<\\/p>\\n\\n<img src=\\\"http:\\/\\/trevordavis.net\\/images\\/content\\/2008\\/01\\/dishwasher-panel.jpg\\\" alt=\\\"Bosch Dishwasher panel\\\" class=\\\"imageCenter\\\" height=\\\"115\\\" width=\\\"468\\\" \\/>\\n\\n<p>It&rsquo;s nice to have that out of view and gives the kitchen a sleek design. But there is no external display that lets you know that the dishwasher is running. There is no lock on the door for when it is running.<\\/p>\\n\\n<p>So how could this have been solved?<\\/p>\\n\\n<p>How about: thorough, in-home product testing? I&rsquo;m sure they had a test dishwasher setup, and I bet they knew how long it took to run. They didn&rsquo;t need to open it to see if it was still running. But if they had a regular person testing it, I&rsquo;m sure they would encounter the same problem that I did.<\\/p>\\n\\n<h2 class=\\\"replaceHeadline\\\">How is This Related to the Web?<\\/h2>\\n<p>This shows the importance of having users not close to the development of the site or application to be there to test. Just thinking about things like this remind you to slow down and make sure everything is tested thoroughly.<\\/p>\\n\\n<p><a href=\\\"http:\\/\\/www.sensible.com\\/\\\">Steve Krug<\\/a> is the master of usability testing and shows the true value of it. A simple example that he gave when I went to An Event Apart was to go to <a href=\\\"http:\\/\\/www.magazines.com\\/\\\">Magazines.com<\\/a> and to &ldquo;buy&rdquo; a subscription to The New Yorker <strong>without using the search<\\/strong>.<\\/p>\\n\\n<p>It takes a while. A little too long.<\\/p>\\n\\n<p>So everyone, test your web sites and applications&hellip;or you might just open the dishwasher and have all the water run out.<\\/p>\\n\\n<h2 class=\\\"replaceHeadline\\\">Think About It<\\/h2>\\n<p>Can you think of other &ldquo;problems&rdquo; from your everyday life that could improve the way you develop websites?<\\/p>\",\"4\":{\"website\":{}}}}','2014-01-19 12:59:55','2014-08-08 19:32:29','8fc46fff-c39f-4c37-8ef4-89786e129762',1),(230,248,4,1,1,NULL,'{\"authorId\":1,\"title\":{\"title\":{}},\"slug\":\"integrated-whole-site-with-wordpress\",\"postDate\":1200993865,\"expiryDate\":null,\"enabled\":1,\"fields\":{\"2\":\"<p>Last night, I finished integrating my entire site into Wordpress. It took a little while, but I&rsquo;ve finally got all of my content migrated.<\\/p>\\n\\n<p>Of course if you are reading this in your feed reader, it&rsquo;s going to say that all of the feeds are new&hellip;but they are not.<\\/p>\\n\\n<p>Hopefully soon I will write more about the process of powering a whole site with Wordpress.<\\/p>\",\"4\":{\"website\":{}}}}','2014-01-19 12:59:55','2014-08-08 19:32:29','7378ea02-8b03-4f53-8e57-d0c6687da00a',1),(231,249,4,1,1,NULL,'{\"authorId\":1,\"title\":{\"title\":{}},\"slug\":\"weekly-link-round-up-14\",\"postDate\":1200870496,\"expiryDate\":null,\"enabled\":1,\"fields\":{\"2\":\"<p>Busy, busy weekend. I didn&rsquo;t get a chance to write this on Friday, so I\'ll get right to it. This is what entertained me this week:<\\/p>\\n<ul>\\n<li><a href=\\\"http:\\/\\/fadtastic.net\\/2008\\/01\\/15\\/accessible-can-be-beautiful\\/\\\">Accessible can be Beautiful<\\/a>\\n<p>There is no reason for people to not make a site accessible. So make it happen people.<\\/p>\\n<\\/li>\\n<li><a href=\\\"http:\\/\\/www.smashingmagazine.com\\/2008\\/01\\/16\\/evolve-your-user-interface-to-educate-your-users\\/\\\">Evolve Your User Interface To Educate Your Users<\\/a>\\n<p>I love those little tips like these examples when you are using a well designed web application.<\\/p>\\n<\\/li>\\n<li><a href=\\\"http:\\/\\/meyerweb.com\\/eric\\/thoughts\\/2008\\/01\\/16\\/browser-version-timeline\\/\\\">Browser Version Timeline<\\/a>\\n<p>Nice little timeline showing the release period of browser versions.<\\/p>\\n<\\/li>\\n<li><a href=\\\"http:\\/\\/cameronmoll.com\\/archives\\/2008\\/01\\/overcoming_blankcanvasphobia\\/\\\">Overcoming blankcanvasphobia<\\/a>\\n<p>I know I have this problem at times. I think sketching with paper and pencil is a great cure.<\\/p>\\n<\\/li>\\n<li><a href=\\\"http:\\/\\/www.webdesignerwall.com\\/tutorials\\/css-gradient-text-effect\\/\\\">CSS Gradient Text Effect<\\/a>\\n<p>Nice little gradient text effect. Just one simple image.<\\/p>\\n<\\/li>\\n<li><a href=\\\"http:\\/\\/www.techcrunch.com\\/2008\\/01\\/17\\/yahoo-implements-openid-massive-win-for-the-project\\/\\\">Yahoo Implements OpenID; Massive Win For The Project<\\/a>\\n<p>This is big news for OpenID. If they can get a few other big name companies to implement it, I think it may really take off.<\\/p>\\n<\\/li>\\n<li><a href=\\\"http:\\/\\/www.cracked.com\\/article_15825_internet-party-what-happens-when-googles-parents-leave-town-weekend.html\\\">The Internet Party: What Happens When Google\'s Parents Leave Town for the Weekend?<\\/a>\\n<p>Very entertaining video. Well worth the 5 minutes.<\\/p>\\n<\\/li>\\n<li><a href=\\\"http:\\/\\/www.webstandards.org\\/2008\\/01\\/18\\/tell-the-css-wg-what-you-want-from-css3\\/\\\">Tell the CSS WG what you want from CSS3<\\/a>\\n<p>Help the CSS Working Group set the priorities for CSS3<\\/p>\\n<\\/li>\\n<\\/ul>\",\"4\":{\"website\":{}}}}','2014-01-19 12:59:55','2014-08-08 19:32:29','52743037-b096-4f15-9f09-52497c167dcb',1),(232,250,4,1,1,NULL,'{\"authorId\":1,\"title\":{\"title\":{}},\"slug\":\"weekly-link-round-up-13\",\"postDate\":1200096050,\"expiryDate\":null,\"enabled\":1,\"fields\":{\"2\":\"<p>I cannot wait until Tuesday. I have been talking for about 2 years now about getting an Apple laptop, and I think the time has finally come. Depending on what is announced at MacWorld on Tuesday, I will most likely be ordering a brand spanking new Macbook on Wednesday. I\'m so excited, that I feel like a little kid on Christmas.<\\/p>\\n\\n<p>Ok, well I guess here is the stuff that I found interesting this week.<\\/p>\\n\\n<ul>\\n<li><a href=\\\"http:\\/\\/cameronmoll.com\\/archives\\/2008\\/01\\/dos_aint_so_bad_after_all\\/\\\">DOS ain&rsquo;t so bad after all<\\/a>\\n<p>I know exactly what Cameron is talking about. You go into furniture stores and places like that, you see these workers who have been working there for ages just flying through all of these DOS screens; they are really efficient.<\\/p>\\n<\\/li>\\n<li><a href=\\\"http:\\/\\/gizmodo.com\\/photogallery\\/microserveces08\\/1000446145\\\">Mommy, Why is There a Server in the House?<\\/a>\\n<p>Ok, this was one of the funniest things I have ever read. Click through and read the entire book. So weird&hellip;<\\/p>\\n<\\/li>\\n<li><a href=\\\"http:\\/\\/meyerweb.com\\/eric\\/thoughts\\/2008\\/01\\/08\\/access-switch\\/\\\">Access Switch<\\/a>\\n<p>Yeah, I think I am going to have to be doing this soon. Why do cable companies offer a promotional period for only 3 months and then like double the price? There is no way I am sticking with them if they don&rsquo;t give me another promotion.<\\/p>\\n<\\/li>\\n<li><a href=\\\"http:\\/\\/www2.jeffcroft.com\\/blog\\/2008\\/jan\\/10\\/solutioneering-or-putting-solutions-problems\\/\\\">Solutioneering, or putting solutions before problems<\\/a>\\n<p>I love this article. We need to continue to solve specific problems on the web. Not just throw out the first solution that comes to mind. I know I am guilty of that at times, but it is something that I am working on.<\\/p>\\n<\\/li>\\n<li><a href=\\\"http:\\/\\/www.dustindiaz.com\\/udasss\\/\\\">UDASSS (Unobtrusive Degradable Ajax Style Sheet Switcher) Official Documentation<\\/a>\\n<p>This was an excellent article that debuted on <a href=\\\"http:\\/\\/24ways.org\\/advent\\/introducing-udasss\\\">24ways<\\/a>, and it is great to read some further documentation.<\\/p>\\n<\\/li>\\n<li><a href=\\\"http:\\/\\/dataportability.org\\/\\\">Everyone is Joining the Data Portability Working Group<\\/a>\\n<p>Google, Facebook, Six Apart, Flickr, LinkedIn, and others all joined the Data Portability Working Group. This is awesome news. Imagine being able to manage all of those accounts with one login? Or by going Facebook and being able to access data from your Google account. This is a great step towards that.<\\/p>\\n<\\/li>\\n<\\/ul>\",\"4\":{\"website\":{}}}}','2014-01-19 12:59:55','2014-08-08 19:32:29','ed249b5d-096c-4873-b23e-4da262418e5b',1),(233,251,4,1,1,NULL,'{\"authorId\":1,\"title\":{\"title\":{}},\"slug\":\"updated-dean-edwards-ie7-scripts\",\"postDate\":1199832716,\"expiryDate\":null,\"enabled\":1,\"fields\":{\"2\":\"<p>As I have noted in previous posts: <a href=\\\"http:\\/\\/trevordavis.net\\/blog\\/tutorial\\/using-dean-edwards-ie7-script\\/\\\">Using Dean Edwards&rsquo; IE7 Script<\\/a>, <a href=\\\"http:\\/\\/trevordavis.net\\/blog\\/tutorial\\/the-ultimate-png-guide\\/\\\">The Ultimate PNG Guide<\\/a>, I am a big advocate of the Dean Edwards&rsquo; IE7 scripts.<\\/p>\\n\\n<p>Thankfully, <a href=\\\"http:\\/\\/dean.edwards.name\\/weblog\\/2008\\/01\\/ie7-2\\/\\\">Dean has improved them even more<\\/a>. Instead of having a ton of different JavaScript files with large file sizes, he has compressed them into two light-weight JavaScript files.<\\/p>\\n<!--more-->\\n<p>The are now two scripts, <a href=\\\"http:\\/\\/trevordavis.net\\/ie7\\/IE7.js\\\">IE7.js<\\/a> and <a href=\\\"http:\\/\\/trevordavis.net\\/ie7\\/IE8.js\\\">IE8.js<\\/a>, and they are <a href=\\\"http:\\/\\/code.google.com\\/p\\/ie7-js\\/\\\">hosted on Google Code<\\/a>. The IE7.js file &ldquo;fixes&rdquo; IE5 and IE6 so that it is up to par with IE7. Then, IE8.js adds in some additional functionality that is missing from IE7. <strong>Note:<\\/strong> If you include IE8.js, you <strong>do not<\\/strong> need to include IE7.js.<\\/p>\\n\\n<h2 class=\\\"replaceHeadline\\\">Usage<\\/h2>\\n<p>There are a couple of different options here, you can either download the files and place them on your server or link directly to the Google Code version.<\\/p>\\n\\n<h3 class=\\\"replaceHeadline\\\">Option 1: Download Files<\\/h3>\\n<ol>\\n<li><a href=\\\"http:\\/\\/ie7-js.googlecode.com\\/files\\/ie7-2.0%28beta%29.zip\\\">Download the ZIP file<\\/a>.<\\/li>\\n<li>Extract the IE7 folder to the root of your server.<\\/li>\\n<li><p>Include the script in the head of your document:<\\/p>\\n<div class=\\\"codeblock\\\"><code>\\n&lt;!--&#91;if&nbsp;lt&nbsp;IE&nbsp;7&#93;&gt;<br \\/>&lt;script&nbsp;src=\\\"\\/ie7\\/IE8.js\\\"&nbsp;type=\\\"text\\/javascript\\\"&gt;&lt;\\/script&gt;<br \\/>&lt;!&#91;endif&#93;--&gt;&nbsp;\\n\\n<\\/code><\\/div>\\n<p>In this example, I am targeting all versions of Internet Explorer less than IE7, and applying the IE8 script to it. Or, you could apply the IE7 script instead, I just wanted the advanced CSS functionality.<\\/p>\\n<p>You could also set it so that it is applied in IE7 as well:<\\/p>\\n<div class=\\\"codeblock\\\"><code>\\n&lt;!--&#91;if&nbsp;lte&nbsp;IE&nbsp;7&#93;&gt;<br \\/>&lt;script&nbsp;src=\\\"\\/ie7\\/IE8.js\\\"&nbsp;type=\\\"text\\/javascript\\\"&gt;&lt;\\/script&gt;<br \\/>&lt;!&#91;endif&#93;--&gt;&nbsp;\\n\\n<\\/code><\\/div>\\n<\\/li>\\n<li>Open IE6 and enjoy some things not being broken.<\\/li>\\n<\\/ol>\\n\\n<h3 class=\\\"replaceHeadline\\\">Option 2: Link to Google Code Files<\\/h3>\\n<ol>\\n<li><a href=\\\"http:\\/\\/ie7-js.googlecode.com\\/svn\\/version\\/\\\">Find the version of the file you want to use<\\/a><\\/li>\\n<li>Copy the URL, ex: <a href=\\\"http:\\/\\/ie7-js.googlecode.com\\/svn\\/version\\/2.0(beta)\\/IE8.js\\\">http:\\/\\/ie7-js.googlecode.com\\/svn\\/version\\/2.0(beta)\\/IE8.js<\\/a><\\/li>\\n<li><p>Include the script in the head of your document:<\\/p>\\n<div class=\\\"codeblock\\\"><code>\\n&lt;!--&#91;if&nbsp;lt&nbsp;IE&nbsp;7&#93;&gt;<br \\/>&lt;script&nbsp;src=\\\"http:\\/\\/ie7-js.googlecode.com\\/svn\\/version\\/2.0(beta)\\/IE8.js\\\"&nbsp;type=\\\"text\\/javascript\\\"&gt;&lt;\\/script&gt;<br \\/>&lt;!&#91;endif&#93;--&gt;&nbsp;\\n\\n<\\/code><\\/div>\\n<\\/li>\\n<li>Smile, you just &ldquo;fixed&rdquo; IE6.<\\/li>\\n<\\/ol>\\n\\n<p>Hopefully that should get you started with what you need. My previous articles: <a href=\\\"http:\\/\\/trevordavis.net\\/blog\\/tutorial\\/using-dean-edwards-ie7-script.php\\\">Using Dean Edwards&rsquo; IE7 Script<\\/a>, <a href=\\\"http:\\/\\/trevordavis.net\\/blog\\/tutorial\\/the-ultimate-png-guide.php\\\">The Ultimate PNG Guide<\\/a> have some other details about the previous version of the script, some of which still apply.<\\/p>\\n\\n<p>Let me know if you have questions.<\\/p>\",\"4\":{\"website\":{}}}}','2014-01-19 12:59:55','2014-08-08 19:32:29','9736583d-1a9e-4863-a37a-c5cbb0d27d81',1),(234,252,4,1,1,NULL,'{\"authorId\":1,\"title\":{\"title\":{}},\"slug\":\"weekly-link-round-up-12\",\"postDate\":1199491135,\"expiryDate\":null,\"enabled\":1,\"fields\":{\"2\":\"<p>I&rsquo;m glad this week is over. You know, it really didn&rsquo;t feel like a short week, I guess it&rsquo;s because I worked on Monday. Well here are the interesting links I found:<\\/p>\\n\\n<ul>\\n<li><a href=\\\"http:\\/\\/www.cdolivet.net\\/editarea\\/\\\">Edit area<\\/a>\\n<p>Really cool JavaScript that formats code. I could really use this as I am typing this post. I hate not being able to indent my list items. <a href=\\\"http:\\/\\/www.cdolivet.net\\/editarea\\/editarea\\/exemples\\/exemple_full.html\\\">Check out the demonstration<\\/a>.<\\/p>\\n<\\/li>\\n\\n<li><a href=\\\"http:\\/\\/particletree.com\\/notebook\\/reflections-of-an-interface-designer\\/\\\">Reflections of an Interface Designer<\\/a>\\n<p>Really good reflection from the designer of <a href=\\\"http:\\/\\/wufoo.com\\/\\\">Wufoo<\\/a>. I love this quote:<\\/p>\\n<blockquote>\\n<p>Good designers, however, are more like matchmakers. They design for the relationships between the tool and the user. If you know anything about relationships, then you know that this is extremely difficult. To be good at relationships you have to not only be selfless, but listening&hellip;constantly and carefully.<\\/p>\\n<\\/blockquote>\\n<\\/li>\\n\\n<li><a href=\\\"http:\\/\\/24ways.org\\/2007\\/10-ways-to-get-design-approval\\\">10 Ways To Get Design Approval<\\/a>\\n<p>Ok, this isn&rsquo;t really from this week, but I read it this week. This article is amazing. This quote even makes me think about things differently:<\\/p>\\n\\n<blockquote>\\n<p>Their [the client&rsquo;s] tendency will be to try to improve the design, however that should be your problem not theirs. The role of a client should be to defend the needs of their users and business not do the design. Encourage the client to make comments such as &ldquo;I am not sure that my female users will like the masculine colours&rdquo; rather than &ldquo;can we make the whole design pink.&rdquo; It is down to them to identify the problems and for you as the designer to find the most appropriate solution.<\\/p>\\n<\\/blockquote>\\n<\\/li>\\n\\n\\n<li><a href=\\\"http:\\/\\/www.techcrunch.com\\/2008\\/01\\/04\\/new-years-tech-resolutions\\/\\\">New Year&rsquo;s Tech Resolutions<\\/a>\\n<p>TechCrunch&rsquo;s resolutions for some of the major players in the tech industry. I really hope Apple follows through with this one. I want the damn iPhone, but there is no way I&rsquo;m switching to AT&amp;T.<\\/p>\\n<\\/li>\\n\\n<li><a href=\\\"http:\\/\\/drawn.ca\\/2008\\/01\\/04\\/making-of-the-human-flipbook\\/\\\">Making of the Human Flipbook<\\/a>\\n<p>This commercial is amazing. So creative.<\\/p>\\n<\\/li>\\n\\n<li><a href=\\\"http:\\/\\/gizmodo.com\\/339918\\/apple-docking-patent-works-perfectly-with-ultra+slim-macbook\\\">Apple Docking Patent Works Perfectly with Ultra-Slim MacBook<\\/a>\\n<p>Apple never ceases to amaze me. Too bad this new slim MacBook is a little too small for my liking. Where is a damn 15 inch MacBook Pro?! That&rsquo;s what I want.<\\/p>\\n<\\/li>\\n<\\/ul>\",\"4\":{\"website\":{}}}}','2014-01-19 12:59:55','2014-08-08 19:32:29','c07bbe19-f52e-4257-8f69-6ad4795df605',1),(235,253,4,1,1,NULL,'{\"authorId\":1,\"title\":{\"title\":{}},\"slug\":\"javascript-a-requirement\",\"postDate\":1199406543,\"expiryDate\":null,\"enabled\":1,\"fields\":{\"2\":\"<p>I had to go to <a href=\\\"http:\\/\\/www.fedex.com\\/us\\/\\\">the FedEx website<\\/a> to track a package this week, and I was pretty disappointed. While, I was able to track my package, I was surprised to see that the little tracking box was built in Flash. You can see the exact box that I am talking about in the image that follows.<\\/p>\\n\\n<img src=\\\"&lt;?php bloginfo(\'template_directory\'); ?&gt;\\/images\\/blog\\/fedex-track.gif\\\" alt=\\\"FedEx Tracking Screenshot\\\" class=\\\"imageCenter\\\" height=\\\"173\\\" width=\\\"365\\\" \\/>\\n\\n<p>So I thought, whatever it&rsquo;s done in Flash, I&rsquo;m sure they have an HTML equivalent if someone does not have the Flash plugin installed or if they have Javascript disabled. Boy was I wrong&hellip;<\\/p>\\n<!--more-->\\n\\n<h2 class=\\\"replaceHeadline\\\">Some Screenshots<\\/h2>\\n<p>Below is a screenshot of the page when Javascript is <strong>enabled<\\/strong>:<\\/p>\\n<img src=\\\"&lt;?php bloginfo(\'template_directory\'); ?&gt;\\/images\\/blog\\/FedEx-with-javascript.gif\\\" alt=\\\"FedEx Screenshot with Javascript Enabled\\\" class=\\\"imageCenter\\\" height=\\\"423\\\" width=\\\"468\\\" \\/>\\n\\n<p>Now, here is what the page looks like when Javascript is <strong>disabled<\\/strong>:<\\/p>\\n<img src=\\\"&lt;?php bloginfo(\'template_directory\'); ?&gt;\\/images\\/blog\\/FedEx-without-javascript.gif\\\" alt=\\\"FedEx Screenshot with Javascript Enabled\\\" class=\\\"imageCenter\\\" height=\\\"830\\\" width=\\\"468\\\" \\/>\\n\\n<p>Jesus, it looks like the page exploded. Not only does the tracking box go away, but the page looks completely awful.<\\/p>\\n\\n<p>I know, I know, you are saying, &ldquo;but everyone has Javascript enabled and a Flash plugin installed&rdquo;. Ah, I beg to differ, <a href=\\\"http:\\/\\/www.thecounter.com\\/stats\\/2007\\/December\\/javas.php\\\">approximately 4% of users have Javascript disabled<\\/a>. Yeah that looks like a small number, but when you are huge company like FedEx, that turns out to be a lot of people.<\\/p>\\n\\n<p>Honestly, how hard is it to have an HTML alternative to the little Flash tracking box? A textbox and a button, how complicated!<\\/p>\\n\\n<p>It&rsquo;s pathetic that huge companies are still making terrible decisions like this on their web site. When will they learn?<\\/p>\",\"4\":{\"website\":{}}}}','2014-01-19 12:59:55','2014-08-08 19:32:29','02abebd3-20d9-4c9a-8b44-0cf59d95778b',1),(236,254,4,1,1,NULL,'{\"authorId\":1,\"title\":{\"title\":{}},\"slug\":\"weekly-link-round-up-11\",\"postDate\":1198934376,\"expiryDate\":null,\"enabled\":1,\"fields\":{\"2\":\"<p>Well, I hope everyone had a nice holiday break. I only worked 2 days this week, and there weren&rsquo;t many good links that I could find since most people were enjoying the holidays. I have finally recovered from my busy week at work, and I only have the last 15 days of <a href=\\\"http:\\/\\/24ways.org\\/\\\">24 Ways<\\/a> to read. I think I&rsquo;m going to cherish them though, since we have to wait a whole year for it again.<\\/p>\\n\\n<p>Anyways, these are the interesting links I found this week:<\\/p>\\n<ul>\\n<li><a href=\\\"http:\\/\\/www.techcrunch.com\\/2007\\/12\\/27\\/apple-tries-to-patent-a-way-to-avoid-long-lines\\/\\\">Apple Tries To Patent A Way to Avoid Long Lines<\\/a>\\n<p>Not that I&rsquo;m a coffee drinker, but this is an awesome idea. I would like to see this implemented in all kinds of retail stores. I also want to see the damn iPhone available to all carriers!<\\/p>\\n<\\/li>\\n<li>\\n<a href=\\\"http:\\/\\/www.andyrutledge.com\\/tough-client-my-son.php\\\">Tough Client: My Son<\\/a>\\n<p>Andy Rutledge&rsquo;s 10-year old son approached him saying that he wanted a website. This is just awesome. I hope one day my kids (when I have them) do this to me.<\\/p>\\n<\\/li>\\n<li><a href=\\\"http:\\/\\/blog.netscape.com\\/2007\\/12\\/28\\/end-of-support-for-netscape-web-browsers\\/\\\">End of Support for Netscape web browsers<\\/a>\\n<p>Not like anyone uses Netscape anymore, but at one time Netscape did have 90% of the market share, and they had a large role in pushing browser makers to improve their browsers. They are part of the reason that we have awesome browsers like Safari and Firefox.<\\/p>\\n<\\/li>\\n<li><a href=\\\"http:\\/\\/freelanceswitch.com\\/money\\/should-you-sell-hosting\\/\\\">Should You Sell Hosting?<\\/a>\\n<p>This is dangerous territory if you ask me. I don&rsquo;t think I will ever sell hosting to my freelance clients; I will only make recommendations of hosts to use.<\\/p>\\n<\\/li>\\n<\\/ul>\",\"4\":{\"website\":{}}}}','2014-01-19 12:59:55','2014-08-08 19:32:29','95aa94e7-3eb8-43e1-81b3-7e8daa7cf736',1),(237,255,4,1,1,NULL,'{\"authorId\":1,\"title\":{\"title\":{}},\"slug\":\"the-ultimate-png-guide\",\"postDate\":1198690564,\"expiryDate\":null,\"enabled\":1,\"fields\":{\"2\":\"<p>I would say one of the coolest things in web development\\/design is the creative use of PNGs. Although, it&rsquo;s a little hard because of the way that IE6 handles them.<\\/p>\\n\\n<p>I have already written about <a href=\\\"http:\\/\\/trevordavis.net\\/blog\\/tutorial\\/using-dean-edwards-ie7-script\\/\\\">Using Dean Edwards&rsquo; IE7 Script<\\/a>, but I wanted to take it a step further and talk more about PNGs.<\\/p>\\n\\n<!--more-->\\n\\n<h2 class=\\\"replaceHeadline\\\">To Review<\\/h2>\\n<blockquote>\\n<p>First, <a href=\\\"http:\\/\\/dean.edwards.name\\/download\\/\\\">download the Dean Edwards script<\\/a>. Next, extract the files to the root of your webserver in a folder called <strong>ie7<\\/strong>. It needs to be in this folder, because some of the scripts have a dependency on the folder.<\\/p>\\n<p>Finally, just include the script in the head of your document using conditional comments:<\\/p>\\n<\\/blockquote>\\n\\n<div class=\\\"codeblock\\\"><code>\\n&lt;!--&#91;if&nbsp;lt&nbsp;IE&nbsp;7&#93;&gt;<br \\/>&lt;script&nbsp;src=\\\"\\/ie7\\/ie7-standard-p.js\\\"&nbsp;type=\\\"text\\/javascript\\\"&gt;&lt;\\/script&gt;<br \\/>&lt;!&#91;endif&#93;--&gt;&nbsp;\\n\\n<\\/code><\\/div>\\n<p>Ok, so now when you want to have the script &ldquo;fix&rdquo; the PNG in IE6, you just have to have <strong>-trans.png<\\/strong> as the suffix of the filename of the image.<\\/p>\\n\\n<h2 class=\\\"replaceHeadline\\\">An Example<\\/h2>\\n\\n<p>Now, I am no designer, but I have <a href=\\\"http:\\/\\/trevordavis.net\\/images\\/content\\/2008\\/01\\/png-screenshot.png\\\">mocked-up a simple page to show some usage of PNGs<\\/a>.<\\/p>\\n\\n<p>Since the background on the body is the repeated diagonal lines, we cannot use a GIF for the rounded corners, because we aren&rsquo;t sure where the corners will intersect with the lines on the bottom.<\\/p>\\n\\n<p>In an ideal world, <a href=\\\"http:\\/\\/trevordavis.net\\/play\\/pngs\\/\\\">this is how I would want to mark the page up.<\\/a><\\/p>\\n\\n<p>But, in IE6, the PNGs have a blue glow around them. So if we <a href=\\\"http:\\/\\/trevordavis.net\\/play\\/pngs\\/example-2\\/\\\">apply the Dean Edwards scripts to the page<\\/a>, we see the bottom image disappears (keep in mind you have to be looking in IE6 to see this problem). This is because the script is applying the IE proprietary filter property, and once this applied, we cannot position or repeat a PNG.<\\/p>\\n\\n<p><a href=\\\"http:\\/\\/trevordavis.net\\/play\\/pngs\\/example-3\\/\\\">So let&rsquo;s change the way we are marking it up so that the bottom shows up in IE6<\\/a>. Basically, we have just added an empty <code>div<\\/code> that contains the bottom background PNG.<\\/p>\\n\\n<p>Now we just have to worry about the repeated background of our main content area. In order to get rid of the blue glow, we have to apply IE&rsquo;s filter property, which means that we can\'t repeat it.<\\/p>\\n\\n<p>But, if we apply the filter property manually and change the sizingMethod to scale, <a href=\\\"http:\\/\\/trevordavis.net\\/play\\/pngs\\/example-4\\/\\\">we can give the effect of repeating the background<\\/a>.<\\/p>\\n\\n<div class=\\\"codeblock\\\"><code>\\ndiv#container&nbsp;div.inner&nbsp;&#123;<br \\/>&nbsp;background-image:&nbsp;url(blank.gif);<br \\/>&nbsp;filter:&nbsp;progid:DXImageTransform.Microsoft.AlphaImageLoader&nbsp;(src=\'\\/images\\/content\\/2008\\/01\\/container-bg.png\',&nbsp;sizingMethod=\'scale\');<br \\/>&#125;&nbsp;\\n\\n<\\/code><\\/div>\\n\\n<p>Basically, it&rsquo;s just stretching the image to fit the area, but since it&rsquo;s a simple image that we were going to repeat anyways, it looks fine stretched.<\\/p>\\n\\n<h3 class=\\\"replaceHeadline\\\">In Conclusion<\\/h3>\\n<p>Hopefully using a combination of these two PNG fixes can provide you with enough to get things looking good in all browsers.<\\/p>\\n\\n<p>Anyone have any other solutions?<\\/p>\",\"4\":{\"website\":{}}}}','2014-01-19 12:59:55','2014-08-08 19:32:29','5f22d245-4040-4499-b568-c7620e4b980d',1),(238,256,4,1,1,NULL,'{\"authorId\":1,\"title\":{\"title\":{}},\"slug\":\"weekly-link-round-up-10\",\"postDate\":1198284498,\"expiryDate\":null,\"enabled\":1,\"fields\":{\"2\":\"<p>Damn I have been busy!<\\/p>\\n<p>So I missed a week of the weekly link round-up. Last weekend I had 2 holiday parties to go to, football to watch, and Christmas presents to buy. Not only that, but I have been extremely busy with freelance work and work at my full time job. So busy that I had well over 200 feeds to read! So after a quick skim of my feeds, this is what I found link worthy in the past 2 weeks.<\\/p>\\n\\n<ul>\\n<li><a href=\\\"http:\\/\\/www.webdesignerwall.com\\/tutorials\\/typographic-contrast-flow\\/\\\">Typographic Contrast and Flow<\\/a>\\n<p>Nice, simple article discussing the ways to create typographic contrast.<\\/p><\\/li>\\n<li><a href=\\\"http:\\/\\/blogs.msdn.com\\/ie\\/archive\\/2007\\/12\\/19\\/internet-explorer-8-and-acid2-a-milestone.aspx\\\">Internet Explorer 8 and Acid2: A Milestone<\\/a>\\n<p>Great news, the internal build of IE8 passed the Acid2 test <strong>in standards mode<\\/strong>. While I guess this is a step in the right direction, it&rsquo;s probably still going to take a good 3 or 4 years for IE8 to even come out. Plus, what is this &ldquo;standards mode&rdquo;? From what I have read, it&rsquo;s some special mode that the developer has to trigger, and this is different than a DOCTYPE. What kind of crap is that?<\\/p><\\/li>\\n<li><a href=\\\"http:\\/\\/psdtuts.com\\/designing-tutorials\\/9-essential-principles-for-good-web-design\\/\\\">9 Essential Principles for Good Web Design<\\/a>\\n<p>Very good discussion about 9 essential principals for good web design. Lots of examples and links to more reading.<\\/p><\\/li>\\n<li><a href=\\\"http:\\/\\/www.email-standards.org\\/blog\\/entry\\/yahoo-responds\\/\\\">Yahoo! Responds!<\\/a>\\n<p>So Yahoo! wants to support 100% of the recommendations made by the Email Standards Project. That&rsquo;s pretty cool. Now how about those desktop email applications (I&rsquo;m looking at you Outlook)?<\\/p><\\/li>\\n<li><a href=\\\"http:\\/\\/www.stuffandnonsense.co.uk\\/malarkey\\/more\\/css_unworking_group\\/\\\">CSS Unworking Group<\\/a>\\n<p>I feel like I have to link to this since it caused so much controversy this past week. I think Andy Clarke has gone a little crazy. Sometimes I don&rsquo;t even think he knows what he is actually writing. Yeah, Microsoft really dropped the ball by not updating IE6 for so long, but they are finally showing progress, and he wants the CSS Working Group to disband now? Now is the time to keep pushing, Microsoft is showing signs of playing ball.<\\/p><\\/li>\\n<li><a href=\\\"http:\\/\\/www.markboulton.co.uk\\/journal\\/comments\\/bbc_homepage_redesign\\/\\\">BBC redesign: tellys have rounded corners, right?<\\/a>\\n<p>Nice breakdown of the <a href=\\\"http:\\/\\/www.bbc.co.uk\\/home\\/beta\\/\\\">BBC beta homepage<\\/a>. I don&rsquo;t really like it very much either. Especially that stupid clock. Yeah it&rsquo;s a pretty cool little Flash application, but it&rsquo;s so useless.<\\/p><\\/li>\\n<li><a href=\\\"http:\\/\\/www.456bereastreet.com\\/archive\\/200712\\/overdoing_accessibility\\/\\\">Overdoing accessibility<\\/a><p>Discussion of some attributes that are used to try and help accessibility, but really they are either not helping or hindering in some situations. I love the alt attribute example.<\\/p><\\/li>\\n<\\/ul>\\n\\n<p>Stay tuned for <strong>The Ultimate PNG Guide<\\/strong> coming sometime next week.<\\/p>\",\"4\":{\"website\":{}}}}','2014-01-19 13:01:10','2014-08-08 19:32:29','ce416ccb-913e-4421-ac2e-f14f3cc65a9d',1),(239,257,4,1,1,NULL,'{\"authorId\":1,\"title\":{\"title\":{}},\"slug\":\"weekly-link-round-up-9\",\"postDate\":1197115849,\"expiryDate\":null,\"enabled\":1,\"fields\":{\"2\":\"<p>Yeah, so I didn&rsquo;t get a chance to post last night because I was at the Wizards game.<\\/p>\\n\\n<p>I&rsquo;ve still got some clean-up to do on the redesign, which I hope to take care of this weekend. Here is what I found interesting this week.<\\/p>\\n\\n<ul>\\n<li><a href=\\\"http:\\/\\/24ways.org\\/\\\">24 Ways<\\/a>\\n<p>It&rsquo;s that time of the year again, 24 Ways to Impress Your Friends, already on day 8! If you haven&rsquo;t read the previous years, I would definitely recommend doing it<\\/p>\\n<\\/li>\\n<li><a href=\\\"http:\\/\\/people.iola.dk\\/olau\\/flot\\/examples\\/\\\">Flot<\\/a>\\n<p>A library using jQuery to create charts and graphs&hellip;this is so awesome.<\\/p>\\n<\\/li>\\n<li><a href=\\\"http:\\/\\/www.csstextwrap.com\\/\\\">CSS Text Wrapper<\\/a>\\n<p>A Javascript library to have text wrap in non-traditional ways. I don&rsquo;t think you could use this much in production, but still an interesting concept.<\\/p>\\n<\\/li>\\n<li><a href=\\\"http:\\/\\/www.thinkvitamin.com\\/features\\/design\\/creating-sexy-stylesheets\\\">Creating Sexy Stylesheets<\\/a>\\n<p>10 Ways to make your stylesheets &ldquo;sexy&rdquo;. Some good stuff here.<\\/p>\\n<\\/li>\\n<li><a href=\\\"http:\\/\\/stationfour.com\\/blog\\/post\\/2007\\/12\\/Better-Web-Designer-and-Developer-Collaboration-%7bPart-One-Designer-to-CSS-Coder%7d.aspx\\\">Better Web Designer and Web Developer Collaboration {Part One: Designer to CSS Coder}<\\/a>\\n<p>When you are like me, and don&rsquo;t really design, but do the front-end, you have to have a good relationship with your designer. Some good hints here to make that hand-off smoother. I&rsquo;m interested to see the other parts when they come out.<\\/p>\\n<\\/li>\\n<\\/ul>\",\"4\":{\"website\":{}}}}','2014-01-19 13:01:11','2014-08-08 19:32:29','5bf7dfa6-6f10-4e49-9bfb-acd93798cb87',1),(240,258,4,1,1,NULL,'{\"authorId\":1,\"title\":{\"title\":{}},\"slug\":\"creating-multiple-sites-on-a-local-web-server\",\"postDate\":1196897095,\"expiryDate\":null,\"enabled\":1,\"fields\":{\"2\":\"<p>So while I was redesigning my site, I needed somewhere to develop the new design. I didn&rsquo;t want to have to setup a sub-domain on the live site because that would be a pain to have to FTP files up everytime I changed something. So I installed <a href=\\\"http:\\/\\/www.apachefriends.org\\/en\\/xampp.html\\\">XAMPP<\\/a> on my computer.<\\/p>\\n\\n<p>Basically, XAMPP is a all in one Apache web server. It installs Apache, PHP, MySQL&hellip;everything I needed.<\\/p>\\n\\n<!--more-->\\n\\n<p>Once you install it, you get a web directory here <strong>C:Program Filesxampphtdocs<\\/strong> (or whichever directory you install XAMPP to). That&rsquo;s great, everything works fine when you put things in that directory and browse to <strong>localhost<\\/strong>. But what about if you want to setup multiple sites? That is where I really had to do some digging.<\\/p>\\n\\n<h2 class=\\\"replaceHeadline\\\">Setting Up Multiple Sites<\\/h2>\\n<p>I found this really good article that walks you through <a href=\\\"http:\\/\\/www.campbellssource.com\\/multiple-website-on-xampp\\/\\\">setting up multiple sites on XAMPP<\\/a>. The article was a little longer than I thought it had to be, so I thought I would clarify some things.<\\/p>\\n\\n<ol>\\n<li>Find this file: <strong>C:Program Filesxamppapacheconfextrahttpd-vhosts.conf<\\/strong>, and open it in notepad.<\\/li>\\n<li>Find a line that says something like <strong>NameVirtualHost *:80<\\/strong>. Remove the <strong>#<\\/strong> sign that you see in front of it; this turns it from being a comment to code that is actually executed. (This was not in any instructions I could find)<\\/li>\\n<li><p>Next, scroll to the bottom, and you can add multiple domains. Here is what mine looks like:<\\/p>\\n<div class=\\\"codeblock\\\"><code>\\n&lt;VirtualHost&nbsp;*:80&gt;<br \\/>ServerAdmin&nbsp;webmaster@localhost.trevordavis.dev<br \\/>DocumentRoot&nbsp;\\\"C:\\/sites\\/trevordavis.dev\\/webpages\\\"<br \\/>ServerName&nbsp;localhost.trevordavis.dev<br \\/>&lt;\\/VirtualHost&gt;<br \\/><br \\/>&lt;VirtualHost&nbsp;*:80&gt;<br \\/>ServerAdmin&nbsp;webmaster@localhost.trevordavis.redesign<br \\/>DocumentRoot&nbsp;\\\"C:\\/sites\\/trevordavis.redesign\\/webpages\\\"<br \\/>ServerName&nbsp;localhost.trevordavis.redesign<br \\/>&lt;\\/VirtualHost&gt;&nbsp;\\n\\n<\\/code><\\/div><\\/li>\\n<li><p>Finally, find this file: <strong>C:WINDOWSsystem32driversetchosts<\\/strong> and open it in notepad. You need to add an entry for each site you setup in the <strong>httpd-vhosts.conf<\\/strong> file. My file looks like this:<\\/p>\\n<div class=\\\"codeblock\\\"><code>\\n127.0.0.1&nbsp;localhost<br \\/>127.0.0.1&nbsp;localhost.trevordavis.dev<br \\/>127.0.0.1&nbsp;localhost.trevordavis.redesign&nbsp;\\n\\n<\\/code><\\/div><\\/li>\\n<\\/ol>\\n\\n<h3 class=\\\"replaceHeadline\\\">That&rsquo;s It<\\/h3>\\n<p>Once you have done this you can browse to <strong>http:\\/\\/localhost.trevordavis.dev<\\/strong> and <strong>http:\\/\\/localhost.trevordavis.redesign<\\/strong> on your computer when you have your web server running. This means that you can view PHP files and execute SQL locally.<\\/p>\\n\\n<p>It&rsquo;s great.<\\/p>\\n\\n<p>Let me know if you have any questions.<\\/p>\",\"4\":{\"website\":{}}}}','2014-01-19 13:01:11','2014-08-08 19:32:29','88449ca0-2b52-46f2-9149-0318ce8fa7be',1),(241,259,4,1,1,NULL,'{\"authorId\":1,\"title\":{\"title\":{}},\"slug\":\"version-2-redesign-launched\",\"postDate\":1196638366,\"expiryDate\":null,\"enabled\":1,\"fields\":{\"2\":\"<p>Finally, I launched my redesign. I still have a little bit of cleanup to do in the blog section, but Sunday night football is on, so that&rsquo;s not going to happen tonight.<\\/p>\\n\\n<p>The goal for this redesign was to simplify. I&rsquo;m only using a couple of images, and sticking to a pretty strict grid. I would say the inspiration for this redesign is definitely <a href=\\\"http:\\/\\/subtraction.com\\\">Khoi Vinh<\\/a>.<\\/p>\\n\\n<!--more-->\\n\\n<p>So the headings (or at least most of them) are done using <a href=\\\"http:\\/\\/wiki.novemberborn.net\\/sifr\\/\\\">sIFR<\\/a>. I&rsquo;m pulling in my <a href=\\\"http:\\/\\/twitter.com\\/davist11\\/\\\">Twitter status<\\/a> next to my logo. I&rsquo;ve got my <a href=\\\"http:\\/\\/flickr.com\\/photos\\/davist11\\/\\\">Flickr photos<\\/a>, <a href=\\\"http:\\/\\/ma.gnolia.com\\/people\\/tdavis\\/bookmarks\\\">Ma.gnolia bookmarks<\\/a>, and <a href=\\\"http:\\/\\/astore.amazon.com\\/trevdavi-20\\\">Amazon Astore<\\/a> in the footer.<\\/p>\\n\\n<p>Let me know if you have any feedback. Hopefully I will be able to clean up some of the blog stuff tomorrow or Tuesday.<\\/p>\",\"4\":{\"website\":{}}}}','2014-01-19 13:01:11','2014-08-08 19:32:29','be4fd138-e005-4f75-9e71-65dd2eec8455',1),(242,260,4,1,1,NULL,'{\"authorId\":1,\"title\":{\"title\":{}},\"slug\":\"weekly-link-round-up-8\",\"postDate\":1196466098,\"expiryDate\":null,\"enabled\":1,\"fields\":{\"2\":\"<p>I&rsquo;ve been busy for the last week or so working on the new site design. Hopefully I&rsquo;m going to launch it within the next few days&hellip;maybe even tonight. I would say the theme for this redesign is simplicity. I&rsquo;m no designer, so I should stop pretending, right? A lot of good links from this week. I guess once I finally finish the redesign, a real article will come&hellip;I promise.<\\/p>\\n\\n<ul>\\n<li><a href=\\\"http:\\/\\/www.search-this.com\\/2007\\/11\\/26\\/css-a-recipe-for-success\\/\\\">CSS - A Recipe for Success<\\/a>\\n<p>Pretty good article about styling a restaurant menu as an unordered list. Nothing ground breaking, just a good example of the powerfulness of CSS.<\\/p>\\n<\\/li>\\n\\n<li><a href=\\\"http:\\/\\/articles.techrepublic.com.com\\/5100-3513_11-5810687.html\\\">Creating Multicolumn Lists<\\/a>\\n<p>Again, nothing ground-breaking, just some simple techniques for creating multi-column lists. My one gripe is with the 3rd example. I\'m not sure why they don\'t just put the class name on the ordered lists instead of wrapping them in an extra div. Sure it&rsquo;s not that much extra markup<\\/p>\\n<\\/li>\\n\\n<li><a href=\\\"http:\\/\\/creativecurio.com\\/graphic-design-glossary\\/\\\">Graphic Design Glossary<\\/a>\\n<p>Nice list of definitions relating to the graphic design field. Might be helpful to send to clients so if you mix in those technical terms, they understand it.<\\/p>\\n<\\/li>\\n\\n<li><a href=\\\"http:\\/\\/www.digital-web.com\\/articles\\/collecting_for_design\\/\\\">Collecting for Design<\\/a>\\n<p>Discussion about collecting ideas for interface and design solutions. Always good to help remember ideas from other sites.<\\/p>\\n<\\/li>\\n\\n<li><a href=\\\"http:\\/\\/www.456bereastreet.com\\/archive\\/200711\\/the_rules_of_unobtrusive_javascript\\/\\\">The rules of unobtrusive JavaScript<\\/a>\\n<p>I read <a href=\\\"http:\\/\\/icant.co.uk\\/articles\\/seven-rules-of-unobtrusive-javascript\\/\\\">Chris Heilmann&rsquo;s article<\\/a> last week, but I like Roger&rsquo;s explanation.<\\/p>\\n<\\/li>\\n\\n<li><a href=\\\"http:\\/\\/designmeltdown.com\\/chapters\\/DesignPrinciples\\/\\\">Principles of Design<\\/a>\\n<p>A series of 6 articles (although only 3 are written so far) covering the basic principles of design.<\\/p>\\n<\\/li>\\n\\n<li><a href=\\\"http:\\/\\/snook.ca\\/archives\\/accessibility_and_usability\\/what_does_accessibility_mean\\/\\\">What does Accessibility mean?<\\/a>\\n<p>Accessibility is not just making your site available for those with disabilities. It is making your site available for as many people as possible, disabled or not.<\\/p>\\n<\\/li>\\n\\n<li><a href=\\\"http:\\/\\/www.email-standards.org\\/\\\">Email Standards Project<\\/a>\\n<p><a href=\\\"http:\\/\\/trevordavis.net\\/blog\\/web\\/html-emails-who-needs-them.php\\\">I hate HTML emails<\\/a>. Let&rsquo;s hope this project can force email client developers to stick to some sort of standards. Not saying I will like HTML emails any better, but coding them will become tolerable. I don&rsquo;t know how many more crappy HTML emails I can stand to code.<\\/p>\\n<\\/li>\\n\\n<li><a href=\\\"http:\\/\\/www.thinkvitamin.com\\/features\\/design\\/ensuring-your-html-emails-look-great-and-get-delivered\\\">Ensuring your HTML emails look great and get delivered<\\/a>\\n<p>Good article about making your HTML emails look good and making sure they are getting into the users&rsquo; inboxes.<\\/p>\\n<\\/li>\\n\\n<li><a href=\\\"http:\\/\\/www.adaptivepath.com\\/blog\\/2007\\/11\\/29\\/doesnt-remind-me-of-anything\\/\\\">Doesn&rsquo;t Remind Me of Anything<\\/a>\\n<p>Discussing how sometimes when you are starting new and kind or stuck, get away from the computer and go for a walk or something. A chance of scenery sometimes can really get the brain moving.<\\/p>\\n<\\/li>\\n<\\/ul>\",\"4\":{\"website\":{}}}}','2014-01-19 13:01:11','2014-08-08 19:32:29','67e08793-0bb7-4cd1-88aa-9aacbef3c6a4',1),(243,261,4,1,1,NULL,'{\"authorId\":1,\"title\":{\"title\":{}},\"slug\":\"weekly-link-round-up-7\",\"postDate\":1195852823,\"expiryDate\":null,\"enabled\":1,\"fields\":{\"2\":\"<p>After a nice short week, and 2 days of eating and football, time to share my links for the week.  This collection is only until Wednesday, but I still found a bunch of interesting things.<\\/p>\\n\\n<ul>\\n<li><a href=\\\"http:\\/\\/www.flickr.com\\/photos\\/hicksdesign\\/sets\\/72157603217669471\\/\\\">Harry Potter and the Order of the Phoenix Typography<\\/a>\\n<p>I need to go back and watch this movie again after seeing all the great typography that is used. Someone definitely put a lot of time and effort into choosing the typography for the movie.<\\/p>\\n<\\/li>\\n\\n<li><a href=\\\"http:\\/\\/www.justsayhi.com\\/bb\\/html_quiz\\\">How Many HTML Elements Can You Name in 5 Minutes?<\\/a>\\n<p>Ready, set, GO! I got 51. How many did you get? I got basically all of the non-depreciated elements, except for a few. The ones I missed were like <code>noscript<\\/code>, <code>frame<\\/code> and things like that.<\\/p>\\n<\\/li>\\n\\n<li><a href=\\\"http:\\/\\/www.justsayhi.com\\/bb\\/css_quiz\\\">How Many CSS Properties Can You Name in 7 Minutes?<\\/a>\\n<p>I got 67. There were some that I was smacking myself for not getting, but then there are a bunch that aren&rsquo;t really supported.<\\/p>\\n<\\/li>\\n\\n<li><a href=\\\"http:\\/\\/www.techcrunch.com\\/2007\\/11\\/21\\/apple-gets-creative-with-mac-ads\\/\\\">Apple Gets Creative With Mac Ads<\\/a>\\n<p>Can Apple do anything wrong right now? This ad is genius.<\\/p>\\n<\\/li>\\n\\n<li><a href=\\\"http:\\/\\/www.virtualhosting.com\\/blog\\/2007\\/scientific-web-design-23-actionable-lessons-from-eye-tracking-studies\\/\\\">Scientific Web Design: 23 Actionable Lessons from Eye-Tracking Studies<\\/a>\\n<p>A lot of this stuff is things most people probably know, but there is a lot of interesting stuff here.<\\/p>\\n<\\/li>\\n\\n<li><a href=\\\"http:\\/\\/www.interface-research.com\\/\\\">Interface Research (Survey)<\\/a>\\n<p>Take this quick 10 question survey from a class at the Art Institute of Atlanta. The results are about what I figured, except for 1 or 2.<\\/p>\\n<\\/li>\\n\\n<li><a href=\\\"http:\\/\\/www.456bereastreet.com\\/archive\\/200711\\/does_advanced_search_sound_too_advanced\\/\\\">Does advanced search sound too advanced?<\\/a>\\n<p>Yeah, I think &ldquo;Advanced Search&rdquo; is not a good term. I like what Roger suggests: &ldquo;Refined&rdquo; and &ldquo;Enhanced&rdquo;.<\\/p>\\n<\\/li>\\n\\n<li><a href=\\\"http:\\/\\/www.alistapart.com\\/articles\\/understandingwebdesign\\\">Understanding Web Design<\\/a>\\n<p>The Godfather speaks. A great article from Jeffrey Zeldman about how you can&rsquo;t really design for the web if you don&rsquo;t understand it.<\\/p>\\n<\\/li>\\n\\n<li><a href=\\\"http:\\/\\/www.alistapart.com\\/articles\\/howtosizetextincss\\\">How to Size Text in CSS<\\/a>\\n<p>This was a great issue of A List Apart this week. This article shows different tests of sizing typography. I think the important thing in this article is that Richard is testing to see his vertical grid grow when users resize their text.<\\/p>\\n<\\/li><\\/ul>\",\"4\":{\"website\":{}}}}','2014-01-19 13:01:11','2014-08-08 19:32:29','e62c0164-8a27-4165-9838-caa56083140e',1),(244,262,4,1,1,NULL,'{\"authorId\":1,\"title\":{\"title\":{}},\"slug\":\"upgraded-to-wordpress-2.3.1\",\"postDate\":1195519054,\"expiryDate\":null,\"enabled\":1,\"fields\":{\"2\":\"<p>I decided to upgrade to the new version of Wordpress tonight. I wanted to get that out of the way before I finish and launch the redesigned site. The upgrade went smoothly, just noticed a couple of issues.<\\/p>\\n\\n<p>The display of my comments got a little wacky. I&rsquo;m not sure what exactly happened, but I&rsquo;m not gonna worry about it too much since the redesign is launching soon.<\\/p>\\n\\n<p>Also, it broke my AJAX comment submit. I have disabled it for now, but there is a new <code>input<\\/code> element with the name of <strong>_wp_unfiltered_html_comment<\\/strong>. I tried changing the JavaScript, but I still couldn&rsquo;t get it to work. Hopefully, it&rsquo;s something I can address soon.<\\/p>\",\"4\":{\"website\":{}}}}','2014-01-19 13:01:11','2014-08-08 19:32:29','937e804a-aeeb-456e-9f54-7965738b4bb0',1),(245,263,4,1,1,NULL,'{\"authorId\":1,\"title\":{\"title\":{}},\"slug\":\"weekly-link-round-up-6\",\"postDate\":1195248658,\"expiryDate\":null,\"enabled\":1,\"fields\":{\"2\":\"<p>Finally, it&rsquo;s the weekend. I had to work basically all last weekend, and it&rsquo;s great to finally get a break. Got a pretty good collection of links for this week.<\\/p>\\n\\n<ul>\\n<li><a href=\\\"http:\\/\\/www.digital-web.com\\/articles\\/redesigning_ebay_registration\\/\\\">Better Web Forms: Redesigning eBay&rsquo;s Registration<\\/a>\\n<p>Garrett Dimon gives a really good breakdown of a redesign of eBay&rsquo;s registration form. Forms are easily one of the most important elements of web design, yet they are one of the least thought about elements.<\\/p>\\n<\\/li>\\n\\n<li><a href=\\\"http:\\/\\/yesterdayishere.com\\/wordpress\\/arhiva\\/2007\\/11\\/14\\/classy-amp\\/\\\">Classy Amp<\\/a>\\n<p>Inspired by <a href=\\\"http:\\/\\/simplebits.com\\/\\\">Mr. Dan Cederholm<\\/a>, this Wordpress plugin adds a span with a class around all ampersands <em>(edit: not all ampersands, only ampersands in headings)<\\/em> so you can style the ampersand with a more attractive font.<\\/p>\\n<\\/li>\\n\\n<li><a href=\\\"http:\\/\\/ilovetypography.com\\/2007\\/11\\/13\\/being-kind-to-widows-and-orphans\\/\\\">Being Kind to Widows and Orphans<\\/a>\\n<p>I guess this is like an extension of the Classy Amp plugin. Offers that functionality along with  converting quotes and other entities to their correct html values. Also adds non-breaking spaces to try and prevent widows and orphans (hence the title).<\\/p>\\n<\\/li>\\n\\n<li><a href=\\\"http:\\/\\/favikon.com\\/\\\">favikon<\\/a>\\n<p>Upload a photo and create your favicon on the web. No need to go into Photoshop and crop it, then create an .ico file. This does it all.<\\/p>\\n<\\/li>\\n\\n<li><a href=\\\"http:\\/\\/www.fatdux.com\\/how\\/our-web-dogma.html\\\">FatDuk Web Dogma &lsquo;06<\\/a>\\n<p>10 rules that will enhance the user experience of any website or online application. While I think this is old, I still enjoyed reading it, and I think it all applies still.<\\/p>\\n<\\/li>\\n\\n<li><a href=\\\"http:\\/\\/www.josiahcole.com\\/2007\\/07\\/11\\/almost-perfect-htaccess-file-for-wordpress-blogs\\/\\\">Almost Perfect htaccess File for WordPress Blogs<\\/a>\\n<p>Modify your htaccess file to try and prevent hackers from messing with your Wordpress installation.<\\/p>\\n<\\/li>\\n<\\/ul>\\n\\n<p>I <strong>promise<\\/strong> a real post is coming soon! Along with a redesign&hellip;sometime soon.<\\/p>\",\"4\":{\"website\":{}}}}','2014-01-19 13:01:11','2014-08-08 19:32:29','fe3e61ad-0d35-4c4a-8354-1090967212e8',1),(246,264,4,1,1,NULL,'{\"authorId\":1,\"title\":{\"title\":{}},\"slug\":\"weekly-link-round-up-5\",\"postDate\":1194657125,\"expiryDate\":null,\"enabled\":1,\"fields\":{\"2\":\"<p>Wow, I&rsquo;m pathetic. I can hardly keep up with one blog post a week. I&rsquo;m just so busy at work right now. I stopped reading my RSS feeds on Wednesday, so this is really like half-a-week&rsquo;s worth of links.<\\/p>\\n\\n<p>I&rsquo;ve got a big project for work launching on Sunday, so hopefully I will have more free time. I&rsquo;m also in the process of working up a new design for the site. I don&rsquo;t necessarily feel like the current design is not good; I just feel the need for a change.<\\/p>\\n\\n<!--more-->\\n<ul>\\n <li><a href=\\\"http:\\/\\/www.sprymedia.co.uk\\/article\\/Grid\\\">Grid - Javascript Bookmarklet<\\/a>\\n  <p>Pretty awesome bookmarklet to generate any grid on any webpage, definitely a keeper.<\\/p>\\n <\\/li>\\n\\n <li><a href=\\\"http:\\/\\/www.techcrunch.com\\/2007\\/11\\/07\\/google-coming-to-a-gas-station-near-you\\/\\\">Google Coming To A Gas Station Near You<\\/a>\\n  <p>Google is partnering with the makers of gas pumps to add Google Maps to the gas pump. Genius. Now when you are lost (and you don&rsquo;t have GPS), but you don&rsquo;t want to admit to the wife or girlfriend that you are lost, just say that you need gas! Then as you are filling up, find out where the hell you are.<\\/p>\\n <\\/li>\\n\\n <li><a href=\\\"http:\\/\\/www.subtraction.com\\/archives\\/2007\\/1106_somethings_m.php\\\">Something&rsquo;s Missing in Web Design<\\/a>\\n  <p>I do think web design is a little lacking compared to print. But if you think about it, the web is still a baby. There is plenty of time for it to grow up.<\\/p>\\n <\\/li>\\n\\n <li><a href=\\\"http:\\/\\/www.456bereastreet.com\\/archive\\/200711\\/screen_readers_sometimes_ignore_displaynone\\/\\\">Screen readers sometimes ignore display:none<\\/a>\\n  <p><strong>Sometimes<\\/strong> is the key word. Gotta love standard practice between different pieces of software that are supposed to do the same thing (IE6 anyone?). Still good to know.<\\/p>\\n <\\/li>\\n\\n<\\/ul>\",\"4\":{\"website\":{}}}}','2014-01-19 13:01:11','2014-08-08 19:32:29','d53e8459-d356-40f8-b816-39e9996a3a9c',1),(247,265,4,1,1,NULL,'{\"authorId\":1,\"title\":{\"title\":{}},\"slug\":\"weekly-link-round-up-4\",\"postDate\":1194050446,\"expiryDate\":null,\"enabled\":1,\"fields\":{\"2\":\"<p>I didn&rsquo;t read too many great things this week, but there were a few. A couple of them are a little of topic, but I still found them really interesting to read.<\\/p>\\n\\n<ul>\\n<li><a href=\\\"http:\\/\\/www.webdesignerwall.com\\/tutorials\\/advanced-css-menu\\/\\\">Advanced CSS Menu<\\/a>\\n<p>This is a continuation from last week&rsquo;s entry,  <a href=\\\"http:\\/\\/www.webdesignerwall.com\\/tutorials\\/design-watercolor-effect-menu\\/\\\">Design Watercolor Effect Menu<\\/a>. This entry shows how to create the XHTML and CSS from the menu that was designed last week.<\\/p>\\n<\\/li>\\n\\n<li><a href=\\\"http:\\/\\/www.bennadel.com\\/blog\\/1009-jQuery-Demo-Creating-A-Sliding-Image-Puzzle-Plug-In.htm\\\"> jQuery Demo: Creating A Sliding Image Puzzle Plug-In<\\/a>\\n<p>I really like a <a href=\\\"http:\\/\\/jquery.com\\/\\\">jQuery<\\/a> a lot. This is an awesome example of what is possible with it.<\\/p>\\n<\\/li>\\n\\n<li><a href=\\\"http:\\/\\/www.adaptivepath.com\\/blog\\/2007\\/10\\/31\\/why-i-love-my-completely-inefficient-bathroom\\/\\\">Why I love my completely inefficient bathroom<\\/a>\\n<p>I don&rsquo;t know why I found this article so interesting, but it was definitely different to analyze the usability of a bathroom.<\\/p>\\n<\\/li>\\n\\n<li><a href=\\\"http:\\/\\/www.adaptivepath.com\\/blog\\/2007\\/11\\/01\\/office-bathrooms-as-key-indicators-of-team-culture\\/\\\">Office Bathrooms as key indicators of team culture<\\/a>\\n<p>Another bathroom article. This one talking about the things that a bathroom needs.<\\/p>\\n<\\/li>\\n\\n<li><a href=\\\"http:\\/\\/www.456bereastreet.com\\/archive\\/200711\\/posh_plain_old_semantic_html\\/\\\">POSH - Plain Old Semantic HTML<\\/a>\\n<p>I love that there is an acronym for this. I also love plain old HTML.<\\/p>\\n<\\/li>\\n<\\/ul>\",\"4\":{\"website\":{}}}}','2014-01-19 13:01:11','2014-08-08 19:32:29','a7ccfbfe-8acd-4fdc-9151-16449daa3738',1),(248,266,4,1,1,NULL,'{\"authorId\":1,\"title\":{\"title\":{}},\"slug\":\"weekly-link-round-up-3\",\"postDate\":1193446588,\"expiryDate\":null,\"enabled\":1,\"fields\":{\"2\":\"<p>Yeah, so I missed last week. What can I say, I was moving into my condo! I almost missed this week too&hellip;I got my wisdom teeth pulled this morning. But hey, I felt basically back to normal by about 2 this afternoon. So here&rsquo;s what I found interesting this week.<\\/p>\\n\\n<ul>\\n <li><a href=\\\"http:\\/\\/mezzoblue.com\\/archives\\/2007\\/10\\/25\\/moving_along\\/\\\">Moving Along<\\/a>\\n  <p>So, it looks likes we might be seeing some new entries on <a href=\\\"http:\\/\\/csszengarden.com\\/\\\">the CSS Zen Garden<\\/a>. Yeah the site is been around for a while and a little tired, but it&rsquo;s still interesting if you have some time to kill.<\\/p>\\n <\\/li>\\n <li><a href=\\\"http:\\/\\/thesuperest.com\\/\\\">The Superest<\\/a>\\n  <p><a href=\\\"http:\\/\\/www.bearskinrug.co.uk\\/\\\">Kevin Cornell<\\/a> and <a href=\\\"http:\\/\\/www.inkfinger.us\\/\\\">Matthew Sutter<\\/a> go at it drawing characters with &ldquo;super&rdquo; powers. The illustrations are amazing&hellip;I&rsquo;m so jealous of their ability to draw like that.<\\/p>\\n <\\/li>\\n <li><a href=\\\"http:\\/\\/www.simplebits.com\\/notebook\\/2007\\/10\\/23\\/u489.html\\\">U-489<\\/a>\\n  <p>Ok, so not really web related, but this is one of the strangest\\/funniest stories I have heard.<\\/p>\\n <\\/li>\\n <li><a href=\\\"http:\\/\\/www.37signals.com\\/svn\\/posts\\/668-ask-37signals-can-i-build-a-product-business-if-im-just-a-designer\\\">Ask 37signals: Can I build a product business if I\'m just a designer?<\\/a>\\n  <p>Very interesting to see the career path of someone so successful, Jason Fried,  in the web development field.<\\/p>\\n <\\/li>\\n <li><a href=\\\"http:\\/\\/www.makeamixa.com\\/\\\">Make a Mixa<\\/a>\\n  <p>I am so tempted to get one of these.<\\/p>\\n <\\/li>\\n <li><a href=\\\"http:\\/\\/www.webdesignerwall.com\\/tutorials\\/design-watercolor-effect-menu\\/\\\">Design Watercolor Effect Menu<\\/a>\\n  <p>I love this style of design. Also good to get tips on how to achieve it.<\\/p>\\n <\\/li>\\n <li><a href=\\\"http:\\/\\/www.techcrunch.com\\/2007\\/10\\/24\\/google-declares-jihad-on-blog-link-farms\\/\\\">Google Declares Jihad On Blog Link Farms<\\/a>\\n  <p>Will be very interesting to see how blog link farms are affected. I guess I need to write more weekly articles too and not just link round ups!<\\/p>\\n <\\/li>\\n<\\/ul>\",\"4\":{\"website\":{}}}}','2014-01-19 13:01:11','2014-08-08 19:32:29','cb7fd440-eea7-4891-856f-e7a258094cfb',1),(249,267,4,1,1,NULL,'{\"authorId\":1,\"title\":{\"title\":{}},\"slug\":\"weekly-link-round-up-2\",\"postDate\":1192233537,\"expiryDate\":null,\"enabled\":1,\"fields\":{\"2\":\"<p>Ok, so Fridays it is. I guess there are pros to posting this on Friday evening. There is plenty of time on the weekends to browse and read articles. Or if you aren&rsquo;t a weekend reader, they will be waiting in your RSS Reader on Monday morning. Sounds good to me. Just a few good links from this week:<\\/p>\\n\\n<ul>\\n <li><a href=\\\"http:\\/\\/www.sitepoint.com\\/article\\/apache-mod_rewrite-examples\\/\\\">Learn Apache mod_rewrite: 13 Real-World Examples<\\/a>\\n  <p>Mod_Rewrite is awesome. While there are plenty of articles about it, this article gives a nice intro, and then 13 real-world examples. Go ahead, try to go to <a href=\\\"http:\\/\\/www.trevordavis.net\\/\\\">http:\\/\\/www.trevordavis.net<\\/a>. Yeah you get redirected to <a href=\\\"http:\\/\\/trevordavis.net\\/\\\">http:\\/\\/trevordavis.net<\\/a>. Stupid useless www.<\\/p><\\/li>\\n\\n <li><a href=\\\"http:\\/\\/psdtuts.com\\/designing-tutorials\\/elements-of-great-web-design-the-polish\\/\\\">Elements of Great Web Design: The Polish<\\/a>\\n  <p>I wish I was more creative. I feel like there are flashes every once in a while, but not enough. I guess the only way to get better is to keep reading, learning techniques, and just trying stuff. This is an excellent article about adding those finishing touches to sites. The before and after is pretty incredible.<\\/p><\\/li>\\n\\n <li><a href=\\\"http:\\/\\/www.zeldman.com\\/2007\\/10\\/10\\/testing-designs-for-color-blindness\\/\\\">Testing designs for color-blindness<\\/a>\\n  <p>This I found really interesting. Seeing what sites look like through the eyes of someone who is color blind. <a href=\\\"http:\\/\\/colorfilter.wickline.org\\/\\\">Go take a look at what your site looks like<\\/a>.<\\/p><\\/li>\\n\\n <li><a href=\\\"http:\\/\\/www.456bereastreet.com\\/archive\\/200710\\/helping_your_client_maintain_markup_quality\\/\\\">Helping your client maintain markup quality<\\/a>\\n  <p>This is something that all of us web developers struggle with. How do we keep our clients from putting out crap code? <acronym title=\\\"What You See Is What You Get\\\">WYSIWYG<\\/acronym>s don&rsquo;t help the cause either. This idea is pretty interesting, to have a sort of warning style when depreciated elements are being used. Interesting concept.<\\/p><\\/li>\\n\\n <li><a href=\\\"http:\\/\\/fadtastic.net\\/2007\\/10\\/10\\/big-bold-backgrounds\\/\\\">Big, Bold Backgrounds<\\/a>\\n  <p>I personally love the big, bold backgrounds&hellip;when they are done well. I instantly though of <a href=\\\"http:\\/\\/mtv.com\\/\\\">MTV\'s<\\/a> &ldquo;new&rdquo; site. There are so many backgrounds on there. I have refreshed a bunch of times and never seen the same one. If only I had those kind of creative skills. Maybe some day&hellip;<\\/p><\\/li>\\n<\\/ul>\",\"4\":{\"website\":{}}}}','2014-01-19 13:01:11','2014-08-08 19:32:29','24a2f06f-1953-4f75-b079-aa35fb9fb93c',1),(250,268,4,1,1,NULL,'{\"authorId\":1,\"title\":{\"title\":{}},\"slug\":\"weekly-link-round-up\",\"postDate\":1191845413,\"expiryDate\":null,\"enabled\":1,\"fields\":{\"2\":\"<p>So my plan is to eventually get some sort of consistency and post a weekly round-up of good links. I haven&rsquo;t decided exactly which day I will publish it, but I am thinking about trying to do it on Friday&rsquo;s. I guess I am a little late, but there are a few links that really stood out to me last week.<\\/p>\\n\\n<ul>\\n <li><a href=\\\"http:\\/\\/www.brandspankingnew.net\\/archive\\/2005\\/08\\/adding_an_os_x.html\\\">OS X style searchbox<\\/a>\\n  <p>I noticed that when <a href=\\\"http:\\/\\/apple.com\\\">Apple<\\/a> redesigned their site, the search box looked like the OS X search box. Then I noticed that they used JavaScript to do it (I guess so that it actually worked in Safari).<\\/p>\\n <\\/li>\\n\\n <li><a href=\\\"http:\\/\\/www.stuffandnonsense.co.uk\\/malarkey\\/more\\/csseleven\\/\\\">CSS Eleven<\\/a>\\n  <p>CSS Eleven is an international group of visual web designers and developers who are committed to helping the W3C\'s CSS Working Group to better deliver the tools that are needed to design tomorrow\'s web. I&rsquo;m so jealous. This is quite a star-studded line-up:<\\/p>\\n  <ul>\\n   <li>Cameron Adams<\\/li>\\n   <li>Jina Bolton<\\/li>\\n   <li>Mark Boulton<\\/li>\\n   <li>Dan Cederholm<\\/li>\\n   <li>Andy Clarke<\\/li>\\n   <li>Jeff Croft<\\/li>\\n   <li>Aaron Gustafson<\\/li>\\n   <li>Jon Hicks<\\/li>\\n   <li>Roger Johansson<\\/li>\\n   <li>Richard Rutter<\\/li>\\n   <li>Jonathon Snook<\\/li>\\n  <\\/ul>\\n <\\/li>\\n <li><a href=\\\"http:\\/\\/www.readwriteweb.com\\/archives\\/dear_new_york_times_tear_down_the_registration_wall.php\\\">Dear New York Times: The Pay Wall Was Only Half the Problem<\\/a>\\n  <p>The New York Times recently removed their subscription requirement to reading articles, but you still have to register to read them. Does only removing the subscription requirement solve the problem? I think not.<\\/p>\\n <\\/li>\\n <li><a href=\\\"http:\\/\\/www.simplebits.com\\/notebook\\/2007\\/10\\/05\\/fonts.html\\\">A Type In the Right Direction?<\\/a>\\n  <p>Webkit now supports the @font-face CSS property. I can only dream that this becomes a standards across all browsers. This was <a href=\\\"http:\\/\\/trevordavis.net\\/blog\\/web\\/my-web-wish-list.php\\\">#4 on my birthday web wish list this year<\\/a>.<\\/p>\\n <\\/li>\\n<\\/ul>\\n\\n<p>I guess that&rsquo;s it from last week. Hopefully I will start to do this on some sort of consistent basis.<\\/p>\",\"4\":{\"website\":{}}}}','2014-01-19 13:01:11','2014-08-08 19:32:29','d09db260-c6f0-4459-94da-3166a415e0e6',1),(251,269,4,1,1,NULL,'{\"authorId\":1,\"title\":{\"title\":{}},\"slug\":\"ive-gone-pink\",\"postDate\":1191274457,\"expiryDate\":null,\"enabled\":1,\"fields\":{\"2\":\"<p>In support of Breast Care Awareness Month, <a href=\\\"http:\\/\\/pinkforoctober.org\\/\\\">I&rsquo;ve gone pink for the month<\\/a>. While it is not that much, it is in hopes of spreading the word. On the technical side, I decided not to change any of the markup, but to just change the CSS and images.<\\/p>\\n\\n<p>As with just about anyone you talk to, I was directly effected by breast cancer. My mother died when I was 3. While I wish I could do more to help the cause, I donate and show support when I can.<\\/p>\\n\\n<p>Show your support, <a href=\\\"http:\\/\\/cms.komen.org\\/komen\\/Donations\\/index.htm\\\">Donate to Breast Cancer Research<\\/a>.<\\/p>\",\"4\":{\"website\":{}}}}','2014-01-19 13:01:11','2014-08-08 19:32:29','15e74dcf-26fb-4683-b16b-ec0fe02c9f37',1),(252,270,4,1,1,NULL,'{\"authorId\":1,\"title\":{\"title\":{}},\"slug\":\"save-friday-night-lights\",\"postDate\":1190476903,\"expiryDate\":null,\"enabled\":1,\"fields\":{\"2\":\"<p>This is not a typical topic for me to write about, but it is important enough that I need to write a little something. Most people probably don&rsquo; know it, but the best show on TV right now is <a href=\\\"http:\\/\\/www.nbc.com\\/Friday_Night_Lights\\/\\\">Friday Night Lights<\\/a>.<\\/p>\\n\\n<p>While I know most people are probably pretty skeptical about that statement, it is absolutely true.  After a wonderful debut season, we are getting geared up for another one. Although, NBC is trying to kill it by putting it on Fridays at 9pm.<\\/p>\\n<!--more-->\\n\\n<p>It is hard to put into words how amazing the show is. I&rsquo;m sure there are a lot of people who are thinking that it is just another football show; they are vastly mistaken. Most episodes have about 15 minutes of football or less. The show is about the people, not about football. The whole town of Dillon revolves around their high school football team; it&rsquo;s crazy.<\\/p>\\n\\n<p>Have you read the <a href=\\\"http:\\/\\/www.amazon.com\\/Friday-Night-Lights-Town-Dream\\/dp\\/B000P2XNL6\\/ref=pd_bbs_2\\/105-0787161-9936451?ie=UTF8&amp;s=books&amp;qid=1190487005&amp;sr=1-2\\\">book<\\/a>? Seen the <a href=\\\"http:\\/\\/www.amazon.com\\/Friday-Night-Lights-Widescreen-Thornton\\/dp\\/B00005JNEW\\/ref=pd_bbs_sr_3\\/105-0787161-9936451?ie=UTF8&amp;s=dvd&amp;qid=1190486988&amp;sr=8-3\\\">movie<\\/a>? In my opinion, the TV show is just as good as the book. Which is saying a lot since the book is fantastic.<\\/p>\\n\\n<p>Bill Simmons, the Sports Guy, just had a great article entitled <a href=\\\"http:\\/\\/sports.espn.go.com\\/espn\\/page2\\/story?page=simmons\\/070919\\\">Please, help me keep the &lsquo;Lights&rsquo; on<\\/a>. I think he sums it up perfectly:<\\/p>\\n\\n<blockquote>\\n<p>&ldquo;Don&rsquo;t you owe it to yourself to rent Season 1, Disc 1, and try the first four episodes? Look, if FNL doesn&rsquo;t make it, we&rsquo;re just going to get more Grey&rsquo;s Anatomy spin-offs, a CSI for every city and 20 Deal or No Deal clones. Hollywood doesn&rsquo;t like to take chances, and it doesn&rsquo;t like to fail; it figures out what works, bleeds it to death, then flips the corpse and bleeds it some more.&rdquo;<\\/p>\\n<\\/blockquote>\\n\\n<p>Isn&rsquo;t there enough trash on TV? Why not take a chance on something so highly recommended. I have never met anyone who has watched the show and didn&rsquo;t enjoy it.<\\/p>\\n\\n<p>Forget renting the first season, <a href=\\\"http:\\/\\/www.amazon.com\\/Friday-Night-Lights-First-Season\\/dp\\/B000RF1QE2\\/ref=pd_bbs_sr_1\\/105-0787161-9936451?ie=UTF8&amp;s=dvd&amp;qid=1190486988&amp;sr=8-1\\\">buy it for $20<\\/a>. You can&rsquo;t buy many TV shows for that low of a price. If that doesn&rsquo;t convince you, <a href=\\\"http:\\/\\/www.fnlguarantee.com\\/\\\">there is a full money-back guarantee<\\/a>.<\\/p>\\n\\n<p>So everyone, if that didn&rsquo;t convince you, tune in to NBC on October 5<sup>th<\\/sup> at 9pm and watch the Season 2 premiere. I promise you won&rsquo;t be disappointed.<\\/p>\",\"4\":{\"website\":{}}}}','2014-01-19 13:01:11','2014-08-08 19:32:29','64f448e7-0087-4d57-a117-a2532bc2b519',1),(253,271,4,1,1,NULL,'{\"authorId\":1,\"title\":{\"title\":{}},\"slug\":\"ajax-forms-with-jquery\",\"postDate\":1189221198,\"expiryDate\":null,\"enabled\":1,\"fields\":{\"2\":\"<p>There are so many different javascript frameworks out there, but I have recently started to use <a href=\\\"http:\\/\\/jquery.com\\\">jQuery<\\/a>, and I love it. Not only is the library much smaller than others, but it is so simple to use. I wanted to show how easy it is to turn a regular form into a AJAX form.<\\/p>\\n\\n<!--more-->\\n\\n<h2 class=\\\"replaceHeadline\\\">Start with a Regular Form<\\/h2>\\n\\n<p>First, I am going to build a <a href=\\\"http:\\/\\/trevordavis.net\\/play\\/jqueryajaxform\\/\\\">regular form<\\/a>. The form is just going to be a basic email form. You enter an email address to send to, an email address to send from, a subject, and a message. All fields are required. So the process of the form is:<\\/p>\\n\\n<ol>\\n <li>User fills out the form.<\\/li>\\n <li>User submits the form to the server.<\\/li>\\n <li>Server side script makes sure that there are no blank fields and that the email addresses are valid.<\\/li>\\n <li>If there are errors, show the form again with the error messages.<\\/li>\\n <li>If there are no errors, send the email.<\\/li>\\n<\\/ol>\\n\\n<p>Ok, so this form is pretty simple, and doesn&rsquo;t take much time to submit since it&rsquo;s so short, but let&rsquo;s see how much better we can make it with a little jQuery.<\\/p>\\n\\n<h2 class=\\\"replaceHeadline\\\">Add in JavaScript<\\/h2>\\n\\n<p>OK, so next, I am going to make an <a href=\\\"http:\\/\\/trevordavis.net\\/play\\/jqueryajaxform\\/ajaxed\\/\\\">AJAX version, which is a duplicate of the first form<\\/a>. The only other things I am going to include on the page are the jquery library (<a href=\\\"http:\\/\\/docs.jquery.com\\/Downloading_jQuery\\\">which you can download here<\\/a>) and my JavaScript to process this form.<\\/p>\\n\\n\\n<h3 class=\\\"replaceHeadline\\\">Firing My Script When the Document is Ready<\\/h3>\\n<p>jQuery has a nice little function to have you script start when the document is ready:<\\/p>\\n\\n<div class=\\\"codeblock\\\"><code>\\n$(document).ready(function()&#123;<br \\/>&nbsp;\\/\\/Script&nbsp;goes&nbsp;here<br \\/>&#125;);&nbsp;\\n\\n<\\/code><\\/div>\\n\\n<p>OK, easy enough. Now, let&rsquo;s make something happen when the button to submit the form is clicked. I was smart enough to add an id of <strong>submit<\\/strong> to my button, so it makes it really easy to reference:<\\/p>\\n\\n<div class=\\\"codeblock\\\"><code>\\n$(document).ready(function()&#123;<br \\/>&nbsp;$(\\\"#submit\\\").click(function()&#123;<br \\/>&nbsp;&nbsp;return&nbsp;false;<br \\/>&nbsp;&#125;);<br \\/>&#125;);&nbsp;\\n\\n<\\/code><\\/div>\\n\\n<p>First things first, I&rsquo;m going to hide anything with the class of error if it&rsquo;s showing (which nothing will be unless the form is unsuccessfully submitted twice). I also create a variable that I am going to use later to see if the form has an error and a variable to store the email regular expression:<\\/p>\\n\\n<div class=\\\"codeblock\\\"><code>\\n$(document).ready(function()&#123;<br \\/>&nbsp;$(\\\"#submit\\\").click(function()&#123;<br \\/>&nbsp;&nbsp;$(\\\".error\\\").hide();<br \\/>&nbsp;&nbsp;var&nbsp;hasError&nbsp;=&nbsp;false;<br \\/>&nbsp;&nbsp;var&nbsp;emailReg&nbsp;=&nbsp;\\/^(&#91;w-.&#93;+@(&#91;w-&#93;+.)+&#91;w-&#93;&#123;2,4&#125;)?$\\/;<br \\/><br \\/>&nbsp;&nbsp;return&nbsp;false;<br \\/>&nbsp;&#125;);<br \\/>&#125;);&nbsp;\\n\\n<\\/code><\\/div>\\n\\n\\n<h3 class=\\\"replaceHeadline\\\">Error Checking<\\/h3>\\n\\n<p>Now that we&rsquo;ve got the beginning of the script setup, we need to do the error checking. So first, let&rsquo;s check to make sure that the email to address is not empty or invalid:<\\/p>\\n\\n<div class=\\\"codeblock\\\"><code>\\n$(document).ready(function()&#123;<br \\/>&nbsp;$(\\\"#submit\\\").click(function()&#123;<br \\/>&nbsp;&nbsp;$(\\\".error\\\").hide();<br \\/>&nbsp;&nbsp;var&nbsp;hasError&nbsp;=&nbsp;false;<br \\/>&nbsp;&nbsp;var&nbsp;emailReg&nbsp;=&nbsp;\\/^(&#91;w-.&#93;+@(&#91;w-&#93;+.)+&#91;w-&#93;&#123;2,4&#125;)?$\\/;<br \\/><br \\/>&nbsp;&nbsp;var&nbsp;emailToVal&nbsp;=&nbsp;$(\\\"#emailTo\\\").val();<br \\/>&nbsp;&nbsp;if(emailToVal&nbsp;==&nbsp;\'\')&nbsp;&#123;<br \\/>&nbsp;&nbsp;&nbsp;$(\\\"#emailTo\\\").after(\'&lt;span&nbsp;class=\\\"error\\\"&gt;You&nbsp;forgot&nbsp;to&nbsp;enter&nbsp;the&nbsp;email&nbsp;address&nbsp;to&nbsp;send&nbsp;to&lt;\\/span&gt;\');<br \\/>&nbsp;&nbsp;&nbsp;hasError&nbsp;=&nbsp;true;<br \\/>&nbsp;&nbsp;&#125;&nbsp;else&nbsp;if(!emailReg.test(emailToVal))&nbsp;&#123;<br \\/>&nbsp;&nbsp;&nbsp;$(\\\"#emailTo\\\").after(\'&lt;span&nbsp;class=\\\"error\\\"&gt;Enter&nbsp;a&nbsp;valid&nbsp;email&nbsp;address&nbsp;to&nbsp;send&nbsp;to.&lt;\\/span&gt;\');<br \\/>&nbsp;&nbsp;&nbsp;hasError&nbsp;=&nbsp;true;<br \\/>&nbsp;&nbsp;&#125;<br \\/><br \\/>&nbsp;&nbsp;return&nbsp;false;<br \\/>&nbsp;&#125;);<br \\/>&#125;);&nbsp;\\n\\n<\\/code><\\/div>\\n\\n<p>Remember, the email address to send to input has an id of <strong>emailTo<\\/strong>. What that code is saying is:<\\/p>\\n\\n<ul>\\n <li>Get the value of the email to address input.<\\/li>\\n <li>If it is empty, add an error message after the input<\\/li>\\n <li>If it has an invalid email address, add an error message after the input.<\\/li>\\n<\\/ul>\\n\\n<p>Now, we just need to repeat the error checking for the other form fields:<\\/p>\\n\\n<div class=\\\"codeblock\\\"><code>\\n$(document).ready(function()&#123;<br \\/>&nbsp;$(\\\"#submit\\\").click(function()&#123;<br \\/>&nbsp;&nbsp;$(\\\".error\\\").hide();<br \\/>&nbsp;&nbsp;var&nbsp;hasError&nbsp;=&nbsp;false;<br \\/>&nbsp;&nbsp;var&nbsp;emailReg&nbsp;=&nbsp;\\/^(&#91;w-.&#93;+@(&#91;w-&#93;+.)+&#91;w-&#93;&#123;2,4&#125;)?$\\/;<br \\/><br \\/>&nbsp;&nbsp;var&nbsp;emailToVal&nbsp;=&nbsp;$(\\\"#emailTo\\\").val();<br \\/>&nbsp;&nbsp;if(emailToVal&nbsp;==&nbsp;\'\')&nbsp;&#123;<br \\/>&nbsp;&nbsp;&nbsp;$(\\\"#emailTo\\\").after(\'&lt;span&nbsp;class=\\\"error\\\"&gt;You&nbsp;forgot&nbsp;to&nbsp;enter&nbsp;the&nbsp;email&nbsp;address&nbsp;to&nbsp;send&nbsp;to.&lt;\\/span&gt;\');<br \\/>&nbsp;&nbsp;&nbsp;hasError&nbsp;=&nbsp;true;<br \\/>&nbsp;&nbsp;&#125;&nbsp;else&nbsp;if(!emailReg.test(emailToVal))&nbsp;&#123;<br \\/>&nbsp;&nbsp;&nbsp;$(\\\"#emailTo\\\").after(\'&lt;span&nbsp;class=\\\"error\\\"&gt;Enter&nbsp;a&nbsp;valid&nbsp;email&nbsp;address&nbsp;to&nbsp;send&nbsp;to.&lt;\\/span&gt;\');<br \\/>&nbsp;&nbsp;&nbsp;hasError&nbsp;=&nbsp;true;<br \\/>&nbsp;&nbsp;&#125;<br \\/><br \\/>&nbsp;&nbsp;var&nbsp;emailFromVal&nbsp;=&nbsp;$(\\\"#emailFrom\\\").val();<br \\/>&nbsp;&nbsp;if(emailFromVal&nbsp;==&nbsp;\'\')&nbsp;&#123;<br \\/>&nbsp;&nbsp;&nbsp;$(\\\"#emailFrom\\\").after(\'&lt;span&nbsp;class=\\\"error\\\"&gt;You&nbsp;forgot&nbsp;to&nbsp;enter&nbsp;the&nbsp;email&nbsp;address&nbsp;to&nbsp;send&nbsp;from.&lt;\\/span&gt;\');<br \\/>&nbsp;&nbsp;&nbsp;hasError&nbsp;=&nbsp;true;<br \\/>&nbsp;&nbsp;&#125;&nbsp;else&nbsp;if(!emailReg.test(emailFromVal))&nbsp;&#123;<br \\/>&nbsp;&nbsp;&nbsp;$(\\\"#emailFrom\\\").after(\'&lt;span&nbsp;class=\\\"error\\\"&gt;Enter&nbsp;a&nbsp;valid&nbsp;email&nbsp;address&nbsp;to&nbsp;send&nbsp;from.&lt;\\/span&gt;\');<br \\/>&nbsp;&nbsp;&nbsp;hasError&nbsp;=&nbsp;true;<br \\/>&nbsp;&nbsp;&#125;<br \\/><br \\/>&nbsp;&nbsp;var&nbsp;subjectVal&nbsp;=&nbsp;$(\\\"#subject\\\").val();<br \\/>&nbsp;&nbsp;if(subjectVal&nbsp;==&nbsp;\'\')&nbsp;&#123;<br \\/>&nbsp;&nbsp;&nbsp;$(\\\"#subject\\\").after(\'&lt;span&nbsp;class=\\\"error\\\"&gt;You&nbsp;forgot&nbsp;to&nbsp;enter&nbsp;the&nbsp;subject.&lt;\\/span&gt;\');<br \\/>&nbsp;&nbsp;&nbsp;hasError&nbsp;=&nbsp;true;<br \\/>&nbsp;&nbsp;&#125;<br \\/><br \\/>&nbsp;&nbsp;var&nbsp;messageVal&nbsp;=&nbsp;$(\\\"#message\\\").val();<br \\/>&nbsp;&nbsp;if(messageVal&nbsp;==&nbsp;\'\')&nbsp;&#123;<br \\/>&nbsp;&nbsp;&nbsp;$(\\\"#message\\\").after(\'&lt;span&nbsp;class=\\\"error\\\"&gt;You&nbsp;forgot&nbsp;to&nbsp;enter&nbsp;the&nbsp;message.&lt;\\/span&gt;\');<br \\/>&nbsp;&nbsp;&nbsp;hasError&nbsp;=&nbsp;true;<br \\/>&nbsp;&nbsp;&#125;<br \\/><br \\/>&nbsp;&nbsp;return&nbsp;false;<br \\/>&nbsp;&#125;);<br \\/>&#125;);&nbsp;\\n\\n<\\/code><\\/div>\\n\\n<p>Ok, error checking is done. If there are no errors, we need to send the email via an AJAX request. I&rsquo;m not going to include the whole script here, just because it&rsquo;s getting long, but you can <a href=\\\"http:\\/\\/trevordavis.net\\/images\\/content\\/2008\\/01\\/submitform.js\\\">see the whole script<\\/a>.<\\/p>\\n\\n<p>So, there are no errors. Let&rsquo;s remove the button from the form, and add in a loading graphic:<\\/p>\\n\\n<div class=\\\"codeblock\\\"><code>\\nif(hasError&nbsp;==&nbsp;false)&nbsp;&#123;<br \\/>&nbsp;$(this).hide();<br \\/>&nbsp;$(\\\"#sendEmail&nbsp;li.buttons\\\").append(\'&lt;img&nbsp;src=\\\"\\/images\\/template\\/loading.gif\\\"&nbsp;alt=\\\"Loading\\\"&nbsp;id=\\\"loading\\\"&nbsp;\\/&gt;\');<br \\/>&#125;&nbsp;\\n\\n<\\/code><\\/div>\\n\\n<h3 class=\\\"replaceHeadline\\\">Submit the POST Request<\\/h3>\\n<p>Ok, now let&rsquo;s send the values via an AJAX POST request to our send email script that just sends the email. Once the request is completed, let&rsquo;s hide the form and display a success message:<\\/p>\\n\\n<div class=\\\"codeblock\\\"><code>\\n$.post(\\\"\\/play\\/jqueryajaxform\\/sendEmail.php\\\",<br \\/>&nbsp;&nbsp;&nbsp;&#123;&nbsp;emailTo:&nbsp;emailToVal,&nbsp;emailFrom:&nbsp;emailFromVal,&nbsp;subject:&nbsp;subjectVal,&nbsp;message:&nbsp;messageVal&nbsp;&#125;,<br \\/>&nbsp;&nbsp;&nbsp;&nbsp;function(data)&#123;<br \\/>&nbsp;&nbsp;$(\\\"#sendEmail\\\").slideUp(\\\"normal\\\",&nbsp;function()&nbsp;&#123;<br \\/><br \\/>&nbsp;&nbsp;&nbsp;$(\\\"#sendEmail\\\").before(\'&lt;h1&gt;Success&lt;\\/h1&gt;&lt;p&gt;Your&nbsp;email&nbsp;was&nbsp;sent.&lt;\\/p&gt;\');<br \\/>&nbsp;&nbsp;&#125;);<br \\/>&nbsp;&#125;<br \\/>);&nbsp;\\n\\n<\\/code><\\/div>\\n\\n<p>Pretty nice huh? So now, you have a perfectly accessible form. It works fine without JavaScript. But it works even better with JavaScript. I highly recommend checking out the <a href=\\\"http:\\/\\/docs.jquery.com\\/Main_Page\\\">jQuery Documentation<\\/a>. So go ahead, send yourself some emails to see for yourself.<\\/p>\\n\\n<h3 class=\\\"replaceHeadline\\\">Update&hellip;<\\/h3>\\n<p>I was asked in the comments if I could include the PHP script. So as requested, here are the files that are used:<\\/p>\\n<ul>\\n<li><a href=\\\"http:\\/\\/trevordavis.net\\/images\\/content\\/2008\\/01\\/index.phps\\\">index.php<\\/a><\\/li>\\n<li><a href=\\\"http:\\/\\/trevordavis.net\\/images\\/content\\/2008\\/01\\/verify.phps\\\">verify.php<\\/a><\\/li>\\n<li><a href=\\\"http:\\/\\/trevordavis.net\\/images\\/content\\/2008\\/01\\/sendemail.phps\\\">sendEmail.php<\\/a><\\/li>\\n<li><a href=\\\"http:\\/\\/trevordavis.net\\/images\\/content\\/2008\\/01\\/thanks.phps\\\">thanks.php<\\/a><\\/li>\\n<\\/ul>\",\"4\":{\"website\":{}}}}','2014-01-19 13:01:11','2014-08-08 19:32:29','20232005-08ee-40cc-95b1-89131e703220',1),(254,272,4,1,1,NULL,'{\"authorId\":1,\"title\":{\"title\":{}},\"slug\":\"its-still-a-stinking-wysiwyg\",\"postDate\":1187997953,\"expiryDate\":null,\"enabled\":1,\"fields\":{\"2\":\"<p>Just the other day, <a href=\\\"http:\\/\\/meyerweb.com\\/eric\\/thoughts\\/2007\\/08\\/23\\/css-sculptor-released\\/\\\">Eric Meyer announced<\\/a> that he has been working with WebAssist to create <a href=\\\"http:\\/\\/www.webassist.com\\/go\\/css\\/emeyer\\\">Eric Meyer&rsquo;s CSS Sculptor<\\/a>. It&rsquo;s a Dreamweaver Extension that assists users in creating clean markup and CSS. While this seems like a vast improvement over previous <acronym title=\\\"What You See Is What You Get\\\">WYSIWYG<\\/acronym>s, it still feels like one.<\\/p>\\n\\n<!--more-->\\n\\n<h2 class=\\\"replaceHeadline\\\">Why Do I Feel This Way?<\\/h2>\\n\\n<p>While it&rsquo;s great that this would mean that there is less crap code out there, people are still basically using forms to generate the markup and CSS needed. They <strong>still are not<\\/strong> learning anything about web development.<\\/p>\\n\\n<p>One thing I saw in the plans for future releases was:<\\/p>\\n\\n<blockquote><p>There are some things I expect will be improved in future releases, like shorthand value minimization&mdash;the simplest example of that being a condensation of 0 0 0 0 down to just plain 0.&rdquo;<\\/p><\\/blockquote>\\n\\n<p>Wow, if that&rsquo;s not going to confuse the hell out of people who don&rsquo;t know CSS, I don&rsquo;t know what will. Imagine trying to add a margin in, so you add <code>margin: 10px 0 10px 0;<\\/code>, then it gets condensed to <code>margin: 10px 0;<\\/code>. It kind of seems like you would be confused as to why it wouldn&rsquo;t accept the values that you were adding. Unless they give some sort of alert telling the user that this is what is happening, they will definitely be confused.<\\/p>\\n\\n<p>They won&rsquo;t know the different between margin and padding.<\\/p>\\n\\n<p>They still may use blockquotes to indent their text.<\\/p>\\n\\n<p>It just seems like crap.<\\/p>\\n\\n<p>Users are still going to be choosing from a template. Do we really want the web to be built on templates?<\\/p>\\n\\n<h2 class=\\\"replaceHeadline\\\">What are the Ramifications<\\/h2>\\n\\n<p>As I was thinking about this writing this, I was reading a post at <a href=\\\"http:\\/\\/fadtastic.net\\\"> entitled &ldquo;<\\/a><a href=\\\"http:\\/\\/fadtastic.net\\/2007\\/08\\/24\\/will-software-ever-make-us-redundant\\/\\\">Will Software Ever Make Us Redundant?<\\/a>&rdquo;.<\\/p>\\n\\n<p>I think this post really got me thinking about how even though the WYSIWYGs are getting better, I don&rsquo;t ever think that humans will become redundant in Web Design\\/Development. The human mind is just too creative and amazing for a piece of software to ever be able to accomplish the same thing. Think about all of those wacky IE6 bugs.<\\/p>\\n\\n<p>I don&rsquo;t know Mr. Meyer, with all due respect, it kinda feels like you sold out on us.<\\/p>\",\"4\":{\"website\":{}}}}','2014-01-19 13:01:11','2014-08-08 19:32:29','3199b1c4-23cd-456c-ad19-5ca9e4b009ec',1),(255,273,4,1,1,NULL,'{\"authorId\":1,\"title\":{\"title\":{}},\"slug\":\"stop-using-helvetica\",\"postDate\":1187725265,\"expiryDate\":null,\"enabled\":1,\"fields\":{\"2\":\"<p>Ok, so that&rsquo;s a little extreme. I&rsquo;m going to preface this post a little bit. I love Helvetica as a font. It&rsquo;s a gorgeous font, and it has <a href=\\\"http:\\/\\/www.helveticafilm.com\\/\\\">stood the test of time<\\/a>. So now that everyone understands my opinion on the font, I&rsquo;ll go back to my original post&hellip;<\\/p>\\n\\n<!--more-->\\n\\n<p>Why do designers decide to use Helvetica for their site&rsquo;s body copy? It looks <strong>AWFUL<\\/strong> at small sizes.<\\/p>\\n\\n<p>The sizes that I think have the most problems are 12px and lower. Unfortunately, I have seen sites that use body copy as small as 10px. It&rsquo;s pretty sad that when I get to a site that uses a small size of Helvetica as the body copy, I change the body <code>font-family<\\/code> to Verdana using <a href=\\\"http:\\/\\/getfirebug.com\\/\\\">Firebug<\\/a>.<\\/p>\\n\\n<p>I made an <a href=\\\"http:\\/\\/trevordavis.net\\/play\\/helvetica\\/\\\">example page to show the various Helvetica sizes from 10px &ndash; 20px<\\/a>.<\\/p>\\n\\n<h2 class=\\\"replaceHeadline\\\">Helvetica on Windows<\\/h2>\\n<a href=\\\"http:\\/\\/trevordavis.net\\/images\\/content\\/2008\\/01\\/screenshot-windows.gif\\\" rel=\\\"lightbox-helvetica\\\" title=\\\"Helvetica on Windows Screenshot\\\"><img src=\\\"http:\\/\\/trevordavis.net\\/images\\/content\\/2008\\/01\\/screenshot-windows_thumb.gif\\\" alt=\\\"Windows Screenshot\\\" class=\\\"thumbnail\\\" height=\\\"125\\\" width=\\\"468\\\" \\/><\\/a>\\n\\n<h2 class=\\\"replaceHeadline\\\">Helvetica on the Mac<\\/h2>\\n\\n<a href=\\\"http:\\/\\/trevordavis.net\\/images\\/content\\/2008\\/01\\/screenshot-mac.gif\\\" rel=\\\"lightbox-helvetica\\\" title=\\\"Helvetica on Mac Screenshot\\\"><img src=\\\"http:\\/\\/trevordavis.net\\/images\\/content\\/2008\\/01\\/screenshot-mac_thumb.gif\\\" alt=\\\"Windows Screenshot\\\" class=\\\"thumbnail\\\" height=\\\"112\\\" width=\\\"468\\\" \\/><\\/a>\\n\\n<h3 class=\\\"replaceHeadline\\\">In Conclusion<\\/h3>\\n<p>So I guess this is more of a call to action than a post. So web designers, <strong>Stop Using Helvetica<\\/strong> at such small sizes!<\\/p>\",\"4\":{\"website\":{}}}}','2014-01-19 13:01:11','2014-08-08 19:32:29','727691c2-75ff-40fe-b858-1afdddb22184',1),(256,274,4,1,1,NULL,'{\"authorId\":1,\"title\":{\"title\":{}},\"slug\":\"calculating-font-sizes\",\"postDate\":1185926702,\"expiryDate\":null,\"enabled\":1,\"fields\":{\"2\":\"<p>There are a lot of articles out there about typography on the web. I wanted to explain my method of controlling font sizes and margins in CSS.<\\/p>\\n\\n<p>I love <a href=\\\"http:\\/\\/www.danielmall.com\\/archives\\/2007\\/04\\/20\\/soft_serve.php\\\">Dan Mall&rsquo;s Soft Serve Technique<\\/a>, but then you have to make a special case for IE6. (Hopefully it won&rsquo;t be too much longer that we have to worry about IE6).<\\/p>\\n\\n<!--more-->\\n\\n<h2 class=\\\"replaceHeadline\\\">Getting a Usable Base Font Size<\\/h2>\\n\\n<p>Ok, so to start, I like setting the font size of the body to <em>62.5%<\\/em>. I used to take Dan Cederholm&rsquo;s approach of setting the font size to <em>small<\\/em>, but I finally realized that it did not give me a nice base font size to play with.<\\/p>\\n\\n<p>So by setting the font size of the body to <em>62.5%<\\/em>, we get a base font size of 10px. This gives us a nice round number to work with. Thus, 1em now equals 10px. 10px is way too small to be the font size of the content though. Thus, I just set the font size of the outter-most container to <em>1.2em<\\/em>. Since we had a base size of 10px, our font size in the container becomes 12px.<\\/p>\\n\\n<h2 class=\\\"replaceHeadline\\\">Heading Font Sizes<\\/h2>\\n\\n<p>The next thing I like to do is to set the font sizes of all of the headings, h1-h6. A good set of values for headings is:<\\/p>\\n\\n<ul>\\n <li>h1: 22px<\\/li>\\n <li>h2: 20px<\\/li>\\n <li>h3: 18px<\\/li>\\n <li>h4: 16px<\\/li>\\n <li>h5: 14px<\\/li>\\n <li>h6: 12px<\\/li>\\n<\\/ul>\\n\\n<p>Again, these are just values that I am suggesting, you could definitely choose whatever you want.<\\/p>\\n\\n<p>To get these font sizes, we just need to do some simple math.<\\/p>\\n\\n<h3 class=\\\"replaceHeadline\\\">Example<\\/h3>\\n\\n<p>Let&rsquo;s use an h3 as an example. We take the size that we want the heading to be, 18px, and divide it by the container font size, 12px. So, 18\\/12 = 1.5. Then, we set the font size to either 1.5em or 150%. I personally like working with ems, although I used to prefer percentages.<\\/p>\\n\\n<p>So again, font size we want to achieve \\/ font size of the container. Use this to compute the rest of your heading font sizes, and then you will have nice pixel values to work with.<\\/p>\\n\\n<h2 class=\\\"replaceHeadline\\\">Attacking the Margins<\\/h2>\\n\\n<p>So obviously you want to avoid letting the browser control how your elements will be spaced, so let&rsquo;s work on setting the margins on these elements too.<\\/p>\\n\\n<h3 class=\\\"replaceHeadline\\\">Remove the Default Margins<\\/h3>\\n\\n<p>The first thing I do in a stylesheet is zero out the margins and paddings:<\\/p>\\n\\n<div class=\\\"codeblock\\\"><code>\\nhtml,&nbsp;body,&nbsp;div,&nbsp;h1,&nbsp;h2,&nbsp;h3,&nbsp;h4,&nbsp;h5,&nbsp;h6,&nbsp;ul,&nbsp;ol,&nbsp;dl,&nbsp;li,&nbsp;dt,&nbsp;dd,&nbsp;p,&nbsp;blockquote,&nbsp;pre,&nbsp;form,&nbsp;th,&nbsp;td&nbsp;&#123;<br \\/>&nbsp;margin:&nbsp;0;<br \\/>&nbsp;padding:&nbsp;0;<br \\/>&#125;&nbsp;\\n\\n<\\/code><\\/div>\\n\\n<p>Next, I set a bottom margin of 1em on p, ul, ol, dl, blockquote:<\\/p>\\n\\n<div class=\\\"codeblock\\\"><code>\\np,&nbsp;ul,&nbsp;ol,&nbsp;dl,&nbsp;blockquote&nbsp;&#123;&nbsp;margin-bottom:&nbsp;1em;&nbsp;&#125;&nbsp;\\n\\n<\\/code><\\/div>\\n\\n<p>Then, to get an equal amount of margin on the bottom of the headings, we just need to do more simple math. We can&rsquo;t just set the bottom margin to 1em because our font size on these elements are bigger than the rest of the content.<\\/p>\\n\\n<h4 class=\\\"replaceHeadline\\\">Example<\\/h4>\\n\\n<p>So let&rsquo;s use the h3 as an example again. This time, we take the font size of the container, 12px, and diving it by the size of the heading, 18px. 12\\/18 = 0.667. So then, our h3 would look like this:<\\/p>\\n\\n<div class=\\\"codeblock\\\"><code>\\nh3&nbsp;&#123;<br \\/>&nbsp;font-size:&nbsp;1.5em;<br \\/>&nbsp;margin-bottom:&nbsp;0.667em;<br \\/>&#125;&nbsp;\\n\\n<\\/code><\\/div>\\n\\n<p>So again, font size of the container \\/ font size of the element. If you do this for all elements, you will have an equal margin between all elements. I made a <a href=\\\"http:\\/\\/trevordavis.net\\/play\\/fontSize\\/\\\">page showing elements with equal margins<\\/a>.<\\/p>\\n\\n<p>I used to think this was best, but I have since realized that I like having the headings closer to the text that is following. So I divide the bottom margin on the headings by 4. Thus, we get a quarter of the margin above the heading, below it.<\\/p>\\n\\n<p>In my opinion, <a href=\\\"http:\\/\\/trevordavis.net\\/play\\/fontsize\\/example-2\\/\\\">the example page with custom margins<\\/a> looks much better.<\\/p>\\n\\n<p>Anyone else have other methods?<\\/p>\",\"4\":{\"website\":{}}}}','2014-01-19 13:01:11','2014-08-08 19:32:29','7e691423-e4eb-406e-ad35-8a3601e30a14',1),(257,275,4,1,1,NULL,'{\"authorId\":1,\"title\":{\"title\":{}},\"slug\":\"creating-a-dynamic-google-sitemap\",\"postDate\":1184713996,\"expiryDate\":null,\"enabled\":1,\"fields\":{\"2\":\"<p>My site has a <a href=\\\"http:\\/\\/trevordavis.net\\/blog\\/news\\/switched-to-wordpress.php\\\">Wordpress blog on it<\\/a>, but it does not power the whole site, just the blog. If my entire site were powered by Wordpress, then I could generate a <a href=\\\"http:\\/\\/www.google.com\\/webmasters\\/sitemaps\\/\\\">sitemap for Google<\\/a> using Wordpress functions.<\\/p>\\n\\n<p>I did not want to have Wordpress control everything; I wanted to have more control. By doing some quick queries, you can generate a sitemap for Google that has all of your blog entries in it.<\\/p>\\n\\n<!--more-->\\n\\n<h2>Setting it Up<\\/h2>\\n\\n<p>First, you will need to send the correct headers, create the opening xml tag, and connect to your database.<\\/p>\\n\\n<div class=\\\"codeblock\\\"><code>\\n&lt;?php<br \\/>header(\\\"Content-Type:&nbsp;text\\/xml;charset=iso-8859-1\\\");<br \\/>echo&nbsp;\'&lt;?xml&nbsp;version=\\\"1.0\\\"&nbsp;encoding=\\\"UTF-8\\\"?&gt;<br \\/>&lt;urlset&nbsp;xmlns=\\\"http:\\/\\/www.sitemaps.org\\/schemas\\/sitemap\\/0.9\\\"&gt;\';<br \\/>require_once(\'DB&nbsp;CONNECTION&nbsp;GOES&nbsp;HERE\');&nbsp;\\/\\/This&nbsp;is&nbsp;where&nbsp;I&nbsp;would&nbsp;require&nbsp;my&nbsp;DB&nbsp;connection&nbsp;file&nbsp;\\n\\n<\\/code><\\/div>\\n\\n<p>If you are not sure how to connect to your database, you will need to contact your host to get that information, and then do a <a href=\\\"http:\\/\\/www.google.com\\/search?source=ig&amp;hl=en&amp;q=php+mysql+connection&amp;btnG=Google+Search\\\">search for php MySQL connection<\\/a>. If you can&rsquo;t figure it out still, <a href=\\\"\\/contact\\/\\\">let me know, and I can help<\\/a>.<\\/p>\\n\\n<h2>Get the Categories<\\/h2>\\n\\n<p>Next, we want to query the database to get the categories used in Wordpress:<\\/p>\\n\\n<div class=\\\"codeblock\\\"><code>\\n$query&nbsp;=&nbsp;\\\"SELECT&nbsp;cat_ID,&nbsp;category_nicename<br \\/>&nbsp;&nbsp;FROM&nbsp;wp_categories<br \\/>&nbsp;&nbsp;ORDER&nbsp;BY&nbsp;category_nicename\\\";<br \\/>$result&nbsp;=&nbsp;@mysql_query($query);&nbsp;\\n\\n<\\/code><\\/div>\\n\\n<p>Then, we need to loop through the categories and display a url entry for each category:<\\/p>\\n\\n<div class=\\\"codeblock\\\"><code>\\nwhile($row&nbsp;=&nbsp;mysql_fetch_array($result,&nbsp;MYSQL_ASSOC))&nbsp;&#123;<br \\/>&nbsp;echo&nbsp;\'&lt;url&gt;<br \\/>&nbsp;&nbsp;&lt;loc&gt;http:\\/\\/trevordavis.net\\/blog\\/\'&nbsp;.&nbsp;$row&#91;\'category_nicename\'&#93;&nbsp;.&nbsp;\'\\/&lt;\\/loc&gt;<br \\/>&nbsp;&nbsp;&lt;changefreq&gt;weekly&lt;\\/changefreq&gt;<br \\/>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;\\/url&gt;\';&nbsp;\\n\\n<\\/code><\\/div>\\n\\n<h2>Get the Entries<\\/h2>\\n\\n<p>Next, we need to create a query to return all of the entries for each category:<\\/p>\\n\\n<div class=\\\"codeblock\\\"><code>\\n$artQuery&nbsp;=&nbsp;\\\"SELECT&nbsp;p.post_name,&nbsp;DATE_FORMAT(p.post_date,&nbsp;\'%Y-%m-%d\')&nbsp;AS&nbsp;createdOn<br \\/>&nbsp;&nbsp;FROM&nbsp;wp_posts&nbsp;AS&nbsp;p,&nbsp;wp_categories&nbsp;AS&nbsp;cat,&nbsp;wp_post2cat&nbsp;AS&nbsp;pc<br \\/>&nbsp;&nbsp;WHERE&nbsp;p.ID&nbsp;=&nbsp;pc.post_id&nbsp;AND&nbsp;pc.category_id&nbsp;=&nbsp;\\\"&nbsp;.&nbsp;$row&#91;\'cat_ID\'&#93;&nbsp;.&nbsp;\\\"<br \\/>&nbsp;&nbsp;GROUP&nbsp;BY&nbsp;p.ID<br \\/>&nbsp;&nbsp;ORDER&nbsp;BY&nbsp;p.ID&nbsp;DESC\\\";<br \\/>$artResult&nbsp;=&nbsp;@mysql_query($artQuery);&nbsp;\\n\\n<\\/code><\\/div>\\n\\n<p>Finally, we want to create a url entry for each blog entry:<\\/p>\\n\\n<div class=\\\"codeblock\\\"><code>\\nwhile($artRow&nbsp;=&nbsp;mysql_fetch_array($artResult,&nbsp;MYSQL_ASSOC))&nbsp;&#123;<br \\/>&nbsp;echo&nbsp;\'&lt;url&gt;<br \\/>&nbsp;&nbsp;&lt;loc&gt;http:\\/\\/trevordavis.net\\/blog\\/\'&nbsp;.&nbsp;$row&#91;\'category_nicename\'&#93;&nbsp;.&nbsp;\'\\/\'.&nbsp;$artRow&#91;\'post_name\'&#93;&nbsp;.&nbsp;\'.php&lt;\\/loc&gt;<br \\/>&nbsp;&nbsp;&lt;lastmod&gt;\'.$artRow&#91;\'createdOn\'&#93;.\'&lt;\\/lastmod&gt;<br \\/>&nbsp;&nbsp;&lt;changefreq&gt;weekly&lt;\\/changefreq&gt;<br \\/>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;\\/url&gt;\';<br \\/>&#125;&nbsp;\\n\\n<\\/code><\\/div>\\n\\n<p>To finish it off, we just close everything up:<\\/p>\\n\\n<div class=\\\"codeblock\\\"><code>\\n&#125;<br \\/>echo\'&lt;\\/urlset&gt;\';?&gt;&nbsp;\\n\\n<\\/code><\\/div>\\n\\n<h3>The Whole Script<\\/h3>\\n\\n<p>Here is the finished script:<\\/p>\\n\\n<div class=\\\"codeblock\\\"><code>\\n&lt;?php<br \\/>header(\\\"Content-Type:&nbsp;text\\/xml;charset=iso-8859-1\\\");<br \\/>echo&nbsp;\'&lt;?xml&nbsp;version=\\\"1.0\\\"&nbsp;encoding=\\\"UTF-8\\\"?&gt;<br \\/>&lt;urlset&nbsp;xmlns=\\\"http:\\/\\/www.sitemaps.org\\/schemas\\/sitemap\\/0.9\\\"&gt;\';<br \\/>require_once(\'DB&nbsp;CONNECTION&nbsp;GOES&nbsp;HERE\');&nbsp;\\/\\/This&nbsp;is&nbsp;where&nbsp;I&nbsp;would&nbsp;require&nbsp;my&nbsp;DB&nbsp;connection&nbsp;file<br \\/><br \\/>$query&nbsp;=&nbsp;\\\"SELECT&nbsp;cat_ID,&nbsp;category_nicename<br \\/>&nbsp;&nbsp;FROM&nbsp;wp_categories<br \\/>&nbsp;&nbsp;ORDER&nbsp;BY&nbsp;category_nicename\\\";<br \\/>$result&nbsp;=&nbsp;@mysql_query($query);<br \\/><br \\/><br \\/>while($row&nbsp;=&nbsp;mysql_fetch_array($result,&nbsp;MYSQL_ASSOC))&nbsp;&#123;<br \\/><br \\/>&nbsp;echo&nbsp;\'&lt;url&gt;<br \\/>&nbsp;&nbsp;&lt;loc&gt;http:\\/\\/trevordavis.net\\/blog\\/\'&nbsp;.&nbsp;$row&#91;\'category_nicename\'&#93;&nbsp;.&nbsp;\'\\/&lt;\\/loc&gt;<br \\/>&nbsp;&nbsp;&lt;changefreq&gt;weekly&lt;\\/changefreq&gt;<br \\/>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;\\/url&gt;\';<br \\/><br \\/>&nbsp;$artQuery&nbsp;=&nbsp;\\\"SELECT&nbsp;p.post_name,&nbsp;DATE_FORMAT(p.post_date,&nbsp;\'%Y-%m-%d\')&nbsp;AS&nbsp;createdOn<br \\/>&nbsp;&nbsp;&nbsp;FROM&nbsp;wp_posts&nbsp;AS&nbsp;p,&nbsp;wp_categories&nbsp;AS&nbsp;cat,&nbsp;wp_post2cat&nbsp;AS&nbsp;pc<br \\/>&nbsp;&nbsp;&nbsp;WHERE&nbsp;p.ID&nbsp;=&nbsp;pc.post_id&nbsp;AND&nbsp;pc.category_id&nbsp;=&nbsp;\\\"&nbsp;.&nbsp;$row&#91;\'cat_ID\'&#93;&nbsp;.&nbsp;\\\"<br \\/>&nbsp;&nbsp;&nbsp;GROUP&nbsp;BY&nbsp;p.ID<br \\/>&nbsp;&nbsp;&nbsp;ORDER&nbsp;BY&nbsp;p.ID&nbsp;DESC\\\";<br \\/><br \\/>&nbsp;$artResult&nbsp;=&nbsp;@mysql_query($artQuery);<br \\/><br \\/>&nbsp;while($artRow&nbsp;=&nbsp;mysql_fetch_array($artResult,&nbsp;MYSQL_ASSOC))&nbsp;&#123;<br \\/><br \\/>&nbsp;&nbsp;echo&nbsp;\'&lt;url&gt;<br \\/>&nbsp;&nbsp;&nbsp;&lt;loc&gt;http:\\/\\/trevordavis.net\\/blog\\/\'&nbsp;.&nbsp;$row&#91;\'category_nicename\'&#93;&nbsp;.&nbsp;\'\\/\'.&nbsp;$artRow&#91;\'post_name\'&#93;&nbsp;.&nbsp;\'.php&lt;\\/loc&gt;<br \\/>&nbsp;&nbsp;&nbsp;&lt;lastmod&gt;\'.$artRow&#91;\'createdOn\'&#93;.\'&lt;\\/lastmod&gt;<br \\/>&nbsp;&nbsp;&nbsp;&lt;changefreq&gt;weekly&lt;\\/changefreq&gt;<br \\/>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;\\/url&gt;\';<br \\/>&nbsp;&#125;<br \\/>&#125;<br \\/>echo\'&lt;\\/urlset&gt;\';<br \\/>?&gt;&nbsp;\\n\\n<\\/code><\\/div>\\n\\n<h3>Modifying the .htaccess file<\\/h3>\\n\\n<p>We also want to rewrite the url for this file so that it is available at <a href=\\\"http:\\/\\/trevordavis.net\\/sitemap.xml\\\">http:\\/\\/trevordavis.net\\/sitemap.xml<\\/a>. Open up your .htaccess file, or create one if you don&rsquo;t have one. Then add the following:<\\/p>\\n\\n<div class=\\\"codeblock\\\"><code>\\nRewriteEngine&nbsp;on<br \\/>RewriteRule&nbsp;sitemap.xml&nbsp;googleSitemap.php&nbsp;\\n\\n<\\/code><\\/div>\\n\\n<p>Upload this file along with the googleSitemap.php script to your site root, and you are set. You can also add the rest of your site&rsquo;s file structure to the sitemap as well. You can see how I did this in <a href=\\\"http:\\/\\/trevordavis.net\\/sitemap.xml\\\">my google sitemap<\\/a>.<\\/p>\\n\\n<h3>Sitemaps Protocal<\\/h3>\\n\\n<p>You can <a href=\\\"http:\\/\\/sitemaps.org\\/protocol.php\\\">read more about the sitemaps protocal<\\/a> to see what other attributes you can apply to each url entry.<\\/p>\\n\\n<h3>By the Way&hellip;<\\/h3>\\n<p>Let me know if you can think of any way to improve this.<\\/p>\",\"4\":{\"website\":{}}}}','2014-01-19 13:01:11','2014-08-08 19:32:29','c9654125-bef7-4bc7-879a-eee1d223cefd',1),(258,276,4,1,1,NULL,'{\"authorId\":1,\"title\":{\"title\":{}},\"slug\":\"centering-absolutely-positioned-items\",\"postDate\":1183858764,\"expiryDate\":null,\"enabled\":1,\"fields\":{\"2\":\"<p>At work the other day, I was working on the homepage of a small save the date site. We had so many beautiful images to use, so our designer decided to limit the text that is on the homepage. So the container is absolutely positioned with a height of 100% in order to fill the viewport.<\\/p>\\n\\n<p>The client wrote back right before we were ready to launch and said that they noticed a large white margin on the right hand side. We had to explain to them that since the design was left aligned and the picture can&rsquo;t go on forever, there has to be an end to the design. We decided to center the design in order to make it look better.<\\/p>\\n\\n<p>So I went in and added <code>margin: 0 auto<\\/code> like I normally would to center anything, but then I realized since it is absolutely positioned, it would&rsquo;t work like that.<\\/p>\\n\\n<!--more-->\\n\\n<h2>How to Center the Absolute Positioned Item<\\/h2>\\n\\n<p>After doing some thinking, I thought about positioning the item from the left edge a certain percent. So I thought if I moved it over 50% and then shifted it back to the right, then it should work.<\\/p>\\n\\n<h3>Example<\\/h3>\\n\\n<p>Here is the CSS that I started with:<\\/p>\\n\\n<div class=\\\"codeblock\\\"><code>\\ndiv#centered&nbsp;&#123;<br \\/>&nbsp;height:&nbsp;300px;<br \\/>&nbsp;left:&nbsp;50%;<br \\/>&nbsp;position:&nbsp;absolute;<br \\/>&nbsp;top:&nbsp;20px;<br \\/>&nbsp;width:&nbsp;500px;<br \\/>&#125;&nbsp;\\n\\n<\\/code><\\/div>\\n\\n<p>Ok, so now we&rsquo;ve got it shifted over 50% from the left hand side, and in order to get it back to the center, you need to take half of the width of the item, in this case <strong>250px<\\/strong>.<\\/p>\\n\\n<p>So if we set a negative left margin of <strong>-250px<\\/strong>, we end up with the following CSS:<\\/p>\\n\\n<div class=\\\"codeblock\\\"><code>\\ndiv#centered&nbsp;&#123;<br \\/>&nbsp;height:&nbsp;300px;<br \\/>&nbsp;left:&nbsp;50%;<br \\/>&nbsp;margin-left:&nbsp;-250px;<br \\/>&nbsp;position:&nbsp;absolute;<br \\/>&nbsp;top:&nbsp;20px;<br \\/>&nbsp;width:&nbsp;500px;<br \\/>&#125;&nbsp;\\n\\n<\\/code><\\/div>\\n\\n\\n<p>You can see that <a href=\\\"http:\\/\\/trevordavis.net\\/play\\/absolutePositionCenter\\/\\\">the absolutely positioned item is now centered<\\/a>.<\\/p>\\n\\n<h2>In Case You Didn&rsquo;t Notice&hellip;<\\/h2>\\n\\n<p>I alphabetize my CSS properties. It makes everything so much easier to maintain. Once you actually start to think about it, it pretty much comes naturally too. Give it a shot.<\\/p>\",\"4\":{\"website\":{}}}}','2014-01-19 13:01:11','2014-08-08 19:32:29','c6a64a34-3e9c-4b33-9197-01da309e7dc3',1),(259,277,4,1,1,NULL,'{\"authorId\":1,\"title\":{\"title\":{}},\"slug\":\"switched-to-wordpress\",\"postDate\":1183171420,\"expiryDate\":null,\"enabled\":1,\"fields\":{\"2\":\"<p>I have been using Movable Type for a little while now, but I just wasn&rsquo;t that happy with it. I didn&rsquo;t really have any problems, but it just wasn&rsquo;t for me. So I installed Wordpress in a separate folder to try it out.<\\/p>\\n\\n<p>I loved it. I decide to make the switch. Even though some things are broken right now, I should be able to fix them this weekend.<\\/p>\\n\\n<p>I think the main thing that got me to switch was the fact that Wordpress is written in PHP, which I can code; and Movable Type is written in Perl, which I have no clue how to code in. Just having the ability to go in and change code was reason enough for me to switch.<\\/p>\\n\\n<p>So don&rsquo;t worry about the broken stuff, it will be fixed soon enough.<\\/p>\",\"4\":{\"website\":{}}}}','2014-01-19 13:01:12','2014-08-08 19:32:29','0bfd00d2-6f57-4da6-8a09-6fa2aeaab048',1),(260,278,4,1,1,NULL,'{\"authorId\":1,\"title\":{\"title\":{}},\"slug\":\"dynamic-bread-crumbs\",\"postDate\":1182648492,\"expiryDate\":null,\"enabled\":1,\"fields\":{\"2\":\"<p>For a redesign project at work, the new design called for bread crumbs. In my opinion, bread crumbs are a great thing to add to a site, and <a href=\\\"http:\\/\\/www.useit.com\\/alertbox\\/breadcrumbs.html\\\">others agree<\\/a>. I didn&rsquo;t want to have to specify anything on each page for the bread crumbs to work, so I wanted to do it all dynamically.<\\/p>\\n\\n<p>For the project at work, I did it in ColdFusion; but on my own, I did it in PHP. I figured the way that I would have to do it would be to parse the URL to see which folders I was in.<\\/p>\\n<!--more-->\\n<h2 class=\\\"replaceHeadline\\\">The Code<\\/h2>\\n\\n<p>File: breadcrumbs.php<\\/p>\\n\\n<div class=\\\"codeblock\\\"><code>\\n&lt;?php&nbsp;require(\'buildbreadcrumbs.php\');&nbsp;?&gt;<br \\/><br \\/>&lt;ol&nbsp;id=\\\"breadCrumbs\\\"&gt;<br \\/>&nbsp;&lt;li&nbsp;class=\\\"first\\\"&gt;&lt;a&nbsp;href=\\\"\\/\\\"&gt;Home&lt;\\/a&gt;&lt;\\/li&gt;<br \\/>&lt;?php<br \\/>&nbsp;$breadCrumbs&nbsp;=&nbsp;$_SERVER&#91;\'REQUEST_URI\'&#93;;<br \\/>&nbsp;if($breadCrumbs&nbsp;!=&nbsp;\'\')&nbsp;&#123;<br \\/>&nbsp;&nbsp;$crumbUrl&nbsp;=&nbsp;\'\\/\';<br \\/>&nbsp;&nbsp;$toks&nbsp;=&nbsp;split(\'\\/\',&nbsp;$breadCrumbs);<br \\/>&nbsp;&nbsp;for($i&nbsp;=&nbsp;1;&nbsp;$i&nbsp;&lt;&nbsp;count($toks)&nbsp;-&nbsp;1;&nbsp;$i++)&nbsp;&#123;<br \\/>&nbsp;&nbsp;&nbsp;$crumbUrl&nbsp;.=&nbsp;$toks&#91;$i&#93;&nbsp;.&nbsp;\'\\/\';<br \\/>&nbsp;&nbsp;&nbsp;if($breadCrumbMapping&#91;$toks&#91;$i&#93;&#93;&nbsp;!=&nbsp;NULL)&nbsp;&#123;<br \\/>&nbsp;&nbsp;&nbsp;&nbsp;echo&nbsp;\'&lt;li&gt;&lt;a&nbsp;href=\\\"\'.$crumbUrl.\'\\\"&gt;\'.$breadCrumbMapping&#91;$toks&#91;$i&#93;&#93;.\'&lt;\\/a&gt;&lt;\\/li&gt;\';<br \\/>&nbsp;&nbsp;&nbsp;&#125;&nbsp;else&nbsp;&#123;<br \\/>&nbsp;&nbsp;&nbsp;&nbsp;echo&nbsp;\'&lt;li&gt;&lt;a&nbsp;href=\\\"\'.$crumbUrl.\'\\\"&gt;\'.$toks&#91;$i&#93;.\'&lt;\\/a&gt;&lt;\\/li&gt;\';<br \\/>&nbsp;&nbsp;&nbsp;&#125;<br \\/>&nbsp;&nbsp;&#125;<br \\/>&nbsp;&nbsp;echo&nbsp;\'&lt;li&nbsp;class=\\\"last\\\"&gt;\'.$pageTitle.\'&lt;\\/li&gt;\';<br \\/>&nbsp;&#125;<br \\/>?&gt;<br \\/>&lt;\\/ol&gt;&nbsp;\\n\\n<\\/code><\\/div>\\n\\n<h3 class=\\\"replaceHeadline\\\">The Explanation<\\/h3>\\n\\n<p>The first thing that I do, is include the file buildbreadcrumbs.php (I&rsquo;ll get to that later). Then the idea is that we will determine what folders we are in, based on the URL. We split the URL based on the slashes and step through them to make links.<\\/p>\\n\\n<p>Now, back to the File: buildbreadcrumbs.php<\\/p>\\n\\n<div class=\\\"codeblock\\\"><code>\\n&lt;?php<br \\/>$breadCrumbMapping&nbsp;=&nbsp;Array();<br \\/><br \\/>\\/*Folders&nbsp;to&nbsp;be&nbsp;mapped*\\/<br \\/>$breadCrumbMapping&#91;\'f1\'&#93;&nbsp;=&nbsp;\\\"Folder&nbsp;1\\\";<br \\/>$breadCrumbMapping&#91;\'f2\'&#93;&nbsp;=&nbsp;\\\"Folder&nbsp;2\\\";<br \\/>$breadCrumbMapping&#91;\'f3\'&#93;&nbsp;=&nbsp;\\\"Folder&nbsp;3\\\";<br \\/>?&gt;&nbsp;\\n\\n<\\/code><\\/div>\\n\\n<p>This file is building as associative array to display different text than the folder name. There are some situations where the folders are not too pretty, so basically you just add the folder name (f1, f2, f3) to the associative array and assign it a &ldquo;pretty&rdquo; name (Folder 1, Folder 2, Folder 3). If you don&rsquo;t assign a pretty name to a folder, it will just display the folder name instead.<\\/p>\\n\\n<p>I made <a href=\\\"http:\\/\\/trevordavis.net\\/play\\/breadCrumbs\\/f1\\/f2\\/f3\\/\\\">an example page<\\/a> to see the bread crumbs in action.<\\/p>\\n\\n<p>You can download the scripts here:<\\/p>\\n\\n<ul>\\n<li><a href=\\\"http:\\/\\/trevordavis.net\\/images\\/content\\/2008\\/01\\/breadcrumbs.phps\\\">breadcrumbs.php<\\/a><\\/li>\\n<li><a href=\\\"http:\\/\\/trevordavis.net\\/images\\/content\\/2008\\/01\\/buildbreadcrumbs.phps\\\">buildbreadcrumbs.php<\\/a><\\/li>\\n<\\/ul>\",\"4\":{\"website\":{}}}}','2014-01-19 13:01:12','2014-08-08 19:32:29','5fd19338-41c5-4306-8aa6-bc82b4434aa0',1),(261,279,4,1,1,NULL,'{\"authorId\":1,\"title\":{\"title\":{}},\"slug\":\"html-emails.-who-needs-them\",\"postDate\":1182209723,\"expiryDate\":null,\"enabled\":1,\"fields\":{\"2\":\"<p>There has been a lot of talk going on recently about HTML emails, and I thought I would weigh in and give my two cents. Outlook, the most popular email platform, <a href=\\\"http:\\/\\/www.campaignmonitor.com\\/blog\\/archives\\/2007\\/01\\/microsoft_takes_email_design_b.html\\\">announced that they were switching their rendering engine<\\/a>. The decided to switch to using the Word engine! Excuse me, but I think Word is word processing software and in no way should it be used to render HTML. I think we have all seen the output when you convert a Microsoft document to a web page. It&rsquo;s scary.<\\/p>\\n\\n<p>So in the wake of Microsoft taking a step backwards, the real question is: does it even matter?<\\/p>\\n<!--more-->\\n<p>In my opinion, it shouldn&rsquo;t.<\\/p>\\n\\n<h2>What do the experts say?<\\/h2>\\n\\n<p>As Zeldman states:<\\/p>\\n\\n<blockquote>\\n<p>E-mail was invented so people could quickly exchange text messages over fast or slow or really slow connections, using simple, non-processor-intensive applications on any computing platform, or using phones, or hand-held devices, or almost anything else that can display text and permits typing.<\\/p>\\n\\n<p><a href=\\\"http:\\/\\/www.zeldman.com\\/2007\\/06\\/08\\/e-mail-is-not-a-platform-for-design\\/\\\"><cite>Jeffrey Zeldman - E-mail is not a platform for design<\\/cite><\\/a><\\/p>\\n<\\/blockquote>\\n\\n<p>Emails seem similar to RSS feeds. We are getting the content without all the other crap. We need to ask ourselves, do we want to see RSS feeds completely designed? Nope, because then we might as well visit the site.<\\/p>\\n\\n<p>Remember how we thought getting cross-browser consistency was hard, how about cross-client HTML emails. It&rsquo;s a nightmare. Some support CSS. Some strip it all out. Some support inline CSS. It&rsquo;s awful. My favorite quote from the article, when he is discussing CSS support:<\\/p>\\n\\n<blockquote>\\n<p>&hellip; but only if you author in nonsemantic table layouts and bandwidth-wasting inline CSS. Which is like using a broken refrigerator to store food at room temperature.<\\/p>\\n\\n<p><a href=\\\"http:\\/\\/www.zeldman.com\\/2007\\/06\\/08\\/e-mail-is-not-a-platform-for-design\\/\\\"><cite>Jeffrey Zeldman - E-mail is not a platform for design<\\/cite><\\/a><\\/p>\\n<\\/blockquote>\\n\\n<p>In Zeldman&rsquo;s follow-up article <a href=\\\"http:\\/\\/www.zeldman.com\\/2007\\/06\\/12\\/eight-points-for-better-e-mail-relationships\\/\\\">Eight points for better e-mail relationships<\\/a>, he steps back a little from his previous stance, and he notes a few points about HTML email.<\\/p>\\n\\n<p>I think that after he cleared his head a little, this article is very on-point. HTML email should be something that people specifically sign up for. It should not be the selected option; they should have to choose it.<\\/p>\\n\\n<p>Simple is better. Zeldman <a href=\\\"http:\\/\\/www.zeldman.com\\/2007\\/06\\/14\\/when-is-e-mail-like-a-bad-website\\/\\\">posted an email that his friend received from Nokia<\\/a> a few days later. This is pure comedy.<\\/p>\\n\\n<p>Roger Johansson also had <a href=\\\"http:\\/\\/www.456bereastreet.com\\/archive\\/200706\\/keep_html_and_css_out_of_my_inbox_please\\/\\\">an opinion on the subject<\\/a>, and it&rsquo;s very similar to mine.<\\/p>\\n\\n<h3>So what do we do?<\\/h3>\\n<p>I think we need to discuss the problems with full HTML emails with the marketing people who are pushing them. Is this really what&rsquo;s ideal? Is this going to receive the most positive feedback? I think not. I would be perfectly content receiving a simple mostly text email with limited branding (a logo). Not to mention how much easier this would be to create.<\\/p>\\n\\n<p>Now that, I don&rsquo;t have a problem with.<\\/p>\",\"4\":{\"website\":{}}}}','2014-01-19 13:01:12','2014-08-08 19:32:29','a7e0fa4d-d648-47e8-a24d-73d4430478b0',1),(262,280,4,1,1,NULL,'{\"authorId\":1,\"title\":{\"title\":{}},\"slug\":\"book-review-designing-interactions\",\"postDate\":1181518709,\"expiryDate\":null,\"enabled\":1,\"fields\":{\"2\":\"<p>Designing Interactions is quite a book. If you are interested in technology, it&rsquo;s definitely a must read. While it&rsquo;s over 700 pages, there are tons of pictures so you can fly right through it.<\\/p>\\n\\n<p>The book tracks back to the creation of the first mouse and the iterations of prototypes it went through. While creating physical technology is vastly different from creating websites, I feel as though you can learn a lot from the book.<\\/p>\\n<!--more-->\\n<h2>Summary<\\/h2>\\n<p>The book has interviews with &ldquo;42 designers who shaped our interactions with technology&rdquo;. Think about the first computer. Think about the first laptop. Think about the first Palm Pilot and the OS running on it.<\\/p>\\n\\n<p>Hearing the history behind the technology that we use everyday is fascinating. You really get a lot of detail into how these people worked and their thought process.<\\/p>\\n\\n<p>I think the thing I found most interesting was learning that there is a similar process to prototype creation and usability testing between physical design and web development.<\\/p>\\n\\n<p>I don&rsquo;t think there is really any one type of person who should read this, everyone would find something interesting in it. So <a href=\\\"http:\\/\\/www.amazon.com\\/Designing-Interactions-Bill-Moggridge\\/dp\\/0262134748\\/ref=pd_bbs_sr_1\\/105-2130815-1796438?ie=UTF8&amp;s=books&amp;qid=1181530736&amp;sr=1-1\\\">get it already<\\/a>.<\\/p>\",\"4\":{\"website\":{}}}}','2014-01-19 13:01:12','2014-08-08 19:32:29','58dff20e-30a0-4e54-967a-1a0dfdb750da',1),(263,281,4,1,1,NULL,'{\"authorId\":1,\"title\":{\"title\":{}},\"slug\":\"my-web-wish-list\",\"postDate\":1180320273,\"expiryDate\":null,\"enabled\":1,\"fields\":{\"2\":\"<p>My birthday is coming up on Thursday, so I thought I would make up a list of 5 things I wish to happen with the web in the next year. I know that most of these will not happen in that time frame, but I can at least wish right?<\\/p>\\n<!--more-->\\n<h2>The List<\\/h2>\\n\\n<p>In no particular order, this is what I want:<\\/p>\\n\\n<ol>\\n <li>For everyone running IE6 to be upgraded by automatic updates<\\/li>\\n<li>For the term &ldquo;Web 2.0&rdquo; to never be heard again<\\/li>\\n<li>For all standards compliant browsers to support attaching multiple background images using CSS<\\/li>\\n<li>For the ability to render <strong>all<\\/strong> fonts on the web<\\/li>\\n<li>For all standards compliant browsers to support the nth-child selector<\\/li>\\n<\\/ol>\\n\\n<h3>For everyone running IE6 to be upgraded by automatic updates<\\/h3>\\n\\n<p>As all web developers have experienced, <strong>IE6 sucks<\\/strong>. But there is good news; IE7 is a huge step forward. Sure it still has some of the same problems that IE6 had, but it is basically on par with other standards compliant browsers.<\\/p>\\n\\n<p>Thankfully, Microsoft is pushing out IE7 in their automatic updates, and the number of people upgrading is rising quickly. Before we know it, IE6 will no longer be the most popular browser any more.<\\/p>\\n\\n<h3> For the term &ldquo;Web 2.0&rdquo; to never be heard again<\\/h3>\\n\\n<p>I&rsquo;m sick of it. The term is used everywhere, even job descriptions. There was a good article on Fadtastic, <a href=\\\"http:\\/\\/fadtastic.net\\/2007\\/05\\/17\\/weekly-thought-why-good-designers-should-stop-saying-web-20\\/\\\"> Weekly Thought: Why Good Designers Should Stop Saying &ldquo;Web 2.0&rdquo;<\\/a>.<\\/p>\\n\\n<p>&ldquo;Web 2.0&rdquo; is meaningless, and it needs to be vanished from everyone&rsquo;s vocabulary.<\\/p>\\n\\n<h3>For all standards compliant browsers to support attaching multiple background images using CSS<\\/h3>\\n\\n<p>Safari already does, why don&rsquo;t other standards compliant browsers? Just take a moment and think about how wonderfully simple the markup would be for rounded corners. Ahh maybe some day.<\\/p>\\n\\n<h3> For the ability to render all fonts on the web<\\/h3>\\n\\n<p>Why can&rsquo;t we upload fonts to our servers and have the browsers download them when needed? It can&rsquo;t be the technology. It seems like a simple task. Can you image the possibilities if designers were not restricted to web-safe fonts? While, <a href=\\\"http:\\/\\/www.mikeindustries.com\\/sifr\\/\\\">sIFR<\\/a> is awesome, there are so many limits to it. This needs to happen, <strong>now<\\/strong>.<\\/p>\\n\\n<h3>For all standards compliant browsers to support the nth-child selector<\\/h3>\\n\\n<p>No more JavaScript striping. No more using odd and even classes.<\\/p>\\n\\n<p>When browsers support <a href=\\\"http:\\/\\/www.w3.org\\/TR\\/css3-selectors\\/#structural-pseudos\\\">Structural Pseudo-Classes<\\/a>, or more specifically, the n-th child selector, it&rsquo;s going to be great. We can handle all of the alternating styles that we want using only CSS.<\\/p>\\n\\n<h4>What else?<\\/h4>\\n\\n<p>So what are you getting me? What else would you ask for?<\\/p>\",\"4\":{\"website\":{}}}}','2014-01-19 13:01:12','2014-08-08 19:32:29','83833d72-5e58-4102-af91-c5513ec9d894',1),(264,282,4,1,1,NULL,'{\"authorId\":1,\"title\":{\"title\":{}},\"slug\":\"sure-lets-destroy-accessibility\",\"postDate\":1179235974,\"expiryDate\":null,\"enabled\":1,\"fields\":{\"2\":\"<p>So, while I was doing my normal reading of RSS feeds, when I saw a link to <a href=\\\"http:\\/\\/www.solidstategroup.com\\/page\\/1592\\\" rel=\\\"nofollow\\\">white paper from Solid State Group<\\/a>. The person who linked to it, said how great number 4 is.<\\/p>\\n\\n<p>Are we not going to think about accessibility anymore? What about people who cannot use their mouse to point and click? They use the keyboard. Meaning that they TAB between the links to figure out what they want to use. By Firefox adding that outline, it helps to show which link they are currently focused on.<\\/p>\\n<!--more-->\\n<p>Sure, I think there are some instances where it&rsquo;s OK to remove the outline, but not for EVERY link.<\\/p>\\n\\n<p>This white paper really did not show much, and in my opinion I have already discussed much better methods for Transparent PNG&rsquo;s in IE6 and Min-width using <a href=\\\"http:\\/\\/trevordavis.net\\/blog\\/tutorial\\/using-dean-edwards-ie7-script.php\\\">Dean Edwards&rsquo; IE7 Script<\\/a> and a more accessible <a href=\\\"http:\\/\\/trevordavis.net\\/blog\\/tutorial\\/improved-navigation-image-replacement.php\\\">Image replacement technique<\\/a>.<\\/p>\\n\\n<p>I love all these tutorials on the web, but we need to warn people about the risks when doing such things.<\\/p>\\n\\n<p>&lt;\\/rant&gt;<\\/p>\",\"4\":{\"website\":{}}}}','2014-01-19 13:01:12','2014-08-08 19:32:29','e82087e7-b07b-40d9-8113-f83c2a1a1c92',1),(265,283,4,1,1,NULL,'{\"authorId\":1,\"title\":{\"title\":{}},\"slug\":\"how-do-you-start-web-development\",\"postDate\":1179185768,\"expiryDate\":null,\"enabled\":1,\"fields\":{\"2\":\"<p>While reading forums, blogs, and other web development related resources, I keep coming across people asking how to get started in CSS. They may have be table-converts or they may be new to the field, but the question keeps coming up.<\\/p>\\n\\n<p>In my opinion, a lot of people are going about it the wrong way. Sure they may be able to get a nice design that works across browsers and platforms and their code may validate. But look under the hood of a lot of those sites. The code can sometimes be just as bad as using a table.<\\/p>\\n<!--more-->\\n<h2>Where to Start<\\/h2>\\n\\n<p>I think that the key to succeeding in the field, is to begin by learning semantic HTML. Sure, you may have been using HTML for years while doing table layouts, but you are also the same people who were using nested blockquotes to increase your margins.<\\/p>\\n\\n<h3>What is Semantic HTML?<\\/h3>\\n\\n<p>Well let&rsquo;s first define semantics:<\\/p>\\n\\n<blockquote><p>Of or relating to meaning, especially meaning in language.<\\/p><\\/blockquote>\\n\\n<p>Now if we apply that to HTML, it is the idea that every element has a meaning. Yes, there is a reason that when you want emphasize something you wrap it in an em tag. Instead of simply choosing elements because of how they are styled, you should be choosing elements because of their meaning.<\\/p>\\n\\n<p>Once you have the semantics down, then you get to use CSS to hook into all those wonderfully semantic elements that you have used.<\\/p>\\n\\n<h3>Just My Thoughts<\\/h3>\\n\\n<p>That is not necessarily how I learned, but I think that will be the most beneficial way to learn in the long run.<\\/p>\\n\\n<h4>Some Resources<\\/h4>\\n<p>These are some sites that I read regularly, mainly focusing on the basic stuff.<\\/p>\\n\\n<ul>\\n <li><a href=\\\"http:\\/\\/456bereastreet.com\\/\\\">456 Berea Street<\\/a><\\/li>\\n <li><a href=\\\"http:\\/\\/alistapart.com\\/\\\">A List Apart<\\/a><\\/li>\\n <li><a href=\\\"http:\\/\\/cssbeauty.com\\/\\\">CSS Beauty<\\/a><\\/li>\\n <li><a href=\\\"http:\\/\\/cssglobe.com\\/\\\">CSS Globe<\\/a><\\/li>\\n <li><a href=\\\"http:\\/\\/digital-web.com\\/\\\">Digital Web Magazine<\\/a><\\/li>\\n <li><a href=\\\"http:\\/\\/fadtastic.net\\/\\\">Fadtastic<\\/a><\\/li>\\n <li><a href=\\\"http:\\/\\/thinkvitamin.com\\/\\\">Vitamin<\\/a><\\/li>\\n<\\/ul>\",\"4\":{\"website\":{}}}}','2014-01-19 13:01:12','2014-08-08 19:32:29','6875be16-009e-4d9d-bd08-acc4e40c2389',1),(266,284,4,1,1,NULL,'{\"authorId\":1,\"title\":{\"title\":{}},\"slug\":\"using-dean-edwards-ie7-script\",\"postDate\":1178582164,\"expiryDate\":null,\"enabled\":1,\"fields\":{\"2\":\"<div class=\\\"update\\\">\\n<h2 class=\\\"replaceHeadline\\\">Update<\\/h2>\\n<p>Dean Edwards has updated his scripts. I have written a <a href=\\\"http:\\/\\/trevordavis.net\\/blog\\/tutorial\\/updated-dean-edwards-ie7-scripts\\/\\\">new entry describing the updated IE7 scripts<\\/a>.<\\/p>\\n<\\/div>\\n\\n<p>At An Event Apart Boston, <a href=\\\"http:\\/\\/meyerweb.com\\\">Eric Meyer<\\/a> discussed how IE7 is quickly being adopted. Since this is the case, we can treat IE6 as more of a secondary browser now.<\\/p>\\n\\n<p>We should all start to use the <a href=\\\"http:\\/\\/dean.edwards.name\\/ie7\\/\\\">Dean Edwards IE7 script<\\/a> to bring IE6 up to par with standards compliant browsers.<\\/p>\\n<!--more-->\\n<p>The history behind the Dean Edwards script is that he wrote it when Microsoft had said that they were not going to produce any more versions of Internet Explorer. He wanted to provide a JavaScript solution to add more compliance to the browser.<\\/p>\\n\\n<h2 class=\\\"replaceHeadline\\\">Using the Script<\\/h2>\\n\\n<p>First, <a href=\\\"http:\\/\\/dean.edwards.name\\/download\\/\\\">download the Dean Edwards script<\\/a>. Next, extract the files to the root of your webserver in a folder called <strong>ie7<\\/strong>. It needs to be in this folder, because some of the scripts have a dependency on the folder.<\\/p>\\n\\n<p>Finally, just include the script in the head of your document using conditional comments:<\\/p>\\n\\n<div class=\\\"codeblock\\\"><code>\\n&lt;!--&#91;if&nbsp;lt&nbsp;IE&nbsp;7&#93;&gt;<br \\/>&lt;script&nbsp;src=\\\"\\/ie7\\/ie7-standard-p.js\\\"&nbsp;type=\\\"text\\/javascript\\\"&gt;&lt;\\/script&gt;<br \\/>&lt;!&#91;endif&#93;--&gt;&nbsp;\\n\\n<\\/code><\\/div>\\n\\n<p>On <a href=\\\"http:\\/\\/dean.edwards.name\\/IE7\\/usage\\/configure.html\\\">the configuration page<\\/a>, Dean shows you which scripts do what. By including the <code>ie7-standard-p.js<\\/code>, you get the support of the following scripts:<\\/p>\\n\\n<ul>\\n <li>ie7-core.js<\\/li>\\n <li>ie7-html4.js<\\/li>\\n <li>ie7-layout.js<\\/li>\\n <li>ie7-css2-selectors.js<\\/li>\\n <li>ie7-graphics.js<\\/li>\\n <li>ie7-fixed.js<\\/li>\\n<\\/ul>\\n\\n<p>The only other script that I have included as well is the <code>ie7-css3-selectors.js<\\/code> to include support for CSS3 selectors. Think of all those wonderful <a href=\\\"http:\\/\\/trevordavis.net\\/blog\\/tutorial\\/css-attribute-selectors-explained.php\\\">attribute selectors<\\/a> you can start to use in your project. It makes me all warm and tingly inside to think about where CSS can go when the browsers are up to the task.<\\/p>\\n\\n<h3 class=\\\"replaceHeadline\\\">Enjoy!<\\/h3>\\n\\n<p>This really should be one of the first steps you take in a project. By doing this simple task, you will save yourself from a lot of IE6 headaches.<\\/p>\\n\\n<p>Sure, this only works for IE6 users who have JavaScript enabled. But honestly, is there anyone who is using IE6 who actually turns off JavaScript? If they do turn off JavaScript, it may just break some presentation layer things, but the site should still be perfectly usable.<\\/p>\",\"4\":{\"website\":{}}}}','2014-01-19 13:01:12','2014-08-08 19:32:29','e4c243f3-2814-4a41-9110-574bc382144c',1),(267,285,4,1,1,NULL,'{\"authorId\":1,\"title\":{\"title\":{}},\"slug\":\"spider-man-3\",\"postDate\":1178332439,\"expiryDate\":null,\"enabled\":1,\"fields\":{\"2\":\"<p>I was ordered by my fellow &ldquo;Front-End Developer&rdquo;, <a href=\\\"http:\\/\\/monadology.net\\\">Nate<\\/a>, to write up a little blurb about what I thought about Spider-Man 3.<\\/p>\\n\\n<p>So I caught the 10:45 showing, and the theater was packed. I am going to go ahead and predict that it is going to break the record for weekend gross.<\\/p>\\n<!--more-->\\n<p>But yeah about the movie, I would definitely say I enjoyed it.<\\/p>\\n\\n<p>While it is no movie that is going to win any award, it is the typical Spider-Man movie filled with action, love, and gratuitous humor.<\\/p>\\n\\n<p>I will say that were was about a 15 minute span where it almost feels like you are watching another movie. It was just a bizarre sequence of events for the movie, and I think they could have accomplished it in a different way.<\\/p>\\n\\n<p>If you liked the first 2, you will like this one. This movie is a roller coaster of emotions for Spiderman, and it was well worth the price of admission.<\\/p>\",\"4\":{\"website\":{}}}}','2014-01-19 13:01:12','2014-08-08 19:32:29','e2b3250c-4f00-4dfd-b0f2-945e94a8be75',1),(268,286,4,1,1,NULL,'{\"authorId\":1,\"title\":{\"title\":{}},\"slug\":\"improved-navigation-image-replacement\",\"postDate\":1177720362,\"expiryDate\":null,\"enabled\":1,\"fields\":{\"2\":\"<p>So my co-worker at work today was slicing a design, and the designer said that the navigation had to be images. Being the good little accessibility people that we were, we were trying to figure out a way to use images, but have text also show up when images are disabled.<\\/p>\\n\\n<p>So my co-worker went with the quick fix (for now), a JavaScript onmouseover solution, and I told him that it was lame. I told him there had to be a way to use CSS to do it. I didn\'t have time to do it at work, so I played with it, and I have found a solution.<\\/p>\\n<!--more-->\\n<h2 class=\\\"replaceHeadline\\\">The Markup<\\/h2>\\n\\n<p>Ok, so everyone knows to mark-up navigation in an unordered list:<\\/p>\\n\\n<div class=\\\"codeblock\\\"><code>\\n&lt;ul&nbsp;id=\\\"nav\\\"&gt;<br \\/>&nbsp;&lt;li&gt;&lt;a&nbsp;href=\\\"#\\\"&gt;Text&nbsp;to&nbsp;Cover&nbsp;Here&lt;\\/a&gt;&lt;\\/li&gt;<br \\/>&nbsp;&lt;li&gt;&lt;a&nbsp;href=\\\"#\\\"&gt;Text&nbsp;to&nbsp;Cover&nbsp;Here&lt;\\/a&gt;&lt;\\/li&gt;<br \\/>&nbsp;&lt;li&gt;&lt;a&nbsp;href=\\\"#\\\"&gt;Text&nbsp;to&nbsp;Cover&nbsp;Here&lt;\\/a&gt;&lt;\\/li&gt;<br \\/>&nbsp;&lt;li&gt;&lt;a&nbsp;href=\\\"#\\\"&gt;Text&nbsp;to&nbsp;Cover&nbsp;Here&lt;\\/a&gt;&lt;\\/li&gt;<br \\/>&lt;\\/ul&gt;&nbsp;\\n\\n<\\/code><\\/div>\\n\\n<p>Now, instead of placing an image in the anchor tag and then using JavaScript to change the hover state, I thought, why not just add an extra <code>span<\\/code> at the end of the anchor tag. I chose the end, but it also works with it at the beginning. I think it makes more sense to have it at the end though, so that the text within the anchor tag is read first by screen readers and bots. So this is what our markup looks like now:<\\/p>\\n\\n<div class=\\\"codeblock\\\"><code>\\n&lt;ul&nbsp;id=\\\"nav\\\"&gt;<br \\/>&nbsp;&lt;li&gt;&lt;a&nbsp;href=\\\"#\\\"&gt;Text&nbsp;to&nbsp;Cover&nbsp;Here&lt;span&gt;&lt;\\/span&gt;&lt;\\/a&gt;&lt;\\/li&gt;<br \\/>&nbsp;&lt;li&gt;&lt;a&nbsp;href=\\\"#\\\"&gt;Text&nbsp;to&nbsp;Cover&nbsp;Here&lt;span&gt;&lt;\\/span&gt;&lt;\\/a&gt;&lt;\\/li&gt;<br \\/>&nbsp;&lt;li&gt;&lt;a&nbsp;href=\\\"#\\\"&gt;Text&nbsp;to&nbsp;Cover&nbsp;Here&lt;span&gt;&lt;\\/span&gt;&lt;\\/a&gt;&lt;\\/li&gt;<br \\/>&nbsp;&lt;li&gt;&lt;a&nbsp;href=\\\"#\\\"&gt;Text&nbsp;to&nbsp;Cover&nbsp;Here&lt;span&gt;&lt;\\/span&gt;&lt;\\/a&gt;&lt;\\/li&gt;<br \\/>&lt;\\/ul&gt;&nbsp;\\n\\n<\\/code><\\/div>\\n\\n<h2 class=\\\"replaceHeadline\\\">Let&rsquo;s Style It<\\/h2>\\n\\n<p>So I started off with just some normal styles that you would apply to a navigation: zeroing out margins and paddings, floating it, removing the list-styling, and giving it a width.<\\/p>\\n\\n<p>Next, I floated the list items so that they would be in a line horizontally. This is where it finally gets interesting, I promise. I styled the anchor tag like so:<\\/p>\\n\\n<div class=\\\"codeblock\\\"><code>\\nul#nav&nbsp;li&nbsp;a&nbsp;&#123;<br \\/>&nbsp;background:&nbsp;#FFFF99;<br \\/>&nbsp;display:&nbsp;block;<br \\/>&nbsp;height:&nbsp;30px;<br \\/>&nbsp;padding:&nbsp;0&nbsp;5px;<br \\/>&nbsp;width:&nbsp;115px;<br \\/>&#125;&nbsp;\\n\\n<\\/code><\\/div>\\n\\n<p>Since this is just an example, I put a random background color on (to make sure it didn&rsquo;t show through in the final example), and I gave them all the same width. Not a likely situation, but I didn&rsquo;t feel like giving each list item an id. That should be self explanatory enough.<\\/p>\\n\\n<p>Now, when I think back to the talk that <a href=\\\"http:\\/\\/meyerweb.com\\\">Eric Meyer<\\/a> at <a href=\\\"http:\\/\\/aneventapart.com\\/events\\/boston07\\/\\\">An Event Apart Boston<\\/a>, he kept stressing that to a browser, an element is just an element, and you can do anything to it. So, my plan was to just set the anchor tag to be relatively positioned so that it would contain the <code>span<\\/code>.<\\/p>\\n\\n<p>The next step is to add the background image to the <code>span<\\/code>. Now one thing that needs to be realized is that you cannot use a transparent image. But I don&rsquo;t think that really causes much of a problem in most cases.<\\/p>\\n\\n<div class=\\\"codeblock\\\"><code>\\nul#nav&nbsp;li&nbsp;a&nbsp;span&nbsp;&#123;<br \\/>&nbsp;background:&nbsp;url(\\/images\\/content\\/2008\\/01\\/nav.gif)&nbsp;no-repeat&nbsp;0&nbsp;-30px;<br \\/>&nbsp;cursor:&nbsp;pointer;<br \\/>&nbsp;display:&nbsp;block;<br \\/>&nbsp;height:&nbsp;30px;<br \\/>&nbsp;left:&nbsp;0;<br \\/>&nbsp;position:&nbsp;absolute;<br \\/>&nbsp;top:&nbsp;0;<br \\/>&nbsp;width:&nbsp;125px;<br \\/>&#125;&nbsp;\\n\\n<\\/code><\\/div>\\n\\n<p>The only things to note from that is that I combined the normal and hover states into one awesome image (I wasn&rsquo;t worried about how pretty it looked). I also had to add the cursor property for our best friend, IE6.<\\/p>\\n\\n<p>Ok, cool. We are on our way. Now we just need to shift the background image on the hover state:<\\/p>\\n\\n<div class=\\\"codeblock\\\"><code>\\nul#nav&nbsp;li&nbsp;a:hover&nbsp;span&nbsp;&#123;&nbsp;background:&nbsp;url(\\/images\\/content\\/2008\\/01\\/nav.gif)&nbsp;no-repeat&nbsp;0&nbsp;0;&nbsp;&#125;&nbsp;\\n\\n<\\/code><\\/div>\\n\\n<p><strong>Voil&agrave;!<\\/strong> It works like a charm. <a href=\\\"http:\\/\\/trevordavis.net\\/play\\/imagereplacement\\/\\\">Check out the example<\\/a>.<\\/p>\\n\\n<h3 class=\\\"replaceHeadline\\\">But&hellip;<\\/h3>\\n\\n<p>Did you check it in IE6? When I checked it in Firefox and IE7, everything worked beautifully. You can turn off the images and you get the text underneath.<\\/p>\\n\\n<p>When you do check it in IE6, you will notice that the hover states stay on. It&rsquo;s very odd.<\\/p>\\n\\n<p>After a lot of tinkering, I finally found something that worked. If you add the following to the anchor when it is in its hovered state, it for some reason fixes it:<\\/p>\\n\\n<div class=\\\"codeblock\\\"><code>\\nul#nav&nbsp;li&nbsp;a:hover&nbsp;&#123;&nbsp;background:&nbsp;0&nbsp;0;&nbsp;&#125;&nbsp;\\n\\n<\\/code><\\/div>\\n\\n<p>I have no explanation, but it does not seem to have any adverse affects on other browsers.<\\/p>\\n\\n<h3 class=\\\"replaceHeadline\\\">Let&rsquo;s Bulletproof It<\\/h3>\\n<p>We can add a simple property to the anchor tag so that when someone resizes their text, it does not poke out from under the image:<\\/p>\\n\\n<div class=\\\"codeblock\\\"><code>\\nul#nav&nbsp;li&nbsp;a&nbsp;&#123;<br \\/>&nbsp;background:&nbsp;#FFFF99;<br \\/>&nbsp;display:&nbsp;block;<br \\/>&nbsp;height:&nbsp;30px;<br \\/>&nbsp;overflow:&nbsp;hidden;&nbsp;\\/*Added&nbsp;for&nbsp;bulletproofing*\\/<br \\/>&nbsp;padding:&nbsp;0&nbsp;5px;<br \\/>&nbsp;position:&nbsp;relative;<br \\/>&nbsp;width:&nbsp;115px;<br \\/>&#125;&nbsp;\\n\\n<\\/code><\\/div>\\n\\n<p><a href=\\\"http:\\/\\/trevordavis.net\\/play\\/imagereplacement\\/final\\/\\\">Check out the final example.<\\/a><\\/p>\\n\\n<h3 class=\\\"replaceHeadline\\\">More Bulletproofing<\\/h3>\\n\\n<p>If you wanted the text to resize gracefully when images are disabled, I suppose you could set your height in ems. Then you would just need to build some extra blank space into your image, so that it would work when images are enabled.<\\/p>\\n\\n<p>So hopefully that helps out my co-worker. I think it potentially solves a pretty big problem with CSS image navigation with images disabled.<\\/p>\",\"4\":{\"website\":{}}}}','2014-01-19 13:01:12','2014-08-08 19:32:29','ee617b52-0430-47b4-a769-867faab4df14',1),(269,287,4,1,1,NULL,'{\"authorId\":1,\"title\":{\"title\":{}},\"slug\":\"improved-javascript-striping\",\"postDate\":1177456442,\"expiryDate\":null,\"enabled\":1,\"fields\":{\"2\":\"<p>I am sure everyone has seen the <a href=\\\"http:\\/\\/24ways.org\\/2005\\/splintered-striper\\\">JavaScript Splintered Striper<\\/a>, which was shown during the 2005 <a href=\\\"http:\\/\\/24ways.org\\\">24 Ways to Impress Your Friends<\\/a>, or at least some variation of it. A <a href=\\\"http:\\/\\/www.google.com\\/search?source=ig&amp;hl=en&amp;q=javascript+%2B+striper&amp;btnG=Google+Search\\\">quick Google for javascript striper<\\/a> came up with a ton of results.<\\/p>\\n\\n<p>Well, I ran into a little problem with the splintered striper, and I have a solution to the problem.<\\/p>\\n<!--more-->\\n<p>The problem occurred if you had multiple class names on the element you are trying to stripe. That may not make much sense, so I guess an example will suffice.<\\/p>\\n\\n<h2>Striping Example with Problem<\\/h2>\\n\\n<p>Say we start with the following markup:<\\/p>\\n\\n<div class=\\\"codeblock\\\"><code>\\n&lt;ul&nbsp;class=\\\"stripe&nbsp;something\\\"&gt;<br \\/>&nbsp;&lt;li&gt;This&nbsp;is&nbsp;an&nbsp;odd&nbsp;row.&lt;\\/li&gt;<br \\/>&nbsp;&lt;li&gt;This&nbsp;is&nbsp;an&nbsp;even&nbsp;row.&lt;\\/li&gt;<br \\/>&nbsp;&lt;li&gt;This&nbsp;is&nbsp;an&nbsp;odd&nbsp;row.&lt;\\/li&gt;<br \\/>&nbsp;&lt;li&gt;This&nbsp;is&nbsp;an&nbsp;even&nbsp;row.&lt;\\/li&gt;<br \\/>&nbsp;&lt;li&gt;This&nbsp;is&nbsp;an&nbsp;odd&nbsp;row.&lt;\\/li&gt;<br \\/>&nbsp;&lt;li&gt;This&nbsp;is&nbsp;an&nbsp;even&nbsp;row.&lt;\\/li&gt;<br \\/>&lt;\\/ul&gt;&nbsp;\\n\\n<\\/code><\\/div>\\n\\n<p>We are going to pretend that the class name <code>something<\\/code> actually does something useful. Then using a JavaScript <a href=\\\"http:\\/\\/simonwillison.net\\/2004\\/May\\/26\\/addLoadEvent\\/\\\">addLoadEvent function<\\/a>, we will add the striping event to run on page load:<\\/p>\\n\\n<div class=\\\"codeblock\\\"><code>\\naddLoadEvent(function()&nbsp;&#123;<br \\/>&nbsp;&nbsp;striper(\'ul\',\'stripe\',\'li\',\'odd,even\');<br \\/>&#125;);&nbsp;\\n\\n<\\/code><\\/div>\\n\\n<p>Essentially, we have told the striper function to stripe all list elements (<code>li<\\/code>s) that are descendants of unordered lists (<code>ul<\\/code>s) with the class name of stripe. Then we want to apply the classes odd and even to the alternating list items.<\\/p>\\n\\n<p>Here is where the problem lies. Since there are two classes on the unordered list, the striper function does not recognize that it has a class name of stripe. Here is the problem in the code:<\\/p>\\n\\n<div class=\\\"codeblock\\\"><code>\\nif&nbsp;((parentElementClass&nbsp;==&nbsp;null)||(currentParent.className&nbsp;==&nbsp;parentElementClass))&nbsp;&#123;&nbsp;\\n\\n<\\/code><\\/div>\\n\\n<p>Since we are just seeing if the class name of the current element is equal to the class name of stripe, this is not true.<\\/p>\\n\\n<p>I have created a <a href=\\\"http:\\/\\/trevordavis.net\\/play\\/striper\\/indexBad.html\\\">simple demo page<\\/a> with an unordered list, table, and paragraphs that are supposed to be striped.<\\/p>\\n\\n<h2>Fixing the Striper<\\/h2>\\n\\n<p>Really all you have to do to the JavaScript is to remove the line from above and replace with the lines below:<\\/p>\\n\\n<div class=\\\"codeblock\\\"><code>\\nvar&nbsp;pattern&nbsp;=&nbsp;new&nbsp;RegExp(\\\"(^|&nbsp;)\\\"&nbsp;+&nbsp;parentElementClass&nbsp;+&nbsp;\\\"(&nbsp;|$)\\\");<br \\/>if&nbsp;((parentElementClass&nbsp;==&nbsp;null)||(currentParent.className.match(pattern)))&nbsp;&#123;&nbsp;\\n\\n<\\/code><\\/div>\\n\\n<p>That takes the class name and splits is with a regular expression. So now you could have fifty class names on the element, and it will still work<\\/p>\\n\\n<p>Here is a <a href=\\\"http:\\/\\/trevordavis.net\\/play\\/striper\\/\\\">little demo of the improved splintered striper<\\/a>.<\\/p>\\n\\n<p>I&rsquo;m sure there is another way to do that easier, so feel free to let me know if there is.<\\/p>\",\"4\":{\"website\":{}}}}','2014-01-19 13:01:12','2014-08-08 19:32:29','32df0fb4-5fd5-4135-b9e3-e95db44bd1ad',1),(270,288,4,1,1,NULL,'{\"authorId\":1,\"title\":{\"title\":{}},\"slug\":\"i-took-the-web-design-survey-2007\",\"postDate\":1177450771,\"expiryDate\":null,\"enabled\":1,\"fields\":{\"2\":\"<p>I hope all you web people took the <a href=\\\"http:\\/\\/alistapart.com\\/articles\\/webdesignsurvey\\\">A List Apart 2007 Web Design Survey<\\/a>. All it can do is get some wonderful statistics for us web nerds. Plus, you get this sweet button.<\\/p>\\n\\n<p><a href=\\\"http:\\/\\/alistapart.com\\/articles\\/webdesignsurvey\\\"><img src=\\\"&lt;?php bloginfo(\'template_directory\'); ?&gt;\\/images\\/blog\\/i-took-the-2007-survey.gif\\\" alt=\\\"I Took The 2007 Survey\\\" \\/><\\/a><\\/p>\\n\\n<p>So I urge everyone who has anything to do with the web to fill out the <a href=\\\"http:\\/\\/alistapart.com\\/articles\\/webdesignsurvey\\\">survey<\\/a>.<\\/p>\\n<!--more-->\\n<p>I did struggled with one question about what my specific job title is, because there has been some recent debate about what exactly it is.<\\/p>\\n\\n<p>At my job, my position is called webmaster. Recently, we posted a new job, <a href=\\\"http:\\/\\/matrixgroup.net\\/careers\\/index.cfm?fa=show_job&id=53\\\">CSS Jedi \\/ Front-End Developer<\\/a>. This is my job title basically. I helped to write the description for this job, and this is what we decided that the actual job entails.<\\/p>\\n\\n<p>When we thought about webmaster, we thought about a single person who is in charge of making minute updates to a single website. But this is really not what I do. Sure, I make small updates to my team\'s client sites, but I also slice new designs as well. I am also prototyping stuff all the time and do implementations.<\\/p>\\n\\n<p>So, front-end developer is suitable for me.<\\/p>\",\"4\":{\"website\":{}}}}','2014-01-19 13:01:12','2014-08-08 19:32:29','be75a7e5-1e06-42a0-bec8-7be8b3035780',1),(271,289,4,1,1,NULL,'{\"authorId\":1,\"title\":{\"title\":{}},\"slug\":\"css-attribute-selectors-explained\",\"postDate\":1176592085,\"expiryDate\":null,\"enabled\":1,\"fields\":{\"2\":\"<p>So, I had played around with CSS attribute selectors a little bit before I went to <a href=\\\"http:\\/\\/aneventapart.com\\/events\\/boston07\\/\\\">An Event Apart Boston<\\/a>, but I have a much better grasp of them now. I gave a brief overview in my <a href=\\\"http:\\/\\/trevordavis.net\\/blog\\/web\\/an-event-apart-boston-summary.php\\\">An Event Apart Boston Summary<\\/a>.<\\/p>\\n\\n<p>Currently, you really have to do some digging to figure out exactly how to use them, but I hope this article explains them all better.<\\/p>\\n<!--more-->\\n<h2 class=\\\"replaceHeadline\\\">General Information<\\/h2>\\n\\n<p>Basically, attribute selectors allow you to target elements based on their attributes (i.e. alt, href, title, etc.). In the table below, you can see all the different options for attribute selectors.<\\/p>\\n\\n<dl>\\n <dt>[attr]<\\/dt>\\n <dd>Whenever the attribute is set. Ex: input[type]<\\/dd>\\n\\n <dt>[attr=\\\"val\\\"]<\\/dt>\\n <dd>Whenever the attribute equals the specific value. Ex: input[type=\\\"radio\\\"]<\\/dd>\\n\\n <dt>[attr~=\\\"val\\\"]<\\/dt>\\n <dd>Whenever the attribute equals one of the space separated list of values. Ex: input[type~=\\\"radio checkbox\\\"]<\\/dd>\\n\\n <dt>[attr|=\\\"val\\\"]<\\/dt>\\n <dd>Whenever the attribute equals a hyphen-separated list of words, beginning with the value. (This one is supposed to be unreliable, and I am a little confused by the specifications, so I am not really sure of how to explain an example.)<\\/dd>\\n\\n <dt>[attr*=\\\"val\\\"]<\\/dt>\\n <dd>Whenever the attribute contains the value. Ex: a[href*=\\\".com\\\"]<\\/dd>\\n\\n <dt>[attr^=\\\"val\\\"]<\\/dt>\\n <dd>Whenever the attribute starts with the value. Ex: a[href^=\\\"http\\\"]<\\/dd>\\n\\n <dt>[attr$=\\\"val\\\"]<\\/dt>\\n <dd>Whenever the attribute ends with the value. Ex: a[href$=\\\".pdf\\\"]<\\/dd>\\n<\\/dl>\\n\\n<p>Ok, so hopefully the general information makes them a little clearer, and I hope the following examples make them very easy to use.<\\/p>\\n\\n\\n<h2 class=\\\"replaceHeadline\\\">Examples<\\/h2>\\n<p>Below, I will give an example of each attribute selector and how it can be used.<\\/p>\\n\\n<h3 class=\\\"replaceHeadline\\\">[attr]<\\/h3>\\n\\n<p>Ok, so say maybe you want to style anchors that have the href attribute set to something. This may help differentiate JavaScript anchors.<\\/p>\\n\\n<p>The CSS you want to add is like so:<\\/p>\\n\\n<div class=\\\"codeblock\\\"><code>\\na&nbsp;&#123;&nbsp;text-decoration:&nbsp;underline;&nbsp;&#125;<br \\/><br \\/>a&#91;href&#93;&nbsp;&#123;<br \\/>&nbsp;border-bottom:&nbsp;1px&nbsp;dotted&nbsp;#999;<br \\/>&nbsp;text-decoration:&nbsp;none;<br \\/>&#125;&nbsp;\\n\\n<\\/code><\\/div>\\n\\n<p>That will remove the underline, and add a grey bottom border to anything that has the href attribute set.<\\/p>\\n\\n<h3 class=\\\"replaceHeadline\\\">[attr=\\\"val\\\"]<\\/h3>\\n\\n<p>Ok, so maybe you have added a green border to all input elements, but then you don&rsquo;t want them on radio buttons. So you add the following CSS:<\\/p>\\n\\n<div class=\\\"codeblock\\\"><code>\\ninput&nbsp;&#123;&nbsp;border:&nbsp;1px&nbsp;solid&nbsp;green;&nbsp;&#125;<br \\/><br \\/>input&#91;type=\\\"radio\\\"&#93;&nbsp;&#123;&nbsp;border:&nbsp;none;&nbsp;&#125;&nbsp;\\n\\n<\\/code><\\/div>\\n\\n<p>That will add a green border to all input elements except for radio buttons.<\\/p>\\n\\n<h3 class=\\\"replaceHeadline\\\">[attr~=\\\"val\\\"]<\\/h3>\\n\\n<p>Use the same example that you want to add a green border to all input elements except for radio buttons, checkboxes, and submit buttons. The CSS you need is:<\\/p>\\n\\n<div class=\\\"codeblock\\\"><code>\\ninput&nbsp;&#123;&nbsp;border:&nbsp;1px&nbsp;solid&nbsp;green;&nbsp;&#125;<br \\/><br \\/>input&#91;type~=\\\"radio&nbsp;checkbox&nbsp;submit\\\"&#93;&nbsp;&#123;&nbsp;border:&nbsp;none;&nbsp;&#125;&nbsp;\\n\\n<\\/code><\\/div>\\n\\n<p>So you get a green border on all input elements except radio buttons, checkboxes, and submit buttons.<\\/p>\\n\\n<h3 class=\\\"replaceHeadline\\\">[attr*=\\\"val\\\"]<\\/h3>\\n\\n<p>Ok, so maybe you want to add a <a href=\\\"http:\\/\\/google.com\\\">Google<\\/a> favicon to every link to Google. Add the following (pretending you have a Google favicon):<\\/p>\\n\\n<div class=\\\"codeblock\\\"><code>\\na&#91;href*=\\\"google\\\"&#93;&nbsp;&#123;<br \\/>&nbsp;background:&nbsp;url(\\/images\\/googleIcon.gif)&nbsp;no-repeat&nbsp;100%&nbsp;50%;<br \\/>&nbsp;padding-right:&nbsp;25px;<br \\/>&#125;&nbsp;\\n\\n<\\/code><\\/div>\\n\\n<p>So now any link to Google, http:\\/\\/google.com\\/analytics, http:\\/\\/google.com\\/sitemaps, etc. will have the Google favicon.<\\/p>\\n\\n<h3 class=\\\"replaceHeadline\\\">[attr^=\\\"val\\\"]<\\/h3>\\n\\n<p>Let&rsquo;s add an external link to all links that start with http<\\/p>\\n\\n<div class=\\\"codeblock\\\"><code>\\na&#91;href^=\\\"http\\\"&#93;&nbsp;&#123;<br \\/>&nbsp;background:&nbsp;url(\\/images\\/external.gif)&nbsp;no-repeat&nbsp;100%&nbsp;50%;<br \\/>&nbsp;padding-right:&nbsp;25px;<br \\/>&#125;&nbsp;\\n\\n<\\/code><\\/div>\\n\\n<p>Now every link that starts with http will have an external link icon.<\\/p>\\n\\n<h3 class=\\\"replaceHeadline\\\">[attr$=\\\"val\\\"]<\\/h3>\\n<p>Ok, now we should display an icon for any file types that we are linking to: pdf, doc, xls.<\\/p>\\n\\n<div class=\\\"codeblock\\\"><code>\\na&#91;href$=\\\".pdf\\\"&#93;,&nbsp;a&#91;href$=\\\".doc\\\"&#93;,&nbsp;a&#91;href$=\\\".xls\\\"&#93;&nbsp;&#123;<br \\/>&nbsp;background-position:&nbsp;100%&nbsp;50%;<br \\/>&nbsp;background-repeat:&nbsp;no-repeat;<br \\/>&nbsp;padding-right:&nbsp;19px;<br \\/>&#125;<br \\/><br \\/>a&#91;href$=\\\".pdf\\\"&#93;&nbsp;&#123;&nbsp;background-image:&nbsp;url(\\/images\\/pdf.gif);&nbsp;&#125;<br \\/>a&#91;href$=\\\".doc\\\"&#93;&nbsp;&#123;&nbsp;background-image:&nbsp;url(\\/images\\/doc.gif);&nbsp;&#125;<br \\/>a&#91;href$=\\\".xls\\\"&#93;&nbsp;&#123;&nbsp;background-image:&nbsp;url(\\/images\\/xls.gif);&nbsp;&#125;&nbsp;\\n\\n<\\/code><\\/div>\\n\\n<p>This is one of the coolest things for me. No more adding extraneous markup in order to add an icon that shows the file type when linking to a file.<\\/p>\\n\\n<h3 class=\\\"replaceHeadline\\\">That&rsquo;s it!<\\/h3>\\n\\n<p>I must say, that this works in all browsers, except IE 6 of course. But if you use the <a href=\\\"http:\\/\\/dean.edwards.name\\/ie7\\/\\\">Dean Edwards IE7 Script<\\/a> and include the CSS 3 selectors, it will work. I will eventually give a rundown of how to use that script, because I find the documentation a little hard to read. So I hope everyone enjoys attribute selectors as much as I do.<\\/p>\",\"4\":{\"website\":{}}}}','2014-01-19 13:01:12','2014-08-08 19:32:29','e7e87232-e330-46cf-8e64-f55f509795c2',1),(272,290,4,1,1,NULL,'{\"authorId\":1,\"title\":{\"title\":{}},\"slug\":\"an-event-apart-boston-summary\",\"postDate\":1175391535,\"expiryDate\":null,\"enabled\":1,\"fields\":{\"2\":\"<p>So I am finally getting around to writing up a summary of my time at <a href=\\\"http:\\/\\/aneventapart.com\\/events\\/boston07\\/\\\">An Event Apart Boston<\\/a>. I can&rsquo;t even express how much that I learned. It was amazing to see so many respectable names in the web design\\/development community all speak. Thank god for my company, <a href=\\\"http:\\/\\/matrixgroup.net\\\">Matrix Group International<\\/a> for paying for myself and two co-workers to go to the event. So I thought I would give a quick run-down of all of the events.<\\/p>\\n<!--more-->\\n<h2>Eric Meyer &mdash; Secrets of a CSS Jedi<\\/h2>\\n\\n<p><a href=\\\"http:\\/\\/meyerweb.com\\\">Eric Meyer<\\/a> started off the event with an wonderful talk showing the amazing things that are possible with CSS. The first thing that he mentioned was that in order to get consistency between browser, you should zero out the margins and paddings for every element (except form elements). People have been doing this by using the universal selector (*), but by removing the margins and padddings for every element, you can sometimes get weird results with form elements. I mean conceptually, what should happen when you add more padding to a radio button? Should the space between the circle and outline increase? The other thing is that the universal selector takes more time to process than just having a large group selector.<\\/p>\\n\\n<p>His next point was that we need to realize that CSS doesn&rsquo;t care what element is doing what, an element is an element. Which is when he turned a regular HTML table into a bar graph, both vertical and horizontal. Basically, he had a few classes, and he was positioning the cells absolutely. I am still not sure if it would have worked in <abbr title=\\\"Internet Explorer\\\">IE<\\/abbr> 6, since it is so fussy at times. He said he would post his HTML files at some point, so I would be interested in testing in IE 6. It was just awesome to see the power of CSS, and what we have to look forward to in the future as browsers get more and more powerful.<\\/p>\\n\\n<h2>Jeffrey Zeldman &mdash; Writing the User Interface<\\/h2>\\n\\n<p><a href=\\\"http:\\/\\/zeldman.com\\/\\\">Jeffrey Zeldman<\\/a> next spoke about writing content for the web. When we look at the highest traffic sites on Alexa, it is not a coincidence that content heavy sites are at the top. Content is what drives traffic. Fresh copy is what counts more than looks. People do not bookmark pages because of the images that are on it (except for photographic sites); they are bookmarking because of the content.<\\/p>\\n\\n<p>Every instance of copy on a site is a brand opportunity, and copy is often the easiest and cheapest part of a site to fix. Guide copy should be clear, brief, audience appropriate, and brand appropriate. Web users are most often in find mode, and they scan. While monitors get better and better, reading on the screen is much more fatiguing than reading print.<\\/p>\\n\\n<p>The keys to writing for the web is:<\\/p>\\n<ul>\\n <li>Use frequent subheads.<\\/li>\\n <li>Chunk text.<\\/li>\\n <li>Use 8th grade vocabulary, short declarative sentences<\\/li>\\n<\\/ul>\\n\\n<p>I tell you, Zeldman really speaks well. When he speaks, you just get enthralled in what he is saying. That is why I think working with him would be awesome. It is too bad that the <a href=\\\"http:\\/\\/zeldman.com\\/2007\\/03\\/22\\/happy-cog-philadelphia-is-hiring\\/\\\">Happy Cog Front End Developer<\\/a> position requires you to be in Philly. I can&rsquo;t even imagine working with all of those awesome people at <a href=\\\"http:\\/\\/happycog.com\\/\\\">Happy Cog<\\/a>.<\\/p>\\n\\n<h2>Jason Santa Maria &mdash; How to Redesign Your Way Out of a Paper Bag<\\/h2>\\n\\n<p>Since I am not always the most creative person, I was really interested in hearing this speech. The first thing <a href=\\\"http:\\/\\/jasonsantamaria.com\\/\\\">Jason Santa Maria<\\/a> talked about was looking around you for inspiration.<\\/p>\\n\\n<ul>\\n <li>Keep a sketchbook.<\\/li>\\n <li>Keep morgue files (whenever you see something in print that is cool, put it into a file folder).<\\/li>\\n <li>Surround yourself in a creative environment.<\\/li>\\n<\\/ul>\\n\\n<p>But the best solution for seeking inspiration is to do research. When Happy Cog was redesigning the <a href=\\\"http:\\/\\/comhaltas.ie\\/\\\">Comhaltas<\\/a> website, they went and heard these people play the music, and they hung out with them. This gave them some insight into the music and gave them inspiration to create the design.<\\/p>\\n\\n<p>We also need to remember that design is iterative. First, you start with grey box comps, which is where you focus on the idea and not minute details. Once satisfied with those, you get into the specifics of each element. When designing, you need to consider things that will not look dated in a year.<\\/p>\\n\\n<p>Another topic that I have recently read about in <a href=\\\"http:\\/\\/transcendingcss.com\\\">Transcending CSS<\\/a> is about grid design. This is not a new technique; it is just something that people do not know how to do. But basically by setting up a grid and designing by it, you keep things in line and can create really clean and nicely defined lines. This way you can plan for the placement of things, even if you aren&rsquo;t the one updating it. Jason said to embrace the whitespace, which I think is something that is definitely being done in this whole &ldquo;Web 2.0&rdquo; thing.<\\/p>\\n\\n<p>The way to design is left to right, top to bottom, big to small; just like how we read. Make sure there is enough contrast on elements, and things do not have to be over-styled.<\\/p>\\n\\n<p>On a side note, Jason had a little rant about how \\\" is not the same thing as &ldquo; (<code>&amp;ldquo;<\\/code>) and \' is not the same thing as &rsquo; (<code>&amp;rsquo;<\\/code>). \\\" and \' are used for feet and inches, while &ldquo; and &lsquo; are used for quotation marks and apostrophes.<\\/p>\\n\\n<p>Jason&rsquo;s speech really inspired me, and I have since given up on my sister, who was going to design my site for me. I am just going to go for it.<\\/p>\\n\\n<h2>Steve Krug &mdash; The Web Usability Diet<\\/h2>\\n\\n<p>I had heard <a href=\\\"http:\\/\\/sensible.com\\/\\\">Steve Krug<\\/a> give a similar speech at another conference, but his points are still so valid. He first begin by pointing out that even the best thought out products have usability flaws. You can put it all the research and time creating the product, but without testing it, it can easily fail.<\\/p>\\n\\n<p>Web user testing is easy to do:<\\/p>\\n\\n<ol>\\n <li>Round up a few volunteers.<\\/li>\\n <li>Have them follow a script where they will be asked to complete some tasks.<\\/li>\\n <li>Record it using software like <a href=\\\"http:\\/\\/www.techsmith.com\\/camtasia.asp\\\">Camtasia<\\/a>.<\\/li>\\n <li>Then review with your team and see how much you screwed up.<\\/li>\\n <li>Oh yeah, and pay your volunteers.<\\/li>\\n<\\/ol>\\n\\n<p>He made the point that you need to focus on the most serious ones, until they are right. It really does not take too much time and effort to realize that you have the problems; the harder part is fixing them all. The example that he used was to order a subscription of The New Yorker magazine on <a href=\\\"http:\\/\\/www.magazines.com\\/\\\">Magazines.com<\\/a> without using the search function. We found that it was not very easy. Time yourself. Only a handful of people did it in the alloted amount of time (approximately 3 minutes). He has used this example time and time again, and Magazines.com still has not corrected the problem.<\\/p>\\n\\n<p>While usability testing is relatively easy, sometimes it is hard to convince your clients of the value of it. But honestly, if money is involved, there needs to be testing.<\\/p>\\n\\n<h2>Andrew Kirkpatrick - Beyon Basic Access<\\/h2>\\n\\n<p>I must say, <a href=\\\"http:\\/\\/blogs.adobe.com\\/accessibility\\/\\\">Andrew Kirkpatrick<\\/a> did not have the most enthralling speech, but it was an extremely hard topic to make interesting. He spoke about how accessibility is more than just alt attributes, <code>&lt;label><\\/code>s, <code>&lt;th><\\/code>s, or retaining information when JavaScript is disabled. There are many different kinds of disabilities that users of the web have, and we need to embrace all of them, not just a few.<\\/p>\\n\\n<p>The whole gist of his speech was that we need to provide the name, role, and state of objects that users are interacting with. For instance, if you have a set of tabs, these need to be named so that they make sense. Their role needs to be defined, i.e. Tabs, and the current state of each tab needs to be readily accessible. Providing keyboard access to arrow over between tabs is a huge step forward. <a href=\\\"http:\\/\\/yahoo.com\\\">Yahoo!<\\/a> and <a href=\\\"http:\\/\\/dojotoolkit.org\\/\\\">Dojo<\\/a> are making great strides in this domain, and their scripts are readily available.<\\/p>\\n\\n<h2>Dan Cederholm &mdash; Interface Design Juggling<\\/h2>\\n\\n<p><a href=\\\"http:\\/\\/simplebits.com\\\">Dan Cederholm<\\/a> may have given the best talk of the entire two days. He was witty, and his insight was great. Not to mention he is currently one of my favorite designers.<\\/p>\\n\\n<p>He first spoke about choosing color. By starting with a small color palette and reusing variations of that set throughout the design, you get a much more cohesive design. A few ways to choose these palettes are:<\\/p>\\n\\n<ul>\\n <li>Grab a nature photo you like, and use the color picker.<\\/li>\\n <li>Apply the Mosaic filter in photoshop to any image, and see the color combinations that are possible.<\\/li>\\n<\\/ul>\\n\\n<p>Even such a simple thing as link color can carry great weight, since links are the most important item of the web, choosing a color that will stand out is important.<\\/p>\\n\\n<p>In Dan&rsquo;s definition, great typography is invisible. Since there are not many universal fonts, we just need to learn how to work with what we got. One thing that Dan does beautifully on his <a href=\\\"http:\\/\\/simplebits.com\\\">site<\\/a>, is by styling his &amp;&rsquo;s beautifully. It is such a small thing, but just by adding one class, it really adds that extra beauty to the page.<\\/p>\\n\\n<p>Another interesting point that Dan brought up was the importance of Favicons. These can be used when people link to your site, they are used for bookmarks, and we are seeing them more and more on mobile devices. So essentially it is the first brand opportunity for your site.<\\/p>\\n\\n<p>Dan also talked about adding small simple details without adding complexity. By adding a simple 3px drop shadow on the bottom of a box, it adds a lot of detail to the box without any extra markup.<\\/p>\\n\\n<p>Finally, Dan talked about <a href=\\\"http:\\/\\/microformats.org\\\">Microformats<\\/a>. I must say I was a little unclear about the benefits at first, but after hearing his speech, I totally understand them. I thought it was all very confusing, but essentially all that you are doing is adding a few universally accepted classes to elements. As Dan said, we are really desiging for the future. Allowing people to do all sort of cool things with these universal classes.<\\/p>\\n\\n<p>Oh, and of course Dan talked about being bulletproof:<\\/p>\\n\\n<ul>\\n <li>Check out what your site looks like with images disabled.<\\/li>\\n <li>Check it out with CSS disabled.<\\/li>\\n <li>Finally, bump up the text two sizes.<\\/li>\\n<\\/ul>\\n\\n<h2>Opening Night Party &mdash; Restaurant 33<\\/h2>\\n\\n<p>Definitely the coolest bar I have ever been to. <a href=\\\"http:\\/\\/33restaurant.com\\/\\\">Restaurant 33<\\/a> had these cool lighting effects all over the place, and it was really entrancing. Not to mention the free food, free drinks, and people were cool too.<\\/p>\\n\\n<h2>Cameron Moll &mdash; Good vs. Great Design<\\/h2>\\n\\n<p><a href=\\\"http:\\/\\/cameronmoll.com\\/\\\">Cameron Moll<\\/a> is another wonderful designer, and his talk seemed more conceptual than technical, but it was still very interesting. He first started taking about how there are some things that are just mapped naturally and that can help up determine how something works. Design is essentially communication, but great design yields meaningful communication. Sure there may be some really creative people out there, but if they don&rsquo;t know how to design for specific audiences, then there talent is wasted. Cameron talked about how seeing things in greyscale can help to see the importance of specific elements in design.<\\/p>\\n\\n<p>He then went on to talk about how influence is almost cheap, it can be found anywhere and copied anywhere. While it can also be found anywhere, inspiration is a much deeper thing.<\\/p>\\n\\n<p>Finally, Cameron discussed the difference between redesigning (just updating the look of the site) and realigning (adapting to your users&rsquo; changed needs). He finished with the concept of fixing vs. preventing. By putting in more time up front to prevent things, you will be saving time in the long run from fixing.<\\/p>\\n\\n<h2>Ethan Marcotte &mdash; Web Standards Stole My Truck<\\/h2>\\n\\n<p><a href=\\\"http:\\/\\/sidesh0w.com\\/\\\">Ethn Marcotte&rsquo;s<\\/a> talk was a little boring to me, because he didn&rsquo;t really discuss many new things to me. He did make a few interesting points though.<\\/p>\\n\\n<ul>\\n <li>While embracing standards may seen hard (to non-standardistas), the benefits are huge\\n  <ul>\\n   <li>Lighter page weight<\\/li>\\n   <li>Better accessibility<\\/li>\\n   <li>Better <abbr title=\\\"Search Engine Optimization\\\">SEO<\\/abbr><\\/li>\\n   <li>One single document that can control the style of an entire site<\\/li>\\n  <\\/ul>\\n <\\/li>\\n <li>You can use the developer tools (like <a href=\\\"http:\\/\\/getfirebug.com\\\">Firebug<\\/a>, <a href=\\\"https:\\/\\/addons.mozilla.org\\/en-US\\/firefox\\/addon\\/60\\\">Web Developer Toolbar<\\/a>) out there, you can decrease debugging time.<\\/li>\\n <li>Use borders and backgrounds to debug layout problems.<\\/li>\\n <li>Validate your code.<\\/li>\\n <li>When all else fails, just delete properties and start from scratch.<\\/li>\\n<\\/ul>\\n\\n<p>The most profound statement he made was that building a site with standards is easy, but keeping it standards compliant is hard.<\\/p>\\n\\n<h2>Molly Holzschlag &mdash; Building Better Browsers<\\/h2>\\n\\n<p>As many people heard, <a href=\\\"http:\\/\\/molly.com\\/\\\">Molly Holzschlag<\\/a> is going to do some work for Microsoft to whip their browser into shape. While at first I did not think Molly&rsquo;s speech was going to be very interesting, it turned out to be pretty good.<\\/p>\\n\\n<p>She first pointed out that browsers are software too, they ALL have bugs. Also, the browser history is not that long, they are relatively young in software age. Since there are so many different interpretations to things, it is easy to have many different approaches to implementation. Don&rsquo;t worry, I still hate IE. But after hearing her talk, and thinking back to my programming days in college, I have more respect for IE.<\\/p>\\n\\n<p>Molly&rsquo;s browser pathways to success were:<\\/p>\\n\\n<ol>\\n <li>Create common baselines.<\\/li>\\n <li>Clarify ambiguous specifications.<\\/li>\\n <li>Use transparent development cycles.<\\/li>\\n <li>Keep an open dialog with the community.<\\/li>\\n <li>Foster events and networking (Microsoft was a sponsor of An Event Apart).<\\/li>\\n <li>Compete of <abbr title=\\\"User Experience\\\">UE<\\/abbr> and features.<\\/li>\\n<\\/ol>\\n\\n<h2>Eric Meyer &mdash; State of CSS in IE 7 World<\\/h2>\\n\\n<p>Ok everyone, let&rsquo;s admit it. IE 7 is a huge step forward. It can basically be considered on the same standards-compliant level as Firefox, Safari, and Opera. The browser advanced so much in a standards sense. I am not going to bore you with all of the things that are now possible in IE 7 that weren&rsquo;t in IE 6, but I will point out one cool thing.<\\/p>\\n\\n<h3>Attribute Selectors<\\/h3>\\n\\n<p><a href=\\\"http:\\/\\/trevordavis.net\\/blog\\/tutorial\\/css-attribute-selectors-explained.php\\\">Attribute selectors<\\/a> are awesome. That&rsquo;s it. Maybe one of the coolest things in CSS. By adding something like <code>a[href$=\\\".pdf\\\"]<\\/code> to your CSS file, you can add a pdf icon to all links to pdfs. By adding something like <code>a[href^=\\\"http:\\/\\/]<\\/code>, you can target all external links an add an icon for that. That&rsquo;s the long and short of it. It&rsquo;s awesome.<\\/p>\\n\\n<p>Eric also encouraged everyone to make IE 6 more like IE 7 with <a href=\\\"http:\\/\\/trevordavis.net\\/blog\\/tutorial\\/using-dean-edwards-ie7-script.php\\\">Dean Edwards&rsquo; IE7 scripts<\\/a>. Via JavaScript, you can make IE 6 act must like IE 7. I have played around with it a little, and it is really cool. Use it. Spread the word.<\\/p>\\n\\n<h2>Jeffrey Zeldman &mdash; Selling Design<\\/h2>\\n\\n<p>Jeffrey wrapped it up with an interesting discussion on choosing clients. I have read a few articles recently about choosing clients, and this just reinforced the point. You do not need great clients; you need great relationships. You still need to choose your clients carefully and make sure not to choose indecisive clients, or the work will never get done successfully. The way to a good relationship is to involve the decision makers who are high up in the organization. This makes them feel special. Everyone wants and needs to feel special sometimes.<\\/p>\\n\\n<p>Our job is to sell ideas, not pixels. Solve a problem with your design. Don&rsquo;t just create a design. When responding to criticism, figure out what they mean by it. Why don&rsquo;t they like that color? They also need to realize that the site is not about the stakeholders; it is about the users.<\\/p>\\n\\n<p>When all else fails:<\\/p>\\n\\n<ol>\\n <li>Push back.<\\/li>\\n <li>Look into it.<\\/li>\\n <li>Agree with them. Surprise!<\\/li>\\n<\\/ol>\\n\\n<h2>That&rsquo;s It!<\\/h2>\\n<p>I must say; it was awesome. I can&rsquo;t wait to find some time to actually do my site design. If ever you have the change, go to An Event Apart event. Everything was very well organized, and I learned a lot. Thanks to everyone at An Event Apart, Happy Cog, and the speakers.<\\/p>\",\"4\":{\"website\":{}}}}','2014-01-19 13:01:12','2014-08-08 19:32:29','925be35a-fc39-4fb4-b61a-0b27a9035460',1),(273,291,4,1,1,NULL,'{\"authorId\":1,\"title\":{\"title\":{}},\"slug\":\"an-event-apart-boston\",\"postDate\":1174430913,\"expiryDate\":null,\"enabled\":1,\"fields\":{\"2\":\"<p>So my company is paying for two other webmasters and myself to go to <a href=\\\"http:\\/\\/www.aneventapart.com\\/events\\/boston07\\/\\\">An Event Apart Boston<\\/a>. It is not too often that you can get this many amazing names in the field of web development together in one place.<\\/p>\\n<!--more-->\\n<p>I think I am really looking forward to the more design-centered events like:<\\/p>\\n\\n<ul>\\n<li>Redesigning Your Way Out of a Paper Bag by Jason Santa Maria<\\/li>\\n<li>Good vs. Great Design by Cameron Moll<\\/li>\\n<li>Selling Design by Jeffrey Zeldman<\\/li>\\n<\\/ul>\\n\\n<p>While I can\'t wait to go to all of the events, these are the ones I really can\'t wait to go to. I feel like I have a amazing grasp of the technical side of web development (i.e. CSS, XTHML, etc), but I wish I could become better at the design side. That is what I hope to get better at in the next few months.<\\/p>\\n\\n<p>I will post an update after the show and give a rundown of the speakers.<\\/p>\",\"4\":{\"website\":{}}}}','2014-01-19 13:01:12','2014-08-08 19:32:29','cfec2a74-6713-49c2-b4ed-9cb3bb4d71e5',1),(274,292,4,1,1,NULL,'{\"authorId\":1,\"title\":{\"title\":{}},\"slug\":\"problems-with-commenting\",\"postDate\":1173125370,\"expiryDate\":null,\"enabled\":1,\"fields\":{\"2\":\"<p>So in the quest to abolish the www from my URL, I seemed to have broken Movable Type comments.<\\/p>\\n\\n<p>I added the following to my .htaccess file:<\\/p>\\n<!--more-->\\n<div class=\\\"codeblock\\\"><code>\\nRewriteEngine&nbsp;on<br \\/>RewriteCond&nbsp;%&#123;HTTP_HOST&#125;&nbsp;^www.trevordavis.net$&nbsp;&#91;NC&#93;<br \\/>RewriteRule&nbsp;^(.*)$&nbsp;http:\\/\\/trevordavis.net\\/$1&nbsp;&#91;R=301,L&#93;&nbsp;\\n\\n<\\/code><\\/div>\\n\\n<p>That means whenever anyone tried to go to <a href=\\\"\\/\\\">www.trevordavis.net<\\/a>, they were redirected to <a href=\\\"\\/\\\">trevordavis.net<\\/a>.<\\/p>\\n\\n<p>My co-worker, Adrian, told me today that when he was trying to add a comment to one of my entries, he got an error that said \\\"No entry_id\\\". After much googling, I finally determined it was because of the URL rewriting. I could not really find a solution, but I finally went into the mt-config.cgi file and found out that when I had setup the site, I set it up with <a href=\\\"\\/\\\">www.trevordavis.net<\\/a>. For some reason, this broke the comments. I changed it to <a href=\\\"\\/\\\">trevordavis.net<\\/a>, and my quest to abolish the www continues.<\\/p>\",\"4\":{\"website\":{}}}}','2014-01-19 13:01:12','2014-08-08 19:32:29','e2cccdd3-45c7-4d51-90e0-0a447b2a8ec9',1),(275,293,4,1,1,NULL,'{\"authorId\":1,\"title\":{\"title\":{}},\"slug\":\"the-rise-of-flash-again\",\"postDate\":1173046364,\"expiryDate\":null,\"enabled\":1,\"fields\":{\"2\":\"<p>This week, there was an A List Apart article called <a href=\\\"http:\\/\\/alistapart.com\\/articles\\/semanticflash\\\">Semantic Flash: Slippery When Wet<\\/a>. When I first started learning about Web Standards, I hated flash. I thought that it was really all just bells and whistles and nothing useful. As time has passed, I have realized that there are some situations where flash can be useful.<\\/p>\\n<!--more-->\\n<p>First, there was the <a href=\\\"http:\\/\\/www.mikeindustries.com\\/sifr\\/\\\">sIFR: Scalable Inman Flash Replacement<\\/a>. Earlier this week, there was the introduction of <a href=\\\"http:\\/\\/www.swfir.com\\/\\\">swfir: swf Image Replacement<\\/a>. I think this technique seems really cool, and there are definitely situations where I would be interested in using it. Just adding a simple drop shadow and rotating the image a few degrees really add a nice effect to the image.<\\/p>\\n\\n<p>My only problem is that I think it may be overused. I hope that people don\'t get so flash-happy that they use it for all images on their site. The same goes for the sIFR technique. I hope that people only utilize these techniques in moderation, and we don\'t see it all over the place. I have a feeling that we are going to start seeing more and more flash out there, and I really hope that we don\'t see it used the way it used to be. I still cannot understand how a person can build an all flash site and feel good about themselves. Does it make them happy that people with screen readers would have problems using their site? I guess it must make someone happy, since people are still doing it.<\\/p>\\n\\n<p>As a side note, I have played around with the swfir script, and it was very very easy to implement.<\\/p>\",\"4\":{\"website\":{}}}}','2014-01-19 13:01:13','2014-08-08 19:32:29','a5b1f3a5-6bd7-4844-894b-465b126482d5',1),(276,294,4,1,1,NULL,'{\"authorId\":1,\"title\":{\"title\":{}},\"slug\":\"learning-from-mistakes\",\"postDate\":1172010577,\"expiryDate\":null,\"enabled\":1,\"fields\":{\"2\":\"<p>You really do get better through experience. The best experience is learning from your mistakes. I learned a great deal from one experience in particular.<\\/p>\\n<!--more-->\\n<p>About 2 months ago, I did some work for the a pretty high profile client. Their regular webmaster was going to be out of town during the busiest time of the year for them, and I had agreed to help them update the site for the next 2 weeks. Over the phone, I had been in contact with a representative, and we had agreed on a set price for the 2 weeks. We had guesstimated that I would do approximately 2 hours of work a night.<\\/p>\\n\\n<p>That was mistake number 1.<\\/p>\\n\\n<p>I should have gotten something in writing. At least an email to confirm how much we had agreed on would have worked. <a href=\\\"http:\\/\\/www.digital-web.com\\/about\\/staff\\/nick_gould\\/\\\"> Nick Gould<\\/a> wrote an excellent article entitled <a href=\\\"http:\\/\\/www.digital-web.com\\/articles\\/web_design_contracts\\/\\\">Web Design Contracts: Why Bother<\\/a>. Nick says:<\\/p>\\n\\n<blockquote>\\nA written contract won\'t always avoid this outcome &mdash; I\'ve had clients tell me with a straight face that they didn\'t realize we were billing for each hour of work despite a clear statement in our contract to that effect. But in that case, I could at least point back to the contract language (humbly, mumbling apologies as I did so) as evidence of his misunderstanding.\\n<\\/blockquote>\\n\\n<p>This is exactly what I would have been able to do if I had what we had agreed on in writing.<\\/p>\\n\\n<p>For the future, I plan on doing the following before starting any work:<\\/p>\\n\\n<ol>\\n <li>Write detailed contracts that clearly explain the pricing, the deliverables, the process, and the payment.<\\/li>\\n <li>Discuss any questions about the contract with the client.<\\/li>\\n <li>Wait for an initial payment from the client.<\\/li>\\n<\\/ol>\\n\\n<p>I would recommend that anyone doing freelance work do the same. Take some time to review Nick\'s article, and take the time to write these contracts. In the end, it is only going to help you.<\\/p>\\n\\n<p>To top it all off, the guy offered me some gear to make up for the money that he refused to pay me. No thanks, a t-shirt does not make up for the fact that you cheated me.<\\/p>\\n\\n<p>On a side note, the site was a disaster to work on. It was poorly organized, still used tables for layout, and did not use includes effectively. It is so sad to see a site that has such high visibility be so poor. Apparently, they just launched a redesign, and guess what? It still uses tables for layout! Hopefully, they will at least utilize stylesheets and includes.<\\/p>\\n\\n<p>Just for fun, if you don\'t have it already, download the <a href=\\\"https:\\/\\/addons.mozilla.org\\/firefox\\/60\\/\\\">Web Developer Toolbar<\\/a>. Go to some big name sites and go to Outline &raquo; Table Cells. See how many big organizations are still so far behind in their adherence to web standards. When are these companies going to realize that the web is such a valuable tool for their marketing campaign? I guess that is a topic for another conversation.<\\/p>\",\"4\":{\"website\":{}}}}','2014-01-19 13:01:13','2014-08-08 19:32:29','6c7b18c0-7027-4628-87b2-c5916f148023',1),(277,295,4,1,1,NULL,'{\"authorId\":1,\"title\":{\"title\":{}},\"slug\":\"web-design-development-process\",\"postDate\":1171403010,\"expiryDate\":null,\"enabled\":1,\"fields\":{\"2\":\"<p>What are the steps that you go through when making a web site?<\\/p>\\n\\n<p>Are you adding a lot of extra <code>&lt;div><\\/code> and <code>&lt;span><\\/code> tags? Do you have way too many classes?<\\/p>\\n\\n<p>Maybe you should reconsider your process.<\\/p>\\n<!--more-->\\n<p>The process that I have found effective, is exactly what I am doing with this site:<\\/p>\\n\\n<ol>\\n<li>Create the markup for everything.<\\/li>\\n<li>Add divs that make sense, i.e. header, content, footer.<\\/li>\\n<li>Go in and implement the design adding the necessary divs and classes.<\\/li>\\n<\\/ol>\\n\\n<p>Your markup will become much less bloated, and you will have less non-semantic elements. Sure you may have to add a couple of extra <code>&lt;div><\\/code> tags to add those rounded corners, but its better to add those after you have the structure in place.<\\/p>\\n\\n<p>While I could easily come up with a design for this site, I really am not as creative as my sister is. That is why I have tasked her with coming up with a logo and a design for my site. Then when it is time for her to build her online portfolio, I will help her to implement the site.<\\/p>\\n\\n<p>How can you improve your design \\/ development process? Can you improve mine?<\\/p>\\n\\n<p>Share your methods.<\\/p>\",\"4\":{\"website\":{}}}}','2014-01-19 13:01:13','2014-08-08 19:32:29','093e80ca-99fc-4099-a857-388f52559818',1),(278,296,4,1,1,NULL,'{\"authorId\":1,\"title\":{\"title\":{}},\"slug\":\"web-standards.-what-dont-they-get\",\"postDate\":1171230075,\"expiryDate\":null,\"enabled\":1,\"fields\":{\"2\":\"<p>I still don\'t understand why people refuse to embrace web standards.<\\/p>\\n\\n<p>Is there an advantage to using tables for layout? Yeah that bloated code and horribly inaccessible code sure sounds great to me too.<\\/p>\\n\\n<p>You know what sounds better to me? Some nice lean code with a stylesheet to control the style on the site.<\\/p>\\n<!--more-->\\n<p>There are two sites that I know of that have paid a lot of money to have their sites redesigned:<\\/p>\\n\\n<ol>\\n<li>My high school, <a href=\\\"http:\\/\\/www.gprep.org\\/\\\">Georgetown Prep<\\/a><\\/li>\\n<li>A site that I provided maintenance for a few weeks, <a href=\\\"http:\\/\\/orangebowl.org\\/\\\">The Orange Bowl<\\/a><\\/li>\\n<\\/ol>\\n\\n<p>Try viewing the source of those sites. <\\/p>\\n\\n<p>Yuck.<\\/p>\\n\\n<p>It hurts me to look at that. They paid good money for that? How can we educate the companies who built these sites to actually embrace web standards?<\\/p>\\n\\n<p><a href=\\\"http:\\/\\/webstandards.org\\/\\\">The Web Standards Project<\\/a> is a great start. Hopefully they can help to educate others. But they can\'t do it alone. All web developers who embrace standards need to educate when they have the opportunity. We also need to help fight against Microsoft and their terrible product: Internet Explorer. Sure IE 7 is a huge improvement, but it still stinks. Or how about the fact that Outlook 2007\'s HTML rendering engine will use Words engine instead of IE\'s. That sets HTML emails back a good ten years or so.<\\/p>\\n\\n<p>Embrace web standards!<\\/p>\\n\\n<p>Keep on fighting the good fight.<\\/p>\",\"4\":{\"website\":{}}}}','2014-01-19 13:01:13','2014-08-08 19:32:29','2ecc463c-2cfd-4b98-987b-a5dd6cde5c0d',1),(279,297,4,1,1,NULL,'{\"authorId\":1,\"title\":{\"title\":{}},\"slug\":\"css-forms\",\"postDate\":1169772041,\"expiryDate\":null,\"enabled\":1,\"fields\":{\"2\":\"<p>Everyone hates forms.<\\/p>\\n\\n<p>They are hard to style so that they work with your site design. They are hard to make them accessible. Yeah, yeah we have heard it all. But in reality, they are not that hard to do.<\\/p>\\n\\n<p>Since every other web developer\\/designer has their own method, I thought I would share my two cents.<\\/p>\\n<!--more-->\\n<p>When thinking through all of the HTML elements to find something that makes sense for forms, there are many options.<\\/p>\\n\\n<ul>\\n<li>Unordered List<\\/li>\\n<li>Ordered List<\\/li>\\n<li>DIVs<\\/li>\\n<li>Paragraphs<\\/li>\\n<li>Tables (Yes some people still use tables for forms)<\\/li>\\n<\\/ul>\\n\\n<p>There are probably others. But I like to use a more uncommon element: a Definition List. It is perfect for the job. You have got the definition term, which is essentially like the label. Then you have got the definition description, which is basically the actual form element.<\\/p>\\n\\n<p>Let\'s start with some un-styled markup:<\\/p>\\n\\n<div class=\\\"codeblock\\\"><code>\\n&lt;form&nbsp;action=\\\"#\\\"&nbsp;method=\\\"post\\\"&nbsp;name=\\\"sendToFriendForm\\\"&nbsp;id=\\\"sendToFriendForm\\\"&gt;<br \\/>&nbsp;&lt;dl&nbsp;class=\\\"forms\\\"&gt;<br \\/>&nbsp;&nbsp;&lt;dt&gt;&lt;label&nbsp;for=\\\"name\\\"&gt;Your&nbsp;Name:&lt;\\/label&gt;&lt;\\/dt&gt;<br \\/>&nbsp;&nbsp;&lt;dd&gt;&lt;input&nbsp;name=\\\"name\\\"&nbsp;id=\\\"name\\\"&nbsp;type=\\\"text\\\"&nbsp;\\/&gt;&lt;\\/dd&gt;<br \\/><br \\/>&nbsp;&nbsp;&lt;dt&gt;&lt;label&nbsp;for=\\\"senderEmail\\\"&gt;Your&nbsp;Email&nbsp;Address:&nbsp;&lt;span&nbsp;class=\\\"required\\\"&gt;*&lt;\\/span&gt;&lt;\\/label&gt;&lt;\\/dt&gt;<br \\/>&nbsp;&nbsp;&lt;dd&gt;&lt;input&nbsp;name=\\\"senderEmail\\\"&nbsp;id=\\\"senderEmail\\\"&nbsp;type=\\\"text\\\"&nbsp;\\/&gt;&lt;\\/dd&gt;<br \\/><br \\/>&nbsp;&nbsp;&lt;dt&gt;&lt;label&nbsp;for=\\\"recipientEmail\\\"&gt;Friend\'s&nbsp;Email&nbsp;Address:&nbsp;&lt;span&nbsp;class=\\\"required\\\"&gt;*&lt;\\/span&gt;&lt;\\/label&gt;&lt;\\/dt&gt;<br \\/>&nbsp;&nbsp;&lt;dd&gt;&lt;input&nbsp;name=\\\"recipientEmail\\\"&nbsp;id=\\\"recipientEmail\\\"&nbsp;type=\\\"text\\\"&nbsp;\\/&gt;&lt;\\/dd&gt;<br \\/>&nbsp;&nbsp;&lt;dd&nbsp;class=\\\"help\\\"&gt;Use&nbsp;commas&nbsp;to&nbsp;separate&nbsp;multiple&nbsp;email&nbsp;addresses.&lt;\\/dd&gt;<br \\/><br \\/>&nbsp;&nbsp;&lt;dt&gt;&lt;label&nbsp;for=\\\"sex\\\"&gt;Sex&lt;\\/label&gt;&lt;\\/dt&gt;<br \\/>&nbsp;&nbsp;&lt;dd&nbsp;class=\\\"radio\\\"&gt;&lt;input&nbsp;name=\\\"sex\\\"&nbsp;id=\\\"male\\\"&nbsp;type=\\\"radio\\\"&nbsp;\\/&gt;&nbsp;&lt;label&nbsp;for=\\\"male\\\"&gt;Male&lt;\\/label&gt;&nbsp;&lt;input&nbsp;name=\\\"sex\\\"&nbsp;id=\\\"female\\\"&nbsp;type=\\\"radio\\\"&nbsp;\\/&gt;&nbsp;&lt;label&nbsp;for=\\\"female\\\"&gt;Female&lt;\\/label&gt;&lt;\\/dd&gt;<br \\/>&nbsp;&nbsp;&lt;dt&gt;&lt;label&nbsp;for=\\\"message\\\"&gt;Message:&lt;\\/label&gt;&lt;\\/dt&gt;<br \\/>&nbsp;&nbsp;&lt;dd&gt;&lt;textarea&nbsp;name=\\\"message\\\"&nbsp;id=\\\"message\\\"&gt;&lt;\\/textarea&gt;&lt;\\/dd&gt;<br \\/>&nbsp;&lt;\\/dl&gt;<br \\/>&nbsp;&lt;button&nbsp;type=\\\"submit\\\"&gt;Submit&nbsp;&amp;raquo;&lt;\\/button&gt;<br \\/>&lt;\\/form&gt;&nbsp;\\n\\n<\\/code><\\/div>\\n\\n<p>I have created the page so you can see <a href=\\\"http:\\/\\/trevordavis.net\\/play\\/cssForms\\/\\\">the output<\\/a>. Even un-styled, this form doesn\'t even look bad. But lets add some style:<\\/p>\\n\\n<div class=\\\"codeblock\\\"><code>\\nform&nbsp;&#123;<br \\/>&nbsp;&nbsp;margin:&nbsp;0;<br \\/>&nbsp;&nbsp;padding:&nbsp;0;<br \\/>&nbsp;&#125;<br \\/><br \\/>&nbsp;dl.forms&nbsp;&#123;<br \\/>&nbsp;&nbsp;float:&nbsp;left;<br \\/>&nbsp;&nbsp;width:&nbsp;100%;<br \\/>&nbsp;&#125;<br \\/><br \\/>&nbsp;dl.forms&nbsp;dt&nbsp;&#123;<br \\/>&nbsp;&nbsp;margin:&nbsp;0;<br \\/>&nbsp;&nbsp;padding:&nbsp;10px&nbsp;0&nbsp;0&nbsp;0;<br \\/>&nbsp;&nbsp;clear:&nbsp;left;<br \\/>&nbsp;&nbsp;float:&nbsp;left;<br \\/>&nbsp;&nbsp;width:&nbsp;175px;<br \\/>&nbsp;&#125;<br \\/><br \\/>&nbsp;dl.forms&nbsp;label&nbsp;&#123;&nbsp;font-weight:&nbsp;bold;&nbsp;&#125;<br \\/><br \\/>&nbsp;dl.forms&nbsp;dd&nbsp;&#123;<br \\/>&nbsp;&nbsp;margin:&nbsp;0;<br \\/>&nbsp;&nbsp;padding:&nbsp;10px&nbsp;0&nbsp;0&nbsp;0;<br \\/>&nbsp;&#125;<br \\/><br \\/>&nbsp;dl.forms&nbsp;dd.help&nbsp;&#123;<br \\/>&nbsp;&nbsp;clear:&nbsp;left;<br \\/>&nbsp;&nbsp;padding-top:&nbsp;2px;<br \\/>&nbsp;&nbsp;font-size:&nbsp;90%;<br \\/>&nbsp;&nbsp;color:&nbsp;#999;<br \\/>&nbsp;&#125;<br \\/><br \\/>&nbsp;dl.forms&nbsp;input,&nbsp;dl.forms&nbsp;textarea&nbsp;&#123;&nbsp;width:&nbsp;300px;&nbsp;&#125;<br \\/><br \\/>&nbsp;dl.forms&nbsp;dd.radio&nbsp;input&nbsp;&#123;&nbsp;width:&nbsp;auto;&nbsp;&#125;<br \\/><br \\/>&nbsp;dl.forms&nbsp;textarea&nbsp;&#123;&nbsp;height:&nbsp;150px;&nbsp;&#125;<br \\/><br \\/>&nbsp;.required&nbsp;&#123;<br \\/>&nbsp;&nbsp;color:&nbsp;#FF0000;<br \\/>&nbsp;&nbsp;font-weight:&nbsp;bold;<br \\/>&nbsp;&#125;&nbsp;\\n\\n<\\/code><\\/div>\\n\\n<p>I don\'t think I need to go step by step through that because it is pretty simple styling. I have <a href=\\\"http:\\/\\/trevordavis.net\\/play\\/cssforms\\/final\\/\\\">created the styled page<\\/a> for you to see.<\\/p>\\n\\n<p>I personally like forms that have the label and the input element on the same line, but that\'s just me. It is pretty flexible, try resizing the font two times. Still very readable. You could easily do the widths in ems or percentages; I just chose to use pixels since I don\'t have any parent element containing it.<\\/p>\\n\\n<p>Should be pretty good in all browsers, especially since we didn\'t do any crazy CSS. I know it looks good in FF, IE6 and IE7. I believe it works fine in Safari and Opera.<\\/p>\\n\\n<p>Obviously this isn\'t the be all and end all to styling forms with CSS. But it is something to start with. So, go out and make it better. But be sure to share what you have created.<\\/p>\",\"4\":{\"website\":{}}}}','2014-01-19 13:01:13','2014-08-08 19:32:29','16c2feed-ccf2-4299-8e88-9995a6c52c0f',1),(287,51,4,1,2,NULL,'{\"authorId\":\"1\",\"title\":\"Dumbwaiter Chrome Extension\",\"slug\":\"dumbwaiter-chrome-extension\",\"postDate\":1348847854,\"expiryDate\":null,\"enabled\":\"1\",\"fields\":{\"2\":\"<p>I recently got around to trying out <a href=\\\"http:\\/\\/statamic.com\\/\\\">Statamic<\\/a> to create a little <a href=\\\"http:\\/\\/recipes.trevordavis.net\\/\\\">recipe manager<\\/a>. Yes, I know there are tons of apps out there that do this type of stuff, but I wanted to really be able to control everything.<\\/p>\\n\\n<p>I also wanted to figure out some way that my wife could bookmark recipes for us, and I didn&rsquo;t expect her to login to my Statamic install and go through that whole process of adding a new entry. I wanted her to be able to click a button when she was on a site displaying a recipe that she wanted to bookmark, and an entry would then be created. That led me to create my first Chrome Extension, <a href=\\\"https:\\/\\/chrome.google.com\\/webstore\\/detail\\/jeeeliidcblacogbcefhcbljkllhpjdd?hl=en&gl=US\\\">Dumbwaiter<\\/a>.<\\/p>\\n\\n<p><img src=\\\"http:\\/\\/trevordavis.net\\/uploads\\/images\\/content\\/dumbwaiter-options.png\\\" alt=\\\"Dumbwaiter Options\\\"><\\/p>\\n\\n<p>The basic idea is that you provide a URL that will be opened in a popup window when you click the exntension. Then you provide some JavaScript to do something on the current page you are on, and then some more JavaScript to do something with that data. So in my case, I grab the URL of the page where the recipe is coming from, grab the name of the recipe, and then whatever text is highlighted on the page. So, the process to add a recipe is to highlight the actual recipe, then click the Dumbwaiter icon, and all the data will be pre-populated into my Statamic new entry form.<\\/p>\\n\\n<p>Here is some example code that I am using, but the options are limitless: whatever you can do with jQuery, you can do with Dumbwaiter.<\\/p>\\n\\n<h3>Retrieve Data Code<\\/h3>\\n<pre><code>var title = jQuery(\'meta[property=\\\"og:title\\\"]\').attr(\'content\');\\nvar source = window.location.href;\\nvar img = jQuery(\'meta[property=\\\"og:image\\\"]\').attr(\'content\');\\nvar content = window.getSelection().toString();\\n\\nif(!title) {\\n\\ttitle = jQuery(\'title\').text();\\n}\\n\\nvar data = {\\n\\ttitle: title,\\n\\tsource: source,\\n\\timg: img,\\n\\tcontent: content\\n};<\\/code><\\/pre>\\n\\n<h3>Insert Data Code<\\/h3>\\n<pre><code>function makeSlug(str) { \\n\\tstr = str.replace(\\/^\\\\s+|\\\\s+$\\/g, \'\'); \\/\\/ trim\\n\\tstr = str.toLowerCase();\\n  \\n\\t\\/\\/ remove accents, swap \\u00f1 for n, etc\\n\\tvar from = \\\"\\u00e0\\u00e1\\u00e4\\u00e2\\u00e8\\u00e9\\u00eb\\u00ea\\u00ec\\u00ed\\u00ef\\u00ee\\u00f2\\u00f3\\u00f6\\u00f4\\u00f9\\u00fa\\u00fc\\u00fb\\u00f1\\u00e7\\u00b7\\/_,:;\\\";\\n\\tvar to   = \\\"aaaaeeeeiiiioooouuuunc------\\\";\\n\\tfor (var i=0, l=from.length ; i &lt; l ; i++) {\\n\\t\\tstr = str.replace(new RegExp(from.charAt(i), \'g\'), to.charAt(i));\\n\\t}\\n  \\n\\tstr = str.replace(\\/[^a-z0-9 -]\\/g, \'\') \\/\\/ remove invalid chars\\n\\t.replace(\\/\\\\s+\\/g, \'-\') \\/\\/ collapse whitespace and replace by -\\n\\t.replace(\\/-+\\/g, \'-\'); \\/\\/ collapse dashes\\n  \\n\\treturn str;\\n};\\n\\n$(\'#publish-title\').val(data.title).focus();\\nvar slug = makeSlug(data.title);\\n$(\'#publish-slug\').val(slug);\\n$(\'input[name=\\\"page[yaml][source]\\\"]\').val(data.source);\\n$(\'textarea.markItUpEditor\').val(data.content);<\\/code><\\/pre>\\n\\n<p>You can <a href=\\\"https:\\/\\/chrome.google.com\\/webstore\\/detail\\/jeeeliidcblacogbcefhcbljkllhpjdd?hl=en&gl=US\\\">download Dumbwaiter here<\\/a>, and let me know if you guys find any creative uses!<\\/p>\",\"14\":{\"old_id\":{}}}}','2014-01-19 21:51:47','2014-08-08 19:32:30','ce29445d-60e0-46b5-a561-beedadad3c17',1),(289,54,4,1,2,NULL,'{\"authorId\":\"1\",\"title\":\"\\u201cAdvanced\\u201d \\u2028Templating with ExpressionEngine\",\"slug\":\"advanced-templating-with-expressionengine\",\"postDate\":1343564283,\"expiryDate\":null,\"enabled\":\"1\",\"fields\":{\"2\":\"<p>I was luckily enough to be asked to speak at the <a href=\\\"http:\\/\\/dceers.org\\/\\\">DCEERs Day conference<\\/a> yesterday. I was asked to speak about best templating practices, which ended up being a talk about how I use <a href=\\\"http:\\/\\/devot-ee.com\\/add-ons\\/stash\\\">Stash<\\/a> and how I build custom plugins to streamline templating. It was a great day filled with discussion about ExpressionEngine, and it made me look forward to EECI even more!<\\/p>\\n\\n<script async class=\\\"speakerdeck-embed\\\" data-id=\\\"50140813a049a300020015d0\\\" data-ratio=\\\"1.3333333333333333\\\" src=\\\"\\/\\/speakerdeck.com\\/assets\\/embed.js\\\"><\\/script>\",\"14\":{\"old_id\":{}}}}','2014-01-19 21:51:47','2014-08-08 19:32:30','22837053-6318-4017-8ce4-508e9fadb79f',1),(290,56,4,1,3,NULL,'{\"authorId\":\"1\",\"title\":\"Sass & Compass:\\u2028 Never Write \\u2028Regular CSS Again\",\"slug\":\"sass-compass-never-write-regular-css-again\",\"postDate\":1343170560,\"expiryDate\":null,\"enabled\":\"1\",\"fields\":{\"2\":\"<p>I gave a presentation last week at <a href=\\\"http:\\/\\/refresh-dc.org\\/\\\">Refresh DC<\\/a> about <a href=\\\"http:\\/\\/sass-lang.com\\/\\\">Sass<\\/a> & <a href=\\\"http:\\/\\/compass-style.org\\/\\\">Compass<\\/a>. After being introduced to Sass & Compass about six months ago, I can\\u2019t imagine writing regular CSS ever again. I was a little hesitant at first, but now I can\\u2019t live without it. I posted my <a href=\\\"https:\\/\\/speakerdeck.com\\/u\\/trevor_davis\\/p\\/sass-and-compass-never-write-regular-css-again\\\">slides online<\\/a>, and <a href=\\\"https:\\/\\/github.com\\/davist11\\/refresh-dc-compass-sass-presentation\\\">here is the git repo<\\/a> with all of the code samples.<\\/p>\",\"14\":{\"old_id\":{}}}}','2014-01-19 21:51:47','2014-08-08 19:32:30','927ecb87-1294-4d96-a86f-e96b22e5c3ea',1),(291,57,4,1,2,NULL,'{\"authorId\":\"1\",\"title\":\"A Long Time Coming\",\"slug\":\"a-long-time-coming\",\"postDate\":1342474978,\"expiryDate\":null,\"enabled\":\"1\",\"fields\":{\"2\":\"<p>It&rsquo;s funny how quickly you come to hate your own site. <a href=\\\"http:\\/\\/trevordavis.net\\/blog\\/from-wordpress-to-expressionengine\\\">Almost exactly 2 years ago<\\/a>, I launched a redesigned version of my site. <strong>After maybe a year, I hated it.<\\/strong> But who has time to redo their own site? Apparently it took me 6 months to find the time to finish mine.<\\/p>\\n\\n<p>Even within those 6 months, I found things that I had started on the site that I hated. My goals were to simplify things a bit, make it responsive, and play around with Sass and Compass. I also wanted to take some of the focus off of my blog, since I really don&rsquo;t write too much on it anymore (I write almost all of my articles on the <a href=\\\"http:\\/\\/viget.com\\\">Viget Blogs<\\/a> these days).<\\/p>\\n\\n<p>Since I&rsquo;m giving 2 presentations in the next few weeks (<a href=\\\"http:\\/\\/refreshdc-july2012.eventbrite.com\\/\\\">Refresh DC<\\/a> &amp; <a href=\\\"http:\\/\\/dceers.org\\/\\\">DCEERS<\\/a>), I wanted to get my new site up. So I may have rushed a few things, but I&rsquo;m pretty happy with it. Let me know if you run into any errors.<\\/p>\",\"14\":{\"old_id\":{}}}}','2014-01-19 21:51:47','2014-08-08 19:32:30','bd75d58a-ca03-45d0-a6b0-2185ba685652',1),(294,61,4,1,2,NULL,'{\"authorId\":\"1\",\"title\":\"Is Ajax ExpressionEngine Plugin\",\"slug\":\"is-ajax-ee-plugin\",\"postDate\":1315336465,\"expiryDate\":null,\"enabled\":\"1\",\"fields\":{\"2\":\"<p>For a recent project, I needed to detect whether a request was an AJAX request or not. <a href=\\\"http:\\/\\/devot-ee.com\\/add-ons\\/mx-ajax-detect\\\">MX Ajax Detect<\\/a> already existed, but I didn&rsquo;t like that you needed the extra set of tags.<\\/p>\\n\\n<h2>Usage<\\/h2>\\n<pre><code>&#123;if &#123;exp:is_ajax&#125; == \\\"true\\\"&#125;\\n\\tOH YEAAAH\\n&#123;if:else&#125;\\n\\tOH NOOO\\n&#123;\\/if&#125;<\\/code><\\/pre>\\n\\n<h2>Download<\\/h2>\\n<p>You can find the plugin on <a href=\\\"http:\\/\\/devot-ee.com\\/add-ons\\/is-ajax\\\">Devot:ee<\\/a> and <a href=\\\"https:\\/\\/github.com\\/davist11\\/is-ajax\\\">GitHub<\\/a>.<\\/p>\",\"14\":{\"old_id\":{}}}}','2014-01-19 21:51:47','2014-08-08 19:32:30','3f21e0eb-2da3-4714-8362-0c0655d318b9',1),(296,65,4,1,2,NULL,'{\"authorId\":\"1\",\"title\":\"A Couple of Presentations\",\"slug\":\"a-couple-of-presentations\",\"postDate\":1304702687,\"expiryDate\":null,\"enabled\":\"1\",\"fields\":{\"2\":\"<p>I&rsquo;ve given a couple of presentations recently, so I thought I would share them.<\\/p>\\n\\n<h2><a href=\\\"http:\\/\\/www.slideshare.net\\/davist11\\/mee-ee-sitting-in-a-tree\\\">Mee &amp; EE: Sitting In A Tree<\\/a><\\/h2>\\n<p>An internal presentation given to all of <a href=\\\"http:\\/\\/www.viget.com\\\">Viget<\\/a> to give an overview of EE and why I love it.<\\/p>\\n\\n<div id=\\\"__ss_7867366\\\"><iframe src=\\\"http:\\/\\/www.slideshare.net\\/slideshow\\/embed_code\\/7867366?rel=0&startSlide=5\\\" width=\\\"595\\\" height=\\\"497\\\" frameborder=\\\"0\\\" marginwidth=\\\"0\\\" marginheight=\\\"0\\\" scrolling=\\\"no\\\"><\\/iframe><\\/div>\\n\\n<h2><a href=\\\"http:\\/\\/www.slideshare.net\\/davist11\\/add-some-awesomesauce\\\">Add Some Awesome-Sauce<\\/a><\\/h2>\\n<p>A presentation given to Clarksburg High School students with a supporting <a href=\\\"http:\\/\\/hp.trevordavis.net\\\">demo site<\\/a> to introduce them to some HTML5 and CSS3 features.<\\/p>\\n\\n<div id=\\\"__ss_7867300\\\"><iframe src=\\\"http:\\/\\/www.slideshare.net\\/slideshow\\/embed_code\\/7867300?rel=0&startSlide=2\\\" width=\\\"595\\\" height=\\\"497\\\" frameborder=\\\"0\\\" marginwidth=\\\"0\\\" marginheight=\\\"0\\\" scrolling=\\\"no\\\"><\\/iframe><\\/div>\",\"14\":{\"old_id\":{}}}}','2014-01-19 21:52:28','2014-08-08 19:32:30','b19eb80c-629e-428b-829d-a1c46c36ab04',1),(298,67,4,1,2,NULL,'{\"authorId\":\"1\",\"title\":\"So You Want to Use .htaccess files with MAMP?\",\"slug\":\"use-htaccess-files-with-mamp\",\"postDate\":1298278548,\"expiryDate\":null,\"enabled\":\"1\",\"fields\":{\"2\":\"<p>Well, this was easy in the older version of MAMP that I had. You would just drop them in place, and they worked. I was having a problem with something, so I thought maybe there was an updated version of MAMP that would solve the problem. Sure enough, there was. So I installed it and went along my way. Then, I went back to the local version of my site, and it was completely busted.<\\/p>\\n\\n<p>I finally tracked it down to .htaccess files being ignored. So I opened up my <em>http.conf<\\/em> file and went down to line 378, and sure enough this is what I saw:<\\/p>\\n\\n<pre><code>&lt;Directory \\/>\\n    Options Indexes FollowSymLinks\\n    AllowOverride None\\n&lt;\\/Directory><\\/code><\\/pre>\\n\\n<p>In the older version of MAMP that I had, the default for this value was <em>All<\\/em>. In order to get .htaccess files working in the new version, I just had to change <em>None<\\/em> to <em>All<\\/em>, restart the server, and everything worked normally. Just thought I would share in case anyone else runs into this problem.<\\/p>\",\"14\":{\"old_id\":{}}}}','2014-01-19 21:52:28','2014-08-08 19:32:30','ab2efeda-9f65-4ed1-b1c2-17be5b5a3607',1),(299,69,4,1,2,NULL,'{\"authorId\":\"1\",\"title\":\"ExpressionEngine Config Variables Plugin\",\"slug\":\"config-variables-plugin\",\"postDate\":1297805009,\"expiryDate\":null,\"enabled\":\"1\",\"fields\":{\"2\":\"<p>As I was in the process of moving this site into Git and having a local version, I have been trying to move as many paths as possible into the config.php. One of them included the cache path for <a href=\\\"http:\\/\\/devot-ee.com\\/add-ons\\/image-sizer\\/\\\">image sizer<\\/a>. Since the local and production paths are different, I wanted some way for them to be dynamic. In my config.php file, I am using <em>$_SERVER[\'DOCUMENT_ROOT\']<\\/em> to set the base_path. I could have enabled PHP in the template and then use the <em>$_SERVER[\'DOCUMENT_ROOT\']<\\/em>, but that seemed like a silly reason to enable PHP.<\\/p>\\n\\n<p>So I made a plugin that gives you access to everything in the $config array without having to use PHP.<\\/p>\\n\\n<h2>Usage<\\/h2>\\n\\n<pre><code>&#123;exp:config:vars value=\\\"base_path\\\"&#125;<\\/code><\\/pre>\\n\\n<p>To see all possible values, just pass in &ldquo;all&rdquo;:<\\/p>\\n\\n<pre><code>&#123;exp:config:vars value=\\\"all\\\"&#125;<\\/code><\\/pre>\\n\\n<h2>Download<\\/h2>\\n\\n<p>You can download from <a href=\\\"https:\\/\\/github.com\\/davist11\\/Config-Variables-Plugin\\\">GitHub<\\/a> or <a href=\\\"http:\\/\\/devot-ee.com\\/add-ons\\/config-variables\\/\\\">Devot-ee<\\/a>. As always, let me know if you run into any issues.<\\/p>\",\"14\":{\"old_id\":{}}}}','2014-01-19 21:52:28','2014-08-08 19:32:30','5f11bab5-d7fd-42dc-a7c0-93b9739b3890',1),(300,70,4,1,2,NULL,'{\"authorId\":\"1\",\"title\":\"URL Design\",\"slug\":\"url-design\",\"postDate\":1293702863,\"expiryDate\":null,\"enabled\":\"1\",\"fields\":{\"2\":\"<p>Great article about <a href=\\\"http:\\/\\/warpspire.com\\/posts\\/url-design\\/\\\">designing URLs<\\/a>. It really is an art and is so easy to do so wrong.<\\/p>\",\"14\":{\"old_id\":{}},\"4\":\"http:\\/\\/warpspire.com\\/posts\\/url-design\\/\"}}','2014-01-19 21:52:28','2014-08-08 19:32:30','8796ec00-7a03-4f1e-9eb1-81ffd3afc897',1),(301,71,4,1,2,NULL,'{\"authorId\":\"1\",\"title\":\"Hon-ee Pot Captcha for ExpressionEngine\",\"slug\":\"hon-ee-pot-captcha-expressionengine\",\"postDate\":1293607811,\"expiryDate\":null,\"enabled\":\"1\",\"fields\":{\"2\":\"<p>I have a confession to make: <em>I hate captcha<\\/em>. But on the other hand, spam is one of the most frustrating issues ever. So with that being said, I am a big fan of <a href=\\\"http:\\/\\/haacked.com\\/archive\\/2007\\/09\\/11\\/honeypot-captcha.aspx\\\">Honeypot Captcha<\\/a>.<\\/p>\\n\\n<p>I couldn&rsquo;t find any ExpressionEngine addons that added honeypot captcha functionality for both the comment form and the <a href=\\\"http:\\/\\/www.solspace.com\\/software\\/detail\\/freeform\\/\\\">Freeform<\\/a> module, so I decided to go ahead and create one.<\\/p>\\n\\n<h2>Basic Functionality<\\/h2>\\n<p>This extension validates the EE comment form and Freeform forms to make sure a field that is hidden with CSS is left empty.<\\/p>\\n\\n<h2>Getting Started<\\/h2>\\n<ul>\\n  <li><a href=\\\"https:\\/\\/github.com\\/davist11\\/Hon-ee-Pot-Captcha\\\">Download Hon-ee Pot Captcha<\\/a><\\/li>\\n  <li>Unzip the folder and copy the <em>honeepot<\\/em> folder into your \\/system\\/expressionengine\\/third_party\\/ directory.<\\/li>\\n  <li>Go to Add-ons &rarr; Extensions and &ldquo;Enable extension&rdquo;.<\\/li>\\n  <li>You can customize the field name for the honey pot field and the message a user receives if the field is filled in by going to the extension settings.<\\/li>\\n<\\/ul>\\n\\n<h3>Setup<\\/h3>\\n<p>In the Freeform module, go to Fields &rarr; Create a New Field. Now create a field with the field name matching the field name in the Hon-ee Pot Captcha settings. The default is <em>honeepot<\\/em>.<\\/p>\\n\\n<p>Now in your form, add the honey pot field:<\\/p>\\n\\n<pre>&lt;li class=\\\"screen-reader\\\">\\n  &lt;label for=\\\"honeepot\\\">Don\'t put anything here&lt;\\/label>\\n  &lt;input type=\\\"text\\\" name=\\\"honeepot\\\" id=\\\"honeepot\\\" \\/>\\n&lt;\\/li><\\/pre>\\n\\n<p>In my CSS, I have a class to move things off of the page:<\\/p>\\n<pre>.screen-reader {\\n  display: block !important;\\n  left: -9999px !important;\\n  position: absolute !important;\\n  top: -9999px !important;\\n}<\\/pre>\\n\\n<p>You can add the same form field to your comment forms as well.<\\/p>\\n\\n<h2>That is all<\\/h2>\\n<p>Hopefully this addition will help to combat some of the spam contact form submissions and comments (even though they get caught by <a href=\\\"http:\\/\\/loweblog.com\\/software\\/low-nospam\\/\\\">Low NoSpam<\\/a>). You can <a href=\\\"https:\\/\\/github.com\\/davist11\\/Hon-ee-Pot-Captcha\\\">download the Hon-ee Pot Captcha extension on Github<\\/a>. Let me know if you run into any issues.<\\/p>\",\"14\":{\"old_id\":{}}}}','2014-01-19 21:52:28','2014-08-08 19:32:30','0173da92-7165-42ad-a998-600d1cdb3370',1),(302,72,4,1,2,NULL,'{\"authorId\":\"1\",\"title\":\"Custom File Inputs with a Bit of jQuery\",\"slug\":\"custom-file-inputs-jquery\",\"postDate\":1290455526,\"expiryDate\":null,\"enabled\":\"1\",\"fields\":{\"2\":\"<p>I needed to create a custom file input when building <a href=\\\"http:\\/\\/www.puma.com\\/cleverlittlebag\\\">Clever Little Bag<\\/a>, so I&rsquo;ve <a href=\\\"http:\\/\\/www.viget.com\\/inspire\\/custom-file-inputs-with-a-bit-of-jquery\\/\\\">written a tutorial on the Inspire blog<\\/a> discussing that process.<\\/p>\",\"14\":{\"old_id\":{}},\"4\":\"http:\\/\\/www.viget.com\\/inspire\\/custom-file-inputs-with-a-bit-of-jquery\\/\"}}','2014-01-19 21:52:28','2014-08-08 19:32:30','1a9a7b42-c64a-46f1-94c7-96d7af09012f',1),(304,74,4,1,2,NULL,'{\"authorId\":\"1\",\"title\":\"jQuery One Page Navigation Plugin\",\"slug\":\"jquery-one-page-navigation-plugin\",\"postDate\":1285533314,\"expiryDate\":null,\"enabled\":\"1\",\"fields\":{\"2\":\"<p>When appropriate, I am a fan of the one-page sites. I really like the ones that add smooth scrolling and highlight the navigation depending upon which part of the page you have scrolled to. Here are a few examples: <a href=\\\"http:\\/\\/www.brizk.com\\/\\\">Brizk Design<\\/a> and <a href=\\\"http:\\/\\/crushlovely.com\\/\\\">Crush + Lovely<\\/a>. I finally have a freelance project where a one-page site makes sense, so I needed to write the JavaScript to make the navigation work how I wanted.<\\/p>\\n\\n<p>I wanted the page to scroll smoothly when the navigation was clicked, so I used the <a href=\\\"http:\\/\\/flesler.blogspot.com\\/2007\\/10\\/jqueryscrollto.html\\\">jQuery ScrollTo plugin<\\/a>. I also wanted the page to automatically highlight the correct navigation section depending upon which section was scrolled to, and that was where I added my custom code.<\\/p>\\n\\n<p>If you want to skip ahead, you can <a href=\\\"http:\\/\\/trevordavis.net\\/play\\/jquery-one-page-nav\\/\\\">check out the demo<\\/a> and <a href=\\\"http:\\/\\/github.com\\/davist11\\/jQuery-One-Page-Nav\\\">download the plugin from GitHub<\\/a>.<\\/p>\\n\\n<h2>The Markup<\\/h2>\\n<p>I started with an unordered list for the navigation and a bunch of sections:<\\/p>\\n<pre><code>&lt;ul id=\\\"nav\\\">\\n  &lt;li class=\\\"current\\\">&lt;a href=\\\"#section-1\\\">Section 1&lt;\\/a>&lt;\\/li>\\n  &lt;li>&lt;a href=\\\"#section-2\\\">Section 2&lt;\\/a>&lt;\\/li>\\n  &lt;li\\\">&lt;a href=\\\"#section-3\\\">Section 3&lt;\\/a>&lt;\\/li>\\n&lt;\\/ul>\\n\\n&lt;div id=\\\"section-1\\\">\\n  &lt;strong>Section 1&lt;\\/strong>\\n  &lt;p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor\\n  incididunt ut labore et dolore magna aliqua.&lt;\\/p>\\n&lt;\\/div>\\n&lt;div id=\\\"section-2\\\">\\n  &lt;strong>Section 2&lt;\\/strong>\\n  &lt;p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor \\n  incididunt ut labore et dolore magna aliqua.&lt;\\/p>\\n&lt;\\/div>\\n&lt;div id=\\\"section-3\\\">\\n  &lt;strong>Section 3&lt;\\/strong>\\n  &lt;p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor \\n  incididunt ut labore et dolore magna aliqua.&lt;\\/p>\\n&lt;\\/div><\\/code><\\/pre>\\n\\n<h2>The JavaScript<\\/h2>\\n<p>Then, I added jQuery, the ScrollTo plugin, and my plugin to the page:<\\/p>\\n<pre><code>&lt;script src=\\\"jquery.js\\\">&lt;\\/script>\\n&lt;script src=\\\"jquery.scrollTo.js\\\">&lt;\\/script>\\n&lt;script src=\\\"jquery.nav.min.js\\\">&lt;\\/script><\\/code><\\/pre>\\n\\n<p>Finally, I just need to call my plugin on the navigation:<\\/p>\\n<pre><code>$(document).ready(function() {\\n  $(\'#nav\').onePageNav();\\n});<\\/code><\\/pre>\\n\\n<h3>Options<\\/h3>\\n<p>There are a few options for this plugin:<\\/p>\\n<ul>\\n<li>\\n<h4>currentClass: \'current\'<\\/h4>\\nClass to add to the list item when the navigation item is selected\\n<\\/li>\\n<li>\\n<h4>changeHash: false<\\/h4>\\nIf you want the hash to change when the user clicks on the navigation, change this to <strong>true<\\/strong>\\n<\\/li>\\n<li>\\n<h4>scrollSpeed: 750<\\/h4>\\nSpeed to scroll the page when the navigation is clicked\\n<\\/li>\\n<\\/ul>\\n\\n<p>And that&rsquo;s it. <a href=\\\"http:\\/\\/trevordavis.net\\/play\\/jquery-one-page-nav\\/\\\">Check out the demo<\\/a> and <a href=\\\"http:\\/\\/github.com\\/davist11\\/jQuery-One-Page-Nav\\\">download the plugin from GitHub<\\/a>.<\\/p>\",\"14\":{\"old_id\":{}}}}','2014-01-19 21:52:28','2014-08-08 19:32:30','de79f09f-b61a-4c0b-97ad-c773cc2d1de9',1),(305,76,4,1,2,NULL,'{\"authorId\":\"1\",\"title\":\"How I Got the Most Out of An Event Apart\",\"slug\":\"most-out-of-an-event-apart\",\"postDate\":1285025124,\"expiryDate\":null,\"enabled\":\"1\",\"fields\":{\"2\":\"<p>I had the pleasure of attending <a href=\\\"http:\\/\\/aneventapart.com\\/2010\\/dc\\/\\\">An Event Apart<\\/a> last week when they finally made it to DC. This was the third time I had atended An Event Apart conference, but I feel like I absorbed the most from this one.<\\/p>\\n\\n<h2>Leave the Laptop at Home<\\/h2>\\n<p>The last two times I attended, I brought my laptop and took notes during the presentations. Sure I learned some things, but I think other things slipped by me as I was typing. This time, I brought a pencil &amp; notebook, and an iPad that was so graciously given to me as a <a href=\\\"http:\\/\\/www.viget.com\\/\\\">Viget<\\/a> 10th anniversary gift.<\\/p>\\n<p>Now, I realize that not everyone has the luxury of choosing between a laptop and an iPad, but I really only used the iPad for checking email and Twitter during breaks, so I definitely could have gone without that. I really enjoyed just sitting, absorbing, and sporadically jotting down notes when I thought it was necessary. You&rsquo;ve got the slides available to download, so don&rsquo;t feel like you have to write down everything that is being presented to you.<\\/p>\\n\\n<h2>Focus on the Speakers<\\/h2>\\n<p>I know <a href=\\\"http:\\/\\/afeedapart.com\\/\\\">A Feed Apart<\\/a> is really cool, but do you really want to spend your time on Twitter while speakers are presenting? Try checking A Feed Apart during the breaks to catch up on what everyone thought about the speaker. Leave your phone alone and stop checking your email. You paid good money for the conference, so pay attention.<\\/p>\\n\\n<h2>Stay Sober<\\/h2>\\n<p>I didn&rsquo;t even make it to the opening night party this year because Thursdays are my basketball night, but I heard about numerous people who got drunk at the party. Really people? Aren&rsquo;t we all adults now? Didn&rsquo;t we pay good money for this conference? If you want to go re-live your college days, don&rsquo;t waste $1000 to do it. So go to the party and mingle, but please don&rsquo;t get sloppy drunk; we really don&rsquo;t want to hear about it the next day of the conference.<\\/p>\\n\\n<h2>Just Enjoy Yourself<\\/h2>\\n<p>You are surrounded by people just like you for two days; it&rsquo;s fantastic. We even had lunch the first day with <a href=\\\"http:\\/\\/twitter.com\\/jasonsantamaria\\\">Jason Santa Maria<\\/a> and <a href=\\\"http:\\/\\/twitter.com\\/adactio\\\">Jeremy Keith<\\/a>, how badass is that?<\\/p>\\n\\n<p>Much thanks goes to <a href=\\\"http:\\/\\/twitter.com\\/zeldman\\\">Zeldman<\\/a> &amp; <a href=\\\"http:\\/\\/twitter.com\\/meyerweb\\\">Eric Meyer<\\/a> for organizing such a fantastic conference, and I look forward to going back again <a href=\\\"http:\\/\\/aneventapart.com\\/news\\/2010\\/09\\/02\\/announcing-our-2011-schedule\\/\\\">next year<\\/a>.<\\/p>\",\"14\":{\"old_id\":{}}}}','2014-01-19 21:52:28','2014-08-08 19:32:30','8d6cc1c8-d44e-4be3-a7b5-4d4682243bf0',1),(306,77,4,1,2,NULL,'{\"authorId\":\"1\",\"title\":\"Find Your Own Starting Point\",\"slug\":\"find-your-own-starting-point\",\"postDate\":1284073728,\"expiryDate\":null,\"enabled\":\"1\",\"fields\":{\"2\":\"<p><a href=\\\"http:\\/\\/html5boilerplate.com\\/\\\">Everyone<\\/a> and <a href=\\\"http:\\/\\/html5reset.org\\/\\\">their mother<\\/a> has been releasing their HTML5 &ldquo;boilerplates&rdquo; for others to use. There is no chance that I would just take such a set of files and start building a site. You&rsquo;ve got to find a good starting place for yourself, not someone else&rsquo;s.<\\/p>\\n\\n<p>I have been starting from a similar point for everything that I build now, and I just finally put it out on <a href=\\\"http:\\/\\/github.com\\/davist11\\/Starter-Template\\\">GitHub<\\/a>. I&rsquo;m not doing this because I want someone to use this template to start a site; I&rsquo;m doing this so that I can have somewhere to always access this set of files.<\\/p>\\n\\n<p>With that being said, I would urge everyone to have their own starting point. You know your own coding patterns best, so just figure out the best place for yourself to start from. Sure, you can learn from everyone else&rsquo;s, but it is much more beneficial to have your own. Mine is super basic, so feel free to start from mine and modify it to suit your needs.<\\/p>\\n\\n<p><a href=\\\"http:\\/\\/github.com\\/davist11\\/Starter-Template\\\">See my starting point on GitHub<\\/a> and feel free to fork away and modify.<\\/p>\\n\\n\\n\",\"14\":{\"old_id\":{}}}}','2014-01-19 21:52:28','2014-08-08 19:32:30','96c63a89-2afa-4d8c-a1fb-71719bc7d41b',1),(307,78,4,1,2,NULL,'{\"authorId\":\"1\",\"title\":\"A Couple of EE 2.x Addons\",\"slug\":\"ee-2x-addons\",\"postDate\":1282000409,\"expiryDate\":null,\"enabled\":\"1\",\"fields\":{\"2\":\"<p>It&rsquo;s no secret that I&rsquo;m a big <a href=\\\"http:\\/\\/expressionengine.com\\/\\\">ExpressionEngine<\\/a> fan. I&rsquo;m really excited to get started using EE 2.x on projects, but the one thing holding me back is add-ons. I&rsquo;ve never written an add-on, but I use tons of add-ons that others have written.  With that being said, I ended up porting over a couple of add-ons to work with EE 2.x:<\\/p>\\n\\n<ul>\\n  <li>\\n    <h2>Scroll to Comment<\\/h2>\\n    First, I modified Matthew Pennell&rsquo;s <a href=\\\"http:\\/\\/devot-ee.com\\/add-ons\\/scroll-to-comment\\/\\\">Scroll to Comment Extension<\\/a>. When a user submits a comment, they are scrolled down to the newly added comment. You can find the <a href=\\\"http:\\/\\/github.com\\/davist11\\/EE-Scroll-To-Comment\\\">EE 2.x compatible version on GitHub<\\/a>.\\n  <\\/li>\\n  <li>\\n    <h2>EE Default CP Tabs<\\/h2>\\n    We loved using <a href=\\\"http:\\/\\/devot-ee.com\\/add-ons\\/lg-add-cp-tabs\\/\\\">LG Add CP Tabs<\\/a> in order to add a tab for <a href=\\\"http:\\/\\/buildwithstructure.com\\/\\\">Structure<\\/a> for all users. As we were getting our EE 2.x template site setup, we noticed that this extension wasn&rsquo;t converted yet. I made a slight modification so that you only get one textbox to add tabs instead of multiple boxes broken out by member group. You can find <a href=\\\"http:\\/\\/github.com\\/davist11\\/EE-Default-CP-Tabs\\\">my EE 2.x compatible version on GitHub<\\/a>.\\n  <\\/li>\\n<\\/ul>\\n<p>My hope is to eventually get this site converted over to EE 2.x, and I think the only add-on holding me back is the <a href=\\\"http:\\/\\/devot-ee.com\\/add-ons\\/eeflickr\\/\\\">eeFlickr Module<\\/a>.<\\/p>\",\"14\":{\"old_id\":{}}}}','2014-01-19 21:52:29','2014-08-08 19:32:30','d4ee1e86-3914-4af7-89dd-20a15b9714f4',1),(309,80,4,1,2,NULL,'{\"authorId\":\"1\",\"title\":\"jQuery Show Password Plugin\",\"slug\":\"jquery-show-password-plugin\",\"postDate\":1281354461,\"expiryDate\":null,\"enabled\":\"1\",\"fields\":{\"2\":\"<p>In a recent project at work, I had to add in functionality so that a user could see what they had typed in a password field when they click a link. One would think that it is as easy as using JavaScript to change the type attribute, but that of course doesn&rsquo;t work in IE. Virtually all of the jQuery plugins that I found used a checkbox instead of a link to toggle between the two states. So, I set out to write my own.<\\/p>\\n\\n<p>If you just want to get to the code, you can <a href=\\\"http:\\/\\/github.com\\/davist11\\/jQuery-Show-Password\\\">download the plugin from GitHub<\\/a> or <a href=\\\"http:\\/\\/trevordavis.net\\/play\\/jquery-show-password\\/\\\">check out the demo<\\/a>.<\\/p>\\n\\n<p>This plugin works by adding a text field that takes the value of what is typed into the password field. Then, when the link is clicked the password field is hidden and the text field is shown.<\\/p>\\n\\n<h2>The Markup<\\/h2>\\n<p>In the demo, we&rsquo;ll just start with a simple form:<\\/p>\\n\\n<pre><code>&lt;form action=\\\"#\\\">\\n\\t&lt;ol class=\\\"forms\\\">\\n\\t\\t&lt;li>\\n\\t\\t\\t&lt;label for=\\\"username\\\">Username&lt;\\/label>\\n\\t\\t\\t&lt;input type=\\\"text\\\" id=\\\"username\\\" \\/>\\n\\t\\t&lt;\\/li>\\n\\t\\t&lt;li>\\n\\t\\t\\t&lt;label for=\\\"password\\\">Password&lt;\\/label>\\n\\t\\t\\t&lt;input type=\\\"password\\\" id=\\\"password\\\" class=\\\"password\\\" \\/>\\n\\t\\t&lt;\\/li>\\n\\t\\t&lt;li class=\\\"buttons\\\">\\n\\t\\t\\t&lt;button type=\\\"submit\\\">Submit&lt;\\/button>\\n\\t\\t&lt;\\/li>\\n\\t&lt;\\/ol>\\n&lt;\\/form><\\/code><\\/pre>\\n\\n<h2>Add a Little Style<\\/h2>\\n<p>In the design that I was working on, the link to show the password actually sat on top of the password input field, so we just need to add a little bit of CSS to make that happen:<\\/p>\\n\\n<pre><code>.forms li {\\n\\tposition: relative;\\n}\\n.show-password-link {\\n\\tdisplay: block;\\n\\tposition: absolute;\\n\\tz-index: 11;\\n}\\n.password-showing {\\n\\tposition: absolute;\\n\\tz-index: 10;\\n}<\\/code><\\/pre>\\n\\n<p>By default, the link to show the password has the class of <em>show-password-link<\\/em>, but that can be changed in the plugin options. Also, the <em>password-showing<\\/em> class is added to the text field that is used to show the password, but again, that can be changed via the plugin options.<\\/p>\\n\\n<h2>And Now, JavaScript Takes Over<\\/h2>\\n<p>To get started, you will need to include <a href=\\\"http:\\/\\/jquery.com\\/\\\">jQuery<\\/a> and <a href=\\\"http:\\/\\/github.com\\/davist11\\/jQuery-Show-Password\\\">my plugin<\\/a>:\\n\\n<pre><code>&lt;script type=\\\"text\\/javascript\\\" src=\\\"scripts\\/jquery.js\\\">&lt;\\/script>\\n&lt;script type=\\\"text\\/javascript\\\" src=\\\"scripts\\/jquery.showPassword.min.js\\\">&lt;\\/script><\\/code><\\/pre>\\n\\n<p>Then, you can instantiate it like this:<\\/p>\\n\\n<pre><code>$(document).ready(function() {\\n\\t$(\':password\').showPassword();\\n});<\\/code><\\/pre>\\n\\n<h3>Options<\\/h3>\\n\\n<ul>\\n  <li>\\n    <h4>linkClass: \'show-password-link\'<\\/h4>\\n    Class for the toggle link\\n  <\\/li>\\n  <li>\\n    <h4>linkText: \'Show\'<\\/h4>\\n    Text for the toggle link\\n  <\\/li>\\n  <li>\\n    <h4>showPasswordLinkText: \'Hide\'<\\/h4>\\n    Text for the toggle link when password is not masked\\n  <\\/li>\\n  <li>\\n    <h4>showPasswordInputClass: \'password-showing\'<\\/h4>\\n    Class for the text input that will show the password\\n  <\\/li>\\n  <li>\\n    <h4>linkRightOffset: 0<\\/h4>\\n    Offset for the link from the right of parent\\n  <\\/li>\\n  <li>\\n    <h4>linkTopOffset: 0<\\/h4>\\n    Offset for the link from the top of parent\\n  <\\/li>\\n<\\/ul>\\n\\n<p>So there you have it. <a href=\\\"http:\\/\\/trevordavis.net\\/play\\/jquery-show-password\\/\\\">Check out the demo<\\/a> and <a href=\\\"http:\\/\\/github.com\\/davist11\\/jQuery-Show-Password\\\">download the plugin from GitHub<\\/a>.<\\/p>\",\"14\":{\"old_id\":{}}}}','2014-01-19 21:52:29','2014-08-08 19:32:30','3af66c55-4ab2-4fb4-988a-eea91fe87897',1),(310,81,4,1,2,NULL,'{\"authorId\":\"1\",\"title\":\"jQuery Simple Validation Plugin\",\"slug\":\"jquery-simple-validation-plugin\",\"postDate\":1279674046,\"expiryDate\":null,\"enabled\":\"1\",\"fields\":{\"2\":\"<p>I find that I end up consistently adding form validation to sites, and for some reason, I never made a plugin out of it. I feel like every jQuery validation plugin that I look at is way too bloated for what I really need, so I finally whipped up a simple validation plugin that comes in at about 1.5kb.<\\/p>\\n<p>I tried to keep it really simple with this plugin: just check to see if a field that has been marked as required is not empty and check to see if an email address is valid.<\\/p>\\n<p>If you want to skip ahead, <a href=\\\"http:\\/\\/trevordavis.net\\/play\\/jQuery-Simple-Validate\\/\\\">Check out the demo<\\/a> and <a href=\\\"http:\\/\\/github.com\\/davist11\\/jQuery-Simple-Validate\\\">download the plugin from GitHub<\\/a>.<\\/p>\\n\\n<h2>Start with the Markup<\\/h2>\\n<p>To get started, I would always start with a simple form marked up in an ordered list:<\\/p>\\n\\n<pre><code>&lt;form action=\\\"thanks.htm\\\" method=\\\"post\\\">\\n\\t&lt;ol class=\\\"forms\\\">\\n\\t\\t&lt;li>\\n\\t\\t\\t&lt;label for=\\\"name\\\">&lt;em class=\\\"required\\\">*&lt;\\/em> Name&lt;\\/label>\\n\\t\\t\\t&lt;input type=\\\"text\\\" name=\\\"name\\\" id=\\\"name\\\" \\/>\\n\\t\\t&lt;\\/li>\\n\\t\\t&lt;li>\\n\\t\\t\\t&lt;label for=\\\"email\\\">&lt;em class=\\\"required\\\">*&lt;\\/em> Email&lt;\\/label>\\n\\t\\t\\t&lt;input type=\\\"text\\\" name=\\\"email\\\" id=\\\"email\\\" \\/>\\n\\t\\t&lt;\\/li>\\n\\t\\t&lt;li>\\n\\t\\t\\t&lt;label for=\\\"website\\\">Website&lt;\\/label>\\n\\t\\t\\t&lt;input type=\\\"text\\\" name=\\\"website\\\" id=\\\"website\\\" \\/>\\n\\t\\t&lt;\\/li>\\n\\t\\t&lt;li>\\n\\t\\t\\t&lt;label for=\\\"comment\\\">&lt;em class=\\\"required\\\">*&lt;\\/em> Comment&lt;\\/label>\\n\\t\\t\\t&lt;textarea name=\\\"comment\\\" id=\\\"comment\\\">&lt;\\/textarea>\\n\\t\\t&lt;\\/li>\\n\\t\\t&lt;li class=\\\"buttons\\\">&lt;button type=\\\"submit\\\">Submit&lt;\\/button>&lt;\\/li>\\n\\t&lt;\\/ol>\\n&lt;\\/form><\\/code><\\/pre>\\n\\n<p>Then, I need some way to denote which fields should be validated. The HTML5 required attribute, just isn&rsquo;t supported well enough to use, so all that is needed is to add the class of <strong>required<\\/strong> to each field that needs to be validated.<\\/p>\\n\\n<pre><code>&lt;form action=\\\"thanks.htm\\\" method=\\\"post\\\">\\n\\t&lt;ol class=\\\"forms\\\">\\n\\t\\t&lt;li>\\n\\t\\t\\t&lt;label for=\\\"name\\\">&lt;em class=\\\"required\\\">*&lt;\\/em> Name&lt;\\/label>\\n\\t\\t\\t&lt;input type=\\\"text\\\" name=\\\"name\\\" id=\\\"name\\\" <strong>class=\\\"required\\\"<\\/strong> \\/>\\n\\t\\t&lt;\\/li>\\n\\t\\t&lt;li>\\n\\t\\t\\t&lt;label for=\\\"email\\\">&lt;em class=\\\"required\\\">*&lt;\\/em> Email&lt;\\/label>\\n\\t\\t\\t&lt;input type=\\\"text\\\" name=\\\"email\\\" id=\\\"email\\\" <strong>class=\\\"required\\\"<\\/strong> \\/>\\n\\t\\t&lt;\\/li>\\n\\t\\t&lt;li>\\n\\t\\t\\t&lt;label for=\\\"website\\\">Website&lt;\\/label>\\n\\t\\t\\t&lt;input type=\\\"text\\\" name=\\\"website\\\" id=\\\"website\\\" \\/>\\n\\t\\t&lt;\\/li>\\n\\t\\t&lt;li>\\n\\t\\t\\t&lt;label for=\\\"comment\\\">&lt;em class=\\\"required\\\">*&lt;\\/em> Comment&lt;\\/label>\\n\\t\\t\\t&lt;textarea name=\\\"comment\\\" id=\\\"comment\\\" <strong>class=\\\"required\\\"<\\/strong>>&lt;\\/textarea>\\n\\t\\t&lt;\\/li>\\n\\t\\t&lt;li class=\\\"buttons\\\">&lt;button type=\\\"submit\\\">Submit&lt;\\/button>&lt;\\/li>\\n\\t&lt;\\/ol>\\n&lt;\\/form><\\/code><\\/pre>\\n\\n<p>Since I have an email field, I also need to add the class of <strong>email<\\/strong> to the email field:<\\/p>\\n\\n<pre><code>&lt;form action=\\\"thanks.htm\\\" method=\\\"post\\\">\\n\\t&lt;ol class=\\\"forms\\\">\\n\\t\\t&lt;li>\\n\\t\\t\\t&lt;label for=\\\"name\\\">&lt;em class=\\\"required\\\">*&lt;\\/em> Name&lt;\\/label>\\n\\t\\t\\t&lt;input type=\\\"text\\\" name=\\\"name\\\" id=\\\"name\\\" class=\\\"required\\\" \\/>\\n\\t\\t&lt;\\/li>\\n\\t\\t&lt;li>\\n\\t\\t\\t&lt;label for=\\\"email\\\">&lt;em class=\\\"required\\\">*&lt;\\/em> Email&lt;\\/label>\\n\\t\\t\\t&lt;input type=\\\"text\\\" name=\\\"email\\\" id=\\\"email\\\" class=\\\"required <strong>email<\\/strong>\\\" \\/>\\n\\t\\t&lt;\\/li>\\n\\t\\t&lt;li>\\n\\t\\t\\t&lt;label for=\\\"website\\\">Website&lt;\\/label>\\n\\t\\t\\t&lt;input type=\\\"text\\\" name=\\\"website\\\" id=\\\"website\\\" \\/>\\n\\t\\t&lt;\\/li>\\n\\t\\t&lt;li>\\n\\t\\t\\t&lt;label for=\\\"comment\\\">&lt;em class=\\\"required\\\">*&lt;\\/em> Comment&lt;\\/label>\\n\\t\\t\\t&lt;textarea name=\\\"comment\\\" id=\\\"comment\\\" class=\\\"required\\\">&lt;\\/textarea>\\n\\t\\t&lt;\\/li>\\n\\t\\t&lt;li class=\\\"buttons\\\">&lt;button type=\\\"submit\\\">Submit&lt;\\/button>&lt;\\/li>\\n\\t&lt;\\/ol>\\n&lt;\\/form><\\/code><\\/pre>\\n\\n<p>I also want to tell my plugin which forms to validate, so I&rsquo;ll also add a class to the form itself:<\\/p>\\n\\n<pre><code>&lt;form action=\\\"thanks.htm\\\" method=\\\"post\\\" <strong>class=\\\"required-form\\\"<\\/strong>>\\n\\t&lt;ol class=\\\"forms\\\">\\n\\t\\t&lt;li>\\n\\t\\t\\t&lt;label for=\\\"name\\\">&lt;em class=\\\"required\\\">*&lt;\\/em> Name&lt;\\/label>\\n\\t\\t\\t&lt;input type=\\\"text\\\" name=\\\"name\\\" id=\\\"name\\\" class=\\\"required\\\" \\/>\\n\\t\\t&lt;\\/li>\\n\\t\\t&lt;li>\\n\\t\\t\\t&lt;label for=\\\"email\\\">&lt;em class=\\\"required\\\">*&lt;\\/em> Email&lt;\\/label>\\n\\t\\t\\t&lt;input type=\\\"text\\\" name=\\\"email\\\" id=\\\"email\\\" class=\\\"required email\\\" \\/>\\n\\t\\t&lt;\\/li>\\n\\t\\t&lt;li>\\n\\t\\t\\t&lt;label for=\\\"website\\\">Website&lt;\\/label>\\n\\t\\t\\t&lt;input type=\\\"text\\\" name=\\\"website\\\" id=\\\"website\\\" \\/>\\n\\t\\t&lt;\\/li>\\n\\t\\t&lt;li>\\n\\t\\t\\t&lt;label for=\\\"comment\\\">&lt;em class=\\\"required\\\">*&lt;\\/em> Comment&lt;\\/label>\\n\\t\\t\\t&lt;textarea name=\\\"comment\\\" id=\\\"comment\\\" class=\\\"required\\\">&lt;\\/textarea>\\n\\t\\t&lt;\\/li>\\n\\t\\t&lt;li class=\\\"buttons\\\">&lt;button type=\\\"submit\\\">Submit&lt;\\/button>&lt;\\/li>\\n\\t&lt;\\/ol>\\n&lt;\\/form><\\/code><\\/pre>\\n\\n<h2>It&rsquo;s JavaScript Time<\\/h2>\\n<p>Get started by including <a href=\\\"http:\\/\\/jquery.com\\/\\\">jQuery<\\/a> and <a href=\\\"http:\\/\\/github.com\\/davist11\\/jQuery-Simple-Validate\\\">my Simple Validate plugin<\\/a>. Then, include them on the page:<\\/p>\\n\\n<pre><code>&lt;script type=\\\"text\\/javascript\\\" src=\\\"scripts\\/jquery.js\\\">&lt;\\/script>\\n&lt;script type=\\\"text\\/javascript\\\" src=\\\"scripts\\/jquery.simpleValidate.min.js\\\">&lt;\\/script><\\/code><\\/pre>\\n\\n<p>Now, I just need to call my plugin on any form that has required fields:<\\/p>\\n<pre><code>$(document).ready(function() {\\n\\t$(\'form.required-form\').simpleValidate();\\n});<\\/code><\\/pre>\\n\\n<p>Just like that, the form validation will work, but I want to customize a few of the options. First, I want to change the error element to use an &lt;em> tag instead of a &lt;strong> tag:<\\/p>\\n\\n<pre><code>$(document).ready(function() {\\n\\t$(\'form.required-form\').simpleValidate(<strong>{\\n\\t\\terrorElement: \'em\'\\n\\t}<\\/strong>);\\n});<\\/code><\\/pre>\\n\\n<p>Then, maybe I decide that I want to submit the form via AJAX. There is no need to add that kind of functionality into the plugin, AJAX is so easy with jQuery. So I just need to tell the plugin that I&rsquo;m going to submit the form with AJAX, and then pass in my callback function which will fire once the form is submitted with no errors:<\\/p>\\n\\n<pre><code>$(document).ready(function() {\\n\\t$(\'form.required-form\').simpleValidate({\\n\\t\\terrorElement: \'em\',\\n\\t\\t<strong>ajaxRequest: true,\\n\\t\\tcompleteCallback: function($el) {\\n\\t\\t\\tvar formData = $el.serialize();\\n\\t\\t\\t\\/\\/Do AJAX request with formData variable\\n\\t\\t}<\\/strong>\\n\\t});\\n});<\\/code><\\/pre>\\n\\n<h3>Options<\\/h3>\\n<p>Here are all of the available options for the plugin:<\\/p>\\n<ul>\\n\\t<li><h4>errorClass: \'error\'<\\/h4> Class for the error message text<\\/li>\\n\\t<li><h4>errorText: \'{label} is a required field.\'<\\/h4> Structure for the error message text, {label} will be replaced with the associated label text<\\/li>\\n\\t<li><h4>emailErrorText: \'Please enter a valid {label}\'<\\/h4> Structure for the email error message text, {label} will be replaced with the associated label text<\\/li>\\n\\t<li><h4>errorElement: \'strong\'<\\/h4> Element to use for the error message text<\\/li>\\n\\t<li><h4>removeLabelChar: \'*\'<\\/h4> If there is an extra character in the label to denote a required field, strip it out<\\/li>\\n\\t<li><h4>inputErrorClass: \'\'<\\/h4> Class to add to an input when it is marked as having an error<\\/li>\\n\\t<li><h4>completeCallback: \'\'<\\/h4> Function to call once the form is error-free<\\/li>\\n\\t<li><h4>ajaxRequest: false<\\/h4> If you don\'t want to use the default form action and want to submit it via AJAX \\n<\\/ul>\\n\\n<p><a href=\\\"http:\\/\\/trevordavis.net\\/play\\/jQuery-Simple-Validate\\/\\\">Check out the demo<\\/a> and <a href=\\\"http:\\/\\/github.com\\/davist11\\/jQuery-Simple-Validate\\\">download the plugin from GitHub<\\/a>. Let me know if you run into any bugs or have any feature requests.<\\/p>\",\"14\":{\"old_id\":{}}}}','2014-01-19 21:52:29','2014-08-08 19:32:30','7974c870-f01a-445e-9e19-a6af95fa96d7',1),(311,82,4,1,2,NULL,'{\"authorId\":\"1\",\"title\":\"My Long Journey from WordPress to ExpressionEngine\",\"slug\":\"from-wordpress-to-expressionengine\",\"postDate\":1278809759,\"expiryDate\":null,\"enabled\":\"1\",\"fields\":{\"2\":\"<p>About the time I started my new job at <a href=\\\"http:\\/\\/www.viget.com\\/\\\">Viget Labs<\\/a> in December 2009, I decided that it was time to start working on a redesigned website. This redesign was a chance for me to play around with some of the new CSS3 properties, @font-face, &amp; jQuery.<\\/p>\\n\\n<p>My first three designs have also been very white, so I wanted to try something a little different.<\\/p>\\n<img src=\\\"http:\\/\\/trevordavis.net\\/uploads\\/images\\/content\\/v1.jpg\\\" alt=\\\"Version 1\\\" class=\\\"centered\\\" width=\\\"630\\\" height=\\\"320\\\" \\/>\\n<img src=\\\"http:\\/\\/trevordavis.net\\/uploads\\/images\\/content\\/v2.jpg\\\" alt=\\\"Version 2\\\" class=\\\"centered\\\" width=\\\"630\\\" height=\\\"320\\\" \\/>\\n<img src=\\\"http:\\/\\/trevordavis.net\\/uploads\\/images\\/content\\/v3.jpg\\\" alt=\\\"Version 3\\\" class=\\\"centered\\\" width=\\\"630\\\" height=\\\"320\\\" \\/>\\n\\n<p>I wanted to go with a dark background, and I wanted to be able to change the feel of the site very easily. So by changing the background color in the stylesheet, I can completely change how the site feels. Check it out with <a href=\\\"#ad1010\\\" class=\\\"color-change\\\">red<\\/a>, <a href=\\\"#10ad53\\\" class=\\\"color-change\\\">green<\\/a>, or <a href=\\\"#7d1baa\\\" class=\\\"color-change\\\">purple<\\/a>. All that is done by just simply changing the background color on the body.<\\/p>\\n\\n<p>Another big step in this redesign is finally transitioning to ExpressionEngine. My first experience with content management systems began with WordPress, and I had a good run with it, but I felt like it was time to transition to a &ldquo;real&rdquo; CMS. Let me just say that going transferring posts form WordPress to ExpressionEngine was a huge pain in the butt.<\\/p>\\n\\n<p>ExpressionEngine can import a Movable Type format, but WordPress cannot export into that format. There are various scripts on the web that can convert WordPress to Movable Type, but all of them are outdated. So I decided to approach it by installing Movable Type on my server, importing the WordPress file, and then exporting the Movable Type file. Unfortunately, that process doesn&rsquo;t work that smoothly, and Movable Type kept failing to import the WordPress file. After much searching, I finally found an <a href=\\\"http:\\/\\/www.flashgamer.com\\/2010\\/04\\/converting_from_wordpress_to_e.html\\\">AIR application<\\/a> that can convert from WordPress to Movable Type format.<\\/p>\\n\\n<p>So after some cleanup of the posts, I was finally ready to launch. I haven&rsquo;t looked at the site in IE yet, and I&rsquo;m sure there will be some broken URLs, but I will get to that eventually.<\\/p>\\n\\n<p>I&rsquo;m also hoping to get back to posting articles more regularly here, so stay tuned.<\\/p>\\n\\n<h2>Some Other Notes<\\/h2>\\n<ul>\\n<li>Headings are using Aller &amp; being displayed with @font-face.<\\/li>\\n<li>Thanks go out to my friend <a href=\\\"http:\\/\\/twitter.com\\/neagle\\\">Nate Eagle<\\/a> for helping to write my about page.<\\/li>\\n<li>Thanks also go out to <a href=\\\"http:\\/\\/twitter.com\\/erikreagan\\\">Erik Reagan<\\/a> for helping me with some last minute htaccess rules<\\/li>\\n<\\/ul>\",\"14\":{\"old_id\":{}}}}','2014-01-19 21:52:29','2014-08-08 19:32:30','b419d264-8165-4054-9fb9-2f664ce24000',1),(312,83,4,1,2,NULL,'{\"authorId\":\"1\",\"title\":\"Transition\",\"slug\":\"transition\",\"postDate\":1278161475,\"expiryDate\":null,\"enabled\":\"1\",\"fields\":{\"2\":\"<p>It&rsquo;s been a long time since I&rsquo;ve posted anything here, but I&rsquo;m hoping to change that soon. I&rsquo;ve been busy with <a href=\\\"http:\\/\\/www.viget.com\\/\\\">a new job<\\/a>, <a href=\\\"http:\\/\\/www.cdiabu.com\\/\\\">teaching<\\/a>, and I even found time to get married too.<\\/p>\\n<p>I&rsquo;ve been working on building a newly designed site with ExpressionEngine, and I am finally getting to the last stages. The hardest part now is porting all of my posts and comments over. So while I am transitioning, I am going to be turning off comments for this site so that I can pull everything over and not worry about missing anything. If you need to, you can <a href=\\\"\\/contact\\/\\\">contact me through my site<\\/a>.<\\/p>\",\"14\":{\"old_id\":{}}}}','2014-01-19 21:52:29','2014-08-08 19:32:30','2920fcf5-ae62-4802-84fc-a1b48fdfa144',1),(316,87,4,1,2,NULL,'{\"authorId\":\"1\",\"title\":\"On Flash\",\"slug\":\"on-flash\",\"postDate\":1265236966,\"expiryDate\":null,\"enabled\":\"1\",\"fields\":{\"2\":\"<p>Ever since the iPad was announced and we were informed that flash wasn&rsquo;t supported, everyone and their mother has been writing articles about flash. I actually thoroughly enjoyed <a href=\\\"http:\\/\\/jeffcroft.com\\/blog\\/2010\\/feb\\/01\\/flash\\/\\\">Jeff Croft&rsquo;s take<\\/a>.<\\/p>\",\"14\":{\"old_id\":{}},\"4\":\"http:\\/\\/jeffcroft.com\\/blog\\/2010\\/feb\\/01\\/flash\\/\"}}','2014-01-19 21:52:29','2014-08-08 19:32:30','0aff874e-57dc-4381-8ca0-3c857129bc23',1),(317,88,4,1,2,NULL,'{\"authorId\":\"1\",\"title\":\"The importance of teaching your clients and being the boss\",\"slug\":\"the-importance-of-teaching-your-clients-and-being-the-boss\",\"postDate\":1264025672,\"expiryDate\":null,\"enabled\":\"1\",\"fields\":{\"2\":\"<p><strong>Hallelujah<\\/strong>: &ldquo;We may check the site in a dozen browser and operating configurations but the visitors don&rsquo;t, and never will, we can not forget that&hellip;&rdquo;<\\/p>\",\"14\":{\"old_id\":{}},\"4\":\"http:\\/\\/sam.brown.tc\\/entry\\/416\\/the-importance-of-teaching-your-clients-and-being-the-boss\"}}','2014-01-19 21:52:29','2014-08-08 19:32:30','ba9a8014-7194-4d53-9ea8-bb793142b76f',1),(318,89,4,1,2,NULL,'{\"authorId\":\"1\",\"title\":\"Do what works best for you, not them\",\"slug\":\"do-what-works-best-for-you-not-them\",\"postDate\":1262778122,\"expiryDate\":null,\"enabled\":\"1\",\"fields\":{\"2\":\"<p>Cameron Moll <a href=\\\"http:\\/\\/cameronmoll.com\\/archives\\/2010\\/01\\/do_what_works_best_for_you\\/\\\">reminds us<\\/a> that if something works for you, but isn&rsquo;t recommended by others, who cares. Do what works best for you.<\\/p>\",\"14\":{\"old_id\":{}},\"4\":\"http:\\/\\/cameronmoll.com\\/archives\\/2010\\/01\\/do_what_works_best_for_you\\/\"}}','2014-01-19 21:52:29','2014-08-08 19:32:30','9ebd2cab-62d8-4c6c-8330-7ca6f7fc89ab',1),(320,91,4,1,2,NULL,'{\"authorId\":\"1\",\"title\":\"Don\\u2019t fear the fold \\u2014 people do scroll\",\"slug\":\"dont-fear-the-fold-people-do-scroll\",\"postDate\":1260827151,\"expiryDate\":null,\"enabled\":\"1\",\"fields\":{\"2\":\"<p>I&rsquo;m definitely in the camp of people who don&rsquo;t believe in the fold in web design, and <a href=\\\"http:\\/\\/www.456bereastreet.com\\/archive\\/200912\\/dont_fear_the_fold_people_do_scroll\\/\\\">this user testing<\\/a> does provide evidence to support that was of thinking. Designs should still be structured so that more important information is higher on the page though.<\\/p>\",\"14\":{\"old_id\":{}},\"4\":\"http:\\/\\/www.456bereastreet.com\\/archive\\/200912\\/dont_fear_the_fold_people_do_scroll\\/\"}}','2014-01-19 21:52:29','2014-08-08 19:32:30','bf93d3fe-56ec-4650-adbf-2d7f2ad5f11a',1),(321,92,4,1,2,NULL,'{\"authorId\":\"1\",\"title\":\"Simplest jQuery Slideshow\",\"slug\":\"simplest-jquery-slideshow\",\"postDate\":1260568329,\"expiryDate\":null,\"enabled\":\"1\",\"fields\":{\"2\":\"<p>I totally agree with <a href=\\\"http:\\/\\/snook.ca\\/archives\\/javascript\\/simplest-jquery-slideshow\\\">this thinking<\\/a>. Everyone loves jQuery plugins, but they can sometimes be extremely bloated for things that can be coded relatively simply.<\\/p>\",\"14\":{\"old_id\":{}},\"4\":\"http:\\/\\/snook.ca\\/archives\\/javascript\\/simplest-jquery-slideshow\"}}','2014-01-19 21:52:29','2014-08-08 19:32:30','9c0842e5-4b47-45e3-b316-0de85ff0ccfd',1),(322,93,4,1,2,NULL,'{\"authorId\":\"1\",\"title\":\"Smashing Magazine Killed The Community (Or Maybe It Was Me)\",\"slug\":\"smashing-magazine-killed-the-community-or-maybe-it-was-me\",\"postDate\":1259177498,\"expiryDate\":null,\"enabled\":\"1\",\"fields\":{\"2\":\"<p>It is getting pretty tiresome <a href=\\\"http:\\/\\/www.drawar.com\\/articles\\/smashing-magazine-killed-the-community-or-maybe-it-was-me\\/\\\">reading blogs that just have lists<\\/a> as blog posts. Every once in a while they may be ok, but try putting some thought into your posts.<\\/p>\",\"14\":{\"old_id\":{}},\"4\":\"http:\\/\\/www.drawar.com\\/articles\\/smashing-magazine-killed-the-community-or-maybe-it-was-me\\/\"}}','2014-01-19 21:52:29','2014-08-08 19:32:30','c74b6a08-b53b-431c-b52d-61db13893fb7',1),(323,94,4,1,2,NULL,'{\"authorId\":\"1\",\"title\":\"Freeform + FieldFrame = ExpressionEngine Form Builder\",\"slug\":\"freeform-fieldframe-expressionengine-form-builder\",\"postDate\":1258594620,\"expiryDate\":null,\"enabled\":\"1\",\"fields\":{\"2\":\"<p>A form builder is a regular request for some clients when they are looking for a content management system. There aren&rsquo;t that many CMS that have this kind of functionality built-in, and even if they do, the implementation is usually less than desirable.<\\/p>\\n<p>If you follow along with what I&rsquo;ve been up to, you can probably tell that I have been on a big <a href=\\\"http:\\/\\/expressionengine.com\\/\\\">ExpressionEngine<\\/a> kick. I&rsquo;ve been using it on a ton of projects recently, and I love it for its flexibility. Although it does lack a true form builder, I figured out a simple way to build one.<\\/p>\\n<!--more-->\\n<p>If you are impatient and just want to get to the <a href=\\\"http:\\/\\/ee.trevordavis.net\\/forms\\/contact-form\\/\\\">demo<\\/a>, go ahead. Although the form will look like nothing special, as I have just added some simple styling. The real magic of the form builder happens in the Control Panel.<\\/p>\\n\\n<h2>We Need Add-ons<\\/h2>\\n<p>This form builder would not be possible without the use of some awesome add-ons:<\\/p>\\n\\n<ul>\\n <li><a href=\\\"http:\\/\\/devot-ee.com\\/add-ons\\/extensions\\/fieldframe\\/\\\"><strong>FieldFrame<\\/strong><\\/a><p>This one is a no-brainer. I can&rsquo;t even imagine building a site without it.<\\/p><\\/li>\\n <li><a href=\\\"http:\\/\\/devot-ee.com\\/add-ons\\/modules\\/freeform\\/\\\"><strong>Freeform<\\/strong><\\/a><p>If you need a form in EE, this is the way to do it.<\\/p><\\/li>\\n <li><a href=\\\"http:\\/\\/devot-ee.com\\/add-ons\\/extensions\\/freeform-data-select\\/\\\"><strong>Freeform Data Select<\\/strong><\\/a><p>A new fieldtype which pulls in templates and fields from the Freeform module.<\\/p><\\/li>\\n<\\/ul>\\n\\n<h2>Creating a Field Group<\\/h2>\\n<p>I built a custom Field Group called Forms, which consisted of four fields:<\\/p>\\n\\n<ul>\\n <li>Template<\\/li>\\n <li>Notification Email Addresses<\\/li>\\n <li>Return Page<\\/li>\\n <li>Fields<\\/li>\\n<\\/ul>\\n\\n<p>The first three are pretty simple, so I will just give a quick run through on the specifications for those fields and give a more detail review of the <strong>Fields<\\/strong> field:<\\/p>\\n\\n<h3>Template<\\/h3>\\n<p>This is where you select the Freeform template that will be used for the email. This field is not completely necessary, as just using the default template should be good enough, but I figured since it was an option, to throw it in.<\\/p>\\n<ul>\\n <li><strong>Field Name<\\/strong>: form_template<\\/li>\\n <li><strong>Field Type<\\/strong>: Freeform Data Select<\\/li>\\n <li><strong>Populate drop-down with<\\/strong>: Freeform Templates<\\/li>\\n<\\/ul>\\n\\n<h3>Notification Email Addresses<\\/h3>\\n<p>This is where you will enter the email address(es) that you want to email when the form is submitted. Since Freeform wants multiple email addresses separated by the | character, I added some help text describing that as well.<\\/p>\\n<ul>\\n <li><strong>Field Name<\\/strong>: form_notify<\\/li>\\n <li><strong>Field Type<\\/strong>: Text Input<\\/li>\\n <li><strong>Default Text Formatting for This Field<\\/strong>: None<\\/li>\\n <li><strong>Hide Formatting Menu<\\/strong><\\/li>\\n<\\/ul>\\n\\n<h3>Return Page<\\/h3>\\n<p>This is where you enter the URL to the thank you page. Once a user successfully submits the form, they will be redirected here.<\\/p>\\n<ul>\\n <li><strong>Field Name<\\/strong>: form_return<\\/li>\\n <li><strong>Field Type<\\/strong>: Text Input<\\/li>\\n <li><strong>Default Text Formatting for This Field<\\/strong>: None<\\/li>\\n <li><strong>Hide Formatting Menu<\\/strong><\\/li>\\n<\\/ul>\\n\\n<h3>Fields<\\/h3>\\n<p>This is where the magic happens. This field is a FF Matrix field type that consists of five other fields. Each row of the FF Matrix represents one field (or field group) in the form. I&rsquo;ll give a brief description of each field of the FF Matrix and show you a screenshot so you can get a better picture:<\\/p>\\n\\n<ul>\\n <li><strong>Field Name<\\/strong>: form_field<\\/li>\\n <li><strong>Field Type<\\/strong>: FF Matrix<\\/li>\\n<\\/ul>\\n\\n<h4>Label<\\/h4>\\n<p>This is where you will enter the label for the form field:<\\/p>\\n<ul>\\n <li><strong>Col Name<\\/strong>: label<\\/li>\\n <li><strong>Cell Type<\\/strong>: Text Input<\\/li>\\n<\\/ul>\\n\\n<h4>Field<\\/h4>\\n<p>This field pulls in all of the fields that have been entered into the Freeform module. So you are presented with a dropdown of all of the fields, and you just select the appropriate one:<\\/p>\\n\\n<ul>\\n <li><strong>Col Name<\\/strong>: field<\\/li>\\n <li><strong>Cell Type<\\/strong>: Freeform Data Select<\\/li>\\n <li><strong>Populate drop-down with<\\/strong>: Freeform fields<\\/li>\\n<\\/ul>\\n\\n\\n<h4>Field Type<\\/h4>\\n<p>This is where you select the type of form field you want to use. I put in a few different options, but this could be expanded upon too:<\\/p>\\n\\n<ul>\\n <li><strong>Col Name<\\/strong>: type<\\/li>\\n <li><strong>Cell Type<\\/strong>: FF Select<\\/li>\\n <li><strong>Select Options<\\/strong>: Text Input<br \\/>\\n  Textarea<br \\/>\\n  Select<br \\/>\\n  Multi-select<br \\/>\\n  Checkbox<br \\/>\\n  Checkbox Group<br \\/>\\n  Radio Group\\n <\\/li>\\n<\\/ul>\\n\\n<h4>Is this field required?<\\/h4>\\n<p>With most forms, there are some fields that are required and some that are not. If you want the field to be required, you just check the checkbox and the Freeform module will make sure it is filled in:<\\/p>\\n\\n<ul>\\n <li><strong>Col Name<\\/strong>: required<\\/li>\\n <li><strong>Cell Type<\\/strong>: FF Checkbox<\\/li>\\n <li><strong>Checkbox Label<\\/strong>: Is this field required?<\\/li>\\n<\\/ul>\\n\\n<h4>Options<\\/h4>\\n<p>Finally, this field is used when you select a field type that has multiple options. For example, if you select a &ldquo;Select&rdquo; field type, you need to provide the options to populate it. So you enter the options separated by the | character:<\\/p>\\n\\n<ul>\\n <li><strong>Col Name<\\/strong>: options<\\/li>\\n <li><strong>Cell Type<\\/strong>: Text Input<\\/li>\\n<\\/ul>\\n\\n<p><a href=\\\"http:\\/\\/trevordavis.net\\/images\\/content\\/2009\\/11\\/ff-matrix.png\\\" title=\\\"FieldFrame Matrix Configuration\\\" rel=\\\"lightbox\\\"><img src=\\\"http:\\/\\/trevordavis.net\\/images\\/content\\/2009\\/11\\/ff-matrix_thumb.png\\\" alt=\\\"FieldFrame Matrix Configuration\\\" width=\\\"570\\\" height=\\\"203\\\" class=\\\"pullLeft frame\\\" \\/><\\/a><\\/p>\\n\\n<p>So that is all you need for the Field Group, now go ahead and create a Forms Channel (or Weblog) and make sure to assign the Forms Field Group to it.<\\/p>\\n\\n<p>Now, when you go to publish a Forms entry, you should see something like this:<\\/p>\\n\\n<p><a href=\\\"http:\\/\\/trevordavis.net\\/images\\/content\\/2009\\/11\\/form-entry.png\\\" rel=\\\"lightbox\\\" title=\\\"New Forms Entry\\\"><img src=\\\"http:\\/\\/trevordavis.net\\/images\\/content\\/2009\\/11\\/form-entry_thumb.png\\\" alt=\\\"New Forms Entry\\\" width=\\\"570\\\" height=\\\"258\\\" class=\\\"pullLeft frame\\\" \\/><\\/a><\\/p>\\n\\n<p>I made a <a href=\\\"http:\\/\\/ee.trevordavis.net\\/forms\\/contact-form\\/\\\">demo form<\\/a> showing off the various types of form fields. Here is what that entry looks like in the Control Panel:<\\/p>\\n\\n<p><a href=\\\"http:\\/\\/trevordavis.net\\/images\\/content\\/2009\\/11\\/demo-entry.png\\\" rel=\\\"lightbox\\\" title=\\\"Demo Form Entry in Control Panel\\\"><img src=\\\"http:\\/\\/trevordavis.net\\/images\\/content\\/2009\\/11\\/demo-entry_thumb.png\\\" alt=\\\"Demo Form Entry in Control Panel\\\" width=\\\"570\\\" height=\\\"400\\\" class=\\\"pullLeft frame\\\" \\/><\\/a><\\/p>\\n\\n<h2>Template<\\/h2>\\n<p>Now that we have our Channel and Field Group all setup, we need to deal with the template. You could really setup your template\\/template group in various ways, so I&rsquo;m not going to get into those details. One detail that you need to know is that <strong>I enabled PHP for my template<\\/strong>.<\\/p>\\n\\n<p>First, we just need to start with a simple <strong>exp:weblog:entries<\\/strong> tag:<\\/p>\\n\\n<div class=\\\"codeblock\\\"><code>\\n&#123;exp:weblog:entries&nbsp;weblog=\\\"forms\\\"&nbsp;limit=\\\"1\\\"&nbsp;disable=\\\"categories|category_fields|member_data|pagination|trackbacks\\\"&#125;<br \\/>\\u2026<br \\/>&#123;\\/exp:weblog:entries&#125;&nbsp;\\n\\n<\\/code><\\/div>\\n\\n<p>Next, we want to start the Freeform form tag:<\\/p>\\n\\n<div class=\\\"codeblock\\\"><code>\\n&#123;exp:weblog:entries&nbsp;weblog=\\\"forms\\\"&nbsp;limit=\\\"1\\\"&nbsp;disable=\\\"categories|category_fields|member_data|pagination|trackbacks\\\"&#125;<br \\/>&nbsp;&#123;exp:freeform:form&nbsp;form_name=\\\"&#123;url_title&#125;\\\"&nbsp;form_id=\\\"&#123;url_title&#125;\\\"&nbsp;template=\\\"&#123;form_template&#125;\\\"&nbsp;notify=\\\"&#123;form_notify&#125;\\\"&nbsp;return=\\\"&#123;form_return&#125;\\\"&#125;<br \\/>&nbsp;\\u2026<br \\/>&nbsp;&#123;\\/exp:freeform:form&#125;<br \\/>&#123;\\/exp:weblog:entries&#125;&nbsp;\\n\\n<\\/code><\\/div>\\n\\n<p>Since we are inside of the exp:weblog:entries tag, we have access to everything that is being returned from that entry. If you have any questions about the various parameters, <a href=\\\"http:\\/\\/www.solspace.com\\/docs\\/detail\\/freeform_form\\/#parameters\\\">refer to the Freeform Documentation<\\/a>.<\\/p>\\n\\n<p>So far, the values that we are passing into the parameters are pretty straightforward, just custom fields from our entry. But, passing in the <a href=\\\"http:\\/\\/www.solspace.com\\/docs\\/detail\\/freeform_form\\/#required\\\">required<\\/a> parameter is a little more challenging, since we have to loop through all of the rows in our FF Matrix.<\\/p>\\n\\n<p>If we <a href=\\\"http:\\/\\/brandon-kelly.com\\/fieldframe\\/docs\\/ff-matrix\\\">refer to the FF Matrix documentation<\\/a>, we can see how to loop through the rows in the matrix. I only want to return rows that have the required checkbox checked, and I want to separate the names of the fields with the | character. Then, I use the backspace parameter to remove the last one:<\\/p>\\n\\n<div class=\\\"codeblock\\\"><code>\\n&#123;exp:freeform:form&nbsp;form_name=\\\"&#123;url_title&#125;\\\"&nbsp;form_id=\\\"&#123;url_title&#125;\\\"&nbsp;template=\\\"&#123;form_template&#125;\\\"&nbsp;notify=\\\"&#123;form_notify&#125;\\\"&nbsp;return=\\\"&#123;form_return&#125;\\\"&nbsp;&lt;strong&gt;required=\\\"&#123;form_field&nbsp;search:required=\'y\'&nbsp;backspace=\'1\'&#125;&#123;field&#125;|&#123;\\/form_field&#125;\\\"&lt;\\/strong&gt;&#125;<br \\/>\\u2026<br \\/>&#123;\\/exp:freeform:form&#125;&nbsp;\\n\\n<\\/code><\\/div>\\n\\n<p>Next, we want to add a title, ordered list that will contain the form fields, and the submit button:<\\/p>\\n\\n<div class=\\\"codeblock\\\"><code>\\n&#123;exp:freeform:form&nbsp;form_name=\\\"&#123;url_title&#125;\\\"&nbsp;form_id=\\\"&#123;url_title&#125;\\\"&nbsp;template=\\\"&#123;form_template&#125;\\\"&nbsp;notify=\\\"&#123;form_notify&#125;\\\"&nbsp;return=\\\"&#123;form_return&#125;\\\"&nbsp;required=\\\"&#123;form_field&nbsp;search:required=\'y\'&nbsp;backspace=\'1\'&#125;&#123;field&#125;|&#123;\\/form_field&#125;\\\"&#125;<br \\/>&nbsp;&lt;h1&gt;&#123;title&#125;&lt;\\/h1&gt;<br \\/>&nbsp;&lt;ol&nbsp;class=\\\"forms\\\"&gt;<br \\/>&nbsp;&nbsp;\\u2026<br \\/>&nbsp;&nbsp;&lt;li&nbsp;class=\\\"buttons\\\"&gt;&lt;input&nbsp;type=\\\"submit\\\"&nbsp;name=\\\"submit\\\"&nbsp;value=\\\"submit\\\"&nbsp;\\/&gt;&lt;\\/li&gt;<br \\/>&nbsp;&lt;\\/ol&gt;<br \\/>&#123;\\/exp:freeform:form&#125;&nbsp;\\n\\n<\\/code><\\/div>\\n\\n<p>Now here is where the code gets interesting. Just like we did with the required parameter, we want to loop through each row in the FF Matrix and display a list item for each one:<\\/p>\\n\\n<div class=\\\"codeblock\\\"><code>\\n&#123;form_field&#125;<br \\/>&nbsp;&lt;li&gt;<br \\/>&nbsp;\\u2026<br \\/>&nbsp;&lt;\\/li&gt;<br \\/>&#123;\\/form_field&#125;&nbsp;\\n\\n<\\/code><\\/div>\\n\\n<p>First, let&rsquo;s display the label, if there is one, and denote if the field is required or not:<\\/p>\\n\\n<div class=\\\"codeblock\\\"><code>\\n&#123;if&nbsp;\\\"&#123;label&#125;\\\"&#125;<br \\/>&nbsp;&lt;label&nbsp;for=\\\"&#123;field&#125;\\\"&gt;&#123;if&nbsp;\\\"&#123;required&#125;\\\"&nbsp;==&nbsp;\\\"y\\\"&#125;&lt;em&nbsp;class=\\\"required\\\"&gt;*&lt;\\/em&gt;&#123;\\/if&#125;&#123;label&#125;&lt;\\/label&gt;<br \\/>&#123;\\/if&#125;&nbsp;\\n\\n<\\/code><\\/div>\\n\\n<p>The rest of the code is a big conditional statement which depends upon the Field Types that you specified in the FF Matrix. Let&rsquo;s first take a look at the <strong>Text Input<\\/strong>, <strong>Textarea<\\/strong>, and <strong>Checkbox<\\/strong> types since they are pretty straightforward:<\\/p>\\n\\n<div class=\\\"codeblock\\\"><code>\\n&#123;if&nbsp;\\\"&#123;type&#125;\\\"&nbsp;==&nbsp;\\\"Text&nbsp;Input\\\"&#125;<br \\/>&nbsp;&lt;input&nbsp;type=\\\"text\\\"&nbsp;name=\\\"&#123;field&#125;\\\"&nbsp;id=\\\"&#123;field&#125;\\\"&nbsp;\\/&gt;<br \\/>&#123;if:elseif&nbsp;\\\"&#123;type&#125;\\\"&nbsp;==&nbsp;\\\"Textarea\\\"&#125;<br \\/>&nbsp;&lt;textarea&nbsp;name=\\\"&#123;field&#125;\\\"&nbsp;id=\\\"&#123;field&#125;\\\"&gt;&lt;\\/textarea&gt;<br \\/>&#123;if:elseif&nbsp;\\\"&#123;type&#125;\\\"&nbsp;==&nbsp;\\\"Checkbox\\\"&#125;<br \\/>&nbsp;&lt;input&nbsp;type=\\\"checkbox\\\"&nbsp;class=\\\"checkbox\\\"&nbsp;name=\\\"&#123;field&#125;\\\"&nbsp;id=\\\"&#123;field&#125;\\\"&nbsp;\\/&gt;<br \\/>\\u2026<br \\/>&#123;\\/if&#125;&nbsp;\\n\\n<\\/code><\\/div>\\n\\n<p>So we are just checking the type column in the FF Matrix, and then displaying the rest of the data from the row in the appropriate form field.<\\/p>\\n\\n<p>Next, let&rsquo;s walk through what happens if you select the <strong>Select<\\/strong> or <strong>Multi-select<\\/strong> types:<\\/p>\\n\\n<div class=\\\"codeblock\\\"><code>\\n&#123;if:elseif&nbsp;\\\"&#123;type&#125;\\\"&nbsp;==&nbsp;\\\"Select\\\"&nbsp;||&nbsp;\\\"&#123;type&#125;\\\"&nbsp;==&nbsp;\\\"Multi-select\\\"&nbsp;&amp;&amp;&nbsp;\\\"&#123;options&#125;\\\"&#125;<br \\/>&nbsp;&lt;select&nbsp;name=\\\"&#123;field&#125;&#123;if&nbsp;\\\"&#123;type&#125;\\\"&nbsp;==&nbsp;\\\"Multi-select\\\"&#125;&#91;&#93;&#123;\\/if&#125;\\\"&nbsp;id=\\\"&#123;field&#125;\\\"&#123;if&nbsp;\\\"&#123;type&#125;\\\"&nbsp;==&nbsp;\\\"Multi-select\\\"&#125;&nbsp;multiple=\\\"multiple\\\"&nbsp;size=\\\"4\\\"&#123;\\/if&#125;&gt;<br \\/>&nbsp;&nbsp;&lt;?php&nbsp;$items&nbsp;=&nbsp;explode(\\\"|\\\",&nbsp;\'&#123;options&#125;\');&nbsp;?&gt;<br \\/>&nbsp;&nbsp;&lt;?php&nbsp;foreach&nbsp;($items&nbsp;as&nbsp;$item)&nbsp;&#123;&nbsp;?&gt;<br \\/>&nbsp;&nbsp;&nbsp;&lt;option&nbsp;value=\\\"&lt;?php&nbsp;echo&nbsp;$item;&nbsp;?&gt;\\\"&gt;&lt;?php&nbsp;echo&nbsp;$item;&nbsp;?&gt;&lt;\\/option&gt;<br \\/>&nbsp;&nbsp;&lt;?php&nbsp;&#125;&nbsp;?&gt;<br \\/>&nbsp;&lt;\\/select&gt;<br \\/>\\u2026<br \\/>&#123;\\/if&#125;&nbsp;\\n\\n<\\/code><\\/div>\\n\\n<p>So first, we are displaying the <strong>select element<\\/strong>, and if it is a <strong>Multi-select<\\/strong>, we are adding <strong>[]<\\/strong> to the name attribute, and adding the <strong>multiple<\\/strong> and <strong>size<\\/strong> attributes.<\\/p>\\n\\n<p>Next, we want to take the string of <strong>options<\\/strong> that are separated by the | character, and create an array out of the string using the <a href=\\\"http:\\/\\/php.net\\/manual\\/en\\/function.explode.php\\\">explode function<\\/a>.<\\/p>\\n\\n<p>Then, we loop through the array, and display the options for each one.<\\/p>\\n\\n<p>Finally, we do virtually the same thing for the <strong>Radio Group<\\/strong> and <strong>Checkbox Group<\\/strong> field types:<\\/p>\\n\\n<div class=\\\"codeblock\\\"><code>\\n&#123;if:elseif&nbsp;\\\"&#123;type&#125;\\\"&nbsp;==&nbsp;\\\"Radio&nbsp;Group\\\"&nbsp;&amp;&amp;&nbsp;\\\"&#123;options&#125;\\\"&#125;<br \\/>&nbsp;&lt;ul&nbsp;class=\\\"group\\\"&gt;<br \\/>&nbsp;&nbsp;&lt;?php&nbsp;$items&nbsp;=&nbsp;explode(\\\"|\\\",&nbsp;\'&#123;options&#125;\');&nbsp;$count&nbsp;=&nbsp;1;&nbsp;?&gt;<br \\/>&nbsp;&nbsp;&lt;?php&nbsp;foreach&nbsp;($items&nbsp;as&nbsp;$item)&nbsp;&#123;&nbsp;?&gt;<br \\/>&nbsp;&nbsp;&nbsp;&lt;li&gt;&lt;input&nbsp;type=\\\"radio\\\"&nbsp;class=\\\"radio\\\"&nbsp;name=\\\"&#123;field&#125;\\\"&nbsp;id=\\\"&#123;field&#125;&lt;?php&nbsp;echo&nbsp;$count;&nbsp;?&gt;\\\"&nbsp;value=\\\"&lt;?php&nbsp;echo&nbsp;$item;&nbsp;?&gt;\\\"&nbsp;\\/&gt;<br \\/>&nbsp;&nbsp;&nbsp;&lt;label&nbsp;for=\\\"&#123;field&#125;&lt;?php&nbsp;echo&nbsp;$count;&nbsp;?&gt;\\\"&gt;&lt;?php&nbsp;echo&nbsp;$item;&nbsp;?&gt;&lt;\\/label&gt;&lt;\\/li&gt;<br \\/>&nbsp;&nbsp;&nbsp;&lt;?php&nbsp;$count++;&nbsp;?&gt;<br \\/>&nbsp;&nbsp;&lt;?php&nbsp;&#125;&nbsp;?&gt;<br \\/>&nbsp;&lt;\\/ul&gt;<br \\/>&#123;if:elseif&nbsp;\\\"&#123;type&#125;\\\"&nbsp;==&nbsp;\\\"Checkbox&nbsp;Group\\\"&nbsp;&amp;&amp;&nbsp;\\\"&#123;options&#125;\\\"&#125;<br \\/>&nbsp;&lt;ul&nbsp;class=\\\"group\\\"&gt;<br \\/>&nbsp;&nbsp;&lt;?php&nbsp;$items&nbsp;=&nbsp;explode(\\\"|\\\",&nbsp;\'&#123;options&#125;\');&nbsp;$count&nbsp;=&nbsp;1;&nbsp;?&gt;<br \\/>&nbsp;&nbsp;&lt;?php&nbsp;foreach&nbsp;($items&nbsp;as&nbsp;$item)&nbsp;&#123;&nbsp;?&gt;<br \\/>&nbsp;&nbsp;&nbsp;&lt;li&gt;&lt;input&nbsp;type=\\\"checkbox\\\"&nbsp;class=\\\"checkbox\\\"&nbsp;name=\\\"&#123;field&#125;&#91;&#93;\\\"&nbsp;id=\\\"&#123;field&#125;&lt;?php&nbsp;echo&nbsp;$count;&nbsp;?&gt;\\\"&nbsp;value=\\\"&lt;?php&nbsp;echo&nbsp;$item;&nbsp;?&gt;\\\"&nbsp;\\/&gt;<br \\/>&nbsp;&nbsp;&nbsp;&lt;label&nbsp;for=\\\"&#123;field&#125;&lt;?php&nbsp;echo&nbsp;$count;&nbsp;?&gt;\\\"&gt;&lt;?php&nbsp;echo&nbsp;$item;&nbsp;?&gt;&lt;\\/label&gt;&lt;\\/li&gt;<br \\/>&nbsp;&nbsp;&nbsp;&lt;?php&nbsp;$count++;&nbsp;?&gt;<br \\/>&nbsp;&nbsp;&lt;?php&nbsp;&#125;&nbsp;?&gt;<br \\/>&nbsp;&lt;\\/ul&gt;<br \\/>&#123;\\/if&#125;&nbsp;\\n\\n<\\/code><\\/div>\\n\\n<p>So that&rsquo;s it really. Here is the full template:<\\/p>\\n\\n<div class=\\\"codeblock\\\"><code>\\n&#123;exp:weblog:entries&nbsp;weblog=\\\"forms\\\"&nbsp;limit=\\\"1\\\"&nbsp;disable=\\\"categories|category_fields|member_data|pagination|trackbacks\\\"&#125;<br \\/><br \\/>&nbsp;&#123;exp:freeform:form&nbsp;form_name=\\\"&#123;url_title&#125;\\\"&nbsp;form_id=\\\"&#123;url_title&#125;\\\"&nbsp;template=\\\"&#123;form_template&#125;\\\"&nbsp;notify=\\\"&#123;form_notify&#125;\\\"&nbsp;return=\\\"&#123;form_return&#125;\\\"&nbsp;required=\\\"&#123;form_field&nbsp;search:required=\'y\'&nbsp;backspace=\'1\'&#125;&#123;field&#125;|&#123;\\/form_field&#125;\\\"&#125;<br \\/><br \\/>&nbsp;&nbsp;&lt;h1&gt;&#123;title&#125;&lt;\\/h1&gt;<br \\/>&nbsp;&nbsp;&lt;ol&nbsp;class=\\\"forms\\\"&gt;<br \\/>&nbsp;&nbsp;&nbsp;&#123;form_field&#125;<br \\/>&nbsp;&nbsp;&nbsp;&nbsp;&lt;li&gt;<br \\/>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&#123;if&nbsp;\\\"&#123;label&#125;\\\"&#125;<br \\/>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;label&nbsp;for=\\\"&#123;field&#125;\\\"&gt;&#123;if&nbsp;\\\"&#123;required&#125;\\\"&nbsp;==&nbsp;\\\"y\\\"&#125;&lt;em&nbsp;class=\\\"required\\\"&gt;*&lt;\\/em&gt;&#123;\\/if&#125;&#123;label&#125;&lt;\\/label&gt;<br \\/>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&#123;\\/if&#125;<br \\/>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&#123;if&nbsp;\\\"&#123;type&#125;\\\"&nbsp;==&nbsp;\\\"Text&nbsp;Input\\\"&#125;<br \\/>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;input&nbsp;type=\\\"text\\\"&nbsp;name=\\\"&#123;field&#125;\\\"&nbsp;id=\\\"&#123;field&#125;\\\"&nbsp;\\/&gt;<br \\/>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&#123;if:elseif&nbsp;\\\"&#123;type&#125;\\\"&nbsp;==&nbsp;\\\"Textarea\\\"&#125;<br \\/>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;textarea&nbsp;name=\\\"&#123;field&#125;\\\"&nbsp;id=\\\"&#123;field&#125;\\\"&gt;&lt;\\/textarea&gt;<br \\/>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&#123;if:elseif&nbsp;\\\"&#123;type&#125;\\\"&nbsp;==&nbsp;\\\"Checkbox\\\"&#125;<br \\/>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;input&nbsp;type=\\\"checkbox\\\"&nbsp;class=\\\"checkbox\\\"&nbsp;name=\\\"&#123;field&#125;\\\"&nbsp;id=\\\"&#123;field&#125;\\\"&nbsp;\\/&gt;<br \\/>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&#123;if:elseif&nbsp;\\\"&#123;type&#125;\\\"&nbsp;==&nbsp;\\\"Select\\\"&nbsp;||&nbsp;\\\"&#123;type&#125;\\\"&nbsp;==&nbsp;\\\"Multi-select\\\"&nbsp;&amp;&amp;&nbsp;\\\"&#123;options&#125;\\\"&#125;<br \\/>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;select&nbsp;name=\\\"&#123;field&#125;&#123;if&nbsp;\\\"&#123;type&#125;\\\"&nbsp;==&nbsp;\\\"Multi-select\\\"&#125;&#91;&#93;&#123;\\/if&#125;\\\"&nbsp;id=\\\"&#123;field&#125;\\\"&#123;if&nbsp;\\\"&#123;type&#125;\\\"&nbsp;==&nbsp;\\\"Multi-select\\\"&#125;&nbsp;multiple=\\\"multiple\\\"&nbsp;size=\\\"4\\\"&#123;\\/if&#125;&gt;<br \\/>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;?php&nbsp;$items&nbsp;=&nbsp;explode(\\\"|\\\",&nbsp;\'&#123;options&#125;\');&nbsp;?&gt;<br \\/>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;?php&nbsp;foreach&nbsp;($items&nbsp;as&nbsp;$item)&nbsp;&#123;&nbsp;?&gt;<br \\/>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;option&nbsp;value=\\\"&lt;?php&nbsp;echo&nbsp;$item;&nbsp;?&gt;\\\"&gt;&lt;?php&nbsp;echo&nbsp;$item;&nbsp;?&gt;&lt;\\/option&gt;<br \\/>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;?php&nbsp;&#125;&nbsp;?&gt;<br \\/>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;\\/select&gt;<br \\/>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&#123;if:elseif&nbsp;\\\"&#123;type&#125;\\\"&nbsp;==&nbsp;\\\"Radio&nbsp;Group\\\"&nbsp;&amp;&amp;&nbsp;\\\"&#123;options&#125;\\\"&#125;<br \\/>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;ul&nbsp;class=\\\"group\\\"&gt;<br \\/>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;?php&nbsp;$items&nbsp;=&nbsp;explode(\\\"|\\\",&nbsp;\'&#123;options&#125;\');&nbsp;$count&nbsp;=&nbsp;1;&nbsp;?&gt;<br \\/>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;?php&nbsp;foreach&nbsp;($items&nbsp;as&nbsp;$item)&nbsp;&#123;&nbsp;?&gt;<br \\/>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;li&gt;&lt;input&nbsp;type=\\\"radio\\\"&nbsp;class=\\\"radio\\\"&nbsp;name=\\\"&#123;field&#125;\\\"&nbsp;id=\\\"&#123;field&#125;&lt;?php&nbsp;echo&nbsp;$count;&nbsp;?&gt;\\\"&nbsp;value=\\\"&lt;?php&nbsp;echo&nbsp;$item;&nbsp;?&gt;\\\"&nbsp;\\/&gt;<br \\/>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;label&nbsp;for=\\\"&#123;field&#125;&lt;?php&nbsp;echo&nbsp;$count;&nbsp;?&gt;\\\"&gt;&lt;?php&nbsp;echo&nbsp;$item;&nbsp;?&gt;&lt;\\/label&gt;&lt;\\/li&gt;<br \\/>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;?php&nbsp;$count++;&nbsp;?&gt;<br \\/>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;?php&nbsp;&#125;&nbsp;?&gt;<br \\/>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;\\/ul&gt;<br \\/>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&#123;if:elseif&nbsp;\\\"&#123;type&#125;\\\"&nbsp;==&nbsp;\\\"Checkbox&nbsp;Group\\\"&nbsp;&amp;&amp;&nbsp;\\\"&#123;options&#125;\\\"&#125;<br \\/>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;ul&nbsp;class=\\\"group\\\"&gt;<br \\/>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;?php&nbsp;$items&nbsp;=&nbsp;explode(\\\"|\\\",&nbsp;\'&#123;options&#125;\');&nbsp;$count&nbsp;=&nbsp;1;&nbsp;?&gt;<br \\/>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;?php&nbsp;foreach&nbsp;($items&nbsp;as&nbsp;$item)&nbsp;&#123;&nbsp;?&gt;<br \\/>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;li&gt;&lt;input&nbsp;type=\\\"checkbox\\\"&nbsp;class=\\\"checkbox\\\"&nbsp;name=\\\"&#123;field&#125;&#91;&#93;\\\"&nbsp;id=\\\"&#123;field&#125;&lt;?php&nbsp;echo&nbsp;$count;&nbsp;?&gt;\\\"&nbsp;value=\\\"&lt;?php&nbsp;echo&nbsp;$item;&nbsp;?&gt;\\\"&nbsp;\\/&gt;<br \\/>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;label&nbsp;for=\\\"&#123;field&#125;&lt;?php&nbsp;echo&nbsp;$count;&nbsp;?&gt;\\\"&gt;&lt;?php&nbsp;echo&nbsp;$item;&nbsp;?&gt;&lt;\\/label&gt;&lt;\\/li&gt;<br \\/>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;?php&nbsp;$count++;&nbsp;?&gt;<br \\/>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;?php&nbsp;&#125;&nbsp;?&gt;<br \\/>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;\\/ul&gt;<br \\/>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&#123;\\/if&#125;<br \\/>&nbsp;&nbsp;&nbsp;&nbsp;&lt;\\/li&gt;<br \\/>&nbsp;&nbsp;&nbsp;&#123;\\/form_field&#125;<br \\/>&nbsp;&nbsp;&nbsp;&lt;li&nbsp;class=\\\"buttons\\\"&gt;&lt;input&nbsp;type=\\\"submit\\\"&nbsp;name=\\\"submit\\\"&nbsp;value=\\\"submit\\\"&nbsp;\\/&gt;&lt;\\/li&gt;<br \\/>&nbsp;&nbsp;&lt;\\/ol&gt;<br \\/>&nbsp;&#123;\\/exp:freeform:form&#125;&nbsp;&nbsp;<br \\/>&#123;\\/exp:weblog:entries&#125;&nbsp;\\n\\n<\\/code><\\/div>\\n\\n<h2>Conclusion<\\/h2>\\n<p>This is not meant to be an all-inclusive form builder, as you can see there are <a href=\\\"http:\\/\\/www.solspace.com\\/docs\\/detail\\/freeform_form\\/#parameters\\\">many other parameters for the Freeform module<\\/a>. But, this was meant to show a creative use of ExpressionEngine and EE add-ons to add functionality that is not directly built into the CMS.<\\/p>\\n\\n<p>So go forth and create.<\\/p>\",\"14\":{\"old_id\":{}}}}','2014-01-19 21:52:29','2014-08-08 19:32:30','1f891a47-6ea1-4af3-9ea8-5811a9b4baf3',1),(324,95,4,1,2,NULL,'{\"authorId\":\"1\",\"title\":\"Reversed Ordered List with jQuery\",\"slug\":\"reversed-ordered-list-jquery\",\"postDate\":1257901269,\"expiryDate\":null,\"enabled\":\"1\",\"fields\":{\"2\":\"<p>At work this past week, a client requested something that I wasn&rsquo;t sure how to achieve: a reversed ordered list. So basically, they wanted to have a top 10 list, with the first item being numbered 10 and the last 1.<\\/p>\\n<!--more-->\\n<p>If you want to <a href=\\\"http:\\/\\/trevordavis.net\\/play\\/reversed-ordered-list-with-jquery\\/\\\">skip ahead to the demo<\\/a>, go ahead.<\\/p>\\n\\n<p><a href=\\\"http:\\/\\/trevordavis.net\\/play\\/reversed-ordered-list-with-jquery\\/\\\" class=\\\"more-link\\\">View Demo<\\/a><\\/p>\\n\\n<p>Now sure, I could have just written the numbers in as text, but it&rsquo;s a list, and it&rsquo;s ordered! Here is an example of what the client wanted:<\\/p>\\n\\n<p>10. Lorem ipsum dolor sit amet, consectetur adipiscing elit.<br \\/>\\n9. Lorem ipsum dolor sit amet, consectetur adipiscing elit.<br \\/>\\n8. Lorem ipsum dolor sit amet, consectetur adipiscing elit.<br \\/>\\n&hellip;<br \\/>\\n1. Lorem ipsum dolor sit amet, consectetur adipiscing elit.<\\/p>\\n\\n<p>After some digging around, I found out that you can add the <strong>value attribute<\\/strong> to each list item to specify the number to display. So basically, I just needed to code my list like this:<\\/p>\\n\\n<div class=\\\"codeblock\\\"><code>\\n&lt;ol&gt;<br \\/>&nbsp;&lt;li&nbsp;value=\\\"10\\\"&gt;Lorem&nbsp;ipsum&nbsp;dolor&nbsp;sit&nbsp;amet,&nbsp;consectetur&nbsp;adipiscing&nbsp;elit.&lt;\\/li&gt;<br \\/>&nbsp;&lt;li&nbsp;value=\\\"9\\\"&gt;Lorem&nbsp;ipsum&nbsp;dolor&nbsp;sit&nbsp;amet,&nbsp;consectetur&nbsp;adipiscing&nbsp;elit.&lt;\\/li&gt;<br \\/>&nbsp;&lt;li&nbsp;value=\\\"8\\\"&gt;Lorem&nbsp;ipsum&nbsp;dolor&nbsp;sit&nbsp;amet,&nbsp;consectetur&nbsp;adipiscing&nbsp;elit.&lt;\\/li&gt;<br \\/>&nbsp;&amp;hellip;<br \\/>&nbsp;&lt;li&nbsp;value=\\\"1\\\"&gt;Lorem&nbsp;ipsum&nbsp;dolor&nbsp;sit&nbsp;amet,&nbsp;consectetur&nbsp;adipiscing&nbsp;elit.&lt;\\/li&gt;<br \\/>&lt;\\/ol&gt;&nbsp;\\n\\n<\\/code><\\/div>\\n\\n<p>Pretty straightforward, but also pretty ugly. So what happens when the client decides they want to insert another bullet in the middle of the list? Yep, that&rsquo;s right, they would have to adjust the numbering for the rest of the list.<\\/p>\\n\\n<p>Pretty crappy, so let&rsquo;s use the powerfulness of jQuery to make this a little better.<\\/p>\\n\\n<h2>The Markup<\\/h2>\\n<p>So just like before, we just want to create an ordered list, but this time, we will leave off the value attribute. We are also going to add a class to the ordered list that we will use as a hook to add in the jQuery functionality:<\\/p>\\n\\n<div class=\\\"codeblock\\\"><code>\\n&lt;ol&nbsp;class=\\\"reversed\\\"&gt;<br \\/>&nbsp;&lt;li&gt;Lorem&nbsp;ipsum&nbsp;dolor&nbsp;sit&nbsp;amet,&nbsp;consectetur&nbsp;adipiscing&nbsp;elit.&lt;\\/li&gt;<br \\/>&nbsp;&lt;li&gt;Lorem&nbsp;ipsum&nbsp;dolor&nbsp;sit&nbsp;amet,&nbsp;consectetur&nbsp;adipiscing&nbsp;elit.&lt;\\/li&gt;<br \\/>&nbsp;&lt;li&gt;Lorem&nbsp;ipsum&nbsp;dolor&nbsp;sit&nbsp;amet,&nbsp;consectetur&nbsp;adipiscing&nbsp;elit.&lt;\\/li&gt;<br \\/>&nbsp;&amp;hellip;<br \\/>&nbsp;&lt;li&gt;Lorem&nbsp;ipsum&nbsp;dolor&nbsp;sit&nbsp;amet,&nbsp;consectetur&nbsp;adipiscing&nbsp;elit.&lt;\\/li&gt;<br \\/>&lt;\\/ol&gt;&nbsp;\\n\\n<\\/code><\\/div>\\n\\n<h2>The jQuery<\\/h2>\\n<p>Mapping out the code a bit: we want to select each element with a class of reversed, and count the total number of children list items. Then, we want to loop through the children, and update the value attribute to be the value of the total number of children minus a counter variable that we started at zero and increment each time through the loop.<\\/p>\\n\\n<p>That seems relatively straightforward, so I&rsquo;ll just show the code that I wrote:<\\/p>\\n\\n<div class=\\\"codeblock\\\"><code>\\n$(document).ready(function()&nbsp;&#123;<br \\/>&nbsp;$(\'.reversed\').each(function()&nbsp;&#123;<br \\/>&nbsp;&nbsp;var&nbsp;$children&nbsp;=&nbsp;$(this).children(\'li\');<br \\/>&nbsp;&nbsp;var&nbsp;totalChildren&nbsp;=&nbsp;$children.length;<br \\/>&nbsp;&nbsp;var&nbsp;start&nbsp;=&nbsp;0;<br \\/>&nbsp;&nbsp;$children.each(function()&nbsp;&#123;<br \\/>&nbsp;&nbsp;&nbsp;$(this).val(totalChildren&nbsp;-&nbsp;start);<br \\/>&nbsp;&nbsp;&nbsp;start++;<br \\/>&nbsp;&nbsp;&#125;);<br \\/>&nbsp;&#125;);<br \\/>&#125;);&nbsp;\\n\\n<\\/code><\\/div>\\n\\n<p><a href=\\\"http:\\/\\/trevordavis.net\\/play\\/reversed-ordered-list-with-jquery\\/\\\" class=\\\"more-link\\\">View Demo<\\/a><\\/p>\\n\\n<p>It looks like with HTML 5, we get a <a href=\\\"http:\\/\\/blog.whatwg.org\\/reverse-ordered-lists\\\">reversed attribute<\\/a> that accomplishes the same thing, but until it&rsquo;s fully supported, this quick &amp; easy solution seems to work.<\\/p>\\n\\n<h2>On a Personal Note<\\/h2>\\n<p>I have been severely neglecting my blog, but for good reason. I have been teaching some intro to web development courses at <a href=\\\"http:\\/\\/www.cdiabu.com\\/\\\">CDIABU<\\/a> in Georgetown. Also, I will be starting a new job on December 1st. I will be joining the amazing team at <a href=\\\"http:\\/\\/www.viget.com\\/\\\">Viget Labs<\\/a> as their new front-end developer.<\\/p>\",\"14\":{\"old_id\":{}}}}','2014-01-19 21:52:30','2014-08-08 19:32:30','d6e27037-b338-489c-bdc2-90808db0e19c',1),(325,96,4,1,2,NULL,'{\"authorId\":\"1\",\"title\":\"Creativity is Not Design (Design Test 2)\",\"slug\":\"creativity-is-not-design-design-test-2\",\"postDate\":1257211321,\"expiryDate\":null,\"enabled\":\"1\",\"fields\":{\"2\":\"<p>Andy Rutledge has created a <a href=\\\"http:\\/\\/www.andyrutledge.com\\/creativity-is-not-design-test-2.php\\\">second design test<\\/a> to show that creativity does not necessarily mean you are an effective designer. The <a href=\\\"http:\\/\\/www.andyrutledge.com\\/design-test.php\\\">first test<\\/a> is excellent as well. I need to learn more about design principles&hellip;<\\/p>\",\"14\":{\"old_id\":{}},\"4\":\"http:\\/\\/www.andyrutledge.com\\/creativity-is-not-design-test-2.php\"}}','2014-01-19 21:52:30','2014-08-08 19:32:30','52047ee9-8484-4c8c-8ead-15d65cc6d7a9',1),(326,97,4,1,2,NULL,'{\"authorId\":\"1\",\"title\":\"ExpressionEngine: Embed an Embed within Itself?\",\"slug\":\"expressionengine-embed-an-embed-within-itself\",\"postDate\":1255788025,\"expiryDate\":null,\"enabled\":\"1\",\"fields\":{\"2\":\"<p>At work this week, there was discussion on how to accomplish something in ExpressionEngine. We wanted to pull in entries that were in one category, but if there were no entries, then pull in from other categories and display that instead. We were kind of stumped as to how to do that.<\\/p>\\n<!--more-->\\n<p>I&rsquo;m not sure if we were missing some easy way to do that, but we couldn&rsquo;t think of a nice way to accomplish it.<\\/p>\\n\\n<h2>Let&rsquo;s Backup<\\/h2>\\n<p>I guess it will be helpful to give you some more context. We had created a Channel (our term for Weblog) for <strong>events<\\/strong>. You could categorize the events, and they would publish in different places.<\\/p>\\n<p>In this instance, the homepage, we wanted to pull an event from one category, but if there were none, then just display an event from another category.<\\/p>\\n\\n<h2>The Initial Code<\\/h2>\\n\\n<p>This code was separated out in an embed so that we could use it in various places on the site:<\\/p>\\n\\n<div class=\\\"codeblock\\\"><code>\\n&#123;assign_variable:channel_name=\\\"&#123;embed:channel&#125;\\\"&#125;<br \\/>&#123;assign_variable:category_id=\\\"&#123;embed:category&#125;\\\"&#125;<br \\/><br \\/>&#123;exp:weblog:entries&nbsp;weblog=\\\"&#123;channel_name&#125;\\\"&nbsp;category=\\\"&#123;category_id&#125;\\\"&nbsp;show_future_entries=\\\"yes\\\"&nbsp;show_expired=\\\"no\\\"&nbsp;limit=\\\"1\\\"&nbsp;disable=\\u00e2\\u20ac\\u0153category_fields|custom_fields|member_data|pagination|trackbacks\\u00e2\\u20ac\\u009d&#125;<br \\/><br \\/>&nbsp;&lt;h2&gt;&#123;title&#125;&lt;\\/h2&gt;<br \\/>&nbsp;&#123;if&nbsp;events_feature_image&#125;<br \\/>&nbsp;&nbsp;&lt;p&nbsp;class=\\\"rightSide\\\"&gt;&lt;a&nbsp;href=\\\"&#123;url_title_path=\\\"&#123;embed:template_path&#125;\\\"&#125;\\\"&gt;&lt;img&nbsp;src=\\\"&#123;events_feature_image&#125;\\\"&nbsp;alt=\\\"\\\"&nbsp;\\/&gt;&lt;\\/a&gt;&lt;\\/p&gt;<br \\/>&nbsp;&#123;\\/if&#125;<br \\/>&nbsp;&#123;if&nbsp;events_summary&#125;<br \\/>&nbsp;&nbsp;&#123;events_summary&#125;<br \\/>&nbsp;&#123;\\/if&#125;<br \\/><br \\/>&nbsp;&lt;p&gt;&lt;a&nbsp;href=\\\"&#123;url_title_path=\\\"&#123;embed:template_path&#125;\\\"&#125;\\\"&nbsp;class=\\\"more\\\"&gt;Read&nbsp;more&nbsp;&amp;raquo;&lt;\\/a&gt;&lt;\\/p&gt;<br \\/>&#123;\\/exp:weblog:entries&#125;&nbsp;\\n\\n<\\/code><\\/div>\\n\\n<p>The code doesn&rsquo;t really need to be explained; it&rsquo;s not the important part of this post. So on the homepage, we had code that looked like this to pull in the event:<\\/p>\\n\\n<div class=\\\"codeblock\\\"><code>\\n&#123;embed=\\\"site\\/.events\\\"&nbsp;channel=\\\"events\\\"&nbsp;category=\\\"7\\\"&nbsp;template_path=\\\"news-events\\/events\\\"&#125;&nbsp;\\n\\n<\\/code><\\/div>\\n\\n<p>Now, what we really wanted to be able to do was to modify the <strong>exp:weblog:entries<\\/strong> code to pull from a different category if there were no results. Something like this:<\\/p>\\n\\n<div class=\\\"codeblock\\\"><code>\\n&#123;exp:weblog:entries&nbsp;weblog=\\\"&#123;channel_name&#125;\\\"&nbsp;category=\\\"&#123;category_id&#125;\\\"&nbsp;show_future_entries=\\\"yes\\\"&nbsp;show_expired=\\\"no\\\"&nbsp;limit=\\\"1\\\"&nbsp;disable=\\u00e2\\u20ac\\u0153category_fields|custom_fields|member_data|pagination|trackbacks\\u00e2\\u20ac\\u009d&#125;<br \\/>&amp;hellip;<br \\/>&nbsp;&#123;if&nbsp;no_results&#125;<br \\/>&nbsp;&nbsp;Code&nbsp;&nbsp;to&nbsp;pull&nbsp;from&nbsp;a&nbsp;different&nbsp;category<br \\/>&nbsp;&#123;\\/if&#125;<br \\/>&amp;hellip;<br \\/>&#123;\\/exp:weblog:entries&#125;&nbsp;\\n\\n<\\/code><\\/div>\\n\\n<p>But the problem was, there really was no code that we could put in there that would pull from another category since you can&rsquo;t nest <strong>exp:weblog:entries<\\/strong> tags. So that&rsquo;s when I remembered that you could stick an embed file in there that could have the <strong>exp:weblog:entries<\\/strong> tag inside of it.<\\/p>\\n\\n<p>Then we realized that the code we wanted to write would be exactly like the code in the embed file we were already working with.<\\/p>\\n\\n<p>So we did a little investigation and found out that <a href=\\\"http:\\/\\/expressionengine.com\\/docs\\/templates\\/embedding_templates.html\\\">according to the documentation (see notes section)<\\/a>, you cannot embed an embed within itself.<\\/p>\\n\\n<p>That makes sense, because you could create an infinite loop. But what if we knew that it would not return an infinite loop?<\\/p>\\n\\n<h2>Modified Code<\\/h2>\\n\\n<p>So we determined that what we could do is not pass in the category on the embed statement, and that would pull back any events.<\\/p>\\n\\n<div class=\\\"codeblock\\\"><code>\\n&#123;exp:weblog:entries&nbsp;weblog=\\\"&#123;channel_name&#125;\\\"&nbsp;category=\\\"&#123;category_id&#125;\\\"&nbsp;show_future_entries=\\\"yes\\\"&nbsp;show_expired=\\\"no\\\"&nbsp;limit=\\\"1\\\"&nbsp;disable=\\u00e2\\u20ac\\u0153category_fields|custom_fields|member_data|pagination|trackbacks\\u00e2\\u20ac\\u009d&#125;<br \\/>&amp;hellip;<br \\/>&nbsp;&#123;if&nbsp;no_results&#125;<br \\/>&nbsp;&nbsp;&#123;embed=\\\"site\\/.events\\\"&nbsp;channel=\\\"events\\\"&nbsp;template_path=\\\"news-events\\/events\\\"&#125;<br \\/>&nbsp;&#123;\\/if&#125;<br \\/>&amp;hellip;<br \\/>&#123;\\/exp:weblog:entries&#125;&nbsp;\\n\\n<\\/code><\\/div>\\n\\n<p>See how there is no category parameter this time? Here is the full modified code:<\\/p>\\n\\n<div class=\\\"codeblock\\\"><code>\\n&#123;assign_variable:channel_name=\\\"&#123;embed:channel&#125;\\\"&#125;<br \\/>&#123;assign_variable:category_id=\\\"&#123;embed:category&#125;\\\"&#125;<br \\/><br \\/>&#123;exp:weblog:entries&nbsp;weblog=\\\"&#123;channel_name&#125;\\\"&nbsp;category=\\\"&#123;category_id&#125;\\\"&nbsp;show_future_entries=\\\"yes\\\"&nbsp;show_expired=\\\"no\\\"&nbsp;limit=\\\"1\\\"&nbsp;disable=\\u00e2\\u20ac\\u0153category_fields|custom_fields|member_data|pagination|trackbacks\\u00e2\\u20ac\\u009d&#125;<br \\/><br \\/>&nbsp;&lt;h2&gt;&#123;title&#125;&lt;\\/h2&gt;<br \\/>&nbsp;&#123;if&nbsp;events_feature_image&#125;<br \\/>&nbsp;&nbsp;&lt;p&nbsp;class=\\\"rightSide\\\"&gt;&lt;a&nbsp;href=\\\"&#123;url_title_path=\\\"&#123;embed:template_path&#125;\\\"&#125;\\\"&gt;&lt;img&nbsp;src=\\\"&#123;events_feature_image&#125;\\\"&nbsp;alt=\\\"\\\"&nbsp;\\/&gt;&lt;\\/a&gt;&lt;\\/p&gt;<br \\/>&nbsp;&#123;\\/if&#125;<br \\/>&nbsp;&#123;if&nbsp;events_summary&#125;<br \\/>&nbsp;&nbsp;&#123;events_summary&#125;<br \\/>&nbsp;&#123;\\/if&#125;<br \\/><br \\/>&nbsp;&lt;p&gt;&lt;a&nbsp;href=\\\"&#123;url_title_path=\\\"&#123;embed:template_path&#125;\\\"&#125;\\\"&nbsp;class=\\\"more\\\"&gt;Read&nbsp;more&nbsp;&amp;raquo;&lt;\\/a&gt;&lt;\\/p&gt;<br \\/><br \\/>&nbsp;&lt;strong&gt;&#123;if&nbsp;no_results&#125;<br \\/>&nbsp;&nbsp;&#123;embed=\\\"site\\/.events\\\"&nbsp;channel=\\\"events\\\"&nbsp;template_path=\\\"news-events\\/events\\\"&#125;<br \\/>&nbsp;&#123;\\/if&#125;&lt;\\/strong&gt;<br \\/>&#123;\\/exp:weblog:entries&#125;&nbsp;\\n\\n<\\/code><\\/div>\\n\\n<p><strong>And that worked!<\\/strong><\\/p>\\n\\n<h2>Houston, we still have a problem&hellip;<\\/h2>\\n<p>But, we then realized that the same problem would occur if there were no future events in any categories. So, we still needed to go back and solve that problem by similarly passing the value for the <strong>show_expired<\\/strong> parameter in the embed statement as well. I left that to my colleague, so I didn&rsquo;t test this code, but this is my guess of how to solve that problem:<\\/p>\\n\\n<div class=\\\"codeblock\\\"><code>\\n&#123;assign_variable:channel_name=\\\"&#123;embed:channel&#125;\\\"&#125;<br \\/>&#123;assign_variable:category_id=\\\"&#123;embed:category&#125;\\\"&#125;<br \\/>&lt;strong&gt;&#123;assign_variable:show_expired=\\\"&#123;embed:show_expired&#125;\\\"&#125;&lt;\\/strong&gt;<br \\/><br \\/>&#123;exp:weblog:entries&nbsp;weblog=\\\"&#123;channel_name&#125;\\\"&nbsp;category=\\\"&#123;category_id&#125;\\\"&nbsp;show_future_entries=\\\"yes\\\"&nbsp;&lt;strong&gt;show_expired=\\\"&#123;show_expired&#125;\\\"&lt;\\/strong&gt;&nbsp;limit=\\\"1\\\"&nbsp;disable=\\u00e2\\u20ac\\u0153category_fields|custom_fields|member_data|pagination|trackbacks\\u00e2\\u20ac\\u009d&#125;<br \\/><br \\/>&nbsp;&lt;h2&gt;&#123;title&#125;&lt;\\/h2&gt;<br \\/>&nbsp;&#123;if&nbsp;events_feature_image&#125;<br \\/>&nbsp;&nbsp;&lt;p&nbsp;class=\\\"rightSide\\\"&gt;&lt;a&nbsp;href=\\\"&#123;url_title_path=\\\"&#123;embed:template_path&#125;\\\"&#125;\\\"&gt;&lt;img&nbsp;src=\\\"&#123;events_feature_image&#125;\\\"&nbsp;alt=\\\"\\\"&nbsp;\\/&gt;&lt;\\/a&gt;&lt;\\/p&gt;<br \\/>&nbsp;&#123;\\/if&#125;<br \\/>&nbsp;&#123;if&nbsp;events_summary&#125;<br \\/>&nbsp;&nbsp;&#123;events_summary&#125;<br \\/>&nbsp;&#123;\\/if&#125;<br \\/><br \\/>&nbsp;&lt;p&gt;&lt;a&nbsp;href=\\\"&#123;url_title_path=\\\"&#123;embed:template_path&#125;\\\"&#125;\\\"&nbsp;class=\\\"more\\\"&gt;Read&nbsp;more&nbsp;&amp;raquo;&lt;\\/a&gt;&lt;\\/p&gt;<br \\/><br \\/>&nbsp;&#123;if&nbsp;no_results&#125;<br \\/>&nbsp;&nbsp;&#123;embed=\\\"site\\/.events\\\"&nbsp;channel=\\\"events\\\"&nbsp;&lt;strong&gt;show_expired=\\\"yes\\\"&lt;\\/strong&gt;&nbsp;template_path=\\\"news-events\\/events\\\"&#125;<br \\/>&nbsp;&#123;\\/if&#125;<br \\/>&#123;\\/exp:weblog:entries&#125;&nbsp;\\n\\n<\\/code><\\/div>\\n\\n<h2>Conclusion<\\/h2>\\n<p>Was there some really easy way to do this that we completely blanked on? It seemed a little <em>hacky<\\/em>, but the solution worked.<\\/p>\",\"14\":{\"old_id\":{}}}}','2014-01-19 21:52:30','2014-08-08 19:32:30','1b335d00-ca08-4bc5-8d98-9b8b5cf99c81',1),(327,98,4,1,2,NULL,'{\"authorId\":\"1\",\"title\":\"SEO FAQ\",\"slug\":\"seo-faq\",\"postDate\":1255568840,\"expiryDate\":null,\"enabled\":\"1\",\"fields\":{\"2\":\"<p>Derek Powazek <a href=\\\"http:\\/\\/powazek.com\\/posts\\/2101\\\">clarifies some points<\\/a> from his latest post. Again, great stuff here.<\\/p>\",\"14\":{\"old_id\":{}},\"4\":\"http:\\/\\/powazek.com\\/posts\\/2101\"}}','2014-01-19 21:52:30','2014-08-08 19:32:30','bd40d65c-2e37-411d-bdce-22755f2ab98a',1),(328,99,4,1,2,NULL,'{\"authorId\":\"1\",\"title\":\"Spammers, Evildoers, and Opportunists\",\"slug\":\"spammers-evildoers-and-opportunists\",\"postDate\":1255440640,\"expiryDate\":null,\"enabled\":\"1\",\"fields\":{\"2\":\"<p>Derek Powazek <a href=\\\"http:\\/\\/powazek.com\\/posts\\/2090\\\">shares his opinion of SEO<\\/a>. I&rsquo;m not going to lie; I agree with what he is saying.<\\/p>\",\"14\":{\"old_id\":{}},\"4\":\"http:\\/\\/powazek.com\\/posts\\/2090\"}}','2014-01-19 21:52:30','2014-08-08 19:32:30','4df68a37-bb12-430b-b653-84792da81e5b',1),(329,100,4,1,2,NULL,'{\"authorId\":\"1\",\"title\":\"Dear Small Businesses: Some Advice\",\"slug\":\"dear-small-businesses-some-advice\",\"postDate\":1254490076,\"expiryDate\":null,\"enabled\":\"1\",\"fields\":{\"2\":\"<p>Jonathan Longnecker has posted <a href=\\\"http:\\/\\/fortysevenmedia.com\\/blog\\/archives\\/dear_small_businesses_some_advice\\/\\\">a well written article<\\/a> expressing his love and frustrations of designing websites with small businesses. Some very nice points and advice here.<\\/p>\",\"14\":{\"old_id\":{}},\"4\":\"http:\\/\\/fortysevenmedia.com\\/blog\\/archives\\/dear_small_businesses_some_advice\\/\"}}','2014-01-19 21:52:30','2014-08-08 19:32:30','92a03454-8245-431f-8b2d-52456a6ea04f',1),(330,101,4,1,2,NULL,'{\"authorId\":\"1\",\"title\":\"What Gives?\",\"slug\":\"what-gives\",\"postDate\":1254398893,\"expiryDate\":null,\"enabled\":\"1\",\"fields\":{\"2\":\"<p>I like <a href=\\\"http:\\/\\/boxofchocolates.ca\\/archives\\/2009\\/10\\/01\\/what-gives\\/\\\">this<\\/a>: &ldquo;We&rsquo;re working at building the most important communications network in history. What we do today matters&rdquo;. Good read, things need to change.<\\/p>\",\"14\":{\"old_id\":{}},\"4\":\"http:\\/\\/boxofchocolates.ca\\/archives\\/2009\\/10\\/01\\/what-gives\\/\"}}','2014-01-19 21:52:30','2014-08-08 19:32:30','4bfa9fef-20c0-472f-8bde-04d6bd86c9ba',1),(331,102,4,1,2,NULL,'{\"authorId\":\"1\",\"title\":\"The State of the Web Design Profession\",\"slug\":\"the-state-of-the-web-design-profession\",\"postDate\":1253276211,\"expiryDate\":null,\"enabled\":\"1\",\"fields\":{\"2\":\"<p>Noah Stokes has written a fantastic article on <a href=\\\"http:\\/\\/esbueno.noahstokes.com\\/post\\/190407732\\/the-state-of-the-web-design-profession\\\">the State of the Web Design Profession<\\/a>. Well said.<\\/p>\",\"14\":{\"old_id\":{}},\"4\":\"http:\\/\\/esbueno.noahstokes.com\\/post\\/190407732\\/the-state-of-the-web-design-profession\"}}','2014-01-19 21:52:30','2014-08-08 19:32:30','567888be-72c7-4915-ba4d-d14bdbc57b43',1),(332,103,4,1,2,NULL,'{\"authorId\":\"1\",\"title\":\"Simple jQuery Text Resizer\",\"slug\":\"simple-jquery-text-resizer\",\"postDate\":1251847543,\"expiryDate\":null,\"enabled\":\"1\",\"fields\":{\"2\":\"<p>I have done JavaScript text resizers a couple of different ways before, but I think I found my favorite way on a recent project. In previous projects, I have messed around with determining the current font size and adjusting it appropriately. But, in my opinion, simplifying things has made it a much better implementation.<\\/p>\\n<!--more-->\\n\\n<p>If you want to skip right to the <a href=\\\"http:\\/\\/trevordavis.net\\/play\\/jquery-text-resizer\\/\\\">demo<\\/a>, feel free.<\\/p>\\n\\n<p><a href=\\\"http:\\/\\/trevordavis.net\\/play\\/jquery-text-resizer\\/\\\" class=\\\"more-link\\\">View Demo<\\/a><\\/p>\\n\\n<h2>Disclaimer<\\/h2>\\n<p>Let me first say that I have started to size text in pixels and <a href=\\\"http:\\/\\/danielmall.com\\/archives\\/2007\\/04\\/20\\/soft_serve.php\\\">soft serving<\\/a> EMs to IE6. There are tons of different font sizing techniques you can use, but this is what is working for me. So use whatever technique you please, and adjust as needed.<\\/p>\\n\\n<p>Another thing: <strong>I hate text resizers<\\/strong>. In my opinion, there is no reason to duplicate browser functionality. I feel the same about back and print links, but sometimes the functionality is requested, so I have to build it.<\\/p>\\n\\n<h2>Concept<\\/h2>\\n<p>The idea is very simple: you click on the text size you want, and a class is added to the body to indicate which size the user has selected. Then, we take advantage of that body class when we are writing our CSS to size the different elements appropriately.<\\/p>\\n\\n<h2>Code<\\/h2>\\n<p>Let&rsquo;s first start as we always should, by creating the markup:<\\/p>\\n\\n<div class=\\\"codeblock\\\"><code>\\n&lt;ul&nbsp;class=\\\"resizer\\\"&gt;<br \\/>&nbsp;&lt;li&nbsp;class=\\\"small\\\"&gt;&lt;a&nbsp;href=\\\"#\\\"&gt;A&lt;\\/a&gt;&lt;\\/li&gt;<br \\/>&nbsp;&lt;li&nbsp;class=\\\"medium\\\"&gt;&lt;a&nbsp;href=\\\"#\\\"&gt;A&lt;\\/a&gt;&lt;\\/li&gt;<br \\/>&nbsp;&lt;li&nbsp;class=\\\"large\\\"&gt;&lt;a&nbsp;href=\\\"#\\\"&gt;A&lt;\\/a&gt;&lt;\\/li&gt;<br \\/>&lt;\\/ul&gt;&nbsp;\\n\\n<\\/code><\\/div>\\n\\n<h3>jQuery<\\/h3>\\n<p>The markup was simple enough, so let&rsquo;s get started on the jQuery. First, we want to execute our code when the document is loaded, and then add an event when one of the resizer links are clicked:<\\/p>\\n\\n<div class=\\\"codeblock\\\"><code>\\n$(document).ready(function()&nbsp;&#123;<br \\/>&nbsp;$(\'.resizer&nbsp;a\').click(function()&nbsp;&#123;<br \\/><br \\/>&nbsp;&#125;);<br \\/>&#125;);&nbsp;\\n\\n<\\/code><\\/div>\\n\\n<p>Next, we want to get the class of the parent of the link that has been clicked, remove any of the resizer classes from the body, and add the new one:<\\/p>\\n\\n<div class=\\\"codeblock\\\"><code>\\n$(document).ready(function()&nbsp;&#123;<br \\/>&nbsp;$(\'.resizer&nbsp;a\').click(function()&nbsp;&#123;<br \\/>&nbsp;&nbsp;var&nbsp;textSize&nbsp;=&nbsp;$(this).parent().attr(\'class\');<br \\/>&nbsp;&nbsp;$(\'body\').removeClass(\'small&nbsp;medium&nbsp;large\').addClass(textSize);<br \\/>&nbsp;&#125;);<br \\/>&#125;);&nbsp;\\n\\n<\\/code><\\/div>\\n\\n<p>We also don&rsquo;t want to regular action of the link to be followed, so we need to <strong>return false<\\/strong>:<\\/p>\\n\\n<div class=\\\"codeblock\\\"><code>\\n$(document).ready(function()&nbsp;&#123;<br \\/>&nbsp;$(\'.resizer&nbsp;a\').click(function()&nbsp;&#123;<br \\/>&nbsp;&nbsp;var&nbsp;textSize&nbsp;=&nbsp;$(this).parent().attr(\'class\');<br \\/>&nbsp;&nbsp;$(\'body\').removeClass(\'small&nbsp;medium&nbsp;large\').addClass(textSize);<br \\/>&nbsp;&nbsp;return&nbsp;false;<br \\/>&nbsp;&#125;);<br \\/>&#125;);&nbsp;\\n\\n<\\/code><\\/div>\\n\\n<p>I also think it is important to remember what text size a user has selected while browsing the site, so we will take advantage of the <a href=\\\"http:\\/\\/plugins.jquery.com\\/project\\/cookie\\\">jQuery Cookie plugin<\\/a> to help us with that. We will set a cookie that denotes which size the user has selected:<\\/p>\\n\\n<div class=\\\"codeblock\\\"><code>\\n$(document).ready(function()&nbsp;&#123;<br \\/>&nbsp;$(\'.resizer&nbsp;a\').click(function()&nbsp;&#123;<br \\/>&nbsp;&nbsp;var&nbsp;textSize&nbsp;=&nbsp;$(this).parent().attr(\'class\');<br \\/>&nbsp;&nbsp;$(\'body\').removeClass(\'small&nbsp;medium&nbsp;large\').addClass(textSize);<br \\/>&nbsp;&nbsp;$.cookie(\'TEXT_SIZE\',textSize,&nbsp;&#123;&nbsp;path:&nbsp;\'\\/\',&nbsp;expires:&nbsp;10000&nbsp;&#125;);<br \\/>&nbsp;&nbsp;return&nbsp;false;<br \\/>&nbsp;&#125;);<br \\/>&#125;);&nbsp;\\n\\n<\\/code><\\/div>\\n\\n<p>Finally, we just need to add a check to the beginning of the script, so that if that cookie is set, we add that size as a class to the body:<\\/p>\\n\\n<div class=\\\"codeblock\\\"><code>\\n$(document).ready(function()&nbsp;&#123;<br \\/>&nbsp;if($.cookie(\'TEXT_SIZE\'))&nbsp;&#123;<br \\/>&nbsp;&nbsp;$(\'body\').addClass($.cookie(\'TEXT_SIZE\'));&nbsp;<br \\/>&nbsp;&#125;<br \\/>&nbsp;$(\'.resizer&nbsp;a\').click(function()&nbsp;&#123;<br \\/>&nbsp;&nbsp;var&nbsp;textSize&nbsp;=&nbsp;$(this).parent().attr(\'class\');<br \\/>&nbsp;&nbsp;$(\'body\').removeClass(\'small&nbsp;medium&nbsp;large\').addClass(textSize);<br \\/>&nbsp;&nbsp;$.cookie(\'TEXT_SIZE\',textSize,&nbsp;&#123;&nbsp;path:&nbsp;\'\\/\',&nbsp;expires:&nbsp;10000&nbsp;&#125;);<br \\/>&nbsp;&nbsp;return&nbsp;false;<br \\/>&nbsp;&#125;);<br \\/>&#125;);&nbsp;\\n\\n<\\/code><\\/div>\\n\\n<h3>CSS<\\/h3>\\n<p> Now is where we get to the really powerful part of doing the text resizing like this: the CSS. We can start by simply stating our text size when it is in the small\\/default state:<\\/p>\\n\\n<div class=\\\"codeblock\\\"><code>\\nbody&nbsp;&#123;&nbsp;font:&nbsp;12px\\/18px&nbsp;Arial,&nbsp;sans-serif;&nbsp;&#125;&nbsp;\\n\\n<\\/code><\\/div>\\n\\n<p>Then, we just need to make a simple adjustment for the medium and large sizes:<\\/p>\\n\\n<div class=\\\"codeblock\\\"><code>\\n.medium&nbsp;&#123;&nbsp;font-size:&nbsp;16px;&nbsp;line-height:&nbsp;22px;&nbsp;&#125;<br \\/>.large&nbsp;&#123;&nbsp;font-size:&nbsp;20px;&nbsp;line-height:&nbsp;26px;&nbsp;&#125;&nbsp;\\n\\n<\\/code><\\/div>\\n\\n<p>So you can just carry through this idea for the rest of the elements that have been assigned a font size:<\\/p>\\n\\n<div class=\\\"codeblock\\\"><code>\\nh1&nbsp;&#123;&nbsp;font-size:&nbsp;30px;&nbsp;line-height:&nbsp;36px;&nbsp;&#125;<br \\/>.medium&nbsp;h1&nbsp;&#123;&nbsp;font-size:&nbsp;34px;&nbsp;line-height:&nbsp;40px;&nbsp;&#125;<br \\/>.large&nbsp;h1&nbsp;&#123;&nbsp;font-size:&nbsp;38px;&nbsp;line-height:&nbsp;44px;&nbsp;&#125;<br \\/>h2&nbsp;&#123;&nbsp;font-size:&nbsp;24px;&nbsp;line-height:&nbsp;30px;&nbsp;&#125;<br \\/>.medium&nbsp;h2&nbsp;&#123;&nbsp;font-size:&nbsp;28px;&nbsp;line-height:&nbsp;34px;&nbsp;&#125;<br \\/>.large&nbsp;h2&nbsp;&#123;&nbsp;font-size:&nbsp;32px;&nbsp;line-height:&nbsp;38px;&nbsp;&#125;<br \\/>h3&nbsp;&#123;&nbsp;font-size:&nbsp;18px;&nbsp;line-height:&nbsp;24px;&nbsp;&#125;<br \\/>.medium&nbsp;h3&nbsp;&#123;&nbsp;font-size:&nbsp;22px;&nbsp;line-height:&nbsp;28px;&nbsp;&#125;<br \\/>.large&nbsp;h3&nbsp;&#123;&nbsp;font-size:&nbsp;26px;&nbsp;line-height:&nbsp;32px;&nbsp;&#125;&nbsp;\\n\\n<\\/code><\\/div>\\n\\n<p><a href=\\\"http:\\/\\/trevordavis.net\\/play\\/jquery-text-resizer\\/\\\" class=\\\"more-link\\\">View Demo<\\/a><\\/p>\\n\\n<p>The idea is very simple, and it really separates the presentation and behavioral layers. So what do you think? Do you have another technique that you like?<\\/p>\",\"14\":{\"old_id\":{}}}}','2014-01-19 21:52:30','2014-08-08 19:32:30','58f64704-0255-43e2-b5f5-f07557232de1',1),(333,104,4,1,2,NULL,'{\"authorId\":\"1\",\"title\":\"Create a Newsletter with ExpressionEngine &amp; FieldFrame\",\"slug\":\"create-a-newsletter-with-expressionengine-fieldframe\",\"postDate\":1250559396,\"expiryDate\":null,\"enabled\":\"1\",\"fields\":{\"2\":\"<p>I guess it is time to come back from my little hiatus to actually write a blog post. I recently moved, so I have been busy with getting settled and working on freelance projects as well. If you <a href=\\\"http:\\/\\/twitter.com\\/davist11\\\">follow me on Twitter<\\/a>, you may have noticed that I have recently become obsessed with ExpressionEngine. I completed a <a href=\\\"http:\\/\\/trevordavis.net\\/work\\/ecfc\\/\\\">project<\\/a> at work using it, and I realized that I could have done something much more efficiently.<\\/p>\\n<!--more-->\\n<p><a href=\\\"http:\\/\\/ee.trevordavis.net\\/newsletter\\/\\\" class=\\\"more-link\\\">View Demo<\\/a><\\/p>\\n<p>I had to create an &ldquo;online newsletter&rdquo; that had issues that were made up of multiple articles. I ended up creating two separate weblogs: one for each issue, and one for individual articles. In the issues weblog, there was a <a href=\\\"http:\\/\\/brandon-kelly.com\\/playa\\\">Playa<\\/a> custom field which could be used to pick the individual articles to be published in that issue. But, another one of Brandon Kelly&rsquo;s fabulous extensions, <a href=\\\"http:\\/\\/brandon-kelly.com\\/fieldframe\\\">FieldFrame<\\/a>, seems to be a much better choice for creating this functionality.<\\/p>\\n<p>So, download, install, &amp; enable the <a href=\\\"http:\\/\\/brandon-kelly.com\\/fieldframe\\\">FieldFrame Extension<\\/a>, and let&rsquo;s be on our way.<\\/p>\\n<h2>Creating the Custom Field Group<\\/h2>\\n<p>First, let&rsquo;s create a field group named <strong>Newsletter<\\/strong>. Now, we just need to create one custom field with the field name of <strong>newsletter_articles<\\/strong>. Select <strong>FF Matrix<\\/strong> as the field type.<\\/p>\\n\\n<p>We want to have two cells in the FF Matrix: <strong>articles_title<\\/strong> & <strong>articles_body<\\/strong>. The cell types should be text and textarea, respectively. Then, adjust the sizes as you see fit.<\\/p>\\n\\n<p><img src=\\\"http:\\/\\/trevordavis.net\\/images\\/content\\/2009\\/08\\/newsletter-ff.png\\\" alt=\\\"FF Matrix Configuration\\\" width=\\\"570\\\" height=\\\"282\\\" class=\\\"frame pullLeft\\\" \\/><\\/p>\\n\\n<h2>Creating the Weblog<\\/h2>\\n<p>Now that we have the custom field group setup, we need to create a new weblog called <strong>newsletter<\\/strong> and make sure to assign our <strong>Newsletter field group<\\/strong> to it. Now that the newsletter weblog is created, we can start adding newsletters.<\\/p>\\n\\n<p><img src=\\\"http:\\/\\/trevordavis.net\\/images\\/content\\/2009\\/08\\/newletter-entry.png\\\" alt=\\\"Newsletter Entry Form\\\" width=\\\"570\\\" height=\\\"304\\\" class=\\\"frame pullLeft\\\" \\/><\\/p>\\n\\n<p>First, fill in the main title field, and then add in one or more articles. Now, let&rsquo;s get onto coding the output template.<\\/p>\\n\\n<h2>Creating the Template<\\/h2>\\n<p>Let&rsquo;s start by creating a new template group called <strong>newsletter<\\/strong>. We have two different pages that we want to create: the page listing all of the newsletter entries, and the individual newsletter entry displaying all of the articles. But, we can do this with only one template.<\\/p>\\n\\n<p>So, open up the index template in the newsletter template group, and we will start by setting up the structure of the template:<\\/p>\\n\\n<div class=\\\"codeblock\\\"><code>\\n&#123;assign_variable:weblog=\\\"newsletter\\\"&#125;<br \\/>&#123;embed=\\\"newsletter\\/.header\\\"&nbsp;title=\\\"&#123;if&nbsp;segment_2&#125;<br \\/>&nbsp;&#123;!--Display&nbsp;individual&nbsp;newsletter&nbsp;entry&nbsp;title&nbsp;here--&#125;<br \\/>&#123;if:else&#125;<br \\/>&nbsp;Newsletters<br \\/>&#123;\\/if&#125;<br \\/>\\\"&#125;<br \\/><br \\/>&#123;if&nbsp;segment_2&#125;<br \\/>&nbsp;&#123;!--Display&nbsp;full&nbsp;individual&nbsp;newsletter&nbsp;entry&nbsp;with&nbsp;1&nbsp;or&nbsp;more&nbsp;articles--&#125;<br \\/>&#123;if:else&#125;<br \\/>&nbsp;&#123;!--Display&nbsp;list&nbsp;of&nbsp;newsletters&nbsp;entered--&#125;<br \\/>&#123;\\/if&#125;<br \\/><br \\/>&#123;embed=\\\"newsletter\\/.footer\\\"&#125;&nbsp;\\n\\n<\\/code><\\/div>\\n\\n<p>We start by creating a variable to store the name of our weblog. Then, I created a simple header and footer to store some of the HTML that frames the page. I am passing in the title value in an embed variable to the header and displaying that in the browser title.<\\/p>\\n\\n<p>If the segment_2 value is not null, we know that we are on an individual newsletter page, so we will display that title. If the segment_2 value is null, then we are on the main newsletter listing page, so we just display Newsletters.<\\/p>\\n\\n<p>We are using the same conditional again for the content on the page. We either show the individual newsletter entry with the articles, or we show the list of newsletter entered. So let&rsquo;s build out the code a little more. First, let&rsquo;s finish displaying the title:<\\/p>\\n\\n<div class=\\\"codeblock\\\"><code>\\n&#123;embed=\\\"newsletter\\/.header\\\"&nbsp;title=\\\"&#123;if&nbsp;segment_2&#125;<br \\/>&nbsp;&#123;exp:weblog:entries&nbsp;weblog=\\\"&#123;weblog&#125;\\\"&nbsp;limit=\\\"1\\\"&nbsp;disable=\\\"categories|category_fields|custom_fields|member_data|pagination|trackbacks\\\"&#125;<br \\/>&nbsp;&nbsp;&#123;title&#125;&nbsp;:&nbsp;&#123;entry_date&nbsp;format=\\\"%F&nbsp;%j,&nbsp;%Y\\\"&#125;<br \\/>&nbsp;&#123;\\/exp:weblog:entries&#125;<br \\/>&#123;if:else&#125;<br \\/>&nbsp;Newsletters<br \\/>&#123;\\/if&#125;<br \\/>\\\"&#125;&nbsp;\\n\\n<\\/code><\\/div>\\n<p>Pretty simple stuff here, just displaying the title and entry date of the newsletter entry. Next, let&rsquo;s tackle displaying the single newsletter entry view:<\\/p>\\n\\n<div class=\\\"codeblock\\\"><code>\\n&#123;if&nbsp;segment_2&#125;<br \\/>&nbsp;&#123;exp:weblog:entries&nbsp;weblog=\\\"&#123;weblog&#125;\\\"&nbsp;limit=\\\"1\\\"&nbsp;disable=\\\"categories|category_fields|custom_fields|member_data|pagination|trackbacks\\\"&#125;<br \\/>&nbsp;&nbsp;&lt;h1&gt;&#123;title&#125;:&nbsp;&#123;entry_date&nbsp;format=\\\"%F&nbsp;%j,&nbsp;%Y\\\"&#125;&lt;\\/h1&gt;<br \\/><br \\/>&nbsp;&nbsp;&#123;newsletter_articles&#125;<br \\/>&nbsp;&nbsp;&nbsp;&lt;div&nbsp;class=\\\"entry\\\"&gt;<br \\/>&nbsp;&nbsp;&nbsp;&nbsp;&lt;h2&gt;&#123;articles_title&#125;&lt;\\/h2&gt;<br \\/>&nbsp;&nbsp;&nbsp;&nbsp;&#123;articles_body&#125;<br \\/>&nbsp;&nbsp;&nbsp;&lt;\\/div&gt;<br \\/>&nbsp;&nbsp;&#123;\\/newsletter_articles&#125;<br \\/>&nbsp;&#123;\\/exp:weblog:entries&#125;<br \\/>&nbsp;&lt;p&gt;&lt;a&nbsp;href=\\\"&#123;path=\\\"newsletter\\\"&#125;\\\"&gt;&amp;laquo;&nbsp;Back&nbsp;to&nbsp;Newsletters&lt;\\/a&gt;&lt;\\/p&gt;&nbsp;\\n\\n<\\/code><\\/div>\\n\\n<p>The beginning should look pretty normal: just using the standard exp:weblog:entries tag to pull in the individual entry. We first display the title and entry date. Then, the next part is where we are taking advantage of the <a href=\\\"http:\\/\\/brandon-kelly.com\\/fieldframe\\/docs\\/ff-matrix\\\">FieldFrame Matrix<\\/a>. We are basically just looping through all of the <strong>newsletter_articles<\\/strong> and displaying them in divs.<\\/p>\\n\\n<p>Finally, let&rsquo;s finish up by displaying the list of newsletter entries:<\\/p>\\n<div class=\\\"codeblock\\\"><code>\\n&#123;if:else&#125;<br \\/>&nbsp;&#123;exp:weblog:entries&nbsp;weblog=\\\"&#123;weblog&#125;\\\"&nbsp;disable=\\\"categories|category_fields|custom_fields|member_data|pagination|trackbacks\\\"&#125;<br \\/>&nbsp;&nbsp;&#123;if&nbsp;count&nbsp;==&nbsp;1&#125;<br \\/>&nbsp;&nbsp;&nbsp;&lt;ul&gt;<br \\/>&nbsp;&nbsp;&#123;\\/if&#125;<br \\/><br \\/>&nbsp;&nbsp;&nbsp;&lt;li&gt;&lt;a&nbsp;href=\\\"&#123;url_title_path=\\\"newsletter\\\"&#125;\\\"&gt;&#123;title&#125;:&nbsp;&#123;entry_date&nbsp;format=\\\"%F&nbsp;%j,&nbsp;%Y\\\"&#125;&lt;\\/a&gt;&lt;\\/li&gt;<br \\/>&nbsp;&nbsp;&#123;if&nbsp;count&nbsp;==&nbsp;total_results&#125;<br \\/>&nbsp;&nbsp;&nbsp;&lt;\\/ul&gt;<br \\/>&nbsp;&nbsp;&#123;\\/if&#125;<br \\/>&nbsp;&#123;\\/exp:weblog:entries&#125;<br \\/>&#123;\\/if&#125;&nbsp;\\n\\n<\\/code><\\/div>\\n\\n<p>Simple stuff again: just looping through all newsletter entries and displaying them in a list. The two conditional statements are so you don&rsquo;t end up with any empty unordered lists when there are no entries.<\\/p>\\n\\n<p><a href=\\\"http:\\/\\/ee.trevordavis.net\\/newsletter\\/\\\" class=\\\"more-link\\\">View Demo<\\/a><\\/p>\\n\\n<p>I wish I would have realized this would have been a more efficient way to build a newsletter in EE for the project; but, this is why always learning is so important.<\\/p>\",\"14\":{\"old_id\":{}}}}','2014-01-19 21:52:30','2014-08-08 19:32:30','08b86c1d-df1d-428a-b596-eb7ccf75185e',1),(334,105,4,1,2,NULL,'{\"authorId\":\"1\",\"title\":\"Packt Book Giveaway Winners\",\"slug\":\"packt-book-giveaway-winners\",\"postDate\":1248660451,\"expiryDate\":null,\"enabled\":\"1\",\"fields\":{\"2\":\"<p>Thank you everyone for participating in the <a href=\\\"http:\\/\\/trevordavis.net\\/blog\\/news\\/packt-book-giveaway\\/\\\">Packt Book Giveaway<\\/a>. It was interesting to see how many more people were interested in the jQuery book compared to the others. Now, on to the winners&hellip;<\\/p>\\n<!--more-->\\n<ul>\\n<li><p>The <strong>Choosing an Open Source CMS<\\/strong> book was won by <a href=\\\"http:\\/\\/trevordavis.net\\/blog\\/news\\/packt-book-giveaway\\/#comment-3212\\\">Eric D. Greene<\\/a> with his comment on the blog article.<\\/p><\\/li>\\n<li><p>The <strong>WordPress 2.7 Complete<\\/strong> book was won by <a href=\\\"http:\\/\\/twitter.com\\/mudd06\\/status\\/2823637564\\\">Adrian Turner<\\/a> with his Twitter entry.<\\/p><\\/li>\\n<li><p>The <strong>Learning jQuery 1.3<\\/strong> book was won by <a href=\\\"http:\\/\\/trevordavis.net\\/blog\\/news\\/packt-book-giveaway\\/#comment-3222\\\">CodeJoust Chattanooga Webdesign Development<\\/a> for their comment on the blog article.<\\/p><\\/li>\\n<\\/ul>\\n\\n<p>The winners have been contacted, but if their are any problems, I will choose a new winner. Thanks everyone for the entries, and I hope to be able to do this again.<\\/p>\",\"14\":{\"old_id\":{}}}}','2014-01-19 21:52:30','2014-08-08 19:32:30','42c5b85f-2a5d-4941-ba60-d121be8bb838',1),(335,106,4,1,2,NULL,'{\"authorId\":\"1\",\"title\":\"Web Design is a Journey\",\"slug\":\"web-design-is-a-journey\",\"postDate\":1248350172,\"expiryDate\":null,\"enabled\":\"1\",\"fields\":{\"2\":\"<p>I definitely don&rsquo;t categorize myself as a designer because there is no way I can create such <a href=\\\"http:\\/\\/carsonified.com\\/blog\\/design\\/web-design-is-a-journey\\/\\\">amazing work as this<\\/a>. It&rsquo;s fantastic to see the <strong>very<\\/strong> different directions that Mike went in before reaching the final design.<\\/p>\",\"14\":{\"old_id\":{}},\"4\":\"http:\\/\\/carsonified.com\\/blog\\/design\\/web-design-is-a-journey\\/\"}}','2014-01-19 21:52:30','2014-08-08 19:32:30','c227eb43-10b6-4c7c-b202-d449ab4ce9d0',1),(336,107,4,1,2,NULL,'{\"authorId\":\"1\",\"title\":\"Strangers at a cocktail party\",\"slug\":\"strangers-at-a-cocktail-party\",\"postDate\":1248116154,\"expiryDate\":null,\"enabled\":\"1\",\"fields\":{\"2\":\"<p><a href=\\\"http:\\/\\/www.37signals.com\\/svn\\/posts\\/1808-strangers-at-a-cocktail-party\\\">I love this way of thinking<\\/a>. A successful environment is one where you are able to tell people when they&rsquo;re full of crap.<\\/p>\",\"14\":{\"old_id\":{}},\"4\":\"http:\\/\\/37signals.com\\/svn\\/posts\\/1808-strangers-at-a-cocktail-party\"}}','2014-01-19 21:52:30','2014-08-08 19:32:30','0826396a-0499-41f6-8c61-8a7b53598f98',1),(337,108,4,1,2,NULL,'{\"authorId\":\"1\",\"title\":\"Packt Book Giveaway: jQuery, WordPress, &amp; Open Source CMS\",\"slug\":\"packt-book-giveaway\",\"postDate\":1247794920,\"expiryDate\":null,\"enabled\":\"1\",\"fields\":{\"2\":\"<p>I am pleased to announced that I have 3 <a href=\\\"http:\\/\\/www.packtpub.com\\/\\\">Packt<\\/a> books to giveaway: <a href=\\\"http:\\/\\/www.packtpub.com\\/learning-jquery-1.3\\/book\\/mid\\/130709nwu5nv\\\">Learning jQuery 1.3<\\/a>, <a href=\\\"http:\\/\\/www.packtpub.com\\/wordpress-2-7-complete-2nd-edition\\/book\\/mid\\/130709sh1anm\\\">WordPress 2.7 Complete<\\/a>, &amp; <a href=\\\"http:\\/\\/www.packtpub.com\\/choosing-an-open-source-cms-beginners-guide\\/book\\/mid\\/1307090ncy0g\\\">Choosing an Open Source CMS<\\/a>. Entering to win one of these books is very simple, and you can enter in two different ways.<\\/p>\\n<!--more-->\\n<p><img src=\\\"http:\\/\\/trevordavis.net\\/images\\/content\\/2009\\/07\\/packt-books.png\\\" alt=\\\"\\\" class=\\\"pullLeft\\\" width=\\\"520\\\" height=\\\"265\\\" \\/><\\/p>\\n\\n<p>But first, let me provide a little more detail about the books.<\\/p>\\n\\n<h2>Learning jQuery 1.3<\\/h2>\\n<p><a href=\\\"http:\\/\\/www.packtpub.com\\/learning-jquery-1.3\\/book\\/mid\\/130709nwu5nv\\\"><img src=\\\"http:\\/\\/trevordavis.net\\/images\\/content\\/2009\\/07\\/packt-jquery.jpg\\\" alt=\\\"Learning jQuery 1.3\\\" width=\\\"90\\\" height=\\\"110\\\" class=\\\"leftSide frame pullLeft\\\" \\/><\\/a>To build interesting, interactive sites, developers are turning to JavaScript libraries such as jQuery to automate common tasks and simplify complicated ones. Because many web developers have more experience with HTML and CSS than with JavaScript, the library\'s design lends itself to a quick start for designers with little programming experience. Experienced programmers will also be aided by its conceptual consistency.<\\/p>\\n<p>Revised and updated for version 1.3 of jQuery, this book teaches you the basics of jQuery for adding interactions and animations to your pages. Even if previous attempts at writing JavaScript have left you baffled, this book will guide you past the pitfalls associated with AJAX, events, effects, and advanced JavaScript language features.<\\/p>\\n<p><a href=\\\"http:\\/\\/www.packtpub.com\\/learning-jquery-1.3\\/book\\/mid\\/130709nwu5nv\\\" class=\\\"more-link\\\">Full Book Detail<\\/a><\\/p>\\n\\n\\n<h2>WordPress 2.7 Complete<\\/h2>\\n<p><a href=\\\"http:\\/\\/www.packtpub.com\\/wordpress-2-7-complete-2nd-edition\\/book\\/mid\\/130709sh1anm\\\"><img src=\\\"http:\\/\\/trevordavis.net\\/images\\/content\\/2009\\/07\\/packt-wordpress.jpg\\\" alt=\\\"WordPress 2.7 Complete\\\" width=\\\"90\\\" height=\\\"110\\\" class=\\\"leftSide frame pullLeft\\\" \\/><\\/a>Using WordPress you can easily create dynamic blogs and web sites with great content and many outstanding features. It is an ideal tool for developing blogs and although it is chiefly used for blogging, it can also be used as a complete CMS with very little effort. You can customize the features, incorporate your own design, and even write your own plug-ins with ease. Its versatility and ease of use have attracted a large, enthusiastic, and helpful community of users. While it is easy to get started with WordPress, its full power is not obvious.<\\/p>\\n<p>If you want to create a powerful, fully-featured blog or non-blog web site in no time, this book is for you. It will give you a rapid and straightforward introduction to the rich and powerful features of WordPress and get you up and running with a state-of-the-art blog as quickly and painlessly as possible. It will help you learn everything WordPress has to offer, from the ground up, so you can build your complete web site. You will see many of WordPress\'s hidden powers that will help you build a fully functioning web site.<\\/p>\\n\\n<p><a href=\\\"http:\\/\\/www.packtpub.com\\/wordpress-2-7-complete-2nd-edition\\/book\\/mid\\/130709sh1anm\\\" class=\\\"more-link\\\">Full Book Detail<\\/a><\\/p>\\n\\n<h2>Choosing an Open Source CMS<\\/h2>\\n<p><a href=\\\"http:\\/\\/www.packtpub.com\\/choosing-an-open-source-cms-beginners-guide\\/book\\/mid\\/1307090ncy0g\\\"><img src=\\\"http:\\/\\/trevordavis.net\\/images\\/content\\/2009\\/07\\/packt-cms.jpg\\\" alt=\\\"Choosing an Open Source CMS\\\" width=\\\"90\\\" height=\\\"110\\\" class=\\\"leftSide frame pullLeft\\\" \\/><\\/a>There are many powerful open source CMSs available to take the pain away from managing a web site. These systems are feature rich, often easy to use, and free. Unfortunately, there are so many choices it\'s tough to be sure you\'re choosing the right one. How can you be sure that you are selecting and working with the right tool?<\\/p>\\n\\n<p>This book will guide you through choosing the right CMS for your needs. You can be confident in your choice of CMS for the needs of your project. It will also help you make a start using the CMS, and give you a feel for what it\'s like to use it \\u00e2\\u20ac\\u201c even before you install it yourself.<\\/p>\\n\\n<p>Are you bewildered by the many open source CMSs available online? Open source CMSs are the best way to create and manage sophisticated web sites. You can create a site that precisely meets your business goals, and keep the site up to date easily because these systems give you full control over every aspect of your site. Because open source CMSs are free to download, you have a huge amount of choice between the various systems.<\\/p>\\n\\n<p><a href=\\\"http:\\/\\/www.packtpub.com\\/choosing-an-open-source-cms-beginners-guide\\/book\\/mid\\/1307090ncy0g\\\" class=\\\"more-link\\\">Full Book Detail<\\/a><\\/p>\\n\\n<h2>How to Enter<\\/h2>\\n<p>There are two different ways to enter:<\\/p>\\n<ol>\\n<li>Post a comment on this blog post with the book of your choice: <strong>jQuery<\\/strong>, <strong>WordPress<\\/strong>, or <strong>CMS<\\/strong>. Make sure you provide a valid email address so that I can get in touch with you if you win.<\\/li>\\n<li>Tweet about it. Here is what you need to tweet: \\n<p><a href=\\\"http:\\/\\/bit.ly\\/5J7Gj\\\">http:\\/\\/bit.ly\\/5J7Gj<\\/a> Free Packt Book Giveaway from <a href=\\\"http:\\/\\/twitter.com\\/davist11\\\">@davist11<\\/a> I want the <strong>(BOOK NAME HERE)<\\/strong> book.<\\/p>\\nThen just replace <strong>BOOK NAME HERE<\\/strong> with the book of your choice: <strong>jQuery<\\/strong>, <strong>WordPress<\\/strong>, or <strong>CMS<\\/strong>.<\\/li>\\n<\\/ol>\\n\\n<h2>Contest Details<\\/h2>\\n<p>You can enter once by submitting a comment on this post and <strong>as many times as you want on Twitter<\\/strong>. The contest will end Friday, July 24th at 6 PM ET. Once over, I will randomly choose the winners and notify them to get their addresses.<\\/p>\\n\\n<p>That&rsquo;s it, now get going and enter already. <strong>Big thanks to <a href=\\\"http:\\/\\/www.packtpub.com\\\">Packt Publishing<\\/a> for sponsoring the giveaway!<\\/strong><\\/p>\",\"14\":{\"old_id\":{}}}}','2014-01-19 21:52:30','2014-08-08 19:32:30','f4c2dcec-38bd-4c91-941a-0cefa327e674',1),(338,109,4,1,2,NULL,'{\"authorId\":\"1\",\"title\":\"Misunderstanding markup\",\"slug\":\"misunderstanding-markup\",\"postDate\":1246990286,\"expiryDate\":null,\"enabled\":\"1\",\"fields\":{\"2\":\"<p>Everyone is freaking out about the XHTML 2 Working Group disbanding at the end of the year. Relax people! Jeremy Keith <a href=\\\"http:\\/\\/adactio.com\\/journal\\/1595\\/\\\">helps to explain why nobody should worry<\\/a>.<\\/p>\",\"14\":{\"old_id\":{}},\"4\":\"http:\\/\\/adactio.com\\/journal\\/1595\\/\"}}','2014-01-19 21:52:30','2014-08-08 19:32:30','eafa36eb-ef59-4b23-8964-5a868e1c4819',1),(339,110,4,1,2,NULL,'{\"authorId\":\"1\",\"title\":\"Enough with the IE6 Whining\",\"slug\":\"enough-with-the-ie6-whining\",\"postDate\":1246411504,\"expiryDate\":null,\"enabled\":\"1\",\"fields\":{\"2\":\"<p>Seriously, I can&rsquo;t go a day without reading about someone complaining about IE6. Yes, we all know it&rsquo;s support is terrible. Yes, we know that Microsoft sat around and did nothing for 5 years. But look, they have stepped their game up, they have released 2 browser versions in 3 years. Yes, they are not up to par with more standards compliant browsers, but they are a major improvement over IE6.<\\/p>\\n<!--more-->\\n<p>So I ask you: <strong>what is Microsoft supposed to do<\\/strong>?<\\/p>\\n\\n<p>It isn&rsquo;t their fault that users won&rsquo;t upgrade their browser.<\\/p>\\n\\n<h2>Suck It Up<\\/h2>\\n\\n<p>If you call yourself a web developer, you should be able to make things presentable in IE6. If you can&rsquo;t, then you probably shouldn&rsquo;t call yourself one. So suck it up and deal with it. <strong>Doesn&rsquo;t the challenge make our jobs more interesting?<\\/strong><\\/p>\\n\\n<p>I&rsquo;m not saying that your site has to look exactly the same in all browsers. <a href=\\\"http:\\/\\/dowebsitesneedtolookexactlythesameineverybrowser.com\\/\\\">We already know the answer to that question<\\/a>. Just make it presentable. Make sure a user can access all content on the site. Remember, it&rsquo;s <strong>still<\\/strong> all about the content.<\\/p>\\n\\n<h3>Better Yet<\\/h3>\\n<p>Take a look at the traffic to the site and determine to what degree you even need to support it. If IE6 visitors only compromise a very small percentage, maybe consider using <a href=\\\"http:\\/\\/forabeautifulweb.com\\/blog\\/about\\/universal_internet_explorer_6_css\\/\\\">Andy Clarke&rsquo;s Universal Internet Explorer 6 CSS<\\/a>. That will put the content front and center in IE6, and you won&rsquo;t even have to worry about it.<\\/p>\\n\\n<p>Just please, stop complaining.<\\/p>\\n\\n<p><strong>&lt;\\/rant><\\/strong><\\/p>\",\"14\":{\"old_id\":{}}}}','2014-01-19 21:52:30','2014-08-08 19:32:30','7c9099f9-e5a2-486b-b0a8-c6bf13092d34',1),(340,111,4,1,2,NULL,'{\"authorId\":\"1\",\"title\":\"Walls Come Tumbling Down\",\"slug\":\"walls-come-tumbling-down\",\"postDate\":1246363252,\"expiryDate\":null,\"enabled\":\"1\",\"fields\":{\"2\":\"<p>Andy Clarke has posted the <a href=\\\"http:\\/\\/forabeautifulweb.com\\/blog\\/about\\/walls_come_tumbling_down_presentation_slides_and_transcript\\/\\\">slides and transcript<\\/a> from his presentation at @media2009. It&rsquo;s a long one, so I scanned it, but it looked like a fantastic presentation.<\\/p>\",\"14\":{\"old_id\":{}},\"4\":\"http:\\/\\/forabeautifulweb.com\\/blog\\/about\\/walls_come_tumbling_down_presentation_slides_and_transcript\\/\"}}','2014-01-19 21:52:31','2014-08-08 19:32:31','5ae9ab5f-801c-42b7-a476-9ddc44ed8a08',1),(341,112,4,1,2,NULL,'{\"authorId\":\"1\",\"title\":\"jQuery Inline Form Labels\",\"slug\":\"jquery-inline-form-labels\",\"postDate\":1245137101,\"expiryDate\":null,\"enabled\":\"1\",\"fields\":{\"2\":\"<p>I&rsquo;ve been seeing the trend of applying inline labels on form elements more and more these days. So I definitely needed to come up with a solid solution that would help me easily apply this effect.<\\/p>\\n<!--more-->\\n<p><a href=\\\"http:\\/\\/trevordavis.net\\/play\\/jquery-inline-form-labels\\/\\\"><img src=\\\"http:\\/\\/trevordavis.net\\/images\\/content\\/2009\\/06\\/jquery-inline-labels.png\\\" alt=\\\"jQuery Inline Form Labels\\\" width=\\\"280\\\" height=\\\"169\\\" class=\\\"leftSide\\\" \\/><\\/a>Maybe I need to explain a little better what I am referring to. Instead of using a label that is next to or above the input element, the label is actually within the input. Then, when the input is focused, the label goes away and you can enter your value into it. Finally, when the input is no longer focused, if there is no value entered, the inline label is then added back in.<\\/p>\\n\\n<p><a href=\\\"http:\\/\\/trevordavis.net\\/play\\/jquery-inline-form-labels\\/\\\" class=\\\"more-link\\\">See Demo<\\/a><\\/p>\\n\\n<h2>My Solution<\\/h2>\\n<p>The title attribute.<\\/p>\\n\\n<p>It&rsquo;s so simple, but perfect. A great benefit of using the title attribute, is that when you hover over the input, you get a little tooltip displaying the inline label. So all I need to do is add a title attribute with the text that we want to have show up as the inline label. Then, we just use a little jQuery to make it all happen.<\\/p>\\n\\n<h3>The jQuery<\\/h3>\\n\\n<p>First, we want to select each input that has a title attribute, once the document is loaded:<\\/p>\\n\\n<div class=\\\"codeblock\\\"><code>\\n$(document).ready(function()&nbsp;&#123;<br \\/>&nbsp;$(\'input&#91;title&#93;\').each(function()&nbsp;&#123;<br \\/>&nbsp;&amp;hellip;<br \\/>&nbsp;&#125;);<br \\/>&#125;);&nbsp;\\n\\n<\\/code><\\/div>\\n\\n<p>Next, if the value of the input element is empty, we want to take the title attribute and add it as the value of the input.<\\/p>\\n\\n<pre>$(document).ready(function() {\\n $(\'input[title]\').each(function() {\\n  <strong>if($(this).val() === \'\') {\\n   $(this).val($(this).attr(\'title\')); \\n  }<\\/strong>\\n });\\n});<\\/pre>\\n\\n<p>After that, we want to setup a function that will fire once the input is focused. When it is focused, if the value is equal to the title attribute, we want to set the value to nothing and add a class of focused:<\\/p>\\n\\n<pre>$(document).ready(function() {\\n $(\'input[title]\').each(function() {\\n  if($(this).val() === \'\') {\\n   $(this).val($(this).attr(\'title\')); \\n  }\\n  \\n  <strong>$(this).focus(function() {\\n   if($(this).val() === $(this).attr(\'title\')) {\\n    $(this).val(\'\').addClass(\'focused\'); \\n   }\\n  });<\\/strong>\\n });\\n});<\\/pre>\\n\\n<p>The reason why we add the class of focused is so that we can change the text color, border or anything to make it noticeable that the input is being focused. You can see this effect in the <a href=\\\"http:\\/\\/trevordavis.net\\/play\\/jquery-inline-form-labels\\/\\\">demo<\\/a>.\\n\\n<p>Finally, we want to add a function that will fire when the input loses focus. When it does, if the input value is empty, we want to set the value back to the title attribute and remove the class of focused:<\\/p>\\n\\n<pre>$(document).ready(function() {\\n $(\'input[title]\').each(function() {\\n  if($(this).val() === \'\') {\\n   $(this).val($(this).attr(\'title\')); \\n  }\\n  \\n  $(this).focus(function() {\\n   if($(this).val() === $(this).attr(\'title\')) {\\n    $(this).val(\'\').addClass(\'focused\'); \\n   }\\n  });\\n  \\n  <strong>$(this).blur(function() {\\n   if($(this).val() === \'\') {\\n    $(this).val($(this).attr(\'title\')).removeClass(\'focused\'); \\n   }\\n  });<\\/strong>\\n });\\n});<\\/pre>\\n\\n<p><a href=\\\"http:\\/\\/trevordavis.net\\/play\\/jquery-inline-form-labels\\/\\\" class=\\\"more-link\\\">See Demo<\\/a><\\/p>\\n\\n<p>And that&rsquo;s it. It&rsquo;s just a little bit of code, but it can go a long way. So take it and build on it.<\\/p>\",\"14\":{\"old_id\":{}}}}','2014-01-19 21:52:31','2014-08-08 19:32:31','975d9712-5a07-467e-89dd-2bd0c097d1f9',1),(342,113,4,1,2,NULL,'{\"authorId\":\"1\",\"title\":\"Dog and Pony Show Design\",\"slug\":\"dog-and-pony-show-design\",\"postDate\":1244808468,\"expiryDate\":null,\"enabled\":\"1\",\"fields\":{\"2\":\"<p>Andy Rutledge continues to blow my mind with his <a href=\\\"http:\\/\\/www.andyrutledge.com\\/dog-and-pony-show-design.php\\\">fantastic articles<\\/a>. &ldquo;Multiple design options are what you visit in your design process on your way toward a solution. What you present to your client must be the most effective result of your exhaustive efforts. Nothing less.&rdquo;<\\/p>\",\"14\":{\"old_id\":{}},\"4\":\"http:\\/\\/www.andyrutledge.com\\/dog-and-pony-show-design.php\"}}','2014-01-19 21:52:31','2014-08-08 19:32:31','39bb8008-d36f-45fc-93da-032e027fa762',1),(343,114,4,1,2,NULL,'{\"authorId\":\"1\",\"title\":\"Remember, You are the Expert\",\"slug\":\"remember-you-are-the-expert\",\"postDate\":1243995496,\"expiryDate\":null,\"enabled\":\"1\",\"fields\":{\"2\":\"<p>I&rsquo;ve been realizing lately that there is a big problem in the web design\\/development field: we aren&rsquo;t thought of as experts. Ok maybe that&rsquo;s not completely true, but I&rsquo;ve seen a lot of clients &ldquo;guiding&rdquo; the process. But actually, maybe this is our own fault, so how can we fix it?<\\/p>\\n<!--more-->\\n<h2>Be the Expert<\\/h2>\\n<p>We have to remember that we are the web experts in this relationship. We need to show confidence when talking with clients. Talk authoritatively about the details of the project and show them that we know what we are talking about. Just like we wouldn&rsquo;t go tell an architect how to design a house, our clients need to trust us to build their website.<\\/p>\\n\\n<h2>Stick to Your Guns<\\/h2>\\n<p>So let&rsquo;s say a client suggests something that you know would work better if you did it a different way; don&rsquo;t just say yes to the client, make your suggestion and build a case for it. Reference other examples. Site statistics. Fight for the best solution. Remember, <strong>you<\\/strong> are the expert.<\\/p>\\n\\n<h2>Read, Browse, and Read Some More<\\/h2>\\n<p>The web is full of great articles, bad examples of web sites, good examples of web sites, and much more. So by just spending time browsing the web, you can amass a huge amount of knowledge about what works and what doesn&rsquo;t. This will provide you with loads of ammunition to use when clients need your guidance.<\\/p>\\n\\n<h2>It&rsquo;s Hard<\\/h2>\\n<p>I struggle with it all the time. It&rsquo;s hard to say no to a client when they are the ones paying you. But the best thing to do is to make your suggestions, back it up with statistics &amp; examples, and hope that the client trusts your judgment.<\\/p>\\n\\n<p>Remember, <strong>you<\\/strong> are the expert.<\\/p>\",\"14\":{\"old_id\":{}}}}','2014-01-19 21:52:31','2014-08-08 19:32:31','ace205eb-64a9-4cdd-bcb3-ffe3d9918571',1),(344,115,4,1,2,NULL,'{\"authorId\":\"1\",\"title\":\"Of Brands and Commodities\",\"slug\":\"of-brands-and-commodities\",\"postDate\":1243865404,\"expiryDate\":null,\"enabled\":\"1\",\"fields\":{\"2\":\"<p><a href=\\\"http:\\/\\/www.andyrutledge.com\\/of-brands-and-commodities.php\\\">Genius<\\/a>: &ldquo;Turning down money to make money; sounds like a dodgy strategy, but it&rsquo;s more powerful than you might think. And it&rsquo;s required if you want to build a brand.&rdquo;<\\/p>\",\"14\":{\"old_id\":{}},\"4\":\"http:\\/\\/www.andyrutledge.com\\/of-brands-and-commodities.php\"}}','2014-01-19 21:52:31','2014-08-08 19:32:31','8c6afeea-fdc3-40d0-99ef-17cbdb890f37',1),(345,116,4,1,2,NULL,'{\"authorId\":\"1\",\"title\":\"10 Cost Effective Web Development Techniques\",\"slug\":\"10-cost-effective-web-development-techniques\",\"postDate\":1243006043,\"expiryDate\":null,\"enabled\":\"1\",\"fields\":{\"2\":\"<p>Excellent, excellent, excellent <a href=\\\"http:\\/\\/allinthehead.com\\/retro\\/340\\/10-cost-effective-web-development-techniques\\\">presentation from Drew McLellan<\\/a>. Wish I could have seen it in person.<\\/p>\",\"14\":{\"old_id\":{}},\"4\":\"http:\\/\\/allinthehead.com\\/retro\\/340\\/10-cost-effective-web-development-techniques\"}}','2014-01-19 21:52:31','2014-08-08 19:32:31','0009bea7-8a0a-43b8-9a01-f4337978a152',1),(346,117,4,1,2,NULL,'{\"authorId\":\"1\",\"title\":\"Creating a Google Map with ExpressionEngine\",\"slug\":\"creating-a-google-map-with-expressionengine\",\"postDate\":1242210241,\"expiryDate\":null,\"enabled\":\"1\",\"fields\":{\"2\":\"<p>Since I have a newfound love of ExpressionEngine, I wrote my most recent article for NETTUTS about <a href=\\\"http:\\/\\/net.tutsplus.com\\/tutorials\\/other\\/creating-a-google-map-with-expressionengine\\/\\\">creating a Google Map<\\/a> with it.<\\/p>\",\"14\":{\"old_id\":{}},\"4\":\"http:\\/\\/net.tutsplus.com\\/tutorials\\/cmss\\/creating-a-google-map-with-expressionengine\\/\"}}','2014-01-19 21:52:31','2014-08-08 19:32:31','85613992-e03d-41ec-904e-0a4044215ec7',1),(347,118,4,1,2,NULL,'{\"authorId\":\"1\",\"title\":\"User Experience Beyond the Web\",\"slug\":\"user-experience-beyond-the-web\",\"postDate\":1242090624,\"expiryDate\":null,\"enabled\":\"1\",\"fields\":{\"2\":\"<p>I had the &ldquo;pleasure&rdquo; of having jury duty last week. This was the first time I had ever been called for it before, and I must say that the experience definitely left a lot to be desired. It is definitely clear that all of the time spent on user experience on the web ends up providing a better experience for the end user. But my question now is: <strong>why isn&rsquo;t that kind of effort put in outside of the web?<\\/strong><\\/p>\\n<!--more-->\\n<p>There was basically no part of my jury duty experience that was pleasurable. Let me walk you through how my day went.<\\/p>\\n\\n<h2>Getting Up Early<\\/h2>\\n<p>First off, I had to get up super early in order to get there on time. If I am just going to be waiting around most of the day, <strong>why do I have to be there at 8:15am?<\\/strong><\\/p>\\n\\n<h2>Parking<\\/h2>\\n<p>So I pulled into the parking lot that they told me to park in, and started to walk to the court house. But wait, I had no clue where to go. There were <strong>no<\\/strong> signs at all. Luckily I guessed right, or I would have been late.<\\/p>\\n\\n<h2>Security<\\/h2>\\n<p>Since I was going into a court house, I totally expected to have to go through security. I was told that jury duty would probably end up being a lot of waiting around, and I saw that they had wireless internet access there, so I figured I would bring my laptop and get some work done.<\\/p>\\n\\n<p>First, I had to check my cellphone since it had a camera on it. I&rsquo;m not really sure what I would want to take pictures with, but whatever, I checked it. I did feel a little lost without my phone though.<\\/p>\\n\\n<p>Next, I had to go through the metal detectors and put my bag on the x-ray machine. The security officer asked me to take out my laptop and turn it on. I was confused as to why I would need to turn it on, but I hit the button and waited for it to power up. Then, he sees that my laptop has a built-in camera, and tells me that I can&rsquo;t bring it in.<\\/p>\\n\\n<p>I looked at him befuddled because I couldn&rsquo;t imagine sitting with my laptop facing out in the courtroom, taking pictures, and not having someone say something to me. The security officer tells me that I have to take it back to my car. So, I had to walk the quarter of a mile back to my car, put the laptop in there, then walk back and go through security.<\\/p>\\n\\n<p><strong>Seems a little ridiculous, right?<\\/strong> I must give them credit for actually having wireless internet, but not being able to bring in my laptop really pissed me off.<\\/p>\\n\\n<h2>The Waiting Room<\\/h2>\\n<p>Once I got through security and checked in, I was directed to a big room with a bunch of tables and chairs where we would wait for the next hour or so. Of course, the chairs were jammed in together, and there were not enough seats in the room for everyone.<\\/p>\\n\\n<p>We watched a 15 minute training video, and then the courthouse employees tried to get us to donate money to the court system. Yeah, after you put me in a bad mood because I couldn&rsquo;t bring in my laptop, I&rsquo;m sure I&rsquo;ll jump at the opportunity to give you money.<\\/p>\\n\\n<p>What a great start to the morning.<\\/p>\\n\\n<h2>The Next Waiting Room<\\/h2>\\n<p>Finally, my group got called to the courtroom, and we stood around and waited for about two hours until we finally got called into the court room to go through the jury selection process.<\\/p>\\n\\n<p>So again, more waiting, that&rsquo;s basically what I did all day.<\\/p>\\n\\n<h2>Does anyone think about the experience?<\\/h2>\\n<p>Here we are in a situation where we are supposed to be impartial and have no biases, and I was in a piss poor mood. Why don&rsquo;t they make these kind of situations as painless as possible? Why isn&rsquo;t there someone making sure that the experience of having jury duty is not awful?<\\/p>\\n\\n<p>Just like we devote time thinking about users&rsquo; experiences on the websites we are creating; organizations need to consider what those experiences outside of the web are like.<\\/p>\",\"14\":{\"old_id\":{}}}}','2014-01-19 21:52:31','2014-08-08 19:32:31','d9309656-cd0b-4996-a345-ca091c91d991',1),(348,119,4,1,2,NULL,'{\"authorId\":\"1\",\"title\":\"Designer, Owner, Manager - 1: Hiring the Right People\",\"slug\":\"designer-owner-manager-1-hiring-the-right-people\",\"postDate\":1241565143,\"expiryDate\":null,\"enabled\":\"1\",\"fields\":{\"2\":\"<p><a href=\\\"http:\\/\\/www.andyrutledge.com\\/hiring-the-right-people.php\\\">Andy Rutledge&rsquo;s latest article<\\/a> seems like it will come in handy when I eventually start my own business. Some great tips here; especially numbers 6 &amp; 8.<\\/p>\",\"14\":{\"old_id\":{}},\"4\":\"http:\\/\\/www.andyrutledge.com\\/hiring-the-right-people.php\"}}','2014-01-19 21:52:31','2014-08-08 19:32:31','e70c12ff-bd10-4b35-8dfc-846a25c01001',1),(349,120,4,1,2,NULL,'{\"authorId\":\"1\",\"title\":\"Let your links look like links\",\"slug\":\"let-your-links-look-like-links\",\"postDate\":1240541192,\"expiryDate\":null,\"enabled\":\"1\",\"fields\":{\"2\":\"<p>Roger Johansson discusses one of my big pet peeves: <a href=\\\"http:\\/\\/www.456bereastreet.com\\/archive\\/200904\\/let_your_links_look_like_links\\/\\\">links need to look like links<\\/a>. Links are the most important part of the web. Make them stand out.<\\/p>\",\"14\":{\"old_id\":{}},\"4\":\"http:\\/\\/www.456bereastreet.com\\/archive\\/200904\\/let_your_links_look_like_links\\/\"}}','2014-01-19 21:52:31','2014-08-08 19:32:31','b607ebbf-d6c7-469e-8421-98cc18e58fbd',1),(350,121,4,1,2,NULL,'{\"authorId\":\"1\",\"title\":\"Review: Building Websites with ExpressionEngine 1.6\",\"slug\":\"review-building-websites-with-expressionengine-1.6\",\"postDate\":1240221626,\"expiryDate\":null,\"enabled\":\"1\",\"fields\":{\"2\":\"<p>I was lucky enough to be contacted by <a href=\\\"http:\\/\\/www.packtpub.com\\/\\\">Packt Publishing<\\/a> to review the book <a href=\\\"http:\\/\\/www.packtpub.com\\/building-websites-with-expressionengine-1.6\\/book\\/mid\\/200409srne2o\\\">Building Websites with ExpressionEngine 1.6<\\/a> by Leonard Murphy. I have recently become very infatuated with <a href=\\\"http:\\/\\/expressionengine.com\\/\\\">ExpressionEngine<\\/a>, and I have devoted a lot of time to learning how to use it. This book was a great opportunity to see where my skill set was at.<\\/p>\\n<!--more-->\\n<a href=\\\"http:\\/\\/www.packtpub.com\\/building-websites-with-expressionengine-1.6\\/book\\/mid\\/200409srne2o\\\"><img src=\\\"http:\\/\\/trevordavis.net\\/images\\/content\\/2009\\/04\\/building-site-ee.jpg\\\" alt=\\\"Building Websites with ExpressionEngine 1.6\\\" class=\\\"rightSide frame\\\" height=\\\"259\\\" width=\\\"210\\\" \\/><\\/a>\\n<h2>Who is it for?<\\/h2>\\n<p>This book is definitely aimed toward beginning users of <abbr title=\\\"ExpressionEngine\\\">EE<\\/abbr> who have some knowledge of HTML. There is no knowledge of EE needed in order to read this book. So basically anyone who wants to learn how to use EE would benefit from reading this. While I have had some experience with EE, I found many parts of this book that were more of a review for me.<\\/p>\\n\\n<h2>What I liked<\\/h2>\\n<p>I really liked that Leonard uses a lot of screenshots and code snippets to help walk through how he is doing something. They definitely would have helped me to comprehend some of the EE concepts that I did not understand until devoting a lot of time online doing research.<\\/p>\\n\\n<p>This book does a great job of covering a variety of topics, from installing EE and creating a calendar to using other modules and plugins. Even though I have prior experience with EE and this book is geared toward beginners, I did learn a few things about EE from reading this book.<\\/p>\\n\\n<h2>What I could do without<\\/h2>\\n<p>There seemed to be a large chunk of the book devoted to applying CSS to the examples to make them presentable. I don&rsquo;t think there is any need to go through and explain the CSS; people are buying the book for information about EE.<\\/p>\\n\\n<p>I also wish that the example site that is used in the book were a bit more realistic. I really learned a lot from Mike Boyink&rsquo;s <a href=\\\"http:\\/\\/www.train-ee.com\\/courseware\\/free-tutorials\\/category\\/building-a-church-site\\/\\\">Building a Church Site<\\/a> and <a href=\\\"http:\\/\\/www.train-ee.com\\/courseware\\/free-tutorials\\/category\\/building-a-small-business-site\\/\\\">Building a Small Business Site<\\/a> tutorials because the content and functionality of the sites were <strong>real<\\/strong>.<\\/p>\\n\\n<h2>Conclusion<\\/h2>\\n<p>This book is really the only EE book out there. So if you are one of those people who has trouble learning from online tutorials and needs a book, this is definitely a solid choice to get started with EE. You can get a preview of it by <a href=\\\"http:\\/\\/trevordavis.net\\/images\\/content\\/2009\\/04\\/expressionengine-sample-chapter-3-start-posting.pdf\\\">downloading a sample chapter<\\/a>.<\\/p>\\n\\n<h3>Update<\\/h3>\\n<p>I actually wasn&rsquo;t aware of this, but Mike Boyink also has his <a href=\\\"http:\\/\\/www.train-ee.com\\/courseware\\/books\\/\\\">tutorials available as books<\\/a>.<\\/p>\",\"14\":{\"old_id\":{}}}}','2014-01-19 21:52:31','2014-08-08 19:32:30','086e80d7-5712-4518-88c4-07065ff08176',1),(351,122,4,1,2,NULL,'{\"authorId\":\"1\",\"title\":\"Dear Designer, You Suck\",\"slug\":\"dear-designer-you-suck\",\"postDate\":1239321720,\"expiryDate\":null,\"enabled\":\"1\",\"fields\":{\"2\":\"<p>As usual, <a href=\\\"http:\\/\\/www.subtraction.com\\/2009\\/04\\/09\\/dear-designer-you-suck\\\">another well thought out post<\\/a> from Khoi Vinh. I agree completely: I thrive on criticism. Even though I&rsquo;m not a designer, I&rsquo;m always looking to improve by hearing the thoughts of others.<\\/p>\",\"14\":{\"old_id\":{}},\"4\":\"http:\\/\\/www.subtraction.com\\/2009\\/04\\/09\\/dear-designer-you-suck\"}}','2014-01-19 21:52:31','2014-08-08 19:32:30','9ed5bc77-aa20-4212-8de1-ede13e838586',1),(352,123,4,1,2,NULL,'{\"authorId\":\"1\",\"title\":\"CSS Naked Day 2009\",\"slug\":\"css-naked-day-2009\",\"postDate\":1239270509,\"expiryDate\":null,\"enabled\":\"1\",\"fields\":{\"2\":\"<p>Yep, today, April 9, 2009, is <a href=\\\"http:\\/\\/naked.dustindiaz.com\\/\\\">the annual CSS Naked Day<\\/a>. Some people may think it is a huge risk to completely strip the design from my site for a day, but I think otherwise.<\\/p>\\n<!--more-->\\n<p>If anything, it gives visitors a chance to see my ability to code with web standards. I take the time and effort to write well structured XHTML, so it is still readable without any style applied.<\\/p>\\n<p>I am striping my design with the <a href=\\\"http:\\/\\/wordpress.org\\/extend\\/plugins\\/css-naked-day-noscript\\/\\\">CSS Naked Day WordPress Plugin<\\/a>. I encourage everyone else to <strong>strip down and show off your <code>body<\\/code><\\/strong>.<\\/p>\\n<p>Is anyone else going naked today?<\\/p>\",\"14\":{\"old_id\":{}}}}','2014-01-19 21:52:31','2014-08-08 19:32:30','9f4a217d-2879-47f8-90f6-e42cc13aa25b',1),(354,125,4,1,2,NULL,'{\"authorId\":\"1\",\"title\":\"Presentation to Damscus High School Students\",\"slug\":\"presentation-to-damscus-high-school-students\",\"postDate\":1238458671,\"expiryDate\":null,\"enabled\":\"1\",\"fields\":{\"2\":\"<p>I have been noticeably absent from my blog recently, but for good reason. I was honored when <a href=\\\"http:\\/\\/teachmetheweb.org\\/\\\">Jeff Brown<\\/a>, a teacher at Damascus High School, asked if I wanted to speak to the students in his advanced web class. I have always been interested in speaking about web development, so this seemed like a great first opportunity.<\\/p>\\n<!--more-->\\n<p>So basically, Mr. Brown has people in the industry come in and speak to his students every Friday. After looking at the <a href=\\\"http:\\/\\/teachmetheweb.org\\/index.php\\/tmtw\\/blog-article\\/spring_2009_guest_speaker_line_up\\/\\\">list of other speakers<\\/a>, I sure was nervous. I mean; I go to conferences to see some of these guys speak.<\\/p>\\n\\n<p>Mr. Brown has a great program going, and I was glad to be a part of it. He is one of the few teachers that actually teach about web standards and is a member of the <a href=\\\"http:\\/\\/www.webstandards.org\\/action\\/edutf\\\">WaSP Education Task Force<\\/a>. He also gave a presentation at <a href=\\\"http:\\/\\/refresh-dc.org\\/\\\">RefreshDC<\\/a> about web education the night before my presentation, that I unfortunately missed.<\\/p>\\n\\n<h2>My Presentation<\\/h2>\\n<p>I decided to focus my presentation on my path through web development, some tips to become successful as a front-end developer, and then how to maintain that success.<\\/p>\\n\\n<p>I was pretty nervous, and I felt like I raced at times, but I think it turned out well. Mr. Brown has posted the <a href=\\\"http:\\/\\/teachmetheweb.org\\/index.php\\/tmtw\\/blog-article\\/guest_speaker_reactions_trevor_davis\\/\\\">audio from the presentation<\\/a> on his site.<\\/p>\\n\\n<div id=\\\"presentation\\\" class=\\\"leftSide\\\">\\n <a href=\\\"http:\\/\\/www.slideshare.net\\/davist11\\/become-a-productive-frontend-developer-continue-to-be-one?type=powerpoint\\\">View Presentation: Become a Productive Front-End Developer &amp; Continue to be one<\\/a>\\n<script type=\\\"text\\/javascript\\\">\\n$(document).ready(function(){\\n    $(\'#presentation\').flash(\\n        { \\n          src: \'http:\\/\\/static.slidesharecdn.com\\/swf\\/ssplayer2.swf?doc=fed-090327210216-phpapp01&amp;rel=0&amp;stripped_title=become-a-productive-frontend-developer-continue-to-be-one\',\\n          width: 425,\\n          height: 277\\n        });\\n});\\n<\\/script>\\n<\\/div>\\n\\n<p class=\\\"clearing\\\">I would love to hear any feedback on the presentation, so let me know what you all think.<\\/p>\",\"14\":{\"old_id\":{}}}}','2014-01-19 21:52:31','2014-08-08 19:32:31','8287337b-7ab0-49c3-9c83-8872314626e3',1),(355,126,4,1,2,NULL,'{\"authorId\":\"1\",\"title\":\"Browser Compatibility Master Tables\",\"slug\":\"browser-compatibility-master-tables\",\"postDate\":1238452838,\"expiryDate\":null,\"enabled\":\"1\",\"fields\":{\"2\":\"<p>PPK has updated his <a href=\\\"http:\\/\\/www.quirksmode.org\\/compatibility.html\\\">browser compatibility tables<\\/a> to include more CSS3 testing, new browsers, and more. This is a great resource to determine which browsers support what.<\\/p>\",\"14\":{\"old_id\":{}},\"4\":\"http:\\/\\/www.quirksmode.org\\/compatibility.html\"}}','2014-01-19 21:52:31','2014-08-08 19:32:31','102fbb0e-bfd8-4f15-a9d4-195a39d8d97f',1),(356,127,4,1,2,NULL,'{\"authorId\":\"1\",\"title\":\"The 13 Most Essential Plugins for WordPress\",\"slug\":\"the-13-most-essential-plugins-for-wordpress\",\"postDate\":1236943561,\"expiryDate\":null,\"enabled\":\"1\",\"fields\":{\"2\":\"<p>I feel like right after I install WordPress; I immediately install the same set of plugins. I figured this would be a good topic for a post, so I chose that for my <a href=\\\"http:\\/\\/net.tutsplus.com\\/articles\\/web-roundups\\/the-13-most-essential-plugins-for-wordpress\\/\\\">most recent article at NETTUTS<\\/a>.<\\/p>\",\"14\":{\"old_id\":{}},\"4\":\"http:\\/\\/net.tutsplus.com\\/articles\\/web-roundups\\/the-13-most-essential-plugins-for-wordpress\\/\"}}','2014-01-19 21:52:31','2014-08-08 19:32:31','f7962330-c5c1-40af-8582-9b55b7e8d677',1),(357,128,4,1,2,NULL,'{\"authorId\":\"1\",\"title\":\"Dynamically Set a Body Id in PHP\",\"slug\":\"dynamically-set-a-body-id-in-php\",\"postDate\":1236735506,\"expiryDate\":null,\"enabled\":\"1\",\"fields\":{\"2\":\"<p>I have already written a couple of articles about body ids: <a href=\\\"http:\\/\\/trevordavis.net\\/blog\\/tutorial\\/set-a-body-id\\/\\\">\\nSet a Body Id Using PHP<\\/a> and <a href=\\\"http:\\/\\/trevordavis.net\\/blog\\/tutorial\\/setting-body-ids-in-expression-engine\\/\\\">Setting Body Ids in Expression Engine<\\/a>, but in a recent project, I was looking for a more dynamic way to do it in PHP and WordPress.<\\/p>\\n<!--more-->\\n<p>I don&rsquo;t think it&rsquo;s necessary to discuss the benefits of body ids because I have already discussed them in the other posts. So if you still aren&rsquo;t using body ids\\/classes, go read the articles, and start using them.<\\/p>\\n\\n<h2>The Plan<\\/h2>\\n<p>This seems so straightforward that I&rsquo;m not sure why I didn&rsquo;t start with this method. So basically, I look at the URI, and if it is equal to <strong>\\/<\\/strong> then I give it a <strong>body id of home<\\/strong>. Otherwise, I grab the <strong>first &ldquo;folder&rdquo; and set that as the body id<\\/strong>.<\\/p>\\n\\n<h3>Example<\\/h3>\\n<p>Let&rsquo;s say that the URI is: <strong>\\/about\\/team\\/leadership\\/<\\/strong>. The body id would be <strong>about<\\/strong>. Ok, the seems easy, let&rsquo;s get to the code.<\\/p>\\n\\n<h2>The Code<\\/h2>\\n\\n<p>Here is our setBodyId function:<\\/p>\\n\\n<div class=\\\"codeblock\\\"><code>\\nfunction&nbsp;setBodyId()&nbsp;&#123;<br \\/>&nbsp;$path&nbsp;=&nbsp;$_SERVER&#91;\'REQUEST_URI\'&#93;;<br \\/><br \\/>&nbsp;if($path&nbsp;===&nbsp;\'\\/\')&nbsp;&#123;<br \\/>&nbsp;&nbsp;$bodyId&nbsp;=&nbsp;\'home\';<br \\/>&nbsp;&#125;&nbsp;else&nbsp;&#123;<br \\/>&nbsp;&nbsp;$bodyId&nbsp;=&nbsp;substr($path,&nbsp;1,&nbsp;(strpos($path,\'\\/\',1)-1));<br \\/>&nbsp;&#125;<br \\/>&nbsp;<br \\/>&nbsp;return&nbsp;$bodyId;<br \\/>&#125;&nbsp;\\n\\n<\\/code><\\/div>\\n<p class=\\\"note\\\"><em>If you are using this in WordPress, put this function in your theme function.php file.<\\/em><\\/p>\\n\\n<p>Then, you want to call the function and assign it to a variable:<\\/p>\\n\\n<div class=\\\"codeblock\\\"><code>\\n$bodyId&nbsp;=&nbsp;setBodyId();&nbsp;\\n\\n<\\/code><\\/div>\\n\\n<p>Finally, if the $bodyId variable is not empty, add the id attribute on the body tag:<\\/p>\\n<div class=\\\"codeblock\\\"><code>\\n&lt;body&lt;?php&nbsp;if(!empty($bodyId))&nbsp;echo&nbsp;\'&nbsp;id=\\\"\'.$bodyId.\'\\\"\';?&gt;&gt;&nbsp;\\n\\n<\\/code><\\/div>\\n\\n<h2>Conclusion<\\/h2>\\n<p>It&rsquo;s so simple, yet powerful. This could also easily be recoded in other programming languages. What do you think? Any ideas for improvement?<\\/p>\",\"14\":{\"old_id\":{}}}}','2014-01-19 21:52:32','2014-08-08 19:32:31','21ebe07c-4ddc-4100-b1e6-897b14dc3ca3',1),(358,129,4,1,2,NULL,'{\"authorId\":\"1\",\"title\":\"We Refuse\",\"slug\":\"we-refuse\",\"postDate\":1236686822,\"expiryDate\":null,\"enabled\":\"1\",\"fields\":{\"2\":\"<p>You know what, <a href=\\\"http:\\/\\/unitinteractive.com\\/blog\\/2009\\/03\\/07\\/we-refuse\\/\\\">I refuse too<\\/a>. Just because someone tells you that you shouldn&rsquo;t do something, that doesn&rsquo;t mean you have to listen. Would you have gotten to where you are today by only listening to other people?<\\/p>\",\"14\":{\"old_id\":{}},\"4\":\"http:\\/\\/unitinteractive.com\\/blog\\/2009\\/03\\/07\\/we-refuse\\/\"}}','2014-01-19 21:52:32','2014-08-08 19:32:31','e43d2b19-1106-4a92-979e-4b7a1a0f5ca6',1),(359,130,4,1,3,NULL,'{\"authorId\":\"1\",\"title\":\"There\\u2019s always time to launch your dream\",\"slug\":\"theres-always-time-to-launch-your-dream\",\"postDate\":1236677460,\"expiryDate\":null,\"enabled\":\"1\",\"fields\":{\"2\":\"<p>I agree completely, <a href=\\\"http:\\/\\/www.37signals.com\\/svn\\/posts\\/1619-theres-always-time-to-launch-your-dream\\\">stop with the excuses<\\/a>. I don\\u2019t think I tried that hard in school either. Definitely the quote of the article: \\u201cNever let your schooling interfere with your education\\u201d.<\\/p>\",\"14\":{\"old_id\":{}},\"4\":\"http:\\/\\/37signals.com\\/svn\\/posts\\/1619-theres-always-time-to-launch-your-dream\"}}','2014-01-19 21:52:32','2014-08-08 19:32:31','35d3b428-ff0d-4aed-81b2-69437e7c2336',1),(360,131,4,1,3,NULL,'{\"authorId\":\"1\",\"title\":\"WordPress & jQuery Contact Form without a Plugin\",\"slug\":\"wordpress-jquery-contact-form-without-a-plugin\",\"postDate\":1235599620,\"expiryDate\":null,\"enabled\":\"1\",\"fields\":{\"2\":\"<p>There are <a href=\\\"http:\\/\\/wordpress.org\\/extend\\/plugins\\/search.php?q=contact\\\">lots of WordPress plugins for contact forms<\\/a>, but wouldn\\u2019t it be nice to have more control over the markup? In this tutorial, I am going to show how to use a custom page template to create a contact form in WordPress without a plugin.<\\/p>\\r\\n<!--more--><p>Some people may want to skip the post and get to the demo and source files:<\\/p><p class=\\\"clearfix\\\"><a href=\\\"http:\\/\\/wp.trevordavis.net\\/contact-form\\/\\\" class=\\\"leftSide more-link\\\">View Demo<\\/a> <a href=\\\"http:\\/\\/trevordavis.net\\/images\\/content\\/2009\\/02\\/contact-form.zip\\\" class=\\\"leftSide more-link\\\">Download Source Files<\\/a><\\/p><h2>So, why not use a plugin?<\\/h2><p>Well, I think that a contact form is so simple that a WordPress plugin that doesn\\u2019t provide exactly what I want is pretty lame. Plus, I don\\u2019t need all those fancy interfaces for building the form; I just need the code.<\\/p><h2>The Plan<\\/h2><p>Our plan is to create a custom <a href=\\\"http:\\/\\/codex.wordpress.org\\/Pages#Creating_Your_Own_Page_Templates\\\">WordPress Page Template<\\/a>, then create a page that uses that template. Finally, we will add in a little <strong>jQuery<\\/strong> to improve the form. Let\\u2019s write a little pseudo code to help determine how our page template will be structured.<\\/p><h3>Pseudo Code<\\/h3>\\r\\n<pre>&lt;code&gt;If form was submitted validate it\\r\\n If the form was submitted successfully\\r\\n  Send email(s)\\r\\n Else\\r\\n  Set variables to show errors\\r\\n\\r\\nIf the form was submitted successfully\\r\\n Show thank you message\\r\\nElse\\r\\n Show form (with errors if there are any)<\\/pre>\\r\\n<h3>Creating the WordPress Page Template<\\/h3><p>Alright, so first, we are going to start with some basic stuff: define the template name, include the header\\/sidebar\\/footer, and setup the basic structure of our pseudo code.<\\/p><pre>&lt;code&gt;&lt;?php\\r\\n\\/*\\r\\nTemplate Name: Contact Form\\r\\n*\\/\\r\\n?&gt;\\r\\n\\r\\n&lt;?php \\r\\n\\/\\/If the form is submitted\\r\\nif(isset($_POST[\'submitted\'])) {\\r\\n \\/\\/If there is no error, send the email\\r\\n if(!isset($hasError)) {\\r\\n\\r\\n }\\r\\n} ?&gt;\\r\\n\\r\\n&lt;?php get_header(); ?&gt;\\r\\n\\r\\n&lt;?php \\r\\n\\/\\/If the email was sent, show a thank you message\\r\\n\\/\\/Otherwise show form\\r\\nif(isset($emailSent) && $emailSent == true) {\\r\\n?&gt;\\r\\n\\r\\n&lt;?php } else { ?&gt;\\r\\n\\r\\n&lt;?php } ?&gt;\\r\\n\\r\\n&lt;?php get_sidebar(); ?&gt;\\r\\n\\r\\n&lt;?php get_footer(); ?&gt;<\\/pre>\\r\\n<h3>The Form<\\/h3><p>Next, let\\u2019s code the actual form. I also want to provide the ability for the user to enter some text to go above the form, so we are going to use the regular loop:<\\/p>\\r\\n<pre>&lt;code&gt;&lt;?php if(isset($emailSent) && $emailSent == true) { ?&gt;\\r\\n\\r\\n &lt;div class=\\\"thanks\\\"&gt;\\r\\n  &lt;h1&gt;Thanks, &lt;?=$name;?&gt;&lt;\\/h1&gt;\\r\\n  &lt;p&gt;Your email was successfully sent. I will be in touch soon.&lt;\\/p&gt;\\r\\n &lt;\\/div&gt;\\r\\n\\r\\n&lt;?php } else { ?&gt;\\r\\n\\r\\n &lt;?php if (have_posts()) : ?&gt;\\r\\n \\r\\n  &lt;?php while (have_posts()) : the_post(); ?&gt;\\r\\n   &lt;h1&gt;&lt;?php the_title(); ?&gt;&lt;\\/h1&gt;\\r\\n   &lt;?php the_content(); ?&gt;\\r\\n  \\r\\n   &lt;?php if(isset($hasError) || isset($captchaError)) { ?&gt;\\r\\n    &lt;p class=\\\"error\\\"&gt;\\r\\n     There was an error submitting the form.\\r\\n    &lt;p&gt;\\r\\n   &lt;?php } ?&gt;\\r\\n \\r\\n   &lt;form action=\\\"&lt;?php the_permalink(); ?&gt;\\\" id=\\\"contactForm\\\" method=\\\"post\\\"&gt;\\r\\n \\r\\n   &lt;\\/form&gt;\\r\\n \\r\\n  &lt;?php endwhile; ?&gt;\\r\\n &lt;?php endif; ?&gt;\\r\\n&lt; } ?&gt;<\\/pre>\\r\\n<p>If the <strong>emailSent<\\/strong> variable is set to true, we display the thank you message. Otherwise, we show the form. So we are outputting the title of the page, and any content that was entered. Then, we are checking to see if there was an error. Finally, we display the form:<\\/p><pre>&lt;code&gt;&lt;ol class=\\\"forms\\\"&gt;\\r\\n &lt;li&gt;\\r\\n  &lt;label for=\\\"contactName\\\"&gt;Name&lt;\\/label&gt;\\r\\n  &lt;input type=\\\"text\\\" name=\\\"contactName\\\" id=\\\"contactName\\\" value=\\\"\\r\\n  &lt;?php if(isset($_POST[\'contactName\'])) echo $_POST[\'contactName\'];?&gt;\\\"\\r\\n   class=\\\"requiredField\\\" \\/&gt;\\r\\n  &lt;?php if($nameError != \'\') { ?&gt;\\r\\n   &lt;span class=\\\"error\\\"&gt;&lt;?=$nameError;?&gt;&lt;\\/span&gt; \\r\\n  &lt;?php } ?&gt;\\r\\n &lt;\\/li&gt;\\r\\n \\r\\n &lt;li&gt;\\r\\n  &lt;label for=\\\"email\\\"&gt;Email&lt;\\/label&gt;\\r\\n  &lt;input type=\\\"text\\\" name=\\\"email\\\" id=\\\"email\\\" value=\\\"\\r\\n  &lt;?php if(isset($_POST[\'email\']))  echo $_POST[\'email\'];?&gt;\\\"\\r\\n  class=\\\"requiredField email\\\" \\/&gt;\\r\\n  &lt;?php if($emailError != \'\') { ?&gt;\\r\\n   &lt;span class=\\\"error\\\"&gt;&lt;?=$emailError;?&gt;&lt;\\/span&gt;\\r\\n  &lt;?php } ?&gt;\\r\\n &lt;\\/li&gt;\\r\\n \\r\\n &lt;li class=\\\"textarea\\\"&gt;\\r\\n  &lt;label for=\\\"commentsText\\\"&gt;Comments&lt;\\/label&gt;\\r\\n  &lt;textarea name=\\\"comments\\\" id=\\\"commentsText\\\" rows=\\\"20\\\" cols=\\\"30\\\" class=\\\"requiredField\\\"&gt;\\r\\n  &lt;?php if(isset($_POST[\'comments\'])) { \\r\\n   if(function_exists(\'stripslashes\')) { \\r\\n    echo stripslashes($_POST[\'comments\']); \\r\\n   } else { \\r\\n    echo $_POST[\'comments\']; \\r\\n   }\\r\\n   } ?&gt;&lt;\\/textarea&gt;\\r\\n  &lt;?php if($commentError != \'\') { ?&gt;\\r\\n   &lt;span class=\\\"error\\\"&gt;&lt;?=$commentError;?&gt;&lt;\\/span&gt; \\r\\n  &lt;?php } ?&gt;\\r\\n &lt;\\/li&gt;\\r\\n &lt;li class=\\\"inline\\\"&gt;\\r\\n  &lt;input type=\\\"checkbox\\\" name=\\\"sendCopy\\\" id=\\\"sendCopy\\\" value=\\\"true\\\"\\r\\n  &lt;?php if(isset($_POST[\'sendCopy\']) && $_POST[\'sendCopy\'] == true) \\r\\n   echo \' checked=\\\"checked\\\"\'; ?&gt; \\r\\n  \\/&gt;\\r\\n  &lt;label for=\\\"sendCopy\\\"&gt;Send a copy of this email to yourself&lt;\\/label&gt;\\r\\n &lt;\\/li&gt;\\r\\n &lt;li class=\\\"screenReader\\\"&gt;\\r\\n  &lt;label for=\\\"checking\\\" class=\\\"screenReader\\\"&gt;If you want to submit this form, do not enter anything in this field&lt;\\/label&gt;\\r\\n  &lt;input type=\\\"text\\\" name=\\\"checking\\\" id=\\\"checking\\\" class=\\\"screenReader\\\" value=\\\"\\r\\n  &lt;?php if(isset($_POST[\'checking\']))  echo $_POST[\'checking\'];?&gt;\\\"\\r\\n  \\/&gt;\\r\\n &lt;\\/li&gt;\\r\\n &lt;li class=\\\"buttons\\\"&gt;\\r\\n  &lt;input type=\\\"hidden\\\" name=\\\"submitted\\\" id=\\\"submitted\\\" value=\\\"true\\\" \\/&gt;\\r\\n  &lt;button type=\\\"submit\\\"&gt;Email me &raquo;&lt;\\/button&gt;\\r\\n &lt;\\/li&gt;\\r\\n&lt;\\/ol&gt;<\\/pre>\\r\\n<p class=\\\"note\\\"><em>Note: Line wrapping added for readability.<\\/em><\\/p><p>Ok, wow, that may seem like a lot. So let\\u2019s break down the name field to see what this code is actually doing:<\\/p><pre>&lt;code&gt;&lt;li&gt;&lt;label for=\\\"contactName\\\"&gt;Name&lt;\\/label&gt;\\r\\n &lt;input type=\\\"text\\\" name=\\\"contactName\\\" id=\\\"contactName\\\" value=\\\"&lt;?php if(isset($_POST[\'contactName\'])) echo $_POST[\'contactName\'];?&gt;\\\" class=\\\"requiredField\\\" \\/&gt;\\r\\n &lt;?php if($nameError != \'\') { ?&gt;\\r\\n  &lt;span class=\\\"error\\\"&gt;&lt;?=$nameError;?&gt;&lt;\\/span&gt; \\r\\n &lt;?php } ?&gt;\\r\\n&lt;\\/li&gt;<\\/pre>\\r\\n<p>We are displaying each form field in a list item, displaying the label, input field, and then showing an error message if there is one. We are also displaying the value in the form field if it was already submitted.<\\/p><p>So in essence, we are just doing that for each field of the form. You could easily go into the code to add more fields.<\\/p><p>We are also using honeypot captcha to see if a bot was trying to submit the form:<\\/p><pre>&lt;code&gt;&lt;li class=\\\"screenReader\\\"&gt;\\r\\n &lt;label for=\\\"checking\\\" class=\\\"screenReader\\\"&gt;If you want to submit this form, do not enter anything in this field&lt;\\/label&gt;\\r\\n &lt;input type=\\\"text\\\" name=\\\"checking\\\" id=\\\"checking\\\" class=\\\"screenReader\\\" value=\\\"&lt;?php if(isset($_POST[\'checking\']))  echo $_POST[\'checking\'];?&gt;\\\" \\/&gt;\\r\\n&lt;\\/li&gt;<\\/pre>\\r\\n<p>That list item is pushed off the page with CSS, and if there is a value in that field, we can assume that it is not a human trying to submit the form:<\\/p><pre>&lt;code&gt;.screenReader { \\r\\n left: -9999px; \\r\\n position: absolute; \\r\\n top: -9999px;\\r\\n}<\\/pre>\\r\\n<h3>The Validation<\\/h3><p>Next, we are going to have a conditional statement to determine if the form was submitted or not:<\\/p><pre>&lt;code&gt;&lt;?php \\r\\n\\/\\/If the form is submitted\\r\\nif(isset($_POST[\'submitted\'])) {\\r\\n\\r\\n} ?&gt;<\\/pre>\\r\\n<p>Within that conditional, is where we are going to do all of our validation of the required fields. First, let\\u2019s check to see if our honeypot captcha form field is filled in. If it is, then we will display an error and not check anymore of the form:<\\/p><pre>&lt;code&gt;\\/\\/Check to see if the honeypot captcha field was filled in\\r\\nif(trim($_POST[\'checking\']) !== \'\') {\\r\\n $captchaError = true;\\r\\n} else {\\r\\n\\r\\n}<\\/pre>\\r\\n<p>So if the captcha field was left blank, we will continue to validate the required fields:<\\/p><pre>&lt;code&gt;\\/\\/Check to make sure that the name field is not empty\\r\\nif(trim($_POST[\'contactName\']) === \'\') {\\r\\n $nameError = \'You forgot to enter your name.\';\\r\\n $hasError = true;\\r\\n} else {\\r\\n $name = trim($_POST[\'contactName\']);\\r\\n}\\r\\n\\r\\n\\/\\/Check to make sure sure that a valid email address is submitted\\r\\nif(trim($_POST[\'email\']) === \'\')  {\\r\\n $emailError = \'You forgot to enter your email address.\';\\r\\n $hasError = true;\\r\\n} else if (!eregi(\\\"^[A-Z0-9._%-]+@[A-Z0-9._%-]+.[A-Z]{2,4}$\\\", trim($_POST[\'email\']))) {\\r\\n $emailError = \'You entered an invalid email address.\';\\r\\n $hasError = true;\\r\\n} else {\\r\\n $email = trim($_POST[\'email\']);\\r\\n}\\r\\n \\r\\n\\/\\/Check to make sure comments were entered \\r\\nif(trim($_POST[\'comments\']) === \'\') {\\r\\n $commentError = \'You forgot to enter your comments.\';\\r\\n $hasError = true;\\r\\n} else {\\r\\n if(function_exists(\'stripslashes\')) {\\r\\n  $comments = stripslashes(trim($_POST[\'comments\']));\\r\\n } else {\\r\\n  $comments = trim($_POST[\'comments\']);\\r\\n }\\r\\n}<\\/pre>\\r\\n<p>Again, that may seem like a little much, so let\\u2019s just take a look at the validation on the name field:<\\/p><pre>&lt;code&gt;if(trim($_POST[\'contactName\']) === \'\') {\\r\\n $nameError = \'You forgot to enter your name.\';\\r\\n $hasError = true;\\r\\n} else {\\r\\n $name = trim($_POST[\'contactName\']);\\r\\n}<\\/pre>\\r\\n<p>If the name field if empty, set a variable that will display the name error and set a flag saying that there was an error on the form. Otherwise, set a variable that will contain the name value from the form.<\\/p><h3>Sending the Email<\\/h3><p>Now, we want to send the email if there are no errors:<\\/p>\\r\\n<pre>&lt;code&gt;\\/\\/If there is no error, send the email\\r\\nif(!isset($hasError)) {\\r\\n\\r\\n $emailTo = \'&lt;strong&gt;me@somedomain.com&lt;\\/strong&gt;\';\\r\\n $subject = \'Contact Form Submission from \'.$name;\\r\\n $sendCopy = trim($_POST[\'sendCopy\']);\\r\\n $body = \\\"Name: $name nnEmail: $email nnComments: $comments\\\";\\r\\n $headers = \'From: My Site &lt;\'.$emailTo.\'&gt;\' . \\\"rn\\\" . \'Reply-To: \' . $email;\\r\\n \\r\\n mail($emailTo, $subject, $body, $headers);\\r\\n\\r\\n if($sendCopy == true) {\\r\\n  $subject = \'You emailed &lt;strong&gt;Your Name&lt;\\/strong&gt;\';\\r\\n  $headers = \'From: &lt;strong&gt;Your Name&lt;\\/strong&gt; &lt;&lt;strong&gt;noreply@somedomain.com&lt;\\/strong&gt;&gt;\';\\r\\n  mail($email, $subject, $body, $headers);\\r\\n }\\r\\n\\r\\n $emailSent = true;\\r\\n\\r\\n}<\\/pre>\\r\\n<p class=\\\"note\\\"><em>Note: Items bolded are values that you will want to change before implementing.<\\/em><\\/p><p>I personally like to have the contact form submission come from myself. That way, I just setup a filter in Gmail, and I can guarantee that it won\\u2019t get caught in my spam filter. The second email is only sent if the user checks the checkbox to send a copy to themselves.<\\/p><p><a href=\\\"http:\\/\\/trevordavis.net\\/images\\/content\\/2009\\/02\\/contact-form.txt\\\" class=\\\"more-link\\\">View Entire Custom Page Template<\\/a><\\/p><h3>Creating the Page in WordPress<\\/h3><p>First, you want to upload the <a href=\\\"http:\\/\\/trevordavis.net\\/images\\/content\\/2009\\/02\\/contact-form.zip\\\">contact-form.php<\\/a> page template to your themes folder. Next, you will create the page in WordPress and select <strong>Contact Form<\\/strong> as the page template.<\\/p><p class=\\\"pullLeft\\\"><img src=\\\"http:\\/\\/trevordavis.net\\/images\\/content\\/2009\\/02\\/wordpress-page-template.png\\\" alt=\\\"Adding WordPress page template\\\" class=\\\"frame\\\" height=\\\"341\\\" width=\\\"570\\\"><\\/p><p>Then, just publish your page and you will have your contact form. Well, the form will be usable, but we are going to add in some CSS and jQuery to finish it off.<\\/p><h3>Styling the Form<\\/h3><p>I recently wrote <a href=\\\"http:\\/\\/trevordavis.net\\/blog\\/tutorial\\/flexible-and-semantic-forms-with-a-little-jquery\\/\\\">an article about styling forms<\\/a>, so we are just going to stick with some basic styles:<\\/p><pre>&lt;code&gt;.screenReader { left: -9999px; position: absolute; top: -9999px; }\\r\\n.thanks { background: #F2F3F6; border: 1px solid #7E8AA2; padding: 10px; }\\r\\n\\r\\n\\/*****Forms*****\\/\\r\\nol.forms { float: left; list-style: none; margin: 0; width: 100%; }\\r\\nol.forms li { \\r\\n clear: both; \\r\\n float: left; \\r\\n margin-bottom: 18px; \\r\\n position: relative;\\r\\n width: 100%;\\r\\n}\\r\\nol.forms label {\\r\\n cursor: pointer;\\r\\n display: block;\\r\\n float: left;\\r\\n font-weight: bold;\\r\\n padding-right: 20px;\\r\\n width: 100px;\\r\\n}\\r\\nol.forms input, ol.forms textarea {\\r\\n border: 1px solid #7E8AA2;\\r\\n border-radius: 3px;\\r\\n font: inherit;\\r\\n -moz-border-radius: 3px;\\r\\n padding: 2px;\\r\\n -webkit-border-radius: 3px;\\r\\n width: 214px;\\r\\n}\\r\\nol.forms textarea { height: 300px; width: 334px; }\\r\\nol.forms input:focus, ol.forms textarea:focus { background-color: #f2f3f6; border-color: #ff9800; }\\r\\n.error { color: #f00; }\\r\\nol.forms li .error { font-size: 12px; margin-left: 20px; }\\r\\nol.forms li.textarea .error {\\r\\n display: block;\\r\\n position: absolute;\\r\\n right: 0;\\r\\n top: 0;\\r\\n width: 100px;\\r\\n}\\r\\nol.forms li.screenReader { margin-bottom: 0; }\\r\\nol.forms li.buttons button {\\r\\n background: #ff9800;\\r\\n border: none;\\r\\n color: #000;\\r\\n cursor: pointer;\\r\\n font: 16px\\/16px \\\"Avenir LT Std\\\", Helvetica, Arial, sans-serif;\\r\\n overflow: hidden;\\r\\n padding: 6px 3px 3px 3px;\\r\\n text-transform: uppercase;\\r\\n width: auto;\\r\\n}\\r\\nol.forms li.buttons button:hover { color: #222; }\\r\\nol.forms li.buttons button:active { left: -1px; position: relative; top: -1px; }\\r\\nol.forms li.buttons, ol.forms li.inline { float: right; width: 460px; }\\r\\nol.forms li.inline input { width: auto; }\\r\\nol.forms li.inline label { display: inline; float: none; width: auto; }<\\/pre>\\r\\n<p>So drop that CSS in your theme stylesheet and you will see the form start to look much better.<\\/p><h3>Enhancing the form with some jQuery<\\/h3><p>I have also already written about creating <a href=\\\"http:\\/\\/trevordavis.net\\/blog\\/ajax-forms-with-jquery\\/\\\">AJAX forms with jQuery<\\/a>, but I thought I would specifically talk about an AJAX script for a contact form.<\\/p><p>First, we want to execute our jQuery when the document is ready and the form was submitted:<\\/p><pre>&lt;code&gt;$(document).ready(function() {\\r\\n $(\'form#contactForm\').submit(function() {\\r\\n  \\r\\n  return false;\\r\\n });\\r\\n});<\\/pre>\\r\\n<p>Next, we want to hide any error messages if there are any and validate any required fields which are denoted with a class of <strong>requiredField<\\/strong>:<\\/p><pre>&lt;code&gt;$(\'form#contactForm .error\').remove();\\r\\nvar hasError = false;\\r\\n$(\'.requiredField\').each(function() {\\r\\n   \\r\\n});<\\/pre>\\r\\n<p>After that, we want to validate that the field is not empty and append an error message if it is:<\\/p><pre>&lt;code&gt;if(jQuery.trim($(this).val()) == \'\') {\\r\\n var labelText = $(this).prev(\'label\').text();\\r\\n $(this).parent().append(\'&lt;span class=\\\"error\\\"&gt;You forgot to enter your \'+labelText+\'.&lt;\\/span&gt;\');\\r\\n hasError = true;\\r\\n}<\\/pre>\\r\\n<p>If the field is not empty and also has a class of <strong>email<\\/strong>, we want to validate that the email address is valid:<\\/p><pre>&lt;code&gt; else if($(this).hasClass(\'email\')) {\\r\\n var emailReg = \\/^([w-.]+@([w-]+.)+[w-]{2,4})?$\\/;\\r\\n if(!emailReg.test(jQuery.trim($(this).val()))) {\\r\\n  var labelText = $(this).prev(\'label\').text();\\r\\n  $(this).parent().append(\'&lt;span class=\\\"error\\\"&gt;You entered an invalid \'+labelText+\'.&lt;\\/span&gt;\');\\r\\n  hasError = true;\\r\\n }\\r\\n}<\\/pre>\\r\\n<p>If there are no errors, then we want to replace the submit button with a loading image:<\\/p><pre>&lt;code&gt;if(!hasError) {\\r\\n$(\'form#contactForm li.buttons button\').fadeOut(\'normal\', function() {\\r\\n $(this).parent().append(\'&lt;img src=\\\"\\/wp-content\\/themes\\/td-v3\\/images\\/template\\/loading.gif\\\" alt=\\\"Loading&hellip;\\\" height=\\\"31\\\" width=\\\"31\\\" \\/&gt;\');\\r\\n});<\\/pre>\\r\\n<p class=\\\"note\\\"><em>Note: You will need to update the source of the image to wherever you upload it in your theme.<\\/em><\\/p><p>Finally, let\\u2019s submit the form via an AJAX request, slide the form up, and show a thank you message:<\\/p><pre>&lt;code&gt;var formInput = $(this).serialize();\\r\\n$.post($(this).attr(\'action\'),formInput, function(data){\\r\\n $(\'form#contactForm\').slideUp(\\\"fast\\\", function() {       \\r\\n  $(this).before(\'&lt;p class=\\\"thanks\\\"&gt;&lt;strong&gt;Thanks!&lt;\\/strong&gt; Your email was successfully sent. I check my email all the time, so I should be in touch soon.&lt;\\/p&gt;\');\\r\\n });\\r\\n});<\\/pre>\\r\\n<p>Take a look at the entire script:<\\/p><pre>&lt;code&gt;$(document).ready(function() {\\r\\n $(\'form#contactForm\').submit(function() {\\r\\n  $(\'form#contactForm .error\').remove();\\r\\n  var hasError = false;\\r\\n  $(\'.requiredField\').each(function() {\\r\\n   if(jQuery.trim($(this).val()) == \'\') {\\r\\n    var labelText = $(this).prev(\'label\').text();\\r\\n    $(this).parent().append(\'&lt;span class=\\\"error\\\"&gt;You forgot to enter your \'+labelText+\'.&lt;\\/span&gt;\');\\r\\n    hasError = true;\\r\\n   } else if($(this).hasClass(\'email\')) {\\r\\n    var emailReg = \\/^([w-.]+@([w-]+.)+[w-]{2,4})?$\\/;\\r\\n    if(!emailReg.test(jQuery.trim($(this).val()))) {\\r\\n     var labelText = $(this).prev(\'label\').text();\\r\\n     $(this).parent().append(\'&lt;span class=\\\"error\\\"&gt;You entered an invalid \'+labelText+\'.&lt;\\/span&gt;\');\\r\\n     hasError = true;\\r\\n    }\\r\\n   }\\r\\n  });\\r\\n  if(!hasError) {\\r\\n   $(\'form#contactForm li.buttons button\').fadeOut(\'normal\', function() {\\r\\n    $(this).parent().append(\'&lt;img src=\\\"\\/wp-content\\/themes\\/td-v3\\/images\\/template\\/loading.gif\\\" alt=\\\"Loading&hellip;\\\" height=\\\"31\\\" width=\\\"31\\\" \\/&gt;\');\\r\\n   });\\r\\n   var formInput = $(this).serialize();\\r\\n   $.post($(this).attr(\'action\'),formInput, function(data){\\r\\n    $(\'form#contactForm\').slideUp(\\\"fast\\\", function() {       \\r\\n     $(this).before(\'&lt;p class=\\\"thanks\\\"&gt;&lt;strong&gt;Thanks!&lt;\\/strong&gt; Your email was successfully sent. I check my email all the time, so I should be in touch soon.&lt;\\/p&gt;\');\\r\\n    });\\r\\n   });\\r\\n  }\\r\\n  \\r\\n  return false;\\r\\n  \\r\\n });\\r\\n});<\\/pre>\\r\\n<p>Just include it in the head of your document after jQuery, and you are good to go:<\\/p><pre>&lt;code&gt;&lt;script type=\\\"text\\/javascript\\\" src=\\\"&lt;?php bloginfo(\'template_directory\'); ?&gt;\\/scripts\\/jquery.js\\\"&gt;&lt;\\/script&gt;\\r\\n&lt;script type=\\\"text\\/javascript\\\" src=\\\"&lt;?php bloginfo(\'template_directory\'); ?&gt;\\/scripts\\/contact-form.js\\\"&gt;&lt;\\/script&gt;<\\/pre>\\r\\n<p class=\\\"note\\\"><em>Note: You may need to change the source depending upon where you upload the files in your theme.<\\/em><\\/p><h2>Conclusion<\\/h2><p class=\\\"clearfix\\\"><a href=\\\"http:\\/\\/wp.trevordavis.net\\/contact-form\\/\\\" class=\\\"leftSide more-link\\\">View Demo<\\/a> <a href=\\\"http:\\/\\/trevordavis.net\\/images\\/content\\/2009\\/02\\/contact-form.zip\\\" class=\\\"leftSide more-link\\\">Download Source Files<\\/a><\\/p><p>That\\u2019s it! Just upload the files and you\\u2019ve got your form. Since you\\u2019ve got the code right in front of you, it should be very easy to tweak and add on to. Enjoy!<\\/p><p class=\\\"ad\\\">\\r\\nCenturyLink Deals: <a href=\\\"http:\\/\\/www.centurylinkquote.com\\/bundles.html\\\">Internet, Phone, & TV Bundles<\\/a><\\/p>\",\"14\":{\"old_id\":{}}}}','2014-01-19 21:52:32','2014-08-08 19:32:31','a66370ac-65a1-481e-b837-29c76cde2088',1),(361,132,4,1,2,NULL,'{\"authorId\":\"1\",\"title\":\"Orange You Sorry About Tropicana?\",\"slug\":\"orange-you-sorry-about-tropicana\",\"postDate\":1235509674,\"expiryDate\":null,\"enabled\":\"1\",\"fields\":{\"2\":\"<p>Khoi Vinh discusses <a href=\\\"http:\\/\\/www.subtraction.com\\/2009\\/02\\/24\\/orange-you-sorry-about-tropicana\\\">the disastrous Tropicana redesign<\\/a> and wonders if the branding agency behind it, Arnell, did it just for the press. I certainly agree that it was a disaster, as I felt like I was trying to find my orange juice for 5 minutes.<\\/p>\",\"14\":{\"old_id\":{}},\"4\":\"http:\\/\\/www.subtraction.com\\/2009\\/02\\/24\\/orange-you-sorry-about-tropicana\"}}','2014-01-19 21:52:32','2014-08-08 19:32:31','dda4b2f1-a020-4c86-b608-13dc6f0c544b',1),(362,133,4,1,2,NULL,'{\"authorId\":\"1\",\"title\":\"Achieve Your Big Goals With Incremental Persistence\",\"slug\":\"achieve-your-big-goals-with-incremental-persistence\",\"postDate\":1235497401,\"expiryDate\":null,\"enabled\":\"1\",\"fields\":{\"2\":\"<p><a href=\\\"http:\\/\\/www.devlounge.net\\/strategy\\/achieve-your-big-goals-with-incremental-persistence\\\">Incremental success<\\/a> really helps in working toward your larger goals. I&rsquo;ve been trying to improve something on my site every day. Recent examples: <a href=\\\"http:\\/\\/trevordavis.net\\/work\\/\\\">tooltips on my portfolio<\\/a> &amp; <a href=\\\"http:\\/\\/trevordavis.net\\/blog\\/\\\">better pagination on my blog<\\/a>.<\\/p>\",\"14\":{\"old_id\":{}},\"4\":\"http:\\/\\/www.devlounge.net\\/strategy\\/achieve-your-big-goals-with-incremental-persistence\"}}','2014-01-19 21:52:32','2014-08-08 19:32:31','e961f9ba-153c-4dfd-b7db-01619f482b5a',1),(363,134,4,1,2,NULL,'{\"authorId\":\"1\",\"title\":\"10 tips for efficient design\",\"slug\":\"10-tips-for-efficient-design\",\"postDate\":1235126877,\"expiryDate\":null,\"enabled\":\"1\",\"fields\":{\"2\":\"<p>Paul Boag says that &ldquo;being a good designer is not always enough to survive hard economic times. You need to be efficient too.&rdquo; With that, he gives us <a href=\\\"http:\\/\\/boagworld.com\\/design\\/10_tips_for_efficient_design\\/\\\">10 tips for efficient design<\\/a>. I think #10 should be <em>emphasized<\\/em> and then <strong>emphasized again<\\/strong>; it&rsquo;s so important!<\\/p>\",\"14\":{\"old_id\":{}},\"4\":\"http:\\/\\/boagworld.com\\/design\\/10-tips-for-efficient-design\"}}','2014-01-19 21:52:32','2014-08-08 19:32:31','bac390cd-3881-4329-9f1c-2f9fecf0424f',1),(364,135,4,1,2,NULL,'{\"authorId\":\"1\",\"title\":\"5 Ways to Instantly Write Better CSS\",\"slug\":\"5-ways-to-instantly-write-better-css\",\"postDate\":1234775082,\"expiryDate\":null,\"enabled\":\"1\",\"fields\":{\"2\":\"<p>In my most recent article at NETTUTS: <a href=\\\"http:\\/\\/nettuts.com\\/tutorials\\/html-css-techniques\\/5-tips-to-writing-better-css\\/\\\">5 Ways to Instantly Write Better CSS<\\/a>, I share some tips that have helped me to write better CSS.<\\/p>\\n<!--more-->\\n<p>This is definitely not me trying to tell you to code in a certain way; they are just some tips that I have found to become very useful for myself. I hope you enjoy, and feel free to <a href=\\\"http:\\/\\/nettuts.com\\/tutorials\\/html-css-techniques\\/5-tips-to-writing-better-css\\/#add\\\">share other tips<\\/a>.<\\/p>\",\"14\":{\"old_id\":{}}}}','2014-01-19 21:52:32','2014-08-08 19:32:31','e6b5ab8c-bcd8-487f-9361-0ccd48c2973c',1),(365,136,4,1,2,NULL,'{\"authorId\":\"1\",\"title\":\"CSS3 Feedback: Selector Blocks\",\"slug\":\"css3-feedback-selector-blocks\",\"postDate\":1234436235,\"expiryDate\":null,\"enabled\":\"1\",\"fields\":{\"2\":\"<p>Ohh, please make <a href=\\\"http:\\/\\/meyerweb.com\\/eric\\/thoughts\\/2009\\/02\\/12\\/selector-blocks\\/\\\">the ability to do this<\\/a> happen. It would make CSS so much more lightweight and easier to write.<\\/p>\",\"14\":{\"old_id\":{}},\"4\":\"http:\\/\\/meyerweb.com\\/eric\\/thoughts\\/2009\\/02\\/12\\/selector-blocks\\/\"}}','2014-01-19 21:52:32','2014-08-08 19:32:31','693d401d-d1b3-4af3-96ba-8146d51a6253',1),(366,137,4,1,2,NULL,'{\"authorId\":\"1\",\"title\":\"Fixing a Twitter WordPress Plugin with jQuery\",\"slug\":\"fixing-a-twitter-wordpress-plugin-with-jquery\",\"postDate\":1234400272,\"expiryDate\":null,\"enabled\":\"1\",\"fields\":{\"2\":\"<p>I use the fantastic <a href=\\\"http:\\/\\/wordpress.org\\/extend\\/plugins\\/twitter-for-wordpress\\/\\\">Twitter for WordPress plugin<\\/a> on my website. Sometimes though, <a href=\\\"http:\\/\\/twitter.com\\\">Twitter<\\/a> decides that it doesn&rsquo;t want to make my tweets available. The plugin has accounted for this, and it displays <strong>No public Twitter messages<\\/strong> when this happens. That kinda sucks though.<\\/p>\\n<!--more-->\\n<p>It&rsquo;s definitely nice that the plugin doesn&rsquo;t throw an error, but I really don&rsquo;t want that message displayed on my site. So what&rsquo;s the solution? <strong>jQuery of course<\\/strong>.<\\/p>\\n\\n<h2>When the Tweet Comes Through<\\/h2>\\n<p>Here is the markup that is displayed on my site when a tweet comes through successfully:<\\/p>\\n\\n<div class=\\\"codeblock\\\"><code>\\n&lt;div&nbsp;id=\\\"twitterContainer\\\"&gt;<br \\/>&nbsp;&lt;a&nbsp;class=\\\"twitter-link\\\"&nbsp;href=\\\"http:\\/\\/twitter.com\\/davist11\\/status\\/1200405534\\\"&gt;<br \\/>&nbsp;&nbsp;I&nbsp;feel&nbsp;like&nbsp;I\'m&nbsp;in&nbsp;an&nbsp;episode&nbsp;of&nbsp;Seinfeld&nbsp;right&nbsp;now.<br \\/>&nbsp;&lt;\\/a&gt;<br \\/>&lt;\\/div&gt;&nbsp;\\n\\n<\\/code><\\/div>\\n\\n<h2>When the Tweet Doesn&rsquo;t Come Through<\\/h2>\\n<p>This is what you end up with:<\\/p>\\n<div class=\\\"codeblock\\\"><code>\\n&lt;div&nbsp;id=\\\"twitterContainer\\\"&gt;<br \\/>&nbsp;No&nbsp;public&nbsp;Twitter&nbsp;messages.<br \\/>&lt;\\/div&gt;&nbsp;\\n\\n<\\/code><\\/div>\\n\\n<h2>The jQuery<\\/h2>\\n<p>My thinking is that I will check the contents of <strong>div#twitterContainer<\\/strong> to see if it is <strong>No public Twitter messages<\\/strong>. If it is, I think it would be useful to replace that text with a link to <a href=\\\"http:\\/\\/twitter.com\\/davist11\\\">my Twitter account<\\/a> with a message telling people to follow me.<\\/p>\\n\\n<p>So first, let&rsquo;s execute the jQuery code when the document is loaded:<\\/p>\\n\\n<div class=\\\"codeblock\\\"><code>\\n$(document).ready(function()&nbsp;&#123;<br \\/>&nbsp;<br \\/>&#125;);&nbsp;\\n\\n<\\/code><\\/div>\\n\\n<p>Next, we are going to check and see <strong>if the contents of div#twitterContainer is No public Twitter messages<\\/strong>:\\n\\n<div class=\\\"codeblock\\\"><code>\\n$(document).ready(function()&nbsp;&#123;<br \\/>&nbsp;&lt;strong&gt;if(jQuery.trim($(\'div#twitterContainer\').text())&nbsp;==&nbsp;\'No&nbsp;public&nbsp;Twitter&nbsp;messages.\')&nbsp;&#123;<br \\/>&nbsp;&nbsp;&nbsp;<br \\/>&nbsp;&#125;&lt;\\/strong&gt;<br \\/>&#125;);&nbsp;\\n\\n<\\/code><\\/div>\\n\\n<p>Finally, let&rsquo;s just replace this text with a link to my Twitter feed:<\\/p>\\n\\n<div class=\\\"codeblock\\\"><code>\\n$(document).ready(function()&nbsp;&#123;<br \\/>&nbsp;if(jQuery.trim($(\'div#twitterContainer\').text())&nbsp;==&nbsp;\'No&nbsp;public&nbsp;Twitter&nbsp;messages.\')&nbsp;&#123;<br \\/>&nbsp;&nbsp;&lt;strong&gt;$(\'div#twitterContainer\').html(\'&lt;a&nbsp;href=\\\"http:\\/\\/twitter.com\\/davist11\\\"&nbsp;class=\\\"twitter-link\\\"&gt;Follow&nbsp;Me&nbsp;on&nbsp;Twitter&lt;\\/a&gt;\');&lt;\\/strong&gt;&nbsp;&nbsp;<br \\/>&nbsp;&#125;<br \\/>&#125;);&nbsp;\\n\\n<\\/code><\\/div>\\n\\n<div class=\\\"clearfix\\\">\\n<p><img src=\\\"http:\\/\\/trevordavis.net\\/images\\/content\\/2009\\/02\\/twitter-plugin-fixed.jpg\\\" alt=\\\"Screenshot of fixed Twitter plugin\\\" class=\\\"rightSide frame\\\" height=\\\"164\\\" width=\\\"150\\\" \\/><strong>That&rsquo;s it<\\/strong>. This is just <a href=\\\"http:\\/\\/trevordavis.net\\/blog\\/tutorial\\/improving-a-flickr-plugin-with-jquery\\/\\\">another example of how I have used jQuery to improve a WordPress plugin on my site<\\/a>.<\\/p>\\n\\n<p>You can see this in action on my site, or <a href=\\\"http:\\/\\/trevordavis.net\\/play\\/fixing-twitter-plugin\\/\\\">take a look at the demo<\\/a>.\\n\\n<p><a href=\\\"http:\\/\\/trevordavis.net\\/play\\/fixing-twitter-plugin\\/\\\" class=\\\"more-link\\\">See Demo<\\/a><\\/p>\\n<\\/div>\",\"14\":{\"old_id\":{}}}}','2014-01-19 21:52:32','2014-08-08 19:32:31','d8defbc7-0020-4853-beee-7c6d5c1bd7b3',1),(367,138,4,1,2,NULL,'{\"authorId\":\"1\",\"title\":\"No more pixel perfectionism in IE 6\",\"slug\":\"no-more-pixel-perfectionism-in-ie-6\",\"postDate\":1234370139,\"expiryDate\":null,\"enabled\":\"1\",\"fields\":{\"2\":\"<p>I do just like <a href=\\\"http:\\/\\/www.456bereastreet.com\\/archive\\/200902\\/no_more_pixel_perfectionism_in_ie_6\\/\\\">Roger Johansson says<\\/a>: I make sites perfectly usable in IE, but <strong>not necessarily exactly the same<\\/strong>. As long as everything is accessible, it&rsquo;s good enough for me.<\\/p>\",\"14\":{\"old_id\":{}},\"4\":\"http:\\/\\/www.456bereastreet.com\\/archive\\/200902\\/no_more_pixel_perfectionism_in_ie_6\\/\"}}','2014-01-19 21:52:32','2014-08-08 19:32:31','9afc5497-9e0d-436f-948e-0bf477387f99',1),(368,139,4,1,2,NULL,'{\"authorId\":\"1\",\"title\":\"10 Harsh Truths About Corporate Websites\",\"slug\":\"10-harsh-truths-about-corporate-websites\",\"postDate\":1234305066,\"expiryDate\":null,\"enabled\":\"1\",\"fields\":{\"2\":\"<p>The legendary Paul Boag gives us a <a href=\\\"http:\\/\\/www.smashingmagazine.com\\/2009\\/02\\/10\\/10-harsh-truths-about-corporate-websites\\/\\\">reality check<\\/a>. While it&rsquo;s hard to believe, I think I agree with all of them.<\\/p>\",\"14\":{\"old_id\":{}},\"4\":\"http:\\/\\/www.smashingmagazine.com\\/2009\\/02\\/10\\/10-harsh-truths-about-corporate-websites\\/\"}}','2014-01-19 21:52:32','2014-08-08 19:32:31','3b29ee4a-6003-4c91-9b53-1005988b3fe2',1),(369,140,4,1,2,NULL,'{\"authorId\":\"1\",\"title\":\"42 Web Design Companies: Designs That Move Me\",\"slug\":\"42-web-design-companies-designs-that-move-me\",\"postDate\":1233942835,\"expiryDate\":null,\"enabled\":\"1\",\"fields\":{\"2\":\"<p>There are so many <a href=\\\"http:\\/\\/designmovesme.com\\/42-web-design-companies\\/\\\">web design companies that have amazing websites<\\/a>. I felt inspired after looking through these. Now it&rsquo;s just a matter of execution&hellip;<\\/p>\",\"14\":{\"old_id\":{}},\"4\":\"http:\\/\\/designmovesme.com\\/42-web-design-companies\\/\"}}','2014-01-19 21:52:32','2014-08-08 19:32:31','aaabb054-5418-49be-9cd1-a0b60a9b1abb',1),(370,141,4,1,2,NULL,'{\"authorId\":\"1\",\"title\":\"Setting Body Ids in Expression Engine\",\"slug\":\"setting-body-ids-in-expression-engine\",\"postDate\":1233731337,\"expiryDate\":null,\"enabled\":\"1\",\"fields\":{\"2\":\"<p><a href=\\\"http:\\/\\/expressionengine.com\\/\\\">Expression Engine<\\/a> has become a popular choice to power many sites. I have just begun experimenting with it, and I have been very impressed. One thing that I have been interested in determining was to figure out if I could set an id on the body like I do when building other sites. I have already written one article showing how to do this in <a href=\\\"http:\\/\\/trevordavis.net\\/blog\\/tutorial\\/set-a-body-id\\/\\\">PHP and WordPress<\\/a>, but this will show how to do it dynamically in Expression Engine.<\\/p>\\n<!--more-->\\n<h2>Why are Body Ids Useful?<\\/h2>\\n<p>Body ids can be useful for styling sections differently, displaying certain parts of a dynamic template, displaying current navigation states, and many other things.<\\/p>\\n\\n<h3>A Simple Example<\\/h3>\\n<p>Let&rsquo;s say that I want to have my font size be 14 pixels, <strong>except on the homepage<\\/strong>. It would be as easy as this:<\\/p>\\n\\n<div class=\\\"codeblock\\\"><code>\\nbody&nbsp;&#123;&nbsp;font-size:&nbsp;14px;&nbsp;&#125;<br \\/>body#home&nbsp;&#123;&nbsp;font-size:&nbsp;12px;&nbsp;&#125;&nbsp;\\n\\n<\\/code><\\/div>\\n\\n<p><strong>Pretty useful.<\\/strong> By using body ids, we now have a unique hook for each section of the website.<\\/p>\\n\\n<h2>Why not Body Classes?<\\/h2>\\n<p>I do utilize body classes as well. I typically use the body id to indicate the section, then other various items for the body classes.<\\/p>\\n\\n<h3>For Example<\\/h3>\\n<p>For my own blog, I have some pages that I want to have a left gutter on it so that I can push images, quotes, etc. into the column. I also have another class that indicates when it is a blog article page. So, I can just continue to use multiple classes on the body to help me control the width and layout of the page.<\\/p>\\n\\n<p>Here is what the body element looks like on a blog article on my site:<\\/p>\\n\\n<div class=\\\"codeblock\\\"><code>\\n&lt;body&nbsp;id=\\\"blog\\\"&nbsp;class=\\\"subpage&nbsp;leftGutter&nbsp;article\\\"&gt;&nbsp;\\n\\n<\\/code><\\/div>\\n\\n<p>The <strong>subpage class<\\/strong> just indicates that it is not the homepage. Not completely necessary since I already have a specific id on the homepage, but it can sometimes become useful.<\\/p>\\n\\n<p>The <strong>leftGutter class<\\/strong> is used to push the content area to the right and make it narrower. Then, I can pull elements into the left-hand gutter as well.<\\/p>\\n\\n<p>The <strong>article class<\\/strong> is useful because some of the markup for the blog entry information is the same as the homepage and archive pages. Using this class, I can be more specific with my styles to change the way that these elements are displayed on the blog article page.<\\/p>\\n\\n<p>I always try and add classes and id attributes as high up in the tree as possible. This let&rsquo;s me utilize descendant selectors in the CSS without having to add additional classes and ids lower down.<\\/p>\\n\\n<h2>Setting the Body Id in Expression Engine<\\/h2>\\n<p>I want to have complete control over the body id, so I want to be able to have it set dynamically and also be able to set it statically.<\\/p>\\n\\n<p>So my thought behind this is that first, I want to check to see if the body id was set statically. When I say statically, I mean passing the variable in as an attribute on my embed statement. Next, I will then set the body id dynamically.<\\/p>\\n\\n<h3>Setting the Id Statically<\\/h3>\\n<p>In order to make changes to the overall website structure simpler, I have a header template the sits in the includes template group. So in all of the other template groups, I embed the header on the page:<\\/p>\\n\\n<div class=\\\"codeblock\\\"><code>\\n&#123;embed=\\\"includes\\/header\\\"&#125;&nbsp;\\n\\n<\\/code><\\/div>\\n\\n<p>Then, if for some reason I want to specifically pass in a body id, I can just change it to this:<\\/p>\\n\\n<pre><code>&#123;embed=\\\"includes\\/header\\\" <strong>body_id=\\\"contact-us\\\"<\\/strong>&#125;<\\/code><\\/pre>\\n\\n<p>So the first step in the header is to check to see if the <strong>embed:body_id<\\/strong> variable is set:<\\/p>\\n<div class=\\\"codeblock\\\"><code>\\n&lt;body<br \\/>&#123;if&nbsp;embed:body_id&#125;<br \\/>&nbsp;id=\\\"&#123;embed:body_id&#125;\\\"<br \\/>&#123;\\/if&#125;<br \\/>&gt;&nbsp;\\n\\n<\\/code><\\/div>\\n<p class=\\\"note\\\"><em>Note: Line wrapping added for readability.<\\/em><\\/p>\\n\\n<h3>Dynamically Setting the Id<\\/h3>\\n<p>If we are not statically setting the body id, we want to then do it dynamically. My thinking is that I will take advantage of Expression Engine&rsquo;s <a href=\\\"http:\\/\\/expressionengine.com\\/docs\\/templates\\/globals\\/url_segments.html\\\">URL segments<\\/a> to determine which section we are in.<\\/p>\\n\\n<p>Here is an example of URL segments using the following URL:<\\/p>\\n\\n<div class=\\\"codeblock\\\"><code>\\nhttp:\\/\\/ee.trevordavis.net\\/index.php\\/about\\/me\\/education\\/&nbsp;\\n\\n<\\/code><\\/div>\\n\\n<ul>\\n <li>Segment 1 = <strong>about<\\/strong><\\/li>\\n <li>Segment 2 = <strong>me<\\/strong><\\/li>\\n <li>Segment 3 = <strong>education<\\/strong><\\/li>\\n<\\/ul>\\n\\n<p>Then, we can reference each segment like so:<\\/p>\\n\\n<ul>\\n <li>Segment 1 = <strong>{segment_1}<\\/strong><\\/li>\\n <li>Segment 2 = <strong>{segment_2}<\\/strong><\\/li>\\n <li>Segment 3 = <strong>{segment_3}<\\/strong><\\/li>\\n<\\/ul>\\n\\n<p>So basically what we want to do is assign the body id the value of <strong>{segment_1}<\\/strong> if it is not empty. So continuing on our example:<\\/p>\\n\\n<div class=\\\"codeblock\\\"><code>\\n&lt;body<br \\/>&#123;if&nbsp;embed:body_id&#125;<br \\/>&nbsp;id=\\\"&#123;embed:body_id&#125;\\\"<br \\/>&#123;if:elseif&nbsp;segment_1&#125;<br \\/>&nbsp;id=\\\"&#123;segment_1&#125;\\\"<br \\/>&#123;\\/if&#125;<br \\/>&gt;&nbsp;\\n\\n<\\/code><\\/div>\\n\\n<p class=\\\"note\\\"><em>Note: Line wrapping added for readability.<\\/em><\\/p>\\n\\n<p><strong>But wait, what about the homepage?<\\/strong> The homepage will have nothing for the value of <strong>{segment_1}<\\/strong>, so we can just put in an else statement:<\\/p>\\n\\n<div class=\\\"codeblock\\\"><code>\\n&lt;body<br \\/>&#123;if&nbsp;embed:body_id&#125;<br \\/>&nbsp;id=\\\"&#123;embed:body_id&#125;\\\"<br \\/>&#123;if:elseif&nbsp;segment_1&#125;<br \\/>&nbsp;id=\\\"&#123;segment_1&#125;\\\"<br \\/>&#123;if:else&#125;<br \\/>&nbsp;id=\\\"home\\\"<br \\/>&#123;\\/if&#125;<br \\/>&gt;&nbsp;\\n\\n<\\/code><\\/div>\\n\\n<p class=\\\"note\\\"><em>Note: Line wrapping added for readability.<\\/em><\\/p>\\n\\n<p>Here is the line of code without any line wrapping:<\\/p>\\n<div class=\\\"codeblock\\\"><code>\\n&lt;body&#123;if&nbsp;embed:body_id&#125;&nbsp;id=\\\"&#123;embed:body_id&#125;\\\"&#123;if:elseif&nbsp;segment_1&#125;&nbsp;id=\\\"&#123;segment_1&#125;\\\"&#123;if:else&#125;&nbsp;id=\\\"home\\\"&#123;\\/if&#125;&gt;&nbsp;\\n\\n<\\/code><\\/div>\\n\\n<p>I created a <a href=\\\"http:\\/\\/ee.trevordavis.net\\/index.php\\/\\\">demo Expression Engine site<\\/a> to test this functionality.<\\/p>\\n\\n<p><a href=\\\"http:\\/\\/ee.trevordavis.net\\/index.php\\/\\\" class=\\\"more-link\\\">View Demo Site<\\/a><\\/p>\\n\\n<h2>Walking Through the Demo Site<\\/h2>\\n<p>Since we have body ids for each section and an id on each list item in the navigation, I have created the current state for the navigation with a few simple line of CSS:<\\/p>\\n<div class=\\\"codeblock\\\"><code>\\nbody#home&nbsp;ul#primaryNav&nbsp;li#homeNav&nbsp;a,<br \\/>body#about&nbsp;ul#primaryNav&nbsp;li#aboutNav&nbsp;a,<br \\/>body#services&nbsp;ul#primaryNav&nbsp;li#servicesNav&nbsp;a,<br \\/>body#contact-us&nbsp;ul#primaryNav&nbsp;li#contactNav&nbsp;a&nbsp;&#123;<br \\/>&nbsp;background:&nbsp;#B3602D;<br \\/>&nbsp;border-top-color:&nbsp;#B3602D;<br \\/>&nbsp;color:&nbsp;#fff;<br \\/>&#125;&nbsp;\\n\\n<\\/code><\\/div>\\n<p class=\\\"note\\\"><em>Note: Line wrapping added for readability.<\\/em><\\/p>\\n\\n<p>I also want to show the sidebar on all of the subpages, so I just need 1 more conditional:<\\/p>\\n<div class=\\\"codeblock\\\"><code>\\n&#123;if&nbsp;embed:body_id&nbsp;||&nbsp;segment_1&#125;<br \\/>&nbsp;&lt;div&nbsp;id=\\\"sidebar\\\"&gt;<br \\/>&nbsp;&lt;\\/div&gt;<br \\/>&#123;\\/if&#125;&nbsp;\\n\\n<\\/code><\\/div>\\n\\n<p>This is checking to see if {embed:body_id} or {segment_1} are not empty, and displaying the sidebar if one or both are set.<\\/p>\\n\\n<p>These are just a few examples of using a body id in Expression Engine, but the possibilities are endless.<\\/p>\\n\\n<h2>One More Thing<\\/h2>\\n<p>Another thing that I was trying to figure out was how to create a variable that I could reuse in multiple embed files. So what I want to do is in my conditional statement, determine that the body id should be and assign it to a variable. Then, I want to be able to access that variable in the footer without have to use the same conditional statement.<\\/p>\\n\\n<p><strong>Is this possible?<\\/strong> I was messing around with the <strong>{assign_variable}<\\/strong> tag, but that didn&rsquo;t seem to do the job because it can only be used in the same template. <strong>Anyone know how to do this?<\\/strong> I&rsquo;m relatively new to Expression Engine, so I am still learning. <\\/p>\",\"14\":{\"old_id\":{}}}}','2014-01-19 21:52:32','2014-08-08 19:32:31','b20cf8fb-2889-48fc-b7de-c55fe9cd30b3',1),(371,142,4,1,2,NULL,'{\"authorId\":\"1\",\"title\":\"I\\u2019m a Weekly NETTUTS Writer\",\"slug\":\"im-a-weekly-nettuts-writer\",\"postDate\":1233698083,\"expiryDate\":null,\"enabled\":\"1\",\"fields\":{\"2\":\"<p>As I noted in my <a href=\\\"http:\\/\\/trevordavis.net\\/blog\\/tutorial\\/exactly-how-to-create-a-custom-jquery-accordion\\/\\\">last post<\\/a>, I submitted a tutorial to <a href=\\\"http:\\/\\/nettuts.com\\/\\\">NETTUTS<\\/a> to be considered as a weekly writer. I am very happy to announce that <strong>they chose me<\\/strong>!<\\/p>\\n<p>In my second article, <a href=\\\"http:\\/\\/nettuts.com\\/tutorials\\/javascript-ajax\\/creating-a-filterable-portfolio-with-jquery\\/\\\">Creating a &ldquo;Filterable&rdquo; Portfolio with jQuery<\\/a>, I take a look at creating a portfolio that can be filtered by category.<\\/p>\\n<!--more-->\\n<p>This tutorial was kind of inspired by the effect that I created on <a href=\\\"http:\\/\\/www.matrixgroup.net\\/portfolio\\/\\\">my company&rsquo;s portfolio<\\/a>.<\\/p>\\n\\n<h2>How will this effect my web site?<\\/h2>\\n<p>Yes, I am not going to be able to write articles as frequently on my blog, but I am still going to be posting some articles. I will also post a note each week discussing my weekly NETTUTS article.<\\/p>\\n<p>I hope you all enjoy the articles.<\\/p>\",\"14\":{\"old_id\":{}}}}','2014-01-19 21:52:32','2014-08-08 19:32:31','c71db7fb-0fc6-4c0b-b5e9-54c0b08ac6e6',1),(372,143,4,1,2,NULL,'{\"authorId\":\"1\",\"title\":\"Twitter Chatter During the Super Bowl\",\"slug\":\"twitter-chatter-during-the-super-bowl\",\"postDate\":1233665491,\"expiryDate\":null,\"enabled\":\"1\",\"fields\":{\"2\":\"<p>The New York Times created an <a href=\\\"http:\\/\\/www.nytimes.com\\/interactive\\/2009\\/02\\/02\\/sports\\/20090202_superbowl_twitter.html\\\">interactive information graph of tweets during the super bowl<\\/a>. I love how at halftime, there was an explosion of Springsteen tweets.<\\/p>\",\"14\":{\"old_id\":{}},\"4\":\"http:\\/\\/www.nytimes.com\\/interactive\\/2009\\/02\\/02\\/sports\\/20090202_superbowl_twitter.html\"}}','2014-01-19 21:52:33','2014-08-08 19:32:31','ff4fbc54-280f-4ebc-b555-3599ec764a48',1),(373,144,4,1,2,NULL,'{\"authorId\":\"1\",\"title\":\"WebAIM screenreader survey\\u2026the results are in\",\"slug\":\"webaim-screenreader-surveythe-results-are-in\",\"postDate\":1233570954,\"expiryDate\":null,\"enabled\":\"1\",\"fields\":{\"2\":\"<p><a href=\\\"http:\\/\\/www.webstandards.org\\/2009\\/01\\/31\\/webaim-screenreader-survey-results\\/\\\">The WebAIM screenreader survey results are in<\\/a>. Not surprisingly: 76% of users always or often navigating by headings; 72% of screen reader users reported that Flash is very or somewhat difficult.<\\/p>\",\"14\":{\"old_id\":{}},\"4\":\"http:\\/\\/www.webstandards.org\\/2009\\/01\\/31\\/webaim-screenreader-survey-results\\/\"}}','2014-01-19 21:52:33','2014-08-08 19:32:31','eb8f22be-8b63-4dfd-add5-29be2b43b9ff',1),(374,145,4,1,2,NULL,'{\"authorId\":\"1\",\"title\":\"How we reduced chargebacks by 30%\",\"slug\":\"how-we-reduced-chargebacks-by-30\",\"postDate\":1233174973,\"expiryDate\":null,\"enabled\":\"1\",\"fields\":{\"2\":\"<p>Jason Fried discusses <a href=\\\"http:\\/\\/www.37signals.com\\/svn\\/posts\\/1545-how-we-reduced-chargebacks-by-30-as-a-percentage-of-sales\\\">how they reduced chargebacks by 30%<\\/a>. My favorite part of this is how 37Signals determines the problem and quickly finds the simple solution to it.<\\/p>\",\"14\":{\"old_id\":{}},\"4\":\"http:\\/\\/37signals.com\\/svn\\/posts\\/1545-how-we-reduced-chargebacks-by-30-as-a-percentage-of-sales\"}}','2014-01-19 21:52:33','2014-08-08 19:32:31','fcad03d1-b55b-497d-a3fc-f27189a1986a',1),(375,146,4,1,2,NULL,'{\"authorId\":\"1\",\"title\":\"Sprite Optimization\",\"slug\":\"sprite-optimization\",\"postDate\":1233173921,\"expiryDate\":null,\"enabled\":\"1\",\"fields\":{\"2\":\"<p>Dave Shea is <a href=\\\"http:\\/\\/mezzoblue.com\\/archives\\/2009\\/01\\/27\\/sprite_optim\\/\\\">starting to notice the use of huge CSS Sprites<\\/a>. I think I am in his state of mind: optimize when possible, but I&rsquo;m not too interested in making one of those huge sprites.<\\/p>\",\"14\":{\"old_id\":{}},\"4\":\"http:\\/\\/mezzoblue.com\\/archives\\/2009\\/01\\/27\\/sprite_optim\\/\"}}','2014-01-19 21:52:33','2014-08-08 19:32:31','d70a0465-27c0-4670-866c-c30a6b9db64c',1),(376,147,4,1,2,NULL,'{\"authorId\":\"1\",\"title\":\"My First WordPress Plugin\",\"slug\":\"my-first-wordpress-plugin\",\"postDate\":1232973659,\"expiryDate\":null,\"enabled\":\"1\",\"fields\":{\"2\":\"<p>In a recent project at work, I had to integrate WordPress and bbPress. It proved to be a little more difficult than I anticipated, and I had to write my first WordPress plugin: <a href=\\\"http:\\/\\/wordpress.org\\/extend\\/plugins\\/add-bbpress-default-role\\/\\\">Add bbPress Default Role<\\/a>.<\\/p>\",\"14\":{\"old_id\":{}},\"4\":\"http:\\/\\/wordpress.org\\/extend\\/plugins\\/add-bbpress-default-role\\/\"}}','2014-01-19 21:52:33','2014-08-08 19:32:31','a0290ada-7a57-4a34-a96e-701440e55f4a',1),(378,149,4,1,2,NULL,'{\"authorId\":\"1\",\"title\":\"A List Apart: Issue 276\",\"slug\":\"a-list-apart-issue-276\",\"postDate\":1232445212,\"expiryDate\":null,\"enabled\":\"1\",\"fields\":{\"2\":\"<p><a href=\\\"http:\\/\\/www.alistapart.com\\/issues\\/276\\\">This issue<\\/a> focuses around one of the biggest problems in web development: education, or lack thereof. I know I would have loved to actually go to school for web development.<\\/p>\",\"14\":{\"old_id\":{}},\"4\":\"http:\\/\\/www.alistapart.com\\/issues\\/276\"}}','2014-01-19 21:52:33','2014-08-08 19:32:31','071b76f6-7e46-47db-b197-f7078741bcf8',1),(379,150,4,1,2,NULL,'{\"authorId\":\"1\",\"title\":\"Design Share, an Event Series\",\"slug\":\"design-share-an-event-series\",\"postDate\":1232041142,\"expiryDate\":null,\"enabled\":\"1\",\"fields\":{\"2\":\"<p>Viget&rsquo;s write up about the <a href=\\\"http:\\/\\/www.viget.com\\/inspire\\/design-share-event-series\\/\\\">design share event<\\/a> that I attended and <a href=\\\"http:\\/\\/trevordavis.net\\/blog\\/news\\/design-share\\/\\\">summarized<\\/a>. This one with video!<\\/p>\",\"14\":{\"old_id\":{}},\"4\":\"http:\\/\\/www.viget.com\\/inspire\\/design-share-event-series\\/\"}}','2014-01-19 21:52:33','2014-08-08 19:32:31','5cfd56ca-da0d-4ad2-9b4c-73fa0dc55351',1),(380,151,4,1,2,NULL,'{\"authorId\":\"1\",\"title\":\"Web Development Project Estimator\",\"slug\":\"web-development-project-estimator\",\"postDate\":1231838839,\"expiryDate\":null,\"enabled\":\"1\",\"fields\":{\"2\":\"<p>&ldquo;<a href=\\\"http:\\/\\/estimator.astuteo.com\\/\\\">A simple tool<\\/a> that allows web designers and site developers to quickly and thoroughly estimate the time and materials required for a proposed web project.&rdquo; Yes, all of this could be accomplished through other programs, but this is a pretty nice interface.<\\/p>\",\"14\":{\"old_id\":{}},\"4\":\"http:\\/\\/estimator.astuteo.com\\/\"}}','2014-01-19 21:52:33','2014-08-08 19:32:31','0b22d699-123b-4985-9171-8b6949676f60',1),(381,152,4,1,2,NULL,'{\"authorId\":\"1\",\"title\":\"Use jQuery to Enhance your WordPress Comment Form\",\"slug\":\"use-jquery-to-enhance-your-wordpress-comment-form\",\"postDate\":1231807649,\"expiryDate\":null,\"enabled\":\"1\",\"fields\":{\"2\":\"<p>I have already completed a couple of tutorials on forms and jQuery (<a href=\\\"http:\\/\\/trevordavis.net\\/blog\\/tutorial\\/ajax-forms-with-jquery\\/\\\">Ajax Forms with jQuery<\\/a> and <a href=\\\"http:\\/\\/trevordavis.net\\/blog\\/tutorial\\/flexible-and-semantic-forms-with-a-little-jquery\\/\\\">Flexible and Semantic Forms with a Little jQuery<\\/a>), but I wanted to show another example of using a simple jQuery script to enhance functionality. This example will be about the comment form on a WordPress powered site.<\\/p>\\n<!--more-->\\n<p><img src=\\\"http:\\/\\/trevordavis.net\\/images\\/content\\/2009\\/01\\/wordpress-validation.gif\\\" alt=\\\"WordPress Validation Screenshot\\\" width=\\\"330\\\" height=\\\"106\\\" class=\\\"leftSide pullLeft col6 frame\\\" \\/>Depending upon your configuration, WordPress will validate the comment form for required fields. In my configuration, I want to make sure that users fill in their name and email address If you submit my comment form without those, WordPress will perform server side validation.<\\/p>\\n\\n<p>But, do you really want users to see this error page? <strong>Wouldn&rsquo;t it be so much better if we used to JavaScript to validate on the client side so that they never have to leave the form<\\/strong>?<\\/p>\\n\\n<p>I think so. Before we get started, I created <a href=\\\"http:\\/\\/trevordavis.net\\/play\\/wordpress-comment-form\\/\\\">a sample of the WordPress comment form<\\/a>.<\\/p>\\n\\n<p><a href=\\\"http:\\/\\/trevordavis.net\\/play\\/wordpress-comment-form\\/\\\" class=\\\"more-link\\\">See Example Page<\\/a><\\/p>\\n\\n<h2>Creating the Markup<\\/h2>\\n<p>I have tweaked my markup somewhat from the default WordPress comment form, so you will need to make changes to account for your markup. Here is the markup for my form:<\\/p>\\n\\n<div class=\\\"codeblock\\\"><code>\\n&lt;form&nbsp;action=\\\"#\\\"&nbsp;method=\\\"post\\\"&nbsp;id=\\\"commentform\\\"&gt;<br \\/>&nbsp;&lt;p&nbsp;class=\\\"required\\\"&gt;*&nbsp;Denotes&nbsp;Required&nbsp;Field&lt;\\/p&gt;<br \\/>&nbsp;&lt;ol&nbsp;class=\\\"forms\\\"&gt;<br \\/>&nbsp;&nbsp;&lt;li&gt;<br \\/>&nbsp;&nbsp;&nbsp;&lt;label&nbsp;for=\\\"author\\\"&gt;Name&nbsp;&lt;span&nbsp;class=\\\"required\\\"&gt;*&lt;\\/span&gt;&lt;\\/label&gt;<br \\/>&nbsp;&nbsp;&nbsp;&lt;input&nbsp;type=\\\"text\\\"&nbsp;class=\\\"requiredField\\\"&nbsp;name=\\\"author\\\"&nbsp;id=\\\"author\\\"&nbsp;size=\\\"22\\\"&nbsp;\\/&gt;<br \\/>&nbsp;&nbsp;&lt;\\/li&gt;<br \\/>&nbsp;&nbsp;&lt;li&gt;<br \\/>&nbsp;&nbsp;&nbsp;&lt;label&nbsp;for=\\\"email\\\"&gt;E-Mail&nbsp;&lt;span&nbsp;class=\\\"required\\\"&gt;*&lt;\\/span&gt;&lt;\\/label&gt;<br \\/>&nbsp;&nbsp;&nbsp;&lt;input&nbsp;type=\\\"text\\\"&nbsp;&nbsp;class=\\\"requiredField\\\"&nbsp;name=\\\"email\\\"&nbsp;id=\\\"email\\\"&nbsp;size=\\\"22\\\"&nbsp;\\/&gt;<br \\/>&nbsp;&nbsp;&lt;\\/li&gt;<br \\/>&nbsp;&nbsp;&lt;li&gt;<br \\/>&nbsp;&nbsp;&nbsp;&lt;label&nbsp;for=\\\"url\\\"&gt;Website&lt;\\/label&gt;<br \\/>&nbsp;&nbsp;&nbsp;&lt;input&nbsp;type=\\\"text\\\"&nbsp;name=\\\"url\\\"&nbsp;id=\\\"url\\\"&nbsp;size=\\\"22\\\"&nbsp;\\/&gt;<br \\/>&nbsp;&nbsp;&lt;\\/li&gt;<br \\/>&nbsp;&nbsp;&lt;li&nbsp;class=\\\"textarea\\\"&gt;<br \\/>&nbsp;&nbsp;&nbsp;&lt;label&nbsp;for=\\\"comment\\\"&gt;Comments&nbsp;&lt;span&nbsp;class=\\\"required\\\"&gt;*&lt;\\/span&gt;&lt;\\/label&gt;<br \\/>&nbsp;&nbsp;&nbsp;&lt;textarea&nbsp;&nbsp;class=\\\"requiredField\\\"&nbsp;name=\\\"comment\\\"&nbsp;id=\\\"comment\\\"&nbsp;cols=\\\"100%\\\"&nbsp;rows=\\\"10\\\"&gt;&lt;\\/textarea&gt;<br \\/>&nbsp;&nbsp;&lt;\\/li&gt;<br \\/>&nbsp;&nbsp;&lt;li&nbsp;class=\\\"subscribe-to-comments\\\"&gt;<br \\/>&nbsp;&nbsp;&nbsp;&lt;input&nbsp;type=\\\"checkbox\\\"&nbsp;name=\\\"subscribe\\\"&nbsp;id=\\\"subscribe\\\"&nbsp;value=\\\"subscribe\\\"&nbsp;&nbsp;\\/&gt;<br \\/>&nbsp;&nbsp;&nbsp;&lt;label&nbsp;for=\\\"subscribe\\\"&gt;Notify&nbsp;me&nbsp;of&nbsp;followup&nbsp;comments&nbsp;via&nbsp;e-mail&lt;\\/label&gt;<br \\/>&nbsp;&nbsp;&lt;\\/li&gt;<br \\/>&nbsp;&nbsp;&lt;li&nbsp;class=\\\"buttons\\\"&gt;<br \\/>&nbsp;&nbsp;&nbsp;&lt;button&nbsp;type=\\\"submit\\\"&nbsp;name=\\\"submit\\\"&nbsp;id=\\\"submit\\\"&gt;Add&nbsp;Comment&nbsp;&amp;raquo;&lt;\\/button&gt;<br \\/>&nbsp;&nbsp;&lt;\\/li&gt;<br \\/>&nbsp;&lt;\\/ol&gt;<br \\/>&lt;\\/form&gt;&nbsp;\\n\\n<\\/code><\\/div>\\n\\n<p>I don&rsquo;t think there is much that I need to discuss about that markup; it is pretty standard. The only thing to mention is the class name of <strong>requiredField<\\/strong> on the form fields that I want to be required. <em>Note: I also removed the action on the form so that the sample form cannot really be submitted to the database.<\\/em><\\/p>\\n\\n<h2>The jQuery<\\/h2>\\n<p>I of course am going to show this example using jQuery, but you could create something comparable with any other JavaScript library or just with some plain old JavaScript.<\\/p>\\n\\n<p>Once the document is loaded, let&rsquo;s start by adding a function for when the comment form is submitted:<\\/p>\\n\\n<div class=\\\"codeblock\\\"><code>\\n$(document).ready(function()&nbsp;&#123;<br \\/>&nbsp;$(\'form#commentform\').submit(function()&nbsp;&#123;<br \\/>&nbsp;&amp;hellip;<br \\/>&nbsp;&#125;);<br \\/>&#125;);&nbsp;\\n\\n<\\/code><\\/div>\\n\\n<p>Next, we want to remove any errors if they are showing, and create a flag that will let us know if an error has occured:<\\/p>\\n\\n<div class=\\\"codeblock\\\"><code>\\n$(document).ready(function()&nbsp;&#123;<br \\/>&nbsp;$(\'form#commentform\').submit(function()&nbsp;&#123;<br \\/>&nbsp;&nbsp;&lt;strong&gt;$(\'form#commentform&nbsp;.error\').remove();<br \\/>&nbsp;&nbsp;var&nbsp;hasError&nbsp;=&nbsp;false;&lt;\\/strong&gt;<br \\/>&nbsp;&nbsp;&amp;hellip;<br \\/>&nbsp;&#125;);<br \\/>&#125;);&nbsp;\\n\\n<\\/code><\\/div>\\n\\n<p>Ok, here is where we really start to do some coding. I want to take each form field that has a class of <strong>requiredField<\\/strong>, check to see if it is empty, copy the name of the label (<em>and remove the required asterisk<\\/em>), traverse to the parent list item, and append the error message. Here is where we will also set the hasError flag so that we know an error has occurred:<\\/p>\\n\\n<div class=\\\"codeblock\\\"><code>\\n$(document).ready(function()&nbsp;&#123;<br \\/>&nbsp;$(\'form#commentform\').submit(function()&nbsp;&#123;<br \\/>&nbsp;&nbsp;$(\'form#commentform&nbsp;.error\').remove();<br \\/>&nbsp;&nbsp;var&nbsp;hasError&nbsp;=&nbsp;false;<br \\/>&nbsp;&nbsp;&lt;strong&gt;$(\'.requiredField\').each(function()&nbsp;&#123;<br \\/>&nbsp;&nbsp;&nbsp;if(jQuery.trim($(this).val())&nbsp;==&nbsp;\'\')&nbsp;&#123;<br \\/>&nbsp;&nbsp;&nbsp;&nbsp;var&nbsp;labelText&nbsp;=&nbsp;$(this).prev(\'label\').text().replace(\'&nbsp;*\',\'\');<br \\/>&nbsp;&nbsp;&nbsp;&nbsp;$(this).parent().append(\'&lt;span&nbsp;class=\\\"error\\\"&gt;\'+labelText+\'&nbsp;is&nbsp;a&nbsp;required&nbsp;field.&lt;\\/span&gt;\');<br \\/>&nbsp;&nbsp;&nbsp;&nbsp;hasError&nbsp;=&nbsp;true;<br \\/>&nbsp;&nbsp;&nbsp;&#125;<br \\/>&nbsp;&nbsp;&#125;);&lt;\\/strong&gt;<br \\/>&nbsp;&nbsp;&amp;hellip;<br \\/>&nbsp;&#125;);<br \\/>&#125;);&nbsp;\\n\\n<\\/code><\\/div>\\n\\n<p>Finally, you want to check the <strong>hasError<\\/strong> variable to determine whether or not you should submit the form to the server:<\\/p>\\n<div class=\\\"codeblock\\\"><code>\\n$(document).ready(function()&nbsp;&#123;<br \\/>&nbsp;$(\'form#commentform\').submit(function()&nbsp;&#123;<br \\/>&nbsp;&nbsp;$(\'form#commentform&nbsp;.error\').remove();<br \\/>&nbsp;&nbsp;var&nbsp;hasError&nbsp;=&nbsp;false;<br \\/>&nbsp;&nbsp;$(\'.requiredField\').each(function()&nbsp;&#123;<br \\/>&nbsp;&nbsp;&nbsp;if(jQuery.trim($(this).val())&nbsp;==&nbsp;\'\')&nbsp;&#123;<br \\/>&nbsp;&nbsp;&nbsp;&nbsp;var&nbsp;labelText&nbsp;=&nbsp;$(this).prev(\'label\').text().replace(\'&nbsp;*\',\'\');<br \\/>&nbsp;&nbsp;&nbsp;&nbsp;$(this).parent().append(\'&lt;span&nbsp;class=\\\"error\\\"&gt;\'+labelText+\'&nbsp;is&nbsp;a&nbsp;required&nbsp;field.&lt;\\/span&gt;\');<br \\/>&nbsp;&nbsp;&nbsp;&nbsp;hasError&nbsp;=&nbsp;true;<br \\/>&nbsp;&nbsp;&nbsp;&#125;<br \\/>&nbsp;&nbsp;&#125;);<br \\/>&nbsp;&nbsp;&lt;strong&gt;if(hasError)&nbsp;&#123;<br \\/>&nbsp;&nbsp;&nbsp;return&nbsp;false;<br \\/>&nbsp;&nbsp;&#125;&lt;\\/strong&gt;<br \\/>&nbsp;&#125;);<br \\/>&#125;);&nbsp;\\n\\n<\\/code><\\/div>\\n<p class=\\\"note\\\"><em>Note: The end of the script is slightly different on the example form because I did not want to actually submit the form.<\\/em><\\/p>\\n\\n<h2>Conclusion<\\/h2>\\n<p>Just another simple example of how we can improve the user experience by using jQuery. Like usual, there are jQuery plugins out there that can do the same thing, but I think it is important to understand how to do things yourself. Plus, that is only 17 lines of JavaScript compared to much, much more for a plugin.<\\/p>\\n\\n<p>Anyone have any ideas on how to improve the script?<\\/p>\",\"14\":{\"old_id\":{}}}}','2014-01-19 21:52:33','2014-08-08 19:32:31','ebcb28b6-c527-41da-b4a5-b7befb474a95',1),(382,153,4,1,2,NULL,'{\"authorId\":\"1\",\"title\":\"CSS Testing of Selectors and Pseudo Selectors\",\"slug\":\"css-testing-of-selectors-and-pseudo-selectors\",\"postDate\":1231709583,\"expiryDate\":null,\"enabled\":\"1\",\"fields\":{\"2\":\"<p><a href=\\\"http:\\/\\/kimblim.dk\\/css-tests\\/selectors\\/\\\">A list of selectors and their supported browsers<\\/a>. There seems to be a trend of the non-supported ones&hellip;<\\/p>\",\"14\":{\"old_id\":{}},\"4\":\"http:\\/\\/kimblim.dk\\/css-tests\\/selectors\\/\"}}','2014-01-19 21:52:33','2014-08-08 19:32:31','1f938ddf-bef5-4a91-af6f-b65b0f18ada5',1),(383,154,4,1,2,NULL,'{\"authorId\":\"1\",\"title\":\"The State of the Web 2008\",\"slug\":\"the-state-of-the-web-2008\",\"postDate\":1231494261,\"expiryDate\":null,\"enabled\":\"1\",\"fields\":{\"2\":\"<p>The <a href=\\\"http:\\/\\/www.webdirections.org\\/the-state-of-the-web-2008\\/\\\">detailed report from the State of the Web Survey<\\/a> has been compiled. Wow, 62% of the people using JavaScript libraries are using jQuery; I love it.<\\/p>\",\"14\":{\"old_id\":{}},\"4\":\"http:\\/\\/www.webdirections.org\\/the-state-of-the-web-2008\\/\"}}','2014-01-19 21:52:33','2014-08-08 19:32:31','62dda06b-dba8-4abd-bc67-67e1ed032d80',1),(384,155,4,1,2,NULL,'{\"authorId\":\"1\",\"title\":\"Design Share\",\"slug\":\"design-share\",\"postDate\":1231468779,\"expiryDate\":null,\"enabled\":\"1\",\"fields\":{\"2\":\"<p>I had the pleasure of being invited to <strong>Design Share<\\/strong> at <a href=\\\"http:\\/\\/viget.com\\/\\\">Viget Labs<\\/a> Wednesday night. The idea of the event was that 6 presenters would each give a 5 minute presentation on design, and then there was a question and answer period. It was especially great since I am not really a designer. Always great to learn new things.<\\/p>\\n<!--more-->\\n\\n<h2><a href=\\\"http:\\/\\/www.brian-talbot.com\\/\\\" class=\\\"inline\\\">Brian Talbot<\\/a> National Geographic<\\/h2>\\n<p>Brian started the night off by discussing the process of bringing the National Geographic <a href=\\\"http:\\/\\/www.thegreenguide.com\\/\\\">Green Guide<\\/a> online. It was quite an undertaking since they were taking a print publication and creating a supporting website.<\\/p>\\n<p>Usually, something gets lost in translation going from print to the web. So, they wanted to still have these <strong>interesting layouts and help tie in the site to the printed collateral<\\/strong>. They also wanted to get the community involved in providing information and commentary.<\\/p>\\n\\n<p>I think a lot of the screenshots that he showed us are not in production yet, but they looked great. There were charts, information organization in a sensible manor, and nice simple layouts.<\\/p>\\n\\n<h2><a href=\\\"http:\\/\\/www.thirstyinteractive.com\\/\\\" class=\\\"inline\\\">Jay Moore<\\/a> Thirsty Interactive<\\/h2>\\n<p>Next, Jay discussed his &ldquo;<strong>Papa Bear, Mama Bear, &amp; Baby Bear<\\/strong>&rdquo; approach to mood boards. The example he used was from his experience in building the mood boards for the <a href=\\\"http:\\/\\/www.bered.com\\/\\\">AOL Red<\\/a> redesign.<\\/p>\\n\\n<h3>Papa Bear Mood Board<\\/h3>\\n<p>This is the &ldquo;safety&rdquo; board. It&rsquo;s comfortable because it was similar to the previous design. They wanted to show that they incorporated elements to meet the goals of the project.<\\/p>\\n\\n<h3>Mama Bear Mood Board<\\/h3>\\n<p>With this board, they do not expect it to be chosen. It&rsquo;s edgier and purposely a little bit too far over the top. The idea of this board is that it will help to generate thought and ideas.<\\/p>\\n\\n<h3>Baby Bear Mood Board<\\/h3>\\n<p>This board is kind of the best of the Mama &amp; Papa bear boards. It is that happy medium. It has the familiar feel of the Papa bear board, but that edginess that will help to cater to the teen audience.<\\/p>\\n\\n<p>Of course, the final decision was to use elements from each board.<\\/p>\\n\\n<p>The most interesting part of this talk was that <strong>real design elements were actually worked into the mood boards<\\/strong>. I haven&rsquo;t seen too many mood boards, but all of the ones I had seen were very abstract. This was a nice change.<\\/p>\\n\\n<h2><a href=\\\"http:\\/\\/www.ericlohman.com\\/\\\" class=\\\"inline\\\">Eric Lohman<\\/a> AKQA<\\/h2>\\n<p>Eric had the opportunity to help re-brand and redesign the <a href=\\\"http:\\/\\/www.nhl.com\\/\\\">NHL<\\/a> website. Before his company was involved, the NHL had no real brand; they had all of these different banners with different treatments of their logo. They helped to standardize the logo and provide a simple system for expanding it.<\\/p>\\n\\n<p><img src=\\\"http:\\/\\/trevordavis.net\\/images\\/content\\/2009\\/01\\/nhl-team-logos.gif\\\" alt=\\\"NHL Team Logos\\\" width=\\\"220\\\" height=\\\"220\\\" class=\\\"leftSide pullLeft col4\\\" \\/>So AKQA developed mood boards, and <strong>the entire design concept was inspired by one image: black ice<\\/strong>. This is where the dark concept came from. It really gives the site a sleek look, and it makes the large action shots really pop.<\\/p>\\n\\n<p>Another difficult task that they encountered was dealing with the teams logos. They were all odd shaped and nothing tied them all together. They decided to do some intense cropping to gain consistency between the logos.<\\/p>\\n\\n<p>Finally, Eric talked about adding more interactivity to the site. You can see game highlights, watch games live, and even look through an enormous photo gallery. The new NHL site is a tremendous design success.<\\/p>\\n\\n<h2><a href=\\\"http:\\/\\/caviarfrenchfries.tumblr.com\\/\\\" class=\\\"inline\\\">Ari Kushimoto<\\/a> CaviarFrenchFries <\\/h2>\\n<p>Ari was tasked with developing 3 mood boards for an intranet that had a Web 2.0 feel (yuck, I hate saying that). Of course she had a tight deadline. This is where she found that her bookmarking service really paid off. <strong>All of that time she spent bookmarking cool sites and ideas really paid off and saved time<\\/strong>.<\\/p>\\n\\n<p>She took screenshots, organized into different folders, and then got started on the mood boards. She setup a consistent grid for the boards, and this made it easier to swap things in and out.<\\/p>\\n\\n<p>There was some good discussion afterward about good tools that help to organize screenshots: <a href=\\\"http:\\/\\/www.realmacsoftware.com\\/littlesnapper\\/\\\">LittleSnapper<\\/a> and <a href=\\\"http:\\/\\/derailer.org\\/paparazzi\\/\\\">Paparazzi<\\/a><\\/p>\\n\\n<h2><a href=\\\"http:\\/\\/www.robsoule.com\\/\\\" class=\\\"inline\\\">Rob Soul&eacute;<\\/a> Viget Labs<\\/h2>\\n<p>Rob talked about the Viget design process. The project begins by sending a couple of surveys to the client. The surveys ask some abstract questions like &ldquo;What kind of car would your company be&rdquo; and &ldquo;What magazine(s) describe your company&rdquo;. These surveys help the client to focus on their thoughts of their brand and <strong>help to give the designers a better idea of what the client is looking for<\\/strong>.<\\/p>\\n\\n<p>Once a project is ready to be designed, a lead designer is assigned the project, and they sit down with 2 other designers. They discuss 3 directions that they want to go in and discuss elements that they want to include in the mood boards. While this is going on, the user experience designer is working on the wireframes.<\\/p>\\n\\n<p>One thing that I thought was really interesting was that they discuss specific elements to add to the mood boards. So for example, a submit button for a form, a headline, and the navigation. While sometimes they also do abstract mood boards, I think <strong>it seems more useful to real elements<\\/strong> that you would see on a site.<\\/p>\\n\\n<h2><a href=\\\"http:\\/\\/sixtwothree.org\\/\\\" class=\\\"inline\\\">Jason Garber<\\/a> Mixx<\\/h2>\\n<p>When Jason used to work at AOL, he was involved in creating <a href=\\\"http:\\/\\/ficlets.com\\/\\\">Ficlets<\\/a> which is basically an online community for short story writers. It became popular relatively quickly, and they had a solid community. A few years later&hellip;Jason and the others who helped to create Ficlets no longer work at AOL, and suddenly, AOL decided they are going to shut down Ficlets.<\\/p>\\n<p>It is not really clear what the reasoning is, basically AOL just sucks. Well, Jason and the others who created it didn&rsquo;t want the site to go away. It was successful and had a solid community. So Jason and friends decided to basically recreate it.<\\/p>\\n<p>This is quite an opportunity for anyone creating a website. <strong>They were able to examine the way that users were using Ficlets and found some ways to improve it<\\/strong>. They are facing some tough decisions trying to determine what to do with past Ficlets&rsquo; stories and the community. Somehow, they need to transport the community from Ficlets to <a href=\\\"http:\\/\\/ficly.com\\/\\\">Ficly<\\/a>, which will be the new home starting on January 15th.<\\/p>\\n\\n<h2>Conclusion<\\/h2>\\n<p>It was very interesting to hear about the process and experience of so many talented people. I think the format of the 5 minute presentation also helped to focus the discussion. All in all, it was a good time.<\\/p>\",\"14\":{\"old_id\":{}}}}','2014-01-19 21:52:33','2014-08-08 19:32:31','7b4632b0-b0e6-4d03-b390-5cc2de991b7a',1),(385,156,4,1,2,NULL,'{\"authorId\":\"1\",\"title\":\"Jason Santa Maria is Leaving Happy Cog\",\"slug\":\"jason-santa-maria-is-leaving-happy-cog\",\"postDate\":1231242524,\"expiryDate\":null,\"enabled\":\"1\",\"fields\":{\"2\":\"<p>Probably my favorite designer out there right now <a href=\\\"http:\\/\\/jasonsantamaria.com\\/articles\\/leaving-happy-cog\\/\\\">is going freelance<\\/a>. Hey Jason, want to come work at my company instead?<\\/p>\",\"14\":{\"old_id\":{}},\"4\":\"http:\\/\\/jasonsantamaria.com\\/articles\\/leaving-happy-cog\\/\"}}','2014-01-19 21:52:33','2014-08-08 19:32:31','83ce40db-6b3b-4c26-9b72-a70a2c52fdfa',1),(386,157,4,1,2,NULL,'{\"authorId\":\"1\",\"title\":\"A Plea for WordPress Help\",\"slug\":\"a-plea-for-wordpress-help\",\"postDate\":1231204447,\"expiryDate\":null,\"enabled\":\"1\",\"fields\":{\"2\":\"<p>I love using WordPress to power websites.<\\/p>\\n\\n<p>While it began strictly as a blogging platform, it has evolved into a pretty solid CMS, but there is one little thing that has been bugging me for a while now.<\\/p>\\n<!--more-->\\n<p>With the launch of my redesigned site, I was interested in using the <a href=\\\"http:\\/\\/wordpress.org\\/extend\\/plugins\\/wp-pagenavi\\/\\\">WP-PageNavi plugin<\\/a> because I think it provides much better paging than the default WordPress previous\\/next.<\\/p>\\n\\n<p>The problem is that WordPress includes <strong>\\/category\\/<\\/strong> in the URL, and I hate it. For example, on my <a href=\\\"http:\\/\\/trevordavis.net\\/blog\\/\\\">blog page<\\/a>, you can click the older entries link at the bottom of the content area, and you can see that the link points to here:<\\/p>\\n<div class=\\\"codeblock\\\"><code>\\nhttp:\\/\\/trevordavis.net\\/blog\\/page\\/2\\/&nbsp;\\n\\n<\\/code><\\/div>\\n\\n<p>But, you will notice that you actually get redirected to:<\\/p>\\n<div class=\\\"codeblock\\\"><code>\\nhttp:\\/\\/trevordavis.net\\/category\\/blog\\/page\\/2\\/&nbsp;\\n\\n<\\/code><\\/div>\\n\\n<p>I had to do this because <a href=\\\"http:\\/\\/trevordavis.net\\/blog\\/page\\/2\\/\\\">\\/blog\\/page\\/2\\/<\\/a> returned a 404 error. You can see this by going <a href=\\\"http:\\/\\/trevordavis.net\\/blog\\/page\\/3\\/\\\">directly to the third page<\\/a>.<\\/p>\\n\\n<h2>Some Suggested Fixes<\\/h2>\\n<p>I read through <a href=\\\"http:\\/\\/wordpress.org\\/extend\\/ideas\\/topic.php?id=359\\\">a couple<\\/a> of <a href=\\\"http:\\/\\/wordpress.org\\/support\\/topic\\/98005\\\">forum posts<\\/a>  discussing the problem, but none of the fixes mentioned seemed to work.<\\/p>\\n<p>The most discussed suggestion was to change the category base permalink to <strong>\\/.<\\/strong>, but that did not work for me. Surprisingly, some people said it worked for them. That was pretty bizarre to me, so I kept looking.<\\/p>\\n<p>Another suggestion was to edit a core WordPress file, which I do not want to do.<\\/p>\\n\\n<h2>Plugins to Fix the Problem?<\\/h2>\\n<p>I came across 3 plugins that were supposed to fix the problem, but none of them worked for me either.<\\/p>\\n<ul>\\n <li><a href=\\\"http:\\/\\/wordpress.org\\/extend\\/plugins\\/top-level-cats\\/\\\">Top Level Categories<\\/a><\\/li>\\n <li><a href=\\\"http:\\/\\/wordpress.org\\/extend\\/plugins\\/decategorizer\\/\\\">Decategorizer<\\/a><\\/li>\\n <li><a href=\\\"http:\\/\\/www.brianshoff.com\\/wordpress\\/category-base-removal-plugin.htm\\\">Category Base Killer<\\/a><\\/li>\\n<\\/ul>\\n\\n<h2>My Idea<\\/h2>\\n<p>So I am not the greatest with regular expressions and htaccess and all that jazz, but my thinking is that I can use the <a href=\\\"http:\\/\\/wordpress.org\\/extend\\/plugins\\/redirection\\/\\\">Redirection plugin<\\/a> to use a pass-through to rewrite any link like this:<\\/p>\\n<div class=\\\"codeblock\\\"><code>\\n\\/blog\\/page\\/(*)\\/&nbsp;\\n\\n<\\/code><\\/div>\\n<p>To this:<\\/p>\\n<div class=\\\"codeblock\\\"><code>\\n\\/blog\\/page\\/$1\\/&nbsp;\\n\\n<\\/code><\\/div>\\n\\n<p><em>Is that not possible?<\\/em> I could not get it to work. Does anyone know how to get something like this to work? <strong>WordPress team, why has this been a problem for so long?<\\/strong><\\/p>\",\"14\":{\"old_id\":{}}}}','2014-01-19 21:52:33','2014-08-08 19:32:31','eae146ca-247b-4e26-99c0-ff1f87b53357',1),(387,158,4,1,2,NULL,'{\"authorId\":\"1\",\"title\":\"Tabinta\",\"slug\":\"tabinta\",\"postDate\":1230659788,\"expiryDate\":null,\"enabled\":\"1\",\"fields\":{\"2\":\"When editin<p>g stuff in WordPress, I was always so annoyed that I could not tab in the textareas. <a href=\\\"https:\\/\\/addons.mozilla.org\\/en-US\\/firefox\\/addon\\/3955\\/\\\">Tabinta<\\/a> Firefox plugin to the rescue.<\\/p>\",\"14\":{\"old_id\":{}},\"4\":\"https:\\/\\/addons.mozilla.org\\/en-US\\/firefox\\/addon\\/3955\\/\"}}','2014-01-19 21:52:33','2014-08-08 19:32:31','8bb91e19-a9fe-4f67-9b03-36b442802368',1),(388,159,4,1,2,NULL,'{\"authorId\":\"1\",\"title\":\"Design Decisions: The new Highrise signup chart\",\"slug\":\"design-decisions-the-new-highrise-signup-chart\",\"postDate\":1230638927,\"expiryDate\":null,\"enabled\":\"1\",\"fields\":{\"2\":\"<p><a href=\\\"http:\\/\\/www.37signals.com\\/svn\\/posts\\/1496-design-decisions-the-new-highrise-signup-chart\\\">Jason Fried discusses the many design iterations<\\/a> for the Highrise signup chart. <a href=\\\"http:\\/\\/www.highrisehq.com\\/signup\\\">What they ended up with<\\/a> is very appealing and accomplishes they goals they seemed to set out.<\\/p>\",\"14\":{\"old_id\":{}},\"4\":\"http:\\/\\/37signals.com\\/svn\\/posts\\/1496-design-decisions-the-new-highrise-signup-chart\"}}','2014-01-19 21:52:33','2014-08-08 19:32:31','a40eee1a-308c-420c-876d-ae6c395d5cd0',1),(389,160,4,1,2,NULL,'{\"authorId\":\"1\",\"title\":\"WordPress Cheat Sheet\",\"slug\":\"wordpress-cheat-sheet\",\"postDate\":1230070267,\"expiryDate\":null,\"enabled\":\"1\",\"fields\":{\"2\":\"<p>This <a href=\\\"http:\\/\\/wpcandy.com\\/articles\\/tutorials\\/the-wordpress-help-sheet.html\\\">WordPress cheat sheet<\\/a> seems like it could be pretty useful. I think there are some important functions that are left off though, and it&rsquo;s definitely geared more towards beginners.<\\/p>\",\"14\":{\"old_id\":{}},\"4\":\"http:\\/\\/wpcandy.com\\/articles\\/tutorials\\/the-wordpress-help-sheet.html\"}}','2014-01-19 21:52:34','2014-08-08 19:32:31','a1a30072-9de6-408d-b780-fc25844e8c51',1),(390,161,4,1,2,NULL,'{\"authorId\":\"1\",\"title\":\"WordPress Art Direction Plugin\",\"slug\":\"wordpress-art-direction-plugin\",\"postDate\":1229898491,\"expiryDate\":null,\"enabled\":\"1\",\"fields\":{\"2\":\"<p>Inspired by <a href=\\\"http:\\/\\/jasonsantamaria.com\\/\\\">Jason Santa Maria&rsquo;s &ldquo;art directed&rdquo; site<\\/a>, Noel Jackson decided to create an <a href=\\\"http:\\/\\/noel.io\\/wordpress-art-direction-plugin\\/\\\">art direction plugin for WordPress<\\/a>, which allows you to add per post styling. Interesting.<\\/p>\",\"14\":{\"old_id\":{}},\"4\":\"http:\\/\\/noel.io\\/wordpress-art-direction-plugin\\/\"}}','2014-01-19 21:52:34','2014-08-08 19:32:31','da980848-f93a-4ec7-ac5a-2b4bcbd26491',1),(391,162,4,1,2,NULL,'{\"authorId\":\"1\",\"title\":\"Jeffrey Zeldman: Understanding Web Design\",\"slug\":\"jeffrey-zeldman-understanding-web-design\",\"postDate\":1229697421,\"expiryDate\":null,\"enabled\":\"1\",\"fields\":{\"2\":\"<p>A video of <a href=\\\"http:\\/\\/www.aiga.org\\/content.cfm\\/video-gain-2008-zeldman\\\">Jeffrey Zeldman presenting his talk on Understanding Web Design<\\/a>. I saw this presentation at <a href=\\\"http:\\/\\/trevordavis.net\\/blog\\/web\\/an-event-apart-chicago\\/\\\">An Event Apart<\\/a>, and I am still amazed at how great of a speaker he is.<\\/p>\",\"14\":{\"old_id\":{}},\"4\":\"http:\\/\\/www.aiga.org\\/content.cfm\\/video-gain-2008-zeldman\"}}','2014-01-19 21:52:34','2014-08-08 19:32:31','f85e75d0-d3b6-47a7-8701-82a7ef5e4390',1),(392,163,4,1,2,NULL,'{\"authorId\":\"1\",\"title\":\"Google pushing users away from IE?\",\"slug\":\"google-pushing-users-away-from-ie\",\"postDate\":1229680857,\"expiryDate\":null,\"enabled\":\"1\",\"fields\":{\"2\":\"<p>When users use <a href=\\\"http:\\/\\/www.techradar.com\\/news\\/internet\\/google-pushing-users-away-from-ie--496216\\\">Gmail in Internet Explorer<\\/a>, a red link appears at the top right of the page that says &ldquo;Get faster Google Mail&rdquo;. The link takes you to a <a href=\\\"http:\\/\\/mail.google.com\\/support\\/bin\\/answer.py?&amp;answer=107906&amp;hl=en-GB\\\">page suggesting faster browsers<\\/a>. Love it.<\\/p>\",\"14\":{\"old_id\":{}},\"4\":\"http:\\/\\/www.techradar.com\\/news\\/internet\\/google-pushing-users-away-from-ie--496216\"}}','2014-01-19 21:52:34','2014-08-08 19:32:31','043e7d8d-3711-478a-bddb-7985f9197a38',1),(393,164,4,1,2,NULL,'{\"authorId\":\"1\",\"title\":\"The Death Throes of Print?\",\"slug\":\"the-death-throes-of-print\",\"postDate\":1229596996,\"expiryDate\":null,\"enabled\":\"1\",\"fields\":{\"2\":\"<p>Jason Santa Maria wonders if <a href=\\\"http:\\/\\/jasonsantamaria.com\\/articles\\/the-death-throes-of-print\\/\\\">print really is nearing its death<\\/a>. I still can&rsquo;t imagine reading a book online though.<\\/p>\",\"14\":{\"old_id\":{}},\"4\":\"http:\\/\\/jasonsantamaria.com\\/articles\\/the-death-throes-of-print\\/\"}}','2014-01-19 21:52:34','2014-08-08 19:32:31','76dd26c5-e1bc-4f75-9942-03672e40df41',1),(394,165,4,1,2,NULL,'{\"authorId\":\"1\",\"title\":\"Using jQuery Clone\",\"slug\":\"using-jquery-clone\",\"postDate\":1229592815,\"expiryDate\":null,\"enabled\":\"1\",\"fields\":{\"2\":\"<p>I love how I can use jQuery to solve all of my problems. When I was working on a website for <a href=\\\"http:\\/\\/www.thenationaltree.org\\/\\\">The Lighting of the National Christmas Tree<\\/a>, I had to create a page that displayed all of the ornaments. Thank god for the jQuery <a href=\\\"http:\\/\\/docs.jquery.com\\/Manipulation\\/clone\\\">clone()<\\/a> method, which saved me loads of time and effort.<\\/p>\\n<!--more-->\\n<h2>The Situation<\\/h2>\\n<p>I was on a tight deadline, and had to figure out some way to layout all of the state ornaments. Not to mention the fact that I had to crop and resize 56 images to 2 different sizes. Yes, I know there are only 50 states, but the US territories were included as well.<\\/p>\\n<p>So the layout had to be easy enough for everyone to see all the ornaments and be able to click to get a more detailed photo and some information about the ornament. I really was not interested in creating 56 separate pages with information about each ornament, so I went scouring through the jQuery documentation to see how I could copy elements.<\\/p>\\n<p>Before I get started describing what I had to do, <a href=\\\"http:\\/\\/trevordavis.net\\/play\\/using-jquery-clone-for-a-lightbox\\/\\\">here is a demo page that I created<\\/a>.<\\/p>\\n<h2>My Solution<\\/h2>\\n<p>So basically, this is what I wanted to happen when an ornament was clicked:<\\/p>\\n<ol>\\n<li>Get the source of the larger image to be shown<\\/li>\\n<li>Copy the description text about the ornament<\\/li>\\n<li>Append the image and text and open it in a modal window<\\/li>\\n<\\/ol>\\n<p>The styling of the example is nothing special, so I will stick to explaining the script.<\\/p>\\n<h3>The Script<\\/h3>\\n<p>First, we want all of this to happen after the document is loaded and when the ornament links are clicked:<\\/p>\\n<div class=\\\"codeblock\\\"><code>\\n$(document).ready(function()&nbsp;&#123;<br \\/>&nbsp;$(\'ul.ornaments&nbsp;a\').click(function()&nbsp;&#123;<br \\/>&nbsp;&nbsp;return&nbsp;false;<br \\/>&nbsp;&#125;);<br \\/>&#125;);&nbsp;\\n\\n<\\/code><\\/div>\\n<p>Next, we want to setup the modal window with a couple of empty divs: <em>(Note: line breaks added for readability)<\\/em><\\/p>\\n<div class=\\\"codeblock\\\"><code>\\n$(\'body\').append(\'&lt;div&nbsp;id=\\\"overlay\\\"&gt;&lt;\\/div&gt;<br \\/>&nbsp;&lt;div&nbsp;id=\\\"modal\\\"&gt;<br \\/>&nbsp;&nbsp;&lt;div&nbsp;id=\\\"modalInner\\\"&gt;<br \\/>&nbsp;&nbsp;&nbsp;&lt;a&nbsp;href=\\\"#\\\"&nbsp;id=\\\"close\\\"&nbsp;title=\\\"Close\\\"&gt;Close&lt;\\/a&gt;<br \\/>&nbsp;&nbsp;&nbsp;&lt;div&nbsp;id=\\\"modalImageColumn\\\"&gt;&lt;\\/div&gt;<br \\/>&nbsp;&nbsp;&nbsp;&lt;div&nbsp;id=\\\"modalTextColumn\\\"&gt;&lt;\\/div&gt;<br \\/>&nbsp;&nbsp;&nbsp;&lt;div&nbsp;class=\\\"clearing\\\"&gt;&lt;\\/div&gt;<br \\/>&nbsp;&nbsp;&lt;\\/div&gt;<br \\/>&nbsp;&lt;\\/div&gt;\');&nbsp;\\n\\n<\\/code><\\/div>\\n<p>Since IE6 doesn&rsquo;t support fixed positioning, we need to get the actual height of the page so we can apply that height to the overlay:<\\/p>\\n<div class=\\\"codeblock\\\"><code>\\nif($.browser.msie&nbsp;&amp;&amp;&nbsp;$.browser.version&nbsp;&lt;=&nbsp;6.0)&nbsp;&#123;<br \\/>&nbsp;var&nbsp;windowHeight&nbsp;=&nbsp;$(document).height();<br \\/>&nbsp;$(\'#overlay\').height(windowHeight);<br \\/>&#125;&nbsp;\\n\\n<\\/code><\\/div>\\n<p>Next, we set the opacity of the overlay, start to fade it in, position the modal window, and start to fade it in.<\\/p>\\n<div class=\\\"codeblock\\\"><code>\\n$(\'#overlay\').css(\'opacity\',&nbsp;0.5).fadeIn(\'fast\');<br \\/>$(\'#modal\').fadeIn(\'slow\');&nbsp;&nbsp;<br \\/>var&nbsp;scrollPos&nbsp;=&nbsp;$(window).scrollTop()&nbsp;+&nbsp;50;&nbsp;&nbsp;<br \\/>$(\'div#modal\').css(\'top\',scrollPos+\'px\');&nbsp;\\n\\n<\\/code><\\/div>\\n<p>The order of these things can be moved around some, but this is what I ended up doing, and everything looked good.<\\/p>\\n<p>Next, we want to close and remove the modal window when the close button is clicked or the background overlay is clicked:<\\/p>\\n<div class=\\\"codeblock\\\"><code>\\n$(\'div#modal&nbsp;a#close,div#overlay\').bind(\'click\',&nbsp;function()&nbsp;&#123;<br \\/>&nbsp;$(\'div#modal\').fadeOut(\'fast\',function()&nbsp;&#123;<br \\/>&nbsp;&nbsp;$(\'div#overlay\').fadeOut(\'fast\',function()&nbsp;&#123;<br \\/>&nbsp;&nbsp;&nbsp;$(this).remove();&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<br \\/>&nbsp;&nbsp;&#125;);<br \\/>&nbsp;&nbsp;$(this).remove();&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<br \\/>&nbsp;&#125;);<br \\/>&nbsp;return&nbsp;false;<br \\/>&#125;);&nbsp;\\n\\n<\\/code><\\/div>\\n<p>Next, we grab the url of the link that was clicked, which goes to the full size image, and append the image to the modal window. Once the image has been loaded, we fade it in:<\\/p>\\n<div class=\\\"codeblock\\\"><code>\\nvar&nbsp;imgUrl&nbsp;=&nbsp;$(this).attr(\'href\');<br \\/>$(\'div#modalImageColumn\').append(\'&lt;img&nbsp;src=\\\"\'+imgUrl+\'\\\"&nbsp;alt=\\\"\\\"&nbsp;class=\\\"frame\\\"&nbsp;height=\\\"400\\\"&nbsp;id=\\\"ornament\\\"&nbsp;width=\\\"400\\\"&nbsp;\\/&gt;\');<br \\/>$(\'img#ornament\').load(function()&nbsp;&#123;<br \\/>&nbsp;$(this).fadeIn();&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<br \\/>&#125;);&nbsp;\\n\\n<\\/code><\\/div>\\n<p>Finally, we get to use the clone() method. We target the div with the class of <strong>stateDescription<\\/strong> that is a sibling of the link we clicked, clone it, and append it to the modal window:<\\/p>\\n<div class=\\\"codeblock\\\"><code>\\n$(this).siblings(\'.stateDescription\').clone().appendTo(\'div#modalTextColumn\');&nbsp;\\n\\n<\\/code><\\/div>\\n<h2>Conclusion<\\/h2>\\n<p>Pretty cool stuff if I say so myself. I don&rsquo;t think there are any jQuery plugins out there that would have helped me achieve this, which is why it is important to actually understand jQuery.<\\/p>\\n\\n<p><a href=\\\"http:\\/\\/trevordavis.net\\/play\\/using-jquery-clone-for-a-lightbox\\/\\\" class=\\\"more-link\\\">See Demo<\\/a><\\/p>\\n\\n<p><a href=\\\"http:\\/\\/trevordavis.net\\/images\\/content\\/2008\\/12\\/modal.js\\\">Here is the full script to download<\\/a>. You can also take a look at the <a href=\\\"http:\\/\\/www.thenationaltree.org\\/visit-santa\\/pathway-of-peace\\/\\\">final product on the National Christmas Tree site<\\/a>.<\\/p>\\n\\n<p>But, I would encourage you to actually understand jQuery instead of just grabbing code and using it.<\\/p>\",\"14\":{\"old_id\":{}}}}','2014-01-19 21:52:34','2014-08-08 19:32:31','e310a28e-4381-4ffa-b368-af14d518df98',1),(395,166,4,1,2,NULL,'{\"authorId\":\"1\",\"title\":\"Version 3 Launched\",\"slug\":\"version-3-launched\",\"postDate\":1229524009,\"expiryDate\":null,\"enabled\":\"1\",\"fields\":{\"2\":\"<p>Well, I finally think my redesign is good enough for the public eye. There are definitely some tweaks that I need to make, but it&rsquo;s good enough for now.<\\/p>\\n\\n<p>I plan on tweaking stuff for the rest of the week and doing some clean up on some of the older articles.<\\/p>\\n<!--more-->\\n\\n<p>This goal of this design was to adhere to a very strict grid, and I used the 16 column <a href=\\\"http:\\/\\/960.gs\\/\\\">960 grid<\\/a>.<\\/p>\\n\\n<p><a href=\\\"http:\\/\\/trevordavis.net\\/blog\\/news\\/version-3-launched\\/?grid=true\\\" class=\\\"viewGrid more-link\\\">View Grid<\\/a> <em>(click on the grid to remove it)<\\/em><\\/p>\\n\\n<p>I also wanted to have a stronger focus on some of the things that I can do with jQuery. Check out the accordion and recent work in the sidebar and the comments on the blog articles.<\\/p>\\n\\n<p>Well, that is enough for now. I&rsquo;m sure I will have more to talk about later, but I have to run. Please give me your feedback. I by no means call myself a designer, which is why I tried to go simplistic.<\\/p>\",\"14\":{\"old_id\":{}}}}','2014-01-19 21:53:12','2014-08-08 19:32:31','714c9d1e-1783-4d95-a2f1-719e544fe667',1),(396,167,4,1,2,NULL,'{\"authorId\":\"1\",\"title\":\"A List Apart: Issue 274\",\"slug\":\"a-list-apart-issue-274\",\"postDate\":1229476234,\"expiryDate\":null,\"enabled\":\"1\",\"fields\":{\"2\":\"<p><a href=\\\"http:\\/\\/www.alistapart.com\\/issues\\/274\\\">This issue<\\/a> has 2 excellent articles focused on content strategy. &ldquo;A website without a content strategy is like a speeding vehicle without a driver.&rdquo;<\\/p>\",\"14\":{\"old_id\":{}},\"4\":\"http:\\/\\/www.alistapart.com\\/issues\\/274\"}}','2014-01-19 21:53:12','2014-08-08 19:32:31','0cf61c1d-d32a-4298-881c-23968c9c8a32',1),(397,168,4,1,2,NULL,'{\"authorId\":\"1\",\"title\":\"Redesign\",\"slug\":\"redesign\",\"postDate\":1229475235,\"expiryDate\":null,\"enabled\":\"1\",\"fields\":{\"2\":\"<p>Just a quick note to everyone that I am planning on launching my redesign tomorrow at some point. Some things are defintely going to need some clean up after launch, but I just feel like it is at a point where small things shouldn&rsquo;t hold it up.<\\/p>\\n\\n<p>So if something looks broken, I will be fixing it soon.<\\/p>\",\"14\":{\"old_id\":{}}}}','2014-01-19 21:53:12','2014-08-08 19:32:31','b84007e6-59e9-40e8-b6b6-1a19b74349b0',1),(398,169,4,1,2,NULL,'{\"authorId\":\"1\",\"title\":\"Weekly Link Round-Up #59\",\"slug\":\"weekly-link-round-up-59\",\"postDate\":1229269725,\"expiryDate\":null,\"enabled\":\"1\",\"fields\":{\"2\":\"<p>Nice, 2 days off this week, so hopefully I will be able to get my redesign finished up. Here are a few interesting links from this past week:<\\/p>\\n<ul>\\n<li><a href=\\\"http:\\/\\/cameronmoll.com\\/archives\\/2008\\/12\\/four_resources_when_starting_a_project\\/\\\">Four resources to consider when starting a project<\\/a>\\n<p class=\\\"last\\\">Cameron gives a nice list of resources to use before starting a project:<\\/p>\\n<ol>\\n<li>Precedent: Who&rsquo;s done it already and how?<\\/li>\\n<li>External data.<\\/li>\\n<li>Internal data &amp; knowledge.<\\/li>\\n<li>Educated guesses.<\\/li>\\n<\\/ol>\\n<\\/li>\\n<li><a href=\\\"http:\\/\\/www.maxdesign.com.au\\/2008\\/12\\/12\\/sign-in\\/\\\">Sign in, register, join?<\\/a>\\n<p>This is a really interesting collection of data. What terms are used for new and existing users? Another interesting thing that I found was people using &ldquo;Login&rdquo; vs. &ldquo;Log in&rdquo;.<\\/p>\\n<\\/li>\\n<li><a href=\\\"http:\\/\\/visitmix.com\\/Articles\\/Web-Standards-Where-the-ROI-is\\\">Web Standards: Where the ROI is<\\/a>\\n<p>Sometimes it&rsquo;s hard to sell web standards to people, but Molly gives some excellent points to help back us up.<\\/p>\\n<\\/li>\\n<\\/ul>\",\"14\":{\"old_id\":{}}}}','2014-01-19 21:53:12','2014-08-08 19:32:31','61fa5406-410b-45d4-a9cf-604d9d03ef96',1),(399,170,4,1,2,NULL,'{\"authorId\":\"1\",\"title\":\"Unobtrusive JavaScript Print Link (with jQuery)\",\"slug\":\"unobtrusive-javascript-print-link-with-jquery\",\"postDate\":1228897806,\"expiryDate\":null,\"enabled\":\"1\",\"fields\":{\"2\":\"<p>There are times when I have to implement designs that have print links on them. While I may think they are useless, I still have to make them work as they are a part of an approved comp. Sure, it is easy to have a link and then add an onclick event to launch the print window, but is that the right thing to do?<\\/p>\\n<!--more-->\\n<p>Clicking a JavaScript print link does nothing more than launch the browser&rsquo;s print window. If a person has JavaScript disabled, nothing will happen when they click a link like this:<\\/p>\\n<div class=\\\"codeblock\\\"><code>\\n&lt;a&nbsp;href=\\\"#\\\"&nbsp;onclick=\\\"window.print();&nbsp;return&nbsp;false;\\\"&gt;Print&lt;\\/a&gt;&nbsp;\\n\\n<\\/code><\\/div>\\n\\n<p>Ideally, we do not want to have things on a page that do not work without JavaScript enabled. So the solution is to write the print link into the DOM using JavaScript, then attach a click event to the link. Luckily, I use jQuery on every project, so it makes the process much easier.<\\/p>\\n\\n<h2>The Solution<\\/h2>\\n<p>In this example, we are going to prepend a list item with a link to an unordered list with the id of <strong>tools<\\/strong>. Then, we attach a click event to the link we have just added to the DOM. Finally, we <strong>return false<\\/strong> to override the action of the link.<\\/p>\\n\\n<p><strong>Here is the script:<\\/strong><\\/p>\\n<div class=\\\"codeblock\\\"><code>\\n$(document).ready(function()&nbsp;&#123;<br \\/>&nbsp;$(\'ul#tools\').prepend(\'&lt;li&nbsp;class=\\\"print\\\"&gt;&lt;a&nbsp;href=\\\"#print\\\"&gt;Click&nbsp;me&nbsp;to&nbsp;print&lt;\\/a&gt;&lt;\\/li&gt;\');<br \\/>&nbsp;$(\'ul#tools&nbsp;li.print&nbsp;a\').click(function()&nbsp;&#123;<br \\/>&nbsp;&nbsp;window.print();<br \\/>&nbsp;&nbsp;return&nbsp;false;<br \\/>&nbsp;&#125;);<br \\/>&#125;);&nbsp;\\n\\n<\\/code><\\/div>\\n\\n<p>Take a look at the <a href=\\\"http:\\/\\/trevordavis.net\\/play\\/javascript-print-link\\/\\\">demo page<\\/a> to see it in action. The script is nothing complex; it is just another example of using jQuery to improve a user&rsquo;s experience.<\\/p>\",\"14\":{\"old_id\":{}}}}','2014-01-19 21:53:12','2014-08-08 19:32:31','d50f56e8-d23b-4a63-a10b-55fba9e4443a',1),(400,171,4,1,2,NULL,'{\"authorId\":\"1\",\"title\":\"Weekly Link Round-Up #58\",\"slug\":\"weekly-link-round-up-58\",\"postDate\":1228775093,\"expiryDate\":null,\"enabled\":\"1\",\"fields\":{\"2\":\"<p>Man, it&rsquo;s tough to get work done on my own site when I am so busy with freelance work. Slowly but surely, I am making progress, and I am hoping that by having some days off this month, I will be able to get it done soon. Here are the links that I found interesting this week:<\\/p>\\n\\n<ul>\\n<li><a href=\\\"http:\\/\\/www.airbagindustries.com\\/archives\\/airbag\\/cholesterol.php\\\">Cholesterol.<\\/a>\\n<p>I think having debate in the workplace is so important to reaching the best decision. This is why I think Obama will be successful in office; he is not just surrounding himself with &ldquo;yes&rdquo; men.<\\/p>\\n<\\/li>\\n<li><a href=\\\"http:\\/\\/psdtuts.com\\/articles\\/9-information-design-tips-to-make-you-a-better-web-designer\\/\\\">9 Information Design Tips to Make You a Better Web Designer<\\/a>\\n<p>Some nice tips that are focused more on the organization side than the design side.<\\/p>\\n<\\/li>\\n<li><a href=\\\"http:\\/\\/jasonsantamaria.com\\/articles\\/cultivating-conversations\\/\\\">Cultivating Conversations<\\/a>\\n<p>Jason brings up the point that sometimes comments become overwhelming on blog posts. He suggests that the author should use &ldquo;milemarker&rdquo; comments so that readers can get a quick snapshot of the comments so far.<\\/p>\\n<\\/li>\\n<\\/ul>\\n<!--more-->\\n<ul>\\n<li><a href=\\\"http:\\/\\/surveys.webdirections.org\\/index.php?sid=38693\\\">The State of the Web 2008<\\/a>\\n<p>Do you make websites? Take the survey.<\\/p>\\n<\\/li>\\n<li><a href=\\\"http:\\/\\/freelanceswitch.com\\/finding\\/six-valuable-things-web-design-clients-wont-tell-you\\/\\\">Six Valuable Things Web Design Clients Won&rsquo;t Tell You<\\/a>\\n<p>I wish clients would admit things like this. I guess the solution to that is to educate the client.<\\/p>\\n<\\/li>\\n<li><a href=\\\"http:\\/\\/www.zeldman.com\\/2008\\/12\\/04\\/20-signs-you-dont-want-that-web-design-project\\/\\\">20 signs you don&rsquo;t want that web design project<\\/a>\\n<p>Wow, I can&rsquo;t believe some of these things actually happened.<\\/p>\\n<\\/li>\\n<li><a href=\\\"http:\\/\\/www.designobserver.com\\/archives\\/entry.html?id=38855\\\">Chris Pullman: What I&rsquo;ve Learned <\\/a>\\n<p>Chris shares ten important lessons that he learned while working for WGBH for 35 years.<\\/p>\\n<\\/li>\\n<li><a href=\\\"http:\\/\\/www.miltonglaser.com\\/pages\\/milton\\/essays\\/es3.html\\\">Ten Things I Have Learned<\\/a>\\n<p>Milton Glaser&rsquo;s talk from 2001 was also linked around this week. It&rsquo;s great to see so many tips from these guys with so much experience.<\\/p>\\n<\\/li>\\n<li><a href=\\\"http:\\/\\/www.alistapart.com\\/issues\\/273\\\">A List Apart: Issue 273<\\/a>\\n<p>I know some about IA, but I definitely learned some new ideas while reading <a href=\\\"http:\\/\\/www.alistapart.com\\/articles\\/flexiblefueleducatingtheclientonia\\\">Flexible Fuel: Educating the Client on IA<\\/a>. I really hadn&rsquo;t heard much about agile design, but <a href=\\\"http:\\/\\/www.alistapart.com\\/articles\\/gettingrealaboutagiledesign\\\">Getting Real About Agile Design<\\/a> was helpful in learning more about it.<\\/p>\\n<\\/li>\\n<\\/ul>\",\"14\":{\"old_id\":{}}}}','2014-01-19 21:53:13','2014-08-08 19:32:32','301340c6-db99-420c-b758-30f69af1eb70',1),(401,172,4,1,2,NULL,'{\"authorId\":\"1\",\"title\":\"Weekly Link Round-Up #57\",\"slug\":\"weekly-link-round-up-57\",\"postDate\":1228180784,\"expiryDate\":null,\"enabled\":\"1\",\"fields\":{\"2\":\"<p>We need to have 4 day weekends more often. I got so much work done on my redesign. I&rsquo;m currently in the process of dealing with IE6, then I am going to start creating the theme. So there is a possibility that I will have something launched sometime this week. Just a few interesting items from this past week:<\\/p>\\n\\n<ul>\\n<li><a href=\\\"http:\\/\\/www.questionablecharacters.com\\/\\\">Questionable Characters<\\/a>\\n<p>I found this site so amusing. The premise is that you ask a question, and you get two witty responses from the two designers running the site.<\\/p>\\n<\\/li>\\n<li><a href=\\\"http:\\/\\/fontfeed.com\\/archives\\/nyu-researchers-discover-defining-factor-for-legibility\\/\\\">NYU Researchers Discover Defining Factor for Legibility<\\/a>\\n<p>There are plenty of tweaks you can make to refine your typography, but NYU researchers claim that spacing is the most important factor for legibility. So let&rsquo;s all think about increasing our margins and line height.<\\/p>\\n<\\/li>\\n<\\/ul>\\n<!--more-->\\n<ul>\\n<li><a href=\\\"http:\\/\\/www.37signals.com\\/svn\\/posts\\/1431-mixed-content-warning-how-i-loathe-thee\\\">&ldquo;Mixed content warning&rdquo;, how I loathe thee!<\\/a>\\n<p>Ugh, I hate those stupid warnings! David brings up a good point:<\\/p>\\n<blockquote><p>This is why it would be ever so wonderful if you could refer to a non-SSL asset from an SSL page. That way you could say \\u00e2\\u20ac\\u0153this stuff is private, don\\u00e2\\u20ac\\u2122t share it\\u00e2\\u20ac\\u009d when serving over SSL and at the same time take advantage of HTTP caching for things that pose no security risk, like drag_handle.gif.<\\/p><\\/blockquote>\\n<\\/li>\\n<li><a href=\\\"http:\\/\\/24ways.org\\/\\\">24 Ways<\\/a>\\n<p>I still can&rsquo;t believe is December already. But at least we have 24 ways to impress your friends to get us through the month. We already have 2 great articles.<\\/p>\\n<\\/li>\\n<li><a href=\\\"http:\\/\\/www.gerrymcgovern.com\\/nt\\/2008\\/nt-2008-11-24-content-migration.htm\\\">Web content migration: disastrous strategy<\\/a>\\n<p>Is there anything worse than content migrations? Well, maybe content audits. Regardless, Gerry brings up some good points, and I love the milk analogy. I think that the whole process of content migrations should be re-evaluated.<\\/p>\\n<\\/li>\\n<\\/ul>\",\"14\":{\"old_id\":{}}}}','2014-01-19 21:53:13','2014-08-08 19:32:32','841e0035-c106-4cf0-9b60-93a6c5ebfab1',1),(402,173,4,1,2,NULL,'{\"authorId\":\"1\",\"title\":\"My 2008 Web Thanksgiving List\",\"slug\":\"my-2008-web-thanksgiving-list\",\"postDate\":1227796672,\"expiryDate\":null,\"enabled\":\"1\",\"fields\":{\"2\":\"<p>Happy Thanksgiving to all! I thought I would take this opportunity to say what I am thankful for on the web. <strong>I am thankful for:<\\/strong><\\/p>\\n\\n<ul>\\n<li><strong><a href=\\\"http:\\/\\/www.zeldman.com\\/\\\">Jeffrey Zeldman<\\/a> and <a href=\\\"http:\\/\\/meyerweb.com\\/\\\">Eric Meyer<\\/a> (and others)<\\/strong>\\n<p>They really helped to spearhead the Web Standards movement, and without them, I probably wouldn&rsquo;t be in the field today.<\\/p>\\n<\\/li>\\n<li><strong><a href=\\\"http:\\/\\/www.simplebits.com\\/publications\\/bulletproof\\/\\\">Bulletproof Web Design<\\/a><\\/strong>\\n<p>This is one of the first web development books I had ever read, and it definitely helped to provide a strong foundation to build on. Thank god for Dan Cederholm&rsquo;s brilliance.<\\/p>\\n<\\/li>\\n<\\/ul>\\n<!--more-->\\n<ul>\\n<li><strong><a href=\\\"http:\\/\\/twitter.com\\/\\\">Twitter<\\/a><\\/strong>\\n<p>What I first saw as a silly little web app, really has become a great networking tool. I can post a question and someone is always around to answer.<\\/p>\\n<\\/li>\\n<li><strong><a href=\\\"http:\\/\\/www.cssmastery.com\\/\\\">CSS Mastery<\\/a><\\/strong>\\n<p>I really took a big step forward in my ability after reading this book. Instead of just being a novice at CSS, I feel like I can tackle anything now.<\\/p>\\n<\\/li>\\n<li><strong><a href=\\\"http:\\/\\/code.google.com\\/p\\/ie7-js\\/\\\">Dean Edwards&rsquo; IE7 Script<\\/a><\\/strong>\\n<p>I can&rsquo;t tell you how many times I have used it. While I have begun to use it less and less, it saved my life when slicing early in my career.<\\/p>\\n<\\/li>\\n<li><strong><a href=\\\"http:\\/\\/wordpress.org\\/\\\">WordPress<\\/a><\\/strong>\\n<p>It really is a flexible CMS. I honestly try and suggest it for every single site I am creating.<\\/p> \\n<\\/li>\\n<li><strong><a href=\\\"http:\\/\\/jquery.com\\/\\\">jQuery<\\/a><\\/strong>\\n<p>I am in love with it. I knew some JavaScript before, but  after easily learning jQuery, I feel much more comfortable writing JavaScript now.<\\/p>\\n<\\/li>\\n<\\/ul>\\n\\n<p><strong>So what are you thankful for?<\\/strong><\\/p>\",\"14\":{\"old_id\":{}}}}','2014-01-19 21:53:13','2014-08-08 19:32:32','33767e3d-14b8-4928-8e00-76f86b166ece',1),(403,174,4,1,2,NULL,'{\"authorId\":\"1\",\"title\":\"Weekly Link Round-Up #56\",\"slug\":\"weekly-link-round-up-56\",\"postDate\":1227575476,\"expiryDate\":null,\"enabled\":\"1\",\"fields\":{\"2\":\"<p>I&rsquo;m really looking forward to this Thanksgiving break. I&rsquo;ve been working on some blog articles and the redesign of my site. So stay tuned, changes are coming soon hopefully. Here is what I found interesting this week:<\\/p>\\n\\n<ul>\\n<li><a href=\\\"http:\\/\\/www.alistapart.com\\/issues\\/272\\\">A List Apart: Issue 272<\\/a>\\n<p>Two solid articles from A List Apart again, but I thought <a href=\\\"http:\\/\\/www.alistapart.com\\/articles\\/thisishowthewebgetsregulated\\\">This is How the Web Gets Regulated<\\/a> was especially interesting. There are definitely holes in web accessibility, and people like Joe Clark are helping to fill those holes. <a href=\\\"http:\\/\\/www.alistapart.com\\/articles\\/amoreuseful404\\\">A More Useful 404<\\/a> was an interesting concept, but I&rsquo;m not sure how I feel about it being done with Perl and SSI.<\\/p>\\n<\\/li>\\n<li><a href=\\\"http:\\/\\/www.37signals.com\\/svn\\/posts\\/1409-heres-a-demo-of-some-thoughtful-ui-on-ffffoundcom\\\">Demo of some thoughtful UI on Ffffound.com<\\/a>\\n<p>Wow, I had heard of Ffffound but didn&rsquo;t know that it had so much thought put into the UI. Definitely some great minds behind it.<\\/p>\\n<\\/li>\\n<\\/ul>\\n<!--more-->\\n<ul>\\n<li><a href=\\\"http:\\/\\/www.readwriteweb.com\\/archives\\/college_stops_giving_students_new_email_accounts.php\\\">College Stops Giving Students New Email Accounts: Start Of New Trend?<\\/a>\\n<p>Definitely a smart move at Boston College. It definitely seems unnecessary to give students another email account when they probably already have at least one.<\\/p>\\n<\\/li>\\n<li><a href=\\\"http:\\/\\/stylizedweb.com\\/2008\\/11\\/16\\/10-steps-to-a-client-friendly-wordpress-cms\\/\\\">10 Steps to a Client Friendly WordPress CMS<\\/a>\\n<p>WordPress is a great choice as a CMS for powering small sites, but for the non-techie user, it can be a little challenging. Here are a few tips to help make it easier for them.<\\/p>\\n<\\/li>\\n<li><a href=\\\"http:\\/\\/mezzoblue.com\\/archives\\/2008\\/11\\/24\\/now_boarding\\/\\\">Now Boarding<\\/a>\\n<p>Dave Shea decided that he was going to try and fly without using a paper boarding pass, and he was only going to use the digital version of the boarding pass on his iPhone. This definitely seems like it is going to be the way boarding passes are handled in the future, but we still may be a little ways away from that.<\\/p>\\n<\\/li>\\n<\\/ul>\",\"14\":{\"old_id\":{}}}}','2014-01-19 21:53:13','2014-08-08 19:32:32','99768ed8-aad4-4de0-a7b9-00e31d9dfa61',1),(404,175,4,1,2,NULL,'{\"authorId\":\"1\",\"title\":\"Weekly Link Round-Up #55\",\"slug\":\"weekly-link-round-up-55\",\"postDate\":1226970798,\"expiryDate\":null,\"enabled\":\"1\",\"fields\":{\"2\":\"<p>Just another busy week and some interesting links from the week:<\\/p>\\n\\n<ul>\\n<li><a href=\\\"http:\\/\\/www.456bereastreet.com\\/archive\\/200811\\/writing_good_alt_text\\/\\\">Writing good alt text<\\/a>\\n<p>Roger Johansson provides some instructions for writing good alt text.<\\/p>\\n<\\/li>\\n<li><a href=\\\"http:\\/\\/cssglobe.com\\/post\\/3181\\/100-css-compatibility-or-degrade-correctly\\\">100% CSS compatibility or degrade correctly?<\\/a>\\n<p>In my opinion, the correct answer is to degrade correctly. The only problem is trying to sell the client on that idea.<\\/p>\\n<\\/li>\\n<li><a href=\\\"http:\\/\\/cameronmoll.com\\/archives\\/2008\\/11\\/showering_and_thinking\\/\\\">Why thinking in the shower may be an ideal model for &ldquo;creative pause&rdquo;<\\/a>\\n<p>I definitely get a lot of good thinking done in the shower. Someone just needs to invent some way of writing stuff in the shower.<\\/p>\\n<\\/li>\\n<\\/ul>\\n<!--more-->\\n<ul>\\n<li><a href=\\\"http:\\/\\/www.google.com\\/webmasters\\/docs\\/search-engine-optimization-starter-guide.pdf\\\">Google Search Engine Optimization Starter Guide<\\/a>\\n<p>This is a good beginner&rsquo;s guide to SEO. Even though there is nothing new or profound here, it is always interested to see what Google recommends as good practice.<\\/p>\\n<\\/li>\\n<li><a href=\\\"http:\\/\\/www.protonotes.com\\/\\\">Protonotes<\\/a>\\n<p>This application provides the ability to add notes to prototypes and comps. I thought this would be useful for our company when we send them to clients.<\\/p>\\n<\\/li>\\n<li><a href=\\\"http:\\/\\/www.themaninblue.com\\/experiment\\/JS-909\\/\\\">JS-909<\\/a>\\n<p>Cameron Adams created a drum machine using straight-up JavaScript. That&rsquo;s pretty hot.<\\/p>\\n<\\/li>\\n<\\/ul>\",\"14\":{\"old_id\":{}}}}','2014-01-19 21:53:13','2014-08-08 19:32:32','21984f16-3e73-4837-b23a-291d7ff49c45',1),(405,176,4,1,3,NULL,'{\"authorId\":\"1\",\"title\":\"How to Preload Images When You Can\\u2019t Use CSS Sprites\",\"slug\":\"how-to-preload-images-when-you-cant-use-css-sprites\",\"postDate\":1226486460,\"expiryDate\":null,\"enabled\":\"1\",\"fields\":{\"2\":\"<p>I have already shown <a href=\\\"http:\\/\\/trevordavis.net\\/blog\\/tutorial\\/the-6-most-important-css-techniques-you-need-to-know\\/#cssSprites\\\">how to use css sprites<\\/a>, but there are times when you just cannot use them. Sometimes you still want the benefit of preloading the image, so you have to get creative.<\\/p>\\r\\n<!--more--><h2>An Example<\\/h2><p class=\\\"leftSide pullLeft col1\\\">\\r\\n<a href=\\\"http:\\/\\/trevordavis.net\\/play\\/css-sprites\\/\\\"><img src=\\\"http:\\/\\/trevordavis.net\\/images\\/content\\/2008\\/11\\/sprite-vert.gif\\\" alt=\\\"CSS Sprite\\\" class=\\\"imageRight frame\\\" height=\\\"40\\\" width=\\\"21\\\"><\\/a><\\/p><p>I have created a <a href=\\\"http:\\/\\/trevordavis.net\\/play\\/css-sprites\\/\\\">demo of a CSS sprite in action<\\/a>. The sprite has the two images sitting on top of each other, and each link is using the image as a background image and then shifting the position of it when hovering.<\\/p><p class=\\\"codeblock\\\"><code>\\r\\na.spriteVert &#123; &lt;br \\/&gt; background: url(http:\\/\\/trevordavis.net\\/images\\/content\\/2008\\/11\\/sprite-vert.gif) no-repeat top left;&lt;br \\/&gt; padding-left: 30px;&lt;br \\/&gt;&#125;&lt;br \\/&gt;a.spriteVert:hover &#123; background-position: bottom left; &#125; <\\/code><\\/p><p>It works great in the first example, but <strong>what happens if the user resizes their text?<\\/strong> The sprite starts to break. When I am building a site, I am always thinking with the <a href=\\\"http:\\/\\/simplebits.com\\/publications\\/bulletproof\\/\\\">bulletproof mentality of Dan Cederholm<\\/a>, so this is just not an acceptable solution.<\\/p><p>Now, we obviously couldn\\u2019t position the images next to each other because we would still have a problem when shifting the image around.<\\/p><h2>The Solution<\\/h2><p>Typically when you are using CSS sprites, there is another element containing the anchor. Whether it\\u2019s a list item, paragraph, div, etc; <strong>this solution will work unless you have a background image on that element as well<\\/strong>.<\\/p><h3>Example<\\/h3><p class=\\\"leftSide pullLeft col1\\\"><a href=\\\"http:\\/\\/trevordavis.net\\/play\\/css-sprites\\/preload-image\\/\\\"><img src=\\\"http:\\/\\/trevordavis.net\\/images\\/content\\/2008\\/11\\/sprite-hover.gif\\\" alt=\\\"Background image for hover state\\\" class=\\\"leftSide frame\\\" height=\\\"20\\\" width=\\\"21\\\"><\\/a><a href=\\\"http:\\/\\/trevordavis.net\\/play\\/css-sprites\\/preload-image\\/\\\"><img src=\\\"http:\\/\\/trevordavis.net\\/images\\/content\\/2008\\/11\\/sprite-off.gif\\\" alt=\\\"Background image for unactive state\\\" class=\\\"leftSide frame\\\" height=\\\"20\\\" width=\\\"21\\\"><\\/a><\\/p><p>I have created a second <a href=\\\"http:\\/\\/trevordavis.net\\/play\\/css-sprites\\/preload-image\\/\\\">demo that \\u201cfixes\\u201d the first example<\\/a>. The idea behind it is that instead of combining the images into 1 image, you split it into 2. Then you <strong>place the image that is being shown on hover as the background image on another element<\\/strong> (preferably a containing element), just positioned off the screen.<\\/p><p>Then when you hover, you switch the background image, which has already been preloaded, so you don\\u2019t get that \\u201cwhite flicker\\u201d. That may be a little hard to understand, so I\\u2019ll give an example.<\\/p><h4>The Markup<\\/h4><p class=\\\"codeblock\\\"><code>\\r\\n&lt;p class=\\\"spriteContainer\\\"&gt;&lt;a href=\\\"#\\\" class=\\\"spriteVert\\\"&gt;Hover Over Me&lt;\\/a&gt;&lt;\\/p&gt;&lt;br \\/&gt;&lt;p class=\\\"spriteContainer\\\"&gt;&lt;a href=\\\"#\\\" class=\\\"spriteVert spriteVert2\\\"&gt;Hover Over Me&lt;\\/a&gt;&lt;\\/p&gt;&lt;br \\/&gt;&lt;p class=\\\"spriteContainer\\\"&gt;&lt;a href=\\\"#\\\" class=\\\"spriteVert spriteVert3\\\"&gt;Hover Over Me&lt;\\/a&gt;&lt;\\/p&gt; <\\/code><\\/p><p><em>Note: The extra classes of spriteVert2 and spriteVert3 are just used to change the font size.<\\/em><\\/p><h4>The CSS<\\/h4><p class=\\\"codeblock\\\"><code>\\r\\np.spriteContainer &#123; &lt;br \\/&gt; background: url(http:\\/\\/trevordavis.net\\/images\\/content\\/2008\\/11\\/sprite-hover.gif) no-repeat -9999px -9999px;&lt;br \\/&gt;&#125;&lt;br \\/&gt;a.spriteVert &#123;&lt;br \\/&gt; background: url(http:\\/\\/trevordavis.net\\/images\\/content\\/2008\\/11\\/sprite-off.gif) no-repeat top left;&lt;br \\/&gt; padding-left: 30px;&lt;br \\/&gt;&#125;&lt;br \\/&gt;a.spriteVert:hover &#123; &lt;br \\/&gt; background-image: url(http:\\/\\/trevordavis.net\\/images\\/content\\/2008\\/11\\/sprite-hover.gif);&lt;br \\/&gt;&#125; <\\/code><\\/p><h4>More Explanation<\\/h4><p>So looking at the previous example, I am adding the background image that I want to appear on hover as the <strong>background image on the paragraph with a class of spriteContainer<\\/strong>, and I am positioning it way off the screen.<\\/p><p>Then when I hover over an anchor with a class of spriteVert, <strong>I change the background image to be the one from the paragraph<\\/strong> with a class of spriteContainer.<\\/p><h2>Conclusion<\\/h2><p>While this is not as ideal as using CSS sprites because you increase the number of hits to your server, it can help to eliminate the white flicker that you get if the image is not preloaded.<\\/p>\",\"14\":{\"old_id\":{}}}}','2014-01-19 21:53:13','2014-08-08 19:32:32','395998ef-7fdc-422a-bac2-2a94e3c4df97',1),(406,177,4,1,2,NULL,'{\"authorId\":\"1\",\"title\":\"Weekly Link Round-Up #54\",\"slug\":\"weekly-link-round-up-54\",\"postDate\":1226369603,\"expiryDate\":null,\"enabled\":\"1\",\"fields\":{\"2\":\"<p>Well, unfortunately I&rsquo;m still doing weekly link round-ups. That means that my redesign still isn&rsquo;t finished. Hopefully I will have more time to finish it up soon. Here are the links that I found interesting this past week:<\\/p>\\n\\n<ul>\\n<li><a href=\\\"http:\\/\\/www.37signals.com\\/svn\\/posts\\/1375-in-the-past-historic-front-page-moments\\\">QUESTION: In the past, historic front-page moments<\\/a>\\n<p>This is a great question considering the historic moment we had last week. We had people lining up for hours to buy newspapers, but were people taking screenshots of websites?<\\/p>\\n<\\/li>\\n<li><a href=\\\"http:\\/\\/www.digital-web.com\\/articles\\/extract_know_your_site\\/\\\">Extract: Know Your Site<\\/a>\\n<p>We get to read an excerpt from Paul Boag&rsquo;s book <em>Website Owner&rsquo;s Manual<\\/em> about analyzing your website.<\\/p>\\n<\\/li>\\n<\\/ul>\\n<!--more-->\\n<ul>\\n<li><a href=\\\"http:\\/\\/www.alistapart.com\\/issues\\/271\\\">A List Apart: Issue 271<\\/a>\\n<p>This was an excellent article this week with <a href=\\\"http:\\/\\/www.alistapart.com\\/articles\\/writingcontentthatworksforaliving\\\">Writing Content that Works for a Living<\\/a> and <a href=\\\"http:\\/\\/www.alistapart.com\\/articles\\/progressiveenhancementwithjavascript\\\">Progressive Enhancement with JavaScript<\\/a>. Well written content and unobtrusive JavaScript, is there anything better?<\\/p>\\n<\\/li>\\n<li><a href=\\\"http:\\/\\/www.robertnyman.com\\/obtrusive-javascript-checker\\/\\\">Obtrusive JavaScript Checker<\\/a>\\n<p>This plugin will traverse a webpage and highlight obtrusive JavaScript.<\\/p>\\n<\\/li>\\n<li><a href=\\\"http:\\/\\/www.andyrutledge.com\\/web-02.php\\\">Web 0.2<\\/a>\\n<p>Andy Rutledge describes how he thinks the economy will affect web development firms and freelancers.<\\/p>\\n<\\/li>\\n<\\/ul>\",\"14\":{\"old_id\":{}}}}','2014-01-19 21:53:13','2014-08-08 19:32:32','9b4aa9d3-6b8f-4f51-8a98-21182dccf4ea',1);
