What is JSON?

JSON (JavaScript Object Notation) is a lightweight data format used for storing and exchanging data between systems, especially in web applications. It is easy for humans to read and write, and easy for machines to parse and generate.

Key Features:

• Text-based: JSON is a plain text format that can be easily transmitted over networks.
• Structured: It represents data as key-value pairs, arrays, and nested objects.
• Language-independent: Although derived from JavaScript, JSON is supported by most programming languages.

Example:

{
    "name": "Alice",
    "age": 30,
    "skills": ["JavaScript", "Python", "SQL"]
}

Common Uses:

• API responses (e.g., from a server to a frontend app)
• Configuration files
• Data interchange between client and server

In short, JSON is a widely used format that simplifies data sharing across systems and platforms.

JSON string values must follow strict rules. Some special characters are not allowed directly and must be escaped to ensure valid syntax.

Always ensure these characters are properly escaped when including them in JSON strings to avoid parsing errors.

Recursive JSON Example

Recursive JSON refers to a data structure where an object contains a reference to another object of the same type. This is commonly used for representing hierarchies like folders, categories, menus, etc.

{
  "id": 1,
  "name": "Electronics",
  "subcategories": [
    {
      "id": 2,
      "name": "Computers",
      "subcategories": [
        {
          "id": 3,
          "name": "Laptops",
          "subcategories": []
        },
        {
          "id": 4,
          "name": "Desktops",
          "subcategories": []
        }
      ]
    },
    {
      "id": 5,
      "name": "Cameras",
      "subcategories": []
    }
  ]
}

🔍 What is XML?

XML (eXtensible Markup Language) is a markup language used to store and transport data. It is both human-readable and machine-readable, making it a popular choice for structured document exchange between systems.

Key Features:

• Text-based, platform-independent format
• Supports custom tags defined by the user
• Hierarchical (tree-like) structure
• Used in web services (SOAP), config files, and more
• Extensible and self-descriptive
• Custom tags defined by the user, not predefined
• Maintains a hierarchical (tree-like) structure
• Supports attributes within tags for extra metadata
• Extensible and widely used across industries

What is XML Validation?

XML Validation is the process of checking whether an XML document follows a defined structure or schema (like DTD or XSD). It ensures data integrity, correctness, and interoperability across systems that consume XML.

🅰️ Reading XML in Angular

Use Angular's HttpClient to fetch XML and parse it:

// In your Angular service or component
this.http.get('assets/sample.xml', { responseType: 'text' })
  .subscribe(data => {
    const parser = new DOMParser();
    const xml = parser.parseFromString(data, 'text/xml');
    const title = xml.getElementsByTagName('title')[0].textContent;
    console.log(title);
  });

🐘 Reading XML in PHP

PHP offers simple ways to parse XML using simplexml_load_string:

<?php 
    $xml = '<note>
    <to>User</to>
    <from>Admin</from>
    </note>';

    $data = simplexml_load_string($xml);
    echo $data->to; // Output: User 
?>

📜 Reading XML in JavaScript

JavaScript can parse XML using the DOMParser API:

const xmlString = `
<book>
  <title>XML Basics</title>
</book>`;

const parser = new DOMParser();
const xmlDoc = parser.parseFromString(xmlString, "text/xml");
const title = xmlDoc.getElementsByTagName("title")[0].textContent;

console.log(title); // Output: XML Basics

⚛️ Reading XML in React

In React, you can use the same DOMParser logic, typically inside useEffect:

import { useEffect } from "react";

export default function XmlReader() {
  useEffect(() => {
    const xml = `
<user>
  <name>Alice</name>
</user>`;

    const doc = new DOMParser().parseFromString(xml, "text/xml");
    const name = doc.getElementsByTagName("name")[0].textContent;
    console.log(name);
  }, []);

  return <div>Check console for output</div>;
}

🌐 What is a URL?

URL (Uniform Resource Locator) is the address used to access resources on the internet. It specifies the location of a web page, image, video, API, or any other file available online.

🔎 Parts of a URL:

• Scheme: Protocol used (e.g., https)
• Host: Domain name or IP address
• Port (optional): Specific port like :443
• Path: Resource location (e.g., /products)
• Query: Data passed in key-value pairs (e.g., ?id=10)
• Fragment: Internal page anchor (e.g., #section2)

🔐 Secure vs Unsecure URLs

Secure URLs use HTTPS and encrypt the connection. Unsecure URLs use HTTP and do not provide encryption.

🚫 Characters Not Allowed

Some characters are not allowed in URLs and must be encoded:

• space → %20
• <, >, {, }
• |, \\, ^, ~, [ ], `
• ", #, % (in some contexts)

🔁 URL Encoding & Decoding

URL encoding replaces unsafe characters with a % followed by two hexadecimal digits. This ensures proper transmission through URLs.

JavaScript Examples:

    encodeURIComponent("name=John Doe")
    // Output: name%3DJohn%20Doe

    decodeURIComponent("name%3DJohn%20Doe")
    // Output: name=John Doe

🖼 What Are Images in Webpages?

Images are graphical content embedded in web pages to enhance visual appeal, convey information, or support user interaction. Common types include photos, icons, charts, and illustrations.

Images are included in websites to attract attention, represent branding, and improve user understanding of content. They can be static (e.g., JPEGs, PNGs) or dynamic (e.g., SVGs, animations).

Choosing the right format ensures faster load times, visual clarity, and better performance across devices.

📂 Image Formats & Use Cases

• JPEG: Best for photographs and rich color images
• PNG: Supports transparency; ideal for logos & UI elements
• SVG: Scalable vector graphics for icons and illustrations
• WebP: Compressed and lightweight format supported in modern browsers
• GIF: Used for simple animations, but limited color support

Choosing the right format affects load time, clarity, and performance.

Different parts of a webpage and social platforms require specific image dimensions to look good and load efficiently. Using the correct size improves performance, layout consistency, and branding.

🖼️ Common Image Sizes:

• Favicon: 16×16 px or 32×32 px (ICO or PNG)
• Web Banner / Hero: 1920×600 px (or responsive full width)
• Open Graph (og:image): 1200×630 px
• Logo for header/footer: 150×50 px (can vary by design)
• Instagram Post: 1080×1080 px
• Instagram Story / Reel: 1080×1920 px
• WhatsApp Status: 1080×1920 px
• Blog Thumbnail: 1200×675 px (16:9 aspect ratio)
• Mobile App Icon: 512×512 px (square PNG)

🔧 How to Add Images

Images can be added to HTML using the <img> tag or via CSS for decorative or background use.

HTML Example:

<img src="/images/banner.jpg" alt="Site Banner" width="600" />

CSS Background Example:

div {
  background-image: url('/images/bg.jpg');
  background-size: cover;
}

⚡ Optimization & Accessibility

• Always include alt attributes for accessibility
• Compress images to reduce load time
• Use lazy loading (loading="lazy") to defer off-screen images
• Prefer modern formats like WebP for faster delivery
• Use responsive images with srcset for better device scaling

Optimized and accessible images improve user experience, SEO, and overall site performance.