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

Before we do front-end job, we usually have a mockup (png or psd) from the visual designer, and we start to handcraft html, css and javascript. we can mark the dimensions on the mockup by some tools like specctr or getmarkman, to make the process easier.

But, it’s annoying to switch your focus between the mockup and what you do in browser again and again, and it’s not intuitive. So my solution is make a full screen div to cover the whole page, with the mockup in it.

html structure:

body
  #blueprint
  ..start developing here

a part of sass:

#blueprint
  position: absolute
  left: 0
  top: 0
  right: 0
  bottom: 0
  z-index: 9999 // to arrange z-index, a reference: http://goo.gl/t5fkNr
  opacity: 0.5 // up to you
  pointer-events: none
  background: url(images/your-mockup.jpg)

Now, our mockup is a blueprint, you can use developer tool to tweak the size, position, ensure they are all precise. When it is finished, you can remove it.

Sometimes I think it’s finished, but the boss / client / designer don’t think so, they say “This is bigger than original design” blahblah. In this case, you can add something in css and javascript

a part of sass:

#blueprint
  display: none
  .tweak &
    display: block

coffeescript:

$body = $('body')
$(window).on 'keydown', (e) ->
  $body.toggleClass('tweak') if e.which == 192 # this is `

so you can switch the original design / your page to them.

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

There is a package that is not installed by default that I now grab systematically, it’s called parallel.

apt-get install parallel

or on mac

brew install parallel

The parallel command is a pretty complex beast, but the package also comes with the sql command, which simplifies queries to any database from the console. There is just one command whatever the sql backend you use.

I first setup my dburl in .sql/aliases as:

:dbmb mysql:///managebac
:dboa mysql:///openapply
:dbis psql://isis:password@localhost/intersis

And I can then use those aliases for quick sql commands:

sql :dbmb "select count(*) from users"
sql --show-processlist :dbis

Check http://www.gnu.org/software/parallel/sql.html for more examples of use. Also check http://www.gnu.org/software/parallel/ package it’s very powerful, but a bit complicated to catch it, maybe I will provide some examples of practical use in a later tip.

This only works on Mac OSX:

Some time we need not only to yank inside vim, also can yank to clipboard, that’s very easy, you just need map some key your .vimrc:

vmap <Somekey> :w !pbcopy<CR><CR>

Here’s another tip about RSpec/Capybara testing. So, for example, when you want to test a current path of a page you were redirected to or something, normally you will write something like this:

expect(current_path).to eq("/sample/route")

or

expect(current_path).to eq(sample_route_path)

if you prefer to use named routes.

But it’s not going to work when you want to test a path with given params. For example:

visit("/sample/route?page=3")
  puts "current_url = #{current_url.inspect}"
  puts "current_path = #{current_path.inspect}"

will give you outputs:

current_url = "http://domain.subdomain/sample/route?page=3"
  current_path = "/sample/route"

And neither full url nor path without params is what we want here. My solution is to add this method to a module (existed or newly created) inside rspec/support folder of a rails app:

module PathCapybaraModule

    def current_path_with_params
      URI.parse(current_url).request_uri
    end

  end

To use it you just need to include that module in your spec_helper.rb, like this:

RSpec.configure do |config|
    config.include PathCapybaraModule
  end

So, now if you try:

visit("/sample/route?page=3")
  puts "current_path_with_params = #{current_path_with_params.inspect}"
  puts expect(current_path_with_params).to eq("/sample/route?page=3")
  puts expect(current_path_with_params).to eq(sample_route_path(:page => 3))

it will give you:

current_path_with_params = "/sample/route?page=3"
  true
  true

As you can see it works well with both a string-given path and a named route. Enjoy!

You are wrong if your think elasticsearch could only be useful for your search feature. It also pretty good in analytics. It can help for some aggregation, like min, avg or percentiles etc…

For example, We have a students grades and we hope to do some analytics for specific subject in a school. Below is how we did it.

# establish a elasticsearch client
Client = Elasticsearch::Client.new host: 'localhost:9200'

response = Client.search :index => student_grades,
  :body => {
   :query => {
      "query_string" => {
         # find the grades in school 9527 and subject_group is mathematics
         "query" => %| school_id:9527 AND subject_group:'mathematics' |
      }
    },
    :aggs => {
      :grade_stats => {
        "stats" => {
          "field" => "grade"
        }
      },
      :grade_outlier => {
        "percentiles" => {
          "field" => "grade",
          "percents" => [25, 50, 75]
        }
      },
     :grade => {
        "terms" => {
          "field" => "grade"
        }
      }
    }
  }

 # That will be easy for access
 Hashie::Mash.new response

And then this is what we get, grade terms, percentiles for 25%, 50% and 75% and avg, max, sum, etc. And what make it more awesome, it is crazy, crazy fast. It supports more options for aggregation. If you want to build anything related to analytics you should give it a try.

...
 "aggregations"=>
  {"grade"=>
    {"buckets"=>
      [{"key"=>4, "doc_count"=>13},
       {"key"=>5, "doc_count"=>12},
       {"key"=>6, "doc_count"=>5},
       {"key"=>3, "doc_count"=>4},
       {"key"=>7, "doc_count"=>4},
       {"key"=>2, "doc_count"=>2}]},
   "grade_outlier"=>{"25.0"=>4.0, "50.0"=>5.0, "75.0"=>5.0},
   "grade_stats"=>
    {"count"=>40, "min"=>2.0, "max"=>7.0, "avg"=>4.65, "sum"=>186.0}}}

Note: My elasticsearch version is 1.1.1, 1.0.X don’t support Aggregation feature. Facets will be deprecated in the future.

References

• Elasticserch aggregation
• Elasticsearch ruby

Recently I am trying to shorten the time it takes to run rspec on OA. Profiling is a starting point to know which spec takes longest time.

In RSpec 2.14, the team introduced the --profile option to list top N slowest spec in the test suit. Simply add following in our .rspec file:

--profile N

The default value is 10, but you can specify N to list how many you wanna see.

For line break in css, the basic usage is as following:

.type-a
  text-wrap: normal
  word-wrap: break-word

But this does not work inside tables. If we want this to work in tables we must apply {table-layout: fixed } to the table. If we don’t want to use fixed table layout the only solution is:

.type-b
  word-break: break-all // for IE, FF
  word-break: break-word // for chrome

{word-break: break-all} is not really pretty in IE and Firefox but it still works.

So in the normal case we can use .type-a but use .type-b to the elements in table.

live demo:

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

First, you should install peco: https://github.com/peco/peco. It provide a simple interactive filtering interface in shell.

Here an exemple of usage: we can easily integrate peco into git checkout command when you want quickly search and checkout a branch.

Add a alias in you .gitconfig

[alias]
  coi = "!`git checkout $(git branch | peco)`"

then you can use like

git coi

to quickly search and checkout branch in interactive way.

As most the designer, I often need text to display to the mockup/design that I’m working on. Littleipsum is an app that helped me a lot. It’s really simple, you just need to click its icon on the menubar, and choose how much text you want to copy to your clipboard. There are some options for words, sentences, and paragraphs.

• http://littleipsum.com/

The text generated is random, so the text on the mockup will look like a natural text. If you need more than 4 paragraphs, you can just click and generate a new from littleipsum menubar.

It’s also can provide you with HTML text, just using right-click from your mouse will generate text with tag <p>. And it’s in your clipboard then paste inside the HTML.

It’s free but you can help the developer by donation.

Dash is an offline documentation managemer on OSX

• http://kapeli.com/dash

It’s free and has limitation, but you can purchase it and get all function for $19.9.

We always need write code anywhere, anytime, but sometimes there is no network connection. With Dash you can download docset and manage it, and have an exhaustive doc search engine in the computer for offline use.

It also can integrate in many text editor like SublimeText, Vim, emacs etc.