<?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>Elvis Montero &#187; Code</title>
	<atom:link href="http://www.elvismontero.com/category/code/feed/" rel="self" type="application/rss+xml" />
	<link>http://www.elvismontero.com</link>
	<description>Technologist. Blogger. Human.</description>
	<lastBuildDate>Sun, 19 Jun 2011 15:19:50 +0000</lastBuildDate>
	<language>en</language>
	<sy:updatePeriod>hourly</sy:updatePeriod>
	<sy:updateFrequency>1</sy:updateFrequency>
	<generator>http://wordpress.org/?v=3.1.3</generator>
		<item>
		<title>Lowest Common Ancestor</title>
		<link>http://www.elvismontero.com/2011/03/21/lowest-common-ancestor/</link>
		<comments>http://www.elvismontero.com/2011/03/21/lowest-common-ancestor/#comments</comments>
		<pubDate>Mon, 21 Mar 2011 22:58:10 +0000</pubDate>
		<dc:creator>emontero</dc:creator>
				<category><![CDATA[Code]]></category>
		<category><![CDATA[Programming Praxis]]></category>

		<guid isPermaLink="false">http://www.elvismontero.com/?p=909</guid>
		<description><![CDATA[Yet another PP challenge piqued my interest. Here&#8217;s the problem statement: Today’s problem appears with some regularity at places like Proggit and Stack Overflow and in lists of programming interview questions: Given a binary tree t and two elements of the tree, m and n, with m&#60;n, find the lowest element of the tree (farthest [...]]]></description>
			<content:encoded><![CDATA[<p>Yet another <a href="http://www.programmingpraxis.com" target="_blank">PP</a> challenge piqued my interest. <a href="http://programmingpraxis.com/2011/03/11/lowest-common-ancestor/" target="_blank">Here&#8217;s the problem statement:</a></p>
<blockquote><p><a href="http://www.elvismontero.com/wp-content/uploads/2011/03/bst.png"><img class="alignright size-full wp-image-915" style="margin-right: 10px; margin-left: 10px; border: 0pt none;" title="bst" src="http://www.elvismontero.com/wp-content/uploads/2011/03/bst.png" alt="" width="200" height="167" /></a></p>
<p>Today’s problem appears with some regularity at places like Proggit  and Stack Overflow and in lists of programming interview questions:</p>
<p><strong>Given a binary tree <em>t</em> and two elements of the tree, <em>m</em> and <em>n</em>, with <em>m</em>&lt;<em>n</em>, find the lowest element of the tree (farthest from the root) that is an ancestor of both <em>m</em> and <em>n</em>.</strong></p>
<p>For example, in the tree shown at right, the lowest common ancestor  of 4 and 7 is 6, the lowest common ancestor of 4 and 10 is 8, and the  lowest common ancestor of 1 and 4 is 3.  It is possible for an element  of the tree to be its own ancestor, so the lowest common ancestor of 1  and 3 is 3, and the lowest common ancestor of 3 and 6 is 3.</p>
<p>Your task is to write a function that finds the lowest common  ancestor of two elements of a binary tree.  When you are finished, you  are welcome to <a href="http://programmingpraxis.com/2011/03/11/lowest-common-ancestor/2/">read</a> or <a href="http://programmingpraxis.codepad.org/h8u1RuTR">run</a> a suggested solution, or to post your own solution or discuss the exercise in the comments below.</p></blockquote>
<p>When it comes to real life applicability (and sheer awesomeness!), <a href="http://en.wikipedia.org/wiki/Binary_trees" target="_blank">binary trees</a> are among the highest of the pack in the realm of data structures. Because of this innocuous little fact, I decided I simply had to solve this problem right away. Let&#8217;s dive right into it!</p>
<p><strong>NOTE: The Java source code for the solution described below can be found <a href="../progpraxis/LowestCommonAncestor.html" target="_blank">here</a>.</strong></p>
<h1>Step 1</h1>
<p>We need to represent nodes and the tree itself first. <strong>Trees are recursive identities in nature</strong>. Namely, trees are made up of trees (subtrees), which are in time composed of more trees (child nodes), which, by definition, are also trees. For instance, analyzing the tree from the problem statement, we can say 3 is the root node for 1 and 6. 6 is the root node for 4 and 7. 4 is its own root node. If we take 3 and detach it from 8, we now have a full-blown tree. In order to model these relationships in code, a class like the following would suffice:</p>
<div style="overflow: auto; width: auto; color: black; background: none repeat scroll 0% 0% white; padding: 0.2em 0.6em;">
<table>
<tbody>
<tr>
<td>
<pre style="margin: 0; line-height: 125%;">1
2
3
4
5
6</pre>
</td>
<td>
<pre style="margin: 0; line-height: 125%;"><span style="color: #0000aa;">class</span> <span style="color: #00aa00; text-decoration: underline;">Node</span>{
     <span style="color: #0000aa;">private</span> Node left;
     <span style="color: #0000aa;">private</span> Node right;
     <span style="color: #0000aa;">private</span> <span style="color: #00aaaa;">int</span> value;
     <span style="color: #0000aa;">private</span> String path;
}
</pre>
</td>
</tr>
</tbody>
</table>
</div>
<p>What we&#8217;re basically saying with this trivial Java code is that each node can have two nodes (right and left). Nodes also have a value (specifically, an integer in this case) and a String representation of their paths to the root node. This austere model has everything we need in order to solve the problem at hand.</p>
<h1>Step 2</h1>
<p>Once we have an instance of our tree in place, we must find a way to traverse it and determine the path from the root node to every other node. The following snippet does the trick:<br />
<!-- HTML generated using hilite.me --></p>
<div style="overflow: auto; width: auto; color: black; background: none repeat scroll 0% 0% white; padding: 0.2em 0.6em;">
<table>
<tbody>
<tr>
<td>
<pre style="margin: 0; line-height: 125%;"> 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17</pre>
</td>
<td>
<pre style="margin: 0; line-height: 125%;"><span style="color: #0000aa;">static</span> <span style="color: #00aaaa;">void</span> <span style="color: #00aa00;">traverse</span>(Node node, Stack&lt;Node&gt; stack){
     stack.<span style="color: #1e90ff;">push</span>(node);

     <span style="color: #0000aa;">if</span>(node.<span style="color: #1e90ff;">getRight</span>() != <span style="color: #0000aa;">null</span>)
       traverse(node.<span style="color: #1e90ff;">getRight</span>(), stack);

     <span style="color: #0000aa;">if</span>(node.<span style="color: #1e90ff;">getLeft</span>() != <span style="color: #0000aa;">null</span>)
       traverse(node.<span style="color: #1e90ff;">getLeft</span>(), stack);

     StringBuilder path = <span style="color: #0000aa;">new</span> StringBuilder();
     <span style="color: #0000aa;">for</span>(Node n : stack)
       path.<span style="color: #1e90ff;">append</span>(n).<span style="color: #1e90ff;">append</span>(<span style="color: #aa5500;">" "</span>);
     node.<span style="color: #1e90ff;">setPath</span>(path.<span style="color: #1e90ff;">toString</span>().<span style="color: #1e90ff;">trim</span>());

     stack.<span style="color: #1e90ff;">pop</span>();
     <span style="color: #0000aa;">return</span>;
}
</pre>
</td>
</tr>
</tbody>
</table>
</div>
<p>The algorithm used here to visit each node is famously called <a href="http://en.wikipedia.org/wiki/Depth-first_search" target="_blank">DFS</a> (<em>depth-first search</em>). Also, notice how we&#8217;re using a stack, a <a href="http://en.wikipedia.org/wiki/LIFO_%28computing%29" target="_blank">LIFO</a> data structure, to keep visited nodes accessible when we decide to map a node&#8217;s path. After computing all the nodes&#8217; paths in our tree, we now must find the lowest common ancestor for the two nodes given. This is rather easy once steps 1 and 2 are out of the way.</p>
<h1>Step 3</h1>
<p>After the <em><strong>traverse</strong></em> function is executed, we have all nodes&#8217; paths in their respective <em><strong>path</strong></em> properties. For 4, this would be the result:</p>
<pre style="text-align: center;"><strong>8 3 6 4</strong></pre>
<p>Now for 7:</p>
<pre style="text-align: center;"><strong>8 3 6 7</strong></pre>
<p>And for 14:</p>
<pre style="text-align: center;"><strong>8 10 14</strong></pre>
<p>Now, I know what you&#8217;re thinking: <em>how is this useful, Elvis?</em> Well, I&#8217;m glad you asked. The answer is we must merely check which of these space-separated elements are identical for two nodes up to a certain point (starting from left to right). That is to say, <strong>for two specific nodes, the rightmost match in two paths is the lowest common ancestor</strong>. For instance, let&#8217;s say we want to find out the lowest common ancestor for nodes 1 (path: 8 3 1) and 4 (path: 8 3 6 4). We&#8217;d line both Strings up like this:</p>
<pre style="text-align: center;"><strong>8 3 1  </strong></pre>
<pre style="text-align: center;"><strong>8 3 6 4</strong></pre>
<p>We&#8217;re now going to iterate the String with the fewer elements and compare each constituent to the other node&#8217;s path. In this case, because of 1&#8242;s path, it&#8217;d be <strong>1 vs 4</strong>. Essentially, this is what we&#8217;d ask each time: <em>are these two elements equal?</em> If they are, we&#8217;ve found the lowest ancestor. We move on and compare the next elements in line. We do this until there aren&#8217;t anymore items to compare (i.e. we&#8217;ve ran out of elements in the shorter path). Here&#8217;s some pseudo code that exemplifies this process for nodes 1 and 4:</p>
<pre style="padding-left: 30px;">Step 1: 8 equals 8? Yes. 8 is the lowest ancestor.</pre>
<pre style="padding-left: 30px;">Step 2: 3 equals 3? Yes. 3 is now the lowest ancestor.</pre>
<pre style="padding-left: 30px;">Step 3: 1 equals 6? No. 3 is still the lowest ancestor.</pre>
<pre style="padding-left: 30px;">Step 4: No more elements to compare. We're done.</pre>
<pre style="padding-left: 30px;">Step 5: Answer: 3.
</pre>
<p>Elementary, right? The function <em><strong>getLowestCommonAncestor</strong></em> does exactly what&#8217;s described here.</p>
<h1>Step 4?</h1>
<p>That&#8217;s it! We don&#8217;t need anything else. A straightforward solution is possible in 3 steps. <strong>Can you do better?</strong> I recommend you read some of the solutions posted at PP. There are incredible implementations there (e.g. <small><a href="http://bonsaicode.wordpress.com/2011/03/11/programming-praxis-lowest-common-ancestor/" target="_blank">Remco&#8217;s amazing Haskell solution</a>). </small></p>
]]></content:encoded>
			<wfw:commentRss>http://www.elvismontero.com/2011/03/21/lowest-common-ancestor/feed/</wfw:commentRss>
		<slash:comments>2</slash:comments>
		</item>
		<item>
		<title>Fun with Word Cubes</title>
		<link>http://www.elvismontero.com/2010/07/26/fun-with-word-cubes/</link>
		<comments>http://www.elvismontero.com/2010/07/26/fun-with-word-cubes/#comments</comments>
		<pubDate>Mon, 26 Jul 2010 13:42:36 +0000</pubDate>
		<dc:creator>emontero</dc:creator>
				<category><![CDATA[Code]]></category>
		<category><![CDATA[Programming Praxis]]></category>

		<guid isPermaLink="false">http://www.elvismontero.com/?p=645</guid>
		<description><![CDATA[Programming Praxis (PP) recently published a puzzle that piqued my interest. Basically, the challenge is to code a solver for Word Cubes. Since I&#8217;ve always been a Word Cube aficionado, I decided to take a crack at the problem and see if I can come up with a decent solution. Before we move forward, I [...]]]></description>
			<content:encoded><![CDATA[<p style="text-align: left;"><a href="http://programmingpraxis.com/" target="_blank">Programming Praxis</a> (PP) recently published a puzzle that piqued my interest. Basically, the challenge is to code a solver for Word Cubes. Since I&#8217;ve always been a Word Cube aficionado, I decided to take a crack at the problem and see if I can come up with a decent solution.</p>
<p>Before we move forward, I must provide some context for the uninitiated. Here&#8217;s the problem statement from PP:</p>
<blockquote><p><img class="alignright" style="margin: 10px;" src="/stuff/wordcube.png" alt="" width="115" height="115" /><br />
Word cube is game in which players form words from the nine letters  in a cube.  Words must have four or more letters and must use the  central letter from the cube; at least one word will use all nine  letters in the cube.  The player who forms the most words wins.  Many  newspapers publish a word cube on their puzzle page, and Stealthcopter  publishes a word cube on line <a href="http://www.stealthcopter.com/wordcube/" target="_blank">daily</a>.  Wikipedia  describes word cubes under the caption “<a href="http://en.wikipedia.org/wiki/Word_polygon" target="_blank">word polygon</a>.”   There are twelve words formed from the word cube at right: bonnie,  bunion, coin, concubine, conic, cubic, ennui, icon, nice, nine, nuncio,  and union.</p>
<p>Your task is to write a program that finds all matching words for a  given word cube.  When you are finished, you are welcome to <a href="http://programmingpraxis.com/2010/07/13/word-cube/2/" target="_blank">read</a> or <a href="http://programmingpraxis.codepad.org/E61ALT0i" target="_blank">run</a> a suggested solution, or to post your own solution or discuss the  exercise in the comments below.</p></blockquote>
<p>Now that we know what needs to be done, let&#8217;s focus our attention on a possible solution. But first, some essential mathematical concepts are in order.</p>
<h2>Combinatorics 101</h2>
<p><strong>Math -&gt; Maht -&gt; Mhta -&gt; Mhat</strong></p>
<p>What do all the preceding words have in common? They seem to be <strong>permutations </strong>of a finite set (i.e. the set comprised of the letters &#8220;M&#8221;, &#8220;a&#8221;, &#8220;t&#8221;, and &#8220;h&#8221;). A permutation is nothing more than a given arrangement of a set&#8217;s elements. The notion is important because before we can exhaustively find all the possible English words that can be formed with the letters of a Word Cube, we need to compute the permutations for <em>each</em> <strong>combination </strong>of 4-, 5-, 6-, 7-, 8- and 9-letter words.</p>
<p>If you still remember anything from your discrete mathematics courses, you may know the formula to compute the number of possible permutations for a given set is the factorial of its size. Namely, if I wanted to know the number of different permutations that can be formed with the letters of the word &#8220;Math&#8221;, I&#8217;d do this:</p>
<p style="text-align: center;"><code><strong>4 x 3 x 2 x 1 = 24</strong></code></p>
<p>We can verify this fact by generating all the possible groupings:</p>
<p style="text-align: center;"><code>Math<br />
Maht<br />
Mtah<br />
Mtha<br />
Mhat<br />
Mhta<br />
aMth<br />
aMht<br />
atMh<br />
athM<br />
ahMt<br />
ahtM<br />
tMah<br />
tMha<br />
taMh<br />
tahM<br />
thMa<br />
thaM<br />
hMat<br />
hMta<br />
haMt<br />
hatM<br />
htMa<br />
htaM<br />
</code></p>
<p>As it can be easily seen, the total number of groupings is indeed 24. The iterative multiplication of all the integers from one to the set&#8217;s size, inclusive,  gives us the number of different permutations without repetition. Incidentally, that&#8217;s exactly what the factorial is. The factorial is algebraically expressed as <strong>n!</strong> (e.g. 3! = 6, 4! = 24 and 6! = 720). We&#8217;d read &#8220;3!&#8221; as &#8220;three factorial&#8221;.</p>
<p>A combination is<strong> </strong>a similarly simple concept to grok. If I asked you to compute all the possible combinations of the word &#8220;Math&#8221;, choosing 3 characters at a time, you&#8217;d show me this:</p>
<p style="text-align: center;"><code>Mat<br />
Mah<br />
Mth<br />
ath<br />
</code></p>
<p>On the other hand, if I asked the same question, but instead I&#8217;d said &#8220;choosing 4 characters at a time&#8221;, you&#8217;d have showed me this:</p>
<p style="text-align: center;"><code>Math</code></p>
<p>Do you see a pattern at play here? Combinations are arrangements of a set&#8217;s elements <strong>without repetition</strong>. Those arrangements are formed by taking characters out of the original set in accordance with the desired size of the resulting groupings (e.g. &#8220;choosing 3 characters at a time&#8221;, &#8220;choosing 4 characters at a time&#8221;, et cetera). In order to solve a word cube, we need to create a set with all the combinations that we&#8217;re interested on, and subsequently permute those combinations in the hopes of finding legitimate English words.</p>
<p><em><strong>NOTE: </strong></em>This is a superficial treatment of two profound and very interesting concepts. If you&#8217;d like to go deeper down the rabbit hole, ask almighty Google.</p>
<p><strong><em>NOTE</em> 2:</strong> If you&#8217;d like to see how to compute the permutations and combinations of a set in Java code, you can read Michael Gilleland&#8217;s articles <a href="http://www.merriampark.com/perm.htm" target="_blank">here</a> and <a href="http://www.merriampark.com/comb.htm" target="_blank">here</a>. As you shall notice upon reviewing my code, I&#8217;m using his solutions extensively.</p>
<h2>Implementation Details</h2>
<p>Now that we&#8217;ve outlined the &#8220;hardcore&#8221; math behind the problem, let&#8217;s get to it. These are the steps we need to take if we are to successfully solve a Word Cube:</p>
<ol>
<li><strong>Find all the possible words that can be put together using the characters from the 3 x 3 grid.</strong></li>
<li><strong>Select the words that have four or more characters and contain the letter from the center of the grid.</strong></li>
<li><strong>Select the words that comply with the above criteria and can also be found in an English dictionary.</strong></li>
<li><strong>Display those words.</strong></li>
</ol>
<p><a href="http://elvismontero.com/progpraxis/WordCubeSolver.html" target="_blank">You can read the source code in its entirety here</a>. For step (1), we need to generate all the possible combinations of the requested size (i.e. 4, 5, 6, 7, 8 and 9) and then permute each one of them. (2) is telling us that all the legal words must have the character that&#8217;s in the center of the grid. That&#8217;s an optimization right there. We don&#8217;t have to permute a combination which doesn&#8217;t have that letter. The method <em>generateWords</em> contains the code that&#8217;s performing these two tasks.</p>
<p>For (3) and (4), we need to validate and display all the generated English words. *nix operating systems (i.e. Unix-like operating systems) come with a standard English dictionary located at <strong>/usr/share/dict</strong>. Both Ubuntu 10.14 and OS X 10.5 have it. If you&#8217;re running Ubuntu, you&#8217;ll have to modify the enumeration <em>FILES</em> in the code so that it has the correct file names. If you&#8217;re on OS X 10.5, you have nothing to worry about. As soon as we get a set with all the generated words, checking if a word belongs to the dictionary is trivial. This is exactly what the method <em>check </em>does:</p>
<p><!-- HTML generated using hilite.me --></p>
<div style="overflow: auto; width: auto; color: black; background: none repeat scroll 0% 0% white; padding: 0.2em 0.6em;">
<table>
<tbody>
<tr>
<td>
<pre style="margin: 0; line-height: 125%;">1
2
3
4
5
6
7</pre>
</td>
<td>
<pre style="margin: 0; line-height: 125%;">    <span style="color: #0000aa;">private</span> <span style="color: #0000aa;">static</span> <span style="color: #00aaaa;">void</span> <span style="color: #00aa00;">check</span>(Set&lt;String&gt; words, Set&lt;String&gt; dict) {
        <span style="color: #0000aa;">for</span> (String word : words) {
            <span style="color: #0000aa;">if</span> (dict.<span style="color: #1e90ff;">contains</span>(word)) {
                System.<span style="color: #1e90ff;">out</span>.<span style="color: #1e90ff;">println</span>(word);
            }
        }
    }
</pre>
</td>
</tr>
</tbody>
</table>
</div>
<p>Here&#8217;s how the solver behaved for some cubes I threw at it:</p>
<table border="1" cellspacing="0" cellpadding="0">
<tbody>
<tr style="text-align: center;">
<td style="text-align: center;" width="111" valign="top"><strong>Word Cube</strong></td>
<td width="156" valign="top"><strong>Execution Time (seconds)</strong></td>
</tr>
<tr style="text-align: center;">
<td style="text-align: center;" width="111" valign="top">iereprtem</td>
<td width="156" valign="top">1.516556</td>
</tr>
<tr style="text-align: center;">
<td style="text-align: center;" width="111" valign="top">iymardida</td>
<td width="156" valign="top">1.625368</td>
</tr>
<tr>
<td style="text-align: center;" width="111" valign="top">rirsgnaaa</td>
<td style="text-align: center;" width="156" valign="top">1.549554</td>
</tr>
<tr>
<td style="text-align: center;" width="111" valign="top">soasrcsbr</td>
<td style="text-align: center;" width="156" valign="top">1.657542</td>
</tr>
<tr>
<td style="text-align: center;" width="111" valign="top">odcaaldec</td>
<td style="text-align: center;" width="156" valign="top">1.749831</td>
</tr>
</tbody>
</table>
<p>Remember that performance may vary depending on your computer&#8217;s processing power and workload during execution. Considering that Webster&#8217;s Second International Dictionary (the default English dictionary bundled with OS X 10.5) contains <strong>234,936 words</strong>, less than two seconds per cube is nothing to be ashamed of.</p>
<h2>Run it!</h2>
<p>If you&#8217;re interested in giving the solver a try, make sure you download the code and run it like this from the command line:</p>
<p style="text-align: center;"><code>java progpraxis.WordCubeSolver ncbcioune /usr/share/dict</code></p>
<p><strong>TECHNICAL NOTE:</strong> JRE 1.6 comes with a predefined memory allocation of 64 MB of RAM. This basically means your Java application has 64 MB of RAM available to do its thing and no more. If you exceed this limit knowingly or otherwise, you&#8217;ll get a big, intimidating exception (<strong>OutOfMemoryError</strong>). I completely disregarded the space complexity of my implementation (English translation: I didn&#8217;t pay attention to memory usage). Consequently, it&#8217;s very likely you&#8217;ll have to tweak your VM to allow for the successful execution of the code. If you run into any memory hurdles, just run the solver like this:</p>
<p style="text-align: center;"><code>java -Xmx128M progpraxis.WordCubeSolver ncbcioune /usr/share/dict<br />
</code></p>
<p>Notice how we&#8217;re now telling the VM that it should allocate 128 MB of RAM instead of the default value. That should give the solver more than enough memory to complete its job.</p>
<p><strong>TECHNICAL NOTE 2:</strong> Yes, this is a brute-force algorithm in all its glorious splendor. Aren&#8217;t those the best? If you come up with a faster, more efficient solution, please, don&#8217;t keep it to yourself. Spread the love! <img src='http://www.elvismontero.com/wp-includes/images/smilies/icon_smile.gif' alt=':)' class='wp-smiley' /> </p>
]]></content:encoded>
			<wfw:commentRss>http://www.elvismontero.com/2010/07/26/fun-with-word-cubes/feed/</wfw:commentRss>
		<slash:comments>0</slash:comments>
		</item>
		<item>
		<title>You just got Vim&#8217;ed!</title>
		<link>http://www.elvismontero.com/2010/06/27/you-just-got-vimed/</link>
		<comments>http://www.elvismontero.com/2010/06/27/you-just-got-vimed/#comments</comments>
		<pubDate>Sun, 27 Jun 2010 18:20:11 +0000</pubDate>
		<dc:creator>emontero</dc:creator>
				<category><![CDATA[Code]]></category>
		<category><![CDATA[Greasemonkey Hacks]]></category>

		<guid isPermaLink="false">http://www.elvismontero.com/?p=607</guid>
		<description><![CDATA[An additional pet peeve of mine resulted in yet another simple hack. I&#8217;ve found myself using my mouse too much while reading lengthy articles online. This fact became acutely evident when I was going through Google&#8217;s Javascript Pacman implementation. Pressing the space bar in Firefox scrolls down, so that&#8217;s great (I don&#8217;t need to move [...]]]></description>
			<content:encoded><![CDATA[<p>An additional pet peeve of mine resulted in yet another simple hack. I&#8217;ve found myself using my mouse too much while reading lengthy articles online. This fact became acutely evident when I was going through <a href="http://pastebin.com/enyeHeKg" target="_blank">Google&#8217;s Javascript Pacman implementation</a>. Pressing the space bar in Firefox scrolls down, so that&#8217;s great (I don&#8217;t need to move my hands off of a typing position). But what if I wanted to scroll up with my keyboard too? Wouldn&#8217;t it be cool if I could start moving around a page as soon as I land on it using my keyboard and some good old <a href="http://www.vim.org/" target="_blank">Vim</a>-like key presses? Yes, it&#8217;d be pretty awesome.</p>
<p>Vim has the following default keyboard mappings for moving around a document:</p>
<p style="text-align: center;"><img class="aligncenter" src="/stuff/vim-moving.png" alt="vim keyboard mappings" width="262" height="183" /></p>
<p>So if you want to scroll up, you press <em><strong>k</strong></em>. If you want to scroll down, you must press <em><strong>j</strong></em>. The Javascript code that gives Firefox the ability to scroll up and down using these key mappings is this:</p>
<p><span style="color: #0000aa;">function</span> captureKeyPress(event){</p>
<div style="overflow: auto; width: auto; color: black; background: none repeat scroll 0% 0% white; padding: 0.2em 0.6em;">
<pre style="margin: 0; line-height: 125%;">    <span style="color: #0000aa;">if</span>(!event)
        event = <span style="color: #00aaaa;">window</span>.event;
    <span style="color: #0000aa;">var</span> unicode = event.charCode ? event.charCode : event.keyCode;
    <span style="color: #0000aa;">var</span> actualkey = <span style="color: #00aaaa;">String</span>.fromCharCode(unicode);

    <span style="color: #0000aa;">if</span> (actualkey == <span style="color: #aa5500;">"j"</span>)
        <span style="color: #00aaaa;">window</span>.scrollByLines(<span style="color: #009999;">20</span>);
    <span style="color: #0000aa;">else</span> <span style="color: #0000aa;">if</span> (actualkey == <span style="color: #aa5500;">"k"</span>)
        <span style="color: #00aaaa;">window</span>.scrollByLines(-<span style="color: #009999;">20</span>);
}
<span style="color: #00aaaa;">window</span>.addEventListener(<span style="color: #aa5500;">"keypress"</span>, captureKeyPress, <span style="color: #0000aa;">true</span>);
</pre>
</div>
<p>Now you just need to get <a href="http://www.greasespot.net/" target="_blank">Greasemonkey</a>, <a href="http://elvismontero.com/greasemonkeyhacks/Vimenizer.user.js" target="_blank">install the script</a>, and you&#8217;ll be all set!</p>
<p><em>Vim&#8217;s key mappings image found at <a href="http://www.swaroopch.com/" target="_blank">swaroopch.com</a>.</em></p>
]]></content:encoded>
			<wfw:commentRss>http://www.elvismontero.com/2010/06/27/you-just-got-vimed/feed/</wfw:commentRss>
		<slash:comments>2</slash:comments>
		</item>
		<item>
		<title>Focus. Focus. Focus!</title>
		<link>http://www.elvismontero.com/2010/04/13/focus-focus-focus/</link>
		<comments>http://www.elvismontero.com/2010/04/13/focus-focus-focus/#comments</comments>
		<pubDate>Wed, 14 Apr 2010 03:02:56 +0000</pubDate>
		<dc:creator>emontero</dc:creator>
				<category><![CDATA[Code]]></category>
		<category><![CDATA[Greasemonkey Hacks]]></category>

		<guid isPermaLink="false">http://www.elvismontero.com/?p=573</guid>
		<description><![CDATA[This may be a huge pet peeve of mine, but I couldn&#8217;t possibly be alone. Don&#8217;t you hate when you land on a web page that asks for your username and password (or any other required information) and you realize you have to click on the first text box in order to start typing? Wouldn&#8217;t [...]]]></description>
			<content:encoded><![CDATA[<p>This may be a huge pet peeve of mine, but I couldn&#8217;t possibly be alone. Don&#8217;t you hate when you land on a web page that asks for your username and password (or any other required information) and you realize you have to <em>c</em><em>lick</em> on the first text box in order to start typing? Wouldn&#8217;t the world be a better place if you just could start typing <em>immediately</em> upon landing on such an egregious web page? I decided today I no longer need to put up with these shoddy web design practices. Enter <a href="https://addons.mozilla.org/en-US/firefox/addon/748" target="_blank">Greasemonkey</a>.</p>
<p style="text-align: center;"><img class="aligncenter" title="gmlogo" src="/stuff/gmlogo.gif" alt="gmlogo" width="342" height="300" /></p>
<p>This amazing add-on for web browser <a href="http://www.mozilla.com/en-US/firefox/personal.html" target="_blank">Firefox</a> allows you to execute Javascript snippets that can customize the look and feel of any site. I quickly cooked up a script that now sets the focus to the first text box on any web page. This is the <em>ridiculously</em> simple code that does the trick:</p>
<pre style="color: #000020; background: #f6f8ff;"><span style="color: #200080; font-weight: bold;">var</span> inputs <span style="color: #308080;">=</span> document<span style="color: #308080;">.</span>getElementsByTagName<span style="color: #308080;">(</span><span style="color: #1060b6;">'input'</span><span style="color: #308080;">)</span><span style="color: #406080;">;</span>
<span style="color: #200080; font-weight: bold;">for</span><span style="color: #308080;">(</span>i <span style="color: #308080;">=</span> <span style="color: #008c00;">0</span><span style="color: #406080;">;</span> i <span style="color: #308080;">&lt;</span> inputs<span style="color: #308080;">.</span>length<span style="color: #406080;">;</span> i<span style="color: #308080;">++</span><span style="color: #308080;">)</span><span style="color: #406080;">{</span>
        <span style="color: #200080; font-weight: bold;">if</span><span style="color: #308080;">(</span>inputs<span style="color: #308080;">[</span>i<span style="color: #308080;">]</span><span style="color: #308080;">.</span>type <span style="color: #308080;">===</span> <span style="color: #1060b6;">"text"</span><span style="color: #308080;">)</span><span style="color: #406080;">{</span>
                inputs<span style="color: #308080;">[</span>i<span style="color: #308080;">]</span><span style="color: #308080;">.</span>focus<span style="color: #308080;">(</span><span style="color: #308080;">)</span><span style="color: #406080;">;</span>
                <span style="color: #200080; font-weight: bold;">break</span><span style="color: #406080;">;</span>
        <span style="color: #406080;">}</span>
<span style="color: #406080;">}</span></pre>
<p>If you have Firefox and Greasemonkey, <a href="http://www.elvismontero.com/greasemonkeyhacks/Focuser.user.js">click on this link to install <em>Focuser</em></a> (you&#8217;ll see the code if you&#8217;re using a different browser). If you&#8217;d like Focuser to only do its job on certain web sites, you can easily modify the pages that are affected using Greasemonkey&#8217;s scripts manager.</p>
<p>Simple hacks like this make my day every time.</p>
<p><em>Greasemonkey art found at <a href="http://www.falsepositives.com/" target="_blank">falsepositives.com</a>.<br />
</em></p>
]]></content:encoded>
			<wfw:commentRss>http://www.elvismontero.com/2010/04/13/focus-focus-focus/feed/</wfw:commentRss>
		<slash:comments>0</slash:comments>
		</item>
		<item>
		<title>Problem solvers</title>
		<link>http://www.elvismontero.com/2009/03/16/problem-solvers/</link>
		<comments>http://www.elvismontero.com/2009/03/16/problem-solvers/#comments</comments>
		<pubDate>Mon, 16 Mar 2009 12:00:58 +0000</pubDate>
		<dc:creator>emontero</dc:creator>
				<category><![CDATA[Code]]></category>
		<category><![CDATA[Life]]></category>

		<guid isPermaLink="false">http://www.elvismontero.com/?p=138</guid>
		<description><![CDATA[The question &#8220;What is it that you do again?&#8221; is something I&#8217;ve heard repeatedly ever since I started doing what I do for a living almost 7 years ago. People&#8217;s face expressions usually range from the comic to the downright scary when I explain, as clearly as I possibly can, what my role within an [...]]]></description>
			<content:encoded><![CDATA[<p>The question <em>&#8220;What is it that you do again?&#8221;</em> is something I&#8217;ve heard repeatedly ever since I started doing what I do for a living almost 7 years ago. People&#8217;s face expressions usually range from the comic to the downright scary when I explain, as clearly as I possibly can, what my role within an organization is. <em>&#8220;Uh, don&#8217;t you get tired of sitting in front of a computer all day?&#8221;</em> usually follows quickly, after I&#8217;ve finished explaining that I&#8217;m a <strong>programmer</strong> and I, thankfully, code in order to survive. I was pretty much content with the definition I was giving. My explanation always revolved around <strong>creating software</strong>, <strong>making people&#8217;s lives better</strong> and, simply, <strong>rocking the world every day</strong>.</p>
<p>Everything was just peachy until Thursday night. That is, until I read <a href="http://thecodist.com/article/what_do_you_tell_people_you_are_and_what_you_do" target="_blank">this guy&#8217;s blog post</a>:</p>
<blockquote><p>When I tell people I am a computer programmer (or one of the other terms just to be different) most of them really don&#8217;t know what that means. They vaguely understand I &#8220;make software&#8221; (i.e. I&#8217;m a software maker, another term!) but have no clue what software looks like. So how to explain how you go about doing your job?</p>
<p>Writing software seems like a good start. After all we type a lot of words into a blank document using an editor, hand it to the computer to figure out what we want it to do, and then see what the computer made out of it. Rinse, repeat until done.</p>
<p>Even that watered-down description leaves out a lot of what we do. There is no way to really explain to people the raw details of our daily existence. Ever trying explaining programming languages and why there are so many to someone who knows nothing about programming? Or writing tests, debugging, or memory management? Don&#8217;t even try unless you like glazed over eyes. Trying to point out the importance of requirements and specifications to customers is often impossible, much less to people who don&#8217;t care.</p></blockquote>
<p>I, not wanting to take the topic seriously at the moment, left this farcical comment:</p>
<blockquote><p>I think we should really say: &#8220;Mystical Workers&#8221;. After all, what are we if not the product of using our highly dysfunctional brains to produce unintelligible pages of weird characters for computers to understand? THAT is mystical to the tenth power!  =)</p></blockquote>
<p>I read a few other comments and that&#8217;s when I realized that <strong>we all have different views on what we are and what we do</strong>. Defining the professional self is always a good introspective exercise (for us at least &#8212; I don&#8217;t think doctors or lawyers would have to do this). After some thought, now I wouldn&#8217;t call myself a programmer, a software engineer, a hacker, a developer or any other of those vapid terms. If you ask me, I think we&#8217;re nothing but <strong>problem solvers</strong>. Computers just so happen to be the tools we use to do the actual <em>solving</em>. If we had been born in the <a href="http://en.wikipedia.org/wiki/Pleistocene" target="_blank">Pleistocene</a>, we would have been <strong>the same problem-solving guys</strong>. Well, in all honesty, we <em>probably</em> would have been using a different set of tools (mostly rocks I&#8217;d imagine) since I don&#8217;t think computers were around 400,000 years ago.</p>
<p style="text-align: center;"><img class="aligncenter" title="problem_solver" src="/stuff/problem_solver_by_eyes-wide-open.jpg" alt="" width="325" height="500" /></p>
<p style="text-align: center;">Sometimes we have a <em>little bit</em> of a hard time solving the problem at hand. Coding can be a <em>tad</em> frustrating. And we love it!</p>
<p style="text-align: center;">Source: <a href="http://www.flickr.com/photos/eyes-wide-open/" target="_blank">eyes-wide-open</a></p>
<p><a href="http://pgolub.wordpress.com/2009/03/14/a-developers-work-dream/" target="_blank">Maybe we&#8217;re just a bunch of dreamers</a>. To my fellow IT workers out there, how do you see yourselves as? Magicians? Programmers? Hackers? Engineers? Maybe we should add another option: <strong>none of the above</strong>.</p>
]]></content:encoded>
			<wfw:commentRss>http://www.elvismontero.com/2009/03/16/problem-solvers/feed/</wfw:commentRss>
		<slash:comments>0</slash:comments>
		</item>
	</channel>
</rss>

