(189,194,'Why is there no float: center?',NULL,'<p>When they were writing the specifications for CSS, why didn’t they allow things to be <strong>floated center</strong>?</p>\n\n<p>I was looking through an old site at work this week, that was developed long before me, and I saw someone tried to do this: <strong>float: center</strong>. So that got me thinking, why would they include the specification to float left and right, but not center?</p>\n\n<p>Imagine the posibilities…the following are just a couple of simple examples of what could be possible, <strong>they are not meant to be used in a production environment</strong>.</p>\n<ul><li><a href=\"//assets.trevor-davis.com/play/float-center/\">Float an Image Between Two Columns</a>\n<p>In this example, I just floated the image to the right, and gave it a -100px right margin (half the width of the image). Then I just added an empty div to the right hand column, floated it left, and gave it a height and width.</p></li>\n<li><a href=\"//assets.trevor-davis.com/play/float-center/image-align-center/\">Float an Image in the Middle of One Column</a>\n<p>This one is really hacky. I absolutely positioned the image, chose a monospaced font, and then added non-breaking spaces so that the image was no longer covering the text.</p></li>\n</ul><p>I think being able to float something in the center could really make pages more interesting. I would be curious to know if there was any specific explanation for why you cannot float to the center.</p>',NULL,1817,NULL,'2014-01-19 12:59:11','2023-01-22 15:18:30','50dbe1ae-f61f-41ff-9b3b-447e1c6dab96',1,NULL,NULL,NULL),(190,195,'Hiring Web Designers and Developers',NULL,'<p>My company, <a href=\"http://www.matrixgroup.net/\">Matrix Group International</a>, is currently looking to hire Web Designers, Web Developers, Python Software Engineers, a Product Manager, and an Executive Assistant to the CEO.</p>\n<p>We are located just outside of Old Town Alexandria, VA. We are having <a href=\"http://www.matrixgroup.net/events/index.cfm?fa=details&amp;Calendar_ID=30358\">an Open House on Friday from 4-7pm</a>. So if you or anyone you know could fill those spots, come join us on Friday.</p>',NULL,1816,NULL,'2014-01-19 12:59:12','2023-01-22 15:18:30','3510aea8-6fc3-4335-a594-c76962730f06',1,NULL,NULL,NULL),(191,196,'Weekly Link Round-Up #42',NULL,'<p>I just found out today that if we get our company website launched by Wednesday, our company is going to send myself and the other Front-End Developers to <a href=\"http://aneventapart.com/events/2008/chicago/\">An Event Apart Chicago</a>, so that’s pretty awesome. Just a few links from this week:</p>\n<ul><li><a href=\"http://www.smashingmagazine.com/2008/07/31/a-small-survey-of-big-blogs-further-findings/\">A Small Study Of Big Blogs: Further Findings</a>\n<p>After an article last week discussing some of the findings from a survey of the 50 most popular blogs, Smashing Magazine reveals more.</p>\n</li>\n<li><a href=\"http://patterntap.com/\">Pattern Tap</a>\n<p>Great collection of web design patterns.</p>\n</li>\n<li><a href=\"http://blueflavor.com/blog/2008/aug/04/time-web-forward-movement/\">Time for a Web-Forward Movement</a>\n<p>I definitely agree with what Kenny has to say. I feel like there was this huge push for standards a few years ago, and it has really started to slow down. <strong>We should not be satisfied!</strong> There is still so much more to do.</p>\n</li>\n</ul>',NULL,1815,NULL,'2014-01-19 12:59:12','2023-01-22 15:18:30','29054e9a-9bfc-4232-a45d-a43afbe7523b',1,NULL,NULL,NULL),(192,197,'I Took the 2008 Survey (for people who make websites)',NULL,'<p><a href=\"http://alistapart.com/articles/survey2008\"><img src=\"//assets.trevor-davis.com/uploads/images/content/2008/07/i-took-the-2008-survey.gif\" alt=\"I Took The 2008 Survey\" width=\"180\" height=\"46\" class=\"imageRight frame\" /></a>It’s that time of the year again, <a href=\"http://alistapart.com/articles/survey2008\">the A List Apart 2008 Survey</a> is out.</p>\n<p>It only takes a few minutes to fill out, and the data compiled at the end is awesome. I look forward to seeing the results in the next few weeks.</p>',NULL,1814,NULL,'2014-01-19 12:59:12','2023-01-22 15:18:30','11754a86-c561-4dd4-8ae6-c78aba687405',1,NULL,NULL,NULL),(193,198,'Weekly Link Round-Up #41',NULL,'<p>Well, another week and weekend flew by. I’m finally starting to work on my redesign/realign, and I hope that I can get it launched in not too long. Here is what I found interesting this week:</p>\n\n<ul><li><a href=\"http://meyerweb.com/eric/thoughts/2008/07/23/any-element-linking-demo/\">Any-Element Linking Demo</a>\n<p>Eric Meyer created a demo of his proposed “any-element” linking. This could be an awesome addition to HTML 5 (although who knows how long it will take to actually be implemented).</p>\n</li>\n<li><a href=\"http://www.37signals.com/svn/posts/1149-modal-overlays-beyond-the-dialog-box\">Modal overlays beyond the dialog box</a>\n<p>Modal overlays definitely have become an integral part of the web these days. This is a nice discussion about good and bad uses.</p>\n</li>\n</ul><ul><li><a href=\"http://getfirebug.com/lite.html\">Firebug Lite</a>\n<p>Instead of only being able to use Firebug in Firefox, you can use the lite version (a bit of JavaScript) to utilize Firebug functionality in other browsers. It was definitely finicky, but it’s a big upgrade from other debugging tools.</p>\n</li>\n<li><a href=\"http://www.silverbackapp.com/\">Silverback</a>\n<p>The much anticipated Silverback finally launched. I’m going to have to find the right time to use that 30 day trial. This looks so awesome.</p>\n</li>\n<li><a href=\"http://www.smashingmagazine.com/2008/07/24/a-small-study-of-big-blogs/\">A Small Design Study Of Big Blogs</a>\n<p>Blogs are obviously a huge part of the web. Smashing Magazine takes the time to examine the 50 most popular Technorati blogs to investigate design trends and more. Definitely a good read.</p>\n</li>\n</ul>',NULL,1813,NULL,'2014-01-19 12:59:12','2023-01-22 15:18:30','1219e5ea-e1c3-45f4-9777-d7ba0743d909',1,NULL,NULL,NULL),(194,199,'Flexible and Semantic Forms with a Little jQuery',NULL,'<p>While they may not be that pretty, forms are one of the most important parts of a web site. <a href=\"//trevor-davis.com/blog/tutorial/css-forms/\">I have already written an article on CSS Forms</a>, that was over a year ago, and I have developed much better techniques.</p>\n\n<p>There are other <a href=\"http://www.lukew.com/resources/articles/web_forms.html\">great resources for information about form design</a>, and I will take this information into account when I am showing the flexibility of my method of marking up and styling forms.</p>\n\n<h2>The Markup</h2>\n<p>After previously using a <strong>definition list</strong> to mark up my forms, I have switched to using an <strong>ordered list</strong> now. I switched for two main reasons:</p>\n\n<ul><li>The list item of the ordered list provides a containing clearing element that the definition list does not provide.</li>\n<li>Semantically, it just makes more sense. A form is really just a list of form fields to fill out. Forms are typically meant to be filled out in order, hence the ordered list instead of un-ordered list (I think this could be debated, but in the long run, either one is more semantic than anything else).</li>\n</ul><p>I have decided to create just a <a href=\"//assets.trevor-davis.com/play/forms-revisited/\">simple un-styled form</a> to use as an example. Here is what the markup of the page is:</p>\n<div class=\"codeblock\"><code>\n&lt;ol class=\"forms\"&gt;<br /> &lt;li&gt;&lt;label for=\"name\"&gt;Name&lt;/label&gt;&lt;input type=\"text\"name=\"name\" id=\"name\" /&gt;&lt;/li&gt;<br /> &lt;li&gt;&lt;label for=\"email\"&gt;Email&lt;/label&gt;&lt;input type=\"text\" name=\"email\" id=\"email\" /&gt;&lt;/li&gt;<br /> &lt;li&gt;&lt;label for=\"city\"&gt;City&lt;/label&gt;&lt;input type=\"text\" name=\"city\" id=\"city\" /&gt;&lt;/li&gt;<br /> &lt;li&gt;&lt;label for=\"state\"&gt;State&lt;/label&gt;&lt;input type=\"text\" name=\"state\" id=\"state\" /&gt;&lt;/li&gt;<br /> &lt;li&gt;&lt;label for=\"zip\"&gt;Zip&lt;/label&gt;&lt;input type=\"text\" name=\"zip\" id=\"zip\" /&gt;&lt;/li&gt;<br /> &lt;li class=\"grouping\"&gt;&lt;label&gt;Sign Up for the Following&lt;/label&gt;<br />  &lt;ul&gt;<br />   &lt;li&gt;&lt;input type=\"checkbox\" name=\"info1\" id=\"info1\" /&gt;&lt;label for=\"info1\"&gt;Information 1&lt;/label&gt;&lt;/li&gt;<br />   &lt;li&gt;&lt;input type=\"checkbox\" name=\"info2\" id=\"info2\" /&gt;&lt;label for=\"info2\"&gt;Information 2&lt;/label&gt;&lt;/li&gt;<br />   &lt;li&gt;&lt;input type=\"checkbox\" name=\"info3\" id=\"info3\" /&gt;&lt;label for=\"info3\"&gt;Information 3&lt;/label&gt;&lt;/li&gt;<br />  &lt;/ul&gt;<br /> &lt;/li&gt;<br /> &lt;li&gt;&lt;label for=\"message\"&gt;Message&lt;/label&gt;&lt;textarea name=\"message\" id=\"message\"&gt;&lt;/textarea&gt;&lt;/li&gt;<br /> &lt;li class=\"buttons\"&gt;&lt;button type=\"submit\" name=\"submit\" id=\"submit\"&gt;Submit&lt;/button&gt;&lt;/li&gt;<br />&lt;/ol&gt; \n\n</code></div>\n\n<p>Even without any style applied, the form is still completely usable.</p>\n\n<h2>Styling the Forms</h2>\n<p>There are really 3 main styles of laying out forms:</p>\n<ul><li>Labels above the form field</li>\n<li>Labels to the side of the form field, jagged right</li>\n<li>Labels to the side of the form field, jagged left</li>\n</ul><p>Again, like I said, I am not going to go through the pros and cons of each method, I am going to show how easy it is to switch between the methods using my markup.</p>\n\n<h3>Labels Above the Form Field</h3>\n<p>This is by far the easiest method. Here is the CSS used to style my <a href=\"//assets.trevor-davis.com/play/forms-revisited/forms-styled-labels-stacked/\">example form</a>:</p>\n\n<div class=\"codeblock\"><code>\nol.forms { float: left; list-style: none; width: 100%; }<br />ol.forms li { <br /> clear: both; <br /> float: left; <br /> margin: 0 0 10px; <br /> width: 100%; <br />}<br />ol.forms label { cursor: pointer; display: block; font-weight: bold; }<br />ol.forms input, ol.forms textarea { <br /> font: inherit;<br /> padding: 2px;<br /> width: 300px;<br />}<br />ol.forms textarea { height: 250px; }<br />ol.forms li.grouping { margin-bottom: 0; }<br />ol.forms li.grouping ul { list-style: none; }<br />ol.forms li.grouping ul label { <br /> display: inline;<br /> font-weight: normal;<br /> margin: 0 0 0 10px;<br />}<br />ol.forms li.grouping ul input { width: auto; } \n\n</code></div>\n\n<p>Really nothing too complicated. In my opinion, I don’t like stacking the label over the form field; I think it just makes the form too long.</p>\n\n<h3>Labels to the Side of the Form Field, Jagged Right</h3>\n<p>I like this layout of forms the best. I think it presents the form in a clear way so that you can just scan right through the form fields. With just a few changes to the CSS, you can float the labels to the left of the form fields. The changes are marked in bold:</p>\n\n<div class=\"codeblock\"><code>\nol.forms { float: left; list-style: none; width: 100%; }<br />ol.forms li { <br /> clear: both;<br /> float: left;<br /> margin: 0 0 10px;<br /> width: 100%;<br />}<br />ol.forms label { <br /> cursor: pointer;<br /> display: block;<br /> &lt;strong&gt;float: left;&lt;/strong&gt;<br /> font-weight: bold;<br /> &lt;strong&gt;margin: 0 10px 0 0;<br /> width: 90px;&lt;/strong&gt;<br />}<br />ol.forms input, ol.forms textarea { <br /> font: inherit;<br /> padding: 2px;<br /> width: 300px;<br />}<br />ol.forms textarea { height: 250px; }<br />&lt;strong&gt;ol.forms li.grouping label { margin: 0; width: auto; }&lt;/strong&gt;<br />ol.forms li.grouping { margin-bottom: 0; }<br />ol.forms li.grouping ul { list-style: none; &lt;strong&gt;margin-left: 100px;&lt;/strong&gt; }<br />ol.forms li.grouping ul label { <br /> display: inline;<br /> &lt;strong&gt;float: none;&lt;/strong&gt;<br /> font-weight: normal;<br /> margin: 0 0 0 10px;<br /> &lt;strong&gt;width: auto;&lt;/strong&gt;<br />}<br />ol.forms li.grouping ul input { width: auto; }<br />&lt;strong&gt;ol.forms li.buttons { float: none; margin-left: 100px; width: auto; }&lt;/strong&gt; \n\n</code></div>\n\n<p><a href=\"//assets.trevor-davis.com/play/forms-revisited/forms-styled-labels-left/\">Take a look at the example with the fields on the left</a>. Depending upon your label length, you may need to increase the width of the labels so that it does not span more than one line, but that is an easy enough change.</p>\n\n<h3>Labels to the Side of the Form Field, Jagged Left</h3>\n<p>Now with two changes to the CSS, you can easily switch to having the labels jagged left, which puts them closer to the form input. The changes needed are highlighted in bold:</p>\n\n<div class=\"codeblock\"><code>\nol.forms label { <br /> cursor: pointer;<br /> display: block;<br /> float: left;<br /> font-weight: bold;<br /> margin: 0 10px 0 0;<br /> &lt;strong&gt;text-align: right;&lt;/strong&gt;<br /> width: 90px;<br />}<br />ol.forms li.grouping label { margin: 0; &lt;strong&gt;text-align: left;&lt;/strong&gt; width: auto; } \n\n</code></div>\n\n<p><a href=\"//assets.trevor-davis.com/play/forms-revisited/forms-styled-labels-right/\">Here is the example of the form with the labels jagged left</a>.</p>\n\n<h3>Taking it a Step Further with More CSS and a Little jQuery</h3>\n<p>Since I like the form layout with labels to the side and jagged right, I am going to use <a href=\"//assets.trevor-davis.com/play/forms-revisited/forms-styled-labels-left/\">this one</a> to customize the display a little, and then add in some jQuery functionality.</p>\n\n<h4>Improving the Display</h4>\n<p>When looking at the form, it may be confusing to have all form fields be the same width. It is helpful to the user to modify the width to suit the data that will be entered.</p>\n\n<p>For example, there is no reason that the zip code, city, and state fields should be so long, so let’s add a class to each one to shorten it to the length of the data that will probably be entered. Here is the modified markup:</p>\n\n<div class=\"codeblock\"><code>\n&lt;li&gt;<br /> &lt;label for=\"city\"&gt;City&lt;/label&gt;<br /> &lt;input type=\"text\" name=\"city\" id=\"city\" class=\"medium\" /&gt;<br />&lt;/li&gt;<br />&lt;li&gt;<br /> &lt;label for=\"state\"&gt;State&lt;/label&gt;<br /> &lt;input type=\"text\" name=\"state\" id=\"state\" class=\"small\" /&gt;<br />&lt;/li&gt;<br />&lt;li&gt;<br /> &lt;label for=\"zip\"&gt;Zip&lt;/label&gt;<br /> &lt;input type=\"text\" name=\"zip\" id=\"zip\" class=\"extraSmall\" /&gt;<br />&lt;/li&gt; \n\n</code></div>\n\n<p>Then we just have to add those 3 classes to the CSS:</p>\n\n<div class=\"codeblock\"><code>\nol.forms .extraSmall { width: 50px; }<br />ol.forms .small { width: 100px; }<br />ol.forms .medium { width: 150px; } \n\n</code></div>\n\n<p>Here is what <a href=\"//assets.trevor-davis.com/play/forms-revisited/forms-styled-labels-left-customized-more/\">the form looks like with that little bit of extra style</a>. I also added in some help text, a notation for required fields, and the associated CSS; so take a look at the code to see that.</p>\n\n<h4>Adding a Little jQuery</h4>\n<p>Obviously you have read my article about <a href=\"//trevor-davis.com/blog/tutorial/ajax-forms-with-jquery/\">AJAX forms with jQuery</a>, which discusses how to add AJAX functionality to a form in a degradable way. So the following code assumes that you are going to be doing server side validation of the form as well.</p>\n\n<p>Since there are required fields in this form, I add a class of <strong>required</strong> to the form and to each parent list item of required input fields.</p>\n\n<p>First, we want our JavaScript to execute when the form with a class of required is submitted:</p>\n<div class=\"codeblock\"><code>\n$(document).ready(function() {<br /> $(\'form.required\').submit(function() {<br />  &amp;hellip;<br /> });<br />}); \n\n</code></div>\n\n<p>If there are any error messages still displaying from before, we want to hide them. Also, let’s disable the submit button so just in case, the form cannot be submitted twice. I am also creating a variable that I will be using later to determine if there is an error or not:</p>\n<div class=\"codeblock\"><code>\n$(document).ready(function() {<br /> $(\'form.required\').submit(function() {<br />  &lt;strong&gt;$(\'form.required span.error\').remove();<br />  $(\'form.required li.buttons button\').attr(\'disabled\',\'disabled\');<br />  var hasError = false;&lt;/strong&gt;<br /> });<br />}); \n\n</code></div>\n\n<p>Now, we want to check each form field that has a parent list item with a class of <strong>required</strong>:</p>\n<div class=\"codeblock\"><code>\n$(document).ready(function() {<br /> $(\'form.required\').submit(function() {<br />  $(\'form.required span.error\').remove();<br />  $(\'form.required li.buttons button\').attr(\'disabled\',\'disabled\');<br />  var hasError = false;<br /><br />  &lt;strong&gt;jQuery.each($(\'form.required ol.forms li.required\'),function() {<br />   &amp;hellip;<br />  });&lt;/strong&gt;<br /> });<br />}); \n\n</code></div>\n\n<p>There are a lot of other jQuery plugins that validate forms, but most of the time, it will just alert the user that the field is required. Instead of doing that, I am going to grab the text from the label element and display that in the error message:</p>\n\n<div class=\"codeblock\"><code>\n$(document).ready(function() {<br /> $(\'form.required\').submit(function() {<br />  $(\'form.required span.error\').remove();<br />  $(\'form.required li.buttons button\').attr(\'disabled\',\'disabled\');<br />  var hasError = false;<br /><br />  jQuery.each($(\'form.required ol.forms li.required\'),function() {<br />   &lt;strong&gt;var labelText = $(this).children(\'label\').text();<br />   labelText = labelText.replace(\' *\',\'\');&lt;/strong&gt;<br />  });<br /> });<br />}); \n\n</code></div>\n\n<p>Now, we have two different structures of form fields for each list item: a single form field and a grouping of checkboxes or radio buttons. We have to do things a little bit different for each one:</p>\n\n<div class=\"codeblock\"><code>\n$(document).ready(function() {<br /> $(\'form.required\').submit(function() {<br />  $(\'form.required span.error\').remove();<br />  $(\'form.required li.buttons button\').attr(\'disabled\',\'disabled\');<br />  var hasError = false;<br /><br />  jQuery.each($(\'form.required ol.forms li.required\'),function() {<br />   var labelText = $(this).children(\'label\').text();<br />   labelText = labelText.replace(\' *\',\'\');<br /><br />   &lt;strong&gt;if($(this).hasClass(\'grouping\')) {<br />    &amp;hellip; <br />   } else {<br />    &amp;hellip;<br />   }&lt;/strong&gt;<br />  });<br /> });<br />}); \n\n</code></div>\n\n<p>First, let’s focus on the case when there is a grouping. We want to loop through each input and see if it is checked. If it is, we just increment a counter. Then, if the counter equals zero, meaning we have no fields checked, we display an error message:</p>\n\n<div class=\"codeblock\"><code>\n$(document).ready(function() {<br /> $(\'form.required\').submit(function() {<br />  $(\'form.required span.error\').remove();<br />  $(\'form.required li.buttons button\').attr(\'disabled\',\'disabled\');<br />  var hasError = false;<br /><br />  jQuery.each($(\'form.required ol.forms li.required\'),function() {<br />   var labelText = $(this).children(\'label\').text();<br />   labelText = labelText.replace(\' *\',\'\');<br /><br />   if($(this).hasClass(\'grouping\')) {<br />    &lt;strong&gt;var numSelected = 0;<br />    jQuery.each($(this).find(\'input\'),function() {<br />     if($(this).attr(\'checked\') == true) {<br />      numSelected++;<br />     }<br />    });<br />    <br />    if(numSelected == 0) {<br />     $(this).append(\'&lt;span class=\"error\"&gt;You must select from \'+labelText+\'.&lt;/span&gt;\');<br />     hasError = true;<br />    }&lt;/strong&gt;<br />   } else {<br />    &amp;hellip;<br />   }<br />  });<br /> });<br />}); \n\n</code></div>\n\n<p>That seems easy enough, and it’s even easier for the single input fields. We just check to see if the value is empty, and if it is, display the error message:</p>\n\n<div class=\"codeblock\"><code>\n$(document).ready(function() {<br /> $(\'form.required\').submit(function() {<br />  $(\'form.required span.error\').remove();<br />  $(\'form.required li.buttons button\').attr(\'disabled\',\'disabled\');<br />  var hasError = false;<br /><br />  jQuery.each($(\'form.required ol.forms li.required\'),function() {<br />   var labelText = $(this).children(\'label\').text();<br />   labelText = labelText.replace(\' *\',\'\');<br /><br />   if($(this).hasClass(\'grouping\')) {<br />    var numSelected = 0;<br />    jQuery.each($(this).find(\'input\'),function() {<br />     if($(this).attr(\'checked\') == true) {<br />      numSelected++;<br />     }<br />    });<br />    <br />    if(numSelected == 0) {<br />     $(this).append(\'&lt;span class=\"error\"&gt;You must select from \'+labelText+\'.&lt;/span&gt;\');<br />     hasError = true;<br />    }<br />   } else {<br />    &lt;strong&gt;if(jQuery.trim($(this).children(\'input, textarea\').val()) == \'\') {<br />     $(this).append(\'&lt;span class=\"error\"&gt;Please enter your \'+labelText+\'.&lt;/span&gt;\');<br />     hasError = true;<br />    }&lt;/strong&gt;<br />   }<br />  });<br /> });<br />}); \n\n</code></div>\n\n<p>To finish up, we just check to see if the <code><strong>hasError</strong></code> variable is true. Since this is just a demo form, I just add an alert if the form would submit successfully:</p>\n<div class=\"codeblock\"><code>\n$(document).ready(function() {<br /> $(\'form.required\').submit(function() {<br />  $(\'form.required span.error\').remove();<br />  $(\'form.required li.buttons button\').attr(\'disabled\',\'disabled\');<br />  var hasError = false;<br /><br />  jQuery.each($(\'form.required ol.forms li.required\'),function() {<br />   var labelText = $(this).children(\'label\').text();<br />   labelText = labelText.replace(\' *\',\'\');<br /><br />   if($(this).hasClass(\'grouping\')) {<br />    var numSelected = 0;<br />    jQuery.each($(this).find(\'input\'),function() {<br />     if($(this).attr(\'checked\') == true) {<br />      numSelected++;<br />     }<br />    });<br />    <br />    if(numSelected == 0) {<br />     $(this).append(\'&lt;span class=\"error\"&gt;You must select from \'+labelText+\'.&lt;/span&gt;\');<br />     hasError = true;<br />    }<br />   } else {<br />    if(jQuery.trim($(this).children(\'input, textarea\').val()) == \'\') {<br />     $(this).append(\'&lt;span class=\"error\"&gt;Please enter your \'+labelText+\'.&lt;/span&gt;\');<br />     hasError = true;<br />    }<br />   }<br />  });<br /><br />  &lt;strong&gt;if(hasError) {<br />   $(\'form.required li.buttons button\').removeAttr(\'disabled\');<br />   return false;<br />  } else {<br />   alert(\'The form would submit now\');<br />   $(\'form.required li.buttons button\').removeAttr(\'disabled\'); //Remove this line if using for real<br />   return false; //Change this to true when using it for real<br />  }&lt;/strong&gt;<br /> });<br />}); \n\n</code></div>\n\n<p>Go ahead and take a look at the <a href=\"//assets.trevor-davis.com/play/forms-revisited/forms-styled-labels-left-customized-more/\">demo form</a> to see it in action.</p>\n\n<h2>Conclusion</h2>\n<p>With a well structured form, you can easily customize it to your liking with just a little bit of CSS. Then, by using some custom jQuery code, you can easily customize how you would like to have the form validation appear.</p>\n<p>With a little more work, you could easily add in validation for things like form elements expecting an email address, zip codes, phone numbers, etc. I will have to save that for another post since this one is quite long.</p>\n\n<p>What do you all think? How do you structure your forms? Which layout of forms do you prefer and why?</p>',NULL,1812,NULL,'2014-01-19 12:59:12','2023-01-22 15:18:30','37913212-32d0-4011-bf98-0da49106f4c9',1,NULL,NULL,NULL),(195,200,'Weekly Link Round-Up #40',NULL,'<p>Well, I finally got a site launched that had been stressing me out, now I only have my company website to stress me out for the next two weeks. Here is what I found interesting this week:</p>\n\n<ul><li><a href=\"http://www.digital-web.com/articles/smart_CSS_aint_always_sexy_CSS/\">Smart CSS Ain’t Always Sexy CSS</a>\n<p>This was a pretty interesting read. I think one interesting point that Martin brought up was that most of the time, editing HTML is quicker than editing CSS. A lot of times, it may just be easier to add a new class/id and add some new CSS instead of editing existing code.</p>\n</li>\n<li><a href=\"http://www.37signals.com/svn/posts/1141-western-spaghetti\">Western Spaghetti</a>\n<p>This video is just awesome. How long did this take to make?</p>\n</li>\n<li><a href=\"http://www.twinhelix.com/css/iepngfix/\">IE PNG Fix</a>\n<p>Interesting, this IE PNG script gives support for background position and repeat.</p>\n</li>\n<li><a href=\"http://ejohn.org/blog/firebuggin/\"> Firebuggin’</a>\n<p>Nice, John Resig is going to be spending half of his time at Mozilla working on Firebug. After seeing how amazing jQuery is, I can’t wait to see what he does for Firebug.</p>\n</li>\n</ul>',NULL,1811,NULL,'2014-01-19 12:59:12','2023-01-22 15:18:30','178930b3-fe38-42f8-92cc-bdefe9695247',1,NULL,NULL,NULL),(196,201,'Weekly Link Round-Up #39',NULL,'<p>Wow, I must say it is hard writing blog posts, doing freelance work, and being crazy busy at my day job. I’ve got one post in the works, and hopefully I will be able to finish it up next week. Here is what I found interesting last week (and the beginning of this week):</p>\n\n<ul><li><a href=\"http://nettuts.com/javascript-ajax/adding-form-validation-to-wordpress-comments-using-jquery/\">Adding Form Validation to WordPress Comments using jQuery</a>\n<p>I had actually been considering writing a post like this. With a just a few short lines of JavaScript, you give users a much better experience when trying to submit a comment. (Note: see my comment form as another example.)</p>\n</li>\n<li><a href=\"http://www.zeldman.com/2008/07/14/your-us-tax-dollars-at-work/\">Your US tax dollars at work</a>\n<p>So the <a href=\"http://www.cra.org/ccc/\">Computing Community Consortium</a> launched their website the other day, at it was a blatant rip-off of <a href=\"http://alistapart.com/\">A List Apart</a>. They have since changed it, but you can <a href=\"http://floatingsun.net/2008/07/13/inspiration-or-imitation\">check out the screenshots here</a>. It wasn’t even like they just designed it to look similar, they straight up stole the mark-up and CSS. I will say that the CCC handled it correctly, but how did they let it happen in the first place?</p>\n</li>\n</ul><ul><li><a href=\"http://wordpress.org/development/2008/07/wordpress-26-tyner/\">WordPress 2.6</a>\n<p>The WordPress team was able to launch version 2.6 a month before it was supposed to! Not any huge differences, but there are some nice small changes. I would recommend taking a few minutes to watch the video. I love the redesigned plugins page and the post revisions.</p>\n</li>\n<li><a href=\"http://alistapart.com/issues/263\">A List Apart: Issue 263</a>\n<p>Only one real article in this issue: <a href=\"http://alistapart.com/articles/walkingthelinewhenyouworkfromhome\">Walking the Line When You Work from Home</a>, but it is a great article describing how to succeed while working at home.</p>\n</li>\n</ul>',NULL,1810,NULL,'2014-01-19 12:59:12','2023-01-22 15:18:30','f2374f25-f6d0-4ccb-8755-91a6bb1a167e',1,NULL,NULL,NULL),(197,202,'Weekly Link Round-Up #38',NULL,'<p>Only found a couple of interesting things to read this past week, must have been the fact that I am working on 2 sites that need to launch next week.</p>\n\n<ul><li><a href=\"http://www.alistapart.com/issues/262\">A List Apart: Issue 262</a>\n<p>I have been exposed to subversion a lot in the past few months, so it was interesting to read <a href=\"http://www.alistapart.com/articles/collaboratewithsubversion\">Collaborate and Connect with Subversion</a>. There are definitely pros as well as cons to using it. I kind of skimmed <a href=\"http://www.alistapart.com/articles/getoutbindingsituations\">Getting Out of Binding Situations in JavaScript</a>, but it seemed interesting.</p>\n</li>\n<li><a href=\"http://www.smashingmagazine.com/2008/07/01/should-links-open-in-new-windows/\">Should Links Open In New Windows?</a>\n<p>No way! This article provides some good information from “the experts” about why links should not open in a new window.</p>\n</li>\n</ul>',NULL,1809,NULL,'2014-01-19 12:59:12','2023-01-22 15:18:30','117f88fd-da42-4b43-85e8-d6dd7200edf9',1,NULL,NULL,NULL),(198,203,'When Planning Your Site Content, Become the User',NULL,'<p>On Friday, I needed to get a small coffee table for my living room, so I decided to head to <a href=\"http://ikea.com/\">Ikea</a>. I love Ikea, not only because their website is full of web standards goodness, but also because they make some really nice and affordable furniture.</p>\n\n<p>Since Friday was the 4th of July, I wasn’t sure what the hours would be. I logged onto their website, <a href=\"http://www.ikea.com/webapp/wcs/stores/servlet/IkeaNearYouView?storeId=12&amp;catalogId=11001&amp;langId=-1&amp;StoreName=woodbridge\">found the store closest to me</a>, and was getting ready to call and find out the hours.</p>\n\n<p>To my delight, I not only found the normal store hours, <strong>but also found the holiday store hours</strong>.</p>\n\n<p>Wow, that is quite a rarity. It is rare to even find the normal store hours on their websites, but holiday hours too? Quite impressive.</p>\n\n<p>What the folks at Ikea have done is the simplest (and probably most important) method to having a successful website: <strong>put yourself in the users’ shoes</strong>. I’m sure at some point during their web site strategy development they thought: if we provide our store hours on the web site, then we will get less phone calls at the store about the hours, thus allowing the employees to focus more on the customers in the store.</p>\n\n<p>So what is the lesson here? With every decision you make about your website, think about the goal of the website, and make sure your decision will help to achieve that goal.</p>',NULL,1808,NULL,'2014-01-19 12:59:12','2023-01-22 15:18:30','d08b7469-405c-4812-a5bb-4805d9be0307',1,NULL,NULL,NULL),(199,204,'Weekly Link Round-Up #37',NULL,'<p>So I think I am going to stop doing weekly link round-ups once i launch my redesign/realign. I think I want to have more of like “asides”, where I will just post an interesting link with a little blurb much more frequently. But the redesign is still a little ways off, so here is what I found interesting this past week:</p>\n<ul><li><a href=\"http://fadtastic.net/2008/06/23/get-out-of-a-creative-slump/\">Get out of a Creative Slump</a>\n<p>Even though I am not really a designer, I feel like I am definitely in a creative slump when trying to create this new design. Some of these tips are definitely useful for stirring up that creativity.</p>\n</li>\n<li><a href=\"http://freelanceswitch.com/finding/learning-when-to-say-no/\">Learning When to Say No</a>\n<p>Probably the single most important part of freelancing.</p>\n</li>\n<li><a href=\"http://www.andyrutledge.com/the-employable-web-designer.php\">The Employable Web Designer</a>\n<p>Andy discusses how web design students should rightly be worried about whether their education will prepare them for the “real world”.</p>\n</li>\n</ul><ul><li><a href=\"http://www.thewebsiteisdown.com/salesguy.html\">Sales Guy vs. Web Dude</a>\n<p>Absolutely hilarious video with a guy working tech support.</p>\n</li>\n<li><a href=\"http://nettuts.com/working-with-cmss/hack-together-a-user-contributed-link-feed-with-wordpress-comments/\">Hack Together a User Contributed Link Feed with WordPress Comments</a>\n<p>Nice tutorial showing the flexibility of WordPress while creating a user contributed feed.</p>\n</li>\n</ul>',NULL,1807,NULL,'2014-01-19 12:59:12','2023-01-22 15:18:30','fb0fd5de-83a1-40bd-8f4f-243697ba992f',1,NULL,NULL,NULL),(200,205,'WordPress Tips and Ideas Learned From Implementation',NULL,'<p>Recently, I had to slice and implement <a href=\"http://www.thematrixfiles.net/\">a blog for the CEO of my company</a>. I decided to go with WordPress because that is what I have become enamored with recently, when <a href=\"http://www.wirelesscareer.com/\">I created a job board</a> using it. I used some features of WordPress that I had never used before, so I figured I would talk about them so that others could learn how to use them as well.</p>\n\n<h2>Multiple Loops</h2>\n<p>The blog contained a main blog section, along with a “Favorites” section in the sidebar, that would be used to list anything: favorite websites, books, etc. I didn’t think that using just the basic WordPress blogroll or a third party bookmarking site would give the CEO enough flexibility to mark whatever she wanted as a favorite. So I decided to just create a separate category for Favorites.</p>\n\n<p>In the footer of the site, there is also information about the last 6 projects that we had worked on. I definitely did not want those to be static. Since we complete projects almost daily, I wanted “non-technical” people to be able to update them. So I decided to create a separate category for those.</p>\n\n<p>So in total, I had 3 categories: Blog, Favorites, and Projects.</p>\n\n<p>I figured I would just end up having the main loop in the content area, a loop in the sidebar, and a loop in the footer. I had never really done a site with multiple loops, but after reading <a href=\"http://codex.wordpress.org/The_Loop#Multiple_Loops\">the documentation</a>, it didn’t look too complicated. So the key to having multiple loops is to use the <a href=\"http://codex.wordpress.org/Template_Tags/query_posts\">query_posts</a> template tag.</p>\n\n<h3>The Main Blog Loop</h3>\n<p>The Blog category has an id of 1. So all you have to do is call the query_posts template tag before you loop through the entries:</p>\n<div class=\"codeblock\"><code>\n&lt;?php query_posts(\'cat=1\');<br /> if (have_posts()) : <br />  while (have_posts()) : the_post(); ?&gt;<br />   &amp;hellip;<br />  &lt;?php endwhile;<br /> endif; ?&gt; \n\n</code></div>\n\n<p>Then the Favorites and Project categories are basically the same, you just plug in the correct category id into the <strong>query_posts</strong> template tag.</p>\n\n<h3>Paging with Multiple Loops</h3>\n<p>So since we are using the <strong>query_posts</strong> template tag, it messes up the paging of the main loop. So, in the main blog loop, we need to use the ternary operator to add in the paging argument:</p>\n<div class=\"codeblock\"><code>\n&lt;?php<br /> $paged = (get_query_var(\'paged\')) ? get_query_var(\'paged\') : 1;<br /> query_posts(\"cat=1&amp;paged=$paged\");<br />?&gt; \n\n</code></div>\n<p>So those two lines would replace the previous call to the <strong>query_posts</strong> template tag that we used for the main loop.</p>\n\n<h2>Read More Links</h2>\n<p>When I had first implemented the blog, we were using the read more links (whenever they were added into the post) for all posts. Later in the implementation process, I was told that the most recent article should always show the full post.</p>\n<p>I wasn’t sure how the heck I could do that, but after some Googling I figured it out. Basically what we need to do is just create a simple counter to see if we are on the first post. If we are, we set a global $more variable equal to 1. So I define the $count variable and set it equal to 1, then I have this at the beginning of the main loop:</p>\n<div class=\"codeblock\"><code>\n&lt;?php<br />if (is_home()) {<br /> global $more;<br /> if($count == 1) $more = 1;<br /> else $more = 0;<br /> $count++;<br />}<br />?&gt; \n\n</code></div>\n\n<h3>Wait a Minute…</h3>\n<p>So I was all ready to publish this article, when I found out today that the first article on my CEO’s blog was still showing the read more link. From what I discovered, it looked like both the <strong>is_home()</strong> and <strong>is_front_page()</strong> conditional tags were not registering as true when on the homepage. For the life of me, I could not figure out why this was happening.</p>\n<p>So this was a little bit of a hacky solution, but it was all that I could think of quickly. I had this code before the loop:</p>\n<div class=\"codeblock\"><code>\n&lt;?php<br /> if($_SERVER[\'REQUEST_URI\'] == \'/\') { <br />  $isHomepage = true;<br /> }<br />?&gt; \n\n</code></div>\n\n<p>So essentially, I was setting up my own flag to see if it was the homepage. What that is doing is checking the URL to see if it is the root of the site or not. Then I modifed the if statement in my other code to be:</p>\n<div class=\"codeblock\"><code>\n&lt;?php<br /> if (isset($isHomepage) &amp;&amp; $isHomepage = true) {<br />  global $more;<br />  if($count == 1) $more = 1;<br />  else $more = 0;<br />  $count++;<br /> }<br />?&gt; \n\n</code></div>\n\n<p>I’m not sure if there is a better solution, but I think the reason the <strong>is_home()</strong> and <strong>is_front_page()</strong> conditions don’t work is because of calling the <strong>query_posts</strong> template tag, because they worked before the call.</p>\n\n<h2>Custom Fields</h2>\n<p>I had used custom fields before, and they are amazingly powerful in being able to extend WordPress functionality. For my CEO’s blog, I used 4 custom fields:</p>\n<ul><li>favoriteThumbnail</li>\n<li>favoriteUrl</li>\n<li>projectThumbnail</li>\n<li>projectUrl</li>\n</ul><h3>Favorites’ Custom Fields</h3>\n<p>The favorites are supposed to be little blurbs about something that my CEO likes, whether it is a book, website, etc. So the idea is that it is not supposed to be a full blog post, just a little blurb. So instead of linking to the WordPress post, we link to the <strong>favoriteUrl</strong> custom field. Here is how the favoriteUrl custom field is being used (this is called within The Loop):</p>\n<div class=\"codeblock\"><code>\n&lt;?php <br />$favoriteUrl = get_post_meta($post-&gt;ID, \"favoriteUrl\", true);<br />if($favoriteUrl != \'\') { ?&gt;<br /> &lt;a href=\"&lt;?=$favoriteUrl ?&gt;\" class=\"heading\"&gt;&lt;strong&gt;&lt;?php the_title(); ?&gt;&lt;/strong&gt;&lt;/a&gt;<br />&lt;?php } else { ?&gt;<br /> &lt;strong class=\"heading\"&gt;&lt;?php the_title(); ?&gt;&lt;/a&gt;<br />&lt;?php } ?&gt; \n\n</code></div>\n\n<p>So basically what I am doing there is first calling in the favoriteUrl custom field and assigning it to the $favoriteUrl variable. Then, I check to make sure it is not empty (meaning the custom field was not entered). If it is entered, I output the link to the URL. If not, I still do not link to the WordPress post, I just display the title in bold.</p>\n\n<p>The favoriteThumbnail is pretty self explanatory and is called in the same way as the favoriteUrl. The reason I wanted to use a custom field for the thumbnail instead of just adding the image to the post content is because the design called for the image to be floated next to the title and because I wanted to link the image to the favoriteUrl. This way, when my CEO is adding a favorite, she does not have to worry about floating the image and linking it to the favoriteUrl.</p>\n\n<h3>Projects’ Custom Fields</h3>\n<p>Both of the Projects’ custom fields are used similarly to the Favorities’ custom fields. The projectThumbnail custom field is just used to show the most recent 6 projects in the footer. Nothing complicated, just showing and linking the photo to the WordPress post.</p>\n\n<p>Until our new company website gets launched, we are linking to the short WordPress post which gives a little description about the project. The projectUrl outputs the URL to the project at the end of the post. Once our company website is finished, I will just modify the custom field to link directly from the footer to its respective page in our portfolio.</p>\n\n<h2>Conclusion</h2>\n<p>I really enjoyed doing this implementation. While it was just a simple blog, it is always great to learn a couple of new tricks/techniques. Any other WordPress tips that you have found useful?</p>',NULL,1806,NULL,'2014-01-19 12:59:12','2023-01-22 15:18:30','d7d3e84a-ab24-4b0b-b235-6a95d43e3115',1,NULL,NULL,NULL),(201,206,'Weekly Link Round-Up #36',NULL,'<p>I actually got started on my redesign/realign this weekend. I think I want to have a larger focus on my portfolio, and not just my blog. But god is it hard to redesign when you aren’t a designer. Hopefully it will all turn out well in the end. Here is what I found interesting this week:</p>\n<ul><li><a href=\"http://jasonsantamaria.com/articles/a-new-day/\">A New Day</a>\n<p>As much as I love <a href=\"http://v3.jasonsantamaria.com/\">Jason Santa Maria’s last design</a>, I think his new direction/design is really interesting.</p></li>\n<li><a href=\"http://www.subtraction.com/archives/2008/0617_spacing_is_e.php\">Spacing Is Everything</a>\n<p>Khoi Vinh shows what Gmail would look like with a little bit of spacing. I actually think it might look better, but he caught some backlash from the commentors saying that there would be less messages “above the fold”. But I think that you rarely look below the fold when looking for a message, and even if you did, you would be more likely to use the search instead.</p>\n</li>\n</ul><ul><li><a href=\"http://www.alistapart.com/issues/261\">A List Apart: Issue 261</a>\n<p>I was pretty excited to finally see a CSS article in A List Apart, <a href=\"http://www.alistapart.com/articles/fauxabsolutepositioning\">Faux Absolute Positioning</a>. It had been quite a while. I was actually really disappointed with it though. It seems like extraneous markup, and I don’t really see the advantages. The second article in the issue, <a href=\"http://www.alistapart.com/articles/sketchingincode\">Sketching in Code: the Magic of Prototyping</a>, brings up a much more important issue. Prototyping is probably the most important part of the process of developing web applications.</p>\n</li>\n\n<li><a href=\"http://www.digital-web.com/articles/education_of_freaks_and_geeks/\">The Education of Geeks and Freaks</a>\n<p>I think the current state of the education of web development is awful. I know how hard it must be to stay on top of new technologies and be a teacher, but still, it needs to improve. It’s great to hear that some schools are starting to take the right step and teaching <strong>new technologies</strong>.</p>\n</li>\n\n<li><a href=\"http://nettuts.com/site-builds/from-psd-to-html-building-a-set-of-website-designs-step-by-step/\">From PSD to HTML, Building a Set of Website Designs Step by Step</a>\n<p>I kind of skimmed this article because it was really just a discussion about what I do when I slice a site. From what I saw, it seemed like a pretty decent description.</p>\n</li>\n</ul>',NULL,1805,NULL,'2014-01-19 12:59:53','2023-01-22 15:18:30','069a26f2-aa90-463f-9504-2b5610629a0b',1,NULL,NULL,NULL),(202,207,'jQuery Table Striping Bug',NULL,'<p>I have been using <a href=\"http://jquery.com/\">jQuery</a> to do table striping, and up until today, I have not had any problems with it.</p>\n\n<p>I had just been using the <a href=\"http://docs.jquery.com/Selectors/even\">:even</a> and <a href=\"http://docs.jquery.com/Selectors/odd\">:odd</a> selectors to add classes to each table row.</p>\n\n<p>Here is the code that I have been using:</p>\n<div class=\"codeblock\"><code>\n$(document).ready(function(){<br /> $(\"table.striped tbody tr:odd\").addClass(\"odd\");<br /> $(\"table.striped tbody tr:even\").addClass(\"even\");<br />}); \n\n</code></div>\n<p>Seems easy enough. Then I just styled the odd table rows like so:</p>\n<div class=\"codeblock\"><code>\ntable.striped tr.odd td { background-color: #f0f0f4; } \n\n</code></div>\n<p>One thing to note is that the <strong>:even</strong> and <strong>:odd</strong> selectors are zero-indexed, so the <strong>first table row will have a class of even, and not odd</strong>. <a href=\"//assets.trevor-davis.com/play/jquery-table-striping/\">Here is an example showing this simple striping</a>.</p>\n\n<h2>Multiple Striped Instances</h2>\n<p>The situation that I had today had two different tables that were being striped. So based on the code, you would think that there wouldn’t be a problem. <a href=\"//assets.trevor-davis.com/play/jquery-table-striping/multiple-striping-instances/\">Here is the example with two striped tables on the same page</a>.</p>\n\n<p>Weird, so it looks like the first table row in the second striped table has a class of even instead of odd. I thought that the client may not like that because the two tables were not consistent, so I tried to think of another way to do the striping.</p>\n\n<h2>The nth Child</h2>\n<p>So based on the documentation, it looks like <a href=\"http://docs.jquery.com/Selectors/nthChild#index\">the nth child selector</a> would be the solution. I just modified my JavaScript like so:</p>\n<div class=\"codeblock\"><code>\n$(document).ready(function(){<br /> $(\"table.striped tbody tr:nth-child(odd)\").addClass(\"odd\");<br /> $(\"table.striped tbody tr:nth-child(even)\").addClass(\"even\");<br />}); \n\n</code></div>\n<p>As a note, <strong>the nth child selector is not zero indexed</strong>, so the first table row will have a class of odd instead of even. <a href=\"//assets.trevor-davis.com/play/jquery-table-striping/using-nth-child/\">Here is the fixed example</a>.</p>\n\n<h2>Conclusion</h2>\n<p>From what I can tell, this does not appear to be a browser problem, but a bug in jQuery. I have checked this in Firefox, Safari, IE6 and IE7.</p>',NULL,1804,NULL,'2014-01-19 12:59:53','2023-01-22 15:18:30','981c9441-b05d-4524-8341-68cce203a0cb',1,NULL,NULL,NULL),(203,208,'Weekly Link Round-Up #35',NULL,'<p>It is pretty sad how much my life depends on the internet. I got to work early today and left early, with plans on writing a couple of blog posts and working on my redesigned logo. But of course, my power went out. So right now, I am sitting Border’s, and I caved and bought an hour of internet time. Oh well. Here are a few links I found interesting this week:</p>\n\n<ul><li><a href=\"http://northtemple.com/1608\">The Accessibility Checklist I Vowed I’d Never Write</a>\n<p>This is an awesome checklist with some guidelines to keep in mind when considering the accessibility of a site.</p>\n</li>\n<li><a href=\"http://www.subtraction.com/archives/2008/0609_investing_st.php\">Investing Strategies for iPhone Customers</a>\n<p>Wow, that’s a pretty powerful graph. Really shows how much the value of technology drops the instant you walk out of the store. As awesome as the iPhone looks, I would never buy it on the AT&amp;T network. The only way I would buy it were if it were available on Verizon.</p>\n</li>\n<li><a href=\"http://veerle.duoh.com/blog/comments/design_critiquing/\">Design Critiquing</a>\n<p>Veerle talks about a very important part of the design process: critiquing. I sometimes find it hard to say why I don’t like certain things. I guess that is the downside of not having any professional design training.</p>\n</li>\n<li><a href=\"http://www.37signals.com/svn/posts/1080-you-have-to-treat-your-employees-like-customers\">“You have to treat your employees like customers”</a>\n<p>This is a great quote:</p>\n<blockquote><p>“When employees are trusted and treated like adults, they appreciate it just as much. The result: loyal employees who want to stick around forever.”</p></blockquote>\n</li>\n</ul><p>I am hoping this week that I can finish up an article discussing some cool new things I found out about WordPress while implementing my <a href=\"http://www.thematrixfiles.net/\">CEO’s blog</a>, so be on the lookout for that.</p>',NULL,1803,NULL,'2014-01-19 12:59:53','2023-01-22 15:18:30','ef82e2a9-5ee1-494e-ab9a-c3f108e1d374',1,NULL,NULL,NULL),(204,209,'Weekly Link Round-Up #34',NULL,'<p>It has been crazy times at work recently. I am in the process of slicing three sites at the same time. In all the madness, this is what I found interesting last week:</p>\n<ul><li><a href=\"http://meyerweb.com/eric/thoughts/2008/06/02/the-missing-link/\">The Missing Link</a>\n<p>I love that we have Eric Meyer fighting on our side. Eric discusses how the <code>href</code> attribute should be allowed on many elements instead of a few. He even goes on to <a href=\"http://meyerweb.com/eric/html-xhtml/html5-linking.html\">show examples</a> and discuss the pros and cons.</p>\n</li>\n<li><a href=\"http://www.alistapart.com/issues/260\">A List Apart: Issue 260</a>\n<p>Another couple of solid articles from A List Apart: <a href=\"http://www.alistapart.com/articles/writingainterfacestyleguide\">Writing an Interface Style Guide</a> and <a href=\"http://www.alistapart.com/articles/savingthespark\">Saving the Spark: Developing Creative Ideas</a>.</p>\n</li>\n<li><a href=\"http://www.markboulton.co.uk/journal/comments/design_isnt_about_tools/\">Design isn’t about tools</a>\n<p>This was kind of the end of a great discussion from <a href=\"http://www.37signals.com/svn/posts/1061-why-we-skip-photoshop\">37 Signals</a> and <a href=\"http://jeffcroft.com/blog/2008/jun/04/why-we-dont-skip-photoshop/\">Jeff Croft</a>. I think I agree with most of Jeff’s points. I think it definitely depends upon the product that you are trying to make, and I think 37 Signals has nailed down their simplistic style, so Photoshop is not necessary.</p>\n</li>\n</ul>',NULL,1802,NULL,'2014-01-19 12:59:53','2023-01-22 15:18:31','0be40b0d-ad9c-4d9f-bcf1-e374a98ecea0',1,NULL,NULL,NULL),(205,210,'Improving a Flickr Plugin with jQuery',NULL,'<p>For a while, I have been using the <a href=\"http://wordpress.org/extend/plugins/flickr-rss/\">flickrRSS</a> WordPress plugin to show my recent flickr photos in the <a href=\"//trevor-davis.com/#flickr\">footer of my site</a>. Since I have become more comfortable using <a href=\"http://jquery.com/\">jQuery</a>, I thought I would use it to make the plugin better.</p>\n\n<p>I created a <a href=\"//assets.trevor-davis.com/play/wordpress-flickr-plugin/\">demo page</a>. to see what the markup generated from the plugin normally is. The markup is just an unordered list, and I have done some basic CSS so that it looks halfway decent.</p>\n<p>Each photo just links to the original Flickr page with the photo on it. I kind of didn’t like that because if someone wanted to see the larger version, they would have to leave my site just to see it.</p>\n<a href=\"http://farm3.static.flickr.com/2123/2543094667_2ddfec7c73_s.jpg\"><img src=\"http://farm3.static.flickr.com/2123/2543094667_2ddfec7c73_s.jpg\" alt=\"I Love My Birthday Present\" class=\"imageRight frame\" height=\"75\" width=\"75\" /></a>\n<h2>Digging into the Flickr Photos</h2>\n<p>If we take a look at the square image of me hugging my new TV, we can see that it is 75x75. Now if we take a closer look at the filename <strong>2543094667_2ddfec7c73_s.jpg</strong>, we see that there is a _s at the end. Let’s take a look at the other photo sizes there are:</p>\n<ul><li><a href=\"http://farm3.static.flickr.com/2123/2543094667_2ddfec7c73_t.jpg\">Thumbnail</a>: _t.jpg</li>\n<li><a href=\"http://farm3.static.flickr.com/2123/2543094667_2ddfec7c73_m.jpg\">Small</a>: _m.jpg</li>\n<li><a href=\"http://farm3.static.flickr.com/2123/2543094667_2ddfec7c73.jpg\">Medium</a>: .jpg</li>\n<li><a href=\"http://farm3.static.flickr.com/2123/2543094667_2ddfec7c73_b.jpg\">Large</a>: _o.jpg</li>\n</ul><p>The medium sized photo looks like a nice size to display. What if instead of linking the small square photos to their respective Flickr page, we open the medium sized photo in a lightbox.</p>\n\n<h2>Lightbox</h2>\n<p>The lightbox that I use is a hacked up version of the <a href=\"http://famspam.com/facebox\">Facebox script</a>. I modified it a little to use table-less markup and for the entire page to grey out. The lightbox is launched by setting the <strong>rel</strong> attribute equal to <strong>lightbox</strong>.</p>\n<p>Another modification I would like to make is to enable the lightbox to work in sets. Kind of like the <a href=\"http://www.lokeshdhakar.com/projects/lightbox2/\">Lightbox 2</a> script, but that is for another day.</p>\n<p>The reason I like the Facebox script is because you can also have inline content and content loaded via an AJAX call.</p>\n\n<h2>Tweaking the Flickr Markup</h2>\n<p>Since I do not want to modify the flickrRSS plugin to change the markup, I will just use jQuery to change the markup on body load.</p>\n<p>So there are two things that I want to do:</p>\n<ul><li>Add <code>rel=\"lightbox\"</code> to each link containing the Flickr photo</li>\n<li>Change the <code>href</code> to link to the <strong>medium image</strong> instead of linking to the Flickr page</li>\n</ul><h3>The Code</h3>\n<p>First, let’s add the <code>rel=\"lightbox\"</code> attribute to each of the links that are descendants of <code>ul#flickr</code> on body load:</p>\n<div class=\"codeblock\"><code>\n$(document).ready(function() {<br /> $(\'ul#flickr a\').each(function() {<br />  $(this).attr(\'rel\',\'lightbox\'); <br /> });<br />}); \n\n</code></div>\n\n<p>Next, let’s change the link to be the medium photo. We will do this by copying the source of the image, and then replacing <strong>_s.jpg</strong> with <strong>.jpg</strong>:\n</p><div class=\"codeblock\"><code>\n$(document).ready(function() {<br /> $(\'ul#flickr a\').each(function() {<br />  $(this).attr(\'rel\',\'lightbox\'); <br />  var imgSrc = $(this).children().attr(\'src\');<br />  $(this).attr(\'href\',imgSrc.replace(\'_s.jpg\',\'.jpg\'))<br /> });<br />}); \n\n</code></div>\n\n<p>Next, we just initiate the lightbox script by targeting links that have a rel attribute of <strong>lightbox</strong>:\n</p><div class=\"codeblock\"><code>\n$(document).ready(function() {<br /> $(\'ul#flickr a\').each(function() {<br />  $(this).attr(\'rel\',\'lightbox\'); <br />  var imgSrc = $(this).children().attr(\'src\');<br />  $(this).attr(\'href\',imgSrc.replace(\'_s.jpg\',\'.jpg\'))<br /> });<br /><br /> $(\'a[rel*=lightbox]\').facebox();<br />}); \n\n</code></div>\n<p>I have <a href=\"//assets.trevor-davis.com/play/wordpress-flickr-plugin/enhancing-the-plugin-with-jquery/\">modified the first demo page</a> to show this new functionality (although you can just look at <a href=\"//trevor-davis.com/#flickr\">my footer</a> too).</p>\n\n<p>It’s pretty cool how just a few lines of jQuery can drastically improve the user experience.</p>',NULL,1801,NULL,'2014-01-19 12:59:53','2023-01-22 15:18:31','acf4b2dd-c9c1-440d-8fd2-a3125961415f',1,NULL,NULL,NULL),(206,211,'Weekly Link Round-Up #33',NULL,'<p>Yeah, so I had an awesome birthday weekend. My girlfriend bought me a 46 inch HDTV for my birthday! Also, Sunday was my two year anniversary at <a href=\"http://www.matrixgroup.net/\">Matrix</a>. Crazy how time flies. Here is the stuff that I found interesting this past week:</p>\n<ul><li><a href=\"http://fadtastic.net/2008/05/26/getting-design-approval-the-single-mockup-theory/\">Getting Design Approval: The Single Mockup Theory</a>\n<p>I think that by providing only one mockup for clients to react to, it gives them the opportunity to get a feeling for the site and what goal it is trying to accomplish. When you show them multiple mockups, I think that the client really starts to compare the designs more, without thinking about the goal of the mockup.</p>\n</li>\n<li><a href=\"http://www.andyrutledge.com/pre-bid-discussions.php\">Pre-bid Discussions</a>\n<p>I think knowing how and when to turn down projects is a great skill to have.</p>\n</li>\n<li><a href=\"http://nettuts.com/news/unraveling-the-secrets-of-wordpress-commentsphp-file/\">Unraveling the Secrets of WordPress’ Comments.php File</a>\n<p>Nothing new or groundbreaking, just a solid breakdown of the WordPress comments.php file.</p>\n</li>\n</ul><ul><li><a href=\"http://www.smashingmagazine.com/2008/05/29/applying-divine-proportion-to-web-design/\">Applying Divine Proportion To Your Web Designs</a>\n<p>I love how thousands year old principles are still present in design today.</p>\n</li>\n<li><a href=\"http://www.37signals.com/svn/posts/1053-luke-dean-kamens-wonderful-prosthetic-robot-arm\">Luke: Dean Kamen\'s wonderful prosthetic robot arm</a>\n<p>Ok, after just watching <a href=\"http://www.imdb.com/title/tt0387808/\">Idiocracy</a>, it got my worried about how our world really could be getting dumber. After watching this video, it at least gives me hope that we aren’t. This is truly amazing.</p>\n</li>\n<li><a href=\"http://www.thinkvitamin.com/features/biz/good-products-dont-make-up-for-bad-service-but-they-help\">Good products donâ€™t make up for bad service…but they help</a>\n<p>I love when normal everyday experiences can be learned from on how to improve your web product/service.</p>\n</li>\n</ul>',NULL,1800,NULL,'2014-01-19 12:59:53','2023-01-22 15:18:31','5aeb71c1-9c32-40e0-bc00-abf1af242950',1,NULL,NULL,NULL),(207,212,'I Picked a MacBook Pro',NULL,'<p>I had been receiving a decent amount of traffic to the article: <a href=\"//trevor-davis.com/blog/news/macbook-vs-macbook-pro-help-me-decide/\">MacBook vs MacBook Pro, Help Me Decide!</a>, so I thought I would give a quick update so people would know which I chose.</p>\n\n<p><img src=\"//assets.trevor-davis.com/uploads/images/content/2008/05/macbook-pro.jpg\" alt=\"MacBook Pro photo\" class=\"imageRight\" height=\"140\" width=\"228\" />I did finally decide to go with the MacBook Pro. I think the screen size was one of the biggest factors for me. 15 inch vs 13 inch doesn’t seem like that much, but when looking at them next to each other, it is a huge difference. The MacBook also felt much cheaper than the Pro. I also think the backlit keyboard, while maybe not something I use all the time (although I am right now), is a really nice feature.</p>\n<p>I also decided to go with the matte screen. When looking at the glossy vs. matte next to each other, the colors on the glossy definitely pop more, but from what I heard, if you are going to be doing any kind of design work, the matte gives truer colors.</p>\n<p>I am absolutely 100% happy with my purchase and would recommend the MacBook Pro to anyone who is looking for an awesome laptop. I love it. I am also in love with the two finger scrolling. Sometimes when I am on another laptop, I try and scroll with two fingers, and I kind of want to cry when it does nothing.</p>',NULL,1799,NULL,'2014-01-19 12:59:53','2023-01-22 15:18:31','4458a8a4-47ef-4aac-8358-f596272b8409',1,NULL,NULL,NULL),(208,213,'Weekly Link Round-Up #32',NULL,'<p>Gotta love a nice long weekend and the short week that follows. Here are the interesting things that I read this week:</p>\n<ul><li><a href=\"http://www.techcrunch.com/2008/05/20/netflix-roku-free-is-such-a-beautiful-word/\">Netflix Roku: Free Is Such A Beautiful Word</a>\n<p>Nice, so Netflix is going to offer a $100 box that will stream movies free for Netflix subscribers.</p>\n</li>\n<li><a href=\"http://mezzoblue.com/archives/2008/05/21/handoff/\">Handoff</a>\n<p>Dave Shea describes his process of handing off his designs.</p>\n</li>\n<li><a href=\"http://alistapart.com/issues/259\">A List Apart: Issue 259</a>\n<p>This issue featured two really good articles: <a href=\"http://alistapart.com/articles/thecureforcontent-delaysyndrome\">The Cure for Content-Delay Syndrome</a> and <a href=\"http://alistapart.com/articles/whydidyouhireme\">Why Did You Hire Me?</a>. Both articles are really well thought out and address some lingering issues in the web development world.</p>\n</li>\n</ul><ul><li><a href=\"http://www.digital-web.com/articles/design_decisions_vs_audience_considerations/\">Design Decisions vs. Audience Considerations</a>\n<p>Good article discussing the process of making audience-centered design decisions.</p>\n</li>\n<li><a href=\"http://www.nihilogic.dk/labs/mariokart/\">JavaScript Super Mario Kart</a>\n<p>People are doing some really awesome JavaScript stuff recently.</p>\n</li>\n<li><a href=\"http://planetozh.com/projects/lightbox-clones/\">The Lightbox Clones Matrix</a>\n<p>Informative table showing different lightbox scripts. Shows which lightboxes support which type of elements, which library they use, and other information about the script.</p>\n</li>\n</ul>',NULL,1798,NULL,'2014-01-19 12:59:53','2023-01-22 15:18:31','63a3f10c-f3cc-4d0e-8840-2a69d9931ff0',1,NULL,NULL,NULL),(209,214,'Input vs. Button',NULL,'<p>My latest redesign project at work was for <a href=\"http://www.grouplogic.com/\">Group Logic</a>. Another company did the design and created static HTML templates. My role was to create a single header and footer to make maintaining the site easier, and to wrap the store and other dynamic applications in the new design.</p>\n<p>The company who designed it used images for the form buttons, and I found some interesting things while implementing them.</p>\n\n<h2>A Disclaimer</h2>\n<p>I think before you design form buttons to be images, you should seriously consider just styling the buttons with CSS. Just think about all of the images you will have to maintain. Is the value of the image button style really that great that you will deal with all of that hassle? In my opinion, it’s not. But whatever, to each <strong>his</strong> own (you like that <a href=\"http://monadology.net/\">Nate</a>?). Ok, enough with the disclaimer, now on to the good stuff.</p>\n\n<h2>Some Options</h2>\n<p>Ok, so I decided that there were 3 options for implementing these buttons:</p>\n<ol><li>Use <code>&lt;input type=\"submit\" /&gt;</code> and use an image replacement technique (that I didn’t think would work in Safari).</li>\n<li>Use <code>&lt;input type=\"image\" /&gt;</code> and have the image source as an attribute.</li>\n<li>Use <code>&lt;button type=\"submit\"&gt;&lt;/button&gt;</code> and insert the image within the button element. </li>\n</ol><h3>My Decision</h3>\n<p>With ease of implementation in mind (since the time line was short), I decided to go with option 2: <code>&lt;input type=\"image\" /&gt;</code>. Everything went fine until we decided to test in IE (6 and 7). Apparently, the value from the button does not get passed onto the server. After some Googling around, I found out that this is a well known problem, and the only way to get this to work is by using JavaScript. Whenever I code something with JavaScript, I want to make sure that it works without JavaScript. So that solution would not work.</p>\n\n<h3>The Next Option</h3>\n<p>Next, I went with option 3: <code>&lt;button type=\"submit\"&gt;&lt;/button&gt;</code>. I really did not know much about the <code>button</code> element until I read <a href=\"http://particletree.com/features/rediscovering-the-button-element/\">Rediscovering the Button Element</a> a year ago.</p>\n<p>Again, that option worked fine in everything, except IE6 this time (in IE7, it passed in the entire source of the image as the value, but we could find a way to make that work). Apparently, if you have multiple button elements with the same name attributes, the value that comes out from the server in IE6 is the value from the last element on the form.</p>\n\n<p>Ok, maybe that was confusing. The <a href=\"//assets.trevor-davis.com/play/input-vs-button/\">example page</a> might clarify some. The first example is just <code>&lt;input type=\"submit\" /&gt;</code>. The second example is <code>&lt;input type=\"image\" /&gt;</code>. Finally, the third example is <code>&lt;button type=\"submit\"&gt;&lt;/button&gt;</code>.</p>\n\n<p>Be sure to try that in IE6 and IE7 to see the problems I explained.</p>\n\n<h3>A Third Try?</h3>\n<p>Ok, this sucks, obviously I went with option 1 this time: <code>&lt;input type=\"submit\" /&gt;</code>. We know from the <a href=\"//assets.trevor-davis.com/play/input-vs-button/\">first example on the previous page</a> that the value is at least passed through to the server properly in all browsers. Now the fun part is just trying to style the buttons in all browsers.</p>\n\n<h2>Stying the Input Element</h2>\n<p>Let’s assign a class to all of the buttons we are going to style, and just add some basic styles to the button:</p>\n\n<div class=\"codeblock\"><code>\ninput.buttons {<br /> background: none no-repeat top left;<br /> border: none;<br /> cursor: pointer;<br /> display: block;<br /> height: 25px;<br /> overflow: hidden;<br /> padding: 0;<br /> margin: 0 2px 0 0;<br /> text-indent: -9999px;<br /> width: auto;<br />} \n\n</code></div>\n\n<p>Most of that should be pretty self explanatory. So let’s now add in the background images for the 3 buttons and give them a width:</p>\n\n<div class=\"codeblock\"><code>\ninput.updateCart { background-image: url(update-cart.gif); width: 107px; }<br />input.continueShopping { background-image: url(continue-shopping.gif); width: 146px; }<br />input.proceedCheckout { background-image: url(proceed-to-checkout.gif); width: 156px; } \n\n</code></div>\n\n<p>The images are actually CSS Sprites so let’s add in the hover effect:</p>\n<div class=\"codeblock\"><code>\ninput.buttons:hover { background-position: 0 -25px; } \n\n</code></div>\n\n<p>Sweet, let’s <a href=\"//assets.trevor-davis.com/play/input-vs-button/regular-input/\">take a look at the page</a>. Nice, it even looks good in Safari. Of course, it’s broken in IE 6 and IE 7.</p>\n\n<p><img src=\"//assets.trevor-davis.com/uploads/images/content/2008/05/buttons-ie.gif\" alt=\"Strange effect on buttons in IE\" class=\"imageCenter\" height=\"25\" width=\"413\" /><em>Check out the weird buttons in IE</em></p>\n\n<h3>Fixing for IE</h3>\n<p>Ok, so I had no idea how to even attack this problem. So I started playing around, and finally came up with this:</p>\n\n<div class=\"codeblock\"><code>\ninput.buttons { font-size: 0; line-height: 25px; } \n\n</code></div>\n\n<p>So I just serve those properties to IE6 and IE7. Beautiful, <a href=\"//assets.trevor-davis.com/play/input-vs-button/regular-input-fixed-for-ie/\">it works now</a>.</p>\n\n<h3>One Last Thing</h3>\n<p>So we were able to get these buttons working in all browsers. There is just one minor thing that bugged me. The hover effect does not work on the buttons in IE6. How about we use <a href=\"http://jquery.com/\">jQuery</a> to fix that for IE6:</p>\n\n<div class=\"codeblock\"><code>\n$(document).ready(function(){<br /> $(\'input.buttons\').hover(function() {<br />   $(this).css(\'background-position\',\'0 -25px\');<br />  },<br />  function() {<br />   $(this).css(\'background-position\',\'0 0\');<br />  }<br /> );<br />}); \n\n</code></div>\n\n<p>Nice, <a href=\"//assets.trevor-davis.com/play/input-vs-button/regular-input-hover-fixed-for-ie/\">it works in IE6</a>. So yeah, that was really long. But form buttons are always a fun topic to get working across all browsers. Anyone have anything they would do differently?</p>',NULL,1797,NULL,'2014-01-19 12:59:53','2023-01-22 15:18:31','497a308c-b339-497b-943c-a7b0433f90c8',1,NULL,NULL,1),(210,215,'Weekly Link Round-Up #31',NULL,'<p>After a busy week at work, it’s great to relax during the weekend. Even though I was getting <a href=\"http://monicafdavis.com/\">my sister’s website</a> finished, I always enjoy slicing a site. Here are a few things I found interesting this week:</p>\n\n<ul><li><a href=\"http://astheria.com/design/initial-impressions-of-silverback\">Initial Impressions of Silverback</a>\n<p>There has already been a lot written about the <a href=\"http://www.silverbackapp.com/\">Silverback website</a>, but no one has really been clear on what the application actually is. This is a nice review from one of the beta testers, and it looks amazing. Basically you can create a user testing environment with a Mac, and that’s all you need.</p>\n</li>\n<li><a href=\"http://www.themaninblue.com/experiment/Cubescape/\">Cubescape</a>\n<p>Ok, this is some seriously awesome JavaScript. You can create your own “isometric pixel picture”. I’m sure this took quite a time investment to create this.</p>\n</li>\n</ul><ul><li><a href=\"http://www.37signals.com/svn/posts/1018-designing-is-not-a-profession-but-an-attitude\">“Designing is not a profession but an attitude”</a>\n<p>I love this way of thinking. Being a Front-End Developer is not just a job for me, it’s basically my life. It’s funny how I’ll just be out somewhere, and I’ll think about how something would be marked up. If you have read <a href=\"http://www.transcendingcss.com/\">Transcending CSS</a>, you may know what I mean.</p>\n</li>\n<li><a href=\"http://nettuts.com/misc/build-a-wordburner-email-newsletter-manager-using-wordpress-and-feedburner/\">Build a ‘WordBurner’ Email Newsletter Manager using WordPress and FeedBurner</a>\n<p>Interesting tutorial explaining how to use a normal WordPress category to create an email newsletter.</p>\n</li>\n<li><a href=\"http://zenhabits.net/2008/05/a-letter-to-my-son-on-starting-out-in-life\">A Letter to My Son, on Starting Out In Life</a>\n<p>Great letter with some life hints from Leo to his son. I have really enjoyed reading his site recently.</p>\n</li>\n</ul>',NULL,1796,NULL,'2014-01-19 12:59:53','2023-01-22 15:18:31','3601948a-e04f-4433-8b53-62ac2c0d8704',1,NULL,NULL,NULL),(211,216,'Weekly Link Round-Up #30',NULL,'<p>Wow, I was actually able to get some sleep this weekend. Too bad I didn’t have any time to do freelance work or work on the redesign for my site. Oh well, at least there was a lot of interesting things that I read this week:</p>\n<ul><li><a href=\"http://mezzoblue.com/archives/2008/05/05/image_replac/\">Image Replacement + Google</a>\n<p>Good to know, Google won’t penalize you for using image replacement properly. This is something we all assumed but were never really clear on.</p>\n</li>\n<li><a href=\"http://www.seomoz.org/blog/the-web-developers-seo-cheat-sheet\">The Web Developer’s SEO Cheat Sheet</a>\n<p>Nothing that we don’t know already, but a nice round up of basic SEO information for beginners.</p>\n</li>\n<li><a href=\"http://veerle.duoh.com/blog/comments/does_flash_irks_me/\">Does Flash irk me?</a>\n<p>I agree with Veerle in that it is important to evaluate the goals of a project. While most flash on the web does nothing for me, there are things like <a href=\"http://wiki.novemberborn.net/sifr\">sIFR</a> that are awesome.</p>\n</li>\n</ul><ul><li><a href=\"http://alistapart.com/issues/258\">A List Apart: Issue 258</a>\n<p>Another couple of interesting articles from A List Apart: <a href=\"http://alistapart.com/articles/fromlittlethings\">Community: From Little Things, Big Things Grow</a> and <a href=\"http://alistapart.com/articles/zebrastripingdoesithelp\">Zebra Striping: Does it Really Help?</a>. I thought the Zebra Striping article was especially interesting.</p>\n</li>\n<li><a href=\"http://patthorntonfiles.com/blog/?p=261\">Web natives need to lead Web operations</a>\n<p>I agree; it is very important for web people to be making decisions about the web. While one can easily become a “web person”, it is not something that happens instantly. The web is a complex place.</p>\n</li>\n<li><a href=\"http://www.useit.com/alertbox/percent-text-read.html\">How Little Do Users Read?</a>\n<p>While not surprising, Jakob Nielsen says that users typically don’t read very much on the web. This is why it’s important to use frequent headings and to break up the text into smaller chunks.</p>\n<p>Conversely, I also thought that an article by Andy Rutledge, <a href=\"http://www.andyrutledge.com/volume-doesnt-matter.php\">Volume Doesn’t Matter</a>, presented an interesting “argument” to the other side. If a page is designed well and the topic is interesting to the user, I think they will be very likely to do more than scan the text.</p>\n</li>\n</ul>',NULL,1795,NULL,'2014-01-19 12:59:53','2023-01-22 15:18:31','4694742d-a117-46c2-940a-f7efbc864381',1,NULL,NULL,NULL),(212,217,'Set a Body Id Using PHP',NULL,'<p>One of the first things I do when I am creating the markup for a new site, is to set a body id. You may wonder what I mean when I say “set a body id”. What I mean is to dynamically check the url to figure out which section you are in. This tutorial will show how to do this dynamically using PHP, and also how to integrate it into WordPress.</p>\n\n<h2>Why Should I Set a Body Id?</h2>\n<p>There are plenty of reasons why you should, here are a few:</p>\n<ul><li>Maybe your design has different colors depending upon which section you are in. Instead of having to touch the markup, you can just modify the CSS depending upon the id on the <code>body</code>.</li>\n<li>You can control the current states for your navigation.</li>\n<li>Maybe the markup on your homepage is a little different than subpages, so instead of creating a different template, just stick in an if statement.</li>\n</ul><h2>Setting Up the Code</h2>\n<p>So typically, you setup your navigation to match your directory structure. Ex: Top level navigation is <strong>about</strong>, and there is a folder on the root called <strong>about</strong>. So the easiest thing to do, is just check the url and determine which section you are in. This is the code that sets the body id on my site:</p>\n\n<div class=\"codeblock\"><code>\n&lt;?php<br />function setBodyId() {<br />    $path = $_SERVER[\'REQUEST_URI\'];<br />    <br />    if(!isset($bodyId)) {<br />  if(eregi(\'^/about/\',$path) == 1) {<br />   $bodyId = \'about\';<br />  } else if(eregi(\'^/blog/\',$path) == 1) {<br />   $bodyId = \'blog\';<br />  } else if(eregi(\'^/contact/\',$path) == 1) {<br />   $bodyId = \'contact\';<br />  } else if(eregi(\'^/work/\',$path) == 1) {<br />   $bodyId = \'work\';<br />  } else if(eregi(\'^/play/\',$path) == 1) {<br />   $bodyId = \'play\';<br />  } else if ($path == \'\') {<br />   $bodyId = \'home\';<br />  } else {<br />   $bodyId = \'general\';<br />  }<br /> }<br />   <br />    return $bodyId;<br />}<br />?&gt; \n\n</code></div>\n\n<p>Sure, you could do this dynamically and pull in the top level folder from the url, but I have found there are too many situations that arise where you want multiple sections to have the same body id, or you want to set other variables section by section. So I stick with this method, and it has been successful.</p>\n\n<h2>My Example</h2>\n<p>My example is going to be a little different because it is in a subsection of my site. So here is the code I am using to control setting the body id in the example:</p>\n<div class=\"codeblock\"><code>\n&lt;?php<br />function exampleSetBodyId() {<br />    $path = $_SERVER[\'REQUEST_URI\'];<br />    <br />    if(!isset($bodyId)) {<br />  if(eregi(\'^/play/set-a-body-id/about/\',$path) == 1) {<br />   $bodyId = \'about\';<br />  } else if(eregi(\'^/play/set-a-body-id/blog/\',$path) == 1) {<br />   $bodyId = \'blog\';<br />  } else if(eregi(\'^/play/set-a-body-id/contact/\',$path) == 1) {<br />   $bodyId = \'contact\';<br />  } else if(eregi(\'^/play/set-a-body-id/work/\',$path) == 1) {<br />   $bodyId = \'work\';<br />  } else if(eregi(\'^/play/set-a-body-id/play/\',$path) == 1) {<br />   $bodyId = \'play\';<br />  } else if ($path == \'/play/set-a-body-id/\') {<br />   $bodyId = \'home\';<br />  } else {<br />   $bodyId = \'general\';<br />  }<br /> }<br />   <br />    return $bodyId;<br />}<br />$bodyId = exampleSetBodyId();<br />?&gt; \n\n</code></div>\n\n<p>So in the <code>$bodyId</code> variable, you have the value of the body id, so just print the variable on the <code>body</code> tag:</p>\n\n<div class=\"codeblock\"><code>\n&lt;body id=\"&lt;?=$bodyId; ?&gt;\"&gt; \n\n</code></div>\n\n<h3>Some Practical Uses</h3>\n<p>As I discussed at the beginning of the post, there are a lot of benefits to having a body id set on every page. This is the <a href=\"//assets.trevor-davis.com/play/set-a-body-id/\">demo section</a> that I am discussing below.</p>\n<h4>Different Colors Per Section</h4>\n<p>If you click through the navigation in the example, you can see the colors are different for each section. This can be easily accomplished without changing any markup through the power of <strong>descendant selectors.</strong> Here is the part of the CSS that is controlling the color of the borders:</p>\n<div class=\"codeblock\"><code>\ndiv#content { border: 1px solid #000; }<br />ul#nav { border-top: 1px solid #000; }<br />body#home div#content, body#home ul#nav { border-color: #FF6600; }<br />body#about div#content, body#about ul#nav { border-color: #429C19; }<br />body#blog div#content, body#blog ul#nav { border-color: #54D0ED; }<br />body#work div#content, body#work ul#nav { border-color: #A81919; }<br />body#play div#content, body#play ul#nav { border-color: #400152; }<br />body#contact div#content, body#contact ul#nav { border-color: #F8DC0C; } \n\n</code></div>\n\n<p>Here is the part that is changing the color of the <code>h1</code>:</p>\n\n<div class=\"codeblock\"><code>\nbody#home h1 { color: #FF6600; }<br />body#about h1, { color: #429C19; }<br />body#blog h1 { color: #54D0ED; }<br />body#work h1 { color: #A81919; }<br />body#play h1 { color: #400152; }<br />body#contact h1 { color: #F8DC0C; }&lt;/pre&gt;&lt;/code&gt;<br /><br />&lt;p&gt;Obviously this is not the most beautiful example, but hopefully the idea makes sense.&lt;/p&gt;<br /><br />&lt;h4&gt;Current State on Navigation&lt;/h4&gt;<br />&lt;p&gt;There are different ways to set the current state on the navigation, but by assigning an id to each navigation element, you can use descendant selectors again. Here is the markup:&lt;/p&gt;<br />[code]&lt;ul id=\"nav\"&gt;<br /> &lt;li id=\"homeNav\"&gt;&lt;a href=\"/play/set-a-body-id/\"&gt;Home&lt;/a&gt;&lt;/li&gt;<br /> &lt;li id=\"aboutNav\"&gt;&lt;a href=\"/play/set-a-body-id/about/\"&gt;About&lt;/a&gt;&lt;/li&gt;<br /> &lt;li id=\"blogNav\"&gt;&lt;a href=\"/play/set-a-body-id/blog/\"&gt;Blog&lt;/a&gt;&lt;/li&gt;<br /> &lt;li id=\"workNav\"&gt;&lt;a href=\"/play/set-a-body-id/work/\"&gt;Work&lt;/a&gt;&lt;/li&gt;<br /> &lt;li id=\"playNav\"&gt;&lt;a href=\"/play/set-a-body-id/play/\"&gt;Play&lt;/a&gt;&lt;/li&gt;<br /> &lt;li id=\"contactNav\"&gt;&lt;a href=\"/play/set-a-body-id/contact/\"&gt;Contact&lt;/a&gt;&lt;/li&gt;<br />&lt;/ul&gt; \n\n</code></div>\n\n<p>Then, we use the following CSS to change the background color and text color when we are in that section:</p>\n<div class=\"codeblock\"><code>\nbody#home ul#nav li#homeNav a { background: #FF6600; }<br />body#about ul#nav li#aboutNav a { background: #429C19; }<br />body#blog ul#nav li#blogNav a { background: #54D0ED; }<br />body#work ul#nav li#workNav a { background: #A81919; }<br />body#play ul#nav li#playNav a { background: #400152; }<br />body#contact ul#nav li#contactNav a { background: #F8DC0C; }<br />body#home ul#nav li#homeNav a, body#about ul#nav li#aboutNav a, body#blog ul#nav li#blogNav a, body#contact ul#nav li#contactNav a { color: #000; }<br />body#work ul#nav li#workNav a, body#play ul#nav li#playNav a { color: #fff; } \n\n</code></div>\n\n<h4>Slightly Different Homepage Markup</h4>\n<p>Typically the markup for homepages are slightly different. But, if you are using one header and footer template for the entire site, you probably don’t want to create another template just for the homepage. So since we have the body id that tells us when we are on the homepage, we can just write a simple <code>if</code> statement:</p>\n\n<div class=\"codeblock\"><code>\n&lt;?php if($bodyId == \'home\') { ?&gt;<br /> &amp;hellip;PUT YOUR HOMEPAGE SPECIFIC ELEMENTS HERE&amp;hellip; <br />&lt;?php } ?&gt; \n\n</code></div>\n\n<h2>Make it Work with WordPress</h2>\n<p>So just take the <strong>setBodyId function</strong> that we defined earlier, and add it to your WordPress theme functions (functions.php).</p>\n\n<p>After you have added the function, we want to add actions to <a href=\"http://codex.wordpress.org/Hook_Reference/wp_head\">wp_head</a> and <strong>wp_footer</strong> (for some reason there isn’t a WordPress Hook Reference for wp_footer, but it is essentially the same as wp_head, just in the footer). Here is how we add our function to those hooks:</p>\n<div class=\"codeblock\"><code>\nadd_action(\'wp_head\', \'setBodyId\');<br />add_action(\'wp_footer\', \'setBodyId\'); \n\n</code></div>\n\n<p>Then, in your header, just call the <strong>wp_head</strong> hook, and call our function:</p>\n<div class=\"codeblock\"><code>\n&lt;?php wp_head(); $bodyId = setBodyId(); ?&gt; \n\n</code></div>\n\n<p>There you have it, you have the body id defined in the <code>$bodyId</code> variable, and you can do with it what you want.</p>\n\n<h2>Other Thoughts</h2>\n<p>I think by setting an id (or class) on such a high level element gives you a lot of control over its descendants. Another interesting idea that I heard was to use <a href=\"http://jquery.com/\">jQuery</a> to determine the browser and version that the user is using, then add a class on the body. That way you could differ your CSS depending on which class is on the <code>body</code>. That idea would eliminate the need for conditional comments (at least for users with JavaScript enabled).</p>\n\n<p>So hopefully this tutorial shows you an easy way to make some site-wide tasks simpler, and I am interested to see if other people have ideas for what to do with body ids.</p>',NULL,1794,NULL,'2014-01-19 12:59:53','2023-01-22 15:18:31','ec31cb57-b274-49ee-aa23-b7fe605303f1',1,NULL,NULL,NULL),(213,218,'Weekly Link Round-Up #29',NULL,'<p>Got great news at work this week: a redesigned site that was supposed to launch on the 6th, is now getting pushed back to the 13th. Maybe I will have time in the coming week to take a few minutes to not feel stressed out and rushed. So in my limited free time this week, here are some things that I found interesting:</p>\n\n<ul><li><a href=\"http://psdtuts.com/interface-tutorials/create-a-sleek-high-end-web-design-from-scratch/\">Create a Sleek, High-End Web Design from Scratch</a>\n<p>This was a great article going step-by-step designing a website. I am really finding these design articles interesting since I am in the process of working on the next redesign for my site. There was also a partnering article, <a href=\"http://nettuts.com/site-builds/build-a-sleek-portfolio-site-from-scratch/\">Build a Sleek Portfolio Site from Scratch</a> that discussing the slicing of the site. Nothing ground breaking, but a nice step-by-step guide for a beginner.</p>\n</li>\n<li><a href=\"http://www.zeldman.com/2008/04/27/content-outsourcing-and-the-disappearing-personal-site/\">The vanishing personal site</a>\n<p>This is an interesting article discussing something that I have recently begun to see as well. Some people’s personal sites just have links to their accounts on the numerous social networking sites. The article even spurred an article from Six Apart: <a href=\"http://www.sixapart.com/blog/2008/04/hell_no_personal_sites_arent_d.html\">Hell no, personal sites aren’t dead!</a>. I don’t believe that personal sites are <strong>dead</strong>, but I agree with Zeldman’s comment that they are <strong>vanishing</strong>.</p>\n</li>\n<li><a href=\"http://veerle.duoh.com/blog/comments/starting_with_css_and_bug_fixing_tips/\">Starting with CSS and bug fixing tips</a>\n<p>This is a great resource for people just getting into web development. Veerle provides a bunch of links, recommended books, and strategies for fixing CSS bugs. Definitely will become a great starting point for a lot of people.</p>\n</li>\n</ul>',NULL,1793,NULL,'2014-01-19 12:59:53','2023-01-22 15:18:31','9f4b5029-5e9a-4f5d-8ef5-1a67968a0909',1,NULL,NULL,NULL),(214,219,'Weekly Link Round-Up #28',NULL,'<p>Man am I happy it’s the weekend. Have been working on a project at work that has a real short deadline, so I’ve been busy. I’m looking forward to Sunday because I’m running a 10 mile race and going to the Wizards playoff game. There were a lot of interesting things that I found this week:</p>\n<ul><li><a href=\"http://alistapart.com/issues/257\">A List Apart: Issue 257</a>\n<p>I’ve heard a lot about Ruby on Rails, but I never really looked too much into it. After reading <a href=\"http://alistapart.com/articles/creatingmoreusinglesseffortwithrubyonrails\">Creating More Using Less Effort with Ruby on Rails</a> and <a href=\"http://alistapart.com/articles/gettingstartedwithrubyonrails\">Getting Started with Ruby on Rails</a>, it really makes me want to learn more about it. Obviously, I don’t think I will become a hardcore programmer, but I would like be able to work with it in the future.</p>\n</li>\n<li><a href=\"http://www.smashingmagazine.com/2008/04/23/5-principles-and-ideas-of-setting-type-on-the-web/\">5 Principles And Ideas Of Setting Type On The Web</a>\n<p>Nice set of guidelines and resources for working with type on the web.</p>\n</li>\n<li><a href=\"http://jeffcroft.com/blog/2008/apr/23/who-owns-javascript/\">But who owns Javascript?</a>\n<p>This is definitely an issue at my company. Is it front-end developers or back-end developers who should be doing the JavaScript? Personally, I think that front-end developers should handle all “presentational” JavaScript, and back-end developers should handle any JavaScript that is interacting with any data. Although, that line I think is somewhat flexible, as I have shown <a href=\"//trevor-davis.com/blog/tutorial/ajax-forms-with-jquery/\">how simple it is to create an AJAX form</a>.</p>\n</li>\n</ul><ul><li><a href=\"http://www.andyrutledge.com/criticism.php\">Criticism: Myths and Childishness</a>\n<p>I love how Andy doesn’t hold back. He just says it how it is. This is definitely something I’m starting to understand more and more as I get more experience.</p>\n</li>\n<li><a href=\"http://www.smashingmagazine.com/2008/04/24/5-more-principles-of-effective-web-design/\">Five More Principles Of Effective Web Design</a>\n<p>Some nice tips and resources here. These articles are really interesting to me right now as I am working on the next design for my site.</p>\n</li>\n<li><a href=\"http://www.sitepoint.com/blogs/2008/04/25/css-gradients-transforms-animations-and-masks/\">CSS Gradients, Transforms, Animations, and Masks</a>\n<p>The latest version of WebKit has added some pretty cool CSS properties. If only all browser makers would continue to advance their browser as fast as WebKit does, it would be a much better world on the web.</p>\n</li>\n<li><a href=\"http://psdtuts.com/designing-tutorials/working-within-limitations-to-achieve-great-designs/\">Working Within Limitations to Achieve Great Designs</a>\n<p>Some nice minimalist strategies for achieving great designs.</p>\n</li>\n</ul>',NULL,1792,NULL,'2014-01-19 12:59:53','2023-01-22 15:18:31','b402cd15-cb50-4230-84db-16faeed4f188',1,NULL,NULL,NULL),(215,220,'Weekly Link Round-Up #27',NULL,'<p>Busy week, both freelance wise and work wise. The good news is that the NBA playoffs are starting, so let’s all cheer for the Wizards. This is what I found interesting this week:</p>\n<ul><li><a href=\"http://ma.tt/2008/04/securityfocus-sql-injection-bogus/\">SecurityFocus SQL Injection Bogus</a>\n<p>So apparently Security Focus published a false report about a security hole in WordPress. It’s good to know how much WordPress stays on top of these security issues, as they become more and more prevalent. As Matt recommends, one of the most important things to do is to stay up to date with the WordPress updates.</p>\n</li>\n\n<li><a href=\"http://snook.ca/archives/html_and_css/no_css_reset/\">No CSS Reset</a>\n<p>This sparked an interesting discussing over on <a href=\"http://meyerweb.com/eric/thoughts/2008/04/17/crafting-ourselves/\">Eric Meyer’s blog</a>. Personally, I do not use a CSS reset. I do zero out the margin and padding on all block level elements, but not by using the universal selector. In the end, I think Eric makes a great point:</p>\n<blockquote>\n<p>So it’s no surprise that we, as a community, keep building and sharing solutions to problems we encounter. Discussions about the merits of those solutions in various situations are also no surprise. Indeed, they’re exactly the opposite: the surest and, to me, most hopeful sign that web design/development continues to mature as a profession, a discipline, and a craft. It’s evidence that we continue to challenge ourselves and each other to advance our skills, to keep learning better and better how better to do what we love so much.</p>\n<p><strong>I wouldn’t have it any other way.</strong></p>\n</blockquote>\n</li>\n</ul><ul><li><a href=\"http://www.smashingmagazine.com/2008/04/17/web-form-design-modern-solutions-and-creative-ideas/\">Web Form Design: Modern Solutions and Creative Ideas</a>\n<p>Nice collection of interesting forms. It is always nice to see people getting really creative with them. I especially like the one on <a href=\"http://o.rang.es/contact/\">Edward Pistachio’s site</a>, although it is not very usable.</p>\n</li>\n<li><a href=\"http://robgoodlatte.com/2008/04/18/passionless-pre-professionals/\">Passionless Pre-Professionals</a>\n<p>I think this is a huge issue with our society. Everyone’s mentality is to do what they can to get a job that will make them a lot of money, instead of what will make them happy. Thank god that I absolutely love working with the web.</p>\n</li>\n<li><a href=\"http://www.andyrutledge.com/calculating-hours.php\">Calculating Hours – the Client Factors</a>\n<p>A great article giving some guidelines on how to price a project. I really think that one good point that Andy makes is that sometimes, there are clients that you should just not accept projects from. The hard part is evaluating that early on.</p>\n</li>\n</ul>',NULL,1791,NULL,'2014-01-19 12:59:53','2023-01-22 15:18:31','85967f36-7d82-4fad-b454-a65208aed52f',1,NULL,NULL,NULL),(216,221,'Creepy Critters CSS Off',NULL,'<p>I meant to post this a little while ago, but I participated in a <a href=\"http://cssoff.com/2008/04/05/april-5-2008-critters/\">CSS Off</a> about 2 weeks ago.</p>\n\n<p>The idea is: you get a PSD file, and you have 24 hours to slice it. <a href=\"//trevor-davis.com/critters/\">This was my entry.</a></p>\n\n<p>Looking back on it, I think there were some things I would have done differently, but I am pretty happy with my submission. I’m interested to see who wins.</p>\n\n<p>I look forward to the next one and encourage others to participate. Even if you don’t win, it’s good practice.</p>',NULL,1790,NULL,'2014-01-19 12:59:53','2023-01-22 15:18:31','00b4882e-731e-46e5-9e23-902d14d56af1',1,NULL,NULL,NULL),(217,222,'Handling WordPress Trackbacks with jQuery',NULL,'<p>So after having a ton of trackbacks in a recent article, <a href=\"//trevor-davis.com/blog/tutorial/the-6-most-important-css-techniques-you-need-to-know/\">The 6 Most Important CSS Techniques You Need To Know</a>, I thought that it was kind of breaking up the flow of the comments.</p>\n\n<p>I didn’t necessarily want to completely remove them because I thought that some people might be interested in them. These are the steps that I want to take:</p>\n\n<ol><li>Assign a class to all trackbacks</li>\n<li>Hide them all with CSS</li>\n<li>Add a jQuery visibility toggle</li>\n</ol><h2>1) Assign a Class to All Trackbacks</h2>\n<p>In your <strong>comments.php</strong> theme file, find a line that looks like this:</p>\n<div class=\"codeblock\"><code>\n&lt;li id=\"comment-&lt;?php comment_ID() ?&gt;\"&gt; \n\n</code></div>\n<p>And replace it with this:</p>\n<div class=\"codeblock\"><code>\n&lt;li class=\"&lt;?php if(get_comment_type() != \'comment\') echo \'trackback\'; ?&gt;\" id=\"comment-&lt;?php comment_ID() ?&gt;\"&gt; \n\n</code></div>\n<h3>Explanation</h3>\n<p>The get_comment_type function returns either <strong>comment</strong>, <strong>trackback</strong>, or <strong>pingback</strong>. Since I want to hide everything except comments, I filter out anything that <strong>does not equal comment</strong>, so I assign a class of trackback to that list item.</p>\n\n<h2>2) Hide them All with CSS</h2>\n<p>Ok, easy enough, just add the following to your stylesheet:</p>\n<div class=\"codeblock\"><code>\nol.commentlist li.trackback { display: none; } \n\n</code></div>\n\n<p>That should be pretty self explanatory.</p>\n\n<h2>3) Add a jQuery Visibility Toggle</h2>\n<p>The logic of the JavaScript will be as follows:</p>\n<ol><li>Check to see if there are any list items with a class of trackback.</li>\n<li>Add a link to Show/Hide trackbacks.</li>\n<li>Add a click event to the Show/Hide trackback link.</li>\n<li>Update the text of the link accordingly.</li>\n</ol><p>First, let’s execute the JavaScript once the document is ready:</p>\n<div class=\"codeblock\"><code>\n$(document).ready(function(){<br />            <br />}); \n\n</code></div>\n\n<p>Next, let’s check to see if there are any elements with a class of trackback:</p>\n<div class=\"codeblock\"><code>\n$(document).ready(function(){<br /> if($(\'.trackback\').length &gt; 0) {<br /> <br /> }         <br />}); \n\n</code></div>\n\n<p>Next, if there are trackbacks on the page, insert a link to show trackbacks:</p>\n<div class=\"codeblock\"><code>\n$(document).ready(function(){<br /> if($(\'.trackback\').length &gt; 0) {<br />  $(\'#comments\').after(\'&lt;a href=\"#\" id=\"toggleTrackbacks\"&gt;(Show Trackbacks)&lt;/a&gt;\');<br /> }         <br />}); \n\n</code></div>\n\n<p>I am adding the show/hide trackback link after the heading with an id of <strong>comments</strong>.</p>\n\n<p>Finally, I want to add in the <strong>click</strong> event to the link, and toggle the text depending upon if the trackbacks are visible or not:\n</p><div class=\"codeblock\"><code>\n$(document).ready(function(){<br /> if($(\'.trackback\').length &gt; 0) {<br />  $(\'#comments\').after(\'&lt;a href=\"#\" id=\"toggleTrackbacks\"&gt;(Show Trackbacks)&lt;/a&gt;\');<br />  $(\'#toggleTrackbacks\').click(function() {<br />   $(\'.trackback\').slideToggle(\'slow\');<br />   if($(\'#toggleTrackbacks\').text() == \'(Show Trackbacks)\') {<br />    $(\'#toggleTrackbacks\').text(\'(Hide Trackbacks)\');<br />   } else {<br />    $(\'#toggleTrackbacks\').text(\'(Show Trackbacks)\');<br />   }<br />   return false;<br />  });<br /> }         <br />}); \n\n</code></div>\n\n<p>So basically, I am adding the jQuery <strong>slideToggle</strong> effect when the show/hide trackbacks link is clicked. Then, if the text in the show/hide trackbacks link is <strong>Show Trackbacks</strong>, I change it to <strong>Hide Trackbacks</strong>, and the opposite when the text is Hide Trackbacks.</p>\n\n<p>I have grabbed some of the comments from <a href=\"//trevor-davis.com/blog/tutorial/the-ultimate-png-guide/\">The Ultimate PNG Guide</a> so you can <a href=\"//assets.trevor-davis.com/play/jquery-collapse-trackbacks/\">see a demo of this in action</a>.</p>\n\n<p>I love how simple jQuery is.</p>',NULL,1789,NULL,'2014-01-19 12:59:53','2023-01-22 15:18:31','fecb5343-dddb-4e2a-b454-bba19fee300b',1,NULL,NULL,NULL),(218,223,'Weekly Link Round-Up #26',NULL,'<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><li><a href=\"http://bokardo.com/archives/you-didnt-come-here-from-google/\">You didn’t come here from Google</a>\n<p>Apparently Joshua Porter’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’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> </p>\n</li>\n</ul><ul><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>, “Wilson Miner demonstrates three techniques for incorporating data visualization into standards-based navigation patterns”. 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’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>',NULL,1788,NULL,'2014-01-19 12:59:54','2023-01-22 15:18:31','0764811f-3555-4b9a-b791-6164e4d7fd4e',1,NULL,NULL,NULL),(219,224,'Why I’ll Be Going Naked Tomorrow',NULL,'<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’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’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>',NULL,1787,NULL,'2014-01-19 12:59:54','2023-01-22 15:18:31','2a50279d-44d3-4a63-ae90-54b9dcfc0ccb',1,NULL,NULL,NULL),(220,225,'Weekly Link Round-Up #25',NULL,'<p>It was crazy to see the amount of traffic I got for <a href=\"//trevor-davis.com/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’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><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>',NULL,1786,NULL,'2014-01-19 12:59:54','2023-01-22 15:18:31','4e9e04dc-5ef9-484d-a5c8-b7fc9b1e94cd',1,NULL,NULL,NULL),(221,226,'The 6 Most Important CSS Techniques You Need To Know',NULL,'<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><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><h2 class=\"replaceHeadline\">1. Get a Consistent Base Font Size</h2>\n\n<div class=\"codeblock\"><code>\nbody { font-size: 62.5%; } \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=\"//assets.trevor-davis.com/play/important-css-techniques/base-font-size/\">See the example »</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’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, body, div, h1, h2, h3, h4, h5, h6, ul, ol, dl, li, dt, dd, p, blockquote, pre, form, fieldset, table, th, td { margin: 0; padding: 0; } \n\n</code></div>\n\n<p>Then, you can set the margins that you want accordingly.</p>\n\n<p><a href=\"//assets.trevor-davis.com/play/important-css-techniques/get-consistent-margins/\">See the example »</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=\"//assets.trevor-davis.com/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=\"//assets.trevor-davis.com/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’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=\"//assets.trevor-davis.com/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=\"//trevor-davis.com/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 id=\"logo\"&gt;Company Name&lt;span&gt;&lt;/span&gt;&lt;/h1&gt; \n\n</code></div>\n\n<h3 class=\"replaceHeadline\">The CSS</h3>\n<div class=\"codeblock\"><code>\nh1#logo {<br /> height: 110px;<br /> overflow: hidden;<br /> position: relative;<br /> width: 560px;<br />}<br />h1#logo span {<br /> background: url(/images/content/2008/03/logo.gif) no-repeat;<br /> display: block;<br /> height: 100%;<br /> left: 0;<br /> position: absolute;<br /> top: 0;<br /> width: 100%;<br />} \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=\"//assets.trevor-davis.com/play/important-css-techniques/image-replacement/\">See the example »</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 id=\"container\"&gt;<br /> &lt;div id=\"primaryContent\"&gt;<br />  &lt;h1&gt;Primary Column&lt;/h1&gt;<br />  &lt;p&gt;&amp;hellip;&lt;/p&gt;<br /> &lt;/div&gt;<br /> &lt;div id=\"secondaryContent\"&gt;<br />  &lt;h2&gt;Secondary Column&lt;/h2&gt;<br />  &lt;p&gt;&amp;hellip;&lt;/p&gt;<br /> &lt;/div&gt;<br /> &lt;div class=\"clearing\"&gt;&lt;/div&gt;<br />&lt;/div&gt; \n\n</code></div>\n\n<h3 class=\"replaceHeadline\">The CSS</h3> \n<div class=\"codeblock\"><code>\ndiv#container { <br /> background: url(/images/content/2008/03/content-bg.gif) repeat-y top right;<br /> padding: 10px 0;<br /> width: 640px;<br />}<br />div#primaryContent { float: left; padding: 0 10px; width: 400px; }<br />div#secondaryContent { float: right; padding: 0 10px; width: 200px; } \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=\"//assets.trevor-davis.com/play/important-css-techniques/faux-columns/\">See the example »</a></p>\n\n<h2>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 href=\"#\" id=\"download\"&gt;Download Now&lt;span&gt;&lt;/span&gt;&lt;/a&gt; \n\n</code></div>\n\n<h4 class=\"replaceHeadline\">The CSS</h4>\n<div class=\"codeblock\"><code>\na#download { <br /> display: block; <br /> height: 75px; <br /> overflow: hidden; <br /> position: relative; <br /> width: 150px; <br />}<br />a#download span { <br /> background: url(/images/content/2008/03/download.gif) no-repeat; <br /> display: block; <br /> height: 100%; <br /> left: 0; <br /> position: absolute; <br /> top: 0; <br /> width: 100%;<br />}<br />a#download:hover span { background-position: 0 -75px; } \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 { cursor: pointer; } \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 { background-position: 0 0; } \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’t shift back.</p>\n\n<p><a href=\"//assets.trevor-davis.com/play/important-css-techniques/css-sprites/\">See the example »</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 id=\"nav\"&gt;<br /> &lt;li id=\"home\"&gt;&lt;a href=\"#\"&gt;Home&lt;span&gt;&lt;/span&gt;&lt;/a&gt;&lt;/li&gt;<br /> &lt;li id=\"about\"&gt;&lt;a href=\"#\"&gt;About&lt;span&gt;&lt;/span&gt;&lt;/a&gt;&lt;/li&gt;<br /> &lt;li id=\"work\"&gt;&lt;a href=\"#\"&gt;Work&lt;span&gt;&lt;/span&gt;&lt;/a&gt;&lt;/li&gt;<br /> &lt;li id=\"play\"&gt;&lt;a href=\"#\"&gt;Play&lt;span&gt;&lt;/span&gt;&lt;/a&gt;&lt;/li&gt;<br /> &lt;li id=\"contact\"&gt;&lt;a href=\"#\"&gt;Contact&lt;span&gt;&lt;/span&gt;&lt;/a&gt;&lt;/li&gt;<br />&lt;/ul&gt; \n\n</code></div>\n\n<h4 class=\"replaceHeadline\">The CSS</h4>\n<div class=\"codeblock\"><code>\nul#nav { background: #91c6d5; float:left; list-style: none; width: 510px; }<br />ul#nav li { float: left; }<br />ul#nav a { color: #000; display: block; font-size: 1.5em; height: 38px; text-align: center; position: relative; }<br />ul#nav span { background: url(/images/content/2008/03/nav.gif) no-repeat; display: block; height: 100%; left: 0; position: absolute; top: 0; width: 100%; }<br /><br />ul#nav li#home a { width: 102px; }<br />ul#nav li#home a:hover span { background-position: 0 -38px; }<br /><br />ul#nav li#about a { width: 106px; }<br />ul#nav li#about span { background-position: -102px 0; }<br />ul#nav li#about a:hover span { background-position: -102px -38px; }<br /><br />ul#nav li#work a { width: 92px; }<br />ul#nav li#work span { background-position: -208px 0; }<br />ul#nav li#work a:hover span { background-position: -208px -38px; }<br /><br />ul#nav li#play a { width: 79px; }<br />ul#nav li#play span { background-position: -300px 0; }<br />ul#nav li#play a:hover span { background-position: -300px -38px; }<br /><br />ul#nav li#contact a { width: 131px; }<br />ul#nav li#contact span { background-position: -379px 0; }<br />ul#nav li#contact a:hover span { background-position: -379px -38px; } \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 a { cursor: pointer; } \n\n</code></div>\n\n<h5 class=\"replaceHeadline\">Styles to IE6 Only</h5>\n<div class=\"codeblock\"><code>\nul#nav a:hover { background-position: 0 0; } \n\n</code></div>\n\n<p><a href=\"//assets.trevor-davis.com/play/important-css-techniques/css-sprites/\">See the example »</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>',NULL,1785,NULL,'2014-01-19 12:59:54','2023-01-22 15:18:31','b53b9e13-70ac-489c-87ae-79b1db5029f2',1,NULL,NULL,NULL),(222,227,'Upgraded to WordPress 2.5',NULL,'<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’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’m sure I’ll have a lot more to say about it once I’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>',NULL,1784,NULL,'2014-01-19 12:59:54','2023-01-22 15:18:31','c90f123b-ee0b-41c5-8353-4003fb091cb7',1,NULL,NULL,NULL),(223,228,'Weekly Link Round-Up #24',NULL,'<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><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’t mean it’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 “a state of focused concentration”. 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’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><ul><li><a href=\"http://www.techcrunch.com/2008/03/24/the-secret-to-googles-success-free-beer-and-sushi/\">The Secret To Google’s Success: Free Beer And Sushi</a>\n<p>So you’re telling me that I just have to tell my job that I will work better with beer and sushi? Yeah, I’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’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><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></li>\n</ul>',NULL,1783,NULL,'2014-01-19 12:59:54','2023-01-22 15:18:31','ccb9e267-8d9a-48e9-9528-7e44b4fac842',1,NULL,NULL,NULL),(224,229,'Using Web Development to Make a Difference',NULL,'<p>During my senior year of college, I wasn’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\n<p>At my company, we are broken up into 4 teams, each of which has a pro-bono client:</p>\n<ul><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><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><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=\"//trevor-davis.com/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>',NULL,1782,NULL,'2014-01-19 12:59:54','2023-01-22 15:18:31','1eef22c5-e61b-494d-a300-aef63599f287',1,NULL,NULL,NULL),(225,230,'Weekly Link Round-Up #23',NULL,'<p>Wow, crazy week at work. I felt like everything I had to do had a deadline of <strong>immediately</strong>. I’m so glad it’s the weekend, and I can watch some college basketball. So, here are a few interesting things from this week:</p>\n\n<ul><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 “brand”. I’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><ul><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’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’m loving this series of articles.</p>\n</li>\n</ul>',NULL,1781,NULL,'2014-01-19 12:59:54','2023-01-22 15:18:31','6f786d42-d28f-4e15-92dd-87e285e445b9',1,NULL,NULL,NULL),(226,231,'Sometimes, it’s the Small Things that Count',NULL,'<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=\"//assets.trevor-davis.com/uploads/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=\"//trevor-davis.com/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\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 —</p>\n\n<p><strong>Jerry:</strong> Bad.</p>\n\n<p><strong>George:</strong> Day was —</p>\n\n<p><strong>Elaine:</strong> Night.</p>\n<p class=\"citation\"><cite>— <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’s because I’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’t take that extra time to process.</p>\n\n<p>So to relate it to the web, <strong>sometimes, it’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’t Make Me Think</a>.</p>',NULL,1780,NULL,'2014-01-19 12:59:54','2023-01-22 15:18:31','2bb3d86b-461d-48aa-bd0e-66df37913a43',1,NULL,NULL,NULL),(227,232,'Weekly Link Round-Up #22',NULL,'<p>Well, I didn’t get much sleep this week, because I spent the entire week staying up late playing with my new MacBook Pro. It’s amazing. Best purchase ever. When I wasn’t playing, this is what I found interesting this week:</p>\n\n\n<ul><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’ll let the experts create the fonts, and I will just enjoy the fruits of their labor.</p>\n</li>\n</ul><ul><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’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’t noticed it since I’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’s Design Process Through a Keyhole</a>\n<p>Holy crap, Apple designs 10 mock ups before narrowing it down!? Maybe that’s why their products are almost always awesome. That design process it pretty intense.</p>\n</li>\n</ul>',NULL,1779,NULL,'2014-01-19 12:59:54','2023-01-22 15:18:31','b6f03826-df89-46c9-b1be-058a23e8354a',1,NULL,NULL,NULL),(228,233,'Use jQuery to Open All External Links in a New Window',NULL,'<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…</p>\n\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(){<br /> $(\"a[@href^=\'http\']\").attr(\'target\',\'_blank\');<br />}); \n\n</code></div>\n\n<p><a href=\"//assets.trevor-davis.com/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=\"//trevor-davis.com/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>',NULL,1778,NULL,'2014-01-19 12:59:54','2023-01-22 15:18:31','26e66b87-79ff-4242-8ef4-7553049ae4d6',1,NULL,NULL,NULL),(229,234,'Weekly Link Round-Up #21',NULL,'<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’s going to be a good edition to <a href=\"//trevor-davis.com/work/\">my portfolio</a> when it’s done. So, enough of the small talk, this is what I found interesting this week:</p>\n\n<ul><li><a href=\"http://blogs.msdn.com/ie/archive/2008/03/03/microsoft-s-interoperability-principles-and-ie8.aspx\">Microsoft’s Interoperability Principles and IE8</a>\n<p>We awoke on Monday morning to very interesting news:</p>\n<blockquote><p>We’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’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, “The Highly Extensible CSS Interface”. This one touches on some <a href=\"//trevor-davis.com/blog/tutorial/ajax-forms-with-jquery/\">jQuery</a> and <a href=\"//trevor-davis.com/blog/tutorial/css-attribute-selectors-explained/\">attribute selectors</a>.</p>\n</li>\n</ul><ul><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’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’s improvements and it’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’s and don’ts of coding for the mobile web. I still think that it’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><p>Oh and in other news, my brand spanking new 15\" MacBook Pro should be arriving Monday. The anticipation is killing me. I didn’t know they ship from China!</p>',NULL,1777,NULL,'2014-01-19 12:59:54','2023-01-22 15:18:31','f007b524-3537-434a-be85-eefc18f1673e',1,NULL,NULL,NULL),(230,235,'PNGs, the AlphaImageLoader Filter, and hasLayout',NULL,'<p>I recently wrote an article discussing <a href=\"//trevor-davis.com/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\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=\"//assets.trevor-davis.com/play/pngs/example-4/\">the same working example</a> I used in my <a href=\"//trevor-davis.com/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 type=\"text/css\"&gt;<br />div#container div.inner { width: auto; }<br />&lt;/style&gt; \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=\"//assets.trevor-davis.com/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>',NULL,1776,NULL,'2014-01-19 12:59:54','2023-01-22 15:18:31','7566c70a-298a-46e1-a86f-1787d02a8e57',1,NULL,NULL,NULL),(231,236,'Weekly Link Round-Up #20',NULL,'<p>Wow, I can’t believe I have written these weekly link round-up 20 times. The time sure has flown by.</p>\n\n<ul><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 “speaking” 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’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><ul><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>',NULL,1775,NULL,'2014-01-19 12:59:54','2023-01-22 15:18:31','316ee1b8-f8fe-4900-ac6d-b1dbcb216564',1,NULL,NULL,NULL),(232,237,'Gracious Spam',NULL,'<p>I’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’t even know how Akismet figures out that those are spam and not real comments.</p>',NULL,1774,NULL,'2014-01-19 12:59:54','2023-01-22 15:18:31','735956be-2643-45f6-9cee-6574e3486dde',1,NULL,NULL,NULL),(233,238,'Help Name That Font',NULL,'<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’s Georgia. Anyone else have a guess?</p>\n<p><img src=\"//assets.trevor-davis.com/uploads/images/content/2008/02/parking-garage.jpg\" alt=\"Parking Garage Font\" class=\"frame\" height=\"462\" width=\"462\" /></p>',NULL,1773,NULL,'2014-01-19 12:59:54','2023-01-22 15:18:32','a6ff0d80-3c94-4392-a584-2c33a7fd2250',1,NULL,NULL,NULL),(234,239,'MacBook vs MacBook Pro, Help Me Decide!',NULL,'<div class=\"update\">\n<h2>Update</h2>\n<p>I went with a MacBook Pro. <a href=\"//trevor-davis.com/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’s finally time. But now, the hard part comes up, which do I get: the MacBook or the MacBook Pro?</p>\n\n\n<h2 class=\"replaceHeadline\">MacBook</h2>\n<p>So here are the specs for the MacBook that I would get:</p>\n<ul><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><h2 class=\"replaceHeadline\">MacBoook Pro</h2>\n<p>Now, here are the specs for the MacBook Pro I would get:</p>\n<ul><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><h2 class=\"replaceHeadline\">Comparison</h2>\n<p>Based on those specs, it seems like the MacBook pro isn’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’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>',NULL,1772,NULL,'2014-01-19 12:59:54','2023-01-22 15:18:32','f8b7fbb9-8c6a-4c92-bc29-54633cfde348',1,NULL,NULL,NULL),(235,240,'Weekly Link Round-Up #19',NULL,'<p>There has been a lot of discussion/arguments recently about IE8’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><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 “enable” 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’s market share is, and that a majority of people are not developing their websites with Web Standards, and their sites would “break” (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 “broken”, Microsoft couldn’t take it. This is what I think really sold me. While I don’t think it’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><p>Here is the rest of this stuff that I found interesting this week:</p>\n<ul><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 &amp; 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’s awesome. Still not enough though…</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’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>',NULL,1771,NULL,'2014-01-19 12:59:55','2023-01-22 15:18:32','fe69e210-da33-4849-8988-80a1ac42801a',1,NULL,NULL,NULL),(236,241,'Weekly Link Round-Up #18',NULL,'<p>Wow, I’m actually all caught up with my feeds. I’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><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’s surprising how many sites you see that don’t work one way or the other. Not to mention that this can hurt your search engine optimization. Oh, by the way, I’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=\"//trevor-davis.com/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’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’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>',NULL,1770,NULL,'2014-01-19 12:59:55','2023-01-22 15:18:32','2c5b7195-f53e-4759-95c2-616817470b99',1,NULL,NULL,NULL),(237,242,'Weekly Link Round-Up #17',NULL,'<p>Well, I’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’t get a chance to read until this week.</p>\n<ul><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><p>Now for the items from <strong>this week</strong> that I found interesting:</p>\n\n<ul><li><a href=\"http://freelanceswitch.com/general/why-being-an-average-freelancer-might-just-be-enough/\">Why Being An ‘Average’ Freelancer Might Just Be Enough</a>\n<p>I feel like I am an ‘average’ freelancer, and I am perfectly happy with it. My design ability is not amazing, but it’s not bad either. That’s not saying I don’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’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>“An Email is Not a Web Page”</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’m trying on my own though…</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’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>',NULL,1769,NULL,'2014-01-19 12:59:55','2023-01-22 15:18:32','6c33b1c0-45fd-4549-bc90-dbf5437b4f0d',1,NULL,NULL,NULL),(238,243,'PHP Get Age Function',NULL,'<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’t have to go in every year on my birthday and add another year to my age.</p>\n\n\n\n<h2 class=\"replaceHeadline\">The Function</h2>\n<div class=\"codeblock\"><code>\nfunction age($bMonth,$bDay,$bYear) {<br /> <br /> $cMonth = date(\'n\');<br /> $cDay = date(\'j\');<br /> $cYear = date(\'Y\');<br /><br /> if(($cMonth &gt;= $bMonth &amp;&amp; $cDay &gt;= $bDay) || ($cMonth &gt; $bMonth)) {<br />  return ($cYear - $bYear);<br /> } else {<br />  return ($cYear - $bYear - 1);<br /> }<br />} \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’t work with an age in the future; it will return a negative number. I could add in checking to see if it’s a valid date, but I don’t think it’s really necessary.</p>\n\n<p><a href=\"//assets.trevor-davis.com/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>',NULL,1768,NULL,'2014-01-19 12:59:55','2023-01-22 15:18:32','17dc8307-e80c-4184-8577-be5256c5c6ae',1,NULL,NULL,NULL),(239,244,'Weekly Link Round-Up #16',NULL,'<p>Another busy weekend, so I’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><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 ‘Change’?</a>\n<p>Two type designers discuss the typography used in the presidential candidates logos. I personally like Obama’s and John Edwards’ 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>',NULL,1767,NULL,'2014-01-19 12:59:55','2023-01-22 15:18:32','131ae106-53e4-4674-8272-e5e5e0dc74f7',1,NULL,NULL,NULL),(240,245,'Weekly Link Round-Up #15',NULL,'<p>Yeah, so I am a little late with my weekly round-up from last week. Better late than never:</p>\n\n<ul><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’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 “Work From Home” 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’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>',NULL,1766,NULL,'2014-01-19 12:59:55','2023-01-22 15:18:32','6922d347-9f24-449a-8976-95d9fba6e0bb',1,NULL,NULL,NULL),(241,246,'Weird Green Background in Firefox',NULL,'<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><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><h3 class=\"replaceHeadline\">Fix #2</h3>\n<ol><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></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=\"//assets.trevor-davis.com/uploads/images/content/2008/01/home-green-background1.jpg\" alt=\"Homepage with weird green backgrounds\" class=\"frame imageCenter\" height=\"224\" width=\"462\" /><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>',NULL,1765,NULL,'2014-01-19 12:59:55','2023-01-22 15:18:32','4b43f8a8-afa1-4de2-bc26-01e22fb7249a',1,NULL,NULL,NULL),(242,247,'The Importance of Testing',NULL,'<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=\"//assets.trevor-davis.com/uploads/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’s easy to see why my parents bought it. But, there is just one big flaw…</p>\n\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’s so quiet when it runs, you don’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’s so quiet, that you don’t even realize it’s running. You have to open the door to see the control panel on the top of the door.</p>\n\n<img src=\"//assets.trevor-davis.com/uploads/images/content/2008/01/dishwasher-panel.jpg\" alt=\"Bosch Dishwasher panel\" class=\"imageCenter\" height=\"115\" width=\"468\" /><p>It’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’m sure they had a test dishwasher setup, and I bet they knew how long it took to run. They didn’t need to open it to see if it was still running. But if they had a regular person testing it, I’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 “buy” 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…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 “problems” from your everyday life that could improve the way you develop websites?</p>',NULL,1764,NULL,'2014-01-19 12:59:55','2023-01-22 15:18:32','4b4bab71-5b3c-479f-bb5f-ada7319d1521',1,NULL,NULL,NULL),(243,248,'Integrated Whole Site with Wordpress',NULL,'<p>Last night, I finished integrating my entire site into Wordpress. It took a little while, but I’ve finally got all of my content migrated.</p>\n\n<p>Of course if you are reading this in your feed reader, it’s going to say that all of the feeds are new…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>',NULL,1763,NULL,'2014-01-19 12:59:55','2023-01-22 15:18:32','4ccb17bd-cf71-4564-80b1-ea3c12173510',1,NULL,NULL,NULL),(244,249,'Weekly Link Round-Up #14',NULL,'<p>Busy, busy weekend. I didn’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><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>',NULL,1762,NULL,'2014-01-19 12:59:55','2023-01-22 15:18:32','24463c4d-a17d-4484-966b-1b92099a06de',1,NULL,NULL,NULL),(245,250,'Weekly Link Round-Up #13',NULL,'<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><li><a href=\"http://cameronmoll.com/archives/2008/01/dos_aint_so_bad_after_all/\">DOS ain’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…</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’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>',NULL,1761,NULL,'2014-01-19 12:59:55','2023-01-22 15:18:32','aea82a96-f20f-4a7f-b236-dbe08a416af3',1,NULL,NULL,NULL),(246,251,'Updated Dean Edwards’ IE7 Scripts',NULL,'<p>As I have noted in previous posts: <a href=\"//trevor-davis.com/blog/tutorial/using-dean-edwards-ie7-script/\">Using Dean Edwards’ IE7 Script</a>, <a href=\"//trevor-davis.com/blog/tutorial/the-ultimate-png-guide/\">The Ultimate PNG Guide</a>, I am a big advocate of the Dean Edwards’ 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\n<p>The are now two scripts, <a href=\"//trevor-davis.com/ie7/IE7.js\">IE7.js</a> and <a href=\"//trevor-davis.com/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 “fixes” 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><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;!--[if lt IE 7]&gt;<br />&lt;script src=\"/ie7/IE8.js\" type=\"text/javascript\"&gt;&lt;/script&gt;<br />&lt;![endif]--&gt; \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;!--[if lte IE 7]&gt;<br />&lt;script src=\"/ie7/IE8.js\" type=\"text/javascript\"&gt;&lt;/script&gt;<br />&lt;![endif]--&gt; \n\n</code></div>\n</li>\n<li>Open IE6 and enjoy some things not being broken.</li>\n</ol><h3 class=\"replaceHeadline\">Option 2: Link to Google Code Files</h3>\n<ol><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;!--[if lt IE 7]&gt;<br />&lt;script src=\"http://ie7-js.googlecode.com/svn/version/2.0(beta)/IE8.js\" type=\"text/javascript\"&gt;&lt;/script&gt;<br />&lt;![endif]--&gt; \n\n</code></div>\n</li>\n<li>Smile, you just “fixed” IE6.</li>\n</ol><p>Hopefully that should get you started with what you need. My previous articles: <a href=\"//trevor-davis.com/blog/tutorial/using-dean-edwards-ie7-script.php\">Using Dean Edwards’ IE7 Script</a>, <a href=\"//trevor-davis.com/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>',NULL,1760,NULL,'2014-01-19 12:59:55','2023-01-22 15:18:32','90acee6a-c853-41c6-a5a3-55ffce73264d',1,NULL,NULL,NULL),(247,252,'Weekly Link Round-Up #12',NULL,'<p>I’m glad this week is over. You know, it really didn’t feel like a short week, I guess it’s because I worked on Monday. Well here are the interesting links I found:</p>\n\n<ul><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…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’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’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 “I am not sure that my female users will like the masculine colours” rather than “can we make the whole design pink.” 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’s Tech Resolutions</a>\n<p>TechCrunch’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’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’s what I want.</p>\n</li>\n</ul>',NULL,1759,NULL,'2014-01-19 12:59:55','2023-01-22 15:18:32','65e2a853-b4ef-4540-83d1-2da58843fd8c',1,NULL,NULL,NULL),(248,253,'Javascript, A Requirement?',NULL,'<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=\"\" alt=\"FedEx Tracking Screenshot\" class=\"imageCenter\" height=\"173\" width=\"365\" /><p>So I thought, whatever it’s done in Flash, I’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…</p>\n\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=\"\" alt=\"FedEx Screenshot with Javascript Enabled\" class=\"imageCenter\" height=\"423\" width=\"468\" /><p>Now, here is what the page looks like when Javascript is <strong>disabled</strong>:</p>\n<img src=\"\" alt=\"FedEx Screenshot with Javascript Enabled\" class=\"imageCenter\" height=\"830\" width=\"468\" /><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, “but everyone has Javascript enabled and a Flash plugin installed”. 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’s pathetic that huge companies are still making terrible decisions like this on their web site. When will they learn?</p>',NULL,1758,NULL,'2014-01-19 12:59:55','2023-01-22 15:18:32','c463a777-c7de-4a18-9f81-00fa3db42030',1,NULL,NULL,NULL),(249,254,'Weekly Link Round-Up #11',NULL,'<p>Well, I hope everyone had a nice holiday break. I only worked 2 days this week, and there weren’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’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><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’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’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’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>',NULL,1757,NULL,'2014-01-19 12:59:55','2023-01-22 15:18:32','d5748295-8219-466f-a4c0-a2bf07ac3f8a',1,NULL,NULL,NULL),(250,255,'The Ultimate PNG Guide',NULL,'<p>I would say one of the coolest things in web development/design is the creative use of PNGs. Although, it’s a little hard because of the way that IE6 handles them.</p>\n\n<p>I have already written about <a href=\"//trevor-davis.com/blog/tutorial/using-dean-edwards-ie7-script/\">Using Dean Edwards’ IE7 Script</a>, but I wanted to take it a step further and talk more about PNGs.</p>\n\n\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;!--[if lt IE 7]&gt;<br />&lt;script src=\"/ie7/ie7-standard-p.js\" type=\"text/javascript\"&gt;&lt;/script&gt;<br />&lt;![endif]--&gt; \n\n</code></div>\n<p>Ok, so now when you want to have the script “fix” 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=\"//assets.trevor-davis.com/uploads/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’t sure where the corners will intersect with the lines on the bottom.</p>\n\n<p>In an ideal world, <a href=\"//assets.trevor-davis.com/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=\"//assets.trevor-davis.com/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=\"//assets.trevor-davis.com/play/pngs/example-3/\">So let’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’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=\"//assets.trevor-davis.com/play/pngs/example-4/\">we can give the effect of repeating the background</a>.</p>\n\n<div class=\"codeblock\"><code>\ndiv#container div.inner {<br /> background-image: url(blank.gif);<br /> filter: progid:DXImageTransform.Microsoft.AlphaImageLoader (src=\'/images/content/2008/01/container-bg.png\', sizingMethod=\'scale\');<br />} \n\n</code></div>\n\n<p>Basically, it’s just stretching the image to fit the area, but since it’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>',NULL,1756,NULL,'2014-01-19 12:59:55','2023-01-22 15:18:32','285600db-410c-4c9b-9d1c-00f223c980c1',1,NULL,NULL,NULL),(251,256,'Weekly Link Round-Up #10',NULL,'<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><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’s probably still going to take a good 3 or 4 years for IE8 to even come out. Plus, what is this “standards mode”? From what I have read, it’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’s pretty cool. Now how about those desktop email applications (I’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’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’t really like it very much either. Especially that stupid clock. Yeah it’s a pretty cool little Flash application, but it’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><p>Stay tuned for <strong>The Ultimate PNG Guide</strong> coming sometime next week.</p>',NULL,1755,NULL,'2014-01-19 13:01:10','2023-01-22 15:18:32','06338c91-e1b1-4937-909d-497e3c4c3200',1,NULL,NULL,NULL),(252,257,'Weekly Link Round-Up #9',NULL,'<p>Yeah, so I didn’t get a chance to post last night because I was at the Wizards game.</p>\n\n<p>I’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><li><a href=\"http://24ways.org/\">24 Ways</a>\n<p>It’s that time of the year again, 24 Ways to Impress Your Friends, already on day 8! If you haven’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…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’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 “sexy”. 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’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’m interested to see the other parts when they come out.</p>\n</li>\n</ul>',NULL,1754,NULL,'2014-01-19 13:01:11','2023-01-22 15:18:32','c3e5f1d5-22b0-409a-a68f-ee8d3a1a0bd1',1,NULL,NULL,NULL),(253,258,'Creating Multiple Sites on a Local Web Server',NULL,'<p>So while I was redesigning my site, I needed somewhere to develop the new design. I didn’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…everything I needed.</p>\n\n\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’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><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 *:80&gt;<br />ServerAdmin webmaster@localhost.trevordavis.dev<br />DocumentRoot \"C:/sites/trevordavis.dev/webpages\"<br />ServerName localhost.trevordavis.dev<br />&lt;/VirtualHost&gt;<br /><br />&lt;VirtualHost *:80&gt;<br />ServerAdmin webmaster@localhost.trevordavis.redesign<br />DocumentRoot \"C:/sites/trevordavis.redesign/webpages\"<br />ServerName localhost.trevordavis.redesign<br />&lt;/VirtualHost&gt; \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 localhost<br />127.0.0.1 localhost.trevordavis.dev<br />127.0.0.1 localhost.trevordavis.redesign \n\n</code></div></li>\n</ol><h3 class=\"replaceHeadline\">That’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’s great.</p>\n\n<p>Let me know if you have any questions.</p>',NULL,1753,NULL,'2014-01-19 13:01:11','2023-01-22 15:18:32','5f2886fe-2dcc-4cac-a3d8-57a462d6019a',1,NULL,NULL,NULL),(254,259,'Version 2 Redesign Launched',NULL,'<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’s not going to happen tonight.</p>\n\n<p>The goal for this redesign was to simplify. I’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\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’m pulling in my <a href=\"http://twitter.com/davist11/\">Twitter status</a> next to my logo. I’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>',NULL,1752,NULL,'2014-01-19 13:01:11','2023-01-22 15:18:32','ce64add8-4fa5-496a-a19e-c040e504cb97',1,NULL,NULL,NULL),(255,260,'Weekly Link Round-Up #8',NULL,'<p>I’ve been busy for the last week or so working on the new site design. Hopefully I’m going to launch it within the next few days…maybe even tonight. I would say the theme for this redesign is simplicity. I’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…I promise.</p>\n\n<ul><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’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’s article</a> last week, but I like Roger’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=\"//trevor-davis.com/blog/web/html-emails-who-needs-them.php\">I hate HTML emails</a>. Let’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’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’ inboxes.</p>\n</li>\n\n<li><a href=\"http://www.adaptivepath.com/blog/2007/11/29/doesnt-remind-me-of-anything/\">Doesn’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>',NULL,1751,NULL,'2014-01-19 13:01:11','2023-01-22 15:18:32','835fda40-6eb8-4881-92b3-1fa9469cb276',1,NULL,NULL,NULL),(256,261,'Weekly Link Round-Up #7',NULL,'<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<ul><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’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=\"https://html.com/blog/23-scientific-website-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 “Advanced Search” is not a good term. I like what Roger suggests: “Refined” and “Enhanced”.</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’t really design for the web if you don’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>',NULL,1750,NULL,'2014-01-19 13:01:11','2023-01-22 15:18:32','1e1d410b-b62b-4db7-bebf-7901122d4ddc',1,NULL,NULL,NULL),(257,262,'Upgraded to Wordpress 2.3.1',NULL,'<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’m not sure what exactly happened, but I’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’t get it to work. Hopefully, it’s something I can address soon.</p>',NULL,1749,NULL,'2014-01-19 13:01:11','2023-01-22 15:18:32','74e23cb1-326f-4d09-98f6-639db085323e',1,NULL,NULL,NULL),(258,263,'Weekly Link Round-Up #6',NULL,'<p>Finally, it’s the weekend. I had to work basically all last weekend, and it’s great to finally get a break. Got a pretty good collection of links for this week.</p>\n\n<ul><li><a href=\"http://www.digital-web.com/articles/redesigning_ebay_registration/\">Better Web Forms: Redesigning eBay’s Registration</a>\n<p>Garrett Dimon gives a really good breakdown of a redesign of eBay’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 ‘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><p>I <strong>promise</strong> a real post is coming soon! Along with a redesign…sometime soon.</p>',NULL,1748,NULL,'2014-01-19 13:01:11','2023-01-22 15:18:32','44e1155b-d58f-48b4-9ed7-63441509de04',1,NULL,NULL,NULL),(259,264,'Weekly Link Round-Up #5',NULL,'<p>Wow, I’m pathetic. I can hardly keep up with one blog post a week. I’m just so busy at work right now. I stopped reading my RSS feeds on Wednesday, so this is really like half-a-week’s worth of links.</p>\n\n<p>I’ve got a big project for work launching on Sunday, so hopefully I will have more free time. I’m also in the process of working up a new design for the site. I don’t necessarily feel like the current design is not good; I just feel the need for a change.</p>\n\n\n<ul><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’t have GPS), but you don’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’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>',NULL,1747,NULL,'2014-01-19 13:01:11','2023-01-22 15:18:32','2409ebbd-bf7a-4c3b-88bf-e52451bbe783',1,NULL,NULL,NULL),(260,265,'Weekly Link Round-Up #4',NULL,'<p>I didn’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><li><a href=\"http://www.webdesignerwall.com/tutorials/advanced-css-menu/\">Advanced CSS Menu</a>\n<p>This is a continuation from last week’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’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>',NULL,1746,NULL,'2014-01-19 13:01:11','2023-01-22 15:18:32','a945ef3e-1a83-4f9b-865e-e5e7ce6cfa4c',1,NULL,NULL,NULL),(261,266,'Weekly Link Round-Up #3',NULL,'<p>Yeah, so I missed last week. What can I say, I was moving into my condo! I almost missed this week too…I got my wisdom teeth pulled this morning. But hey, I felt basically back to normal by about 2 this afternoon. So here’s what I found interesting this week.</p>\n\n<ul><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’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 “super” powers. The illustrations are amazing…I’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>',NULL,1745,NULL,'2014-01-19 13:01:11','2023-01-22 15:18:32','5f70d2b9-fbaa-4f2c-9b6c-64ab01785e6d',1,NULL,NULL,NULL),(262,267,'Weekly Link Round-Up #2',NULL,'<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’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><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.trevor-davis.com/\">http://www.trevor-davis.com</a>. Yeah you get redirected to <a href=\"//trevor-davis.com/\">http://trevor-davis.com</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’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…when they are done well. I instantly though of <a href=\"http://mtv.com/\">MTV\'s</a> “new” 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…</p></li>\n</ul>',NULL,1744,NULL,'2014-01-19 13:01:11','2023-01-22 15:18:32','d7ebe9bd-55a5-4ae0-ab69-959869ebf1dd',1,NULL,NULL,NULL),(263,268,'Weekly Link Round-Up',NULL,'<p>So my plan is to eventually get some sort of consistency and post a weekly round-up of good links. I haven’t decided exactly which day I will publish it, but I am thinking about trying to do it on Friday’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><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’m so jealous. This is quite a star-studded line-up:</p>\n  <ul><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></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=\"//trevor-davis.com/blog/web/my-web-wish-list.php\">#4 on my birthday web wish list this year</a>.</p>\n </li>\n</ul><p>I guess that’s it from last week. Hopefully I will start to do this on some sort of consistent basis.</p>',NULL,1743,NULL,'2014-01-19 13:01:11','2023-01-22 15:18:32','f71a218a-1746-496d-a952-4bddb55aa798',1,NULL,NULL,NULL),(264,269,'I’ve Gone Pink',NULL,'<p>In support of Breast Care Awareness Month, <a href=\"http://pinkforoctober.org/\">I’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>',NULL,1742,NULL,'2014-01-19 13:01:11','2023-01-22 15:18:32','9f8470a5-1a62-4bed-9b77-44fc44efc518',1,NULL,NULL,NULL),(265,270,'Save Friday Night Lights',NULL,'<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’ 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\n\n<p>It is hard to put into words how amazing the show is. I’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’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 ‘Lights’ on</a>. I think he sums it up perfectly:</p>\n\n<blockquote>\n<p>“Don’t you owe it to yourself to rent Season 1, Disc 1, and try the first four episodes? Look, if FNL doesn’t make it, we’re just going to get more Grey’s Anatomy spin-offs, a CSI for every city and 20 Deal or No Deal clones. Hollywood doesn’t like to take chances, and it doesn’t like to fail; it figures out what works, bleeds it to death, then flips the corpse and bleeds it some more.”</p>\n</blockquote>\n\n<p>Isn’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’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’t buy many TV shows for that low of a price. If that doesn’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’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’t be disappointed.</p>',NULL,1741,NULL,'2014-01-19 13:01:11','2023-01-22 15:18:32','3431be88-cc30-4f5f-8519-247a4e18c824',1,NULL,NULL,NULL),(266,271,'Ajax Forms with jQuery',NULL,'<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\n\n<h2 class=\"replaceHeadline\">Start with a Regular Form</h2>\n\n<p>First, I am going to build a <a href=\"//assets.trevor-davis.com/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><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><p>Ok, so this form is pretty simple, and doesn’t take much time to submit since it’s so short, but let’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=\"//assets.trevor-davis.com/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(){<br /> //Script goes here<br />}); \n\n</code></div>\n\n<p>OK, easy enough. Now, let’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(){<br /> $(\"#submit\").click(function(){<br />  return false;<br /> });<br />}); \n\n</code></div>\n\n<p>First things first, I’m going to hide anything with the class of error if it’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(){<br /> $(\"#submit\").click(function(){<br />  $(\".error\").hide();<br />  var hasError = false;<br />  var emailReg = /^([w-.]+@([w-]+.)+[w-]{2,4})?$/;<br /><br />  return false;<br /> });<br />}); \n\n</code></div>\n\n\n<h3 class=\"replaceHeadline\">Error Checking</h3>\n\n<p>Now that we’ve got the beginning of the script setup, we need to do the error checking. So first, let’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(){<br /> $(\"#submit\").click(function(){<br />  $(\".error\").hide();<br />  var hasError = false;<br />  var emailReg = /^([w-.]+@([w-]+.)+[w-]{2,4})?$/;<br /><br />  var emailToVal = $(\"#emailTo\").val();<br />  if(emailToVal == \'\') {<br />   $(\"#emailTo\").after(\'&lt;span class=\"error\"&gt;You forgot to enter the email address to send to&lt;/span&gt;\');<br />   hasError = true;<br />  } else if(!emailReg.test(emailToVal)) {<br />   $(\"#emailTo\").after(\'&lt;span class=\"error\"&gt;Enter a valid email address to send to.&lt;/span&gt;\');<br />   hasError = true;<br />  }<br /><br />  return false;<br /> });<br />}); \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><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><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(){<br /> $(\"#submit\").click(function(){<br />  $(\".error\").hide();<br />  var hasError = false;<br />  var emailReg = /^([w-.]+@([w-]+.)+[w-]{2,4})?$/;<br /><br />  var emailToVal = $(\"#emailTo\").val();<br />  if(emailToVal == \'\') {<br />   $(\"#emailTo\").after(\'&lt;span class=\"error\"&gt;You forgot to enter the email address to send to.&lt;/span&gt;\');<br />   hasError = true;<br />  } else if(!emailReg.test(emailToVal)) {<br />   $(\"#emailTo\").after(\'&lt;span class=\"error\"&gt;Enter a valid email address to send to.&lt;/span&gt;\');<br />   hasError = true;<br />  }<br /><br />  var emailFromVal = $(\"#emailFrom\").val();<br />  if(emailFromVal == \'\') {<br />   $(\"#emailFrom\").after(\'&lt;span class=\"error\"&gt;You forgot to enter the email address to send from.&lt;/span&gt;\');<br />   hasError = true;<br />  } else if(!emailReg.test(emailFromVal)) {<br />   $(\"#emailFrom\").after(\'&lt;span class=\"error\"&gt;Enter a valid email address to send from.&lt;/span&gt;\');<br />   hasError = true;<br />  }<br /><br />  var subjectVal = $(\"#subject\").val();<br />  if(subjectVal == \'\') {<br />   $(\"#subject\").after(\'&lt;span class=\"error\"&gt;You forgot to enter the subject.&lt;/span&gt;\');<br />   hasError = true;<br />  }<br /><br />  var messageVal = $(\"#message\").val();<br />  if(messageVal == \'\') {<br />   $(\"#message\").after(\'&lt;span class=\"error\"&gt;You forgot to enter the message.&lt;/span&gt;\');<br />   hasError = true;<br />  }<br /><br />  return false;<br /> });<br />}); \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’m not going to include the whole script here, just because it’s getting long, but you can <a href=\"//assets.trevor-davis.com/uploads/images/content/2008/01/submitform.js\">see the whole script</a>.</p>\n\n<p>So, there are no errors. Let’s remove the button from the form, and add in a loading graphic:</p>\n\n<div class=\"codeblock\"><code>\nif(hasError == false) {<br /> $(this).hide();<br /> $(\"#sendEmail li.buttons\").append(\'&lt;img src=\"/images/template/loading.gif\" alt=\"Loading\" id=\"loading\" /&gt;\');<br />} \n\n</code></div>\n\n<h3 class=\"replaceHeadline\">Submit the POST Request</h3>\n<p>Ok, now let’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’s hide the form and display a success message:</p>\n\n<div class=\"codeblock\"><code>\n$.post(\"/play/jqueryajaxform/sendEmail.php\",<br />   { emailTo: emailToVal, emailFrom: emailFromVal, subject: subjectVal, message: messageVal },<br />    function(data){<br />  $(\"#sendEmail\").slideUp(\"normal\", function() {<br /><br />   $(\"#sendEmail\").before(\'&lt;h1&gt;Success&lt;/h1&gt;&lt;p&gt;Your email was sent.&lt;/p&gt;\');<br />  });<br /> }<br />); \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…</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><li><a href=\"//assets.trevor-davis.com/uploads/images/content/2008/01/index.phps\">index.php</a></li>\n<li><a href=\"//assets.trevor-davis.com/uploads/images/content/2008/01/verify.phps\">verify.php</a></li>\n<li><a href=\"//assets.trevor-davis.com/uploads/images/content/2008/01/sendemail.phps\">sendEmail.php</a></li>\n<li><a href=\"//assets.trevor-davis.com/uploads/images/content/2008/01/thanks.phps\">thanks.php</a></li>\n</ul>',NULL,1740,NULL,'2014-01-19 13:01:11','2023-01-22 15:18:32','7e37dd1f-64d0-40fc-acc1-0d710d891e8c',1,NULL,NULL,1),(267,272,'It’s Still a Stinking WYSIWYG',NULL,'<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’s CSS Sculptor</a>. It’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\n\n<h2 class=\"replaceHeadline\">Why Do I Feel This Way?</h2>\n\n<p>While it’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—the simplest example of that being a condensation of 0 0 0 0 down to just plain 0.”</p></blockquote>\n\n<p>Wow, if that’s not going to confuse the hell out of people who don’t know CSS, I don’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’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’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 “</a><a href=\"http://fadtastic.net/2007/08/24/will-software-ever-make-us-redundant/\">Will Software Ever Make Us Redundant?</a>”.</p>\n\n<p>I think this post really got me thinking about how even though the WYSIWYGs are getting better, I don’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’t know Mr. Meyer, with all due respect, it kinda feels like you sold out on us.</p>',NULL,1739,NULL,'2014-01-19 13:01:11','2023-01-22 15:18:32','85168c2a-3206-4750-b056-203e6f9bfbe7',1,NULL,NULL,NULL),(268,273,'Stop Using Helvetica',NULL,'<p>Ok, so that’s a little extreme. I’m going to preface this post a little bit. I love Helvetica as a font. It’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’ll go back to my original post…</p>\n\n\n\n<p>Why do designers decide to use Helvetica for their site’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’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=\"//assets.trevor-davis.com/play/helvetica/\">example page to show the various Helvetica sizes from 10px – 20px</a>.</p>\n\n<h2 class=\"replaceHeadline\">Helvetica on Windows</h2>\n<a href=\"//assets.trevor-davis.com/uploads/images/content/2008/01/screenshot-windows.gif\" title=\"Helvetica on Windows Screenshot\"><img src=\"//assets.trevor-davis.com/uploads/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=\"//assets.trevor-davis.com/uploads/images/content/2008/01/screenshot-mac.gif\" title=\"Helvetica on Mac Screenshot\"><img src=\"//assets.trevor-davis.com/uploads/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>',NULL,1738,NULL,'2014-01-19 13:01:11','2023-01-22 15:18:32','704ce9fa-fe0e-4c32-88ef-24f6b995aa18',1,NULL,NULL,NULL),(269,274,'Calculating Font Sizes',NULL,'<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’s Soft Serve Technique</a>, but then you have to make a special case for IE6. (Hopefully it won’t be too much longer that we have to worry about IE6).</p>\n\n\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’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><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><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’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’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, body, div, h1, h2, h3, h4, h5, h6, ul, ol, dl, li, dt, dd, p, blockquote, pre, form, th, td {<br /> margin: 0;<br /> padding: 0;<br />} \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, ul, ol, dl, blockquote { margin-bottom: 1em; } \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’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’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 {<br /> font-size: 1.5em;<br /> margin-bottom: 0.667em;<br />} \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=\"//assets.trevor-davis.com/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=\"//assets.trevor-davis.com/play/fontsize/example-2/\">the example page with custom margins</a> looks much better.</p>\n\n<p>Anyone else have other methods?</p>',NULL,1737,NULL,'2014-01-19 13:01:11','2023-01-22 15:18:32','9b07a24a-34cb-4444-8c54-a27bada7b71a',1,NULL,NULL,NULL),(270,275,'Creating a Dynamic Google Sitemap',NULL,'<p>My site has a <a href=\"//trevor-davis.com/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\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: text/xml;charset=iso-8859-1\");<br />echo \'&lt;?xml version=\"1.0\" encoding=\"UTF-8\"?&gt;<br />&lt;urlset xmlns=\"http://www.sitemaps.org/schemas/sitemap/0.9\"&gt;\';<br />require_once(\'DB CONNECTION GOES HERE\'); //This is where I would require my DB connection file \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’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 = \"SELECT cat_ID, category_nicename<br />  FROM wp_categories<br />  ORDER BY category_nicename\";<br />$result = @mysql_query($query); \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 = mysql_fetch_array($result, MYSQL_ASSOC)) {<br /> echo \'&lt;url&gt;<br />  &lt;loc&gt;//trevor-davis.com/blog/\' . $row[\'category_nicename\'] . \'/&lt;/loc&gt;<br />  &lt;changefreq&gt;weekly&lt;/changefreq&gt;<br />      &lt;/url&gt;\'; \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 = \"SELECT p.post_name, DATE_FORMAT(p.post_date, \'%Y-%m-%d\') AS createdOn<br />  FROM wp_posts AS p, wp_categories AS cat, wp_post2cat AS pc<br />  WHERE p.ID = pc.post_id AND pc.category_id = \" . $row[\'cat_ID\'] . \"<br />  GROUP BY p.ID<br />  ORDER BY p.ID DESC\";<br />$artResult = @mysql_query($artQuery); \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 = mysql_fetch_array($artResult, MYSQL_ASSOC)) {<br /> echo \'&lt;url&gt;<br />  &lt;loc&gt;//trevor-davis.com/blog/\' . $row[\'category_nicename\'] . \'/\'. $artRow[\'post_name\'] . \'.php&lt;/loc&gt;<br />  &lt;lastmod&gt;\'.$artRow[\'createdOn\'].\'&lt;/lastmod&gt;<br />  &lt;changefreq&gt;weekly&lt;/changefreq&gt;<br />      &lt;/url&gt;\';<br />} \n\n</code></div>\n\n<p>To finish it off, we just close everything up:</p>\n\n<div class=\"codeblock\"><code>\n}<br />echo\'&lt;/urlset&gt;\';?&gt; \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: text/xml;charset=iso-8859-1\");<br />echo \'&lt;?xml version=\"1.0\" encoding=\"UTF-8\"?&gt;<br />&lt;urlset xmlns=\"http://www.sitemaps.org/schemas/sitemap/0.9\"&gt;\';<br />require_once(\'DB CONNECTION GOES HERE\'); //This is where I would require my DB connection file<br /><br />$query = \"SELECT cat_ID, category_nicename<br />  FROM wp_categories<br />  ORDER BY category_nicename\";<br />$result = @mysql_query($query);<br /><br /><br />while($row = mysql_fetch_array($result, MYSQL_ASSOC)) {<br /><br /> echo \'&lt;url&gt;<br />  &lt;loc&gt;//trevor-davis.com/blog/\' . $row[\'category_nicename\'] . \'/&lt;/loc&gt;<br />  &lt;changefreq&gt;weekly&lt;/changefreq&gt;<br />      &lt;/url&gt;\';<br /><br /> $artQuery = \"SELECT p.post_name, DATE_FORMAT(p.post_date, \'%Y-%m-%d\') AS createdOn<br />   FROM wp_posts AS p, wp_categories AS cat, wp_post2cat AS pc<br />   WHERE p.ID = pc.post_id AND pc.category_id = \" . $row[\'cat_ID\'] . \"<br />   GROUP BY p.ID<br />   ORDER BY p.ID DESC\";<br /><br /> $artResult = @mysql_query($artQuery);<br /><br /> while($artRow = mysql_fetch_array($artResult, MYSQL_ASSOC)) {<br /><br />  echo \'&lt;url&gt;<br />   &lt;loc&gt;//trevor-davis.com/blog/\' . $row[\'category_nicename\'] . \'/\'. $artRow[\'post_name\'] . \'.php&lt;/loc&gt;<br />   &lt;lastmod&gt;\'.$artRow[\'createdOn\'].\'&lt;/lastmod&gt;<br />   &lt;changefreq&gt;weekly&lt;/changefreq&gt;<br />        &lt;/url&gt;\';<br /> }<br />}<br />echo\'&lt;/urlset&gt;\';<br />?&gt; \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=\"//trevor-davis.com/sitemap.xml\">//trevor-davis.com/sitemap.xml</a>. Open up your .htaccess file, or create one if you don’t have one. Then add the following:</p>\n\n<div class=\"codeblock\"><code>\nRewriteEngine on<br />RewriteRule sitemap.xml googleSitemap.php \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’s file structure to the sitemap as well. You can see how I did this in <a href=\"//trevor-davis.com/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…</h3>\n<p>Let me know if you can think of any way to improve this.</p>',NULL,1736,NULL,'2014-01-19 13:01:11','2023-01-22 15:18:32','fff2f5f4-0038-441b-9830-8352cfd28010',1,NULL,NULL,NULL),(271,276,'Centering Absolutely Positioned Items',NULL,'<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’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’t work like that.</p>\n\n\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 {<br /> height: 300px;<br /> left: 50%;<br /> position: absolute;<br /> top: 20px;<br /> width: 500px;<br />} \n\n</code></div>\n\n<p>Ok, so now we’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 {<br /> height: 300px;<br /> left: 50%;<br /> margin-left: -250px;<br /> position: absolute;<br /> top: 20px;<br /> width: 500px;<br />} \n\n</code></div>\n\n\n<p>You can see that <a href=\"//assets.trevor-davis.com/play/absolutePositionCenter/\">the absolutely positioned item is now centered</a>.</p>\n\n<h2>In Case You Didn’t Notice…</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>',NULL,1735,NULL,'2014-01-19 13:01:11','2023-01-22 15:18:33','fad5de1b-9a1d-4f0f-ac15-7cc0cb0895a5',1,NULL,NULL,NULL),(272,277,'Switched to Wordpress',NULL,'<p>I have been using Movable Type for a little while now, but I just wasn’t that happy with it. I didn’t really have any problems, but it just wasn’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’t worry about the broken stuff, it will be fixed soon enough.</p>',NULL,1734,NULL,'2014-01-19 13:01:12','2023-01-22 15:18:33','d0a7a48b-6628-4355-acdb-54dd03c9d88e',1,NULL,NULL,NULL),(273,278,'Dynamic Bread Crumbs',NULL,'<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’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\n<h2 class=\"replaceHeadline\">The Code</h2>\n\n<p>File: breadcrumbs.php</p>\n\n<div class=\"codeblock\"><code>\n&lt;?php require(\'buildbreadcrumbs.php\'); ?&gt;<br /><br />&lt;ol id=\"breadCrumbs\"&gt;<br /> &lt;li class=\"first\"&gt;&lt;a href=\"/\"&gt;Home&lt;/a&gt;&lt;/li&gt;<br />&lt;?php<br /> $breadCrumbs = $_SERVER[\'REQUEST_URI\'];<br /> if($breadCrumbs != \'\') {<br />  $crumbUrl = \'/\';<br />  $toks = split(\'/\', $breadCrumbs);<br />  for($i = 1; $i &lt; count($toks) - 1; $i++) {<br />   $crumbUrl .= $toks[$i] . \'/\';<br />   if($breadCrumbMapping[$toks[$i]] != NULL) {<br />    echo \'&lt;li&gt;&lt;a href=\"\'.$crumbUrl.\'\"&gt;\'.$breadCrumbMapping[$toks[$i]].\'&lt;/a&gt;&lt;/li&gt;\';<br />   } else {<br />    echo \'&lt;li&gt;&lt;a href=\"\'.$crumbUrl.\'\"&gt;\'.$toks[$i].\'&lt;/a&gt;&lt;/li&gt;\';<br />   }<br />  }<br />  echo \'&lt;li class=\"last\"&gt;\'.$pageTitle.\'&lt;/li&gt;\';<br /> }<br />?&gt;<br />&lt;/ol&gt; \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’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 = Array();<br /><br />/*Folders to be mapped*/<br />$breadCrumbMapping[\'f1\'] = \"Folder 1\";<br />$breadCrumbMapping[\'f2\'] = \"Folder 2\";<br />$breadCrumbMapping[\'f3\'] = \"Folder 3\";<br />?&gt; \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 “pretty” name (Folder 1, Folder 2, Folder 3). If you don’t assign a pretty name to a folder, it will just display the folder name instead.</p>\n\n<p>I made <a href=\"//assets.trevor-davis.com/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><li><a href=\"//assets.trevor-davis.com/uploads/images/content/2008/01/breadcrumbs.phps\">breadcrumbs.php</a></li>\n<li><a href=\"//assets.trevor-davis.com/uploads/images/content/2008/01/buildbreadcrumbs.phps\">buildbreadcrumbs.php</a></li>\n</ul>',NULL,1733,NULL,'2014-01-19 13:01:12','2023-01-22 15:18:33','07693561-529d-4f80-b378-2950d8f09142',1,NULL,NULL,NULL),(274,279,'HTML Emails. Who needs them?',NULL,'<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’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\n<p>In my opinion, it shouldn’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’s a nightmare. Some support CSS. Some strip it all out. Some support inline CSS. It’s awful. My favorite quote from the article, when he is discussing CSS support:</p>\n\n<blockquote>\n<p>… 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’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’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’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’t have a problem with.</p>',NULL,1732,NULL,'2014-01-19 13:01:12','2023-01-22 15:18:33','a77d7561-e5fb-45f8-add4-2b8e49ca87c9',1,NULL,NULL,NULL),(275,280,'Book Review — Designing Interactions',NULL,'<p>Designing Interactions is quite a book. If you are interested in technology, it’s definitely a must read. While it’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\n<h2>Summary</h2>\n<p>The book has interviews with “42 designers who shaped our interactions with technology”. 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’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>',NULL,1731,NULL,'2014-01-19 13:01:12','2023-01-22 15:18:33','e20b9e86-8ccf-431b-b7a6-91dd85bca1fe',1,NULL,NULL,NULL),(276,281,'My Web Wish List',NULL,'<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\n<h2>The List</h2>\n\n<p>In no particular order, this is what I want:</p>\n\n<ol><li>For everyone running IE6 to be upgraded by automatic updates</li>\n<li>For the term “Web 2.0” 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><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 “Web 2.0” to never be heard again</h3>\n\n<p>I’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 “Web 2.0”</a>.</p>\n\n<p>“Web 2.0” is meaningless, and it needs to be vanished from everyone’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’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’t we upload fonts to our servers and have the browsers download them when needed? It can’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’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>',NULL,1730,NULL,'2014-01-19 13:01:12','2023-01-22 15:18:33','f261b87e-1789-4208-b7aa-76afd32de1b2',1,NULL,NULL,NULL),(277,282,'Sure, Let’s Destroy Accessibility',NULL,'<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\">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\n<p>Sure, I think there are some instances where it’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’s in IE6 and Min-width using <a href=\"//trevor-davis.com/blog/tutorial/using-dean-edwards-ie7-script.php\">Dean Edwards’ IE7 Script</a> and a more accessible <a href=\"//trevor-davis.com/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>',NULL,1729,NULL,'2014-01-19 13:01:12','2023-01-22 15:18:33','adb609fb-dd50-4625-8fbd-c21848f7be95',1,NULL,NULL,NULL),(278,283,'How Do You Start Web Development?',NULL,'<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\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’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><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>',NULL,1728,NULL,'2014-01-19 13:01:12','2023-01-22 15:18:33','14dded56-0918-448f-a441-6593d2df94e5',1,NULL,NULL,NULL),(279,284,'Using Dean Edwards’ IE7 Script',NULL,'<div class=\"update\">\n<h2 class=\"replaceHeadline\">Update</h2>\n<p>Dean Edwards has updated his scripts. I have written a <a href=\"//trevor-davis.com/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\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;!--[if lt IE 7]&gt;<br />&lt;script src=\"/ie7/ie7-standard-p.js\" type=\"text/javascript\"&gt;&lt;/script&gt;<br />&lt;![endif]--&gt; \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><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><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=\"//trevor-davis.com/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>',NULL,1727,NULL,'2014-01-19 13:01:12','2023-01-22 15:18:33','6ae89632-ff11-49b9-aaf3-0f470d2a8684',1,NULL,NULL,NULL),(280,285,'Spider-Man 3',NULL,'<p>I was ordered by my fellow “Front-End Developer”, <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\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>',NULL,1726,NULL,'2014-01-19 13:01:12','2023-01-22 15:18:33','dcaf0105-8416-4333-8f37-8c777e0f22b7',1,NULL,NULL,NULL),(281,286,'Improved Navigation Image Replacement',NULL,'<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\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 id=\"nav\"&gt;<br /> &lt;li&gt;&lt;a href=\"#\"&gt;Text to Cover Here&lt;/a&gt;&lt;/li&gt;<br /> &lt;li&gt;&lt;a href=\"#\"&gt;Text to Cover Here&lt;/a&gt;&lt;/li&gt;<br /> &lt;li&gt;&lt;a href=\"#\"&gt;Text to Cover Here&lt;/a&gt;&lt;/li&gt;<br /> &lt;li&gt;&lt;a href=\"#\"&gt;Text to Cover Here&lt;/a&gt;&lt;/li&gt;<br />&lt;/ul&gt; \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 id=\"nav\"&gt;<br /> &lt;li&gt;&lt;a href=\"#\"&gt;Text to Cover Here&lt;span&gt;&lt;/span&gt;&lt;/a&gt;&lt;/li&gt;<br /> &lt;li&gt;&lt;a href=\"#\"&gt;Text to Cover Here&lt;span&gt;&lt;/span&gt;&lt;/a&gt;&lt;/li&gt;<br /> &lt;li&gt;&lt;a href=\"#\"&gt;Text to Cover Here&lt;span&gt;&lt;/span&gt;&lt;/a&gt;&lt;/li&gt;<br /> &lt;li&gt;&lt;a href=\"#\"&gt;Text to Cover Here&lt;span&gt;&lt;/span&gt;&lt;/a&gt;&lt;/li&gt;<br />&lt;/ul&gt; \n\n</code></div>\n\n<h2 class=\"replaceHeadline\">Let’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 li a {<br /> background: #FFFF99;<br /> display: block;<br /> height: 30px;<br /> padding: 0 5px;<br /> width: 115px;<br />} \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’t show through in the final example), and I gave them all the same width. Not a likely situation, but I didn’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’t think that really causes much of a problem in most cases.</p>\n\n<div class=\"codeblock\"><code>\nul#nav li a span {<br /> background: url(/images/content/2008/01/nav.gif) no-repeat 0 -30px;<br /> cursor: pointer;<br /> display: block;<br /> height: 30px;<br /> left: 0;<br /> position: absolute;<br /> top: 0;<br /> width: 125px;<br />} \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’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 li a:hover span { background: url(/images/content/2008/01/nav.gif) no-repeat 0 0; } \n\n</code></div>\n\n<p><strong>Voilà!</strong> It works like a charm. <a href=\"//assets.trevor-davis.com/play/imagereplacement/\">Check out the example</a>.</p>\n\n<h3 class=\"replaceHeadline\">But…</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’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 li a:hover { background: 0 0; } \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’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 li a {<br /> background: #FFFF99;<br /> display: block;<br /> height: 30px;<br /> overflow: hidden; /*Added for bulletproofing*/<br /> padding: 0 5px;<br /> position: relative;<br /> width: 115px;<br />} \n\n</code></div>\n\n<p><a href=\"//assets.trevor-davis.com/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>',NULL,1725,NULL,'2014-01-19 13:01:12','2023-01-22 15:18:33','d2be4f7b-f63c-4900-ba58-70b27f5f735e',1,NULL,NULL,NULL),(282,287,'Improved JavaScript Striping',NULL,'<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\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 class=\"stripe something\"&gt;<br /> &lt;li&gt;This is an odd row.&lt;/li&gt;<br /> &lt;li&gt;This is an even row.&lt;/li&gt;<br /> &lt;li&gt;This is an odd row.&lt;/li&gt;<br /> &lt;li&gt;This is an even row.&lt;/li&gt;<br /> &lt;li&gt;This is an odd row.&lt;/li&gt;<br /> &lt;li&gt;This is an even row.&lt;/li&gt;<br />&lt;/ul&gt; \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() {<br />  striper(\'ul\',\'stripe\',\'li\',\'odd,even\');<br />}); \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 ((parentElementClass == null)||(currentParent.className == parentElementClass)) { \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=\"//assets.trevor-davis.com/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 pattern = new RegExp(\"(^| )\" + parentElementClass + \"( |$)\");<br />if ((parentElementClass == null)||(currentParent.className.match(pattern))) { \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=\"//assets.trevor-davis.com/play/striper/\">little demo of the improved splintered striper</a>.</p>\n\n<p>I’m sure there is another way to do that easier, so feel free to let me know if there is.</p>',NULL,1724,NULL,'2014-01-19 13:01:12','2023-01-22 15:18:33','1dd7d142-122b-4bc7-a18e-cb5c07b4bf05',1,NULL,NULL,NULL),(283,288,'I Took The Web Design Survey, 2007',NULL,'<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=\"\" 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\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&amp;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>',NULL,1723,NULL,'2014-01-19 13:01:12','2023-01-22 15:18:33','828739b6-a32f-43f5-a564-0ab4e9abaf3f',1,NULL,NULL,NULL),(284,289,'CSS Attribute Selectors Explained',NULL,'<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=\"//trevor-davis.com/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\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><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><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 { text-decoration: underline; }<br /><br />a[href] {<br /> border-bottom: 1px dotted #999;<br /> text-decoration: none;<br />} \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’t want them on radio buttons. So you add the following CSS:</p>\n\n<div class=\"codeblock\"><code>\ninput { border: 1px solid green; }<br /><br />input[type=\"radio\"] { border: none; } \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 { border: 1px solid green; }<br /><br />input[type~=\"radio checkbox submit\"] { border: none; } \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[href*=\"google\"] {<br /> background: url(/images/googleIcon.gif) no-repeat 100% 50%;<br /> padding-right: 25px;<br />} \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’s add an external link to all links that start with http</p>\n\n<div class=\"codeblock\"><code>\na[href^=\"http\"] {<br /> background: url(/images/external.gif) no-repeat 100% 50%;<br /> padding-right: 25px;<br />} \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[href$=\".pdf\"], a[href$=\".doc\"], a[href$=\".xls\"] {<br /> background-position: 100% 50%;<br /> background-repeat: no-repeat;<br /> padding-right: 19px;<br />}<br /><br />a[href$=\".pdf\"] { background-image: url(/images/pdf.gif); }<br />a[href$=\".doc\"] { background-image: url(/images/doc.gif); }<br />a[href$=\".xls\"] { background-image: url(/images/xls.gif); } \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’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>',NULL,1722,NULL,'2014-01-19 13:01:12','2023-01-22 15:18:33','06560b53-5b3d-4f57-a0db-084bc5bbff3d',1,NULL,NULL,NULL),(285,290,'An Event Apart Boston Summary',NULL,'<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’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\n<h2>Eric Meyer — 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’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 — 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><li>Use frequent subheads.</li>\n <li>Chunk text.</li>\n <li>Use 8th grade vocabulary, short declarative sentences</li>\n</ul><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’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 — 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><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><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’t the one updating it. Jason said to embrace the whitespace, which I think is something that is definitely being done in this whole “Web 2.0” 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 “ (<code>&amp;ldquo;</code>) and \' is not the same thing as ’ (<code>&amp;rsquo;</code>). \" and \' are used for feet and inches, while “ and ‘ are used for quotation marks and apostrophes.</p>\n\n<p>Jason’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 — 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><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><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&gt;</code>s, <code>&lt;th&gt;</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 — 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><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><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’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;’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><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><h2>Opening Night Party — 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 — 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’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’ 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 — Web Standards Stole My Truck</h2>\n\n<p><a href=\"http://sidesh0w.com/\">Ethn Marcotte’s</a> talk was a little boring to me, because he didn’t really discuss many new things to me. He did make a few interesting points though.</p>\n\n<ul><li>While embracing standards may seen hard (to non-standardistas), the benefits are huge\n  <ul><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></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><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 — 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’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’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’s browser pathways to success were:</p>\n\n<ol><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><h2>Eric Meyer — State of CSS in IE 7 World</h2>\n\n<p>Ok everyone, let’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’t in IE 6, but I will point out one cool thing.</p>\n\n<h3>Attribute Selectors</h3>\n\n<p><a href=\"//trevor-davis.com/blog/tutorial/css-attribute-selectors-explained.php\">Attribute selectors</a> are awesome. That’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’s the long and short of it. It’s awesome.</p>\n\n<p>Eric also encouraged everyone to make IE 6 more like IE 7 with <a href=\"//trevor-davis.com/blog/tutorial/using-dean-edwards-ie7-script.php\">Dean Edwards’ 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 — 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’t just create a design. When responding to criticism, figure out what they mean by it. Why don’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><li>Push back.</li>\n <li>Look into it.</li>\n <li>Agree with them. Surprise!</li>\n</ol><h2>That’s It!</h2>\n<p>I must say; it was awesome. I can’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>',NULL,1721,NULL,'2014-01-19 13:01:12','2023-01-22 15:18:33','e7ee2ddd-8da3-48c4-9894-32f78a5be08f',1,NULL,NULL,NULL),(286,291,'An Event Apart Boston',NULL,'<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\n<p>I think I am really looking forward to the more design-centered events like:</p>\n\n<ul><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><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>',NULL,1720,NULL,'2014-01-19 13:01:12','2023-01-22 15:18:33','a253f1da-7f67-4539-a139-b60fa74a562c',1,NULL,NULL,NULL),(287,292,'Problems with Commenting',NULL,'<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\n<div class=\"codeblock\"><code>\nRewriteEngine on<br />RewriteCond %{HTTP_HOST} ^www.trevor-davis.com$ [NC]<br />RewriteRule ^(.*)$ //trevor-davis.com/$1 [R=301,L] \n\n</code></div>\n\n<p>That means whenever anyone tried to go to <a href=\"/\">www.trevor-davis.com</a>, they were redirected to <a href=\"/\">trevor-davis.com</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.trevor-davis.com</a>. For some reason, this broke the comments. I changed it to <a href=\"/\">trevor-davis.com</a>, and my quest to abolish the www continues.</p>',NULL,1719,NULL,'2014-01-19 13:01:12','2023-01-22 15:18:33','1ff3fa37-78fa-456c-9474-b0259c19be11',1,NULL,NULL,NULL),(288,293,'The Rise of Flash Again',NULL,'<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\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>',NULL,1718,NULL,'2014-01-19 13:01:12','2023-01-22 15:18:33','55f3c547-7361-4110-8435-ea70ee258419',1,NULL,NULL,NULL),(289,294,'Learning from Mistakes',NULL,'<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\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 — 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><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><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 » 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>',NULL,1717,NULL,'2014-01-19 13:01:13','2023-01-22 15:18:33','d048423f-f4f6-4176-9e56-20853284feff',1,NULL,NULL,NULL),(290,295,'Web Design / Development Process',NULL,'<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&gt;</code> and <code>&lt;span&gt;</code> tags? Do you have way too many classes?</p>\n\n<p>Maybe you should reconsider your process.</p>\n\n<p>The process that I have found effective, is exactly what I am doing with this site:</p>\n\n<ol><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><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&gt;</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>',NULL,1716,NULL,'2014-01-19 13:01:13','2023-01-22 15:18:33','94c12904-b2e8-4f9c-bc07-88821542f990',1,NULL,NULL,NULL),(291,296,'Web Standards. What don’t they get?',NULL,'<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\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><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><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>',NULL,1715,NULL,'2014-01-19 13:01:13','2023-01-22 15:18:33','756506bd-6e28-4c24-81dc-78d7912de1d4',1,NULL,NULL,NULL),(292,297,'CSS Forms',NULL,'<p>Everyone hates forms.</p>\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<p>Since every other web developer/designer has their own method, I thought I would share my two cents.</p>\n<p>When thinking through all of the HTML elements to find something that makes sense for forms, there are many options.</p>\n<ul><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<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<p>Let\'s start with some un-styled markup:</p>\n<div class=\"codeblock\"><code>\n&lt;form action=\"#\" method=\"post\" name=\"sendToFriendForm\" id=\"sendToFriendForm\"&gt;\n &lt;dl class=\"forms\"&gt;\n  &lt;dt&gt;&lt;label for=\"name\"&gt;Your Name:&lt;/label&gt;&lt;/dt&gt;\n  &lt;dd&gt;&lt;input name=\"name\" id=\"name\" type=\"text\" /&gt;&lt;/dd&gt;\n\n  &lt;dt&gt;&lt;label for=\"senderEmail\"&gt;Your Email Address: &lt;span class=\"required\"&gt;*&lt;/span&gt;&lt;/label&gt;&lt;/dt&gt;\n  &lt;dd&gt;&lt;input name=\"senderEmail\" id=\"senderEmail\" type=\"text\" /&gt;&lt;/dd&gt;\n\n  &lt;dt&gt;&lt;label for=\"recipientEmail\"&gt;Friend\'s Email Address: &lt;span class=\"required\"&gt;*&lt;/span&gt;&lt;/label&gt;&lt;/dt&gt;\n  &lt;dd&gt;&lt;input name=\"recipientEmail\" id=\"recipientEmail\" type=\"text\" /&gt;&lt;/dd&gt;\n  &lt;dd class=\"help\"&gt;Use commas to separate multiple email addresses.&lt;/dd&gt;\n\n  &lt;dt&gt;&lt;label for=\"sex\"&gt;Sex&lt;/label&gt;&lt;/dt&gt;\n  &lt;dd class=\"radio\"&gt;&lt;input name=\"sex\" id=\"male\" type=\"radio\" /&gt; &lt;label for=\"male\"&gt;Male&lt;/label&gt; &lt;input name=\"sex\" id=\"female\" type=\"radio\" /&gt; &lt;label for=\"female\"&gt;Female&lt;/label&gt;&lt;/dd&gt;\n  &lt;dt&gt;&lt;label for=\"message\"&gt;Message:&lt;/label&gt;&lt;/dt&gt;\n  &lt;dd&gt;&lt;textarea name=\"message\" id=\"message\"&gt;&lt;/textarea&gt;&lt;/dd&gt;\n &lt;/dl&gt;\n &lt;button type=\"submit\"&gt;Submit »&lt;/button&gt;\n&lt;/form&gt; \n\n</code></div>\n<p>I have created the page so you can see <a href=\"//assets.trevor-davis.com/play/cssforms/\">the output</a>. Even un-styled, this form doesn\'t even look bad. But lets add some style:</p>\n<div class=\"codeblock\"><code>\nform {\n  margin: 0;\n  padding: 0;\n }\n\n dl.forms {\n  float: left;\n  width: 100%;\n }\n\n dl.forms dt {\n  margin: 0;\n  padding: 10px 0 0 0;\n  clear: left;\n  float: left;\n  width: 175px;\n }\n\n dl.forms label { font-weight: bold; }\n\n dl.forms dd {\n  margin: 0;\n  padding: 10px 0 0 0;\n }\n\n dl.forms dd.help {\n  clear: left;\n  padding-top: 2px;\n  font-size: 90%;\n  color: #999;\n }\n\n dl.forms input, dl.forms textarea { width: 300px; }\n\n dl.forms dd.radio input { width: auto; }\n\n dl.forms textarea { height: 150px; }\n\n .required {\n  color: #FF0000;\n  font-weight: bold;\n } \n\n</code></div>\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=\"//assets.trevor-davis.com/play/cssforms/final/\">created the styled page</a> for you to see.</p>\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<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<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>',NULL,1714,NULL,'2014-01-19 13:01:13','2023-01-22 15:18:33','7b2445d5-d193-42fb-95a5-87934029f931',1,NULL,NULL,NULL),(293,298,'Orbcomm',NULL,'<p>Building this site gave me the opportunity to build a site with <a href=\"http://buildwithcraft.com/\">Craft</a>; something I had been itching to use on a project for some time. My role in the project was to build the front-end of the site, configure Craft, and then integrate the two. In building this site, I also created three Craft plugins: <a href=\"https://github.com/davist11/craft-bust\">Bust</a>, <a href=\"https://github.com/davist11/craft-listing-section\">Listing Section</a>, and <a href=\"https://github.com/davist11/craft-reroute\">Reroute</a>.</p>',NULL,0,NULL,'2014-01-22 04:03:13','2022-01-18 03:22:01','0c7b0231-d091-42d9-b633-514f4ffa25b2',1,NULL,NULL,NULL),(294,299,'Craft',NULL,NULL,NULL,0,NULL,'2014-01-22 04:03:13','2018-02-15 21:01:40','aeea2bd5-d691-46e0-a8b3-865deb3550f7',1,NULL,NULL,NULL),(295,300,'CSS',NULL,NULL,NULL,0,NULL,'2014-01-22 04:03:13','2018-02-15 21:01:40','0cfe4253-934a-4f2f-8975-b50f7412d6ff',1,NULL,NULL,NULL),(296,301,'HTML',NULL,NULL,NULL,0,NULL,'2014-01-22 04:03:13','2018-02-15 21:01:40','049d9aee-dc4e-4ab1-a2d4-450efd3aa91e',1,NULL,NULL,NULL),(297,302,'JavaScript',NULL,NULL,NULL,0,NULL,'2014-01-22 04:03:13','2018-02-15 21:01:40','b509b41d-f2e3-421f-8980-b8c405450389',1,NULL,NULL,NULL),(298,303,'Lansinoh',NULL,'<p>I sure didn’t know it before I started the project, but Lansinoh is one of the leaders in the breastfeeding industry. Since mobile accounted for 47% of visits, building a site to adapt to any device was a must. My role in the project was to build the front-end of the site and integrate with ExpressionEngine, which included ecommerce, user submission forms, and a store finder. This was probably the most complex ExpressionEngine site that I have built to date.</p>',NULL,0,NULL,'2014-01-22 04:03:13','2022-01-18 18:17:34','969990ea-80b8-4135-aa50-7a56aaf06fff',1,NULL,NULL,NULL),(299,304,'ExpressionEngine',NULL,NULL,NULL,0,NULL,'2014-01-22 04:03:13','2018-02-15 21:01:40','889643c6-f9af-4e09-b68f-4fe03b4cc10c',1,NULL,NULL,NULL),(300,305,'NEA',NULL,'<p>NEA is a leading a leading global venture capital firm who came to Viget to redesign their website. We rebuilt the site to adapt to whatever size screen it is being viewed on, and my role was to build the front-end of the site and integrate into ExpressionEngine.</p>','http://www.nea.com/',0,NULL,'2014-01-22 04:03:13','2020-03-18 20:03:33','415f9882-f2d0-4649-a8c1-a4ddb2e971db',1,NULL,NULL,NULL),(301,306,'World Wildlife Fund',NULL,'<p>I had been itching to finally utilize responsive design on a client project, and the World Wildlife Fund presented that opportunity. The site is built on Ruby on Rails, and my role was to build the site with HTML, CSS, JavaScript, and Ruby on Rails views.</p>','http://worldwildlife.org',0,NULL,'2014-01-22 04:03:13','2020-03-18 20:03:33','243d12f1-f668-4c73-b3c8-09afddeb4339',1,NULL,NULL,NULL),(302,307,'AIGA Design Continuum Fund',NULL,'<p>The AIGA Design Continuum Fund is a yearly scholarship awarded to a local design student. We took on this project as pro-bono to support the local design community, and my role was to build the front-end of the site and to integrate into ExpressionEngine.</p>',NULL,0,NULL,'2014-01-22 04:03:13','2022-01-18 03:23:33','f40b04ff-61f3-4941-9b1b-29958e935b87',1,NULL,NULL,NULL),(303,308,'Carr Workplaces',NULL,'<p>We (Viget) had originally built Carr’s site many years ago. We had the opportunity to redesign it and implement a new CMS. My role in the project was to help a little with building some pieces of the front-end, but my main role was to implement the site in ExpressionEngine, which included custom add-on development.</p>',NULL,0,NULL,'2014-01-22 04:03:13','2022-01-18 03:21:46','36a2072b-67a9-4708-8431-943bacc73246',1,NULL,NULL,NULL),(304,309,'Viget',NULL,'<p>After four years and a few failed attempts, we finally made it a point to redo the <strong>Viget</strong> website. Our old design served us well, but it was time to step it up to the next level. I was able to step in and implement the ExpressionEngine piece of the site, which included creating custom add-ons as well.</p>','http://viget.com/',0,NULL,'2014-01-22 04:03:13','2020-03-18 20:03:35','dd249820-7dae-4d31-8ca7-a80bfeb34979',1,NULL,NULL,NULL),(305,310,'NMS',NULL,'<p>New Media Strategies partnered with us (Viget) to recreate their web presence. They were looking for something new and different. My role on the project was to build the front-end, which included some light canvas work, and to implement the site into ExpressionEngine, which included custom add-on development.</p>',NULL,0,NULL,'2014-01-22 04:03:14','2022-01-18 03:21:32','de8f3b80-d985-4337-bbb8-2d75900dc7b9',1,NULL,NULL,NULL),(306,311,'Ultimat Vodka',NULL,'<p>Ultimat Vodka wanted a different type of experience for their site, so I utilized AJAX to give the site a more streamlined experience. I also had to create an age blocker so that only people 18 years and older were allowed to access the site. My role in the project was to build the front-end and to complete the ExpressionEngine integration.</p>',NULL,0,'84871419','2014-01-22 04:03:14','2020-03-18 20:03:32','befb95da-b43e-4019-a62e-0de469740d5b',1,NULL,NULL,NULL),(307,312,'Rumble Games',NULL,'<p>Rumble is an online gaming company that needed some help from us to build their marketing site. My role was to build the front-end with HTML, CSS, &amp; JS, and then pass the build-out onto another Front-End Developer to finish the ExpressionEngine integration.</p>','https://www.rumblegames.com/',0,NULL,'2014-01-22 04:03:14','2020-03-18 20:03:32','d67fa719-7a91-4e50-89ef-ab79931b5263',1,NULL,NULL,NULL),(308,313,'Team Viget',NULL,'<p>Our <a href=\"http://v1.teamviget.com/\">existing Team Viget site</a> was out of date and was mainly focused on bringing new designers to Viget, and we decided that it was time to make it reflect <em>all</em> of Viget. My role in the project was to build it with HTML &amp; CSS, and to code the JavaScript interactions. Then, I implemented into ExpressionEngine so others could easily add stories. This site works best in Webkit browsers because we were able to take advantage of a lot of experimental properties.</p>',NULL,0,'84871420','2014-01-22 04:03:14','2022-01-18 03:21:21','dd6b0e8a-4eec-42ed-b4b2-c9308d55e0d2',1,NULL,NULL,NULL),(309,314,'PUMA',NULL,'<p>After building many smaller sub-sites, we (Viget) were finally able to tackle puma.com itself. This required uniting many of those sub-sites we had already build into new standardized templates that would be uniquely “skinned” for each “category” site. My role included collaborating very closely with UX &amp; Design, HTML, CSS, and JavaScript.</p>',NULL,0,NULL,'2014-01-22 04:03:14','2020-03-18 20:03:32','4e72da33-25d5-43ed-bf77-bd77f055f356',1,NULL,NULL,NULL),(310,315,'PUMA Golf',NULL,'<p>To continue our work with PUMA, I built the Golf site. This was similar to some of the other PUMA sites that I have built, except for a few new pieces here and there. My role in this project was to build-out the many pages and to implement the JavaScript interactions throughout the site. I also worked with our developers to integrate with our custom Ruby on Rails code.</p>',NULL,0,NULL,'2014-01-22 04:03:14','2020-03-18 20:03:31','32c07e2e-7d7a-4c1a-b513-baef31433b5c',1,NULL,NULL,NULL),(311,316,'PUMA Clever Little Bag',NULL,'<p>PUMA spent a lot of time and money developing a new shoebox that would reduce its environmental impact. The result was a cool concept of a Clever Little Bag. We built a special page to help introduce the bag to the world. My role in this project was to build-out the site and add in the JavaScript functionality.</p>\n<p>The one really fun feature was the slide deck of the “big plans” that can be seen all the way at the end of the page. I also built a cross browser <a href=\"http://www.viget.com/inspire/custom-file-inputs-with-a-bit-of-jquery/\">custom file input</a> for users to upload their photos.</p>',NULL,0,'84871523','2014-01-22 04:03:14','2020-03-18 20:03:31','4bbc6fa1-f713-45c0-a212-ecf8893f37ec',1,NULL,NULL,NULL),(312,317,'PUMA Time',NULL,'<p>To continue in our engagement with PUMA, we redesigned and relaunched the PUMA time website. I didn’t even know that PUMA sold watches until we started this site! My role in this project was to build-out the many pages and to implement the JavaScript interactions throughout the site. I also worked with our developers to integrate with our custom Ruby on Rails code.</p>',NULL,0,NULL,'2014-01-22 04:03:14','2020-03-18 20:03:31','552c4919-6aa0-4bcc-9ebc-61a50884e691',1,NULL,NULL,NULL),(313,318,'The Bolt Collection',NULL,'<p>To announce the launch of Bolt’s new clothing line, we launched a one-page site that tracks Bolt’s progress in races throughout the summer. My role in this project was to build-out the site with HTML &amp; CSS and add in a lot of the JavaScript functionality. I also worked with our developers to integrate with out custom Ruby on Rails system.</p>\n<p>Building this site really made me want to buy some of the gear because it looks awesome.</p>',NULL,0,NULL,'2014-01-22 04:03:14','2020-03-18 20:03:31','6391f482-3eb2-4567-a807-64ef7bdd29d7',1,NULL,NULL,NULL),(314,319,'PUMA City',NULL,'<p>In honor of the 2010 World Cup, we built a special one-page site for the PUMA City store in New York. The PUMA City store is a temporary store that is setup with shipping containers. My role in this project was to build-out the site and add in a lot of JavaScript functionality. I also had to work with my developers to integrate with the Ruby on Rails code.</p>\n<p>This was the longest page I have ever built!</p>',NULL,0,NULL,'2014-01-22 04:03:14','2020-03-18 20:03:31','4b67ee09-0a19-4db1-83ed-3d1f73fe931d',1,NULL,NULL,NULL),(315,320,'Easter Seals UCP North Carolina',NULL,'<p>For my first project while working for Viget Labs, I built the Easter Seals UCP North Carolina website. My role in the project was to build-out the design and implement the site using ExpressionEngine. I also added in some JavaScript functionality on the homepage and on the individual service pages.</p>',NULL,0,NULL,'2014-01-22 04:03:14','2022-01-18 03:21:07','9aa93c75-3f3b-4bcd-8e83-3f40765266a8',1,NULL,NULL,NULL),(316,321,'PUMA Running',NULL,'<p>The PUMA Running site was the first in a long engagement with PUMA. My role in this project was to build-out the many pages and to implement a lot of JavaScript interaction throughout the site. I also worked with our developers to integrate with our custom Ruby on Rails code.</p>',NULL,0,NULL,'2014-01-22 04:03:14','2020-03-18 20:03:30','28bcb98f-6339-402e-903d-0da3490c6cee',1,NULL,NULL,NULL),(317,322,'aiga-featured',NULL,NULL,NULL,0,NULL,'2014-01-22 04:21:46','2022-01-15 13:26:32','eadc25e2-1417-4c64-9c54-6d0d9a2d6935',1,NULL,NULL,NULL),(318,323,'aigaapply',NULL,NULL,NULL,0,NULL,'2014-01-22 04:21:46','2022-01-15 13:26:32','1d3ad377-8a02-4f96-bf2a-cafd31aa9c13',1,NULL,NULL,NULL),(319,324,'aigahome',NULL,NULL,NULL,0,NULL,'2014-01-22 04:21:46','2022-01-15 13:26:32','697cc4ec-2a90-444e-89a5-dbdc7be5f583',1,NULL,NULL,NULL),(320,325,'aigahomeflyout',NULL,NULL,NULL,0,NULL,'2014-01-22 04:21:46','2022-01-15 13:26:32','40be6c56-7088-4d7b-ada3-5a6bb6fa91ce',1,NULL,NULL,NULL),(321,326,'aiganews',NULL,NULL,NULL,0,NULL,'2014-01-22 04:21:47','2022-01-15 13:26:32','09c4bb1f-e40e-4a99-8a8a-41c99c302183',1,NULL,NULL,NULL),(322,327,'athletes-hub',NULL,NULL,NULL,0,NULL,'2014-01-22 04:21:47','2022-01-15 13:26:32','8fd454b8-2c11-4425-96e9-548c55afca19',1,NULL,NULL,NULL),(323,328,'athletes-individual',NULL,NULL,NULL,0,NULL,'2014-01-22 04:21:47','2022-01-15 13:26:32','99f4171e-e311-44b9-b963-308ef45cedbb',1,NULL,NULL,NULL),(324,329,'beniga-featured',NULL,NULL,NULL,0,NULL,'2014-01-22 04:21:47','2022-01-15 13:26:32','43da1597-d500-40e3-8624-45d08e18582d',1,NULL,NULL,NULL),(325,330,'beniga-gallery',NULL,NULL,NULL,0,NULL,'2014-01-22 04:21:47','2022-01-15 13:26:32','d45a9337-120a-4ca1-ad20-4f1a746966ed',1,NULL,NULL,NULL),(326,331,'beniga-home',NULL,NULL,NULL,0,NULL,'2014-01-22 04:21:48','2022-01-15 13:26:32','d89bf1f7-d838-4f9a-b370-28061bb8603d',1,NULL,NULL,NULL),(327,332,'beniga-store',NULL,NULL,NULL,0,NULL,'2014-01-22 04:21:48','2022-01-15 13:26:33','0783bb0e-51ee-46eb-bfd6-47ad51b8a004',1,NULL,NULL,NULL),(328,333,'beniga-videos',NULL,NULL,NULL,0,NULL,'2014-01-22 04:21:48','2022-01-15 13:26:33','b24ba2cc-bc77-428d-aaf3-a10cef4de971',1,NULL,NULL,NULL),(329,334,'beniga',NULL,NULL,NULL,0,NULL,'2014-01-22 04:21:48','2022-01-15 13:26:33','9ab70e29-e996-4c41-9699-00922d84d234',1,NULL,NULL,NULL),(330,335,'bio',NULL,NULL,NULL,0,NULL,'2014-01-22 04:21:48','2022-01-15 13:26:33','aad729a3-d668-450d-a7a1-71e85a2713c7',1,NULL,NULL,NULL),(331,336,'bolt-collection-bottom',NULL,NULL,NULL,0,NULL,'2014-01-22 04:21:49','2022-01-15 13:26:33','948070f0-867c-4749-b4fb-11736dacbbd0',1,NULL,NULL,NULL),(332,337,'bolt-collection-featured',NULL,NULL,NULL,0,NULL,'2014-01-22 04:21:49','2022-01-15 13:26:33','4bbbb5cf-6b7d-4ff4-b1d9-5c148001f213',1,NULL,NULL,NULL),(333,338,'bolt-collection-full',NULL,NULL,NULL,0,NULL,'2014-01-22 04:21:49','2022-01-15 13:26:33','52c6bffd-9095-4767-84f6-19e2a184f280',1,NULL,NULL,NULL),(334,339,'bolt-collection-top',NULL,NULL,NULL,0,NULL,'2014-01-22 04:21:49','2022-01-15 13:26:33','d9097c96-40b4-43fa-aa99-148b2a6d3486',1,NULL,NULL,NULL),(335,340,'bolt-collection',NULL,NULL,NULL,0,NULL,'2014-01-22 04:21:49','2022-01-15 13:26:33','5641ec29-5d81-47c6-b573-4d655106bf76',1,NULL,NULL,NULL),(336,341,'carr-featured',NULL,NULL,NULL,0,NULL,'2014-01-22 04:21:50','2022-01-15 13:26:32','3f917328-7bd6-4569-aa25-52259de28a8e',1,NULL,NULL,NULL),(337,342,'carrcenter',NULL,NULL,NULL,0,NULL,'2014-01-22 04:21:50','2022-01-15 13:26:31','6ac3ed1c-2a49-4a03-a49d-1e94d7222b66',1,NULL,NULL,NULL),(338,343,'carrhome',NULL,NULL,NULL,0,NULL,'2014-01-22 04:21:50','2022-01-15 13:26:30','e35b5650-bcea-47d5-943b-724635d7ad53',1,NULL,NULL,NULL),(339,344,'carrlocations',NULL,NULL,NULL,0,NULL,'2014-01-22 04:21:50','2022-01-15 13:26:31','54d8d01e-523f-4b62-81d4-2e59a2274fff',1,NULL,NULL,NULL),(340,345,'carrregion',NULL,NULL,NULL,0,NULL,'2014-01-22 04:21:51','2022-01-15 13:26:29','44328bd1-c974-4f7c-abf2-5b69f17bd9e6',1,NULL,NULL,NULL),(341,346,'carrservicedoffices',NULL,NULL,NULL,0,NULL,'2014-01-22 04:21:51','2022-01-15 13:26:29','cc68e062-e048-4d06-9907-6ac2a22a9b93',1,NULL,NULL,NULL),(342,347,'carrvoconfig',NULL,NULL,NULL,0,NULL,'2014-01-22 04:21:51','2022-01-15 13:26:30','24ef3994-c8b4-4ab6-9ad5-6f9de605b85f',1,NULL,NULL,NULL),(343,348,'ds411',NULL,NULL,NULL,0,NULL,'2014-01-22 04:21:51','2022-01-15 13:26:30','ca743b42-83f1-48e3-b4b1-6fac2d7cc82e',1,NULL,NULL,NULL),(344,349,'easter-seals-featured',NULL,NULL,NULL,0,NULL,'2014-01-22 04:21:51','2022-01-15 13:26:30','f9986a2c-5c08-4a78-a837-2c073db5a59c',1,NULL,NULL,NULL),(345,350,'easter-seals-nc',NULL,NULL,NULL,0,NULL,'2014-01-22 04:21:52','2022-01-15 13:26:30','a5a0435f-5f8d-4729-8638-7cfb89a4afba',1,NULL,NULL,NULL),(346,351,'giving-get-involved',NULL,NULL,NULL,0,NULL,'2014-01-22 04:21:52','2022-01-15 13:26:30','5333353e-4900-4120-a783-ad9078239cdc',1,NULL,NULL,NULL),(347,352,'home-small-nav-open',NULL,NULL,NULL,0,NULL,'2014-01-22 04:21:52','2022-01-15 13:26:31','c82d33ea-951e-44ca-8a88-7a82eb106e8b',1,NULL,NULL,NULL),(348,353,'home-small',NULL,NULL,NULL,0,NULL,'2014-01-22 04:21:52','2022-01-15 13:26:31','de3ac761-2039-40d2-b235-5fda60331a91',1,NULL,NULL,NULL),(349,354,'home',NULL,NULL,NULL,0,NULL,'2014-01-22 04:21:52','2022-01-15 13:26:31','7ed18b32-5c93-46b1-b948-9ed983f38638',1,NULL,NULL,NULL),(350,355,'home',NULL,NULL,NULL,0,NULL,'2014-01-22 04:21:53','2022-01-15 13:26:31','639887c8-dae2-431f-8eb5-6f3dc9433c35',1,NULL,NULL,NULL),(351,356,'home1',NULL,NULL,NULL,0,NULL,'2014-01-22 04:21:53','2022-01-15 13:26:31','4963faad-940d-49b4-b844-ff5234c9cc45',1,NULL,NULL,NULL),(352,357,'home 1',NULL,NULL,NULL,0,NULL,'2014-01-22 04:21:53','2022-01-15 13:26:31','07773fab-cc34-49d8-8ed0-dfa17f579ba8',1,NULL,NULL,NULL),(353,358,'home 2',NULL,NULL,NULL,0,NULL,'2014-01-22 04:21:53','2022-01-15 13:26:33','f8fb1997-8d30-4851-a61b-b0213e153886',1,NULL,NULL,NULL),(354,359,'home 3',NULL,NULL,NULL,0,NULL,'2014-01-22 04:21:53','2022-01-15 13:26:32','e014d883-ee11-4843-aa39-d4554dd7ac3a',1,NULL,NULL,NULL),(355,360,'home 4',NULL,NULL,NULL,0,NULL,'2014-01-22 04:21:54','2022-01-15 13:26:34','3714823a-1986-4135-9bdc-26b300bbbb06',1,NULL,NULL,NULL),(356,361,'home 5',NULL,NULL,NULL,0,NULL,'2014-01-22 04:21:54','2022-01-15 13:26:36','80d2116b-8b7e-45cd-98d0-ee37323ecd01',1,NULL,NULL,NULL),(357,362,'home 6',NULL,NULL,NULL,0,NULL,'2014-01-22 04:21:54','2022-01-15 13:26:36','b395d984-058d-4614-b3d8-d7d84bcf66e7',1,NULL,NULL,NULL),(358,363,'ibew',NULL,NULL,NULL,0,NULL,'2014-01-22 04:21:54','2022-01-15 13:26:36','5b2a2386-e491-4d15-81f0-9c0439bc31bf',1,NULL,NULL,NULL),(359,364,'individual-service',NULL,NULL,NULL,0,NULL,'2014-01-22 04:21:54','2022-01-15 13:26:36','0cef17d0-6596-4b19-b321-5300ab73630d',1,NULL,NULL,NULL),(360,365,'lansinoh-cart',NULL,NULL,NULL,0,NULL,'2014-01-22 04:21:55','2022-01-15 13:26:37','d582ce44-5f79-4c1f-973b-61b70632778f',1,NULL,NULL,NULL),(361,366,'lansinoh-contact-us',NULL,NULL,NULL,0,NULL,'2014-01-22 04:21:55','2022-01-15 13:26:37','23286088-1e2b-4a81-8cb1-0513864aaa7f',1,NULL,NULL,NULL),(362,367,'lansinoh-featured',NULL,NULL,NULL,0,NULL,'2014-01-22 04:21:56','2022-01-15 13:26:37','b0e3c5fd-0747-4c0a-b917-ae4a44bd668e',1,NULL,NULL,NULL),(363,368,'lansinoh-home-small-nav-open',NULL,NULL,NULL,0,NULL,'2014-01-22 04:21:56','2022-01-15 13:26:37','e4a41acb-fea6-4a10-b93a-41d5b6d56845',1,NULL,NULL,NULL),(364,369,'lansinoh-home-small',NULL,NULL,NULL,0,NULL,'2014-01-22 04:21:56','2022-01-15 13:26:37','f6e66141-2bfb-45c4-bce6-87c112667f3a',1,NULL,NULL,NULL),(365,370,'lansinoh-home',NULL,NULL,NULL,0,NULL,'2014-01-22 04:21:56','2022-01-15 13:26:36','8f84a1d7-2e22-48df-9ac6-ea55a1893164',1,NULL,NULL,NULL),(366,371,'lansinoh-moms-stories',NULL,NULL,NULL,0,NULL,'2014-01-22 04:21:57','2022-01-15 13:26:37','d1d4b788-1422-4b88-ba2b-453a4b868dc9',1,NULL,NULL,NULL),(367,372,'lansinoh-product-category-small',NULL,NULL,NULL,0,NULL,'2014-01-22 04:21:57','2022-01-15 13:26:37','4ae8aa19-480e-4802-a4ba-2702be860ead',1,NULL,NULL,NULL),(368,373,'lansinoh-product-category',NULL,NULL,NULL,0,NULL,'2014-01-22 04:21:57','2022-01-15 13:26:37','86ea0a50-c275-4c40-b2fa-eff15f6796b2',1,NULL,NULL,NULL),(369,374,'lansinoh-product-show',NULL,NULL,NULL,0,NULL,'2014-01-22 04:21:57','2022-01-15 13:26:38','34b9250e-c001-40e8-a3cc-71bd48c0e3fd',1,NULL,NULL,NULL),(370,375,'lansinoh-where-to-buy',NULL,NULL,NULL,0,NULL,'2014-01-22 04:21:57','2022-01-15 13:26:38','dfa4daa3-5b29-40e3-a634-f407df233522',1,NULL,NULL,NULL),(371,376,'media-hub',NULL,NULL,NULL,0,NULL,'2014-01-22 04:21:58','2022-01-15 13:26:38','9cdc6836-c3fd-47e4-871b-26f0d880b252',1,NULL,NULL,NULL),(372,377,'national-tree',NULL,NULL,NULL,0,NULL,'2014-01-22 04:21:58','2022-01-15 13:26:38','acc51393-ce54-4920-b446-fb2482fb0c92',1,NULL,NULL,NULL),(373,378,'nea-bio',NULL,NULL,NULL,0,NULL,'2014-01-22 04:21:58','2022-01-15 13:26:37','d46dbff1-ca02-4845-8648-ba5855056f2f',1,NULL,NULL,NULL),(374,379,'nea-featured',NULL,NULL,NULL,0,NULL,'2014-01-22 04:21:58','2022-01-15 13:26:36','ca0cc3cd-9b4b-4a3d-a7b1-3e5da2c381ef',1,NULL,NULL,NULL),(375,380,'nea-featured',NULL,NULL,NULL,0,NULL,'2014-01-22 04:21:59','2022-01-15 13:26:35','11cd043f-f6a4-48d7-a63f-8039306d6d51',1,NULL,NULL,NULL),(376,381,'nea-home-small-nav-open',NULL,NULL,NULL,0,NULL,'2014-01-22 04:21:59','2022-01-15 13:26:36','d5784c9d-1fe3-4ae8-a1e5-e5daef38f0a4',1,NULL,NULL,NULL),(377,382,'nea-home-small',NULL,NULL,NULL,0,NULL,'2014-01-22 04:21:59','2022-01-15 13:26:34','61805bd1-89f1-45a7-aee3-37f19a915df1',1,NULL,NULL,NULL),(378,383,'nea-home',NULL,NULL,NULL,0,NULL,'2014-01-22 04:21:59','2022-01-15 13:26:34','4f808d3f-bf69-4e07-a611-8074f1cd355d',1,NULL,NULL,NULL),(379,384,'nea-portfolio-small',NULL,NULL,NULL,0,NULL,'2014-01-22 04:21:59','2022-01-15 13:26:34','c48171a6-aa2c-4968-abdd-c542131df3c5',1,NULL,NULL,NULL),(380,385,'nea-team',NULL,NULL,NULL,0,NULL,'2014-01-22 04:22:00','2022-01-15 13:26:34','a11c44c0-323d-40b8-844a-8e94eb34c881',1,NULL,NULL,NULL),(381,386,'news-blog',NULL,NULL,NULL,0,NULL,'2014-01-22 04:22:00','2022-01-15 13:26:34','72177140-13d5-4b92-beb8-a85d8dbb3207',1,NULL,NULL,NULL),(382,387,'nms-about',NULL,NULL,NULL,0,NULL,'2014-01-22 04:22:00','2022-01-15 13:26:34','58b30647-5fea-46bf-93c0-b313ae2a5bbc',1,NULL,NULL,NULL),(383,388,'nms-case-studies',NULL,NULL,NULL,0,NULL,'2014-01-22 04:22:00','2022-01-15 13:26:35','45cebfe4-bc49-4dd4-8ef0-8ea834042f96',1,NULL,NULL,NULL),(384,389,'nms-clients',NULL,NULL,NULL,0,NULL,'2014-01-22 04:22:01','2022-01-15 13:26:35','5fab1120-cf04-420c-bacb-dcf4bad94161',1,NULL,NULL,NULL),(385,390,'nms-featured',NULL,NULL,NULL,0,NULL,'2014-01-22 04:22:01','2022-01-15 13:26:34','8d53e7c8-1971-4df0-a16c-bd0fb1142d9d',1,NULL,NULL,NULL),(386,391,'nms-home',NULL,NULL,NULL,0,NULL,'2014-01-22 04:22:01','2022-01-15 13:26:35','8964187e-db33-4395-bd7c-eb21ead3ecdb',1,NULL,NULL,NULL),(387,392,'nms-lockout',NULL,NULL,NULL,0,NULL,'2014-01-22 04:22:01','2022-01-15 13:26:35','592b4894-f16b-46c1-ac5c-9c47ce846770',1,NULL,NULL,NULL),(388,393,'nms-ray-ban',NULL,NULL,NULL,0,NULL,'2014-01-22 04:22:01','2022-01-15 13:26:35','dd9a928d-d492-4d3a-8c1f-d0241591597b',1,NULL,NULL,NULL),(389,394,'nms-team-modal',NULL,NULL,NULL,0,NULL,'2014-01-22 04:22:02','2022-01-15 13:26:35','c8da5662-3c35-4232-bb2c-beee92cf03fe',1,NULL,NULL,NULL),(390,395,'nms-team',NULL,NULL,NULL,0,NULL,'2014-01-22 04:22:02','2022-01-15 13:26:35','30cb5854-dcf9-4c8b-b709-c81ef5f6b63b',1,NULL,NULL,NULL),(391,396,'npf-summit',NULL,NULL,NULL,0,NULL,'2014-01-22 04:22:02','2022-01-15 13:26:35','7df45132-c24f-4ec0-a36a-2c3cee27948c',1,NULL,NULL,NULL),(392,397,'orbcomm-contact',NULL,NULL,NULL,0,NULL,'2014-01-22 04:22:02','2022-01-15 13:26:35','923c9ffb-91b0-4ca0-8ca3-789ea4b178df',1,NULL,NULL,NULL),(393,398,'orbcomm-featured',NULL,NULL,NULL,0,NULL,'2014-01-22 04:22:03','2022-01-15 13:26:35','8972f238-2c8b-433f-aaa2-e11aeb108a51',1,NULL,NULL,NULL),(394,399,'orbcomm-home',NULL,NULL,NULL,0,NULL,'2014-01-22 04:22:03','2022-01-15 13:26:35','aeb54f1d-f019-4213-8e7b-cb324e658694',1,NULL,NULL,NULL),(395,400,'orbcomm-modems-chipsets',NULL,NULL,NULL,0,NULL,'2014-01-22 04:22:03','2022-01-15 13:26:36','a8ccefa8-b761-4165-98d5-50b820acb964',1,NULL,NULL,NULL),(396,401,'orbcomm-networks',NULL,NULL,NULL,0,NULL,'2014-01-22 04:22:03','2022-01-15 13:26:36','fc1ecdd5-77fd-40ef-973e-07abefd53780',1,NULL,NULL,NULL),(397,402,'orbcomm-technologies',NULL,NULL,NULL,0,NULL,'2014-01-22 04:22:04','2022-01-15 13:26:34','6de0aee4-799f-4bec-a992-9e13ed8f3b91',1,NULL,NULL,NULL),(398,403,'portfolio-small',NULL,NULL,NULL,0,NULL,'2014-01-22 04:22:04','2022-01-15 13:26:20','71bbba2d-dbdd-457a-848b-e58c2e665052',1,NULL,NULL,NULL),(399,404,'product-individual',NULL,NULL,NULL,0,NULL,'2014-01-22 04:22:04','2022-01-15 13:26:20','c5b17b4c-474b-4be9-b13d-d58a92ec8ab7',1,NULL,NULL,NULL),(400,405,'puma-city-1',NULL,NULL,NULL,0,NULL,'2014-01-22 04:22:04','2022-01-15 13:26:19','c0f75518-cf3f-4024-b05b-3745cb5439eb',1,NULL,NULL,NULL),(401,406,'puma-city-2',NULL,NULL,NULL,0,NULL,'2014-01-22 04:22:04','2022-01-15 13:26:20','3c7ed666-602b-4fc3-9f5e-13f0e3d6226e',1,NULL,NULL,NULL),(402,407,'puma-city-3',NULL,NULL,NULL,0,NULL,'2014-01-22 04:22:05','2022-01-15 13:26:20','544d781d-0f7b-431d-b57f-db2524030bcc',1,NULL,NULL,NULL),(403,408,'puma-city-4',NULL,NULL,NULL,0,NULL,'2014-01-22 04:22:05','2022-01-15 13:26:21','3d77251f-e46c-4b3a-a91f-b45ae4eab282',1,NULL,NULL,NULL),(404,409,'puma-city-featured',NULL,NULL,NULL,0,NULL,'2014-01-22 04:22:05','2022-01-15 13:26:21','c93b1caa-0996-4789-86bd-eb277cd0c6b0',1,NULL,NULL,NULL),(405,410,'puma-city-full',NULL,NULL,NULL,0,NULL,'2014-01-22 04:22:05','2022-01-15 13:26:21','d9970831-89b3-4235-b82d-f159ed08c5e5',1,NULL,NULL,NULL),(406,411,'puma-city',NULL,NULL,NULL,0,NULL,'2014-01-22 04:22:06','2022-01-15 13:26:21','84c06cc7-95ae-4584-8fd7-a61ef3983dca',1,NULL,NULL,NULL),(407,412,'puma-clb-btm',NULL,NULL,NULL,0,NULL,'2014-01-22 04:22:06','2022-01-15 13:26:21','a863f414-12f2-4b6c-83c2-8f474ebd033e',1,NULL,NULL,NULL),(408,413,'puma-clb-featured',NULL,NULL,NULL,0,NULL,'2014-01-22 04:22:06','2022-01-15 13:26:21','3e57b66c-4a1a-45f2-bace-3919dc0f7e51',1,NULL,NULL,NULL),(409,414,'puma-clb-full',NULL,NULL,NULL,0,NULL,'2014-01-22 04:22:06','2022-01-15 13:26:22','66a6d7a2-0242-421e-b0e0-a84d66ab3506',1,NULL,NULL,NULL),(410,415,'puma-clb-middle',NULL,NULL,NULL,0,NULL,'2014-01-22 04:22:06','2022-01-15 13:26:22','f6617627-cc4f-45ba-86f1-d1cc0ea8bf89',1,NULL,NULL,NULL),(411,416,'puma-clb-top',NULL,NULL,NULL,0,NULL,'2014-01-22 04:22:07','2022-01-15 13:26:22','96b7753a-9f6c-4a16-9651-624268390694',1,NULL,NULL,NULL),(412,417,'puma-clb',NULL,NULL,NULL,0,NULL,'2014-01-22 04:22:07','2022-01-15 13:26:20','9013fe30-61c0-4b60-8582-a5b124150c31',1,NULL,NULL,NULL),(413,418,'puma-feature',NULL,NULL,NULL,0,NULL,'2014-01-22 04:22:07','2022-01-15 13:26:18','0b753a0a-d8d4-4ff2-b018-16c9b3584d3b',1,NULL,NULL,NULL),(414,419,'puma-golf-athletes-hub',NULL,NULL,NULL,0,NULL,'2014-01-22 04:22:07','2022-01-15 13:26:17','a541ef9b-9442-40dd-96df-7a58e2e73c47',1,NULL,NULL,NULL),(415,420,'puma-golf-feature',NULL,NULL,NULL,0,NULL,'2014-01-22 04:22:08','2022-01-15 13:26:18','6006167d-621c-427f-a7c8-5e5a755d4124',1,NULL,NULL,NULL),(416,421,'puma-golf-featured',NULL,NULL,NULL,0,NULL,'2014-01-22 04:22:08','2022-01-15 13:26:15','babdfb84-ecdf-4853-9603-94dd95549b63',1,NULL,NULL,NULL),(417,422,'puma-golf-home',NULL,NULL,NULL,0,NULL,'2014-01-22 04:22:08','2022-01-15 13:26:16','958ea916-9706-4a61-8865-f0248cdde636',1,NULL,NULL,NULL),(418,423,'puma-golf-media-indiv',NULL,NULL,NULL,0,NULL,'2014-01-22 04:22:08','2022-01-15 13:26:16','b2269137-6ff3-4114-bc47-1054ab6cbcef',1,NULL,NULL,NULL),(419,424,'puma-golf-tech-style',NULL,NULL,NULL,0,NULL,'2014-01-22 04:22:09','2022-01-15 13:26:16','35d431b9-36fb-44f6-9a70-b8d001a0263d',1,NULL,NULL,NULL),(420,425,'puma-running-featured',NULL,NULL,NULL,0,NULL,'2014-01-22 04:22:09','2022-01-15 13:26:16','50ba6d72-a1bc-4cd9-9d62-071029eb2f76',1,NULL,NULL,NULL),(421,426,'puma-time-feature',NULL,NULL,NULL,0,NULL,'2014-01-22 04:22:09','2022-01-15 13:26:16','6f7ed006-bbc9-4c26-803d-b39482660203',1,NULL,NULL,NULL),(422,427,'puma-time-featured',NULL,NULL,NULL,0,NULL,'2014-01-22 04:22:09','2022-01-15 13:26:16','29c759cb-8d8d-400b-baf9-2368b67c9199',1,NULL,NULL,NULL),(423,428,'puma-time-home',NULL,NULL,NULL,0,NULL,'2014-01-22 04:22:10','2022-01-15 13:26:16','a68a693a-5ac3-4e8e-8127-3961ee59322e',1,NULL,NULL,NULL),(424,429,'puma-time-indiv-product',NULL,NULL,NULL,0,NULL,'2014-01-22 04:22:10','2022-01-15 13:26:16','c164ea15-fc74-49b8-a83d-b2bb6ab9044a',1,NULL,NULL,NULL),(425,430,'puma-time-media-hub-modal',NULL,NULL,NULL,0,NULL,'2014-01-22 04:22:10','2022-01-15 13:26:15','574561d7-ef4f-45ee-8f33-3490a5c8f330',1,NULL,NULL,NULL),(426,431,'puma-time-media-hub',NULL,NULL,NULL,0,NULL,'2014-01-22 04:22:10','2022-01-15 13:26:17','7c3c24b8-5f40-4b22-b59b-762930ee6a16',1,NULL,NULL,NULL),(427,432,'puma-time-product-hub',NULL,NULL,NULL,0,NULL,'2014-01-22 04:22:10','2022-01-15 13:26:17','7a796532-4611-4d69-883d-c0c29dc1bcd2',1,NULL,NULL,NULL),(428,433,'puma',NULL,NULL,NULL,0,NULL,'2014-01-22 04:22:11','2022-01-15 13:26:17','e7f06e1a-5dba-4ce0-b787-023c6b210781',1,NULL,NULL,NULL),(429,434,'pumaathlete',NULL,NULL,NULL,0,NULL,'2014-01-22 04:22:11','2022-01-15 13:26:17','d9312e0c-cca9-41e0-9ae6-3fbbf3ec6a78',1,NULL,NULL,NULL),(430,435,'pumaevents',NULL,NULL,NULL,0,NULL,'2014-01-22 04:22:11','2022-01-15 13:26:17','81067549-596a-4e33-9a28-132166b6820b',1,NULL,NULL,NULL),(431,436,'pumahome',NULL,NULL,NULL,0,NULL,'2014-01-22 04:22:11','2022-01-15 13:26:17','0846b3df-5e17-4b40-8ad5-75e288428690',1,NULL,NULL,NULL),(432,437,'pumamedia',NULL,NULL,NULL,0,NULL,'2014-01-22 04:22:12','2022-01-15 13:26:17','778d7121-70f2-4f42-9f90-4c37dad0505c',1,NULL,NULL,NULL),(433,438,'pumaproduct',NULL,NULL,NULL,0,NULL,'2014-01-22 04:22:12','2022-01-15 13:26:17','9e29ba97-a24e-45c8-8aaf-79b2f58f87dc',1,NULL,NULL,NULL),(434,439,'pumaproducts',NULL,NULL,NULL,0,NULL,'2014-01-22 04:22:12','2022-01-15 13:26:18','46903718-1535-4f35-acc1-64ae0f493b0e',1,NULL,NULL,NULL),(435,440,'rumble-about',NULL,NULL,NULL,0,NULL,'2014-01-22 04:22:12','2022-01-15 13:26:18','9251918c-c032-4403-bdec-43333d14839f',1,NULL,NULL,NULL),(436,441,'rumble-featured',NULL,NULL,NULL,0,NULL,'2014-01-22 04:22:13','2022-01-15 13:26:22','09f5df53-60ea-4d68-90b8-37ba9d93636a',1,NULL,NULL,NULL),(437,442,'rumble-game',NULL,NULL,NULL,0,NULL,'2014-01-22 04:22:13','2022-01-15 13:26:19','208fc771-6379-4194-b8d4-b87c3c2a1797',1,NULL,NULL,NULL),(438,443,'rumble-home',NULL,NULL,NULL,0,NULL,'2014-01-22 04:22:13','2022-01-15 13:26:22','d79869fb-57df-4f61-ba1c-1d5df4e11c20',1,NULL,NULL,NULL),(439,444,'rumble-news',NULL,NULL,NULL,0,NULL,'2014-01-22 04:22:13','2022-01-15 13:26:25','fc105d06-0d21-4342-80fc-17c951b08fc2',1,NULL,NULL,NULL),(440,445,'rumble-publishing',NULL,NULL,NULL,0,NULL,'2014-01-22 04:22:13','2022-01-15 13:26:26','2f1fa683-5c69-4d20-863f-778a671b2cb9',1,NULL,NULL,NULL),(441,446,'rumbleabout',NULL,NULL,NULL,0,NULL,'2014-01-22 04:22:14','2022-01-15 13:26:26','8ad5b5f3-2de7-4646-bead-f419e0c828dd',1,NULL,NULL,NULL),(442,447,'rumblegame',NULL,NULL,NULL,0,NULL,'2014-01-22 04:22:14','2022-01-15 13:26:26','852eff7e-629b-496f-8650-2fa6648fcd5c',1,NULL,NULL,NULL),(443,448,'rumblehome',NULL,NULL,NULL,0,NULL,'2014-01-22 04:22:14','2022-01-15 13:26:26','2bf2d337-da80-4aca-821f-1c3b29aceec6',1,NULL,NULL,NULL),(444,449,'rumblenews',NULL,NULL,NULL,0,NULL,'2014-01-22 04:22:14','2022-01-15 13:26:26','03b7eef9-0a10-487e-adc3-95b7bff3386a',1,NULL,NULL,NULL),(445,450,'rumblepublishing',NULL,NULL,NULL,0,NULL,'2014-01-22 04:22:15','2022-01-15 13:26:26','68f74f07-de66-4072-b1a0-8b83c4384dcc',1,NULL,NULL,NULL),(446,451,'sub-1',NULL,NULL,NULL,0,NULL,'2014-01-22 04:22:15','2022-01-15 13:26:26','33d8a7b2-98a7-4445-9228-035a7cd245c0',1,NULL,NULL,NULL),(447,452,'sub-2',NULL,NULL,NULL,0,NULL,'2014-01-22 04:22:15','2022-01-15 13:26:27','a54a45d8-f5aa-4542-903e-78886f2c45fc',1,NULL,NULL,NULL),(448,453,'sub-speakers',NULL,NULL,NULL,0,NULL,'2014-01-22 04:22:15','2022-01-15 13:26:27','5dfb54fe-1d25-4baf-b488-8fe88c378f45',1,NULL,NULL,NULL),(449,454,'sub',NULL,NULL,NULL,0,NULL,'2014-01-22 04:22:16','2022-01-15 13:26:26','50a60bb6-9929-4ee3-a2e5-c938e3c210bb',1,NULL,NULL,NULL),(450,455,'sub 1',NULL,NULL,NULL,0,NULL,'2014-01-22 04:22:16','2022-01-15 13:26:27','7c4336ed-2308-46e2-bcac-dc9f18b55f5a',1,NULL,NULL,NULL),(451,456,'team-viget-contact',NULL,NULL,NULL,0,NULL,'2014-01-22 04:22:16','2022-01-15 13:26:27','1100dd36-90ef-4ff5-841e-316c1e3f36fc',1,NULL,NULL,NULL),(452,457,'team-viget-feature',NULL,NULL,NULL,0,NULL,'2014-01-22 04:22:17','2022-01-15 13:26:27','96bb9315-f73f-4576-8b64-23939a0c6ed6',1,NULL,NULL,NULL),(453,458,'team-viget-launch',NULL,NULL,NULL,0,NULL,'2014-01-22 04:22:18','2022-01-15 13:26:27','9278aaa8-194b-4898-8fc6-c3a7ff9ed434',1,NULL,NULL,NULL),(454,459,'team-viget-stories',NULL,NULL,NULL,0,NULL,'2014-01-22 04:22:18','2022-01-15 13:26:28','b3f3a960-75e9-498f-a974-84c9e0ef9c1c',1,NULL,NULL,NULL),(455,460,'team-viget-story',NULL,NULL,NULL,0,NULL,'2014-01-22 04:22:19','2022-01-15 13:26:28','f62b8bb4-857e-4c6d-a03c-1f09067f98fc',1,NULL,NULL,NULL),(456,461,'team',NULL,NULL,NULL,0,NULL,'2014-01-22 04:22:20','2022-01-15 13:26:28','00f47b29-b156-4843-b1ec-2933368c1a51',1,NULL,NULL,NULL),(457,462,'temp file puma-golf-home1',NULL,NULL,NULL,0,NULL,'2014-01-22 04:22:20','2022-01-15 13:26:29','48411207-e59a-43bf-9117-c3846d8745a6',1,NULL,NULL,NULL),(458,463,'ultimat-age-gate',NULL,NULL,NULL,0,NULL,'2014-01-22 04:22:21','2022-01-15 13:26:29','d992210f-1f56-4636-9856-243046a5d009',1,NULL,NULL,NULL),(459,464,'ultimat-cocktails',NULL,NULL,NULL,0,NULL,'2014-01-22 04:22:21','2022-01-15 13:26:29','c3cbf0ee-15f7-4d2f-ba7a-9822ad022b4a',1,NULL,NULL,NULL),(460,465,'ultimat-event',NULL,NULL,NULL,0,NULL,'2014-01-22 04:22:21','2022-01-15 13:26:29','99a84040-86a0-4f03-9f7a-3b1936a361e1',1,NULL,NULL,NULL),(461,466,'ultimat-events',NULL,NULL,NULL,0,NULL,'2014-01-22 04:22:21','2022-01-15 13:26:27','eb7b61f3-7bc9-4107-ae90-5a034fb96c0f',1,NULL,NULL,NULL),(462,467,'ultimat-feature',NULL,NULL,NULL,0,NULL,'2014-01-22 04:22:21','2022-01-15 13:26:25','0f7a2637-fa31-4a31-ac81-87caf8aedd2f',1,NULL,NULL,NULL),(463,468,'ultimat-home',NULL,NULL,NULL,0,NULL,'2014-01-22 04:22:22','2022-01-15 13:26:23','11fcc9a2-661c-49f5-aed9-dc73cbab9d59',1,NULL,NULL,NULL),(464,469,'viget-featured',NULL,NULL,NULL,0,NULL,'2014-01-22 04:22:22','2022-01-15 13:26:25','57b6dfcf-5b0b-4038-b535-e84ae53cf872',1,NULL,NULL,NULL),(465,470,'vigetblogs',NULL,NULL,NULL,0,NULL,'2014-01-22 04:22:22','2022-01-15 13:26:22','c8450cb7-95e7-4b43-80dd-fe5112dafc7a',1,NULL,NULL,NULL),(466,471,'vigethome',NULL,NULL,NULL,0,NULL,'2014-01-22 04:22:22','2022-01-15 13:26:22','8cbca497-7441-4ed8-a7a7-a5c403649e05',1,NULL,NULL,NULL),(467,472,'vigetprofile',NULL,NULL,NULL,0,NULL,'2014-01-22 04:22:23','2022-01-15 13:26:22','188509bf-5fe3-452c-8f90-b4987c930229',1,NULL,NULL,NULL),(468,473,'vigetwork',NULL,NULL,NULL,0,NULL,'2014-01-22 04:22:23','2022-01-15 13:26:23','6fe3fc97-e619-4169-bb55-2ba907414107',1,NULL,NULL,NULL),(469,474,'warl',NULL,NULL,NULL,0,NULL,'2014-01-22 04:22:23','2022-01-15 13:26:23','347deb6b-ccf9-4536-8e4d-d7a660925cc6',1,NULL,NULL,NULL),(470,475,'work-featured',NULL,NULL,NULL,0,NULL,'2014-01-22 04:22:23','2022-01-15 13:26:23','24cc961f-6159-471f-b238-2aefa0fd81b0',1,NULL,NULL,NULL),(471,476,'work-image-1',NULL,NULL,NULL,0,NULL,'2014-01-22 04:22:24','2022-01-15 13:26:23','8ab01862-586b-47ea-b238-174b4083b222',1,NULL,NULL,NULL),(472,477,'work-image-2',NULL,NULL,NULL,0,NULL,'2014-01-22 04:22:24','2022-01-15 13:26:22','e946d363-11c9-4d91-98f7-d93464a7b1a7',1,NULL,NULL,NULL),(473,478,'work-image-3',NULL,NULL,NULL,0,NULL,'2014-01-22 04:22:24','2022-01-15 13:26:23','b697a02b-23af-43da-a278-29eff0f54e5d',1,NULL,NULL,NULL),(474,479,'work-image-4',NULL,NULL,NULL,0,NULL,'2014-01-22 04:22:24','2022-01-15 13:26:23','f234497b-49e5-49e9-90e5-d46af1ea7645',1,NULL,NULL,NULL),(475,480,'wwf-featured',NULL,NULL,NULL,0,NULL,'2014-01-22 04:22:24','2022-01-15 13:26:23','e036e532-ced6-4ba7-b7cc-106caa29efab',1,NULL,NULL,NULL),(476,481,'wwf-home',NULL,NULL,NULL,0,NULL,'2014-01-22 04:22:25','2022-01-15 13:26:24','bdbc0e62-fa31-4399-84dc-89edd1a42b87',1,NULL,NULL,NULL),(477,482,'wwf-how-to-help',NULL,NULL,NULL,0,NULL,'2014-01-22 04:22:25','2022-01-15 13:26:24','d92e7f08-c9fa-4845-8e58-0d688d18f199',1,NULL,NULL,NULL),(478,483,'wwf-places-index',NULL,NULL,NULL,0,NULL,'2014-01-22 04:22:25','2022-01-15 13:26:24','8454825f-7ca5-43ce-b79f-6b82a18de011',1,NULL,NULL,NULL),(479,484,'wwf-places-show',NULL,NULL,NULL,0,NULL,'2014-01-22 04:22:26','2022-01-15 13:26:24','5f0715b9-cfd3-4f81-ba30-b6cf810f70c3',1,NULL,NULL,NULL),(480,485,'wwf-species-2',NULL,NULL,NULL,0,NULL,'2014-01-22 04:22:26','2022-01-15 13:26:24','6a0aa028-3291-43d3-9b73-f53b3083f84e',1,NULL,NULL,NULL),(481,486,'wwf-species-index',NULL,NULL,NULL,0,NULL,'2014-01-22 04:22:26','2022-01-15 13:26:25','509c4bf8-3912-4ce9-a55d-c88933f3f55b',1,NULL,NULL,NULL),(482,487,'wwf-travel-index',NULL,NULL,NULL,0,NULL,'2014-01-22 04:22:26','2022-01-15 13:26:25','adeb1ea1-c3e3-4482-88d0-5ef70571b291',1,NULL,NULL,NULL),(483,579,'blank',NULL,NULL,NULL,0,NULL,'2014-02-04 02:13:26','2022-01-15 13:26:45','d264e936-5c7f-4e6d-9b0d-49928b0007f1',1,NULL,NULL,NULL),(484,580,'blank.thumbnail',NULL,NULL,NULL,0,NULL,'2014-02-04 02:13:27','2022-01-15 13:26:44','54f32874-c2ab-4371-b64e-755f6d19adca',1,NULL,NULL,NULL),(485,581,'body-bg',NULL,NULL,NULL,0,NULL,'2014-02-04 02:13:27','2022-01-15 13:26:44','1c829181-c607-4216-bcef-88bf7340e66b',1,NULL,NULL,NULL),(486,582,'container-bg',NULL,NULL,NULL,0,NULL,'2014-02-04 02:13:29','2022-01-15 13:26:44','c2ab86e2-80e8-4496-b5d8-1c00865b38c0',1,NULL,NULL,NULL),(487,583,'container-bottom-trans',NULL,NULL,NULL,0,NULL,'2014-02-04 02:13:29','2022-01-15 13:26:44','abf62719-a6d4-447b-8a3e-7e8196ec6c1c',1,NULL,NULL,NULL),(488,584,'container-bottom-trans.thumbnail',NULL,NULL,NULL,0,NULL,'2014-02-04 02:13:29','2022-01-15 13:26:44','6c6580bf-9c9a-41c7-80b4-d81675ad32d1',1,NULL,NULL,NULL),(489,585,'container-top-trans',NULL,NULL,NULL,0,NULL,'2014-02-04 02:13:30','2022-01-15 13:26:44','ed0ccfe5-72b5-4768-b0d4-33421f0bea4c',1,NULL,NULL,NULL),(490,586,'container-top-trans.thumbnail',NULL,NULL,NULL,0,NULL,'2014-02-04 02:13:31','2022-01-15 13:26:43','fbc25d71-2d7b-49a0-976e-b520cdb6dc26',1,NULL,NULL,NULL),(491,587,'content-bg',NULL,NULL,NULL,0,NULL,'2014-02-04 02:13:32','2022-01-15 13:26:48','b7ac3f19-f1e8-4f67-8bca-ad99fe20d8ca',1,NULL,NULL,NULL),(492,588,'content-bg.thumbnail',NULL,NULL,NULL,0,NULL,'2014-02-04 02:13:32','2022-01-15 13:26:41','3e6e0213-b890-4601-bba3-aca1f2ac3032',1,NULL,NULL,NULL),(493,589,'dishwasher-exterior',NULL,NULL,NULL,0,NULL,'2014-02-04 02:13:33','2022-01-15 13:26:49','b8a2376b-4481-4e32-b459-e6a085bca2ae',1,NULL,NULL,NULL),(494,590,'dishwasher-exterior.thumbnail',NULL,NULL,NULL,0,NULL,'2014-02-04 02:13:33','2022-01-15 13:26:47','c1b9cc42-85aa-4652-9288-eab45ebd598e',1,NULL,NULL,NULL),(495,591,'dishwasher-panel',NULL,NULL,NULL,0,NULL,'2014-02-04 02:13:33','2022-01-15 13:26:47','09771c66-0a51-4977-a370-96224b25e43b',1,NULL,NULL,NULL),(496,592,'dishwasher-panel.thumbnail',NULL,NULL,NULL,0,NULL,'2014-02-04 02:13:34','2022-01-15 13:26:47','a12baad8-6db8-4baf-9918-a2e1ebf892a3',1,NULL,NULL,NULL),(497,593,'home-green-background',NULL,NULL,NULL,0,NULL,'2014-02-04 02:13:34','2022-01-15 13:26:47','742b99dd-7acf-40a6-be17-3bf328d40807',1,NULL,NULL,NULL),(498,594,'home-green-background.thumbnail',NULL,NULL,NULL,0,NULL,'2014-02-04 02:13:34','2022-01-15 13:26:47','1af8e766-313f-45dd-b29c-d0093bfda564',1,NULL,NULL,NULL),(499,595,'home-green-background1',NULL,NULL,NULL,0,NULL,'2014-02-04 02:13:34','2022-01-15 13:26:47','d98b730c-8c53-48a9-b513-1851b1fbfbb8',1,NULL,NULL,NULL),(500,596,'home-green-background1.thumbnail',NULL,NULL,NULL,0,NULL,'2014-02-04 02:13:35','2022-01-15 13:26:47','b3a8dc60-5b8f-4691-88e6-7213ef35a879',1,NULL,NULL,NULL),(501,597,'nav',NULL,NULL,NULL,0,NULL,'2014-02-04 02:13:38','2022-01-15 13:26:47','888415cb-a094-476c-9706-c805ed26d23a',1,NULL,NULL,NULL),(502,598,'nav.thumbnail',NULL,NULL,NULL,0,NULL,'2014-02-04 02:13:40','2022-01-15 13:26:47','9542663f-33ff-4662-80db-c7e7cd133561',1,NULL,NULL,NULL),(503,599,'png-screenshot',NULL,NULL,NULL,0,NULL,'2014-02-04 02:20:40','2022-01-15 13:26:47','f4d39adf-ed0e-4c4e-8346-453bf25f59b8',1,NULL,NULL,NULL),(504,600,'png-screenshot.thumbnail',NULL,NULL,NULL,0,NULL,'2014-02-04 02:20:40','2022-01-15 13:26:47','acf3a2be-46d1-4c2a-8409-69dbfb222f5e',1,NULL,NULL,NULL),(505,601,'screenshot-mac',NULL,NULL,NULL,0,NULL,'2014-02-04 02:20:41','2022-01-15 13:26:48','97ed6fc5-14af-4f26-a1b6-2ddc65711f02',1,NULL,NULL,NULL),(506,602,'screenshot-mac.thumbnail',NULL,NULL,NULL,0,NULL,'2014-02-04 02:20:42','2022-01-15 13:26:48','1e32a77c-62da-4d36-b80f-cbfe84a48d41',1,NULL,NULL,NULL),(507,603,'screenshot-mac thumb',NULL,NULL,NULL,0,NULL,'2014-02-04 02:20:42','2022-01-15 13:26:48','4a4cf1b1-02ce-4528-a8d4-a8ed404668bd',1,NULL,NULL,NULL),(508,604,'screenshot-mac thumb.thumbnail',NULL,NULL,NULL,0,NULL,'2014-02-04 02:20:43','2022-01-15 13:26:48','5e26c583-d0d5-47b7-9ab6-1740bb3931c5',1,NULL,NULL,NULL),(509,605,'screenshot-windows',NULL,NULL,NULL,0,NULL,'2014-02-04 02:20:43','2022-01-15 13:26:48','57b359d6-99a8-4dcf-872c-404ff7176353',1,NULL,NULL,NULL),(510,606,'screenshot-windows.thumbnail',NULL,NULL,NULL,0,NULL,'2014-02-04 02:20:44','2022-01-15 13:26:47','4d841855-b30d-404e-ad34-4450179d6d2e',1,NULL,NULL,NULL),(511,607,'screenshot-windows thumb',NULL,NULL,NULL,0,NULL,'2014-02-04 02:20:45','2022-01-15 13:26:47','a98f5fa7-cc02-4359-9e17-095c3173ebeb',1,NULL,NULL,NULL),(512,608,'screenshot-windows thumb.thumbnail',NULL,NULL,NULL,0,NULL,'2014-02-04 02:20:45','2022-01-15 13:26:46','c7655628-9ba0-4958-8420-4ff7f9393c2b',1,NULL,NULL,NULL),(513,609,'trevor-davis-v2-129x300',NULL,NULL,NULL,0,NULL,'2014-02-04 02:20:46','2022-01-15 13:26:46','0a12f911-0d83-4a03-81ec-549ae7bbde24',1,NULL,NULL,NULL),(514,610,'trevor-davis-v2-150x150',NULL,NULL,NULL,0,NULL,'2014-02-04 02:20:47','2022-01-15 13:26:46','1a782642-86ed-4e9f-8d76-9041bffaa8b3',1,NULL,NULL,NULL),(515,611,'trevor-davis-v2',NULL,NULL,NULL,0,NULL,'2014-02-04 02:20:48','2022-01-15 13:26:46','dbd7e1b1-0a64-4dcc-b218-cdf455021af2',1,NULL,NULL,NULL),(516,612,'trevor-davis-v2 thumb-129x300',NULL,NULL,NULL,0,NULL,'2014-02-04 02:20:48','2022-01-15 13:26:46','25b4fb15-af32-4a7f-a789-1a64c89f1880',1,NULL,NULL,NULL),(517,613,'trevor-davis-v2 thumb-150x150',NULL,NULL,NULL,0,NULL,'2014-02-04 02:20:48','2022-01-15 13:26:46','77e965e5-b56a-4c21-b30a-0fc06569a5cf',1,NULL,NULL,NULL),(518,614,'trevor-davis-v2 thumb',NULL,NULL,NULL,0,NULL,'2014-02-04 02:20:49','2022-01-15 13:26:47','a5160672-a5a1-4c3c-a018-9f34750b0ac0',1,NULL,NULL,NULL),(519,615,'parking-garage',NULL,NULL,NULL,0,NULL,'2014-02-04 02:20:49','2022-01-15 13:26:47','ad0634d9-fec4-477b-a4b6-1916ff8ee7c5',1,NULL,NULL,NULL),(520,616,'parking-garage.thumbnail',NULL,NULL,NULL,0,NULL,'2014-02-04 02:20:50','2022-01-15 13:26:47','f2604052-a83f-4cf3-be18-ecd6d0d6b335',1,NULL,NULL,NULL),(521,617,'altima-controls',NULL,NULL,NULL,0,NULL,'2014-02-04 02:20:50','2022-01-15 13:26:47','0ba35288-edb8-46f0-9102-1877df335e25',1,NULL,NULL,NULL),(522,618,'altima-controls.thumbnail',NULL,NULL,NULL,0,NULL,'2014-02-04 02:20:50','2022-01-15 13:26:47','b85a618b-6ca9-4d8e-8c75-0cf936d0230b',1,NULL,NULL,NULL),(523,619,'content-bg',NULL,NULL,NULL,0,NULL,'2014-02-04 02:20:51','2022-01-15 13:26:47','0a41a312-a182-4d56-beab-777bfc38ec2a',1,NULL,NULL,NULL),(524,620,'download',NULL,NULL,NULL,0,NULL,'2014-02-04 02:20:51','2022-01-15 13:26:48','1af9051a-43cb-470f-849d-ea151e35dacc',1,NULL,NULL,NULL),(525,621,'download.thumbnail',NULL,NULL,NULL,0,NULL,'2014-02-04 02:20:52','2022-01-15 13:26:47','ce9378a9-94ff-451d-9874-502d4331e5ae',1,NULL,NULL,NULL),(526,622,'logo',NULL,NULL,NULL,0,NULL,'2014-02-04 02:20:52','2022-01-15 13:26:48','f5cf7c25-5e52-4506-8a9e-1f42143058b5',1,NULL,NULL,NULL),(527,623,'logo.thumbnail',NULL,NULL,NULL,0,NULL,'2014-02-04 02:20:52','2022-01-15 13:26:49','a42367dc-b674-4d9b-b5e3-d4fce890d07d',1,NULL,NULL,NULL),(528,624,'nav',NULL,NULL,NULL,0,NULL,'2014-02-04 02:20:53','2022-01-15 13:26:49','30dc1a2e-25e7-4144-b900-c6c0f39ea721',1,NULL,NULL,NULL),(529,625,'nav.thumbnail',NULL,NULL,NULL,0,NULL,'2014-02-04 02:20:53','2022-01-15 13:26:49','075d6f51-fdae-40b7-8860-fecdbc57c6b8',1,NULL,NULL,NULL),(530,626,'trevor-davis-v1',NULL,NULL,NULL,0,NULL,'2014-02-04 02:20:53','2022-01-15 13:26:49','95d07415-472c-4582-ba11-70b5c9583c69',1,NULL,NULL,NULL),(531,627,'trevor-davis-v1.thumbnail',NULL,NULL,NULL,0,NULL,'2014-02-04 02:20:53','2022-01-15 13:26:50','e320d58c-61d3-4370-a951-c7d00c49db6b',1,NULL,NULL,NULL),(532,628,'trevor-davis-v1 thumb',NULL,NULL,NULL,0,NULL,'2014-02-04 02:20:54','2022-01-15 13:26:50','3f64cd00-9079-4523-b0f5-f98bb75bd8f5',1,NULL,NULL,NULL),(533,629,'trevor-davis-v1 thumb.thumbnail',NULL,NULL,NULL,0,NULL,'2014-02-04 02:20:54','2022-01-15 13:26:50','3138f76b-4d17-472e-bd13-269e3ef0ef70',1,NULL,NULL,NULL),(534,630,'buttons-ie-150x25',NULL,NULL,NULL,0,NULL,'2014-02-04 02:20:55','2022-01-15 13:26:50','a693c5a2-d739-4fa9-8007-057b55ac57c2',1,NULL,NULL,NULL),(535,631,'buttons-ie-300x18',NULL,NULL,NULL,0,NULL,'2014-02-04 02:20:55','2022-01-15 13:26:50','cc57c92b-99bb-4b36-b6f4-8db3549bd639',1,NULL,NULL,NULL),(536,632,'buttons-ie',NULL,NULL,NULL,0,NULL,'2014-02-04 02:20:56','2022-01-15 13:26:49','d0cf4472-9de1-41f7-958b-2fec6d5d5fdc',1,NULL,NULL,NULL),(537,633,'continue-shopping-regular',NULL,NULL,NULL,0,NULL,'2014-02-04 02:20:56','2022-01-15 13:26:50','2525bdab-f132-4b70-b4f9-456ae1967ec7',1,NULL,NULL,NULL),(538,634,'continue-shopping',NULL,NULL,NULL,0,NULL,'2014-02-04 02:20:56','2022-01-15 13:26:50','cba4aab9-981b-4bf2-9fc3-a64f14837a0f',1,NULL,NULL,NULL),(539,635,'macbook-pro-150x140',NULL,NULL,NULL,0,NULL,'2014-02-04 02:20:57','2022-01-15 13:26:50','cb7d9fb8-7b8c-419c-933b-2fb996a410d2',1,NULL,NULL,NULL),(540,636,'macbook-pro',NULL,NULL,NULL,0,NULL,'2014-02-04 02:20:57','2022-01-15 13:26:50','fb938cf3-83a4-43c3-927c-ccdd8ce2a10d',1,NULL,NULL,NULL),(541,637,'proceed-to-checkout-150x50',NULL,NULL,NULL,0,NULL,'2014-02-04 02:20:58','2022-01-15 13:26:50','2980efde-6fcb-497c-b009-952ec2ed8557',1,NULL,NULL,NULL),(542,638,'proceed-to-checkout-regular-150x25',NULL,NULL,NULL,0,NULL,'2014-02-04 02:20:58','2022-01-15 13:26:50','53e4ce78-c976-4af4-8beb-6ec21d5ff849',1,NULL,NULL,NULL),(543,639,'proceed-to-checkout-regular',NULL,NULL,NULL,0,NULL,'2014-02-04 02:20:59','2022-01-15 13:26:50','2f822c1b-31af-43b0-844e-a2b8f0e0daac',1,NULL,NULL,NULL),(544,640,'proceed-to-checkout',NULL,NULL,NULL,0,NULL,'2014-02-04 02:20:59','2022-01-15 13:26:50','e18581f0-c761-4d68-a376-6aa617dfb857',1,NULL,NULL,NULL),(545,641,'update-cart-regular',NULL,NULL,NULL,0,NULL,'2014-02-04 02:20:59','2022-01-15 13:26:50','6dae2f8a-8ebc-455c-81ab-fa571da94745',1,NULL,NULL,NULL),(546,642,'update-cart',NULL,NULL,NULL,0,NULL,'2014-02-04 02:21:00','2022-01-15 13:26:50','fe38add8-61e0-4ae6-a6f2-e529e50fd304',1,NULL,NULL,NULL),(547,643,'ap-trans',NULL,NULL,NULL,0,NULL,'2014-02-04 02:21:00','2022-01-15 13:26:49','a45d209c-1793-4434-91c5-9dda6b672e2c',1,NULL,NULL,NULL),(548,644,'i-took-the-2008-survey-150x46',NULL,NULL,NULL,0,NULL,'2014-02-04 02:21:01','2022-01-15 13:26:49','d7c45798-e1be-4bff-8cc9-84a9ede3bed5',1,NULL,NULL,NULL),(549,645,'i-took-the-2008-survey',NULL,NULL,NULL,0,NULL,'2014-02-04 02:21:03','2022-01-15 13:26:49','6e8e98f5-6306-4e49-a756-2815b5a183c3',1,NULL,NULL,NULL),(550,646,'jumpman-150x150',NULL,NULL,NULL,0,NULL,'2014-02-04 02:21:03','2022-01-15 13:26:48','8cd2ceb6-55a9-442b-b257-82d2b9caf09e',1,NULL,NULL,NULL),(551,647,'jumpman',NULL,NULL,NULL,0,NULL,'2014-02-04 02:21:07','2022-01-15 13:26:48','3765b461-5f45-41ff-8e01-077cff6ee52c',1,NULL,NULL,NULL),(552,648,'gwwired port tn',NULL,NULL,NULL,0,NULL,'2014-02-04 02:21:08','2022-01-15 13:26:48','95bfb0a6-78c4-43f5-a5d6-081bab510db5',1,NULL,NULL,NULL),(553,649,'installnet port tn',NULL,NULL,NULL,0,NULL,'2014-02-04 02:21:08','2022-01-15 13:26:48','1ae53ac8-aef3-458e-bc61-2afefcf1c060',1,NULL,NULL,NULL),(554,650,'portfolio-hover-trans',NULL,NULL,NULL,0,NULL,'2014-02-04 02:21:10','2022-01-15 13:26:48','eccd7cb9-b5c7-469b-bb1f-3d54aa2ed89a',1,NULL,NULL,NULL),(555,651,'portfolio-trans',NULL,NULL,NULL,0,NULL,'2014-02-04 02:21:10','2022-01-15 13:26:48','5e5f1709-a059-4bb9-9704-dd795863d80f',1,NULL,NULL,NULL),(556,652,'urac flash port tn',NULL,NULL,NULL,0,NULL,'2014-02-04 02:21:13','2022-01-15 13:26:48','a8125679-8a61-48a5-9316-eb845f2fa3ca',1,NULL,NULL,NULL),(557,653,'change-we-can-believe-in-150x119',NULL,NULL,NULL,0,NULL,'2014-02-04 02:21:13','2022-01-15 13:26:49','91fa8927-5878-4092-9cec-9b6895e0b085',1,NULL,NULL,NULL),(558,654,'change-we-can-believe-in-300x76',NULL,NULL,NULL,0,NULL,'2014-02-04 02:21:14','2022-01-15 13:26:49','f15daa93-897b-4417-80bc-7d3af7bc7cdd',1,NULL,NULL,NULL),(559,655,'change-we-can-believe-in',NULL,NULL,NULL,0,NULL,'2014-02-04 02:21:15','2022-01-15 13:26:50','161f058b-50e1-44cd-886e-227e3cab9273',1,NULL,NULL,NULL),(560,656,'event-apart-badge-128x300',NULL,NULL,NULL,0,NULL,'2014-02-04 02:21:17','2022-01-15 13:26:49','80e9ba5a-b1fd-4a11-95b0-50131f4c7431',1,NULL,NULL,NULL),(561,657,'event-apart-badge-150x150',NULL,NULL,NULL,0,NULL,'2014-02-04 02:21:17','2022-01-15 13:26:49','aa3d7ea0-66e5-4bda-b542-3e522d6b229e',1,NULL,NULL,NULL),(562,658,'event-apart-badge',NULL,NULL,NULL,0,NULL,'2014-02-04 02:21:17','2022-01-15 13:26:49','23fc5fbf-d9ea-4673-b275-cd8d78157771',1,NULL,NULL,NULL),(563,659,'sprite-horiz',NULL,NULL,NULL,0,NULL,'2014-02-04 02:21:18','2022-01-15 13:26:49','d8fdbacb-7f0b-4523-81ac-1c88ebb19c92',1,NULL,NULL,NULL),(564,660,'sprite-hover',NULL,NULL,NULL,0,NULL,'2014-02-04 02:21:18','2022-01-15 13:26:49','2f953796-dbe8-4d91-92b7-d6d5078e2496',1,NULL,NULL,NULL),(565,661,'sprite-off',NULL,NULL,NULL,0,NULL,'2014-02-04 02:21:18','2022-01-15 13:26:49','995cfe11-5d27-497e-99dd-75168ea22382',1,NULL,NULL,NULL),(566,662,'sprite-vert',NULL,NULL,NULL,0,NULL,'2014-02-04 02:21:19','2022-01-15 13:26:49','c1ae66d8-6f08-430c-84b2-c2e784aae4ba',1,NULL,NULL,NULL),(567,663,'alabama-150x150',NULL,NULL,NULL,0,NULL,'2014-02-04 02:21:19','2022-01-15 13:26:49','e9eaeb88-c8b1-4450-958d-ea301beadff9',1,NULL,NULL,NULL),(568,664,'alabama-300x300',NULL,NULL,NULL,0,NULL,'2014-02-04 02:21:20','2022-01-15 13:26:46','eccff386-b83f-4cb8-b285-32e6a1fc966c',1,NULL,NULL,NULL),(569,665,'alabama-thumb',NULL,NULL,NULL,0,NULL,'2014-02-04 02:21:20','2022-01-15 13:26:49','49c7ccb0-1ce7-4ce5-a087-aa38b322195e',1,NULL,NULL,NULL),(570,666,'alabama',NULL,NULL,NULL,0,NULL,'2014-02-04 02:21:21','2022-01-15 13:26:48','8861b166-075f-44dc-9294-bf4267a9ad8a',1,NULL,NULL,NULL),(571,667,'alaska-150x150',NULL,NULL,NULL,0,NULL,'2014-02-04 02:21:21','2022-01-15 13:26:46','048c46a0-b602-4ea4-af2a-35c357f101ed',1,NULL,NULL,NULL),(572,668,'alaska-300x300',NULL,NULL,NULL,0,NULL,'2014-02-04 02:21:21','2022-01-15 13:26:45','6c73f3f5-0b3c-4f38-afcb-74dba6d9f59c',1,NULL,NULL,NULL),(573,669,'alaska-thumb',NULL,NULL,NULL,0,NULL,'2014-02-04 02:21:22','2022-01-15 13:26:46','bf658027-e767-4acf-bfd4-e87c4ad56e3d',1,NULL,NULL,NULL),(574,670,'alaska',NULL,NULL,NULL,0,NULL,'2014-02-04 02:21:22','2022-01-15 13:26:42','052744e0-7a10-489f-9978-b0deadb3ab6c',1,NULL,NULL,NULL),(575,671,'american-samoa-150x150',NULL,NULL,NULL,0,NULL,'2014-02-04 02:21:22','2022-01-15 13:26:42','4534ce77-4418-430b-ac5d-0719760a4b1b',1,NULL,NULL,NULL),(576,672,'american-samoa-300x300',NULL,NULL,NULL,0,NULL,'2014-02-04 02:21:23','2022-01-15 13:26:42','b7672b73-859b-413b-89da-e03dd4b6843b',1,NULL,NULL,NULL),(577,673,'american-samoa-thumb',NULL,NULL,NULL,0,NULL,'2014-02-04 02:21:23','2022-01-15 13:26:43','30bcd4dd-808c-4c4f-81c2-dbd455ee57c8',1,NULL,NULL,NULL),(578,674,'american-samoa',NULL,NULL,NULL,0,NULL,'2014-02-04 02:21:23','2022-01-15 13:26:43','390aaa89-f2ee-4c79-823b-516f51f604d4',1,NULL,NULL,NULL),(579,675,'close',NULL,NULL,NULL,0,NULL,'2014-02-04 02:21:23','2022-01-15 13:26:43','63f912a8-2b89-4432-8de1-313015783d9a',1,NULL,NULL,NULL),(580,676,'loading-150x13',NULL,NULL,NULL,0,NULL,'2014-02-04 02:21:24','2022-01-15 13:26:43','6e0b03ff-b51f-40cd-ab4d-6d04d0dbf2a1',1,NULL,NULL,NULL),(581,677,'loading',NULL,NULL,NULL,0,NULL,'2014-02-04 02:21:24','2022-01-15 13:26:43','c37e0034-5133-4311-801e-9591f2b042f8',1,NULL,NULL,NULL),(582,678,'nhl-team-logos-150x150',NULL,NULL,NULL,0,NULL,'2014-02-04 02:21:24','2022-01-15 13:26:43','3bcb8ad4-0b4c-470e-b2a0-7533b32655b4',1,NULL,NULL,NULL),(583,679,'nhl-team-logos',NULL,NULL,NULL,0,NULL,'2014-02-04 02:21:25','2022-01-15 13:26:43','820d3ba9-818f-4ed3-ac03-88e204cc54b2',1,NULL,NULL,NULL),(584,680,'wordpress-validation-150x106',NULL,NULL,NULL,0,NULL,'2014-02-04 02:21:25','2022-01-15 13:26:43','b53e3ef8-0f82-484b-8df1-304436c82431',1,NULL,NULL,NULL),(585,681,'wordpress-validation-300x96',NULL,NULL,NULL,0,NULL,'2014-02-04 02:21:25','2022-01-15 13:26:43','77ce04d4-b076-43d4-8dd9-723758bc8540',1,NULL,NULL,NULL),(586,682,'wordpress-validation',NULL,NULL,NULL,0,NULL,'2014-02-04 02:21:26','2022-01-15 13:26:43','c11daca4-a6c7-42fd-bbf6-99989a453ae3',1,NULL,NULL,NULL),(587,683,'contact-form',NULL,NULL,NULL,0,NULL,'2014-02-04 02:21:26','2022-01-15 13:26:41','16c42066-2728-4300-b4f4-48abafb7926d',1,NULL,NULL,NULL),(588,684,'contact-form',NULL,NULL,NULL,0,NULL,'2014-02-04 02:21:26','2022-01-15 13:26:43','6504e632-4d0c-4965-b9cd-773c1fa623c9',1,NULL,NULL,NULL),(589,685,'matrix featured-150x150',NULL,NULL,NULL,0,NULL,'2014-02-04 02:21:26','2022-01-15 13:26:44','f2aecca6-ae3b-4399-9f74-429cf108572c',1,NULL,NULL,NULL),(590,686,'matrix featured',NULL,NULL,NULL,0,NULL,'2014-02-04 02:21:27','2022-01-15 13:26:44','1960a354-896e-4d8e-b8c9-aff96e6d6c8d',1,NULL,NULL,NULL),(591,687,'twitter-bird',NULL,NULL,NULL,0,NULL,'2014-02-04 02:21:27','2022-01-15 13:26:43','25d31e92-203f-4ad3-8c60-038bb8a44b13',1,NULL,NULL,NULL),(592,688,'twitter-plugin-fixed-150x150',NULL,NULL,NULL,0,NULL,'2014-02-04 02:21:27','2022-01-15 13:26:42','8711adce-4e29-45cf-92ae-57c38b696111',1,NULL,NULL,NULL),(593,689,'twitter-plugin-fixed',NULL,NULL,NULL,0,NULL,'2014-02-04 02:21:28','2022-01-15 13:26:41','5b933c21-5a24-4e61-970b-86637cbc72c2',1,NULL,NULL,NULL),(594,690,'wordpress-page-template-150x150',NULL,NULL,NULL,0,NULL,'2014-02-04 02:21:28','2022-01-15 13:26:41','0b4d3425-871d-4d8a-b7d1-7527f8740dfd',1,NULL,NULL,NULL),(595,691,'wordpress-page-template-300x179',NULL,NULL,NULL,0,NULL,'2014-02-04 02:21:28','2022-01-15 13:26:40','0b6a5279-b92a-4e31-b5ea-390673065ea0',1,NULL,NULL,NULL),(596,692,'wordpress-page-template',NULL,NULL,NULL,0,NULL,'2014-02-04 02:21:29','2022-01-15 13:26:41','51a714c5-344b-4a03-a61a-812b6e0af2c0',1,NULL,NULL,NULL),(597,693,'xmas-tree featured-150x150',NULL,NULL,NULL,0,NULL,'2014-02-04 02:21:29','2022-01-15 13:26:41','129a666c-37d6-4db1-bfa0-d1de6e67826f',1,NULL,NULL,NULL),(598,694,'xmas-tree featured',NULL,NULL,NULL,0,NULL,'2014-02-04 02:21:29','2022-01-15 13:26:41','10582daa-9a7f-48aa-9d72-a9859cc62390',1,NULL,NULL,NULL),(599,695,'building-site-ee-150x150',NULL,NULL,NULL,0,NULL,'2014-02-04 02:21:29','2022-01-15 13:26:41','ee3c3e98-b23d-4cf6-9985-f563eb937c2a',1,NULL,NULL,NULL),(600,696,'building-site-ee',NULL,NULL,NULL,0,NULL,'2014-02-04 02:21:30','2022-01-15 13:26:41','3f0b59eb-caa9-41c7-9cba-af4cdfaff4f2',1,NULL,NULL,NULL),(601,697,'expressionengine-sample-chapter-3-start-posting',NULL,NULL,NULL,0,NULL,'2014-02-04 02:21:30','2022-01-15 13:26:41','0ad0b41a-e749-4340-bd22-7c63c6f4a6a0',1,NULL,NULL,NULL),(602,698,'monica featured-150x150',NULL,NULL,NULL,0,NULL,'2014-02-04 02:21:30','2022-01-15 13:26:41','56dc8c85-541f-48ec-b9e9-d288fa7145ef',1,NULL,NULL,NULL),(603,699,'monica featured',NULL,NULL,NULL,0,NULL,'2014-02-04 02:21:31','2022-01-15 13:26:41','dcc9e993-4d4e-425e-ac8d-0cd10ec88486',1,NULL,NULL,NULL),(604,700,'jquery-inline-labels-150x150',NULL,NULL,NULL,0,NULL,'2014-02-04 02:21:31','2022-01-15 13:26:41','02d57986-4647-4548-b0b0-06ff665939e1',1,NULL,NULL,NULL),(605,701,'jquery-inline-labels',NULL,NULL,NULL,0,NULL,'2014-02-04 02:21:31','2022-01-15 13:26:44','3a9c8a2c-b85d-437e-ad1d-9b90535be0fe',1,NULL,NULL,NULL),(606,702,'packt-books-150x150',NULL,NULL,NULL,0,NULL,'2014-02-04 02:21:32','2022-01-15 13:26:44','5d1f00eb-8bf0-4a99-94a0-abadcd8914f7',1,NULL,NULL,NULL),(607,703,'packt-books-300x152',NULL,NULL,NULL,0,NULL,'2014-02-04 02:21:32','2022-01-15 13:26:45','c4d5de8a-f865-46a8-be25-49c4d106bd83',1,NULL,NULL,NULL),(608,704,'packt-books',NULL,NULL,NULL,0,NULL,'2014-02-04 02:21:32','2022-01-15 13:26:45','7abbad58-d127-4150-a2ce-6e810ea364c9',1,NULL,NULL,NULL),(609,705,'packt-cms',NULL,NULL,NULL,0,NULL,'2014-02-04 02:21:33','2022-01-15 13:26:45','fd6a61b3-ebd0-41fe-8be2-a1ae5edb62dc',1,NULL,NULL,NULL),(610,706,'packt-jquery',NULL,NULL,NULL,0,NULL,'2014-02-04 02:21:33','2022-01-15 13:26:45','b763655e-edd8-4c3a-9375-f6d5be3e3192',1,NULL,NULL,NULL),(611,707,'packt-wordpress',NULL,NULL,NULL,0,NULL,'2014-02-04 02:21:33','2022-01-15 13:26:44','c41984d2-5b1b-4752-a3d9-cc279f178e45',1,NULL,NULL,NULL),(612,708,'ecfc featured-150x150',NULL,NULL,NULL,0,NULL,'2014-02-04 02:21:33','2022-01-15 13:26:45','40fa9c5b-5a92-406f-9a4e-39b8adabb53d',1,NULL,NULL,NULL),(613,709,'ecfc featured',NULL,NULL,NULL,0,NULL,'2014-02-04 02:21:34','2022-01-15 13:26:45','74c879f6-451c-4740-a450-10c5cd451732',1,NULL,NULL,NULL),(614,710,'newletter-entry-150x150',NULL,NULL,NULL,0,NULL,'2014-02-04 02:21:34','2022-01-15 13:26:45','691c581e-ce15-4991-803f-804701425cbf',1,NULL,NULL,NULL),(615,711,'newletter-entry-300x160',NULL,NULL,NULL,0,NULL,'2014-02-04 02:21:35','2022-01-15 13:26:45','1582a262-3cd2-43f7-9b4a-d9db7d165a03',1,NULL,NULL,NULL),(616,712,'newletter-entry',NULL,NULL,NULL,0,NULL,'2014-02-04 02:21:35','2022-01-15 13:26:45','0c2eb70c-a447-474b-9d32-9191f9e079e9',1,NULL,NULL,NULL),(617,713,'newsletter-ff-150x150',NULL,NULL,NULL,0,NULL,'2014-02-04 02:21:35','2022-01-15 13:26:45','d179f0e8-c572-4836-b5da-bc462c520d77',1,NULL,NULL,NULL),(618,714,'newsletter-ff-300x148',NULL,NULL,NULL,0,NULL,'2014-02-04 02:21:35','2022-01-15 13:26:45','0d18f2a3-a069-45cc-acf2-78b12f02fb9f',1,NULL,NULL,NULL),(619,715,'newsletter-ff',NULL,NULL,NULL,0,NULL,'2014-02-04 02:21:36','2022-01-15 13:26:45','b4a2adaf-c308-4e65-83fe-2884c6a1c48b',1,NULL,NULL,NULL),(620,716,'demo-entry-150x150',NULL,NULL,NULL,0,NULL,'2014-02-04 02:21:36','2022-01-15 13:26:46','a1961b33-1969-41bb-9f6d-2599bbd74db8',1,NULL,NULL,NULL),(621,717,'demo-entry-300x210',NULL,NULL,NULL,0,NULL,'2014-02-04 02:21:36','2022-01-15 13:26:46','2d853620-9586-4022-9611-dd6e8738c885',1,NULL,NULL,NULL),(622,718,'demo-entry',NULL,NULL,NULL,0,NULL,'2014-02-04 02:21:37','2022-01-15 13:26:46','83307e05-42fd-4561-8cff-ad159fa66086',1,NULL,NULL,NULL),(623,719,'demo-entry thumb-150x150',NULL,NULL,NULL,0,NULL,'2014-02-04 02:21:37','2022-01-15 13:26:46','df95ce83-ee89-4747-a67f-246a84cf9857',1,NULL,NULL,NULL),(624,720,'demo-entry thumb-300x210',NULL,NULL,NULL,0,NULL,'2014-02-04 02:21:37','2022-01-15 13:26:46','94a976c8-c116-4450-94be-4bcf8f9e4c1a',1,NULL,NULL,NULL),(625,721,'demo-entry thumb',NULL,NULL,NULL,0,NULL,'2014-02-04 02:21:38','2022-01-15 13:26:46','374b33d5-ed37-4f69-a3d3-49cdf7a86fa2',1,NULL,NULL,NULL),(626,722,'ff-matrix-150x150',NULL,NULL,NULL,0,NULL,'2014-02-04 02:21:38','2022-01-15 13:26:46','5597b672-c258-4317-8729-4b8e0bceef73',1,NULL,NULL,NULL),(627,723,'ff-matrix-300x107',NULL,NULL,NULL,0,NULL,'2014-02-04 02:21:38','2022-01-15 13:26:45','71f9e8ea-bf17-419a-b566-66a89ef9b521',1,NULL,NULL,NULL),(628,724,'ff-matrix',NULL,NULL,NULL,0,NULL,'2014-02-04 02:21:38','2022-01-15 13:26:45','d9ce776e-f660-4d56-a59f-f5521ab27415',1,NULL,NULL,NULL),(629,725,'ff-matrix thumb-150x150',NULL,NULL,NULL,0,NULL,'2014-02-04 02:21:39','2022-01-15 13:26:44','ac5fe135-7502-4d9c-93a5-3261716d81e7',1,NULL,NULL,NULL),(630,726,'ff-matrix thumb-300x106',NULL,NULL,NULL,0,NULL,'2014-02-04 02:21:39','2022-01-15 13:26:45','a6ca2a1c-6c19-48b6-8d10-b6ef21ad9ebb',1,NULL,NULL,NULL),(631,727,'ff-matrix thumb',NULL,NULL,NULL,0,NULL,'2014-02-04 02:21:39','2022-01-15 13:26:44','53cabe02-bb0d-4d62-ba9c-4531572e0a16',1,NULL,NULL,NULL),(632,728,'form-entry-150x150',NULL,NULL,NULL,0,NULL,'2014-02-04 02:21:40','2022-01-15 13:26:44','baf56630-53a1-4cc5-974e-dd8a1098164e',1,NULL,NULL,NULL),(633,729,'form-entry-300x135',NULL,NULL,NULL,0,NULL,'2014-02-04 02:21:40','2022-01-15 13:26:44','86d03b20-dc52-4338-8c3f-96dc1dbca22c',1,NULL,NULL,NULL),(634,730,'form-entry',NULL,NULL,NULL,0,NULL,'2014-02-04 02:21:40','2022-01-15 13:26:44','4276107b-39b5-4773-a9e2-55c2d8357e26',1,NULL,NULL,NULL),(635,731,'form-entry thumb-150x150',NULL,NULL,NULL,0,NULL,'2014-02-04 02:21:41','2022-01-15 13:26:44','5db11b0b-571c-454f-b9c9-c47e7382bcd8',1,NULL,NULL,NULL),(636,732,'form-entry thumb-300x135',NULL,NULL,NULL,0,NULL,'2014-02-04 02:21:41','2022-01-15 13:26:44','5c0f0387-bef7-4d0c-bf1e-f148849f965a',1,NULL,NULL,NULL),(637,733,'form-entry thumb',NULL,NULL,NULL,0,NULL,'2014-02-04 02:21:42','2022-01-15 13:26:44','e063b0d4-c726-4663-a2ed-3b30a187e530',1,NULL,NULL,NULL),(638,734,'bball',NULL,NULL,NULL,0,NULL,'2014-02-04 02:21:42','2022-01-15 13:26:39','9f4a90de-16b3-4da7-975b-311a54777de7',1,NULL,NULL,NULL),(639,735,'chef',NULL,NULL,NULL,0,NULL,'2014-02-04 02:21:43','2022-01-15 13:26:39','e08ee13f-52ce-4d22-bff1-ae5ea3ebef99',1,NULL,NULL,NULL),(640,736,'dumbwaiter-options',NULL,NULL,NULL,0,NULL,'2014-02-04 02:21:44','2022-01-15 13:26:39','45afb0e5-7b86-42bb-a5e6-5ec3aa298588',1,NULL,NULL,NULL),(641,737,'form-entry thumb',NULL,NULL,NULL,0,NULL,'2014-02-04 02:21:47','2022-01-15 13:26:40','0f05e6c2-7397-4ca7-a5f6-fbe428eb3306',1,NULL,NULL,NULL),(642,738,'king-boo',NULL,NULL,NULL,0,NULL,'2014-02-04 02:21:47','2022-01-15 13:26:40','6335e3fd-23e5-4990-aee8-57872cec134d',1,NULL,NULL,NULL),(643,739,'me',NULL,NULL,NULL,0,NULL,'2014-02-04 02:21:47','2022-01-15 13:26:39','5bcc0453-5088-42e9-abd7-70ed82a9652c',1,NULL,NULL,NULL),(644,740,'soda',NULL,NULL,NULL,0,NULL,'2014-02-04 02:21:47','2022-01-15 13:26:40','6842749f-f3cb-4832-ab4f-97e4f137cabb',1,NULL,NULL,NULL),(645,741,'v1',NULL,NULL,NULL,0,NULL,'2014-02-04 02:21:48','2022-01-15 13:26:40','953e399e-6bbb-44f6-9623-4ec493becaca',1,NULL,NULL,NULL),(646,742,'v2',NULL,NULL,NULL,0,NULL,'2014-02-04 02:21:48','2022-01-15 13:26:40','934d31a5-827b-411f-b206-00ff5a05d418',1,NULL,NULL,NULL),(647,743,'v3',NULL,NULL,NULL,0,NULL,'2014-02-04 02:21:48','2022-01-15 13:26:40','be3fe217-2699-48ef-a0fe-5c4bce96390e',1,NULL,NULL,NULL),(648,744,'work-featured',NULL,NULL,NULL,0,NULL,'2014-02-04 02:21:49','2022-01-15 13:26:40','7ae84786-ff50-4734-b993-46dd5e37c7d5',1,NULL,NULL,NULL),(649,745,'work-quad',NULL,NULL,NULL,0,NULL,'2014-02-04 02:21:49','2022-01-15 13:26:40','c11351eb-437b-4038-a94e-919f3b6c4b1c',1,NULL,NULL,NULL),(650,746,'work-single-large-2',NULL,NULL,NULL,0,NULL,'2014-02-04 02:21:50','2022-01-15 13:26:40','bbd51b77-8796-45ee-ba79-fe246d8006dd',1,NULL,NULL,NULL),(651,747,'work-single-large-3',NULL,NULL,NULL,0,NULL,'2014-02-04 02:21:50','2022-01-15 13:26:40','ae4c0ebd-f22b-45b7-8602-28c256db88b5',1,NULL,NULL,NULL),(652,748,'work-single-large',NULL,NULL,NULL,0,NULL,'2014-02-04 02:21:50','2022-01-15 13:26:40','40c7f1e3-4a90-4d50-a947-2724eb168990',1,NULL,NULL,NULL),(653,13,NULL,NULL,NULL,NULL,0,NULL,'2014-02-15 02:00:31','2014-02-15 02:00:31','da6bdbab-e397-4658-a1f7-07093daba46d',1,NULL,NULL,NULL),(654,14,NULL,NULL,NULL,NULL,0,NULL,'2014-02-15 02:00:31','2014-02-15 02:00:31','92438d30-9811-42ee-9598-9344a3b3c92d',1,NULL,NULL,NULL),(655,15,NULL,NULL,NULL,NULL,0,NULL,'2014-02-15 02:00:31','2014-02-15 02:00:31','83e49949-94f5-4a17-9829-340a36c4f4d2',1,NULL,NULL,NULL),(656,16,NULL,NULL,NULL,NULL,0,NULL,'2014-02-15 02:00:31','2014-02-15 02:00:31','20852cc8-c40a-40b8-8395-e3cda8780c38',1,NULL,NULL,NULL),(658,488,NULL,NULL,NULL,NULL,0,NULL,'2014-02-15 02:00:31','2014-02-15 02:00:31','46631b4f-3ff7-42f8-9a56-44a4ad02e22e',1,NULL,NULL,NULL),(659,489,NULL,NULL,NULL,NULL,0,NULL,'2014-02-15 02:00:31','2014-02-15 02:00:31','62e97e78-bf29-4038-bd5c-e7303dd9d488',1,NULL,NULL,NULL),(660,490,NULL,NULL,NULL,NULL,0,NULL,'2014-02-15 02:00:31','2014-02-15 02:00:31','b4d670bc-d22d-4521-ab82-8253c056d8b8',1,NULL,NULL,NULL),(661,491,NULL,NULL,NULL,NULL,0,NULL,'2014-02-15 02:00:31','2014-02-15 02:00:31','6b38366b-fc43-4370-a24f-866e98850680',1,NULL,NULL,NULL),(662,492,NULL,NULL,NULL,NULL,0,NULL,'2014-02-15 02:00:31','2014-02-15 02:00:31','8bec43d5-f14f-40a0-a747-ab4609eb250d',1,NULL,NULL,NULL),(663,493,NULL,NULL,NULL,NULL,0,NULL,'2014-02-15 02:00:31','2014-02-15 02:00:31','271aeed2-527f-491f-ade1-9d2506116d9d',1,NULL,NULL,NULL),(664,494,NULL,NULL,NULL,NULL,0,NULL,'2014-02-15 02:00:31','2014-02-15 02:00:31','7467dd79-3d80-4ba3-a608-55083a989cfe',1,NULL,NULL,NULL),(665,495,NULL,NULL,NULL,NULL,0,NULL,'2014-02-15 02:00:31','2014-02-15 02:00:31','d7505e77-cddb-4afb-a7ec-465d242b826c',1,NULL,NULL,NULL),(666,496,NULL,NULL,NULL,NULL,0,NULL,'2014-02-15 02:00:31','2014-02-15 02:00:31','c235a7ce-faf6-463f-b144-1bb01d079148',1,NULL,NULL,NULL),(667,497,NULL,NULL,NULL,NULL,0,NULL,'2014-02-15 02:00:31','2014-02-15 02:00:31','4ff38a0d-d308-4123-81cd-95feeb1eeb51',1,NULL,NULL,NULL),(668,498,NULL,NULL,NULL,NULL,0,NULL,'2014-02-15 02:00:31','2014-02-15 02:00:31','b9d5cfa4-c803-4d02-a3be-837c4709f5c2',1,NULL,NULL,NULL),(669,499,NULL,NULL,NULL,NULL,0,NULL,'2014-02-15 02:00:31','2014-02-15 02:00:31','ab689f9f-0900-4365-a25a-ca9a9b83dea1',1,NULL,NULL,NULL),(670,500,NULL,NULL,NULL,NULL,0,NULL,'2014-02-15 02:00:31','2014-02-15 02:00:31','a502f30a-38ee-45cb-b70a-cf486ec71817',1,NULL,NULL,NULL),(671,501,NULL,NULL,NULL,NULL,0,NULL,'2014-02-15 02:00:31','2014-02-15 02:00:31','2db16109-4c76-434a-9cd2-731702dc9cad',1,NULL,NULL,NULL),(672,502,NULL,NULL,NULL,NULL,0,NULL,'2014-02-15 02:00:31','2014-02-15 02:00:31','5fc03f8f-ef52-441d-8a45-68ab072c1ddc',1,NULL,NULL,NULL),(673,503,NULL,NULL,NULL,NULL,0,NULL,'2014-02-15 02:00:31','2014-02-15 02:00:31','4a83ea32-d2ce-4518-a7c1-e0f45f8a9715',1,NULL,NULL,NULL),(674,504,NULL,NULL,NULL,NULL,0,NULL,'2014-02-15 02:00:31','2014-02-15 02:00:31','88f3aba6-a5a7-44e8-b143-356e4343c7d8',1,NULL,NULL,NULL),(675,505,NULL,NULL,NULL,NULL,0,NULL,'2014-02-15 02:00:31','2014-02-15 02:00:31','a27936d4-5458-427a-ab36-dabefa2e509c',1,NULL,NULL,NULL),(676,506,NULL,NULL,NULL,NULL,0,NULL,'2014-02-15 02:00:31','2014-02-15 02:00:31','3c2f3e46-b2ec-4889-b412-fbfa9a01b140',1,NULL,NULL,NULL),(677,507,NULL,NULL,NULL,NULL,0,NULL,'2014-02-15 02:00:31','2014-02-15 02:00:31','025bf722-e9d4-4aa2-b384-32c864fed4d4',1,NULL,NULL,NULL),(678,508,NULL,NULL,NULL,NULL,0,NULL,'2014-02-15 02:00:31','2014-02-15 02:00:31','e77033e1-94c5-4503-9c98-1b57959686cb',1,NULL,NULL,NULL),(679,509,NULL,NULL,NULL,NULL,0,NULL,'2014-02-15 02:00:31','2014-02-15 02:00:31','00db6f40-23e4-458f-8f31-4967dbc669d6',1,NULL,NULL,NULL),(680,510,NULL,NULL,NULL,NULL,0,NULL,'2014-02-15 02:00:31','2014-02-15 02:00:31','33887670-ee54-4eb2-8b34-bcd325408299',1,NULL,NULL,NULL),(681,511,NULL,NULL,NULL,NULL,0,NULL,'2014-02-15 02:00:31','2014-02-15 02:00:31','dfb4582f-eece-4baf-8884-112d16eadda7',1,NULL,NULL,NULL),(682,512,NULL,NULL,NULL,NULL,0,NULL,'2014-02-15 02:00:31','2014-02-15 02:00:31','98c1a272-540d-4acd-ba4d-e646f5197d91',1,NULL,NULL,NULL),(683,513,NULL,NULL,NULL,NULL,0,NULL,'2014-02-15 02:00:31','2014-02-15 02:00:31','9c5521c9-08fa-43f1-86b3-b14d36d0dbc0',1,NULL,NULL,NULL),(684,514,NULL,NULL,NULL,NULL,0,NULL,'2014-02-15 02:00:31','2014-02-15 02:00:31','2fa90f1d-049f-4681-9cf4-58107df31678',1,NULL,NULL,NULL),(685,515,NULL,NULL,NULL,NULL,0,NULL,'2014-02-15 02:00:31','2014-02-15 02:00:31','f4fc7218-d33b-4c64-b4fb-bb29281573ba',1,NULL,NULL,NULL),(686,516,NULL,NULL,NULL,NULL,0,NULL,'2014-02-15 02:00:31','2014-02-15 02:00:31','473a301d-0e76-4a6f-9339-90dd8a867ad7',1,NULL,NULL,NULL),(687,517,NULL,NULL,NULL,NULL,0,NULL,'2014-02-15 02:00:31','2014-02-15 02:00:31','91c2d030-b2ab-447b-ad13-1b697d9f8bbd',1,NULL,NULL,NULL),(688,518,NULL,NULL,NULL,NULL,0,NULL,'2014-02-15 02:00:31','2014-02-15 02:00:31','3394692f-29ca-4f8c-bf65-ecdc7952329e',1,NULL,NULL,NULL),(689,519,NULL,NULL,NULL,NULL,0,NULL,'2014-02-15 02:00:31','2014-02-15 02:00:31','577fe05c-8733-4042-8d81-ba6c24a526c1',1,NULL,NULL,NULL),(690,520,NULL,NULL,NULL,NULL,0,NULL,'2014-02-15 02:00:31','2014-02-15 02:00:31','85358e65-c445-4041-8b14-35380b1c0b12',1,NULL,NULL,NULL),(691,521,NULL,NULL,NULL,NULL,0,NULL,'2014-02-15 02:00:31','2014-02-15 02:00:31','97fe3eca-911e-4889-ad3b-aa68e5376bd2',1,NULL,NULL,NULL),(692,522,NULL,NULL,NULL,NULL,0,NULL,'2014-02-15 02:00:31','2014-02-15 02:00:31','f5166087-fe07-4435-97d9-9556df537048',1,NULL,NULL,NULL),(693,523,NULL,NULL,NULL,NULL,0,NULL,'2014-02-15 02:00:31','2014-02-15 02:00:31','171d1d83-f238-4e5b-a512-e4bf37eccef6',1,NULL,NULL,NULL),(694,524,NULL,NULL,NULL,NULL,0,NULL,'2014-02-15 02:00:31','2014-02-15 02:00:31','04f3ce2b-43fb-4730-a0b9-8d91f705c90d',1,NULL,NULL,NULL),(695,525,NULL,NULL,NULL,NULL,0,NULL,'2014-02-15 02:00:31','2014-02-15 02:00:31','d5df16ab-dd06-4c63-995e-95840c408a58',1,NULL,NULL,NULL),(696,526,NULL,NULL,NULL,NULL,0,NULL,'2014-02-15 02:00:31','2014-02-15 02:00:31','b582e54a-73e0-4dfa-bc88-d8549df5c8ee',1,NULL,NULL,NULL),(697,527,NULL,NULL,NULL,NULL,0,NULL,'2014-02-15 02:00:31','2014-02-15 02:00:31','17ee9666-210e-412c-84f2-9f8f7387424c',1,NULL,NULL,NULL),(698,528,NULL,NULL,NULL,NULL,0,NULL,'2014-02-15 02:00:31','2014-02-15 02:00:31','7fa037a4-89c1-416e-b850-22aaf546f25c',1,NULL,NULL,NULL),(699,529,NULL,NULL,NULL,NULL,0,NULL,'2014-02-15 02:00:31','2014-02-15 02:00:31','5bddd002-2673-4d42-bbfc-e7fc60338602',1,NULL,NULL,NULL),(700,530,NULL,NULL,NULL,NULL,0,NULL,'2014-02-15 02:00:31','2014-02-15 02:00:31','186371c9-6f1e-41a3-ad6c-940f6e1990d1',1,NULL,NULL,NULL),(701,531,NULL,NULL,NULL,NULL,0,NULL,'2014-02-15 02:00:31','2014-02-15 02:00:31','e7e22f4f-a039-4a49-8ce7-0a697320154c',1,NULL,NULL,NULL),(702,532,NULL,NULL,NULL,NULL,0,NULL,'2014-02-15 02:00:31','2014-02-15 02:00:31','e3c15f3b-a7ba-4c8d-be62-c786b63bf146',1,NULL,NULL,NULL),(703,533,NULL,NULL,NULL,NULL,0,NULL,'2014-02-15 02:00:31','2014-02-15 02:00:31','085ae11e-163d-43b3-8a6d-0483792aed3c',1,NULL,NULL,NULL),(704,534,NULL,NULL,NULL,NULL,0,NULL,'2014-02-15 02:00:31','2014-02-15 02:00:31','e2e11e71-32f1-4306-8cf3-edc74abdb1b8',1,NULL,NULL,NULL),(705,535,NULL,NULL,NULL,NULL,0,NULL,'2014-02-15 02:00:31','2014-02-15 02:00:31','3faa9e83-b2fa-4a22-81c7-87e7584628ae',1,NULL,NULL,NULL),(706,536,NULL,NULL,NULL,NULL,0,NULL,'2014-02-15 02:00:31','2014-02-15 02:00:31','625d9b40-f015-444a-9cb7-069f69a10a92',1,NULL,NULL,NULL),(707,537,NULL,NULL,NULL,NULL,0,NULL,'2014-02-15 02:00:31','2014-02-15 02:00:31','265a0e4a-499e-478e-af39-46a2bda471d5',1,NULL,NULL,NULL),(708,538,NULL,NULL,NULL,NULL,0,NULL,'2014-02-15 02:00:31','2014-02-15 02:00:31','9d021852-f447-474e-8aae-265615c5f350',1,NULL,NULL,NULL),(709,539,NULL,NULL,NULL,NULL,0,NULL,'2014-02-15 02:00:31','2014-02-15 02:00:31','d4e0a4b2-5a9c-4ac8-a0ae-5c87ccede4fc',1,NULL,NULL,NULL),(710,540,NULL,NULL,NULL,NULL,0,NULL,'2014-02-15 02:00:31','2014-02-15 02:00:31','63222ac1-2a00-48a8-beb1-6a52c8a29d9e',1,NULL,NULL,NULL),(711,541,NULL,NULL,NULL,NULL,0,NULL,'2014-02-15 02:00:31','2014-02-15 02:00:31','fa8517b4-eda6-40c6-ad71-7887b7141f6f',1,NULL,NULL,NULL),(712,542,NULL,NULL,NULL,NULL,0,NULL,'2014-02-15 02:00:31','2014-02-15 02:00:31','17477bad-0bba-45e9-9f05-d41a96e324ec',1,NULL,NULL,NULL),(713,543,NULL,NULL,NULL,NULL,0,NULL,'2014-02-15 02:00:31','2014-02-15 02:00:31','578774ae-52a0-48b7-bf86-dd066f209760',1,NULL,NULL,NULL),(714,544,NULL,NULL,NULL,NULL,0,NULL,'2014-02-15 02:00:31','2014-02-15 02:00:31','c701fffb-5896-48fc-b01c-7d1ff9fa3a50',1,NULL,NULL,NULL),(715,545,NULL,NULL,NULL,NULL,0,NULL,'2014-02-15 02:00:31','2014-02-15 02:00:31','c424d278-702b-4cda-b3dd-fd76194db8ae',1,NULL,NULL,NULL),(716,546,NULL,NULL,NULL,NULL,0,NULL,'2014-02-15 02:00:31','2014-02-15 02:00:31','b1731303-24ff-41fe-8ea0-6c7e90f7ac7d',1,NULL,NULL,NULL),(717,547,NULL,NULL,NULL,NULL,0,NULL,'2014-02-15 02:00:31','2014-02-15 02:00:31','f1203d75-5779-41ee-a0c0-410c48f4b908',1,NULL,NULL,NULL),(718,548,NULL,NULL,NULL,NULL,0,NULL,'2014-02-15 02:00:31','2014-02-15 02:00:31','82c65ce0-8348-42b2-a8a7-b41ea66d4675',1,NULL,NULL,NULL),(719,549,NULL,NULL,NULL,NULL,0,NULL,'2014-02-15 02:00:31','2014-02-15 02:00:31','471af73b-fd24-4b95-8f54-d7ab4da5dde2',1,NULL,NULL,NULL),(720,550,NULL,NULL,NULL,NULL,0,NULL,'2014-02-15 02:00:31','2014-02-15 02:00:31','7664a625-1d36-481d-9ba3-a11cdc18f2b5',1,NULL,NULL,NULL),(721,551,NULL,NULL,NULL,NULL,0,NULL,'2014-02-15 02:00:31','2014-02-15 02:00:31','aa311de1-6063-4cb4-9f26-14a612d3ca38',1,NULL,NULL,NULL),(722,552,NULL,NULL,NULL,NULL,0,NULL,'2014-02-15 02:00:31','2014-02-15 02:00:31','9f5e1193-7f02-4d9f-98d2-845ecce1eeb0',1,NULL,NULL,NULL),(723,553,NULL,NULL,NULL,NULL,0,NULL,'2014-02-15 02:00:31','2014-02-15 02:00:31','3c919e63-69c6-468f-9a1d-eb45c71a8c20',1,NULL,NULL,NULL),(724,554,NULL,NULL,NULL,NULL,0,NULL,'2014-02-15 02:00:31','2014-02-15 02:00:31','ed287b6f-5851-418d-9289-9711e29f13e6',1,NULL,NULL,NULL),(725,555,NULL,NULL,NULL,NULL,0,NULL,'2014-02-15 02:00:31','2014-02-15 02:00:31','eec93714-8456-4f3d-acfb-6c8e45d861cf',1,NULL,NULL,NULL),(726,556,NULL,NULL,NULL,NULL,0,NULL,'2014-02-15 02:00:31','2014-02-15 02:00:31','2f31584a-231f-4bdb-ba71-c21144f2a35a',1,NULL,NULL,NULL),(727,557,NULL,NULL,NULL,NULL,0,NULL,'2014-02-15 02:00:31','2014-02-15 02:00:31','09cddf3a-c19e-4781-b76e-12988cd609e6',1,NULL,NULL,NULL),(728,558,NULL,NULL,NULL,NULL,0,NULL,'2014-02-15 02:00:31','2014-02-15 02:00:31','73263ec8-7c37-406c-bed8-bb736797ca5e',1,NULL,NULL,NULL),(729,559,NULL,NULL,NULL,NULL,0,NULL,'2014-02-15 02:00:31','2014-02-15 02:00:31','c2871388-7278-403e-81ea-732a810edf36',1,NULL,NULL,NULL),(730,560,NULL,NULL,NULL,NULL,0,NULL,'2014-02-15 02:00:31','2014-02-15 02:00:31','a02ddb6b-08b2-4c22-9fe2-07446a88f9ce',1,NULL,NULL,NULL),(731,561,NULL,NULL,NULL,NULL,0,NULL,'2014-02-15 02:00:31','2014-02-15 02:00:31','614f95ee-bbe5-49f8-9996-e345edc0af3b',1,NULL,NULL,NULL),(732,562,NULL,NULL,NULL,NULL,0,NULL,'2014-02-15 02:00:31','2014-02-15 02:00:31','ffcd1df5-a431-4817-a196-c30719eec6b9',1,NULL,NULL,NULL),(733,563,NULL,NULL,NULL,NULL,0,NULL,'2014-02-15 02:00:31','2014-02-15 02:00:31','9b213447-7221-4dd6-b0c8-02cd55afedd8',1,NULL,NULL,NULL),(734,564,NULL,NULL,NULL,NULL,0,NULL,'2014-02-15 02:00:31','2014-02-15 02:00:31','9d5a1421-6031-49cb-9c0a-8794fd69e572',1,NULL,NULL,NULL),(735,565,NULL,NULL,NULL,NULL,0,NULL,'2014-02-15 02:00:31','2014-02-15 02:00:31','ccd09bb5-fe7b-48de-ab81-9264926e564d',1,NULL,NULL,NULL),(736,566,NULL,NULL,NULL,NULL,0,NULL,'2014-02-15 02:00:31','2014-02-15 02:00:31','ce16985d-5556-46d7-81cc-a831614a92c7',1,NULL,NULL,NULL),(737,567,NULL,NULL,NULL,NULL,0,NULL,'2014-02-15 02:00:31','2014-02-15 02:00:31','417c680c-baf3-4d8f-b864-964110de5b22',1,NULL,NULL,NULL),(738,568,NULL,NULL,NULL,NULL,0,NULL,'2014-02-15 02:00:31','2014-02-15 02:00:31','3ef9e28b-325b-48c3-9485-ed91b3d1f780',1,NULL,NULL,NULL),(739,569,NULL,NULL,NULL,NULL,0,NULL,'2014-02-15 02:00:31','2014-02-15 02:00:31','f6e7b366-45c8-4466-9644-9fbb12a92a50',1,NULL,NULL,NULL),(740,570,NULL,NULL,NULL,NULL,0,NULL,'2014-02-15 02:00:31','2014-02-15 02:00:31','732b0678-6ba5-4a2d-a668-fb1f3745a373',1,NULL,NULL,NULL),(741,571,NULL,NULL,NULL,NULL,0,NULL,'2014-02-15 02:00:31','2014-02-15 02:00:31','d3a7420f-b211-4bcf-8296-af2172178792',1,NULL,NULL,NULL),(742,572,NULL,NULL,NULL,NULL,0,NULL,'2014-02-15 02:00:31','2014-02-15 02:00:31','71965bc6-f3b2-4431-8437-5621439a7184',1,NULL,NULL,NULL),(743,573,NULL,NULL,NULL,NULL,0,NULL,'2014-02-15 02:00:31','2014-02-15 02:00:31','ea0bc3cc-7eb4-4973-af09-6bcb10f3796a',1,NULL,NULL,NULL),(744,574,NULL,NULL,NULL,NULL,0,NULL,'2014-02-15 02:00:31','2014-02-15 02:00:31','218438f3-5e45-4a8c-b05e-8710fc688d47',1,NULL,NULL,NULL),(745,575,NULL,NULL,NULL,NULL,0,NULL,'2014-02-15 02:00:31','2014-02-15 02:00:31','a61dc44c-f85e-4292-8296-5f9f22b9ea20',1,NULL,NULL,NULL),(746,576,NULL,NULL,NULL,NULL,0,NULL,'2014-02-15 02:00:31','2014-02-15 02:00:31','c5b5fe75-7b7b-45c7-8039-2c7ebd6d2f1a',1,NULL,NULL,NULL),(747,577,NULL,NULL,NULL,NULL,0,NULL,'2014-02-15 02:00:31','2014-02-15 02:00:31','9acfc80f-0fda-40f3-a3f2-0b98072837e6',1,NULL,NULL,NULL),(748,578,NULL,NULL,NULL,NULL,0,NULL,'2014-02-15 02:00:31','2014-02-15 02:00:31','c7883f32-8ce8-41eb-bf9c-8cb77c8ebde1',1,NULL,NULL,NULL),(749,749,'Shopify',NULL,NULL,NULL,0,NULL,'2014-09-12 19:33:28','2018-02-15 21:01:40','28f7f3fd-bb8b-4ced-8278-0ba5ee83c0c8',1,NULL,NULL,NULL),(750,750,'gopole-home',NULL,NULL,NULL,0,NULL,'2014-09-12 19:40:21','2022-01-15 13:26:30','55222ff5-b894-4725-8ca8-cf39dceeef12',1,NULL,NULL,NULL),(751,751,'gopole-locator',NULL,NULL,NULL,0,NULL,'2014-09-12 19:40:22','2022-01-15 13:26:30','3a83cb8f-704f-495b-b5fe-5f98fb9b7898',1,NULL,NULL,NULL),(752,752,'gopole-products',NULL,NULL,NULL,0,NULL,'2014-09-12 19:40:22','2022-01-15 13:26:30','1adb4f20-7c98-4c43-9e52-c5be0d210808',1,NULL,NULL,NULL),(753,753,'gopole-returns',NULL,NULL,NULL,0,NULL,'2014-09-12 19:40:23','2022-01-15 13:26:31','c0658718-4029-498d-994e-defac0b8afc7',1,NULL,NULL,NULL),(754,754,'GoPole',NULL,'<p>We migrated the old GoPole site off of ExpressionEngine and into a Craft and Shopify combo. My role was to configure and integrate Craft and to integrate with Shopify as well. I built a <a href=\"https://github.com/davist11/craft-shopify\">Craft plugin that integrates with Shopify</a> and did some custom development work to integrate the forms with Zendesk.</p>','https://www.gopole.com/',0,NULL,'2014-09-12 19:41:24','2020-03-18 20:03:34','d7ac88ad-363e-48f2-9992-b89c4345fe50',1,NULL,NULL,NULL),(755,755,'gopole-listing',NULL,NULL,NULL,0,NULL,'2014-09-12 19:44:35','2022-01-15 13:26:29','995d0cb1-6c34-4e8d-91db-d7d93b5dc852',1,NULL,NULL,NULL),(756,760,'Pointless Corp',NULL,'<p>We relaunched the Pointless Corp website, which is the innovation lab at Viget. The site is now a place for us to showcase side projects and experiments. My role was the build the site and implement with Craft.</p>','http://pointlesscorp.com/',0,NULL,'2014-09-12 19:55:20','2020-03-18 20:03:34','2d1f1f49-476f-41b5-bfe1-4fcb9d956f03',1,NULL,NULL,NULL),(757,761,'pointless-baby-bookie-small',NULL,NULL,NULL,0,NULL,'2014-09-12 20:02:02','2022-01-15 13:26:29','262edc32-2893-4ed6-b318-c03be94634af',1,NULL,NULL,NULL),(758,762,'pointless-baby-bookie',NULL,NULL,NULL,0,NULL,'2014-09-12 20:02:03','2022-01-15 13:26:19','93cd26c2-37a0-4259-a89d-bfaf7a371db3',1,NULL,NULL,NULL),(759,763,'pointless-home-small',NULL,NULL,NULL,0,NULL,'2014-09-12 20:02:03','2022-01-15 13:26:19','36f1ace5-81f1-4f92-a19b-d5d26937a91f',1,NULL,NULL,NULL),(760,764,'pointless-home',NULL,NULL,NULL,0,NULL,'2014-09-12 20:02:05','2022-01-15 13:26:20','4b2de885-dd60-4c32-9f86-55b7ecbdbcbb',1,NULL,NULL,NULL),(761,765,'pointless-powwow-small',NULL,NULL,NULL,0,NULL,'2014-09-12 20:02:05','2022-01-15 13:26:20','a7f7924d-b35e-4392-beaf-ff445bab22f9',1,NULL,NULL,NULL),(762,766,'pointless-powwow',NULL,NULL,NULL,0,NULL,'2014-09-12 20:02:06','2022-01-15 13:26:20','7e767ac0-490f-4cbe-ae10-553ab82976e6',1,NULL,NULL,NULL),(763,767,'pointless-listing',NULL,NULL,NULL,0,NULL,'2014-09-12 20:15:38','2022-01-15 13:26:20','a9a220b4-4bcd-4c08-90b4-e6560271c43b',1,NULL,NULL,NULL),(764,774,'Volunteers of America',NULL,NULL,NULL,0,NULL,'2016-01-22 03:04:33','2023-03-07 22:03:28','0c35451c-7926-4dfd-8c72-499df8a2a85e',1,NULL,NULL,NULL),(765,775,'American Farmland Trust',NULL,NULL,NULL,0,NULL,'2016-01-22 03:05:04','2022-01-18 18:17:34','445c9878-c489-4c6d-9439-3635714f4fa1',1,NULL,NULL,NULL),(766,776,'PPS Plus',NULL,NULL,NULL,0,NULL,'2016-01-22 03:05:25','2022-01-18 03:22:27','e44d41f8-9926-4911-b642-a52232c37c3e',1,NULL,NULL,NULL),(767,777,'Open Space Institute',NULL,NULL,'https://www.openspaceinstitute.org/',0,NULL,'2017-08-24 00:37:05','2020-03-18 20:03:35','552be280-67cf-4649-8726-4648be71a135',1,NULL,NULL,NULL),(768,778,'Lully Sleep',NULL,NULL,NULL,0,NULL,'2017-08-24 00:40:51','2020-07-11 04:19:58','1c3381d6-bde5-454f-b070-6f93e25516b7',1,NULL,NULL,NULL),(769,779,'Lupus Resource Center',NULL,NULL,NULL,0,NULL,'2017-08-24 00:42:11','2020-03-18 20:03:35','bb41546a-0afb-4a52-b9ff-b1faffec0019',1,NULL,NULL,NULL),(770,780,'PBS Kids Development Tracker',NULL,NULL,NULL,0,NULL,'2017-08-24 00:43:50','2020-03-18 20:03:35','b050bb5c-9db7-447b-a0bc-2030f267cb3b',1,NULL,NULL,NULL),(771,781,'BDI Furniture',NULL,NULL,'https://www.bdiusa.com/',0,NULL,'2017-08-24 00:49:28','2021-01-18 20:36:16','c10ea0c1-69ea-4273-96c3-65c8e44f275e',1,NULL,NULL,NULL),(772,782,'NMCRS',NULL,NULL,NULL,0,NULL,'2017-08-24 00:50:44','2020-03-18 20:03:35','72cf6340-0ffa-4605-942e-f79f542a0146',1,NULL,NULL,NULL),(773,783,'Idea',NULL,NULL,NULL,0,NULL,'2017-08-24 00:51:04','2020-03-18 20:03:35','b047e19c-542a-4cbd-915b-df8e76702c27',1,NULL,NULL,NULL),(774,784,'Bethesda Creation Club',NULL,NULL,'https://creationclub.bethesda.net/en',0,NULL,'2017-08-24 01:01:24','2020-03-18 20:03:35','26c9fd48-ea2a-4ad4-a8c1-b3a6311f67c3',1,NULL,NULL,NULL),(775,785,'Lenovo Blog',NULL,NULL,NULL,0,NULL,'2017-08-24 01:04:52','2022-01-18 03:23:43','42be1f68-f3b2-445c-a7d5-6664242511e8',1,NULL,NULL,NULL),(777,787,'Voa',NULL,NULL,NULL,0,NULL,'2017-08-24 01:54:07','2022-01-15 13:26:23','1384e499-610c-4786-b118-1dd910f85a3d',1,NULL,NULL,NULL),(778,788,'Lenovo',NULL,NULL,NULL,0,NULL,'2017-08-24 01:57:28','2022-01-15 13:26:38','ce7f437d-a057-41fd-8c04-d173d1d9d290',1,NULL,NULL,NULL),(779,789,'Creating a “Filterable” Portfolio with jQuery',NULL,'<p>If you have worked in your field for a while, there is a pretty good chance that you have a rather extensive portfolio. To make it a little easier to navigate, you will probably be tempted to break them into different categories. In this tutorial, I will show you how to make \"filtering by category\" a little more interesting with just a little bit of jQuery.</p>','http://net.tutsplus.com/tutorials/javascript-ajax/creating-a-filterable-portfolio-with-jquery/',0,NULL,'2017-09-06 20:09:43','2023-01-22 15:18:27','394f9665-3650-4914-9642-2703657e55e7',1,NULL,NULL,NULL),(780,790,'5 Ways to Instantly Write Better CSS',NULL,'<p>Sure, anyone can write CSS. Even programs are doing it for you now. But is the CSS any good? Here are 5 tips to start improving yours.</p>','http://net.tutsplus.com/tutorials/html-css-techniques/5-tips-to-writing-better-css/',0,NULL,'2017-09-06 20:11:18','2023-01-22 15:18:27','db199fe7-4783-4938-aa9e-f7f4c395d83b',1,NULL,NULL,NULL),(781,791,'The 13 Most Essential Plugins for WordPress',NULL,'<p><a href=\"http://wordpress.org/\">WordPress</a> is a very powerful and flexible blog/content management system, but the thousands of <a href=\"http://wordpress.org/extend/plugins/\">plugins</a> really help to extend the basic functionality. Here are 13 essential plugins that you should immediately install after finishing the WordPress installation.</p>','http://net.tutsplus.com/articles/web-roundups/the-13-most-essential-plugins-for-wordpress/',0,NULL,'2017-09-06 20:12:59','2023-01-22 15:18:27','84bbf06c-a596-49f3-b301-656d406fd18c',1,NULL,NULL,NULL),(782,792,'Practical Uses of CSS3',NULL,'<p>We are certainly at an interesting point in time with the web. There are new techniques being created every day, and as developers, we have the privilege of deciding how and when to use them. I\'m the new guy at Viget (only been here a few weeks), and every company is different, so it is interesting adapting to Viget\'s standards. Some companies utilize <a href=\"http://en.wikipedia.org/wiki/Progressive_enhancement\">progressive enhancement</a> more than others, and I love that we utilize it when we can.</p>','http://www.viget.com/inspire/practical-uses-of-css3/',0,NULL,'2017-09-06 20:16:49','2023-01-22 15:18:26','a62bfe36-ba3d-4da7-810e-b0f6a8fb73e9',1,NULL,NULL,NULL),(783,793,'Creating a Google Map with ExpressionEngine',NULL,'<p>As Richard Tape has begun to show in his <a href=\"http://net.tutsplus.com/tutorials/php/become-an-expression-engine-superstar-in-5-days/\">part 1</a> and <a href=\"http://net.tutsplus.com/tutorials/other/become-an-expressionengine-superstar-in-5-days-part-2/\">part 2</a> articles on Becoming an ExpressionEngine Superstar, <abbr title=\"ExpressionEngine\">EE</abbr> is a flexible and easy to customize CMS. Now that everyone has some understanding of how EE works, I thought I would take this opportunity to show a relatively real world example of creating a dynamic Google Map powered by EE.</p>\n','http://net.tutsplus.com/tutorials/cmss/creating-a-google-map-with-expressionengine/',0,NULL,'2017-09-06 20:18:59','2023-01-22 15:18:25','5c9dec89-1448-4f49-991f-2a85bb3bae06',1,NULL,NULL,NULL),(784,794,'Custom File Inputs with a Bit of jQuery',NULL,'<p>File inputs are notorious for being a pain to style across all browsers.</p>','http://www.viget.com/inspire/custom-file-inputs-with-a-bit-of-jquery/',0,NULL,'2017-09-06 20:35:29','2023-01-22 15:18:25','efe9cbae-7b73-48b0-8f0c-5352bf38edff',1,NULL,NULL,NULL),(785,795,'Building an ExpressionEngine Mini Calendar Scroller',NULL,'<p>I recently decided I wanted to add a calendar of blog entries on my personal site. Luckily, ExpressionEngine has a tag for that, the <a href=\"http://expressionengine.com/user_guide/modules/channel/calendar.html\">Calendar Tag</a>. The functionality that I wanted was a little bit different from the two examples in the EE user guide. I wanted to show a calendar by month, and link the days that had an entry to that specific entry.\n</p>\n','http://www.viget.com/inspire/building-an-expressionengine-mini-calendar-scroller/',0,NULL,'2017-09-06 20:37:15','2023-01-22 15:18:25','094d03be-78a9-46a8-a025-3c5506126402',1,NULL,NULL,NULL),(786,796,'The ExpressionEngine Side of the New Viget.com: Part 1',NULL,'<p>Before I started at Viget, I remember thoroughly enjoying the <a href=\"https://viget.com/inspire/building-vigetcom-in-ee-part-1\">articles</a> by Doug about <a href=\"https://viget.com/inspire/building-vigetcom-in-ee-part-2\">building Viget.com</a>in EE. That was really some of my first exposure to EE, and from there I’ve come to love it. My hope is that I can recreate some of Doug’s magic and talk through how I built the current iteration of the Viget site in EE. I know, it’s gonna be hard to do. This post is going to be broken into multiple posts, but buckle up, this is gonna be a long one.</p>','http://viget.com/extend/ee-side-of-the-new-viget-part-1',0,NULL,'2017-09-06 20:51:27','2023-01-22 15:18:25','ff808431-e8e5-4895-bee3-2ff08c5ffff3',1,NULL,NULL,NULL),(787,797,'The ExpressionEngine Side of the New Viget.com: Part 2',NULL,'<p>I’ve <a href=\"https://viget.com/extend/ee-side-of-the-new-viget-part-1\">already talked about the EE setup</a> for the new viget.com, but now I want to talk about the code. It took a little longer than I wanted to get to it, but let’s finally talk templates and custom addon development.</p>','http://viget.com/extend/ee-side-of-the-new-viget-part-2',0,NULL,'2017-09-06 20:52:35','2023-01-22 15:18:25','be9c77ab-4fb4-4676-a969-e45abe7d43a9',1,NULL,NULL,NULL),(788,798,'Building a Nested Responsive Grid with Sass & Compass',NULL,'<p>Whether you are a hater of the technique or not, <a href=\"http://www.abookapart.com/products/responsive-web-design\">Responsive Design</a> is one of the most important things happening on the web right now. I am finally getting a chance to work on a project where we are taking a responsive approach to the site, and it’s been great, but I have definitely come across a few gotchas here and there.</p>','http://viget.com/inspire/building-a-nested-responsive-grid-with-sass-compass',0,NULL,'2017-09-06 20:54:24','2023-01-22 15:18:25','2197883f-781f-46bd-bf52-adf7b1218dba',1,NULL,NULL,NULL),(789,799,'You Matter',NULL,'<p> I’m not sure if it’s a couple of talks that I recently saw at <a href=\"http://peersconf.com/\">Peers Conference</a> or maybe the fact that I’m just getting older, but I’ve been thinking a lot lately about work/life balance and personal health.</p>','http://viget.com/flourish/you-matter',0,NULL,'2017-09-06 20:58:26','2023-01-22 15:18:25','fa3166db-a4cd-49bf-9714-82ce9baead55',1,NULL,NULL,NULL),(790,800,'craft',NULL,NULL,NULL,0,NULL,'2017-09-06 20:59:51','2018-02-15 21:01:40','8592f091-c48e-4764-8c1f-64acd4b80bdf',1,NULL,NULL,NULL),(791,801,'Getting Crafty',NULL,'<p> Here at Viget, we have been using <a href=\"http://ellislab.com/expressionengine\">ExpressionEngine</a> as our primary off-the-shelf CMS for years. <a href=\"http://buildwithcraft.com/\">Craft</a> and <a href=\"http://statamic.com/\">Statamic</a>, both of which are developed by EE add-on developers, have really caught our attention. We finally determined that Craft would be an appropriate solution for a project, and while building the site, I built a couple small plugins.</p>','http://viget.com/extend/getting-crafty',0,NULL,'2017-09-06 21:00:44','2023-01-22 15:18:25','d0e156f7-e3d5-4fae-bf9d-c0fd60f4f07e',1,NULL,NULL,NULL),(792,802,'Reroute Plugin for Craft',NULL,'<p> You know what\'s really annoying? Having a million redirects in your .htaccess file. When we build EE sites, <a href=\"http://devot-ee.com/add-ons/detour-pro\">Detour Pro</a> has become a part of our builds so that other team members and clients can manage redirects. But, that solution won\'t really work when you launch your <a href=\"http://www.orbcomm.com/\">first Craft site for a client</a>!</p>\n','http://viget.com/extend/reroute-plugin-for-craft',0,NULL,'2017-09-06 21:03:38','2023-01-22 15:18:25','f7525a86-dc29-4d1b-b1d3-2c3f5ffff1a1',1,NULL,NULL,NULL),(793,803,'shopify',NULL,NULL,NULL,0,NULL,'2017-09-06 21:16:09','2018-02-15 21:01:40','0235011a-2401-4f00-bf91-53787cdc3f39',1,NULL,NULL,NULL),(794,804,'Integrating Craft & Shopify',NULL,'<p>As we have the opportunity work on more <a href=\"http://buildwithcraft.com/\">Craft</a> sites at Viget, we’ve been able to do some interesting integrations, like our most recent integration with the ecommerce platform <a href=\"http://www.shopify.com/\">Shopify</a>. Below is a step-by-step guide to implementing Craft and Shopify by utilizing a plugin I built.</p>','https://www.viget.com/articles/integrating-craft-shopify',0,NULL,'2017-09-06 21:16:23','2023-01-22 15:18:25','b2ce2a04-ef57-4ecd-8692-65640244ddd5',1,NULL,NULL,NULL),(795,805,'Attending & Speaking at the Craft CMS Summit',NULL,'<p>I’m a little belated, but I was lucky enough to attend and speak at the first <a href=\"http://craftcmssummit.com\">Craft CMS Summit</a> two weeks ago. This was the first online conference that I had ever attended, and I was thoroughly impressed. I had always been a bit hesitant to attend online conferences because I was unsure about the quality, but after experiencing it firsthand I won\'t hesitate in the future. Everything was very well organized and the speakers all gave excellent presentations. It was also nice to sit and learn in the comfort of my own home instead of having to deal with the extra burdon of traveling for a conference. Side note: Environments for Humans, the company who hosted the conference, has <a href=\"http://environmentsforhumans.com/schedule/\">additional upcoming events</a>.</p>','https://www.viget.com/articles/craft-cms-summit',0,NULL,'2017-09-06 21:20:08','2023-01-22 15:18:25','c2589d98-d574-4c8d-8af0-bac1de3c9bf9',1,NULL,NULL,NULL),(796,806,'Why We Love Craft CMS',NULL,'<p>I decided to write a little post to give some insight into why we love Craft so much at Viget.</p>','https://www.viget.com/articles/why-we-love-craft-cms',0,NULL,'2017-09-06 21:21:10','2023-01-22 15:18:24','ea068038-f612-404d-b863-c09449f7f4d9',1,NULL,NULL,NULL),(797,807,'Front-End Parts Kits in Craft',NULL,'<p><a href=\"http://patternlab.io/\">Pattern library</a>, <a href=\"http://24ways.org/2011/front-end-style-guides/\">style</a> <a href=\"http://codeforamerica.clearleft.com/\">guide</a>, UI library, parts kit; call them what you want, but these are essential to building websites of any scale. Typically, this is something you manually construct to demonstrate all the modules and pieces that you have constructed, but I have been investigating ways to make them a bit more dynamic when building sites with <a href=\"http://buildwithcraft.com/\">Craft</a>.</p>','https://www.viget.com/articles/front-end-parts-kits-in-craft',0,NULL,'2017-09-06 21:22:15','2023-01-22 15:18:24','297571f9-04c1-4277-aac3-af61e22a45a6',1,NULL,NULL,NULL),(798,808,'How to Survive Working from Home',NULL,'<p>When I started working here five years ago, we had two offices: one in Falls Church, VA and another in Durham, NC. Now we have a third office in Boulder, CO and a handful of employees, including myself, working remotely. Being set up the way we are, we are all used to interacting with remote team members, but the majority of the employees work in an office.</p>\n<p>I happily worked from the Virginia office for three years, but because of personal circumstance, I had to move to Michigan for a year. I didn’t want to leave Viget, so I asked for the opportunity to work remotely; I was anxious and hesitant about giving up the office environment.</p>','https://www.viget.com/articles/how-to-survive-working-from-home',0,NULL,'2017-09-06 21:25:14','2023-01-22 15:18:24','f1b47a3f-9a61-4d30-a2a1-f9221957fe7a',1,NULL,NULL,NULL),(799,809,'Pending User Plugin for Craft',NULL,'<p>On a recent project that was built on <a href=\"https://craftcms.com/\">Craft</a>, I finally got the chance the kick the tires on building a members-only section with Craft. Out of the box, Craft provides so much user functionality, but the user moderation process wasn’t exactly what the client wanted. Luckily, Craft provides us with the ability to change that process with ease.</p>','https://www.viget.com/articles/pending-user-plugin-for-craft',0,NULL,'2017-09-06 21:26:59','2023-01-22 15:18:24','54b61847-81e2-4483-93b4-0a780b2b0d76',1,NULL,NULL,NULL),(800,810,'Responsive Images with srcset & Craft',NULL,'<p><a href=\"https://www.viget.com/about/team/tmarshall\">Tommy</a> recently wrote about <a href=\"https://www.viget.com/articles/easy-responsible-background-images-in-craft-and-wordpress\">responsive background images in Craft</a>, but I wanted to follow up about how we used the <code>&lt;img&gt;</code> element and <code>srcset</code> to build responsive images on this very site (powered by <a href=\"https://craftcms.com/\">Craft</a>).</p>','https://www.viget.com/articles/responsive-images-with-srcset-craft',0,NULL,'2017-09-06 21:29:24','2023-01-22 15:18:24','83e366d3-f8aa-4dd7-a887-701650f9e3a0',1,NULL,NULL,NULL),(801,811,'Craft Color Swatches Plugin',NULL,'<p>The control that <a href=\"https://craftcms.com/\">Craft</a> can provide a user is what makes it stand out as a content management system. But sometimes we want to limit what a user can choose from. Craft has a <a href=\"https://craftcms.com/docs/color-fields\">built-in Color field</a> which allows a user to select any color from a color picker. There are times when we only want a user to choose from a select number of colors though. Previously we have done this by using a dropdown with a list of colors, but I decided to build a plugin to allow a user to select from an admin-defined set of colors.</p>','https://www.viget.com/articles/craft-color-swatches-plugin',0,NULL,'2017-09-06 21:30:21','2023-01-22 15:18:24','1db992be-b519-495c-9e1d-fa033e5ef12f',1,NULL,NULL,NULL),(802,812,'js',NULL,NULL,NULL,0,NULL,'2017-09-06 21:30:42','2018-02-15 21:01:40','45841edc-0e9b-474c-a22b-015aae763362',1,NULL,NULL,NULL),(803,813,'Managing CSS & JS in an HTTP/2 World',NULL,'<p>We have been hearing about HTTP/2 for years now. We\'ve even <a href=\"https://www.viget.com/articles/getting-started-with-http-2-part-1\">blogged</a> <a href=\"https://www.viget.com/articles/getting-started-with-http-2-part-2\">a little bit</a> about it. But we hadn\'t really <em>done</em> much with it. Until now. On a few recent projects, I made it a goal to use HTTP/2 and figure out how to best utilize <a href=\"https://http2.github.io/faq/#why-is-http2-multiplexed\">multiplexing</a>. This post isn\'t necessarily going to cover <em>why</em> you should use HTTP/2, but it\'s going to discuss how I\'ve been managing CSS &amp; JS to account for this paradigm shift.</p>\n','https://www.viget.com/articles/managing-css-js-http-2',0,NULL,'2017-09-06 21:31:12','2023-01-22 15:18:24','bbe96ca8-5f8e-40bb-a691-09f18273d38c',1,NULL,NULL,NULL),(806,816,'Modal',NULL,NULL,NULL,0,NULL,'2017-09-07 21:23:56','2022-01-15 13:26:42','cc0df814-9602-41b8-925c-9f8a46f7e922',1,NULL,NULL,NULL),(807,817,'Jquery-Cookie',NULL,NULL,NULL,0,NULL,'2017-09-07 21:24:04','2022-01-15 13:26:45','99bd1e36-ca9e-4445-bc4b-3c3f4364796f',1,NULL,NULL,NULL),(808,818,'Striper',NULL,NULL,NULL,0,NULL,'2017-09-07 21:24:07','2022-01-15 13:26:46','19b97cde-5ea7-4582-bebc-370d7e492dae',1,NULL,NULL,NULL),(809,819,'Striperbad',NULL,NULL,NULL,0,NULL,'2017-09-07 21:24:07','2022-01-15 13:26:46','1c17a980-5d59-4c07-911a-1f531363408d',1,NULL,NULL,NULL),(810,820,'Submitform',NULL,NULL,NULL,0,NULL,'2017-09-07 21:24:07','2022-01-15 13:26:46','a80ed32b-9756-4c12-8493-4cd1139bfba8',1,NULL,NULL,NULL),(811,821,'Aft',NULL,NULL,NULL,0,NULL,'2017-09-21 00:29:07','2022-01-15 13:26:29','3c1c6655-9e00-45e1-8f59-e4ede14434aa',1,NULL,NULL,NULL),(812,822,'Pps-Plus',NULL,NULL,NULL,0,NULL,'2017-09-21 00:35:21','2022-01-15 13:26:20','e0ec1e20-bc2b-428e-abd1-f9cdcc8245ed',1,NULL,NULL,NULL),(814,824,'Osi',NULL,NULL,NULL,0,NULL,'2017-09-21 00:47:13','2022-01-15 13:26:29','e6352307-d9d7-46b4-82b7-0acdaf61b197',1,NULL,NULL,NULL),(816,826,'Lully',NULL,NULL,NULL,0,NULL,'2017-09-21 00:54:43','2022-01-15 13:26:38','a4bf4898-6a00-45d7-b51c-75488675c046',1,NULL,NULL,NULL),(817,827,'Lupus-Resource-Center',NULL,NULL,NULL,0,NULL,'2017-09-21 01:00:32','2022-01-15 13:26:38','d1430bfe-a86a-448b-ae76-d2110f6e78d4',1,NULL,NULL,NULL),(818,828,'Pbs-Kids',NULL,NULL,NULL,0,NULL,'2017-09-21 01:04:32','2022-01-15 13:26:22','058ab744-7c0d-4542-9852-83dcc034517d',1,NULL,NULL,NULL),(819,829,'Bethesda-Creation-Club',NULL,NULL,NULL,0,NULL,'2017-09-21 01:14:08','2022-01-15 13:26:33','852e2614-cf2a-461a-85af-873f21dbd3de',1,NULL,NULL,NULL),(820,830,'Bdi',NULL,NULL,NULL,0,NULL,'2017-09-21 18:45:28','2022-01-15 13:26:32','4b7d4d0c-0046-40bd-bc59-f547a616fcf3',1,NULL,NULL,NULL),(821,831,'Viget',NULL,NULL,NULL,0,NULL,'2017-09-21 19:01:20','2022-01-15 13:26:22','ca597dca-7cf4-4be8-8014-265581a95a65',1,NULL,NULL,NULL),(822,832,'Yesifoods',NULL,NULL,NULL,0,NULL,'2017-09-21 19:17:47','2022-01-15 13:26:38','907f1136-4465-49d1-9464-957f2360194c',1,NULL,NULL,NULL),(823,833,'JavaScript',NULL,NULL,NULL,0,NULL,'2017-09-21 19:18:14','2018-02-15 21:01:40','7d80e041-a7fa-4708-8b99-998e15628f45',1,NULL,NULL,NULL),(824,834,'Yes I Foods',NULL,NULL,NULL,0,NULL,'2017-09-21 19:18:21','2022-01-18 03:22:46','a74c60e8-e463-448a-be1b-d2ac9d99be43',1,NULL,NULL,NULL),(825,835,'Elginracing',NULL,NULL,NULL,0,NULL,'2017-09-21 19:21:12','2022-01-15 13:26:30','06a0e379-70c7-4268-91ee-fc1b073d3f14',1,NULL,NULL,NULL),(826,836,'Elgin Racing',NULL,NULL,'http://elginracing.com/',0,NULL,'2017-09-21 19:21:41','2022-01-18 03:22:12','243d178d-9e62-4086-b311-bad1ae377fd5',1,NULL,NULL,NULL),(827,837,'Me',NULL,NULL,NULL,0,NULL,'2017-09-29 20:35:47','2022-01-15 13:26:39','07da4626-7357-4f9b-b52b-77e295a82654',1,NULL,NULL,NULL),(828,838,'Newman-Backyard',NULL,NULL,NULL,0,NULL,'2017-09-29 20:43:39','2022-01-15 13:26:39','8d670760-160d-47e5-a1ba-68ee6c571783',1,NULL,NULL,NULL),(829,839,'Newman-Beach',NULL,NULL,NULL,0,NULL,'2017-09-29 20:43:53','2022-01-15 13:26:39','622e0756-ba41-4900-b372-c5196b29f52e',1,NULL,NULL,NULL),(830,840,'Bike',NULL,NULL,NULL,0,NULL,'2017-09-29 20:56:05','2022-01-15 13:26:39','1a253168-eae4-4d22-94d3-41556d1a3e09',1,NULL,NULL,NULL),(831,841,'Bball-1',NULL,NULL,NULL,0,NULL,'2017-10-02 18:40:19','2022-01-15 13:26:38','ff90f065-e6f0-4cc9-8e29-c2d5a8224304',1,NULL,NULL,NULL),(832,842,'Bball-2',NULL,NULL,NULL,0,NULL,'2017-10-02 18:40:19','2022-01-15 13:26:38','5df03dc4-fba2-4519-90c6-dc9ee0b95ec6',1,NULL,NULL,NULL),(833,843,'Bball-3',NULL,NULL,NULL,0,NULL,'2017-10-02 18:40:20','2022-01-15 13:26:38','bbe27700-428a-46a7-aef6-3be285801ac3',1,NULL,NULL,NULL),(834,844,'Bball-4',NULL,NULL,NULL,0,NULL,'2017-10-02 18:40:20','2022-01-15 13:26:39','7e60bf7c-3356-4b9b-9412-474e0dffad59',1,NULL,NULL,NULL),(835,845,'Bball-5',NULL,NULL,NULL,0,NULL,'2017-10-02 18:40:20','2022-01-15 13:26:39','4c5c5dc6-34cf-4f97-8c86-c6494e4ea54f',1,NULL,NULL,NULL),(836,846,'Food-1',NULL,NULL,NULL,0,NULL,'2017-10-02 18:57:19','2022-01-15 13:26:39','7954e6ba-f41e-433a-9009-8af648d35648',1,NULL,NULL,NULL),(837,847,'Food-2',NULL,NULL,NULL,0,NULL,'2017-10-02 18:57:19','2022-01-15 13:26:39','f5bab334-9512-491b-96e0-d2b906469db3',1,NULL,NULL,NULL),(838,848,'Food-3',NULL,NULL,NULL,0,NULL,'2017-10-02 18:57:19','2022-01-15 13:26:39','81470ff1-31c3-4de5-bdb3-a39a328e8fba',1,NULL,NULL,NULL),(839,849,'Food-4',NULL,NULL,NULL,0,NULL,'2017-10-02 18:57:20','2022-01-15 13:26:39','06f841fc-22cb-46eb-b40b-3f9df76ab671',1,NULL,NULL,NULL),(840,850,'Food-5',NULL,NULL,NULL,0,NULL,'2017-10-02 18:57:20','2022-01-15 13:26:39','f6609386-71e5-4eec-960f-3a508a8dc02d',1,NULL,NULL,NULL),(841,851,'Food-6',NULL,NULL,NULL,0,NULL,'2017-10-02 18:57:20','2022-01-15 13:26:39','a73c3f94-37ec-4d4c-82f8-6a557e1a5aa3',1,NULL,NULL,NULL),(842,853,'Homepage',NULL,NULL,NULL,0,NULL,'2017-10-04 16:05:46','2023-01-22 15:22:35','2a34dc34-f17f-4533-9170-af20ecd974b0',1,'I Build Things on the Internet','<p>I’m a <strong>Senior Software Engineer</strong> at <a href=\"https://dutchie.com/\">Dutchie</a>.<br />If you have a project that you think I can help with, <a href=\"/contact\">get in touch</a>.</p>',NULL),(843,854,'Why You Should Update to Craft 3 ASAP',NULL,'<p>Updating to Craft 3 means new features for your site with improved performance and security. This latest version was released earlier this year, and you should update as soon as possible!</p>','https://www.viget.com/articles/why-you-should-update-to-craft-3-asap/',0,NULL,'2019-01-24 00:09:55','2023-01-22 15:18:24','16916ec6-0b58-47fb-8322-590d25ff347b',1,NULL,NULL,NULL),(844,855,'JS',NULL,NULL,NULL,0,NULL,'2019-01-24 00:56:52','2019-01-24 00:56:52','5c9b2a75-2d63-4505-898f-e7891786e230',1,NULL,NULL,NULL),(845,856,'Hamilton Company',NULL,NULL,'https://www.hamiltoncompany.com/',0,NULL,'2019-01-24 00:56:54','2020-03-18 20:03:35','6291f7ad-cdb2-4432-9f7b-a37fa1c86889',1,NULL,NULL,NULL),(846,857,'Hamilton',NULL,NULL,NULL,0,NULL,'2019-01-24 02:15:06','2022-01-15 13:26:31','4f390e94-953e-447c-beec-418ab405e29d',1,NULL,NULL,NULL),(847,858,'Level Up with Craft CMS: Know When to Ditch Twig',NULL,'<p>If you notice your Twig templates are getting overly complex, it may be time to extend Craft with a custom Module.</p>','https://www.viget.com/articles/level-up-with-craft-cms-know-when-to-ditch-twig/',0,NULL,'2019-06-07 21:30:23','2023-01-22 15:18:24','6e701e76-daca-4403-82d7-16da30124eaf',1,NULL,NULL,NULL),(848,859,'Homepage',NULL,NULL,NULL,0,NULL,'2019-10-09 15:56:07','2019-10-09 15:56:07','f080484c-eb21-4b29-a29e-ddb8f279d333',1,'I Build Things on the Internet','<p>To be more specific: I’m a senior front-end developer working at <a href=\"https://www.viget.com\">Viget</a>, and I do freelance work on the side. <a href=\"%7B%7B%20url(\'contact\')%20%7D%7D\"></a><a href=\"{entry:5:url}\">Get in touch</a> if you have a project that you think I can help with.</p>\n<p>Below are four websites that I have built, but you can also <a href=\"/portfolio\">see all of the projects</a> I’ve worked on.</p>',NULL),(849,860,'Homepage',NULL,NULL,NULL,0,NULL,'2019-10-09 15:56:07','2019-10-09 15:56:07','74cd64e1-fcb1-44f9-b994-b21d76d82f40',1,'I Build Things on the Internet','<p>To be more specific: I’m a senior front-end developer working at <a href=\"https://www.viget.com\">Viget</a>, and I do freelance work on the side. <a href=\"%7B%7B%20url(\'contact\')%20%7D%7D\"></a><a href=\"{entry:5:url}\">Get in touch</a> if you have a project that you think I can help with.</p>\n<p>Below are four websites that I have built, but you can also <a href=\"/portfolio\">see all of the projects</a> I’ve worked on.</p>',NULL),(850,861,'About',NULL,NULL,NULL,0,NULL,'2019-10-09 15:56:07','2019-10-09 15:56:07','1dd54fef-8aca-4291-85b1-14acaeb6afa4',1,NULL,NULL,NULL),(851,867,'About',NULL,NULL,NULL,0,NULL,'2019-10-09 15:56:08','2019-10-09 15:56:08','561b07ca-3422-4f6f-89b7-31953e89c3ed',1,NULL,NULL,NULL),(852,873,'Contact','So you want to get in touch?',NULL,NULL,0,NULL,'2019-10-09 15:56:08','2019-10-09 15:56:08','471339b1-4da5-4828-adf2-56465b886ae5',1,NULL,NULL,NULL),(853,874,'Contact','So you want to get in touch?',NULL,NULL,0,NULL,'2019-10-09 15:56:08','2019-10-09 15:56:08','357b69a2-3f7e-433e-acff-a829bd3fd9f9',1,NULL,NULL,NULL),(854,875,'PPS Plus',NULL,NULL,'http://ppsplus.com/',0,NULL,'2019-10-09 16:40:20','2019-10-09 16:40:20','ef20a1dd-e989-4051-a3ba-cdd9367c5744',1,NULL,NULL,NULL),(855,876,'American Farmland Trust',NULL,NULL,'https://www.farmland.org/',0,NULL,'2019-10-09 16:40:21','2019-10-09 16:40:21','6c5c1446-580b-4f56-95a6-859591e95ccf',1,NULL,NULL,NULL),(856,877,'Volunteers of America',NULL,NULL,'https://www.voa.org/',0,NULL,'2019-10-09 16:40:21','2019-10-09 16:40:21','13ce5926-3481-4536-964a-0cb7613db226',1,NULL,NULL,NULL),(857,878,'Weekly Link Round-Up #7',NULL,'<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<ul><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’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=\"https://html.com/blog/23-scientific-website-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 “Advanced Search” is not a good term. I like what Roger suggests: “Refined” and “Enhanced”.</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’t really design for the web if you don’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>',NULL,1750,NULL,'2019-10-09 16:40:21','2019-10-09 16:40:21','b3d89c55-e966-476d-99e5-605b88319529',1,NULL,NULL,NULL),(858,879,'Level Up with Craft CMS: Know When to Ditch Twig',NULL,'<p>If you notice your Twig templates are getting overly complex, it may be time to extend Craft with a custom Module.</p>','https://www.viget.com/articles/level-up-with-craft-cms-know-when-to-ditch-twig/',0,NULL,'2019-10-09 16:40:21','2019-10-09 16:40:21','27f38c90-5129-498a-9517-5835089e92ad',1,NULL,NULL,NULL),(859,880,'Hamilton Company',NULL,NULL,'https://www.hamiltoncompany.com/',0,NULL,'2019-10-09 16:40:21','2019-10-09 16:40:21','c07dc4c3-b060-48b8-94ae-5954b9c9eaef',1,NULL,NULL,NULL),(860,881,'Hamilton Company',NULL,NULL,'https://www.hamiltoncompany.com/',0,NULL,'2019-10-09 16:40:21','2019-10-09 16:40:21','125e9acf-2626-4394-9535-35f4311e61be',1,NULL,NULL,NULL),(861,882,'Hamilton Company',NULL,NULL,'https://www.hamiltoncompany.com/',0,NULL,'2019-10-09 16:40:21','2019-10-09 16:40:21','978d8f9d-ded4-4bf1-97d4-6ed121a3c8f2',1,NULL,NULL,NULL),(862,883,'Why You Should Update to Craft 3 ASAP',NULL,'<p>Updating to Craft 3 means new features for your site with improved performance and security. This latest version was released earlier this year, and you should update as soon as possible!</p>','https://www.viget.com/articles/why-you-should-update-to-craft-3-asap/',0,NULL,'2019-10-09 16:40:21','2019-10-09 16:40:21','63e3a11e-dea4-42e1-a1e6-c35a3852d87f',1,NULL,NULL,NULL),(863,884,'Homepage',NULL,NULL,NULL,0,NULL,'2019-10-09 16:40:21','2019-10-09 16:40:22','0e30e682-3876-42d2-8db8-e3f36ceddf5c',1,'I Build Things on the Internet','<p>To be more specific: I’m a senior front-end developer working at <a href=\"https://www.viget.com\">Viget</a>, and I do freelance work on the side. <a href=\"%7B%7B%20url(\'contact\')%20%7D%7D\"></a><a href=\"{entry:5:url}\">Get in touch</a> if you have a project that you think I can help with.</p>\n<p>Below are four websites that I have built, but you can also <a href=\"/portfolio\">see all of the projects</a> I’ve worked on.</p>',NULL),(864,885,'AIGA Design Continuum Fund',NULL,'<p>The AIGA Design Continuum Fund is a yearly scholarship awarded to a local design student. We took on this project as pro-bono to support the local design community, and my role was to build the front-end of the site and to integrate into ExpressionEngine.</p>',NULL,0,NULL,'2019-10-09 16:40:22','2019-10-09 16:40:22','3bb7e636-4b14-4623-8351-2fd09400be90',1,NULL,NULL,NULL),(865,890,'Homepage',NULL,NULL,NULL,0,NULL,'2019-10-09 16:40:22','2019-10-09 16:40:22','1ed92306-a16e-47bf-a2f2-fc0468b21c4b',1,'I’m Trevor Davis;<br>\nI Build Things on the Internet','<p>To be more specific: I’m a senior front-end developer working at <a href=\"https://www.viget.com\">Viget</a>, and I do freelance work on the side. <a href=\"%7B%7B%20url(\'contact\')%20%7D%7D\"></a><a href=\"{entry:5:url}\">Get in touch</a> if you have a project that you think I can help with.</p>\n<p>Below are four random websites that I have built, but you can also <a href=\"/portfolio\">see all of the projects</a> I’ve worked on.</p>',NULL),(866,891,'Homepage',NULL,NULL,NULL,0,NULL,'2019-10-09 16:40:22','2019-10-09 16:40:22','98b32df1-7d15-4655-8fd8-fcdd33b99375',1,'I’m Trevor Davis;<br>\nI Build Things on the Internet','<p>Description</p>',NULL),(867,892,'Homepage',NULL,NULL,NULL,0,NULL,'2019-10-09 16:40:22','2019-10-09 16:40:22','88504ad7-22d9-4c7e-ac3d-cb0fd9a4d1f2',1,'I Build Things on the Internet','<p>To be more specific: I’m a senior front-end developer working at <a href=\"https://www.viget.com\">Viget</a>, and I do freelance work on the side. <a href=\"%7B%7B%20url(\'contact\')%20%7D%7D\"></a><a href=\"{entry:5:url}\">Get in touch</a> if you have a project that you think I can help with.</p>\n<p>Below are four websites that I have built, but you can also <a href=\"/portfolio\">see all of the projects</a> I’ve worked on.</p>',NULL),(868,893,'About',NULL,NULL,NULL,0,NULL,'2019-10-09 16:40:22','2019-10-09 16:40:23','9197b70d-f801-4115-84fe-bf9138436917',1,NULL,NULL,NULL),(869,899,'About',NULL,NULL,NULL,0,NULL,'2019-10-09 16:40:23','2019-10-09 16:40:23','d559d548-7fdb-4f7c-b26a-16f4bfc64a2c',1,NULL,NULL,NULL),(870,905,'About',NULL,NULL,NULL,0,NULL,'2019-10-09 16:40:23','2019-10-09 16:40:23','48ebb31e-37f1-44ea-9268-b0ed8b3522b6',1,NULL,NULL,NULL),(871,911,'About',NULL,NULL,NULL,0,NULL,'2019-10-09 16:40:23','2019-10-09 16:40:24','3a5dfb2b-553d-4f67-b1ed-c0edd6fe0a39',1,NULL,NULL,NULL),(872,917,'About',NULL,NULL,NULL,0,NULL,'2019-10-09 16:40:24','2019-10-09 16:40:24','4a11615f-d48a-4935-976e-e2588a996480',1,NULL,NULL,NULL),(873,923,'About',NULL,NULL,NULL,0,NULL,'2019-10-09 16:40:24','2019-10-09 16:40:24','d6acc5bf-5c34-4646-b441-055c77adfa03',1,NULL,NULL,NULL),(874,929,'About',NULL,NULL,NULL,0,NULL,'2019-10-09 16:40:24','2019-10-09 16:40:24','4bce8e6f-64bb-424a-b5cb-b641ef9fc4e7',1,NULL,NULL,NULL),(875,935,'About',NULL,NULL,NULL,0,NULL,'2019-10-09 16:40:25','2019-10-09 16:40:25','403ef3e3-5b2c-4fcb-b53c-08a268b597ce',1,NULL,NULL,NULL),(876,941,'About',NULL,NULL,NULL,0,NULL,'2019-10-09 16:40:25','2019-10-09 16:40:25','f01077f7-0b04-4f55-bb8a-1f2d31f92990',1,NULL,NULL,NULL),(877,947,'About',NULL,NULL,NULL,0,NULL,'2019-10-09 16:40:25','2019-10-09 16:40:25','c479e372-ce7e-46a1-a5d0-6d4b1668437d',1,NULL,NULL,NULL),(878,953,'About',NULL,NULL,NULL,0,NULL,'2019-10-09 16:40:25','2019-10-09 16:40:26','67188251-0e95-4fd1-a5d1-64a66bed6c69',1,NULL,NULL,NULL),(879,959,'About',NULL,NULL,NULL,0,NULL,'2019-10-09 16:40:26','2019-10-09 16:40:26','87de509f-9d58-4962-acc2-a07c8dfcc186',1,NULL,NULL,NULL),(880,965,'Elgin Racing',NULL,NULL,'http://elginracing.com/',0,NULL,'2019-10-09 16:40:26','2019-10-09 16:40:26','e21d4820-41cf-4cf8-817d-88018ba559a7',1,NULL,NULL,NULL),(881,966,'Yes I Foods',NULL,NULL,'http://yesifoods.com/',0,NULL,'2019-10-09 16:40:26','2019-10-09 16:40:26','3408c7df-aa00-41e4-ae35-365643a67b3b',1,NULL,NULL,NULL),(882,967,'Volunteers of America',NULL,NULL,'https://www.voa.org/',0,NULL,'2019-10-09 16:40:26','2019-10-09 16:40:26','ecbbdd1c-0ec6-4ad2-a769-de8f7c9d6faf',1,NULL,NULL,NULL),(883,968,'Orbcomm',NULL,'<p>Building this site gave me the opportunity to build a site with <a href=\"http://buildwithcraft.com/\">Craft</a>; something I had been itching to use on a project for some time. My role in the project was to build the front-end of the site, configure Craft, and then integrate the two. In building this site, I also created three Craft plugins: <a href=\"https://github.com/davist11/craft-bust\">Bust</a>, <a href=\"https://github.com/davist11/craft-listing-section\">Listing Section</a>, and <a href=\"https://github.com/davist11/craft-reroute\">Reroute</a>.</p>',NULL,0,NULL,'2019-10-09 16:40:27','2019-10-09 16:40:27','a724db35-1bca-46a9-8e64-01e36263a84f',1,NULL,NULL,NULL),(884,974,'Lansinoh',NULL,'<p>I sure didn’t know it before I started the project, but Lansinoh is one of the leaders in the breastfeeding industry. Since mobile accounted for 47% of visits, building a site to adapt to any device was a must. My role in the project was to build the front-end of the site and integrate with ExpressionEngine, which included ecommerce, user submission forms, and a store finder. This was probably the most complex ExpressionEngine site that I have built to date.</p>',NULL,0,NULL,'2019-10-09 16:40:27','2019-10-09 16:40:27','3f0ca845-7ec5-4711-9d68-8d23a3fcc8a3',1,NULL,NULL,NULL),(885,985,'Carr Workplaces',NULL,'<p>We (Viget) had originally built Carr’s site many years ago. We had the opportunity to redesign it and implement a new CMS. My role in the project was to help a little with building some pieces of the front-end, but my main role was to implement the site in ExpressionEngine, which included custom add-on development.</p>',NULL,0,NULL,'2019-10-09 16:40:27','2019-10-09 16:40:28','4d2d4441-aeaa-489e-9818-bf54cd2a6e27',1,NULL,NULL,NULL),(886,992,'Ultimat Vodka',NULL,'<p>Ultimat Vodka wanted a different type of experience for their site, so I utilized AJAX to give the site a more streamlined experience. I also had to create an age blocker so that only people 18 years and older were allowed to access the site. My role in the project was to build the front-end and to complete the ExpressionEngine integration.</p>',NULL,0,'84871419','2019-10-09 16:40:28','2019-10-09 16:40:28','9f338396-276d-4959-a100-3576fee816be',1,NULL,NULL,NULL),(887,998,'NMS',NULL,'<p>New Media Strategies partnered with us (Viget) to recreate their web presence. They were looking for something new and different. My role on the project was to build the front-end, which included some light canvas work, and to implement the site into ExpressionEngine, which included custom add-on development.</p>',NULL,0,NULL,'2019-10-09 16:40:28','2019-10-09 16:40:28','17f8ab8e-fbec-4a6f-af1c-684ad317523d',1,NULL,NULL,NULL),(888,1007,'NMS',NULL,'<p>New Media Strategies partnered with us (Viget) to recreate their web presence. They were looking for something new and different. My role on the project was to build the front-end, which included some light canvas work, and to implement the site into ExpressionEngine, which included custom add-on development.</p>',NULL,0,NULL,'2019-10-09 16:40:28','2019-10-09 16:40:29','e23d7ceb-9994-43ec-9c1d-bcf065f74ce8',1,NULL,NULL,NULL),(889,1016,'Team Viget',NULL,'<p>Our <a href=\"http://v1.teamviget.com/\">existing Team Viget site</a> was out of date and was mainly focused on bringing new designers to Viget, and we decided that it was time to make it reflect <em>all</em> of Viget. My role in the project was to build it with HTML &amp; CSS, and to code the JavaScript interactions. Then, I implemented into ExpressionEngine so others could easily add stories. This site works best in Webkit browsers because we were able to take advantage of a lot of experimental properties.</p>',NULL,0,'84871420','2019-10-09 16:40:29','2019-10-09 16:40:29','18b79a87-d222-446b-8f4e-5eb665bfa5f2',1,NULL,NULL,NULL),(890,1021,'PUMA',NULL,'<p>After building many smaller sub-sites, we (Viget) were finally able to tackle puma.com itself. This required uniting many of those sub-sites we had already build into new standardized templates that would be uniquely “skinned” for each “category” site. My role included collaborating very closely with UX &amp; Design, HTML, CSS, and JavaScript.</p>',NULL,0,NULL,'2019-10-09 16:40:29','2019-10-09 16:40:29','d54cf58f-aef7-44da-bed7-951da4e2a6fc',1,NULL,NULL,NULL),(891,1028,'PUMA Golf',NULL,'<p>To continue our work with PUMA, I built the Golf site. This was similar to some of the other PUMA sites that I have built, except for a few new pieces here and there. My role in this project was to build-out the many pages and to implement the JavaScript interactions throughout the site. I also worked with our developers to integrate with our custom Ruby on Rails code.</p>',NULL,0,NULL,'2019-10-09 16:40:29','2019-10-09 16:40:30','07c17ec3-536d-40fc-a253-05e71db817ce',1,NULL,NULL,NULL),(892,1033,'PUMA Golf',NULL,'<p>To continue our work with PUMA, I built the Golf site. This was similar to some of the other PUMA sites that I have built, except for a few new pieces here and there. My role in this project was to build-out the many pages and to implement the JavaScript interactions throughout the site. I also worked with our developers to integrate with our custom Ruby on Rails code.</p>',NULL,0,NULL,'2019-10-09 16:40:30','2019-10-09 16:40:30','5347d630-2083-4f03-888f-a3b4880624c0',1,NULL,NULL,NULL),(893,1038,'PUMA Clever Little Bag',NULL,'<p>PUMA spent a lot of time and money developing a new shoebox that would reduce its environmental impact. The result was a cool concept of a Clever Little Bag. We built a special page to help introduce the bag to the world. My role in this project was to build-out the site and add in the JavaScript functionality.</p>\n<p>The one really fun feature was the slide deck of the “big plans” that can be seen all the way at the end of the page. I also built a cross browser <a href=\"http://www.viget.com/inspire/custom-file-inputs-with-a-bit-of-jquery/\">custom file input</a> for users to upload their photos.</p>',NULL,0,'84871523','2019-10-09 16:40:30','2019-10-09 16:40:30','d0d55b42-9651-44f7-8ad0-7d392a7c842c',1,NULL,NULL,NULL),(894,1040,'PUMA Time',NULL,'<p>To continue in our engagement with PUMA, we redesigned and relaunched the PUMA time website. I didn’t even know that PUMA sold watches until we started this site! My role in this project was to build-out the many pages and to implement the JavaScript interactions throughout the site. I also worked with our developers to integrate with our custom Ruby on Rails code.</p>',NULL,0,NULL,'2019-10-09 16:40:30','2019-10-09 16:40:30','2dc754db-92ac-402a-86e5-36198c5eb827',1,NULL,NULL,NULL),(895,1046,'Easter Seals UCP North Carolina',NULL,'<p>For my first project while working for Viget Labs, I built the Easter Seals UCP North Carolina website. My role in the project was to build-out the design and implement the site using ExpressionEngine. I also added in some JavaScript functionality on the homepage and on the individual service pages.</p>',NULL,0,NULL,'2019-10-09 16:40:30','2019-10-09 16:40:31','05fd2a48-898f-40c4-9cf9-9514a38ce1d8',1,NULL,NULL,NULL),(896,1051,'PUMA Running',NULL,'<p>The PUMA Running site was the first in a long engagement with PUMA. My role in this project was to build-out the many pages and to implement a lot of JavaScript interaction throughout the site. I also worked with our developers to integrate with our custom Ruby on Rails code.</p>',NULL,0,NULL,'2019-10-09 16:40:31','2019-10-09 16:40:31','2af7f0ba-fcf3-4c29-94ea-e57afc4132cf',1,NULL,NULL,NULL),(897,1057,'Viget',NULL,'<p>After four years and a few failed attempts, we finally made it a point to redo the <strong>Viget</strong> website. Our old design served us well, but it was time to step it up to the next level. I was able to step in and implement the ExpressionEngine piece of the site, which included creating custom add-ons as well.</p>','http://viget.com/',0,NULL,'2019-10-09 16:40:31','2019-10-09 16:40:31','62004e0c-a4d9-440a-ad64-a7158f099416',1,NULL,NULL,NULL),(898,1062,'BDI',NULL,NULL,'https://www.bdiusa.com/',0,NULL,'2019-10-09 16:40:31','2019-10-09 16:40:31','6ea7d97b-64da-4844-913c-e2ce57cbdd92',1,NULL,NULL,NULL),(899,1063,'Bethesda Creation Club',NULL,NULL,'https://creationclub.bethesda.net/en',0,NULL,'2019-10-09 16:40:31','2019-10-09 16:40:31','8c423e32-a47a-450e-a466-4c2c1c0d0bd0',1,NULL,NULL,NULL),(900,1064,'PBS Kids Development Tracker',NULL,NULL,'http://www.pbs.org/parents/child-development',0,NULL,'2019-10-09 16:40:31','2019-10-09 16:40:31','f2508cec-15a8-4e64-bd33-905ad0ef98b8',1,NULL,NULL,NULL),(901,1065,'Lupus Resource Center',NULL,NULL,'http://resources.lupus.org/',0,NULL,'2019-10-09 16:40:32','2019-10-09 16:40:32','62fe36ea-496a-4a4f-a95a-43333170a07e',1,NULL,NULL,NULL),(902,1066,'Lully Sleep',NULL,NULL,'https://www.lullysleep.com/',0,NULL,'2019-10-09 16:40:32','2019-10-09 16:40:32','017d6ea6-9ea0-4e52-a3e1-7a9a9f1d6efb',1,NULL,NULL,NULL),(903,1067,'Open Space Institute',NULL,NULL,'https://www.openspaceinstitute.org/',0,NULL,'2019-10-09 16:40:32','2019-10-09 16:40:32','a230b5b8-a49b-4d20-ae07-8b52592dd73b',1,NULL,NULL,NULL),(904,1068,'Open Space Institute',NULL,NULL,'https://www.openspaceinstitute.org/',0,NULL,'2019-10-09 16:40:32','2019-10-09 16:40:32','84eab349-c1b4-4fc0-b178-8ef2680b0efe',1,NULL,NULL,NULL),(905,1069,'PPS Plus',NULL,NULL,'http://ppsplus.com/',0,NULL,'2019-10-09 16:40:32','2019-10-09 16:40:32','47426534-d245-4cbb-8928-6371fa19cda0',1,NULL,NULL,NULL),(906,1070,'American Farmland Trust',NULL,NULL,'https://www.farmland.org/',0,NULL,'2019-10-09 16:40:32','2019-10-09 16:40:32','9009c0ec-aa25-4fdc-b258-90efb1d3e9bb',1,NULL,NULL,NULL),(907,1071,'American Farmland Trust',NULL,NULL,'https://www.farmland.org/',0,NULL,'2019-10-09 16:40:32','2019-10-09 16:40:32','1008bb1b-18d5-474d-899a-c9db20e380e1',1,NULL,NULL,NULL),(908,1072,'Lenovo Blog',NULL,NULL,'http://blog.lenovo.com/',0,NULL,'2019-10-09 16:40:32','2019-10-09 16:40:33','3721a084-a0c0-47af-845d-ac5961b974a9',1,NULL,NULL,NULL),(909,1073,'VOA',NULL,NULL,'https://www.voa.org/',0,NULL,'2019-10-09 16:40:33','2019-10-09 16:40:33','b380e55b-e321-47b3-8933-501e5d727ce2',1,NULL,NULL,NULL),(910,1074,'VOA',NULL,NULL,'https://www.voa.org/',0,NULL,'2019-10-09 16:40:33','2019-10-09 16:40:33','f88d3026-c105-4427-acdb-09d6771dcb5f',1,NULL,NULL,NULL),(911,1075,'Managing CSS & JS in an HTTP/2 World',NULL,'<p>We have been hearing about HTTP/2 for years now. We\'ve even <a href=\"https://www.viget.com/articles/getting-started-with-http-2-part-1\">blogged</a> <a href=\"https://www.viget.com/articles/getting-started-with-http-2-part-2\">a little bit</a> about it. But we hadn\'t really <em>done</em> much with it. Until now. On a few recent projects, I made it a goal to use HTTP/2 and figure out how to best utilize <a href=\"https://http2.github.io/faq/#why-is-http2-multiplexed\">multiplexing</a>. This post isn\'t necessarily going to cover <em>why</em> you should use HTTP/2, but it\'s going to discuss how I\'ve been managing CSS &amp; JS to account for this paradigm shift.</p>\n','https://www.viget.com/articles/managing-css-js-http-2',0,NULL,'2019-10-09 16:40:33','2019-10-09 16:40:33','4fdf15a9-6a8c-4394-b8c2-6a109329ffb6',1,NULL,NULL,NULL),(912,1076,'Craft Color Swatches Plugin',NULL,'<p>The control that <a href=\"https://craftcms.com/\">Craft</a> can provide a user is what makes it stand out as a content management system. But sometimes we want to limit what a user can choose from. Craft has a <a href=\"https://craftcms.com/docs/color-fields\">built-in Color field</a> which allows a user to select any color from a color picker. There are times when we only want a user to choose from a select number of colors though. Previously we have done this by using a dropdown with a list of colors, but I decided to build a plugin to allow a user to select from an admin-defined set of colors.</p>','https://www.viget.com/articles/craft-color-swatches-plugin',0,NULL,'2019-10-09 16:40:33','2019-10-09 16:40:33','c7d415b7-a370-4fd7-a5d9-b4f63ee961b4',1,NULL,NULL,NULL),(913,1077,'Responsive Images with srcset & Craft',NULL,'<p><a href=\"https://www.viget.com/about/team/tmarshall\">Tommy</a> recently wrote about <a href=\"https://www.viget.com/articles/easy-responsible-background-images-in-craft-and-wordpress\">responsive background images in Craft</a>, but I wanted to follow up about how we used the <code>&lt;img&gt;</code> element and <code>srcset</code> to build responsive images on this very site (powered by <a href=\"https://craftcms.com/\">Craft</a>).</p>','https://www.viget.com/articles/responsive-images-with-srcset-craft',0,NULL,'2019-10-09 16:40:33','2019-10-09 16:40:33','b966f00f-7c37-48ba-925c-55fc9bc26d86',1,NULL,NULL,NULL),(914,1078,'Responsive Images with srcset & Craft',NULL,'<p><a href=\"https://www.viget.com/about/team/tmarshall\">Tommy</a> recently wrote about <a href=\"https://www.viget.com/articles/easy-responsible-background-images-in-craft-and-wordpress\">responsive background images in Craft</a>, but I wanted to follow up about how we used the <code>&lt;img&gt;</code> element and <code>srcset</code> to build responsive images on this very site (powered by <a href=\"https://craftcms.com/\">Craft</a>).</p>','https://www.viget.com/articles/responsive-images-with-srcset-craft',0,NULL,'2019-10-09 16:40:33','2019-10-09 16:40:33','20d000ad-2eda-415c-b159-b3b4aa755728',1,NULL,NULL,NULL),(915,1079,'Pending User Plugin for Craft',NULL,'<p>On a recent project that was built on <a href=\"https://craftcms.com/\">Craft</a>, I finally got the chance the kick the tires on building a members-only section with Craft. Out of the box, Craft provides so much user functionality, but the user moderation process wasn’t exactly what the client wanted. Luckily, Craft provides us with the ability to change that process with ease.</p>','https://www.viget.com/articles/pending-user-plugin-for-craft',0,NULL,'2019-10-09 16:40:33','2019-10-09 16:40:33','d7f9a60c-e791-4184-aba8-133397a41f78',1,NULL,NULL,NULL),(916,1080,'How to Survive Working from Home',NULL,'<p>When I started working here five years ago, we had two offices: one in Falls Church, VA and another in Durham, NC. Now we have a third office in Boulder, CO and a handful of employees, including myself, working remotely. Being set up the way we are, we are all used to interacting with remote team members, but the majority of the employees work in an office.</p>\n<p>I happily worked from the Virginia office for three years, but because of personal circumstance, I had to move to Michigan for a year. I didn’t want to leave Viget, so I asked for the opportunity to work remotely; I was anxious and hesitant about giving up the office environment.</p>','https://www.viget.com/articles/how-to-survive-working-from-home',0,NULL,'2019-10-09 16:40:33','2019-10-09 16:40:33','afd3337b-3b2b-4f72-8495-e6001c9dc543',1,NULL,NULL,NULL),(917,1081,'Front-End Parts Kits in Craft',NULL,'<p><a href=\"http://patternlab.io/\">Pattern library</a>, <a href=\"http://24ways.org/2011/front-end-style-guides/\">style</a> <a href=\"http://codeforamerica.clearleft.com/\">guide</a>, UI library, parts kit; call them what you want, but these are essential to building websites of any scale. Typically, this is something you manually construct to demonstrate all the modules and pieces that you have constructed, but I have been investigating ways to make them a bit more dynamic when building sites with <a href=\"http://buildwithcraft.com/\">Craft</a>.</p>','https://www.viget.com/articles/front-end-parts-kits-in-craft',0,NULL,'2019-10-09 16:40:33','2019-10-09 16:40:33','608bc232-7013-45f6-9a84-e41b8ccdc204',1,NULL,NULL,NULL),(918,1082,'Why We Love Craft CMS',NULL,'<p>I decided to write a little post to give some insight into why we love Craft so much at Viget.</p>','https://www.viget.com/articles/why-we-love-craft-cms',0,NULL,'2019-10-09 16:40:33','2019-10-09 16:40:33','c083edc6-e5e2-4c6b-8e8a-cfae974598eb',1,NULL,NULL,NULL),(919,1083,'Attending & Speaking at the Craft CMS Summit',NULL,'<p>I’m a little belated, but I was lucky enough to attend and speak at the first <a href=\"http://craftcmssummit.com\">Craft CMS Summit</a> two weeks ago. This was the first online conference that I had ever attended, and I was thoroughly impressed. I had always been a bit hesitant to attend online conferences because I was unsure about the quality, but after experiencing it firsthand I won\'t hesitate in the future. Everything was very well organized and the speakers all gave excellent presentations. It was also nice to sit and learn in the comfort of my own home instead of having to deal with the extra burdon of traveling for a conference. Side note: Environments for Humans, the company who hosted the conference, has <a href=\"http://environmentsforhumans.com/schedule/\">additional upcoming events</a>.</p>','https://www.viget.com/articles/craft-cms-summit',0,NULL,'2019-10-09 16:40:33','2019-10-09 16:40:33','608402e1-2c75-4ded-bf1b-4adc8cafc334',1,NULL,NULL,NULL),(920,1084,'Integrating Craft & Shopify',NULL,'<p>As we have the opportunity work on more <a href=\"http://buildwithcraft.com/\">Craft</a> sites at Viget, we’ve been able to do some interesting integrations, like our most recent integration with the ecommerce platform <a href=\"http://www.shopify.com/\">Shopify</a>. Below is a step-by-step guide to implementing Craft and Shopify by utilizing a plugin I built.</p>','https://www.viget.com/articles/integrating-craft-shopify',0,NULL,'2019-10-09 16:40:34','2019-10-09 16:40:34','73079dd4-e51c-4e20-bde8-5f081a383d5f',1,NULL,NULL,NULL),(921,1085,'Practical Uses of CSS3',NULL,'<p>We are certainly at an interesting point in time with the web. There are new techniques being created every day, and as developers, we have the privilege of deciding how and when to use them. I\'m the new guy at Viget (only been here a few weeks), and every company is different, so it is interesting adapting to Viget\'s standards. Some companies utilize <a href=\"http://en.wikipedia.org/wiki/Progressive_enhancement\">progressive enhancement</a> more than others, and I love that we utilize it when we can.</p>','http://www.viget.com/inspire/practical-uses-of-css3/',0,NULL,'2019-10-09 16:40:34','2019-10-09 16:40:34','7199954c-9978-4a50-8343-cc77258c10aa',1,NULL,NULL,NULL),(922,1086,'JavaScript Execution Patterns for Non-Web Apps',NULL,'<p>I finally got back to blogging and wrote an article about <a href=\"http://viget.com/extend/javascript-execution-patterns-for-non-web-apps\">JavaScript execution patterns</a>, a topic which I recently presented on at the <a href=\"https://speakerdeck.com/trevor_davis/javascript-for-non-web-apps\">DC jQuery Meetup</a>.</p>','http://viget.com/extend/javascript-execution-patterns-for-non-web-apps',0,NULL,'2019-10-09 16:40:34','2019-10-09 16:40:34','6a10915e-7b95-453a-bccf-1b24ddacc38a',1,NULL,NULL,NULL),(923,1087,'Reroute Plugin for Craft',NULL,'<p> You know what\'s really annoying? Having a million redirects in your .htaccess file. When we build EE sites, <a href=\"http://devot-ee.com/add-ons/detour-pro\">Detour Pro</a> has become a part of our builds so that other team members and clients can manage redirects. But, that solution won\'t really work when you launch your <a href=\"http://www.orbcomm.com/\">first Craft site for a client</a>!</p>\n','http://viget.com/extend/reroute-plugin-for-craft',0,NULL,'2019-10-09 16:40:34','2019-10-09 16:40:34','1e971601-ecf6-4672-a566-75e9fc8d5fbb',1,NULL,NULL,NULL),(924,1088,'Getting Crafty',NULL,'<p> Here at Viget, we have been using <a href=\"http://ellislab.com/expressionengine\">ExpressionEngine</a> as our primary off-the-shelf CMS for years. <a href=\"http://buildwithcraft.com/\">Craft</a> and <a href=\"http://statamic.com/\">Statamic</a>, both of which are developed by EE add-on developers, have really caught our attention. We finally determined that Craft would be an appropriate solution for a project, and while building the site, I built a couple small plugins.</p>','http://viget.com/extend/getting-crafty',0,NULL,'2019-10-09 16:40:34','2019-10-09 16:40:34','ef202539-aebb-47bd-aae2-acdeffc2612c',1,NULL,NULL,NULL),(925,1089,'Getting Crafty',NULL,'<p> Here at Viget, we have been using <a href=\"http://ellislab.com/expressionengine\">ExpressionEngine</a> as our primary off-the-shelf CMS for years. <a href=\"http://buildwithcraft.com/\">Craft</a> and <a href=\"http://statamic.com/\">Statamic</a>, both of which are developed by EE add-on developers, have really caught our attention. We finally determined that Craft would be an appropriate solution for a project, and while building the site, I built a couple small plugins.</p>','http://viget.com/extend/getting-crafty',0,NULL,'2019-10-09 16:40:34','2019-10-09 16:40:34','c8e4e37e-40e7-409a-88df-bf9d4aba53b3',1,NULL,NULL,NULL),(926,1090,'Getting Crafty',NULL,'<p> Here at Viget, we have been using <a href=\"http://ellislab.com/expressionengine\">ExpressionEngine</a> as our primary off-the-shelf CMS for years. <a href=\"http://buildwithcraft.com/\">Craft</a> and <a href=\"http://statamic.com/\">Statamic</a>, both of which are developed by EE add-on developers, have really caught our attention. We finally determined that Craft would be an appropriate solution for a project, and while building the site, I built a couple small plugins.</p>','http://viget.com/extend/getting-crafty',0,NULL,'2019-10-09 16:40:34','2019-10-09 16:40:34','b1a5a356-ff6f-4415-a622-8f65c972e807',1,NULL,NULL,NULL),(927,1091,'You Matter',NULL,'<p> I’m not sure if it’s a couple of talks that I recently saw at <a href=\"http://peersconf.com/\">Peers Conference</a> or maybe the fact that I’m just getting older, but I’ve been thinking a lot lately about work/life balance and personal health.</p>','http://viget.com/flourish/you-matter',0,NULL,'2019-10-09 16:40:34','2019-10-09 16:40:34','e564cf81-a4cd-4b4e-a2a1-5aba3062117a',1,NULL,NULL,NULL),(928,1092,'JavaScript Execution Patterns for Non-Web Apps',NULL,'<p>I finally got back to blogging and wrote an article about <a href=\"http://viget.com/extend/javascript-execution-patterns-for-non-web-apps\">JavaScript execution patterns</a>, a topic which I recently presented on at the <a href=\"https://speakerdeck.com/trevor_davis/javascript-for-non-web-apps\">DC jQuery Meetup</a>.</p>','http://viget.com/extend/javascript-execution-patterns-for-non-web-apps',0,NULL,'2019-10-09 16:40:34','2019-10-09 16:40:34','c75857aa-5a96-432f-bc15-f6f93ac03fc7',1,NULL,NULL,NULL),(929,1093,'Who Says the Web is Just for Squares?',NULL,'<p>I had some fun building a crazy diamond responsive grid for a project at work. <a href=\"http://viget.com/inspire/who-says-the-web-is-just-for-squares\">This article</a> explains how I did it.</p>','http://viget.com/inspire/who-says-the-web-is-just-for-squares',0,NULL,'2019-10-09 16:40:34','2019-10-09 16:40:34','277e18f0-cc9c-4a4c-bbfa-998a01175d8c',1,NULL,NULL,NULL),(930,1094,'jQuery Stick ‘em: Make Content Sticky on Scroll, to a Point',NULL,'<p>I created a plugin, <a href=\"http://viget.com/inspire/jquery-stick-em\">jQuery Stick ‘em</a>, to allow items to be “sticky” but only within a container.</p>','http://viget.com/inspire/jquery-stick-em',0,NULL,'2019-10-09 16:40:34','2019-10-09 16:40:34','6b04c1fd-c82a-4c5a-9a4f-efa7d5b5280c',1,NULL,NULL,NULL),(931,1095,'Building a Nested Responsive Grid with Sass & Compass',NULL,'<p>Whether you are a hater of the technique or not, <a href=\"http://www.abookapart.com/products/responsive-web-design\">Responsive Design</a> is one of the most important things happening on the web right now. I am finally getting a chance to work on a project where we are taking a responsive approach to the site, and it’s been great, but I have definitely come across a few gotchas here and there.</p>','http://viget.com/inspire/building-a-nested-responsive-grid-with-sass-compass',0,NULL,'2019-10-09 16:40:34','2019-10-09 16:40:34','ccf966a3-ffd2-4014-956f-813f513715c0',1,NULL,NULL,NULL),(932,1096,'The ExpressionEngine Side of the New Viget.com: Part 2',NULL,'<p>I’ve <a href=\"https://viget.com/extend/ee-side-of-the-new-viget-part-1\">already talked about the EE setup</a> for the new viget.com, but now I want to talk about the code. It took a little longer than I wanted to get to it, but let’s finally talk templates and custom addon development.</p>','http://viget.com/extend/ee-side-of-the-new-viget-part-2',0,NULL,'2019-10-09 16:40:34','2019-10-09 16:40:34','6bd8da14-0442-47f7-a415-2ca19f6d6474',1,NULL,NULL,NULL),(933,1097,'The ExpressionEngine Side of the New Viget.com: Part 1',NULL,'<p>Before I started at Viget, I remember thoroughly enjoying the <a href=\"https://viget.com/inspire/building-vigetcom-in-ee-part-1\">articles</a> by Doug about <a href=\"https://viget.com/inspire/building-vigetcom-in-ee-part-2\">building Viget.com</a>in EE. That was really some of my first exposure to EE, and from there I’ve come to love it. My hope is that I can recreate some of Doug’s magic and talk through how I built the current iteration of the Viget site in EE. I know, it’s gonna be hard to do. This post is going to be broken into multiple posts, but buckle up, this is gonna be a long one.</p>','http://viget.com/extend/ee-side-of-the-new-viget-part-1',0,NULL,'2019-10-09 16:40:34','2019-10-09 16:40:34','e7fcf0d3-afe2-4eba-994c-8c71bd1b7028',1,NULL,NULL,NULL),(934,1098,'Notes From Our Default ExpressionEngine Build',NULL,'<p>I put together some <a href=\"http://www.viget.com/inspire/our-default-expressionengine-build/\">notes about Viget’s default ExpressionEngine build</a> in the hopes that you can find some tips and tricks in all of my nonsense.</p>','http://www.viget.com/inspire/our-default-expressionengine-build/',0,NULL,'2019-10-09 16:40:34','2019-10-09 16:40:35','2fa0c2a3-a9d9-4ff8-ba32-a20d68689320',1,NULL,NULL,NULL),(935,1099,'Background-clip, Text-shadow, & Gradients; Oh My!',NULL,'<p>I have been able to play around with <a href=\"http://www.viget.com/inspire/background-clip-text-shadow-gradients/\">background-clip, text-shadow, and gradients</a> on a few recent projects, and I wrote up some tricks that I have come across.</p>','http://www.viget.com/inspire/background-clip-text-shadow-gradients/',0,NULL,'2019-10-09 16:40:35','2019-10-09 16:40:35','1dc2e335-e8b8-4add-9d52-79d06000ef8c',1,NULL,NULL,NULL),(936,1100,'Styling HTML5 Elements: An Irresponsible Choice…Right Now',NULL,'<p>I figured it was time to post about a controversial topic that had come up recently. <a href=\"http://www.viget.com/inspire/html5-elements-irresponsible-choice-right-now/\">I just don’t see the value in using most HTML5 elements right now</a>.</p>','http://www.viget.com/inspire/html5-elements-irresponsible-choice-right-now/',0,NULL,'2019-10-09 16:40:35','2019-10-09 16:40:35','997e189b-a64e-41dd-86c6-7196d130eb08',1,NULL,NULL,NULL),(937,1101,'My New Best Friend: CSS Generated Content',NULL,'<p>I’ve started to use generated content more and more these days. <a href=\"http://www.viget.com/inspire/css-generated-content/\">Here are a couple of examples</a> from a recent project.</p>','http://www.viget.com/inspire/css-generated-content/',0,NULL,'2019-10-09 16:40:35','2019-10-09 16:40:35','e9c941d0-b2e7-437b-8bed-4b27e0a9a80d',1,NULL,NULL,NULL),(938,1102,'Building an ExpressionEngine Mini Calendar Scroller',NULL,'<p>I recently decided I wanted to add a calendar of blog entries on my personal site. Luckily, ExpressionEngine has a tag for that, the <a href=\"http://expressionengine.com/user_guide/modules/channel/calendar.html\">Calendar Tag</a>. The functionality that I wanted was a little bit different from the two examples in the EE user guide. I wanted to show a calendar by month, and link the days that had an entry to that specific entry.\n</p>\n','http://www.viget.com/inspire/building-an-expressionengine-mini-calendar-scroller/',0,NULL,'2019-10-09 16:40:35','2019-10-09 16:40:35','fa509cbe-126a-4dd9-81f4-8fae40c6a276',1,NULL,NULL,NULL),(939,1103,'Custom File Inputs with a Bit of jQuery',NULL,'<p>File inputs are notorious for being a pain to style across all browsers.</p>','http://www.viget.com/inspire/custom-file-inputs-with-a-bit-of-jquery/',0,NULL,'2019-10-09 16:40:35','2019-10-09 16:40:35','32c78d30-d5d1-4478-8ce5-e07c862995ff',1,NULL,NULL,NULL),(940,1104,'jQuery Image Scroller Plugin',NULL,'<p>While working on the individual product page for PUMA, I had to use jQuery to create a scrollable interface for really tall products. It’s kind of hard to describe, but <a href=\"http://www.viget.com/inspire/jquery-image-scroller-plugin/\">have a look at the plugin for a better description</a>.</p>','http://www.viget.com/inspire/jquery-image-scroller-plugin/',0,NULL,'2019-10-09 16:40:35','2019-10-09 16:40:35','7d422fc7-0b39-428c-9de2-a3fa9a694f19',1,NULL,NULL,NULL),(941,1105,'jQuery Image Scroller Plugin',NULL,'<p>While working on the individual product page for PUMA, I had to use jQuery to create a scrollable interface for really tall products. It’s kind of hard to describe, but <a href=\"http://www.viget.com/inspire/jquery-image-scroller-plugin/\">have a look at the plugin for a better description</a>.</p>','http://www.viget.com/inspire/jquery-image-scroller-plugin/',0,NULL,'2019-10-09 16:40:35','2019-10-09 16:40:35','bead5287-83a1-4a47-90de-124f3a069928',1,NULL,NULL,NULL),(942,1106,'Simple jQuery Refactoring',NULL,'<p>I’ve learned so much about jQuery while working at Viget. I wrote a <a href=\"http://www.viget.com/inspire/simple-jquery-refactoring/\">blog post</a> about how you can improve your jQuery through some simple refactoring.</p>','http://www.viget.com/inspire/simple-jquery-refactoring/',0,NULL,'2019-10-09 16:40:35','2019-10-09 16:40:35','db27141e-2c78-4790-a289-c96809ae2527',1,NULL,NULL,NULL),(943,1107,'jQuery Presentation Plugin: Say NO to Keynote!',NULL,'<p>I’m done with Keynote and Powerpoint. I created a <a href=\"http://www.viget.com/inspire/jquery-presentation-plugin/\">jQuery Presentation Plugin</a> to use when giving presentations.</p>','http://www.viget.com/inspire/jquery-presentation-plugin/',0,NULL,'2019-10-09 16:40:35','2019-10-09 16:40:35','8f70fe6c-a6b4-4e80-b092-aef2f9ef7504',1,NULL,NULL,NULL),(944,1108,'A Better jQuery In-Field Label Plugin',NULL,'<p>I’ve just written another article for my company blog about using <a href=\"http://www.viget.com/inspire/a-better-jquery-in-field-label-plugin/\">jQuery in-field labels</a>.</p>','http://www.viget.com/inspire/a-better-jquery-in-field-label-plugin/',0,NULL,'2019-10-09 16:40:35','2019-10-09 16:40:35','15735b93-9b21-409b-8b8c-bd1f777ee6ad',1,NULL,NULL,NULL),(945,1109,'YouTube Chromeless Video Player – jQuery Plugin',NULL,'<p>In my latest blog post on the Viget Inspire blog, I discussed a <a href=\"http://www.viget.com/inspire/youtube-chromeless-video-jquery-plugin/\">YouTube Chromeless Video jQuery Plugin</a> that I wrote while building the <a href=\"http://www.puma.com/running\">PUMA Running site</a>.</p>','http://www.viget.com/inspire/youtube-chromeless-video-jquery-plugin/',0,NULL,'2019-10-09 16:40:35','2019-10-09 16:40:35','f5ab0a51-2c04-4c50-a77a-e66d8ad5f205',1,NULL,NULL,NULL),(946,1110,'Creating a Google Map with ExpressionEngine',NULL,'<p>As Richard Tape has begun to show in his <a href=\"http://net.tutsplus.com/tutorials/php/become-an-expression-engine-superstar-in-5-days/\">part 1</a> and <a href=\"http://net.tutsplus.com/tutorials/other/become-an-expressionengine-superstar-in-5-days-part-2/\">part 2</a> articles on Becoming an ExpressionEngine Superstar, <abbr title=\"ExpressionEngine\">EE</abbr> is a flexible and easy to customize CMS. Now that everyone has some understanding of how EE works, I thought I would take this opportunity to show a relatively real world example of creating a dynamic Google Map powered by EE.</p>\n','http://net.tutsplus.com/tutorials/cmss/creating-a-google-map-with-expressionengine/',0,NULL,'2019-10-09 16:40:35','2019-10-09 16:40:35','22d3397f-e953-4b7d-b3b2-005130e147ea',1,NULL,NULL,NULL),(947,1111,'Practical Uses of CSS3',NULL,'<p>We are certainly at an interesting point in time with the web. There are new techniques being created every day, and as developers, we have the privilege of deciding how and when to use them. I\'m the new guy at Viget (only been here a few weeks), and every company is different, so it is interesting adapting to Viget\'s standards. Some companies utilize <a href=\"http://en.wikipedia.org/wiki/Progressive_enhancement\">progressive enhancement</a> more than others, and I love that we utilize it when we can.</p>','http://www.viget.com/inspire/practical-uses-of-css3/',0,NULL,'2019-10-09 16:40:35','2019-10-09 16:40:35','9e454d4a-847d-43d1-8c3b-3c337bd22897',1,NULL,NULL,NULL),(948,1112,'Creating a jQuery Word Counter',NULL,'<p>I had to code a form at work that required word limitations on each textarea. The article describing <a href=\"http://blog.themeforest.net/tutorials/creating-a-jquery-word-counter/\">how I created a jQuery word counter</a> was published on the ThemeForest blog.</p>','http://blog.themeforest.net/tutorials/creating-a-jquery-word-counter/',0,NULL,'2019-10-09 16:40:35','2019-10-09 16:40:35','af7b1852-366c-44af-95ae-08b2c4072f5b',1,NULL,NULL,NULL),(949,1113,'The 13 Most Essential Plugins for WordPress',NULL,'<p><a href=\"http://wordpress.org/\">WordPress</a> is a very powerful and flexible blog/content management system, but the thousands of <a href=\"http://wordpress.org/extend/plugins/\">plugins</a> really help to extend the basic functionality. Here are 13 essential plugins that you should immediately install after finishing the WordPress installation.</p>','http://net.tutsplus.com/articles/web-roundups/the-13-most-essential-plugins-for-wordpress/',0,NULL,'2019-10-09 16:40:35','2019-10-09 16:40:36','23a69634-0175-4ba0-aa0e-65ecd672ddb9',1,NULL,NULL,NULL),(950,1114,'5 Ways to Instantly Write Better CSS',NULL,'<p>Sure, anyone can write CSS. Even programs are doing it for you now. But is the CSS any good? Here are 5 tips to start improving yours.</p>','http://net.tutsplus.com/tutorials/html-css-techniques/5-tips-to-writing-better-css/',0,NULL,'2019-10-09 16:40:36','2019-10-09 16:40:36','f8df05d1-d7d5-4b63-a3ff-b209bfe427c2',1,NULL,NULL,NULL),(951,1115,'Creating a “Filterable” Portfolio with jQuery',NULL,'<p>If you have worked in your field for a while, there is a pretty good chance that you have a rather extensive portfolio. To make it a little easier to navigate, you will probably be tempted to break them into different categories. In this tutorial, I will show you how to make \"filtering by category\" a little more interesting with just a little bit of jQuery.</p>','http://net.tutsplus.com/tutorials/javascript-ajax/creating-a-filterable-portfolio-with-jquery/',0,NULL,'2019-10-09 16:40:36','2019-10-09 16:40:36','574842e7-4e4a-4d63-9e8b-73b69a07944f',1,NULL,NULL,NULL),(952,1116,'Exactly How to Create a Custom jQuery Accordion',NULL,'<p>Yesterday, I saw that <a href=\"http://nettuts.com/articles/news/a-staff-writer-position-has-opened/\">NETTUTS was looking for another staff writer</a>. I figured that I would give it a shot and write a tutorial about creating a custom jQuery accordion (just like the one on the sidebar of my website). Well what do you know, <a href=\"http://nettuts.com/tutorials/javascript-ajax/exactly-how-to-create-a-custom-jquery-accordion/\">they published it</a>.</p>','http://net.tutsplus.com/tutorials/javascript-ajax/exactly-how-to-create-a-custom-jquery-accordion/',0,NULL,'2019-10-09 16:40:36','2019-10-09 16:40:36','5a22ec3c-d782-4f92-aff4-b2b521897d93',1,NULL,NULL,NULL),(953,1117,'Lenovo Blog',NULL,NULL,'http://blog.lenovo.com/',0,NULL,'2019-10-09 16:40:36','2019-10-09 16:40:36','9a761340-f1f2-41a4-988c-6571aac9d3f1',1,NULL,NULL,NULL),(954,1118,'VOA',NULL,NULL,'https://www.voa.org/',0,NULL,'2019-10-09 16:40:36','2019-10-09 16:40:36','4ecf18c8-034e-4105-9e42-9f77ba91d4f2',1,NULL,NULL,NULL),(955,1119,'Lenovo Blog',NULL,NULL,'http://blog.lenovo.com/',0,NULL,'2019-10-09 16:40:36','2019-10-09 16:40:36','7f31a717-7b0d-4451-af5d-aedd898846b6',1,NULL,NULL,NULL),(956,1120,'Bethesda Creation Club',NULL,NULL,'https://creationclub.bethesda.net/en',0,NULL,'2019-10-09 16:40:36','2019-10-09 16:40:36','ec74277c-36bb-48d3-8daf-2da2dab79b3e',1,NULL,NULL,NULL),(957,1121,'Idea',NULL,NULL,NULL,0,NULL,'2019-10-09 16:40:36','2019-10-09 16:40:36','7cb2c275-559d-4095-aedc-560a74e30c97',1,NULL,NULL,NULL),(958,1122,'NMCRS',NULL,NULL,NULL,0,NULL,'2019-10-09 16:40:36','2019-10-09 16:40:36','c4c86627-3ac1-4b3e-9428-2930dcbf39d1',1,NULL,NULL,NULL),(959,1123,'BDI',NULL,NULL,'https://www.bdiusa.com/',0,NULL,'2019-10-09 16:40:36','2019-10-09 16:40:36','82ca1562-784e-4496-b65b-0781f320c1f5',1,NULL,NULL,NULL),(960,1124,'PBS Kids Development Tracker',NULL,NULL,'http://www.pbs.org/parents/child-development',0,NULL,'2019-10-09 16:40:36','2019-10-09 16:40:36','4c7816ba-fecb-4caf-8042-d91e1bf407e8',1,NULL,NULL,NULL),(961,1125,'Lupus Resource Center',NULL,NULL,'http://resources.lupus.org/',0,NULL,'2019-10-09 16:40:36','2019-10-09 16:40:36','611f845f-5dd9-459b-9a11-cf3d0d0f94e9',1,NULL,NULL,NULL),(962,1126,'Lully Sleep',NULL,NULL,'https://www.lullysleep.com/',0,NULL,'2019-10-09 16:40:37','2019-10-09 16:40:37','1dcea1b0-e2a3-44e1-88cf-5a7f435fcbf3',1,NULL,NULL,NULL),(963,1127,'Lully Sleep',NULL,NULL,'https://www.lullysleep.com/',0,NULL,'2019-10-09 16:40:37','2019-10-09 16:40:37','771acf74-9294-456b-83b0-8d7bc4077f2f',1,NULL,NULL,NULL),(964,1128,'Open Space Institute',NULL,NULL,'https://www.openspaceinstitute.org/',0,NULL,'2019-10-09 16:40:37','2019-10-09 16:40:37','ccc5c35e-4bf7-40bc-8d8d-cb11ead80d80',1,NULL,NULL,NULL),(965,1129,'American Farmland Trust',NULL,NULL,NULL,0,NULL,'2019-10-09 16:40:37','2019-10-09 16:40:37','94ecdb4b-103d-41b9-bf4d-71c97129500c',1,NULL,NULL,NULL),(966,1130,'VOA',NULL,NULL,NULL,0,NULL,'2019-10-09 16:40:37','2019-10-09 16:40:37','aca6be78-8410-44b8-aca7-d85b493222e2',1,NULL,NULL,NULL),(967,1131,'PUMA Running',NULL,'<p>The PUMA Running site was the first in a long engagement with PUMA. My role in this project was to build-out the many pages and to implement a lot of JavaScript interaction throughout the site. I also worked with our developers to integrate with our custom Ruby on Rails code.</p>','http://www.puma.com/running/',0,NULL,'2019-10-09 16:40:37','2019-10-09 16:40:37','9841046a-e504-496c-a091-b7670731571b',1,NULL,NULL,NULL),(968,1137,'Easter Seals UCP North Carolina',NULL,'<p>For my first project while working for Viget Labs, I built the Easter Seals UCP North Carolina website. My role in the project was to build-out the design and implement the site using ExpressionEngine. I also added in some JavaScript functionality on the homepage and on the individual service pages.</p>','http://nc.eastersealsucp.com/',0,NULL,'2019-10-09 16:40:37','2019-10-09 16:40:38','b5c80de9-15e2-42e8-8b3d-9b6a28b21925',1,NULL,NULL,NULL),(969,1142,'PUMA City',NULL,'<p>In honor of the 2010 World Cup, we built a special one-page site for the PUMA City store in New York. The PUMA City store is a temporary store that is setup with shipping containers. My role in this project was to build-out the site and add in a lot of JavaScript functionality. I also had to work with my developers to integrate with the Ruby on Rails code.</p>\n<p>This was the longest page I have ever built!</p>',NULL,0,NULL,'2019-10-09 16:40:38','2019-10-09 16:40:38','48980631-13b1-4625-8df6-816ac594d418',1,NULL,NULL,NULL),(970,1144,'The Bolt Collection',NULL,'<p>To announce the launch of Bolt’s new clothing line, we launched a one-page site that tracks Bolt’s progress in races throughout the summer. My role in this project was to build-out the site with HTML &amp; CSS and add in a lot of the JavaScript functionality. I also worked with our developers to integrate with out custom Ruby on Rails system.</p>\n<p>Building this site really made me want to buy some of the gear because it looks awesome.</p>',NULL,0,NULL,'2019-10-09 16:40:38','2019-10-09 16:40:38','f080b962-970a-42d1-9fdd-b09bdf1eb16e',1,NULL,NULL,NULL),(971,1146,'PUMA Time',NULL,'<p>To continue in our engagement with PUMA, we redesigned and relaunched the PUMA time website. I didn’t even know that PUMA sold watches until we started this site! My role in this project was to build-out the many pages and to implement the JavaScript interactions throughout the site. I also worked with our developers to integrate with our custom Ruby on Rails code.</p>','http://www.puma.com/time',0,NULL,'2019-10-09 16:40:38','2019-10-09 16:40:38','0181d273-85bc-4f2a-995e-31cb4589f49e',1,NULL,NULL,NULL),(972,1152,'PUMA Clever Little Bag',NULL,'<p>PUMA spent a lot of time and money developing a new shoebox that would reduce its environmental impact. The result was a cool concept of a Clever Little Bag. We built a special page to help introduce the bag to the world. My role in this project was to build-out the site and add in the JavaScript functionality.</p>\n<p>The one really fun feature was the slide deck of the “big plans” that can be seen all the way at the end of the page. I also built a cross browser <a href=\"http://www.viget.com/inspire/custom-file-inputs-with-a-bit-of-jquery/\">custom file input</a> for users to upload their photos.</p>','http://www.puma.com/cleverlittlebag',0,'84871523','2019-10-09 16:40:38','2019-10-09 16:40:38','bade37d2-eafe-436c-983e-b4d8df2024c5',1,NULL,NULL,NULL),(973,1154,'PUMA Golf',NULL,'<p>To continue our work with PUMA, I built the Golf site. This was similar to some of the other PUMA sites that I have built, except for a few new pieces here and there. My role in this project was to build-out the many pages and to implement the JavaScript interactions throughout the site. I also worked with our developers to integrate with our custom Ruby on Rails code.</p>','http://www.puma.com/golf',0,NULL,'2019-10-09 16:40:38','2019-10-09 16:40:39','9520ea95-1a93-420a-9523-3d415e16cacf',1,NULL,NULL,NULL),(974,1159,'PUMA',NULL,'<p>After building many smaller sub-sites, we (Viget) were finally able to tackle puma.com itself. This required uniting many of those sub-sites we had already build into new standardized templates that would be uniquely “skinned” for each “category” site. My role included collaborating very closely with UX &amp; Design, HTML, CSS, and JavaScript.</p>','http://www.puma.com/',0,NULL,'2019-10-09 16:40:39','2019-10-09 16:40:39','8327026b-ea48-493f-9797-ac99f860616f',1,NULL,NULL,NULL),(975,1166,'Team Viget',NULL,'<p>Our <a href=\"http://v1.teamviget.com/\">existing Team Viget site</a> was out of date and was mainly focused on bringing new designers to Viget, and we decided that it was time to make it reflect <em>all</em> of Viget. My role in the project was to build it with HTML &amp; CSS, and to code the JavaScript interactions. Then, I implemented into ExpressionEngine so others could easily add stories. This site works best in Webkit browsers because we were able to take advantage of a lot of experimental properties.</p>','http://teamviget.com/',0,'84871420','2019-10-09 16:40:39','2019-10-09 16:40:39','576dfe9b-c62b-42e8-b0de-5bc6fe65ecf4',1,NULL,NULL,NULL),(976,1171,'Rumble Games',NULL,'<p>Rumble is an online gaming company that needed some help from us to build their marketing site. My role was to build the front-end with HTML, CSS, &amp; JS, and then pass the build-out onto another Front-End Developer to finish the ExpressionEngine integration.</p>','https://www.rumblegames.com/',0,NULL,'2019-10-09 16:40:39','2019-10-09 16:40:39','6d82a9a5-e41b-4a3f-bb53-1554c7c4088a',1,NULL,NULL,NULL),(977,1177,'Ultimat Vodka',NULL,'<p>Ultimat Vodka wanted a different type of experience for their site, so I utilized AJAX to give the site a more streamlined experience. I also had to create an age blocker so that only people 18 years and older were allowed to access the site. My role in the project was to build the front-end and to complete the ExpressionEngine integration.</p>','http://ultimatvodka.com/',0,'84871419','2019-10-09 16:40:39','2019-10-09 16:40:40','4140d5a9-3adb-435b-80de-a229e52f335e',1,NULL,NULL,NULL),(978,1183,'NMS',NULL,'<p>New Media Strategies partnered with us (Viget) to recreate their web presence. They were looking for something new and different. My role on the project was to build the front-end, which included some light canvas work, and to implement the site into ExpressionEngine, which included custom add-on development.</p>','http://nms.com/',0,NULL,'2019-10-09 16:40:40','2019-10-09 16:40:40','ccabc561-361f-4638-ad8f-47a3b560816f',1,NULL,NULL,NULL),(979,1192,'Viget',NULL,'<p>After four years and a few failed attempts, we finally made it a point to redo the <strong>Viget</strong> website. Our old design served us well, but it was time to step it up to the next level. I was able to step in and implement the ExpressionEngine piece of the site, which included creating custom add-ons as well.</p>','http://viget.com/',0,NULL,'2019-10-09 16:40:40','2019-10-09 16:40:40','b32f4775-9436-4318-bc4c-ba07c252c782',1,NULL,NULL,NULL),(980,1197,'Carr Workplaces',NULL,'<p>We (Viget) had originally built Carr’s site many years ago. We had the opportunity to redesign it and implement a new CMS. My role in the project was to help a little with building some pieces of the front-end, but my main role was to implement the site in ExpressionEngine, which included custom add-on development.</p>','http://carrworkplaces.com/',0,NULL,'2019-10-09 16:40:40','2019-10-09 16:40:40','932a68b6-a4db-4047-89ca-7b875779ef65',1,NULL,NULL,NULL),(981,1204,'AIGA Design Continuum Fund',NULL,'<p>The AIGA Design Continuum Fund is a yearly scholarship awarded to a local design student. We took on this project as pro-bono to support the local design community, and my role was to build the front-end of the site and to integrate into ExpressionEngine.</p>','http://givecontinuum.org/',0,NULL,'2019-10-09 16:40:41','2019-10-09 16:40:41','5e5a60bd-5b60-49e9-8948-dc690fdf2ad4',1,NULL,NULL,NULL),(982,1209,'World Wildlife Fund',NULL,'<p>I had been itching to finally utilize responsive design on a client project, and the World Wildlife Fund presented that opportunity. The site is built on Ruby on Rails, and my role was to build the site with HTML, CSS, JavaScript, and Ruby on Rails views.</p>','http://worldwildlife.org',0,NULL,'2019-10-09 16:40:41','2019-10-09 16:40:41','235e5354-b531-42f0-90ae-946bb91fc980',1,NULL,NULL,NULL),(983,1217,'NEA',NULL,'<p>NEA is a leading a leading global venture capital firm who came to Viget to redesign their website. We rebuilt the site to adapt to whatever size screen it is being viewed on, and my role was to build the front-end of the site and integrate into ExpressionEngine.</p>','http://www.nea.com/',0,NULL,'2019-10-09 16:40:41','2019-10-09 16:40:41','bcc88d67-ee39-4e1e-bf65-9b141a6647a4',1,NULL,NULL,NULL),(984,1224,'Lansinoh',NULL,'<p>I sure didn’t know it before I started the project, but Lansinoh is one of the leaders in the breastfeeding industry. Since mobile accounted for 47% of visits, building a site to adapt to any device was a must. My role in the project was to build the front-end of the site and integrate with ExpressionEngine, which included ecommerce, user submission forms, and a store finder. This was probably the most complex ExpressionEngine site that I have built to date.</p>','https://www.lansinoh.com/',0,NULL,'2019-10-09 16:40:41','2019-10-09 16:40:41','80cced65-d244-4187-b4ab-4fbcd9b1b0d3',1,NULL,NULL,NULL),(985,1235,'Orbcomm',NULL,'<p>Building this site gave me the opportunity to build a site with <a href=\"http://buildwithcraft.com/\">Craft</a>; something I had been itching to use on a project for some time. My role in the project was to build the front-end of the site, configure Craft, and then integrate the two. In building this site, I also created three Craft plugins: <a href=\"https://github.com/davist11/craft-bust\">Bust</a>, <a href=\"https://github.com/davist11/craft-listing-section\">Listing Section</a>, and <a href=\"https://github.com/davist11/craft-reroute\">Reroute</a>.</p>','http://www.orbcomm.com/',0,NULL,'2019-10-09 16:40:42','2019-10-09 16:40:42','befdbd63-bbbf-40a3-bd31-4df386aa3986',1,NULL,NULL,NULL),(986,1241,'PPS Plus',NULL,NULL,'http://ppsplus.com/',0,NULL,'2019-10-09 16:40:42','2019-10-09 16:40:42','55e44aea-d689-4124-b4cc-6b6703fd4ed2',1,NULL,NULL,NULL),(987,1242,'American Farmland Trust',NULL,NULL,'https://www.farmland.org/',0,NULL,'2019-10-09 16:40:42','2019-10-09 16:40:42','f8413135-fa0e-4a3a-bd10-0b0c9ff3447f',1,NULL,NULL,NULL),(988,1243,'Volunteers of America',NULL,NULL,'https://www.voa.org/',0,NULL,'2019-10-09 16:40:42','2019-10-09 16:40:42','c5b936cb-837e-4e3f-a1dc-f0d0e67b16c2',1,NULL,NULL,NULL),(989,1244,'Pointless Corp',NULL,'<p>We relaunched the Pointless Corp website, which is the innovation lab at Viget. The site is now a place for us to showcase side projects and experiments. My role was the build the site and implement with Craft.</p>','http://pointlesscorp.com/',0,NULL,'2019-10-09 16:40:42','2019-10-09 16:40:42','dc4c0d94-aa48-4444-a1f3-1548f00a6a50',1,NULL,NULL,NULL),(990,1251,'Pointless Corp',NULL,'<p>We relaunched the Pointless Corp website, which is the innovation lab at Viget. The site is now a place for us to showcase side projects and experiments. My role was the build the site and implement with Craft.</p>','http://pointlesscorp.com/',0,NULL,'2019-10-09 16:40:42','2019-10-09 16:40:42','007f02f6-df77-46bd-8484-ad4e6878cebc',1,NULL,NULL,NULL),(991,1258,'GoPole',NULL,'<p>We migrated the old GoPole site off of ExpressionEngine and into a Craft and Shopify combo. My role was to configure and integrate Craft and to integrate with Shopify as well. I built a <a href=\"https://github.com/davist11/craft-shopify\">Craft plugin that integrates with Shopify</a> and did some custom development work to integrate the forms with Zendesk.</p>','https://www.gopole.com/',0,NULL,'2019-10-09 16:40:43','2019-10-09 16:40:43','32938594-51be-4f3b-b8b6-e8983bf9d894',1,NULL,NULL,NULL),(992,1263,'GoPole',NULL,'<p>We migrated the old GoPole site off of ExpressionEngine and into a Craft and Shopify combo. My role was to configure and integrate Craft and to integrate with Shopify as well. I built a <a href=\"https://github.com/davist11/craft-shopify\">Craft plugin that integrates with Shopify</a> as well as some custom development work to integrate the forms with Zendesk.</p>','https://www.gopole.com/',0,NULL,'2019-10-09 16:40:43','2019-10-09 16:40:43','ab6fd140-3be1-4e72-a6b6-6fca8bfaa9d7',1,NULL,NULL,NULL),(993,1268,'GoPole',NULL,'<p>We migrated the old GoPole site off of ExpressionEngine and into a Craft and Shopify combo. My role was to configure and integrate Craft and to integrate with Shopify as well. I built a <a href=\"https://github.com/davist11/craft-shopify\">Craft plugin that integrates with Shopify</a> and did some custom development work to integrate the forms with Zendesk.</p>','https://www.gopole.com/',0,NULL,'2019-10-09 16:40:43','2019-10-09 16:40:43','4a3f8af6-a132-4a02-86b2-5e7c8c454034',1,NULL,NULL,NULL),(994,1273,'GoPole',NULL,'<p>We migrated the old GoPole site off of ExpressionEngine and into a Craft and Shopify combo. My role was to configure and integrate Craft and to integrate with Shopify as well. I built a <a href=\"https://github.com/davist11/craft-shopify\">Craft plugin that integrates with Shopify</a> and did some custom development work to integrate the forms with Zendesk.</p>','https://www.gopole.com/',0,NULL,'2019-10-09 16:40:43','2019-10-09 16:40:43','13ebc7bf-dd4f-47fb-927d-b677eebfe5aa',1,NULL,NULL,NULL),(995,1278,'About',NULL,NULL,NULL,0,NULL,'2019-10-09 16:40:43','2019-10-09 16:40:43','64a9637c-2ebc-471c-94fe-48f85dad7859',1,NULL,NULL,NULL),(996,1284,'About',NULL,NULL,NULL,0,NULL,'2019-10-09 16:40:44','2019-10-09 16:40:44','7c23ce16-6fcc-4195-a7cf-f408dc83c23a',1,NULL,NULL,NULL),(997,1290,'Ultimat Vodka',NULL,'<p>Ultimat Vodka wanted a different type of experience for their site, so I utilized AJAX to give the site a more streamlined experience. I also had to create an age blocker so that only people 18 years and older were allowed to access the site. My role in the project was to build the front-end and to complete the ExpressionEngine integration.</p>','http://ultimatvodka.com/',0,'84871419','2019-10-09 16:40:44','2019-10-09 16:40:44','87344272-f9de-448c-b714-6557a4240ff8',1,NULL,NULL,NULL),(998,1296,'Team Viget',NULL,'<p>Our <a href=\"http://v1.teamviget.com/\">existing Team Viget site</a> was out of date and was mainly focused on bringing new designers to Viget, and we decided that it was time to make it reflect <em>all</em> of Viget. My role in the project was to build it with HTML &amp; CSS, and to code the JavaScript interactions. Then, I implemented into ExpressionEngine so others could easily add stories. This site works best in Webkit browsers because we were able to take advantage of a lot of experimental properties.</p>','http://teamviget.com/',0,'84871420','2019-10-09 16:40:44','2019-10-09 16:40:44','d981eb22-16aa-4a1f-9a1b-3a961ebd7f49',1,NULL,NULL,NULL),(999,1301,'PUMA Clever Little Bag',NULL,'<p>PUMA spent a lot of time and money developing a new shoebox that would reduce its environmental impact. The result was a cool concept of a Clever Little Bag. We built a special page to help introduce the bag to the world. My role in this project was to build-out the site and add in the JavaScript functionality.</p><p>The one really fun feature was the slide deck of the “big plans” that can be seen all the way at the end of the page. I also built a cross browser <a href=\"http://www.viget.com/inspire/custom-file-inputs-with-a-bit-of-jquery/\">custom file input</a> for users to upload their photos.</p>','http://www.puma.com/cleverlittlebag',0,'84871523','2019-10-09 16:40:44','2019-10-09 16:40:45','42c68cbe-3039-466d-8393-18c8b2169611',1,NULL,NULL,NULL),(1000,1303,'PUMA Running',NULL,'<p>The PUMA Running site was the first in a long engagement with PUMA. My role in this project was to build-out the many pages and to implement a lot of JavaScript interaction throughout the site. I also worked with our developers to integrate with our custom Ruby on Rails code.</p>','http://www.puma.com/running/',0,NULL,'2019-10-09 16:40:45','2019-10-09 16:40:45','62f215ed-ff90-4741-b050-2200751bfcdb',1,NULL,NULL,NULL),(1001,1309,'Easter Seals UCP North Carolina',NULL,'<p>For my first project while working for Viget Labs, I built the Easter Seals UCP North Carolina website. My role in the project was to build-out the design and implement the site using ExpressionEngine. I also added in some JavaScript functionality on the homepage and on the individual service pages.</p>','http://nc.eastersealsucp.com/',0,NULL,'2019-10-09 16:40:45','2019-10-09 16:40:45','6099f9d1-1cdf-41cc-9e41-548405743a10',1,NULL,NULL,NULL),(1002,1314,'PUMA City',NULL,'<p>In honor of the 2010 World Cup, we built a special one-page site for the PUMA City store in New York. The PUMA City store is a temporary store that is setup with shipping containers. My role in this project was to build-out the site and add in a lot of JavaScript functionality. I also had to work with my developers to integrate with the Ruby on Rails code.</p><p>This was the longest page I have ever built!</p>',NULL,0,NULL,'2019-10-09 16:40:45','2019-10-09 16:40:45','11337fc2-b62f-4b09-b1b7-e0ba6e52d5b7',1,NULL,NULL,NULL),(1003,1316,'The Bolt Collection',NULL,'<p>To announce the launch of Bolt’s new clothing line, we launched a one-page site that tracks Bolt’s progress in races throughout the summer. My role in this project was to build-out the site with HTML &amp; CSS and add in a lot of the JavaScript functionality. I also worked with our developers to integrate with out custom Ruby on Rails system.</p><p>Building this site really made me want to buy some of the gear because it looks awesome.</p>',NULL,0,NULL,'2019-10-09 16:40:45','2019-10-09 16:40:45','70a9f9c2-e7d3-4a46-ad61-2a976ae52bbc',1,NULL,NULL,NULL),(1004,1318,'PUMA Time',NULL,'<p>To continue in our engagement with PUMA, we redesigned and relaunched the PUMA time website. I didn’t even know that PUMA sold watches until we started this site! My role in this project was to build-out the many pages and to implement the JavaScript interactions throughout the site. I also worked with our developers to integrate with our custom Ruby on Rails code.</p>','http://www.puma.com/time',0,NULL,'2019-10-09 16:40:45','2019-10-09 16:40:46','9ac48cad-b2a2-413f-a842-809df7e7bfa9',1,NULL,NULL,NULL),(1005,1324,'PUMA Clever Little Bag',NULL,'<p>PUMA spent a lot of time and money developing a new shoebox that would reduce its environmental impact. The result was a cool concept of a Clever Little Bag. We built a special page to help introduce the bag to the world. My role in this project was to build-out the site and add in the JavaScript functionality.</p><p>The one really fun feature was the slide deck of the “big plans” that can be seen all the way at the end of the page. I also built a cross browser <a href=\"http://www.viget.com/inspire/custom-file-inputs-with-a-bit-of-jquery/\">custom file input</a> for users to upload their photos.</p>','http://www.puma.com/cleverlittlebag',0,NULL,'2019-10-09 16:40:46','2019-10-09 16:40:46','b316d5ca-49fd-4da7-9ca1-c374a432b7c2',1,NULL,NULL,NULL),(1006,1326,'PUMA Golf',NULL,'<p>To continue our work with PUMA, I built the Golf site. This was similar to some of the other PUMA sites that I have built, except for a few new pieces here and there. My role in this project was to build-out the many pages and to implement the JavaScript interactions throughout the site. I also worked with our developers to integrate with our custom Ruby on Rails code.</p>','http://www.puma.com/golf',0,NULL,'2019-10-09 16:40:46','2019-10-09 16:40:46','3cf1c6d8-58f8-41c8-866e-8b786811614a',1,NULL,NULL,NULL),(1007,1331,'PUMA',NULL,'<p>After building many smaller sub-sites, we (Viget) were finally able to tackle puma.com itself. This required uniting many of those sub-sites we had already build into new standardized templates that would be uniquely “skinned” for each “category” site. My role included collaborating very closely with UX &amp; Design, HTML, CSS, and JavaScript.</p>','http://www.puma.com/',0,NULL,'2019-10-09 16:40:46','2019-10-09 16:40:46','bee2fcbe-7397-4ee3-8857-3d4780e037af',1,NULL,NULL,NULL),(1008,1338,'Team Viget',NULL,'<p>Our <a href=\"http://v1.teamviget.com/\">existing Team Viget site</a> was out of date and was mainly focused on bringing new designers to Viget, and we decided that it was time to make it reflect <em>all</em> of Viget. My role in the project was to build it with HTML &amp; CSS, and to code the JavaScript interactions. Then, I implemented into ExpressionEngine so others could easily add stories. This site works best in Webkit browsers because we were able to take advantage of a lot of experimental properties.</p>','http://teamviget.com/',0,NULL,'2019-10-09 16:40:46','2019-10-09 16:40:46','d374f5d4-05aa-46bd-a739-5d849e79f469',1,NULL,NULL,NULL),(1009,1343,'Rumble Games',NULL,'<p>Rumble is an online gaming company that needed some help from us to build their marketing site. My role was to build the front-end with HTML, CSS, &amp; JS, and then pass the build-out onto another Front-End Developer to finish the ExpressionEngine integration.</p>','https://www.rumblegames.com/',0,NULL,'2019-10-09 16:40:47','2019-10-09 16:40:47','628f55b7-0a20-4f5e-bacf-2322d846b280',1,NULL,NULL,NULL),(1010,1349,'Ultimat Vodka',NULL,'<p>Ultimat Vodka wanted a different type of experience for their site, so I utilized AJAX to give the site a more streamlined experience. I also had to create an age blocker so that only people 18 years and older were allowed to access the site. My role in the project was to build the front-end and to complete the ExpressionEngine integration.</p>','http://ultimatvodka.com/',0,NULL,'2019-10-09 16:40:47','2019-10-09 16:40:47','2a937a9c-31a8-4ff7-92cd-e0a4cbab2b13',1,NULL,NULL,NULL),(1011,1355,'NMS',NULL,'<p>New Media Strategies partnered with us (Viget) to recreate their web presence. They were looking for something new and different. My role on the project was to build the front-end, which included some light canvas work, and to implement the site into ExpressionEngine, which included custom add-on development.</p>','http://nms.com/',0,NULL,'2019-10-09 16:40:47','2019-10-09 16:40:47','204bdcd5-18e2-4636-ad26-a202d8719a7a',1,NULL,NULL,NULL),(1012,1364,'Viget',NULL,'<p>After four years and a few failed attempts, we finally made it a point to redo the <strong>Viget</strong> website. Our old design served us well, but it was time to step it up to the next level. I was able to step in and implement the ExpressionEngine piece of the site, which included creating custom add-ons as well.</p>','http://viget.com/',0,NULL,'2019-10-09 16:40:47','2019-10-09 16:40:47','55449b40-24cf-4d4e-9de9-4d36f43884d9',1,NULL,NULL,NULL),(1013,1369,'Carr Workplaces',NULL,'<p>We (Viget) had originally built Carr’s site many years ago. We had the opportunity to redesign it and implement a new CMS. My role in the project was to help a little with building some pieces of the front-end, but my main role was to implement the site in ExpressionEngine, which included custom add-on development.</p>','http://carrworkplaces.com/',0,NULL,'2019-10-09 16:40:47','2019-10-09 16:40:48','45668324-de2c-43c1-8c59-26c2388ea023',1,NULL,NULL,NULL),(1014,1376,'AIGA Design Continuum Fund',NULL,'<p>The AIGA Design Continuum Fund is a yearly scholarship awarded to a local design student. We took on this project as pro-bono to support the local design community, and my role was to build the front-end of the site and to integrate into ExpressionEngine.</p>','http://givecontinuum.org/',0,NULL,'2019-10-09 16:40:48','2019-10-09 16:40:48','106945ac-1b1f-427b-a616-515c1c419340',1,NULL,NULL,NULL),(1015,1381,'World Wildlife Fund',NULL,'<p>I had been itching to finally utilize responsive design on a client project, and the World Wildlife Fund presented that opportunity. The site is built on Ruby on Rails, and my role was to build the site with HTML, CSS, JavaScript, and Ruby on Rails views.</p>','http://worldwildlife.org',0,NULL,'2019-10-09 16:40:48','2019-10-09 16:40:48','84f65d8a-6384-4498-bdaa-b901b2292fbf',1,NULL,NULL,NULL),(1016,1389,'NEA',NULL,'<p>NEA is a leading a leading global venture capital firm who came to Viget to redesign their website. We rebuilt the site to adapt to whatever size screen it is being viewed on, and my role was to build the front-end of the site and integrate into ExpressionEngine.</p>','http://www.nea.com/',0,NULL,'2019-10-09 16:40:48','2019-10-09 16:40:48','b844ed81-9f56-4dcd-90e3-9ca9806ec867',1,NULL,NULL,NULL),(1017,1396,'Lansinoh',NULL,'<p>I sure didn’t know it before I started the project, but Lansinoh is one of the leaders in the breastfeeding industry. Since mobile accounted for 47% of visits, building a site to adapt to any device was a must. My role in the project was to build the front-end of the site and integrate with ExpressionEngine, which included ecommerce, user submission forms, and a store finder. This was probably the most complex ExpressionEngine site that I have built to date.</p>','https://www.lansinoh.com/',0,NULL,'2019-10-09 16:40:48','2019-10-09 16:40:49','1ae43087-9d24-4263-b3e3-0667d111a02d',1,NULL,NULL,NULL),(1018,1407,'Orbcomm',NULL,'<p>Building this site gave me the opportunity to build a site with <a href=\"http://buildwithcraft.com/\">Craft</a>; something I had been itching to use on a project for some time. My role in the project was to build the front-end of the site, configure Craft, and then integrate the two. In building this site, I also created three Craft plugins: <a href=\"https://github.com/davist11/craft-bust\">Bust</a>, <a href=\"https://github.com/davist11/craft-listing-section\">Listing Section</a>, and <a href=\"https://github.com/davist11/craft-reroute\">Reroute</a>.</p>','http://www.orbcomm.com/',0,NULL,'2019-10-09 16:40:49','2019-10-09 16:40:49','2b469a56-ccc2-4356-b8e5-5cb6520840b6',1,NULL,NULL,NULL),(1019,1413,'PUMA Running',NULL,'<p>The PUMA Running site was the first in a long engagement with PUMA. My role in this project was to build-out the many pages and to implement a lot of JavaScript interaction throughout the site. I also worked with our developers to integrate with our custom Ruby on Rails code.</p>',NULL,0,NULL,'2019-10-09 16:40:49','2019-10-09 16:40:49','7d8a48c7-4536-4fe1-a2e7-0b22ddfc045c',1,NULL,NULL,NULL),(1020,1419,'Easter Seals UCP North Carolina',NULL,'<p>For my first project while working for Viget Labs, I built the Easter Seals UCP North Carolina website. My role in the project was to build-out the design and implement the site using ExpressionEngine. I also added in some JavaScript functionality on the homepage and on the individual service pages.</p>',NULL,0,NULL,'2019-10-09 16:40:49','2019-10-09 16:40:49','8348ef25-5f61-4cd1-935c-39f40f6b6a39',1,NULL,NULL,NULL),(1021,1424,'PUMA City',NULL,'<p>In honor of the 2010 World Cup, we built a special one-page site for the PUMA City store in New York. The PUMA City store is a temporary store that is setup with shipping containers. My role in this project was to build-out the site and add in a lot of JavaScript functionality. I also had to work with my developers to integrate with the Ruby on Rails code.</p>\n<p>This was the longest page I have ever built!</p>',NULL,0,NULL,'2019-10-09 16:40:49','2019-10-09 16:40:49','3f7f2d7d-8835-4000-890a-2a52785d3e9d',1,NULL,NULL,NULL),(1022,1426,'The Bolt Collection',NULL,'<p>To announce the launch of Bolt’s new clothing line, we launched a one-page site that tracks Bolt’s progress in races throughout the summer. My role in this project was to build-out the site with HTML &amp; CSS and add in a lot of the JavaScript functionality. I also worked with our developers to integrate with out custom Ruby on Rails system.</p>\n<p>Building this site really made me want to buy some of the gear because it looks awesome.</p>',NULL,0,NULL,'2019-10-09 16:40:49','2019-10-09 16:40:49','e9f9c31d-b457-40fa-b8a5-884c1b748707',1,NULL,NULL,NULL),(1023,1428,'PUMA Time',NULL,'<p>To continue in our engagement with PUMA, we redesigned and relaunched the PUMA time website. I didn’t even know that PUMA sold watches until we started this site! My role in this project was to build-out the many pages and to implement the JavaScript interactions throughout the site. I also worked with our developers to integrate with our custom Ruby on Rails code.</p>',NULL,0,NULL,'2019-10-09 16:40:49','2019-10-09 16:40:49','9e288f5b-102a-480d-b048-e754c1e1c377',1,NULL,NULL,NULL),(1024,1434,'PUMA Clever Little Bag',NULL,'<p>PUMA spent a lot of time and money developing a new shoebox that would reduce its environmental impact. The result was a cool concept of a Clever Little Bag. We built a special page to help introduce the bag to the world. My role in this project was to build-out the site and add in the JavaScript functionality.</p>\n<p>The one really fun feature was the slide deck of the “big plans” that can be seen all the way at the end of the page. I also built a cross browser <a href=\"http://www.viget.com/inspire/custom-file-inputs-with-a-bit-of-jquery/\">custom file input</a> for users to upload their photos.</p>',NULL,0,'84871523','2019-10-09 16:40:49','2019-10-09 16:40:49','a8e7840e-a83f-41b7-a1e5-3f7d98c19a75',1,NULL,NULL,NULL),(1025,1436,'PUMA Golf',NULL,'<p>To continue our work with PUMA, I built the Golf site. This was similar to some of the other PUMA sites that I have built, except for a few new pieces here and there. My role in this project was to build-out the many pages and to implement the JavaScript interactions throughout the site. I also worked with our developers to integrate with our custom Ruby on Rails code.</p>',NULL,0,NULL,'2019-10-09 16:40:50','2019-10-09 16:40:50','ea414a22-9197-4d2e-8f2e-258c49647631',1,NULL,NULL,NULL),(1026,1441,'PUMA',NULL,'<p>After building many smaller sub-sites, we (Viget) were finally able to tackle puma.com itself. This required uniting many of those sub-sites we had already build into new standardized templates that would be uniquely “skinned” for each “category” site. My role included collaborating very closely with UX &amp; Design, HTML, CSS, and JavaScript.</p>',NULL,0,NULL,'2019-10-09 16:40:50','2019-10-09 16:40:50','cdb869b6-12ad-435c-8987-734a0a12f44f',1,NULL,NULL,NULL),(1027,1448,'Team Viget',NULL,'<p>Our <a href=\"http://v1.teamviget.com/\">existing Team Viget site</a> was out of date and was mainly focused on bringing new designers to Viget, and we decided that it was time to make it reflect <em>all</em> of Viget. My role in the project was to build it with HTML &amp; CSS, and to code the JavaScript interactions. Then, I implemented into ExpressionEngine so others could easily add stories. This site works best in Webkit browsers because we were able to take advantage of a lot of experimental properties.</p>',NULL,0,'84871420','2019-10-09 16:40:50','2019-10-09 16:40:50','3ccd6fe3-7ec7-4f17-9299-db14c028fb94',1,NULL,NULL,NULL),(1028,1453,'Rumble Games',NULL,'<p>Rumble is an online gaming company that needed some help from us to build their marketing site. My role was to build the front-end with HTML, CSS, &amp; JS, and then pass the build-out onto another Front-End Developer to finish the ExpressionEngine integration.</p>','https://www.rumblegames.com/',0,NULL,'2019-10-09 16:40:50','2019-10-09 16:40:50','c3681bba-8714-430c-a85b-82a3d3ea1a22',1,NULL,NULL,NULL),(1029,1459,'Ultimat Vodka',NULL,'<p>Ultimat Vodka wanted a different type of experience for their site, so I utilized AJAX to give the site a more streamlined experience. I also had to create an age blocker so that only people 18 years and older were allowed to access the site. My role in the project was to build the front-end and to complete the ExpressionEngine integration.</p>',NULL,0,'84871419','2019-10-09 16:40:50','2019-10-09 16:40:50','0bbae070-ea33-4f79-8bab-428c1256f994',1,NULL,NULL,NULL),(1030,1465,'NMS',NULL,'<p>New Media Strategies partnered with us (Viget) to recreate their web presence. They were looking for something new and different. My role on the project was to build the front-end, which included some light canvas work, and to implement the site into ExpressionEngine, which included custom add-on development.</p>',NULL,0,NULL,'2019-10-09 16:40:50','2019-10-09 16:40:50','0776e930-1f74-447a-a6a2-df66c9327899',1,NULL,NULL,NULL),(1031,1474,'Viget',NULL,'<p>After four years and a few failed attempts, we finally made it a point to redo the <strong>Viget</strong> website. Our old design served us well, but it was time to step it up to the next level. I was able to step in and implement the ExpressionEngine piece of the site, which included creating custom add-ons as well.</p>','http://viget.com/',0,NULL,'2019-10-09 16:40:50','2019-10-09 16:40:50','4113fa37-fb79-448d-a3dd-8b43ba08981d',1,NULL,NULL,NULL),(1032,1479,'Carr Workplaces',NULL,'<p>We (Viget) had originally built Carr’s site many years ago. We had the opportunity to redesign it and implement a new CMS. My role in the project was to help a little with building some pieces of the front-end, but my main role was to implement the site in ExpressionEngine, which included custom add-on development.</p>',NULL,0,NULL,'2019-10-09 16:40:51','2019-10-09 16:40:51','219f922b-8e18-4d14-be5b-3711ab34542b',1,NULL,NULL,NULL),(1033,1486,'AIGA Design Continuum Fund',NULL,'<p>The AIGA Design Continuum Fund is a yearly scholarship awarded to a local design student. We took on this project as pro-bono to support the local design community, and my role was to build the front-end of the site and to integrate into ExpressionEngine.</p>',NULL,0,NULL,'2019-10-09 16:40:51','2019-10-09 16:40:51','745a14d7-65e0-45e9-8f79-671e59c2b3a3',1,NULL,NULL,NULL),(1034,1491,'World Wildlife Fund',NULL,'<p>I had been itching to finally utilize responsive design on a client project, and the World Wildlife Fund presented that opportunity. The site is built on Ruby on Rails, and my role was to build the site with HTML, CSS, JavaScript, and Ruby on Rails views.</p>','http://worldwildlife.org',0,NULL,'2019-10-09 16:40:51','2019-10-09 16:40:51','ab177df1-8abe-4366-9a1d-a3434d637283',1,NULL,NULL,NULL),(1035,1499,'NEA',NULL,'<p>NEA is a leading a leading global venture capital firm who came to Viget to redesign their website. We rebuilt the site to adapt to whatever size screen it is being viewed on, and my role was to build the front-end of the site and integrate into ExpressionEngine.</p>','http://www.nea.com/',0,NULL,'2019-10-09 16:40:51','2019-10-09 16:40:51','055b02b4-654f-4854-a763-957b2cc0796f',1,NULL,NULL,NULL),(1036,1506,'Lansinoh',NULL,'<p>I sure didn’t know it before I started the project, but Lansinoh is one of the leaders in the breastfeeding industry. Since mobile accounted for 47% of visits, building a site to adapt to any device was a must. My role in the project was to build the front-end of the site and integrate with ExpressionEngine, which included ecommerce, user submission forms, and a store finder. This was probably the most complex ExpressionEngine site that I have built to date.</p>',NULL,0,NULL,'2019-10-09 16:40:51','2019-10-09 16:40:51','19a79689-96f1-45dc-8999-332f032d552d',1,NULL,NULL,NULL),(1037,1517,'Orbcomm',NULL,'<p>Building this site gave me the opportunity to build a site with <a href=\"http://buildwithcraft.com/\">Craft</a>; something I had been itching to use on a project for some time. My role in the project was to build the front-end of the site, configure Craft, and then integrate the two. In building this site, I also created three Craft plugins: <a href=\"https://github.com/davist11/craft-bust\">Bust</a>, <a href=\"https://github.com/davist11/craft-listing-section\">Listing Section</a>, and <a href=\"https://github.com/davist11/craft-reroute\">Reroute</a>.</p>',NULL,0,NULL,'2019-10-09 16:40:51','2019-10-09 16:40:51','c18d04d7-7e3c-42ef-b1c1-2afc353a5e27',1,NULL,NULL,NULL),(1187,1672,'Exactly How to Create a Custom jQuery Accordion',NULL,'<p>Yesterday, I saw that <a href=\"http://nettuts.com/articles/news/a-staff-writer-position-has-opened/\">NETTUTS was looking for another staff writer</a>. I figured that I would give it a shot and write a tutorial about creating a custom jQuery accordion (just like the one on the sidebar of my website). Well what do you know, <a href=\"http://nettuts.com/tutorials/javascript-ajax/exactly-how-to-create-a-custom-jquery-accordion/\">they published it</a>.</p>','http://net.tutsplus.com/tutorials/javascript-ajax/exactly-how-to-create-a-custom-jquery-accordion/',0,NULL,'2019-10-09 16:41:01','2019-10-09 16:41:01','dd2dfa71-451f-4e0f-90ba-c6ebaa6ea5ea',1,NULL,NULL,NULL),(1211,1696,'Creating a jQuery Word Counter',NULL,'<p>I had to code a form at work that required word limitations on each textarea. The article describing <a href=\"http://blog.themeforest.net/tutorials/creating-a-jquery-word-counter/\">how I created a jQuery word counter</a> was published on the ThemeForest blog.</p>','http://blog.themeforest.net/tutorials/creating-a-jquery-word-counter/',0,NULL,'2019-10-09 16:41:03','2019-10-09 16:41:03','03ac253e-45d0-4404-bc9a-7ca952613dd4',1,NULL,NULL,NULL),(1248,1733,'A Better jQuery In-Field Label Plugin',NULL,'<p>I’ve just written another article for my company blog about using <a href=\"http://www.viget.com/inspire/a-better-jquery-in-field-label-plugin/\">jQuery in-field labels</a>.</p>','http://www.viget.com/inspire/a-better-jquery-in-field-label-plugin/',0,NULL,'2019-10-09 16:41:05','2019-10-09 16:41:05','fa727837-4fa5-4c7c-b354-15428a3d5585',1,NULL,NULL,NULL),(1249,1734,'jQuery Presentation Plugin: Say NO to Keynote!',NULL,'<p>I’m done with Keynote and Powerpoint. I created a <a href=\"http://www.viget.com/inspire/jquery-presentation-plugin/\">jQuery Presentation Plugin</a> to use when giving presentations.</p>','http://www.viget.com/inspire/jquery-presentation-plugin/',0,NULL,'2019-10-09 16:41:05','2019-10-09 16:41:05','ddbcf20d-bdab-4b85-8861-995214f2ae58',1,NULL,NULL,NULL),(1250,1735,'YouTube Chromeless Video Player – jQuery Plugin',NULL,'<p>In my latest blog post on the Viget Inspire blog, I discussed a <a href=\"http://www.viget.com/inspire/youtube-chromeless-video-jquery-plugin/\">YouTube Chromeless Video jQuery Plugin</a> that I wrote while building the <a href=\"http://www.puma.com/running\">PUMA Running site</a>.</p>','http://www.viget.com/inspire/youtube-chromeless-video-jquery-plugin/',0,NULL,'2019-10-09 16:41:06','2019-10-09 16:41:06','dd07a22e-42a3-41fd-8d2b-4c1e602fd27f',1,NULL,NULL,NULL),(1255,1740,'jQuery Image Scroller Plugin',NULL,'<p>While working on the individual product page for PUMA, I had to use jQuery to create a scrollable interface for really tall products. It’s kind of hard to describe, but <a href=\"http://www.viget.com/inspire/jquery-image-scroller-plugin/\">have a look at the plugin for a better description</a>.</p>','http://www.viget.com/inspire/jquery-image-scroller-plugin/',0,NULL,'2019-10-09 16:41:06','2019-10-09 16:41:06','c45fe8b9-30f5-4882-9576-ef31e0eed7af',1,NULL,NULL,NULL),(1260,1745,'Simple jQuery Refactoring',NULL,'<p>I’ve learned so much about jQuery while working at Viget. I wrote a <a href=\"http://www.viget.com/inspire/simple-jquery-refactoring/\">blog post</a> about how you can improve your jQuery through some simple refactoring.</p>','http://www.viget.com/inspire/simple-jquery-refactoring/',0,NULL,'2019-10-09 16:41:06','2019-10-09 16:41:06','419c52c3-b79f-40fa-97a6-5b675363a70d',1,NULL,NULL,NULL),(1266,1751,'My New Best Friend: CSS Generated Content',NULL,'<p>I’ve started to use generated content more and more these days. <a href=\"http://www.viget.com/inspire/css-generated-content/\">Here are a couple of examples</a> from a recent project.</p>','http://www.viget.com/inspire/css-generated-content/',0,NULL,'2019-10-09 16:41:07','2019-10-09 16:41:07','ddf2050f-4ab9-4d68-9c88-0517bd36c172',1,NULL,NULL,NULL),(1268,1753,'HTML5 Elements: An Irresponsible Choice…Right Now',NULL,'<p>I figured it was time to post about a controversial topic that had come up recently. <a href=\"http://www.viget.com/inspire/html5-elements-irresponsible-choice-right-now/\">I just don’t see the value in using most HTML5 elements right now</a>.</p>','http://www.viget.com/inspire/html5-elements-irresponsible-choice-right-now/',0,NULL,'2019-10-09 16:41:07','2019-10-09 16:41:07','971f1969-6aba-4638-836e-9cc62970c19d',1,NULL,NULL,NULL),(1270,1755,'Notes From Our Default ExpressionEngine Build',NULL,'<p>I put together some <a href=\"http://www.viget.com/inspire/our-default-expressionengine-build/\">notes about Viget’s default ExpressionEngine build</a> in the hopes that you can find some tips and tricks in all of my nonsense.</p>','http://www.viget.com/inspire/our-default-expressionengine-build/',0,NULL,'2019-10-09 16:41:07','2019-10-09 16:41:07','3bf2bbd8-c6fa-4346-8f7c-09a42d5b605f',1,NULL,NULL,NULL),(1271,1756,'Background-clip, Text-shadow, & Gradients; Oh My!',NULL,'<p>I have been able to play around with <a href=\"http://www.viget.com/inspire/background-clip-text-shadow-gradients/\">background-clip, text-shadow, and gradients</a> on a few recent projects, and I wrote up some tricks that I have come across.</p>','http://www.viget.com/inspire/background-clip-text-shadow-gradients/',0,NULL,'2019-10-09 16:41:07','2019-10-09 16:41:07','087dd814-2e96-453e-8314-a683ac436026',1,NULL,NULL,NULL),(1275,1760,'jQuery Stick ‘em: Make Content Sticky on Scroll, to a Point',NULL,'<p>I created a plugin, <a href=\"http://viget.com/inspire/jquery-stick-em\">jQuery Stick ‘em</a>, to allow items to be “sticky” but only within a container.</p>','http://viget.com/inspire/jquery-stick-em',0,NULL,'2019-10-09 16:41:07','2019-10-09 16:41:07','285b31c8-0603-49ff-b4db-f6efb0f080d4',1,NULL,NULL,NULL),(1277,1762,'Who Says the Web is Just for Squares?',NULL,'<p>I had some fun building a crazy diamond responsive grid for a project at work. <a href=\"http://viget.com/inspire/who-says-the-web-is-just-for-squares\">This article</a> explains how I did it.</p>','http://viget.com/inspire/who-says-the-web-is-just-for-squares',0,NULL,'2019-10-09 16:41:07','2019-10-09 16:41:07','963d4b31-fa65-44d3-8db0-e4fef95656a4',1,NULL,NULL,NULL),(1278,1763,'JavaScript Execution Patterns for Non-Web Apps',NULL,'<p>I finally got back to blogging and wrote an article about <a href=\"http://viget.com/extend/javascript-execution-patterns-for-non-web-apps\">JavaScript execution patterns</a>, a topic which I recently presented on at the <a href=\"https://speakerdeck.com/trevor_davis/javascript-for-non-web-apps\">DC jQuery Meetup</a>.</p>','http://viget.com/extend/javascript-execution-patterns-for-non-web-apps',0,NULL,'2019-10-09 16:41:07','2019-10-09 16:41:07','7887e71c-a3db-44b8-9483-232f1beb5694',1,NULL,NULL,NULL),(1279,1764,'Sass & Compass:  Never Write  Regular CSS Again',NULL,'<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> &amp; <a href=\"http://compass-style.org/\">Compass</a>. After being introduced to Sass &amp; Compass about six months ago, I can’t imagine writing regular CSS ever again. I was a little hesitant at first, but now I can’t 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>',NULL,2017,NULL,'2019-10-09 16:41:07','2019-10-09 16:41:08','1f5e83df-9f58-485d-891d-53a9b14789ca',1,NULL,NULL,NULL),(1280,1765,'How to Preload Images When You Can’t Use CSS Sprites',NULL,'<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>\n<h2>An Example</h2><p class=\"leftSide pullLeft col1\">\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>\na.spriteVert { &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;}&lt;br /&gt;a.spriteVert:hover { background-position: bottom left; } </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’t 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’s 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 “fixes” 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’t get that “white flicker”. That may be a little hard to understand, so I’ll give an example.</p><h4>The Markup</h4><p class=\"codeblock\"><code>\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>\np.spriteContainer { &lt;br /&gt; background: url(http://trevordavis.net/images/content/2008/11/sprite-hover.gif) no-repeat -9999px -9999px;&lt;br /&gt;}&lt;br /&gt;a.spriteVert {&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;}&lt;br /&gt;a.spriteVert:hover { &lt;br /&gt; background-image: url(http://trevordavis.net/images/content/2008/11/sprite-hover.gif);&lt;br /&gt;} </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>',NULL,1835,NULL,'2019-10-09 16:41:08','2019-10-09 16:41:08','4dc02f4b-ee3f-4ba5-8bb6-d0705cc9bfa6',1,NULL,NULL,NULL),