Mac上的時間軸管理工具(甘特圖Gantt Chart)

OmniPlan

Commercial $199.99
OmniPlan 繼承了 Omni 家族以往的完善功能。可能有點 overskill,但效果毋庸置疑非常棒。

GanttProject

Free
A free-and-easy-to-use Gantt chart based project scheduling and management tool. Our major features include:
Task hierarchy and dependencies: Gantt chart, Resource load chart, Generation of PERT chart, PDF and HTML reports, MS Project import/export, and WebDAV based groupwork.

BeeDocs

Commercial $8.99 available on App Store
The marketing is towards the 3D functionality, it makes good results generating 2D timelines. Doesn’t do Gantt charts, though.

OpenProj

Free
介面和 MS Project 非常相似的桌面專案管理工具,可用於任務管理、生成甘特圖或 PERT 圖。

Gantto.com

Free 至不同PLAN付費不同
在線甘特圖製作工具,支援導出高清晰圖形用於 Presentation。

Gantter

Free
A web based application which integrates with Google Docs. Surprisingly good.

Merlin

Commercial starts from $215
Merlin is a fairly user-friendly tool for making Gantt charts. It’s commercial software, so it is going to set you back. The interface is a clean “Mac" interface.

7個搜索欄位自動完成的jQuery插件

在搜索欄輸入關鍵字後,下方自動給出建議的完整詞組、增進搜索效率的功能現在可說見怪不怪。以下提供幾個實現此功能的jQuery插件。

12個增強網頁排版的jQuery插件

via 12 Free jQuery Plugins for Better Web Typography

  • Lettering.js - 網上最流行的排版插件之一。
  • Arctext.js - 在 Lettering.js 基礎上加以改進,可以使文字沿著曲線路徑排列。
  • FitText.js - 根據 parent element 的寬度來調整排版。
  • TypeButter - 為字型設置更好的字距。
  • slabText.js - 將 headline 的句子按照理想的字數重新分行,製作 responsive 網頁時非常有用。
  • Hatchshow - 另一款平衡字數的排版工具。
  • Bacon! - 讓你的段落沿著曲線對齊。
  • Kerning.js - 不只可以設定個別字距,還可設定字型大小、顏色以及多種變形效果、特效。
  • BigText - 使得在設定好的 div 內文字寬度正好符合。
  • Baseline.js - 為文章設定「基準線」,即使插入不適當大小的圖片,文字也能排得漂漂亮亮。
  • jqIsoText - 為文字加上菱形的 pseudo-isometric 效果。
  • jQuery Grab Bag – Text Effects Plugin - 為文字加上各種打字機效果。(我看不出差別)

[Mac] 在OS X Mountian Lion上啟用Web Sharing控制

via WEB SHARING IN OS X MOUNTAIN LION

OS X Mountian Lion 悄悄地從控制面板拿掉了 Web Sharing 的選項,這個小方塊本來很方便我們用來重啓 Apache 或檢查更動過的 hosts 等設置。懷念它的朋友可以透過下載一個用戶自定義的 System Preferences pane 來作為替代方案。

使用方法:雙擊後即安裝新的控制面板。

[Mac] 在Mac OS上安裝Juniper Network Connect Client

之前為了幫客戶維護網站需要安裝Juniper Network Connect Client掛VPN來連入對方FTP,當時是依賴對方公司vpn網站提供的外掛下載提示來安裝,Window系統上尚無問題,轉到Mac OS上,第一次只有用Safari能安裝,再後來系統重灌後連Safari也沒有彈出提示了,聽說是系統內核更新後出現的問題。

既然沒有辦法用網站跳出的提示進行安裝,就只好自己找安裝包。Juniper官網的下載步驟有點麻煩,我是在 @UCSF 找到舊版的 Juniper Network Connect Client。這個下載以後要在線更新一次,然後在啓動時網址列輸入vpn https的位置(每個人的不一樣)就可以用了。

[Mac] 在Mac OS 10.7.5上安裝Ruby 1.9.2或更高版本

Mac OS 10.7.5 上預設安裝的 Ruby 版本為 1.8.7 如果需要更高版本需要動手更新。我使用 RVM (Ruby Version Manager) 來安裝,據聞是時機不好,XCode 和 Ruby 都有更新,安裝時遇到不少問題,好在最後是解決了。

進行下列步驟前需先安裝 Xcode
(記得要至少執行 1 次 Xcode,打開其 Preferences->Downloads 把 Command line tools 下載下來才算完成)

1. Open Terminal and input this line to start installing.

1
bash < <(curl -s https://rvm.beginrescueend.com/install/rvm)
1
2
cd ~/
sudo vim .bash_profile

And put this line into .bash_profile:

1
[[ -s "$HOME/.rvm/scripts/rvm" ]] && source "$HOME/.rvm/scripts/rvm"

Continue Reading »

[Tip] 從GoDaddy轉移域名網址到其他ISP

受夠了GoDaddy主機的速度,最近打算轉移所有網站到較為便宜的ISP下。
一般ISP商提供幾種渠道接收你先前在其他ISP註冊的domain name,
你可以修改DNS配置、新建指定網頁到域名下,如果你不想動那些東西,
最方便的方法是申請1個認證碼(Authorization Code)回傳給新的ISP。

打開GoDaddy配置下的Domain目錄,Launch要轉移的domain管理控制台
在下方高亮區域可以看到通過email申請認證碼的功能,
點擊確認後等待一段時間(幾個小時到幾天不等)就可以收到了。

收到後把得到的認證碼輸入另外一家ISP新增domains時要求的欄位

[Git] 恢復在 Git Repo 中錯刪的檔案

via Restore a deleted file in a Git repo (Stackoverlow)

1
2
git rev-list -n 1 HEAD -- <file_path>
git checkout <deleting_commit> -- <file_path>

file_path 是目標檔案放置的目錄
deleting_commit 輸入你錯刪時的那個 commit version 號碼

[CSS3] 實用的CSS3在線工具

via Top 30 CSS Tools and Applications for Developers

animate.css is a bunch of cool, fun, and cross-browser animations for you to use in your projects. Great for emphasis, home pages, sliders, and general just-add-water-awesomeness.

Excessive is a free-to-use CSS compressor where you can drag ‘n’ drop any number of files and they will be compressed instantly. The application merges all files into a single one and enables you to reorder the files (so as the output) again with drag ‘n’ drops.

CSS2Less is a web-based tool for converting CSS files into LESS by simply copy-pasting the styles. The tool uses the css2less Ruby library in the backend and its website is open sourced for anyone willing to host it themselves.

Responsive GS is a fluid grid CSS framework for developing responsive websites quickly.
It has 3 flavors: 12, 16 and 24 columns with media queries for all standard devices, an optional reset and clearfix. The styles for the grid, media queries, reset and IE-specific ones are smartly separated into different CSS files so we can use only what is needed.

CSS3 Shapes 多圖形 is a project that shares the styles for many different shapes including triangle, diamond, star, comment bubble, egg, heart and more. CSS3′s properties enable us to create many different shapes by styling a single element. For sure, not all of them are functional for daily use but they are definitely good for inspiration and improving your CSS(3) skills.

CSS Arrow Please 箭頭產生器 focuses on totally CSS-based (no images) arrows. This CSS trick is useful in creating tooltips, the generator offers multiple options for customization (the position, color and border values) and auto-creates the related CSS code.

[jQuery] Rhinoslider 及其他多款實用的Slideshow套件

Rhinoslider 線上工具提供你一個看似簡樸的 slideshow
但其附加功能豐富多樣,你可以使用它提供的介面自由調校取得符合所需的效果。
首先安裝

1
<link type="text/css" rel="stylesheet" href="/css/rhinoslider.css">
1
2
<script type="text/javascript" src="/js/jquery.js"></script>
<script type="text/javascript" src="/js/rhinoslider.js"></script>

Demo & Download,按照需求設定 Call function

按 refresh 刷新頁面後取得代碼,貼到 html 即可生效。

探索其他實用好玩的jQuery套件:

Mimit Gallery – 是一款極簡潔的Slideshow plug-in
SlideJS – 就只是一個 Slideshow,沒什麼花哨的功能。
Circular Content Carousel – 可以讓捲動內容循環播放的Slideshow。
Useful image hover slide effect with jQuery – 滑鼠hover時圖片捲動
Elastislide – 這款套件會自動對圖和內容進行大小調整,使之容納在框內。
Easy Paginate – 點擊換頁時更新一列內容,很適合用來展示模板。
BxSlider – 允許你切換圖文並茂的box型內容
Camera – 簡單典雅的照片Slideshow,滑鼠hover在換頁鈕上時會有縮略圖浮出
FlexSlider 2 – 典型的slideshow插件,提供多種過渡效果選擇。
AviaSlider – 40 種其他Slideshow選擇
Quovolver – 漂亮的燈箱,可用於呈現循環播放的公告、引文。
The Wookmark jQuery plugin – 生成Grid框架且富有動感的內容頁
Jquery Transit – 提供CSS3支援的各種滑鼠hover效果
Sticky Sidebar – 製作固定浮動的sidebar,可運用於廣告、登入控制台等。
turn.js – 紙本翻頁效果,用HTML5做一本電子書
Scrollpath – 使頁面沿著多個路徑滑動,就像你在很多很炫的網站裡看到的
spin.js – 使用純code生成轉動的loading動畫
Ideal Forms – 提供快速建立responsive form的framework,包含驗證內容格式
與此類似的還有 Recurly.jsPower PWCheckerjQuery.validitymailcheck
Ajax Auto Suggest jQuery Plugin – 在欄位內輸入時自動給出dropdown的建議關鍵字
SearchMeme – 在你喜歡的任何地方加上一個搜尋框
jTable – jTable is a jQuery plugin that is used to create AJAX based CRUD tables
Morris.js – make drawing time-series graphs easy
Animated table sort – 動畫效果表格重新排序
jQuery uLightBox – 燈箱效果的提示窗口
Colortip – hover時跳出漂亮的tooltip
Coda Popup Bubbles – 另一個漂亮的tooltip,很適合用在下載信息
Lettering.js – 字型排版輔助工具,幾乎可以愛怎麼排就怎麼排,如同平面設計
FitText – 允許字型根據母框架的大小比例自由更改
SlabText – 這個js通過調整每行文字的寬度使它能夠生成大字體的多行標題
Fitvids.js – 簡單的多媒體播放套件
jPlayer – 也是多媒體套件,提供多個媒體文件的快速slide切換,在需要頻繁切換的網頁上有用

[Tip] 在Win7系統下新建清空剪貼板的快捷方式

via 小眾軟件

1、新建1個快捷方式,在對象位置輸入

1
cmd /c "echo off | clip"

2、打開內容/屬性,運行方式最小化,也可以更改icon
在文件 %SystemRoot%\system32\shell32.dll 中最後幾排有剪貼板icon。

3、Win+R > regedit 打開註冊表編輯器

1
HKEY_CLASSES_ROOT > Directory > Background > shell

右鍵 shell 新建項,命名為『清除剪貼板』
再右鍵該項,新建一個叫 command 的項,將右邊欄的預設字符串修改為

1
cmd /c “echo off | clip”

[MySQL] 在MySQL正則表達式中使用變量

之前寫一個 MySQL 查詢語句,希望在結果印出符合字段結尾為特定字串的資料。
例如如果是 #數字 或 #字母 或是 #文字字母,都滿好解決的,寫成

1
2
3
... where content REGEXP '.*#[:digit:]$'
... where content REGEXP '.*#[:alpha:]$'
... where content REGEXP '.*#[:alnum:]$'

就可以了。
如果要在裡面加上變量,例如把尾段為 #變量 的結果印出,
因為會受到正則語法干擾,不能直接寫在語句中。
我的做法是先把字串定義好,例如 $str = ‘.*#’.$i.’$',接著再查詢語句

1
... where content REGEXP '$str'

MySQL 正則表達式語法參考手冊

[Mac] CodeIgniter 連結資料庫時報錯 Filename: core/Loader.php

如果使用 Mac OS X 內建 LAMP 建立 CodeIgniter 框架很可能遇到如下問題

1
2
3
4
A Database Error Occurred
Unable to connect to your database server using the provided settings.
Filename: core/Loader.php
Line Number: 346

使用我過去介紹過的方法來檢查錯誤在哪,發現如下錯誤訊息:

1
Warning: mysql_connect(): [2002] No such file or directory (trying to connect via unix:///tmp/mysql.sock) in

如果你缺少 /var/mysql/mysql.sock 就得自己手動建一個
打開 Terminal

1
2
3
4
cd /var
sudo mkdir mysql
cd mysql
sudo ln -s /tmp/mysql.sock mysql.sock

如果你缺少 /tmp/mysql.sock 則是輸入

1
2
cd /tmp
sudo ln -s /var/mysql/mysql.sock mysql.sock

[Mac] 啓用 Mac OS X 10.7.4 內建的 LAMP

本來是用 MAMP 一鍵安裝,前幾天意外發現它現在只提供付費的 Pro 版本,
無奈之下又找不到替代方案,決定動手來啓用聞名已久的 Mac 內建 LAMP。
折騰了 3 個多小時,大部分時間都在網上搜集資料,因為不是每個方案都和系統狀況符合。
東拼西湊總算成功在我的系統(Mac OS X 10.7.4 Lion)上成功啓用了 LAMP。

注意,以下步驟將會動到系統文件,修改前最好事先進行備份。
如遇意外,連原來正常運行的程式也出錯的話,請沿著原來步驟返回即可。
再不然,用 Time Machine 先建立還原點也可以。
Continue Reading »

[Mac] 隱藏或顯示 Mac OSX 下的系統文件

Mac OSX 的系統文件預設為隱藏,在做一些 tweak 的時候例如安裝系統自帶 LAMP,就會需要打開終端等等一系列麻煩的操作。

defaults write com.apple.finder AppleShowAllFiles TRUE
killall Finder

要恢復時又要在終端輸入以上字串 (TRUE 改為 FALSE)…

偶爾一下就算了,如果常常要給系統動手腳,很花費時間。
這裡提供現成的小工具可以點一下就切換顯示狀態。

[Tip] 檢查 CodeIgniter 資料庫連結失敗的問題

昨天在修改 CodeIgniter framework 上的一些東西,沒想到只不過用了一下檔案覆蓋,就出現了連結不上資料庫的問題。錯誤代碼如下:

1
Unable to connect to your database server using the provided settings Error Message

在網上查詢了相關問答,有人說是 hosting 的問題,也有人說是因為 CodeIgniter 必須用 pconnect()。正在猶豫要從哪著手,突然想起從前也遇到過類似這種明明 db 的各項設定都無錯卻死活連不上的詭異狀況,當時的解決方法是新建一個 db user,然後把它指派給要用的資料庫,做一個重新連結就可以了。原因是什麼還是不清楚… 不過這次果然也用同樣的方法可以解決。

另外從 stackOverfow 上看到的,如遇到 codeIgniter 上再有 db connection failure,可以試試看在 config/database.php 中加入此段代碼,以便檢查問題所在:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
...
...
...
echo '
<pre>'
;
     print_r($db['default']);
  echo '</pre>
'
;

echo 'Trying to connect to database: ' .$db['default']['database'];
$dbh=mysql_connect
(
$db['default']['hostname'],
$db['default']['username'],
$db['default']['password'])
or die('Cannot connect to the database because: ' . mysql_error());
mysql_select_db ($db['default']['database']);

echo '
Connected OK:'
;
die( 'file: ' .__FILE__ . '--&gt; Line: ' .__LINE__);

[Tool] Dimensions 2 Folders – 按照圖檔大小進行分類

Dimensions 2 Folders 是款小巧綠色軟體,允許你將一大堆圖片裡特定尺寸的圖片丟進指定文件夾,在整理桌布時挺有用。

官方下載 | Dropbox 備份

Disable the File Extension Change Warning in Mac OS X

via OSX Daily

When you try to change a filename extension, the Mac OS will always pop up a warning dialog, which can be very annoying.

First, open the Terminal, located within the /Applications/Utilities/ directory, then copy and paste in the following command:

defaults write com.apple.finder FXEnableExtensionChangeWarning -bool false
killall Finder

To reverse the change and get the warning back when you attempt to change file extensions, use the following defaults write command:

defaults write com.apple.finder FXEnableExtensionChangeWarning -bool true

Kill the Finder again for changes to take effect.

[Tip] 在 Google Reader 中加入「傳送至 Google+」的選項

via How To Share Google Reader Stories to Google Plus

右上角小齒輪 → 設定 → 傳送至 → 建立自訂連結

Name: Google+
URL: https://plusone.google.com/_/+1/confirm?hl=en&url=${url}
Icon URL: https://ssl.gstatic.com/s2/oz/images/favicon.ico

儲存後,新功能就被建立了。

順便介紹我非常喜歡的漂亮樣式 Reeder for Chrome
安裝此樣式讓 Google Reader 變得好看典雅。

如果你是 Chrome 瀏覽器,進入頁面後按右欄 Download 即可。

[Tool] igosyncdocs – 本機管理 Google Docs

via igosyncdocs

igosyncdocs 是一款可用於本機管理 Google Docs 文檔的小工具,有英文、繁簡體中文和日文版本,
支援多檔上傳,在線新建、修改、搬移、刪除文檔。

編輯檔案時則會自動打開本機的編輯器,例如你裝的是 MS Office,那麼編輯 Word 就是用該工具。

Login