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

This is an online test case management tool, not very expensive. Users can create projects, test plans (which is based on project release), test cases and test runs on the registered website.

• http://www.testlodge.com

After registration, all authorized people can access online test cases via assigned URL, like http://yourproject.testlodge.com/

Basic features

• Grant access & Add people: All granted people can access URL successfully

• Add Projects: Create different projects in same page for better management

• Add Test Plans: Create test plans based on different project release.

• Add Requirement Doc and Requirements: Add and map requirements to Test Suits and Cases.

• Add Test Suits and Test Cases: Create cases within test suits and map to requirements & release plan.

• Add Test Runs: Execute test cases and update record.

No “Add Tags” feature to categorise cases into “Automatically” and “Manually” cases.

(I’m trying another tool now. Will post my feedback in next devtips).

I want to share a SASS selector called ‘referencing parent selector’:

.content 
  width: 100px
  height: 100px
  background: yellow
  .wrapper &
    background: blue

This means the background in .content is yellow but it would turn blue if its parents include .wrapper. This is like a condition, which checks for the presence of a class in the parent element and assigns the background color accordingly. It could have some interesting use cases, specially where you need to use uniform classnames with varied results.

In order to get it right, we need to make sure it’s written correctly. Following is how it should not be written :

.wrapper
  .content
    .wrapper &
 background: blue

This will override the second wrapper and will refer to the first wrapper class and referencing parent selector will be inserted to the first selector in the group. So it will compile to :

.wrapper .wrapper 
   .content{background: blue;}

Here’s a demo :

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

This week i’d like to share may mac setting. I am a big fan of mac’s “hot corner” setting. Say, when I want to visit desktop, I just move the cursor the the top right corner.

please see screenshot to refer how to apply this setting :

After you press the ‘Hot Corners’ button, you get a settings window :

That’s it and this makes it so easier to allow you to access your desktop !

When using partial renderer, Rails adds the controller namespace as prefix the partial path generation. For example: when rendering @student under StudentsController the partial path becomes 'students/student'

While doing it under Admin::StudentsController, the partial path will become 'admin/students/student'

Sometimes, repeating the code or calling from other namespaces becomes tidious. Also, in these cases partial names are unique.

We can disable this behaviour in rails application config:

config.prefix_partial_path_with_controller_namespace = false

Or just switch it off before rendering the partial in the view:

<% self.prefix_partial_path_with_controller_namespace = false %>
<%= render @student %>

ActiveRecord Enum is a functionality introduced in Rails 4.1 to create boolean column with reference to states in your model. We could easily convert our enum definition into a full fledged state machine.

In order to implement this in our app, we would need to create a column to store the state of the model:

add_column :articles, :status, :integer, default: 0

Now, we need to access this column in model and define the enum rule on it.

enum status: [:new, :accepted, :rejected ]

As you can see, we have already defined default 0, which will assign the value to 0th column in our array.Hence, whenever a new article is created, it’s status will be new. Enum reads the array of status names, and maps it to their positions e.g. new to 0, accepted to 1, rejected to 2.

2.1.0 :007 > article.new?
 	=> true

To toggle a state, we just need to add a bang at the end :

2.1.0 :008 > article.accept!
   	(0.2ms)  BEGIN
  	SQL (1.1ms)  UPDATE "articles" SET "status" = $1, "updated_at" = $2 WHERE "articles"."id" = 980190962  [["status", 1], ["updated_at", "2014-08-20 02:00:17.276697"]]
  	(0.7ms)  COMMIT
 	=> true

Check the status :

2.1.0 :009 > article.status
 	=> "accepted"

ngrok is a convenient tool to expose your local web server to the internet . While working with some third-party services, you may need to accept callback requests in your development environment. In that case,you might need ngrok to make the third-party service resolve your localhost like a valid domain.

To install and use ngrok, download it from there website here. It’s a ready to run, bash script. Unzip it to some directory of your choice. Then, make sure you have the server running on a port e.g. rails server on port 3000. Now, run ngrok as a bash script with your port address as an argument :

./ngrok 3000

You will get the web address of your application in the forwarding section of the command line output.

ngrok                        (Ctrl+C to quit)

Tunnel Status                 online
Version                       1.7/1.6
Forwarding                    http://2b034acd.ngrok.com -> 127.0.0.1:3000
Forwarding                    https://2b034acd.ngrok.com -> 127.0.0.1:3000
Web Interface                 127.0.0.1:4040
# Conn                        0
Avg Conn Time                 0.00ms

You can now access your local application from “http://2b034acd.ngrok.com”.

In my work I found a case were I had to sort array using multiple conditions. For example:

• sort by date
• sort by time

In ruby it’s easy enough to create your own own sort rule :

@college.working_days.at_present.sorted.sort do |a,b|
  if b.date > a.date
     -1
  else
     a.started_at <=> b.started_at
  end
end

You can return 1 or -1 in order to specify it’s order.

time-elements is a very useful component built on top of WebComponent. With this, you could let the js decide your local time, and cache the time in view, without bothering about the time lapse.

It will update the time element every 1 minute, and it also has attribute change event to let you change the time in realtime.

Here is a quick tip about git. It is useful when you edit a very long line and you want to see the actual changes in that commit within that single line. “word-diff” is an option that we can use in such cases.

To do that, use:

GIT_PAGER='' git diff commit1..commit2 --word-diff

where commit1 and commit2 are boundaries of your changes. GIT_PAGER setting provides words wrap, so your line is not cut at the console screen border.

The example output for a very long hash definition line is as shown below :

I want to share an interesting way to center element of the whole window with css.

1. First, give the wrapper a padding property 50 viewport height:

   { padding: 50vh; }

and adjust the position of the content element:

{position: absolute; left: 50%; top: 50%;}

1. Then the content would start its position at the center of the window and grows to right side and down.

2. The final step is give content element a offset transform style:

   { transform: translate(-50%, -50%)}

You would get a perfect window centered element! Chekout the demo below and the browser support here.

Demo:

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