<?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/feed/" rel="self" type="application/rss+xml" />
	<link>http://mattly.me</link>
	<description>vapid ramblings of a Texas geek</description>
	<lastBuildDate>Thu, 03 May 2012 04:25:38 +0000</lastBuildDate>
	<language>en</language>
	<sy:updatePeriod>hourly</sy:updatePeriod>
	<sy:updateFrequency>1</sy:updateFrequency>
	<generator>http://wordpress.org/?v=3.3.2</generator>
		<item>
		<title>It doesn&#8217;t have to be difficult</title>
		<link>http://mattly.me/ramblings/2012/04/13/it-doesnt-have-to-be-difficult/?utm_source=rss&#038;utm_medium=rss&#038;utm_campaign=it-doesnt-have-to-be-difficult</link>
		<comments>http://mattly.me/ramblings/2012/04/13/it-doesnt-have-to-be-difficult/#comments</comments>
		<pubDate>Fri, 13 Apr 2012 23:02:17 +0000</pubDate>
		<dc:creator>Matthew Clark</dc:creator>
				<category><![CDATA[Ramblings]]></category>
		<category><![CDATA[Education]]></category>
		<category><![CDATA[Personal Growth]]></category>
		<category><![CDATA[University of Phoenix]]></category>

		<guid isPermaLink="false">http://mattly.me/?p=2087</guid>
		<description><![CDATA[I&#8217;m nearing the end of my second week of my first class at University of Phoenix, and it is a very trying experience &#8212; for me, anyway. I&#8217;m aware that I don&#8217;t stick with many things to the end, and that&#8217;s a flaw I&#8217;ve been trying to change. Well, that&#8217;s a lie; I haven&#8217;t tried [...]]]></description>
			<content:encoded><![CDATA[<p>I&#8217;m nearing the end of my second week of my first class at University of Phoenix, and it is a very trying experience &#8212; for me, anyway.  I&#8217;m aware that I don&#8217;t stick with many things to the end, and that&#8217;s a flaw I&#8217;ve been trying to change.  Well, that&#8217;s a lie; I haven&#8217;t tried very hard &#8212; I&#8217;m pretty good at finding decent excuses to stop one thing and do something else.  But of all the reasons that went into the decision to start college again, one high on the list was that the education benefits I earned from my time in the military will expire someday, and the clock is ticking loudly.  If I&#8217;m gonna do it, I&#8217;d better just do it already.</p>
<p>This is a commitment that I just HAVE to keep &#8212; I can&#8217;t let this one die off because when the benefit is gone, there won&#8217;t be another opportunity.  My problem isn&#8217;t with keeping a commitment, but rather, whether the commitment is interesting to me at the time.  If it interests me, then I can spend all the time I want and get as deep as I can.  But when something doesn&#8217;t interest me, or if I feel like it&#8217;s a burden, I&#8217;m pretty good at saying &#8220;f&#8217;k it&#8221; and ditching it in favor of something else more interesting.  School falls into the latter, usually.  Sure, there are plenty of interesting subjects, but sometimes my level of interest correlates with times of day and I don&#8217;t get to pick when I have to do schoolwork.</p>
<p>My weapon of choice is usually procrastination, but not in the sense that I&#8217;d rather be watching TV or doing nothing.  Actually, when I get started on something that I&#8217;d rather not be doing, I have a keen habit of veering off into something else more interesting.  And if I&#8217;m at a computer, well, there&#8217;s PLENTY else I can find to do.  Even when I&#8217;m reading, my mind is off thinking about something else completely <em>while I&#8217;m reading</em>.  I eventually catch myself, at which time I have to start my reading all over, and this gets frustrating.</p>
<p>One trick I&#8217;m learning to combat my desire to procrastinate is to try to force myself to just do one little part of the waiting task.  My hope is that by trying to get something small and simple done, that I&#8217;ll trick myself into continuing the work for the rest of the task.  So far, this seems to be working, although I feel that it&#8217;s more like a magician showing himself a card trick.</p>
<p>Just when I feel like I&#8217;m too tired, had a long day, and deserve to just play Sudoku or watch TV, I remind myself, &#8220;You&#8217;re gonna get a bachelor&#8217;s degree.  You are going to accomplish something important.  You are going to open doors.  You&#8217;re going to end the self-disappointment.&#8221;  Sometimes I have to follow that up with &#8220;You don&#8217;t have a choice because <strong>you</strong> will run out of benefits.&#8221;  If the former doesn&#8217;t stoke the flames, the latter usually lights the fire.  </p>
<p>I have to learn a new habit.  I need to get used to the fact that every evening and every weekend is for school and nothing else.  No more HBO marathons.  No more lounging with a game on the iPad just because I&#8217;m not in the office.  I have to do this.  I have to stop thinking of this as &#8220;too hard&#8221; and accept that I really don&#8217;t have anything better to do, no matter how much I might think otherwise.  If I can condition myself to make this EASY for me, then I can look forward to tackling other commitments with greater ease.</p>
]]></content:encoded>
			<wfw:commentRss>http://mattly.me/ramblings/2012/04/13/it-doesnt-have-to-be-difficult/feed/</wfw:commentRss>
		<slash:comments>0</slash:comments>
		</item>
		<item>
		<title>Grub prompt after upgrading Ubuntu 10.04 to 11.04</title>
		<link>http://mattly.me/geeky/2012/04/06/grub-prompt-after-upgrading-ubuntu-10-04-to-11-04/?utm_source=rss&#038;utm_medium=rss&#038;utm_campaign=grub-prompt-after-upgrading-ubuntu-10-04-to-11-04</link>
		<comments>http://mattly.me/geeky/2012/04/06/grub-prompt-after-upgrading-ubuntu-10-04-to-11-04/#comments</comments>
		<pubDate>Fri, 06 Apr 2012 18:46:05 +0000</pubDate>
		<dc:creator>Matthew Clark</dc:creator>
				<category><![CDATA[Geek Stuff]]></category>
		<category><![CDATA[Grub]]></category>
		<category><![CDATA[Linux]]></category>

		<guid isPermaLink="false">http://mattly.me/?p=2077</guid>
		<description><![CDATA[I spent the morning of my day off taking care of some long-overdue server upgrades. All of my Linux servers are running Ubuntu 10.04 LTS, but I decided I&#8217;d like to give them all an upgrade to the latest 11.10 (although 12.04 is due later this month). Of course, this simply meant executing do-release-upgrade a [...]]]></description>
			<content:encoded><![CDATA[<p>I spent the morning of my day off taking care of some long-overdue server upgrades.  All of my Linux servers are running Ubuntu 10.04 LTS, but I decided I&#8217;d like to give them all an upgrade to the latest 11.10 (although 12.04 is due later this month).  Of course, this simply meant executing <code class="codecolorer bash dawn"><span class="bash">do-release-upgrade</span></code> a few times on each server to cause Ubuntu to upgrade through the releases to get to 11.10.  Well, somewhere along that process, servers were booting into the Grub shell, and not Linux!<br />
<span id="more-2077"></span><br />
In order to fix this, you could simply boot from the Ubuntu CD-ROM and mount the file system to repair grub.  But there&#8217;s a way to fix this from the Grub shell you&#8217;re staring at right now!</p>
<div class="codecolorer-container text 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 /></div></td><td><div class="text codecolorer" style="padding:5px;font:normal 12px/1.4em Monaco, Lucida Console, monospace;white-space:nowrap">set root=(hd0,1)<br />
linux /vmlinuz root=/dev/sda ro<br />
initrd /initrd.img<br />
boot</div></td></tr></tbody></table></div>
<p>Make sure you enter appropriate values for <code class="codecolorer text dawn"><span class="text">hd0,1</span></code> and <code class="codecolorer bash dawn"><span class="bash"><span style="color: #000000; font-weight: bold;">/</span>dev<span style="color: #000000; font-weight: bold;">/</span>sda</span></code>.  The last command, <code class="codecolorer text dawn"><span class="text">boot</span></code>, will actually load the kernel, and if you set the correct root, you&#8217;ll be able to log in.</p>
<p>After you log in, you&#8217;ll need to fix grub:</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 />2<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: #c20cb9; font-weight: bold;">sudo</span> grub-install <span style="color: #000000; font-weight: bold;">/</span>dev<span style="color: #000000; font-weight: bold;">/</span>sda<br />
<span style="color: #c20cb9; font-weight: bold;">sudo</span> update-grub</div></td></tr></tbody></table></div>
<p>Again, make sure you specify <code class="codecolorer bash dawn"><span class="bash"><span style="color: #000000; font-weight: bold;">/</span>dev<span style="color: #000000; font-weight: bold;">/</span>sda</span></code> appropriately.  After you complete the two commands above, Grub is now fixed and there&#8217;s nothing else you need to do.  However, just to be sure, you can reboot to make sure Linux boots normally.</p>
]]></content:encoded>
			<wfw:commentRss>http://mattly.me/geeky/2012/04/06/grub-prompt-after-upgrading-ubuntu-10-04-to-11-04/feed/</wfw:commentRss>
		<slash:comments>2</slash:comments>
		</item>
		<item>
		<title>Back to School (again)</title>
		<link>http://mattly.me/news/2012/04/01/back-to-school-again/?utm_source=rss&#038;utm_medium=rss&#038;utm_campaign=back-to-school-again</link>
		<comments>http://mattly.me/news/2012/04/01/back-to-school-again/#comments</comments>
		<pubDate>Mon, 02 Apr 2012 03:30:07 +0000</pubDate>
		<dc:creator>Matthew Clark</dc:creator>
				<category><![CDATA[News]]></category>
		<category><![CDATA[Business]]></category>
		<category><![CDATA[Education]]></category>
		<category><![CDATA[Ener-Tel]]></category>
		<category><![CDATA[Personal Growth]]></category>

		<guid isPermaLink="false">http://mattly.me/?p=2066</guid>
		<description><![CDATA[Today is my last day of freedom&#8230; sort of. At least that&#8217;s how I would have spoken back in middle school. Tomorrow is the first day of my second try at higher learning &#8212; this time for a Bachelor of Science in Business with a concentration is Small Business and Entrepreneurship. Last time I only [...]]]></description>
			<content:encoded><![CDATA[<p>Today is my last day of freedom&#8230; sort of.  At least that&#8217;s how I would have spoken back in middle school.  Tomorrow is the first day of my second try at higher learning &#8212; this time for a Bachelor of Science in Business with a concentration is Small Business and Entrepreneurship.  Last time I only made it past a few semesters (Bachelor of Science in Biology with a concentration in Chemistry, pre-med), and I barely squeaked by (which I blame on a demanding job and shortage of time).  Actually, tomorrow isn&#8217;t really my first day of this whole journey, as I have already completed a 3-day new-student workshop, not to mention the previous month&#8217;s worth of filling out VA benefit forms, faxing, applying, signing, and all that.  But tomorrow is my first day of my first class with the <a href="http://www.phoenix.edu/" class="ext-link" rel="external">University of Phoenix</a>.</p>
<p>Up to this point, I have already earned 59 hours from various sources, and I&#8217;m happy to have learned that almost all of them will transfer.  I am only a few classes away from completing the basics, which means  I should be starting the upper-level courses before the end of the year.  I hope to have this degree finished with two and a half years.</p>
<p>I chose University of Phoenix because, of the choices, they seemed to be the institution best suited for people with a life.  I can earn my degree 100% online, and from an accredited university.  They were also the most expensive of the few I really looked into, but I&#8217;ve got some VA benefits left, so I should be okay.</p>
<p>Why a business degree?  Some people with whom I&#8217;ve shared this news directly have asked me &#8220;Why not just finish a computer science degree?&#8221;  Good question.  Well, I have some deep reasons which I am not comfortable sharing publicly (weird, eh?), but I will say something about it.  Yes, computer science might be easier, and possibly quicker given my current amount of credit, but that&#8217;s not the point.</p>
<p>In my position with Ener-Tel, I have the pleasure to do more than just write software.  I get to spend time with the big cheese talking about new ideas, ways to expand, and new markets.  I get to exercise the Entrepreneur inside me by tossing wild &#8220;what-ifs&#8221; through the air, and sometimes, the Technician inside me gets to take a what-if and dig up all the technical details possible, often more than the big cheese can handle.  But when the big cheese says &#8220;I don&#8217;t even know how we would get into that market, the expression he gets to decode from my face is one of pure astonishment.  </p>
<p>I can play the what-if game with the best, I think, and I just love researching an idea.  But when it comes to business, I haven&#8217;t a clue how to even participate in such discussion.  I see a dent in my professional circle, which keeps me from being a well-rounded employee who has plenty of opportunity to help my company grow.  So, because I know very little about business (and the dynamics of a small business, at that), I have become interested in the unknown.  Thus, I think the best value for my studies would be in business and not in something within which I&#8217;m already more than adept.  So, this mostly amounts to personal growth.</p>
<p>I&#8217;m really looking forward to this educational experience.  My coursework is full-time, with classes being about five weeks long and divided into one-week sections.  Each section starts on a Tuesday and ends on the following Monday, and from my new-student workshop, it appears very simple.  The course syllabi is very up-front, materials easy-to-find (complete with downloaded eBooks!), and participation is entirely within an online forum.</p>
<p>So, every five weeks, ol&#8217; Matty-poo should be earning another three credits.  My advisor suggested taking three classes, then a break to reduce burn-out.  Sounds good.  Anyway, here goes!</p>
]]></content:encoded>
			<wfw:commentRss>http://mattly.me/news/2012/04/01/back-to-school-again/feed/</wfw:commentRss>
		<slash:comments>0</slash:comments>
		</item>
		<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>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>
	</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 2462/2580 objects using apc
Content Delivery Network via Amazon Web Services: CloudFront: cdn.mattly.me

Served from: mattly.me @ 2012-05-20 23:54:14 -->
