A Big Picture, Thesaurus, and Taxonomy of Modern JavaScript Web Development

Related tags

Learning resource nodejs javascript learning awesome html5 libraries css3 webapp webplatform universal-javascript isomorphic-javascript
Overview

Spellbook of Modern Web Dev

A Big Picture, Thesaurus, and Taxonomy of Modern JavaScript Web Development




Spellbook of Modern Web Dev




  • 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

>> Return to Table of Contents

Cross-browser / Polyfill Libraries

>> Return to Table of Contents

npm Ecosystem

>> Return to Table of Contents

Universal Utility Libraries

>> Return to Table of Contents

Universal Web Apps / Web Pages

GUI Framework

>> Return to Table of Contents

UI Toolkits

>> Return to Table of Contents

Standalone UI Components

>> Return to Table of Contents

Client Side

UX Libraries

>> Return to Table of Contents

Graphic Libraries

>> Return to Table of Contents

Hybrid Libraries

>> Return to Table of Contents

Server Side

Network

>> Return to Table of Contents

Server-side Best Practices

>> Return to Table of Contents

Microservices / API Services (Node.js)

>> Return to Table of Contents

Server-side Libraries (Node.js)

>> Return to Table of Contents

Cloud Services (Global)

>> Return to Table of Contents

Cloud Services (China)

The evil twins inside the Great Firewall of China

>> Return to Table of Contents

Tooling

Testing

>> Return to Table of Contents

Documentation

>> Return to Table of Contents

Toolchain

>> Return to Table of Contents

Workflow

>> Return to Table of Contents

Command-line Environment (Mac)

>> Return to Table of Contents

Command-line Libraries (Node.js)

>> Return to Table of Contents

IDE / Editors

>> Return to Table of Contents

Useful Apps

>> Return to Table of Contents

Collaboration

>> Return to Table of Contents

Comments
  • Add Nebula CSS toolkit

    Add Nebula CSS toolkit

    Added to list of UI toolkits.

    I think it's relevant here because the toolkit evangelises best practices like ITCSS and BEM methodologies and allows for easy extension by enumerating on the variables (many of which are Sass Maps).

    opened by rbrtsmith 2
  • How to write a Commit Message

    How to write a Commit Message

    I send to every new developer I have to onboard this link:

    https://chris.beams.io/posts/git-commit/

    Maybe it is relevant for this awesome collection.

    If not, just close the issue.

    opened by FQ400 1
  • Is protractor a alternative solution for e2e web testing?

    Is protractor a alternative solution for e2e web testing?

    In my aspect of opinion, angular team protractor is a easy-to-use e2e testing tool. Have you been consider add this into spellbook?

    I admire your work. You save my tons of hours.

    opened by maxisacoder 1
  • Suggestion: Use are.na to realize `knowledge graph`

    Suggestion: Use are.na to realize `knowledge graph`

    I wish this document could be closer to a kind of knowledge graph or skill tree than a list or a collection.

    I suggest that you try out Arena. It allows you to organize links & files in a graph.

    opened by r1b 1
  • (Editor) add Slate

    (Editor) add Slate

    Slate:

    A completely customizable framework for building rich text editors. http://slatejs.org

    Slate lets you build rich, intuitive editors like those in Medium, Dropbox Paper or Google Docs—which are becoming table stakes for applications on the web—without your codebase getting mired in complexity.

    Slate is currently in beta

    opened by fororrest 0
  • [Collaboration > Design] Adding Atomic.io

    [Collaboration > Design] Adding Atomic.io

    Adding Atomic.io to the design collaboration tool. Atomic provides a nice interfaces for protoyping and testing UI.

    Atomic Website Desc : Atomic has the perfect combination of prototyping and design tools that help you quickly explore everything from rough concepts to high-fidelity prototypes.

    opened by shug0 0
  • New Additions List

    New Additions List

    Just thought we could add a listing of new additions to the SpellBook until the pull requests are handled - feel free to add your links below...

    We have requested adding ZIM to the Canvas 2D Libraries - https://zimjs.com

    Please come check us out!

    patreon3

    opened by danzen 0
  • Little improvement in expression

    Little improvement in expression

    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

    view angle normally refers to a specialized vocabulary, perspective is better.

    opened by phoenix1917 0
  • Outdated Links

    Outdated Links

    See Open Web Platform -> Learning -> What is the Internet Open Web Platform -> Learning -> Evolution of the Web -> 20 Things I Learned About Browsers and the Web

    opened by ycaptain 0
Owner
Dexter Yang
JS Hacker, Archmage of GUI, Web App Dev, Virtual World Builder, Fictional World Enthusiast, SF/F Nerd, Hardcore PC Gamer, Anime/Comic Otaku
Dexter Yang
GitHub
The vision is for NFTs as unique pages of a PICTURE~BOOK

The vision is for NFTs as unique pages of a PICTURE~BOOK. Where every component is an NFT. Not just the PAGE. Also the TITLE PAGE as a PROMO. The SNDTRACK. So we need a STRUCTURE for this, and a CONTRACT.

NetCinemo 2 Mar 13, 2022
Package fetcher is a bot messenger which gather npm packages by uploading either a json file (package.json) or a picture representing package.json. To continue...

package-fetcher Ce projet contient un boilerplate pour un bot messenger et l'executable Windows ngrok qui va permettre de créer un tunnel https pour c

AILI Fida Aliotti Christino 2 Mar 29, 2022
🌸 API for storing anime picture collection in Discord server

Waifuseum Waifuseum (Museum Waifu) is a simple REST API for storing and managing anime picture collection. This project use combinaton of ExpressJS, D

Bayu 4 Jul 24, 2022
🌸 API for storing anime picture collection in Discord server

Waifuseum Waifuseum (Museum Waifu) is a simple REST API for storing and managing anime picture collection. This project use combinaton of ExpressJS, D

Bayu Doesn't Care 4 Jun 28, 2022
Dynamic-web-development - Dynamic web development used CSS and HTML

Dynamic-web-development ASSISNMENT I just used CSS and HTML to make a mobile int

null 1 Feb 8, 2022
Big Chief is a website where you find and share everyday cooking inspiration. Discover recipes, cooks, videos, and how-tos based on the food you love.

Big Chief Big Chief is a website where you find and share everyday cooking inspiration. Discover recipes, cooks, videos, and how-tos based on the food

AVLESSI Matchoudi 7 Jun 1, 2022
Minimalistic portfolio/photography site with masonry grid, page transitions and big images.

Gatsby Starter Portfolio: Emilia Minimalistic portfolio/photography site with masonry grid, page transitions and big images. Themeable with Theme UI.

Cryptob3auty 1 May 20, 2022
The jQuery Plugin for Big Background Video (and Images)

BigVideo.js ####The jQuery Plugin for Big Background Video (and Images) Learn how to use this plugin on its demo page. 12-30-2015 Update This project

John Polacek 2.3k Jan 9, 2023
An IoT bottle that tracks water consumption. Winner of Best Health Hack, MLH's Best Hardware Hack, and QB3's Best Big Data for the Improvement of Health Care Winner at CruzHacks 2022.

An IoT bottle that tracks water consumption. Winner of Best Health Hack, MLH's Best Hardware Hack, and QB3's Best Big Data for the Improvement of Health Care Winner at CruzHacks 2022.

Nathanael Garza 2 Jan 21, 2022
WaffleHacks 2022 - Winner of 'Dream Big and Create More Cheers with AB InBev' & Honorable Mention for the Food Insecurity Track

Getting Started with Create React App Welcome to Leftover Marketplace. This is our project for WaffleHacks 2022. Links Presentation and Demo Video Web

Geer 3 Dec 27, 2022
A little animation for a big menu where the letters of a word shuffle to become the first letter of each menu item.

Letter Shuffle Animation for a Menu A little animation for a big menu where the letters of a word shuffle to become the first letter of each menu item

Codrops 29 Dec 4, 2022
Small utilities for big decimal numbers.

dnum dnum (Decimal Numbers) is a library that allows to operate on large numbers represented as a pair composed of a BigInt for the value, and a Numbe

Pierre Bertet 45 Dec 21, 2022
Console app - big float calculator <*/+->

Интерпритатор математических выражений Изначально для парсинга математических выражений я реализовал алгоритм сортировочной станции, в текущей версии

Daniil 3 Jul 16, 2022
Best practices for modern web development

Web Fundamentals on DevSite Welcome to the new WebFundamentals! An effort to showcase best practices and tools for modern Web Development. What's chan

Google 13.7k Dec 30, 2022
The project integrates workflow engine, report engine and organization authority management background, which can be applied to the development of OA, HR, CRM, PM and other systems. With tlv8 IDE, business system development, testing and deployment can be realized quickly.

介绍 项目集成了工作流引擎、报表引擎和组织机构权限管理后台，可以应用于OA、HR、CRM、PM等系统开发。配合使用tlv8 ide可以快速实现业务系统开发、测试、部署。 后台采用Spring MVC架构简单方便，前端使用流行的layui界面美观大方。 采用组件开发技术，提高系统的灵活性和可扩展性;采

Qian Chen 38 Dec 27, 2022
Forked from hayes0724/shopify-packer Modern development tool for Shopify using Webpack 5. Easy to extend and customize, zero build config, compatible with Slate and existing websites.

Shopify Packer Modern development tool for Shopify using Webpack 5. Easy to extend and customize, zero build config, comes with starter themes and com

Web & Mobile | eCommerce | Full-Stack Developer 4 Nov 24, 2022
A modern client panel for the Pterodactyl® panel, made by Wrible Development.

Dashboardsy A modern client panel for the Pterodactyl® panel, made by Wrible Development. Support Discord: https://discord.gg/zVcDkSZNu7 Screenshots S

Wrible Development 23 Jan 1, 2023
Learn Web 2.0 and Web 3.0 Development using Next.js, Typescript, AWS CDK, AWS Serverless, Ethereum and AWS Aurora Serverless

Learn Web 2.0 Cloud and Web 3.0 Development in Baby Steps In this course repo we will learn Web 2.0 cloud development using the latest state of the ar

Panacloud Multi-Cloud Internet-Scale Modern Global Apps 89 Jan 3, 2023
Shopping Cart - Project of HTML, CSS, and JavaScript developed by me (Raphael Martins) at the end of the Unit 9 Module 1 of the Web Development course at Trybe

Project of HTML, CSS, and JavaScript developed by me (Raphael Martins) at the end of the Unit 9 Module 1 of the Web Development course at Trybe. I was approved with 100% of the mandatory and optional requirements met.

Raphael Martins 13 Nov 27, 2022