├── .github ├── ISSUE_TEMPLATE.md └── PULL_REQUEST_TEMPLATE.md ├── .gitignore ├── CONTRIBUTING.md ├── DISCLAIMER.md ├── README.md └── assets └── images └── gdgnd-js.png /.github/ISSUE_TEMPLATE.md: -------------------------------------------------------------------------------- 1 | ## Tags: 2 | **1-To report any broken link** - [Broken] 3 | **2-To fix any broken link** - [Fix-Broken] 4 | **3-To report any outdated link** - [Outdated] 5 | **4-To update any outdated link** - [Fix-Outdated] 6 | **5-To ask for help** - [Need-Help] 7 | **6-To suggest something (New Idea/Way/Anything)** - [Suggestion] 8 | **7-To add something new** - [Add] 9 | **8-To ask for something urgent (Please, use this if you really thinks something needs urgent attention)** - [URGENT] 10 | **9-To update something(Delete/Update)** - [Update] 11 | **10 -To fix a typo** - [Typo] 12 | 13 | ## Template 14 | > **Title** : [Your Tag Goes Here] _Your Title Goes Here (**Please be specific**)_ 15 | > **Description** : Add a link to the specific issue with some description 16 | 17 | ## Example 18 | 19 | > **Title** : [Fix-Broken] 3rd Blog link of ES6 20 | > **Description** : I would like report that 3rd link of the blog section (ES6) is not working and needs an update. _Link goes here_ 21 | 22 | 23 | -------------------------------------------------------------------------------- /.github/PULL_REQUEST_TEMPLATE.md: -------------------------------------------------------------------------------- 1 | Closes Issue - #Issue_no_goes_here 2 | -------------------------------------------------------------------------------- /.gitignore: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/gdgnewdelhi/javascript/69004f45574c076e1f9d4707dd17f0b308bde32c/.gitignore -------------------------------------------------------------------------------- /CONTRIBUTING.md: -------------------------------------------------------------------------------- 1 | > This list is the result of contrubutions of devs like you. Developers perform CRUD operations to make this list best. If you also want to contribute and make it better, then please feel free to do so. Just make sure you go through PR, Issue templates before creating one. 2 | 3 | PR Template- [Link](https://github.com/gdgnewdelhi/javascript/blob/master/.github/PULL_REQUEST_TEMPLATE.md) 4 | Issue Template- [Link](https://github.com/gdgnewdelhi/javascript/blob/master/.github/ISSUE_TEMPLATE.md) 5 | -------------------------------------------------------------------------------- /DISCLAIMER.md: -------------------------------------------------------------------------------- 1 | > GDG New Delhi is an independent group; our activities and the opinions expressed here should in no way be linked to Google, the corporation. To learn more about the GDG program, visit https://developers.google.com/groups/ 2 | . This is a community curated list and Google, the corporation doesn't endorse any of the link provided in the repo apart. 3 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | ![GDG New Delhi <3 JS](https://github.com/InsaneNaman/javascript/blob/master/assets/images/gdgnd-js.png) 2 | 3 |
4 | 5 | > You can consider this repo as the curated list of Javascript resources (Videos + Blogs + Projects) present all over the internet. One can use this for learning new framework/libraries or for refreshing their concepts. The motive behind starting this repo is to provide a all-in-one reference for javascript, build by GDG New Delhi community (For the community and by the community). All the listed links are __free__ resources i.e, blogs, youtube videos etc. We don't include paid resources because they might not be accessible to everyone. 6 | 7 | > *Feel Free to add some interesting stuff to the list*. 8 | 9 |
10 | 11 | ## Table of Contents 12 | * [Introduction](#introduction) 13 | * [How to use guide.](#how-to-use-guide) 14 | * [Some famous references](#some-famous-references) 15 | * MDN, w3schools, csstrick etc. 16 | * [ECMAScript (ES)](#ecmascript-es) 17 | * [ES6/ES2015](#es6es2015) 18 | * [ES7/ES2016](es7es2016) 19 | * [ES8/ES2017](#es8es2017) 20 | * [How a Web App works](#how-a-web-app-works) 21 | * [Basic Component of a Web App/Website](#basic-component-of-a-web-appwebsite) 22 | * [Frontend](#frontend) 23 | * [Backend](#backend) 24 | 25 | * [Frameworks](#frameworks) 26 | * [Front-End Frameworks](#front-end-frameworks) 27 | * [Angular](#1--angular) 28 | * [Polymer.js](#2--polymerjs) 29 | * [React.js](#3--reactjs) 30 | * [Vue.js](#4--vuejs) 31 | * [Ember.js](#5--emberjs) 32 | * [Back-End Frameworks (Node.js based)](#backend-frameworks) 33 | * [Sails.js](#1--sailsjs) 34 | * [Express.js](#2--expressjs) 35 | * [Restify.js](#3--restifyjs) 36 | * [Hapi.js](#4--hapijs) 37 | * [Koa.js](#5--koajs) 38 | * [Total.js](#6--totaljs) 39 | * [LoopBack](#7--loopback) 40 | * [Full Stack Frameworks](#fullstack-frameworks) 41 | * [Meteor.js](#1--meteorjs) 42 | * [Mean.js](#2--meanjs) 43 | * [Other Frameworks](#other-frameworks) 44 | * [Electron.js](#1--electronjs) 45 | * [Libraries](#libraries) 46 | * [RxJs](#1--rxjs) 47 | * [ngrx](#2--ngrx) 48 | * [Redux](#3--redux) 49 | * [AngularFire](#5--angularfire) 50 | 51 | * [Concepts- Tooling/ Linting/ Bundling etc](#concepts) 52 | * [Linters - ESLint, JSHint etc](#linters) 53 | * [Module Bundlers - Webpack etc](#module-bundlers) 54 | * [Task Runners- Gulp, npm Scripts, Grunt etc](#task-runners) 55 | * [Package Managers- npm, yarn etc.](#package-managers) 56 | * [Transpilers](#transpilers) 57 | * [Testing](#testing) 58 | * [JS is Everywhere](#js-is-everywhere) 59 | * [Progressive Web Apps](#progressive-web-apps) 60 | * [Augumented Reality (AR)](#augumented-reality-ar) 61 | * [Virtual Reality (VR)](#virtual-reality-vr) 62 | * [Machine Learning (Tensorflow.js, Brain.js)](#machine-learning-tensorflowjs-brainjs) 63 | 64 | ---------------- Awesome Random Stuff -------------------- 65 | * [Awesome Blogs]() 66 | * [Awesome Videos/talks]() 67 | * [Awesome Youtube Channels](#awesome-youtube-channels) 68 | * [Awesome Libraries](#awesome-libraries) 69 | * [Awesome Github](#awesome-github) 70 | * [Awesome Free Website Templates](#awesome-free-websites-templates) 71 | 72 | --- 73 | 74 | ## Introduction 75 | > JavaScript is the most widely deployed language in the world. Whether you’re interested in writing front-end client side code, back-end code for servers, or even game development, you’ll be able to accomplish all of this and more with JavaScript. 76 | 77 | 78 | In simple words, we can say that with the help of JS, one can create fully functional __dynamic website__, __Games__ , desktop apps for __Windows/Linux/Mac__ and even cross platform native apps for __Android and iOS__. 79 | 80 | --- 81 | 82 | ## How To Use Guide 83 | This repo has an Index which you can brief you about all the content(TOC). This guide covers all the JS frameworks like Angular, React etc, some bleeding edge technologies like Bots/ AR / VR /ML using JS, development cycle specific topics like Linting, Testing etc and some random things like UI libraries/Ebooks etc. So, please refer to [Table of Content](#table-of-contents) to get max out of it. 84 | 85 | ## Some Famous References 86 | You can use these resources to get explanation and docs on various concepts of JS and web . 87 | 88 | | __Reference Name__ | __Description__ | __Used For__ | 89 | | :-------------: |:-------------------:| :------------:| 90 | | [Mozilla Developer Network (MDN)](https://developer.mozilla.org/bm/docs/Web/JavaScript) | A wiki which is maintained by Mozilla and Web Dev Community | Understanding various JS concepts/methods, css related docs etc | 91 | | [w3schools](https://www.w3schools.com/js/default.asp) | w3schools is a website which is optimized for learning, testing, and training | Easy to understand guide, Working examples of various concepts of JS, HTML, CSS | 92 | | [Tutorialspoint](https://www.tutorialspoint.com/es6/index.htm) | Online training website | Working examples of JS, HTML, Java and many other techs | 93 | | [CssTricks](https://css-tricks.com/) | CSS learning hub | Explains many useful and complex topics of CSS | 94 | 95 | --- 96 | 97 | ## ECMAScript (ES) 98 | > ECMAScript (ES) is a scripting language specification standardized by ECMAScript International. It is used by applications to enable client-side scripting. Languages like JavaScript, Jscript and ActionScript are governed by this specification. 99 | __Note: If you are a newcomer then we recommed you to just get your hands on ES6 and thereafter you can start learning any new framework. ES7/ES8 = ES6 + few extra features.__ 100 | ### ES6/ES2015 101 | * __Intro__ 102 | ECMAScript 6 (ES6, often referred to as “Harmony”) is the sixth major release of the ECMAScript language specification. JS uses standards defined by ECMAScript. 103 | * __Blogs__ 104 | * [JavaScript — Just another introduction to ES6](https://medium.com/sons-of-javascript/javascript-an-introduction-to-es6-1819d0d89a0f) 105 | * __Questions__ 106 | * [JavaScript — WTF is ES6, ES8, ES 2017, ECMAScript… ?](https://codeburst.io/javascript-wtf-is-es6-es8-es-2017-ecmascript-dca859e4821c) 107 | * __Videos__ 108 | * [ES6 - Beau teaches JavaScript](https://www.youtube.com/watch?v=1mgLWu69ijU&list=PLWKjhJtqVAbljtmmeS0c-CEl2LdE-eR_F) 109 | * __Links__ 110 | * [All ES6 Docs at one place](http://es6-features.org/#Constants) 111 | * __Books__ 112 | * [You Don't Know JS by Getify](https://github.com/getify/You-Dont-Know-JS) 113 | 114 | ### ES7/ES2016 115 | * __Intro__ 116 | ECMAScript 8 or ECMAScript 2016 was official release of year 2016. 117 | * __Blogs__ 118 | * [Node University: ES7 and ES8 Features](https://node.university/blog/1621685/es7es8) 119 | * __Videos__ 120 | * [(YT) JavaScript ES6, ES7, ES8: Learn to Code on the Bleeding Edge](https://youtu.be/nZ1DMMsyVyI) 121 | * __Links__ 122 | 123 | ### ES8/ES2017 124 | * __Intro__ 125 | ECMAScript 8 or ECMAScript 2017 was officially released at the end of June 2017 by TC39 126 | * __Blogs__ 127 | * [ES8 was Released and here are its Main New Features by HackerNoon](https://hackernoon.com/es8-was-released-and-here-are-its-main-new-features-ee9c394adf66) 128 | * __Videos__ 129 | * [(YT) JavaScript ES6, ES7, ES8: Learn to Code on the Bleeding Edge](https://youtu.be/nZ1DMMsyVyI) 130 | * __Links__ 131 | ## How a Web App Works 132 | * __Intro__ 133 | Web app is a client–server computer program which the client (including the user interface and client-side logic) runs in a web browser. Common web applications include webmail, online retail sales, online auctions, wikis, instant messaging services and many other functions. All the source code is hosted on server(A computer somewhere in this world or cloud like AWS/GCP/Azure etc) and any browser request it to access its content. We can classify website in two broad terms i.e, Static websites - whose content doesn't change like Portfolio Websites and Dynamic Websites - whose content keeps on changing like Facebook, Twitter etc. 134 | * __Blogs__ 135 | * [How Web Apps works ](https://selftaughtcoders.com/how-web-apps-work/) 136 | * __Videos__ 137 | * [Website vs WebApps](https://www.youtube.com/watch?v=oj0SA_AVFNI) 138 | * __Links__ 139 | * [Stackoverflow-What's the difference between a web site and a web application?](https://stackoverflow.com/questions/8694922/whats-the-difference-between-a-web-site-and-a-web-application?utm_medium=organic&utm_source=google_rich_qa&utm_campaign=google_rich_qa) 140 | ## Basic Component of a Web App/Website 141 | ### Frontend 142 | * __Intro__ 143 | "Front-end" typically means the parts of the webapp a user interacts with. Everything which is visible on a website like Dropdown, buttons, input fields, colors (UI) comes under Frontend. 144 | * __Blogs__ 145 | * [Top 10 Frontend Frameworks of 2018 by KeyCDN](https://www.keycdn.com/blog/front-end-frameworks/) 146 | * __Videos__ 147 | * [Web Development in 2018 - A Practical Guide](https://www.youtube.com/watch?v=Zftx68K-1D4) 148 | * __Links__ 149 | * [Stackoverflow- What is the definition / difference of “backend” and a “frontend” in a software development / project?](https://stackoverflow.com/questions/18348612/what-is-the-definition-difference-of-backend-and-a-frontend-in-a-software) 150 | * [UpWork- Frontend vs Backend](https://www.upwork.com/hiring/for-clients/frontend-vs-backend-web-development/) 151 | * __Courses__ 152 | * [Udacity- Front End Frameworks](https://in.udacity.com/course/front-end-frameworks--ud894) 153 | ### Backend 154 | * __Intro__ 155 | "Back-end" covers the parts that webapps do, but the user is unaware of or cannot see for eg- Talking to the databases, making a 3rd party API request, running business logic etc. 156 | * __Blogs__ 157 | * [5 Best Node.js Frameworks to Know](https://devops.com/5-best-node-js-frameworks-know/) 158 | * [5 Popular Node.js Frameworks (And What They Do)](https://mayvendev.com/blog/5-popular-node-js-frameworks) 159 | * __Videos__ 160 | * [Web Development in 2018 - A Practical Guide](https://www.youtube.com/watch?v=Zftx68K-1D4) 161 | * __Links__ 162 | * [Stackoverflow- What is the definition / difference of “backend” and a “frontend” in a software development / project?](https://stackoverflow.com/questions/18348612/what-is-the-definition-difference-of-backend-and-a-frontend-in-a-software) 163 | * [UpWork- Frontend vs Backend](https://www.upwork.com/hiring/for-clients/frontend-vs-backend-web-development/) 164 | * __Courses__ 165 | 166 | ## Frameworks 167 | ### Front-End Frameworks 168 | ### 1- Angular 169 | * __Intro__ 170 | Angular is a JavaScript-based open-source front-end web application framework mainly maintained by Google and its community. 171 | * __Blogs__ 172 | * [Angular — Introduction to Reactive Extensions (RxJS)](https://medium.com/google-developer-experts/angular-introduction-to-reactive-extensions-rxjs-a86a7430a61f) 173 | * [Intro to Angular Material And Angular 6 — Material Design For Angular](https://medium.com/codingthesmartway-com-blog/angular-material-and-angular-6-material-design-for-angular-6b1a3ee476f0) 174 | * [Build A Real World Beautiful Web APP with Angular 6 — A to Z Ultimate Guide (2018) — PART I](https://medium.com/@hamedbaatour/build-a-real-world-beautiful-web-app-with-angular-6-a-to-z-ultimate-guide-2018-part-i-e121dd1d55e) 175 | * __Questions__ 176 | * [What is the difference between Angular 1 , Angular 2 and Angular 4?](https://www.angularminds.com/blog/article/comparison-difference-between-angular1-vs-angular2-vs-angular4.html) 177 | * __Videos__ 178 | * [(YT)Angular 5 Tutorial -Complete Overview](https://youtu.be/AaNZBrP26LQ) 179 | * [(YT)Learn Angular 6 in 60 Minutes - Free Beginners Crash Course by DesignCourse](https://youtu.be/z4JUm0Bq9AM) 180 | * [(YT)Getting Started with Angular 6 Material (Tutorial) by DesignCourse](https://www.youtube.com/watch?v=Fcr-gM-QThc) 181 | * [(YT)Setting up Angular 6 SEO in a Few Seconds? I'll show you how by DesignCourse](https://youtu.be/hxG9nuvnh-A) 182 | * __Links__ 183 | * [www.angular.io](https://angular.io/) 184 | 185 | ### 2- Polymer.js 186 | * __Intro__ 187 | Polymer is an open-source JavaScript library for building web applications using Web Components. The library is being developed by Google developers and contributors on GitHub. 188 | * __Blogs__ 189 | * [Polymer 3.0 Preview — Building a mini card game](https://medium.com/@jecelynyeen/polymer-3-0-preview-building-a-mini-card-game-ce8948265fd6) 190 | * [Getting started with Polymer 3.0](https://medium.com/@achuth.hadnoor/getting-started-with-polymer-3-0-b476f517ac0) 191 | * __Videos__ 192 | * [(YT) Web Components and the Polymer Project: Polymer 3.0 and beyond (Google I/O '18)](https://youtu.be/7CUO7PyD5zA) 193 | * __Links__ 194 | * [www.polymer-project.org](https://www.polymer-project.org/) 195 | ### 3- React.js 196 | * __Intro__ 197 | React is a JavaScript library for building user interfaces. It is maintained by Facebook and a community of individual developers and companies. 198 | * __Blogs__ 199 | * [How to build a React project from scratch using Webpack 4 and Babel](https://hackernoon.com/how-to-build-a-react-project-from-scratch-using-webpack-4-and-babel-56d4a26afd32) 200 | * [Getting Started With React And GraphQL](https://medium.com/codingthesmartway-com-blog/getting-started-with-react-and-graphql-395311c1e8da) 201 | * __Videos__ 202 | * [(YT) ReactJS Tutorial for Beginners - Getting Started with React](https://youtu.be/pgAvVxowaYU) 203 | * __Links__ 204 | * [reactjs.org](https://reactjs.org/) 205 | ### 4- Vue.js 206 | * __Intro__ 207 | Vue.js is an open-source JavaScript framework for building user interfaces. 208 | * __Blogs__ 209 | * [Vue.js Developers](https://medium.com/js-dojo/tagged/vuejs) 210 | * [Getting started with Vue 2](https://medium.com/viithiisys/getting-started-with-vue-2-7a2423bdcb23) 211 | * __Videos__ 212 | * [(YT) Vue JS 2 Tutorial Series(Playlist)](https://www.youtube.com/playlist?list=PL4cUxeGkcC9gQcYgjhBoeQH7wiAyZNrYa) 213 | * [(YT) Vue.js 2.0 In 60 Minutes](https://www.youtube.com/watch?v=z6hQqgvGI4Y) 214 | * [(YT) The Vue Tutorial for 2018 - Learn Vue 2 in 65 Minutes](https://www.youtube.com/watch?v=78tNYZUS-ps) 215 | * __Links__ 216 | * [vuejs.org](https://vuejs.org/) 217 | ### 5- Ember.js 218 | * __Intro__ 219 | Ember.js is an open-source JavaScript web framework, based on the Model–view–viewmodel pattern. It allows developers to create scalable single-page web applications 220 | * __Blogs__ 221 | * [How to learn EmberJS in a hurry](https://medium.com/ember-ish/how-to-learn-emberjs-in-a-hurry-c6fdeae256a0) 222 | * [Working with Ember.js: Part 1](https://medium.com/@abhilashmurthy/working-with-ember-js-part-1-a35af1d2b627) 223 | * __Videos__ 224 | * [(YT) Ember Tutorials - 2 and 3(Playlist)](https://www.youtube.com/playlist?list=PLelL5s7nDFKVVPZNwfnuDG-Xe_28F1PSO) 225 | * __Links__ 226 | * [www.emberjs.com](https://www.emberjs.com/) 227 | 228 | ### Backend Frameworks 229 | ### 1- Sails.js 230 | * __Intro__ 231 | Sails.js is a Model-View-Controller web application framework developed on the top the Node.js environment (Express). 232 | * __Blogs__ 233 | * [Intro to Sails.js](https://medium.com/@josephdlawson21/intro-to-sails-js-99a2016bf37d) 234 | * __Videos__ 235 | * [(YT) Build a Sails.js App [Playlist] - Sails & API Setup](https://www.youtube.com/watch?v=AmjiDC_JUt4&list=PLillGF-RfqbZIA-9sI3T1uu7d7_CtbwPm) 236 | * __Links__ 237 | * [www.sailsjs.com](https://sailsjs.com/) 238 | ### 2- Express.js 239 | * __Intro__ 240 | Express.js, or simply Express, is a web application framework for Node.js, 241 | * __Blogs__ 242 | * [Introduction to Node.js and Express.js](https://medium.com/javascript-scene/introduction-to-node-express-90c431f9e6fd) 243 | * [Getting Started with ExpressJS](https://codeburst.io/getting-started-with-expressjs-3cbb279bd5e6) 244 | * __Videos__ 245 | * [(YT) React & Express Starter Pack For Full Stack Development](https://youtu.be/v0t42xBIYIs) 246 | * [(YT) Express.js Tutorial: Building RESTful APIs with Node and Express](https://youtu.be/pKd0Rpw7O48) 247 | * __Links__ 248 | * [www.expressjs.com](https://expressjs.com) 249 | ### 3- Restify.js 250 | * __Intro__ 251 | Restify is a Node.js framework built to create RESTful Web services. 252 | * __Blogs__ 253 | * [Restify Quickstart](http://restify.com/docs/home/) 254 | * [In Depth Guide on Building a REST API with Node.js, Restify & MongoDB](https://medium.com/getstream-io/in-depth-guide-on-building-a-rest-api-with-node-js-restify-mongodb-2c9495d6225f) 255 | * __Videos__ 256 | * [(YT) Build REST APIs in Node.js using restify](https://youtu.be/ekYCw4kwgxY) 257 | * __Links__ 258 | * [www.restify.com](http://restify.com/) 259 | ### 4- Hapi.js 260 | * __Intro__ 261 | A rich Node.js framework for building applications and services. More Configuration less Code. 262 | * __Blogs__ 263 | * [Getting Started with Hapi.js](https://scotch.io/tutorials/getting-started-with-hapi-js) 264 | * [Creating RESTful API with Node.js: Hapi vs. Express](https://medium.com/@cabot_solutions/creating-restful-api-with-node-js-hapi-vs-express-ccb97a776c02) 265 | * [Introduction to Hapi.js](https://simpleprogrammer.com/introduction-hapijs/) 266 | * __Videos__ 267 | * [Hapi.js Framework Crash Course](https://youtu.be/2lprC0yYeFw) 268 | * __Links__ 269 | * [www.hapijs.com](https://hapijs.com/) 270 | ### 5- Koa.js 271 | * __Intro__ 272 | Koa is a Node.js web framework designed by the team behind Express, which aims to be a smaller, more expressive, and more robust foundation for web applications and APIs. 273 | * __Blogs__ 274 | * [What is Koa.js](https://medium.com/@mindfiresolutions.usa/what-is-koa-js-fc677df30795) 275 | * [Start Building Web Apps with KoaJS and TypeScript!](https://medium.com/netscape/start-building-web-apps-with-koajs-and-typescript-366264dec608) 276 | * __Videos__ 277 | * __Links__ 278 | * [www.koajs.com](https://koajs.com/) 279 | ### 6- Total.js 280 | * __Intro__ 281 | Full-featured Node.js Framework to create awesome and powerful websites, e-commerce, REST services, real-time applications or applications for IoT - Internet of Things. 282 | * __Blogs__ 283 | * [Best Ever Node.js CMS](https://medium.com/@petersirka/best-ever-node-js-cms-738a84ee6623) 284 | * [Peter Sirka on Medium](https://medium.com/@petersirka) 285 | * __Videos__ 286 | * __Links__ 287 | * [www.totaljs.com](https://www.totaljs.com/) 288 | ### 7- LoopBack 289 | * __Intro__ 290 | LoopBack is a highly-extensible, open-source API framework. 291 | * __Blogs__ 292 | * [Loopback Getting Started by loopback.io](https://loopback.io/getting-started/) 293 | * [How to Build a RESTful API with Authentication in 5 minutes — all from your command line](https://medium.freecodecamp.org/build-restful-api-with-authentication-under-5-minutes-using-loopback-by-expressjs-no-programming-31231b8472ca) 294 | * __Videos__ 295 | * [(YT) LoopBack REST API with Authentication](https://youtu.be/UTxhKZuVaG8) 296 | * [(YT) Full Stack React & LoopBack [Playlist]](https://www.youtube.com/playlist?list=PLillGF-RfqbZjJBAu0sx_0SCuFdzdx4iY) 297 | * __Links__ 298 | * [www.loopback.io](https://loopback.io/) 299 | 300 | ### Fullstack Frameworks 301 | ### 1- Meteor.js 302 | * __Intro__ 303 | Meteor is an open source platform for web, mobile, and desktop. It's a Nodejs based full stack framework that can easily help you create Web Apps, Desktop Apps (electron.js integration), Mobile Apps (cordova integration) etc. 304 | * __Blogs__ 305 | * [Getting Started with Meteor](https://themeteorchef.com/tutorials/getting-started-with-meteor) 306 | * [Meteor JS with a hint of React](https://medium.com/tmw-interactive/meteor-js-with-a-hint-of-react-b5111cffc634) 307 | * __Videos__ 308 | * [(YT) Build A Meteor.js App In 45 Minutes](https://youtu.be/9494-2E4riQ) 309 | * [(YT) What Is Meteor?](https://youtu.be/eOi3F6Kbl7E) 310 | * [(YT) Everything I can teach you about Meteor in 50 minutes - Introduction, Demo and Meteor 1.5](https://youtu.be/047cpW3zkIY) 311 | * __Links__ 312 | * [www.meteor.com](https://www.meteor.com/) 313 | ### 2- MEAN.js 314 | * __Intro__ 315 | Open-Source Full-Stack Solution For MEAN Applications. It can give you a headstart by providing fully enabled project (AngularJS + MongoDB + Node.js + Express.js). 316 | * __Blogs__ 317 | * [Meanjs Docs](http://meanjs.org/docs.html) 318 | * __Videos__ 319 | * __Links__ 320 | * [www.meanjs.org](http://meanjs.org/) 321 | * [https://github.com/meanjs/mean](https://github.com/meanjs/mean) 322 | 323 | ### Other Frameworks 324 | ### 1- Electron.js 325 | * __Intro__ 326 | Build cross platform __desktop apps__ with JavaScript, HTML, and CSS. [electronjs.org](https://electronjs.org/) 327 | * __Blogs__ 328 | * [Vue.js & Electron: The easy way](https://medium.com/@mikeal/vue-js-electron-the-easy-way-adc3ca09234a) 329 | * [Here’s how I created a markdown app with Electron and React](https://medium.freecodecamp.org/heres-how-i-created-a-markdown-app-with-electron-and-react-1e902f8601ca) 330 | * [Desktop apps with Angular](https://angularfirebase.com/lessons/desktop-apps-with-electron-and-angular/) 331 | * __Videos__ 332 | * [YT- Desktop Apps with Angular](https://youtu.be/u_vMChpZMCk) 333 | * __Links__ 334 | * 335 | 336 | ## Libraries 337 | ### 1- RXJS 338 | * __Intro__ 339 | Reactive programming is an asynchronous programming paradigm concerned with data streams and the propagation of change (Wikipedia). RxJS (Reactive Extensions for JavaScript) is a library for reactive programming using observables that makes it easier to compose asynchronous or callback-based code (RxJS Docs). 340 | * __Blogs__ 341 | * [RxJS blogs on medium](https://medium.com/tag/rxjs) 342 | * [RxJS by Example](https://codeburst.io/rxjs-by-example-part-1-ff7f1530071c) 343 | * [RxJS in 5 minutes](https://codeburst.io/rxjs-5-in-5-minutes-1c3b4ed0d8cc) 344 | * __Videos__ 345 | * [RxJS in depth](https://youtu.be/KOOT7BArVHQ) 346 | * __Links__ 347 | ### 2- ngrx 348 | * __Intro__ 349 | RxJS powered state management for Angular applications, inspired by Redux. 350 | * __Blogs__ 351 | * [ngrx series on Medium](https://medium.com/ngrx) 352 | * __Videos__ 353 | * [Angular ngrx Redux Quick Start Tutorial](https://youtu.be/f97ICOaekNU) 354 | * [Ngrx Store Tutorial for Angular - Learn State Management for Angular](https://youtu.be/9P5DTlg9oLc) 355 | * __Links__ 356 | ### 3- redux 357 | * __Intro__ 358 | Redux is a predictable state container for JavaScript apps. 359 | * __Blogs__ 360 | * [ReactJS Todo app tutorial with Redux](https://medium.com/@nomanbinhussein/reactjs-todo-app-tutorial-with-redux-57ca14cae621) 361 | * __Videos__ 362 | * [Redux Crash Course With React](https://youtu.be/93p3LxR9xfM) 363 | * __Links__ 364 | * [https://redux.js.org/](https://redux.js.org/) 365 | ### 4- NGXS 366 | * __Intro__ 367 | NGXS is a state management pattern + library for Angular. 368 | * __Blogs__ 369 | * __Videos__ 370 | * [YT-NGXS - Angular State Management](https://youtu.be/SGj11j4hxmg) 371 | * [YT-Angular NGXS Tutorial - An Alternative to Ngrx for State Management](https://www.youtube.com/watch?v=SfiO3bDUK7Q) 372 | * __Links__ 373 | ### 5- AngularFire 374 | * __Intro__ 375 | AngularFire is a library that can help you to use firebase with Angular. [https://github.com/angular/angularfire2](https://github.com/angular/angularfire2) 376 | * __Blogs__ 377 | * [Building An Angular 5 Project with Bootstrap 4 and Firebase](https://medium.com/codingthesmartway-com-blog/building-an-angular-5-project-with-bootstrap-4-and-firebase-4504ff7717c1) 378 | * __Videos__ 379 | * [YT- Firestore with AngularFire5 Quick Start Tutorial](https://youtu.be/-GjF9pSeFTs) 380 | * __Links__ 381 | 382 | ## Concepts 383 | ### Linters 384 | * __Intro__ 385 | Linters are automated tools that help programmers increase quality of their code. 386 | * __Blogs__ 387 | * [What are JavaScript linters?](https://www.codereadability.com/what-are-javascript-linters/) 388 | * [Thoughts about JavaScript linters and “lint driven development"](https://medium.com/@danielsternlicht/thoughts-about-javascript-linters-and-lint-driven-development-7c8f17e7e1a0) 389 | * [Four options to help you get started linting your JavaScript](https://blog.logrocket.com/four-options-to-help-you-get-started-linting-your-javascript-b4b829828648?gi=7ad7022680a1) 390 | * __Videos__ 391 | * [Atom Editor: Linters & Hinters](https://www.youtube.com/watch?v=dG9EEkSCbWM) 392 | * [VSCode Tutorials: Linting with ESLint](https://www.youtube.com/watch?v=cMrDePs86Uo) 393 | * [ESLint Quickstart: find errors automatically](https://www.youtube.com/watch?v=qhuFviJn-es) 394 | * __Links__ 395 | * [http://www.jslint.com/](http://www.jslint.com/) 396 | * [http://jshint.com/](http://jshint.com/) 397 | * [https://eslint.org/](https://eslint.org/) 398 | ### Module Bundlers 399 | * __Intro__ 400 | Combining(bundling) various modules used by a project into one single organized module is known as module bundling. Bundling Modules has various benefits like lowering App load time, automatic tree shaking etc. Some commonly used Javascript module bundlers are Browserify, RequireJS, Webpack. 401 | * __Blogs__ 402 | * [A Beginner’s Guide to Webpack 4 and Module Bundling](https://www.sitepoint.com/beginners-guide-webpack-module-bundling/) 403 | * [JavaScript Modules Part 2: Module Bundling](https://medium.freecodecamp.org/javascript-modules-part-2-module-bundling-5020383cf306) 404 | * [Understanding JavaScript Modules: Bundling & Transpiling](https://www.sitepoint.com/javascript-modules-bundling-transpiling/) 405 | * __Videos__ 406 | * [JS Module Bundlers, Totally Tooling Tips](https://www.youtube.com/watch?v=OhPUaEuEaXk) 407 | * [Webpack Crash Course](https://www.youtube.com/watch?v=lziuNMk_8eQ) 408 | * [Parcel](https://www.youtube.com/watch?v=b-6BeS-22yw) 409 | * __Links__ 410 | * [https://webpack.js.org/](https://webpack.js.org/) 411 | * [https://requirejs.org/](https://requirejs.org/) 412 | * [http://browserify.org/](http://browserify.org/) 413 | ### Task Runners 414 | * __Intro__ 415 | Task runners are tools used to automate tasks in the development process. They can be operations such as the compilation of TypeScript files or the compression of JavaScript files. The two most popular JavaScript task runners are Grunt and Gulp. 416 | * __Blogs__ 417 | * [Harness Machines](https://www.smashingmagazine.com/2016/06/harness-machines-productive-task-runners/) 418 | * [Grunt Introduction](https://www.tutorialspoint.com/grunt/) 419 | * [Gulp Introduction](https://www.tutorialspoint.com/gulp/) 420 | * __Videos__ 421 | * [Grunt JS Tutorial #1 - What is a Task Runner?](https://www.youtube.com/watch?v=KAD-l__vek4) 422 | * [Introduction to Gulp JavaScript Task Runner - Step by Step Tutorial](https://www.youtube.com/watch?v=1NzZg77VqdY) 423 | * __Links__ 424 | * [https://gruntjs.com/](https://gruntjs.com/) 425 | * [https://gulpjs.com/](https://gulpjs.com/) 426 | ### Package Managers 427 | * __Intro__ 428 | Package managers are pieces of softwares that let you manage the dependencies (external code written by you or someone else) that your project needs to work correctly. 429 | * __Blogs__ 430 | * [A Beginner’s Guide to npm — the Node Package Manager](https://www.sitepoint.com/beginners-guide-node-package-manager/) 431 | * [Yarn vs npm - which Node package manager to use in 2018?](https://blog.risingstack.com/yarn-vs-npm-node-js-package-managers/) 432 | * [Introduction to Yarn](https://flaviocopes.com/yarn/) 433 | * __Videos__ 434 | * [Introduction to NPM](https://www.youtube.com/watch?v=jHDhaSSKmB0) 435 | * [Yarn Crash Course](https://www.youtube.com/watch?v=g9_6KmiBISk) 436 | * __Links__ 437 | * [https://www.npmjs.com/](https://www.npmjs.com/) 438 | * [https://yarnpkg.com/en/](https://yarnpkg.com/en/) 439 | * [https://bower.io/](https://bower.io/) 440 | ### Transpilers 441 | * __Intro__ 442 | Transpilers, or source-to-source compilers, are tools that read source code written in one programming language, and produce the equivalent code in another language. Languages you write that transpile to JavaScript are often called compile-to-JS languages, and are said to target JavaScript. 443 | * __Blogs__ 444 | * [JavaScript Transpilers: What They Are & Why We Need Them](https://scotch.io/tutorials/javascript-transpilers-what-they-are-why-we-need-them) 445 | * [A Comparison of Different Javascript Transpilers](http://www.discoversdk.com/blog/a-comparison-of-different-javascript-transpilers) 446 | * __Videos__ 447 | * [ES6 and Typescript Tutorial - 2 - Transpiler](https://www.youtube.com/watch?v=dVut_aE2XX8) 448 | * [Netflix JavaScript Talks - Transpilers: Bridge to the Future](https://www.youtube.com/watch?v=M1qm-AWWu-M) 449 | * __Links__ 450 | * [https://www.typescriptlang.org/](https://www.typescriptlang.org/) 451 | * [https://coffeescript.org/](https://coffeescript.org/) 452 | * [Languages The compile to Js](https://github.com/jashkenas/coffeescript/wiki/list-of-languages-that-compile-to-js) 453 | ### Testing 454 | * __Intro__ 455 | Software testing is defined as an activity to check whether the actual results match the expected results and to ensure that the system is Defect free. Generally there are three types of testing methods, Unit testing, Integration testing and End to End testing. 456 | * __Blogs__ 457 | * [An Overview of JavaScript Testing in 2018](https://medium.com/welldone-software/an-overview-of-javascript-testing-in-2018-f68950900bc3) 458 | * [Unit Testing in JavaScript with Mocha](https://www.taniarascia.com/unit-testing-in-javascript/) 459 | * [Testing Angular with Jasmine and Karma](https://scotch.io/tutorials/testing-angular-with-jasmine-and-karma-part-1) 460 | * __Videos__ 461 | * [Intro To JavaScript Unit Testing With Mocha JS & Chai](https://www.youtube.com/watch?v=MLTRHc5dk6s) 462 | * [Testing Angular 2+ Apps with Jasmine and Karma](https://www.youtube.com/watch?v=yG4FH60fhUE) 463 | * [Introduction To Testing With Jest - React Testing For Beginners](https://www.youtube.com/watch?v=D9DdY2WmM-s) 464 | * __Links__ 465 | * [https://mochajs.org/](https://mochajs.org/) 466 | * [https://karma-runner.github.io](https://karma-runner.github.io/latest/index.html) 467 | * [https://www.cypress.io/](https://www.cypress.io/) 468 | 469 | 470 | 471 | 472 | ## JS is Everywhere 473 | ### Progressive Web Apps 474 | * __Intro__ 475 | Progressive Web Apps are user experiences that have the reach of the web, and are: Reliable(Load instantly and never show the downasaur, even in uncertain network conditions), Fast(Respond quickly to user interactions with silky smooth animations and no janky scrolling) and Engaging(Feel like a natural app on the device, with an immersive user experience). You can use any framework like React, Angular, Polymer or even plane vanilla JS for creating PWA. 476 | * __Blogs__ 477 | * [React Progressive Web Apps — Part 1](https://medium.com/progressive-web-apps/react-progressive-web-apps-part-1-1cf381421672) 478 | * __Videos__ 479 | * [YT- Using Firebase to make a PWA (Progressive Web App) #AskFirebase](https://www.youtube.com/watch?v=iHqqUoqvYx4) 480 | * [YT- Progressive Web Apps with Angular](https://www.youtube.com/watch?v=51Nd_mTpugY) 481 | * [YT- PWAs vs Native (aka There's A Progressive Web App For That)](https://youtu.be/vhg01Ml-8pI) 482 | * __Links__ 483 | * [Progressive Web Apps by Google Developers](https://developers.google.com/web/progressive-web-apps/) 484 | * [PWAs on Medium](https://medium.com/progressive-web-apps) 485 | * __Courses__ 486 | * [Codelabs by Google Developers](https://developers.google.com/web/fundamentals/codelabs/) 487 | * [Progressive Web App Training by Google Developers](https://developers.google.com/web/ilt/pwa/) 488 | 489 | ### Augumented Reality (AR) 490 | * __Intro__ 491 | Web also supports AR with the help of some cool libraries. You just need a browser to make a WebAR app. 492 | * __Libraries__ 493 | * [AR.js](https://jeromeetienne.github.io/AR.js/) 494 | * [Google ARCore](https://developers.google.com/ar/develop/web/quickstart) 495 | * __Blogs__ 496 | * [Augmented Reality in 10 Lines of HTML](https://medium.com/arjs/augmented-reality-in-10-lines-of-html-4e193ea9fdbf) 497 | * __Videos__ 498 | * [Easy Augmented Reality (AR) With JavaScript | AR.js | A-Frame](https://youtu.be/Nc1dPd6gIRU) 499 | * __Links__ 500 | 501 | ### Virtual Reality (VR) 502 | * __Intro__ 503 | WebVR is an experimental JavaScript API that provides support for virtual reality devices, such as the HTC Vive, Oculus Rift, Google Cardboard or OSVR in a web browser. Experience Virtual Reality right into the browser. 504 | * __Blogs__ 505 | * __Videos__ 506 | * [Future of the VR Web - Josh Carpenter UX Lead for WebVR at Google](https://youtu.be/8Ev7Wh9dSfo) 507 | * __Links__ 508 | * [WebVR Experiments by Google](https://experiments.withgoogle.com/collection/webvr) 509 | * [WebVR by Google Developers](https://developers.google.com/web/fundamentals/vr/) 510 | * [Mixed Reality by Mozilla](https://mixedreality.mozilla.org/) 511 | * __Libraries__ 512 | * [A-Frame](https://aframe.io/) 513 | * [WebVR Rocks](https://webvr.rocks/) 514 | ### Machine Learning (Tensorflow.js, Brain.js) 515 | * __Intro__ 516 | Machine Learning can be implemented in the browser using some famous libraries like TensorFlow.js, Brain.js and many others. 517 | * __Blogs__ 518 | * [Introducing TensorFlow.js: Machine Learning in Javascript](https://medium.com/tensorflow/introducing-tensorflow-js-machine-learning-in-javascript-bf3eab376db) 519 | * [A Web Developer's Guide to Machine Learning in JavaScript](https://www.robinwieruch.de/machine-learning-javascript-web-developers/) 520 | * __Videos__ 521 | * [YT- Machine Learning in JavaScript (TensorFlow Dev Summit 2018)](https://youtu.be/YB-kfeNIPCE) 522 | * [YT(Playlist)-Introduction to TensorFlow.js - Intelligence and Learning](https://www.youtube.com/watch?v=Qt3ZABW5lD0&list=PLRqwX-V7Uu6YIeVA3dNxbR9PYj4wV31oQ) 523 | * [Machine Learning Tutorial for Beginners - USING JAVASCRIPT!](https://www.youtube.com/watch?v=9Hz3P1VgLz4) 524 | * __Links__ 525 | * [Tensorflow.js](https://js.tensorflow.org/) 526 | ## Awesome Youtube Channels 527 | You can use these channels to learn JS and its frameworks/libraries . 528 | 529 | | __Reference Name__ | __Description__ | __Used For__ | 530 | | :-------------: |:-------------------:| :------------:| 531 | | [freecodecamp](https://www.youtube.com/channel/UC8butISFwT-Wl7EV0hUK0BQ) | freecodecamp YT channel has many tutorial series on various JS frameworks | ES6, Angular, vue.js, React etc | 532 | | [AngularFirebase](https://www.youtube.com/channel/UCsBjURrPoezykLs9EqgamOA) | AngularFirebase channel covers various tutorials on angular and its integration with different frameworks/services like firebase,electron,stripe etc | All about angular | 533 | | [Google Developers](https://www.youtube.com/channel/UC_x5XG1OV2P6uZZ5FSM9Ttw) | Google Developers channel covers many google technologies and news | Getting updates on JS related news, tutorial series by googlers etc | 534 | | [LearnCode.academy](https://www.youtube.com/user/learncodeacademy/) | They make tutorials on things like ES6, libraries and framework | ES6, Brain.js, vue.js etc | 535 | | [Academind](https://www.youtube.com/channel/UCSJbGtTlrDami-tDGPUV9-w) | The person behind this channel is a udemy instructor and make awesome videos on JS | Angular, ES6, vue.js, React.js and many more | 536 | | [Traversy Media ](https://www.youtube.com/user/TechGuyWeb/) | Traversy Media releases many tutorials on web development and programming | Angular, Node.js, PHP, python and many more | 537 | | [LevelUpTuts](https://www.youtube.com/user/LevelUpTuts) | LevelUpTuts also deals with web tech like React, Angular, Node, Meteor etc| Angular, React, Meteor, Node etc | 538 | | [Fun Fun Function](https://www.youtube.com/channel/UCO1cgjhGzsSYb1rsB4bFe4Q) | Ex-spotify engineer releases awesome web tutorials| Angular, React, Meteor, Node , Js libraries, New awesome js stuff and much more | 539 | | [Wes Bos](https://www.youtube.com/user/wesbos) | Wes bos is one of the best tutor, web developer. | CSS Grid, ES6, HTML, JS and its frameworks | 540 | | [The Net Ninja](https://www.youtube.com/channel/UCW5YeuERMmlnqo4oq8vwUpg) | Net Ninja also covers many topics like Node.js GraphQL etc | React, Node.js, GraphQL and many more | 541 | | [DevTips](https://www.youtube.com/user/DevTipsForDesigners/playlists) | DevTips includes tutorials on Git, Web Designing, CSS | Web Designing, CSS, Bootstrap etc | 542 | | [Codecourse](https://www.youtube.com/user/phpacademy/playlists) | Codecourse mostly talks about PHP and its frameworks but do include many other tutorials as well | PHP, Laravel, etc | 543 | | [The Coding Train](https://www.youtube.com/user/shiffman/playlists) | Coding train includes many topics like WebGL, physics in JS, tensorflow.js, ml5.js which is built on top of TF.js and many more | WebGL, complex physics in JS, tensorflow.js, ES6 | 544 | | [React Cast](https://www.youtube.com/channel/UCZkjWyyLvzWeoVWEpRemrDQ) | ReactCasts is a good youtube channels which has many short ReactJS screencast and also covers Redux | ReactJS , Redux , ES6 | 545 | | [DesignCourse](https://www.youtube.com/channel/UCVyRiMvfUNMA1UPlDPzG5Ow) | DesignCourse covers many topics of Web Designing / Angular/ Rxjs/ Adobe softwars | Web Designing like using SVGs in Web, Angular, Rxjs, HTML and CSS etc | 546 | 547 | 548 | ## Awesome Libraries 549 | * __Blogs__ 550 | 1- [10 Best Free Animation Libraries For The Web](https://www.webdesignerdepot.com/2018/01/10-best-free-animation-libraries-for-the-web/amp/?__twitter_impression=true) 551 | 552 | * __Libraries__ 553 | * __UI__ 554 | 1- [Notyf](http://carlosroso.com/notyf/) - A dead simple, responsive, vanilla javascript notification plugin. No jQuery required. 555 | 2- [Parallax.js](https://pixelcog.github.io/parallax.js/) - Parallax.js is a dirt simple parallax scrolling effect inspired by Spotify.com and implemented as a jQuery plugin. 556 | 3- [Stellar.js](http://markdalgleish.com/projects/stellar.js/) - Parallax has never been easier. 557 | 4- [Relax.js](https://dixonandmoe.com/rellax/) - Parallax library based on VanillaJS 558 | 559 | * __Utility__ 560 | 1- [Moment.js](https://momentjs.com/) - Parse, validate, manipulate, and display dates and times in JavaScript. 561 | 2- [Lodash](https://lodash.com/) - A modern JavaScript utility library delivering modularity, performance & extras. 562 | 3- [Underscore](http://underscorejs.org/) - Underscore is a JavaScript library that provides a whole mess of useful functional. 563 | 564 | ## Awesome Github 565 | * [JavaScript Stack from Scratch](https://github.com/verekia/js-stack-from-scratch) 566 | * [You Don't Know JS](https://github.com/getify/You-Dont-Know-JS) 567 | 568 | ## Awesome Free Websites Templates 569 | PS: All the links listed below provide free to use templates but __Please Make Sure That You Follow Their Guidelines before using them__ . 570 | 571 | | __Resource__ | __Description__ | __Used For__ | 572 | | :-------------: |:-------------------:| :------------:| 573 | | [Themewagon](https://themewagon.com/theme_tag/free/) | Themewagon provides many premium beatiful templates but they also have a huge collection of free templates | Bootstrap and Material Design based templates, UI kits | 574 | | [w3layouts](https://w3layouts.com/) | w3layouts have a huge collection of free templates which can also be used an inspiration for your next project | Bootstrap, Material Design, Flat Design, UI Kits, UI components | 575 | -------------------------------------------------------------------------------- /assets/images/gdgnd-js.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/gdgnewdelhi/javascript/69004f45574c076e1f9d4707dd17f0b308bde32c/assets/images/gdgnd-js.png --------------------------------------------------------------------------------