在 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 和他的師父來給我們一些系統層面的建議。這份筆記是主要是記錄我從他們口中所得到的心得,當然詳細的資訊還是需要花時間去研究與實作。而裡面有一些名詞是我沒有聽過的,所以可能記錯。

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

繼續閱讀

WebConf Taiwan 2013 心得與簡報

WebConf 心得

WebConf Taiwan 2013 是今年我所知道的第一個大型 Conference ,如果說只能用一個字表達這次 WebConf 的參加心得,那就是:讚!

在台灣已經有好幾個大型的 Conference ,但針對網站製作這個主軸來舉辦的可以說是非常罕見。而 WebConf 的議題不僅包含了 Web 開發、設計等專業領域,更有創業、團隊溝通等讓人值得省思的議題。許多朋友都表示,真的非常希望有分身術來聆聽每一場演講,就可以知道這些議題對於大家的吸引力有多高。

我也很榮幸地受邀演講,題目是「如何成為一個更好的 PHP 開發者」。

其實 PHP 這個主題並不是我一開始想說的,但龍哥認為我應該要幫國內 PHP 開發者打一劑強心針;因此我把原來想講的內容揉合了 PHP ,然後就是這次的內容了。以下是投影片:

可惜這次有些內容沒有時間講,所以我把這次的內容用文字的方式再次分享給大家。

繼續閱讀

[Web] 連結分享

繼續閱讀

網站技術發展史

前言

這篇主要是對 Web 技術的發展史做一個概略的介紹,讓大家對目前 Web 技術的演變能有初步的認知。

不過製作網站的技術很多,這裡我僅針對瀏覽器、 HTML 、 CSS 及 JavaScript 做粗略的演進說明,細節部份就請大家參考維基百科或其他更深入的資訊。

另外文章內容或多或少會帶有我個人的主觀意見,而我也儘可能透過網路上的資訊作查證,但一定會有錯誤及不足之處,還望大家能夠指正或補足。

繼續閱讀

[Web] 連結分享

繼續閱讀