Open Jiang

StackEdit 自定 CSS 匯出 HTML Template StackEdit 是一個所見即所得的線上 Markdown 編輯器，在先前的文章已有許多的介紹。身為程式設計在寫筆記的時候更是需要像這樣的工具，讓我們更能聚焦在內容上並且能運用 highlight.js 來標註程式碼。 檔案分享的方法 Google 雲端硬碟、Dropbox 我們更可以將筆記透過 StackEdit 直接發佈至 Google Blogger 上，或是儲存在自己的 Google 雲端硬碟、Dropbox 等等的位置。 Gist、StackEdit Viewer 如果需要將資料分享給其他沒有安裝 Markdown Viewer 的人，除了使用上述的方法，我們也可以將檔案發佈至 Gist ，或是將我們的 Markdown 檔案放至網路，透過 StackEdit 的 Viewer 將網址引入直接使用瀏覽器觀看。Ex： Here 。 https://stackedit.io/viewer#!url= [ 放置 Markdown 檔案的 URL 位址 ] PDF StackEdit 的 PDF 功能是需要透過雲端的轉換（透過 Pondoc + LaTex 實踐），對於這個部分的功能是贊助者項目，如果覺得 StackEdit 好用，很建議大家贊助讓他們可以更長久的經營。另外一個方式，是利用 StackEdit Viewer + Chrome Browser 來實踐。 開啓 Chrome Browser 開啓 StackEdit Viewer：Menu –> StackEdit Viewer 在 Viewer 模式下開啓列印 選擇 「Save as PDF」 HTML 另外一種跨平臺支援的方式是使用 HTML，只要是有瀏覽器都可以觀看，而且透過 CSS 可以改變成我們自己想要變化的風格。也是今天主要想和大家分享的方法。 使用自定的 CSS 匯出 HTML 檔案 StackEdit 匯出 HTML 的方式所匯出的檔案是很陽春白白靜靜的檔案，無論字型還是區塊安排都會有一點點的悲劇。還好，它還提供了一個以自定 Template 來匯出 HTML 的方式，讓我們有機會透過自定的 CSS 檔來

uBuntu /boot 空間 100% 滿載問題 在先前的文章「 uBuntu 更新時 /boot 空間不足 」中，有針對如果 boot 空間不足的時候該如何以 apt-get purge 的方式移除舊的 kernel-package。現在可以使用 apt-get autoremove old-kernel-package 的方式移除，如果不指定 kernel-package 的版本，則會移除現在所有的舊版本。 sudo apt-get autoremove linux-image- 3.13 . 0 - 51 -generic linux-image- 3.13 . 0 - 51 -generic 這個方式也會一併的移除相依套件，相當的安全又乾淨（愈來愈無腦操作了 =,.=）。先前 purge 方式是在 /boot 還有空間的時候移除舊版，最近碰上的問題則是 /boot 空間已經 100% 滿載，新的 kernel 又只有裝一半（相依套件未完成安裝），導致任何的 apt-get 方式都無法使用，系統提示要以 apt-get -f install 方式強制解決新 kernel 的相依問題，而 /boot 又沒有任何空間，進入 Deadlock 狀況… 對於這種狀況的解法， 我們先清理出一些 /boot 的空間 # 切換至 /boot 目錄下 $ cd /boot # 確認目前運行的 kernel 版本 $ uname -r # 備份舊的 kernel 版本 $ sudo tar -cvf ~/boot.tar * 3.13 . 0 - 36 -generic * 3.13 . 0 - 37 -generic # 刪除已經備份的內容 $ sudo rm -f * 3.13 . 0 - 36 -generic * 3.13 . 0 - 37 -generic Note 完成後面的相依性安裝需要一些空間，請試需要移出足夠的空間。 解決套件相依性問題 $ sudo apt-get -f install 使用 autoremove 方法清除舊版本 $ sudo apt-get autoremove 重新開機就會套用新的 kernel 版本。 參

PHP 的命名風格（Coding Style） PHP 的學習與使用有蠻常的時間，近期的 PHP 更新使得這個語言融入其他語言的優點，在程式的特性上有些大躍進。近期閱讀 「現代PHP（ Modren PHP ）」 這本書，有種看完會更新整個使用 PHP 思維的感覺。書中有篇章在說明 PHP-FIG 的 PSR 建議標準，相同的使用規範能夠讓程式開發人員的程式互通性更好，合作性更佳，不再是悶着頭寫程式的時代，讓我們更容易的使用別人的輪子造車子。 其中 PSR-1 對於程式碼的風格有一些基礎的規範，回顧之前不同時期寫的程式，會發現自己在不同的學習階段，會依據當時查詢的風格規範而更改，每次都有一點小小的不同，這次決定記錄下來讓自己參考也與其他人交流。 變數命名 PSR-1 建議標準中，有針對類別、常數等建議命名原則，對於變數的名稱在 PSR-1 的內容中有提到沒有特別制定建議項目，之前觀察不同前輩的建議和查詢幾個有名的框架（Zend、Symfony、Laravel），寫下自己對變數名稱的命名。 駝峰式命名法（camelCase），小寫字母開頭，後面每個單字的第一個字母大寫。 要使用描述性的命名方式。 迴圈變數通常使用: $i , $j , $k , …等等。 存放 session 的變數前面以 sess 開頭。 存放 cookie 的變數前面以 coke 開頭。 臨時性的變數前面以 tmp 開頭。 $query 和 $result 這兩個變數只能用在 SQL 的查詢語法變數與查詢結果變數。 項目名稱（option）全部使用小寫及使用底線 _ （underscore）分隔。 $defaultOptions = array ( 'some_default' => 'values' , 'another_default' => 'more values' , ); 常數命名 常數名稱完全採用大寫英文字母。【PSR-1】 必要時使用底線 _ （underscore）來區分單字。【PSR-1】 如果內容有可能會改變，應改採用變數而非常數。 類別命名 必須使用 大寫開頭 的駝峰式命名（camel

先前 ubuntu 的套件庫沒有包含 Python 的 MySQLdb 套件，必須手動至 MySQLdb 官網下載位址 下載來解壓縮安裝，如果還不確定是不是已經安裝，可以先進 python import 試試看。如果出現 ImportError: No module named MySQLdb 的訊息就表示還沒有安裝這個模組。 Python 2.7 . 6 (default, Mar 22 2014 , 22 : 59 : 56 ) [GCC 4.8 . 2 ] on linux2 Type "help" , "copyright" , "credits" or "license" for more information. >>> import MySQLdb Traceback (most recent call last): File "<stdin>" , line 1 , in <module> ImportError: No module named MySQLdb >>> exit () 手動安裝的方式：先下載目前的版本，解壓縮後安裝，步驟如後。 $ sudo tar -zxvf MySQL-python- 1.2 . 4 b4.tar.gz $ cd MySQL-python- 1.2 . 4 b4 $ python setup.py build $ python setup.py install 若要使用 pip 安裝，在 這篇 文章中有敘述安裝的步驟和方法，這邊記錄一下步驟。 $ sudo easy_install pip $ sudo pip install pip --upgrade $ sudo apt-get build-dep python-mysqldb $ sudo pip install MySQL-python 現在使用的系統是 ubuntu 14.04.2 64bit，發現套件庫裡已經有包含 MySQLdb 了，只要直接用 apt-get 安裝即可。現在套件庫裡的版本是 1.2.3。 $ su

新生兒 CJScope ZQ-230 筆記型電腦發展一直很迅速，至這兩年才慢慢的被平板取代掉一部分的市場，如果只是上上網或玩玩小遊戲倒是很夠用了，想做圖或是寫程式的話，還是使用筆記型電腦比較好一些，個人覺得平板暫時還是無法完全取代筆記型電腦。 上一臺筆電為了追求輕薄選擇了 inhon 的 carbon book，全機使用碳纖外殼整體重量才 880 公克，實在是非常適合攜帶的電腦。可是卻有一個對我來說非常大的致命傷，RAM 只有 4GB 大小而且還是與內顯共用，全機一體成形記憶體燒在主機板上，完全沒有能夠加裝的空間，開啓 Chrome 瀏覽器不久就會面臨記憶體吃光光的窘境… 為了更能夠以筆電來工作，尋覓一陣子各廠牌的筆電，總是會有一兩樣規格的不符合需求。記憶體足夠的螢幕解析度太差 沒有 FullHD ，輕薄的筆電又是記憶體不足，什麼都不錯的又太過於厚重。各大廠在產品定位區隔上都掐的剛剛好！老天爺啊~怎麼就是十全十美的筆電呢？！ 上天果然是有聽到宅男的呼喚，學弟在某一天突然帶來一臺沒看過的廠牌 CJScope ，上網搜尋了一下這個品牌原來是客製化筆電的品牌（亮點：客製化），當週就立馬到他們的旗艦店去現場試機和討論，當天就拜倒在組裝的魅力下敗了一臺 ZQ-230。雖然沒有談成扣除掉 Windows 作業系統，自己挑了喜歡的硬體組合還是感到很滿足的啊！ 選擇 Ubuntu GNOME 14.04.2 LTS 由於已經將日常的工作都轉到 Linux 平臺上，所以把 Windows 安裝在一般的硬碟，將 SSD 留做安裝 Linux 的空間以加快執行的速度。工作的桌機安裝的是 Ubuntu 14.04（Unity 桌面系統），家裡的桌機安裝的是 Linux Mint Cinnamon 17.1，HTPC 使用的是 Linux Mint MATE 17.1。一直想嘗試不一樣的桌面系統，所以在不同設備上安裝不一樣的桌面版本來嘗試。Linux 原本的設計就不是為了 Laptop，所以在電力消耗上是容易讓人頭疼，因為這一片文章 Ubuntu GNOME 14.04 “Trusty Tahr” LTS Review: Very very good! 後來決定選擇 Ubuntu GNOME 14.04.2 來試試。 硬碟分割 原本蠻擔心固態硬碟

StackEdit 發佈至 Blog 的段落問題 前一陣子動工修改 Bolgger 的模板，設計修改版面的時候是停留在面後一直沒有特別的去注意段落間距，這幾天回來看最近的文章，突然發現段落們的感情未免也太好了一點，居然都黏在一起…（如下圖）。 原本的文章確實是有段落，清清楚楚的分隔開來的！ 段落跑版的原因 滑鼠右鍵開啓網頁的原始碼觀察，發現原本該是 <p>...</p> 的部分已經被改成 <br /> ，不是段落而是換行了。 國外有篇發問提到這個問題 How can I make blogger insert p tags instead of when using rich text editor? ，在舊有的編輯器上會使用 <div> 和 <br> 來取代 <p> ，所以原先在 StackEdit 裡匯出有 <p> 段落的文章也會在經過 Blogger 時被取代成換行符號。 解決方法 請在 Blogger 後臺隨意的開啓一片文章，在右手邊文章設定 -> 選項 -> 換行符號，點選成「按下 Enter 鍵可建立換行符號」項目，此步驟只需要設定一次，設定會自行記住套用至其他的文章。 完成設定後，請重新再由 StackEdit 發佈一次讓 Blogger 能夠更新內容，更新的方法是由後臺找到該文章的 Post ID，在 StackEdit 發佈的地方加填上要更新文章的 Post ID，幫助辨識是哪一篇文章。重新更新發佈後就可以發現段落已經恢復原樣了！

好一個抓爬仔 PHP cURL 現在好流行 “自己的 OO 自己 O” 前次的會議中，看到傳播學院的學生實實在在的貫徹了這個理論，“自己的 網頁 自己 爬 ”該學生由於不想一頁一頁的存需要的網頁，自己寫了一個小爬蟲來爬這些網頁的資料存成 CSV 檔。只能在心裡說：同學，留口飯給我們吃啦！ 對於爬資料，PHP 裡面除了使用 fopen 的方式抓取網頁，還有一個厲害的抓爬仔函式庫 cURL (client URL) 。這個函式庫支援 libcurl，允許我們使用來與不同類型的 Server 做溝通。在 ubuntu 下預設是沒有安裝這個套件，可透過 apt-get 來安裝。 $ sudo apt -get install php5 -curl cURL 函式 使用 PHP cURL 的方法很簡單，只要初始化、設定、執行、關閉四個步驟就好，活用和複雜的部分是在 設定 這個步驟裡的參數設定。 初始化 curl_init() 函式初始化一個 cURL session，會傳回一個 cURL handle 作為後面設定執行等函式使用。初始化的時候可以直接指定 URL ，或保留空白由後面設定中在指定。 設定 使用 curl_setopt() 函式設定 cURL session handle 的項目內容，這裡有非常非常多的項目參數可以設定，可以參考 官方網站 curl_setopt 的項目參數說明本文後面僅列出常用的參數。 執行 curl_exec() 函式執行一個已經設定好參數的 cURL session。執行成功時會回傳 TRUE 失敗時回傳 FALSE ，如果參數裡包含 CURLOPT_RETURNTRANSFER 設定為 TRUE 時，執行成功後會回傳內容。 關閉 curl_close() 函式會關閉指定的 cURL session，並釋放資源及刪除 cURL handle。 一個簡單的範例： // 建立一個新的 cURL session $ch = curl_init(); // 設置 URL 及其他參數 curl_setopt( $ch , CURLOPT_URL, "http://www.example.com/" ); curl_setopt( $ch , CURLOPT

使用 StackEdit 發佈至 Blogger 目前部落格裡新的文章幾乎都是在 StackEdit 上使用 Markdown 來完成撰寫，是一個舒適的撰寫體驗，也更能讓自己專注在文章的撰寫，不用去調整版面上的細節。StackEdit 除了可以將文本直接存在 Google Drive 上，圖形直接嵌入引用 Google+ 相簿，讓整個寫作的流程都是在雲端上完成，另外一個我喜歡的優點，是能夠直接將寫好的文章發佈到自己的部落格上。 發佈至 Blogger 部落格 將文章發佈至 Blogger 上的方法非常簡單，在 StackEdit 的左上角開啓左邊的功能列，拉開 Publish 項目並點選 Blogger，如下圖： 第一次使用時會導引至 Google 的授權頁，回到彈出的對話視窗，填寫好 Blogger 的 URL 內容。新發佈不用填寫 POST ID，這個是未來若需要更新內容的時候使用的。 按下「OK」後就完成發佈的動作，發佈完成後，在 StackEdit 該篇文章的右上角會出現 Blogger 的 Icon。 部落格的樣本改造 文章發佈至 Blogger 後有的模板會有小小的問題，如果我們使用 Markdown 時沒有寫入圖片的最大寬度，插入的圖片若比較大就會造成圖形突破樣板的驚嚇感。 這個可以透過自己改造Blogger 模板內容的 CSS，將圖片最大限制在某個數值。簡單一點的方式，是選擇現在 Blogger 中就已經有限制圖片大小的佈景主題。 程式碼高亮標識 StackEdit 的程式區塊是有支援程式碼高亮標識（Highlight）的功能，預設是使用 Highlight.js 的函式庫，也可以使用 Google prettify。Highlight.js 目前已經支援 118 種的程式語法自動偵測。還有 54 種的 Style 可以選擇。但是發佈至 Blogger 後因模板沒有相關的引入，所以程式碼區塊就和一般的文字一樣，沒有區塊和程式碼標識的區別。 我們可以透過修改 Blogger 的樣板的樣式，引入 Highlight.js 的函式庫與樣式。進入 Blogger 的後臺管理頁面，在左方的選單中選擇 範本 ，然後右方選 編輯 HTML ，開啓樣板的 HTML 編輯畫面。 我們可以在 Highlight.js

使用 Markdown 寫部落格 年紀大了，很多最近在查詢的資訊其實以前都花一番功夫查過，沒有記錄下來都還要再花時間找回。之前大部分的做法有二，一個是直接寫部落格，二來是使用 Evernote。 編輯的時間太長 部落格一直以來都是使用 Google 的 blogger ，內建的編輯器有點時代久遠，編輯與調整使得，每次都要花很久的時間才能完成一篇文章的撰寫。於是開始工作後，部落格就由週記、月記….間隔一直慢慢的拉大。在未發佈的文章裡放了滿滿的參考連結。 編輯器太過陽春 Evernote 是今年很多人推廣的一個筆記軟體，功能一直的加強擴張。有了 Windows 及 MaxOS 的應用程式，卻沒有 Linux 可以使用的應用程式。身爲 Linux 的使用者，只能使用 Evernote 的網頁版，而網頁版的編輯器功能大概就只是比 Notepad 強一些而已。 筆記也能分享 既然花了這麼多的時間查詢資料、整理資訊，總是希望這樣的結果是可以與人分享的，知識是需要交流才能夠更進步。放在 Evernote 就比較難與很多人分享與流通。 基於上述的理由，決定探訪最近很多 Hacker 使用的 Logdown 。Logdown 也是一個部落格平臺，最大不一樣的地方是使用 Markdown （Markdown 是一個專門爲了網路寫作而設計，能夠將文字轉換成 HTML 標記的語言。）來編輯，Logdown 結合 Blog 與 Markdown 成了平臺的名稱。 Markdown 是個很酷的東西，幾乎使用鍵盤就可以完成一篇文章，不需要頻繁的使用滑鼠。可是…可是…這麼多年的累積心裡希望的還是不要更動太大（大搬家），如果能一次滿足兩個願望就好了！ 找了一些編輯器，看到網路有推薦一套 Markdown 的編輯器 StackEdit ，是一款和 Google Chrome 整合的 Web Application，可以在 Chrome 的 web store 上找到這個 StackEdit 應用程式。選擇使用 StackEdit 的原因有幾個： 跨平臺使用，有瀏覽器就能編輯 使用 Chrome 瀏覽器作爲應用程式載體，所以只要是能夠使用 Chrome 瀏覽器的桌面環境都可以使用，除了 Windows、MacOS、Linux（Fedora，Linux Mint，uB

Atom Editor 中文顯示框框問題 去年（2014）2月的時候，GitHub 推出一個長相很像 Sublime text 編輯器的文字編輯器 Atom ，是一個以網頁為基礎開發的編輯器，目標是希望從小學生到駭客都會使用的好上手編輯器。結合了 sublime text 與 Emac 的優點，經過六年的開發磨了一把好劍，去年 5 月的時候 GitHub 將核心程式與套件管理程式開源 修改 style 檔案 開啓家目錄下 .atom 裡的設定 less 檔 ~/.atom/styles.less ，在將核心程式與套件管理程式開源。 因爲是基於 Chromium 的桌面程式框架和 Coffeescript 所寫，所以能夠跨平臺使用整合使用體驗，也可以使用我們熟悉的 HTML、CSS、Javascript 來修改一些 Atom 的內容。有機會將瀏覽器使用的 WebGL 或是視覺化常用的 Javascript 函式庫 D3.js 使用在 Atom 上。 因為使用了 Node.js 的架構，所以可以使用 Node.js 裡 npm 管理的套件（六萬多個）。Atom 有許多優點也有一些小缺點，現在還在積極的發展中，版本更新的速度很快相信許多問題能迅速的獲得解決。 Atom 中文顯示變框框 Atom 在 Linux 的版本中中文顯示會變成一個個的框框，這多半是因為預設使用了沒有支援中文的字型所造成，可以由 setting 裡的 font-family 設定自己喜歡有支援中文的字型。 Atom 因為是由 GitHub 開發所以有支援 markdown 的語法，剛好最近開始練習使用 markdown 語法，剛好在離線時可以拿來在本機使用。但是開啟 maekdown preview （ ctrl+m ）的時候，即使在 setting 中有設定 font-family 中文還是會變成框框字，如下圖。 修改 style 檔案更換字型 如前述，由於 Atom 是用 chromium 的桌面程式框架，所以可以使用 CSS 來定義（大心 ）。修改方法是，開啓家目錄下 .atom 裡的設定 less 檔 ~/.atom/styles.less ，在前面先定義 font-family 字型，套用在 atom-text-editor 和 markdown-prev