Skip to content

README.en.md

Latest commit

 

History

History
148 lines (126 loc) · 5.05 KB

README.en.md

File metadata and controls

148 lines (126 loc) · 5.05 KB

🚀 DevTools Hub

⚡ All‑in‑One Developer Toolbox | Pure Frontend | Offline Ready | Open Source

Fast. Lightweight. Privacy‑friendly.

GitHub stars License Website PWA i18n

English | 中文说明

✨ TL;DR

Visit directly (no install required): https://wxingda.github.io/devtools-hub

10+ everyday dev utilities in one place: Passwords · Color · Regex · JSON · URL · Base64 · Hash · Timestamp · QR · Diff · CSS Units. Works offline (PWA). Zero dependencies.

Star GitHub
If this helps you, a Star ⭐ really helps others discover it. Thanks!
PWA, offline, zero‑dependency — handy to keep bookmarked.

## 🎯 Why DevTools Hub? - ✅ Offline first (privacy & reliability) - ⚡ Zero dependencies (pure vanilla JS / HTML / CSS) - 🌓 Built‑in dark mode - 🌐 Multi‑language (EN / ZH) - 📱 Responsive across devices - ⌨️ Keyboard shortcuts (Alt + 1..0) - 📦 Lightweight (<100KB core) - 🔁 Fast context switching between tools - ⭐ Share + Star CTA integrated

🧰 Included Tools

Tool Description Highlights
Password Generator Secure random passwords Custom length, strength meter, copy
Color Palette Color picker & format conversions HEX / RGB / HSL, palette generation
Regex Tester Live regex evaluation Match listing, group insight
JSON Formatter Beautify & minify Validation status, (Tree view incoming)
URL Encoder Encode / decode One‑click actions
Base64 Encoder Base64 encode / decode Unicode safe
Hash Calculator MD5 / SHA1 / SHA256 Web Crypto + fallback
Timestamp Converter Unix ↔ Date ISO / UTC / Local formats
QR Generator Text / URL → QR (Offline generation planned)
Text Diff Compare two text blocks Add / remove / modify stats
CSS Unit Converter px/rem/em/vw/vh/% Batch output

🚀 Quick Start

Online (Recommended)

Just open: https://wxingda.github.io/devtools-hub

Local

git clone https://github.com/wxingda/devtools-hub.git
cd devtools-hub
# Open directly
open index.html  # macOS
start index.html # Windows
xdg-open index.html # Linux

Or via a tiny static server:

python -m http.server 8000
# or
npx serve .

Install as PWA

  1. Open the live site
  2. Click browser install / add to home screen
  3. Launch like a native app

⌨️ Shortcuts

Action Keys
Switch Tool 1..10 Alt + (1..0)
Toggle Theme Ctrl/Cmd + D
Clear Current Tool Ctrl/Cmd + K
Blur / escape Esc

Internationalization

  • Current: English / Simplified Chinese
  • Planned: ES, JA, KO
  • Contributions welcome: see I18N_DICTIONARY in script.js.

Development

No build step. Open and hack.

# Start editing
$EDITOR index.html script.js styles.css

Architecture Notes

  • Single‑page multi‑tool layout
  • Each tool grouped in a .tool container
  • Basic namespace: window.DevToolsHub (extensibility hooks incoming)
  • Service Worker: split core/runtime caches + offline fallback page

Roadmap (Next Phase)

  • JSON Tree View UI
  • Offline QR generation (remove external dependency)
  • Plugin registration API (registerTool({id,title,icon, mount, unmount}))
  • Local usage analytics panel (private, localStorage only)
  • Color contrast checker & export palette
  • File hashing + large file streaming
  • Diff: word/char granular highlighting
  • Additional language packs

Contributing

  1. Fork → feature branch → commit → PR
  2. Keep PR focused (one feature)
  3. Add a short English summary
  4. Screenshots appreciated for UI changes
git checkout -b feat/awesome-tool
git commit -m "feat: add awesome tool"
git push origin feat/awesome-tool

Want to help with English docs / i18n? Open an issue first if adding a new language.

Support

If this project helped you:

  • ⭐ Star the repo
  • 🐛 Report an issue
  • 💡 Suggest a feature
  • 🔄 Share it with teammates

License

MIT © DevTools Hub / wxingda

If you like it, a Star means a lot ⭐

Live Demo · Issues · Discussions