Recaptcha gem with custom theme using bootstrap form controls

Recently i have used recaptcha gem in one of my rails application with custom bootstrap form controls. Here i am sharing my codes, so that someone can get help from this. Thanks to the creator of this awesome jsfiddle, because I have followed this to create the custom recaptcha bootstrap theme.

First of all checkout installation documentation of recaptcha gem here and add it to your application. 

Now check my gist below. app/views/shared/_recaptcha.html.haml file is the main file which generates the recaptcha with custom bootstrap theme.

Here is the output of recaptcha custom theme using bootstrap form controls. Enjoy!

How to draw Inverse Circle in Google Map?

When i was working one of my client projects, there was a requirement to draw a Circle in Google Map. But the circle was quite different from regular Circle of Google Map Javascript API. In Google Map Javascript API the regular Circle has an option to fill the inside of circle with a color, but Requirement was inverse, means we have to fill the outside of the circle! My client wants everything outside of the circle to be filled in with the color and opacity that he wants to set.

After lots of searching in Google and reading Google Map Javascript API, when I didn't find any solution, then I started to build my own library to draw an InvertedCircle . I used google.maps.MVCObject class to give same functionality as regular Circle of  Google Map Javascript API

It has following methods and events, Following table design has been copied from https://developers.google.com/maps/documentation/javascript/reference#Circle

Methods

Methods	Return Value	Description
getBounds()	LatLngBounds	Gets the LatLngBounds of this Circle.
getCenter()	LatLng	Returns the center of this circle.
getEditable()	boolean	Returns whether this circle can be edited by the user.
getMap()	Map	Returns the map on which this circle is displayed.
getRadius()	number	Returns the radius of this circle (in meters).
getVisible()	boolean	Returns whether this circle is visible on the map.
setCenter(center:LatLng)	None	Sets the center of this circle.
setEditable(editable:boolean)	None	If set to true, the user can edit this circle by dragging the control points shown at the center and around the circumference of the circle.
setMap(map:Map)	None	Renders the circle on the specified map. If map is set to null, the circle will be removed.
setRadius(radius:number)	None	Sets the radius of this circle (in meters).
setVisible(visible:boolean)	None	Hides this circle if set to false.

Events

Events	Arguments	Description
center_changed	None	This event is fired when the circle's center is changed.
radius_changed	None	This event is fired when the circle's radius is changed.
visible_changed	None	This event is fired when the circle's visible is changed.

I will try to improve my library so that it will be more flexible. Special thanks to Sammy Hubner for giving me some awesome codes, which helped me to solve problems and to build this library. 

You can find code in Github, url is https://github.com/raihan2006i/google-map-inverted-circle 

Here is the screenshots of InvertedCircle, You can check Demo File 

Implementing setOptions() function in jQuery Tokeninput

Thanks James Smith for a great jQuery plugin, jQuery Tokeninput

What is jQuery Tokeninput?

A jQuery plugin which allows you to select/search multiple items from a predefined JSON object list, using auto-completion as you type to find each item on a specific JSON object attribute. You may have seen a similar type of text entry in Facebook when filling in the recipients field during sending message.

See demos here http://loopj.com/jquery-tokeninput/demo.html
See options here http://loopj.com/jquery-tokeninput/#configuration

Why we need setOptions() function?

In jQuery Tokeninput the most important option is propertyToSearch (The javascript/json object attribute to search. default: “name”), which was not changeable before implementing setOptions() function.

While using jQuery Tokeninput I realized that if there is an option to change propertyToSearch at any-time that might be very useful. Then I started implementing setOptions() function in jQuery Tokeninput.
Following example shows that we can change propertyToSearch and hintText at any-time we want, using setOptions() function:

    $(document).ready(function() {
        $(element).tokenInput([{
                    "first_name": "Arthur",
                    "last_name": "Godfrey",
                    "email": "arthur_godfrey@nccu.edu",
                    "url": "https://si0.twimg.com/sticky/default_profile_images/
                },
                {
                    "first_name": "Adam",
                    "last_name": "Johnson",
                    "email": "wravo@yahoo.com",
                    "url": "https://si0.twimg.com/sticky/default_profile_images/
                }], {propertyToSearch: "first_name"}
        );
    });

Later we can do followings at any time

$(element).tokenInput("setOptions", {propertyToSearch: 'first_name', hintText: "Type first name here to search"});
$(element).tokenInput("setOptions", {propertyToSearch: 'last_name', hintText: "Type last name here to search"});
$(element).tokenInput("setOptions", {propertyToSearch: 'email', hintText: "Type email here to search"});
$(element).tokenInput("setOptions", {propertyToSearch: 'url', hintText: "Type url here to search"});

You can see that now we can change propertyToSearch at any-time

You will find latest updates in Github project page https://github.com/loopj/jquery-tokeninput and checkout https://github.com/loopj/jquery-tokeninput/blob/master/demo.html file for demo of setOptions() function in Change propertyToSearch anytime section

How to fix "Could not open a connection to your authentication agent." problem in Ubuntu

First you have to find out what is your groupname of current logged in user. For example my current logged in username is arman. So I run following command in my terminal

id arman

Output would be something like below

uid=1000(arman) gid=1000(arman) groups=1000(arman),4(adm),20(dialout),24(cdrom),46(plugdev),105(lpadmin),119(admin),122(sambashare)

So my username is arman and groupname is arman

Step 1: Backup your ~/.ssh folder

Step 2: Run following commands in your terminal

sudo chown -R username:groupname ~/.ssh
chown username ~/.ssh
cd ~/.ssh
chmod 600 *

Step 3: Run following command in your terminal

exec ssh-agent bash
sudo ssh-add ~/.ssh/id_rsa