寫了一個用到flask的小專案
用python寫web果然一樣簡潔，還蠻喜歡的
今天google到的一個小成果是:
http://flask.flyzen.com/ - flask官網的中文翻譯XD (只有Quick Start部分)
英文看不懂可以去翻翻~
另外有一個必須記錄的地方..
url_for裡面的值不是@app.route(OOXX)裡面的OOXX
而是對應的 def XXOO 的XXOO
詳細看這邊:
http://stackoverflow.com/questions/3683108/flask-error-werkzeug-routing-builderror
星期二, 9月 13, 2011
Compass
用了只能說.. cool!
簡單紀錄一下安裝方法:
首先，先確定你有安裝ruby，有ruby之後開cmd打
get install compass
安裝完成XD
接著看一下參考資料
http://marlonyao.iteye.com/blog/652103
http://miau715.blogspot.com/2011/04/compassapp.html
http://www.i-design.tw/archives/170
compass有蠻多套件可使用的，這邊介紹一下 fancy-buttons
網站上的影片可以知道fancy-buttons可以做到怎麼樣的程度
打一段code就有這麼棒的效果實在很方便呀!
安裝
gem install fancy-buttons
要建立compass專案的方法是
compass create 專案名
加入fancy-buttons的話則要用
compass -f fancy-buttons -r fancy-buttons 專案名
最後，到 ruby資料夾/bin 找compass開啟 (不是compass.bat)
加入
require 'compass-colors'
require 'fancy-buttons'
因為fancy-button需要compass-colors這個套件
所以記得要先
gem install compass-colors
在寫scss的時候，可在專案目錄下用
compass watch
這樣可在你的scss變動時，自動產生對應的css，非常方便!
( 不過不知道為什麼 compass -w 是沒用的 )
簡單紀錄一下安裝方法:
首先，先確定你有安裝ruby，有ruby之後開cmd打
get install compass
安裝完成XD
接著看一下參考資料
http://marlonyao.iteye.com/blog/652103
http://miau715.blogspot.com/2011/04/compassapp.html
http://www.i-design.tw/archives/170
compass有蠻多套件可使用的，這邊介紹一下 fancy-buttons
網站上的影片可以知道fancy-buttons可以做到怎麼樣的程度
打一段code就有這麼棒的效果實在很方便呀!
安裝
gem install fancy-buttons
要建立compass專案的方法是
compass create 專案名
加入fancy-buttons的話則要用
compass -f fancy-buttons -r fancy-buttons 專案名
最後，到 ruby資料夾/bin 找compass開啟 (不是compass.bat)
加入
require 'compass-colors'
require 'fancy-buttons'
因為fancy-button需要compass-colors這個套件
所以記得要先
gem install compass-colors
在寫scss的時候，可在專案目錄下用
compass watch
這樣可在你的scss變動時，自動產生對應的css，非常方便!
( 不過不知道為什麼 compass -w 是沒用的 )
星期四, 9月 08, 2011
[Titanium] tableview
在Titanium找了許久一直沒看到Android的listview
沒想到原來就是Titanium的tableview
那要怎麼像在listview一樣，在tableview裡面自訂格式呢?
這邊寫得很詳細: (好不負責XD)
http://cssgallery.info/custom-row-for-tableview-in-appcelerator-titanium/
這裡也有兩個使用tableview的小技巧，也順便紀錄一下
http://blog.bahrenburgs.com/2010/08/useful-titanium-mobile-tableview-tips.html
沒想到原來就是Titanium的tableview
那要怎麼像在listview一樣，在tableview裡面自訂格式呢?
這邊寫得很詳細: (好不負責XD)
http://cssgallery.info/custom-row-for-tableview-in-appcelerator-titanium/
這裡也有兩個使用tableview的小技巧，也順便紀錄一下
http://blog.bahrenburgs.com/2010/08/useful-titanium-mobile-tableview-tips.html
javascript的XML操作
不否認這個問題是寫Titanium的時候才遇到的XD
真的沒什麼用js操作xml的機會，剛好也趁機學習了
這邊有很完整的 DOM Level 2 API 的方法，不過沒有怎麼使用，也沒有XPath
http://www.w3.org/TR/DOM-Level-2-Core/ecma-script-binding.html
而W3school的就超完整 API和範例都有了~ 大推!
XML DOM Reference : http://www.w3schools.com/dom/dom_nodetype.asp
XPath Tutorial : http://www.w3schools.com/xpath/xpath_examples.asp
xml中Node和Element的區別
http://blog.csdn.net/wcydiyi/article/details/4432636
javascript的XPath用法，個人是覺得不錯 不過因為最後沒用到沒有細看
https://developer.mozilla.org/en/Introduction_to_using_XPath_in_JavaScript
因為用XPath一直有問題，最後我是用getElementsByTagName完成的
getElementsByTagName在W3school可以找到用法
這邊也有一點點例子
http://developer.51cto.com/art/200902/109968.htm
另外提一下
Titanium的documentElement要用XPath的話，是使用evaluate而不是selectNodes
要取element裡面的值是用 .text 而不是 .textContent
這些是跟w3school的API有一點不同的
或許還有其他的，不過有遇到的就這些!
也歡迎大家補充!
真的沒什麼用js操作xml的機會，剛好也趁機學習了
這邊有很完整的 DOM Level 2 API 的方法，不過沒有怎麼使用，也沒有XPath
http://www.w3.org/TR/DOM-Level-2-Core/ecma-script-binding.html
而W3school的就超完整 API和範例都有了~ 大推!
XML DOM Reference : http://www.w3schools.com/dom/dom_nodetype.asp
XPath Tutorial : http://www.w3schools.com/xpath/xpath_examples.asp
xml中Node和Element的區別
http://blog.csdn.net/wcydiyi/article/details/4432636
javascript的XPath用法，個人是覺得不錯 不過因為最後沒用到沒有細看
https://developer.mozilla.org/en/Introduction_to_using_XPath_in_JavaScript
因為用XPath一直有問題，最後我是用getElementsByTagName完成的
getElementsByTagName在W3school可以找到用法
這邊也有一點點例子
http://developer.51cto.com/art/200902/109968.htm
另外提一下
Titanium的documentElement要用XPath的話，是使用evaluate而不是selectNodes
要取element裡面的值是用 .text 而不是 .textContent
這些是跟w3school的API有一點不同的
或許還有其他的，不過有遇到的就這些!
也歡迎大家補充!
Titanium mobile 介紹及資源
自從COSCUP2011聽到Titanium就很動心
這幾天自己試了一下，真的名不虛傳的好用啊
下面留一點google到的教學資源，不過有些分頁可能被我關掉了...
介紹
http://clayliao.blogspot.com/2010/11/titanium-mobile-tutorial.html
http://www.lis186.com/?p=2235
Titanium Mobile的API:
http://developer.appcelerator.com/apidoc/mobile/latest/
這個外國作者 : Dan Tamas 的Blog寫得很棒!
特別是我覺得 Seven days with Titanium 這篇系列文很值得看看
blog 的 Titanium Appcelerator 分類 : http://cssgallery.info/category/titanium-appcelerator/
另一個外國作者的blog，不過關於Titanium的資料就相對少點
http://blog.bahrenburgs.com/search/label/Titanium
這幾天自己試了一下，真的名不虛傳的好用啊
下面留一點google到的教學資源，不過有些分頁可能被我關掉了...
介紹
http://clayliao.blogspot.com/2010/11/titanium-mobile-tutorial.html
http://www.lis186.com/?p=2235
Titanium Mobile的API:
http://developer.appcelerator.com/apidoc/mobile/latest/
這個外國作者 : Dan Tamas 的Blog寫得很棒!
特別是我覺得 Seven days with Titanium 這篇系列文很值得看看
blog 的 Titanium Appcelerator 分類 : http://cssgallery.info/category/titanium-appcelerator/
另一個外國作者的blog，不過關於Titanium的資料就相對少點
http://blog.bahrenburgs.com/search/label/Titanium
星期四, 9月 01, 2011
IE的CSS hack
這篇文章寫的就非常清楚了，這邊節錄一下我覺得比較常用的:
(以下皆節錄於: http://sofree.cc/ie6-ie7-ie8-firefox-css-hack/ )
(以下皆節錄於: http://sofree.cc/ie6-ie7-ie8-firefox-css-hack/ )
區別IE和Firefox
【辨識符號】：「\9」
【範例練習】：
#tip {
background:blue; /*Firefox 背景變藍色*/
background:red \9; /*IE6、IE7、IE8背景變紅色*/
}
【說明】：因為IE瀏覽器看得懂「\9」，但是非IE的瀏覽器一律看不懂，因此就可以用這個語法來區分IE和Firefox(非IE瀏覽器，像是Opera、Google Chrome、Safari等)，因此以上CSS範例中，非IE瀏覽器是顯示藍色背景，IE系列瀏覽器是顯示紅色背景。
區別IE6、IE7、Firefox (方法 1)
【辨識符號】：「*」、「_」
【範例練習】：
#tip {
background:blue; /*Firefox背景變藍色*/
*background:black; /*IE7 背景變黑色*/
_background:orange; /*IE6 背景變橘色*/
}
【說明】：IE7和IE6可讀「*」(米字號)，IE6又可以讀「_」(底線)，但是IE7卻無法讀取「_」，至於Firefox(非IE瀏覽器)則完全無法辨識「*」和「_」，因此就可以透過這樣的差異性來區分IE6、IE7、Firefox，
區別IE6、IE7、IE8、Firefox
【辨識符號】：「\9」、「*」、「_」
【範例練習】：
#tip {
background:blue; /*Firefox 背景變藍色*/
background:red \9; /*IE8 背景變紅色*/
*background:black; /*IE7 背景變黑色*/
_background:orange; /*IE6 背景變橘色*/
}
【說明】：因為IE系列瀏覽器可讀「\9」，而IE6和IE7可讀「*」(米字號)，另外IE6可辨識「_」(底線)，因此可以依照順序寫下來，就會讓瀏覽器正確的讀取到自己看得懂得CSS語法，所以就可以有效區分IE各版本和非IE瀏覽器(像是Firefox、Opera、Google Chrome、Safari等)。
jquery plugin (3)
jsTree: 做樹狀圖的plugin，有點複雜不過功能很齊全，支援ajax、crrm等
http://www.jstree.com/documentation
jquery.hotkey: 熱鍵plugin，可以簡單實現網站上如ctrl+w的自訂功能
https://github.com/jeresig/jquery.hotkeys/blob/master/jquery.hotkeys.js
jquery.cookie
https://github.com/carhartl/jquery-cookie/blob/master/jquery.cookie.js
printf: 在js上提供類似C的printf函式
http://plugins.jquery.com/project/printf
jquery.address: 類似jquery.history，可用簡單的方式實現deep link(ajax的上一頁)
官網文件 : http://www.asual.com/jquery/address/docs/
不錯的中文API: http://julabs.me/blog/front/jquery-plugin-deep-linking-methods/
簡介: http://blog.maxiang.net/jquery-address-for-deep-linking/59/
Tiny Scrollbar : 漂亮的捲軸
http://www.baijs.nl/tinyscrollbar/
附上一個很多分類plugin的網站
http://www.open-open.com/ajax/3_Tree.htm
訂閱：
文章 (Atom)