Category Archives: playground

front-end-developer-tools

Front-end Developer Tools

Nowadays front-end development isn’t just about JavaScript ,html and css there are a lot of other new entrants that will help you to automate your process and save precious development time.
The first technology that you will encounter is grunt.

GRUNT

Grunt is JavaScript task-runner designed to automate almost everything.Its thousand of plugins has you covered for normal tasks like minification , concatenation and linting as well as image compression , building sass , coffeescript or your favorite pre-processor , unit testing , end-to-end testing etc.

It works by defining your development requirements in package.json.
Example


{
"name": "my-project-name",
"version": "0.1.0",
"devDependencies": {
"grunt": "~0.4.2",
"grunt-contrib-jshint": "~0.6.3",
"grunt-contrib-nodeunit": "~0.2.0",
"grunt-contrib-uglify": "~0.2.2"
}
}

Then you define your Gruntfile.js which will contain the individual tasks as well as group tasks which says which files to minify and where to paste them.

A sample gruntfile


module.exports = function(grunt) {

grunt.initConfig({
pkg: grunt.file.readJSON('package.json'),
concat: {
options: {
separator: ';'
},
dist: {
src: ['src/**/*.js'],
dest: 'dist/<%= pkg.name %>.js'
}
},
uglify: {
options: {
banner: '/*! <%= pkg.name %> <%= grunt.template.today("dd-mm-yyyy") %> */\n'
},
dist: {
files: {
'dist/<%= pkg.name %>.min.js': ['<%= concat.dist.dest %>']
}
}
},
jshint: {
files: ['Gruntfile.js', 'src/**/*.js', 'test/**/*.js'],
options: {
// options here to override JSHint defaults
globals: {
jQuery: true,
console: true,
module: true,
document: true
}
}
},
watch: {
files: ['<%= jshint.files %>'],
tasks: ['jshint', 'qunit']
}
});

grunt.loadNpmTasks('grunt-contrib-uglify');
grunt.loadNpmTasks('grunt-contrib-jshint');
grunt.loadNpmTasks('grunt-contrib-qunit');
grunt.loadNpmTasks('grunt-contrib-watch');
grunt.loadNpmTasks('grunt-contrib-concat');

grunt.registerTask('test', ['jshint', 'qunit']);

grunt.registerTask('default', ['jshint', 'qunit', 'concat', 'uglify']);

};

After that you just run npm install and you have a simple workflow ready.

Grunt Official

BOWER

Bower is the package manager for the front end web development similar to what npm is to node-js.
You have a bower.json

Example bower.json file


{
"name": "my-project",
"version": "1.0.0",
"main": "path/to/main.css",
"ignore": [
".jshintrc",
"**/*.txt"
],
"dependencies": {
"": "",
"": "",
"": " "
},
"devDependencies": {
"": ""
}
}

Bower Official

CoffeeScript

CoffeeScript is a little language for Ruby affectionados that compiles to javascript.Its for you if you don’t like brackets in your code.

This is how you express a one-line function in javascript :-


var square = function(x) {
return x * x;
};

A better more concise version will be in coffeescript :


square = (x) -> x * x

Similarly for Array comprehensions you have :


cubes = (math.cube num for num in list)

instead of the long way in javascript


cubes = (function() {
var _i, _len, _results;
_results = [];
for (_i = 0, _len = list.length; _i < _len; _i++) { num = list[_i]; _results.push(math.cube(num)); } return _results; })();

Coffescript Official

SASS / LESS

Less and Sass are CSS pre-processors, meaning that it extends the CSS language, adding features that allow variables, mixins, functions and many other techniques that allow you to make CSS that is more maintainable, themable and extendable.

Less and Sass can run inside Node, in the browser and inside Rhino. There are also many 3rd party tools that allow you to compile your files and watch for changes.

You should be using css pre-processors for large projects .To explain ,Bootstrap uses a central base.less file which contains all the color names , default table spacing , all you need to do is to change that file and it will be propagated throughout.

Yet the best features are mixins or functions which enable you to use lighten , darken , saturate , math functions finally.

Example , here is the LESS code

@base: #f938ab;

.box-shadow(@style, @c) when (iscolor(@c)) {
-webkit-box-shadow: @style @c;
box-shadow: @style @c;
}
.box-shadow(@style, @alpha: 50%) when (isnumber(@alpha)) {
.box-shadow(@style, rgba(0, 0, 0, @alpha));
}
.box {
color: saturate(@base, 5%);
border-color: lighten(@base, 30%);
div { .box-shadow(0 0 5px, 30%) }
}

and this is the compiled css code :

.box {
color: #fe33ac;
border-color: #fdcdea;
}
.box div {
-webkit-box-shadow: 0 0 5px rgba(0, 0, 0, 0.3);
box-shadow: 0 0 5px rgba(0, 0, 0, 0.3);
}

LESS Official
SASS Official

YEOMEN

Yeomen should be the default scaffolding tool for your next web project.

How to use in three steps :-

npm install -g yo
npm install -g generator-angular-fullstack
yo angular-fullstack myapp

The above commands will install the angular-full-stack generator :
[Note you will need MongoDB installed for this stack]
Yeomen will also install grunt , bower and other goodies directly into your workflow.

These are the list of all the generators available : http://yeoman.io/community-generators.html

Yeoman Official

jay-svg

How to do SVG path animations

Introduction:

Scalable Vector Graphics (SVG) is an XML-based vector image format for two-dimensional graphics that has support for interactivity and animation.

With the imminent dominance of html5 , svg poses a unique advantage for creating unique interactive experiences.Unlike images , svg are responsive in themselves , can be animated , given classes and ids , can be dynamically created and edited.

A primer in SVG is explained at Blog post with the demo at SVG demo

Heres a demo of what we have made

Step 1 : Download Inkscape

Inkscape is an open-source vector graphics editor similar to Adobe Illustrator, Corel Draw, Freehand, or Xara X. What sets Inkscape apart is its use of Scalable Vector Graphics (SVG), an open XML-based W3C standard, as the native format.

Download

You will need Inkscape to create complex paths which will be used for the svg path animations.

screenshot of inkscape
inkscape

Step 2 : Draw the SVG

Draw the SVG drawing using tools of Inkscape Draw Lines and Bezier Curves.You can edit the curves to suit your needs.This might take some time to make the curves perfect.
Its important to make sure that there is only 1 path throughout the drawing with only one beginning and one end.

Step 3 : Javascript Code for animation


The code works this way , first we give the strokeDasharray property the maximum length of the the path .We also give this length to property strokeDashOffset
Also the path is given a transition of 3s with easing ease-in-out.
Then the property strokeDashOffset is set to 0 which triggers the easing animation.

function  docready () {
	var path = document.querySelector('svg path');
	var length = path.getTotalLength();

	path.style.transition = path.style.WebkitTransition = 'none';

	path.style.strokeDasharray = length + ' ' + length;
	path.style.strokeDashoffset = length ;

        path.getBoundingClientRect();

	path.style.transition = path.style.WebkitTransition = 'stroke-dashoffset 3s ease-in-out';

	// Below line triggers the Animation

	path.style.strokeDashoffset = '0';
}
window.onload = docready;

Source

Step 4 : html file

Copy the svg code generated to any .html file.
To the bottom before the ending body tag , add the above javascript code.
Save it and open the file in your favourite browser.
You can change the stroke-width:4px; to make the line thicker.

There is also a jQuery plugin for it called Lazy Line Painter for making this svg path animations simpler.

DEMO

The main inspiration for this article : http://jakearchibald.com/2013/animated-line-drawing-svg/

grid-builder

Bootstrap 3 Grid Builder

Twitter Bootstrap is awesome .Since its inception it has now got more than 57000 stars , 19,000 forks ,  10,000 issues.

Way to go @mdo and @fat.

The Bootstrap 3 was finally released on 19th August , 2013 ,here’s the link to the blog post annoncing its release .

The biggest advantage was the new super-powerful grid system added to Bootstrap .With four tiers of grid classes—phones, tablets, desktops, and large desktops—you can do some super crazy awesome layouts.But it quickly gets complicated as you try to wrap your head around it.Bootstrap 3 is more flexible in terms of what it can do but keeping 3 different layouts in your head
simultaneously is very complex.

This is why I built the open-source Bootstrap 3 Grid Builder.

grid-builder
twitter bootstrap

 

Features :-

1 . Pre-built templates for kick-starting development.

2. Content placeholders to understand which piece goes where.

3. Quickly testing your layout across multiple devices.

4. Optimized code generation .

Expert Tips for getting started with responsive design :-

1. Start with widely used frameworks like Bootstrap or Foundation. Use the builder for a quick-start on the layout.

2. Don’t start from scratch  : Keep a lookout for the open-source js libraries or jquery plugins that I have already done the bulk of the work. Here’s a great list to get you started : http://jquer.in/category/responsive/

3.Reduce your content : think small screen first , then tablet design and finally for the desktop.

4. TEST ,TEST and TEST : Use tools like RWD bookmarklet , jresize , finally testing on a real device .Also don’t forget to use fast-click or touch for instant clicks on mobile.

DEMO

Github