<?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>Guillermo Rauch&#039;s Devthought &#187; usability</title>
	<atom:link href="http://www.devthought.com/tag/usability/feed/" rel="self" type="application/rss+xml" />
	<link>http://www.devthought.com</link>
	<description></description>
	<lastBuildDate>Mon, 30 Jan 2012 16:38:59 +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>Determine if caps lock is on with MooTools</title>
		<link>http://www.devthought.com/2009/04/19/determine-if-caps-lock-is-on-with-mootools/</link>
		<comments>http://www.devthought.com/2009/04/19/determine-if-caps-lock-is-on-with-mootools/#comments</comments>
		<pubDate>Sun, 19 Apr 2009 12:33:53 +0000</pubDate>
		<dc:creator>Guillermo Rauch</dc:creator>
				<category><![CDATA[Tumble]]></category>
		<category><![CDATA[keyboard]]></category>
		<category><![CDATA[tip]]></category>
		<category><![CDATA[usability]]></category>

		<guid isPermaLink="false">http://devthought.com/?p=848</guid>
		<description><![CDATA[This is a quick idea I came up with. We extend the Event native like this: Event.implement({ hasCapsLock: function(){ return ((this.code > 64 &#038;&#038; this.code < 91 &#038;&#038; !this.shift) &#124;&#124; (this.code > 96 &#038;&#038; this.code < 123 &#038;&#038; this.shift)); } &#8230; <a href="http://www.devthought.com/2009/04/19/determine-if-caps-lock-is-on-with-mootools/">Continue reading <span class="meta-nav">&#8594;</span></a>]]></description>
			<content:encoded><![CDATA[<p>This is a quick idea I came up with. We extend the Event native like this:</p>
<pre class='highlight ' lang="javascript">
Event.implement({

   hasCapsLock: function(){
      return ((this.code > 64 &#038;&#038; this.code < 91 &#038;&#038; !this.shift)
           || (this.code > 96 &#038;&#038; this.code < 123 &#038;&#038; this.shift));
   }

});
</pre>
<p>And then access the method from a <code class="inline">keypress</code> event:</p>
<pre class='highlight ' lang="javascript">
$('test').addEvent('keypress', function(event){
   if (event.hasCapsLock()){
      // do something
   }
});
</pre>
<p>The only drawback is that it relies on sniffing alphabet characters and whether the shift key was pressed. This means that if the user presses the caps lock key, you won't know it until another character is inserted.</p>
]]></content:encoded>
			<wfw:commentRss>http://www.devthought.com/2009/04/19/determine-if-caps-lock-is-on-with-mootools/feed/</wfw:commentRss>
		<slash:comments>10</slash:comments>
		</item>
		<item>
		<title>Improve your 404 pages with Google</title>
		<link>http://www.devthought.com/2009/04/11/improve-your-404-pages-with-google/</link>
		<comments>http://www.devthought.com/2009/04/11/improve-your-404-pages-with-google/#comments</comments>
		<pubDate>Sat, 11 Apr 2009 08:44:44 +0000</pubDate>
		<dc:creator>Guillermo Rauch</dc:creator>
				<category><![CDATA[Tumble]]></category>
		<category><![CDATA[404]]></category>
		<category><![CDATA[google]]></category>
		<category><![CDATA[usability]]></category>
		<category><![CDATA[widget]]></category>

		<guid isPermaLink="false">http://devthought.com/?p=801</guid>
		<description><![CDATA[Google Webmaster Tools has a very interesting widget to improve the usefulness of your 404 pages with little or no effort. It brings something like &#8220;Did you mean?&#8221; for your URLs, suggests links like pages in a higher hierarchy, and &#8230; <a href="http://www.devthought.com/2009/04/11/improve-your-404-pages-with-google/">Continue reading <span class="meta-nav">&#8594;</span></a>]]></description>
			<content:encoded><![CDATA[<p><a href="https://www.google.com/webmasters/tools/">Google Webmaster Tools</a> has a very interesting <a href="https://www.google.com/webmasters/tools/enhance404">widget</a> to improve the usefulness of your 404 pages with little or no effort. It brings something like &#8220;Did you mean?&#8221; for your URLs, suggests links like pages in a higher hierarchy, and adds a Google Search form.</p>
<p><a class="thumb" href="http://devthought.com/wp-content/uploads/2009/04/picture-11.png"><img src="http://devthought.com/wp-content/uploads/2009/04/picture-11-300x99.png" alt="Google 404 Webmaster Tool" title="Google 404 Webmaster Tool" width="300" height="99" class="alignnone size-medium wp-image-817" /></a></p>
<p>First, include this snippet where you want the suggestions to appear. For WordPress blogs, this is typically the <code class="inline">404.php</code> file in your themes folder ((The full path would be /wp-content/themes/yourtheme/404.php. Create it if it doesn&#8217;t exist)).</p>
<pre class='highlight ' lang="html4strict">
<script>
  var GOOG_FIXURL_LANG = 'en';
  var GOOG_FIXURL_SITE = 'your website url here';
</script>
<script src="http://linkhelp.clients.google.com/tbproxy/lh/wm/fixurl.js"></script>
</pre>
<p>Optionally, edit its look and feel by extending this base stylesheet. Tip: you can hide, for example, the search box, by adding <code class="inline">display: none</code> to <code class="inline">#goog-wm li.search-goog</code></p>
<pre class='highlight ' lang="html4strict">

    /* Widget content container */
   #goog-wm { }

    /* Heading for "Closest match" */
   #goog-wm h3.closest-match { }

    /* "Closest match" link */
   #goog-wm h3.closest-match a { }

    /* Heading for "Other things" */
   #goog-wm h3.other-things { }

    /* "Other things" list item */
   #goog-wm ul li { }

    /* Site search box */
   #goog-wm li.search-goog { }

    /* Search text input */
   #goog-wm-qt {}

    /* Search button */
   #goog-wm-sb { }
</pre>
<p>Then you&#8217;re done! Check <a href="http://devthought.com/abbout/">mine</a> out (deliberately wrong url) for an example.</p>
]]></content:encoded>
			<wfw:commentRss>http://www.devthought.com/2009/04/11/improve-your-404-pages-with-google/feed/</wfw:commentRss>
		<slash:comments>7</slash:comments>
		</item>
	</channel>
</rss>

