<?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>Amped about Web Standards &#187; Tips</title>
	<atom:link href="http://www.ampedwebstandards.com/category/tips/feed/" rel="self" type="application/rss+xml" />
	<link>http://www.ampedwebstandards.com</link>
	<description>Discussion, code examples, and tutorials on web standards and web programming.</description>
	<lastBuildDate>Tue, 23 Feb 2010 10:05:24 +0000</lastBuildDate>
	<language>en</language>
	<sy:updatePeriod>hourly</sy:updatePeriod>
	<sy:updateFrequency>1</sy:updateFrequency>
	<generator>http://wordpress.org/?v=3.0.1</generator>
		<item>
		<title>Blank Post Editing Screen (WSOD) in WordPress 2.8</title>
		<link>http://www.ampedwebstandards.com/2009/11/23/blank-post-editing-screen-wsod-in-wordpress-2-8/</link>
		<comments>http://www.ampedwebstandards.com/2009/11/23/blank-post-editing-screen-wsod-in-wordpress-2-8/#comments</comments>
		<pubDate>Mon, 23 Nov 2009 07:38:39 +0000</pubDate>
		<dc:creator>alan</dc:creator>
				<category><![CDATA[News]]></category>
		<category><![CDATA[Tips]]></category>
		<category><![CDATA[2.8]]></category>
		<category><![CDATA[subversion]]></category>
		<category><![CDATA[wordpress]]></category>
		<category><![CDATA[wsod]]></category>

		<guid isPermaLink="false">http://www.ampedwebstandards.com/?p=122</guid>
		<description><![CDATA[Since, it took me over an hour to diagnose and fix this issue in one of my own WordPress installations, I thought I would write up a quick how-to on the solution to this issue to hopefully save others in wasting their own time. Symptom: Accessing the Edit screen via WordPress Admin showed a blank [...]]]></description>
			<content:encoded><![CDATA[<div class="tweetmeme_button" style="float: right; margin-left: 10px;">
			<a href="http://api.tweetmeme.com/share?url=http%3A%2F%2Fwww.ampedwebstandards.com%2F2009%2F11%2F23%2Fblank-post-editing-screen-wsod-in-wordpress-2-8%2F"><br />
				<img src="http://api.tweetmeme.com/imagebutton.gif?url=http%3A%2F%2Fwww.ampedwebstandards.com%2F2009%2F11%2F23%2Fblank-post-editing-screen-wsod-in-wordpress-2-8%2F&amp;source=aswitzer&amp;style=normal" height="61" width="50" /><br />
			</a>
		</div>
<p>Since, it took me over an hour to diagnose and fix this issue in one of my own WordPress installations, I thought I would write up a quick how-to on the solution to this issue to hopefully save others in wasting their own time.</p>
<p><strong>Symptom:</strong></p>
<p>Accessing the Edit screen via WordPress Admin showed a blank screen in several versions of WordPress 2.8. The rest of the Admin was working fine.</p>
<p><strong>Cause:</strong></p>
<p>I use Subversion to automate the update/upgrade to new versions of WordPress. This has worked great for me for awhile without incident. In the most recent update, the post.php file was updated and the Subversion update command changed the ownership of the file to the user <em>root</em>, which my script was running as.</p>
<p>This permission changed caused a subtle PHP error, and since the recent version of PHP 5 on my server has the default behavior of not displaying errors &#8211; a blank white screen was being shown in WordPress.</p>
<p><strong>Fix:</strong></p>
<p>Reset the permissions recursively on your entire WordPress install.</p>
<p>For example, if your user and group were <em>joesmith</em> and <em>users</em>, run the following command at the root of your WordPress install folder:</p>
<blockquote><p>chown -R joesmith:users *</p></blockquote>
<p>You should then be back in business!</p>
<p>So the moral of this story is, if you update your WordPress blog via Subversion &#8211; fix your file permissions afterwards.</p>
]]></content:encoded>
			<wfw:commentRss>http://www.ampedwebstandards.com/2009/11/23/blank-post-editing-screen-wsod-in-wordpress-2-8/feed/</wfw:commentRss>
		<slash:comments>2</slash:comments>
		</item>
		<item>
		<title>Evernote rocks!</title>
		<link>http://www.ampedwebstandards.com/2008/10/30/evernote-rocks/</link>
		<comments>http://www.ampedwebstandards.com/2008/10/30/evernote-rocks/#comments</comments>
		<pubDate>Thu, 30 Oct 2008 13:15:11 +0000</pubDate>
		<dc:creator>alan</dc:creator>
				<category><![CDATA[Tips]]></category>
		<category><![CDATA[evernote]]></category>
		<category><![CDATA[software]]></category>

		<guid isPermaLink="false">http://www.ampedwebstandards.com/?p=45</guid>
		<description><![CDATA[Evernote is a free service that allows you to &#8220;remember everything&#8221;. Think of it as a backup for your brain. With desktop, mobile, and web based interfaces, along with state-of-the-art OCR capabilities, it is literally possible to record nearly anything you see each day and have it automatically cataloged so that is is accessible and [...]]]></description>
			<content:encoded><![CDATA[<div class="tweetmeme_button" style="float: right; margin-left: 10px;">
			<a href="http://api.tweetmeme.com/share?url=http%3A%2F%2Fwww.ampedwebstandards.com%2F2008%2F10%2F30%2Fevernote-rocks%2F"><br />
				<img src="http://api.tweetmeme.com/imagebutton.gif?url=http%3A%2F%2Fwww.ampedwebstandards.com%2F2008%2F10%2F30%2Fevernote-rocks%2F&amp;source=aswitzer&amp;style=normal" height="61" width="50" /><br />
			</a>
		</div>
<p>Evernote is a free service that allows you to &#8220;remember everything&#8221;.</p>
<p>Think of it as a backup for your brain. With desktop, mobile, and web based interfaces, along with state-of-the-art OCR capabilities, it is literally possible to record nearly anything you see each day and have it automatically cataloged so that is is accessible and searchable later.</p>
<p>Evernote has been around for a few years, but has steadily improved its available interfaces (started out as Windows only) by adding Mac and mobile. (including a free iPhone/iPod Touch application)</p>
<p>I&#8217;ve only recently started using it, but the possibilities already have my mind reeling:</p>
<ul>
<li>Capture website snapshots instead of just a text link filed away in delicious</li>
<li>Save an image of each online purchase receipt page, instead of having to print it out</li>
<li>Take a picture of that great bottle of wine you just drank at a restaurant and you&#8217;ll be able to find it again later</li>
<li>Digitize all of your receipts</li>
<li>Capture those brilliant ideas you write down on dinner napkins</li>
<li>Convert your hand-written notes and throw them away</li>
</ul>
<p>Hopefully I&#8217;ve piqued your interest enough to check it out for yourself. Stop taking my word for it, and go <a title="What is Evernote?" href="http://http://www.evernote.com/about/what_is_en/" target="_blank">read more about Evernote today</a> &#8211; it could change the way you backup your brain! As with most free services, if you find yourself really making use of it, there is a pro version for $40/yr that will let you capture more and do more.</p>
<p>If you&#8217;re still not convinced, or still don&#8217;t get what all the fuss is about, check out the <a title="Expand your Brain with Evernote" href="http://lifehacker.com/5041631/expand-your-brain-with-evernote" target="_blank">Lifehacker article about it</a>. Lifehacker is a great website dedicated to helping you get more out of life.</p>
<p>Please drop a comment below if you already use Evernote, or if you give it a try and have something to share!</p>
]]></content:encoded>
			<wfw:commentRss>http://www.ampedwebstandards.com/2008/10/30/evernote-rocks/feed/</wfw:commentRss>
		<slash:comments>3</slash:comments>
		</item>
		<item>
		<title>Progressive Enhancement with jQuery</title>
		<link>http://www.ampedwebstandards.com/2008/08/29/progressive-enhancement-with-jquery/</link>
		<comments>http://www.ampedwebstandards.com/2008/08/29/progressive-enhancement-with-jquery/#comments</comments>
		<pubDate>Fri, 29 Aug 2008 08:28:18 +0000</pubDate>
		<dc:creator>alan</dc:creator>
				<category><![CDATA[Code]]></category>
		<category><![CDATA[Examples]]></category>
		<category><![CDATA[Tips]]></category>
		<category><![CDATA[javascript]]></category>
		<category><![CDATA[jQuery]]></category>
		<category><![CDATA[linkedin]]></category>
		<category><![CDATA[progressive enhancement]]></category>

		<guid isPermaLink="false">http://www.ampedwebstandards.com/?p=30</guid>
		<description><![CDATA[While I work on finishing up an overdue post on the amazing An Event Apart San Francisco conference I attended last week, I thought I would at least write about one of the many new concepts that was discussed. Progressive Enhancement (PE) is the concept of adding functionality or enhancements to the presentation and behavior [...]]]></description>
			<content:encoded><![CDATA[<div class="tweetmeme_button" style="float: right; margin-left: 10px;">
			<a href="http://api.tweetmeme.com/share?url=http%3A%2F%2Fwww.ampedwebstandards.com%2F2008%2F08%2F29%2Fprogressive-enhancement-with-jquery%2F"><br />
				<img src="http://api.tweetmeme.com/imagebutton.gif?url=http%3A%2F%2Fwww.ampedwebstandards.com%2F2008%2F08%2F29%2Fprogressive-enhancement-with-jquery%2F&amp;source=aswitzer&amp;style=normal" height="61" width="50" /><br />
			</a>
		</div>
<p><span id="extlinks">While I work on finishing up an overdue post on the amazing An Event Apart San Francisco conference I attended last week, I thought I would at least write about one of the many new concepts that was discussed.</span><br />
<code><script src="/scripts/jquery.js" type="text/javascript"></script></code></p>
<p>Progressive Enhancement (PE) is the concept of adding functionality or enhancements to the presentation and behavior of a webpage, using modern technologies such as CSS and Javascript. The PE approach adds the additional features thru externally linked files in order to avoid forcing older/less capable browsers to process data they don&#8217;t understand or can&#8217;t handle. In other words, the strategy demands that the basic content always be available, then add the fancier layout and features for browsers that can show it.</p>
<p>I&#8217;m going to show a quick but usable example of PE using jQuery. In this example, I am going to show how you can dynamically add an &#8220;external link&#8221; icon &#8211; <img src="/images/external.png" border="0" alt="" /> to links inside a specific area of your webpage.</p>
<p>1. <a href="http://docs.jquery.com/Downloading_jQuery">download the current release of jQuery</a> (at this writing &#8211; 1.2.6) and add it to your webpage in the tag.</p>
<p>2. Next, we will utilize the jQuery approach of executing Javascript code when the Document is loaded and the DOM is ready to be manipulated.</p>
<p><code>$(document).ready(function() { <code>});</code></code></p>
<p>3. Now, if we want to add an image after each external link, we can use the jQuery filter function which will addall elements that match a specified expression.</p>
<p>In the <code>section above, we'll add:</code></p>
<p><code>$("a").filter(".selected")</code></p>
<p>4. The expression will be another function that tests the hostname property of the link to see if it is different that the current page&#8217;s hostname.</p>
<p>Try this:</p>
<p><code>function() { return this.hostname &amp;&amp; this.hostname !== location.hostname; })</code></p>
<p>5. Lastly, we&#8217;ll use jQuery to insert the image after the link that matches the test expression &#8211; namely an external link!</p>
<p><code>.after(' &lt;img src="/images/ext.png" alt="External Link"&gt;');</code></p>
<p>6. Let&#8217;s put it all together!</p>
<p>Here&#8217;s the sum of the Javascript that we&#8217;ve written:</p>
<p><code>$(document).ready(function() {<br />
$('#extlinks a').filter(function() {<br />
return this.hostname &amp;&amp; this.hostname !== location.hostname;<br />
}).after(' &lt;img src="/images/ext.png" alt="External Link"&gt;');<br />
});</code></p>
<p>put that code in a Javascript file and include it after your jQuery code in your page&#8217;s :</p>
<p><code><script src="/scripts/ext-links.js" type="text/javascript"></script></code></p>
<p>That&#8217;s it! Now go give it a try for yourself.</p>
]]></content:encoded>
			<wfw:commentRss>http://www.ampedwebstandards.com/2008/08/29/progressive-enhancement-with-jquery/feed/</wfw:commentRss>
		<slash:comments>0</slash:comments>
		</item>
		<item>
		<title>Coding quick reference guides</title>
		<link>http://www.ampedwebstandards.com/2007/10/05/coding-quick-reference-guides/</link>
		<comments>http://www.ampedwebstandards.com/2007/10/05/coding-quick-reference-guides/#comments</comments>
		<pubDate>Fri, 05 Oct 2007 06:19:01 +0000</pubDate>
		<dc:creator>alan</dc:creator>
				<category><![CDATA[Code]]></category>
		<category><![CDATA[Tips]]></category>
		<category><![CDATA[css]]></category>
		<category><![CDATA[Microformats]]></category>
		<category><![CDATA[php]]></category>

		<guid isPermaLink="false">http://www.ampedwebstandards.com/2007/10/05/coding-quick-reference-guides/</guid>
		<description><![CDATA[Web developers need to have a tons of languages and syntaxes in their short term memories &#8211; HTML, CSS, Javascript, PHP, MySQL, Microformats, Regular Expressions &#8211; its a lot to know and remember. When I studied for big exams in college, my favorite technique was to create an all encompassing one-page sheet with everything I [...]]]></description>
			<content:encoded><![CDATA[<div class="tweetmeme_button" style="float: right; margin-left: 10px;">
			<a href="http://api.tweetmeme.com/share?url=http%3A%2F%2Fwww.ampedwebstandards.com%2F2007%2F10%2F05%2Fcoding-quick-reference-guides%2F"><br />
				<img src="http://api.tweetmeme.com/imagebutton.gif?url=http%3A%2F%2Fwww.ampedwebstandards.com%2F2007%2F10%2F05%2Fcoding-quick-reference-guides%2F&amp;source=aswitzer&amp;style=normal" height="61" width="50" /><br />
			</a>
		</div>
<p>Web developers need to have a tons of languages and syntaxes in their short term memories &#8211; HTML, CSS, Javascript, PHP, MySQL, Microformats, Regular Expressions &#8211; its a lot to know and remember.</p>
<p>When I studied for big exams in college, my favorite technique was to create an all encompassing one-page sheet with everything I needed to know for that exam. The act of creating that page was the process of reviewing for the exam, and then I had something to refer to right up until exam time, aid in the memorization.</p>
<p>As web developers trying to keep up with all of the technologies in our toolbox &#8211; we need all the help when can get. Dave Child has put together a thorough and impressive set of &#8220;cheat sheets&#8221;  that I highly recommend.</p>
<p>Head on over to Dave&#8217;s site <a href="http://addedbytes.com/cheat-sheets" title="Coding Cheat Sheets" target="_blank">addedbytes.com/cheat-sheets</a> to download the ones you need. Print and pin them up next to your monitor for the next time you can&#8217;t remember the syntax for the various box model attributes in CSS. <img src='http://www.ampedwebstandards.com/wp-includes/images/smilies/icon_smile.gif' alt=':)' class='wp-smiley' />  If you find them useful, don&#8217;t forget to get Dave something from his <a href="http://www.amazon.co.uk/exec/obidos/registry/3JVSYKW57HEYM" title="Amazon Wish List" target="_blank">Amazon wish list</a> as a way to say thanks.</p>
]]></content:encoded>
			<wfw:commentRss>http://www.ampedwebstandards.com/2007/10/05/coding-quick-reference-guides/feed/</wfw:commentRss>
		<slash:comments>0</slash:comments>
		</item>
	</channel>
</rss>
