Gitdags, Git 示意圖工具

cherrypick-2

最近因緣際會,需要畫些圖來教 Git,不是要拿真的 repository 來畫,當然可以用繪圖軟體刻,不過時間不夠,而且覺得應該之前就有人有需求了,應該有現成的工具,所以我就找了一下看有沒有方便的工具可以畫,結果很幸運的,沒多久就找到了gitdags這個 Latex 的 package,專門就是用來畫教學用的 Git 圖,而且圖的樣版還蠻接近 Pro Git v1 書內的樣子(v2 的樣版改的更簡潔了),看起來還蠻 ok 的,它是基於TikZ這個 package,是 Latex 上的繪圖 library,可以產生出向量格式的圖,所以我可以用 pdf2latex 先轉成 pdf,pdf 檔案就可以給 Keynote 用了,不過要通用一點,還可以用 pdf2svg 生成 SVG 圖檔,SVG 內容看起來也還蠻乾淨的,tex 文件內容大概像這樣:

\documentclass[preview]{standalone}
\usepackage{gitdags}

\begin{document}
    \centering
    \begin{tikzpicture}
      % Commit DAG
      \gitDAG[grow right sep = 2em]{
        0 -- {
          1 -- 2 -- 3 -- 4,
          A
        }
      };
      \gitbranch
        {master}     % node name and text 
        {above=of 4} % node placement
        {4}          % target
      \gitbranch
        {for-rebase} % node name and text 
        {below=of A} % node placement
        {A}          % target
      \gitHEAD
        {below=of for-rebase} % node placement
        {for-rebase} 
      \end{tikzpicture}
\end{document}

產生的圖片就像是最上面的圖,gitdags 是用solarized來配色,我覺得顏色不是很精緻,不過還可以接受,另外我有自己調整一版黑底用的,把線條和邊框改淺,還有把 commit node 的形狀調整了一下,也放在GtiHub 上。使用 gitdags 的過程,比較大的問題就是文件和範例不足,所以我把自己畫的部分全部丟上 GitHub了,後來發現原作者也有一些 sample可以參考,作者自己兩年前是說有要寫文件和準備範例,不過後來就都沒動靜就是了。如果要在 Mac 上處理 Latex 文件,一般就是建議直接裝MacTeX就好,不過 gitdags 沒包在裡面,所以要自己安裝,或是把 sty 檔案和 Tex 文件放在同一個目錄也可以。

不過 SVG 就是用 pdf2svg 產生的 SVG 檔我用 AI 要編輯時會發現有些問題,我有另外試著用inkscape做轉換,出來的文字大小是正常的,不過看起來字形和間距不太正確就是,如果要轉 PNG 之類的非向量格式是可以直接用 Preview 或是 convert 轉換,不過解析度要設定一下,通常預設的 150,輸出的圖片大小是不太夠就是了。

最後,gitdags 這名字裡面的 dag 應該是有向無環圖(Directed Acyclic Graph)的意思,這種圖剛好可以用來描述 Git 裡面 commit、branch 等東西之間的關係。


MRT & GIT

今年 COSCUP Lightening Talk 分享的主題是 GIT & MRT,主題就是紀錄我之前用 GIT 線圖畫台北捷運路線圖的過程,投影片在上面,這篇文章是補充一下被省略的部分和講不完的部分,當天我有用 Ricoh Theta 錄影,也丟上 YouTube 了:

閱讀「MRT & GIT」全文

How to Reduce PDF Size and Keep Text

Requirement

Small size of PDF file generated from PSD, with real text(for accessibility) and good image quality.

Expect

Expect the PDF file size is a little bit larger than JPG file.

Issue

Use save as and choose Photoshop PDF will generate large PDF. But save as JPG/PNG is much smaller. Test file spec:

  • Page Size: 210mm*297mm (A4)
  • Resolution: 1240px*1754px
  • Fonts: 2 English font

Sizes:

Format Option Size
PSD 79.7MB
PNG  1.2MB
JPG q: 100  0.6MB
PDF default  7.0MB

File transformed on Adobe CC 2016 Jan

Tried several methods to reduce the file size includes:

  • Remove unused layers
  • Merge and flatten all layers
  • Use lower jpeg compression quality
  • Not save meta data
  • Not preserve Photoshop editing capability
  • Use Photoshop autotool > PDF presentation
  • Use Illustrator
  • Use Acrobat Pro to optimize PDF

But none of them can really make the PDF file as small as expected.

Solution

Separate the text and image. Also create a clean PSD file. Steps:

  1. Hide all text layers
  2. Save as PNG file
  3. Open PNG file in Photoshop
  4. Unhide text layers and copy text layers to PNG file (should place at right place)
  5. Save as Photoshop PDF file
Result
Format Option Size
JPG q: 100 618.0KB
PDF default 624.0KB

PS. I think other vector object can also use this method to keep their quality and maintain PDF in small size. But not tested.


Flickr Share with Template

flickr share with template

前幾天在做srcset 支援支援時,遇到一個問題是,Flickr 雖然有提供到 2048px 和原始大小的檔案,可是這些高解析度檔案的檔名和 1024px 以下的檔案是不一樣的,所以不能用簡單的加 postfix 來找到位置,所以我每要貼一張圖,就要辛苦的去開 Flickr 的各種 size 來抓他的路徑,然後剪剪貼貼組合出原始碼,這實在太辛苦了,而且手工作業長期下來很容易會出錯,剛好我也對 Flickr 預設的分享用 HTML code 不支援 XHTML 不滿很久了,所以我就決定寫個 Chrome extension 來做這件事。

目前還沒正式公開,沒有上架,專案在 Github 上,現在因為還沒上架,要使用比較麻煩一點,把專案 clone 到本機後,先開啟 Chrome 擴充功能的開發人員模式,然後選 載入未封裝擴充功能,路徑指到專案下的 source 去。

目前樣版語法用 mustache 語法,大概看一下預設的樣版就能懂怎麼用了,不過不是很正式的 parser 來處理,以後可能會換成hogan.js引擎,東西現狀其實只是可以用,還沒有寫文件,寫 License...等,先貼上來其實主要目的是,徵求一組可用的 icon,沒有 icon 就上架好像怪怪,有興趣提供的麻煩跟我聯絡,專案本身會是 MIT License,之後還會弄 Firefox 版,大概就這樣,非常感謝。


Screen 支援 256 色

之前把256色終端機環境弄好後一直還有個問題,就是跑 screen 的話,screen 裡面的 bash 還是沒有 256 色,本來一直以為是 $TERM 和設定的問題,結果剛剛又花時間找資料才發現是我編譯 screen 的時候根本沒開256色的支援編譯前要先 ./configure --enable-colors256


Opera in Taiwan

最近 Opera 台灣隨著15週年辦了一系列的活動,包括使用者聚會、校園講座與徵才,15週年記者會等,小弟我有幸參與了其中幾場,好像可以簡單介紹一下XD。

Opera 大約是去年年底在台灣成立分公司,雖然 Opera Desktop 在台灣幾乎是沒什麼能見度,可是在電腦以外的平台佔有率還是最高的,不過 Opera 台灣並沒有打算只專注在這些平台,除了推廣外,還要把台灣為數不少的 Opera 使用者集結起來,讓社群成形,現在不但有正式的中文討論區,還有官方的Twitter帳號Plurk帳號,另外還有Opera 第一手消息這個部落格。目前是可以預見他們會對台灣使用者開始投入些心力、資源,總之是好是一件。

在這次活動中,有人問到,為什麼 Opera 功能那麼強,但是使用者還是不多,那時候Andreas說他們也好奇原因,其實我一直以來也很納悶, Opera 本身除了效能好,還內建很多功能,其中不少還是 Opera 首先推出的,但是一直以來他們的佔有率就是不高,即使成為免費版後也沒有提昇多少。不過我想這會一直是個難解的問題,但是至少我自己選擇的原因我還有點印象,說來算是時間點不好,當我在決定要選哪個瀏覽器時,Opera 畫中文還畫的很難看,這應該是我當初選擇使用 Firefox 而不是 Opera 的主要原因(我對這種東西很外貿協會的XD),後來才知道 Firefox 很多擴充套件的功能是 Opera 直接就有內建的。

剛好大約一個月一次的摩茲連續聚,我下次還沒想到可以分享什麼東西,大概就介紹 Opera 吧XD,所以應該這兩天開始要強迫自己用 Opera 用一個月了XD,到時候從功能面來介紹它:P,雖然不能吸引到 IE 使用者跳槽就是~_~。


禁用 docx ?

剛剛看到來自立法院的好消息: 「隨身碟優先開機」 及 「禁用 docx」這篇文章時,還真是有點嚇到了,首先我要說一下我的立場,我是支持開放的,相較於 doc 和 docx 我比較支持 docx,而OpenDocument FormatOOXML比較的話我則是比較支持ODF的,當然支持那個格式不是這篇的重點,OOXML 成為 ISO 的過程也不是重點,我要說的是關於決議內容的錯誤。

積極宣導嚴禁散佈 docx, xlsx, pptx 等封閉檔案格式

OOXML格式並不是封閉格式,ECMA那有提供完整的檔案格式說明文件,OpenOffice.org也已經有辦法支援,實在看不出那裡是封閉。

順便一提,以前的二進位格式檔案的說明也有相關文件了。

建請在電腦軟體已經升級 Office 2007的公務單位,應積極宣導宣導嚴禁散佈 docx, xlsx, pptx 等封閉檔案格式

會有這條是因為其他單位可能還沒有 Office 2007 會沒辦法開啟 OOXML 格式的檔案,而升級到 Office 2007 會有諸多問題,包括預算、訓練(其實我覺得 Office 2007 根本就比以前好用許多),但是事實上微軟為了推廣 OOXML ,特別作了檔案格式相容性套件,而且往前支援到 Office 2000,這樣的往前支援其實是很罕見的,而且下載過程並沒有做 WGA 檢查。

這樣的決議文我覺得不是政商妥協下的產物,就是主事者沒搞清楚狀況造成的,如果真的通過的話而且 實行確實的話 ,政府機關只會回去用以前的,真的是封閉格式 doc, xls, ppt 檔,難道立法院能夠真的把這些格式也禁掉嘛?

其他參考文件:


Mockups

Balsamiq Mockups是一款用 AIR 寫的設計使用者介面的 mockup 軟體,不知道 mockup 是什麼的可以參考前陣子HappyDesigner Meetup 4hlb 的投影片,也有影片在 vimeo 上,我蠻早就有知道有這款軟體,而且一直都很喜歡它的手繪風格,不過那時沒什麼需求,所以沒深入研究。

後來發現到它有免費提供的幾個方法(包括寫篇 blog 介紹),剛好當時準備 HDM4 時有需要畫個幾張常見網頁 layout 的圖示,本來還想像男子漢用 HTML + CSS 來寫,後來就決定申請一個授權來畫這幾張圖片,使用的心得還可以拿來發一篇 blog,實在是一舉兩得啊~~。

閱讀「Mockups」全文

256色終端機環境

前兩天重灌OSX,在搞定OSX上的終端機(目前換用iTerm)環境時花了很多時間,過程中我才驚覺到我用putty/pietty登入到主機 shell 介面上的文字都是單色的,像是 ls 顯示出來的目錄和執行檔顏色都一樣,花了些時間研究,後來乾脆弄到256色的環境,設定還算簡單,記錄一下過程。

Linux端

Linux 是Ubuntu 8.04,內建的.bashrc會判斷 $TERM 這個環境變數來修改一些設定,而且一開始並沒有支援256色終端機環境,因此需要安裝一些套件,安裝指令為:

sudo aptitude install ncurses-term

裝完後,終端機軟體送出正確的$TERM變數就可以使用到256色的終端機了。

PuTTY端

我目前使用PuTTY Tray,這邊要修改的設定有兩項,一就是要送出正確的 termnial-type string,此一設定要在連線前就設定好,不然會找不到選項,位置在 connection → data 的 terminal-detail 內,設為「xterm-256color」,二是要把 Backspace 設為 Control-H ,選項位置在 Terminal → Keyboard 的 Change the sequences sent by 內,這樣設完重新連線應該就可以使用256色的環境了,不確定有沒有成功的可以去抓colortest.pl這個perl script來跑跑看。

256色有什麼好處呢?雖然掛BBS和IRC是都沒差,不過平常操作和vim的樣式就可以使用比較多顏色了,我現在在主機上的vim就改用IR_Black這個 color schema 了,顏色漂亮不少。

vim


我的Google Chrome評測

推出已經3天的Google瀏覽器,還蠻讓人期待最後正式版的樣子,不過目前有一些問題我覺得要先解決,首先是安裝問題,不少人無法安裝,我自己也有一台電腦是這樣,後來抓了離線版安裝檔順利安裝了,但是卻有一些功能和設定不能正常使用。另一個是memory leak問題,雖然Google說他們用多個process來處理記憶體問題,但不表示就可以不處理這問題,不然像我還是成功的讓Google Chrome吃了1G的記憶體。

1G

Firefox 3我不管怎樣弄大概吃到500多MB就最多了,當然我的測試不是開無限多圖,無限多分頁啦,基本上是開一個數百張圖的網頁,然後我發現Google Chrome只要我一直卷上卷下,那個記憶體就會越吃越多XD。

再來講講優點,其實就是,使用者介面的效果很棒,而且很流暢,我最喜歡的就是書籤工具列的切換,有兩種,第一種是平常看網頁的時候,直接Ctrl+B,就會有類似slide out感覺的動畫效果,另外一種則是隱藏書籤列時開空白新分頁,那個預設的頁面上也有個書籤工具列,如果這時候按下Ctrl + B,就會看到網頁上的書籤工具列往上移動和視窗的介面部分接在一起,感覺棒,而且效果很流暢。

另外就是用的訊息蠻有趣的,除了讓一堆人重病的「是不是我講錯什麼話讓你不開心了?」以外,確定反安裝後,還可以回他說「我沒有不高興(I am not unhappy)。」不過這些訊息在日文版似乎都修掉了,感覺有點可惜,又不過反正我也不會去用日文版,也覺得也沒差啦。

我沒有不高興


此類別所有文章