讓Visual Studio 2012開發工具介面也能進行多國語系切換

Visual Studio 2012介面進行多國語系切換的重要性

開發工具能進行多國語系的切換,重要嗎?如果你認識的開發者都是同一語言的開發者,那就不重要。但只要是有不同語言的開發者,那就很重要。而且各語系的翻譯有時差異真的很大,例如,中文版的Visual Studio在ASP.NET MVC裡要加入一個View的步驟為[加入 | 檢視],但在英文版是[Add | View Links],「View Links = 檢視」,各位觀眾,我不說你得出來嗎?(我真的為了這個問題,差點和人幹架!!!)

台灣文化的問題

現在,我又碰到另一個問題。我們很喜歡當白老鼠,最近升級ASP.NET and Web Tools 2012.2 RC後,在測試一個火紅的功能,結果出現了以下不支援現有繁體中文的畫面:

文化不合的錯誤

這讓我很…Orz,結果呢,能切換語系的開發工具真好。以下就讓我們為Visual Studio 2012穿上任一國家語系的外衣吧!(我只裝了英文語系啦。)

[廣告]Digiarty 2012年聖誕節多款軟體免費領 – 49.95美元WinX DVD Copy Pro(含序號)

拿人手短篇

我從Digiarty免費得到過DVD相關軟體,而Digiarty公司的行銷專員看得起本Blog,邀請我刊文,我因這些活動而受益,所以一篇小文當成回報,是一定要的。聲明:以下文句由官方提供,我不代表任何立場。

Digiarty 聖誕節多款軟體免費領 – 49.95美元WinX DVD Copy Pro(含序號)

近日有不少軟體廠商舉辦免費領軟體序號的活動來慶祝聖誕節~ 其中Digiarty Software家也推出了免費領取價值49.95美元WinX DVD Copy Pro序號活動。隨著年末DVD賀歲檔的热潮,平日想要備份DVD從而保護DVD碟片的朋友就不要錯過這次機會!

  1. 首先進入活動頁面:http://www.winxdvd.com/giveaway/

    活動時限:

    Digiarty 2012年聖誕節活動畫面
  2. 點擊“Get License Code”就會彈出軟體的序號及下載鏈接,無須註冊個人信息,在12月21日之前安裝激活后即可使用軟體所有功能(以下會介紹)。不支持升級。
    Digiarty 2012年聖誕節活動序號及軟體下載畫面
  3. WinX DVD Copy Pro -無損無限制存取各類受保護的DVD,可將DVD轉檔至DVD folder、ISO、MPEG以便觀看或編輯,支援DVD燒錄,獨立提取DVD音視頻檔案等多種功能。登入官網檢視更多功能:http://www.winxdvd.com/dvd-copy-pro/

    WinX DVD Copy Pro只是Digiarty本次活動送出的第一款軟體。 從12月21日開始,該活動頁面會更換軟體,持續送出WinX iPhone iPad Video 軟體套裝包,目前還不知道套裝包會藏著什麽好軟體耶,保持關注吧~~
  4. 另外,Digiarty 也在臉書上每日送不同的軟體:Toolbox for Excel、AV Voice Changer Software、Mailwasher Pro 2012、Able2Doc PDF to Word Converter等等。只要有臉書帳號,都可以進入參與活動,贏取更多軟體序號。

    活動詳情請見:http://www.facebook.com/WinXDVD/app_206541889369118

心得-本人「我」寫的

Digiarty公司所送軟體真的很不錯,都是功能完整的版本,深得我心。另外,有個小技巧,它們的送的免費軟體都必須在某年某月某日之前安裝啟動,依之前的經驗,它們是寫死在程式碼裡,所以就算已經過期,只要調一下電腦裡的日期至啟動前的時間點,也是可以安裝及啟動。所以,快快去下載軟體及取得序號,那一天要用到時你就知道,DVD相關的軟體…都要數千元起跳的,能用免費用正版,何需快樂版,不是嗎?

實用Sublime Text 2套件整理(2012/12)

Sublime Text 2的延伸套件

文字編輯器在接觸Sublime Text 2之前大多以Notepad++為主,筆記本為輔。不過看過Kevin TsengSublime Text 2系列教學文之後,又花了一段時間來上手,發現Sublime Text 2這個又免費又付費的編輯器,實在是用程式設計師的角度來開發,而不是像一般編輯器是用編輯器的角度來開發,慢慢的喜歡上它,而且它多元化的輔助套件,和Visual Studio的擴充套件一樣,令Sublime Text 2加分不少。

以下整理我由A選到Z的套件,分類為安裝與選用,安裝是我正在安裝使用中的套件,選用是可依個人需求安裝使用。

Sublime Text 2實用安裝套件

  • Package Control

    必啟用,沒有它你就無法安裝擴充套件,快速鍵:Ctrl+Shift+P

    啟用請參考:啟用Package Control

  • BracketHighlighter

    讓你在撰寫如HTML程式碼時,能有高亮度提醒功能。請參考以下官方圖片:

    BracketHighlighter功能說明圖
  • ColorHighlighter

    當的游標移至文字中如"#FFFFFF","rgb(255,255,255)","white"會自動顯示對應的顏色。當然,用在CSS居多。

Zen-Coding - 教你極速撰寫HTML5與CSS3程式碼

什麼是Zen-Coding?

Zen Coding本身是個外掛程式,官網上的資料,Zen Coding目前可以使用在36套各類HTML與CSS編輯器中,像是Aptana、TextMate (Mac)、Notepad++、PSPad、Dreamweaver、Sublime Text 2、Visual Studio…等常用的編輯器都有支援Zen Coding。

那Zen-Coding的作用是什麼呢?它的目標很簡單,就是利用已有的技術,高速的架構出HTML、CSS、XML、XSL或HAML。什麼是已有的技術,簡單說,它是CSS Selector(CSS選擇器)的再利用。

一些些改變,能帶來什麼呢?

極速

就我使用Zen-Coding它的經驗而言,就算只是簡單拿來產出HTML5或CSS3的程式碼,Zen-Coding也可以非常有效率的加速我寫HTML5與CSS3的速度,加多少,這我很難用言語或文字表示,先看一段影片:

哇!哇!哇!哇!哇!哇!

如果看完沒有跟著哇!那再來一次!

哇!哇!哇!哇!哇!哇!

加速HTML5應用程式與網站的50個技巧

加速HTML5應用程式與網站的50個技巧

以下是BUILD 2012: 50 Performance Tricks to make your HTML5 Applications and Sites faster的讀書心得,此篇演說的內容和之前討論Web Performance Best Practices and Rules裡的原則有異曲同工之妙,是當我們網站開發上線前後或執行上有瓶頸,要針對網站進行效能調效時,可以有一個很快速的指導方針,BUILD的演說有影片及投影片可以下載,以下重點整理。

加速六大原則

SqlLocalDB學習筆記

SqlLocalDb的好,只有用過才知道

在使用Visual Studio 2012與以往有個很大的不同點,就是越來越少碰原生的SSMS管理工具,原因之一是Visual Studio 2012內建了SQL Server的管理工具,原因之二就是預設使用SqlLocalDb。所以在進行開發工作時,可以很方便的在Visual Studio 2012中完成基礎的資料庫工作。

SqlLocalDb.exe分享參數

學習SqlLocalDb的話,首推Will的「SQL Server 2012 Express LocalDB (SqlLocalDB) 深入剖析」,不過在假日的早晨,突然看到Will發佈了秘密影片,在大小寶貝的攻擊之下,根本無法進入學習模式,只好邊看一些,邊寫一些。

如果想要對SqlLocalDb有進一步的操作,就必須對於sqllocaldb.exe有多一分瞭解。影片有提到,原始sqllocaldb.exe的說明很爛,注意以下兩個參數:

share|h ["擁有者SID或帳戶"] "InstanceName" "ShareName"
使用指定的ShareName共用指定的InstanceName。若省略使用者SID或帳戶名稱,預設為目前使用者。
unshare|u "InstanceName"
停止共用指定的共用LocalDB執行個體。

改成英文來看就清楚一些了。

學習使用devenv.exe幫Visual Studio偵錯

擴充程式的好,大家都知道…

自從Visual Studio 2010開始有擴充套件的概念後,我想現在不管是使用Visual Studio 2010或Visual Studio 2012的開發人員們,應該很少人有不使用擴充套件,那種檔案庫上人氣排行前五十名,有百顆星星…很少有不裝的。有空、無聊、發呆…也會去找看看沒有什麼可以好玩的新玩意。但使用的擴充套件一多,難免會有衝突、問題等等。今天碰到一個怪問題,查了一會兒實在理不出個頭緒,心想,不會吧,Visual Studio 2012重灌是個僅次於Windows重灌的大工程。最後用了一個很不好的必殺技來解決,先說,原因我還是沒查出來。

devenv.exe參數及說明

在偵錯Visual Studio開發工具本身時,有二種方式,一種是開兩個VS執行個體,VS1去附加VS2的執行緒,然後用VS2去進行操作,當VS2當掉時,就可以使用VS1收集到相關資訊給開發團隊。

第一種方式,大概你已經”當”到無能為力,上類似connect(產品錯誤回報區)或英文官方討論區,就會有人教你用第一種方式。

但我想自己找問題點,怎麼辦?這時你就必須對Visual Studio的啟動程式(devenv.exe,路徑在C:\Program Files (x86)\Microsoft Visual Studio 11.0\Common7\IDE)下參數。讓Visual Studio幫你收集資訊,讓我們可以參考這些資訊理來判讀Visual Studio到底發生了什麼問題。

超快速申請Office 365 Enterprise Preview帳號

感謝Sky提供的資訊

以下為Sky在fb留言:

目前Office 365正在進行新版的Preview,有興趣的可以去申請玩玩看....
目前不限時間免費,但記得選Office 365 Enterprise Preview 的試用,才會完整...不要像Sky傻傻的選了ProPlus.結果沒包含Sharepoint等強大的功能...
Preview結束後,系統會自動砍掉帳號,所以如果有重要資料,記得自行備份下來噢!!
最後,申請後,直到測試結束,都不能砍帳號,所以也不要拿正式的名稱去作申請...喔,對了,Office 365沒有綁定Windows Live ID,大家不用擔心Windows Live ID被綁定,可以安心使用...
(Sky的含淚提供~)

申請Office 365 Enterprise Preview帳號

因為是預覽版的試用是免費又不卡功能,所以申請非企業版實在傷很大。不過它的網頁真的很容易誤導人,所以留下一篇記錄一下。

Office 365企業預覽版帳號申步驟:

  1. Office 365預覽版申請網址:http://www.microsoft.com/office/preview/en/try-office-preview

免費IP,ICMP,TCP及頻寬測試的好工具PsPing

PsPing簡介

PsPing是一個命令列公用程式,它用來測量網路的效能。除了標準的ICMP ping功能,

  • 它可以回報連接至TCP埠的延遲
  • 在系統溝通時TCP往返的延遲
  • 在連接系統時的TCP可用頻寬

此外取得min、max、average的值都在0.01ms,你可以還使用PsPing生成統計圖的結果,這讓你將結果匯整至試算表(spreadsheets)。

安裝

PSTools.zip下載至電腦磁碟上,然後解壓縮。開啟命令提示字元(cmd.exe),切換至PsPing所在目錄,輸入【psping】會顯示指令語法。

PsPing參數查詢

使用PsPing

PsPing實現Ping功能、TCP ping、延遲和頻寬測量。使用下列命令列選項來顯示每個類型的用法:

查詢PsPing語法

用法: psping -? [i|t|l|b]

參數說明:

  • -? I   ICMP ping 的用法。
  • -? T   TCP ping 的用法。
  • -? L   延隔時間測試的用法。
  • -? B   頻寬測試的用法。
ICMP ping參數查詢

ICMP ping語法

psping [[-6] | [-4]] [-h [buckets]] [-i <interval>] [-l <requestsize> [-q] [n-t|-<count>] [-w <count>] <destination>

參數說明:

  • -h 列出統計圖(每0.01ms一個值,預設顯示數為20)。
  • -i 以秒為單位的時間間隔(預設1秒)。指定為0為快速ping。
  • -l 請求大小。
  • -n Ping的次數。(預設5次)
  • -q 不輸出ping命令的過程。
  • -t Ping不停止執行,直到用Ctrl + C停止。輸入Ctrl + Break可暫時停止。
  • -w 執行指定數目的預熱ping(預設為 1)。
  • -4 使用 IPv4。
  • -6 使用 IPv6。

使用高速ping來測試,可使用-q和-i 0的組合。

ICMP ping測試

  • psping 192.168.3.1

    這是最簡單的用法,相於於cmd.exe裡的ping指令。

  • psping -h 5 192.168.3.1
    顯示統計圖結果

如何刪除Team Foundation Service(TFS)上的測試專案

Team Foundation Server & Service

你或許聽過TFS(Team Foundation Server),它是一套軟體開發流程的軟體。如果你不瞭解它,可以參MSDN的《TFS基本認識》的上Team Foundation Server 是什麼?一小節來瞭解。

不過,今天要談的TFS是Team Foundation Service,TFS的簡介可以參考mrkt-使用 Team Foundation Service一文,裡面有很淺而易懂的介紹。就我的認知,它是Team Foundation Server的子集合,Team Foundation Service提供與微軟產品或非微軟產品有非常高的整合度,它提供由小而大的隊團一個非常好的選擇。Team Foundation Server對於小團隊來說,太大,不管是功能面,因為軟硬體成本,Team Foundation Service對於小團隊或是不需要Team Foundation Server那強大功能的團隊而言,剛剛好。

如何刪除Team Foundation Service(TFS)上的測試專案

Visual Studio 2012實用元件庫整理(2012/10)

Visual Studio元件庫

Visual Studio元件庫就像是一整個外掛工具的大本營,元件庫本身比較是用來增強或補充Visual Studio的不足。另外像NuGet,NuGet比較是程式碼的外掛大本營,有了這兩座大本營,我們可以在彈藥不足時尋求支援。

以下整理元件庫上目前支援Visual Studio 2012的元件。

SDK類

  1. Microsoft Visual Studio 2012 Visualization & Modeling SDK
  2. Microsoft Visual Studio 2012 Feedback Tool
  3. Microsoft Visual Studio 2012 SDK

工具類

  1. Visual Studio 2012 Integrated Help Extension

    增強Help的功能。

解決Windows Azure Storage VHD無法刪除的錯誤

虛擬機器與VHD

我們在Windows Azure可以非常方便新增虛擬機器(Virtual Machine),例如,

Windows Azure上提供作業系統

現在Windows Azure上提供,Windows與Unix-like的作業系統共有9套可以讓使用者選擇。新增的虛擬機器都會以VHD存在於Windows Azure之上。

刪除VHD的錯誤

當我們一步一步刪除了Windows Azure裡【Virtual Machines】分頁中的虛擬機器後,接著會刪除【Storage】分頁裡的【Storage】,例如:

Storage數量

Storage裡還存放著我們的VHD檔案,這時我們會很習慣性的按下畫面最下方的【Delete】,不過我們會得到第一個錯誤訊息:

Failed to delete Storage account 'portalvhds7nc??????????'.

Storage account portalvhds7nc?????????? has 1 container(s) which have an active image and/or disk artifacts. Ensure those artifacts are removed from the image repository before deleting this storage account.

Microsoft SQL Server 2012 Express下載與安裝

MS SQL Server Express榜首文章

我的Blog文章有篇介紹《MICROSOFT SQL SERVER 2008 EXPRESS安裝與簡介》從推出以來,就是一直高居Blog裡文章流量的榜首,而且這個第一名是以年為單位。SQL Server 2008、SQL Server 2008 R2,SQL Server 2012年初都已經推出,而且連SQL Server 2012 Service Pack 1都已經快推出了。想想,應該來更新一下此SQL Server Express安裝內容。

SQL Server 2012 Express下載

SQL Server 2012 Express可由Microsoft Download Center下載取得。

版本除x32與x64外,主要有:

  • LocalDB (MSI 安裝程式)

    Express 系列新增的 LocalDB 是輕量版 Express,包含所有程式設計功能但是以使用者模式執行,並配備快速的零設定安裝,而且所需必要條件很少。如果您需要一種可從程式碼建立和使用資料庫的簡單方式,請使用此封裝。它可以與應用程式和資料庫開發工具 (如 Visual Studio) 結合,也可以內嵌在需要本機資料庫的應用程式中。

    SqlLocaLDB.MSI(x32-27.9 MB、x64-33.1 MB)

  • Express (僅包含 Database Engine)

    核心 Express 資料庫伺服器。如果您需要接受遠端連接或從遠端管理,請使用此封裝。

    SQLEXPR_x86_CHT.exe(126.6 MB)、SQLEXPR_x64_CHT.exe(145.8 MB)

  • Express with Tools

    含有LocalDB、Database Engine、SQL Server Management Studio Express

    SQLEXPRWT_x86_CHT.exe(756.2 MB)、SQLEXPRWT_x64_CHT.exe(722.2 MB)

  • SQL Server Management Studio Express

    此封裝不包含資料庫,僅包含管理 SQL Server 執行個體的工具,包括 LocalDB、SQL Express、SQL Azure 等執行個體。如果您已經擁有資料庫,而且只需要管理工具,請使用此封裝。此封裝不包含 LocalDB。

    SQLManagementStudio_x86_CHT.exe(659.2 MB)、SQLManagementStudio_x64_CHT.exe(643.9 MB)

  • Express with Advanced Services

    此封裝包含 SQL Express 的所有元件。

    SQLEXPRADV_x86_CHT.exe(1.4 GB)、SQLEXPRADV_x64_CHT.exe(1.4 GB)

在Visual Studio 2010預設會安裝SQL Server 2008 Express,但在Visual Studio 2012會改預設安裝SqlLocalDB。SqlLocalDB是專為開發人員計設的一個版本,幾乎可執行所有T-SQL內容,而且它所在的機器上不需要有SQLExpress或MSSQLSERVER的執行個體即可執行。也就是說,不需要再額外安裝SQL Server或SQL Server Express即可開發與測試資料庫相關內容,實在是一個非常好用的功能。

如果也想在Visual Studio 2010裡使用SqlLocalDB,可以載下SQL Server Data Tools(要下載Visual Studio 2010版本),安裝之後,在連線時的伺服器名稱輸入:「(localdb)\v11.0」,即可和SqlLocalDB連線作業。也就是說,以前你可能要下載1.4GB的安裝檔回來安裝個SQL Server 2012 Express後,才能開始進行與資料庫相關的測試與開發工作。現在只需要約27~33MB的安裝檔+SSDT(不到1MB)即可測試與開發資料庫相關工作。這樣有沒有很棒。

其他版本功能上的差異,請參考http://msdn.microsoft.com/zh-tw/library/cc645993.aspx

HTML5 Drag and Drop功能DataTransfer物件format參數注意事項

Drag and Drop(DND)是HTML5裡一個趣味與實用性很高的一個功能,在實作時發現一個有趣的小問題。我們從程式碼來看問題比較好說明。

以下為http://msdn.microsoft.com/en-us/library/ie/ms536744(v=vs.85).aspx範例程式碼:

var sImageURL;
function InitiateDrag() 
/*  The setData parameters tell the source object
   to transfer data as a URL and provide the path.  */
{   
    event.dataTransfer.setData("URL", oImage.src);
}
function FinishDrag()
/*  The parameter passed to getData tells the target
    object what data format to expect.  */
{
    sImageURL = event.dataTransfer.getData("URL")
    oTarget.innerText = sImageURL;
}

以下為http://www.w3schools.com/html/html5_draganddrop.asp範例程式碼:

function allowDrop(ev)
{
ev.preventDefault();
}

function drag(ev)
{
ev.dataTransfer.setData("Text",ev.target.id);
}

function drop(ev)
{
ev.preventDefault();
var data=ev.dataTransfer.getData("Text");
ev.target.appendChild(document.getElementById(data));
}

問題點於在setData方法的format參數,完整是setData(format,data)。以上程式能正常執行,我們再看其他程式。

Knockout.js與MVVM基礎入門補充教材

Web API與MVVM

小弟有幸,被看得起,被找去寫書。所以未來幾個月,應該會有人生第一本電腦技術書藉在書局裡面供大家挑選,最大的願望當然是人手一本,你可以拿去當枕頭,然後睡到落枕…再起來寫程式,也可以拿去包豬肉,再拿來生火烤肉。

在寫書期間,發現,目前中文方面討論MVVM模式的資料實在太少,但要把全部MVVM模式相關寫進去書裡又離題太遠,書裡有一章是使用Knockout.js實作MVVM模式,索性就把官方那非常高互動的教材給翻譯+中文化,本想放入書中當補充教材。但實在想了很久,還是決定使用Blog加電子書方式來公開。Blog你可以線上看,電子書(PDF)可以在平板上看。

Knockoutjs基礎入門教材

如果你想更快速學習Knockout.js與MVVM模式,書會有圖解,會讓你看的一清二楚,不過想快速入門建議可以連上"http://learn.knockoutjs.com/"官方教材,配合本中文化不用多少時間,就可以清楚整體輪廓,打下不少基礎。

基礎打好,未來練功才不會內傷,這是最後決定放出來的原因。希望大家未來的功能練的順利。

下載:Knockoutjs基礎入門教材

Blog全文連結

  1. Knockout教學1 - Knockout.js與MVVM模式簡介
  2. Knockout.js教學2 - 清單與集合
  3. Knockout教學3 - Single Page Applications, SPA
  4. Knockout教學4 - 自訂繫結
  5. Knockout教學5 - 由伺服器載入與儲存資料

Knockout教學5 - 由伺服器載入與儲存資料

伺服器載入與儲存資料

現在,你已經瞭解MVVM模式如何為動態UI有組織地整理用戶端程式碼,以及knockout.js的可觀察物件(observables)、繫結(bindings)、相依追蹤(dependency tracking)是如何運作。

幾乎所有網站應用程式,都需要由伺服器取得資料和傳送修改的資料回去伺服器。因為Knockout.js 是一個純用戶端函式庫,它能非常有彈性運作在任何伺服器端技術(例如,ASP.NET、ASP.NET MVC、Rails、PHP…等),以及任何架構模式、資料庫…等。只要伺服器端程式碼可以傳送與接收JSON資料,就能呈現以下教學。

範例:工作清單

ViewModel:

function Task(data) {
    this.title = ko.observable(data.title);
    this.isDone = ko.observable(data.isDone);
}

function TaskListViewModel() {
    // 資料
    var self = this;
    self.tasks = ko.observableArray([]);
    self.newTaskText = ko.observable();
    self.incompleteTasks = ko.computed(function() {
        return ko.utils.arrayFilter(self.tasks(), function(task) { return !task.isDone() });
    });

    // 行為
    self.addTask = function() {
        self.tasks.push(new Task({ title: this.newTaskText() }));
        self.newTaskText("");
    };
    self.removeTask = function(task) { self.tasks.remove(task) };
}

ko.applyBindings(new TaskListViewModel());

從ViewModel定義我可以看出來這是一個工作清單,Task物件有抬頭與是否完成。TaskListViewModel物件清單新增、刪除與完成等處理。讀者現在應該已經具備看懂以上程式碼的能力。

View:

<h3>工作</h3>

<form data-bind="submit: addTask">
    新增工作: <input data-bind="value: newTaskText" placeholder="需要做些什麼?" />
    <button type="submit">新增</button>
</form>

<ul data-bind="foreach: tasks, visible: tasks().length > 0">
    <li>
        <input type="checkbox" data-bind="checked: isDone" />
        <input data-bind="value: title, disable: isDone" />
        <a href="#" data-bind="click: $parent.removeTask">刪除</a>
    </li> 
</ul>

你有 <b data-bind="text: incompleteTasks().length"> </b> 個未完成的工作。
<span data-bind="visible: incompleteTasks().length == 0"> - 現在是啤酒時間 !</span>

以下是此範列使用的CSS:

ul { list-style-type: none; margin: 1em 0; background-color: #cde; padding: 1em; border-radius: 0.5em;  }
ul li a { color: Gray; font-size: 90%; text-decoration: none }
ul li a:hover { text-decoration: underline }
input:not([type]), input[type=text] { width: 30em; }
input[disabled] { text-decoration: line-through; border-color: Silver; background-color: Silver; }
textarea { width: 30em; height: 6em; }
form { margin-top: 1em; margin-bottom: 1em; }

花點時間先玩一下這個範例,新增、刪除、完成一些清單內容。

Knockout教學4 - 自訂繫結

繫結(Bindings)

在Knockout.js來解釋MVVM,繫結是什麼內容要加入你的View與ViewModel。繫結是一媒介,它會雙向執行更新:

  • 繫結通知ViewModel改變且對應地更新View的DOM
  • 繫結截取DOM事件且對應地更新ViewModel屬性

Knockout.js有一套靈活和全面內建的繫結(像是text、click、foreach繫結等),但這不意味就此停止,你也可以使用少數程式碼來建立自訂繫結。在任何實際的應用程式中你會發現它有益來封裝常見的UI模式的繫結,這樣就能重覆的使用這些模式。

自訂繫結

例如,knockoutjs.com網站使用自訂繫結來封裝對話方塊,可拖動視窗,程式碼編輯器。

假設你有一個調查頁面的程式碼:

function Answer(text) { 
 this.answerText = text; 
 this.points = ko.observable(1); 
}

function SurveyViewModel(question, pointsBudget, answers) {
    var self = this;
    self.question = question;
    self.pointsBudget = pointsBudget;
    self.answers = $.map(answers, function(text) { return new Answer(text) });
    self.save = function() { alert('To do') };
                       
    self.pointsUsed = ko.computed(function() {
        var total = 0;
        for (var i = 0; i < this.answers.length; i++)
            total += this.answers[i].points();
        return total;        
    }, this);
}

ko.applyBindings(new SurveyViewModel("哪些因素會影響您的技術選擇?", 10, [
   "功能、相容性、定價-那些無聊的東西",
   "在駭客新聞上如何經常被提到",    
   "是否容易學習與使用",        
   "專案上的可信任度"
]));

View:

<h3 data-bind="text: question"></h3>
<p>請將 <b data-bind="text: pointsBudget"></b> 點平均分配至選項。</p>

<table>
    <thead><tr><th>選項</th><th>重要性</th></tr></thead>
    <tbody data-bind="foreach: answers">
        <tr>
            <td data-bind="text: answerText"></td>
            <td><select data-bind="options: [1,2,3,4,5], value: points"></select></td>
        </tr>    
    </tbody>
</table>

<h3 data-bind="visible: pointsUsed() > pointsBudget">你使用超過的點數,請刪減一些。</h3>
<p>你有 <b data-bind="text: pointsBudget - pointsUsed()"></b> 點可以使用。</p>
<button data-bind="enable: pointsUsed() <= pointsBudget, click: save">完成</button>

現在,我們要來改善此應用程式:

  • 使用動畫效果提示「你使用超過的點數,請刪減一些。」
  • 改善「完成」按鈕的樣式
  • 使用星星評分來換代下拉式選單給點數

Knockout教學3 - Single Page Applications, SPA

單頁應用程式

許多最現代、靈敏和基於Web的UI已超越傳統 Ajax,已成為單個頁面的應用程式(single page applications):訪客可以在單一的頁面巡覽像本地應用程序的速度。最著名的例子可能是GMail,但這些日子裡,它已經是一種越來越普遍的技術。

hash-based與pushState巡覽

這種應用程式使用hash-based或pushState巡覽以支援前進/後退手勢和書籤。如果讀者不熟悉這種技術的工作原理,請參閱以下簡短的解釋。

hash-based巡覽:訪問者的位置是儲存在URL hash的虛擬巡覽空間裡,hash符號的後面是URL的一部分(例如,/my/app/#category=shoes&page=4),每當URL hash有變動,瀏覽器不會發出HTTP請求來獲取新的一頁。相反的是,它只會把新的URL加入它的前進或後退歷史清單中,並在此網頁運作的腳本中公開並更新新URL hash。該腳本通知新URL hash和動態更新UI並顯示對應的項目內容(例如,”#category=shoes&page=4”代表鞋子目錄第四頁)。

這樣就可以在單個頁面應用程式中支援前進與後退按鈕巡覽(例如,按下”後退鍵”移至前一個URL hash),和有效地使用虛擬位置並可和書籤共同。

pushState是一個提供了另一種不同的方法來更改當前URL的HTML5 API,它將插入新的前進和後退和歷史項目,而不會觸發頁面載入。這不同於URL hash巡覽,因為不限於更新hash片段,可以更新整個URL。

範例:建置一個網頁郵件用戶端

你有一個簡單ViewModel,它們的內容只有保留資料夾清單。你的第一件工作是呈現它們在畫面上,而且讓它們是可選擇的。

你可以使用foreach繫結來呈顯資料夾清單,在View加入以上程式碼:

<!-- Folders -->
<ul data-bind="foreach: folders">
    <li data-bind="text: $data"></li>
</ul>

如果你現在執行應用程式,你應該有一個圓點清單(bullet-pointed)。這就是好的語意,但不是有吸引力。新增folders類別樣式到<ul>元素來改善:

<ul class="folders" data-bind="foreach: folders">

這使它看來起來更好。

Knockout教學2 - 清單與集合

清單與集合

我們經常在UI元素裡產生重覆的區塊,尤其是呈現清單時,使用者可以在其中新增和移除元素。knockout.js讓你很容易達成此目標,使用可觀察陣列物件(observable arrays)與foreach繫結。

訂位系統

接下來將會建置一個動態UI來訂座位與餐點,在ViewModel裡已經有:

// 姓名與餐點
function SeatReservation(name, initialMeal) {
    var self = this;
    self.name = name;
    self.meal = ko.observable(initialMeal);
}

// 初始化狀態
// 預約ViewModel
function ReservationsViewModel() {
    var self = this;

    // 可選擇餐點(與價格),不能編輯,應該來自伺服器。
    self.availableMeals = [
        { mealName: "Standard (sandwich)", price: 0 },
        { mealName: "Premium (lobster)", price: 34.95 },
        { mealName: "Ultimate (whole zebra)", price: 290 }
    ];    

    // 可編輯資料。
    // 使用可觀察陣列物件,內含兩筆初始化SeatReservation實體資料。
    self.seats = ko.observableArray([
        new SeatReservation("Steve", self.availableMeals[0]),
        new SeatReservation("Bert", self.availableMeals[0])
    ]);
}

ko.applyBindings(new ReservationsViewModel());
  • SeatReservation:一個簡單的JavaScript類別建構式,儲存姓名和餐點的選擇。
  • ReservationsViewModel:ViewModel類別,進行以下處理:
    • availableMeals: 提供餐點資料的JavaScript物件。
    • seats:初始化SeatReservation實體集合的陣列。注意,它是ko.observableArray,這是一個與正規陣列當相的可觀察物件。每次新增或移除項目時,意味著它可以自動觸發ui更新。

ViewModel準備好了之後,以下是預設的View:

<h2>座位預約</h2>

<table>
    <thead>
        <tr>
        <th>姓名</th><th>餐點</th><th>額外費用</th><th></th>
        </tr>
    </thead>
    <!-- Todo: 在tbody產生主體 -->
    <tbody></tbody>
</table>

現在<tbody>還沒有內容,更新<tbody>元素使用foreach繫結,它將呈現位於陣列裡的每個元素:

<tbody data-bind="foreach: seats"></tbody>

我們指定可觀察陣列元素seats來與foreach繫結關聯。然後補充一些<tr>元素以呈現每一個項目:

<tbody data-bind="foreach: seats">
    <tr>
        <td data-bind="text: name"></td>
        <td data-bind="text: meal().mealName"></td>
        <td data-bind="text: meal().price"></td>
    </tr>    
</tbody>

注意,因為meal屬性是一個可觀察物件,前篇說明過,讀取或寫入可觀察物件的值,必須當成函式呼叫。所以必須寫成meal().price來取得次屬性的值,而不是meal.price。

執行應用程式,你應該可以看到簡單關於座位預約的表格資訊。

foreach是流程控制繫結一個份子,包含有foreach、if、ifnot和with。這些使能夠構建任何種類的反覆運算(iterative)、條件運算或或基於動態ViewModel的巢狀UI。

Knockout教學1 - Knockout.js與MVVM模式簡介

Knockout.js與MVVM模式簡介

本篇教學會教讀者使用knockout.js的Model-View-ViewModel(MVVM)模式建立網頁UI的基礎知識。

讀者將學習如何定義UI外觀使用Views和宣告式繫結(declarative bindings)。它的資料和行為使用ViewModels和observables,和如何一切都保持在同步中自動由Knockout.js的相依追蹤(dependency tracking)(即使有任意鏈結(chain)的資料)。

在View使用繫結

下面,擁有一個包含個人資料的ViewModel。

// 這是一個簡單的ViewModel物件
function AppViewModel() {
    this.firstName = "Bert";
    this.lastName = "Bertington";
}

// 啟用Activates knockout.js
ko.applyBindings(new AppViewModel());

App物件包含兩個屬性,firstName與lastName。ko.applyBindings()是第一行knockout.js的程式碼,ko長knockout.js的關鍵字,applyBindings()方法是指定要繫結至那個ViewModel物件。

在View(專指呈現UI所在的地方,通常是指HTML)裡呈現個人資料,現在只呈現”todo”:

<!-- 這是View,HTML定義如何呈何UI -->
<p>姓: <strong>todo</strong></p>
<p>名: <strong>todo</strong></p>

修改View裡的<strong>元素,新增data-bind屬性來呈現個人名稱:

<p>姓: <strong data-bind="text: firstName"></strong></p>
<p>名: <strong data-bind="text: lastName"></strong></p>

data-bind屬性讓Knockout.js可以讓你以宣告方式將DOM元素與ViewModel屬性產生關聯。使用text繫結分配文字給DOM元素。

就這樣,我們完成了第一個有View有ViewModel的knockout.js網頁。

讓資料可編輯

當然,我們不限於呈現靜態資料。我們可以使用value繫結以及一些HTML元素,例如,<input>元素,使資料可以編輯。在View裡新增以下標籤:

<p>姓: <input data-bind="value: firstName" /></p>
<p>名: <input data-bind="value: lastName" /></p>

重新執行應用程式。我們已經可以編輯資料,編輯後沒有發生什麼事。當然,我們希望發生一些事…

你的Visual Studio 2012是灰色還是黑色?

你的Visual Studio 2012是灰色還是黑

如果各位有注意我的文章,Visual Studio 2012 RTM 8/15開放下載時,我的標題使用「VISUAL STUDIO 2012 RTM(正式版)黑黑黑推出」,我是使用「黑黑黑」,後來又寫了「修改VISUAL STUDIO 2012預設選項,增加我的開發效率」,今天因為無法為專案加專案又寫了「MVC專案加MVC專案注意事項」,後來Alex Lee與小朱一直幫我找問題,也真找出問題,原來是Visual Studio 2012預設選項沒有勾選「永遠顯示方案」,所以造成「專案無法加入專案」的正常結果,而不是Visual Studio 2012的問題,小細節我一直沒注意到。但在修改完「永遠顯示方案」按下「套用」那一瞬間,我的Visual Studio 2012不知道為什麼突然變成「全黑」畫面。讓我嚇了一跳,發生了什麼事?

我這才發現,我之前的Visual Studio 2012是灰色的不是黑色的。(各位可以參考我前面的抓圖,全都是灰色的)

還原Visual Studio回到初始值

如果各位和我一樣無聊,可以和我這樣做。

cd "\Program Files (x86)\Microsoft Visual Studio 11.0\Common7\IDE"
devenv.exe /resetuserdata

重新啟用Visual Studio 2012,這樣你就會得到同安裝後一開始設定Visual Studio 2012的畫面。

vs2012 預設環境設定

因為我現在都是寫ASP.NET MVC,所以我選擇「Web程式開發(僅程式碼)」。在我的電腦,現在是灰色。

[VB]在ASP.NET MVC專案裡新增另一ASP.NET MVC專案時的注意事項

WebForm專案內新增WebForm專案

webform專案內新增專案

以前我們在開發ASP.NET Webform專案時,可以直接透過【檔案 | 加入 | 新增專案】來新增另一專案到方案總管中,但一模一樣的操作在ASP.NET MVC並不成功。

ASP.NET MVC專案內新增ASP.NET MVC專案

asp.net mvc專案內新增專案

上圖很簡單,當我們要在MVC專案內加入新專案時,步驟同Webform操作,會如現以下圖示:

增加第二個mvc專案出現錯誤

這讓我一度以為是Bug,但看起來又不像。

修改Visual Studio 2012預設選項,增加我的開發效率

增加我的工作效率

每個人的習慣不同,到手的東西沒有客製化一下實在有許多不習慣的地方,以下是我個人在Visual Studio 2012裡修改【選項】預設值的一些參考,列出來給大家參考一下,有些警告預設是不提示,雖然顯示警告當下是影響工作效率的,但和後面要花費Debug的時間成本相比,我還是覺得警告是增加工作效率的有效方法。

修改Visual Studio選項

  1. vs2012 vb預設值修改。

    Visual Basic的使用者,請參考MSDN的說明「Option Strict 陳述式」,建議是開啟Option Strict On選項,以利早期發現錯誤。不過程式變成要寫的非常嚴謹,看個人吧。(在網頁開發上還是使用Off就好><")

  2. vs2012 字型和色彩修改

    老人家眼睛不好,大小我是設14,字型看個人吧!

    我們twMVC的開國功臣之一的Demo,看到我的圖片後,非常好心的提供我一組金光閃閃的字型,使用後讓眼睛非常「舒服」,也推薦給大家,如果你看Code的時間比看女朋友和老婆還多,大推給各位。詳情請參考「程式設計師該用的字型

  3. vs2012 回復時間修改

    這要看你能接受多少時間的程式碼損失,時間設太短常常會有打程式碼打到一半"鈍"一下,設太長又不敢保證電腦軟硬體都天天正常,我是改10分鐘,這也是看個人。

  4. vs2012 CSS格式化修改

    個人習慣CSS用半展開,色彩選擇器是新增選項,我看到以十六進位居多。

  5. vs2012 css驗證修改

    預設不啟用CSS 3.0偵測錯誤,建議可開啟。

Windows XP將死

洪流不會停止

時代的洪流不會停止。 你可以選擇止步不前; 你可以選擇順流而下; 你可以選擇逆流而上; 每一種都是你的選擇。

從Dos 6.22說起

老弟有辛,摸過DOS 6.22、Windows 3.1,這代表我年紀大了此。

老弟有辛,看過Windows 95與IBM OS/2的大戰。老實說,IBM OS/2比Windows 95好很多,但結果不是誰比較好重要,而是市佔率誰比較高重要。

從Windows 95之後的,Windows Me、Windows XP、Windows Vista、Windows 7,至Windows 7為止,就作業系統而言,我是看到了一個很有趣的現象。微軟在作業系統方面,雖然從Windows 95之後就打片天下無敵手,但不知是不是把所全世界的用戶當成白老鼠,然後盡情的做實驗,微軟在作業系統的成就,不是大好就是大壞。
  • Windows 3.1讓DOS用戶眼睛為之一亮,原來玩電腦不是背指令,用一個叫滑鼠的東西,點一點也是會動。
  • Windows 95…練入侵功夫的好系統,沒什麼安全性可言。藍白畫面的始組,我在Windows 95看過的藍白畫面比Windows 3.1多很多。不過最少Windows 95在市佔率是非常成功。
  • Windows 98/98 SE,藍白畫面之多,有一個笑話,如果一次藍白畫面微軟就要付給消費者一美元的話,那微軟可能早就破產了。不過,它是個Not Good, Not Bad的作業系統,它改良自Windows 95。市佔率是高,但那是因為消費者沒其他選擇。我就不相信,早期版本的Linux沒有IT背景的人裝的起來。
  • Windows Me,作業系統第一次大壞的代表。
  • Windows XP,作業系統第一次大好的代表。雖然監白畫面依然不斷,安全性普普通通,經過三次Service Pack的洗禮後驅向平穩,也是目前微軟作業系統裡壽命最長的一代宗師。(Windows XP裡面住著一隻怪物,讓網頁程式設計師恨之入骨的IE6,就是Windows XP太成功,想不理IE6都不行,恨呀!)
  • Windows Vista,第一代64位元先鋒,號稱安全性最高的作業系統,也是讓使用者最火大的一代作業系統。以資訊人員的角度來看,安全性重於一切,Fine。以使用者角度來看,麻煩、難用、肥大的怪物,最火大的事是X64的驅動程式很難找。第二次大壞的代表,因為市場接受度不好。
  • Windows 7,個人認為是微軟最目前最好的一套作業系統,在執行效能、安全性、驅動程式…等各方面取得平衡,第二次大好的代表,本應該很有機會成為取代Windows XP的代表人,但市場變化太快,以前一套產品買十年,現在一套產品可以買三年就已經偷笑。

安裝或更新Visual Studio 2010 for ASP.NET MVC 4最新版本(2012/8/13)

Visual Studio 2012 RTM之後

隨著Windows 8 RTM與Visual Studio 2012 RTM之後,相信陸續慢慢會有更多技術在不久的將來都會RTM。和我吃飯傢伙有關的當然是ASP.NET MVC相關。ASP.NET MVC團隊在2012/8/13已經有對ASP.NET MVC 4更新,主要是針對Visual Studio 2010的更新,比Visual Studio 2012還要早,各位之前如果有在Visual Studio 2010安裝過ASP.NET MVC 4,或現在想玩ASP.NET MVC 4但無Visual Studio 2012,都可以下載回去安裝在Visual Studio 2010開發ASP.NET MVC 4,不會和Visual Studio 2012裡的ASP.NET MVC 4有差異。

ASP.NET MVC 4 Version

Visual Studio 2012 RTM(正式版)黑黑黑推出,你download了沒


關於Windows 8 RTM與Visual Studio 2012 RTM

美國時間8/15日對於開發者是個大日子,因為有兩大產品Windows 8 RTM與Visual Studio 2012 RTM。(說好的Windows Server 2012呢?)前一晚,MSDN網站應該有感受到強的F5 DDoS攻擊,說好的時間一到,全世界的開發者時按著F5更新著網頁,希望看到Windows 8與Visual Studio 2012正式版的出現。我最長等過約40多秒MSDN網站才有反應。因為還有工作在進行,我無法馬上安裝Windows 8 RTM版本,考慮到,如果Windows 8安裝上去,如果無法馬上可以工作,這就代誌大條了!心有不甘,想想,那就退一步,先把Visual Studio 2010由RC升為RTM,這不過分了吧。

RC插曲

在使用Visual Studio 2012 RC的過程裡,Visual Studio 2012 RC版本相當穩定,小Bug有,但不是會影響工作的Bug。不過就在昨晚出現了史上第一次的:

vs2012 rc error

另一位MVP Sky也和我同一天碰到那史上第一次的停止運作。合理懷疑,RC版裡有彩蛋,時間一到就停止運作,這樣開發者才會用最快的時間更新至RTM版本。

Visual Studio 2010 正式版安裝

  1. 第一步:沒有RC字樣
    vs2012 rtm setup 01
  2. 第二步
    vs2012 rtm setup 02
  3. 第三步
    vs2012 rtm setup 03
  4. 第四步:重開機第一次
    vs2012 rtm setup 04
  5. 第五步:安裝完成,重開機第二次
    vs2012 rtm setup 05

Windows Essentials 2012安裝失敗for Windows 7篇

Windows Essentials 2012安裝失敗for Windows 7篇

Windows Essentials 2012安裝錯誤

上週得知Windows Essentials 2012已經推出,今日本想由Windows Essentials 2011升級至Windows Essentials 2012,誰得知不管我怎麼試,就是會出現上圖的錯誤。差點以為要進入無MSN可用的日子了。

黑大的一篇文

實在試不出方法,也上去Answers去尋求高手解答時,不到幾分鐘的時間,突然黑大跑出一篇文「Windows Live Essentials 2012安裝失敗」,這是天意嗎!老天有眼!

結果一看一試,人家是Windows 2008 R2的解決方法,我的Windows 7已經是最高權限管理員。正在失落之際…就是那個光。

Windows 7也有Administrator

還好平常有讀書。

在Windows 7剛完成安裝時,會要求我們設定一組常用的登入帳號,而且登入帳號是系統管理員,這讓我有了錯覺。其實在Windows 7之內還是有Administrator帳戶的存在,只是被隱藏起來,黑大的那篇文章給了我靈感,難到一定請出從星際大戰裡退引江湖的黑暗絕地大師嗎。沒辦法,死馬當活馬醫。

JavaScript大量元素選取器效能大PK(含HTML5)

何謂大量元素選取器

這裡所談的JavaScript大量元素選取器是指getElementsByTagName()之類的元素選取器,此類元素選取器與getElementById()不同,getElementById()只回傳一個元素物件,而大量元素選取器會回傳一個陣列物件,陣列物件中包含所有合乎規則的元素內容。在撰寫HTML5程式碼時,心裡面突然有個念頭,這些大量元素選取器(含HTML5才提供的功能)在走訪一個又大又深DOM時,效能如何?

HTML 4主角有:getElementsByName(),getElementsByTagName()

HTML 4派出兩位主角分別是getElementsByName()與getElementsByTagName()。

  • getElementsByName(屬性名稱):以元素屬性 name="value" 的value來取得所有符合名稱的元素集合。
  • getElementsByTagName(元素名稱):以元素名稱,例如"p",來取得所有p元素集合。

HTML5主角有:getElementsByClassName(),querySelectorAll()

HTML5派出兩位主角分別是getElementsByClassName()與querySelectorAll()。

  • getElementsByClassName(類別名稱):以元素屬性 class="value" 的value來取得所有符合名稱的元素集合。
  • querySelectorAll("CSS Selector"):直接透過CSS選擇器規則來進行選取,符合CSS選擇器規則(支援CSS3的虛擬類別)的元素將被選取。

又深又長的DOM

以下JavaScript程式要建立一個又深又長的DOM,以增加走訪DOM的難度。

// 先在頁面上新增一個
元素 var test = document.getElementById("test"); for (var i = 0; i < 1000; i++) { var d = document.createElement("div"); d.setAttribute("id", "div" + i); d.setAttribute("class", "div100") for (var j = 0; j <= 1000; j++) { var para = document.createElement("p"); para.setAttribute("class", "sale"); para.setAttribute("name", "sale"); var txt = document.createTextNode(j); para.appendChild(txt); d.appendChild(para); } // 讓層數加深 if (i === 0) { test.appendChild(d); } else { var dp = document.getElementById("div" + (i - 1)); dp.appendChild(d); } }

每一個div裡有1001個p元素,第1002個是div元素,再包1001個p元素,第1002個是div元素...會有1000層的深度及1001000個p元素。

// 測試取得大量元素的時間
var star_time = new Date();
var select_para = document.getElementsByName("sale");
//var select_para = document.getElementsByTagName("p");
//var select_para = document.getElementsByClassName("sale");
//var select_para = document.querySelectorAll("p");
//var select_para = document.querySelectorAll(".sale");
var end_time = new Date();

console.log("取得p元素個數: " + select_para.length);
console.log("Start: " + star_time.getMinutes() + ":" +
                        star_time.getSeconds() + ":" +
                        star_time.getMilliseconds() +
                        ", time: " + star_time.getTime());
console.log("End: " + end_time.getMinutes() + ":" +
                      end_time.getSeconds() + ":" +
                      end_time.getMilliseconds() +
                      ", time: " + end_time.getTime());

這邊讓我偷懶一下,用偷懶的寫法。這樣就可以取得每個大量元素選取器的執行時間。

升級MS SQL Server 2008 R2到MS SQL Server 2012注意事項

升級MS SQL Server 2012注意事項

用了一些時間,將MS SQL Server從2008 R2升級到2012版本,中間只碰到一點小問題,記錄一下。

從舊版本升級絕大部分都是在按【下一步】,有個地方產生錯誤:

Reporting Services Error

圖示那兩個服務是Report Service,在MS SQL Server 2008 R2中,服務是被我停用,所以第一次進行這一步(第15個下一步)時,出現紅色X圖示,處理方式也很簡單:

  1. 先按【上一步】
  2. 開啟MS SQL Server 2008 R2的【組態管理員(Sql Server Configuration Manager)】
  3. 啟動【SQL Server Reporting Services】服務
  4. 回安裝程式按【下一步】

此時,如果你再把【SQL Server Reporting Services】停用,回安裝程式按【上一步】【下一步】,都會得到正常綠色勾勾。整個升級過程費時半個小時以上,建議升級前把所有在【組態管理員(Sql Server Configuration Manager)】中將所有名稱【MSSQLSERVER】執行個體的服務全部啟用,這樣應該就不會出現我碰到的錯誤訊息。

另外注意,如果你同時在本機有安裝【MS SQL Server Express】版本,不同執行個體必須另外再執行一次升級作業,也就是說,【MSSQLSERVER】執行個體需要執行一次升級作業,【SQLEXPRESS】執行個體需要再執行一次升級作業(需另外下載Microsoft SQL Server 2012 SQLEXPRESS的進行升級安裝程式)。

MS SQL Server Version

在近二十步的【下一步】加一個小小【上一步】,MS SQL Server 2012降臨,版本號11.0.2100.60。

話說,MS SQL Server 2012 Service Pack 1都快出來了!XD

補充:附加範例資料庫

如果可以到http://msftdbprodsamples.codeplex.com/releases/view/55330下載到最新的AdventureWorks2012 Data File,下載回來是一個AdventureWorks2012_Data.mdf(193,536KB)檔案,你必須用附加方式來加入資料庫中,你可以先將mdf檔案移至C:\Program Files\Microsoft SQL Server\MSSQL11.MSSQLSERVER\MSSQL\DATA下。因為我們是採用升級的方式,所以會沒有DATA此目錄,請先自行建立。

  1. 開啟SSMS,登入
  2. 選擇【資料庫】→【附加】
  3. 選擇【AdventureWorks2012_Data.mdf】所在路徑
  4. 刪除【記錄檔】
    移除記錄檔
  5. 再來,你應該會又碰到錯誤訊息,就算你把SSMS以系統管理員身份執行、或修改登入帳戶權限,都還是會出現無法附加的錯誤訊息。
  6. 原因很簡單,因為我們是使用升級,而且我們DATA目錄是自建,所以少了必要的權限:
    MSSQLSERVER權限不足
  7. 將DATA目錄設定給【MSSQLSERVER】帳戶→【完全控制】權限
  8. 重新按確定即可正確附加

機師王丰與流浪狗的故事

小花以前也流浪過

我們家的愛犬小花,前身就是流浪狗。牠因車禍導致左眼失明後主人棄養。後來因為一些事件,讓我們收養了牠。算算日子,小花成為我們家的一分子已經近8年的時間。日前於電視新聞上到在報導一位機師王丰,他花費大量的時間與金錢從事流浪狗的收養與照顧工作。那非常短的時間裡,他就成為我的偶像。新聞報道的時間太短,我想要多瞭解一些王丰的故事,二不的選擇當然是網路。

王丰說浪流狗的故事

PeoPo 公民新聞

影片來源:王丰說流浪狗的故事 駕駛艙獨家報導

PeoPo 公民新聞

影片來源:王丰真情流露 暢談流浪狗故事

新聞報導:熱血機師 散百萬救流浪狗

王丰的故事感動了我,我也希望能感動你。流浪狗的問題在於棄養,還有這些被棄養流浪狗沒有節育。突然有個想法,為什麼像陳樹菊這樣的善人,可以發光到全世界,而像王丰這樣的人不行呢?

P.S 影片中說他們有FB,我沒有找到,知道的人可以通知我一聲。感謝。

從EverNote的求職需求看未來開發人員應有的技能

EverNote的求職需求

此篇靈感來自Johnny.Net的Plurk,Johnny.NET貼了一個EverNote的求職連結,從中我們可以看到一些趨勢,我簡單做個整理,各位開發者做個Check List,其中你擁有了幾項技能。

EverNote技能需求

EverNote 職位職責

EverNote技能需求職責

這裡的關鍵點有幾個:

  1. HTML5/CSS/JavaScript的應用程式

    這裡談的是應用程式,不單只是網站網頁,我會強調在application app。

  2. prototype(原型),我猜這是指JavaScript裡的原型,通常使用到prototype都已經是JavaScript裡的物件導向(OOP)。以前JavaScript可以隨便寫寫,能動就好,現在連JavaScript都開始走物件導向(OOP)。

EverNote 技能最低需求

EverNote技能最低需求

這裡的關鍵點有幾個:

那些年,我們應該瞭解的 JAVASCRIPT 小知識 - 函式 function

JavaScript 是需要被瞭解

前一篇,我們針對了物件, 數字, 字串, 陣列, 迴圈提供了一些小知識,續前篇,我們再談一些關於函式的小知識。

函式小知識

函式(function)可說是 JavaScript 裡頑皮又最有趣的…(函式)物件。還記的「萬物皆物件,萬物皆可放」這兩句話嗎。

具名函式

function add(x, y) {
    var total = x + y;
    return x + y;
}

這是一個非常完整的函式,正式名稱叫具名函式,但一般我們簡稱的函式就是具名函式:

  1. 名稱,name
  2. 參數,x 與 y
  3. 區域變數,total
  4. 運算,x + y
  5. 回傳值,return

目前為止都是中規中舉,函式是拿來呼叫的,所以我們來不正常呼叫吧!

// 傳入兩個 undefined
// undefined + undefined = NaN (就不是整數呀)
document.writeln(add());              // NaN 
document.writeln(add(5, 9, 999));     //  14,函式忽略第三個參數

第二個才是好玩的地方,JavaScript 對於多傳入的參數給省略了,但其實不是,因為我們可以在函式之內存取一個 arguments 的變數,arguments 內有傳遞給函式的所有值。這與一般程式語言的用法不同,一般程式語言的函式,你定義幾個參數就是能傳入幾個參數,頂多是依參數的不同設計為重載,但你能傳遞的參數個數還是被函式所限制,JavaScript 透過 arguments 變數的幫忙,可以把所有函式設計成接受無限的傳入值。讓我們改寫原始函式:

function avg() {
    var sum = 0;
    // 透過 arguments.length 取得要加總的次數
    for (var i = 0, total = arguments.length; i < total; i++) {
        sum += arguments[i];
    }
    return sum / total; // 平均值
}

document.writeln(avg(1,3,5,7,9,2,4,6,8,10));    // 5.5

用起來好像很不錯,但 arguments 變數有一個問題,就是它只接受用 ,(逗點)分隔的參數值,所以如果我們還想要處理來自陣列的值,我們就要再寫一個函式來處理陣列:

// arr 為陣列
function avgArray(arr) {
    var sum = 0;
    // 透過 arr.length 取的要加總的次數
    for (var i = 0, total = arr.length; i < total; i++) {
        sum += arr[i];
    }
    return sum / total;
}

var arr = [2,4,6,8,10,1,3,5,7,9];
document.writeln(avgArray(arr));    // 5.5

明明是一樣的事,為什麼要做兩分工呢?還好,函式也是物件,要讓 arguments 變數也可以接受陣列值,最要一點小技巧,我們必須使用到一個函式物件所提供的方法 apply()

// Function.apply(thisArg, arrayArg);
// thisArg, 物件內部的 this 會等於 thisArg;
// arrayArg,傳入一個陣列的參數
var arr = [2,4,6,8,10,1,3,5,7,9];
document.writeln(avg.apply(null, arr)); // 5.5

這邊我們先關注在 ArrayArg 這個參數就好,這行 avg.apply(null, arr); 翻譯成白話就是「執行 avg 函式物件,而且幫傳入二個參數,一個給 this 使用,另一個是陣列的參數」,經過如此改良之後,arguments 變數就看得懂傳入陣列是參數。或許這樣想,經過 Function.apply() 的幫忙,它把我們要傳入的陣列 [2,4,6,8,10,1,3,5,7,9] 變成 2,4,6,8,10,1,3,5,7,9 (去除陣列實字符號[])然後傳入。

還有一個函式物件方法為 call(),用法上與 apply() 相似,差異只有第二個陣列參數,我們必須一個一個傳入,例如:avg.call(null, 1,3,5,7,9,2,4,6,8,10)

如何省下你的月租費與通話費,然後存起來或花更多XD

從打往中國的一通電話說起

我有一位長期在大陸深耕的好友(可參考:什麼是好朋友一文),近年來,因為他都在大陸發展,在台灣的時間很少,印象中只有護照或證件之類要過期,才會飛回台灣一趟,飛回又時間緊湊,算算我們應該已經超過十年沒碰到面了。最近,透過 Email 他向我問及台灣的教育情況,他原來是有意想送小孩回台灣受教育,但寫 Email 實在太費心費力,Email 寫著寫著突然想到,我們家有裝 070網路電話,號稱打國際電話很便宜,我就把 Email 內容刪除,然後寫了一句:等我電話吧!

070網路電話打大陸費用

以下由電話費省錢達人 KKBruce 為你介紹如何省下你的高額電話費,然後你可以存起來增加戶頭裡的數字,或拿去花,再花更多錢買更多東西 XD。

家用電話改申請070網路電話

只要你家裡有網路,都應該去申請一組070網路電話來當家用電話。目前台灣已經有多家業著順利開通,讀者可自行請Survey相關月租及內容,我個人是使用遠傳070家用節費盒。好處是:

  1. 1省每月月租費

    申請免月租方案,即有撥出才有算錢,如果一整個月都沒有撥出,那就不用錢。[註]我是基本方案月租$90元,但每月回饋$90元,即免月租方案。用專業術語稱「實打實付」,真正打多少算多少。

  2. 2省通話費

    比起使用中華電信的市內電話,不管打市話、長途、行動、國際(如上圖)都便宜許多,現在只要是不急的電話,能回家再打的電話,我都是回家再打。

  3. 3省同家業者070互打免費

    因為是070是網路電話,和使用Skype、Line、WhatApp、MSN、QQ…等軟體去互通話是一樣道理。

以上圖而言,打了約45分鐘,我是打到大陸的手機上,算一算1分鐘不到2元,突然覺得,國內的電信真的是爆利。

demo.tc 分享 - 版本控管以 SVN 為例

人因分享而偉大

感謝 demo.tc 整理分享此圖。我自己使用過 XMind 軟體整理製作 JavaScript 資料,Blog 的文章一多真的不易整理,想要入門版本控管者,我大力推薦。

那些年,我們應該瞭解的 JavaScript 小知識 - 物件, 數字, 字串, 陣列, 迴圈

JavaScript 是需要被瞭解

JavaScript 是一種非常方便就能上手及使用的程式語言,但真正瞭解 JavaScript 就不多了。借由 HTML5 的推助,JavaScript 再一次站上主角,第一次是 XMLHttpRequest 的 AJAX 應用,而 HTML5 滿滿的 API 全部都必須使用 JavaScript 撰寫來實現。我們必須更進一瞭解 JavaScript,而不只是簡單帶過。

這一篇會介紹 JavaScript 裡一些小知識,包含物件,數字,字串,陣列,迴圈等。

萬物皆物件

在 JavaScript 的世界裡,除了非常少數核心部分,廣義而言,可以說萬物階物件(Object),我們常看和不常看的型態都是一種物件,例如:

  • Number (數字是物件)
  • String (字串是物件)
  • Boolean (布林是物件)
  • Object (物件是物件)
    • Function (函式是物件)
    • Array (陣列是物件)
    • Date (日期是物件)
    • regExp (正規表達式是物件)
  • Null (空是物件)
  • Undefined (未定義是物件)
  • Error (錯誤是物件)

好多物件,這和我們學習的正規程式語言有很大差異,但沒關係,當你在學習 JavaScript 時,如果有卡卡的,看不懂的地方,回想這句話:「萬物階物件」,用物件的角度來看事情,先不要管它是個什麼東西,它就物件,很多時候問題會簡單很多。

數字小知識

第一件事,在 JavaScript 中沒有整數這件事。在規範中 JavaScript 數字是一個「雙精確度 64位元格式 IEEE745 值(double-precision 64-bit binary format IEEE 754 value)」,所以在做小數點大數運算時必須小心。例如,「0.1 + 0.2」或「一個 16位數或超過 16位數」的數值。

第二件事,在進行 parseInt() 函式將字串轉成整數時,一定要指定第二個參數,第二個參數指定進位數

var a = 0.1 + 0.2;
document.writeln(a); // 0.30000000000000004

var b = 9999999999999998;
document.writeln(b);

var c = 9999999999999999;
document.writeln(c); // 10000000000000000 

var d = parseInt("014");
document.writeln(d); // 12,果然有問題

var e = parseInt("014", 10);
document.writeln(e); // 14,你在貪污呀,抓到了吧

var f = parseInt("014", 16);
document.writeln(f); // 20,這是洗錢手法之一

以上程式碼純屬程式,沒有其他用意。@_@

軟體測試(Software Testing)超快速入門筆記

測試的目的

軟體測試(Software Testing)是一個大題目,不過其目標都是一樣的,例如,提早發現缺陷,提高軟體品質,產生可靠的程式碼…等。軟體測試的方法論中,測試的範圍可大可小,以程式碼的測試為例,小的單元測試(Unit Testing)、大的整合測試(Integration Testing)。除了對程式碼進行相關測試外,我們還可以對整個網站、資料庫、I/O … 等進行壓力測試。測試可是一門大學問,當然不可能在這小小一篇裡寫完,這一篇只是前言,讓大家對於測試有個初步的瞭解,先有初步瞭解,接下來再介紹 ASP.NET MVC 裡單元測試(Unit Testing)。

手動測試

  1. 了解需求
  2. 手動進行基本驗證

例如,我們寫了一段驗證 Email Address 的 Regular Pattern,我們很順的把網頁執行起來,開始在表單的 Email 欄位亂打一通,【abc@abc】、【abc@abc.】、【abc@abc.abc】 … 看不正常資料是否能通過驗證。很多寫的不好的 Regular Expression 到第三個 abc@abc.abc 就 … 過了。這樣對嗎?這就稱【手動測試】,我們日常的 Debug 就常做這種事,但你能瞭解或記得多少組的測試組合呢?

自動化測試

  1. 介面測試(UI Testing)
  2. 單元測試(Unit Testing)
  3. 整合測試(Integration Testing)

簡單說就是透過程式軟體去進行測試,沒有人的介入去進行測試。舉例來說,字母o與數字0,如果我不要加【字母 | 數字】只單純打【o/0】,你分得出來嗎那個是"ㄛ"那個是"零"嗎?我們常用密碼組合中有一組是 w0rd,透過程式 w0rd 是字串,對就是對,透過人工加老花眼,很容易輸入為 word。自動化測試就是要去除人工介入而可能產生的錯誤,進而提升測試的可信度可靠度例如手動測試的例子中,我們的測試資料有一組 abc@abc.c0m (c零m),驗證程式要能正確抓出錯誤才是對的,結果很順手的輸入成 abc@abc.com,然後跑去罵寫這支 Regular Expression 的人,事後又模擬出不來(又輸入了正確的測試資料),然後被冠上"你的程式一定有Bug."的臭名,青天大人這冤不冤?

Visual Studio 2012 RC 中讓撰寫JavaScript與.NET程式碼使用相同自動完成鍵

從HTML5 API說起

近來,把許多心力放在 HTML5 的學習使用上,學過 HTML5 的人都知道,如果只是語意標籤(article, section, nav, footer),幾分鐘就可以學完,就幾個語意標籤如何造成整個網路上的大浪潮?當然不可能,重點在HTML5 背後整個大量且實用的 API,而這些 API 有非常大量的都是透過 JavaScript 實作出來,也就是說,你必須透過 JavaScript 來調用這些 HTML5 API 來使用。問題就在這裡,我在 Visual Studio 裡寫 JavaScript 的時間與機會大大增加。

撰寫 .NET Framework 的自動完成鍵

我們在 Visual Studio 寫 .NET Framework 程式碼,應該很少人會把每行每字都完整打出來,絕大部份都是透過 IntelliSense 所提供的自動完成功能,例如,【 Dim a As inte 】應該就會跳出提示:

.NET Framework 程式碼 IntelliSense 功能

然後我們會按下【空白鍵, space】,來完成整個【Integer】這個關鍵字。這是我們非常習慣的程式碼撰寫方式。

撰寫 JavaScript 的自動完成鍵

我要先給 Visual Studio 2012 RC 拍拍手,這一版本真的是我目前為止使用撰寫 JavaScript 最好的工具。不過在 Visual Studio 2012 RC 裡寫 JavaScript 一直有問題困擾我,舉例說明,我輸入【 func

JavaScript 程式碼 IntelliSense 功能

我們很順就給它按【空白鍵, space】,結果是給你一個空白!變成了【 func 】(最後面是一個空白),而正確的使用方式是按【 Enter 或 Tab 】。

這兩個使用方式的不同步,常常讓我浪費許多時間,變成在寫 .NET 按 Enter,在寫 JavaScript 按 space,時常錯亂。是我人老手眼腦不協調嗎?想說,是否可以同步一下這兩個 IntelliSense 的使用方式。看了一下Visual Studio 2012 RC 裡的設定:

看起來也沒有特別可調整的地方。想說上 connect 反應一下好了,好久沒上 connect(沒bug上來做什麼) 好像有些不一樣了,多了一個【Submit Idea】,看起來是要區分【Bug】與【建議】,很好很好,我這應該不算 Bug,所以就到 Idea 寫個建議 (各位無聊可以上去幫忙投票,每人可以投三票,小弟英文不好,如有寫錯或表達不清的地方,請指教)。

解決撰寫 JavaScript IntelliSense 的問題

從MSDN 訂閱裡啟用Windows Azure雲端服務

主標題等於結論

本想開心的啟用 Windows Azure 雲端服務來試試那強大又彈性的功能。之前一直有注意 Windows Azure 方面的消息,在未開放台灣之前,先首你要想辦法生出一支能有外國門號的手機,因為 Windows Azure 雲端服務啟用的認證碼只發送特定國家的手機號碼,然後申請時還要保佑使用 Master Card 會通過,網路上有很多人在 MasterCard 這裡卡關。不過我不急,我不是玩家、作家…所以我一直想等台灣能申請再來使用就好。天不從人願,最後首次的啟用以失敗收場。

Windows Asure 雲端服務使用MSDN訂閱啟用

啟用之前,你可以先參考另兩位前輩的文章:

  1. 首先,你必須登入【MSDN訂閱網站】→【我的帳號】→【啟用Windows Azure】: 透過MSDN訂閱啟用Windows Azure雲端服務
  2. 點選【啟用 Windows Azure】轉向 Windows Azure 啟用網頁: 透過MSDN訂閱啟用Windows Azure雲端服務 From 台灣

    最高興的是看到"台灣"兩個字。

  3. 點選【下一步】進入【信用卡驗證頁面】: Windows Azure雲端服務信用卡驗證

    目前接受【VISA】、【MasterCard】的信用卡,小弟我剛好兩家都有,為了順利先選用【VISA信用卡】。

  4. 不接受就是不接受 @_@ 信用卡驗證失敗

    結果就是【VISA】、【MasterCard】都刷不過,依網路上其他人留言,官方客服回答說,Windows Azure雲端服務還未正式在台上式。人家想玩 Windows Azure 啦!><"

HTML5元素中區段內容(Sectioning Content)選用流程

什麼是區段內容?

學習 HTML5 的過程裡,最簡單也最常使用應該是語意標籤(Semantic Tag),它擴充了 HTML 4 的不足,也讓 HTML 4 頁面裡充滿 div 元素現象得以改善。我們一方面要面對的是,一方面對的的搜尋引擎。如果你不在乎搜尋引擎,那使用 HTML 4 或 HTML5 對你一點影響也沒有。反正你的網站使用 table 或 div 排版,對於只看內容的人而言,沒有差別。但又有很怪異的事,一堆結構不佳的網站(通常是用 table 排版,現在還是有很多網站還在用 table 在做 layout。 >.<"),又花錢在買網路廣告,買網路排名,買 SEO 服務!怪怪。

區段內容是 HTML5 裡提出比 div 更合適拿來設計排版的元素,例如,nav 元素就是拿來設計【巡覽列】,使用 <nav> 元素和 <div id="nav"> / <div id="sidebar"> 元素,很明顯 nav 在語意上有先天優勢,當搜尋引擎一來進,nav 元素內是巡覽內容,article 元素內是獨立的內容,section 元素是一區塊…等,不過當你實際使用時,常會有這裡應該用 article 還是 section 呢?也就是說,常有在一個地方好像可以有多個 HTML5 區段內容可選擇時,我要如何選擇呢?

區段內容的選擇

html5Doctor 網站裡提供了一份很好的參考資料:

HTML5 Element Flowchart 圖片來源:html5Doctor

下載 PDF:HTML5 Element Flowchart

這是一份很好的區段內容元素選擇流程圖。

區段內容元素選擇流程

以下就流程圖內紅色選擇條件進行解說:

SCSS 語法學習心得筆記

Sass - SCSS 語法初學

在上一篇【在 VISUAL STUDIO 撰寫 SASS(SCSS) 讓您快樂似神仙】中,我們完成了在 Visual Studio 裡開發 SCSS 的設定,這一篇主要是參考【Sass Reference】網站內容與【Sass & Compass: The future of stylesheets now.】簡報內容裡的程式碼做一些註解,未來查詢時方便自我取用。

SCSS 語法:Nesting Rules, 巢狀規則

就那麼簡單: {} 一層,{{}} 兩層,以此類推。在 SCSS 語法裡巢狀規則也很簡單,你就看包幾層的 {} 符號,那就是幾層。

巢狀規則 SCSS 範例

/* 巢狀規則1 */
/* article 與 border-top 一條規則 */
/* article 與 header 一條規則 */
article {
	border-top: 1px dashed #eee;
	header { margin-bottom: 1.5em; }
}

/* 巢狀規則2 */
/* article 與 header 一條規則 */
/* article 與 section 一條規則 */
article {
	header, section { margin-bottom: 1.5em; }
}

/* 巢狀規則3 */
/* article 與 >, ~, +, * 各一條規則(共 4 條規則) */
article {
	> h2 { border-top: 1px dashed #eee; }
	~ article { padding-top: 1.5em; }
	+ footer { margin-top: 0; }
	* { color: #000; }
}

/* 巢狀規則4 */
/* Parent Selector - & 參考父選擇器 */
/* a 一條規則 */
/* &:hover 一條規則 */
a {
	color: blue;
	&:hover { color: red; }
	display: inline-block;
	line-height: 1.8em;
}

/* 巢狀規則5 */
/* Parent Selector - & 新增內容至選擇器 */
/* article 與 h1 一條規則 */
/* .blog-index & 參考(&)父選擇器形成
	".blog-index article",.blog-index article 與 h1 一條規則
*/
article {
	h1 { font-size: 2.4em; }
	.blog-index & {
		h1 { font-size: 2em; }
	}
}

/* 巢狀規則6 */
/* Parent Selector - & 與 Modernizr 一起運作 */
/* button 與 backgroud 一條規則 */
/* .no-cssgradients & 參考(&)父選擇器形成
	".no-cssgradients button" 一條規則
	
*/
button {
	background: linear-gradient(#444, #222);
	.no-cssgradients & { background: #333; }
}

巢狀規則 SCSS 轉成 CSS

@charset "UTF-8";
/* 巢狀規則1 */
article {
  border-top: 1px dashed #eee; }
  article header {
    margin-bottom: 1.5em; }

/* 巢狀規則2 */
article header, article section {
  margin-bottom: 1.5em; }

/* 巢狀規則3 */
article > h2 {
  border-top: 1px dashed #eee; }
article ~ article {
  padding-top: 1.5em; }
article + footer {
  margin-top: 0; }
article * {
  color: #000; }

/* 巢狀規則4 */
a {
  color: blue;
  display: inline-block;
  line-height: 1.8em; }
  a:hover {
    color: red; }

/* 巢狀規則5 */
article h1 {
  font-size: 2.4em; }
.blog-index article h1 {
  font-size: 2em; }

/* 巢狀規則6 */
button {
  background: linear-gradient(#444444, #222222); }
  .no-cssgradients button {
    background: #333; }

父選擇器碰到子選擇器,就形成一條規則。碰到 &(參考) 就形成一條規則。例如以下 SCSS,

a {
	color: red;
	b {
		color: greed;
		c {
			color:blue;
		}
	}
}

產生的 CSS,

a {
  color: red; }
  a b {
    color: greed; }
    a b c {
      color: blue; }

a、ab、abc 一共三條,這樣清楚了嗎。

在 Visual Studio 撰寫 Sass(SCSS) 讓您快樂似神仙

Sass(SCSS)的認識

前陣子,透過 demo.tc 認識了正妹 compass.app 這套很棒的軟體。透過 compass.app 的介紹又認識了 Sass (這是辣媽,不信你連進去看),Sass 為 CSS 提供程式語言等級的功能。CSS 嚴格來說不算程式語言,它本身只是一堆樣式的設定,前後樣式一串一串起來成為串接樣式表,內容更是了無新意【選擇器 { 樣式: 樣式設定};】就這樣,CSS2 到 CSS3 只就增加更多的選擇器、樣式、樣式設定。不過,就像樂高積木一樣,雖然只是積木,但可以千變萬化,這才是它利害的地方。

單純就 *.css 檔案而言,就組織與維護方面實在很弱。不過有了 Sass 之後情況就不同了。Sass 是延伸 CSS3 語法的語法,而且讓我們可以像寫程式語言一樣去撰寫 CSS,Sass 提供了像:

  1. 巢狀規則
  2. 變數
  3. 混合
  4. 選擇器繼承
  5. 函式
  6. 迴圈
  7. 條件
  8. 運算

還有其他更多功能,這些內容你看起來有沒有很熟悉。目前 Sass 分為二個語法版本,舊的是 Sass 語法,新的是 SCSS 語法。Sass 語法與 SCSS 語法差異很小,不過 SCSS 語法合乎 CSS 語法的使用習慣,所以比較建議學習使用 SCSS 語法。

compass.app 是一套 monitor 軟體,它會監控指定目錄(或稱專案)下的 *.scss 檔案,在目錄下有 *.scss 檔案新增或異動時,compass.app 會自動產生及更新對應的 *.css 檔案,透過 compass.app 的幫忙,會自己轉換 SCSS 語法為 CSS 語法,非常方便,方便之中帶點小不便。

在撰寫 SCSS 過程裡,總不能開 Notepad / Notepad++ 來寫 SCSS,這就好像回到十多年前,用 Notepad 寫 HTML 的時代,在已經習慣自動完成這種功能,要使用沒自動完成功能的撰寫任務,我只能說:我回不去了!

犀利人妻之我回不去了
圖片來源:網路

所以我們要為史上最強 IDE Visual Studio 裡加上 SCSS 的開發功能。讓 Visual Studio 強上加強!

ASP.NET MVC 4 RC 的 JavaScript / CSS 的打包與壓縮(Bundling and Minification)

Kendo UI Grid 參考來源

本篇參考黑暗執行緒「在ASP.NET MVC 4中使用Kendo UI Grid」一文將 C# 語法轉為 VB 語法練習。在練習實作期間,發現了一些差異,寫下留個記錄。另外我之前介紹過一套 NuGet:SquishIt 套件,來進行 JavaScript 與 CSS 的打包與壓縮,在 ASP.NET MVC 4 RC 中本身就已經是實作此功能,以下大部分都是以討 Bundling / Minification 這兩個功能為主。

Kendo UI Grid for Visual Basic 實作

  1. 新增一個【ASP.NET MVC 4 Internet 專案 for ASPX】(我使用 Visual Studio 2012 RC 實作)。這裡我說明一下,在最新版 Visual Studio 2012 RC 版本中,ASP.NET MVC 4 有 6 個 Project Template,分別:

    1. Empty
    2. Basic
    3. Internet Application
    4. Intranet Application
    5. Mobile Application
    6. Web API

    還有一種 Single Page Application 在 ASP.NET MVC 4 Beta 時出現,但在 Visual Studio 2012 RC 版的樣版中消失了,原因請參考 Single Page Application 網頁說明。Empty / Basic 會給你很乾淨的專案樣版,沒有辦法立即使用,必須進行相當手續設定及新增 Controller / Action / View 等步驟,想要立即能有可執行測試的專案,還是 Internet Application 比較合適些。

中國萬網(www.net.cn)雲主機測試心得

雲端主機五天試用期

公司之前使用 hiCloud 提供的服務還不錯,也想將大陸地區一些實體主機上的服務移至"雲"上,Survey 之後選擇【中國萬網-雲主機】來進行測試使用。選擇它測試主要是他提供了五天的免費測試,而且公司夠大,這五天沒有限制的盡情測試。中國萬網的雲主機與中華電信的 hiCloud 服務內容差不多,就是給你一台虛擬機,此虛擬機可透過網頁進行基礎管理,透過遠端桌面方式進行細部管理。

雲主機網頁主控台

www.net.cn 業務雖然很多,可以統一一個後台管理,這是比 hinet 好的地方。

萬網雲主機網頁主控台 圖一:萬網雲主機網頁主控台

HTML5 完美風暴推薦序

XHTML 騙了我好多年

直到最近,我才知道,原來 XHTML 騙了我好多年,我們寫出來的程式,從來就沒有成為 XHTML 的一天,但一直以為只要我把那非常長的 DOCTYPE 加入,然後使用良好格式(well-formated)來撰寫,並且只要通過 w3 的驗證器認證,就可以大聲說,我很厲害,而且還可以把 w3 官方 XHTML Logo 放在網頁上,以示眾人。

HTML5 完美風暴封面
來源:呂高旭作者點部落 - HTML5 完美風暴封面

ASP.NET Web API 心得筆記 (9) 簡介 System.Net.Http.HttpClient 類別

HttpClient 類別介紹

提供基礎類別來傳送 HTTP requests(請求)接收 HTTP responses(回應)從一個 URI 的資源定義。目前 HttpClient 類別為 .NET Framework 4.5 Beta 中 System.Net.Http 命名空間之下,使用方式在未來正式版中可能會有修改,以下所提範例在未來是否能正常運作是未知,但提供的觀念我相信是一樣的。

HttpClient 類別使用說明

HttpClient 類別執行個體做為發送的 HTTP 請求的會話(session),HttpClient 執行個體是應用於該執行個體來執行所有請求的設定的集合。此外,每一個 HttpClient 執行個體將使用自己的連接池(connection pool),以隔離來自其他 HttpClient 執行個體所執行的請求的請求。

使用 HttpClient 類別非同步取得 URI 資源

我們先看一個最簡單的範例,我們開一個【主控台應用程式】:

ASP.NET Web API 心得筆記 (8) HTTP 訊息處理常式(HTTP Message Handlers)

ASP.NET Web API 有一個管道(pipeline)在 Client 端與 Server 端之間去處理 HTTP訊息(HTTP messages)。在 Client 端與 Server 端之間被設計成對稱但是獨立,你能只使用 Client 或 Server 來處理。它們兩者都是建立在相同的物件上:

以下都是在 .NET Framework 4.5 Beta 或 System.Net.Http 命名空間(處理 Client 端)或 System.Web.Http 命名空間。

Tool - PDFCreator 輸出 PDF 檔案內容為空白

PDF Creator 介紹

這是一套相當老牌且實用免費的 PDF 製作軟體,重點是不斷改版進步,重點功能一個不少,除非是專業應用,不然 80 ~ 90% 以上的應用, PDFCreator 都是上上之選。做為一套免費軟體,在軟體內,你也看不到廣告,而且開放給所有家庭和商業使用,作者還是願意一直修改軟體增加功能,我們應該給於作者一些掌聲

Windows 8 新功能 Windows To GO 使用測試心得

Windows To Go is Live CD or Live USB?

在 Windows 8 中推出了一個亮眼的新功能稱 Windows To Go,Windows To Go 在功能上很像 Linux Live CD 或 Linux live USB,以前學習 Linux 時,因為 Linux 有太多版本,而且各版本各有強項,想要玩玩各版本的 Linux,不太可能全抓回來安裝在本機上。注意,我說的是以前,現在的硬體強,硬碟又大,記憶體又便宜,更重要的是虛擬化工具很方便,你要在一台 PC 上安裝各種版本的 Linux、Windows、Unix-like … 作業系統是非常方便且容易。

在 Linux 就有人推出 Live CD,只要透過 BIOS 設定為光碟開機,Live CD 就會在開機時自動載入至記憶體運作,我們都知道,如果 Linux 不開圖形模式(X-Window …),Linux 本身很省資源,所以 Live CD 在那就算只有 512MB 的電腦上,也可以運作的很順很好,電腦硬體好一些的,開 X-Window 後,開 Firefox 上網、打文件 … 就和本機作業系統沒什麼差異。不過 Live CD 有個很大的缺點,就是關機後什麼東西也不見了。

老實說,Live CD 讓我有許多快樂的日子。時光飛逝,當 1.44 Floppy 慢慢消失,而 USB 隨身碟慢慢成為方便的工具時,就有人想,能不能把整個 Linux 精簡至可以放入 USB 隨身碟裡(從前容量可不是從從幾 GB 起跳),直接從 USB 隨身碟開機載入使用 Linux 作業系統,因為 Live CD 只能唯讀,但 USB 隨身碟可讀可寫,等於就是一個隨身作業系統,你的設定、文件、作業 … 都會完整的存放在 USB 隨身碟,只要你的電腦有支援 USB 開機,且不是非常新的硬體規格,大多都是正常開機使用。

Windows 其實有 Live CD 版本,只是一般人不太可能去用到,我們稱 WinPE,而 Windows 8 所推出的 Windows To Go 比較像 Live USB,也就是把 Windows 8 灌在 USB 隨身碟或 USB 隨身硬碟,只要透過 USB 開機去載入 Windows To Go 裡的作業系統,你就能擁有一個如隨身攜帶的 Windows 8

金剛熊美語安親家教班

金剛熊真的要帶小孩了

婆婆本身從事安親教育工作十多年,自從有孩子之後,我們的目光更集中在教育上。當個在職者比較難實現自我的理想,我們對於教育有我們自己一套的想法,我們想要給孩子一個不一樣的環境,所以當婆婆提出想要自己創業時,我是非常支持的。金剛是我,熊是婆婆,所以我們取名為金剛熊。

接下去由熊媽媽接手,由她來為各位介紹金剛熊相關教學資料。Study for fun.

羅技 Logitech 所有產品 75折 eCoupon

Logitech eCoupon

再送大家一張 Logitech eCoupon,eCoupon 有效期限至止不得延長,且不得與其他優惠一併使用。

已使用者,請留言說一下。

PChome 24h 書店圖書禮券折價代碼

PCHome 圖書禮券

折價代碼: 00723782 (結帳時輸入折價代碼即可享折扣)(已使用)

馬上到PChome 24H書店選購,http://24h.pchome.com.tw/book

  • 有效期間:~ (限使用一次、依書籍建議售價折扣)
  • 新舊書由PChome定義,折扣以結帳時顯示為主 詳細使用說明

有需要的人就拿去用,記得留言一下,說已經使用。

讀書心得 - 鯨魚哲學 Whale Done! 之訓練孩子上廁所

 鯨魚哲學 Whale Done!

如果妳的孩子是鯨魚

《鯨魚哲學 Whale Done!》是一本只有 137 頁的小故事書,2003年11月出版,Ken Blanchard、Thad Lacinak、Chuck Tompkins、Jim Ballard等人合著,把它從我的舊書堆中找出來,因為是之前《參與,才會有感情》提到,最近在訓練我的最小的女兒上廁所,面對一位只有一歲半的娃兒,突然讓我回想多年前讀過的《鯨魚哲學 Whale Done!》這本書。我很努力用"話"來溝通,但成果不張,原因顯而易見,她說什麼我都聽不太懂,那我說什麼她怎麼可能聽得懂!用打的嗎?用罵的嗎?如果你的孩子是條重達一萬一千噸鯨魚,你會怎麼對待他?

讀書心得 - 你就是菁英(How to Get the Most Out of Business)

你就是菁英
物質上的成功如果不能帶來精神方面的成功,就不是真正的成功。實事上,很多物質成功是以精神失敗為代價的。
By B‧C‧富比士

我花費大量的時間在研讀技術文件,但常常會有種心情,是想轉換心情的心情,所以我很喜歡看課外讀物,這有像吃太多肉,需要蔬菜水果平衡一下。

中文書名:你就是菁英:富比士送給未來菁英的99個建言
英文書名:How to Get the Most Out of Business
作者:博泰.查理斯.富比士
原文作者:Bertie Charles Forbes
ISBN:9789868737211

ASP.NET Web API 心得筆記 (7) CRUD, Paging, Querying, Authorization 之 jQuery

我們在【ASP.NET Web API 心得筆記 (3) CRUD 操作之後端程式】裡完成了整個 CURD 在 ASP.NET Web API 上的討論,但前端網頁要如何呼叫使用 GET, POST, PUT, DELETE 這些資源呢?接下來我們就來討論 CRUD …等在前端網頁如何透過 jQuery 來呼叫使用這些資源。

以下都是純 jQuery 程式碼,也就是說,你可以在任何網頁裡使用它,PHP、JSP、ASP、ASP.NET、ASP.NET MVC … 這樣分離的更清楚,前端開發人員,不用開 Visual Studio,不用會 ASP.NET / ASP.NET MVC,只需要了解你 Web API 的 URI 資源如何取得與使用。

這也表現出另一個 Web API 的優點,RESTful 就是一組透過 URI 來取得設定資源,以前,或許你會寫 Web ServiceWCF,但如果想在單純的 HTML 網頁裡呼叫使用,或在沒有 Visual Studio 工具幫忙下要去使用,還真有些困難。現在,Web API 把問題單純化,你想怎麼用就怎麼用,或更進一步,你想在那裡用就在那裡用。

小孩帶金剛 - 爸爸,我好勇敢

護士好辛苦1
圖一:護士好辛苦

護士好辛苦2
圖二:護士好辛苦

未當爸爸之前,總覺的什麼"流感"、"腸病毒"…關我什麼事,但當了爸爸之後,每年(真的是每年)總會因為孩子感冒高燒不退、腸病毒高燒不退等原因,孩子住院,我也休特別假在院照顧。今年算是特別嚴重,二個一起住院。其實我心裡還在想,還好是二個一起住院,不然我和婆婆真不知道怎麼照顧,二頭跑真是會累死了。

每次住院,時間大約都是在 5 ~ 7 天之間,其中最可憐的一段就是裝點滴針頭與換點滴針頭。雖然住院期間,活力大不如前,但小朋友左動動右動動,很容易滴點就塞著不動了,前年 Happy 住院時最可憐,平均每 2 ~ 3 天就換一次點滴針頭。當然,換滴點針頭時的"叫聲"之大,於心不忍又無可奈何。

照顧病人真的很累,尤其是我們沒有其他家人在新竹。

婆婆也是很貼心,怕我在醫院都睡不好,大概二天會來醫院換班,晚上讓我回家睡好一些。點滴的針頭是每四天換一次,療程 5 ~ 7 天來說,正常的話,每次住院都是左右手必須各打一次。這次住院,剛好二次換點滴針頭都是婆婆在照顧的時間。

第一次裝點滴針頭,我去準備住院要用的東西,回到病房時,還沒等婆婆開口,Love 就舉起手說:「痛痛。」還在一副想哭的樣子。Happy 也馬上在床上舉起手說:「爸爸,我跟你說,我好勇敢,我都沒有哭,而且 Nurse 還送我小熊。」

媽媽點點說,她真的沒有哭。我能想像,大寶貝忍耐的樣子