IT 鐵人幫完賽心得
連結 今天是鐵人賽的最後一天，感覺自己最後結尾的部分收得不是很好，也有很多部分都因為時間上的關係沒有很完整地介紹完。 挑戰 30 天連續發文的確是一件非常不容易的事情，自己也更了解到如果還有類似的機會，一定要事先做好準備才行，才不會突發狀況發生時，急就章地寫完文章結尾。 同時，這次挑戰的主題是以前從來沒有碰過的 webGL 及 3D 圖學。原本以為前 10 天的學習能夠掌握基本的知識，不過實際上要...
分類：: 前端
高度相同的排版解決方案
在前端的頁面中，我們經常會碰到需要相同高度的排版。最直覺的方法就是將容器裡的所有元素設為 float 或是 inline-block。 float 及 inline-block如果是使用 float 排版，不但要先撐開父元素容器(clearfix)，還要針對子元素設定 margin。所以一旦內容太多，或是高度不足就會跑版。 而且，這樣的排版最大的缺陷就是，必須設定高度。 那，如果不設置高度呢？就算...
code-review-101
前言身為前端工程師，通常在整個團隊裡面會是最常發送 pull request 的人。為了讓自己的 PR 更容易被測試，以及讓 reviewer 更容易的 review，總結了一些注意事項。 pull request 的描述 這個 pull request 的目的。例如：修正 layout、新增 feature、某個畫面的 style 等等 記住每個公司的成員都可以看見 pull request ，...
css variable + sass variable = 😍
之前寫過了一篇關於自己對 css variable 的想法，原本對這個屬性沒有抱持著太大的期待，自己用習慣了 SASS 變數也覺得這個 css variable 反而像個彆腳的 system，不過如果你也是這樣想的人，可以參考這篇文章 Why should you care Css variables css 的變數已經出來有一段期間了，瀏覽器的支援程度還不算太糟。或許各位都曾經想過，這些變數的功...
用 Canvas 實作 low-poly art 心得
文章待補，圖片。 前言說到 low poly，最讓我驚豔的是 species in pieces 這個網站，他使用 low-poly 的方式畫出 30 種現在地球上瀕臨絕種的動物，是用 CSS 的 clip-path 做出來的，為了兼容瀏覽器，甚至還有做 fallback 的圖片，非常的用心。 之前有在知乎上有看見 low poly 的實作方式，但看了一下原始碼，回答是用 THREE.js 做的。...
smooth animation - （下）easing 的使用
但是，為什麼感覺動畫那麼不自然呢？ 有沒有發現，時間與距離是完全呈現線性變化的，這代表我們假設這個物體在所有的時間點，速度都是相同的。真實生活中通常不會有這樣的事情發生，物體一定都是從靜止狀態逐漸加速，再從移動的狀態中逐漸停止。而上一篇的範例當中，動畫是突然開始，突然停止。在現實生活中，物體的移動速度並非成線性變化，這是造成我們動畫看起來不自然的主要原因。 知道了原理之後，就可以馬上來實作了： ...
smooth scroll
在 window 物件當中，提供了 scrollTo(x, y) 的方法，我們可以透過 scrollTo 來操作滾動。但， scrollTo 方法是直接讓滾動軸移到指定的位置，並沒有動畫的效果，如果要藉由動畫的幫助達到良好的使用者體驗，我們必須自己設計。 基本動畫知識在開始之前先來讓我們了解一下動畫的基礎吧！ 動畫最基本的要素有這些： 時間 = 距離（位移）/ 速度 位移 = 速度 * 時間 速...
從 legacy code 中尋找出口（中）- HTML 篇
講完 CSS 的重構技巧之後，接下來會專注在 HTML 的重構技巧上。本系列的文章將不會談論 js 的重構部分，因為牽扯到較多的程式撰寫技巧，而且網路上類似的文章應該是不勝枚舉。 前言其實 HTML 能夠重構的點並不多，主要就是標籤的正確使用以及顧慮 accessibility 等小細節。 所以這篇文章會著重在如何使用正確的標籤以及語義化；基本的 accessiblity 認識跟 aria 標籤的...
令人期待的 PostCSS
從 SASS 到 PostCSS大約在一年前，PostCSS 開始竄紅在前端生態圈裡，不外乎就是所謂的 preprocessor 的特性、高度客製化自己的 plugin、搶先使用 cssnext 的功能，還能夠搭配各種建構工具（gulp, webpack），用起來非常輕鬆寫意。 變數雖然剛開始看到 PostCSS 的時候還挺興奮的，但隨即思考了一下：「真的有必要馬上把 SASS 取代掉嗎？」。 P...
如何從 legacy code 中尋找出口（中）- CSS 篇
前言我們的第一步是先從 CSS 下手，因為 css 是相對於其他前端部分來說比較容易重構的部分。很容易髒亂的 code 也是 CSS。 上一篇描述了在大型專案中引入新框架及技術的困難點，這一篇主要會專注在如何透過現有的工具及框架來重構現有的代碼。 本次的重構技巧會以 SCSS 為主，所以在閱讀本文之前，我先假設你已經有基本的 SCSS 以及 CSS 的基礎。其他預處理器的概念應該是相通的。 引入 ...