Quick Thoughts

Terminal: Kill Sinatra/rails Process

Sometimes after closing an app the port is still on, and when you start a new project you might get an error:

`start_tcp_server': no acceptor (port is in use or requires root privileges) (RuntimeError)

To solve this, you want to grab out the ruby process

ps -e | grep "ruby"

This should return some system information. The first number is the process ID that we need to kill:

kill 95381

Git: how to .gitignore

Let’s say .gitignore lives in the same directory as your current repository. To ignore an entire folder within your directory, just do this:

/folder_2/folder_3/

Folder_2 is a folder in your project’s root directory, and everything inside folder 3 will be ignored.

To ignore every file ending with swp, just write this:

*swp

Git: .gitignore not working

So before I push my code to github, i realized that a passwords.txt file is included in my repo. I must remove it, so I created a .gitignore file in my current folder (root folder of github repo). In this .ignore file I type passwords.txt but when i typed git status the passwords.txt file is still there.

Solution:

git rm -r --cached

Followed by:

git add
git commit -m "fixed untracked files"

Heroku: precompile Assets Rake failed

When you use Environment variables in your config files, you will most likely get rake failed error. To fix this, you’ll need to change some settings:

1. Install Heroku Plugins:

   heroku plugins:install https://github.com/heroku/heroku-labs.git

2. Enable environment compilation

   heroku labs:enable user-env-compile -a

3. In your rails config/production file, add *.js and *.css

Rails: Change Environment

To Change Rails Environment, simply type:

RAILS_ENV='development'

Rails: Select columns from Active Record

Sometimes, you only want to get out a few column data from a database entry. To select only the columns, you can select the columns you like:

Appointment.select("name, website, city")

CSS: Center Exactly in the middle

.centered {
position: fixed;
top: 50%;
left: 50%;
margin-top: -50px;
margin-left: -100px;
}

Set the margin-top to half of the div’s height, Set the margin-left to half of the div’s width!

Got the code form this guy

Console: Keyboard ShortCuts

In the console, here’s a few keyboard shortcuts that can really help:

$ gibberioawigjoawirga  
//Control-C will clear the gibberish so you don't have to hold on to backspace for a long time

$ oiajrg  oaeg oia eg 
//Control-W will delete words backwards, one by one

Control-R will recursively search for the last written command, so you don't have to type alot. It's better than using up arrows. 

Control-L clears everything above your current cursor.

CSS: WordWrap

Css3 has a great property called WordWrap. If you have a LOOOOOOOONG word without any space, usually the word will go out of your container, making it look horrible. Wordwrap breaks the long word in to new lines:

word-wrap: break-word;

word-wrap takes either break-word or normal

Vim: CTRL + A to increment numbers

Cursor should be on top of a number. Then hit CTRL + A and the number should increment.

MYSQL: Show Database, Describe Tables

To use a database:

use database;

To Look at all the Tables in a database:

show tables from database;

To see all the columns in a table:

describe user;

Sample Query:

 select name,username,size from user where id=14371911 ORDER BY created_at;

Tool: Weinre for HTML/CSS/JS Mobile Debugging

To debug web apps, you have console. Mobile browsers don’t have a console, debugging is hard. Weinre lets your browser become the console so you can easily debug web apps on mobile.

Make sure phone and your computer is on same network. Type ifconfig in terminal to get your IP address.

Install Weinre: http://people.apache.org/~pmuellr/weinre/docs/latest/Installing.html

Start weinre:

weinre --boundHost 0.0.0.0

Go to localhost:8080 to see you console. It will give you the javascript tag to put on your mobile browser.

Copy the script tag, change ‘localhost’ to your computer’s IP address (from ifconfig) and paste it into your mobile web app.

Run your mobile web app, and your mobile client should light up on your browser. Click on it and start debugging!

Environment Variables: Don’t push Keys to github!

One mistake that I often do is that I often expose my key/secret combo for APIs to github if I push my project. To solve this, modify your bash profile!

Step 1: Open ~/bash_profile file

mvim ~/bash_profile

Step 2: Add Keys

export FP_KEY_L='....'
export TB_KEY='...'
export TB_SECRET='...'

Step 3: Save and Exit, then open new Terminal OR refresh your ~/bash_profile

source ~/bash_profile

That’s it! In your ruby files, type:

OpenTok_Key = ENV['TB_KEY']

This will automatically pull your environment variables from bash_profile. No need to expose your key anymore when you push to github!

What if you push it to Heroku? How do you update Heroku’s environment variables so you don’t have to change your code?

Type in terminal:

heroku config:add FP_KEY_L='...' 

To add multiple keys, just list them with spaces

heroku config:add S3_KEY="..." S3_SECRET="..."

I got the heroku information from their blog

CSS: Padding screws up DOM Width. Box-sizing solves it

When playing with CSS, sometimes I’d fix the dom object to a certain width. However, this width will change if I add padding to it, and it screws up all design. To solve, this, CSS3 has a property called Box Sizing, which will fix width to exactly how much you specify, and automatically adjust width of content:

box-sizing: border-box;