Showing preview only (4,414K chars total). Download the full file or copy to clipboard to get everything.
Repository: leonardomso/33-js-concepts
Branch: master
Commit: 9e2b863fd36e
Files: 165
Total size: 4.2 MB
Directory structure:
gitextract_w51t050h/
├── .claude/
│ ├── CLAUDE.md
│ └── skills/
│ ├── concept-workflow/
│ │ └── SKILL.md
│ ├── fact-check/
│ │ └── SKILL.md
│ ├── resource-curator/
│ │ └── SKILL.md
│ ├── seo-review/
│ │ └── SKILL.md
│ ├── test-writer/
│ │ └── SKILL.md
│ └── write-concept/
│ └── SKILL.md
├── .github/
│ ├── FUNDING.yml
│ └── workflows/
│ └── tests.yml
├── .gitignore
├── .opencode/
│ └── skill/
│ ├── concept-workflow/
│ │ └── SKILL.md
│ ├── fact-check/
│ │ └── SKILL.md
│ ├── resource-curator/
│ │ └── SKILL.md
│ ├── seo-review/
│ │ └── SKILL.md
│ ├── test-writer/
│ │ └── SKILL.md
│ └── write-concept/
│ └── SKILL.md
├── CODE_OF_CONDUCT.md
├── CONTRIBUTING.md
├── LICENSE
├── README.md
├── TRANSLATIONS.md
├── docs/
│ ├── 5c8wamucvfketshf1eyrw254gz94jwre.txt
│ ├── beyond/
│ │ ├── concepts/
│ │ │ ├── blob-file-api.mdx
│ │ │ ├── computed-property-names.mdx
│ │ │ ├── cookies.mdx
│ │ │ ├── custom-events.mdx
│ │ │ ├── debouncing-throttling.mdx
│ │ │ ├── event-bubbling-capturing.mdx
│ │ │ ├── event-delegation.mdx
│ │ │ ├── garbage-collection.mdx
│ │ │ ├── getters-setters.mdx
│ │ │ ├── hoisting.mdx
│ │ │ ├── indexeddb.mdx
│ │ │ ├── intersection-observer.mdx
│ │ │ ├── javascript-type-nuances.mdx
│ │ │ ├── json-deep-dive.mdx
│ │ │ ├── localstorage-sessionstorage.mdx
│ │ │ ├── memoization.mdx
│ │ │ ├── memory-management.mdx
│ │ │ ├── mutation-observer.mdx
│ │ │ ├── object-methods.mdx
│ │ │ ├── performance-observer.mdx
│ │ │ ├── property-descriptors.mdx
│ │ │ ├── proxy-reflect.mdx
│ │ │ ├── requestanimationframe.mdx
│ │ │ ├── resize-observer.mdx
│ │ │ ├── strict-mode.mdx
│ │ │ ├── tagged-template-literals.mdx
│ │ │ ├── temporal-dead-zone.mdx
│ │ │ ├── typed-arrays-arraybuffers.mdx
│ │ │ └── weakmap-weakset.mdx
│ │ └── getting-started/
│ │ └── overview.mdx
│ ├── concepts/
│ │ ├── algorithms-big-o.mdx
│ │ ├── async-await.mdx
│ │ ├── call-stack.mdx
│ │ ├── callbacks.mdx
│ │ ├── clean-code.mdx
│ │ ├── currying-composition.mdx
│ │ ├── data-structures.mdx
│ │ ├── design-patterns.mdx
│ │ ├── dom.mdx
│ │ ├── equality-operators.mdx
│ │ ├── error-handling.mdx
│ │ ├── es-modules.mdx
│ │ ├── event-loop.mdx
│ │ ├── factories-classes.mdx
│ │ ├── generators-iterators.mdx
│ │ ├── higher-order-functions.mdx
│ │ ├── http-fetch.mdx
│ │ ├── iife-modules.mdx
│ │ ├── inheritance-polymorphism.mdx
│ │ ├── javascript-engines.mdx
│ │ ├── map-reduce-filter.mdx
│ │ ├── modern-js-syntax.mdx
│ │ ├── object-creation-prototypes.mdx
│ │ ├── primitive-types.mdx
│ │ ├── primitives-objects.mdx
│ │ ├── promises.mdx
│ │ ├── pure-functions.mdx
│ │ ├── recursion.mdx
│ │ ├── regular-expressions.mdx
│ │ ├── scope-and-closures.mdx
│ │ ├── this-call-apply-bind.mdx
│ │ ├── type-coercion.mdx
│ │ └── web-workers.mdx
│ ├── contributing.mdx
│ ├── docs.json
│ ├── getting-started/
│ │ ├── about.mdx
│ │ ├── how-to-learn.mdx
│ │ ├── learning-paths.mdx
│ │ └── prerequisites.mdx
│ ├── index.mdx
│ ├── robots.txt
│ ├── schema-inject.js
│ └── translations.mdx
├── index.js
├── opencode.jsonc
├── package.json
├── tests/
│ ├── advanced-topics/
│ │ ├── algorithms-big-o/
│ │ │ └── algorithms-big-o.test.js
│ │ ├── data-structures/
│ │ │ └── data-structures.test.js
│ │ ├── design-patterns/
│ │ │ └── design-patterns.test.js
│ │ ├── error-handling/
│ │ │ └── error-handling.test.js
│ │ ├── es-modules/
│ │ │ └── es-modules.test.js
│ │ ├── modern-js-syntax/
│ │ │ └── modern-js-syntax.test.js
│ │ └── regular-expressions/
│ │ └── regular-expressions.test.js
│ ├── async-javascript/
│ │ └── callbacks/
│ │ ├── callbacks.dom.test.js
│ │ └── callbacks.test.js
│ ├── beyond/
│ │ ├── browser-storage/
│ │ │ ├── cookies/
│ │ │ │ ├── cookies.dom.test.js
│ │ │ │ └── cookies.test.js
│ │ │ ├── indexeddb/
│ │ │ │ └── indexeddb.test.js
│ │ │ └── localstorage-sessionstorage/
│ │ │ ├── localstorage-sessionstorage.dom.test.js
│ │ │ └── localstorage-sessionstorage.test.js
│ │ ├── data-handling/
│ │ │ ├── blob-file-api/
│ │ │ │ ├── blob-file-api.dom.test.js
│ │ │ │ └── blob-file-api.test.js
│ │ │ ├── json-deep-dive/
│ │ │ │ └── json-deep-dive.test.js
│ │ │ ├── requestanimationframe/
│ │ │ │ └── requestanimationframe.test.js
│ │ │ └── typed-arrays-arraybuffers/
│ │ │ └── typed-arrays-arraybuffers.test.js
│ │ ├── events/
│ │ │ ├── custom-events/
│ │ │ │ ├── custom-events.dom.test.js
│ │ │ │ └── custom-events.test.js
│ │ │ ├── event-bubbling-capturing/
│ │ │ │ └── event-bubbling-capturing.dom.test.js
│ │ │ └── event-delegation/
│ │ │ └── event-delegation.test.js
│ │ ├── language-mechanics/
│ │ │ ├── hoisting/
│ │ │ │ └── hoisting.test.js
│ │ │ ├── strict-mode/
│ │ │ │ └── strict-mode.test.js
│ │ │ └── temporal-dead-zone/
│ │ │ └── temporal-dead-zone.test.js
│ │ ├── memory-performance/
│ │ │ ├── debouncing-throttling/
│ │ │ │ └── debouncing-throttling.test.js
│ │ │ ├── garbage-collection/
│ │ │ │ └── garbage-collection.test.js
│ │ │ ├── memoization/
│ │ │ │ └── memoization.test.js
│ │ │ └── memory-management/
│ │ │ └── memory-management.test.js
│ │ ├── modern-syntax-operators/
│ │ │ ├── computed-property-names/
│ │ │ │ └── computed-property-names.test.js
│ │ │ └── tagged-template-literals/
│ │ │ └── tagged-template-literals.test.js
│ │ ├── objects-properties/
│ │ │ ├── getters-setters/
│ │ │ │ └── getters-setters.test.js
│ │ │ ├── object-methods/
│ │ │ │ └── object-methods.test.js
│ │ │ ├── property-descriptors/
│ │ │ │ └── property-descriptors.test.js
│ │ │ ├── proxy-reflect/
│ │ │ │ └── proxy-reflect.test.js
│ │ │ └── weakmap-weakset/
│ │ │ └── weakmap-weakset.test.js
│ │ ├── observer-apis/
│ │ │ ├── intersection-observer/
│ │ │ │ ├── intersection-observer.dom.test.js
│ │ │ │ └── intersection-observer.test.js
│ │ │ ├── mutation-observer/
│ │ │ │ └── mutation-observer.dom.test.js
│ │ │ ├── performance-observer/
│ │ │ │ └── performance-observer.test.js
│ │ │ └── resize-observer/
│ │ │ └── resize-observer.test.js
│ │ └── type-system/
│ │ └── javascript-type-nuances/
│ │ └── javascript-type-nuances.test.js
│ ├── functional-programming/
│ │ ├── currying-composition/
│ │ │ └── currying-composition.test.js
│ │ ├── higher-order-functions/
│ │ │ └── higher-order-functions.test.js
│ │ ├── map-reduce-filter/
│ │ │ └── map-reduce-filter.test.js
│ │ ├── pure-functions/
│ │ │ └── pure-functions.test.js
│ │ └── recursion/
│ │ └── recursion.test.js
│ ├── functions-execution/
│ │ ├── async-await/
│ │ │ └── async-await.test.js
│ │ ├── event-loop/
│ │ │ └── event-loop.test.js
│ │ ├── generators-iterators/
│ │ │ └── generators-iterators.test.js
│ │ ├── iife-modules/
│ │ │ └── iife-modules.test.js
│ │ └── promises/
│ │ └── promises.test.js
│ ├── fundamentals/
│ │ ├── call-stack/
│ │ │ └── call-stack.test.js
│ │ ├── equality-operators/
│ │ │ └── equality-operators.test.js
│ │ ├── javascript-engines/
│ │ │ └── javascript-engines.test.js
│ │ ├── primitive-types/
│ │ │ └── primitive-types.test.js
│ │ ├── primitives-objects/
│ │ │ └── primitives-objects.test.js
│ │ ├── scope-and-closures/
│ │ │ └── scope-and-closures.test.js
│ │ └── type-coercion/
│ │ └── type-coercion.test.js
│ ├── object-oriented/
│ │ ├── factories-classes/
│ │ │ └── factories-classes.test.js
│ │ ├── inheritance-polymorphism/
│ │ │ └── inheritance-polymorphism.test.js
│ │ ├── object-creation-prototypes/
│ │ │ └── object-creation-prototypes.test.js
│ │ └── this-call-apply-bind/
│ │ └── this-call-apply-bind.test.js
│ └── web-platform/
│ ├── dom/
│ │ └── dom.test.js
│ └── http-fetch/
│ └── http-fetch.test.js
└── vitest.config.js
================================================
FILE CONTENTS
================================================
================================================
FILE: .claude/CLAUDE.md
================================================
# 33 JavaScript Concepts - Project Context
## Overview
This repository is a curated collection of **33 essential JavaScript concepts** that every JavaScript developer should know. It serves as a comprehensive learning resource and study guide for developers at all levels, from beginners to advanced practitioners.
The project was recognized by GitHub as one of the **top open source projects of 2018** and has been translated into 40+ languages by the community.
## Project Purpose
- Help developers master fundamental and advanced JavaScript concepts
- Provide curated resources (articles, videos, books) for each concept
- Serve as a reference guide for interview preparation
- Foster community contributions through translations and resource additions
## Repository Structure
```
33-js-concepts/
├── .claude/ # Claude configuration
│ ├── CLAUDE.md # Project context and guidelines
│ └── skills/ # Custom skills for content creation
│ ├── write-concept/ # Skill for writing concept documentation
│ ├── fact-check/ # Skill for verifying technical accuracy
│ ├── seo-review/ # Skill for SEO audits
│ ├── test-writer/ # Skill for generating Vitest tests
│ ├── resource-curator/ # Skill for curating external resources
│ └── concept-workflow/ # Skill for end-to-end concept creation
├── .opencode/ # OpenCode configuration
│ └── skill/ # Custom skills (mirrored from .claude/skills)
│ ├── write-concept/ # Skill for writing concept documentation
│ ├── fact-check/ # Skill for verifying technical accuracy
│ ├── seo-review/ # Skill for SEO audits
│ ├── test-writer/ # Skill for generating Vitest tests
│ ├── resource-curator/ # Skill for curating external resources
│ └── concept-workflow/ # Skill for end-to-end concept creation
├── docs/ # Mintlify documentation site
│ ├── docs.json # Mintlify configuration
│ ├── index.mdx # Homepage
│ ├── introduction.mdx # Getting started guide
│ ├── contributing.mdx # Contribution guidelines
│ ├── translations.mdx # Community translations
│ └── concepts/ # 33 concept pages
│ ├── call-stack.mdx
│ ├── primitive-types.mdx
│ └── ... (all 33 concepts)
├── tests/ # Vitest test suites
│ └── fundamentals/ # Tests for fundamental concepts (1-6)
│ ├── call-stack/
│ ├── primitive-types/
│ ├── value-reference-types/
│ ├── type-coercion/
│ ├── equality-operators/
│ └── scope-and-closures/
├── vitest.config.js # Vitest configuration
├── README.md # Main GitHub README
├── CONTRIBUTING.md # Guidelines for contributors
├── CODE_OF_CONDUCT.md # Community standards
├── LICENSE # MIT License
├── package.json # Project metadata
├── opencode.jsonc # OpenCode AI assistant configuration
└── github-image.png # Project banner image
```
## The 31 Concepts (32nd and 33rd coming soon)
### Fundamentals (1-6)
1. Primitive Types
2. Value Types and Reference Types
3. Type Coercion (Implicit, Explicit, Nominal, Structuring and Duck Typing)
4. Equality Operators (== vs === vs typeof)
5. Scope & Closures
6. Call Stack
### Functions & Execution (7-8)
7. Event Loop (Message Queue)
8. IIFE, Modules and Namespaces
### Web Platform (9-10)
9. DOM and Layout Trees
10. HTTP & Fetch
### Object-Oriented JS (11-15)
11. Factories and Classes
12. this, call, apply and bind
13. new, Constructor, instanceof and Instances
14. Prototype Inheritance and Prototype Chain
15. Object.create and Object.assign
### Functional Programming (16-19)
16. map, reduce, filter
17. Pure Functions, Side Effects, State Mutation and Event Propagation
18. Higher-Order Functions
19. Recursion
### Async JavaScript (20-22)
20. Collections and Generators
21. Promises
22. async/await
### Advanced Topics (23-31)
23. JavaScript Engines
24. Data Structures
25. Big O Notation (Expensive Operations)
26. Algorithms
27. Inheritance, Polymorphism and Code Reuse
28. Design Patterns
29. Partial Applications, Currying, Compose and Pipe
30. Clean Code
## Content Format
Each concept page in `/docs/concepts/` follows this structure:
### 1. Frontmatter
```mdx
---
title: "Concept Name"
description: "Brief description of the concept"
---
```
### 2. Real-World Analogy
Start with an engaging analogy that makes the concept relatable. Include ASCII art diagrams when helpful.
### 3. Info Box (What You'll Learn)
```mdx
<Info>
**What you'll learn in this guide:**
- Key point 1
- Key point 2
- Key point 3
</Info>
```
### 4. Main Content Sections
- Use clear headings (`##`, `###`) to organize topics
- Include code examples with explanations
- Use Mintlify components (`<AccordionGroup>`, `<Steps>`, `<Tabs>`, etc.)
- Add diagrams and visualizations where helpful
### 5. Related Concepts
```mdx
<CardGroup cols={2}>
<Card title="Related Concept" icon="icon-name" href="/concepts/concept-slug">
Brief description of how it relates
</Card>
</CardGroup>
```
### 6. Reference
```mdx
<Card title="Topic — MDN" icon="book" href="https://developer.mozilla.org/...">
Official MDN documentation
</Card>
```
### 7. Articles
Curated blog posts and tutorials using `<CardGroup>` with `icon="newspaper"`.
### 8. Courses (optional)
Educational courses using `<Card>` with `icon="graduation-cap"`.
### 9. Videos
YouTube tutorials and conference talks using `<CardGroup>` with `icon="video"`.
## Contributing Guidelines
### Adding Resources
- Resources should be high-quality and educational
- Follow the existing Card format for consistency
- Include a brief description of what the resource covers
### Resource Format
```mdx
<Card title="Resource Title" icon="newspaper" href="https://...">
Brief description of what the reader will learn from this resource.
</Card>
```
## Git Commit Conventions
This project follows the [Conventional Commits](https://www.conventionalcommits.org/) specification. All commits must adhere to this format for consistency and automated changelog generation.
### Commit Message Format
```
<type>[optional scope]: <description>
[optional body]
[optional footer(s)]
```
### Commit Types
| Type | Description |
|------|-------------|
| `feat` | New features or content additions (e.g., new resources, new concepts) |
| `fix` | Bug fixes, broken link corrections, typo fixes |
| `docs` | Documentation changes (README updates, CONTRIBUTING updates) |
| `style` | Formatting changes (markdown formatting, whitespace) |
| `refactor` | Content restructuring without adding new resources |
| `chore` | Maintenance tasks (config updates, dependency updates) |
| `ci` | CI/CD configuration changes |
| `perf` | Performance improvements |
| `test` | Adding or updating tests |
| `build` | Build system or external dependency changes |
| `revert` | Reverting a previous commit |
### Examples
```bash
# Adding a new resource
feat: add article about closures by John Doe
# Fixing a broken link
fix: update broken MDN link in Promises section
# Documentation update
docs: update contributing guidelines for translations
# Maintenance task
chore: update opencode.json configuration
# Adding content to existing concept
feat(closures): add video tutorial by Fun Fun Function
# Multiple changes in body
feat: add new resources for async/await
- Add article by JavaScript Teacher
- Add video tutorial by Traversy Media
- Update reference links
```
### Rules
1. **Use lowercase** for the type and description
2. **No period** at the end of the description
3. **Use imperative mood** ("add" not "added", "fix" not "fixed")
4. **Keep the first line under 72 characters**
5. **Reference issues** in the footer when applicable (e.g., `Closes #123`)
## MCP Servers Available
This project has OpenCode configured with:
1. **Context7** - Documentation search (`use context7` in prompts)
2. **GitHub** - Repository management (`use github` in prompts)
## Testing
This project uses [Vitest](https://vitest.dev/) as the test runner to verify that code examples in the documentation work correctly.
### Running Tests
```bash
# Run all tests once
npm test
# Run tests in watch mode (re-runs on file changes)
npm run test:watch
# Run tests with coverage report
npm run test:coverage
```
### Test Structure
Tests are organized by concept category in the `tests/` directory:
```
tests/
├── fundamentals/ # Concepts 1-6
│ ├── call-stack/
│ ├── primitive-types/
│ ├── value-reference-types/
│ ├── type-coercion/
│ ├── equality-operators/
│ └── scope-and-closures/
├── functions-execution/ # Concepts 7-8
│ ├── event-loop/
│ └── iife-modules/
└── web-platform/ # Concepts 9-10
├── dom/
└── http-fetch/
```
### Writing Tests for Code Examples
When adding new code examples to concept documentation, please include corresponding tests:
1. **File naming**: Create `{concept-name}.test.js` in `tests/{category}/{concept-name}/`
2. **Use explicit imports**:
```javascript
import { describe, it, expect } from 'vitest'
```
3. **Convert console.log examples to assertions**:
```javascript
// Documentation example:
// console.log(typeof "hello") // "string"
// Test:
it('should return string type', () => {
expect(typeof "hello").toBe("string")
})
```
4. **Test error cases**: Use `expect(() => { ... }).toThrow()` for operations that should throw
5. **Skip browser-specific examples**: Tests run in Node.js, so skip DOM/window/document examples
6. **Note strict mode behavior**: Vitest runs in strict mode, so operations that "silently fail" in non-strict mode will throw `TypeError`
### Current Test Coverage
| Category | Concept | Tests |
|----------|---------|-------|
| Fundamentals | Call Stack | 20 |
| Fundamentals | Primitive Types | 73 |
| Fundamentals | Value vs Reference Types | 54 |
| Fundamentals | Type Coercion | 74 |
| Fundamentals | Equality Operators | 87 |
| Fundamentals | Scope and Closures | 46 |
| Functions & Execution | Event Loop | 56 |
| Functions & Execution | IIFE & Modules | 61 |
| Web Platform | DOM | 85 |
| Web Platform | HTTP & Fetch | 72 |
| **Total** | | **628** |
## Documentation Site (Mintlify)
The project includes a Mintlify documentation site in the `/docs` directory.
### Local Development
```bash
# Using npm script
npm run docs
# Or install Mintlify CLI globally
npm i -g mint
cd docs
mint dev
```
The site will be available at `http://localhost:3000`.
### Documentation Structure
- **Getting Started**: Homepage and introduction
- **Fundamentals**: Concepts 1-6 (Primitive Types through Call Stack)
- **Functions & Execution**: Concepts 7-8 (Event Loop through IIFE/Modules)
- **Web Platform**: Concepts 9-10 (DOM and HTTP & Fetch)
- **Object-Oriented JS**: Concepts 11-15 (Factories through Object.create/assign)
- **Functional Programming**: Concepts 16-19 (map/reduce/filter through Recursion)
- **Async JavaScript**: Concepts 20-22 (Collections/Generators through async/await)
- **Advanced Topics**: Concepts 23-31 (JavaScript Engines through Clean Code)
### Adding/Editing Concept Pages
Each concept page is in `docs/concepts/` and follows this template:
```mdx
---
title: "Concept Name"
description: "Brief description"
---
## Overview
[Explanation of the concept]
## Reference
[MDN or official docs links]
## Articles
[Curated articles with CardGroup components]
## Videos
[Curated videos with CardGroup components]
```
## Important Notes
- This is primarily a documentation/resource repository, not a code library
- The main content lives in `README.md` and `/docs` (Mintlify site)
- Translations are maintained in separate forked repositories
- Community contributions are welcome and encouraged
- MIT Licensed
## Custom Skills
### write-concept Skill
Use the `/write-concept` skill when writing or improving concept documentation pages. This skill provides comprehensive guidelines for:
- **Page Structure**: Exact template for concept pages (frontmatter, opening hook, code examples, sections)
- **SEO Optimization**: Critical guidelines for ranking in search results
- **Writing Style**: Voice, tone, and how to make content accessible to beginners
- **Code Examples**: Best practices for clear, educational code
- **Quality Checklists**: Verification steps before publishing
**When to invoke:**
- Creating a new concept page in `/docs/concepts/`
- Rewriting or significantly improving an existing concept page
- Reviewing an existing concept page for quality
**SEO is Critical:** Each concept page should rank for searches like:
- "what is [concept] in JavaScript"
- "how does [concept] work in JavaScript"
- "[concept] JavaScript explained"
The skill includes detailed guidance on title optimization (50-60 chars), meta descriptions (150-160 chars), keyword placement, and featured snippet optimization.
**Location:** `.claude/skills/write-concept/SKILL.md`
### fact-check Skill
Use the `/fact-check` skill when verifying the technical accuracy of concept documentation. This skill provides comprehensive methodology for:
- **Code Verification**: Verify all code examples produce stated outputs, run project tests
- **MDN/Spec Compliance**: Check claims against official MDN documentation and ECMAScript specification
- **External Resource Checks**: Verify all links work and descriptions accurately represent content
- **Misconception Detection**: Common JavaScript misconceptions to watch for (type coercion, async behavior, etc.)
- **Test Integration**: Instructions for running `npm test` to verify code examples
- **Report Template**: Structured format for documenting findings with severity levels
**When to invoke:**
- Before publishing a new concept page
- After significant edits to existing pages
- When reviewing community contributions
- Periodic accuracy audits of existing content
**What gets checked:**
- Every code example for correct output
- All MDN links for validity (not 404)
- API descriptions match current MDN documentation
- External resources (articles, videos) are accessible and accurate
- Technical claims are correct and properly nuanced
- No common JavaScript misconceptions stated as fact
**Location:** `.claude/skills/fact-check/SKILL.md`
### seo-review Skill
Use the `/seo-review` skill when auditing concept pages for search engine optimization. This skill provides a focused audit checklist:
- **27-Point Scoring System**: Systematic audit across 6 categories
- **Title & Meta Optimization**: Character counts, keyword placement, compelling hooks
- **Keyword Strategy**: Pre-built keyword clusters for all JavaScript concepts
- **Featured Snippet Optimization**: Patterns for winning position zero in search results
- **Internal Linking**: Audit of concept interconnections and anchor text quality
- **Report Template**: Structured SEO audit report with prioritized fixes
**When to invoke:**
- Before publishing a new concept page
- When optimizing underperforming pages
- Periodic content audits
- After major content updates
**Scoring Categories (30 points total):**
- Title Tag (4 points)
- Meta Description (4 points)
- Keyword Placement (5 points)
- Content Structure (6 points)
- Featured Snippets (4 points)
- Internal Linking (4 points)
- Technical SEO (3 points) — Single H1, keyword in slug, no orphan pages
**Score Interpretation:**
- 90-100% (27-30): Ready to publish
- 75-89% (23-26): Minor optimizations needed
- 55-74% (17-22): Several improvements needed
- Below 55% (<17): Significant work required
**Location:** `.claude/skills/seo-review/SKILL.md`
### test-writer Skill
Use the `/test-writer` skill when generating Vitest tests for code examples in concept documentation. This skill provides comprehensive methodology for:
- **Code Extraction**: Identify and categorize all code examples (testable, DOM, error, conceptual)
- **Test Patterns**: 16 patterns for converting different types of code examples to tests
- **DOM Testing**: Separate file structure with jsdom environment for browser-specific code
- **Source References**: Line number references linking tests to documentation
- **Project Conventions**: File naming, describe block organization, assertion patterns
- **Report Template**: Test coverage report documenting what was tested and skipped
**When to invoke:**
- After writing a new concept page
- When adding new code examples to existing pages
- When updating existing code examples
- To verify documentation accuracy through automated tests
**Test Categories:**
- Basic value assertions (`console.log` → `expect`)
- Error testing (`toThrow` patterns)
- Async testing (Promises, async/await)
- DOM testing (jsdom environment, events)
- Floating point (toBeCloseTo)
- Object/Array comparisons (toEqual)
**File Structure:**
```
tests/{category}/{concept-name}/{concept-name}.test.js
tests/{category}/{concept-name}/{concept-name}.dom.test.js (if DOM examples)
```
**Location:** `.claude/skills/test-writer/SKILL.md`
### resource-curator Skill
Use the `/resource-curator` skill when finding, evaluating, or maintaining external resources (articles, videos, courses) for concept pages. This skill provides:
- **Audit Process**: Check existing links for accessibility, accuracy, and relevance
- **Trusted Sources**: Prioritized lists of reputable article, video, and course sources
- **Quality Criteria**: Must-have, should-have, and red flag checklists
- **Description Writing**: Formula and examples for specific, valuable descriptions
- **Publication Guidelines**: Date thresholds for different topic categories
- **Report Template**: Audit report for documenting broken, outdated, and missing resources
**When to invoke:**
- Adding resources to a new concept page
- Refreshing resources on existing pages
- Auditing for broken or outdated links
- Reviewing community-contributed resources
- Periodic link maintenance
**Resource Targets:**
- Reference: 2-4 MDN links
- Articles: 4-6 quality articles
- Videos: 3-4 quality videos
- Courses: 1-3 (optional)
**Trusted Sources Include:**
- Articles: javascript.info, MDN Guides, freeCodeCamp, 2ality, CSS-Tricks, dev.to
- Videos: Fireship, Web Dev Simplified, Fun Fun Function, Traversy Media, JSConf
- Courses: javascript.info, Piccalilli, freeCodeCamp, Frontend Masters
**Location:** `.claude/skills/resource-curator/SKILL.md`
### concept-workflow Skill
Use the `/concept-workflow` skill for end-to-end creation of a complete concept page. This orchestrator skill coordinates all five specialized skills in optimal order:
```
Phase 1: resource-curator → Find quality external resources
Phase 2: write-concept → Write the documentation page
Phase 3: test-writer → Generate tests for code examples
Phase 4: fact-check → Verify technical accuracy
Phase 5: seo-review → Optimize for search visibility
```
**When to invoke:**
- Creating a brand new concept page from scratch
- Completely rewriting an existing concept page
- When you want the full end-to-end workflow with all quality checks
**What it orchestrates:**
- Resource curation (2-4 MDN refs, 4-6 articles, 3-4 videos)
- Complete concept page writing (1,500+ words)
- Comprehensive test generation for all code examples
- Technical accuracy verification with test execution
- SEO audit targeting 90%+ score (24+/27)
**Deliverables:**
- `/docs/concepts/{concept-name}.mdx` — Complete documentation page
- `/tests/{category}/{concept-name}/{concept-name}.test.js` — Test file
- Updated `docs.json` navigation (if new concept)
- Fact-check report
- SEO audit report (score 24+/27)
**Estimated Time:** 2-5 hours depending on concept complexity
**Example prompt:**
> "Create a complete concept page for 'hoisting' using the concept-workflow skill"
**Location:** `.claude/skills/concept-workflow/SKILL.md`
## Maintainer
**Leonardo Maldonado** - [@leonardomso](https://github.com/leonardomso)
## Links
- Repository: https://github.com/leonardomso/33-js-concepts
- Issues: https://github.com/leonardomso/33-js-concepts/issues
- Original Article: [33 Fundamentals Every JavaScript Developer Should Know](https://medium.com/@stephenthecurt/33-fundamentals-every-javascript-developer-should-know-13dd720a90d1) by Stephen Curtis
================================================
FILE: .claude/skills/concept-workflow/SKILL.md
================================================
---
name: concept-workflow
description: End-to-end workflow for creating complete JavaScript concept documentation, orchestrating all skills from research to final review
---
# Skill: Complete Concept Workflow
Use this skill to create a complete, high-quality concept page from start to finish. This skill orchestrates all five specialized skills in the optimal order:
1. **Resource Curation** — Find quality learning resources
2. **Concept Writing** — Write the documentation page
3. **Test Writing** — Create tests for code examples
4. **Fact Checking** — Verify technical accuracy
5. **SEO Review** — Optimize for search visibility
## When to Use
- Creating a brand new concept page from scratch
- Completely rewriting an existing concept page
- When you want a full end-to-end workflow with all quality checks
**For partial tasks, use individual skills instead:**
- Just adding resources? Use `resource-curator`
- Just writing content? Use `write-concept`
- Just adding tests? Use `test-writer`
- Just verifying accuracy? Use `fact-check`
- Just optimizing SEO? Use `seo-review`
---
## Workflow Overview
```
┌─────────────────────────────────────────────────────────────────────────────┐
│ COMPLETE CONCEPT WORKFLOW │
├─────────────────────────────────────────────────────────────────────────────┤
│ │
│ INPUT: Concept name (e.g., "hoisting", "event-loop", "promises") │
│ │
│ ┌──────────────────┐ │
│ │ PHASE 1: RESEARCH │ │
│ │ resource-curator │ Find MDN refs, articles, videos │
│ └────────┬─────────┘ │
│ ▼ │
│ ┌──────────────────┐ │
│ │ PHASE 2: WRITE │ │
│ │ write-concept │ Create the documentation page │
│ └────────┬─────────┘ │
│ ▼ │
│ ┌──────────────────┐ │
│ │ PHASE 3: TEST │ │
│ │ test-writer │ Generate tests for all code examples │
│ └────────┬─────────┘ │
│ ▼ │
│ ┌──────────────────┐ │
│ │ PHASE 4: VERIFY │ │
│ │ fact-check │ Verify accuracy, run tests, check links │
│ └────────┬─────────┘ │
│ ▼ │
│ ┌──────────────────┐ │
│ │ PHASE 5: OPTIMIZE│ │
│ │ seo-review │ SEO audit and final optimizations │
│ └────────┬─────────┘ │
│ ▼ │
│ OUTPUT: Complete, tested, verified, SEO-optimized concept page │
│ │
└─────────────────────────────────────────────────────────────────────────────┘
```
---
## Phase 1: Resource Curation
**Skill:** `resource-curator`
**Goal:** Gather high-quality external resources before writing
### What to Do
1. **Identify the concept category** (fundamentals, async, OOP, etc.)
2. **Search for MDN references** — Official documentation
3. **Find quality articles** — Target 4-6 from trusted sources
4. **Find quality videos** — Target 3-4 from trusted creators
5. **Evaluate each resource** — Check quality criteria
6. **Write specific descriptions** — 2 sentences each
7. **Format as Card components** — Ready to paste into the page
### Deliverables
- List of 2-4 MDN/reference links with descriptions
- List of 4-6 article links with descriptions
- List of 3-4 video links with descriptions
- Optional: 1-2 courses or books
### Quality Gates
Before moving to Phase 2:
- [ ] All links verified working (200 response)
- [ ] All resources are JavaScript-focused
- [ ] Descriptions are specific, not generic
- [ ] Mix of beginner and advanced content
---
## Phase 2: Concept Writing
**Skill:** `write-concept`
**Goal:** Create the full documentation page
### What to Do
1. **Determine the category** for file organization
2. **Create the frontmatter** (title, sidebarTitle, description)
3. **Write the opening hook** — Question that draws readers in
4. **Add opening code example** — Simple example in first 200 words
5. **Write "What you'll learn" box** — 5-7 bullet points
6. **Write main content sections:**
- What is [concept]? (with 40-60 word definition for featured snippet)
- Real-world analogy
- How it works (with diagrams)
- Code examples (multiple, progressive complexity)
- Common mistakes
- Edge cases
7. **Add Key Takeaways** — 8-10 numbered points
8. **Add Test Your Knowledge** — 5-6 Q&A accordions
9. **Add Related Concepts** — 4 Cards linking to related topics
10. **Add Resources** — Paste resources from Phase 1
### Deliverables
- Complete `.mdx` file at `/docs/concepts/{concept-name}.mdx`
- File added to `docs.json` navigation (if new)
### Quality Gates
Before moving to Phase 3:
- [ ] Frontmatter complete (title, sidebarTitle, description)
- [ ] Opens with question hook
- [ ] Code example in first 200 words
- [ ] "What you'll learn" Info box present
- [ ] All required sections present
- [ ] Resources section complete
- [ ] 1,500+ words
---
## Phase 3: Test Writing
**Skill:** `test-writer`
**Goal:** Create comprehensive tests for all code examples
### What to Do
1. **Scan the concept page** for all code examples
2. **Categorize examples:**
- Testable (console.log, return values)
- DOM-specific (needs jsdom)
- Error examples (toThrow)
- Conceptual (skip)
3. **Create test file** at `tests/{category}/{concept}/{concept}.test.js`
4. **Create DOM test file** (if needed) at `tests/{category}/{concept}/{concept}.dom.test.js`
5. **Write tests** for each code example with source line references
6. **Run tests** to verify all pass
### Deliverables
- Test file: `tests/{category}/{concept-name}/{concept-name}.test.js`
- DOM test file (if applicable): `tests/{category}/{concept-name}/{concept-name}.dom.test.js`
- All tests passing
### Quality Gates
Before moving to Phase 4:
- [ ] All testable code examples have tests
- [ ] Source line references in comments
- [ ] Tests pass: `npm test -- tests/{category}/{concept}/`
- [ ] DOM tests in separate file with jsdom directive
---
## Phase 4: Fact Checking
**Skill:** `fact-check`
**Goal:** Verify technical accuracy of all content
### What to Do
1. **Verify code examples:**
- Run tests: `npm test -- tests/{category}/{concept}/`
- Check any untested examples manually
- Verify output comments match actual outputs
2. **Verify MDN/spec claims:**
- Click all MDN links — verify they work
- Compare API descriptions to MDN
- Check ECMAScript spec for nuanced claims
3. **Verify external resources:**
- Check all article/video links work
- Skim content for accuracy
- Verify descriptions match content
4. **Audit technical claims:**
- Look for "always/never" statements
- Verify performance claims
- Check for common misconceptions
5. **Generate fact-check report**
### Deliverables
- Fact-check report documenting:
- Code verification results
- Link check results
- Any issues found and fixes made
### Quality Gates
Before moving to Phase 5:
- [ ] All tests passing
- [ ] All MDN links valid
- [ ] All external resources accessible
- [ ] No technical inaccuracies found
- [ ] No common misconceptions
---
## Phase 5: SEO Review
**Skill:** `seo-review`
**Goal:** Optimize for search visibility
### What to Do
1. **Audit title tag:**
- 50-60 characters
- Primary keyword in first half
- Ends with "in JavaScript"
- Contains compelling hook
2. **Audit meta description:**
- 150-160 characters
- Starts with action word (Learn, Understand, Discover)
- Contains primary keyword
- Promises specific value
3. **Audit keyword placement:**
- Keyword in title
- Keyword in description
- Keyword in first 100 words
- Keyword in at least one H2
4. **Audit content structure:**
- Question hook opening
- Code in first 200 words
- "What you'll learn" box
- Short paragraphs
5. **Audit featured snippet optimization:**
- 40-60 word definition after "What is" H2
- Question-format H2s
- Numbered steps for how-to content
6. **Audit internal linking:**
- 3-5 related concepts linked
- Descriptive anchor text
- Related Concepts section complete
7. **Calculate score** and fix any issues
### Deliverables
- SEO audit report with score (X/27)
- All high-priority fixes implemented
### Quality Gates
Before marking complete:
- [ ] Score 24+ out of 27 (90%+)
- [ ] Title optimized
- [ ] Meta description optimized
- [ ] Keywords placed naturally
- [ ] Featured snippet optimized
- [ ] Internal links complete
---
## Complete Workflow Checklist
Use this master checklist to track progress through all phases.
```markdown
# Concept Workflow: [Concept Name]
**Started:** YYYY-MM-DD
**Target Category:** {category}
**File Path:** `/docs/concepts/{concept-name}.mdx`
**Test Path:** `/tests/{category}/{concept-name}/`
---
## Phase 1: Resource Curation
- [ ] MDN references found (2-4)
- [ ] Articles found (4-6)
- [ ] Videos found (3-4)
- [ ] All links verified working
- [ ] Descriptions written (specific, 2 sentences)
- [ ] Resources formatted as Cards
**Status:** ⬜ Not Started | 🟡 In Progress | ✅ Complete
---
## Phase 2: Concept Writing
- [ ] Frontmatter complete
- [ ] Opening hook written
- [ ] Opening code example added
- [ ] "What you'll learn" box added
- [ ] Main content sections written
- [ ] Key Takeaways added
- [ ] Test Your Knowledge added
- [ ] Related Concepts added
- [ ] Resources pasted from Phase 1
- [ ] Added to docs.json (if new)
**Status:** ⬜ Not Started | 🟡 In Progress | ✅ Complete
---
## Phase 3: Test Writing
- [ ] Code examples extracted and categorized
- [ ] Test file created
- [ ] DOM test file created (if needed)
- [ ] All testable examples have tests
- [ ] Source line references added
- [ ] Tests run and passing
**Test Results:** X passing, X failing
**Status:** ⬜ Not Started | 🟡 In Progress | ✅ Complete
---
## Phase 4: Fact Checking
- [ ] All tests passing
- [ ] Code examples verified accurate
- [ ] MDN links checked (X/X valid)
- [ ] External resources checked (X/X valid)
- [ ] Technical claims audited
- [ ] No misconceptions found
- [ ] Issues fixed
**Status:** ⬜ Not Started | 🟡 In Progress | ✅ Complete
---
## Phase 5: SEO Review
- [ ] Title tag optimized (50-60 chars)
- [ ] Meta description optimized (150-160 chars)
- [ ] Keywords placed correctly
- [ ] Content structure verified
- [ ] Featured snippet optimized
- [ ] Internal links complete
**SEO Score:** X/27 (X%)
**Status:** ⬜ Not Started | 🟡 In Progress | ✅ Complete
---
## Final Status
**All Phases Complete:** ⬜ No | ✅ Yes
**Ready to Publish:** ⬜ No | ✅ Yes
**Completed:** YYYY-MM-DD
```
---
## Execution Instructions
When executing this workflow, follow these steps:
### Step 1: Initialize
```markdown
Starting concept workflow for: [CONCEPT NAME]
Category: [fundamentals/functions-execution/web-platform/etc.]
File: /docs/concepts/[concept-name].mdx
Tests: /tests/[category]/[concept-name]/
```
### Step 2: Execute Each Phase
For each phase:
1. **Announce the phase:**
```markdown
## Phase X: [Phase Name]
Using skill: [skill-name]
```
2. **Load the skill** to get detailed instructions
3. **Execute the phase** following the skill's methodology
4. **Report completion:**
```markdown
Phase X complete:
- [Deliverable 1]
- [Deliverable 2]
- Quality gates: ✅ All passed
```
5. **Move to next phase** only after quality gates pass
### Step 3: Final Report
After all phases complete:
```markdown
# Workflow Complete: [Concept Name]
## Summary
- **Concept Page:** `/docs/concepts/[concept-name].mdx`
- **Test File:** `/tests/[category]/[concept-name]/[concept-name].test.js`
- **Word Count:** X,XXX words
- **Code Examples:** XX (XX tested)
- **Resources:** X MDN, X articles, X videos
## Quality Metrics
- **Tests:** XX passing
- **Fact Check:** ✅ All verified
- **SEO Score:** XX/27 (XX%)
## Files Created/Modified
1. `/docs/concepts/[concept-name].mdx` (created)
2. `/docs/docs.json` (updated navigation)
3. `/tests/[category]/[concept-name]/[concept-name].test.js` (created)
## Ready to Publish: ✅ Yes
```
---
## Phase Dependencies
Some phases can be partially parallelized, but the general flow should be:
```
Phase 1 (Resources) ──┐
├──► Phase 2 (Writing) ──► Phase 3 (Tests) ──┐
│ │
│ ┌───────────────────────────────────┘
│ ▼
└──► Phase 4 (Fact Check) ──► Phase 5 (SEO)
```
- **Phase 1 before Phase 2:** Resources inform what to write
- **Phase 2 before Phase 3:** Need content before writing tests
- **Phase 3 before Phase 4:** Tests are part of fact-checking
- **Phase 4 before Phase 5:** Fix accuracy issues before SEO polish
---
## Skill Reference
| Phase | Skill | Purpose |
|-------|-------|---------|
| 1 | `resource-curator` | Find and evaluate external resources |
| 2 | `write-concept` | Write the documentation page |
| 3 | `test-writer` | Generate tests for code examples |
| 4 | `fact-check` | Verify technical accuracy |
| 5 | `seo-review` | Optimize for search visibility |
Each skill has detailed instructions in its own `SKILL.md` file. Load the appropriate skill at each phase for comprehensive guidance.
---
## Time Estimates
| Phase | Estimated Time | Notes |
|-------|---------------|-------|
| Phase 1: Resources | 15-30 min | Depends on availability of quality resources |
| Phase 2: Writing | 1-3 hours | Depends on concept complexity |
| Phase 3: Tests | 30-60 min | Depends on number of code examples |
| Phase 4: Fact Check | 15-30 min | Most automated via tests |
| Phase 5: SEO | 15-30 min | Mostly checklist verification |
| **Total** | **2-5 hours** | For a complete concept page |
---
## Quick Start
To start the workflow for a new concept:
```
1. Determine the concept name and category
2. Load this skill (concept-workflow)
3. Execute Phase 1: Load resource-curator, find resources
4. Execute Phase 2: Load write-concept, write the page
5. Execute Phase 3: Load test-writer, create tests
6. Execute Phase 4: Load fact-check, verify accuracy
7. Execute Phase 5: Load seo-review, optimize SEO
8. Generate final report
9. Commit changes
```
**Example prompt to start:**
> "Create a complete concept page for 'hoisting' using the concept-workflow skill"
This will trigger the full end-to-end workflow, creating a complete, tested, verified, and SEO-optimized concept page.
================================================
FILE: .claude/skills/fact-check/SKILL.md
================================================
---
name: fact-check
description: Verify technical accuracy of JavaScript concept pages by checking code examples, MDN/ECMAScript compliance, and external resources to prevent misinformation
---
# Skill: JavaScript Fact Checker
Use this skill to verify the technical accuracy of concept documentation pages for the 33 JavaScript Concepts project. This ensures we're not spreading misinformation about JavaScript.
## When to Use
- Before publishing a new concept page
- After significant edits to existing content
- When reviewing community contributions
- When updating pages with new JavaScript features
- Periodic accuracy audits of existing content
## What We're Protecting Against
- Incorrect JavaScript behavior claims
- Outdated information (pre-ES6 patterns presented as current)
- Code examples that don't produce stated outputs
- Broken or misleading external resource links
- Common misconceptions stated as fact
- Browser-specific behavior presented as universal
- Inaccurate API descriptions
---
## Fact-Checking Methodology
Follow these five phases in order for a complete fact check.
### Phase 1: Code Example Verification
Every code example in the concept page must be verified for accuracy.
#### Step-by-Step Process
1. **Identify all code blocks** in the document
2. **For each code block:**
- Read the code and any output comments (e.g., `// "string"`)
- Mentally execute the code or test in a JavaScript environment
- Verify the output matches what's stated in comments
- Check that variable names and logic are correct
3. **For "wrong" examples (marked with ❌):**
- Verify they actually produce the wrong/unexpected behavior
- Confirm the explanation of why it's wrong is accurate
4. **For "correct" examples (marked with ✓):**
- Verify they work as stated
- Confirm they follow current best practices
5. **Run project tests:**
```bash
# Run all tests
npm test
# Run tests for a specific concept
npm test -- tests/fundamentals/call-stack/
npm test -- tests/fundamentals/primitive-types/
```
6. **Check test coverage:**
- Look in `/tests/{category}/{concept-name}/`
- Verify tests exist for major code examples
- Flag examples without test coverage
#### Code Verification Checklist
| Check | How to Verify |
|-------|---------------|
| `console.log` outputs match comments | Run code or trace mentally |
| Variables are correctly named/used | Read through logic |
| Functions return expected values | Trace execution |
| Async code resolves in stated order | Understand event loop |
| Error examples actually throw | Test in try/catch |
| Array/object methods return correct types | Check MDN |
| `typeof` results are accurate | Test common cases |
| Strict mode behavior noted if relevant | Check if example depends on it |
#### Common Output Mistakes to Catch
```javascript
// Watch for these common mistakes:
// 1. typeof null
typeof null // "object" (not "null"!)
// 2. Array methods that return new arrays vs mutate
const arr = [1, 2, 3]
arr.push(4) // Returns 4 (length), not the array!
arr.map(x => x*2) // Returns NEW array, doesn't mutate
// 3. Promise resolution order
Promise.resolve().then(() => console.log('micro'))
setTimeout(() => console.log('macro'), 0)
console.log('sync')
// Output: sync, micro, macro (NOT sync, macro, micro)
// 4. Comparison results
[] == false // true
[] === false // false
![] // false (empty array is truthy!)
// 5. this binding
const obj = {
name: 'Alice',
greet: () => console.log(this.name) // undefined! Arrow has no this
}
```
---
### Phase 2: MDN Documentation Verification
All claims about JavaScript APIs, methods, and behavior should align with MDN documentation.
#### Step-by-Step Process
1. **Check all MDN links:**
- Click each MDN link in the document
- Verify the link returns 200 (not 404)
- Confirm the linked page matches what's being referenced
2. **Verify API descriptions:**
- Compare method signatures with MDN
- Check parameter names and types
- Verify return types
- Confirm edge case behavior
3. **Check for deprecated APIs:**
- Look for deprecation warnings on MDN
- Flag any deprecated methods being taught as current
4. **Verify browser compatibility claims:**
- Cross-reference with MDN compatibility tables
- Check Can I Use for broader support data
#### MDN Link Patterns
| Content Type | MDN URL Pattern |
|--------------|-----------------|
| Web APIs | `https://developer.mozilla.org/en-US/docs/Web/API/{APIName}` |
| Global Objects | `https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/{Object}` |
| Statements | `https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/{Statement}` |
| Operators | `https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/{Operator}` |
| HTTP | `https://developer.mozilla.org/en-US/docs/Web/HTTP` |
#### What to Verify Against MDN
| Claim Type | What to Check |
|------------|---------------|
| Method signature | Parameters, optional params, return type |
| Return value | Exact type and possible values |
| Side effects | Does it mutate? What does it affect? |
| Exceptions | What errors can it throw? |
| Browser support | Compatibility tables |
| Deprecation status | Any deprecation warnings? |
---
### Phase 3: ECMAScript Specification Compliance
For nuanced JavaScript behavior, verify against the ECMAScript specification.
#### When to Check the Spec
- Edge cases and unusual behavior
- Claims about "how JavaScript works internally"
- Type coercion rules
- Operator precedence
- Execution order guarantees
- Claims using words like "always", "never", "guaranteed"
#### How to Navigate the Spec
The ECMAScript specification is at: https://tc39.es/ecma262/
| Concept | Spec Section |
|---------|--------------|
| Type coercion | Abstract Operations (7.1) |
| Equality | Abstract Equality Comparison (7.2.14), Strict Equality (7.2.15) |
| typeof | The typeof Operator (13.5.3) |
| Objects | Ordinary and Exotic Objects' Behaviours (10) |
| Functions | ECMAScript Function Objects (10.2) |
| this binding | ResolveThisBinding (9.4.4) |
| Promises | Promise Objects (27.2) |
| Iteration | Iteration (27.1) |
#### Spec Verification Examples
```javascript
// Claim: "typeof null returns 'object' due to a bug"
// Spec says: typeof null → "object" (Table 41)
// Historical context: This is a known quirk from JS 1.0
// Verdict: ✓ Correct, though calling it a "bug" is slightly informal
// Claim: "Promises always resolve asynchronously"
// Spec says: Promise reaction jobs are enqueued (27.2.1.3.2)
// Verdict: ✓ Correct - even resolved promises schedule microtasks
// Claim: "=== is faster than =="
// Spec says: Nothing about performance
// Verdict: ⚠️ Needs nuance - this is implementation-dependent
```
---
### Phase 4: External Resource Verification
All external links (articles, videos, courses) must be verified.
#### Step-by-Step Process
1. **Check link accessibility:**
- Click each external link
- Verify it loads (not 404, not paywalled)
- Note any redirects to different URLs
2. **Verify content accuracy:**
- Skim the resource for obvious errors
- Check it's JavaScript-focused (not C#, Python, Java)
- Verify it's not teaching anti-patterns
3. **Check publication date:**
- For time-sensitive topics (async, modules, etc.), prefer recent content
- Flag resources from before 2015 for ES6+ topics
4. **Verify description accuracy:**
- Does our description match what the resource actually covers?
- Is the description specific (not generic)?
#### External Resource Checklist
| Check | Pass Criteria |
|-------|---------------|
| Link works | Returns 200, content loads |
| Not paywalled | Free to access (or clearly marked) |
| JavaScript-focused | Not primarily about other languages |
| Not outdated | Post-2015 for modern JS topics |
| Accurate description | Our description matches actual content |
| No anti-patterns | Doesn't teach bad practices |
| Reputable source | From known/trusted creators |
#### Red Flags in External Resources
- Uses `var` everywhere for ES6+ topics
- Uses callbacks for content about Promises/async
- Teaches jQuery as modern DOM manipulation
- Contains factual errors about JavaScript
- Video is >2 hours without timestamp links
- Content is primarily about another language
- Uses deprecated APIs without noting deprecation
---
### Phase 5: Technical Claims Audit
Review all prose claims about JavaScript behavior.
#### Claims That Need Verification
| Claim Type | How to Verify |
|------------|---------------|
| Performance claims | Need benchmarks or caveats |
| Browser behavior | Specify which browsers, check MDN |
| Historical claims | Verify dates/versions |
| "Always" or "never" statements | Check for exceptions |
| Comparisons (X vs Y) | Verify both sides accurately |
#### Red Flags in Technical Claims
- "Always" or "never" without exceptions noted
- Performance claims without benchmarks
- Browser behavior claims without specifying browsers
- Comparisons that oversimplify differences
- Historical claims without dates
- Claims about "how JavaScript works" without spec reference
#### Examples of Claims to Verify
```markdown
❌ "async/await is always better than Promises"
→ Verify: Not always - Promise.all() is better for parallel operations
❌ "JavaScript is an interpreted language"
→ Verify: Modern JS engines use JIT compilation
❌ "Objects are passed by reference"
→ Verify: Technically "passed by sharing" - the reference is passed by value
❌ "=== is faster than =="
→ Verify: Implementation-dependent, not guaranteed by spec
✓ "JavaScript is single-threaded"
→ Verify: Correct for the main thread (Web Workers are separate)
✓ "Promises always resolve asynchronously"
→ Verify: Correct per ECMAScript spec
```
---
## Common JavaScript Misconceptions
Watch for these misconceptions being stated as fact.
### Type System Misconceptions
| Misconception | Reality | How to Verify |
|---------------|---------|---------------|
| `typeof null === "object"` is intentional | It's a bug from JS 1.0 that can't be fixed for compatibility | Historical context, TC39 discussions |
| JavaScript has no types | JS is dynamically typed, not untyped | ECMAScript spec defines types |
| `==` is always wrong | `== null` checks both null and undefined, has valid uses | Many style guides allow this pattern |
| `NaN === NaN` is false "by mistake" | It's intentional per IEEE 754 floating point spec | IEEE 754 standard |
### Function Misconceptions
| Misconception | Reality | How to Verify |
|---------------|---------|---------------|
| Arrow functions are just shorter syntax | They have no `this`, `arguments`, `super`, or `new.target` | MDN, ECMAScript spec |
| `var` is hoisted to function scope with its value | Only declaration is hoisted, not initialization | Code test, MDN |
| Closures are a special opt-in feature | All functions in JS are closures | ECMAScript spec |
| IIFEs are obsolete | Still useful for one-time initialization | Modern codebases still use them |
### Async Misconceptions
| Misconception | Reality | How to Verify |
|---------------|---------|---------------|
| Promises run in parallel | JS is single-threaded; Promises are async, not parallel | Event loop explanation |
| `async/await` is different from Promises | It's syntactic sugar over Promises | MDN, can await any thenable |
| `setTimeout(fn, 0)` runs immediately | Runs after current execution + microtasks | Event loop, code test |
| `await` pauses the entire program | Only pauses the async function, not the event loop | Code test |
### Object Misconceptions
| Misconception | Reality | How to Verify |
|---------------|---------|---------------|
| Objects are "passed by reference" | References are passed by value ("pass by sharing") | Reassignment test |
| `const` makes objects immutable | `const` prevents reassignment, not mutation | Code test |
| Everything in JavaScript is an object | Primitives are not objects (though they have wrappers) | `typeof` tests, MDN |
| `Object.freeze()` creates deep immutability | It's shallow - nested objects can still be mutated | Code test |
### Performance Misconceptions
| Misconception | Reality | How to Verify |
|---------------|---------|---------------|
| `===` is always faster than `==` | Implementation-dependent, not spec-guaranteed | Benchmarks vary |
| `for` loops are faster than `forEach` | Modern engines optimize both; depends on use case | Benchmark |
| Arrow functions are faster | No performance difference, just different behavior | Benchmark |
| Avoiding DOM manipulation is always faster | Sometimes batch mutations are slower than individual | Depends on browser, use case |
---
## Test Integration
Running the project's test suite is a key part of fact-checking.
### Test Commands
```bash
# Run all tests
npm test
# Run tests in watch mode
npm run test:watch
# Run tests with coverage
npm run test:coverage
# Run tests for specific concept
npm test -- tests/fundamentals/call-stack/
npm test -- tests/fundamentals/primitive-types/
npm test -- tests/fundamentals/value-reference-types/
npm test -- tests/fundamentals/type-coercion/
npm test -- tests/fundamentals/equality-operators/
npm test -- tests/fundamentals/scope-and-closures/
```
### Test Directory Structure
```
tests/
├── fundamentals/ # Concepts 1-6
│ ├── call-stack/
│ ├── primitive-types/
│ ├── value-reference-types/
│ ├── type-coercion/
│ ├── equality-operators/
│ └── scope-and-closures/
├── functions-execution/ # Concepts 7-8
│ ├── event-loop/
│ └── iife-modules/
└── web-platform/ # Concepts 9-10
├── dom/
└── http-fetch/
```
### When Tests Are Missing
If a concept doesn't have tests:
1. Flag this in the report as "needs test coverage"
2. Manually verify code examples are correct
3. Consider adding tests as a follow-up task
---
## Verification Resources
### Primary Sources
| Resource | URL | Use For |
|----------|-----|---------|
| MDN Web Docs | https://developer.mozilla.org | API docs, guides, compatibility |
| ECMAScript Spec | https://tc39.es/ecma262 | Authoritative behavior |
| TC39 Proposals | https://github.com/tc39/proposals | New features, stages |
| Can I Use | https://caniuse.com | Browser compatibility |
| Node.js Docs | https://nodejs.org/docs | Node-specific APIs |
| V8 Blog | https://v8.dev/blog | Engine internals |
### Project Resources
| Resource | Path | Use For |
|----------|------|---------|
| Test Suite | `/tests/` | Verify code examples |
| Concept Pages | `/docs/concepts/` | Current content |
| Run Tests | `npm test` | Execute all tests |
---
## Fact Check Report Template
Use this template to document your findings.
```markdown
# Fact Check Report: [Concept Name]
**File:** `/docs/concepts/[slug].mdx`
**Date:** YYYY-MM-DD
**Reviewer:** [Name/Claude]
**Overall Status:** ✅ Verified | ⚠️ Minor Issues | ❌ Major Issues
---
## Executive Summary
[2-3 sentence summary of findings. State whether the page is accurate overall and highlight any critical issues.]
**Tests Run:** Yes/No
**Test Results:** X passing, Y failing
**External Links Checked:** X/Y valid
---
## Phase 1: Code Example Verification
| # | Description | Line | Status | Notes |
|---|-------------|------|--------|-------|
| 1 | [Brief description] | XX | ✅/⚠️/❌ | [Notes] |
| 2 | [Brief description] | XX | ✅/⚠️/❌ | [Notes] |
| 3 | [Brief description] | XX | ✅/⚠️/❌ | [Notes] |
### Code Issues Found
#### Issue 1: [Title]
**Location:** Line XX
**Severity:** Critical/Major/Minor
**Current Code:**
```javascript
// The problematic code
```
**Problem:** [Explanation of what's wrong]
**Correct Code:**
```javascript
// The corrected code
```
---
## Phase 2: MDN/Specification Verification
| Claim | Location | Source | Status | Notes |
|-------|----------|--------|--------|-------|
| [Claim made] | Line XX | MDN/Spec | ✅/⚠️/❌ | [Notes] |
### MDN Link Status
| Link Text | URL | Status |
|-----------|-----|--------|
| [Text] | [URL] | ✅ 200 / ❌ 404 |
### Specification Discrepancies
[If any claims don't match the ECMAScript spec, detail them here]
---
## Phase 3: External Resource Verification
| Resource | Type | Link | Content | Notes |
|----------|------|------|---------|-------|
| [Title] | Article/Video | ✅/❌ | ✅/⚠️/❌ | [Notes] |
### Broken Links
1. **Line XX:** [URL] - 404 Not Found
2. **Line YY:** [URL] - Domain expired
### Content Concerns
1. **[Resource name]:** [Concern - e.g., outdated, wrong language, anti-patterns]
### Description Accuracy
| Resource | Description Accurate? | Notes |
|----------|----------------------|-------|
| [Title] | ✅/❌ | [Notes] |
---
## Phase 4: Technical Claims Audit
| Claim | Location | Verdict | Notes |
|-------|----------|---------|-------|
| "[Claim]" | Line XX | ✅/⚠️/❌ | [Notes] |
### Claims Needing Revision
1. **Line XX:** "[Current claim]"
- **Issue:** [What's wrong]
- **Suggested:** "[Revised claim]"
---
## Phase 5: Test Results
**Test File:** `/tests/[category]/[concept]/[concept].test.js`
**Tests Run:** XX
**Passing:** XX
**Failing:** XX
### Failing Tests
| Test Name | Expected | Actual | Related Doc Line |
|-----------|----------|--------|------------------|
| [Test] | [Expected] | [Actual] | Line XX |
### Coverage Gaps
Examples in documentation without corresponding tests:
- [ ] Line XX: [Description of untested example]
- [ ] Line YY: [Description of untested example]
---
## Issues Summary
### Critical (Must Fix Before Publishing)
1. **[Issue title]**
- Location: Line XX
- Problem: [Description]
- Fix: [How to fix]
### Major (Should Fix)
1. **[Issue title]**
- Location: Line XX
- Problem: [Description]
- Fix: [How to fix]
### Minor (Nice to Have)
1. **[Issue title]**
- Location: Line XX
- Suggestion: [Improvement]
---
## Recommendations
1. **[Priority 1]:** [Specific actionable recommendation]
2. **[Priority 2]:** [Specific actionable recommendation]
3. **[Priority 3]:** [Specific actionable recommendation]
---
## Verification Checklist
- [ ] All code examples verified for correct output
- [ ] All MDN links checked and valid
- [ ] API descriptions match MDN documentation
- [ ] ECMAScript compliance verified (if applicable)
- [ ] All external resource links accessible
- [ ] Resource descriptions accurately represent content
- [ ] No common JavaScript misconceptions found
- [ ] Technical claims are accurate and nuanced
- [ ] Project tests run and reviewed
- [ ] Report complete and ready for handoff
---
## Sign-off
**Verified by:** [Name/Claude]
**Date:** YYYY-MM-DD
**Recommendation:** ✅ Ready to publish | ⚠️ Fix issues first | ❌ Major revision needed
```
---
## Quick Reference: Verification Commands
```bash
# Run all tests
npm test
# Run specific concept tests
npm test -- tests/fundamentals/call-stack/
# Check for broken links (if you have a link checker)
# Install: npm install -g broken-link-checker
# Run: blc https://developer.mozilla.org/... -ro
# Quick JavaScript REPL for testing
node
> typeof null
'object'
> [1,2,3].map(x => x * 2)
[ 2, 4, 6 ]
```
---
## Summary
When fact-checking a concept page:
1. **Run tests first** — `npm test` catches code errors automatically
2. **Verify every code example** — Output comments must match reality
3. **Check all MDN links** — Broken links and incorrect descriptions hurt credibility
4. **Verify external resources** — Must be accessible, accurate, and JavaScript-focused
5. **Audit technical claims** — Watch for misconceptions and unsupported statements
6. **Document everything** — Use the report template for consistent, thorough reviews
**Remember:** Our readers trust us to teach them correct JavaScript. A single piece of misinformation can create confusion that takes years to unlearn. Take fact-checking seriously.
================================================
FILE: .claude/skills/resource-curator/SKILL.md
================================================
---
name: resource-curator
description: Find, evaluate, and maintain high-quality external resources for JavaScript concept documentation, including auditing for broken and outdated links
---
# Skill: Resource Curator for Concept Pages
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.
## When to Use
- Adding resources to a new concept page
- Refreshing resources on existing pages
- Auditing for broken or outdated links
- Reviewing community-contributed resources
- Periodic link maintenance
## Resource Curation Methodology
Follow these five phases for comprehensive resource curation.
### Phase 1: Audit Existing Resources
Before adding new resources, audit what's already there:
1. **Check link accessibility** — Does each link return 200?
2. **Verify content accuracy** — Is the content still correct?
3. **Check publication dates** — Is it too old for the topic?
4. **Identify outdated content** — Does it use old syntax/patterns?
5. **Review descriptions** — Are they specific or generic?
### Phase 2: Identify Resource Gaps
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:
- Are there enough resources for beginners AND advanced learners?
- Is there visual content (diagrams, animations)?
- Are official references (MDN) included?
- Is there diversity in teaching styles?
### Phase 3: Find New Resources
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
```
### Phase 4: Write Descriptions
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)
```
### Phase 5: Format and Organize
- Use correct Card syntax with proper icons
- Order resources logically (foundational first, advanced later)
- Ensure consistent formatting
---
## Trusted Sources
### Reference Sources (Priority Order)
| 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 |
### Article Sources (Priority Order)
| 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 |
### Video Creators (Priority Order)
| 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 |
### Course Sources
| 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 |
---
## Quality Criteria
### Must Have (Required)
- [ ] **Link works** — Returns 200 (not 404, 301, 5xx)
- [ ] **JavaScript-focused** — Not primarily about C#, Python, Java, etc.
- [ ] **Technically accurate** — No factual errors or anti-patterns
- [ ] **Accessible** — Free or has meaningful free preview
### Should Have (Preferred)
- [ ] **Recent enough** — See publication date guidelines below
- [ ] **Reputable source** — From trusted sources list or well-known creator
- [ ] **Unique perspective** — Not duplicate of existing resources
- [ ] **Appropriate depth** — Matches concept complexity
- [ ] **Good engagement** — Positive comments, high views (for videos)
### Red Flags (Reject)
| 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 |
---
## Publication Date Guidelines
| 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.
---
## Description Writing Guide
### The 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)
```
### Good Examples
```markdown
<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>
```
### Bad Examples (Avoid)
```markdown
<!-- 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>
```
### Words and Phrases to Avoid
| 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? |
### Words and Phrases That Work
| 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" |
---
## Link Audit Process
### Step 1: Check Each Link
For each resource in the concept page:
1. **Click the link** — Does it load?
2. **Note the HTTP status:**
| 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 |
### Step 2: Content Verification
For each accessible link:
1. **Skim the content** — Is it still accurate?
2. **Check the date** — When was it published/updated?
3. **Verify JavaScript focus** — Is it primarily about JS?
4. **Look for red flags** — Anti-patterns, errors, outdated syntax
### Step 3: Description Review
For each resource:
1. **Read current description** — Is it specific?
2. **Compare to actual content** — Does it match?
3. **Check for generic phrases** — "comprehensive guide", etc.
4. **Identify improvements** — How can it be more specific?
### Step 4: Gap Analysis
After auditing all resources:
1. **Count by section** — Do we meet targets?
2. **Check diversity** — Beginner AND advanced? Visual AND text?
3. **Identify missing types** — No MDN? No videos?
4. **Note recommendations** — What should we add?
---
## Resource Section Templates
### Reference Section
```markdown
## 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 Section
```markdown
## 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 Section
```markdown
## 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>
```
### Books Section (Optional)
```markdown
<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>
```
### Courses Section (Optional)
```markdown
<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>
```
---
## Resource Audit Report Template
Use this template to document audit findings.
```markdown
# 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
```
---
## Quick Reference
### Icon Reference
| Content Type | Icon Value |
|--------------|------------|
| MDN/Official docs | `book` |
| Articles/Blog posts | `newspaper` |
| Videos | `video` |
| Courses | `graduation-cap` |
| Books | `book` |
| Related concepts | Context-appropriate |
### Character Guidelines
| 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 |
### Resource Ordering
Within each section, order resources:
1. **Most foundational/beginner-friendly first**
2. **Official references before community content**
3. **Most highly recommended prominently placed**
4. **Advanced/niche content last**
---
## Quality Checklist
### Link Verification
- [ ] All links return 200 (not 404, 301)
- [ ] No redirect chains
- [ ] No hard paywalls without notice
- [ ] All URLs are HTTPS where available
### Content Quality
- [ ] All resources are JavaScript-focused
- [ ] No resources teaching anti-patterns
- [ ] Publication dates appropriate for topic
- [ ] Mix of beginner and advanced content
- [ ] Visual and text resources included
### Description Quality
- [ ] All descriptions are specific (not generic)
- [ ] Descriptions explain unique value
- [ ] No "comprehensive guide to..." phrases
- [ ] Each description is 2 sentences
- [ ] Descriptions match actual content
### Completeness
- [ ] 2-4 MDN/official references
- [ ] 4-6 quality articles
- [ ] 3-4 quality videos
- [ ] Resources ordered logically
- [ ] Diversity in teaching styles
---
## Summary
When curating resources for a concept page:
1. **Audit first** — Check all existing links and content
2. **Identify gaps** — Compare against targets (2-4 refs, 4-6 articles, 3-4 videos)
3. **Find quality resources** — Search trusted sources
4. **Write specific descriptions** — What's unique + why read/watch
5. **Format correctly** — Proper Card syntax, icons, ordering
6. **Document changes** — Use the audit report template
**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.
================================================
FILE: .claude/skills/seo-review/SKILL.md
================================================
---
name: seo-review
description: Perform a focused SEO audit on JavaScript concept pages to maximize search visibility, featured snippet optimization, and ranking potential
---
# Skill: SEO Audit for Concept Pages
Use this skill to perform a focused SEO audit on concept documentation pages for the 33 JavaScript Concepts project. The goal is to maximize search visibility for JavaScript developers.
## When to Use
- Before publishing a new concept page
- When optimizing underperforming pages
- Periodic content audits
- After major content updates
- When targeting new keywords
## Goal
Each concept page should rank for searches like:
- "what is [concept] in JavaScript"
- "how does [concept] work in JavaScript"
- "[concept] JavaScript explained"
- "[concept] JavaScript tutorial"
- "[concept] JavaScript example"
---
## SEO Audit Methodology
Follow these five steps for a complete SEO audit.
### Step 1: Identify Target Keywords
Before auditing, identify the keyword cluster for the concept.
#### Keyword Cluster Template
| Type | Pattern | Example (Closures) |
|------|---------|-------------------|
| **Primary** | [concept] JavaScript | closures JavaScript |
| **What is** | what is [concept] in JavaScript | what is a closure in JavaScript |
| **How does** | how does [concept] work | how do closures work |
| **How to** | how to use/create [concept] | how to use closures |
| **Why** | why use [concept] | why use closures JavaScript |
| **Examples** | [concept] examples | closure examples JavaScript |
| **vs** | [concept] vs [related] | closures vs scope |
| **Interview** | [concept] interview questions | closure interview questions |
### Step 2: On-Page SEO Audit
Check all on-page SEO elements systematically.
### Step 3: Featured Snippet Optimization
Verify content is structured to win featured snippets.
### Step 4: Internal Linking Audit
Check the internal link structure.
### Step 5: Generate Report
Document findings using the report template.
---
## Keyword Clusters by Concept
Use these pre-built keyword clusters for each concept.
<AccordionGroup>
<Accordion title="Call Stack">
| Type | Keywords |
|------|----------|
| Primary | JavaScript call stack, call stack JavaScript |
| What is | what is the call stack in JavaScript |
| How does | how does the call stack work |
| Error | maximum call stack size exceeded, stack overflow JavaScript |
| Visual | call stack visualization, call stack explained |
| Interview | call stack interview questions JavaScript |
</Accordion>
<Accordion title="Primitive Types">
| Type | Keywords |
|------|----------|
| Primary | JavaScript primitive types, primitives in JavaScript |
| What are | what are primitive types in JavaScript |
| List | JavaScript data types, types in JavaScript |
| vs | primitives vs objects JavaScript |
| typeof | typeof JavaScript, JavaScript typeof operator |
| Interview | JavaScript types interview questions |
</Accordion>
<Accordion title="Value vs Reference Types">
| Type | Keywords |
|------|----------|
| Primary | JavaScript value vs reference, pass by reference JavaScript |
| What is | what is pass by value in JavaScript |
| How does | how does JavaScript pass objects |
| Comparison | value types vs reference types JavaScript |
| Copy | how to copy objects JavaScript, deep copy JavaScript |
</Accordion>
<Accordion title="Type Coercion">
| Type | Keywords |
|------|----------|
| Primary | JavaScript type coercion, type conversion JavaScript |
| What is | what is type coercion in JavaScript |
| How does | how does type coercion work |
| Implicit | implicit type conversion JavaScript |
| Explicit | explicit type conversion JavaScript |
| Interview | type coercion interview questions |
</Accordion>
<Accordion title="Equality Operators">
| Type | Keywords |
|------|----------|
| Primary | JavaScript equality, == vs === JavaScript |
| What is | what is the difference between == and === |
| Comparison | loose equality vs strict equality JavaScript |
| Best practice | when to use == vs === |
| Interview | JavaScript equality interview questions |
</Accordion>
<Accordion title="Scope and Closures">
| Type | Keywords |
|------|----------|
| Primary | JavaScript closures, JavaScript scope |
| What is | what is a closure in JavaScript, what is scope |
| How does | how do closures work, how does scope work |
| Types | types of scope JavaScript, lexical scope |
| Use cases | closure use cases, why use closures |
| Interview | closure interview questions JavaScript |
</Accordion>
<Accordion title="Event Loop">
| Type | Keywords |
|------|----------|
| Primary | JavaScript event loop, event loop JavaScript |
| What is | what is the event loop in JavaScript |
| How does | how does the event loop work |
| Visual | event loop visualization, event loop explained |
| Related | call stack event loop, task queue JavaScript |
| Interview | event loop interview questions |
</Accordion>
<Accordion title="Promises">
| Type | Keywords |
|------|----------|
| Primary | JavaScript Promises, Promises in JavaScript |
| What is | what is a Promise in JavaScript |
| How to | how to use Promises, how to chain Promises |
| Methods | Promise.all, Promise.race, Promise.allSettled |
| Error | Promise error handling, Promise catch |
| vs | Promises vs callbacks, Promises vs async await |
</Accordion>
<Accordion title="async/await">
| Type | Keywords |
|------|----------|
| Primary | JavaScript async await, async await JavaScript |
| What is | what is async await in JavaScript |
| How to | how to use async await, async await tutorial |
| Error | async await error handling, try catch async |
| vs | async await vs Promises |
| Interview | async await interview questions |
</Accordion>
<Accordion title="this Keyword">
| Type | Keywords |
|------|----------|
| Primary | JavaScript this keyword, this in JavaScript |
| What is | what is this in JavaScript |
| How does | how does this work in JavaScript |
| Binding | call apply bind JavaScript, this binding |
| Arrow | this in arrow functions |
| Interview | this keyword interview questions |
</Accordion>
<Accordion title="Prototypes">
| Type | Keywords |
|------|----------|
| Primary | JavaScript prototype, prototype chain JavaScript |
| What is | what is a prototype in JavaScript |
| How does | how does prototype inheritance work |
| Chain | prototype chain explained |
| vs | prototype vs class JavaScript |
| Interview | prototype interview questions JavaScript |
</Accordion>
<Accordion title="DOM">
| Type | Keywords |
|------|----------|
| Primary | JavaScript DOM, DOM manipulation JavaScript |
| What is | what is the DOM in JavaScript |
| How to | how to manipulate DOM JavaScript |
| Methods | getElementById, querySelector JavaScript |
| Events | DOM events JavaScript, event listeners |
| Performance | DOM performance, virtual DOM vs DOM |
</Accordion>
<Accordion title="Higher-Order Functions">
| Type | Keywords |
|------|----------|
| Primary | JavaScript higher order functions, higher order functions |
| What are | what are higher order functions |
| Examples | map filter reduce JavaScript |
| How to | how to use higher order functions |
| Interview | higher order functions interview |
</Accordion>
<Accordion title="Recursion">
| Type | Keywords |
|------|----------|
| Primary | JavaScript recursion, recursion in JavaScript |
| What is | what is recursion in JavaScript |
| How to | how to write recursive functions |
| Examples | recursion examples JavaScript |
| vs | recursion vs iteration JavaScript |
| Interview | recursion interview questions |
</Accordion>
</AccordionGroup>
---
## Audit Checklists
### Title Tag Checklist (4 points)
| # | Check | Points | How to Verify |
|---|-------|--------|---------------|
| 1 | Length 50-60 characters | 1 | Count characters in `title` frontmatter |
| 2 | Primary keyword in first half | 1 | Concept name appears early |
| 3 | Ends with "in JavaScript" | 1 | Check title ending |
| 4 | Contains compelling hook | 1 | Promises value/benefit to reader |
**Scoring:**
- 4/4: ✅ Excellent
- 3/4: ⚠️ Good, minor improvements possible
- 0-2/4: ❌ Needs significant work
**Title Formula:**
```
[Concept]: [What You'll Understand] in JavaScript
```
**Good Examples:**
| Concept | Title (with character count) |
|---------|------------------------------|
| Closures | "Closures: How Functions Remember Their Scope in JavaScript" (58 chars) |
| Event Loop | "Event Loop: How Async Code Actually Runs in JavaScript" (54 chars) |
| Promises | "Promises: Handling Async Operations in JavaScript" (49 chars) |
| DOM | "DOM: How Browsers Represent Web Pages in JavaScript" (51 chars) |
**Bad Examples:**
| Issue | Bad Title | Better Title |
|-------|-----------|--------------|
| Too short | "Closures" | "Closures: How Functions Remember Their Scope in JavaScript" |
| Too long | "Understanding JavaScript Closures and How They Work with Examples" (66 chars) | "Closures: How Functions Remember Their Scope in JavaScript" (58 chars) |
| No hook | "JavaScript Closures" | "Closures: How Functions Remember Their Scope in JavaScript" |
| Missing "JavaScript" | "Understanding Closures and Scope" | Add "in JavaScript" at end |
---
### Meta Description Checklist (4 points)
| # | Check | Points | How to Verify |
|---|-------|--------|---------------|
| 1 | Length 150-160 characters | 1 | Count characters in `description` frontmatter |
| 2 | Starts with action word | 1 | "Learn", "Understand", "Discover" (NOT "Master") |
| 3 | Contains primary keyword | 1 | Concept name + "JavaScript" present |
| 4 | Promises specific value | 1 | Lists what reader will learn |
**Description Formula:**
```
[Action word] [what it is] in JavaScript. [Specific things they'll learn]: [topic 1], [topic 2], and [topic 3].
```
**Good Examples:**
| Concept | Description |
|---------|-------------|
| Closures | "Learn JavaScript closures and how functions remember their scope. Covers lexical scoping, practical use cases, memory considerations, and common closure patterns." (159 chars) |
| Event Loop | "Discover how the JavaScript event loop manages async code execution. Understand the call stack, task queue, microtasks, and why JavaScript is single-threaded but non-blocking." (176 chars - trim!) |
| DOM | "Learn how the DOM works in JavaScript. Understand how browsers represent HTML as a tree, select and manipulate elements, traverse nodes, and optimize rendering." (162 chars) |
**Bad Examples:**
| Issue | Bad Description | Fix |
|-------|-----------------|-----|
| Too short | "Learn about closures" | Expand to 150-160 chars with specifics |
| Starts with "Master" | "Master JavaScript closures..." | "Learn JavaScript closures..." |
| Too vague | "A guide to closures" | List specific topics covered |
| Missing keyword | "Functions can remember things" | Include "closures" and "JavaScript" |
---
### Keyword Placement Checklist (5 points)
| # | Check | Points | How to Verify |
|---|-------|--------|---------------|
| 1 | Primary keyword in title | 1 | Check frontmatter `title` |
| 2 | Primary keyword in meta description | 1 | Check frontmatter `description` |
| 3 | Primary keyword in first 100 words | 1 | Check opening paragraphs |
| 4 | Keyword in at least one H2 heading | 1 | Scan all `##` headings |
| 5 | No keyword stuffing | 1 | Content reads naturally |
**Keyword Placement Map:**
```
┌─────────────────────────────────────────────────────────────────────────┐
│ KEYWORD PLACEMENT │
├─────────────────────────────────────────────────────────────────────────┤
│ │
│ 🔴 CRITICAL (Must have keyword) │
│ ───────────────────────────────── │
│ • title frontmatter │
│ • description frontmatter │
│ • First paragraph (within 100 words) │
│ • At least one H2 heading │
│ │
│ 🟡 RECOMMENDED (Include naturally) │
│ ────────────────────────────────── │
│ • "What you'll learn" Info box │
│ • H3 subheadings │
│ • Key Takeaways section │
│ • First sentence after major H2s │
│ │
│ ⚠️ AVOID │
│ ───────── │
│ • Same phrase >4 times per 1000 words │
│ • Forcing keywords where pronouns work better │
│ • Awkward sentence structures to fit keywords │
│ │
└─────────────────────────────────────────────────────────────────────────┘
```
---
### Content Structure Checklist (6 points)
| # | Check | Points | How to Verify |
|---|-------|--------|---------------|
| 1 | Opens with question hook | 1 | First paragraph asks engaging question |
| 2 | Code example in first 200 words | 1 | Simple example appears early |
| 3 | "What you'll learn" Info box | 1 | `<Info>` component after opening |
| 4 | Short paragraphs (2-4 sentences) | 1 | Scan content for long blocks |
| 5 | 1,500+ words | 1 | Word count check |
| 6 | Key terms bolded on first mention | 1 | Important terms use `**bold**` |
**Content Structure Template:**
```
┌─────────────────────────────────────────────────────────────────────────┐
│ IDEAL PAGE STRUCTURE │
├─────────────────────────────────────────────────────────────────────────┤
│ │
│ 1. QUESTION HOOK (First 50 words) │
│ "How does JavaScript...? Why do...?" │
│ │
│ 2. BRIEF ANSWER + CODE EXAMPLE (Words 50-200) │
│ Quick explanation + simple code demo │
│ │
│ 3. "WHAT YOU'LL LEARN" INFO BOX │
│ 5-7 bullet points │
│ │
│ 4. PREREQUISITES WARNING (if applicable) │
│ Link to required prior concepts │
│ │
│ 5. MAIN CONTENT SECTIONS (H2s) │
│ Each H2 answers a question or teaches a concept │
│ Include code examples, diagrams, tables │
│ │
│ 6. COMMON MISTAKES / GOTCHAS SECTION │
│ What trips people up │
│ │
│ 7. KEY TAKEAWAYS │
│ 8-10 numbered points summarizing everything │
│ │
│ 8. TEST YOUR KNOWLEDGE │
│ 5-6 Q&A accordions │
│ │
│ 9. RELATED CONCEPTS │
│ 4 cards linking to related topics │
│ │
│ 10. RESOURCES (Reference, Articles, Videos) │
│ MDN links, curated articles, videos │
│ │
└─────────────────────────────────────────────────────────────────────────┘
```
---
### Featured Snippet Checklist (4 points)
| # | Check | Points | How to Verify |
|---|-------|--------|---------------|
| 1 | "What is X" has 40-60 word definition | 1 | Count words in first paragraph after "What is" H2 |
| 2 | At least one H2 is phrased as question | 1 | Check for "What is", "How does", "Why" H2s |
| 3 | Numbered steps for "How to" content | 1 | Uses `<Steps>` component or numbered list |
| 4 | Comparison tables (if applicable) | 1 | Tables for "X vs Y" content |
**Featured Snippet Patterns:**
```
┌─────────────────────────────────────────────────────────────────────────┐
│ FEATURED SNIPPET FORMATS │
├─────────────────────────────────────────────────────────────────────────┤
│ │
│ QUERY TYPE WINNING FORMAT YOUR CONTENT │
│ ─────────── ────────────── ──────────── │
│ │
│ "What is X" Paragraph 40-60 word definition │
│ after H2, bold keyword │
│ │
│ "How to X" Numbered list <Steps> component or │
│ 1. 2. 3. markdown │
│ │
│ "X vs Y" Table | Feature | X | Y | │
│ comparison table │
│ │
│ "Types of X" Bullet list - **Type 1** — desc │
│ - **Type 2** — desc │
│ │
│ "[X] examples" Code block ```javascript │
│ + explanation // example code │
│ │
└─────────────────────────────────────────────────────────────────────────┘
```
**Definition Paragraph Example (40-60 words):**
```markdown
## What is a Closure in JavaScript?
A **closure** is a function that retains access to variables from its outer
(enclosing) scope, even after that outer function has finished executing.
Closures are created every time a function is created in JavaScript, allowing
inner functions to "remember" and access their lexical environment.
```
(This is 52 words - perfect for a featured snippet)
---
### Internal Linking Checklist (4 points)
| # | Check | Points | How to Verify |
|---|-------|--------|---------------|
| 1 | 3-5 related concepts linked in body | 1 | Count `/concepts/` links in prose |
| 2 | Descriptive anchor text | 1 | No "click here", "here", "this" |
| 3 | Prerequisites in Warning box | 1 | `<Warning>` with links at start |
| 4 | Related Concepts section has 4 cards | 1 | `<CardGroup>` at end with 4 Cards |
**Good Anchor Text:**
| ❌ Bad | ✓ Good |
|--------|--------|
| "click here" | "event loop concept" |
| "here" | "JavaScript closures" |
| "this article" | "our Promises guide" |
| "read more" | "understanding the call stack" |
**Link Placement Strategy:**
```markdown
<!-- In Prerequisites (Warning box) -->
<Warning>
**Prerequisite:** This guide assumes you understand [Promises](/concepts/promises)
and the [Event Loop](/concepts/event-loop). Read those first if needed.
</Warning>
<!-- In Body Content (natural context) -->
When the callback finishes, it's added to the task queue — managed by
the [event loop](/concepts/event-loop).
<!-- In Related Concepts Section -->
<CardGroup cols={2}>
<Card title="Promises" icon="handshake" href="/concepts/promises">
async/await is built on top of Promises
</Card>
</CardGroup>
```
---
### Technical SEO Checklist (3 points)
| # | Check | Points | How to Verify |
|---|-------|--------|---------------|
| 1 | Single H1 per page | 1 | Only one `#` heading (the title) |
| 2 | URL slug contains keyword | 1 | `/concepts/closures` not `/concepts/topic-1` |
| 3 | No orphan pages | 1 | Page is linked from at least one other page |
**H1 Rule:**
Every page should have exactly ONE H1 (your main title). This is critical for SEO:
- The H1 tells Google what the page is about
- Multiple H1s confuse search engines about page hierarchy
- All other headings should be H2 (`##`) and below
- The H1 should contain your primary keyword
```markdown
# Closures in JavaScript ← This is your H1 (only one!)
## What is a Closure? ← H2 for sections
### Lexical Scope ← H3 for subsections
## How Closures Work ← Another H2
```
**URL/Slug Best Practices:**
| ✅ Good | ❌ Bad |
|---------|--------|
| `/concepts/closures` | `/concepts/c1` |
| `/concepts/event-loop` | `/concepts/topic-7` |
| `/concepts/type-coercion` | `/concepts/abc123` |
| `/concepts/async-await` | `/concepts/async_await` |
Rules for slugs:
- **Include primary keyword** — The concept name should be in the URL
- **Use hyphens, not underscores** — `event-loop` not `event_loop`
- **Keep slugs short and readable** — Under 50 characters
- **No UUIDs, database IDs, or random strings**
- **Lowercase only** — `/concepts/Event-Loop` should be `/concepts/event-loop`
**Orphan Page Detection:**
An orphan page has no internal links pointing to it from other pages. This hurts SEO because:
- Google may not discover or crawl it frequently
- It signals the page isn't important to your site structure
- Users can't navigate to it naturally
- Link equity doesn't flow to the page
**How to check for orphan pages:**
1. Search the codebase for links to this concept: `grep -r "/concepts/[slug]" docs/`
2. Verify it appears in at least one other concept's "Related Concepts" section
3. Check that pages listing it as a prerequisite link back appropriately
4. Ensure it's included in the navigation (`docs.json`)
**Fixing orphan pages:**
- Add the concept to related pages' "Related Concepts" CardGroup
- Link to it naturally in body content of related concepts
- Ensure bidirectional linking (if A links to B, B should link back to A where relevant)
---
## Scoring System
### Total Points Available: 30
| Category | Max Points |
|----------|------------|
| Title Tag | 4 |
| Meta Description | 4 |
| Keyword Placement | 5 |
| Content Structure | 6 |
| Featured Snippets | 4 |
| Internal Linking | 4 |
| Technical SEO | 3 |
| **Total** | **30** |
### Score Interpretation
| Score | Percentage | Status | Action |
|-------|------------|--------|--------|
| 27-30 | 90-100% | ✅ Excellent | Ready to publish |
| 23-26 | 75-89% | ⚠️ Good | Minor optimizations needed |
| 17-22 | 55-74% | ⚠️ Fair | Several improvements needed |
| 0-16 | <55% | ❌ Poor | Significant work required |
---
## Common SEO Issues and Fixes
### Title Tag Issues
| Issue | Current | Fix |
|-------|---------|-----|
| Too short (<50 chars) | "Closures" (8) | "Closures: How Functions Remember Their Scope in JavaScript" (58) |
| Too long (>60 chars) | "Understanding JavaScript Closures and How They Work with Examples" (66) | "Closures: How Functions Remember Their Scope in JavaScript" (58) |
| Missing keyword | "Understanding Scope" | Add concept name: "Closures: Understanding Scope in JavaScript" |
| No hook | "JavaScript Closures" | Add benefit: "Closures: How Functions Remember Their Scope in JavaScript" |
| Missing "JavaScript" | "Closures Explained" | Add at end: "Closures Explained in JavaScript" |
### Meta Description Issues
| Issue | Current | Fix |
|-------|---------|-----|
| Too short (<120 chars) | "Learn about closures" (20) | Expand with specifics to 150-160 chars |
| Too long (>160 chars) | [Gets truncated] | Edit ruthlessly, keep key information |
| Starts with "Master" | "Master JavaScript closures..." | "Learn JavaScript closures..." |
| No keyword | "Functions that remember" | Include "closures" and "JavaScript" |
| Too vague | "A guide to closures" | List specific topics: "Covers X, Y, and Z" |
### Content Structure Issues
| Issue | Fix |
|-------|-----|
| No question hook | Start with "How does...?" or "Why...?" |
| Code example too late | Move simple example to first 200 words |
| Missing Info box | Add `<Info>` with "What you'll learn" |
| Long paragraphs | Break into 2-4 sentence chunks |
| Under 1,500 words | Add more depth, examples, edge cases |
| No bolded terms | Bold key concepts on first mention |
### Featured Snippet Issues
| Issue | Fix |
|-------|-----|
| No "What is" definition | Add 40-60 word definition paragraph |
| Definition too long | Tighten to 40-60 words |
| No question H2s | Add "What is X?" or "How does X work?" H2 |
| Steps not numbered | Use `<Steps>` or numbered markdown |
| No comparison tables | Add table for "X vs Y" sections |
### Internal Linking Issues
| Issue | Fix |
|-------|-----|
| No internal links | Add 3-5 links to related concepts |
| Bad anchor text | Replace "click here" with descriptive text |
| No prerequisites | Add `<Warning>` with prerequisite links |
| Empty Related Concepts | Add 4 Cards linking to related topics |
### Technical SEO Issues
| Issue | Fix |
|-------|-----|
| Multiple H1 tags | Keep only one `#` heading (the title), use `##` for all sections |
| Slug missing keyword | Rename file to include concept name (e.g., `closures.mdx`) |
| Orphan page | Add links from related concept pages' body or Related Concepts section |
| Underscore in slug | Use hyphens: `event-loop.mdx` not `event_loop.mdx` |
| Uppercase in slug | Use lowercase only: `async-await.mdx` not `Async-Await.mdx` |
| Slug too long | Shorten to primary keyword: `closures.mdx` not `understanding-javascript-closures-and-scope.mdx` |
---
## SEO Audit Report Template
Use this template to document your findings.
```markdown
# SEO Audit Report: [Concept Name]
**File:** `/docs/concepts/[slug].mdx`
**Date:** YYYY-MM-DD
**Auditor:** [Name/Claude]
**Overall Score:** XX/30 (XX%)
**Status:** ✅ Excellent | ⚠️ Needs Work | ❌ Poor
---
## Score Summary
| Category | Score | Status |
|----------|-------|--------|
| Title Tag | X/4 | ✅/⚠️/❌ |
| Meta Description | X/4 | ✅/⚠️/❌ |
| Keyword Placement | X/5 | ✅/⚠️/❌ |
| Content Structure | X/6 | ✅/⚠️/❌ |
| Featured Snippets | X/4 | ✅/⚠️/❌ |
| Internal Linking | X/4 | ✅/⚠️/❌ |
| Technical SEO | X/3 | ✅/⚠️/❌ |
| **Total** | **X/30** | **STATUS** |
---
## Target Keywords
**Primary Keyword:** [e.g., "JavaScript closures"]
**Secondary Keywords:**
- [keyword 1]
- [keyword 2]
- [keyword 3]
**Search Intent:** Informational / How-to / Comparison
---
## Title Tag Analysis
**Current Title:** "[current title from frontmatter]"
**Character Count:** XX characters
**Score:** X/4
| Check | Status | Notes |
|-------|--------|-------|
| Length 50-60 chars | ✅/❌ | XX characters |
| Primary keyword in first half | ✅/❌ | [notes] |
| Ends with "in JavaScript" | ✅/❌ | [notes] |
| Contains compelling hook | ✅/❌ | [notes] |
**Issues Found:** [if any]
**Recommended Title:** "[suggested title]" (XX chars)
---
## Meta Description Analysis
**Current Description:** "[current description from frontmatter]"
**Character Count:** XX characters
**Score:** X/4
| Check | Status | Notes |
|-------|--------|-------|
| Length 150-160 chars | ✅/❌ | XX characters |
| Starts with action word | ✅/❌ | Starts with "[word]" |
| Contains primary keyword | ✅/❌ | [notes] |
| Promises specific value | ✅/❌ | [notes] |
**Issues Found:** [if any]
**Recommended Description:** "[suggested description]" (XX chars)
---
## Keyword Placement Analysis
**Score:** X/5
| Location | Present | Notes |
|----------|---------|-------|
| Title | ✅/❌ | [notes] |
| Meta description | ✅/❌ | [notes] |
| First 100 words | ✅/❌ | Found at word XX |
| H2 heading | ✅/❌ | Found in: "[H2 text]" |
| Natural reading | ✅/❌ | [no stuffing / stuffing detected] |
**Missing Keyword Placements:**
- [ ] [Location where keyword should be added]
---
## Content Structure Analysis
**Word Count:** X,XXX words
**Score:** X/6
| Check | Status | Notes |
|-------|--------|-------|
| Question hook opening | ✅/❌ | [notes] |
| Code in first 200 words | ✅/❌ | Code appears at word XX |
| "What you'll learn" box | ✅/❌ | [present/missing] |
| Short paragraphs | ✅/❌ | [notes on paragraph length] |
| 1,500+ words | ✅/❌ | X,XXX words |
| Bolded key terms | ✅/❌ | [notes] |
**Structure Issues:**
- [ ] [Issue and recommendation]
---
## Featured Snippet Analysis
**Score:** X/4
| Check | Status | Notes |
|-------|--------|-------|
| 40-60 word definition | ✅/❌ | Currently XX words |
| Question-format H2 | ✅/❌ | Found: "[H2]" / Not found |
| Numbered steps | ✅/❌ | [notes] |
| Comparison tables | ✅/❌/N/A | [notes] |
**Snippet Opportunities:**
1. **"What is [concept]" snippet:**
- Current definition: XX words
- Action: [Expand to/Trim to] 40-60 words
2. **"How to [action]" snippet:**
- Action: [Add Steps component / Already present]
---
## Internal Linking Analysis
**Score:** X/4
| Check | Status | Notes |
|-------|--------|-------|
| 3-5 internal links in body | ✅/❌ | Found X links |
| Descriptive anchor text | ✅/❌ | [notes] |
| Prerequisites in Warning | ✅/❌ | [present/missing] |
| Related Concepts section | ✅/❌ | X cards present |
**Current Internal Links:**
1. [Anchor text] → `/concepts/[slug]`
2. [Anchor text] → `/concepts/[slug]`
**Recommended Links to Add:**
- Link to [concept] in [section/context]
- Link to [concept] in [section/context]
**Bad Anchor Text Found:**
- Line XX: "click here" → change to "[descriptive text]"
---
## Technical SEO Analysis
**Score:** X/3
| Check | Status | Notes |
|-------|--------|-------|
| Single H1 per page | ✅/❌ | [Found X H1 tags] |
| URL slug contains keyword | ✅/❌ | Current: `/concepts/[slug]` |
| Not an orphan page | ✅/❌ | Linked from X other pages |
**H1 Tags Found:**
- Line XX: `# [H1 text]` ← Should be the only one
- [List any additional H1s that need to be changed to H2]
**Slug Analysis:**
- Current slug: `[slug].mdx`
- Contains keyword: ✅/❌
- Format correct: ✅/❌ (lowercase, hyphens, no special chars)
**Incoming Links Found:**
1. `/concepts/[other-concept]` → Links to this page in [section]
2. `/concepts/[other-concept]` → Links in Related Concepts
**If orphan page, add links from:**
- [Suggested concept page] in [section]
- [Suggested concept page] in Related Concepts
---
## Priority Fixes
### High Priority (Do First)
1. **[Issue]**
- Current: [what it is now]
- Recommended: [what it should be]
- Impact: [why this matters]
2. **[Issue]**
- Current: [what it is now]
- Recommended: [what it should be]
- Impact: [why this matters]
### Medium Priority
1. **[Issue]**
- Recommendation: [fix]
### Low Priority (Nice to Have)
1. **[Issue]**
- Recommendation: [fix]
---
## Competitive Analysis (Optional)
**Top-Ranking Pages for "[primary keyword]":**
1. **[Competitor 1 - URL]**
- What they do well: [observation]
- Word count: ~X,XXX
2. **[Competitor 2 - URL]**
- What they do well: [observation]
- Word count: ~X,XXX
**Our Advantages:**
- [What we do better]
**Gaps to Fill:**
- [What we're missing that competitors have]
---
## Implementation Checklist
After making fixes, verify:
- [ ] Title is 50-60 characters with keyword and hook
- [ ] Description is 150-160 characters with action word and value
- [ ] Primary keyword in title, description, first 100 words, and H2
- [ ] Opens with question hook
- [ ] Code example in first 200 words
- [ ] "What you'll learn" Info box present
- [ ] Paragraphs are 2-4 sentences
- [ ] 1,500+ words total
- [ ] Key terms bolded on first mention
- [ ] 40-60 word definition for featured snippet
- [ ] At least one question-format H2
- [ ] 3-5 internal links with descriptive anchor text
- [ ] Prerequisites in Warning box (if applicable)
- [ ] Related Concepts section has 4 cards
- [ ] Single H1 per page (title only)
- [ ] URL slug contains primary keyword
- [ ] Page linked from at least one other concept page
- [ ] All fixes implemented and verified
---
## Final Recommendation
**Ready to Publish:** ✅ Yes / ❌ No - [reason]
**Next Review Date:** [When to re-audit, e.g., "3 months" or "after major update"]
```
---
## Quick Reference
### Character Counts
| Element | Ideal Length |
|---------|--------------|
| Title | 50-60 characters |
| Meta Description | 150-160 characters |
| Definition paragraph | 40-60 words |
### Keyword Density
- Don't exceed 3-4 mentions of exact phrase per 1,000 words
- Use variations naturally (e.g., "closures", "closure", "JavaScript closures")
### Content Length
| Length | Assessment |
|--------|------------|
| <1,000 words | Too thin - add depth |
| 1,000-1,500 | Minimum viable |
| 1,500-2,500 | Good |
| 2,500-4,000 | Excellent |
| >4,000 | Consider splitting |
---
## Summary
When auditing a concept page for SEO:
1. **Identify target keywords** using the keyword cluster for that concept
2. **Check title tag** — 50-60 chars, keyword first, hook, ends with "JavaScript"
3. **Check meta description** — 150-160 chars, action word, keyword, specific value
4. **Verify keyword placement** — Title, description, first 100 words, H2
5. **Audit content structure** — Question hook, early code, Info box, short paragraphs
6. **Optimize for featured snippets** — 40-60 word definitions, numbered steps, tables
7. **Check internal linking** — 3-5 links, good anchors, Related Concepts section
8. **Generate report** — Document score, issues, and prioritized fixes
**Remember:** SEO isn't about gaming search engines — it's about making content easy to find for developers who need it. Every optimization should also improve the reader experience.
================================================
FILE: .claude/skills/test-writer/SKILL.md
================================================
---
name: test-writer
description: Generate comprehensive Vitest tests for code examples in JavaScript concept documentation pages, following project conventions and referencing source lines
---
# Skill: Test Writer for Concept Pages
Use this skill to generate comprehensive Vitest tests for all code examples in a concept documentation page. Tests verify that code examples in the documentation are accurate and work as described.
## When to Use
- After writing a new concept page
- When adding new code examples to existing pages
- When updating existing code examples
- To verify documentation accuracy through automated tests
- Before publishing to ensure all examples work correctly
## Test Writing Methodology
Follow these four phases to create comprehensive tests for a concept page.
### Phase 1: Code Example Extraction
Scan the concept page for all code examples and categorize them:
| Category | Characteristics | Action |
|----------|-----------------|--------|
| **Testable** | Has `console.log` with output comments, returns values | Write tests |
| **DOM-specific** | Uses `document`, `window`, DOM APIs, event handlers | Write DOM tests (separate file) |
| **Error examples** | Intentionally throws errors, demonstrates failures | Write tests with `toThrow` |
| **Conceptual** | ASCII diagrams, pseudo-code, incomplete snippets | Skip (document why) |
| **Browser-only** | Uses browser APIs not available in jsdom | Skip or mock |
### Phase 2: Determine Test File Structure
```
tests/
├── fundamentals/ # Concepts 1-6
├── functions-execution/ # Concepts 7-8
├── web-platform/ # Concepts 9-10
├── object-oriented/ # Concepts 11-15
├── functional-programming/ # Concepts 16-19
├── async-javascript/ # Concepts 20-22
├── advanced-topics/ # Concepts 23-31
└── beyond/ # Extended concepts
└── {subcategory}/
```
**File naming:**
- Standard tests: `{concept-name}.test.js`
- DOM tests: `{concept-name}.dom.test.js`
### Phase 3: Convert Examples to Tests
For each testable code example:
1. Identify the expected output (from `console.log` comments or documented behavior)
2. Convert to `expect` assertions
3. Add source line reference in comments
4. Group related tests in `describe` blocks matching documentation sections
### Phase 4: Handle Special Cases
| Case | Solution |
|------|----------|
| Browser-only APIs | Use jsdom environment or skip with note |
| Timing-dependent code | Use `vi.useFakeTimers()` or test the logic, not timing |
| Side effects | Capture output or test mutations |
| Intentional errors | Use `expect(() => {...}).toThrow()` |
| Async code | Use `async/await` with proper assertions |
---
## Project Test Conventions
### Import Pattern
```javascript
import { describe, it, expect } from 'vitest'
```
For DOM tests or tests needing mocks:
```javascript
import { describe, it, expect, vi, beforeEach, afterEach } from 'vitest'
```
### DOM Test File Header
```javascript
/**
* @vitest-environment jsdom
*/
import { describe, it, expect, vi, beforeEach, afterEach } from 'vitest'
```
### Describe Block Organization
Match the structure of the documentation:
```javascript
describe('Concept Name', () => {
describe('Section from Documentation', () => {
describe('Subsection if needed', () => {
it('should [specific behavior]', () => {
// Test
})
})
})
})
```
### Test Naming Convention
- Start with "should"
- Be descriptive and specific
- Match the documented behavior
```javascript
// Good
it('should return "object" for typeof null', () => {})
it('should throw TypeError when accessing property of undefined', () => {})
it('should resolve promises in order they were created', () => {})
// Bad
it('test typeof', () => {})
it('works correctly', () => {})
it('null test', () => {})
```
### Source Line References
Always reference the documentation source:
```javascript
// ============================================================
// SECTION NAME FROM DOCUMENTATION
// From {concept}.mdx lines XX-YY
// ============================================================
describe('Section Name', () => {
// From lines 45-52: Basic typeof examples
it('should return correct type strings', () => {
// Test
})
})
```
---
## Test Patterns Reference
### Pattern 1: Basic Value Assertion
**Documentation:**
```javascript
console.log(typeof "hello") // "string"
console.log(typeof 42) // "number"
```
**Test:**
```javascript
// From lines XX-YY: typeof examples
it('should return correct type for primitives', () => {
expect(typeof "hello").toBe("string")
expect(typeof 42).toBe("number")
})
```
---
### Pattern 2: Multiple Related Assertions
**Documentation:**
```javascript
let a = "hello"
let b = "hello"
console.log(a === b) // true
let obj1 = { x: 1 }
let obj2 = { x: 1 }
console.log(obj1 === obj2) // false
```
**Test:**
```javascript
// From lines XX-YY: Primitive vs object comparison
it('should compare primitives by value', () => {
let a = "hello"
let b = "hello"
expect(a === b).toBe(true)
})
it('should compare objects by reference', () => {
let obj1 = { x: 1 }
let obj2 = { x: 1 }
expect(obj1 === obj2).toBe(false)
})
```
---
### Pattern 3: Function Return Values
**Documentation:**
```javascript
function greet(name) {
return "Hello, " + name + "!"
}
console.log(greet("Alice")) // "Hello, Alice!"
```
**Test:**
```javascript
// From lines XX-YY: greet function example
it('should return greeting with name', () => {
function greet(name) {
return "Hello, " + name + "!"
}
expect(greet("Alice")).toBe("Hello, Alice!")
})
```
---
### Pattern 4: Error Testing
**Documentation:**
```javascript
// This throws an error!
const obj = null
console.log(obj.property) // TypeError: Cannot read property of null
```
**Test:**
```javascript
// From lines XX-YY: Accessing property of null
it('should throw TypeError when accessing property of null', () => {
const obj = null
expect(() => {
obj.property
}).toThrow(TypeError)
})
```
---
### Pattern 5: Specific Error Messages
**Documentation:**
```javascript
function divide(a, b) {
if (b === 0) throw new Error("Cannot divide by zero")
return a / b
}
```
**Test:**
```javascript
// From lines XX-YY: divide function with error
it('should throw error when dividing by zero', () => {
function divide(a, b) {
if (b === 0) throw new Error("Cannot divide by zero")
return a / b
}
expect(() => divide(10, 0)).toThrow("Cannot divide by zero")
expect(divide(10, 2)).toBe(5)
})
```
---
### Pattern 6: Async/Await Testing
**Documentation:**
```javascript
async function fetchUser(id) {
const response = await fetch(`/api/users/${id}`)
return response.json()
}
```
**Test:**
```javascript
// From lines XX-YY: async fetchUser function
it('should fetch user data asynchronously', async () => {
// Mock fetch for testing
global.fetch = vi.fn(() =>
Promise.resolve({
json: () => Promise.resolve({ id: 1, name: 'Alice' })
})
)
async function fetchUser(id) {
const response = await fetch(`/api/users/${id}`)
return response.json()
}
const user = await fetchUser(1)
expect(user).toEqual({ id: 1, name: 'Alice' })
})
```
---
### Pattern 7: Promise Testing
**Documentation:**
```javascript
const promise = new Promise((resolve) => {
resolve("done")
})
promise.then(result => console.log(result)) // "done"
```
**Test:**
```javascript
// From lines XX-YY: Basic Promise resolution
it('should resolve with correct value', async () => {
const promise = new Promise((resolve) => {
resolve("done")
})
await expect(promise).resolves.toBe("done")
})
```
---
### Pattern 8: Promise Rejection
**Documentation:**
```javascript
const promise = new Promise((resolve, reject) => {
reject(new Error("Something went wrong"))
})
```
**Test:**
```javascript
// From lines XX-YY: Promise rejection
it('should reject with error', async () => {
const promise = new Promise((resolve, reject) => {
reject(new Error("Something went wrong"))
})
await expect(promise).rejects.toThrow("Something went wrong")
})
```
---
### Pattern 9: Floating Point Comparison
**Documentation:**
```javascript
console.log(0.1 + 0.2) // 0.30000000000000004
console.log(0.1 + 0.2 === 0.3) // false
```
**Test:**
```javascript
// From lines XX-YY: Floating point precision
it('should demonstrate floating point imprecision', () => {
expect(0.1 + 0.2).not.toBe(0.3)
expect(0.1 + 0.2).toBeCloseTo(0.3)
expect(0.1 + 0.2 === 0.3).toBe(false)
})
```
---
### Pattern 10: Array Method Testing
**Documentation:**
```javascript
const numbers = [1, 2, 3, 4, 5]
const doubled = numbers.map(n => n * 2)
console.log(doubled) // [2, 4, 6, 8, 10]
```
**Test:**
```javascript
// From lines XX-YY: Array map example
it('should double all numbers in array', () => {
const numbers = [1, 2, 3, 4, 5]
const doubled = numbers.map(n => n * 2)
expect(doubled).toEqual([2, 4, 6, 8, 10])
expect(numbers).toEqual([1, 2, 3, 4, 5]) // Original unchanged
})
```
---
### Pattern 11: Object Mutation Testing
**Documentation:**
```javascript
const obj = { a: 1 }
obj.b = 2
console.log(obj) // { a: 1, b: 2 }
```
**Test:**
```javascript
// From lines XX-YY: Object mutation
it('should allow adding properties to objects', () => {
const obj = { a: 1 }
obj.b = 2
expect(obj).toEqual({ a: 1, b: 2 })
})
```
---
### Pattern 12: Closure Testing
**Documentation:**
```javascript
function counter() {
let count = 0
return function() {
count++
return count
}
}
const increment = counter()
console.log(increment()) // 1
console.log(increment()) // 2
console.log(increment()) // 3
```
**Test:**
```javascript
// From lines XX-YY: Closure counter example
it('should maintain state across calls via closure', () => {
function counter() {
let count = 0
return function() {
count++
return count
}
}
const increment = counter()
expect(increment()).toBe(1)
expect(increment()).toBe(2)
expect(increment()).toBe(3)
})
it('should create independent counters', () => {
function counter() {
let count = 0
return function() {
count++
return count
}
}
const counter1 = counter()
const counter2 = counter()
expect(counter1()).toBe(1)
expect(counter1()).toBe(2)
expect(counter2()).toBe(1) // Independent
})
```
---
### Pattern 13: DOM Event Testing
**Documentation:**
```javascript
const button = document.getElementById('myButton')
button.addEventListener('click', function(event) {
console.log('Button clicked!')
console.log(event.type) // "click"
})
```
**Test (in .dom.test.js file):**
```javascript
/**
* @vitest-environment jsdom
*/
import { describe, it, expect, beforeEach, afterEach } from 'vitest'
describe('DOM Event Handlers', () => {
let button
beforeEach(() => {
button = document.createElement('button')
button.id = 'myButton'
document.body.appendChild(button)
})
afterEach(() => {
document.body.innerHTML = ''
})
// From lines XX-YY: Button click event
it('should fire click event handler', () => {
const output = []
button.addEventListener('click', function(event) {
output.push('Button clicked!')
output.push(event.type)
})
button.click()
expect(output).toEqual(['Button clicked!', 'click'])
})
})
```
---
### Pattern 14: DOM Manipulation Testing
**Documentation:**
```javascript
const div = document.createElement('div')
div.textContent = 'Hello'
div.classList.add('greeting')
document.body.appendChild(div)
```
**Test:**
```javascript
// From lines XX-YY: Creating and appending elements
it('should create element with text and class', () => {
const div = document.createElement('div')
div.textContent = 'Hello'
div.classList.add('greeting')
document.body.appendChild(div)
const element = document.querySelector('.greeting')
expect(element).not.toBeNull()
expect(element.textContent).toBe('Hello')
expect(element.classList.contains('greeting')).toBe(true)
})
```
---
### Pattern 15: Timer Testing
**Documentation:**
```javascript
console.log('First')
setTimeout(() => console.log('Second'), 0)
console.log('Third')
// Output: First, Third, Second
```
**Test:**
```javascript
// From lines XX-YY: setTimeout execution order
it('should execute setTimeout callback after synchronous code', async () => {
const output = []
output.push('First')
setTimeout(() => output.push('Second'), 0)
output.push('Third')
// Wait for setTimeout to execute
await new Promise(resolve => setTimeout(resolve, 10))
expect(output).toEqual(['First', 'Third', 'Second'])
})
```
---
### Pattern 16: Strict Mode Behavior
**Documentation:**
```javascript
// In strict mode, this throws
"use strict"
x = 10 // ReferenceError: x is not defined
```
**Test:**
```javascript
// From lines XX-YY: Strict mode variable declaration
it('should throw ReferenceError in strict mode for undeclared variables', () => {
// Vitest runs in strict mode by default
expect(() => {
// Using eval to test strict mode behavior
"use strict"
eval('undeclaredVar = 10')
}).toThrow()
})
```
---
## Complete Test File Template
```javascript
import { describe, it, expect } from 'vitest'
describe('[Concept Name]', () => {
// ============================================================
// [FIRST SECTION NAME FROM DOCUMENTATION]
// From [concept].mdx lines XX-YY
// ============================================================
describe('[First Section]', () => {
// From lines XX-YY: [Brief description of example]
it('should [expected behavior]', () => {
// Code from documentation
expect(result).toBe(expected)
})
// From lines XX-YY: [Brief description of next example]
it('should [another expected behavior]', () => {
// Code from documentation
expect(result).toEqual(expected)
})
})
// ============================================================
// [SECOND SECTION NAME FROM DOCUMENTATION]
// From [concept].mdx lines XX-YY
// ============================================================
describe('[Second Section]', () => {
// From lines XX-YY: [Description]
it('should [behavior]', () => {
// Test
})
})
// ============================================================
// EDGE CASES AND COMMON MISTAKES
// From [concept].mdx lines XX-YY
// ============================================================
describe('Edge Cases', () => {
// From lines XX-YY: [Edge case description]
it('should handle [edge case]', () => {
// Test
})
})
describe('Common Mistakes', () => {
// From lines XX-YY: Wrong way example
it('should demonstrate the incorrect behavior', () => {
// Test showing why the "wrong" way fails
})
// From lines XX-YY: Correct way example
it('should demonstrate the correct behavior', () => {
// Test showing the right approach
})
})
})
```
---
## Complete DOM Test File Template
```javascript
/**
* @vitest-environment jsdom
*/
import { describe, it, expect, vi, beforeEach, afterEach } from 'vitest'
// ============================================================
// DOM EXAMPLES FROM [CONCEPT NAME]
// From [concept].mdx lines XX-YY
// ============================================================
describe('[Concept Name] - DOM', () => {
// Shared setup
let container
beforeEach(() => {
// Create a fresh container for each test
container = document.createElement('div')
container.id = 'test-container'
document.body.appendChild(container)
})
afterEach(() => {
// Clean up after each test
document.body.innerHTML = ''
vi.restoreAllMocks()
})
// ============================================================
// [SECTION NAME]
// From lines XX-YY
// ============================================================
describe('[Section Name]', () => {
// From lines XX-YY: [Example description]
it('should [expected DOM behavior]', () => {
// Setup
const element = document.createElement('div')
container.appendChild(element)
// Action
element.textContent = 'Hello'
// Assert
expect(element.textContent).toBe('Hello')
})
})
// ============================================================
// EVENT HANDLING
// From lines XX-YY
// ============================================================
describe('Event Handling', () => {
// From lines XX-YY: Click event example
it('should handle click events', () => {
const button = document.createElement('button')
container.appendChild(button)
let clicked = false
button.addEventListener('click', () => {
clicked = true
})
button.click()
expect(clicked).toBe(true)
})
})
})
```
---
## Running Tests
```bash
# Run all tests
npm test
# Run tests for specific concept
npm test -- tests/fundamentals/primitive-types/
# Run tests for specific file
npm test -- tests/fundamentals/primitive-types/primitive-types.test.js
# Run DOM tests only
npm test -- tests/fundamentals/primitive-types/primitive-types.dom.test.js
# Run with watch mode
npm run test:watch
# Run with coverage
npm run test:coverage
# Run with verbose output
npm test -- --reporter=verbose
```
---
## Quality Checklist
### Completeness
- [ ] All testable code examples have corresponding tests
- [ ] Tests organized by documentation sections
- [ ] Source line references included in comments (From lines XX-YY)
- [ ] DOM tests in separate `.dom.test.js` file
- [ ] Edge cases and error examples tested
### Correctness
- [ ] Tests verify the actual documented behavior
- [ ] Output comments in docs match test expectations
- [ ] Async tests properly use async/await
- [ ] Error tests use correct `toThrow` pattern
- [ ] Floating point comparisons use `toBeCloseTo`
- [ ] Object comparisons use `toEqual` (not `toBe`)
### Convention
- [ ] Uses explicit imports from vitest
- [ ] Follows describe/it nesting pattern
- [ ] Test names start with "should"
- [ ] Proper file naming (`{concept}.test.js`)
- [ ] DOM tests have jsdom environment directive
### Verification
- [ ] All tests pass: `npm test -- tests/{category}/{concept}/`
- [ ] No skipped tests without documented reason
- [ ] No false positives (tests that pass for wrong reasons)
---
## Test Report Template
Use this template to document test coverage for a concept page.
```markdown
# Test Coverage Report: [Concept Name]
**Concept Page:** `/docs/concepts/[slug].mdx`
**Test File:** `/tests/{category}/{concept}/{concept}.test.js`
**DOM Test File:** `/tests/{category}/{concept}/{concept}.dom.test.js` (if applicable)
**Date:** YYYY-MM-DD
**Author:** [Name/Claude]
## Summary
| Metric | Count |
|--------|-------|
| Total Code Examples in Doc | XX |
| Testable Examples | XX |
| Tests Written | XX |
| DOM Tests Written | XX |
| Skipped (with reason) | XX |
## Tests by Section
| Section | Line Range | Examples | Tests | Status |
|---------|------------|----------|-------|--------|
| [Section 1] | XX-YY | X | X | ✅ |
| [Section 2] | XX-YY | X | X | ✅ |
| [Section 3] | XX-YY | X | X | ⚠️ (1 skipped) |
## Skipped Examples
| Line | Example Description | Reason |
|------|---------------------|--------|
| XX | ASCII diagram of call stack | Conceptual, not executable |
| YY | Browser fetch example | Requires network, mocked instead |
## Test Execution
```bash
npm test -- tests/{category}/{concept}/
```
**Result:** ✅ XX passing | ❌ X failing | ⏭️ X skipped
## Notes
[Any special considerations, mock requirements, or issues encountered]
```
---
## Common Issues and Solutions
### Issue: Test passes but shouldn't
**Problem:** Test expectations don't match documentation output
**Solution:** Double-check the expected value matches the `console.log` comment exactly
```javascript
// Documentation says: console.log(result) // [1, 2, 3]
// Make sure test uses:
expect(result).toEqual([1, 2, 3]) // NOT toBe for arrays
```
### Issue: Async test times out
**Problem:** Async test never resolves
**Solution:** Ensure all promises are awaited and async function is marked
```javascript
// Bad
it('should fetch data', () => {
const data = fetchData() // Missing await!
expect(data).toBeDefined()
})
// Good
it('should fetch data', async () => {
const data = await fetchData()
expect(data).toBeDefined()
})
```
### Issue: DOM test fails with "document is not defined"
**Problem:** Missing jsdom environment
**Solution:** Add environment directive at top of file
```javascript
/**
* @vitest-environment jsdom
*/
```
### Issue: Test isolation problems
**Problem:** Tests affect each other
**Solution:** Use beforeEach/afterEach for cleanup
```javascript
afterEach(() => {
document.body.innerHTML = ''
vi.restoreAllMocks()
})
```
---
## Summary
When writing tests for a concept page:
1. **Extract all code examples** from the documentation
2. **Categorize** as testable, DOM, error, or conceptual
3. **Create test file** in correct location with proper naming
4. **Convert each example** to test using appropriate pattern
5. **Reference source lines** in comments for traceability
6. **Run tests** to verify all pass
7. **Document coverage** using the report template
**Remember:** Tests serve two purposes:
1. Verify documentation is accurate
2. Catch regressions if code examples are updated
Every testable code example in the documentation should have a corresponding test. If an example can't be tested, document why.
================================================
FILE: .claude/skills/write-concept/SKILL.md
================================================
---
name: write-concept
description: Write or review JavaScript concept documentation pages for the 33 JavaScript Concepts project, following strict structure and quality guidelines
---
# Skill: Write JavaScript Concept Documentation
Use this skill when writing or improving concept documentation pages for the 33 JavaScript Concepts project.
## When to Use
- Creating a new concept page in `/docs/concepts/`
- Rewriting or significantly improving an existing concept page
- Reviewing an existing concept page for quality and completeness
- Adding explanatory content to a concept
## Target Audience
Remember: **the reader might be someone who has never coded before or is just learning JavaScript**. Write with empathy for beginners while still providing depth for intermediate developers. Make complex topics feel approachable and never assume prior knowledge without linking to prerequisites.
## Writing Guidelines
### Voice and Tone
- **Conversational but authoritative**: Write like you're explaining to a smart friend
- **Encouraging**: Make complex topics feel approachable
- **Practical**: Focus on real-world applications and use cases
- **Concise**: Respect the reader's time; avoid unnecessary verbosity
- **Question-driven**: Open sections with questions the reader might have
### Avoiding AI-Generated Language
Your writing must sound human, not AI-generated. Here are specific patterns to avoid:
#### Words and Phrases to Avoid
| ❌ Avoid | ✓ Use Instead |
|----------|---------------|
| "Master [concept]" | "Learn [concept]" |
| "dramatically easier/better" | "much easier" or "cleaner" |
| "one fundamental thing" | "one simple thing" |
| "one of the most important concepts" | "This is a big one" |
| "essential points" | "key things to remember" |
| "understanding X deeply improves" | "knowing X well makes Y easier" |
| "To truly understand" | "Let's look at" or "Here's how" |
| "This is crucial" | "This trips people up" |
| "It's worth noting that" | Just state the thing directly |
| "It's important to remember" | "Don't forget:" or "Remember:" |
| "In order to" | "To" |
| "Due to the fact that" | "Because" |
| "At the end of the day" | Remove entirely |
| "When it comes to" | Remove or rephrase |
| "In this section, we will" | Just start explaining |
| "As mentioned earlier" | Remove or link to the section |
#### Repetitive Emphasis Patterns
Don't use the same lead-in pattern repeatedly. Vary your emphasis:
| Instead of repeating... | Vary with... |
|------------------------|--------------|
| "Key insight:" | "Don't forget:", "The pattern:", "Here's the thing:" |
| "Best practice:" | "Pro tip:", "Quick check:", "A good habit:" |
| "Important:" | "Watch out:", "Heads up:", "Note:" |
| "Remember:" | "Keep in mind:", "The rule:", "Think of it this way:" |
#### Em Dash (—) Overuse
AI-generated text overuses em dashes. Limit their use and prefer periods, commas, or colons:
| ❌ Em Dash Overuse | ✓ Better Alternative |
|-------------------|---------------------|
| "async/await — syntactic sugar that..." | "async/await. It's syntactic sugar that..." |
| "understand Promises — async/await is built..." | "understand Promises. async/await is built..." |
| "doesn't throw an error — you just get..." | "doesn't throw an error. You just get..." |
| "outside of async functions — but only in..." | "outside of async functions, but only in..." |
| "Fails fast — if any Promise rejects..." | "Fails fast. If any Promise rejects..." |
| "achieve the same thing — the choice..." | "achieve the same thing. The choice..." |
**When em dashes ARE acceptable:**
- In Key Takeaways section (consistent formatting for the numbered list)
- In MDN card titles (e.g., "async function — MDN")
- In interview answer step-by-step explanations (structured formatting)
- Sparingly when a true parenthetical aside reads naturally
**Rule of thumb:** If you have more than 10-15 em dashes in a 1500-word document outside of structured sections, you're overusing them. After writing, search for "—" and evaluate each one.
#### Superlatives and Filler Words
Avoid vague superlatives that add no information:
| ❌ Avoid | ✓ Use Instead |
|----------|---------------|
| "dramatically" | "much" or remove entirely |
| "fundamentally" | "simply" or be specific about what's fundamental |
| "incredibly" | remove or be specific |
| "extremely" | remove or be specific |
| "absolutely" | remove |
| "basically" | remove (if you need it, you're not explaining clearly) |
| "essentially" | remove or just explain directly |
| "very" | remove or use a stronger word |
| "really" | remove |
| "actually" | remove (unless correcting a misconception) |
| "In fact" | remove (just state the fact) |
| "Interestingly" | remove (let the reader decide if it's interesting) |
#### Stiff/Formal Phrases
Replace formal academic-style phrases with conversational alternatives:
| ❌ Stiff | ✓ Conversational |
|---------|------------------|
| "It should be noted that" | "Note that" or just state it |
| "One might wonder" | "You might wonder" |
| "This enables developers to" | "This lets you" |
| "The aforementioned" | "this" or name it again |
| "Subsequently" | "Then" or "Next" |
| "Utilize" | "Use" |
| "Commence" | "Start" |
| "Prior to" | "Before" |
| "In the event that" | "If" |
| "A considerable amount of" | "A lot of" or "Many" |
#### Playful Touches (Use Sparingly)
Add occasional human touches to make the content feel less robotic, but don't overdo it:
```javascript
// ✓ Good: One playful comment per section
// Callback hell - nested so deep you need a flashlight
// ✓ Good: Conversational aside
// forEach and async don't play well together — it just fires and forgets:
// ✓ Good: Relatable frustration
// Finally, error handling that doesn't make you want to flip a table.
// ❌ Bad: Trying too hard
// Callback hell - it's like a Russian nesting doll had a baby with a spaghetti monster! 🍝
// ❌ Bad: Forced humor
// Let's dive into the AMAZING world of Promises! 🎉🚀
```
**Guidelines:**
- One or two playful touches per major section is enough
- Humor should arise naturally from the content
- Avoid emojis in body text (they're fine in comments occasionally)
- Don't explain your jokes
- If a playful line doesn't work, just be direct instead
### Page Structure (Follow This Exactly)
Every concept page MUST follow this structure in this exact order:
```mdx
---
title: "Concept Name: [Hook] in JavaScript"
sidebarTitle: "Concept Name: [Hook]"
description: "SEO-friendly description in 150-160 characters starting with action word"
---
[Opening hook - Start with engaging questions that make the reader curious]
[Example: "How does JavaScript get data from a server? How do you load user profiles, submit forms, or fetch the latest posts from an API?"]
[Immediately show a simple code example demonstrating the concept]
```javascript
// This is how you [do the thing] in JavaScript
const example = doSomething()
console.log(example) // Expected output
```
[Brief explanation connecting to what they'll learn, with **[inline MDN links](https://developer.mozilla.org/...)** for key terms]
<Info>
**What you'll learn in this guide:**
- Key learning outcome 1
- Key learning outcome 2
- Key learning outcome 3
- Key learning outcome 4 (aim for 5-7 items)
</Info>
<Warning>
[Optional: Prerequisites or important notices - place AFTER Info box]
**Prerequisite:** This guide assumes you understand [Related Concept](/concepts/related-concept). If you're not comfortable with that yet, read that guide first!
</Warning>
---
## [First Major Section - e.g., "What is X?"]
[Core explanation with inline MDN links for any new terms/APIs introduced]
[Optional: CardGroup with MDN reference links for this section]
---
## [Analogy Section - e.g., "The Restaurant Analogy"]
[Relatable real-world analogy that makes the concept click]
[ASCII art diagram visualizing the concept]
```
┌─────────────────────────────────────────────────────────────────────────┐
│ DIAGRAM TITLE │
├─────────────────────────────────────────────────────────────────────────┤
│ │
│ [Visual representation of the concept] │
│ │
└─────────────────────────────────────────────────────────────────────────┘
```
---
## [Core Concepts Section]
[Deep dive with code examples, tables, and Mintlify components]
<Steps>
<Step title="Step 1">
Explanation of the first step
</Step>
<Step title="Step 2">
Explanation of the second step
</Step>
</Steps>
<AccordionGroup>
<Accordion title="Subtopic 1">
Detailed explanation with code examples
</Accordion>
<Accordion title="Subtopic 2">
Detailed explanation with code examples
</Accordion>
</AccordionGroup>
<Tip>
**Quick Rule of Thumb:** [Memorable summary or mnemonic]
</Tip>
---
## [The API/Implementation Section]
[How to actually use the concept in code]
### Basic Usage
```javascript
// Basic example with step-by-step comments
// Step 1: Do this
const step1 = something()
// Step 2: Then this
const step2 = somethingElse(step1)
// Step 3: Finally
console.log(step2) // Expected output
```
### [Advanced Pattern]
```javascript
// More complex real-world example
```
---
## [Common Mistakes Section - e.g., "The #1 Fetch Mistake"]
[Highlight the most common mistake developers make]
```
┌─────────────────────────────────────────────────────────────────────────┐
│ VISUAL COMPARISON │
├─────────────────────────────────────────────────────────────────────────┤
│ │
│ WRONG WAY RIGHT WAY │
│ ───────── ───────── │
│ • Problem 1 • Solution 1 │
│ • Problem 2 • Solution 2 │
│ │
└─────────────────────────────────────────────────────────────────────────┘
```
```javascript
// ❌ WRONG - Explanation of why this is wrong
const bad = wrongApproach()
// ✓ CORRECT - Explanation of the right way
const good = correctApproach()
```
<Warning>
**The Trap:** [Clear explanation of what goes wrong and why]
</Warning>
---
## [Advanced Patterns Section]
[Real-world patterns and best practices]
### Pattern Name
```javascript
// Reusable pattern with practical application
async function realWorldExample() {
// Implementation
}
// Usage
const result = await realWorldExample()
```
---
## Key Takeaways
<Info>
**The key things to remember:**
1. **First key point** — Brief explanation
2. **Second key point** — Brief explanation
3. **Third key point** — Brief explanation
4. **Fourth key point** — Brief explanation
5. **Fifth key point** — Brief explanation
[Aim for 8-10 key takeaways that summarize everything]
</Info>
---
## Test Your Knowledge
<AccordionGroup>
<Accordion title="Question 1: [Specific question about the concept]">
**Answer:**
[Clear explanation]
```javascript
// Code example demonstrating the answer
```
</Accordion>
<Accordion title="Question 2: [Another question]">
**Answer:**
[Clear explanation with code if needed]
</Accordion>
[Aim for 5-6 questions covering the main topics]
</AccordionGroup>
---
## Related Concepts
<CardGroup cols={2}>
<Card title="Related Concept 1" icon="icon-name" href="/concepts/slug">
How it connects to this concept
</Card>
<Card title="Related Concept 2" icon="icon-name" href="/concepts/slug">
How it connects to this concept
</Card>
</CardGroup>
---
## Reference
<CardGroup cols={2}>
<Card title="Main Topic — MDN" icon="book" href="https://developer.mozilla.org/...">
Official MDN documentation for the main concept
</Card>
<Card title="Related API — MDN" icon="book" href="https://developer.mozilla.org/...">
Additional MDN reference
</Card>
</CardGroup>
## Articles
<CardGroup cols={2}>
<Card title="Article Title" icon="newspaper" href="https://...">
Brief description of what the reader will learn from this article.
</Card>
[Aim for 4-6 high-quality articles]
</CardGroup>
## Videos
<CardGroup cols={2}>
<Card title="Video Title" icon="video" href="https://...">
Brief description of what the video covers.
</Card>
[Aim for 3-4 quality videos]
</CardGroup>
```
---
## SEO Guidelines
SEO (Search Engine Optimization) is **critical** for this project. Each concept page should rank for the various ways developers search for that concept. Our goal is to appear in search results for queries like:
- "what is [concept] in JavaScript"
- "how does [concept] work in JavaScript"
- "[concept] JavaScript explained"
- "[concept] JavaScript tutorial"
- "JavaScript [concept] example"
Every writing decision — from title to structure to word choice — should consider search intent.
---
### Target Keywords for Each Concept
Each concept page targets a **keyword cluster** — the family of related search queries. Before writing, identify these for your concept:
| Keyword Type | Pattern | Example (DOM) |
|--------------|---------|---------------|
| **Primary** | [concept] + JavaScript | "DOM JavaScript", "JavaScript DOM" |
| **What is** | what is [concept] in JavaScript | "what is the DOM in JavaScript" |
| **How does** | how does [concept] work | "how does the DOM work in JavaScript" |
| **How to** | how to [action] with [concept] | "how to manipulate the DOM" |
| **Tutorial** | [concept] tutorial/guide/explained | "DOM tutorial JavaScript" |
| **Comparison** | [concept] vs [related] | "DOM vs virtual DOM" |
**More Keyword Cluster Examples:**
<AccordionGroup>
<Accordion title="Closures Keyword Cluster">
| Type | Keywords |
|------|----------|
| Primary | "JavaScript closures", "closures in JavaScript" |
| What is | "what is a closure in JavaScript", "what are closures" |
| How does | "how do closures work in JavaScript", "how closures work" |
| Why use | "why use closures JavaScript", "closure use cases" |
| Example | "JavaScript closure example", "closure examples" |
| Interview | "closure interview questions JavaScript" |
</Accordion>
<Accordion title="Promises Keyword Cluster">
| Type | Keywords |
|------|----------|
| Primary | "JavaScript Promises", "Promises in JavaScript" |
| What is | "what is a Promise in JavaScript", "what are Promises" |
| How does | "how do Promises work", "how Promises work JavaScript" |
| How to | "how to use Promises", "how to chain Promises" |
| Comparison | "Promises vs callbacks", "Promises vs async await" |
| Error | "Promise error handling", "Promise catch" |
</Accordion>
<Accordion title="Event Loop Keyword Cluster">
| Type | Keywords |
|------|----------|
| Primary | "JavaScript event loop", "event loop JavaScript" |
| What is | "what is the event loop in JavaScript" |
| How does | "how does the event loop work", "how event loop works" |
| Visual | "event loop explained", "event loop visualization" |
| Related | "call stack and event loop", "task queue JavaScript" |
</Accordion>
<Accordion title="Call Stack Keyword Cluster">
| Type | Keywords |
|------|----------|
| Primary | "JavaScript call stack", "call stack JavaScript" |
| What is | "what is the call stack in JavaScript" |
| How does | "how does the call stack work" |
| Error | "call stack overflow JavaScript", "maximum call stack size exceeded" |
| Visual | "call stack explained", "call stack visualization" |
</Accordion>
</AccordionGroup>
---
### Title Tag Optimization
The frontmatter has **two title fields**:
- `title` — The page's `<title>` tag (SEO, appears in search results)
- `sidebarTitle` — The sidebar navigation text (cleaner, no "JavaScript" since we're on a JS site)
**The Two-Title Pattern:**
```mdx
---
title: "Closures: How Functions Remember Their Scope in JavaScript"
sidebarTitle: "Closures: How Functions Remember Their Scope"
---
```
- **`title`** ends with "in JavaScript" for SEO keyword placement
- **`sidebarTitle`** omits "JavaScript" for cleaner navigation
**Rules:**
1. **50-60 characters** ideal length for `title` (Google truncates longer titles)
2. **Concept name first** — lead with the topic, "JavaScript" comes at the end
3. **Add a hook** — what will the reader understand or be able to do?
4. **Be specific** — generic titles don't rank
**Title Formulas That Work:**
```
title: "[Concept]: [What You'll Understand] in JavaScript"
sidebarTitle: "[Concept]: [What You'll Understand]"
title: "[Concept]: [Benefit or Outcome] in JavaScript"
sidebarTitle: "[Concept]: [Benefit or Outcome]"
```
**Title Examples:**
| ❌ Bad | ✓ title (SEO) | ✓ sidebarTitle (Navigation) |
|--------|---------------|----------------------------|
| `"Closures"` | `"Closures: How Functions Remember Their Scope in JavaScript"` | `"Closures: How Functions Remember Their Scope"` |
| `"DOM"` | `"DOM: How Browsers Represent Web Pages in JavaScript"` | `"DOM: How Browsers Represent Web Pages"` |
| `"Promises"` | `"Promises: Handling Async Operations in JavaScript"` | `"Promises: Handling Async Operations"` |
| `"Call Stack"` | `"Call Stack: How Function Execution Works in JavaScript"` | `"Call Stack: How Function Execution Works"` |
| `"Event Loop"` | `"Event Loop: How Async Code Actually Runs in JavaScript"` | `"Event Loop: How Async Code Actually Runs"` |
| `"Scope"` | `"Scope and Closures: Variable Visibility in JavaScript"` | `"Scope and Closures: Variable Visibility"` |
| `"this"` | `"this: How Context Binding Works in JavaScript"` | `"this: How Context Binding Works"` |
| `"Prototype"` | `"Prototype Chain: Understanding Inheritance in JavaScript"` | `"Prototype Chain: Understanding Inheritance"` |
**Character Count Check:**
Before finalizing, verify your `title` length:
- Under 50 chars: Consider adding more descriptive context
- 50-60 chars: Perfect length
- Over 60 chars: Will be truncated in search results — shorten it
---
### Meta Description Optimization
The `description` field becomes the meta description — **the snippet users see in search results**. A compelling description increases click-through rate.
**Rules:**
1. **150-160 characters** maximum (Google truncates longer descriptions)
2. **Include primary keyword** in the first half
3. **Include secondary keywords** naturally if space allows
4. **Start with an action word** — "Learn", "Understand", "Discover" (avoid "Master" — sounds AI-generated)
5. **Promise specific value** — what will they learn?
6. **End with a hook** — give them a reason to click
**Description Formula:**
```
[Action word] [what the concept is] in JavaScript. [Specific things they'll learn]: [topic 1], [topic 2], and [topic 3].
```
**Description Examples:**
| Concept | ❌ Too Short (Low CTR) | ✓ SEO-Optimized (150-160 chars) |
|---------|----------------------|--------------------------------|
| DOM | `"Understanding the DOM"` | `"Learn how the DOM works in JavaScript. Understand how browsers represent HTML as a tree, select and manipulate elements, traverse nodes, and optimize rendering."` |
| Closures | `"Functions that remember"` | `"Learn JavaScript closures and how functions remember their scope. Covers lexical scoping, practical use cases, memory considerations, and common closure patterns."` |
| Promises | `"Async JavaScript"` | `"Understand JavaScript Promises for handling asynchronous operations. Learn to create, chain, and combine Promises, handle errors properly, and write cleaner async code."` |
| Event Loop | `"How async works"` | `"Discover how the JavaScript event loop manages async code execution. Understand the call stack, task queue, microtasks, and why JavaScript is single-threaded but non-blocking."` |
| Call Stack | `"Function execution"` | `"Learn how the JavaScript call stack tracks function execution. Understand stack frames, execution context, stack overflow errors, and how recursion affects the stack."` |
| this | `"Understanding this"` | `"Learn the 'this' keyword in JavaScript and how context binding works. Covers the four binding rules, arrow function behavior, and how to use call, apply, and bind."` |
**Character Count Check:**
- Under 120 chars: You're leaving value on the table — add more specifics
- 150-160 chars: Optimal length
- Over 160 chars: Will be truncated — edit ruthlessly
---
### Keyword Placement Strategy
Keywords must appear in strategic locations — but **always naturally**. Keyword stuffing hurts rankings.
**Priority Placement Locations:**
| Priority | Location | How to Include |
|----------|----------|----------------|
| 🔴 Critical | Title | Primary keyword in first half |
| 🔴 Critical | Meta description | Primary keyword + 1-2 secondary |
| 🔴 Critical | First paragraph | Natural mention within first 100 words |
| 🟠 High | H2 headings | Question-format headings with keywords |
| 🟠 High | "What you'll learn" box | Topic-related phrases |
| 🟡 Medium | H3 subheadings | Related keywords and concepts |
| 🟡 Medium | Key Takeaways | Reinforce main keywords naturally |
| 🟢 Good | Alt text | If using images, include keywords |
**Example: Keyword Placement for DOM Page**
```mdx
---
title: "DOM: How Browsers Represent Web Pages in JavaScript" ← 🔴 Primary: "in JavaScript" at end
sidebarTitle: "DOM: How Browsers Represent Web Pages" ← Sidebar: no "JavaScript"
description: "Learn how the DOM works in JavaScript. Understand ← 🔴 Primary: "DOM works in JavaScript"
how browsers represent HTML as a tree, select and manipulate ← 🔴 Secondary: "manipulate elements"
elements, traverse nodes, and optimize rendering."
---
How does JavaScript change what you see on a webpage? ← Hook question
The **Document Object Model (DOM)** is a programming interface ← 🔴 Primary keyword in first paragraph
for web documents. It represents your HTML as a **tree of
objects** that JavaScript can read and manipulate.
<Info>
**What you'll learn in this guide:** ← 🟠 Topic reinforcement
- What the DOM actually is
- How to select elements (getElementById vs querySelector) ← Secondary keywords
- How to traverse the DOM tree
- How to create, modify, and remove elements ← "DOM" implicit
- How browsers render the DOM (Critical Rendering Path)
</Info>
## What is the DOM in JavaScript? ← 🟠 H2 with question keyword
The DOM (Document Object Model) is... ← Natural repetition
## How the DOM Works ← 🟠 H2 with "how" keyword
## DOM Manipulation Methods ← 🟡 H3 with related keyword
## Key Takeaways ← 🟡 Reinforce in summary
```
**Warning Signs of Keyword Stuffing:**
- Same exact phrase appears more than 3-4 times per 1000 words
- Sentences read awkwardly because keywords were forced in
- Using keywords where pronouns ("it", "they", "this") would be natural
---
### Answering Search Intent
Google ranks pages that **directly answer the user's query**. Structure your content to satisfy search intent immediately.
**The First Paragraph Rule:**
The first paragraph after any H2 should directly answer the implied question. Don't build up to the answer — lead with it.
```mdx
<!-- ❌ BAD: Builds up to the answer -->
## What is the Event Loop?
Before we can understand the event loop, we need to talk about JavaScript's
single-threaded nature. You see, JavaScript can only do one thing at a time,
and this creates some interesting challenges. The way JavaScript handles
this is through something called... the event loop.
<!-- ✓ GOOD: Answers immediately -->
## What is the Event Loop?
The **event loop** is JavaScript's mechanism for executing code, handling events,
and managing asynchronous operations. It continuously monitors the call stack
and task queue, moving queued callbacks to the stack when it's empty — this is
how JavaScript handles async code despite being single-threaded.
```
**Question-Format H2 Headings:**
Use H2s that match how people search:
| Search Query | H2 to Use |
|--------------|-----------|
| "what is the DOM" | `## What is the DOM?` |
| "how closures work" | `## How Do Closures Work?` |
| "why use promises" | `## Why Use Promises?` |
| "when to use async await" | `## When Should You Use async/await?` |
---
### Featured Snippet Optimization
Featured snippets appear at **position zero** — above all organic results. Structure your content to win them.
**Snippet Types and How to Win Them:**
```
┌─────────────────────────────────────────────────────────────────────────┐
│ FEATURED SNIPPET TYPES │
├─────────────────────────────────────────────────────────────────────────┤
│ │
│ QUERY TYPE SNIPPET FORMAT YOUR CONTENT STRUCTURE │
│ ─────────── ────────────── ───────────────────────── │
│ │
│ "What is X" Paragraph 40-60 word definition │
│ immediately after H2 │
│ │
│ "How to X" Numbered list <Steps> component or │
│ numbered Markdown list │
│ │
│ "X vs Y" Table Comparison table with │
│ clear column headers │
│ │
│ "Types of X" Bulleted list Bullet list under │
│ descriptive H2 │
│ │
│ "[X] examples" Bulleted list or Code examples with │
│ code block brief explanations │
│ │
└─────────────────────────────────────────────────────────────────────────┘
```
**Pattern 1: Definition Snippet (40-60 words)**
For "what is [concept]" queries:
```mdx
## What is a Closure in JavaScript?
A **closure** is a function that retains access to variables from its outer
(enclosing) scope, even after that outer function has finished executing.
Closures are created every time a function is created in JavaScript, allowing
inner functions to "remember" and access their lexical environment.
```
**Why this wins:**
- H2 matches search query exactly
- Bold keyword in first sentence
- 40-60 word complete definition
- Explains the "why" not just the "what"
**Pattern 2: List Snippet (Steps)**
For "how to [action]" queries:
```mdx
## How to Make a Fetch Request in JavaScript
<Steps>
<Step title="1. Call fetch() with the URL">
The `fetch()` function takes a URL and returns a Promise that resolves to a Response object.
</Step>
<Step title="2. Check if the response was successful">
Always verify `response.ok` before processing — fetch doesn't throw on HTTP errors.
</Step>
<Step title="3. Parse the response body">
Use `response.json()` for JSON data, `response.text()` for plain text.
</Step>
<Step title="4. Handle errors properly">
Wrap everything in try/catch to handle both network and HTTP errors.
</Step>
</Steps>
```
**Pattern 3: Table Snippet (Comparison)**
For "[X] vs [Y]" queries:
```mdx
## == vs === in JavaScript
| Aspect | `==` (Loose Equality) | `===` (Strict Equality) |
|--------|----------------------|------------------------|
| Type coercion | Yes — converts types before comparing | No — types must match |
| Speed | Slower (coercion overhead) | Faster (no coercion) |
| Predictability | Can produce surprising results | Always predictable |
| Recommendation | Avoid in most cases | Use by default |
```javascript
// Examples
5 == "5" // true (string coerced to number)
5 === "5" // false (different types)
```
```
**Pattern 4: List Snippet (Types/Categories)**
For "types of [concept]" queries:
```mdx
## Types of Scope in JavaScript
JavaScript has three types of scope that determine where variables are accessible:
- **Global Scope** — Variables declared outside any function or block; accessible everywhere
- **Function Scope** — Variables declared inside a function with `var`; accessible only within that function
- **Block Scope** — Variables declared with `let` or `const` inside `{}`; accessible only within that block
```
---
### Content Structure for SEO
How you structure content affects both rankings and user experience.
**The Inverted Pyramid:**
Put the most important information first. Search engines and users both prefer content that answers questions immediately.
```
┌─────────────────────────────────────────────────────────────────────────┐
│ THE INVERTED PYRAMID │
├─────────────────────────────────────────────────────────────────────────┤
│ │
│ │
│ ┌─────────────────────────────────────┐ │
│ │ ANSWER THE QUESTION │ ← First 100 words │
│ │ Definition + Core Concept │ (most important) │
│ └──────────────────┬──────────────────┘ │
│ │ │
│ ┌────────────────┴────────────────┐ │
│ │ EXPLAIN HOW IT WORKS │ ← Next 300 words │
│ │ Mechanism + Visual Diagram │ (supporting info) │
│ └────────────────┬─────────────────┘ │
│ │ │
│ ┌──────────────────┴──────────────────┐ │
│ │ SHOW PRACTICAL EXAMPLES │ ← Code examples │
│ │ Code + Step-by-step │ (proof it works) │
│ └──────────────────┬──────────────────┘ │
│ │ │
│ ┌──────────────────────┴──────────────────────┐ │
│ │ COVER EDGE CASES │ ← Advanced │
│ │ Common mistakes, gotchas │ (depth) │
│ └──────────────────────┬──────────────────────┘ │
│ │ │
│ ┌──────────────────────────┴──────────────────────────┐ │
│ │ ADDITIONAL RESOURCES │ ← External │
│ │ Related concepts, articles, videos │ (links) │
│ └──────────────────────────────────────────────────────┘ │
│ │
└─────────────────────────────────────────────────────────────────────────┘
```
**Scannable Content Patterns:**
Google favors content that's easy to scan. Use these elements:
| Element | SEO Benefit | When to Use |
|---------|-------------|-------------|
| Short paragraphs | Reduces bounce rate | Always (2-4 sentences max) |
| Bullet lists | Often become featured snippets | Lists of 3+ items |
| Numbered lists | "How to" snippet potential | Sequential steps |
| Tables | High snippet potential | Comparisons, reference data |
| Bold text | Highlights keywords for crawlers | First mention of key terms |
| Headings (H2/H3) | Structure signals to Google | Every major topic shift |
**Content Length Guidelines:**
| Length | Assessment | Action |
|--------|------------|--------|
| Under 1,000 words | Too thin | Add more depth, examples, edge cases |
| 1,000-1,500 words | Minimum viable | Acceptable for simple concepts |
| 1,500-2,500 words | Good | Standard for most concept pages |
| 2,500-4,000 words | Excellent | Ideal for comprehensive guides |
| Over 4,000 words | Evaluate | Consider splitting into multiple pages |
**Note:** Length alone doesn't guarantee rankings. Every section must add value — don't pad content.
---
### Internal Linking for SEO
Internal links help search engines understand your site structure and distribute page authority.
**Topic Cluster Strategy:**
Think of concept pages as an interconnected network. Every concept should link to 3-5 related concepts:
```
┌─────────────────┐
┌───────│ Promises │───────┐
│ └────────┬────────┘ │
│ │ │
▼ ▼ ▼
┌───────────┐ ┌───────────────┐ ┌─────────────┐
│async/await│◄──►│ Event Loop │◄──►│ Callbacks │
└───────────┘ └───────────────┘ └─────────────┘
│ │ │
│ ▼ │
│ ┌───────────────┐ │
└──────►│ Call Stack │◄───────┘
└───────────────┘
```
**Link Placement Guidelines:**
1. **In Prerequisites (Warning box):**
```mdx
<Warning>
**Prerequisite:** This guide assumes you understand [Promises](/concepts/promises) and the [Event Loop](/concepts/event-loop). Read those first if you're not comfortable with asynchronous JavaScript.
</Warning>
```
2. **In Body Content (natural context):**
```mdx
When the callback finishes, it's added to the task queue — which is managed by the [event loop](/concepts/event-loop).
```
3. **In Related Concepts Section:**
```mdx
<CardGroup cols={2}>
<Card title="Promises" icon="handshake" href="/concepts/promises">
async/await is built on top of Promises
</Card>
<Card title="Event Loop" icon="arrows-spin" href="/concepts/event-loop">
How JavaScript manages async operations
</Card>
</CardGroup>
```
**Anchor Text Best Practices:**
| ❌ Bad Anchor Text | ✓ Good Anchor Text | Why |
|-------------------|-------------------|-----|
| "click here" | "event loop guide" | Descriptive, includes keyword |
| "this article" | "our Promises concept" | Tells Google what page is about |
| "here" | "JavaScript closures" | Keywords in anchor text |
| "read more" | "understanding the call stack" | Natural, informative |
---
### URL and Slug Best Practices
URLs (slugs) are a minor but meaningful ranking factor.
**Rules:**
1. **Use lowercase** — `closures` not `Closures`
2. **Use hyphens** — `call-stack` not `call_stack` or `callstack`
3. **Keep it short** — aim for 3-5 words maximum
4. **Include primary keyword** — the concept name
5. **Avoid stop words** — skip "the", "and", "in", "of" unless necessary
**Slug Examples:**
| Concept | ❌ Avoid | ✓ Use |
|---------|---------|-------|
| The Event Loop | `the-event-loop` | `event-loop` |
| this, call, apply and bind | `this-call-apply-and-bind` | `this-call-apply-bind` |
| Scope and Closures | `scope-and-closures` | `scope-and-closures` (acceptable) or `scope-closures` |
| DOM and Layout Trees | `dom-and-layout-trees` | `dom` or `dom-layout-trees` |
**Note:** For this project, slugs are already set. When creating new pages, follow these conventions.
---
### Opening Paragraph: The SEO Power Move
The opening paragraph is prime SEO real estate. It should:
1. Hook the reader with a question they're asking
2. Include the primary keyword naturally
3. Provide a brief definition or answer
4. Set up what they'll learn
**Template:**
```mdx
[Question hook that matches search intent?] [Maybe another question?]
The **[Primary Keyword]** is [brief definition that answers "what is X"].
[One sentence explaining why it matters or what it enables].
```javascript
// Immediately show a simple example
```
[Brief transition to "What you'll learn" box]
```
**Example (Closures):**
```mdx
Why do some functions seem to "remember" variables that should have disappeared?
How can a callback still access variables from a function that finished running
long ago?
The answer is **closures** — one of JavaScript's most powerful (and often
misunderstood) features. A closure is a function that retains access to its
outer scope's variables, even after that outer scope has finished executing.
```javascript
function createCounter() {
let count = 0 // This variable is "enclosed" by the returned function
return function() {
count++
return count
}
}
const counter = createCounter()
console.log(counter()) // 1
console.log(counter()) // 2 — it remembers!
```
Understanding closures unlocks patterns like private variables, factory functions,
and the module pattern that power modern JavaScript.
```
**Why this works for SEO:**
- Question hooks match how people search ("why do functions remember")
- Bold keyword in first paragraph
- Direct definition answers "what is a closure"
- Code example demonstrates immediately
- Natural setup for learning objectives
---
## Inline Linking Rules (Critical!)
### Always Link to MDN
Whenever you introduce a new Web API, method, object, or JavaScript concept, **link to MDN immediately**. This gives readers a path to deeper learning.
```mdx
<!-- ✓ CORRECT: Link on first mention -->
The **[Fetch API](https://developer.mozilla.org/en-US/docs/Web/API/Fetch_API)** is JavaScript's modern way to make network requests.
The **[Response](https://developer.mozilla.org/en-US/docs/Web/API/Response)** object contains everything about the server's reply.
Most modern APIs return data in **[JSON](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/JSON)** format.
<!-- ❌ WRONG: No links -->
The Fetch API is JavaScript's modern way to make network requests.
```
### Link to Related Concept Pages
When mentioning concepts covered in other pages, link to them:
```mdx
<!-- ✓ CORRECT: Internal links to related concepts -->
If you're not familiar with it, check out our [async/await concept](/concepts/async-await) first.
This guide assumes you understand [Promises](/concepts/promises).
<!-- ❌ WRONG: No internal links -->
If you're not familiar with async/await, you should learn that first.
```
### Common MDN Link Patterns
| Concept | MDN URL Pattern |
|---------|-----------------|
| Web APIs | `https://developer.mozilla.org/en-US/docs/Web/API/{APIName}` |
| JavaScript Objects | `https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/{Object}` |
| HTTP | `https://developer.mozilla.org/en-US/docs/Web/HTTP` |
| HTTP Methods | `https://developer.mozilla.org/en-US/docs/Web/HTTP/Methods/{METHOD}` |
| HTTP Headers | `https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers` |
---
## Code Examples Best Practices
### 1. Start with the Simplest Possible Example
```javascript
// ✓ GOOD: Start with the absolute basics
// This is how you fetch data in JavaScript
const response = await fetch('https://api.example.com/users/1')
const user = await response.json()
console.log(user.name) // "Alice"
```
### 2. Use Step-by-Step Comments
```javascript
// Step 1: fetch() returns a Promise that resolves to a Response object
const responsePromise = fetch('https://api.example.com/users')
// Step 2: When the response arrives, we get a Response object
responsePromise.then(response => {
console.log(response.status) // 200
// Step 3: The body is a stream, we need to parse it
return response.json()
})
.then(data => {
// Step 4: Now we have the actual data
console.log(data)
})
```
### 3. Show Output in Comments
```javascript
const greeting = "Hello"
console.log(typeof greeting) // "string"
const numbers = [1, 2, 3]
console.log(numbers.length) // 3
```
### 4. Use ❌ and ✓ for Wrong/Correct Patterns
```javascript
// ❌ WRONG - This misses HTTP errors!
try {
const response = await fetch('/api/users/999')
const data = await response.json()
} catch (error) {
// Only catches NETWORK errors, not 404s!
}
// ✓ CORRECT - Check response.ok
try {
const response = await fetch('/api/users/999')
if (!response.ok) {
throw new Error(`HTTP error! Status: ${response.status}`)
}
const data = await response.json()
} catch (error) {
// Now catches both network AND HTTP errors
}
```
### 5. Use Meaningful Variable Names
```javascript
// ❌ BAD
const x = [1, 2, 3]
const y = x.map(z => z * 2)
// ✓ GOOD
const numbers = [1, 2, 3]
const doubled = numbers.map(num => num * 2)
```
### 6. Progress from Simple to Complex
```javascript
// Level 1: Basic usage
fetch('/api/users')
// Level 2: With options
fetch('/api/users', {
method: 'POST',
body: JSON.stringify({ name: 'Alice' })
})
// Level 3: Full real-world pattern
async function createUser(userData) {
const response = await fetch('/api/users', {
method: 'POST',
headers: { 'Content-Type': 'application/json' },
body: JSON.stringify(userData)
})
if (!response.ok) {
throw new Error(`Failed to create user: ${response.status}`)
}
return response.json()
}
```
---
## Resource Curation Guidelines
External resources (articles, videos) are valuable, but must meet quality standards.
### Quality Standards
Only include resources that are:
1. **JavaScript-focused** — No resources primarily about other languages (C#, Python, Java, etc.), even if the concepts are similar
2. **Still accessible** — Verify all links work before publishing
3. **High quality** — From reputable sources (MDN, javascript.info, freeCodeCamp, well-known educators)
4. **Up to date** — Avoid outdated resources; check publication dates for time-sensitive topics
5. **Accurate** — Skim the content to verify it doesn't teach anti-patterns
### Writing Resource Descriptions
Each resource needs a **specific, engaging 2-sentence description** explaining what makes it unique. Generic descriptions waste the reader's time.
```mdx
<!-- ❌ Generic (bad) -->
<Card title="JavaScript Promises Tutorial" icon="newspaper" href="...">
Learn about Promises in JavaScript.
</Card>
<!-- ❌ Generic (bad) -->
<Card title="Async/Await Explained" icon="newspaper" href="...">
A comprehensive guide to async/await.
</Card>
<!-- ✓ Specific (good) -->
<Card title="JavaScript Async/Await Tutorial" icon="newspaper" href="https://javascript.info/async-await">
The go-to reference for async/await fundamentals. Includes exercises at the end to test your understanding of rewriting promise chains.
</Card>
<!-- ✓ Specific (good) -->
<Card title="JavaScript Visualized: Promises & Async/Await" icon="newspaper" href="...">
Animated GIFs showing the call stack, microtask queue, and event loop in action. This is how async/await finally "clicked" for thousands of developers.
</Card>
<!-- ✓ Specific (good) -->
<Card title="How to Escape Async/Await Hell" icon="newspaper" href="...">
The pizza-and-drinks ordering example makes parallel vs sequential execution crystal clear. Essential reading once you know the basics.
</Card>
```
**Description Formula:**
1. **Sentence 1:** What makes this resource unique OR what it specifically covers
2. **Sentence 2:** Why a reader should click (what they'll gain, who it's best for, what stands out)
**Avoid in descriptions:**
- "Comprehensive guide to..." (vague)
- "Great tutorial on..." (vague)
- "Learn all about..." (vague)
- "Everything you need to know about..." (cliché)
### Recommended Sources
**Articles (Prioritize):**
| Source | Why |
|--------|-----|
| javascript.info | Comprehensive, well-maintained, exercises included |
| MDN Web Docs | Official reference, always accurate |
| freeCodeCamp | Beginner-friendly, practical tutorials |
| dev.to (Lydia Hallie, etc.) | Visual explanations, community favorites |
| CSS-Tricks | DOM, browser APIs, visual topics |
**Videos (Prioritize):**
| Creator | Style |
|---------|-------|
| Web Dev Simplified | Clear, beginner-friendly, concise |
| Fireship | Fast-paced, modern, entertaining |
| Traversy Media | Comprehensive crash courses |
| Fun Fun Function | Deep-dives with personality |
| Wes Bos | Practical, real-world focused |
**Avoid:**
- Resources in other programming languages (C#, Python, Java) even if concepts overlap
- Outdated tutorials (pre-ES6 syntax for modern concepts)
- Paywalled content (unless there's a free tier)
- Low-quality Medium articles (check engagement and accuracy)
- Resources that teach anti-patterns
- Videos over 2 hours (link to specific timestamps if valuable)
### Verifying Resources
Before including any resource:
1. **Click the link** — Verify it loads and isn't behind a paywall
2. **Skim the content** — Ensure it's accurate and well-written
3. **Check the date** — For time-sensitive topics, prefer recent content
4. **Read comments/reactions** — Community feedback reveals quality issues
5. **Test code examples** — If they include code, verify it works
---
## ASCII Art Diagrams
Use ASCII art to visualize concepts. Make them boxed and labeled:
```
┌─────────────────────────────────────────────────────────────────────────┐
│ THE REQUEST-RESPONSE CYCLE │
├─────────────────────────────────────────────────────────────────────────┤
│ │
│ YOU (Browser) KITCHEN (Server) │
│ ┌──────────┐ ┌──────────────┐ │
│ │ │ ──── "I'd like pasta" ────► │ │ │
│ │ :) │ (REQUEST) │ [chef] │ │
│ │ │ │ │ │
│ │ │ ◄──── Here you go! ──────── │ │ │
│ │ │ (RESPONSE) │ │ │
│ └──────────┘ └──────────────┘ │
│ │
│ The waiter (HTTP) is the protocol that makes this exchange work! │
│ │
└─────────────────────────────────────────────────────────────────────────┘
```
---
## Mintlify Components Reference
| Component | When to Use |
|-----------|-------------|
| `<Info>` | "What you'll learn" boxes, Key Takeaways |
| `<Warning>` | Common mistakes, gotchas, prerequisites |
| `<Tip>` | Pro tips, rules of thumb, best practices |
| `<Note>` | Additional context, side notes |
| `<AccordionGroup>` | Expandable content, Q&A sections, optional deep-dives |
| `<Tabs>` | Comparing different approaches side-by-side |
| `<Steps>` | Sequential processes, numbered workflows |
| `<CardGroup>` | Resource links (articles, videos, references) |
| `<Card>` | Individual resource with icon and link |
### Card Icons Reference
| Content Type | Icon |
|--------------|------|
| MDN/Official Docs | `book` |
| Articles/Blog Posts | `newspaper` |
| Videos | `video` |
| Courses | `graduation-cap` |
| Related Concepts | Context-appropriate (`handshake`, `hourglass`, `arrows-spin`, `sitemap`, etc.) |
---
## Quality Checklist
Before finalizing a concept page, verify ALL of these:
### Structure
- [ ] Opens with engaging questions that hook the reader
- [ ] Shows a simple code example immediately after the opening
- [ ] Has "What you'll learn" Info box right after the opening
- [ ] Major sections are separated by `---` horizontal rules
- [ ] Has a real-world analogy with ASCII art diagram
- [ ] Has a "Common Mistakes" or "The #1 Mistake" section
- [ ] Has a "Key Takeaways" section summarizing 8-10 points
- [ ] Has a "Test Your Knowledge" section with 5-6 Q&As
- [ ] Ends with Related Concepts, Reference, Articles, Videos in that order
### Linking
- [ ] All new Web APIs/methods have inline MDN links on first mention
- [ ] All related concepts link to their concept pages (`/concepts/slug`)
- [ ] Reference section has multiple MDN links
- [ ] 4-6 quality articles with descriptions
- [ ] 3-4 quality videos with descriptions
### Code Examples
- [ ] First code example is dead simple
- [ ] Uses step-by-step comments for complex examples
- [ ] Shows output in comments (`// "result"`)
- [ ] Uses ❌ and ✓ for wrong/correct patterns
- [ ] Uses meaningful variable names
- [ ] Progresses from simple to complex
### Content Quality
- [ ] Written for someone who might be new to coding
- [ ] Prerequisites are noted with Warning component
- [ ] No assumptions about prior knowledge without links
- [ ] Tables used for quick reference information
- [ ] ASCII diagrams for visual concepts
### Language Quality
- [ ] Description starts with "Learn" or "Understand" (not "Master")
- [ ] No overuse of em dashes (fewer than 15 outside Key Takeaways and structured sections)
- [ ] No AI superlatives: "dramatically", "fundamentally", "incredibly", "extremely"
- [ ] No stiff phrases: "one of the most important", "essential points", "It should be noted"
- [ ] Emphasis patterns vary (not all "Key insight:" or "Best practice:")
- [ ] Playful touches are sparse (1-2 per major section maximum)
- [ ] No filler words: "basically", "essentially", "actually", "very", "really"
- [ ] Sentences are direct (no "In order to", "Due to the fact that")
### Resource Quality
- [ ] All article/video links are verified working
- [ ] All resources are JavaScript-focused (no C#, Python, Java resources)
- [ ] Each resource has a specific 2-sentence description (not generic)
- [ ] Resource descriptions explain what makes each unique
- [ ] No outdated resources (check dates for time-sensitive topics)
- [ ] 4-6 articles from reputable sources
- [ ] 3-4 videos from quality creators
---
## Writing Tests
When adding code examples, create corresponding tests in `/tests/`:
```javascript
// tests/{category}/{concept-name}/{concept-name}.test.js
import { describe, it, expect } from 'vitest'
describe('Concept Name', () => {
describe('Basic Examples', () => {
it('should demonstrate the core concept', () => {
// Convert console.log examples to expect assertions
expect(typeof "hello").toBe("string")
})
})
describe('Common Mistakes', () => {
it('should show the wrong behavior', () => {
// Test the "wrong" example to prove it's actually wrong
})
it('should show the correct behavior', () => {
// Test the "correct" example
})
})
})
```
---
## SEO Checklist
Verify these elements before publishing any concept page:
### Title & Meta Description
- [ ] **Title is 50-60 characters** — check with character counter
- [ ] **Title ends with "in JavaScript"** — SEO keyword at end
- [ ] **Title has a compelling hook** — tells reader what they'll understand
- [ ] **sidebarTitle matches title but without "in JavaScript"** — cleaner navigation
- [ ] **Description is 150-160 characters** — don't leave value on the table
- [ ] **Description includes primary keyword** in first sentence
- [ ] **Description includes 1-2 secondary keywords** naturally
- [ ] **Description starts with action word** (Learn, Understand, Discover — avoid "Master")
- [ ] **Description promises specific value** — what will they learn?
### Keyword Placement
- [ ] **Primary keyword in title**
- [ ] **Primary keyword in description**
- [ ] **Primary keyword in first paragraph** (within first 100 words)
- [ ] **Primary keyword in at least one H2 heading**
- [ ] **Secondary keywords in H2/H3 headings** where natural
- [ ] **Keywords in "What you'll learn" box items**
- [ ] **No keyword stuffing** — content reads naturally
### Content Structure
- [ ] **Opens with question hook** matching search intent
- [ ] **Shows code example in first 200 words**
- [ ] **First paragraph after H2s directly answers** the implied question
- [ ] **Content is 1,500+ words** (comprehensive coverage)
- [ ] **Short paragraphs** (2-4 sentences maximum)
- [ ] **Uses bullet lists** for 3+ related items
- [ ] **Uses numbered lists** for sequential processes
- [ ] **Uses tables** for comparisons and reference data
- [ ] **Key terms bolded** on first mention with MDN links
### Featured Snippet Optimization
- [ ] **"What is X" section has 40-60 word definition paragraph**
- [ ] **"How to" sections use numbered steps or `<Steps>` component**
- [ ] **Comparison sections use tables** with clear headers
- [ ] **At least one H2 is phrased as a question** matching search query
### Internal Linking
- [ ] **Links to 3-5 related concept pages** in body content
- [ ] **Uses descriptive anchor text** (not "click here" or "here")
- [ ] **Prerequisites linked in Warning component** at start
- [ ] **Related Concepts section has 4 cards** with relevant concepts
- [ ] **Links appear in natural context** — not forced
### Technical SEO
- [ ] **Slug is lowercase with hyphens**
- [ ] **Slug contains primary keyword**
- [ ] **Slug is 3-5 words maximum**
- [ ] **All external links use proper URLs** (no broken links)
- [ ] **MDN links are current** (check they resolve)
================================================
FILE: .github/FUNDING.yml
================================================
# These are supported funding model platforms
github: # Replace with up to 4 GitHub Sponsors-enabled usernames e.g., [user1, user2]
patreon: # Replace with a single Patreon username
open_collective: # Replace with a single Open Collective username
ko_fi: # Replace with a single Ko-fi username
tidelift: # Replace with a single Tidelift platform-name/package-name e.g., npm/babel
custom: https://www.buymeacoffee.com/PtZnDSaEo
================================================
FILE: .github/workflows/tests.yml
================================================
name: Tests
on:
push:
branches: [master, main]
pull_request:
branches: [master, main]
jobs:
test:
runs-on: ubuntu-latest
steps:
- name: Checkout repository
uses: actions/checkout@v6
- name: Setup Node.js
uses: actions/setup-node@v6
with:
node-version: 'lts/*'
cache: 'npm'
- name: Install dependencies
run: npm ci
- name: Run tests
run: npm test
================================================
FILE: .gitignore
================================================
# Logs
logs
*.log
npm-debug.log*
yarn-debug.log*
yarn-error.log*
# Runtime data
pids
*.pid
*.seed
*.pid.lock
# Directory for instrumented libs generated by jscoverage/JSCover
lib-cov
# Coverage directory used by tools like istanbul
coverage
# nyc test coverage
.nyc_output
# Grunt intermediate storage (http://gruntjs.com/creating-plugins#storing-task-files)
.grunt
# Bower dependency directory (https://bower.io/)
bower_components
# node-waf configuration
.lock-wscript
# Compiled binary addons (https://nodejs.org/api/addons.html)
build/Release
# Dependency directories
node_modules/
jspm_packages/
# TypeScript v1 declaration files
typings/
# Optional npm cache directory
.npm
# Optional eslint cache
.eslintcache
# Optional REPL history
.node_repl_history
# Output of 'npm pack'
*.tgz
# Yarn Integrity file
.yarn-integrity
# dotenv environment variables file
.env
# next.js build output
.next
# webstore IDE created directory
.idea
================================================
FILE: .opencode/skill/concept-workflow/SKILL.md
================================================
---
name: concept-workflow
description: End-to-end workflow for creating complete JavaScript concept documentation, orchestrating all skills from research to final review
---
# Skill: Complete Concept Workflow
Use this skill to create a complete, high-quality concept page from start to finish. This skill orchestrates all five specialized skills in the optimal order:
1. **Resource Curation** — Find quality learning resources
2. **Concept Writing** — Write the documentation page
3. **Test Writing** — Create tests for code examples
4. **Fact Checking** — Verify technical accuracy
5. **SEO Review** — Optimize for search visibility
## When to Use
- Creating a brand new concept page from scratch
- Completely rewriting an existing concept page
- When you want a full end-to-end workflow with all quality checks
**For partial tasks, use individual skills instead:**
- Just adding resources? Use `resource-curator`
- Just writing content? Use `write-concept`
- Just adding tests? Use `test-writer`
- Just verifying accuracy? Use `fact-check`
- Just optimizing SEO? Use `seo-review`
---
## Workflow Overview
```
┌─────────────────────────────────────────────────────────────────────────────┐
│ COMPLETE CONCEPT WORKFLOW │
├─────────────────────────────────────────────────────────────────────────────┤
│ │
│ INPUT: Concept name (e.g., "hoisting", "event-loop", "promises") │
│ │
│ ┌──────────────────┐ │
│ │ PHASE 1: RESEARCH │ │
│ │ resource-curator │ Find MDN refs, articles, videos │
│ └────────┬─────────┘ │
│ ▼ │
│ ┌──────────────────┐ │
│ │ PHASE 2: WRITE │ │
│ │ write-concept │ Create the documentation page │
│ └────────┬─────────┘ │
│ ▼ │
│ ┌──────────────────┐ │
│ │ PHASE 3: TEST │ │
│ │ test-writer │ Generate tests for all code examples │
│ └────────┬─────────┘ │
│ ▼ │
│ ┌──────────────────┐ │
│ │ PHASE 4: VERIFY │ │
│ │ fact-check │ Verify accuracy, run tests, check links │
│ └────────┬─────────┘ │
│ ▼ │
│ ┌──────────────────┐ │
│ │ PHASE 5: OPTIMIZE│ │
│ │ seo-review │ SEO audit and final optimizations │
│ └────────┬─────────┘ │
│ ▼ │
│ OUTPUT: Complete, tested, verified, SEO-optimized concept page │
│ │
└─────────────────────────────────────────────────────────────────────────────┘
```
---
## Phase 1: Resource Curation
**Skill:** `resource-curator`
**Goal:** Gather high-quality external resources before writing
### What to Do
1. **Identify the concept category** (fundamentals, async, OOP, etc.)
2. **Search for MDN references** — Official documentation
3. **Find quality articles** — Target 4-6 from trusted sources
4. **Find quality videos** — Target 3-4 from trusted creators
5. **Evaluate each resource** — Check quality criteria
6. **Write specific descriptions** — 2 sentences each
7. **Format as Card components** — Ready to paste into the page
### Deliverables
- List of 2-4 MDN/reference links with descriptions
- List of 4-6 article links with descriptions
- List of 3-4 video links with descriptions
- Optional: 1-2 courses or books
### Quality Gates
Before moving to Phase 2:
- [ ] All links verified working (200 response)
- [ ] All resources are JavaScript-focused
- [ ] Descriptions are specific, not generic
- [ ] Mix of beginner and advanced content
---
## Phase 2: Concept Writing
**Skill:** `write-concept`
**Goal:** Create the full documentation page
### What to Do
1. **Determine the category** for file organization
2. **Create the frontmatter** (title, sidebarTitle, description)
3. **Write the opening hook** — Question that draws readers in
4. **Add opening code example** — Simple example in first 200 words
5. **Write "What you'll learn" box** — 5-7 bullet points
6. **Write main content sections:**
- What is [concept]? (with 40-60 word definition for featured snippet)
- Real-world analogy
- How it works (with diagrams)
- Code examples (multiple, progressive complexity)
- Common mistakes
- Edge cases
7. **Add Key Takeaways** — 8-10 numbered points
8. **Add Test Your Knowledge** — 5-6 Q&A accordions
9. **Add Related Concepts** — 4 Cards linking to related topics
10. **Add Resources** — Paste resources from Phase 1
### Deliverables
- Complete `.mdx` file at `/docs/concepts/{concept-name}.mdx`
- File added to `docs.json` navigation (if new)
### Quality Gates
Before moving to Phase 3:
- [ ] Frontmatter complete (title, sidebarTitle, description)
- [ ] Opens with question hook
- [ ] Code example in first 200 words
- [ ] "What you'll learn" Info box present
- [ ] All required sections present
- [ ] Resources section complete
- [ ] 1,500+ words
---
## Phase 3: Test Writing
**Skill:** `test-writer`
**Goal:** Create comprehensive tests for all code examples
### What to Do
1. **Scan the concept page** for all code examples
2. **Categorize examples:**
- Testable (console.log, return values)
- DOM-specific (needs jsdom)
- Error examples (toThrow)
- Conceptual (skip)
3. **Create test file** at `tests/{category}/{concept}/{concept}.test.js`
4. **Create DOM test file** (if needed) at `tests/{category}/{concept}/{concept}.dom.test.js`
5. **Write tests** for each code example with source line references
6. **Run tests** to verify all pass
### Deliverables
- Test file: `tests/{category}/{concept-name}/{concept-name}.test.js`
- DOM test file (if applicable): `tests/{category}/{concept-name}/{concept-name}.dom.test.js`
- All tests passing
### Quality Gates
Before moving to Phase 4:
- [ ] All testable code examples have tests
- [ ] Source line references in comments
- [ ] Tests pass: `npm test -- tests/{category}/{concept}/`
- [ ] DOM tests in separate file with jsdom directive
---
## Phase 4: Fact Checking
**Skill:** `fact-check`
**Goal:** Verify technical accuracy of all content
### What to Do
1. **Verify code examples:**
- Run tests: `npm test -- tests/{category}/{concept}/`
- Check any untested examples manually
- Verify output comments match actual outputs
2. **Verify MDN/spec claims:**
- Click all MDN links — verify they work
- Compare API descriptions to MDN
- Check ECMAScript spec for nuanced claims
3. **Verify external resources:**
- Check all article/video links work
- Skim content for accuracy
- Verify descriptions match content
4. **Audit technical claims:**
- Look for "always/never" statements
- Verify performance claims
- Check for common misconceptions
5. **Generate fact-check report**
### Deliverables
- Fact-check report documenting:
- Code verification results
- Link check results
- Any issues found and fixes made
### Quality Gates
Before moving to Phase 5:
- [ ] All tests passing
- [ ] All MDN links valid
- [ ] All external resources accessible
- [ ] No technical inaccuracies found
- [ ] No common misconceptions
---
## Phase 5: SEO Review
**Skill:** `seo-review`
**Goal:** Optimize for search visibility
### What to Do
1. **Audit title tag:**
- 50-60 characters
- Primary keyword in first half
- Ends with "in JavaScript"
- Contains compelling hook
2. **Audit meta description:**
- 150-160 characters
- Starts with action word (Learn, Understand, Discover)
- Contains primary keyword
- Promises specific value
3. **Audit keyword placement:**
- Keyword in title
- Keyword in description
- Keyword in first 100 words
- Keyword in at least one H2
4. **Audit content structure:**
- Question hook opening
- Code in first 200 words
- "What you'll learn" box
- Short paragraphs
5. **Audit featured snippet optimization:**
- 40-60 word definition after "What is" H2
- Question-format H2s
- Numbered steps for how-to content
6. **Audit internal linking:**
- 3-5 related concepts linked
- Descriptive anchor text
- Related Concepts section complete
7. **Calculate score** and fix any issues
### Deliverables
- SEO audit report with score (X/27)
- All high-priority fixes implemented
### Quality Gates
Before marking complete:
- [ ] Score 24+ out of 27 (90%+)
- [ ] Title optimized
- [ ] Meta description optimized
- [ ] Keywords placed naturally
- [ ] Featured snippet optimized
- [ ] Internal links complete
---
## Complete Workflow Checklist
Use this master checklist to track progress through all phases.
```markdown
# Concept Workflow: [Concept Name]
**Started:** YYYY-MM-DD
**Target Category:** {category}
**File Path:** `/docs/concepts
gitextract_w51t050h/ ├── .claude/ │ ├── CLAUDE.md │ └── skills/ │ ├── concept-workflow/ │ │ └── SKILL.md │ ├── fact-check/ │ │ └── SKILL.md │ ├── resource-curator/ │ │ └── SKILL.md │ ├── seo-review/ │ │ └── SKILL.md │ ├── test-writer/ │ │ └── SKILL.md │ └── write-concept/ │ └── SKILL.md ├── .github/ │ ├── FUNDING.yml │ └── workflows/ │ └── tests.yml ├── .gitignore ├── .opencode/ │ └── skill/ │ ├── concept-workflow/ │ │ └── SKILL.md │ ├── fact-check/ │ │ └── SKILL.md │ ├── resource-curator/ │ │ └── SKILL.md │ ├── seo-review/ │ │ └── SKILL.md │ ├── test-writer/ │ │ └── SKILL.md │ └── write-concept/ │ └── SKILL.md ├── CODE_OF_CONDUCT.md ├── CONTRIBUTING.md ├── LICENSE ├── README.md ├── TRANSLATIONS.md ├── docs/ │ ├── 5c8wamucvfketshf1eyrw254gz94jwre.txt │ ├── beyond/ │ │ ├── concepts/ │ │ │ ├── blob-file-api.mdx │ │ │ ├── computed-property-names.mdx │ │ │ ├── cookies.mdx │ │ │ ├── custom-events.mdx │ │ │ ├── debouncing-throttling.mdx │ │ │ ├── event-bubbling-capturing.mdx │ │ │ ├── event-delegation.mdx │ │ │ ├── garbage-collection.mdx │ │ │ ├── getters-setters.mdx │ │ │ ├── hoisting.mdx │ │ │ ├── indexeddb.mdx │ │ │ ├── intersection-observer.mdx │ │ │ ├── javascript-type-nuances.mdx │ │ │ ├── json-deep-dive.mdx │ │ │ ├── localstorage-sessionstorage.mdx │ │ │ ├── memoization.mdx │ │ │ ├── memory-management.mdx │ │ │ ├── mutation-observer.mdx │ │ │ ├── object-methods.mdx │ │ │ ├── performance-observer.mdx │ │ │ ├── property-descriptors.mdx │ │ │ ├── proxy-reflect.mdx │ │ │ ├── requestanimationframe.mdx │ │ │ ├── resize-observer.mdx │ │ │ ├── strict-mode.mdx │ │ │ ├── tagged-template-literals.mdx │ │ │ ├── temporal-dead-zone.mdx │ │ │ ├── typed-arrays-arraybuffers.mdx │ │ │ └── weakmap-weakset.mdx │ │ └── getting-started/ │ │ └── overview.mdx │ ├── concepts/ │ │ ├── algorithms-big-o.mdx │ │ ├── async-await.mdx │ │ ├── call-stack.mdx │ │ ├── callbacks.mdx │ │ ├── clean-code.mdx │ │ ├── currying-composition.mdx │ │ ├── data-structures.mdx │ │ ├── design-patterns.mdx │ │ ├── dom.mdx │ │ ├── equality-operators.mdx │ │ ├── error-handling.mdx │ │ ├── es-modules.mdx │ │ ├── event-loop.mdx │ │ ├── factories-classes.mdx │ │ ├── generators-iterators.mdx │ │ ├── higher-order-functions.mdx │ │ ├── http-fetch.mdx │ │ ├── iife-modules.mdx │ │ ├── inheritance-polymorphism.mdx │ │ ├── javascript-engines.mdx │ │ ├── map-reduce-filter.mdx │ │ ├── modern-js-syntax.mdx │ │ ├── object-creation-prototypes.mdx │ │ ├── primitive-types.mdx │ │ ├── primitives-objects.mdx │ │ ├── promises.mdx │ │ ├── pure-functions.mdx │ │ ├── recursion.mdx │ │ ├── regular-expressions.mdx │ │ ├── scope-and-closures.mdx │ │ ├── this-call-apply-bind.mdx │ │ ├── type-coercion.mdx │ │ └── web-workers.mdx │ ├── contributing.mdx │ ├── docs.json │ ├── getting-started/ │ │ ├── about.mdx │ │ ├── how-to-learn.mdx │ │ ├── learning-paths.mdx │ │ └── prerequisites.mdx │ ├── index.mdx │ ├── robots.txt │ ├── schema-inject.js │ └── translations.mdx ├── index.js ├── opencode.jsonc ├── package.json ├── tests/ │ ├── advanced-topics/ │ │ ├── algorithms-big-o/ │ │ │ └── algorithms-big-o.test.js │ │ ├── data-structures/ │ │ │ └── data-structures.test.js │ │ ├── design-patterns/ │ │ │ └── design-patterns.test.js │ │ ├── error-handling/ │ │ │ └── error-handling.test.js │ │ ├── es-modules/ │ │ │ └── es-modules.test.js │ │ ├── modern-js-syntax/ │ │ │ └── modern-js-syntax.test.js │ │ └── regular-expressions/ │ │ └── regular-expressions.test.js │ ├── async-javascript/ │ │ └── callbacks/ │ │ ├── callbacks.dom.test.js │ │ └── callbacks.test.js │ ├── beyond/ │ │ ├── browser-storage/ │ │ │ ├── cookies/ │ │ │ │ ├── cookies.dom.test.js │ │ │ │ └── cookies.test.js │ │ │ ├── indexeddb/ │ │ │ │ └── indexeddb.test.js │ │ │ └── localstorage-sessionstorage/ │ │ │ ├── localstorage-sessionstorage.dom.test.js │ │ │ └── localstorage-sessionstorage.test.js │ │ ├── data-handling/ │ │ │ ├── blob-file-api/ │ │ │ │ ├── blob-file-api.dom.test.js │ │ │ │ └── blob-file-api.test.js │ │ │ ├── json-deep-dive/ │ │ │ │ └── json-deep-dive.test.js │ │ │ ├── requestanimationframe/ │ │ │ │ └── requestanimationframe.test.js │ │ │ └── typed-arrays-arraybuffers/ │ │ │ └── typed-arrays-arraybuffers.test.js │ │ ├── events/ │ │ │ ├── custom-events/ │ │ │ │ ├── custom-events.dom.test.js │ │ │ │ └── custom-events.test.js │ │ │ ├── event-bubbling-capturing/ │ │ │ │ └── event-bubbling-capturing.dom.test.js │ │ │ └── event-delegation/ │ │ │ └── event-delegation.test.js │ │ ├── language-mechanics/ │ │ │ ├── hoisting/ │ │ │ │ └── hoisting.test.js │ │ │ ├── strict-mode/ │ │ │ │ └── strict-mode.test.js │ │ │ └── temporal-dead-zone/ │ │ │ └── temporal-dead-zone.test.js │ │ ├── memory-performance/ │ │ │ ├── debouncing-throttling/ │ │ │ │ └── debouncing-throttling.test.js │ │ │ ├── garbage-collection/ │ │ │ │ └── garbage-collection.test.js │ │ │ ├── memoization/ │ │ │ │ └── memoization.test.js │ │ │ └── memory-management/ │ │ │ └── memory-management.test.js │ │ ├── modern-syntax-operators/ │ │ │ ├── computed-property-names/ │ │ │ │ └── computed-property-names.test.js │ │ │ └── tagged-template-literals/ │ │ │ └── tagged-template-literals.test.js │ │ ├── objects-properties/ │ │ │ ├── getters-setters/ │ │ │ │ └── getters-setters.test.js │ │ │ ├── object-methods/ │ │ │ │ └── object-methods.test.js │ │ │ ├── property-descriptors/ │ │ │ │ └── property-descriptors.test.js │ │ │ ├── proxy-reflect/ │ │ │ │ └── proxy-reflect.test.js │ │ │ └── weakmap-weakset/ │ │ │ └── weakmap-weakset.test.js │ │ ├── observer-apis/ │ │ │ ├── intersection-observer/ │ │ │ │ ├── intersection-observer.dom.test.js │ │ │ │ └── intersection-observer.test.js │ │ │ ├── mutation-observer/ │ │ │ │ └── mutation-observer.dom.test.js │ │ │ ├── performance-observer/ │ │ │ │ └── performance-observer.test.js │ │ │ └── resize-observer/ │ │ │ └── resize-observer.test.js │ │ └── type-system/ │ │ └── javascript-type-nuances/ │ │ └── javascript-type-nuances.test.js │ ├── functional-programming/ │ │ ├── currying-composition/ │ │ │ └── currying-composition.test.js │ │ ├── higher-order-functions/ │ │ │ └── higher-order-functions.test.js │ │ ├── map-reduce-filter/ │ │ │ └── map-reduce-filter.test.js │ │ ├── pure-functions/ │ │ │ └── pure-functions.test.js │ │ └── recursion/ │ │ └── recursion.test.js │ ├── functions-execution/ │ │ ├── async-await/ │ │ │ └── async-await.test.js │ │ ├── event-loop/ │ │ │ └── event-loop.test.js │ │ ├── generators-iterators/ │ │ │ └── generators-iterators.test.js │ │ ├── iife-modules/ │ │ │ └── iife-modules.test.js │ │ └── promises/ │ │ └── promises.test.js │ ├── fundamentals/ │ │ ├── call-stack/ │ │ │ └── call-stack.test.js │ │ ├── equality-operators/ │ │ │ └── equality-operators.test.js │ │ ├── javascript-engines/ │ │ │ └── javascript-engines.test.js │ │ ├── primitive-types/ │ │ │ └── primitive-types.test.js │ │ ├── primitives-objects/ │ │ │ └── primitives-objects.test.js │ │ ├── scope-and-closures/ │ │ │ └── scope-and-closures.test.js │ │ └── type-coercion/ │ │ └── type-coercion.test.js │ ├── object-oriented/ │ │ ├── factories-classes/ │ │ │ └── factories-classes.test.js │ │ ├── inheritance-polymorphism/ │ │ │ └── inheritance-polymorphism.test.js │ │ ├── object-creation-prototypes/ │ │ │ └── object-creation-prototypes.test.js │ │ └── this-call-apply-bind/ │ │ └── this-call-apply-bind.test.js │ └── web-platform/ │ ├── dom/ │ │ └── dom.test.js │ └── http-fetch/ │ └── http-fetch.test.js └── vitest.config.js
SYMBOL INDEX (1468 symbols across 59 files)
FILE: docs/schema-inject.js
function safeText (line 16) | function safeText(value) {
function withoutHash (line 20) | function withoutHash(url) {
function getSiteOrigin (line 24) | function getSiteOrigin() {
function normalizePath (line 33) | function normalizePath(pathname) {
function toTitle (line 39) | function toTitle(segment) {
function toAbsoluteUrl (line 55) | function toAbsoluteUrl(pathOrUrl) {
function getCanonicalUrl (line 63) | function getCanonicalUrl() {
function getDescription (line 72) | function getDescription() {
function getPageTitle (line 81) | function getPageTitle() {
function getDatePublished (line 93) | function getDatePublished() {
function isHomePage (line 113) | function isHomePage(pathname) {
function isConceptArticle (line 117) | function isConceptArticle(pathname) {
function isConceptLink (line 121) | function isConceptLink(pathname) {
function textFromCandidates (line 125) | function textFromCandidates(candidates, questionText) {
function findFaqHeading (line 145) | function findFaqHeading() {
function getFaqSectionNodes (line 157) | function getFaqSectionNodes(heading) {
function getFaqAnswerText (line 170) | function getFaqAnswerText(trigger, questionText) {
function extractFaqItems (line 202) | function extractFaqItems() {
function buildBreadcrumbList (line 244) | function buildBreadcrumbList(pathname) {
function buildConceptItemList (line 272) | function buildConceptItemList() {
function buildGraph (line 325) | function buildGraph() {
function injectSchema (line 387) | function injectSchema() {
FILE: tests/advanced-topics/algorithms-big-o/algorithms-big-o.test.js
function linearSearch (line 8) | function linearSearch(arr, target) {
function binarySearch (line 16) | function binarySearch(arr, target) {
function bubbleSort (line 36) | function bubbleSort(arr) {
function mergeSort (line 58) | function mergeSort(arr) {
function merge (line 68) | function merge(left, right) {
function twoSum (line 91) | function twoSum(arr, target) {
function maxSumSubarray (line 107) | function maxSumSubarray(arr, k) {
function isAnagram (line 126) | function isAnagram(str1, str2) {
function hasDuplicates (line 144) | function hasDuplicates(arr) {
function longestUniqueSubstring (line 154) | function longestUniqueSubstring(s) {
FILE: tests/advanced-topics/data-structures/data-structures.test.js
function countWords (line 160) | function countWords(text) {
class User (line 307) | class User {
method constructor (line 308) | constructor(name, password) {
method checkPassword (line 313) | checkPassword(input) {
function processOnce (line 341) | function processOnce(obj) {
class Stack (line 356) | class Stack {
method constructor (line 357) | constructor() {
method push (line 361) | push(item) {
method pop (line 365) | pop() {
method peek (line 369) | peek() {
method isEmpty (line 373) | isEmpty() {
method size (line 377) | size() {
function isValid (line 424) | function isValid(s) {
class Queue (line 451) | class Queue {
method constructor (line 452) | constructor() {
method enqueue (line 456) | enqueue(item) {
method dequeue (line 460) | dequeue() {
method front (line 464) | front() {
method isEmpty (line 468) | isEmpty() {
method size (line 472) | size() {
class Node (line 520) | class Node {
method constructor (line 521) | constructor(value) {
class LinkedList (line 527) | class LinkedList {
method constructor (line 528) | constructor() {
method prepend (line 533) | prepend(value) {
method append (line 540) | append(value) {
method find (line 555) | find(value) {
method toArray (line 566) | toArray() {
function reverseList (line 631) | function reverseList(head) {
class TreeNode (line 656) | class TreeNode {
method constructor (line 657) | constructor(value) {
class BinarySearchTree (line 664) | class BinarySearchTree {
method constructor (line 665) | constructor() {
method insert (line 669) | insert(value) {
method search (line 695) | search(value) {
method inOrder (line 708) | inOrder(node = this.root, result = []) {
function maxDepth (line 755) | function maxDepth(root) {
class Graph (line 796) | class Graph {
method constructor (line 797) | constructor() {
method addVertex (line 801) | addVertex(vertex) {
method addEdge (line 807) | addEdge(v1, v2) {
method bfs (line 812) | bfs(start) {
method dfs (line 834) | dfs(start, visited = new Set(), result = []) {
function twoSum (line 900) | function twoSum(nums, target) {
function hasCycle (line 922) | function hasCycle(head) {
class QueueFromStacks (line 957) | class QueueFromStacks {
method constructor (line 958) | constructor() {
method enqueue (line 963) | enqueue(item) {
method dequeue (line 967) | dequeue() {
FILE: tests/advanced-topics/design-patterns/design-patterns.test.js
method increment (line 11) | increment() {
method decrement (line 15) | decrement() {
method getCount (line 19) | getCount() {
function privateHelper (line 37) | function privateHelper(value) {
method publicMethod (line 43) | publicMethod(value) {
class Singleton (line 58) | class Singleton {
method constructor (line 59) | constructor() {
function createUser (line 121) | function createUser(name, role) {
function createProduct (line 139) | function createProduct(name) {
function createNotification (line 151) | function createNotification(type, message) {
method subscribe (line 183) | subscribe(fn) {
method notify (line 190) | notify(data) {
method get (line 261) | get(obj, prop) {
method set (line 277) | set(obj, prop, value) {
method set (line 299) | set(obj, prop, value) {
method get (line 335) | get(obj, prop) {
method chirp (line 352) | chirp() {
method fly (line 359) | fly() {
method getInfo (line 374) | getInfo() {
method getDiscountedPrice (line 382) | getDiscountedPrice() {
method describe (line 399) | describe() {
method swim (line 407) | swim() {
method fly (line 415) | fly() {
method breatheFire (line 423) | breatheFire() {
method on (line 518) | on(event, callback) {
method off (line 525) | off(event, callback) {
method emit (line 532) | emit(event, data) {
method takeDamage (line 573) | takeDamage(amount) {
method attack (line 581) | attack() {
FILE: tests/advanced-topics/error-handling/error-handling.test.js
function example (line 85) | function example() {
function example (line 103) | function example() {
function divide (line 271) | function divide(a, b) {
function validateAge (line 316) | function validateAge(age) {
class ValidationError (line 369) | class ValidationError extends Error {
method constructor (line 370) | constructor(message) {
method constructor (line 421) | constructor(message) {
method constructor (line 744) | constructor(errors) {
class AppError (line 386) | class AppError extends Error {
method constructor (line 387) | constructor(message, options) {
class ValidationError (line 393) | class ValidationError extends AppError {}
method constructor (line 370) | constructor(message) {
method constructor (line 421) | constructor(message) {
method constructor (line 744) | constructor(errors) {
class NetworkError (line 394) | class NetworkError extends AppError {}
method constructor (line 405) | constructor(message, statusCode) {
method constructor (line 428) | constructor(message) {
class NetworkError (line 404) | class NetworkError extends Error {
method constructor (line 405) | constructor(message, statusCode) {
method constructor (line 428) | constructor(message) {
class ValidationError (line 420) | class ValidationError extends Error {
method constructor (line 370) | constructor(message) {
method constructor (line 421) | constructor(message) {
method constructor (line 744) | constructor(errors) {
class NetworkError (line 427) | class NetworkError extends Error {
method constructor (line 405) | constructor(message, statusCode) {
method constructor (line 428) | constructor(message) {
class DataLoadError (line 451) | class DataLoadError extends Error {
method constructor (line 452) | constructor(message, options) {
function failingOperation (line 483) | async function failingOperation() {
function parseWithBugHidden (line 588) | function parseWithBugHidden(input) {
function parseCorrectly (line 598) | function parseCorrectly(input) {
function badFetch (line 638) | async function badFetch() {
function goodFetch (line 647) | async function goodFetch() {
function flakyOperation (line 704) | async function flakyOperation() {
function fetchWithRetry (line 712) | async function fetchWithRetry(operation, retries = 3) {
class ValidationError (line 743) | class ValidationError extends Error {
method constructor (line 370) | constructor(message) {
method constructor (line 421) | constructor(message) {
method constructor (line 744) | constructor(errors) {
function validateUser (line 751) | function validateUser(data) {
function fetchFromApi (line 786) | async function fetchFromApi() {
function loadFromCache (line 791) | async function loadFromCache() {
function loadUserPreferences (line 796) | async function loadUserPreferences() {
function parseUserData (line 823) | function parseUserData(json) {
function processOrder (line 841) | function processOrder(order) {
FILE: tests/advanced-topics/es-modules/es-modules.test.js
function createCommonJSModule (line 14) | function createCommonJSModule() {
function createESMModule (line 35) | function createESMModule() {
method setUser (line 58) | setUser(u) { moduleState.user = u }
method getUser (line 59) | getUser() { return moduleState.user }
method currentUser (line 103) | get currentUser() { return currentUser }
method isAuthenticated (line 104) | get isAuthenticated() { return isAuthenticated }
method login (line 105) | login(user) {
method logout (line 109) | logout() {
method value (line 167) | get value() { return value }
method setValue (line 168) | setValue(v) { value = v }
method log (line 436) | log(msg) { return `[LOG] ${msg}` }
function loadTheme (line 462) | async function loadTheme(themeName) {
function loadPage (line 481) | async function loadPage(pageName) {
method constructor (line 499) | constructor(data) {
method render (line 503) | render() {
function showChart (line 509) | async function showChart(data) {
function loadComponents (line 531) | async function loadComponents() {
method constructor (line 602) | constructor(radius) { this.radius = radius }
method area (line 603) | area() { return moduleExports.PI * this.radius ** 2 }
function square (line 619) | function square(x) { return x * x }
function internalHelper (line 631) | function internalHelper() { return 'helped' }
function _privateUtil (line 632) | function _privateUtil() { return 'util' }
function greet (line 649) | function greet(name) { return `Hello, ${name}!` }
class User (line 660) | class User {
method constructor (line 661) | constructor(name) { this.name = name }
method greet (line 662) | greet() { return `Hi, I'm ${this.name}` }
function React (line 697) | function React() { return 'React' }
function useState (line 698) | function useState(initial) { return [initial, () => {}] }
function useEffect (line 699) | function useEffect(fn) { fn() }
method log (line 824) | log(msg) { return msg }
function getThis (line 889) | function getThis() {
function getThisInStrictMode (line 938) | function getThisInStrictMode() {
method increment (line 1124) | increment() { this.count++ }
method increment (line 1134) | increment() { cjsCount++ }
function loadFeature (line 1150) | async function loadFeature(name) {
FILE: tests/advanced-topics/modern-js-syntax/modern-js-syntax.test.js
function greet (line 155) | function greet({ name, greeting = 'Hello' }) {
function greet (line 164) | function greet({ name = 'Guest' } = {}) {
function sum (line 226) | function sum(...numbers) {
function log (line 236) | function log(first, ...rest) {
function upper (line 272) | function upper(strings, ...values) {
function greet (line 405) | function greet(name = 'Guest', greeting = 'Hello') {
function example (line 415) | function example(value = 'default') {
function createRect (line 427) | function createRect(width, height = width) {
function getDefault (line 437) | function getDefault() { return ++counter }
function example (line 439) | function example(value = getDefault()) {
method add (line 466) | add(a, b) { return a + b }
method subtract (line 467) | subtract(a, b) { return a - b }
FILE: tests/async-javascript/callbacks/callbacks.dom.test.js
function handleClick (line 56) | function handleClick(event) {
function handleMouseOver (line 60) | function handleMouseOver(event) {
function handleClick (line 80) | function handleClick(event) {
FILE: tests/async-javascript/callbacks/callbacks.test.js
function greet (line 93) | function greet(name) {
function processUserInput (line 98) | function processUserInput(callback) {
function simulateAddEventListener (line 113) | function simulateAddEventListener(event, callback) {
function handleClick (line 118) | function handleClick() {
function fetchUserData (line 551) | function fetchUserData(userId, callback) {
function callback (line 602) | function callback(error, result) {
function divideAsync (line 621) | function divideAsync(a, b, callback) {
function processDataWrong (line 675) | function processDataWrong(data, callback) {
function processDataCorrect (line 687) | function processDataCorrect(data, callback) {
function getUser (line 722) | function getUser(userId, callback) {
function verifyPassword (line 729) | function verifyPassword(user, password, callback) {
function getProfile (line 736) | function getProfile(userId, callback) {
function getSettings (line 743) | function getSettings(userId, callback) {
function renderDashboard (line 750) | function renderDashboard(user, profile, settings, callback) {
function handleError (line 757) | function handleError(error) {
function getData (line 832) | function getData(callback) {
function processData (line 839) | function processData(data, callback) {
function saveData (line 846) | function saveData(processed, callback) {
function handleError (line 853) | function handleError(err) {
function handleData (line 859) | function handleData(err, data) {
function handleProcessed (line 864) | function handleProcessed(err, processed) {
function handleSaved (line 869) | function handleSaved(err) {
function validateUser (line 892) | function validateUser(user, callback) {
function saveUser (line 898) | function saveUser(user, callback) {
function processUser (line 905) | function processUser(user, callback) {
function getUser (line 937) | function getUser(email, callback) {
function verifyPassword (line 941) | function verifyPassword(user, password, callback) {
function authenticateUser (line 945) | function authenticateUser(credentials, callback) {
function getProfile (line 958) | function getProfile(userId, callback) {
function getSettings (line 962) | function getSettings(userId, callback) {
function loadUserProfile (line 966) | function loadUserProfile(userId, callback) {
function handleError (line 977) | function handleError(err) {
function renderDashboard (line 981) | function renderDashboard(user, profile, settings) {
function fetchDataWrong (line 1022) | function fetchDataWrong(url, callback) {
function getData (line 1044) | function getData(key, callback) {
function getData (line 1088) | function getData(key, callback) {
method greet (line 1270) | greet() {
method greet (line 1282) | greet() {
method greet (line 1294) | greet() {
function getUser (line 1355) | function getUser(userId, callback) {
function getProfile (line 1359) | function getProfile(userId, callback) {
function handleError (line 1363) | function handleError(err) {
function handleUser (line 1368) | function handleUser(err, user) {
function handleProfile (line 1373) | function handleProfile(err, profile) {
function once (line 1442) | function once(callback) {
FILE: tests/beyond/browser-storage/cookies/cookies.dom.test.js
function getCookie (line 101) | function getCookie(name) {
function parseCookies (line 131) | function parseCookies() {
function hasCookie (line 165) | function hasCookie(name) {
function setCookie (line 190) | function setCookie(name, value, options = {}) {
function setCookie (line 248) | function setCookie(name, value, options = {}) {
function deleteCookie (line 265) | function deleteCookie(name, options = {}) {
function getCookie (line 407) | function getCookie(name) {
function parseCookies (line 431) | function parseCookies() {
function getCookie (line 458) | function getCookie(name) {
function getCookie (line 493) | function getCookie(name) {
function getCookie (line 514) | function getCookie(name) {
function getCookie (line 532) | function getCookie(name) {
FILE: tests/beyond/browser-storage/cookies/cookies.test.js
function getCookie (line 70) | function getCookie(cookieString, name) {
function parseCookies (line 114) | function parseCookies(cookieString) {
function hasCookie (line 165) | function hasCookie(cookieString, name) {
function buildCookieString (line 204) | function buildCookieString(name, value, options = {}) {
function pathMatches (line 367) | function pathMatches(cookiePath, requestPath) {
function getCookie (line 557) | function getCookie(cookieString, name) {
function parseCookies (line 574) | function parseCookies(cookieString) {
FILE: tests/beyond/browser-storage/indexeddb/indexeddb.test.js
function promisifyRequest (line 13) | function promisifyRequest(request) {
function promisifyRequest (line 37) | function promisifyRequest(request) {
function openDatabase (line 64) | function openDatabase(name, version, onUpgrade) {
class UserDatabase (line 181) | class UserDatabase {
method constructor (line 182) | constructor() {
method add (line 186) | async add(user) {
method get (line 194) | async get(id) {
method getByEmail (line 198) | async getByEmail(email) {
method update (line 205) | async update(user) {
method delete (line 210) | async delete(id) {
method getAll (line 214) | async getAll() {
method constructor (line 234) | constructor() {
method add (line 238) | async add(user) {
method get (line 246) | async get(id) {
method getByEmail (line 250) | async getByEmail(email) {
method update (line 257) | async update(user) {
method delete (line 262) | async delete(id) {
method getAll (line 266) | async getAll() {
class UserDatabase (line 233) | class UserDatabase {
method constructor (line 182) | constructor() {
method add (line 186) | async add(user) {
method get (line 194) | async get(id) {
method getByEmail (line 198) | async getByEmail(email) {
method update (line 205) | async update(user) {
method delete (line 210) | async delete(id) {
method getAll (line 214) | async getAll() {
method constructor (line 234) | constructor() {
method add (line 238) | async add(user) {
method get (line 246) | async get(id) {
method getByEmail (line 250) | async getByEmail(email) {
method update (line 257) | async update(user) {
method delete (line 262) | async delete(id) {
method getAll (line 266) | async getAll() {
function queueAction (line 306) | async function queueAction(action) {
function runMigrations (line 440) | function runMigrations(db, oldVersion) {
function add (line 488) | function add(key, value) {
function put (line 505) | function put(key, value) {
function generateKey (line 539) | function generateKey() {
function addRecord (line 552) | function addRecord(record) {
function openCursor (line 588) | function openCursor() {
FILE: tests/beyond/browser-storage/localstorage-sessionstorage/localstorage-sessionstorage.dom.test.js
function storageAvailable (line 304) | function storageAvailable(type) {
function storageAvailable (line 326) | function storageAvailable(type) {
FILE: tests/beyond/browser-storage/localstorage-sessionstorage/localstorage-sessionstorage.test.js
method set (line 232) | set(key, value) {
method get (line 241) | get(key, defaultValue = null) {
method remove (line 250) | remove(key) {
method clear (line 254) | clear() {
function storageAvailable (line 341) | function storageAvailable(type) {
function setTheme (line 369) | function setTheme(theme) {
function loadTheme (line 373) | function loadTheme() {
function toggleTheme (line 378) | function toggleTheme() {
function saveFormProgress (line 409) | function saveFormProgress(step, data) {
function loadFormProgress (line 416) | function loadFormProgress() {
function clearFormProgress (line 420) | function clearFormProgress() {
function addToRecentlyViewed (line 445) | function addToRecentlyViewed(item, maxItems = 10) {
function getRecentlyViewed (line 453) | function getRecentlyViewed() {
function storageAvailable (line 645) | function storageAvailable(type) {
function safeSetItem (line 666) | function safeSetItem(key, value) {
FILE: tests/beyond/data-handling/json-deep-dive/json-deep-dive.test.js
method toJSON (line 274) | toJSON() {
class User (line 295) | class User {
method constructor (line 296) | constructor(name, email, password) {
method toJSON (line 303) | toJSON() {
method toJSON (line 325) | toJSON(key) {
function safeStringify (line 354) | function safeStringify(obj) {
function safeStringify (line 378) | function safeStringify(obj) {
function replacer (line 438) | function replacer(key, value) {
function reviver (line 454) | function reviver(key, value) {
function bigIntReplacer (line 489) | function bigIntReplacer(key, value) {
function bigIntReviver (line 496) | function bigIntReviver(key, value) {
function safeStringify (line 530) | function safeStringify(obj, sensitiveKeys = ['password', 'token', 'secre...
method toJSON (line 599) | toJSON() {
FILE: tests/beyond/data-handling/requestanimationframe/requestanimationframe.test.js
function calculateProgress (line 108) | function calculateProgress(timestamp) {
function calculatePosition (line 122) | function calculatePosition(progress) {
function calculateMovement (line 137) | function calculateMovement(currentTime) {
function applyEasing (line 178) | function applyEasing(linearProgress, easingFn) {
function getProgress (line 191) | function getProgress(currentTime) {
class Animation (line 204) | class Animation {
method constructor (line 205) | constructor({ duration, timing, draw }) {
method start (line 214) | start() {
method pause (line 220) | pause() {
method getProgress (line 224) | getProgress() {
function animateWrong (line 291) | function animateWrong(time) {
function animateCorrect (line 304) | function animateCorrect(time) {
FILE: tests/beyond/events/custom-events/custom-events.dom.test.js
function addItem (line 288) | function addItem(item) {
FILE: tests/beyond/events/event-delegation/event-delegation.test.js
function addTodo (line 262) | function addTodo(text) {
method save (line 297) | save() { executedActions.push('save') }
method load (line 298) | load() { executedActions.push('load') }
method delete (line 299) | delete() { executedActions.push('delete') }
FILE: tests/beyond/language-mechanics/hoisting/hoisting.test.js
function example (line 6) | function example() {
function example (line 19) | function example() {
function example (line 30) | function example() {
function add (line 121) | function add(a, b) {
function isEven (line 130) | function isEven(n) {
function isOdd (line 135) | function isOdd(n) {
function example (line 148) | function example() {
class Animal (line 240) | class Animal {
method constructor (line 241) | constructor(name) {
function example (line 262) | function example() {
function example (line 295) | function example() {
function example (line 314) | function example() {
function example (line 331) | function example() {
function example (line 375) | function example() {
function example (line 407) | function example() {
function example (line 419) | function example() {
function test (line 431) | function test() {
function outer (line 451) | function outer() {
function example (line 489) | function example(a) {
function test (line 503) | function test(a = 1, b = a + 1) {
function createCounter (line 526) | function createCounter() {
function processUser (line 560) | function processUser(user) {
function example (line 592) | function example() {
function processUser (line 617) | function processUser(user) {
function calculateTotal (line 677) | function calculateTotal(items) {
function bad (line 703) | function bad() {
function good (line 716) | function good() {
FILE: tests/beyond/language-mechanics/strict-mode/strict-mode.test.js
function sloppyBehavior (line 13) | function sloppyBehavior() {
function strictBehavior (line 34) | function strictBehavior() {
function calculateTotalStrict (line 49) | function calculateTotalStrict(price, taxRate) {
method value (line 89) | get value() {
function getThis (line 200) | function getThis() {
method getValue (line 213) | getValue() {
function greet (line 225) | function greet() {
function getThisType (line 245) | function getThisType() {
function createObj (line 264) | function createObj() {
function add (line 297) | function add(a, b, c) {
function simulateSloppyDuplicate (line 308) | function simulateSloppyDuplicate(firstA, secondA, c) {
function testArguments (line 340) | function testArguments(a) {
function testCallee (line 369) | function testCallee() {
class MyClass (line 438) | class MyClass {
method staticMethod (line 439) | static staticMethod() {
function processOrder (line 459) | function processOrder(order) {
class Counter (line 481) | class Counter {
method increment (line 484) | increment() {
method getCount (line 488) | getCount() {
FILE: tests/beyond/language-mechanics/temporal-dead-zone/temporal-dead-zone.test.js
function example (line 39) | function example() {
function example (line 52) | function example() {
function test (line 152) | function test(a = 1, b = a + 1) {
function test (line 186) | function test(a = outer, b = a + 1) {
class MyClass (line 287) | class MyClass {
method constructor (line 288) | constructor() {
class Counter (line 306) | class Counter {
method constructor (line 309) | constructor() {
method getCount (line 313) | static getCount() {
class Example (line 328) | class Example {
class Example (line 338) | class Example {
function example (line 362) | function example() {
function hoistedFn (line 375) | function hoistedFn() {
function example (line 419) | function example() {
function createAccessor (line 447) | function createAccessor() {
function buggyWithVar (line 469) | function buggyWithVar() {
FILE: tests/beyond/memory-performance/debouncing-throttling/debouncing-throttling.test.js
function debounce (line 19) | function debounce(fn, delay) {
function throttle (line 108) | function throttle(fn, interval) {
function debounceLeading (line 184) | function debounceLeading(fn, delay) {
function debounce (line 245) | function debounce(fn, delay, options = {}) {
function debounce (line 359) | function debounce(fn, delay) {
function throttle (line 367) | function throttle(fn, interval) {
function debounce (line 412) | function debounce(fn, delay) {
function debounce (line 459) | function debounce(fn, delay) {
function throttle (line 498) | function throttle(fn, interval) {
function debounceLeading (line 529) | function debounceLeading(fn, delay) {
function throttleWithRAF (line 566) | function throttleWithRAF(fn) {
FILE: tests/beyond/memory-performance/garbage-collection/garbage-collection.test.js
function createFamily (line 27) | function createFamily() {
function createCycle (line 84) | function createCycle() {
function processData (line 141) | function processData() {
function longRunningTask (line 158) | function longRunningTask() {
function createBetterHandler (line 184) | function createBetterHandler() {
function createHandler (line 201) | function createHandler() {
function expensiveComputation (line 288) | function expensiveComputation(obj) {
function getCached (line 292) | function getCached(obj) {
function getCached (line 377) | function getCached(key) {
function createCycle (line 437) | function createCycle() {
FILE: tests/beyond/memory-performance/memoization/memoization.test.js
function memoizedDouble (line 12) | function memoizedDouble(n) {
function memoize (line 48) | function memoize(fn) {
function memoize (line 82) | function memoize(fn) {
function memoize (line 118) | function memoize(fn) {
function memoize (line 150) | function memoize(fn) {
function memoize (line 182) | function memoize(fn) {
function fibonacci (line 201) | function fibonacci(n) {
function memoize (line 256) | function memoize(fn) {
function memoize (line 345) | function memoize(fn) {
function memoizeWithWeakMap (line 397) | function memoizeWithWeakMap(fn) {
function memoizeHybrid (line 435) | function memoizeHybrid(fn) {
function memoize (line 482) | function memoize(fn) {
function memoizeCommutative (line 523) | function memoizeCommutative(fn) {
function badMemoize (line 552) | function badMemoize(fn) {
function goodMemoize (line 575) | function goodMemoize(fn) {
function memoizeLRU (line 628) | function memoizeLRU(fn, maxSize = 3) {
FILE: tests/beyond/memory-performance/memory-management/memory-management.test.js
function calculateTotal (line 110) | function calculateTotal(price, quantity) {
function marry (line 149) | function marry(man, woman) {
function processData (line 220) | function processData() {
function createHandler (line 234) | function createHandler() {
function createCounter (line 248) | function createCounter() {
class LRUCache (line 267) | class LRUCache {
method constructor (line 268) | constructor(maxSize = 100) {
method get (line 273) | get(key) {
method set (line 283) | set(key, value) {
method size (line 293) | get size() {
function getData (line 314) | function getData(obj) {
class ParticlePool (line 336) | class ParticlePool {
method constructor (line 337) | constructor(size) {
method acquire (line 343) | acquire() {
method release (line 351) | release(particle) {
method getActiveCount (line 359) | getActiveCount() {
function processData (line 452) | function processData() {
FILE: tests/beyond/modern-syntax-operators/computed-property-names/computed-property-names.test.js
function getKey (line 82) | function getKey(type) {
method toString (line 160) | toString() {
function createUserES5 (line 186) | function createUserES5(role, name) {
method [Symbol.iterator] (line 253) | [Symbol.iterator]() {
method [Symbol.toPrimitive] (line 293) | [Symbol.toPrimitive](hint) {
class BankAccount (line 314) | class BankAccount {
method constructor (line 315) | constructor(initial) {
method deposit (line 319) | deposit(amount) {
method getBalance (line 323) | getBalance() {
method [action] (line 349) | [action]() {
method [`${action}Loudly`] (line 352) | [`${action}Loudly`]() {
method [iteratorName] (line 368) | *[iteratorName]() {
method [fetchName] (line 382) | async [fetchName]() {
method [prop] (line 401) | get [prop]() {
method [prop] (line 405) | set [prop](value) {
method [Symbol.for('value')] (line 425) | get [Symbol.for('value')]() {
method [Symbol.for('value')] (line 429) | set [Symbol.for('value')](v) {
function handleInputChange (line 449) | function handleInputChange(fieldName, value) {
function updateField (line 467) | function updateField(state, field, value) {
function createTranslations (line 485) | function createTranslations(locale, translations) {
function normalizeResponse (line 499) | function normalizeResponse(entityType, items) {
function badKey (line 535) | function badKey() {
FILE: tests/beyond/modern-syntax-operators/tagged-template-literals/tagged-template-literals.test.js
function highlight (line 12) | function highlight(strings, ...values) {
function myTag (line 36) | function myTag(strings, ...values) {
function inspect (line 59) | function inspect(strings, ...values) {
function countParts (line 79) | function countParts(strings, ...values) {
function interleave (line 92) | function interleave(strings, ...values) {
function simple (line 109) | function simple(strings, ...values) {
function showBoth (line 135) | function showBoth(strings) {
function escapeHTML (line 217) | function escapeHTML(str) {
function html (line 226) | function html(strings, ...values) {
function highlight (line 244) | function highlight(strings, ...values) {
function currency (line 262) | function currency(strings, ...values) {
function debug (line 289) | function debug(strings, ...values) {
function toArray (line 320) | function toArray(strings, ...values) {
function toObject (line 329) | function toObject(strings, ...values) {
function template (line 353) | function template(strings, ...keys) {
function identity (line 373) | function identity(strings, ...values) {
function sql (line 393) | function sql(strings, ...values) {
function css (line 422) | function css(strings, ...values) {
function broken (line 451) | function broken(strings, ...values) {
function fixed (line 464) | function fixed(strings, ...values) {
function tag (line 489) | function tag(strings, ...values) {
function count (line 504) | function count(strings, ...values) {
function compare (line 518) | function compare(strings) {
function values (line 538) | function values(strings, ...vals) {
function sql (line 543) | function sql(strings, ...vals) {
function escapeHTML (line 552) | function escapeHTML(str) {
function safeHtml (line 561) | function safeHtml(strings, ...values) {
function tag (line 584) | function tag(strings, ...values) {
function tag (line 594) | function tag(strings, ...values) {
function outer (line 604) | function outer(strings, ...values) {
function inner (line 611) | function inner(strings, ...values) {
function tag (line 622) | function tag(strings, ...values) {
function tag (line 634) | function tag(strings, ...values) {
function tag (line 651) | function tag(strings, ...values) {
function evaluateLiteral (line 656) | function evaluateLiteral() {
FILE: tests/beyond/objects-properties/getters-setters/getters-setters.test.js
method fullName (line 10) | get fullName() {
method fullName (line 22) | get fullName() {
method value (line 35) | get value() { return 42 }
method [propName] (line 46) | get [propName]() {
method area (line 58) | get area() { return this.width * this.height }
method perimeter (line 59) | get perimeter() { return 2 * (this.width + this.height) }
method value (line 71) | set value(v) {
method balance (line 83) | set balance(value) {
method name (line 102) | set name(value) {
method action (line 114) | set action(value) {
method [propName] (line 129) | set [propName](value) {
class Circle (line 141) | class Circle {
method constructor (line 142) | constructor(radius) {
method area (line 145) | get area() {
class Temperature (line 155) | class Temperature {
method constructor (line 156) | constructor(celsius) {
method fahrenheit (line 159) | get fahrenheit() {
class Config (line 169) | class Config {
method version (line 171) | static get version() {
method debug (line 230) | static set debug(value) {
method debug (line 233) | static get debug() {
class Animal (line 180) | class Animal {
method constructor (line 181) | constructor(name) {
method name (line 184) | get name() {
method constructor (line 247) | constructor() {
method name (line 250) | set name(value) {
method name (line 253) | get name() {
class Dog (line 189) | class Dog extends Animal {
method constructor (line 190) | constructor(name, breed) {
method name (line 259) | set name(value) {
method name (line 263) | get name() {
class User (line 203) | class User {
method constructor (line 204) | constructor() {
method age (line 207) | set age(value) {
method age (line 213) | get age() {
method name (line 460) | get name() { return this.#name }
method name (line 461) | set name(value) { this.#name = value }
class Config (line 228) | class Config {
method version (line 171) | static get version() {
method debug (line 230) | static set debug(value) {
method debug (line 233) | static get debug() {
class Animal (line 246) | class Animal {
method constructor (line 181) | constructor(name) {
method name (line 184) | get name() {
method constructor (line 247) | constructor() {
method name (line 250) | set name(value) {
method name (line 253) | get name() {
class Dog (line 258) | class Dog extends Animal {
method constructor (line 190) | constructor(name, breed) {
method name (line 259) | set name(value) {
method name (line 263) | get name() {
method get (line 279) | get() { return this._value * 2 }
method set (line 290) | set(v) { this._value = v }
method get (line 302) | get() { return this._name }
method set (line 303) | set(value) { this._name = value.trim() }
method get (line 316) | get() { return 42 }
method set (line 325) | set(v) { }
method prop (line 332) | get prop() { return "value" }
method prop (line 333) | set prop(v) { }
method readOnly (line 350) | get readOnly() { return "constant" }
method value (line 360) | get value() { return 42 }
method constant (line 370) | get constant() { return "immutable" }
method area (line 385) | get area() {
method circumference (line 388) | get circumference() {
method value (line 402) | set value(v) {
method log (line 415) | set log(message) {
method increment (line 432) | set increment(_) {
method name (line 449) | get name() { return this._name }
method name (line 450) | set name(value) { this._name = value }
class User (line 458) | class User {
method constructor (line 204) | constructor() {
method age (line 207) | set age(value) {
method age (line 213) | get age() {
method name (line 460) | get name() { return this.#name }
method name (line 461) | set name(value) { this.#name = value }
function createCounter (line 470) | function createCounter() {
method value (line 488) | get value() { return this._value }
class Parent (line 496) | class Parent {
method greeting (line 497) | get greeting() { return "Hello" }
method value (line 513) | get value() { return 10 }
class Child (line 500) | class Child extends Parent {
method greeting (line 501) | get greeting() { return "Hi" }
method value (line 517) | get value() { return super.value * 2 }
class Parent (line 512) | class Parent {
method greeting (line 497) | get greeting() { return "Hello" }
method value (line 513) | get value() { return 10 }
class Child (line 516) | class Child extends Parent {
method greeting (line 501) | get greeting() { return "Hi" }
method value (line 517) | get value() { return super.value * 2 }
method value (line 526) | get value() { return "parent" }
method get (line 531) | get() { return "child" }
method b (line 546) | get b() { return 2 }
method b (line 556) | set b(v) { }
method b (line 566) | get b() { return 2 }
method b (line 581) | get b() { return 2 }
method get (line 591) | get() { return "secret" }
method value (line 604) | get value() {
method expensive (line 621) | get expensive() {
method lazy (line 641) | get lazy() {
method value (line 667) | get value() {
method value (line 670) | set value(v) {
method [sym] (line 684) | get [sym]() { return this._secret }
method doubled (line 694) | get doubled() {
method value (line 706) | get value() {
FILE: tests/beyond/objects-properties/object-methods/object-methods.test.js
function createClient (line 505) | function createClient(userOptions = {}) {
function processData (line 524) | function processData(data) {
FILE: tests/beyond/objects-properties/property-descriptors/property-descriptors.test.js
method get (line 375) | get() {
method set (line 378) | set(value) {
method get (line 395) | get() {
method get (line 415) | get() { return 42 }
method get (line 424) | get() { return 42 }
method get (line 433) | get() { return 'hello' }
method set (line 434) | set(v) { }
method get (line 644) | get() {
method get (line 661) | get() {
method set (line 664) | set(value) {
FILE: tests/beyond/objects-properties/proxy-reflect/proxy-reflect.test.js
method get (line 15) | get(target, prop) {
method get (line 46) | get(target, prop, receiver) {
method get (line 62) | get(target, prop) {
function createNegativeArray (line 74) | function createNegativeArray(arr) {
method set (line 103) | set(target, prop, value, receiver) {
method set (line 120) | set(target, prop, value) {
method set (line 156) | set() {
method has (line 177) | has(target, prop) {
method deleteProperty (line 200) | deleteProperty(target, prop) {
function sum (line 226) | function sum(a, b) {
method apply (line 232) | apply(target, thisArg, args) {
class User (line 245) | class User {
method constructor (line 246) | constructor(name) {
method construct (line 253) | construct(target, args) {
method ownKeys (line 280) | ownKeys(target) {
method name (line 321) | get name() {
method get (line 327) | get(target, prop, receiver) {
function observable (line 346) | function observable(target, onChange) {
method get (line 373) | get(target, prop) {
method set (line 379) | set(target, prop, value) {
method ownKeys (line 385) | ownKeys(target) {
function createLogged (line 404) | function createLogged(target, name = 'Object') {
method get (line 457) | get(target, prop, receiver) {
method set (line 488) | set() {
FILE: tests/beyond/objects-properties/weakmap-weakset/weakmap-weakset.test.js
class User (line 120) | class User {
method constructor (line 121) | constructor(name, password) {
method checkPassword (line 129) | checkPassword(input) {
method getLoginAttempts (line 141) | getLoginAttempts() {
method constructor (line 164) | constructor(name, password) {
method checkPassword (line 169) | checkPassword(input) {
method getLoginAttempts (line 179) | getLoginAttempts() {
method constructor (line 449) | constructor(name) {
method isValid (line 454) | static isValid(obj) {
class User (line 163) | class User {
method constructor (line 121) | constructor(name, password) {
method checkPassword (line 129) | checkPassword(input) {
method getLoginAttempts (line 141) | getLoginAttempts() {
method constructor (line 164) | constructor(name, password) {
method checkPassword (line 169) | checkPassword(input) {
method getLoginAttempts (line 179) | getLoginAttempts() {
method constructor (line 449) | constructor(name) {
method isValid (line 454) | static isValid(obj) {
function expensiveOperation (line 203) | function expensiveOperation(obj) {
function memoizeForObjects (line 232) | function memoizeForObjects(fn) {
function processOnce (line 347) | function processOnce(obj) {
function deepClone (line 371) | function deepClone(obj, seen = new WeakSet()) {
function traverseGraph (line 411) | function traverseGraph(node, visitor, visited = new WeakSet()) {
class User (line 448) | class User {
method constructor (line 121) | constructor(name, password) {
method checkPassword (line 129) | checkPassword(input) {
method getLoginAttempts (line 141) | getLoginAttempts() {
method constructor (line 164) | constructor(name, password) {
method checkPassword (line 169) | checkPassword(input) {
method getLoginAttempts (line 179) | getLoginAttempts() {
method constructor (line 449) | constructor(name) {
method isValid (line 454) | static isValid(obj) {
FILE: tests/beyond/observer-apis/intersection-observer/intersection-observer.dom.test.js
class MockIntersectionObserver (line 14) | class MockIntersectionObserver {
method constructor (line 15) | constructor(callback, options = {}) {
method observe (line 22) | observe(element) {
method unobserve (line 35) | unobserve(element) {
method disconnect (line 42) | disconnect() {
method takeRecords (line 46) | takeRecords() {
method triggerIntersection (line 50) | triggerIntersection(entries) {
method clearInstances (line 55) | static clearInstances() {
FILE: tests/beyond/observer-apis/intersection-observer/intersection-observer.test.js
method remove (line 105) | remove(cls) { this.removed.push(cls) }
method add (line 106) | add(cls) { this.added.push(cls) }
function lazyLoadImage (line 111) | function lazyLoadImage(img) {
function loadMoreContent (line 136) | async function loadMoreContent() {
function handleIntersection (line 164) | function handleIntersection() {
function createScrollAnimator (line 179) | function createScrollAnimator(options = {}) {
function setupObserver (line 210) | function setupObserver() {
function handleIntersection (line 236) | function handleIntersection(entry, observer) {
function badPattern (line 325) | function badPattern() {
function goodPattern (line 333) | function goodPattern() {
function handleEntries (line 349) | function handleEntries(entries) {
function hasIntersectionObserver (line 380) | function hasIntersectionObserver(win) {
FILE: tests/beyond/observer-apis/mutation-observer/mutation-observer.dom.test.js
function loadImage (line 539) | function loadImage(img) {
FILE: tests/beyond/observer-apis/performance-observer/performance-observer.test.js
function simulateEntry (line 15) | function simulateEntry(entry) {
class MockPerformanceObserver (line 33) | class MockPerformanceObserver {
method constructor (line 34) | constructor(callback) {
method observe (line 39) | observe(options) {
method disconnect (line 55) | disconnect() {
method takeRecords (line 62) | takeRecords() {
class PerformanceMonitor (line 648) | class PerformanceMonitor {
method constructor (line 649) | constructor() {
method observe (line 654) | observe(type, callback) {
method disconnect (line 662) | disconnect() {
FILE: tests/beyond/observer-apis/resize-observer/resize-observer.test.js
function calculateFontSize (line 142) | function calculateFontSize(width) {
function getBreakpointClass (line 194) | function getBreakpointClass(width) {
function shouldAutoScroll (line 212) | function shouldAutoScroll(scrollTop, scrollHeight, clientHeight) {
function calculateHeight (line 230) | function calculateHeight(width, ratio) {
function handleResize (line 257) | function handleResize(target, currentWidth) {
function safeResizeHandler (line 291) | function safeResizeHandler(entry) {
method observe (line 323) | observe(el) { this.observedTargets.push(el) }
function debounced (line 337) | function debounced(callback, delay) {
class ResizableComponent (line 366) | class ResizableComponent {
method constructor (line 367) | constructor() {
method destroy (line 374) | destroy() {
function hasResizeObserver (line 402) | function hasResizeObserver(win) {
function attachObserver (line 458) | function attachObserver(element) {
function handleResize (line 499) | function handleResize(entries) {
function mockObserve (line 551) | function mockObserve(callback) {
FILE: tests/beyond/type-system/javascript-type-nuances/javascript-type-nuances.test.js
function greet (line 56) | function greet() {
function sayHi (line 64) | function sayHi(name) {
function createUser (line 102) | function createUser(name, email = null) {
function getType (line 366) | function getType(value) {
class Animal (line 381) | class Animal {}
method speak (line 409) | speak() { return 'Some sound' }
class Dog (line 382) | class Dog extends Animal {}
method speak (line 413) | speak() { return 'Woof!' }
class Animal (line 408) | class Animal {
method speak (line 409) | speak() { return 'Some sound' }
class Dog (line 412) | class Dog extends Animal {
method speak (line 413) | speak() { return 'Woof!' }
class Duck (line 426) | class Duck {
method [Symbol.hasInstance] (line 427) | static [Symbol.hasInstance](instance) {
class ValidUser (line 441) | class ValidUser {
method [Symbol.hasInstance] (line 442) | static [Symbol.hasInstance](obj) {
method [Symbol.iterator] (line 540) | [Symbol.iterator]() {
class MyClass (line 560) | class MyClass {
method [Symbol.toStringTag] (line 561) | get [Symbol.toStringTag]() {
method [Symbol.toPrimitive] (line 574) | [Symbol.toPrimitive](hint) {
function factorial (line 702) | function factorial(n) {
FILE: tests/functional-programming/currying-composition/currying-composition.test.js
function curriedAdd (line 39) | function curriedAdd(a) {
function curry (line 78) | function curry(fn) {
function sum (line 546) | function sum(a) {
function sum (line 563) | function sum(a) {
function withRest (line 611) | function withRest(...args) {
function withDefault (line 615) | function withDefault(a, b = 2) {
FILE: tests/functional-programming/higher-order-functions/higher-order-functions.test.js
function doTwice (line 8) | function doTwice(action) {
function repeat (line 21) | function repeat(times, action) {
function calculate (line 33) | function calculate(numbers, operation) {
function unless (line 55) | function unless(condition, action) {
function calculate (line 69) | function calculate(radii, formula) {
function greaterThan (line 110) | function greaterThan(n) {
function multiplier (line 127) | function multiplier(factor) {
function noisy (line 145) | function noisy(fn) {
function noisy (line 167) | function noisy(fn) {
function createGreeter (line 187) | function createGreeter(greeting) {
function multiplier (line 202) | function multiplier(factor) {
function createValidator (line 215) | function createValidator(min, max) {
function createFormatter (line 232) | function createFormatter(prefix, suffix) {
function partial (line 248) | function partial(fn, ...presetArgs) {
function greet (line 254) | function greet(greeting, punctuation, name) {
function createValidator (line 267) | function createValidator(min, max) {
function createCounter (line 286) | function createCounter(start = 0) {
function createBankAccount (line 309) | function createBankAccount(initialBalance) {
method greet (line 369) | greet() {
function callLater (line 379) | function callLater(fn) {
function callWith5 (line 422) | function callWith5(fn) {
function createAdder (line 432) | function createAdder(x) {
FILE: tests/functional-programming/pure-functions/pure-functions.test.js
function add (line 7) | function add(a, b) {
function calculateTotalImpure (line 28) | function calculateTotalImpure(price) {
function calculateTotalPure (line 39) | function calculateTotalPure(price, rate) {
function randomDouble (line 50) | function randomDouble(x) {
function getGreeting (line 66) | function getGreeting(name) {
function getGreetingPure (line 77) | function getGreetingPure(name, hour) {
function addToTotal (line 94) | function addToTotal(x) {
function addItemImpure (line 109) | function addItemImpure(cart, item) {
function addItemPure (line 123) | function addItemPure(cart, item) {
function incrementImpure (line 139) | function incrementImpure() {
function incrementPure (line 149) | function incrementPure(value) {
function processUserImpure (line 163) | function processUserImpure(user) {
function processUserPure (line 177) | function processUserPure(user, loginTime) {
function double (line 196) | function double(x) {
function square (line 200) | function square(x) {
function hypotenuse (line 204) | function hypotenuse(a, b) {
function formatName (line 215) | function formatName(name) {
function greet (line 219) | function greet(name, greeting) {
function isValidEmail (line 229) | function isValidEmail(email) {
function isPositive (line 233) | function isPositive(num) {
function updateAge (line 249) | function updateAge(user, newAge) {
function addDiscount (line 263) | function addDiscount(product, discount) {
function removePassword (line 276) | function removePassword(user) {
function addTodo (line 294) | function addTodo(todos, newTodo) {
function removeItem (line 308) | function removeItem(arr, index) {
function completeTodo (line 324) | function completeTodo(todos, id) {
function sortImpure (line 339) | function sortImpure(arr) {
function sortPure (line 344) | function sortPure(arr) {
function updateCity (line 409) | function updateCity(user, newCity) {
function updateCitySpread (line 416) | function updateCitySpread(user, newCity) {
function processUserBad (line 438) | function processUserBad(user) {
function processUserGood (line 445) | function processUserGood(user) {
function calculateBad (line 467) | function calculateBad(value) {
function calculateGood (line 472) | function calculateGood(value, multiplier) {
function calculateTotal (line 500) | function calculateTotal(items, taxRate) {
function getActiveUserNames (line 526) | function getActiveUserNames(users) {
function slugify (line 547) | function slugify(title) {
function validateUser (line 556) | function validateUser(user) {
function add (line 591) | function add(a, b) {
function expensiveCalculation (line 605) | function expensiveCalculation(n) {
function memoize (line 615) | function memoize(fn) {
function fibonacci (line 644) | function fibonacci(n) {
function multiply (line 667) | function multiply(a, b) {
function greetImpure (line 679) | function greetImpure(name) {
function greetPure (line 689) | function greetPure(name, time) {
function calculateTax (line 702) | function calculateTax(amount, rate) {
function formatPrice (line 714) | function formatPrice(cents, currency = 'USD') {
function addToCartBad (line 731) | function addToCartBad(cart, item) {
function addToCartGood (line 742) | function addToCartGood(cart, item) {
function updateCityClone (line 760) | function updateCityClone(user, newCity) {
function updateCitySpread (line 771) | function updateCitySpread(user, newCity) {
function add (line 790) | function add(a, b) {
function formatName (line 794) | function formatName(name) {
function isValidEmail (line 798) | function isValidEmail(email) {
FILE: tests/functional-programming/recursion/recursion.test.js
function countdown (line 7) | function countdown(n) {
function countdown (line 19) | function countdown(n, output = []) {
function infiniteRecursion (line 35) | function infiniteRecursion(n) {
function sumTo (line 44) | function sumTo(n) {
function factorial (line 55) | function factorial(n) {
function fibonacci (line 78) | function fibonacci(n, memo = {}) {
function sumTo (line 110) | function sumTo(n) {
function power (line 128) | function power(x, n) {
function powerFast (line 150) | function powerFast(x, n) {
function powerNaive (line 187) | function powerNaive(x, n) {
function reverse (line 202) | function reverse(str) {
function flatten (line 222) | function flatten(arr) {
function findAllValues (line 250) | function findAllValues(obj, key) {
function findAllCounts (line 283) | function findAllCounts(obj) {
function sumList (line 349) | function sumList(node) {
function listLength (line 354) | function listLength(node) {
function collectReverse (line 366) | function collectReverse(node, results = []) {
function countNodes (line 419) | function countNodes(node) {
function sumTree (line 424) | function sumTree(node) {
function getTotalSize (line 459) | function getTotalSize(node) {
function walkDOM (line 551) | function walkDOM(node, callback) {
function badRecursion (line 657) | function badRecursion(n) {
function withReturn (line 668) | function withReturn(n) {
function withoutReturn (line 673) | function withoutReturn(n) {
function fibNaive (line 686) | function fibNaive(n) {
function fibMemo (line 692) | function fibMemo(n, memo = {}) {
function factorialNonTail (line 710) | function factorialNonTail(n) {
function factorialTail (line 716) | function factorialTail(n, acc = 1) {
function fibonacci (line 731) | function fibonacci(n) {
function sumTree (line 743) | function sumTree(node) {
function isEven (line 759) | function isEven(n) {
function isOdd (line 764) | function isOdd(n) {
function factorialRecursive (line 779) | function factorialRecursive(n) {
function factorialIterative (line 785) | function factorialIterative(n) {
function sumTreeRecursive (line 816) | function sumTreeRecursive(node) {
function sumTreeIterative (line 822) | function sumTreeIterative(root) {
function arrayLength (line 901) | function arrayLength(arr) {
FILE: tests/functions-execution/async-await/async-await.test.js
function getValue (line 12) | async function getValue() {
function getValue (line 23) | async function getValue() {
function failingFunction (line 34) | async function failingFunction() {
function getPromise (line 43) | async function getPromise() {
method fetchData (line 66) | async fetchData() {
class DataService (line 76) | class DataService {
method getData (line 77) | async getData() {
function example (line 95) | async function example() {
function example (line 107) | async function example() {
function example (line 117) | async function example() {
method then (line 128) | then(resolve) {
function example (line 133) | async function example() {
function slowOperation (line 144) | async function slowOperation() {
function example (line 181) | async function example() {
function asyncFn (line 213) | async function asyncFn() {
function multipleAwaits (line 234) | async function multipleAwaits() {
function fetchData (line 262) | async function fetchData() {
function mightFail (line 275) | async function mightFail(shouldFail) {
function withFinally (line 290) | async function withFinally(shouldFail) {
function swallowsError (line 313) | async function swallowsError() {
function rethrowsError (line 328) | async function rethrowsError() {
function inner (line 341) | async function inner() {
function outer (line 345) | async function outer() {
function sequential (line 377) | async function sequential() {
function parallel (line 405) | async function parallel() {
function withoutAwait (line 469) | async function withoutAwait() {
function withAwait (line 474) | async function withAwait() {
function wrongWay (line 493) | async function wrongWay() {
function rightWay (line 518) | async function rightWay() {
function parallelWay (line 535) | async function parallelWay() {
function riskyOperation (line 555) | async function riskyOperation() {
function flakyOperation (line 581) | async function flakyOperation() {
function withRetry (line 589) | async function withRetry(operation, retries = 3, backoff = 100) {
function withTimeout (line 620) | async function withTimeout(promise, ms) {
function fetchWithCancellation (line 643) | async function fetchWithCancellation(signal) {
function callbackApi (line 665) | function callbackApi(value, callback) {
function asyncApi (line 676) | function asyncApi(value) {
function test (line 707) | async function test() {
function delay (line 730) | function delay(ms) {
function versionA (line 735) | async function versionA() {
function versionB (line 743) | async function versionB() {
function processItems (line 769) | async function processItems() {
function unnecessaryAwait (line 800) | async function unnecessaryAwait() {
function noAwait (line 805) | async function noAwait() {
function test (line 823) | async function test() {
function getData (line 854) | async function getData() {
function failingFn (line 863) | async function failingFn() {
function step1 (line 872) | async function step1() {
function step2 (line 876) | function step2(prev) {
function step3 (line 880) | async function step3(prev) {
function fast (line 894) | async function fast() {
function slow (line 899) | async function slow() {
function returnsNothing (line 920) | async function returnsNothing() {
function returnsNull (line 930) | async function returnsNull() {
function outer (line 939) | async function outer() {
function conditionalAwait (line 958) | async function conditionalAwait(condition) {
function withTryCatchFinally (line 973) | async function withTryCatchFinally() {
function loopWithAwait (line 1003) | async function loopWithAwait() {
function subtleBug (line 1017) | async function subtleBug() {
function fixedVersion (line 1030) | async function fixedVersion() {
FILE: tests/functions-execution/event-loop/event-loop.test.js
function multiply (line 23) | function multiply(a, b) {
function square (line 27) | function square(n) {
function printSquare (line 31) | function printSquare(n) {
function run (line 171) | function run() {
function handleInput (line 210) | function handleInput(value) {
function handleInput (line 241) | function handleInput(value) {
function slowFetch (line 278) | async function slowFetch() {
function slowFetch (line 319) | async function slowFetch() {
function poll (line 327) | async function poll() {
function preciseInterval (line 601) | function preciseInterval(callback, delay) {
function recursiveTimeout (line 625) | function recursiveTimeout() {
function foo (line 653) | async function foo() {
function asyncFn (line 676) | async function asyncFn() {
function multipleAwaits (line 697) | async function multipleAwaits() {
function getValue (line 718) | async function getValue() {
function mightFail (line 728) | async function mightFail(shouldFail) {
function foo (line 808) | async function foo() {
function scheduleMicrotask (line 872) | function scheduleMicrotask() {
method greet (line 949) | greet() {
method greet (line 970) | greet() {
method greet (line 990) | greet() {
function processInChunks (line 1053) | function processInChunks(items, process, chunkSize = 3) {
function poll (line 1087) | async function poll() {
function immediate (line 1283) | async function immediate() {
FILE: tests/functions-execution/generators-iterators/generators-iterators.test.js
function createIterator (line 6) | function createIterator(arr) {
method [Symbol.iterator] (line 224) | [Symbol.iterator]() {
method [Symbol.iterator] (line 244) | *[Symbol.iterator]() {
class Range (line 258) | class Range {
method constructor (line 259) | constructor(start, end, step = 1) {
method [Symbol.iterator] (line 265) | *[Symbol.iterator]() {
FILE: tests/functions-execution/iife-modules/iife-modules.test.js
function greet (line 13) | function greet() {
method increment (line 169) | increment() {
method decrement (line 172) | decrement() {
method getCount (line 175) | getCount() {
method increment (line 197) | increment() {
method getCount (line 200) | getCount() {
function log (line 218) | function log(message) {
method increment (line 223) | increment() {
method getCount (line 227) | getCount() {
function createCounter (line 242) | function createCounter() {
method login (line 385) | login() {
method logout (line 388) | logout() {
method formatDate (line 422) | formatDate(date) {
method capitalize (line 425) | capitalize(str) {
method create (line 464) | create(name) {
method find (line 467) | find(id) {
method render (line 473) | render(users) {
method isEmail (line 479) | isEmail(str) {
method increment (line 511) | increment() {
method decrement (line 514) | decrement() {
method getCount (line 517) | getCount() {
method log (line 543) | log(message) {
method getLogs (line 547) | getLogs() {
method getLogCount (line 550) | getLogCount() {
method increment (line 576) | increment() {
method getCount (line 580) | getCount() {
method log (line 589) | log(message) {
method getLogs (line 592) | getLogs() {
function add (line 616) | function add(a, b) {
function subtract (line 620) | function subtract(a, b) {
function square (line 633) | function square(x) {
function cube (line 639) | function cube(x) {
class Calculator (line 651) | class Calculator {
method add (line 652) | add(a, b) {
method subtract (line 655) | subtract(a, b) {
method multiply (line 658) | multiply(a, b) {
method divide (line 661) | divide(a, b) {
function greet (line 685) | function greet(name) {
class User (line 695) | class User {
method constructor (line 696) | constructor(name) {
method greet (line 700) | greet() {
method login (line 726) | login(email) {
method getCurrentUser (line 730) | getCurrentUser() {
method logout (line 733) | logout() {
method formatDate (line 756) | formatDate(date) {
method formatCurrency (line 759) | formatCurrency(amount) {
method isEmail (line 766) | isEmail(str) {
method isPhone (line 769) | isPhone(str) {
function increment (line 798) | function increment() {
function getCount (line 802) | function getCount() {
method increment (line 872) | increment() {
method getCount (line 875) | getCount() {
method helperFunction (line 906) | helperFunction() {
method useShared (line 914) | useShared() {
method useShared (line 922) | useShared() {
method increment (line 965) | increment() {
method getCount (line 968) | getCount() {
function privateFunction (line 1187) | function privateFunction() {
function publicFunction (line 1191) | function publicFunction() {
function setPrivate (line 1195) | function setPrivate(val) {
function createInstance (line 1223) | function createInstance() {
method getInstance (line 1233) | getInstance() {
FILE: tests/fundamentals/call-stack/call-stack.test.js
function createGreeting (line 6) | function createGreeting(name) {
function greet (line 10) | function greet(name) {
function greet (line 19) | function greet(name, age) {
function calculate (line 28) | function calculate() {
function multiply (line 41) | function multiply(x, y) {
function square (line 45) | function square(n) {
function printSquare (line 49) | function printSquare(n) {
function a (line 58) | function a() { return b() }
function b (line 59) | function b() { return c() }
function c (line 60) | function c() { return d() }
function d (line 61) | function d() { return 'done' }
function a (line 71) | function a() {
function b (line 78) | function b() {
function c (line 85) | function c() {
function d (line 92) | function d() {
function outer (line 106) | function outer() {
method greet (line 122) | greet() {
function countdown (line 133) | function countdown(n) {
function countdown (line 143) | function countdown(n) {
function loop (line 157) | function loop() {
function countUp (line 165) | function countUp(n, limit = 100) {
function a (line 176) | function a() { return b() }
function b (line 177) | function b() { return a() }
class Person (line 183) | class Person {
method name (line 184) | set name(value) {
class PersonFixed (line 194) | class PersonFixed {
method name (line 195) | set name(value) {
method name (line 198) | get name() {
function factorial (line 211) | function factorial(n) {
function countdown (line 222) | function countdown(n) {
function a (line 235) | function a() { return b() }
function b (line 236) | function b() { return c() }
function c (line 237) | function c() {
function a (line 245) | function a() { return b() }
function b (line 246) | function b() { return c() }
function c (line 247) | function c() {
FILE: tests/fundamentals/equality-operators/equality-operators.test.js
function greet (line 112) | function greet(name) {
function isReallyNaN (line 330) | function isReallyNaN(value) {
function isNegativeZero (line 338) | function isNegativeZero(value) {
function getType (line 424) | function getType(value) {
function isRealObject (line 435) | function isRealObject(value) {
class Person (line 483) | class Person {}
function getType (line 513) | function getType(value) {
function processObject (line 564) | function processObject(obj) {
function isNullish (line 612) | function isNullish(value) {
FILE: tests/fundamentals/javascript-engines/javascript-engines.test.js
function greet (line 7) | function greet(name) {
function createPoint (line 44) | function createPoint(x, y) {
function createPointA (line 72) | function createPointA(x, y) {
function createPointB (line 77) | function createPointB(x, y) {
function add (line 106) | function add(a, b) {
function process (line 117) | function process(x) {
function process (line 133) | function process(x) {
function getX (line 235) | function getX(obj) {
function getX (line 246) | function getX(obj) {
function getX (line 270) | function getX(obj) {
class Point (line 291) | class Point {
method constructor (line 292) | constructor(x, y) {
class Animal (line 309) | class Animal {
method speak (line 310) | speak() {
class Dog (line 315) | class Dog extends Animal {
method speak (line 316) | speak() {
function createUserBad (line 366) | function createUserBad(name, age) {
function createUserGood (line 385) | function createUserGood(name, age) {
function multiply (line 402) | function multiply(a, b) {
function square (line 414) | function square(x) {
function sumOfSquares (line 418) | function sumOfSquares(a, b) {
function createAdder (line 427) | function createAdder(x) {
function hotFunction (line 507) | function hotFunction(n) {
function add (line 521) | function add(a, b) {
function maybeDouble (line 539) | function maybeDouble(n, shouldDouble) {
function createA (line 556) | function createA() {
function createB (line 560) | function createB() {
function User (line 578) | function User(name, email, age) {
FILE: tests/fundamentals/primitive-types/primitive-types.test.js
function greet (line 193) | function greet(name) {
function doNothing (line 200) | function doNothing() {
function findUser (line 220) | function findUser(id) {
function isEmptyOrWhitespace (line 534) | function isEmptyOrWhitespace(str) {
function findUser (line 554) | function findUser(id) {
FILE: tests/fundamentals/primitives-objects/primitives-objects.test.js
function rename (line 73) | function rename(person) {
function replace (line 84) | function replace(person) {
function double (line 95) | function double(num) {
function double (line 168) | function double(num) {
function rename (line 183) | function rename(person) {
function replace (line 194) | function replace(person) {
function deepFreeze (line 314) | function deepFreeze(obj, seen = new WeakSet()) {
function deepFreeze (line 342) | function deepFreeze(obj, seen = new WeakSet()) {
function processUsers (line 586) | function processUsers(users) {
function deepEqual (line 615) | function deepEqual(a, b) {
function addItem (line 705) | function addItem(item, list = defaultList) {
function addItem (line 720) | function addItem(item, list = []) {
function processData (line 775) | function processData(data) {
FILE: tests/fundamentals/scope-and-closures/scope-and-closures.test.js
function countApples (line 7) | function countApples() {
function countOranges (line 13) | function countOranges() {
function processData (line 26) | function processData() {
function createBankAccount (line 38) | function createBankAccount() {
function greet (line 61) | function greet() {
function calculateTotal (line 73) | function calculateTotal() {
function example (line 86) | function example() {
function demo (line 118) | function demo() {
function demo (line 130) | function demo() {
function outerFunction (line 213) | function outerFunction() {
function outer (line 234) | function outer() {
function greet (line 254) | function greet() {
function createGreeter (line 276) | function createGreeter(greeting) {
function createCounter (line 292) | function createCounter() {
function createMultiplier (line 322) | function createMultiplier(multiplier) {
function createApiClient (line 338) | function createApiClient(baseUrl) {
function setupClickCounter (line 356) | function setupClickCounter() {
function createMemoizedFunction (line 375) | function createMemoizedFunction(fn) {
function factorial (line 389) | function factorial(n) {
function createClosure (line 478) | function createClosure() {
function createHandler (line 492) | function createHandler() {
function createWallet (line 518) | function createWallet(initial) {
function createTaxCalculator (line 546) | function createTaxCalculator(rate) {
function setupLogger (line 560) | function setupLogger(prefix) {
function memoize (line 574) | function memoize(fn) {
function example (line 603) | function example() {
function createCounter (line 619) | function createCounter() {
function example (line 694) | function example() {
function test (line 719) | function test(a = 1, b = a + 1) {
function example (line 731) | function example() {
function hoistedFn (line 745) | function hoistedFn() {
FILE: tests/fundamentals/type-coercion/type-coercion.test.js
method valueOf (line 242) | valueOf() {
method toString (line 245) | toString() {
method valueOf (line 259) | valueOf() {
method toString (line 262) | toString() {
method [Symbol.toPrimitive] (line 275) | [Symbol.toPrimitive](hint) {
function checkNullish (line 469) | function checkNullish(value) {
FILE: tests/object-oriented/factories-classes/factories-classes.test.js
function createPlayer (line 10) | function createPlayer(name) {
class Enemy (line 28) | class Enemy {
method constructor (line 29) | constructor(name) {
method attack (line 34) | attack() {
method constructor (line 58) | constructor(name) {
method attack (line 63) | attack() {
function createPlayer (line 47) | function createPlayer(name) {
class Enemy (line 57) | class Enemy {
method constructor (line 29) | constructor(name) {
method attack (line 34) | attack() {
method constructor (line 58) | constructor(name) {
method attack (line 63) | attack() {
method attack (line 91) | attack() {
method attack (line 99) | attack() {
function createPlayer (line 119) | function createPlayer(name) {
function createCounter (line 140) | function createCounter() {
function createEnemy (line 164) | function createEnemy(name, health, attackPower) {
function createCharacter (line 195) | function createCharacter(config = {}) {
function createBankAccount (line 224) | function createBankAccount(initialBalance = 0) {
function createAccount (line 259) | function createAccount() {
function createCounter (line 292) | function createCounter() {
function createWeapon (line 322) | function createWeapon(type) {
function Player (line 356) | function Player(name) {
method constructor (line 490) | constructor(name) {
method attack (line 496) | attack() {
method constructor (line 511) | constructor(name) {
method attack (line 515) | attack() {
method constructor (line 700) | constructor(name) {
method constructor (line 710) | constructor(name) {
method attack (line 714) | attack() {
method constructor (line 1145) | constructor(name) {
function Player (line 371) | function Player(name) {
method constructor (line 490) | constructor(name) {
method attack (line 496) | attack() {
method constructor (line 511) | constructor(name) {
method attack (line 515) | attack() {
method constructor (line 700) | constructor(name) {
method constructor (line 710) | constructor(name) {
method attack (line 714) | attack() {
method constructor (line 1145) | constructor(name) {
function Enemy (line 375) | function Enemy(name) {
method constructor (line 29) | constructor(name) {
method attack (line 34) | attack() {
method constructor (line 58) | constructor(name) {
method attack (line 63) | attack() {
function myNew (line 391) | function myNew(Constructor, ...args) {
function Player (line 397) | function Player(name) {
method constructor (line 490) | constructor(name) {
method attack (line 496) | attack() {
method constructor (line 511) | constructor(name) {
method attack (line 515) | attack() {
method constructor (line 700) | constructor(name) {
method constructor (line 710) | constructor(name) {
method attack (line 714) | attack() {
method constructor (line 1145) | constructor(name) {
function ReturnsObject (line 415) | function ReturnsObject() {
function ReturnsPrimitive (line 420) | function ReturnsPrimitive() {
function Player (line 435) | function Player(name) {
method constructor (line 490) | constructor(name) {
method attack (line 496) | attack() {
method constructor (line 511) | constructor(name) {
method attack (line 515) | attack() {
method constructor (line 700) | constructor(name) {
method constructor (line 710) | constructor(name) {
method attack (line 714) | attack() {
method constructor (line 1145) | constructor(name) {
function Character (line 453) | function Character(name, health) {
method constructor (line 533) | constructor(name) {
method constructor (line 736) | constructor(name, health) {
method attack (line 741) | attack() {
method takeDamage (line 745) | takeDamage(amount) {
method constructor (line 814) | constructor(name) {
method attack (line 818) | attack() {
class Player (line 489) | class Player {
method constructor (line 490) | constructor(name) {
method attack (line 496) | attack() {
method constructor (line 511) | constructor(name) {
method attack (line 515) | attack() {
method constructor (line 700) | constructor(name) {
method constructor (line 710) | constructor(name) {
method attack (line 714) | attack() {
method constructor (line 1145) | constructor(name) {
class Player (line 510) | class Player {
method constructor (line 490) | constructor(name) {
method attack (line 496) | attack() {
method constructor (line 511) | constructor(name) {
method attack (line 515) | attack() {
method constructor (line 700) | constructor(name) {
method constructor (line 710) | constructor(name) {
method attack (line 714) | attack() {
method constructor (line 1145) | constructor(name) {
class Character (line 529) | class Character {
method constructor (line 533) | constructor(name) {
method constructor (line 736) | constructor(name, health) {
method attack (line 741) | attack() {
method takeDamage (line 745) | takeDamage(amount) {
method constructor (line 814) | constructor(name) {
method attack (line 818) | attack() {
class MathUtils (line 548) | class MathUtils {
method square (line 551) | static square(x) {
method cube (line 555) | static cube(x) {
class User (line 571) | class User {
method constructor (line 572) | constructor(id, name) {
method createGuest (line 577) | static createGuest() {
method fromData (line 581) | static fromData(data) {
class Circle (line 598) | class Circle {
method constructor (line 599) | constructor(radius) {
method radius (line 603) | get radius() {
method radius (line 607) | set radius(value) {
method diameter (line 612) | get diameter() {
method diameter (line 616) | set diameter(value) {
method area (line 620) | get area() {
class BankAccount (line 642) | class BankAccount {
method constructor (line 645) | constructor(initialBalance) {
method deposit (line 649) | deposit(amount) {
method getBalance (line 654) | getBalance() {
method constructor (line 1158) | constructor(balance) {
method getBalance (line 1162) | getBalance() {
class Counter (line 670) | class Counter {
method #log (line 673) | #log(action) {
method increment (line 677) | increment() {
method getCount (line 682) | getCount() {
method increment (line 1394) | increment() {
class Player (line 699) | class Player {
method constructor (line 490) | constructor(name) {
method attack (line 496) | attack() {
method constructor (line 511) | constructor(name) {
method attack (line 515) | attack() {
method constructor (line 700) | constructor(name) {
method constructor (line 710) | constructor(name) {
method attack (line 714) | attack() {
method constructor (line 1145) | constructor(name) {
class Player (line 709) | class Player {
method constructor (line 490) | constructor(name) {
method attack (line 496) | attack() {
method constructor (line 511) | constructor(name) {
method attack (line 515) | attack() {
method constructor (line 700) | constructor(name) {
method constructor (line 710) | constructor(name) {
method attack (line 714) | attack() {
method constructor (line 1145) | constructor(name) {
class Character (line 735) | class Character {
method constructor (line 533) | constructor(name) {
method constructor (line 736) | constructor(name, health) {
method attack (line 741) | attack() {
method takeDamage (line 745) | takeDamage(amount) {
method constructor (line 814) | constructor(name) {
method attack (line 818) | attack() {
class Warrior (line 751) | class Warrior extends Character {
method constructor (line 752) | constructor(name) {
method shieldBash (line 757) | shieldBash() {
method attack (line 824) | attack() {
class Animal (line 772) | class Animal {}
method speak (line 786) | speak() {
class Dog (line 773) | class Dog extends Animal {}
method speak (line 792) | speak() {
class Animal (line 785) | class Animal {
method speak (line 786) | speak() {
class Dog (line 791) | class Dog extends Animal {
method speak (line 792) | speak() {
class Cat (line 797) | class Cat extends Animal {
method speak (line 798) | speak() {
class Character (line 813) | class Character {
method constructor (line 533) | constructor(name) {
method constructor (line 736) | constructor(name, health) {
method attack (line 741) | attack() {
method takeDamage (line 745) | takeDamage(amount) {
method constructor (line 814) | constructor(name) {
method attack (line 818) | attack() {
class Warrior (line 823) | class Warrior extends Character {
method constructor (line 752) | constructor(name) {
method shieldBash (line 757) | shieldBash() {
method attack (line 824) | attack() {
class Parent (line 837) | class Parent {
method constructor (line 838) | constructor(name) {
class Child (line 843) | class Child extends Parent {
method constructor (line 844) | constructor(name, age) {
method walk (line 860) | walk() {
method swim (line 867) | swim() {
method fly (line 874) | fly() {
function createDuck (line 880) | function createDuck(name) {
function createPenguin (line 891) | function createPenguin(name) {
method speak (line 916) | speak(message) {
method walk (line 922) | walk() {
function createDuck (line 928) | function createDuck(name) {
function createFish (line 938) | function createFish(name) {
method takeDamage (line 958) | takeDamage(amount) {
method heal (line 962) | heal(amount) {
method useMana (line 971) | useMana(amount) {
function createWarrior (line 981) | function createWarrior(name) {
function createMage (line 990) | function createMage(name) {
class ClassPlayer (line 1021) | class ClassPlayer {
method constructor (line 1022) | constructor(name) {
method attack (line 1043) | attack() {
function createPlayer (line 1027) | function createPlayer(name) {
class ClassPlayer (line 1042) | class ClassPlayer {
method constructor (line 1022) | constructor(name) {
method attack (line 1043) | attack() {
function createPlayer (line 1055) | function createPlayer() {
class ClassWallet (line 1073) | class ClassWallet {
method deposit (line 1076) | deposit(amount) {
method getBalance (line 1079) | getBalance() {
function createWallet (line 1085) | function createWallet() {
function Player (line 1120) | function Player(name) {
method constructor (line 490) | constructor(name) {
method attack (line 496) | attack() {
method constructor (line 511) | constructor(name) {
method attack (line 515) | attack() {
method constructor (line 700) | constructor(name) {
method constructor (line 710) | constructor(name) {
method attack (line 714) | attack() {
method constructor (line 1145) | constructor(name) {
function Player (line 1131) | function Player(name) {
method constructor (line 490) | constructor(name) {
method attack (line 496) | attack() {
method constructor (line 511) | constructor(name) {
method attack (line 515) | attack() {
method constructor (line 700) | constructor(name) {
method constructor (line 710) | constructor(name) {
method attack (line 714) | attack() {
method constructor (line 1145) | constructor(name) {
class Player (line 1144) | class Player {
method constructor (line 490) | constructor(name) {
method attack (line 496) | attack() {
method constructor (line 511) | constructor(name) {
method attack (line 515) | attack() {
method constructor (line 700) | constructor(name) {
method constructor (line 710) | constructor(name) {
method attack (line 714) | attack() {
method constructor (line 1145) | constructor(name) {
class BankAccount (line 1157) | class BankAccount {
method constructor (line 645) | constructor(initialBalance) {
method deposit (line 649) | deposit(amount) {
method getBalance (line 654) | getBalance() {
method constructor (line 1158) | constructor(balance) {
method getBalance (line 1162) | getBalance() {
class SecureBankAccount (line 1178) | class SecureBankAccount {
method constructor (line 1181) | constructor(balance) {
method getBalance (line 1185) | getBalance() {
function createCounter (line 1202) | function createCounter() {
function createSafeCounter (line 1231) | function createSafeCounter() {
method constructor (line 1266) | constructor(name) {
method constructor (line 1277) | constructor(name) {
method getClassName (line 1281) | static getClassName() {
class ExtendedArray (line 1293) | class ExtendedArray extends Array {
method first (line 1294) | get first() {
method last (line 1298) | get last() {
method sum (line 1302) | sum() {
class Config (line 1324) | class Config {
function createUser (line 1340) | function createUser(name, age) {
class Button (line 1366) | class Button {
class Counter (line 1390) | class Counter {
method #log (line 673) | #log(action) {
method increment (line 677) | increment() {
method getCount (line 682) | getCount() {
method increment (line 1394) | increment() {
class Builder (line 1413) | class Builder {
method constructor (line 1414) | constructor() {
method setName (line 1418) | setName(name) {
method setAge (line 1423) | setAge(age) {
method build (line 1428) | build() {
function createBuilder (line 1439) | function createBuilder() {
FILE: tests/object-oriented/inheritance-polymorphism/inheritance-polymorphism.test.js
class Character (line 8) | class Character {
method constructor (line 9) | constructor(name, health = 100) {
method introduce (line 14) | introduce() {
method attack (line 18) | attack() {
method takeDamage (line 22) | takeDamage(amount) {
method isAlive (line 27) | get isAlive() {
method createRandom (line 31) | static createRandom() {
method constructor (line 441) | constructor(name) {
method constructor (line 604) | constructor(id, name) {
class Warrior (line 37) | class Warrior extends Character {
method constructor (line 38) | constructor(name) {
method attack (line 44) | attack() {
method battleCry (line 48) | battleCry() {
method constructor (line 611) | constructor(id, name) {
class Mage (line 54) | class Mage extends Character {
method constructor (line 55) | constructor(name) {
method attack (line 60) | attack() {
method castSpell (line 64) | castSpell(spell) {
class Archer (line 70) | class Archer extends Character {
method constructor (line 71) | constructor(name) {
method attack (line 76) | attack() {
class ExtendedWarrior (line 151) | class ExtendedWarrior extends Character {
method constructor (line 152) | constructor(name) {
method attack (line 157) | attack() {
method describe (line 162) | describe() {
class BrokenWarrior (line 176) | class BrokenWarrior extends Character {
method constructor (line 177) | constructor(name) {
class VerboseWarrior (line 207) | class VerboseWarrior extends Character {
method attack (line 208) | attack() {
class SilentWarrior (line 218) | class SilentWarrior extends Character {
method attack (line 219) | attack() {
function executeBattle (line 254) | function executeBattle(characters) {
class Healer (line 279) | class Healer extends Character {
method attack (line 280) | attack() {
function getAttacks (line 286) | function getAttacks(chars) {
method fly (line 336) | fly() { return `${state.name} soars through the sky!` }
method castSpell (line 340) | castSpell(spell) { return `${state.name} casts ${spell}!` }
method attack (line 344) | attack() { return `${state.name} attacks!` }
function createFlyingMage (line 348) | function createFlyingMage(name) {
method swim (line 369) | swim() { return `${state.name} swims!` }
method fly (line 373) | fly() { return `${state.name} flies!` }
function createDuck (line 377) | function createDuck(name) {
function createFish (line 383) | function createFish(name) {
method swim (line 405) | swim() { return `${this.name} swims!` }
method fly (line 409) | fly() { return `${this.name} flies!` }
class Animal (line 412) | class Animal {
method constructor (line 413) | constructor(name) {
class Duck (line 418) | class Duck extends Animal {}
method log (line 429) | log(message) {
method getTimestamp (line 435) | getTimestamp() {
class Character (line 440) | class Character {
method constructor (line 9) | constructor(name, health = 100) {
method introduce (line 14) | introduce() {
method attack (line 18) | attack() {
method takeDamage (line 22) | takeDamage(amount) {
method isAlive (line 27) | get isAlive() {
method createRandom (line 31) | static createRandom() {
method constructor (line 441) | constructor(name) {
method constructor (line 604) | constructor(id, name) {
class LoggedCharacter (line 447) | class LoggedCharacter extends withTimestamp(withLogging(Character)) {
method doAction (line 448) | doAction() {
method greet (line 462) | greet() { return 'Hello from A' }
method greet (line 466) | greet() { return 'Hello from B' }
class Base (line 469) | class Base {}
class Parent (line 485) | class Parent {
method method (line 486) | method() { return 'parent' }
class Child (line 489) | class Child extends Parent {
method method (line 490) | method() { return 'child' }
class BetterChild (line 497) | class BetterChild extends Parent {
method method (line 498) | method() { return `${super.method()} + child` }
class BadStack (line 508) | class BadStack extends Array {
method peek (line 509) | peek() { return this[this.length - 1] }
class GoodStack (line 519) | class GoodStack {
method push (line 522) | push(item) { this.#items.push(item) }
method pop (line 523) | pop() { return this.#items.pop() }
method peek (line 524) | peek() { return this.#items[this.#items.length - 1] }
class Shape (line 541) | class Shape {
method area (line 542) | area() { return 0 }
class Rectangle (line 545) | class Rectangle extends Shape {
method constructor (line 546) | constructor(width, height) {
method area (line 551) | area() { return this.width * this.height }
class Circle (line 554) | class Circle extends Shape {
method constructor (line 555) | constructor(radius) {
method area (line 559) | area() { return Math.PI * this.radius ** 2 }
class Entity (line 597) | class Entity {
method constructor (line 598) | constructor(id) {
class Character (line 603) | class Character extends Entity {
method constructor (line 9) | constructor(name, health = 100) {
method introduce (line 14) | introduce() {
method attack (line 18) | attack() {
method takeDamage (line 22) | takeDamage(amount) {
method isAlive (line 27) | get isAlive() {
method createRandom (line 31) | static createRandom() {
method constructor (line 441) | constructor(name) {
method constructor (line 604) | constructor(id, name) {
class Warrior (line 610) | class Warrior extends Character {
method constructor (line 38) | constructor(name) {
method attack (line 44) | attack() {
method battleCry (line 48) | battleCry() {
method constructor (line 611) | constructor(id, name) {
class A (line 631) | class A {
method constructor (line 632) | constructor() {
class B (line 637) | class B extends A {
method constructor (line 638) | constructor() {
class C (line 644) | class C extends B {
method constructor (line 645) | constructor() {
FILE: tests/object-oriented/object-creation-prototypes/object-creation-prototypes.test.js
method castSpell (line 37) | castSpell() {
function Player (line 94) | function Player(name) {
method attack (line 117) | attack() {
method speak (line 130) | speak() {
function Player (line 188) | function Player(name) {
function Counter (line 202) | function Counter() {
function ReturnsNothing (line 216) | function ReturnsNothing(name) {
function ReturnsPrimitive (line 221) | function ReturnsPrimitive(name) {
function ReturnsObject (line 226) | function ReturnsObject(name) {
function myNew (line 243) | function myNew(Constructor, ...args) {
function Player (line 249) | function Player(name, health) {
function Animal (line 350) | function Animal(name) {
function Dog (line 353) | function Dog(name) {
function BadPlayer (line 416) | function BadPlayer(name) {
function GoodPlayer (line 428) | function GoodPlayer(name) {
FILE: tests/object-oriented/this-call-apply-bind/this-call-apply-bind.test.js
method introduce (line 10) | introduce() {
method introduce (line 17) | introduce() {
method introduce (line 30) | introduce() {
function showThis (line 42) | function showThis() {
function greet (line 60) | function greet() {
class Rectangle (line 76) | class Rectangle {
method constructor (line 77) | constructor(width, height) {
method getArea (line 82) | getArea() {
function introduce (line 94) | function introduce() {
function greet (line 108) | function greet(greeting, name) {
function Person (line 126) | function Person(name) {
method constructor (line 136) | constructor(name) {
class Person (line 135) | class Person {
method constructor (line 136) | constructor(name) {
class Counter (line 146) | class Counter {
method constructor (line 147) | constructor() {
method increment (line 150) | increment() {
method constructor (line 454) | constructor() {
method incrementWithArrow (line 458) | incrementWithArrow() {
class Calculator (line 167) | class Calculator {
method constructor (line 168) | constructor(value) {
method add (line 171) | add(n) {
method multiply (line 175) | multiply(n) {
function ReturnsNothing (line 188) | function ReturnsNothing(name) {
function ReturnsObject (line 192) | function ReturnsObject(name) {
function ReturnsPrimitive (line 197) | function ReturnsPrimitive(name) {
class Animal (line 213) | class Animal {
method speak (line 214) | speak() {
method speak (line 611) | speak() {
class Dog (line 219) | class Dog extends Animal {
method speak (line 220) | speak() {
method constructor (line 617) | constructor(name) {
method speak (line 621) | speak() {
function Person (line 232) | function Person(name) {
method constructor (line 136) | constructor(name) {
function greet (line 246) | function greet() {
function greet (line 255) | function greet() {
function greet (line 264) | function greet() {
method greet (line 276) | greet() {
function getThis (line 288) | function getThis() {
method getName (line 302) | getName() {
method getName (line 315) | getName() {
method add (line 328) | add(n) {
method subtract (line 332) | subtract(n) {
method getResult (line 336) | getResult() {
method getName (line 348) | getName() {
method getName (line 361) | getName() {
function executeCallback (line 366) | function executeCallback(callback) {
method method (line 377) | method() {
function getThis (line 389) | function getThis() {
method method (line 408) | method() {
method method (line 425) | method() {
method getArrow (line 437) | getArrow() {
class Counter (line 453) | class Counter {
method constructor (line 147) | constructor() {
method increment (line 150) | increment() {
method constructor (line 454) | constructor() {
method incrementWithArrow (line 458) | incrementWithArrow() {
class Button (line 472) | class Button {
method constructor (line 473) | constructor(label) {
method constructor (line 815) | constructor(label) {
method handleClick (line 820) | handleClick() {
function createArrow (line 504) | function createArrow() {
function inner (line 544) | function inner() {
function greet (line 567) | function greet() {
function introduce (line 575) | function introduce(greeting, punctuation) {
class Animal (line 610) | class Animal {
method speak (line 214) | speak() {
method speak (line 611) | speak() {
class Dog (line 616) | class Dog extends Animal {
method speak (line 220) | speak() {
method constructor (line 617) | constructor(name) {
method speak (line 621) | speak() {
function getThisName (line 632) | function getThisName() {
function getThis (line 640) | function getThis() {
function greet (line 653) | function greet() {
function introduce (line 661) | function introduce(greeting, punctuation) {
function sum (line 684) | function sum() {
function returnArgs (line 693) | function returnArgs() {
function noArgs (line 701) | function noArgs() {
function greet (line 737) | function greet() {
function setFlag (line 750) | function setFlag() {
function getName (line 762) | function getName() {
function getName (line 777) | function getName() {
function multiply (line 791) | function multiply(a, b) {
function greet (line 803) | function greet(greeting, punctuation, name) {
class Button (line 814) | class Button {
method constructor (line 473) | constructor(label) {
method constructor (line 815) | constructor(label) {
method handleClick (line 820) | handleClick() {
class Delayed (line 832) | class Delayed {
method constructor (line 833) | constructor(message) {
method getMessage (line 837) | getMessage() {
function fn (line 851) | function fn(a, b, c) {
function Person (line 866) | function Person(name) {
method constructor (line 136) | constructor(name) {
method log (line 895) | log(message) {
function log (line 919) | function log(level, timestamp, message) {
function multiply (line 931) | function multiply(a, b) {
function createUrl (line 945) | function createUrl(protocol, domain, path) {
class Timer (line 959) | class Timer {
method constructor (line 960) | constructor() {
method tick (line 965) | tick() {
class Timer (line 979) | class Timer {
method constructor (line 960) | constructor() {
method tick (line 965) | tick() {
method addAll (line 1002) | addAll(numbers) {
method addAll (line 1017) | addAll(numbers) {
method addAll (line 1031) | addAll(numbers) {
method getOuterName (line 1049) | getOuterName() {
method createInner (line 1062) | createInner() {
function Foo (line 1080) | function Foo(value) {
method getName (line 1093) | getName() {
function getName (line 1105) | function getName() {
method greet (line 1121) | greet() {
class Counter (line 1131) | class Counter {
method constructor (line 147) | constructor() {
method increment (line 150) | increment() {
method constructor (line 454) | constructor() {
method incrementWithArrow (line 458) | incrementWithArrow() {
function greet (line 1148) | function greet() {
method getName (line 1164) | getName() {
method add (line 1176) | add(numbers) {
method add (line 1195) | add(numbers) {
function multiply (line 1207) | function multiply(a, b) {
function simulateNew (line 1221) | function simulateNew(Constructor, ...args) {
function Person (line 1237) | function Person(name) {
method constructor (line 136) | constructor(name) {
function simulateNew (line 1255) | function simulateNew(Constructor, ...args) {
function ReturnsObject (line 1264) | function ReturnsObject() {
function simulateNew (line 1275) | function simulateNew(Constructor, ...args) {
function WeirdConstructor (line 1284) | function WeirdConstructor(value) {
function introduce (line 1299) | function introduce(greeting, role, company) {
class Countdown (line 1313) | class Countdown {
method constructor (line 1314) | constructor(start) {
method tick (line 1318) | tick() {
method constructor (line 1337) | constructor(start) {
method tick (line 1341) | tick() {
class Countdown (line 1336) | class Countdown {
method constructor (line 1314) | constructor(start) {
method tick (line 1318) | tick() {
method constructor (line 1337) | constructor(start) {
method tick (line 1341) | tick() {
FILE: tests/web-platform/dom/dom.test.js
function getAncestors (line 338) | function getAncestors(element) {
FILE: tests/web-platform/http-fetch/http-fetch.test.js
function fetchJSON (line 510) | async function fetchJSON(url, options = {}) {
function safeFetch (line 559) | async function safeFetch(url) {
function fetchWithTimeout (line 692) | async function fetchWithTimeout(url, timeout = 5000) {
function fetchWithState (line 792) | async function fetchWithState(url) {
function fetchWithRetry (line 1024) | async function fetchWithRetry(url, options = {}, retries = 3) {
function searchWithCancel (line 1053) | async function searchWithCancel(query) {
Condensed preview — 165 files, each showing path, character count, and a content snippet. Download the .json file or copy for the full structured content (4,549K chars).
[
{
"path": ".claude/CLAUDE.md",
"chars": 20371,
"preview": "# 33 JavaScript Concepts - Project Context\n\n## Overview\n\nThis repository is a curated collection of **33 essential JavaS"
},
{
"path": ".claude/skills/concept-workflow/SKILL.md",
"chars": 15741,
"preview": "---\nname: concept-workflow\ndescription: End-to-end workflow for creating complete JavaScript concept documentation, orch"
},
{
"path": ".claude/skills/fact-check/SKILL.md",
"chars": 20001,
"preview": "---\nname: fact-check\ndescription: Verify technical accuracy of JavaScript concept pages by checking code examples, MDN/E"
},
{
"path": ".claude/skills/resource-curator/SKILL.md",
"chars": 19656,
"preview": "---\nname: resource-curator\ndescription: Find, evaluate, and maintain high-quality external resources for JavaScript conc"
},
{
"path": ".claude/skills/seo-review/SKILL.md",
"chars": 35102,
"preview": "---\nname: seo-review\ndescription: Perform a focused SEO audit on JavaScript concept pages to maximize search visibility,"
},
{
"path": ".claude/skills/test-writer/SKILL.md",
"chars": 21799,
"preview": "---\nname: test-writer\ndescription: Generate comprehensive Vitest tests for code examples in JavaScript concept documenta"
},
{
"path": ".claude/skills/write-concept/SKILL.md",
"chars": 53977,
"preview": "---\nname: write-concept\ndescription: Write or review JavaScript concept documentation pages for the 33 JavaScript Concep"
},
{
"path": ".github/FUNDING.yml",
"chars": 428,
"preview": "# These are supported funding model platforms\n\ngithub: # Replace with up to 4 GitHub Sponsors-enabled usernames e.g., [u"
},
{
"path": ".github/workflows/tests.yml",
"chars": 458,
"preview": "name: Tests\n\non:\n push:\n branches: [master, main]\n pull_request:\n branches: [master, main]\n\njobs:\n test:\n ru"
},
{
"path": ".gitignore",
"chars": 954,
"preview": "# Logs\nlogs\n*.log\nnpm-debug.log*\nyarn-debug.log*\nyarn-error.log*\n\n# Runtime data\npids\n*.pid\n*.seed\n*.pid.lock\n\n# Directo"
},
{
"path": ".opencode/skill/concept-workflow/SKILL.md",
"chars": 15741,
"preview": "---\nname: concept-workflow\ndescription: End-to-end workflow for creating complete JavaScript concept documentation, orch"
},
{
"path": ".opencode/skill/fact-check/SKILL.md",
"chars": 20001,
"preview": "---\nname: fact-check\ndescription: Verify technical accuracy of JavaScript concept pages by checking code examples, MDN/E"
},
{
"path": ".opencode/skill/resource-curator/SKILL.md",
"chars": 19656,
"preview": "---\nname: resource-curator\ndescription: Find, evaluate, and maintain high-quality external resources for JavaScript conc"
},
{
"path": ".opencode/skill/seo-review/SKILL.md",
"chars": 35102,
"preview": "---\nname: seo-review\ndescription: Perform a focused SEO audit on JavaScript concept pages to maximize search visibility,"
},
{
"path": ".opencode/skill/test-writer/SKILL.md",
"chars": 21799,
"preview": "---\nname: test-writer\ndescription: Generate comprehensive Vitest tests for code examples in JavaScript concept documenta"
},
{
"path": ".opencode/skill/write-concept/SKILL.md",
"chars": 53977,
"preview": "---\nname: write-concept\ndescription: Write or review JavaScript concept documentation pages for the 33 JavaScript Concep"
},
{
"path": "CODE_OF_CONDUCT.md",
"chars": 5217,
"preview": "# Contributor Covenant Code of Conduct\n\n## Our Pledge\n\nWe as members, contributors, and leaders pledge to participate in"
},
{
"path": "CONTRIBUTING.md",
"chars": 2558,
"preview": "# Contribution\nThis project would not be possible without your help and support, and we appreciate your willingness to c"
},
{
"path": "LICENSE",
"chars": 1075,
"preview": "MIT License\n\nCopyright (c) 2018 Leonardo Maldonado\n\nPermission is hereby granted, free of charge, to any person obtainin"
},
{
"path": "README.md",
"chars": 17336,
"preview": "<h1 align=\"center\">\n<br>\n <a href=\"https://github.com/leonardomso/33-js-concepts\"><img src=\"github-image.png\" alt=\"33 C"
},
{
"path": "TRANSLATIONS.md",
"chars": 3921,
"preview": "# Translations\n\nThis project has been translated into 40+ languages thanks to our amazing community of contributors.\n\n##"
},
{
"path": "docs/5c8wamucvfketshf1eyrw254gz94jwre.txt",
"chars": 32,
"preview": "5c8wamucvfketshf1eyrw254gz94jwre"
},
{
"path": "docs/beyond/concepts/blob-file-api.mdx",
"chars": 38578,
"preview": "---\ntitle: \"Blob & File API in JavaScript\"\nsidebarTitle: \"Blob & File API\"\ndescription: \"Learn JavaScript Blob and File "
},
{
"path": "docs/beyond/concepts/computed-property-names.mdx",
"chars": 30560,
"preview": "---\ntitle: \"Computed Property Names in JS\"\nsidebarTitle: \"Computed Property Names\"\ndescription: \"Learn JavaScript comput"
},
{
"path": "docs/beyond/concepts/cookies.mdx",
"chars": 42359,
"preview": "---\ntitle: \"Cookies in JavaScript\"\nsidebarTitle: \"Cookies\"\ndescription: \"Learn JavaScript cookies. Understand how to rea"
},
{
"path": "docs/beyond/concepts/custom-events.mdx",
"chars": 31933,
"preview": "---\ntitle: \"Custom Events in JavaScript\"\nsidebarTitle: \"Custom Events\"\ndescription: \"Learn JavaScript custom events. Cre"
},
{
"path": "docs/beyond/concepts/debouncing-throttling.mdx",
"chars": 39559,
"preview": "---\ntitle: \"Debouncing & Throttling in JS\"\nsidebarTitle: \"Debouncing & Throttling: Control Event Frequency\"\ndescription:"
},
{
"path": "docs/beyond/concepts/event-bubbling-capturing.mdx",
"chars": 31568,
"preview": "---\ntitle: \"Event Bubbling & Capturing\"\nsidebarTitle: \"Event Bubbling & Capturing\"\ndescription: \"Learn event bubbling an"
},
{
"path": "docs/beyond/concepts/event-delegation.mdx",
"chars": 34455,
"preview": "---\ntitle: \"Event Delegation in JavaScript\"\nsidebarTitle: \"Event Delegation\"\ndescription: \"Learn event delegation in Jav"
},
{
"path": "docs/beyond/concepts/garbage-collection.mdx",
"chars": 36861,
"preview": "---\ntitle: \"JavaScript Garbage Collection\"\nsidebarTitle: \"Garbage Collection\"\ndescription: \"Learn how JavaScript garbage"
},
{
"path": "docs/beyond/concepts/getters-setters.mdx",
"chars": 37402,
"preview": "---\ntitle: \"Getters & Setters in JavaScript\"\nsidebarTitle: \"Getters & Setters: Computed Properties\"\ndescription: \"Learn "
},
{
"path": "docs/beyond/concepts/hoisting.mdx",
"chars": 33074,
"preview": "---\ntitle: \"Hoisting in JavaScript\"\nsidebarTitle: \"Hoisting: How Declarations Move to the Top\"\ndescription: \"Learn JavaS"
},
{
"path": "docs/beyond/concepts/indexeddb.mdx",
"chars": 40503,
"preview": "---\ntitle: \"IndexedDB in JavaScript\"\nsidebarTitle: \"IndexedDB: Client-Side Database Storage\"\ndescription: \"Learn Indexed"
},
{
"path": "docs/beyond/concepts/intersection-observer.mdx",
"chars": 39175,
"preview": "---\ntitle: \"Intersection Observer in JavaScript\"\nsidebarTitle: \"Intersection Observer\"\ndescription: \"Learn the Intersect"
},
{
"path": "docs/beyond/concepts/javascript-type-nuances.mdx",
"chars": 46341,
"preview": "---\ntitle: \"JavaScript Type Nuances\"\nsidebarTitle: \"Type Nuances\"\ndescription: \"Learn JavaScript type nuances: null vs u"
},
{
"path": "docs/beyond/concepts/json-deep-dive.mdx",
"chars": 33266,
"preview": "---\ntitle: \"JSON Deep Dive in JavaScript\"\nsidebarTitle: \"JSON: Beyond Parse and Stringify\"\ndescription: \"Learn advanced "
},
{
"path": "docs/beyond/concepts/localstorage-sessionstorage.mdx",
"chars": 38694,
"preview": "---\ntitle: \"localStorage & sessionStorage\"\nsidebarTitle: \"localStorage & sessionStorage\"\ndescription: \"Master Web Storag"
},
{
"path": "docs/beyond/concepts/memoization.mdx",
"chars": 33573,
"preview": "---\ntitle: \"Memoization in JavaScript\"\nsidebarTitle: \"Memoization: Caching Function Results\"\ndescription: \"Learn memoiza"
},
{
"path": "docs/beyond/concepts/memory-management.mdx",
"chars": 38665,
"preview": "---\ntitle: \"JavaScript Memory Management\"\nsidebarTitle: \"Memory Management\"\ndescription: \"Learn how JavaScript manages m"
},
{
"path": "docs/beyond/concepts/mutation-observer.mdx",
"chars": 34879,
"preview": "---\ntitle: \"MutationObserver in JavaScript\"\nsidebarTitle: \"MutationObserver: Watching DOM Changes\"\ndescription: \"Learn t"
},
{
"path": "docs/beyond/concepts/object-methods.mdx",
"chars": 28621,
"preview": "---\ntitle: \"JavaScript Object Methods\"\nsidebarTitle: \"Object Methods: Inspect & Transform\"\ndescription: \"Learn JavaScrip"
},
{
"path": "docs/beyond/concepts/performance-observer.mdx",
"chars": 35764,
"preview": "---\ntitle: \"PerformanceObserver in JS\"\nsidebarTitle: \"Performance Observer\"\ndescription: \"Learn the Performance Observer"
},
{
"path": "docs/beyond/concepts/property-descriptors.mdx",
"chars": 30933,
"preview": "---\ntitle: \"Property Descriptors in JS\"\nsidebarTitle: \"Property Descriptors: Hidden Property Flags\"\ndescription: \"Learn "
},
{
"path": "docs/beyond/concepts/proxy-reflect.mdx",
"chars": 27199,
"preview": "---\ntitle: \"Proxy & Reflect in JavaScript\"\nsidebarTitle: \"Proxy & Reflect: Intercepting Object Operations\"\ndescription: "
},
{
"path": "docs/beyond/concepts/requestanimationframe.mdx",
"chars": 36601,
"preview": "---\ntitle: \"requestAnimationFrame Guide\"\nsidebarTitle: \"requestAnimationFrame: Smooth Animations\"\ndescription: \"Learn re"
},
{
"path": "docs/beyond/concepts/resize-observer.mdx",
"chars": 35924,
"preview": "---\ntitle: \"ResizeObserver in JavaScript\"\nsidebarTitle: \"ResizeObserver\"\ndescription: \"Learn the ResizeObserver API in J"
},
{
"path": "docs/beyond/concepts/strict-mode.mdx",
"chars": 25855,
"preview": "---\ntitle: \"JavaScript Strict Mode\"\nsidebarTitle: \"Strict Mode: Catching Common Mistakes\"\ndescription: \"Learn JavaScript"
},
{
"path": "docs/beyond/concepts/tagged-template-literals.mdx",
"chars": 32049,
"preview": "---\ntitle: \"Tagged Template Literals\"\nsidebarTitle: \"Tagged Template Literals\"\ndescription: \"Learn JavaScript tagged tem"
},
{
"path": "docs/beyond/concepts/temporal-dead-zone.mdx",
"chars": 33154,
"preview": "---\ntitle: \"Temporal Dead Zone in JS\"\nsidebarTitle: \"Temporal Dead Zone\"\ndescription: \"Learn the Temporal Dead Zone (TDZ"
},
{
"path": "docs/beyond/concepts/typed-arrays-arraybuffers.mdx",
"chars": 32194,
"preview": "---\ntitle: \"Typed Arrays in JavaScript\"\nsidebarTitle: \"Typed Arrays & ArrayBuffers\"\ndescription: \"Learn JavaScript Typed"
},
{
"path": "docs/beyond/concepts/weakmap-weakset.mdx",
"chars": 35241,
"preview": "---\ntitle: \"WeakMap & WeakSet in JavaScript\"\nsidebarTitle: \"WeakMap & WeakSet\"\ndescription: \"Learn JavaScript WeakMap an"
},
{
"path": "docs/beyond/getting-started/overview.mdx",
"chars": 7503,
"preview": "---\ntitle: \"Beyond 33: Extended JavaScript Concepts\"\nsidebarTitle: \"Overview\"\ndescription: \"Go beyond the original 33 wi"
},
{
"path": "docs/concepts/algorithms-big-o.mdx",
"chars": 24624,
"preview": "---\ntitle: \"Algorithms & Big O\"\nsidebarTitle: \"Algorithms & Big O: Measuring Code Performance\"\ndescription: \"Learn Big O"
},
{
"path": "docs/concepts/async-await.mdx",
"chars": 55083,
"preview": "---\ntitle: \"async/await\"\nsidebarTitle: \"async/await: Writing Async Code That Looks Synchronous\"\ndescription: \"Learn asyn"
},
{
"path": "docs/concepts/call-stack.mdx",
"chars": 39299,
"preview": "---\ntitle: \"Call Stack\"\nsidebarTitle: \"Call Stack: How Function Execution Works\"\ndescription: \"Learn how the JavaScript "
},
{
"path": "docs/concepts/callbacks.mdx",
"chars": 48799,
"preview": "---\ntitle: \"Callbacks\"\nsidebarTitle: \"Callbacks: The Foundation of Async\"\ndescription: \"Learn JavaScript callbacks. Unde"
},
{
"path": "docs/concepts/clean-code.mdx",
"chars": 28866,
"preview": "---\ntitle: \"Clean Code\"\nsidebarTitle: \"Clean Code: Writing Readable JavaScript\"\ndescription: \"Learn clean code principle"
},
{
"path": "docs/concepts/currying-composition.mdx",
"chars": 48438,
"preview": "---\ntitle: \"Currying & Composition\"\nsidebarTitle: \"Currying & Composition: Functional Patterns\"\ndescription: \"Learn curr"
},
{
"path": "docs/concepts/data-structures.mdx",
"chars": 44071,
"preview": "---\ntitle: \"Data Structures\"\nsidebarTitle: \"Data Structures: Organizing and Storing Data\"\ndescription: \"Learn JavaScript"
},
{
"path": "docs/concepts/design-patterns.mdx",
"chars": 43209,
"preview": "---\ntitle: \"Design Patterns\"\nsidebarTitle: \"Design Patterns: Reusable Solutions\"\ndescription: \"Learn JavaScript design p"
},
{
"path": "docs/concepts/dom.mdx",
"chars": 81673,
"preview": "---\ntitle: \"DOM Manipulation\"\nsidebarTitle: \"DOM: How Browsers Represent Web Pages\"\ndescription: \"Learn the DOM in JavaS"
},
{
"path": "docs/concepts/equality-operators.mdx",
"chars": 59819,
"preview": "---\ntitle: \"Equality: == vs ===\"\nsidebarTitle: \"Equality Operators: == vs === Type Checking\"\ndescription: \"Learn JavaScr"
},
{
"path": "docs/concepts/error-handling.mdx",
"chars": 34577,
"preview": "---\ntitle: \"Error Handling\"\nsidebarTitle: \"Error Handling: Managing Errors Gracefully\"\ndescription: \"Learn JavaScript er"
},
{
"path": "docs/concepts/es-modules.mdx",
"chars": 47844,
"preview": "---\ntitle: \"ES Modules\"\nsidebarTitle: \"ES Modules: Native Module System\"\ndescription: \"Learn ES Modules in JavaScript. U"
},
{
"path": "docs/concepts/event-loop.mdx",
"chars": 55659,
"preview": "---\ntitle: \"Event Loop\"\nsidebarTitle: \"Event Loop: How Async Code Actually Runs\"\ndescription: \"Learn how the JavaScript "
},
{
"path": "docs/concepts/factories-classes.mdx",
"chars": 69522,
"preview": "---\ntitle: \"Factories & Classes\"\nsidebarTitle: \"Factories and Classes: Creating Objects Efficiently\"\ndescription: \"Learn"
},
{
"path": "docs/concepts/generators-iterators.mdx",
"chars": 45834,
"preview": "---\ntitle: \"Generators & Iterators\"\nsidebarTitle: \"Generators & Iterators: Pausable Functions\"\ndescription: \"Learn JavaS"
},
{
"path": "docs/concepts/higher-order-functions.mdx",
"chars": 37052,
"preview": "---\ntitle: \"Higher-Order Functions\"\nsidebarTitle: \"Higher-Order Functions: Functions That Use Functions\"\ndescription: \"L"
},
{
"path": "docs/concepts/http-fetch.mdx",
"chars": 41631,
"preview": "---\ntitle: \"HTTP & Fetch API\"\nsidebarTitle: \"Fetch API: Making HTTP Requests the Modern Way\"\ndescription: \"Learn the Jav"
},
{
"path": "docs/concepts/iife-modules.mdx",
"chars": 50072,
"preview": "---\ntitle: \"IIFE & Namespaces\"\nsidebarTitle: \"IIFE, Modules & Namespaces: Structuring Code\"\ndescription: \"Learn how to o"
},
{
"path": "docs/concepts/inheritance-polymorphism.mdx",
"chars": 47773,
"preview": "---\ntitle: \"Inheritance & Polymorphism\"\nsidebarTitle: \"Inheritance & Polymorphism: OOP Principles\"\ndescription: \"Learn i"
},
{
"path": "docs/concepts/javascript-engines.mdx",
"chars": 42302,
"preview": "---\ntitle: \"JavaScript Engines\"\nsidebarTitle: \"JavaScript Engines: How V8 Runs Your Code\"\ndescription: \"Learn how JavaSc"
},
{
"path": "docs/concepts/map-reduce-filter.mdx",
"chars": 50353,
"preview": "---\ntitle: \"map, reduce, filter\"\nsidebarTitle: \"map, reduce, filter\"\ndescription: \"Learn map, reduce, and filter in Java"
},
{
"path": "docs/concepts/modern-js-syntax.mdx",
"chars": 38639,
"preview": "---\ntitle: \"Modern JS Syntax (ES6+)\"\nsidebarTitle: \"Modern JavaScript Syntax: ES6+ Features\"\ndescription: \"Learn ES6+ Ja"
},
{
"path": "docs/concepts/object-creation-prototypes.mdx",
"chars": 46546,
"preview": "---\ntitle: \"Prototypes & Object Creation\"\nsidebarTitle: \"Object Creation & Prototypes: How Objects Inherit\"\ndescription:"
},
{
"path": "docs/concepts/primitive-types.mdx",
"chars": 42881,
"preview": "---\ntitle: \"Primitive Types\"\nsidebarTitle: \"Primitive Types: Building Blocks of Data\"\ndescription: \"Learn JavaScript's 7"
},
{
"path": "docs/concepts/primitives-objects.mdx",
"chars": 37741,
"preview": "---\ntitle: \"Primitives vs Objects: How JavaScript Values Actually Work\"\nsidebarTitle: \"Primitives vs Objects: How Values"
},
{
"path": "docs/concepts/promises.mdx",
"chars": 62841,
"preview": "---\ntitle: \"Promises\"\nsidebarTitle: \"Promises: Managing Async Operations\"\ndescription: \"Learn JavaScript Promises. Creat"
},
{
"path": "docs/concepts/pure-functions.mdx",
"chars": 33284,
"preview": "---\ntitle: \"Pure Functions\"\nsidebarTitle: \"Pure Functions: Writing Predictable Code\"\ndescription: \"Learn pure functions "
},
{
"path": "docs/concepts/recursion.mdx",
"chars": 38070,
"preview": "---\ntitle: \"Recursion\"\nsidebarTitle: \"Recursion: Functions That Call Themselves\"\ndescription: \"Learn recursion in JavaSc"
},
{
"path": "docs/concepts/regular-expressions.mdx",
"chars": 27170,
"preview": "---\ntitle: \"Regular Expressions\"\nsidebarTitle: \"Regular Expressions: Pattern Matching\"\ndescription: \"Learn regular expre"
},
{
"path": "docs/concepts/scope-and-closures.mdx",
"chars": 45590,
"preview": "---\ntitle: \"Scope & Closures\"\nsidebarTitle: \"Scope and Closures: How Variables Really Work\"\ndescription: \"Learn JavaScri"
},
{
"path": "docs/concepts/this-call-apply-bind.mdx",
"chars": 48117,
"preview": "---\ntitle: \"this, call, apply & bind\"\nsidebarTitle: \"this, call, apply, and bind: How Context Works\"\ndescription: \"Learn"
},
{
"path": "docs/concepts/type-coercion.mdx",
"chars": 38305,
"preview": "---\ntitle: \"Type Coercion\"\nsidebarTitle: \"Type Coercion: How Values Convert Automatically\"\ndescription: \"Learn JavaScrip"
},
{
"path": "docs/concepts/web-workers.mdx",
"chars": 59985,
"preview": "---\ntitle: \"Web Workers\"\nsidebarTitle: \"Web Workers: True Parallelism\"\ndescription: \"Learn Web Workers in JavaScript for"
},
{
"path": "docs/contributing.mdx",
"chars": 3335,
"preview": "---\ntitle: \"Contributing\"\ndescription: \"Want to contribute to 33 JavaScript Concepts? Learn how to submit improvements, "
},
{
"path": "docs/docs.json",
"chars": 7935,
"preview": "{\n \"$schema\": \"https://mintlify.com/docs.json\",\n \"theme\": \"maple\",\n \"appearance\": {\n \"default\": \"dark\",\n \"stric"
},
{
"path": "docs/getting-started/about.mdx",
"chars": 7806,
"preview": "---\ntitle: \"About This Project\"\nsidebarTitle: \"What is This Project?\"\ndescription: \"Discover the story behind 33 JavaScr"
},
{
"path": "docs/getting-started/how-to-learn.mdx",
"chars": 5359,
"preview": "---\ntitle: \"How to Use This Guide\"\nsidebarTitle: \"How to Learn\"\ndescription: \"Learn how to study JavaScript effectively."
},
{
"path": "docs/getting-started/learning-paths.mdx",
"chars": 8880,
"preview": "---\ntitle: \"Learning Paths\"\nsidebarTitle: \"Learning Paths\"\ndescription: \"Find the right JavaScript learning path for you"
},
{
"path": "docs/getting-started/prerequisites.mdx",
"chars": 4867,
"preview": "---\ntitle: \"Prerequisites & Setup\"\nsidebarTitle: \"Prerequisites\"\ndescription: \"Set up your JavaScript learning environme"
},
{
"path": "docs/index.mdx",
"chars": 4114,
"preview": "---\ntitle: \"Learn JavaScript\"\nsidebarTitle: \"Welcome\"\ndescription: \"Master JavaScript with 33 core concepts. Clear expla"
},
{
"path": "docs/robots.txt",
"chars": 1292,
"preview": "# Belt-and-suspenders robots.txt for 33jsconcepts.com\n# \n# PRIMARY FIX: Cloudflare dashboard configuration is required t"
},
{
"path": "docs/schema-inject.js",
"chars": 11025,
"preview": "(function () {\n \"use strict\";\n\n var SITE_NAME = \"33 JavaScript Concepts\";\n var SCHEMA_SCRIPT_ID = \"structured-data-js"
},
{
"path": "docs/translations.mdx",
"chars": 5995,
"preview": "---\ntitle: \"Translations\"\ndescription: \"33 JavaScript Concepts is available in 40+ languages. Find translations in Chine"
},
{
"path": "index.js",
"chars": 338,
"preview": "/* \n 33 JavaScript Concepts is a project created to help JavaScript developers master their skills. It is a compilati"
},
{
"path": "opencode.jsonc",
"chars": 1008,
"preview": "{\n \"$schema\": \"https://opencode.ai/config.json\",\n\n // MCP Server Configuration\n \"mcp\": {\n \"context7\": {\n \"typ"
},
{
"path": "package.json",
"chars": 1659,
"preview": "{\n \"name\": \"33-js-concepts\",\n \"version\": \"1.0.0\",\n \"description\": \"A curated collection of 33 essential JavaScript co"
},
{
"path": "tests/advanced-topics/algorithms-big-o/algorithms-big-o.test.js",
"chars": 14663,
"preview": "import { describe, it, expect } from 'vitest'\n\n// ============================================\n// SEARCHING ALGORITHMS\n/"
},
{
"path": "tests/advanced-topics/data-structures/data-structures.test.js",
"chars": 27136,
"preview": "import { describe, it, expect } from 'vitest'\n\ndescribe('Data Structures', () => {\n describe('Arrays', () => {\n it('"
},
{
"path": "tests/advanced-topics/design-patterns/design-patterns.test.js",
"chars": 16474,
"preview": "import { describe, it, expect, vi, beforeEach } from 'vitest'\n\ndescribe('Design Patterns', () => {\n describe('Module Pa"
},
{
"path": "tests/advanced-topics/error-handling/error-handling.test.js",
"chars": 26914,
"preview": "import { describe, it, expect, vi, beforeEach, afterEach } from 'vitest'\n\ndescribe('Error Handling', () => {\n \n // ==="
},
{
"path": "tests/advanced-topics/es-modules/es-modules.test.js",
"chars": 40610,
"preview": "import { describe, it, expect, vi } from 'vitest'\n\ndescribe('ES Modules', () => {\n // ================================="
},
{
"path": "tests/advanced-topics/modern-js-syntax/modern-js-syntax.test.js",
"chars": 18187,
"preview": "import { describe, it, expect } from 'vitest'\n\ndescribe('Modern JavaScript Syntax (ES6+)', () => {\n \n // ============="
},
{
"path": "tests/advanced-topics/regular-expressions/regular-expressions.test.js",
"chars": 12212,
"preview": "import { describe, it, expect } from 'vitest'\n\ndescribe('Regular Expressions', () => {\n describe('Creating Regex', () ="
},
{
"path": "tests/async-javascript/callbacks/callbacks.dom.test.js",
"chars": 6815,
"preview": "/**\n * @vitest-environment jsdom\n */\nimport { describe, it, expect, vi, beforeEach, afterEach } from 'vitest'\n\n// ======"
},
{
"path": "tests/async-javascript/callbacks/callbacks.test.js",
"chars": 45758,
"preview": "import { describe, it, expect, vi, beforeEach, afterEach } from 'vitest'\n\ndescribe('Callbacks', () => {\n \n // ========"
},
{
"path": "tests/beyond/browser-storage/cookies/cookies.dom.test.js",
"chars": 17429,
"preview": "/**\n * @vitest-environment jsdom\n */\nimport { describe, it, expect, beforeEach, afterEach, vi } from 'vitest'\n\n// ======"
},
{
"path": "tests/beyond/browser-storage/cookies/cookies.test.js",
"chars": 20305,
"preview": "import { describe, it, expect } from 'vitest'\n\n// ============================================================\n// COOKIE"
},
{
"path": "tests/beyond/browser-storage/indexeddb/indexeddb.test.js",
"chars": 18933,
"preview": "import { describe, it, expect, vi, beforeEach, afterEach } from 'vitest'\n\ndescribe('IndexedDB', () => {\n // ==========="
},
{
"path": "tests/beyond/browser-storage/localstorage-sessionstorage/localstorage-sessionstorage.dom.test.js",
"chars": 14870,
"preview": "/**\n * DOM-specific tests for localStorage & sessionStorage concept page\n * Focuses on StorageEvent and cross-tab commun"
},
{
"path": "tests/beyond/browser-storage/localstorage-sessionstorage/localstorage-sessionstorage.test.js",
"chars": 21535,
"preview": "/**\n * Tests for localStorage & sessionStorage concept page\n * @see /docs/beyond/concepts/localstorage-sessionstorage.md"
},
{
"path": "tests/beyond/data-handling/blob-file-api/blob-file-api.dom.test.js",
"chars": 7263,
"preview": "/**\n * @vitest-environment jsdom\n */\nimport { describe, it, expect, vi, beforeEach, afterEach } from 'vitest'\n\ndescribe("
},
{
"path": "tests/beyond/data-handling/blob-file-api/blob-file-api.test.js",
"chars": 13013,
"preview": "import { describe, it, expect, vi, beforeEach, afterEach } from 'vitest'\n\ndescribe('Blob & File API', () => {\n // ====="
},
{
"path": "tests/beyond/data-handling/json-deep-dive/json-deep-dive.test.js",
"chars": 21857,
"preview": "import { describe, it, expect } from 'vitest'\n\ndescribe('JSON Deep Dive', () => {\n // ================================="
},
{
"path": "tests/beyond/data-handling/requestanimationframe/requestanimationframe.test.js",
"chars": 9116,
"preview": "import { describe, it, expect } from 'vitest'\n\ndescribe('requestAnimationFrame', () => {\n describe('Easing Functions', "
},
{
"path": "tests/beyond/data-handling/typed-arrays-arraybuffers/typed-arrays-arraybuffers.test.js",
"chars": 20274,
"preview": "import { describe, it, expect } from 'vitest'\n\n/**\n * Tests for Typed Arrays & ArrayBuffers concept\n * Source: /docs/bey"
},
{
"path": "tests/beyond/events/custom-events/custom-events.dom.test.js",
"chars": 14429,
"preview": "/**\n * @vitest-environment jsdom\n */\n\nimport { describe, it, expect, vi, beforeEach, afterEach } from 'vitest'\n\n/**\n * D"
},
{
"path": "tests/beyond/events/custom-events/custom-events.test.js",
"chars": 4586,
"preview": "import { describe, it, expect, vi } from 'vitest'\n\n/**\n * Tests for Custom Events concept page\n * Source: /docs/beyond/c"
},
{
"path": "tests/beyond/events/event-bubbling-capturing/event-bubbling-capturing.dom.test.js",
"chars": 20489,
"preview": "/**\n * @vitest-environment jsdom\n */\nimport { describe, it, expect, vi, beforeEach, afterEach } from 'vitest'\n\n// ======"
},
{
"path": "tests/beyond/events/event-delegation/event-delegation.test.js",
"chars": 17897,
"preview": "/**\n * @vitest-environment jsdom\n */\n\nimport { describe, it, expect, vi, beforeEach, afterEach } from 'vitest'\n\n/**\n * T"
},
{
"path": "tests/beyond/language-mechanics/hoisting/hoisting.test.js",
"chars": 19647,
"preview": "import { describe, it, expect } from 'vitest'\n\ndescribe('Hoisting', () => {\n describe('Variable Hoisting with var', () "
},
{
"path": "tests/beyond/language-mechanics/strict-mode/strict-mode.test.js",
"chars": 15137,
"preview": "import { describe, it, expect } from 'vitest'\n\ndescribe('Strict Mode', () => {\n // ===================================="
},
{
"path": "tests/beyond/language-mechanics/temporal-dead-zone/temporal-dead-zone.test.js",
"chars": 14407,
"preview": "import { describe, it, expect } from 'vitest'\n\ndescribe('Temporal Dead Zone', () => {\n describe('Basic TDZ Behavior', ("
},
{
"path": "tests/beyond/memory-performance/debouncing-throttling/debouncing-throttling.test.js",
"chars": 17073,
"preview": "import { describe, it, expect, vi, beforeEach, afterEach } from 'vitest'\n\n/**\n * Tests for Debouncing & Throttling conce"
},
{
"path": "tests/beyond/memory-performance/garbage-collection/garbage-collection.test.js",
"chars": 17632,
"preview": "import { describe, it, expect } from 'vitest'\n\ndescribe('Garbage Collection', () => {\n // ============================="
},
{
"path": "tests/beyond/memory-performance/memoization/memoization.test.js",
"chars": 20645,
"preview": "import { describe, it, expect, vi, beforeEach, afterEach } from 'vitest'\n\ndescribe('Memoization', () => {\n // ========="
},
{
"path": "tests/beyond/memory-performance/memory-management/memory-management.test.js",
"chars": 15299,
"preview": "import { describe, it, expect } from 'vitest'\n\n/**\n * Tests for Memory Management concept\n * Source: /docs/beyond/concep"
},
{
"path": "tests/beyond/modern-syntax-operators/computed-property-names/computed-property-names.test.js",
"chars": 19565,
"preview": "import { describe, it, expect } from 'vitest'\n\ndescribe('Computed Property Names', () => {\n\n describe('Basic Syntax', ("
},
{
"path": "tests/beyond/modern-syntax-operators/tagged-template-literals/tagged-template-literals.test.js",
"chars": 21944,
"preview": "import { describe, it, expect } from 'vitest'\n\ndescribe('Tagged Template Literals', () => {\n // ======================="
},
{
"path": "tests/beyond/objects-properties/getters-setters/getters-setters.test.js",
"chars": 17304,
"preview": "import { describe, it, expect } from 'vitest'\n\ndescribe('Getters and Setters', () => {\n \n describe('Basic Getter Synta"
},
{
"path": "tests/beyond/objects-properties/object-methods/object-methods.test.js",
"chars": 18966,
"preview": "import { describe, it, expect } from 'vitest'\n\ndescribe('Object Methods', () => {\n // ================================="
},
{
"path": "tests/beyond/objects-properties/property-descriptors/property-descriptors.test.js",
"chars": 19964,
"preview": "import { describe, it, expect, beforeEach } from 'vitest'\n\ndescribe('Property Descriptors', () => {\n \n describe('Basic"
},
{
"path": "tests/beyond/objects-properties/proxy-reflect/proxy-reflect.test.js",
"chars": 15067,
"preview": "import { describe, it, expect } from 'vitest'\n\ndescribe('Proxy and Reflect', () => {\n // =============================="
},
{
"path": "tests/beyond/objects-properties/weakmap-weakset/weakmap-weakset.test.js",
"chars": 24171,
"preview": "import { describe, it, expect } from 'vitest'\n\ndescribe('WeakMap & WeakSet', () => {\n // =============================="
},
{
"path": "tests/beyond/observer-apis/intersection-observer/intersection-observer.dom.test.js",
"chars": 10641,
"preview": "/**\n * @vitest-environment jsdom\n */\n\nimport { describe, it, expect, vi, beforeEach, afterEach } from 'vitest'\n\n/**\n * D"
},
{
"path": "tests/beyond/observer-apis/intersection-observer/intersection-observer.test.js",
"chars": 14542,
"preview": "/**\n * Tests for Intersection Observer concept page\n * Source: /docs/beyond/concepts/intersection-observer.mdx\n * \n * No"
},
{
"path": "tests/beyond/observer-apis/mutation-observer/mutation-observer.dom.test.js",
"chars": 20637,
"preview": "/**\n * @vitest-environment jsdom\n */\nimport { describe, it, expect, vi, beforeEach, afterEach } from 'vitest'\n\n// ======"
},
{
"path": "tests/beyond/observer-apis/performance-observer/performance-observer.test.js",
"chars": 22387,
"preview": "import { describe, it, expect, vi, beforeEach, afterEach } from 'vitest'\n\n/**\n * Tests for Performance Observer concept "
},
{
"path": "tests/beyond/observer-apis/resize-observer/resize-observer.test.js",
"chars": 21909,
"preview": "/**\n * Tests for ResizeObserver concept page\n * Source: /docs/beyond/concepts/resize-observer.mdx\n * \n * Note: ResizeObs"
},
{
"path": "tests/beyond/type-system/javascript-type-nuances/javascript-type-nuances.test.js",
"chars": 26430,
"preview": "import { describe, it, expect } from 'vitest'\n\n/**\n * Tests for JavaScript Type Nuances concept page\n * Source: /docs/be"
},
{
"path": "tests/functional-programming/currying-composition/currying-composition.test.js",
"chars": 33224,
"preview": "import { describe, it, expect } from 'vitest'\n\ndescribe('Currying & Composition', () => {\n describe('Basic Currying', ("
},
{
"path": "tests/functional-programming/higher-order-functions/higher-order-functions.test.js",
"chars": 15603,
"preview": "import { describe, it, expect, vi } from 'vitest'\n\ndescribe('Higher-Order Functions', () => {\n describe('Functions that"
},
{
"path": "tests/functional-programming/map-reduce-filter/map-reduce-filter.test.js",
"chars": 23869,
"preview": "import { describe, it, expect } from 'vitest'\n\ndescribe('map, reduce, filter', () => {\n \n describe('map()', () => {\n "
},
{
"path": "tests/functional-programming/pure-functions/pure-functions.test.js",
"chars": 24826,
"preview": "import { describe, it, expect } from 'vitest'\n\ndescribe('Pure Functions', () => {\n describe('Rule 1: Same Input → Same "
},
{
"path": "tests/functional-programming/recursion/recursion.test.js",
"chars": 26519,
"preview": "import { describe, it, expect } from 'vitest'\nimport { JSDOM } from 'jsdom'\n\ndescribe('Recursion', () => {\n describe('B"
},
{
"path": "tests/functions-execution/async-await/async-await.test.js",
"chars": 30357,
"preview": "import { describe, it, expect, vi, beforeEach, afterEach } from 'vitest'\n\ndescribe('async/await', () => {\n \n // ======"
},
{
"path": "tests/functions-execution/event-loop/event-loop.test.js",
"chars": 38592,
"preview": "import { describe, it, expect, vi, beforeEach, afterEach } from 'vitest'\n\ndescribe('Event Loop, Timers and Scheduling', "
},
{
"path": "tests/functions-execution/generators-iterators/generators-iterators.test.js",
"chars": 14851,
"preview": "import { describe, it, expect } from 'vitest'\n\ndescribe('Generators & Iterators', () => {\n describe('Basic Iterator Pro"
},
{
"path": "tests/functions-execution/iife-modules/iife-modules.test.js",
"chars": 34307,
"preview": "import { describe, it, expect, vi } from 'vitest'\n\ndescribe('IIFE, Modules and Namespaces', () => {\n // ==============="
},
{
"path": "tests/functions-execution/promises/promises.test.js",
"chars": 16271,
"preview": "import { describe, it, expect, vi } from 'vitest'\n\ndescribe('Promises', () => {\n describe('Basic Promise Creation', () "
},
{
"path": "tests/fundamentals/call-stack/call-stack.test.js",
"chars": 6918,
"preview": "import { describe, it, expect } from 'vitest'\n\ndescribe('Call Stack', () => {\n describe('Basic Function Calls', () => {"
},
{
"path": "tests/fundamentals/equality-operators/equality-operators.test.js",
"chars": 24854,
"preview": "import { describe, it, expect } from 'vitest'\n\ndescribe('Equality and Type Checking', () => {\n describe('Three Equality"
},
{
"path": "tests/fundamentals/javascript-engines/javascript-engines.test.js",
"chars": 18670,
"preview": "import { describe, it, expect } from 'vitest'\n\ndescribe('JavaScript Engines', () => {\n describe('Basic Examples from Do"
},
{
"path": "tests/fundamentals/primitive-types/primitive-types.test.js",
"chars": 16815,
"preview": "import { describe, it, expect } from 'vitest'\n\ndescribe('Primitive Types', () => {\n describe('String', () => {\n it('"
},
{
"path": "tests/fundamentals/primitives-objects/primitives-objects.test.js",
"chars": 24161,
"preview": "import { describe, it, expect } from 'vitest'\n\n/**\n * Tests for Primitives vs Objects concept\n * Source: /docs/concepts/"
},
{
"path": "tests/fundamentals/scope-and-closures/scope-and-closures.test.js",
"chars": 20297,
"preview": "import { describe, it, expect } from 'vitest'\n\ndescribe('Scope and Closures', () => {\n describe('Scope Basics', () => {"
},
{
"path": "tests/fundamentals/type-coercion/type-coercion.test.js",
"chars": 19843,
"preview": "import { describe, it, expect } from 'vitest'\n\ndescribe('Type Coercion', () => {\n describe('Explicit vs Implicit Coerci"
},
{
"path": "tests/object-oriented/factories-classes/factories-classes.test.js",
"chars": 39465,
"preview": "import { describe, it, expect } from 'vitest'\n\ndescribe('Factories and Classes', () => {\n // =========================="
},
{
"path": "tests/object-oriented/inheritance-polymorphism/inheritance-polymorphism.test.js",
"chars": 19743,
"preview": "import { describe, it, expect } from 'vitest'\n\ndescribe('Inheritance & Polymorphism', () => {\n // ====================="
},
{
"path": "tests/object-oriented/object-creation-prototypes/object-creation-prototypes.test.js",
"chars": 13342,
"preview": "import { describe, it, expect } from 'vitest'\n\ndescribe('Object Creation & Prototypes', () => {\n describe('Opening Hook"
},
{
"path": "tests/object-oriented/this-call-apply-bind/this-call-apply-bind.test.js",
"chars": 38312,
"preview": "import { describe, it, expect } from 'vitest'\n\ndescribe('this, call, apply and bind', () => {\n \n describe('Documentati"
},
{
"path": "tests/web-platform/dom/dom.test.js",
"chars": 48189,
"preview": "/**\n * @vitest-environment jsdom\n */\n\nimport { describe, it, expect, beforeEach } from 'vitest'\n\n// ===================="
},
{
"path": "tests/web-platform/http-fetch/http-fetch.test.js",
"chars": 39732,
"preview": "import { describe, it, expect, vi, beforeEach, afterEach } from 'vitest'\n\n// ==========================================="
},
{
"path": "vitest.config.js",
"chars": 174,
"preview": "import { defineConfig } from 'vitest/config'\n\nexport default defineConfig({\n test: {\n include: ['tests/**/*.test.js'"
}
]
About this extraction
This page contains the full source code of the leonardomso/33-js-concepts GitHub repository, extracted and formatted as plain text for AI agents and large language models (LLMs). The extraction includes 165 files (4.2 MB), approximately 1.1M tokens, and a symbol index with 1468 extracted functions, classes, methods, constants, and types. Use this with OpenClaw, Claude, ChatGPT, Cursor, Windsurf, or any other AI tool that accepts text input. You can copy the full output to your clipboard or download it as a .txt file.
Extracted by GitExtract — free GitHub repo to text converter for AI. Built by Nikandr Surkov.