Feb. 2024 ​

2 nd ​

元件庫 ​

• Vue DevUI

  基於 Vue3 的 UI 元件庫。

問題 ​

• v-for 不要用 index 作為 key

  1. push 沒有影響，但是 unshift 有
     因為用 unshift 會造成前面幾項的 index 不同，所以全部子節點都會更新
  2. 就算是 id-${i} 之類的也一樣，只要有 index 都會影響

5 th ​

Nginx ​

• Location

  nginx

  http { 
    server {
      listen 80;
      server_name www.example.com;
      location / {
        root /home/www/ts/;
        index index.html;
      }
    }
  }

  1
  2
  3
  4
  5
  6
  7
  8
  9
  10
  

  訪問 www.example.com 的 80 port 時，會回傳 /home/www/ts/index.html 文件。

  =：精準匹配

  nginx

  location = /test {
    return 200 "hello"; 	
  }
  
  # /test    ✅
  # /test/   ❌
  # /test2   ❌
  # /test/2  ❌

  1
  2
  3
  4
  5
  6
  7
  8
  

  ~：區分大小寫的正則匹配

  nginx

  location ~ ^/test$ {
    return 200 "hello"; 	
  }
  
  # /test    ✅
  # /Test    ❌
  # /test/   ❌
  # /test2   ❌

  1
  2
  3
  4
  5
  6
  7
  8
  

  ~*：不區分大小寫的正則匹配

  nginx

  location ~* ^/test$ {
    return 200 "hello"; 	
  }
  
  # /test    ✅
  # /Test    ✅
  # /test/   ❌
  # /test2   ❌

  1
  2
  3
  4
  5
  6
  7
  8
  

  ^~：以某個字符開頭

  nginx

  location ^~ /images/ {
    return 200 "hello"; 	
  }
  
  # /images/1.gif    ✅

  1
  2
  3
  4
  5
  

  /：通用匹配

  nginx

  location / {
    return 200 "hello"; 	
  }
  
  # /index.html   ✅

  1
  2
  3
  4
  5
  

  nginx

  location /test {
    return 200 "hello"; 	
  }
  
  # /test    ✅
  # /test2   ✅
  # /test/   ✅

  1
  2
  3
  4
  5
  6
  7
  

• root

  主要是拼接成 root + location

  nginx

  location /i/ {
  	root /data/w3
  }

  1
  2
  3
  

  請求 /i/top.gif，會回傳 /data/w3/i/top.gif。

• alias

  主要是把 location 替換成 alias

  nginx

  location /i/ {
  	alias /data/w3/images/;
  }

  1
  2
  3
  

  請求 /i/top.gif，會回傳 /data/w3/images/top.gif。

⋯ Reference

8 th ​

工具 ​

• pkgx

  速度極快、獨立、跨平台的二進位文件，可以運行任何東西。

CSS ​

• 網頁黑白配色

  css

  <style>
  html {
    filter: grayscale(1);
    -webkit-filter: grayscale(1);
  }
  </style>

  1
  2
  3
  4
  5
  6
  

⋯ Reference

• ::backdrop

  是一種 CSS 偽元素，是一個 viewport 大小的盒子，它直接呈現在 top layer 中呈現的任何元素下方。

9 th ​

CSS ​

• 固定距離的切角

  css

  div {
    clip-path: polygon(0 20px, 100% 0, 100% 100%, 0 100%);
  }

  1
  2
  3
  

• 固定角度的切角

  css

  div {
    background: conic-gradient(at 100% 0, #B89DFF 250deg, transparent 0);
  }

  1
  2
  3
  

⋯ Reference

12 nd ​

套件 ​

• ncc

  將一個 Node.js 專案編譯成單一檔案，支援 TypeScript、二進位附加元件、動態引用。
  提供簡單的命令列介面，將 Node.js 模組與其所有相依性一起編譯成單一檔案，類似於 gcc 的風格。

Header ​

• Cache-Control

  • no-store：請瀏覽器不要 cache 這個檔案或 response。
  • no-cache：要快取，但每次在使用 cache 前，都要先向伺服器檢查（revalidate）。
  • max-age：使用者收到 response 後的一定時間內（max-age），瀏覽器不會重新發送請求，而是收到 Status code 200 (from memory cache)。

  TIP

  如果同時設置了 max-age 和 Expires 的話，會以 max-age 為主，Expires 將會被忽略。

  • must-revalidate：如果希望不使用任何 stale 的資料，要加上 must-revalidate，表示如果檔案過期後，瀏覽器一定要先向 server 詢問。
  • stale-while-revalidate：在執行 revalidation 時，稍微忍受過期的 response。
  • public / private：public 適合用在大家看到的是同樣的 image，大家看到的是相同的樣式（stylesheet），一般並不需要明確指名是 public；private 適合用在個人登入資訊。
  • s-maxage：s 表示 shared 的意思，因此會針對 CDN 進行設定，針對 client(browser) 的有效時間會是一小時，但 CDN 則會是一天。
  • immutable：表示的是這個檔案不可能會改變 ，所以完全不需要 revalidate。

• Etag、If-None-Match（控制 revalidate）

  在 server 回傳 Etag 的 HTTP Header 後，瀏覽器在後續的 Request Header 中都會自動帶入 If-None-Match 的欄位，這個欄位的值會是上一次發送請求時 Etag 回傳的值。
  server 即可根據 If-None-Match Header 的值來決定要不要回傳新的內容給瀏覽器。
  如果是 true 的話（需要更新），server 會回傳 200 並提供新的 response；如果是 false（還可以繼續使用），server 則會回傳 304，請 Client 繼續使用 cached response。

• Last-Modified、If-Modified-Since（會向伺服器發送請求）

  在 server 回傳 Last-Modified 的 HTTP Header 後，瀏覽器在後續的 Request Header 中都會自動帶入 If-Modified-Since 的欄位，這個欄位的值會是上一次發送請求時 Last-Modified 回傳的值。
  server 即可根據 If-Modified-Since Header 的時間來決定要不要回傳新的內容給瀏覽器。
  可能的話使用 etag 會比 last-modified 更好，原因是有可能過了 last-modified 的時間，但其實並沒有新的檔案需要 fetch，如果是 etag 的話，可以完全依照檔案是否有變更來決定要不要 refetch。

⋯ Reference

14 th ​

CSS ​

• border 動畫線條按鈕

  Hover me

  css

  #draw-border {
    display: flex;
    align-items: center;
    justify-content: center;
  }
  
  #hover__btn {
    border: 0;
    background: none;
    text-transform: uppercase;
    color: #4361ee;
    font-weight: bold;
    position: relative;
    outline: none;
    padding: 10px 20px;
    box-sizing: border-box;
    cursor: pointer;
  }
  
  #hover__btn::before, #hover__btn::after {
    box-sizing: inherit;
    position: absolute;
    content: '';
    border: 2px solid transparent;
    width: 0;
    height: 0;
  }
  
  #hover__btn::after {
    bottom: 0;
    right: 0;
  }
  
  #hover__btn::before {
    top: 0;
    left: 0;
  }
  
  #hover__btn:hover::before, #hover__btn:hover::after {
    width: 100%;
    height: 100%;
  }
  
  #hover__btn:hover::before {
    border-top-color: #4361ee;
    border-right-color: #4361ee;
    transition: width 0.3s ease-out, height 0.3s ease-out 0.3s;
  }
  
  #hover__btn:hover::after {
    border-bottom-color: #4361ee;
    border-left-color: #4361ee;
    transition: border-color 0s ease-out 0.6s, width 0.3s ease-out 0.6s, height 0.3s ease-out 1s;
  }

  1
  2
  3
  4
  5
  6
  7
  8
  9
  10
  11
  12
  13
  14
  15
  16
  17
  18
  19
  20
  21
  22
  23
  24
  25
  26
  27
  28
  29
  30
  31
  32
  33
  34
  35
  36
  37
  38
  39
  40
  41
  42
  43
  44
  45
  46
  47
  48
  49
  50
  51
  52
  53
  54
  

框架 ​

• uni-app

  使用 Vue.js 開發所有前端應用的框架，開發者編寫一套程式碼，可釋出到 iOS、Android、Web（響應式）等多個平臺。

套件 ​

• markdown-it

  Markdown 解析器，CommonMark 支援、擴充、語法 plugins 和高速。

• markdown-it-github-alerts

  使 markdown-it 支援 GitHub 風格的警示。

  TIP

  > [!NOTE]  
  > Highlights information that users should take into account, even when skimming.
  
  > [!TIP]
  > Optional information to help a user be more successful.
  
  > [!IMPORTANT]  
  > Crucial information necessary for users to succeed.
  
  > [!WARNING]  
  > Critical content demanding immediate user attention due to potential risks.
  
  > [!CAUTION]
  > Negative potential consequences of an action.

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

  ⋯ Reference

17 th ​

JS ​

• 物件賦值

  javascript

  let obj = { num1: 111 } // A_obj
  let ref = obj
  
  // obj.child 的 obj 指向的是 A_obj
  // 執行時會首先開出 child 屬性（在 A_obj 上開了一個 child）
  // 再執行右邊的運算（obj 改為指向 B_obj）
  obj.child = obj = { num2: 222 } // B_obj
  
  // 最後 child 屬性是被加在原本的 A_obj 上
  // 所以現在 obj 指向的是 B_obj，並沒有 child 這個屬性
  console.log(obj.child) // undefined
  console.log(ref) // { num1: 111, child: { num2: 222 } }

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

  ⋯ Reference

套件 ​

• countUp.js

  無依賴、輕量級的 JavaScript Class，可以快速創建動畫來以更有趣的方式顯示數字資料。 儘管名為 CountUp，它仍可以根據傳入的起始值和終止值向任何方向計數。

• unplugin-raw

  將文件轉換成預設導出的字串：檔案將被轉換為 JavaScript，然後是一個字串。

18 th ​

套件 ​

• telegraf.js

  使用 JavaScript 或 TypeScript 簡單地開發自己的 Telegram 機器人。

• node-telegram-bot-api

  適用於 Node.js 的 Telegram Bot API。

• boot-vue

  Boot Vue 是一個極速的 Vue 3 模板，具有強型別的 TypeScript、UnoCSS、DaisyUI、Vue Router、Pinia 和 Netlify 支援。

21 st ​

套件 ​

• eslint-processor-vue-blocks

  在 ESLint 中為每個 Vue SFC Block 建立虛擬檔案，以便單獨對它們進行 lint 檢查。

• eslint-merge-processors

  合併多個 ESLint 處理器，使其表現得像一個處理器。

22 nd ​

套件 ​

• chalk

  設計 Terminal 的字串樣式。

• colors.js

  在 Node.js 的 console 中取得顏色以及樣式。

• npmlog

  npm 使用的日誌工具，支援自定義等級和彩色輸出。

24 th ​

套件 ​

• purify

  用於 TypeScript 的函數語言程式設計庫，其目的是允許開發者使用在大多數函數式語言中可用的流行模式和抽象概念。
  Purify 不試圖改變開發者寫 TypeScript 的方式，而是提供實用工具，使程式碼更易於閱讀和維護，無需依賴黑客手段或複雜的型別定義。

工具 ​

• nrm

  NPM 管理器，可以快速地在不同的 npm 倉庫之間切換，目前包括：npm、cnpm、taobao、nj（nodejitsu）。

26 th ​

元件庫 ​

• TinyVue

  UI 元件庫，支援 Vue2 和 Vue3，以及 PC 和移動裝置。

• arco.design

  基於 Arco Design 的 Vue3 UI 元件庫。

套件 ​

• wretch

  圍繞 fetch 的小型包裝器，旨在簡化執行網路請求和處理響應的方式。

28 th ​

工具 ​

• CSS Tricks

  常用的 CSS 樣式與其他技巧。

套件 ​

• jscpd

  程式碼複製、貼上檢測器，支援超過 150 種格式。