跳到主要內容

發表文章

目前顯示的是有「html」標籤的文章

[分享] Angular concept & event binding

以前在寫前端的方式，會採取 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()"...
張貼留言
繼續閱讀>>

[教學] HTMLPrettify 使用方式 - sublime text 2

https://github.com/victorporof/Sublime-HTMLPrettify 介紹 sublime html Prettify 工具，藉由鐵神看到的分享，這邊說明一下如何設定，讓自己之後可以快速回顧，知道使用的方法。 Prepare sublime text 2 / 3 sublime package installer node.js install 打開 Sublime text 2 / 3
張貼留言
繼續閱讀>>

[教學] angular 官方教學資料導覽

angular 關於官方教學自己做的一個簡短筆記，在官方基本教學流程中，已經給予大家大致的輪廓，到底 angular 怎麼去執行程式流程，進行 html render 以及如何將 html 變成 object，甚至到後面的 route, HttpRequest 取得資料方式 以下把 angular 官方網站提供的基本教學，做一個大致流程導覽，給自己一個簡單的紀錄。 angular 基本教學 http://docs.angularjs.org/tutorial step-0 這邊進行 angular 第一次接觸，教導如何 install angualr 以及，angular html template 如何進行運作。 Nothing here {{'yet' + '!'}} 網址 http://docs.angularjs.org/tutorial/step_00 ng-repeat step-2 加入 ng-model 了解， angular model 模型，如何使用 ng-model 與 html 進行互動 added app/js/controller.js <pre> function PhoneListCtrl($scope) { $scope.phones = [ {"name": "Nexus S", "snippet": "Fast just got faster with Nexus S."}, {"name": "Motorola XOOM™ with Wi-Fi", "snippet": "The Next, Next Generation tablet."}, {"name": "MOTOROLA XOOM™", "snippet": "The Next, Next Generation tablet."} ]; } </pre> 網址 http...
張貼留言
繼續閱讀>>

[教學] zen coding (emmet) 安裝使用方式

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 的經驗上，在產品的雛形開發上是十分方便的工具，如果大家有什麼類似的工具，或者前端輔助工具，...
張貼留言
繼續閱讀>>

[分享] Error Handling 跨網域問題 (CORS)

Error Handling 跨網域問題 今天突然看到 阿嗚 丟出一個問題， 最近想要用 window.onerror 將部分環境的 JavaScript Error 回報給 Server，但 Static 與 Front-end 的網域不同，在 IE 以外的瀏覽器都因 Same Origin Policy 只能抓到語焉不詳的 "Script Error"... 有設定 CORS 的 Header 但也都無效，據說是瀏覽器都沒實作。有人有成功案例嗎？ 測試連結 http://josephj.com/lab/2012/window-onerror/demo2.html 剛開始我的問題是，看不懂希望的結果是什麼。 簡單來說，因為 static 檔案跟 dynamic page 是分別放至於不同 server. 如果需要擷取 JavaScript Error code line 的時候，會發生異常訊息， Script error. 可是實際上，我們希望出的是錯誤 code 行數與資訊，類似資訊如下 Uncaught ReferenceError: abc is not defined 測試方向 document.write 用抓取的（cross domain 失敗） iframe (cross domain 失敗） onerror 不管加入在 src file, 或者 inline script 都吐出一樣訊息 (失敗） 交換測試 CORS 設定(一樣無法顯示正常結果，失敗) 搜尋文獻 之後找了相關的文件， Better error handling with window.onerror 其中裡面值得參考的資訊， Security To prevent information leaking from one server to the other, it is important to be careful with scripts that have two different origins. If the script URL is has a different origin to the document then the three arguments returned ...
張貼留言
繼續閱讀>>

[分享] ejs 使用方法，a web template engine for Client / Node.js

Node.js web template engine - ejs express 在 Node.js 建立 Web 伺服器通常都會使用到的套件，預設直接使jade 為 template engine ，可是依照自己的習慣還是無法接受類似 mastach 的方式，比較能夠接受 Html 混搭程式的架構，尋找一段時間之後，發現 ejs 是一個不錯的選擇。 模組說明 模組網址： ejs 開發者：https://github.com/visionmedia 說明文件： ejs 是一種 html template engine ，用法上比較貼近 html 原生使用方式，例如開發 asp 經常會使用到 <%= variable %> 的方式，直接就可以在 ejs 裡面使用。 以下使用的範例是直接在 Node.js express 裡面進行 html 頁面轉換，但是 ejs 是一個可以直接使用於前端頁面的套件庫，詳細的使用方式可以參考，ejs 相關範例
1 則留言
繼續閱讀>>

[分享] Progressive Enhancement 2.0 影片內容摘要

Progressive Enhancement 2.0 摘要 先看一下 YUI Blog 這次 Nicholas Zakas: Progressive Enhancement 2.0 ，這次50分鐘演講內，談到許多身為前端必須知道的趨勢，以下為簡單摘要。 淺談 Progressive Enhancement Progressive Enhancement 這個主題，顧名思義漸進增強，將網站前端分為三個架構來看待， JavaScript  CSS HTML 以往的作法會是將 Html 建構完成，再加上去漂亮的 CSS 作為基礎 Tag 修飾，接著再加上 JavaScript 強化整體完整度，增強使用者體驗。
張貼留言
繼續閱讀>>

html viewport meta 說明及淺見

html viewport meta 淺見及說明 web mobile 化已經是一個全球的局面，好像網站如果沒有做個 media query，都會羞的不敢見人。 神奇的地方是很多人都會在html head 處加上 viewport 這個 meta data，為了釐清實際的效用以及屬性，接下來將大略介紹 viewport-meta 說明屬性與應用。 屬性說明 W3C 協會定義 viewport meta 目前還屬於草案，意思就是有可能隨時修改，特別註記一下，此文於西元2012年3月28日撰寫，以下描述如有出入，以W3C 標準為主。 viewport 可以設定的屬性分別如下， width：可設定數值，或者指定為 device-width height：可設定數值，或者指定為 device-height initial-scale：第一次進入頁面的初始比例 minimum-scale：允許縮小最小比例 maximum-scale：允許放大最大比例 user-scalable：允許使用者縮放，1 or 0 (yes or no) 最初執行viewport meta加入如下 <meta name="viewport" content="width=device-width, initial-scale=1.0"> 編譯過程會轉化成如下的語意， @viewport { width: device-width; initial-scale: 1.0 }
張貼留言
繼續閱讀>>

[教學] 安裝 Dropbox service 在 *unix, install dropbox service on *unix

安裝 Dropbox service 在 *unix 安裝 dropbox linux command line 下載linux 版本所需要的套件指令 https://www.dropbox.com/install?os=lnx 下載好之後將整包檔案解開，到資料夾如下 ~/.dropbox-dist/ 執行指令 dropboxd #也可以輸入 ./dropboxd 接著會畫面會出現一段訊息 This client is not linked to any account... Please visit https://www.dropbox.com/cli_link?host_id=XXXXXXX&cl=en_US to link this machine. 請用瀏覽器開啟，https://www.dropbox.com/cli_link?host_id=XXXXXXX&cl=en_US，這一段連結。 此時會進入 dropbox網站 ，要求輸入 密碼 授權。 輸入完成之後，回到 linux command line 會出現訊息如下， Client successfully linked, Welcome XXXXX! 安裝完成！ Dropbox cli 使用方法 最簡單的使用方式，就是直接使用剛才安裝的 cli 指令，直接執行 ~/.dropbox-dist/dropboxd 另外一種方式，由 dropbox 提供的指令模式，請將指令下載回來 wget http://www.dropbox.com/download?dl=packages/dropbox.py -O ~/tmp/dropbox 將此指令設定為執行檔 chmod +x ~/tmp/dropbox 接著搬移到 /etc/bin/ 底下，或者是 /usr/local/bin ，接著就可以開始使用 dropbox 這個指令。 Dropboxd 背景執行方式 如果需要長期執行 dropboxd ，可以直接使用 nohup 指令 nohup ~/.dropbox-dist/dropboxd & 就可以將dropboxd 指令背景執行。 後記 Dropbox 對於開發者提供了許多方便的工具，前面有提...
張貼留言
繼續閱讀>>

[分享] RockMongo - mongoDB web 管理介面

RockMongo 之前有介紹一個簡單的 mongoDB WEB 管理介面 - phpMoAdmin ，經過網路上朋友另外推薦一套 RockMongo ，不論在介面，或者是管理功能上都比 phpMoAdmin 強很多。 RockMongo 下載 下載連結 安裝方式 php 版本 5.1.6 以上 php_mongo extension 安裝，（可參考 上篇 ） 將剛才下載的檔案，整包檔案解壓縮之後，放置到 web 對外路徑即可，例如這邊放置於 ~/public_html 開啟一個資料夾，將整包解壓縮之後，放在底下 ~/public_html/rockmongo/ 以上就安裝完成 設定方式 剛才設定的路徑底下，有個 config.php 檔案，裡面可以修改MongoDB 相關設定。 ~/public_html/rockmongo/config.php 使用方式 使用方式十分簡單，只要web server 啟動之後，在瀏覽器執行， http://localhost/rockmogo/index.php 登入帳號密碼即可進入 (預設帳號密碼為 admin/admin)，操作上很直覺，就不再多做說明。 後記 上次發表文章之後，才知道有這套漂亮又好用的 mongoDB php 版本的web 管理介面，果然分享之後都會獲得更多收穫，感謝願意在Blog 上留言的各位。
張貼留言
繼續閱讀>>

[分享] 表單資料序列化 form serialize for jQuery and YUI

form 在開發web的人一定都很熟悉他怎麼使用，但是當要form 裡面的資料使用 GET 或者 POST的時候，每個人作法不同。 這邊筆記一下如何使用 YUI & jQuery 做 form serialize 表單資料序列化。 程式說明 簡單的HTML表單： <form method="POST" id="sample-form"> <label for="firstname">First name:</label><input type="text" id="firstname" name="firstname" value="Caesar" > <label for="lastname">Last name:</label> <input type="text" id="lastname" name="lastname" value="Chi"> </form> 希望做表單資料序列化( form serialize )，希望有以下的產出。 firstname=Caesar&lastname=Chi jQuery 使用方法： 擷取到form 節點之後，再呼叫serialize 方法，會回傳字串(string) $("#sample-form").serialize() YUI 使用方法(適用於 YUI3.3.0 以下版本): 首先必須引入 io-form ，取得Y.io之後，使用 _serialize （理論上這應該是私有方法，沒辦法給外部使用，不過在3.3.0以前都可以使用此方法），裡面給予一個物件，其中一個屬性必須要為 id : form id，方法回傳之後就會取得字串。 Y.io._serialize({id: "sample-form"}); 線上範例 線上範例 完整原始碼 ...
張貼留言
繼續閱讀>>

[分享] javascript RegExp.$1 正規表示法理論與範例

javascript 裡面正規表示法其實蠻多元的，參考 ECMAScript 15.5.2 當中提到， ""When String is called as part of a new expression, it is a constructor: it initialises the newly created object. 原文網址 意謂著當String 出現的時候，同時也會產生RegExp 這個物件，表示String 也同時帶有RegExp 屬性。因此可以瞭解為何javascript String 可以match, exec, replace 等function 當中使用正規表示法。 RegExp 如同前面提到是一個javascript object.該如何建構？ var reg = new RegExp(/text/, "gims"); var reg = /text/gims; 兩者的宣告方式是相同的，如此就宣告一個完整的正規表示法物件。實際應用幾乎使用第二種宣告方式，今天要討論的就是RegExp.$ 這個變數到底是怎麼產生。 在這邊就不討論深入正規表示法內部使用規則及原理，回到本文重點，實際上看一下在javascript 正規表示法的另外一種用法RegExp.$1.....$xx 當我們使用正規表示法時，使用分群就會可以將不同分群，視為不同的變數，就可以直接使用RexExp.$1,RexExp.$2...以此類推。 一個很爛的舉例來說， var str = "abcdefghij"; var reg = new RegExp(/(\w)(\w)(\w)(\w)(\w)(\w)(\w)(\w)/); for (var i=1; i< 99; i++) { console.log(RegExp["$" + i]); } 會看到結果為， live demo 實例上活用起來也蠻有趣的，例如 var str = "tel:(02)2888-8888"; var reg = new RegExp(/^tel:[(](\d\d)[)]+(\d+)-(\d+)/); str.match(reg);...
張貼留言
繼續閱讀>>

insertAdjacentHTML和 innerHTML 的差異

在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 ...
張貼留言
繼續閱讀>>

Document.write 塞入script 會如何？

今天看到一則 噗浪討論串 ，感覺很有趣，便花點時間研究一下這個課題，問題如果使用document.write塞入script會有什麼優缺點？ 在實做上大部分都是使用非同步載入，主要都是為了讓頁面載入時間能夠重疊，感覺上讀取時間就會縮短，幾乎使用document.createElement('script')，塞入head當中，這樣子執行上就不會有阻塞的問題。 如果頁面上是使用document.write？ 這個問題還真的沒有研究過，稍微Google一下之後，發現有 一篇討論串解決心中的疑惑 ，不過還是隨手寫一下sample page藉由瀏覽器來驗證。 測試1 sample.html <body> <!--javascript--> <script language="javascript" type="text/javascript"> document.write("<script language='javascript' type='text/javascript' src='after.js'><\x2Fscript>"); document.write("<script language='javascript' type='text/javascript' src='before.js'><\x2Fscript>"); </script> </body> before.js alert("Before"); after.js alert("After"); 為了讓容量上有些差異因此，使用 javascript 混淆器 ，將after.js 內容調整為 $=~[];$={___:++$,$$$$:(![]+"")[$],__$:++$,$_$_:(![]+"")[$],_$_:++$,$_$$:({}+"")[$],$...
1 則留言
繼續閱讀>>

[分享] XMLHttpRequest執行AJAX 跨網域存取

跟大家在介紹 Socket.io 的時候，意外發現居然Socket.io 可以執行跨網域的存取，為什麼？這個時候問題就已經埋下，挖掘之後發現！居然是平凡無奇的XMLHttpRequest，還有針對IE做的奇怪處理，到底是怎麼辦到的？ 分析 W3C 提案 Cross-Origin Resource Sharing (CORS)，這份文件裡面提到，可以透過文件Header 設定可存取網域限制，以及存取方法、時間等，限制的部份有幾個： 必須為http, https 傳送資料方式為GET, POST 資料格式為application/xml 透過剛才的 CORS ，發展出更高層級XMLHttpRequest，W3C裡面也有實現方式 XMLHttpRequest Level 2 草案，裡面的這一段介紹: The XMLHttpRequest Level 2 specification enhances the XMLHttpRequest object with new features, such as cross-origin requests, progress events, and the handling of byte streams for both sending and receiving. XMLHttpRequest Level 2，可以支援cross-domain 請求，這個部份符合我們的需求。與CORS結合之後，似乎就可以ajax 跨網域存取，感覺不賴。 IE呢？ IE8以上有類似XMLHttpRequest Level 2的物件，稱為 XDomainRequest ，在 XDomainRequest - Restrictions, Limitations and Workarounds 這篇文章裡面仔細描述如何搭配CORS原則完成跨網域的實做。
8 則留言
繼續閱讀>>

[分享] 解決網頁長文字破版現象

網頁前端處理，最常碰到的事情就是『破版』，會因為樣式問題導致許多破版的狀況產生。這邊所提到的就是在 『英數連續長字串』 會發生的破版現象，並解說如何解決。 首先讓我們看一下怎麼樣的情況會破版。 前提，文字內容為英數連續長字串，在紅色div寬度限制下，會凸出來一大塊，這想必不是我們所樂見的，因此需要做些改進，這邊就介紹一下改進的方式。
張貼留言
繼續閱讀>>

[分享] Javascript 計算字元長度, count string length by javascript

今天遇到一個問題，很簡單的一個問題當有一個input box需要限制輸入長度，想當然很簡單在input 裡面加上一個maxlength屬性就可以完成限制，接著有另一個更大的問題，因為使用者從多個國家而來，我們需要接受，『中英輸入』的文字，那問題就出現了！ 像是 Facebook album 就有這樣的問題存在，當我很開心的輸入了 一連串的國 ，直到不能輸入為止，再按下儲存，本以為 『國國國國國....國國國』 相簿應該會存在，可惜... 實際上後面卻給我出現外星符號，而且我剛剛輸入的『國國國....』應該是目前數量2倍之多啊，為什麼會這樣子，搞了許久發現問題在於，在PHP認定字串長度是使用byte來計算，並不是採用字元為單位。 前端頁面的算法，input box裡面，一個字為一個長度，在Javascript裡面也是，一個字就是一個長度，所以前端所看到的字串，丟到PHP之後又變成了第三度空間，內容都會被扭曲，尤其是尾巴的部份。 介紹將字串轉換為Byte 計算長度： "測試".length; //　output : 2; "ab".length; // output : 2; 這樣子的結果似乎不是我們要得，所以我們決定轉換另一個方向，將所有字元長度都先轉換為byte code，之後再計算字元長度。 encodeURIComponent("測試"); // output "%E6%B8%AC%E8%A9%A6" encodeURIComponent("ab"); // output "ab" 轉換成 byte之後，感覺上就可以開始計算了， 一個中文可以切成3個byte，1個byte會呈現%dd ，就可以計算成一個中文字，將上面得到的字串長度再除 3 就可以得知目前字長度。 var str = encodeURIComponent("測試"); console.log(str.length /3); // output 6 乍看之下的確如此，但是 中英文 的情況會是如何！？ 剛剛的結果很明顯長度為 6 ，如果在中間穿插3個英文，會是什麼狀況？ var str = encod...
張貼留言
繼續閱讀>>

[教學] Blogger當中加入facebook 讚！ Add facebook like button in Blogger template

心血來潮，世界最強推廣功能，Facebook like 功能終於姍姍來遲了！搜尋的幾篇文章，結果發現都無法正確加入『讚』的功能，十分火大，還好在網路上找到一篇原文資料『 Add FaceBook Like Button For Blogger ( BlogSpot ) And Customize It. 』。英文資料看起還還是頗不爽，因此寫一篇筆記文讓自己日後傻掉，可以快速回覆記憶。
5 則留言
繼續閱讀>>

[解說] 什麼是前端工程師? What is front end engineer?

前言 網路上有許多文章解說，什麼是前端工程師，我跟我朋友這樣解釋：『Html, CSS, javascript只要會這些，就可以了！』，許多人的第一個直覺就是『 做網站的 』。沒錯！我是做網站的，但我是做網站的前端！ （還是做網站的...） 因此興起個人寫一篇 人人都看得懂 ， 人人都可以輕鬆瞭解 什麼是網站前端工程師。 網站前端工程簡介 前(Front)端(end)工程(Engineer)，網站前端構成三要素 Html, CSS, Javascript ，以下以 美女 圖例解說。 Html + CSS +  Javascript =  素材來源 呈現的頁面及互動方式必須： 1. 容易讓使用者接受及使用 2. 與使用者互動良好 3. 增加使用者黏著度
2 則留言
繼續閱讀>>