Hello, Welcome to VipTechWorld!

Here I write articles about technology, hacking and other things that I find interesting....


Following are some of the Advantages of subscribing my newsletter:-

  • Latest and Informative articles direct in your inbox.
  • Chance to win prizes I frequently share in giveaways.
  • Make your dream of becoming a Hacker come true with this awesome Ebook for FREE. (Contact me for ebook.)
  • NEWGet the ebook on How to run Android apps on Chrome Browser for FREE. (Contact me for ebook.)

14 May 2017

// // Leave a Comment

Gulp Quick Guide By VipTechWorld


Hello and Welcome to this quick Gulp.js guide. This guide can be used in many ways. You can start reading it from top to bottom or you can just choose the topic you want to learn and see that topic. So let's start...



Gulp - Overview


What is Gulp?

Gulp is a task runner that uses Node.js as a platform. Gulp purely uses the JavaScript code and helps to run front-end tasks and large-scale web applications. It builds system automated tasks like CSS and HTML minification, concatenating library files, and compiling the SASS files. These tasks can be run using Shell or Bash scripts on the command line.

Why to use Gulp?

  • It is shorter, simpler and faster as compared to other task runner.
  • Uses SASS and LESS as CSS preprocessor.
  • Automatically refreshes page after editing the source files.
  • Easy to understand and build the Gulpfile.js because, it uses pure JavaScript code to build the task.

History

All the documentation of Gulp is covered by the CC0 license. Initially, Gulp v1.0.0 was released on January 15, 2015.

Features

  • Provides minification and concatenation.
  • Uses pure JavaScript code.
  • Converts LESS or SASS to CSS compilation.
  • Manages file manipulation in the memory and enhances speed by using the Node.js platform.


Gulp - Installation

This article provides a step-by-step procedure of Gulp installation.

System Requirements for Gulp

  • Operating System − Cross-platform
  • Browser Support − IE (Internet Explorer 8+), Firefox, Google Chrome, Safari, Opera

Installation of Gulp


Step 1 − We need Node.js to run Gulp examples.

To download Node.js, open the https://nodejs.org/en/, you will see a screen as shown below −
gulp-installation
Download the latest features version of the zip file.

Step 2 − Next, run the setup to install the NodeJs on your computer.

Step 3 − You need to set environment variables.

Path User Variable
  • Right-click on My Computer.
  • Select Properties.
  • Select Advanced tab and click ‘Environment Variables’.
  • gulp-installation
  • Under Environment Variables window, double-click on the PATH as shown in the following screen.
  • gulp-installation
  • You will get an Edit User Variable window as shown in the following screenshot. Add Node.js folder path in the Variable Value field as:
  • C:\Program Files\nodejs\node_modules\npm
    
    If the path is set already for other files, then you need to put a semicolon (;) after that and add the Node.js path as shown in the following screenshot. gulp-installation At the end, click the ‘Ok’ button.
System Variable
  • Under System variables, double-click on Path as shown in the following screen.
  • gulp-installation
  • You will get an Edit System Variable window as shown in the following screenshot. Add Node.js folder path in the Variable Value field as C:\Program Files\nodejs\ and click ‘Ok’ as shown in the following screenshot.
gulp-installation
Step 4 − Open the command prompt in your system and enter the following command. It will display the installed Node.js version.
node -v
gulp-installation
Step 5 − In the command prompt, enter the following command to display the version of npm (Node.js package manager) which is used to install modules. It will display the installed Node.js version.
npm -v
gulp-installation
Step 6 − In the command prompt, enter the following command to install Gulp. Adding “-g” flag ensures that the Gulp is globally available for any project.
npm install gulp -g
gulp-installation
Step 7 − To verify that Gulp has been installed successfully, enter the following command to display the Gulp version.
gulp -v
gulp-installation

Gulp - Basics

In this section, you will get acquainted with some basics related to Gulp.

What is a Build System?

A Build System is referred to as collection of tasks (collectively called as task runners), which automate the repetitive work.

Following is a list of some of the tasks that can be handled using the build system −
  • Compilation of preprocess CSS and JavaScript.
  • Minification of files to reduce its size.
  • Concatenation of files into one.
  • Triggering the server for automatic reloading.
  • Creation of deployment builds to store the resulting files in one location.
In modern front-end workflow, the build system works with 3 components −
  1. Package managers
  2. Preprocessors
  3. Task runners and build tools

Package Managers

It is used to automate the installation upgrade, removal of required dependencies, clean libraries, and packages used in the development environment. Example for package managers are bower and npm.

Preprocessors

Preprocessors are very useful for an efficient modern workflow by adding an optimized syntax and additional features that compiles into its native language.

Some of the popular preprocessors are −
  • CSS − SASS, LESS and Stylus.
  • JS − CoffeeScript, LiveScript, TypeScript, etc.
  • HTML − Markdown, HAML, Slim, Jade, etc.

Task Runners

Task runners automate tasks like SASS to CSS conversion, minify the files, optimize images, and many other tasks used in the development workflow. Gulp is one of the task runner in the modern front-end work environment and it runs on Node.

Setting Up Your Project

To set your project in your computer, create a folder called “work” for example. The work folder contains following sub-folders and files −
  • Src − Location of pre-processed HTML source files and folders.
    • Images − Contains images which are uncompressed.
    • Scripts − Contains multiple pre-processed script files.
    • Styles − Contains multiple pre-processed CSS files.
  • Build − This folder will be created automatically which contains the production files.
    • Images − Contains compressed images.
    • Scripts − Single script file that contains minified codes.
    • Styles − Single CSS file that contains minified codes.
  • gulpfile.js − It is the configuration file, which is used to define our tasks.

Gulp - Developing An Application

In the previous sections, you have studied about Gulp installation and Gulp basics which includes build system of Gulp, package manager, task runner, structure of Gulp, etc.

In this section, we will see the basics for developing an application, which includes the following −
  • Declaring required dependencies
  • Creating task for the dependencies
  • Running the task
  • Watching the task
  • Dependencies Declaration

When you are installing plugins for the application, you need to specify dependencies for the plugins. The dependencies are handled by the package manager such as bower and npm.

Let's take one plugin called gulp-imagemin to define dependencies for it in the configuration file. This plugin can be used to compress the image file and can be installed using the following command line −
npm install gulp-imagemin --save-dev
You can add dependencies to your configuration file as shown in the following code.
var imagemin = require('gulp-imagemin');
The above line includes the plug-in and it is included as an object named imagemin.

Creating Task for Dependencies

Task enables a modular approach for configuring Gulp. We need to create a task for each dependency, which we would add up as we find and install other plugins. The Gulp task will have the following structure −
gulp.task('task-name', function() {
   //do stuff here
});
Where ‘task-name’ is a string name and ‘function()’ performs your task. The ‘gulp.task’ registers the function as a task within name and specifies the dependencies on other tasks.

You can create the task for the above defined dependency as shown in the following code.
gulp.task('imagemin', function() {
   var img_src = 'src/images/**/*', img_dest = 'build/images';

   gulp.src(img_src)
   .pipe(changed(img_dest))
   .pipe(imagemin())
   .pipe(gulp.dest(img_dest));
});
The images are located in src/images/**/* which is saved in the img_srcobject. It is piped to other function created by the imagemin constructor. It compresses the images from src folder and copied to build folder by calling dest method with an argument, which represents the target directory.

Running the Task

Gulp file is set up and ready to execute. Use the following command in your project directory to run the task −
gulp imagemin
On running the task using the above command, you will see the following result in the command prompt −
C:\work>gulp imagemin
[16:59:09] Using gulpfile C:\work\gulpfile.js
[16:59:09] Starting 'imagemin'...
[16:59:09] Finished 'imagemin' after 19 ms
[16:59:09] gulp-imagemin: Minified 2 images (saved 80.81 kB - 16.9%)

Gulp - Combining Tasks

Task enables a modular approach to configure Gulp. We need to create task for each dependency, which we would add up as we find and install other plugins. The Gulp task will have following structure −
gulp.task('task-name', function() {
   //do stuff here
});
Where “task-name” is a string name and “function()” performs your task. The “gulp.task” registers the function as a task within the name and specifies the dependencies on other tasks.

Installing Plugins

Let's take one plugin called minify-css to merge and minify all CSS scripts. It can be installed by using npm as shown in the following command −
npm install gulp-minify-css --save-dev
To work with “gulp-minify-css plugin”, you need to install another plugin called “gulp-autoprefixer” as shown in the following command −
npm install gulp-autoprefixer --save-dev
To concatenate the CSS files, install the gulp-concat as shown in the following command −
npm install gulp-concat --save-dev
After installation of plugins, you need to write dependencies in your configuration file as follows −
var autoprefix = require('gulp-autoprefixer');
var minifyCSS = require('gulp-minify-css');
var concat = require('gulp-concat');

Adding Task to Gulp file

We need to create task for each dependency, which we would add up as we install the plugins. The Gulp task will have following structure −
gulp.task('styles', function() {
   gulp.src(['src/styles/*.css'])
   .pipe(concat('styles.css'))
   .pipe(autoprefix('last 2 versions'))
   .pipe(minifyCSS())
   .pipe(gulp.dest('build/styles/'));
});
The ‘concat’ plugin concatenates the CSS files and ‘autoprefix’ plugin indicates the current and the previous versions of all browsers. It minifies all CSS scripts from src folder and copies to the build folder by calling ‘dest’ method with an argument, which represents the target directory.

To run the task, use the following command in your project directory −
gulp styles
Similarly, we will use another plugin called ‘gulp-imagemin’ to compress the image file, which can be installed using the following command −
npm install gulp-imagemin --save-dev
You can add dependencies to your configuration file using the following command −
var imagemin = require('gulp-imagemin');
You can create the task for above defined dependency as shown in the following code.
gulp.task('imagemin', function() {
   var img_src = 'src/images/**/*', img_dest = 'build/images';
   
   gulp.src(img_src)
   .pipe(changed(img_dest))
   .pipe(imagemin())
   .pipe(gulp.dest(img_dest));
});
The images are located in “src/images/**/*” which are saved in the img_srcobject. It is piped to other functions created by the ‘imagemin’ constructor. It compresses the images from src folder and copies to the build folder by calling ‘dest’ method with an argument, which represents the target directory.

To run the task, use the following command in your project directory −
gulp imagemin

Combining Multiple Tasks

You can run multiple tasks at a time by creating default task in the configuration file as shown in the following code −
gulp.task('default', ['imagemin', 'styles'], function() {

});
Gulp file is set up and ready to execute. Run the following command in your project directory to run the above combined tasks −
gulp
On running the task using the above command, you will get the following result in the command prompt −
C:\work>gulp
[16:08:51] Using gulpfile C:\work\gulpfile.js
[16:08:51] Starting 'imagemin'...
[16:08:51] Finished 'imagemin' after 20 ms
[16:08:51] Starting 'styles'...
[16:08:51] Finished 'styles' after 13 ms
[16:08:51] Starting 'default'...
[16:08:51] Finished 'default' after 6.13 ms
[16:08:51] gulp-imagemin: Minified 0 images

Gulp - Watch

The Watch method is used to monitor your source files. When any changes to the source file is made, the watch will run an appropriate task. You can use the ‘default’ task to watch for changes to HTML, CSS, and JavaScript files.

Update Default Task

In the previous section you have learnt how to gulp combining tasks using default task. We used gulp-minify-css, gulp-autoprefixer and gulp-concatplugins, and created styles task to minify CSS files.

To watch CSS file, we need to update the ‘default’ task as shown in the following code:
gulp.task('default', ['styles'], function() {
   // watch for CSS changes
   gulp.watch('src/styles/*.css', function() {
      // run styles upon changes
      gulp.run('styles');
   });
});
All the CSS files under work/src/styles/ folder will be watched and upon changes made to these files, the styles task will be executed.

Run Default Task
Run the ‘default’ task using the following command.
gulp
After executing the above command, you will receive the following output.
C:\work>gulp
[17:11:28] Using gulpfile C:\work\gulpfile.js
[17:11:28] Starting 'styles'...
[17:11:28] Finished 'styles' after 22 ms
[17:11:28] Starting 'default'...
[17:11:28] Finished 'default' after 21 ms
Whenever any changes are made to CSS files, you will receive the following output.
C:\work>gulp
[17:11:28] Using gulpfile C:\work\gulpfile.js
[17:11:28] Starting 'styles'...
[17:11:28] Finished 'styles' after 22 ms
[17:11:28] Starting 'default'...
[17:11:28] Finished 'default' after 21 ms
gulp.run() has been deprecated. Use task dependencies or gulp.watch task 
   triggering instead.
[17:18:46] Starting 'styles'...
[17:18:46] Finished 'styles' after 5.1 ms
The Watch process will remain active and respond to your changes. You can press Ctrl+Cto terminate the monitoring process and return to the command line.

Gulp - Live Reload

Live Reload specifies the changes in the file system. BrowserSync is used to watch all HTML and CSS files in the CSS directory and perform live reload to the page in all browsers, whenever files are changed. BrowserSync makes the workflow faster by synchronizing URLs, interactions, and code changes across multiple devices.

Installing BrowserSync Plugin

The BrowserSync plugin provides cross-browser CSS injection and can be installed using the following command.
npm install browser-sync --save-dev
Configuring BrowserSync Plugin
To use BrowserSync plugin, you need to write dependency in your configuration file as shown in the following command.
var browserSync = require('browser-sync').create();
You need to create task for BrowserSync to work with server using Gulp. Since you are running server, so you need to tel BrowserSync about the root of your server. Here, we are using base directory as 'build'.
gulp.task('browserSync', function() {
   browserSync.init({
      server: {
         baseDir: 'build'
      },
   })
})
You can also inject new styles into the browser using the following task for CSS file.
gulp.task('styles', function() {
   
   gulp.src(['src/styles/*.css'])
   .pipe(concat('style.css'))
   .pipe(autoprefix('last 2 versions'))
   .pipe(minifyCSS())
   .pipe(gulp.dest('build/styles/'))
   .pipe(browserSync.reload({
      stream: true
   }))
});
Before creating task for BrowserSync, you need to install the plugins using package manager and write dependencies in your configuration file as defined in this section.

When you are done with the configuration, run both BrowserSync and watchTask for the occurrence of live reloading effect. Instead of running two command lines separately, we will run them together by adding browserSynctask along with the watchTask as shown in the following code.
gulp.task('default', ['browserSync', 'styles'], function (){
   gulp.watch('src/styles/*.css', ['styles']);
});   
Run the following command in your project directory to execute the above combined tasks.
gulp
After running the task using the above command, you will get the following result in the command prompt.
C:\project>gulp
[13:01:39] Using gulpfile C:\project\gulpfile.js
[13:01:39] Starting 'browserSync'...
[13:01:39] Finished 'browserSync' after 20 ms
[13:01:39] Starting 'styles'...
[13:01:39] Finished 'styles' after 21 ms
[13:01:39] Starting 'default'...
[13:01:39] Finished 'default' after 15 ms
[BS] 1 file changed (style.css)
[BS] Access URLs:
 ------------------------------------
       Local: http://localhost:3000
    External: http://192.168.1.4:3000
 ------------------------------------
          UI: http://localhost:3001
 UI External: http://192.168.1.4:3001
 ------------------------------------
[BS] Serving files from: build
It will open the browser window with the URL http://localhost:3000/. Any changes made to the CSS file will reflect in the command prompt and browser reloads automatically with the changed styles.

Gulp - Optimizing CSS and JavaScript

In this section, you will learn how to optimize CSS and JavaScript. Optimizing is required to remove unnecessary data (for e.g. spaces and unused characters) from the source files. It reduces the size of the files and allows them to load faster


Install Plugins to Optimize CSS and JavaScript
Go to “work” directory from your command line and install “gulp-uglify”, “gulp-minify-css” and “gulp-concat” plugins by using the following command −
npm install gulp-uglify gulp-minify-css gulp-concat

Declare Dependencies and Create Tasks
In your configuration file gulpfile.js, first declare the dependencies as shown in the following code.
var gulp = require('gulp');
var concat = require('gulp-concat');
var uglify = require('gulp-uglify');
var minify = require('gulp-minify-css');
Next, you need to create tasks for optimizing CSS and JavaScript as shown in the following code.
gulp.task('js', function(){
   gulp.src('src/scripts/*.js')
   .pipe(concat('script.js'))
   .pipe(uglify())
   .pipe(gulp.dest('build/scripts/'));
});

gulp.task('css', function(){
   gulp.src('src/styles/*.css')
   .pipe(concat('styles.css'))
   .pipe(minify())
   .pipe(gulp.dest('build/styles/'));
});

gulp.task('default',['js','css'],function(){
});
The js task will accepts .js files from src/scripts/ folder. It concatenates and uglifies the js files, then produces build/scripts/script.js file.

The CSS task will accept .css files from src/styles/ folder. It concatenates and minifies CSS files, then produces build/styles/styles.css file.

Run the Tasks
The configuration file is set up and ready to execute. Use the following command to run the task.
gulp
On running the task using the above command, you will receive the following result in the command prompt.
C:\work>gulp
[13:16:34] Using gulpfile C:\work\gulpfile.js
[13:16:34] Starting 'js'...
[13:16:34] Finished 'js' after 24 ms
[13:16:34] Starting 'css'...
[13:16:34] Finished 'css' after 6.05 ms
[13:16:34] Starting 'default'...
[13:16:34] Finished 'default' after 5.04 μs

Gulp - Optimizing Images

In this section, you will learn how to optimize images. Optimizing will reduce the size of the images and assist in faster loading.

Install Plugins to Optimize Images
Go to “work” directory from your command line and install “gulp-changed” and “gulp-imagemin” plugins by using the following commands.
npm install gulp-changed --save-dev
npm install gulp-imagemin --save-dev
Declare Dependencies and Create Tasks
In your configuration file gulpfile.js, first declare the dependencies as shown in the following command.
var gulp = require('gulp');
var changed = require('gulp-changed');
var imagemin = require('gulp-imagemin');
Next, you need to create tasks for optimizing images as shown in the following code.
gulp.task('imagemin', function() {
   var imgSrc = 'src/images/*.+(png|jpg|gif)',
   imgDst = 'build/images';
   
   gulp.src(imgSrc)
   .pipe(changed(imgDst))
   .pipe(imagemin())
   .pipe(gulp.dest(imgDst));
});

gulp.task('default',['imagemin'],function(){
});
The imagemin task will accept png, jpg and gif images from src/images/ folder and minify them before writing it into the destination. The changed() ensures that only the new files are passed in each time for minifying. The gulp-changed plugin will only process the new files and hence utilized precious time.

Run the Tasks
The configuration file is set up and ready to execute. Use the following command to run the task.
gulp
On running the task using the above command, you will receive the following result in the command prompt.
C:\work>gulp
[15:55:49] Using gulpfile C:\work\gulpfile.js
[15:55:49] Starting 'imagemin'...
[15:55:49] Finished 'imagemin' after 23 ms
[15:55:49] Starting 'default'...
[15:55:49] Finished 'default' after 23 μs
[15:55:54] gulp-imagemin: Minified 1 images (saved 558.3 kB - 8.3%)

Gulp - Useful Plugins

Gulp provides some useful plugins to work with HTML & CSS, JavaScript, Graphics and some other things as described in the following tables.

HTML & CSS Plugins
Sr.No. Plugin & Description
1
autoprefixer

It automatically includes prefixes to CSS properties.

2
gulp-browser-sync

It is used to watch all HTML and CSS files in the CSS directory and performs the live reload to the page in all browsers, whenever files are changed

3
gulp-useref

It is used to replace references to non-optimized scripts or stylesheets.

4
gulp-email-design

It creates HTML email templates which converts CSS styles to inline.

5
gulp-uncss

It optimizes CSS files and finds unused and duplicated styles.

6
gulp-csso

It is a CSS optimizer, which minimizes CSS files resulting in smaller file size.

7
gulp-htmlmin

It minimizes HTML files.

8
gulp-csscomb

It is used to make style formatter for CSS.

9
gulp-csslint

It specifies a CSS linter.

10
gulp-htmlhint

It specifies a HTML validator.


JavaScript Plugins
Sr.No. Plugin & Description
1
gulp-autopolyfiller

It is same like autoprefixer which includes necessary polyfills for JavaScript.

2
gulp-jsfmt

It is used for searching specific code snippets.

3
gulp-jscs

It is used to check JavaScript code style.

4
gulp-modernizr

It specifies what HTML, CSS and JavaScript features the user's browser has to offer.

5
gulp-express

It starts gulp express.js web server.

6 gulp-requirejs

It uses require.js to combine require.js AMD modules into one file.

7
gulp-plato

It generates complexity analysis reports.

8
gulp-complexity

It analyzes the complexity and maintainability of code.

9
fixmyjs

It fixes JSHint results.

10
gulp-jscpd

It is used as copy/paste detector for source code.

11
gulp-jsonlint

It is JSON validator.

12
gulp-uglify

It minifies the JavaScript files.

13
gulp-concat

It concatenates the CSS files.


Unit Tests Plugins
Sr.No. Plugin & Description
1
gulp-nodeunit

It runs node unit tests from Gulp.

2
gulp-jasmine

It is used to report the issues related to the output.

3
gulp-qunit

It provides basic console output for QUnit tests and uses PhantomJS node module and PhantomJS runner QUnit plugin.

4
gulp-mocha

It specifies the thin wrapper around Mocha and runs the Mocha tests.

5
gulp-karma

It has been deprecated in Gulp.


Graphics Plugins
Sr.No. Plugin & Description
1
gulpicon

It generates sprites from SVG and converts them to PNG.

2
gulp-iconfont

It is used with web fonts to create WOFF, EOT, TTF files from SVG.

3
gulp-imacss

It transforms image files into data URIs and places them into a single CSS file.

4
gulp-responsive

It generates responsive images for different devices

5
gulp-sharp

It is used to change and resize the orientation and background of the image.

6
gulp-svgstore

It combines SVG files into one with <symbol> elements.

7
gulp-imagemin & gulp-tinypng

It is used for compressing the images such as PNG, JPEG, GIF, SVG.

8
gulp-spritesmith

It is used for creating spritesheet from set of images and CSS variables.


Compilers Plugins
Sr.No. Plugin & Description
1
gulp-less

It provides LESS plugin for Gulp.

2
gulp-sass

It provides SASS plugin for Gulp.

3
gulp-compass

It provides compass plugin for Gulp.

4
gulp-stylus

It is used for keeping stylus in CSS.

5
gulp-coffee

It provides coffeescript plugin for Gulp.

6
gulp-handlebars

It provides handlebars plugin for Gulp.

7
gulp-jst

It provides underscore templates in JST.

8
gulp-react

It specifies Facebook React JSX templates into JavaScript.

9
gulp-nunjucks

It specifies Nunjucks templates in JST.

10
gulp-dustjs

It specifies Dust templates in JST.

11
gulp-angular-templatecache

It specifies AngularJS templates in the templateCache.


Other Plugins

The gulp-clean plugin removes files and folders and the gulp-copy plugin copies the files from source to new destination.

Sr.No. Plugin & Description
1
gulp-grunt

It runs the Grunt tasks from Gulp

2
gulp-watch

It watches the files whenever changes are made.

3
gulp-notify

It notifies the error message whenever a task fails.

4
gulp-git

It allows to use Git commands.

5
gulp-jsdoc

It creates JavaScript documentation for Gulp.

6
gulp-rev

It provides static asset revisioning to file names.

7
gulp-bump

It increases the versions in JSON package.

8
gulp-bower-files

It is used to inject bower packages.

9
gulp-removelogs

It removes console.log statements.

10
gulp-preprocess

It preprocesses HTML, JavaScript and other files based on context or environment configuration.

11
gulp-duration

It specifies the duration for Gulp tasks.

12
gulp-changed & gulp-newer

It runs the modified files and newer files.

13
gulp-connect

It is used to run a web server with LiveReload.

14
gulp-shell

It runs Shell commands.

15
gulp-ssh

It connects by using SSH and SFTP tasks.

16
gulp-zip

It compresses the files and folders.

17 gulp-clean & gulp-copy
18
gulp-filesize

It specifies the file size in human readable format.

19
gulp-util

It provides utilities for gulp plugins.


Gulp - Cleaning Unwanted Files

In this chapter, you will learn how to clean generated files. As we are automatically generating the files, make sure that unnecessary files should be deleted before running your build. This procedure is called cleaning. The del plugin can be used for this purpose.


Installing del Plugins

In your command line install the plugin by entering the following command.

npm install del --save-dev

Declare Dependencies and Create Tasks

In your configuration file gulpfile.js, declare the dependencies as shown in the following command.

var del = require('del');

Next, create a task as shown in the following code.

gulp.task('clean:build', function() {
   return del.sync('build');
});

The above task will clean entire build. The clean task clears any image catches and removes any old files present in build.

It is possible to clean only specific file or folder and leave some of them untouched as illustrated in the following code.

gulp.task('clean:build', function() {
   //return del.sync('build');
   return del([
      'build/temp/',
      // instructs to clean temp folder
      '!build/package.json'
      // negate to instruct not to clean package.json file ]);
});

In the above task, only the temp folder will be cleaned leaving package.json untouched.


Last Words

Hope you liked this guide and learned something from it. Help me in spreading this knowledge by sharing it with your friends and relatives. Thanks!

Read More

03 May 2017

// // 2 comments

C++ Language Quick Guide By VipTechWorld


Hello and Welcome to this quick C++ language guide. This guide can be used in many ways. You can start reading it from top to bottom or you can just choose the topic you want to study and see that topic. So let's start...




Intro:

C++ is a statically typed, compiled, general-purpose, case-sensitive, free-form programming language that supports procedural, object-oriented, and generic programming.

C++ is regarded as a middle-level language, as it comprises a combination of both high-level and low-level language features.

C++ was developed by Bjarne Stroustrup starting in 1979 at Bell Labs in Murray Hill, New Jersey, as an enhancement to the C language and originally named C with Classes but later it was renamed C++ in 1983.

C++ is a superset of C, and that virtually any legal C program is a legal C++ program.

C++ Compiler:

This is actual C++ compiler, which will be used to compile your source code into final executable program.

Most C++ compilers don't care what extension you give your source code, but if you don't specify otherwise, many will use .cpp by default

Most frequently used and free available compiler is GNU C/C++ compiler, otherwise you can have compilers either from HP or Solaris if you have respective Operating Systems.

C++ Program Structure:

Let us look at a simple code that would print the words Hello World.

#include <iostream>
using namespace std;
 
// main() is where program execution begins.
 
int main()
{
   cout << "Hello World"; // prints Hello World
   return 0;
}

Comments in C++

C++ supports single line and multi-line comments. All characters available inside any comment are ignored by C++ compiler.

C++ comments start with /* and end with */. For example:

/* This is a comment */
 
/* C++ comments can  also
 * span multiple lines
 */

A comment can also start with //, extending to the end of the line. For example:

#include <iostream>
using namespace std;
 
main()
{
   cout << "Hello World"; // prints Hello World
 
   return 0;
}

C++ Primitive Built-in Types:

C++ offer the programmer a rich assortment of built-in as well as user-defined data types. Following table list down seven basic C++ data types:

TypeKeyword
Booleanbool
Characterchar
Integerint
Floating Pointfloat
Double Floating Pointdouble
Valuelessvoid
Wide Characterwchar_t

Variable Definition & Initialization in C++:

Some examples are:

extern int d, f      // declaration of d and f
int d = 3, f = 5;    // definition and initializing d and f.
byte z = 22;         // definition and initializes z.
char x = 'x';        // the variable x has the value 'x'.

C++ Variable Scope:

A scope is a region of the program and broadly speaking there are three places where variables can be declared:
  • Inside a function or a block which is called local variables,
  • In the definition of function parameters which is called formal parameters.
  • Outside of all functions which is called global variables.

C++ Constants/Literals:


Constants refer to fixed values that the program may not alter and they are called literals.

Constants can be of any of the basic data types and can be divided in Integer Numerals, Floating-Point Numerals, Characters, Strings and Boolean Values.

Again, constants are treated just like regular variables except that their values cannot be modified after their definition.

C++ Modifier Types:

C++ allows the char, int, and double data types to have modifiers preceding them. A modifier is used to alter the meaning of the base type so that it more precisely fits the needs of various situations.

The data type modifiers are listed here:
  • signed
  • unsigned
  • long
  • short

The modifiers signed, unsigned, long, and short can be applied to integer base types. In addition, signed and unsigned can be applied to char, and long can be applied to double.

The modifiers signed and unsigned can also be used as prefix to long or short modifiers. For example unsigned long int.

C++ allows a shorthand notation for declaring unsigned, short, or long integers. You can simply use the word unsigned, short, or long, without the int. The int is implied. For example, the following two statements both declare unsigned integer variables.

unsigned x;
unsigned int y;

Storage Classes in C++:

A storage class defines the scope (visibility) and life time of variables and/or functions within a C++ Program. These specifiers precede the type that they modify. There are following storage classes which can be used in a C++ Program
  • auto
  • register
  • static
  • extern
  • mutable

C++ Operators:

An operator is a symbol that tells the compiler to perform specific mathematical or logical manipulations. C++ is rich in built-in operators and provides following type of operators:
  • Arithmetic Operators ( +, -, \, *, ++, --)

  • Relational Operators (==, !=, >. <, >=, <=)

  • Logical Operators (&&, ||, ! )

  • Bitwise Operators (& |, ^, ~, <<, >>)

  • Assignment Operators (=, +=, -=, *=, /=, %=, <<=, >>=, &=, ^=, |=)

  • Misc Operators ( sizeof, & cast, comma, conditional etc.)


C++ Loop Types:

C++ programming language provides the following types of loops to handle looping requirements.

Loop TypeDescription
while loopRepeats a statement or group of statements while a given condition is true. It tests the condition before executing the loop body.
for loopExecute a sequence of statements multiple times and abbreviates the code that manages the loop variable.
do...while loopLike a while statement, except that it tests the condition at the end of the loop body
nested loopsYou can use one or more loop inside any another while, for or do..while loop.

C++ Decision Making:

C++ programming language provides following types of decision making statements.

StatementDescription
if statementAn if statement consists of a boolean expression followed by one or more statements.
if...else statementAn if statement can be followed by an optional else statement, which executes when the boolean expression is false.
switch statementA switch statement allows a variable to be tested for equality against a list of values.
nested if statementsYou can use one if or else if statement inside another if or else if statement(s).
nested switch statementsYou can use one swicth statement inside another switch statement(s).

C++ Functions:

The general form of a C++ function definition is as follows:

return_type function_name( parameter list )
{
   body of the function
}

A C++ function definition consists of a function header and a function body. Here are all the parts of a function:
  • Return Type: A function may return a value. The return_type is the data type of the value the function returns. Some functions perform the desired operations without returning a value. In this case, the return_type is the keyword void.
  • Function Name: This is the actual name of the function. The function name and the parameter list together constitute the function signature.
  • Parameters: A parameter is like a placeholder. When a function is invoked, you pass a value to the parameter. This value is referred to as actual parameter or argument. The parameter list refers to the type, order, and number of the parameters of a function. Parameters are optional; that is, a function may contain no parameters.
  • Function Body: The function body contains a collection of statements that define what the function does.

Numbers in C++:

Following a simple example to show few of the mathematical operations on C++ numbers:
#include <iostream>
#include <cmath>
using namespace std;
 
int main ()
{
   // number definition:
   short  s = 10;
   int    i = -1000;
   long   l = 100000;
   float  f = 230.47;
   double d = 200.374;
 
   // mathematical operations;
   cout << "sin(d) :" << sin(d) << endl;
   cout << "abs(i)  :" << abs(i) << endl;
   cout << "floor(d) :" << floor(d) << endl;
   cout << "sqrt(f) :" << sqrt(f) << endl;
   cout << "pow( d, 2) :" << pow(d, 2) << endl;
 
   return 0;
}

C++ Arrays:

Following is an example, which will show array declaration, assignment and accessing arrays in C++:

#include <iostream>
using namespace std;
 
#include <iomanip>
using std::setw;
 
int main ()
{
   int n[ 10 ]; // n is an array of 10 integers
 
   // initialize elements of array n to 0          
   for ( int i = 0; i < 10; i++ )
   {
      n[ i ] = i + 100; // set element at location i to i + 100
   }
   cout << "Element" << setw( 13 ) << "Value" << endl;
 
   // output each array element's value                      
   for ( int j = 0; j < 10; j++ )
   {
      cout << setw( 7 )<< j << setw( 13 ) << n[ j ] << endl;
   }
 
   return 0;
}

C++ Strings:

C++ provides following two types of string representations:

The C-style character string as follows:

char greeting[6] = {'H', 'e', 'l', 'l', 'o', '\0'};

The standard C++ library provides a string class type that supports all the operations mentioned above, additionally much more functionality. Following is the example:

#include <iostream>
#include <string>
 
using namespace std;
 
int main ()
{
   string str1 = "Hello";
   string str2 = "World";
   string str3;
 
   // copy str1 into str3
   str3 = str1;
   cout << "str3 : " << str3 << endl;
 
   // concatenates str1 and str2
   str3 = str1 + str2;
   cout << "str1 + str2 : " << str3 << endl;
  
   return 0;
}

C++ Classes & Objects

A class definition starts with the keyword class followed by the class name; and the class body, enclosed by a pair of curly braces. A class definition must be followed either by a semicolon or a list of declarations. For example we defined the Box data type using the keyword class as follows:

class Box
{
   public:
      double length;   // Length of a box
      double breadth;  // Breadth of a box
      double height;   // Height of a box
};

The keyword public determines the access attributes of the members of the class that follow it. A public member can be accessed from outside the class anywhere within the scope of the class object. You can also specify the members of a class as private or protected which we will discuss in a sub-section.

Define C++ Objects:

A class provides the blueprints for objects, so basically an object is created from a class. We declare objects of a class with exactly the same sort of declaration that we declare variables of basic types. Following statements declare two objects of class Box:

Box Box1;          // Declare Box1 of type Box
Box Box2;          // Declare Box2 of type Box

Both of the objects Box1 and Box2 will have their own copy of data members.

Accessing the Data Members:

The public data members of objects of a class can be accessed using the direct member access operator (.). Let us try following example to make the things clear:

#include <iostream>
 
using namespace std;
 
class Box
{
   public:
      double length;   // Length of a box
      double breadth;  // Breadth of a box
      double height;   // Height of a box
};
 
int main( )
{
   Box Box1;        // Declare Box1 of type Box
   Box Box2;        // Declare Box2 of type Box
   double volume = 0.0;     // Store the volume of a box here
 
   // box 1 specification
   Box1.height = 5.0; 
   Box1.length = 6.0; 
   Box1.breadth = 7.0;
 
   // box 2 specification
   Box2.height = 10.0;
   Box2.length = 12.0;
   Box2.breadth = 13.0;
   // volume of box 1
   volume = Box1.height * Box1.length * Box1.breadth;
   cout << "Volume of Box1 : " << volume <<endl;
 
   // volume of box 2
   volume = Box2.height * Box2.length * Box2.breadth;
   cout << "Volume of Box2 : " << volume <<endl;
   return 0;
}

C++ Inheritance:

One of the most important concepts in object-oriented programming is that of inheritance. Inheritance allows us to define a class in terms of another class which makes it easier to create and maintain an application. This also provides an opportunity to reuse the code functionality and fast implementation time.

When creating a class, instead of writing completely new data members and member functions, the programmer can designate that the new class should inherit the members of an existing class. This existing class is called the base class, and the new class is referred to as the derived class.

A class can be derived from more than one classes, which means it can inherit data and functions from multiple base classes. To define a derived class, we use a class derivation list to specify the base class(es). A class derivation list names one or more base classes and has the form:

class derived-class: access-specifier base-class

Where access-specifier is one of public, protected, or private, and base-class is the name of a previously defined class. If the access-specifier is not used, then it is private by default.

Consider a base class Shape and its derived class Rectangle as follows:

#include <iostream>
 
using namespace std;
 
// Base class
class Shape 
{
   public:
      void setWidth(int w)
      {
         width = w;
      }
      void setHeight(int h)
      {
         height = h;
      }
   protected:
      int width;
      int height;
};
 
// Derived class
class Rectangle: public Shape
{
   public:
      int getArea()
      { 
         return (width * height); 
      }
};
 
int main(void)
{
   Rectangle Rect;
 
   Rect.setWidth(5);
   Rect.setHeight(7);
 
   // Print the area of the object.
   cout << "Total area: " << Rect.getArea() << endl;
 
   return 0;
}

C++ Overloading

C++ allows you to specify more than one definition for a function name or an operator in the same scope, which is called function overloading and operator overloading respectively.

Following is the example where same function print() is being used to print different data types:

#include <iostream>
using namespace std;
 
class printData 
{
   public:
      void print(int i) {
        cout << "Printing int: " << i << endl;
      }
 
      void print(double  f) {
        cout << "Printing float: " << f << endl;
      }
 
      void print(char* c) {
        cout << "Printing character: " << c << endl;
      }
};
 
int main(void)
{
   printData pd;
 
   // Call print to print integer
   pd.print(5);
   // Call print to print float
   pd.print(500.263);
   // Call print to print character
   pd.print("Hello C++");
 
   return 0;
}

Polymorphism in C++

C++ polymorphism means that a call to a member function will cause a different function to be executed depending on the type of object that invokes the function.

Consider the following example where a base class has been derived by other two classes and area() method has been implemented by the two sub-classes with different implementation.

#include <iostream> 
using namespace std;
 
class Shape {
   protected:
      int width, height;
   public:
      Shape( int a=0, int b=0)
      {
         width = a;
         height = b;
      }
      int area()
      {
         cout << "Parent class area :" <<endl;
         return 0;
      }
};
class Rectangle: public Shape{
   public:
      Rectangle( int a=0, int b=0)
      {
        Shape(a, b); 
      }
      int area ()
      { 
         cout << "Rectangle class area :" <<endl;
         return (width * height); 
      }
};
class Triangle: public Shape{
   public:
      Triangle( int a=0, int b=0)
      {
        Shape(a, b); 
      }
      int area ()
      { 
         cout << "Triangle class area :" <<endl;
         return (width * height / 2); 
      }
};
// Main function for the program
int main( )
{
   Shape *shape;
   Rectangle rec(10,7);
   Triangle  tri(10,5);
 
   // store the address of Rectangle
   shape = &rec;
   // call rectangle area.
   shape->area();
 
   // store the address of Triangle
   shape = &tri;
   // call triangle area.
   shape->area();
   
   return 0;
}

The reason for the incorrect output is that the call of the function area() is being set once by the compiler as the version defined in the base class. This is called static resolution of the function call, or static linkage - the function call is fixed before the program is executed. This is also sometimes called early binding because the area() function is set during the compilation of the program.

But now, let's make a slight modification in our program and precede the declaration of area() in the Shape class with the keyword virtual so that it looks like this:

class Shape {
   protected:
      int width, height;
   public:
      Shape( int a=0, int b=0)
      {
         width = a;
         height = b;
      }
      virtual int area()
      {
         cout << "Parent class area :" <<endl;
         return 0;
      }
};

After this slight modification, when the previous example code is compiled and executed, it produces the following result:

Rectangle class area
Triangle class area

Data Abstraction in C++:

Data abstraction refers to, providing only essential information to the outside word and hiding their background details ie. to represent the needed information in program without presenting the details.

Data abstraction is a programming (and design) technique that relies on the separation of interface and implementation.

For example, in C++ we use classes to define our own abstract data types (ADT). You can use the cout object of class ostream to stream data to standard output like this:

#include <iostream>
using namespace std;
 
int main()
{
   cout << "Hello C++" <<endl;
   return 0;
}

Here, you don't need to understand how cout displays the text on the user's screen. You need only know the public interface and the underlying implementation of cout is free to change.

Data Encapsulation in C++:

All C++ programs are composed of following two fundamental elements:

Program statements (code): This is the part of a program that performs actions and they are called functions.

Program data: The data is the information of the program which affected by the program functions.

Encapsulation is an Object Oriented Programming concept that binds together the data and functions that manipulate the data, and that keeps both safe from outside interference and misuse. Data encapsulation led to the important OOP concept of data hiding.

C++ supports the properties of encapsulation and data hiding through the creation of user-defined types, called classes. We already have studied that a class can contain private, protected and public members. By default, all items defined in a class are private. For example:

class Box
{
   public:
      double getVolume(void)
      {
         return length * breadth * height;
      }
   private:
      double length;      // Length of a box
      double breadth;     // Breadth of a box
      double height;      // Height of a box
};

C++ Files and Streams:

The iostream standard library cin and cout methods for reading from standard input and writing to standard output respectively.

To read and write from a file requires another standard C++ library called fstream which defines three new data types:

Data TypeDescription
ofstreamThis data type represents the output file stream and is used to create files and to write information to files.
ifstreamThis data type represents the input file stream and is used to read information from files.
fstreamThis data type represents the file stream generally, and has the capabilities of both ofstream and ifstream which means it can create files, write information to files, and read information from files.

Following is the C++ program, which opens a file in reading and writing mode. After writing information inputted by the user to a file named afile.dat, the program reads information from the file and outputs it onto the screen:

#include <fstream>
#include <iostream>
using namespace std;
 
int main ()
{
    
   char data[100];
 
   // open a file in write mode.
   ofstream outfile;
   outfile.open("afile.dat");
 
   cout << "Writing to the file" << endl;
   cout << "Enter your name: "; 
   cin.getline(data, 100);
 
   // write inputted data into the file.
   outfile << data << endl;
 
   cout << "Enter your age: "; 
   cin >> data;
   cin.ignore();
   
   // again write inputted data into the file.
   outfile << data << endl;
 
   // close the opened file.
   outfile.close();
 
   // open a file in read mode.
   ifstream infile; 
   infile.open("afile.dat"); 
 
   cout << "Reading from the file" << endl; 
   infile >> data; 
 
   // write the data at the screen.
   cout << data << endl;
   
   // again read the data from the file and display it.
   infile >> data; 
   cout << data << endl; 
 
   // close the opened file.
   infile.close();
 
   return 0;
}


Last Words

This Quick C++ Language Guide ends here but I hope that you will not stop here and work hard and hard to become a sucessful C++ programmer.

If this article helped you in any way then please give me gift of my hardwork by sharing this guide with your friends on facebook, twitter, instagram, ycombinator, pinterest etc using the share buttons below.

- Thanks, TheVip


Read More

30 March 2017

// // Leave a Comment

How To Speed Up Your Android Without Rooting?



Today there are more than billions of people who are using Android. Many people have a concern about slowing down their Android device as the device’s speed gets slower with the time. So today I am here resolve that issue, there could be multiple factors that can be responsible for the slowdown of android speed like it can be due to low memory, RAM and any other problem like viruses and much more other factors. Now with the methods that I have discussed in this post, you can comfortably Speed Up Your Android Device.


Steps To Speed Up Android Without Rooting:


There are many factors that can influence your Android speed. And the methods I'm going to discuss here are for non-rooted smartphones. These methods are also for those who don’t want to root their smartphone.

1. Manage Your Internal Storage


The major thing in an Android is its internal storage. It is the physical memory that an Android uses to store all the apps in it. So it’s always better to choose an Android that is having perfect internal storage capacity and second thing is to manage your internal storage perfectly.

2. Remove Bloatware


If you have RAM above 2GB then you don’t need to worry about bloatware. However, if you have less than 2GB of RAM then you need to remove the bloatware. It will show some positive effects on your smartphone efficiency. Therefore, make sure to remove the bloatware that you don’t use.

3. Clear Apps And System Cache


You Android device stores the temporary files, cache in your phone’s internal storage. If this storage space exceeds the standard limit then it can completely ruin your phone’s performance. Since you need to clear your stored apps caches to free up storage space that might boost your Android’s performance

4. Remove Unnecessary Widgets


Many of you like to use widgets on your Android device. However, you may be concealed to the fact that your widgets can be the reason of slowing down your Android speed. As these widgets occupy the space of Random Access Memory that is responsible for multi-tasking on your Android. So, it’s better to remove all the unused widgets in your Android.

5. Window Animation & Transition Scales


Every Android device has its own animation scales depending upon their qualities. These animations have many affect on your Android performance as they have loaded on both the battery and working. So the better choice is to reduce them as much as possible. To do so, just Go to Settings->Developer Option->Windows transition scale->0.0. Do the same with animation scale.

6. Update Firmware Of Your Android


A new firmware upgrade always comes with better updates that can fix all the previous bugs and can help your Android to perform better. So it’s good to upgrade your Android to the latest version of your Android respective firmware. Also, you can upgrade it through your About Phone option or you can flash the latest one in your Android.

7. Disable Auto Sync


If you have connected lot’s of accounts on your Android like WhatsApp, Snapchat, Gmail, Outlook etc then you need to disable the auto-sync feature. The auto-sync feature reduces your mobile phone performance and it consumes lots of battery life too.

8. Remove The Background Running Apps


As we have already told that RAM is responsible for the Android performance and all the background and current running process works on the Ram so it’s better to close all the apps running in the background.

9. Using Apps To Speed Up Your Android


There are many apps available on Google Play store that claim to boost up your Android device. Not many of them are useful but very rare are there who do their work perfectly as you can use DU speed Booster & Cleaner which is trusted by 230 million users, DU Speed Booster is the only all-in-one speed booster, trash cleaner and antivirus app that optimizes your background apps, memory space, junk (cache) files and battery power.

Features Of DU Speed Booster:
  • One-tap Boost: A single touch to speed up your devices and release memory
  • The junk-creating behavior of millions of apps has been analyzed so that DU Speed Booster & Antivirus can efficiently hone in on its targets (cache and residual files) with perfect accuracy.
  • Scan installed apps, memory card content, and new apps automatically.
  • Introducing the Charging Screensaver, to boost the charging speed by 20%.

10. Restore Phone To Factory Settings


If you have tried all the above-mentioned method and if all failed. Then you need to Factory reset your Android device. Factory resetting your Android device clears all the cache and junk files, and it simply clears your phone memory. All the data stored in your phone memory will be cleared in the process. However, you will notice the increase in the speed of your device after resetting your device.

11. Use Startup Manager


You all might have experience lag during startup. Well, this is because all the apps installed on your device starts at the same time which consumes lots of RAM. You can use free app Startup manager to enable and disable the item that lots while you turn on your Android device.

12. Android Launcher


Sometimes, outdated devices lag a lot. Users can experience slow down or sudden crash while opening App drawer and while scrolling through the home screens. Any third party launchers can fix the issue for you because third-party launchers are frequently updated.

13. Using MSAA settings


Well, this feature comes pre-loaded with Android. Users need to enable this option from Android developer options. MSAA stands for multi-sample anti-aliasing. Users need to search for “Turn on 4x MSAA” on developer option and enable it. However, must remember this feature is very useful for games. If you run High-end games and your system lags, then this function will be helpful. However, this can drain your battery faster.

14. Use CCleaner


The reason why we recommend you to use CCleaner is that this app helps a user to remove junk, reclaim space, monitor their system and browse safely. You don’t need to go through every app to clear the cache manually. CCleaner is the best app which can improve your phone performance in one touch.

15. Timely Reboot


So this is all about Speed Up Android Without Rooting. By following all these, you can easily boost up your Android speed without rooting, and there will be no need to void warranty. So just follow up all the guides above to speed up your android. Don’t forget to share this useful post with your friends.
Read More

26 March 2017

// // 1 comment

How To Install Multiple Bootable Operating Systems In One USB



Have you ever thought of creating a Multiboot USB drive for your currently running Windows? If not then here is something that you might not be knowing! You might need that drive to recover your OS ( i.e Windows) in case it gets stuttered or gets any other problem as all these are not impossible for every OS and very often can happen to anyone. Or if you want to Play or check any other operating system (Without disturbing the default OS) directly through the Multiboot USB drive on your computer then you can also do that by just plug and play option with your Multiboot USB drive (No need to install it). There are many other uses of the Multiboot USB drives hence you should also go and make one for your current OS.



How To Install Multiple Bootable Operating Systems on One USB?


For creating the MultiBoot USB, you will need to use some tools and software, and for that very process, there are some standalone software that helps to do the whole process simply under one interface only. So let’s check out some of the best software for this method.


#1 MultiBootUsb Link



This is an amazing tool that is made for the purpose of making the Multiple Bootable USB Flash drives. With this tool setup fixed inside your USB Flash drive that should be minimum 16GB free of space. Now run that setup file directly from the USB Flash drive on your computer whose OS you want on your drive. Now just using some of the options under the MultiBoot tab of the software, set up the operating system and then click on the “Create” button placed below in the panel. This will begin the process of transferring the Operating system to the USB drive that can be used afterward for plug and play it on any other system.

With same process followed, you can easily create another bootable ISO image for any other operating system on your Flash Drive. You can also check the working of the OS’s on your PC using the QEMU function inside the Tool under QEMU tab only.


#2 Xboot Link




Using this tool is either simple enough as while running this tool on your computer system you will just have to drag and drop the ISO files for your OS and then click on the Create USB button. On the next prompt window, just select the USB drive on which you want to install the Booting OS. After selecting your ISO and USB location to follow by clicking on the ‘OK’ button. This will let the tool to create the bootable file on your selected USB, and after a successful transfer of OS, you can then run it on any other device without the even need for installation. Use the same method for this app to add more ISO files to your USB and hence you can create the MultiBoot USB. Like MultiBootUSB tool this one also features the QEMO function with which you can live check the OS booting from your USB drive only.


#3 YUMI (Your Universal Multiple Installer) Link




This one is also one of the trending tools for creating multiboot USB, and by far this does the job pretty good. You can use the same process, and way out like the other two tools stated above to create the ISO image file for your OS on the USB and the only difference is the interface of the Tool that you could find out easy to transact although. And there is one excellent feature lacking in this tool that is either present in other two above tools QEMO function that could help to live preview the running of the created Bootable OS on the USB Drive.


#4 RMPrepUSB Link



This is another best tool which you can have on your Windows computer. This comes with a cluttered interface. You might find it hard to use it. However, RMPrepUSB is specialized in creating multiple partitions on a single USB drive. This lets you create a partition in USB drive just like you do on your hard disk. You can then install multiple bootable disks in a different partition.


#5 WinSetupFromUSB Link



WinSetupFrom USB is a simple tool that prepares multiboot USB flash or fixed disk to install any version of Windows. So, if you want to install multiple operating systems on single USB device, you can have this tool. This tool lets the user install Windows XP, Vista, Window 7, Windows 10 and Linux distros.


So above discuss is all about How To Install Multiple Bootable Operating Systems on One USB. You have now learned in this article that how you can easily create a Multiboot USB drive for the Windows platform by using some of the tools and without any of the advanced language usage or coding etc. but only using the basic surfing techniques. Remember that to create the correctly working MultiBoot USB, and you will have to perform every of the step given in the article very perfectly.

Tell your thoughts in the comments!




Read More

23 March 2017

// // 1 comment

Javascript Vs. Css : Which is best for animation?


javascript versus css animations

CSS is perfectly suited for hover state animations (turning a link blue when
the mouse is positioned over it, for example), which are very often the extent to which
basic web pages include animation. CSS transitions fit seamlessly into existing stylesheets,
allowing developers to avoid bloating their pages with unnecessary JavaScript libraries.
What’s more, CSS animation delivers blazing performance out of the box.

But there’s a false belief in the web development community that CSS animation is the only
performant way to animate on the web. This misconception has led many developers to
abandon JavaScript-based animation altogether, forcing them to

  • Manage the entirety of user interface (UI) interaction within style sheets, which can
    quickly become difficult to maintain.
  • Sacrifice real-time animation timing control, which is achievable only within
    JavaScript. (Timing control is necessary for designing animation into UIs that
    respond to a user’s drag input, like those found in mobile apps.)
  • Forgo physics-based motion design, which allows elements on a webpage to behave
    like objects in the real world.
  • Lose support for older browser versions, which remain popular throughout the
    world.

A javascript-based animation is actually often as fast as CSS-based animation. CSS animation is mistakenly considered to have a significant leg up because it’s most often
compared to jQuery’s animation features, which are in fact very slow. However,
alternative JavaScript animation libraries that bypass jQuery entirely deliver fantastic
performance by streamlining their interaction with a page.

JavaScript Vs. Jquery Animations


Most of the time JavaScript and jQuery are falsely conflated. In reality, JavaScript animation is fast. jQuery slows it
down. Despite jQuery being tremendously powerful, it wasn’t designed to be a high-
performance animation engine. It has no mechanism to avoid “layout thrashing,” in which
a browser becomes overtasked with layout processing work while it’s in the process of
animating.

dont conflate javascript with jquery

Further, because jQuery’s code base serves many purposes beyond animation, its
memory consumption triggers garbage collections within the browser, causing animations
to stutter unpredictably. Lastly, due to decisions made by the jQuery team in the noble pursuit of helping novice users avoid sabotaging their UI with bad code, jQuery forgoes
the recommended practice of using the requestAnimationFrame function, which
browsers make available to drastically improve frame rates for web animation.

Why Use Javascript?


Speed is, of course, not the only reason to use JavaScript—its abundance of features is
equally as important. A few of the notable animation features that are
exclusive to JavaScript are,

Page scrolling

Page scrolling is one of the most popular uses for JavaScript-based animation. A recent
trend in web design is to create long web pages that animate new pieces of content into
view as the page is scrolled down.
JavaScript animation libraries, such as Velocity, provide awesome support for this.

Animation Reversal

Animation reversal is a useful shorthand for undoing an element’s previous animation. By
invoking the reverse command, you’re instructing an element to animate back to its values
prior to its last animation. A common use for reversal is animating a modal dialogue into
view, then hiding it when the user presses to close it.

Physics-based motion

The utility of physics in motion design reflects the core principle of what makes for a
great user experience (UX) on your site: interfaces that flow naturally from the user’s
input. Put another way, interfaces that pay tribute to how objects move in the real world.


Wrapping up
When designing animations in CSS, you’re inherently limited to the features that the CSS
specification provides. In JavaScript, because of the very nature of programming
languages, third-party libraries have an infinite amount of logical control over motion
design. Animation engines leverage this to provide powerful features that drastically
improve workflow and expand the possibilities of interactive motion design.


This was a pretty long article, hope you enjoyed reading it. What type of animations do you like to use? Tell in the comments below.

Read More

15 March 2017

// // 2 comments

Hackers Use $5 Speakers To Control Smartphone And Fitbit Using Sound Waves



According to a new research by a team at the University of Michigan, the MEMS accelerometers found on a variety of devices can be fooled to record fictitious data using precisely tuned acoustic waves. This can be done using any low-cost speaker and used to control a smartphone or any other device connected to it.

We can control a smartphone using our voice, why not the hackers? You might have read about voice commands neatly stuffed into YouTube videos can be used to take down a smartphone. They can do it in other different ways going beyond software. And their control powers are not limited to smartphones, but it can include Fitbit, toys, cars, or other things that house an accelerometer sensor.

A team by Kevin Fu at the University of Michigan has devised a way to agitate the spring-suspended capacitive MEMS accelerometer of a device to make it think the device is in motion.

Using correctly curated sound waves emitting from a speaker, they can control any app on the smartphone or another device. During their experiments, they made a FitBit band count steps while it was sitting peacefully at one place. They were also able to make a Galaxy S5 spell out the word WALNUT in the graph readings.


The team compares their method to the breaking of glass due to an opera song. Once the sound matches the resonant frequency of the glass, it breaks. In this case, the researchers don’t concentrate on breaking things but they can trick a device into recording false data and sending it to the processor. They tested around 20 accelerometers from five makers.

However, the creepy hacking process is currently limited as a proof-of-concept. It would be too soon to think about people carrying $5 speakers and hacking our phones on the streets. The researchers have notified the chip makers and suggested some countermeasures including changes to hardware design and software defenses.

The researcher presents their paper titled “WALNUT: Waging Doubt on the Integrity of MEMS Accelerometers with Acoustic Injection Attacks” at the IEEE European Symposium on Security and Privacy on April 26.

If you have something to add, drop your thoughts. And don’t forget to tell us your feedback.
Read More