I'm Kero

Planning, Fast and Slow.

工程師蒐集資訊使用的工具

從加拿大回來一年多了,此趟遊學對我而言最大的益處仍然在於心態的改變,其二則是習慣英文。我每日的大部分資訊來源於外國,我看英文節目、聽英文廣播、閱讀英文新聞和科技文章,習慣使用的工具介面也幾乎都是英文的。

也許是老生常談,但我現在相信「要國際化英文真的必須好」。台灣在很多領域依然落後國際,但網路好歹算發達,所以如果能閱讀各行各業在網上的第一手資訊無疑大有幫助。

許多資深老屁股,技術上不去的最大障礙是語言。有時丟一個網頁過去,看不懂,就擺出漠然不 care 的表情 (也許在他們眼中出國遊學的人回國繼續讀英文令人不爽)。的確在國內練英文口說的環境不夠好,但閱讀絕對在哪個地方都能練,只要常讀就進步得快,然後你就會在網路上發現新世界。

CSS 命名的基本規則

我發現很多補習班似乎都不重視教導 CSS class naming 的重要性。簡單的說,會寫 CSS 很容易,但寫好 CSS 不是那麼容易的事,好的命名習慣重視語義化和統一性,和其他程式語言的 naming 一樣有利於大大提高維護性和可用性。

(以下以 SASS 語法 為例)

Think in Objects

讓沒有學過物件導向程式設計的網頁設計師去 think in objects 是有點勉強,不過統籌和最大效益化勞動成果是每個人都要去思考的。寫完一套 CSS,裡面的 CLASS 以後還能用到嗎?構成的方法需要特別注意。比如要寫一個 button,與其這樣寫:

#article .article-content .link {
    background: linear-gradient(#eee, #ccc);
    color: #333;
    padding: 4px 10px 5px;
    &:hover {
        background: linear-gradient(#fff, #ddd);
        color: #111;
    }
}

顯然把它視為可重複利用的 object 來寫更好。

CodeKit vs. Prepros

After getting used to the convinience of CodeKit, a powerful tool which features scss/sass compiler and browser live-refresh, I've been searching for an alternative app on Windows for a while. And there comes Prepros, a free tool quite similar to CodeKit.

Before comparing them I have to admit I've been a big fan of CodeKit since 2 years ago and just got used to Prepros for severial days. I use Prepros only when I cannot do my work on Mac. From my experience, I think my old toy - CodeKit - truly is much better than Prepros, not only because I love Mac environment more. Here are some of their differences:

CodeKit watches HTML files but Prepros(Free) dosen't.

This is a big fallback of Prepros. Codekit watches all files including html/scss/sass/js/images, 'cause developers need them to be seen when any changes happen to them. That's the meaning of live-refreshing. I don't know why Prepros only serves as a pure scss compiler. It actually saves some time but not a lot of time.

Update: Prepros Pro does provide "Live Refresh Anything" for a resonable price($24).

CodeKit serves as file browser but Prepros dosen't.

You may see all files on the interface of CodeKit. It also allows you to hide or show whatever file you would like. These files are categorized automatically and can be dragged to other applications for editing work. Prepros only shows scss/sass files, and you cannot drag them out directly from the window. Alternatively, you may right-click on the files to execute the actions you want to.

Prepros dosen't have transition effect for CSS changes.

Well, it's not a big deal but I do enjoy the transition effect of CodeKit. It allows a webpage to update its CSS without fully-refresh, making the visual effects rather comfortable.

Prepros helps to optimize images while Codekit dosen't.

This is the only thing I could find so far that makes Prepros a little worth using. They provide image optimization function in a fast way. Yet the interface is annoying. I wonder why there is no batch processing option for this function since images tend to be numerous for website projects. Again, they do something good, but not good enough to make users love it.

值得分享的網頁前端開發工具

之前沒整理過一套比較系統的,別人問時就東一個西一個的說,想想也是該生出這篇文的時候了。

1. Sublime Text 3 - 好用好學的編輯器

從 2 一直用到現在感覺非常順手的編輯器,不像 vim 那樣難學習,又不像 Notepad ++ 那麼陽春,有的東西都恰到好處,尤其我很中意它的配色,習慣了完全無法再盯著白底螢幕看。

這款如果搭配 Emmet 套件,效率可衝到驚人的地步。

2. Emmet - 高效率開發神器

從 Zen-Coding 改名而來的 auto-complete 加強套件,可大大簡化 HTML 建構過程,雖然我也是最近才用,因為它的語法滿像 CSS 的,幾乎不需要適應期,如果你不是 config 狂人,這個足夠好用。

How to install Zen Coding with Sublime Text 3

  1. 安裝 Package Manager
  2. 打開 Sublime Text 按下 Command(Ctrl) + Shift + P
  3. 輸入 "install" 然後 Enter
  4. 輸入 "Emmet" 然後 Enter ... 完成安裝!

接著是幾篇講解使用 Emmet 的方法:

3. Prepos / CodeKit - 即時編譯器兼網頁重整幫手

這兩個工具應該不用多介紹了吧,個人是比較傾向用 Mac 上的 CodeKit,兩者的差異介紹可見這篇文章

4. Animate.css - 易於整合的 CSS 動畫腳本

可以運用 jQuery 的 addClass 來為元素增加特效,好懂好用好維護。

5. Redactor WYSIWYG html editor - 強大的富編輯器

6. jQuery Boilerplate - jQuery 插件快速開發工具

I.A. basics 和 2 個疑問解答

I.A. 的前沿課時,有人提了兩個有趣的問題,我的解釋不夠明確,實際上,當即我並不太懂對方提出的疑惑和混淆到底是怎麼發生的。回去後我仔細思考,大概懂了她想問的是什麼。

I.A. 要不要去發想產品本身?

我們在課上反複提到「動機 motivation」兩個字,也難怪有人會以為,I.A. 是不是要去思考「要賣牛肉麵還是車子?」之類的問題。答案是完全的否定

6 個測試手機 APP 使用者經驗的小訣竅

想創造一個好的 UX 並不容易,網站上如此,手機 APP 上亦充滿不小心就會步入的陷阱。我給開發者的簡單建議是:你應該以全新使用者的心態,從頭到尾測試,仔細地用筆記或錄影的方式記錄下在每個環節遭遇到的問題。不要凡事以「理所當然」的心理去評估,如果條件允許,讓未參與開發的人投入測試更好。

我們先假設你的 APP 已經 debug 完成,可是總覺得有點卡卡的、用起來不順。你可能會疑惑:「是 UX 沒做好嗎?我要怎麼改進呢?」下文便提供你幾個驗證 UX 的簡單問題以及改進的撇步。

簡單易做的 UX 提升:產品標語

UX 是什麼?簡而言之,UX(User Experience,使用者經驗)是指使用者對於產品或系統的總體驗和滿意度。好的 UX 能夠幫助網站訪客順利達成任務,實現網站價值,所以當你的網站已經存在能夠盈利的商業模式,加強 UX 可以有效提升顧客轉換率。

極致的 UX 要考慮到網站的每個細節,而如果我只是想檢查網站用起來順不順、會不會造成使用者困擾,有沒有簡單的 tips 可以參考呢?答案是有的。實際上,有幾個設計上的原則,只要好好遵照,可以最大限度地避免給使用者添麻煩,讓他們感受到你的貼心。

歡迎閱讀「簡單易做的 UX 提升」系列,在這系列文中,我會分享一些 UX 最佳化撇步,每個小改進都不難,只要你願意,今天就可以學起來運用到自己的網站上。

賣廣告連結?當心遭受Google懲罰

之前寫的文章「是否需要防範 Google 網頁等級流失?」提到過,網站的 incoming link 質量是評估 PageRank 的重要標準之一,儘管「執行 SEO 可以,但絕對禁止『玩弄』」的鐵則已被一而再再而三地強調,卻仍有無知或刻意為之的網站不小心就做過了頭,造成得不償失的下場。

Google 的 SEO 專家 Mark Proctor 最近在他的 twitter 強調了 Google 打擊買連結以賺取 PageRank 行為的策略。在文章「Google 懲罰了 Scotsman.com」中,Proctor 指出 2 月時 Interflora 在包括這個知名媒體網站在內的幾個 Johnson Press 集團屬下網站上購買了大批文字廣告連結,企圖增加流量和 PR。