網頁

▼

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 的問題

於 4 則留言:

從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 啦！><"

於 3 則留言:

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 強上加強！

於 2 則留言:

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 比較合適些。

於 沒有留言: