Carrie's Blog

Appearance

On this page

Jan. 2024 ​

1 st ​

CSS ​

  • line-clamp

    這個屬性只有單行能使用，而且必須在 display: block 之下，有依照此規則的的引擎之下可以使用 -webkit-line-clamp ，設定要保留的行數，但必須搭配其他屬性像以下這麼做：

    css
    {
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;  
  overflow: hidden;  
}

    WARNING

    雖然可以透過 text-overflow 的 ellipsis 截斷文本，但它只能截斷第一行的文本，如果需要在多行，便需要使用 line-clamp 屬性。

    Reference

  • animation-play-state

    可以設定動畫是運行還是暫停，恢復暫停的動畫將從暫停時停止的位置開始播放動畫，而不是重新開始。

    css
    animation-play-state: paused, running, running;

3 rd ​

Web Worker ​

Web Worker 是 HTML5 標準的一部分，這一規範定義了一套 API，允許我們在 js 主執行緒之外開闢新的 Worker 執行緒，並將一段 js 指令碼執行其中，它賦予了開發者利用 js 操作多執行緒的能力。
因為是獨立的執行緒，Worker 執行緒與 js 主執行緒能夠同時執行，互不阻塞。所以，在我們有大量運算任務時，可以把運算任務交給 Worker 執行緒去處理，當 Worker 執行緒計算完成，再把結果回傳給 js 主執行緒。
這樣，js 主執行緒只用專注處理業務邏輯，不用耗費過多時間去處理大量複雜計算，從而減少了阻塞時間，也提高了執行效率，頁面流暢度和使用者體驗自然而然也提高了。

  • 功用

    雖然 Worker 執行緒是在瀏覽器環境中被喚起，但是它與當前頁面視窗執行在不同的全局上下文中，我們常用的頂層物件 window，以及 parent 物件在 Worker 執行緒上下文中是不可用的。
    另外，在 Worker 執行緒上下文中，操作 DOM 的行為也是不可行的，document 物件也不存在；但是，location 和 navigator 物件可以以可讀方式訪問。
    除此之外，絕大多數 Window 物件上的方法和屬性，都被共享到 Worker 上下文全局物件 WorkerGlobalScope 中。同樣，Worker 執行緒上下文也存在一個頂級物件 self。

  • 使用
    js
    const worker = new Worker(path, options)
    • path：js scripts 的位址，遵守同源策略。
    • oprions：
      • type：指定 worker 型別，'classic' | 'module'。
      • credentials：指定 worker 憑證，'omit' | 'same-origin' | 'include'
      • name：用來表示 worker 的 scope 的 string。
  • 資料傳遞

    主要透過 postMessage 來發送訊息，監聽 onMessage 來接收訊息。

    js
    // 主執行緒
const worker = new Worker('/worker.js')

worker.addEventListener('message', (e) => {
  console.log(e.data)
})

worker.postMessage('Hello from main.js')
    js
    // worker 執行緒
self.addEventListener('message', (e) => {
  console.log(e.data)  
  self.postMessage('Hello from worker.js')
})

⋯ Reference

4 th ​

工具 ​

  • pdf.js

    PDF.js 是一個使用 HTML5 構建的 Portable Document Format（PDF）查看器。

套件 ​

  • dom-to-image

    dom-to-image 是一個 JavaScript library，可以將任意的 DOM 節點轉換為 vector（SVG）或 raster（PNG 或 JPEG）圖像。

  • node-schedule

    似 cron 非 cron 的 Node.js 工作調度器，允許在特定日期安排工作（任意函數）執行，並提供可選的循環規則。
    在任何給定時間僅使用單個計時器（而不是每秒、每分鐘重新評估即將到來的工作）。

    DANGER

    Node Schedule 設計於只要腳本仍在運行，預定的作業就會觸發，並且當執行完成時，調度將消失。
    如果需要安排腳本未在運行時也需要持續存在的工作，請考慮使用實際的 cron。

    toad-scheduler

    memory 中的 TypeScript 工作調度器，可以在指定的時間間隔內重複執行給定的任務（例如：每 20 秒）。

8 th ​

套件 ​

工具 ​

  • Pair Diff

    配對文件以進行快速比較。

Vue ​

  • defineComponent

    第一個參數為一個 componentOptions 物件。由於該函數本質上僅用於型別推斷目的，回傳值將是相同的 componentOptions 物件。

    WARNING

    請注意，回傳的型別有點特殊：它將是一個構造函數類型，其實例型別是基於 options 推斷的組件實例型別。
    這在當回傳的型別用作 TSX 中的 tag 時用於型別推斷。

10 th ​

問題 ​

  • Nuxt BaseURL
    js
    defineNuxtConfig({
  app: {
    baseURL: '/example/'
  }
})
  • Nuxt Proxy
    js
    defineNuxtConfig({
  nitro: {
    devProxy: {
      '/api': {
        target: 'https://example.org/api',
        changeOrigin: true,
        secure: false
      }
    }
  }
})

套件 ​

  • youtube-background

    用於從 YouTube、Vimeo 或影片檔案連結創建影片背景的 ESM / jQuery plugin。

  • Nuxt Web Vitals

    該 module 將在每個頁面視圖中收集指標，並使用 Navigator.sendBeacon() 或 fetch() 將它們發送給提供者。

14 th ​

套件 ​

  • Intro.js

    輕量級 JavaScript 函式庫，用於建立逐步的入門教學。

  • cheerio

    用於解析和操作 HTML 和 XML 的函式庫。

  • Vue Grid Layout

    適用於 Vue.js 可拖曳、調整大小的 grid 佈局。

17 th ​

元件庫 ​

  • Ark UI

    專注於提供低階 UI 元件，重點放在 accessibility、customization 和開發者體驗上。

套件 ​

  • vivus.js

    允許對 SVG 進行動畫化，使其看起來像是被繪製出來的。
    有各種不同的動畫可供選擇，也可以選擇創建一個自定義腳本來以喜歡的方式繪製 SVG。

19 th ​

套件 ​

  • Popmotion

    簡易的動畫庫。

  • Typed.css

    支援多個字串、多行字串、變速、每個字串的樣式設定，動畫插入符號（閃爍的插入游標），方向性打字暫停等等。

  • typed.js

    可以打字的 library，輸入任何字串、觀察它按照設定的速度打字、刪除已輸入的內容，並根據字串數量開始一個新的句子。

21 st ​

工具 ​

  • screenshot-to-code

    可以將截圖轉換為程式碼（HTML、Tailwind CSS、React、Bootstrap 或 Vue）。
    使用 GPT-4 Vision 生成程式碼，並使用 DALL-E 3 生成類似的影像，還可以輸入一個 URL 來複製一個現有的網站！

嵌入外部字型 ​

css
@font-face {
  font-family: Example;
  src: url('/Example.woff2') format('woff2');
}

WARNING

大多瀏覽器無法讀取 .ttf 或 .otf，建議轉成 .woff 或 .woff2。

⋯ Reference

23 rd ​

Chrome Extension ​

套件 ​

  • tensorflow.js

    TensorFlow.js 是一個用於訓練和部署機器學習模型的開源硬件加速 JavaScript Library。

    在瀏覽器中開發機器學習
    使用靈活直觀的 API 從頭開始構建模型，可以使用低階 JavaScript 線性代數庫或高階 API。
    在 Node.js 中開發機器學習
    使用相同的 TensorFlow.js API 在 Node.js 執行時執行原生 TensorFlow。
    執行現有模型
    使用 TensorFlow.js 模型轉換器在瀏覽器中執行預先存在的 TensorFlow 模型。
    重新訓練現有模型
    使用連線到瀏覽器或其他客戶端資料的感測器資料重新訓練預先存在的機器學習模型。

26 th ​

SRI（Subresource Integrity） ​

子資源完整性（SRI）是允許瀏覽器檢查其獲得的資源是否被篡改的一項安全特性。
它通過驗證獲取檔案的雜湊值是否和提供的雜湊值一樣來判斷資源是否被篡改。
如果攻擊者獲取了 CDN 的控制權，就可以將任意內容惡意注入到 CDN 檔案中，從而攻擊了載入此 CDN 資源的站點。
所以就需要 SRI 來確保 Web 應用程式獲得的檔案未經過第三方注入或者其他形式的修改來降低被攻擊的風險。

html
<script 
  src="https://example.com/example-framework.js"
  integrity="sha384-oqVuAfXRKap7fdgcCY5uykM6+R9GqQ8K/uxy9rx7HNQlGYl1kPzQho1wx4JwY8wC"
  crossorigin="anonymous"
></script>
  • SRI 原理

    將檔案內容通過 base64 編碼後的雜湊值，寫入你所引用的 <script> 或 <link> 標籤的 integrity 屬性值中即可啟用子資源完整性功能。
    瀏覽器在載入此內容執行之前，會判斷該檔案的雜湊值是否和 integrity 預期的一致，只有一致才會執行。

⋯ Reference

套件 ​

  • jscpd

    用於程式設計原始碼的複製、貼上檢測器。
    複製、貼上是許多項目中常見的技術債，jscpd 提供了查詢重複塊的能力，應用於超過 150 種程式語言和文件的數字格式。

27 th ​

HTML ​

  • colsapn、rowspan

    合併儲存格（？）

    html
    <table>
  <tr>
    <th colspan="2">Name</th>
    <th>Age</th>
  </tr>
  <tr>
    <td>Jill</td>
    <td>Smith</td>
    <td>43</td>
  </tr>
  <tr>
    <td>Eve</td>
    <td>Jackson</td>
    <td>57</td>
  </tr>
</table>
    NameAge
    JillSmith43
    EveJackson57

工具 ​

  • FormMaking

    基於 Vue 的視覺化低程式碼表單設計器，幫助開發者從傳統枯燥的表單程式碼中解放出來，快速提高效率，節省研發成本。

29 th ​

後台管理框架 ​

  • Bag-admin

    使用 Vite4、Vue3、Pinia、Naive UI 構建中後臺管理系統基礎框架，減少專案之間的耦合，也能提升專案擴充性。

箭頭函式 vs 一般函式 ​

  • 箭頭函式語法不同、寫法也較簡潔
  • 箭頭函式沒有自己的 this、也無法直接修改 this 的指向

    箭頭函式的 this 值是在一開始定義時就決定，永遠會是最接近自己的外層的普通函式中的 this 值。
    此外，箭頭函式也不適合使用 call、apply 和 bind 來綁定 this 值，綁定值會無效。

  • 箭頭函式沒有自己的 arguments

    但箭頭函式可以獲取最近的非箭頭函式的 arguments 物件。

  • 箭頭函式不能作為構造函式使用

    不能使用 new 調用。

⋯ Reference