Hello，大家好，我是 Sunday。

今天給大家介紹 4 個開發(fā)必備工具，涉及到：圖片壓縮，Git 可視化，組件庫構(gòu)建、字體探索

01.Squoosh 輕松實現(xiàn)圖像優(yōu)化

官方地址：https://squoosh.app/

Squoosh.app 是一個 開源的 在線圖像壓縮工具，主要用于優(yōu)化圖像的大小和質(zhì)量。它由 Google Chrome Labs 開發(fā)，支持多種圖像格式和壓縮算法，可以直接在瀏覽器中運行，無需安裝軟件。

作用

1. 圖像壓縮：Squoosh 支持多種壓縮格式，如 JPEG、WebP、PNG 等。用戶可以通過調(diào)節(jié)參數(shù)來壓縮圖像大小，同時保持較高的圖像質(zhì)量。
2. 格式轉(zhuǎn)換：Squoosh 支持將圖像從一種格式轉(zhuǎn)換為另一種格式，如將 PNG 轉(zhuǎn)換為 WebP。
3. 圖像優(yōu)化：工具提供了高級功能，如色彩管理、降噪處理、裁剪、縮放等，幫助用戶優(yōu)化圖像。
4. 離線使用：由于它是一個 PWA（漸進式 Web 應(yīng)用程序），可以在離線狀態(tài)下使用。

特點

1. 實時預(yù)覽：Squoosh 提供實時預(yù)覽功能，用戶可以即時查看壓縮前后的效果對比。
2. 拖放支持：用戶可以通過拖放圖像文件到瀏覽器中快速開始壓縮操作。
3. 多種壓縮算法：支持 MozJPEG、OptiPNG、WebP、AVIF 等多種壓縮算法，用戶可以根據(jù)需要選擇最合適的算法。
4. 完全在本地執(zhí)行：所有操作都在本地瀏覽器中執(zhí)行，無需上傳到服務(wù)器，因此數(shù)據(jù)隱私得到保障。

02.SourceTree Git可視化工具

官方地址：https://www.sourcetreeapp.com/

圖片

Sourcetree 是 Atlassian 開發(fā)的一款 免費的 Git 和 Mercurial 圖形化客戶端，可以讓你不通過 Git 指令即可完成復(fù)雜的 Git 操作方式。這個工具我已經(jīng)使用了好多年，在這里推薦給大家

作用

1. 版本控制管理：Sourcetree 為 Git 和 Mercurial 提供了用戶友好的界面，允許用戶輕松地執(zhí)行常見的版本控制任務(wù)，如提交、推送、拉取、合并和分支管理。
2. 可視化操作：提供了直觀的可視化界面，幫助用戶查看和理解分支結(jié)構(gòu)、提交歷史、變更對比等信息。
3. 遠程倉庫管理：支持與多種遠程代碼托管服務(wù)（如 GitHub、Bitbucket、GitLab）集成，用戶可以直接從 Sourcetree 中管理和同步遠程倉庫。
4. 代碼對比和合并：集成了文件對比和合并工具，幫助用戶更容易地處理代碼沖突和查看代碼差異。

特點

1. 用戶友好的圖形界面：相比命令行，Sourcetree 的 GUI 更加直觀，尤其適合不熟悉 Git 命令的用戶。
2. 支持多倉庫管理：Sourcetree 允許用戶同時管理多個 Git 或 Mercurial 倉庫，可以方便地切換和操作不同項目。
3. 強大的分支管理：提供了詳細的分支管理功能，用戶可以輕松地創(chuàng)建、切換、合并和刪除分支，同時還可以查看分支的拓撲結(jié)構(gòu)。
4. 內(nèi)置終端：雖然主要是 GUI 工具，但 Sourcetree 也提供了內(nèi)置的終端窗口，方便高級用戶直接輸入 Git 命令。
5. 豐富的日志和歷史查看：用戶可以通過 Sourcetree 方便地查看提交歷史、日志、文件變更記錄等，支持按時間、分支、標簽等多維度進行篩選。

03.Storybook 輕松構(gòu)建你的組件庫

官方地址：https://storybook.js.org/

圖片

Storybook 是一個用于開發(fā)和測試 UI 組件的開源工具。它提供了一個獨立的開發(fā)環(huán)境，讓我們可以在不依賴應(yīng)用程序的情況下構(gòu)建、查看和測試組件。

作用

1. 獨立開發(fā) UI 組件：Storybook 提供了一個隔離的環(huán)境，允許開發(fā)者單獨開發(fā)和測試 UI 組件，而不必依賴于整個應(yīng)用程序的上下文。
2. 組件文檔化：Storybook 可以自動生成組件的文檔，使團隊成員能夠輕松了解每個組件的用途、屬性、狀態(tài)和行為。
3. 測試與展示：開發(fā)者可以在 Storybook 中實時預(yù)覽和測試組件的不同狀態(tài)，確保它們在各種場景下表現(xiàn)良好。
4. 設(shè)計系統(tǒng)管理：Storybook 支持組織和管理組件庫，使其成為設(shè)計系統(tǒng)的一部分，方便跨團隊共享和復(fù)用。

特點

1. 支持多種前端框架：Storybook 支持 React、Vue、Angular、Svelte、Web Components 等多種前端技術(shù)。
2. 實時預(yù)覽：Storybook 提供即時的實時預(yù)覽功能，開發(fā)者可以查看組件的實時變更，而無需重新加載整個應(yīng)用。
3. 擴展性強：通過插件，Storybook 可以擴展以支持不同的功能，如 Accessibility（可訪問性）檢查、性能測試、樣式指南等。
4. 自動化文檔生成：Storybook 可以從組件的代碼中自動生成文檔，支持 TypeScript 類型、PropTypes 等注釋。
5. 交互式展示：開發(fā)者可以為組件添加各種不同的“故事”（場景），以展示組件在不同狀態(tài)下的表現(xiàn)。

使用示例

1. 首先創(chuàng)建一個具體的 Vue3 或者 React 項目
2. 在項目根目錄執(zhí)行如下指令：

pnpm dlx storybook@latest init

3. 創(chuàng)建 Button 組件，我們以 Vue 為例

<!-- src/components/Button.vue -->
<template>
 <button @click="onClick">
  {{ label }}
 </button>
</template>

<script>
export default {
 name: 'Button',
 props: {
  label: {
   type: String,
   required: true
  },
  onClick: {
   type: Function,
   default: () => {}
  }
 }
}
</script>

<style scoped>
button {
 padding: 10px 20px;
 border: none;
 background-color: #42b983;
 color: white;
 font-size: 16px;
 cursor: pointer;
}

button:hover {
 background-color: #369f7a;
}
</style>

4. 創(chuàng)建對應(yīng)的 Story（文檔文件）- Button.stories.js

// src/components/Button.stories.js

import Button from './Button.vue'

export default {
 title: 'Button',
 component: Button
}

const Template = (args) => ({
 components: { Button },
 setup() {
  return { args }
 },
 template: '<Button v-bind="args" />'
})

export const Primary = Template.bind({})
Primary.args = {
 label: 'Primary 按鈕'
}

export const Secondary = Template.bind({})
Secondary.args = {
 label: 'Secondary 按鈕'
}

5. 最后執(zhí)行如下指令，啟動 Storybook：

npm run storybook

04.WhatFont 字體查看器

插件地址：https://chromewebstore.google.com/detail/whatfont/jabopobgcpjmedljpbcaablpmlmfcogm

圖片

WhatFont 是一個用于識別網(wǎng)頁上字體的工具，幫助用戶快速了解網(wǎng)頁中使用的字體類型。它是一個瀏覽器擴展插件，支持多種主流瀏覽器，如 Chrome 和 Safari。

作用

1. 字體識別：WhatFont 可以識別網(wǎng)頁中使用的字體，包括字體的名稱、字體家族、字體大小、行高等屬性。
2. 快速查看：用戶可以直接在網(wǎng)頁上點擊字體，快速查看該字體的詳細信息，而無需查看頁面的源代碼或樣式表。
3. 設(shè)計輔助：對于網(wǎng)頁設(shè)計師和開發(fā)者，WhatFont 是一個便利的工具，可以幫助他們確定網(wǎng)頁上使用的字體，并可能在自己的項目中使用相同或類似的字體。

特點

1. 易于使用：WhatFont 的操作非常簡單，用戶只需安裝擴展并激活它，然后點擊網(wǎng)頁上的文本即可查看字體信息。
2. 實時預(yù)覽：插件允許用戶在網(wǎng)頁上實時預(yù)覽所選文本的字體信息，使得字體識別變得更加直觀。
3. 支持多種瀏覽器：WhatFont 提供了針對主流瀏覽器的擴展版本，如 Chrome 和 Safari，方便不同用戶群體的需求。
4. 詳細字體信息：除了字體名稱，WhatFont 還顯示字體的其他屬性，如字體大小、字體粗細、行高等，提供了豐富的字體信息。
5. 適配性強：WhatFont 能夠識別常見的字體文件類型，包括 Google Fonts 和 Adobe Fonts 中的字體。