dexteryy/spellbook-of-modern-webdev

★ 17,808Audience · developerComplexity · 1/5Setup · easy

Mindmap

mindmap
  root((JS Spellbook))
    What it does
      JS ecosystem map
      Curated taxonomy
      Reduces link overload
    Coverage
      Web platform APIs
      CSS and styling
      Node.js backend
      Build tooling
      Cloud deployment
    Use cases
      Onboarding to JS
      Choosing libraries
      Structured overview
    Audience
      Web developers
      Fullstack engineers
    Format
      2000+ curated links
      Deep category hierarchy

mindmap root((JS Spellbook)) What it does JS ecosystem map Curated taxonomy Reduces link overload Coverage Web platform APIs CSS and styling Node.js backend Build tooling Cloud deployment Use cases Onboarding to JS Choosing libraries Structured overview Audience Web developers Fullstack engineers Format 2000+ curated links Deep category hierarchy

Click or tap to explore — scroll the page freely

Things people build with this

USE CASE 1

Get a structured mental map of how JavaScript tools, frameworks, and services fit together before starting a project.

USE CASE 2

Onboard to a full-stack JavaScript codebase and quickly understand which tools are likely in use and why.

USE CASE 3

Find a curated library recommendation for a specific JavaScript problem without sifting through thousands of options.

Tech stack

JavaScriptHTMLCSSNode.js

Getting it running

Difficulty · easy Time to first run · 5min

License terms not described in the guide.

In plain English

This repository is a structured reference guide, essentially a comprehensive, curated taxonomy, of the modern JavaScript web development landscape. Rather than being a library or tool you install, it is a large document that maps out the full scope of technologies, libraries, services, and concepts that a modern web developer might need to understand. The problem it addresses is what the README calls JavaScript fatigue: the sheer volume of tools, packages, and approaches in the JavaScript ecosystem is overwhelming, and most "awesome lists" make this worse by dumping thousands of links with little structure. This guide takes a different approach by trying to show only one or a few recommended links per problem domain, organized into a deep hierarchy of categories, so that the reader gets a clearer mental map of the landscape rather than an even larger pile of links. The structure covers topics from the open web platform and HTML5 APIs, through CSS and modern JavaScript syntax, to Node.js, testing, build tooling, deployment, and cloud services. Each category positions technologies relative to each other and notes which are complementary versus interchangeable. The document contains over 2,000 links to projects, tools, articles, and books. You would use this if you are a developer trying to understand how the different parts of the JavaScript ecosystem fit together, for example, how state management, build tooling, and testing relate to each other, or if you are onboarding to a full-stack JavaScript project and want a structured overview of the tools you are likely to encounter. The full README is longer than what was provided.

Copy-paste prompts

Prompt 1

Using the spellbook-of-modern-webdev taxonomy, help me choose a state management library, build tool, and testing framework for a new React project in 2024.

Prompt 2

Explain how CSS-in-JS, CSS Modules, and utility-first CSS like Tailwind relate to each other and when to pick each one.

Prompt 3

Help me design a Node.js REST API backend architecture, naming recommended libraries for routing, database access, and testing.

Prompt 4

What is the difference between bundlers, task runners, and transpilers in the JavaScript ecosystem, and when should I use each?

Open on GitHub → Explain another repo

← dexteryy on gitmyhub — every repo by this author, as a profile.

Verify against the repo before relying on details.