Awesome Web Technologies

General (Refer the Computer Science section also)

• Internet (IP, DNS, Proxy, domain)
• World Wide Web
• Client-Server Architecture vs Peer-Peer (P2P)
• Web Page vs Website vs Web Server vs Web browser
• Static Websites vs Dynamic Websites
• HTTP/S Protocol (Request Methods, Headers, Cache, Cookies, Compression, CORS, CSP, Response codes), FTP.
• Browsers (Rendering Engines-Blink, Gecko, Webkit, JavaScript Engines-V8, SpiderMonkey, JavascriptCore)
• Browser Search Engines (Google)
• Character Encodings (UTF, ASCII)
• Licenses (Open Source vs Closed Source, CC, MIT, Apache, GPL, LGPL)
• Semantic Versioning
• UI/UX (Prototype/ Wireframes)
• API
• Web Standards (W3C, WHATWG, ECMAScript, TC39)
• Internationalization(i18n), Localization
• Polyfill
• Environment Variables
• Regular Expressions
• Splash screen
• Input validation
• 12 Factors
• Data exchange formats (JSON, XML, Protobuf (Protocol Buffers by Google))
• CDN (Content Delivery Network)
• Terminal/CMD usage (Basic Commands)

Version control & Repo hosting (Git, Github)

Developer Tools & Utilities, Code editor vs IDE, API Clients, Debuggers

• VS Code
• nodemon
• React Developer Tools
• Node.js Debugging
• Node.js profiling
• Curl
• Insomnia
• Postman
• Respresso

HTML

• HTML5, Semantics, Accessibility(A11y), Web Content Accessibility Guidelines (aka WCAG) & Accessible Rich Internet Applications (aka ARIA)
• Vector graphics to the Web (SVG)
• Document structure

CSS - Styling (UI/UX)

• CSS3, Responsive Web Design (Media Queries, Relative units), Animations, UI-Lazy loading
• CSS Box model, Grid, Flexbox, Positioning

CSS Pre-processors (SASS)

CSS Frameworks/Libraries

• CSS First - Bootstrap
• JS Based - Material UI, Ant Design

CSS Architecture (BEM)

JavaScript

• JavaScript (Syntax, Concepts like hoisting, closure, generators)
• Module system (CommonJS vs AMD vs UMD vs ESM)
• ESNext (ECMAScript - Rest/Spread, Destructuring, Template Literals, let/const, for-await, for-of)
• script async vs defer
• Async programming (Callbacks, Promises, Async/Await, Error handling)
• OOP (Objects, Prototypes, Classes)
• Understanding functions, context and binding in JavaScript
• Events (Bubbling)

Web/Browser APIs (DOM, BOM)

• DOM Manipulation
• Device APIs
• Communication APIs
• Data management APIs (localstorage, sessionstorage, webSQL, indexeddb)
• Fetch vs AJAX (XMLHttpRequest)
• Cookies vs Sessions
• Intersection Observer
• WebVR, WebSpeech, WebXR, WebUSB, WebBluetooth, WebAuth, Creds, Native FS, Share)
• Graphics (WebAnimations, 2D (Canvas, SVG), 3D (WebGL), Video/Audio, WebAudio WebRTC)
• Streams

Vanilla JS vs. jQuery vs. Modern Frontend Frameworks

• DOM vs virtual DOM vs shadow DOM
• JSX

Web Components (HTML Templates, Custom elements, Shadow DOM)

Front End Frameworks (SPA)

• React
• Svelte or Angular or Vue.

Modern CSS (CSS in JS)

• Styles components
• CSS modules

State management

• Redux

Router

JavaScript Flavors, Type Checkers, Polyfills, Transpilers, Compilers

• TypeScript
• Babel

Progressive Web Apps

• https://dev.to/sudhakar3697/intro-to-progressive-web-apps-34oo
• App shell
• Latest Web APIs (Refer the Web/Browser API section)
• Server-Sent Events (SSE)
• Web sockets
• Service workers (Workbox)
• Push notifications
• WebAPK, Trusted Web Activity (TWA)
• Single Page Apps (SPA) vs MPA (traditional)
• [CSR / Server-Side Rendering (Next.js), sapper) / Hydration, Pre-Rendering](https://www.toptal.com/front-end/client-side-vs-server-side-pre-rendering)
• Template engines

JAMStack (Static site generator,..)

• GatsbyJS

WebAssembly

• WASM
• WASI (Lucet, wasmer, wasmtime), https://bytecodealliance.org

Module bundler, Minification, Obfuscation

• Webpack

Package Manager

• npm

Task runner

• npm-scripts

Linter

• ESLint

Formatter

• Prettier

API

• REST API
• GraphQL
• JSON API ❌
• SOAP ❌
• RPC ❌ (https://blog.jscrambler.com/rpc-style-vs-rest-web-apis)

Server Side Languages/Runtimes (Javascript | Java | Go | Rust | Python | C# | PHP | Ruby)

• Node.js (Event Loop, Modules, Cluster, Native node modules (N-API), Neon (RUST- wasm-pack))
• Deno

Back End Frameworks

• Express.js (Middlewares, Sessions, Streaming the response from Node.js Server)

Relational DB (SQL)

• PostgreSQL
• SQLite

ORM/ODM (Sequelize) & Query builders (Knex)

NoSQL DB

• MongoDB & MongoDB Atlas

Graph DB

• dgraph or Neo4j

Caching

• Client-side : HTTP Cache
• Server-side : Redis, MemCached
• CDN

Serverless

• Functions (AWS Lambda/ Azure functions/ Google Cloud functions)
• Databases (Firebase cloud firestore, Amazon aurora, Azure Data lake, Google cloud datastore)

Authentication / Authorization

• Cookies
• Basic
• Token Auth
• JWT
• OAuth 2.0 (Proof Key for Code Exchange (PKCE))
• OpenID Connect
• Active directory, LDAP, NTLM, Kerberos, SAML, Single Sign-On
• Certificates

Message Brokers

• RabbitMQ or Kafka

Search Engine

• ElasticSearch

Security

• https://infosec.mozilla.org/guidelines/web_security
• OWASP (SQL injection, XSS, Broken auth/session management, CSRF)
• HTTPS, Transport Layer Security (SSL/TLS)
• Content-Security-Policy (CSP)
• CORS
• Subresource Integrity (SRI)
• Hash passwords (MD5, SHA-1, Use Argon2, PBKDF2, scrypt or bcrypt)
• Hashing vs Encryption vs Encoding

Performance (Loading vs Rendering)

• Measuring performance (RAIL)
• Tools (Lighthouse, WebPageTest, PageSpeed Insights, Chrome dev tools)
• Code splitting, Lazy loading
• instant loading with the PRPL pattern

Test (Unit vs functional vs integration) & Optimization

• Jest, Enzyme, Cypress
• Lighthouse, DevTools

Documentation

• Markdown
• JSDoc
• Swagger (https://app.swaggerhub.com/)

Search Engine Optimization (SEO)

• SEO Friendly URLs (Slug)

Deployment (Hosting), Containers, Virtualization & Scaling

• CI/CD
• Source code protection
• pkg
• Docker, Kubernetes, Unikernels
• Web Servers (Apache, Nginx)
• https (letsencrypt)
• Static hosting (Netlify, Github pages)
• GIT
• Tunnels (Ngrok)
• Proxy, VPN
• CDN
• CMS
• Logging (morgan, winston)
• Load balancing
• Backups
• Domain registration (Namecheap, Google domains), cPanel
• Managed hosting (InMotion, Hostgator, Bluehost)

Programming Paradigms (OOP, functional, reactive)

• OOP (Polymorphism, Inheritance, Encapsulation, Abstraction, Aggregation and Composition)

Architectural styles (Monolith, SOA, Microservices, Serverless, Event Sourcing, CQRS)

Design patterns Gang of Four (GoF) -> (Creational vs Structural vs Behavioral)

Architectural patterns (MVC, MVVM, MVP, Flux, Redux)

Design principles (SOLID, YAGNI, KISS, DIY, SSOT, SoC, TDA, DRY)

Browser Extensions

Misc

• Web Scrapping
• Bot
• Web Hooks
• Web bundle
• gRPC
• QUIC
• HTTP/2, HTTP/3
• Headless browsers
• Automate browsers (Playwright, Puppeteer)

Mobile App Development using Web Technologies

• React Native. For alternatives ReactNative-alternatives

Desktop App Development using Web Technologies

• electron. For alternatives electron-alternatives

Developing Games

Computer Science

• Map of Computer Science
• Programming (Binary, Pointers, Dynamic memory allocation, Memory leak, Garbage collection, Recursion, Concurrency, Parallelism, Multi-threading, Asynchronous, Compile vs interpret vs transpile, JIT, AOT, Exception Handling )
• Software Engineering (SDLC, UML, Blackbox vs Whitebox Testing)
• Operating Systems (Boot process, System Calls, Process, Threads, CPU Scheduling, IPC, Concurrency, Synchronization, Deadlock, Memory management, Disk management, File systems, POSIX (stdin, stdout, stderr, pipes), I/O)
• Database Systems (ER model, Normalization, Indexing,(sparse,dense,multilevel,clustered) B,B+, Query Optimization, Transactions, ACID, Replication, Sharding, CAP theorem, N+1 Problem)
• Computer Networks, Data Communication (OSI Layer, ISP) & Informaion Security (cryptography- encryption, Hash, TLS, Digital signatures,certificates, Firewalls)
• Computer Organization & Architecture, Digital electronics (Combinational vs Sequential circuits), Microprocessors (ASM), Microcontrollers (Memory hierarchy, Number System)
• Data Science (Big data, Artificial Intelligence/Machine Learning)
• Data Structures
• Algorithms (Searching, Sorting, Hashing)
• Algorithm Design Techniques (Greedy, Divide & Conquery, Dynamic programming)
• Asymptotic worst case time and space complexity analysis
• Theory of Computation, Compiler design (Optional)
• Distributed Systems
• Cloud Computing & Virtualization
• Internet of Things (Optional)
• Mathematics, Statistics (As applicable to CS)

References

• roadmap.sh
• Front-end Masters
• web-skills

Resources

• https://developer.mozilla.org/en-US/docs/Learn/Getting_started_with_the_web/How_the_Web_works
• https://developer.mozilla.org/en-US/docs/Learn/Common_questions/How_does_the_Internet_work
• https://developer.mozilla.org/en-US/docs/Web/API
• https://platform.html5.org/
• https://whatwebcando.today/
• https://caniuse.com/