
## TypeScript + Node.js + CloudFunction + FireStore

This blog try to demo how to deploy a `Google Cloud Function` that will interact with `fireStore` NOSQL database, and use `TypeScript` for static typing at development, and instead of use CI/CD pipeline will just use `husky` at local to gard and watch the quality of the code and deploy to the Google cloud locally.

## Pre Requirement

Before we start writing the code, there're few pre requirement are not include in this blog but require the application to run.

- GCP Account/Project - make sure has active GCP account and GCP project setup.
- Firebase Account/Project - Your fireBase should connect with GCP, logged on to the Firebase and find the fireStore.
- Run `gcloud config list` - to make sure your local environment are connect to the correct project.

## Setup npm repo

Now, let's get started, first we'll need to initialize the npm repo by run the following command on your local. This will create `package.json` file with default setting.

```
npm init -y
```

## Install dependencies packages

We'll install following dependencies packages since we'll interact with firebase.

```
npm install --save firebase-admin firebase-functions
```

## Install dev dependencies packages

Install following package during the build time, such as typescript for static typing and eslint for syntax analyzer.

```
npm install --save-dev typescript @typescript-eslint/eslint-plugin @typescript-eslint/parser eslint eslint-config-google eslint-plugin-import firebase-functions-test
```

## Update `main` field at `package.json`

Update the `package.json` for start file.

```
"main": "dist/index.js",
```

## Start writing Code `index.ts`

let's create a file `index.ts` under root folder, and add following code. These are import some package we'll use later, the `firebase-functions/v2` will use the Google Cloud Function gen2, which will have better performance.

```Javascript
import * as functions from "firebase-functions/v2";
import {initializeApp} from "firebase-admin/app";
import {getFirestore} from "firebase-admin/firestore";
```

Next, we'll initialize the app, and start use the fireStore, so add following code.

```Javascript
initializeApp();

const db = getFirestore();
```

Finally, we'll hook with firebase's `functions` to listen to the request, no inside the `onRequest` will be add our main logic, which either get data from fireStore or some update or delete operations.

```Javascript
exports.main = functions
    .https.onRequest(async (request, response) => {

      console.info('on request');

    });
```

### Create `tsconfig.json`

Since we have our first code is ready, let's create our first `tfconfig.json` to compile the typescript into javascript. We'll also add following command to the `package.json`'s `scripts` section.

Once run the `npm run build`, so our code will start to compile the `index.ts` and create javascript file under the `dist/index.js`.

```
"scripts": {
    "build": "tsc"
}
```

### Ready to Deploy Code

So that's all we need for now, we should be able continue adding code to the typescript file `index.ts`, and able to use the simple typescript build to run the `npm run build` to compile the typescript into the javascript and ready to deploy to the production.

### Deploy from Local

In this blog, we don't have lots developer works on the same repo, when many ppl work on the same repository it'll be better to use CI/CD with git pull request so whenever some one create new pull request to the main branch can start continue integration and deploy the latest code to the correct environment.

So instead we'll add following `gcloud` command to the `scripts` section, when you ready to deploy to the google cloud, we can just run the `npm run deploy`, which will set the gcloud project and deploy cloud function.

```JSON
"scripts": {
    "deploy": "npm run deploy:project && npm run deploy:run",
    "deploy:project": "gcloud config set project set-to-the-correct-project-id",
    "deploy:run": "gcloud functions deploy your-cloud-function-name --trigger-http --region=us-central1 --runtime=nodejs16 --gen2 --allow-unauthenticated --entry-point=main --run-service-account=service-account-can-run-the-cloud-function"
}
```

### TypeScript deployment with Cloud Function with fireStore

That'a all for create typescript for cloud function and interact with fireStore and deploy locally.

### Other choice?

Since we use `fireStore`, which is part of `firebase`, we could use firebase's `firebase-tools` to generate list of files to support typescript, now when use with `firebase` tools, to setup the cloud function, few setting you'll have to follow with firebase's setting.

<strong>set node.js version</strong>

```Json
"engines": {
    "node": "16"
}
```

<strong>set region</strong>

```Javascript
functions.setGlobalOptions({
  region: 'us-west1-a'
});
```

<strong>set gen2</strong>

```Javascript
import * as functions from "firebase-functions/v2";
```

<strong>set function name</strong>

Now, following is how you set the function name, once I don't like is that `exports.main` limit the name can be define, use `glcoud` to define the function name, entry point, or gen2 are much more easlier than the `firebase`'s settings.

```Javascript
exports.main = functions
```

### Conclusion

Use `firebase`'s `firebase-tools` could simply setup typescript for firebase cloud function, and after tried a while use `gcloud` has maximum flexibility compare with `firebase-tools`, it could be improve but at this point I feel just use the `typescript` is much more easier.


This blog show how to setup TypeScript with CloudFunction and Deploy to Google Cloud locally

Use TypeScript with Google CloudFunction and Deploy locally


#### Table of Contents

1. Introduction
2. inline script
3. external script
4. async tag script
5. defer tag script
6. dynamic script with defer
7. inline vs external vs async vs defer
8. Conclusion

### Introduction

This blog is trying to show different way to load the script to the HTML page.

### inline script

Directly add script as inline Javascript, inline script reduce the HTTP requests when using as external script, also inline script parse script and execute immediate by the browser.

There're more scenarios use inline script could lean to lots of issues, in general it'll better to avoid use the inline.

```Javascript
<script>
;(function() {
const x = 100;
})();
</script>
```

### external script

Reference a Javascript file as external script, external script is practical when load huge amount of script file or same script need to load in many pages, there're more benefit such as browser cache or bundle, but in general load lots of javascript file is better to use external file.

Same as inline script, when browser load the external script will parse then execute immediately, which could be a issue if the parse or execution of the external JavaScript cause your page display slow.

```Javascript
<script src="./my-script.js"></script>
```

### async script

_async_ attribute could be one solution to fix the issue external script has, _async_ is a attribute to add to the external script, add _async_ attribute then the script will be executed asynchronously whenever is available.

```Javascript
<script async src="/public/script.js?id=async 2"></script>
```

### defer script

_defer_ is also one solution to fix the external script issue which to avoid execute the script immediately, unlike the _async_ will execute whenever is available, _defer_ will execute before the _DOMContentLoaded_ event.

```Defer
<script defer src="/public/script.js?id=async 2"></script>
```

### dynamic script

Another way to load the script is dynamic load the script and this could be useful depend on the scenarios.

```Javascript
<script>
    console.info('start dynamic script 1')
    var tag = document.createElement('script');
    tag.src = "/public/script.js?id=dynamic script defer 1";
    tag.defer = true;
    document.body.appendChild(tag);
</script>
```

### Compare the difference Script

What if we put all these different way of loading the JavaScript and which will be load first and last? So added following different scenario at the HTML.

```Javascript
<html>
  <head>
    <title>Sample</title>
    <script>
        ;(function(){
            console.info('inline 1')
        })();
    </script>
  </head>
  <body>
    <script defer src="/public/script.js?id=defer 1"></script>
    <p>
        Main HTML
    </p>
    <script defer src="/public/script.js?id=defer 2"></script>
    <script>
        ;(function(){
            console.info('inline 2')
        })();
    </script>
    <script src="/public/script.js?id=script 1"></script>
    <script defer src="/public/script.js?id=defer 3"></script>
    <script async src="/public/script.js?id=async 1"></script>
    <script>
        ;(function(){
            console.info('inline 3')
        })();
    </script>
    <script>
        console.info('start dynamic script 1')
        var tag = document.createElement('script');
        tag.src = "/public/script.js?id=dynamic script defer 1";
        tag.defer = true;
        document.body.appendChild(tag);
    </script>
    <script defer src="/public/script.js?id=defer 4"></script>
    <script async src="/public/script.js?id=async 2"></script>
    <script async src="/public/script.js?id=async 3"></script>
    <script src="/public/script.js?id=script 2"></script>
    <script src="/public/script.js?id=script 3"></script>
    <script src="/public/script.js?id=script 4"></script>
    <script defer src="/public/script.js?id=defer 5"></script>
    <script>
        console.info('start dynamic script 2')
        var tag = document.createElement('script');
        tag.src = "/public/script.js?id=dynamic script defer 2";
        tag.defer = true;
        document.body.appendChild(tag);
    </script>
    <script>0
        ;(function(){
            console.info('inline 4')
        })();
    </script>
    <script defer src="/public/script.js?id=defer 6"></script>
  </body>
</html>
```

![result of different script loading](/images/async-defer-inline-external-script-tag-in-javascript/img1.png)

### Conclusion

As you can see, the inline script and external script are all load first. _async_ script will load whenever possible, that's why you can see it load between external script and _async_ script, _defer_ will load before the _DOMContentLoaded_, which all _defer_ script load at the last.


The difference between async, defer inline and external script tag execution order.

Async Defer Inline or External Script Tag in JavaScript


<p>
  This blog shows how to get started with Sentry.io for tracking JavaScript
  errors and performance.&nbsp;
</p>
<p>
  Often once you ship your website, you'll continue to add content and features,
  which means you'll need to call more APIs to get more data, then your site
  will become slower, so you'll add some Cache to make the request faster and
  tracking the speed of your page so you'll know if you have improved or
  not.&nbsp;
</p>
<p>
  Now, this blog will try to show how to get started to use Sentry.io with
  JavaScript at Web Application, however, Sentry.io supports the following
  features.
</p>
<ul>
  <li>
    Open-source error tracking system support PHP, Node.js, Python, Ruby, C#,
    Java, Go, React, Angular, Vue, JavaScript.
  </li>
  <li>
    The pricing can start as free with limited features and can upgrade to the
    paid version with more.
  </li>
</ul>
<h2>Go to Sentry.io to register</h2>
<p>
  First, go to Sentry.io to create an account, follow the instruction to prepare
  the JavaScript SDK. The application used in this sample was using Node.js in
  the backend, the frontend has a typescript file
  <code>global.ts,</code> and we want to add Sentry.io to the UI's JavaScript
  code.&nbsp;
</p>
<pre class="language-markup"><code>import * as Sentry from "@sentry/browser";
import { Integrations } from "@sentry/tracing";

Sentry.init({
    dsn: "{THIS CODE WILL PROVIDE BY SENTRY.IO}",
    integrations: [new Integrations.BrowserTracing()],
    environment: 'local', // default is 'Production'
    // Set tracesSampleRate to 1.0 to capture 100%
    // of transactions for performance monitoring.
    // We recommend adjusting this value in production
    tracesSampleRate: 1.0,
  });
</code></pre>
<h2>Run the Page</h2>
<p>
  Once you run the page which has the Sentry.io code, you should start seeing
  some data at the sentry.io account. You can modify the environment as above to
  set to different environments of the data.&nbsp;
</p>
<h2>That's all</h2>
<p>
  Pretty much that's all to get started for setting up the environment for the
  Sentry.io, there're lots to setting you can do but this is minimal change you
  need to get started.&nbsp;
</p>


This blog shows how to get started with Sentry.io for tracking JavaScript errors and performance.

How to Getting Started with Sentry Error Tracking


<p>This blog compares how to use Splice versus using Slice at JavaScript.</p>
<h2>Array.prototype.slice</h2>
<p>
  <code>slice</code> will create a new array, and won't modify the origin array.
  As you can see, the following example is trying to get the first 2 items to
  start from index 0. slice function will return as the result and origin result
  didn't change.&nbsp;
</p>
<pre class="language-javascript"><code>let x = [1,2,3,4,5];
let z = x.slice(0,2);

console.log(x);
// [1,2,3,4,5]
console.log(z);
// [1,2]</code></pre>
<h2>Array.prototype.splice</h2>
<p>
  On the other hand, the <code>splice</code> will return the same result but
  also will update the origin result.&nbsp;
</p>
<pre class="language-javascript"><code>let x = [1,2,3,4,5];
let z = x.splice(0,2);

console.log(x);
// [3,4,5]
console.log(z);
// [1,2]</code></pre>


This blog compares how to use Splice versus using Slice at JavaScript.

Javascript Splice vs Slice


<p>
  This blog show difference between the JavaScript Array's method push, pop,
  shift and unshift usage.&nbsp;
</p>
<h2>Array.prototype.push</h2>
<p>
  Array's push probably is the most commonly used method if you want to add the
  item to the array,&nbsp; it will add the new item to the existing array's last
  item and return the new length. Following the code, you can see that the
  return is the total length and the existing array had been updated.&nbsp;
</p>
<pre class="language-javascript"><code> let x = [1,2,3,4,5];
 let y = x.push(100);

console.log(x)
//  [ 1, 2, 3, 4, 5, 100 ]
console.log(y)
// 6</code></pre>
<p>
  Use spread syntax (...), the push method support spread syntax, so you can add
  as this way.
</p>
<pre class="language-javascript"><code>let x = [1,2,3,4,5];
 x.push(100, 200);

console.log(x);
// [1,2,3,4,5,100,200]</code></pre>
<p>
  Or, if you want to variable is an array and want to use the push and is the
  same result as above.
</p>
<pre class="language-javascript"><code> let x = [1,2,3,4,5];
 x.push(...[100, 200])

console.log(x);
// [1,2,3,4,5,100,200]</code></pre>
<p>
  push is adding to the existing array, but what if I want to add to the new
  array and keep the existing array no update?
</p>
<p>
  One way is you can use <code>concat</code> as below. You can see the origin x
  is not updated, but the result <code>concat</code> return is the new
  array.&nbsp;
</p>
<pre class="language-javascript"><code> let x = [1,2,3,4,5];
 let y = x.concat(100);
 let z = x.concat(...[200,300]);

console.log(x);
// [1,2,3,4,5]
console.log(y);
// [1,2,3,4,5,100]
console.log(z);
//[1,2,3,4,5,200,300]</code></pre>
<h2>Array.prototype.pop</h2>
<p>
  Pop will remove the last item from the array and return the removed
  item.&nbsp;
</p>
<pre class="language-javascript"><code>let x = [1,2,3,4,5];
let y = x.pop();

console.log(x);
// [1,2,3,4]
console.log(y);
// 5</code></pre>
<p>
  Now, you might want to ask the same question, what if I want to remove the
  last item but I want to keep the original array and new array. If you need to
  do that, the following is one way, you can create a new array by using
  <code>slice()</code>.
</p>
<pre class="language-javascript"><code>let x = [1,2,3,4,5];
let z = x.slice();
let y = x.pop();

console.log(x);
// [1,2,3,4]
console.log(y);
// 5
console.log(z);
// [1,2,3,4,5]</code></pre>
<h2>Array.prototype.shift</h2>
<p>
  Pop is removed from the last item from the Array, the shift is the opposite,
  it will be the first item from the array.&nbsp;
</p>
<pre class="language-javascript"><code>let x = [1,2,3,4,5];
let z = x.shift()

console.log(x);
// [2,3,4,5]
console.log(z);
// 1</code></pre>
<h2>Array.prototype.unshift</h2>
<p>
  unshift from the array will add list of value to the beginning of the origin
  array and return the total length of the origin array.&nbsp;
</p>
<pre class="language-javascript"><code>let x = [1,2,3,4,5];
let z = x.unshift(100, 200)

console.log(x);
// [100,200,1,2,3,4,5]
console.log(z);
// 7</code></pre>
<h3>Conclusion</h3>
<p>
  Now, above are difference of how to use JavaScript's array function, push,
  pop, shift, unshift.
</p>
<p></p>
<p></p>


This blog show difference between the JavaScript Array's method push, pop, shift and unshift usage.

Javascript Push Pop Shift and Unshift


<p>
  I'm using keystone.js with Jade view template engine, back-end is MongoDB, I
  didn't try Grunt at Keystone.js before, this blog is How I tried, it's not
  perfect but the output is close to what I want. So anyway, from browser source
  code point of view, following is what I want.
</p>
<ul>
  <li>Minify CSS/Javascript</li>
  <li>Minify Html</li>
  <li>
    In Development mode, I should have choice to not minify CSS/Javascrout, not
    minify HTML.
  </li>
</ul>
<p>
  <img
    class="img-responsive"
    src="https://d1p0mp3f1fx0hz.cloudfront.net/_2lahel4pj.png"
    alt=""
  />
</p>
<p>So following are list of things how I tried to make it happen.</p>
<h3>1. Grunt file setup</h3>
<pre><code class="language-javascript">
Use grunt-jade-usemin
</code></pre>
<p>
  First thing I'm doing here is use jadeUsemin setup task for jade template.
  Then, there are some clean up so I can make my web application work, which is
  copy task.
</p>
<pre><code class="language-javascript">
/*
 * grunt-jade-usemin
 *
 *
 * Copyright &copy;2014 Gilad Peleg
 * Licensed under the MIT license.
 */
'use strict';

module.exports = function (grunt) {
    // load all npm grunt tasks
    require('load-grunt-tasks')(grunt);
    // Project configuration.
    grunt.initConfig({
        // Before generating any new files, remove any previously-created files.
        clean: {
            tests: ['tmp', 'test/compiled']
        },
        filerev: {
            jadeUsemin: {
                options: {
                    noDest: true
                }
            }
        },
        // Configuration to be run (and then tested).
        jadeUsemin: {
            options: {
                replacePath: {
                    '#{baseDir}': 'test', //optional - key value to replace in src path
                    '#{baseDistPath}': '/' 
                }
            },
            basic: {
                options: {
                    tasks: {
                        js: ['concat', 'uglify'],
                        css: ['concat', 'cssmin']
                    }
                },
                files: [
                    {
                        dest: 'templates/compiled/layouts/default.jade',
                        src: 'templates/layouts/default.jade'
                    }]
            }
        },
        copy: {
            // copy UI assets for development
            development: {
                cwd: 'public',
                src: '**/*',
                dest: 'public/public',
                expand: true
            },
            production: {
                cwd: '/dist',
                src: '**/*',
                dest: 'public/dist',
                expand: true
            },
            production_fonts: {
                cwd: 'public/fonts',
                src: '**/*',
                dest: 'public/dist/fonts',
                expand: true
            },
            production_fontsAwesome: {
                cwd: 'bower_components/font-awesome-bower/fonts',
                src: '**/*',
                dest: 'public/dist/fonts',
                expand: true
            }
        }
    });
    // Actually load this plugin's task(s).
    grunt.loadTasks('tasks');
    // Whenever the "test" task is run, first clean the "tmp" dir, then run this
    // plugin's task(s), then test the result.
    grunt.registerTask('[production]', [
        'jadeUsemin:basic',
        'copy:development',
        'copy:production',
        'copy:production_fonts',
        'copy:production_fontsAwesome'
    ]);
};

</code></pre>
<h3>Place Javascript/CSS files at Jade template</h3>
<p>
  Next thing to do is, add html comment as following for your javascript or CSS,
  the file path after the <code>build:js</code>will be the actual file path when
  run the Grunt task.
</p>
<p>
  There're some trick here, when I wrote the path start with slush
  <code>/</code>, grunt task will create this <code>post.js</code>to my local
  drive's root folder. If i didn't add the sluch then will create the file under
  my current application's root folder. That's why I'm doing cheat here at my
  copy task command. Something i think I need to figure out the better way to do
  it.
</p>
<pre><code class="language-javascript">
block js
	script(src='https://apis.google.com/js/platform.js', async='', defer='')
	
	//-&lt;!-- build:js /dist/js/post.js --&gt;
	script(src='./public/js/shared/socials/facebook_sdk.js', type='text/javascript')
	script(src='./public/js/shared/socials/share_core.js', type='text/javascript')
	script(src='./public/js/shared/socials/share_facebook2.js', type='text/javascript')
	script(src='./public/js/shared/socials/share_googlePlus.js', type='text/javascript')
	//-&lt;!-- endbuild --&gt;
</code></pre>
<h3>Keystone.js init</h3>
<p>
  I copy all the jade template to another folder at Grunt task, because of this
  I need ability at keystone.js when in development/production use different
  view template.
</p>
<p>Following is what I did at keystone.js</p>
<pre><code class="language-javascript">
var viewPath = 'templates/compiled/views';
if (process.env.NODE_ENV === 'development') {
	viewPath = 'templates/views';
}
keystone.init({
	'views':  viewPath,
....
});
</code></pre>
<h3>Conclusion</h3>
<p>
  I'm happy that at Keystone.js I'm able to achieve following thing by using
  grunt task, on Production you'll get most optimized enviroment.
</p>
<ul>
  <li>Minify CSS</li>
  <li>Minify Javascript</li>
  <li>Minify HTML</li>
  <li>Ability to swich minify on/off in Development</li>
</ul>
<p>
  There are list of thing I don't think I'm doing it right, so need to figure
  out in the future.
</p>
<ul>
  <li>How to setup path at jade template</li>
</ul>


How to Use Grunt to setup task at Keystone.js for minify CSS, Javascript, HTML

How to Use Grunt with Keystone.js for Minify CSS, Javascript and HTML


<p>
  <a
    class="soc-facebook dhe_fb_share"
    href="#"
    data-href="http://www.dakehe.info/blog/post/facebook-share-button"
    data-caption="An example caption"
    data-picture="http://g-ecx.images-amazon.com/images/G/01/img16/events/valentine/31780_events_vday2016_gw-double-promo_440x200._CB300695157_.jpg"
    data-description="description"
    data-name="name"
    data-redirect_uri="http://www.dakehe.info"
    >Share Example 1</a
  >
  <a class="soc-facebook dhe_fb_share" href="#">Share Example 2</a>
</p>
<p>
  Nowaday, lots of website are using facebook share module, this blog will show
  few ways of how to implement facebook share, they can use by different scenrio
  and level of web skill.
</p>
<h2>1. Use Default Facebook Share button</h2>
<p>
  Following is few things you need to do for use the default facebook share
  button.
</p>
<p>
  Go to&nbsp;<a
    href="https://developers.facebook.com/docs/plugins/share-button"
    target="_blank"
    >Facebook Share Developer Page</a
  >, check the code, but following is the example how I'm doing it.
</p>
<h3>Facebook SDK + custom Js module for facebook share</h3>
<p>
  You need Facebook SDK for facebook share, without this the share won't work,
  you cn get this javascript from facebook developer page.
</p>
<p>
  The second thing i'm doing here, depend on my page add current page's url to
  the html, so when share the page, facebook share would know you shared which
  page.
</p>
<pre><code class="language-javascript">
/*
 * Javascript SDK from Facebook.
 */
(function (d, s, id) {
    var js, fjs = d.getElementsByTagName(s)[0];
    if (d.getElementById(id)) return;
    js = d.createElement(s); js.id = id;
    js.src = "//connect.facebook.net/en_US/sdk.js#xfbml=1&amp;version=v2.5";
    fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));

/*
 * facebook shared
 * html
 * 
 */
var dhe = dhe || {};
dhe.fb_share = (function () {
    var fbData = document.querySelector('.fb-share-button');
    fbData.dataset.href = window.location.pathname;
    return {};
})();
</code></pre>
<h3>The Html</h3>
<pre><code class="language-html">
&lt;a class="fb-share-button" data-href='' data-layout='button_count'&gt;&lt;/a&gt;
</code></pre>
<h3>Buttons looks like following</h3>
<p>
  <img
    class="img-responsive"
    src="http://res.cloudinary.com/dmwrakaup/image/upload/c_fit,h_90/vmqjxbe03pi82cjlu1qg.png"
    alt=""
  />
</p>
<h3>Meta Tag</h3>
<p>
  This meta tag is also important, because when you use default facebook share,
  the share window will use following information to display, such as image,
  description, title.
</p>
<pre><code class="language-html">
    &lt;meta property="og:url" content="/blog/post/javascript-ecmascript-5"&gt;
    &lt;meta property="og:type" content="Hack The Web"&gt;
    &lt;meta property="og:description" content="Hack The Web - Javascript (ECMAScript) 5"&gt;
    &lt;meta property="og:image" content="https://d1p0mp3f1fx0hz.cloudfront.net/_3reqj4osr.png"&gt;
    &lt;meta property="og:image:type" content="image/png"&gt;
    &lt;meta property="og:image:width" content="256"&gt;
    &lt;meta property="og:image:height" content="256"&gt;
    &lt;meta property="og:title" content="Javascript (ECMAScript) 5"&gt;
</code></pre>
<h3>Conclusions</h3>
<p>
  I think this default facebook share is good for starter, easy to implement the
  share feature. However it is less flexbility. If you have multi share at the
  same page, they all going to use same picture, title. Also, it is hard to
  change the style.
</p>
<h2>2. Facebook share - Control the UI</h2>
<p>
  The following solution is more flexible, because you have totally control the
  UI looks, also you can get how many total shared from the specific page, use
  the total shared to control the UI as well. Now, following are steps how you
  do it.
</p>
<p>
  First, Let me show how's the result looks first, follwing is using the
  FontAwesome icon.
</p>
<p>
  <img
    class="img-responsive"
    src="https://d1p0mp3f1fx0hz.cloudfront.net/_3reqj4osr.png"
    alt=""
  />
</p>
<p>
  Sounds like you have full control of the facebook share, however you're depend
  on following two api. First one, graph.facebook, you can get the total share
  and comments from the api by passing your page. Second url provide facebook
  share feature by passing defined parameter, such as
  <strong
    >u<strong>
      is the actual url of your page. Also, it'll depend on your Metatag. You
      still depend on these two url, and it's hard to find how many parameter
      they support, because document is poor.</strong
    ></strong
  >
</p>
<pre><code>
http://graph.facebook.com/
https://www.facebook.com/sharer/sharer.php?u={encoded url}&amp;t={title, seperate by + }
</code></pre>
<p>Following are the code i did at javascript.</p>
<p>
  Following facebook share could do the same facebook share feature, also you
  could get the count of the share for the page.
</p>
<pre><code class="language-javascript">/*
 * Javascript SDK from Facebook.
 */
(function (d, s, id) {
    var js, fjs = d.getElementsByTagName(s)[0];
    if (d.getElementById(id)) return;
    js = d.createElement(s); js.id = id;
    js.src = "//connect.facebook.net/en_US/sdk.js#xfbml=1&amp;version=v2.5&amp;title=test";
    fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));

/*
 * My own customized js code
 */
var dhe = dhe || {};
dhe.fb_share = (function () {
    function openPopup(url) {
        window.open(url, "myWindow", "status = 1, height = 500, width = 500, resizable = 0")
    }
    
    function loadFBCount(url) {
        var xhttp = new XMLHttpRequest();
        xhttp.onreadystatechange = function () {
            if (xhttp.readyState == 4 &amp;&amp; xhttp.status == 200) {
                //{
                //    "id": "http://news.ycombinator.com",
                //    "shares": 8868,
                //    "comments": 3
                //}
                return JSON.parse(xhttp.responseText);
            }
        };
        xhttp.open("GET", "http://graph.facebook.com/" + url, true);
        xhttp.send();
    }
    
    function init(){
        updateShare();
        var fbCount = loadFBCount(window.location.href);
        // update fb count to UI;
    }
    
    function updateShare(){
        var fbData = document.querySelector('.fb_share');
        var url = 'https://www.facebook.com/sharer/sharer.php?u=' + encodeURIComponent(window.location.href);
        fbData.href = "javascript:dhe.fb_share.openPopup('" + url + "')";
    }
    
    init();

    return {
        openPopup : openPopup
    };
})();
</code></pre>
<p>
  Html is as following, instead of font-awesome's icon, you could change to
  image or other resource.
</p>
<pre><code class="language-html">&lt;a href="" target="_blank" class="fb_share"&gt;&lt;i class="fa fa-facebook-official"&gt; &lt;/i&gt;&lt;/a&gt;
</code></pre>
<h3>Conclusions</h3>
<p>
  Doing this way, you have full control of UI which how facebook should looks
  like, and able to get the total share. However it is still hard to control the
  shared window's content. Good things is, you don't need Facebook development
  account, for both above solution you can just copy javascript, copy html and
  you're done.
</p>
<h2>2. Facebook Feed Dialog</h2>
<p>
  Facebook feed dialog is more flexiable compare to the first two, first you
  need to go to&nbsp;<a
    href="https://developers.facebook.com/docs/sharing/reference/feed-dialog/v2.5"
    target="_blank"
    >facebook developer</a
  >&nbsp;to register and get app_id.
</p>
<p>Once you got app_id you can start to use, following is how I'm doing.</p>
<p>&nbsp;</p>
<h3>Following is the result view.</h3>
<p>
  <img
    class="img-responsive"
    src="https://d1p0mp3f1fx0hz.cloudfront.net/_35d4uy5dr.png"
    alt=""
  />
</p>
<p>&nbsp;</p>
<h4>Facebook SDK and APP init</h4>
<pre><code class="language-javascript">
/*
 * facebook SDK
 */
(function (d, s, id) {
    var js, fjs = d.getElementsByTagName(s)[0];
    if (d.getElementById(id)) { return; }
    js = d.createElement(s); js.id = id;
    js.src = "//connect.facebook.net/en_US/sdk.js";
    fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));

/*
 * facebook APP init
 */
window.fbAsyncInit = function () {
    FB.init({
        appId      : 'your facebook app id',
        xfbml      : true,
        version    : 'v2.5'
    });
};
</code></pre>
<h4>
  Following javascript, basically I'm bind the click event, and also provide
  method to get share url's total count.
</h4>
<pre><code class="language-javascript">

/*
 * Use facebook.com/sharer/sharer.php and graph.facebook.com/
 */
var dhe = dhe || {};
dhe.fb_share2 = (function () {
    /*
     * 
     * return following type of json object.
    * {
    *     "id": "http://news.ycombinator.com",
    *     "shares": 8868,
    *     "comments": 3
    * }
     */
    function loadFBCount(url, updateCallBack) {
        var xhttp = new XMLHttpRequest();
        xhttp.onreadystatechange = function () {
            if (xhttp.readyState == 4 &amp;&amp; xhttp.status == 200) {
                updateCallBack(JSON.parse(xhttp.responseText));
            }
        };
        xhttp.open("GET", "http://graph.facebook.com/" + url, true);
        xhttp.send();
    }
    
    /*
     * update fb fshare count to UI
     */
    function updateCount(fbCount) {
        var fbShare = document.querySelector(".soc_count.fb");
        if (fbShare) {
            fbShare.innerHTML = fbCount.shares;
        }
    }
    
    /*
     * get current url, remove the hash or querystring
     */
    function GetCurrentUrl(){
        var _location = window.location;
        return _location.origin + _location.pathname;
    }
    
    /*
     * bind click event for facebook share
     * load facebook total count
     */
    function init() {
        var all = document.querySelectorAll(".dhe_fb_share");
        for (var i = 0; i &lt; all.length; i++) {
            all[i].onclick = fbShareEvent;
        };
        
        loadFBCount(encodeURIComponent(GetCurrentUrl()), updateCount);
    }
    
    /*
     * get meta tag
     */
    function getMetaTag(tagName){
        var metas = document.getElementsByTagName('meta');
        for (i = 0; i &lt; metas.length; i++) {
            if (metas[i].getAttribute("property") == tagName) {
                return metas[i].getAttribute("content");
            }
        }
    }
    
    /*
     * facebook share event
     */
    function fbShareEvent(e){
        var _this = this;
        var data = {};
        data["app_id"] = "Your Facebook APPID";

        data["method"] = "feed";
        data["href"] = _this.dataset.href ? encodeURIComponent(_this.dataset.href) : encodeURIComponent(GetCurrentUrl());
        data["caption"] = (_this.dataset.caption) ? _this.dataset.caption : getMetaTag("og:title");
        data["name"] = (_this.dataset.name) ? _this.dataset.name : getMetaTag("og:type");
        data["description"] = (_this.dataset.description) ? _this.dataset.description : getMetaTag("og:description");
        data["picture"] = (_this.dataset.picture) ? _this.dataset.picture : getMetaTag("og:image");
        if (_this.dataset.redirect_uri) {
            data["redirect_uri"] = _this.dataset.redirect_uri;
        }
        console.info(data);
        FB.ui(data, function (response) {
            console.info(response);
        });
    }
    
    init();
    
    return {
        loadFBCount : loadFBCount
    };
})();
</code></pre>
<h4>HTML - following is example html</h4>
<p>
  The way I'm trying to build is, following is minimal require fields, if html
  doesn't provide any value, default will go to meta tag to get the one. If you
  provide from html then will get from the html when click share.
</p>
<pre><code class="language-html">
&lt;a href="#" class="soc-facebook dhe_fb_share"&gt;&lt;/a&gt;<br /><br /></code></pre>
<p>
  That says, if you define following at your html that would be show to the
  share window too.
</p>
<pre><code class="language-html">
&lt;a href="#" data-href="http://www.dakehe.info/blog/post/facebook-share-button" data-caption="An example caption" data-picture="http://g-ecx.images-amazon.com/images/G/01/img16/events/valentine/31780_events_vday2016_gw-double-promo_440x200._CB300695157_.jpg" data-description="description" data-name="name" data-redirect_uri="http://www.dakehe.info" class="soc-facebook dhe_fb_share"&gt;&lt;/a&gt;
&lt;a href="#" data-href="http://www.dakehe.info/blog/post/facebook-share-button" data-caption="An example caption" data-description="description" data-name="name" data-redirect_uri="http://www.dakehe.info" class="soc-facebook dhe_fb_share"&gt;&lt;/a&gt;&lt;a href="#" class="soc-facebook dhe_fb_share"&gt;&lt;/a&gt;
</code></pre>
<h3>Conclusion</h3>
<p>
  If you're less knowledge of Javascript, you can try #1 to add facebook share,
  and if know javascript and the page you need facebook doesn't require much
  flexibility, you can use #2, but if your webpage need more than one facebook
  share, you can try #3.
</p>
<h3>More to come</h3>
<ul>
  <li>
    <a href="https://developers.facebook.com/" target="_blank"
      >facebook develper</a
    >&nbsp;- facebook developer page is giant area contains lots of products,
    I'll try some of them and will write blog here.
  </li>
  <li>
    <a
      href="https://developers.facebook.com/tools/debug/og/object/?q=http%3A%2F%2Fwww.dakehe.info%2Fblog%2Fpost%2Ffacebook-share-button"
      target="_blank"
      >facebook debug tools</a
    >&nbsp;&nbsp;
  </li>
</ul>


This blog show how to use facebook share in 3 ways. Contains code snippet in HTML, Javascript.

How to add Facebook Share Button to the Page


<p>
  In this blog, I'll create an angular directive to limit the length user can
  enter to the input text field. In the following example, the number directive
  default is 10, but the value could be overridden by the attribute.
</p>
<h2>The Angular Javascript Code</h2>
<p>
  First, following code is based on angular1, the version is
  <code>1.4.8</code> . The below code all is doing are, setup the angular
  module, set up the controller and the scope for the controller so that'll bind
  to the HTML later. Next, we'll create directive <code>numberField</code> to
  the angular app.
</p>
<pre class="language-javascript"><code>
var app = angular.module('myApp', []);

app.controller("myController", ['$scope', function($scope){

$scope.title = "my app number input";
$scope.mynumber = '';

}]);

app.directive('numberField', function () {
    'use strict';
    var NUMBER = /[^0-9]/g,
        DEFAULT = 10;

    return {
        require: 'ngModel',
        link: function (scope, element, attrs, modelCtrl) {
            var lenth = attrs.numberLength || DEFAULT;
            modelCtrl.$parsers.push(function (inputValue) {

                if (inputValue == undefined) return ''
                var transformedInput = inputValue.replace(NUMBER, '');
                if (transformedInput.length &lt;= lenth) {
                    // default number always 10 digits, otherwise looking for number-length attr
                    if (transformedInput != inputValue) {
                        modelCtrl.$setViewValue(transformedInput);
                        modelCtrl.$render();
                    }
                    return transformedInput;
                }

                var newValue = transformedInput.slice(0, -1);
                modelCtrl.$setViewValue(newValue);
                modelCtrl.$render();
                return newValue;
            });
        }
    };
});</code></pre>
<h2>The HTML</h2>
<p>
  Once we have the Angular ready, we can use the angular as following. First
  setup the app an controller to the HTML element. Then, next put angular
  directive <code>number-field</code> to the input field. Notice the second
  input field has attribute <code>number-length</code> as 6, because we use that
  at angular code to check the length of the number.
</p>
<pre class="language-html"><code>
&lt;section ng-app="myApp" ng-controller="myController"&gt;
  &lt;h1&gt;
  {{title}}
  &lt;/h1&gt;
  &lt;div&gt;
  &lt;input type="text" number-field ng-model="mynumber"/&gt; 
  max length is 10
  &lt;br&gt;
  &lt;input type="text" number-field ng-model="mynumber2" number-length="6"/&gt;
  max length is 6
  &lt;br&gt;
  &lt;/div&gt;
&lt;/section&gt;
</code></pre>
<p>
  Now, that's a simple way to create a number input field with a max length
  setting. You can also see above code from jsfiddler
  <a
    href="https://jsfiddle.net/keke78ui9/yqLujdp6/26/"
    target="_blank"
    rel="noopener"
    >here.</a
  >
  Or try the result from following.
</p>
<p>
  <script
    async=""
    src="//jsfiddle.net/keke78ui9/yqLujdp6/26/embed/result/dark/"
  ></script>
</p>


A simple angular directive input text only accept number as 10 digits, but also length is configurable at view.

Angular Directive for Check Number Input


<h2>How to scroll to the location on the page by Angular1</h2>
<p>
  This quick code snippet shows how to use angular1 location hash to go to the
  specific section of the page. The framework is using angular1 1.4.8.
</p>
<h3>The Angular HTML</h3>
<p>
  Following is the HTML for the angular, if the user click the
  <strong>gotoError</strong> link, will move to the
  <strong>error-place</strong>location.
</p>
<pre class="language-javascript"><code>
&lt;div ng-app="myApp" ng-controller="myController"&gt;

&lt;div data-alert="" class="alert-box alert " id="error-place" ng-show="errors.length &gt; 0"&gt;
        &lt;div ng-repeat="error in errors"&gt;
            {{error}}
        &lt;/div&gt;
&lt;/div&gt;

&lt;div class="alert-box alert small-12 large-offset-3 large-9" ng-show="errors.length &gt; 0"&gt;
        &lt;a ng-click="gotoError()" href='#'&gt;Go to the Error&lt;/a&gt;
&lt;/div&gt;
&lt;/div&gt;
</code></pre>
<h3>The Angular Javascript</h3>
<p>
  We'll create the angular controller as following, which will handler the click
  event when the user click the <strong>gotoError</strong> link. Also, this
  controller import Angular1 <strong>$anchorScroll</strong>, when this executed,
  it will scrolls to the hash value.
</p>
<pre class="language-javascript"><code>
var app = angular.module('myApp', []);

app.controller("myController", ['$scope', '$location', '$anchorScroll', function($scope, $location, $anchorScroll){

 $scope.errors = [
 "I have more error1 to show!",
 "I have more error2 to show!",
 "I have more error3 to show!",
 "I have more error4 to show!",
 "I have more error5 to show!",
 "I have more error6 to show!",
 "I have more error7 to show!",
 "I have more error8 to show!"
 ];
 
 $scope.gotoError = function() {
  $location.hash('error-place');
  $anchorScroll();
 }
 
}]);
</code></pre>
<p>
  Now, above is quick sample code of how to use location hash by angular1 way.
  You can also check the code at jsfiddler
  <a
    href="https://jsfiddle.net/keke78ui9/stxg9dv3/"
    target="_blank"
    rel="noopener"
    >here.</a
  >
</p>


Example Code - How to Use Angular.js Location Hash


<ul>
  <li>
    <a
      style="font-size: 14px"
      href="http://archive.oreilly.com/pub/a/javascript/excerpts/javascript-good-parts/awful-parts.html"
      target="_blank"
      >Awful Parts: Appendix A - JavaScript: The Good Parts</a
    >
  </li>
  <li>
    <a
      href="http://archive.oreilly.com/pub/a/javascript/excerpts/javascript-good-parts/bad-parts.html"
      target="_blank"
      >Bad Parts: Appendix B - JavaScript: The Good Parts</a
    >
  </li>
</ul>
<h3>Javascript, the Bad part</h3>
<p>with</p>
<p>eval</p>
<p>void</p>
<p>type coersion</p>
<p>continue/switch</p>
<h3>Different ways to set This keyword</h3>
<p>javascript scope and hoisting</p>
<p>javascript this by method call</p>
<p>javascript&nbsp;this by using call</p>
<p>javascript&nbsp;this by apply</p>
<p>javascript this by constructor with new</p>
<p>prototype inheritance</p>
<p>javascript fat arrow =&gt;</p>
<p>javascript inheritance by using Object.create</p>
<p>javascript assignment expression</p>
<p>Global Variables</p>
<p>scope</p>
<p>semicolon insertion</p>
<p>reserved words</p>
<p>unicode</p>
<p>typeof</p>
<p>parseInt</p>
<p>floating point</p>
<p>NaN</p>
<p>+ operator</p>
<p>Phony Arrarys</p>
<p>Falsy Values</p>
<p>hasOwnProperty</p>
<p>Object</p>
<p>Block-less Statements</p>
<p>++ --</p>
<p>Bitwise Operators</p>
<p>Function Statement Versus function Expression</p>
<p>Typed Wrappers</p>
<p>new</p>
<p>&nbsp;</p>


Few Memo about ECMAScript 5


<h2>This blog shows how to use prism to hightlight your code.</h2>
<p>
  <a href="http://prismjs.com/#basic-usage" target="_blank" rel="noopener"
    >Prism</a
  >&nbsp;is a syntax highlighter for your program languages with web.
</p>
<p>
  <img
    src="https://d1p0mp3f1fx0hz.cloudfront.net/_7d5woh95d.png"
    alt=""
    width="569"
    height="371"
  />
</p>
<p>
  Go to the download page, choose the style, support languages you want to use,
  then download the css and javascript.
</p>
<p>1. put the css and javascript to your site.</p>
<pre><code class="language-html">
  &lt;link href="/styles/vendor/prism.css" rel="stylesheet"&gt;
  &lt;script src="/js/vendor/prism.js"&gt;&lt;/script&gt;
</code></pre>
<p>2. add the code with <code>pre, code</code> tag</p>
<p>
  the way prism add style for specific language is you add the language specific
  class to the code tag as following example.
</p>
<p>
  &lt;pre&gt;&lt;code class="language-css"&gt;p {color: red}
  &lt;/code&gt;&lt;/pre&gt;
</p>
<p>
  Following are list of the example language prism support so far, I'm using
  javascript, css, html, asp.net C# a lot. So I would put the class like
  following at my code tag class. language-css, language-javascript,
  language-aspnet, language-csharp, language-jade.
</p>
<p>
  <a href="http://prismjs.com/#basic-usage" target="_blank" rel="noopener"
    >basic usage about prism</a
  >
</p>
<p><img src="https://d1p0mp3f1fx0hz.cloudfront.net/_ejxecs7f4.png" alt="" /></p>
<p>
  Prism support lots of modern program language, you could choose the language
  you want to support so able to minimal your file size. Also, easy to use by
  just adding the specific language's class to the code tag. I would highly
  recommand this javascript library for syntaxhigh your code.
</p>


Prism is very nice javascript, css library for syntaxhight your code.

How to Hightlight Code Block by Use Prism


### Why need something like `Prettier` to format VS Code?

Code formatter might not as important as `Lint` or `Test`, which these are checking syntax or logic error, if something happen might introduce huge issue, but if you have lots developer working in the same codebase, each one has different style setting, or coding style which could cause the inconsistent style, and again nothing break but if you have consistent style through the entire codebase then you have less thing to worry about right?

### What this article will provide

This article only consider how to use prettier extension at VS code, and provide below steps to make using `prettier` easier.

### Install `prettier` package

#### First install the prettier as dev dependencies.

```cmd
npm install --save-dev prettier
```

#### Add task script to the `scripts` section at `package.json`

After install the prettier and add this script task, this is for something might have some case want to update the entire solution. However, doesn't recommend to put this task as every build or use the husky during the commit or push command to the git, that'll will slow down the development due to search entire codebase and format code take sometime.

```
"scripts": {
    "prettier": "prettier --write ."
}
```

#### Add `.prettierrc` to the root

Add this file for the prettier setting for the current project.

```
{
  "trailingComma": "es5",
  "tabWidth": 2,
  "semi": true,
  "singleQuote": true
}
```

#### Add `.prettierignore` to the root project

Add this so when run the prettier task so can exclude following folders.

```
.next
dist
node_modules
output
```

### Use VS Code Setting with Prettier to format code when save file

Create a folder `.vscode` and create `settings.json`, at the `settings.json` put the below content. This will use the `prettier` to format the code when try to save the file.

```
{
  "editor.defaultFormatter": "esbenp.prettier-vscode",
  "editor.formatOnSave": true,
  "editor.codeActionsOnSave": {
    "source.fixAll": true,
    "source.organizeImports": true
  }
}
```

### Conclusion

This article recommend to use `prettier` to format code, and use `prettier` with vscode extension so every time save the file will format the code, also incase need to run the `prettier` to the entire code base, so add the script task so can run as `npm run prettier`.


Use Prettier to Format VS Code to Enforce Consistent Style


<h2>Use Gulp, Gulp Plugins and Browserify to build Angular app</h2>
<p>This sample app use following technologies.</p>
<ol>
  <li>Node.js</li>
  <li>Angular.js</li>
  <li>Browserify</li>
  <li>Gulp</li>
  <li>gulp-connect</li>
  <li>gulp-ng-annotate</li>
</ol>
<p>
  The files structure will be following, also you can check the sample code
  at&nbsp;<a
    href="https://github.com/keke78ui9/gulp_angular_browserify_sample1"
    target="_blank"
    >Github</a
  >. After you download the code, run following command should be able to start
  your app. The fisrt command will install all the node.js dependecy modules,
  and second command will run the gulp task defined at
  <code>gulpfile.js</code>
</p>
<pre class="language-javascript">
npm install -d
gulp
</pre>
<p>
  <code>App</code> folder are all the client side file for build angular app.
</p>
<p><code>Gulpfile</code> contains all the client side task build.</p>
<p>
  <code>Index.html</code> is the html page will be request by the client, also
  contains the angular app.
</p>
<p><code>package.json</code> contains all the dependencies for this example.</p>
<ul>
  <li>gulp-test1</li>
  <ul>
    <li>app</li>
    <ul>
      <li>controllers</li>
      <ul>
        <li>controller1.js</li>
        <li>controller2.js</li>
        <li>controller3.js</li>
      </ul>
      <li>views</li>
      <ul>
        <li>controller1.html</li>
        <li>controller2.html</li>
        <li>controller3.html</li>
      </ul>
      <li>app.js</li>
    </ul>
    <li>gulpfile.js</li>
    <li>index.html</li>
    <li>package.json</li>
  </ul>
</ul>
<h3>package.json</h3>
<p>
  The main module here are angular, angular-route and browserify, because
  browserify will take care of angular app's dependency that's why need angular
  as node module. Also, gulp and gulp's plugin modules, the gulp-np-annotate
  will fix the issue when mininize js in angular, gulp-connect will run a test
  app.
</p>
<pre class="language-xml">
{
  "name": "gulp-test1",
  "version": "1.0.0",
  "description": "gulp-test1",
  "dependencies": {
    "angular": "^1.5.5",
    "gulp": "^3.9.1"
  },
  "devDependencies": {
    "angular": "^1.5.5",
    "angular-route": "^1.5.5",
    "browserify": "^13.0.0",
    "gulp": "^3.9.1",
    "gulp-concat": "^2.6.0",
    "gulp-connect": "^3.2.2",
    "gulp-cssmin": "^0.1.7",
    "gulp-ng-annotate": "^2.0.0",
    "gulp-uglify": "^1.5.3",
    "vinyl-source-stream": "^1.1.0"
  },
  "author": "dake"
}
</pre>
<h3>Angular App</h3>
<p>
  Following is the example code use browserify with angular, broserify will take
  all the dependencies for angular. For example, following code is the
  <code>app.js</code> at angular.js, which define where is the controller and
  views, in angualr it is useing <code>angular-route</code>, and ofcourse,
  app.js is also depend on <code>angular.js</code>. In Browserify, it is very
  simple to define, you just need to write, <code>require('angular')</code>,
  browserify will take care the dependency for you. Similar to the angular
  controllers, you'll need to define as
  <code>require('./controllers/controller1');</code>.
</p>
<pre class="language-javascript">
'use strict';
require('angular');
require('angular-route');
var app = angular.module('gulp.test1', ['ngRoute']);

require('./controllers/controller1');
require('./controllers/controller2');
require('./controllers/controller3');

app.config(function ($routeProvider) {
    $routeProvider
       .when('/', {
        templateUrl: 'views/controller1.html',
        controller: 'controller1',
        controllerAs: 'controller1'
      })
      .when('/1', {
        templateUrl: 'views/controller2.html',
        controller: 'controller2',
        controllerAs: 'controller2'
      })
       .when('/2', {
        templateUrl: 'views/controller3.html',
        controller: 'controller3',
        controllerAs: 'controller3'
      })
      .otherwise({
        redirectTo: '/'
      });
  });

</pre>
<pre class="language-javascript">
'use strict';

angular.module('gulp.test1')
  .controller('controller1', function ($scope) {
    $scope.message = 'controller1!';
});
</pre>
<pre class="language-html">
&lt;h2&gt;message: {{message}}&lt;/h2&gt;
</pre>
<h4>How do I use browserify to bundle all javascript</h4>
<p>
  This is sample task at gulpfile.js, at end of this task, it will create a
  javascript combined all the dependency javascript. In our previous
  <code>app.js</code>. It shouldn't contains angular.js angular-route.js, all
  the angular controllers and the app.js itself.
</p>
<pre class="language-javascript">
gulp.task('browserify', function () {
    return browserify('./app/app.js')
        .bundle()
        .pipe(source('app.js'))
        .pipe(gulp.dest('./public/js/'));
});

</pre>
<h3>index.html</h3>
<p>
  In this example, <code>index.html</code> is the actual web page, as you can
  see it is any reference to the minified javascript.
</p>
<pre class="language-html">
&lt;!doctype html&gt;
&lt;html&gt;
  &lt;head&gt;
    &lt;meta charset="utf-8"&gt;
    &lt;title&gt;&lt;/title&gt;
    &lt;meta name="description" content=""&gt;
    &lt;meta name="viewport" content="width=device-width"&gt;
    &lt;script src="/js/app.min.js"&gt;&lt;/script&gt;
  &lt;/head&gt;
  &lt;body&gt;
    &lt;div  ng-app="gulp.test1"&gt;
      &lt;div ng-view&gt;&lt;/div&gt;
    &lt;/div&gt;
     &lt;ul&gt;
      &lt;li&gt;&lt;a href="/#"&gt;home&lt;/a&gt;&lt;/li&gt;
      &lt;li&gt;&lt;a href="/#1"&gt;main&lt;/a&gt;&lt;/li&gt;
      &lt;li&gt;&lt;a href="/#2"&gt;main1&lt;/a&gt;&lt;/li&gt;
    &lt;/ul&gt;
  &lt;/body&gt;
&lt;/html&gt;
</pre>
<h3>gulpfile.js</h3>
<pre class="language-javascript">
/// setup gulp 

var gulp = require('gulp');
var connect = require('gulp-connect');
// requires browserify and vinyl-source-stream
var browserify = require('browserify');
var source = require('vinyl-source-stream');
var concat = require('gulp-concat');
//var cssmin = require("gulp-cssmin");
var uglify = require("gulp-uglify");
var ngAnnotate = require('gulp-ng-annotate');

gulp.task('connect', function () {
    connect.server({
        root: 'public',
        port: 4000
    })
});

gulp.task('browserify', function () {
    // Grabs the app.js file
    return browserify('./app/app.js')
        // bundles it and creates a file called main.js
        .bundle()
        .pipe(source('app.js'))
        // saves it the public/js/ directory
        .pipe(gulp.dest('./public/js/'));
});


gulp.task("min:js", function () {

    gulp.src(["./public/js/app.js"], { base: "." })
    .pipe(ngAnnotate())
    .pipe(concat("./public/js/app.min.js"))
    .pipe(uglify())
    .pipe(gulp.dest("."));
});

gulp.task("min", ["min:js"]);

// Views task
gulp.task('views', function () {

    // Any other view files from app/views
    gulp.src('./app/views/**/*')
    // Will be put in the dist/views folder
    .pipe(gulp.dest('./public/views/'));
    // copy html to production folder
    gulp.src('./index.html').pipe(gulp.dest('./public/'));
});

gulp.task('watch', function () {
    gulp.watch('app/**/*.js', ['browserify','views']);
});

gulp.task('default', ['browserify', 'views', 'min', 'watch','connect']);
</pre>
<h3><span style="font-size: 14px">References or Links</span></h3>
<ol>
  <li>
    <a href="http://gulpjs.com/plugins/" target="_blank">gulp's plugins</a
    ><small> There's thousands of plugins for gulp</small>
  </li>
  <li>
    <a href="http://browserify.org/" target="_blank">browserify</a> Official
    website
  </li>
  <li>
    <a href="https://angularjs.org/" target="_blank">angular1 and angular2</a>
  </li>
  <li>
    <a href="https://github.com/Pestov/essential-gulp-plugins" target="_blank"
      >Most popular gulp plugins</a
    >
  </li>
</ol>
<h3>Conclusion</h3>
<p>
  Gulp is very powerful client side task runner, there're many different plugins
  you can use, also popular IDE visual studio is also start to use gulp/grunt as
  client side task runner to build assets. That means more people will start
  using it and create modules for it. Also with browserify it will even become
  more powerful, it use node.js to combined all client side resources.
</p>


Start Use Gulp and Browserify to Build Angular App with Node.js


<p>
  Gigya provides social share feature, include facebook, google plus's share,
  comment and tons of other features to engage your website and the user.
</p>
<p>
  <a
    href="http://www.gigya.com/products/add-ons/social-engagement/"
    target="_blank"
    >http://www.gigya.com/products/add-ons/social-engagement/</a
  >&nbsp;
</p>
<p>
  This blog shows very simple way to imprement this, first you need to go to
  gigya.com to register and get a account.
</p>
<p>
  Once you get a account, following is simple code written by jade to add
  comment area.
</p>
<p>
  <img
    class="img-responsive"
    src="https://d1p0mp3f1fx0hz.cloudfront.net/_h0fq3t53b.png"
    alt=""
  />
</p>
<p>&nbsp;</p>
<h3>Gigya comment module written in jade</h3>
<pre><code class="language-javascript"> 
	.container
		#commentsArea
	script(type='text/javascript').
		var params ={
		categoryID: 'technology',
		streamID: window.location.pathname,
		version: 2,
		containerID: 'commentsArea',
		cid:'',
		enabledShareProviders: 'facebook,twitter,yahoo,linkedin,googleplus'
		}
		gigya.comments.showCommentsUI(params);

</code></pre>
<h3>Gigya comment module written in javascript</h3>
<pre><code class="language-javascript">
&lt;div class="container"&gt;
      &lt;div id="commentsArea"&gt;&lt;/div&gt;
    &lt;/div&gt;
    &lt;script type="text/javascript"&gt;
      var params ={
      categoryID: 'technology',
      streamID: window.location.pathname,
      version: 2,
      containerID: 'commentsArea',
      cid:'',
      enabledShareProviders: 'facebook,twitter,yahoo,linkedin,googleplus'
      }
      gigya.comments.showCommentsUI(params);
      
      
    &lt;/script&gt;
</code></pre>
<h3>Gigya shared module written in jade</h3>
<pre><code class="language-javascript">
	script(type='text/javascript').
		var act = new gigya.socialize.UserAction();
		var thisUrl = window.location.href;
		var imageSrc = $("img.img-responsive")[0] || '';
		act.setTitle($("header h1").text());
		act.setLinkBack(thisUrl);
		act.addMediaItem({ type: 'image', src: imageSrc, href: thisUrl });
		var showShareBarUI_params=
		{
		containerID: 'shareDiv',
		shareButtons: 'Facebook-Like,Twitter-Tweet,googleplus-share,LinkedIn',
		userAction: act
		}
	script(type='text/javascript').
		gigya.socialize.showShareBarUI(showShareBarUI_params);
</code></pre>
<h3>Gigya shared module written in javascript</h3>
<pre><code class="language-javascript">
  &lt;script type="text/javascript"&gt;
      var act = new gigya.socialize.UserAction();
      var thisUrl = window.location.href;
      var imageSrc = $("img.img-responsive")[0] || '';
      act.setTitle($("header h1").text());
      act.setLinkBack(thisUrl);
      act.addMediaItem({ type: 'image', src: imageSrc, href: thisUrl });
      var showShareBarUI_params=
      {
      containerID: 'shareDiv',
      shareButtons: 'Facebook-Like,Twitter-Tweet,googleplus-share,LinkedIn',
      userAction: act
      }
    &lt;/script&gt;
    &lt;script type="text/javascript"&gt;gigya.socialize.showShareBarUI(showShareBarUI_params);&lt;/script&gt;<br /><br />
</code></pre>
<p>Reference</p>
<p>
  <a
    href="http://developers.gigya.com/display/GD/Gigya%27s+Documentation"
    target="_blank"
    >gigya documents</a
  >
</p>


How to Use gigya to Share and Comments


<div id="test">&lt;div id="test"&gt;&lt;/div&gt;</div>
<pre class="language-javascript"><code>&lt;style&gt;
    #test { white-space: pre; font-family: monospace; }
&lt;/style&gt;
&lt;script&gt;
    var qobj = @Html.Raw(JsonConvert.SerializeObject(Model.SomeKindOfObject));
    document.getElementById("test").innerHTML = JSON.stringify(qobj, null, 4);
&lt;/script&gt;
</code></pre>


Code Snippet - Sample Code for Beautify Json

Everything about Javascript ECMAScript 5.

About Javascript Best Practices, ECMAScript 5


<p>
  The following blog shows how to run the AngularJS unit test just like how you
  run C# unit test, so basically, you'll run your AngularJS at the visual studio
  test explorer window.
</p>
<p>
  <img
    src="https://d1p0mp3f1fx0hz.cloudfront.net/_y17k78x5n.png"
    alt=""
    width="886"
    height="379"
  />
</p>
<h2>Install packages</h2>
<p>
  You'll need to install the following two packages,
  <code>AngularJS.Core</code> and <code>JasmineTest</code>.
</p>
<pre class="language-javascript"><code>install-package AngularJS.Core
</code></pre>
<pre class="language-javascript"><code>install-package JasmineTest
</code></pre>
<h2>Create AngularJS app module</h2>
<pre class="language-javascript"><code>
var app = angular.module('app', []);
</code></pre>
<h2>Create AngularJS controller</h2>
<p>Just create a simple controller with score.test is test.</p>
<pre class="language-javascript"><code>
app.controller('myController', function ($scope) {
    $scope.test = 'test';
});
</code></pre>
<h2>Write Javascript Unittest</h2>
<p>Following this, we'll create a Javascript unit test code by Jasmine.</p>
<pre
  class="language-javascript"
><code>/// &lt;reference path="{{path to the javascript}}"/&gt;
describe('testAngular ', function () {
    //initialize Angular
    beforeEach(module('app'));
    var scope;
    beforeEach(inject(function ($controller, $rootScope) {
        scope = $rootScope.$new();
        var ctrl = $controller('myController', { $scope: scope });
    }));

    it('test scope is test', function () {
        expect(scope.test).toBe('test');
    });
});
</code></pre>
<h2>Get Chutzpah Test Adapter</h2>
<p>
  <a
    href="https://visualstudiogallery.msdn.microsoft.com/f8741f04-bae4-4900-81c7-7c9bfb9ed1fe"
    target="_blank"
    rel="noopener"
    >Chutzpah Test Adapter for the Test Explorer</a
  >
</p>
<p>
  Once you install Chutzpah you can just run the unit tests like C# unit tests.
</p>


Enable javascript unit test at Visual Studio Test Explorer window

Javascript Unit Test With Jasmine, Angular and Chutzpah with Visual Studio


<p>
  Was curious and although I think I kind of know the result but just want to do
  a check what's default javascript behavior to load the method.<br />Should I
  always put the method to the beginning of the script or end of the script.<br /><br />Looks
  like I can't put the end of the script, javascript will return error says,
  function is not defined.
</p>
<pre class="language-javascript"><code>
script
        var beginningOfInlineJs = function () {
            console.info("beginningOfInlineJs");
        };


        (function () {
            var myVariable = "my_private_stuff";
            var privateMethod = function () {
                console.info("hi");
            }

            var privateMethod2 = function (msg) {
                console.info(msg);
                return myVariable + msg;
            };

            var init = function(){
                privateMethod();
                beginningOfInlineJs();
                endOfInlineJs();                
            };

            init();
            return {
                public1: privateMethod,
                public2: privateMethod2
                
            };

            
        })();

        var endOfInlineJs = function () {
            console.info("endOfInlineJs");
        };
    
///script
</code></pre>


Was curious and although I think I kind of know the result just want to do a check what's default javascript behavior to load themethod. Should I always put the method to the beginning of the script or the end of the script.

Javascript default behavior of load method


<ol>
  <li>
    <a
      href="http://code.tutsplus.com/tutorials/24-javascript-best-practices-for-beginners--net-5399"
      target="_blank"
      >24 JavaScript Best Practices for Beginners</a
    >
  </li>
  <li>
    <a
      href="http://www.thinkful.com/learn/javascript-best-practices-1/"
      target="_blank"
      >Javascript BEST PRACTICES PART 1</a
    >
  </li>
  <li>
    <a
      href="http://modernweb.com/2013/12/23/45-useful-javascript-tips-tricks-and-best-practices/"
      target="_blank"
      >45 Useful JavaScript Tips, Tricks and Best Practices</a
    >
  </li>
  <li>
    <a
      href="https://github.com/stevekwan/best-practices/blob/master/javascript/best-practices.md"
      target="_blank"
      >best-practices</a
    >
  </li>
  <li>
    <a href="http://www.w3.org/wiki/JavaScript_best_practices" target="_blank"
      >JavaScript best practices(w3c)</a
    >
  </li>
  <li>
    <a
      href="http://www.codeproject.com/Articles/580165/JavaScript-Best-Practices"
      target="_blank"
      >JavaScript Best Practices(code project)</a
    >
  </li>
  <li>
    <a href="http://www.w3schools.com/js/js_best_practices.asp" target="_blank"
      >JavaScript Best Practices(w3schools)</a
    >
  </li>
  <li>
    <a
      href="http://www.devbridge.com/articles/javascript-best-practices/"
      target="_blank"
      >JavaScript Best Practices</a
    >
  </li>
  <li>
    <a href="http://jstherightway.org/" target="_blank"
      >JavaScript The Right Way</a
    >
  </li>
  <li>
    <a
      href="http://www.smashingmagazine.com/2008/09/16/jquery-examples-and-best-practices/"
      target="_blank"
      >jQuery and JavaScript Coding: Examples and Best Practices</a
    >
  </li>
  <li>
    <a
      href="http://www.developerdrive.com/2011/08/top-10-must-follow-javascript-best-practices-2/"
      target="_blank"
      >Top 10 &ldquo;Must Follow&rdquo; JavaScript Best Practices
    </a>
  </li>
  <li>
    <a
      href="http://developer.blackberry.com/html5/documentation/v2_1/javascript_best_practices.html"
      target="_blank"
      >JavaScript best practices</a
    >
  </li>
</ol>


Few collections about best practices of JavaScript.

Category JavaScript