分類
wordpress

使用Enlighter於TwentyTwenty Theme的對齊問題

使用 Enlighter 用來做在 WordPress 中顯示程式碼的高亮語法十分方便好用. 不過在 TwentyTwenty Theme 中, 會靠到最左側, 導致閱讀不順利, 檢查一下是 css margin 的問題.

不過在 Enlighter plugin 有回報與解法:

https://github.com/EnlighterJS/documentation/blob/master/wordpress/WPThemeCompatibility.md

只需要自訂 css 中增加:

.enlighter-default{
    margin: 0 auto 1.25em auto;
}

就可以了!

PS. 若在 multi-site環境下的 wordpress , 另外需要這個 plugin 來達成 custom css (附加css) 的功能: https://wordpress.org/plugins/multisite-custom-css/

分類
好用軟體

TableTools2-好用的Firefox網頁表格plugin

在瀏覽網頁時, 有時想針對一些輸出的表格做些進階的分析及處理, 往往會將資料先存出來, 轉到 excel 中進行.

現在有個好用的 plugin 可以供在網頁上應用, 而且直接操作, 不需要離開現有的畫面, 馬上就可以進行表格(TABLE)的排序, 多欄排序, 繪製圖表等功能, 另外像是在 excel 中才有的篩選, 複製欄, 隱藏欄等功能, 也都一應俱全, 實在是非常好用, 值得推薦大家來使用看看.

TableTools2 plugin 下載網址: https://addons.mozilla.org/zh-tw/firefox/addon/tabletools2/

安裝好後, 找個網頁有表格的, 按下右鍵, 就可以玩囉, 快來試看看吧.

裝好之後, 想玩看看, 可以到作者網站提供的表格區來試看看:

  1. 基本表格 http://mingyi.org/TableTools2/demo.html
  2. 進階表格 http://mingyi.org/TableTools2/advanced-demo.html
  3. 繪製圖表用的表格 http://mingyi.org/TableTools2/chart-demo.html
  4. 用來測試效率的表格 http://mingyi.org/TableTools2/large-table.html (可以生出大量資料)

另外這裡是官方 demo 影片, 也可以參考看看: http://mingyi.org/TableTools2/video.html

很不錯的工具.

分類
好用軟體

好用的HostAdmin插件-Firefox

在開發網站的過程中, 往往會需要快速地切換主機標題(即網址中的主機)對應開發環境或是測試環境的IP, 一般來說都是利用修改 %windir%/system32/drivers/etc/hosts 這個檔案內容, 並重新起動瀏覽器才能生效, 尤其像是在還未生效的 DNS 或是 SSL 等狀況下, 就顯得十分麻煩.

現在有個好用的工具 HostAdmin (link) for Firefox, 這個工具的工作原理一樣是修改 hosts 檔案, 不過在修改後, 會自動 refresh 本機 DNS, 瀏覽器也不用重新起動就馬上生效了, 而且是在狀態列就可以直接操作設定, 十分方便, 畫面如下:

可以在自行訪問的網域主機上去設定指向的 IP, 便可以快速地達到切換的目的, 而最上面的 Hosts Editor, 會叫出內建的編輯器, 直接修改 hosts 內容, 也十分方便. 多重 IP 選擇的原理就是利用 hosts 中的 # 號, 也就是註解符號, 以上圖為例, 就是在 hosts 有如下設置:

192.168.12.21 www.test.com
#192.168.12.31 www.test.com

當你訪問 www.test.com 時, 點一下右下角的 HostAdmin 插件功能, 就會出現上圖畫面, 方便你直接作切換.

另外有需要注意一點, 在 windows vista/7 時, hosts 檔案的權限修改時會失敗, 是因為權限有調整為管理員才能修改, 可以參考該插件的官方資料來調整該檔案的權限, 如下:

http://code.google.com/p/fire-hostadmin/wiki/GAIN_HOSTS_WRITE_PERM

建議的兩種方式都必須由本機管理員下達修改檔案權限的指令, 一為調整為 user group 有寫入權限, 指令如下:
cacls %windir%/system32/drivers/etc/hosts /E /G Users:W

一為調整為某單一USER帳號有寫入權限, 指令如下:
cacls %windir%/system32/drivers/etc/hosts /E /G “User Account Name”:W

記得都要以管理員來執行, 若不會操作, 簡單說明如下:

  1. 點下[開始] [所有程式] [附屬應用程式]
  2. 看到[命令提示字元] 對該項目按下右鍵, 選取[以系統管理員身份執行]
  3. 出現一個 console 畫面, 並有輸入提示符號, 鍵如上面兩個指令其中一項皆可, 記得第二項的 User Account Name 是指某單一 user 的帳號, 通常是目前自己這個帳號.
  4. 系統會回應已處理檔案 C:\Windows\system32\drivers\etc\hosts 這樣就成功了.

相信對於常在修改調整 hosts 的開發者朋友們會有很大的幫助!

該插件的官方網址: https://addons.mozilla.org/zh-tw/firefox/addon/hostadmin/

分類
好用軟體

Youtube下載影片插件-Firefox

這個工具是Firefox 的插件, 可以方便地下載 youtube 上的影片, 而且會列出所有可供下載的解析度及格式, 插件名稱為 Easy YouTube Downloader

英文安裝下載頁: https://addons.mozilla.org/en-us/firefox/addon/easy-youtube-video-downl-10137/
中文安裝下載頁: https://addons.mozilla.org/zh-tw/firefox/addon/easy-youtube-video-downl-10137/

安裝好之後, 在瀏覽 youtube 的影片時, 會在下方多出現一個下載, 點擊後會出現所有可用的下載點, 以這頁為例: http://www.youtube.com/watch?v=tub3x22YNbk

下方下載點擷圖如下:
就有純音樂的 M4A, AAC, MP3-128k, MP3-64k, 影片的 MP4 1080p, 720p, 360p, FLV的 480p, 360p, 240p 還有一個預覽圖及說明連結, 點擊後即可下載影片, 方便使用, 真是一個好用工具啊!

分類
Javascript

Masonry自動排版介面與InfiniteScroll無限捲動介面

Masonry 和 InfiniteScroll 都是 jQuery 上的 plugin!

Masonry 是利用 css 方式, 將介面重新排版, 使得畫面不會因為不規則區塊排起來而不好看, 可以看一下 Masonry 官網上的說一看就知道這樣的排版方式的感覺:

http://masonry.desandro.com/

而 InfiniteScroll 則是利用 jQuery 背後 ajax 方式, 將一頁一頁的網頁, 透過不換頁, 直接 append 到目前的頁面上, 達成向下捲動而看更多內容的功能. 像是 facebook 動態牆, 就是這樣的應用情境. 官方網站:

http://www.infinite-scroll.com/

這兩個功能結合就變成了這樣: http://sample.diary.tw/flickrsearch/?q=rainbow (利用了 flickr api 與 Masonry 和 InfiniteScroll 做出的效果. (記得要向下捲動, 才會出現看完了繼續產出內容的效果), 其中後面的 q 可以自行替代其他的英文單字, 因為對該文字沒有特別處理, 所以只能使用一個英文單字.

來看看怎麼做這個效果吧.

InfiniteScroll 是利用了 jQuery 在背景取出下一頁的內容, 並將指定的 selector 資料 append 到目前的網頁上, 所以最小的程式碼是這樣:

// infinitescroll() is called on the element that surrounds 
// the items you will be loading more of
  $('#content').infinitescroll({
 
    navSelector  : "div.navigation",            
                   // selector for the paged navigation (it will be hidden)
    nextSelector : "div.navigation a:first",    
                   // selector for the NEXT link (to page 2)
    itemSelector : "#content div.post"          
                   // selector for all items you'll retrieve
  });

就是將本頁的容器, 利用 infinitescroll 函式呼叫, 並傳入 3個重要參數, 分別為 navSelector, 這個是指當 page 瀏覽到這個 selector 指定物件時, 進行 load 下一頁內容, 而要 load 的內容, 就是 nextSelector 的物件中的 url, 至於第三個參數 itemSelector 則是 load 到網頁後, 要帶出來放到目前頁面上的內容項目.

以上面的例子來看, 網頁的介面會是如下:

//....
<div id='content'>
  <div class='post'>
//.... post content
  </div>
</div>
//... other footer
<div class='navigation'><a href='page-2.htm'></a></div>
//...

這樣一來, 當本頁被瀏覽最下面的 <div class=’navigation’> 時, 就會被觸發去 load page-2.htm 中的內容,並找出 <div class=’post’>…</div> 將內容放到 <div id=’content’>..</div> 中最後一個 post, 如此重覆下去, 就會有往下捲而一直往後看的內容, 記得每頁下面都要放對應的下一頁, 就會被 infinitescroll 偵測到, 並往下疊代下去.

再來看看 Masonry 的效果, 用法也很單純, 最小程式碼如下:

$('#container').masonry({
  itemSelector: '.box'
});

只需要指定要排版的容器 container, 呼叫 masonry 傳入 itemSelector 就是內容元素, 就可以自動排版, 多種效果可以參考官方網站的 demo.

比較特別的是兩者結合的這個 demo: http://masonry.desandro.com/demos/infinite-scroll.html , 參考這個 demo 可以做出又達成自動排版, 又達成無限捲動的功能, 效果就參考上面的 sample: http://sample.diary.tw/flickrsearch/?q=rainbow

幾個點要注意:
1. navSelector 一定是要找最下面的物件, 效果才會好, 記得.
2. 若是排版內容有圖, 可以參考 Masonry 的 sample: http://masonry.desandro.com/demos/images.html 將排版呼叫寫在 container 的 imagesLoaded 事件後, 如下:

var $container = $('#container');

$container.imagesLoaded( function(){
  $container.masonry({
    itemSelector : '.box'
  });
});

才不會有位置算不準的狀況.
3. 若要有動畫排版效果, 可以在 Masonry 參數中多加上 isAnimated: true;
4. 排版若要美觀, 要盡量統一內容物寬度, 就不會排得2266 (可以利用 css 自行安排)
5. InfiniteScroll 的 loading 的 css 是 #infscr-loading 這個, 可自行設計.

忘了說, 這次 sample 使用的 flickr api 是 photo search: http://www.flickr.com/services/api/flickr.photos.search.html

這種 layout 流行和 fb 及最近火紅的 pinterest 網站可能有很大的關係呢.

分類
好用軟體

切換瀏覽器標頭-User Agent Switcher

這個是一個 Firefox 的插件, 叫做 User Agent Switcher

現在開發手機上應用的網頁機會比以往多, 但是礙於測試時期, 一般這些網頁程式都會檢查使用者的瀏覽器(User Agent), 所以使用這個插件, 方便使用者在切換自己的瀏覽器的標頭.

安裝好之後, 會在[工具]功能表內, 多出一個切換 User Agent 的功能, 如下所示:

(圖片引用自: https://addons.mozilla.org/zh-TW/firefox/addon/59)

如此一來, 便能方便測試網頁程式, 對於不同的 User Agent 的判定, 及行為驗證, 將會有很大的幫助, 而不需要準備太多環境. 當然, 若是要做所謂的 HTML, CSS, JAVASCRIPT 相容性測試, 則這個就比較幫不上忙了, 但對於判定 User Agent 而要重導使用者, 或產生一些不同的功能時, 可以很快速的驗證.

像是 naver.jp 這個網站, 有個 for iphone 的版本 (http://ipn.naver.jp) , 會檢查User Agent來重導使用者到 http://www.naver.jp, 就沒辦法預覽到 iphone 的頁面了. 使用這個 User Agent Switcher 時, 就能”假裝” Firefox 是 iphone 的 browser , 來訪問該網頁囉!

[2010/6/15 0:05]
補充一下相關的 user agent 資料, 可以利用匯入的方式達成, 請如以下操作:
1. Default User Agent, Edit User Agents:

2. 在畫面上選擇下方的 Import:

3. 到這裡下載已整理好的 user agent xml 檔: http://techpatterns.com/forums/about304.html
(或直接對這個連結按右鍵另存新檔: http://techpatterns.com/downloads/firefox/useragentswitcher.xml)
4. 於 import 選擇剛下載的檔案即可, 在 User Agent Switcher 就會有很多的 user agent 出來了, 還包含 iPad 耶!

PS. 請注意只是切換 User Agent 來讓 web server 吐出對應的 html, 並非是將 firefox 模擬出該 user agent 的呈現效果!!

分類
TatterTools

重導用戶至手機網址插件

好一陣子沒寫 plugin 了, 用手機瀏覽 tattertools 的網頁, 本來就存在網址 http://diary.tw/tim/m 這個功能, 不過若是直接用手機瀏覽至文章的話, 例如: http://diary.tw/tim/494 , 應該要被 redirect 至 http://diary.tw/tim/m/494 . 這個功能一直很想實作, 卻沒時間也一直沒想法怎麼架構這個插件.

今天用手機上網找資料, 找到自己的網站, 連回來, 連到原來正常的網頁, 但實在太大又不方便, 雖然自己知道可以加上 /m 來改網址達到手機可觀看的版本, 但別人不見得會知道啊, 所以今天就來寫這個小插件.

架構上用了比較簡單的 tagname 方式實作這個插件, 所以要用的使用者, 麻煩就將 [ ##_MobileRedirect_## ] (注意要去除[]間的空白)放在 skin 上, (放在愈前面愈好, 最好是在 < head>之後, 或是 <body>之後, 如此才能快速作用(用javascript重導的).

判定的方式利用了 Russell Beattie’s Weblog (link) 的 Mobile Browser Detection in PHP 這篇文章內的判定手機方式來達成, 一共分為兩個步驟:

先判定 directive ($suri[“directive”]) 是 “/”, 也就是首頁或是內容頁(用數字版本的), 詳情可以參考: TT的$suri好用資訊 這篇文章.
接下來再判定是否為手機用戶, 這個就用 $isMobile 來判定

一旦兩者皆符合時, 就重導至 /m 的手機版本網頁.

請各位有空試看看, 若有任何問題或建議, 歡迎提出來哦!

插件下載:
MobileRedirect.zip

分類
TatterTools

真方便的CodeHighlight Plug-in

今天瞎逛了一下 tt 的plugin網站:

http://tattertools.com/ko/bbs/zboard.php?id=plugin

結果找到了一個還不錯用的 syntax highlighter plugin, 這個是利用之前介紹的 http://diary.tw/archives/341 這篇內容中的 dp.SyntaxHighlighter 功能整合實作出來的, 效果當然很不錯囉, 給有需要說明講解程式又在寫 tt 的人使用是再適合不過了, 使用方式相當容易, 就是用 [ code ] ~ [ /code ] (注意, 沒有空格) 包起來的 code 就可以被這個 plugin 辨識出來並加上 highlighter, 若要指定語法, 就是 [ code 語法 ] 這樣即可, 例如: [ code php ]~…[ / code ] 這樣子囉. 原始 plugin 網址在這裡: http://gendoh.tistory.com/2510878 給大家參考看看囉!

以下為幾個 sample:

分類
TatterTools

完成LoadAddComment插件

在 tattertools 中, 留言或回覆評論時, 有時候會因為網路速度較慢, 而 tt 又是使用 ajax 的方式回應, 而造成似乎沒有反應的狀況, 利用了 dynamic html 中的 div 及一個 loading 的小圖示, 開發了一個插件, 在留言或回覆評論時提示了等待的狀況, 目前尚為一個測試版本, 先給大家測試看看, 下個版本將會加入自訂訊息, 顏色邊框, 等待時間等功能, 敬請期待!

目前功能為出現在畫面正中央會有提示, 畫面如下:

分類
TatterTools

MailNotification0.5插件完成囉

網友Chieh需要一個能主動通知有新留言功能的插件, 順便實作一下在 1.1.1 的版本下, 有 configuration 功能的插件, 便著手開發了一個於文章留言及留言版留言的主動通知插件.

本插件利用了 configuration 介面可以進行是要對文章留言有效或是對留言版留言有效, 當然亦可同時設定有效, 介面如下:

只要發生了新的留言, 就會依照設定進行 mail 主動通知, 並會將留言者, 留言類型及是否為秘密留言, ip 等資訊一併寄出, 也將連回查看的網址附上, 功能很單純也十分方便, 歡迎大家多多利用!!

下載:
MailNotification0.5.zip