Rails for Designers 101 – Step by Step Version

This is more of a ‘tutorialized’ version of my previous post. Here, I’ll be sharing how I made my ‘portfolio/haml converter’ rails application, since I unfortunately assumed that anyone reading that post also knew what I knew. This time though, I’ll be assuming nothing, just that you are a designer and you just want to try coding in Haml for a change(good for you!) even if you don’t know squat about rails.

For starters, if you don’t have Rails yet, I suggest either installing Rails the hardcore way, or take the easy way out like I did: just download InstantRails. Okay, after you’re done with that part(I’ll be assuming you also took the easy way out) just unzip that into your root directory(I’m using Windows *gasp* so mine is located at C:/Instantrails/)

Now, all you have to do is bring up a command line(windows key + r, then type cmd), go to your Instantrails folder(type ‘C:/Instantrails/’) then type ‘use_ruby’. You’ll know you did the right thing when the directory changes to C:/Instantrails/rails_apps(just realized it’ll be better with screenshots…but I’ll do that later)

OKay, next in line is installing haml. Ready? Just type:

gem install haml

That’s it! Haml should be automatically downloading now. As you wait for that one, you can open up a new command line, go to your IR(due to laziness I’ll be calling Instantrails IR from now on) folder again, type use_ruby again and then type

rails myhamlizedportfolio

Actually you can name it anything you want. Doesn’t really matter(I sugest you pick a short name though). This will effectively create a blank rails app for you. And by that I mean it will create a folder named myhamlizedportfolio in your rails_app folder, complete with all the folders needed for a blank rails app. Next would be to install haml as a plugin for your portfolio app(you should still be in C:/Instantrails/rails_app when you do this):

haml --rails myhamlizedportfolio

Easy, right? Next, you just have to tell rails that you won’t be needing any database of sorts. So goand open the myhamlizedportfolio/config folder. Open environment.rb(with your favorite text editor – notepad) and look for the following lines

# Skip frameworks you're not going to use. To use Rails without a database  
# you must remove the Active Record framework.
# config.frameworks -= [ :active_record, :active_resource, :action_mailer ]

Just take out the ‘#’ of the third line like so:

# Skip frameworks you're not going to use. To use Rails without a database
# you must remove the Active Record framework.
config.frameworks -= [ :active_record, :active_resource, :action_mailer ]

Save this and close the file. Delete database.yml in that same folder by the way – you won’t be needing that. Next up is to fix your routes(if you want to understand what you’re actually doing, I suggest learning basic rails first like a good citizen, but if you can’t be bothered, then just follow these steps and believe it will work :P ). Open up routes.rb with notepad(it’s still in the config folder) and add this line right after the first line like so:

ActionController::Routing::Routes.draw do |map|
map.connect 'projects/:id', :controller => 'projects', :action => 'index'

That just basically means that to access your projects all you have to do is go to http://localhost:3000/projects/projectnamehere. More on that later. For now, save and exit again and you’re done with the config folder. We’re almost there! 

Now go back to your command line and while in your project directory(in our case, myhamlizedportfolio) and type

ruby script/generate controller projects

This will generate some files but what we really want to focus on is the newly generated projects_controller.rb located in myhamlizedportfolio/app/controllers. Open this file up with notepad, as usual, and well, just replace all the code there with this:

class ProjectsController < ApplicationController
def index
render :action => "#{params[:id]}/index"

Don’t worry if you don’t understand. That’s just a ‘continuation’ of what we did with routes.rb, basically telling our app that going to http://localhost:3000/projects/projectnamehere means it should render the page with the same name located in your views(again, more on that soon).

Actually you’re done setting up. You can now start coding with Haml. To start, let’s make a design project named RedHelloWorld. Go to your views folder(myhamlizedportfolio/app/views) and make a new directory named RedHelloWorld. Open up notepad again and type these:


%html{:xmlns => "http://www.w3.org/1999/xhtml", "xml:lang" => "en", :lang => "en"}
  = yield :layout

If you have reviewed Haml, that just basically creates the basic headers for your html page. Save that as application.haml and save it in the views/layouts folder(also delete application.html there if it exists). Create a new document yet again and type the following:

  %meta{"http-equiv" => "content-type", :content => "text/html;charset=UTF-8"}
  %title hamlicious home!
  = stylesheet_link_tag 'demo'

    %h1.red HELLO WORLD!

Just by looking at the code, you’ll already know that Haml really makes things easier for you. A lot of time is saved since you won’t be needing to type the appropriate closing tags for each div, or other html tag out there. Save that file as index.haml and save it in views/RedHelloWorld (yup, create a folder with that name).

Next up, is your sass(css) file. Open up a new text file again and type:

  :color #ff0000

Save that as demo.sass and save it in myhamlizedportfolio/public/stylesheets/sass/(you’ll have to create a sass folder). While you’re at it, also delete the index.html in your public/ folder. And now all you have to do is run and test your app! Go to your command line(yet again) and after use_ruby and going to your project directory, just type

ruby script/server

Wait til ou see the lines:

** Mongrel available at
** Use CTRL-C to stop.

And that’s it. You can now access your demo by opening up your browser and going to http://localhost:3000/projects/RedHelloWorld

Hopefully that’ll work. Any problems, leave a comment :P Oh and before I forget, if you need the html and css files(like I do – I just like coding in Haml/Sass) just view the page, view the source and copy paste it in a blank document and save it as .html(in another directory of course). Get the .css file that will be generated in myhamlizedportfolio/public/stylesheets/ and use that for the css file of your project. Enjoy!

More on customizing this app sometime in the future. (namely how to make a “homepage” where you have a list of all your hamlized projects.

Rails for Designers – Using Haml/Sass for all projects

I have recently acquired a newfound drive for designing sites(as opposed to my earlier desire to be a great design/backend mediator). As of now, due to some reent developments, I am the main designer for most of our projects, not to mention some of which are personal or freelance related. One pet peeve I had though was the diversity of my projects: meaning some were in rails(of course I was happy with fixing views and adding some javascript-fu), php, and some, just plain XHTML/CSS.

With that said, things can get pretty messy when multiple projects are at hand and I have to shift continually from regular XHTML/CSS coding and HAML/SASS. Though it is not a great hindrance, having to keep remembering which language I was using was kinda annoying. Add to the fact that I work twice(or thrice) as fast using HAML/SASS and the tiny nuisance becomes a glaring problem(for me that is).

At first, I made a semi-solution. A compromise of sorts: since I use the ever cool Elements CSS framework(actually I just use the general html structure and a modified reset.css which I have discussed with the author, Ben Henschel), my html is usually almost ready-made so my usual focus is just the css file. For projects that used Rails(I still didn’t have a solution for ones that didn’t) but not Haml, I just installed Haml on my part, and continued developing with Sass. Since Sass generates a .css file, that’s the one I usually push in repos(if the client can’t be bothered with installing Haml).

But that was just for Rails projects. The problem lies with normal design projects or ones that used PHP. Recently, I had another solution(I doubt this is the most efficient though): make a blank rails app and keep using Haml/Sass for myself and when done with coding the design, I just do a view source, copy-paste the whole thing in a blank html file, modify the paths for the css and javascripts, then just copy the images/stylesheets/javascripts folders in my public/ folder. Nifty!

It was a good thing for me, since now, I can just keep coding in Haml and Sass to my heart’s content. Thing is, I just realized I just can’t keep making blank rails apps for each project! So the plan was to separate the projects in self-titled folders and just use some routes.rb and controller magic suggested by my friend Greg:

In routes.rb:

map.connect 'projects/:id', :controller => 'projects', :action => 'index'

and in my single controller named projects_controller.rb:

def index
render :action => "#{params[:id]}/index"

With that, I can just go to say /projects/projectA and it will then render projectA. This also works as a portfolio and future-reference of sorts for me, which is excellent. Now I only need to think of a good way to organize the images and the stylesheets(especially the javascripts) so they won’t interfere with each other but basically, I’m just planning to put them in separate folders too(except for reset.css and jquery.js of course – every project needs that!)

Extra note:
Forgot to mention that I had to add 

config.frameworks -= [ :active_record, :active_resource, :action_mailer ]

since I wasn’t using any db.

Rack-based Session Stores on Rails

Rails edge is now using Rack-based session stores. That means you can access the same session on any Rack applications. Read about it on the Rails blog.

Nothing changes though on how you use sessions on Rails. On your Rails app, you’ll have something like

session[:user] = some_user_id

Let’s see how we can access the same session on a Rack application. You can read about Rack here.

Rack handles session using Rack::Session::Cookie. Create a file config.ru

use Rack::Session::Cookie, :key => '_railssession_session', :domain => 'railssession.labs.admoolabs.com'
run Proc.new {|env| [200, {"Content-Type" => "text/html"}, "Rack session 'user' has a value of #{env['rack.session'][:user] || 'nil'}."]}

The key should be the same key that you used on config/environment.rb on your Rails app.

Check out the demo. Set session[:user] on the Rails app, then view the session on the Rack app.