@ChingHanHo

I Build Stuff.

CSS Font (2) - 像素

(圖片取自 unconed 網站,版權為原網站所有。)

瞭解電腦字型如何被創造,能夠進一步理解文字如何在螢幕上顯示。本系列文章目的在於研究電腦字型在螢幕上顯示的原理,以便理解 CSS 有關字型的各項屬性背後的設計目的,以及要解決的問題。本文適合對象為從事網頁設計的專業人員,不論是網頁設計師、前端工程師,或是全端工程師。

CSS Font (1) - 基本概念

2048

(圖片取自「Digitizing Letterform Designs」,版權為原網站所有。)

瞭解電腦字型如何被創造,能夠進一步理解文字如何在螢幕上顯示。本系列文章目的在於研究電腦字型在螢幕上顯示的原理,以便理解 CSS 有關字型的各項屬性背後的設計目的,以及要解決的問題。本文適合對象為從事網頁設計的專業人員,不論是網頁設計師、前端工程師,或是全端工程師。

Facebook Instant Articles「即時文章」是什麼?

速度

行動裝置時代瓶頸:

  • 手機頻寬小;
  • 手機速度慢;

但是人們希望:

  • 速度快;
  • 速度要快;
  • 速度更快;

快有什麼好處?遠古的網路傳說:

  • Amazon 網頁平均載入時間多 1 秒,公司年度營收少 16 億美元;
  • Google 網頁平均載入時間多 0.4 秒,每天搜尋次數減少 800 萬;
  • 使用者開啟網頁 4 秒內沒有出現任何內容便會放棄;

所以 Facebook 推出「即時文章」,讓文章內容可以在毫秒之間顯示。

SCSS 物件導向模組設計 (1)

三年前曾經寫過「劣以為的 OOCSS 和 SMACSS 以及其他 CSS 規範」探討 OOCSS 模組化的方法論,時至今日對於模組化設計又有新的認識跟理解,大原則跟三年前的方法沒有出入,只是多做解釋跟補充。

OOCSS 物件導向是解釋設計原則,但是不限於語法的設計。

如果這個議題有興趣,歡迎繼續往下閱讀,如果有任何想法也歡迎留言與我討論!

使用一個 HTML 樣版引擎的選擇重點

語法

首先當然是要喜歡上該樣版引擎的語法,因為使用樣版引擎的主要目的就是為了加速撰寫 HTML 的生產力,給先讓自己喜歡使用它,才有辦法寫得有效率。多數樣版引擎的入口頁會用簡單的範例,快速火力展示它的特點,這是很好的開始。但也因為這是精心設計的著陸頁,目的是攻取心裡的小惡魔,所以在選擇採用這套樣版引擎前也得特別小心。

擴充性

一個好的樣版引擎可以讓自己掌控專案的伸縮性,例如註冊新的 helper 跟 block,節省撰寫重複的程式碼,靈活地設計版型架構。

安全性

對於經驗不足的開發者來說這很容易鑄成大錯,在沒有意識下的輸出未消毒的內容,都可能會造成使用者傷害,而一個好的樣版引擎應該要預設消毒輸出。如果對自己的經驗很有信心,覺得這是初學者才會犯的錯誤,但也不能夠保證其他同事們不會粗心大意。

勿矯枉過正

使用樣版引擎是為了增加團隊在撰寫 HTML 的效率,所以應該以團隊的技術水平作為優先考量,如果團隊的平均技術水平沒有達到而貿然採用也只是增加大家困擾而已。 不要為了使用而使用。