Every developer has their secret toolkit — those bookmarked gems that make daily work faster and less frustrating. After years of collecting, testing, and abandoning hundreds of tools, here's my curated list of the ones that actually stuck.
No fluff. Just tools I genuinely use.
📚 Documentation & Learning
DevDocs.io
Multiple API documentations in one fast, searchable, offline-capable interface. I have it open in a pinned tab at all times. Covers everything from JavaScript to Redis to Docker.
Pro tip: Press / to focus search, enable only the docs you need to reduce noise.
MDN Web Docs
The definitive source for HTML, CSS, and JavaScript. If Stack Overflow gives you the answer, MDN explains why it works.
Can I Use
Before using that shiny new CSS property or JS API, check browser support here. Saved me from countless "works on my machine" moments.
web.dev
Google's resource for modern web development best practices. Especially useful for performance optimization and Core Web Vitals.
🎮 Online Sandboxes & Playgrounds
CodeSandbox
Full-fledged development environment in the browser. Perfect for prototyping React/Vue/Angular apps or sharing reproducible bug reports.
StackBlitz
Similar to CodeSandbox but runs Node.js natively in the browser. Boots instantly. I use it for quick Node/Express experiments.
CodePen
The classic. Best for HTML/CSS/JS snippets and front-end experiments. Great community for inspiration too.
Replit
Supports 50+ languages. Need to quickly test a Python script, Go function, or Rust snippet? This is the place.
TypeScript Playground
Official TS playground with great error explanations. Essential for understanding how TypeScript compiles to JavaScript.
Regex101
Write, test, and debug regex with real-time explanations. The "explanation" panel has taught me more about regex than any tutorial.
🤖 AI Assistants & Coding Helpers
Claude
My go-to for complex coding questions, debugging, code reviews, and explaining unfamiliar codebases. Particularly strong at understanding context and nuance.
GitHub Copilot
AI pair programmer right in your IDE. Autocompletes functions, writes tests, and occasionally reads your mind. Worth every penny.
Phind
AI search engine optimized for developers. Gives direct answers with sources instead of making you click through 10 links.
Perplexity
Another AI-powered search. Great for researching technical topics when you need cited sources.
🔌 API Development & Testing
Postman
The industry standard for API testing. Collections, environments, automated tests — it does everything. The free tier is generous.
Insomnia
Lighter alternative to Postman. Cleaner UI, great for REST and GraphQL. I switch between both depending on the project.
Hoppscotch
Open-source, runs entirely in the browser. No installation needed. Perfect for quick API tests.
HTTPie
Beautiful command-line HTTP client. Also has a web version. When curl feels too cryptic, HTTPie is there.
# Instead of curl with all its flags:
http POST api.example.com/users name=John email=john@example.com
Webhook.site
Generates a unique URL that captures all incoming requests. Invaluable for debugging webhooks and OAuth callbacks.
JSON Placeholder
Free fake API for testing and prototyping. When you need dummy data and don't want to spin up a backend.
🎨 Design & CSS Tools
Tailwind CSS Cheat Sheet
All Tailwind classes on one searchable page. Faster than digging through docs.
Coolors
Color palette generator. Press spacebar to generate new palettes. Export to various formats.
Realtime Colors
Visualize your color palette on a real website template. Helps catch bad color combinations before coding.
Google Fonts
Free, fast, and huge library. Filter by properties to find the perfect typeface.
Fontsource
Self-host Google Fonts via npm. Better performance, no external requests, GDPR-friendly.
CSS Grid Generator
Visual grid builder. Draw your layout, copy the CSS.
Flexbox Froggy & Grid Garden
Learn Flexbox and Grid through games. Fun way to solidify fundamentals.
Neumorphism.io
Generate soft UI shadows. Because getting neumorphic shadows right manually is tedious.
Clippy
CSS clip-path generator. Create complex shapes visually.
🛠️ Generators & Utilities
readme.so
Drag-and-drop README generator. Produces clean, professional READMEs in minutes.
gitignore.io
Generate .gitignore files for any tech stack. Just type your languages/frameworks.
Transform Tools
Convert anything to anything: JSON to TypeScript, SVG to React, HTML to JSX, and dozens more.
Mockaroo
Generate realistic test data in CSV, JSON, SQL, and more. Customizable fields and data types.
Lorem Picsum
Random placeholder images. Just use https://picsum.photos/400/300 for a 400x300 image.
Favicon.io
Generate favicons from text, images, or emojis. Outputs all the sizes you need.
Squoosh
Image compression by Google. Compare different formats and quality settings side by side.
SVGOMG
Optimize SVG files. Dramatically reduces file size while keeping quality.
🔍 Performance & Testing
PageSpeed Insights
Google's official performance testing tool. Core Web Vitals, suggestions, and metrics.
Lighthouse
Built into Chrome DevTools, but also available as CLI. Audits performance, accessibility, SEO, and best practices.
WebPageTest
Advanced performance testing from multiple locations and devices. Film strip view shows exactly what users see during load.
BrowserStack
Test on real devices and browsers. Essential when you don't own 50 different phones.
Responsively
Free app that shows your site on multiple screen sizes simultaneously. Huge time-saver for responsive development.
📊 Cheat Sheets & References
OverAPI
Cheat sheets for almost every language. Clean, printable format.
Cheatography
User-contributed cheat sheets on everything from Vim to Docker to Excel.
Devhints
Beautiful, well-organized cheat sheets. My favorite for quick syntax lookups.
QuickRef.me
Another excellent cheat sheet collection with clean design.
Git Explorer
Don't know the right Git command? Describe what you want to do, get the command.
🔐 Security
Have I Been Pwned
Check if your email was in a data breach. Also has an API for password checking.
Security Headers
Scan your site's HTTP security headers. Quick way to spot misconfigurations.
SSL Labs
Deep analysis of your SSL configuration. Grades your setup and suggests improvements.
💡 Bonus: Browser Extensions
- Wappalyzer — Identify technologies used on any website
- JSON Viewer — Pretty-print JSON in the browser
- ColorZilla — Pick colors from any webpage
- WhatFont — Identify fonts on any site
- Vimium — Navigate the web with Vim keybindings
My Typical Day
To give you an idea of how these fit together:
- Morning: Check DevDocs for API reference while coding
- Debugging: Test endpoints in Hoppscotch, ask Claude when stuck
- Styling: Generate palette in Coolors, reference Tailwind cheat sheet
- PR Review: Use Transform Tools to convert JSON schemas
- Before deploy: Run Lighthouse audit, compress images with Squoosh
Your Turn
This list reflects my workflow — yours might be completely different. The best toolkit is the one you actually use.
What are your daily essentials? I'm always looking to add new tools to the collection. Drop your favorites in the comments!
Found a new tool here? Give this post a ❤️ and follow for more practical dev content!
Top comments (0)