HOW TO INSTALL RUBY ON UBUNTU 15.10

In addition to my front-end track on freecodecamp.com, I have started to tinkering with the back-end stuff. For back-end stuff I have decided to go the Ruby way.

I am inspired to select ruby after watching the ruby on rails tutorial by Mattan Griffels. So first thing is to install ruby on my Linux system aka Ubuntu.

After going through the installation documentations, I came to know that best method to install ruby on Ubuntu is via RVM (Ruby Version Manager).

Benefits of RVM are as follows:-

1.  RVM helps in installing multiple ruby interpreters and run-times very easy and consistence

2.  Makes features such as gem-sets supported out of the box.

3.  We can run different ruby versions in different terminals at the same time and they wont mess up with each other.

To install RVM I fired up my Terminal using CTL+ALT+T

On the prompt typed

gpg --keyserver hkp://keys.gnupg.net --recv-keys 409B6B1796C275462A

1703113804BB82D39DC0E3

I also wanted to install rails so I added --rails to end of the following command.

\curl -sSL https://get.rvm.io | bash -s stable --rails

Completion of installation of RVM takes a while depending on the internet speed.

On completion of  RVM installation to verify it I ran the following command in browser.

  type rvm | head -1

It gave me the following output.

 rvm is hashed 

The output should have been.

rvm is a function.

I was getting this issue because the gnome-terminal was not running the

command as login shell. 

The resolution of this issue is very simple. 

In the Terminal window menu click on "Edit" menu then > "Profile Preferences" and in the window that appears select the "Command" tab, and check the checkbox called Run command as login shell. 

That's it than I again checked by typing the above mentioned command and it worked.

Links below will help in installation of Ruby on any OS.

RailsBridge Installfest

MY READING LIST OF RECOMMEDED WEB DESIGN BOOKS

In this post I am listing down the books that are on my reading list. This is will be a fluid list, that means I will keep on adding the books as I go about finishing a few. I have selected the books that are on recommended list for web designers The idea here is to engrave the programming lingo and procedure in my brain, by continuously impounding it with the programming terminology which will bring me closer to my goal of mastering the web design.

So here is my list:

1.  HTML and CSS: Design and Build Websites, by Jon Duckett. 
2.  JavaScript and JQuery: Interactive Front-End Web Development, by Jon   Duckett.

3.  Learning Web Design: A Beginner’s Guide to HTML, CSS, JavaScript, and Web Graphics, by Jennifer Niederst Robbins.

4.  Don’t Make Me Think, Revisited: A Common Sense Approach to Web Usability, by Steve Krug.

5.  Design for Hackers: Reverse Engineering Beauty, by David Kadavy.

6.  Learn to program, by Chris Pine.

7.  Learn ruby the hard way, by Zed Shaw. 

8.  Michael Hartl's Rails Tutorial.

Other resources that I intend to follow;

1. One month rails, by Mattan Griffel.

2. The odin project.

If you have any suggestions please let me know by commenting below on this blog post

WIKIPEDIA VIEWER - PROJECT

Finally I have completed this project and what a feeling on accomplishing this project. It took be almost a week, I even thought of quitting this boot-camp.

So the objective here was to build a CodePen.io app that is similar to this the one posted here http://codepen.io/FreeCodeCamp/full/pgNRvJ.
 
These are the rules for the game.

#1: I have to figure out the code myself no cheating allowed. (Initially I      completed it by coping code from somewhere, but then angel stuck me. loll)

#2: Fulfill the below user stories. Use whichever libraries or APIs you need.

So the user stories that I had to fulfill are as follows.

#1: One should be able to search Wikipedia entries in a search box and see the resulting Wikipedia entries.

#2: One can click a button to see a random Wikipedia entry.


At last the clues are here:

1: URL use to get a random Wikipedia article:
    http://en.wikipedia.org/wiki/Special:Random.

2: Entry on using Wikipedia's API:
    http://www.mediawiki.org/wiki/API:Main_page.
 
My comments:

1.Initially I was overwhelmed by the mere size of the API and its documentation.

2.Completely clueless about the vocabulary and how this API sandbox worked.

3.Thought of quitting this Freecodecamp.com thing.

But than something in me told me hang-on and you will do it. then I went on to figure out the things one by one. If I write each and everything it will run into a book. So after a week long struggle here is my still not so good product (still a lot of scope for improvement).

See the Pen Wikipedia Viewer by Bhagwant Singh (@sagit2002) on CodePen.

SHOW THE LOCAL WEATHER - PROJECT

Objective: The objective here is to build a CodePen.io app that is functionally similar to this: http://codepen.io/FreeCodeCamp/full/bELRjV.

The rules are as follows:-

#1: Don't look at the example project's code. I have to figure it out myself.
#2: I have to fulfill the following user stories. I am free to use whichever libraries or APIs and look of the App as well

The user stories are given as:-

#1: User should we able to view his current weather condition.
#2: User should we able to see a different icon or background image (e.g. snowy mountain, hot desert) depending on the weather.
#3: User should be able to push a button to toggle between Fahrenheit and Celsius.

I used the Open Weather API to build this app. I had to struggle a little bit with ajax queries and toggling of the temperature into Fahrenheit and Celsius.

I don't think this is a perfect App, but I will try to improve it as I learn more and have more experience with web development.

So here is my version of the Show The Local Weather App. Please check it out by clicking on the embedded version.

See the Pen Show the Local Weather by Bhagwant Singh (@sagit2002) on CodePen.

BUILD A RANDOM QUOTE MACHINE - PROJECT

Objective: The objective here is to build a CodePen.io app that is functionally similar to the one given here : http://codepen.io/FreeCodeCamp/full/bELoPJ.

The rules are as follows:-

#1: Don't look at the example project's code. I have to figure it out myself.
#2: I have to fulfill the following user stories. I am free to use whichever libraries or APIs I need.

The user stories are given as:-

#1: A button to show a new random quote.
#2: A button to tweet out the quote.

I used the Random Famous Quotes API by Andruxnet delivered in Json format.

Initially I found myself clueless about the API thing. To solve this issue I went through API documentations.

Next issue I was not able to figure out how my Jquery code is doing. Inorder to solve this and find where my code was failing I fired up firebug addon for firefox. In the firefox console I could easily check my code running issues.

So here is my version of the Random Quote Machine. Please check it out by clicking on the embedded version.

See the Pen Random Quote Machine by Bhagwant Singh (@sagit2002) on CodePen.

BUILD A TRIBUTE PAGE

This basic front-end project requires building a tribute page. I am building a tribute page for Dr. Linus Pauling.

The conditions to be fulfilled are:

1.  The page should have and image and text.

2.  User can click on a link that will take the user to an external website with further information on the topic.

so here I am appending by completed project.

See the Pen Tribute to Dr. Linus Pauling by Bhagwant Singh (@sagit2002) on CodePen.

CAESARS CIPHER

In this challenge we have to decode a cipher message. More about cipher can be found out here.

So we have a simplest and most widely known ciphers called Caesar cipher, also called shift cipher. Basically in a shift cipher the meanings of the letters are shifted by some set value.

An example of this type of modern cipher is the ROT13 cipher, where the values of the letters are shifted by 13 places. Thus 'A' ↔ 'N', 'B' ↔ 'O' and so on.

So we have to write a function which takes a ROT13 encoded string as input and returns a decoded string.

Other conditions are:-

1.  All letters should be uppercase.

2.  Non-alphabetic character i.e. spaces and punctuation's are not to be transformed, but have to be passed on.

At last the list of clues in the form of helpful links are as follows:

•     String.charCodeAt()
•     String.fromCharCode()

It took me very less time to implement the algorithm. In this algorithm I loop thorough all the string elements converting each of them to equivalent uni-code values and then pushing them to the array. Finally I joined all the elements using the join() method of arrays.

                 function rot13(str) { // LBH QVQ VG!
                 arr = [];
                 for (var i = 0; i < str.length; i++){
                     var a = str.charCodeAt(i);
                     if(a >= 65 && a <= 77){
                         a += 13;
                     } else if(a >= 78 && a <= 90){
                         a -= 13;
                     } else {
                       a = a;
                     }
                     var c = String.fromCharCode(a);
                     arr.push(c);
                }

            }

WHERE DO I BELONG

This challenge requires returning the lowest index at which a value  that is second argument should be inserted into an array which is the first argument after sorting it.

The algorithm was quite straight forward, only thing that made me to think was what if the number is to inserted at index greater than last index of the array e.

Clue is given in the form of link below:

• Array.sort()

This JavaScript method sort() is quite self explanatory. It sorts the array so that we can find the right index of the second argument.

 So here is my implementation of the algorithm.

        function where(arr, num) {
            arr1 = arr.sort(function(a, b) {  //sort the array first
                                return a - b;
                            });
            for (var i = 0; i <= arr1.length; i++){
                if (num <= arr1[i]){
                    return i;
                }
                if (arr[i] === undefined){
                    return i;
    
                }
            }
        }

SEEK AND DESTROY

In this challenge we are provided with an initial array i.e the first argument in the destroyer function It is followed by one or more arguments. We have to remove all elements from the first array that are of the same value as are these arguments.

Following clues are given for reference:

• Arguments object

• Array.filter()

To be frank I have to sweat out a lot with this algorithm, First it took me a while to get my head around the Arguments Objects. I used  Read-Search-Ask technique to get more clues and finally after a lot of efforts i got to the following solution.

My solution for the problem is given below:

   function destroyer(arr) {
       arr1 = [];         //create a new array of arguments
       for ( i = 1; i < arguments.length; i++){
           j = arguments[i];
           arr1.push(j);
       }
       function checker(value) {   // returns items not in index
           return arr1.indexOf(value) === -1;
       }
       return arr.filter(checker);  //Filter the items given by 
                                    //checker func
   }

FALSY BOUNCER

In this challenge we have to remove all falsy values from an array.

Falsy values in JavaScript are:-

 false, null, 0, "", undefined, and NaN.

The under-mentioned clues are provided as helpful links:

• Boolean Objects

• Array.filter()

For this challenge I went through the clues that are given in the form of clickable links above, again leading to MDN JavaScript documentation.

Then on with little bit of tweaking I was able to implement the under-mentioned solution for the challenge.

So, here is my solution.

                function bouncer(arr) {
             function Boolean(value){
                 var i = 0;
                 arr1 = [NaN, 0, false, null, undefined];
                 if (arr1[i] === value){
                     i++;
                 } 
                 return value;
             }
             return arr.filter(Boolean);
           }

Let me know about any improvements that can be done to the above program by commenting below.

MUTATIONS

This Challenge requires to return true if the string in the first element of the array contains all of the letters of the string in the second element of the array.

For example, ["hello", "Hello"], have to return true because all of the letters in the second string are present in the first, after ignoring case.

The arguments ["hello", "hey"] should have to return false because the string in first element "hello" does not contain a "y".

Similarly, ["Alien", "line"], should be returning true because all of the letters in "line" are there in "Alien".

Clue in the form of helpful links is as given below. Its a clickable link leading to MDN documentation to study more about the string method indexOf():

• String.indexOf()

Again using a little trail & error and the Read-Search-Ask technique. I can up with following solution.



                       function mutation(arr) {
                     var a = arr[0].toLowerCase();
                     var b = arr[1].toLowerCase();
                     if (a === b) {
                         return true;
                     } else {
                         var c = b.split("");
                         var i = 0;
                         for (var j = 0; j < b.length; j++){
                             i = a.indexOf(c[j]);
                                 if (i === -1)
                                     break;
                         }   
                         if (i !== -1){
                             return true;
                         } else {
                             return false;
                         }   
                    }       
                }

SLASHER FLICK

In this challenge I have to return the remaining elements of an array after chopping off n elements from the head.

The head means the beginning of the array, or the zeroth index.

Following links are given as a clue:

• Array.slice()

• Array.splice()

This challenge makes use of both the above JavaScript methods.

The slice() method has already been discussed in chunky Monkey challenge. Here is the link to the post.

CHUNKY MONKEY 

The splice method is new one, you can go through it on MDN javascript documentation here.

As for my solution to the problem, It took me few permutation and combination before arriving on the solution.

My solution is as follows.


                   function slasher(arr, howMany) {
                   var i = arr.slice(0,arr.length);
                   var x = arr.splice(howMany, i.length);
                       return x;
              }

If you have any suggestion, please let me know by commenting below the post.

CHUNKY MONKEY

Challenge this time is to write a function that splits an array (first argument) into groups the length of size (second argument) and returns them as a two-dimensional array.

 The clues are as given below:

• Array.push()

The push() method adds one or more elements to the end of an array and returns the new length of the array.

The syntax is as follows:

arr.push(element1, ..., elementN)

elementN

 

The elements to add to the end of the array.

• Array.slice() 

The slice() method extracts a section of a string and returns a new string.

The syntax is as follows;

str.slice(beginSlice[, endSlice])

  

beginSlice

The zero-based index at which to begin extraction. 

 

endSlice

Optional. The zero-based index at which to end extraction.

So below is my solution of the challenge:

           function chunk(arr, size) {
               newArray = [];
               for (var i = 0; i < arr.length; i+=size){
                   var x = arr.slice(i, i+size);
                   newArray.push(x);
               }
               return newArray;
               }

TRUNCATE A STRING

In this challenge its required to truncate a string (first argument) if it is longer than the given maximum string length (second argument). Then return the truncated string with a "..." ending.

Note that the three dots at the end add to the string length.

If the num is less than or equal to 3, then the length of the three dots is not added to the string length.

The given clue here is : 

String.slice()

The slice() method extracts a section of a string and returns a new string.

The syntax is as follows;

str.slice(beginSlice[, endSlice])

  

beginSlice

The zero-based index at which to begin extraction. 

 

endSlice

Optional. The zero-based index at which to end extraction.

It was not that hard to implement the solution.

My solution is as follows: 

                function truncate(str, num) {
                    var x = str.slice(0, num);
                    if (num <= 3){
                        return x+"...";
                    } else if (str.length <= num){
                        return x;
                    } else  {
                        return x.slice(0, num-3)+"...";
                    }
                }



REPEAT A STRING REPEAT A STRING

Challenge here was to repeat a given string (first argument) num times (second argument). Return an empty string if num is a negative number.

The clue given on the challenge was:

Global String Object

While searching for clue I found a function called repeat the syntax for which is as follows:

str.repeat(count)

count

An integer between 0 and +∞: [0, +∞), indicating the number of times to repeat the string in the newly-created string that is to be returned.

The solution then got quite obvious as given below:

                  function repeat(str, num) {
                      if(num >= 0){
                          return str.repeat(num);
                      } else {
                          return "";
                      }
                  }

CONFIRM THE ENDING

Challenge here was to check if a string (first argument) ends with the given target string (second argument).

With some helpful link as below:

• String.substr()

The total concentration should be on the above-mentioned function(link above) to efficiently solve the problem.

Full syntax is

str.substr(start[, length])

start

Location at which to begin extracting characters. If a negative number is given, it is treated as strLength + start where strLength is the length of the string (for example, if start is -3 it is treated as strLength - 3.)

 

length

 

Optional. The number of characters to extract.

The problem was straight forward, my solution is as below:- 

 function end(str, target) {

     var x = str.substr(-target.length , target.length);

     if (x === target){

         return true;

     } else {

         return false;
     }

}