AWS Cloud Practitioner Essentials 筆記: Networking (網路)
AWS Virtual Private Cloud (VPC) Internet Gateway Virtual Private Gateway AWS Direct Connect Subnets and Network Access Control Lists…
Read more →什麼是 Event Loop？
Event loop 是一個持續運行的機制，負責監控 Call Stack 是否為空，並依序從 Microtask Queue 和 Task Queue 中選取任務放入 Call Stack 執行。此外，它也協調瀏覽器的渲染操作，確保在必要時刷新畫面。 JavaScript…
Read more →AWS Cloud Practitioner Essentials 筆記: Global Infrastructure (Region, Availability Zone, Edge Locations)
AWS 在各地有 Region 提供各種服務，一個 Region 中有多個 Availability Zone 使服務具高可用性。AWS Cloudfront 是 AWS 提供的 CDN 服務，讓使用者可以就近取得內容。 Region (區域) Availability Zone…
Read more →AWS Cloud Practitioner Essentials 筆記: 其他計算服務 (Serverless, ECS, EKS, Fargate)
除了 AWS EC2 之外，AWS 還提供了其他有用的計算服務，例如 Lambda, ECS, EKS, Fargate。 Serverless computing AWS Lambda Container (容器) Amazon Elastic Container…
Read more →AWS Cloud Practitioner Essentials 筆記: Amazon SNS and SQS
Monolithic applications and microservices Amazon SNS Amazon SQS Reference Monolithic applications and microservices…
Read more →AWS Cloud Practitioner Essentials 筆記: Amazon ELB
ELB (Elastic Load Balancing) 是 AWS 的一個服務，它的功能是把進來的流量平均分配給各個資源，例如 Amazon EC2 instances。 Elastic Load Balancing ELB + Auto Scaling Group…
Read more →AWS Cloud Practitioner Essentials 筆記: Amazon EC2
Amazon EC2 (Elastic Compute Cloud) 是一種 virtual server。他有以下好處： 你可以在幾分鐘內快速啟動 Amazon EC2 的 instance。 不需要使用的時候可以隨時停止。 用多少付多少。 可以選擇滿足你需要的 server…
Read more →AWS Cloud Practitioner Essentials 筆記: 簡介
什麼是 Cloud Computing? AWS 對 cloud computing 正式的定義是： Cloud computing is the on-demand delivery of IT resources over the internet with pay-as…
Read more →如何在六個月內學會任何語言
這篇文章是摘要 How to learn any language in six months | Chris Lonsdale | TEDxLingnanUniversity 這個影片，其中包含了學習一個新語言時所需要注意的原則以及該做的事。 The 2 Things that…
Read more →前端開發者不可不知的Debounce與Throttle
在前端開發中，debounce 是一種將多次函式呼叫合併成一次呼叫的技巧，適用於表單驗證以及自動完成等場景。Throttle 是確保函式能夠以固定頻率被執行，適用於無限捲動等場景。這篇文章將會探討 debounce 和 throttle…
Read more →失業補助怎麼申請？多做「這件事」可以多領20%？失業補助申請心得分享【2024更新】
在台灣如果是非自願離職的話，是可以申請失業補助的！基本上只要每個月有兩次求職紀錄，就可以領到勞保投保薪資的6…
Read more →如何用英文請對方再說一次？掌握技巧，輕鬆應對各種口音
…
Read more →初探 Vite: 主打超快速的 dev server
Vite 是一個 no-bundle 原生 ESM dev server，特色是能夠快速啟動 dev server 和高效率的 HMR (Hot Module Replacement)。 目錄 Why Vite? 啟動時間過長 緩慢更新 Production 打包用 Rollup…
Read more →SSR 與 CSR 深度解析：從渲染方式到效能最佳化
本文詳細比較 SSR (Server-Side Rendering，伺服器端渲染) 與 CSR (Client-Side Rendering，客戶端渲染) 的特點和優缺點，並探討如何最佳化效能。了解渲染技術背後的原理，以便選擇適合您專案的策略。 目錄 CSR (Client…
Read more →每個軟體工程師都應該懂的HTTPS：深入淺出加密原理、TLS協議
HTTPS 不僅是資訊安全中不可或缺的要角，對軟體工程師而言也是很必要的知識。簡單的說，HTTPS 是安全版本的 HTTP。HTTP 和 HTTPS 的差別在於，HTTPS 使用 TLS 協議來加密 HTTP 請求和回應。TLS…
Read more →軟體工程師薪資談判大解密！內行人爆料：掌握這個技巧，薪水瞬間飆升
順利通過了技術面試，到了要談薪水的關卡卻因為不知道如何談判而吃大虧？如果只要痛苦幾十分鐘就可以爭取更多薪水，為什麼不嘗試呢？這篇文章整理了關於談薪水方式以及自己實際談薪水的一些心得，求職地點在台灣，面試經驗以外商/台商各半，大多數公司都稍有規模，少數 startup…
Read more →經典前端面試題：從瀏覽器網址列輸入 URL 按下 enter 發生了什麼？
從瀏覽器網址列輸入URL按下enter發生了什麼？這個問題是一道常見的面試題，其中至少包含了域名解析、建立 TCP 連接、發起 HTTP(S) 請求、伺服器處理並返回請求、瀏覽器渲染頁面等步驟。 域名解析 (DNS Lookup) 建立 TCP 連接 瀏覽器發起 HTTP(S…
Read more →Binary Search 二元搜尋法
在一個已排序的陣列中，可用 binary search 演算法快速找到你要的數字。Binary search 概念雖然簡單，但是實作上卻有許多細節需要注意，要加一減一？小於還是小於等於？都需要非常小心。 Binary Search…
Read more →CSS 文字換行技巧：word-break、word-wrap、overflow-wrap 的區別與應用
學習如何用 CSS 屬性 word-break、word-wrap、overflow-wrap 實現強制文字換行，解決長連結和過長英文文字導致網站跑版的問題。探討這些屬性的不同用法和應用場景，確保網站在各種情況下保持良好的排版效果。 目錄 TL;DR word-break…
Read more →二元堆積 (Binary Heap)、最小堆積 (Min Heap) 與最大堆積 (Max Heap)
Binary Heap (二元堆積) 是一種常見的資料結構，適合需要取最大最小值的場合，也適合用來解決 top-k 問題，同時也常被用來實作 priortity queue (優先權佇列)。在 Dijkstra 演算法中，堆積也扮演了重要的角色。Binary Heap…
Read more →《最高學以致用法》讀後心得：讓學習成果最大化的三種技巧
不知道大家有沒有這種經驗：明明看了很多書，可是過了一陣子想跟別人推薦這本書的時候，卻發現自己講不出這些書的重點。雖然我們以為自己讀了很多書、得到很多知識，但是其實吸收的效果很差。原因是我們只做到了「輸入」，卻忽略了對學習最重要的關鍵：「輸出」。
Read more →Provisioning profile 是什麼? 如何設定 provisioning profile?
最近用 React Native 開發 app 時，又遇到了 provisioning profile 設定不對的問題。因為太常遇到這個問題，所以決定來好好整理一下到底什麼是 provisioning profile，以及要如何正確設定。Provisioning profile…
Read more →打造超人思維，智商如何從 100 提升到 1000 - 讀書心得
因為在臉書看到了好幾篇貼文在推薦這本打造超人思維——智商如何從100提升到1000，加上以前有稍微追一下xdite，好奇心驅使之下就買來看看。 這本書讀起來滿順暢的，缺點就是一下子就看完了，覺得好像正要理解一些新的什麼的時候就結束了ＸＤ…
Read more →JavaScript 變數 - JavaScript 程式教學 / JS Tutorial
在 JavaScript 的程式中，我們經常需要處理各種資料，例如：購物網站的購物車中的商品，或是社群網站中的聊天訊息和朋友的上線狀態。 變數的功能就是用來儲存資料。 目錄 JavaScript…
Read more →JavaScript 程式結構 - JavaScript 程式教學 / JS Tutorial
這篇文章將會教你 JavaScript 最基礎的程式結構，包含組成程式碼的最小元素：語句、標示語句結束的分號、單行及多行註解。 目錄 語句 (Statement) 分號 (;) 註解 單行註解 (//) 多行註解 (/* */) 總結 語句 (Statement…
Read more →如何挑選 JavaScript 編輯器 - JavaScript 程式教學 / JS Tutorial
這篇文章教你如何挑選一個適合你的程式碼編輯器，以及如何執行 JavaScript。 目錄 程式碼編輯器 (Code Editor) 新手應該用哪種程式碼編輯器？ 線上開發平台 如何執行 JavaScript? HTML script 標籤 引用外部 JavaScript…
Read more →什麼是 JavaScript？ JavaScript 是幹嘛用的？ - JavaScript 程式教學 / JS Tutorial
這篇文章將會告訴你 JavaScript 是什麼，可以做到什麼事情，以及你為什麼應該學 JavaScript。 目錄 JavaScript 是什麼？ JavaScript 能做到什麼？ 為什麼要學 JavaScript？ 總結 JavaScript 是什麼？ JavaScript…
Read more →JavaScript Array 陣列操作方法: map(), forEach(), filter(), find(), every(), some(), reduce()
JavaScript 有7個陣列方法：map(), forEach(), filter(), find(), every(), some() 以及 reduce…
Read more →網頁載入速度效能最佳化加速30%真實案例分享
為什麼你應該最佳化網頁的載入速度？根據 Amazon 內部統計，網頁載入的速度每增加100ms，營收就減少 1%。網站速度越慢，客戶越不願意掏出錢來買你的東西。另外網頁載入速度也會影響 SEO…
Read more →JavaScript Hoisting 是什麼？ let, const, var 的差異是什麼？
JavaScript 在 ES6 let 和 const 問世之前，都是用 var 來定義變數，但是 var 有許多迥異於其他程式語言的特性，像是使用函式作用域 (function-level scope)，以及具有變數 hoisting…
Read more →JavaScript this 的用法
在 JavaScript 中，「this 是什麼」絕對是讓人頭痛難題前三名。This 和物件方法息息相關，因此這篇文章會先介紹在物件方法、物件方法中的 this 是如何被決定的，把握一個簡單原則就可以知道 this 到底是誰。另外，arrow function 的 this…
Read more →深入了解 CORS (跨來源資源共用): 如何正確設定 CORS？
這篇文章將會帶你了解 CORS (Cross-Origin Resource Sharing) 的概念和設定方法，確保您的網站能在遵守同源政策的前提下正確處理跨來源請求。學習如何設定 Access-Control-Allow-Methods、Access-Control…
Read more →Cookie 是什麼：如何使用 JavaScript 操作 document.cookie
了解什麼是 cookie，學習如何使用 JavaScript 讀取和設定 cookie，掌握 Path、Domain、Max-Age、Expires、Secure、HttpOnly、SameSite 等參數的應用，並深入探討 cookie 安全性議題。 目錄 Cookie…
Read more →@babel/preset-env 設定
@babel/preset-env 是 babel 7 架構下的一組 preset，能讓你用最新的 JavaScript 語法寫程式，並且智慧地根據瀏覽器的環境引入需要的 polyfill，節省手動管理 syntax transform 的時間，還能夠減少 bundle…
Read more →JavaScript Prototype (原型) 是什麼？
在 JavaScript 中，每個物件都有一個 prototype (原型)，物件可以從原型上繼承屬性和方法，達到復用程式碼的效果，這就是所謂的 prototypal inheritance…
Read more →Web Share API - Navigator.share() 介紹
Web Share API 是現代瀏覽器提供的最新功能之一，它讓網頁的使用者能夠體驗到和原生 app 完全相同的分享體驗。這篇文章將會教你 navigator.share() 的使用方法。 目錄 Web Share API 是什麼？ Web Share API…
Read more →如何設定 Webpack HMR + React Hot Loader (2020更新)
Hot Module Replacement (HMR) 是 Webpack 提供方便開發過程的功能，讓你修改原始碼時不需要重新載入頁面，這篇文章將會教你如何設定 Webpack Config 使你的專案支援 HMR，增加團隊的開發效率。 目錄 開啟 Webpack HMR…
Read more →如何用 Intersection Observer API 實作 Infinite Scroll/Lazy Loading
現代瀏覽器提供的 Intersection Observer API 非常適合用來實現 Infinite Scroll 和 Lazy Loading 等前端常見的需求。這篇文章將會教你 Intersection Observer API…
Read more →深入了解 getBoundingClientRect() 函數，輕鬆獲得元素的大小和位置
本文詳細介紹實用方法 getBoundingClientRect()，以及 left、top、right、bottom、width、height 等相關屬性，並教你如何搭配 window.pageXOffset 和 window.pageYOffset…
Read more →DOM 元素尺寸與位置：clientHeight, clientWidth, offsetHeight, offsetWidth, scrollHeight, scrollWidth, scrollTop, scrollLeft 詳解
本文詳細介紹 JavaScript 中常用的 DOM 元素尺寸和位置屬性，包括 clientHeight, clientWidth, offsetHeight, offsetWidth, scrollHeight, scrollWidth, scrollTop…
Read more →《Clean Code 無瑕的程式碼 中文版》介紹＋讀書心得：簡單 10 個日常小技巧，讓你寫出可讀性高、容易維護的程式碼
《Clean Code…
Read more →Preload, Prefetch 和 Preconnect 的差異
現代瀏覽器提供了 preload、prefetch 和 preconnect 等功能，能讓開發者指定 link tag 的 rel 屬性提示瀏覽器提前下載圖片、JS、CSS等資源，以達到最佳化效能的效果。這篇文章將會教你這三種 resource hint…
Read more →Quick Sort 演算法原理與實作
Quick sort 快速排序演算法是一種 divide and conquer 的陣列排序方法，其過程如下：先從 array 中選出一個元素當基準 (pivot)，然後讓 pivot 左邊的元素都小於等於 pivot，pivot 右邊的元素都大於 pivot…
Read more →[筆記] 如何正確實作 JavaScript Array Random Shuffle 亂數排序演算法
Array random shuffle 是一個很常使用的演算法，但你真的知道如何正確地實作它嗎？這篇文章將會討論各種用 JavaScript 實作 array random shuffle (亂數排序) 的方法，以及他們的優缺點。 目錄 神奇的 JavaScript…
Read more →JavaScript ES6 Class：深入淺出類別概念與應用
深入了解 JavaScript ES6 class 的概念及使用方法，探討 class 與 prototype 的關係，學會利用 extends 實現繼承，掌握 constructor、super 的使用技巧，以及瞭解靜態方法的應用。看完這篇保證讓你對 JavaScript…
Read more →如何將 React Native Android App 打包成 apk 並發布上架至 Google Play Store (2020年更新)
React Native Android App 要打包成 apk 並 release 到 Google Play 有許多繁瑣的步驟，這篇文章將會教你如何設定 App Signing、建立 Keystore，設定 Release Config、產生簽署過的APK檔、上傳APK…
Read more →如何使用 JavaScript 的 call 和 apply
這篇教學會介紹 JavaScript 中 apply() 和 call() 的使用方法，以及運用到 apply() 和 call() 的應用，包括 Call Forwarding、Cache 和 Method Borrowing。 目錄 JavaScript apply() JS…
Read more →JavaScript Closure (閉包)
JavaScript 中的閉包 (Closure) 是函式以及其語彙環境 (Lexical Environment) 的組合，所有的函式都能夠記住被創造的當下的環境以及變數。這篇教學將會從 JavaScript…
Read more →瀏覽器事件：Event Bubbling, Event Capturing 及 Event Delegation
這篇教學介紹瀏覽器事件的運作原理，包含event bubbling、event capturing。第二部分介紹event delegation的寫法及應用時機。教學內容主要參考javacript.info 的 Introduction into Events。 目錄 Event…
Read more →JavaScript Promise 的用法
JavaScript 中的 Promise 是專門用來執行非同步操作的資料結構，提供了 then、catch、all、race 等方法，使得複雜的非同步流程變得簡潔好管理。這篇文章將會介紹 promise 的 resolve 和 reject，如何使用 then…
Read more →如何使用 img srcset 讓圖片在 RWD 網頁顯示適當解析度
這篇文章將會教你如何設定 img 的 srcset 屬性，依據螢幕的 pixel density 或是寬度載入適當解析度的圖片，達成圖片的 RWD 效果；另外也會教你如何使用 HTML5 picture 標籤設定不同解析度下的多組圖片。 目錄 TL;DR img srcset…
Read more →三種 Iterative Binary Tree Traversal 的方法 (Inorder, Preorder, Postorder)
遍歷二元樹 (Binary Tree Traversal) 的順序有三種，分別是前序 (preorder), 中序 (inorder) 和後序 (postorder)。遍歷二元樹實作又可以分為遞迴 (recursive) 和迭代 (iterative…
Read more →Caterpillar Method
令 A = [a0, a1, …, an-1], ai > 0，要如何判斷是否存在一組 (p, q)，其中 p <= q，使得 sum(ap, ap+1, … aq) = s？我們可以用下面介紹的Caterpillar Method。 目錄 Caterpillar Method…
Read more →最大子數列問題 (Maximum Subarray Problem) 及 Kadane's Algorithm
給定 A = [a0, a1, …, an-1]，如何使得 slice 的和 sum(A[p], A[p+1], …, A[q]) 有最大值 (slice長度可以為0) ？有個知名的 Kadane’s Algorithm 可以解決這個問題。 目錄 Kadane’s…
Read more →Min Abs Sum
給定A = [a0, a1, …, an-1]，如何找到一組S = [s0, s1, … sn-1], sj ∈ {-1, 1}, 使得abs(sum(ai * si))有最小值？關鍵在於對於 A 中的每個元素 a 能夠產生的 sum…
Read more →Sum of subarray 的實用解題技巧
當遇到 sum of subarray 相關的問題時，有個很實用的解題技巧：所有的 sum of subarray 都可以用 Si - Sj 組出來，其中 Si = a0 + a1 + … + ai。 目錄 問題: 0 mod n Sum Subset Problem…
Read more →Webpack基礎設定 (支援ES6、ESLint)
這篇教學介紹React專案的基本webpack設定。包含支援ES6需要的Babel，程式碼風格檢查的ESLint和開發工具 webpack-dev-server。 目錄 專案資料夾結構 Overview Webpack基本設定 Babel設定 ESLint…
Read more →正規化 (Normalize) Redux State
這篇教學介紹Redux如何用正規化(normalization)的方式，儲存從API取得的遠端資料。 目錄 TL;DR Normalize the State Shape reducer reducer Why Normalized State? Reducer with…
Read more →Redux Middleware Chain
這篇教學主要是整理Redux middleware的原理，如何實作，以及如何理解middleware chain的順序。 目錄 Middleware 如何實作Middleware logger Redux Promise Apply middlewares Middleware…
Read more →瀏覽器渲染效能最佳化 (Browser Rendering Optimization)
這篇教學簡介瀏覽器轉譯/渲染(Browser Rendering)的原理，如何使用Chrome DevTool找到效能瓶頸，以及如何避開導致效能瓶頸的作法。 Critical Rendering Path What Goes Into One Frame? Layout and…
Read more →Redux Selector
這篇教學介紹Redux中常用到的Selector函式，其作用是將容器中特定狀態取出。 在裡面，通常會將state經過一番計算後轉換成props，例如：經過filter過濾後的todos。我們通常會寫一個作轉換的工作： 問題是，使用者必須要記得state…
Read more →Redux 如何和 React Router 搭配使用
這篇教學會介紹如何從React元件的props拿到url資訊，以及如何使用React Router內建的的HoC 拿到url資訊。 React Router是一個管理URL的庫，能根據瀏覽器的URL決定要渲染哪些元件。 React Router…
Read more →在 React 元件中使用 d3 圖表
這篇教學將會介紹d3的基本概念，以及分享如何在React元件內整合d3圖表。 目錄 範例 d3簡介 Data Binding Enter, Update and Exit Update enter() exit() 回到正題 - 在React中嵌入d3圖表 React Refs…
Read more →CSS 平行四邊形 (parallelogram)
這篇教學會介紹如何用純CSS做出平行四邊形的標籤。 稍稍改變一下平淡無奇的長方形標籤，或許能替網頁增添一些活潑的感覺？實際在網頁中運用大概像這樣子： （參考資料：CSS Secrets） 目錄 用CSS transform製作長方形 結論 參考資料 用CSS transform…
Read more →CSS iOS 風格開關 (CSS iOS toggle)
這篇教學要介紹如何用純CSS把checkbox做成iOS風格的開關(toggle)。最近在CSS Secrets裡面看到這樣的技巧，覺得還滿酷的！決定分享給大家。 目錄 Checkbox Hack iOS Toggle Button Positioning Change…
Read more →CSS 氣泡提示框 (tooltip/speech bubble/bubble with arrow/balloon)
前端元件hover的時候顯示氣泡提示框(tooltip/balloon)是常見的效果，也有許多現成的library如Balloon.css可用。這篇教學教你如何用純CSS手刻。 目錄 氣球的形狀 如何定位 Hover…
Read more →JavaScript new 運算子及建構函式的用法
JavaScript 中可以使用 JavaScript new 運算子及建構函式建立物件。定義建構函式的必要步驟：1. 宣告建構函式 2. 在建構函式中，將物件屬性定義在 this 上 3. 將物件方法定義在建構式的 prototype 屬性裡 4. 用 new…
Read more →如何用 Github Pages 和 Jekyll 快速建立免費部落格
這篇教學將介紹如何用Github Pages和Jekyll搭建部落格。其優點是快速、免費、免架站，相較於wordpress客製化彈性高，更支援用Markdown語法寫文章。推薦給廣大工程師朋友們！ 目錄 簡介 GitHub Pages Jekyll…
Read more →