整理一些常見的 PHP 錯誤

最近有數篇文章介紹了 PHP 開發者常見的錯誤,我順手整理如下:

繼續閱讀
PHP

CSS3 動畫基礎

註:本文為作者發表於 OpenFoundry 之 CSS3 動畫基礎一文的備份。

在 JSConf.Asia 2013 , Lea Verou 介紹了 CSS in the 4th dimension (影片) ,引發了整個 Web 界對 CSS 動畫的期盼;在 CSS動畫簡介一文也已經把重點整理好了。

以下我們將會介紹主要兩個 CSS3 在動畫的屬性: Transition 與 Animation ,並配合實例來練習這些技術,後面我也會介紹一些不錯的相關開發工具。

繼續閱讀
CSS

利用 Generator-angular 來建立一個 AngularJS 專案

參考了 AngularJS @ DevWeek 2014 這篇的介紹,認真地試玩了一下 Yomen AngularJS Generator ,以下是簡單的筆記。

繼續閱讀

20 個實用的前端開發參考資訊整理

原文連結: 20 Useful Docs and Guides for Front-End Developers

看到上面的文章收集了許多前端開發參考資訊,覺得非常實用,故將重點整理如下:

繼續閱讀

在 Safari 中遇到文字粗細顯示不正確的問題

在製作公司官網時,遇到類似以下這個影片的問題。

http://www.screenr.com/gZN8

也就是在有動畫效果時,某些元素上的文字粗細會被改變;然而實際用 DevTools 去查看該元素 CSS 時,會發現文字粗細樣式並沒有任何變化。

繼續閱讀

專注的承諾

如果你常常趕不上火車,你或許有機會看到火車離開月台後,月台上的站務人員以食指比向左右兩邊,似乎在指著什麼東西。如果你更好奇一點,往那兩個方向看去,你將會見到在遠處的鐵軌旁有個號誌燈。

其實鐵路站務人員是在確認那個號誌是否正確顯示,雖然用看的就可以,但他們會輔以動作來加強自己看到它的印象,這個動作稱為:指差確認。 (確認號誌是其中一項,可以看 Wiki 有更詳盡的說明。)

這個動作雖然較常見於危險性較高的行業,但它其實在軟體開發上,也以不同的形式存在著,那就是測試。

身為 Web 開發者,可能常會在修正一個自認只是影響不大的問題後,就直接讓程式上線;結果沒多久後就發現這個小修正影響到了其他地方,只好再趕緊針對這個修正再做修正。而良好且完整的測試可以減少出現這種問題的機會,但問題是我們常常會忘了要執行它。這件事要是發生在其他高危險性的職業 (我可沒說是台鐵) ,那麼後續的責任可就不是只有露出〇〇這麼簡單了。

軟體工程師的指差確認,就是養成隨手執行測試並確認結果的習慣;不論是什麼開發環境或編輯器,都應該試著把自動化測試放在開發流程裡,並且用最簡化的操作方式來讓自己能隨時執行它,以最清楚的呈現方式來讓自己能隨時看到它。雖然在軟體開發上還有其他方式可以來輔助我們做好這件事,像是 pre-commit hook 或是 Continuous Integration 等;但是讓自己也確實注意到測試的結果,將會加強我們自己對軟體承諾的力度,也有助於我們在開發上的專注力。

「渙散不論在什麼行業,都是效率的殺手。」

如果有「我好像有確認但我不確定」的狀況發生時,快讓自己養成用指差確認的習慣吧。

ScrollSpy 簡介

在 Single Page Design 中,我們常會把落落長的頁面分成幾個區塊,然後在上方或側邊選單中以這些區塊的標題來做為選單項目。

而當我們點選選單項目時,頁面會自動跳到 (或捲動到) 該區塊,而選單項目會反白。反過來如果我們捲動到該區塊時 (即該區塊佔了螢幕一定比例的大小,或是標頭到達某一特定位置) ,對應該區塊的選單項目也會自動反白。

這個效果就稱為「 ScrollSpy 」。

以下連結分享了許多已經採用 ScrollSpy 特效的網站,大家不妨參考看看:

http://www.hongkiat.com/blog/scrollspy-navigation-websites/

目前有很多套件可以做到 ScrollSpy 的效果了,例如 Bootstrap 3 就包含了這個套件:

http://getbootstrap.com/javascript/#scrollspy

另外也有獨立的 jQuery Plugin :

如果你不想用 jQuery 或是想瞭解 ScrollSpy 的原理,以下便是一個使用純 JavaScript 所寫的 ScrollSpy 類別:

https://gist.github.com/pascaldevink/2380129

開發 Laravel 套件時的單元測試

在官方手上的有關開發 Laravel 4 套件的章節,內容其實寫得滿詳盡了。只是它缺少了有關單元測試的說明,以下我將介紹一些自己的做法和經驗。

繼續閱讀

PHP + MongoDB 設定心得

這陣子被 MongoDB 的低效與不穩定性搞得焦頭爛額,但查了很多文件與資訊,都發現 MongoDB 的表現不應該如此不堪。而且查看系統的運作狀況,其實 CPU 連 30% 都沒跑到。為什麼會這樣呢?

而最常發生的問題就是大量寫入時,總是會出現 No candidate servers found 的訊息,然後程式就中斷了。幾經檢查,才發現是舊的第三方 mongodb library 寫法不能跟新的 PHP Mongo Native Driver 匹配。

以下就把我的設定心得記下來,供大家參考。

繼續閱讀

網站架構與部署策略筆記

這陣子為了公司的網站搞得自己焦頭爛額,其實自己很清楚在系統這個方面的涉獵並不深,但既然接了這個任務就得想辦法做好。

不過也因為不夠熟悉,讓系統出了很多問題。因此公司就請了我的好友 John 和他的師父來給我們一些系統層面的建議。這份筆記是主要是記錄我從他們口中所得到的心得,當然詳細的資訊還是需要花時間去研究與實作。而裡面有一些名詞是我沒有聽過的,所以可能記錯。

以下就是我個人覺得比較關鍵的部份:

繼續閱讀