What is nodejs?

Hmm.. you will get plenty of good resources when you google it with this keyword. Start by installing it from here : nodejs

What is npm?

Node package manager and it is used to add or remove node applications. It came as a default package in newer node installations, both windows and mac. Install it on other platforms by refering this resource. Check out all the npm registry entries here

Install your fevorite application – npm install app-name.
Example:- npm install jsbeautify

First node program

Prerequisite

• Install nodejs
• Github account [Optional]

Objective: Create a nodejs application that reads a file and replace all the matching text in it with the one that you pass as an argument.

Eg:- readme.txt content – “Drink like a dog”

replaceme readme.txt dog cat

//out.txt – Drink like a cat

Agenda

• Setting up base – folder structure
• Creating node modules and require it in other modules
• Read & write file using node
• Passing arguments from CLI
• Creating package.json
• Packaging application
• Adding users to npm registry
• Publishing application
• Uninstallling application from system
• Unpublishing application from npm registry

Setting up base – folder structure

Application’s folder structure as follows.

replaceme
   - bin
   --- replaceme.js
   - lib
   --- main.js
   --- replace.js
   package.json
   README.md

Open cmd and type mkdir replaceme && cd replaceme && mkdir bin && mkdir lib. Create replacement.js, main.js and replace.js inside respective folders.

Create replace function

var text = "To live long, eat like a cat, drink like a dog.";
var out = text.replace('cat','dog');
console.log(out);

Run it with c:\>replaceme\lib\> node replace.js

//Output – To live long, eat like a dog, drink like a dog.

 
Node modules

Next step is to convert above code into a node module so that we can require it in other js/modules. Incuding an external javascript in our document is simple – require(‘modulejs’);.

//replaceme.js
exports.replaceme = function(text, vala, valb){
	function out(val){
		return text.replace(vala,valb);
	}
	return out(vala,valb);
}

exports.functionName – Its the simplest way to create a module & now replaceme is a module. We can import it in main.js as require(‘./replaceme’);

More informations on creating modules – check this link

c:\>replaceme\lib\> node

> re = require('./replaceme')

> re.replaceme("The text to replace","replace","add")

> The text to add

Our module is functioning now. Now create main.js.

//main.js
 
(function() {
	//Declaring variables  
	var fs, reptxt, filedata;
 
	//Requiring files
	fs = require('fs');
	reptxt = require ('./replaceme');
 
	//Reading file test.txt
	fs.readFile("../test.txt",'utf8',function(err,data){
	  if(err) {
		console.error("Could not open file: %s", err);
		process.exit(1);
	 }
	 //Calling replacement function
	 console.log(reptxt.replaceme(data,"npm","123"));
	});
 
}).call(this)

Main.js reads file content and passes the content to replaceme function. It will output replaced string.

 
Read file using node file module

Now we have to write its out put into a file and save it in the same dir. It is also possible to overwrite the same file.

//main.js
 
(function() {
	//Declaring variables  
	var fs, reptxt, filedata;
 
	//Requiring files
	fs = require('fs');
	reptxt = require ('./replaceme');
 
	//Reading files
	fs.readFile("../test.txt",'utf8',function(err,data){
	  if(err) {
		console.error("Could not open file: %s", err);
		process.exit(1);
	 }
	 //Calling replacement function
	 filedata = reptxt.replaceme(data,"npm","123");
 
	 //Writing replaced text into a new file
	fs.writeFile("../out.txt", filedata, function(err){
		  	if(err) {
				console.error("Error saving file %s", err);
				process.exit(1);
		  	}
			console.log('out.txt file saved!');
		});
 
	});
 
}).call(this)

Now when we run node command node main.js you will see a new file named ‘out.txt’.

 
Passing arguments

We neeed to pass our filename as an argument. ‘process.argv’ used to catch arguments that passes through CLI. It gives us an array containing commandline arguments. We have to process this array & get the required values.

Here in our example we are passing 3 arguments ‘the file, keyword, replace word’ – node main.js text.txt cat dog

This is the native way to parse commandline arguments. There are other libraries available for easy parsing of arguments [optimist, commander etc... ].

// print process.argv - node main.js ../text.txt cat dog
process.argv.forEach(function (val, index, array) {
  console.log(index + ': ' + val);
});
 
//Output
0: node
1: path/main.js
2: ../text.txt
3: cat
4: dog

We need 2,3 & 4 values. Note: its not a best practice to parsing parameter like this. Its better to use any node libraries.

(function() {
	//Declaring variables  
	var fs, reptxt, filedata;
 
	//Requiring files
	fs = require('fs');
	reptxt = require ('./replaceme');
 
	//Reading files
	fs.readFile(process.argv[2],'utf8',function(err,data){
	  if(err) {
		console.error("Could not open file: %s", err);
		process.exit(1);
	 }
	 //Calling replacement function
	 filedata = reptxt.replaceme(data,process.argv[3],process.argv[4]);
 
	 //Writing replaced text into a new file
	fs.writeFile("../out.txt", filedata, function(err){
		  	if(err) {
				console.error("Error saving file", err);
				process.exit(1);
		  	}
			console.log('out.txt file saved!');
		});
 
	});
 
}).call(this)

Now we got 3 arguments ‘../text.txt, cat, dog’. node main.js ../text.txt cat dog this node command will read text.txt and replace all the “cat” text with “dog” and output the result in ‘out.txt’.

Bin folder – replaceme file

This file is the entry point. We point to this file from package.json.

    #!/usr/bin/env node
    var path = require('path');
    var fs = require('fs');
    var lib = path.join(path.dirname(fs.realpathSync(__filename)), '../lib');
    require(lib + '/main.js');

Preparing to publish

Creating package.json

This text file contains all the information about the project, like project path, dependencies, author name, tags, bug tracking info etc.. To create a package.json run npm init command from the root folder. It will ask series of questions and finally it will create package.json file.

Our package.json file will look like this.

{
  "author": "praveen vijayan ",
  "name": "replaceme",
  "description": "Node commandline application to replace selected text in a file.",
  "version": "0.1.1",
  "repository": {
    "url": ""
  },
  "main": "./lib/main",
  "bin": {
    "replaceme": "./bin/replaceme"
  },
  "dependencies": {},
  "devDependencies": {},
  "optionalDependencies": {},
  "engines": {
    "node": "*"
  }
}

Add new user to npm registry

npm adduser
Provide username & email address. This command will register a new user into npm registry.

Finally publish to npm registry

npm publish and test by installing it

npm install -g replaceme

 
Uninstall node package

npm uninstall -g replaceme

 
Unpublish from npm registry

npm unpublish replaceme@0.1.1

Upload files into github

It is not a compelsory part but it is a best practice to update your files to github and add links in package.json. Open README.md file created earlier and add basic info about your project using markdown syntax. Commit all files into git and activate issue tracker from account.

Download files

happy nodding

Usage Drag and drop weight block into scale [over doted outline]. Double click to remove a weight. Demo uses jQuery for DOM manipulation, css3 rotation for needle movement.

HTML5 Drag and drop basics Before implementing check the readiness of drag and drop Currently it better to use jQuery UI or other JavaScript libraries to do a better cross browser handling.

HTML5 Drag and drop based on the Microsoft IE’s original implementation (IE5 and up). Image and links are dragabble by default in browsers. Proof? try drag and drop them in the address bar, you will be taken to the specified image/link. Set draggable=”true” in order to make other elements draggable.

<div draggable="true">Im a draggable content</div>

Okay, now about drop zone. There is no droppable=”true”!!. We have to handle it via javascript events. Following are the events related to DnD.

• dragstart
• drag
• dragenter
• dragleave
• dragover
• drop
• dragend

<div draggable="true" id="drag">Im a draggable content</div>
<div id="dropzone">Drop area</div>
<script>
var elem = document.getElementById('drag');
    elem.addEventListener('dragstart', function(e){
      //Do whatever on when user start dragging.
 
    }, false)
</script>

Next step is to drop our dragged payload. We need 2 events (dragover and dragenter) in order to make an element drop capable.

<div draggable="true" id="drag">Im a draggable content</div>
<div id="dropzone">Drop area</div>
<script>
var elem = document.getElementById('drag'),
    dropZone = document.getElementById('dropzone');
    elem.addEventListener('dragstart', function(e){
      //Do whatever on when user start dragging.
    }, false);
 
elem.addEventListener('dragenter', function(e){
      //Things like visual cued for the drop zone can be added here.
    }, false);
 
elem.addEventListener('dragover', function(e){
     //Things like visual cued for the drop zone can be added here.
  }, false);
 
</script>

Now we have to do the actual drop. ‘dataTransfer’ holds the draged object. dataTransfer.getData(‘text/html’) will get you the actual dragged element.

var dropZone = document.getElementById('dropzone');
 elem.addEventListener('drop', function(e){
      e.preventDefault();
      dropZone.innerHTML = e.dataTransfer.getData('text/html');      
    }, false)

Summary
DnD spec is not completed & it is also painful to develop a cross browser DnD solution with pure API now.

Resources
Native HTML5 Drag and Drop – HTML5 Rocks
Drag and drop html play ground
Drag and Drop Mozilla MDN
Article on useragentman.com

Example style document generated using styledocco – twitter bootstrap

Nodejs

It is JavaScript running on server using google’s V8 JavaScript engine. Download latest node installer (win/mac/source code) form http://nodejs.org/ & install it.

After installation open command prompt and type “node -v”. You will get the node version number.

After nodejs installation, install StyleDocco via npm (Node package manager). In windows open command prompt/mac terminal  & type.
npm install -g styledocco. In mac you have to type sudo npm install -g styledocco .

It will install in few minute depending upon your connection speed.

Preparing stylesheet for documentation

Styledocco uses marked to parse & generate HTML. First we will check a simple stylesheet (example from author).

/* Provides extra visual weight and identifies the primary action in a set of buttons 
 ``` <button>Primary</button> ``` */ 
.btn.primary { background: blue; color: white; }

Save the css on your site folder.  Now need a readme.md file. Create a text file and rename it to readme.md as save it on the same folder. In read me file you can use markdown to show the details about the style sheet. This readme will be the landing page of your style guide. Readme.md is required otherwise styledocco will throw an error.

Style guide creation

Syntax

styledocco [options] [INPUT]

Options
–name, -n Name of the project (required)
–out, -o Output directory (default: “docs”)
–tmpl Directory for custom docs.jade template (optional)
–overwrite Overwrite existing files (docs.css) in target directory.

Open command prompt and type.

styledocco -n styleguide style.css

Styledocco will parse all comment in the document & create style guide based on the comments provided in your css file. Styledocco uses markdown syntax.

Your style document will create inside docs folder. If you want a different directory to store output files use -o in your styledocco create command (styledocco -n styleguide -o c:\styleguide style.css). Open index.html form docs folder and you can see a botton and its style description.

Styledocco is also capable of parsing LESS, SASS & SCSS files and can generate style documents. Twitter bootstrap style guide is an example.

Use markdown syntax in your readme.md & stylesheet files. First & second level of heading will automatically split into sections. If you want to exclude a comment, that you wish not being parsed by Styledocco, add a few space in front of the comment.

Example -

/*This comment will parse by Styledocco*/

     /*No this is an internal style comment*/

Large web projects we can use style guide for future reference and  optimization.

Steps to install

1. Download the font from google android design center.
Robot font

2. Install the font

3. Right click desktop & select personalize

4. Select window color

5. Select advanced appearance settings

6. Select Item drop down & Change font to Roboto for the following.

7. To change windows system font – type regedit on windows run. Goto
HKEY_LOCAL_MACHINE > Software > Microsoft > Windows NT > CurrentVersion > FontSubstitutes

8. Restart

Check out the demos to know what we are going to achieve with pure CSS.

Basics of target
Target is a css3 selector. You can select an element using fragment identifier & id.

Clicking on a link with anchor identifier bring you to certain part of the page

By using :target css3 selector we can select the element with same id & can apply style.

Using this we are going to create a tab, image gallery & notification only using CSS. Following codes are bare minimum requirement to build each modules. Please refer each demo’s code for more styling & animation.

Pure CSS tab

html

• Tab1
• Tab2
• Tab3

css

.tab{
    overflow:hidden;
}
.tab li{
   float:left;
   padding:10px;
   background:#c1c1c1;
}
div{
  display:none;
}
div:target{
 display:block;
} ​

This is the bare minimum code you need to create a CSS only tab. But we can take this further and can make a beautiful tab.

Check out this demo.

Pure CSS image gallery [lightbox]

HTML

​

CSS

li{
position:absolute;
background:rgba(0,0,0,.5);
left:0;
right:0;
top:0;
bottom:0;
display:none;
}
li:target{
    display:inline-block;
    vertical-align:middle;
}
li img{
  position:absolute;
  top:50%;
  left:50%;
  margin-top:-100px;
  margin-left:-150px;
  display:block;
}
​

With few lines of HTML & CSS we created a modal window for image gallery. Next we will do some animations & beautification.

Check the demo.

Pure CSS notification

HTML

<a class="btn" href="#wrap">Click here to show notification</a>

CSS

#wrap {
position:absolute;
top:0;
opacity:0;
}
#wrap:target{
	top:20%;
	opacity:1;
}

The code displayed above is minimum required code to make a pure css notification. check out this full featured demo.

Browser support

Following is the code from the presentation. Paste the code in your browser's adress bar and convert it into a simple code editor.

 data:text/html,<pre contenteditable>

Following code create a full javascript code editor using Code mirror 2.

  data:text/html,<link rel="stylesheet" type="text/css" href="http://www.decodize.com/codemirror/lib/codemirror.css"><script src="http://www.decodize.com/codemirror/lib/codemirror.js"></script><script src="http://www.decodize.com/codemirror/mode/javascript/javascript.js"></script><link rel="stylesheet" type="text/css" href="http://www.decodize.com/codemirror/doc/docs.css"><style type="text/css">.CodeMirror {border-top: 1px solid black; border-bottom: 1px solid black;}</style><h1>JavaScript code editor</h1><textarea id="code" name="code"></textarea><script>var editor = CodeMirror.fromTextArea(document.getElementById("code"), {lineNumbers: true,matchBrackets: true});</script>

Copy & paste code in browser's address bar and it magically changes your browser in to a javascript code editor with syntax highlight & line number.

Adding following code will change browser in to a CSS editor.

data:text/html,<link rel="stylesheet" type="text/css" href="http://www.decodize.com/codemirror/lib/codemirror.css"><script src="http://www.decodize.com/codemirror/lib/codemirror.js"></script><script src="http://www.decodize.com/codemirror/mode/css/css.js"></script><link rel="stylesheet" type="text/css" href="http://www.decodize.com/codemirror/doc/docs.css"><style type="text/css">.CodeMirror {border-top: 1px solid black; border-bottom: 1px solid black;}</style><textarea id="code" name="code"></textarea><script>var editor = CodeMirror.fromTextArea(document.getElementById("code"), {lineNumbers: true,matchBrackets: true});</script>

Creating a bookmarklet let us access to code editor instantly. Drag and drop the following bookmarklet in to your bookmark region and click it to transform the browser into a javascript code editor.

JavaScript code editor

Since code mirror has so many supported modes: you can create code editors based on modes. Check out CodeMirror CodeMirror

Eg:

/*CSS*/
#box{
    position:absolute;
    width:200px;
    height:200px;
    top:50%;
    left:50%;
    margin-left:-100px;
    margin-right:-100px;
}
<!-- HTML -->
<div id="box">
 
</div>

Above code will work in all browsers flawlessly. But consider the following css.

/*CSS*/
#box{
    position:absolute;
    width:50%; /*Changed to percentage width*/
    height:50%; /*Changed to percentage height*/
    top:50%;
    left:50%;
    margin-left:-25%;
    margin-right:-25%;
}
<!-- HTML -->
<div id="box">
 
</div>

This code will fail in Firefox & Opera. Other browsers it just works fine. There is a work around to make it center. Check the following code.

/*CSS*/
#box {
    position:absolute;
	width:50%;
	height:50%;
	top:50%;
	left:50%;
	margin-left:-25%;
}
#newBox{
	position:absolute;
	top:-50%;
	left:0;
	bottom:50%;
	right:0;
	background:green;
}
<!-- HTML -->
<div id="box">
     <div id="newBox">
      </div>
</div>

This code will center the newBox in all browsers. Responsive centering. Automatically adjust with container width.

Check it on jsFddle