User Token Authentication flow in Nodejs - Part 1

The following diagram shows the steps involved in authentication in nodejs. 

Bootstrap 3 CSS Animation & Transition Effects

Animation Effects

Number of trending websites are now using CSS Animation library like Animate.css  for effects like dropIn, dropDown, fadeIn.

Lets add transition animation to  following element
<div id="header-text">This is text heading.</div>

All we have to do is to include Animation.css file in our page and then add following class to element
<div id="header-text" class="animated fadeIn">This is text heading.</div>

That's it!

Adding Animation effects on Scroll of page

Animation effect triggers even if page element is not visible on screen. We don't want animation to trigger when its not visible. We want to trigger animation when user scrolls the page and element is about to be displayed.

For that we can use WOW.js library. We need to initialize WOW object in our page and then we can add wow class which will give the desired result.

Blur Block when user user scrolls down from that element

We can set opacity of the element when user scrolls down the element. Based on size of window and scollTop position we can caculate opacity of the block.

function() {
var h = window.innerHeight;
$(window).on('scroll', function() {
var st = $(this).scrollTop();
$('#element').css('opacity', (1-st/h) );
});
},

 Show Spinner until all elements(images) are loaded

$(window).load(function() {
$('#status').delay(100).fadeOut('slow');
$('#preloader').delay(500).fadeOut('slow');
}

 In html add following

<div class="sk-spinner sk-spinner-wave">
<div class="sk-rect1"></div>
<div class="sk-rect2"></div>
<div class="sk-rect3"></div>
<div class="sk-rect4"></div>
<div class="sk-rect5"></div>
</div>

Along with css  style mentioned here

Automatically Generate SQL Loader Control File Script

Script to generate SQL Loader control file with all columns from the table_name and in the same order columns are created in table


<pre class="brush: sql">

SELECT COL_NAME, LOADER_TYPE
FROM (
SELECT 'LOAD DATA
APPEND
INTO TABLE ' || '&TABLE_NAME' || ' FIELDS TERMINATED BY ","
OPTIONALLY ENCLOSED BY ''"''
TRAILING NULLCOLS
('
COL_NAME,
' ' LOADER_TYPE,
-999 SORTING_N
FROM DUAL
UNION ALL
SELECT COLUMN_NAME COL_NAME,
DECODE (
COLUMN_NAME,
'CREATED_BY', '"FND_GLOBAL.USER_ID"',
'CREATION_DATE', 'SYSDATE',
'LAST_UPDATED_BY', '"FND_GLOBAL.USER_ID"',
'LAST_UPDATE_DATE', 'SYSDATE',
DECODE (
DATA_TYPE,
'TIMESTAMP(6)', 'TIMESTAMP "YYYY-MM-DD HH24:MI:SS.FF",',
'NUMBER', 'DECIMAL EXTERNAL,',
'VARCHAR2', 'CHAR "TRIM(:' || COLUMN_NAME || ')",',
'CHAR', 'CHAR',
'DATE', '"TO_DATE(SUBSTR(:'
|| COLUMN_NAME
|| ',1,19),''YYYY-MM-DD HH24:MI:SS'')",'))
LOADER_TYPE,
COLUMN_ID SORTING_N
FROM ALL_TAB_COLS
WHERE OWNER = UPPER ('&SCHEMA_NAME') AND TABLE_NAME = UPPER ('&TABLE_NAME')
UNION ALL
SELECT ')' COL_NAME, '' LOADER_TYPE, 10000 SORTING_N FROM DUAL
)
ORDER BY SORTING_N

</pre>

Understanding Bootstrap 3 Grid Layout System

• Bootstrap is HTML, CSS, JS framework for developing responsive websites.
• Bootstrap v3 uses mobile first approach. Layout is assumed to be designed for mobile devices i.e, for extra small view port. All element are stacked one over the other by default.
• The grid (viewport) is divided into 12 equally spaced cells/columns.If we want some element to use two cell spaces we will mention col-xx-2 and you can give other element all remaining cell using col-xx-10. xx declares viewport

<div class ="row">
<div class="col-xs-2"> First 2</div>
<div class="col-xs-10"> Remaining 10</div>
</div>

• When column class col-xs-6 is specified, it means that on extra small device screen, divide screen in half i.e, give six cell space to this element.
  
• col-md-4 mean on medium size screen, give this element 4 column space.
• <div class="col-xs-6 col-md-4"> means on extra small screen this element will take 6 column space and on medium size screen 4

<div class ="row">
<div class="col-xs-2"> First 2</div>
<div class="col-xs-10"> Remaining 10</div>
</div>

Rendering on Extra small device browser

 Rendering on Medium size screen[/caption]

•  col-xx-n class adds padding of 15px on right and left. To counter that on right and left edge of a row, class "row" adds padding of -15px on left and right.
•  .container class has one fixed width for each screen size(xs, md..) something like  @media (min-width: 992px) {
  .container {
  width: 970px;
  }
  }
  .container-fluid expands to fill available width.

AngularJS Example

Develop a simple app where web page link is provided as input and it will display screenshots of the web page.

• AngularJS provides two-way data binding. If data model changes, view is updated i.e, DOM of the webpage will refresh with new data and if new value is entered in field, data model will update.
• We can divide application into different components and AngularJS Dependency Injection mechanism will inject components into each other.
• Accessing DOM should be done only in Directives. Directives are AngularJS markers which adds behaviour to DOM element. Directives are added to HTML template to add dynamic behavior.

<div  ng-repeat="c in book.notes track by $index">

<img ng-src="{{c}}" width="500" height="500">

</div>

• ng-repeat is a directive which instantiates template once per item( variable c) in collection(book.notes Array)
  
• If the value of book.notes =['link1.jpg','link2.jpg'] then view will be rendered with two div elements, one for each link in book.notes
• <input ng-model="book.note" >
  ng-model directive stores/updates value of the input field. note is model field which will be updated based on input field.

HTML Template

Following is the HTML template we will use to display one input box which expects web page url and an add button which add link to image collection.

<div ng-app="notes" ng-controller="notesController as book">

<button ng-click="book.add()">Add</button>

<input min="0" ng-model="book.note" required >

<div ng-repeat="c in book.notes track by $index">

<img ng-src="{{c}}" width="500" height="500">

Controller View Model is defined in Controller file

angular.module('notes',[])

.controller('notesController',function(){

this.notes=[];

this.add=function (){

this.notes.push('http://screenshot.etf1.fr/?url='+this.note);

};

• Controller is attached to DOM using ng-controller.
• All properties and methods defined inside controller are available  in DOM where controller is attached. Properties are called view model and methods are called behaviour.
• notes is a model and add is behaviour which is available in DOM where ng-controller="notesController" is added.

When Add button is clicked the notes model is updated and view is updated accordingly  because ng-repeat is based on notes model.

Complete HTML code and controller.js code

<html lang="en">

<head>

<meta charset="UTF-8">

<title>Example</title>

<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.3.5/angular.min.js"></script>

<script src="controller.js"></script>

</head>

<body >

<div ng-app="notes" ng-controller="notesController as book">

<button ng-click="book.add()">Add</button>

<input min="0" ng-model="book.note" required >



<div class="col-xs-3" ng-repeat="c in book.notes track by $index">

<img ng-src="{{c}}" width="500" height="500"> </img>

</div>

</body>

</html>

Controller.js

angular.module('notes',[])

.controller('notesController',function(){

this.notes=[];

this.add=function (){

this.notes.push('http://screenshot.etf1.fr/?url='+this.note);

};

})

Developing Chrome Extension - How to Build First Chrome Extension

Let's develop a  simple chrome extension to modify some text on visited webpage.
Whenever Google website is visited we will modify all 'Google' text string on page to 'Foogle'.

Following files will be required to achieve this - manifest.json and inject.js

manifest.json

• Manifest file is required for all extensions.


• It defines meta data for Chrome.


• All files & permissions should be declared here.


• Resource files like images or other template files should be declared as "web_accessible_resources"


• 
  
  [sourcecode language="javascript"]
  
  {
  // required
  "manifest_version": 2
  "name": "Foogle Search",
  "version": "0.1",
  
  "content_scripts": [
  {
  "matches": ["https://www.google.com/*"],
  "js": ["inject.js"],
  "run_at": "document_end"
  }
  ],
  
  }
  
  [/sourcecode]
  
  "Foogle Search" is the name of chrome extension, and 0.1 is its version.
  content_scripts section tell chrome to insert javascript file inject.js in web pages which matches URL pattern google.com/*
  manifest_version is a mandatory field.

inject.js

• Content Scripts execute in the context of the visited web page and can access and modify the DOM of the visited page.


• Content Script do not have access to JavaScript variables or functions of visited web page. Content scripts are not aware of the JavaScript code of the visited page.


• Since they run in context of webpage they cannot directly communicate with rest of the extension. Message passing is used for communication between content script and rest of the extension.


• Content scripts can be injected every time a matching URL web page is visited  or can be inserted dynamically in the webpage based on some conditions. Cross Origin Permission should be specified in the later case.


• Following javascript code searches for all occurrences of text 'Google' in web page and replaces it with 'Foogle'.

[sourcecode language="javascript"]

document.body.innerHTML = document.body.innerHTML.replace(new RegExp("Google", "g"), "Foogle");

[/sourcecode]

Now, to test the extension in brower

1. Open extensions option in Chrome. Type chrome://extensions/ in chrome tab
2. Enable Deverloper Mode checkbox.
3. Click on 'Load Unpackged Extension'
4. Select folder where you have saved extension files.