Awesome Web Technology

General

• Internet (IP, DNS, Proxy, domain)
• World Wide Web
• Client-Server Architecture
• 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, JavaScript Engines)
• Browser Search Engines (Google)
• Character Encodings
• Licenses (Open Source vs Closed Source, CC, MIT, Apache, GPL, LGPL)
• Semantic Versioning
• UI/UX (Prototype/ Wireframes)
• API
• Web Standards (W3C, WHATWG, ECMAScript)
• i18n, Localization
• Polyfill
• Environment Variables
• Regular Expressions
• Splash screen
• 12 Factors

HTML

• HTML5, Semantics, Accessibility(A11y)
• Vector graphics to the Web (SVG)

CSS - Styling (UI/UX)

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

JavaScript

• JavaScript
• script async vs defer,
• Async programming
• Understanding functions, context and binding in JavaScript
• Intersection Observer
• ESNext (ECMAScript), Modules
• Babel
• Module system (CommonJS vs AMD vs UMD vs ESM)

Vanilla JS vs. jQuery vs. Modern Frontend Frameworks

• virtual DOM
• JSX

Web/Browser APIs (DOM, BOM)

• DOM Manipulation (jQuery)
• Device APIs
• Communication APIs
• Data management APIs
• Fetch
• AJAX (XMLHttpRequest)
• Cookies vs Sessions

Data exchange formats

• JSON
• XML
• Protobuf (Protocol Buffers by Google)

Graphics ❌

• 2D (Canvas, SVG)
• 3D (WebGL)
• Video/Audio
• WebRTC

Search Engine Optimization (SEO)

• SEO Friendly URLs (Slug)

Package Manager

• npm

CSS Pre-processors ❌

• SASS

CSS Frameworks

• Bootstrap
• Ant Design
• Tailwind CSS

CSS Architecture

• BEM

Task runner

• npm-scripts

Linter

• ESLint

Formatter

• Prettier

Module bundler, Minification, Obfuscation

• Webpack

Front End Frameworks (SPA)

• React
• Svelte

State management

• Redux

Router

CSS in JS

• Styles components
• CSS modules

Test (Unit vs functional vs integration) & Optimization

• Jest, Enzyme, Cypress
• Lighthouse, DevTools

JavaScript Flavors

• TypeScript

WebAssembly

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

Serverless

• AWS Lambda/ Azure functions/ Google Cloud functions

Server Side Languages

• Node.js (Event Loop, Modules, Native node modules (N-API))

Back End Frameworks

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

Relational DB (SQL)

• PostgreSQL
• SQLite

ORM (Sequelize) & Query builders (Knex)

NoSQL DB

• MongoDB & MongoDB Atlas

Graph DB

• dgraph or Neo4j

Caching

• Redis, MemCached

API

• REST API
• GraphQL
• JSON API ❌

API Clients

• Curl
• Insomnia
• Postman

Authentication / Authorization

• Basic
• Token Auth
• JWT
• OAuth 2.0
• OpenID Connect
• Single Sign-On (Kerberos, SAML)

Message Brokers

• RabbitMQ or Kafka

Search Engine

• ElasticSearch

Documentation

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

Security

• https://infosec.mozilla.org/guidelines/web_security

• OWASP (SQL injection, XSS, Broken auth/session management, CSRF)

• HTTPS, Transport Layer Security (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

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

Best practices

Deployment (Hosting)

• Source code protection
• pkg
• Docker, Kubernetes, Unikernels
• Web Servers (Apache, Nginx)
• https (letsencrypt)
• netlify, Github pages
• GIT
• Tunnels (Ngrok)
• Proxy, VPN
• CDN
• CMS
• Logging (morgan, winston)
• Load balancing
• Backups

Developer Tools & Utilities, Code editor vs IDE

• VS Code
• nodemon
• React Developer Tools
• Node.js Debugging
• Node.js profiling

Architecure

• Web Components (HTML Templates, Custom elements, Shadow DOM)
• Single Page Apps (SPA) vs MPA (traditional)
• CSR / SSR (Next.js, sapper) / Hydration, Pre-Rendering

JAMStack (Static site generator,..)

• GatsbyJS

Progressive Web Apps

• App shell
• Latest Web APIs
• SSE
• Web sockets
• Service workers (Workbox)
• Push notifications

Programming Paradigms (OOP, functional, reactive)

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

• Event Sourcing

• CQRS

Architectural styles (Monolith, Microservices, Serverless)

Design patterns

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

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

Browser Extensions

Misc

• Web Scrapping
• Deno
• Bot
• Web Hooks
• Web bundle
• gRPC
• QUIC
• HTTP/2, HTTP/3
• Web Components (Custom Elements, Shadow DOM)

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, Concurreny, 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)
• Database Systems (ER model, Normalization, Indexing, Query Optimization,Transactions, ACID, Replication, Sharding)
• 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