竹部落

[notebook] Google Push Notification API

noreply@blogger.com (Anonymous) — Thu, 26 Feb 2015 10:06:00 +0800

Google Push Notification

The Google APIs provides push notification that let you watch for changes to resources

Google Drive Push Notification

https://www.youtube.com/watch?v=r3g_oT03nmQ (Google Drive SDK: Push notifications - YouTube)
https://github.com/googledrive/pushnotifications-playground (googledrive/pushnotifications-playground)

Google APIs provides Push Notification

You can visit Google APIs Explorer - search watch. There are few APIs support push notification now. Not all of them.

calendar.settings.watch	Calendar API v3	Watch for changes to Settings resources.
calendar.acl.watch	Calendar API v3	Watch for changes to ACL resources.
calendar.calendarList.watch	Calendar API v3	Watch for changes to CalendarList resources.
calendar.events.watch	Calendar API v3	Watch for changes to Events resources.
storage.objects.watchAll	Cloud Storage API v1beta2	Watch for changes on all objects in a bucket.
reports.activities.watch	Admin Reports API reports_v1	Push changes to activities
directory.users.watch	Admin Directory API directory_v1	Watch for changes in users list
directory.users.aliases.watch	Admin Directory API directory_v1	Watch for changes in user aliases list
storage.objects.watchAll	Cloud Storage API v1	Watch for changes on all objects in a bucket.
youtube.playlistItems.update	YouTube Data API v3	Modifies a playlist item. For example, you could update the item’s position in the playlist.
drive.files.watch	Drive API v2	Subscribe to changes on a file
drive.changes.watch	Drive API v2	Subscribe to changes for a user.

AngularJs, RequireJs, Grunt and Bower Part4 - How to extend your own code with ASP.NET MVC

noreply@blogger.com (Anonymous) — Tue, 15 Jul 2014 16:33:00 +0800

This article is part of a series of posts on RequireJs, AnguarJs, Grunt and Bower. Here are the parts so far:

AngularJs, RequireJs, Grunt and Bower Part1 - Getting Started and concept with ASP.NET MVC
AngularJs, RequireJs, Grunt and Bower Part2 - Grunt
AngularJs, RequireJs, Grunt and Bower Part3 - generator-angular-requirejs-grunt-bower with ASP.NET MVC
AngularJs, RequireJs, Grunt and Bower Part4 - How to extend your own code with ASP.NET MVC
AngularJs, RequireJs, Grunt and Bower Part5 - generator-angular-requirejs-grunt-bower with Express.js //to be done

In previou aticles that we talked about how to integrate AngularJs, Requirejs, Grunt and bower with ASP.NET MVC. If you don’t want to create those file structure manual. You can install generator-angular-requirejs-grunt-bower yeoman generator.

Simple step to install yeoman generator

install generator: npm install -g generator-angular-requirejs-grunt-bower
cd to project root folder
execute command yo angular-requirejs-grunt-bower

Scenario

As basic concept we mentioned that we want to treat ControllerName/actionName as single page application and try to reuse shared code as possible base on this file structure. Now, let’s create a new ASP.NET MVC controller and extend new AngularJs application.

Step 1: create new ASP.NET MVC `controller`

please create a new controller named ProjectController via Visual studio.
Add new view named Index.cshtml
modify Views/Project/Index.cshtml. The only thing you need to do is add Angular route directive ng-view. We will handle UI in AngularJs partile view.

@{
    ViewBag.Title = "Product";
}

<div ng-view></div>

Step 2: create new AngularJs application

create file structure as following.

Public/js/views/Project, AngularJs application container and named same as Controller
Public/js/views/Project/index.js, application entry point
Public/js/views/Project/patials, we will put all partials view HTML here
Public/js/views/Project/patials/project-index.html, default AngulaJs route view.
Public/js/controllers/product-controller.js, Product controller.

`project-index.html`: Product partials view

<div>
    this is Project Index page.
</div>

`product-controller.js`: Product controller

define(['controllers/controllers'], function (controllers) {
    controllers.controller('ProjectIndexCtrl', ['$scope',
        function ($scope) {
            console.log('ProjectIndexCtrl execute.');
        }
    ]);
});

`index.js`: Product AngularJs single page application entry point.

'use strict';

require([
        'angular',
        'app',
        'domReady',
        'controllers/product-controller',
        'bootstrap'
],
    function (angular, app, domReady) {
        var root = require.toUrl('.').split('.')[0];
        app.config([
            '$routeProvider', '$httpProvider', '$sceDelegateProvider', '$locationProvider',
            function ($routeProvider, $httpProvider, $sceDelegateProvider, $locationProvider) {
                // sec
                $sceDelegateProvider.resourceUrlWhitelist(['self', '.*']);

                // route
                $routeProvider.
                when('/', {
                    templateUrl: '/public/js/views/Product/partials/product-index.html',
                    controller: 'ProjectIndexCtrl',
                    resolve: {}
                }).
                otherwise({
                    redirectTo: '/'
                });
            }
        ]).run([
            '$rootScope',
            function ($rootScope) {
                // global variable

                $rootScope.$safeApply = function ($scope, fn) {
                    $scope = $scope || $rootScope;
                    fn = fn || function () { };
                    if ($scope.$$phase) {
                        fn();
                    } else {
                        $scope.$apply(fn);
                    }
                };
            }
        ]).constant('$', $);

        domReady(function () {
            angular.bootstrap(document.body, ['myAngularApp']);

            $('html').addClass('ng-app: myAngularApp');
        });
    }
);

Preview

Step 3: Let’s extend shared service for different single page application

Till now, we have two AngularJs single page application HomeController and ProductController and they don’t include any AngularJs service, directive or filter module.

Add a new ASP.NET MVC BookController ApiController
Add a AngularJs server named /Public/js/services/bookService.js. Using ng-source to call API
Inject book-service.js to Product application
Inject book-service.js to Home application

Add `BookController` ApiController

// GET: api/Book
public IEnumerable<string> Get()
{
    return new string[] { "ABookApart.CSS3.For.Web.Designers.2010", "AngularJS Directives" };
}

`book-service.js`

Add a new AngularJs service locate in Public/js/service/book-service.js.

define(['services/services'], function (services) {
    // Book resource
    services.factory('BOOK', ['$resource', function ($resource) {
        var resetUrl = '/api/Book';
        var resource = $resource(resetUrl, {}, { get: { method: 'GET', isArray: true } });

        return resource;
    }]);

    // BookLoader
    services.factory('BookLoader', ['$q', 'BOOK', function ($q, BOOK) {
        return function () {
            var delay = $q.defer();
            BOOK.get(function (data) {
                delay.resolve(data);
            }, function (error) {
                delay.reject('Unable to fetch Book list');
            });
            return delay.promise;
        };
    }]);
});

Inject `book-service.js` `BookLoader` to AngularJs route resolve

If you are familier with AngularJs. There is a resolve function you can call in AngularJs route. We define a BookLoader function that implement with promise pattern. Then, we can inject the result to our controller. Resolve can help us to fetch API before controller called.

How can we inject book service to AngularJs application via RequireJs require feature. That’s mean we can inject different feature in other application easily.

`js/views/Product/index.js`

....
'controllers/product-controller',
'services/book-service',
...

`controller/Product-controller.js`

controllers.controller('ProjectIndexCtrl', ['$scope', 'books', function ($scope, books) {
    console.log('ProjectIndexCtrl execute.');

    $scope.books = books;
}]);

Preview

Inject `book-service.js` `BOOK` service to AngularJs route resolve

We have defined BOOK AngularJs service. Different with Product application. We use BOOK service instead of BooKloader promise service.

// js/views/Home/index.js
...
'domReady',
'controllers/home-controller',
'services/book-service',
'bootstrap'
...

// js/controller/home-controller.js
define(['controllers/controllers'], function (controllers) {
    controllers.controller('HomeCtrl', ['$scope', 'BOOK', function ($scope, BOOK) {
            console.log('HomeCtrl execute.');

            $scope.books = BOOK.get({}, function (books) {
                return books;
            });
    }]);
});

We inject BOOK service in controller directly and bind Book.get() to $scope.books. Whatever we use AngularJs route resolve or inject service directly. They points to same service we defined.

Preview

Grunt

As we mentioned before. we still can build for every AngularJs we defined. Befere we build our application, we need to modify Gruntfile.js manual.

...
 modules: [{
        name: 'views/Home/index'
    }, {
        name: 'views/Product/index'
    }],
...

grunt

Github Source Code

cage1016/AngularJsRequireJsGruntBower

After you clone source code from github repo, you can run following command:

git checkout -f step-0 is status project created
git checkout -f step-1 is status Nuget install Require.js.
git checkout -f step-2 is status project Add AngularJs, RequireJs, Grunt and Bower to Public folder.
git checkout -f step-3 is status modify _Layout.chtml to render RequireJs. You will see the final result.
- Please cd to AngularJsRequireJsGruntBower\AngularJsRequireJsGruntBower\Public and execute bower install to restore those library project included.
git checkout -f setp-4 is status ready to do grunt tasks.
- Please cd to AngularJsRequireJsGruntBower\AngularJsRequireJsGruntBower\Public and execute npm install to restore grunt required libraries.
- execute command grunt to do grunt tasks.
git checkout -f step-5 extend Product application
git checkout -f step-6 extend AngularJs service book-service and add BookLoader to route resolve
git checkout -f step-7 extend AngularJs service book-service and inject BOOK service to controller
git checkout -f step-8 add Product to Gruntfile.js module block

AngularJs, RequireJs, Grunt and Bower Part3 - generator-angular-requirejs-grunt-bower with ASP.NET MVC (Updatd 2014/7/15)

noreply@blogger.com (Anonymous) — Mon, 14 Jul 2014 16:29:00 +0800

This article is part of a series of posts on RequireJs, AnguarJs, Grunt and Bower. Here are the parts so far:

AngularJs, RequireJs, Grunt and Bower Part1 - Getting Started and concept with ASP.NET MVC
AngularJs, RequireJs, Grunt and Bower Part2 - Grunt
AngularJs, RequireJs, Grunt and Bower Part3 - generator-angular-requirejs-grunt-bower with ASP.NET MVC
AngularJs, RequireJs, Grunt and Bower Part4 - How to extend your own code with ASP.NET MVC
AngularJs, RequireJs, Grunt and Bower Part5 - generator-angular-requirejs-grunt-bower with Express.js //to be done

We are talking about integrate AngularJs, RequireJs, Grunt and Bower in ASP.NET MVC project in previous part.

Javascript file structure

Public
    └── js
    |   ├── controllers
    |   ├── css
    |   ├── directives
    |   ├── services
    |   ├── vendor
    |   ├── filters
    |   ├── views
    |   |   └── ...
    |   ├── app.js
    |   └── config.js
    └── release
        ├── views
        |   └── ...
        ├── app.js
        └── config.js

Above is the font-end file structure we mentioned in previous articles. It’s dozens of files we need to create. So, i put those of work to yeoman generator-angular-requirejs-grunt-bower.

Getting started

cd to project root
Install the generator: npm install -g generator-angular-requirejs-grunt-bower
Run: yo angular-requirejs-grunt-bower

Yeoman Generator: angular-requirejs-grunt-bower

Github:
cage1016/generator-angular-requirejs-grunt-bower

AngularJs, RequireJs, Grunt and Bower Part2 - Grunt (Update: 2014/7/15)

noreply@blogger.com (Anonymous) — Wed, 2 Jul 2014 11:29:00 +0800

This article is part of a series of posts on RequireJs, AnguarJs, Grunt and Bower. Here are the parts so far:

Grunt

Why use a task runner?

In one word: automation. The less work you have to do when performing repetitive tasks like minification, compilation, unit testing, linting, etc, the easier your job becomes. After you’ve configured it, a task runner can do most of that mundane work for you—and your team—with basically zero effort.

Why use Grunt?

The Grunt ecosystem is huge and it’s growing every day. With literally hundreds of plugins to choose from, you can use Grunt to automate just about anything with a minimum of effort. If someone hasn’t already built what you need, authoring and publishing your own Grunt plugin to npm is a breeze.

If you are familiar with Grunt. You could feel how powerful it is, how could it reduce your repetitive tasks and make your work more easier.

Grunt with our ASP.NET MVC Project

Concept

...
Public
    └── js
    |   ├── controllers
    |   ├── css
    |   ├── directives
    |   ├── services
    |   ├── vendor
    |   ├── filters
    |   ├── views
    |   |   └── ...
    |   ├── app.js
    |   └── config.js
    └── release
        ├── views
        |   └── ...
        ├── app.js
        └── config.js

In AngularJs, RequireJs, Grunt and Bower Part1 - Getting Started and concept with ASP.NET MVC ~ 竹部落 post. We talk about how to integrate AngularJs, RequireJs, Grunt and Bower with our ASP.NET MVC project and put all of code in Public/js folder. Browser will load those files one by one by following RequireJs definition and dependencies we define in Public/js/config.js.

Be a large AngularJs single page application, you might include a lots of file to the project. For example: in our ASP.NET MVC project. Implement the file structure i mentioned in last post. Browser will load more the 20 file. Web page loading speed will increase if browser load more files. During development, separation of concerns (SoC) will help us to break down the problem to smaller. So, we need a solution to help us to combine related file and decrease web page loding speed in release mode. That’s Rquirejs + Grunt.

RequireJs + Grunt

Our gold is improve page loading speed by reduce include file count in our project in final release/product. RequireJs has an optimization tool can help us to combine related file and minifies them and grunt-contrib-requirejs and put RequireJs work with Grunt well.

REQUIREJS OPTIMIZER

Combines related scripts together into build layers and minifies them via UglifyJS (the default) or Closure Compiler (an option when using Java).
Optimizes CSS by inlining CSS files referenced by @import and removing comments.

Gruntfile.js

module.exports = function(grunt) {
    'use strict';
    require('load-grunt-tasks')(grunt);

    // configurable paths
    var mvcConfig = {
        js: 'js',
        release: 'release',
        tmp: 'tmp'
    };

    grunt.initConfig({
        mvc: mvcConfig,
        clean: {...},
        copy: {...},
        requirejs: {...},
        concat: {...},
        uglify: {...},
        htmlmin: {...},
        jshint: {...},
        cssmin: {...}
    });

    // task
    grunt.registerTask('build', [
        'clean:release',
        'clean:tmp',
        'copy:vendor',
        'copy:module',
        'requirejs',
        'copy:basic',
        'copy:css',
        'cssmin',
        'clean:tmp',
        'htmlmin'
    ]);

    grunt.registerTask('default', [
        'jshint',
        'build'
    ]);
};

We can define multiple grunt tasks in Gruntfile.js. All you need to do is executing command grunt. Grunt will execute all of tasks one by one. How, let we check before doing the grunt task.

using bower package manager to handle what library we include and put all libraries in vendor. Ex: AngularJs, jQuery , moment ects.
config.js define the library dependencies and library path.
implement file structure as we mentioned before.

Our Grunt scenario is copy required file from public/js/... to public/tmp/... folder. Grunt task requirejs:complie will combine scripts together and put it in public/release folder.

grunt-contrib-requirejs optimize RequireJS projects using r.js. Most of needed configuration is same as RequireJs required but file path. We need to modify file path to our temporary folder tmp.

 paths: {
        ...
        'angular': '../<%= mvc.tmp %>/vendor/angular',
        'jquery': '../<%= mvc.tmp %>/vendor/jquery.min',
        ...

One more thing. We need to replace file path in our release RequireJs config.js from js to release. It will make sure relese RequireJs config.js is reference to current source folder.

onBuildRead: function(moduleName, path, contents) {
    if (moduleName === 'config') {
        var x = (function(contents) {
            var regex = /'(vendor|libs)[^']*'/gm;
            var matches = contents.match(regex);
            for (var i = 0; i < matches.length; i++) {
                var match = matches[i];
                var m = matches[i].split('/');
                contents = contents.replace(match, '\'vendor/' + m[m.length - 1].toLowerCase());
            }
            return contents;
        })(contents);

        return x.replace(/\/public\/js/g, '/public/release');
    }
    return contents;
},

Visit to Github to check whole Gruntfile.js file.

build.txt

After you execute command grunt. build.txt will be created automatically. It is a requirejs:complie log file and show you a list what libraries and user define scripts are combined together base on Gruntfile.js requirejs complie module setting.

// config.js
requirejs: {
    compile: {
        options: {
            ...
            modules: [{
                name: 'views/Home/index'
            }],
            ...
        }
    }
},

// build.txt
views/Home/index.js
----------------
vendor/jquery.min.js
vendor/moment.min.js
vendor/angular.js
vendor/respond.js
controllers/controllers.js
filters/filters.js
directives/directives.js
vendor/angular-resource.js
services/services.js
vendor/angular-animate.js
vendor/angular-cookies.js
vendor/angular-route.js
vendor/angular-sanitize.js
vendor/angular-touch.js
vendor/bootstrap.min.js
vendor/ui-bootstrap.min.js
vendor/ui-bootstrap-tpls.min.js
app.js
vendor/domReady.js
controllers/home-controller.js
views/Home/index.js

Preview

Final step, we need to change solution configuration from Debug to Release in Visual Studio toolbar and rebuild the project. Open Chrome Developer tools and switch to Network panel. You will see browser load two files config.js and index.js

Reference

Github Source Code

cage1016/AngularJsRequireJsGruntBower

After you clone source code from github repo, you can run following command:

git checkout -f step-0 is status project created
git checkout -f step-1 is status Nuget install Require.js.
git checkout -f step-2 is status project Add AngularJs, RequireJs, Grunt and Bower to Public folder.
git checkout -f step-3 is status modify _Layout.chtml to render RequireJs. You will see the final result.
- Please cd to AngularJsRequireJsGruntBower\AngularJsRequireJsGruntBower\Public and execute bower install to restore those library project included.
git checkout -f setp-4 is status ready to do grunt tasks.
- Please cd to AngularJsRequireJsGruntBower\AngularJsRequireJsGruntBower\Public and execute npm install to restore grunt required libraries.
- execute command grunt to do grunt tasks.

AngularJs, RequireJs, Grunt and Bower Part1 - Getting Started and concept with ASP.NET MVC (update:2014/7/16)

noreply@blogger.com (Anonymous) — Sat, 28 Jun 2014 13:20:00 +0800

This article is part of a series of posts on RequireJs, AnguarJs, Grunt and Bower. Here are the parts so far:

AngularJs, RequireJs, Grunt and Bower Part1 - Getting Started and concept with ASP.NET MVC.
AngularJs, RequireJs, Grunt and Bower Part2 - Grunt
AngularJs, RequireJs, Grunt and Bower Part3 - generator-angular-requirejs-grunt-bower with ASP.NET MVC
AngularJs, RequireJs, Grunt and Bower Part4 - How to extend your own code with ASP.NET MVC
AngularJs, RequireJs, Grunt and Bower Part5 - Yoeman generator-angular-requirejs-grunt-bower with Express.js //to be done

There are more and more fancy web applications. Developers have one same gold that they want their visitors have better user experience. So, they start working with heave JavaScript. (AngularJs, Backbone.js, Emberjs etc.).

There are dozen of awesome Javascript frameworks now, You can choose the suitable one for your project. In my company, we use ASP.NET MVC to develop web application. From ASP.NET MVC 2, 3, 4 to 5. I am looking a good practice to implement a good Javascript framework to my project till i meet AngularJs. AngularJs Javascript is top 10 Github repo until now and hosted by Google.

It’s very easy to use AngularJs in your web application page.

<!doctype html>
<html ng-app>
  <head>
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.0-beta.13/angular.min.js"></script>
  </head>
  <body>
    <div>
      <label>Name:</label>
      <input type="text" ng-model="yourName" placeholder="Enter a name here">
      <hr>
      <h1>Hello {{yourName}}!</h1>
    </div>
  </body>
</html>

Above is a simple sample code from AngularJs official page. live demo here

MVVM concept and powerful two-way databinding can help you solve the problem you might working hard with jQuery. But for the large web application. Is a better way to integrate AngularJs in your project? YES, you can re-factor your code to module and include it to project.

// i define a ui.tiff module to hanle tiff viewer
angular.module('ui.tiff', ['ui.tiff.controller', 'ui.tiff.service', 'ui.tiff.directive', 'ui.tiff.filter']);
angular.module('ui.tiff.controller', []).controller('_aCtrl', ['$scope',
    function($scope) {
        ...
    }
]);

angular.module('ui.tiff.service', []).factory('ImageInfo', ['$resource',
    function($resource) {
        ...
    }
]);

angular.module('ui.tiff.directive', []).directive('tiffClick', [
    function() {
        ...
    }
]);

angular.module('ui.tiff.filter', []).filter('thumbnail', function() {
    ...
});

Concept

Be an ASP.NET MVC developer. How can we integrate APS.NET MVC with AngulaJs as well? ASP.NET MVC can render view page for each controller method. for example:

Views/Home/Index
Views/Home/About
Views/Management/Index

For Above route URL, we can get different ASP.NET MVC view page. But, i want to treat each of them as individual SPA (single page appliation) and share the same code (AngluarJs server or AngularJs filter modules etc.) for different SPA.

Views/Home/Index (SPA)
Views/Home/About (SPA)
Views/Home/Contact
Views/Management/Index (SPA)

Dan Wahlin has many awesome articles talk about ASP.NET MVC with AngularJs

Dan Wahlin - Dan Wahlin

The AngularJS Magazine - Flipboard

Scenario

Yngve Bakken Nilsen has a awesome article talk about Making RequireJS play nice with ASP.NET MVC

RequireJs

In a heavey Javascript project. you might load more than 10 Javascript libraries easily. One of most important issues is to figure out Javascript library dependency and library synchronous loading. RequireJs is a JavaScript file and module loader.You can define library dependency (not worry which library should be loaded earlier than another one.) and avoid page loading block problem.

My solution is base on Yngve Bakken Nilsen article (RequierJs with ASP.NET MVC) but integrate with AngularJs, Grunt and Bower.

ASP.NET MVC File Structure

...
├── Controller
|   └── HomeController
├── Views
|   └── Home
|       ├── About.cshtml
|       ├── Contact.cshtml
|       └── Index.cshtml
├── Models
...

Above is ASP.NET MVC normal file structure. You can add NameController and assign view template views/ControllerName/ActionName to render view page. As i menetioned before, i’ll like to treat Views/Controler as SPA. so, i rearrange the basic file strcutre and put all of Javscript file in Public folder.

for the controller has more than one action view page. I move those page to front-end AngularJs framework. AngularJs route will handle this part.

AngularJs, RequireJs, Grunt and Bower OverView

Above diagram is whole project overview. RequireJs let us can include specific library we needed. All Javascript codes are put in Public folder.

...
Public
|   └── js
|   |   ├── controllers
|   |   |   ├── controllers.js
|   |   |   └── home-controller.js
|   |   ├── css
|   |   ├── directives
|   |   |   ├── directives.js
|   |   |   └── home-directive.js
|   |   ├── services
|   |   |   └── services.js
|   |   ├── vendor
|   |   ├── filters
|   |   |   ├── filters.js
|   |   |   └── common-filer.js
|   |   ├── views
|   |   |   ├── Management
|   |   |   |   ├── partials
|   |   |   |   |   └── management-index.html
|   |   |   |   └── index.js
|   |   |   └── Home
|   |   |       ├── partials
|   |   |       |   └── home-index.html
|   |   |       └── index.js
|   |   ├── app.js
|   |   └── config.js
|   └── release
Views
    ├── Management
    |   └── Index.cshtml    
    └── Home
        └── Index.cshtml

As you can see the modified file structure. Public/js/views file structure like ASP.NET MVC Views. So, we could dynamic to load SPA by RequireJs if we have defined it in Public/js/views/mapping to ASP.NET MVC controller.

// Route: http://localhost/Home/Index
require( [ "/public/js/config.js" ], function() {
    require( [ "views/Home/Index" ] ); 
});

// Route: http://localhost/Account/Index
// no any AngularJs application will be loaded.
require( [ "/public/js/config.js" ], function() {
    require( [""] ); 
});

Angularjs Application

The basic concept is that i want to treat ASP.NET MVC route Views/ControllerName as a individual AngularJs SPA and Dynamic be loaded if i have defined it.

Define AngularJs module using RequireJs define.
Include needed module with RequireJs require.

I can define task orientation AngularJs module as you can see in above diagram. It’s easy to include specific controller, service, filter and direcitve that inherent from controllers/controllers, services/services, filters/filters and directives/directives in application. Put all together and bootstrap AngularJs application when DOM ready.

Everything looks so good but RequireJs config.js. I have to tell RequireJs the external libraries path and module name i include to the application. There are more information about RequireJs configuration in here.

require.config({
    baseUrl: "/public/js",
    waitSeconds: 200,
    paths: {
        'angular': 'vendor/angular/angular.min',
        'angular.zh-tw': 'vendor/angular-i18n/angular-locale_zh-tw',
        'angular.route': 'vendor/angular-route/angular-route.min',
        'angular.resource': 'vendor/angular-resource/angular-resource.min',
        'angular.animate': 'vendor/angular-animate/angular-animate.min',
        'angular.sanitize': 'vendor/angular-sanitize/angular-sanitize.min',
        'angular.cookies': 'vendor/angular-cookies/angular-cookies.min',

        'jquery': 'vendor/jquery/jquery.min',
        'moment': 'vendor/momentjs/min/moment.min',
        'respond': 'vendor/respond/dest/respond.src',
        'domReady': 'vendor/requirejs-domready/domReady',

        'bootstrap': 'vendor/bootstrap/dist/js/bootstrap.min',
        'uiBootstrap': 'vendor/angular-ui-bootstrap-bower/ui-bootstrap.min',
        'uiBootstrapTpl': 'vendor/angular-ui-bootstrap-bower/ui-bootstrap-tpls.min',
    },
    shim: {
        'moment': {
            exports: 'moment'
        },
        'angular': {
            deps: ['jquery', 'moment'],
            exports: 'angular'
        },
        'angular.zh-tw': ['angular'],
        'angular.route': ['angular'],
        'angular.resource': ['angular'],
        'angular.sanitize': ['angular'],
        'angular.animate': ['angular'],
        'angular.cookies': ['angular'],
        'respond': {
            exports: 'respond'
        },
        'bootstrap': {
            deps: ['jquery'],
            exports: 'bootstrap'
        },
        'uiBootstrap': {
            deps: ['angular', 'bootstrap'],
            exports: 'uiBootstrap'
        },
        'uiBootstrapTpl': {
            deps: ['angular', 'uiBootstrap']
        }
    },
    //urlArgs: "bust=" + (new Date()).getTime()
    urlArgs: "bust=v8"
});

It’s very convenient to integrate Bower package manager with your project. I put all of external libraries in vendor and save those library in bower.json. You can restore those libaries by execute command bower install

//bower.json
{
  "name": "application name",
  "version": "0.0.1",
  "dependencies": {},
  "devDependencies": {
    "angular": "~1.2.16",
    "requirejs-domready": "~2.0.1",
    "angular-route": "~1.2.16",
    "angular-resource": "~1.2.16",
    "angular-sanitize": "~1.2.16",
    "angular-cookies": "1.2.16",
    "momentjs": "~2.5.1",
    "angular-animate": "~1.2.16",
    "respond": "~1.4.2",
    "jquery": "1.10.2",
    "bootstrap": "~3.1.1",
    "angular-i18n": "~1.2.16",
    "angular-ui-bootstrap-bower": "~0.11.0",
    "moment": "~2.6.0"
  },
  "resolutions": {
    "angular": "~1.2.16"
  }
}

Intergrate with ASP.NET MVC

    ...
    var action = helper.ViewContext.RouteData.Values["action"];
    var controller = helper.ViewContext.RouteData.Values["controller"];
    string module = string.Format("views/{0}/{1}", controller, action);

    string jsLocation = "/public/js/";
    if (File.Exists(helper.ViewContext.HttpContext.Server.MapPath(Path.Combine(jsLocation, module + ".js"))))
    {
        require.AppendLine("require( [ \"" + jsLocation + core + "\" ], function() {");
        require.AppendLine("    require( [ \"" + module + "\"] );");
        require.AppendLine("});");
    }
    else
    {
        require.AppendLine("require( [ \"" + jsLocation + core + "\" ], function() {");
        require.AppendLine("    require( [ \"jquery\", \"bootstrap\" ] );");
        require.AppendLine("});");
    }
    ...

Final step. All you need to do is go Views/Shared/_Layout.cshtml and add @Html.ViewSpecificRequireJS() before body close tag. @Html.ViewSpecificRequireJS() is a ASP.NET MVC static method and it will read your project file structure. If you define an application in /public/js/view/Home and ASP.NET MVC route is mapping to views/controllerName. @Html.ViewSpecificRequireJS() static method will redener it, otherwise not. Don’t forget to include @Html.ViewSpecificRequireJS() Namespace @using Requirejs.Helpers in top of Views/Shared/_Layout.cshtml page.

you have to add <div ng-view></div> to thoes ASP.NET MVC views page for AngularJs route.

Preview

Reference

Making RequireJS play nice with ASP.NET MVC by Yngve Bakken Nilsen
RequireJS API config
Bower Package manager
Dan Wahlin - Dan Wahlin

Github Source Code

cage1016/AngularJsRequireJsGruntBower

After you clone source code from github repo, you can run following command:

git checkout -f step-0 is status project created
git checkout -f step-1 is status Nuget install Require.js.
git checkout -f step-2 is status project Add AngularJs, RequireJs, Grunt and Bower to Public folder.
git checkout -f step-3 is status modify _Layout.chtml to render RequireJs. You will see the final result.
- Please cd to AngularJsRequireJsGruntBower\AngularJsRequireJsGruntBower\Public and execute bower install to restore those library project included.
git checkout -f setp-4 is status ready to do grunt tasks.
- Please cd to AngularJsRequireJsGruntBower\AngularJsRequireJsGruntBower\Public and execute npm install to restore grunt required libraries.
- execute command grunt to do grunt tasks.

Welcome document

noreply@blogger.com (Anonymous) — Wed, 4 Jun 2014 21:07:00 +0800

Welcome to StackEdit!

Hello, I am your first Markdown document within StackEdit1. Don’t delete me, I can be helpful. I can be recovered anyway in the Utils tab of the Settings dialog.

Documents

StackEdit stores your documents in your browser, which means all your documents are automatically saved locally and are accessible offline!

NOTE:

StackEdit is accessible offline after the application has been loaded for the first time.

Your local documents are not shared between different browsers or computers.

Clearing your browser’s data may delete all your local documents! Make sure your documents are backed up using Google Drive or Dropbox synchronization (see Synchronization section).

Create a document

You can create a new document by clicking the button in the navigation bar. It will switch from the current document to the new one.

Switch to another document

You can list all your local documents and switch from one to another by clicking the button in the navigation bar.

Rename a document

You can rename the current document by clicking the document title in the navigation bar.

Delete a document

You can delete the current document by clicking the button in the navigation bar.

Save a document

You can save the current document to a file using the Save as... sub-menu from the menu.

Tip: See Publish a document section for a description of the different output formats.

Synchronization

StackEdit can be combined with Google Drive and Dropbox to have your documents centralized in the Cloud. The synchronization mechanism will take care of uploading your modifications or downloading the latest version of your documents.

NOTE:

Full access to Google Drive or Dropbox is required to be able to import any document in StackEdit.

Imported documents are downloaded in your browser and are not transmitted to a server.

If you experience problems exporting documents to Google Drive, check and optionally disable browser extensions, such as Disconnect.

Import a document

You can import a document from the Cloud by going to the Google Drive or the Dropbox sub-menu and by clicking Import from.... Once imported, your document will be automatically synchronized with the Google Drive / Dropbox file.

Export a document

You can export any document by going to the Google Drive or the Dropbox sub-menu and by clicking Export to.... Even if your document is already synchronized with Google Drive or Dropbox, you can export it to a another location. StackEdit can synchronize one document with multiple locations.

Tip: Using Google Drive, you can create collaborative documents to work in real time with other users. Just check the box Create a real time collaborative document in the dialog options when exporting to Google Drive.

Synchronize a document

Once your document is linked to a Google Drive or a Dropbox file, StackEdit will periodically (every 3 minutes) synchronize it by downloading/uploading any modification. Any conflict will be detected, and a local copy of your document will be created as a backup if necessary.

If you just have modified your document and you want to force the synchronization, click the button in the navigation bar.

NOTE: The button is disabled when you have no document to synchronize.

Manage document synchronization

Since one document can be synchronized with multiple locations, you can list and manage synchronized locations by clicking Manage synchronization in the menu. This will open a dialog box allowing you to add or remove synchronization links that are associated to your document.

NOTE: If you delete the file from Google Drive or from Dropbox, the document will no longer be synchronized with that location.

Publication

Once you are happy with your document, you can publish it on different websites directly from StackEdit. As for now, StackEdit can publish on Blogger, Dropbox, Gist, GitHub, Google Drive, Tumblr, WordPress and on any SSH server.

Publish a document

You can publish your document by going to the Publish on sub-menu and by choosing a website. In the dialog box, you can choose the publication format:

Markdown, to publish the Markdown text on a website that can interpret it (GitHub for instance),
HTML, to publish the document converted into HTML (on a blog for instance),
Template, to have a full control of the output.

NOTE: The default template is a simple webpage wrapping your document in HTML format. You can customize it in the Services tab of the Settings dialog.

Update a publication

After publishing, StackEdit will keep your document linked to that publish location so that you can update it easily. Once you have modified your document and you want to update your publication, click on the button in the navigation bar.

NOTE: The button is disabled when the document has not been published yet.

Manage document publication

Since one document can be published on multiple locations, you can list and manage publish locations by clicking Manage publication in the menu. This will open a dialog box allowing you to remove publication links that are associated to your document.

NOTE: In some cases, if the file has been removed from the website or the blog, the document will no longer be published on that location.

Markdown Extra

StackEdit supports Markdown Extra, which extends Markdown syntax with some nice features.

Tip: You can disable any Markdown Extra feature in the Extensions tab of the Settings dialog.

Tables

Markdown Extra has a special syntax for tables:

Item	Value
Computer	1600 USD
Phone	12 USD
Pipe	1 USD

You can specify column alignment with one or two colons:

Item	Value	Qty
Computer	1600 USD	5
Phone	12 USD	12
Pipe	1 USD	234

Definition Lists

Markdown Extra has a special syntax for definition lists too:

Term 1
Term 2: Definition A; Definition B
Term 3: Definition C; Definition D

part of definition D

Fenced code blocks

GitHub’s fenced code blocks2 are also supported with Prettify syntax highlighting:

// Foo
var bar = 0;

Tip: To use Highlight.js instead of Prettify, just configure the Markdown Extra extension in the Settings dialog.

Footnotes

You can create footnotes like this3.

SmartyPants

SmartyPants converts ASCII punctuation characters into “smart” typographic punctuation HTML entities. For example:

	ASCII	HTML
Single backticks	`'Isn't this fun?'`	‘Isn’t this fun?’
Quotes	`"Isn't this fun?"`	“Isn’t this fun?”
Dashes	`-- is an en-dash and --- is an em-dash`	– is an en-dash and — is an em-dash

You can insert a table of contents using the marker [TOC]:

Comments

Usually, comments in Markdown are just standard HTML comments.
StackEdit extends HTML comments in order to produce useful, highlighted comments in the preview but not in your exported documents.

MathJax

You can render LaTeX mathematical expressions using MathJax, as on math.stackexchange.com:

The Gamma function satisfying $\Gamma(n) = (n-1)!\quad\forall n\in\mathbb N$ is via the Euler integral

Γ (z) = \int \infty 0 t z - 1 e - t d t .

$\Gamma(z) = \int_0^\infty t^{z-1}e^{-t}dt\,.$

Tip: Make sure you include MathJax into your publications to render mathematical expression correctly. Your page/template should include something like:

<script type="text/javascript" src="https://stackedit.io/libs/MathJax/MathJax.js?config=TeX-AMS_HTML"></script>

NOTE: You can find more information:

about Markdown syntax here,

about Markdown Extra extension here,

about LaTeX mathematical expressions here,

about Prettify syntax highlighting here,

about Highlight.js syntax highlighting here.


var express = require('express');
var path = require('path');
var favicon = require('static-favicon');
var logger = require('morgan');
var cookieParser = require('cookie-parser');
var session = require('express-session');
var flash = require('express-flash');
var bodyParser = require('body-parser');

var routes = require('./routes/index');
var users = require('./routes/users');
var oauth = require('./routes/oauth');

StackEdit is a full-featured, open-source Markdown editor based on PageDown, the Markdown library used by Stack Overflow and the other Stack Exchange sites. ↩
GitHub Flavored Markdown (GFM) is supported by StackEdit. ↩
Here is the text of the footnote. ↩

[Cydia] How to export Audio Record m4a directly.

noreply@blogger.com (Anonymous) — Sun, 2 Feb 2014 23:19:00 +0800

iOS Audio Record Cydia tweak is very a awesome tool to record voice phone call with ease. You all need to do is clicking the record button. There is a more detail introduction ( Record iPhone Calls With Audio Recorder – Free & No Warning | iPhone4idiots : http://www.iphone4idiots.com/2013/04/record-iphone-calls-with-audio-recorder-free-no-warning/)

Send m4a file via Email

Audio Record tweak default let you can send voice recording via email as following snapshot show. But you will not be able to send voice recording m4a file when file is too big.

Export m4a file via iFile/iTools etc tools

If we can not send voice recording file via email. You might think that we could get file directly. How do we do? In Audio Recorder list view. When you click shark button. Audio Recorder might take some time prepare data (m4a file) for sending via Email. Audio Recorder will create two m4a file in /var/tmp as following snapshot show. Both of them are same.

Audio Recorder m4a file path

/var/tmp

ASP.NET MVC 4 using Google Calendar API via OAuth 2

noreply@blogger.com (Anonymous) — Thu, 16 Jan 2014 22:26:00 +0800

Scenario

It's more easily to log in your application via OAuth and OpenID provider in ASP.NET MVC 4 now. Microsoft has few build-in client for Microsoft, Twitter, Facebook, Google. The Google client is based on OpenID and not OAuth. That's mean you can not access Google Data API. There is a post talk about how to implement custom Google client with Google+ login via OAuth in ASP.NET MVC 4. (http://www.beabigrockstar.com/google-signin-for-asp-net-mvc/ Google+ Signin for ASP.NET MVC - Be A Big Rockstar )

Register a Client ID for web application in Google Developer Console

In order to access Google Data API for web application. You need to register a Client ID to get Client ID an Client Secret for setting in your application.

As above snapshot show, you need to assign redirect URIs for grap OAuth access token callback also. Here we setup Rirect URIs as

 http://localhost:57271/Account/ExternalLoginCallback

Google Client Library for .NET

The Google APIs Client Library for .NET is generic .NET runtime client for Google Services. The library supports OAuth2.0 authentication, and is able to generate strongly typed client libraries for Discovery-based services.

Google Client library is a higher level library for using Google Data API. You can download beta version from Nuget in visual studio.

 https://www.nuget.org/packages/Google.Apis.Calendar.v3/

It's more difficult to handle Google Client Library for .NET with few documents and sample now. Here, just using Google.Apis.Calendar.v3.Data namespace to our strong type class for data binding in deserialize object from API response.

        private Event GoogleEventHandle(string token, string method, string requestURL, string requestBody = null)
        {
            var jsonSerializer = new JavaScriptSerializer();
            var request = WebRequest.Create(requestURL) as HttpWebRequest;
            request.KeepAlive = true;
            request.ContentType = "application/json";
            request.Method = method;
            request.Headers.Add("Authorization", "Bearer " + token);

            if(requestBody != null)
            {
                Stream ws = request.GetRequestStream();
                using (var streamWriter = new StreamWriter(ws, new UTF8Encoding(false)))
                {
                    streamWriter.Write(requestBody);
                }
            }

            var response = request.GetResponse();
            var stream = new StreamReader(response.GetResponseStream());

            var googleEvent = Newtonsoft.Json.JsonConvert.DeserializeObject(stream.ReadToEnd().Trim());

            return googleEvent;  
        }

        private Event CreateGoogleEvent(string token, string calendarId, string requestBody)
        {
            var requestURL = string.Format("https://www.googleapis.com/calendar/v3/calendars/{0}/events", calendarId);
            return GoogleEventHandle(token, "POST", requestURL, requestBody);              
        }

Above is methods how we are accessing Google Calendar v3 API via webrequest.

MVC view

Now, we are be able to access Google Calendar API via OAuth. Nest step, we will create a simple CRUD UI by AngularJS.

The Google Event we created and save to database also.

You should choose which calendar you want to create a new event.

You can modify event anytime you want.

What you will see in your Google Calendar.

Summary

It a good topic to discuss where do you store the Access token from Google OAuth. Session or database?
Google Client Library for .NET is a convienient library to access Google Data API with OAuth include. It's still in developing and i hope that there have more documents and samples to show how to use it.

Reference

http://www.asp.net/mvc/tutorials/security/using-oauth-providers-with-mvc (Using OAuth Providers with MVC 4 : The Official Microsoft ASP.NET Site)
http://www.beabigrockstar.com/google-signin-for-asp-net-mvc/ (Google+ Signin for ASP.NET MVC - Be A Big Rockstar)
http://coding.anyun.tw/2012/03/14/asp-net-mvc-using-oauth-2-0-connect-google-api/ (【oAuth 2.0 實作系列】ASP.Net MVC 實作使用 oAuth 2.0 連接 Google API « Coding 之路，不由分說)
https://code.google.com/p/google-api-dotnet-client/ (google-api-dotnet-client - Google APIs Client Library for .NET - Google Project Hosting)

Github repository

As always, all source code can be found in Github in the repository
https://github.com/cage1016/ASPNETMvc4GoogleOAuth

[Titanium]iOS: App build fails on Snow Leopard/iOS 4.3 configured machine

noreply@blogger.com (Anonymous) — Sat, 26 May 2012 16:55:00 +0800

Lion 10.7.4
xCode 4.3

iPhone Simulator

Titanium SDK 1.7.5, 1.8.2, 2.0.1GA and 2.0.1.GA2. Everything does work on iPhone Simulator. But, it is very SLOW when you want to rebuild project or debug it.

Install to iOS Device

I got an error message below when i want to install project to iOS device in the couple days. It success when i choose Titanium SDK lower 1.8x.

[ERROR] /Users/timothy/Documents/Titanium Studio Workspace/Scratch/build/iphone/Classes/NetworkModule.m:252:44: error: use of undeclared identifier 'UIRemoteNotificationTypeNewsstandContentAvailability' [2]
[ERROR] /Users/timothy/Documents/Titanium Studio Workspace/Scratch/build/iphone/Classes/NetworkModule.m:304:33: error: use of undeclared identifier 'UIRemoteNotificationTypeNewsstandContentAvailability' [2]
[ERROR] 
[ERROR] Error: Traceback (most recent call last):
File "/Library/Application Support/Titanium/mobilesdk/osx/2.0.1.v20120410131722/iphone/builder.py", line 1318, in main
execute_xcode("iphonesimulator%s" % link_version,["GCC_PREPROCESSOR_DEFINITIONS=__LOG__ID__=%s DEPLOYTYPE=development TI_DEVELOPMENT=1 DEBUG=1 TI_VERSION=%s %s %s" % (log_id,sdk_version,debugstr,kroll_coverage)],False)
File "/Library/Application Support/Titanium/mobilesdk/osx/2.0.1.v20120410131722/iphone/builder.py", line 1224, in execute_xcode
output = run.run(args,False,False,o)
File "/Library/Application Support/Titanium/mobilesdk/osx/2.0.1.v20120410131722/iphone/run.py", line 41, in run
sys.exit(rc)
SystemExit: 65

Finally, i got the solution when i search an issue tracker in appcelerator. This bug has fixed in Release 2.1.0.

Reference

iOS: App build fails on Snow Leopard/iOS 4.3 configured machine
appcelerator Continuous Builds where you can download 2.1.x builds.

[Notebook] How to setup iphoneofflinemap on your iPhone, cydia requirement.

noreply@blogger.com (Anonymous) — Thu, 22 Sep 2011 23:47:00 +0800

Smart phone map App may have already improved your life experience if you ever used it. You can check map anytime and anywhere on your smart phone but internet necessary. Offlinemap let you can check map without internet. It's very convenient to you when you are in oversea or can't access the internet.

iphoneofflinemap is an iphone cydia app that you can put offline map grabbed from Google map using GMDL (Global Map Download Tool)

simple scenario

preparing necessary tools → backup current iphone cache map → Download target offline map → modify downloaded map → upload to iPhone → setup bookmark → respring

Step1.Getting started. You need to download few tools.

GMDL (Global Map Download Tool). In iphoneofflinemap project. issues 59 reported: downloaded map doesn't work with ios4. Someone update a GMDL ip4 v10 hack. You can download hacked version here that you don't need to convert maps by mapconverter anymore.
SQLite manager Firefox extension that you can modify downloaded map.
iFunbox that you can upload offline maps to your iPhone very easily.
install iphoneofflinemap app in cydia

Step2. backup iPhone current cache map.

Attache iPhone to computer and backup "/var/mobile/Library/Caches/Map/MapTiles/MapTiles.sqlitedb" (this is original iPhone cache map) by iFunbox.

Step3. Grab target offline map you want to download.

Download maps by GMDL.
Convert maps tiles in an SQLite DB. The only one thing you should notice is locale. "en_TW" for example.
In output folder. You can see "com.apple.Maps" and "MapTiles.sqlitedb". done.

Step4. Modify download maps.

Open backup cache map earlier (original MapTiles.sqlitedb) by Firefox SQLite manager can check version and locale.
Modify downloaded MapTiles.sqlistedb version and locale same as cache map.

Step5. Upload offline map to your iPhone.

put target offline maps MapTiles.sqlitedb to "/var/mobile/Media/Maps/ChiMai". If Media don't have "Maps" folder, create one and put maps on folder you want by iFunbox.

Step6. Setup offline map bookmark.
Without internet access. you still can view map with GPS but search and direction. Therefore, it's better to put some map books in offline map also.

you can visit Google Map (my places) and make some placemarks in maps called "Thailand trip" for example.
copy KML address and visit (http://vcenter.iis.sinica.edu.tw/mobile/kml/loadkml_map.html) to convert those placemarks to iPhone plist.
upload Bookmarks.plist to "/var/mobile/Library/Map" (it's better to backup original one)

Step7. respring (it's very important).

open iphoneofflinemap (atlas) on iphone and "remove all caches".
type your map and select copy
select "Continues". Do NOT select "Map" directly.
respring your iPhone
turn off 3G, WiFi and Data. You can use offline map now.

Result.

[Notebook] Using jQuery templates in Google AppEngine

noreply@blogger.com (Anonymous) — Sun, 4 Sep 2011 22:52:00 +0800

jQuery is a powerful javascript library that you can improve web browser experience just add some js codes. jQuery also has a lot of useful plugin you can add. lightbox, autocomplete etc.

jQuery supports Templates plugin now that you can render HTML code very simply. Here has very detail document and tutorial. Today, i will talk about how to use jQuery templates in Google AppEngine. What is the problem using jQuery templates in Google AppEngine web application.? Braces {}.

Templates syntax.
Google AppEngine Django template.

{% for item in objs %}
 {{item}},
{% endfor %}

jQuery Templates

<script id="doclistTmp" type="text/x-jquery-tmpl">
        {{each(i, o) obj}}
        <tr class="{{if i%2== 0}}odd{{else}}even{{/if}}">
            <td> ${title}</td>
            <td>${type}</td>
            <td>${folders}</td>
        </tr>
        {{/each}}
</script>

They both use brases is problem that you will meet it if you want to use jQuery templates via ajax in Google AppEngine. Then, how to setup jQuery templates in Google AppEngine.

Step1.
Register a tag in a py file called "verbatim_templatetag.py" {{if condition}} print something{{/if}}. Tell Django don't change anything within this tag.

"""
jQuery templates use constructs like:

    {{if condition}} print something{{/if}}

This, of course, completely screws up Django templates,
because Django thinks {{ and }} mean something.

Wrap {% verbatim %} and {% endverbatim %} around those
blocks of jQuery templates and this will try its best
to output the contents with no changes.
"""

from django import template

register = template.Library()

class VerbatimNode(template.Node):

    def __init__(self, text):
        self.text = text

    def render(self, context):
        return self.text

@register.tag
def verbatim(parser, token):
    text = []
    while 1:
        token = parser.tokens.pop(0)
        if token.contents == 'endverbatim':
            break
        if token.token_type == template.TOKEN_VAR:
            text.append('{{')
        elif token.token_type == template.TOKEN_BLOCK:
            text.append('{%')
        text.append(token.contents)
        if token.token_type == template.TOKEN_VAR:
            text.append('}}')
        elif token.token_type == template.TOKEN_BLOCK:
            text.append('%}')
    return VerbatimNode(''.join(text))

Step2.
Include custom tag in your py file that you use web template

 template.register_template_library('verbatim_templatetag')

Step3.
Add you jQuery template to html page.

 {% verbatim %}
        <script id="movieTemplate" type="text/x-jquery-tmpl">
            <tr>
                <td>${posted}</td>
                <td><a href="${link}">${response_count}</a></td>
                <td>{{html content}}</td>
            </tr>
        </script>
 {% endverbatim %}

Step.4
call jQuery templates.

  $("#movieList").html($("#movieTemplate").tmpl( plurks ));

Reference

Manage ebooks download list with Google Reader and RTM

noreply@blogger.com (Anonymous) — Mon, 9 May 2011 23:29:00 +0800

cause tablet computer like iPad etc. It's very convenient to read ebook (epub, pdf, etc) in your tablet computer anywhere. I like to download pdf ebook from websites and upload to my Google Docs. Then, i have my own ebook bookshelf on the cloud. I subscript few ebooks shared website. Most of those ebooks shared from web spaces that is limited download if you don't pay money. So, i create a RTM list to manage how many ebooks i haven't download. Once i downad it and i will mark it complete.

simple scenario is:
Google Reader → send to function → RTM

step:

RTM setting: create a list called "ebook"
viste: https://m.rememberthemilk.com/add
after login your RTM. you will see the a simple form.
you can get "List" dropdown list value(id) by viewing sources code. ebook
Google Reader setting:
options > Reader settings > Send To, Create a custom link

Name: RTM(ebook download)
URL: https://m.rememberthemilk.com/add?name=${title}&url=${url}&due=2 days&priority=3&repeat=0&estimate=5 minutes&tags=download&list=[your ebook list id]
Icon url: http://www.rememberthemilk.com/favicon.ico

fill form out with above value. You might notice that you can assign due, priority etc. The most important here is your ebook list id (you can get it at step 2). After finishing and save.

All settings done.
Now, you can subscript ebook download site (http://www.wowebook.com/ for example) RSS. Once you get a new RSS and want to add to your RTM ebook download list. Just click "send to > RTM(ebook download)". You will redirect to http://m.rememberthemilk.com. Click "Add Task". done.

i post it to RTM forum

https://www.rememberthemilk.com/forums/tips/12673/

Google Reader's Toggle Icon

noreply@blogger.com (Anonymous) — Wed, 7 Jul 2010 15:13:00 +0800

If you have used Google Reader. There is a toggle icon you can click and expand all items view size. This toggle icon is a small blue arrow. Is it a image? No. It's just a CSS tips and tricks. How does CSS do it?

Toggle icon DOM element

...
＜td id="chrome-lhn-toggle"＞
    ＜div id="chrome-lhn-toggle-icon"＞＜/div＞
＜/td＞
...

Toggle icon CSS

{
    width: 0;
    height: 0;
    border-color: #ebeff9 #68e #ebeff9 #ebeff9;
    border-style: solid;
    border-width: 5px 5px 5px 0;
}

You just need to assign the "border" CSS to toggle icon DOM element like ahove.
You may have to assign others CSS if you want this toggle icon in that correct position you want.

border Css order style

#right{
border-style:solid;
border-color: red green blue yellow;
border-style: solid;
border-width: 50px 50px 50px 50px;
width:0;
height:0;
display:inline-block;
}
#left{
border-style:solid;
border-color: #ebeff9 #68e #ebeff9 #ebeff9;
border-style: solid;
border-width: 50px 50px 50px 50px;
width:0;
height:0;
display:inline-block;
}

Whole DOM and CSS code

//DOM
...
＜td id="chrome-lhn-toggle"＞
    ＜div id="chrome-lhn-toggle-icon"＞＜/div＞
＜/td＞
...
//CSS
#chrome-lhn-toggle:hover {
background: #C2CFF1;
}
#chrome-lhn-toggle, #chrome-viewer {
padding: 0px;
vertical-align: top;
}
#chrome-lhn-toggle {
background: #EBEFF9;
cursor: pointer;
width: 8px;
}
#chrome-lhn-toggle:hover #chrome-lhn-toggle-icon {
border-color: #C2CFF1 white #C2CFF1 #C2CFF1;
}
#chrome-lhn-toggle-icon {
border-color: #EBEFF9 #68E #EBEFF9 #EBEFF9;
border-style: solid;
border-width: 5px 5px 5px 0px;
height: 0px;
margin-left: 1px;
margin-top: -5px;
position: absolute;
top: 50%;
width: 0px;
}
#chrome-lhn-toggle-icon {
font-size: 1px;
line-height: 1px;
}

Conclusion

This is a simple way to make a arrow icon by pure CSS instead of assigning image.

Convert rgb color to hex color

noreply@blogger.com (Anonymous) — Fri, 2 Jul 2010 11:00:00 +0800

If you have written HTML file, you must know that how to assign color to DOM element. You just need to assign CSS style to

DOM element like


＜span style="color:#ff0000"＞This is text＜/span＞

It is very simple. But, we may want to change the color

by Javascript like color picker. What's the problem? You may get the "rgb(255, 0, 0)" color value by Javascript.

Then, you have to convert rgb to hex color or convert hex to rgb color. The following is simple code.

rgb to hex


function rgb2hex(rgb){
   var hexDigits = new Array("0", "1", "2", "3", "4", "5", "6", "7", "8", "9", "a", "b", "c", "d", "e", "f");
   var hex = function(x){
       return isNaN(x) ? "00" : hexDigits[(x - x % 16) / 16] + hexDigits[x % 16];
   };
   var tmp = rgb.match(/^rgb\((\d+),\s*(\d+),\s*(\d+)\)$/);
   var color = hex(tmp[1]) + hex(tmp[2]) + hex(tmp[3]);
   return color;
}

hex to rgb


function hex2rgb(v){
   if (/^[0-9A-F]{3}$|^[0-9A-F]{6}$/.test(v.toUpperCase())) {
       if (v.length == 3) {
           v = v.match(/[0-9A-F]/g);
           v = v[0] + v[0] + v[1] + v[1] + v[2] + v[2];
           this.value = v;
       }
      
       var r = parseInt(v.substr(0, 2), 16);
       var g = parseInt(v.substr(2, 2), 16);
       var b = parseInt(v.substr(4, 2), 16);
       return [r, g, b].join(',');
   }
   return v;
}

Result


var input = $(this).css('color'); // rgb(255,0,0)

var hex = rgb2hex(input); //ff0000
var rgb = hex2rgb(hex);   //255,0,0

[Chrome Extensions] QuietRead V2.1.0 Released

noreply@blogger.com (Anonymous) — Sat, 1 May 2010 16:49:00 +0800

Chrome Extension - Quietread V2.1.0 Released

My last updated (v2.0.1) was one month ago. The biggest changed on Chrome extension Quietread V2.x was using Google OAuth for authorization. The Users don't type their Google Account and Password. It's more convenient and safe to access user's data on Google Spreadsheet.

Then, what's updated at version V2.1.0. The following list is simple summary.

Add Tags and Notes feature for each Item. Now, you could add tags or notes to help you find out specific item you haven't finished.
Search and tags support auto complete. You could use multiple keywords (ex: tags:jquery 2010). The results will highlight also.
Quietread supports auto fetch your data from Google Docs spreadsheet in background in specific period. Default setting is 300 secs. You also could update immediately by clicking refresh button.
You could share link what you read to your friend by email button.
Add page and remove page by keyboard short keys.

The summary above are new features. Then, what features are pull off at this version.

Sorting. I take searching instead of sorting.
Show list by keyboard short keys. This feature does not work very well because of some specific pages like Chrome Home page.
Automatic add page by clicking Quietread icon. It seems a little bit annoy.

Layout

Edit Notes

Edit Tags

Search box

Search for specific tag

Search for specific tag and keyword

Options

Notices

There may have problem when you update Quietread to version 2.1.0. You have to make sure "QuietreadQueue" that on your Google Docs has 7 columns at least.

Download Quietread V2.1.0

Blogger Template Testing

noreply@blogger.com (Anonymous) — Wed, 24 Mar 2010 00:06:00 +0800

section subject

Google Search

Rearrange related posts code.

blockquote area


this.etag = json.gd$etag;
var row = {};
row.faviconurl = Url.decode(json.entry.gsx$faviconurl.$t);
row.url        = Url.decode(json.entry.gsx$url.$t);
row.title      = Url.decode(json.entry.gsx$title.$t);
row.createdate = json.entry.gsx$createdate.$t;
row.click      = json.entry.gsx$click.$t;
row.edit       = json.entry.link[1].href;
row.etag       = json.entry.gd$etag.$t;
result.push(row);

[Chrome Extensions] QuietRead

noreply@blogger.com (Anonymous) — Thu, 24 Dec 2009 19:55:00 +0800

Two weeks ago. I went to join Taipei GTUG (Google Technology User Group) Google Chrome Hackathon. At the Chrome Hackathon, the people who attended want to developed few useful, interesting, funny Google Chrome extensions.

In my team (although 2 members) want to develop a useful chrome extensions. Nowadays, it's very convenient to search anything on the internet. Shopping, documents, and news for instance.

You might browse a lot links in one day. How come you could remember all of that links. You might say that you can use bookmark to keep the URL you haven't read it but you interested in it. It's a good method. I use the bookmarks in different browsers too. But, i will keep the link to my bookmarks i thought it's helpful to me. So, i need to any way to keep the URL for a while. That's why QuieRead from.

What's QuietRread?

QuietRead is very simple concept. You might have used the similar service on the internet. What's different between they and QuietRead. I assume you already have a Google Account (If you haven't. Have one). Because QuietRead use Google Documnet List Data API & Google SpreadSheet Data API to save the URL in your Google Docs SpreadSheet.

What does QuietRead do?

Quick answer: Add and remove URL on Google Docs specific SpreadSheet.

How does QuietRead work?

Because QuietRead use Google Documnet List Data API & Google SpreadSheet Data API, you have to login your Google account first in QuietRead extensions Option page. Following are simple step.

Login in your Google Account.
If login is succeed. Then, QuietRead will try to get Google Document List Data API & Google SpreadSheet Data API authorization.
Check "QuietreadQueue" spreadsheet file on your Google Docs.
If "QuietreadQueue" is exist, loading data. If "QuietreadQueue" isn't exist. create new one.
now, you can add and remove URL in Chrome QuietRead Extensions.

Google Chrome QuietRead Extensions

[Web Tool] SpriteMe

noreply@blogger.com (Anonymous) — Thu, 12 Nov 2009 22:51:00 +0800

Recently, I read two books about performance article "High performance web sites: essential knowledge for frontend engineers"[1] and "Even Faster Web Sites: Essential Knowledge for Frontend Engineers"[2] by Steve Souders.

hat two books are very good books let you can understand how to increase web performance. I found few web tools in my searching. SpriteMe is one my want to share you guys. What is SpriteMe?

Background images make pages look good, but also make them slower. Each background image is an extra HTTP request. There's a fix: combine background images into a CSS sprite. But creating sprites is hard, requiring arcane knowledge and lots of trial and error. SpriteMe removes the hassles with the click of a button.

Reference

Rearrange Blogger Template Related Post & Add New Features

noreply@blogger.com (Anonymous) — Sat, 7 Nov 2009 22:42:00 +0800

Today i spent few time to modify Blogger template like:

Rearrange related posts code.
prettyprint code syntax highlight.
Adding FancyBox lightBox and modify new.

I will keep on arranging my Blogger template and help it can more friendly. There had three parts on the above list. Second list is google code pretttify. I change my code syntax from syntaxhighligher to google-code-prettify. Google-code-prettify is using easier than syntaxhighlighter. You can just include two file(prettify.js & prettify.css) add function to execute prettify. Done!! Third list is FancyBox lightBox jQuery plugin. If you are familiar with jQuery. I think it's easy to add that plugin to your web page. About first list is what i want to share how do i arrange the Related Posts.

Until now, Blogger haven't support related posts in your blogger template. If you want to add that feature, you have to modify some template code and add few javascript function to do that.

Scenario

How does related posts work? The scenario is easy to understand. When you want to write new post, you will add Labels for this post on the bottom of Blogger editor. You add tags for the post you wrote. When web user visit your blog, related posts feature will list other relation posts following post content by specific tag. (you have three types can show related posts on your blog depending Blogger template pageType: 'item', 'archive', or 'index').[1]

<b:if cond='data:blog.pageType == &quot;item&quot;'>
    <script expr:src='&quot;/feeds/posts/default/-/&quot; + data:label.name + &quot;?alt=json-in-script&amp;callback=RelatedLabels&amp;max-results=10&quot;'
    type='text/javascript'>
    </script>
</b:if>

I want to show related posts in user view specific page. So, i assign pageType is 'item'. As you can see. you can receive specific tag post content by callback function using Google Data Protocol[2]. Following is complete code to get all tage you add.

<b:loop values='data:post.labels' var='label'>
<!-- Fixed for Related Posts -->
<b:if cond='data:blog.pageType == &quot;item&quot;'>
  <script expr:src='&quot;/feeds/posts/default/-/&quot; + data:label.name + &quot;?alt=json-in-script&amp;callback=RelatedLabels&amp;max-results=10&quot;'
  type='text/javascript'>
  </script>
</b:if>
</b:loop>

Finial, you need to render those data to web page. You can have simple function to do that like this.

After solving how receive data from Blogger template Layout data and render to web page. The key point of Related posts is parse data you need.

We receive Blogger template Layout data by callback function and return JSON data. The render data include post url, post title and post date (depending what you need). It's better to keep value in an object. Object is easier to understand and manipulate.

function RelatedLabels(json) {
var entries = json.feed.entry;
for (var key in entries) {
if (entries[key]) {
var item = {};
item.title = entries[key].title.$t;
item.url = entries[key].link[4].href;
item.date = entries[key].published.$t.substr(0, 10);
relatedPosts.push(item);
}
}
}

You might add multiple tags in different posts, and therefore might receive the same post in different tag by loop. There are many solutions to solve duplicate post in an object.

I push related post in one object. We can extend Array.prototype.push() function to detect should we add this post to our object. If you are familiar with Javascript syntax. It's simple to manipulate DOM using Javascript like document.write(). If you concern web page performance, you should decrease manipulate DOM directly[3]. Following is complete code.

var relatedPosts = [];
relatedPosts.push = function (data) {
 var _push = true;
 var length = this.length;
 for (var i = 0; i < length; i++) {
     if (this[i].url == data.url) _push = false;
 }
 if (_push) return Array.prototype.push.call(this, data);
 else return this;
}

function RelatedLabels(json) {
 var entries = json.feed.entry;
 for (var key in entries) {
     if (entries[key]) {
         var item = {};
         item.title = entries[key].title.$t;
         item.url = entries[key].link[4].href;
         item.date = entries[key].published.$t.substr(0, 10);
         relatedPosts.push(item);
     }
 }
}

function ShowRelatedPosts(PostUrl) {
 var count = 0;
 var eleLi, link, date, fragment = document.createDocumentFragment();
 for (var key in relatedPosts) {
     if (typeof(relatedPosts[key].url) != 'undefined' && relatedPosts[key].url != PostUrl && count < 5) {
         eleLi = document.createElement('li');
         link = document.createElement('a');
         date = document.createTextNode(' (' + relatedPosts[key].date + ')');
         link.setAttribute('href', relatedPosts[key].url);
         link.innerHTML = relatedPosts[key].title;
         eleLi.appendChild(link);
         eleLi.appendChild(date);
         fragment.appendChild(eleLi);

         count++;
     }
 }
 var eleOl = document.createElement('ol');
 eleOl.appendChild(fragment);
 document.getElementById('relatedPosts').appendChild(eleOl);
}

reference

Inner Google Docs Quickly View Alternate URL by Chrome Extensions

noreply@blogger.com (Anonymous) — Wed, 4 Nov 2009 23:43:00 +0800

If you paid your attention at Google Docs service, you will found Google Docs team announce few new feature like View online files using Google Doc Viewer, Shared folders and more in Google Docs, Taking charge of your document sharing etc. One of my favorite new feature is Google Docs Viewer. Google Docs Viewer let you quickly view documents online without leaving your browser. You don't need to download it if you just want quick it.

Google Docs Viewer is a very convenience tool let you increase browser experience. But, it's still have few restrained. It's just support three file format: PDF documents, PowerPoint presentations, and TIFF files now. Beside file type part, you need put documents on the internet.

I like search documents on the internet when i don't know somethings. I type keyword in search engine and combine search file type. Google search engine started support QuickView new feature few weeks ago. It does work very well. But, there isn't every pdf or ppt item has QuickView button on the list. It's a easy way to solve this problem. Copy target doucment URL and paste it in Google Docs Quickly View. Then, Done!! It sounds great, right? Not at all, how could we do this job more convenience. I choose Chorme Extensions.

What's Chrome Extensions?

Extensions are small software programs that can modify and enhance the functionality of Google Chrome.
You write them using web technologies like HTML, JavaScript, and CSS. So if you know how to write web pages, you already know most of what you need to know to write extensions." - Defintion in Google Chrome Extension: Development Documentation

The Basic of Chrome Extentsion

"An extension is a zipped bundle of files — HTML, CSS, JavaScript, images, and anything else you need — that adds functionality to the Google Chrome browser. Extensions are essentially web pages, and they can use all the APIs that the browser provides to web pages, from XMLHttpRequest to JSON to HTML5 local storage.
Many extensions add UI to Google Chrome, in the form of toolstrips (toolbar additions) or page actions (clickable badges in the address bar). Extensions can also interact programmatically with browser features such as bookmarks and tabs. To interact with web pages or servers, extensions can use content scripts or cross-origin XMLHttpRequests." - OverView

As you can see above paragraph. We can almost do anythng you want from add Google Chrome UI to use content script to manipulate DOM tree. How do we slove problem we told in Chrome extension? The scenario is very simple. Using content script manipulate DOM tree and innert Google Docs Quick View URL in each target document.

Content Script

Content scripts are JavaScript files that run in the context of web pages. By using the standard Document Object Model (DOM)," - Content Script

At my last post. There has a new search engine let you can search PDF file type ebooks. So, i holp content script can execute in two part. "Google Search Engine" and "PDFBooks search engine". First, we need to get target documnet url in DOM tree. There are few tools can help me to inspect current location in DOM Tree. I chose Google Chrome Developr tools (Ctrl+Shift+J).

PDFBooks

Google Search Engine

if (doc.URL.toString().match(/^http:\/\/www.google.com/)) {
    links = doc.querySelectorAll('h3 > a.l');
}
if (doc.URL.toString().match(/^http://pdfbook-s.com/)) {
    links = doc.querySelectorAll('div#menu + a');
}

We inspect target documents url by querySelectorAll.

for (var i = 0, len = links.length; i < len; i++) {
    var link = links[i];
    if (link.toString().match(/pdf$/) || link.toString().match(/ppt$/)) {
        var docViewer = document.createElement('a');
        docViewer.setAttribute('href', 'http://docs.google.com/viewer?url=' + link);
        docViewer.setAttribute('target', 'blank');

        var favicon = document.createElement('img');
        favicon.src = 'http://docs.google.com/favicon.ico';

        docViewer.appendChild(favicon);
        link.parentNode.insertBefore(docViewer, link);
    }
}

Then, we can parse each hyperlink to insert alternate Google Docs Quick View URL if hyperlink has "PDF" or "PPT" keyword in a simple loop.

Registered your content script

Content script needs to register in a extension's manifest.json file. like so:

{
  "name": "Insert Google Doc Quickly View URL", 
  "version": "0.1",
  "description": "Insert Google Docs Quickly View for PDF & PPT file format link",
  "content_scripts": [
    {
      "matches": [
        "http://www.google.com/search*",
        "http://www.google.com.tw/search*",
        "http://pdfbook-s.com/*"
      ],
      "js": ["insert_docs_quickly_view_url.js"]
    }
  ]
}

Everything you done. What's different after using this extension.

Reference

Download: insert_docs_quickly_view_url.js

Download: insert_docs_quickly_view_url.crx

PDFBooks

noreply@blogger.com (Anonymous) — Wed, 4 Nov 2009 23:26:00 +0800

I think you guys have searched any kink file type in Google search engine or others search engine. I often search PDF file on the Internet like PDF, PPT etc. It's a good choice to research something you don't know on the Internet. You might get few information on the way!!

There has another way you can find many PDF file type books on the specific search engine. It's PDFBooks. Type the keyword you want and click the search button. You will get PDF file type list. You can download that file to your local disk or view it online (It's using Scribd flash viewer).

Link

PDFBooks

JSONC Of Picasa Web Ablum

noreply@blogger.com (Anonymous) — Mon, 2 Nov 2009 23:14:00 +0800

What is JSON and JSONC?

JSON, short for JavaScript Object Notation, is a lightweight computer data interchange format. It is a text-based, human-readable format for representing simple data structures and associative arrays (called objects). - wiki

JSONC: Clean, Compact, and Customizable. Minimize the number of JavaScript objects

You guys might have used a lot of JSON data in your web page, web application etc. If you are familiar with Blogger template, you might ever received your Picasa web album JSON format data by calling Javascript function in your blogger by using this URL

http://picasaweb.google.com/data/feed/api/user/userID?alt=json&callback=?

Whatever you receive JSON data by Javascript callback function or jQuery Ajax callback funtion. You need to parse callback json data and get the data what you need. There are too many objects in that data. It's a little complicate to get current fields you need.

Google Data Protocol support JSONC data format return in Google Web Album. That let you guys can receive data from Google Web Album more easy than before. What do we receive the JSONC format data. Changing feed URL to

http://picasaweb.google.com/data/feed/api/user/userID?v=2&alt=jsonc&callback=?

Conclusion

It's a easy way to receive your Google Web Album data by modify feed URL arguments. The simple object data means you can decrease callback response time and increase the web page performance. If you are interested in performance articles, you should read following link

Reference

Our Earth Need Your Help!!

noreply@blogger.com (Anonymous) — Thu, 15 Oct 2009 10:02:00 +0800

Aug 8th, 2009. It's a really a longest and very worse Fathers Day for most Taiwanese. In south of Taiwan attacked by super typhoon Moraka and caused the most serious damaged in Taiwan history. It rains over 3000 mm one year annual rainfall only in three days. Many people were homeless in the aftermath of typhoon Moraka. Unfortunately, my parent and others family members were one of the homeless people. We lose anything expect life.

Until now, i can't accept the truth sometimes. but, i have to learn accept that and thinking what should we do after damaging? Rebuild our home and back to normal life as soon as possible. What do we learn aftermath the typhoon Moraka? What are reasons cause such as this damage? Something are changed.

I think you guys have heard some issue about Global warming. Our atmosphere has too much carbon dioxide and cause the Earth temperature growth up too fast. You may think some big issues like that should be government's responsibility. Because most people can't lead relation political policies. Climate change is a human issue. What could we do be a person living in the Earth?

There are many resources you can find on the internet. Visit Climate change in the Google Earth, Explore the Climate Orb to concern what company learn for the stories behind the human face of climate change, Educate our kids about science of global warming etc. You can follow the tail of above issues and think about what "You" really can do to help the Earth. For me, i try to reduce my "carbon footprint" in my life. What's carbon footprint?

"A carbon footprint is "the total set of greenhouse gas (GHG) emissions caused directly and indirectly by an individual, organization, event or product". For simplicity of reporting, it is often expressed in terms of the amount of carbon dioxide, or its equivalent of other GHGs, emitted." - definition by wikipedia

There are many online carbon calculator you can figure out what yours is. You can understand that your impact is on climate change. Those online carbon calculators may not to help you figure out your carbon emission. It can remind you to change your life style to reduce the impact on climate change. Try to take public transportation, try to buy product from local area, chose low-power electric equipments etc. You could fine you way!!

Our Earth need your help!!

Reference

Few New Google Chrome Video From GoogleJapan

noreply@blogger.com (Anonymous) — Mon, 12 Oct 2009 19:22:00 +0800

Have you seen the so~~~~~o cute Google Street View Video by Google Japan. If you haven't seen that video. Click here to see that. I very recommend you guys to have a look even you just a end user. The video can give you a skeleton concept of Google Street View.

As you can see. It's a good introduction video from Google Japan. It's show time again but the main character change to new super star "Chrome". I think that "Speed" will be one of the good browser experience of Chrome for you guys. You guys may have few browsers in the computers like me. That mean you are pay attention in browser developing. If you should be. Following has few new Chrome video by Google Japan. Have a look!!!

速い + SUPER MONKEY BALL: Google Chrome アーティストテーマ

Google Chrome アーティストテーマスライドショー

速い + NINTEA: Google Chrome アーティストテーマ

速い + ART: Google Chrome アーティストテーマ

Reference

More Videos From Google Japan

WhatTheFont

noreply@blogger.com (Anonymous) — Sun, 11 Oct 2009 14:20:00 +0800

I wrote a article ([Javascript & Css] CountDown) about Google Code Jam 2008 main page countdown. It does work using Javascript + CSS + DHTML and following is sniper image.

After i wrote this article. I try to search this font on the inter and ask my colleagues. What's this font? Until today i still haven't gotten exactly this font. But, i found iPhone app WhatTheFont in one iPhone Home screens of First & 20. First & 20 is a collection of Home screens of some of the best and brightest developers, designers and tech writers.

What does WhatTheFont[app store link] do? It's very clear to understand as app name - Identify the fonts in a photo or web graphic!! Following is the simple step i try to identify the font i didn't know.

Using WhatTheFont app on your iPhone or iPhone touch.

Sniper the photo of font and crop image. Then click upload
Check Chars and click identify!
You will get few font matches.

Using WhatTheFont web page to identify the fonts.

You can upload a file or paste a specify image url.
Check selection characters. Leave character boxes blank if no valid character is highlighted. Then, click continue.
You will get few font matches as App version.

Summary

Compare WhatTheFont App version and WhatTheFont web page font identify. I get more font matches by using App version than using web page font identify. But, as you can see. Using web page font identify is more easy than App version. Whatever you chose which one. If you get the anwser like me. I think it's a good solution at least.

竹部落

[notebook] Google Push Notification API

Google Push Notification

Google Drive Push Notification

Google APIs provides Push Notification

AngularJs, RequireJs, Grunt and Bower Part4 - How to extend your own code with ASP.NET MVC

Simple step to install yeoman generator

Scenario

Step 1: create new ASP.NET MVC controller

Step 2: create new AngularJs application

project-index.html: Product partials view

product-controller.js: Product controller

index.js: Product AngularJs single page application entry point.

Preview

Step 3: Let’s extend shared service for different single page application

Add BookController ApiController

book-service.js

Inject book-service.js BookLoader to AngularJs route resolve

js/views/Product/index.js

controller/Product-controller.js

Inject book-service.js BOOK service to AngularJs route resolve

Grunt

Github Source Code

AngularJs, RequireJs, Grunt and Bower Part3 - generator-angular-requirejs-grunt-bower with ASP.NET MVC (Updatd 2014/7/15)

Javascript file structure

Getting started

Yeoman Generator: angular-requirejs-grunt-bower

AngularJs, RequireJs, Grunt and Bower Part2 - Grunt (Update: 2014/7/15)

Grunt

Why use a task runner?

Why use Grunt?

Grunt with our ASP.NET MVC Project

Concept

RequireJs + Grunt

REQUIREJS OPTIMIZER

Gruntfile.js

build.txt

Preview

Reference

Github Source Code

AngularJs, RequireJs, Grunt and Bower Part1 - Getting Started and concept with ASP.NET MVC (update:2014/7/16)

Concept

Scenario

RequireJs

ASP.NET MVC File Structure

AngularJs, RequireJs, Grunt and Bower OverView

Angularjs Application

Intergrate with ASP.NET MVC

Preview

Reference

Github Source Code

Welcome document

Welcome to StackEdit!

Documents

Create a document

Switch to another document

Rename a document

Delete a document

Save a document

Synchronization

Import a document

Export a document

Synchronize a document

Manage document synchronization

Publication

Publish a document

Update a publication

Manage document publication

Markdown Extra

Tables

Definition Lists

Fenced code blocks

Footnotes

SmartyPants

Table of contents

Comments

MathJax

[Cydia] How to export Audio Record m4a directly.

Send m4a file via Email

Export m4a file via iFile/iTools etc tools

Step 1: create new ASP.NET MVC `controller`

`project-index.html`: Product partials view

`product-controller.js`: Product controller

`index.js`: Product AngularJs single page application entry point.

Add `BookController` ApiController

`book-service.js`

Inject `book-service.js` `BookLoader` to AngularJs route resolve

`js/views/Product/index.js`

`controller/Product-controller.js`

Inject `book-service.js` `BOOK` service to AngularJs route resolve