把聊天室做成一個套件：Clouda 的前端架構與運作方式
約 7 分鐘
Clouda（雲寶寶）是我做的一個 AI 聊天室小工具，裝進各個專案之後，畫面右下角會多一顆按鈕，點開就能跟 AI 對話。後端由同事負責，我做的是前端，包括怎麼用 React 跟 Shadow DOM 做成一個不會跟宿主打架的元件、用 Vite 打包成套件發佈到私有的 npm registry、用 data 屬性當設定介面，還有怎麼用 fetch 接 SSE 串流把回覆一個字一個字印出來。
[Data Structures] Hash Tables
約 2 分鐘In this article, we’ll explore the hash table data structure, which provides fast data access using keys. We'll build our own hash table step-by-step in JavaScript, covering how it stores data, handles collisions, and retrieves values.
[Data Structures] Binary Search Trees
約 4 分鐘In this article, we'll dive into the fundamentals of Binary Search Trees (BST), a powerful data structure that organizes data for efficient insertion, search, and traversal operations. Starting from the basic concepts, we’ll explore the recursive call stack, how to insert and search for values, and cover multiple traversal methods, including depth-first (in-order, pre-order, post-order) and breadth-first traversals. By the end, you’ll understand BST operations and have the code to create and manipulate a Binary Search Tree in JavaScript.
[Data Structures] Linked Lists
約 3 分鐘Linked lists are a fundamental data structure in computer science, offering flexibility in managing and organizing data. This article introduces linked lists in JavaScript, explaining their structure, basic operations like adding and removing nodes, and how to search within them. Perfect for beginners, this guide takes you step-by-step through building and understanding linked lists, making complex concepts accessible to everyone.
[Algorithms] Max Stock Profit
約 1 分鐘In this article, we’ll walk through the Max Stock Profit algorithm, which helps determine the maximum profit achievable from buying and selling a stock in a single day based on its changing prices. This common algorithm problem often appears in technical interviews and requires a mix of array handling and optimization techniques.
[Algorithms] Merge Sort
約 1 分鐘In this article, we’re covering Merge Sort, an efficient sorting algorithm that breaks down arrays into smaller parts, sorts them, and merges them back into a single sorted array. Merge Sort is often highlighted in technical interviews, so understanding its mechanics is essential.
[Algorithms] Bubble Sort
約 1 分鐘In this article, we’ll dive into Bubble Sort, a straightforward sorting algorithm often encountered in coding interviews. We’ll discuss how it works, go through an example, and examine a JavaScript implementation of the algorithm.
[Algorithms] Sieve Of Eratosthenes
約 1 分鐘Discover the Sieve of Eratosthenes — an efficient algorithm to find all prime numbers up to a given limit. We'll cover the steps involved, optimizing runtime, and breaking down the code for a clear understanding.
[Algorithms] Fibonacci vs. Memorized Fibonacci
約 2 分鐘In this post, we'll explore two different implementations of the Fibonacci sequence: the classic recursive version and an optimized version using memoization. Both methods generate the same result, but their efficiency is quite different, especially when dealing with large numbers.
[Algorithms] Binary Search
約 1 分鐘Binary Search algorithm is a fundamental technique in computer science. It's widely used in various applications and is a common topic in technical interviews. Understanding binary search is crucial because it offers a fast way to find values in sorted lists.
[Algorithms] Two Sum
約 2 分鐘The Two Sum problem is a popular coding challenge that involves finding pairs of numbers in an array that add up to a specific sum. This is a great problem to practice your problem-solving skills and reinforce your understanding of hash tables for improving time complexity.
[Algorithms] Mean Median Mode
約 1 分鐘Learn how to calculate the mean, median, and mode of a number array in JavaScript with a reusable, functional approach. We’ll split the task into easy-to-follow steps that make this algorithm both efficient and beginner-friendly!
[Algorithms] Reverse Array In Place
約 1 分鐘Learn how to reverse an array in place with this efficient, space-saving technique. In this post, we’ll explore swapping elements directly within the original array without creating a new one, practicing some key array manipulation skills along the way. Perfect for those looking to level up their JavaScript skills!
[Algorithms] Reverse Words in a Sentence
約 1 分鐘Today, we’re tackling the Reverse Words algorithm! This is a fun little challenge where we take a sentence, flip each word individually, and put the sentence back together—no messing with the word order, just reversing each word. Let’s dive in!
[Algorithms] Caesar Cipher
約 1 分鐘The algorithm we'll explore in this post is the Caesar Cipher. This classic encryption technique shifts each letter in a string by a specified number of places in the alphabet.
[Algorithms] Is Palindrome
約 1 分鐘The 'Is Palindrome' algorithm checks whether a string reads the same forward and backward, ignoring spaces and punctuation. It's a simple yet classic algorithm that can be easily implemented with JavaScript string and array manipulation.
[Algorithms] Harmless Ransom Note
約 1 分鐘In this post, we'll break down a common algorithm question you might see in coding interviews: the Harmless Ransom Note. It’s a great example to understand how to manipulate strings and use objects as hash tables for performance improvements. Plus, it’s relatively straightforward but offers a solid practice in understanding time complexity.
[Algorithms] Time Complexity & Big O Notation
約 2 分鐘Hey there, fellow coders! Today, we're diving into a concept that's super important for anyone who writes algorithms: Big O notation. It helps us understand how an algorithm performs as the size of its input grows. Think of it as a way to measure the efficiency of our code. Let’s break it down into bite-sized pieces, along with some relatable examples.
[Algorithms] Fizz Buzz
約 1 分鐘Fizz Buzz is often the very first algorithm people learn. It's a classic and fundamental concept, serving as an entry point into algorithm learning — simple yet fun!
JavaScript Object Snippets
約 1 分鐘開發上，我們常常對物件做各種操作與應用，本文記載 Sean 常用到的物件操作方式。
The JavaScript Array Methods Handbook
約 1 分鐘健忘的 Sean 常常需要查看的陣列處理方法小抄。
Sending Http Requests feat. Star Wars API
約 1 分鐘本文使用 Star Wars API 為例示範 React 如何串接第三方 API。
ES6 Class & Extends 與 ES7 現代寫法
約 1 分鐘本文介紹 ES6 Class 實體與繼承的概念，以及進入 ES7 後出現的簡化寫法。
瞭解 Spread & Rest Operator 與 Destructuring 的用法
約 2 分鐘Spread 與 Rest 運算子都是寫成三個點，而它的身份就取決於我們在哪裡使用它，一起來看看吧。
ES6 Modules - Exports & Imports
約 1 分鐘在現代前端當中，模組化是相當推薦而且實用的做法，為了要存取其他模組，我們需要透過 export 讓模組可以被引用，並使用 import 來存取模組。
JavaScript ES6 箭頭函式與傳統函式的差異
約 2 分鐘本文內容主要探討 JavaScript ES6 中的「箭頭函式」的相關概念。
Understand JavaScript #25 解析 toString() 方法 ft. typeof, instanceof
約 3 分鐘本文主要內容為探討 JavaScript 中 toString() 方法的相關知識，以及關鍵字 typeof 和 instanceof 的使用。
Understand JavaScript #24 ES6 Class
約 2 分鐘本文主要內容為探討另一個建立物件和設定原型的方法「ES6 Class」的相關知識。
Understand JavaScript #23 使用 Object.create 建立多層繼承
約 3 分鐘本文主要內容為探討「Object.create」的相關知識以及搭配使用的 Polyfill。
Understand JavaScript #22 內建的函式建構子
約 3 分鐘本文主要內容為探討「JavaScript 內建的函式建構子」的相關知識。
Understand JavaScript #21 使用建構式自定義原型
約 3 分鐘本文主要內容為探討關鍵字 new 與函式建構子的相關知識，內容包含關鍵字 new、函式建構子，以及函式的原型屬性。
Understand JavaScript #20 物件導向與原型繼承
約 3 分鐘本文主要內容為探討「原型」的相關知識，包含原型繼承、原型鏈、基本物件，以及資源庫 Underscore 裡面的 Reflection 與 Extend 模式。
Understand JavaScript #19 Functional Programming ft. Underscore, Lodash
約 3 分鐘本文主要內容為探討「函式程式設計」的相關知識，透過一個經典的範例玩轉 Functional Programming，也會提到 Underscore 與 Lodash 這兩個有名的資源庫。
Understand JavaScript #18 bind()、call() 與 apply()
約 3 分鐘本文主要內容為探討 bind()、call() 與 apply() 的相關知識，這三個函式都與 this 有關，可以用來控制 this 變數。
Understand JavaScript #17 回呼函式 (Callback Function)
約 1 分鐘本文主要內容為探討「回呼函式」的相關知識，其實我們可能已經用過回呼函式的概念了，像是 setTimeout 或是 jQuery 事件就是在使用閉包與回呼的概念喔。
Understand JavaScript #16 函式工廠 (Function Factory)
約 2 分鐘本文主要內容為探討「函式工廠」的相關知識。閉包有很多有用的地方，像是函式工廠就是用閉包建立的模式，文章內容也會包含重載函式、一級函式、執行環境等概念。
Understand JavaScript #15 閉包 (Closure)
約 3 分鐘本文主要內容為探討「閉包」的相關知識，這是 JavaScript 的一個重要觀念，會用到我們之前學到的所有概念，包含一級函式、執行堆、執行環境等等。
Understand JavaScript #14 立即呼叫的函式表達式 (IIFEs) 與安全程式碼
約 2 分鐘本文主要內容為探討「IIFE」的相關知識，理解為什麼 IIFE 會被應用在各種大型框架或資源庫裡面，並且能幫助撰寫安全的程式碼。
Understand JavaScript #13 函式參數與 arguments、spread
約 1 分鐘本文主要內容為探討「函式參數」的相關知識，包含預設值、arguments 關鍵字、spread parameter 等等。
Understand JavaScript #12 物件 × 函式 × this
約 3 分鐘本文主要內容為探討物件、函式，以及那個令人困惑的「this」的指向問題與相關知識。
Understand JavaScript #11 傳值和傳參考
約 2 分鐘本文主要介紹「傳值和傳參考」的概念，這對於 JavaScript 的開發與除錯會很有幫助，如果不知道這些觀念，可能會導致一些很難 Debug 的奇怪問題。
Understand JavaScript #10 函式就是物件 (Functions Are Objects)
約 4 分鐘本文主要內容為探討「函式物件」的相關知識，包含「一級函式」這個讓 JavaScript 適合撰寫 Functional Programming 的特性，以及函式陳述式、函式表達式、匿名函式等重要觀念。
Understand JavaScript #9 物件實體語法 (Object Literal Syntax)
約 4 分鐘本文主要內容為探討「物件」的相關知識，包含成員取用運算子、物件實體語法、偽裝命名空間，與 JSON 資料格式。
Understand JavaScript #8 運算子 (Operators)
約 5 分鐘本文主要內容為探討「運算子」的各種概念，能幫助我們順利除錯與瞭解可能會因為動態型別而產生的問題。
Understand JavaScript #7 型別 (Types)
約 3 分鐘JavaScript 很特別，它與其他程式語言不同，尤其是處理變數資料與型別的部分。本文主要內容為「型別」的相關知識，包含動態型別、純值、陣列，至於物件則會紀錄在其他筆記中。
Understand JavaScript #6 Event Loop
約 1 分鐘Event Loop 負責排程處理同步與非同步的工作，有了這位任務管理員，你的網站才不會卡卡的喔。
Understand JavaScript #5 範圍鏈 (Scope Chain)
約 4 分鐘範圍鏈是什麼，這個專有名詞聽起來好像很難懂，但是其實它很好理解呢。
Understand JavaScript #4 Execution Context - How JS Works Behind The Scenes
約 4 分鐘本篇主要介紹 JavaScript 的運作過程，可以瞭解到 JavaScript 底層在做的事情，以及程式碼處理與執行的過程，還有一些我們必須理解的專有名詞。以下一一仔細跟大家說明 (๑•̀ㅂ•́)و✧
Understand JavaScript #3 Name-Value Pair
約 1 分鐘本文聊聊比較輕鬆的主題 Name-Value Pair 或稱 Key-Value Pair 鍵值對，以及它跟物件的關係。
Understand JavaScript #2 語法作用域 (Lexical Scope)
約 1 分鐘JavaScript 是屬於語法作用域（靜態作用域），而靜態作用域與動態作用域這兩者有何不同呢。
Understand JavaScript #1 How JS Reads Code
約 2 分鐘第一篇文要先來說說 JavaScript 是如何運行的，它是透過什麼去解析程式碼，而在這個過程中有哪些觀念呢。
Understand JavaScript #0 目錄
約 1 分鐘這個系列筆記的主要內容是 JavaScript: Understanding the Weird Parts 課程的學習筆記，主要在講解 JavaScript 背後的運作原理與邏輯。
如何避免在按下 Enter 時自動換行
約 2 分鐘使用 Contenteditable 送出輸入訊息時，我們會監聽 Enter 按鍵來換行，但是這個動作會觸發換行效果，導致送出的訊息多出一個空行，這個問題該怎麼解決呢？
使用 vue-tribute 實作標記功能
約 3 分鐘這篇文章主要說明如何透過 vue-tribute 來實作網頁上的標記功能（@mention），先備知識必須要已經基本會使用 Vue。
JavaScript var & let & const 的特點與差異
約 4 分鐘本篇文章介紹 JavaScript ES6 裡面 let 與 const 的重要觀念，以及使用上的注意事項。
NUK JavaScript #5：AJAX 撈取資料
約 1 分鐘這次要介紹如何用 AJAX 撈取資料。
NUK JavaScript #4：陣列、物件、for
約 1 分鐘此篇文章介紹陣列、物件、for 迴圈。
NUK JavaScript #3：運算子、if-else 條件式
約 2 分鐘到了第三篇，我們要介紹運算子以及條件式，之後會進入物件與陣列，一步一步學習 JS 的基礎。
NUK JavaScript #2：函式 (Functions)
約 2 分鐘原先想將 Function 與上一篇的 let 與 const 合併在同一篇，但由於篇幅會有些過長，因此決定另外寫一篇文章介紹函式。這篇文章會介紹函式的使用方式與觀念。
NUK JavaScript #1：let、const、型別
約 3 分鐘這學期終於選到 JS 課程了，很期待但又怕很難哈哈。總之就整理筆記，幫忙加深印象吧，往後複習期中期末考試應該有幫助。此篇將會介紹環境安裝、型別，與 ES6 的 let、const。
JavaScript 兩個等號與三個等號有什麼不同
約 2 分鐘過去學過 Java、C 與 Python 都沒遇過這問題，沒想到在學習 JavaScript 時會遇到三等號與雙等號的問題，滿新奇的！