JavaScript Unscripted

There is a difference in the way JavaScript refences variables based on whether they are primitive or non-primitive Primitive Types: string, number, bigint, Boolean, symbol, null, undefined Non-Primitive: Arrays, Objects Each variable in JS is stored in a memory “box” Assignments: But when another variable tries to assign this value, JS thinks “wait, is this a primitive or non-primitive? Because if it is primitive, I will create a new box for this new variable with the same content. But if it’s not, I will just create a refence to the existing box” PRIMITIVE: Analogy: Let's say you have a note that says 5. You give a copy of this note to your friend.  Friend now updates this copy to 10. But your copy still says 5 let a = 5; let b = a; b = 10; //a remains unchanged NON-PRIMITIVE: Analogy: Let's say you have a note with address "123 Elm Street". In that house lives a cat named "Tom". You give a copy of this note to your friend. Friend now goes t...

useEffect()  1. When the value of a variable is already derived from an existing state. 💡: React anyway renders the component again with the latest state value. No need to again watch for changes in useEffect() Use case: Call an API when the count value changes export default function UseEffectDemo () {     const [ count , setCount ] = useState ( 0 );     const handleClick = () => {         setCount ( count + 1 )     }     const callAPI = () => {         return `/api/data/ ${ count } ` <--- NO need to do useEffect(() => {}, [count])     }     return (         <>             { count }             < button onClick = { handleClick } > increment </ button >             < p > Calling API { callAPI () } </ p > <--- Calling ...

 For the project setup refer:   app Let's say i have shell and remote right now With Module federation installed And Also angular.json updated  shellserv.service.ts import { Injectable } from '@angular/core' ; @Injectable ({ providedIn : 'root' // Ensure the service is available globally }) export class ShellService { constructor () { } sayHello () { return "hello from Shell!!" } } Make sure this works in shell app first import { ApplicationConfig, provideZoneChangeDetection } from '@angular/core' ; import { provideRouter } from '@angular/router' ; import { routes } from './app.routes' ; import {ShellService} from './shellserv.service' ; export const appConfig : ApplicationConfig = { providers : [ provideZoneChangeDetection ({ eventCoalescing : true }), provideRouter ( routes ), ShellService] }; import { Component } from '@angular/core' ; import { RouterOutlet } from '@angular/router' ; impo...

Q. Why choose Backend for Frontend? Doesn’t it add unnecessary complexity? A. Not really. The benefits far outweigh the added layer of complexity, such as: Tighter Coupling: BFF connects the UI with backend services without exposing backend details directly to the UI. UI-Specific Logic: Allows for handling frontend-specific needs like error management, pagination, and more. Performance Optimization: Caches responses to reduce unnecessary backend calls when data hasn’t changed. Data Aggregation: Combines data from multiple services into a single response, reducing the need for the UI to make multiple API calls. Tailored Communication: Different UIs can interact with their own BFFs, without sharing the same backend logic. Network Security: The browser’s network tab only exposes what the BFF wants, mapping only the required fields. Old way: Angular --> Backend API (micro-services, 3rd party APIs) BFF way: Angular -> BFF -> Backend API (micro-services, 3rd party APIs) Below examp...

With reference to the apps we already have set up, Disclaimer: This is just to demonstrate a shared state. Not to be used in an ideal login/logout scenario. The best way to handle login/logouts are to use httpOnly cookies that use a token in BFF layer Let's say we we want to handle user's authentication create a folder, i am calling it "shared-library" cd shared-library ng new shared-library --create-application=false ng generate library KavyaMyUserServiceLibrary (cant use too generic names, it will not allow for public publish) Inside shared-library\shared-library\projects\user-service-library\src\lib\user-service-library.service.ts import { Injectable } from '@angular/core' ; import { BehaviorSubject } from 'rxjs' ; @ Injectable ({   providedIn : 'root' }) export class UserServiceLibraryService {   constructor () { }   private loggedIn = new BehaviorSubject < boolean >( false );   loggedIn$ = this . loggedIn . asObservable...

GITHUB Imports: import * as dotenv from "dotenv" ; import { Pinecone } from '@pinecone-database/pinecone' ; import { DirectoryLoader } from "langchain/document_loaders/fs/directory" ; import { PDFLoader } from "@langchain/community/document_loaders/fs/pdf" ; import { RecursiveCharacterTextSplitter } from "@langchain/textsplitters" ; import { OpenAIEmbeddings } from "@langchain/openai" ; import { ChatPromptTemplate } from "@langchain/core/prompts" ; import { ChatOpenAI } from "@langchain/openai" ; 1. Initialize Environment & Dependencies Why? To load configuration and set up necessary APIs (Pinecone, LangChain, OpenAI). Load environment variables ( dotenv.config() ). Initialize Pinecone client with API key. import * as dotenv from "dotenv" ; import { Pinecone } from '@pinecone-database/pinecone' ; dotenv . config (); const pc = new Pinecone ({    ...