### 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))
  );
}

🔥 Trending Repository: awesome-front-end-system-design

📝 Description: Curated front end system design resources for interviews and learning

🔗 Repository URL: https://github.com/greatfrontend/awesome-front-end-system-design

🌐 Website: https://greatfrontend.com/front-end-system-design-playbook

📖 Readme: https://github.com/greatfrontend/awesome-front-end-system-design#readme

📊 Statistics:
🌟 Stars: 7.7K stars
👀 Watchers: 37
🍴 Forks: 255 forks

💻 Programming Languages: Not available

🏷️ Related Topics:

#react #javascript #front_end #system_design #system_design_interview #front_end_system_design

==================================
🧠 By: https://t.iss.one/DataScienceN

📌 How to Build a Tic Tac Toe Game with Phaser.js

✍️ Manish Shivanandhan
🏷️ #JavaScript

📌 How to Build a Tic Tac Toe Game with Phaser.js

✍️ Manish Shivanandhan
🏷️ #JavaScript

📌 Create 3D Web Experiences with JavaScript and Three.js

✍️ Beau Carnes
🏷️ #JavaScript

📌 How to Build a Snake Game using Phaser.js

✍️ Manish Shivanandhan
🏷️ #JavaScript

📌 How to Build Production-Ready Web Apps with the Hono Framework: A Deep Dive

✍️ Mayur Vekariya
🏷️ #JavaScript

📌 Code Your Own Code Editor

✍️ Beau Carnes
🏷️ #JavaScript

📌 How to Optimize Search in JavaScript with Debouncing

✍️ Ajay Yadav
🏷️ #JavaScript

📌 How to Build and Deploy an Image Hosting Service on Sevalla

✍️ Manish Shivanandhan
🏷️ #JavaScript

📌 How Does the Morgan Express Middleware Library Work? Explained with Code Examples

✍️ Orim Dominic Adah
🏷️ #JavaScript

📌 How to Build an Adaptive Tic-Tac-Toe AI with Reinforcement Learning in JavaScript

✍️ Mayur Vekariya
🏷️ #JavaScript

📌 How to Test JavaScript Apps: From Unit Tests to AI-Augmented QA

✍️ Ajay Yadav
🏷️ #JavaScript

📌 How to Create and Style Tables with Vanilla JavaScript

✍️ Md. Fahim Bin Amin
🏷️ #JavaScript

📌 How to Build a CRUD App with TanStack Start and TanStackDB (with RxDB Integration)

✍️ Andrew Baisden
🏷️ #JavaScript

📌 How __proto__, prototype, and Inheritance Actually Work in JavaScript

✍️ Shejan Mahamud
🏷️ #JavaScript

📌 How Do Global Execution Context and Temporal Dead Zone Work in JavaScript?

✍️ Shejan Mahamud
🏷️ #JavaScript

📌 Learn Vue.js – JavaScript Framework Course

✍️ Beau Carnes
🏷️ #JavaScript

📌 Level Up Your JavaScript – Detect Smells & Write Clean Code

✍️ Beau Carnes
🏷️ #JavaScript