吃什麼

2018 總回顧

這是我在 2018 年最值得聊聊的十件事 (*´∀`)~♥

年度回顧 2019鐵人賽 鐵人賽 WorldGym 香港 寶可夢 吃什麼 AMP You-Dont-Know-JS 你懂JavaScript嗎? 你所不知道的JS 單元測試 Unit Test 生活 · 留言


加載效能檢測工具-試用 Google PageSpeed Insights、WebPageTest、Pingdom 和 Lighthouse 的測試範例

針對網站進行各種工具的測試並做優化。

效能調校 加載效能 Loading Performance 吃什麼 Lighthouse Gzip · 留言


加載效能檢測工具

在檢測加載效能時,我們會使用一些工具做測量,而使用這些工具的目的是為了量化效能優劣狀況(來做比較),找出潛在問題並改善,例如:圖檔大小、HTTP Request 數量、程式碼是否最小化、壓縮、快取等。

效能調校 加載效能 Loading Performance 吃什麼 Lighthouse 圖片最佳化 Image Optimization · 留言


文字資源優化

文字資源(Text Content)的優化,以下列出加快從伺服器下載的有效方法。

效能調校 加載效能 Loading Performance Gzip 吃什麼 · 留言


如何做圖片壓縮?

記錄圖片壓縮要做的事情、推薦圖片壓縮和效能檢測的工具。

圖片最佳化 效能調校 加載效能 Image Optimization Loading Performance gulp Lighthouse 響應式網頁 Responsive Web Design 吃什麼 · 留言


SVG Sprites

小圖示的顯示和壓縮技術的演進從 .png、.jpg 或 .gif 圖檔、Image Sprites,到 Base64、Icon Fonts 再來到 SVG 與 SVG Sprites,來看看到底 SVG Sprites 哪裡好 (✪ω✪) 本文前半段著重在產生 SVG Sprites 的方法和如何使用 SVG Symbols 定位;後半段說明各種 SVG Icon 的使用方式和優缺比較。

SVG 圖片最佳化 效能調校 加載效能 Image Optimization Loading Performance gulp react.js 吃什麼 · 留言


CSS Modules:babel-plugin-react-css-modules 小記

樣式管理一直是前端工程師的痛點(很煩 (╯‵□′)╯︵┴─┴),因此 CSS 的模組化方法從過去的 OOCSS、SMACSS,到近代的 BEM,還有最近的 CSS Modules 與 CSS in JS,企圖讓程式碼簡潔易懂、可重用,進而有效率地開發和維護。這裡記錄我的玩具「吃什麼,どっち」使用 CSS Modules 之 babel-plugin-react-css-modules 的實作過程。

CSS Modules CSS in JS babel react.js styled-components BEM css webpack Media Query 吃什麼 · 留言


Preload vs Prefetch

比較 Preload 與 Prefetch 的異同。

Resource Hints 效能調校 加載效能 圖片最佳化 HTTP Caching Loading Performance Image Optimization 吃什麼 · 留言


React.js: Higher-Order Components (HOC)

Higher-Order Components(HOC)是一個函數,可代入元件(Component)作為參數,並回傳一個新的元件。使用 HOC 的目的是將通用的邏輯放在 HOC 中,變動的部分就由代入 Component 的 props 和 state 傳入即可。

react.js 吃什麼 · 留言


2016 總回顧

每年過年期間我總會檢視過去一年的成果和訂定當年的年度計劃。2017 年的年假期間整理了 2016 年最有收穫的十件事,如果最近有約碰面,說不定可以分享一下彼此的近況和展望(與啟發?)。

年度回顧 WorldGym SEO 寶可夢 Postcrossing 吃什麼 生活 · 留言


吃什麼,どっち - 讓朋友幫你決定吃什麼(ALPHA Hackathon 2015)

社交恐懼症的救星跨出了第一步 - 我們做了找吃東西地點的「吃什麼,どっち - 讓朋友幫你決定吃什麼」。使用者藉由輸入簡單的字詞,例如:「台北市中山區 火鍋」,按下「尋找餐廳」後就能從列表中找到符合項目的推薦餐廳,或按下「看看朋友吃什麼」,經由 Facebook 授權登入後,看看朋友去過哪些地方、評價。而我們也會爬回 Facebook 上的資訊做處理並排序,推薦適合的餐廳給使用者。

Hackathon 吃什麼 · 留言