All Projects → dexteryy → Spellbook Of Modern Webdev

dexteryy / Spellbook Of Modern Webdev

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

Projects that are alternatives of or similar to Spellbook Of Modern Webdev

Echat
基于Vue的点对点聊天项目
Stars: ✭ 130 (-99.03%)
Mutual labels:  html5, css3
Startup Landing
Collection of free top of the line startup landing templates built using react/nextjs/gatsby. Free to download, simply edit and deploy! Updated weekly!
Stars: ✭ 176 (-98.69%)
Mutual labels:  learning, webapp
Eleme
restructure..
Stars: ✭ 1,635 (-87.84%)
Mutual labels:  html5, css3
W3develops
The w3develops.org open source codebase - Learn, build, and meetup with other developers on DISCORD https://discord.gg/WphGvTT and YOUTUBE http://bit.ly/codingyt
Stars: ✭ 120 (-99.11%)
Mutual labels:  html5, css3
Github Ranking
🔍GitHub不同语言热门项目排行,Vue.js做页面展示
Stars: ✭ 160 (-98.81%)
Mutual labels:  html5, css3
Wxdraw
A lightweight canvas library which providing 2d draw for weapp 微信小程序2d动画库 😎 🐼
Stars: ✭ 1,625 (-87.92%)
Mutual labels:  html5, webapp
Roadmap Web Developer 2017
Front-end (HTML5/CSS3/Javascript related) technologies to learn in 2017
Stars: ✭ 142 (-98.94%)
Mutual labels:  html5, css3
Nukeviet
NukeViet CMS is multi Content Management System. NukeViet CMS is the 1st open source content management system in Vietnam. NukeViet was awarded the Vietnam Talent 2011, the Ministry of Education and Training Vietnam officially encouraged to use.
Stars: ✭ 113 (-99.16%)
Mutual labels:  html5, css3
Nanui
NanUI is an open source .NET project for .NET / .NET Core developers who want to use front-end technologies such as HTML5 / CSS3 to build user interfaces for Windows Form applications.
Stars: ✭ 2,090 (-84.46%)
Mutual labels:  html5, css3
React Template Easily
简单易用的react工程化模板,适用于h5,webapp,hybrid开发
Stars: ✭ 151 (-98.88%)
Mutual labels:  html5, webapp
Notes
胡写一通,乱写一气.杂七杂八.记录日常,若喜欢请Star,然后。。。。
Stars: ✭ 119 (-99.12%)
Mutual labels:  html5, css3
Freebies
Source code for Uisual templates. Free HTML/CSS landing page templates for startups. New template every week.
Stars: ✭ 170 (-98.74%)
Mutual labels:  html5, css3
Pi Temp
Web server using a Raspberry Pi and DHT22 sensor to graph the humidity and temperature in my apartment over time.
Stars: ✭ 114 (-99.15%)
Mutual labels:  html5, css3
Notes
👋 如果有一天我失忆了,忘记了所有的前端知识,我希望这个项目能让我很快掌握
Stars: ✭ 126 (-99.06%)
Mutual labels:  html5, css3
Flexy
Flexy is minimal CSS framework made with Flex
Stars: ✭ 114 (-99.15%)
Mutual labels:  html5, css3
Alien.js
Future web pattern
Stars: ✭ 141 (-98.95%)
Mutual labels:  html5, css3
Vlackjack
Blackjack built with Vue.js and vuex
Stars: ✭ 109 (-99.19%)
Mutual labels:  html5, css3
Construcao De Paginas Web
Desenvolvimento de páginas semânticas, acessíveis e responsivas. 🚀
Stars: ✭ 113 (-99.16%)
Mutual labels:  html5, css3
Lazy
Kule Lazy4 / CSS Framework
Stars: ✭ 147 (-98.91%)
Mutual labels:  html5, css3
Html
Set of simplified and stylized HTML elements
Stars: ✭ 165 (-98.77%)
Mutual labels:  html5, css3

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

Note that the project description data, including the texts, logos, images, and/or trademarks, for each open source project belongs to its rightful owner. If you wish to add or remove any projects, please contact us at [email protected].