tag:blogger.com,1999:blog-32603905215412066562024-03-14T16:39:27.761+06:00Ashrafuzzaman on TechnologyJituhttp://www.blogger.com/profile/06929926697706128152noreply@blogger.comBlogger51125tag:blogger.com,1999:blog-3260390521541206656.post-7760594282456003122014-05-25T13:55:00.001+06:002014-05-25T13:55:09.982+06:00Share language files from a rails pluginIf you want to share you language file from with the plugin. Then you need to add the local files in the auto load path in the engine file like following,<br />
<br />
<script src="https://gist.github.com/ashrafuzzaman/81d74b7c677ccfe0c7b9.js"></script>Jituhttp://www.blogger.com/profile/06929926697706128152noreply@blogger.com0tag:blogger.com,1999:blog-3260390521541206656.post-42566665595524668712014-03-11T17:08:00.000+06:002014-03-11T17:08:07.338+06:00Faster capistrano deploy with skipping bundler and asset precompilationIf you guys use git then you can use the following script in you deploy.rb to override the default behavior if asset pre compilation and bundle install.
<script src="https://gist.github.com/ashrafuzzaman/9483719.js"></script>Jituhttp://www.blogger.com/profile/06929926697706128152noreply@blogger.com1tag:blogger.com,1999:blog-3260390521541206656.post-3473137192837627742014-02-09T15:05:00.001+06:002014-02-09T15:05:49.207+06:00Twitter bootstrap 3 typeahead SCSS<script src="https://gist.github.com/ashrafuzzaman/8896395.js"></script>Jituhttp://www.blogger.com/profile/06929926697706128152noreply@blogger.com0tag:blogger.com,1999:blog-3260390521541206656.post-50275798362047246882013-06-18T14:54:00.001+06:002013-06-18T14:57:36.686+06:00Allow mongo to connect from remote IPAccess to mongo is controlled with iptables for Linux based OS.<br />
<h2>
Step 1</h2>
<div>
Make sure in your <b>/etc/mongodb.conf</b> file you have the following line,</div>
<pre class="brush: bash">bind_ip = 0.0.0.0</pre>
<h2>
Step 2</h2>
<div>
Add iptables rules to control the incoming and outgoing traffic for mongo. Here is a sample command if you have the default ports for mongo.</div>
<div>
<br /></div>
<pre class="brush: bash">$ sudo iptables -A INPUT -s 198.61.168.XXX,166.78.113.XX -p tcp
--destination-port 27017 -m state --state NEW,ESTABLISHED -j ACCEPT
$ sudo iptables -A OUTPUT -d 198.61.168.XXX,166.78.113.XX -p tcp --source-port 27017 -m state --state ESTABLISHED -j ACCEPT</pre>
<div>
<br /></div>
<div>
Here 198.61.168.XXX and 166.78.113.XX are the IP from where you want to access the mongodb.</div>Jituhttp://www.blogger.com/profile/06929926697706128152noreply@blogger.com3tag:blogger.com,1999:blog-3260390521541206656.post-37659956665533557562013-05-12T14:07:00.001+06:002013-05-12T14:07:24.702+06:00Readable model name with translation supportUse following to have the translated attribute with fallback support,<br />
<script src="https://gist.github.com/ashrafuzzaman/5562804.js"></script>
This will look in to the translation in the following order,
<br />
<script src="https://gist.github.com/ashrafuzzaman/5562811.js"></script>
First it will look for the "en.activerecord.models.person.first_name" and then for "en.attributes.first_name" and finally falls back to humanize.Jituhttp://www.blogger.com/profile/06929926697706128152noreply@blogger.com1tag:blogger.com,1999:blog-3260390521541206656.post-3134494892211176402013-05-05T18:15:00.000+06:002013-05-05T18:15:45.395+06:00Encapsulate views in railsWe always hear that we have to keep our code clean and DRY. But I feel that poor view files are always left out from this concern. We do not write html to support the change of DOM. Yes, true for rails we have layouts and partials. But these features some times is not enough for encapsulating views.<br />
Let's say we are using jQuery UI in our application and we want to switch to twitter bootstrap :-S. Now that will be a pain, right? Because you have all sorts of views and DOM structures designed for jQuery UI. So for projects that we plan to maintain for a long time, we should consider to encapsulate almost every thing. Such as we can use unobtrusive Javascript to have the flexibility to switch between JS libraries. But in this post I plan to discuss the view layer and a particular mehod to encapsulate DOM and view logic.<br />
People are already doing it. Rails form builders, simple form, active admin DSL can be some of the examples. Obviously we can use partials to reduce the duplication but here I am talking about dom structure.<br />
So here is the pattern that is used by simple form or form builders, you might call it the builder pattern. Here is a simple example which will clear the cloud I think.<br />
<br />
I would prefer to encapsulate the view with a DSL as following,
<br />
<script src="https://gist.github.com/ashrafuzzaman/5520084.js"></script>
Here is the helper code to support the DSL.
<br />
<script src="https://gist.github.com/ashrafuzzaman/5520085.js"></script>
And the target resulting dom is as follows.
<br />
<script src="https://gist.github.com/ashrafuzzaman/5520590.js"></script>
<br />
The DSL is fairly simple actually. The two things you need to know before hand is how capture method works for rails template and that you have to pass the self as template so that later you can call the capture method using the template object. Any method that you can run from the view, you can run on template object.<br />
As you can see for widget we I have used an object to as we need related sub blocks(title, content). You can also use the simpler version which is shown in header block. Usually form builders need the object reference as they have states. But for us widgets donot have states. Still it is a good way to go, because later you might have different type of widget and then, you might pass that as argument. In that case your widget will have state and the w object will help you to maintain that state. I hope that helps :)<br />
<h2>
References</h2>
<div>
<ul>
<li><a href="http://apidock.com/rails/ActionView/Helpers/CaptureHelper/capture">apidock.com/rails/ActionView/Helpers/CaptureHelper/capture</a></li>
</ul>
</div>
Jituhttp://www.blogger.com/profile/06929926697706128152noreply@blogger.com3tag:blogger.com,1999:blog-3260390521541206656.post-3886912892236784582013-03-16T13:26:00.001+06:002013-03-16T13:30:40.944+06:00AngularJs compiling dynamically added domScenario<br />
We have an application where we use angular for a particular tab. So we needed to compile the ajax document.<br />
<br />
<script src="https://gist.github.com/ashrafuzzaman/5175386.js"></script>
Jituhttp://www.blogger.com/profile/06929926697706128152noreply@blogger.com1tag:blogger.com,1999:blog-3260390521541206656.post-67078821694148293842013-02-13T18:29:00.001+06:002013-02-13T18:30:22.855+06:00Error Deploying Angular JSWhen Deploying Angular JS to rails production server, we were getting the following error,<br />
<blockquote class="tr_bq">
<span style="background-color: white; box-sizing: border-box; color: red; font-family: 'dejavu sans mono', monospace; font-size: 11px; line-height: 12px; white-space: pre-wrap;">Error: Unknown provider: eProvider <- e</span><span style="background-color: white; box-sizing: border-box; color: red; font-family: 'dejavu sans mono', monospace; font-size: 11px; line-height: 12px; white-space: pre-wrap;"> at Error (<anonymous>)</span><span style="background-color: white; color: red; font-family: 'dejavu sans mono', monospace; font-size: 11px; line-height: 12px; white-space: pre-wrap;"> .... </span></blockquote>
Well if you are getting mad to find error in your Angular you can not. Just inject the dependencies as follows,<br />
<blockquote class="tr_bq">
MyController.$inject = ['$scope']; </blockquote>
And that is it.<br />
<h3>
Reference</h3>
<a href="http://stackoverflow.com/questions/13459452/rails-3-angularjs-minification-does-not-work-in-production-unknown-provider">http://stackoverflow.com/questions/13459452/rails-3-angularjs-minification-does-not-work-in-production-unknown-provider</a>Jituhttp://www.blogger.com/profile/06929926697706128152noreply@blogger.com1tag:blogger.com,1999:blog-3260390521541206656.post-53641401299959847382013-02-11T20:36:00.002+06:002013-02-11T20:36:22.542+06:00Ubuntu Teletalk 3G configurationThe basic settings is,<br />
<blockquote class="tr_bq">
Dial number: *99#<br />APN Address: gprsunl<br />PDP Type: IP<br />Auth mode: PAP</blockquote>
Edit connection -> Mobile Broadband -> Add new ....Jituhttp://www.blogger.com/profile/06929926697706128152noreply@blogger.com0tag:blogger.com,1999:blog-3260390521541206656.post-81074061577818903732013-01-14T01:33:00.000+06:002013-01-14T01:37:37.262+06:00Jquery ui datepicker a common gotchaThis post is just to keep me reminding about a jquery datepicker issue.<br />
<br />
If you have multiple jqerury ui datepicker with the same html ID, then you are done for. Crazy behavior is observed then. Don't set id to input for datepicker if you have multiple of them, or just assign a new id to each of them.Jituhttp://www.blogger.com/profile/06929926697706128152noreply@blogger.com0tag:blogger.com,1999:blog-3260390521541206656.post-76151809425775991812012-11-06T12:17:00.001+06:002012-11-06T12:17:42.458+06:00Using class as jquery selectorWe are so much used codes such as following,<br />
<br />
<pre class="brush: js;">$('a.mark_locked').live('click', function () {
// your code goes here
});
</pre>
<br />
Using class as a selector for putting a javascript business logic is kind of evil.<br />
The purpose of class in HTML is for styling. After jquery or prototype came to light, people have been using it for selectors as well. But to me this is not right. I myself used to do this a lot. But not anymore. Because when you hire a designer to change the html or dom then the designer has to know which class to keep and which to change. He does not have a clue which are the classes used for javascript. And for a large project it is a huge issue. Eventually no classes are removed and the HTML dom becomes heavy and clumsy.<br />
<br />
A much better approach is to use attribute selector, as following,
<br />
<pre class="brush: js;">$('a[mark_locked]').live('click', function () {
// your code goes here
});
</pre>
<br />
Now your designer has more freedom for manipulating classes in dom.Jituhttp://www.blogger.com/profile/06929926697706128152noreply@blogger.com0tag:blogger.com,1999:blog-3260390521541206656.post-37076682243886032972012-07-29T14:19:00.001+06:002012-07-30T11:58:07.513+06:00HTML widgets using jquery<h1>
What is post is about</h1>
This post is an extension of the post by <a href="http://alexmarandon.com/articles/web_widget_jquery/" target="_blank">Alex Marandon</a>. In that post you will find the following topic discussed<br />
<br />
<ul>
<li>Web widget</li>
<li>Usage</li>
<li>Bootstrap code using jquery</li>
</ul>
<div>
So what this post is about? I faced some issues while creating a jquery based widget and found some issues and solution. Here is my findings.</div>
<div>
<h1>
Things to care for</h1>
<div>
There are some aspect that you need to take care of to create a nice widget that works across different sites.</div>
<div>
<ul>
<li>Widget <b>must not</b> interfere with css and javascript of existing site</li>
<li>For rendering widget it is better to provide the following choices</li>
<ul>
<li>Some default theme to show the widget nicely</li>
<li>Provide the option for the site owner to override the theme with custom css</li>
</ul>
<li>Allow widget to be customized by user</li>
<ul>
</ul>
</ul>
<h1>
Solutions</h1>
</div>
</div>
<h2>
Javascript conflicts</h2>
If you are using jquery then <a href="http://alexmarandon.com/articles/web_widget_jquery/" target="_blank">Alex Marandon</a> has made it clear how to use jquery using noConflict. But when you will be using plugins for jquery in the widget you have to use no conflict is the following way,<br />
<br />
<pre class="CodeRay code-snippet" style="background-color: #f8f8f8; border: 1px solid silver; font-family: Consolas, 'Lucida Console', 'DejaVu Sans Mono', monospace; font-size: 14px; margin-bottom: 24px; margin-top: 24px; overflow: auto; padding: 1em; vertical-align: baseline;"><code style="background-color: transparent; border: 0px; font-style: inherit; margin: 0px; padding: 0px; vertical-align: baseline;">jQuery = window.jQuery.noConflict(<span class="pc" style="border: 0px; color: #005588; font-family: inherit; font-size: 13.63636302947998px; font-style: inherit; font-weight: bold; margin: 0px; padding: 0px; vertical-align: baseline;">false</span>);</code></pre>
<br />
The reason to use false is telling jquery not to remove the jquery from the window.jquery, because plugins use jquery from <span style="background-color: white;">window.jquery. If you use true in the param then any plugin that you add in the widget will not work.</span><br />
<h2>
Css conflicts</h2>
It is very important if you want to provide some out of box theme that the user may choose from. Then you need to make sure that your css does not conflict with existing ones. I found that the best way is to use sass. Because then you can use nesting to ensure that the css that you provide only impacts the container of the widget and nothing else.<br />
<h2>
Customization</h2>
<div>
You can customize widget using HTML 5 data attribute to provide the widget extra information that they need.</div>
<br />
<h2>
Demo</h2>
<div>
Here is a demo of a HTML widget which fetches data from blogger if you pass the name of your blogger.</div>
<script src="http://jquery-widget.herokuapp.com/assets/application.js" type="text/javascript">
</script>
<br />
<div class="blogger-jquery-widget effect6" data-blog-name="distash" data-no-css="false" style="height: 100px; width: 500px;">
</div>
I have developed a sample <a href="https://github.com/ashrafuzzaman/jquery-widget" target="_blank">project</a> on rails. The reason to use rails is to use the built in SCSS and be able to deploy to heroku. The 2 files that you need to see is here,<br />
<br />
<ul>
<li><a href="https://github.com/ashrafuzzaman/jquery-widget/blob/master/app/assets/javascripts/blogger-widget.js.erb" target="_blank">Javascript</a></li>
<li><a href="https://github.com/ashrafuzzaman/jquery-widget/blob/master/app/assets/stylesheets/blogger-widget.css.scss" target="_blank">SCSS</a></li>
</ul>
<div>
Here is the <a href="http://jsfiddle.net/ashraf_zmn/jFCX4/" target="_blank">jsFuddle</a> of the widget.</div>
<h1>
Reference</h1>
<ul>
<li><a href="https://github.com/ashrafuzzaman/jquery-widget" target="_blank">Demo project</a></li>
<li><a href="http://alexmarandon.com/articles/web_widget_jquery/" target="_blank">A nice basic tutorial for creating HTML widget with jquery by Alex Marandon</a></li>
</ul>Jituhttp://www.blogger.com/profile/06929926697706128152noreply@blogger.com0tag:blogger.com,1999:blog-3260390521541206656.post-79856102421544540272012-05-23T11:19:00.000+06:002012-05-23T11:19:49.398+06:00Cucumber remove Rack::Cache loggingI am using a cucumber and capybara-webkit in a project that uses Dragonfly.<br />
When I used capybara-webkit I suddenly started getting some Rack::Cache debug log. Which looked like the following,<br />
<br />
<pre class="brush: plain;"> @javascript
Scenario: Save new event as draft # features/manage_events.feature:23
cache: [GET /user/sign_out] miss
cache: [GET /] miss
cache: [POST /user/sign_in] invalidate, pass
cache: [GET /events/new] miss
http://maps.gstatic.com/cat_js/intl/en_us/mapfiles/api-3/8/11/%7Bmain,geometry%7D.js|43|Warning: you have included the Google Maps API multiple times on this page. This may cause unexpected errors.
cache: [PUT /users/update_time_zone] invalidate, pass
cache: [GET /events/new] miss
http://maps.gstatic.com/cat_js/intl/en_us/mapfiles/api-3/8/11/%7Bmain,geometry%7D.js|43|Warning: you have included the Google Maps API multiple times on this page. This may cause unexpected errors.
cache: [PUT /users/update_time_zone] invalidate, pass
When I fill in "Event Name" with "Event 1" # features/step_definitions/web_steps.rb:3
And I fill in "Event Description" with "This is a test event" # features/step_definitions/web_steps.rb:3
And I fill in "Event Venue" with "Dhaka, Bangladesh" # features/step_definitions/web_steps.rb:3
And I press "Search" # features/step_definitions/web_steps.rb:7
cache: [GET /events/location_search?str=Dhaka,%20Bangladesh] miss
And I fill in "Event Start date" with "2012-05-22" # features/step_definitions/web_steps.rb:3
And I fill in "Event End date" with "2012-05-23" # features/step_definitions/web_steps.rb:3
And I press "Save as draft" # features/step_definitions/web_steps.rb:7
cache: [POST /events/4fbc72688621ff1a31000026] invalidate, pass
cache: [GET /my/events?p=false] miss
cache: [GET /assets/ui-bg_glass_65_ffffff_1x400.png] miss
cache: [GET /assets/bg.gif] miss
Then I should see "Event was successfully updated." # features/step_definitions/web_steps.rb:11
</pre>
That log comes from the Rack::Cache which is used by Dragonfly. So you can add the following code snippet in the test.rb,
<br />
<pre class="brush: plain;"> require 'rack/cache'
config.middleware.delete ::Rack::Cache
rack_cache_already_inserted = Rails.application.config.action_controller.perform_caching && Rails.application.config.action_dispatch.rack_cache
Rails.application.middleware.insert 0, Rack::Cache, {
:verbose => false,
:metastore => URI.encode("file:#{Rails.root}/tmp/dragonfly/cache/meta"), # URI encoded in case of spaces
:entitystore => URI.encode("file:#{Rails.root}/tmp/dragonfly/cache/body")
} unless rack_cache_already_inserted
</pre>
<br />
<br />
<br />
References<br />
<ul>
<li><a href="http://github.com/thoughtbot/capybara-webkit/issues/234">github.com/thoughtbot/capybara-webkit/issues/234</a></li>
</ul>Jituhttp://www.blogger.com/profile/06929926697706128152noreply@blogger.com0tag:blogger.com,1999:blog-3260390521541206656.post-81836535746962819142012-05-22T10:05:00.003+06:002012-05-22T17:26:35.582+06:00Cucumber on railsThe purpose of this document is the following<br />
<br />
<ul>
<li>Setup cucumber with rails</li>
<li>Define basic features</li>
<li>To test ajax response</li>
</ul>
<div>
The version for gems that are used to create the documents are,</div>
<div>
<ul>
<li>cucumber (1.2.0)</li>
<li>cucumber-rails (1.3.0)</li>
</ul>
<h2>
Setup</h2>
</div>
<div>
<a href="https://github.com/cucumber/cucumber-rails" target="_blank">Cucumber-rails</a> gem makes it easier to install cucumber in rails, but I faced some issues which I would like to document. The following is from the cucumber-rails document,<br />
<pre class="brush: plain;">group :test do
gem 'cucumber-rails', :require => false
# database_cleaner is not required, but highly recommended
gem 'database_cleaner'
gem 'cucumber-rails-training-wheels'
gem 'capybara'
gem 'rspec-expectations'
gem 'fabrication' #for test fixture creation
end
</pre>
Then run,
<br />
<pre class="brush: plain;">bundle install
rails generate cucumber:install
</pre>
<div>
This will generate the necessary file for cucumber.<br />
<pre class="brush: plain;"> create config/cucumber.yml
create script/cucumber
chmod script/cucumber
create features/step_definitions
create features/support
create features/support/env.rb
exist lib/tasks
create lib/tasks/cucumber.rake
</pre>
If you are using mongo, then it should give you a warning that you can not use 'transaction' strategy for mongo. Then you can change that to 'truncation' in your 'features/support/env.rb' file. Change the env.rb as following,<br />
<pre class="brush: plain;">DatabaseCleaner.strategy = :truncation
</pre>
Now it is time to write some features to test. cucumber-rails-training-wheels gem help you with generators, so that you can generate features quickly. To generate use the command as follows,<br />
<pre class="brush: plain;">rails generate cucumber_rails_training_wheels:feature post title:string body:text number:integer published:boolean
</pre>
With this plug-in you can generate cucumber feature when you are using scaffold generator. For details please see the reference.<br />
I am working on a <a href="https://github.com/ashrafuzzaman/cucumber_rails_demo" target="_blank">sample cucumber project</a> that can facilitate newbies to get started with cucumber and get to know the best practices. Any contribution is very welcome.<br />
<h2>
Global fixture setup and tear down</h2>
If you have some global data that is needed to be loaded for every test then you can use <a href="https://github.com/cucumber/cucumber/wiki/Hooks" target="_blank">cucumber hooks</a>. You can create the fixtures that you always need, for an example users for login or initialize admin global settings.<br />
<h2>
Reference</h2>
</div>
<div>
<ul>
<li><a href="https://github.com/ashrafuzzaman/cucumber_rails_demo" target="_blank">A sample working cucumber implementation</a> </li>
<li><a href="https://github.com/cucumber/cucumber-rails">github.com/cucumber/cucumber-rails</a></li>
<li><a href="https://github.com/cucumber/cucumber-rails-training-wheels">github.com/cucumber/cucumber-rails-training-wheels</a></li>
<li><a href="http://watir.com/2011/01/22/simple-cucumber-watir-page-object-pattern-framework">watir.com/2011/01/22/simple-cucumber-watir-page-object-pattern-framework</a> </li>
<li><a href="http://jitu-blog.blogspot.com/2011/12/jbehave-web-and-page-object-pattern.html" target="_blank">jitu-blog.blogspot.com/2011/12/jbehave-web-and-page-object-pattern.html </a></li>
<li><a href="https://github.com/cucumber/cucumber/wiki/Hooks" target="_blank">github.com/cucumber/cucumber/wiki/Hooks </a></li>
</ul>
<br />
<br /></div>
</div>Jituhttp://www.blogger.com/profile/06929926697706128152noreply@blogger.com1tag:blogger.com,1999:blog-3260390521541206656.post-1894139213971186072012-05-02T13:23:00.000+06:002012-05-02T13:24:54.169+06:00Parameterizing translation files in rails I18nIn en.yml,<br />
<br />
<pre class="brush: plain;">delete_confirm_with_title: 'Are you sure, you want to delete "%{title}"?'
</pre>
<br />
In erb
<br />
<pre class="brush: html;"><%= link_to 'X', resource, confirm: t('delete_confirm_with_title', {:title => resource.name}), method: :delete %>
</pre>Jituhttp://www.blogger.com/profile/06929926697706128152noreply@blogger.com0tag:blogger.com,1999:blog-3260390521541206656.post-43108088564370200752012-04-27T17:10:00.001+06:002012-04-27T17:21:42.373+06:00Date time stamp using jquery ui frameworkIf you are using jquery ui framework then you can show you date time in a cool way. The final result will look like this,<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi-Zd1B9n2N2UdrKjxat_231vTb5K_3lHOf1XoSxiNyEsNrZBrTMfwkmkzLdY5GyRcDxe-tWJ4j6r033_y4BxOF_isqfYXA5JxFdlIhkoFOwX9OVH8z2C-LRDbBOla-iqhj0WUiMP-0vcQ/s1600/Screenshot+at+2012-04-27+16:44:52.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi-Zd1B9n2N2UdrKjxat_231vTb5K_3lHOf1XoSxiNyEsNrZBrTMfwkmkzLdY5GyRcDxe-tWJ4j6r033_y4BxOF_isqfYXA5JxFdlIhkoFOwX9OVH8z2C-LRDbBOla-iqhj0WUiMP-0vcQ/s1600/Screenshot+at+2012-04-27+16:44:52.png" /></a></div>
<br />
<br />
<br />
<br />
It will of course depend on what theme you are using. Here it goes.<br />
<br />
<h2>
HTML</h2>
<pre class="brush: html;"><div class="date">
<div class="ui-widget ui-widget-content ui-helper-clearfix ui-corner-all">
<div class="ui-widget-header ui-helper-clearfix ui-corner-all">
Apr ยด10
</div>
<div class="day">
25<sup>th</sup></div>
<hr />
<div class="time">
1:05 pm</div>
</div>
</div>
</pre>
<br />
<br />
<h2>
CSS</h2>
<pre class="brush: css;">.date {
width: 55px;
text-align:center;
font-family: cursive;
}
.date .ui-widget-header {
padding: 2px 5px 2px 5px;
font-size: .9em !important;
}
.day, .time {
font-size: .8em !important;
}
.date hr {
margin: 0px;
border: 0;
height: 1px;
background-image: -webkit-linear-gradient(left, rgba(0,0,0,0), rgba(31,52,60,0.75), rgba(0,0,0,0));
background-image: -moz-linear-gradient(left, rgba(0,0,0,0), rgba(31,52,60,0.75), rgba(0,0,0,0));
background-image: -ms-linear-gradient(left, rgba(0,0,0,0), rgba(31,52,60,0.75), rgba(0,0,0,0));
background-image: -o-linear-gradient(left, rgba(0,0,0,0), rgba(31,52,60,0.75), rgba(0,0,0,0));
}
sup, sub {
vertical-align: baseline;
position: relative;
top: -0.4em;
}
sub { top: 0.4em; }
</pre>
<br />
The style of hr element will of course vary for different theme.Jituhttp://www.blogger.com/profile/06929926697706128152noreply@blogger.com0tag:blogger.com,1999:blog-3260390521541206656.post-24452129755261744022012-04-12T15:26:00.001+06:002012-04-12T15:26:55.214+06:00Using helper method in Rials 3 controllersHere is a rails 3 way to access you helper methods from rails3 controllers.<br />
<br />
<pre class="brush: ruby;"># app/controllers/posts_controller.rb
class PostsController < ActionController::Base
def show
# ...
tags = view_context.generate_tags(@post)
email_link = view_context.mail_to(@user.email)
# ...
end
end
# app/helpers/posts_helper.rb
module PostsHelper
def generate_tags(post)
"Generate Tags"
end
end
</pre>
<br />
Found the solution from the blog of Samnang Chhun.
<br />
<h2>
Reference</h2>
<ul>
<li><a href="http://wowkhmer.com/2011/09/09/use-view-helper-methods-in-rails-3-controller/">http://wowkhmer.com/2011/09/09/use-view-helper-methods-in-rails-3-controller/</a></li>
</ul>Jituhttp://www.blogger.com/profile/06929926697706128152noreply@blogger.com0tag:blogger.com,1999:blog-3260390521541206656.post-11149881194967487302012-03-09T00:50:00.000+06:002012-03-09T00:51:19.285+06:00Rails JSON mapping<div>
Rails <a href="http://apidock.com/rails/ActiveRecord/Serialization/to_json" target="_blank">to_json</a> is great when you are using web service to talk to your own application. But sometimes when you expose service for some third party application, then you need to export you own data in their format. In my can I had to expose my data to be able to use <a href="http://arshaw.com/fullcalendar/">fullcalendar</a>. And <a href="http://arshaw.com/fullcalendar/">fullcalendar</a> expects data in their format. So thanks to the discussion <a href="http://stackoverflow.com/questions/5395620/filter-json-render-in-rails-3" target="_blank">here</a>, I found a way to represent your in the following way,</div>
<div>
<br /></div>
<pre class="brush: ruby;"> def story_feed
@stories = @project.stories
render :json => @stories.map { |story|
{ :id => story.id,
:title => story.title,
:start => story.start_at || Date.today,
:end => story.complete_at || Date.today }
}
end
</pre>Jituhttp://www.blogger.com/profile/06929926697706128152noreply@blogger.com2tag:blogger.com,1999:blog-3260390521541206656.post-49895543361511978912011-12-26T22:57:00.003+06:002011-12-26T22:57:41.116+06:00Customizing rails default generators<h1>
Objective</h1>
Customizing the template of default rails generators.<br />
<br />
<h1>
How it works</h1>
<br />
This is actually pretty simple :) You might get an idea when you take a look <a href="http://github.com/rails/rails/tree/master/railties/lib/rails/generators/erb/scaffold" target="_blank">here</a>. There you can find all the templates. Now if you want to customize lets say the <b>index.html.erb</b>, then in your project directory create the "<b>lib/templates/erb/scaffold/index.html.erb</b>". After that when you create a scaffold the generator will use your template.<br />
<br />
<h1>
Reference</h1>
<br />
<br />
<ul>
<li><a href="http://guides.rubyonrails.org/generators.html">http://guides.rubyonrails.org/generators.</a></li>
<li><a href="http://railscasts.com/episodes/216-generators-in-rails-3">http://railscasts.com/episodes/216-generators-in-rails-3</a></li>
<li><a href="https://github.com/rails/rails/tree/master/railties/lib/rails/generators/erb/scaffold/templates">https://github.com/rails/rails/tree/master/railties/lib/rails/generators/erb/scaffold/templates</a></li>
</ul>Jituhttp://www.blogger.com/profile/06929926697706128152noreply@blogger.com0tag:blogger.com,1999:blog-3260390521541206656.post-47013700616600619692011-12-18T01:18:00.001+06:002011-12-18T01:19:29.362+06:00Jbehave web and web drive<h2>
Objective</h2>
The purpose of this startup project is to get
you going with <a href="http://jbehave.org/reference/web/stable/page-objects.html" target="_blank">jbehave web</a>(3.4.3) and <a href="http://seleniumhq.org/projects/webdriver/" target="_blank">WebDrive</a>. In this example we do a
simple and basic task.<br />
<div class="wikistyle">
<ul>
<li>Load a website</li>
<li>Click on a link</li>
<li>And test if the redirected page is where we want to be</li>
</ul>
<h2>
Required libraries</h2>
<ul>
<li>
<a href="http://jbehave.org/reference/downloads/web/bin/stable">JBehaveWeb</a> - Add all the jars from lib folder</li>
<li>
<a href="http://selenium.googlecode.com/files/selenium-java-2.15.0.zip">Selenium</a> - Add all the jar from lib folder and selenium-java-2.15.0.jar</li>
<li><a href="https://github.com/KentBeck/junit/downloads">JUnit</a> </li>
</ul>
A sample project is uploaded in <a href="https://github.com/ashrafuzzaman/JbehaveWebDriveExample" target="_blank">github</a>. It is simple enough to use as a startup project.<br />
The implementation was done following <a href="http://jbehave.org/reference/web/stable/page-objects.html" target="_blank">this article</a>.
</div>Jituhttp://www.blogger.com/profile/06929926697706128152noreply@blogger.com0tag:blogger.com,1999:blog-3260390521541206656.post-77873281575299065442011-12-18T01:16:00.001+06:002012-04-11T15:29:57.365+06:00Jbehave web and page object pattern<h2>
Objective</h2>
To explain <a href="http://code.google.com/p/selenium/wiki/PageObjects" target="_blank">page object pattern</a> and how to use it with <a href="http://jbehave.org/reference/web/stable/page-objects.html" target="_blank">jbehave web</a>(3.4.3) and <a href="http://seleniumhq.org/projects/webdriver/" target="_blank">WebDrive</a>. <br />
<div class="wikistyle">
A sample project is uploaded in <a href="https://github.com/ashrafuzzaman/JbehaveWebDriveExample" target="_blank">github</a>. It is simple enough to use as a startup project.<br />
The implementation was done following <a href="http://jbehave.org/reference/web/stable/page-objects.html" target="_blank">this article</a>. The basic is explained there, so in my post I will discuss about the <a href="http://code.google.com/p/selenium/wiki/PageObjects" target="_blank">page object pattern</a>, which simplifies the <a href="http://seleniumhq.org/docs/03_webdriver.html" target="_blank">web drive </a>implementation.<br />
<h2>
Page object pattern </h2>
<table align="center" cellpadding="0" cellspacing="0" class="tr-caption-container" style="margin-left: auto; margin-right: auto; text-align: center;"><tbody>
<tr><td style="text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg_PC0B3R9NCUlzoePhyW_moATo4hXZtF2Z4aBW1r861idOjG1MHATRXWrow5EflbRDDXke8GmIkevBztnc7shGMKq5T074rvaW22YTaYyizZiGOQw3eRQo5fH71lkdJfUub4_xsWJMivE/s1600/Page+object+model.jpg" imageanchor="1" style="margin-left: auto; margin-right: auto;"><img border="0" height="280" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg_PC0B3R9NCUlzoePhyW_moATo4hXZtF2Z4aBW1r861idOjG1MHATRXWrow5EflbRDDXke8GmIkevBztnc7shGMKq5T074rvaW22YTaYyizZiGOQw3eRQo5fH71lkdJfUub4_xsWJMivE/s320/Page+object+model.jpg" width="320" /></a></td></tr>
<tr><td class="tr-caption" style="text-align: center;">Each page has a one to one mapping with a java class</td></tr>
</tbody></table>
This might seem to be obvious to map all the pages with a java class. And the navigation from one page to another to map to a method of one object that returns the navigation page object. This approach increases readability in a great extant. Now look at a sample code(just to get an idea).</div>
<div class="wikistyle">
</div>
<div class="wikistyle">
<pre class="brush: java;">public class BasicWebSteps {
private final Pages pages;
public BasicWebSteps(Pages pages) {
this.pages = pages;
}
@Given("user is on Home page")
public void userIsOnHomePage(){
pages.homePage().open();
}
@When("user clicks on Resume from menu")
public void userClicksOnResumeLink(){
pages.resumePage().open();
}
@Then("Resume page is shown")
public void runStoryPageIsShown(){
pages.resumePage().assertShown();
}
}
</pre>
This increases the readability of the step definition. It encapsulates the logic of navigation, structure of page specific html, page specific assertions for each pages in corresponding classes. This approach follows Single Responsibility Principle and makes a logical separation in the test project.<br />
Jbehave help you to implement this pattern by providing <a href="http://jbehave.org/reference/web/stable/javadoc/web-selenium/org/jbehave/web/selenium/WebDriverPage.html" target="_blank">WebDriverPage</a>. So your parent class of each page might look like,<br />
<pre class="brush: java;">public abstract class AbstractPage extends WebDriverPage {
public AbstractPage(WebDriverProvider driverProvider) {
super(driverProvider);
}
...
}
</pre>
And a simple page can be like the following.<br />
<pre class="brush: java;">/*
* Contains page specific
* HTML structure
* Assertions
* Navigation
*/
public class ResumePage extends AbstractPage {
public ResumePage(WebDriverProvider driverProvider) {
super(driverProvider);
}
public void open(){
findElement(By.linkText("Resume")).click();
}
public void assertShown() {
String output = findElement(By.cssSelector("#menu .selected a")).getText();
assertTrue("Resume menu should be selected", output.contains("Resume"));
}
}
</pre>
<br />
<h2>
Use annotation</h2>
Use jbehave annotation to simplify the code.
<br />
<br />
<pre class="brush: java;">public class LoginPage extends AbstractPage {
@FindBy(how = How.NAME, using = "username")
private WebElement userNameElem;
@FindBy(how = How.NAME, using = "password")
private WebElement passwordElem;
@FindBy(how = How.NAME, using = "role")
private WebElement roleElem;
@FindBy(how = How.NAME, using = "B3")
private WebElement submitButton;
public void loginAs(String profileName) {
User user = User.getUser(profileName);
userNameElem.sendKeys(user.getUserName());
passwordElem.sendKeys(user.getPassword());
roleElem.sendKeys(user.getRole());
submitButton.submit();
}
}
</pre>
<h2>
Sample project</h2>
The sample project can be found <a href="https://github.com/ashrafuzzaman/JbehaveWebDriveExample" target="_blank">here</a>.
<br />
<br />
<h2>
References</h2>
<br />
<br />
<ul>
<li><a href="http://code.google.com/p/selenium/wiki/PageObjects">http://code.google.com/p/selenium/wiki/PageObjects</a></li>
<li><a href="http://jbehave.org/reference/web/stable/page-objects.html">http://jbehave.org/reference/web/stable/page-objects.html</a></li>
<li><a href="http://www.intexsoft.com/blog/item/34-selenium-webdriver-page-object-pattern-and-pagefactory.html">http://www.intexsoft.com/blog/item/34-selenium-webdriver-page-object-pattern-and-pagefactory.html</a></li>
</ul>
</div>Jituhttp://www.blogger.com/profile/06929926697706128152noreply@blogger.com1tag:blogger.com,1999:blog-3260390521541206656.post-27304070623583135152011-12-14T02:25:00.000+06:002011-12-17T03:29:38.587+06:00Java Behavior Driven Development BDD<h2>
Objective</h2>
The purpose of this article is to get you going with <a href="http://jbehave.org/" target="_blank">jbehave</a>, an elegant Java based BDD framework. This is a simple <a href="http://jbehave.org/reference/stable/getting-started.html" target="_blank">example</a> of powerful <a href="http://jbehave.org/" target="_blank">jbehave</a>. I missed a simple example of jbehave, so <a href="https://github.com/ashrafuzzaman/Simple-jbehave-example" target="_blank">here</a> is my effort.<br />
<h2>
Required libraries</h2>
<ul>
<li><a href="http://www.blogger.com/goog_244957289"></a><a href="http://commons.apache.org/collections/download_collections.cgi" target="_blank">commons-collections.jar</a></li>
<li><a href="http://commons.apache.org/lang/download_lang.cgi" target="_blank">commons-lang.jar</a></li>
<li><a href="http://freemarker.sourceforge.net/" target="_blank">freemarker.jar</a></li>
<li><a href="http://jbehave.org/reference/downloads/bin/stable" target="_blank">jbehave-core.jar</a></li>
<li><a href="http://commons.apache.org/io/download_io.cgi" target="_blank">org.apache.commons.io.jar</a></li>
<li><a href="http://www.jarvana.com/jarvana/archive-details/com/thoughtworks/paranamer/paranamer/2.4/paranamer-2.4.jar" target="_blank">paranamer.jar</a></li>
<li><a href="http://www.jarfinder.com/index.php/jars/versionInfo/431" target="_blank">plexus-utils.jar</a></li>
</ul>
The project is uploaded in <a href="https://github.com/ashrafuzzaman/Simple-jbehave-example" target="_blank">github</a>. It also has the dependency jars with it, so that you can start up soon.<br />
<h2>
References</h2>
<ul>
<li><a href="http://jbehave.org/">http://jbehave.org/</a></li>
<li><a href="http://christophertownson.com/tag/bdd">http://christophertownson.com/tag/bdd</a></li>
<li><a href="https://github.com/ashrafuzzaman/Simple-jbehave-example">https://github.com/ashrafuzzaman/Simple-jbehave-example</a> </li>
</ul>Jituhttp://www.blogger.com/profile/06929926697706128152noreply@blogger.com0tag:blogger.com,1999:blog-3260390521541206656.post-63897751960139707482011-12-11T13:46:00.001+06:002011-12-11T16:21:56.137+06:00Project Portfolios engine for Refinery CMSJust added a new kind of <a href="http://github.com/ashrafuzzaman/refinerycms-project-portfolios" target="_blank">portfolio</a> to get it running in <a href="https://github.com/resolve/refinerycms/" target="_blank">RefineryCMS</a>. Here is <a href="http://www.ashrafuzzaman.com/project_portfolios" target="_blank">demo</a>.<br />
<table align="center" cellpadding="0" cellspacing="0" class="tr-caption-container" style="margin-left: auto; margin-right: auto; text-align: center;"><tbody>
<tr><td style="text-align: center;"><a href="http://2.bp.blogspot.com/-WyY46x6AaRo/TtSkSR-NrkI/AAAAAAAAM8Q/O9V9CE5_T-M/s1600/Portfolio.png" imageanchor="1" style="margin-left: auto; margin-right: auto;"><img border="0" height="202" src="http://2.bp.blogspot.com/-WyY46x6AaRo/TtSkSR-NrkI/AAAAAAAAM8Q/O9V9CE5_T-M/s320/Portfolio.png" width="320" /></a></td></tr>
<tr><td class="tr-caption" style="text-align: center;">Project portfolio</td><td class="tr-caption" style="text-align: center;"><br /></td></tr>
</tbody></table>
<table align="center" cellpadding="0" cellspacing="0" class="tr-caption-container" style="margin-left: auto; margin-right: auto; text-align: center;"><tbody>
<tr><td style="text-align: center;"><a href="http://2.bp.blogspot.com/-Ms5K3O6qejg/TtSkTyie_JI/AAAAAAAAM8c/KVTxVYLUZ1U/s1600/Portfolio+popup.png" imageanchor="1" style="margin-left: auto; margin-right: auto;"><img border="0" height="191" src="http://2.bp.blogspot.com/-Ms5K3O6qejg/TtSkTyie_JI/AAAAAAAAM8c/KVTxVYLUZ1U/s320/Portfolio+popup.png" width="320" /></a></td></tr>
<tr><td class="tr-caption" style="text-align: center;">Project details popup</td></tr>
</tbody></table>
<br />Jituhttp://www.blogger.com/profile/06929926697706128152noreply@blogger.com0tag:blogger.com,1999:blog-3260390521541206656.post-13337818010127456332010-06-16T02:43:00.000+06:002011-12-11T16:22:29.692+06:00Faqs plugin for Refinery CMS<a href="http://refinerycms.com/" id="sm9d" title="Refinery">Refinery</a> is one of the rails CMS that allows people to extend the CMS and build custom plugin on that. The plugins are easy to include and maintain.<br />
<div>
Faqs are one of the essential part for most of the web applications. So I build a plugin for <a href="http://refinerycms.com/" id="jlwe" title="Refinery">refinery</a>. The project is kept on <a href="http://github.com/ashrafuzzaman/refinerycms-faqs" id="k9:6" title="github">github</a>. Follow the following scripts to include the plugin.</div>
<br />
<pre class="brush: plain;">script/plugin install git://github.com/ashrafuzzaman/refinerycms-faqs.git
rake refinery:faqs:install
</pre>
<br />Jituhttp://www.blogger.com/profile/06929926697706128152noreply@blogger.com0tag:blogger.com,1999:blog-3260390521541206656.post-5782994258118891092009-12-24T03:00:00.006+07:002011-12-11T18:45:55.667+06:00Implementing Payson API Integration 1.0 in Ruby<div xmlns="http://www.w3.org/1999/xhtml">
To do payment using <a href="http://api.payson.se/" title="Payson API integration 1.0">Payson API integration 1.0</a> you need to follow 3 steps.<br />
<div>
<div id="vwze" style="text-align: left;">
<ol>
<li>Request to <b>initiate a pay request</b> (in return it will send you back a <b>token</b>)</li>
<li>Redirect client to Payson site <b>using that token</b></li>
<li>After client completes the payment, Payson will redirect the client back to your site and you can check the payment status and update status of payment on your application</li>
</ol>
<table align="center" cellpadding="0" cellspacing="0" class="tr-caption-container" style="margin-left: auto; margin-right: auto; text-align: center;"><tbody>
<tr><td style="text-align: center;"><a href="http://api.payson.se/Images/multiple.png" imageanchor="1" style="margin-left: auto; margin-right: auto;"><img border="0" height="232" src="http://api.payson.se/Images/multiple.png" width="320" /></a></td></tr>
<tr><td class="tr-caption" style="text-align: center;">Payson api cycle</td></tr>
</tbody></table>
<br />
<ol>
</ol>
</div>
</div>
<h3>
Plugin used</h3>
<div>
<a href="http://rest-client.heroku.com/rdoc/" id="h0l_" title="RestClient">RestClient</a> is nice API to handle http request and response.</div>
<h3>
Step 1 (Request to initiate a pay request)</h3>
<div>
To be able to use <a href="http://api.payson.se/" id="sybe" style="color: #551a8b;" title="Payson API integration 1.0">Payson API integration</a> you must have,</div>
<div>
<b>AgentID</b>: XXXX</div>
<div>
<div>
<b>MD5-key</b>: XXXXXXXX-XXXX-XXXX-XXXX-XXXXXXXXXXXX</div>
<div>
</div>
<div>
For a <b>pay initiate request</b> you can see the specification <a href="http://api.payson.se/#title7" id="gpn3" title="here">here</a>. Before you integrate the API in your application you can make a curl http call just to check if every thing works. </div>
</div>
<pre class="brush: bash;">curl -H "PAYSON-SECURITY-USERID:XXXX" \
-H "PAYSON-SECURITY-PASSWORD:XXXXXXXX-XXXX-XXXX-XXXX-XXXXXXXXXXXX" \
-d "receiverList.receiver(0).email=test@gmail.com&receiverList.receiver(0).amount=10&returnUrl=http://localhost:3000/payson_return/56&cancelUrl=http://localhost:3000/payson_cancel/56&memo=test&senderEmail=sender@gmail.com&senderFirstName=A.K.M.&senderLastName=Ashrafuzzaman" https://api.payson.se/1.0/Pay/ -o payson.out
</pre>
Here PAYSON-SECURITY-USERID is <b>AgentID</b> and PAYSON-SECURITY-PASSWORD <b>MD5-key</b>. And as you can see PAYSON-SECURITY-USERID and PAYSON-SECURITY-PASSWORD (the authentication fields) will have to be send in the <b>headers of the request</b>. Now it should return a message which looks like,
<br />
<pre class="brush: bash;">responseEnvelope.ack=SUCCESS&responseEnvelope.timestamp=2009-11-15T17%3a14%3a03&responseEnvelope.version=1.0&TOKEN=4ecce14b-a4c7-4990-9814-db8aa2e97553</pre>
<div>
The response will contain a token which will be used to do the <b>pay request</b>.</div>
Now let us see the ruby version of the curl request,
<br />
<div>
<pre class="brush: ruby;">params_list = { 'receiverList.receiver(0).email' => reciever_email,
'receiverList.receiver(0).amount' => recieving_amount,
'receiverList.receiver(1).email' => more_receiver_email, #you can send money to more then one account
'receiverList.receiver(1).amount' => more_receive_amount,
'returnUrl' => callback_url,
'cancelUrl' => cancel_url,
'memo' => description,
'senderEmail' => sender_email,
'senderFirstName' => first_name,
'senderLastName' => last_name }
header_list = {'PAYSON-SECURITY-USERID' => 'XXXX', 'PAYSON-SECURITY-PASSWORD' => 'XXXXXXXX-XXXX-XXXX-XXXX-XXXXXXXXXXXX'}
response = RestClient.post 'https://api.payson.se/1.0/Pay/', params_list, header_list
</pre>
<h3>
Step 2 (Redirect client to Payson site)</h3>
<div>
Now parse the response and redirect to Payson site for client to complete the payment. </div>
<pre class="brush: ruby;">response_hash = parse_response(response)
if response_hash['responseEnvelope.ack'] == 'SUCCESS'
logger.info "Payson pay response #{response}"
@signup.payson_token = response_hash['TOKEN']
@signup.save!
redirect_to "https://www.payson.se/PaySecure?token=#{response_hash['TOKEN']}"
elsif response_hash['responseEnvelope.ack'] == 'FAILURE'
redirect_to @signup.event.home_path
end</pre>
<div>
This will redirect to Payson paysecure page. And client will complete the payment which will redirect the client back to <span style="font-family: 'Courier New';">returnUrl. If the client cancels the payment then he will be redirected to cancel url.</span></div>
<h3>
Step 3 (complete the process)</h3>
<div>
Now it is time to nail it ;)</div>
<div>
In the return action you should check that the payment is done.</div>
<pre class="brush: ruby;">response = RestClient.get "https://api.payson.se/1.0/PaymentDetails?token=#{signup.payson_token}",
{'PAYSON-SECURITY-USERID' => 'XXXX', 'PAYSON-SECURITY-PASSWORD' => 'XXXXXXXX-XXXX-XXXX-XXXX-XXXXXXXXXXXX'}
response_hash = parse_response(response)
@signup.payson_params = response_hash
@signup.payson_status = response_hash['responseEnvelope.status']
@signup.save!
if @signup.payson_status == Payment::PaysonClient::COMPLETED
confirm_signup
else
@signup.fail!
ErrorNotifier.deliver_notification("Payment failed with status #{@signup.payson_status} for signup #{@signup.inspect}")
end
</pre>
<div>
You can check the reference for pay details request <a href="http://api.payson.se/#title8" id="yzr1" title="here">here</a>.</div>
</div>
</div>Jituhttp://www.blogger.com/profile/06929926697706128152noreply@blogger.com1