Taking screenshots of webpages using Ruby

Bookmark and Share

Recently we have been working on taking screenshots for web page while generating reports based on that website. During this endeavor, we came across some tools to achieve that. We are sharing the information we gathered here.

The tools that we will discuss for screencapture, in  Ruby,  are:

  • PhantomJS
  • Screencap gem
  • Webshot gem

Screencap and webshot are gems in Ruby that depends on a tool called PhantomJS. It is basically a web browser without a user interface, primarily used for testing websites. Such type of browsers are generally referred to as headless browsers,

Screenshots with PhantomJS

PhantomJS is quite easy to install and is multiplatform, available on major operating systems.

To start, our script must require a reference to the webpage module then use it to create an instance:

Use the instance.open() method and pass it the arguments, the url of the webpage that we want to capture screenshot.

instance.render() method captures the screenshot and saves it to the file specified in the argument.
Run the script as,

Screenshot is saved in the  directory where we run the script.

Now what we have above is all JavaScript, but to use the phantom JS in our rails application we have gems that provide us with an easy interface to acheive the …

Read More
Flux example Application with React JS

Flux example Application with React JS

Bookmark and Share

Flux is an application architecture used to build scalable and powerful JavaScript web application with React JS. React JS is a popular view library and we have already covered React JS. Flux is not a framework like Angular JS, Backbone etc., there are a lot of differences between these frameworks with Flux. Flux only supports unidirectional data flow, where Angular and Backbone supports bi-directional data flow. Unidirectional data flow prevents unexpected data flows, so it is more predictable.

Flux has three main parts.

  • Action
  • Dispatcher
  • Store
  • As their name indicates, Action is the result of some events, like JavaScript events, or callbacks for Ajax calls. Dispatcher, is a connector or link between Action and Store. The dispatcher is a central hub, from where everything passes through and we only need one dispatcher per application. Dispatcher handles all Actions and Stores.
    Store is very important in Flux architecture, we can write our business logics or Ajax calls to fetch data’s. I usually use it to store to get some initial data’s or to send or receive data via Ajax calls. The store uses event emitter similar to nodejs’s event emitter. We can define events in Store, and these events are …

    Read More
    React Example Application

    React Example Application

    Bookmark and Share

    This article is continuation of my React series, On the first article we went through react basics and some react syntax, now i want to demonstrate a sample application with es6 syntax. ES6 is the future of javascript, so we use ES6 in our projects. Complete code is available on github, you can use below links.

    Example Application

    React – Rails Store Example Application


    React Rails Tutorial

    React Rails Store Application

    Before we start, we must familiarize with gulp and some gulp tasks. Gulp is a frontend tool to automate our tasks like sass/scss to css, coffeescript to javascript, minimization etc.. In this project we use babelify, it help us to write code in ES6, In ES6 mode, we can use import statement, classes in javascript, and double arrow functions.

    We use ES6, so we can use class, import and =>

    Now we can start our code, It is actually a ruby on rails project. Our files are inside javascript/react folder, we use main.js file where we import all other javascript modules, which again convert …

    Read More

    3 Most useful Jquery Slider/Carousel plugins

    Bookmark and Share

    Why should we we use Javascript in our application?, HTML and CSS is enough to make websites. In this article i like to familiarize 3 jquery slider plugins. Why should i use Javascript, In my view Javascript is a beautiful client side language to manipulate DOM in different ways, which is merely impossible using our CSS. Lets assume i have 20 images in my website, I can either show this all 20 as thumbnails, but how can i show its in big resolution or i can show all images in its maximum resolution but this will increase page length. We can use jQuery sliders to solve this problem, We will have navigation buttons or thumbnails to see different images without consuming too much space.

    I have used many slider/carousel plugins, 3 of them are best for me, they are free and easy to use.

    1) Slick Slider

    Most popular and free  jQuery slider with lots of functions and callbacks. This will be the first choice for all frontend developers when they need some slider functions.

    Slick Slider

    Slick Carousel – most used jquery …

    Read More
    React JS for modern web applications

    React JS for modern web applications

    Bookmark and Share

    React JS is a JavaScript Framework which indent to make large, single page scalable applications. It is not like Angular or backbone or other JavaScript framework. React JS is only deals with view and not with model and controller. React JS is also compatible with backbone, so we can use backbone, React JS combination to get full MVC framework. React is intended to help developers build large applications that use data that change over time. Its goal is to be simple, declarative and composable.

    Why React JS

    Before answering this question, I want to tell its history, this will give slight idea ‘Why React”, React JS is created by Facebook, it is an open source project maintained by Facebook and 100+ other contributors. React JS is used in Facebook and popular photo sharing website Instagram. React JS is a User Interface library.

    React use Virtual DOM instead of Real DOM, This help us to create more Fast and Scalable web applications. One of the main attractions is, React JS is reusable components, HTML elements are reusable components in React, and we can use same for other places. Another features are high speed Virtual DOM, Browser independent …

    Read More