4. Roadmap #

Created Friday 25 December 2020

Arnav's Course

Full stack Front End - embrace it, good eye for Design Back End - Dev Ops

1st Pass #

Front End #

  • runs inside a browser(HTML, CSS, JS - only these but very important)(MDN web docs), w3schools(used for basics),

  • (2 weeks) CSS - Box model, [tranforms, transitions, animations], layout[flexbox, grid, @media],

  • JS - (2 weeks) data types, equality, DOM ops, events, timeout, submit, split splice join, event loop(Philip Roberts, Carbon Five)

  • Learn Fundas of both Front and back, then do the intermediate things in both, then do advanced in Both, Then libraries

  • Front end and backend cannot be done in isloation

Back End #

  • documentation is nodejs is nodejs.org

  • (1 week) nodejs - runtime for javascript based on V8, without the browser. This is faster than Python, around 10x

  • It was so fast that it became fit for desktop apps, even embedded apps

  • Maybe comparable to Java. Once a lang is fast, it is also used for making servers

  • Nodejs vs JS --> window, document is not available. process and global is available on desktop.

  • npm - very easy and useful tool

  • modules

  • how require works

  • Native API: fs, events, os, http (End of one week)

  • freeCodeCamp is a good resource

  • OSI model

  • HTTP methods

  • Fundamental of server-client - theoretical

Servers with Node JS(3 weeks) #

  • How are REST APIs made - using Express.js, used to make servers
    • Routes
    • Middlewares
    • templates - Hbs(handle bars), Ejs, SSR(Server Side Rendering)
  • DB _ SQL vs NoSQL, which to use and when to use it. _ CAP Theorem, PACELC theorem _ MySQL or Postgres - SQL _ NoSQL - MongoDB, CassandraDB _ SQL commands - trickery _ query, $sort in mongoDB Ready to make CRUD websites

2nd Pass #

Front End(2 weeks) #

  • CSS libaries - Bootstrap, Materialize - professional sites
  • jQuery - Very good tool, not used to create big tools
  • axios - js library, https requests asynchronously

Back End #

(Start of 2 weeks)

  • static or public HTML
  • HBS+data -> SSR
  • form submissions
  • POST request body -> URL encoded, JSON (End of two weeks) (Start of 2 weeks)
  • Sessions - log in state, need to understand how these works
    • Cookies
    • Tokens
    • localStorage
    • session storage used on front end
  • Authentication vs Authorization
  • OAuth2.0 - helps and used at FaceBook, Twitter and Google (End of two weeks)

Make project(any one - 1 week) #

Blogging site - comments
Social media

(1 week) Realtime apps - WebSocket(change without req-res) - learn - from socket.io. #

  • (1 week) make Collab IDE, Shared Whiteboard

Good to know - browser API #

  • Canvas -> 2D games
  • Browser APIs - GPS, A/V

3rd pass #

Testing #

FE #

  • Jasmine, JEST, Karma(automated test)
  • UI TEst - phantomJS(screenshot tests), puppeteer(headless testing), protractor
  • FE - Frameworks - React, Vue, Ember, Angular - Components, Routing, State Management(Just these three)

BE - testing #

  • Mocha + Chai
  • NYC - code coverage(runs tests when code is updated), testing is very, very important.

Deployment and DevOps #

  • handle, nginx configs
  • handle, Apache configs
  • Well versed with Linux - like firewalls, not basic stupid stuff
  • Setup database - Mongo, MySQL, postgres

Containerization #

  • Docker - Modularization of OS and dependencies, programmatically managing resources(software)
  • Kubernetes(K8S) - Orchestrization framework
  • Chef, ansible

DevOps Services - Free/Paid #

  • Serverless - AWS lambda
  • IaaS - Machine is given(configure yourself) - Google Compute Engine, AWS EC2, DigitalOcean
  • PaaS - Worry only about the code - Heroku, Google App Engine, AWL LightSail
  • BaaS - (backend existing, push notifications) Firebase
  • Static Web Hosting - GitHuib pages, Netlify, versel(now.sh)
  • Automation - Travis CI/ Github actions

Deployment to DevOps is a part of SRE(Site Reliability Engineer) - bare minimum #

MAD as a web developer without Android, Flutter

  • Web App wrappers(PWA)
  • Ionic --> Hybrid Apps
  • React Native

Desktop Apps

  • Electron.js - Spotify, Slack, VSCode

IoT and Electronics

  • johhnyify, p0

His story Learn from hackathons Maybe not in a fundamental way, but it is important https://online.codingblocks.com/courses/web-development-online-course

Arnav suggests looking at free content first. MDN, CSSTricks, there should be returns SRE/FullStack are highest paid - Flock, RazorPay, Zeta, UrbanClap, Zomato, Swiggy, Flipkart, HotStar, DoubtNut FAANG have stock(which is great)

Additional langs

CodeWithHarry

  • Learn 80% HTML, 60% CSS and 50% JS(avoid promises, callbacks)
  • Learn PHP to get concepts, then use JS/Ruby/Python3
  • Don’t use frameworks, website builders(like WiX), 3rd part libraries
  • Design and Web Dev are independent. Take inspiration from websites
  • HTMLCheatSheet.com
  • CodePen.io - learn things

Resources #

This is great #

  • Python vs Node is not important