Important data visualization Applications

Important data visualization Applications:

Data Voyage (Visualization browser)

Visualization browser for open-ended data exploration building on top of Vega-Lite.
Start exploring data by examining each field and continue by selecting interesting data fields in
data selector panel.

Online Demo:
Voyager

Repository:
Voyager Repository

Lightbeam

It is a Firefox add-on that uses interactive visualizations to show you the first and third party sites you interact with on the Web.
Lightbeam

Socilab

It allows users to visualize and analyze their LinkedIn network using methods derived from social-scientific research.
Socilab

Cytoscape

Cytoscape is an open source software platform for visualizing complex networks and integrating these with any type of attribute data.
cytoscape

Datavizcatalogue

Complete list of data visualization
Datavizcatalogue

Continue Reading

Create a full screen slider

Create a full-page bootstrap carousel

We can develop a full screen bootstrap carousel or slider by using below scripts.


/* full page carousel */
jQuery(document).ready(function () {
$('.carousel').carousel({
	pause: "false"
});
$('.carousel').css({ 'margin': 0, 'width': $(window).outerWidth(), 'height': $(window).outerHeight() });
//$('.carousel-inner').css({'z-index': 0});
$('.carousel .item').css({ 'position': 'fixed', 'width': '100%', 'height': '100%' });
$('.carousel-inner div.itemimg').each(function () {
	varimgSrc = $(this).attr('src');
	$(this).parent().css({ 'background': 'url(' + imgSrc + ') center center no-repeat', '-webkit-background-size': '100% ', '-moz-background-size': '100%', '-o-background-size': '100%', 'background-size': '100%', '-webkit-background-size': 'cover', '-moz-background-size': 'cover', '-o-background-size': 'cover', 'background-size': 'cover' });
	$(this).remove();
});
$(window).on('resize', function () {
	$('.carousel').css({ 'width': $(window).outerWidth(), 'height': $(window).outerHeight() });
});
});

Continue Reading

Minification and concatenation using Gulp JS

Minify and concatenate the JS files using gulp js

Minify and concatenate the multiple JS files into singles file using gulp.

Step 1: Gulp plugin

Declare the gulp plugins in gulpfile.js file.
var gulp = require(‘gulp’);

Step 2: Uglify plugin

Declare the uglify plugin for minifies the required js files.
var uglify = require(‘gulp-uglify’);

Step 3: Concat plugin

Declare the concat plugin for combining the JS files into single file.
Var concat = require(‘gulp-concat’);

Step 4: Creating gulp task

Creating gulp task for Minification and concat process.

gulp.task(‘scripts’, function() {
gulp.src(‘src/*.js’)
.pipe(concat(‘all.min.js’))
.pipe(uglify())
.pipe(gulp.dest(‘dist’));
});

Gulp Task code Explanation:

gulp.src – It defines the input files path for processing
pipe – It is used to chain multiple tasks together using pipe method.
gulp.dest – It defines the output location for processed files.
Concat – This method combines multiples files into single file. We should declare the output
file name within the brackets.

Overall Source Code for Minify and concatenate the JS files using gulp js.


//gulpfile.js file

//Adding dependencies
var gulp = require('gulp');
varuglify = require('gulp-uglify');
varconcat = require('gulp-concat');

//defining tasks
gulp.task('default', function() {  //default is a task name, we can give any name.
	gulp.src('src/*.js')
	.pipe(concat('all.min.js'))
	.pipe(uglify())
	.pipe(gulp.dest('dist'));
});

Project Folder Structure:

Gulp folder structure

Continue Reading

How to install gulp js?

Steps to installing gulp js:

First we should install npm using below command.
npm install

To install npm in development environment use below command.
npm install –save—dev

After that Create empty package.json file in node folder then run the below command.
npm init

To install gulp, run the below command.
npm install gulp -g

To install gulp in project directory use below command.
npm install –save-dev gulp-install

After that create gulpfile.js file locally in the corresponding folder.

Folder Structure:
Gulp folder structure

Continue Reading

CSS Position Properties

Position properties in CSS

Position is an essential CSS property for control the positioning of layout elements.

Static Position

All the HTML elements are always positioned to the normal flow of web page. Simply we can tell like default position.

Relative Position

An element with relative CSS property is always positioned relative to its normal (existing) position.

CSS relative position

Absolute Position

An element with absolute CSS property is always positioned relative to its parent element which has relative property.

CSS absolute position

If no parent element which has position property, it is always positioned relative to the document body. When page is scrolled, absolute element will move along with page scrolling.

CSS absolute position demo

Fixed Position

An element with fixed CSS property is always positioned relative to the viewport, it means it stays in the same position even if the page is scrolled.

CSS fixed position

Continue Reading

CSS Display Properties

Display Properties in CSS

Display is an essential CSS property for controlling layout structure / content.

Display: block

An element with CSS block property, it starts on a new line and stretches to the full width of row from left to right end.

Default block level elements:

  • div
  • ul
  • p
  • header
  • footer
  • section
  • fieldset
  • h1 to h6
  • table… etc

Display: Inline

An element with inline CSS property, it starts on a same existing line without any line break and wrap some text inside it without disrupting flow of row. It just starts on a same existing line and stretches to the text content size. It cannot have a width and height set.

Default inline elements:

  • span
  • a
  • strong
  • img
  • label
  • input
  • select
  • textarea
  • button
  • sub, sup… etc

Display: inline-block

An element with inline-block CSS property, it is positioning as an inline element but it behaves as a block element with defined width and height properties.

CSS Position properties

Display: flex

Flex layout provides an efficient way to alter its items dimension (width and height), align, distribute space among elements within the document.A flex container expands items to fill available free space, or shrinks them to prevent overflow.

To learn more about flexbox, please access the below link.
http://flexbox.help/

Display: table

An element with table CSS property will acts as a table layout.

Display: none

An element with a none CSS property will hide the element from view.

Display: inherit

An element with an inherit CSS property will apply the parent properties to child element.

Continue Reading

Important Tools for Web Development

Essential Tools for Web Development

Text Compare Tools

  • Diffchecker is an online tool to compare text differences between two text files.
  • Beyond compare tool is used to easily compare your files and folders. Beyond Compare’s merge view allows you to combine changes from two versions of a file or folder into a single output.

Code Sharing Tools:

The below list of online tools is used to sharing codes, project modules online.

Website speed test tools:

Local server environments:

To setup local server environments below list of tools are used.

  • Xampp
  • Mamp
  • Wamp server
  • Laragon

Icons:

  • Font Awesome: Scalable vector icons that can instantly be customized — size, color, drop shadow, and anything that can be done with the power of CSS.
  • IconMonster: A free, high quality, monstrously big and continuously growing source of simple icons.
  • Icons8: An extensive list of highly customizable icons created by a single design team.
  • IconFinder: Iconfinder provides beautiful icons to millions of designers and developers.
  • Fontello: Tool to build custom fonts with icons.

Chat Application

Converse.js is a free and open-source XMPP chat client in your browser.

Json to csv Convertor

  • This tool is used to convert the json format into csv file format.
  • We can upload the json files and it will provide the csv file format as an output.

Fiddler for web debugger tool

  • The Fiddler tool helps you debug web applications by monitoring network traffic between the Internet and our own computers.
  • The tool enables you to inspect incoming and outgoing data to monitor and modify requests and responses before the browser receives them.

Web accessibility Toolbar

The Web Accessibility Toolbar (WAT) has been developed to aid manual examination of web pages for a variety of aspects of accessibility.

Continue Reading

Top 5 Google chrome add-ons / tools for web development

Important browser based web development tools:

PageRuler Tool

This tools is used to measure the dimensions of web elements.Draw a ruler to any web page and view width, height and placements position (top, bottom, left and right).

PageRuler tool

Colorzilla Tool

Colorzilla or colorpicker tool is used to pick a color and generate gradient effects. After picking a part in web page, It will give the hex decimal and rgb color code as a result.

Colorzilla tool

Fontface Ninja Tool

It allows user to identify the fonts used in a web page. It will show the font family name, font size and line-height of text contents.

Fontface Ninja tool

Fireshot Tool

It allows user to take the screenshots of viewing web pages.It allows you to take screenshots and the edit, organize and export.

Fireshot tool

Yslow Tool

This is an open source tool and it offers suggestions for improving the page’s performance. This is available in both chrome and firefox add-on list.

yslow tool

Web performance measuring tool

Continue Reading

Best Practices of Javscript

Best Practices for Javascript Coding

Inclusion of Code

  • Use external JavaScript files. Do NOT include JavaScript in-line in the page unless there is a good reason.
  • Use the <script> tag to include your JavaScript files at the bottom of your HTML document just before the closing </body> tag. For optimal page performance, concatenate your JavaScript into separate file.

Formatting of Javascript Code

  • Open braces are preceded by a single space.
  • Open braces should appear on the same line as their preceding argument.
  • Close braces should appear at the same indentation as the statement preceding the opening brace.
  • There should be no space characters between parentheses and their contents.
  • Use semicolons and do not rely on automatic semicolon insertion.
  • Each comma and colon (and semi-colons that don’t end a line) should be followed by a single space.

Variable declaration

To avoid confusion between global and local variables, we declare each variable on its own line with the var keyword. We do not use a single var keyword and then chain several variable declarations onto it separated by a comma.

Variable Names and Types

  • Variable names should be Camel Case.
  • Objects, classes, and name-spaces should be Title Case.
  • Boolean values should be prefixed with is if at all possible.
    Cached JQuery objects can be prefixed with $.
  • Use shorthand versions of empty Arrays and Objects.

Examples:

// some examples
var exampleValue ='my example variable value';
var numberOfTimes =3;
// booleans
var isThisWorking =true;
var isNotWorking =0;
// cache a selector
var $body =$('body');
// short hand objects and arrays
var newObject ={};
var newArray =[];

Limit Events — Use Event Delegation

With jQuery this is easy, simply use the on method with a selector:


$('body').on('click','a.scroller',function(){
// this only runs if the a.scroller is matched
});

Too many events bound on a page can mean memory leaks or just an accumulation of handlers bound to DOM elements which becomes less and less efficient over time.

Additionally, event delegation has the added benefit of persisting events over dynamic page updates when items are added or removed from the DOM.

More code practices

  • Avoid using document.write.
  • Only run scripts on a page that are needed for that page.
  • Don’t repeat yourself (i.e. keep your code DRY)
  • Do not modify JavaScript core objects .prototype unless you really know what you’re doing.
  • Use method names that make sense, such as init() or setup() for code that starts things off. Be consistent on your project.
  • Binary and ternary operators should have a single space on each side.
  • Quoted values should be in ‘single quotes’ so that double quotes may easily exist inside them.
  • Comment JavaScript code thoroughly and consider using a pattern such as those described by JSDocs so that documentation may be generated automatically.
  • Conditional statements go on a new line followed by the opening brace. Else/else go on the same line as the brace.
  • Use type strict checks with === as opposed to == whenever possible.
Continue Reading

Best Practices for CSS

Best Practices of CSS Coding

  • Organize your code with proper comments.
  • Use the <link> tag to include all your style sheets in the <head> of the document.

Don’t use @import.

@import directive is much slower than the other way to include style-sheets into a html document.
This will fire an additional HTTP request and block page rendering until its completion.

Specificity of CSS

The ID is the most specific selector, since it can only match one element, and the class is a close second. Use those whenever possible rather than HTML tag names.

/* BAD */
button#back-button { … }
.popular ul li a { … }
.popular > ul > li > a { … }

/* GOOD */
.back-button { … }
.popular-link { … }
.unpopular-link { … }

When using vendor prefixed features, put the standardized rule at the end to ensure browsers optimize and use the standard if they recognize it.
Example:
.thing {
-webkit-transition: all 100ms;
transition: all 100ms;
}

Avoid !important

Avoid using the !important keyword. Treat it like the nuclear option, only to be used in the most extreme of cases. This fundamentally destroys the specificity feature and can even break accessibility for some users.

Developers in the future who are either trying to debug a styling issue, or trying to use normal specificity to override a style for a particular element only to find that they can’t.

Formatting of CSS

  • Use a new line for every selector and every declaration.
  • Use a single space before the opening brace in a set of rules.
  • Use lowercase for elements and shorthand hex values, e.g., #aaa.
  • Hyphenate class selector names; avoid underscores and camelCase
  • Use one level of indentation for each declaration.
  • Add a single space between the property and value.
    Example:
    prop: value; and not prop:value;
  • Always include a semi-colon at the end of the last declaration.
  • Naming convention should be followed.
  • Use shorthand. padding: 15px 0; and not padding: 15px 0px 15px 0px;
  • Avoid units on zero values.

CSS File Handling:

  • Use multiple style sheets, but be aware of them expanding beyond control.
  • Not include unused style rules.
  • Offer a clear place for new styling going forwards
  • Not be a drag in page loading performance
Continue Reading
1 2 3 5