Creating a new Ruby on Rails Project

Though creation of a new project has been mentioned in our previous post on "Introduction to Ruby on Rails", I am taking out the exact part of creating a new project into a blogpost as it would be easy for you to bookmark it.


Creation of new Rails project - Project name: first_app

---

#creates a rails app with all required folders
rails new first_app

#enter the directory of our app
cd first_app



Edit the Gemfile  specifying the exact versions of the gems required

---

source 'https://rubygems.org'

gem 'rails', '3.2.8'

group :development do
  gem 'sqlite3', '1.3.5'
end


# Gems used only for assets and not required
# in production environments by default.
group :assets do
  gem 'sass-rails',   '3.2.4'
  gem 'coffee-rails', '3.2.2'

  gem 'uglifier', '1.2.3'
end

gem 'jquery-rails', '2.0.2'

---

#Install the gems specified
bundle install 

#start the server
rails server

Open the webpage http://localhost:3000

---

Deploying your Rails App

#We use Heroku to deploy our rails application - Install heroku gem
gem install 'heroku'

heroku add:keys

#The --stack cedar argument arranges to use the latest and greatest version of Heroku, called the Celadon Cedar Stack. It creates a subdomain for us
heroku create --stack cedar

#Just push/deploy the code using the following git push command as heorku works seamlessly with git
git push heroku master

#That's it, our application is deployed, you can view it using this command.
heroku open

Version Control of your Rails Application using Git

Creating and Configuring Git Repo

#Set your name for identifying the commits
git config  --global user.name ""

#Set your email for correspondence during collaboration
git config  --global user.email xyz@gmail.com

#creating a shortcut "co" for checkout
git config --global alias.co checkout

#while we are inside our app directory, initializing a git repository
git init

#Adding all files in the current directory(.)
git add .

#Checking the status of the files under git repository. Since it's not committed yet, All of them woudl be visible
git status

#Committing the code with a message "Initial Commit" specified with -m flag
git commit -m "Initial commit"

#Now checking github status will give empty as everything is committed
git status

#Check the git log
git log

#Once the code has been commited, we can push it to Github for backup or collaboration
git remote add origin https://github.com/vamshi4001/first_app.git

#Push the code to remote origin added above as master branch
git push -u origin master


Branch, Merge, Delete and Push


#if you wanna edit something without affecting the original code, you create a branch
#This can be done using the following checkout "co" command with a flag -b and name of the branch
git co -b modify-README

#Check the list of branches with following command. It also shows which branch are we currently using with * before it
git branch

#Changing the extension of rdoc to md(Markdown Markup language), which github can understand and format neatly.
git mv README.rdoc README.md

#Check ths status of the git repo now. We have one rename and one modification
git status

#We need not add the renamed file now. We have a flag -a which will take into account all modified including the renamed ones.(Not newly created)
git commit -a -m "Improved the README file"

#Now we have committed to a branch created. We'll switch back to our master with following command.
git co master

#Now merge the changes in the branch "modify-README"
git merge modify-README

#check the branches, we'll be currently on master(indicated by a * beside master)
git branch

#Since we are done with modifications and merged, you can abandon it or delete it using a -b flag as follows
git branch -d modify-README

#Now push the modified and committed code to github
git push

Introduction to Ruby on Rails

This blogpost is kind of summary for most of the tutorials out there on internet. Once you've gone through them and if you would like to note important steps - just bookmark this post.

Ruby on Rails Setup

We need rvm, ruby, rails and creation of a gemset

---

#Install rvm
bash < <(curl -s https://rvm.beginrescueend.com/install/rvm)

#check versions
rvm -v

#Gives the list of available ruby versions
rvm list known

#Install ruby version 1.9.3
rvm install 1.9.3

#Check version of ruby
ruby -v

#Create a Gemset rails3tutorial2ndEd and use it as default
rvm use 1.9.3@rails3tutorial2ndEd --create --default


Now Install rails for this particular gemset and ruby version

---

sudo rvm use 1.9.3@rails3tutorial2ndEd do gem install rails

Now all required gems are installed.
Also install git along with this. So now we have Ruby, RVM, Rails, Git
Check GEMS with "gem list"


Now create a rails projects

---

#creates a rails app with all required foldersrails new first_app

#enter the directory of our app
cd first_app



Edit the Gemfile  specifying the exact versions of the gems required

---

source 'https://rubygems.org'

gem 'rails', '3.2.8'

group :development do
  gem 'sqlite3', '1.3.5'
end


# Gems used only for assets and not required
# in production environments by default.
group :assets do
  gem 'sass-rails',   '3.2.4'
  gem 'coffee-rails', '3.2.2'

  gem 'uglifier', '1.2.3'
end

gem 'jquery-rails', '2.0.2'

---

#Install the gems specified
bundle install

#start the server
rails server

Open the webpage http://localhost:3000

---

How to create a cool and usable CSS3 search box

Source: http://www.red-team-design.com/how-to-create-a-cool-and-usable-css3-search-box

In this new article, you’ll learn how create a cool and usable CSS3 search box using the HTML5placeholder attribute. For the browsers that don’t support this new HTML5 attribute, a fallback is created using Modernizr’s feature detection.

View demo

STRUCTURE

The form element is used as the wrapper, while the two inputs are used as search field and search button respectively.

The HTML code

You may notice the placeholder attribute, but just ignore it for now, as we will talk later about it.

The reason why there are so many id’s (instead of CSS3 advanced selectors asinput[type="text"] or input[type="submit"]) is because I wanted this to degrade gracefully for older browsers.

THE CSS

Form wrapper

#searchbox
{
 background: #eaf8fc;
 background-image: -moz-linear-gradient(#fff, #d4e8ec);
 background-image: -webkit-gradient(linear,left bottom,left top,color-stop(0, #d4e8ec),color-stop(1, #fff));
 
 -moz-border-radius: 35px;
 border-radius: 35px;
 
 border-width: 1px;
 border-style: solid;
 border-color: #c4d9df #a4c3ca #83afb7;            
 width: 500px;
 height: 35px;
 padding: 10px;
 margin: 100px auto 50px;
 overflow: hidden; /* Clear floats */
}

Below you can see the current result:

Inputs

Quick tip:

When adding float: left to an element, there’s no need to add also display: block. The last one it’s implied.

#search, #submit
{
 float: left;
}

#search
{
 padding: 5px 9px;
 height: 23px;
 width: 380px;
 border: 1px solid #a4c3ca;
 font: normal 13px 'trebuchet MS', arial, helvetica;
 background: #f1f1f1;
 
 -moz-border-radius: 50px 3px 3px 50px;
  border-radius: 50px 3px 3px 50px;
  -moz-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.25) inset, 0 1px 0 rgba(255, 255, 255, 1);
  -webkit-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.25) inset, 0 1px 0 rgba(255, 255, 255, 1);
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.25) inset, 0 1px 0 rgba(255, 255, 255, 1);            
}

/* ----------------------- */

#submit
{  
 background: #6cbb6b;
 background-image: -moz-linear-gradient(#95d788, #6cbb6b);
 background-image: -webkit-gradient(linear,left bottom,left top,color-stop(0, #6cbb6b),color-stop(1, #95d788));
 
 -moz-border-radius: 3px 50px 50px 3px;
 border-radius: 3px 50px 50px 3px;
 
 border-width: 1px;
 border-style: solid;
 border-color: #7eba7c #578e57 #447d43;
 
  -moz-box-shadow: 0 0 1px rgba(0, 0, 0, 0.3), 0 1px 0 rgba(255, 255, 255, 0.3) inset;
  -webkit-box-shadow: 0 0 1px rgba(0, 0, 0, 0.3), 0 1px 0 rgba(255, 255, 255, 0.3) inset;
  box-shadow: 0 0 1px rgba(0, 0, 0, 0.3), 0 1px 0 rgba(255, 255, 255, 0.3) inset;     

 height: 35px;
 margin: 0 0 0 10px;
        padding: 0;
 width: 90px;
 cursor: pointer;
 font: bold 14px Arial, Helvetica;
 color: #23441e;
 
 text-shadow: 0 1px 0 rgba(255,255,255,0.5);
}

#submit:hover
{  
 background: #95d788;
 background-image: -moz-linear-gradient(#6cbb6b, #95d788);
 background-image: -webkit-gradient(linear,left bottom,left top,color-stop(0, #95d788),color-stop(1, #6cbb6b));
} 

#submit:active
{  
 background: #95d788;
 outline: none;
   
  -moz-box-shadow: 0 1px 4px rgba(0, 0, 0, 0.5) inset;
  -webkit-box-shadow: 0 1px 4px rgba(0, 0, 0, 0.5) inset;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.5) inset;  
}

#submit::-moz-focus-inner
{
       border: 0;  /* Small centering fix for Firefox */
}  

HTML5 PLACEHOLDER ATTRIBUTE

This new HTML5 attribute shows a text in a field as long as the field is empty and not focused, then hides the text. You surely have seen this technique before with JavaScript!

Browser support:

• Firefox 3.7+
• Safari 4.0+
• Chrome 4.0+
• Opera 11+
• IE10+

Opera 11 supports it, but you cannot style it (yet). As for the others above, here’s how you can style it:

#search::-webkit-input-placeholder {
   color: #9c9c9c;
   font-style: italic;
}

#search:-moz-placeholder {
   color: #9c9c9c;
   font-style: italic;
}  

#search:-ms-placeholder {
   color: #9c9c9c;
   font-style: italic;
}   

Fallback support

For web browsers that are not supporting the this new HTML5 attribute, I made a fallback.

I used Modernizr to detect native support for the HTML5 placeholder attribute. Even if this could have been done by writing a short function, I love Modernizr as it also enables you to use more semantic elements from the HTML5 specs.

#search.placeholder {
   color: #9c9c9c !important;
   font-style: italic;
} 

$(document).ready(function() {           
 if (!Modernizr.input.placeholder)
 {  
  var placeholderText = $('#search').attr('placeholder');
  
  $('#search').attr('value',placeholderText);
  $('#search').addClass('placeholder');
  
  $('#search').focus(function() {    
   if( ($('#search').val() == placeholderText) )
   {
    $('#search').attr('value','');
    $('#search').removeClass('placeholder');
   }
  });
  
  $('#search').blur(function() {    
   if ( ($('#search').val() == placeholderText) || (($('#search').val() == '')) )                      
   { 
    $('#search').addClass('placeholder');       
    $('#search').attr('value',placeholderText);
   }
  });
 }                
});

View demo

CHROME’S INSET BOX-SHADOW BUG

There is a bug on Chrome when both border-radius and inset box-shadow are used. Anyway, there is good news about that. Paul Irish announced last month that Chrome’s inset box-shadow bug is fixed.

Later update

The demo was updated, thanks for pointing this out Atul.

So, if you’re using Chrome beta 10.0.648.119 or a greater version, this should work just perfect!

CONCLUSION

This example it’s mostly about progressive enhancement.

Regarding the CSS, as you will notice, this example will degrade gracefully for other old browsers. Now, regarding the HTML5 placeholder attribute, if native support is missing, then the Javascript code will do it for you.

Reverse search of Stock quotes

Hello All,

We've seen a lot of stock market applications which would try to put together a great amount of information relevant to us for which you will feed in a list of stocks you are interested in or you've invested in. As we all know, we don't know a lot of public companies in this world which are comparably making good profits than the stocks you already know. There may be a huge amount of hype given for certain quotes, but some may go unnoticed. There might be some stocks which are kind of underdogs but are earning a lot(at least comparatively). 

Say, you have an interest of investing about $500 with about $12 per share in some profitable company. So you have a question in front of you i.e. what are all stocks that have a current value around $12. This has invoked an idea of building a tool which will fetch you all stocks for a given range of your interest.

You provide us with your lower cap and upper cap for current ask value and we fetch you the relevant stocks ordered by their current value. You wanna check more details about a quote listed, it's just a click away - click on the stock name - you see the details in the box beside!

This is just the beginning and lot more usable functionality coming soon. Watch this space for more updates. Thank you all for trying this tool.

Sports n Pics - Timeline of Sports in pictures

The following article is about Sports n Pics: http://mycollect.in/snp

The morning after euro2012 final happened, I woke up and was curious to see how did people around the world reacted before, during and after the match. I am sure there will be mixed reactions, exciting moments, celebrations for some and sadness for some. I can get all these in the form of news articles or boston.bigpicture or something like that. 

But I wanted to see the real feelings of people, their preparation for the match, their arrangements and cool merchandise bought, funny hats, happiness in their faces, love towards their favorite team, heartfelt situations during the match followed by elated moments. Finally celebrations in winning team and  other team's feelings for their defeat. Every moment mentioned above is felt by all football fans, I wanted to see them in personal. 

Best way I found is Instagram! People post every activity as mentioned above, which is a huge resource for fulfilling my request. But there was no way I can see them as a sequence in a nice UI where I need not do many clicks or run through several pages. 

With this pain point, I decided to develop an application which would solve this purpose. You can select your favorite league and filter the teams, select a team to see a timeline of pictures being listed and will keep on coming as you scroll down - that's it - select a team with single click and watch a huge set of pictures from all around the world depicting different feelings and moments of every one's life for a given sports event or a team. 

Link for my application is http://mycollect.in/snp

Now this application hosts all teams of MLB, NFL, NHL, MLS, NBA. So this would be a treat for fans of baseball, football, hockey, soccer and basketball!

Show your love by sharing and liking it. 

This is still in beta and adding many more features to make a perfect applications for a sports fan.

Please let me know your feedback.