Gulp


Bookmark and Share

Gulp is a toolkit for automating painful or time-consuming tasks in your development workflow, so you can stop messing around and build something. You can compile sass files, uglify and compress js files and much more.

Installation

Make sure that you’ve installed Node and npm before attempting to install gulp.

Install the gulp command

Make sure that you have your package.json created by manually creating it or typing npm init.

Run this command in your project directory:

Create a gulpfile

In your project directory, create a file named gulpfile.js in your project root with these contents:

The first step to using Gulp is to require it in the gulpfile. Then you can begin to write a gulp task with this gulp variable. task-name refers to the name of the task, which would be used whenever you want to run a task in Gulp. You can also run the same task in the command line by writing gulp task-name.

Run the gulp command in your project directory:

To run multiple tasks, you can use gulp <task> <othertask>

Gulp tasks are usually a bit more complex than this. It usually contains two additional Gulp methods, plus a variety of Gulp plugins.

gulp.src tells the Gulp task what files to use for the task, while gulp.desttells Gulp where to output the files once the task is …

Read More

Getting started with Angular 4


Bookmark and Share

Angular is a most popular platform for building applications with the web. Angular empowers developers to build applications that live on the web, mobile, or the desktop. The AngularCLI is a command line interface tool that can create a project, add files, and perform a variety of ongoing development tasks such as testing, bundling, and deployment.

As compared to the older versions of Angular, there are many new things added to the list. Not only new features but also some twists are there that enhance old features. Forget Angular 3, Google jumps straight to Angular 4 after Angular 2. Angular4 applications are much faster and less space consuming.  Angular4 is compatible with TypeScript’s newer versions 2.1 and 2.2. Components are the basic building blocks of your application. Every component has an associated template, style sheet, and a class with logic.

Prerequisites

1. NodeJS ( 6.x.x or greater )

2. npm (3.x.x or greater )

Installation

1. You have to install AngularCLI globally.

2. Create a new project.

3. To serve the application, get into the project repo and run :

For launching our server and for rebuilding our app …

Read More

Event Listeners in VueJS


Bookmark and Share

Vue.js is a Javascript framework for user interface. There are many directives in Vuejs. A directive’s job is to reactively apply special behavior to the DOM when the value of its expression changes. You can use the v-on directive to bind event listeners to DOM events.

We are binding a click event listener to a method named clickMe. Here’s how to define that method in our Vue instance. Here we have a counter variable initialized to zero. Inside the method, we are incrementing the value of the counter. So for each click on the button, the method is invoked. You will get the code here.

Here in this example, we are using two button and methods. One for incrementing the count and other for decrementing. You can see code here.

Note :-

For example,

This will give same result as before.

We can see another example. Here we have an input field where we type the url which is bound to the Js using v-model.  We have a button with click event listener which is bound to the method humanizeUrl. We have two urls, url and cleanUrl. url  is what we type in the input field and …

Read More

Two way binding in Vue.js


Bookmark and Share

Vue.js is a JavaScript framework getting popular considering its simplicity praised a lot these days. There are a lot of JavaScript frameworks among which React and Angular are popular among web developers. Vue.js is much flexible and less opinionated framework than Angular. It’s similar to React but much simpler. Vue.js supports Two-way binding. That is it keeps your data in sync with your DOM without you having to do anything. Two-way binding in Vue.js is MVVM pattern. That is Model View View Model. Like MVC, Model is the data object and view is what is displayed up. The Model can tie to the View and the View can tie back to Model.

In one way binding, JS variable is bound to the DOM.

Here when you change the data in JS, it will also update in the DOM. So you will get the updated message on the page. You can get the basic code here.

But in two way binding, Js variable can be bound to the DOM and data is also bound from the DOM back to JS.

Now, if you type anything into your input, your JS variable is updated with the change, which in turn updates your span. You can …

Read More

Integrating Elm with Rails


Bookmark and Share

 

Front-end languages and frameworks are changing significantly over years. The trend is towards light-weight, modular architecture. Functional programming has influenced JavaScript and its frameworks a lot. For beautiful single page web applications, Elm is a framework that can be chosen. It gets compiled to efficient JavaScript code. But when to use Elm instead of JavaScript?  If you are building complicated single page applications Elm can do better.

Elm is a functional programming language created by Evan Czaplicki in 2012 for building reliable Web Applications. Elm is simple to use and offers much quality. Its architecture is a simple pattern for building web apps, that help you to add features quickly. Also, we can use Elm in existing projects as it can be used along with already written JavaScript code.

Why Elm?

Switching to functional programming languages makes it a better environment for multi-threaded applications. For example, immutability is a powerful functional concept that JavaScript lacks. But in Elm, once created value cannot be changed, thus making a thread-safe environment. Each thread need not worry about other threads when they act on data since these data are represented by immutable objects in Elm.

While in other languages it’s hard …

Read More

Getting Started with Vue.js


Bookmark and Share

 

Vue.js

What is Vue.js?

Vue.js is yet another JavaScript framework getting popular considering its simplicity praised a lot these days. There are a lot of JavaScript frameworks among which React and Angular are popular among web developers. Vue.js pronounced as “view.js”  is a much flexible and less opinionated framework than Angular. It’s similar to React but much simpler.

Vue.js gives you more freedom in designing your app, unlike Angular. So that you are not forced to do everything in their way. It can be adapted very easily to your existing application. You don’t need to know JSX, unlike React. All you have to do is to drop the link into your HTML page header and you are up and ready.

Overview

This is the basic folder structure.

– index.html

This is the main HTML template for your application. You can link your static assets inside the head tag while your processed assets will be auto injected in the body.

– src/router/index.js

This is the file which initiates vue-router with the given …

Read More

Make unit tests great again – Integrate Jasmine into Rails


Bookmark and Share

Jasmine is a framework to write tests for the Javascript code in the Behaviour Driven Development (BDD) style. In this article, you will learn how to integrate Jasmine into your existing rails application and how to write clean and beautiful unit tests. Let us make tests great again!

 

Install Jasmine

To make Jasmine available to your Rails app, you just have to place the jasmine-gem (link) in your Gemfile. That will do the magic. Just make sure you have it under Development and Test group in the Gemfile as follows:

Then run this to install the gem:

After all the gems are installed, run this code to generate necessary files for Jasmine to run:

This will create the jasmine helper file and the yml file where you configure how it should run the tests.

Run tests

You can use Jasmine right after it’s installed. It can be run in several ways, the most important ones being,

  • In your browser
  • Continuous Integration Mode (CI)
  • The CI mode is usually used when you have to integrate it into your build system.

    Browser Mode

    You have to start the Jasmine server to run it in a browser. This server runs all the tests and serves the results to a webpage. …

    Read More

    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