Friday 27 April 2012

CSS positioning and Stacking images in rails.

So you are using Ruby on Rails and you want a method of stacking images on top of each other.
Your answer will probably involve CSS but many of the blog posts and Q&A posts I found weren't too descriptive so here is my shot at explaining this from the perspective of someone who doesn't use CSS often.

First a short bit on parents in CSS

When using CSS, having one style inside the other makes the top level the parent. In this example the div with the id of "container" is the parent of the div with the id of "contained".

<div id="container">
<div id="contained">
</div>
</div>
This does not work with class instead of id.

<div class="container">
<div class="contained">
</div>
</div>

And the CSS position

There are several good resources explaining position and I will just link to my favourites.
http://www.barelyfitz.com/screencast/html-training/css/positioning/

Onto the good stuff

Our CSS files are in assets/stylesheets/ and the one we are using is the application wide stylesheet application.css.scss

The technique is to have a position:relative parent container, so that all position:absolute items inside are in the same place against the relative container. Note that the container needs a size, it will not take the size of absolute children. My images are 64px*64px big so I have to force my container to be that large or the next HTML element in the flow will overlap it.
In application.css.scss

#container {
    position:relative;
    width: 64px;
    height: 64px;
}
#image {
    position: absolute;
    top: 0;
    left: 0;
}
This lets you place images with the id="image" inside a div of id="container". In my code I stack City.png vertically above Grass.png in the view. Note in versions of Rails before 3.1 you need to use :id => instead of the new syntax id:
<div id="container">
<%= image_tag("Grass.png", id:"image") %>
<%= image_tag("City.png", id:"image") %>
</div>

Sunday 22 April 2012

Slim Rails Environment V2

Install Ubuntu Server with whatever settings you like (Default for me)

Remember that when using the xOrg system (xinit), you make it run from terminal with 'xinit' or 'startx'
You can open programs including the terminal from the right click menu in fluxbox.
You cannot copy-paste easily within xOrg unless you use terminator.

Update 24/06/12: !If you are using Bruce Scharlau's vm_template virtual box, and cannot Sudo apt-get anything due to 407 error, /etc/apt/apt.conf has the proxy defined in it and you can simply remove/replace the line as needed.

#System
sudo apt-get install xinit
sudo apt-get install fluxbox
sudo apt-get install build-essential
#Node.js  Rails will not run without a Javascript Engine
sudo apt-get install python-software-properties
sudo add-apt-repository ppa:chris-lea/node.js
sudo apt-get update
sudo apt-get install nodejs
#Rails
sudo apt-get install ruby1.9.1-dev
sudo gem install rails
#Using these three will install all the generic gems
#rails new cookbook
#cd cookbook
#bundle install

##Gem Specific
#Sqlite3
sudo apt-get install sqlite3 libsqlite3-dev
sudo gem install sqlite3

#Cucumber-rails
sudo apt-get install libxml2-dev libxslt-dev
sudo gem install cucumber-rails

#Postgresql gem
#Even if you do not use postgresql on your development machine, by just listing the gem anywhere in your gemfile, you need the libraries to make postgres work for bundle install. This is needed for Heroku.
sudo apt-get install libpq-dev #Note libpq NOT libpg

##Other Programs
#Terminator (Better terminal)
sudo apt-get install terminator

#Google Chrome (web Browser)
sudo wget -q -O - https://dl-ssl.google.com/linux/linux_signing_key.pub | sudo apt-key add -
sudo sh -c 'echo "deb http://dl.google.com/linux/chrome/deb/ stable main" >> /etc/apt/sources.list.d/google.list'
sudo apt-get update
sudo apt-get install google-chrome-stable

#sqlitebrowser (SQLite3 browser)
sudo apt-get install sqlitebrowser

#git
sudo apt-get install git



#Komodo ~Broken
~I have not yet got this working on xinit. Use Nedit or nano instead.
Edit: Or if you are using Ubuntu in a VM, start up a shared folder and run Komodo outside the VM

Aded 24/06/12:

My Workflow


Since this is useful and interesting to people, here is how I work:

When working, I have the virtual machine open on 1/3 of my screen. In it I have terminator open, with a tab for all git commands, a tab for all rails, system and developement commands, a tab for running rails s if I am testing in chrome, and a tab for running guard in (guard is a gem that automatically runs all rails tasks on file change) I will open a chrome window at the bottom of this area if I need to look at my app outside testing.

The only two changes I have made to Bruce's VM is I have made a symlink from /media/sf_vm_shared to ~/shared so it is in my home folder, and I have removed the proxy line in /etc/apt/apt.conf since I do not bring my desktop onto campus.

The remaining 2/3 of my screen has komodo edit running in the windows environment which edits the files through the shared c:/vm_shared folder.

Why not to test everything with Capybara

Firstly, I like Capybara. I think it is nice how easy it is to test with just a few verbs, and you can do things from the perspective of the user. It is no good having the back end for a feature if nobody is ever going to click the button to make it happen. I decided to try do an entire project using just Capybara for testing.

However this comes at a price. Each assertion restarts Rails Server.
This is VERY slow for lots of tests to the point where each test takes about 2 seconds in my current project.

I suppose a drawback some people might make is my tests are tightly bound to the actual view which is another drawback of using Capybara.

Yet another issue I am hitting is organization, all my Capybara tests end up in the same Requests folder which is quite naughty of me.

So, Capybara is slow on many assertions, it links you to the way you display information, and it makes me personally use a disorganised file structure.
Conclusion is I should not use entirely Capybara for the entire project testing. I really need to mix Rspec in there with occasional sprinkles of Capybara.

Friday 20 April 2012

Komodo Edit and Chrome on Ubuntu 11.10

Komodo Edit and Chrome have different methods of installing to anything you can get from the apt repository.
I am using Ubuntu 11.10 64bit on a VM Virtual box with guest additions.
The dates in my links are the dates I saw them, as things change over time like the differences of Rails since 2006.

Firstly for Google Chrome:
My source is How to open source (as on 03/04/12)
wget -q -O - https://dl-ssl.google.com/linux/linux_signing_key.pub | sudo apt-key add - from Google Linux Repositories (as on 03/03/12)
sudo sh -c 'echo "deb http://dl.google.com/linux/chrome/deb/ stable main" >> /etc/apt/sources.list.d/google.list'
sudo apt-get update
sudo apt-get install google-chrome-stable

To find the newest Komodo Edit version, browse around http://downloads.activestate.com/Komodo/releases/
For Komodo Edit 7.02 x64
Download using chrome: http://downloads.activestate.com/Komodo/releases/7.0.2/Komodo-Edit-7.0.2-9923-linux-x86_64.tar.gz
tar -xvzf Komodo-Edit-7.0.2-9923-linux-x86_64.tar.gz
Then make a .desktop file.
Source: http://www.ubuntugeek.com/how-to-create-desktop-launchers-in-ubuntu-11-10oneiric.html (on 20/04/12)

sudo apt-get install --no-install-recommends gnome-panel
gnome-desktop-item-edit ~/Desktop/ --create-new
This will make a popup where you can set the Icon and App location. The icons to use are in the Share folder, and the application is in the Bin folder.

Thursday 5 April 2012

Generic Gem Install Error Solving


Installing pg (0.13.2) with native extensions 
Gem::Installer::ExtensionBuildError: ERROR: Failed to build gem native extension.


/usr/bin/ruby1.9.1 extconf.rb 
checking for pg_config... no
No pg_config... trying anyway. If building fails, please try again with
 --with-pg-config=/path/to/pg_config
checking for libpq-fe.h... no
Can't find the 'libpq-fe.h header
*** extconf.rb failed ***

I highlighted the interesting bit. If you are on Ubuntu, the header is generally related to the package you are missing.
If you type libpq in a terminal, it helpfully tells you to try sudo apt-get install libpq
That will deal with this problem and many others like it.

Other variants of the problem are similar to the stack overflow problem: http://stackoverflow.com/q/10198002/193785
Here it is not a .h file but as some other kind of generic library. checking for main() in -lopenal... no

1:Sudo apt-get install openal
2:Sudo apt-get install openal-dev
3:Sudo apt-get install libopenal

One of these three solutions will probably work.