令人期待的 PostCSS
從 SASS 到 PostCSS大約在一年前，PostCSS 開始竄紅在前端生態圈裡，不外乎就是所謂的 preprocessor 的特性、高度客製化自己的 plugin、搶先使用 cssnext 的功能，還能夠搭配各種建構工具（gulp, webpack），用起來非常輕鬆寫意。 變數雖然剛開始看到 PostCSS 的時候還挺興奮的，但隨即思考了一下：「真的有必要馬上把 SASS 取代掉嗎？」。 P...
歸檔: 2016
weekly-thought-7/31
發現的新東西瀏覽器的字體渲染前陣子發現了 font-smoothing 的屬性，雖然 w3c 已經把他從標準刪除，但在 chrome 上面還是可以使用這個屬性。 但令人好奇的是，其他瀏覽器的字體渲染方式呢？ 其實字型渲染是一個一直以來容易被忽略，卻又是極為重要的議題。因為網站的易讀性除了 layout 之外，再來就是字體了。 為了確認網站在瀏覽器的一致性，稍微研究了一下字體渲染的方式。分享在這邊給...
weekly thought-7/17
發現的新東西別跟我說你懂 margin拿捏 margin 跟 padding 可以很容易地看出前端工程師對 CSS 的掌握程度。說真的超多眉眉角角的，不過看完文章發現原來 margin 的妙用這麼多。以後的實踐或許有比較容易的方法也說不定！ MutationObserver這個鮮為人知的 API，被喜歡翻 MSDN 的我挖掘到了，基本上已經支持目前主流的瀏覽器（IE11+)。 看完介紹會發現他很像...
如何從 legacy code 中尋找出口（中）- CSS 篇
前言我們的第一步是先從 CSS 下手，因為 css 是相對於其他前端部分來說比較容易重構的部分。很容易髒亂的 code 也是 CSS。 上一篇描述了在大型專案中引入新框架及技術的困難點，這一篇主要會專注在如何透過現有的工具及框架來重構現有的代碼。 本次的重構技巧會以 SCSS 為主，所以在閱讀本文之前，我先假設你已經有基本的 SCSS 以及 CSS 的基礎。其他預處理器的概念應該是相通的。 引入 ...
從 legacy code 中尋找出口（上）
在我第一次進入主產品開發後，把代碼從 Github 上面 pull 下來。 「這是什麼鬼東西？」 結構混亂，大量覆寫的 class 各處都是，以及很可怕的巢狀 ID。view 的部分也有些地方非常雜亂……。看來 legacy code 跟 refactor 永遠都在進行式。 對於日新月異的前端來說，要接觸一個新技術、框架並不是太困難的事。但困難點在於如何在現有的大型專案中做取捨，我們常常會有其他考...
weekly-6/6
這次介紹一下我建置 style guide 的過程以及心得。 工作內容 styleguide 建置 新的 ws_job_index search bar Styleguide 真的很重要在建置的過程中，我們常常會忽略，「如果是別人，該如何快速懂得文件的內容」。所以在上以前的 view 當中，我其實都不太清楚。「啊！原來這個已經寫成 helper 了」「啊！這個已經寫成 class」的情況屢見不鮮...
weekly-thought-5/29
發現的新東西flow第一次聽到，是從 henry 的口中。第二次看到，是從看了 draftjs 的 source code。 當前端的 code 無可避免地增肥之後（尤其是 js 跟 css)，我們也應該尋找更有效的代碼管理方式。像是逐漸引入的 eslinter 跟 stylelint 都是。 而 flow 給我的感覺有點像 Typescript，但優點是你可以完全用寫 js 的方式，也不需要改變...
【筆記】易讀程式碼之美學
比較短的程式碼比較好嗎？雖然減少程式碼會提高易讀性，但縮短讀程式碼的時間才是重點。 表層結構 清楚的命名方法跟變數名稱 方法不需要用 do 選擇詞彙的時候不要用模擬兩可的名稱，ex: pop popItem 在方法名稱加入更多的資訊 1234 function getPage() {} // 對方可能不知道 getPage 的實作方式？爬蟲？ ajax？function...