<?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>MATTly</title>
	<atom:link href="http://mattly.me/taxonomy/term/43/0/feed/" rel="self" type="application/rss+xml" />
	<link>http://mattly.me</link>
	<description>vapid ramblings of a Texas geek</description>
	<lastBuildDate>Sun, 29 Jan 2012 04:19:11 +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>JavaScript: Base64 Encoder/Decoder</title>
		<link>http://mattly.me/snippet/2012/01/28/javascript-base64-encoderdecoder/?utm_source=rss&#038;utm_medium=rss&#038;utm_campaign=javascript-base64-encoderdecoder</link>
		<comments>http://mattly.me/snippet/2012/01/28/javascript-base64-encoderdecoder/#comments</comments>
		<pubDate>Sun, 29 Jan 2012 01:48:29 +0000</pubDate>
		<dc:creator>Matthew Clark</dc:creator>
				<category><![CDATA[Snippets]]></category>
		<category><![CDATA[JavaScript]]></category>

		<guid isPermaLink="false">http://mattly.me/?p=2051</guid>
		<description><![CDATA[I recently had a need (or, probably more appropriately, a desire), to obfuscate some data which would be passed to a server in a URL. Of course, it&#8217;s impossible to encrypt anything using JavaScript since it executes client-side, but you can certainly obfuscate data enough to ward off most tinkering attempts. I decided base64 would [...]]]></description>
			<content:encoded><![CDATA[<p>I recently had a need (or, probably more appropriately, a desire), to obfuscate some data which would be passed to a server in a URL.  Of course, it&#8217;s impossible to encrypt anything using JavaScript since it executes client-side, but you can certainly obfuscate data enough to ward off most tinkering attempts.</p>
<p>I decided base64 would be the way to go because it generated a relatively clean representation of the data I wanted to pass.  Plus, since I&#8217;m using PHP server-side, it would be simple to decode using the <code class="codecolorer php dawn"><span class="php"><a href="http://www.php.net/base64_decode"><span style="color: #990000;">base64_decode</span></a><span style="color: #009900;">&#40;</span><span style="color: #009900;">&#41;</span></span></code> native function.<br />
<span id="more-2051"></span><br />
Simply use <code class="codecolorer javascript dawn"><span class="javascript">Base64.<span style="color: #660066;">encode</span><span style="color: #009900;">&#40;</span><span style="color: #009900;">&#41;</span></span></code> to encode a string.  Also included is <code class="codecolorer javascript dawn"><span class="javascript">Base64.<span style="color: #660066;">decode</span><span style="color: #009900;">&#40;</span><span style="color: #009900;">&#41;</span></span></code> if you need to decode.</p>
<div class="codecolorer-container javascript railscasts" style="overflow:auto;white-space:nowrap;border:1px solid #9F9F9F;width:435px;height:300px;"><table cellspacing="0" cellpadding="0"><tbody><tr><td style="padding:5px;text-align:center;color:#888888;background-color:#EEEEEE;border-right: 1px solid #9F9F9F;font: normal 12px/1.4em Monaco, Lucida Console, monospace;"><div>1<br />2<br />3<br />4<br />5<br />6<br />7<br />8<br />9<br />10<br />11<br />12<br />13<br />14<br />15<br />16<br />17<br />18<br />19<br />20<br />21<br />22<br />23<br />24<br />25<br />26<br />27<br />28<br />29<br />30<br />31<br />32<br />33<br />34<br />35<br />36<br />37<br />38<br />39<br />40<br />41<br />42<br />43<br />44<br />45<br />46<br />47<br />48<br />49<br />50<br />51<br />52<br />53<br />54<br />55<br />56<br />57<br />58<br />59<br />60<br />61<br />62<br />63<br />64<br />65<br />66<br />67<br />68<br />69<br />70<br />71<br />72<br />73<br />74<br />75<br />76<br />77<br />78<br />79<br />80<br />81<br />82<br />83<br />84<br />85<br />86<br />87<br />88<br />89<br />90<br />91<br />92<br />93<br />94<br />95<br />96<br />97<br />98<br />99<br />100<br />101<br />102<br />103<br />104<br />105<br />106<br />107<br />108<br />109<br />110<br />111<br />112<br />113<br />114<br />115<br />116<br />117<br />118<br />119<br />120<br />121<br />122<br />123<br />124<br />125<br />126<br />127<br />128<br />129<br />130<br />131<br />132<br />133<br />134<br />135<br /></div></td><td><div class="javascript codecolorer" style="padding:5px;font:normal 12px/1.4em Monaco, Lucida Console, monospace;white-space:nowrap"><span style="color: #003366; font-weight: bold;">var</span> Base64 <span style="color: #339933;">=</span> <span style="color: #009900;">&#123;</span><br />
<br />
<span style="color: #006600; font-style: italic;">// private property</span><br />
_keyStr <span style="color: #339933;">:</span> <span style="color: #3366CC;">&quot;ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789+/=&quot;</span><span style="color: #339933;">,</span><br />
<br />
<span style="color: #006600; font-style: italic;">// public method for encoding</span><br />
encode <span style="color: #339933;">:</span> <span style="color: #003366; font-weight: bold;">function</span> <span style="color: #009900;">&#40;</span>input<span style="color: #009900;">&#41;</span> <span style="color: #009900;">&#123;</span><br />
&nbsp; &nbsp; <span style="color: #003366; font-weight: bold;">var</span> output <span style="color: #339933;">=</span> <span style="color: #3366CC;">&quot;&quot;</span><span style="color: #339933;">;</span><br />
&nbsp; &nbsp; <span style="color: #003366; font-weight: bold;">var</span> chr1<span style="color: #339933;">,</span> chr2<span style="color: #339933;">,</span> chr3<span style="color: #339933;">,</span> enc1<span style="color: #339933;">,</span> enc2<span style="color: #339933;">,</span> enc3<span style="color: #339933;">,</span> enc4<span style="color: #339933;">;</span><br />
&nbsp; &nbsp; <span style="color: #003366; font-weight: bold;">var</span> i <span style="color: #339933;">=</span> <span style="color: #CC0000;">0</span><span style="color: #339933;">;</span><br />
<br />
&nbsp; &nbsp; input <span style="color: #339933;">=</span> Base64._utf8_encode<span style="color: #009900;">&#40;</span>input<span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span><br />
<br />
&nbsp; &nbsp; <span style="color: #000066; font-weight: bold;">while</span> <span style="color: #009900;">&#40;</span>i <span style="color: #339933;">&lt;</span> input.<span style="color: #660066;">length</span><span style="color: #009900;">&#41;</span> <span style="color: #009900;">&#123;</span><br />
<br />
&nbsp; &nbsp; &nbsp; &nbsp; chr1 <span style="color: #339933;">=</span> input.<span style="color: #660066;">charCodeAt</span><span style="color: #009900;">&#40;</span>i<span style="color: #339933;">++</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span><br />
&nbsp; &nbsp; &nbsp; &nbsp; chr2 <span style="color: #339933;">=</span> input.<span style="color: #660066;">charCodeAt</span><span style="color: #009900;">&#40;</span>i<span style="color: #339933;">++</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span><br />
&nbsp; &nbsp; &nbsp; &nbsp; chr3 <span style="color: #339933;">=</span> input.<span style="color: #660066;">charCodeAt</span><span style="color: #009900;">&#40;</span>i<span style="color: #339933;">++</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span><br />
<br />
&nbsp; &nbsp; &nbsp; &nbsp; enc1 <span style="color: #339933;">=</span> chr1 <span style="color: #339933;">&gt;&gt;</span> <span style="color: #CC0000;">2</span><span style="color: #339933;">;</span><br />
&nbsp; &nbsp; &nbsp; &nbsp; enc2 <span style="color: #339933;">=</span> <span style="color: #009900;">&#40;</span><span style="color: #009900;">&#40;</span>chr1 <span style="color: #339933;">&amp;</span> <span style="color: #CC0000;">3</span><span style="color: #009900;">&#41;</span> <span style="color: #339933;">&lt;&lt;</span> <span style="color: #CC0000;">4</span><span style="color: #009900;">&#41;</span> <span style="color: #339933;">|</span> <span style="color: #009900;">&#40;</span>chr2 <span style="color: #339933;">&gt;&gt;</span> <span style="color: #CC0000;">4</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span><br />
&nbsp; &nbsp; &nbsp; &nbsp; enc3 <span style="color: #339933;">=</span> <span style="color: #009900;">&#40;</span><span style="color: #009900;">&#40;</span>chr2 <span style="color: #339933;">&amp;</span> <span style="color: #CC0000;">15</span><span style="color: #009900;">&#41;</span> <span style="color: #339933;">&lt;&lt;</span> <span style="color: #CC0000;">2</span><span style="color: #009900;">&#41;</span> <span style="color: #339933;">|</span> <span style="color: #009900;">&#40;</span>chr3 <span style="color: #339933;">&gt;&gt;</span> <span style="color: #CC0000;">6</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span><br />
&nbsp; &nbsp; &nbsp; &nbsp; enc4 <span style="color: #339933;">=</span> chr3 <span style="color: #339933;">&amp;</span> <span style="color: #CC0000;">63</span><span style="color: #339933;">;</span><br />
<br />
&nbsp; &nbsp; &nbsp; &nbsp; <span style="color: #000066; font-weight: bold;">if</span> <span style="color: #009900;">&#40;</span>isNaN<span style="color: #009900;">&#40;</span>chr2<span style="color: #009900;">&#41;</span><span style="color: #009900;">&#41;</span> <span style="color: #009900;">&#123;</span><br />
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; enc3 <span style="color: #339933;">=</span> enc4 <span style="color: #339933;">=</span> <span style="color: #CC0000;">64</span><span style="color: #339933;">;</span><br />
&nbsp; &nbsp; &nbsp; &nbsp; <span style="color: #009900;">&#125;</span> <span style="color: #000066; font-weight: bold;">else</span> <span style="color: #000066; font-weight: bold;">if</span> <span style="color: #009900;">&#40;</span>isNaN<span style="color: #009900;">&#40;</span>chr3<span style="color: #009900;">&#41;</span><span style="color: #009900;">&#41;</span> <span style="color: #009900;">&#123;</span><br />
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; enc4 <span style="color: #339933;">=</span> <span style="color: #CC0000;">64</span><span style="color: #339933;">;</span><br />
&nbsp; &nbsp; &nbsp; &nbsp; <span style="color: #009900;">&#125;</span><br />
<br />
&nbsp; &nbsp; &nbsp; &nbsp; output <span style="color: #339933;">=</span> output <span style="color: #339933;">+</span><br />
&nbsp; &nbsp; &nbsp; &nbsp; <span style="color: #000066; font-weight: bold;">this</span>._keyStr.<span style="color: #660066;">charAt</span><span style="color: #009900;">&#40;</span>enc1<span style="color: #009900;">&#41;</span> <span style="color: #339933;">+</span> <span style="color: #000066; font-weight: bold;">this</span>._keyStr.<span style="color: #660066;">charAt</span><span style="color: #009900;">&#40;</span>enc2<span style="color: #009900;">&#41;</span> <span style="color: #339933;">+</span><br />
&nbsp; &nbsp; &nbsp; &nbsp; <span style="color: #000066; font-weight: bold;">this</span>._keyStr.<span style="color: #660066;">charAt</span><span style="color: #009900;">&#40;</span>enc3<span style="color: #009900;">&#41;</span> <span style="color: #339933;">+</span> <span style="color: #000066; font-weight: bold;">this</span>._keyStr.<span style="color: #660066;">charAt</span><span style="color: #009900;">&#40;</span>enc4<span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span><br />
<br />
&nbsp; &nbsp; <span style="color: #009900;">&#125;</span><br />
<br />
&nbsp; &nbsp; <span style="color: #000066; font-weight: bold;">return</span> output<span style="color: #339933;">;</span><br />
<span style="color: #009900;">&#125;</span><span style="color: #339933;">,</span><br />
<br />
<span style="color: #006600; font-style: italic;">// public method for decoding</span><br />
decode <span style="color: #339933;">:</span> <span style="color: #003366; font-weight: bold;">function</span> <span style="color: #009900;">&#40;</span>input<span style="color: #009900;">&#41;</span> <span style="color: #009900;">&#123;</span><br />
&nbsp; &nbsp; <span style="color: #003366; font-weight: bold;">var</span> output <span style="color: #339933;">=</span> <span style="color: #3366CC;">&quot;&quot;</span><span style="color: #339933;">;</span><br />
&nbsp; &nbsp; <span style="color: #003366; font-weight: bold;">var</span> chr1<span style="color: #339933;">,</span> chr2<span style="color: #339933;">,</span> chr3<span style="color: #339933;">;</span><br />
&nbsp; &nbsp; <span style="color: #003366; font-weight: bold;">var</span> enc1<span style="color: #339933;">,</span> enc2<span style="color: #339933;">,</span> enc3<span style="color: #339933;">,</span> enc4<span style="color: #339933;">;</span><br />
&nbsp; &nbsp; <span style="color: #003366; font-weight: bold;">var</span> i <span style="color: #339933;">=</span> <span style="color: #CC0000;">0</span><span style="color: #339933;">;</span><br />
<br />
&nbsp; &nbsp; input <span style="color: #339933;">=</span> input.<span style="color: #660066;">replace</span><span style="color: #009900;">&#40;</span><span style="color: #009966; font-style: italic;">/[^A-Za-z0-9\+\/\=]/g</span><span style="color: #339933;">,</span> <span style="color: #3366CC;">&quot;&quot;</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span><br />
<br />
&nbsp; &nbsp; <span style="color: #000066; font-weight: bold;">while</span> <span style="color: #009900;">&#40;</span>i <span style="color: #339933;">&lt;</span> input.<span style="color: #660066;">length</span><span style="color: #009900;">&#41;</span> <span style="color: #009900;">&#123;</span><br />
<br />
&nbsp; &nbsp; &nbsp; &nbsp; enc1 <span style="color: #339933;">=</span> <span style="color: #000066; font-weight: bold;">this</span>._keyStr.<span style="color: #660066;">indexOf</span><span style="color: #009900;">&#40;</span>input.<span style="color: #660066;">charAt</span><span style="color: #009900;">&#40;</span>i<span style="color: #339933;">++</span><span style="color: #009900;">&#41;</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span><br />
&nbsp; &nbsp; &nbsp; &nbsp; enc2 <span style="color: #339933;">=</span> <span style="color: #000066; font-weight: bold;">this</span>._keyStr.<span style="color: #660066;">indexOf</span><span style="color: #009900;">&#40;</span>input.<span style="color: #660066;">charAt</span><span style="color: #009900;">&#40;</span>i<span style="color: #339933;">++</span><span style="color: #009900;">&#41;</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span><br />
&nbsp; &nbsp; &nbsp; &nbsp; enc3 <span style="color: #339933;">=</span> <span style="color: #000066; font-weight: bold;">this</span>._keyStr.<span style="color: #660066;">indexOf</span><span style="color: #009900;">&#40;</span>input.<span style="color: #660066;">charAt</span><span style="color: #009900;">&#40;</span>i<span style="color: #339933;">++</span><span style="color: #009900;">&#41;</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span><br />
&nbsp; &nbsp; &nbsp; &nbsp; enc4 <span style="color: #339933;">=</span> <span style="color: #000066; font-weight: bold;">this</span>._keyStr.<span style="color: #660066;">indexOf</span><span style="color: #009900;">&#40;</span>input.<span style="color: #660066;">charAt</span><span style="color: #009900;">&#40;</span>i<span style="color: #339933;">++</span><span style="color: #009900;">&#41;</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span><br />
<br />
&nbsp; &nbsp; &nbsp; &nbsp; chr1 <span style="color: #339933;">=</span> <span style="color: #009900;">&#40;</span>enc1 <span style="color: #339933;">&lt;&lt;</span> <span style="color: #CC0000;">2</span><span style="color: #009900;">&#41;</span> <span style="color: #339933;">|</span> <span style="color: #009900;">&#40;</span>enc2 <span style="color: #339933;">&gt;&gt;</span> <span style="color: #CC0000;">4</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span><br />
&nbsp; &nbsp; &nbsp; &nbsp; chr2 <span style="color: #339933;">=</span> <span style="color: #009900;">&#40;</span><span style="color: #009900;">&#40;</span>enc2 <span style="color: #339933;">&amp;</span> <span style="color: #CC0000;">15</span><span style="color: #009900;">&#41;</span> <span style="color: #339933;">&lt;&lt;</span> <span style="color: #CC0000;">4</span><span style="color: #009900;">&#41;</span> <span style="color: #339933;">|</span> <span style="color: #009900;">&#40;</span>enc3 <span style="color: #339933;">&gt;&gt;</span> <span style="color: #CC0000;">2</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span><br />
&nbsp; &nbsp; &nbsp; &nbsp; chr3 <span style="color: #339933;">=</span> <span style="color: #009900;">&#40;</span><span style="color: #009900;">&#40;</span>enc3 <span style="color: #339933;">&amp;</span> <span style="color: #CC0000;">3</span><span style="color: #009900;">&#41;</span> <span style="color: #339933;">&lt;&lt;</span> <span style="color: #CC0000;">6</span><span style="color: #009900;">&#41;</span> <span style="color: #339933;">|</span> enc4<span style="color: #339933;">;</span><br />
<br />
&nbsp; &nbsp; &nbsp; &nbsp; output <span style="color: #339933;">=</span> output <span style="color: #339933;">+</span> String.<span style="color: #660066;">fromCharCode</span><span style="color: #009900;">&#40;</span>chr1<span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span><br />
<br />
&nbsp; &nbsp; &nbsp; &nbsp; <span style="color: #000066; font-weight: bold;">if</span> <span style="color: #009900;">&#40;</span>enc3 <span style="color: #339933;">!=</span> <span style="color: #CC0000;">64</span><span style="color: #009900;">&#41;</span> <span style="color: #009900;">&#123;</span><br />
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; output <span style="color: #339933;">=</span> output <span style="color: #339933;">+</span> String.<span style="color: #660066;">fromCharCode</span><span style="color: #009900;">&#40;</span>chr2<span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span><br />
&nbsp; &nbsp; &nbsp; &nbsp; <span style="color: #009900;">&#125;</span><br />
&nbsp; &nbsp; &nbsp; &nbsp; <span style="color: #000066; font-weight: bold;">if</span> <span style="color: #009900;">&#40;</span>enc4 <span style="color: #339933;">!=</span> <span style="color: #CC0000;">64</span><span style="color: #009900;">&#41;</span> <span style="color: #009900;">&#123;</span><br />
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; output <span style="color: #339933;">=</span> output <span style="color: #339933;">+</span> String.<span style="color: #660066;">fromCharCode</span><span style="color: #009900;">&#40;</span>chr3<span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span><br />
&nbsp; &nbsp; &nbsp; &nbsp; <span style="color: #009900;">&#125;</span><br />
<br />
&nbsp; &nbsp; <span style="color: #009900;">&#125;</span><br />
<br />
&nbsp; &nbsp; output <span style="color: #339933;">=</span> Base64._utf8_decode<span style="color: #009900;">&#40;</span>output<span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span><br />
<br />
&nbsp; &nbsp; <span style="color: #000066; font-weight: bold;">return</span> output<span style="color: #339933;">;</span><br />
<br />
<span style="color: #009900;">&#125;</span><span style="color: #339933;">,</span><br />
<br />
<span style="color: #006600; font-style: italic;">// private method for UTF-8 encoding</span><br />
_utf8_encode <span style="color: #339933;">:</span> <span style="color: #003366; font-weight: bold;">function</span> <span style="color: #009900;">&#40;</span>string<span style="color: #009900;">&#41;</span> <span style="color: #009900;">&#123;</span><br />
&nbsp; &nbsp; string <span style="color: #339933;">=</span> string.<span style="color: #660066;">replace</span><span style="color: #009900;">&#40;</span><span style="color: #009966; font-style: italic;">/\r\n/g</span><span style="color: #339933;">,</span><span style="color: #3366CC;">&quot;<span style="color: #000099; font-weight: bold;">\n</span>&quot;</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span><br />
&nbsp; &nbsp; <span style="color: #003366; font-weight: bold;">var</span> utftext <span style="color: #339933;">=</span> <span style="color: #3366CC;">&quot;&quot;</span><span style="color: #339933;">;</span><br />
<br />
&nbsp; &nbsp; <span style="color: #000066; font-weight: bold;">for</span> <span style="color: #009900;">&#40;</span><span style="color: #003366; font-weight: bold;">var</span> n <span style="color: #339933;">=</span> <span style="color: #CC0000;">0</span><span style="color: #339933;">;</span> n <span style="color: #339933;">&lt;</span> string.<span style="color: #660066;">length</span><span style="color: #339933;">;</span> n<span style="color: #339933;">++</span><span style="color: #009900;">&#41;</span> <span style="color: #009900;">&#123;</span><br />
<br />
&nbsp; &nbsp; &nbsp; &nbsp; <span style="color: #003366; font-weight: bold;">var</span> c <span style="color: #339933;">=</span> string.<span style="color: #660066;">charCodeAt</span><span style="color: #009900;">&#40;</span>n<span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span><br />
<br />
&nbsp; &nbsp; &nbsp; &nbsp; <span style="color: #000066; font-weight: bold;">if</span> <span style="color: #009900;">&#40;</span>c <span style="color: #339933;">&lt;</span> <span style="color: #CC0000;">128</span><span style="color: #009900;">&#41;</span> <span style="color: #009900;">&#123;</span><br />
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; utftext <span style="color: #339933;">+=</span> String.<span style="color: #660066;">fromCharCode</span><span style="color: #009900;">&#40;</span>c<span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span><br />
&nbsp; &nbsp; &nbsp; &nbsp; <span style="color: #009900;">&#125;</span><br />
&nbsp; &nbsp; &nbsp; &nbsp; <span style="color: #000066; font-weight: bold;">else</span> <span style="color: #000066; font-weight: bold;">if</span><span style="color: #009900;">&#40;</span><span style="color: #009900;">&#40;</span>c <span style="color: #339933;">&gt;</span> <span style="color: #CC0000;">127</span><span style="color: #009900;">&#41;</span> <span style="color: #339933;">&amp;&amp;</span> <span style="color: #009900;">&#40;</span>c <span style="color: #339933;">&lt;</span> <span style="color: #CC0000;">2048</span><span style="color: #009900;">&#41;</span><span style="color: #009900;">&#41;</span> <span style="color: #009900;">&#123;</span><br />
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; utftext <span style="color: #339933;">+=</span> String.<span style="color: #660066;">fromCharCode</span><span style="color: #009900;">&#40;</span><span style="color: #009900;">&#40;</span>c <span style="color: #339933;">&gt;&gt;</span> <span style="color: #CC0000;">6</span><span style="color: #009900;">&#41;</span> <span style="color: #339933;">|</span> <span style="color: #CC0000;">192</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span><br />
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; utftext <span style="color: #339933;">+=</span> String.<span style="color: #660066;">fromCharCode</span><span style="color: #009900;">&#40;</span><span style="color: #009900;">&#40;</span>c <span style="color: #339933;">&amp;</span> <span style="color: #CC0000;">63</span><span style="color: #009900;">&#41;</span> <span style="color: #339933;">|</span> <span style="color: #CC0000;">128</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span><br />
&nbsp; &nbsp; &nbsp; &nbsp; <span style="color: #009900;">&#125;</span><br />
&nbsp; &nbsp; &nbsp; &nbsp; <span style="color: #000066; font-weight: bold;">else</span> <span style="color: #009900;">&#123;</span><br />
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; utftext <span style="color: #339933;">+=</span> String.<span style="color: #660066;">fromCharCode</span><span style="color: #009900;">&#40;</span><span style="color: #009900;">&#40;</span>c <span style="color: #339933;">&gt;&gt;</span> <span style="color: #CC0000;">12</span><span style="color: #009900;">&#41;</span> <span style="color: #339933;">|</span> <span style="color: #CC0000;">224</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span><br />
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; utftext <span style="color: #339933;">+=</span> String.<span style="color: #660066;">fromCharCode</span><span style="color: #009900;">&#40;</span><span style="color: #009900;">&#40;</span><span style="color: #009900;">&#40;</span>c <span style="color: #339933;">&gt;&gt;</span> <span style="color: #CC0000;">6</span><span style="color: #009900;">&#41;</span> <span style="color: #339933;">&amp;</span> <span style="color: #CC0000;">63</span><span style="color: #009900;">&#41;</span> <span style="color: #339933;">|</span> <span style="color: #CC0000;">128</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span><br />
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; utftext <span style="color: #339933;">+=</span> String.<span style="color: #660066;">fromCharCode</span><span style="color: #009900;">&#40;</span><span style="color: #009900;">&#40;</span>c <span style="color: #339933;">&amp;</span> <span style="color: #CC0000;">63</span><span style="color: #009900;">&#41;</span> <span style="color: #339933;">|</span> <span style="color: #CC0000;">128</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span><br />
&nbsp; &nbsp; &nbsp; &nbsp; <span style="color: #009900;">&#125;</span><br />
<br />
&nbsp; &nbsp; <span style="color: #009900;">&#125;</span><br />
<br />
&nbsp; &nbsp; <span style="color: #000066; font-weight: bold;">return</span> utftext<span style="color: #339933;">;</span><br />
<span style="color: #009900;">&#125;</span><span style="color: #339933;">,</span><br />
<br />
<span style="color: #006600; font-style: italic;">// private method for UTF-8 decoding</span><br />
_utf8_decode <span style="color: #339933;">:</span> <span style="color: #003366; font-weight: bold;">function</span> <span style="color: #009900;">&#40;</span>utftext<span style="color: #009900;">&#41;</span> <span style="color: #009900;">&#123;</span><br />
&nbsp; &nbsp; <span style="color: #003366; font-weight: bold;">var</span> string <span style="color: #339933;">=</span> <span style="color: #3366CC;">&quot;&quot;</span><span style="color: #339933;">;</span><br />
&nbsp; &nbsp; <span style="color: #003366; font-weight: bold;">var</span> i <span style="color: #339933;">=</span> <span style="color: #CC0000;">0</span><span style="color: #339933;">;</span><br />
&nbsp; &nbsp; <span style="color: #003366; font-weight: bold;">var</span> c <span style="color: #339933;">=</span> c1 <span style="color: #339933;">=</span> c2 <span style="color: #339933;">=</span> <span style="color: #CC0000;">0</span><span style="color: #339933;">;</span><br />
<br />
&nbsp; &nbsp; <span style="color: #000066; font-weight: bold;">while</span> <span style="color: #009900;">&#40;</span> i <span style="color: #339933;">&lt;</span> utftext.<span style="color: #660066;">length</span> <span style="color: #009900;">&#41;</span> <span style="color: #009900;">&#123;</span><br />
<br />
&nbsp; &nbsp; &nbsp; &nbsp; c <span style="color: #339933;">=</span> utftext.<span style="color: #660066;">charCodeAt</span><span style="color: #009900;">&#40;</span>i<span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span><br />
<br />
&nbsp; &nbsp; &nbsp; &nbsp; <span style="color: #000066; font-weight: bold;">if</span> <span style="color: #009900;">&#40;</span>c <span style="color: #339933;">&lt;</span> <span style="color: #CC0000;">128</span><span style="color: #009900;">&#41;</span> <span style="color: #009900;">&#123;</span><br />
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; string <span style="color: #339933;">+=</span> String.<span style="color: #660066;">fromCharCode</span><span style="color: #009900;">&#40;</span>c<span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span><br />
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; i<span style="color: #339933;">++;</span><br />
&nbsp; &nbsp; &nbsp; &nbsp; <span style="color: #009900;">&#125;</span><br />
&nbsp; &nbsp; &nbsp; &nbsp; <span style="color: #000066; font-weight: bold;">else</span> <span style="color: #000066; font-weight: bold;">if</span><span style="color: #009900;">&#40;</span><span style="color: #009900;">&#40;</span>c <span style="color: #339933;">&gt;</span> <span style="color: #CC0000;">191</span><span style="color: #009900;">&#41;</span> <span style="color: #339933;">&amp;&amp;</span> <span style="color: #009900;">&#40;</span>c <span style="color: #339933;">&lt;</span> <span style="color: #CC0000;">224</span><span style="color: #009900;">&#41;</span><span style="color: #009900;">&#41;</span> <span style="color: #009900;">&#123;</span><br />
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; c2 <span style="color: #339933;">=</span> utftext.<span style="color: #660066;">charCodeAt</span><span style="color: #009900;">&#40;</span>i<span style="color: #339933;">+</span><span style="color: #CC0000;">1</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span><br />
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; string <span style="color: #339933;">+=</span> String.<span style="color: #660066;">fromCharCode</span><span style="color: #009900;">&#40;</span><span style="color: #009900;">&#40;</span><span style="color: #009900;">&#40;</span>c <span style="color: #339933;">&amp;</span> <span style="color: #CC0000;">31</span><span style="color: #009900;">&#41;</span> <span style="color: #339933;">&lt;&lt;</span> <span style="color: #CC0000;">6</span><span style="color: #009900;">&#41;</span> <span style="color: #339933;">|</span> <span style="color: #009900;">&#40;</span>c2 <span style="color: #339933;">&amp;</span> <span style="color: #CC0000;">63</span><span style="color: #009900;">&#41;</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span><br />
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; i <span style="color: #339933;">+=</span> <span style="color: #CC0000;">2</span><span style="color: #339933;">;</span><br />
&nbsp; &nbsp; &nbsp; &nbsp; <span style="color: #009900;">&#125;</span><br />
&nbsp; &nbsp; &nbsp; &nbsp; <span style="color: #000066; font-weight: bold;">else</span> <span style="color: #009900;">&#123;</span><br />
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; c2 <span style="color: #339933;">=</span> utftext.<span style="color: #660066;">charCodeAt</span><span style="color: #009900;">&#40;</span>i<span style="color: #339933;">+</span><span style="color: #CC0000;">1</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span><br />
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; c3 <span style="color: #339933;">=</span> utftext.<span style="color: #660066;">charCodeAt</span><span style="color: #009900;">&#40;</span>i<span style="color: #339933;">+</span><span style="color: #CC0000;">2</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span><br />
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; string <span style="color: #339933;">+=</span> String.<span style="color: #660066;">fromCharCode</span><span style="color: #009900;">&#40;</span><span style="color: #009900;">&#40;</span><span style="color: #009900;">&#40;</span>c <span style="color: #339933;">&amp;</span> <span style="color: #CC0000;">15</span><span style="color: #009900;">&#41;</span> <span style="color: #339933;">&lt;&lt;</span> <span style="color: #CC0000;">12</span><span style="color: #009900;">&#41;</span> <span style="color: #339933;">|</span> <span style="color: #009900;">&#40;</span><span style="color: #009900;">&#40;</span>c2 <span style="color: #339933;">&amp;</span> <span style="color: #CC0000;">63</span><span style="color: #009900;">&#41;</span> <span style="color: #339933;">&lt;&lt;</span> <span style="color: #CC0000;">6</span><span style="color: #009900;">&#41;</span> <span style="color: #339933;">|</span> <span style="color: #009900;">&#40;</span>c3 <span style="color: #339933;">&amp;</span> <span style="color: #CC0000;">63</span><span style="color: #009900;">&#41;</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span><br />
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; i <span style="color: #339933;">+=</span> <span style="color: #CC0000;">3</span><span style="color: #339933;">;</span><br />
&nbsp; &nbsp; &nbsp; &nbsp; <span style="color: #009900;">&#125;</span><br />
<br />
&nbsp; &nbsp; <span style="color: #009900;">&#125;</span><br />
<br />
&nbsp; &nbsp; <span style="color: #000066; font-weight: bold;">return</span> string<span style="color: #339933;">;</span><br />
<span style="color: #009900;">&#125;</span><br />
<br />
<span style="color: #009900;">&#125;</span></div></td></tr></tbody></table></div>
]]></content:encoded>
			<wfw:commentRss>http://mattly.me/snippet/2012/01/28/javascript-base64-encoderdecoder/feed/</wfw:commentRss>
		<slash:comments>0</slash:comments>
		</item>
		<item>
		<title>Goodbye, sweet ol&#8217; Jasmine</title>
		<link>http://mattly.me/news/2012/01/22/good-bye-sweet-ol-jasmine/?utm_source=rss&#038;utm_medium=rss&#038;utm_campaign=good-bye-sweet-ol-jasmine</link>
		<comments>http://mattly.me/news/2012/01/22/good-bye-sweet-ol-jasmine/#comments</comments>
		<pubDate>Mon, 23 Jan 2012 01:51:08 +0000</pubDate>
		<dc:creator>Matthew Clark</dc:creator>
				<category><![CDATA[News]]></category>
		<category><![CDATA[Cats]]></category>
		<category><![CDATA[Death]]></category>
		<category><![CDATA[Pets]]></category>

		<guid isPermaLink="false">http://mattly.me/?p=2058</guid>
		<description><![CDATA[It is with great sorrow and a heavy heart that I share with you the passing of Jasmine, a small, black cat who lived a full and pampered life of nearly 16 years. She and Chantel (the himalayan/ragdoll mix pictured here with Jasmine) were the last family pets my brother and I had at home [...]]]></description>
			<content:encoded><![CDATA[<p><img src="http://cdn.mattly.me/wp-content/uploads/jasmine_chantel.png" alt="" title="Jasmine &amp; Chantel" width="173" height="214" style="float:left; margin:8px;" />  It is with great sorrow and a heavy heart that I share with you the passing of Jasmine, a small, black cat who lived a full and pampered life of nearly 16 years.  She and Chantel (the himalayan/ragdoll mix pictured here with Jasmine) were the last family pets my brother and I had at home when we each moved out.<br />
<span id="more-2058"></span><br />
Jasmine came to us in 1996 as a stray kitten we found in our back yard.  She was a tiny thing, full of hiss with jet black so all you could ever see were her green eyes.  We took her inside, and if memory serves me correctly, she was only a guest until we could find her a home.  But after only a few days, my stepdad had given her a name.  I remember mom sharing the news, which she promptly followed with, &#8220;Well, I guess that means we&#8217;re keeping her!&#8221;</p>
<p>I remember during the morning hours of one of her first days with us, I went poking around the house to look for her.  It didn&#8217;t take long, as I found her in my mother&#8217;s office tucked away under an office table where mom had some boxes and a folding treadmill stacked underneath.  There was just enough room for me to see her eyeballs amid the furry shadow and to reach in a grab the kitten.  She hissed as much as she could, but when you&#8217;re only a few weeks old, you haven&#8217;t yet mastered the ability to cast fear.</p>
<p>In the summer of the following year, we moved across town and Jasmine remained part of the family with two other cats.  One of the others had to be given away after she destroyed my mom&#8217;s office, leaving just Chantel and Jasmine for the past 11 years or so.  Chantel&#8217;s getting older, too, and may be with &#8220;the rheumatiz&#8221; so she tends to stay in her bed most of the time.  With Chantel bugging mom less often, that left Jasmine with ample opportunity to befriend my mother and become her regular pal, accompanying her in her office while she graded papers or watched the Bunkers on TV.  And Jasmine never let mom forget when 5 pm came around because she would not have a late &#8220;scoop&#8221;.</p>
<p>Recently, mom discovered some lumps in a few areas on Jasmine, and the veterinarian said she didn&#8217;t have much time left &#8212; weeks, possibly months.  During my last visit at Christmas, I had a chance to feel one of the larger knots behind her ear, and it was terrible thing to find on a sweet, vibrant, and friendly little person.</p>
<p>This morning, I got a phone call from mom.  She informed me that Jasmine had not been eating or drinking hardly at all lately and rarely left her sleeping place.  Mom figured that Jasmine had no quality of life left and was only suffering now, and any more time was merely delaying the inevitable.  She took Jasmine to the veterinarian&#8217;s office Friday morning, and we lost her.  As youthful as she was, she probably could have lived another ten happy years.  But cancer is no joke.</p>
<p>What a good kitty, Jasmine, Jazz, Jazzbone, J-bone, Bone, Jazzerminn&#8230;  I&#8217;ll always remember the first laser pen I bought, and how focused and utterly determined she was while trying to catch the red dot.  I&#8217;ll always remember how she nearly disappeared in a dark room, and how she could only ever muster half a meow.  And finally, I&#8217;ll never forget how, while she just loved to be pet, she <em>hated</em> for anyone to touch her head &#8212; and I did it anyway.  Bye, dear Jasmine.</p>
]]></content:encoded>
			<wfw:commentRss>http://mattly.me/news/2012/01/22/good-bye-sweet-ol-jasmine/feed/</wfw:commentRss>
		<slash:comments>0</slash:comments>
		</item>
		<item>
		<title>Unreasonable People</title>
		<link>http://mattly.me/ramblings/2012/01/02/unreasonable-people/?utm_source=rss&#038;utm_medium=rss&#038;utm_campaign=unreasonable-people</link>
		<comments>http://mattly.me/ramblings/2012/01/02/unreasonable-people/#comments</comments>
		<pubDate>Mon, 02 Jan 2012 10:34:31 +0000</pubDate>
		<dc:creator>Matthew Clark</dc:creator>
				<category><![CDATA[Ramblings]]></category>

		<guid isPermaLink="false">http://mattly.me/?p=2022</guid>
		<description><![CDATA[We all do it from time-to-time, and some more often than others: allow our emotions to control how we react instead of using logic to properly deal with a situation. As a person who frequently turns to the Internet for information, I often stumble into forums and blog comments where one person says a little [...]]]></description>
			<content:encoded><![CDATA[<p><img src="http://cdn.mattly.me/wp-content/uploads/unreasonable.png" alt="" title="Unreasonable" width="175" height="215" style="float:left; margin:8px;" />We all do it from time-to-time, and some more often than others: allow our emotions to control how we react instead of using logic to properly deal with a situation.  As a person who frequently turns to the Internet for information, I often stumble into forums and blog comments where one person says a little more than they should have, and then someone else takes it way out of context or too personal and ends up starting a volatile back-and-forth.  Insults, name-calling, and cursing only stoke the flames and turn a campfire into a nuclear disaster.</p>
<p>With this in mind, I try my best to think twice about what I say and how I say it.  First, I don&#8217;t want to cause a flame war, and second, should one start, it&#8217;s at that time I allow my logical mind to overpower my emotions and tell myself &#8220;This person cannot be reasoned with, so there&#8217;s no point in engaging them; just walk away&#8221;.  This works pretty well, and I never end up looking like the fool.</p>
<p>But today, I got sucked into one, and I&#8217;m going to share it with you.<br />
<span id="more-2022"></span><br />
Earlier last night, the entire city of San Angelo became without water due to a problem down town.  The city has a Facebook page, and they were sharing news and updates about the problem there.  People from all over were commenting about how slow the city is and how horrible things are because the city is denying them the water.  Others were chiming in with things like &#8220;Calm down, they&#8217;re working on it, just be patient&#8221;.</p>
<p>One particular person posted the comment about how water service was being redirected to another part of town, and now other residents are without water.  She was actually criticizing city officials&#8217; maneuvers!  Then, she commented again, flaming that we have no common sense!  I decided to offer a retort, which I now fully admit was a bit over the line with sarcasm, but intended to convey the message that she was speaking on matters of which she has no factual knowledge of.  I now know that my comment probably wasn&#8217;t well-received, but she could have been the better person and ignored me.  Instead, she chose to totally lose her mind.</p>
<p>Below is the transcript:<br />
<img src="http://cdn.mattly.me/wp-content/uploads/stephanie.png" alt="" title="Facebook Blow-out" width="483" height="2847" style="float:left; margin:8px;" /><br />
<br style="clear:both;" /></p>
<p>You&#8217;ll see her accusations that I deleted my own comments, but I had not &#8212; I commented four times, and I deleted nothing.  You&#8217;ll also see where my wife eventually jumped in, but her participation was solely out of an interest to see just how far over the handles this girl would fly.  I chose to remain out of it for the most part due to the aforementioned reasons, and the few additional comments I did post were quite civil and mild, I thought.</p>
<p>Her claims that she knows me are only slightly correct, although at that time I had no idea who she was.  I later confirmed that she&#8217;s the daughter of one of my co-workers &#8212; a detail she was trying to use against me.  Yep.  She was threatening to come to the office and tell her dad.  I don&#8217;t know who she thinks I am, who she thinks she is, or who she thinks her dad is, but I get along just fine with her dad.  Plus, I doubt he&#8217;s interested in this shit.</p>
<p>So what if she does come to the office?  I already know what&#8217;s in her playbook, and she won&#8217;t be there to excercise civil conversation.  Thus, I&#8217;m prepared to let her say what she wants, and I&#8217;ll just smile.  When she&#8217;s finished, I&#8217;ll ask her to leave the building and calmly shut my office door.</p>
<p>Was I wrong?  Yes.  There was nothing I could say that would have served my purpose without getting her feathers in a twist.  And there would have been nothing that anyone could have said to cause her to re-evaluate her comments.  I was doomed from the beginning, so the thread above is actually my fault.  However, she, too, had a responsibility to maintain her bearing, and she chose to throw it right out the window.</p>
<p>My point behind sharing this is to let it be a reminder to all of us that unreasonable people are out there.  Try to identify them early and do not engage them because you will not win.  But more importantly, do not be that person!  There are already plenty of assholes in the world, and it&#8217;s well worth the effort to stop and think about what we&#8217;re doing to each other.  My mother always says to me, &#8220;Be nice!&#8221;</p>
]]></content:encoded>
			<wfw:commentRss>http://mattly.me/ramblings/2012/01/02/unreasonable-people/feed/</wfw:commentRss>
		<slash:comments>2</slash:comments>
		</item>
		<item>
		<title>The evolution of the geek</title>
		<link>http://mattly.me/ramblings/2011/12/27/the-evolution-of-the-geek/?utm_source=rss&#038;utm_medium=rss&#038;utm_campaign=the-evolution-of-the-geek</link>
		<comments>http://mattly.me/ramblings/2011/12/27/the-evolution-of-the-geek/#comments</comments>
		<pubDate>Wed, 28 Dec 2011 03:41:23 +0000</pubDate>
		<dc:creator>Matthew Clark</dc:creator>
				<category><![CDATA[Ramblings]]></category>

		<guid isPermaLink="false">http://mattly.me/?p=2016</guid>
		<description><![CDATA[It will forever be a huge source of amusement for geeks that they are now officially deemed cool. It&#8217;s true. There have been surveys and everything. &#8216;Experts&#8217; have been saying so since the early 2000s, but I don&#8217;t think anyone truly believed it until technology began to get ultra cool. Who was behind it? Geeks [...]]]></description>
			<content:encoded><![CDATA[<p>It will forever be a huge source of amusement for geeks that they are now officially deemed cool. It&#8217;s true. There have been surveys and everything. &#8216;Experts&#8217; have been saying so since the early 2000s, but I don&#8217;t think anyone truly believed it until technology began to get ultra cool. Who was behind it? Geeks of course. </p>
<p>The social networks like Facebook, the online games like World of Warcraft and <a href="http://fi.partypoker.com/" class="ext-link" rel="external">partypoker</a>, the amazing improvement in film and game graphics, the iPhone. They have all come about thanks to the imagination of geeks, and the non-geeks of the world finally acknowledge that, ultimately, we rule the world.<br />
<span id="more-2016"></span><br />
In a recent telephone survey of 1,000 American adults, an impressive 57% said that they would take it as a compliment if someone called them a geek. It also found that 65% of those asked, agreed that everyone has a geek inside of them somewhere. 20% admitted to being one. </p>
<p>A lot of people don&#8217;t know the evolution of the term though. For example, did you know that a few decades ago, geek was used to describe a carnival freak? Think Quasimodo or the random dude who ate rats alive. Seriously, they were called geeks. </p>
<p>Years down the line, technology is invented, and with the rise of the computer, &#8216;geek&#8217; became the word to describe a socially inept individual who loved the Commodore 64 computer more than food. And they weren&#8217;t popular for it. </p>
<p>Nowadays it is a term of endearment among technology lovers. Everyone loves a good gadget, so knowing a geek is a bit like knowing a doctor. You can go to them for your technology ailments and we can impart our wisdom on to you. And by that I mean, we get your tech out of a sticky spot. </p>
<p>In conclusion: once an insult, &#8216;geek&#8217; is now seen as a term of endearment. It&#8217;s funny how times change. </p>
]]></content:encoded>
			<wfw:commentRss>http://mattly.me/ramblings/2011/12/27/the-evolution-of-the-geek/feed/</wfw:commentRss>
		<slash:comments>0</slash:comments>
		</item>
		<item>
		<title>Rails: clean old ActiveRecord sessions</title>
		<link>http://mattly.me/snippet/2011/11/26/rails-clean-old-activerecord-sessions/?utm_source=rss&#038;utm_medium=rss&#038;utm_campaign=rails-clean-old-activerecord-sessions</link>
		<comments>http://mattly.me/snippet/2011/11/26/rails-clean-old-activerecord-sessions/#comments</comments>
		<pubDate>Sun, 27 Nov 2011 02:54:35 +0000</pubDate>
		<dc:creator>Matthew Clark</dc:creator>
				<category><![CDATA[Snippets]]></category>
		<category><![CDATA[Cron]]></category>
		<category><![CDATA[Linux]]></category>
		<category><![CDATA[Ruby on Rails]]></category>

		<guid isPermaLink="false">http://mattly.me/?p=2004</guid>
		<description><![CDATA[If you use ActiveRecord for session storage, you&#8217;ll find that the sessions table fills up quickly. reset_session deletes the current session (say, when implemented in a logout action), but stale sessions can still build up when a user simply closes their browser. To combat this, here&#8217;s a simple solution using a class and a cron [...]]]></description>
			<content:encoded><![CDATA[<p>If you use ActiveRecord for session storage, you&#8217;ll find that the sessions table fills up quickly.  <code class="codecolorer rails dawn"><span class="rails">reset_session</span></code> deletes the current session (say, when implemented in a logout action), but stale sessions can still build up when a user simply closes their browser.  To combat this, here&#8217;s a simple solution using a class and a cron job (Rails 3.1 and Ruby 1.9.2 under RVM):</p>
<p>Create a file called <strong>session_cleaner.rb</strong> and place it in the <code class="codecolorer text dawn"><span class="text">lib</span></code> folder:</p>
<div class="codecolorer-container rails railscasts" style="overflow:auto;white-space:nowrap;border:1px solid #9F9F9F;width:435px;"><table cellspacing="0" cellpadding="0"><tbody><tr><td style="padding:5px;text-align:center;color:#888888;background-color:#EEEEEE;border-right: 1px solid #9F9F9F;font: normal 12px/1.4em Monaco, Lucida Console, monospace;"><div>1<br />2<br />3<br />4<br />5<br />6<br /></div></td><td><div class="rails codecolorer" style="padding:5px;font:normal 12px/1.4em Monaco, Lucida Console, monospace;white-space:nowrap"><span style="color:#9966CC; font-weight:bold;">class</span> SessionUtils<br />
&nbsp; <span style="color:#9966CC; font-weight:bold;">def</span> <span style="color:#0000FF; font-weight:bold;">self</span>.<span style="color:#9900CC;">cleanup</span><br />
&nbsp; &nbsp; session_store = <span style="color:#6666ff; font-weight:bold;">ActiveRecord::SessionStore::Session</span><br />
&nbsp; &nbsp; session_store.<span style="color:#9900CC;">delete_all</span><span style="color:#006600; font-weight:bold;">&#40;</span> <span style="color:#006600; font-weight:bold;">&#91;</span><span style="color:#996600;">'updated_at &lt;?'</span>, <span style="color:#006666;">1</span>.<span style="color:#9900CC;">hour</span>.<span style="color:#5A0A0A; font-weight:bold;">ago</span><span style="color:#006600; font-weight:bold;">&#93;</span> <span style="color:#006600; font-weight:bold;">&#41;</span> <br />
&nbsp; <span style="color:#9966CC; font-weight:bold;">end</span><br />
<span style="color:#9966CC; font-weight:bold;">end</span></div></td></tr></tbody></table></div>
<p>Then, in a cron job, you can simply execute the following however often you determine is adequate to prevent buildup in the table (higher traffic applications may want more frequent cleanup, but every hour should be a good start):</p>
<div class="codecolorer-container bash railscasts" style="overflow:auto;white-space:nowrap;border:1px solid #9F9F9F;width:435px;"><table cellspacing="0" cellpadding="0"><tbody><tr><td style="padding:5px;text-align:center;color:#888888;background-color:#EEEEEE;border-right: 1px solid #9F9F9F;font: normal 12px/1.4em Monaco, Lucida Console, monospace;"><div>1<br /></div></td><td><div class="bash codecolorer" style="padding:5px;font:normal 12px/1.4em Monaco, Lucida Console, monospace;white-space:nowrap"><span style="color: #000000; font-weight: bold;">/</span>var<span style="color: #000000; font-weight: bold;">/</span>www<span style="color: #000000; font-weight: bold;">/</span>my_rails_app<span style="color: #000000; font-weight: bold;">/</span>rails runner <span style="color: #660033;">-e</span> production <span style="color: #ff0000;">&quot;SessionUtils.cleanup&quot;</span></div></td></tr></tbody></table></div>
<p><span id="more-2004"></span><br />
Of course, substitute <code class="codecolorer text dawn"><span class="text">/var/www/my_rails_app</span></code> with your application&#8217;s path.  </p>
<p>Also, keep in mind that if your sessions table fills up very quickly (due to a high-traffic application), that deleting can be interrupted while sessions are being created or updated due to lock contention on the table.  So don&#8217;t let your cron job run so infrequently that each invocation ends up having to delete millions of stale records!  Do as little as possible more often.</p>
<p><strong>Important note:</strong> if you&#8217;re using expiring sessions, you&#8217;ll want to ensure <code class="codecolorer rails dawn"><span class="rails"><span style="color:#006666;">1</span>.<span style="color:#9900CC;">hour</span>.<span style="color:#5A0A0A; font-weight:bold;">ago</span></span></code> is greater than your session expiration time in order to give your idle users time to resume their active session without being kicked off prematurely.</p>
]]></content:encoded>
			<wfw:commentRss>http://mattly.me/snippet/2011/11/26/rails-clean-old-activerecord-sessions/feed/</wfw:commentRss>
		<slash:comments>0</slash:comments>
		</item>
		<item>
		<title>Generate vertically-ordered HTML table in Ruby</title>
		<link>http://mattly.me/snippet/2011/11/23/generate-vertically-ordered-html-table-in-ruby/?utm_source=rss&#038;utm_medium=rss&#038;utm_campaign=generate-vertically-ordered-html-table-in-ruby</link>
		<comments>http://mattly.me/snippet/2011/11/23/generate-vertically-ordered-html-table-in-ruby/#comments</comments>
		<pubDate>Wed, 23 Nov 2011 14:15:59 +0000</pubDate>
		<dc:creator>Matthew Clark</dc:creator>
				<category><![CDATA[Snippets]]></category>
		<category><![CDATA[HTML]]></category>
		<category><![CDATA[Ruby on Rails]]></category>

		<guid isPermaLink="false">http://mattly.me/?p=1984</guid>
		<description><![CDATA[In a major Ruby on Rails project, I recently had to generate a table of data which had to be organized with data flowing from top-to-bottom in each column before moving on to the next column, instead of left-to-right. This seems simple, but I had trouble getting my head around it for some reason (maybe [...]]]></description>
			<content:encoded><![CDATA[<p>In a major Ruby on Rails project, I recently had to generate a table of data which had to be organized with data flowing from top-to-bottom in each column before moving on to the next column, instead of left-to-right.  This seems simple, but I had trouble getting my head around it for some reason (maybe it was a long day and my brainz were just tired).</p>
<p>Anyway, for those of you who are as easily confused as I am, here&#8217;s how to do it. <em>Note: the instance variables in this example are used simply for clarity in identifying what controls the number of columns and rows.</em></p>
<div class="codecolorer-container rails railscasts" style="overflow:auto;white-space:nowrap;border:1px solid #9F9F9F;width:435px;"><table cellspacing="0" cellpadding="0"><tbody><tr><td style="padding:5px;text-align:center;color:#888888;background-color:#EEEEEE;border-right: 1px solid #9F9F9F;font: normal 12px/1.4em Monaco, Lucida Console, monospace;"><div>1<br />2<br />3<br />4<br />5<br />6<br />7<br />8<br />9<br />10<br />11<br />12<br /></div></td><td><div class="rails codecolorer" style="padding:5px;font:normal 12px/1.4em Monaco, Lucida Console, monospace;white-space:nowrap">&lt;table&gt;<br />
&nbsp; &lt;tbody&gt;<br />
&nbsp; &nbsp; <span style="color:#006600; font-weight:bold;">&lt;%</span> <span style="color:#006666;">0</span>.<span style="color:#9900CC;">upto</span><span style="color:#006600; font-weight:bold;">&#40;</span>@rows_per_column<span style="color:#006600; font-weight:bold;">-</span><span style="color:#006666;">1</span><span style="color:#006600; font-weight:bold;">&#41;</span>.<span style="color:#5A0A0A; font-weight:bold;">each</span> <span style="color:#9966CC; font-weight:bold;">do</span> <span style="color:#006600; font-weight:bold;">|</span>row<span style="color:#006600; font-weight:bold;">|</span> <span style="color:#006600; font-weight:bold;">%&gt;</span><br />
&nbsp; &nbsp; &nbsp; &lt;tr&gt;<br />
&nbsp; &nbsp; &nbsp; &nbsp; <span style="color:#006600; font-weight:bold;">&lt;%</span> <span style="color:#006666;">0</span>.<span style="color:#9900CC;">upto</span><span style="color:#006600; font-weight:bold;">&#40;</span>@columns<span style="color:#006600; font-weight:bold;">-</span><span style="color:#006666;">1</span><span style="color:#006600; font-weight:bold;">&#41;</span>.<span style="color:#5A0A0A; font-weight:bold;">each</span> <span style="color:#9966CC; font-weight:bold;">do</span> <span style="color:#006600; font-weight:bold;">|</span>column<span style="color:#006600; font-weight:bold;">|</span> <span style="color:#006600; font-weight:bold;">%&gt;</span><br />
&nbsp; &nbsp; &nbsp; &nbsp; <span style="color:#006600; font-weight:bold;">&lt;%</span> index = row <span style="color:#006600; font-weight:bold;">+</span> <span style="color:#006600; font-weight:bold;">&#40;</span>column <span style="color:#006600; font-weight:bold;">*</span> <span style="color:#0066ff; font-weight:bold;">@rows_per_column</span><span style="color:#006600; font-weight:bold;">&#41;</span> <span style="color:#006600; font-weight:bold;">%&gt;</span><br />
&nbsp; &nbsp; &nbsp; &nbsp; &lt;td&gt;<span style="color:#006600; font-weight:bold;">&lt;%</span>= index <span style="color:#006600; font-weight:bold;">%&gt;</span>&lt;/td&gt;<br />
&nbsp; &nbsp; &nbsp; &nbsp; <span style="color:#006600; font-weight:bold;">&lt;%</span> <span style="color:#9966CC; font-weight:bold;">end</span> <span style="color:#006600; font-weight:bold;">%&gt;</span><br />
&nbsp; &nbsp; &nbsp; &lt;/tr&gt;<br />
&nbsp; &nbsp; <span style="color:#006600; font-weight:bold;">&lt;%</span> <span style="color:#9966CC; font-weight:bold;">end</span> <span style="color:#006600; font-weight:bold;">%&gt;</span><br />
&nbsp; &lt;/tbody&gt;<br />
&lt;/table&gt;</div></td></tr></tbody></table></div>
<p><span id="more-1984"></span><br />
The above will yield the following if <code class="codecolorer rails dawn"><span class="rails"><span style="color:#0066ff; font-weight:bold;">@rows_per_column</span> = <span style="color:#006666;">5</span></span></code> and <code class="codecolorer rails dawn"><span class="rails"><span style="color:#0066ff; font-weight:bold;">@columns</span> = <span style="color:#006666;">3</span></span></code>:</p>
<div class="codecolorer-container html4strict railscasts" style="overflow:auto;white-space:nowrap;border:1px solid #9F9F9F;width:435px;"><table cellspacing="0" cellpadding="0"><tbody><tr><td style="padding:5px;text-align:center;color:#888888;background-color:#EEEEEE;border-right: 1px solid #9F9F9F;font: normal 12px/1.4em Monaco, Lucida Console, monospace;"><div>1<br />2<br />3<br />4<br />5<br />6<br />7<br />8<br />9<br />10<br />11<br />12<br />13<br />14<br />15<br />16<br />17<br />18<br />19<br />20<br />21<br />22<br />23<br />24<br />25<br />26<br />27<br />28<br />29<br /></div></td><td><div class="html4strict codecolorer" style="padding:5px;font:normal 12px/1.4em Monaco, Lucida Console, monospace;white-space:nowrap"><span style="color: #009900;">&lt;<a href="http://december.com/html/4/element/table.html"><span style="color: #000000; font-weight: bold;">table</span></a>&gt;</span><br />
&nbsp; <span style="color: #009900;">&lt;<a href="http://december.com/html/4/element/tbody.html"><span style="color: #000000; font-weight: bold;">tbody</span></a>&gt;</span><br />
&nbsp; &nbsp; &nbsp; <span style="color: #009900;">&lt;<a href="http://december.com/html/4/element/tr.html"><span style="color: #000000; font-weight: bold;">tr</span></a>&gt;</span><br />
&nbsp; &nbsp; &nbsp; &nbsp; <span style="color: #009900;">&lt;<a href="http://december.com/html/4/element/td.html"><span style="color: #000000; font-weight: bold;">td</span></a>&gt;</span>1<span style="color: #009900;">&lt;<span style="color: #66cc66;">/</span><a href="http://december.com/html/4/element/td.html"><span style="color: #000000; font-weight: bold;">td</span></a>&gt;</span><br />
&nbsp; &nbsp; &nbsp; &nbsp; <span style="color: #009900;">&lt;<a href="http://december.com/html/4/element/td.html"><span style="color: #000000; font-weight: bold;">td</span></a>&gt;</span>6<span style="color: #009900;">&lt;<span style="color: #66cc66;">/</span><a href="http://december.com/html/4/element/td.html"><span style="color: #000000; font-weight: bold;">td</span></a>&gt;</span><br />
&nbsp; &nbsp; &nbsp; &nbsp; <span style="color: #009900;">&lt;<a href="http://december.com/html/4/element/td.html"><span style="color: #000000; font-weight: bold;">td</span></a>&gt;</span>11<span style="color: #009900;">&lt;<span style="color: #66cc66;">/</span><a href="http://december.com/html/4/element/td.html"><span style="color: #000000; font-weight: bold;">td</span></a>&gt;</span><br />
&nbsp; &nbsp; &nbsp; <span style="color: #009900;">&lt;<span style="color: #66cc66;">/</span><a href="http://december.com/html/4/element/tr.html"><span style="color: #000000; font-weight: bold;">tr</span></a>&gt;</span><br />
&nbsp; &nbsp; &nbsp; <span style="color: #009900;">&lt;<a href="http://december.com/html/4/element/tr.html"><span style="color: #000000; font-weight: bold;">tr</span></a>&gt;</span><br />
&nbsp; &nbsp; &nbsp; &nbsp; <span style="color: #009900;">&lt;<a href="http://december.com/html/4/element/td.html"><span style="color: #000000; font-weight: bold;">td</span></a>&gt;</span>2<span style="color: #009900;">&lt;<span style="color: #66cc66;">/</span><a href="http://december.com/html/4/element/td.html"><span style="color: #000000; font-weight: bold;">td</span></a>&gt;</span><br />
&nbsp; &nbsp; &nbsp; &nbsp; <span style="color: #009900;">&lt;<a href="http://december.com/html/4/element/td.html"><span style="color: #000000; font-weight: bold;">td</span></a>&gt;</span>7<span style="color: #009900;">&lt;<span style="color: #66cc66;">/</span><a href="http://december.com/html/4/element/td.html"><span style="color: #000000; font-weight: bold;">td</span></a>&gt;</span><br />
&nbsp; &nbsp; &nbsp; &nbsp; <span style="color: #009900;">&lt;<a href="http://december.com/html/4/element/td.html"><span style="color: #000000; font-weight: bold;">td</span></a>&gt;</span>12<span style="color: #009900;">&lt;<span style="color: #66cc66;">/</span><a href="http://december.com/html/4/element/td.html"><span style="color: #000000; font-weight: bold;">td</span></a>&gt;</span><br />
&nbsp; &nbsp; &nbsp; <span style="color: #009900;">&lt;<span style="color: #66cc66;">/</span><a href="http://december.com/html/4/element/tr.html"><span style="color: #000000; font-weight: bold;">tr</span></a>&gt;</span><br />
&nbsp; &nbsp; &nbsp; <span style="color: #009900;">&lt;<a href="http://december.com/html/4/element/tr.html"><span style="color: #000000; font-weight: bold;">tr</span></a>&gt;</span><br />
&nbsp; &nbsp; &nbsp; &nbsp; <span style="color: #009900;">&lt;<a href="http://december.com/html/4/element/td.html"><span style="color: #000000; font-weight: bold;">td</span></a>&gt;</span>3<span style="color: #009900;">&lt;<span style="color: #66cc66;">/</span><a href="http://december.com/html/4/element/td.html"><span style="color: #000000; font-weight: bold;">td</span></a>&gt;</span><br />
&nbsp; &nbsp; &nbsp; &nbsp; <span style="color: #009900;">&lt;<a href="http://december.com/html/4/element/td.html"><span style="color: #000000; font-weight: bold;">td</span></a>&gt;</span>8<span style="color: #009900;">&lt;<span style="color: #66cc66;">/</span><a href="http://december.com/html/4/element/td.html"><span style="color: #000000; font-weight: bold;">td</span></a>&gt;</span><br />
&nbsp; &nbsp; &nbsp; &nbsp; <span style="color: #009900;">&lt;<a href="http://december.com/html/4/element/td.html"><span style="color: #000000; font-weight: bold;">td</span></a>&gt;</span>13<span style="color: #009900;">&lt;<span style="color: #66cc66;">/</span><a href="http://december.com/html/4/element/td.html"><span style="color: #000000; font-weight: bold;">td</span></a>&gt;</span><br />
&nbsp; &nbsp; &nbsp; <span style="color: #009900;">&lt;<span style="color: #66cc66;">/</span><a href="http://december.com/html/4/element/tr.html"><span style="color: #000000; font-weight: bold;">tr</span></a>&gt;</span><br />
&nbsp; &nbsp; &nbsp; <span style="color: #009900;">&lt;<a href="http://december.com/html/4/element/tr.html"><span style="color: #000000; font-weight: bold;">tr</span></a>&gt;</span><br />
&nbsp; &nbsp; &nbsp; &nbsp; <span style="color: #009900;">&lt;<a href="http://december.com/html/4/element/td.html"><span style="color: #000000; font-weight: bold;">td</span></a>&gt;</span>4<span style="color: #009900;">&lt;<span style="color: #66cc66;">/</span><a href="http://december.com/html/4/element/td.html"><span style="color: #000000; font-weight: bold;">td</span></a>&gt;</span><br />
&nbsp; &nbsp; &nbsp; &nbsp; <span style="color: #009900;">&lt;<a href="http://december.com/html/4/element/td.html"><span style="color: #000000; font-weight: bold;">td</span></a>&gt;</span>9<span style="color: #009900;">&lt;<span style="color: #66cc66;">/</span><a href="http://december.com/html/4/element/td.html"><span style="color: #000000; font-weight: bold;">td</span></a>&gt;</span><br />
&nbsp; &nbsp; &nbsp; &nbsp; <span style="color: #009900;">&lt;<a href="http://december.com/html/4/element/td.html"><span style="color: #000000; font-weight: bold;">td</span></a>&gt;</span>14<span style="color: #009900;">&lt;<span style="color: #66cc66;">/</span><a href="http://december.com/html/4/element/td.html"><span style="color: #000000; font-weight: bold;">td</span></a>&gt;</span><br />
&nbsp; &nbsp; &nbsp; <span style="color: #009900;">&lt;<span style="color: #66cc66;">/</span><a href="http://december.com/html/4/element/tr.html"><span style="color: #000000; font-weight: bold;">tr</span></a>&gt;</span><br />
&nbsp; &nbsp; &nbsp; <span style="color: #009900;">&lt;<a href="http://december.com/html/4/element/tr.html"><span style="color: #000000; font-weight: bold;">tr</span></a>&gt;</span><br />
&nbsp; &nbsp; &nbsp; &nbsp; <span style="color: #009900;">&lt;<a href="http://december.com/html/4/element/td.html"><span style="color: #000000; font-weight: bold;">td</span></a>&gt;</span>5<span style="color: #009900;">&lt;<span style="color: #66cc66;">/</span><a href="http://december.com/html/4/element/td.html"><span style="color: #000000; font-weight: bold;">td</span></a>&gt;</span><br />
&nbsp; &nbsp; &nbsp; &nbsp; <span style="color: #009900;">&lt;<a href="http://december.com/html/4/element/td.html"><span style="color: #000000; font-weight: bold;">td</span></a>&gt;</span>10<span style="color: #009900;">&lt;<span style="color: #66cc66;">/</span><a href="http://december.com/html/4/element/td.html"><span style="color: #000000; font-weight: bold;">td</span></a>&gt;</span><br />
&nbsp; &nbsp; &nbsp; &nbsp; <span style="color: #009900;">&lt;<a href="http://december.com/html/4/element/td.html"><span style="color: #000000; font-weight: bold;">td</span></a>&gt;</span>15<span style="color: #009900;">&lt;<span style="color: #66cc66;">/</span><a href="http://december.com/html/4/element/td.html"><span style="color: #000000; font-weight: bold;">td</span></a>&gt;</span><br />
&nbsp; &nbsp; &nbsp; <span style="color: #009900;">&lt;<span style="color: #66cc66;">/</span><a href="http://december.com/html/4/element/tr.html"><span style="color: #000000; font-weight: bold;">tr</span></a>&gt;</span><br />
&nbsp; <span style="color: #009900;">&lt;<span style="color: #66cc66;">/</span><a href="http://december.com/html/4/element/tbody.html"><span style="color: #000000; font-weight: bold;">tbody</span></a>&gt;</span><br />
<span style="color: #009900;">&lt;<span style="color: #66cc66;">/</span><a href="http://december.com/html/4/element/table.html"><span style="color: #000000; font-weight: bold;">table</span></a>&gt;</span></div></td></tr></tbody></table></div>
<p>&#8230;which will render thusly:</p>
<table id="demo1234">
<tbody>
<tr>
<td>1</td>
<td>6</td>
<td>11</td>
</tr>
<tr>
<td>2</td>
<td>7</td>
<td>12</td>
</tr>
<tr>
<td>3</td>
<td>8</td>
<td>13</td>
</tr>
<tr>
<td>4</td>
<td>9</td>
<td>14</td>
</tr>
<tr>
<td>5</td>
<td>10</td>
<td>15</td>
</tr>
</tbody>
</table>
<p>If you are looping over a collection (say, from ActiveRecord), you can distribute your data evenly into a static number of columns with <code class="codecolorer rails dawn"><span class="rails"><span style="color:#0066ff; font-weight:bold;">@rows_per_column</span> = <span style="color:#006600; font-weight:bold;">&#40;</span>@collection.<span style="color:#5A0A0A; font-weight:bold;">count</span>.<span style="color:#9900CC;">to_f</span> <span style="color:#006600; font-weight:bold;">/</span> <span style="color:#0066ff; font-weight:bold;">@columns</span>.<span style="color:#9900CC;">to_f</span><span style="color:#006600; font-weight:bold;">&#41;</span>.<span style="color:#9900CC;">ceil</span></span></code>.  Then, to ensure your last column doesn&#8217;t generate more rows than you have data, simply use <code class="codecolorer rails dawn"><span class="rails">... <span style="color:#9966CC; font-weight:bold;">unless</span> index <span style="color:#006600; font-weight:bold;">&gt;</span>= <span style="color:#0066ff; font-weight:bold;">@collection</span>.<span style="color:#5A0A0A; font-weight:bold;">count</span></span></code> in the table cell.</p>
<style type="text/css">
table#demo1234 { margin: 24px; }
table#demo1234 td { height: 48px;  width: 48px;  border: 1px solid #000; }
</style>
]]></content:encoded>
			<wfw:commentRss>http://mattly.me/snippet/2011/11/23/generate-vertically-ordered-html-table-in-ruby/feed/</wfw:commentRss>
		<slash:comments>0</slash:comments>
		</item>
		<item>
		<title>Keeping track of JavaScript timers</title>
		<link>http://mattly.me/snippet/2011/10/19/keeping-track-of-javascript-timers/?utm_source=rss&#038;utm_medium=rss&#038;utm_campaign=keeping-track-of-javascript-timers</link>
		<comments>http://mattly.me/snippet/2011/10/19/keeping-track-of-javascript-timers/#comments</comments>
		<pubDate>Thu, 20 Oct 2011 02:13:24 +0000</pubDate>
		<dc:creator>Matthew Clark</dc:creator>
				<category><![CDATA[Snippets]]></category>
		<category><![CDATA[JavaScript]]></category>

		<guid isPermaLink="false">http://mattly.me/?p=1970</guid>
		<description><![CDATA[While working with a complex AJAX script today, I discovered a long-standing problem with an interval timer duplicating itself. I spent most of the morning trying to figure out ways to prevent more than one instance of the timer from firing, but since the timer could be stopped and restarted based on user interaction, there [...]]]></description>
			<content:encoded><![CDATA[<p>While working with a complex AJAX script today, I discovered a long-standing problem with an interval timer duplicating itself.  I spent most of the morning trying to figure out ways to prevent more than one instance of the timer from firing, but since the timer could be stopped and restarted based on user interaction, there had to be another way.  Well, I&#8217;m here to show you a nifty solution so you don&#8217;t have to learn the heard way like me.</p>
<p>Typically, when you create timers in JavaScript, you created them like so:</p>
<div class="codecolorer-container javascript railscasts" style="overflow:auto;white-space:nowrap;border:1px solid #9F9F9F;width:435px;"><table cellspacing="0" cellpadding="0"><tbody><tr><td style="padding:5px;text-align:center;color:#888888;background-color:#EEEEEE;border-right: 1px solid #9F9F9F;font: normal 12px/1.4em Monaco, Lucida Console, monospace;"><div>1<br />2<br />3<br />4<br />5<br />6<br />7<br />8<br /></div></td><td><div class="javascript codecolorer" style="padding:5px;font:normal 12px/1.4em Monaco, Lucida Console, monospace;white-space:nowrap"><span style="color: #003366; font-weight: bold;">var</span> delay <span style="color: #339933;">=</span> <span style="color: #CC0000;">5000</span><span style="color: #339933;">;</span><br />
setTimer<span style="color: #009900;">&#40;</span><span style="color: #003366; font-weight: bold;">function</span><span style="color: #009900;">&#40;</span><span style="color: #009900;">&#41;</span> <span style="color: #009900;">&#123;</span><br />
&nbsp; <span style="color: #006600; font-style: italic;">// Do something once after delay</span><br />
<span style="color: #009900;">&#125;</span><span style="color: #339933;">,</span> delay<span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span><br />
<br />
setInterval<span style="color: #009900;">&#40;</span><span style="color: #003366; font-weight: bold;">function</span><span style="color: #009900;">&#40;</span><span style="color: #009900;">&#41;</span> <span style="color: #009900;">&#123;</span><br />
&nbsp; <span style="color: #006600; font-style: italic;">// Repeat something after every delay</span><br />
<span style="color: #009900;">&#125;</span><span style="color: #339933;">,</span> delay<span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span></div></td></tr></tbody></table></div>
<p><span id="more-1970"></span><br />
And, as you may already know, if you want to clear a timer, you have to keep track of it by assigning its return value to a variable (which is an integer ID):</p>
<div class="codecolorer-container javascript railscasts" style="overflow:auto;white-space:nowrap;border:1px solid #9F9F9F;width:435px;"><table cellspacing="0" cellpadding="0"><tbody><tr><td style="padding:5px;text-align:center;color:#888888;background-color:#EEEEEE;border-right: 1px solid #9F9F9F;font: normal 12px/1.4em Monaco, Lucida Console, monospace;"><div>1<br />2<br />3<br />4<br />5<br />6<br />7<br />8<br />9<br />10<br />11<br />12<br />13<br /></div></td><td><div class="javascript codecolorer" style="padding:5px;font:normal 12px/1.4em Monaco, Lucida Console, monospace;white-space:nowrap"><span style="color: #003366; font-weight: bold;">var</span> delay <span style="color: #339933;">=</span> <span style="color: #CC0000;">5000</span><span style="color: #339933;">;</span><br />
<span style="color: #003366; font-weight: bold;">var</span> thisTimer <span style="color: #339933;">=</span> setTimer<span style="color: #009900;">&#40;</span><span style="color: #003366; font-weight: bold;">function</span><span style="color: #009900;">&#40;</span><span style="color: #009900;">&#41;</span> <span style="color: #009900;">&#123;</span><br />
&nbsp; <span style="color: #006600; font-style: italic;">// Do something once after delay</span><br />
<span style="color: #009900;">&#125;</span><span style="color: #339933;">,</span> delay<span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span><br />
<br />
clearTimer<span style="color: #009900;">&#40;</span>thisTimer<span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span><br />
<br />
<br />
<span style="color: #003366; font-weight: bold;">var</span> thisInterval <span style="color: #339933;">=</span> setInterval<span style="color: #009900;">&#40;</span><span style="color: #003366; font-weight: bold;">function</span><span style="color: #009900;">&#40;</span><span style="color: #009900;">&#41;</span> <span style="color: #009900;">&#123;</span><br />
&nbsp; <span style="color: #006600; font-style: italic;">// Repeat something after every delay</span><br />
<span style="color: #009900;">&#125;</span><span style="color: #339933;">,</span> delay<span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span><br />
<br />
clearInterval<span style="color: #009900;">&#40;</span>thisInterval<span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span></div></td></tr></tbody></table></div>
<p>But what happens if the variable you&#8217;re using to keep track of your interval is overwritten with another <code class="codecolorer javascript dawn"><span class="javascript">setInterval<span style="color: #009900;">&#40;</span><span style="color: #009900;">&#41;</span></span></code>?  Well, now there&#8217;s no way to stop the first interval because it&#8217;s ID has been overwritten with the ID of the second interval.  So now you have no idea how to get a handle on the old timer, so it will continue to run, and the only way to destroy it is to refresh the page.</p>
<div class="codecolorer-container javascript railscasts" style="overflow:auto;white-space:nowrap;border:1px solid #9F9F9F;width:435px;"><table cellspacing="0" cellpadding="0"><tbody><tr><td style="padding:5px;text-align:center;color:#888888;background-color:#EEEEEE;border-right: 1px solid #9F9F9F;font: normal 12px/1.4em Monaco, Lucida Console, monospace;"><div>1<br />2<br />3<br />4<br />5<br />6<br />7<br />8<br />9<br />10<br />11<br />12<br />13<br />14<br /></div></td><td><div class="javascript codecolorer" style="padding:5px;font:normal 12px/1.4em Monaco, Lucida Console, monospace;white-space:nowrap"><span style="color: #006600; font-style: italic;">// Set the delay to 5 seconds</span><br />
<span style="color: #003366; font-weight: bold;">var</span> delay <span style="color: #339933;">=</span> <span style="color: #CC0000;">5000</span><span style="color: #339933;">;</span><br />
<br />
<span style="color: #006600; font-style: italic;">// Create the interval and assign it's ID to a variable</span><br />
<span style="color: #003366; font-weight: bold;">var</span> myInterval <span style="color: #339933;">=</span> setInterval<span style="color: #009900;">&#40;</span><span style="color: #003366; font-weight: bold;">function</span><span style="color: #009900;">&#40;</span><span style="color: #009900;">&#41;</span> <span style="color: #009900;">&#123;</span><br />
&nbsp; <span style="color: #000066;">alert</span><span style="color: #009900;">&#40;</span><span style="color: #3366CC;">&quot;Hey, it's been &quot;</span> <span style="color: #339933;">+</span> <span style="color: #009900;">&#40;</span>delay<span style="color: #339933;">/</span><span style="color: #CC0000;">1000</span><span style="color: #009900;">&#41;</span> <span style="color: #339933;">+</span> <span style="color: #3366CC;">&quot; seconds!&quot;</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span><br />
<span style="color: #009900;">&#125;</span><span style="color: #339933;">,</span> delay<span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span><br />
<br />
<span style="color: #006600; font-style: italic;">// Let's overwrite the old interval with a new one (uh, wrong)</span><br />
<span style="color: #003366; font-weight: bold;">var</span> myInterval <span style="color: #339933;">=</span> setInterval<span style="color: #009900;">&#40;</span><span style="color: #003366; font-weight: bold;">function</span><span style="color: #009900;">&#40;</span><span style="color: #009900;">&#41;</span> <span style="color: #009900;">&#123;</span><br />
&nbsp; <span style="color: #000066;">alert</span><span style="color: #009900;">&#40;</span><span style="color: #3366CC;">&quot;Hey, this is a new interval!&quot;</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span><br />
<span style="color: #009900;">&#125;</span><span style="color: #339933;">,</span> delay<span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span><br />
<br />
clearInterval<span style="color: #009900;">&#40;</span>thisInterval<span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span> &nbsp;<span style="color: #006600; font-style: italic;">// &nbsp;&lt;-- This will stop the second interval, but the first one will keep going!</span></div></td></tr></tbody></table></div>
<p>Now this may seem like an easy situation to avoid: simply call <code class="codecolorer javascript dawn"><span class="javascript">clearInterval<span style="color: #009900;">&#40;</span><span style="color: #009900;">&#41;</span></span></code> before re-using the variable.  But in the case of a function which not only controls a timer, but also loops onto itself and acts based on user input, there could be a condition which would cause an additional timer to spawn in the loop without clearing the one(s) which preceded it.</p>
<p>But I have a very easy solution, my friends!  Instead of assigning the timer to a variable, let&#8217;s push it into an array!</p>
<div class="codecolorer-container javascript railscasts" style="overflow:auto;white-space:nowrap;border:1px solid #9F9F9F;width:435px;"><table cellspacing="0" cellpadding="0"><tbody><tr><td style="padding:5px;text-align:center;color:#888888;background-color:#EEEEEE;border-right: 1px solid #9F9F9F;font: normal 12px/1.4em Monaco, Lucida Console, monospace;"><div>1<br />2<br />3<br />4<br />5<br />6<br />7<br />8<br />9<br />10<br />11<br />12<br />13<br />14<br />15<br />16<br />17<br />18<br />19<br /></div></td><td><div class="javascript codecolorer" style="padding:5px;font:normal 12px/1.4em Monaco, Lucida Console, monospace;white-space:nowrap"><span style="color: #006600; font-style: italic;">// Set the delay to 5 seconds</span><br />
<span style="color: #003366; font-weight: bold;">var</span> delay <span style="color: #339933;">=</span> <span style="color: #CC0000;">5000</span><span style="color: #339933;">;</span><br />
<br />
<span style="color: #006600; font-style: italic;">// Set up an array to contain all timer IDs</span><br />
<span style="color: #003366; font-weight: bold;">var</span> allTimers <span style="color: #339933;">=</span> <span style="color: #009900;">&#91;</span><span style="color: #009900;">&#93;</span><br />
<br />
<span style="color: #006600; font-style: italic;">// Create the interval and assign it's ID to a variable</span><br />
<span style="color: #003366; font-weight: bold;">var</span> allTimers.<span style="color: #660066;">push</span><span style="color: #009900;">&#40;</span><br />
&nbsp; setInterval<span style="color: #009900;">&#40;</span><span style="color: #003366; font-weight: bold;">function</span><span style="color: #009900;">&#40;</span><span style="color: #009900;">&#41;</span> <span style="color: #009900;">&#123;</span><br />
&nbsp; &nbsp; <span style="color: #000066;">alert</span><span style="color: #009900;">&#40;</span><span style="color: #3366CC;">&quot;Hey, it's been &quot;</span> <span style="color: #339933;">+</span> <span style="color: #009900;">&#40;</span>delay<span style="color: #339933;">/</span><span style="color: #CC0000;">1000</span><span style="color: #009900;">&#41;</span> <span style="color: #339933;">+</span> <span style="color: #3366CC;">&quot; seconds!&quot;</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span><br />
&nbsp; <span style="color: #009900;">&#125;</span><span style="color: #339933;">,</span> delay<span style="color: #009900;">&#41;</span><br />
<span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span><br />
<br />
<span style="color: #006600; font-style: italic;">// Let's add another timer without losing track of the other one</span><br />
<span style="color: #003366; font-weight: bold;">var</span> allTimers.<span style="color: #660066;">push</span><span style="color: #009900;">&#40;</span><br />
&nbsp; setInterval<span style="color: #009900;">&#40;</span><span style="color: #003366; font-weight: bold;">function</span><span style="color: #009900;">&#40;</span><span style="color: #009900;">&#41;</span> <span style="color: #009900;">&#123;</span><br />
&nbsp; &nbsp; <span style="color: #000066;">alert</span><span style="color: #009900;">&#40;</span><span style="color: #3366CC;">&quot;Hey, this is a new interval!&quot;</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span><br />
&nbsp; <span style="color: #009900;">&#125;</span><span style="color: #339933;">,</span> delay<span style="color: #009900;">&#41;</span><br />
<span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span></div></td></tr></tbody></table></div>
<p>Now we have an array, which will contain something like <code class="codecolorer javascript dawn"><span class="javascript"><span style="color: #009900;">&#91;</span><span style="color: #CC0000;">64</span><span style="color: #339933;">,</span><span style="color: #CC0000;">66</span><span style="color: #009900;">&#93;</span></span></code>.  Cool!  Now we can keep track of both timers.  But you may be thinking, &#8220;Big deal!  I can just use different variables for each timer, so this doesn&#8217;t solve anything!&#8221;  Woah, there, ace.  Here&#8217;s the other cool part about storing timer IDs in an array:</p>
<div class="codecolorer-container javascript railscasts" style="overflow:auto;white-space:nowrap;border:1px solid #9F9F9F;width:435px;"><table cellspacing="0" cellpadding="0"><tbody><tr><td style="padding:5px;text-align:center;color:#888888;background-color:#EEEEEE;border-right: 1px solid #9F9F9F;font: normal 12px/1.4em Monaco, Lucida Console, monospace;"><div>1<br />2<br />3<br />4<br />5<br />6<br />7<br />8<br />9<br />10<br /></div></td><td><div class="javascript codecolorer" style="padding:5px;font:normal 12px/1.4em Monaco, Lucida Console, monospace;white-space:nowrap"><span style="color: #006600; font-style: italic;">// var allTimers was set earlier</span><br />
<br />
<span style="color: #003366; font-weight: bold;">function</span> killTimers<span style="color: #009900;">&#40;</span><span style="color: #009900;">&#41;</span><br />
<span style="color: #009900;">&#123;</span><br />
&nbsp; <span style="color: #006600; font-style: italic;">// Use each timer ID to stop that timer</span><br />
&nbsp; <span style="color: #000066; font-weight: bold;">for</span><span style="color: #009900;">&#40;</span><span style="color: #003366; font-weight: bold;">var</span> i<span style="color: #339933;">=</span><span style="color: #CC0000;">0</span><span style="color: #339933;">;</span> i<span style="color: #339933;">&lt;</span>allTimers.<span style="color: #660066;">length</span><span style="color: #339933;">;</span> i<span style="color: #339933;">++</span><span style="color: #009900;">&#41;</span> clearInterval<span style="color: #009900;">&#40;</span>allTimers<span style="color: #009900;">&#91;</span>i<span style="color: #009900;">&#93;</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span><br />
&nbsp; <br />
&nbsp; <span style="color: #006600; font-style: italic;">// Then empty the variable to keep a clean house</span><br />
&nbsp; allTimers <span style="color: #339933;">=</span> <span style="color: #009900;">&#91;</span><span style="color: #009900;">&#93;</span><span style="color: #339933;">;</span><br />
<span style="color: #009900;">&#125;</span></div></td></tr></tbody></table></div>
<p>Now, all you have to do is call <code class="codecolorer javascript dawn"><span class="javascript">killTimers<span style="color: #009900;">&#40;</span><span style="color: #009900;">&#41;</span></span></code> and all timers that you pushed into the array will be cleared.  So now you may be asking again, &#8220;So I still don&#8217;t see how this is better than assigning each timer to its own variable.&#8221;  Yes, I know, but here&#8217;s why&#8230;</p>
<p>Lets create a scenario based on these assumptions:</p>
<ol>
<li>You have an AJAX loop which repeats itself with <code class="codecolorer javascript dawn"><span class="javascript">myAjaxTimer <span style="color: #339933;">=</span> setInterval<span style="color: #009900;">&#40;</span><span style="color: #009900;">&#41;</span></span></code></li>
<li>You have a button that a user can click which will perform an action (say, open a dialog box), and stop the timer in the meantime <code class="codecolorer javascript dawn"><span class="javascript">clearInterval<span style="color: #009900;">&#40;</span>myAjaxTimer<span style="color: #009900;">&#41;</span></span></code></li>
<li>The dialog contains a form which posts data and waits for an AJAX response before closing itself</li>
<li>You want to restart the timer after the dialog has been dismissed (yep, <code class="codecolorer javascript dawn"><span class="javascript">myAjaxTimer <span style="color: #339933;">=</span> setInterval<span style="color: #009900;">&#40;</span><span style="color: #009900;">&#41;</span></span></code> again)</li>
</ol>
<p>The problem here is that the timer can overwrite it&#8217;s previous ID, which can happen if, perhaps, there was a significant enough delay between the time the dialog dismissed (timer restarted) and the user clicking the button again (clearing a timer which hasn&#8217;t been started yet).  The longer the delay during this time, the opportunity to have a rogue timer is more likely.</p>
<p>By assigning your timer IDs with <code class="codecolorer javascript dawn"><span class="javascript">array.<span style="color: #660066;">push</span><span style="color: #009900;">&#40;</span><span style="color: #009900;">&#41;</span></span></code>, you&#8217;ll never overwrite another timer.  Hopefully, based on this scenario, there will only ever be one timer ID.  When you want to clear your timer, the <code class="codecolorer javascript dawn"><span class="javascript">killTimers<span style="color: #009900;">&#40;</span><span style="color: #009900;">&#41;</span></span></code> function will clear it, along with any others that may have started for whatever reason.</p>
<p>I realize this may have been a bit difficult to follow as I used some quite basic examples which don&#8217;t really illustrate the problem well, but if I&#8217;d used actual code from my script, there would have been way too much to look at and get distracted with (hence why I spent all morning debugging my rogue timer problem).  There are all sorts of ways to fix this problem with looping AJAX calls and preventing them from duplicating themselves, but in my particular situation, this was the most appropriate solution.  I just had to share it in case it may help anyone else.</p>
]]></content:encoded>
			<wfw:commentRss>http://mattly.me/snippet/2011/10/19/keeping-track-of-javascript-timers/feed/</wfw:commentRss>
		<slash:comments>0</slash:comments>
		</item>
		<item>
		<title>Define &#8220;plugged in&#8221;</title>
		<link>http://mattly.me/ramblings/2011/10/14/define-plugged-in/?utm_source=rss&#038;utm_medium=rss&#038;utm_campaign=define-plugged-in</link>
		<comments>http://mattly.me/ramblings/2011/10/14/define-plugged-in/#comments</comments>
		<pubDate>Fri, 14 Oct 2011 22:27:51 +0000</pubDate>
		<dc:creator>Matthew Clark</dc:creator>
				<category><![CDATA[Geek Stuff]]></category>
		<category><![CDATA[Ramblings]]></category>

		<guid isPermaLink="false">http://mattly.me/?p=1962</guid>
		<description><![CDATA[Did you see the movie Social Network (a.k.a. the Facebook movie)? It was about the founding of the most popular social networking site, and in it was a term used many times: &#8220;plugged in&#8221;. Well, I&#8217;m under no illusion that I am or can be among the elite when it comes to software programming, but [...]]]></description>
			<content:encoded><![CDATA[<p><img src="http://cdn.mattly.me/wp-content/uploads/plugged_in.png" alt="" title="Plugged In" width="175" height="215" style="float:right; margin:8px;" />  Did you see the movie <a href="http://www.imdb.com/title/tt1285016/" class="ext-link" rel="external">Social Network</a> (a.k.a. the Facebook movie)?  It was about the founding of the most popular social networking site, and in it was a term used many times: &#8220;plugged in&#8221;.  Well, I&#8217;m under no illusion that I am or can be among the elite when it comes to software programming, but the fact is I <em>am</em> a programmer, and I tend to become &#8220;plugged in&#8221; quite often.  But what does that mean?<br />
<span id="more-1962"></span><br />
I may be forgetful from time-to-time&#8230; actually, I am forgetful.  A lot.  I remember one of my first jobs working as a clerk in a pastoral care department at a hospital.  I can distinctly remember my boss handing me a stack of documents to copy, collate, and staple.  She would tell me how many of each, and I would confirm her request.  Just as I stepped into the hallway, I would totally forget what she just told me and I would have to pop back in and ask, &#8220;How many?&#8221;</p>
<p>As an IT professional (most of which is in the past, but I still practice), I&#8217;ve worked with IP addresses, MAC addresses, and other numbers &#8212; all of which I can forget before the person telling me finishes.  Hell, there even been times when I forget where I am in the middle of dialing a phone number!  We all have our quirks, I guess, and that&#8217;s one of mine.</p>
<p>I&#8217;m also not a very good multi-tasker unless the tasks are highly related to each other in some way.  Like a lot of men (and you can Google this shit), if my phone rings, I have to stop what I&#8217;m doing, mute the TV, and tell everyone else to shut the hell up before I can answer my phone.  If someone other than the caller begins to speak, then I can&#8217;t discern either person and I have to ask the caller to repeat himself.</p>
<p>But check this out: once I get into coding something, whether a website, iPhone app, or HVAC automation controller, I can lose time like a coma patient.  I can&#8217;t tell you how many lunches have been completely skipped or how many times I&#8217;ve found myself completely alone in the office with sunset approaching.  I&#8217;ve even missed scheduled phone calls, meetings, and even entire dates because I&#8217;ve been so deep into some kind of programming.  And, it&#8217;s not beyond me to completely forget what day of the week it is!  Oh, and I can&#8217;t imagine how irritating this must be to my wife, who doesn&#8217;t give me near as much hell as maybe I deserve.</p>
<p>Before I saw the Social Network movie, I&#8217;d never heard the term &#8220;plugged in&#8221; before.  But as soon as I heard it, right there in the theater, I knew immediately what they were talking about and I became overwhelmed with joy.  I now had a term to describe this ability to completely lose time while engaging in long bouts of geeky über-productivity.  But having that ability comes at a price.</p>
<p>Being plugged in is not something that you simply &#8220;do&#8221; &#8212; something than can simply be toggled.  Plugged in is a state that you reach, like terminal velocity; throw a penny off a tall building, and in time, it will finally reach its maximum speed as it plummets to the earth, but it certainly won&#8217;t start out at that speed.  And to really drive this one home: ever watch a chainsaw juggler?  He&#8217;ll start with a couple, and then throw a few more in as he gets his rhythm.  But instead of chainsaws, a programmer works at getting his various trains of thought going with enough momentum to keep them all going as he hops from one thing to another.</p>
<p>While writing code, I can have several trains of thought running through my head.  Each train of though can be associated with several open files, editors, compilers, command consoles, debuggers, log files, and browser windows loaded with reference pages.  I can keep track of all of that, and I can be extremely productive!  &#8230;until my phone rings.  Kablammo.</p>
<p>When someone who&#8217;s plugged in gets interrupted, horrible side-effects are to be sustained immediately as well as long-term.  For me, I find it very difficult to switch gears and get my little brain to focus on something different.  I sometimes come across as rude and abrupt, and even annoyed even though I am not.  I know this about myself, and I try to control it, but that&#8217;s part of the switching gears thing &#8212; a circular dependency.  It takes me several minutes to get my mind off of the code I was writing and back into reality.</p>
<p>Meanwhile, all those trains of though that were running so smoothly and safely around the room come crashing down like a bad day at Amtrak.  In fact, if you look closely at someone who was plugged in and has just been interrupted, you can see a faint haze of smoke all around and the smell of a caffeine fire being snuffed out.  But the problem is not necessarily the interruption itself, but in the recovery.  The longer the interruption, the bigger the mental mess.</p>
<p>A short interruption usually isn&#8217;t fatal and doesn&#8217;t cause permanent damage, and the trains of thought had enough momentum to keep themselves going, and I can catch &#8216;em and get right back to speed.  But when recovering from a long interruption, a programmer like me is faced with several open files and windows, and if the interruption was long enough, he can find himself clicking around trying to figure out just where the hell he was.  I don&#8217;t know about others, but for me, it&#8217;s like being in a horrible accident and not remembering anything before it.  &#8220;Wow, all these open windows&#8230; WTF was I doing here?&#8221;  So after a few minutes spent clicking and looking at what&#8217;s open and where files are scrolled to, I started to get a new idea of what I want to do and where I want to go.</p>
<p>Later on (minutes, hours, weeks), a programmer will begin to find bugs in his application.  While this is normal in the software development lifecycle, some of these bugs will be obvious and cause the programmer to ask himself, &#8220;What he hell was I thinking when I wrote that?&#8221;  Well, whenever that was written, he was probably recovering from an interruption!  Now, typically, mistakes happen when the programmer is stressed, tired, or distracted.  But the really odd, yet obvious mistakes are often a direct side effect of being interrupted while plugged in.</p>
<p>If a interruption lasts for weeks or months, even the faintest traces of thought can be eroded away long before I get back to the project.  Getting started again can be very difficult without some sort of physical note on where I left off.</p>
<p>When someone is plugged in, the only safe way to stop is to find some sort of progress checkpoint at which he can safely terminate some trains of thought and pause the others.  This is the only way to prevent future confusion, inconsistencies, and colossal WTFs.  Sometimes after being plugged in for an extended period of time, we begin to &#8220;awaken&#8221; and realize that, for some reason, we need to stop&#8230; but can&#8217;t right now.  So I continue to work, but now with a heightened sense of urgency like Mario trying reach the flagpole before the clock runs out.  But, eventually, we&#8217;ll reach that moment of <code class="codecolorer bash dawn"><span class="bash"><span style="color: #c20cb9; font-weight: bold;">git push</span> origin</span></code>, and then we can join the rest of reality and relax.  It&#8217;s at this point that something is overdue: sleep, food, or smooching the wife.</p>
<p>Being plugged in is a serious state.  When a programmer is plugged in, he&#8217;s on a roll; don&#8217;t mess with him.</p>
]]></content:encoded>
			<wfw:commentRss>http://mattly.me/ramblings/2011/10/14/define-plugged-in/feed/</wfw:commentRss>
		<slash:comments>2</slash:comments>
		</item>
		<item>
		<title>Goodbye, Steve</title>
		<link>http://mattly.me/news/2011/10/05/goodbye-steve/?utm_source=rss&#038;utm_medium=rss&#038;utm_campaign=goodbye-steve</link>
		<comments>http://mattly.me/news/2011/10/05/goodbye-steve/#comments</comments>
		<pubDate>Thu, 06 Oct 2011 03:03:05 +0000</pubDate>
		<dc:creator>Matthew Clark</dc:creator>
				<category><![CDATA[News]]></category>
		<category><![CDATA[Apple]]></category>
		<category><![CDATA[Death]]></category>
		<category><![CDATA[Steve Jobs]]></category>

		<guid isPermaLink="false">http://mattly.me/?p=1953</guid>
		<description><![CDATA[I still can&#8217;t believe it. He&#8217;s gone &#8212; a legendary business man who created a market for people who were more interested in a product that worked, rather than how it worked. He stepped down from Apple as the CEO only a few weeks ago, and I knew it was because of his un-winnable battle [...]]]></description>
			<content:encoded><![CDATA[<p><a href="http://cdn.mattly.me/wp-content/uploads/steve_jobs_iphone.jpg" rel="fancybox-1953" rel="fancybox" class="local-link"><img src="http://cdn.mattly.me/wp-content/uploads/steve_jobs_thumb.png" alt="" title="Steve Jobs" width="175" height="215" style="float:left; margin:8px;" /></a>  I still can&#8217;t believe it.  He&#8217;s gone &#8212; a legendary business man who created a market for people who were more interested in a product that worked, rather than how it worked.  He stepped down from Apple as the CEO only a few weeks ago, and I knew it was because of his un-winnable battle with pancreatic cancer, but I didn&#8217;t think it would take him so soon.  I&#8217;m still in shock.</p>
<p><a href="http://www.apple.com" class="ext-link" rel="external">Apple&#8217;s website</a> remembers Steve with the following:</p>
<blockquote><p>
Apple has lost a visionary and creative genius, and the world has lost an amazing human being.  Those of us who have been fortunate enough to know and work with Steve have lost a dear friend and an inspiring mentor.  Steve leaves behind a company that only he could have built, and his spirit will forever be the foundation of Apple.
</p></blockquote>
<p>It was one of my secret wishes to meet Steve Jobs.  I guess it was unrealistic, but still, it&#8217;s almost like losing a friend.</p>
]]></content:encoded>
			<wfw:commentRss>http://mattly.me/news/2011/10/05/goodbye-steve/feed/</wfw:commentRss>
		<slash:comments>0</slash:comments>
		</item>
		<item>
		<title>RMagick on Mac OS X: segfault?</title>
		<link>http://mattly.me/snippet/2011/10/02/rmagick-on-mac-os-x-segfault/?utm_source=rss&#038;utm_medium=rss&#038;utm_campaign=rmagick-on-mac-os-x-segfault</link>
		<comments>http://mattly.me/snippet/2011/10/02/rmagick-on-mac-os-x-segfault/#comments</comments>
		<pubDate>Sun, 02 Oct 2011 05:43:08 +0000</pubDate>
		<dc:creator>Matthew Clark</dc:creator>
				<category><![CDATA[Snippets]]></category>
		<category><![CDATA[Mac OS X]]></category>
		<category><![CDATA[Ruby Gems]]></category>
		<category><![CDATA[Ruby on Rails]]></category>

		<guid isPermaLink="false">http://mattly.me/?p=1946</guid>
		<description><![CDATA[Here&#8217;s a quickie for ya. I recently found that using the rmagick gem causes a nasty segmentation fault on my Rails 3.1 development machine, which happens to be a Mac running OS X 10.7 (Lion). I use ImageMagick from MacPorts with Ruby 1.9.2, and here&#8217;s what I had to do to get rmagick working: gem [...]]]></description>
			<content:encoded><![CDATA[<p>Here&#8217;s a quickie for ya.  I recently found that using the <a href="http://rmagick.rubyforge.org/" class="ext-link" rel="external">rmagick</a> gem causes a nasty segmentation fault on my Rails 3.1 development machine, which happens to be a Mac running OS X 10.7 (Lion).  I use ImageMagick from <a href="http://www.macports.org/" class="ext-link" rel="external">MacPorts</a> with Ruby 1.9.2, and here&#8217;s what I had to do to get rmagick working:</p>
<ol>
<li><code class="codecolorer bash dawn"><span class="bash">gem uninstall rmagick</span></code></li>
<li><code class="codecolorer bash dawn"><span class="bash"><span style="color: #c20cb9; font-weight: bold;">sudo</span> port uninstall ImageMagick</span></code></li>
<li><code class="codecolorer bash dawn"><span class="bash"><span style="color: #c20cb9; font-weight: bold;">sudo</span> port edit ImageMagick</span></code></li>
<li>Add <code class="codecolorer bash dawn"><span class="bash"><span style="color: #660033;">--disable-openmp</span></span></code> to the <code class="codecolorer bash dawn"><span class="bash">configure.args</span></code> section</li>
<li><code class="codecolorer bash dawn"><span class="bash"><span style="color: #c20cb9; font-weight: bold;">sudo</span> port <span style="color: #c20cb9; font-weight: bold;">install</span> ImageMagick</span></code></li>
<li><code class="codecolorer bash dawn"><span class="bash">gem <span style="color: #c20cb9; font-weight: bold;">install</span> rmagick</span></code></li>
</ol>
<p>This may also apply to 10.6 (Snow Leopard).</p>
]]></content:encoded>
			<wfw:commentRss>http://mattly.me/snippet/2011/10/02/rmagick-on-mac-os-x-segfault/feed/</wfw:commentRss>
		<slash:comments>0</slash:comments>
		</item>
	</channel>
</rss>

<!-- Performance optimized by W3 Total Cache. Learn more: http://www.w3-edge.com/wordpress-plugins/

Minified using apc
Page Caching using apc
Object Caching 2583/2659 objects using apc
Content Delivery Network via Amazon Web Services: CloudFront: cdn.mattly.me

Served from: mattly.me @ 2012-02-07 10:11:59 -->
