# 📚 JavaScript Tutorial - Part 1/10: The Complete Beginner's Guide
#JavaScript #WebDev #Programming #BeginnerFriendly

Welcome to Part 1 of our comprehensive 10-part JavaScript series! This tutorial is designed for absolute beginners with detailed explanations and practical examples.

---

## 🔹 What is JavaScript?
JavaScript is a high-level, interpreted programming language that:
- Runs in web browsers (client-side)
- Can also run on servers (Node.js)
- Adds interactivity to websites
- Works with HTML/CSS to create dynamic web pages

Key Features:
✔️ Event-driven programming
✔️ Supports object-oriented and functional styles
✔️ Dynamically typed
✔️ Asynchronous operations (callbacks, promises)

---

## 🔹 JavaScript vs Other Languages
| Feature | JavaScript | Python | Java |
|---------------|---------------|---------------|---------------|
| Typing | Dynamic | Dynamic | Static |
| Execution | Interpreted | Interpreted | Compiled |
| Platform | Browser/Server| Multi-purpose | JVM |
| Paradigms | Multi-paradigm| Multi-paradigm| OOP |

---

## 🔹 How JavaScript Runs?
1. Browser loads HTML/CSS
2. JavaScript engine (V8, SpiderMonkey) executes JS code
3. Can manipulate DOM (Document Object Model)
4. Handles user interactions

HTML → Browser → JavaScript Engine → Execution

---

## 🔹 Setting Up JavaScript
### 1. In HTML File (Most Common)

<script>
  // Your JavaScript code here
  alert("Hello World!");
</script>

<!-- OR External File -->
<script src="script.js"></script>

### 2. Browser Console
- Press F12 → Console tab
- Type JS commands directly

### 3. Node.js (Server-Side)

node filename.js

---

## 🔹 Your First JavaScript Program

// Single line comment
/* Multi-line 
   comment */

// Print to console
console.log("Hello World!"); 

// Alert popup
alert("Welcome to JavaScript!");

// HTML output
document.write("<h1>Hello from JS!</h1>");

---

## 🔹 Variables & Data Types
JavaScript has 3 ways to declare variables:

### 1. Variable Declaration

let age = 25;        // Mutable (block-scoped)
const PI = 3.14;     // Immutable 
var name = "Ali";    // Old way (function-scoped)

### 2. Data Types
| Type | Example | Description |
|-------------|--------------------------|--------------------------|
| Number | 42, 3.14 | All numbers |
| String | "Hello", 'World' | Text data |
| Boolean | true, false | Logical values |
| Object | {name: "Ali", age: 25} | Key-value pairs |
| Array | [1, 2, 3] | Ordered lists |
| Null | null | Intentional empty value |
| Undefined | undefined | Uninitialized variable |

### 3. Type Checking

typeof "Hello";    // "string"
typeof 42;         // "number"
typeof true;       // "boolean"
typeof {};         // "object"

---

## 🔹 Operators
### 1. Arithmetic

let x = 10, y = 3;
console.log(x + y);  // 13
console.log(x - y);  // 7
console.log(x * y);  // 30
console.log(x / y);  // 3.333...
console.log(x % y);  // 1 (modulus)

### 2. Comparison

console.log(5 == "5");   // true (loose equality)
console.log(5 === "5");  // false (strict equality)
console.log(5 != "5");   // false
console.log(5 !== "5");  // true

### 3. Logical

true && false;    // AND → false
true || false;    // OR → true
!true;            // NOT → false

---

## 🔹 Type Conversion
### 1. Explicit Conversion

String(123);        // "123"
Number("3.14");     // 3.14
Boolean(1);         // true

### 2. Implicit Conversion

"5" + 2;      // "52" (string concatenation)
"5" - 2;      // 3 (numeric operation)

---

## 🔹 Practical Example: Simple Calculator

<script>
  let num1 = parseFloat(prompt("Enter first number:"));
  let num2 = parseFloat(prompt("Enter second number:"));
  
  console.log(`Addition: ${num1 + num2}`);
  console.log(`Subtraction: ${num1 - num2}`);
  console.log(`Multiplication: ${num1 * num2}`);
  console.log(`Division: ${num1 / num2}`);
</script>

---

# 📚 JavaScript Tutorial - Part 2/10: Control Flow & Functions
#JavaScript #WebDev #Programming #Beginners

Welcome to Part 2 of our JavaScript series! Today we'll master decision-making and functions - the building blocks of programming logic.

---

## 🔹 Conditional Statements
Control program flow based on conditions.

### 1. if-else Statement

let age = 18;

if (age >= 18) {
    console.log("You're an adult");
} else {
    console.log("You're a minor");
}

### 2. Ternary Operator (Shorthand if-else)

let message = (age >= 18) ? "Adult" : "Minor";
console.log(message);

### 3. switch-case Statement

let day = 3;
let dayName;

switch(day) {
    case 1: dayName = "Monday"; break;
    case 2: dayName = "Tuesday"; break;
    case 3: dayName = "Wednesday"; break;
    default: dayName = "Unknown";
}

console.log(dayName); // "Wednesday"

---

## 🔹 Loops
Execute code repeatedly.

### 1. for Loop

for (let i = 1; i <= 5; i++) {
    console.log(`Count: ${i}`);
}
// Output: 1, 2, 3, 4, 5

### 2. while Loop

let count = 1;
while (count <= 5) {
    console.log(count);
    count++;
}

### 3. do-while Loop

let x = 1;
do {
    console.log(x);
    x++;
} while (x <= 5);

### 4. for...of Loop (Arrays)

const colors = ["red", "green", "blue"];
for (const color of colors) {
    console.log(color);
}

### 5. for...in Loop (Objects)

const person = {name: "Ali", age: 25};
for (const key in person) {
    console.log(`${key}: ${person[key]}`);
}

---

## 🔹 Functions
Reusable blocks of code.

### 1. Function Declaration

function greet(name) {
    return `Hello, ${name}!`;
}
console.log(greet("Ali")); // "Hello, Ali!"

### 2. Function Expression

const square = function(x) {
    return x * x;
};
console.log(square(5)); // 25

### 3. Arrow Functions (ES6+)

const add = (a, b) => a + b;
console.log(add(2, 3)); // 5

### 4. Default Parameters

function createUser(name, role = "user") {
    console.log(`${name} is a ${role}`);
}
createUser("Ali"); // "Ali is a user"

### 5. Rest Parameters

function sum(...numbers) {
    return numbers.reduce((total, num) => total + num, 0);
}
console.log(sum(1, 2, 3)); // 6

---

## 🔹 Practical Example: Grade Calculator

function calculateGrade(score) {
    if (score >= 90) return "A";
    else if (score >= 80) return "B";
    else if (score >= 70) return "C";
    else return "F";
}

const studentScore = 85;
console.log(`Grade: ${calculateGrade(studentScore)}`); // "Grade: B"

---

## 🔹 Scope in JavaScript
### 1. Global Scope

const globalVar = "I'm global";

function test() {
    console.log(globalVar); // Accessible
}

### 2. Function Scope (var)

function test() {
    var functionVar = "I'm function-scoped";
}
console.log(functionVar); // Error: Not accessible

### 3. Block Scope (let/const)

if (true) {
    let blockVar = "I'm block-scoped";
}
console.log(blockVar); // Error: Not accessible

---

## 🔹 Error Handling
### 1. try-catch-finally

try {
    // Risky code
    nonExistentFunction();
} catch (error) {
    console.log("Error occurred:", error.message);
} finally {
    console.log("This always executes");
}

### 2. Throwing Custom Errors

function divide(a, b) {
    if (b === 0) throw new Error("Cannot divide by zero!");
    return a / b;
}

---

## 🔹 Best Practices
1. Use strict equality (===) over ==
2. Prefer const/let over var
3. Keep functions small/single-purpose
4. Always handle errors
5. Use descriptive names for functions/variables

---

### 📌 What's Next?
In Part 3, we'll cover:
➡️ Arrays & Array Methods
➡️ Objects & JSON
➡️ Destructuring

#LearnJavaScript #CodingBasics #WebDevelopment 🚀

Practice Exercise:
1. Create a function to check if a number is even/odd
2. Write a loop that prints prime numbers up to 20
3. Make a temperature converter function (Celsius ↔️ Fahrenheit)

# 📚 JavaScript Tutorial - Part 3/10: Arrays, Objects & JSON
#JavaScript #WebDev #Programming #DataStructures

Welcome to Part 3 of our JavaScript series! Today we'll master arrays, objects, and JSON - essential for handling complex data.

---

## 🔹 Arrays in JavaScript
Ordered collections that can hold multiple values.

### 1. Creating Arrays

// Array literal (recommended)
const fruits = ['Apple', 'Banana', 'Orange'];

// Array constructor
const numbers = new Array(1, 2, 3);

// Mixed data types
const mixed = [1, 'Hello', true, {name: 'Ali'}];

### 2. Accessing Elements

console.log(fruits[0]);  // "Apple" (0-based index)
console.log(fruits.length);  // 3

### 3. Common Array Methods
| Method | Description | Example |
|--------|-------------|---------|
| push() | Add to end | fruits.push('Mango') |
| pop() | Remove from end | fruits.pop() |
| shift() | Remove from start | fruits.shift() |
| unshift() | Add to start | fruits.unshift('Kiwi') |
| slice() | Get sub-array | fruits.slice(1, 3) |
| splice() | Add/remove items | fruits.splice(1, 0, 'Berry') |

---

## 🔹 Modern Array Methods (ES6+)
Powerful functional programming tools.

### 1. forEach()

fruits.forEach(fruit => console.log(fruit));

### 2. map()

const upperFruits = fruits.map(fruit => fruit.toUpperCase());

### 3. filter()

const longFruits = fruits.filter(fruit => fruit.length > 5);

### 4. reduce()

const sum = [1, 2, 3].reduce((total, num) => total + num, 0);

### 5. find() & findIndex()

const banana = fruits.find(fruit => fruit === 'Banana');
const bananaIndex = fruits.findIndex(fruit => fruit === 'Banana');

### 6. some() & every()

const hasApple = fruits.some(fruit => fruit === 'Apple');
const allLong = fruits.every(fruit => fruit.length > 3);

---

## 🔹 Objects in JavaScript
Collections of key-value pairs (properties).

### 1. Creating Objects

// Object literal (recommended)
const person = {
    name: 'Ali',
    age: 25,
    hobbies: ['reading', 'coding'],
    address: {
        city: 'Dubai',
        country: 'UAE'
    }
};

### 2. Accessing Properties

// Dot notation
console.log(person.name);  // "Ali"

// Bracket notation (useful for dynamic keys)
const key = 'age';
console.log(person[key]);  // 25

### 3. Modifying Objects

// Add property
person.job = 'Developer';

// Delete property
delete person.age;

// Check property existence
'name' in person;  // true

---

## 🔹 Object Methods
### 1. Object.keys()

const keys = Object.keys(person);  // ["name", "age", ...]

### 2. Object.values()

const values = Object.values(person);

### 3. Object.entries()

for (const [key, value] of Object.entries(person)) {
    console.log(`${key}: ${value}`);
}

### 4. Object Spread (ES9+)

const newPerson = {...person, age: 26};

---

## 🔹 JSON (JavaScript Object Notation)
Universal data format for APIs.

### 1. JSON ↔️ JavaScript

// Object to JSON string
const jsonStr = JSON.stringify(person);

// JSON string to object
const parsedObj = JSON.parse(jsonStr);

### 2. JSON Structure

{
    "name": "Ali",
    "age": 25,
    "isStudent": false,
    "courses": ["Math", "CS"]
}

---

## 🔹 Destructuring Assignment
Unpack values from arrays/objects.

### 1. Array Destructuring

const [first, second] = fruits;
console.log(first);  // "Apple"

### 2. Object Destructuring

const {name, age} = person;
console.log(name);  // "Ali"

// With renaming
const {name: personName} = person;

### 3. Function Parameter Destructuring

function printUser({name, age}) {
    console.log(`${name} is ${age} years old`);
}

---

# 📚 JavaScript Tutorial - Part 4/10: DOM Manipulation & Events
#JavaScript #WebDev #FrontEnd #DOM

Welcome to Part 4 of our JavaScript series! Today we'll learn how to make web pages interactive by mastering DOM manipulation and event handling.

---

## 🔹 What is the DOM?
The Document Object Model is a tree-like representation of your webpage that JavaScript can interact with.

<!-- HTML Structure -->
<html>
  <head>
    <title>My Page</title>
  </head>
  <body>
    <h1 id="main-title">Hello World</h1>
    <ul class="items">
      <li>Item 1</li>
      <li>Item 2</li>
    </ul>
  </body>
</html>

graph TD
  document --> html
  html --> head
  html --> body
  head --> title
  title --> text["My Page"]
  body --> h1
  h1 --> h1text["Hello World"]
  body --> ul
  ul --> li1["Item 1"]
  ul --> li2["Item 2"]

---

## 🔹 Selecting DOM Elements
### 1. Single Element Selectors

// By ID (returns single element)
const title = document.getElementById('main-title');

// By CSS selector (first match)
const item = document.querySelector('.items li');

### 2. Multiple Element Selectors

// By class name (HTMLCollection)
const items = document.getElementsByClassName('item');

// By tag name (HTMLCollection)
const listItems = document.getElementsByTagName('li');

// By CSS selector (NodeList)
const allItems = document.querySelectorAll('.items li');

---

## 🔹 Modifying the DOM
### 1. Changing Content

// Text content (better for security)
title.textContent = 'New Title';

// HTML content (use carefully!)
title.innerHTML = '<em>New</em> Title';

// Attribute changes
title.setAttribute('class', 'highlight');

### 2. Styling Elements

// Direct style property access
title.style.color = 'blue';
title.style.fontSize = '2rem';

// Multiple styles at once
title.style.cssText = 'color: blue; font-size: 2rem;';

// Toggle classes
title.classList.add('highlight');
title.classList.remove('highlight');
title.classList.toggle('highlight');

### 3. Creating & Adding Elements

// Create new element
const newItem = document.createElement('li');
newItem.textContent = 'Item 3';

// Append to parent
const list = document.querySelector('ul');
list.appendChild(newItem);

// Insert at specific position
list.insertBefore(newItem, list.children[1]);

// Remove elements
list.removeChild(newItem);

---

## 🔹 Event Handling
Responding to user interactions.

### 1. Inline Events (Avoid)

<button onclick="handleClick()">Click Me</button>

### 2. Recommended Approach

const button = document.querySelector('button');

// Add event listener
button.addEventListener('click', function(e) {
  console.log('Button clicked!', e.target);
});

// Remove event listener
button.removeEventListener('click', handleClick);

### 3. Common Event Types
| Event | Description |
|-------|-------------|
| click | Mouse click |
| dblclick | Double click |
| mouseenter/mouseleave | Hover effects |
| keydown/keyup | Keyboard input |
| submit | Form submission |
| load | Page/images loaded |
| scroll | Page scrolling |

---

## 🔹 Event Object & Propagation
### 1. Event Object Properties

element.addEventListener('click', function(event) {
  console.log(event.type);      // "click"
  console.log(event.target);    // Clicked element
  console.log(event.clientX);   // Mouse X position
  console.log(event.key);       // Key pressed (for keyboard events)
});

### 2. Stopping Propagation

// Stop bubbling up
event.stopPropagation();

// Prevent default behavior
event.preventDefault();

### 3. Event Delegation

document.querySelector('ul').addEventListener('click', function(e) {
  if (e.target.tagName === 'LI') {
    console.log('List item clicked:', e.target.textContent);
  }
});

---

# 📚 JavaScript Tutorial - Part 5/10: Asynchronous JavaScript
#JavaScript #Async #Promises #FetchAPI #WebDev

Welcome to Part 5 of our JavaScript series! Today we'll conquer asynchronous programming - the key to handling delays, API calls, and non-blocking operations.

---

## 🔹 Synchronous vs Asynchronous
### 1. Synchronous Execution

console.log("Step 1");
console.log("Step 2"); // Waits for Step 1
console.log("Step 3"); // Waits for Step 2

### 2. Asynchronous Execution

console.log("Start");

setTimeout(() => {
  console.log("Async operation complete");
}, 2000);

console.log("End");

// Output order: Start → End → Async operation complete

---

## 🔹 Callback Functions
Traditional way to handle async operations.

### 1. Basic Callback

function fetchData(callback) {
  setTimeout(() => {
    callback("Data received");
  }, 1000);
}

fetchData((data) => {
  console.log(data); // "Data received" after 1 second
});

### 2. Callback Hell (The Pyramid of Doom)

getUser(user => {
  getPosts(user.id, posts => {
    getComments(posts[0].id, comments => {
      console.log(comments); // Nested nightmare!
    });
  });
});

---

## 🔹 Promises (ES6)
Modern solution for async operations.

### 1. Promise States
- Pending: Initial state
- Fulfilled: Operation completed successfully
- Rejected: Operation failed

### 2. Creating Promises

const fetchData = new Promise((resolve, reject) => {
  setTimeout(() => {
    const success = true;
    success ? resolve("Data fetched!") : reject("Error!");
  }, 1500);
});

### 3. Using Promises

fetchData
  .then(data => console.log(data))
  .catch(error => console.error(error))
  .finally(() => console.log("Done!"));

### 4. Promise Chaining

fetchUser()
  .then(user => fetchPosts(user.id))
  .then(posts => fetchComments(posts[0].id))
  .then(comments => console.log(comments))
  .catch(error => console.error(error));

### 5. Promise Methods

Promise.all([promise1, promise2]) // Waits for all
Promise.race([promise1, promise2]) // First to settle
Promise.any([promise1, promise2]) // First to fulfill

---

## 🔹 Async/Await (ES8)
Syntactic sugar for promises.

### 1. Basic Usage

async function getData() {
  try {
    const response = await fetchData();
    console.log(response);
  } catch (error) {
    console.error(error);
  }
}

### 2. Parallel Execution

async function fetchAll() {
  const [users, posts] = await Promise.all([
    fetchUsers(),
    fetchPosts()
  ]);
  console.log(users, posts);
}

---

## 🔹 Fetch API
Modern way to make HTTP requests.

### 1. GET Request

async function getUsers() {
  const response = await fetch('https://api.example.com/users');
  const data = await response.json();
  return data;
}

### 2. POST Request

async function createUser(user) {
  const response = await fetch('https://api.example.com/users', {
    method: 'POST',
    headers: {
      'Content-Type': 'application/json'
    },
    body: JSON.stringify(user)
  });
  return response.json();
}

### 3. Error Handling

async function safeFetch(url) {
  try {
    const response = await fetch(url);
    if (!response.ok) throw new Error(response.status);
    return await response.json();
  } catch (error) {
    console.error("Fetch failed:", error);
  }
}

---

## 🔹 Practical Example: Weather App

async function getWeather(city) {
  try {
    const apiKey = 'YOUR_API_KEY';
    const response = await fetch(
      `https://api.openweathermap.org/data/2.5/weather?q=${city}&appid=${apiKey}`
    );
    
    if (!response.ok) throw new Error('City not found');
    
    const data = await response.json();
    return {
      temp: Math.round(data.main.temp - 273.15), // Kelvin → Celsius
      conditions: data.weather[0].main
    };
  } catch (error) {
    console.error("Weather fetch error:", error);
    return null;
  }
}

// Usage
const weather = await getWeather("London");
if (weather) {
  console.log(`Temperature: ${weather.temp}°C`);
  console.log(`Conditions: ${weather.conditions}`);
}

---

## 🔹 AJAX with XMLHttpRequest (Legacy)
Older way to make requests (still good to know).

### 3. Caching Strategies

// Service Worker caching
self.addEventListener('fetch', (event) => {
  event.respondWith(
    caches.match(event.request)
      .then(response => response || fetch(event.request))
  );
});

---

## 🔹 Security Best Practices
### 1. Input Sanitization

function sanitizeInput(input) {
  return input.replace(/</g, '&lt;').replace(/>/g, '&gt;');
}

### 2. Content Security Policy (CSP)

<meta http-equiv="Content-Security-Policy" 
      content="default-src 'self'; script-src 'self' 'unsafe-inline'">

### 3. Secure Authentication

// Never store tokens in localStorage
const auth = {
  getToken() {
    return window.sessionStorage.getItem('token');
  },
  setToken(token) {
    window.sessionStorage.setItem('token', token);
  }
};

---

## 🔹 Practical Example: Robust API Wrapper

class ApiClient {
  constructor(baseUrl) {
    this.baseUrl = baseUrl;
    this.cache = new Map();
  }

  async request(endpoint, options = {}) {
    const cacheKey = JSON.stringify({ endpoint, options });
    
    try {
      // Cache-first strategy
      if (this.cache.has(cacheKey)) {
        return this.cache.get(cacheKey);
      }

      const response = await fetch(`${this.baseUrl}${endpoint}`, {
        headers: { 'Content-Type': 'application/json' },
        ...options
      });

      if (!response.ok) {
        throw new ApiError(
          endpoint, 
          response.status, 
          await response.text()
        );
      }

      const data = await response.json();
      this.cache.set(cacheKey, data); // Cache response
      return data;

    } catch (error) {
      if (error instanceof ApiError) {
        console.error(`API Error: ${error.message}`);
      } else {
        console.error(`Network Error: ${error.message}`);
      }
      throw error;
    }
  }
}

---

## 🔹 Best Practices Checklist
1. Error Handling
- [ ] Use specific error types
- [ ] Implement global error handlers
- [ ] Validate API responses

2. Debugging
- [ ] Utilize source maps
- [ ] Leverage browser dev tools
- [ ] Add strategic debugger statements

3. Performance
- [ ] Audit bundle size regularly
- [ ] Implement lazy loading
- [ ] Debounce rapid events

4. Security
- [ ] Sanitize user input
- [ ] Use secure token storage
- [ ] Implement CSP headers

---

### 📌 What's Next?
In Final Part 10, we'll cover:
➡️ Modern JavaScript (ES2023+)
➡️ TypeScript Fundamentals
➡️ Advanced Patterns
➡️ Where to Go From Here

#JavaScript #ProfessionalDevelopment #WebDev 🚀

Practice Exercise:
1. Implement error boundaries in a React/Vue app
2. Profile a slow function using Chrome DevTools
3. Create a memory leak and detect it

# 📚 JavaScript Tutorial - Part 10/10: Modern JavaScript & Beyond
#JavaScript #ES2023 #TypeScript #AdvancedPatterns #WebDev

Welcome to the final part of our comprehensive JavaScript series! This ultimate lesson explores cutting-edge JavaScript features, TypeScript fundamentals, advanced patterns, and pathways for continued learning.

---

## 🔹 Modern JavaScript Features (ES2023+)
### 1. Top-Level Await (ES2022)

// Module.js
const data = await fetch('https://api.example.com/data');
export { data };

// No need for async wrapper!

### 2. Array Find from Last (ES2023)

const numbers = [10, 20, 30, 20, 40];
numbers.findLast(n => n === 20); // 20 (last occurrence)
numbers.findLastIndex(n => n === 20); // 3

### 3. Hashbang Support (ES2023)

#!/usr/bin/env node
// Now executable directly via ./script.js
console.log('Hello from executable JS!');

### 4. WeakRef & FinalizationRegistry (ES2021)

const weakRef = new WeakRef(domElement);
const registry = new FinalizationRegistry(heldValue => {
  console.log(`${heldValue} was garbage collected`);
});

registry.register(domElement, "DOM Element");

### 5. Error Cause (ES2022)

try {
  await fetchData();
} catch (error) {
  throw new Error('Processing failed', { cause: error });
}

---

## 🔹 TypeScript Fundamentals
### 1. Basic Types

let username: string = "Ali";
let age: number = 25;
let isActive: boolean = true;
let scores: number[] = [90, 85, 95];
let user: { name: string; age?: number } = { name: "Ali" };

### 2. Interfaces & Types

interface User {
  id: number;
  name: string;
  email: string;
}

type Admin = User & { 
  permissions: string[];
};

function createUser(user: User): Admin {
  // ...
}

### 3. Generics

function identity<T>(arg: T): T {
  return arg;
}

const result = identity<string>("Hello");

### 4. Type Inference & Utility Types

const user = {
  name: "Ali",
  age: 25
}; // Type inferred as { name: string; age: number }

type PartialUser = Partial<typeof user>;
type ReadonlyUser = Readonly<typeof user>;

---

## 🔹 Advanced Patterns
### 1. Dependency Injection

class Database {
  constructor(private connection: Connection) {}
  
  query(sql: string) {
    return this.connection.execute(sql);
  }
}

const db = new Database(new MySQLConnection());

### 2. Proxy API

const validator = {
  set(target, property, value) {
    if (property === 'age' && typeof value !== 'number') {
      throw new TypeError('Age must be a number');
    }
    target[property] = value;
    return true;
  }
};

const user = new Proxy({}, validator);
user.age = 25; // OK
user.age = "25"; // Throws error

### 3. Observable Pattern

class Observable<T> {
  private subscribers: ((value: T) => void)[] = [];

  subscribe(callback: (value: T) => void) {
    this.subscribers.push(callback);
  }

  next(value: T) {
    this.subscribers.forEach(cb => cb(value));
  }
}

const clicks = new Observable<MouseEvent>();
clicks.subscribe(e => console.log(e.clientX));
document.addEventListener('click', e => clicks.next(e));

---

## 🔹 Web Components
### 1. Custom Elements

class PopupAlert extends HTMLElement {
  constructor() {
    super();
    this.attachShadow({ mode: 'open' });
    this.shadowRoot.innerHTML = `
      <style>
        .alert { /* styles */ }
      </style>
      <div class="alert">
        <slot></slot>
      </div>
    `;
  }
}

customElements.define('popup-alert', PopupAlert);

### 2. Template Literals for HTML

function html(strings, ...values) {
  let str = '';
  strings.forEach((string, i) => {
    str += string + (values[i] || '');
  });
  const template = document.createElement('template');
  template.innerHTML = str;
  return template.content;
}

const fragment = html`<div>Hello ${name}</div>`;

---

## 🔹 Performance Patterns
### 1. Virtualization

function renderVirtualList(items, container, renderItem) {
  const visibleItems = getVisibleItems(items, container);
  container.replaceChildren(
    ...visibleItems.map(item => renderItem(item))
  );
}