At.js with froala issue

At.js is a Javascript library for having Github like mentions in an app. The library is here. It’s a very good library and simple to use however when I tried it, it didn’t work out of the box for froala editor. The problem is At.js surrounds the range with spans and since WebKit browsers insert spans, the editor accepts spans only if


is set to true. So to counter this, when initiating the function, a small tweak is required.

at: “@”,
editableAtwhoQueryAttrs: {“data-fr-verified”: true},

data:[‘Peter’, ‘Tom’, ‘Anne’]

This should get it working as it did for me.


Reference: Github issue


Hope  it helps

Screen shot in Chrome Extension

There are many chrome extensions to take a screenshot. But recently, I was working on a project where we had to build an extension and also were taking a screenshot. So apparently, chrome provides an API called ‘capturevisibletab’ (doc) and it works. While coding, I referred to this git repo which works perfectly.
But then, as we tested, we found the image was cropped when using a macbook retina display machine.
It took us a while to understand that this is because the devicepixelratio (window.devicePixelRatio) is 2 in a macbook(with retina) display and 1 in others and hence the issue.
Thus, we had to adjust for scale which we did not account for earlier and we referred to this code for adjusting it.

Will soon post our whole code for completeness but the logic is pretty clear from the above code.

Hope it helps !

Editing a form in nested_form gem

This is a very very naive and simple thing but I quite lost my time on this so I thought might be helpful.

Recently I was using the ‘nested_form’ gem by the great Ryan Bates ( The form to create a new form works like a real gem without any effort.

Now, when I clicked on ‘edit’ link, it created some issues as the nested models didnt come.

I had a simple thing like each question has many answers. When I created a question, I added 5 answers to it but when I edited the question, no answers were visible.

The simple solution for this would be that the <% f.fields_for :answers do |an| %> line in your form would be without an equal to sign so just add it.

Thus, it looks like

<%= f.fields_for :answers do |an| %>

Thats all and it works like a charm!

Hope it helps.

Resizing the image without chaning its dimensions using paperclip


In a recent application, the need of the hour was to reduce the file size of an image without changing its dimensions.

Now, this can be acheived by reducing the quality of the image.

ImageMagick library has a “convvert” command which does exactly the same..

for eg(on the terrminal) : convert image1.jpg -quality 10 image2.jpg

image1.jpg—>original image

image2.jpg—->final image


According to the paperclip wiki there is a :quality parameter which is allowed.

I tried that but for some reasons , I was not able to get it running.

I also tried using :convert_options but it did not work too.


Thus , I wrote my own processor and got the stuff working. Here is the model and processor code :

#######Model code###########

class Passet < ActiveRecord::Base
attr_accessible :caption, :markup, :media_passet, :pcontent_id
has_attached_file :media_passet,
:styles => {
: original => {
:geometry => “256×256<“,
:processors => [:qresize]
belongs_to :pcontent


###################Processor code########################

make a file called qresize.rb in #{Rails.root}/lib/papaerclip_processors

The path is mentioned because this path is loaded automatically….

module Paperclip
# handles compression of image by reducing its quality
class Qresize < Processor
def initialize file, options = {}, attachment = nil
@format = File.extname(@file.path)
@basename = File.basename(@file.path, @format)
def make
src = @file
dst =[@basename, @format])
parameters = []
parameters << “:source”
parameters << “-quality 10”
parameters << “:dest”
parameters = parameters.flatten.compact.join(” “).strip.squeeze(” “)
success =“convert”, parameters, :source => “#{File.expand_path(src.path)}[0]”, :dest => File.expand_path(dst.path))
rescue PaperclipCommandLineError => e
raise PaperclipError, “There was an error during the Size Reduction  for #{@basename}” if @whiny


This is a general code for image resizing and probably at this stage, we may not require to write a processor.

But the advantage of doing this is that we can extend this to do a lot more as and when requirement comes.

Also, we can handle our video and audio processing by this easily.

The other option is to pass a block(lambda or Proc) to :styles hash but I personally feel this is a much cleaner approach.


Hope it helps.

The key differences in W3C event model and Microsoft event model

Recently I came across the key differences in the w3c event model and the event model followed by microsoft( its for the IE ghost which haunts many !!)

I am listing the major differences here :

Points W3C event Model Microsoft event model
Nomenclature It is called the W3C event model It is called JScript event model
API used : object.addEventListener(event,function,useCapture) object.attachEvent(event,function)
The this object this object points to the object
to which event is attached to
this points to the window object
event object It allows event object to be passedas first argument of the listener functionthus we can do $event.preventDefault(); It provides a window.eventobject.Thus to do the same thing you have to setthe returnValue property of window.event object to false
Scope of event object The event object is not global The event object is always global
Standardized methods for event object the event object provides many standardized methods the event object does not provide the same standardized methods
Compatibility !! It is supported by all browsers Supported by microsoft browsers only !