Setting up a new dev environment
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 list.
For starters
-
sudo apt-get install git-core gitk git-gui
-
sudo apt-get install subversion
-
sudo apt-get install ssh-client
-
sudo apt-get install ssh-server
-
sudo apt-get install vim
-
sudo apt-get install rake
-
sudo apt-get install libxml2-dev
Then install sphinx
http://freelancing-god.github.com/ts/en/installing_sphinx.html
./configure, make, sudo make install
VMWare Tools
Turn off shared folders (i always get failures when i dont)
From the virtual machine menu, select install VMTools. Open the virtual DVD and put the zip file on the desktop and extract it there.
From a terminal cd Desktop/vmware…
Then sudo ./vmware-tools-install.pl
Enter key for all the defaults. Then run the networking stop and start commands at the end of the instructions.
Install Ruby
-
sudo apt-get install ruby-full build-essential
or
-
sudo aptitude install ruby build-essential libopenssl-ruby ruby1.8-dev
Install Apache
-
sudo apt-get install apache2 apache2-mpm-prefork apache2-prefork-dev
Install Ruby Gems
-
sudo apt-get install rubygems
-
export PATH=/var/lib/gems/1.8/bin:$PATH
Install Rails
-
sudo gem install rails
Install MySQL
-
sudo apt-get install mysql-server mysql-client
-
sudo apt-get install libmysql-ruby libmysqlclient-dev
-
sudo gem install mysql
Install Passenger
-
sudo gem install passenger
-
sudo apt-get install apache2-threaded-dev libapr1-dev libaprutil1-dev
-
sudo /var/lib/gems/1.8/bin/passenger-install-apache2-module
[follow passenger instructions]
VMWare Network connections
Since FF is the default browser you need to make a small change to browse the web.
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.
Shared Folders
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.
You can access the files in your VM here
/mnt/hgfs
Install Gems
[what ever gems you need ]
Configure Apache
(Sill on your VM)
-
mkdir ~/rails_development
-
cd ~/rails_development
-
ln -s /mnt/hgfs/[your drive]/myapp myapp
Now cd to /etc/apachec2/sites-available and sudo scp 000-default myapp
then sudo vim myapp
-
-
<VirtualHost *:80>
-
ServerName myapp.ubuntu
-
RailsEnv development
-
DocumentRoot /home/wylie/rails_development/myapp/public
-
<Directory /home/wylie/rails_development/myapp/public>
-
AllowOverride all
-
Options -MultiViews
-
</Directory>
-
</VirtualHost>
-
Then cd ../sites-enabled
and sudo ln -s ../sites-available/myapp
then sudo rm 000-default
Finally restart apache
Set your hostfile
(Back on OS X)
get the IP in your VM and edit your hosts file on OS X
sudo vim /etc/hosts
[ip of VM] myapp.ubuntu
then run dscacheutil -flushcache (i usually have to run this a few times for it to take)
Install the DB
create any databases you need for your apps
Dont’ forget the memcached
-
sudo apt-get install memcached
-
sudo /etc/init.d/memcached restart
Fire it up
open your browser and go to myapp.ubuntu
Permission fixes
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
sudo vim /etc/passwd
Then find your user and change 1000:1000 to 501:20, save and exit
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.
Then, you need to cd to /home and change the permissions on everything in your user dir like this
sudo chown -R 501:20 wylie
Then you need to update the group file sudo vim /etc/group
find dialup and change that to wylie [your username]. Then you need to find your username and change 1000 to 20.
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
Git GUI fixes
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
sudo update-alternatives –config wish
select the option with 8.5. It should be number 3.
Now when you open git gui it should look normal
Now get to work…
Regular Expression Tools
A friend shared a RegEx tool that came in really handy. Its www.rubular.com. I dont’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’s that users enter that i could create new links from.
-
(((https?):\/\/)?(([0-9a-zA-Z][-\w]*\.)+[a-zA-Z]{2,9}(:\d{1,4})?([-\w\/#~.?=&%@~])*))
Looks like cartoon swearing.
color scheme tool
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/
jQuery Emoticon Selector Plugin
I couldn’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 it. And if you make it better I would very much like to see what changes you made.
Lets check it out.
The view has two components. The jQuery call and the div with the necessary elements. (my examples are how i used this in Ruby)
-
-
<% javascript_tag do %>
-
$(document).ready(function() {
-
$("div#emodiv").emoticate({icon: ’smiley-icon’, replacediv: ‘list’});
-
});
-
<% end %>
-
Then the div that you identified in the jQuery call.
-
-
<div id="emodiv">
-
<img src="/images/emoticons/emoticon-0100-smile.png" id="smiley-icon">
-
<div id="list"> </div>
-
<select name="emoticons">
-
<option value=":)">emoticon-0100-smile.png</option>
-
<option value="|-(">emoticon-0106-crying.png</option>
-
<option value=";)">emoticon-0105-wink.png</option>
-
<option value=":(">emoticon-0106-crying.png</option>
-
<option value="(pt)">279.png</option>
-
<option value="(ct)">104.png</option>
-
<option value="(au)">342.png</option>
-
<option value="(eg)">emoticon-0116-evilgrin.png</option>
-
<option value=":*">emoticon-0109-kiss.png</option>
-
</select>
-
<div style="clear: both;"></div>
-
<p>
-
<textarea id="comment_1"></textarea>
-
</p>
-
</div>
-
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).
And here is the plugin.
-
-
(function($){
-
-
$.fn.emoticate = function(options){
-
-
var defaults = ({
-
replacediv: ‘replaceme’,
-
image_path: ‘/images/emoticons/’,
-
speed: 500,
-
icon: ’smiley’
-
});
-
var options = $.extend(defaults, options);
-
-
return this.each(function() {
-
var select = $(’select’, this);
-
var area = $(‘textarea’, this);
-
var icon = $("#" + defaults.icon, this);
-
-
var emo =‘<div class="emoticon-box"><ul>’;
-
$(‘option’, select).each(function () {
-
var option = $(this);
-
var emocode = option.val();
-
var title = option.text();
-
var link = $.fn.emoticate.emoticlick(title, emocode, defaults.image_path);
-
-
emo += ‘<li>’
-
+ link
-
+ ‘</li>’;
-
}); //end option
-
emo += ‘</ul></div>’;
-
-
select.remove(); //get rid of the select to make way for emotification
-
$("#" + defaults.replacediv, this).html(emo); //put the emotification HTML in the right div
-
$("#" + defaults.replacediv, this).hide(); //hide the emoticons
-
-
var listdiv = $("#" + defaults.replacediv, this); //reset the var so it will work in the icon click.. this probably could be done better
-
-
//bind the link for every a tag that is in the replaced div
-
$(‘a’, this).bind(‘click’, function() {
-
$.fn.emoticate.insertme(area.attr(‘id’), $(this).attr(‘id’));
-
return false;
-
}); //end bind
-
-
//click the icon
-
$(icon, this).bind(‘click’, function (){
-
listdiv.show(defaults.speed);
-
});
-
-
//function to click anywhere to hide the emoticons
-
$(document.body)click(function (){
-
listdiv.hide(defaults.speed);
-
});
-
-
-
}); //end select
-
-
}; //end function
-
-
-
$.fn.emoticate.emoticlick = function(id,emocode, image_path){
-
return ‘<a href="#" id="’ + emocode +‘"><img src="’ + image_path + id + ‘"></a>’;
-
};
-
-
$.fn.emoticate.insertme = function(areaId,text){
-
var txtarea = document.getElementById(areaId);
-
var scrollPos = txtarea.scrollTop;
-
var strPos = 0;
-
var br = ((txtarea.selectionStart || txtarea.selectionStart == ‘0′) ?
-
"ff" : (document.selection ? "ie" : false ) );
-
if (br == "ie") {
-
txtarea.focus(); var range = document.selection.createRange(); range.moveStart (‘character’, -txtarea.value.length);
-
strPos = range.text.length;
-
}
-
else if (br == "ff") strPos = txtarea.selectionStart;
-
-
var front = (txtarea.value).substring(0,strPos);
-
var back = (txtarea.value).substring(strPos,txtarea.value.length);
-
txtarea.value=front+text+back;
-
strPos = strPos + text.length;
-
if (br == "ie") {
-
txtarea.focus();
-
var range = document.selection.createRange();
-
range.moveStart (‘character’, -txtarea.value.length);
-
range.moveStart (‘character’, strPos);
-
range.moveEnd (‘character’, 0);
-
range.select();
-
}
-
else if (br == "ff") {
-
txtarea.selectionStart = strPos;
-
txtarea.selectionEnd = strPos;
-
txtarea.focus();
-
}
-
txtarea.scrollTop = scrollPos;
-
};
-
-
})(jQuery);
-
Or you can download it here.
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’t set up your default user as www-data when you install Ubuntu Passenger wont have permission to run the app.
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.
Watch the whitespace
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.
Confusing signs
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.

Bears drive?

does excluded mean not allowed, or excluded from the not allowed list?
Making a sortable, dynamic grid
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 UI perspective.
Also, if there were more than 10 rows in a column, the remaining cells needed to wrap to the next column.
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.
-
-
def my_grid
-
@my_data = ”
-
@my_data += ‘<table>’
-
@my_data += ‘<tr>’
-
-
num = 1
-
#this starts a new column for each category
-
@columns.each do |col|
-
cell = Cell.find(:all, :conditions => [‘category_id = ?’, col]) rescue nil
-
-
count = cell.size
-
item = 0
-
itemtotal = 1
-
cell.each do |row|
-
#if this is the 0 item start a new column
-
if item == 0
-
@my_data += self.start_col
-
end
-
-
score = row.get_my_score(row.id, @grid, @user).to_s
-
@my_data += self.list_item(score, row, itemtotal)
-
-
#if this is the 9th item, or is the last of the cells, close the column and reset count
-
item += 1
-
if item == 10 || itemtotal == count
-
@my_data += self.end_col(num)
-
num = num.to_i + 1
-
item = 0
-
end
-
itemtotal += 1
-
end
-
-
-
end
-
-
@my_data += ‘</tr>’
-
@my_data += ‘</table>’
-
#return @my_data
-
end
-
-
-
def start_col
-
@start = ‘<td valign="bottom"><div style="position: relative; bottom: 0px; display: block;">’
-
@start += ‘<ul style="vertical-align: bottom">’
-
return @start
-
end
-
-
-
def end_col(num)
-
@end = ‘</ul>’
-
@end += num.to_s
-
@end += ‘</td>’
-
return @end
-
end
-
-
-
def list_item(score, row, item)
-
@list = ‘<li class=key_’+ score +‘>’
-
#some stuff here…
-
@list += ‘</li>’
-
return @list
-
end
-
What I think of my hackitosh netbook
The pros and cons of my new hacintosh netbook… Or as a friend of mine calls it… 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’s my 3rd 15″ 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.
Next, the cons. There aren’t many if you don’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.
Most of the netbooks on the market at the time of this writing have less powerful processors and video cards. So, if you’re thinking of running photoshop, think again. Don’t even think about Final Cut.
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.
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.
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.
To keep documents synced up between all these machines I use DropBox. And all my email is web based so Im covered there.
And to keep all my notes, thoughts and ideas in sync, Evernote is perfect.
Its great moving from machine to machine with virtually no difference in my workflow.
Go to these sites for more information:
http://gadgets.boingboing.net/2008/12/17/osx-netbook-compatib.html
http://www.wired.com/gadgetlab/2009/05/eight-months-with-a-hackintosh-netbook-conclusion-fantastic/
http://osxdaily.com/2009/09/19/the-ultimate-resource-for-building-a-hackintosh-netbook-or-hackintosh-desktop/
Don’t get your servers wet
This is a sad site. 3 new xserves, rusted out.
Exposed racks are inexpensive… 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 with standing water inside the case. Amazing!