npm package discovery and stats viewer.

Discover Tips

  • General search

    [free text search, go nuts!]

  • Package details

    pkg:[package-name]

  • User packages

    @[username]

Sponsor

Optimize Toolset

I’ve always been into building performant and accessible sites, but lately I’ve been taking it extremely seriously. So much so that I’ve been building a tool to help me optimize and monitor the sites that I build to make sure that I’m making an attempt to offer the best experience to those who visit them. If you’re into performant, accessible and SEO friendly sites, you might like it too! You can check it out at Optimize Toolset.

About

Hi, 👋, I’m Ryan Hefner  and I built this site for me, and you! The goal of this site was to provide an easy way for me to check the stats on my npm packages, both for prioritizing issues and updates, and to give me a little kick in the pants to keep up on stuff.

As I was building it, I realized that I was actually using the tool to build the tool, and figured I might as well put this out there and hopefully others will find it to be a fast and useful way to search and browse npm packages as I have.

If you’re interested in other things I’m working on, follow me on Twitter or check out the open source projects I’ve been publishing on GitHub.

I am also working on a Twitter bot for this site to tweet the most popular, newest, random packages from npm. Please follow that account now and it will start sending out packages soon–ish.

Open Software & Tools

This site wouldn’t be possible without the immense generosity and tireless efforts from the people who make contributions to the world and share their work via open source initiatives. Thank you 🙏

© 2024 – Pkg Stats / Ryan Hefner

spellbook-of-modern-webdev

v3.2.2

Published

spellbook-of-modern-webdev

Downloads

15

Vulnerabilities

Powered byPowered by Snyk
  • 0High
  • 0Medium
  • 0Low

Links

Git

Maintainers

vadimmironenko717vadimmironenko717

Keywords

spellbook

Readme

  • This document originated from a bunch of most commonly used links and learning resources I sent to every new web developer on our full-stack web development team.
  • What I'm doing in this document now is trying to provide the complete view angle of modern web (app or page) development ruled by JavaScript, reflect technological advance and help developers to acquire APIs, libraries, tools, services, best practices and learning resource which are not outdated and most commonly used.
  • I hope this document can help one developer to have more power to do much more and much better, just like a spellbook does in fantasy worlds.
  • The JS/web technology is like an ocean of stuff you don’t know. Simply collecting more stuff or composing dozens of "awesome lists" into a single one will only exacerbate the Javascript Fatigue. So this document must stay lean and focus on the most frequent problems and the most commonly used stuff.
  • So for each problem domain and each technology, I try my best to pick only one or a few links.
  • Which link belongs to "not outdated and most commonly used stuff" is not only decided by clear trends, empirical observation, and working experience, also by public data and web scraping scripts.
  • The npm package statistics (like download count) are given more weight than Github repo statistics (like starring data) because npm statistics can better reflect the actual usage and popularity.
  • Prefer fine-grained classifications and deep hierarchies over featureless descriptions and distractive comments.
  • Ideally, each line is a unique category. The " / " symbol between the links means they are replaceable. The ", " symbol between the links means they are complementary.
  • I wish this document could be closer to a kind of knowledge graph or skill tree than a list or a collection.
  • It currently contains 2000+ links (projects, tools, plugins, services, articles, books, sites, etc.)
  • Feel free to submit the missing or better links in your opinion. Also, please provide the reason.
  • Why not add a Europe (or other regions) section? Why not add your project? Why so many React-based projects? Why not Angular/Vue.js/XXX?

Understanding Modern Web Development

Table of Contents

  • Platforms and Languages
    • Open Web Platform
      • Learning, Reference, Visual Tools
      • Performance, Security, Semantics / SEO / Accessibility
    • HTML5 / Web APIs
      • HTML/DOM, Appearance, Interaction, Access, Network, Media, Graphics, Computing...
    • CSS Features
      • RWD, Layout, Typography, Text, Animation, Effects...
    • Modern CSS / Next-Gen CSS
      • CSS Module, PostCSS, CSS in JS
      • Best Practices (Skeleton, Methodology, Code Style...)
      • Know More about Web Design / UI Design / UX Design (RWD, Atomic Design, Motion Design, Grid System, Typography, Style Guide...)
    • Modern JS / Next-Gen JS
      • ES6+ Features, Intro to ES6+, Re-intro to JS, Important Proposals, Functional Programming, FRP, Static Typing, Code Style...
    • WebAssembly
      • Concepts, Features, Rust, ...
    • Node.js
      • Intro, Workshop, Best Practices...
    • Platform Compatibility and Proposal Status
      • Platform Status / Releases / Updates, ECMAScript Compatibility
      • Proposal Status (W3C WG, WICG, WHATWG, ECMA TC39, Node.js CTC)
      • JS Engine (V8, JSC, Chakra), Web/JS Runtime (Electron, Cordova, React Native...), Device...
    • Cross-browser / Polyfill Libraries
      • Appearance, Interaction, Access, Network, Performance, Offline, Media...
    • npm Ecosystem
      • Finding Packages (Search, Stats, Rank)
      • Dependency Management / Release / Maintenance (npm, yarn, lerna, ncp...)
      • Convention (Open Source, SemVer, package.json, Small modules, Isomorphic JS / Universal JS...)
    • Universal Utility Libraries
      • Standard Library Extensions (FP, OOP, Async...)
      • Hashing / Generating
      • Parsing / Manipulating (URL, Validator, i18n, Date, Numbers, Color, Text, Buffer / Blob...)
      • Logic, Network, Storage, NLP, ML...
  • Universal Web Apps / Web Pages
    • GUI Framework
      • View / ViewModel / ViewController (React)
      • Model / App State (Redux)
      • API (GraphQL)
      • GUI Architectures (MVC, MVP, PM, MVVM, Flux, Redux, Elm, MVI, SAM...)
    • UI Toolkits
      • CSS, React...
    • Standalone UI Components
      • Layout, Icon, Button, Form, Overlay, Picker, Content, Editor...
  • Client Side
    • UX Libraries
      • Drag & Drop, Gesture, Scrolling, Zoom, Tooltip, Tour...
    • Graphic Libraries
      • Animation (Effects, Loading, Scrolling, Parallax, Transition, Timeline, Motion / Curved Path...)
      • 2D (Canvas, SVG, Physics...), 3D (WebGL, Physics...)
      • Data Visualization, Game...
    • Hybrid Libraries
      • Electron, React Native
  • Server Side
  • Tooling
    • Testing
      • Unit Testing / Test Runner, Test Doubles
      • Web Testing (Integration Testing, Functional/E2E Testing, Visual testing, Monkey Testing, Headless Browsers)
      • Server-side Testing (Functional Testing, Load Testing)
      • Benchmark Testing
      • Analysis (Code Coverage, Node.js Security...)
    • Documentation
      • JS, API, CLI, CSS / Style Guide, Writing
    • Toolchain
      • Compiler / Transpiler / Preprocessor (Babel, PostCSS...)
      • Loader / Builder / Bundler (Webpack, Rollup...)
      • Minifier / Compressor / Optimizer (Prepack, Babili / Uglify, imagemin, cssnano / clean-css...)
      • Formatter (Prettier, Stylefmt...)
      • Static Analysis (ESLint, Flow, StyleLint...)
      • Task Automation (npm scripts, Gulp...)
    • Workflow
      • Development (Micro Generator, Live Reload / Watch / Preview, Dev Tools, HTTP Inspector, Debugging Proxy...)
      • Deployment (Process Supervisor, Containers, Container Clusters, PaaS)
      • Monitoring (Error Tracking, Logging, APM...)
    • Command-line Environment (Mac)
      • Terminal, Homebrew, Zsh, Vim, Git, Docker, dotfiles, Utilities...
    • Command-line Libraries (Node.js)
      • Input (Options/Arguments Parser, Interactive, Configuration...)
      • Output (Color / Style, Icon, Updating Log, Notice, Columns, Curses, Drawing...)
      • Delivery, OS, API, Parser...
    • IDE / Editors
      • VSCode Plugins (UI, Formatting, Operating, Static Analysis, Docs, Assistant, Integration...)
      • Atom Plugins (UI, Formatting, Operating, Static Analysis, Docs, Assistant, Integration...)
      • Out-of-the-box Atom IDE, Other Electron-based IDE, Programming Fonts...
    • Useful Apps
      • Playground, Visual Tools, Viewer, Docs, Automation...
    • Collaboration
      • Version Control, ChatOps, Kanban, Markdown, Design...

A Subset as a Learning Path

  1. Open Web Platform
  2. HTML5 / Web APIs
  3. CSS Features
  4. Modern CSS / Next-Gen CSS
  5. Modern JS / Next-Gen JS
  6. Platform Compatibility and Proposal Status
  7. Network
  8. Node.js
  9. npm Ecosystem
  10. Command-line Environment (Mac)
  11. IDE / Editors
  12. GUI Framework
  13. Microservices / API Services (Node.js)
  14. Testing

A Subset for Finding Libraries

A Subset for Architecture and Infrastructure

Platforms and Languages

Open Web Platform

>> Return to Table of Contents

HTML5 / Web APIs

>> Return to Table of Contents

CSS Features

>> Return to Table of Contents

Modern CSS / Next-Gen CSS

>> Return to Table of Contents

Modern JS / Next-Gen JS

>> Return to Table of Contents

WebAssembly

Node.js

>> Return to Table of Contents

Platform Compatibility and Proposal Status