2011/04/14

呆初心者的compass.app第一步

之前因為看到推薦用compass.app來以sass快速寫css(這樣看起來好迂迴XD),非常心動,
前幾天想說有時間,趕快買來用用看,
結果解開下載的壓縮檔後得到分別用來裝在windows、mac和linux上用的壓縮檔,
再解開windows用的壓縮檔,得到一個資料夾,
嗯...沒有readme,也沒有help @@
點擊compass-app.exe就可以開啟,也有小icon出現在右下系統列,
可是看來看去,都看不出來到底要怎麼開始才好,選watch a folder也沒有作用,
光是顯示Nothing to compile.的錯誤訊息,
用Create Compass Project也不知道要Create在哪裡好,囧..
網站上也沒什麼說明,
好吧那上它github的頁面看看...
可能我資質駑鈍,總之還是沒找到什麼說明!!囧!!!
好吧那來看compass的官網,還是一片霧煞煞...
自己亂裝還是很怕弄錯,畢竟這種參照來關聯去的東西,總覺得一個沒擺好就會做白工,
今天索性就不去練劍了,去了一趟RGBA問專家evenwu
很有效的馬上獲得解決!

原來已存在的資料夾無法直接watch,是因為裡面也都沒有設定檔的關係,
要開始用compass.app的話,
就是先點compass的icon,然後Create Compass Project > compass > project

找到想放整個專案的地方,鍵入要開啟的專案資料夾名稱:

接下來螢幕會顯示一個Compass Report顯示資料夾已經開好了!
打開剛剛建好的專案資料夾可以看到會長這個樣子:

其中.sass-cache的資料夾不用理它@@
sass資料夾裡面要放的是我們寫的scss檔案,
至於由這些scss的檔案生成的css檔則會自動出現在stylesheets資料夾中。
不過應該很少人會把放css的資料夾命名stylesheets,所以想更改就要編輯設定檔config.rb。
可以用文字編輯器開啟後把css_dir那一行改平常命名的樣子,像我平常都叫css就是改成css_dir=css

改完之後必須點conpass的icon,選watching XXXXX的項目,停止目前的watching,
然後點History:之下的路徑,重新watching目標資料夾,才能夠套用到新設定。
之後只要config.rb有任何修改,一定要記得進行這個步驟不然不會有作用!
重新整理專案的資料夾後,就可以看到剛剛設定的css資料夾自己跑出來囉!

至於用不到的stylesheets資料夾可以直接刪掉。
這個時候架構大概確定了,如果有本來做到一半的專案突然想使用compass的話,
就照著前面的步驟做,再把原有的檔案們搬進來專案資料夾中吧。

接著來試著編輯一下scss檔案,
在我粗淺的認知中,sass的眾多好處之一就是可以以巢狀的方式撰寫:

寫好存檔後再去css資料夾看,
只要在sass資料夾中編輯的scss檔,會以相應的檔名生成css於css資料夾,
打開會看到前面一大堆很長是因為在scss檔案中寫了@import "compass/reset";而自動生成了css中reset的部份,
我寫的部份其實只會生成這些:

另外專家說,在scss檔裡面可以寫兩種註解,
如果使用//blablabla來做單行註解的話,只會保留在scss檔裡面,不會出現在產生的css中,
若使用/*blablabla*/的話,就會一併在css檔案中出現。

我也問了若是當要把東西交接給不會寫sass的人怎麼辦?
解答是:反正生成的也就是css,把css給交接的人就好了...XD
只是生成的css有一大堆scss行數的註解,對不要用的人來說是種負擔,
這時就在config.rb中加上line_comments = false,就可以把多餘的註解消除得一乾二淨!


其他還有很多好用的設定值,可以讓產生的css自動minify等等,可以參見這裡

至於sass還有哪些超棒的功能,就看官網囉!

總而言之今天學到很多超開心!還好有來問不然自己摸一定摸不出來 >"<
之後要繼續努力 : D

2011/03/29

超隨便的啦!來做大阪燒!


總算搬家搬到有爐子的地方了!脫離只有電鍋的生活真好啊 >w< 為了慶祝,要做點電鍋做不出來的東東! 先來挑戰住日本的時候鄉子小姐做給大家吃過的大阪燒,真的好好吃啊... 當時好像完全不費勁的完成了,應該不太容易失敗... 不過我還是很小心的先看了很多食譜
最後自己決定了在台灣也能很容易做出來的拼湊食譜如下:
材料(1人份)
雞蛋 1個
低筋麵粉 半杯
水 半杯(也可以加牛奶,扣掉相對應量的水,但牛奶加太多會容易焦)
蔥花適量
自己喜歡的料切丁 適量(我放過花枝、蝦仁、馬鈴薯籤都很成功,也可以加山藥泥!)
高麗菜切絲
有油的肉片(如五花肉)
青海苔(百貨公司的超市會賣,我是在新光三越買的)
大阪燒醬汁 我是在松青買的這個,也可以咕狗一下食譜自己做,只是我懶
細柴魚,因為窮我買了普通的煮湯用柴魚自己搓碎 = =;
美乃滋
*以上的杯都是指量米的量杯

好吧,光看上面就已經覺得很隨便了吧 =.=
步驟還更隨便...
  1. 拿一個小鍋子(或大碗公)把蛋打進去(先把蛋弄進去是怕打到臭蛋時已經放很多東西會欲哭無淚)
  2. 確認蛋沒有壞掉後把水、麵粉、自己喜歡的料、蔥花都給倒進小鍋攪一攪
  3. 開始慢慢加高麗菜絲,加進去之後拌一拌讓高麗菜和醬均勻混合,同時把空氣給鬆鬆的拌進去,一直加到大概是「沒有沾不到高麗菜的醬也沒有沾不到醬的高麗菜」為止
  4. 加一點油下去熱平底鍋,熱了之後就把混合物整個給倒進去,稍微用鏟子整形一下讓它圓一點,並且壓一壓讓上面不要太凹凸不平
  5. 調整到中小火以免下面燒焦,然後趁機把肉片黏到還沒煎的表面上,黏滿一整面就把蓋子蓋起來讓中間可以悶熟
  6. 等感覺煎的那一面固定了(可以偷掀起來看看)就要翻面,覺得翻面會發生慘劇的人可以先用盤子或鍋蓋倒蓋上去之後再翻面倒進去煎
  7. 黏肉的那面也煎固定之後再翻面,通常我兩面各會煎兩次(記得都要蓋蓋子悶一下以免中間不熟!)
  8. 都熟了之後起鍋!塗上一層大阪燒醬
  9. 再灑上青海苔,青海苔上面用美乃滋畫格子狀,最後再灑上柴魚粉
  10. 這樣就完成了!

因為得意忘形所以做好才想到要拍照...
不過做完真的讓人很有成就感!
材料不會太貴,而且吃起來也不輸給ten屋之類的專門店!
非常推薦有平底鍋可用的人嘗試的料理 : )

2011/03/15

客服難為

因為目前雜七雜八的工作中也包含要看客服回覆,
導致我變得很愛寫信去客服信箱跟打客服電話..
當然是我真的有問題想問啦,但會這麼勤勞大部分是好奇的成份....

以目前的經驗來說不得不推的就是hypo了!
他們的blog副標題也寫著「常常知錯能改的 hypo 團隊」真不是蓋的!
我只寫過兩次信,
第一次反應說扣環的黏膠會留殘膠希望能改善,
第二次是提出我對新產品的期望,
感覺都是很容易被敷衍過去的問題...
沒想到他們不但很認真的回答,信中還預告會推出新商品的時間,
短短沒幾個月竟然都實現了!驚!!
光因為這樣就讓貧乏的我願意再繼續花錢在他們不便宜的產品上,畢竟他們是真的注重品質又認真解決問題的。

不過最近在博客來廣告信上看到新書的介紹,
微空間大設計:全球39間超小型風格商店之創意現場直擊
光看介紹還蠻吸引人的,就點進去看了一下試閱的內頁,
沒想到錯字之多讓人傻眼到不行!!試閱也才4頁啊!!
這種試閱看完還會有人肯買嗎.......=.=

於是我決定把這個艱難的問題丟給博客來客服,就寫了以下這樣的信:
--
http://www.books.com.tw/exep/prod/booksfile.php?item=0010497400&
請問這個商品頁的內文試閱真的是書中的文字嗎?
對於這本書雖然有興趣,但是看過試閱後對於多到嚇人的錯字量感到不敢置信!
煩請告知試閱文字真的是和書中文字一模一樣,還是負責打字的人太混造成的?
謝謝。
--

等了9天終於有回覆了,意料外的非常短:
--
親愛的會員您好:

感謝您的來函,經查詢您詢問的商品《微空間大設計:全球39間超小型風格商店之創意現場直擊》,商品內容為圖片與文字組成,建議您可點閱商品圖片試閱看看。以上說明,提供您參考,謝謝您。
http://www.books.com.tw/exep/qa/webmail.php?TRACKID=5FC16231500E49F86654D88ECA2DB315
有任何問題請您再來信(點選以上連結),當竭誠為您服務。

因為用心,所以我們有自信可以給您最好的!
博客來 敬上
--

.........什麼鬼!??難道他以為我沒有看過試閱的圖嗎?
那個字小得跟鬼一樣,我連是不是跟它的文字試閱一樣都很難看出來了,還要我自己挑錯字!???最好是啦!!
告訴我實際上到底是什麼狀況有這麼難嗎!!!!
瞬間十分火大,不過仔細想想...要是這問題丟給我我也不知道該怎麼回...

Ans: 您好,我們的試閱頁面文字與實際書籍中的文字完全相同,並沒有輸入錯誤的問題...
=> 太好了書賣不出去了 =.=
Ans: 您好,非常抱歉經查證確實是我們的工作人員輸入有誤,未來我們會更謹慎....
=> 太好了這根本就砸自己的腳 =.=


也許身為客服他真的也只能這樣回了..
可是這跟詢問者的期待答案真是差了十萬八千里遠啊!!
想了很久...覺得還是應該好好針對使用者的問題回答,這才是最誠懇的解決方式~"~
如果真的是書錯字百出,那就承認後告知出版社,再把書下架之類(我實在覺得賣都是錯字的書不太道德..)。
如果真的是自己的人輸入錯誤,那就承認之後把字改正。
只是要做到這種程度,還得要看上層的器量了。

真是客服難為啊。

2011/01/18

Firefox Kit 入手炫耀文

耶~~~~~~~~~~~~~~~~~~~~(先歡呼一下)

先前看到為了Firefox手機版的推出,Mozilla辦了一個寄明信片到他們辦公室就可以得到Firefox Kit組的活動,
身為一個愛寄明信片的人,當然是二話不說的馬上參加!

寄去之後等了好一陣子,才收到一封Mozilla寄來的email,附上一個用來填地址的表單連結,
填完之後又等了很久很久...(真的很久,我都以為寄丟了)

今天終於收到一個謎樣的國外來的包裹,
裡面是這樣:

比想像中大包XD

不過有感覺出在推這波主打mobile版本的好像只有這個貼紙,
(不太明顯的)寫了"Firefox goes mobile"在左邊


然後有這個firefox的吊帶:


還有貼紙:


以及橡膠手環,可惜我已經不年輕了,不好意思戴...
一邊印著I support the Open Web
另一邊則是Mozilla。
因為是凹凸的字所以拍不清楚Orz


最喜歡的就是徽章啦!馬上拿來別在我的破包包上,馬上整個都感覺潮了起來~



目前(2011/01/18)這個活動還在辦喔!
請至這個連結
看第2項"Get a Firefox Mobile Kit",寄明信片並附上自己的email到其中一個地址就可以了!

當然更要請大家多投入Firefox的懷抱,離開萬惡的IE吧!
有智慧型手機的人也可以去下載Firefox Beta for mobile來試試看囉 : D

2010/12/28

用PC瀏覽器開啟手機版網頁

最近愈來愈多大網站開始推出手機版本的網頁了,
但是有很多想讓人一窺原始碼的手機版網頁偏偏會判讀使用的瀏覽器,
即使點選「手機版」的連結,還是會被識破而跳轉回一般網站或直接顯示「您的瀏覽器不支援此頁面」,
看了真是讓人心癢難耐...

不過我沒有這麼容易投降的!
先去下載宣稱可以
"Test and debug on Opera Mobile using a Mac or PC"的Opera Mobile emulator來踹踹看!
結果看起來這個東西雖然可以模擬很多種手機的呈現,甚至觸碰、滑動的效果,
但卻沒有檢視原始碼的功能...orz

只好繼續拜咕狗大神,
好不容易找到了這篇教學文章
原來Firefox的使用者只要安裝一個外掛就可以開啟手機版網頁了。
因為外掛已經改版的關係,目前使用的方式和教學文章中有些不同。
以下列出我測試過的步驟:
  1. 還沒有使用Firefox的人,請先去下載
  2. 安裝外掛Modify Headers
  3. 在Firefox上面的工具列找到「工具」,選單的最下方應該可以找到「Modify Headers」的項目並點開。

  4. 上面有一條可以輸入的欄位,在最左欄(Action)點選「add」。
  5. 第二個欄位(Name)中必須輸入「user-agent」
  6. 第三個欄位(Value)需輸入的是「Mozilla/5.0 (SymbianOS/9.2; U; Series60/3.1 NokiaE51-1/100.34.20; Profile/MIDP-2.0 Configuration/CLDC-1.1 ) AppleWebKit/413 (KHTML, like Gecko) Safari/413」
  7. 第四個欄位(Comment)可以自己寫點註解,再點擊「Save」的按鈕就可以了!

  8. Save之後整個項目會被移到下面的列表,右側有一個綠色/紅色的圓點表示該項目的啟用/停用,點兩下可以切換。要使用時必須切換至「啟用」的狀態。

接下來測試一下,在切換成Disable的狀態下讀取Google Mobile的話,會被判讀出使用的是一般瀏覽器而自動跳轉到http://www.google.com/mobile/


切換成Enable的狀態後重新進入Google Mobile,就能正常瀏覽手機版頁面,按下Ctrl+U馬上就可以把原始碼看光光囉!

2010/09/28

寶藏巖.五年

路
上上個週末因為誤信了寶藏巖已經開村的消息,
在凡那比颱風登台的前夕騎著腳踏車再次探訪多年不見的寶藏巖。

以前因寶藏巖離學校非常近,大學時又住在學校(而且還天天蹺課),
自從發現寶藏巖的小村落便愛上了那帶著廢墟氣息的氛圍,三不五時往那裡跑。
最喜歡的不是晴天而是雨天,
循著蜿蜒的小路一直走到最頂端的木平台,坐在那裡吹風淋雨,可以坐一整個下午發呆都不會有人跟我搶。
回宿舍再洗個熱水澡,非常享受。

畢業後搬離學校,距離遠了,上班也無法像上課一樣自由的想蹺就蹺..
一陣子沒有去看寶藏巖,再去看的時候竟然圍起了工地圍牆,說是要做什麼整建的我也搞不清楚,
安心的想著應該沒多久就可以再開放了吧?
沒想到就這樣過了好幾年。

重新踏上寶藏巖的瞬間是興奮的,畢竟真的好久好久沒看見了,
雖然還有一些人在施工,但總之拿起相機先走走晃晃的拍些照...
沿著寶藏巖外圍往腳踏車道的方向走,
果然變了很多。
沿著牆的一片,以前是老阿嬤的小菜園

現在被全部剷平了,鋪上一片草皮。

可能因為匆匆趕工鋪上吧,看起來有點焦黃,
還安置上了幾隻石刻鳥,感覺更是淒涼。

以前有些看起來很克難的木頭階梯

現在也都不見了。
我沿著新蓋好的高級階梯往上爬,
邊爬邊想著這裡真的變了好多..一邊搜尋能拍照的點。
沒想到從階梯上突然衝出一個穿著保全服裝的大叔對著我吼:
「這裡還沒開放!!你在這裡做什麼!!!」

背著三台相機的我整個很傻眼的看著他說...
「拍照啊 O____O;
不是已經開放了嗎...聽說開放了我才來的......」

保全大叔繼續大吼:
「還沒!!還沒開放!!10月2號才開!!到時候再來!
不准再往裡面走了!這裡有九十幾台攝影機,你在哪裡我們都很清楚!!」

我只好往回走...
一邊想著..以前這裡除了小土地公,哪有什麼保全、攝影機..
現在除了滿山的攝影機,還裝了夜間照明用的大燈,
入村的地方也正在施工,想來是為了開村活動要搭建表演用的平台,
村口還有另一個保全大叔在值班,於是去問問他為什麼要如此嚴密監視,
大叔說是因為之前封村時有個後台很硬的人擅自闖進施工中的地方,結果發生意外死了,
於是這個很硬的後台就去跟市政府吵鬧,索賠一千萬。
市政府當然不願意賠,於是把皮球踢給施工單位,叫施工單位賠一千萬。
施工單位當然更不願意賠,說整個工程賺也沒賺到一千萬就要我賠一千萬!?
總之現在還在吵鬧中,要等10月移交給文化局才能讓一般人進去。

我:「...Orz...我可以簽一個死了也不會告你們的切結書然後進去拍照嗎....」
大叔:「...Orz...沒辦法啦...」

雨愈下愈大,我也只好離開了。
離開之前保全大叔跟我說10月2日再來吧,有很盛大的開村活動喔!有節目表演喔!
我只能苦笑..
並不是所有東西都是有人去管理、改建就會變得更美好,
我喜歡的是那安靜古樸的寶藏巖,
不是有表演、很熱鬧、人山人海的寶藏巖啊。
可惜時間再也回不去了。

但美好的寶藏巖永遠在我心裡。

2010/09/18

解決Win7環境IETester無法模擬本機檔案之IE7狀態問題

前陣子電腦重灌,
因為畢生難得終於有好人可以使用(無誤),於是我很懶惰的把事情都丟給阿饅。
阿饅也很理所當然的幫我灌了Win7,
之後我自己灌了新下載的IETester v0.4.4
沒想到要測網站的時候竟然很震驚的發現...IE7的頁籤測本機端檔案完全不能作用了!!
囧...大驚之下趕快開始拜google大神,

結果看到google大神說,只要取消相容性執行的勾勾就可以了!
可是我找到相容性卻發現...根本就沒有勾啊@@
也試了選XP SP2、XP SP3的相容性執行來試試看...結果更慘,連網址列要輸入都沒辦法了..

無奈之下只好繼續google,
於是有人提供了一個有點麻煩但是真的有用的方法!
解法如下:

舉例來說,我想要開啟的頁面是「E:\web\index.html」
  1. 點選IETester上面的「所有IE版本」
  2. 勾選IE7,並在「輸入要在所有IE版本開啟的網頁網址」欄位內輸入「該網頁的資料夾位置」
    在本例中就是輸入「E:\web\」。
  3. 輸入完按下Enter後,網頁顯示的部份會以一個很像windows資料夾的方式開啟該資料夾路徑,
    此時再繼續在網址列中接著輸入剩下的檔名「index.html」,按下Enter。
  4. 上面的網址列就是我要的「E:\web\index.html」,而且網頁也就這樣很神奇的顯示了!

就是這樣~分享給也遇到這個問題的人。
不過還是希望IETester趕快改版來解決這個問題吧!