weekly-thought-5/30
這個禮拜不談「新」東西，多數會是關於網頁開發的重新思考。算是回過頭來漸漸補齊自己的技術債吧！比起前幾個禮拜所談的新東西，這一篇文章可能相對枯燥一點，當然篇幅也會比較長，但我認為這是必要的。 這些東西在前端變化快速的時代下或許顯得不那麼重要，不過思考總是件好事。 語義化標籤重新思考語義化這件事會有這個想法，是看到 instant article 的 html 架構，他們規範 instant arti...
歸檔: 2016
frontend collection - 5/23
這禮拜發現的新東西這個禮拜在思考關於重構的東西，在前端還可以怎麼實踐。css 的部分已經有大致的雛形出來了，把相關的註解跟文件寫完之後再和大家分享心得。 Get your ../../ outreference css 部分重構完之後，再來就是要對 js 下手了。目前比較困擾的幾個點有： component 初期的部分比較亂 有些 flux、有些 redux 再來是我認為最麻煩的，就是路徑管理...
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 做的。...
人類也是 context switch 的動物 - 違反直覺的做事方式
今天看了這個影片，主要是想要指出其實在多工切換中，可以得到比較好的效率。 聽起來很 trick，對吧？其實剛看完影片我也不太相信，不過這似乎可以用作業系統的角度來解釋。 Context Switch如果學過作業系統，對這個名詞不陌生。當時的疑問是，既然轉換要成本，為什麼不直接一個 process 到底就好？ 這個乍聽起來很蠢，但其實 context switch 並不會讓 process 的完成...
【讀書心得】伊坂幸太郎 - 汽油生活
前言自從實習生活開始之後已經很久沒有看小說了，不過仔細想想，如果把滑 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 標籤的...