diff --git a/README.md b/README.md index cfba2ad..b4fd509 100644 --- a/README.md +++ b/README.md @@ -1,10 +1,10 @@

- Spellbook of Modern Web Dev + Spellbook of Modern Web Dev

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

@@ -13,7 +13,7 @@
- Spellbook of Modern Web Dev + Spellbook of Modern Web Dev

@@ -33,7 +33,7 @@
- +

@@ -44,107 +44,107 @@ __Table of Contents__ - [Platforms and Languages](#platforms-and-languages) - - [Open Web Platform](#open-web-platform) - - Learning, Reference, Visual Tools - - Performance, Security, Semantics / SEO / Accessibility - - [HTML5 Features](#html5-features) - - HTML/DOM, Appearance, Interaction, Access, Network, Media, Graphics, Computing... - - [CSS Features](#css-features) - - RWD, Layout, Typography, Text, Animation, Effects... - - [Next Generation CSS](#next-generation-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...) - - [Next Generation JS](#next-generation-js) - - ES6+ Features, Intro to ES6+, Re-intro to JS, Important Proposals, Functional Programming, FRP, Static Typing, Code Style... - - [Node.js](#nodejs) - - Intro, Workshop, Best Practices... - - [Platform Compatibility and Proposal Status](#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](#cross-browser--polyfill-libraries) - - Appearance, Interaction, Access, Network, Performance, Offline, Media... - - [npm Ecosystem](#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](#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... + - [Open Web Platform](#open-web-platform) + - Learning, Reference, Visual Tools + - Performance, Security, Semantics / SEO / Accessibility + - [HTML5 Features](#html5-features) + - HTML/DOM, Appearance, Interaction, Access, Network, Media, Graphics, Computing... + - [CSS Features](#css-features) + - RWD, Layout, Typography, Text, Animation, Effects... + - [Next Generation CSS](#next-generation-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...) + - [Next Generation JS](#next-generation-js) + - ES6+ Features, Intro to ES6+, Re-intro to JS, Important Proposals, Functional Programming, FRP, Static Typing, Code Style... + - [Node.js](#nodejs) + - Intro, Workshop, Best Practices... + - [Platform Compatibility and Proposal Status](#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](#cross-browser--polyfill-libraries) + - Appearance, Interaction, Access, Network, Performance, Offline, Media... + - [npm Ecosystem](#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](#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](#universal-web-apps--web-pages) - - [GUI Framework](#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](#ui-toolkits) - - CSS, React... - - [Standalone UI Components](#standalone-ui-components) - - Layout, Icon, Button, Form, Overlay, Picker, Content, Editor... + - [GUI Framework](#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](#ui-toolkits) + - CSS, React... + - [Standalone UI Components](#standalone-ui-components) + - Layout, Icon, Button, Form, Overlay, Picker, Content, Editor... - [Client Side](#client-side) - - [UX Libraries](#ux-libraries) - - Drag & Drop, Gesture, Scrolling, Zoom, Tooltip, Tour... - - [Graphic Libraries](#graphic-libraries) - - Animation (Effects, Loading, Scrolling, Parallax, Transition, Timeline, Motion / Curved Path...) - - 2D (Canvas, SVG, Physics...), 3D (WebGL, Physics...) - - Data Visualization, Game... - - [Hybrid Libraries](#hybrid-libraries) - - Electron, React Native + - [UX Libraries](#ux-libraries) + - Drag & Drop, Gesture, Scrolling, Zoom, Tooltip, Tour... + - [Graphic Libraries](#graphic-libraries) + - Animation (Effects, Loading, Scrolling, Parallax, Transition, Timeline, Motion / Curved Path...) + - 2D (Canvas, SVG, Physics...), 3D (WebGL, Physics...) + - Data Visualization, Game... + - [Hybrid Libraries](#hybrid-libraries) + - Electron, React Native - [Server Side](#server-side) - - [Network](#network) - - HTTP (Intro, Same-origin policy, Performance, HTTPS, HTTP/2, gRPC...) - - TCP, UDP... - - [Server-side Best Practices](#server-side-best-practices) - - Restful API, SaaS, Microservices (API Gateway, Serverless) - - Cloud / Distributed, Web Hosting / Non-distributed - - Authentication / Authorization, Security, Logging / Monitoring, DevOps... - - [Microservices / API Services (Node.js)](#microservices--api-services-nodejs) - - Frameworks (RESTful API, Microservices, Serverless, Bots...), GraphQL, DocGen + CodeGen... - - [Server-side Libraries (Node.js)](#server-side-libraries-nodejs) - - Configuration, Debugging, Protocols, Network, Crypto, Auth, Storage, Jobs, Scraping, Images, Parsing / Generating, NLP... - - [Cloud Services (Global)](#cloud-services-global) - - Compute (FaaS / Serverless / WebHook, PaaS, CaaS) - - Storage (Object Storage, DBaaS) - - BaaS (CRUD, Auth, Search, Email, SMS...) - - AIaaS / BDaaS (Natural Language, Computer Vision...) - - [Cloud Services (China)](#cloud-services-china) - - The evil twins inside [the Great Firewall of China](https://github.com/dexteryy/spellbook-of-modern-webdev/pull/4) + - [Network](#network) + - HTTP (Intro, Same-origin policy, Performance, HTTPS, HTTP/2, gRPC...) + - TCP, UDP... + - [Server-side Best Practices](#server-side-best-practices) + - Restful API, SaaS, Microservices (API Gateway, Serverless) + - Cloud / Distributed, Web Hosting / Non-distributed + - Authentication / Authorization, Security, Logging / Monitoring, DevOps... + - [Microservices / API Services (Node.js)](#microservices--api-services-nodejs) + - Frameworks (RESTful API, Microservices, Serverless, Bots...), GraphQL, DocGen + CodeGen... + - [Server-side Libraries (Node.js)](#server-side-libraries-nodejs) + - Configuration, Debugging, Protocols, Network, Crypto, Auth, Storage, Jobs, Scraping, Images, Parsing / Generating, NLP... + - [Cloud Services (Global)](#cloud-services-global) + - Compute (FaaS / Serverless / WebHook, PaaS, CaaS) + - Storage (Object Storage, DBaaS) + - BaaS (CRUD, Auth, Search, Email, SMS...) + - AIaaS / BDaaS (Natural Language, Computer Vision...) + - [Cloud Services (China)](#cloud-services-china) + - The evil twins inside [the Great Firewall of China](https://github.com/dexteryy/spellbook-of-modern-webdev/pull/4) - [Tooling](#tooling) - - [Testing](#testing) - - Unit Testing / Test Runner, Test Doubles - - Web Testing (Integration Testing, Functional Testing, Visual testing, Monkey Testing, Headless Browsers) - - Server-side Testing (Functional Testing, Load Testing) - - Benchmark Testing - - Analysis (Code Coverage, Node.js Security...) - - [Documentation](#documentation) - - JS, API, CLI, CSS / Style Guide, Writing - - [Toolchain](#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](#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)](#command-line-environment-mac) - - Terminal, Homebrew, Zsh, Vim, Git, Docker, dotfiles, Utilities... - - [Command-line Libraries (Node.js)](#command-line-libraries-nodejs) - - Input (Options/Arguments Parser, Interactive, Configuration...) - - Output (Color / Style, Icon, Updating Log, Notice, Columns, Curses, Drawing...) - - Delivery, OS, API, Parser... - - [IDE / Editors](#ide--editors) - - Atom Plugins (UI, Formating, Operating, Static Analysis, Docs, Assistant, Integration...) - - Out-of-the-box Atom IDE, Other Electron-based IDE, Programming Fonts... - - [Useful Apps](#useful-apps) - - Playground, Visual Tools, Viewer, Docs, Automation... - - [Collaboration](#collaboration) - - Version Control, ChatOps, Kanban, Markdown, Design... + - [Testing](#testing) + - Unit Testing / Test Runner, Test Doubles + - Web Testing (Integration Testing, Functional Testing, Visual testing, Monkey Testing, Headless Browsers) + - Server-side Testing (Functional Testing, Load Testing) + - Benchmark Testing + - Analysis (Code Coverage, Node.js Security...) + - [Documentation](#documentation) + - JS, API, CLI, CSS / Style Guide, Writing + - [Toolchain](#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](#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)](#command-line-environment-mac) + - Terminal, Homebrew, Zsh, Vim, Git, Docker, dotfiles, Utilities... + - [Command-line Libraries (Node.js)](#command-line-libraries-nodejs) + - Input (Options/Arguments Parser, Interactive, Configuration...) + - Output (Color / Style, Icon, Updating Log, Notice, Columns, Curses, Drawing...) + - Delivery, OS, API, Parser... + - [IDE / Editors](#ide--editors) + - Atom Plugins (UI, Formating, Operating, Static Analysis, Docs, Assistant, Integration...) + - Out-of-the-box Atom IDE, Other Electron-based IDE, Programming Fonts... + - [Useful Apps](#useful-apps) + - Playground, Visual Tools, Viewer, Docs, Automation... + - [Collaboration](#collaboration) + - Version Control, ChatOps, Kanban, Markdown, Design... A Subset as a __Learning Path__ @@ -193,7 +193,7 @@ A Subset for __Architecture and Infrastructure__
- +

@@ -204,71 +204,71 @@ A Subset for __Architecture and Infrastructure__ ### 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/) + * [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/) - * [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) + * [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/) + * [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_ + * 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) - * 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/) + * 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) + * 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/) + * [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/) + * [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/) ### HTML5 Features * HTML / DOM - * [You Might Not Need jQuery](http://youmightnotneedjquery.com/), [You Don't Need jQuery](https://github.com/oneuijs/You-Dont-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) + * [You Might Not Need jQuery](http://youmightnotneedjquery.com/), [You Don't Need jQuery](https://github.com/oneuijs/You-Dont-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) @@ -277,35 +277,34 @@ A Subset for __Architecture and Infrastructure__ * [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) + * 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) - * [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/) + * [XMLHttpRequest2](https://developer.mozilla.org/en-US/docs/Web/API/XMLHttpRequest) / [Fetch](https://developer.mozilla.org/en-US/docs/Web/API/Fetch_API) + * [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) + * 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) @@ -320,26 +319,26 @@ A Subset for __Architecture and Infrastructure__ * [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 - * [\](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/video), [\](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/audio) - * [Web Audio API](https://developer.mozilla.org/en-US/docs/Web/API/Web_Audio_API) - * [Web Audio API Book](http://chimera.labs.oreilly.com/books/1234000001552/index.html) - * Workshop - [Web Audio School](https://github.com/mmckegg/web-audio-school) + * [\](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/video), [\](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/audio) + * [Web Audio API](https://developer.mozilla.org/en-US/docs/Web/API/Web_Audio_API) + * [Web Audio API Book](http://chimera.labs.oreilly.com/books/1234000001552/index.html) + * Workshop - [Web Audio School](https://github.com/mmckegg/web-audio-school) * [Media Streams](https://developer.mozilla.org/en-US/docs/Web/API/Media_Streams_API) * [Capturing Audio & Video in HTML5](https://www.html5rocks.com/en/tutorials/getusermedia/intro/) * Graphics - * [SVG](https://developer.mozilla.org/en-US/docs/Web/SVG) - * [Styling And Animating SVGs With CSS](https://www.smashingmagazine.com/2014/11/styling-and-animating-svgs-with-css/) - * [Canvas](https://developer.mozilla.org/en-US/docs/HTML/Canvas) - * [HTML5 Canvas](http://chimera.labs.oreilly.com/books/1234000001654/index.html) - * [WebGL](https://developer.mozilla.org/en-US/docs/Web/API/WebGL_API) - * [WebGL by example](https://developer.mozilla.org/en-US/docs/Learn/WebGL/By_example), [WebGL tutorial](https://developer.mozilla.org/en-US/docs/Web/API/WebGL_API/Tutorial), [Learning WebGL](http://learningwebgl.com/blog/?page_id=1217) - * [Primer: Shaders](https://notes.underscorediscovery.com/shaders-a-primer/), [An Introduction to Shaders](https://aerotwist.com/tutorials/an-introduction-to-shaders-part-1/) - * [The Book of Shaders](http://thebookofshaders.com/) - * Workshop -[Shader School](https://github.com/stackgl/shader-school), [WebGL Workshop](https://github.com/stackgl/webgl-workshop), [WebGL Academy](http://www.webglacademy.com/) - * [Learning Modern 3D Graphics Programming](https://paroj.github.io/gltut/) - * [WebVR](https://developer.mozilla.org/en-US/docs/Web/API/WebVR_API) - * Status - [WebVR Rocks](https://webvr.rocks/) - * Workshop - [Codelabs - Building for Virtual Reality on the Web](https://codelabs.developers.google.com/codelabs/webvr/) + * [SVG](https://developer.mozilla.org/en-US/docs/Web/SVG) + * [Styling And Animating SVGs With CSS](https://www.smashingmagazine.com/2014/11/styling-and-animating-svgs-with-css/) + * [Canvas](https://developer.mozilla.org/en-US/docs/HTML/Canvas) + * [HTML5 Canvas](http://chimera.labs.oreilly.com/books/1234000001654/index.html) + * [WebGL](https://developer.mozilla.org/en-US/docs/Web/API/WebGL_API) + * [WebGL by example](https://developer.mozilla.org/en-US/docs/Learn/WebGL/By_example), [WebGL tutorial](https://developer.mozilla.org/en-US/docs/Web/API/WebGL_API/Tutorial), [Learning WebGL](http://learningwebgl.com/blog/?page_id=1217) + * [Primer: Shaders](https://notes.underscorediscovery.com/shaders-a-primer/), [An Introduction to Shaders](https://aerotwist.com/tutorials/an-introduction-to-shaders-part-1/) + * [The Book of Shaders](http://thebookofshaders.com/) + * Workshop -[Shader School](https://github.com/stackgl/shader-school), [WebGL Workshop](https://github.com/stackgl/webgl-workshop), [WebGL Academy](http://www.webglacademy.com/) + * [Learning Modern 3D Graphics Programming](https://paroj.github.io/gltut/) + * [WebVR](https://developer.mozilla.org/en-US/docs/Web/API/WebVR_API) + * Status - [WebVR Rocks](https://webvr.rocks/) + * Workshop - [Codelabs - Building for Virtual Reality on the Web](https://codelabs.developers.google.com/codelabs/webvr/) * Computing * [Web Cryptography](https://developer.mozilla.org/en-US/docs/Web/API/Crypto) * [Web Workers](https://developer.mozilla.org/en-US/docs/Web/API/Web_Workers_API) @@ -351,55 +350,55 @@ A Subset for __Architecture and Infrastructure__ ### CSS Features * Basics - * [You Don't Need JavaScript](https://github.com/you-dont-need/You-Dont-Need-JavaScript) - * [CSS Selectors from CSS4 till CSS1](http://css4-selectors.com/selectors/) - * [CSS Diner - Where we feast on CSS Selectors!](http://flukeout.github.io/) - * [An Ultimate Guide To CSS Pseudo-Classes And Pseudo-Elements](https://www.smashingmagazine.com/2016/05/an-ultimate-guide-to-css-pseudo-classes-and-pseudo-elements/) - * [@supports Rule (Feature Queries)](https://www.sitepoint.com/an-introduction-to-css-supports-rule-feature-queries/) + * [You Don't Need JavaScript](https://github.com/you-dont-need/You-Dont-Need-JavaScript) + * [CSS Selectors from CSS4 till CSS1](http://css4-selectors.com/selectors/) + * [CSS Diner - Where we feast on CSS Selectors!](http://flukeout.github.io/) + * [An Ultimate Guide To CSS Pseudo-Classes And Pseudo-Elements](https://www.smashingmagazine.com/2016/05/an-ultimate-guide-to-css-pseudo-classes-and-pseudo-elements/) + * [@supports Rule (Feature Queries)](https://www.sitepoint.com/an-introduction-to-css-supports-rule-feature-queries/) * Responsive Web Design - * Intro - see _[Platforms and Languages > Next Generation CSS](#next-generation-css) > Know More about Web Design_ - * Media Queries - * [Media Queries for Standard Devices](https://css-tricks.com/snippets/css/media-queries-for-standard-devices/) - * Images - * [Responsive Images](https://developers.google.com/web/fundamentals/design-and-ui/responsive/images), [Responsive Images in CSS](https://css-tricks.com/responsive-images-css/) - * Units - * [Font Size Idea: px at the Root, rem for Components, em for Text Elements](https://css-tricks.com/rems-ems/), \ - [Understanding and Using rem Units in CSS](https://www.sitepoint.com/understanding-and-using-rem-units-in-css/) - * [Truly Fluid Typography With vh And vw Units](https://www.smashingmagazine.com/2016/05/fluid-typography/) + * Intro - see _[Platforms and Languages > Next Generation CSS](#next-generation-css) > Know More about Web Design_ + * Media Queries + * [Media Queries for Standard Devices](https://css-tricks.com/snippets/css/media-queries-for-standard-devices/) + * Images + * [Responsive Images](https://developers.google.com/web/fundamentals/design-and-ui/responsive/images), [Responsive Images in CSS](https://css-tricks.com/responsive-images-css/) + * Units + * [Font Size Idea: px at the Root, rem for Components, em for Text Elements](https://css-tricks.com/rems-ems/), \ + [Understanding and Using rem Units in CSS](https://www.sitepoint.com/understanding-and-using-rem-units-in-css/) + * [Truly Fluid Typography With vh And vw Units](https://www.smashingmagazine.com/2016/05/fluid-typography/) * [Layout](https://developer.mozilla.org/en-US/docs/Learn/CSS/CSS_layout) - * Flexbox, CSS Grid Layout - * [Using Flexbox today](https://chriswrightdesign.com/experiments/using-flexbox-today/) - * [CSS Grid, Flexbox And Box Alignment: Our New System For Web Layout](https://www.smashingmagazine.com/2016/11/css-grids-flexbox-and-box-alignment-our-new-system-for-web-layout/) - * [A Complete Guide to Flexbox](https://css-tricks.com/snippets/css/a-guide-to-flexbox/) - * [A Complete Guide to Grid](https://css-tricks.com/snippets/css/complete-guide-grid/) - * [Solved by Flexbox](https://philipwalton.github.io/solved-by-flexbox/), [Flexbox Patterns](http://www.flexboxpatterns.com/home) - * [Centering Elements with Flexbox](https://www.smashingmagazine.com/2013/05/centering-elements-with-flexbox/) - * [Quantity Queries with Flexbox](https://www.smashingmagazine.com/2015/07/quantity-ordering-with-css/) - * Traditional - * [Learn CSS Layout](http://learnlayout.com/) - * [Learn CSS Layout - the pedantic way](http://book.mixu.net/css/) - * [CSS Floats 101](https://alistapart.com/article/css-floats-101), [All About Floats](https://css-tricks.com/all-about-floats/), [CSS Float Theory: Things You Should Know](https://www.smashingmagazine.com/2007/05/css-float-theory-things-you-should-know/) - * [CSS Positioning 101](https://alistapart.com/article/css-positioning-101) - * [CSS “position: sticky” – Introduction and Polyfills](https://www.sitepoint.com/css-position-sticky-introduction-polyfills/) - * [The Z-Index CSS Property: A Comprehensive Look](https://www.smashingmagazine.com/2009/09/the-z-index-css-property-a-comprehensive-look/) - * [Centering in CSS: A Complete Guide](https://css-tricks.com/centering-css-complete-guide/), [Absolute Center an Image](https://css-tricks.com/snippets/css/absolute-center-vertical-horizontal-an-image/), [How To Center in CSS](http://howtocenterincss.com/) + * Flexbox, CSS Grid Layout + * [Using Flexbox today](https://chriswrightdesign.com/experiments/using-flexbox-today/) + * [CSS Grid, Flexbox And Box Alignment: Our New System For Web Layout](https://www.smashingmagazine.com/2016/11/css-grids-flexbox-and-box-alignment-our-new-system-for-web-layout/) + * [A Complete Guide to Flexbox](https://css-tricks.com/snippets/css/a-guide-to-flexbox/) + * [A Complete Guide to Grid](https://css-tricks.com/snippets/css/complete-guide-grid/) + * [Solved by Flexbox](https://philipwalton.github.io/solved-by-flexbox/), [Flexbox Patterns](http://www.flexboxpatterns.com/home) + * [Centering Elements with Flexbox](https://www.smashingmagazine.com/2013/05/centering-elements-with-flexbox/) + * [Quantity Queries with Flexbox](https://www.smashingmagazine.com/2015/07/quantity-ordering-with-css/) + * Traditional + * [Learn CSS Layout](http://learnlayout.com/) + * [Learn CSS Layout - the pedantic way](http://book.mixu.net/css/) + * [CSS Floats 101](https://alistapart.com/article/css-floats-101), [All About Floats](https://css-tricks.com/all-about-floats/), [CSS Float Theory: Things You Should Know](https://www.smashingmagazine.com/2007/05/css-float-theory-things-you-should-know/) + * [CSS Positioning 101](https://alistapart.com/article/css-positioning-101) + * [CSS “position: sticky” – Introduction and Polyfills](https://www.sitepoint.com/css-position-sticky-introduction-polyfills/) + * [The Z-Index CSS Property: A Comprehensive Look](https://www.smashingmagazine.com/2009/09/the-z-index-css-property-a-comprehensive-look/) + * [Centering in CSS: A Complete Guide](https://css-tricks.com/centering-css-complete-guide/), [Absolute Center an Image](https://css-tricks.com/snippets/css/absolute-center-vertical-horizontal-an-image/), [How To Center in CSS](http://howtocenterincss.com/) * Web Typography - * [Using @font-face](https://css-tricks.com/snippets/css/using-font-face/) - * [A Comprehensive Guide to Font Loading Strategies](https://www.zachleat.com/web/comprehensive-webfonts/) + * [Using @font-face](https://css-tricks.com/snippets/css/using-font-face/) + * [A Comprehensive Guide to Font Loading Strategies](https://www.zachleat.com/web/comprehensive-webfonts/) * Text - * [Handling Long Words and URLs](https://css-tricks.com/snippets/css/prevent-long-urls-from-breaking-out-of-container/) - * [writing-mode](https://developer.mozilla.org/en-US/docs/Web/CSS/writing-mode) + [text-orientation](https://developer.mozilla.org/en-US/docs/Web/CSS/text-orientation) + * [Handling Long Words and URLs](https://css-tricks.com/snippets/css/prevent-long-urls-from-breaking-out-of-container/) + * [writing-mode](https://developer.mozilla.org/en-US/docs/Web/CSS/writing-mode) + [text-orientation](https://developer.mozilla.org/en-US/docs/Web/CSS/text-orientation) * Animation - * CSS Transition - * [Using CSS transitions](https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Transitions/Using_CSS_transitions) - * [Intro to CSS 3D transforms](http://desandro.github.io/3dtransforms/) - * CSS Animation - * [The Guide To CSS Animation: Principles and Examples](https://www.smashingmagazine.com/2011/09/the-guide-to-css-animation-principles-and-examples/) - * [Upgrading CSS Animation With Motion Curves](https://www.smashingmagazine.com/2016/08/css-animations-motion-curves/) - * Motion Path - * [Animating Clipped Elements In SVG](https://www.smashingmagazine.com/2015/12/animating-clipped-elements-svg/) - * [Moving along a curved path in CSS with layered animation](http://tobiasahlin.com/blog/curved-path-animations-in-css/) - * [Future Use: CSS Motion Paths](https://codepen.io/danwilson/post/css-motion-paths) + * CSS Transition + * [Using CSS transitions](https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Transitions/Using_CSS_transitions) + * [Intro to CSS 3D transforms](http://desandro.github.io/3dtransforms/) + * CSS Animation + * [The Guide To CSS Animation: Principles and Examples](https://www.smashingmagazine.com/2011/09/the-guide-to-css-animation-principles-and-examples/) + * [Upgrading CSS Animation With Motion Curves](https://www.smashingmagazine.com/2016/08/css-animations-motion-curves/) + * Motion Path + * [Animating Clipped Elements In SVG](https://www.smashingmagazine.com/2015/12/animating-clipped-elements-svg/) + * [Moving along a curved path in CSS with layered animation](http://tobiasahlin.com/blog/curved-path-animations-in-css/) + * [Future Use: CSS Motion Paths](https://codepen.io/danwilson/post/css-motion-paths) * Effects * [CSS Image Effects](https://una.im/vintage-washout/) * [Web Image Effects Performance Showdown](https://www.smashingmagazine.com/2016/05/web-image-effects-performance-showdown/) @@ -408,19 +407,19 @@ A Subset for __Architecture and Infrastructure__ * [Understanding CSS Filter Effects](https://www.html5rocks.com/en/tutorials/filters/understanding-css/) * [Clipping and Masking in CSS](https://css-tricks.com/clipping-masking-css/) * [The State of CSS Reflections](https://css-tricks.com/state-css-reflections/) - * [CSS Shapes 101](https://alistapart.com/article/css-shapes-101) + * [CSS Shapes 101](https://alistapart.com/article/css-shapes-101) ### Next Generation CSS * [CSS Modules](https://github.com/css-modules/css-modules) - * [The End of Global CSS](https://medium.com/seek-blog/the-end-of-global-css-90d2a4a06284) + * [The End of Global CSS](https://medium.com/seek-blog/the-end-of-global-css-90d2a4a06284) * Tools - see _[Tooling > Toolchain](#toolchain) > Builder / Bundler > Webpack_ * [PostCSS](http://postcss.org/) - * Intro - * [Meet PostCSS](http://www.meetpostcss.com/) - * [PostCSS – A Comprehensive Introduction](https://www.smashingmagazine.com/2015/12/introduction-to-postcss/) - * [PostCSS – Sass Killer or Preprocessing Pretender?](https://ashleynolan.co.uk/blog/postcss-a-review) - * [PostCSS Playground](https://sneakertack.github.io/postcss-playground/) + * Intro + * [Meet PostCSS](http://www.meetpostcss.com/) + * [PostCSS – A Comprehensive Introduction](https://www.smashingmagazine.com/2015/12/introduction-to-postcss/) + * [PostCSS – Sass Killer or Preprocessing Pretender?](https://ashleynolan.co.uk/blog/postcss-a-review) + * [PostCSS Playground](https://sneakertack.github.io/postcss-playground/) * [CSSNext](http://cssnext.io/) * [It’s Time To Start Using CSS Custom Properties](https://www.smashingmagazine.com/2017/04/start-using-css-custom-properties/) * [Getting Started With CSS calc()](https://www.smashingmagazine.com/2015/12/getting-started-css-calc-techniques/) @@ -433,70 +432,70 @@ A Subset for __Architecture and Infrastructure__ * [Inline CSS at Khan Academy: Aphrodite](http://engineering.khanacademy.org/posts/aphrodite-inline-css.htm) * [JSS](http://cssinjs.org/), [Radium](http://formidable.com/open-source/radium/) * Best Practices - * [Skeleton.css](http://getskeleton.com/) / [Normalize.css](http://nicolasgallagher.com/about-normalize-css/) / [Reset.css](http://meyerweb.com/eric/tools/css/reset/) - * Methodology - * [BEM](https://en.bem.info/methodology/) - * [BEM 101](https://css-tricks.com/bem-101/) / [MindBEMding](https://csswizardry.com/2013/01/mindbemding-getting-your-head-round-bem-syntax/) - * [OOCSS](https://github.com/stubbornella/oocss/wiki) - * [An Introduction To Object Oriented CSS (OOCSS)](https://www.smashingmagazine.com/2011/12/an-introduction-to-object-oriented-css-oocss/) - * [SMACSS](https://smacss.com/) - * [RSCSS](http://rscss.io/), [SOLID CSS](http://blog.millermedeiros.com/solid-css/), [ITCSS](https://www.xfive.co/blog/itcss-scalable-maintainable-css-architecture/) - * [CSS Guidelines](https://cssguidelin.es/), [MaintainableCSS](https://maintainablecss.com/) - * Code Style - * [Idiomatic CSS](https://github.com/necolas/idiomatic-css) - * [Airbnb CSS / Sass Styleguide](https://github.com/airbnb/css) - * [Airbnb CSS-in-JavaScript Style Guide](https://github.com/airbnb/javascript/tree/master/css-in-javascript) - * CSS + HTML - * [Isobar Front-end Code Standards](http://isobar-idev.github.io/code-standards/) - * [Code Guide by @mdo](http://codeguide.co/) + * [Skeleton.css](http://getskeleton.com/) / [Normalize.css](http://nicolasgallagher.com/about-normalize-css/) / [Reset.css](http://meyerweb.com/eric/tools/css/reset/) + * Methodology + * [BEM](https://en.bem.info/methodology/) + * [BEM 101](https://css-tricks.com/bem-101/) / [MindBEMding](https://csswizardry.com/2013/01/mindbemding-getting-your-head-round-bem-syntax/) + * [OOCSS](https://github.com/stubbornella/oocss/wiki) + * [An Introduction To Object Oriented CSS (OOCSS)](https://www.smashingmagazine.com/2011/12/an-introduction-to-object-oriented-css-oocss/) + * [SMACSS](https://smacss.com/) + * [RSCSS](http://rscss.io/), [SOLID CSS](http://blog.millermedeiros.com/solid-css/), [ITCSS](https://www.xfive.co/blog/itcss-scalable-maintainable-css-architecture/) + * [CSS Guidelines](https://cssguidelin.es/), [MaintainableCSS](https://maintainablecss.com/) + * Code Style + * [Idiomatic CSS](https://github.com/necolas/idiomatic-css) + * [Airbnb CSS / Sass Styleguide](https://github.com/airbnb/css) + * [Airbnb CSS-in-JavaScript Style Guide](https://github.com/airbnb/javascript/tree/master/css-in-javascript) + * CSS + HTML + * [Isobar Front-end Code Standards](http://isobar-idev.github.io/code-standards/) + * [Code Guide by @mdo](http://codeguide.co/) * Know More about Web Design / [UI Design / UX Design](https://medium.com/@Mockplus/ux-vs-ui-vs-ia-vs-ixd-4-confusing-digital-design-terms-defined-ebd679f53f2) - * Responsive/Adaptive Web Design - * [Responsive Web Design Basics](https://developers.google.com/web/fundamentals/design-and-ui/responsive/) /\ - [Responsive Web Design: What It Is And How To Use It](https://www.smashingmagazine.com/2011/01/guidelines-for-responsive-web-design/) - * [The Difference Between Responsive and Adaptive Design](https://css-tricks.com/the-difference-between-responsive-and-adaptive-design/) - * [The Current State of Adaptive Design](https://medium.com/swlh/the-current-state-of-adaptive-design-6b2b89b258c4) - * Responsivedesign.is - [Design](https://responsivedesign.is/design/), [Develop](https://responsivedesign.is/develop/) - * Patterns - * [Responsive Web Design Patterns](https://developers.google.com/web/fundamentals/design-and-ui/responsive/patterns), \ - [Responsive Patterns](http://bradfrost.github.io/this-is-responsive/patterns.html), \ - [ResponsiveDesign.is Patterns](https://responsivedesign.is/patterns/) - * [Responsive Data Table Roundup](https://css-tricks.com/responsive-data-table-roundup/) - * [Atomic Design](http://bradfrost.com/blog/post/atomic-web-design/) ([Book](http://atomicdesign.bradfrost.com/table-of-contents/)) - * [The Atomic Workflow — People, Process, And Making Design Systems Happen](https://www.smashingmagazine.com/atomic-design-workflow/) - * [The “Other” Interface: Atomic Design With Sass](https://www.smashingmagazine.com/2013/08/other-interface-atomic-design-sass/) - * [Atomic Design – Your Ultimate Guide to Scalable & Modular CSS (Sass)](https://blog.alexdevero.com/atomic-design-scalable-modular-css-sass/) - * Motion Design - * [Creating Usability with Motion: The UX in Motion Manifesto](https://medium.com/ux-in-motion/creating-usability-with-motion-the-ux-in-motion-manifesto-a87a4584ddc) - * [10 principles for smooth web animations](https://blog.gyrosco.pe/smooth-css-animations-7d8ffc2c1d29) - * Grid System - [A Comprehensive Introduction to Grids in Web Design](https://webdesign.tutsplus.com/articles/a-comprehensive-introduction-to-grids-in-web-design--cms-26521) - * calc() grid system - [Lost Grid](http://lostgrid.org/) - * flexbox grid system - [Flexbox Grid](http://flexboxgrid.com/) - * [The 8-Point Grid](https://spec.fm/specifics/8-pt-grid) - * Typography - * [Typography.js](https://www.npmjs.com/package/typography) - * [Gutenberg](http://matejlatin.github.io/Gutenberg/) - * [The Elements of Typographic Style Applied to the Web](http://webtypography.net/toc/) - * [Why is Vertical Rhythm an Important Typography Practice?](https://zellwk.com/blog/why-vertical-rhythms/) - * [CSS with vertical rhythm](https://drewish.com/tools/vertical-rhythm/) - * [More Meaningful Typography](https://alistapart.com/article/more-meaningful-typography) - * [Modular Scale](http://www.modularscale.com/) - * Style Guide - * [Style Guide Driven Development / Living Style Guides](http://styleguides.io/) - * Tools - see _[Tooling > Documentation](#documentation) > Style Guide_ - * Examples - * Apple's [Human Interface Guidelines](https://developer.apple.com/design/) - * Google's [Material Design](https://material.io/) - * Microsoft's [Fluent Design System](http://fluent.microsoft.com/) - * Airbnb's [new design system](https://airbnb.design/building-a-visual-language/) - * Github's [Primer](http://primercss.io/) - * Atlassian's [Design Guidelines](https://atlassian.design/guidelines/product/overview) - * Salesforce's [Lightning Design System](https://www.lightningdesignsystem.com/) - * Yelp's [Styleguide](https://www.yelp.com/styleguide) - * IBM's [Living Language](https://www.ibm.com/design/language/) - * BBC's [GEL Guidelines](http://www.bbc.co.uk/gel/guidelines/) - * A List Apart's [pattern library](http://patterns.alistapart.com/) - * USA.gov's [Web Design Standards](https://standards.usa.gov/) - * MailChimp's [Email Design Guide](https://mailchimp.com/email-design-guide/) + * Responsive/Adaptive Web Design + * [Responsive Web Design Basics](https://developers.google.com/web/fundamentals/design-and-ui/responsive/) /\ + [Responsive Web Design: What It Is And How To Use It](https://www.smashingmagazine.com/2011/01/guidelines-for-responsive-web-design/) + * [The Difference Between Responsive and Adaptive Design](https://css-tricks.com/the-difference-between-responsive-and-adaptive-design/) + * [The Current State of Adaptive Design](https://medium.com/swlh/the-current-state-of-adaptive-design-6b2b89b258c4) + * Responsivedesign.is - [Design](https://responsivedesign.is/design/), [Develop](https://responsivedesign.is/develop/) + * Patterns + * [Responsive Web Design Patterns](https://developers.google.com/web/fundamentals/design-and-ui/responsive/patterns), \ + [Responsive Patterns](http://bradfrost.github.io/this-is-responsive/patterns.html), \ + [ResponsiveDesign.is Patterns](https://responsivedesign.is/patterns/) + * [Responsive Data Table Roundup](https://css-tricks.com/responsive-data-table-roundup/) + * [Atomic Design](http://bradfrost.com/blog/post/atomic-web-design/) ([Book](http://atomicdesign.bradfrost.com/table-of-contents/)) + * [The Atomic Workflow — People, Process, And Making Design Systems Happen](https://www.smashingmagazine.com/atomic-design-workflow/) + * [The “Other” Interface: Atomic Design With Sass](https://www.smashingmagazine.com/2013/08/other-interface-atomic-design-sass/) + * [Atomic Design – Your Ultimate Guide to Scalable & Modular CSS (Sass)](https://blog.alexdevero.com/atomic-design-scalable-modular-css-sass/) + * Motion Design + * [Creating Usability with Motion: The UX in Motion Manifesto](https://medium.com/ux-in-motion/creating-usability-with-motion-the-ux-in-motion-manifesto-a87a4584ddc) + * [10 principles for smooth web animations](https://blog.gyrosco.pe/smooth-css-animations-7d8ffc2c1d29) + * Grid System - [A Comprehensive Introduction to Grids in Web Design](https://webdesign.tutsplus.com/articles/a-comprehensive-introduction-to-grids-in-web-design--cms-26521) + * calc() grid system - [Lost Grid](http://lostgrid.org/) + * flexbox grid system - [Flexbox Grid](http://flexboxgrid.com/) + * [The 8-Point Grid](https://spec.fm/specifics/8-pt-grid) + * Typography + * [Typography.js](https://www.npmjs.com/package/typography) + * [Gutenberg](http://matejlatin.github.io/Gutenberg/) + * [The Elements of Typographic Style Applied to the Web](http://webtypography.net/toc/) + * [Why is Vertical Rhythm an Important Typography Practice?](https://zellwk.com/blog/why-vertical-rhythms/) + * [CSS with vertical rhythm](https://drewish.com/tools/vertical-rhythm/) + * [More Meaningful Typography](https://alistapart.com/article/more-meaningful-typography) + * [Modular Scale](http://www.modularscale.com/) + * Style Guide + * [Style Guide Driven Development / Living Style Guides](http://styleguides.io/) + * Tools - see _[Tooling > Documentation](#documentation) > Style Guide_ + * Examples + * Apple's [Human Interface Guidelines](https://developer.apple.com/design/) + * Google's [Material Design](https://material.io/) + * Microsoft's [Fluent Design System](http://fluent.microsoft.com/) + * Airbnb's [new design system](https://airbnb.design/building-a-visual-language/) + * Github's [Primer](http://primercss.io/) + * Atlassian's [Design Guidelines](https://atlassian.design/guidelines/product/overview) + * Salesforce's [Lightning Design System](https://www.lightningdesignsystem.com/) + * Yelp's [Styleguide](https://www.yelp.com/styleguide) + * IBM's [Living Language](https://www.ibm.com/design/language/) + * BBC's [GEL Guidelines](http://www.bbc.co.uk/gel/guidelines/) + * A List Apart's [pattern library](http://patterns.alistapart.com/) + * USA.gov's [Web Design Standards](https://standards.usa.gov/) + * MailChimp's [Email Design Guide](https://mailchimp.com/email-design-guide/) ### Next Generation JS @@ -510,38 +509,38 @@ A Subset for __Architecture and Infrastructure__ * [ES6 In Depth](https://hacks.mozilla.org/category/es6-in-depth/) * Nicholas C. Zakas's [Understanding ECMAScript 6](https://leanpub.com/understandinges6) * Re-intro to JS - * Articles - * MDN - * [A re-introduction to JavaScript (JS tutorial)](https://developer.mozilla.org/en-US/docs/Web/JavaScript/A_re-introduction_to_JavaScript) - * [Equality comparisons and sameness](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Equality_comparisons_and_sameness), [Data types and data structures](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Data_structures), [Closures](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Closures), [Inheritance and the prototype chain](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Inheritance_and_the_prototype_chain) - * [Concurrency model and Event Loop](https://developer.mozilla.org/en-US/docs/Web/JavaScript/EventLoop), [Memory Management](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Memory_Management) - * Dmitry Soshnikov - * [JavaScript. The Core](http://dmitrysoshnikov.com/ecmascript/javascript-the-core/) - * ECMA-262-3 in detail - * [Execution Contexts](http://dmitrysoshnikov.com/ecmascript/chapter-1-execution-contexts/), [Variable object](http://dmitrysoshnikov.com/ecmascript/chapter-2-variable-object/), [This](http://dmitrysoshnikov.com/ecmascript/chapter-3-this/), [Scope chain](http://dmitrysoshnikov.com/ecmascript/chapter-4-scope-chain/), [Functions](http://dmitrysoshnikov.com/ecmascript/chapter-5-functions/), [Closures](http://dmitrysoshnikov.com/ecmascript/chapter-6-closures/), [Evaluation strategy](http://dmitrysoshnikov.com/ecmascript/chapter-8-evaluation-strategy/) - * OOP: [The general theory](http://dmitrysoshnikov.com/ecmascript/chapter-7-1-oop-general-theory/), [ECMAScript implementation](http://dmitrysoshnikov.com/ecmascript/chapter-7-2-oop-ecmascript-implementation/), - * ECMA-262-5 in detail - * [Properties and Property Descriptors](http://dmitrysoshnikov.com/ecmascript/es5-chapter-1-properties-and-property-descriptors/), [Strict Mode](http://dmitrysoshnikov.com/ecmascript/es5-chapter-2-strict-mode/) - * Lexical environments: [Common Theory](http://dmitrysoshnikov.com/ecmascript/es5-chapter-3-1-lexical-environments-common-theory/), [ECMAScript implementation](http://dmitrysoshnikov.com/ecmascript/es5-chapter-3-2-lexical-environments-ecmascript-implementation/) - * Notes - * [Equality operators](http://dmitrysoshnikov.com/notes/note-2-ecmascript-equality-operators/), [Default values of parameters](http://dmitrysoshnikov.com/ecmascript/es6-notes-default-values-of-parameters/) - * Dmitri Pavlutin - * [equality operator](https://rainsoft.io/the-legend-of-javascript-equality-operator/), [undefined](https://rainsoft.io/7-tips-to-handle-undefined-in-javascript/) - * [variables hoisting](https://rainsoft.io/javascript-hoisting-in-details/), [variables lifecycle](https://rainsoft.io/variables-lifecycle-and-why-let-is-not-hoisted/) - * [declare functions](https://rainsoft.io/6-ways-to-declare-javascript-functions/), ['this' keyword](https://rainsoft.io/gentle-explanation-of-this-in-javascript/) - * [three dots](https://rainsoft.io/how-three-dots-changed-javascript/) - * [array creation](https://rainsoft.io/power-up-the-array-creation-in-javascript/), [object literals](https://rainsoft.io/why-object-literals-in-javascript-are-cool/) - * [well-known symbols](https://rainsoft.io/detailed-overview-of-well-known-symbols/) - * [small and plain functions](https://rainsoft.io/the-art-of-writing-small-and-plain-functions/) - * [unicode](https://rainsoft.io/what-every-javascript-developer-should-know-about-unicode/) - * Other - * [The Evolution of JavaScript Modularity](https://github.com/myshov/history-of-javascript/tree/master/4_evolution_of_js_modularity) - * [About object-oriented design and the “class” & “extends” keywords in ES6](http://blog.wolksoftware.com/about-classes-inheritance-and-object-oriented-design-in-typescript-and-es6) - * [JavaScript Regular Expression Enlightenment](http://codylindley.com/techpro/2013_05_14__javascript-regular-expression-/) - * Books: - * [Eloquent JavaScript](http://eloquentjavascript.net/) - * [Speaking JavaScript](http://speakingjs.com/es5/) - * [You Don't Know JS (book series)](https://github.com/getify/You-Dont-Know-JS) + * Articles + * MDN + * [A re-introduction to JavaScript (JS tutorial)](https://developer.mozilla.org/en-US/docs/Web/JavaScript/A_re-introduction_to_JavaScript) + * [Equality comparisons and sameness](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Equality_comparisons_and_sameness), [Data types and data structures](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Data_structures), [Closures](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Closures), [Inheritance and the prototype chain](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Inheritance_and_the_prototype_chain) + * [Concurrency model and Event Loop](https://developer.mozilla.org/en-US/docs/Web/JavaScript/EventLoop), [Memory Management](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Memory_Management) + * Dmitry Soshnikov + * [JavaScript. The Core](http://dmitrysoshnikov.com/ecmascript/javascript-the-core/) + * ECMA-262-3 in detail + * [Execution Contexts](http://dmitrysoshnikov.com/ecmascript/chapter-1-execution-contexts/), [Variable object](http://dmitrysoshnikov.com/ecmascript/chapter-2-variable-object/), [This](http://dmitrysoshnikov.com/ecmascript/chapter-3-this/), [Scope chain](http://dmitrysoshnikov.com/ecmascript/chapter-4-scope-chain/), [Functions](http://dmitrysoshnikov.com/ecmascript/chapter-5-functions/), [Closures](http://dmitrysoshnikov.com/ecmascript/chapter-6-closures/), [Evaluation strategy](http://dmitrysoshnikov.com/ecmascript/chapter-8-evaluation-strategy/) + * OOP: [The general theory](http://dmitrysoshnikov.com/ecmascript/chapter-7-1-oop-general-theory/), [ECMAScript implementation](http://dmitrysoshnikov.com/ecmascript/chapter-7-2-oop-ecmascript-implementation/), + * ECMA-262-5 in detail + * [Properties and Property Descriptors](http://dmitrysoshnikov.com/ecmascript/es5-chapter-1-properties-and-property-descriptors/), [Strict Mode](http://dmitrysoshnikov.com/ecmascript/es5-chapter-2-strict-mode/) + * Lexical environments: [Common Theory](http://dmitrysoshnikov.com/ecmascript/es5-chapter-3-1-lexical-environments-common-theory/), [ECMAScript implementation](http://dmitrysoshnikov.com/ecmascript/es5-chapter-3-2-lexical-environments-ecmascript-implementation/) + * Notes + * [Equality operators](http://dmitrysoshnikov.com/notes/note-2-ecmascript-equality-operators/), [Default values of parameters](http://dmitrysoshnikov.com/ecmascript/es6-notes-default-values-of-parameters/) + * Dmitri Pavlutin + * [equality operator](https://rainsoft.io/the-legend-of-javascript-equality-operator/), [undefined](https://rainsoft.io/7-tips-to-handle-undefined-in-javascript/) + * [variables hoisting](https://rainsoft.io/javascript-hoisting-in-details/), [variables lifecycle](https://rainsoft.io/variables-lifecycle-and-why-let-is-not-hoisted/) + * [declare functions](https://rainsoft.io/6-ways-to-declare-javascript-functions/), ['this' keyword](https://rainsoft.io/gentle-explanation-of-this-in-javascript/) + * [three dots](https://rainsoft.io/how-three-dots-changed-javascript/) + * [array creation](https://rainsoft.io/power-up-the-array-creation-in-javascript/), [object literals](https://rainsoft.io/why-object-literals-in-javascript-are-cool/) + * [well-known symbols](https://rainsoft.io/detailed-overview-of-well-known-symbols/) + * [small and plain functions](https://rainsoft.io/the-art-of-writing-small-and-plain-functions/) + * [unicode](https://rainsoft.io/what-every-javascript-developer-should-know-about-unicode/) + * Other + * [The Evolution of JavaScript Modularity](https://github.com/myshov/history-of-javascript/tree/master/4_evolution_of_js_modularity) + * [About object-oriented design and the “class” & “extends” keywords in ES6](http://blog.wolksoftware.com/about-classes-inheritance-and-object-oriented-design-in-typescript-and-es6) + * [JavaScript Regular Expression Enlightenment](http://codylindley.com/techpro/2013_05_14__javascript-regular-expression-/) + * Books: + * [Eloquent JavaScript](http://eloquentjavascript.net/) + * [Speaking JavaScript](http://speakingjs.com/es5/) + * [You Don't Know JS (book series)](https://github.com/getify/You-Dont-Know-JS) * Reference * [JavaScript Guide](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide) * [JavaScript Reference](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference) @@ -579,17 +578,17 @@ A Subset for __Architecture and Infrastructure__ * [Functional Programming in JavaScript](http://reactivex.io/learnrx/) * [RxMarbles](http://rxmarbles.com/) * Static Typing - * Intro - * [Why use static types in JavaScript?](https://medium.freecodecamp.com/why-use-static-types-in-javascript-part-1-8382da1e0adb) - * [You Might Not Need TypeScript (or Static Types)](https://medium.com/javascript-scene/you-might-not-need-typescript-or-static-types-aa7cb670a77b) - * [Flow](https://flow.org/en/docs/) - * [Flow Runtime](https://codemix.github.io/flow-runtime/) - * [Flow Comments](https://flow.org/blog/2015/02/20/Flow-Comments/) - * [TypeScript](http://www.typescriptlang.org/) - * [DefinitelyTyped](http://definitelytyped.org/), [TypeSearch](http://microsoft.github.io/TypeSearch/) - * [tcomb](https://www.npmjs.com/package/tcomb) - * [JSDoc Tags](https://github.com/google/closure-compiler/wiki/Annotating-JavaScript-for-the-Closure-Compiler) - * [jsdoc-to-assert](https://github.com/azu/jsdoc-to-assert) + * Intro + * [Why use static types in JavaScript?](https://medium.freecodecamp.com/why-use-static-types-in-javascript-part-1-8382da1e0adb) + * [You Might Not Need TypeScript (or Static Types)](https://medium.com/javascript-scene/you-might-not-need-typescript-or-static-types-aa7cb670a77b) + * [Flow](https://flow.org/en/docs/) + * [Flow Runtime](https://codemix.github.io/flow-runtime/) + * [Flow Comments](https://flow.org/blog/2015/02/20/Flow-Comments/) + * [TypeScript](http://www.typescriptlang.org/) + * [DefinitelyTyped](http://definitelytyped.org/), [TypeSearch](http://microsoft.github.io/TypeSearch/) + * [tcomb](https://www.npmjs.com/package/tcomb) + * [JSDoc Tags](https://github.com/google/closure-compiler/wiki/Annotating-JavaScript-for-the-Closure-Compiler) + * [jsdoc-to-assert](https://github.com/azu/jsdoc-to-assert) * Code Style * [Airbnb JavaScript Style Guide](https://github.com/airbnb/javascript) * [Node.js Style Guide](https://github.com/felixge/node-style-guide) @@ -599,13 +598,13 @@ A Subset for __Architecture and Infrastructure__ ### Node.js * Intro - * [The Art of Node](https://github.com/maxogden/art-of-node) - * [You Don’t Know Node](https://webapplog.com/you-dont-know-node/) - * [RisingStack's](https://blog.risingstack.com/node-js-at-scale-understanding-node-js-event-loop/) / [NodeSource's](https://nodesource.com/blog/understanding-the-nodejs-event-loop/) Understanding the Node.js Event Loop - * [Node.js Garbage Collection Explained](https://blog.risingstack.com/node-js-at-scale-node-js-garbage-collection/) - * [Stream Handbook](https://github.com/substack/stream-handbook) - * [A Brief History of Node Streams](https://medium.com/the-node-js-collection/a-brief-history-of-node-streams-pt-1-3401db451f21) - * [Understanding Object Streams](https://nodesource.com/blog/understanding-object-streams/) + * [The Art of Node](https://github.com/maxogden/art-of-node) + * [You Don’t Know Node](https://webapplog.com/you-dont-know-node/) + * [RisingStack's](https://blog.risingstack.com/node-js-at-scale-understanding-node-js-event-loop/) / [NodeSource's](https://nodesource.com/blog/understanding-the-nodejs-event-loop/) Understanding the Node.js Event Loop + * [Node.js Garbage Collection Explained](https://blog.risingstack.com/node-js-at-scale-node-js-garbage-collection/) + * [Stream Handbook](https://github.com/substack/stream-handbook) + * [A Brief History of Node Streams](https://medium.com/the-node-js-collection/a-brief-history-of-node-streams-pt-1-3401db451f21) + * [Understanding Object Streams](https://nodesource.com/blog/understanding-object-streams/) * [Keeping the Node.js core small](https://developer.ibm.com/node/2017/04/20/keeping-node-js-core-small/) * [Debugging Node.js with Google Chrome](https://medium.com/the-node-js-collection/debugging-node-js-with-google-chrome-4965b5f910f4) * [Add v8_inspector supports](https://medium.com/@paul_irish/debugging-node-js-nightlies-with-chrome-devtools-7c4a1b95ae27) @@ -622,26 +621,26 @@ A Subset for __Architecture and Infrastructure__ ### Platform Compatibility and Proposal Status * Web - * Platform Status - * [Can I Use](http://caniuse.com/) - * [Chrome](https://www.chromestatus.com/features), [WebKit](https://webkit.org/status/), [Firefox](https://platform-status.mozilla.org/), [Edge](https://developer.microsoft.com/en-us/microsoft-edge/platform/status/), [TBS](http://x5.tencent.com/tbs/guide/w3c.html) - * Platform Releases - * [Chrome](https://chromereleases.googleblog.com/), [Safari](https://developer.apple.com/library/content/releasenotes/General/WhatsNewInSafari/Introduction/Introduction.html) ([Webkit](https://trac.webkit.org/)), [Firefox](https://www.mozilla.org/en-US/firefox/releases/), [Edge](https://developer.microsoft.com/en-us/microsoft-edge/platform/changelog/) - * Platform Updates - * [Mozilla Hacks](https://hacks.mozilla.org/) - * [Web Updates](https://developers.google.com/web/updates/), [Chromium Blog](https://blog.chromium.org/) - * [Webkit Blog](https://webkit.org/blog/) - * [Microsoft Edge Dev Blog](https://developer.microsoft.com/en-us/microsoft-edge/community/) - * [Writing forward-compatible websites](https://developer.mozilla.org/en-US/docs/Web/Guide/Writing_forward-compatible_websites) - * Polyfill - [What is a Polyfill?](https://remysharp.com/2010/10/08/what-is-a-polyfill) - * Feature Detection - [Modernizr/feature-detects](https://github.com/Modernizr/Modernizr/tree/master/feature-detects), [feature.js](https://github.com/viljamis/feature.js/blob/master/feature.js) - * Browser/Device/Runtime Detection - see _[Platforms and Languages > Universal Utility Libraries](#universal-utility-libraries) > Parsing / Manipulating_ - * [Graded Browser Support](https://github.com/yui/yui3/wiki/Graded-Browser-Support) - [Grade components, not browsers](https://www.filamentgroup.com/lab/grade-the-components.html) - * Email - * [CSS Support Guide for Email Clients](https://www.campaignmonitor.com/css/) / [Email Client CSS Support](https://templates.mailchimp.com/resources/email-client-css-support/) - * [Email Design Reference](https://templates.mailchimp.com/) + [HTML Email Templates](https://github.com/mailchimp/Email-Blueprints) + * Platform Status + * [Can I Use](http://caniuse.com/) + * [Chrome](https://www.chromestatus.com/features), [WebKit](https://webkit.org/status/), [Firefox](https://platform-status.mozilla.org/), [Edge](https://developer.microsoft.com/en-us/microsoft-edge/platform/status/), [TBS](http://x5.tencent.com/tbs/guide/w3c.html) + * Platform Releases + * [Chrome](https://chromereleases.googleblog.com/), [Safari](https://developer.apple.com/library/content/releasenotes/General/WhatsNewInSafari/Introduction/Introduction.html) ([Webkit](https://trac.webkit.org/)), [Firefox](https://www.mozilla.org/en-US/firefox/releases/), [Edge](https://developer.microsoft.com/en-us/microsoft-edge/platform/changelog/) + * Platform Updates + * [Mozilla Hacks](https://hacks.mozilla.org/) + * [Web Updates](https://developers.google.com/web/updates/), [Chromium Blog](https://blog.chromium.org/) + * [Webkit Blog](https://webkit.org/blog/) + * [Microsoft Edge Dev Blog](https://developer.microsoft.com/en-us/microsoft-edge/community/) + * [Writing forward-compatible websites](https://developer.mozilla.org/en-US/docs/Web/Guide/Writing_forward-compatible_websites) + * Polyfill - [What is a Polyfill?](https://remysharp.com/2010/10/08/what-is-a-polyfill) + * Feature Detection - [Modernizr/feature-detects](https://github.com/Modernizr/Modernizr/tree/master/feature-detects), [feature.js](https://github.com/viljamis/feature.js/blob/master/feature.js) + * Browser/Device/Runtime Detection - see _[Platforms and Languages > Universal Utility Libraries](#universal-utility-libraries) > Parsing / Manipulating_ + * [Graded Browser Support](https://github.com/yui/yui3/wiki/Graded-Browser-Support) - [Grade components, not browsers](https://www.filamentgroup.com/lab/grade-the-components.html) + * Email + * [CSS Support Guide for Email Clients](https://www.campaignmonitor.com/css/) / [Email Client CSS Support](https://templates.mailchimp.com/resources/email-client-css-support/) + * [Email Design Reference](https://templates.mailchimp.com/) + [HTML Email Templates](https://github.com/mailchimp/Email-Blueprints) * ECMAScript - * [ECMAScript compatibility table](http://kangax.github.io/compat-table/es6/) + * [ECMAScript compatibility table](http://kangax.github.io/compat-table/es6/) * [Node.js ES2015 Support](http://node.green/) * Node 8.x - [V8 5.9](https://v8project.blogspot.hk/2017/04/v8-release-59.html), [Ignition + Turbofan launched](https://v8project.blogspot.hk/2017/05/launching-ignition-and-turbofan.html) * [Node 8.0 LTS](https://nodejs.org/en/blog/release/v8.0.0/) - [V8 5.8](https://v8project.blogspot.hk/2017/03/v8-release-58.html), [Five New Features You Need To Know](http://codingsans.com/blog/node-8) @@ -649,75 +648,75 @@ A Subset for __Architecture and Infrastructure__ * [Node 6.0 LTS](https://nodejs.org/en/blog/release/v6.0.0/) - [V8 5.0](https://v8project.blogspot.hk/2016/03/v8-release-50.html), 93% of ES6 language features * Performance - [Six Speed](https://kpdecker.github.io/six-speed/) * Proposal Status - * [W3C WG](https://www.w3.org/Consortium/activities#Working) (World Wide Web Consortium Working Groups) - * [Web Platform Publication Status](https://www.w3.org/WebPlatform/WG/PubStatus) - * [JavaScript APIs](https://www.w3.org/standards/techs/js), [Mobile Web Applications](https://www.w3.org/standards/techs/mobileapp), [CSS](https://www.w3.org/standards/techs/css) - * [CSS current work](https://www.w3.org/Style/CSS/current-work) - * [Current HTML5 Specifications](http://html5-overview.net/current) - * Inside - * [W3C TR (Technical Reports)](https://www.w3.org/2014/Process-20140801/#rec-advance) - * [An Inside View of the CSS Working Group at W3C](http://fantasai.inkedblade.net/weblog/2011/inside-csswg/) - * [WICG](https://wicg.github.io/admin/charter.html) (Web Incubator Community Group) - * [Proposals](https://github.com/WICG) - * [WHATWG](https://wiki.whatwg.org/wiki/FAQ#The_WHATWG) (Web Hypertext Application Technology Working Group) - * [WHATWG Live Standards](https://spec.whatwg.org/) - * Inside - * [W3C vs. WHATWG HTML5 Specs – The Differences Documented](http://developer.telerik.com/featured/w3c-vs-whatwg-html5-specs-differences-documented/) - * [ECMA TC39](http://ecma-international.org/memento/TC39.htm) (Ecma International Technical Committee 39) - * [Status, process, and documents for ECMA262](https://github.com/tc39/ecma262) - * [ECMAScript Proposals](https://github.com/tc39/proposals) - * Inside - * [The TC39 Process](http://tc39.github.io/process-document/) / [The TC39 process for ECMAScript features](http://2ality.com/2015/11/tc39-process.html) - * [Node.js CTC](https://github.com/nodejs/CTC) (Node.js Core Technical Committee) - * [Meeting Notes](https://github.com/nodejs/CTC/tree/master/meetings) - * [Node.js EPs (Enhancement Proposals)](https://github.com/nodejs/node-eps) - * Inside - * [How Node.js created a model open source community](https://readwrite.com/2016/04/15/how-node-js-model-open-source-community-pl1/) - * [Healthy Open Source](https://medium.com/the-node-js-collection/healthy-open-source-967fa8be7951) + * [W3C WG](https://www.w3.org/Consortium/activities#Working) (World Wide Web Consortium Working Groups) + * [Web Platform Publication Status](https://www.w3.org/WebPlatform/WG/PubStatus) + * [JavaScript APIs](https://www.w3.org/standards/techs/js), [Mobile Web Applications](https://www.w3.org/standards/techs/mobileapp), [CSS](https://www.w3.org/standards/techs/css) + * [CSS current work](https://www.w3.org/Style/CSS/current-work) + * [Current HTML5 Specifications](http://html5-overview.net/current) + * Inside + * [W3C TR (Technical Reports)](https://www.w3.org/2014/Process-20140801/#rec-advance) + * [An Inside View of the CSS Working Group at W3C](http://fantasai.inkedblade.net/weblog/2011/inside-csswg/) + * [WICG](https://wicg.github.io/admin/charter.html) (Web Incubator Community Group) + * [Proposals](https://github.com/WICG) + * [WHATWG](https://wiki.whatwg.org/wiki/FAQ#The_WHATWG) (Web Hypertext Application Technology Working Group) + * [WHATWG Live Standards](https://spec.whatwg.org/) + * Inside + * [W3C vs. WHATWG HTML5 Specs – The Differences Documented](http://developer.telerik.com/featured/w3c-vs-whatwg-html5-specs-differences-documented/) + * [ECMA TC39](http://ecma-international.org/memento/TC39.htm) (Ecma International Technical Committee 39) + * [Status, process, and documents for ECMA262](https://github.com/tc39/ecma262) + * [ECMAScript Proposals](https://github.com/tc39/proposals) + * Inside + * [The TC39 Process](http://tc39.github.io/process-document/) / [The TC39 process for ECMAScript features](http://2ality.com/2015/11/tc39-process.html) + * [Node.js CTC](https://github.com/nodejs/CTC) (Node.js Core Technical Committee) + * [Meeting Notes](https://github.com/nodejs/CTC/tree/master/meetings) + * [Node.js EPs (Enhancement Proposals)](https://github.com/nodejs/node-eps) + * Inside + * [How Node.js created a model open source community](https://readwrite.com/2016/04/15/how-node-js-model-open-source-community-pl1/) + * [Healthy Open Source](https://medium.com/the-node-js-collection/healthy-open-source-967fa8be7951) * JS Engine - * [A Guide to JavaScript Engines for Idiots](http://developer.telerik.com/featured/a-guide-to-javascript-engines-for-idiots/) - * [V8](https://developers.google.com/v8/) - * [How the V8 engine works?](http://thibaultlaurens.github.io/javascript/2013/04/29/how-the-v8-engine-works/) - * Internal - * [v8: a tale of two compilers](https://wingolog.org/archives/2011/07/05/v8-a-tale-of-two-compilers), \ - [A tour of V8: full compiler](http://jayconrod.com/posts/51/a-tour-of-v8-full-compiler) - * [A tour of V8: Garbage Collection](http://jayconrod.com/posts/55/a-tour-of-v8-garbage-collection) - * Next Generation - * [Ignition + TurboFan launch and Declarative JavaScript](http://benediktmeurer.de/2017/04/03/v8-behind-the-scenes-march-edition/) - * [Launching Ignition and TurboFan](https://v8project.blogspot.hk/2017/05/launching-ignition-and-turbofan.html) - * [A tale of TurboFan](http://benediktmeurer.de/2017/03/01/v8-behind-the-scenes-february-edition/) - * [Ignition + TurboFan and ES2015](http://benediktmeurer.de/2016/11/25/v8-behind-the-scenes-november-edition/) - * [JSC](https://trac.webkit.org/wiki/JavaScriptCore) - * [JavaScriptCore, the WebKit JS implementation](https://wingolog.org/archives/2011/10/28/javascriptcore-the-webkit-js-implementation) - * Internal - * [Introducing the WebKit FTL JIT](https://webkit.org/blog/3362/introducing-the-webkit-ftl-jit/) - * Next Generation - * [JSC Love ES6](https://webkit.org/blog/7536/jsc-loves-es6/) - * [Introducing the B3 JIT Compiler](https://webkit.org/blog/5852/introducing-the-b3-jit-compiler/) - * [Chakra](https://github.com/Microsoft/ChakraCore) - * [Microsoft Edge’s JavaScript engine to go open-source](https://blogs.windows.com/msedgedev/2015/12/05/open-source-chakra-core/) - * [Architecture Overview](https://github.com/Microsoft/ChakraCore/wiki/Architecture-Overview) - * [Node-ChakraCore and VM Neutrality in Node.js](https://blogs.windows.com/msedgedev/2016/11/29/node-chakracore-vm-neutrality/) - * Internal - * JavaScript performance updates - [2015](https://blogs.windows.com/msedgedev/2015/05/20/delivering-fast-javascript-performance-in-microsoft-edge), [2016](https://blogs.windows.com/msedgedev/2016/06/22/javascript-performance-updates-anniversary-update/), [2017](https://blogs.windows.com/msedgedev/2017/04/20/improved-javascript-performance-webassembly-shared-memory/) - * Next Generation - * [Roadmap](https://github.com/Microsoft/ChakraCore/wiki/Roadmap) - * Benchmarks - * [The truth about traditional JavaScript benchmarks](http://benediktmeurer.de/2016/12/16/the-truth-about-traditional-javascript-benchmarks/) - * [Browser Benchmarks](http://browserbench.org/) + * [A Guide to JavaScript Engines for Idiots](http://developer.telerik.com/featured/a-guide-to-javascript-engines-for-idiots/) + * [V8](https://developers.google.com/v8/) + * [How the V8 engine works?](http://thibaultlaurens.github.io/javascript/2013/04/29/how-the-v8-engine-works/) + * Internal + * [v8: a tale of two compilers](https://wingolog.org/archives/2011/07/05/v8-a-tale-of-two-compilers), \ + [A tour of V8: full compiler](http://jayconrod.com/posts/51/a-tour-of-v8-full-compiler) + * [A tour of V8: Garbage Collection](http://jayconrod.com/posts/55/a-tour-of-v8-garbage-collection) + * Next Generation + * [Ignition + TurboFan launch and Declarative JavaScript](http://benediktmeurer.de/2017/04/03/v8-behind-the-scenes-march-edition/) + * [Launching Ignition and TurboFan](https://v8project.blogspot.hk/2017/05/launching-ignition-and-turbofan.html) + * [A tale of TurboFan](http://benediktmeurer.de/2017/03/01/v8-behind-the-scenes-february-edition/) + * [Ignition + TurboFan and ES2015](http://benediktmeurer.de/2016/11/25/v8-behind-the-scenes-november-edition/) + * [JSC](https://trac.webkit.org/wiki/JavaScriptCore) + * [JavaScriptCore, the WebKit JS implementation](https://wingolog.org/archives/2011/10/28/javascriptcore-the-webkit-js-implementation) + * Internal + * [Introducing the WebKit FTL JIT](https://webkit.org/blog/3362/introducing-the-webkit-ftl-jit/) + * Next Generation + * [JSC Love ES6](https://webkit.org/blog/7536/jsc-loves-es6/) + * [Introducing the B3 JIT Compiler](https://webkit.org/blog/5852/introducing-the-b3-jit-compiler/) + * [Chakra](https://github.com/Microsoft/ChakraCore) + * [Microsoft Edge’s JavaScript engine to go open-source](https://blogs.windows.com/msedgedev/2015/12/05/open-source-chakra-core/) + * [Architecture Overview](https://github.com/Microsoft/ChakraCore/wiki/Architecture-Overview) + * [Node-ChakraCore and VM Neutrality in Node.js](https://blogs.windows.com/msedgedev/2016/11/29/node-chakracore-vm-neutrality/) + * Internal + * JavaScript performance updates - [2015](https://blogs.windows.com/msedgedev/2015/05/20/delivering-fast-javascript-performance-in-microsoft-edge), [2016](https://blogs.windows.com/msedgedev/2016/06/22/javascript-performance-updates-anniversary-update/), [2017](https://blogs.windows.com/msedgedev/2017/04/20/improved-javascript-performance-webassembly-shared-memory/) + * Next Generation + * [Roadmap](https://github.com/Microsoft/ChakraCore/wiki/Roadmap) + * Benchmarks + * [The truth about traditional JavaScript benchmarks](http://benediktmeurer.de/2016/12/16/the-truth-about-traditional-javascript-benchmarks/) + * [Browser Benchmarks](http://browserbench.org/) * Web Runtime / JS Runtime - * [Electron](https://electron.atom.io/) - * Tutorials - [Essential Electron](http://jlord.us/essential-electron/) - * [Cordova](https://cordova.apache.org/) - * [Platform Support](https://cordova.apache.org/docs/en/latest/guide/support/index.html) - * [Top Mistakes by Developers new to Cordova/Phonegap](https://github.com/jessemonroy650/top-phonegap-mistakes/blob/master/new-to-Phonegap.md) - * Curated Plugins - [Awesome Cordova Plugins](https://github.com/rdn87/awesome-cordova-plugins#list-plugins), [Telerik Verified Plugins](http://plugins.telerik.com/cordova) - * Finding Plugins - [plugreg](http://www.plugreg.com/) / [Plugin Search](https://cordova.apache.org/plugins/) - * [React Native](http://facebook.github.io/react-native/) / [NativeScript](https://www.nativescript.org/) / [Weex](https://weex-project.io/) - * [React Native Styling Cheat Sheet](https://github.com/vhpoet/react-native-styling-cheat-sheet) - * [Bridging in React Native - An in-depth look into React Native's core](https://tadeuzagallo.com/blog/react-native-bridge/) - * Tutorials - [React Native Express](http://www.reactnativeexpress.com/), [React Native Workshop](https://rangle-io.gitbooks.io/react-native-workshop/), [React Native Training](https://unbug.gitbooks.io/react-native-training/content/) - * Examples - [30 Days of React Native](https://github.com/fangwei716/30-days-of-react-native) + * [Electron](https://electron.atom.io/) + * Tutorials - [Essential Electron](http://jlord.us/essential-electron/) + * [Cordova](https://cordova.apache.org/) + * [Platform Support](https://cordova.apache.org/docs/en/latest/guide/support/index.html) + * [Top Mistakes by Developers new to Cordova/Phonegap](https://github.com/jessemonroy650/top-phonegap-mistakes/blob/master/new-to-Phonegap.md) + * Curated Plugins - [Awesome Cordova Plugins](https://github.com/rdn87/awesome-cordova-plugins#list-plugins), [Telerik Verified Plugins](http://plugins.telerik.com/cordova) + * Finding Plugins - [plugreg](http://www.plugreg.com/) / [Plugin Search](https://cordova.apache.org/plugins/) + * [React Native](http://facebook.github.io/react-native/) / [NativeScript](https://www.nativescript.org/) / [Weex](https://weex-project.io/) + * [React Native Styling Cheat Sheet](https://github.com/vhpoet/react-native-styling-cheat-sheet) + * [Bridging in React Native - An in-depth look into React Native's core](https://tadeuzagallo.com/blog/react-native-bridge/) + * Tutorials - [React Native Express](http://www.reactnativeexpress.com/), [React Native Workshop](https://rangle-io.gitbooks.io/react-native-workshop/), [React Native Training](https://unbug.gitbooks.io/react-native-training/content/) + * Examples - [30 Days of React Native](https://github.com/fangwei716/30-days-of-react-native) * Device * [The Ultimate Guide To iPhone Resolutions](https://www.paintcodeapp.com/news/ultimate-guide-to-iphone-resolutions) * [Device Metrics](https://material.io/devices/) / [Screen Sizes](http://screensiz.es/monitor) @@ -725,186 +724,186 @@ A Subset for __Architecture and Infrastructure__ ### Cross-browser / Polyfill Libraries * Appearance - * Responsive Web Design - * Media Queries - [Enquire.js](https://www.npmjs.com/package/enquire.js) - * Responsive Image - [Picturefill](https://www.npmjs.com/package/picturefill) - * [Viewport Units Buggyfill](https://www.npmjs.com/package/viewport-units-buggyfill) - * Web Typography - * `@font-face` - [Font Face Observer](https://www.npmjs.com/package/fontfaceobserver) - * Web Animation API - * [Web Animations Polyfill](https://www.npmjs.com/package/web-animations-js) - * Web Components - * [webcomponents.js (v1 spec polyfills)](https://github.com/webcomponents/webcomponentsjs) / [Polymer](https://www.polymer-project.org/) + * Responsive Web Design + * Media Queries - [Enquire.js](https://www.npmjs.com/package/enquire.js) + * Responsive Image - [Picturefill](https://www.npmjs.com/package/picturefill) + * [Viewport Units Buggyfill](https://www.npmjs.com/package/viewport-units-buggyfill) + * Web Typography + * `@font-face` - [Font Face Observer](https://www.npmjs.com/package/fontfaceobserver) + * Web Animation API + * [Web Animations Polyfill](https://www.npmjs.com/package/web-animations-js) + * Web Components + * [webcomponents.js (v1 spec polyfills)](https://github.com/webcomponents/webcomponentsjs) / [Polymer](https://www.polymer-project.org/) * Interaction - * Keyboard - [Mousetrap](https://craig.is/killing/mice) - * `scroll-behavior: smooth;` - [Smoothscroll Polyfill](https://www.npmjs.com/package/smoothscroll-polyfill) - * PointerEvent - [PEP](https://www.npmjs.com/package/pepjs) / [React Pointable](https://www.npmjs.com/package/react-pointable) - * [ResizeObserver Polyfill](https://github.com/que-etc/resize-observer-polyfill) + * Keyboard - [Mousetrap](https://craig.is/killing/mice) + * `scroll-behavior: smooth;` - [Smoothscroll Polyfill](https://www.npmjs.com/package/smoothscroll-polyfill) + * PointerEvent - [PEP](https://www.npmjs.com/package/pepjs) / [React Pointable](https://www.npmjs.com/package/react-pointable) + * [ResizeObserver Polyfill](https://github.com/que-etc/resize-observer-polyfill) * Access - * Web Notifications API - [Push.js](https://www.npmjs.com/package/push.js) / [Notify.js](https://www.npmjs.com/package/notifyjs) + * Web Notifications API - [Push.js](https://www.npmjs.com/package/push.js) / [Notify.js](https://www.npmjs.com/package/notifyjs) * Clipboard API - [Clipboard.js](https://www.npmjs.com/package/clipboard) / [copy-to-clipboard](https://www.npmjs.com/package/copy-to-clipboard) * Fullscreen API - [Screenfull](https://www.npmjs.com/package/screenfull) * Page Visibility API - [Visibility.js](https://www.npmjs.com/package/visibilityjs) * `