简体中文
EnglishWhat Kinds of Tools and Resources Are in Addy's Web Dev Toolkit?
Updated
Addy's Web Dev Toolkit is a curated directory of 755 hand-picked tools and resources for people who build websites, organized into categories such as newest additions, inspiration, learning, design tools, and icons. If you want to know whether it covers a specific need — image optimization, fonts, regex debugging, animation timing, or design inspiration — the sections below map the main types of entries you'll find, based on the site's own listings.
Design and visual tools
These entries handle the visual production side of building a site, from compressing assets to generating graphics.
| Tool | What it does | Cost signal |
|---|---|---|
| TinyPNG | Image compression and conversion for AVIF, WebP, PNG, and JPEG without visible quality loss | Free |
| My OG Image | Open Graph image generator with editable templates, custom dimensions, brand assets, and PNG/JPEG/WebP export | Free |
| VectorAI | AI-powered vector graphic creation | Free |
| Archify | Open-source agent skill that generates validated HTML architecture, workflow, sequence, data-flow, and lifecycle diagrams from codebases or descriptions | Free |
The pattern here is practical output: you bring a file or a description, and the tool returns a compressed image, a social preview, a vector, or a diagram.
Fonts and typography resources
Typography entries lean toward free licensing and browsability rather than commercial font marketplaces.
- Free Faces Gallery — a curated collection of typefaces under a variety of free licences, organized by style for easy browsing.
- Dirtyline Studio Freebies — a collection of free display and handwritten fonts.
If your project needs a display or handwritten face and you want to stay within free licensing, these two are the direct starting points in the directory.
Developer utilities
These are the debugging and reference tools that support day-to-day front-end work.
- Debuggex — a visual regular expression tester and debugger with match visualization, test data, unit tests, and a reusable regex library.
- Easing Functions Cheat Sheet — an interactive reference for comparing and choosing easing functions that control the rate of change in animations.
- VS Code Themes — browse and preview Visual Studio Code themes across languages, dark and light variants, popularity, and installation counts before installing.
Each one solves a comparison or verification problem: which regex actually matches, which easing curve produces the motion you want, which theme you'll be looking at all day.
Inspiration and learning content
The directory also carries a "Get inspired" section described as galleries, showcases, and creative sparks, with 73 entries in that category.
- CSS Zen Garden — a long-running demonstration showing how radically different visual designs can be created from the same HTML by changing only the stylesheet. It appears both as a newest addition and as an inspiration/learning entry.
This category is for when you need a reference point or a demonstration of technique rather than a tool that processes an input.
How to decide if it fits your need
Use the category structure as your filter:
- Optimizing or generating assets → design and visual tools (TinyPNG, My OG Image, VectorAI, Archify).
- Choosing typefaces under free licences → font and typography resources.
- Debugging or configuring your editor and animations → developer utilities.
- Looking for technique demonstrations or creative direction → inspiration and learning.
The site describes itself as "no fluff, just the good stuff," and the entries above are labeled Free where the listing shows a cost signal. The directory does not present pricing tiers or login requirements in the material available, so treat each linked tool's own terms as the authority before relying on it in a production workflow.