程式心得筆記工程屍的日子 | Mr. 一顆痣 a.k.a. bigd : 6月 2014

星期日, 6月 29, 2014

[AngularJS] angular dialog service v5.0.0 試用

透過angular dialog service這個第三方套件，
可以輕鬆使用modal來產生alert, confirm, custom 等效果。

測試版本: v 5.0.0

需求的套件: ngSanitize, bootstrap.ui, ngTranslate
https://github.com/m-e-conroy/angular-dialog-service

sample
http://codepen.io/m-e-conroy/pen/ALsdF

[AngularJS] Pagination 0.10.0 切換事件的event

由於目前使用NG UI-Bootstrap 0.10.0的版本，要注意頁面切換要使用on-select-page這個屬性，才有辦法正確的接收到事件的方法。

http://stackoverflow.com/questions/23419059/pagination-in-angular-ui-bootstrap-throwing-error-compilenonassign

The ability to use ng-model was introduced in ui-bootstrap-tpls-0.11.0.js, as explained in thechangelog:

Both pagination and pager are now integrated with ngModelController.
* page is replaced from ng-model.
* on-select-page is removed since ng-change can now be used.

星期一, 6月 23, 2014

[Javascript] bower 如何表示相依性套件版本

bower使用semver的語法來表示相依性套件該安裝哪一個版本

可參考以下的github資訊

https://github.com/isaacs/node-semver/

Range Styles

The following range styles are supported:

星期日, 6月 22, 2014

[Javascript] 前端工具好用工具清單

為了提升前端程式品質與工作效率，發展了許多好用的工具，在此記錄一下

PMD

可支援javascript原始碼檢測工具，找出重覆的原始碼

JSHIT

javascript程式碼品質檢測工具

RequireJS

javascript 模組管理工具(可配合r.js進行壓縮)

GruntJS

可以把一些任務，透過Grunt來自動化執行，例如測試、JSLint檢查、JS壓縮、less、coffee的編譯等等，可以透過一個指令，就把所有的事情做好。

SCSS/SASS

LiveReload

自動刷新頁面的工具

Gulp.js

Speed. Efficiency. Simplicity.
gulp's use of streams and code-over-configuration makes for a simpler and more intuitive build.

[AngularJS] 初學簡報大雜繪

記錄一下學習AngularJS找到的簡報檔。

AngularJS best-practices from Henry Tao

AngularJS 101 - Everything you need to know to get started from Stéphane Bégaudeau

AngularJS 開發實戰：重要的開發觀念與經驗分享 (COSCUP 2013) from Will Huang

AngularJS 開發實戰：解析 angular-seed 專案架構與內容 from Will Huang

AngularJS Data Binding from Ticore Shih

Angularjs - lazy loading techniques from Nir Kaufman

[AngularJS] 常用的全選/取消全選的介面需求- checklist-model diretive

做表格列表常用到的元件:D

http://vitalets.github.io/checklist-model/

星期六, 6月 21, 2014

[AngularJS] 整合UI-bootstrap alert diretive

將原本的UI-Bootstrap再使用一層AlterService來包裝，使用起來更方便:D

此外也可利用$rootScope.$broadcast事件的方法來統一處理全域的訊息

Directive

<alert ng-repeat="alert in alerts"
	type="alert.type"
	close="alert.close($index)">{{alert.msg}}</alert>

AlertService Factory

支援timeout自動關閉訊息

app.factory('AlertService', ['$rootScope', '$timeout', '$log',
	function($rootScope, $timeout, $log) {
		var alertService = this;

		$rootScope.alerts = [];
		return alertService = {

			add: function(type, msg, timeout) {

				$rootScope.alerts.push({
					type: type,
					msg: msg,
					close: function() {
						return alertService.closeAlert(this);
					}
				});

				if(typeof(timeout) == 'undefined'){
					timeout = 5000;
				}
				if (timeout) {
					$timeout(function() {
						alertService.closeAlert(this);
					}, timeout);
				}
			},
			closeAlert: function(alert) {
				$log.log(alert);
				return this.closeAlertIdx($rootScope.alerts.indexOf(alert));
			},
			closeAlertIdx: function(index) {
				return $rootScope.alerts.splice(index, 1);
			},
			clear: function(){
            	$rootScope.alerts = [];
          	}

		};

	}
])

Controller

angular.module('myApp.controllers').controller('LoginCtrl', ['$rootScope','$scope', '$log', 'AuthService', 'AlertService','$location',
  function($rootScope, $scope, $log, AuthService, AlertService, $location) {
    $log.log('load login page');

    $scope.login = function(credentials) {
      $log.log('press login button');
      $log.log(credentials);

      AuthService.login(
        credentials, function(data, status, headers, config) {
          $log.log('success to call login');
          $log.log(data);
          if (data.status == 200) {

            $log.log('go to default users page');
            //go to home
            $location.path('/users');

          }else if (data.status == 500){

            AlertService.add('danger','不正確的帳號或密碼');
          
          }

        }, function(data, status, headers, config) {
            $log.log('fail to call login');
            AlertService.add('danger','伺服器發生錯誤，請重新再試');
        });
    };

  }
]);

https://coderwall.com/p/r_bvhg

[AngularJS] 事件處理機制 $broadcast , $emit , $on 的運作

筆記一下Angularjs的事件處理機制的運作方法：

http://stackoverflow.com/questions/14502006/scope-emit-and-on-angularjs

First of all, parent-child scope relation does matter. You have two possibilities to emit some event:

$broadcast -- dispatches the event downwards to all child scopes,
$emit -- dispatches the event upwards through the scope hierarchy.

I don't know anything about your controllers (scopes) relation, but there are several options:

If scope of firstCtrl is parent of the secondCtrl scope, your code should work by replacing $emit by $broadcast in firstCtrl:

function firstCtrl($scope){
    $scope.$broadcast('someEvent', [1,2,3]);
}

function secondCtrl($scope){
    $scope.$on('someEvent', function(event, mass) {console.log(mass)});
}

In case there is no parent-child relation between your scopes you can inject $rootScope into the controller and broadcast the event to all child scopes (i.e. also secondCtrl).
```
function firstCtrl($rootScope){
    $rootScope.$broadcast('someEvent', [1,2,3]);
}
```

Finally, when you need to dispatch the event from child controller to scopes upwards you can use $scope.$emit. If scope of firstCtrl is parent of the secondCtrl scope:

function firstCtrl($scope){
    $scope.$on('someEvent', function(event, data) { console.log(data); });
}

function secondCtrl($scope){
    $scope.$emit('someEvent', [1,2,3]);
}

星期五, 6月 20, 2014

[AngularJS-3rd] UI-Router 控制頁面標題 Page Title

使用UI-Router在切換頁面時，可參考以下範例。

http://plnkr.co/edit/3QEvypXiMglfgwkZsGhV?p=preview

實作方法

使用$stateProvider的data設定客制化的參數pageTitle，並實作updateTitle directive。
在updateTitle使用 $rootScope.$on監聽 $stateChangeStart 事件。

星期四, 6月 19, 2014

[網站資安] Http Only 保護網站的cookie不被偷取

一般網站常用cookie來記錄使用者的token，重要的cookie請使用http only來做保護。

HttpOnly cookies can in fact be remarkably effective. Here's what we know:

HttpOnly restricts all access to document.cookie in IE7, Firefox 3, and Opera 9.5 (unsure about Safari)
HttpOnly removes cookie information from the response headers in XMLHttpObject.getAllResponseHeaders() in IE7. It should do the same thing in Firefox, but it doesn't, because there's a bug.
XMLHttpObjects may only be submitted to the domain they originated from, so there is no cross-domain posting of the cookies.

星期三, 6月 18, 2014

[AngularJS] angular-logging 類似log4j的功能

如果想讓angular有像log4java這個類似的log功能的話，
可以參考angular-logging這個套件。

https://github.com/aronvaughan/angular-logging

[Java] 使用Java callback的小技巧監控上傳的進度

http://www.hardill.me.uk/wordpress/tag/httpclient/

[Java] httpservletrequest getcontentlength 回傳-1

踩到小雷，使用 httpservletrequest getcontentlength方法時，大於2GB時，由於回傳結果為int，會變-1。
可以改用httpservletrequest getHeader('Content-length')來解決。

long contentLen = Long.parseLong(request.getHeader("Content-Length"));

http://stackoverflow.com/questions/7423285/javax-servlet-httpservletrequest-getcontentlength-returns-int-only

星期一, 6月 16, 2014

[AngularJS] $http無法送出 content-type header

踩了一個簡單的雷$http，記錄一下XD

發現$http呼叫API時，無法加入content-type的header。

   $http({
     url: apiEndpoint,
     method: 'GET',
     data: '',
     headers: {
      'Content-Type': 'applicstio/json'
     }
    }).success(function(data, status, headers, config) {

     

    }).error(function(data, status, headers, config){
     
    });

http://stackoverflow.com/questions/16194442/angular-content-type-is-not-being-sent-with-http

You need to include a body with the request. Angular removes the content-type header otherwise.

Add data: '' to the argument to $http.

星期五, 6月 13, 2014

[Alfresco] CMIS上傳無法超過4MB

怕以後升級會遇到，先筆記下來

Alfresco versions: 4.2.d (community), 4.2.0 (enterprise).

In the file repository.properties (under WEB-INF/classes/) you can change three properties:

webscripts.tempDirectoryName=WebScripts

# 4mb

webscripts.memoryThreshold=4194304

# 4gb

webscripts.setMaxContentSize=4294967296

The first property webscripts.tempDirectoryName specify the name of subdirectory inside default Temp Dir where Webscript and CMIS will create the temp file when necessary.

The second property webscripts.memoryThreshold specify the threshold value after that Webscript and CMIS use a Temp File to store the content upload instead use of memory buffer.

The third property webscripts.setMaxContentSize specify the maximum size allowed in Alfresco Webscript to manage content file.

http://forums.alfresco.com/forum/developer-discussions/alfresco-api/cannot-upload-file-larger-4mb-using-cmis-03212014-0923

[HTML] HTML5 的筆記

昨天看了intel有關enterprice API appliance的簡報，
談到了一些使用HTML5制作APP的內容，順便來複習一下HTML5。
以下是網路上擷取的資訊 :D

什麼是HTML5

目標是為了取代1999年所制定的HTML 4.01和XHTML 1.0標準。
廣義而言包含HTML、Javascript、CSS3三個技術
減少瀏覽器對於需要外掛程式(Flash, Silverlight, JavaFX)的豐富性網路應用服務(Rich Internet Application, RIA)的需求

星期四, 6月 12, 2014

[Javascript] Leftlet 開放原始碼的互動地圖函式庫

http://leafletjs.com/

是一套開放原碼碼的互動地圖函式庫，剛剛在slideshare隨意看到人家的介紹。
感覺以後有機會可以整合，先記錄一下:D

以 Leaflet 濫用^H^H呈現開放街圖資料 from Rex Tsai

http://blog.nutsfactory.net/2014/03/18/osm-leaflet/

台北公車地圖
http://chihchun.github.io/leaflet-bus/

[Node.js] node.js 不錯的簡報記錄

node.js已經出來很久了，一直沒有機會來試玩，
就當作今年的學習項目之一啦。本文記錄 node.js高手分享的簡報。

Let s Enjoy Node.js from Fred Chien

星期一, 6月 09, 2014

[iOS] ibeacon 試玩

本文記錄一些ibeacon的筆記

beacon的種類

beacon的device
讓電腦透過beacon USB變成一個beacon
iphone可透過iOS內的程式模擬成一個beacon裝置

支援的裝置

目前發現自已的iphone4 完全不能動

iphone 5 以上搭配iOS7都能工作正常

如何偵測ibeacons

必需於APP內指定裝置的UUID才能掃描此區域內的所有含此UUID裝置，
基本上跟廠商採買的beacons裝置都會有一致的UUID，只差在Major/Minor版號不同。
可以透過這UUID與這二個號碼識為一個Region識別的識別碼

http://stackoverflow.com/questions/18784285/search-for-all-ibeacons-and-not-just-with-specific-uuid

An iBeacon is a region, and has as defining property the UUID. Therefore, you can only search for the ones matching a UUID. After you find one or more with a specific UUID, you can figure out which is closest using the delegate callbacks, where the beacons are stored in an array ordered by distance.

***

iBeacons are higher-level constructs than regular BLE peripherals. From what can be determined from the Apple docs, beacons are tied to their service UUID. i.e., a family of beacons is a "region" and a you go into and out of a region based on the range and visibility of a beacon to YOU, not the other way around. Unfortunately Apple has used the term region, which most of us probably associate with MapKit, so this is adding to the general confusion

Here's the bad news: You can only scan for ProximityUUIDs that you know, there is no "wildcard" proximityUUID. Additionally, CLBeacons don't expose the much in the way of lower level CoreBluetooth guts so if you want to find all beacons that happen to be near you, you'll have to use CoreBluetooth, scan for peripherals, then look though the returned peripheries and query each one them to find beacons. Of course Apple has neither registered (with the Bluetooth SIG) or (yet) published the iBeacon characteristics so, you'll need a BT sniffer to reverse engineer what constitutes an iBeacon from any other BLE device.

Android是否相容

Android 4.3支援ibeacon

目前蠻多人用的ibeacon函式庫
http://developer.radiusnetworks.com/ibeacon/android/index.html

實作

Monitoring - this refers to a low-power region-monitoring, you get didEnterRegion: and didExitRegion: delegate messages
Ranging - this means a higher-power activity where you get the signal strength from individual iBeacons and can estimate distance to them from this

參考資料
http://joris.kluivers.nl/blog/2013/09/27/playing-with-ibeacon/
https://github.com/nicktoumpelis/HiBeacons
http://www.devfright.com/ibeacons-tutorial-ios-7-clbeaconregion-clbeacon/
http://www.appcoda.com/ios7-programming-ibeacons-tutorial/
http://developer.radiusnetworks.com/2013/11/13/ibeacon-monitoring-in-the-background-and-foreground.html
https://developer.apple.com/library/ios/documentation/userexperience/conceptual/LocationAwarenessPG/RegionMonitoring/RegionMonitoring.html#//apple_ref/doc/uid/TP40009497-CH9-SW1
http://www.cocoanetics.com/2013/11/can-you-smell-the-ibeacon/

星期日, 6月 08, 2014

[AngularJS] 支援AngularJS 相關畫圖的open source

本文筆記一下目前可以支援angualr寫作風格的圖表open source。

D3.js

https://github.com/n3-charts
Making AngularJS charts as easy as pie.

http://nvd3.org/index.html
This project is an attempt to build re-usable charts and chart components for d3.js without taking away the power that d3.js gives you. This is a very young collection of components, with the goal of keeping these components very customizeable, staying away from your standard cookie cutter solutions.

http://www.fullscale.co/dangle/

A set of AngularJS directives that provide common visualizations based on D3

[Git] 如何push已存在的Repo到另一個不同Romote repo server

簡單的步驟讓你可以把Local Repo丟到另一台遠端的Repo

Create a new repo at github.
Clone the repo from fedorahosted to your local machine.
git remote rename origin upstream (將原本的origin repo這個儲存庫更名為upstream)
git remote add origin URL_TO_GITHUB_REPO (新增新的遠端的repo為origin)
git push origin master (將變動的檔案push上去)

Now you can work with it just like any other github repo. To pull in patches from upstream, simply run git pull upstream master && git push origin master.

星期六, 6月 07, 2014

[AngularJS-3rd] UI-ROUTER 筆記

ng-router是angular一個非常強大的router框架，
可以利用state來架構頁面的切換，
可以解決multiple-view的大型應用程式架構。
並可以避免頁面上重覆使用的元件(選單導航列、側邊欄選單等等)都要寫成directive元件的不便利性:D

操控多重View的關鍵技術

Nested States & Nested Views

https://github.com/angular-ui/ui-router/wiki/Nested-States-%26-Nested-Views

Multiple Named Views

https://github.com/angular-ui/ui-router/wiki/Multiple-Named-Views

其他範例

三個常用的ui-router tips
http://scotch.io/tutorials/javascript/3-simple-tips-for-using-ui-router

深度解析ng-router的功能
http://www.ng-newsletter.com/posts/angular-ui-router.html

簡單的ui-router nested view (view裡面還有一個view)範例https://egghead.io/lessons/angularjs-introduction-ui-router

複雜的multi-view的範例 (使用原生的router機制)
http://www.bennadel.com/blog/2441-nested-views-routing-and-deep-linking-with-angularjs.htm

混合Nested States & Nested Views 與 Multiple Named Views範例 (了解這個就OK了)
http://scotch.io/tutorials/javascript/angular-routing-using-ui-router

http://plnkr.co/edit/IzimSVsstarlFviAm7S7?p=preview

MEAN fullstack demo
https://github.com/DaftMonk/fullstack-demo

星期四, 6月 05, 2014

[AngularJS] Angular專案的一些命名規則

定義好的code style對維護專案是有很大的幫助的:D

http://google-styleguide.googlecode.com/svn/trunk/angularjs-google-style.html
https://docs.google.com/document/d/1XXMvReO8-Awi1EZXAXS4PzDzdNvV6pGcuaF4Q9821Es/pub
https://github.com/mgechev/angularjs-style-guide

星期三, 6月 04, 2014

[AngularJS] 如何在Angular實作使用者登入

如何使用AngularJS跟使用者驗證與授權的REST API整合，
可以參考以下整理的資料。

以Token-based來整合

https://auth0.com/blog/2014/01/07/angularjs-authentication-with-cookies-vs-token/

以角色區分存取權限的範例(超完整XD)

http://frederiknakstad.com/2013/01/21/authentication-in-single-page-applications-with-angular-js/

Demo size
http://angular-client-side-auth.herokuapp.com/admin/

http://www.frederiknakstad.com/2014/02/09/ui-router-in-angular-client-side-auth/

以SessionID驗證方式的範例(附簡報)

https://medium.com/opinionated-angularjs/techniques-for-authentication-in-angularjs-applications-7bbf0346acec

https://docs.google.com/presentation/d/1dceqxHVLP251cOQvBh3gOrAO_G2c6W9lQ6J2JCaO1d0/edit#slide=id.g124aecc29_00

單純控制Authentication無authorization

https://coderwall.com/p/f6brkg
http://www.kdelemme.com/2014/03/09/authentication-with-angularjs-and-a-node-js-rest-api/

http://nadeemkhedr.wordpress.com/2013/11/25/how-to-do-authorization-and-role-based-permissions-in-angularjs/

[Javascript] bower javascript套件管理工具初探

現在Github上面的web專案幾乎都會用bower來管理package的相依性，
這麼好的工具一直都沒來用一下也該打屁股了XD

https://github.com/bower/bower
http://bower.io/

bower是twitter團隊開發的web套件的管理工具，
有了bower你就不用在去擔心當網站使用的第三方package要升級時，
還要去相關網站下載XD

查詢bower現在的套件

http://bower.io/search/

安裝NPM

由於bower採用npm安裝，請先安裝npm

sudo apt-get install npm

安裝bower

透過node.js的npm工具就可以直接安裝了

npm install bower -g

[Node.js] Mac 重新安裝npm

今天發現要使用npm install整個噴出異常!!
好像是node的版本太久沒更新了，npm指令整個爛掉。
所以就一直重裝很多次才正常..

系統需求

安裝npm可以透過Mac的套件管理工具homebrew

$ruby -e "$(curl -fsSL https://raw.github.com/mxcl/homebrew/go/install)"

安裝完後可以使用doctor來測試brew是否可正常執行

$ brew doctor

Your system is ready to brew.

前情提要 npm

npm is Node's package manager. It is now installed automatically with Node.js so there is no need to do a separate installation.

意思就是npm是一個node.js的套件管理的工具，裝完node.js就會自動安裝好npm了，

不過在Mac下面都是用homebrew這個套件管理工具來安裝node.js

星期一, 6月 02, 2014

[CSS] RWD menu的一些concepts

http://css-tricks.com/responsive-menu-concepts/