Github for Beginners

If you’re learning coding/programming and haven’t already, you must sign up for a Github account to showcase your work.

Some resources for learning Github:
I did these series of challenges twice. The first time I was completely lost, as it was my first time using the command line on my Windows computer. The second time around, I was able to fully understand every step.
This website is really simple and straightforward. Write down each of the steps listed in this guide to know what order you have to do git commands.
This is a great article that breaks down everything about Github and explains the who, what, when, where, why, and how.


How to edit Bootstrap button CSS in Rails 4

On your _form.html.erb page in views,

look for this code:

<%= f.submit %>

To add a class, enter it like so:

<%= f.submit class: 'btn btn-default' %>

The 'btn btn-default' is Bootstrap’s default button style. Choose what you want your button to look like here:


Integrating Bootstrap with Rails 4

Today’s project was incorporating Bootstrap into my Rails application.

To start, I redid this basic Ruby on Rails tutorial on Tech Talent South’s website. To make it more personal, I decided to make a list of movies instead of a list of random members. I followed this guide by Koren Leslie Cohen on how to change column names in a database. It’s a great, simple guide, but I found that when I changed  the :name and :age into :title and :release, respectively, they didn’t change across all my views so I still had to go in manually and change them, which to me, beats the purpose of using the rails g migration command. Not sure if there is a better way to do it, as I am still new to Rails, but will keep searching.

To incorporate Bootstrap, I downloaded Bootstrap and followed along with the Readme file included in the download package.

This is what I added to my Gemfile:

gem 'sprockets-rails', '>=3.0.0.beta1'
gem 'sass-rails', '>=5.0.3'
gem 'uglifier', '>= 1.3.0'
gem 'coffee-rails', '~> 4.1.0'
gem 'autoprefixer-rails'
gem 'bootstrap-sass', '~> 3.3.1'

In the guide, they recommended to add these two gems for SASS:
gem ‘bootstrap-sass’, ‘~> 3.3.4’
gem ‘sass-rails’, ‘>= 3.2’

But I kept getting errors when running ‘bundle install’ so I’m thinking these two gems are outdated. Could be because I had downloaded Bootstrap a couple months ago and my version of Bootstrap is older. So I had to go in and manually change the versions. This is where I found the latest version number for sass-rails.

If you come across the following error:

Bundler could not find compatible versions for gem "sprockets-rails"

Then you can go here to double check and see if your version of ‘sprockets-rails’ is compatible with your version of Ruby and Rails.

This is a great step-by-step guide on how to integrate Bootstrap 3.3 with Rails 4.2. After step 7, you can pick and choose what code you want to integrate into your site. Also refer to the CSS page on the Bootstrap home.

This is my final product: (still a work in progress!)

Need to:
1. Add errors if no text in form fields.
2. Add movie descriptions to the ‘view’ page. (Maybe API?)
3. Add color.
4. Add images.

Joyce Akiko | Jennifer Dewalt | Freelancing

I came across Jennifer Dewalt’s website and blog today and found it so inspiring. Learning to code can be so overwhelming, especially when you feel like a beginner and you don’t feel like you have the skills to make anything substantial.

Looking at her project ideas for each day, I feel motivated to try a similar challenge. The projects are simple, but incorporate useful elements that can be applied to future projects.

“Sometimes I can’t believe how much I’ve learned and sometimes I can’t remember what life was like before I learned to code. This past year has been challenging, exhilarating, lonely, overwhelming, frustrating and awesome. It’s been the best year of my life.” ­ Jennifer Dewalt

See her projects here:

From Joyce Akiko on freelancing as a self-taught coder:

So how DO you know when you’re ready to take it to the next level?

There are a lot of differing opinions on the topic , mainly because there isn’t just one way to
really know.

Generally though you’ll want to be able to:
1. Build a couple projects and be able to show them off
2. Talk about decisions and reasons for making certain design or development choices
3. Look at someone else’s work and find areas that you’d be able to improve
4. Go on Stack Exchange or similar and answer more questions than you need to ask

Ruby |Breaking down the Caesar Cipher

Caesar Cipher in Ruby

From Wikipedia:

In cryptography, a Caesar cipher, also known as Caesar’s cipher, the shift cipher, Caesar’s code or Caesar shift, is one of the simplest and most widely known encryption techniques. It is a type of substitution cipher in which each letter in the plaintext is replaced by a letter some fixed number of positions down the alphabet. For example, with a left shift of 3, D would be replaced by A, E would become B, and so on. The method is named after Julius Caesar, who used it in his private correspondence.

There’s a brief video about it from Harvard’s CS50 class.

Breaking down the following solution line by line:

1  puts "Word please: "
2  text = gets.chomp.downcase
4  puts "Number please: "
5  n = gets.chomp.to_i
7  def caesar_cipher(text, n)
8    alphabet = ('a'..'z').to_a 
9    key = Hash[]
10   text.each_char.inject("") { |newtext, char| newtext + key[char] }
11 end
13 puts caesar_cipher(text, n)

Line 1:

  puts "Word please: "

Prompts the user to write a word.

Line 2:

  text = gets.chomp.downcase

gets takes the word the user writes and .chomp cuts off the end parameters (like “/n”). The new word is now referred to as ‘text’.

Line 4:

  puts "Number please: "

Prompts the user to write a number.

Line 5:

  n = gets.chomp.to_i

gets takes the input number (which is a string)

.chomp cuts the end parameters off, and then .to_i turns the number into an integer.

The new number is now referred to as ‘n’.

Line 7:

  def caesar_cipher(text, n)

def caesar_cipher(text, n) defines a new method called caesar_cipher that takes in two arguments text and n which are taken from Line 2 and Line 4 respectively.

Line 8:

  alphabet = ('a'..'z').to_a

Defines a new variable called alphabet that is equal to individual letters a all the way to z. These letters are each their own individual string. The .to_a turns the 26 letters into an array. This array is named alphabet.

Line 9:

  key = Hash[]

A new variable key is defined. It is equal to Hash[]

Let’s break it down.

alphabet.rotate(n) – What does this do?
.rotate is a method in Ruby that returns a new array by rotating the array elements.

For example:

       a = [ "a", "b", "c", "d" ]
       a.rotate #=> ["b", "c", "d", "a"]
       a #=> ["a", "b", "c", "d"]
       a.rotate(2) #=> ["c", "d", "a", "b"]
       a.rotate(-3) #=> ["b", "c", "d", "a"]

In this case, alphabet.rotate(n) takes the alphabet variable (the array of all 26 letters) and rotates the array n number of times. The n comes from what the user puts when prompted in the beginning (see Line 5).

alphabet.rotate(n) is inside What does do?

.zip is a useful method for combining collections in an ordered way.

       [1,2,3].zip(['a', 'b', 'c'])
       #=> [[1, "a"], [2, "b"], [3, "c"]]

As you can see, the above two arrays are combined together so that each number is paired with each letter. The number 1 is associated with ‘a’ and so forth.

.zip can also take 2 (or more) arguments to zip into the first:

       ['a', 'b', 'c'].zip( [1,2,3], ['oogie', 'boogie', 'booger'] )
       #=> [["a", 1, "oogie"], ["b", 2, "boogie"], ["c", 3, "booger"]]

So going back to our code, is taking our rotated alphabet variable array and matching the new order with our original alphabet array. For example, if n was 2, our alphabet variable would match with the new rotated alphabet like so:

  n = 2
  alphabet = ['a', 'b', 'c', 'd', 'e'..'z']
  new_alphabet = ['c', 'd', 'e', 'f', 'g'..'b']  // new_alphabet = alphabet.rotate(2) = ['a', 'c'],['b', 'd'], ['c', 'e'] ..['z', 'b']

Hash turns each pairing into key => value pairings.

For example, would be equal to [['a' => 'c'], ['b' => 'd'], ['c' => 'e']..['z' => 'b']]. So now the value for ‘a’ is ‘c’, and so on.

Line 10:

Let’s break down this, too:

  text.each_char.inject("") { |newtext, char| newtext + key[char] }

What exactly is this line of code doing??


text takes the string entered by the user (See Line 2).


each_char takes the string entered by the user (text) and separates the string into their separate characters. For example, if text were “apple”, each_char would make “apple” turn into “a”, “p”, “p”, “l”, “e”.


.inject("") sends each character through the block (the block being everything between the brackets {}).  Each character of text passes through the block in the argument place labeled char.

The ("") defines the default starting point. It means the first time we pass through the block, we are defaulting (starting) with an empty string (“”).

  { |newtext, char| newtext + key[char] }

This is a block. It is connected to the .inject enumerator method, which just means every time you use .inject, you will have a block following it. There are two arguments in this block ‘newtext‘ and ‘char‘ that are new.

newtext is the default (starting) string, which in the first go through, would be an empty string (“”) because that’s what we declared after the .inject method: text.each_char.inject("")

char is the individual characters from the text variable.

key[char] takes in the individual character [char] and assigns its value found from the key variable we defined in Line 9.

All the individual characters will be run through the block until there are no more characters in the text string. To see how this works, let’s use the example of “apple”.

     text.each_char.inject("") { |newtext, char| newtext + key[char] }

     text = "apple"
     n = "2"

     first run through => 
     "apple".each_char = "a", "p", "p", "l", "e"
     ("a", "p", "p", "l", "e").inject("") { |"", "a"| "" + key["a"] }
     key["a"] == "c"
1st  ("a", "p", "p", "l", "e").inject("") { |"", "a"| "" + "c" }
2nd  ("p", "p", "l", "e").inject("c") { |"c", "p"| "c" + [key["p"]=="r"] }
3rd  ("p", "l", "e").inject("r") { |"r", "p"| "cr" + "r" }
4th  ("l", "e").inject("r") { |"r", "l"| "crr" + "n" }
5th  ("e").inject("n") { |"n", "e"| "crrn" + "g" }


Line 11:


end is connected to our method caesar_cipher and means that we are done defining the method.

Line 13:

  puts caesar_cipher(text, n)

This writes the result of the caesar_cipher method for us.

Project located here:

Rotate method:
Method arguments:
Zip method:

How to add your solution to a project on Odin

If you are doing the lessons on The Odin Project, then you’ll know that they have several projects for each lesson you do. They offer a really cool option to add your solution to their website. If you are confused as to how to do it, below is a link as well as instructions:

Watch how here:

1. Scroll to the bottom of the Odin Project page and find this icon. Click on it to get the link to the exact Github file where you can add your solution:

2. Click the link corresponding to what you want to do. There is one for fixing errors and one for adding your solution. If you are adding a solution, click the first link:

github repo odin

3. You will be taken to their Github page where the lesson is located. Click the edit button and scroll to find the project you are adding your solution to:

4. Add your name and your Github link where it says to:

Odin Edit Github

5. Then scroll the Github page to the bottom to write a note under Propose File Change. Click the green Propose File Change button when you are finished.

propose file change github

6. You will be taken to a pull request page and will need to click the Create Pull Request green button.

pull request github

7. Confirm your title and comment. Then click the green Create Pull Request button at the bottom of the text fields.

create pull request github

8. You will be taken to a page that looks something like the below image. Now you just have to wait for The Odin Project to add your name onto the website!

pull request screenshot

9. Added!
solution odin project

Date & Time in Ruby

Running the Ruby on Rails in my Command with the following:

puts time.year    # => Year of the date 
puts time.month   # => Month of the date (1 to 12)
puts     # => Day of the date (1 to 31 )
puts time.wday    # => 0: Day of week: 0 is Sunday
puts time.yday    # => 365: Day of year
puts time.hour    # => 23: 24-hour clock
puts time.min     # => 59
puts time.sec     # => 59
puts time.usec    # => 999999: microseconds
puts    # => "UTC": timezone name

Turning time into seconds:

# Returns number of seconds since epoch
time =  

# Convert number of seconds into Time object.

# Returns second since epoch which includes microseconds
time =

Some different ways to display the date and time:

time =

puts time.to_s
puts time.ctime
puts time.localtime
puts time.strftime("%Y-%m-%d %H:%M:%S")

Time arithmetic:

now =           # Current time
puts now

past = now - 10          # 10 seconds ago. Time - number => Time
puts past

future = now + 10        # 10 seconds from now Time + number => Time
puts future

diff = future - now      # => 10  Time - Time => number of seconds
puts diff


Numbers, Operators, and Expressions

Numbers, Operators and Expressions:

  1. What’s the difference between an Integer and a Float?
    Integers are whole numbers. Floats are decimals
    More info here:
  2. Why should you be careful when converting back and forth between integers and floats?
  3. What’s the difference between =, ==, and ===?
    = is assignment operator (ie. sets a = b)
    == is equal comparison operator (checks if two variables have equal values)
    === is identical comparison operator (checks if two variables are equal values and are the same type)
  4. How do you do exponents in Ruby?
    Use two * together. I.e.: a**2 is a to the second power
  5. What is a range?
    A range is a set of values with a start and an end.
  6. How do you create a range?
  7. What’s the difference between (1..3) and (1...3)?
    (1..3) includes the numbers 1-3. (1…3) does not include the last number, so just numbers 1-2.
  8. What are three ways to create a range?
    Range as a sequence, range as an interval, range as a condition.


Codermanual – Part V finished

I’ve just finished Part V of Codermanual, the JavaScript & jQuery section. It was an oversimplification of the language, I feel, but the way it was explained, really helped me wrap my head around how programming languages work. The amount of information in this part was overwhelming, but I feel confident now that I can handle JavaScript.

I had tried to learn JavaScript on my own back in April but I was using Codecademy at that time and I think their JavaScript tutorial was way too advanced. Everything went over my head. It was my first time learning an object-oriented programming language. Around the same time, I kept hearing a lot about Ruby and Ruby on Rails so I tried Codecademy’s Ruby course instead and found it much easier to grasp so I stuck with it and am now working on Michael Hartl’s Ruby on Rails tutorial.

I’m halfway through and realizing that there are still many things about Ruby that I have questions about, so I’m going to pause Hartl’s tutorial as well as Codermanual and do The Odin Project’s Ruby Programming course (which is also free!).

The more I learn, the more I realize how little I know.

63 Awesome Free Website-Building Tools

Source: Skillcrush


Font Awesome
A symbol font that allows you to add symbols to your websites.

Generates icon font packs.

Download vector icons or include icons as webfonts.

The Noun Project
Search a noun, get a free symbol or icon.

Endless Icons
Free icon library.

Perfect Icons
Customize and optimize social media icons for your site.

60 free vector Photoshop icons.

Round Icons
Free quirky and professional icon bundles.


Google Webfonts
Add fonts to your website in just a few clicks.

Font pairing generator.

Font Squirrel
Hundreds of totally free fonts.

Beautiful Web Type
Check out a curated collection of the most beautiful Google Webfonts.

Lost Type
Gorgeous pay-what-you-can fonts.


Generate random domain names based on one word.

Search for a domain name by keyword.


HTML5 Boilerplate
The first and the best. Free HTML5 boilerplate code.

Free fully responsive HTML5 template.

1 Line CSS Grid Framework
A framework for CSS that’s only 1 line long!

960 Grid System
A Skillcrush favorite.

Starkers for WordPress
A basic template for developing your first WordPress theme.

Barebones for WordPress
Free WordPress template for developers.

WordPress template for building out a brand new theme.

Sage for WordPress
A WordPress starter theme based on HTML5 boilerplate and Bootstrap.

Whiteboard for WordPress
A clean, basic WordPress theme for developers.

A responsive HTML, CSS, and JS framework.

Free themes for Bootstrap.


GitHub’s very own code style guide.

Google’s code style guide.

A code style guide from the pros at Mozilla.


Wrap up loose ends in your code by checking to see that it meets standards of accessibility, style, and industry best practices.
Web Design Group HTML Validator
Code Beautify
Free Formatter

More here: