Wednesday, January 18, 2017

Automate And Enhance Your Workflow With Gulp Part 1

Gulp is a streaming build system, by using node's streams file manipulation is all done in memory, and a file isn’t written until you tell it to do so. In short, Gulp is a task runner which uses Node.js.

Much like Grunt, Gulp is a javascript task runner. Gulp however prefers code over configuration. Being that your tasks are written in code, gulp feels more like a build framework, giving you the tools to create tasks that fit your specific needs.

Enough theory — let's start using Gulp.

Step 1: Installing Node.js
You need to have Node.js (Node) installed onto your computer before you can install Gulp. Node.js can be downloaded for Windows, Mac and Linux at nodejs.org/download/. Once your download completes, run that application and you should be all ready to go.

Once installed, open a command prompt and enter:
node -v
Again, this should return the version number on the next line. Now, let's do the same for npm.
npm -v
Again, this should return the version number on the next line. If you didn't get a response, then it may mean that Node didn’t install correctly or you may need to restart your command line application.

Step 2: Installing Gulp
Now, let's meet npm and install Gulp. npm is a package manager for Node that will enable you to install additional modules for use in your projects from the command line.

We can now install Gulp using npm, jump back to your command-line application and type:
$ npm install -g gulp
The npm install command we've used here is a command that uses Node Package Manager (npm) to install Gulp onto your computer. We'have add a -g flag to ensure Gulp is available globally for any project.

Verify that Gulp has installed the following command:
gulp -v
Like before, this should return the version number on the next line of your command-line.

Step 3: Navigate To Your Project Directory And Install Gulp Locally
Now that we have met our command-line interface and know how to communicate with it, our next step will be navigating to your project directory. This will likely be different for each person, but as an example this is what I would type to navigate to my local project:
Anup:~ anup$ cd /Applications/MAMP/htdocs/my-project
Once you have made it to your project directory - let's run a quick npm command to initialize our package.json file.
Anup:my-project anup$ npm init
This will prompt us to answer a few questions about our project. Once completed, it will create a file in the root directory of the project called package.json which will provide information about the project and its dependencies as shown in figure below:.


Once the package.json file is created, we can install Gulp locally into the project by using the following command:
Anup:my-project anup$ npm install gulp --save-dev
We've added --save-dev, which tells the computer to add gulp as a dev dependency in package.json as shown below.


If you check the project folder when the command has finished executing, you should see that Gulp has created a node_modules folder. You should also see a gulp folder within node_modules as shown below.


We're almost ready to start working with Gulp. Before we do so, we have to be clear on how we're going to use Gulp for the project, and part of that is deciding on a directory structure.

Next tutorial(Part 2), we will go through Directory Structure for the project and write the first GULP task.

Reference: https://css-tricks.com/gulp-for-beginners/
Automate Your Tasks Easily with Gulp.js
Getting Started with Gulp

Wednesday, November 2, 2016

How to Fix Dashed Border Not Showing Problem In Firefox?

The following code to generate dotted border will not work in Firefox browser.
  <table border="0" cellpadding="0" cellspacing="0">
  <tr>
   <td width="35"style="width:35px;"> </td>

   <td width="530" align="center" style="width:530px;border-bottom: 1px dotted #7f7f7f"> </td>

    <td width="35" style="width:35px;"> </td>
   </tr>
</table>
To make it work on firefox, you can simply add the following piece of css code.
<style type="text/css">
 table {border-collapse: separate; border-spacing: 0;}
</style>
It will work now.

Monday, September 19, 2016

Tools using for my current project

Tools I am using for my current project
•  React - https://facebook.github.io/react/: A Javascript library for building user interfaces
•  Cerebral - http://www.cerebraljs.com/ : A state controller with its own debugger
•  GraphQL - http://graphql.org/ : A query language for your API
•  TypeScript - https://www.typescriptlang.org/: JavaScript that scales.
•  EventStore - https://geteventstore.com/: open-source, functional database with Complex Event Processing in JavaScript
•  ECMAScript 2016 (ES2016): New version of Javascript
•  Webpack - https://webpack.github.io/: Module bundler
•  node.js - https://nodejs.org/ : JavaScript runtime built on Chrome's V8 JavaScript engine.

Tools using for my current project

Tools using for my current project
•  React - https://facebook.github.io/react/: A Javascript library for building user interfaces
•  Cerebral - http://www.cerebraljs.com/ : A state controller with its own debugger
•  GraphQL - http://graphql.org/ : A query language for your API
•  TypeScript - https://www.typescriptlang.org/: JavaScript that scales.
•  EventStore - https://geteventstore.com/: open-source, functional database with Complex Event Processing in JavaScript
•  ECMAScript 2016 (ES2016): New version of Javascript
•  Webpack - https://webpack.github.io/: Module bundler
•  node.js - https://nodejs.org/ : JavaScript runtime built on Chrome's V8 JavaScript engine.

Javascript Array Methods: Unshift(), Shift(), Push(), And Pop()

push() and pop() methods - work at the end of the array, where the index is largest.
unshift() and shift() - work on the beginning of the array, where the index is smallest.

Note: Unshift() and shift() are basically the same as push() and pop(), only, at the other end of the array.

Javascript Array: Push() Method
The push() method can append one or more elements to the end of an array. This alters the array on which the method was called.
// Build an array of test data.
var data = [ "X" ];

// Push data onto the array.
data.push( "A" );

/* Note that it can take more than one argument, each of which is individually appended to the array.
 In the output, notice that when push() takes multiple arguments  they are appended in a left-to-right order (mimicking their
appearance in the arguments list). */
data.push( "B", "C" );

// Output resultant array.
console.log( data );
When we run the above code, we get the following console output:
["X", "A", "B", "C"]
Javascript Array: Pop() Method
The pop() method pulls the last element off of the given array and returns it. This alters the array on which the method was called. If you call pop() on an empty array, it returns an undefined value.
// Build an array of test data.
var data = [ "A", "B", "C" ];

// Pop the element off of the end of the array.
console.log( data.pop() );
console.log( data );
When we run the above code, we get the following console output:
C
["A", "B"]
Javascript Array: Unshift() Method
The unshift() method is like the push() method, only it works at the beginning of the array. The unshift() method can prepend one or more elements to the beginning of an array. This alters the array on which the method was called.
// Build an array of test data.
var data = [ "X" ];

// Unshift data onto the array. 
data.unshift( "A" );

/* Note that it can take more than one argument. In the output, notice that when unshift() takes multiple arguments, they are prepended in a right-to-left order (mimicking their appearance in the arguments list). */
data.unshift( "B", "C" );

// Output resultant array.
console.log( data );
When we run the above code, we get the following console output:
["B", "C", "A", "X"]
Javascript Array: Shift() Method
The shift() method is like the pop() method, only it works at the beginning of the array. The shift() method pulls the first element off of the given array and returns it. This alters the array on which the method was called. If you call shift() on an empty array, it returns an undefined value.
// Build an array of test data.
var data = [ "A", "B", "C" ];

// Shift the element off of the beginning of the array.
console.log( data.shift() );
console.log( data );
When we run the above code, we get the following console output:
A
["B", "C"]

It used to be difficult for me to always keep it straight in my head which end of the array push() and pop() operated on (especially when reading unfamiliar code). But, now that I realize that unshift() and shift() are the same as push() and pop() only at the opposite end of the array, it certainly helps keep a certain mental order. I hope that this helps others at it has helped me.

Source: http://www.bennadel.com/blog/1796-javascript-array-methods-unshift-shift-push-and-pop.htm