Jan. 2023 ​

1 st ​

VueUse ​

• useLocalStorage

  將資料存到 LocalStorage，使用方式跟一般操作 ref 的方式相似。
  初始值若為 null，型別將被自動判定為 any，導致在寫入內容時將強制轉型 String(v)。
  若需要另外設定型別，須在第三參數補充。
  例如：{ serializer: StorageSerializers.object }。

• GitHub Source: core/useStorage

2 nd ​

Vue Router ​

• push 或 <Component :to=""> 不需要寫 path（可以寫 name 並依需要寫入參數即可）

  ts

  router.push({
    name: 'router_name',
    params: {
      paramA: param_A,
      paramB: param_B,
    }
  })

  1
  2
  3
  4
  5
  6
  7
  

  html

  <div :to="{
    name: 'router_name'
  }">
    <!-- Something -->
  </div>

  1
  2
  3
  4
  5
  

• 從網址拿參數

  若須根據網址參數調整頁面內容，一樣要透過 watch 等方式去做監聽。

  ts

  const route = useRoute()
  const example = computed(() => route.params.example)

  1
  2
  

4 th ​

Repo README.md ​

• README-Example-Template

  給專案寫 README.md 的範本參考。

Vue ​

• Transition

  Vue 提供了兩個內建組件，可以幫助處理過渡和動畫以響應不斷變化的狀態。

  注意

  1. 藉由 v-if 控制，因此 v-if 需要被包在 Transition 內部！
  2. <Transition> 需要在 <Teleport> 之前先註冊（被包在 <Teleport> 內一起被傳到該去的節點）

5 th ​

Vue ​

• v-model

  父層與子層組件之間的雙向綁定。

  • 父組件
  vue

  <template>
    <MyComponent v-model:title="variableTitle" />
  </template>

  1
  2
  3
  
  • 子組件

  emit 需要定義成固定格式：update: + props 名稱

  vue

  <script setup>
    defineProps(['title'])
    defineEmits(['update:title'])
  </script>
  
  <template>
    <input
      type="text"
      :value="title"
      @input="$emit('update:title', $event.target.value)"
    />
  </template>

  1
  2
  3
  4
  5
  6
  7
  8
  9
  10
  11
  12
  

7 th ​

工具 ​

• Storybook

  可以輔助 UI 組件開發的工具。
  Storybook 的運行不需要依附於專案，它可以被獨立部署為不同於原有專案的靜態網站。
  因為裡面只有會組件的樣式及操作邏輯，所以不需要擔心因為 API 及開發環境的問題導至無法操作。

  ⋯ Reference

8 th ​

套件 ​

• Vorms

  使用 Composition API 進行 Vue 表單驗證。

• Webpack Bundle Analyzer

  使用互動式可縮放的樹狀圖將 webpack 輸出文件的大小可視化。

9 th ​

問題 ​

• SPA & GitHub Pages

  若使用 SPA 並發佈到 GitHub Pages，在網址產生變化後（路由）重新整理會因為找不到 html 檔案而造成 404。

  GitHub 的解決方法
  創一個 404.html，內容和 index.html 一致。
  在 GitHub 拿不到 index.html 時會切換到自己創建的 404 頁面，即達到 index.html 的效果，雖然控制台會報錯但不影響使用。

  ts

  // deploy.sh
  cd dist
  cp index.html 404.html

  1
  2
  3
  

  如果是用 nginx 的話
  只要讓所有路徑都試試看 index.html 就好。

  ts

  location / {
    try_files $uri /index.html;
  }

  1
  2
  3
  

11 st ​

套件 ​

• EmailJS

  不需要使用到後端 Server，也不需要寫 API 就可以達成寄信的工具。

工具 ​

• emoji mart

  可客製化用於網路上的表情符號選擇器 HTML 組件。

個人 README.md 產生器 ​

• github-profile-readme-generator

  方便快速產生 GitHub 個人主頁上的 README.md。

12 nd ​

VueUse ​

• onClickOutside

  可以監聽元素外部的點擊，通常用來觸發關閉 Dialog 等。
  分成 Component 和 Directive 兩種使用方式。

• useScrollLock

  可以鎖定指定元素的滾動。
  例如當 Dialog 彈出時，將背景（body）的滾動行為鎖定。

• useVModels

  props v-model 綁定的簡寫。
  與 toRefs(props) 相似，但變化同樣會觸發 emit。
  

  其他

  • 子組件需要配合 defineEmits(['update:variable']) 取名格式
    
  • 父組件需要配合 v-model:variable="..." 方式傳送 props

13 rd ​

CSS ​

• simplebar

  SimpleBar 不實現自定義滾動行為！
  保留原生的 overflow: auto;，僅替換了 scroll bar 的視覺外觀。

JS ​

• BetterScroll

  旨在解決移動端滾動問題的外掛（PC 已經支援）。
  BetterScroll 是用純 JavaScript 實現的，這代表它是無依賴性的。

vuepress favicon ​

export default defineConfig({
  title: "Carrie's Blog",
  description: '...',
  head: [
    ['link', { rel: "...", href: "/..."}],
  ]
})

15 th ​

套件 ​

• CodeGPT

  套件允許透過官方 OpenAI API 在 VSCode 內部使用 GPT-3。

  ⋯ Reference

• fast-json-stringify

  需要 JSON Schema Draft 7 輸入來生成快速 stringify 函式。
  主要用來給我們生成一個客製化的 stringify 函式，從而來提升 stringify 的效能。

  ⋯ Reference

18 th ​

VueUse ​

• useEventBus

  可以跨越父子層檔案，全域地發佈事件與接收事件，以即時做出相對應的動作。

HTML 樣版引擎 ​

• pug

  一款 Node.js 的 HTML 樣版引擎， 結合 Haml 和 EJS 的優點，提供給開發者更現代、更優雅的語法，讓 HTML、JSX 不再難以維護。
  

  1. 基於縮排，無需 closing-tag。
  2. 可程式設計（變數、條件與迴圈）。
  3. 透過 Mixin 建立可覆用結構。
  4. 能透過轉譯器、外掛來自定義輸出。（例如：Pug -> React JSX、Pug -> Vue SFC Template）
  5. 繼承、引用其他樣板檔案；自訂結構化樣版。
  6. 可透過外掛擴充預處理器來轉換其他語言。
     

  ⋯ Reference

  範例：巢狀標籤縮寫

  • pug

  html

  div: p
    span
      a

  1
  2
  3
  

  • html

  html

  <div>
    <p>
      <span><a></a></span>
    </p>
  </div>

  1
  2
  3
  4
  5
  

​

21 st ​

CSS ​

• css-games

  有關選擇器、flex、grid 等 CSS 練習的小遊戲。

函式庫 ​

• RxJS

  Reactive Extension (Rx)
  藉由 Observable sequences 來組合非同步行為和事件基礎程序的 Library。
  可以把 RxJS 想成處理非同步行為的 Lodash。

  ⋯ Reference

22 nd ​

CSS Grid ​

• template

  設定 container 內欲分配的網格空間，若 html 實際元素量超過切分出的網格數，剩下的元素會超出容器。

  1. grid-template-columns
  2. grid-template-rows
  3. grid-template

  css

  grid-template: grid-template-rows / grid-template-columns;

  1
  

  4. grid-template-area
     可以分別賜予切分好的格子們名字，並且把內元件位置分配好。
     如果某格網格想空著，可以用 . 表示。

• column / row

  設定內元件的位置。

  • grid-column-start
  • grid-column-end
  • grid-column

  css

  grid-column: grid-column-start / grid-column-end;

  1
  

  • grid-row-start
  • grid-row-end
  • grid-row

  css

  grid-row: grid-row-start / grid-row-end;

  1
  

  • grid-area

  css

  grid-area: grid-row-start / grid-column-start / grid-row-end / grid-column-end;

  1
  

  • grid-column-gap
  • grid-row-gap
    增加線的寬度以調整網格的間距。
  • grid-gap

  css

  grid-gap: grid-row-gap grid-column-gap;

  1
  

⋯ Reference

24 th ​

JS ​

• regex101

  提供使用者可以線上測試正規表達式的網站。

靜態網站生成器 ​

• Astro

  一體化的網路框架，用於構建快速、以內容為中心的網站。

  1. 自帶元件框架：
     Astro 為 React、Vue、Svelte 和 Tailwind CSS 等前端工具提供一級支援，透過 astro add 命令即可新增使用。
  2. 支援靜態頁面生成 (SSG) 和伺服器端渲染 (SSR)，可以按需渲染內容。
  3. 開發者體驗出眾：
     Astro 支援所有喜愛的開發者工具和功能，如 TypeScript、NPM 包、Scoped CSS、CSS Modules、Sass、Tailwind、Markdown、MDX。
  4. 按需元件：
     Astro 支援通過水化元件按需載入 JavaScript。因此，如果該特定元件不可見，它不會載入相關的 JavaScript。
  5. 100% 靜態 HTML，無 JavaScript 執行時環境：當構建 Astro 時，它將刪除所有 JavaScript，並將整個頁面渲染為靜態 HTML 頁面。
  6. SEO 友好：
     使用 Astro，可以啟用自動網站地圖、RSS 訂閱、分頁和收藏。
  7. 基於檔案的路由：
     像 Next.js 一樣，Astro 有一個基於檔案的路由機制，所有在 /pages 中的東西 Astro 都會將目錄轉化為路由。

  ⋯ Reference

25 th ​

前端框架 ​

• Fresh

  • 優點
    

  1. 享受 Deno 帶來的開發優勢，從安裝依賴、開發、測試、部署直接使用 Deno 的工具鏈，降低工程化的成本。
  2. 基於 Island 架構，帶來更小的客戶端運行時開銷，渲染性能更好。
  3. 無需打包即可開發、部署應用，帶來更少的構建成本，更加輕量。

  • 缺點
    

  1. 僅支持 Preact 框架，不支持 React。
  2. 由於架構的原因，開發階段沒有 HMR 的能力，只能 page reload。
  3. 對於 Island 組件，必須要放到 islands 目錄，對於比較複雜的應用而言，心智負擔會比較重，而 Astro 在這一方面要做的更優雅一些，通過組件指令即可指定 island 組件，如 <Component client:load />。

  ⋯ Reference

  HMR (Hot Module Replacement) 熱更新

  在 Server 與瀏覽器間建立了一個 websocket 連線，當程式碼被修改時，Server 會傳送訊息通知瀏覽器去請求修改模組的程式碼，完成熱更新，所以在這樣的情況下就能在不刷新瀏覽器的前提下進行更新。

  • 優點：

  1. 修改程式碼時，可以即時更新畫面
  2. 實現部分更新，避免多餘請求
  3. 保有原本狀態

  websocket

  一種網路協定， 客戶端可以透過此協定與伺服器端做溝通，且只需透過一次連結便能保持連線，不必再透過一直發送請求來與伺服器端互動。

  ⋯ Reference

架構 ​

• Islands

  這個模型主要用於 SSR（也包括 SSG）應用，在傳統的 SSR 應用中，伺服器端會給瀏覽器響應完整的 HTML 內容，並在 HTML 中注入一段完整的 JS 指令碼用於完成事件的繫結，也就是完成 hydration (注水) 的過程。
  當注水的過程完成之後，頁面也才能真正地能夠進行互動。
  當一個頁面中只有部分的元件互動，那麼對於這些可互動的元件，我們可以執行 hydration 過程，因為元件之間是互相獨立的。
  而對於靜態元件，即不可互動的元件，我們可以讓其不參與 hydration 過程，直接複用伺服器端下發的 HTML 內容。
  可互動的元件就猶如整個頁面中的孤島 (Island)，因此這種模式叫做 Islands 架構。

  ⋯ Reference

27 th ​

前端框架 ​

• Preact

  輕量級的框架，大小僅 3kb。
  類似 React API 及模式，可使用 ES6 Class 及 Function Component。

  1. 透過 preact-compat 就能簡單的兼容 React
  2. 包含 React 所需要的功能: JSX, VDOM, React DevTools, HMR, SSR.
  3. 高度優化和伺服器端渲染
  4. 可以透過 preact-cli 快速建立專案
  5. 支援 IE9 以上的主流瀏覽器

  ⋯ Reference

• Marko

  是一個快速、輕量級並基於 HTML 的模板引擎，支援 client / server side 模組。
  支援非同步渲染、模板繼承、自定義標籤以及多種可擴充套件的指令。
  幾乎任何有效的 HTML 都是有效的 Marko，但 Marko 擴充套件了 HTML 語言以允許以聲明方式構建現代應用程式。

  ⋯ Reference

28 th ​

Ｗeb 後端開發框架 ​

• Phoenix Framework

  是一個用於構建高效能 Web 應用程式的 Elixir 語言框架。
  它使用了高效能的 Erlang 虛擬機器 (BEAM)，並提供了一個簡單、靈活的模型 - 檢視 - 控制器 (MVC) 架構，幫助開發人員快速構建 Web 應用程式。
  同時也提供了一些特性來幫助開發人員編寫高效能的程式碼，例如對 Ecto 資料庫的優化和對 WebSocket 連線的支援。
  還提供了一個自動化的測試系統和一個強大的構建工具 (Mix)，使開發人員能夠快速、高效地開發應用程式。
  其他包括對 WebSocket 和其他長連線協議的支援、對 Ecto 資料庫的支援、對 OAuth 身份驗證的支援以及對路由的支援。

  ⋯ Reference

• Phoenix Liveview

  是一個用於構建單頁面應用程式 (SPAs) 的庫，是 Phoenix Framework 的一部分。
  使用 WebSocket 連線，將伺服器端的狀態與客戶端同步，並且使用了類似於 JavaScript 框架的繫結機制，使得開發人員能夠使用 Elixir 語言來編寫客戶端程式碼。
  與傳統的 SPAs 相比，Phoenix Liveview 具有許多優勢。
  使用了伺服器端渲染，這意味著伺服器端可以生成 HTML，而不是客戶端使用 JavaScript 渲染。這有助於提高應用程式的效能，因為伺服器端渲染可以更快地載入頁面。
  此外，Phoenix Liveview 還提供了許多功能來簡化客戶端程式碼的編寫，例如自動更新檢視、使用 Phoenix 的路由系統來管理 URL 狀態、支援事件處理程式等。

  ⋯ Reference

30 th ​

• GraphQL

  為 API 設計的資料查詢（修改）的語言，
  使得 client 端可以使用更直覺且彈性的語法來取得或修改資料。

  優點
  

  1. 精準資料取得
     宣告式 (Declarative) 資料索取、資料只拿剛好且彈性十足、透過資料之間的關係連接，可以大幅減少來回 request 的次數。
  2. 程式即文件
     前後端溝通成本減少、實現以資料需求驅動 (driven by data requirement) 的設計、建立文件 (documentation) 的時間成本幾近為 0。
  3. 前端控制權提升
     過往為了因應不同的平台或是裝置而需要一套新的 API 系統，GraphQL API 則只需要一套，其他交給前端自行決定資料索取的格式、方式。由於 GraphQL query 與回傳的資料格式幾乎相同，可減少前端錯估資料樣貌的可能性，前端不再被日益複雜的架構設計綁住，開發速度大增。
  4. 高度自由的實作方式
     不預設綁任何程式語言（language agnostic）或是資料庫（DB agnostic），可將不同 micro service 的 GraphQL schema 串接在一起（Schema stitching）。
  5. 強型別（Strongly Typed）
     支援五種基礎型別 (Scalar Types)，能自定義型別如 URL、TIMESTAMP、DATE、PHONE_NUMBER 等等。

  缺點
  

  1. 過於自由、規範少
     沒有一定的實作規範，可能因為前後端對於架構的疏忽或不了解導致設計出過於複雜的 Schema。當沒有一個成熟的 Best Practice 時，容易出現 Anti Pattern（反面模式）；不懂 GraphQL 優勢，可能設計出一套「 RESTFul GraphQL 」。
  2. 學習成本
     雖然不是一項很難的技術，但若要應用到整個公司或架構上的話，仍需要時間推廣及謹慎的設計與討論；很容易一不小心陷入 RESTful API 的設計思維、埋下更多技術債；很多技術如效能處理、錯誤處理不吐狀態碼、安全性等等都需要額外的學習。
  3. 新技術（相關社群仍在開發中）
     還算是新的技術、仍有許多的規範及應用仍在開發中，所以需密切注意更新。主要使用 POST + json body ，所以原生不支援 multiple-part 上傳檔案。
  4. Server Side Caching 實作困難
     RESTful API 的 endpoint 固定且資料需求單純，然而 GraphQL 難以保證每次 request 的模樣，因此較難實作 Caching。

  ⋯ Reference