[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/

[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

Google chart

http://bouil.github.io/angular-google-chart/#/generic/LineChart

Kendo UI

http://kendo-labs.github.io/angular-kendo/#/

Highcharts

https://github.com/pablojim/highcharts-ng

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

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

1. Create a new repo at github. 
2. Clone the repo from fedorahosted to your local machine. 
3. git remote rename origin upstream (將原本的origin repo這個儲存庫更名為upstream)
4. git remote add origin URL_TO_GITHUB_REPO (新增新的遠端的repo為origin)
5. 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.

[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

[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

[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

[CSS] RWD menu的一些concepts

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

[iOS] 使用Navigation Controller 切換ViewController

今天練習透過用Storyboard viewcontroller將畫面跳轉至xib viewcontroller。

主畫面storyboard的MultiViewViewController.h

//呼叫xib視窗
-(IBAction)twoXibClicked:(id)sender{

    //產生一個xib的ctrl instance
    
    TwoViewController *twoViewCtrl = [[TwoViewController alloc]
                                                  initWithNibName:@"TwoViewController"
                                                  bundle:nil];

    //透過navigationcontroller推到xib的controller
    [self.navigationController pushViewController:twoViewCtrl animated:YES];
    
    
//    [twoViewCtrl release];
}

使用xib的TwoViewController.m

- (IBAction)xibBackToMainClicked:(id)sender {
    
    //使用navigation退回主畫面
    [self.navigationController popToRootViewControllerAnimated:YES];
}

找到這篇討論Navigation多次跳轉的問題： navigationController pushViewController 多次跳转后怎么返回


返回根页面vc用:

[self.navigationController popToRootViewController］

返回指定的某个vc用下面（通过index定位）

[self.navigationController popToViewController:[self.navigationController.viewControllers objectAtIndex:2] animated:YES];

或（通过class定位):

for (UIViewController *controller in self.navigationController.viewControllers) {

    if ([controller isKindOfClass:[你要跳转到的Controller class]]) {

        [self.navigationController popToViewController:controller animated:YES];

    }

}

[iOS] 導覽列與Storyboard

經過第一個範例([iOS] 快快樂樂寫iOS hello world (storyboards))練習後，

接著要開始多個頁面的切換練習，這次要練習透過storyboard切換不同的ViewContoller。

版本

XCode 5 

開始實作

Step1: 新增第二個ViewController

在第一個ViewController放入一個按鈕(取Load from storyboard)，

然後在Object Library拖進來第二個ViewController

[iOS] 快快樂樂寫iOS hello world (storyboards)

萬事起頭難XD克服第一個helloworld iOS程式。
這個範例是參考 http://ios-blog.co.uk/tutorials/ios-7-hello-world-tutorial/
不過有改了一些操作方法:D
另一篇則有簡單的Xcode IDE的介紹:http://codewithchris.com/hello-world-iphone-app/

版本

XCode 5 

題目

透過二個按鈕來操作count次數，並將count的結果顯示在label上

[jQuery Plugins] 替Fancybox加上客制化按鈕

最近想要替fancybox的圖片加上額外控制，找到了以下這篇範例：

這是直接修改原始碼的範例
http://nsdiv.blogspot.tw/2010/05/adding-custom-buttons-to-jquerys.html

由於是後台介面的需求，感覺加個contextmenu還比較快速，
畢竟contextmenu的外掛實在太多了，
以下是用bootstrap打造的contextmenu範例，
先把它收錄到Gist: https://gist.github.com/iambigd/b892a10343be7e25033d

[jQuery Plugins] 十一個屌b的jquery網站導覽外掛

這篇文章介紹了十一種很屌的jQuery屌b的網站導覽外掛，

對一個新網站非常適合導入這種教學:D 

11 Awesome “jQuery Site Tour Plugins” For Guiding Users With Style

[Java] 快快樂樂學會log4j

最近弄log4j的同事離職，趁記憶還在的時候，
自已親身再run一遍，本文大多取自Google來的各文章的筆記。

log4j使用版本：1.2.x

[Blogger HACK] 使用Google drive來儲存(HOST) CSS/Javascript 資源

我們常常會把一些第三方的資源(ex: jquery/bootstrap)整合到Blogger中，
但因為部份的提供資源的作者，並沒有提供CDN的網址來取存這個資源，
如果將這些程式碼都加到樣版上，肯定不好管理與維護。
如果有你這些困擾，你現在可以將這些資源(檔案)上傳至Google Drive上。

[Javascript] 常用到的日期字串轉日期物件方法

常常遇到日期字串要轉來轉去，以下是轉換的方法。
提醒自已別再忘記了XD

/*Date control*/

function convStrToDate(dateStr){
 var parseDateObj = parseDate(dateStr); //.replace(/-/g,"/");
 // $.console("parse:" + parseDateObj);
 var convDate = new Date(Date.parse(parseDateObj));
 return convDate;
}

function convDateToStr(dateObj) {
 var year = dateObj.getFullYear();
 var month = dateObj.getMonth() + 1;
 var date = dateObj.getDate();
 var hour = dateObj.getHours();
 var minute = dateObj.getMinutes();
 var second = dateObj.getSeconds();

 return year + "-" + month + "-" + date + " " + hour + ":" + minute + ":" + second;
}

function parseDate(dateStr) {
 var a = $.map(dateStr.split(/[^0-9]/), function(s) {
  return parseInt(s, 10)
 });
 return new Date(a[0], a[1] - 1 || 0, a[2] || 1, a[3] || 0, a[4] || 0, a[5] || 0, a[6] || 0);
}

[jQuery] i18next 多國語言外掛

一個可以整合jquery的多國語系外掛 i18next，有空再來研究看看。
應該比現在用的架構好多了。

[CI] 使用CI框架打造REST Server

現在已經是REST API的時代XD，幾乎每個語言都有支援快速打造REST框架的方法。
剛好最近在用CI，果然Github就有資源啦

https://github.com/philsturgeon/codeigniter-restserver

作者還有詳細的說明，請參照他的部落格

Working with RESTful Services in CodeIgniter

看不慣英文也有對岸的工程屍翻譯XD

使用CodeIgniter 创建 RESTful 服务 REST API【原创译文】

[jQuery Plugin] 視差滾動套件

https://github.com/stephband/jparallax
https://github.com/IanLunn/jQuery-Parallax
http://ianlunn.co.uk/articles/recreate-nikebetterworld-parallax/
http://www.minwt.com/webdesign-dev/js/9082.html

[HTML X CSS X Javascript] 透過影片的教學方式教你學HTML5 CSS3 Javascript..

從fb轉貼來的好站，供大家參考。

http://thecodeplayer.com/

Learn HTML5, CSS3, Javascript and more... Video style walkthroughs showing cool stuff being created from scratch

boto: A Python interface to Amazon Web Services

http://docs.pythonboto.org/en/latest/#

An integrated interface to current and future infrastructural services offered by Amazon Web Services.

[jQuery] 常見的javascript樣版外掛

這篇記錄一下目前搜尋到的一些常用的javascript樣版引擎。 至於要選擇哪一種工具好像是見人見智，目前只有Linkedin所使用的dust.js有一些評估數據可以參考。

另外也有一個網址Template-Engine-Chooser列出了幾個選擇樣版的常見問題，透過這些問題他會給你一些你可參考的樣版語言有哪些xd

樣版的參考

jquery template

The original official jQuery Templates plugin. This project was maintained by the jQuery team as an official jQuery plugin. It is no longer in active development, and will be superseded by JsRender.

JS Render

A lightweight but powerful templating engine, highly extensible, without DOM or jQuery dependency.

handlebars.js

Handlebars provides the power necessary to let you build semantic templates effectively with no frustration. Mustache templates are compatible with Handlebars, so you can take a Mustache template, import it into Handlebars, and start taking advantage of the extra Handlebars features.

hogan.js

A compiler for the Mustache templating language

Mustache.js

Minimal templating with {{mustaches}} in JavaScript

Pure.js

Simple and ultra-fast templating tool to generate HTML from JSON data Keep your HTML clean of any logic Using JSON and Javascript only Works standalone or with dojo, DomAssistant, Ext JS, jQuery, Mootools, Prototype, Sizzle and Sly

Dust.js

linkedin使用的樣版，還有說明為何要使用此樣版。

1. Leaving JSPs in the dust: moving LinkedIn to dust.js client-side templates
2. The client-side templating throwdown: mustache, handlebars, dust.js, and more

Google Closure Templates

Closure Templates are a client- and server-side templating system that helps you dynamically build reusable HTML and UI elements. They have a simple syntax that is natural for programmers, and you can customize them to fit your application's needs. In contrast to traditional templating systems, in which you must create one monolithic template per page, you can think of Closure Templates as small components that you compose to form your user interface. You can also use the built-in message support to easily localize your applications. Closure Templates are implemented for both JavaScript and Java, so that you can use the same templates on both the server and client side. They use a data model and expression syntax that work for either language. For the client side, Closure Templates are precompiled into efficient JavaScript.

[CSS] 保哥火力翻譯的CSS教學資源

最近很多人轉的保哥翻的CSS教學資源，請服用

https://doggy8088.github.io/csslayoutsite/index.html

[Eclipse] 讓Eclipse支援Subline Text Minimap功能 part (2) - Overview plugin

繼上一篇Github找到的mini map在自已的環境執行後有bug XD，
所以再找了另外一套 Overview Plugin ，功能上更強一點，安裝方法更簡單 :D

安裝方法:

Help-> Eclipse marketplace

[Eclipse] 保護眼精好幫手 Eclipse color theme

想要快速設定你的Eclipse開發source code，降低眼精的疲勞嗎?
你不需要一個一個設定，只需要安裝Eclipse color theme   XD

安裝方法:

步驟一：透過Eclipse marketplace就可以快速安裝了

[Eclipse] 讓Eclipse支援Subline Text Minimap功能 part (1) - Mini map plugin

由於下班都用Sublime Text開發，
本來就提供mini map的元件，
要找到要移動的程式碼位置非常省時(配合超大的註解區塊)
上班的公司因為採用Java解決方案，所以採用Eclipse IDE開發，
為了省時還是來裝一下Mini map，雖然拖了很久XD

Github minimap view plugin:

https://github.com/apauzies/eclipse-minimap-view

安裝方法：

下載後把dropins資料複製到你的Eclipse/dropins就好了 :D，接著重啟你的Eclipse

[Blogger HACK] 如何於首頁自動擷取文章斷落與縮圖語法

找到一篇如何改寫blogger文章列表的方法:D，
如果要自已刻自已的列表可以參考!!
LOOPS, LOOP POSITIONS, AND ISFIRST VARIABLES IN BLOGGER

不過還是沒有找到可以在單一篇文章內容的語法XD，殘念

[AngularJS] 常見問題 $watch 、$apply 筆記

這篇記錄一下查了一些有關$watch與$apply的相關資料，
這二個東西又會牽扯到Angular data-binding的相關知識，
建議可以看這篇stackoverflow Using scope.$watch and scope.$apply 

[Sublime Text 2] 用Space轉為Tab

常常會用到Tab鍵來排版，先前tab都會使用空白字元排版，如果想要換掉的話，可以參考以下方法。

首頁你可以變更你的使用者偏好設定檔： 

"tab_size": 4,

"translate_tabs_to_spaces": false,

以下二種設定的方法：

[Blogger Hack] If 條件式判斷 tag

Blogger樣式提供許多tag語法，可以來使用者來客制化樣版內容。
常用到有條件式判斷，可參考以下這個連結:D

http://www.bloggersentral.com/2010/08/targeting-specific-pages-with.html

[Blogger Hack] Blogger SEO小技巧

從來沒有好好對自已的部落格做做SEO的研究，因此就搜尋一些網路上針對Blogger SEO優化的文章來實驗看看，不過大部份目前Blogger都有提供設定介面來方便使用者做SEO。剛好從今天開始來比較一下SEO設定後的效果如何XD，以下SEO小技巧請大家服用。

對文章標題的最佳化

一般來說把網頁的title以部落格文章的主題開頭是對SEO比較好的，但預設設定確為網站名稱+文章標題，這可是非常不好!!

1.首先到後台選擇範本->編輯HTML


接著在head之間找到以下的tag

<title><data:blog.pagetitle/></title>

2. 將第一步驟的東西取代如下

<b:if cond='data:blog.pageType == &quot;index&quot;'>
<title><data:blog.title/></title>
<b:else/>
<title><data:blog.pageName/> - <data:blog.title/></title>
</b:if>

[AngularJS] 如何在AngularJS中存取全域變數

如果你有一個需求想要在Controller中存取全域的javascript變數，
可以透過$window與ng-init directive二種方法，
最後回應的作者建議$window來存取全域的js變數

 可參考此篇說明： http://stackoverflow.com/questions/15275160/access-global-variable-from-angularjs

以下是擷錄內容:

There are at least two ways:

• Declare your tags array in a standalone script tags, in which case your tags variable will be bound to window object. Inject $window into your controller to access your window-bound variables.
• Declare your tags array inside the ng-init directive.

Showing both solutions:

HTML:

<body>

  <script type="text/javascript" charset="utf-8">
    var tags = [{"name": "some json"}];
  </script>

  <div ng-controller="AppController">
    tags: {{tags | json}}
    <ul>
      <li ng-repeat="tag in tags">{{tag.name}}</li>
    </ul>
  </div>  

  <div>
    <ul ng-init="tags = [{name: 'some json'}]">
      <li ng-repeat="tag in tags">{{tag.name}}</li>
    </ul>
  </div>

</body>

JS:

app.controller('AppController',
  [
    '$scope',
    '$window',
    function($scope, $window) {
      $scope.tags = $window.tags;
    }
  ]
);

[Java] 解析IE的版本

不透過第三方套件取得瀏覽器的主要版本!! ps: ie11的user-agent需變換判斷方式msie => trident

public class BrowserVersionDetect {
 
  public static void main(String[] args) {
   
  String userBrowser = "Mozilla/5.0 (compatible; MSIE 10.0; Windows NT 6.1; WOW64; Trident/6.0; MATP)";
  userBrowser = userBrowser.toLowerCase();
   
  String browserVersion=userBrowser.substring(userBrowser.indexOf("msie")).split(";")[0];
        String majorNumber 
         = browserVersion.split(" ")[1];

  System.out.println("browserVersion:" + browserVersion);
  System.out.println("majorNumber:" + majorNumber);
  
  }
  
}

[PHP,jQuery] 實作圖片旋轉與儲存

如果你的網站有圖片需要旋轉與儲存的需求，可以參考這個範例外掛:D

UI:
https://code.google.com/p/jquery-rotate/

Server:

//define image path
$filename="image.jpg";

// Load the image
$source = imagecreatefromjpeg($filename);

// Rotate
$rotate = imagerotate($source, $degrees, 0);

//and save it on your server...
file_put_contents("myNEWimage.jpg",$rotate);

[AngularJS] AngularJS 食譜範例

http://fdietz.github.io/recipes-with-angular-js/
NG 食譜範例大全~

[Bootstrap] layoutlt 超級懶人bootstrap編輯器

http://www.layoutit.com/ 是可以支援bootstrap2與3的網頁編輯器，
在瀏覽器上就可以快速的透過拖拉的方法完成一個網頁設計。
目前也支援簡中XD

下圖是以bootstrap3的範例示範

[CSS jQuery] 教你怎麼透過CSS或jQuery實作Sticky bar

網頁的常用固定某個區塊的技能(如：導航列選單)

Sticky Position (Bar) With CSS Or JQuery

[CSS] CSS vocabulary 整理

http://pumpula.net/p/apps/css-vocabulary/

[Javascript] crypto-js JavaScript implementations of standard and secure cryptographic algorithms

https://code.google.com/p/crypto-js/
支援標準的Hmac的JS 函式庫

[jQuery Plugin] 支援RWD的Slider

花14$美金就可以買到支援RWD的Slider，Flyingv也用這家的XD
另外可以看到擷圖上面有一個 loading bar，這樣可以提醒使用者下一頁要更換的時機。
蠻多網站採用這個效果的:D。

參考資料

http://www.themepunch.com/codecanyon/revolution_wp/

[jQuery Plugin] Flight Board

飛機時刻表外掛

http://keith-wood.name/flightBoard.htm

l

REST Authentication

記錄一些Rest Authentication實作

http://stackoverflow.com/questions/319530/restful-authentication 

Here is a truly and completely RESTful authentication solution:

 1. Create a public/private key pair on the authentication server.
 2. Distribute the public key to all servers.
 3. When a client authenticates:
3.1. issue a token which contains the following:
 * Expiration time
 * users name (optional)
 * users IP (optional)
 * hash of a password (optional)
3.2. Encrypt the token with the private key.
3.3. Send the encrypted token back to the user.
4. When the user accesses any API they must also pass in their auth token.
5. Servers can verify that the token is valid by decrypting it using the auth server's public key.

This is stateless/RESTful authentication. Note, that if a password hash were included the user would also send the unencrypted password along with the authentication token. The server could verify that the password matched the password that was used to create the authentication token by comparing hashes. A secure connection using something like HTTPS would be necessary. Javascript on the client side could handle getting the user's password and storing it client side, either in memory or in a cookie, possibly encrypted with the server's public key.

[GIT] 輕鬆了解Git 分支的概念與基本操作手記

來源：http://nvie.com/posts/a-successful-git-branching-model/ 

這張圖讓人可以很快速了解整個Git Branch的精要(分支的種類與用途)

主要分支

 * master 主程式(除非重大 bug，則會分出 hotfix 分支)
 * develop 開發分支(用來在另外分支出 Release, feature)

次要分支

 * Hotfixes(由 master 直接分支，馬上修正 bug)
 * Feature(由 develop 直接分支，開發新功能)
 * Release(由 develop 直接分支，開發下一版 Release)

小惡魔神人在2011年的文章有中文版的操作步驟：
 Git 版本控制 branch model 分支模組基本介紹，
建議可以好好閱讀與演練:D

[Alfresco] 如何使用log4j除錯

本文介紹如何使用alfresco內的log4j來除錯 :D
做完設定後，請記得重開tomcat server

log4j 路徑:
/usr/local/TOMCAT/webapps/alfresco/WEB-INF/classes/log4j.properties

Javascript webscript logging

在js controller加入以下語法

logger.log("Hello Debug");

修正log4j properties

log4j.logger.org.alfresco.repo.jscript=debug log4j.logger.org.alfresco.repo.jscript.ScriptLogger=debug

Java backed webscript logging

在java controller加入以下語法

private static Log LOGGER = LogFactory.getLog(UploadObject.class);

LOGGER.debug("Hello Debug");

修正log4j properties
log4j.logger.tw.org.iii.cosa.javabacked.webscript=debug log4j.logger.tw.org.iii.cosa.javabacked.utility=debug
log4j.logger.org.example=debug

[Bootstrap] 利用bootstrap實作parallax效果

http://www.script-tutorials.com/bootstrap-one-page-template-with-parallax-effect/

[Java] 跨站請求偽造Cross-site request forgery CSRF/XSRF 解決方案

一些針對CSRF漏洞的java web app解決方案：

參考資料
http://appsandsecurity.blogspot.tw/2012/01/stateless-csrf-protection.html
https://blog.whitehatsec.com/csrf-prevention-in-java/  (JAVA)
http://wiki.developerforce.com/page/Secure_Coding_Cross_Site_Request_Forgery (列出不同語言的工具與解決方案)
http://www.jtmelton.com/2010/05/16/the-owasp-top-ten-and-esapi-part-6-cross-site-request-forgery-csrf/
http://shiflett.org/articles/cross-site-request-forgeries (PHP)
CSRF 攻击的应对之道  (JAVA)

工具:

JAVA
http://hdiv.org/
https://code.google.com/p/csrf-filter/
https://github.com/esheri3/OWASP-CSRFGuard

PHP
http://csrf.htmlpurifier.org/

[SVN] TortoiseSVN 筆記

這篇記錄一下使用svn的使用經驗(直接用公司的專案來示範)，
自已寫一篇有助於記憶力XD。

版本

Subversion 1.7.8

如何新增分支

利用分支(branch)可以有效隔離主幹(trunk)，當需要開發一個額外的新功能、重構、測試寫法後，由於時程上可能無法馬上修改完畢，所以都應該透過分支的功能，避免主線被汙染。
此外SVN的分支功能屬於廉價複製，指的是SVN Copy的指令，雖然在資料夾內看到了你分支的資料夾與檔案產生，但並未複製所有的檔案內容，檔案庫實際上只是建立類似連結的動作，或儲存變動的內容而已。因此，成本低又沒有什麼負載，所以大家就稱為廉價複製

Step 1: TortoiseSVN->Branch/tag

[WordPress 外掛] Adminer瀏覽資料庫的好工具

如果不想要裝phpmyadmin的services的話，可以裝另一個好用的Adminer for Wordpress。

外掛的簡短說明：
Adminer(formerly phpMinAdmin) is a full-featured MySQL management tool written in PHP. Current used version of Plugin Adminer: 1.3.0

安裝後工具裡面就會有一個 Adminer

下載位址:
http://wordpress.org/plugins/adminer/

[Bootstrap] bootsnipp 提供bootstrap為基礎的元素設計代碼

最近開始使用bootstrap，結果就找到了這個bootsnipp的網站，可讓我們工程師更加輕鬆喇!!

[WordPress] 語系設定

許多PaaS雲端平台都提供用戶一鍵安裝WordPress系統，
但是裝起來都是英文版的，只要二個步驟就可以弄好了。

本範例是使用Appfog雲端平台 :D

Step1:
把Wordpress繁體中文版裡面的wp-content/languages這個目錄放到雲端上的目錄

Step2:
更新wp-config檔，修改WPLANG的值為zh_TW

參考:
 讓WordPress說你的語言

[WordPress 外掛] wp-fb-autoconnect 整合Facebook 單點登入

由於Facebook佔有可怕的用戶數，
因此現在的網站服務都希望讓使用者不用在重新填寫註冊即能成為會員。
這類的技術可稱為單點登入(Single Sign On, SSO)，
wp-fb-autoconnect 外掛可以快速滿足我們的需求。

先前準備

使用前需先申請一個Facebook 應用程式
https://developers.facebook.com/apps


填入應用程式資料： 顯示名稱與類別即可

之後填入安全驗證碼即可成功建立完成

[WordPress 外掛] Pie Register 使用者註冊神器

每個網站一定都需要會有使用者註冊功能。
搜尋了一下google，發現有 Pie Register 這個好用的神器，
包含避免垃圾帳號註冊、驗證信通知、欄位驗證、帳號邀請碼等等。

安裝完畢後，側欄選單即可看到Pie Register的功能列了。

別忘了在設定->一般設定，打開成員資格設定!!

下載位址：
http://wordpress.org/plugins/pie-register/

也有網友依簡體中文的檔案改寫了繁體中文版，
有需要的話就下載我已經安裝好的這包吧
https://drive.google.com/file/d/0BwHz8c9SZ2F2ZUFnX1RXT0R6TVk/view?usp=sharing

[WordPress 外掛] codestyling-localization 協助你快速建立外掛的多國語言檔

下載了woocommerce之後發現有的地方的中文化尚未完全，
查了一下，原來有支援多國翻譯的工作外掛：codestyling-localization

安裝過後會在工具裡面多了一個本地化的功能，接下來就可以看到你想要翻譯的外掛目前的語言資訊!!

下載位址：
http://wordpress.org/plugins/codestyling-localization/installation/

[測試工具] Browserstack 雲端測試平台

做web專案需要使用不同的作業系統與瀏覽器來組合測試，

現在可以透過browser stack來快速完成我們的需求:D 

Live, Web-Based Browser Testing

Instant access to all desktop and mobile browsers.
Say goodbye to your setup of virtual machines and devices.

http://www.browserstack.com/

不過免費帳號只有二十分鐘的試用限制!! 殘念

[Eclipse] 設定Tomcat的JVM Heap size

記錄一下JVM heap size的設定方法：

Step1: 點擊二下你要設定的Tomcat server

Step2: Ecipse會開啟一個Overview的設定，接著點擊Open Launch configuration

Step3: 點擊在Arguments 的tab，可看到VM arguments的設定區塊，填入你要的JVM參數。

結論：
原本裡面已有一個預設的${build_files:-Xms256m -Xmx512m}，一開始有試著填這裡面的大小來看Heap size有沒有改變，結果好像無效，就把它砍了，自已設定。
不過跑Memory leak的測試程式，竟然跑不爆XD，殘念!!還是回到部署到Tomcat Server做測試Orz

[Java] Java heap: Shallow and retained sizes

最近在試MAT工具找客戶的問題，快速筆記一下:D


參考：
Memory Analyzer tool(MAT)分析内存泄漏---理解Retained Heap、Shallow Heap、GC Root
<实战> 通过分析Heap Dump 来了解 Memory Leak ,Retained Heap,Shallow Heap
Shallow and retained sizes

[PHP] virtPHP讓一個機器可以裝很多不同版本的php

virtPHP is a tool to create isolated PHP environments.

https://github.com/virtphp/virtphp

[Tomcat] Windows Tomcat6 記憶體設定

簡單記錄tomcat6 cmd操作的過程，適用於tomcat7。

操作說明
安裝完tomcat6後，你可以在bin路徑看到 tomcat6.exe與 tomcat6w.exe。

tomcat6.exe負責啟動Tomcat service application
tomcat6w.exe則提供許多cmd指令來監控tomcat，請使用管理員權限打開命令提示字元，即可正常使用指令集。

編輯組態檔

tomcat6w.exe //ES// 

[WordPress 外掛] 本地端手動安裝WooCommerce

不透過FTP Server來安裝wp外掛

下載wooCommerce
http://www.woothemes.com/woocommerce/

將檔案放至你的wp的外掛資料夾
wordpress->wp-content->plugins->woocommerce

登入後台，點選安裝外掛，啟用woocommerce即可

安裝後會新增相關的woocommerce的資料表，如下圖

Log rotation 機制

查資料發現的tool，如果你的log檔愈來愈大的時候，就需求實作log rotation的機制。
cronolog就是幫我們解決這件事。 詳細資料請參考官網: http://cronolog.org/

***

參考:
使用 cronolog 作 Apache log 的分割處理

[Eclipse] Windows 啟動tomcat時，偵測port已被其他tomcat server 佔用

可以透過cmd line的指令，哪些process id佔了8080 port，指令如下:

$>netstat -o -a -n | findstr :8080

[Eclipse] 新增Tomcat Servers 的檢視TAB

記錄一下如何新增一個view tab，以
window -> Show view -> Other (會彈出更多的選項)

[TOMCAT] 利用Eclipse Memory Analyzer 來分析heap dump file

記錄一下MAT的操作心得

如何取得java heap dump

請再catalina.sh啟動Java heap dump的設定

JAVA_OPTS="$JAVA_OPTS -XX:+HeapDumpOnOutOfMemoryError -XX:HeapDumpPath=/usr/local/TOMCAT/logs/heap-$(date +%Y-%m%d-%H%M).dump"

-XX:+HeapDumpOnOutOfMemoryError 打開heap dump
-XX:HeapDumpPath heap dump要產生的路徑

[Wordpress] 解決資料庫連線錯誤安裝設定

為了幫朋友架一個簡單的購物車系統只好下海玩一下了，由於好久沒有裝wordpress了，

預設的DB的主機位址打了localhost:3306一直讓我拿到資料庫連線失敗的錯誤呀，還好改了127.0.0.1就正常了，太腦了記錄一下:D

***

直接改wp-config.php會比較快一點，還有不要隨便拿root來使用 XD

XAMPP 快速安裝PHP開發環境

好像大家都用這套XAMPP快速安裝呀XD，虧我還一個一個設定。

http://www.apachefriends.org/zh_tw/index.html

[MySQL] ERROR 2002 (HY000): Can't connect to local MySQL server through socket '/usr/local/MYSQL/var/lib/mysql/mysql.sock' (2)

今天使用了以下指令無法要登進去mysql時噴出了錯誤

mysql -h 127.0.0.1 -u root -ppassword

錯誤訊息
ERROR 2002 (HY000): Can't connect to local MySQL server through socket '/usr/local/MYSQL/var/lib/mysql/mysql.sock' (2)

結果加個-h參數就正常了XD，真奇怪
mysql -h 127.0.0.1 -u root -ppassword

[Blogger HACK] 提供使用者閱讀方便的"回到上層"按鈕整合

很多部落格的文章的內容愈來愈長時，
都會提供回到最上層的按鈕供使用者快速捲到最上層。
想要快速整合嗎?
可以參考這篇文章
http://www.allbloggertricks.com/2013/04/scroll-to-top-jquery-button-for-blogger.html (這網站超多blogger的技巧可以參考!!)

[Javascript] javascript 的 logger system

利用javascript寫出類JAVA的log4j 元件

http://log4javascript.org/
持續有在維護的專案，基於Java log4j設計而成

http://log4js.berlios.de/ => 已死
作者改放到github上啦 http://stritti.github.io/log4js/

之後再來補個範例:D

[Blogger HACK] 套用Bootstrap的選單導航列

這周把網誌多加了選單導航列功能，感覺比較有助於使用者查詢資料。
由於美編設計不是很在行XD，所以就找了Bootstrap來套。
記錄一下修改方法，有興趣的朋友可以試試。

開始修改

Step1: 首先進到管理介面，點選範本 => 編輯HTML，如下圖示

Step2: 在範本內容搜尋字串結尾，置入bootstrap CSS樣式的URL

<link href="//netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css" rel="stylesheet"></link>

[AngularJS] AngularJS Directive 整合 jQuery plugin

之前都寫很多的jquery外掛蠻想了解跟Angular到底整合的程度。
雖然蠻多人都說要丟掉jquery才對XD，基於好奇還是找了相關資料來讀一讀。

Correct way to integrate Jquery plugins in Angular.js
Combining AngularJS with existing Components
An approach to use jQuery Plugins with AngularJS

AngularJS Directives Tutorial

[jQuery Plugins] 影片在bootstrap carousel中時，當影片播放時如何停止carousel

很多網站的banner都會使用bootstrap carousel這個外掛，
當使用者點擊carousel的影片播放時，需要暫停carousel自動換頁的動作。

目前影片是採用Vimeo，所以你可以使用Froogaloop這個元件來取得Vimeo的控制。
完整範例可參考:http://developer.vimeo.com/player/js-api

一開始在用的時候，沒有認真看文件的說明，導致AddEvent的事件完全無動作，大家要注意嵌入的影片格式要包含api=1與player_id=


相關範例如下：

        var $myCarousel = $("#carousel-iangel");
        $myCarousel.on("slide.bs.carousel", function(event) {
            $.console("change slide");
            var $currentSlide = $myCarousel.find(".active iframe");
            // exit if there"s no iframe, i.e. if this is just an image and not a video player
            if (!$currentSlide.length) { return; }
            
            // pass that iframe into Froogaloop, and call api("pause") on it.
            var player = Froogaloop($currentSlide[0]);
            player.api("pause");
        });

        
        var iframe = $("#videoIntro")[0],
            player = $f(iframe); //$f 這是Froogaloop提供的方法

        // When the player is ready, add listeners for pause, finish, and playProgress
        player.addEvent("ready", function() {
            player.addEvent("play", function(id) {
                // $.console("id:" + id + " play");
                $myCarousel.carousel("pause");
            });
            player.addEvent("pause", function(id) {
                // $.console("id:" + id + " pause");
                $myCarousel.carousel("pause");
            });
            player.addEvent("finish", function(id) {
                // $.console("id:" + id + " finish");
                $myCarousel.carousel("cycle");
            });
            player.addEvent("loadProgress", function(data, id) {
                // $.console(data.seconds + "s played");
            });
        });

[VIM] 如何做全選+複製

常常會用的VIM指令

Reference:

http://stackoverflow.com/questions/1620018/vi-editor-copy-all-the-lines-to-clipboard

You should yank the text to the * or + registers:

gg"*yG

Explanation:

• gg
  • gets the cursor to the first character of the file
• "*y
  • Starts a yank command to the register * from the first line, until...
• G
  • go the end of the file

[Shell] 利用 Shell Script 製作選單

如果想要用shellscript寫出程式執行選單可參考以下範例。 拿來寫一些每天常常會打的指令蠻方便的:D

#!/bin/bash
# Bash Menu Script Example

PS3='Please enter your choice: '
options=("Option 1" "Option 2" "Option 3" "Quit")
select opt in "${options[@]}"
do
    case $opt in
        "Option 1")
            echo "you chose choice 1"
            ;;
        "Option 2")
            echo "you chose choice 2"
            ;;
        "Option 3")
            echo "you chose choice 3"
            ;;
        "Quit")
            break
            ;;
        *) echo invalid option;;
    esac
done

[Chrome APP] POSTMAN - multipart/form-data 上傳檔案

postman是一個好用的reset client app，
如果你要透過他來測試相關上傳api時，
記得content-type要設multipart/form-data(久久用一次都會漏掉，筆記)。
不然server會回傳415的http status

[HTML] 加了上標與下標字體

有產品的LOGO需要顯示plus的符號，也可以應用在數字公式上
順便筆記一下

上標文字或符號，英文是 superscript => HTML 標籤
下標文字或符號，英文是 subscript => HTML 標籤 <sub>

範例:

$("body").append("A+");

[Javascript] js寫的拉霸機遊戲

可應用在抽獎介面的拉霸機遊戲 http://odhyan.com/slot/

[MSSQL] SQL JOIN 圖文說明

在FB看到人家的分享文，值得好好收藏:D