What really blows is I don’t have a way of knowing where ALL the instances of the images are, so I had to use my now current favorite shell command to search where a said image is placed in a view:

grep -r -i imagename *

What that does is look which file and line in that file that the imagename string is mentioned. I usually just look for the name itself, and not the extension and the sub-folder, so to look for logo.jpg, I just put

grep -r -i logo *

That returns all the files where logo is mentioned(so I guess you’ll also get non-image results). What’s good about this is that it looks for both the instances when the image was rendered using <img src> or <%= image_tag %>

Seeing my first search resulted in 11 hits(I think the options -r -i of grep searches incrementally so it will also look in all sub-folders of the directory you are in), it occurred to me that this might take a while, as I also had to look for all the files, etc. I asked my friend to help in some shell-fu and here’s what we came up with:

gedit `grep -r -i -l imagename *`

What does this do? Simple, the -l option just lists the filename of the file where imagename was seen(as opposed to including the actual line where it was seen), and the grep enclosed in “ means that the output will be a string…which in turn is sent to gedit. The result? It opens up all the files that contains imagename and that my friends, made my life a wee bit easier in changing the alt tags in all the instances of a said image.

*EDIT:
By the way, I know there is an easier way, like maybe replace all instances of said string in all files or something, but I haven’t found out about it yet. If I do, I’ll be sure to make a new post about it

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 ). 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"
end
end

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:

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

  %body
    %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:

.red
  :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 0.0.0.0:3000
** 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 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.

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"
end

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.