熱血漢誌 - 技術新鮮人到技術經理人，必懂的事

以前在寫前端的方式，會採取 html, css, js 分離的方式。這次活動邀請 Gias 來彰化師大與同學分享 Angular.js, 也比較了解 Angular 的概念，話說，把 HTML 當做一種 interface 的概念，其實還蠻不一樣的，就說法層面上會比較能夠說得過去，不過比對以前的寫法又覺得有點開倒車。 這邊是想要提出一件事情，這邊強調要快速開發，我們以一個 list link 為例子      <ul>           <li><a href="#">click</a></li>           <li><a href="#">click</a></li>           <li><a href="#">click</a></li>           <li><a href="#">click</a></li>      </ul> 如果加入 angular 的作法就會比較像底下的方式      <ul>           <li><a href="#" ng-click="click()">click</a></li>           <li><a href="#" ng-click="click()">click</a></li>           <li><a href="#" ng-click="click()"...

Zen coding 改名為 emmet Zen coding 身為一個 web developer 不應該繼續花時間在浪費重複的事情上，這個好用的專案已經改名成 Emmet, 網址為， Emmet 官方網址 https://github.com/emmetio/emmet Sublime text 2 安裝 emmet 輸入底下指令就可以安裝完成 emmet , command + shift + p input `package install` input `emmet` Vim 安裝 emmet vim 安裝方式可以參考底下連結說明， https://github.com/mattn/zencoding-vim 可以參考之前介紹使用 coffee plugin for vim 安裝方式 使用方式 在 emmet 網站裡面也有介紹如何開發 html，以 html5 樣板開發為例，在編輯區輸入內容如下， html:5_ _ 為游標位置，在 sublime text 2 預設按鍵為 『tab』 ，在 vim 底下使用方法則為， 『ctrl + y + ,』 接著就會產生簡易的 html5 架構，內容如下， <!DOCTYPE HTML> <html lang="en"> <head> <meta charset="UTF-8"> <title></title> </head> <body> </body> </html> 接著游標就會直接跳至 body 中央，即可立即開發雛形頁面，開發似乎變得更為方便， 其他詳細的使用方法，可以參考 emmet 語法說明， http://docs.emmet.io/abbreviations/syntax/ 後記 現在已經有許多好用的工具，可以讓前端工程師縮短開發時間，很多工具在不知道或者沒有人分享的狀況下，總是會自己重新刻一套，或者使用『複製』、『貼上』繁瑣的工作重新持續著。 就自己使用 Emmet 的經驗上，在產品的雛形開發上是十分方便的工具，如果大家有什麼類似的工具，或者前端輔助工具，...

最近以前的學弟有提到關於Html5支援的問題，總覺得對於某些技術在某些瀏覽器之下無法運作，就放棄實做的可行性，個人真的覺得十分可惜，因此以下是我回覆的內容，當然也是在實務開發流程所會遇到的狀況，分享給大家。 --------------------------------------------------------------------- 對於html5 的整體規格來說，目前已經是趨向於瀏覽器先行， 目前的狀況幾乎是先實做，後規範， W3C ， WhatWG 所有相關 單位的規格書幾乎趨向於邊看邊修的地步， 因此如果要實做這些新規範（新標準）自然會有所取捨， 在前期也需要花費一番功夫。 文中提到的東西是實際存在的問題， 在我們實際產品開發上幾乎會碰到html5 支援度問題，而我們的規劃會是： 1. 瀏覽器支援的底限為何 2. 其他瀏覽器支援度 3. 其他瀏覽器可替代方案 首先，查詢需要的規格有哪些，接著訂定出瀏覽器支援度的底限， 例如本產品只能支援到IE8 ，IE6.7 完全無法支援（但是用IE6.7 會跳出警告視窗） 接著，當然以瀏覽器基本支援為最佳， 再者於瀏覽器上開始尋找替代方案，例如安裝外掛程式、 安裝Flash等方式進行調整。 通常會先建議使用的瀏覽器，以及其他支援的瀏覽器， 當然會附註哪些瀏覽器效能會比較差，請升級或安裝他牌瀏覽器。（ 畢竟使用者希望用美工刀切西瓜，我們還是要讓他這麼做。） 例如像網站的圓角，在Chrome, firefox, Opera, Safari 都可以使用CSS語法自然呈現，不過對於IE 7.8.9 就會使用SVG圖形描繪的方式（目前是使用 CSS-PIE3 ） 達到相同的目的，當然不可否認，IE 7.8.9 自然呈現的效率就是慢，而另外一種選擇方式就採用，IE 7.8.9不會有圓角效果，只會出現正正方方的邊角。 當然這只是其中一個例子， 在跨瀏覽器的實做上還有許多解決方式和許多有趣的套件庫可以參考 。 這當中有一種例外，就是對於新技術的展現， 就像目前只有Chrome， Opera支援Device這種tag， 而你當中就是希望使用原生Tag 支援多媒體裝置的展現，當然就不需要考慮到瀏覽器支援度的問題， 這個時候是屬於呈現新技術，展...

在Html document 方法當中，在W3C Html5 裡面有提到幾個DOM create 方法，今天來探討一下 insertAdjacentHTML() 這個方法。 insertAdjacentHTML(position, text)，使用上類似於之前的append()，多加上了位置選擇，因此可以做到類似於 jQuery DOM Insertion 這些方式。 另外值得一提的部份就是text ，是可以直接以文字帶入，由insertAdjacentHTML產生為DOM Object，不需要類似之前先Create DOM，再執行append的方式。 // document.getElementById("insert-method").insertAdjacentHTML("beforeend", "<span>bar</span>"); 除了提一下insertAdjacentHTML這個方法之外，同時也探討一下innerHTML，到底跟insertAdjacentHTML有什麼差異。 在 insertAdjacentHTML() Enables Faster HTML Snippet Injection  這篇文章當中裡面有點出innerHTML的異同，如果只是需要使用append DOM的方式，強烈建議採用insertAdjacentHTML，而不要再使用innerHTML，怎麼說呢？ 通常會看到一種簡化append 的方式 // document.getElementById("inner-method").innerHTML += "<span>bar</span>"; 執行上當然沒有任何問題，不過在執行效率上會有差異，innerHTML會先將取得內部所有DOM tree，接著再將DOM object 執行serialize，最後才會<span>bar</span>這段文字接上。 可以在這邊直接看一下線上範例。 測試 在不同瀏覽器經過實際測試效果，可以看一下底下數據（經過500次loop）: Chrome ...