星期三, 7月 16, 2014

[Java] 簡單的User authorization機制

常用到的使用者是否有正確的權限存取當前頁面的機制,Java可以透過Filter來達到。
可依個人需求再強化嚕。

This can be handled in a Filter and there are great explanation and example in StackOverflow Servlet-Filter wiki.
Adapting the code there for your problem (note the addition and usage of the needsAuthenticationmethod):
@WebFilter("/*")
public class LoginFilter implements Filter {
    @Override
    public void init(FilterConfig config)
        throws ServletException {
        // If you have any  in web.xml, then you could get them
        // here by config.getInitParameter("name") and assign it as field.
    }

    @Override
    public void doFilter(ServletRequest req, ServletResponse res, FilterChain chain)
        throws IOException, ServletException {
        HttpServletRequest request = (HttpServletRequest) req;
        HttpServletResponse response = (HttpServletResponse) res;
        HttpSession session = request.getSession(false);

        String requestPath = httpServletRequest.getRequestURI();

        if (needsAuthentication(requestPath) ||
            session == null ||
            session.getAttribute("user") == null) { // change "user" for the session attribute you have defined

            response.sendRedirect(request.getContextPath() + "/login"); // No logged-in user found, so redirect to login page.
        } else {
            chain.doFilter(req, res); // Logged-in user found, so just continue request.
        }
    }

    @Override
    public void destroy() {
        // If you have assigned any expensive resources as field of
        // this Filter class, then you could clean/close them here.
    }

    //basic validation of pages that do not require authentication
    private boolean needsAuthentication(String url) {
        String[] validNonAuthenticationUrls =
            { "Login.jsp", "Register.jsp" };
        for(String validUrl : validNonAuthenticationUrls) {
            if (url.endsWith(validUrl)) {
                return false;
            }
        }
        return true;
    }
}
I would recommend to move all the pages that require authentication inside a folder like app and then change the web filter to
@WebFilter("/app/*")
In this way, you can remove the needsAuthentication method from the filter.

星期一, 7月 07, 2014

[AngularJS] 實作自動選取的directive

實作自動選取的directive範例

HTML

 <input type="text" value="test" select-on-click />

JS

module.directive('selectOnClick', function () {
    return {
        restrict: 'A',
        link: function (scope, element, attrs) {
            element.on('click', function () {
                this.select();
            });
        }
    };
});

http://stackoverflow.com/questions/14995884/select-text-on-input-focus-in-angular-js

[AngularJS] angular-xeditable 讓元素變可以編輯的

angular-xeditable 提供元素可編輯的效果,
如果常用的個人資訊編輯頁面就非常試用。

https://github.com/vitalets/angular-xeditable

星期日, 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這個屬性,才有辦法正確的接收到事件的方法。

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

星期日, 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] 常用的全選/取消全選的介面需求- 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的事件處理機制的運作方法:

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:
  1. 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)});
    }
  2. 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]);
    }
  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月 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){
     
    });


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.

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

Google chart


Kendo UI


Highcharts



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

星期六, 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

其他範例

三個常用的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月 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

星期五, 5月 30, 2014

[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];

    }

}

星期四, 5月 29, 2014

[iOS] 導覽列與Storyboard

經過第一個範例([iOS] 快快樂樂寫iOS hello world (storyboards))練習後,
接著要開始多個頁面的切換練習,這次要練習透過storyboard切換不同的ViewContoller。

版本

XCode 5 


開始實作


Step1: 新增第二個ViewController

在第一個ViewController放入一個按鈕(取Load from storyboard),
然後在Object Library拖進來第二個ViewController

星期三, 5月 28, 2014

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


星期二, 5月 27, 2014

[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

星期一, 5月 26, 2014

[Java] 快快樂樂學會log4j

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

log4j使用版本:1.2.x

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

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

星期三, 5月 21, 2014

[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);
}

星期五, 5月 16, 2014

[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【原创译文】


星期四, 5月 15, 2014

[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

星期日, 5月 11, 2014

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


星期一, 5月 05, 2014

[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

星期六, 5月 03, 2014

星期四, 5月 01, 2014

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

以下二種設定的方法:

其他你感興趣的文章

Related Posts with Thumbnails