ASong
[切版前端] 網頁設計技能樹:IT 鐵人賽 101 篇文章萃取 Day2

因為六角學院認識了卡斯伯這位厲害的老師,於是我決定去翻出他所有鐵人賽的文章來看,畢竟 IT 鐵人賽對於工程師就像是公開投稿一樣,沒寫到自己滿意的程度是不敢出來秀的,沒想到最早的文章系列竟然是 2013,對於變動快速的前端領域可以說是 10 年前了吧。

有句話說得好要學習一個厲害的人思維的一個好方式,是看他跟你程度差不多的階段是怎麼學習的,我發現有些對我這個初學者的視角實在不怎麼好懂,而越到後面就越來越好讀,但我還是決定從他第一篇開始啃,直到最新一篇,這個計畫目前進行到 50%,就來審視一下我讀完後筆記下來重點到底學了什麼(但有些我沒有完全消化,尤其是 D3.js 的部分太硬),老實說也有些工具年代久遠我不確定是否現在還在用,但有些概念卻是亙古不變值得入手的聖品,超值得一讀感謝 卡斯伯 大大筆耕不綴。


一、CSS沒有極限 系列 (2003)

  1. CSS 沒有極限 Intro
  2. CSS 的改變
  3. CSS 沒有極限 – 瀏覽器的戰爭
  4. CSS 沒有極限 – Sass 與 Compass (1)
    • Sass 是 CSS 的進階語言,透過 Ruby 環境編譯成一般 CSS,而 Scss 基本上就是 Sass (只差在差在附檔名以及編寫方式的不同),只是格式讓原生寫 CSS 的人更容易理解的方式撰寫。
    • Less 也是類似 Sass 的 CSS 擴充語言,不同的是 Sass 是在 Ruby 環境下,而 Less 是 Javascript library。
    • Compass 是 Sass 的擴充語言,而其中最常使用的就是 CSS3 的 mixin。
  5. CSS 沒有極限 – Sass 與 Compass (2)
    • SaaS 優點可使用: (1). 巢狀結構、(2). 自定義變數、(3). 數學運算(含色彩運算)、(4). Mixin(將CSS模組化,並且可將變數另外設定,讓引用mixin時去做變數的調整。)
    • Compass 優點可使用: 內建 CSS3 的 mixin
  6. CSS 沒有極限 – CSS3的色彩
    • RGBA(R值, G值, B值, alpha值)
    • HSLA(h值, s值, l值, alpha值)
    • Kuler(Adobe 公司所出的顏色工具,不管事 RGB 或是色碼都可方便轉換及調整。)
  7. CSS 沒有極限 – 別忘了偽元素
    • 偽元素能透過 CSS3 做相當多的變化,例如旋轉、陰影、漸層色甚至是結合動態效果,且偽元素也能適當的減少 html 的標籤使用,讓 html 的維護更輕鬆。
  8. CSS 沒有極限 – text-shadow初試身手
    • text-shadow: X值 Y值 blur值 色彩
  9. CSS 沒有極限 – CSS3 的漸層
    • CSS3 漸層在各個瀏覽器的前輟詞並不相同,用 Sass 統一解決
  10. CSS 沒有極限 – 意想不到的 background-attachment
    • background-attachment 是背景固定模式的屬性(scroll, fixed, local (new))
  11. CSS 沒有極限 – CSS 的神奇 Calc 運算
    • 在的 RWD(自適應網頁)有很多的幫助
    • ex: 畫個自適應寬度的圓
      • width: calc(100% – 4em);
      • height: calc(100% – 4em);
      • border-radius: 50%;
  12. CSS 沒有極限 – CSS 的新文字及尺寸單位
  13. CSS 沒有極限 – Transition 實作波動拳動圖
    • 要做一個 hover 的動態效果,在原物件上新增 transition 語法,並且在隨後的 hover 新增改變後的效果即可
    • 其中必填的參數為 (1). 運動屬性 及 (2). 運動秒數
    • timing-function: 此屬性是改變動態效果的時間曲線。
  14. CSS 沒有極限 – Web-font & icons 3連發
    • 引入 google Web fonts 的兩種方式:
      • <link href=’http://fonts.googleapis.com/css?family=The+Girl+Next+Door’ rel=’stylesheet’ type=’text/css’>
      • @import url(“http://fonts.googleapis.com/css?family=The+Girl+Next+Door”)
  15. CSS 沒有極限 – Web-font & icons 3連發 – 第二發 Icons
    • Ligature Symbols: 它所提供的的 icons 非常多,而且簡單易用,有提供完整的 CSS,包含 @font-face 以及 .class 的設定,可以直接當作文字使用。
  16. CSS 沒有極限 – Web-font & icons 3連發 – 自製 web font icons
  17. CSS 沒有極限 – CSS3 Fliter 效果
    • filter: drop-shadow(5px 5px 5px rgba(black,.5))
    • filter: contrast(300%);
    • filter: grayscale(100%);
    • filter: hue-rotate(180deg);
    • filter: blur(10px);
  18. CSS 沒有極限 – Checkbox 的妙用
    • CSS3 新增了 :checked 的偽元素,它可以判斷目前的 checkbox 及 radio 是否有被選核
    • label 可以讓樣式設定更為容易,所以我們可以把 checked 隱藏起來,讓使用者只有看到 label
  19. CSS 沒有極限 – CSS transform 概觀
    • CSS3 許多新功能中,transform 和 animation 是相對有難度但也很有趣
  20. CSS 沒有極限 – CSS transform 軸線的謊言
  21. CSS 沒有極限 – CSS transform-origin 起始點
    • 一般來說變形的起始點都在物件的中心點,但如果需要像時鐘的分秒針一樣,中心點並不再物件的中心,就需要靠 transform-origin 去設定物件變形的起始點。
  22. CSS 沒有極限 – CSS transform-3D 的透視 (perspective)
    • transform 3D 的透視,如果沒有設定透視 (perspective),transform 3D就會像平面一樣呈現
    • perspective的值我們可以想像成物件距離螢幕的距離,如果值越大代表越遠
      • perspective: 1500px;
    • 除了距離外,也可以設定視點的位置
      • perspective-origin: right bottom;
  23. CSS 沒有極限 – pure CSS 專輯列表效果
    • 有兩個重點一個是 checked(被選取)另一個則是 +(相鄰),所以要進行變化的元素必須緊貼著 checkbox 元素。
  24. CSS 沒有極限 – CSS only responsive navigation
    • 只要點擊 icon 就會執行 :checked 的效果,把左邊的選單拉出來,並且將主要的內容向右推移。
  25. CSS 沒有極限 – CSS 的相關資料
  26. CSS 沒有極限 – 鐵人賽不是開始,也不是結束
  27. CSS 沒有極限 – 如何用 Sass 寫 animation
    • 首先要先準備兩個 mixin,一個是 keyframe,另一個是 animation。
  28. Animation 和 keyframe
    • CSS 的 Animation 分為兩個部分,一個是決定動畫該如何跑的 Keyframe,另一個是將動畫載入元素的Animation。
    • 簡單來說,就是先製作一個 keyframe 來決定動畫的影格動作,在將動作載入元素,而這兩個都是必要的
  29. Animation 的各項設定值 (1)
    • Name 和 Duration 都是必填屬性,其餘如下:
      • [ animation-name ]:設置物件所應用的動畫名稱(必填)
      • [ animation-duration ]:檢索或設置對象動畫的持續時間(必填)
      • [ animation-timing-function ]:檢索或設置物件動畫的過渡類型
      • [ animation-delay ]:檢索或設置對象動畫延遲的時間
      • [ animation-iteration-count ]:檢索或設置物件動畫的迴圈次數
      • [ animation-direction ]:檢索或設置物件動畫在迴圈中是否反向運動
  30. Animation 的各項設定值 (2)
  31. CSS3 垂直文字書寫
    • writing-mode: vertical-lr;
  32. 淺談 CSS Grid system
    • grid system 顧名思義就是網格系統,他將畫面分隔一塊一塊,然後頁面內容再依需求大小放進這一格一格內
    • row 代表橫向,column (col) 代表垂直,每一個 row 裡面必須包含數字總和為 12 的 column,如果需要換一個橫列,也就必須開一個新的 row。
  33. CSS – 伸縮自如的 Flex box
  34. CSS – 伸縮自如的 Flex box (2)
  35. CSS – display: box; 與 display: flex;
  36. CSS – Flex 的排版方式
  37. CSS – Flex 的對齊
  38. CSS – 利用 jQuery 套用 Class(超簡單!)
    • 首先我們先做一個簡單的按鈕樣式後,再新增一個 Current 的 .class,而在使用者點擊後的樣式用 jQuery 切換成 Current 的 .class 的樣式,就做在 Current 的 .class 內。
  39. CSS – 利用 jQuery 套用Class (2)
  40. CSS – pure CSS 星球公轉 (3D)
  41. CSS – 鐵人賽結束的心得感想

註:
文章內容來源「完全」來自 卡斯伯CSS沒有極限 系列之筆記。
(少部分內容出自我消化後理解輸出未必完全符合原文)


二、SVG 與 D3.js 系列 (2014)

  1. 2014 鐵人賽慢慢開始跑 (D3.js 與 SVG)
    • SVG 優點:
      • XML標準(相對於 Canvas 更容易使用 CSS、JS 控制)
      • 向量圖形(目前的裝置解析度不一,而向量圖沒有解析度問題)
      • 格式靈活,可以用繪圖軟體或是純文字繪製
    • 需要透過 CSS 或是 JS 製作 svg 格式檔案才能動,推薦相關的 JS lib 以及 plugin 如下:
  2. D3.js 前的 SVG 簡介
    • SVG (Scalable Vector Graphics),中文直譯就是「可縮放向量圖形 」,它是以 XML 格式儲存。因為是 XML 格式,所以 D3 對它特別容易進行操作。
    • 在 svg 標簽內就可以直接開始繪製向量圖型,定義 svg 時也建議同時給予寬與高,如果沒有,預設是100%
    • 在定義一個形狀時,通常會定義以下屬性,形狀、位置、尺寸以及樣式。
    • 矩行是相當基本的圖形,所以就依序定義以下屬性:
      • “shapes tag” “x” “y” “width” “height” “style”
      • 正方形:<svg width=”100%” height=”105″><rect x=”2″ y=”2″ width=”100″ height=”100″ style=”stroke: #333; stroke-width: 3; fill: FireBrick;”/></svg>
      • 矩形:<svg width=”100%” height=”105″><rect x=”120″ y=”2″ width=”200″ height=”100″ style=”stroke: #333; stroke-width: 3; fill: LightSkyBlue;”/></svg>
  3. SVG 超硬派了解 line, polygon, polyline, path(手工繪製)
    • 線段系列,可以想像成 Illustrator 的鋼筆工具(也不知道為什麼要翻譯鋼筆工具,據說是設計師不會懂貝茲曲線…)。
    • 分為 line、polygon、polyline、path,而其中我認為最難的是 path……。
      • M = moveto
      • L = lineto
      • H = horizontal lineto
      • V = vertical lineto
      • C = curveto
      • S = smooth curveto
      • Q = quadratic Bézier curve
      • T = smooth quadratic Bézier curveto
      • A = elliptical Arc
      • Z = closepath
  4. SVG 超硬派了解 path Arcs
    • 這次來到 Path 的最後一個屬性 A,A 是所謂的弧形
    • A: “rx” “ry” “x-axis-rotation” “large-arc-flag” “sweep-flag” “x” “y”
    • A: 1 2 0 0 1 310 215
      • rx ry 左上:逆時鐘,取較短的弧線
      • rx ry 右上:逆時鐘,取較長弧線
      • rx ry 左下:順時鐘,取較短的弧線
      • rx ry 右下:順時鐘,取較長弧線
      • large-arc-flag:1 = 取較長的弧線
      • large-arc-flag:0 = 取較短的弧線
      • sweep-flag:1 = 順時鐘
      • sweep-flag:0 = 逆時鐘
  5. SVG Defs 以及 CSS
    • SVG 內還有一個相當有趣的標簽 <def>,用途是先定義一些圖形、漸層、形狀等等,甚至可以把它們群組起來等待使用,如果用 Illustrator 來介紹的話,就像是圖樣工具。
  6. SVG Stroke , Marker 以及 CSS
    • Marker 是製作一個圖形,套用在 line、path、polygon 等等的線段上,可以定義在起始點、終點、以及轉折點上。
    • Marker 做法和漸層相當的類似,除了需要定義 id 外,一樣需要寬與高,不過 Marker 還多了 refx 和 refy,這是用來給路徑套用時所參照的相對位置。
  7. D3js 前置作業,製作簡易 WebServer
    • 多數情況下,直接點兩下 index.html 就可以打開網頁,而且 js 都可以正常運行,但某些瀏覽器會限制 js 載入本地端的檔案,主要是安全性考量,這也可能影響到 D3.js 嘗試載入任何外部檔案(CSV、Json 等等),為了避免往後的範例有這樣的問題,所以必須要有個簡易的伺服器。
    • 製作伺服器的方式相當多,像是 Windows 也可以用 IIS 來建立,Fire.app 也可!開啟專案後直接就會產生簡易的 Server,除了 Fire.app 外,本篇提供兩個簡單的方式來製作簡易的 Webserver。
    • Python Simple Server:
      • Mac 和 Linux 內建就有 Python,打開 Terminal(終端機)後,先輸入Python –version,如果版本是2.x,只要在對應的資料夾路徑下輸入以下指令,就可以使用簡易的 Webserver(我沒什麼用 Python,所以我的版本是 2.x)。
    • Node Gulp Webserver
      • Node.js 有許多不錯的工具相當好用,而 Gulp 是其中一個,這是一個任務管理工具,可以編譯 Sass、CoffeeScript 等等。
  8. 初入D3.js
    • D3.js 是一套 js library,D3 是利用資料 (Data) 來「驅動」文件的物件 (DOM),所以就這點就和 jQuery 有很大的差別,jQuery 容易上手,就在於它對 DOM 的操作相對容易;而 D3.js 在操作 DOM 上有點類似 jQuery,但它的重點在於使用資料來控制文件。
    • D3.js 最基本的資料就是陣列,只要有陣列就可以開始驅動文件,一般來說最基本的陣列像下面這樣:
      • [30,26,27,31,13,10,20,20,24,25,25,21,17,21,6,7,13,23,27,31]
      • 首先,當然要先把 D3.js 加到 HTML 上
      • 接下來要寫點 Script
  9. D3js 將資料投影到 SVG 上
    • D3.js 就是資料進來,然後加入 html 物件,接下來調整外觀…,大致上是如此。在資料「驅動」物件這基礎上,目標物件要容易被控制且有彈性,SVG 具有這樣的特色,SVG 可以在範圍內隨意定義位置、色彩甚至是外形,且屬性相較單純。
    • 這篇就來份資料,他是陣列內還包陣列的資料:
      • var dataset = [[5, 20], [480, 90], [250, 50]]
  10. D3.js Scale 尺度
    • 介紹了 D3.js 相當重要的 data() 以及 enter(),今天要介紹的也是很重要,就是 Scale(尺度)。
    • 尺度是一個 D3 的函式可以設定輸入以及輸出的範圍,就以下方的圖來說,如果來源的資料範圍是 10~990,目標輸出的範圍必須限制在 0~100,透過尺度函式後,所有的資料就會依據這尺度進行轉換,就像是輸入的資料值如果是 500,那麼在目標輸出值就會是 50。
  11. D3.js 國慶日在家裡畫長條圖
    • 在 SVG 上繪製直條圖,要注意的事情並不多,只有兩點需要略微注意:
      • 直條 Bar 是從底部往上,但是一般 SVG 是由上往下
      • Bar 的寬度、間距要怎麼定義
  12. D3.js 利用 Excel 建立資料 (CSV)
    • Excel 可以轉出一種稱為 csv (Comma-Separated Values) 格式的檔案,檔案的資料內容都是用逗點隔開的,大概像下面這樣:
      • name,value
      • Tyler,234
      • Boy,124
      • Joe,357
    • 第一行的 name, value 可以當作是標題或者是變數名稱,第二行開始的 Tyler, 234….都是值,D3.js 可以將 csv 轉換成 json 檔案格式,可以直接用來作為繪圖所需要的資料。
    • 接下了 Excel 工作就完成了,來試試看用 D3.js 讀取看看吧,其實方式也相當簡單,只要用 d3.csv() 就可以讀取並且轉換成 json 資料格式,只要給 D3.js 路徑即可。
  13. D3.js 讀取 CSV 資料並繪製成長條圖
  14. D3.js 軸線 (Axis)
    • 軸線 (Axis),可以讓圖表上多一個可以閱讀的尺標,D3.js 正好有提供這樣的函式,可以輕鬆的產出軸線
    • D3 提供的函式 d3.svg.axis(),只要這短短一行就能產生軸線,並且加上尺度 .scale() 就完成一半了,剩下就只要調整位置、刻度範圍、單位等等就完成了。
  15. D3.js 折線圖 (Line Chart)
    • d3 有一個 function d3.svg.line()可以用來繪製 svg 的 “path”,只要給予 x、y,剩下 d3 都會處理
  16. D3.js 究竟搭不搭捷運與死亡率有沒有關係? (1)
    • 在找資料前,有先研究怎麼與 Google Drive 做串接,所以這幾篇還會介紹怎麼從 Google 試算表取得資料,資料在確定要哪些後,就把原始的資料轉貼到 Google Drive ,除了可以將資料統一格式外,也可以降低對於跨網域的煩惱……。
  17. D3.js 究竟搭不搭捷運與死亡率有沒有關係? (2) – Google 試算表
    • 資料是放在 Google 試算表上,然後再透過 web 前端去接資料,這麼做的原因有以下幾點:
      • 資料路徑穩定,不易掛點
      • 技術上只要成功一次,以後都沒問題
      • 資料建立簡單,大部份的人都可以參與
      • 可以多人協作
      • Google Drive 解決了資料處理以及介接的問題
    • 資料需要稍作整理,那麼就可以趁轉到 Google Drive 上時順便改成自己想要的格式,試算表的標頭,建議使用英文名稱,再轉成 json 後他會以 key 的方式呈現。
    • 最後要接資料,每份試算表都有一組 key,它是固定的,只要開一份新的試算表都會產生,發佈到網路那動作網址列其中一段就是 key。另外還有一個是分頁的key,如果只有一個分頁,預設的key基本上是od6,但如果有超過兩個以上的分頁,試算表也會指定不同的key給分頁,查詢的方式如下連結:https://spreadsheets.google.com/feeds/worksheets/{Key}/public/basic
  18. D3.js 究竟搭不搭捷運與死亡率有沒有關係? (3) – 將資料繪製成折線圖
    • D3.js 的互動和 jQuery 寫法觀念相當接近,只是操作 DOM 時把 $ 換成了d3,如果熟悉 jQuery 的開發者很快就能上手。
  19. D3.js 圈圈小效果
    • D3.js 除了繪製圖表外,還有許多開發者拿來作為視覺或者互動效果,在學 D3 的過程中,除了看書就是不斷的找範例,有些範例並不是實用型只是些效果,但是可以從中看到別人怎麼活用 D3.js。
  20. D3.js 超粘的 Voronoi diagram 繪圖
    • Wiki: In mathematics, a Voronoi diagram is a partition of a plane into regions close to each of a given set of objects. In the simplest case, these objects are just finitely many points in the plane (called seeds, sites, or generators). … Voronoi cells are also known as Thiessen polygons.
  21. D3.js Transition 動態效果
    • D3.js 的 transition 和 CSS 的 transition 很像,都是放在開始的地方然後再加入一些時間,這樣就完成了,像下面這個範例:
      • d3.select(‘div’)
      • .transition() //套用動態效果
      • .duration(250) //動態持續時間
      • .attr(/* do something */)
  22. D3.js 資料數量增減
    • 資料很多時候需要比較、切換,所以可能會同時加入多筆資料,前一篇文章所介紹的是相同數量的資料,這次要做隨機的資料量。
    • 資料數量不同時,如果增加到沒什麼,因為原本就是從無到有,都是利用 Append 去增加新的物件:
      • bars.enter().append(‘rect’);
    • 但是如果資料比原本還要少時,就要選取多餘的元件 (exit),並且移除它 (remove)
      • bars.exit() //選擇多餘的部分
      • .remove() //清除物件
  23. 像 jQuery 一樣的 D3.js,柯P野生官網 API
    • D3.js 其實最重要的還是資料,要找到良好的 API 格式相當優良會對於後續的處理方便很多。
    • 在使用 API 前,需要先申請一組 Token
    • D3.js 原則上不能進行跨站請求資料 (jsonp),有些網站的 API 會幫忙處理掉這塊否則就要另做處理,先前介紹撈 Google drive資料,是用 jQuery 處理 jsonp。
    • 範例:
      • kpapi = “http://api.kptaipei.tw/v1/category/41/?accessToken=kp54103aa1efbe14.85567715”; //柯p API路徑
      • d3.json(kpapi, function(d){ //d3js json function
      • data = d.data;
      • length = data.length; //取得資料筆數
      • num = Math.floor(Math.random()*length); //隨機一則筆數
      • demo.select(‘.demo article’).html(data[num].content); //將文章插入
      • });
  24. D3.js 也可以像音樂一樣動吃動吃動 (1)
    • 把音軌轉換成陣列的資訊,會依據音樂的品質轉換…,大概像 2048 長度的陣列,數值為 -1 ~ 1,更新速度相當的快,只要有這個值,就可以做出範例的跳動圓圈。
    • 技術上已經找到方向,另一個問題就是音樂的來源,由於版權問題,也不太可能隨意使用歌手的音樂。創作音樂是使用 Sound Cloud 平台,json 內在提供 Sound Cloud 平台上的資訊。運氣不錯,其中剛好有串流音樂的格式。
  25. D3.js 也可以像音樂一樣動吃動吃動 (2)
    • 原本的範例中,是只有一個圓在跳動,但是音樂所能擷取的資料是一段很長的陣列,我就思考著是不是有辦法做成折線圖,並且讓他有躍動的感覺。
    • 這一段是特別需要注意的,因為音樂的所傳回的陣列長度是 2048,值大概像下面這樣,範圍由 -1 ~ 1,也因為長度過長,在繪製成圖形上會有效能上的問題所以擷取其中一段即可。
  26. D3.js layout(以環保局資料為例)
    • d3.layout,這用途是可以快速建立圖表,這篇來介紹 pie layout,用的是環保局的資料。
    • 環保局的 Open data,資料也是不錯使用,包含許多格式如 CSV、json、XML……等等,在政府資料中,優點是還算標準且穩定。
    • D3.js 有出許多的 layout,只要把資料給他就可以運作,範例中的資料 (json) 是用 jQuery 去抓,在用 D3 去轉換成圖形。只要先建立一個 layout pie物件,在設定輸入的值,套用後就可以轉成圓餅圖,程式碼如下:
      • var pie = d3.layout.pie() //建立D3.layout pie物件
      • .sort(null) //是否排序
      • .value(function(d) {return d.Amount; }); //傳入的值
  27. D3.js 再看更多 layout 前,先來轉換 JSON 結構
    • 上次提到 D3.js 有包含許多的 layout,但是每種 layout 都有些結構上的限制,就比如說 Tree Map,這樣的layout 就需要巢狀結構的 json 才可以製作,D3.js 也有提供巢狀結構的轉換,這邊就來介紹最常用的轉換方式,透過 D3.js 巢狀的函式,就能輕鬆達到剛剛的需求。
  28. 柯P的財務報表套用 D3.js Partition Layout
  29. PDF 轉 CSV,利用 Tabula
    • D3.js 最重要的就是資料,所以需要有許多不同的資料轉換方式。PDF 是常見的檔案格式,因為製作方便,又可以跨裝置,所以 PDF 也是經常取得的檔案格式之一,相信大家都使用過 PD F格式,它很適合閱讀,但至於轉成資料格式呢?這篇就來介紹 Tabula 將 PDF 轉換成 CSV 作為 D3.js 所需要的資料格式。
    • 使用上非常容易,只要以下幾個步驟就可以完成:
      1. 選擇檔案:開啟網站後,下方就有很明顯的選擇檔案。
      2. 選擇範圍:選擇範圍是利用圈選的,如果 PDF 有相當多頁,可以選擇 repeat this selection,就會用相同的大小、位置套用在每個頁面(如果每頁都對不上就手動了…),至於小技巧,就是要多操作才能體會了,選好區域後,就選擇 Download csv 吧。
      3. 匯出:接下來略等一小段時間,就會跳出轉好的表格,這部分是預覽轉出的狀態,確認是接近預期的狀態後,就下載 CSV,或者是複製到剪貼簿也行。
  30. D3.js 鐵人賽的結束
    1. SVG
      • SVG 簡介
      • SVG 超硬派了解 line, polygon, polyline, path(手工繪製_
      • SVG 超硬派了解 path Arcs
      • SVG Defs 以及 CSS
      • SVG Stroke , Marker 以及 CSS
      • D3.js 基礎
    2. 初入D3.js
      • D3.js 將資料投影到 SVG 上
      • D3.js Scale 尺度
      • D3.js 國慶日在家裡畫長條圖
      • D3.js 讀取 CSV 資料並繪製成長條圖
      • D3.js 軸線 (Axis)
      • D3.js 折線圖 (Line Chart)
      • D3.js Transition動態效果
      • D3.js 資料數量增減
    3. D3.js 主題範例
      • D3.js 究竟搭不搭捷運與死亡率有沒有關係? (1)
      • D3.js 究竟搭不搭捷運與死亡率有沒有關係? (2) – Google 試算表
      • D3.js 究竟搭不搭捷運與死亡率有沒有關係? (3) – 將資料繪製成折線圖
      • 像 jQuery 一樣的 D3.js,柯P野生官網 API
      • D3.js 也可以像音樂一樣動吃動吃動 (1)
      • D3.js 也可以像音樂一樣動吃動吃動 (2)
      • D3.js layout(以環保局資料為例)
      • D3.js 再看更多 layout 前,先來轉換 JSON 結構
      • 柯P的財務報表套用 D3.js Partition Layout
    4. D3.js 小玩意
      • D3.js 圈圈小效果
      • D3.js 超粘的 Voronoi Diagram繪圖
    5. 其他工具
      • D3.js 前置作業,製作簡易 Server
      • D3.js 利用 Excel 建立資料 (CSV)
      • PDF 轉 CSV,利用 Tabula

註:
文章內容來源「完全」來自 卡斯伯SVG 與 D3.js 系列之筆記。
(少部分內容出自我消化後理解輸出未必完全符合原文)


三、CSS 實戰心法 系列 (2017)

  1. 前言,CSS 最重要的事?
    • 寫 CSS 最 痛苦 的事情是什麼呢?
      1. 載入速度緩慢
      2. 遇到不會解的問題
      3. 接別人寫的 CSS
      4. 接別人寫的 CSS,然後還看不懂在寫什麼
      5. 兩個月後維護自己寫的 CSS ,然後還看不懂在寫什麼
    • 介紹業界常用的技巧,來解決所遇到的問題(包含避免捅自己的方法):
      1. CSS 架構:說到看不懂自己寫什麼,通常是沒有規矩在寫 CSS
      2. 開發環境:透過一些工具來打理良好開發環境是很重要的,也會開始了解怎麼建置 Sass 環境
      3. Sass 開發心法:透過先前的 CSS 架構來了解 Sass 開發中的坑,並且讓 Sass 的可用性更加翻倍
      4. 實戰架構:在了解整個技術基礎概念後,還會分享我在實作上的方法
  2. OOCSS 結構與樣式、容器與內容
    • OOCSS 是 CSS 的架構方法,在這基本原則下 CSS 具有以下特點:
      • (1). 結構與樣式的分離:比喻將建築物模型分為「建築物結構」和「建築物樣式」
      • (2). 內容與容器的分離:比喻假設建築物是外容器、各式各樣類型的窗戶是內容,那麼作為內容的各式各樣窗戶應該要能裝在各個建築上。
    • 在這兩個特點下,大大的強化 CSS 的「可複用性」與 CSS 的「擴展能力」
      • 結構與樣式分離外,身為外容器的物件與內容的物件也應當需要分離,避免元件只能在原有的容器上使用;容器與內容分離的情況下,元件再重新組裝時能夠更為容易,可擴增元件的再使用率。
  3. OOCSS 結構與樣式、容器與內容(實際範例)
    • class 命名的部分,建議不要直接使用按鈕的功能性直接命名,而是可以按鈕的樣式特性來命名:
      • (X) .button-red、.button-blue、.button-green
      • (O) .button-primary, .button-accent, .button-secondary
  4. OOCSS 容器與內容分離 (最佳實踐)
    • 容器與內容分離,簡單來說我們可以把元件分為兩大類型:
      • 容器型元件:如 grid、card、form
      • 內容型元件:如 button、input、progress-bar
      • 而不同類型的元件設計上應當分離,避免混寫限制元件的搭配,容器:白話文來說是盛裝物品的器具,在這邊我們可以思考成可以裝其它元素的外元件;內容:這裡解釋在容器內的元素。
    • 就以 OOCSS 的概念是需要避免這樣的設計,盡可能不要讓元件被限制在特定的容器下:
      • (X) .card
        (X) .card .btn
      • (O) .card
        (O) .btn
  5. 小故事 + 圖文介紹 CSS 的命名技巧
    • 除了不需要維護的網站以外, CSS 命名都是前端工程師的痛,因為很容易踩到先前所寫的坑,久而久之就會發生權重的問題。除了前面所提到的兩個 CSS 分離方法,這邊要介紹好的 CSS 命名,讓 class 複用性更高。
    • 這邊介紹幾個基本原則:
      • 抽象化命名(避免使用具體的色彩、單位尺寸等)
      • 用元件形體命名(不使用頁面上的功能做命名)
    • 元件的外型命名避免限制性的命名:.product-list
      • 建議:.list
    • 色彩的命名避免直接用色名:.text-blue
      • 建議:.text-primary
    • Layout 的命名避免直接用位置命名:.left-menu
      • 建議:col-4
  6. CSS 的元件狀態
    • 狀態再套用時,有兩種常見的手法,一則是使用 CSS 偽類 (Pseudo-classes),另一則是提供 Class 供 javascript 作切換。
    • 一般在撰寫 CSS 時就會將偽類規劃進去,最常見的就是連結,其常用的偽類有:
      1. active 滑鼠按下的樣式
      2. :focus 鍵盤聚焦的樣式
      3. :hover 滑鼠滑過的樣式
      4. :link 還沒被訪問的樣式
      5. :visited 被訪問過的樣式
    • 元件狀態是初學網頁設計師經常忽略的內容,就以 input 來說就有以下常見的狀態:
      1. :focus 用戶選取的狀態
      2. :disabled 無法選取的狀態
      3. :feedback 輸入錯誤或正確的回饋狀態
  7. CSS 框架架構參考 PURE CSS
    • Pure CSS 算是很老牌的 CSS 框架,到目前使用者已少了許多,但架構到現在都很是非常直得學習,不需倚靠太多的工具,就能夠將 CSS 可用性發揮到最高,如果有朋友說要參考 CSS 的架構,相當值得學習的就是 PureCSS 及 Bootstrap。
    • Pure CSS 分為以下模組,每個模組都是獨立的 CSS 檔案,並沒有透過 Sass 或 Less 進行編譯,所以可以依據自己需求載入需要的模組:
      1. Base
      2. Buttons
      3. Forms (Responsive)
      4. Forms (Non-Responsive)
      5. Grids (Responsive)
      6. Menus (Responsive)
      7. Menus (Non-Responsive)
      8. Tables
    • Pure CSS 的樣式架構用相當精簡的 CSS Code 來呈現一個模組,到底有多神就使用 Button 模組來做介紹。(Button 原始碼連結),非壓縮版的原始碼,全部的按鈕行數不到 100 行(不壓縮,且包含註解),在這些行數下也包含了不同的狀態。
    • Pure CSS 自訂樣式:Pure CSS 巧妙地使用「透明度」在處理元件的樣式,就以按鈕來說可以用以下方法來調整透過透明度的方法在切換樣式能將 CSS 所需的程式碼降低非常多,而這也是結構與樣式分離的最佳案例:
      • 複寫原有的樣式
      • 設定元件色彩,透過原有的透明度樣式來呈現按鈕狀態
  8. CSS 框架架構參考 Bootstrap
    • Bootstrap 第三版是使用 LESS,到了第四版改用 SASS,但不管用哪一個開發工具,其實整個架構的差異都不大,只要了解其中一種觀念,就可以套用在每個版本上。
    • Bootstrap 的架構其實並不複雜,整個核心都圍繞在「模組」上,我們可以視 Bootstrap 每一個部件都是一個模組:
      • |- bootstrap.scss # 主檔案,負責載入所有模組
        |- _variables.scss # 變數,如果要修改整體樣式可從這裡調整
        |- _buttons.scss # 從這以下都是模組
        |- _tables.scss
        |- _alert.scss
        |- _utilities.scss
        |- …
        |- /mixins # 樣式運算函式庫
        • |- _buttons.scss
          |- _forms.scss
          |- _grid.scss
          |- …
      • bootstrap.scss:
        這隻檔案相當的單純,主要是載入全部的樣式表,除了這隻以外還有以下幾個分支:bootstrap-flex.scss、bootstrap-grid.scss、bootstrap-reboot.scss。
      • _variables.scss:
        在 scss 中,前方帶有下底線的代表該檔案不會被輸出(所以上一段落的 bootstrap.scss 會被轉成 css),Bootstrap 主要的樣式也都是在這隻檔案做設定。以色彩來說,檔案裡面可以看到以下的設定,開發者可以修改以下變數,在編譯時自然會套用到所有的模組上。
      • _buttons.scss, _tables.scss, _utilities.scss …
        這個部分就是整個 Bootstrap 的結構重點了,除了以上的 bootstrap.scss、_variables.scss 及稍後提到的 _mixins 資料夾,其他都是屬於「模組」。
      • _mixins 資料夾
        _mixins 資料夾是元件的運算函式,在大部分的情況下不需要做調整,只要修改 _variables.scss,就能運算出新的樣式表,本篇就不細說了。
    • 一般來說閱讀 Bootstrap 的結構方法如下:
      1. 找出 bootstrap.scss(了解整體架構)
      2. 找出變數檔案 _variables.scss
      3. 尋找、閱讀 各元件
  9. CSS 實戰心法:搶到決定權,開發環境自己來
    • 我用過的「前端自動化開發環境」有:
      1. Fireapp:這用了有兩年之久,算是一個超級入門 GUI 自動化工具,但在 compass 不維護以後 Fireapp 也不再維護了。
      2. Prepros:當時 GUI 的自動化工具另一個選擇,到現在還有持續在更新,但一直有些小問題所以沒有想用在專案上,但對於入門來說是個不錯的選擇
      3. Middleman:為了與 Ruby on Rails 專案做整合,算是不錯的 Command line 工具,也是使用很長的一段時間,現在懶得自己開環境還是會使用。
      4. *gulp:相當推薦的自動化工具,易學且可以與任何環境結合,缺點是肥了點。
      5. *webpack:很潮的自動化工具,但與 gulp 觀念差異很大,適合製作 SPA (sigle page application) 的網站。
    • 以下我再將「開發流程」分為以下三種:
      1. 後端工程師人肉整合流程:前端工程師射後不理,將 Code 交給後端工程師處理。
      2. 前後端整合的開發流程:前後端共用相同的開發環境。
      3. 前後端分離:前後端作業完全分離,後端負責資料庫、API,前端負責頁面結構、API 介接。
  10. Gulp 與 Sass 開發環境
    • Gulp 是一個前端任務管理工具,它可以做到如 Fire.app、Prepros、Grunt 等等所能做的事情。
    • 簡單內容如下:
      1. 編譯 SASS、Coffeescript
      2. 壓縮 .CSS, .JS, 甚至圖檔
      3. Web Server with Livereload
      4. 享受自己動手做 Task 工具的快感
      5. Others..
    • 在開始使用 Gulp 前,需要先安裝 Node.js,Node.js 是一個讓 Javascript 運行在服務端的開發平台。另外還有 npm,是由 Node.js 官方提供的第三方管理工具,並且是一種在 Node.js 應用程式中建立、分享、重複使用模組,而 npm 在目前的版本,都會隨著 Node.js 的安裝同時安裝好 npm。
    • 透過 npm 來安裝相關所需的套件,npm install gulp -g 會在全域環境下安裝 gulp,npm install 則是會安裝專案內的 package.json 所列出的需要元件:
      • npm install gulp -g
      • npm install
    • 執行完以上步驟後,資料夾結構會如下,node_modules 是運行 gulp 的套件資料工具資料夾,public 就是前端匯出的專案資料夾,在這個範例中我們可以將 public 指定任何的資料夾名稱與後端結構配合。
      • |- /source/scss # 專案資料夾 (sass 位置)
        |- /mode_modules # node.js 套件資料夾
        |- /public # 專案匯出的資料夾
        |- .gitignore
        |- gulpfile.js # gulp 腳本檔案
        |- package.json # 套件管理 json
    • gulpfile.js: 是整個 gulp 的核心,相當於一齣戲的劇本,開發者可以在腳本中定義自動化的運行流程。
    • gulp sass:watch 如果不想要一直重啟 gulp 來編譯 sass 可以使用此指令。
  11. Gulp – 透過 PostCSS 加入 CSS Prefix
    • CSS Prefix 就我的理解是為了讓語法可以運作在不同的瀏覽器上必須寫的 Prefix(前綴詞)
    • 以往都是使用 Sass 的 Compass 來加入 prefix,這種增加方式就是無差別的加入,但其實現在的 CSS 有 9 成以上的 prefix 都沒有加入的必要。
    • 現在寫入 prefix 以後還要移除也是個大工程,這時候推薦使用 PostCSS 的 autoPrefixer。PostCSS 類似 Sass,但是他是直接編譯 .css 檔案,另外他的套件都是用插件的方式載入,並不是像 Sass 已經有固定的寫法。這邊特別推薦他的 autoPrefixer 套件,使用上也非常容易,對於往後的維護也是無痛更新。
    • 延續前一篇的進度,這篇加入兩個新套件 gulp-postcss、autoprefixer,在 package.json 的檔案內可以找到這段:
      • “dependencies”: { “autoprefixer”: “^6.5.3”, “gulp”: “^3.9.1”, “gulp-postcss”: “^6.2.0”, “gulp-sass”: “^2.3.2” }
      • 接下來修改 gulpfile.js 內的 sass task,直接將 PostCSS 加到原有的 Sass 流程上就能運行了
  12. Gulp – 定義預設開發環境
    • 目前使用的主要套件有:gulp-sass、gulp-postcss,讓大家在使用 Gulp 時就能相容於目前的環境,這次調整後會有一個主要的前端專案資料夾,可以配合各個後端語言做調整,大家也可用相同的概念加入習慣的開發環境,先在 gulpfile.js 定義好要輸入和輸出的資料夾名稱變數,再寫入 gulp.task 的 Task,如此一來開發時無論是配合什麼後端語言,只要調整原始碼、輸出位置就能夠配合各種語言。
    • default 是預設 gulp 會執行的 Task,後方的陣列內在加入要一起執行的 Task 即可:
      • gulp.task(‘default’, [‘others’, ‘sass’, ‘watch’]);
  13. Gulp – 在本地端製作 Icon Fonts
    • 網頁設計都會需要大量的小 icon,現在的 icon 都傾向使用 web fonts 來處理,因為 web font 所製作的 icon 有以下的好處:
      • 載入容易,HTML 只要載入一隻 CSS 就搞定
      • 套用容易,只要透過 Class 就能套用
      • 可自由調整大小、色彩
    • 雖然只能使用單色,但在開發的便利性上還是有不少人選擇 icon font,目前大家所選擇主流 icon fonts 有以下:FontAwesomeIcoMoonGoogle Material Icon
    • 除了以上幾種不同選擇外,大家應該也會想知道如果想自己做呢?這次就來介紹怎麼用 Gulp 來自定自己的 icon fonts。使用 gulp iconfont 的套件,這一個套件會將 .svg 的檔案轉換成字體,接下來在轉換成 CSS 供開發者使用。
    • 經過這幾次的練習,相信大家應該了解 gulp 的開發順序,我們會先打開 package.json 將所需要的套件載入,這次新增的套件有 async、gulp-consolidate、gulp-iconfont。
      • “dependencies”: {“async”: “^2.1.4”, “autoprefixer”: “^6.5.3”, “gulp”: “^3.9.1”, “gulp-consolidate”: “^0.2.0”, “gulp-iconfont”: “^8.0.1”, “gulp-plumber”: “^1.1.0”, “gulp-postcss”: “^6.2.0”, “gulp-sass”: “^2.3.2”}
      • 接下來打開 gulpfile.js 加入 Task
      • 接下來執行 gulp iconfonts public 就會產生一個字體檔以及 CSS 檔案,接下來我們在 HTML 中載入 CSS 檔案,就可以開始使用 icon font 。
  14. Gulp – Webserver
    • Gulp 很適合搭配任何其他的前後端結構,就先前介紹的幾個章節,只要略為修改輸入及輸出的路徑即可;除了搭配其他後端結構外,Gulp 也有適合直接開發的方法,本章會在介紹 Gulp Webserver,這樣就能夠直接在 Gulp 中開啟 Webserver。
    • Gulp webserver 能夠在 gulp 運行的期間開啟 webserver,並且包含著 Livereload 的功能,只要修改專案中的資料夾檔案,就能夠自動的更新瀏覽器上的畫面,讓開發更迅速。(package.json: 僅有新增一個 gulp-webserver。)
  15. 為什麼 Boostrap (這篇很短~)
  16. 將 Bootstrap 導入自動化流程
    • Bower 是前端的套件管理工具,也有許多開發者會使用 NPM 來一起管理,但我個人除了使用 Webpack 以外還是習慣用 Bower 在管理前端套件。
    • 使用 Bower 以前要先安裝 Bower 的工具,而它分為兩個部分,全域的 Bower 指令與專案的 bower.json:
      • npm install -g bower
    • 打開 gulpfile.js 看看修改了什麼吧…,includePaths 是 Sass 的功能,他可以載入其他路徑的 .sass 作為擴充載入,這部分就是將 Bower 中的 Bootstrap 載入。打開 all.scss 做以下的調整,直接用 @import “bootstrap”; 就可以將 Bootstrap 載入。
  17. Bootstrap 自定義樣式超簡單
    • Bootstrap 所有設定都是放在 _variables.scss 這隻檔案下,但要學會怎麼修改其實沒有那麼困難,最簡單的方式就是將以下路徑的 _variables.scss 複製到專案目錄下的 ./source/scss,這邊我個人是更習慣放在 helpers 資料夾內,算是寫 Sass 的習慣。
    • 接下來我們將 ./source/scss/all.scss 打開後加入 @import “helpers/variables”; 再次執行 gulp ,如果沒有跳任何錯誤代表正確。
    • 最後一部可以開始修改變數:打開 Bootstrap 變數稍微閱讀一下其實會發現非常好懂,然後每一個變數的後方都會接上一個 !default 在後方做為預設,所以在修改變數時需要同時將 !default 移除。
  18. Bootstrap 元件分類概觀 (content, container)
    • Bootstrap 所有樣式模組都是以元件為基礎作為設計,基於這個概念我們可以很快得了解 Bootstrap 3 的結構:
      • /bootstrap
        |- /mixins/
        |- _variables.scss
        |- _buttons.scss
        |- ….scss
        |- _components.scss
        |- _utilities.scss
    • /mixins/ 資料夾:樣式運算的函式庫,這部分可以先忽略他
    • _variables.scss:變數檔案,上一篇有介紹過,大部分的 Bootstrap 樣式變數都從這檔案設定
    • _button.scss ~ _components.scss:剩下這層的檔案幾乎都是元件
    • _utilities.scss:雖然說是元件,但又沒有完整的形體,像是 .clearfix 清除浮動就被歸在此類
    • 容器與元件 Components
      • 容器型 Components: grid-system, button-group, panel
      • 元件型 Components: form, buttons, breadcrumbs
  19. Bootstrap 一次看懂元件的使用組合
    • Bootstrap 在使用時,都會有個 { 模組 } (ex: btn) 作為元件的架構,所以按鈕就會有 .btn 然而這段也會混用在其他的延伸樣式上,如配色 (ex: btn-primary, btn-success…)、樣式 (btn-sm, btn-lg…)皆是如此,不過狀態 (ex: active, disabled…)就不會帶上 .btn 囉,這段要多注意一下。
  20. Sass 資料夾結構
    • 我的開發流程就是依據以上再作為調整,開發的心法如下:
      • all.scss 載入開發模組(Bootstrap 或自行開發的模組庫)
      • 透過 helper 內的變數重新定義專案專屬的變數
      • 增加專案所需要的元件(元件庫所缺乏的元件)
      • 增加區域性的元件如 header、footer(這部分的元件有可能再轉換成 components)
      • 依據頁面需求撰寫 Pages 的 css。
      • 撰寫權限用的主題
      • 如果有載入外部 Javascripts ,會將外部的 Javascript 的 css 檔名改成 _xxxx.scss 丟到 vendors。
    • 大多情況下,我都是以 all.scss、/helpers/、/components/ 作為開場,如果是中小型的專案甚至從頭到尾的架構都是如此,大家也可以試試看用這個架構作為開發,可以從中思考到很多 CSS 架構管理的方法,以減少大型專案的樣式失控的問題。
  21. Bootstrap 透過 Sass 新增自定義元件
    • 先前的文章介紹到 Sass 的架構,所以我們的專案結構會做些許的調整,目前已經有了 all.scss 以及 helpers/_variables.scss 這兩隻 .scss 檔案,接下來新增 components 資料夾,預計新增的元件就會放在這裡。
    • 我在 Sematic UI 上找到了一個現成的 Card 模組,這個模組所使用的變數不多,刪除後面的段落後,就可以直接加入 components/_card.scss 內。
    • 新增元件的心法在前面幾個章節有詳細的描述,本篇就直接運用半成品來說明,在 _card.scss 加入後,如果直接運行 gulp 是不會看到 card 加入至你的 CSS 內,所以必須要在 all.scss 補上以下內容確認載入才行
      • @import “helpers/variables”;
        @import “bootstrap”;
        @import “components/card”;
      • 此時,執行 gulp 沒有出錯的情況下就會看到 Card 模組已經載入了。
  22. 實戰心法 – 經常使用,但卻容易被忽視的 CSS
    • 實際在專案運作時有許多客製化需要微調,而很多微調的項目,這些雜七雜八的項目調整,通常會運用在每個元件上,但每個元件都補上重複性又高,這一個部分我們通常會用另一個元件 _utilities.scss 來管理。
    • 介紹一下常用的 Utilities 分類:
      • Spacing
      • 文字色彩與背景色
      • 對齊方法
      • 常用 CSS 屬性 (float, background-size, display, position, overflow……etc)
  23. 實戰心法 – 常見的垂直置中手法
  24. 實戰心法 – 自幹 Grid System
    • grid system 和其他元件不太一樣,他是屬於外容器型的元件,一層包覆著一層變化性相當高,如果不熟悉的情況下會容易造成跑版。
    • 灰色部分是網格中欄的區域,以下面這範例來說佔了 4 欄,為了呈現「欄」與「欄」之間的間隔,欄會左右增加 padding 讓內容保留左右的間隔。但是「欄」所增加的 padding ,最終會影響到最外層的 .row、.container 向外擴增,所以 .row 與 .container 一則使用負值的 margin,另一則用 padding 補回這段空間。
  25. 實戰心法 – Sass Map 快出產出大量樣式
    • 上一篇介紹了很短的程式碼產生一整組 Grid System,然後還提供變數讓 Grid 還有額外的參數可以設定,手寫的 CSS 如果要重新計算 12 組以上的計算也太苦了,所以可以透過 Sass 的運用透過簡單的變數,即可大量產生相似的模組。
    • Sass map 是類似 json 的一種變數,json 中包含的陣列、物件、屬性在 Sass map 都能有相似的寫法,所以首先要先使用 Sass Map 來定義基礎的元件變數。$btn-config 裡面包覆的就是 Sass map,與 json 最大的差異是使用 () 取代 {},這樣的手法可以大量的產生樣式的變數。
    • 接下來我們在製作 @mixin 與 button 的基本樣式,@mixin 可以將產出的 CSS 先寫成公式,在後續的流程在套用,這個公式我是直接抓 Bootstrap 所寫好的;另外 .btn 則是先前提過好幾次的結構,而這個結構是不包含樣式 (色彩、大小…),樣式的部分是在 @mixin 內。
    • Sass @each 也是像 javascript 中的 each
      • 將 $btn-config 中的物件一一讀出(使用 map-get($value, value)),然後在 @include 上一段所產生的 @mixin。
      • 這樣就能一次產生出大量的 CSS 樣式,所依據的就是先前所設定好的 Sass map,這範例僅使用三種樣式,相同的觀念下我們可以用這方法產出更多的樣式在內,只需要修改 Sass map 即可,不需要改其他部分。
    • 現在的 CSS 大多會使用 Sass、Less、PostCSS 來做管理,使用哪一種語言倒是無所謂,但建議先從一種入門到熟悉,會發現省去許多不必要的時間,且在管理上會容易許多。
  26. 實戰心法 – 應避免的 Sass @extend
    • Sass 的 @extend 可以將相同的樣式整理再一起,在其他語言來說是非常帥氣的技法,能夠將重複的樣式整理再一起,但在 CSS 中請警慎使用,但在撰寫 CSS 時要盡可能符合兩個原則「結構與樣式分離」、「容器與內容分離」,所以到這邊為止還是要貫徹這個概念,當使用 @extend 時如果會造成這個缺陷時,請避免使用。
    • 除此之外,寫的時候看似非常簡潔,但其實所產出的 CSS 檔案非常之肥大,所有樣式結構的 Class 會被拉到前面在寫再一起,無形之中會重複大量的 Class name,其實學到現在,要安全點其實是避開 @extend 不使用,就連 Bootstrap 的原始碼中也不怎麼使用 @extend 這手法。
  27. CSS 框架自幹心得 – 失敗三次的框架建構經驗
    • 第一次:剛開始接觸 Sass 時發現他的 @mixin 真的很神,發現很多樣式可以先準備好 @mixin 等到需要使用的時候在載入,久而久之發現每個專案都要重新 @include 這些樣式也真的很麻煩,心想不如直接寫一款都預設 @include 的好了。
    • 第二次:這時候是以一個完整可運用的框架去執行,所以執行時也有考慮到框架的文件、運用、擴充等問題。但是發現 CSS 檔案大小上升略快,所以每次加入新元件都要不斷的檢查問題點在哪,後來發現 @extend 的問題以及 OOCSS 的架構。
    • 第三次:後來仔細研究了 Bootstrap 文件原始碼及 OOCSS 的概念,清楚了解到自己開發的框架問題點,所以就很乾脆的將 Bootstrap 給 fork 惹…。現在主要都是以 Bootstrap 作為基底來當作樣式框架開發的底層,並且依據自己喜愛的設計風格、專案需求去做調整。
    • 許多情況下 Bootstrap 4 能滿足基礎的開發需求,再以 Sass 的特性結合需要的元件開發就能節省許多時間。除了公司專案外,我大多情況不會重頭開始寫 CSS 或是另外開發框架。
  28. 實戰小技巧 – iOS 表單的使用者體驗優化
    • iOS 表單填寫時會自動放大的問題解決方案:一開始以為是使用 Javascript,透過各種方式解析其實只要做一點點調整就可以了,就是將 input 的文字大小設定超過 16px,那麼在點擊的時候就直接拉滿全屏。
  29. CSS 實戰小技巧 – 不使用 important 的高優先值技巧
    • 不用到殘暴的 !important 就能提高權重的小訣竅:
      • .blue.blue.blue.blue.blue.blue.blue.blue.blue.blue { color: blue; }
  30. CSS 鐵人賽的結束與接下來的研究

註:
文章內容來源「完全」來自卡斯伯CSS 實戰心法 系列之筆記。
(少部分內容出自我消化後理解輸出未必完全符合原文)


四、結論:皆為讀後筆記僅供參考,詳細 卡斯伯 完整原文

以上皆為個人筆記,昨天一口氣讀完 101 篇文章後覺得好像只消化了三成,透過重新擷取重點,讓我理解度上升到 7 成左右(除了殘暴的 D3.js),也先把我自己特別有印象的重點節錄下來,供自己參考,再次感謝 卡斯伯 老師完整的系列文章(CSS沒有極限系列SVG 與 D3.js系列、CSS 實戰心法系列)共 101 篇,沒想到人家十年前就搞懂得東西我現在還一堆不熟,真的要加油啦!期待接下來六角學院的切版直播班魔鬼訓練營。


作者介紹 - ASong

ASong

ASong, 現在是一位前端工程師;業餘的閱讀愛好者、講師、寫作者;任何討論或合作可寄送至 dragoncres@gmail.com。

發表迴響