Tips for the devs ... directly from the Faria cave

I had a problem lately, while installing the development environment on my machine. I needed to install two different versions of MySQL. It seems brew has a way to manage multiple versions of a formula and switching between them just like we do with rvm and rubies. For this you need homebrew versions tap installed on your machine.

First switch to your local brew directory:

$ cd /usr/local

One you are in the brew directory, you can check the available

/usr/local$ brew versions mysql

5.6.20   git checkout 8f59be5 Library/Formula/mysql.rb
5.6.19   git checkout 3d3d8ae Library/Formula/mysql.rb
......................................................

In order to get a particular version, just checkout the matching commit.

/usr/local$ git checkout 336c976 Library/Formula/mysql.rb

This will checkout the specified version of the formula to the cellar. In order to install the other version, first we need to unlink the existing version of the forumla.

/usr/local$ brew unlink mysql
Unlinking /usr/local/Cellar/mysql/5.6.20... 14 symlinks removed

Now you can install the current cellar version of the formula.

/usr/local$ brew install mysql

Once the installation is complete, you can easily switch between the different versions of the formula.

/usr/local$ brew switch mysql 5.6.20
Cleaning /usr/local/Cellar/mysql/5.5.19
Cleaning /usr/local/Cellar/mysql/5.6.20
14 links created for /usr/local/Cellar/mysql/5.6.20

Here is a tip about the select and forms.

We usually use some of plugin to prettify the select element and control or reflect the hidden select’s status with the elements plugin created like a mirror. ex. select2, fancyselect, …

When we reset the form, the select will back to its original status but the elements the plugin created would not. So we need to trigger select’s change event or destroy and init again to avoid the value is not consistent between the hidden select and elements plugin created.

resetForm = ->
  $('form')[0].reset()

Demo:

See the Pen nEtxj by Oliver - Frontend Developer (@Oliverl) on CodePen.

Here is the git plugin I enabled in oh-my-zsh

To enable the plugin:

vim ~/.zshrc
plugins=(git git-flow tmux rails ruby zsh-syntax-highlighting rake gem brew npm)

Now you can use some alias the plugin provided. To name a few:

gco BRANCH = git checkout BRANCH
grbi = git rebase -i
gcmsg = git commit -m

You can see the full list with

alias | grep git

A useful one is current_branch (use the backtick). I use this when I specify which branch I want to deploy.

Another git tool that deserves attention is the gem git-up

The problem of git pull is that instead of rebase it merge the upstream. This will make the git graph messy. git-up uses pull --rebase on all your local branch from the origin. No more checkout-and-pull loop anymore.

We host some dev boxes on Digitalocean, and I tried varioous CLI because I like to stay in the console. Recently I was pretty happy to find Tugboat, as it saves default droplet size, region and image, and convers the whole API. Its fuzzy droplet name matching also can find great usage.

The only problem it has, is its counter-intuitive damn name (I forgot how to launch it 2 hours after using it the first time haha).

• https://github.com/pearkes/tugboat

Dash is an awesome api document browser (on mac), there is an easy way to search a keyword in vim

function! SearchDash()
  let s:browser = "/usr/bin/open"
  let s:wordUnderCursor = expand("<cword>")
  let s:url = "dash://".s:wordUnderCursor
  let s:cmd ="silent ! " . s:browser . " " . s:url
  execute s:cmd
  redraw!
endfunction

map <leader>d :call SearchDash()<CR>

Then just use <leader>d to pop up the doc for the word your cursor is on.

• http://kapeli.com/dash

One case I needed to display a column name with a human readable name, in this case you can use ActiveModel::Translation.

After some searching I found there is a simple way to do this, like

class TranslatedPerson
  extend ActiveModel::Translation
end

TranslatedPerson.human_attribute_name('my_attribute')
# => "My attribute"

This also provides the required class methods for hooking into the Rails internationalization API, including being able to define a class based i18n_scope and lookup_ancestors to find translations in parent classes.

• http://apidock.com/rails/ActiveModel/Translation

At Faria we use hackpad a lot.

It has bunch of shortcuts, like cmd+b for bold, cmd+i for italic), cmd+u forunderline, cmd+e for highlight. The full list is there:

• https://hackpad.com/How-to-use-Hackpad-mlZvEsJykI5#:h=Lists

but there are one shortcut not listed in the pad: option + ↑/↓, you can move whole line up and down.

It works like the ctrl + cmd + ↑/↓ in sublime text.

Recently I searched preventDefault() in a whole project, I found some of them like

$('.a-btn').on 'click', (event) ->
  event.preventDefault()
  # blahblahblah..
$('.another-btn').on 'click', (event) ->
  event.preventDefault()
  # blahblahblah..

I guess you are using a links in a non default way. But we better bind it globally in the DOM, and delegate it to body because if the dom element is created after page load that may not work properly.

$('body').on 'click', 'a[href="#"]', (e) ->
  e.preventDefault()

Check out LICEcap: http://www.cockos.com/licecap/

LICEcap is a simple tool for animated screen captures. And it’s a free software (GPL source code). Just need to follow steps below to complete LICEcap installation.

1. Go to http://www.cockos.com/licecap/
2. Click to Download LICEcap for OSX under Download section
3. click the downloaded image to install it as a usual mac app

To use LICEcap for making animated screen captures (.gif)

1. Open the target software/screen that we want to record.
2. Resize and adjust the frame size of LICEcap to fit the target screen
3. Click Record button
4. Input the .gif file name
5. Start recording
6. Once you’re done, press Stop button. The record will become a .gif file and save to target folder eventually.

The console in developer tools is pretty useful when debugging, and there are a small trick for clearing the console log:

instead of clear(), console.clear(), or press clear icon, you can use ctrl+L (or cmd+K) to trigger it and save your time.

the full list of shortcuts for developer tools (chrome):

• https://developer.chrome.com/devtools/docs/shortcuts