❤️ 🍰 🌹 🎬 🚴♀️ 🏋️♀️ 💻 🚀 💜
這裡記錄了我的學習和開發筆記,歡迎交流 (*´∀`)~♥
© 2024. All rights reserved.
使用 React Hooks 重構 React Class Component 的改造筆記。
January 30, 2021 react hooks functional programming react.js 吃什麼 redux · 留言
利用 Firebase Performance 來做 Real User Monitoring。
September 22, 2020 Firebase Performance 效能調校 加載效能 Firebase Loading Performance Real User Monitoring passive monitoring 吃什麼 前端效能 系列文 · 留言
利用 Perfume.js 與 Google Analytics 來做 Real User Monitoring。
September 22, 2020 效能調校 Perfume.js Google Analytics Loading Performance 加載效能 Real User Monitoring passive monitoring 吃什麼 前端效能 系列文 · 留言
本文會從基本的 Jenkins 安裝、設定開始,然後再說明如何整合 Jenkins 來自動做前端效能測試。
August 27, 2020 Jenkins CI/CD 自動化測試 吃什麼 · 留言
本文主要是記錄如何在專案中簡易下指令來自動執行 Lighthouse 與 Puppeteer 做全站網頁的效能檢測、產生報表與其目錄。
August 21, 2020 Lighthouse Puppeteer End-to-End Testing 端對端測試 lighthouse-cli 自動化測試 效能調校 吃什麼 前端效能 系列文 · 留言
這是我在 2018 年最值得聊聊的十件事 (*´∀`)~♥
December 31, 2018 年度回顧 2019鐵人賽 寶可夢 鐵人賽 健身 旅遊 職涯 香港 吃什麼 健身女孩安安 WorldGym AMP You-Dont-Know-JS 你懂JavaScript嗎? 你所不知道的JS 單元測試 Unit Test 生活 · 留言
針對網站進行各種工具的測試並做優化。
September 11, 2018 效能調校 加載效能 Lighthouse Loading Performance 吃什麼 Gzip 前端效能 系列文 · 留言
在檢測加載效能時,我們會使用一些工具做測量,而使用這些工具的目的是為了量化效能優劣狀況(來做比較),找出潛在問題並改善,例如:圖檔大小、HTTP Request 數量、程式碼是否最小化、壓縮、快取等。
September 5, 2018 效能調校 圖片最佳化 Lighthouse 加載效能 Loading Performance 吃什麼 Image Optimization 前端效能 系列文 · 留言
文字資源(Text Content)的優化,以下列出加快從伺服器下載的有效方法。
September 5, 2018 效能調校 加載效能 Gzip Loading Performance 吃什麼 前端效能 系列文 · 留言
記錄圖片壓縮要做的事情、推薦圖片壓縮和效能檢測的工具。
August 22, 2018 圖片最佳化 效能調校 Responsive Web Design 加載效能 Image Optimization Loading Performance gulp Lighthouse 響應式網頁 吃什麼 前端效能 系列文 · 留言
小圖示的顯示和壓縮技術的演進從 .png、.jpg 或 .gif 圖檔、Image Sprites,到 Base64、Icon Fonts 再來到 SVG 與 SVG Sprites,來看看到底 SVG Sprites 哪裡好 (✪ω✪) 本文前半段著重在產生 SVG Sprites 的方法和如何使用 SVG Symbols 定位;後半段說明各種 SVG Icon 的使用方式和優缺比較。
August 20, 2018 SVG 圖片最佳化 效能調校 加載效能 Image Optimization Loading Performance gulp react.js 吃什麼 編碼 解碼 encode decode base-64 前端效能 系列文 · 留言
樣式管理一直是前端工程師的痛點(很煩 (╯‵□′)╯︵┴─┴),因此 CSS 的模組化方法從過去的 OOCSS、SMACSS,到近代的 BEM,還有最近的 CSS Modules 與 CSS in JS,企圖讓程式碼簡潔易懂、可重用,進而有效率地開發和維護。這裡記錄我的玩具「吃什麼,どっち」使用 CSS Modules 之 babel-plugin-react-css-modules 的實作過程。
August 14, 2018 CSS Modules CSS in JS styled-components babel react.js BEM css webpack Media Query 吃什麼 · 留言
比較 Preload 與 Prefetch 的異同。
July 31, 2018 Resource Hints 效能調校 加載效能 圖片最佳化 HTTP Caching Loading Performance Image Optimization 吃什麼 前端效能 系列文 · 留言
Higher-Order Components(HOC)是一個函數,可代入元件(Component)作為參數,並回傳一個新的元件。使用 HOC 的目的是將通用的邏輯放在 HOC 中,變動的部分就由代入 Component 的 props 和 state 傳入即可。
May 20, 2018 react.js 吃什麼 · 留言
每年過年期間我總會檢視過去一年的成果和訂定當年的年度計劃。2017 年的年假期間整理了 2016 年最有收穫的十件事,如果最近有約碰面,說不定可以分享一下彼此的近況和展望(與啟發?)。
February 4, 2017 年度回顧 Postcrossing 寶可夢 吃什麼 旅遊 職涯 SEO WorldGym 生活 · 留言
社交恐懼症的救星跨出了第一步 - 我們做了找吃東西地點的「吃什麼,どっち - 讓朋友幫你決定吃什麼」。使用者藉由輸入簡單的字詞,例如:「台北市中山區 火鍋」,按下「尋找餐廳」後就能從列表中找到符合項目的推薦餐廳,或按下「看看朋友吃什麼」,經由 Facebook 授權登入後,看看朋友去過哪些地方、評價。而我們也會爬回 Facebook 上的資訊做處理並排序,推薦適合的餐廳給使用者。
February 2, 2015 吃什麼 Hackathon · 留言