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

This trick can detect if the content is wider than the container and it will display a icon if the container is too narrow, so you can click on the icon to expand.

The main thing is to use { text-align: justify } and set the .mask element width to 1px and give it a higher z-index to cover the icon. When the .content width is full of the container({max-width: 100%}) the mask would wrap to the second line. Then the icon shows up, then you can click on the icon to show the second line.

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

Gist is a service provided by Github for publishing notes, and it supports version control. You can create your own or fork from others a little bit like for Github Repos. I found a plugin for inserting gist in my page inside Sublimetext.

(note, you need to have the Package Control installed)

• cmd-shift-P: select Package Control: Install Package
• Search Gist and install
• Goto GitHub setting to generate access token
• copy the token and add it in your gist plugin pref:
  • Preferences > Packages Settings > Gist > Settings - User
  • and add

{
  "token": "xxxx"
}

Whenever you want to insert a snippet from a gist in your current file

• cmd-shift-P Gist: Insert Gist
• or cmd-k cmd-]
• it will open a list of your gists and you can select the one you want

We often need to change the filename of the current file when we are coding, here is a easy way for renaming your current file in vim (just add it in your .vimrc).

function! RenameFile()
  let old_name = expand('%')
  let new_name = input('New file name: ', expand('%'), 'file')
  if new_name != '' && new_name != old_name
    exec ':saveas ' . new_name
    exec ':silent !rm ' . old_name
    redraw!
  endif
endfunction

map <leader>n :call RenameFile()<cr>

Recently I had to develop a merge function, student A (master) needs to merge with student B (slave), slave have a lot of associations to be merged, in particular comments, so here is the merge function

def merge_student(master, slave)
  slave.comments.each do |comment|
    comment.student = master
    comment.save!
  end

  master.save!
  slave.reload # <--- at first I forgot to add that line
  slave.destroy
end

At first I didn’t add the slave.reload and thought that all the comments would be successfully migrated, but actually the slave.comments were all destroyed.

Because when we do slave.destroy, slave still has its original comments associations, so I needed to make sure I call slave.reload before doing the slave.destroy.

When you use gsub with a block on a sub-class of String, variables such as $1, $2, $`, $&, and $’ will not be set appropriately.

For example:

irb(main):001:0> class X < String; def gsub(*args); super; end end
=> nil
irb(main):002:0> X.new('hello').gsub(/(l)/) { $1 + 'm' }
NoMethodError: undefined method `+' for nil:NilClass
    from (irb):2:in `block in irb_binding'
    from (irb):1:in `gsub'
    from (irb):1:in `gsub'
    from (irb):2
    from /Users/aaron/.local/bin/irb:12:in `<main>'
irb(main):003:0>

Ya, the SafeBuffers is one of the example. The issue we met is we tried to generate view in the presenter, then parse the result. and you could not get the $1 in the block. The solution is force it to String by to_str, then you could use gsub as usual.

# presenter.rb
  def render_view(options = {})
    av = ActionView::Base.new(ActionController::Base.view_paths)
    av.render(:template => "index.pdf.erb")
  end

  def parsing
    render_view.gsub!( /src=["']+([^:]+?)["']/i ) do |m|
      # $1 etc... will not be available .. ouch
    end
  end

  def fixed_parsing
    render_view.to_str.gsub!( /src=["']+([^:]+?)["']/i ) do |m|
      # $1 etc... will be available .. yeeeha
    end
  end

reference about SafeBuffer in Rails: https://github.com/rails/rails/pull/2248

When you create a project, you may sometimes wonder what you need add in the .gitignore file. Fear no more, there is a service named http://gitignore.io, you can search by language and framework that you use, and it will give you a recommend content of .gitignore file.

You also can use command line to search in gitignore.io use the api they provide, just add a function gi to your enviroment file (.bashrc or .zshrc or anything you use)

function gi() {
  curl -o .gitignore http://www.gitignore.io/api/$@
}

and use it, for example on a go project:

gi go

enjoy.

Sublime text 3 has a cool plugin named GutterColor for CSS authors.

• https://github.com/ggordan/GutterColor

This plugin provides a realtime preview of what color hex we type in our css file. It’s easy to use and has significant effect, but it’s not available for sublime text 2.

• http://www.sikuli.org/download.html

Sikuli is a simple tool for creating testing script in java so it’s cross-platform.

Write simple Sikuli Script by capturing screen shots of GUI element.

• Click on the element
• Find certain element
• Type text in the element

Example,

• Simple sikuli script with command:
  • click ()
  • type ()
  • find ()
• Run the Sikuli script

Customize a checkbox input is always a good case to practice pseudo-class, pseudo-element, and adjacent sibling combinator selectors.

But if you like fontawesome, maybe you can try this.

See the Pen dpenA by naiting (@sliiice) on CodePen.

slice_before is a convenient method to split stuff.

For example you could easily split an array on even values.

[1,2,3,4,5].slice_before{|e| e%2 == 0 }.map{|a| a}

you could split the hash by the keys you want.

def split_hash_by_key(hash, *args)
  hash.slice_before { |k,v| args.include? k }.map { |a| a.to_h }
end

# split_hash_by_key({ :a=>1, :b=>2, :c=>3, :d=>4, :e=>5, :f=>6 }, :c, :e )
# [ {:a=>1, :b=>2}, {:c=>3, :d=>4}, {:e=>5, :f=>6} ]

"abcedfghijklmnopqrstuvwxyz".split('').slice_before{|c| c =~ /[aeiou]/i }.map{|a| a}
# [["a", "b", "c"], ["e", "d", "f", "g", "h"], ["i", "j", "k", "l", "m", "n"], ["o", "p", "q", "r", "s", "t"], ["u", "v", "w", "x", "y", "z"]]

Check http://apidock.com/ruby/Enumerable/slice_before for more info.