CSS Animation
User StoryThe user sees the roulette game, and only after clicking the start button, the API call is made to retrieve prize information. Once the prize dat...
Securing Your Web Content with Content Security Policy (CSP)
What is CSPContent Security Policy, or CSP, is a security standard implemented by web browsers to mitigate the risks o...
URQL 的基本介紹與常見應用
URQL，全名為 Universal React Query Library。從名稱就可以看得出來，最初是基於 React 而生的 Library。 為什麼我說是「最初」呢？就是因為其強大的團隊，也開發出了支援 Vue (3) 及 Svelte 等其他前端框架。在整合度非常高的狀況下，卻又以輕便、高度客製化、多功能、簡單好上手等多樣特色聞名。 ...
GraphQL 系列文（三）：Mutation & Subscription
假設今天有個 GraphQL Schema 如下，今天需要發送一個請求，請求內容中需要拿到使用者的 ID、名稱、年紀、身高 (公分)、所有貼文的標題及內容等。 那該如何寫請求呢？答案我放在這篇文章最下方，可以先自己練習看看。 如果看不懂 Schema、或是不知道如何寫 Query，的，可以先參考系列文章的前兩篇，GraphQL 系列文（一）：透過 ...
GraphQL 系列文（二）：透過 Query 存取資料
在上一篇文章 GraphQL 系列文（一）：透過 The Schema Definition Language (SDL) 撰寫 GraphQL Schema 中有提到，GraphQL 有三種存取資料的方式 (operation type)，主要常被使用的是 Query 查詢資料，以及 Mutation 新增、編輯、刪除資料。 因為底下會直接使用 Gra...
GraphQL 系列文（一）：透過 The Schema Definition Language (SDL) 撰寫 GraphQL Schema
SDL 是建立 GraphQL Schema 的語言，而 Schema 則是定義 GraphQL API 的重要骨幹，包含資料架構格式和型別。 在了解 Schema 之前，先來了解 GraphQL 是什麼。 GraphQL GraphQL 是一個用來查詢 API 的語言 (Q...
Vue 3 學習筆記 (二)
此篇筆記為 Vue 相關筆記第二篇，建議可先閱讀 第一篇，對 Vue 3 基礎較為熟悉後，再閱讀會更好理解。筆記部分參考 VueConf China 2021 中，VueUse 作者分享。
Vue 3 學習筆記 (一)
此篇筆記是在 2021 年六月公司開新專案，導入 Vue 3 時所記錄下來的，主要參考 Kuro 大的 Vue 書籍，以及各式網路資源後所彙整。適合給過去曾寫過 Vue 2 或對 Vue 有基礎了解的人閱讀，且不會探討 Vue 底層核心運作模式。 筆記主要分成兩個章節，分別為與 Vue 2 差異，以及 Vue 3 新增的 Composition API。
透過範例理解 Hoisting 提升
在談 Hoisting 之前，我們先測試看看以下程式 1console.log(a);
CSS 效能優化
效能優化一直是個博大精深的主題，這邊簡單討論幾種方式，包含像是資源大小、載入方式及執行方式。 資源大小進行文字資源優化，優化後檔案變小，當然傳輸時間就會縮短。