Coding Tidbits

Rails Turbolinks

2014-10-08T00:00:00+00:00

What is turbolinks ?

We know that, in Rails 4 gem turbolinks is added by default. This gem makes our Rails application appears faster to user by using javascript to replace HTMl body of new pages instead of Full page reload.

Check in Rails 4 app for turbolinks -

in `gemfile’

gem 'turbolinks'

in app/assets/javascripts/application.js

//= require turbolinks

When the click event on page fires the request is made by JavaScript and Turbolinks will look at the response’s body. It then uses JavaScript to update the current page with this new content, replacing the title and body elements so that it looks like the new page instead of reloading the page.

Issues with javascript functionality

After using turbolinks, it might be possible that some of our existing JavaScript stops working. For example: some click events on page.

When we use Turbolinks this events callback is only triggered on the initial page load.

Solutions to fix javascript functionality issues with turbolinks.

There are several events that Turbolinks will trigger, one of which is called page:load.

  ready = ->
    $('#show_alert').click ->
      alert "Alert- Turbolinks works here."

$(document).ready(ready)
$(document).on('page:load', ready)

we set the function on click event to a variable called ready and pass it to both the document.ready and the page:load events. This way the events for the #show_alert will be attached whether we’ve loaded the page via Turbolinks or not.

Other solution is, we can use jquery-turbolinks gem.

Add gem ‘jquery-turbolinks’ in Gemfile.

gem 'jquery-turbolinks'

Then in JavaScript manifest file -

require it immediately after jquery.js. Your other scripts should be loaded after jquery.turbolinks.js, and turbolinks.js should be after your other scripts.

//= require jquery
//= require jquery.turbolinks
//= require jquery_ujs
//
// ... your other scripts here ...
//
//= require turbolinks

And it works!

If we create a new Rails 4 application and decide not to use Turbolinks we can easily remove it by commenting-out the gem in the gemfile and the require statement in the application’s JavaScript manifest file.

References:

https://github.com/kossnocorp/jquery.turbolinks

Using Que gem with Phusion Passenger

2014-09-16T09:53:57+00:00

Que is a background jobs gem for Ruby and PostgreSQL, an excellent alternative to DelayedJob if you are using Postgres.

Our Tweetd project is deployed on a linode slice with nginx and Phusion Passenger.

We can run Que workers (threads) within the web process. Que documentation has usage information about using unicorn and puma servers, but not passenger.

After a bit of googling, came across passenger docs which says passenger provides PhusionPassenger.on_event(:starting_worker_process) hook to specify our own custom code, when a new process is forked.

Finally, stuffed application.rb with following and it worked flawlessly!

if defined?(PhusionPassenger)
  PhusionPassenger.on_event(:starting_worker_process) do |forked|
    if forked
      # We're in smart spawning mode.
      ActiveRecord::Base.establish_connection
      Que.mode = :async
    end
  end
end

Angular PhoneCat Tutorial in React JS

2014-08-08T07:06:55+00:00

In this tutorial, we are going to re-implement the Angular JS PhoneCat tutorial in React JS.

Live Final Demo

PhoneCat Tutorial

PhoneCat is a catalog of Android devices, which you can filter, sort and see details of the device.

In this 12 step tutorial you will learn about:

React JS
Creating components
Components interaction
Routing in React

After you complete all the steps in this tutorial, you’ll have an app that looks something like this:

Live Final Demo

About React JS

React JS for the uninitiated, is a javascript framework from Facebook/Instagram. Most commonly used as a V in MVC. React is used in production by FaceBook, Instagram, Khanacademy, Atom editor and many more.

React uses Virtual DOM, an in-memory representation of the browser DOM, making it possible to re-render our entire app on every data change. Just like the good old 90’s!

Developing apps in React requires different thinking than other typical javascript frameworks.

React JS Primer

Components Not Templates

Enough treating Views as strings. React uses javascript objects (called components) to represent the app markup. Components facilitate separation of concerns and can be unit tested in isolation.

React components are created with React.createClass method. Every component must implement a render method.

Here is a very simple Hello component.

Hello = React.createClass({
  render: function(){
    return React.DOM.div(null, "Hello")
  }
})

React.renderComponent(Hello(), document.body);

As you can imagine, React.renderComponent renders our Hello component in document.body.

JSX

XML like HTML markup inside javascript is called JSX. JSX makes it easy for non-developers (for example designers) to edit the components. JSX is converted to javascript by the JSX transformer. /** @jsx React.DOM */ comment, signifies a jsx file, so JSX transformer can act on it.

For example

/** @jsx React.DOM */
Hello = React.createClass({
  render: function(){
    return <div>Hello</div>
  }
})

gets converted to

Hello = React.createClass({
  render: function(){
    return React.DOM.div(null, "Hello")
  }
})

Head over to displaying-data for a more complete primer.

Step-0 Bootstrapping

Step-0 Live Demo

Code Diff

Tutorial sources are available at reactjs-phonecat.

We are using react-starter-template for the tutorial. node.js is used as local server and gulp.js as build tool.

To get strated, clone the repo and execute following commands in the project directory

$ git clone https://github.com/girishso/reactjs-phonecat#
$ cd reactjs-phonecat
$ git checkout -f step-0
$ npm install
$ bower install

Once successfully done, you can run the server by executing

$ gulp dev

Goto http://127.0.0.1:4000/ in your browser. You should see a success message.

Step-1 Mockups

Mock home page

Code Diff

Mock phone page

Let’s start with the mockups of the actual pages we are going to create.

# To reset workspace
$ git checkout -f step-1

We have added html mockups, stylesheets and images. You can see the mockups here

http://127.0.0.1:4000/mock_index.html

http://127.0.0.1:4000/mock_show.html

PhoneCat components

Our next task is identifying the components. This is a very subjective topic and everybody can have different opinions. Here are the components I’ve decided to go with for the Home page.

Here is our components hierarchy -

- PhoneCatWrapper (blue)
  - PhoneCat (yellow)
    - SearchForm (red)
    - PhonesList (orange)
      - Phone (green)

Step-2 PhoneCatWrapper component

Step-2 Live Demo

Code Diff

# To reset workspace
$ git checkout -f step-2

Let’s modify index.html, and use it as layout for the app.

src/index.html

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>React Phone Gallery</title>
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <link rel="stylesheet" href="assets/vendor/bootstrap.css" />
  <link rel="stylesheet" href="assets/main.css" />
</head>
<body>
  <div id="app" class="container">
  </div>
  <script type="text/javascript" src="assets/main.js"></script>
</body>
</html>

main.js is the entry point of our app. It renders the PhoneCatWrapper component in #id

src/scripts/main.js

/** @jsx React.DOM */
require("script!react/react-with-addons.js")
require("script!jquery/jquery.js")
var PhoneCatWrapper = require("./components/PhoneCatWrapper.js")
React.renderComponent(<PhoneCatWrapper />, document.getElementById('app'))

We have copied contents of div.row from mock_index.html in the render function of PhoneCatWrapper.

src/scripts/components/PhoneCatWrapper.js

/** @jsx React.DOM */
var PhoneCatWrapper = React.createClass({
  render: function() {
    return (
      <div class="row">
        <div class="col-md-2">
          Search:
          <input type="text"/>
          Sort by:
          <select >
            <option value="name">Alphabetical</option>
            <option value="age">Newest</option>
          </select>
        </div>
        <div class="col-md-10">
          <ul class="phones">
          <li class="thumbnail phone-listing">
            <a href="#/phones/motorola-xoom-with-wi-fi" class="thumb"><img src="images/phones/motorola-xoom-with-wi-fi.0.jpg"></a>
            <a href="#/phones/motorola-xoom-with-wi-fi" >Motorola XOOM™ with Wi-Fi</a>
            <p>The Next, Next Generation

              Experience the future with Motorola XOOM with Wi-Fi, the world's first tablet powered by Android 3.0 (Honeycomb).
            </p>
          </li>
          <!-- code deleted for brevity -->
        </ul>
        </div>
      </div>
    )
  }
});

module.exports = PhoneCatWrapper;

Right now if you refresh the browser, it fails saying Line 19: Expected corresponding XJS closing tag for img. JSX needs strict XML. Let’s add the img closing tags.

Now it’s working but the layout is all messed up. This is because JSX expects HTML attributes in a slightly different manner, the culprit here is class it’s not showing up in the rendered HTML. To fix this replace all class attributes with className.

Now it’s working as expected!

Step-3 Extract all static components

Step-3 Live Demo

Code Diff

# To reset workspace
$ git checkout -f step-3

To speedup the things, let’s extract all the remaining components from PhoneCatWrapper. Note that all these components have static html.

You won’t notice any difference in the UI, it’s the same old html rendered in browser. But we have modularized our code, more maintainable.

We intend to use PhoneCatWrapper as a thin wrapper having state around PhoneCat component.

src/scripts/components/PhoneCatWrapper.js

var PhoneCat = require("./PhoneCat.js")

var PhoneCatWrapper = React.createClass({
  render: function() {
    return (
      <PhoneCat />
    )
  }
});

PhoneCat is composed of SearchForm and PhonesList components.

src/scripts/components/PhoneCat.js

/** @jsx React.DOM */
var PhonesList = require("./PhonesList.js")
var SearchForm = require("./SearchForm.js")

var PhoneCat = React.createClass({
  render: function() {
    return (
      <div className="row">
        <div className="col-md-2">
          <SearchForm />
        </div>
        <div className="col-md-10">
          <PhonesList />
        </div>
      </div>
    )
  }
});

module.exports = PhoneCat;

PhonesList includes multiple Phone components.

src/scripts/components/PhonesList.js

/** @jsx React.DOM */
var Phone = require("./Phone.js")

var PhonesList = React.createClass({
  render: function() {
    return (
      <ul className="phones">
        <Phone />
        <Phone />
      </ul>
    )
  }
});

module.exports = PhonesList;

Phone represents… well a phone!

src/scripts/components/Phone.js

/** @jsx React.DOM */

var Phone = React.createClass({
  render: function() {
    return (
      <li className="thumbnail phone-listing">
        <a href="#/phones/motorola-xoom-with-wi-fi" className="thumb"><img src="images/phones/motorola-xoom-with-wi-fi.0.jpg" /></a>
        <a href="#/phones/motorola-xoom-with-wi-fi" >Motorola XOOM™ with Wi-Fi</a>
        <p>The Next, Next Generation

          Experience the future with Motorola XOOM with Wi-Fi, the world's first tablet powered by Android 3.0 (Honeycomb).
        </p>
      </li>
    )
  }
});

module.exports = Phone;

Finally, the SearchForm.

src/scripts/components/SearchForm.js

/** @jsx React.DOM */

var SearchForm = React.createClass({
  render: function() {
    return (
      <div>
        Search:
        <input type="text"/>
        Sort by:
        <select >
          <option value="name">Alphabetical</option>
          <option value="age">Newest</option>
        </select>
      </div>
    )
  }
});

module.exports = SearchForm;

Setp-4 Add dynamism

Step-4 Live Demo

Code Diff

# To reset workspace
$ git checkout -f step-4

Enough of static components, let’s make ‘em dynamic!

Enter props (short for properties), props is how components talk to each other.

Our API is going to return JSON that looks like PHONES array.

src/scripts/components/PhoneCatWrapper.js

/** @jsx React.DOM */
var PhoneCat = require("./PhoneCat.js")

var PHONES = [
    {
        "age": 0,
        "id": "motorola-xoom-with-wi-fi",
        "imageUrl": "images/phones/motorola-xoom-with-wi-fi.0.jpg",
        "name": "Motorola XOOM\u2122 with Wi-Fi",
        "snippet": "The Next, Next Generation\r\n\r\nExperience the future with Motorola XOOM with Wi-Fi, the world's first tablet powered by Android 3.0 (Honeycomb)."
    },
    {
        "age": 1,
        "id": "motorola-xoom",
        "imageUrl": "images/phones/motorola-xoom.0.jpg",
        "name": "MOTOROLA XOOM\u2122",
        "snippet": "The Next, Next Generation\n\nExperience the future with MOTOROLA XOOM, the world's first tablet powered by Android 3.0 (Honeycomb)."
    },
    {
        "age": 2,
        "carrier": "AT&T",
        "id": "motorola-atrix-4g",
        "imageUrl": "images/phones/motorola-atrix-4g.0.jpg",
        "name": "MOTOROLA ATRIX\u2122 4G",
        "snippet": "MOTOROLA ATRIX 4G the world's most powerful smartphone."
    },
    {
        "age": 3,
        "id": "dell-streak-7",
        "imageUrl": "images/phones/dell-streak-7.0.jpg",
        "name": "Dell Streak 7",
        "snippet": "Introducing Dell\u2122 Streak 7. Share photos, videos and movies together. It\u2019s small enough to carry around, big enough to gather around."
    }
]

var PhoneCatWrapper = React.createClass({
  render: function() {
    return (
      <PhoneCat phones={PHONES} />
    )
  }
});

We are passing PhoneCat a property phones and assigning it to the PHONES array. In JSX you need to include javascript code inside the curly braces.

src/scripts/components/PhoneCat.js

var PhoneCat = React.createClass({
  render: function() {
    return (
      <div className="row">
        <div className="col-md-2">
          <SearchForm />
        </div>
        <div className="col-md-10">
          <PhonesList phones={this.props.phones} />
        </div>
      </div>
    )
  }
});

In PhoneCat we are passing phones property to PhonesList. You can access props inside the component as this.props.property_name

src/scripts/components/PhonesList.js

var PhonesList = React.createClass({
  render: function() {
    var phones = this.props.phones.map(function(phone, i){
      return <Phone phone={phone} key={i} />
    });

    return (
      <ul className="phones">
        {phones}
      </ul>
    )
  }
});

In PhonesList render function, we are creating an array phones of Phone components using the javascript map function. Then we are rendering that array. This is how you typically deal with a collection of components in React.

key property is used to uniquely identify the child components.

src/scripts/components/Phone.js

var Phone = React.createClass({
  render: function() {
    var phone = this.props.phone;

    return (
      <li className="thumbnail phone-listing">
        <a href="#" className="thumb"><img src={phone.imageUrl} /></a>
        <a href="#">{phone.name}</a>
        <p>{phone.snippet}</p>
      </li>
    )
  }
});

In Phone we are using the phone property to assign the image, name and snippet. Let’s worry about the links when we deal with the PhoneDetails component.

Step-5 Filter and Sort

Step-5 Live Demo

Code Diff

# To reset workspace
$ git checkout -f step-5

Now that we have a dynamically generated app. Let’s add filter and sort features.

This is the time to identify the app state. Go through this article to read more about identifying the app state.

The only actions user can perform are filter and sort. So our state is

filter text that user has entered
sort order that user has selected

Next we need to identify where the app state should live. Go through this article read more about identifying where the state should live. In our app, we are going hold the state in PhoneCat component.

src/scripts/components/PhoneCat.js

var PhoneCat = React.createClass({
  getInitialState: function() {
      return {
        filter_text: '',
        sort_by: 'age'
      }
  },
  handleSearch: function(filter_text, sort_by) {
    this.setState({
      filter_text: filter_text,
      sort_by: sort_by
    })
  },
  render: function() {
    return (
      <div className="row">
        <div className="col-md-2">
          <SearchForm searchHandler={this.handleSearch} filter_text={this.state.filter_text} sort_by={this.state.sort_by} />
        </div>
        <div className="col-md-10">
          <PhonesList phones={this.props.phones} filter_text={this.state.filter_text} sort_by={this.state.sort_by} />
        </div>
      </div>
    )
  }
});

We need to implement the getInitialState function, to return { filter_text: '', sort_by: 'age' }, this is initial state our app should have.

Next we have added handleSearch function, it sets the state with this.setState. Whenever this.setState is executed React will automatically re-render our app with the minimal set of DOM changes required.

Then we are passing filter_text and sort_by to SearchForm and PhonesList as props. We are also passing reference to this.handleSearch as a prop to SearchForm. This is the recommended way if you need invoke a parent component method from a child component.

src/scripts/components/SearchForm.js

var SearchForm = React.createClass({
  onChangeHandler: function() {
    var query = this.refs.query.getDOMNode().value.trim();
    var order = this.refs.order.getDOMNode().value;
    this.props.searchHandler(query, order);
  },
  render: function() {
    return (
      <div>
        Search:
        <input type="text" value={this.props.filter_text} ref="query" onChange={this.onChangeHandler} />
        Sort by:
        <select value={this.props.sort_by} ref="order" onChange={this.onChangeHandler}>
          <option value="name">Alphabetical</option>
          <option value="age">Newest</option>
        </select>
      </div>
    )
  }
});

In SearchForm we are using props filter_text and sort_by set values of input and select.

For handling user events, React provides a cross-browser synthetic event system. For handling input and select change events, React provides onChange event. To read more about synthetic events go here.

onChangeHandler function uses refs to get hold of the form elements. refs is a special property, to read more go here.

getDOMNode() returns the native DOM object as you can imagine.

onChangeHandler then invokes this.props.searchHandler(query, order), which is a reference to handleSearch function from PhoneCat.

src/scripts/components/PhonesList.js

var PhonesList = React.createClass({
  render: function() {
    var props = this.props;

    var filtered = $.grep(this.props.phones, function(phone) {
      return phone.name.toLowerCase().indexOf(props.filter_text) > -1;
    });

    var sorted = filtered.sort(function(a, b) {
        if(props.sort_by === 'name')
          return a.name.localeCompare(b.name)
        else
          return a.age - b.age
      });

    var phones = sorted.map(function(phone, i){
      return <Phone phone={phone} key={i} />
    });

    return (
      <ul className="phones">
        {phones}
      </ul>
    )
  }
});

The render function of PhonesList, filters the phones property using jQuery.grep. Then sorts the filtered phones using javascript sort function.

Step-6 Ajax

Step-6 Live Demo

Code Diff

# To reset workspace
$ git checkout -f step-6

In this step we will get the data from our JSON API. There is no API for the tutorial, we will just fetch /phones/phones.json from the server.

Let’s get rid of the static PHONES array.

src/scripts/components/PhoneCatWrapper.js

var PhoneCatWrapper = React.createClass({
  getInitialState: function() {
      return {
        phones: []
      }
  },
  componentDidMount: function() {
    $.getJSON('/phones/phones.json', (function(data) {
      this.setState({phones: data});
    }).bind(this));

  },
  render: function() {
    return (
      <PhoneCat phones={this.state.phones} />
    )
  }
});

We are going to store the phones data returned from the API in PhoneCatWrapper state. getInitialState function returns an empty phones array.

The componentDidMount function is invoked immediately after the component is rendered in the browser DOM. This is a good place to call our API using jQuery.getJSON function. On success we are storing the data in state using this.setState.

Step-7 Phone page

Step-7 Live Demo

Code Diff

# To reset workspace
$ git checkout -f step-7

Now that we are done with the home page, it’s time to add the Phone page. Here is the screenshot of our mock page.

Here is our components hierarchy for the phone page -

- PhoneDetailsWrapper (blue)
  - PhoneDetails (green)
    - ImageGallery (red)

We will display Phone page on path /phones/some-phone-id.

Before we get into creating Phone page components, we need to resolve one issue. How is our app going to load the Phone page for path /phones/some-phone-id?

We need some routing framework for this, remember React only deals with the V of the MVC. There are many possibilities - we could use backbone routes, crossroads or many more.

We are going with react-router, it’s specific to React and will be easier to deal with.

src/scripts/main.js

require('script!react-router/dist/react-router.js')

var Route = ReactRouter.Route;
var Link = ReactRouter.Link;
var PhoneCatWrapper = require("./components/PhoneCatWrapper.js")
var PhoneDetailsWrapper = require("./components/PhoneDetailsWrapper.js")

App = React.createClass({
  render: function(){
    return(
      <div>
        <ul>
          <li><Link to="phones">Home</Link></li>
        </ul>
        <this.props.activeRouteHandler/>
      </div>
    )
  }
})

React.renderComponent(
  (<Route handler={App}>
      <Route name="phones" handler={PhoneCatWrapper}/>
      <Route name="phone" path="/phones/:phoneId" handler={PhoneDetailsWrapper} />
    </Route>), document.getElementById('app'));

Note: Home page will be accessible on - http://127.0.0.1:4000/#/phones

Here we have created an App component, that serves as routes handler. In the render function we are rendering a very basic nav-bar with only Home link. <this.props.activeRouteHandler/> renders the active route handler. You can read more about activeRouteHandler here.

Then in React.renderComponent, we are defining our routes. Route handler is App, phones route handler is PhoneCatWrapper and phone route handler is PhoneDetailsWrapper. path="/phones/:phoneId" makes the phoneId accessible to the handler via props as we will see later.

Now let’s add PhoneDetailsWrapper component, copy and paste section#main from the mock_show.html page to render function. Don’t forget to add <img> closing tags and change class to className!

src/scripts/components/PhoneDetailsWrapper.js

var PhoneDetailsWrapper = React.createClass({
  render: function() {
    return (
      <section id="main"><div className="phone-images"><img src="images/phones/motorola-xoom-with-wi-fi.3.jpg" className="phone" />
      </div>
      <h1>Motorola XOOM™ with Wi-Fi</h1>
      <p>Motorola XOOM with Wi-Fi has a super-powerful dual-core processor and Android™ 3.0 (Honeycomb) — the Android platform designed specifically for tablets. With its 10.1-inch HD widescreen display, you’ll enjoy HD video in a thin, light, powerful and upgradeable tablet.</p>
      <ul className="phone-thumbs"><li><img src="images/phones/motorola-xoom-with-wi-fi.0.jpg" />
      </li><li><img src="images/phones/motorola-xoom-with-wi-fi.1.jpg" />
      </li><li><img src="images/phones/motorola-xoom-with-wi-fi.2.jpg" />
      </li><li><img src="images/phones/motorola-xoom-with-wi-fi.3.jpg" />
      </li><li><img src="images/phones/motorola-xoom-with-wi-fi.4.jpg" />
      </li><li><img src="images/phones/motorola-xoom-with-wi-fi.5.jpg" />
      </li></ul>
      <ul className="specs"><li>
          <span>Availability and Networks</span>
          <dl>
              <dt>Availability</dt>
              <dd></dd>
          </dl>
      </li>

      <li>
          <span>Battery</span>
          <dl>
              <dt>Type</dt>
              <dd>Other ( mAH)</dd>
              <dt>Talk Time</dt>
              <dd>24 hours</dd>
              <dt>Standby time (max)</dt>
              <dd>336 hours</dd>
          </dl>
      </li>
      <!-- code deleted for brevity -->
      </ul>
      </section>
    )
  }
});

module.exports = PhoneDetailsWrapper;

src/scripts/components/Phone.js

Link = ReactRouter.Link;

var Phone = React.createClass({
  render: function() {
    var phone = this.props.phone;

    return (
      <li className="thumbnail phone-listing">
        <Link to="phone" phoneId={phone.id} className="thumb" >
          <img src={phone.imageUrl} />
        </Link>
        <Link to="phone" phoneId={phone.id} >
          {phone.name}
        </Link>
        <p>{phone.snippet}</p>
      </li>
    )
  }
});

We have modified Phone component to include Link to the Phone details page. So the links on Home page should finally be working!

Step-8 PhoneDetails and ImageGallery components

Step-8 Live Demo

Code Diff

# To reset workspace
$ git checkout -f step-8

Now let’s extract PhoneDetails component from PhoneDetailsWrapper. We have simply moved the render method from PhoneDetailsWrapper to PhoneDetails.

src/scripts/components/PhoneDetailsWrapper.js

var PhoneDetails = require("./PhoneDetails.js")

var PhoneDetailsWrapper = React.createClass({
  render: function() {
    return (
      <PhoneDetails />
    )
  }
});

src/scripts/components/PhoneDetails.js

var PhoneDetails = React.createClass({
  render: function() {
    return (
      <section id="main"><div className="phone-images"><img src="images/phones/motorola-xoom-with-wi-fi.3.jpg" className="phone" />
      </div>
      <h1>Motorola XOOM™ with Wi-Fi</h1>
      <p>Motorola XOOM with Wi-Fi has a super-powerful dual-core processor and Android™ 3.0 (Honeycomb) — the Android platform designed specifically for tablets. With its 10.1-inch HD widescreen display, you’ll enjoy HD video in a thin, light, powerful and upgradeable tablet.</p>

      <ImageGallery />

      <ul className="specs"><li>
          <span>Availability and Networks</span>
          <dl>
              <dt>Availability</dt>
              <dd></dd>
          </dl>
      </li>

      <li>
          <span>Battery</span>
          <dl>
              <dt>Type</dt>
              <dd>Other ( mAH)</dd>
              <dt>Talk Time</dt>
              <dd>24 hours</dd>
              <dt>Standby time (max)</dt>
              <dd>336 hours</dd>
          </dl>
      </li>
      <!-- code deleted for brevity -->
      </section>
    )
  }
});

module.exports = PhoneDetails;

Let’s extract ImageGallery component from PhoneDetails.

src/scripts/components/ImageGallery.js

var ImageGallery = React.createClass({
  render: function() {
    return (
      <ul className="phone-thumbs"><li><img src="images/phones/motorola-xoom-with-wi-fi.0.jpg" />
      </li><li><img src="images/phones/motorola-xoom-with-wi-fi.1.jpg" />
      </li><li><img src="images/phones/motorola-xoom-with-wi-fi.2.jpg" />
      </li><li><img src="images/phones/motorola-xoom-with-wi-fi.3.jpg" />
      </li><li><img src="images/phones/motorola-xoom-with-wi-fi.4.jpg" />
      </li><li><img src="images/phones/motorola-xoom-with-wi-fi.5.jpg" />
      </li></ul>
    )
  }
});

module.exports = ImageGallery;

Step-9 Get phone details on Ajax

Step-9 Live Demo

Code Diff

# To reset workspace
$ git checkout -f step-9

To save us time, instead of using a static PHONE array in PhoneDetailsWrapper, we are directly loading it using Ajax from the server.

src/scripts/components/PhoneDetailsWrapper.js

var PhoneDetailsWrapper = React.createClass({
  getInitialState: function() {
    return {
      phone: {
        images: [],
        battery: {},
        storage: {},
        connectivity: {},
        android: {},
        sizeAndWeight: {
          dimensions: []
        },
        display: {},
        hardware: {},
        camera: {
          features: []
        }
      }
    };
  },
  componentDidMount: function() {
    var url;
    url = "phones/" + this.props.params.phoneId + ".json";
    return $.getJSON(url, (function(data) {
      data.phone_image = data.images[0];
      return this.setState({
        phone: data
      });
    }).bind(this));
  },
  render: function() {
    return <PhoneDetails phone={this.state.phone} />
  }
});

We are saving phone details in PhoneDetailsWrapper state. getInitialState function returns the initial state required to render the component.

In componentDidMount function we are making the Ajax call using jQuery. rack-router passes url parameters to the component in this.props.params property, we are using this.props.params.phoneId to create the url for the Ajax call. On success we are setting the state with this.setState.

Finally, passing the state to PhoneDetails as phone property.

Step-10 Use props in PhoneDetails

Step-10 Live Demo

Code Diff

# To reset workspace
$ git checkout -f step-10

Time to make PhoneDetails dynamic! Let’s use the phone property.

src/scripts/components/PhoneDetails.js

var PhoneDetails = React.createClass({
  checkmark: function(truthy) {
    if (truthy) {
      return String.fromCharCode(10003);
    } else {
      return String.fromCharCode(10008);
    }
  },

  render: function() {
    var phone = this.props.phone;
    var dimensions = phone.sizeAndWeight.dimensions.map(function(dimension, i) {
      return <dd key={i}>{ dimension }</dd>;
    });

    return (
      <section id="main">
        <div className="phone-images">
          <img ref="phone_image" src={ this.props.phone.images[0]} className="phone" />
        </div>
        <h1>{phone.name}</h1>
        <p>{phone.description}</p>

        <ImageGallery />

        <ul className="specs">
          <li>
              <span>Availability and Networks</span>
              <dl>
                  <dt>Availability</dt>
                  <dd>{ phone.availability }</dd>
              </dl>
          </li>
          <!-- code deleted for brevity -->
          <li>
              <span>Connectivity</span>
              <dl>
                  <dt>Network Support</dt>
                  <dd>{ phone.connectivity.cell }</dd>
                  <dt>WiFi</dt>
                  <dd>{ phone.connectivity.wifi }</dd>
                  <dt>Bluetooth</dt>
                  <dd>{ phone.connectivity.bluetooth }</dd>
                  <dt>Infrared</dt>
                  <dd>{ this.checkmark(phone.connectivity.infrared) }</dd>
                  <dt>GPS</dt>
                  <dd>{ this.checkmark(phone.connectivity.gps) }</dd>
              </dl>
          </li>
          <!-- code deleted for brevity -->
          <li>
              <span>Size and Weight</span>
              <dl>
                  <dt>Dimensions</dt>
                    { dimensions }
                  <dt>Weight</dt>
                  <dd>{ phone.sizeAndWeight.weight }</dd>
              </dl>
          </li>
          <!-- code deleted for brevity -->
      </section>
    );
  }
});

There is nothing new here, except the checkmark function. JSX has issues displaying HTML entities. There are various workarounds, we are going ahead with using String.fromCharCode. The checkmark function simply returns ✓ if the parameter truthy is true otherwise ✘.

You should see phone details dynamically populated.

Step-11 Use props in ImageGallery

Step-11 Live Demo

Code Diff

# To reset workspace
$ git checkout -f step-11

Phone images are still not showing up in the gallery, let’s do something about it!

src/scripts/components/ImageGallery.js

var ImageGallery = React.createClass({
  render: function() {
    var images = this.props.images.map(function(image_path, i) {
      return <li key={i}><img src={image_path} /> </li>;
    });

    return (
      <ul className="phone-thumbs">
        {images}
      </ul>
    );
  }
});

module.exports = ImageGallery;

Nothing ground-breaking here, we are simply creating an array of images and rendering it.

Don’t forget to pass the images property to ImageGallery in PhoneDetails!

src/scripts/components/PhoneDetails.js

.
.
        <ImageGallery images={phone.images} />
.
.

Now you should see the dynamic thumbnails.

Step-12 Make thumbnail click work

Step-12 Live Demo

Code Diff

# To reset workspace
$ git checkout -f step-12

Now we have everything in place, except thumbnail click is not working. Time to decide what should go in the state… the only thing user can do is click the thumbnail to change main image of the phone. We will save active_image url in the state and change it on thumbnail click.

src/scripts/components/PhoneDetails.js

var PhoneDetails = React.createClass({

  getInitialState: function() {
    return {
      active_image: ''
    }
  },
  .
  .
  .

  handleThumbClick: function(image_path) {
    this.setState( {
        active_image: image_path
      }
    )
  },

  render: function() {
    var phone = this.props.phone;
    var dimensions = phone.sizeAndWeight.dimensions.map(function(dimension, i) {
      return <dd key={i}>{ dimension }</dd>;
    });

    return (
      <section id="main">
        .
        .
        <ImageGallery images={phone.images} handleThumbClick={this.handleThumbClick} />
        .
        .
      </section>
    );
  }
});

The handleThumbClick function sets active_image state, and we are passing it’s reference to the ImageGallery as a property. So it can tell when/which thumbnail is clicked.

src/scripts/components/ImageGallery.js

var ImageGallery = React.createClass({
  handleClick: function(e) {
    return this.props.handleThumbClick(e.target.src);
  },

  render: function() {
    var images = this.props.images.map(function(image_path, i) {
      return <li key={i}><img src={image_path} /> </li>;
    });

    return (
      <ul className="phone-thumbs" onClick={this.handleClick}>
        {images}
      </ul>
    );
  }
});

In ImageGallery we wrote an onClick handler handleClick. The handleClick function, invokes this.props.handleThumbClick function which points to PhoneDetails function handleThumbClick.

Now you should see the fully functional app in action!

That’s it! We are finally done!! Please let me know your feedback/suggestions/critics in comments or mail me at girish at cuberoot dot in

Creating Vagrant Box From Existing Instance

2014-08-06T12:34:02+00:00

Note to self

To create a new box from existing vagrant VirtualBox machine

$ vagrant package --base <virtualmachine name> --output ~/PATH/TO/precise32_ruby_187.box

look for <virtualmachine name> in ~/VirtualBox VMs/ or use following command

$ VBoxManage list vms

To add a box to vagrant

$ vagrant box add precise32_ruby_187 ~/PATH/TO/precise32_ruby_187.box

To use the newly created box…

$ vagrant init precise32_ruby_187

FontAwesome hidden facebook and other social icons

2014-07-30T08:01:53+00:00

Yesterday, I spent nearly an hour fixing the mysterious disappearance of facebook, twitter etc. FontAwesome icons.

It was working locally, but on production server the social icons were hidden.

Turns out, “Adblock Plus” hides any html elements with class names containing text facebook, twitter, linkedin or github.

I ended up modifying the font-awesome.css file and renaming the class names, since I was only using five icons.

.icon-lnkd:before             { content: "\f0e1"; }
.icon-gp:before               { content: "\f0d5"; }
.icon-tw:before               { content: "\f099"; padding-left: 2px; }
.icon-f1b:before              { content: "\f09a"; padding-left: 6px; }
.icon-gh:before               { content: "\f09b"; }

For more details see this FontAwesome issue

Rails ActiveSupport Inflections

2014-07-04T10:13:05+00:00

We know, In Rails the Inflector transforms words from singular to plural, class names to table names .

The default inflections for pluralization, singularization, and uncountable words are kept in inflections.rb .

In this post, we will go through one example explaining the inflections .

Consider, leaves_controller with Leave model . For this controller routes generated are as follows -

new_leafe   GET    /leaves/new(.:format)      leaves#new
edit_leafe  GET    /leaves/:id/edit(.:format) leaves#edit
leafe       GET    /leaves/:id(.:format)      leaves#show

> 'leaves'.singularize
=> "leafe"

here, the singularize format of ‘leaves’ is taken as ‘leafe’ .

Suppose, we want to change the singularize format to ‘leaf’, then -

Add rule in config/initializers/inflections.rb

ActiveSupport::Inflector.inflections do |inflect|
  inflect.irregular 'leaf', 'leaves'
end

Now, check routes for same -

new_leaf   GET    /leaves/new(.:format)        leaves#new
edit_leaf  GET    /leaves/:id/edit(.:format)   leaves#edit
leaf       GET    /leaves/:id(.:format)        leaves#show

> 'leaves'.singularize
=> "leaf"

It Works! In this way, by adding inflection rules, we can override naming conventions in rails .

Integrating Fonts In Rails Application

2014-05-07T06:56:30+00:00

In this blog post we are going to integrate Fonts in our Rails Application.

#####1. Add your font files under /assets/fonts folder.

#####2. Add following line in config/application.rb file within your Application class :

  config.assets.paths << Rails.root.join("app", "assets", "fonts")

#####3. Change Fonts path in css file.

Your Default CSS file contain the fonts path as follows :

  @font-face {
    font-family: 'FontAwesome';
    src:url("../font/fontawesome-webfont.eot?v=3.2.1");
    src:url("../font/fontawesome-webfont.eot?#iefix&v=3.2.1") format("embedded-opentype"),
        url("../font/fontawesome-webfont.woff?v=3.2.1") format("woff"),
        url("../font/fontawesome-webfont.ttf?v=3.2.1") format("truetype"),
        url("../font/fontawesome-webfont.svg#fontawesomeregular?v=3.2.1") format("svg");
    font-weight: normal;
    font-style: normal;
   }
  

We need to change this to :

  @font-face{
    font-family:'FontAwesome';
    src:url("/assets/fontawesome-webfont.eot?v=3.2.1");
    src:url("/assets/fontawesome-webfont.eot?#iefix&v=3.2.1")format("embedded-opentype"),
        url("/assets/fontawesome-webfont.woff?v=3.2.1") format("woff"),
        url("/assets/fontawesome-webfont.ttf?v=3.2.1") format("truetype"),
        url("/assets/fontawesome-webfont.svg#fontawesomeregular?v=3.2.1") format("svg");
    font-weight:normal;
    font-style:normal}
  }
  

#####4. Restart you server.

Thats it you are Done !

Model Relations on Rails Console

2014-03-28T13:04:00+00:00

We know that rails console is useful for testing ruby syntax and model queries. Also it is useful for changing server-side data without touching the website.

On Rails console, we can view Model Associations.

There is a simple method reflect_on_all_associations, by using which we get the model associations array on console.

irb(main):001:0> Patient.reflect_on_all_associations.each do |a|
irb(main):002:1* puts "#{a.macro} => #{a.name}"
irb(main):003:1> end

has_many => tsh_reports
has_many => hbs_ag_reports

=> [#<ActiveRecord::Reflection::AssociationReflection:0x007fd4b4209a78 @macro=:has_many, @name=:tsh_reports, @scope=nil, @options={}, @active_record=Patient(no database connection), @plural_name="tsh_reports", @collection=true>, #<ActiveRecord::Reflection::AssociationReflection:0x007fd4b4bfdd90 @macro=:has_many, @name=:hbs_ag_reports, @scope=nil, @options={}, @active_record=Patient(no database connection), @plural_name="hbs_ag_reports", @collection=true>]

That’s it! We have done.

JSHint

2014-02-04T12:29:00+00:00

JSHint is a tool to detect errors and potential problems in JavaScript code.

Install JSHint using a Node program.

$ npm install jshint

To install JSHint globally on your system, use -g flag as:

$ npm install jshint -g

If you have done, you should be able to use JSHint.

To detect errors in single file run following command:

$ jshint orders.js

orders.js: line 1, col 1, Expected an assignment or function call and instead saw an expression.

orders.js: line 1, col 2, Missing semicolon.

2 errors

Now, you should be able to fix these errors, and make your code clean.

References: http://www.jshint.com/docs/

Install pg gem on Mac OSX Mavericks with Postgres.app

2013-11-21T09:21:00+00:00

When I was trying to install pg gem on OSX Mavericks it failed with following error

gem install pg
.
.
.
checking for libpq-fe.h... no
Can't find the 'libpq-fe.h header

I am using Postgres.app on my mac. Turns out the installer cannot locate the include headers, and it’s a easy fix.

export CONFIGURE_ARGS="with-pg-include=/Applications/Postgres.app/Contents/MacOS/include"
gem install pg

The gem installs successfully. Hope this helps someone.

Shorten URL'S using bit.ly API in Rails

2013-10-22T10:53:00+00:00

In this blog we are going to create shorten URL’s in rails application using Bit.ly API in ruby step by step.

For this you required to have bitly login and api_keys.
Create your account on https://bitly.com . Get your login and api_key for your account.

Check settings -> Advanced -> show_legacy_key.
Steps for creating shorten urls in Ruby using bit.ly API

Ruby has a gem bitly for bit.ly API.

gem install bitly

Configurations

If you want to configure bitly through an initializer. Add code to config/initializers/bitly.rb

Bitly.configure do |config|
  config.api_version = 3
  config.login = "Bitly_Username"
  config.api_key = "API_KEY"
end

To get the client, use Bitly.client:

client = Bitly.client

You can then use that client to shorten or expand urls :

 url = client.shorten('http://cuberoot.in/')
  
 url.long_url
 #=> "http://cuberoot.in/"

 url.short_url
 #=> "http://bit.ly/1eTMCoC"

And it is done!

Ajax Pagination In Rails

2013-10-22T10:47:00+00:00

In this blog post we will see how to apply rails pagination on Ajax. Here, I am doing pagination using kaminari.

1.Add following gem in your Gemfile.

gem kaminari

2.bundle install

3.Open your controller file in which you want to apply pagination.

def index
  @products = Product.page(params[:page]).per(10)
		respond_to do |format|
		  format.js
		  format.html
	end
end

4.In view file index.html.haml.

%div#products
	  = render :partial => '/products/product', :locals => {:products => @products}

	#paginate	     
	  = paginate @products, :remote => true

5.Add following code in _product.html.haml file.

%table
  @products.each do |product|
  %tr
 	  %td= product.name

6.Create new file _index.js.haml and add following code in it.

$('#products').html('<%= escape_javascript render(:partial => '/products/product', :locals => {:products => @products}) %>');
$('#paginator').html('<%= escape_javascript(paginate(@products, :remote => true).to_s) %>');     

And it’s done! pagination works with ajax.

Guest blog post on rubylearning.com

2013-09-16T10:27:00+00:00

Satish Talim of RubyLearning recently invited me to write a guest blog post on my GoogCurrency gem and using it in a Sinatra app. Thank you Satish!

Part 1 deals with a developing a small Google Currency API library test driven way.

In Part 2 we use the lib in a small Sinatra app.

Custom product search scope in spree

2013-09-04T10:36:00+00:00

I am using Spree 1.3.3 and I want to modify the product search scope in spree.

####To modify the product serach scope for Store.

Override the lib/spree/core/search/base.rb file. In this file override the protected method get_base_scope. Apply whatever condition you want to apply on base_scope in this method.

Suppose I want to display only approved products on my store side so the condition will be :

def get_base_scope
  base_scope = Spree::Product.active
  base_scope = base_scope.where({:status => "approved"})
  base_scope = add_search_scopes(base_scope)
  base_scope
end

####To modify the product search scope for Admin.

Override the app/controllers/spree/admin/products_controller.rb file. In this file override the method collection. In this method apply what ever condition you want to add on @search.result

Suppose I want to display only unaproved products at my admin side then my collection method will be :

def collection
    return @collection if @collection.present?
    params[:q] ||= {}
    params[:q][:deleted_at_null] ||= "1"

    params[:q][:s] ||= "name asc"

    @search = super.ransack(params[:q])
    @collection = @search.result.
      where({:status => "unapproved"}).
      group_by_products_id.
      includes(product_includes).
      page(params[:page]).
      per(Spree::Config[:admin_products_per_page])

    if params[:q][:s].include?("master_default_price_amount")
      # PostgreSQL compatibility
      @collection = @collection.group("spree_prices.amount")
    end
    @collection
end

And finally just restart your server and you are done.

Change currency symbol in spree

2013-09-03T15:53:00+00:00

I am using spree 1.3.3 in my rails application with INR currency and want to convert its symbol to ‘₹’

In spree, money gem is used for money and currency conversion which takes old symbol ‘Rs’ for INR currency.

As in spree there is no default configuration to set currency_symbol, we have to provide :symbol option which will be set by money gem.

To do this , I have override initialize method of spree’s money class .

First you have to check that your application is able to load ../lib/**/*_decorator.rb . If not, please configured your rails app to load it.

In config/application.rb add -

# Load Lib decorators

Dir.glob(File.join(File.dirname(__FILE__), "../lib/**/*_decorator*.rb")) do |c|
  Rails.configuration.cache_classes ? require(c) : load(c)
end

In /lib/spree/money_decorator.rb

   def initialize(amount, options={})
   	 @money = ::Money.parse([amount, (options[:currency] || Spree::Config[:currency])].join)
    	@options = {}
    	@options[:with_currency] = Spree::Config[:display_currency]
    	@options[:symbol_position] = Spree::Config[:currency_symbol_position].to_sym
    	@options[:no_cents] = Spree::Config[:hide_cents]
    	@options[:decimal_mark] = Spree::Config[:currency_decimal_mark]
    	@options[:thousands_separator] = Spree::Config[:currency_thousands_separator]
    	
	    # add currency_symbol
    	@options[:symbol] = '&#8377;'
    
	    @options.merge!(options)
    	# Must be a symbol because the Money gem doesn't do the conversion
    	@options[:symbol_position] = @options[:symbol_position].to_sym
  end

Now it works, the money gem takes care of :symbol and use it to convert to currency with our custom_symbol ‘₹’

Installing zmq gem on Mountain Lion Mac OS X

2013-05-20T15:55:00+00:00

I decided to play with ZeroMQ on my Mac. Had to spend about an hour installing the zmq gem, hope this post saves you the trouble.

Install `ZeroMQ`

First I tried to install ZeroMQ using brew.

$ brew install zeromq

It installed ZeroMQ version 3.2.2. Gem install zmq failed with following error…

$ ARCHFLAGS="-arch x86_64" gem install zmq -- --with-zmq-dir=/usr/local
Building native extensions.  This could take a while...
ERROR:  Error installing zmq:
	ERROR: Failed to build gem native extension.

        /Users/girish/.rvm/rubies/ruby-1.9.3-p327/bin/ruby extconf.rb --with-zmq-dir=/usr/local
checking for zmq.h... yes
checking for zmq_init() in -lzmq... yes
Cool, I found your zmq install...
creating Makefile

make
compiling rbzmq.c
rbzmq.c:968:7: error: use of undeclared identifier 'ZMQ_RECOVERY_IVL_MSEC'
        case ZMQ_RECOVERY_IVL_MSEC:
             ^
rbzmq.c:990:10: error: use of undeclared identifier 'ZMQ_HWM'
    case ZMQ_HWM:
         ^
rbzmq.c:991:10: error: use of undeclared identifier 'ZMQ_SWAP'
    case ZMQ_SWAP:
         ^
...

After googling for some time, it turned out that the zmq gem is not updated for the latest stable version 3.2.2 of ZeroMQ, it works (basically installs) with version 2.2.0.

Install `ZeroMQ` 2.2.0 from sources

$ wget http://download.zeromq.org/zeromq-2.2.0.tar.gz
$ tar xfz zeromq-2.2.0.tar.gz
$ cd zeromq-2.2.0
$ ./configure
$ make
$ sudo make install

Install `zmq` gem

Finally install the zmq gem

$ ARCHFLAGS="-arch x86_64" gem install zmq  -- --with-zmq-dir=/usr/local --with-zmq-lib=/usr/local/lib and --with-zmq-include=/usr/local/include
Building native extensions.  This could take a while...
Successfully installed zmq-2.1.4
1 gem installed

And bravo it worked!

Multilingual Rails Application

2013-05-09T15:47:00+00:00

In rails application, I want to make it multilingual. We need to define YAML language files for all required languages and tell the Rails application which language it should currently use.

Rails I18n.locale saves the current language and can be read by the application.

Steps for language translation

Lets we use German and English language here for translation .

1. Add language.yml in config/locales

In /config/locales/en.yml

  en:
    hello: "Hello World"

In /config/locales/de.yml

  hi:
    hello: "hallo Welt"

2. Configuration changes

In rails application the default locale is :en for English. Add in config/application.rb

  config.i18n.load_path += Dir[Rails.root.join('config', 'locales', '**', '*.{rb,yml}')]

3. Setting and Passing the Locale

Setting a selected locale as current language is easy. You can set the locale in the ApplicationController using before_filter

  before_filter :set_locale

  def set_locale
    I18n.locale = params[:locale] if params[:locale].present?
  end

4. Adding Translations

Then we insert the links for the navigation in the app/views/layouts/application.html.erb:

  <p>
    <%= link_to_unless I18n.locale == :en, "English", locale: :en %>
    |
    <%= link_to_unless I18n.locale == :de, "Deutsch", locale: :de %>
  </p>

The I18n API’s translate method is used to translate the text into current language.

So, change the view to display translated text. Use I18n API’s #t helper to translated string as

e.g in posts#index

<h1><%=t :hello %></h1>

Now, when you run posts#index the heading will display translated string for hello as per language. You can test translation by switching languages.

5. Organization of Locale Files

Putting translations for all parts of an application in one file per locale could be hard to manage.so we can store these files in a hierarchy as follows.

|-defaults
|---de.rb
|---en.rb
|-models
|---post
|-----de.rb
|-----en.rb
|-views
|---defaults
|-----de.rb
|-----en.rb
|---posts
|-----de.rb
|-----en.rb

Resolved: create_yetting_class: undefined method 'each' for nil:NilClass

2013-03-12T16:59:00+00:00

In this blog we are going through some issues which I faced while upgrading gem twitter and their fixes while deploying rails app on production.

Running a ruby script tweetstream.rb using Yettings in Rails production environment .

while running a tweetstream.rb using Yettings in production with command :

While running script with Yettings, an error occurs for config/enviornment .

  tweetstream.rb:11:in `require': cannot load such file -- /Users/prachi/work/cuberoot/rubybeats/aggregator/config/environment.rb (LoadError)
  from tweetstream.rb:11:in `<main>'

To fix this error, added following code with using File.join in tweetstream.rb file .

  root = File.expand_path(File.dirname(__FILE__))

  # added following code to require following files with correct path
  require File.join(root + '/..', "config", "environment")

Running daemon on rails production env by using gem daemons-rails .

The file config/daemons.yml is added by installing gem daemons-rails .

When I started a daemon by running :

$ bundle exec ruby lib/daemons/tweetstream_ctl start

Got an error like :

...
releases/log/tweetstream.rb.pid file not found.
...

So, to load the correct log file set dir option in config/daemons.yml to correct log path.

  dir_mode: script
  # set a correct log directory path here
  dir: ../../../current/log
  multiple: false
  backtrace: true
  monitor: true
  ontop: false

Fixing corrupt vagrant

2013-03-12T12:19:00+00:00

Recently my vagrant machine crashed. This is how I used ‘fsck’ to recover it.

Power off the vagrant machine using vagrant halt
Before booting it again enable ‘gui’ mode with un-commenting the below line from “Vagrantfile” config.vm.boot_mode = :gui
Now run vagrant up; it would open an gui-interface with an shell terminal open for vagrant-machine
Login to shell (started up during the previous step) with ‘username/password’ as ‘vagrant/vagrant’
Once logged-in, go to root-dir cd /
Create a file named ‘forcefsck’ at root-dir sudo touch /forcefsck
Reboot the system

Now the vagrant should be up and running without any problem.

Retweet and Reply tweets in rails

2013-03-01T11:29:00+00:00

I had to add feature for reply and retweet in www.rubybeats.com site.

Here is how I got it done using the twitter gem .

How to Use :

Add gem twitter in your Gemfile .

Run bundle install .

Configure Twitter for a twitter authenticated user :

  Twitter.configure do |config|
    config.consumer_key = auth_user_CONSUMER_KEY
    config.consumer_secret = auth_user_CONSUMER_SECRET
    config.oauth_token = auth_user_OAUTH_TOKEN
    config.oauth_token_secret = auth_user_OAUTH_TOKEN_SECRET
  end

Retweets the specified Tweets as the authenticating user :

  Twitter.retweet(tweet_id)

  # Here, tweet_id is an ID of an existing status to which we are retweeting.

  # It will retweets the tweet having id tweet_id as authentication user.

  # It will returns the original tweet with retweet details.

Reply the specified Tweet :

  reply_text = "here is a replying message"

  Twitter.update( reply_text, "in_reply_to_status_id" => reply_status_id)

  # Use "in_reply_to_status_id" to reply  the existing status that the update is in reply to.

  # Here, the reply_text is  the reply message and, the reply_status_id is an ID of an existing status to which we are replying.

  # It will returns the replied new  Tweet.

####References :

https://dev.twitter.com/docs/api/1.1/post/statuses/update

https://dev.twitter.com/docs/api/1.1/post/statuses/retweet/:id

http://rdoc.info/gems/twitter

Tutorial 3 - Clojure Web Application Using Noir

2013-03-01T11:25:00+00:00

In this tutorial we are going to cover how to manage a Session in Noir.

We need to provide the facility to users to login with their accounts.

So we have to first create pages for login and signup in our src/finance_manager/views/welcome.clj file. Also we have to create a table for users in our finance_manager_db database to store users record.

First create table for users in src/finance-manager/models/db.clj

(defn create-user-table []
  (sql/with-connection
      db
      (sql/create-table
        :users
        [:id "SERIAL"]
        [:username "varchar(100)"]
        [:password "varchar(100)"]
       )
    )
)

Also write function to insert users record in users table. And a function to fetch user record from users table.

(defn add-user [user]
  (sql/with-connection
    db
    (sql/insert-record :users user)
  )
)

(defn get-user [username]
  (first
  (db-read "select * from users where username=?" username))
)

Open src/finance_manager/views/welcome.clj file and create pages for login and signup.

(:require [noir.util.crypt :as crypt])

 ;;Login Page

(defpage "/" {:keys [error]}
  (common/layout
   [:div.error error]
   [:h2 "Login Page"]
   (form-to [:post "/login"]
     (label "username" "Username")
     (text-field "username")
      [:br]
     (label "password" "Password")
     (password-field "password")
     [:br]
     (submit-button {:class "btn"} "Login")
     (reset-button {:class "btn"} "Cancel")
   )
  )
)

;; Login Page Handler

(defpage [:post "/login"] user
  (let [getuser (db/get-user (:username user))]
          (if (and getuser (crypt/compare (:password user) (:password getuser)))
              (render "/homepage" (session/get :user))
              (render "/" (assoc user :error "Login Failed"))
          )
  )
)


;;Signup Page

(defpage "/signup" {:keys [error]}
  (common/layout
    [:h3 "Signup Form"]
    [:div.error error]
    (form-to [:post "/signup"]
      (label "username" "Username")
      (text-field "username")
      [:br]
      (label "password" "Password")
      (password-field "password")
      [:br]
      (submit-button "Signup")
      (reset-button "Cancel")
    )
  )
)

;; Signup Page Handler

(defpage [:post "/signup"] user
    (try
      (db/add-user (update-in user[:password] crypt/encrypt))
      (render "/homepage")
      (catch Exception ex
        (render "/signup" (assoc user :error (.getMessage ex)))
      )
    )
)

crypt/encrypt is used to encrypt the given password.

crypt/compare is used to compare the raw string with already encrypted string.

For managing the session open src/finance_manager/views/welcome.clj file.

(:require [noir.session :as session])

Then modify our [:post "/login"] and [:post "/signup"] pages.

(defpage [:post "/login"] user
     (let [getuser (db/get-user (:username user))]
              (if (and getuser (crypt/compare (:password user) (:password getuser)))
                (do
                   (session/put! :user (:username user))
                   (render "/homepage" (session/get :user))
                )
                 (render "/" (assoc user :error "Login Failed"))
              )
       )
)

(defpage [:post "/signup"] user
    (try
      (db/add-user (update-in user[:password] crypt/encrypt))
      (session/put! :user (:username user))
      (render "/homepage" (session/get! :user))
      (catch Exception ex
        (render "/signup" (assoc user :error (.getMessage ex)))
      )
    )
)

session/put! Associates the key with the given value in the session.

session/get Get the key’s value from the session, returns nil if it doesn’t exist.

Now create a page for logout to clear the session in src/finance_manager/views/welcome.clj file.

 (defpage "/logout" []
  (session/clear!)
  (resp/redirect "/")) 

session/clear! Remove all data from the session.

Tutorial 2 - Clojure Web Application Using Noir

2013-03-01T10:53:00+00:00

In this tutorial we are going to cover how to apply form validations in Noir.

Open src/finance_manager/views/welcome.clj file write following code in it.

(:require [noir.validation :as vali])

(defn valid-budget? [{:keys [budget_date budget_amt]}]
  (vali/rule (vali/has-value? budget_date)
             [:budget_date "Budget Date Is Required."])
  (vali/rule (vali/has-value? budget_amt)
             [:budget_amt "Budget Amount Is Required."]) 
  (not (vali/errors? :budget_date :budget_amt)))

The above function will check that all the fields confirm to the rules, such as budget_date and budget_amt are provided.

The rule have following form:

  (rule passed? [field error])

If the passed? condition is not met, add the error text to the given field.

We will need a helper for displaying the error on the page:

(defpartial error-item [[first-error]]
  [:p.error first-error]
)

Modify the /addbudget page as:

(defpage "/addbudget" {:keys [error]}
   (common/layout
     [:h2 "Add Monthly Budget"]
     [:div.error error]
     (form-to [:post "/addbudget"]
        (vali/on-error :budget_date error-item)

        (label "budget_date" "Select Budget Date")
        (text-field "budget_date")
        [:br]
        (vali/on-error :budget_amt error-item)

        (label "budget_amt" "Budget Amount")
        (text-field "budget_amt")
        [:br]
        (submit-button "Add Budget")
        (reset-button "Cancel")
     )
   )
)

Modify the [:post "/addbudget"] page as:

(defpage [:post "/addbudget"] budget
  (if (valid-budget? budget)
     (let
         (try
           (db/add-budget budget)
                 (resp/redirect "/homepage")
                 (catch Exception ex
                   (render "/addbudget" (assoc budget :error (.getMessage ex)))
                 )
         )
      )
       (render "/addbudget")
  )
)

If the budget is valid then it will add the record in the database. And if the budget is not valid then it will render to "/addbudget" page and displays respected errors on that page.

Tutorial 1 - Clojure Web Application Using Noir

2013-02-27T15:24:00+00:00

I am going to do a series of blog posts on using Noir framework to create a simple website. Here is part 1 of the tutorial.

We are going to cover following points in this tutorial :

Tutorial 1 for :-
1. Create simple website using Noir.
2. Create Pages.
3. Create Pages for User Interface.
4. Database Connection.

Now we will create a simple finance manager blog.

The easiest way to get Noir setup is to use Leiningen. Then execute Following Command In Terminal

$ lein new noir finance_manager
Generating a lovely new Noir project named testing...

The above command create a finance_manager website in a specified directory.

Created website has following structure :-

       /finance_manager
          --resources/
           --public/
               --css/reset.css
               --img/
               --js/
           --src/
             --finance-manager/
             --models/
             --views/ common.clj
                     welcome.clj
             server.clj
           --test/
             --finance_manager/
          project.clj
          README.md

The project.clj file is used for building the application and managing dependencies by Leiningen.

Under the src folder, we have the folder finance_manager which contains server.clj. This file contains the entry point to our application. It loads up all the views and provides a main function which can be used to start the application.

The models folder is used to keep the data such as code for the database access and table management. The views folder contains the namespaces describing the pages of our application and their supporting code. The template contains common.clj which provides a basic layout and any code shared between the pages. The welcome.clj is the namespace where an example page is defined and you can create your own pages under this namespace.

The resource/public folder contains the stylesheets and javasript.

Execute the following command :-

       $ lein run   
       Starting server...
       2012-08-16 09:39:22.479:INFO::Logging to STDERR via org.mortbay.log.StdErrLog
       Server started on port [8080].
       You can view the site at http://localhost:8080
       #<Server Server@2206270b>
       2012-08-16 09:39:22.480:INFO::jetty-6.1.25
       2012-08-16 09:39:22.521:INFO::Started SocketConnector@0.0.0.0:8080

lein run run the -main function in our finance_manager namespace.

Open the browser and run :-

      localhost:8080

For creating pages :-

Open src/views/welcome.clj file. And create a homepage of the website.

For creating pages defpage macro is used which create a Compojure route for the specified url. defpage has following syntax.

  (defpage url params content)

  (defpage "/homepage" []
  [:h3 "Finance Manager"])

Open the browser and run the following

  localhost:8080/homepage

Design a form which will provide the User Interface to add the Monthly Budget.

  (defpage "/addbudget" {:keys [error]}
   (common/layout
     [:h2 "Add Monthly Budget"]
     [:div.error error]
     (form-to [:post "/addbudget"]
        (label "budget_date" "Select Budget Date")
        (text-field "budget_date")
        [:br]
        (label "budget_amt" "Budget Amount")
        (text-field "budget_amt")
        [:br]
        (submit-button "Add Budget")
        (reset-button "Cancel")
     )
   )
)

Design the another page for POST which contain the server code to handle the input coming from addbudget page.

 (defpage [:post "/addbudget"] budget
   (common/layout
     [:div (:budget_date budget)]
     [:div (:budget_amt budget)]
   )
 )

The above page simply display the values enter by the user on the page.

Open the browser and run

  localhost:8080/addbudget

This will display the page containing UI to add budget values.

To save the values in the database we have to create the databse and setup the connection with the database.

Follow the following steps for Database Access.

There are several Clojure libraries availale for dealing with databse. In this tutorial we are using clojure.data.jdbc and MySql databse.

We will create a new namespace under the src/finance_manager/models. We call this namespace db. The namespace will live in a file called db.clj under src/finance_manager/models directory.

(ns finance_manager.models.db)

(require '[clojure.java.jdbc :as sql])

Now we will define our database connection in this file.

(def db
  {:subprotocol "mysql"
   :subname "//localhost:3306/finance_manager_db"
   :user "username"
   :password "private"})

Now add dependencies in project.clj file for database connection.

[org.clojure/java.jdbc "0.2.3"]
[mysql/mysql-connector-java "5.1.6"]

Create a table for budget in finance_manager_db

(defn create-budget-table []
  (sql/with-connection
      db
      (sql/create-table
        :budget
        [:id :serial "PRIMARY KEY"]
        [:budget_date "date"]
        [:budget_amt "double"]
      )
    )
)

Now open src/finance_manager/server.clj file.

Write a function that call this create-budget-table function. and call that function in -main function.

(:require [finance_manager.models.db :as db])
(defn init
  []
  (db/create-budget-table)
)

(defn -main []
  (init))

Now start REPL session and execute following command in it.

$ lein repl
nREPL server started on port 53376
REPL-y 0.1.9
Clojure 1.4.0
    Exit: Control+D or (exit) or (quit)
Commands: (user/help)
    Docs: (doc function-name-here)
          (find-doc "part-of-name-here")
  Source: (source function-name-here)
          (user/sourcery function-name-here)
 Javadoc: (javadoc java-object-or-class-here)
Examples from clojuredocs.org: [clojuredocs or cdoc]
          (user/clojuredocs name-here)
          (user/clojuredocs "ns-here" "name-here")
finance_manager.server=>

finance_manager.server=> (finance_manager.server/-main)

(finance_manager.server/-main) it will execute the -main function and create a budget table in database.

Now open src/finance_manager/models/db.clj file and write the function to add the budget record in the budget table.

(defn add-budget [budget]
  (sql/with-connection
    db
    (sql/insert-record :budget budget)
  )
)

Now modify our [:post "/addbudget"] page to insert budget record.

(defpage [:post "/addbudget"] budget
 (let
     (try
       (db/add-budget budget)
             (resp/redirect "/homepage")
             (catch Exception ex
               (render "/addbudget" (assoc budget :error (.getMessage ex)))
             )
     )
  )
)

Now create a page that will display list of all added budgets.

So first write a function in src/finance_manager/models/db.clj file to get all records from database.

  (defn db-read [query & args]
  (sql/with-connection
    db
    (sql/with-query-results
      res
      (vec (cons query args)) (doall res))))

(defpage "/viewbudget" []
 (common/layout
    (let [budget (db/db-read "select * from budget")]
    (html
      [:h3 "Budget List Page"]
      [:table{:border="1"}
       [:tr
        [:th "Budget ID"]
        [:th "Budget Date"]
        [:th "Budget Amount"]
       ]
       (for [bgt budget]
        [:tr
          [:td (:id bgt)]
          [:td (:budget_date bgt)]
          [:td (:budget_amt bgt)]
         ]
       )]
     )
   )
  )
)

Now add links on homepage to add the budget and to view the budget.

 (:use  hiccup.element)

 (defpage "/homepage" []
  (common/layout
    [:h3 "Finance Manager"]
    (html
      (link-to "/adbudget" "Add Budget")
      [:br]
      (link-to "/viewbudget" "View Budget")
    ) 
  )
)

You can also check for following :

Tutorial 2 for : Form Validation.
Tutorial 3 for : Session Management.

Rails Memcacheing using Dalli

2013-02-27T15:23:00+00:00

Dalli is a High performance memcached client for Ruby. ####Before using dalli -

Dalli requires memcached 1.4+. Check the version using :

  $ memcached -h

memcached -h shows memcached version and help .

If version is not 1.4+ then install memcached 1.4.x with on mac.

  $ brew install memcached

You can check memcached is running on your machine or not by command -

  $ ps -ax | grep memcached
    1455 ??         0:00.90 /usr/local/bin/memcached -d -p 11211
    7629 ttys009    0:00.00 grep memcached

If memcached not running then start it on port 11211.

  $ /usr/local/bin/memcached -d -p 11211

To Verify installations run :

  $ gem install dalli

Then test it with a sample of code on rails console :

         require 'dalli'
          dc = Dalli::Client.new('localhost:11211')
          dc.set('abc', 123)
          => true
          dc.get('abc')
          => 123

####Using ‘Dalli’ in your rails 3.X application - Add gem dalli in your Gemfile.

Run bundle install

In config/environments/development.rb :

  # Global enable/disable all memcached usage
  config.perform_caching = true

  config.cache_store = :dalli_store, '127.0.0.1'

set server to localhost use 127.0.0.1 .

For ENV=production in config/environments/production.rb:

  config.cache_store = :dalli_store, your_server

To expire cache in day :

  config.cache_store = :dalli_store, '127.0.0.1', :expires_in => 1.day

Now, you can cache data by using Rails Cache .

Vagrant Help Guide

2013-02-19T17:25:00+00:00

This blog post is about setting up a vagrant box. Vagrants are useful to preserve the app-configurations and easy to maintain. Once the vagrant is setup one can create a package out of it; which can be used as an independent system with the app-configurations. Once a package is ready we can use it directly, we don’t have to remember the gemset OR rvm etc. While sharing the APP we can simply share the package file and all others can start using it directly.

Pre-requisites:

Install VirtualBox
Install ‘vagrant’ gem

1. Steps to setup a vagrant box

Download one of the vagrant box from the list available at lucid32.box
Use that box to setup vagrant for your application $ vagrant box add blog ~/Downloads/lucid32.box
Initialize the vagrant box added $ vagrant init blog This will create a Vagrantfile in your project-directory
Verify the Vagrantfile It should have a line with configuration ` config.vm.box = “blog” `
Start vagrant $ vagrant up
Connect to vagrant Once the vagrant is up successfully, try connecting it using ssh command $ vagrant ssh This will connect us to the vagrant shell prompt
Usual steps to setup all configuration required for our Application From this step on, follow the steps to setup a ubuntu machine for “ruby, rails, mysql” etc. environment
Create vagrant-package.box

  $ vagrant halt (stop the vagrant, before packaging it)
  $ vagrant package

It creates default package.box file in the current directory

2. How to use package.box created out of Vagrant

1) Go to your project directory and run

$ vagrant box add my_box /path/to/the/package.box
$ vagrant init my_box

2) Edit the “Vagrantfile” created at project directory, with below line From : #config.vm.forward_port 80, 8080 To: config.vm.forward_port 3000, 3000 3) Running it

$ vagrant up
$ vagrant ssh
$ cd /vagrant

4) Ready to use From this step on start using it as usual terminal to start your rails server i.e. rails server OR ./script/server

References:

RailsCasts Episode-292

Hello World!

2013-02-15T11:28:00+00:00

Thank you for visiting. We are a group of passionate RoR developers based in Pune, India. Please visit our web site to know more about us.

Coding Tidbits

Rails Turbolinks

What is turbolinks ?

Issues with javascript functionality

Solutions to fix javascript functionality issues with turbolinks.

References:

Using Que gem with Phusion Passenger

Angular PhoneCat Tutorial in React JS

PhoneCat Tutorial

About React JS

React JS Primer

Components Not Templates

JSX

Step-0 Bootstrapping

Step-1 Mockups

PhoneCat components

Step-2 PhoneCatWrapper component

Step-3 Extract all static components

Setp-4 Add dynamism

Step-5 Filter and Sort

Step-6 Ajax

Step-7 Phone page

Step-8 PhoneDetails and ImageGallery components

Step-9 Get phone details on Ajax

Step-10 Use props in PhoneDetails

Step-11 Use props in ImageGallery

Step-12 Make thumbnail click work

Creating Vagrant Box From Existing Instance

Note to self

FontAwesome hidden facebook and other social icons

Rails ActiveSupport Inflections

Integrating Fonts In Rails Application

Model Relations on Rails Console

JSHint

Install pg gem on Mac OSX Mavericks with Postgres.app

Shorten URL'S using bit.ly API in Rails

Ajax Pagination In Rails

Guest blog post on rubylearning.com

Custom product search scope in spree

Change currency symbol in spree

Installing zmq gem on Mountain Lion Mac OS X

Install ZeroMQ

Install ZeroMQ 2.2.0 from sources

Install zmq gem

Multilingual Rails Application

Steps for language translation

1. Add language.yml in config/locales

2. Configuration changes

3. Setting and Passing the Locale

4. Adding Translations

5. Organization of Locale Files

Resolved: create_yetting_class: undefined method 'each' for nil:NilClass

Fixing corrupt vagrant

Retweet and Reply tweets in rails

How to Use :

Tutorial 3 - Clojure Web Application Using Noir

Tutorial 2 - Clojure Web Application Using Noir

Tutorial 1 - Clojure Web Application Using Noir

We are going to cover following points in this tutorial :

You can also check for following :

Rails Memcacheing using Dalli

Vagrant Help Guide

Pre-requisites:

1. Steps to setup a vagrant box

2. How to use package.box created out of Vagrant

References:

Hello World!

Install `ZeroMQ`

Install `ZeroMQ` 2.2.0 from sources

Install `zmq` gem