Merge branch 'CodeHarborHub:main' into main

Author: komal-agarwal5

blog/introduction-to-web-assembly.md

@@ -0,0 +1,85 @@
+---
+title: 'Introduction to WebAssembly: Enhancing Web Performance'
+sidebar_label: WebAssembly and Web Performance
+authors: [nayanika-mukherjee]
+tags: [webassembly, wasm, web performance, technology]
+date: 2024-07-21
+hide_table_of_contents: true
+---
+
+## Introduction
+
+WebAssembly (Wasm) is a binary instruction format that provides near-native performance for web applications. Designed as a portable compilation target for high-level languages like C, C++, and Rust, WebAssembly enables efficient execution of code on modern web browsers. This documentation introduces WebAssembly, its benefits, and how to get started with Wasm development.
+
+## What is WebAssembly (Wasm)?
+
+WebAssembly is a low-level, assembly-like language with a compact binary format that runs with near-native performance. It provides a new way to run code written in multiple languages on the web at near-native speed, allowing for powerful web applications.
+
+## Why Use WebAssembly?
+
+WebAssembly offers several advantages:
+
+- **Performance:** Wasm code executes at near-native speeds, making it ideal for performance-critical applications like games, simulations, and complex calculations.
+- **Portability:** Code compiled to Wasm can run on any modern web browser, providing a consistent execution environment across different platforms.
+- **Interoperability:** Wasm integrates seamlessly with JavaScript, enabling the use of existing web technologies and frameworks.
+- **Security:** Wasm operates in a safe, sandboxed execution environment, reducing the risk of security vulnerabilities.
+
+## How WebAssembly Works
+
+WebAssembly works by compiling high-level code into a binary format that can be executed by the browser's virtual machine. The process involves several steps:
+
+1. **Source Code:** Write your code in a high-level language like C, C++, or Rust.
+2. **Compilation:** Use a compiler to convert the source code into WebAssembly binary format (`.wasm` file).
+3. **Execution:** The browser's virtual machine executes the Wasm binary, providing near-native performance.
+
+## Setting Up Your Environment
+
+To start developing with WebAssembly, you'll need to set up your development environment. This includes installing the necessary tools and compilers.
+
+### Setting Up a Development Environment
+
+1. **Install Node.js:** Node.js is required for various Wasm development tools.
+2. **Install a Compiler:** Depending on your source language, install a suitable compiler. For C/C++, install Emscripten. For Rust, install the Rust toolchain.
+
+### Compiling to WebAssembly
+
+To compile your code to WebAssembly, follow these steps:
+
+1. **Write Your Code:** Write your application in C, C++, Rust, or another supported language.
+2. **Compile:** Use your compiler to generate the Wasm binary. For example, with Emscripten, use the following command:
+   ```bash
+   emcc your_code.c -o your_code.wasm
+   ```
+For Rust:
+```
+rustc --target wasm32-unknown-unknown -O your_code.rs
+```
+## Interfacing with JavaScript
+
+WebAssembly can interact with JavaScript, enabling you to call Wasm functions from JavaScript and vice versa. Use the JavaScript WebAssembly API to load and instantiate Wasm modules.
+
+## Debugging WebAssembly Code
+
+Debugging Wasm code involves using browser developer tools and other utilities:
+
+- Browser DevTools: Modern browsers provide debugging support for WebAssembly, including breakpoints, step execution, and variable inspection.
+- Source Maps: Generate source maps to map Wasm code back to the original source code for easier debugging.
+- Optimizing WebAssembly Performance
+
+To optimize Wasm performance:
+
+- Optimize Code: Write efficient, performance-oriented code in the source language.
+- Compiler Flags: Use compiler optimization flags to improve the performance of the generated Wasm binary.
+- Profiling: Use profiling tools to identify and address performance bottlenecks.
+
+## Case Studies and Real-World Examples
+
+Explore case studies and real-world examples of WebAssembly in action:
+
+- Gaming: High-performance games running in the browser.
+- Data Visualization: Complex data visualizations with real-time interactivity.
+- Scientific Simulations: Web-based simulations for scientific research and education.
+
+## Conclusion
+
+WebAssembly is a powerful technology that enhances web performance and expands the capabilities of web applications. By leveraging Wasm, developers can build high-performance, portable, and secure applications that run seamlessly across different browsers and platforms. This documentation provides a comprehensive guide to getting started with WebAssembly, covering essential concepts, tools, and best practices.

courses/Next.Js/Intermediate-level/Data-Fetching/Handling.md

@@ -63,4 +63,11 @@ Handling errors in data fetching is crucial to provide a good user experience.
        </div>
      );
    }
-   ``` 
+   ``` 
+
+  **Output:**
+  <BrowserWindow >
+    <div>  
+         Failed to load: 404 server not found
+    </div>
+  </BrowserWindow>

courses/Next.Js/Intermediate-level/Data-Fetching/fetching-Data.md

@@ -102,4 +102,18 @@ export default function Home() {
     </div>
   );
 }
-```
+```
+
+**Output:**
+
+  <BrowserWindow url="http://localhost:3000/post/3">
+    <h1>Posts</h1>
+    <ul>
+      <li>Post 1</li>
+      <li>Post 2</li>
+      <li>Post 3</li>
+      <li>Post 4</li>
+      <li>Post 5</li>
+      <li>Post 6</li>
+    </ul>
+  </BrowserWindow>

courses/Next.Js/advance-level/Advance-Routing/Customizing.md

@@ -80,19 +80,57 @@ Route-level code splitting ensures that only the necessary code for the current
 2. **Using `dynamic` for Code Splitting with Custom Loading**:
    ```javascript
    // pages/index.js
+   import { useState } from 'react';
    import dynamic from 'next/dynamic';
 
    const DynamicComponentWithCustomLoading = dynamic(() => import('../components/DynamicComponent'), {
      loading: () => <p>Loading...</p>,
    });
 
    export default function Home() {
+    const [loadDynamicComponent, setLoadDynamicComponent] = useState(false);
+
+    const handleClick = () => {
+      setLoadDynamicComponent(true);
+    };
      return (
        <div>
          <h1>Home Page</h1>
-         <DynamicComponentWithCustomLoading />
+         <button onClick={handleClick}>Load Dynamic Component</button>
+         {loadDynamicComponent && <DynamicComponentWithCustomLoading />}
        </div>
      );
    }
    ```
- 
+ **Output:**
+    <BrowserWindow>
+      <div>
+         <h1 style={{fontSize:"1.5rem"}}>Home Page</h1>
+         <button onClick={()=>{
+          let button=document.getElementById("button")
+          button.style.display="none"
+          let Interval=setInterval(()=>{
+          let Dynamic=document.getElementById("Dynamic")
+          let datas=["1st Content","2nd Content","3rd Content"]
+          let Index
+          if(Dynamic && Dynamic.textContent && Dynamic.textContent.length>1){
+          if(Dynamic.textContent==="Switch Dynamic Content"){
+            Index=0
+          }
+          else{
+            if(datas.indexOf(Dynamic.textContent)==2){
+              Index=0
+            }
+            else{Index=datas.indexOf(Dynamic.textContent)+1}
+          }
+          Dynamic.textContent=datas[Index]
+          } 
+          else{
+            clearInterval(Interval)
+            return
+          }
+          },1000)
+         }} id="button" style={{padding:"0.8rem 2rem",fontWeight:"600",borderRadius:"0.6rem",border:"0.1rem solid",margin:"0.5rem"}}>Load Dynamic Component</button>
+         <h2 style={{fontSize:"1.3rem"}} id="Dynamic">Switch Dynamic Content</h2>
+      </div>
+    </BrowserWindow>

courses/Next.Js/advance-level/Advance-data-fetching/dynamic-generation.md

@@ -31,19 +31,20 @@ You can combine static and dynamic data fetching to build more flexible and perf
    export default function Home({ staticData }) {
      const [dynamicData, setDynamicData] = useState(null);
 
-     useEffect(() => {
+     function handleClick(){
        // Fetch dynamic data on client-side
        fetch('https://api.example.com/dynamic-data')
          .then((res) => res.json())
          .then((data) => setDynamicData(data));
-     }, []);
+     }
 
      return (
        <div>
          <h1>Combining Static and Dynamic Data Fetching</h1>
          <h2>Static Data</h2>
          <pre>{JSON.stringify(staticData, null, 2)}</pre>
          <h2>Dynamic Data</h2>
+         <button onClick={handleClick}>click to Fetch</button>
          {dynamicData ? (
            <pre>{JSON.stringify(dynamicData, null, 2)}</pre>
          ) : (
@@ -53,7 +54,44 @@ You can combine static and dynamic data fetching to build more flexible and perf
      );
    }
    ```
-
+**Output:**
+    <BrowserWindow url="http://localhost:3000/users">
+      <div>
+          <h1 style={{fontSize:"1.5rem"}}>Combining Static and Dynamic Data Fetching</h1>
+          <h2 style={{fontSize:"1.3rem"}}>Static Data</h2>
+          <pre style={{margin:"2rem auto"}}>{`${JSON.stringify([{ id:"1",
+                    name:"siva",
+                    info:"Developer"
+                   },{
+                     id:"2",
+                     name:"Kumar",
+                     info:"Developer"
+                   }],null,2)}`}</pre>
+          <h2 style={{fontSize:"1.3rem"}}>Dynamic Data</h2>
+          <button onClick={()=>{
+             let text=document.getElementById("text")
+             let loading=document.getElementById("loading")
+             let details=[{
+                    id:"11",
+                    name:"Rohan",
+                    info:"Jr.Developer"
+                   },{
+                     id:"15",
+                     name:"Mano",
+                     info:"Sr.Developer"
+                   }]
+              loading.textContent="Loading..."
+              setTimeout(() => {
+              text.style.display="block"
+              loading.textContent=" "
+              text.textContent=JSON.stringify(details, null, 2)
+              }, 2000)
+             }} style={{padding:"1rem 2rem",border:"none",borderRadius:"0.6rem",color:"white",background:"black",fontWeight:"600",cursor:"pointer"}}>click to Fetch</button>
+          <br />
+          <p id="loading"  style={{margin:"2rem auto"}}></p>
+          <pre id="text" style={{margin:"2rem auto",display:"none"}}></pre>
+      </div>
+    </BrowserWindow> 
 #### Optimizing Data Fetching for Performance
 
 1. **Minimizing API Calls**:
@@ -86,6 +124,21 @@ You can combine static and dynamic data fetching to build more flexible and perf
    }
    ```
 
+**Output:**
+    <BrowserWindow url="http://localhost:3000/data">
+      <div>
+          <h1 style={{fontSize:"1.5rem"}}>Optimized Data Fetching</h1> 
+          <pre style={{margin:"2rem auto"}}>{`${JSON.stringify([{ id:"1",
+                    name:"siva",
+                    info:"Developer"
+                   },{
+                     id:"2",
+                     name:"Kumar",
+                     info:"Developer"
+                   }],null,2)}`}</pre>
+      </div>
+    </BrowserWindow> 
+
 3. **Prefetching Data**:
    - Prefetch data for links using the `next/link` component to improve navigation speed.
    ```javascript
@@ -103,6 +156,22 @@ You can combine static and dynamic data fetching to build more flexible and perf
    }
    ```
 
+**Output:**
+    <BrowserWindow>
+      <div>
+          <h1 style={{fontSize:"1.5rem"}} id="Text">Home Page</h1> 
+          <button style={{textDecoration:"underline",color:"blue",border:"none",background:"transparent",cursor:"pointer"}}
+          onClick={()=>{
+            let text=document.getElementById("Text")
+            text.textContent="About page"
+            let button=document.getElementById("button")
+            button.style.display="none"
+          }}
+           id="button">Go to About</button>
+      </div>
+    </BrowserWindow> 
+
+
 4. **Using SWR for Client-side Caching**:
    - `SWR` (Stale-While-Revalidate) is a React Hooks library for data fetching that provides caching and revalidation.
    ```javascript
@@ -119,4 +188,4 @@ You can combine static and dynamic data fetching to build more flexible and perf
      return <div>Data: {JSON.stringify(data)}</div>;
    }
    ```
- 
+

courses/Next.Js/advance-level/Advance-data-fetching/static-generation.md

@@ -41,6 +41,8 @@ Static generation with revalidation allows you to generate static pages at build
    }
    ```
 
+
+
 #### Server-side Rendering with Caching Strategies
 
 Server-side rendering (SSR) can be optimized using caching strategies to improve performance and reduce server load.
@@ -73,4 +75,26 @@ Server-side rendering (SSR) can be optimized using caching strategies to improve
 
 2. **Using Cache-Control Headers**:
    - `s-maxage=10`: Cache the response on the server for 10 seconds.
-   - `stale-while-revalidate`: Serve stale content while revalidating in the background.
+   - `stale-while-revalidate`: Serve stale content while revalidating in the background.
+
+**Output:**
+    <BrowserWindow url="http://localhost:3000/users">
+      <div>
+          <h1>Static Generation with Revalidation</h1>
+          <button onClick={()=>{
+             let text=document.getElementById("text")
+             let details=[{
+                    id:"1",
+                    name:"siva",
+                    info:"Developer"
+                   },{
+                     id:"2",
+                     name:"John",
+                     info:"Developer"
+                   }] 
+              text.textContent=JSON.stringify(details, null, 2) 
+             }} style={{padding:"1rem 2rem",border:"none",borderRadius:"0.6rem",color:"white",background:"black",fontWeight:"600",cursor:"pointer"}}>click to Fetch</button>
+          <br />
+          <pre id="text" style={{margin:"2rem auto"}}></pre>
+      </div>
+    </BrowserWindow>