/javascript

GDG New Delhi <3 JS


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.

Feel Free to add some interesting stuff to the list.


Table of Contents

---------------- Awesome Random Stuff --------------------

Introduction

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.

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.

How To Use Guide

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 to get max out of it.

Some Famous References

You can use these resources to get explanation and docs on various concepts of JS and web .

Reference Name Description Used For
Mozilla Developer Network (MDN) A wiki which is maintained by Mozilla and Web Dev Community Understanding various JS concepts/methods, css related docs etc
w3schools 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
Tutorialspoint Online training website Working examples of JS, HTML, Java and many other techs
CssTricks CSS learning hub Explains many useful and complex topics of CSS

ECMAScript (ES)

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.
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.

ES6/ES2015

ES7/ES2016

ES8/ES2017

How a Web App Works

  • Intro
    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.
  • Blogs
  • Videos
  • Links

Basic Component of a Web App/Website

Frontend

Backend

Frameworks

Front-End Frameworks

1- Angular

2- Polymer.js

3- React.js

4- Vue.js

5- Ember.js

Backend Frameworks

1- Sails.js

2- Express.js

3- Restify.js

4- Hapi.js

5- Koa.js

6- Total.js

7- LoopBack

Fullstack Frameworks

1- Meteor.js

2- MEAN.js

Other Frameworks

1- Electron.js

Libraries

1- RXJS

  • Intro
    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).
  • Blogs
  • Videos
  • Links

2- ngrx

3- redux

4- NGXS

5- AngularFire

Concepts

Linters

  • Intro
  • Blogs
  • Videos
  • Links

Module Bundlers

  • Intro
  • Blogs
  • Videos
  • Links

Task Runners

  • Intro
  • Blogs
  • Videos
  • Links

Package Managers

  • Intro
  • Blogs
  • Videos
  • Links

Transpilers

  • Intro
  • Blogs
  • Videos
  • Links

Testing

  • Intro
  • Blogs
  • Videos
  • Links

JS is Everywhere

Progressive Web Apps

Augumented Reality (AR)

Virtual Reality (VR)

Machine Learning (Tensorflow.js, Brain.js)

Awesome Youtube Channels

You can use these channels to learn JS and its frameworks/libraries .

Reference Name Description Used For
freecodecamp freecodecamp YT channel has many tutorial series on various JS frameworks ES6, Angular, vue.js, React etc
AngularFirebase AngularFirebase channel covers various tutorials on angular and its integration with different frameworks/services like firebase,electron,stripe etc All about angular
Google Developers Google Developers channel covers many google technologies and news Getting updates on JS related news, tutorial series by googlers etc
LearnCode.academy They make tutorials on things like ES6, libraries and framework ES6, Brain.js, vue.js etc
Academind The person behind this channel is a udemy instructor and make awesome videos on JS Angular, ES6, vue.js, React.js and many more
Traversy Media Traversy Media releases many tutorials on web development and programming Angular, Node.js, PHP, python and many more
LevelUpTuts LevelUpTuts also deals with web tech like React, Angular, Node, Meteor etc Angular, React, Meteor, Node etc
Fun Fun Function Ex-spotify engineer releases awesome web tutorials Angular, React, Meteor, Node , Js libraries, New awesome js stuff and much more
Wes Bos Wes bos is one of the best tutor, web developer. CSS Grid, ES6, HTML, JS and its frameworks
The Net Ninja Net Ninja also covers many topics like Node.js GraphQL etc React, Node.js, GraphQL and many more
DevTips DevTips includes tutorials on Git, Web Designing, CSS Web Designing, CSS, Bootstrap etc
Codecourse Codecourse mostly talks about PHP and its frameworks but do include many other tutorials as well PHP, Laravel, etc
The Coding Train 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
React Cast ReactCasts is a good youtube channels which has many short ReactJS screencast and also covers Redux ReactJS , Redux , ES6
DesignCourse DesignCourse covers many topics of Web Designing / Angular/ Rxjs/ Adobe softwars Web Designing like using SVGs in Web, Angular, Rxjs, HTML and CSS etc

Awesome Libraries

  • Blogs
    1- 10 Best Free Animation Libraries For The Web

  • Libraries

    • UI
      1- Notyf - A dead simple, responsive, vanilla javascript notification plugin. No jQuery required.
      2- Parallax.js - Parallax.js is a dirt simple parallax scrolling effect inspired by Spotify.com and implemented as a jQuery plugin.
      3- Stellar.js - Parallax has never been easier.
      4- Relax.js - Parallax library based on VanillaJS

    • Utility
      1- Moment.js - Parse, validate, manipulate, and display dates and times in JavaScript.
      2- Lodash - A modern JavaScript utility library delivering modularity, performance & extras.
      3- Underscore - Underscore is a JavaScript library that provides a whole mess of useful functional.

Awesome Github

Awesome Free Websites Templates

PS: All the links listed below provide free to use templates but Please Make Sure That You Follow Their Guidelines before using them .

Resource Description Used For
Themewagon Themewagon provides many premium beatiful templates but they also have a huge collection of free templates Bootstrap and Material Design based templates, UI kits
w3layouts 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