Target=”_blank” – the most underestimated vulnerability ever

If you use the target="_blank" attribute on a link, and do not accompany it with a rel="noopener" attribute, you are leaving your users open to a very simple phishing attack.




use ‘strict’ features on JavaScript

List of features (non-exhaustive)

  1. Disallows global variables. (Catches missing var declarations and typos in variable names)
  2. Silent failing assignments will throw error in strict mode (assigning NaN = 5;)
  3. Attempts to delete undeletable properties will throw (delete Object.prototype)
  4. Requires all property names in an object literal to be unique (var x = {x1: "1", x1: "2"})
  5. Function parameter names must be unique (function sum (x, x) {...})
  6. Forbids octal syntax (var x = 023; some devs assume wrongly that a preceding zero does nothing to change the number.)
  7. Forbids the with keyword
  8. eval in strict mode does not introduce new variables
  9. Forbids deleting plain names (delete x;)
  10. Forbids binding or assignment of the names eval and arguments in any form
  11. Strict mode does not alias properties of the arguments object with the formal parameters. (i.e. in function sum (a,b) { return arguments[0] + b;} This works because arguments[0]is bound to a and so on. )
  12. arguments.callee is not supported

AWS S3 – Pre-signed URL uploads

RUBY (create a pre-signed & public url from server side)

s3 =
obj = s3.bucket('bucket-name').object('files/hello.text')

put_url = obj.presigned_url(:put, acl: 'public-read', expires_in: 3600 * 24, content_type: 'multipart/form-data')
#=> ""

#=> ""

You can fetch pre-signed URL from server side either directly while landing on the page or via AJAX. Preferred method is do a AJAX to server side with the param (filename) and in the server generate a pre-signed url using file name and time-stamp. 

JAVASCRIPT (Trigger a PUT call to AWS S3 using pre-signed url)

$.ajax( {
    url: url, //presinged-url which you get from server side
    type: 'PUT',
    data: file,
    processData: false,
    contentType: false,
    headers: {'Content-Type': 'multipart/form-data'},
    success: function(){
        console.log('Image successfully uploaded. Now the object (image/pdf/text/whatever-it-is now can be downloaded using public url received from server side');
    error: function(){
        console.log('Something went wrong');

ADD CORS ON AWS S3 (do this only for a particular bucket, avoid doing it globally)


Active admin resolve kaminari and will paginate gem conflict issue

Add config/initializers/kaminari.rb

Kaminari.configure do |config|
config.page_method_name = :per_page_kaminari

Add config/initializers/will_paginate.rb

if defined?(WillPaginate)
ActiveSupport.on_load :active_record do
module WillPaginate
module ActiveRecord
module RelationMethods
def per(value = nil) per_page(value) end
def total_count() count end
module CollectionMethods
alias_method :num_pages, :total_pages

Pagination example on active admin

controller do
def index
index! do |format|[:page])


Bootstrap – Images

<!DOCTYPE html>
<html lang=”en”>
<title>Bootstrap Example</title>
<meta charset=”utf-8″>
<meta name=”viewport” content=”width=device-width, initial-scale=1″>
<link rel=”stylesheet” href=””&gt;
<script src=””></script&gt;
<script src=””></script&gt;

<div class=”container”>
<h2>Rounded Corners</h2>
<p>The .img-rounded class adds rounded corners to an image (not available in IE8):</p>
<img src=”cinqueterre.jpg” class=”img-rounded” alt=”Cinque Terre” width=”304″ height=”236″>

<div class=”container”>
<p>The .img-circle class shapes the image to a circle (not available in IE8):</p>
<img src=”cinqueterre.jpg” class=”img-circle” alt=”Cinque Terre” width=”304″ height=”236″>

<div class=”container”>
<p>The .img-thumbnail class creates a thumbnail of the image:</p>
<img src=”cinqueterre.jpg” class=”img-thumbnail” alt=”Cinque Terre” width=”304″ height=”236″>
<div class=”container”>
<p>The .img-responsive class makes the image scale nicely to the parent element (resize the browser window to see the effect):</p>
<img src=”cinqueterre.jpg” class=”img-responsive” alt=”Cinque Terre” width=”304″ height=”236″>
<div class=”container”>
<h2>Responsive Embed</h2>
<div class=”embed-responsive embed-responsive-16by9″>
< iframe class=”embed-responsive-item” src=”  “> </iframe>