Tech Column OpenFoundry provides essential tools and services through its service platform for users to develop Open Source Software Projects, the operating funds comes from the National Science Council and the Research Center for Information Technology Innovation of Academia Sinica Taiwan. https://www.openfoundry.org/tech-column 2019-11-21T15:57:58Z 第一次用 PHPUnit 寫測試就上手(下) 2014-12-29T08:32:32Z 2014-12-29T08:32:32Z https://www.openfoundry.org/en/tech-column/9328-phpunit-testing-ii 黃儀銘/文 ossfepaper@gmail.com <h3>上篇文章:<a href="https://www.openfoundry.org/tw/tech-column/9326-phpunit-testing" target="_blank">第一次用 PHPUnit 寫測試就上手(上)</a></h3> <h4 id="3-data-providers資料提供者">3. Data Providers(資料提供者)</h4> <p>資料提供者,能提供多筆的測試資料給測試案例進行多次的測試。</p> <p>使用資料提供者,能讓測試更簡潔,因為,可以將測試的 assertions 與測試資料分開寫。</p> <h3>上篇文章:<a href="https://www.openfoundry.org/tw/tech-column/9326-phpunit-testing" target="_blank">第一次用 PHPUnit 寫測試就上手(上)</a></h3> <h4 id="3-data-providers資料提供者">3. Data Providers(資料提供者)</h4> <p>資料提供者,能提供多筆的測試資料給測試案例進行多次的測試。</p> <p>使用資料提供者,能讓測試更簡潔,因為,可以將測試的 assertions 與測試資料分開寫。</p> 第一次用 PHPUnit 寫測試就上手(上) 2014-12-29T07:19:38Z 2014-12-29T07:19:38Z https://www.openfoundry.org/en/tech-column/9326-phpunit-testing-i 黃儀銘/文 ossfepaper@gmail.com <h3 id="一什麼是測試測試的重要性">一、什麼是測試?測試的重要性?</h3> <p>開發者在撰寫程式的時候,程式不大可能會沒有問題,所以通常就需要驗證程式的執行是不是符合預期。測試程式能用來驗證程式程式的運作是不是正常的,並發現程式中的錯誤,以增加軟體品質。</p> <p>下面是一個活動報名的系統:</p> <h3 id="一什麼是測試測試的重要性">一、什麼是測試?測試的重要性?</h3> <p>開發者在撰寫程式的時候,程式不大可能會沒有問題,所以通常就需要驗證程式的執行是不是符合預期。測試程式能用來驗證程式程式的運作是不是正常的,並發現程式中的錯誤,以增加軟體品質。</p> <p>下面是一個活動報名的系統:</p> Docker 實作入門 2014-12-05T01:46:53Z 2014-12-05T01:46:53Z https://www.openfoundry.org/en/tech-column/9319-docker-101 黃儀銘 contact@openfoundry.org <h3 id="-">目的</h3> <p>主要介紹 Docker 的實作,會提到以下幾個部分:</p> <ol> <li>建立 Docker container</li> <li>管理 Docker 上的 container</li> <li>下載 image 、commit 建立新的 image</li> <li>經由撰寫 Dockerfile 來自動建立新的 image</li> </ol> <p>在進入實作前,會簡單介紹 Docker 與虛擬化的差異、Docker 上的重要元件,接下來準備的部分會需要安裝 Docker 及先登入 Docker Hub。</p> <h3 id="-">目的</h3> <p>主要介紹 Docker 的實作,會提到以下幾個部分:</p> <ol> <li>建立 Docker container</li> <li>管理 Docker 上的 container</li> <li>下載 image 、commit 建立新的 image</li> <li>經由撰寫 Dockerfile 來自動建立新的 image</li> </ol> <p>在進入實作前,會簡單介紹 Docker 與虛擬化的差異、Docker 上的重要元件,接下來準備的部分會需要安裝 Docker 及先登入 Docker Hub。</p> 運用 Go 語言做 EMR 串流 2014-09-16T03:17:30Z 2014-09-16T03:17:30Z https://www.openfoundry.org/en/tech-column/9289-go-emr-stream 謝良奇/翻譯 viirya@gmail.com <p><strong>本文翻譯自 NY Times,原作者為 JP Robinson:<a href="https://open.blogs.nytimes.com/2014/07/10/emr-streaming-in-go/?_php=true&_type=blogs&_php=true&_type=blogs&_r=1">https://open.blogs.nytimes.com/2014/07/10/emr-streaming-in-go/?_php=true&_type=blogs&_php=true&_type=blogs&_r=1</a></strong></p> <p>我們的平台團隊使用 Amazon 的 Elastic MapReduce (EMR) 服務,協助我們從日誌檔收集有用的數據。我們有一些程序會抓取日誌檔,接著壓縮並推送到 Amazon S3 上儲存。感謝 EMR,這套模式聚集出回溯數年之久的龐大資訊,等待我們進行資料重整 (data crunching)。一開始我們用 Python 做了不少苦功,不過我們漸漸地轉而依賴 Go。</p> <p><strong>本文翻譯自 NY Times,原作者為 JP Robinson:<a href="https://open.blogs.nytimes.com/2014/07/10/emr-streaming-in-go/?_php=true&_type=blogs&_php=true&_type=blogs&_r=1">https://open.blogs.nytimes.com/2014/07/10/emr-streaming-in-go/?_php=true&_type=blogs&_php=true&_type=blogs&_r=1</a></strong></p> <p>我們的平台團隊使用 Amazon 的 Elastic MapReduce (EMR) 服務,協助我們從日誌檔收集有用的數據。我們有一些程序會抓取日誌檔,接著壓縮並推送到 Amazon S3 上儲存。感謝 EMR,這套模式聚集出回溯數年之久的龐大資訊,等待我們進行資料重整 (data crunching)。一開始我們用 Python 做了不少苦功,不過我們漸漸地轉而依賴 Go。</p> LiveReload - 網頁開發者必備的自動重新整理外掛 2014-06-09T02:23:06Z 2014-06-09T02:23:06Z https://www.openfoundry.org/en/tech-column/9240-livereload- 凍仁翔 jonny@drx.tw <p>網頁開發者 (Web Developer) 一天會在瀏覽器 (browser) 裡重新整理 (refresh) 個千百次是常有的事,但這樣不只會造成開發上的中斷,也會加重雙手的負擔。</p> <p>這裡凍仁將介紹 LiveReload 給大家,<strong>它是個可以在儲存檔案後自動重新整理 browser 的解決方案</strong>,LiveReload 雖然不能即時呈現,但可以讓開發環境變得友善點,是值得投資的好工具,若能搭配雙螢幕使用其效果更佳。</p> <p>(註:本文的撰寫環境是以 Ubuntu 12.04 為主,若版本不同可能會有些許的不同。)</p> <p>網頁開發者 (Web Developer) 一天會在瀏覽器 (browser) 裡重新整理 (refresh) 個千百次是常有的事,但這樣不只會造成開發上的中斷,也會加重雙手的負擔。</p> <p>這裡凍仁將介紹 LiveReload 給大家,<strong>它是個可以在儲存檔案後自動重新整理 browser 的解決方案</strong>,LiveReload 雖然不能即時呈現,但可以讓開發環境變得友善點,是值得投資的好工具,若能搭配雙螢幕使用其效果更佳。</p> <p>(註:本文的撰寫環境是以 Ubuntu 12.04 為主,若版本不同可能會有些許的不同。)</p> CSS3 動畫基礎 2014-05-23T04:00:57Z 2014-05-23T04:00:57Z https://www.openfoundry.org/en/tech-column/9233-css3-animation Jace Ju jaceju@gmail.com <p>在 JSConf.Asia 2013 , Lea Verou 介紹了 <a target="_blank" href="https://lea.verou.me/css-4d/#intro">CSS in the 4th dimension</a> (<a target="_blank" href="https://www.youtube.com/watch?v=NTJUFQmHbvc">影片</a>) ,引發了整個 Web 界對 CSS 動畫的期盼;在 <a target="_blank" href="https://www.ruanyifeng.com/blog/2014/02/css_transition_and_animation.html">CSS動畫簡介</a>一文也已經把重點整理好了。</p> <p>以下我們將會介紹主要兩個 CSS3 在動畫的屬性: Transition 與 Animation ,並配合實例來練習這些技術,後面我也會介紹一些不錯的相關開發工具。</p> <p>在 JSConf.Asia 2013 , Lea Verou 介紹了 <a target="_blank" href="https://lea.verou.me/css-4d/#intro">CSS in the 4th dimension</a> (<a target="_blank" href="https://www.youtube.com/watch?v=NTJUFQmHbvc">影片</a>) ,引發了整個 Web 界對 CSS 動畫的期盼;在 <a target="_blank" href="https://www.ruanyifeng.com/blog/2014/02/css_transition_and_animation.html">CSS動畫簡介</a>一文也已經把重點整理好了。</p> <p>以下我們將會介紹主要兩個 CSS3 在動畫的屬性: Transition 與 Animation ,並配合實例來練習這些技術,後面我也會介紹一些不錯的相關開發工具。</p> Code Review 指引 2014-05-13T01:53:45Z 2014-05-13T01:53:45Z https://www.openfoundry.org/en/tech-column/9225-code-review- Joey Chen (91) ossfepaper@gmail.com <h3>為什麼需要 Code Review</h3> <p>要瞭解為什麼需要 code review 之前,先透過下面這張圖解釋,隨著軟體開發週期越後面的階段或經歷的時間越長,軟體修復 bug 的成本越高。</p> <p><img alt="01" src="https://www.openfoundry.org/images/140513/01.jpg" height="263" width="498" /></p> <p>▲圖 1 軟體修復成本與時間關係(資料來源:<a target="_blank" href="https://buildsecurityin.us-cert.gov/articles/best-practices/security-testing/risk-based-and-functional-security-testing">https://buildsecurityin.us-cert.gov/articles/best-practices/security-testing/risk-based-and-functional-security-testing</a>)</p> <h3>為什麼需要 Code Review</h3> <p>要瞭解為什麼需要 code review 之前,先透過下面這張圖解釋,隨著軟體開發週期越後面的階段或經歷的時間越長,軟體修復 bug 的成本越高。</p> <p><img alt="01" src="https://www.openfoundry.org/images/140513/01.jpg" height="263" width="498" /></p> <p>▲圖 1 軟體修復成本與時間關係(資料來源:<a target="_blank" href="https://buildsecurityin.us-cert.gov/articles/best-practices/security-testing/risk-based-and-functional-security-testing">https://buildsecurityin.us-cert.gov/articles/best-practices/security-testing/risk-based-and-functional-security-testing</a>)</p> PHP log 的勝利與挑戰 2014-05-07T01:53:57Z 2014-05-07T01:53:57Z https://www.openfoundry.org/en/tech-column/9223-php-log- 謝良奇/翻譯 viirya@gmail.com <p>◎本文翻譯自 The NewYork Times,原作者為 Jonathan Marballi︰<br /><a target="_blank" href="https://open.blogs.nytimes.com/2014/03/25/the-triumphs-and-challenges-of-logging-in-php-and-really-most-languages-probably/">https://open.blogs.nytimes.com/2014/03/25/the-triumphs-and-challenges-of-logging-in-php-and-really-most-languages-probably/</a></p> <p>當你的網站出現問題,從 system logs 作為排除故障的起點,是不錯的選擇。伺服器出錯了嗎?檢查 log。網頁看起來不對勁或有亂碼?檢查 log。在重新設計紐約時報網站過程中,我們趁此機會為後端 PHP 框架,開發出輕量級、彈性好用的 log 類別。</p> <p>我們決定利用開源程式庫,考量過一些選擇後,我們採納了 Symfony 的 Monolog logger。我們也考量過 KLogger 與 Analog 這兩套受歡迎的 log 程式庫,但是發現它們不符合我們的所有需求。KLogger 對輸出到檔案的 log 而言很棒,但缺乏將 log 輸出到其他管道的彈性。Analog 相當輕量而簡單,但是因為採用了靜態架構,難以在我們的單元測試中進行模似 (mock in)。Symfony 的 log 似乎是最輕量、最富彈性與延展性的。</p> <p>◎本文翻譯自 The NewYork Times,原作者為 Jonathan Marballi︰<br /><a target="_blank" href="https://open.blogs.nytimes.com/2014/03/25/the-triumphs-and-challenges-of-logging-in-php-and-really-most-languages-probably/">https://open.blogs.nytimes.com/2014/03/25/the-triumphs-and-challenges-of-logging-in-php-and-really-most-languages-probably/</a></p> <p>當你的網站出現問題,從 system logs 作為排除故障的起點,是不錯的選擇。伺服器出錯了嗎?檢查 log。網頁看起來不對勁或有亂碼?檢查 log。在重新設計紐約時報網站過程中,我們趁此機會為後端 PHP 框架,開發出輕量級、彈性好用的 log 類別。</p> <p>我們決定利用開源程式庫,考量過一些選擇後,我們採納了 Symfony 的 Monolog logger。我們也考量過 KLogger 與 Analog 這兩套受歡迎的 log 程式庫,但是發現它們不符合我們的所有需求。KLogger 對輸出到檔案的 log 而言很棒,但缺乏將 log 輸出到其他管道的彈性。Analog 相當輕量而簡單,但是因為採用了靜態架構,難以在我們的單元測試中進行模似 (mock in)。Symfony 的 log 似乎是最輕量、最富彈性與延展性的。</p> AngularJS 指令 2014-04-29T02:17:01Z 2014-04-29T02:17:01Z https://www.openfoundry.org/en/tech-column/9216-angularjs-2 Circle ossfepaper@gmail.com <h3>第二回我們接著要了解 AngularJS 的入門指令,Code 的作用。例如:</h3> <br /> <h4>1、新增宣告語法 ng-app :</h4> <p>宣告應用程式作用域(Application Scope),在 Document Object Model(DOM)載入後,AngularJS 就會開始尋找 <code>ng-app</code> 這個字,找到的話,就會把這頁面當成是 AngularJS 應用程式。</p> <p>(1)宣告方式:<strong>一份 HTML 只能宣告一個應用程式作用域(ng-app)</strong></p> <pre><html ng-app></pre> <pre><html ng-app="appName"></pre> <h3>第二回我們接著要了解 AngularJS 的入門指令,Code 的作用。例如:</h3> <br /> <h4>1、新增宣告語法 ng-app :</h4> <p>宣告應用程式作用域(Application Scope),在 Document Object Model(DOM)載入後,AngularJS 就會開始尋找 <code>ng-app</code> 這個字,找到的話,就會把這頁面當成是 AngularJS 應用程式。</p> <p>(1)宣告方式:<strong>一份 HTML 只能宣告一個應用程式作用域(ng-app)</strong></p> <pre><html ng-app></pre> <pre><html ng-app="appName"></pre> AngularJS 簡介 2014-04-14T06:32:46Z 2014-04-14T06:32:46Z https://www.openfoundry.org/en/tech-column/9208-angularjs-1 Circle ossfepaper@gmail.com <h3>甚麼是 AngularJS?</h3> <p>AngularJS 是一個使用 HTML、JavaScript 和 CSS 來建立 Web 應用程式的框架(Framework),其由 Google 所創建,用來協助單一頁面應用程式的運行。</p> <p>它可以擴展應用程式中的 HTML 詞彙,從而在 Web 應用程式中使用 HTML 聲明動態內容,並擴展 HTML 的語法,以便清晰、簡潔地表示應用程式中的組件,並允許將標準的 HTML 作為你的模板語言(Template Language)。</p> <h3>甚麼是 AngularJS?</h3> <p>AngularJS 是一個使用 HTML、JavaScript 和 CSS 來建立 Web 應用程式的框架(Framework),其由 Google 所創建,用來協助單一頁面應用程式的運行。</p> <p>它可以擴展應用程式中的 HTML 詞彙,從而在 Web 應用程式中使用 HTML 聲明動態內容,並擴展 HTML 的語法,以便清晰、簡潔地表示應用程式中的組件,並允許將標準的 HTML 作為你的模板語言(Template Language)。</p>