# spellbook-of-modern-webdev
**Repository Path**: ulia/spellbook-of-modern-webdev
## Basic Information
- **Project Name**: spellbook-of-modern-webdev
- **Description**: A Big Picture, Thesaurus, and Taxonomy of Modern JavaScript Web Development
- **Primary Language**: Unknown
- **License**: Not specified
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No
## Statistics
- **Stars**: 0
- **Forks**: 0
- **Created**: 2020-06-09
- **Last Updated**: 2020-12-19
## Categories & Tags
**Categories**: Uncategorized
**Tags**: None
## README
Spellbook of Modern Web Dev
A Big Picture, Thesaurus, and Taxonomy of Modern JavaScript Web Development
* 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](https://medium.com/javascript-scene/why-im-thankful-for-js-fatigue-i-know-you-re-sick-of-those-words-but-this-is-different-296fae0c888f). Simply collecting more stuff or composing dozens of "awesome lists" into a single one will only exacerbate the [Javascript Fatigue](https://medium.com/@ericclemmons/javascript-fatigue-48d4011b6fc4). 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](https://github.com/dexteryy/spellbook-of-modern-webdev/pull/4#issuecomment-308073026)? [Why not add your project](https://github.com/dexteryy/spellbook-of-modern-webdev/pull/5)? [Why so many React-based projects? Why not Angular/Vue.js/XXX](http://www.npmtrends.com/rxjs-vs-mobx-vs-redux-vs-vue-vs-react-vs-@angular/core-vs-@cycle/dom-vs-backbone-vs-jquery-vs-vuex)?
#### Understanding Modern Web Development
* In English: coming soon...
* In Chinese: [slides](https://speakerdeck.com/dexteryy/understanding-modern-web-development-at-jsconf-china-2017-zhong-wen) @ [JSConf CN 2017](http://2017.jsconf.cn/#schedule)
## Platforms and Languages
### Open Web Platform
* Learning
* [What is the Internet](http://www.20thingsilearned.com/en-US/what-is-the-internet/), [How does the Internet work](https://www.w3.org/wiki/How_does_the_Internet_work)
* HTTP - see _[Server Side > Network](#network)_
* [Evolution of the Web](http://www.evolutionoftheweb.com/)
* [Timeline of web browsers](https://en.wikipedia.org/wiki/Timeline_of_web_browsers)
* [Dive Into HTML5 - A Quite Biased History of HTML5](http://diveintohtml5.info/past.html)
* [20 Things I Learned About Browsers and the Web](http://www.20thingsilearned.com/)
* MDN's [Learn Web Development](https://developer.mozilla.org/en-US/docs/Learn)
* [Mastering CSS Principles: A Comprehensive Guide](https://www.smashingmagazine.com/mastering-css-principles-comprehensive-reference-guide/)
* Reference
* [MDN Web Docs](https://developer.mozilla.org/en-US/docs/Web)
* [HTML](https://developer.mozilla.org/en-US/docs/Web/HTML/Reference), [SVG](https://developer.mozilla.org/en-US/docs/Web/SVG), [CSS](https://developer.mozilla.org/en-US/docs/Web/CSS/Reference), [DOM](https://developer.mozilla.org/en-US/docs/Web/API/Document_Object_Model), [DOM Events](https://developer.mozilla.org/en-US/docs/Web/Events), [Web APIs](https://developer.mozilla.org/en-US/docs/Web/API)
* [Google Developers](https://developers.google.com/web/)
* [Web Fundamentals](https://developers.google.com/web/fundamentals/), [HTML5Rocks](https://www.html5rocks.com/)
* Apple
* [WebKit JS](https://developer.apple.com/reference/webkitjs/), [WebKit DOM Programming Topics](https://developer.apple.com/library/content/documentation/AppleApplications/Conceptual/SafariJSProgTopics)
* [Safari Web Content Guide](https://developer.apple.com/library/content/documentation/AppleApplications/Reference/SafariWebContent/), [Safari HTML Reference](https://developer.apple.com/library/content/documentation/AppleApplications/Reference/SafariHTMLRef/Introduction.html), [Safari CSS Reference](https://developer.apple.com/library/content/documentation/AppleApplications/Reference/SafariCSSRef/), [Safari CSS Visual Effects Guide](https://developer.apple.com/library/content/documentation/InternetWeb/Conceptual/SafariVisualEffectsProgGuide/)
* [Microsoft Edge Developer Guide](https://docs.microsoft.com/en-us/microsoft-edge/dev-guide)
* CSS-Tricks's [CSS Almanac](https://css-tricks.com/almanac/), [Codrops' CSS Reference](https://tympanus.net/codrops/css_reference/)
* [HTML: The Living Standard (Web Developer Edition)](https://developers.whatwg.org/)
* [The Web platform: Browser technologies](https://platform.html5.org/)
* [W3Fools](http://www.w3fools.com/)
* [W3Schools Responds to W3Fools](https://readwrite.com/2011/01/17/w3schools-responds-to-w3fools/)
* [Why shouldn't I use W3Schools?](https://codereview.meta.stackexchange.com/questions/4975/why-shouldnt-i-use-w3schools-as-reference), [Why do people hate W3schools?](https://www.quora.com/Why-do-people-hate-W3schools-com), [Does W3Schools really suck?](https://www.quora.com/Does-W3Schools-really-suck)
* Visual Tools
* see _[Tooling > Useful Apps](#useful-apps) > Visual Tools_
* Performance
* Rendering
* [How Browsers Work: Behind the scenes of modern web browsers](https://www.html5rocks.com/en/tutorials/internals/howbrowserswork/), \
[How Browsers Lay Out Web Pages](https://dbaron.org/talks/2012-03-11-sxsw/master.xhtml)
* [Rendering Performance](https://developers.google.com/web/fundamentals/performance/rendering/)
* [GPU Animation: Doing It Right](https://www.smashingmagazine.com/2016/12/gpu-animation-doing-it-right/) / [An Introduction to Hardware Acceleration with CSS Animations](https://www.sitepoint.com/introduction-to-hardware-acceleration-css-animations/)
* [CSS will-change](https://developer.mozilla.org/en-US/docs/Web/CSS/will-change)
* [Everything You Need to Know About the CSS will-change Property](https://dev.opera.com/articles/css-will-change-property/)
* [CSS Containment in Chrome 52](https://developers.google.com/web/updates/2016/06/css-containment)
* Loading
* [How DNS works](https://howdns.works/)
* [PageSpeed Insights Rules](https://developers.google.com/speed/docs/insights/rules)
* [Critical Rendering Path](https://developers.google.com/web/fundamentals/performance/critical-rendering-path/),
[CSS and the critical path](http://www.phpied.com/css-and-the-critical-path/)
* [Evolution of Script Loading](https://www.stevesouders.com/blog/2010/12/06/evolution-of-script-loading/), [Browser script loading roundup](https://www.stevesouders.com/blog/2010/02/07/browser-script-loading-roundup/)
* Offline
* [Offline UX Considerations](https://developers.google.com/web/fundamentals/instant-and-offline/offline-ux)
* [The offline cookbook](https://jakearchibald.com/2014/offline-cookbook/)
* Measure
* [Measure Performance with the RAIL Model](https://developers.google.com/web/fundamentals/performance/rail)
* [Measuring Page Load Speed with Navigation Timing](https://www.html5rocks.com/en/tutorials/webperformance/basics/)
* [Measuring network performance with Resource Timing API](https://developers.googleblog.com/2013/12/measuring-network-performance-with.html)
* [User Timing API](https://www.html5rocks.com/en/tutorials/webperformance/usertiming/)
* Security
* [The Tangled Web: A Guide to Securing Modern Web Applications](http://lcamtuf.coredump.cx/tangled/)
* [HTML5 Security Cheatsheet](https://html5sec.org/)
* Semantics / SEO / Accessibility
* [Let’s Talk about Semantics](http://html5doctor.com/lets-talk-about-semantics/)
* [SEO Tutorial For Beginners in 2017](https://www.hobo-web.co.uk/seo-tutorial/), \
Google's [Search Engine Optimization Starter Guide](http://www.google.com/webmasters/docs/search-engine-optimization-starter-guide.pdf)
* [The A11Y Project](http://a11yproject.com/), [Using ARIA](https://w3c.github.io/using-aria/)
\>\> Return to [Table of Contents](#table-of-contents)
### HTML5 / Web APIs
* HTML / DOM
* [You Might Not Need jQuery](http://youmightnotneedjquery.com/), \
[You Don't Need jQuery](https://github.com/oneuijs/You-Dont-Need-jQuery), \
[(Now More Than Ever) You Might Not Need jQuery](https://css-tricks.com/now-ever-might-not-need-jquery/)
* [HEAD](https://github.com/joshbuchea/HEAD/)
* [favicon](https://github.com/audreyr/favicon-cheat-sheet)
* [Form pseudo-element](https://gist.github.com/webtobesocial/aefd6e25064c08e0cc9a)
* [Native form elements](http://nativeformelements.com/)
* [Detect DOM changes with Mutation Observers](https://developers.google.com/web/updates/2012/02/Detect-DOM-changes-with-Mutation-Observers)
* Appearance
* [Web Components](https://developers.google.com/web/updates/2017/01/webcomponents-org)
* [Shadow DOM v1](https://developers.google.com/web/fundamentals/getting-started/primers/shadowdom), [Custom Elements v1](https://developers.google.com/web/fundamentals/getting-started/primers/customelements)
* [Web Animations](https://developer.mozilla.org/en-US/docs/Web/API/Web_Animations_API)
* [Web Animation Past, Present, and Future](https://alistapart.com/article/web-animation-past-present-and-future)
* [Let's talk about the Web Animations API](http://danielcwilson.com/blog/2015/07/animations-intro/)
* Status - [Are we animated yet?](https://birtles.github.io/areweanimatedyet/)
* Interaction
* Desktop
* [MouseEvent](https://developer.mozilla.org/en-US/docs/Web/API/MouseEvent), [WheelEvent](https://developer.mozilla.org/en-US/docs/Web/API/WheelEvent), [KeyboardEvent](https://developer.mozilla.org/en-US/docs/Web/API/KeyboardEvent)
* [Drag and Drop](https://developer.mozilla.org/en-US/docs/Web/API/HTML_Drag_and_Drop_API), [Pointer Lock](https://developer.mozilla.org/en-US/docs/Web/API/Pointer_Lock_API)
* Mobile
* [TouchEvent](https://developer.mozilla.org/en-US/docs/Web/API/TouchEvent)
* [300ms tap delay, gone away](https://developers.google.com/web/updates/2013/12/300ms-tap-delay-gone-away), [More Responsive Tapping on iOS](https://webkit.org/blog/5610/more-responsive-tapping-on-ios/)
* [DeviceOrientationEvent + DeviceMotionEvent](https://developer.mozilla.org/en-US/docs/Web/API/Detecting_device_orientation)
* Hardware Agnostic
* [PointerEvent](https://developer.mozilla.org/en-US/docs/Web/API/PointerEvent), [Selection](https://developer.mozilla.org/en-US/docs/Web/API/Selection)
* [Intersection Observer API](https://developer.mozilla.org/en-US/docs/Web/API/Intersection_Observer_API) ([Intro](https://developers.google.com/web/updates/2016/04/intersectionobserver))
* [Resize Observer API](https://developers.google.com/web/updates/2016/10/resizeobserver)
* [Gamepad](https://developer.mozilla.org/en-US/docs/Web/API/Gamepad_API), [Web Speech](https://developer.mozilla.org/en-US/docs/Web/API/Web_Speech_API)
* Access
* [URL](https://developer.mozilla.org/en-US/docs/Web/API/URL), [History](https://developer.mozilla.org/en-US/docs/Web/API/History), [Navigator](https://developer.mozilla.org/en-US/docs/Web/API/Navigator), [Screen](https://developer.mozilla.org/en-US/docs/Web/API/Screen), [Page Visibility](https://developer.mozilla.org/en-US/docs/Web/API/Page_Visibility_API), [Clipboard](https://developer.mozilla.org/en-US/docs/tag/Clipboard%20API), [Performance](https://developer.mozilla.org/en-US/docs/Web/API/Performance), [Console](https://developer.mozilla.org/en-US/docs/Web/API/Console)
* [Permissions](https://developer.mozilla.org/en-US/docs/Web/API/Permissions_API), [Geolocation](https://developer.mozilla.org/en-US/docs/Web/API/Geolocation)
* [Web Notifications](https://developer.mozilla.org/en-US/docs/Web/API/Notifications_API) , [Vibration](https://developer.mozilla.org/en-US/docs/Web/API/Vibration_API)
* Network
* [XMLHttpRequest2](https://developer.mozilla.org/en-US/docs/Web/API/XMLHttpRequest)
* [Fetch](https://developer.mozilla.org/en-US/docs/Web/API/Fetch_API)
* [Abortable Fetch](https://developers.google.com/web/updates/2017/09/abortable-fetch)
* [Why I won’t be using Fetch API in my apps](https://medium.com/@shahata/why-i-wont-be-using-fetch-api-in-my-apps-6900e6c6fe78)
* [WebSocket](https://developer.mozilla.org/en-US/docs/Web/API/WebSocket), [Server-sent Event](https://developer.mozilla.org/en-US/docs/Web/API/EventSource)
* [WebRTC](https://developer.mozilla.org/en-US/docs/Web/API/WebRTC_API)
* [Getting Started with WebRTC](https://www.html5rocks.com/en/tutorials/webrtc/basics/)
* [WebRTC in the real world: STUN, TURN and signaling](https://www.html5rocks.com/en/tutorials/webrtc/infrastructure/)
* [WebRTC data channels](https://www.html5rocks.com/en/tutorials/webrtc/datachannels/)
* Workshop - [Codelabs - Real time communication with WebRTC](https://codelabs.developers.google.com/codelabs/webrtc-web/)
* Offline
* Overview
* [Offline First - HTML5 technologies for a faster, smarter, more engaging web](http://www.webdirections.org/offlineworkshop/ibooksDraft.pdf)
* [Web Storage](https://developer.mozilla.org/en-US/docs/Web/API/Web_Storage_API), [IndexedDB](https://developer.mozilla.org/en-US/docs/Web/API/IndexedDB_API#database_connection)
* [FileReader](https://developer.mozilla.org/en-US/docs/Web/API/FileReader), [File](https://developer.mozilla.org/en-US/docs/Web/API/File), [Blob](https://developer.mozilla.org/en-US/docs/Web/API/Blob)
* [Service Worker](https://developer.mozilla.org/en-US/docs/Web/API/Service_Worker_API)
* [Service Workers Explained](https://github.com/w3c/ServiceWorker/blob/master/explainer.md)
* [Service Workers: an Introduction](https://developers.google.com/web/fundamentals/getting-started/primers/service-workers), [The Service Worker Lifecycle](https://developers.google.com/web/fundamentals/instant-and-offline/service-worker/lifecycle)
* [Instant Loading Web Apps with an Application Shell Architecture](https://developers.google.com/web/updates/2015/11/app-shell)
* [Service Worker Cookbook](https://serviceworke.rs/)
* Status - [Is ServiceWorker Ready?](https://jakearchibald.github.io/isserviceworkerready/)
* [Progressive Web Apps](https://developers.google.com/web/progressive-web-apps/)
* [Progressive Web App Checklist](https://developers.google.com/web/progressive-web-apps/checklist)
* [Offline Storage for Progressive Web Apps](https://developers.google.com/web/fundamentals/instant-and-offline/web-storage/offline-for-pwa)
* [The PRPL pattern](https://developers.google.com/web/fundamentals/performance/prpl-pattern/)
* Workshop - [Codelabs - Your First Progressive Web App](https://codelabs.developers.google.com/codelabs/your-first-pwapp/)
* Media
* [\