Jun. 2023 ​

1 st ​

Nuxt ​

• Nuxt Content

  讀取專案中的 content/ 目錄，解析 .md、.yml、.csv 和 .json 檔案，為應用程式創建強大的資料層。
  使用 MDC Syntax 在 Markdown 中使用 Vue 元件。

• Nuxt Studio

  可以從 Theme 創建專案或從 GitHub 導入。
  與團隊一起編輯內容，共享即時預覽連結，無需重新部署。

Vue ​

• watch onCleanup

  每次資料變化都會執行 watch 的 callback 函式，每次都會形成一個私有作用域。
  傳入的 onCleanup 函數，執行改變的是上一個私有作用域的值。
  執行時機是在下一次 callback 函式調用之前。

  javascript

  watch(ref, (newValue, oldValue, onCleanup) => {
    let clear = false
    onCleanup(() => {
      clear = true
    })
  }, {
    ...options
  })

  1
  2
  3
  4
  5
  6
  7
  8
  

  ⋯ Reference

2 nd ​

套件 ​

• vue-bind-once

  在任何需要的元素上使用該指令，綁定在 Client-Side 和 Server-Side 之間保持一致，且之後不會動態更改的值。

• scrolly-video

  具有響應式和可滾動功能的影片，無需繁瑣的影片編碼要求。
  支援 React、Svelte、Vue 和純 HTML。

瀏覽器擴充套件 ​

• github-toc-sidebar

  顯示 GitHub README 的 TOC 在側邊欄。

5 th ​

套件 ​

• Splide

  輕量、靈活且易於使用的幻燈片（輪播庫），使用 TypeScript 撰寫，無需任何依賴。

• NativeScript-Vue

  是一個 NativeScript 套件，支援使用 Vue 建構 Native Mobile 應用程式。

工具 ​

• Docusaurus

  靜態網站生成器，能夠專注於內容，只需撰寫 Markdown 文件。
  使用快速的 Client-Side 導覽構建 SPA，利用 React 使網站具有互動性。
  它提供即插即用的文件功能，也可用於創建任何類型的網站（e.g. 個人網站、產品、部落格）。

6 th ​

JSONP ​

JSON with Padding。
一種跨領域請求的方式，透過將資料引入 <script>，並用函式接住資料，來進行資料的求取。

1. Client-Side 會依據 <script> 引入的跨域網址，傳送請求。
2. Server-Side 收到請求後會回傳 JS 檔案，並將請求的 JSON 資料放進指定的 function 並執行。

⋯ Reference

套件 ​

• Leaflet

  Javascript 函式庫，製作適用於 Mobile 設備的互動地圖，並擁有多數開發者所需的所有地圖功能。

資源 ​

• OpenStreetMap

  簡稱 OSM，是採用協作編輯的開源全球地圖。

8 th ​

資源 ​

• awesome-vue

  與 Vue 相關的精選清單。（各項相關套件等）

工具 ​

• codeium

  人工智慧驅動的程式設計助手。
  可以撰寫程式碼、回答問題並提高生產力（e.g. 解釋程式碼、重構、轉換程式語言）。

9 th ​

啟動器 ​

• Raycast

  可以透過快速指令呼叫（e.g. cmd + 空白鍵），輸入命令後快速啟用某些軟體、文件，比起 MacOS 原生的 Spotlight 更為方便。

套件 ​

• VueHooks Plus

  使用 TypeScript 撰寫，提供豐富的 Hooks 函式庫。

• Mermaid

  基於 JavaScript 的圖表和工具，受到 Markdown 啟發的文本定義渲染為動態創建和修改圖表的工具。

• million

  輕量級（小於 4kb）的虛擬 DOM，可使 React 組件的性能提高高達 70%。
  Million 使創建 Web 應用程式變得同樣簡單（它只是對 React 組件的封裝！），但具有更快的渲染和加載速度。

11 th ​

資源 ​

• CSS Loader Generator

  自訂網頁的 CSS Loader。
  選擇一個 spinner / loader 並可以自訂 CSS Loader 的顏色、大小和速度。

套件 ​

• Blitzar

  使用類似 JSON 的語法，快速生成 Vue 表單和資料表格。

  折疊程式碼展開程式碼

13 rd ​

套件 ​

• Vant

  輕量、可自訂的 UI 函式庫 Mobile Web Apps。

Vue2.7 ​

• Composition API
• SFC <script setup>
• SFC CSS-bind
• defineComponent()
• h()、useSlot()、useAttrs()、useCssModules()
• set()、del() 和 nextTick() 在 ESM 架構中也提供 Named Exports
• emits 僅用於型別檢查（不影響運行時行為）

reactive(foo) === foo
// Vue2.7 true
// Vue3   false

⋯ Reference

14 th ​

字體 ​

• Maple Font

  帶有圓角和連字的開源等寬字體，中英文寬度完美 2：1。

• GoGoCode

  JavaScript / Typescript / HTML 語言轉換工具。
  一套類 JQuery 的 API 用來查詢和處理 AST、一套和正規表示式接近的語法用來匹配和替換程式碼。

17 th ​

問題 ​

• Vite build 錯誤訊息

  zsh

  [vite]: Rollup failed to resolve import "...(asset path)" from "...(file path)".
  This is most likely unintended because it can break your application at runtime.
  If you do want to externalize this module explicitly add it to `build.rollupOptions.external`

  1
  2
  3
  

• 解決方式 vite.config.js
  

  添加以下這段 template，否則 Vite 將試圖尋找圖片路徑（由於它將在網頁上呼叫，而不是直接呼叫，所以它無法找到）。
  例如： <img src="/images/logo.png"> 將無法正常工作，除非使用以下程式碼。

  javascript

  import { defineConfig } from "vite"
  import vue from "@vitejs/plugin-vue"
  
  export default defineConfig({
    plugins: [
      vue({
        template: {
          transformAssetUrls: {
            includeAbsolute: false,
          }
        }
      })
    ]
  })

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

⋯ Reference

19 th ​

TypeScript ​

• using

  當離開作用域時，可以使用 using 來處理帶有 Symbol.dispose 函數的任何內容。
  也可以使用 Symbol.asyncDispose 和 await using 來處理需要異步處理的資源，進行必要的清理處理。

  Symbol.dispose

  JavaScript 中的一個新的全域 Symbol。
  任何具有分配給 Symbol.dispose 函式的物件都會被視為資源、具有特定生命週期的物件，並且可以與 using 一起使用。

  • 範例：File handles

  javascript

  import { open } from "node:fs/promises"
  const getFileHandle = async (path: string) => {
    const filehandle = await open(path, "r")
    return {
      filehandle,
      [Symbol.asyncDispose]: async () => {
        await filehandle.close()
      },
    }
  }
  {
    await using file = getFileHandle("thefile.txt")
    // 可以使用 file.filehandle
  }
  // 自動 disposed

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

  ⋯ Reference

工具 ​

• Hanko

  開源的身份驗證和使用者管理解決方案。

20 th ​

工具 ​

• ast-grep

  基於 AST 的全新工具，用於在大規模程式碼中管理您的程式碼，可以進行程式碼結構搜索、檢查（lint）和重寫（Rewrite）。

• fastmod

  與 codemod 類似，用於協助大規模程式碼重構的工具，並且支援大多數 codemod 的選項。
  主要差異在於 fastmod 專注於改進使用情境「使用互動模式確保規表示式是正確的，並希望在所有地方應用該正規表示式」。
  對於這種使用情境，fastmod 的效能優於 codemod。因此，fastmod 不支援 codemod 的 --start、--end 或 --count 選項，也不支援像 codemod 的 Python API 的功能。

22 nd ​

Cookie ​

• HttpOnly

  一般情況 documnet.cookie 可以直接存取到所有在該網頁可用的 Cookie 資料。
  若網站在設定 Cookie 的時候有特別加上 HttpOnly 屬性，就可以進一步避免該頁的 Cookie 被 JavaScript 存取，也可保護使用者的 Cookie 不會偷走。

Web Authentication（WebAuthn） ​

FIDO2 規範包含了 WebAuthn 與 Client-to-Authenticator Protocol (CTAP)。
WebAuthn 其實是 FIDO2 的一部分，用來規範標準的 Web API 讓瀏覽器實作，開發者可以透過 API 啟動 FIDO 2 驗證，讓使用者透過行動裝置、指紋辨識或硬體安全金鑰來登入帳號，不需輸入密碼！
目前支援的瀏覽器有 Chrome、Firefox、Edge 與 Safari preview 版。

⋯ Reference

26 th ​

SVG Filter ​

• <feFlood>

  將整個畫面填滿某個顏色，也可以加上透明度（flood-opacity）。

  html

  <svg>
    <defs>
      <filter id="flood">
        <!-- 濾鏡只有一個 feFlood -->
        <feFlood flood-color="#00ff00" flood-opacity="0.6" />
      </filter>
    </defs>
    <rect height="100" width="100" filter="url(#flood)" />
  </svg>

  1
  2
  3
  4
  5
  6
  7
  8
  9
  

• <feBlend>

  主要屬性有三個，in（輸入來源）、in2（輸入來源二）、mode（混合模式）。
  它需要兩個輸入來源，並設定模式，即可使用。
  
  mode
  

  1. normal（一般）
  2. multiply（色彩增值）
  3. darken（暗化）
  4. screen（網屏）
  5. lighten（亮化）

• <feTurbulence>

  主要屬性有五種：

  1. baseFrequency：想像雜訊圖檔大小 0.01 ~ 1
  2. numOctaves：想像精緻度 1 ~ 10
  3. seed：雜訊圖檔種子碼
  4. stitchTiles：雜訊圖檔是否拼接
  5. type：類型。fractalNoise 較霧面、turbulence 較顆粒

  html

  <svg>
    <defs>
      <filter id="feTurbulence">      
        <feTurbulence 
          type="turbulence" 
          baseFrequency="0.9" 
          numOctaves="2" 
          result="turbulence" />
      </filter>
    </defs>
    <circle fill="#ff0000" r="100" filter="url(#feTurbulence)" />
  </svg>

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

⋯ Reference

28 th ​

CSS ​

• modern-normalize

  與 normalize.css 差異：

  1. 僅包括最新 Chrome、Firefox 和 Safari 的標準化
  2. 設置 box-sizing 為 border-box
  3. 提升預設字型的一致性

Vite ​

• Library Mode

  vite.config.js

  javascript

  import { resolve } from 'path'
  import { defineConfig } from 'vite'
  
  export default defineConfig({
    build: {
      lib: {
        // 檔案入口（entry）
        entry: resolve(__dirname, 'lib/main.js'),
        name: 'MyLib',
        // 檔案名稱（僅內部可見）
        fileName: 'my-lib',
      },
      rollupOptions: {
        external: ['vue'],
        output: {
          globals: {
            vue: 'Vue',
          },
        },
      },
    },
  })

  1
  2
  3
  4
  5
  6
  7
  8
  9
  10
  11
  12
  13
  14
  15
  16
  17
  18
  19
  20
  21
  22
  

  package.json

  json

  {
    "name": "my-lib", // 跟 vite.config.js 的 fileName 相同
    "type": "module",
    "files": ["dist"],
    "main": "./dist/my-lib.umd.cjs",
    "module": "./dist/my-lib.js",
    "types": "./dist/types/src/main.d.ts", // 附上 Types
    "exports": {
      ".": {
        "types": "./dist/types/src/main.d.ts",
        "import": "./dist/my-lib.js",
        "require": "./dist/my-lib.umd.cjs"
      },
      "./css": "./dist/style.css"
    }
  }

  1
  2
  3
  4
  5
  6
  7
  8
  9
  10
  11
  12
  13
  14
  15
  16
  

  ⋯ Reference

套件 ​

• Floating UI

  創建 Floating 元素（e.g. Tooltip、Popover、Dropdown）的函式庫。
  提供將浮動元素（e.g. Tooltip）與其他元素（e.g. Button）綁在一起，並確保盡可能地避免碰撞。
  此功能適用於所有平台。

29 th ​

Web ​

• Server-Sent Events（SSE）

  解決了 Long Polling 會需要建立多次 Request 的問題。

  優點
  連線可重複使用。
  相比起 Long Polling 取得 Response 後，需要再建立一次 Reqeust。
  Server Send Event 在同一次 HTTP 連線中，由 Server 送出多次更新資料。

  缺點
  僅能夠由 Server 傳送訊息到瀏覽器（單向傳輸）。

• SSE vs WebSocket

  Server-Sent Event	WebSocket
  基於 HTTP 協議	基於 TCP 協議
  單向（Server 端 -> 瀏覽器）	雙向（同時發送與接收）
  輕量、使用較容易	較複雜
  內建斷線重連擊消息追蹤	需自行處理
  文字／Base64／二進制	類型廣泛
  支援自定義事件	不支援

套件 ​

• VueTypes

  Vue 的可配置 prop 驗證器的集合。
  
  使用範例：

  javascript

  import VueTypes from 'vue-types'
  
  export default {
    props: {
      id: VueTypes.number.def(10),
      name: VueTypes.string.isRequired,
      age: VueTypes.integer,
      nationality: VueTypes.string,
    },
    methods: {
      // ...
    },
  }

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

30 th ​

OWASP TOP 10 ​

全球性非營利組織 OWASP（The Open Web Application Security Project）所提出的十大網路應用程式安全風險，其中列出了最常見的 10 種網路應用程式風險，並按照其嚴重性和頻率進行排名。

1. 權限控制失效 | Broken Access Control ​

應用程式在身份驗證、授權和 Session 管理等方面出現不當配置或實作，導致攻擊者能夠訪問未經授權的資源或執行未經授權的操作。

Example
如果應用程式在 Session 管理方面存在問題，攻擊者也可能使用會話固定攻擊（session fixation attack）來接管現有的會話，以繞過身份驗證和授權檢查。

2. 加密機制失效 | Cryptographic Failures ​

軟體應用程式中所使用的加密方式或加密實作出現錯誤，導致加密過程的失敗，最終可能會使攻擊者能夠以某種方式讀取或修改敏感資訊，或者是讓攻擊者能夠對系統進行未授權的操作。

Example
軟體使用了不安全的加密演算法、不安全的密碼、密鑰管理不當、隨機數生成不夠隨機、沒有妥善保護加密金鑰等等。
當攻擊者發現這些漏洞時，就可以使用各種攻擊技術來解密或竄改數據，進而獲取機密信息或對系統造成危害。

3. 注入式攻擊 | Injection ​

在應用程式中，未對使用者輸入的資料進行充分驗證或過濾，導致攻擊者能夠向應用程式的執行環境中插入並執行惡意指令或程式碼。
此弱點包括但不限於 SQL Injection、XML Injection、LDAP Injection、OS Command Injection、Code Injection 等。
通常是開發人員沒有正確地對使用者輸入的資料進行驗證、過濾或轉譯，或是使用了不安全的程式庫或方法所導致。

Example
攻擊者可以利用這種漏洞對資料庫、網站、應用程式等系統進行未經授權的操作，如取得敏感資訊、修改數據、繞過身份驗證等。

4. 不安全的設計 | Insecure Design ​

軟體設計上有缺陷，導致系統無法有效地防禦攻擊。
這些缺陷可能包括不當的系統架構、不完善的安全模型、安全風險分析不充分、權限管理不當等，進而造成系統易受到各種攻擊。
因此，必須在設計階段進行全面的安全風險評估和漏洞分析，以確保系統設計的安全性和完整性。

5. 不安全的設定配置 | Security Misconfiguration ​

因為應用程式和系統的未經適當配置、更新、保護和監控，使其容易受到攻擊和入侵。
攻擊者可能會利用這些設定上的漏洞，取得未授權的存取權限，並竊取敏感資料或者破壞系統。
開發團隊需要對所有系統和應用程式的安全設定進行評估和管理，並定期檢查和更新這些設定，以確保它們與最新的威脅和漏洞相容並且保持最佳的安全性能。

Example
使用預設的系統帳戶和密碼、未更新軟體版本、未啟用安全協定、未禁用不必要的服務、未經適當的驗證控制和權限管理等。

6. 易受攻擊和過時元件 | Vulnerable and Outdated Components ​

應用程式中使用的外部組件、資料庫、框架等元件存在安全漏洞或已經過時，攻擊者可以利用這些漏洞對應用程式進行攻擊。
此類型的漏洞通常可以透過更新到已修復的版本來解決，或者在安裝和配置時遵循最佳安全實踐來減少風險。

Example
攻擊者利用已知的漏洞來執行任意代碼、提升權限、訪問機密數據等。

7. 身分認證、驗證失效 | Identification and Authentication Failures ​

系統無法適當地識別和驗證使用者的身分，這種漏洞可能發生於帳號密碼管理不當、session 管理不當、未能保護身分識別憑證、身分識別管理不當等。
攻擊者甚至可以利用這些漏洞深入到系統中，繞過系統安全控制，從而對系統和資料造成威脅和損害。

Example
攻擊者可以使用未經授權的身分進入系統，或是提升已有的權限。

8. 軟體和資料完整性錯誤 | Software and Data Integrity Failures ​

在應用程式中，未能防止惡意的修改、刪除或篡改資料或軟體可能會導致應用程式執行失常，或是開啟了不當的訪問許可權，進而造成機密性和可用性的風險。
攻擊者可以利用這些漏洞進行資料竊取、篡改資料、執行未授權的操作等行為，嚴重影響了應用程式的完整性。
建議應用程式使用更強的加密演算法、保持軟體和系統更新、限制敏感資料的儲存和傳輸，以及實現完整性驗證、日誌記錄和溯源功能等方式來強化安全性。

Example
使用未經身份驗證的路徑訪問、在不安全的環境下存儲或傳輸敏感資料、使用弱加密算法或者配置錯誤的加密方法等。

9. 資安記錄和監控失效 | Security Logging and Monitoring Failures ​

網站或應用程式缺乏有效的安全監控機制，無法將所有安全事件、錯誤、攻擊等記錄下來並及時做出相應的反應。
缺乏適當的監控機制可能會導致被攻擊後且未能發現。
為了預防這種弱點，應該建立有效的監控機制，及時收集和分析日誌資料，並採取必要的措施來保護系統安全，例如設定安全警報和通知系統，建立安全事件反應計劃，以及定期進行測試和評估。

Example
錯誤的安全配置、缺乏安全測試、管理不善或缺乏人員培訓。

10. 伺服器端請求偽造 SSRF | Server-Side Request Forgery ​

當應用程式未能適當限制外部用戶端所提交的請求，或者未能適當驗證應用程式所收到的請求時，攻擊者可以利用這個漏洞向受害系統發出任意請求。
防範 SSRF 攻擊的方法包括限制用戶端提交的請求，限制應用程式的出站連接，以及驗證應用程式所收到的請求，特別是限制用戶可以發出的請求範圍。

Example
攻擊者基於 Web 的管理控制面板或雲端服務，向內部網路的其他系統發出請求，或者從應用程式的伺服器上下載機密數據。

⋯ Reference