Sep. 2023 ​

2 nd ​

CSS ​

• panda

  一個 styling 引擎，以一種安全型和易讀的方式生成樣式基本元素，用於編寫 atomic CSS 和 recipes。
  Panda 結合了 CSS-in-JS 的開發者體驗和 atomic CSS 的效能。
  利用靜態分析來掃描 JavaScript 和 TypeScript 檔案，以檢測 JSX 樣式屬性和函數呼叫，根據需要生成樣式（即時生成）。

• :has

  1. 匹配直接包含 <img> 子元素的 <a> 元素

  css

  a:has(> img)

  1
  

  2. 匹配其後緊跟着 <p> 元素的 <h1> 元素

  css

  h1:has(+ p)

  1
  

⋯ Reference

3 rd ​

Vite ​

• 自訂編譯完的檔案名稱

  js

  export default defineConfig({
    plugins: [ vue() ],
    build: {
      rollupOutputOptions: {
        entryFileNames: `assets/[name]-[hash].js`,
        chunkFileNames: `assets/[name]-[hash].js`,
        assetFileNames: `assets/[name]-[hash].[ext]`
      }
    }
  })

  1
  2
  3
  4
  5
  6
  7
  8
  9
  10
  

  ⋯ Reference

Syntax highlighting ​

• starry-night

  like GitHub.

套件 ​

• maska

  Vue 和純 JS 的簡單無依賴輸入遮罩。

6 th ​

Vue ​

• 子元件 Ref 型別

  vue

  <script setup lang="ts">
  import ChildComponent from './ChildComponent.vue'
  import { ref } from 'vue'
  
  const childRef = ref<InstanceType<typeof ChildComponent>>()
  
  </script>
  
  <template>
     <ChildComponent ref="childRef">
  </template>

  1
  2
  3
  4
  5
  6
  7
  8
  9
  10
  11
  

Git ​

• 更改檔案名稱大小寫

  sh

  git mv hello.txt Hello.txt

  1
  

8 th ​

套件 ​

• tiny-invariant

  一個不變函數接收一個值，如果該值為偽值（falsy），則不變函數將拋出異常。如果該值為真值（truthy），則函數將不會拋出異常。

  js

  import invariant from 'tiny-invariant'
  
  invariant(truthyValue, 'This should not throw!')
  invariant(falsyValue, 'This will throw!')

  1
  2
  3
  4
  

Web ​

• CDN（Content Delivery Node）

  在請求一張圖片（或其他靜態資源）時，伺服器如果架設在美國，而請求來自台灣，則 TCP 傳輸會受到延遲時間跟掉包率的影響，距離越遠當然延遲也就越大。
  而 CDN 的原理用很簡單的方式來說，就是將資源快取到各個分布的節點當中，這樣使用者在請求資源時，就可以直接從離使用者最近的網路節點回應，加快回應速度。伺服器如果掛掉或某個節點掛掉了，還可以靠其他節點的快取來回應。
  ⋯ Reference

11 st ​

YAML ​

適用於所有語言，人性化的資料序列標準。

• 純量（scalar）

  運用零個或多個 Unicode 字元，以表示自定義資料（opaque datum）。
  就是將最基本的、不可再分的值，全部使用文字來描述。

  yaml

  dotnet

  1
  

• 序列（sequence）

  有順序的節點清單。清單內容，不限制節點的類型。
  以 -，表示該行資料為序列。

  yaml

  - 20
  - two
  - 123.4
  - 'hello world'

  1
  2
  3
  4
  

• 映射（mapping）

  使用 key: value 的配對方式，以便快速找到所要的資料。
  key 是索引值，所以必須是唯一值。

  yaml

  name: John
  age: 23

  1
  2
  

⋯ Reference

12 nd ​

Document ​

• Docus

  以 Markdown 編寫頁面、使用 Vue 元件，同時享受 Nuxt 的強大功能。
  甚至可以輕鬆替換、擴展和自定義任何元件。

工具 ​

• publint

  檢查封裝錯誤，確保在不同環境中的兼容性。
  對 npm 包進行檢查，以確保在不同環境中（e.g. Vite、Webpack、Rollup、Node.js）具有最廣泛的兼容性。

• std-env

  與 runtime 無關的 JS utils。

15 th ​

工具 ​

• Valibot

  專為 bundle size、type safety 和開發者體驗而設計，來驗證 unknown data。

資源 ​

• Project Wallace

  CSS 分析工具，用於檢查程式碼的複雜性、特定性、效能、設計 Tokens 等等，全部都可以在單一的網頁應用程式中完成。

16 th ​

筆記 ​

• Obsidian

  私密而彈性的筆記應用程式，以 Markdown 語法撰寫，筆記檔案儲存於本地。
  可建構資料夾以及依照筆記內部連結展示相互關聯圖。

套件 ​

• tsx

  TypeScript Execute，使用 esbuild 增強的 Node.js 以用來執行 TypeScript 和 ESM。

19 th ​

Built-in Objects ​

• Intl

  Intl namespace 物件包含多個建構函式以及國際化建構函式和其他語言相關功能的共同功能。
  構成了 ECMAScript 國際化 API，提供語言敏感的字串比較、數字格式化、日期和時間格式化等功能。
  Example：Formatting dates and numbers

  js

  const count = 26254.39
  const date = new Date("2012-05-24")
  
  function log(locale) {
    console.log(
      '' + new Intl.DateTimeFormat(locale).format(date) 
      + new Intl.NumberFormat(locale).format(count)
    )
  }
  
  log("en-US") // 5/24/2012 26,254.39
  log("de-DE") // 24.5.2012 26.254,39

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

套件 ​

• pkg-exports

  取得本地 npm 套件的匯出。

21 st ​

Nodebook ​

• RunKit

  RunKit 筆記本完全消除了嘗試新點子的障礙。
  點選後可以進入一個 sandbox JavaScript 環境，可以即時切換 Node 版本，使用每個 npm 模組，無需等待安裝。
  甚至可以視覺化結果，不再需要配置，直接開始撰寫程式碼。

知識庫 ​

• Wiki.js

  最強大且可擴充套件的開源軟體。
  支援多人共同維護，不需額外費用，開源程式碼，並支援 Docker 佈署。

23 rd ​

TS ​

• gts

  Google 的 TypeScript style guide，也是 formatter、linter 和 automatic code fixer 的配置。
  無需編輯程式檢查規則，無需更新配置。

• TypeStat

  命令列實用程式，可以修改現有程式碼中的 TypeScript 型別。
  將 JavaScript 轉換為更好的 TypeScript，並改進現有的 TypeScript 程式碼。

套件 ​

• gray-matter

  YAML front matter parser。
  也可以解析 JSON Front Matter、Coffee Front Matter、TOM 等等。

  Front-matter

  是檔案最上方以 --- 分隔的區域，用於指定個別檔案的變數。

26 th ​

微前端 ​

• EMP

  基於 webpack 5 和 Module Federation，對 TypeScript、JSX、CSS、Less、Sass 等支援開箱即用。

27 th ​

名詞 ​

• Polyfill

  為舊瀏覽器實現或模擬現有版本已實現之功能的程式碼片段。

  shim

  同樣也是為舊版環境提供現有功能的程式碼。

  polyfill 與 shim 最大的不同是：

  • polyfill：實現的功能都是官方正式公佈並實現的規範
  • shim：實現原生沒有的功能（e.g. lodash）

  ⋯ Reference

套件 ​

• fluent-vue

  國際化插件，是 Fluent.js 的Vue.js integration（Fluent.js 是 Mozilla 的 Project Fluent 的 JavaScript 實現）。
  Fluent 使簡單的事情保持簡單，並實現了複雜的功能，用於描述翻譯的語法易於閱讀和理解。
  fluent-vue 的 API 受到 vue-i18n 的啟發，但 API surface 要小得多，因為大多數事情都由 Fluent 語法處理。

29 th ​

框架 ​

• Milkdown

  一個 plugin 驅動框架，用於建立所見即所得 Markdown 編輯器。

  WYSIWYG（what you see is what you get）

  所見即所得，直接可視資料（指電腦螢幕上顯示的圖像與列印出來的效果完全一樣）。
  ⋯ Reference

套件 ​

• Grid.js

  免費且開源的 JavaScript table plugin。
  適用於大多數 JavaScript 框架，包括 React、Angular、Vue 和 VanillaJs。

工具 ​

• tsup

  使用 esbuild 的引擎，無需配置即可打包您的 TypeScript library。
  支援任何 Node.js 原生支援的檔案，包括 .js、.json、.mjs，還有 TypeScript 的 .ts、.tsx。

• unbuild

  JavaScript 構建系統，基於 Rollup 的打包工具。
  支援 TypeScript，生成 CommonJS 和 Module 格式，還包括型別聲明。