Shubo 的程式開發筆記

在前端開發中，debounce 是一種將多次函式呼叫合併成一次呼叫的技巧，適用於表單驗證以及自動完成等場景。Throttle 是確保函式能夠以固定頻率被執行，適用於無限捲動等場景。這篇文章將會探討 debounce 和 throttle…

在台灣如果是非自願離職的話，是可以申請失業補助的！基本上只要每個月有兩次求職紀錄，就可以領到勞保投保薪資的6…

…

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

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

HTTPS 不僅是資訊安全中不可或缺的要角，對軟體工程師而言也是很必要的知識。簡單的說，HTTPS 是安全版本的 HTTP。HTTP 和 HTTPS 的差別在於，HTTPS 使用 TLS 協議來加密 HTTP 請求和回應。TLS…

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

從瀏覽器網址列輸入URL按下enter發生了什麼？這個問題是一道常見的面試題，其中至少包含了域名解析、建立 TCP 連接、發起 HTTP(S) 請求、伺服器處理並返回請求、瀏覽器渲染頁面等步驟。 域名解析 (DNS Lookup) 建立 TCP 連接 瀏覽器發起 HTTP(S…

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

學習如何用 CSS 屬性 word-break、word-wrap、overflow-wrap 實現強制文字換行，解決長連結和過長英文文字導致網站跑版的問題。探討這些屬性的不同用法和應用場景，確保網站在各種情況下保持良好的排版效果。 目錄 TL;DR word-break…

Binary Heap (二元堆積) 是一種常見的資料結構，適合需要取最大最小值的場合，也適合用來解決 top-k 問題，同時也常被用來實作 priortity queue (優先權佇列)。在 Dijkstra 演算法中，堆積也扮演了重要的角色。Binary Heap…

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

最近用 React Native 開發 app 時，又遇到了 provisioning profile 設定不對的問題。因為太常遇到這個問題，所以決定來好好整理一下到底什麼是 provisioning profile，以及要如何正確設定。Provisioning profile…

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

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

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

這篇文章教你如何挑選一個適合你的程式碼編輯器，以及如何執行 JavaScript。 目錄 程式碼編輯器 (Code Editor) 新手應該用哪種程式碼編輯器？ 線上開發平台 如何執行 JavaScript? HTML script 標籤 引用外部 JavaScript…

這篇文章將會告訴你 JavaScript 是什麼，可以做到什麼事情，以及你為什麼應該學 JavaScript。 目錄 JavaScript 是什麼？ JavaScript 能做到什麼？ 為什麼要學 JavaScript？ 總結 JavaScript 是什麼？ JavaScript…

JavaScript 有7個陣列方法：map(), forEach(), filter(), find(), every(), some() 以及 reduce…

為什麼你應該最佳化網頁的載入速度？根據 Amazon 內部統計，網頁載入的速度每增加100ms，營收就減少 1%。網站速度越慢，客戶越不願意掏出錢來買你的東西。另外網頁載入速度也會影響 SEO…

JavaScript 在 ES6 let 和 const 問世之前，都是用 var 來定義變數，但是 var 有許多迥異於其他程式語言的特性，像是使用函式作用域 (function-level scope)，以及具有變數 hoisting…

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

這篇文章將會帶你了解 CORS (Cross-Origin Resource Sharing) 的概念和設定方法，確保您的網站能在遵守同源政策的前提下正確處理跨來源請求。學習如何設定 Access-Control-Allow-Methods、Access-Control…

了解什麼是 cookie，學習如何使用 JavaScript 讀取和設定 cookie，掌握 Path、Domain、Max-Age、Expires、Secure、HttpOnly、SameSite 等參數的應用，並深入探討 cookie 安全性議題。 目錄 Cookie…

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

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

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

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

現代瀏覽器提供的 Intersection Observer API 非常適合用來實現 Infinite Scroll 和 Lazy Loading 等前端常見的需求。這篇文章將會教你 Intersection Observer API…

本文詳細介紹實用方法 getBoundingClientRect()，以及 left、top、right、bottom、width、height 等相關屬性，並教你如何搭配 window.pageXOffset 和 window.pageYOffset…

本文詳細介紹 JavaScript 中常用的 DOM 元素尺寸和位置屬性，包括 clientHeight, clientWidth, offsetHeight, offsetWidth, scrollHeight, scrollWidth, scrollTop…

《Clean Code…

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

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

Array random shuffle 是一個很常使用的演算法，但你真的知道如何正確地實作它嗎？這篇文章將會討論各種用 JavaScript 實作 array random shuffle (亂數排序) 的方法，以及他們的優缺點。 目錄 神奇的 JavaScript…

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

React Native Android App 要打包成 apk 並 release 到 Google Play 有許多繁瑣的步驟，這篇文章將會教你如何設定 App Signing、建立 Keystore，設定 Release Config、產生簽署過的APK檔、上傳APK…

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

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

這篇教學介紹瀏覽器事件的運作原理，包含event bubbling、event capturing。第二部分介紹event delegation的寫法及應用時機。教學內容主要參考javacript.info 的 Introduction into Events。 目錄 Event…

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

這篇文章將會教你如何設定 img 的 srcset 屬性，依據螢幕的 pixel density 或是寬度載入適當解析度的圖片，達成圖片的 RWD 效果；另外也會教你如何使用 HTML5 picture 標籤設定不同解析度下的多組圖片。 目錄 TL;DR img srcset…

遍歷二元樹 (Binary Tree Traversal) 的順序有三種，分別是前序 (preorder), 中序 (inorder) 和後序 (postorder)。遍歷二元樹實作又可以分為遞迴 (recursive) 和迭代 (iterative…

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

給定 A = [a0, a1, …, an-1]，如何使得 slice 的和 sum(A[p], A[p+1], …, A[q]) 有最大值 (slice長度可以為0) ？有個知名的 Kadane’s Algorithm 可以解決這個問題。 目錄 Kadane’s…

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

當遇到 sum of subarray 相關的問題時，有個很實用的解題技巧：所有的 sum of subarray 都可以用 Si - Sj 組出來，其中 Si = a0 + a1 + … + ai。 目錄 問題: 0 mod n Sum Subset Problem…

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

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

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

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

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

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

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

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

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

前端元件hover的時候顯示氣泡提示框(tooltip/balloon)是常見的效果，也有許多現成的library如Balloon.css可用。這篇教學教你如何用純CSS手刻。 目錄 氣球的形狀 如何定位 Hover…

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

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