十分鐘、五步驟，SVG 動起來！
前言在 Codepen 上常常看到很多會設計又懂寫前端的高手，用 SVG 畫出很漂亮的圖案後，還能讓他們產生可愛的動畫，我一直很好奇他們是怎麼實作的，總覺得很困難，好像得對 SVG 透徹了解，並且自己畫出那些 SVG 圖案，才有辦法實作動畫。但其實不然，今天就來分享一個簡單的小技巧，讓你在短短十分鐘內就能讓一個靜態的 SVG 圖案活躍起來！ 簡單看個成品，你可以點選下面範例中的 build 按鈕，可以看到原本靜止的 SVG 房子動了起來
FLIP 技巧總複習
前言在前端的世界中，如何優化 performance 一直都是很重要的議題，也常常被拿來當作評斷前端工程師能力的一個依據。效能調教有許多方面可以探討，但最主要的重點就是希望使用者在操作網站時，不會感受到頁面跳動，尤其是當網站有動畫效果時，些微的跳動就會引起使用者注意。 大概在去年的時候，同事為了解決 CSS Animation 在頁面上的不順暢，研究了不少 hack 技巧，其中一個讓我覺得很特別的就是今天的主角：FLIP。 FLIP 技
D3v4 & Canvas 工作坊 - D3 + Canvas 繪製動態路線圖
前言HTML 5 的 Canvas 是許多人做動畫、做遊戲常常會用到的工具，此外，如果是進行資料視覺化，在繪製大量的圖形與動畫時，Canvas 可以為你的 performance 帶來很大的改善，從 D3.js 實戰 － Canvas 把我的視覺化變「快」了！ 中最後的範例就可以看得出來差異。 總之，身為前端工程師的我卻沒有實作做過 Canvas 相關應用，在羞愧之餘也得奮發向上扳回劣勢才可以，所以決定把上次用 d3 與 svg 繪製的
D3v4 工作坊 - React + D3 繪製 svg 動態路線地圖
前言以前在做一些跟地圖有關的應用時，第一個出現在腦海的不外乎是 Google Map 和 OpenStreetMap，然後搭配 Leaflet 與 Mapbox 等工具來對 map tile 做各種加工渲染，然而到了工作上需要時就會發現這些工具在不付費、遵守授權的狀況下，就出現了各種限制，像是需要自己架設 tile server 來轉換 OpenStreetMap 的圖資，或是 request 的次數限制等等。 想了想發現最好的替代方案