【讀書心得】伊坂幸太郎 - 汽油生活
前言自從實習生活開始之後已經很久沒有看小說了，不過仔細想想，如果把滑 FB 的時間拿來看書，應該可以偷到不少時間，於是假日心一狠，把之前很想看的小說全部搜刮起來…。但事實告訴我，這種衝動還是得小心啊！噴了 2200 多…，我得好好省吃儉用了。 汽油生活 🚗🚕🚙這次的作品是從一輛汽車的角度出發，這已經不是伊坂第一次嘗試了，《死神系列作》、《夜之國的庫帕》，都是以非人類的角度來作描寫，觀察人類。...
主頁
【讀書心得】夜之國的庫帕
為了不要讓這裡的技術成分太濃厚，我打算直接將之前整理的閱讀筆記也一併 PO 在這裡統一管理比較方便。 從 2013 年以來陸陸續續看了很多本書，也做了厚厚的筆記。趁著部落格還空空的，動力還在，決定把那些擱置已久的筆記一併搬出來曬曬太陽見見世面。 夜之國的庫帕前言「來個慵懶而即興的小革命吧！」這本小說很適合在午後咖啡店，一邊啜飲著咖啡，一邊聽著輕音樂，一邊享受著小說中可愛而有趣的視角和劇情。 有一種...
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...
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 永遠都在進行式。 對於日新月異的前端來說，要接觸一個新技術、框架並不是太困難的事。但困難點在於如何在現有的大型專案中做取捨，我們常常會有其他考...