async vs defer vs module attribute for <script> in HTML
w3schools
MDN Web Docs
NodeJS
nvm - NodeJS installer and version manager written in Bash!
Eloquent JS
You don't know JS
- Type of any JS value: Object.prototype.toString.call(value).split(' ').pop().slice(0,-1)
- Event-loop: MDN Docs | NodeJS | Codedamn. Await doesn't block!
- Difference: process.nextTick(); setImmediate(); setTimeout(func, 0); .then()
- Using Promise() to asyncify or promisify legacy callbacks. Also, see Promise.try() for this same purpose. Other interesting Promise.race(), Promise.any(), .all() and .allSettled().
- Default parameters: evaluated at calltime, earlier params available to later ones, destructured array/object
- Destructuring assignment: defaults, swapping, ignoring, ...rest
- Dynamic import - for both browser and Node
- import attributes; import json!
- Void operator: IIFE, element.onclick= void handler()
- Optional chaining operator: ?.
- Nullish coalescing operator: ??
- Conditional ternary operator: ? :
- CSS.escape() for escaping invalid CSS identifiers while using as part of a CSS selector such as querySelector
- DOM event delegation, event-bubbling > event.target, event.currTarget and event-listener best practices
- User interactions: alert(), confirm(), prompt()
- Serializable object deep-copy: structuredClone(). Another way: JSON.parse(JSON.stringify())
- Easy IndexedDB with idb-keyval
- History API: pushState, popState, replaceState
- Events reference. E.g. window > online and offline events for building offline-first.
- Best practices:
  - querySelctor() and querySelectorAll() instead of getElementById etc
  - addEventListener() instead of onclick attribute. Use passive: true option if not using preventDefault()
  - Named event handlers and use of event-delegation for less memory consumption
  - this in function expressions, arrow functions, and eventlisteners
  - Testing with Mocha
JSON Schema validator
- specs and docs
  - https://json-schema.org/learn
- validator tools
JS/TS-first Schema validation tools @npm
- joi
- zod
OpenAPI
- specs and docs
  - https://learn.openapis.org/
  - https://support.smartbear.com/swaggerhub/docs/en/get-started/openapi-3-0-tutorial.html
  - https://redocly.com/blog/accelerated-learning-openapi
  - What is Design-first or API-first approach as opposed to code-first: https://bump.sh/blog/dev-guide-api-design-first
- a list of tools around OpenAPI
- designer, editor, GUI based
  - a great list of such GUI tools
  - api-fiddle: used it, loved it, local workspace saved to localstorage, login optional
  - https://stoplight.io/studio
  - https://openapidesigner.com/
  - TypeSpec
- documentation generator
  - redoc: generates HTML
  - swagger : generates interactive HTML
- request validator
  - chanfana by cloudflare and @ https://github.com/cloudflare/chanfana
- code generator, for design-first
  - https://www.npmjs.com/package/fastify-openapi-glue
Semantic Versioning - semver
- Specs and docs
  - https://docs.npmjs.com/about-semantic-versioning
- Validator, tools
  - https://www.npmjs.com/package/semver
QA/Unit-Tests
- minimalistic-assert
- Mocha
- Node's assert module
Linters
- standard and semistandard for JS
- csscomb for CSS
- htmlhint for HTML
Minifiers
- htmlMinifier for html | js | css
- CSSNano or csso for css
- UglifyJS or Closure compiler for js
Bundlers
- Browserify
Obfuscators
Frameworks for server or serverless backend development. Famous means well-supported/maintained/tested with lots of dependents
- Fastify - famous, fast, batteries-included for NodeJS runtime
- Hono - famous, runtime independent, small, great for serverless
- iity-router or https://github.com/kwhitley/itty-router - famous, runtime independent, small, great for serverless
- find-my-way: runtime independent, Fastify uses this
- Pico - for Cloudflare workers and Deno
Bootstrap
Prism
MDN playground
See sister gist about Cloudflare - CDN, edge-compute, cache, awesome engineering and more.
CDNs
- jsdelivr CDN
- See comments in this gist => https://gist.github.com/jcubic/a8b8c979d200ffde13cc08505f7a6436
- raw.githubusercontent.com/USER/REPO/REF/PATH, uses Fastly, no ratelimits, cache: max-age = 5 mins, i.e. revalidates cached data every 5 mins, which is awesome. Be it tags or branches, all references are revalidated this frequently. The only catch, serves JSONs as text. But that's deliberate, to prevent abuse, and therefore won't change.
- statically
- https://raw.githack.com/
- Cloudflare workers, running on the edge, using their data-center-local cache via free API (50 calls / request). Workers run before cache and can CRUD the cache.
Latency Benchmarking
- GlobalPing by jsDelivr
- https://tools.keycdn.com/ping
Geolocation, geoproximity, forwarding requests to regional backends by edge-computes
- Geolocation API, by IP, is usually provided by hosting providers like Vercel (Middleware and Functions) and Cloudflare (Workers).
- Geolocation by IP public APIs on the internet
  - https://ipapi.co
  - https://ipquery.io/
  - Awesome geo-spatial-distance library: geolib@npm
  - AWS edge locations, with lat-lon. This user also has repos with lists of public cloud providers and their edge locations.
  - AWS regions, datacenters locations, with lat-lon and also this
Free CronJobs/scheduled-webhook-triggers
- https://cron-job.org/en/faq/, also may be used for uptime monitoring with status pages
Counter API, Integer as service
Website analytics, hit counters
Feature flags as service
webtools
static site how to
GitOps
- Accessing GitHub using octokit SDK. Also how to use GitHub Login.
- Derive git hash and more for both Node and Browser: Use Promise((resolve, reject)=> {}) to asyncify callbacks
- Run git-cli from Node
Google Page Lifecycle API and SDK
jQuery and AJAX
Web workers
Service worker API
Push messages
- OneSignal web-SDK as well as REST API.
- Firebase Cloud Messaging or FCM
Websocket API
WebRTC API
Background Sync API
Periodic Background Sync API
Fixing vulnerabilities
- CSRF prevention cheatsheet
- Preventing CSRF and XSRF
Bot prevention
- Cloudflare Turnstile - completely free and unlimited
- Google reCAPTCHAv3 - free-tier, limited
- See obfuscator tools above
- Proof of Work challenge-validation library @npm and/or @GitHub
  - https://github.com/indutny/proof-of-work
  - https://www.npmjs.com/package/work-token for both Node and Browsers
  - https://www.npmjs.com/package/nano-pow
Managed Database
- Upstash(https://upstash.com/) - Drop in replacement for Redis. Also offers connectionless (REST API)
- Momento - Drop in replacement for Redis.
- JS-SDK for Momento and Upstash and ioredis are similar, almost drop-in replacements of one another. Also see node-redis.
Serverless functions with middleware
- itty-router as framework/routing
- Ably for managed websocket server and pub-sub
- Upstash for connectionless Redis using REST API and SDK. Also offers subscriptions (from pubsub) as Server-Sent-Events (SSE)
- AWS ElastiCache for connectionless Redis using API
- Host a Fastify node, persistently connected to a managed Redis, and expose an API (use ngrok to expose node if needed).
- MongoDB Atlas for managed MongoDB and SDK
- Vercel / Netlify / AWS Lambda for running NodeJS functions. Lambda has cold start issues
- Cloudflare workers running on V8 isolates (same as Google chrome) - no cold start
- GitHub (Ocktokit) > JSDelivr or Cloudflare as CDN
- Fastly as CDN

Learn by example (Full Stack)

SomajitDey/web_dev_resources.md

Learn by example (Full Stack)

MORE