front-end-note

如何用 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）。 首先建立一個簡單的專案，讓我們等等可以

Next.js Compiler 介紹

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

【 JavaScript 】Map 筆記

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

【 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 來安裝相關的套件：

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

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

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

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

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 版本控管之中，方便自己隨時回到某個版本，或是與他人多人協作。

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

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

【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，一直以來都分不太清楚甚麼時候該用哪個，今天就來好好整理一下！

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

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

如何實作出Read more 按鈕？

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

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

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