Evernote Web Clipper + NoScript 在 Firefox 上的擷取問題

Published on:

這篇是個很短的筆記....

簡單說,Evernote Web Clipper 在安裝了 NoScript 的 Firefox 上擷取的時候會有一點小小的問題...原因是 NoScript 把 evernote 外掛做的事情當成 XSS 了。解決方式很簡單,根據這篇討論所說的,只要在 NoScript 的 XSS 白名單中加入下面這行就可以了:

^https://www.evernote.com/noteit.action(.+)?

Logdown 的 Blogger Import 成功了!

Published on:
Tags: 隨寫

沒錯...就如同標題所說的,Logdown 的 Blogger Importing 成功了!我等了兩個多月的功能終於能用了.....

可是啊,其實是我自己 lag 了。故事是這樣的....

我在 7/13 開始用 Logdown,7/15 在 import 失敗之後終於鼓起勇氣寄出檔案請官方修 bug。


結果沒想到 xdite 早在 7/23 就把問題修掉了,可是因為人在軍中,漏看這封信....orz

不曉得 bug 已經修正的我,昨天又心血來潮試著 import,結果還是失敗XD 在 twitter 上碎碎念講這件事,結果剛剛竟然收到 @xdite 回覆


原來是因為我沒有壓縮的關係....壓縮成 zip 之後再 import 就成功了 :P

為了慶祝終於 import 成功,特發此文以茲紀念!:D

好用的 mockup/wireframe 工具:Balsamiq Mockups

Published on:

對於一個美術白癡來說,要設計一個網站的外觀,實在有點困難。有時候要把心中構想先畫出來給人看,都覺得力不從心,所以只好直接寫一個網頁出來,調 CSS 調老半天,只為了把心中的畫面呈現給人「看看再說」。上面所說的作法,做出來的東西比較類似於 prototype,也就是已經包含了部分 CSS/JavaScript 的完整網頁,也許缺的只是真正會 work 的功能還有各種比較細節的調整而已。但萬一這樣做出來的東西不合人家(也許是主管、客戶,甚至是自己)的胃口,那花的這些時間就算沒有全部白費,也浪費掉不少了。

或許有人會說,「我寫 prototype 超快我超強!」但你再強你有人家設計師用 photoshop 隨便畫畫強嗎?雖然人家畫出來的就是一張圖,不會動也不能點,但是省時省力,又能把想表現的重點突顯出來,用來作為前期的討論跟比較相當適合!可能講成這樣還是有人鐵齒...那試想一個狀況:客戶看了你的 prototype 之後,跟你講了一堆元件說要換位置,下面這個按鈕移到上面去(立刻修改HTML),這個選單要大一點(趕快調整 font-size, width, height,啊破版了再改一下另外那個...),這些東西的間距要小一點,整個寬度要一樣(調 margin 調老半天).....總而言之,對於外觀的要求,在圖片上討論常常比在程式碼中討論來得容易,所以也才有所謂的 wireframe 與 mockup 的出現。

這邊不深究 wireframe 與 mockup 兩者的差別,下面通通用 mockup 來表示。Mockup 是一種用來呈現成品大致外觀的工具,他不能拿來使用,但是可以讓人容易想像成品的呈現方式 (人類果然是視覺的動物...)。以前看過一些人是用 photoshop 之類的影像處理軟體在畫 mockup,之後才去作切版套版...但對於一個美術白癡而言實在太困難了,小弟實在是 photoshop 苦手orz。好在有人推薦了這套工具:Balsamiq Mockups,他是一個很好用的畫 mockup 工具,內建數十種常用元件,可以用來設計網站、視窗程式或是手機介面。下面就直接來介紹一下。

下載跟安裝都很簡單,不多說了,Google 一下或是點上面的連結就可以下載....我是在 Mac 上安裝的,但他也有 Windows 跟 Linux 版,甚至還有 Google Drive 的 plugin (!)

這是開啟後的畫面,可以看到左下角指出我只有 7 天的試用期,購買的話則是美金 $79,其實對我來說有點貴XD 但如果是工作所需的話,其實這個價倒不會有什麼問題...

只要花幾分鐘,從上面拉一些元件下來,打幾個字(不打也沒關係,他都有預設的文字),就可以快速「畫」出一個網站...我實在很喜歡這個 browser window,讓我畫出來的東西突然加了20分....XD

覺得中間的框框實在不太好看...所以就塞了點假文章進去。(我用了一個英文的假文產生器,如果想寫中文的可以參考看看和多的中文假文產生器) 嗯....看起來還算有模有樣呢~

裡面的元件實在太多了,每次都要用選的很麻煩,如果知道大概名字的話,可以透過左上角的 Quick Add 直接搜尋加入

元件中文字的設定也很簡單,常常都是簡單打個字他就會幫你做出想要的東西了,前提當然是元件要用對...每個元件預設都有範例可以依循,所以不用擔心不會打,基本的用法都已經在範例中了!

每個元件也都有相關的一些外觀設定可以用,可以隨意玩玩

例如這個圖片元件(Image),預設是一個 placeholder 的角色,但也可以讓你放入真正的圖片在你的 mockup 中

還可以剪裁圖片成你要的樣子

放在畫面中大概就長這樣.........XD

另外 Balsamiq Mockups 也提供 iPhone 的框框,最有趣的是還有 iPhone 4 跟 iPhone 5 可以選XDDDD,當然也有不同方向提供你作設計。

既然有手機元件可以玩,那就自以為很潮的來作個手機版網頁...把旁邊的主要元素複製一份移到手機框框裡面,調整大小之後,就完成了基本的元素!其實就像 RWD 一樣,都是一樣的元素,只是套用了不同 CSS 一樣...然後接著在右上角加個會跳出選單的小 icon,噢,Balsamiq Mockups 提供的 icon 還滿多的,還不賴!

於是乎....就完成了一個看起來好像有模有樣的「網站雛形」。如果要拿來做文件,或是提供給一般人看,其實這樣就可以假裝很威了,哈哈!這些東西做起來花不到 20 分鐘呢~其中還包含慢慢瀏覽有哪些元件可以用的時間。如果用 photoshop 來畫,以我的能力可能要花一整個早上吧....@@

再來是關於中文的問題,以前的版本會無法顯示中文,所以上面的 demo 才會全部都用英文來當範例,結果沒想到,現在的版本已經把中文的問題解決了XD 所以不需要「Use System Font」才能使用中文囉!雖然這字體實在不像英文版這麼可愛....但至少能用啦XD

最後,總不能畫完東西只給自己看吧XD Balsamiq Mockups 提供 export 的功能,可以輸出成 PNG 圖檔或是 PDF 檔,當然也可以放進系統剪貼簿或是直接列印出來。

這樣的工具也許有些人(可能是專業設計師或 photoshop 強者)認為沒什麼,但每樣工具都有他不同的目標。Balsamiq Mockups 並沒有辦法用來作各種不同的繪圖,但是他專注於繪製 mockup 這件事上,所以可以讓這件事變得很簡單,門檻很低,特別是對小弟這種美術白癡來說相當受用!不管是網站設計公司、SOHO或是要設計教材之類的用途,都相當實用。推薦~ :P

Trying Logdown

Published on:
Tags: 隨寫

其實一直想要一個好寫的 blog system...手刻 HTML 太麻煩了,幾乎所有 WYSIWYG 編輯器也都無法滿足我對文章的控制慾。雖然後來發現了 Markdown,但唯二看過使用 Markdown 的 blog,一是 Tumblr,二是 Octopress,都有讓我無法接受的部分...

所幸神人 XDite 也覺得其他的 blog 都不好用,所以自己刻了一個XD 這也是我為什麼會在這裡寫文章的原因....雖然隱約覺得在 Logdown 編輯器打字的反應好像有一點點延遲,但還勉強可以接受就是了@@

希望之後可以 Happy Blogging......:D

在 Windows 上安裝 Redmine 2.3.0 的筆記

Published on:

Redmine 是一套很有名的專案管理系統,建構於 Ruby on Rails 之上。網路上搜尋「Redmine」都可以找到很多相關資料,這邊就不贅述功能。

由於 Ruby/Rails 在 MacOSX 跟 Linux 相對比較友善,所以要找 Redmine on Windows 的安裝教學實在不太好找,中文資料更是寥寥可數。加上 Rails 進步迅速,很多 07~09 年的資料其實很可能都已經過時,所以乾脆自己研究完寫一篇XD

不過由於現在實在沒什麼空寫網誌,所以簡單的把方法跟過程記錄一下....

這邊主要是根據 http://www.redmine.org/projects/redmine/wiki/RedmineInstall 上面的說明,而 Redmine 安裝相依於特定的 rails 與 ruby 版本,可以參考前面這個連結裡面的表格。而我這邊以 Ruby 1.9.3 + Rails 3.2.13 + Redmine 2.3.0 為目標。

以下為安裝步驟:(注意!安裝過程中的路徑最好都不要有中文,如果出現奇怪的問題,請先嘗試把目錄或檔案放到沒有中文路徑的位置。目前我已經碰到某些 gem file 放在中文路徑會沒辦法安裝)

  1. 下載 Ruby installer 與 Development Kit (這邊我都選 32-bit 版本)

    http://rubyinstaller.org/downloads

  2. 下載 Redmine (點第一段的 RubyForge 連結)

    http://www.redmine.org/projects/redmine/wiki/Download

  3. 安裝 Ruby

    雙擊 ruby installer 並一直 Next,注意中途應選擇「Add Ruby executables to your PATH」

  4. 安裝 Development Kit

    將 Development Kit 解壓縮到 C:\Ruby193\DevKit,並打開命令提示字元執行以下指令

ruby C:\Ruby193\DevKit\dk.rb init
ruby C:\Ruby193\DevKit\dk.rb install
  1. 解壓縮 Redmine 至特定目錄,在此以「$REDMINE」表示

  2. 進入 $REDMINE\config\ 目錄中,複製 database.yml.example 至 database.yml

  3. 根據自己的環境,設定 database.yml

    在此我打算使用 SQLite3 作為 production (雖然官方不建議),所以只需要很簡單的3行

production:  
adapter: sqlite3  
database: db/redmine.sqlite3  
  1. 安裝相依 gems
cd $REDMINE  
gem install bundler  
bundle install --without development test rmagick # rmagick 還需要額外安裝其他東西,乾脆就先不用了  
  1. 設定 Redmine
set RAILS_ENV=production  
rake generate_secret_token  
rake db:migrate  
rake redmine:load_default_data  
ruby script/rails server webrick -e production  
  1. 到這裡,Redmine server 應該已經 run 起來了,連上 http://localhost:3000/ 看看吧!

通常應該這樣就結束了,但是發現某些文章提到用 mongrel,他似乎也是個 ruby 寫的 web server 吧....查了一下資料發現,有個更新的東西叫做
thin,根據 thin 的說法,它用了 mongrel parser....然後效能比 mongrel 好.....哎呀反正我也不太懂,反正試試看就對了XD

安裝 thin 很簡單:

gem install thin  

執行則是

thin start

結果竟然跑不起來?找了一些資料才發現,原來要加上 Gemflie.local 才行....反正結論是,應該這樣安裝

  1. 先編輯 $REDMINE\Gemfile.local gem 'thin'

  2. 執行以下指令

bundle install  
thin start  

最後來個番外篇...如果想把相關檔案全都抓下來,拿到一台沒有網路的電腦安裝,應該怎麼做呢?可以透過 bundle 幫我們做這件事!

$REDMINE 下,執行 bundle package,就可以在 $REDMINE\vender\cache\ 裡面找到目前配置下所需的所有 gems,但有趣的是,bundler 自己不在裡面.....XD 要找到 bundler 的 gem 的話,可以去 C:\Ruby193\lib\ruby\gems\1.9.1\cache\ 裡面撈...找到 bundle 與 bundler 這兩個 gem,直接複製即可。(別問我,我不曉得這兩個分別是幹嘛的....)

另外,我們還得偷帶走 $REDMINE\Gemfile.lock 這個檔案,這樣 bundle 才能在沒有網路連線的情況下,了解 gems 之間的相依性。既然都拿 Gemfile.lock 了,那剛剛安裝 thin 用的 Gemfile.local 也順便帶走吧!所以,想要離線安裝,先準備好以下這些檔案

  • Ruby Installer
  • Development Kit
  • Redmine
  • 挖出來的 gems (包含 bundler, bundle, 以及 bundle package 產生的那些)
  • Gemfile.local 與 Gemfile.lock

然後根據以下步驟安裝

  1. 進行上面一般安裝步驟的第 3~7 步
  2. 安裝 gems (假設我把檔案放在 C:\Ruby193\gems.local)
cd C:\Ruby193\gems.local  
gem install -l *  
  1. Gemfile.localGemfile.lock 丟回 $REDMINE
  2. 執行以下指令
cd $REDMINE  
bundle install --without development test rmagick --local  
  1. 進行一般安裝步驟第 9 步
  2. 完成!

希望上面的筆記也可以對其他人有幫助.....

修改 Debian/Ubuntu 預設 editor

Published on:

前幾天突然想到一個問題....由於 Ubuntu 預設 editor 是 nano,這對於一個 vim user 來說實在是不太舒服啊XD 所以稍微找了一下,找到一個很簡便的作法,可以用來修改預設 editor,方式如下:

$ sudo update-alternatives --config editor
[sudo] password for crboy: 
There are 4 choices for the alternative editor (providing /usr/bin/editor).

 Selection Path Priority Status
------------------------------------------------------------
* 0 /bin/nano 40 auto mode
 1 /bin/ed -100 manual mode
 2 /bin/nano 40 manual mode
 3 /usr/bin/vim.basic 30 manual mode
 4 /usr/bin/vim.tiny 10 manual mode

Press enter to keep the current choice[*], or type selection number: 3
update-alternatives: using /usr/bin/vim.basic to provide /usr/bin/editor (editor) in manual mode.
$ 

其實重點就是那個 sudo update-alternatives --config editor 而已啦XD 後面照著指示操作就好了....:)

PHP 自動發信程式

Published on:

之前為了發 COSCUP 的通知信,參考網路上的範例用 PHP 寫了個小程式。我把範例程式放在這個 gist 上:https://gist.github.com/3135053

其實明顯看得出來,程式沒什麼架構,純粹只是為了可以 work 而寫的拋棄式程式。不過丟出來一方面可以當自己的筆記,以後要找比較好找,另一方面,也許另一個人想要寫類似的小玩具的時候就可以參考了 :P

以下是一些簡單的介紹。

我使用這個程式的狀況是,我需要寄一封信給很多人,而我又希望每個人收到的信,收件者只有自己,而且信件開頭還會寫上他的名字,這樣比較貼心。所以沒辦法用「寄給自己 and BCC」的方法達成,只好透過程式完成。

這個小程式實際上是透過一套稱為 PHPMailer 的 library 做真正的寄信動作,所以困難的部分都被它做走了!我們只要把該設定的東西設定一下就差不多。要設定的項目大概有這些:

  • SMTP server 資訊 (主機、port、認證方式...等)
  • 登入資訊 (我使用 Gmail 寄信,所以需要登入)
  • 寄件者與收件者資訊
  • 信件資訊 (標題與內文)

在我這邊,每封信不同的地方只有收件者與內文,所以我會每次重新產生並設定,其餘部分都在最前面寫死。

收件者與內文的部分,我是先將收件者名單從 Google Spreadsheets 中匯出成 .tsv 檔 (因為比較容易 parse),再直接讀入。這個寫在 function parse_name_list_tsv($filename) 中。然後用一個自己刻的簡單 template tool (function fill_template($content, $data), 才 4 行XD) 去加上 user-specified 的資料,最後送信收工!

一些有趣的小細節:

  • 忘記為什麼了,我一開始跑起來會出現跟時區有關的錯誤,所以必須加上 date_default_timezone_set('Asia/Taipei'); 來避免這個問題
  • 因為我的 Google Account 有開啟兩階段驗證 (2-Step Verification),而我們這種小工具當然不可能支援,所以要為我們的程式特別創造一組應用程式密碼,才能正常使用喔!
  • 一開始不小心抓到舊版的 PHPMailer,它有個 bug 就是,CC 的人會變成 BCC (或是反過來...我忘了),所以我直接從它的 source code 裡找到有問題的那段修掉了 (open source rocks!),不過還是不太確定是不是我使用錯誤。結果後來發現有新版 PHPMailer,就特別關注了一下這個問題,發現已經被修掉了XD 修的方法一樣....哈!
  • 因為 PHPMailer 新增收件人的 API 是 AddAddress(),所以要注意,要更改收件人的話必須先執行 ClearAddresses(),否則收件人清單會一直長....(好險我在正式寄信前的測試就發現這個問題...orz)

大概...差不多是這樣吧!突然有點佩服自己,一點小東西也可以囉嗦這麼多,哈哈....

Gitit 簡介

Published on:

最近打算發一系列的 gitit 相關文章,希望不要拖稿拖太久....萬一去當兵了,可能會拖很久很久這樣XD

之前我一直在尋找一個好用的共同協作平台系統,原因是我覺得 MediaWiki 的語法實在太難寫了....特別是當我看到 Ubuntu-TW Wiki 的首頁原始碼的時候,都快吐血了.....當下覺得我智商不足.....orz 但後來一直尋找,尋找的目標是:語法好寫、可即時線上協作的 wiki,所謂的「即時線上協作」就是像 Google Docs 那樣有可以多人同時編輯的頁面這樣。不過一直都找不到我想要的東西....即時線上協作有 etherpad-lite 這個 open source 專案,但是他是每個 pad 獨立的,而使用 Markdown 語法的 wiki 也不是沒有,但沒有勇氣(?)去嘗試....

一開始知道 gitit,是 @zeroplex (日落) 在噗浪上講的。因為之前也跟日落提過我想要尋找一個好用的 wiki system 這件事,他剛好不知道從哪裡獲得資訊,就分享給我了。結果沒想到,一玩下去,驚為天人啊XD

[][3]

我的第一步當然是先去 Google 一下,看有沒有什麼相關訊息。直到現在這個時間點,去 Google 「gitit」還很容易找到 walkingice 的這篇文章,另外當然還是要提一下 gitit 官方網站

Gitit 這東西,是一個用 git 當 back-end datastore 的 wiki 系統,而且自帶 web server,不需要諸如 apache 或是 nginx 的存在也可以運作。Wiki 的語法使用 Markdown,方便好寫,同時也很容易用於其他用途,可攜性佳。

簡單的 survey 過後,我決定也來試試看。沒想到在 Ubuntu 下安裝跟啟動都超簡單的....

安裝:sudo apt-get install gitit

建立目錄:mkdir wiki

進入目錄:cd wiki

執行:gitit

沒錯....就這樣....XD 你可以在這台機器的 port 5001 找到它。例如:http://localhost:5001/

只是這樣 run 起來的 wiki,所有設定都是預設值,個人是覺得 style 很醜,logo 也很醜XD 大家可以看看 gitit 官方網站就知道了....

如果是用剛剛的作法跑起來的話,這時候按下 Ctrl+C 就可以停止運作。這時候看看目錄內容,會發現多了好幾個檔案,簡單挖掘一下應該可以猜到那些東西是做什麼用的...

    $ find -maxdepth 3  
    .  
    ./wikidata  
    ./wikidata/Front Page.page  
    ./wikidata/Gitit User's Guide.page  
    ./wikidata/.git  
    ./wikidata/.git/refs  
    ./wikidata/.git/HEAD  
    ./wikidata/.git/config  
    ./wikidata/.git/COMMIT_EDITMSG  
    ./wikidata/.git/hooks  
    ./wikidata/.git/info  
    ./wikidata/.git/description  
    ./wikidata/.git/objects  
    ./wikidata/.git/logs  
    ./wikidata/.git/index  
    ./wikidata/.git/branches  
    ./wikidata/Help.page  
    ./templates  
    ./templates/footer.st  
    ./gitit.log  
    ./static  
    ./static/css  
    ./static/css/custom.css  
    ./static/img  
    ./static/img/logo.png  

首先 wikidata/.git 底下的東西我們就不要看了....其餘的部分大概是這樣:

  • wikidata 底下是 wiki 的所有頁面,看到 .git 就知道他的頁面都在 git 的版本控制之下,所以萬一出了什麼包,都還可以恢復。
  • gitit.log 裡面只有簡單的幾行....
  • static 底下放的是網站的 css 跟 logo,如果有圖可以置換 logo 的話,只要換掉 logo.png 即可。
  • templates 底下有個 footer.st,看名字就知道應該是用來產生網站 footer 的樣板,可以嘗試修改看看

把想改的東西改一改之後,可以透過 gitit & 重新執行 gitit。這指令跟前面不太一樣,後面多了一個 &,這樣可以把 gitit 丟到背景執行。而且如果你 logout 了,這個 process 還是會乖乖的留在系統裡,服務不會中斷!!

透過幾個簡單的步驟,一個精美的 wiki 就這樣架好了。不過....俗話說的好,魔鬼藏在細節裡!架起來只是第一步而已,有些地方還是需要調整跟修改的....下集待續!

[3]:

在 .htaccess 裡面修改 php 設定值

Published on:

這篇筆記拖稿好久了....其實應該很短的,所以趕快寫一寫。

有時候在弄一些 php 相關的東西的時候,需要設定一些模組,例如之前用過的 Xdebug,但是每次設定 php.ini 就要重新啟動 apache server,很麻煩還是其次,有時候上線的系統這樣一搞就很多人掰了.....XD 所以我們需要一個修改後立即生效的做法。

「.htaccess」是非常實用的做法,只要先在 apache 的設定檔裡去 AllowOverride Options 即可使用 (我自己的機器通常會在特定目錄直接 AllowOverride All)。那麼,到底該怎麼做呢?下面是範例:

    php_value xdebug.auto_trace on  
    php_value xdebug.trace_output_dir /tmp/xdebug  
    php_value xdebug.collect_params 3  

    php_value xdebug.profiler_enable on  
    php_value xdebug.profiler_output_dir /tmp/xdebug  
    應該滿好懂的?其實就是...前面先指定 `php_value`,後面不用等號,直接寫設定值即可。  

這樣做出來的結果,可以在 phpinfo 裡面看到成效。phpinfo 下方的 Configuration 那邊,設定值的部分有三欄,分別是 Directive、Local Value、Master Value,Directive 就是設定值的名稱,Local Value 是在該目錄真的會生效的設定值,Master Value 則是全系統的設定值。如果你覆蓋了全系統的設定,那麼你會看到你的 Local Value 跟 Master Value 不同,應該滿好認的。

透過這個方式,我們可以隨時去修改 php 的設定值,對於一些測試性的行為很有幫助!:D

這拼音到底是什麼鬼?

Published on:

有個已經讓我困擾非常久的問題....今天來抱怨一下。

這個問題跟拼音有關,我指的是中文字以英文字母表示的那個拼音...最後還想提一下關於奇怪的「洋中文」 (我自己亂取的稱呼) 現象....但必須先說,我不是專業的語言或是文字學家,甚至我對語言、文字都沒有什麼深入的了解,我只是想表達我覺得很困擾,以及莫名奇妙莫名其妙的一些問題罷了。(感謝 http://www.plurk.com/mike771115 協助訂正錯字)

我們在某些特定場合,可能會需要提供自己的英文名字,特別是一些正式的場合,會需要正式的「中文姓名英譯」。而這個英譯應該以什麼為準呢?當然是護照上的英文名字。因為你如果出國,有法定效力的身分證明文件就是護照,所以不管是什麼證件、信用卡或是國際證照上面,最好都是寫護照上的英文名字。連帶的,像是發表論文之類的,我們也會填上護照上的英文名字。

OK,那這到底有什麼問題?

Read on