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

when using multi-weights fonts family (e.g. Source Sans) in a site, the hairline maybe looks good in retina display but blur in the normal one. so my solution is setting different weights for normal and retina.

Like this:

$font-weights: lighter, normal, bold, ultra
$font-weight-map: 300, 400, 600, 700
$font-weight-map-retina: 200, 400, 600, 900

And a little media-query:

=mq-retina
  @media screen and (-webkit-min-device-pixel-ratio: 2), (-o-min-device-pixel-ratio: 2/1), (min--moz-device-pixel-ratio: 2), (min-device-pixel-ratio: 2), (min-resolution:192dpi), (min-resolution:2dppx)
    @content

And the mixin for font-weight:

=font-weight($weight)
  $index: index($font-weights, $weight)
  $weight: nth($font-weight-map, $index)
  $weight-retina: nth($font-weight-map-retina, $index)
  font-weight: $weight
  +mq-retina
    font-weight: $weight-retina

Then, you can use it in your project like:

.lighter
  +font-weight(lighter)
.normal
  +font-weight(normal)
.bold
  +font-weight(bold)
.ultra
  +font-weight(ultra)

See the Pen Retina-Specific Font Weight by naiting (@sliiice) on CodePen.

ps: also you can store the setting in a map if you use sass 3.3+

I found a better way to use the bootstrap affix style or any other js library providing effect like this.

The bootstrap documentation is on:

• http://getbootstrap.com/javascript/#affix

We can easy to set the target distance. When user scroll the page down and reach the target distance the affix event would be triggered and class attribute is changed too.

So we use the class to switch the style. Usually usage is fixed the main menu to window with setting CSS position property to absolute or fixed. But if we directly change original element’s position to absolute or fixed the whole page would reduce the element’s height. The scroll action is not smooth and it doesn’t feels good. Just like jump to some where suddenly.

So here provides the better way to handle this kind of interaction design: Keep the height and change the style of element inside.

Bad Example:

.header
  height: 60px
  &.affix
    position: fixed
    ...

Bad Example Demo http://codepen.io/Oliverl/pen/IvygF

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

The Better Way:

.header-wrapper
  height: 60px
  .header
    height: 60px
  &.affix
    .header
      position: fixed
      ...

Solution Demo http://codepen.io/Oliverl/pen/HksKl

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

Test Kitchen is a tool for you to test code and software in an isolated target platforms. They could be a VM (default), docker, lxc-container, or even a VPS in the clouds, such as Azure, Blue Box, Amazon EC2, Rackspace, DigitalOcean, OpenStack, etc. Many test frameworks are support, such as Rspec, Bats, shUnit2, and Serverspec in the kitchen.

Here I want to introduce you how to setup a docker driver for kitchen instead of default one using Vagrant. It may cut to a dramatical short of the time of your testing cycles.

Step 1. Prepare a system or VM with docker and kitchen installed.

$ kitchen login
Welcome to Ubuntu 14.04.1 LTS (GNU/Linux 3.13.0-32-generic x86_64)

 * Documentation:  https://help.ubuntu.com/
Last login: Fri Sep 19 06:40:45 2014 from 10.0.2.2
vagrant@cheftraining:~$ ls
vagrant@cheftraining:~$ docker -v
Docker version 1.2.0, build fa7b24f
vagrant@cheftraining:~$ kitchen -v
Test Kitchen version 1.2.1
vagrant@cheftraining:~$

Step 2. Create a kitchen with docker driver

$ kitchen init --driver=kitchen-docker --create-gemfile

Step 3. Edit .kitchen.yml as follow

---
driver:
  name: docker

provisioner:
  name: chef_solo

platforms:
  - name: ubuntu-14.04

suites:
  - name: default
    run_list:
    attributes:

Step 4. Bundle install to fetch any new gem, and then, create an instance.

$ bundle install
$ kitchen create

Step 5. Check current instances, which ready for your provisioning.

$ kitchen list
Instance             Driver  Provisioner  Last Action
default-ubuntu-1404  Docker  ChefSolo     Created

Now, you can add cookbook recipes for testing with kitchen. You can find it is much much faster to create an instance after docker images are created. It only took me 0.76s to create new an instance, compared with vagrant to create a VM in minutes.

If you want to know what else drivers you can use for kitchen beside docker and vagrant? Just type:

$ kitchen driver discover

When you often use tail on various files, you may find multitail and colortail useful.

apt-get install multitail colortail
# or
brew install multitail colortail

The name of those tools are pretty explicit about what they can be used for. Check more info on

• https://github.com/joakim666/colortail
• http://www.vanheusden.com/multitail/

Check out http://www.dest-unreach.org/socat, it’s a very powerful relay tool between tcp, unix domain socket, stdout and lots of protocol.

For testing domain socket, you don’t have to install nginx. I use this for my docker qa env because I don’t want to mess with multiple docker ports > host nginx. So in docker, I relay tcp port to unix domain socket and mount to host.

We can use letter_opener https://github.com/ryanb/letter_opener to open up the email we sent in browser while we are developing. But when we are testing for sending out dozens of emails, opening up so much tab is not a good thing.

Letter_opener_web https://github.com/fgrehm/letter_opener_web provides a web app for you to view all the emails sent in one place.

# in Gemfile
gem 'letter_opener_web'

# in environments/development.rb
config.action_mailer.delivery_method = :letter_opener_web

# in routes.rb
if Rails.env.development?
  mount LetterOpenerWeb::Engine, at: "/letter_opener"
end

Then visit http://localhost:3000/letter_opener, we will see your mails!

The author also provide a demo site for his gem, check it out http://letter-opener-web.herokuapp.com/

You know there is a tab feature in vim, right? And here is the configuration I prefer that make it more straightforward and accessible.

nnoremap <S-t> :tabnew<CR>
nnoremap <S-h> gT
nnoremap <S-l> gt

Do you know about http://csswarp.eleqtriq.com ?

This online service can export your custom hand-made bezier curve text with html and css and of couse it’s static.

Here is a example I made before.

• http://oopsprint.com/merryc

Using the two exported text style from the site and add some switch transition style when click on the button then it becomes more fun.

Rails provides the command

rake db:seed

to seed the database. However, sometimes we want to have different db seed for different RAIL_ENV or maybe you just need to seed some data repeatedly. Then the task become inappropriate.

Seedbank https://github.com/james2m/seedbank solves this problem.

# in your gemfile
gem 'seedbank'

The directory structure

db/
  seeds.rb
  seeds/
    bar.seeds.rb
    development/
      users.seeds.rb

Now when you issue rake db:seed it will invoke

db/seeds.rb
db/seeds/*

When you issue RAILS_ENV=development rake db:seed

db/seeds.rb
db/seeds/bar.seeds.rb
db/seeds/development/*

And on RAILS_ENV=production rake db:seed

db/seeds.rb
db/seeds/bar.seeds.rb

Or you just want to seed the users, you can do

rake db:seed:development:users

If you want to know who has contributed to the current project (to put on the README.md), this is what you need.

git log | grep Author | sort | uniq