Float Property in css


The float property allows us to take an element, remove it from the normal flow of a page, and position it to the left or right of its parent element. like if we want to move an image on the left side of the screen we can use


float: left;


when we use float element it will change the normal flow of the page even changes the margins and padding. Also, changes the default display value we must keep an eye on their display property. so to remove or solve this issue we can use clear

now the clear has three values
left, right, both

clear:left;                          // removes the left float
clear:right:                       //removes the right float
clear: boht:                      //removes both right and left float


Action Cable(Rails 5)

Action cables

Action cable is introduced in rails5. It uses for Real-time communication.
Now here we discuss how to configure action cables in your websites.

1. Setup Action cable connection
For this, Open app/channels/application_cables/connection.rb

Here we will define 2 methods

class Connection < ActionCable::Connection::Base
#Totally rely on siged in user
identified_by :current_user
def connect
self.current_user= find_current_user

def disconnect

def find_current_user
if current_user = User.find_by(id: cookies.signed[‘user.id’])


Here generally we find the current user from cookies of browser and get the user id

2. Authenticate the user on Web server

Open config/initializers/warden.rb

Warden::Manager.after_set_user do |user, auth, opts|
scope = opts[:scope]
auth.cookies.signed[“#{scope}.id”] = user.id

#Delete the cookies when user is signed out
Warden::Manager.before_logout do |user, auth, opts|
scope = opts[:scope]
auth.cookies.signed[“#{scope}.id”] = nil

this will perform 2 actions

First, this will set cookies for signed in user and then make it available for the user and secondly this will erase the cookies when user signed out

3. Acces Action cable server through rails server

For this, Open config/application.rb

and add a line under

Class Application <Rails::Application



By default action cable works on mount under ‘/cables’

after that, we have to mount this /cable in routes.

4. Open Routes.rb

Add this line in the end

mount ActionCable.server => ‘/cable’

5. Create a messaging

After all this, We have to create a messaging channel.

Here, we are creating channel for comments.


$rails generate channel comments

will create 3 files.

Screenshot from 2017-01-27 12-38-34.png

6. Open comments_channel.rb

Here uncomment the line written in subscribed method

def subscribed

stream_from “comments”


I created channel comments so I have replaced stream from comments.

7. Broadcast the comment

Open  comments_controller.rb

here add 2 lines under we save the comment

  if @comment.save

ActionCable.server.broadcast “comments”,
render(partial:’comments/comment’,object: @comment)

flash[:success] = “Comment has been created”

this code will generally  broadcast the comment and rendAer a partial named as comment

8. Create a partial for this

Open views/comments/_comment.html.erb

<%= comment.body %>
<%= time_ago_in_words(comment.created_at) %>
ago by <%= comment.user.email %>

and Add a line where you have created the form for controller

remote: true

like this

my comment form is present in show.html.erb

 <%= form_for [@article,@comment], remote: true, :html => {class: “form-horizontal”, role: “form”} do |f| %>

this will specify we are using Ajax

9.  Update comments.coffee file

open app/assests/javascripts/channels/comments.coffee

add a line

recieved: (data) ->


this will call when there is an upcoming message on the web socket for this channel

in this make sure you have indented the line properly here indentation matters.

now check your app in the browser and if you have any problem leave a comment below.

RSpec And Capybara(Rails5.0)

Rails application comes with a default testing framework known as mini test

But here we discuss RSpec because it is most widely used framework

Installation of Rspec and capybara

Step 1: open Gemfile

“gem ‘rspec-rails’, ‘3.1.0’”

in group development, :test do

Step 2: Create another group for test

group :test do
gem ‘capybara’, ‘2.7.1’

Step 3: Run

$bundle install

Step 4: Run

$rails generate rspec:install

Step 5: Last Step is to generate Stub

$bundle binstub rspec-core

Great! By this you have successfully installed RSpec

Dive into Rails 5.0

Rails is upgraded to Rails 5.0. With new release, we have new features including Action cables, API modes and many more. Let’s have fun by using these new features.

Let’s start from the start

If you haven’t install rails yet then go and install it from here

Generally, To create a rails application we use

$rails new blog_app

Now if we want to skip the default testing comes with the rails application we use

$rails new blog_app -T

Action cables

Earlier, Their is very difficult in rails to implement real time communication which include chats, irc, real-time editors but now in rails5 we can easily do it using Action cables

what it does?
It integrates web sockets with rest of the rails application which allows real-time
communication in rails.
In simple language, There is an open connection between your server and application.
We will discuss about it in future so stay connected.


Rspec is a testing tool for Ruby, created for behavior-driven development (BDD). It is the most frequently used testing library for Ruby in production applications. Even though it has a very rich and powerful DSL (domain-specific language), at its core it is a simple tool which you can start using rather quickly. This tutorial will hopefully help you get started, assuming you have no prior experience with RSpec and even testing

we will discuss in detail about RSpec in future.