Find, evaluate, and maintain high-quality external resources for JavaScript concept documentation, including auditing for broken and outdated links
Use this skill to find, evaluate, add, and maintain high-quality external resources (articles, videos, courses) for concept documentation pages. This includes auditing existing resources for broken links and outdated content.
Follow these five phases for comprehensive resource curation.
Before adding new resources, audit what's already there:
Compare current resources against targets:
| Section | Target Count | Icon |
|---|---|---|
| Reference | 2-4 MDN links | book |
| Articles | 4-6 articles | newspaper |
| Videos | 3-4 videos | video |
| Courses | 1-3 (optional) | graduation-cap |
| Books | 1-2 (optional) | book |
Ask:
Search trusted sources using targeted queries:
For Articles:
[concept] javascript tutorial site:javascript.info
[concept] javascript explained site:freecodecamp.org
[concept] javascript site:dev.to
[concept] javascript deep dive site:2ality.com
[concept] javascript guide site:css-tricks.com
For Videos:
YouTube: [concept] javascript explained
YouTube: [concept] javascript tutorial
YouTube: jsconf [concept]
YouTube: [concept] javascript fireship
YouTube: [concept] javascript web dev simplified
For MDN:
[concept] site:developer.mozilla.org
[API name] MDN
Every resource needs a specific, valuable description:
Formula:
Sentence 1: What makes this resource unique OR what it specifically covers
Sentence 2: Why reader should click (what they'll gain, who it's best for)
| Priority | Source | URL | Best For |
|---|---|---|---|
| 1 | MDN Web Docs | developer.mozilla.org | API docs, guides, compatibility |
| 2 | ECMAScript Spec | tc39.es/ecma262 | Authoritative behavior |
| 3 | Node.js Docs | nodejs.org/docs | Node-specific APIs |
| 4 | Web.dev | web.dev | Performance, best practices |
| 5 | Can I Use | caniuse.com | Browser compatibility |
| Priority | Source | Why Trusted |
|---|---|---|
| 1 | javascript.info | Comprehensive, exercises, well-maintained |
| 2 | MDN Guides | Official, accurate, regularly updated |
| 3 | freeCodeCamp | Beginner-friendly, practical |
| 4 | 2ality (Dr. Axel) | Deep technical dives, spec-focused |
| 5 | CSS-Tricks | DOM, visual topics, well-written |
| 6 | dev.to (Lydia Hallie) | Visual explanations, animations |
| 7 | LogRocket Blog | Practical tutorials, real-world |
| 8 | Smashing Magazine | In-depth, well-researched |
| 9 | Digital Ocean | Clear tutorials, examples |
| 10 | Kent C. Dodds | Testing, React, best practices |
| Priority | Creator | Style | Best For |
|---|---|---|---|
| 1 | Fireship | Fast, modern, entertaining | Quick overviews, modern JS |
| 2 | Web Dev Simplified | Clear, beginner-friendly | Beginners, fundamentals |
| 3 | Fun Fun Function | Deep-dives, personality | Understanding "why" |
| 4 | Traversy Media | Comprehensive crash courses | Full topic coverage |
| 5 | JSConf/dotJS | Expert conference talks | Advanced, in-depth |
| 6 | Academind | Thorough explanations | Complete understanding |
| 7 | The Coding Train | Creative, visual | Visual learners |
| 8 | Wes Bos | Practical, real-world | Applied learning |
| 9 | The Net Ninja | Step-by-step tutorials | Following along |
| 10 | Programming with Mosh | Professional, clear | Career-focused |
| Source | Type | Notes |
|---|---|---|
| javascript.info | Free | Comprehensive, exercises |
| Piccalilli | Free | Well-written, modern |
| freeCodeCamp | Free | Project-based |
| Frontend Masters | Paid | Expert instructors |
| Egghead.io | Paid | Short, focused lessons |
| Udemy (top-rated) | Paid | Check reviews carefully |
| Codecademy | Freemium | Interactive |
| Red Flag | Why It Matters |
|---|---|
Uses var everywhere | Outdated for ES6+ topics |
| Teaches anti-patterns | Harmful to learners |
| Primarily other languages | Wrong focus |
| Hard paywall (no preview) | Inaccessible |
| Pre-2015 for modern topics | Likely outdated |
| Low quality comments | Often indicates issues |
| Factual errors | Spreads misinformation |
| Clickbait title, thin content | Wastes reader time |
| Topic Category | Minimum Year | Reasoning |
|---|---|---|
| ES6+ Features | 2015+ | ES6 released June 2015 |
| Promises | 2015+ | Native Promises in ES6 |
| async/await | 2017+ | ES2017 feature |
| ES Modules | 2018+ | Stable browser support |
| Optional chaining (?.) | 2020+ | ES2020 feature |
| Nullish coalescing (??) | 2020+ | ES2020 feature |
| Top-level await | 2022+ | ES2022 feature |
| Fundamentals (closures, scope, this) | Any | Core concepts don't change |
| DOM manipulation | 2018+ | Modern APIs preferred |
| Fetch API | 2017+ | Widespread support |
Rule of thumb: For time-sensitive topics, prefer content from the last 3-5 years. For fundamentals, older classic content is often excellent.
Sentence 1: What makes this resource unique OR what it specifically covers
Sentence 2: Why reader should click (what they'll gain, who it's best for)
<Card title="JavaScript Visualized: Promises & Async/Await — Lydia Hallie" icon="newspaper" href="https://dev.to/lydiahallie/javascript-visualized-promises-async-await-5gke">
Animated GIFs showing the call stack, microtask queue, and event loop in action.
The visuals make Promise execution order finally click for visual learners.
</Card>
<Card title="What the heck is the event loop anyway? — Philip Roberts" icon="video" href="https://www.youtube.com/watch?v=8aGhZQkoFbQ">
The legendary JSConf talk that made the event loop click for millions of developers.
Philip Roberts' live visualizations are the gold standard — a must-watch.
</Card>
<Card title="You Don't Know JS: Scope & Closures — Kyle Simpson" icon="book" href="https://github.com/getify/You-Dont-Know-JS/blob/2nd-ed/scope-closures/README.md">
Kyle Simpson's deep dive into JavaScript's scope mechanics and closure behavior.
Goes beyond the basics into edge cases and mental models for truly understanding scope.
</Card>
<Card title="JavaScript Promises in 10 Minutes — Web Dev Simplified" icon="video" href="https://www.youtube.com/watch?v=DHvZLI7Db8E">
Quick, clear explanation covering Promise creation, chaining, and error handling.
Perfect starting point if you're new to async JavaScript.
</Card>
<Card title="How to Escape Async/Await Hell — Aditya Agarwal" icon="newspaper" href="https://medium.com/free-code-camp/avoiding-the-async-await-hell-c77a0fb71c4c">
The pizza-and-drinks ordering analogy makes parallel vs sequential execution crystal clear.
Essential reading once you know async/await basics but want to write faster code.
</Card>
<!-- TOO GENERIC -->
<Card title="Promises Tutorial" icon="newspaper" href="...">
A comprehensive guide to Promises in JavaScript.
</Card>
<!-- NO VALUE PROPOSITION -->
<Card title="Learn Closures" icon="video" href="...">
This video explains closures in JavaScript.
</Card>
<!-- VAGUE, NO SPECIFICS -->
<Card title="JavaScript Guide" icon="newspaper" href="...">
Everything you need to know about JavaScript.
</Card>
<!-- JUST RESTATING THE TITLE -->
<Card title="Understanding the Event Loop" icon="video" href="...">
A video about understanding the event loop.
</Card>
| Avoid | Why | Use Instead |
|---|---|---|
| "comprehensive guide to..." | Vague, overused | Specify what's covered |
| "learn all about..." | Generic | What specifically will they learn? |
| "everything you need to know..." | Hyperbolic | Be specific |
| "great tutorial on..." | Subjective filler | Why is it great? |
| "explains X" | Too basic | How does it explain? What's unique? |
| "in-depth look at..." | Vague | What depth? What aspect? |
| Good Phrase | Example |
|---|---|
| "step-by-step walkthrough" | "Step-by-step walkthrough of building a Promise from scratch" |
| "visual explanation" | "Visual explanation with animated diagrams" |
| "deep dive into" | "Deep dive into V8's optimization strategies" |
| "practical examples of" | "Practical examples of closures in React hooks" |
| "the go-to reference for" | "The go-to reference for array method signatures" |
| "finally makes X click" | "Finally makes prototype chains click" |
| "perfect for beginners" | "Perfect for beginners new to async code" |
| "covers X, Y, and Z" | "Covers creation, chaining, and error handling" |
For each resource in the concept page:
| Status | Meaning | Action |
|---|---|---|
| 200 | OK | Keep, continue to content check |
| 301/302 | Redirect | Update to final URL |
| 404 | Not Found | Remove or find replacement |
| 403 | Forbidden | Check manually, may be geo-blocked |
| 5xx | Server Error | Retry later, may be temporary |
For each accessible link:
For each resource:
After auditing all resources:
## Reference
<CardGroup cols={2}>
<Card title="[Main Topic] — MDN" icon="book" href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/...">
Official MDN documentation covering [specific aspects].
The authoritative reference for [what it's best for].
</Card>
<Card title="[Related API/Concept] — MDN" icon="book" href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/...">
[What this reference covers].
Essential reading for understanding [specific aspect].
</Card>
</CardGroup>
## Articles
<CardGroup cols={2}>
<Card title="[Article Title]" icon="newspaper" href="...">
[What makes it unique/what it covers].
[Why read this one/who it's for].
</Card>
<Card title="[Article Title]" icon="newspaper" href="...">
[Specific coverage].
[Value proposition].
</Card>
<Card title="[Article Title]" icon="newspaper" href="...">
[Unique angle].
[Why it's worth reading].
</Card>
<Card title="[Article Title]" icon="newspaper" href="...">
[What it covers].
[Best for whom].
</Card>
</CardGroup>
## Videos
<CardGroup cols={2}>
<Card title="[Video Title] — [Creator]" icon="video" href="https://www.youtube.com/watch?v=...">
[What it covers/unique approach].
[Why watch/who it's for].
</Card>
<Card title="[Video Title] — [Creator]" icon="video" href="https://www.youtube.com/watch?v=...">
[Specific focus].
[What makes it stand out].
</Card>
<Card title="[Video Title] — [Creator]" icon="video" href="https://www.youtube.com/watch?v=...">
[Coverage].
[Value].
</Card>
</CardGroup>
<Card title="[Book Title] — [Author]" icon="book" href="...">
[What the book covers and its approach].
[Who should read it and what they'll gain].
</Card>
<CardGroup cols={2}>
<Card title="[Course Title] — [Platform]" icon="graduation-cap" href="...">
[What the course covers].
[Format and who it's best for].
</Card>
</CardGroup>
Use this template to document audit findings.
# Resource Audit Report: [Concept Name]
**File:** `/docs/concepts/[slug].mdx`
**Date:** YYYY-MM-DD
**Auditor:** [Name/Claude]
---
## Summary
| Metric | Count |
|--------|-------|
| Total Resources | XX |
| Working Links (200) | XX |
| Broken Links (404) | XX |
| Redirects (301/302) | XX |
| Outdated Content | XX |
| Generic Descriptions | XX |
## Resource Count vs Targets
| Section | Current | Target | Status |
|---------|---------|--------|--------|
| Reference (MDN) | X | 2-4 | ✅/⚠️/❌ |
| Articles | X | 4-6 | ✅/⚠️/❌ |
| Videos | X | 3-4 | ✅/⚠️/❌ |
| Courses | X | 0-3 | ✅/⚠️/❌ |
---
## Broken Links (Remove or Replace)
| Resource | Line | URL | Status | Action |
|----------|------|-----|--------|--------|
| [Title] | XX | [URL] | 404 | Remove |
| [Title] | XX | [URL] | 404 | Replace with [alternative] |
---
## Redirects (Update URLs)
| Resource | Line | Old URL | New URL |
|----------|------|---------|---------|
| [Title] | XX | [old] | [new] |
---
## Outdated Resources (Consider Replacing)
| Resource | Line | Issue | Recommendation |
|----------|------|-------|----------------|
| [Title] | XX | Published 2014, uses var throughout | Replace with [modern alternative] |
| [Title] | XX | Pre-ES6, no mention of let/const | Find updated version or replace |
---
## Description Improvements Needed
| Resource | Line | Current | Suggested |
|----------|------|---------|-----------|
| [Title] | XX | "A guide to closures" | "[Specific description with value prop]" |
| [Title] | XX | "Learn about promises" | "[What makes it unique]. [Why read it]." |
---
## Missing Resources (Recommendations)
| Type | Gap | Suggested Resource | URL |
|------|-----|-------------------|-----|
| Reference | No main MDN link | [Topic] — MDN | [URL] |
| Article | No beginner guide | [Title] — javascript.info | [URL] |
| Video | No visual explanation | [Title] — [Creator] | [URL] |
| Article | No advanced deep-dive | [Title] — 2ality | [URL] |
---
## Non-JavaScript Resources (Remove)
| Resource | Line | Issue |
|----------|------|-------|
| [Title] | XX | Primarily about C#, not JavaScript |
---
## Action Items
### High Priority (Do First)
1. **Remove broken link:** [Title] (line XX)
2. **Add missing MDN reference:** [Topic]
3. **Replace outdated resource:** [Title] with [alternative]
### Medium Priority
1. **Update redirect URL:** [Title] (line XX)
2. **Improve description:** [Title] (line XX)
3. **Add beginner-friendly article**
### Low Priority
1. **Add additional video resource**
2. **Consider adding course section**
---
## Verification Checklist
After making changes:
- [ ] All broken links removed or replaced
- [ ] All redirect URLs updated
- [ ] Outdated resources replaced
- [ ] Generic descriptions rewritten
- [ ] Missing resource types added
- [ ] Resource counts meet targets
- [ ] All new links verified working
- [ ] All descriptions are specific and valuable
| Content Type | Icon Value |
|---|---|
| MDN/Official docs | book |
| Articles/Blog posts | newspaper |
| Videos | video |
| Courses | graduation-cap |
| Books | book |
| Related concepts | Context-appropriate |
| Element | Guideline |
|---|---|
| Card title | Keep concise, include creator for videos |
| Description sentence 1 | What it covers / what's unique |
| Description sentence 2 | Why read/watch / who it's for |
Within each section, order resources:
When curating resources for a concept page:
Remember: Resources should enhance learning, not pad the page. Every link should offer genuine value. Quality over quantity — a few excellent resources beat many mediocre ones.