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

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

mojito ，最近終於從 YDN 對外公開此專案，這個套件主要用於解決前端多重裝置及瀏覽器端的問題，後端服務採取 node.js ，因此使用上必定要先準備以下幾個元素 準備素材 c++ complier git Node.js > 0.4.x NPM > 1.0.x 安裝方式 git clone git://github.com/yahoo/mojito.git cd mojito/source sudo npm install -g . npm install . 以上四個簡單的步驟，就可以把 mojito module 完整安裝到服務器上，接著就可以開始進入 mojito 的世界 使用方式 mojito 提供了完整的 command line 給開發者使用，接著先建立一個基本 hello world 專案，跟著以下步驟完成第一個專案。首先建立一個 mojito application， mojito create app hello cd hello 切換到目錄之後，再接著建立自己的 mojit，這邊的 mojit 就像是一個應用（application）可能會包含許多個獨立網站體，擁有獨立架構的 MVC ，包含內部設定等，詳細資料可以參考官方的 說明 ，建立 mojit mojito create mojit HelloMojit 輸入指令後，會看到顯示結果如下， creating mojit called 'HelloMojit' (using "default" archetype) ✔ mojit: HelloMojit created! ✔ mojito done. 接著修改 application.json 這個 mojit 設定檔案，讓剛才新建立的 hellp application 指定底下有一個 mojit -> HelloMojit ，讓應用可以去執行 mojit controller ，修改如下， [ { "settings": [ "master" ], "appPort": 8666, "specs": { ...

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"}); 線上範例 線上範例 完整原始碼 ...

上次介紹 到YUI有個好用的widget Calendar，而我們可以使用 YUI2 in 3 的方式來使用 ，今天收到一個bug就是『 Calendar未抓取server時間 』，當下我的感覺就是... 為什麼～為什麼～為什麼～ 經過一番討論之後....我..... 屈服了～ 畢竟事情還是要解決，因此採用方法如下： 1. php 輸出資料於頁面上 2. javascript 取得頁面資料 3. 將資料設定在YUI calendar

引用資料： 來源 if ( Y. UA . gecko > 0 ) { } // e.g. Firefox if ( Y. UA . ie > 0 ) { } // Microsoft Internet Explorer   // Or leverage boolean coercion -- 0 evaluates as false if ( Y. UA . opera ) { } // Opera if ( Y. UA . webkit ) { } // Safari, Webkit 輸出結果會是版號，結果為 0 表示目前並不是使用此瀏覽器。 例如目前使用 Chrome 瀏覽器，詳細資料如下： ie: 0 opera: 0 gecko: 0 webkit: 534.13 chrome: 9.0597 mobile: null air: 0 ipad: 0 iphone: 0 ipod: 0 ios: null android: 0 webos: 0 caja: undefined secure: false os: windows 變數資料可以查詢： YUI 3: YUI Global Object

YUI2 in 3 使用方法，以calendar widget 為例。 使用方法 Y.use('yui2-calendar', function (Y) { var YAHOO, _cal, id = 'calContent', //指定的id pageDate = '9/30/2010', //設定起始日期, 格式均為，月/日/年 minDate = '1/1/2010', //設定最小日期 maxDate = '12/30/2010'; //設定最大日期 YAHOO = Y.YUI2; _cal = new YAHOO.widget.Calendar( '_cal', id, { pagedate: pageDate, mindate: minDate, maxdate: maxDate } ); // 可以設定多國語系 _cal.cfg.setProperty("MONTHS_LONG", ["Jan", "Feb", "Mar", "Apr", "Mai", "Jun", "Jul", "Aug", "Sep", "Oct", "Nov", "Dec"]); _cal.cfg.setProperty("WEEKDAYS_SHORT", ["S", "M", "D", "M", "D", "F", ...