吃什麼

使用 React Hooks 重構 React Class Component 的改造筆記

使用 React Hooks 重構 React Class Component 的改造筆記。

react hooks functional programming react.js 吃什麼 redux · 留言


利用 Firebase Performance 來做 Real User Monitoring

利用 Firebase Performance 來做 Real User Monitoring。

Firebase Performance 效能調校 加載效能 Firebase Loading Performance Real User Monitoring passive monitoring 吃什麼 前端效能 系列文 · 留言


利用 Perfume.js 與 Google Analytics 來做 Real User Monitoring

利用 Perfume.js 與 Google Analytics 來做 Real User Monitoring。

效能調校 Perfume.js Google Analytics Loading Performance 加載效能 Real User Monitoring passive monitoring 吃什麼 前端效能 系列文 · 留言


整合 Jenkins 來自動做前端效能測試

本文會從基本的 Jenkins 安裝、設定開始,然後再說明如何整合 Jenkins 來自動做前端效能測試。

Jenkins CI/CD 自動化測試 吃什麼 · 留言


利用 Lighthouse 與 Puppeteer 對全站網頁做效能檢測並產生報表

本文主要是記錄如何在專案中簡易下指令來自動執行 Lighthouse 與 Puppeteer 做全站網頁的效能檢測、產生報表與其目錄。

Lighthouse Puppeteer End-to-End Testing 端對端測試 lighthouse-cli 自動化測試 效能調校 吃什麼 前端效能 系列文 · 留言


2018 總回顧

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

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


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

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

效能調校 加載效能 Lighthouse Loading Performance 吃什麼 Gzip 前端效能 系列文 · 留言


加載效能檢測工具

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

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


文字資源優化

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

效能調校 加載效能 Gzip Loading Performance 吃什麼 前端效能 系列文 · 留言


如何做圖片壓縮?

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

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


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 吃什麼 編碼 解碼 encode decode base-64 前端效能 系列文 · 留言


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 styled-components babel react.js 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 年最有收穫的十件事,如果最近有約碰面,說不定可以分享一下彼此的近況和展望(與啟發?)。

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


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

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

吃什麼 Hackathon · 留言