Jimmy

JavaScript 中各種型別的判定

最近在寫一些 JavaScript 的題目，才發現 JavaScript 中有些東西的型別實在是滿奇怪的，或是每個 library 或 framework 定義不同，實作出來的型別也會不同，所以稍微整理了一下在 JavaScript 中各種型別的判定。

JavaScript iterate object 的時候到底有沒有順序性

一直以來，都知道 JavaScript 的 object 在 iterate 的時候並不會保證順序，也因此就一直以為是沒有順序的，直到最近仔細看了 MDN 的文件才發現其實是有某種順序性的。 這裡的順序指的是 iterate object 的順序，包含：for…in, for…of, Object.keys(), Object.values()。

如何用 cloudflare-create CLI（C3）快速建立前端專案並部署到 Cloudflare Pages

Cloudflare 的 cloudflare-create CLI（簡稱 C3）提供了許多前端框架的 templates 讓開發者們可以快速建立前端專案，包含 Next.js, Nuxt, React, Vue, Angular, SvelteKit 等等，可以參考，裡面有所有支援的框架。

如何減少 storybook 在 github actions 上的時間 70%

最近在重寫公司的專案，在整合 storybook 到 CI 時好好研究了一番，發現有些方法可以大幅降低在 CI 上跑的時間，於是就稍微整理了一下。 本篇文章的 repo 在，可以直接 clone 下來看 commit 會比較清楚！ 1. 專案建置 可以直接切到 的 branch，會看到專案初始化後的環境（vite + react + storybook）。 首先建立一個簡單的專案，讓我們等等可以

你可能不懂 npx

好吧，也有可能只有我不懂 🤣 最近在深入研究一些前端的技術，才發現一直以來對 npx 的理解好像有一些誤解，於是花了點時間釐清一下錯誤的觀念。

網站圖片的救星 - Cloudflare Images & Cloudflare Polish

不知道大家是不是跟我有一樣的問題，在處理網站的圖片時，希望可以根據使用者瀏覽器支援圖片的檔案種類來回傳支援度最高的圖片格式，ex: 使用者使用最新版本的 chrome 瀏覽器，最高支援的圖片檔案格式為 avif 檔，那我就希望 server 可以回傳圖片的 avif 檔給使用者。之前在閱讀 這本書才發現，HTML 的 picture tag 可以支援不同的圖片格式，當瀏覽器不支援指定的圖片格式時，

安裝 Rust 時遇到 Error: curl: (4) A requested feature, protocol or option was not found built-in in this libcurl due to a build-time decision.

curl: (4) A requested feature, protocol or option was not found built-in in this libcurl due to a build-time decision.

Linux Node.js 的升級與安裝

最近在處理公司產品的套件升級，發現滿多套件都依賴 Node.js，需要先升級機器的 Node.js 才能進行後續的處理，這篇文章就以 Ubuntu 為例，筆記一下在 Linux 中升級 Node.js 的方法。 如果擔心直接升級機器的 Node.js 的話，我滿推薦先用在自己的電腦開 Linux 的 VM 來做一些測試。

TypeScript 筆記 - 常見的 types

這篇來簡單筆記一下 TypeScript 中常用到的 types，以及常見的資料結構要怎麼用 type 來表示。

TypeScript 筆記 - 那些你可能不知道的 private 特性

一般來說，我們會預期 class 裡 private 的 property 在被實體化為 object 後，無法被存取，然而最近在研究 TypeScript 才發現，原來最常見的寫法其實是可以透過其他方法存取到這個 property 的。

TypeScript 筆記 - Enum

Enum 用來宣告一群 const，也就是一些不會變動的值，比較常用到的地方像是：處理狀態（success, processing, failed）、使用狀態（active, inactive, deleted）、角色（admin, general user）等等。

TypeScript 筆記 - Type Assertion（型別斷言）

Type assertion 用來告訴 TypeScript 某個 value 或 variable 是某個更具體的型別。

TypeScript 筆記 - Function Overloading

Function Overloading 是某些物件導向程式語言支援的語法，最常見的有 C++, C#, Java 等等，而 TypeScript 也支援 Function Overloading 的功能。這篇就來簡單筆記一下 TypeScript 中使用 Function Overloading 的方式。

JavaScript module - CommonJS, ES Module

在 JavaScript 中，主要有兩種方式來處理 module: CommonJS 以及 ES Module，這篇簡單整理一下兩者的差別。

為什麼 js 中用 ES Module 的方式 import module 時，有時候需要 extension name (副檔名)，有時候不用？

最近在研究 js 中 module 的用法，發現在使用 ES Module 的方式 import module 時，有時候會需要 extension name，但我在工作上 import 的時候卻從來沒加過 extension name，好奇什麼時候會需要加 extension name，於是有了這篇文章的誕生。

Docker Desktop 殺手 - OrbStack 教學

對於一個開發者來說，docker 可以說是幾乎每個人都會接觸到的東西，一直以來，我都以為要在 local 上跑 docker 只有 docker 官方開發的 Docker Desktop 可以用，但目前工作上要跑的 container，不但滿耗資源，起 container 的速度也很慢，本來慢到都打算提辭呈了（誤，直到某天意外發現了一個拯救我職涯的好東西 — 1. 簡介 OrbStack 是個可以完全用來取代 Docker Desktop 的工具。

Python 教學 9 - Python Mapping Type: dict

dict 是 Python 中的 ，類似 js 中的 object，每一個 element 都由 key 和 value 組成。

Python 教學 8 - Python Set Type: Set, Frozenset

Python set 和 frozenset 常用來表示一群不重複 element 的集合，這篇文章就來介紹一下 Python set 和 frozenset。

Python 教學 7 - Python Sequence Type: List, Tuple 介紹

Python 有兩個較常用的 sequence type：list 和 tuple，有些文章雖然也會把 string 列為 sequence type，不過嚴格來說，string 算是另一種類別的 sequence - ，再加上有在另外一篇文章介紹過 string 了，所以這邊就不再提了。

Python Generator 介紹

Python generator object 其實是 iterator 的一種，所以一樣有 iterator 的特性： - 只能 iterate 一次 - 可以用 next function 取得 iteration 的下一個 item 1. 宣告 Python Generator

Python Iterator 介紹

Python Iterator 常常會和 Iterable object 一起搞混，這篇就來介紹一下 Python 中的 Iterator。

Python Comprehension 語法 - List Comprehension, Set Comprehension, Dict Comprehension

Comprehension 算是 Python 特有的語法，可以用來宣告一些特定 object，或是對這些 object 做一些操作。 1. List Comprehension List comprehension 用來宣告 list object，或是對已存在的 list object 做一些 value 的 update。

Python Iterable Objects 介紹

Python 中有許多 function 接收的 arguments 是 iterable objects，因此就來好好瞭解一下 Python iterable object 吧！ Python 中的 Iterable Objects 如下

Python 教學 6 - Python Numeric Types - int, float

Python 中的 numeric type，除了常用的 int 和 float 外，還有 complex (複數)，不過因為複數的應用場景比較少一點，所以就先暫時忽略。

Python 教學 5 - Python String Objects

整理一下 Python 的 string object

Python 教學 4 - function, object 基本 methods, DocStrings

1. function 1.1 定義 function Python 中用 def 來定義 function，不像 JavaScript 或是 Ruby 有結尾符號，Python 中的 function 主體為下一行後所有縮排的 statements： 1.2 function 中的 variables function 在執行時會建立一個新的 symbol table

Python 教學 3 - File Handling -Read File, Write File

筆記一下在 Python 中讀寫檔案的方式 1. open Function - 針對檔案做操作 Python 提供了 open function 可以針對檔案進行一些操作： 1.1 filename 第一個參數是 filename，可以是相對路徑也可以是絕對路徑。 1.2 mode 用來決定開啟檔案的用途： 也可以決定要用什麼模式開啟檔案： 2. Read File - 讀取檔案

Python 教學 2 - 基本語法：Output, Loop, Control Flow

這篇簡單整理一下 Python 的一些基本語法：Output, Loop, Control Flow

Python 教學 1 - 環境架設 ( pyenv ) 與 Python 簡介

雖然可以直接在 Python 官網安裝特定版本，但通常 local 上如果有不只一個 Python 專案的話，使用 pyenv 會比較好管理不同專案的 Python 版本。

所以我說 X-Powered-By 這個 header 到底是什麼？為什麼大家都想把它 disabled 掉呢？

今天在看 Next.js 的官方文件時，發現有 X-Powered-By 這個 header，但文件裡也只有說明把這個 header disabled 掉的方法，並沒有說明為什麼，本來以為 Google 後可以馬上找到答案，殊不知只是查到各種 application framework disable 這個 header 的方法。

Next.js Compiler 介紹

Next.js compiler 是讓 Next.js 效能強大的重要原因之一。在了解 Next.js compiler 之前，先來談談從開發環境到部署的四個重要流程，了解這些流程才能夠知道 Next.js compiler 做了哪些事情。

為什麼 Node.js 和瀏覽器中使用 localeCompare 時，排序會不同呢？

會有這篇文的誕生是因為，最近在工作上需要處理一些字元排序的功能，想要整理成筆記，但意外發現在瀏覽器中和 Node.js 使用 localeCompare 時排序卻不一樣，於是稍微探究了一下箇中原因。

【 JavaScript 】Set 筆記

延續上一篇：，這篇就來筆記一下 Set 的用法吧！ JavaScript Set 1. 特性 - Set 內的元素不重複 - has method 可以快速檢查 Set 是否包含某元素，效能會比使用陣列的 來得好 2. 宣告 Set 基本上使用 new Set()，argument 可以為空或是 array，如果是 array，會自動把重複的元素過濾掉： 3. 操作 Set 4. 迭代 S

【 JavaScript 】Map 筆記

JavaScript Map 和 JavaScript Set 相較 Array 和 Object 算是比較沒那麼常用的資料結構，導致每次要用的時候都要去查 MDN，所以決定來筆記一下，這篇就先來筆記 Map 吧！ JavaScript Map 1. 特性 - Map 由多筆的 key-value pairs 組成，類似資料結構中的 hash - key 可以是任意的資料型態，ex: funct

Ruby 教學 10 - Ruby Class 介紹

作為一個 OOP 的程式語言，Class 可說是構成 Ruby 的核心，所有的 objects 都是由 Class new 出來的 instance，這篇就來介紹和整理 Ruby class 的特性吧。

Ruby 教學 9 - Ruby Hash Object 介紹

Ruby Hash object 類似 JavaScript 的 Map，都是由 key-value pair 組成。 1. 宣告 Ruby Hash Object 在宣告 Ruby Hash object 先來了解一下 Hash object 的特性： - keys 和 values 可以由任意 object 組成 - keys 的值不可重複 - values 的值可以重複 - 在 Hash

Ruby 教學 8 - Ruby Symbol Object 介紹以及和 String Object 比較

Ruby Symbol object 因為和 String object 有某些相似的地方，因此滿常被拿來和 String object 比較，這篇就來介紹一下 Symbol object 以及和 String object 的一些比較。

Ruby 教學 7 - Ruby Array Object 介紹

Ruby Array object 也是個很常用到的 object，再加上有許多 methods 可以對 Array object 做操作，個人認為算是最重要的一個 object。

Ruby 教學 6 - Ruby Integer Object, Ruby Float Object 介紹

在 Ruby 中，數字分為兩種 object：Integer 和 Float，分別代表整數和浮點數，兩個 Class 都是從 Numeric object 繼承而來： 1. 宣告 Ruby Integer, Float Object 1.1 Integer 誠如上面提到的，無法用 class.new 宣告新的 object instance，但可以直接在 Integer class 後面接要宣告

Ruby 教學 5 - Ruby String Object 介紹

Ruby String object 是最常用到的 object 之一，這篇就來整理並介紹一下 Ruby String object 的特性和常用的 methods 吧！

Ruby 教學 4 - Ruby Range Object 介紹

在 Ruby range 是一個連續數字或是字母的 object，常用 .. 或是 ... 來代表某個範圍，ex: 1..5，代表 1 到 5 之間的每個數字 ( 包含 5 )。 Range 常用在 method 的 argument，或是截取陣列的某一段 elements。 1. 宣告 Range Object 1.1 Range.new 誠如 提到的，Ruby 中幾乎所有東西都是由

Ruby 教學 3 - method, 基本 object 介紹

1. Methods methods 類似 JavaScript 的 function，def 開頭，end 結尾： 1.1 default return value 如果 def 和 end 之間沒有任何東西，那 default return value 為 nil 1.2 return 在 Ruby 中，method 會自動 return 最後一行，即使沒有 return 也一樣

Ruby 教學 1 - 環境架設及 Ruby 介紹

最近在學習 Ruby，稍微消化一下已經整理好的筆記，希望生出一系列教學文！

Ruby 教學 2 - 基本語法：Output, Ruby Loop, Conditions

接著介紹一下 Ruby 的一些基本語法：輸出、迴圈、條件句等等。

搜尋演算法 1 - Linear Search / Sequential Search

Linear search (線性搜尋)，又稱為 sequential search，是最基本的搜尋演算法，通常用來搜尋尚未排列的資料。

搜尋演算法 2 - Binary Search ( 二元搜尋法 )

Binary search 是在已排序好的陣列中最常用的其中一個搜尋演算法。

排序演算法筆記 4 - Merge Sort (合併排序法)

Merge Sort (合併排序法) 是第一個要介紹的 efficient sort，和前面幾個排序演算法相比雖然會複雜一些，但時間複雜度相較之下也會比較好。

排序演算法筆記 3 - Insertion Sort (插入排序法)

Insertion Sort (插入排序法) 的原理也很直觀，將要排序的元素插入已經排列好的左側陣列。Insertion Sort 原理解釋

排序演算法筆記 1 - Bubble Sort (泡沫排序法)

先來介紹最經典的 bubble sort，雖然是最經典的不過其實也有很多種寫法，接著就來一個一個慢慢解釋。

排序演算法筆記 0 - 排序演算法介紹與種類

Sorting algorithms (排序演算法) 可以說是最常用到的演算法之一，主要有兩個原因： - 任何資料在未排序前要搜尋某個元素時只能使用 linear search，從頭到尾遍歷一次，找尋目標元素，但如果是排序好的元素則可以使用 binary search, interpolation search 等搜尋演算法來查詢目標元素

排序演算法筆記 2 - Selection Sort (選擇排序法)

Selection sort 的原理如其名：每次找出最小的元素，如果找得到比現在最小的元素還小的，就和尚未排序好的最左邊元素交換，找不到則不執行動作。

資料結構筆記 4 - Binary Tree (二元樹)

1. Binary Tree 定義 Binary tree 是定義更狹窄的 tree，一棵 binary tree 的定義如下： - 每個 node 最多有兩個 subTree (也就是最多有兩個 child node) - Left subTree (左子樹) 和 right subTree (右子樹) 是有順序的，順序不能任意顛倒 - 即使某個 node 只有一個 subTree，也必須區分

資料結構筆記 3 - Tree

Tree 是最常見的 non-linear data structure，構成 tree 的基本單位為 node，以下為 tree 的定義： - **Root Node**：(根節點)為 tree 的起點，每一個 tree 僅有一個且唯一的 root node - A 為 root node - **SubTree**：每個 node 底下可以分為互不相交的有限集

資料結構筆記 2 - Stack (堆疊), Queue (佇列)

Stack (堆疊) 和 queue (佇列) 可以說是 array 和 linked-list 的閹割版本，因此個別都可以用 array 和 linked-list 來實現。

資料結構筆記 1 - Array (陣列), Linked List (鏈結串列)

資料結構大致上可以分為 linear 和 non-linear 兩種類別，其中 linear data structure 包含 array, linked-list stack, queue， non-linear data structure 包含 trees, graphs。 其中 non-linear 其實也可以用 linear data structure 來表示，因此先來介紹 linear data structure。

開箱 - 不將就的人生，值得一盞不將就的檯燈 ⎯ BenQ ScreenBar Halo

從來沒有想過，寫技術文章相關的部落格竟然也有機會接到實體產品的合作邀約哈哈，而且是我個人滿偏愛的品牌 ⎯ BenQ！ 這篇文章分為前半部的開箱文，以及後半部的「不將就生活經驗分享」，以呼應 的產品設計理念：不將就哲學 ⎯ 讓消費者不必「將就」於不夠好的產品，守護每個螢幕工作者的雙眼。

資料結構筆記 0 - 為什麼要學資料結構？

KEEP 資料結構與演算法 OUT YOUR FUCKING MOUTH！這大概是正在轉職或是剛轉職的人聽到資料結構與演算法的第一個反應吧哈哈哈！ 剛轉職的時候覺得：真的有必要學演算法和資料結構嗎？明明工作上就用不太到，感覺學這個就是單純為了面試和刷題而已。但在工作一陣子後你會發現，在不同的應用場景使用正確的資料結構，有助於效能的提升，雖然以當今的電腦效能對使用者來說並不會有太大的差別，但以一個工程師來說，把功能做到盡善盡美是必須的！

演算法筆記 0 – 演算法定義與 Big O Notation

1. 演算法定義 一般來說，符合以下這 5 種特性（Characteristics）就可以稱為演算法： 1.1 輸入（Input） An algorithm may have many inputs or no inputs at all. 演算法應該具有 0 個或多個輸入。 1.2 輸出（Output） An algorithm should result at least one outpu

解決 npm command not found 問題

從某個時間點開始，我用 npm install -g [dependency] 在全域安裝套件後，卻無法執行該套件的 cli，ex：ts-node、ng（Angular cli）等等，雖然每次都有找到解法，就是去 export 目前 npm install -g 後存在的 path 位置，但每次用套件的 cli 都要重新 export 一次實在很麻煩，昨天終於意外找到解法了🤣

git 常用指令整理

雖然已經每天跟 git 為伍了，也有把常用指令整理整理在一個 markdown 檔，但還是放到網頁上在開發的時候比較容易看~

前端工程師邁向後端之路 8 – Swagger Node.js 教學：用 Swagger 自動產生 API document

1. 為什麼需要 API document 在上一篇 寫完 API 後，接著就是要來寫 document 了，通常後端工程師寫完 API 後必須產生相對應的 API document 才能讓前端工程師知道丟什麼樣格式的 http request 才會拿到什麼樣的 http response，以 這個網站為例，他們有提供 API 給開發者串接，因此 API 的 document 就需要寫得越清楚越

前端工程師邁向後端之路 7 – 實作 Node.js RESTful API

Node.js RESTful API 在上一篇 我們設計好了我們的 API，目前 API 的示意圖如下（點圖可以放大）： 在這篇我們就要來實作 Node.js RESTful API 的部分了。

前端工程師邁向後端之路 6 – 設計 RESTful API

在上一篇 提到了為什麼需要 database migration，接下來就要開始設計 RESTful API 了！ 如果對 API 的概念還不清楚的話可以參考這篇：，如果想先試著從前端串 API 的話可以參考這篇：。 1 在沒有 RESTful API 之前 在提 RESTful API 之前我們先來說個故事：小明和小華是公司的菜雞後端工程師，兩個是同期進來的，在好不容易過了適用期之後

【 Node.js 】為什麼要使用 express bodyparser 呢？

相信很多人在 import express 的時候都知道要使用 bodyParser，否則會拿不到 request 的 body： 一直都知道要這樣用，但卻不太知道為什麼，再加上之前用 Node.js 寫 http server 的時候，在沒有用 bodyParser 的情況下去 console.log(req.body) 是 undefined，讓我又覺得更奇怪了，所以決定深入探討一下箇中原因！

【 TypeScript 】建立 Google TypeScript Style 的 Node.js 環境

之前雖然寫過 ，但並沒有導入 ESLint 和 Prettier 來決定 coding style，這篇簡單記錄一下如何建立 Google TypeScript Style 的 Node.js 環境。 Google 有將該 style guide 包成套件 ( gts ) 方便專案引入使用，因此我們直接根據 來 import google TypeScript style guide。

前端工程師邁向後端之路 5 – PostgreSQL migration：淺談 database migration ( 資料庫遷移 )？

在上一篇： 簡單用 Node.js 架設 http server 後，接著會在 Node.js 寫 API 來操作 database，在這之前我們需要先了解一下 database migration( 資料庫遷移 )，以及為什麼需要 database migration。

前端工程師邁向後端之路 4 – 用 Node.js 架設 http server

接著就要來實作用 Node.js 來架設一個 http server 了！這一系列的文章都會用 TypeScript 來寫，TypeScript 是 JavaScript 的嚴格超集，最主要的差別就是可以為變數加上型別，讓大型專案更加好維護。

前端工程師邁向後端之路 3 - PostgreSQL 教學：架設 database server

PostgreSQL 教學 在上一篇介紹完 的差別之後，接下來就要進到實作的部分了，架設一個 database server ，這篇以 PostgreSQL 為例。 PostgreSQL ( 發音：Post-Gres-Q-L ) 是一個免費且完整開放原始碼的資料庫系統，不僅是最常用的幾個 RDBMS 之一，還有針對大量數據處理推出 JSONB 的格式，算是有針對 noSQL 優化的 RDBMS。

如何一次更新 package.json 中的所有 dependencies

簡單筆記一下如何一次更新 package.json 中的所有 dependencies

前端工程師邁向後端之路 2 - 淺談 SQL NoSQL：database 簡介

根據上一篇文章：database server 可以說是 web application 不可或缺的一環，因此接下來就稍微介紹一下 database 。 database 通常分為兩大類：RDBMS ( Relational Database Management System )、 NoSQL ( Not only SQL ) ，也就是所謂的關聯式資料庫和非關連式資料庫。

前端工程師邁向後端之路 1 - server 是什麼？

http server 是什麼？ 記得剛進公司時主管問了我這麼一個問題，這看似非常基本的問題，當下我還真的答不出來。 「就是提供 http 服務的 server 呀！」聽到主管這麼說我才醍醐灌頂，後來也發現其實基本上**「 XXX server 就是代表提供 XXX 服務的 server 」**！個人覺得對一般非本科轉職的人，很難把 server 是什麼這件事情講清楚，希望可以透過這篇文章讓大家了解一般說 server 是什麼、 web 中常見的 server 以及 server 有什麼特性。

【 JavaScript 】JavaScript 效能測試的好幫手 ⏤ console.time

記得有一次想要測試一下自己 2 種 function 寫法的效能，但當時的我連關鍵字都不知道要下什麼於是作罷，直到後來偶然看到這篇文章：，才意外發現可以用 console.time 這個語法來測試 function 的效能，以下簡單介紹一下用法。

【 Angular 】Angular i18n 教學

最近因為工作需要使用到 Angular i18n 的功能，所以就決定在看 document 的過程中整理一下 Angular i18n 的一些用法和觀念。 1. 建立 Angular 專案 首先在全域安裝 Angular cli: 接著使用 Angular cli 快速建立新的專案： 2. 安裝相關套件 跑起來後會發現 Angular 把翻譯檔套使用 Angular cli 來安裝相關的套件：

【 TypeScript 】如何在 vscode 裡 debug

簡單記錄一下在 vscode 裡面如何 debug TypeScript。

【 GraphQL 】用 TypeScript 寫一個 Apollo server

這篇簡單筆記一下如何用 TypeScript 寫一個 GraphQL 的 Apollo server。

TypeScript, GraphQL, gRPC 型別整理

最近很常用到 TypeScript, GraphQL, gRPC，有時候寫 code 寫了一整天實在很容易混淆，決定來稍微整理一下這三個工具的型別。

TypeScript 物件中的 public, private, protected, static, readonly

TypeScript 中的 class 可以為屬性加上 5 種前綴來決定存取該屬性的權限 — public ( default ), private, static, protected, readonly，簡單筆記一下 5 種前綴的存取權。

【 Node.js 】 用 TypeScript 和 Express 建立一個 http server

這篇簡單整理一下如何用 TypeScript 和 Express 建立一個 http server。

JavaScript 中的同步與非同步 - Event Loop 原理

剛好最近公司讀書會報告到這個主題，就順手把 JavaScript 中的同步與非同步整理成文章了。 在說明同步與非同步的概念之前，先簡單介紹一下 JavaScript 這個程式語言。

API 是什麼 ? 最適合前端初學者的 API 概念解釋

API 是什麼 ? 這是個從古至今都困惑著前端菜雞的議題，即使當初 Google 了 「 API 是什麼 」 至少有 10 遍以上，還是對 API 的概念很模糊，直到自己真的串接第三方 API ，甚至是自己實作後端 API ，才慢慢對 API 有點概念，希望這篇文章可以幫助前端初學者更加理解 API 的概念。

2021 轉職前端工程師學習資源與心得分享

歷經半年的時間轉職前端工程師，這邊想來分享一下這半年參考的資源、課程、文章等等，希望對想要轉職前端工程師的人有一點點的幫助~ 1. 筆者背景 理工學士畢業，大學畢業時覺得對自己的人生感到茫然，對本科系也沒什麼興趣，但本身還算喜歡跟其他人互動，所以決定先當個業務，認為可以接觸到比較多的行業和公司各個部門，希望可以藉由業務這份工作，找到自己有興趣的領域。 在做了兩年的業務後，雖然滿喜歡業務的工作型態

【 Node.js 】如何在 Node.js 中建立 TypeScript 的環境

最近開始在學習用 TypeScript 建立前後端，簡單筆記一下該如何在 Node.js 中建立 TypeScript 的環境。 1. 什麼是 TypeScript? TypeScript 是為了彌補 JavaScript 不足的地方而誕生的語言，最主要的差別就在於宣告變數或是執行函數時需要指定 type ，不過這篇的重點在於在 Node.js 中建立 TypeScript 的環境，所以就不描述

HTML Attributes 與 DOM Properties 的區別

首先來理解 HTML attributes (特性) 指的到底是什麼東西。 簡而言之，在 HTML 標籤裡的，稱之為 attributes。接著來了解一下，HTML attributes 有什麼特性。attributes 由 HTML 定義，所有出現在 HTML 標籤內的描述皆為 attributes

【 JavaScript 】JavaScript 費氏數列的 3 種解法

面試的時候經常會問到怎麼用 JavaScript 解費氏數列，面試到後面整理了一下常見的 3 種解法： 首先說明一下費氏數列：[0, 1, 1, 2, 3, 5, 8, 13, 21, 34, 55] ，通常會請你用 JavaScript 求解陣列的最後一個值。 1. JavaScript 費氏數列 - 遞迴解 2. JavaScript 費氏數列 - 迴圈解 3. JavaScript 費氏數列 - Memoization

【 JavaScript 】JavaScript 型別轉換整理

JavaScript 型別轉換整理

【JavaScript】如何刪除陣列重複項

最近實作後端時需要刪除陣列重複項，但 google 了一下發現方法都好複雜，所以後來乾脆自己想，紀錄一下自己的方法~

【JavaScript】甚麼時候該用 for...in，甚麼時候該用 for...of

for...in 是個常在 Object 中使用的方法，但前一陣子發現原來還有 for...of，怕搞混這兩個所以來整理一下差別。 1. for...in 根據 ，for...in 用來跌代 Object 中 enumerable 的屬性，然而不只會跌代所宣告 Object 中 enumerable 的屬性，還會遞迴該 Object 的 prototype 中 enumerable 的屬性。 那

前端專案的SOP — git、webpack 教學

稍微整理一下網路上查到的webpack 教學文章，在學習完前端的基礎之後，也學到了不找製作專案時會使用到的工具，諸如git、webpack等等，所以想整理一下開發一個專案時，使用這些工具的SOP。 首先第一步，先將專案加入到git 版本控管之中，方便自己隨時回到某個版本，或是與他人多人協作。

如何用WordPress架設網站 (3)：namecheap 教學與 Cloudflare 教學

架設完主機後接著就是購買網域和設定 DNS 伺服器的教學了。 1. 網域購買：為甚麼選擇 namecheap？ 網域的部分個人認為不像主機選擇那麼多，最多人購買的網域商就屬 和 了，基本上單就購買網域的部分來看的話，提供的服務並不會差太多，主要差別如下： - namecheap 基本上比 Godaddy 便宜，不過實際情況還是要根據你選擇的網域再去做實際的比較 - Godaddy 提供 .tw

如何用 WordPress 架設網站 (2)：Cloudways 教學

這篇文章就來正式教大家架設網站的第一步 — 購買主機，看完並實作之後就可以簡單架設一個網站囉！

【JavaScript瀏覽器】：實作串接 API (1) ⏤ Unsplash API

因為對用 JavaScript 串接 API 滿不熟悉的，再加上最近看了些職缺用 JavaScript 串接 API 又是必備技能，所以決定來花點時間好好搞懂這塊，順便練習實作，比較容易發現問題出在哪裡。

如何用 WordPress 架設網站 (1)：前置作業 ⏤ 購買網域與主機

在 架設網站的方法 (3)：使用CMS – 內容管理系統架設網站 中提到，使用 WordPress 架設網站是全世界最普遍的方式，因此接下來會有一系列 WordPress 架設網站教學的文章，今天就先來談談在利用 WordPress 架設網站前應該要先做好哪些前置作業，以及為什麼需要做這些事情。

【JavaScript基礎】：Array Methods — 陣列方法整理

陣列(array)屬於物件(object)的一種，在Javacript中有許多陣列方法(array methods)可做轉換或運算，來整理一下在看到陣列常見和相關的方法。 1. Array and String：陣列與字串的轉換 字串與陣列相關的方法 1.1 字串轉換成陣列 1.1.1 **Array.from()** 這個方法不只可以轉換字串，還可以轉換類陣列等等。 語法： > Array.f

新增圖片時，該用HTML的img，還是CSS的background-image？

在寫前端的時候，插入圖片的方式有兩種：在HTML的；另一種則是在CSS屬性中設定background-image，一直以來都分不太清楚甚麼時候該用哪個，今天就來好好整理一下！

為甚麼我從 Yoast SEO 改成使用 Rank Math？ – Rank Math 教學

雖然文章最後會有比較，但我想先提提我從 Yoast SEO 改成使用 Rank Math 的主要原因，如果你看完開頭覺得好像也還好，沒有很必要換掉 SEO 外掛，歡迎直接跳過這篇文章~

【WordPress外掛】如何點圖放大文章中的圖片？Easy FancyBox完整教學

這篇主要是教大家如何在WordPress中啟用點圖放大的功能，以及介紹一個關於這個功能的外掛 — 。 最近在寫一些教學的文章時，發現截圖的內容就算在文章中放到最大還是難不太清楚，所以就想到WordPress應該會有點圖放大的相關外掛，首先來說說該怎麼啟用這個功能吧！

架設網站的方法 (3)：使用CMS – 內容管理系統架設網站

前面提到了兩種架設網站的方法： 今天就來談談第三種方法，也是我這個部落格使用的方法 – CMS(Content Management System)，內容管理系統。

用 CSS 製作動畫的 3 種方式： CSS transition, CSS transform, CSS animation

今天要來筆記一下該如何用 CSS 製作動畫，爬了一些文發現這篇： 算是介紹比較完整的，再把製作動畫的方式步驟化方便自己之後需要應用。 不過今天的筆記就先排除效能，改天有空再來寫一篇關於動畫與瀏覽器效能之間的關係。

如何實作出Read more 按鈕？

「該如何實作出Read more 按鈕呢？」今天在寫 這門課的作業1時，最後一個自我練習是_「這次實作的畫面當頻道名稱字太多的時候，會超出一格的大小或者會直接被卡掉，有沒有辦法讓字太多的時候在尾巴顯示？例如原本名稱叫做：「1234567」，顯示的時候變成：「12345...」？」_剛好最近開始經營部落格，於是就很好奇那我每天看到的Read more按鈕到底是怎麼實做的呢？我有沒有能力做出這個按鈕呢

如何用 git 將資料夾加入到版本控管中？

參考資料： 這應該是目前最完整的 Git 教學，講解的很詳細而且很有脈絡，從頭到尾看一遍的話可以對 Git 的各種指令有完整的了解。 這篇當作我的個人筆記用，所以就簡單的拆解步驟就好了，詳細原理的話歡迎參考上面那篇參考資料！1. 為甚麼要用 Git？ 很簡單，因為潮。 開玩笑的，Git 是一個版本控管的工具，顧名思義，就是用來版本控管的。 那為甚麼要將我們的資料版本控管呢？ - 不用每次再另存新檔

架設網站的方法 (2)：使用架站平台一鍵架設

上一篇提到了，第一個方法比較類似土法煉鋼，從無到有架設一個網站。 而今天要講解的方法則是和第一個方法完全相反！也就是使用架設網站的平台來架設一個屬於自己的網站。 那麼什麼是架站平台呢？顧名思義就是架設網站的平台，這類平台通常只要註冊一個帳號後就可以開始架設網站，以台灣最大的架站平台 - 為例，註冊完帳號後就可以擁有一個自己的部落格，這個部落格會先以預設版型的樣子呈現，如果想更換網站的設計或是做些微

架設網站的方法 (1)：自己寫程式碼架站

講完了網站的原理後，來說說架設網站的方法吧！基本上架設網站的方法分成三大類：自己寫程式碼架站、使用CMS(內容管理系統)架站、使用架站平台架設網站。 今天就先來介紹第一個方法：自己寫程式碼架站。

網站原理 (4)：什麼是靜態網頁？什麼是動態網頁？兩者有什麼差別？

「所謂的靜態網頁就是沒有動畫的網頁，動態網頁就是有動畫的網頁。」 曾經，我是這麼認為的。要是我的人生跟我的腦袋一樣簡單就好了嗚嗚... 好啦~來說正經的。 1. 靜態網頁 所謂的靜態網頁，一般來說是指「沒有後台」的網頁，也就是說你的網頁單純是用HTML、CSS和JavaScript這些檔案所構成的。 也就是說在上一篇的所提到的，如果網站的三大要素：UI/UX、前端、後端之中，你只會前端的技術的話

網站原理 (5)：網站運作原理 - 從瀏覽器到伺服器端發生了甚麼事？

經過前 3 篇的努力，終於可以講到完整的網站原理啦！如果你還沒看過前面幾篇，建議你先去瀏覽一下，免得這篇有些專有名詞看不懂哦~ 接下來就來講一下網站運作原理吧！ 由於網站是由許多檔案所組成的，換句話說，當我們要看到網站時勢必要拿到這些網站的資料，所以我們的最終目的是取得這個網站的資料，並透過瀏覽器來解析並且建構成網站。

大部分怕寫程式的人都是因為數學不好，但我數學很好為甚麼害怕寫程式？

今天一整天都在練 JavaScript，練到一半突然想起這個問題，就來閒聊一下啦哈哈。看到標題的你應該覺得很邱吧，甚麼數學很好還害怕寫程式，是在邱幾點的？對，我就是邱，我國中的綽號還叫「邱神」呢哈哈哈哈，好啦開玩笑滴，我只是心血來潮想記錄一下自己的想法，數學的部分也只是比大部分的人稍微突出一點，大家就當作笑話看看就好😆 從小到大，數學一直是我最好的科目，有多好呢？還請客官們聽我娓娓道來。

網站原理 (3)：網站是怎麼構成的？ – 淺談網站的3大要素：UI/UX設計師 前端工程師 後端工程師

今天要來說說一個網站究竟是如何誕生的呢？一般來說，在製作一個網站的時候，我們會將主要工作切分為3個職位：UI/UX設計師、前端工程師、後端工程師 網站基本上是由三大核心所構成 — UI/UX、前端、後端 1. UI/UX設計師 UI(User Interface)設計師，顧名思義負責整個使用者介面的設計，也就是從電腦版網頁的設計，到行動裝置(包含平板、手機等)的介面設計。

網站原理 (2)：什麼是DNS伺服器？它的功能是甚麼？

在上一篇文章 提到了：網域是為了方便使用者記憶只由數字組成的IP位置而誕生的，那我們要怎麼知道網域對應到哪個IP位置呢？這時候就需要DNS伺服器啦！下面就來說明DNS的功用和原理。

網站原理 (1)：什麼是URL？什麼是網域？兩者有什麼差別？

網站原理的第一課要先來講解URL和網域的差別啦~相信很多人都知道在瀏覽器上方輸入網址會進到某個網站，但卻對網址的結構不太清楚，今天就來講解一下URL的結構。