在 Next.js 中串接 Google Maps API
在現代 Web 開發中，地圖服務是許多應用的重要元件。本文將介紹如何在 Next.js 中使用 Google Maps API，並展示一個包含地圖標記和互動功能的範例。
技術筆記
共有 132 篇相關文章
Next.js 15 (App Router) - Rendering
Next.js 從 Pages Router 轉換到 App Router 後，資料獲取和渲染策略有了重大改變。本文將詳細解說如何將 Next.js 12 的 CSR、SSG、ISR 和 SSR 模式轉換到 App Router 架構中。
Next.js 15 Featured-based Folder Structure
分享近期針對 Next.js 專案所設計的 Feature-based 資料夾結構，這個架構可以幫助提升模組化、可維護性，與擴展性，覺得相當不錯。
[Data Structures] Hash Tables
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
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
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
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
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
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
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
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
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
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
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
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
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
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
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
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
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
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!
使用 TanStack Query 輕鬆處理 HTTP Requests
TanStack Query 可以幫助我們發送 HTTP Request 也就是串接 API，讓前端畫面與後端資料能夠溝通與同步。沒錯！這些事情透過 useEffect 以及 Fetch 或 Axios 就能做到了，只是 TanStack Query 大幅地簡化了這方面的 Code，一起來看看 TanStack Query 如何提升開發者體驗吧。
為你的 React Apps 加上動畫效果
沒有動畫效果的 Web Apps 不是說不好，但就是在完整度上少了一點什麼。如果可以適當添加一些動畫效果，除了可以讓網站看起來更加用心，也可以吸引使用者持續瀏覽。本文會介紹前端加入動畫效果的幾種方式，包含 CSS Transitions、CSS Animations，以及 Framer Motion 這套動畫效果 Library。
React Code Reuse - Higher Order Component (HOC)
本篇文章會透過一個簡單的 Functional Components 的範例，讓大家瞭解 React Higher Order Component (HOC) 的實作方式。
[Note] TypeScript Course for Beginners - Learn TypeScript from Scratch!
這個 TypeScript 學習大綱包含從基礎到進階的概念，涵蓋了 TypeScript 的基本語法、編譯器配置、高級類型和特性、泛型、裝飾器、命名空間和模組，以及 TypeScript 與其他工具的集成。此大綱適用於想要全面學習 TypeScript 的開發者，從基本開始，然後深入理解 TypeScript 的高級功能。
Next.js v12 到 v14 版本升級紀錄！有何不同？
專案一直以來都是使用 Next 12 以及 Pages Router 進行開發，不久前 Next 發表了 v14，其中 v13 與 v14 都陸續新增了一些概念，最重要的就是 App Router 成為默認的架構方式，而近期 App Router 的功能已經大致完善，因此打算試用看看。族繁不及備載，本篇文章只有記載本身學習與使用 Next 14 的體驗，以及瞭解到的幾項改變。
透過 Next.js API Routes 新增後端程式碼，實現 Fullstack React
其實專案使用 Next.js 的話，可以考慮直接在 Next 專案中的 API Routes 進行後端的開發，只是這次開發公司專案是第一次用，當初並沒有規劃這一塊，所以目前專案完成上線後，沒有安排進行這方面的重構，不過我們還是可以學習一下怎麼在 Next 這個框架中完成全端開發。
使用 Next Image 最佳化圖片
Next.js 的一大特點就是已經即成了許多便利的功能，包含簡便的路由配置、圖片優化、效能優化、打包優化等等，今天來看看圖片優化是怎麼個做法。
使用 Prettier 與 ESLint 自動對 JavaScript 排版與除錯
近一兩年專案都是使用這套 Linter 與 Formatter 的組合拳，IDE 使用 VS Code 的話歡迎參考看看。
Next.js 的 "_document.js" 檔案使用紀錄
我專案都快成型了，老實講這個 document.js 還真的沒什麼修改到，秉持著自己專案內不能有一丁點自己不懂的東西的想法，來探探這個底線 document.js 是個什麼玩意兒。
一起來試試看 NextJS 的 "useSWR" Hook 吧！
最近看 React Developer Roadmap 發現 API Calls 人家推薦 SWR 這套工具，好奇到底是什麼功能居然能撼動 Axios 的地位？試用了一下發現還真有點意思！
Next.js 預先渲染頁面與資料取得方式
Next.js 除了可以用來做 SSR 之外，其實也可以取代原本的 React 做 SPA，或是取代 Gridsome 做 SSG 靜態網站，也可以根據需求混合生成頁面，稱為 ISG，第一次聽到這麼多種，腦子差點打結了 XD
基於檔案的 Next.js 頁面路由
今年下半年接了一個公司的對外專案，因此有 SEO 需求，不知道是不是靜茹給我的勇氣，讓我主動提出可以使用 Next.js 的 SSR 來架構新專案，總之就是且戰且走吧，從零開始一邊做一邊學。
React Router V6 - Form & Action
上一篇介紹了 React Router V6 的 Loader，本文會介紹另一個重要的新功能 Action 與表單處理方式。
React Router V6 - Fetch data with Loader
上一篇介紹了 React Router V6 的基本架構，包含導頁、動態路由與巢狀路由，本文則會介紹 V6 全新的重要功能 Loader。
React Router V6 - Setup Routes
React Router 團隊最近又來一次全面升級，新增了許多功能，特別是 Loader 功能實在是讓我大開眼界。除此之外，我發現他們的文件寫得很好，基本上只要跟著走一遍 Tutorial 就可以掌握新版的寫法調整與新功能哩。
JavaScript Object Snippets
開發上，我們常常對物件做各種操作與應用，本文記載 Sean 常用到的物件操作方式。
The JavaScript Array Methods Handbook
健忘的 Sean 常常需要查看的陣列處理方法小抄。
[React] Debouncing with useCallback Hook
本文介紹 React 當中 useCallback 這個 Hook 的使用概念，並且結合 Lodash 實作 Debouncing Search 的功能幫助理解 useCallback 的作用。
為什麼在 Ant Design 使用 styled-components 傳遞 Boolean Props 會出現警告
最近要使用 styled-components 包裝 Ant Design 的元件時，想透過傳遞 Boolean 值的 props 來製作動態樣式，結果是成功了但是卻一直跳出警告訊息，這是為什麼呢？
為什麼 React State 在 Event Listener 中沒有正確更新
最近在使用 Ant Design 的 Table 元件時，想要監聽 Scroll 事件去更改呈現的欄位，但是發現 State 成功更新後，Table 所使用的 State 卻沒有跟著更新，這到底是怎麼回事哩。
Deploying React Apps over Firebase Hosting
有很多做法能夠部署 React 專案，本文會介紹如何透過 Firebase Hosting 這項服務來部署一個 SPA 專案。
升級 React Router v6 筆記
本文為 React Router 升級第 6 版的筆記。
瞭解 React Router V5 基礎知識
現代前端開發常見的 SPA 是指頁面 URL 切換時，不必重新 Fetch 新的 HTML 檔案，且會阻止瀏覽器的默認行為，直接去更新畫面上的內容。在 React 技術線當中，可以藉由 React Router 幫助我們完成 SPA 下的頁面切換，根據 Route 的更改呈現出不同的元件。
Redux Toolkit with Action Creator Thunk
本文介紹 Redux Toolkit 當中的 Action Creator Thunk 設計，透過 Thunk 幫助我們更好地處理非同步邏輯。
使用 Redux Toolkit 更有效率地撰寫 Redux
本文介紹 Redux Toolkit 的基本使用方式，因為我是從 Vue 轉 React 的開發者，第一眼看到 Redux Toolkit 真的眼睛為之一亮！裡面使用到的觀念與 Vuex 相仿，非常好理解，撰寫的結構也相當有條理喔。
React Redux with Class-based Components
本文介紹 React Redux 於 Class-based Components 的使用。
React Redux with Functional Components
本文介紹 React Redux 於 Functional Components 的使用。
React Redux 基本配置與概念介紹
本文介紹 React Redux 的概念與基本設定方式，並且探討何時適合使用 Redux 更勝於 React Context API。
React Code Reuse - Custom Hooks
本文介紹為什麼我們要建立並使用 Custom Hooks，以及講解如何撰寫創建自己的 Hooks，讓我們在開發 React 專案時更好地複用各種邏輯與程式碼。
在 React Class-based Components 中使用 Error Boundary 處理錯誤
本文介紹 React Class-based Components 中 Error Boundary 的使用方式。
React Class-based Components 的生命週期（Lifecycle）
本文介紹 React 的 Lifecycle，這是只有 Class-based Components 才有的喔。
Introduction to Class-based Components
本文介紹 React Class-based Components 的使用方式。
Sending Http Requests feat. Star Wars API
本文使用 Star Wars API 為例示範 React 如何串接第三方 API。
Introducing useMemo
本文介紹 useMemo 的使用方式。
Introducing React.memo
本文介紹 React.memo 的使用方式，以此減少元件不必要的渲染。
使用 React Context 處理全域狀態
為了避免 Props Drilling，React 提供了 Context API 幫助我們解決這樣的問題，本文會介紹 Context API 的基本用法，包含 createContext、Provider、Consumer、useContext 等概念。
更強大的 React 狀態管理工具 useReducer Hook
在 JavaScript 的世界中，陣列處理方法之一的 reduce 就是將多個值陸續處理累積後成為新的單一值，而本文要介紹的 useReducer 也有類似的概念，透過這個更強大的狀態管理 Hook，可以將複雜的 State 處理完成後，返回一個單純的值。
Understanding React's useEffect Hook
本文介紹何謂 Side Effect，以及我們該如何使用 useEffect 處理這些副作用。
Forms in React
本文介紹如何在 React 中使用 Forms 表單相關元素。
關於 React Refs 的概念，以及如何 Forwarding Refs
本文會介紹 React 當中的 Refs，及其延伸出的 useRef 與 forwardRef 的使用方式。
Cleaner Code with React Fragments & Portals
透過 Fragments 與 Portals 讓我們可以使用 React 撰寫出更乾淨的 HTML Code。
Styling React Components
本文介紹 React 中基本的樣式撰寫方式，包含 Inline Style、CSS Modules、styled-components 等方式。
[React] Lifting The State Up
Props 的用途是讓父子元件之間傳遞狀態，使子元件也能使用到父元件定義的狀態，而子元件的狀態也能透過 Lifting State 的方式提升給父元件使用。
[React] 正確地使用 State 與 useState Hook
本文介紹 React 中 State 的概念，包含 useState Hook、Snapshot、Lazy State Initialization 等觀念，看似簡單的狀態，其實有一些細節觀念是初學時容易忽略的。
ES6 Class & Extends 與 ES7 現代寫法
本文介紹 ES6 Class 實體與繼承的概念，以及進入 ES7 後出現的簡化寫法。
瞭解 Spread & Rest Operator 與 Destructuring 的用法
Spread 與 Rest 運算子都是寫成三個點，而它的身份就取決於我們在哪裡使用它，一起來看看吧。
ES6 Modules - Exports & Imports
在現代前端當中，模組化是相當推薦而且實用的做法，為了要存取其他模組，我們需要透過 export 讓模組可以被引用，並使用 import 來存取模組。
JavaScript ES6 箭頭函式與傳統函式的差異
本文內容主要探討 JavaScript ES6 中的「箭頭函式」的相關概念。
使用 Mockoon 快速建立 Mock APIs
因為前後端架構的問題，身為前端需要自己研究開設本地 API，否則做個畫面都得問東問西的，開發效率低到谷底。查了一下資料，發現大家幾乎都是用 JSON Server 居多，有些是使用 Postman。不過剛好發現了 Mockoon 這個工具，嘗試之後覺得真的不錯，很簡單就能上手，記錄一下操作方法。
Vue 3 Methods × Computed × Watch
本文主要內容為探討 Vue 3 的 Methods、Computed、Watch 的寫法與相關知識。
Understand JavaScript #25 解析 toString() 方法 ft. typeof, instanceof
本文主要內容為探討 JavaScript 中 toString() 方法的相關知識，以及關鍵字 typeof 和 instanceof 的使用。
Understand JavaScript #24 ES6 Class
本文主要內容為探討另一個建立物件和設定原型的方法「ES6 Class」的相關知識。
Understand JavaScript #23 使用 Object.create 建立多層繼承
本文主要內容為探討「Object.create」的相關知識以及搭配使用的 Polyfill。
Understand JavaScript #22 內建的函式建構子
本文主要內容為探討「JavaScript 內建的函式建構子」的相關知識。
Understand JavaScript #21 使用建構式自定義原型
本文主要內容為探討關鍵字 new 與函式建構子的相關知識，內容包含關鍵字 new、函式建構子，以及函式的原型屬性。
Understand JavaScript #20 物件導向與原型繼承
本文主要內容為探討「原型」的相關知識，包含原型繼承、原型鏈、基本物件，以及資源庫 Underscore 裡面的 Reflection 與 Extend 模式。
Understand JavaScript #19 Functional Programming ft. Underscore, Loadsh
本文主要內容為探討「函式程式設計」的相關知識，透過一個經典的範例玩轉 Functional Programming，也會提到 Underscore 與 Loadsh 這兩個有名的資源庫。
Understand JavaScript #18 bind()、call() 與 apply()
本文主要內容為探討 bind()、call() 與 apply() 的相關知識，這三個函式都與 this 有關，可以用來控制 this 變數。
Understand JavaScript #17 回呼函式 (Callback Function)
本文主要內容為探討「回呼函式」的相關知識，其實我們可能已經用過回呼函式的概念了，像是 setTimeout 或是 jQuery 事件就是在使用閉包與回呼的概念喔。
Understand JavaScript #16 函式工廠 (Function Factory)
本文主要內容為探討「函式工廠」的相關知識。閉包有很多有用的地方，像是函式工廠就是用閉包建立的模式，文章內容也會包含重載函式、一級函式、執行環境等概念。
Understand JavaScript #15 閉包 (Closure)
本文主要內容為探討「閉包」的相關知識，這是 JavaScript 的一個重要觀念，會用到我們之前學到的所有概念，包含一級函式、執行堆、執行環境等等。
Understand JavaScript #14 立即呼叫的函式表達式 (IIFEs) 與安全程式碼
本文主要內容為探討「IIFE」的相關知識，理解為什麼 IIFE 會被應用在各種大型框架或資源庫裡面，並且能幫助撰寫安全的程式碼。
Understand JavaScript #13 函式參數與 arguments、spread
本文主要內容為探討「函式參數」的相關知識，包含預設值、arguments 關鍵字、spread parameter 等等。
Understand JavaScript #12 物件 × 函式 × this
本文主要內容為探討物件、函式，以及那個令人困惑的「this」的指向問題與相關知識。
Understand JavaScript #11 傳值和傳參考
本文主要介紹「傳值和傳參考」的概念，這對於 JavaScript 的開發與除錯會很有幫助，如果不知道這些觀念，可能會導致一些很難 Debug 的奇怪問題。
Understand JavaScript #10 函式就是物件 (Functions Are Objects)
本文主要內容為探討「函式物件」的相關知識，包含「一級函式」這個讓 JavaScript 適合撰寫 Functional Programming 的特性，以及函式陳述式、函式表達式、匿名函式等重要觀念。
Understand JavaScript #9 物件實體語法 (Object Literal Syntax)
本文主要內容為探討「物件」的相關知識，包含成員取用運算子、物件實體語法、偽裝命名空間，與 JSON 資料格式。
Understand JavaScript #8 運算子 (Operators)
本文主要內容為探討「運算子」的各種概念，能幫助我們順利除錯與瞭解可能會因為動態型別而產生的問題。
Understand JavaScript #7 型別 (Types)
JavaScript 很特別，它與其他程式語言不同，尤其是處理變數資料與型別的部分。本文主要內容為「型別」的相關知識，包含動態型別、純值、陣列，至於物件則會紀錄在其他筆記中。
Understand JavaScript #6 Event Loop
Event Loop 負責排程處理同步與非同步的工作，有了這位任務管理員，你的網站才不會卡卡的喔。
Understand JavaScript #5 範圍鏈 (Scope Chain)
範圍鏈是什麼，這個專有名詞聽起來好像很難懂，但是其實它很好理解呢。
Understand JavaScript #4 Execution Context - How JS Works Behind The Scenes
本篇主要介紹 JavaScript 的運作過程，可以瞭解到 JavaScript 底層在做的事情，以及程式碼處理與執行的過程，還有一些我們必須理解的專有名詞。以下一一仔細跟大家說明 (๑•̀ㅂ•́)و✧
Understand JavaScript #3 Name-Value Pair
本文聊聊比較輕鬆的主題 Name-Value Pair 或稱 Key-Value Pair 鍵值對，以及它跟物件的關係。
Understand JavaScript #2 語法作用域 (Lexical Scope)
JavaScript 是屬於語法作用域（靜態作用域），而靜態作用域與動態作用域這兩者有何不同呢。
Understand JavaScript #1 How JS Reads Code
第一篇文要先來說說 JavaScript 是如何運行的，它是透過什麼去解析程式碼，而在這個過程中有哪些觀念呢。
Understand JavaScript #0 目錄
這個系列筆記的主要內容是 JavaScript: Understanding the Weird Parts 課程的學習筆記，主要在講解 JavaScript 背後的運作原理與邏輯。
使用 Quasar CLI 建構 SSR 網站
最近專案要從 SPA 改成 SSR，雖然一般而言 SSR 是在專案開發前或者開發初期就得考量，但是事情總有個萬一，俗話說的好，需求是會成長的？總之好險 Quasar 有提供建構 SSR 的方法，這對於轉換到 SSR 會減少許多麻煩。
如何避免在按下 Enter 時自動換行
使用 Contenteditable 送出輸入訊息時，我們會監聽 Enter 按鍵來換行，但是這個動作會觸發換行效果，導致送出的訊息多出一個空行，這個問題該怎麼解決呢？
使用 vue-tribute 實作標記功能
這篇文章主要說明如何透過 vue-tribute 來實作網頁上的標記功能（@mention），先備知識必須要已經基本會使用 Vue。
Vue.js 使用 v-bind 動態綁定 Class、Style 與各種屬性
本篇介紹如何透過 v-bind 指令來動態綁定屬性，這是很常用到的技巧喔，以下就來介紹各種 v-bind 綁定的用法吧！
在 Quasar 使用全域 Filter 過濾器
這篇文章會介紹如何在 Quasar 加入全域的 Filter 過濾器，讓我們在各元件之中都能直接使用過濾器。
客製化修改 Quasar Framework 元件樣式
最近在使用 Quasar CLI 開發專案，裡面有許多已經做好的元件可以使用，但是它所提供的元件是層層包裝好的，有些元件的 CSS 樣式甚至使用 important 還是難以覆寫或修改。這邊要介紹在 Quasar Framework 之中該如何強硬地修改 CSS 樣式，來客製化 Quasar 提供的元件。
使用 Vuex 模組化管理資料
本文延續上篇的 Vuex 基礎入門文章，將介紹該如何透過 Vuex 管理專案的元件與資料狀態，也會介紹如何將 Store 的資料模組化，以減少專案程式碼的重複性，並提升程式碼的可讀性。
使用 Vuex 管理資料狀態
瞭解 Vue 的指令、元件、路由配置等概念後，我們用 Vue CLI 製作的網站差不多告一段落了！然而 Vue 生態圈還有一個必備技能是 Vuex，我們現在就來把 Vuex 也加入專案，讓我們的資料狀態可以跨元件同步。
透過 CSS Animation 製作打字動畫與閃爍游標
本文介紹如何透過 CSS 來製作出打字動畫與閃爍游標，這個效果用在專案上可以添增一些亮點，視覺效果還滿不錯的，一起來試試看吧！
Vue.js 使用 Filter 自訂資料呈現格式
Vue 提供的 Filter 過濾器可用於自訂畫面資料的呈現格式，如果不是做複雜的資料處理，只是做簡單調整的話，就很適合使用 Filter。
Vue.js 使用 Emit 由內向外傳遞資訊
上一篇的 Props 是由外而內傳遞資料，而且要盡量與外層資料斷開關係，而 Emit 則是把資料由內向外傳遞。
Vue.js Props - 由外到內的資料傳遞
本篇文章介紹父子元件之間，由外到內的資料傳遞方式 Props。
Vue 生命週期 (Lifecycle)
本文簡單介紹 Vue 的生命週期，瞭解 Vue 的生命週期對於熟悉 Vue.js 會有很大的幫助。
Vue.js Methods、Computed 與 Watch 的差異
在 Vue.js 中 Methods、Computed、Watch 裡面都可以寫函式，這三種屬性有什麼差異呢？
Learn Git Branching - 學習 Git Branch 的小遊戲
Learn Git Branching 能幫助 Git 初學者領會 Git 分支背後的強大概念，對於剛開始使用 Git 的人來說，相當適合用來幫助瞭解分支使用上的各種方式。
JavaScript var & let & const 的特點與差異
本篇文章介紹 JavaScript ES6 裡面 let 與 const 的重要觀念，以及使用上的注意事項。
Vue.js v-for 使用細節
在使用 v-for 時有一些要注意的小地方，事先搞清楚這些觀念，在開發時就不會卡關哩。
Vue.js Event Modifier
在使用 Vue 的 v-on 時可以搭配修飾符，幫助我們加上一些附加作用，而 Vue 幫我們包裝好的修飾符有事件修飾符、按鍵修飾符，與滑鼠修飾符這三種。
Vue.js 呈現資料的幾種方法
建立起一個 Vue 的應用程式後，我們有 Mustache、v-html、v-text、v-model 這好幾種不同的語法可以將資料呈現到畫面上，這些方式有什麼差別，使用時又有哪些要注意的地方哩。
Git 常用指令大全
在修習六角學院的 Git 課程後所整理的指令大全，在內容與順序上有做一些調整，方便讓之後使用 Git 的時候能夠做為參考筆記。
Git 同步遠端數據庫
使用 Git 與 Github 進行團隊合作時，會利用遠端數據庫做上傳與下載，同時也會出現 Git 衝突，本篇文講解如何處理這些狀況。
Git 分支、標籤、暫存檔案
在公司或團隊中，與其他人一起分工工作時，分支 (branch) 是相當重要的觀念喔。
基本 Command 操作與 Git 指令
從大二開始接觸前端到現在也快兩年了，途中有煩人的考試，還有充滿雲組員的專題 👻 不過還是陸續學習了 HTML、CSS、jQuery、RWD、JavaScript、Bootstrap，而現在終於要回頭補上 Git 了！雖然目前用 Github Desktop 也可以完成大部分需要的動作，不過 Git 也是遲早要學會的東西，剛好最近的進度告一段落，就順便學個 Git 當作休閒放鬆一下吧。
NUK JavaScript #5：AJAX 撈取資料
這次要介紹如何用 AJAX 撈取資料。
NUK JavaScript #4：陣列、物件、for
此篇文章介紹陣列、物件、for 迴圈。
NUK JavaScript #3：運算子、if-else 條件式
到了第三篇，我們要介紹運算子以及條件式，之後會進入物件與陣列，一步一步學習 JS 的基礎。
NUK JavaScript #2：函式 (Functions)
原先想將 Function 與上一篇的 let 與 const 合併在同一篇，但由於篇幅會有些過長，因此決定另外寫一篇文章介紹函式。這篇文章會介紹函式的使用方式與觀念。
NUK JavaScript #1：let、const、型別
這學期終於選到 JS 課程了，很期待但又怕很難哈哈。總之就整理筆記，幫忙加深印象吧，往後複習期中期末考試應該有幫助。此篇將會介紹環境安裝、型別，與 ES6 的 let、const。
JavaScript 兩個等號與三個等號有什麼不同
過去學過 Java、C 與 Python 都沒遇過這問題，沒想到在學習 JavaScript 時會遇到三等號與雙等號的問題，滿新奇的！
CSS 盒模型 (Box Model) - 讓版面控制更容易
自己計算元素的寬高真的很麻煩，很怕不小心漏算了 1 px，讓畫面不整齊…還好有盒模型幫我控制元素的各種寬高，使用過的都說讚，我也已經回不去了！
Operating System: Synchronization
本文介紹作業系統「同步」的概念。
Operating System: Scheduling
本文介紹作業系統中「排程」的基礎概念，主要是在講四種演算法 FCFS、Priority Scheduling、SJF、RR，並說明各演算法延伸出的概念。
Operating System: Multi-programming
本文介紹作業系統 Multi-programming 的概念。
Operating System: Process
Program、Process、Thread 傻傻分不清楚？本文介紹作業系統 Process 的概念。
Operating System: Introduction
覺得之前課堂上講的 OS 很抽象，因此打算寫個筆記複習，考試前也多少有幫助吧！本文介紹作業系統的定義以及基本概念。