How to add utm_params to links

How to add utm query params to every external link on your blog

Every digital marketing knows the importance of utm query parameters, basically those text like utm_source=”” in your browser window location bar.
Its a great way to slice and dice and find out where traffic is coming from, which campaigns are more effective, is social working as expected.
Lets say you want to add these query params to your blog post so that the websites owners to whom you are linking can easily know how many clicks are coming through the website.
I had such a requirement for my blog http://jquer.in/ which now contains more than 5000 (function addUtmParams(source, medium, campaign) { $("a").each(function () { var $this = $(this); var linkHref = $this.attr("href"); if (linkHref.indexOf(window.location.hostname) < 0) { var updateLink = updateQueryString({ utm_source: source, utm_medium: medium, utm_campaign: campaign }, linkHref); $this.attr("href", updateLink); } }); })("jquer.in", "website", "content-curation"); // The thee configurable options ( utm_source, utm_medium, utm_campaign) // In my case source is jquer.in, medium is website, campaign is content-curation // Inspired from http://stackoverflow.com/questions/5999118/add-or-update-query-string-parameter function updateQueryString(params, url) { if (!url) url = window.location.href; for (var key in params) { if (params.hasOwnProperty(key)) { var value = params[key]; var re = new RegExp("([?&])" + key + "=.*?(&|#|$)(.*)", "gi"); if (re.test(url)) { if (typeof value !== ‘undefined’ && value !== null) return url.replace(re, ‘$1′ + key + "=" + value + ‘$2$3′); else { var hash = url.split(‘#’); url = hash[0].replace(re, ‘$1$3′).replace(/(&|\?)$/, ”); if (typeof hash[1] !== ‘undefined’ && hash[1] !== null) url += ‘#’ + hash[1]; } } else if (typeof value !== ‘undefined’ && value !== null) { var separator = url.indexOf(‘?’) !== -1 ? ‘&’ : ‘?’, hash = url.split(‘#’); url = hash[0] + separator + key + ‘=’ + value; if (typeof hash[1] !== ‘undefined’ && hash[1] !== null) url += ‘#’ + hash[1]; } } } return url; }

View the functions file of jquer.in

Heres a gist

You can add the code to your functions.js or a javascript file of your wordpress theme.
Let me know what you think in the comments :-

Frontb.in screenshot

The Front-End Tab

During your normal debugging and designing applications, what do you require the most ?

How about designing a an extension for chrome that will automatically load all your favourite tools on your new tab page.This is what I have done this weekend.

Currently It has got the following tools :
Checkout the demo here

  1. JS Beautifier
  2. Html Beautifier
  3. CSS Beautifier
  4. JSON Lint
  5. Url Encoder
  6. Url decoder
  7. JShint

Update: version 0.2

  1. Added CodeMirror for syntax highlighting
  2. Remove Whitespace from json and normal text
  3. Html Renderer
  4. Markdown Renderer

Update: version 0.3

  1. Express-js App for running.
  2. Mongodb for storing the pastebins.
  3. html5 pushState while saving
  4. html5 localstorage for saving previous pastebins
  5. Added Grunt Workflow

Update version 0.4

  1. Changed to a better design with congruent background and logo
  2. Added Favicons
  3. Added Nanobar for showing progress

Update 18th Oct 2014

  1. All button sizes should be same
  2. Reset button should be up
  3. Should be viewable on mobile.Made it responsive
  4. Added basic description on clicking on logo
  5. Fixed a bug in JSONLint
  6. Fix Scroll issue in Codemirror caused by overflow:scroll

Check out the demo !
Don’t forget to fork it on github and submit pull requests and issues.

Its open sourced under MIT License.

Some awesome snippets from angular-js source code.

I have started going through the angular-js source code trying to understand the internal workings of the same.
Its about 22000 lines of pure magic and an awesome learning experience for new and experienced developers.
Here are some of the gists that I have collected.
BTW, heres the source code : https://ajax.googleapis.com/ajax/libs/angularjs/1.2.24/angular.js
Please feel free to send me any pull requests if you find that the gist could be improved and comment if you have more awesome gists to share !

  1. Cloning an object with multiple nested functions or keys using javascript

  2. Simple function to remove special characters from a string.

  3. Angular: UID function creator

  4. Angular: Simple functions

  5. Simple function to remove special characters from a string.

  6. Angular: Function to calculate the length of string

  7. Angular: Regex to search for html tags

  8. Angular : The actual code behind the magical angular injector dependencies.

Also check out angular-js.in >> A curated list of angular directives.

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

Sources for Good Articles.

I love reading.period.Normally I prefer to read on my Kindle for articles or a rusty old novel suits me as well.
I have compiled a list of websites for your daily dose of good well written articles.

1.Readability.

This is my top priority for good source of articles.It lists all top reads that people are sharing on readability.
You can be sure that the articles over here will be awesome to read.

2.longform.org

This features all the long articles or mini stories that will be good to read on a bus ride.
Its should be your top priority if you love mini-thrillers or in-depth reviews and articles.
If you are on a reading spree do check out their best of lists. These are the Absolute nuggets of gold for reading .

3.Medium.com

Medium is the third on my list.You should be on the lookout for small, funny ,hilarious , jaw-breaking , mind-bending (insert adjectives) articles.If you are on the lookout for

Their monthly top 100 list is also great list of small useful articles.

Hint : You can even use this browser extension from amazon for sending articles to your Kindle.A true life-save for those who love to read on Kindles.

What do you think ? Have I missed an important articles aggregation website somewhere ?
Do let me know in the comments below.

Web Design Workshop

I had taken a basic Web Design workshop in my college organized via IEEE Vishwakarma Student Chapter.

The Workshop was divided in two phases;the first phase had html and css while the second taught js and bootstrap.
The objective was that the Student has to be able to make simple and basic websites and know how html,css and js works and have upload his own website on https://neocities.org/browse

Day 1

Day 2

The awesome blog of a Javascript developer.