Kim's Note

前陣子將AngularJs從1.3.18升上1.4.4後，遇到若ng-repeat的資料數目超過約500個時，在第一次繋結很快，但在取得資料再重新繫結時，會有很明顯的效能問題，整個畫面會卡住約5秒。如下sample。 See the Pen ng-animate-slowly-1 by kimxinfo ( @kimxinfo ) on CodePen . 降回1.3.18測試後，並不會有此問題........。暗...升上來，豈有再降回的道理，立馬使用chrome profile來錄製，看是慢在哪一段。經測試後，發現慢的js是angular-animate.js 。 之前看過1.4.4 的 release note ，想說不是針對ng-animate作了很多bug修正及改善。怎麼會引起效能問題..........重點是，我沒有使用它在ng-repeat上丫....。

  個人最常用的翻譯工具之一"Google Translate"，在chrome安裝相關套件後，可以在網頁選取文字後，按右鍵，前往Google Translate 作翻譯，如下圖。 而我另一常用的翻譯工具"奇摩字典"，在商店想找類似的功能，但找不到相關的套件，索性自己寫一個來玩玩。 使用方式

同事分享一篇文章，關於資料庫發生DeadLock時，如何通知管理者。不過內容很簡略，摸了一陣子才搞起來。 Step by Step 1.啟用目標資料庫(本例使用AdventureWorks2014)與msdb的Service Broker。 執行語法前需先將SQL Server Agent 停用 ，等執行後再打開 2.建立DeadlockEvents資料表、排程及通知 此部份引用msdn範例

  今天同事提到Spotify，有個很酷的登入功能，在桌面應用程式登入後，再到網頁作登入的動作，會自動登入。登出，再登入，也都不用輸入帳號密碼。但若桌面程式關閉後，Web要登入就要輸入帳密。   雖不知它實作的機制是如何，但停不住好奇心的我們，花了些時間朝著Web與Window互動的方法去尋找類似的作法。找了幾篇後，在CodeProject剛好有篇文章，介紹到使用 HttpListener 讓Desktop與Browser溝通 ，在瞭解相關作法後，實作了一個類似的Spotify的登入機制。   如下示意圖，使用者電腦的Desktop應用程式，使用HttpListener在本機Host一個port為60999。瀏覽器透過對localhost:60999Request，會取到目前的登入者作登入。

將專案的AngularJS UI Bootstrap 從0.13.0 升上到0.13.3後，在使用typeahead的時候，瀏覽器的console會出現警告訊息 如下圖，提示bindHtmlUnsave已不推薦使用。 此問題是我的typeahead有使用自訂的template，而template的內容使用到bind-html-unsafe作html的繫結 此行程式我是參考ui-bootstrap 在Github的原始碼，來作比對的highlight用。本想說它既然警告了此用法，那它應該也有修改成正確的寫法才對。但....答案是沒有.. 解決方法 1.將bind-htmjl-unsave 改成 ng-bind-html。 改完後，引用模組"ngSanitize"。 2.加入angular-sanitize.js 3.引用ngSanitize 參考來源 https://docs.angularjs.org/api/ngSanitize

最近剛裝完Window 10，想將Windows Defender停用，來增進筆電的效能。最簡單的動作，就是直接將介面打開，將即時防護關掉。但關掉後三不五時會提醒你安全性警告，且重開機後又會自動打開。本想到服務去停用它，但停用功能是鎖住的….WTF。 針對此，找到國外有一篇文章介紹到，如何停用"即時防護"，相關步驟如下

   目前公司有一個網站執行在Azure上，並將經常讀取的共用資料快取在記憶內。初期網站的負戴量還沒那麼大時，在快取資料上不會有什麼問題，但之後若成長到一定的程度時，網站勢必要作擴展，此時會造成快取的資料在多個Instance是不同步的。針對此找了幾個解決方案 Azure Redis Cache:最多人使用，也是官方推薦使用，效能快，可以輕易作到多網站之間的快取共享。關於Redis更多 請參考 ps這適合較大的WebFarm使用，若你的擴展不會很多台的話，可以考慮使用第3個方法。 Database Cache 在Nuget有一套件 Ovicus.Caching 實作了ObjectCache(.Net4.0新的快取類別 請參考 )，將資料快取在資料庫內。這樣也可以達到多個網站的共享快取，但在效能會比軙慢了點，尤其在大量的快取存取下更明顯。 透過ChangeMonitor監控快取 :此方案有別於上述兩個，不作共享快取，只作單機快取。透過監控的機制，在資料變更時，通知所有網站清除本身的In-Memory快取，再作資料的重新取得。

  一開始在撰寫測試腳本並不會去考慮reuse這件事，但隨著測試腳本開始變多、變複雜時，就會看到要測同一支程式，但相同的語法散落在不同的腳本。例:a-spec.js與b-spec.js有一大段是輸入表單值的部份。幸好根據此問題，在網路有蠻多篇介紹使用Page Object Pattern的撰寫方式來解決。本文會介紹如何在Visual Studio 2013 如何實作此Pattern。 開發工具設定 Visual Studio的TypeScript Module System需要設定為CommonJs，此為NodeJs載入模組設定

  這兩天寫完了Protractor測試後，在本機執行沒問題後，將執行語法作成一個.bat檔後，放到測試主機Window Server 2012的排程工作執行。但一直無法出現測試畫面 (但手動執行.bat ok)，本還以為是Window 2012後不支援.bat的排程執行=.=，後來查到是要設為"登入時才執行"。

這陣子在Survery前端e2e測試的一些撰寫方式及輔助套件，將一些實用的記錄下來，以便日後查詢。 開發及測試環境 使用NodeJS作測試 Visual Studio 2013+TypeScript撰寫測試Script   Visual Studio 套件 新增一個Web 空專案 安裝protractor的TypeScript套件 angular-protractor: browser、element、by.model、by.binding 等語法支援 jasmine : BDD測試Script，例: descript( """) it(“’….”) NodeJS套件 執行NodeJs Commad，並切換到專案目錄，執行npm init 初始化package.json，過程會要你輸入相關資訊，按照預設值可以一路按enter，此檔案會建立專案資訊及記錄相依套件 。 npm init 安裝測試套件protractor npm install -g protractor 更新webdriver webdriver-manager update 安裝jasmine-reporters，此套件可以幫助你將測試結果輸出到目錄 npm install jasmine-reporters --save-dev 建立Protractor 組態設定 protractor 參考 ， jasmine-reporters 參考 撰寫測試程式 1.直接引用官方範例，在spec目錄下新增caculator-spec.ts的TypeScript檔案 2.執行測試 protractor protractor-conf.js 執行後會啟用chrome瀏覽到測試網頁，並輸入1跟2後送出，再驗證結果是否相符 3.測試結果 輸出到目錄的xml檔案 範例下載: Github 相關參考 http://ramonvictor.github.io/protractor/slides/#/ https://angular.github.io/protractor/#/tutorial https://github.com/lar...