I set myself a goal at the beginning of the year to learn Ruby by the end of it. Well, I finally started doing just that. Actually I’ve tried a couple of times, but didn’t get far into it. By starting with Rails this time, I am actually picking up things a lot quicker. I’ll give all the credit to Michael Hartl, who wrote the book Ruby On Rails 3 Tutorial, which is what I am using, and so far recommend. You can also visit the site here. This isn’t a book review, though I might do later on. This post is the beginning of many that I’m going to use to document my progress. You know, show you where I was being stupid, and the awesome “ah-HA!” moments.

The beginning is the hardest

I’m talking about setup here, not writing any code. There are a lot of things that I had to do before I could start typing anything that looked like Ruby. First came Rails. Installing Rails is actually the easiest part of it. I didn’t have any trouble there.

Then came Git. Had to download an install that, and there is a bunch of stuff you need to do to get that to work with github.com. Be it the key you have to type in, create a repository, then do a test app and add the files, followed by commiting them, then pushing them…went on and on it seemed, but I got Git up and running. Go me!

Next came Heroku. A place to store your newly created app and view it online. Where Git is the version control, heroku.com is like the host. But in order for that to function right, you have to create an app space. Oh ya, install the Heroku gem by the way. Once you have the app space created, you then have to hook it up with Git, so you can use Git to push your app to Heroku. Luckily there is pretty good documentation for this stuff, so if anything goes wrong, which it will, you aren’t dead in the water.

Of course that doesn’t exactly mean everything will go smoothly.

Rails’ Gemfile is cool

This is a file that Rails creates where you tell it what gems your app needs in order to work. I have had a little experience with gems before because of my use of Sass, and recently Haml. While going through this glorious book it tells you what gems to require, and how to add them. So simple in fact that I decided let’s add a few just to see if it really IS that easy. In went Sass, Haml, and Compass. Then of course, you must bundle all this crap together with the “bundle install” at the command line. Piece of cake!

That is until I tried getting everything in the tutorial to work with Heroku. You see, in the book it tells you to include this line:

gem 'sqlite3-ruby', 1.2.5', :require => 'sqlite3'

This gave me an error when I tried to push it to Heroku. Why? Easy! Heroku doesn’t support SQLite databases. FREAKIN’ awesome. I then spent a long time figuring this crap out until a friend sent me to Stack Overflow for the fix. The funny part was that I had already seen that article and I swear I tried the solution. Apparently not though, because putting this in my Gemfile instead, worked:

group :production, :staging do
  gem "pg"
end
 
group :development, :test do
  gem "sqlite3-ruby", "~> 1.3.0", :require => "sqlite3"
end

Everything then was handy dandy for a while. Until I added the Blueprint framework CSS and tried to push it to Heroku. Some error about the SCSS file not precompiled. Again I had to go and search Google’s pages to find the answer, which was to change a line to this:

config.assets.compile = true

I’m told testing is good!

Test-driven development is good according to this book. From what I know now, that is probably a good thing to get into the habit of. This led to installing rspec, which places files in Rails and lets your write test to see if things are working properly. Is the correct title showing up on the right page? Good. No? Fix it. Well, installing rspec was fine, but running my first test popped up an error about something or other. All I remember is having to install something called ANSICON v1.40. Can’t remember what it does, but that it was being asked for.

From rspec install, to first test, to installing ANSICON, to test again was probably about 40 minutes of time. Not terrible, but when you start adding all this stuff up and realize I haven’t actually done anything yet, you start to think that this isn’t as simple as you were hoping. Ruby might be an easy language to read, but getting all this crap going is a serious pain in the ass.

Actually learning something…priceless

At work I sometimes have to dive into the folder structure of Symfony, which is a framework for PHP. Never liked it. Finding crap was a pain because I could never remember where certain things were placed. Learning Rails though has cleared some things up a little. I now understand MVC a bit more. What the hell is MVC? Good question.

It stands for Model View Controller. The Model is what talks to the database. The Controller tells the View what to display and gives/takes things from the View to relate back to the Model. They really need to come out with a book for noobs explaining all the vocabulary in plain terms. Rails provides folders actually called: models, views, and controllers, so you actually get this stuff buried in your brain some.

I see the power of Haml more clearly

Within the folder structure you have a file that makes me think of “template”, called ‘application.html.erb.’ Which now that I just looked it up, apparently IS a templating system, just not as cool as Haml. You can go read my four part series on Haml at your leisure. One thing that really became apparent though is how perfect a fit Haml is with Rails. Rails seems to be about building things quickly and easy to read (due to Ruby), and Haml just adds to that. Now add in Sass? Holy F*$# this is getting exciting. I wish I didn’t feel so late to the party.

A good but difficult start

Well now, it looks like it is going to be a long trip. So far I feel like I have learned a lot, while at the same time having a voice in the back of my head telling me I’m not grasping all of it. Maybe it will take me a couple of passes through this book, who knows. What I do know is that I am having fun learning this, and that has kind of been missing for a little while. I need something to dig into, and Rails/Ruby seem to finally be it for me.

This is not a subject that the average front end developer is going to like unless you have been looking to get into a programming language. Most I know, have no desire to actually do that. A major barrier with Rails though, at least for the inexperienced, is the amount of time you spend using the command line and fixing problems just to get everything running smooth. So much depends on what version of whatever it is you are using, which can cause so many problems. If you add up all the time I spent just trying to get to the “Ok, NOW I can start writing crap” moment, most people would have given their computer the finger and said screw it. This is even more infuriating due to my book saying stupid crap like “If that doesn’t work, try using version 1.2.5. Beyond that use Google.” Ok, not that exactly, but really freaking close.

Anyway, I will write about my progress as I go along and learn or come upon. This is basically what I started this blog for almost two years ago. To show what I’ve learned and what bugged or created difficulty for me.

Haml is great! But for what, is the real question. According to Haml’s website, “Markup should be beautiful.” It definitely does make things look clean and easy to read, but there seems to be a catch. Chris Eppstein (creator of Compass) wrote an article that basically says don’t use Haml for content, and I suggest reading it when you are done reading this. Looking at his first example, which I won’t duplicate here, you see what he is driving at right away. For the actual content of the site, Haml starts to look like garbage. What it IS good for though, is the actual structure of the template. Template, file, whatever. The stuff you write in HTML, like this:

<div id="luckDragon"></div>

Haml can do better:

#luckDragon

The lesson to be learned here is that, for the main layout of your site use Haml. For the fluff we’ll use something called Markdown, which I’ll talk about in Part 3 of this series. In this post, we are going to deal with the basics of Haml though.

Haml’s syntax

The first part you need in an HTML file is the doctype, and while there are many you can use (which you can see here), I am going to use the HTML5 version. The doctype is written out with three exclamation points, like so:

!!!5

Which will give you this HTML output:

<!DOCTYPE html>

Pretty sweet, because I am all about eliminating as many characters as possible, so I can get my work done faster. Haml does this with almost everything.

After that, things are pretty straight forward. Elements start with a “%”, id’s start with a ‘#’, class starts with a ‘.’. What is really badass is that Haml defaults id’s and classes to render as a ‘div’ in the HTML output file, unless you specify otherwise. Let’s take a look some basic syntax in an actual example:

!!! 5
%html
	%head
		%title Stasis - Static Sites Made Powerful
		%link{ :href => "stasis.css", :media => "screen", :rel => "stylesheet", :type => "text/css" }
	%body
		#container
			%nav
				%ul
					%li
						%a{:href=> "#"} Home
					%li
						%a{:href=> "#"} Services
					%li
						%a{:href=> "#"} About Us
					%li
						%a{:href=> "#"} Blog
					%li
						%a{:href=> "#"} Contact Us
			#content

If you have followed along so far, you can easily see what is going on here. Everything with a ‘%’ symbol in front of it, is an element. Everything with a ‘#’ in front of it is a div tag with an id. Once you render this into the HTML file, this is what you get:

<!DOCTYPE html>
<html>
  <head>
    <title>Stasis - Static Sites Made Powerful</title>
    <link href='stasis.css' media='screen' rel='stylesheet' type='text/css' />
  </head>
  <body>
    <div id='container'>
      <nav>
        <ul>
          <li>
            <a href='#'>Home</a>
          </li>
          <li>
            <a href='#'>Services</a>
          </li>
          <li>
            <a href='#'>About Us</a>
          </li>
          <li>
            <a href='#'>Blog</a>
          </li>
          <li>
            <a href='#'>Contact Us</a>
          </li>
        </ul>
      </nav>
      <div id='content'></div>
    </div>
  </body>
</html>

Now I know what you are thinking. Yes, the HTML is not formatted the way you would like it to be, but there are options in changing that, which I won’t get into right now. For now, just accept it and move along. In reality, if you are using Haml, the actual HTML is not what you are going to be working with. You would use the ‘.haml’ file. That is the point here.

Moving forward now, so keep up. If you really looked at the example I used above, you will see something I didn’t mention, and that is an element’s attributes. Not that big of a deal, it’s just markup you wouldn’t recognize if you haven’t seen Ruby. After the element you are going to put the ‘{}’ in, and between that are the attributes. If you have multiple, they are seperated by a comma, and each attribute starts with a colon. The odd part you will most likely forget without looking the first few times is the ‘=>’. I look at it as the attribute pointing to the value it is supposed to be. That could have been the intention, but what the hell do I know. Here is what the link to a css file would look like though:

%a{:href=> "#"} Home

Which outputs this HTML:

<a href='#'>Home</a>

Indentation matters, so pay attention!

Yes, Haml pays attention to how you indent your markup. You probably already do this kind of thing in your normal HTML when you nest your div tags, but it isn’t required. Forget to indent at the right place using Haml, and you could get an error when you try to render it into HTML. In the following example, you will see Haml’s markup for the HTML5 doctype:

!!! 5
%html

The above is correct, but if you tabbed over the ‘%html’, which renders as the ‘html’ tag, you will get the error: “Illegal nesting: nesting within a header command is illegal.” This is because Haml treats the indent as if you were nesting the ‘html’ tag within the doctype.

Now, if you indented an element over twice (2 tabs) from its parent, you would get an error that says something like “The line was indented 2 levels deeper than the previous line.” If you ever get an error like this, you know what your problem is. Indenting is extremely important because it shows Haml how to structure everything. If it is tabbed over from the element above it, that element becomes nested within. Seriously, this is important if you are going to be using Haml.

Rendering Haml into HTML

Two methods really. The regular way, and the way Stasis does it if you have that all loaded and ready from the previous post. I’ll show you both though, just in case.

Using Stasis: at the command line, cd to the directory your file is in (index.html.haml) and type:

$ stasis -o index.html.haml

This will output an HTML file in the public folder named ‘index.html’.

Just using Haml, in the command line, cd to your project folder, and type:

$ haml index.haml index.html

The first file (index.haml) is obviously your Haml file, while the second is what you want the output file to be called (index.html in this case).

Either way is easy, you just don’t have to go through all that install crap that I went through in my first post in this series. I was using Stasis because I might be using its options later.

Final thoughts

I REALLY like Haml for its simplicity, and almost as much as I love Sass. You become aware of things pretty quickly once you start using it, such as indentation being key to writing your structure. I think the best part of writing your layout using this, is that the basics are learned quickly. Once you have it down, writing the main structure becomes a breeze. I should also point out that while you are using Haml’s syntax, you can also inject HTML into it just like normal. Seems kind of pointless, but the option is there.

What’s next?

Since Haml is not great for writing the actual content of the site, the third post in this series will deal with Markdown. It is a plain text formatting syntax that you can use within Haml, and makes writing the content easier.

Hope you learned something today, so leave a comment and let me know!

Artilces in this series:

• Introduction to Haml For HTML Layouts for Newbs – Part 1: Installing Stasis
• Introduction to Haml For HTML Layouts for Newbs – Part 2: Writing Haml
• Introduction to Haml For HTML Layouts for Newbs – Part 3: Markdown Syntax For Content
• Introduction to Haml For HTML Layouts for Newbs – Part 4: Final thoughts

Coupon Code: webmachine

Learning something new is awesome, and writing about what I am learning helps me get it into my head a lot more. Yesterday I started learning how to use Haml, and once I started, I thought I would pass on this newly acquired knowledge on to you. This series is for NON programmers. You might know javascript/jQuery, but the people I am writing this for are not really going to have any real knowledge of programming. If you have just gotten into using Sass, then this is a perfect next step for you. Here are the topics in this four part series:

• Introduction to Haml For HTML Layouts for Newbs – Part 1: Installing Stasis
• Introduction to Haml For HTML Layouts for Newbs – Part 2: Writing Haml
• Introduction to Haml For HTML Layouts for Newbs – Part 3: Markdown Syntax For Content
• Introduction to Haml For HTML Layouts for Newbs – Part 4: Final thoughts

So what the hell is Haml anyway? Well, imagine taking out the syntax of an HTML document, and replacing it with a cleaner syntax. It also adds a ton of other functionality, but what I’m going to be talking about in this series is just basic HTML layout writing. Mainly because I just got started with it myself, so the other stuff will have to wait.

Let’s install Stasis

I have been wanting to use Haml (a Ruby gem) for a long time now, but I didn’t know how to go about doing it. If you are not familiar with the command line or Ruby, things like this are intimidating. Thanks to another Ruby gem, called Stasis, I was finally able to get a Haml file rendered into an HTML file and finally get started with seeing what it is all about. I love learning new things, so thank you to SmashingMagazine for tweeting about it yesterday. Who would have thought they would be the ones to let me know about this?

First, we need to get a few things installed. Most importantly, Stasis, but even before that, we need to make sure we have a few things done. Open your command line and make sure your Ruby Gems are updated (it’s probably just a good idea to do so):

NOTE: the ‘$’ seems to be a universal thing when showing that you are writing a command line instruction. No idea why, but I’ll use it as well. Just note that you do NOT type the ‘$’ in the command line.

$ gem update --system

Then install Haml:

$ gem install haml

That was the easy part. Now onto the annoying crap. I had to install a bunch of gems to get stasis to work, and while I am not sure which ones are required, I recommend doing all of them at the same time. The one I know you need for certain, is the Ruby DevKit. Go there, download it, extract it (I did it straight to my C: drive), and then go to the command line, change directories until you are at the location of where you put the DevKit, and type:

$ ruby dk.rb init

After you get the confirmed initialized message, type this:

$ ruby dk.rb install

Now, it might just work after that, but mine was still having issues, so I went to the Stasis page on the Ruby Gems website and installed everything that was listed at the bottom:

$ gem install directory_watcher
$ gem install redis
$ gem install slop
$ gem install tilt
$ gem install yajl-ruby
$gem install rake
$gem install rspec

I’m guessing you don’t need all of that, but it didn’t hurt. Once you have all of THAT done, NOW you can install Stasis:

$ gem install stasis

Start a new project

Now that you have Stasis installed, go and create a folder to test all this crap in. Create a new file and save it as ‘index.html.haml’ using a text editor (Notepad++ for me!), within that folder. Next, go back to the command line and change directories until you are in that folder, then:

$ stasis

This should place a folder within the one you created, called ‘public’. In it, you will see a file called ‘index.html’.

Can I use Haml now? Please?

YES! Just not in this post. I’ve probably already went beyond your capacity to really pay attention to me anymore, so you shall have to wait until the next post! I’ll let you see a hint of what Haml is all about though.

What you might write in HTML

<div id="container">
    <p>This is typical crap.</p>
</div>

The same thing, but written in Haml:

#container
    %p This is typical crap.

So what will we be learning in the next post?

The fun stuff of course. Haml’s basic syntax as I walk you through how to write up a standard static web page. The third post will be on writing the content (what you read on the site) using Markdown syntax, and putting it within Haml. The final post in the series will be my thoughts on all of it combined.

If any pros have an easier way to just use Haml (and quickly), I’d love to hear it!

Coupon Code: webmachine

I’ve hemmed and hawed over what programming language to learn, and was pretty much settled on PHP…just never got around to learning it. I have put PHP on the side burner for now, because it became obvious on what I should try to pick up. I’m already using Sass, which is a part of Haml, which is a gem….of Ruby. Might as well learn the parent of what I am already starting to use. So, no brainer for me. Is it for you? How the hell would I know? But I’ll tell you my experience so far, which isn’t much.

The Scary Part – Installing it!

NOTE: For people on a PC only as I have no experience doing this on a Mac or Linux machine.
Now that I have installed Ruby three separate times, it has become less intimidating than it was when I first did it. If you are interested in learning Ruby, but have a slight fear in diving in head first, let me tell you what you need to know without all the bullcrap and non-helpful documentation you will read. Ready? Here we go:

• Download Ruby – You want the one under ‘Ruby on Windows’, and the link that says “Ruby 1.9.2-p0 RubyInstaller”
• Double click the .exe file that downloaded onto your machine.
• IMPORTANT: Look at the graphic below, when you get to the screen that shows that, MAKE SURE BOTH OF THOSE CHECK BOXES ARE CHECKED

Do that and you are fine. Without those checked, I could not run Ruby from any directory. Took me a couple of re-installs to figure that out. Congrats, Ruby is installed! Now you might as well get the rest of the crap out of the way. I haven’t gotten into Rails yet, but it seems like that is the framework of choice. Let’s do that next:

• Follow this link to RubyForge
• Look where it says RubyGems, click the download button, and download one of the 1.3.7 files
• Extract/unzip (whatever) the file
• Click on the Windows Icon/Start thing, and type ‘cmd’
• Navigate to the directory for it (for me it was:C:\Users\Jeremy\Desktop\rubygems-1.3.7\rubygems-1.3.7
  - note that to change to a directory you type ‘cd’ and the directory name – ‘cd Desktop’ – to go back a directory you type ‘cd..’
• Type ‘ruby setup.rb’ in the command line
• When it is finished, type ‘gem update’ just to make sure
• Type ‘gem install rails’

Let’s install Haml/Sass and Compass while we are at it.

• Type ‘gem install haml’
• Type ‘gem install compass –pre’

Now get up, go grab a beer and watch some SAMCROW cause that was nuts, wasn’t it? Not for newbs, and not for idiots like me. It took me a silly amount of time to get this down.

Is Ruby the language Written For Front End Developers?

What makes Ruby appealing to me, over say learning PHP or any other language is that at first glance it seems to be ‘coding for dummies.’ Why is that, you ask? Because if you have ever looked at PHP code, you will see a lot of extra syntax. Commas, quotes, dollar signs…a ton of stuff like that. In Ruby, a lot of that crap is gone. I want to assign my name to a variable it looks like this:

name = "Jeremy"

I want it to be all uppercase? Fine and dandy…

name.upcase

That simplicity is what attracts me to Ruby, which is probably the same reason I like jQuery. I want a language that is clean and easy to write…and remember. The learning curve seems way lower than something like PHP, and that appeals to me, because I want to learn it quickly. Just looking at beginning examples seems like Ruby is almost an abstraction of a different language. Like someone said, let’s take PHP and take out all the crap. Now, I have no real authority to say that is actually what happened, but that is the feeling I get when I look at sample code.

What I am curious about, is how everything ties together to actually make a site using it. The time spent learning Ruby in the beginning seems to be dedicated to actually learning the language itself, which is what the book I have bought recently, is doing. A “here’s how to do stuff”, and then followed later by “Now that you know what you are doing, let’s do it.” Now, you might say, ya all languages do that, but Ruby is different. I can’t exactly write some code and then preview it in a browser. At least, I don’t know about it yet if there is. The whole experience so far has been “Let’s write out some code in the ‘irb’ (“Interactive Ruby Shell” – which is just typing some Ruby out in the command line to see if it works. So if you expect to type some crap and see the fruits of your labor displayed in its greatness in a web browser, you are going to be disappointed.

The real question though is, because of its…level of abstraction feel, is it a better language for non-programmers (at the moment) to learn first over something like PHP? It sure seems that way because of the learning curve. I fear I am trying to learn Ruby because of that factor, instead of it being the better solution in coding. I’m not all that sure what the advantages/disadvantages are, but half the fun is going to be finding out. Hopefully I am making a good choice in picking Ruby, and if not, I hope I find out quickly.

Coupon Code: webmachine

I’m interested in it because of Sass and what you can do with CSS. Here are just some examples I’ve seen with what you can do with Sass (Syntactically Awesome Stylesheets).

Variables:

!blue = #3bbfce
 
.content_navigation
  border-color = !blue

And this looks just plain awesome:

.highlight {
  border: 1px #666666 solid;
}
.moreHighlight {
  @extend .highlight;
  background-color: #ff0000;
}

From what I’ve read, this means that anything with the style of moreHighlight also gets the styles of highlight. There are other things like Mixins and such that look bad ass as well.

What I’m curious about though, is it looks like it is compiled. Does this mean I have to do something every time I make a change to the file? Meaning re-compile it? Again, help me out!