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

<channel>
	<title>Developer Yells at Cloud &#187; HOWTO</title>
	<atom:link href="http://www.webgurus.com/blog/category/howto/feed/" rel="self" type="application/rss+xml" />
	<link>http://www.webgurus.com/blog</link>
	<description>web developer gripes about kids these days</description>
	<lastBuildDate>Sat, 23 Apr 2011 20:17:49 +0000</lastBuildDate>
	<language>en</language>
	<sy:updatePeriod>hourly</sy:updatePeriod>
	<sy:updateFrequency>1</sy:updateFrequency>
	<generator>http://wordpress.org/?v=3.3.1</generator>
		<item>
		<title>Postfix + vmailboxes + procmail</title>
		<link>http://www.webgurus.com/blog/2010/07/postfix-vmailboxes-procmail/</link>
		<comments>http://www.webgurus.com/blog/2010/07/postfix-vmailboxes-procmail/#comments</comments>
		<pubDate>Sat, 03 Jul 2010 05:01:21 +0000</pubDate>
		<dc:creator>Tim Elkins</dc:creator>
				<category><![CDATA[HOWTO]]></category>

		<guid isPermaLink="false">http://www.webgurus.com/blog/?p=221</guid>
		<description><![CDATA[I needed to do some mailserver reconfiguring tonight and found this Howto to be very useful. Of course, I have a goofy directory structure for virtual mail that still made it a bit of a chore, but not too badly.]]></description>
			<content:encoded><![CDATA[<p>I needed to do some mailserver reconfiguring tonight and found <a href="http://www.linuxbackups.org/virtual-procmail">this Howto</a> to be very useful. Of course, I have a goofy directory structure for virtual mail that still made it a bit of a chore, but not too badly.</p>
]]></content:encoded>
			<wfw:commentRss>http://www.webgurus.com/blog/2010/07/postfix-vmailboxes-procmail/feed/</wfw:commentRss>
		<slash:comments>0</slash:comments>
		</item>
		<item>
		<title>How to tell your readers to go read something else</title>
		<link>http://www.webgurus.com/blog/2010/04/how-to-tell-your-readers-to-go-read-something-else/</link>
		<comments>http://www.webgurus.com/blog/2010/04/how-to-tell-your-readers-to-go-read-something-else/#comments</comments>
		<pubDate>Mon, 12 Apr 2010 04:12:57 +0000</pubDate>
		<dc:creator>Tim Elkins</dc:creator>
				<category><![CDATA[HOWTO]]></category>

		<guid isPermaLink="false">http://www.webgurus.com/blog/?p=204</guid>
		<description><![CDATA[If you are going to have a lot of links in an article, try to make them relevant to your point and not be self-serving distractions.]]></description>
			<content:encoded><![CDATA[<p>Or rather, how not to. I saw a link on Fark to an <a href="http://www.time.com/time/nation/article/0,8599,1978051,00.html">article at TIME.com</a> that seemed to suggest that the &#8220;average&#8221; American diner was dead. I wrongly assumed they meant the restaurant and not the person dining, so the premise seemed odd enough to me to actually read the article for a change. Diner culture is alive and well in New Hampshire, in fact <a href="http://www.lindysdiner.com">diners are said to be crucial to the first-in-the-nation presidential primary</a>. There are at least 5 &#8220;average&#8221; (ie, old-fashioned) diners within a 20 minute drive of my home, all independent local places that are not part of any national chain, all serving basic, straight-forward diner fare to mostly locals. No hipsters dining on equal slices of cherry pie and irony in these places!</p>
<p>The article instead is about the increasing sophistication/boredom of the American palate, moving away from meatloaf, hamburgers and mac &#038; cheese and towards tripe like&#8230; bacon-wrapped tripe. Meh, times change, America is a huge melting pot, learn to make meatloaf yourself if The Four Seasons or Spago are no longer serving it. Then I noticed that each paragraph was followed by a link to other content within TIME&#8217;s site. Interrupting an article like that is a little odd and a bit annoying but hey, if that&#8217;s how they want to lay out their site, that&#8217;s their choice. They already have lists of other articles flanking the text for this one along with the obligatory massive Flash skyscraper ad, so why not embed even more other links in the interior content, too. You obviously don&#8217;t expect the reader to finish the entire 8.1 paragraphs anyways, so you might as well grab them while you can.</p>
<p>I stopped reading at the second link, &#8220;See YouTube&#8217;s 50 Best Videos.&#8221; What the heck did that have to do with anything in the preceding paragraph? It&#8217;s like some new variant of link spam. It might as well have read, &#8220;you, hey you! Don&#8217;t bother reading this article, go to this slideshow of 50 videos on YouTube and generate us some pageviews! Yoink!&#8221; The links in the paragraphs themselves were at least relevant to the article, but the links after them sure weren&#8217;t. &#8220;See a TIME video on a man cave.&#8221; Well, you did mention &#8216;man caves&#8217; in the preceding paragraph, so&#8230; &#8220;See the 100 best TV shows of all time.&#8221; Uh, ok? Just because you mentioned Lucille Ball, Jackie Gleason and <i>The Love Boat</i>, sure, show me TV Land&#8217;s upcoming schedule&#8230; &#8220;Comment on this story.&#8221; But there&#8217;s still two paragraphs left to go! Can I finish before I comment or would you like my impressions of it so far? &#8220;See Rachael Ray in Praise of Burgers and Our Culinary Tastes.&#8221; Ok, fine, I give up. Whatever point the author might have been trying to make has been sabotaged by these &#8220;calls to action&#8221; inserted in the middle. We don&#8217;t expect you to actually read this or any article, we just want you to <i>keep on clicking</i>. Click more. Click more now. Click. And be happy.</p>
]]></content:encoded>
			<wfw:commentRss>http://www.webgurus.com/blog/2010/04/how-to-tell-your-readers-to-go-read-something-else/feed/</wfw:commentRss>
		<slash:comments>2</slash:comments>
		</item>
		<item>
		<title>External url icon CSS</title>
		<link>http://www.webgurus.com/blog/2009/09/external-url-icon-css/</link>
		<comments>http://www.webgurus.com/blog/2009/09/external-url-icon-css/#comments</comments>
		<pubDate>Wed, 30 Sep 2009 18:04:24 +0000</pubDate>
		<dc:creator>Tim Elkins</dc:creator>
				<category><![CDATA[HOWTO]]></category>
		<category><![CDATA[Shameless Self-Promotion]]></category>
		<category><![CDATA[css]]></category>
		<category><![CDATA[inkscape]]></category>
		<category><![CDATA[svg]]></category>

		<guid isPermaLink="false">http://www.webgurus.com/blog/?p=44</guid>
		<description><![CDATA[It didn&#8217;t take long at all before the linkdumpish nature of this blog so far caught up with me: I grew tired of adding class="external_link" to almost all the &#60;A&#62; tags. I also did not like how the icon did not match the visited link color. I corrected both of these today. First, I opened [...]]]></description>
			<content:encoded><![CDATA[<p><!-- 36fmk7dgec --> It didn&#8217;t take long at all before the linkdumpish nature of this blog so far caught up with me: I grew tired of adding <code>class="external_link"</code> to almost all the <code>&lt;A&gt;</code> tags. I also did not like how the icon did not match the visited link color. I corrected both of these today.</p>
<p><div id="attachment_45" class="wp-caption alignright" style="width: 110px"><a href="http://www.webgurus.com/blog/wp-content/uploads/2009/09/url-external-step1.png"><img src="http://www.webgurus.com/blog/wp-content/uploads/2009/09/url-external-step1.png" alt="Square visible beneath, yuck!" title="External URL icon, step 1" width="100" height="100" class="size-full wp-image-45" /></a><p class="wp-caption-text">Square visible beneath, yuck!</p></div>First, I opened the original SVG file for the external url icon in Inkscape. I had changed the 10&#215;10 PNG to be transparent but the results were less than satisfactory and recoloring it would make it look worse. The SVG has just two objects &#8211; the square and the arrow above it. I removed the white fill on both objects to make them transparent, but didn&#8217;t like seeing the corner of the square peeking through the arrow.<br />
<br clear="both"/><br />
<div id="attachment_47" class="wp-caption alignright" style="width: 110px"><a href="http://www.webgurus.com/blog/wp-content/uploads/2009/09/url-external-step2.png"><img src="http://www.webgurus.com/blog/wp-content/uploads/2009/09/url-external-step2.png" alt="Square with a difference" title="URL External icon Step 2" width="100" height="100" class="size-full wp-image-47" /></a><p class="wp-caption-text">Square with a difference</p></div>Then, I created a new layer via <b>Layer > Add Layer&#8230;</b> and copied the arrow object into it, making sure the two arrows were exactly aligned on top of each other. I then hid the new layer, selected both the square and arrow, and selected <b>Path > Difference</b> from the menu. Simple!<br />
<br clear="both"/><br />
<div id="attachment_53" class="wp-caption alignright" style="width: 110px"><a href="http://www.webgurus.com/blog/wp-content/uploads/2009/09/url-external-step4.png"><img src="http://www.webgurus.com/blog/wp-content/uploads/2009/09/url-external-step4.png" alt="Visited vers." title="External URL icon (visited)" width="100" height="100" class="size-full wp-image-53" /></a><p class="wp-caption-text">Visited version</p></div> <div id="attachment_48" class="wp-caption alignright" style="width: 110px"><a href="http://www.webgurus.com/blog/wp-content/uploads/2009/09/url-external-step3.png"><img src="http://www.webgurus.com/blog/wp-content/uploads/2009/09/url-external-step3.png" alt="Finished icon" title="External URL icon Step 3" width="100" height="100" class="size-full wp-image-48" /></a><p class="wp-caption-text">Finished icon</p></div>Finally, I unhid the arrow layer and exported the image as a 10&#215;10 PNG. I set the square to be the visited link color and picked something a shade lighter for the arrow (I didn&#8217;t fuss on that), and exported that as a 10&#215;10 PNG as well.<br />
<br clear="both"/><br />
I wanted the URL icons to appear only in the blog entries themselves but not if it&#8217;s a link to this site or a relative link so to finish, I changed the CSS from having a <code>A.external_link</code> definition to the following:</p>
<p><code>.entry_content A {<br />
&nbsp;&nbsp;&nbsp;&nbsp;background-image: url('images/url-external-trans.png');<br />
&nbsp;&nbsp;&nbsp;&nbsp;background-repeat: no-repeat;<br />
&nbsp;&nbsp;&nbsp;&nbsp;background-position: right top;<br />
&nbsp;&nbsp;&nbsp;&nbsp;padding-right: 13px;<br />
}</code></p>
<p><code>.entry_content A:visited {<br />
&nbsp;&nbsp;&nbsp;&nbsp;background-image: url('images/url-external-trans-visited.png');<br />
}</code></p>
<p><code>.entry_content A[href^="http://webgurus.com"],<br />
.entry_content A[href^="http://new.webgurus.com"],<br />
.entry_content A[href^="http://www.webgurus.com"],<br />
.entry_content A[href^="/"],<br />
.entry_content A[href^=".."],<br />
.entry_content A[href^="javascript"]<br />
{<br />
&nbsp;&nbsp;&nbsp;&nbsp;padding-right: 0px;<br />
&nbsp;&nbsp;&nbsp;&nbsp;background-image: none;<br />
}</code></p>
<p>C&#8217;est fin! Any modern browser will display <a href="http://www.google.com">this link with an icon</a> and <a href="http://www.webgurus.com/blog">this one without</a>. At worst, any modern browser will a partial or broken implementation of CSS will either display the icon for all links or for none at all. I can live with either. But IE 7 is not quite a modern browser. If there was a link with a &lt;br/&gt; or one that wrapped over two lines, the icon was displayed in the wrong location, at the top right of the first line and not at the end of the link as other Mozilla and WebKit browsers do. I used a bit of jQuery to compare the link&#8217;s height with the line-height in CSS and removed the background image and appended a normal <code>&lt;img&gt;</code> if the link was broken up over more than one line.</p>
]]></content:encoded>
			<wfw:commentRss>http://www.webgurus.com/blog/2009/09/external-url-icon-css/feed/</wfw:commentRss>
		<slash:comments>0</slash:comments>
		</item>
	</channel>
</rss>

