// 1. localStorage basics
// Store data
localStorage.setItem('username', 'alex');
localStorage.setItem('theme', 'dark');

// Retrieve data

// 1. DANGEROUS: Never use innerHTML with user input
const userInput = '<img src=x onerror="alert('XSS')">';

// WRONG - vulnerable to XSS
document.getElementById('output').innerHTML = userInput;

// 1. Basic Custom Element
class MyButton extends HTMLElement {
  constructor() {
    super();

    // Attach shadow DOM

// service-worker.js

const CACHE_NAME = 'my-pwa-cache-v1';
const urlsToCache = [
  '/',
  '/index.html',

import React, { lazy, Suspense, useState, useEffect } from 'react';

// 1. Component lazy loading
const HeavyComponent = lazy(() => import('./HeavyComponent'));
const AdminPanel = lazy(() => import('./AdminPanel'));
const Dashboard = lazy(() => import('./Dashboard'));

import React, { createContext, useContext, useReducer, useState } from 'react';

// 1. Basic Context
const UserContext = createContext(null);

function UserProvider({ children }) {

import React, { useState, useEffect, useCallback, useMemo, useRef, useContext } from 'react';

// 1. useState - managing component state
function Counter() {
  const [count, setCount] = useState(0);
  const [name, setName] = useState('');

// ES6 Class syntax
class Person {
  constructor(name, age) {
    this.name = name;
    this.age = age;
  }

// math.js - Named exports
export const PI = 3.14159;
export const E = 2.71828;

export function add(a, b) {
  return a + b;

// Basic try-catch
try {
  const result = riskyOperation();
  console.log('Success:', result);
} catch (error) {
  console.error('Error occurred:', error.message);

// Basic GET request
fetch('https://api.example.com/users')
  .then(response => {
    console.log('Status:', response.status);
    console.log('OK:', response.ok);
    return response.json();

// Creating elements
const div = document.createElement('div');
div.id = 'container';
div.className = 'box rounded';
div.textContent = 'Hello World';