Positioning Elements on the Web
圖文並茂的 CSS 定位教學，從新的 CSS grid、flexbox、到舊的 float 都有涵蓋到。
thoughtbot 是在 Ruby 界很知名的團隊，很佩服他們能夠在努力做案子的同時還有餘力不斷的釋出開源的 Ruby 套件，在台灣，即便是那高端的五倍紅寶石最大的貢獻也就是那篇 Git 教學，開源在台灣更像是一種只為了降低成本與經營公司形象而存在的東西，而不是公司的核心思想。
#CSS
Positioning Elements on the Web.
Awesome Box Shadow Effect for Card UI.
CSS 變量對 JS 交互組件開發帶來的提升與變革.
CSS 變量對 JS 交互組件開發帶來的提升與變革
CSS 變數可以取代許多以往要透過 JavaScript 實現的效果，並且簡化了程式碼與邏輯，看完會腦洞大開。
Hacking dark themes with CSS blend modes.
MVP.css.
MVP.css
輕量的 CSS 樣式庫，以原生的 CSS 樣式提供，沒有 JavaScript 依賴，適合用於產品搭建初期的基礎樣式，不用過多的調整就可以擁有還算美觀的界面，這也是它取名為 MVP.css 的原因。
pattern.css.
pattern.css
輕巧的 CSS 的圖樣產生器。
想要做一些裝飾圖樣或背景圖樣的話用 pattern.css 可以很簡單的達成，用起來比圖檔靈活，可以指定顏色和大小，也就是說可以用程式碼動態的改變圖樣，要注意的是 CSS 的優先權問題，要避免 pattern.css 和現有的 CSS 規則衝突，效果可能出不來或是破壞現有版面。
Window 大小和滾動.
Window 大小和滾動
JavaScript 要取得網頁 windows 寬度和高度有兩種方式：
document.documentElement.clientWidth和document.documentElement.clientHeight，這裡傳回的值是不含視窗捲軸的真正尺度。window.innerWidth和window.innerHeight，這裡傳回的值是包含視窗捲軸的尺度。
這兩種值在手機上大多是一樣的，因為手機的捲軸是覆蓋在頁面一側的，而且僅有在滾動時才顯現，但在桌面上就會依照作業系統或瀏覽器的不同的得到不同的結果，在 Safari 上，因為捲軸也是設計成和手機一樣，所以兩種方式也會得到相同的尺度，但一旦插上滑鼠 macOS 就會把捲軸的形式改為佔有固定寬度的形式，其它作業系統對捲軸也是各有各的樣式，所以一旦誤用了 window.innerWidth，那麼最後計算出的尺度就可能會有偏差，最常見的就是原本不會有的水平捲軸卻出現的狀況。
除了 JavaScript，CSS 也會遇到類似的問題，比較新的寬高單位 vw / vh / vmin / vmax 都是包含捲軸的尺度，100vw 用下去很容易就會發生頁面寬度超出 viewport 寬度的現象，因為假設 100vw 拿到的是 1000px 的款度，頁面內又用 100vw 把它撐滿，但實際上扣掉捲軸的寬度後，真正 viewport 剩下的只有 985px，導致原本以為會玩玩美美的撐滿版面的設計，變成超出一點點出現水平捲軸的破版設計。對於上面的例子，比較好的方法是用 100% 代替 100vw，百分比的基礎就是父容器的寬度，如果父容器是 <html>，那就會得到 viewport 真正的寬度。
