四個強大的開源工具，幫你大幅提升開發體驗
作者：程序員Sunday
Squoosh.app 是一個 開源的 在線圖像壓縮工具，主要用于優化圖像的大小和質量。它由 Google Chrome Labs 開發，支持多種圖像格式和壓縮算法，可以直接在瀏覽器中運行，無需安裝軟件。
Hello，大家好，我是 Sunday。
今天給大家介紹 4 個開發必備工具，涉及到：圖片壓縮，Git 可視化，組件庫構建、字體探索
01.Squoosh 輕松實現圖像優化
官方地址：https://squoosh.app/
Squoosh.app 是一個 開源的 在線圖像壓縮工具，主要用于優化圖像的大小和質量。它由 Google Chrome Labs 開發，支持多種圖像格式和壓縮算法，可以直接在瀏覽器中運行，無需安裝軟件。
作用
- 圖像壓縮：Squoosh 支持多種壓縮格式，如 JPEG、WebP、PNG 等。用戶可以通過調節參數來壓縮圖像大小，同時保持較高的圖像質量。
- 格式轉換：Squoosh 支持將圖像從一種格式轉換為另一種格式，如將 PNG 轉換為 WebP。
- 圖像優化：工具提供了高級功能，如色彩管理、降噪處理、裁剪、縮放等，幫助用戶優化圖像。
- 離線使用：由于它是一個 PWA（漸進式 Web 應用程序），可以在離線狀態下使用。
特點
- 實時預覽：Squoosh 提供實時預覽功能，用戶可以即時查看壓縮前后的效果對比。
- 拖放支持：用戶可以通過拖放圖像文件到瀏覽器中快速開始壓縮操作。
- 多種壓縮算法：支持 MozJPEG、OptiPNG、WebP、AVIF 等多種壓縮算法，用戶可以根據需要選擇最合適的算法。
- 完全在本地執行：所有操作都在本地瀏覽器中執行，無需上傳到服務器，因此數據隱私得到保障。
02.SourceTree Git可視化工具
官方地址：https://www.sourcetreeapp.com/
圖片
Sourcetree 是 Atlassian 開發的一款 免費的 Git 和 Mercurial 圖形化客戶端，可以讓你不通過 Git 指令即可完成復雜的 Git 操作方式。這個工具我已經使用了好多年，在這里推薦給大家
作用
- 版本控制管理：Sourcetree 為 Git 和 Mercurial 提供了用戶友好的界面，允許用戶輕松地執行常見的版本控制任務，如提交、推送、拉取、合并和分支管理。
- 可視化操作：提供了直觀的可視化界面，幫助用戶查看和理解分支結構、提交歷史、變更對比等信息。
- 遠程倉庫管理：支持與多種遠程代碼托管服務（如 GitHub、Bitbucket、GitLab）集成，用戶可以直接從 Sourcetree 中管理和同步遠程倉庫。
- 代碼對比和合并：集成了文件對比和合并工具，幫助用戶更容易地處理代碼沖突和查看代碼差異。
特點
- 用戶友好的圖形界面：相比命令行，Sourcetree 的 GUI 更加直觀，尤其適合不熟悉 Git 命令的用戶。
- 支持多倉庫管理：Sourcetree 允許用戶同時管理多個 Git 或 Mercurial 倉庫，可以方便地切換和操作不同項目。
- 強大的分支管理：提供了詳細的分支管理功能，用戶可以輕松地創建、切換、合并和刪除分支，同時還可以查看分支的拓撲結構。
- 內置終端：雖然主要是 GUI 工具，但 Sourcetree 也提供了內置的終端窗口，方便高級用戶直接輸入 Git 命令。
- 豐富的日志和歷史查看：用戶可以通過 Sourcetree 方便地查看提交歷史、日志、文件變更記錄等，支持按時間、分支、標簽等多維度進行篩選。
03.Storybook 輕松構建你的組件庫
官方地址：https://storybook.js.org/
圖片
Storybook 是一個用于開發和測試 UI 組件的開源工具。它提供了一個獨立的開發環境，讓我們可以在不依賴應用程序的情況下構建、查看和測試組件。
作用
- 獨立開發 UI 組件：Storybook 提供了一個隔離的環境，允許開發者單獨開發和測試 UI 組件，而不必依賴于整個應用程序的上下文。
- 組件文檔化：Storybook 可以自動生成組件的文檔，使團隊成員能夠輕松了解每個組件的用途、屬性、狀態和行為。
- 測試與展示：開發者可以在 Storybook 中實時預覽和測試組件的不同狀態，確保它們在各種場景下表現良好。
- 設計系統管理：Storybook 支持組織和管理組件庫，使其成為設計系統的一部分，方便跨團隊共享和復用。
特點
- 支持多種前端框架：Storybook 支持 React、Vue、Angular、Svelte、Web Components 等多種前端技術。
- 實時預覽：Storybook 提供即時的實時預覽功能，開發者可以查看組件的實時變更，而無需重新加載整個應用。
- 擴展性強：通過插件，Storybook 可以擴展以支持不同的功能，如 Accessibility（可訪問性）檢查、性能測試、樣式指南等。
- 自動化文檔生成：Storybook 可以從組件的代碼中自動生成文檔，支持 TypeScript 類型、PropTypes 等注釋。
- 交互式展示：開發者可以為組件添加各種不同的“故事”（場景），以展示組件在不同狀態下的表現。
使用示例
- 首先創建一個具體的 Vue3 或者 React 項目
- 在項目根目錄執行如下指令：
pnpm dlx storybook@latest init- 創建 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>- 創建對應的 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 按鈕'
}- 最后執行如下指令，啟動 Storybook：
npm run storybook04.WhatFont 字體查看器
插件地址：https://chromewebstore.google.com/detail/whatfont/jabopobgcpjmedljpbcaablpmlmfcogm
圖片
WhatFont 是一個用于識別網頁上字體的工具，幫助用戶快速了解網頁中使用的字體類型。它是一個瀏覽器擴展插件，支持多種主流瀏覽器，如 Chrome 和 Safari。
作用
- 字體識別：WhatFont 可以識別網頁中使用的字體，包括字體的名稱、字體家族、字體大小、行高等屬性。
- 快速查看：用戶可以直接在網頁上點擊字體，快速查看該字體的詳細信息，而無需查看頁面的源代碼或樣式表。
- 設計輔助：對于網頁設計師和開發者，WhatFont 是一個便利的工具，可以幫助他們確定網頁上使用的字體，并可能在自己的項目中使用相同或類似的字體。
特點
- 易于使用：WhatFont 的操作非常簡單，用戶只需安裝擴展并激活它，然后點擊網頁上的文本即可查看字體信息。
- 實時預覽：插件允許用戶在網頁上實時預覽所選文本的字體信息，使得字體識別變得更加直觀。
- 支持多種瀏覽器：WhatFont 提供了針對主流瀏覽器的擴展版本，如 Chrome 和 Safari，方便不同用戶群體的需求。
- 詳細字體信息：除了字體名稱，WhatFont 還顯示字體的其他屬性，如字體大小、字體粗細、行高等，提供了豐富的字體信息。
- 適配性強：WhatFont 能夠識別常見的字體文件類型，包括 Google Fonts 和 Adobe Fonts 中的字體。
責任編輯：武曉燕
來源：
程序員Sunday
