How Are Tools Selected and Organized in Addy's Web Dev Toolkit?

Addy's Web Dev Toolkit is a hand-picked directory of tools and resources for people who build websites, currently listing 755 links. It differs from a search engine or an automated aggregator in two ways: every entry is manually selected, and every entry is placed into a themed section rather than dumped into one flat list. That makes it most useful when you want a short, pre-filtered set of options for a specific task — for example, picking an image compressor, an easing function, or a font source — instead of scrolling through search results.

What "hand-picked" actually means here

The site describes itself as "a lovingly curated collection of tools, resources, and inspiration for designers and developers. No fluff, just the good stuff." The selection model is editorial, not algorithmic:

• Manual curation. Entries are chosen by a person, not scraped or auto-ranked by traffic.
• A visible, growing count. The page shows "755 links and counting," so the collection is maintained rather than frozen.
• A "Newest additions" section. Recently added tools appear at the top, which tells you the directory is actively updated.

The practical consequence: you get fewer results than a search engine, but each result has already passed a relevance filter. The trade-off is that you're trusting one curator's judgment, and coverage will be narrower than a general search.

How the collection is organized

Entries are grouped into themed sections rather than sorted by category alone. The headings visible on the page include:

Some sections carry a "View all" link with a count — for example, "Get inspired" shows "View all 73." That means a section can hold far more entries than the handful previewed on the main page, so the visible cards are a sample, not the full section.

What each entry tells you

Every listing follows the same compact format, which is what makes the directory scannable:

• Name — e.g. TinyPNG, CSS Zen Garden, Debuggex.
• A one-line description of what it does.
• A free/paid label — the entries shown are marked "Free."
• An external link that opens the tool itself.
• An info icon for additional detail.

Examples from the "Newest additions" section show the range:

• TinyPNG — image compression and conversion for AVIF, WebP, PNG, and JPEG without visible quality loss.
• CSS Zen Garden — a long-running demonstration of how the same HTML can look radically different by changing only the stylesheet.
• Easing Functions Cheat Sheet — an interactive comparison for choosing animation easing functions.
• Debuggex — a visual regular expression tester and debugger with match visualisation and reusable regex.
• My OG Image — a free Open Graph image generator with editable templates and PNG, JPEG, or WebP export.
• VS Code Themes — browse and preview themes by language, dark/light variant, and popularity before installing.

Notice the pattern: each entry answers "what is this and what does it do" in one line, then gets out of the way. There's no long review to read before you decide whether to click.

When this directory is worth using

Use it when:

• You need a tool for a specific, well-defined job (compress images, test a regex, generate an OG image) and want a vetted shortlist rather than ten browser tabs of search results.
• You want inspiration or learning material and would rather browse a curated gallery than a feed.
• You care about the free/paid label being visible before you click.

Look elsewhere when:

• You need something niche or very new — a 755-link collection can't cover everything, and a search engine will reach further.
• You want comparison data like pricing tiers or feature matrices; the entries give a description and a free/paid tag, not a side-by-side breakdown.
• You need guaranteed freshness on a specific tool — the "Newest additions" section shows recent picks, but individual entries don't display a last-checked date.

A quick way to use it

1. Open the toolkit and scan the section headings to find the theme closest to your task.
2. Read the one-line descriptions in that section — this is usually enough to shortlist two or three.
3. Check the free/paid label against your constraints.
4. Click through to the tool via its external link and evaluate it in context.

If nothing in the previewed cards fits, follow the "View all" link for that section before giving up on it — the preview only shows a fraction of what's inside.