Twitter-Bootstrap-with-Ruby-on-Rails

Twitter Bootstrap with Ruby on Rails

In this short tutorial we will learn how to install Twitter Bootstrap into a new Ruby on Rails app. We will then create simple pages to test our Bootstrap installation.

Include the following line into you Gemfile in your ruby on rails app.

gem 'bootstrap-sass'

Next, run the “bundle install” command in terminal to install Twitter Bootstrap dependencies.
bundle install
Create the file custom.css.scss in your app/assets/stylesheets directory.
In the app/assets/stylesheets/custom.css.scss file you created add the following:

@import "bootstrap";

Now we need to generate a controller so we can setup our dynamic pages. Run this in terminal:rails generate controller Pages home about downloads contactNotice the folder named pages that is created in your /app/views/ this folder contains four files that were created. home.html.erb, about.html.erb, downloads.html.erb, and contact.html.erb which are the parameters(pages) we added at the end when we generated the controller. It is important to know what happens when generating a controller in Ruby on Rails. Aside from creating the views and pages, the generator also creates routes for your pages in config/routes.rb it adds the following lines to your config/routes.rb file:

get "pages/home"
get "pages/about"
get "pages/downloads"
get "pages/contact"

The generator also creates the file pages_controller.rb which is located in app/controllers/ in this controller file a class named PagesController and four method actions called home, about, downloads, and contact are defined.

Now in order to view our site we need to get rid of the default index.html file in your /public/ folder. Delete it using the following command inside the public directory: rm index.html

Next we implement the HTML and CSS code required to make a bootstrap page. In order to keep our pages simple and organized we are going to structure it using partials. First we create a layout partial for the header of our site. In app/views/layouts create a file named _header.html.erb and add this code to it:

<div class="masthead">
  <h3 class="muted">Sky Tutorials</h3>
  <div class="navbar">
    <div class="navbar-inner">
      <div class="container">
        <ul class="nav">
          <li class="active"><%= link_to "Home", root_path %></li>
          <li><%= link_to "About", about_path %></li>
          <li><%= link_to "Downloads", downloads_path %></li>
          <li><%= link_to "Contact", contact_path %></li>
        </ul>
      </div>
    </div>
  </div>
</div>

Notice the link_to ruby commands and the code root_path, about_path, downloads_path, contact_path. We will need to define these paths later on.

Now, open your app/views/layouts/application.html.erb file so we can add the newly created _header.html.erb partial code. We are adding this ruby helper code to application.html.erb:

<%= render 'layouts/header' %>

We are also adding a container div to wrap our website and make it a little more structured. Your entire application.html.erb should look like this:

<!DOCTYPE html>
<html>
<head>
  <title>Tester</title>
  <%= stylesheet_link_tag    "application", :media => "all" %>
  <%= javascript_include_tag "application" %>
  <%= csrf_meta_tags %>
</head>
<body>
  <div class="container">
<%= render 'layouts/header' %>
<%= yield %>
</div>
</body>
</html>

Finally in order for our links to work we need to re-route our views. Open your config/routes.rb and change these 4 lines of code:

get "pages/home"
get "pages/about"
get "pages/downloads"
get "pages/contact"

to this:

  root to: 'pages#home'
  match '/about', to: 'pages#about'
  match '/downloads', to: 'pages#downloads'
  match '/contact', to: 'pages#contact'

CONGRATULATIONS! We are now finished creating the structure of a basic website using Twitter Bootstrap and Ruby on Rails. Start you Ruby on Rails app using the rails command:rails server then navigate to your ruby on rails app by going to http://localhost:3000/ you should get a page that looks like this:

Twitter Bootstrap Ruby on Rails Homepage

Twitter Bootstrap Ruby on Rails Homepage

All of the links should take you to different pages(although they are not too different.) It might not look like much now but these are the fundamentals of the Ruby on Rails framework. You can now go into your /app/views/pages/ directory and edit any of the 4 files we generated(home, about, downloads, contact). Once you edit these files you can see the changes on your website.

Ender's Game Book

Ender’s Game Begins…

No novel has come close to what Ender’s Game did for me. It changed me. It molded me. It created a new persona and I loved it. I first read Orson Scott Card’s novel in high school. The story about a genius boy that is sent into space military to train for an impending alien invasion. Earth has been attacked by the Buggers, a hive-like alien force that is out to destroy humanity. Ender Wiggin is a young boy prodigy who is chosen to lead the army of Earth against the Buggers. Together with a team of the most skilled minds of the world, Ender must defeat the alien enemy.
The book has everything an intelligent reader finds attractive; greater-than-life characters, an engaging plot, the right amount of action, political science, military strategy, a formidable enemy, and an interesting view of the future.

The characters in the book are outstanding, they range from intellectual geniuses to psychotic killers. You will find yourself relating to the character if you have ever been bullied or outcasted. If you have ever struggled in life you will respect Bean. You will want the characters to be loved and be happy, but at the same time know that they need to be trained to perfection.

Politics is an important part of the book. You will adore how Ender’s siblings use the internet to influence the world and create political agendas eventually forming a hegemony.

The young heroes are being trained by the International Fleet in what is called Battle School, a military installation in space. This is where most of the action happens. Here the heroes are taught to work together, fight against each other in zero gravity, and are given a military style upbringing.

The novel is very emotional dealing with many aspects of human nature like bullying, sibling rivalries, love, and the most drastic, war. When I first read the book I fell into it’s sci-fi daze. I dreamt about the technology the kids used. The kid’s “desks” were iPad like computers where they did their homework, received orders, and played games. At the time, iPads didn’t exist and I absolutely loved the idea of a tablet that could be used like the desk’s in the book. It seemed Orson Scott Card imagined how computing would evolve.

Ender & Colonel Graff

Ender & Colonel Graff

The book is finally being turned into a movie and I am more than excited to see Ender played by Asa Butterfield, the great acting kid from Hugo and the The Boy in the Striped Pajamas. I was also very surprised(and excited) to see Harrison Ford play the part of Colonel Graff. I am pleased to predict that with such a great casting it’s going to be a good adaptation of the book.  Check out the official Ender’s Game [movie] Blog.

Here are some photographs from the official blog:

The Future is Good

Although the technology for transparent screens and projection holograms are a few years off, Microsoft has the right idea when it comes to future tech. The “If anything were possible” ideas leads to innovation and progress in current fields. We just have to remember to ** implement** these great ideas. Also make sure you notice the “glasses” which give the user augmented reality similar to the technology that Google is developing called Google Glass. I predict that these type of augmented reality glasses will eventually become the dominant method to work and play.

The video shows interfaces and devices that are simple, elegant, intuitive, and responsive. Traits that make great tech products.

Continue reading

Ruby on Rails Max OS X Mountain Lion

Ruby on Rails on OS X Mountain Lion

This is a step-by-step guide for installing Ruby on Rails development environment on MAC OS X Mountain Lion 10.8.2. This is the prerequisites for creating a Heroku Ruby on Rails App and following the tutorial on Heroku. This tutorial will show you how to get Ruby on Rails installed on Mac OS X Mountain Lion.

I had a few problems getting a Ruby on Rails development environment installed on my Mac with Mountain Lion, so I created this quick guide for future reference and to help out anyone who is having problems with Ruby on Rails installation on Mountain Lion. Mountain Lion comes with ruby 1.8.7 installed, we need to update it.

The first thing you need to do is install Git, you can find the GIT installer here: Git Download

Next let’s install homebrew using terminal:
ruby -e "$(curl -fsSkL raw.github.com/mxcl/homebrew/go)"

Make sure you have the latest Xcode installed. Then, go to preferences in Xcode and click on the “Downloads” tab and install Command Line Tools. If you don’t have the latest version of Xcode and Command Line Tools installed ruby will fail to compile. This took me a few hours to figure out as RVM was failing to install, once you have Xcode and Command Line Tool you can continue to install the Ruby Version Manager which installs different ruby versions.

Install RVM (Ruby Version Manager):
bash < <(curl -s https://raw.github.com/wayneeseguin/rvm/master/binscripts/rvm-installer )

Install Ruby 1.9.3 using RVM:
rvm install 1.9.3

Make Ruby 1.9.3 your default:
rvm use 1.9.3 --default

Install Bundler:
gem install bundler

Install Rails:
sudo gem install rails

Install Postgresql:
brew install postgresql

Install PG Gem:
gem install pg

You are now ready to follow the Heroku tutorial and get a Ruby on Rails app running on Heroku. Follow this Getting Started with Ruby on Heroku Tutorial.