简体中文
EnglishHow to Browse and Find a Specific Tool in Addy's Web Dev Toolkit
Updated
Addy's Web Dev Toolkit is a curated directory of 755 links for people who build websites, organized into task-based sections rather than a single searchable database. To find a specific tool, start from the section that matches your task (design, icons, inspiration, learning), check "Newest additions" if you want recent entries, and use the "View all" link inside a category to see its full set. Each listing links out to the tool's own site, so the toolkit itself is a navigation layer, not a workspace.
Start from the section that matches your task
The toolkit groups entries by what you're trying to do, not by tool type. Visible sections include:
- Newest additions — the latest hand-picked tools and resources
- Get inspired — galleries, showcases, and creative sparks (73 entries in this category)
- Level up — learning-oriented resources
- Design tools — tools for visual and interface work
- Icons galore — icon sets and related assets
If your task is "I need an icon set," go to Icons galore. If it's "I need a font," the design-adjacent sections and Newest additions are the better entry points. Matching your task to the section name is faster than scanning the whole list.
Use "Newest additions" when you want recent entries
The Newest additions section surfaces the most recently hand-picked items, which is useful when you already know the common tools in a category and want something newer. Examples currently listed there:
| Tool | What it does | Cost signal |
|---|---|---|
| Free Faces Gallery | Curated typefaces under various free licences, organized by style | Free |
| Archify | Open-source agent skill that generates validated HTML diagrams (architecture, workflow, sequence, data-flow, lifecycle) from codebases or descriptions | Free |
| TinyPNG | Image compression and conversion for AVIF, WebP, PNG, JPEG without visible quality loss | Free |
| CSS Zen Garden | Long-running demonstration of CSS design using the same HTML with different stylesheets | Free |
| Dirtyline Studio Freebies | Free display and handwritten fonts | Free |
| My OG Image | Open Graph image generator with editable templates, custom dimensions, brand assets, and PNG/JPEG/WebP export | Free |
| VS Code Themes | Browse and preview VS Code themes by language, dark/light variant, popularity, and install counts | Free |
| VectorAI | AI-powered vector graphics creation | Free |
| Easing Functions Cheat Sheet | Interactive comparison of easing functions for animation timing | Free |
| Debuggex | Visual regex tester and debugger with match visualization, test data, unit tests, and a reusable regex library | Free |
"Free" here reflects the label shown on each listing, not a guarantee about every feature or future pricing.
Follow "View all" to see a full category
Category sections show a preview rather than the complete set. The "Get inspired" section, for example, displays a subset and offers a View all 73 link. Clicking that expands the category to its full list. If a section looks short, it's almost certainly truncated — use the View all link before concluding a tool isn't listed.
Open a tool by clicking its external link
Each listing is a card with a name, a short description, and an open_in_new external link. The toolkit does not host the tools; clicking through takes you to the tool's own site, where you actually use it. Some cards show "No preview" with an image placeholder — that only means no thumbnail was captured, not that the link is broken.
A practical browsing sequence
- Identify your task in one phrase (e.g., "compress images," "pick an easing curve," "find free fonts").
- Jump to the matching section heading.
- If nothing fits, check Newest additions — recent picks often cover niche needs.
- If the section looks incomplete, click View all to expand it.
- Click the external link on the card to open the tool and evaluate it on its own site.
Common snags
- Treating it as a search engine. The page is organized by curated sections; there's no indication of a keyword search box, so browsing by category is the intended path.
- Stopping at the preview. Sections are truncated by design. Missing the View all link is the most likely reason a tool seems absent.
- Reading "No preview" as unavailable. It's a missing thumbnail, not a dead entry.
- Assuming "Free" covers everything. The label appears on listings, but each tool's own site defines its actual terms.