<?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>Wylie</title>
	<atom:link href="http://www.wyliethomas.com/blog/feed/" rel="self" type="application/rss+xml" />
	<link>http://www.wyliethomas.com/blog</link>
	<description>web consultant.developer.angler</description>
	<lastBuildDate>Sat, 03 Jul 2010 23:45:58 +0000</lastBuildDate>
	<generator>http://wordpress.org/?v=2.8.4</generator>
	<language>en</language>
	<sy:updatePeriod>hourly</sy:updatePeriod>
	<sy:updateFrequency>1</sy:updateFrequency>
			<item>
		<title>Setting up a new dev environment</title>
		<link>http://www.wyliethomas.com/blog/2010/07/02/setting-up-a-new-dev-environment/</link>
		<comments>http://www.wyliethomas.com/blog/2010/07/02/setting-up-a-new-dev-environment/#comments</comments>
		<pubDate>Sat, 03 Jul 2010 05:40:58 +0000</pubDate>
		<dc:creator>admin</dc:creator>
				<category><![CDATA[Web Development]]></category>

		<guid isPermaLink="false">http://www.wyliethomas.com/blog/?p=139</guid>
		<description><![CDATA[There are so many things i forget when setting up a new workstation. This time I took notes so I wont forget.
After installing VMWare fusion3 on my macbook pro I download the latest Ubuntu iso and start a new VM with it. I keep my work on TrueCrypt partitions. Then work my way down this [...]]]></description>
			<content:encoded><![CDATA[<p>There are so many things i forget when setting up a new workstation. This time I took notes so I wont forget.</p>
<p>After installing VMWare fusion3 on my macbook pro I download the latest Ubuntu iso and start a new VM with it. I keep my work on TrueCrypt partitions. Then work my way down this list.</p>
<p><strong>For starters</strong></p>
<div class="dean_ch" style="white-space: wrap;">
<ol>
<li class="li1">
<div class="de1">sudo apt-get install git-core gitk git-gui</div>
</li>
<li class="li1">
<div class="de1">sudo apt-get install subversion</div>
</li>
<li class="li1">
<div class="de1">sudo apt-get install ssh-client</div>
</li>
<li class="li1">
<div class="de1">sudo apt-get install ssh-server</div>
</li>
<li class="li2">
<div class="de2">sudo apt-get install vim</div>
</li>
<li class="li1">
<div class="de1">sudo apt-get install rake</div>
</li>
<li class="li1">
<div class="de1">sudo apt-get install libxml2-dev</div>
</li>
</ol>
</div>
<p>Then install sphinx<br />
http://freelancing-god.github.com/ts/en/installing_sphinx.html<br />
./configure, make, sudo make install</p>
<p><strong>VMWare Tools</strong><br />
Turn off shared folders (i always get failures when i dont)<br />
From the virtual machine menu, select install VMTools. Open the virtual DVD and put the zip file on the desktop and extract it there.<br />
From a terminal cd Desktop/vmware&#8230;<br />
Then sudo ./vmware-tools-install.pl<br />
Enter key for all the defaults. Then run the networking stop and start commands at the end of the instructions.</p>
<p><strong>Install Ruby</strong></p>
<div class="dean_ch" style="white-space: wrap;">
<ol>
<li class="li1">
<div class="de1">sudo apt-get install ruby-full build-essential</div>
</li>
</ol>
</div>
<p>or</p>
<div class="dean_ch" style="white-space: wrap;">
<ol>
<li class="li1">
<div class="de1">sudo aptitude install ruby build-essential libopenssl-ruby ruby1<span class="nu0">.8</span>-dev</div>
</li>
</ol>
</div>
<p><strong>Install Apache</strong></p>
<div class="dean_ch" style="white-space: wrap;">
<ol>
<li class="li1">
<div class="de1">sudo apt-get install apache2 apache2-mpm-prefork apache2-prefork-dev</div>
</li>
</ol>
</div>
<p><strong>Install Ruby Gems</strong></p>
<div class="dean_ch" style="white-space: wrap;">
<ol>
<li class="li1">
<div class="de1">sudo apt-get install rubygems</div>
</li>
<li class="li1">
<div class="de1">export PATH=/var/lib/gems/<span class="nu0">1.8</span>/bin:$PATH</div>
</li>
</ol>
</div>
<p><strong>Install Rails</strong></p>
<div class="dean_ch" style="white-space: wrap;">
<ol>
<li class="li1">
<div class="de1">sudo gem install rails</div>
</li>
</ol>
</div>
<p><strong>Install MySQL</strong></p>
<div class="dean_ch" style="white-space: wrap;">
<ol>
<li class="li1">
<div class="de1">sudo apt-get install mysql-server mysql-client</div>
</li>
<li class="li1">
<div class="de1">sudo apt-get install libmysql-ruby libmysqlclient-dev</div>
</li>
<li class="li1">
<div class="de1">sudo gem install mysql</div>
</li>
</ol>
</div>
<p><strong>Install Passenger</strong></p>
<div class="dean_ch" style="white-space: wrap;">
<ol>
<li class="li1">
<div class="de1">sudo gem install passenger</div>
</li>
<li class="li1">
<div class="de1">sudo apt-get install apache2-threaded-dev libapr1-dev libaprutil1-dev</div>
</li>
<li class="li1">
<div class="de1">sudo /var/lib/gems/<span class="nu0">1.8</span>/bin/passenger-install-apache2-<span class="kw1">module</span></div>
</li>
</ol>
</div>
<p>[follow passenger instructions]</p>
<p><strong>VMWare Network connections</strong><br />
Since FF is the default browser you need to make a small change to browse the web.<br />
Open FF and put about:config in the URL. Then filter for ipv6 and set false to true and restart FF. You should be online.</p>
<p><strong>Shared Folders</strong><br />
Use TrueCrypt to keep your work on and share /Volumes/[your TC Drive] with VMWare. You will need to shift+apple+g to get the got to folder dialogue to find /Volumes.<br />
You can access the files in your VM here<br />
/mnt/hgfs</p>
<p><strong>Install Gems</strong><br />
[what ever gems you need ]</p>
<p><strong>Configure Apache</strong><br />
(Sill on your VM)</p>
<div class="dean_ch" style="white-space: wrap;">
<ol>
<li class="li1">
<div class="de1">mkdir ~/rails_development</div>
</li>
<li class="li1">
<div class="de1">cd ~/rails_development</div>
</li>
<li class="li1">
<div class="de1">ln -s /mnt/hgfs/<span class="br0">&#91;</span>your drive<span class="br0">&#93;</span>/myapp myapp</div>
</li>
</ol>
</div>
<p>Now cd to /etc/apachec2/sites-available and sudo scp 000-default myapp<br />
then sudo vim myapp</p>
<div class="dean_ch" style="white-space: wrap;">
<ol>
<li class="li1">
<div class="de1">&nbsp;</div>
</li>
<li class="li1">
<div class="de1">&lt;VirtualHost *:<span class="nu0">80</span>&gt;</div>
</li>
<li class="li1">
<div class="de1">&nbsp; &nbsp; &nbsp;ServerName myapp.<span class="me1">ubuntu</span></div>
</li>
<li class="li1">
<div class="de1">&nbsp; &nbsp; &nbsp;RailsEnv development</div>
</li>
<li class="li2">
<div class="de2">&nbsp; &nbsp; &nbsp;DocumentRoot /home/wylie/rails_development/myapp/public</div>
</li>
<li class="li1">
<div class="de1">&nbsp; &nbsp; &nbsp;&lt;Directory /home/wylie/rails_development/myapp/public&gt;</div>
</li>
<li class="li1">
<div class="de1">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; AllowOverride all &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;</div>
</li>
<li class="li1">
<div class="de1">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; Options -MultiViews</div>
</li>
<li class="li1">
<div class="de1">&nbsp; &nbsp; &nbsp;&lt;/Directory&gt;</div>
</li>
<li class="li2">
<div class="de2">&lt;/VirtualHost&gt;</div>
</li>
<li class="li1">
<div class="de1">&nbsp;</div>
</li>
</ol>
</div>
<p>Then cd ../sites-enabled<br />
and sudo ln -s ../sites-available/myapp<br />
then sudo rm 000-default<br />
Finally restart apache</p>
<p><strong>Set your hostfile</strong><br />
(Back on OS X)<br />
get the IP in your VM and edit your hosts file on OS X<br />
sudo vim /etc/hosts<br />
[ip of VM] myapp.ubuntu<br />
then run dscacheutil -flushcache (i usually have to run this a few times for it to take)</p>
<p><strong>Install the DB</strong><br />
create any databases you need for your apps</p>
<p><strong>Dont&#8217; forget the memcached</strong></p>
<div class="dean_ch" style="white-space: wrap;">
<ol>
<li class="li1">
<div class="de1">sudo apt-get install memcached</div>
</li>
<li class="li1">
<div class="de1">sudo /etc/init.<span class="me1">d</span>/memcached restart</div>
</li>
</ol>
</div>
<p><strong>Fire it up</strong><br />
open your browser and go to myapp.ubuntu</p>
<p><strong>Permission fixes</strong><br />
if you put id in the command line in your VM you will see that UID is 1000. The problem is that VMWare puts you in as UID 501 and GID 20. We need to update Ubuntu to match<br />
sudo vim /etc/passwd<br />
Then find your user and change 1000:1000 to 501:20, save and exit<br />
You wont be able to make any more changes so you need to reboot. You cant log in either so you need to Ctrl + Alt + f1 to switch to terminal. Login there.<br />
Then, you need to cd  to /home and change the permissions on everything in your user dir like this<br />
sudo chown -R 501:20 wylie<br />
Then you need to update the group file sudo vim /etc/group<br />
find dialup and change that to wylie [your username]. Then you need to find your username and change 1000 to 20.<br />
sudo reboot, login and permissions are now fixed. Its a good idea to update your apache in /etc/apache2/envars. Change www-data to your username in both places</p>
<p><strong>Git GUI fixes</strong><br />
The text in the UI is huge so you can open synaptic package manage and search for tcl. mark the 8.5 version for install. Then search for the tk8.5 and mark that for instalation. Then in command line<br />
sudo update-alternatives &#8211;config wish<br />
select the option with 8.5. It should be number 3.<br />
Now when you open git gui it should look normal </p>
<p>Now get to work&#8230;</p>
]]></content:encoded>
			<wfw:commentRss>http://www.wyliethomas.com/blog/2010/07/02/setting-up-a-new-dev-environment/feed/</wfw:commentRss>
		<slash:comments>0</slash:comments>
		</item>
		<item>
		<title>Regular Expression Tools</title>
		<link>http://www.wyliethomas.com/blog/2010/06/25/regular-expression-tools/</link>
		<comments>http://www.wyliethomas.com/blog/2010/06/25/regular-expression-tools/#comments</comments>
		<pubDate>Fri, 25 Jun 2010 07:51:06 +0000</pubDate>
		<dc:creator>admin</dc:creator>
				<category><![CDATA[Web Development]]></category>
		<category><![CDATA[Regular Expressions]]></category>

		<guid isPermaLink="false">http://www.wyliethomas.com/blog/?p=135</guid>
		<description><![CDATA[A friend shared a RegEx tool that came in really handy. Its www.rubular.com. I dont&#8217;t get alot of opportunities to work with regex but when i do, having a new tool can make it almost fun.
I came up with this expression to match various URL&#8217;s that users enter that i could create new links from.



&#40;&#40;&#40;https?&#41;:\/\/&#41;?&#40;&#40;&#91;0-9a-zA-Z&#93;&#91;-\w&#93;*\.&#41;+&#91;a-zA-Z&#93;&#123;2,9&#125;&#40;:\d&#123;1,4&#125;&#41;?&#40;&#91;-\w\/#~.?=&#38;%@~])*))



Looks [...]]]></description>
			<content:encoded><![CDATA[<p>A friend shared a RegEx tool that came in really handy. Its www.rubular.com. I dont&#8217;t get alot of opportunities to work with regex but when i do, having a new tool can make it almost fun.</p>
<p>I came up with this expression to match various URL&#8217;s that users enter that i could create new links from.</p>
<div class="dean_ch" style="white-space: wrap;">
<ol>
<li class="li1">
<div class="de1"><span class="br0">&#40;</span><span class="br0">&#40;</span><span class="br0">&#40;</span>https?<span class="br0">&#41;</span>:\/\/<span class="br0">&#41;</span>?<span class="br0">&#40;</span><span class="br0">&#40;</span><span class="br0">&#91;</span><span class="nu0">0</span>-9a-zA-Z<span class="br0">&#93;</span><span class="br0">&#91;</span>-\w<span class="br0">&#93;</span>*\.<span class="br0">&#41;</span>+<span class="br0">&#91;</span>a-zA-Z<span class="br0">&#93;</span><span class="br0">&#123;</span><span class="nu0">2</span>,<span class="nu0">9</span><span class="br0">&#125;</span><span class="br0">&#40;</span>:\d<span class="br0">&#123;</span><span class="nu0">1</span>,<span class="nu0">4</span><span class="br0">&#125;</span><span class="br0">&#41;</span>?<span class="br0">&#40;</span><span class="br0">&#91;</span>-\w\/<span class="co1">#~.?=&amp;%@~])*))</span></div>
</li>
</ol>
</div>
<p>Looks like cartoon swearing.</p>
]]></content:encoded>
			<wfw:commentRss>http://www.wyliethomas.com/blog/2010/06/25/regular-expression-tools/feed/</wfw:commentRss>
		<slash:comments>0</slash:comments>
		</item>
		<item>
		<title>color scheme tool</title>
		<link>http://www.wyliethomas.com/blog/2010/03/30/color-scheme-tool/</link>
		<comments>http://www.wyliethomas.com/blog/2010/03/30/color-scheme-tool/#comments</comments>
		<pubDate>Tue, 30 Mar 2010 15:30:53 +0000</pubDate>
		<dc:creator>admin</dc:creator>
				<category><![CDATA[Web Development]]></category>

		<guid isPermaLink="false">http://www.wyliethomas.com/blog/?p=127</guid>
		<description><![CDATA[How did I get this far without a tool like this?
A friend sent this link to me and I wanted to be sure that I never lost it.
http://colorschemedesigner.com/
]]></description>
			<content:encoded><![CDATA[<p>How did I get this far without a tool like this?<br />
A friend sent this link to me and I wanted to be sure that I never lost it.<br />
http://colorschemedesigner.com/</p>
]]></content:encoded>
			<wfw:commentRss>http://www.wyliethomas.com/blog/2010/03/30/color-scheme-tool/feed/</wfw:commentRss>
		<slash:comments>2</slash:comments>
		</item>
		<item>
		<title>jQuery Emoticon Selector Plugin</title>
		<link>http://www.wyliethomas.com/blog/2010/03/02/jquery-emoticon-selector-plugin/</link>
		<comments>http://www.wyliethomas.com/blog/2010/03/02/jquery-emoticon-selector-plugin/#comments</comments>
		<pubDate>Tue, 02 Mar 2010 23:15:34 +0000</pubDate>
		<dc:creator>admin</dc:creator>
				<category><![CDATA[Ruby on Rails]]></category>
		<category><![CDATA[Web Development]]></category>
		<category><![CDATA[jQuery]]></category>
		<category><![CDATA[emoticon]]></category>
		<category><![CDATA[javascript]]></category>

		<guid isPermaLink="false">http://www.wyliethomas.com/blog/?p=117</guid>
		<description><![CDATA[I couldn&#8217;t find an emoticon plugin for inserting an emoticon into a text area. I found plenty that converted the emoticon code into an image. So, I set out to write my first jQuery plugin.
If you choose to use this, keep in mind this was my first plugin and should be thoroughly tested before using [...]]]></description>
			<content:encoded><![CDATA[<p>I couldn&#8217;t find an emoticon plugin for inserting an emoticon into a text area. I found plenty that converted the emoticon code into an image. So, I set out to write my first jQuery plugin.</p>
<p>If you choose to use this, keep in mind this was my first plugin and should be thoroughly tested before using it. And if you make it better I would very much like to see what changes you made.</p>
<p>Lets check it out. </p>
<p>The view has two components. The jQuery call and the div with the necessary elements. (my examples are how i used this in Ruby)</p>
<div class="dean_ch" style="white-space: wrap;">
<ol>
<li class="li1">
<div class="de1">&nbsp;</div>
</li>
<li class="li1">
<div class="de1">&lt;% javascript_tag <span class="kw1">do</span> %&gt;</div>
</li>
<li class="li1">
<div class="de1">&nbsp; $<span class="br0">&#40;</span>document<span class="br0">&#41;</span>.<span class="me1">ready</span><span class="br0">&#40;</span>function<span class="br0">&#40;</span><span class="br0">&#41;</span> <span class="br0">&#123;</span></div>
</li>
<li class="li1">
<div class="de1">&nbsp; &nbsp; $<span class="br0">&#40;</span><span class="st0">&quot;div#emodiv&quot;</span><span class="br0">&#41;</span>.<span class="me1">emoticate</span><span class="br0">&#40;</span><span class="br0">&#123;</span>icon: <span class="st0">&#8217;smiley-icon&#8217;</span>, replacediv: <span class="st0">&#8216;list&#8217;</span><span class="br0">&#125;</span><span class="br0">&#41;</span>;</div>
</li>
<li class="li2">
<div class="de2">&nbsp; <span class="br0">&#125;</span><span class="br0">&#41;</span>;</div>
</li>
<li class="li1">
<div class="de1">&lt;% <span class="kw1">end</span> %&gt;</div>
</li>
<li class="li1">
<div class="de1">&nbsp;</div>
</li>
</ol>
</div>
<p>Then the div that you identified in the jQuery call.</p>
<div class="dean_ch" style="white-space: wrap;">
<ol>
<li class="li1">
<div class="de1">&nbsp;</div>
</li>
<li class="li1">
<div class="de1">&lt;div id=&quot;emodiv&quot;&gt;
</div>
</li>
<li class="li1">
<div class="de1">&nbsp; &lt;img src=&quot;/images/emoticons/emoticon-0100-smile.png&quot; id=&quot;smiley-icon&quot;&gt;
</div>
</li>
<li class="li1">
<div class="de1">&nbsp; &lt;div id=&quot;list&quot;&gt; &lt;/div&gt;
</div>
</li>
<li class="li2">
<div class="de2">&nbsp; &lt;select name=&quot;emoticons&quot;&gt;
</div>
</li>
<li class="li1">
<div class="de1">&nbsp; &nbsp; &lt;option value=&quot;:)&quot;&gt;emoticon-0100-smile.png&lt;/option&gt;
</div>
</li>
<li class="li1">
<div class="de1">&nbsp; &nbsp; &lt;option value=&quot;|-(&quot;&gt;emoticon-0106-crying.png&lt;/option&gt;
</div>
</li>
<li class="li1">
<div class="de1">&nbsp; &nbsp; &lt;option value=&quot;;)&quot;&gt;emoticon-0105-wink.png&lt;/option&gt;
</div>
</li>
<li class="li1">
<div class="de1">&nbsp; &nbsp; &lt;option value=&quot;:(&quot;&gt;emoticon-0106-crying.png&lt;/option&gt;
</div>
</li>
<li class="li2">
<div class="de2">&nbsp; &nbsp; &lt;option value=&quot;(pt)&quot;&gt;279.png&lt;/option&gt;
</div>
</li>
<li class="li1">
<div class="de1">&nbsp; &nbsp; &lt;option value=&quot;(ct)&quot;&gt;104.png&lt;/option&gt;
</div>
</li>
<li class="li1">
<div class="de1">&nbsp; &nbsp; &lt;option value=&quot;(au)&quot;&gt;342.png&lt;/option&gt;
</div>
</li>
<li class="li1">
<div class="de1">&nbsp; &nbsp; &lt;option value=&quot;(eg)&quot;&gt;emoticon-0116-evilgrin.png&lt;/option&gt;
</div>
</li>
<li class="li1">
<div class="de1">&nbsp; &nbsp; &lt;option value=&quot;:*&quot;&gt;emoticon-0109-kiss.png&lt;/option&gt;
</div>
</li>
<li class="li2">
<div class="de2">&nbsp; &lt;/select&gt;
</div>
</li>
<li class="li1">
<div class="de1">&lt;div style=&quot;clear: both;&quot;&gt;&lt;/div&gt;
</div>
</li>
<li class="li1">
<div class="de1">&lt;p&gt;
</div>
</li>
<li class="li1">
<div class="de1">&nbsp; &lt;textarea id=&quot;comment_1&quot;&gt;&lt;/textarea&gt;
</div>
</li>
<li class="li1">
<div class="de1">&lt;/p&gt;
</div>
</li>
<li class="li2">
<div class="de2">&lt;/div&gt;
</div>
</li>
<li class="li1">
<div class="de1">&nbsp;</div>
</li>
</ol>
</div>
<p>What is going to happen is that the select and options will be changed to a UL list with the icon images. When an emoticon is clicked it will be inserted into the text area within the div. (The id for the textarea does need to be unique).</p>
<p>And here is the plugin. </p>
<div class="dean_ch" style="white-space: wrap;">
<ol>
<li class="li1">
<div class="de1">&nbsp;</div>
</li>
<li class="li1">
<div class="de1"><span class="br0">&#40;</span><span class="kw2">function</span><span class="br0">&#40;</span>$<span class="br0">&#41;</span><span class="br0">&#123;</span></div>
</li>
<li class="li1">
<div class="de1">&nbsp;</div>
</li>
<li class="li1">
<div class="de1">&nbsp; $.<span class="me1">fn</span>.<span class="me1">emoticate</span> = <span class="kw2">function</span><span class="br0">&#40;</span>options<span class="br0">&#41;</span><span class="br0">&#123;</span></div>
</li>
<li class="li2">
<div class="de2">&nbsp;</div>
</li>
<li class="li1">
<div class="de1">&nbsp; &nbsp; <span class="kw2">var</span> defaults = <span class="br0">&#40;</span><span class="br0">&#123;</span></div>
</li>
<li class="li1">
<div class="de1">&nbsp; &nbsp; &nbsp; replacediv: &nbsp; <span class="st0">&#8216;replaceme&#8217;</span>, </div>
</li>
<li class="li1">
<div class="de1">&nbsp; &nbsp; &nbsp; image_path: &nbsp; <span class="st0">&#8216;/images/emoticons/&#8217;</span>, </div>
</li>
<li class="li1">
<div class="de1">&nbsp; &nbsp; &nbsp; speed: &nbsp; &nbsp; &nbsp; &nbsp;<span class="nu0">500</span>, </div>
</li>
<li class="li2">
<div class="de2">&nbsp; &nbsp; &nbsp; icon: &nbsp; &nbsp; &nbsp; &nbsp; <span class="st0">&#8217;smiley&#8217;</span></div>
</li>
<li class="li1">
<div class="de1">&nbsp; &nbsp; <span class="br0">&#125;</span><span class="br0">&#41;</span>;</div>
</li>
<li class="li1">
<div class="de1">&nbsp; &nbsp; <span class="kw2">var</span> options = $.<span class="me1">extend</span><span class="br0">&#40;</span>defaults, options<span class="br0">&#41;</span>;</div>
</li>
<li class="li1">
<div class="de1">&nbsp;</div>
</li>
<li class="li1">
<div class="de1">&nbsp; &nbsp; <span class="kw1">return</span> <span class="kw1">this</span>.<span class="me1">each</span><span class="br0">&#40;</span><span class="kw2">function</span><span class="br0">&#40;</span><span class="br0">&#41;</span> <span class="br0">&#123;</span></div>
</li>
<li class="li2">
<div class="de2">&nbsp; &nbsp; &nbsp; <span class="kw2">var</span> select = $<span class="br0">&#40;</span><span class="st0">&#8217;select&#8217;</span>, <span class="kw1">this</span><span class="br0">&#41;</span>;</div>
</li>
<li class="li1">
<div class="de1">&nbsp; &nbsp; &nbsp; <span class="kw2">var</span> area = $<span class="br0">&#40;</span><span class="st0">&#8216;textarea&#8217;</span>, <span class="kw1">this</span><span class="br0">&#41;</span>;</div>
</li>
<li class="li1">
<div class="de1">&nbsp; &nbsp; &nbsp; <span class="kw2">var</span> icon = $<span class="br0">&#40;</span><span class="st0">&quot;#&quot;</span> + defaults.<span class="me1">icon</span>, <span class="kw1">this</span><span class="br0">&#41;</span>;</div>
</li>
<li class="li1">
<div class="de1">&nbsp;</div>
</li>
<li class="li1">
<div class="de1">&nbsp; &nbsp; &nbsp; <span class="kw2">var</span> emo =<span class="st0">&#8216;&lt;div class=&quot;emoticon-box&quot;&gt;&lt;ul&gt;&#8217;</span>;</div>
</li>
<li class="li2">
<div class="de2">&nbsp; &nbsp; &nbsp; $<span class="br0">&#40;</span><span class="st0">&#8216;option&#8217;</span>, select<span class="br0">&#41;</span>.<span class="me1">each</span><span class="br0">&#40;</span><span class="kw2">function</span> <span class="br0">&#40;</span><span class="br0">&#41;</span> <span class="br0">&#123;</span></div>
</li>
<li class="li1">
<div class="de1">&nbsp; &nbsp; &nbsp; &nbsp; <span class="kw2">var</span> option &nbsp; &nbsp;= $<span class="br0">&#40;</span><span class="kw1">this</span><span class="br0">&#41;</span>;</div>
</li>
<li class="li1">
<div class="de1">&nbsp; &nbsp; &nbsp; &nbsp; <span class="kw2">var</span> emocode &nbsp; &nbsp; &nbsp; &nbsp;= option.<span class="me1">val</span><span class="br0">&#40;</span><span class="br0">&#41;</span>;</div>
</li>
<li class="li1">
<div class="de1">&nbsp; &nbsp; &nbsp; &nbsp; <span class="kw2">var</span> title &nbsp; &nbsp;= option.<span class="me1">text</span><span class="br0">&#40;</span><span class="br0">&#41;</span>;</div>
</li>
<li class="li1">
<div class="de1">&nbsp; &nbsp; &nbsp; &nbsp; <span class="kw2">var</span> link = $.<span class="me1">fn</span>.<span class="me1">emoticate</span>.<span class="me1">emoticlick</span><span class="br0">&#40;</span>title, emocode, defaults.<span class="me1">image_path</span><span class="br0">&#41;</span>;</div>
</li>
<li class="li2">
<div class="de2">&nbsp;</div>
</li>
<li class="li1">
<div class="de1">&nbsp; &nbsp; &nbsp; &nbsp; emo += <span class="st0">&#8216;&lt;li&gt;&#8217;</span></div>
</li>
<li class="li1">
<div class="de1">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; + link</div>
</li>
<li class="li1">
<div class="de1">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; + <span class="st0">&#8216;&lt;/li&gt;&#8217;</span>;</div>
</li>
<li class="li1">
<div class="de1">&nbsp; &nbsp; &nbsp; <span class="br0">&#125;</span><span class="br0">&#41;</span>; <span class="co1">//end option</span></div>
</li>
<li class="li2">
<div class="de2">&nbsp; &nbsp; &nbsp; emo += <span class="st0">&#8216;&lt;/ul&gt;&lt;/div&gt;&#8217;</span>;</div>
</li>
<li class="li1">
<div class="de1">&nbsp;</div>
</li>
<li class="li1">
<div class="de1">&nbsp; &nbsp; &nbsp; select.<span class="me1">remove</span><span class="br0">&#40;</span><span class="br0">&#41;</span>; <span class="co1">//get rid of the select to make way for emotification</span></div>
</li>
<li class="li1">
<div class="de1">&nbsp; &nbsp; &nbsp; $<span class="br0">&#40;</span><span class="st0">&quot;#&quot;</span> + defaults.<span class="me1">replacediv</span>, <span class="kw1">this</span><span class="br0">&#41;</span>.<span class="me1">html</span><span class="br0">&#40;</span>emo<span class="br0">&#41;</span>; <span class="co1">//put the emotification HTML in the right div</span></div>
</li>
<li class="li1">
<div class="de1">&nbsp; &nbsp; &nbsp; $<span class="br0">&#40;</span><span class="st0">&quot;#&quot;</span> + defaults.<span class="me1">replacediv</span>, <span class="kw1">this</span><span class="br0">&#41;</span>.<span class="me1">hide</span><span class="br0">&#40;</span><span class="br0">&#41;</span>; <span class="co1">//hide the emoticons</span></div>
</li>
<li class="li2">
<div class="de2">&nbsp; &nbsp; &nbsp; </div>
</li>
<li class="li1">
<div class="de1">&nbsp; &nbsp; &nbsp; <span class="kw2">var</span> listdiv = $<span class="br0">&#40;</span><span class="st0">&quot;#&quot;</span> + defaults.<span class="me1">replacediv</span>, <span class="kw1">this</span><span class="br0">&#41;</span>; <span class="co1">//reset the var so it will work in the icon click.. this probably could be done better</span></div>
</li>
<li class="li1">
<div class="de1">&nbsp;</div>
</li>
<li class="li1">
<div class="de1">&nbsp; &nbsp; &nbsp; <span class="co1">//bind the link for every a tag that is in the replaced div</span></div>
</li>
<li class="li1">
<div class="de1">&nbsp; &nbsp; &nbsp; $<span class="br0">&#40;</span><span class="st0">&#8216;a&#8217;</span>, <span class="kw1">this</span><span class="br0">&#41;</span>.<span class="me1">bind</span><span class="br0">&#40;</span><span class="st0">&#8216;click&#8217;</span>, <span class="kw2">function</span><span class="br0">&#40;</span><span class="br0">&#41;</span> <span class="br0">&#123;</span></div>
</li>
<li class="li2">
<div class="de2">&nbsp; &nbsp; &nbsp; &nbsp; $.<span class="me1">fn</span>.<span class="me1">emoticate</span>.<span class="me1">insertme</span><span class="br0">&#40;</span>area.<span class="me1">attr</span><span class="br0">&#40;</span><span class="st0">&#8216;id&#8217;</span><span class="br0">&#41;</span>, $<span class="br0">&#40;</span><span class="kw1">this</span><span class="br0">&#41;</span>.<span class="me1">attr</span><span class="br0">&#40;</span><span class="st0">&#8216;id&#8217;</span><span class="br0">&#41;</span><span class="br0">&#41;</span>;</div>
</li>
<li class="li1">
<div class="de1">&nbsp; &nbsp; &nbsp; &nbsp; <span class="kw1">return</span> <span class="kw2">false</span>;</div>
</li>
<li class="li1">
<div class="de1">&nbsp; &nbsp; &nbsp; <span class="br0">&#125;</span><span class="br0">&#41;</span>; <span class="co1">//end bind</span></div>
</li>
<li class="li1">
<div class="de1">&nbsp;</div>
</li>
<li class="li1">
<div class="de1">&nbsp; &nbsp; &nbsp; <span class="co1">//click the icon</span></div>
</li>
<li class="li2">
<div class="de2">&nbsp; &nbsp; &nbsp; $<span class="br0">&#40;</span>icon, <span class="kw1">this</span><span class="br0">&#41;</span>.<span class="me1">bind</span><span class="br0">&#40;</span><span class="st0">&#8216;click&#8217;</span>, <span class="kw2">function</span> <span class="br0">&#40;</span><span class="br0">&#41;</span><span class="br0">&#123;</span></div>
</li>
<li class="li1">
<div class="de1">&nbsp; &nbsp; &nbsp; &nbsp; listdiv.<span class="me1">show</span><span class="br0">&#40;</span>defaults.<span class="me1">speed</span><span class="br0">&#41;</span>;</div>
</li>
<li class="li1">
<div class="de1">&nbsp; &nbsp; &nbsp; <span class="br0">&#125;</span><span class="br0">&#41;</span>;</div>
</li>
<li class="li1">
<div class="de1">&nbsp;</div>
</li>
<li class="li1">
<div class="de1">&nbsp; &nbsp; &nbsp; <span class="co1">//function to click anywhere to hide the emoticons</span></div>
</li>
<li class="li2">
<div class="de2">&nbsp; &nbsp; &nbsp; $<span class="br0">&#40;</span>document.<span class="me1">body</span><span class="br0">&#41;</span>click<span class="br0">&#40;</span><span class="kw2">function</span> <span class="br0">&#40;</span><span class="br0">&#41;</span><span class="br0">&#123;</span></div>
</li>
<li class="li1">
<div class="de1">&nbsp; &nbsp; &nbsp; &nbsp; listdiv.<span class="me1">hide</span><span class="br0">&#40;</span>defaults.<span class="me1">speed</span><span class="br0">&#41;</span>;</div>
</li>
<li class="li1">
<div class="de1">&nbsp; &nbsp; &nbsp; <span class="br0">&#125;</span><span class="br0">&#41;</span>;</div>
</li>
<li class="li1">
<div class="de1">&nbsp;</div>
</li>
<li class="li1">
<div class="de1">&nbsp;</div>
</li>
<li class="li2">
<div class="de2">&nbsp; &nbsp; <span class="br0">&#125;</span><span class="br0">&#41;</span>; <span class="co1">//end select</span></div>
</li>
<li class="li1">
<div class="de1">&nbsp;</div>
</li>
<li class="li1">
<div class="de1">&nbsp; <span class="br0">&#125;</span>; <span class="co1">//end function</span></div>
</li>
<li class="li1">
<div class="de1">&nbsp;</div>
</li>
<li class="li1">
<div class="de1">&nbsp;</div>
</li>
<li class="li2">
<div class="de2">&nbsp; $.<span class="me1">fn</span>.<span class="me1">emoticate</span>.<span class="me1">emoticlick</span> = <span class="kw2">function</span><span class="br0">&#40;</span>id,emocode, image_path<span class="br0">&#41;</span><span class="br0">&#123;</span></div>
</li>
<li class="li1">
<div class="de1">&nbsp; &nbsp; <span class="kw1">return</span> <span class="st0">&#8216;&lt;a href=&quot;#&quot; id=&quot;&#8217;</span> + emocode +<span class="st0">&#8216;&quot;&gt;&lt;img src=&quot;&#8217;</span> + image_path + id + <span class="st0">&#8216;&quot;&gt;&lt;/a&gt;&#8217;</span>;</div>
</li>
<li class="li1">
<div class="de1">&nbsp; <span class="br0">&#125;</span>;</div>
</li>
<li class="li1">
<div class="de1">&nbsp;</div>
</li>
<li class="li1">
<div class="de1">&nbsp; $.<span class="me1">fn</span>.<span class="me1">emoticate</span>.<span class="me1">insertme</span> = <span class="kw2">function</span><span class="br0">&#40;</span>areaId,text<span class="br0">&#41;</span><span class="br0">&#123;</span></div>
</li>
<li class="li2">
<div class="de2">&nbsp; &nbsp; <span class="kw2">var</span> txtarea = document.<span class="me1">getElementById</span><span class="br0">&#40;</span>areaId<span class="br0">&#41;</span>;</div>
</li>
<li class="li1">
<div class="de1">&nbsp; &nbsp; <span class="kw2">var</span> scrollPos = txtarea.<span class="me1">scrollTop</span>;</div>
</li>
<li class="li1">
<div class="de1">&nbsp; &nbsp; <span class="kw2">var</span> strPos = <span class="nu0">0</span>;</div>
</li>
<li class="li1">
<div class="de1">&nbsp; &nbsp; <span class="kw2">var</span> br = <span class="br0">&#40;</span><span class="br0">&#40;</span>txtarea.<span class="me1">selectionStart</span> || txtarea.<span class="me1">selectionStart</span> == <span class="st0">&#8216;0&#8242;</span><span class="br0">&#41;</span> ? </div>
</li>
<li class="li1">
<div class="de1">&nbsp; &nbsp; <span class="st0">&quot;ff&quot;</span> : <span class="br0">&#40;</span>document.<span class="me1">selection</span> ? <span class="st0">&quot;ie&quot;</span> : <span class="kw2">false</span> <span class="br0">&#41;</span> <span class="br0">&#41;</span>;</div>
</li>
<li class="li2">
<div class="de2">&nbsp; &nbsp; &nbsp; <span class="kw1">if</span> <span class="br0">&#40;</span>br == <span class="st0">&quot;ie&quot;</span><span class="br0">&#41;</span> <span class="br0">&#123;</span> </div>
</li>
<li class="li1">
<div class="de1">&nbsp; &nbsp; &nbsp; txtarea.<span class="kw3">focus</span><span class="br0">&#40;</span><span class="br0">&#41;</span>; <span class="kw2">var</span> range = document.<span class="me1">selection</span>.<span class="me1">createRange</span><span class="br0">&#40;</span><span class="br0">&#41;</span>; range.<span class="me1">moveStart</span> <span class="br0">&#40;</span><span class="st0">&#8216;character&#8217;</span>, -txtarea.<span class="me1">value</span>.<span class="me1">length</span><span class="br0">&#41;</span>;</div>
</li>
<li class="li1">
<div class="de1">&nbsp; &nbsp; &nbsp; strPos = range.<span class="me1">text</span>.<span class="me1">length</span>;</div>
</li>
<li class="li1">
<div class="de1">&nbsp; &nbsp; <span class="br0">&#125;</span></div>
</li>
<li class="li1">
<div class="de1">&nbsp; &nbsp; <span class="kw1">else</span> <span class="kw1">if</span> <span class="br0">&#40;</span>br == <span class="st0">&quot;ff&quot;</span><span class="br0">&#41;</span> strPos = txtarea.<span class="me1">selectionStart</span>;</div>
</li>
<li class="li2">
<div class="de2">&nbsp;</div>
</li>
<li class="li1">
<div class="de1">&nbsp; &nbsp; <span class="kw2">var</span> front = <span class="br0">&#40;</span>txtarea.<span class="me1">value</span><span class="br0">&#41;</span>.<span class="me1">substring</span><span class="br0">&#40;</span><span class="nu0">0</span>,strPos<span class="br0">&#41;</span>; &nbsp;</div>
</li>
<li class="li1">
<div class="de1">&nbsp; &nbsp; <span class="kw2">var</span> <span class="kw3">back</span> = <span class="br0">&#40;</span>txtarea.<span class="me1">value</span><span class="br0">&#41;</span>.<span class="me1">substring</span><span class="br0">&#40;</span>strPos,txtarea.<span class="me1">value</span>.<span class="me1">length</span><span class="br0">&#41;</span>; </div>
</li>
<li class="li1">
<div class="de1">&nbsp; &nbsp; txtarea.<span class="me1">value</span>=front+text+<span class="kw3">back</span>;</div>
</li>
<li class="li1">
<div class="de1">&nbsp; &nbsp; strPos = strPos + text.<span class="me1">length</span>;</div>
</li>
<li class="li2">
<div class="de2">&nbsp; &nbsp; &nbsp; <span class="kw1">if</span> <span class="br0">&#40;</span>br == <span class="st0">&quot;ie&quot;</span><span class="br0">&#41;</span> <span class="br0">&#123;</span> </div>
</li>
<li class="li1">
<div class="de1">&nbsp; &nbsp; &nbsp; txtarea.<span class="kw3">focus</span><span class="br0">&#40;</span><span class="br0">&#41;</span>;</div>
</li>
<li class="li1">
<div class="de1">&nbsp; &nbsp; &nbsp; <span class="kw2">var</span> range = document.<span class="me1">selection</span>.<span class="me1">createRange</span><span class="br0">&#40;</span><span class="br0">&#41;</span>;</div>
</li>
<li class="li1">
<div class="de1">&nbsp; &nbsp; &nbsp; range.<span class="me1">moveStart</span> <span class="br0">&#40;</span><span class="st0">&#8216;character&#8217;</span>, -txtarea.<span class="me1">value</span>.<span class="me1">length</span><span class="br0">&#41;</span>;</div>
</li>
<li class="li1">
<div class="de1">&nbsp; &nbsp; &nbsp; range.<span class="me1">moveStart</span> <span class="br0">&#40;</span><span class="st0">&#8216;character&#8217;</span>, strPos<span class="br0">&#41;</span>;</div>
</li>
<li class="li2">
<div class="de2">&nbsp; &nbsp; &nbsp; range.<span class="me1">moveEnd</span> <span class="br0">&#40;</span><span class="st0">&#8216;character&#8217;</span>, <span class="nu0">0</span><span class="br0">&#41;</span>;</div>
</li>
<li class="li1">
<div class="de1">&nbsp; &nbsp; &nbsp; range.<span class="me1">select</span><span class="br0">&#40;</span><span class="br0">&#41;</span>;</div>
</li>
<li class="li1">
<div class="de1">&nbsp; &nbsp; <span class="br0">&#125;</span></div>
</li>
<li class="li1">
<div class="de1">&nbsp; &nbsp; <span class="kw1">else</span> <span class="kw1">if</span> <span class="br0">&#40;</span>br == <span class="st0">&quot;ff&quot;</span><span class="br0">&#41;</span> <span class="br0">&#123;</span></div>
</li>
<li class="li1">
<div class="de1">&nbsp; &nbsp; &nbsp; txtarea.<span class="me1">selectionStart</span> = strPos;</div>
</li>
<li class="li2">
<div class="de2">&nbsp; &nbsp; &nbsp; txtarea.<span class="me1">selectionEnd</span> = strPos;</div>
</li>
<li class="li1">
<div class="de1">&nbsp; &nbsp; &nbsp; txtarea.<span class="kw3">focus</span><span class="br0">&#40;</span><span class="br0">&#41;</span>;</div>
</li>
<li class="li1">
<div class="de1">&nbsp; &nbsp; <span class="br0">&#125;</span></div>
</li>
<li class="li1">
<div class="de1">&nbsp; &nbsp; txtarea.<span class="me1">scrollTop</span> = scrollPos;</div>
</li>
<li class="li1">
<div class="de1">&nbsp; <span class="br0">&#125;</span>;</div>
</li>
<li class="li2">
<div class="de2">&nbsp;</div>
</li>
<li class="li1">
<div class="de1"><span class="br0">&#125;</span><span class="br0">&#41;</span><span class="br0">&#40;</span>jQuery<span class="br0">&#41;</span>;</div>
</li>
<li class="li1">
<div class="de1">&nbsp;</div>
</li>
</ol>
</div>
<p>Or you can download it <a href="http://www.wyliethomas.com/blog/wp-content/uploads/2010/03/jquery.emotification.js">here</a>.</p>
]]></content:encoded>
			<wfw:commentRss>http://www.wyliethomas.com/blog/2010/03/02/jquery-emoticon-selector-plugin/feed/</wfw:commentRss>
		<slash:comments>0</slash:comments>
		</item>
		<item>
		<title>Installing passenger on ubuntu has some issues</title>
		<link>http://www.wyliethomas.com/blog/2009/12/20/installing-passenger-on-ubuntu-has-some-issues/</link>
		<comments>http://www.wyliethomas.com/blog/2009/12/20/installing-passenger-on-ubuntu-has-some-issues/#comments</comments>
		<pubDate>Sun, 20 Dec 2009 07:46:14 +0000</pubDate>
		<dc:creator>admin</dc:creator>
				<category><![CDATA[Ruby on Rails]]></category>
		<category><![CDATA[passenger]]></category>
		<category><![CDATA[ubuntu]]></category>

		<guid isPermaLink="false">http://www.wyliethomas.com/blog/?p=115</guid>
		<description><![CDATA[I followed the instructions on the Ubuntu site and the modrails site and everything would install fine but I could never get passenger to serve pages to apache.
Passenger assumes the permissions of the default apache user. And if you don&#8217;t set up your default user as www-data when you install Ubuntu Passenger wont have permission [...]]]></description>
			<content:encoded><![CDATA[<p>I followed the instructions on the Ubuntu site and the modrails site and everything would install fine but I could never get passenger to serve pages to apache.</p>
<p>Passenger assumes the permissions of the default apache user. And if you don&#8217;t set up your default user as www-data when you install Ubuntu Passenger wont have permission to run the app.</p>
<p>Open up /etc/apache2/envvars and change the www-data user  and group to match your default user and group and you should be set.</p>
]]></content:encoded>
			<wfw:commentRss>http://www.wyliethomas.com/blog/2009/12/20/installing-passenger-on-ubuntu-has-some-issues/feed/</wfw:commentRss>
		<slash:comments>0</slash:comments>
		</item>
		<item>
		<title>Watch the whitespace</title>
		<link>http://www.wyliethomas.com/blog/2009/10/30/watch-the-whitespace/</link>
		<comments>http://www.wyliethomas.com/blog/2009/10/30/watch-the-whitespace/#comments</comments>
		<pubDate>Sat, 31 Oct 2009 04:51:03 +0000</pubDate>
		<dc:creator>admin</dc:creator>
				<category><![CDATA[Ruby on Rails]]></category>
		<category><![CDATA[Web Development]]></category>

		<guid isPermaLink="false">http://www.wyliethomas.com/blog/?p=112</guid>
		<description><![CDATA[I have been spending the last hour wondering why this doesnt work.
Post.find_by_sql["SELECT title FROM posts WHERE author = ? AND created > ?", author_id, start_date]
Its because it needed to be like this:
Post.find_by_sql ["SELECT title FROM posts WHERE author = ? AND created > ?", author_id, start_date]
yeah, you need that whitespace there.
]]></description>
			<content:encoded><![CDATA[<p>I have been spending the last hour wondering why this doesnt work.</p>
<p>Post.find_by_sql["SELECT title FROM posts WHERE author = ? AND created > ?", author_id, start_date]</p>
<p>Its because it needed to be like this:<br />
Post.find_by_sql ["SELECT title FROM posts WHERE author = ? AND created > ?", author_id, start_date]</p>
<p>yeah, you need that whitespace there.</p>
]]></content:encoded>
			<wfw:commentRss>http://www.wyliethomas.com/blog/2009/10/30/watch-the-whitespace/feed/</wfw:commentRss>
		<slash:comments>0</slash:comments>
		</item>
		<item>
		<title>Confusing signs</title>
		<link>http://www.wyliethomas.com/blog/2009/10/25/confusing-signs/</link>
		<comments>http://www.wyliethomas.com/blog/2009/10/25/confusing-signs/#comments</comments>
		<pubDate>Mon, 26 Oct 2009 02:56:28 +0000</pubDate>
		<dc:creator>admin</dc:creator>
				<category><![CDATA[Travel]]></category>
		<category><![CDATA[Usability]]></category>

		<guid isPermaLink="false">http://www.wyliethomas.com/blog/?p=109</guid>
		<description><![CDATA[I like taking pictures of confusing signs. It reminds me to be more mindful about the messages I put on clients websites. 
On a fishing trip to Yellowstone I came across these signs.
]]></description>
			<content:encoded><![CDATA[<p>I like taking pictures of confusing signs. It reminds me to be more mindful about the messages I put on clients websites. </p>
<p>On a fishing trip to Yellowstone I came across these signs.</p>
<div id="attachment_108" class="wp-caption alignleft" style="width: 310px"><img src="http://www.wyliethomas.com/blog/wp-content/uploads/2009/10/10252009159-300x225.jpg" alt="Bears drive?" title="10252009159" width="300" height="225" class="size-medium wp-image-108" /><p class="wp-caption-text">Bears drive?</p></div><br />
<div id="attachment_107" class="wp-caption alignleft" style="width: 310px"><img src="http://www.wyliethomas.com/blog/wp-content/uploads/2009/10/10242009158-300x225.jpg" alt="does excluded mean not allowed, or excluded from the not allowed list?" title="10242009158" width="300" height="225" class="size-medium wp-image-107" /><p class="wp-caption-text">does excluded mean not allowed, or excluded from the not allowed list?</p></div>
]]></content:encoded>
			<wfw:commentRss>http://www.wyliethomas.com/blog/2009/10/25/confusing-signs/feed/</wfw:commentRss>
		<slash:comments>0</slash:comments>
		</item>
		<item>
		<title>Making a sortable, dynamic grid</title>
		<link>http://www.wyliethomas.com/blog/2009/10/11/making-a-sortable-dynamic-grid/</link>
		<comments>http://www.wyliethomas.com/blog/2009/10/11/making-a-sortable-dynamic-grid/#comments</comments>
		<pubDate>Mon, 12 Oct 2009 05:56:56 +0000</pubDate>
		<dc:creator>admin</dc:creator>
				<category><![CDATA[Ruby on Rails]]></category>
		<category><![CDATA[ruby]]></category>

		<guid isPermaLink="false">http://www.wyliethomas.com/blog/?p=80</guid>
		<description><![CDATA[I came up against an interesting challenge on a current project. This was actually pretty fun to figure out. Here is what I came up with.
I needed to display a grid with columns and rows that had information in each cell. The information in the cells needed to be dynamic, or change based on a [...]]]></description>
			<content:encoded><![CDATA[<p><img class="alignleft size-medium wp-image-81" title="Grid" src="http://www.wyliethomas.com/blog/wp-content/uploads/2009/10/Picture-2-300x239.png" alt="Grid" width="300" height="239" />I came up against an interesting challenge on a current project. This was actually pretty fun to figure out. Here is what I came up with.</p>
<p>I needed to display a grid with columns and rows that had information in each cell. The information in the cells needed to be dynamic, or change based on a UI perspective.</p>
<p>Also, if there were more than 10 rows in a column, the remaining cells needed to wrap to the next column.</p>
<p>This is definitely a job for a helper so I wrote these methods for the helper to render this sortable, dynamic grid. So far it seems to be holding up when rendering grids of various columns and rows.</p>
<div class="dean_ch" style="white-space: wrap;">
<ol>
<li class="li1">
<div class="de1">&nbsp;</div>
</li>
<li class="li1">
<div class="de1">&nbsp; <span class="kw1">def</span> my_grid</div>
</li>
<li class="li1">
<div class="de1">&nbsp; &nbsp; <span class="re1">@my_data</span> = <span class="st0">&#8221;</span></div>
</li>
<li class="li1">
<div class="de1">&nbsp; &nbsp; <span class="re1">@my_data</span> += <span class="st0">&#8216;&lt;table&gt;&#8217;</span></div>
</li>
<li class="li2">
<div class="de2">&nbsp; &nbsp; <span class="re1">@my_data</span> += <span class="st0">&#8216;&lt;tr&gt;&#8217;</span></div>
</li>
<li class="li1">
<div class="de1">&nbsp; &nbsp; </div>
</li>
<li class="li1">
<div class="de1">&nbsp; &nbsp; num = <span class="nu0">1</span></div>
</li>
<li class="li1">
<div class="de1">&nbsp; &nbsp; <span class="co1">#this starts a new column for each category</span></div>
</li>
<li class="li1">
<div class="de1">&nbsp; &nbsp; <span class="re1">@columns</span>.<span class="me1">each</span> <span class="kw1">do</span> |col|</div>
</li>
<li class="li2">
<div class="de2">&nbsp; &nbsp; &nbsp; cell = Cell.<span class="me1">find</span><span class="br0">&#40;</span><span class="re3">:all</span>, <span class="re3">:conditions</span> =&gt; <span class="br0">&#91;</span><span class="st0">&#8216;category_id = ?&#8217;</span>, col<span class="br0">&#93;</span><span class="br0">&#41;</span> <span class="kw1">rescue</span> <span class="kw2">nil</span></div>
</li>
<li class="li1">
<div class="de1">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </div>
</li>
<li class="li1">
<div class="de1">&nbsp; &nbsp; &nbsp; count = cell.<span class="me1">size</span></div>
</li>
<li class="li1">
<div class="de1">&nbsp; &nbsp; &nbsp; item = <span class="nu0">0</span></div>
</li>
<li class="li1">
<div class="de1">&nbsp; &nbsp; &nbsp; itemtotal = <span class="nu0">1</span></div>
</li>
<li class="li2">
<div class="de2">&nbsp; &nbsp; &nbsp; cell.<span class="me1">each</span> <span class="kw1">do</span> |row|</div>
</li>
<li class="li1">
<div class="de1">&nbsp; &nbsp; &nbsp; &nbsp; <span class="co1">#if this is the 0 item start a new column</span></div>
</li>
<li class="li1">
<div class="de1">&nbsp; &nbsp; &nbsp; &nbsp; <span class="kw1">if</span> item == <span class="nu0">0</span></div>
</li>
<li class="li1">
<div class="de1">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <span class="re1">@my_data</span> += <span class="kw2">self</span>.<span class="me1">start_col</span></div>
</li>
<li class="li1">
<div class="de1">&nbsp; &nbsp; &nbsp; &nbsp; <span class="kw1">end</span></div>
</li>
<li class="li2">
<div class="de2">&nbsp; &nbsp; &nbsp; &nbsp; </div>
</li>
<li class="li1">
<div class="de1">&nbsp; &nbsp; &nbsp; &nbsp; score = row.<span class="me1">get_my_score</span><span class="br0">&#40;</span>row.<span class="me1">id</span>, <span class="re1">@grid</span>, <span class="re1">@user</span><span class="br0">&#41;</span>.<span class="me1">to_s</span></div>
</li>
<li class="li1">
<div class="de1">&nbsp; &nbsp; &nbsp; &nbsp; <span class="re1">@my_data</span> += <span class="kw2">self</span>.<span class="me1">list_item</span><span class="br0">&#40;</span>score, row, itemtotal<span class="br0">&#41;</span></div>
</li>
<li class="li1">
<div class="de1">&nbsp; &nbsp; &nbsp; &nbsp; </div>
</li>
<li class="li1">
<div class="de1">&nbsp; &nbsp; &nbsp; &nbsp; <span class="co1">#if this is the 9th item, or is the last of the cells, close the column and reset count</span></div>
</li>
<li class="li2">
<div class="de2">&nbsp; &nbsp; &nbsp; &nbsp; item += <span class="nu0">1</span></div>
</li>
<li class="li1">
<div class="de1">&nbsp; &nbsp; &nbsp; &nbsp; <span class="kw1">if</span> item == <span class="nu0">10</span> || itemtotal == count</div>
</li>
<li class="li1">
<div class="de1">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <span class="re1">@my_data</span> += <span class="kw2">self</span>.<span class="me1">end_col</span><span class="br0">&#40;</span>num<span class="br0">&#41;</span></div>
</li>
<li class="li1">
<div class="de1">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; num = num.<span class="me1">to_i</span> + <span class="nu0">1</span></div>
</li>
<li class="li1">
<div class="de1">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; item = <span class="nu0">0</span></div>
</li>
<li class="li2">
<div class="de2">&nbsp; &nbsp; &nbsp; &nbsp; <span class="kw1">end</span></div>
</li>
<li class="li1">
<div class="de1">&nbsp; &nbsp; &nbsp; &nbsp; itemtotal += <span class="nu0">1</span></div>
</li>
<li class="li1">
<div class="de1">&nbsp; &nbsp; &nbsp; <span class="kw1">end</span></div>
</li>
<li class="li1">
<div class="de1">&nbsp; &nbsp; &nbsp; </div>
</li>
<li class="li1">
<div class="de1">&nbsp; &nbsp; &nbsp; </div>
</li>
<li class="li2">
<div class="de2">&nbsp; &nbsp; <span class="kw1">end</span></div>
</li>
<li class="li1">
<div class="de1">&nbsp; &nbsp; </div>
</li>
<li class="li1">
<div class="de1">&nbsp; &nbsp; <span class="re1">@my_data</span> += <span class="st0">&#8216;&lt;/tr&gt;&#8217;</span></div>
</li>
<li class="li1">
<div class="de1">&nbsp; &nbsp; <span class="re1">@my_data</span> += <span class="st0">&#8216;&lt;/table&gt;&#8217;</span></div>
</li>
<li class="li1">
<div class="de1">&nbsp; &nbsp; <span class="co1">#return @my_data</span></div>
</li>
<li class="li2">
<div class="de2">&nbsp; <span class="kw1">end</span></div>
</li>
<li class="li1">
<div class="de1">&nbsp;</div>
</li>
</ol>
</div>
<p></p>
<div class="dean_ch" style="white-space: wrap;">
<ol>
<li class="li1">
<div class="de1">&nbsp;</div>
</li>
<li class="li1">
<div class="de1"><span class="kw1">def</span> start_col</div>
</li>
<li class="li1">
<div class="de1">&nbsp; &nbsp; <span class="re1">@start</span> = <span class="st0">&#8216;&lt;td valign=&quot;bottom&quot;&gt;&lt;div style=&quot;position: relative; bottom: 0px; display: block;&quot;&gt;&#8217;</span></div>
</li>
<li class="li1">
<div class="de1">&nbsp; &nbsp; <span class="re1">@start</span> += <span class="st0">&#8216;&lt;ul style=&quot;vertical-align: bottom&quot;&gt;&#8217;</span></div>
</li>
<li class="li2">
<div class="de2">&nbsp; &nbsp; <span class="kw2">return</span> <span class="re1">@start</span></div>
</li>
<li class="li1">
<div class="de1"><span class="kw1">end</span></div>
</li>
<li class="li1">
<div class="de1">&nbsp;</div>
</li>
</ol>
</div>
<p></p>
<div class="dean_ch" style="white-space: wrap;">
<ol>
<li class="li1">
<div class="de1">&nbsp;</div>
</li>
<li class="li1">
<div class="de1"><span class="kw1">def</span> end_col<span class="br0">&#40;</span>num<span class="br0">&#41;</span></div>
</li>
<li class="li1">
<div class="de1">&nbsp; &nbsp; <span class="re1">@end</span> = <span class="st0">&#8216;&lt;/ul&gt;&#8217;</span></div>
</li>
<li class="li1">
<div class="de1">&nbsp; &nbsp; <span class="re1">@end</span> += num.<span class="me1">to_s</span></div>
</li>
<li class="li2">
<div class="de2">&nbsp; &nbsp; <span class="re1">@end</span> += <span class="st0">&#8216;&lt;/td&gt;&#8217;</span></div>
</li>
<li class="li1">
<div class="de1">&nbsp; &nbsp; <span class="kw2">return</span> <span class="re1">@end</span></div>
</li>
<li class="li1">
<div class="de1"><span class="kw1">end</span></div>
</li>
<li class="li1">
<div class="de1">&nbsp;</div>
</li>
</ol>
</div>
<p></p>
<div class="dean_ch" style="white-space: wrap;">
<ol>
<li class="li1">
<div class="de1">&nbsp;</div>
</li>
<li class="li1">
<div class="de1"><span class="kw1">def</span> list_item<span class="br0">&#40;</span>score, row, item<span class="br0">&#41;</span></div>
</li>
<li class="li1">
<div class="de1">&nbsp; &nbsp; <span class="re1">@list</span> = <span class="st0">&#8216;&lt;li class=key_&#8217;</span>+ score +<span class="st0">&#8216;&gt;&#8217;</span></div>
</li>
<li class="li1">
<div class="de1">&nbsp; &nbsp; <span class="co1">#some stuff here&#8230;</span></div>
</li>
<li class="li2">
<div class="de2">&nbsp; &nbsp; <span class="re1">@list</span> += <span class="st0">&#8216;&lt;/li&gt;&#8217;</span></div>
</li>
<li class="li1">
<div class="de1">&nbsp; &nbsp; <span class="kw2">return</span> <span class="re1">@list</span></div>
</li>
<li class="li1">
<div class="de1"><span class="kw1">end</span></div>
</li>
<li class="li1">
<div class="de1">&nbsp;</div>
</li>
</ol>
</div>
]]></content:encoded>
			<wfw:commentRss>http://www.wyliethomas.com/blog/2009/10/11/making-a-sortable-dynamic-grid/feed/</wfw:commentRss>
		<slash:comments>0</slash:comments>
		</item>
		<item>
		<title>What I think of my hackitosh netbook</title>
		<link>http://www.wyliethomas.com/blog/2009/10/03/what-i-think-of-my-hackitosh-netbook/</link>
		<comments>http://www.wyliethomas.com/blog/2009/10/03/what-i-think-of-my-hackitosh-netbook/#comments</comments>
		<pubDate>Sat, 03 Oct 2009 23:54:28 +0000</pubDate>
		<dc:creator>admin</dc:creator>
				<category><![CDATA[Web Development]]></category>
		<category><![CDATA[hardware]]></category>

		<guid isPermaLink="false">http://www.wyliethomas.com/blog/?p=75</guid>
		<description><![CDATA[The pros and cons of my new hacintosh netbook&#8230; Or as a friend of mine calls it&#8230; hackintrash.
First, why did I get a net book?
My MacBook Pro is just over 4 years old now. It have pretty much been working night and day since I have owned it. It&#8217;s my 3rd 15&#8243; mac book. Its [...]]]></description>
			<content:encoded><![CDATA[<p>The pros and cons of my new hacintosh netbook&#8230; Or as a friend of mine calls it&#8230; hackintrash.</p>
<p>First, why did I get a net book?<br />
My MacBook Pro is just over 4 years old now. It have pretty much been working night and day since I have owned it. It&#8217;s my 3rd 15&#8243; mac book. Its a great machine and I have more than got my monies worth, but now it is starting to show signs of wear and tear. Taking my netbook to the office is a good way for me to get some more mileage out of the macbook.</p>
<p>Next, the cons. There aren&#8217;t many if you don&#8217;t have unreal expectations of the smaller processor. But there are a few things to be aware of. Not everything will work flawlessly. Things like bluetooth, ethernet port and the VGA port may have some issues. The webcam will probably work, but the mic might have an issue.</p>
<p>Most of the netbooks on the market at the time of this writing have less powerful processors and video cards. So, if you&#8217;re thinking of running photoshop, think again. Don&#8217;t even think about Final Cut.</p>
<p>And, for what ever reason, my netbook likes to have a kernel panic about every 3 and a half days if I dont shut it down from time to time. But I like just closing the lid and putting it to sleep, so i put up with the panics.</p>
<p>Now the pros. For 90% of what I used my macbook for around home and the office, the netbook has been pretty seamless. Now with 3 computers in 3 locations, that I need to work on day to day, keeping information synced would seem a daunting challenge. A few key apps and services are key for me to keep things together.</p>
<p>All of my web dev projects for work, freelance and personal are now kept on SVN. Beanstalk has been a perfect companion for my netbook. I can keep my web development work in sync with all my computers very easily.</p>
<p>To keep documents synced up between all these machines I use DropBox. And all my email is web based so Im covered there. </p>
<p>And to keep all my notes, thoughts and ideas in sync, Evernote is perfect. </p>
<p>Its great moving from machine to machine with virtually no difference in my workflow.</p>
<p>Go to these sites for more information:<br />
<a href="http://gadgets.boingboing.net/2008/12/17/osx-netbook-compatib.html">http://gadgets.boingboing.net/2008/12/17/osx-netbook-compatib.html</a><br />
<a href="http://www.wired.com/gadgetlab/2009/05/eight-months-with-a-hackintosh-netbook-conclusion-fantastic/">http://www.wired.com/gadgetlab/2009/05/eight-months-with-a-hackintosh-netbook-conclusion-fantastic/</a><br />
<a href="http://osxdaily.com/2009/09/19/the-ultimate-resource-for-building-a-hackintosh-netbook-or-hackintosh-desktop/">http://osxdaily.com/2009/09/19/the-ultimate-resource-for-building-a-hackintosh-netbook-or-hackintosh-desktop/</a></p>
]]></content:encoded>
			<wfw:commentRss>http://www.wyliethomas.com/blog/2009/10/03/what-i-think-of-my-hackitosh-netbook/feed/</wfw:commentRss>
		<slash:comments>0</slash:comments>
		</item>
		<item>
		<title>Don&#8217;t get your servers wet</title>
		<link>http://www.wyliethomas.com/blog/2009/09/30/dont-get-your-servers-wet/</link>
		<comments>http://www.wyliethomas.com/blog/2009/09/30/dont-get-your-servers-wet/#comments</comments>
		<pubDate>Wed, 30 Sep 2009 20:47:38 +0000</pubDate>
		<dc:creator>admin</dc:creator>
				<category><![CDATA[Uncategorized]]></category>
		<category><![CDATA[servers]]></category>

		<guid isPermaLink="false">http://www.wyliethomas.com/blog/?p=63</guid>
		<description><![CDATA[This is a sad site. 3 new xserves, rusted out.
Exposed racks are inexpensive&#8230; until the ceiling leaks. Needless to say the replacements are in a enclosed, hepa filtered, locked case. And there is a huge ceiling pan with a drain.
I will say, that I was impressed that the servers were still running and serving sites [...]]]></description>
			<content:encoded><![CDATA[<p>This is a sad site. 3 new xserves, rusted out.</p>
<p><img src="http://www.wyliethomas.com/blog/wp-content/uploads/2009/09/09302009137-300x225.jpg" alt="09302009137" title="09302009137" width="300" height="225" class="alignleft size-medium wp-image-64" />Exposed racks are inexpensive&#8230; until the ceiling leaks. Needless to say the replacements are in a enclosed, hepa filtered, locked case. And there is a huge ceiling pan with a drain.</p>
<p>I will say, that I was impressed that the servers were still running and serving sites with standing water inside the case. Amazing!</p>
]]></content:encoded>
			<wfw:commentRss>http://www.wyliethomas.com/blog/2009/09/30/dont-get-your-servers-wet/feed/</wfw:commentRss>
		<slash:comments>0</slash:comments>
		</item>
	</channel>
</rss>
