Profile picture

Shubo Chao 軟體工程師,目前大多專注於前端開發

  1. July 13, 2022

    Vite 是一個 no-bundle 原生 ESM dev server,特色是能夠快速啟動 dev server 和高效率的 HMR (Hot Module Replacement)。 目錄 Why Vite? 啟動時間過長 緩慢更新 Production 打包用 Rollup…

  2. July 12, 2022

    本文詳細比較 SSR (Server-Side Rendering,伺服器端渲染) 與 CSR (Client-Side Rendering,客戶端渲染) 的特點和優缺點,並探討如何優化效能。了解渲染技術背後的原理,以便選擇適合您專案的策略。 目錄 CSR (Client…

  3. June 01, 2022

    順利通過了技術面試,到了要談薪水的關卡卻因為不知道如何談判而吃大虧?如果只要痛苦幾十分鐘就可以爭取更多薪水,為什麼不嘗試呢?這篇文章整理了關於談薪水方式以及自己實際談薪水的一些心得,求職地點在台灣,面試經驗以外商/台商各半,大多數公司都稍有規模,少數 startup…

  4. April 26, 2022

    在一個已排序的陣列中,可用 binary search 演算法快速找到你要的數字。Binary search 概念雖然簡單,但是實作上卻有許多細節需要注意,要加一減一?小於還是小於等於?都需要非常小心。 Binary Search…

  5. February 28, 2022

    不知道大家有沒有這種經驗:明明看了很多書,可是過了一陣子想跟別人推薦這本書的時候,卻發現自己講不出這些書的重點。雖然我們以為自己讀了很多書、得到很多知識,但是其實吸收的效果很差。原因是我們只做到了「輸入」,卻忽略了對學習最重要的關鍵:「輸出」。

  6. January 10, 2021

    因為在臉書看到了好幾篇貼文在推薦這本打造超人思維——智商如何從100提升到1000,加上以前有稍微追一下xdite,好奇心驅使之下就買來看看。 這本書讀起來滿順暢的,缺點就是一下子就看完了,覺得好像正要理解一些新的什麼的時候就結束了XD…

  7. December 09, 2020

    在 JavaScript 的程式中,我們經常需要處理各種資料,例如:購物網站的購物車中的商品,或是社群網站中的聊天訊息和朋友的上線狀態。 變數的功能就是用來儲存資料。 目錄 JavaScript…

  8. December 02, 2020

    這篇文章將會教你 JavaScript 最基礎的程式結構,包含組成程式碼的最小元素:語句、標示語句結束的分號、單行及多行註解。 目錄 語句 (Statement) 分號 (;) 註解 單行註解 (//) 多行註解 (/* */) 總結 語句 (Statement…

  9. July 10, 2020

    在 JavaScript 中,「this 是什麼」絕對是讓人頭痛難題前三名。This 和物件方法息息相關,因此這篇文章會先介紹在物件方法、物件方法中的 this 是如何被決定的,把握一個簡單原則就可以知道 this 到底是誰。另外,arrow function 的 this…

  10. June 07, 2020

    @babel/preset-env 是 babel 7 架構下的一組 preset,能讓你用最新的 JavaScript 語法寫程式,並且智慧地根據瀏覽器的環境引入需要的 polyfill,節省手動管理 syntax transform 的時間,還能夠減少 bundle…

  11. May 09, 2020

    在 JavaScript 中,每個物件都有一個 prototype (原型),物件可以從原型上繼承屬性和方法,達到復用程式碼的效果,這就是所謂的 prototypal inheritance…

  12. March 28, 2020

    Web Share API 是現代瀏覽器提供的最新功能之一,它讓網頁的使用者能夠體驗到和原生 app 完全相同的分享體驗。這篇文章將會教你 navigator.share() 的使用方法。 目錄 Web Share API 是什麼? Web Share API…

  13. December 28, 2019

    Hot Module Replacement (HMR) 是 Webpack 提供方便開發過程的功能,讓你修改原始碼時不需要重新載入頁面,這篇文章將會教你如何設定 Webpack Config 使你的專案支援 HMR,增加團隊的開發效率。 目錄 開啟 Webpack HMR…

  14. April 06, 2019

    現代瀏覽器提供了 preload、prefetch 和 preconnect 等功能,能讓開發者指定 link tag 的 rel 屬性提示瀏覽器提前下載圖片、JS、CSS等資源,以達到優化效能的效果。這篇文章將會教你這三種 resource hint…

  15. March 21, 2019

    Quick sort 快速排序演算法是一種 divide and conquer 的陣列排序方法,其過程如下:先從 array 中選出一個元素當基準 (pivot),然後讓 pivot 左邊的元素都小於等於 pivot,pivot 右邊的元素都大於 pivot…

  16. March 05, 2019

    深入了解 JavaScript ES6 class 的概念及使用方法,探討 class 與 prototype 的關係,學會利用 extends 實現繼承,掌握 constructor、super 的使用技巧,以及瞭解靜態方法的應用。看完這篇保證讓你對 JavaScript…

  17. August 11, 2018

    這篇教學會介紹 JavaScript 中 apply() 和 call() 的使用方法,以及運用到 apply() 和 call() 的應用,包括 Call Forwarding、Cache 和 Method Borrowing。 目錄 JavaScript apply() JS…

  18. March 04, 2018

    JavaScript 中的閉包 (Closure) 是函式以及其語彙環境 (Lexical Environment) 的組合,所有的函式都能夠記住被創造的當下的環境以及變數。這篇教學將會從 JavaScript…

  19. May 20, 2017

    JavaScript 中的 Promise 是專門用來執行非同步操作的資料結構,提供了 then、catch、all、race 等方法,使得複雜的非同步流程變得簡潔好管理。這篇文章將會介紹 promise 的 resolve 和 reject,如何使用 then…

  20. April 03, 2017

    令 A = [a0, a1, …, an-1], ai > 0,要如何判斷是否存在一組 (p, q),其中 p <= q,使得 sum(ap, ap+1, … aq) = s?我們可以用下面介紹的Caterpillar Method。 目錄 Caterpillar Method…

  21. April 01, 2017

    給定A = [a0, a1, …, an-1],如何找到一組S = [s0, s1, … sn-1], sj ∈ {-1, 1}, 使得abs(sum(ai * si))有最小值?關鍵在於對於 A 中的每個元素 a 能夠產生的 sum…

  22. March 27, 2017

    Given a set of numbers {a1-an}, what is the best way to come up with a nonempty subset such that the sum of its elements is 0 mod n, where n…

  23. February 04, 2017

    這篇教學介紹React專案的基本webpack設定。包含支援ES6需要的Babel,程式碼風格檢查的ESLint和開發工具 webpack-dev-server。 目錄 專案資料夾結構 Overview Webpack基本設定 Babel設定 ESLint…

  24. January 07, 2017

    這篇教學介紹Redux如何用正規化(normalization)的方式,儲存從API取得的遠端資料。 目錄 TL;DR Normalize the State Shape reducer reducer Why Normalized State? Reducer with…

  25. December 26, 2016

    這篇教學主要是整理Redux middleware的原理,如何實作,以及如何理解middleware chain的順序。 目錄 Middleware 如何實作Middleware logger Redux Promise Apply middlewares Middleware…

  26. November 27, 2016

    這篇教學簡介瀏覽器轉譯/渲染(Browser Rendering)的原理,如何使用Chrome DevTool找到效能瓶頸,以及如何避開導致效能瓶頸的作法。 Critical Rendering Path What Goes Into One Frame? Layout and…

  27. November 12, 2016

    這篇教學介紹Redux中常用到的Selector函式,其作用是將容器中特定狀態取出。 在裡面,通常會將state經過一番計算後轉換成props,例如:經過filter過濾後的todos。我們通常會寫一個作轉換的工作: 問題是,使用者必須要記得state…

  28. October 16, 2016

    這篇教學會介紹如何從React元件的props拿到url資訊,以及如何使用React Router內建的的HoC 拿到url資訊。 React Router是一個管理URL的庫,能根據瀏覽器的URL決定要渲染哪些元件。 React Router…

  29. July 18, 2016

    這篇教學將會介紹d3的基本概念,以及分享如何在React元件內整合d3圖表。 目錄 範例 d3簡介 Data Binding Enter, Update and Exit Update enter() exit() 回到正題 - 在React中嵌入d3圖表 React Refs…

  30. June 30, 2016

    這篇教學會介紹如何用純CSS做出平行四邊形的標籤。 稍稍改變一下平淡無奇的長方形標籤,或許能替網頁增添一些活潑的感覺?實際在網頁中運用大概像這樣子: (參考資料:CSS Secrets) 目錄 用CSS transform製作長方形 結論 參考資料 用CSS transform…

  31. May 23, 2016

    這篇教學要介紹如何用純CSS把checkbox做成iOS風格的開關(toggle)。最近在CSS Secrets裡面看到這樣的技巧,覺得還滿酷的!決定分享給大家。 目錄 Checkbox Hack iOS Toggle Button Positioning Change…

  32. April 23, 2016

    JavaScript 中可以使用 JavaScript new 運算子及建構函式建立物件。定義建構函式的必要步驟:1. 宣告建構函式 2. 在建構函式中,將物件屬性定義在 this 上 3. 將物件方法定義在建構式的 prototype 屬性裡 4. 用 new…

  33. March 05, 2016

    這篇教學將介紹如何用Github Pages和Jekyll搭建部落格。其優點是快速、免費、免架站,相較於wordpress客製化彈性高,更支援用Markdown語法寫文章。推薦給廣大工程師朋友們! 目錄 簡介 GitHub Pages Jekyll…