May 2024 ​

3 rd ​

套件 ​

• Tempo

  用於處理 Date 物件的工具集合，這與其他提供自定義日期原語的函式庫有所不同。
  Tempo 利用 JavaScript 的 Intl.DateTimeFormat 來提取複雜的資料，例如：時區偏移和具備本地化的日期格式，提供了一個簡單的 API 來格式化、解析和操作日期。

框架 ​

• h3

  輕量且 composable 的 JavaScript 伺服器框架，透過適配器設計來與各種 JavaScript 執行環境協同工作。

7 th ​

套件 ​

• alova.JS

  輕量的請求策略函式庫，提供了一整套解決方案來處理複雜的請求場景。

  範例：

  typescript

  const response = await alova.Get('/api/user')
  const { loading, error, data } = useRequest(alova.Get('/api/user'))

  1
  2
  

工具 ​

• PageSpy

  用於在 Web、小程序和 HarmonyOS 應用平台上 debug 專案的工具。
  基於對原生 Web API 的封裝，它在呼叫時過濾並轉換原生方法的參數，並轉換為特定格式的訊息供偵錯客戶端使用。
  偵錯程式在接收到訊息資料後，會以互動式開發工具般的介面呈現，便於檢視。

元件庫 ​

• Keen UI

  Vue.js 的 UI Libraru，擁有簡單的 API，並非一個 CSS 框架。 不包含網格系統、排版等樣式，相反地，它專注於需要 JavaScript 的互動元件。

9 th ​

工具 ​

• MSW

  Mock Service Worker，API 模擬函式庫，可以撰寫與客戶端無關的模擬，並在任何框架、工具和環境中複用。

CSS ​

• shape-outside

  控制內容如何圍繞浮動元素的邊界框進行環繞。 通常這樣做是為了使文本能夠重新流動在如圓形、橢圓形或多邊形等形狀上。

  • circle()：用於製作圓形。
  • ellipse()：用於製作橢圓形。
  • inset()：用於製作矩形。
  • polygon()：用於創建具有 3 個或更多頂點的任意形狀。
  • url()：指定用於圍繞文本的圖像。
  • initial：浮動區域不受影響。
  • inherit：從父元素繼承 shape-outside 值。

  範例：

  css

  .shape-outside-demo {
    float: left;
    shape-outside: circle(50%);
    width: 200px;
    height: 200px;
  }

  1
  2
  3
  4
  5
  6
  

  Lorem ipsum dolor sit amet, consectetur adipisicing elit. Officiis impedit libero esse odio excepturi fuga est ut itaque a quod suscipit, rerum asperiores. Consequuntur voluptates illo rerum recusandae pariatur asperiores, aspernatur, saepe ipsum error dolorem, quod inventore possimus modi deleniti tenetur et officiis. Nemo ab in totam ratione sequi error, ea dolorum repudiandae omnis, eaque facere impedit fugiat. Dolorum distinctio autem sequi enim quidem esse accusamus repudiandae voluptatum nobis, velit, molestiae. Eaque maiores, harum. Saepe esse repellendus sint. Labore provident optio quis commodi quod quaerat quo similique perspiciatis libero facere. Suscipit odit quas nemo, enim laudantium, provident repellendus natus nostrum facilis expedita adipisci qui, harum minus quidem officia cupiditate repellat ut praesentium. Possimus corporis, error atque ex adipisci, illum suscipit pariatur saepe impedit aliquam amet eos reiciendis quidem hic, nisi. Sint nobis modi, nesciunt quasi placeat quia. Veniam inventore corrupti quisquam illum debitis vitae accusamus nobis alias cum iste error magnam, cupiditate earum! Incidunt at consequuntur, rem ipsa odio ipsum deleniti repudiandae blanditiis harum ut in, fugit officia rerum ad, corporis dolore!

13 rd ​

JavaScript ES15 ​

• Promise.withResolvers

  建立一個 promise，直接回傳 resolve 和 reject 的 callback。

  範例：

  javascript

  const { promise, resolve, reject } = Promise.withResolvers()
  
  setTimeout(() => resolve('Resolved after 2 seconds'), 2000)

  1
  2
  3
  

• Object.groupBy

  可以按照特定屬性將陣列中的物件進行分組，讓資料處理變得更加容易。

  範例：

  javascript

  const pets = [
  	{ category: 'dog', name: 'Candy' },		
  	{ category: 'cat', name: 'Yoyo' },		
  	{ category: 'dog', name: 'Bob' },		
  	{ category: 'rabbit', name: 'Med' },		
  ]
  const result = Object.groupBy(pets, pet => pet.category)

  1
  2
  3
  4
  5
  6
  7
  

  結果：

  javascript

  {
  	dog: [
  		{ category: 'dog', name: 'Candy' },
  		{ category: 'dog', name: 'Bob' }
  	],
  	cat: [
  		{ category: 'cat', name: 'Yoyo' }
  	],
  	rabbit: [
  		{ category: 'rabbit', name: 'Med' }
  	]
  }

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

• Temporal

  以更直觀和高效的方式處理日期和時間。 例如：Temporal API 提供了新的日期、時間和持續時間的資料類型，以及用於建立、操作和格式化這些值的函數。

  範例：

  javascript

  const today = Temporal.PlainDate.from({ year: 2023, month: 11, day: 19 })
  today.toString() // 2023-11-19
  
  const duration = Temporal.Duration.from({ hours: 3, minutes: 30 })
  const tomorrow = today.add(duration)
  tomorrow.toString() // 2023-11-20

  1
  2
  3
  4
  5
  6
  

• Records & Tuples

  以簡潔和型別安全的方式來建立物件和陣列。

  • Records 類似於物件，但具有具體類型的固定屬性集。
  • Tuples 類似於陣列，但具有固定長度，每個元素可以具有不同類型。

  範例：

  javascript

  let record = #{
    id: 1,
    name: 'JavaScript',
    year: 2024
  }
  
  console.log(record.name); // JavaScript

  1
  2
  3
  4
  5
  6
  7
  

⋯ Reference

15 th ​

元件庫 ​

• Banana UI

  基於 Web Component 的元件庫，支援大部分 Web 框架並支援 SSR。

工具 ​

• G|translate

  支援 HTML 頁面自動翻譯工具。

HTTP ​

• Content-Disposition

  在常規的 HTTP response 中，Content-Disposition response header 是一個 header，用於指示內容是預期在瀏覽器 inline 顯示，即作為網頁或網頁的一部分顯示，或是作為附件下載並本地儲存。

  在 multipart/form-data body 中，HTTP Content-Disposition 通用 header 是一個必須在多部分 body 的每個子部分使用的 header，以提供該欄位適用的資訊。
  子部分由 Content-Type 標頭中定義的邊界分隔，在 body 本身上使用時，Content-Disposition 沒有任何效果。

  Content-Disposition 標頭在電子郵件的 MIME 訊息的更大範圍中定義，但只有一部分參數適用於 HTTP 表單和 POST 請求。
  只有值 form-data 以及可選的指令 name 和 filename 可以在 HTTP 上下文中使用。

16 th ​

套件 ​

• unplugin-inline-enum

  inline enum 值以減少 bundle 的大小，簡化 JavaScript 中生成的列舉。

  範例：

  javascript

  export enum TestEnum {
    a = 1,
    b = 'foo',
  }
  console.log(TestEnum.a, TestEnum.b)

  1
  2
  3
  4
  5
  

  Before：

  javascript

  export let TestEnum
  ;(function (TestEnum) {
    TestEnum[(TestEnum.a = 1)] = 'a'
    TestEnum.b = 'foo'
  })(TestEnum || (TestEnum = {}))
  
  console.log(TestEnum.a, TestEnum.b)

  1
  2
  3
  4
  5
  6
  7
  

  After：

  javascript

  const TestEnum = {
    a: 1,
    '1': 'a',
    b: 'foo',
  }
  console.log(1, 'foo')

  1
  2
  3
  4
  5
  6
  

• NuxtImage

  Nuxt 應用圖片優化工具，使用內建的優化器或偏好的圖片 CDN 來調整和轉換圖片。

20 th ​

套件 ​

• matter.js

  2D 網路物理引擎。

• anime

  輕量級的 JavaScript 動畫庫，擁有簡單而強大的 API。
  可以用於 CSS 屬性、SVG、DOM 屬性和 JavaScript 物件。

• babylon.js

  遊戲和渲染引擎，封裝在 JavaScript 框架中。

⋯ Reference

CSS ​

• Anchor Positioning API

  錨點是使用 anchor-name 屬性指定為參照點的元素。 定位元素是使用 position-anchor 屬性，或是在定位邏輯中明確使用 anchor-name 的相對於錨點元素。

  設定錨點 ⚓️ 在要設為錨點的元素套上專屬 ID，且 ID 前需加上 --

  css

  .anchor-button {
     anchor-name: --anchor-el;
  }

  1
  2
  3
  

  錨定位置是以 CSS 絕對定位為基礎。
  如要使用定位值，您必須在定位元素中加入 position: absolute。 接著，使用 anchor() 函式套用定位值。

  將其他元素與錨點進行連結

  css

  .positioned-notice {
      position-anchor: --anchor-el; /* 專屬 ID */
  }

  1
  2
  3
  

  設定該元素與錨點的相對位置

  css

  .positioned-notice {
  	position-anchor: --anchor-el;
  	top: anchor(bottom);
  }

  1
  2
  3
  4
  

  明確錨點（可以錨定到不同元素）

  css

  .positioned-notice {
  	top: anchor(--anchor-el bottom);
  }

  1
  2
  3
  

⋯ Reference

22 nd ​

開發方式 ​

• TDD（Test-driven development，測試驅動開發）

  開發軟體的過程，先寫測試再寫程式碼。 目標是寫出高品質、可維護的程式碼，它鼓勵開發人員在撰寫程式碼之前考慮程式碼的設計。

  Step１：撰寫一份測試並因為程式碼尚未實現而運行失敗 Step２：撰寫程式碼以讓測試通過 Step３：重構程式碼以提高品質

  優點

  1. 提高功能的可測試性，架構較完善
  2. 提升開發者信心
  3. 提早發現潛在的 bug，減少錯誤機會

  缺點

  1. 非開發人員無法驗證測試是否符合需求
  2. 增加開發人員工作量與開發時長

• BDD（Behavior-driven development，行為驅動開發）

  針對 TDD 的改進，主要針對系統的行為，而不是細節的實現。 在寫測試前先寫測試規格書，同時它會更從使用者的角度建立相關的測試情境。 這份測試規格會用更接近人類語意的自然語言來描述軟體功能和測試案例。 鼓勵開發人員、測試人員和業務利益相關者之間的協作，以確保每個人都對系統的行為有共同的理解。

  Step１：識別並描述系統行為的情境 Step２：使用自然語言寫出情境 Step３：使用測試工具以自動化各情境

  行為是根據場景來描述的，場景描述了使用者和系統之間的互動。 每個場景都由一組 Given、When、Then 步驟組成：

  • Given 步驟指定初始條件
  • When 步驟指定操作
  • Then 步驟指定預期結果

  優點

  1. 非技術性語言，更加容易理解
  2. 提供多種方式來說明實際的測試情境，以便更了解需求

• DDD（Domain-driven design，領域驅動設計）

  從業務出發設計程式碼，Domain 指的便是業務範圍。 透過策略部分指導我們根據業務劃分出業務領域，並區分哪些是核心領域，哪些是支撐領域和通用領域。 當業務複雜，並且需要長期維護時再考慮使用 DDD，否則只是在浪費成本。

  優點

  1. 開發者能與熟悉業務者進行合作
  2. 軟體能夠準確表達業務規則

• ATDD（Acceptance Test-driven development，驗收測試驅動開發）

  將驗收標準轉化為測試的開發技術。 類似於 BDD，但著重於接受標準而非行為，涉及開發人員、測試人員和利害關係人之間的協作，以確保軟體符合驗收標準。

  Step１：定義特性的驗收標準 Step２：使用測試工具自動化驗收測試 Step３：驗證特性是否符合驗收標準

⋯ Reference
⋯ Reference
⋯ Reference

27 th ​

測試 ​

• Unit Test（單元測試）

  測試單一元件或模組的功能，通常由開發者在程式碼層級進行，重點在於檢測基本的程式碼功能。

  • 重構或者修改程式碼的時候有保證，不會破壞程式碼的功能
  • 阻止 bug 重複發生（regressions），透過增加單元測試來檢查某些特定的 bug 即可阻止類似的情況發生
  • 更容易地定位問題並且解決問題

• Integration Test（整合測試）

  測試多個組件或模組之間的交互，驗證它們是否能正確地共同工作。

  • 若程式碼複雜到不容易寫單元測試，最好的方法是透過修改程式碼使它更容易去做單元測試。

• Functional Test（功能測試）

  又稱為行為測試（behavioral testing），針對產品的各項功能進行驗證，確認是否符合預先期望的商業邏輯或行為。 由於 functional testing 耗時最久，也更難自動化，我們希望他盡可能的少被執行，當執行到這個階段前，基本上也代表前兩個階段都驗證完畢。

• End-to-end Test（端對端測試）

  測試整個應用程式的流程，從使用者介面到資料庫，模擬真實使用者場景的操作，確保所有元件在一起時應用程式能如預期運作。

31 st ​

CSRF ​

CSRF 是指跨站的請求偽造，這種攻擊方法會強迫使用者在他們已經驗證身份的網站中，執行某些惡意的偽造操作，因為已經驗證過該使用者，所以網站就會以為操作來自該使用者，因此接受了該操作。

• 攻擊流程

  1. 使用者成功登入 A 銀行網站的帳戶，並且代表使用者身份的 cookie 在本地保存下來，所以下次再來 A 銀行網站時，不用重新登入。
  2. 由於使用者沒有登出 A 銀行網站的帳戶，在瀏覽 B 惡意網站時，B 網站有個被設為透明的圖片，因為是透明的，所以使用者在畫面上看不到，然而該圖片包含一段惡意程式碼。
  3. 使用者雖然將看不到此圖片，但是瀏覽器仍會向提交請求，同時此請求是帶有使用者的 cookie，所以 A 銀行可以辨識使用者身份，此惡意攻擊執行成功。

• 防禦方式

  1. 加上其他驗證手段

     針對比較危險的操作，可以增加圖形驗證碼、簡訊驗證碼等驗證。

  2. 不要使用 GET

     不要用 GET 請求來做關鍵操作，建議用 POST 請求。 POST 需要點擊提交動作，才能觸發 CSRF 攻擊。 注意仍有可能被攻擊，但不會像用 GET 請求一樣，使用者可能在完全不知情下，進到網站就馬上被攻擊。

  3. 檢查 Referrer

     先辨識發出請求的，是在哪個網站。 注意若駭客能篡改 Referrer 的值，那仍有可能被攻擊成功。

  4. SameSite cookies

     SameSite cookies 是 HTTP Response Headers 中的 Set-Cookie 的屬性之一，此屬性的可能值為 Lax、Strict 或 None。

⋯ Reference