此篇靈感來自Johnny.Net的Plurk，Johnny.NET貼了一個EverNote的求職連結，從中我們可以看到一些趨勢，我簡單做個整理，各位開發者做個Check List，其中你擁有了幾項技能。
EverNote 職位職責
這裡的關鍵點有幾個：
這裡談的是應用程式，不單只是網站網頁，我會強調在application app。
EverNote 技能最低需求
這裡的關鍵點有幾個：
前陣子，透過 demo.tc 認識了正妹 compass.app 這套很棒的軟體。透過 compass.app 的介紹又認識了 Sass (這是辣媽，不信你連進去看)，Sass 為 CSS 提供程式語言等級的功能。CSS 嚴格來說不算程式語言，它本身只是一堆樣式的設定，前後樣式一串一串起來成為串接樣式表，內容更是了無新意【選擇器 { 樣式: 樣式設定};】就這樣，CSS2 到 CSS3 只就增加更多的選擇器、樣式、樣式設定。不過，就像樂高積木一樣，雖然只是積木，但可以千變萬化，這才是它利害的地方。
單純就 *.css 檔案而言，就組織與維護方面實在很弱。不過有了 Sass 之後情況就不同了。Sass 是延伸 CSS3 語法的語法，而且讓我們可以像寫程式語言一樣去撰寫 CSS，Sass 提供了像：
還有其他更多功能，這些內容你看起來有沒有很熟悉。目前 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 強上加強！
 |
| 圖一：Chrome 管理搜尋引擎 |
 |
| 圖二：新增 DuckDuckGo 為預設搜尋引擎 |
 |
| 圖三：預設 DuckDuckGo 為搜尋引擎 |
Imports System.ComponentModel.DataAnnotations
''' <summary>
''' Blog 發佈文章類別
''' </summary>
Public Class BlogPostjQueryUI
' 標題
Public Property Title() As String
' 發佈日期
<DataType(DataType.Date)>
Public Property PostedOn() As DateTime
' 標籤
Public Property Tags() As String
' 內容
Public Property Content() As String
End Class
Namespace Mvc3HTMLEditorAndDatePicker
Public Class BlogPostjQueryUIController
Inherits System.Web.Mvc.Controller
'
' GET: /BlogPostjQueryUI/Create
Function Create() As ActionResult
Return View()
End Function
<HttpPost(), ActionName("Create")>
Function Create_Post(model As BlogPostjQueryUI) As ActionResult
ViewBag.HtmlContent = model.Content
Return View(model)
End Function
End Class
End Namespace
<%@ Page Title="" Language="VB" MasterPageFile="~/Views/Shared/Site.Master" Inherits="System.Web.Mvc.ViewPage(Of Mvc3HTMLEditorAndDatePicker.BlogPostjQueryUI)" %>
<asp:Content ID="Content1" ContentPlaceHolderID="TitleContent" runat="server">
KKBruce : DatePicker (使用jQuery UI) 日期選擇器測試
</asp:Content>
<asp:Content ID="Content2" ContentPlaceHolderID="MainContent" runat="server">
<h2>DatePicker (使用jQuery UI) 日期選擇器測試</h2>
<%-- The following line works around an ASP.NET compiler warning --%>
<%: "" %>
<script src="<%: Url.Content("~/Scripts/jquery.validate.min.js") %>" type="text/javascript"></script>
<script src="<%: Url.Content("~/Scripts/jquery.validate.unobtrusive.min.js") %>" type="text/javascript"></script>
<% Using Html.BeginForm() %>
<%: Html.ValidationSummary(True) %>
<fieldset>
<legend>jQuery UI 日期選擇器測試</legend>
<div class="editor-label">
<%: Html.LabelFor(Function(model) model.Title) %>
</div>
<div class="editor-field">
<%: Html.EditorFor(Function(model) model.Title) %>
<%: Html.ValidationMessageFor(Function(model) model.Title) %>
</div>
<div class="editor-label">
<%: Html.LabelFor(Function(model) model.PostedOn) %>
</div>
<div class="editor-field">
<%: Html.EditorFor(Function(model) model.PostedOn) %>
<%: Html.ValidationMessageFor(Function(model) model.PostedOn) %>
</div>
<div class="editor-label">
<%: Html.LabelFor(Function(model) model.Tags) %>
</div>
<div class="editor-field">
<%: Html.EditorFor(Function(model) model.Tags) %>
<%: Html.ValidationMessageFor(Function(model) model.Tags) %>
</div>
<div class="editor-label">
<%: Html.LabelFor(Function(model) model.Content) %>
</div>
<div class="editor-field">
<%: Html.EditorFor(Function(model) model.Content) %>
<%: Html.ValidationMessageFor(Function(model) model.Content) %>
</div>
<p>
<input type="submit" value="Create" />
</p>
</fieldset>
<% End Using %>
<div>
<%: Html.ActionLink("回首頁", "Index", "Home") %>
</div>
</asp:Content>
 |
| 翻譯W3C繁體中文 |
 |
| 選擇要翻訪的文件 |
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml" xml:lang="zh-tw"
lang="zh-tw"> … </html><img alt="cute cat" longdesc="catstory.html" src="cat.png" /><!--[if lte IE 6]> <div style="background-color:#DDECFF;margin:5px 0 5px 0;padding:3px 10px 3px 10px;
border-color:#F6F6F6; border-style:solid;border-width:2px;">
<p><strong>您好</strong>，您目前使用的是舊版的<del>IE 6.0網路瀏覽器</del>，建議使用更快、更好用的瀏覽器！
如：<a target="_blank" href="http://www.google.com.tw/">Google Chrome</a>、
<a target="_blank" href="http://www.mozilla.com/zh-TW/">Firefox</a>、
<a target="_blank" href="http://www.opera.com/">Opera</a>、
<a target="_blank" href="http://www.apple.com/tw/safari/download/">Safari</a>、
<a target="_blank" href="http://www.microsoft.com/taiwan/windows/internet-explorer/">IE8</a>。</p>
</div> <![endif]--> <!--[if IE]> 這樣使用IE瀏覽器（全部版本）的人都看得到。 <![endif]--> <!--[if IE 6]> 這樣IE 6.0版本會看得到，只限IE 6.0版本。 <![endif]--> <!--[if lt IE 6]> lt：less than （版本編號小於） 這樣IE 6.0以下版本會看得到，不包含6.0。 <![endif]--><!--[if lte IE 6]> 這樣IE 6.0以下版本會看得到，包含6.0。 <![endif]--> <!--[if lte IE 8]> lte：less than or equal to （版本編號小於等於） 這樣IE 8.0以下版本會看得到，包含8.0。<![endif]-->
<!--[if gt IE 5]> gt：greater than （版本編號大於） 這樣IE 5.0以上版本會看得到，不包含5.0<![endif]-->
<!--[if gte IE 5]> gte：greater than or equal to （版本編號大於等於） 這樣IE 5.0以上版本會看得到，包含5.0<![endif]-->
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">Name | Symbol | Code |
|---|---|---|
And符號(Ampersand) | & | & |
左雙引號(Left) | “ | “ |
右雙引號(Right) | ” | ” |
小於 | < | < |
大於 | > | > |
破折號(en-dash) | - | &endash; |
破折號(em-dash) | – | &emdash; |
省略(Ellipsis) | … | &helip; |
版權 | © | © |
註冊 | ® | ® |
商標 | ™ | ™ |
向左 | ← | ← |
向上 | ↑ | ↑ |
向右 | → | → |
向下 | ↓ | ↓ |
左右雙向 | ↔ | ↔ |
<title>[CompanyName]–[Section]:[Page]</title><meta name="Description" content="Page summary goes here." /><meta name="keywords" content="word 1, word 2, word n" /><meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta http-equiv="Content-Script-Type" content="text/javascript" />
<meta http-equiv="Content-Style-Type" content="text/css" />
<meta name="description" content="Page summary goes here." />
<meta name="keywords" content="word 1, word 2, word n" /><meta name="robots" content="noindex,nofollow" />
/* noindex：略過這個頁面 */
/* nofollow：略過這個頁面超連結的同一網站其他頁面 */<img src="/img/xxxx.gif" alt="Add image description text here." /><img src="/img/pretty.gif" alt="" /><a href="news.aspx">More News Stories</a><a href="help.aspx">Help (open new window)</a><a href="Manual.pdf">Download the Manual in PDF format(25KB)</a><a href="news.aspx" title="News Archive">More News Stories</a><abbr title="UK">United Kingdom</abr> <acronym title="NATO">North Atlantic Treaty Organisation</ acronym > <table border="1" summary="This table gives some statistics about fruit flies: average height and weight, and
percentage with red eyes (for both males and females).">
<caption>A test table with merged cells</caption>
<tr><th rowspan="2"></th><th colspan="2">Average</th><th rowspan="2">Red<br />eyes</th></tr>
<tr><th>height</th><th>weight</th></tr>
<tr><th>Males</th><td>1.9</td><td>0.003</td><td>40%</td></tr>
<tr><th>Females</th><td>1.7</td><td>0.002</td><td>43%</td></tr>
</table> <!-- Bad id --> <div id="1Nav"> ... </div> <h1 id="0.0">Web Develop</h1> <!-- Good id --> <div id="MainNav"> ... </div> <h1 id="chapter0.0">Web Develop</h1>
<div id="mainNav">
<ul>
<li>Home</li>
<li>Products</li>
<li>Contact</li>
</ul>
</div><ul id="mainNav">
<li>Home</li>
<li>Products</li>
<li>Contact</li>
</ul>/*-------------------
CompanyName Master Style Sheet
Version: 1.0
Author: Bruce.Chen
Email: bruce@CompanyName.com.tw
Website: CompanyName.tw
History:
2010/5/28 CompanyName.css為載入(@import)其他*.css檔案之主檔案。
---------------------*/// TODO : fix some function
' HACK : Update this procedure.
/* BUG ： IE 6 bug. */普通:form {width: 30em}明確：form#search{width: 15em;}body#www-CompanyName-tw{
font-size:200%;
background-color: black;
color: white;
}<link href="URL" rel=stylesheet" type="text/css" /><style type="text/css">
<!--
@import url("URL");
-->
</style>由樣式表載入樣式表，例如在CompanyName.css中載入其他樣式表@import url("basic.css");
@import url("layout.css");
@import url("color.css");
@import url("table.css")<input type="text" name="date" onchange="validateDate(this)"
/> //function function validateDate(){ //Do something ... } <input type="text" name="date" /> window.onload=function(){
var inputs = document.getElementByTagName('input'); for (var i=0, l=inputs.length;
i < l;i++){ input.onchange = function(){ validateDate(this); } } } <input type="text" name="date" /> //jQuery Code
&(function(){ $('input[name=date]').bind('change',function(){ validateDate(this);
}); }); 
