Blancer.com Tutorials and projects

I am performing crud operation using html,css and javascript. In this while i m running the web page it’s displaying the form structure but when i am giving the input its not taking or input is not getting saved. how i should resolve this and what mistake am i making there? why my data is not stored ,without storing data i can not perform the crud operation.

var selectedRow = null

function onFormSubmit() {
    if (validate()) {
        var formData = readFormData();
        if (selectedRow == null)
            insertNewRecord(formData);
        else
            updateRecord(formData);
        resetForm();
    }
}

function readFormData() {
    var formData = {};
    formData["fullName"] = document.getElementById("fullName").value;
    formData["empCode"] = document.getElementById("empCode").value;
    formData["salary"] = document.getElementById("salary").value;
    formData["city"] = document.getElementById("city").value;
    return formData;
}

function insertNewRecord(data) {
    var table = document.getElementById("employeeList").getElementsByTagName('tbody')[0];
    var newRow = table.insertRow(table.length);
    cell1 = newRow.insertCell(0);
    cell1.innerHTML = data.fullName;
    cell2 = newRow.insertCell(1);
    cell2.innerHTML = data.empCode;
    cell3 = newRow.insertCell(2);
    cell3.innerHTML = data.salary;
    cell4 = newRow.insertCell(3);
    cell4.innerHTML = data.city;
    cell4 = newRow.insertCell(4);
    cell4.innerHTML = `<a onClick="onEdit(this)">Edit</a>
                       <a onClick="onDelete(this)">Delete</a>`;
}

function resetForm() {
    document.getElementById("fullName").value = "";
    document.getElementById("empCode").value = "";
    document.getElementById("salary").value = "";
    document.getElementById("city").value = "";
    selectedRow = null;
}

function onEdit(td) {
    selectedRow = td.parentElement.parentElement;
    document.getElementById("fullName").value = selectedRow.cells[0].innerHTML;
    document.getElementById("empCode").value = selectedRow.cells[1].innerHTML;
    document.getElementById("salary").value = selectedRow.cells[2].innerHTML;
    document.getElementById("city").value = selectedRow.cells[3].innerHTML;
}
function updateRecord(formData) {
    selectedRow.cells[0].innerHTML = formData.fullName;
    selectedRow.cells[1].innerHTML = formData.empCode;
    selectedRow.cells[2].innerHTML = formData.salary;
    selectedRow.cells[3].innerHTML = formData.city;
}

function onDelete(td) {
    if (confirm('Are you sure to delete this record ?')) {
        row = td.parentElement.parentElement;
        document.getElementById("employeeList").deleteRow(row.rowIndex);
        resetForm();
    }
}
function validate() {
    isValid = true;
    if (document.getElementById("fullName").value == "") {
        isValid = false;
        document.getElementById("fullNameValidationError").classList.remove("hide");
    } else {
        isValid = true;
        if (!document.getElementById("fullNameValidationError").classList.contains("hide"))
            document.getElementById("fullNameValidationError").classList.add("hide");
    }
    return isValid;
}

<table>
    <tr>
        <td>
          <form onsubmit="event.preventDefault();onFormsubmit();" autocomplete="off">
            <div>
            <label>Full Name</label>
            <input type="text" name="fullName">
            </div>
            <div>
               <label>Emp Code</label>
            <input type="text" name="empCode"> 
            </div>
            <div>
                <label>Salary</label>
            <input type="text" name="salary">
            </div>
            <div>
                <label>City</label>
            <input type="text" name="city">
            </div>
            <div class="form-action-buttons">
                <input type="submit" value="Submit">
            </div>
          </form>  
        </td>
        <td>
            <table class="list" id="employeeList">
                <thead>
                    <tr>
                        <th>Full Name</th>
                        <th>EMP Code</th>
                        <th>Salary</th>
                        <th>City</th>
                    </tr>
                </thead>
            </table>
        </td>
    </tr>
</table>

So I have an ad stick to the bottom of the page. It has a closed icon, when i click on it, I need to understand if there is a way to know when an ad is closed?

I created this which let me know when when the ad i need is rendered:

'use client';

import { memo, useEffect } from 'react';

export interface StickyBannerState {
  height: number;
  present: boolean;
  slotID: string;
}

/**
 * dispatchUpdate
 *
 * @param detail - sticky banner state
 */
const dispatchUpdate = (detail: StickyBannerState): void => {
  window.dispatchEvent(
    new CustomEvent<StickyBannerState>('stickyBanner:update', { detail }),
  );
};

interface IAdStickyBridgeProps {
  slotID: string;
  enabled: boolean;
}

/**
 * AdStickyBridge
 *
 * Observes the ad slot element and emits sticky height changes.
 * Also listens for a "close" postMessage from the slot's iframe.
 *
 * Does not call GPT APIs. Safe alongside AdSlotClient.
 *
 * @param props - component props
 * @param props.slotID - ad slot element id
 * @param props.enabled - whether to enable observers
 */
function AdStickyBridge({
  enabled,
  slotID,
}: IAdStickyBridgeProps): React.ReactElement | null {
  useEffect(() => {
    if (!enabled || !slotID) {
      return;
    }

    let resizeObs: ResizeObserver | null = null;
    let mutationObs: MutationObserver | null = null;
    let lastHeight = -1;
    let lastPresent = false;

    /**
     * measureAndDispatch
     *
     * Measures the slot element and dispatches sticky state
     * only when values actually change.
     */
    const measureAndDispatch = (): void => {
      const el = document.getElementById(slotID);

      if (!el) {
        if (lastHeight !== 0 || lastPresent !== false) {
          lastHeight = 0;
          lastPresent = false;

          dispatchUpdate({ height: 0, present: false, slotID });
        }

        return;
      }

      const displayNone = Boolean(getComputedStyle(el)?.display === 'none');

      const h = displayNone ? 0 : Math.max(0, el.offsetHeight || 0);
      const present = h > 0;

      if (h !== lastHeight || present !== lastPresent) {
        lastHeight = h;
        lastPresent = present;

        dispatchUpdate({ height: present ? h : 0, present, slotID });
      }
    };

    /**
     * onMessage
     *
     * Handles postMessage coming from the slot iframe.
     * Expected payloads:
     * { type: 'ad-closed', slotId: '<slotID>' }
     * { event: 'ad-closed', slotId: '<slotID>' }
     *
     * @param ev - message event
     */
    const onMessage = (ev: MessageEvent): void => {
      // 1) Soft check payload shape
      const data = ev?.data as
        | { type?: string; event?: string; slotId?: string }
        | undefined;

      if (!data) {
        return;
      }

      console.log('marcelo data', data);

      const isClose = data.type === 'ad-closed' || data.event === 'ad-closed';

      if (!isClose) {
        return;
      }

      // 2) Scope to the correct slot:
      //     - If slotId is provided, require it to match.
      if (data.slotId && data.slotId !== slotID) {
        return;
      }

      // 3) Optional: verify the message comes from the slot's descendant iframe
      //    (prevents unrelated messages from other frames).
      const el = document.getElementById(slotID);
      if (!el) {
        return;
      }

      const frames = el.getElementsByTagName('iframe');
      let fromOurFrame = false;

      for (let i = 0; i < frames.length; i += 1) {
        if (frames?.[i]?.contentWindow === ev.source) {
          fromOurFrame = true;
          break;
        }
      }

      if (!fromOurFrame) {
        return;
      }

      // 4) Close instruction accepted → drop sticky offset
      dispatchUpdate({ height: 0, present: false, slotID });
    };

    // Initial measure after layout settles
    requestAnimationFrame(measureAndDispatch);

    // Resize observation
    const el = document.getElementById(slotID);
    if (el && 'ResizeObserver' in window) {
      resizeObs = new ResizeObserver(() => {
        measureAndDispatch();
      });
      resizeObs.observe(el);
    }

    // Watch the slot's parent (or body) for DOM/class/style changes
    const parent = el?.parentNode || document.body;

    mutationObs = new MutationObserver(() => {
      measureAndDispatch();
    });

    mutationObs.observe(parent, {
      attributeFilter: ['style', 'class'],
      attributes: true,
      childList: true,
      subtree: true,
    });

    window.addEventListener('message', onMessage);

    return (): void => {
      if (resizeObs) {
        resizeObs.disconnect();
      }

      if (mutationObs) {
        mutationObs.disconnect();
      }

      window.removeEventListener('message', onMessage);

      // Ensure wrapper returns to bottom on unmount
      dispatchUpdate({ height: 0, present: false, slotID });
    };
  }, [slotID, enabled]);

  return null;
}

export default memo(AdStickyBridge);

'use client';

import { memo, useEffect, useRef } from 'react';

import {
  defineSlot,
  getSlotById,
} from '@tu/utilities/helpers/ads/gpt/gptManager';
import type { IAdSettings } from '@tu/commons/ads/IAdSettings';
import useStore from '@tu/commons/store/Store';

import AdStickyBridge from './AdStickyBridge';

interface IAdSlotProps {
  adSettings: IAdSettings | null;
  lazyLoaded?: boolean;
}

/**
 * AdSlotClient
 *
 * @param props - component props
 * @param props.adSettings - ad settings
 * @param props.lazyLoaded - lazy loaded
 */
function AdSlotClient({
  adSettings,
  lazyLoaded,
}: IAdSlotProps): React.ReactElement | null {
  const hasLoad = useRef(false);
  const gptStarted = useStore((state) => !!state.scriptLoaded?.gptStarted);
  const hasOneTrust = useStore((state) => !!state.featureFlag?.hasOneTrust);

  useEffect(() => {
    let slot: googletag.Slot | undefined | null;

    if (!hasLoad.current && gptStarted && adSettings) {
      window.googletag = window.googletag || { cmd: [] };

      window.googletag.cmd.push(() => {
        if (!lazyLoaded) {
          const checkSlot = getSlotById(adSettings?.slotID);

          if (!checkSlot) {
            slot = defineSlot(adSettings, true, hasOneTrust);
          }
        }

        if (lazyLoaded) {
          slot = getSlotById(adSettings?.slotID);

          if (slot && document.getElementById(adSettings?.slotID)) {
            window.googletag.pubads().refresh([slot]);
          }
        }
      });

      hasLoad.current = true;
    }

    return (): void => {
      slot = null;
    };
  }, [adSettings, hasOneTrust, lazyLoaded, gptStarted]);

  if (!adSettings || lazyLoaded) {
    return null;
  }

  const isStickyCandidate =
    adSettings.position === 'ADH' ||
    adSettings.slotID.startsWith('div-gpt-ad-adh-');

  return (
    <>
      <div
        className="m-auto flex items-center text-center"
        id={adSettings.slotID}
      />
      <AdStickyBridge enabled={isStickyCandidate} slotID={adSettings.slotID} />
    </>
  );
}

export default memo(AdSlotClient);

But when I close it, nothing else comes back.
On another component I have this:

  const [stickyBanner, setStickyBanner] = useState<StickyBannerState>({
    height: 0,
    present: false,
    slotID: '',
  });

  useEffect(() => {
    /**
     * onUpdate
     *
     * @param ev - event
     */
    const onUpdate = (ev: Event): void => {
      const e = ev as CustomEvent<StickyBannerState>;

      console.log('marcelo e', e);

      if (!e.detail) {
        return;
      }

      setStickyBanner(e.detail);
    };

    window.addEventListener('stickyBanner:update', onUpdate as EventListener);

    return (): void =>
      window.removeEventListener(
        'stickyBanner:update',
        onUpdate as EventListener,
      );
  }, [nodeId]);

when the component mounts, stickyBanner.present and stickyBanner.height are falsy, after some second they become truthy and when i close the ad, nothing else changes back to falsy.

So is there a way to know when a Google (GPT) ad is being closed?

I want to reverse the direction of the slotreel, As of Now it is from bottom to top.
but when I am reversing the direction it is creating gap on the top feels like stretching it,

Below is the code snippet , consider slotItem as just any text lets say but the problem is when I am reversing the direction it creates gap at the top, My aim to stop the movement of reel smoothly after 9-10 seconds when I found the result like it can be any of them , so from bottom to top it creates illusion but from top to bottom , it could not and as a result it shows gap at the top, so what could be done , any other better approach please !

import { FC, useEffect, useRef, useMemo, useCallback } from 'react';
import styles from './SpinningBarWheel.module.css';
import SlotItem from './spinBarHighlight/slotItem/SlotBackgroundItem';
import WheelHighlight from './spinBarHighlight/wheelHighlight/WheelHighlight';
// import { isMatchingPrize } from '../wheelDropModals/spinBarUtils';
import type { WinNotificationType, PrizedropPrizeType } from '@pp/core/src/api/fetchers/promotionsV2/types/promotions';

interface Props {
  spinBarItems: { text: string; color: string; isBaseColor?: boolean; prize?: PrizedropPrizeType }[];
  result: WinNotificationType;
}

const SpinningBarWheel: FC<Props> = ({ result, spinBarItems }) => {
  console.log(result, "result");
  
  const reelRef = useRef<HTMLDivElement>(null);
  const posRef = useRef(0);
  const animRef = useRef<number>();
  const winningIndexRef = useRef<number | null>(null);

  const rowHeight = 100;
  const reelLength = spinBarItems.length * rowHeight;

  const getMiddleOffset = () => window.innerHeight / 2 - rowHeight / 2;
  console.log(getMiddleOffset(), 'getMiddleOffset');
  

  // useEffect(() => {
  //   const handleResize = () => {
  //     if (winningIndexRef.current !== null && reelRef.current) {
  //       const loops = 10;
  //       const newOffset = getMiddleOffset();
  //       const targetPos = -((winningIndexRef.current + loops * spinBarItems.length) * rowHeight) + newOffset;

  //       posRef.current = targetPos;
  //       reelRef.current.style.transform = `translateY(${posRef.current % reelLength}px)`;
  //     }
  //   };

  //   window.addEventListener('resize', handleResize);
  //   return () => window.removeEventListener('resize', handleResize);
  // }, [spinBarItems.length, reelLength, rowHeight]);

  const getMiddleTextElement = useCallback(() => {
    if (!reelRef.current) return null;
    const rects = Array.from(reelRef.current.children) as HTMLDivElement[];
    const middleY = window.innerHeight / 2;
    for (const child of rects) {
      const rect = child.getBoundingClientRect();
      if (rect.top <= middleY && rect.bottom >= middleY) {
        return child.querySelector('span') as HTMLSpanElement;
      }
    }
    return null;
  }, []);

  const renderedSlotItems = useMemo(() => {
    const loops = 6;
    return Array.from({ length: Math.ceil(loops) }).flatMap((_, i) =>
      spinBarItems.map((item, j) => (
        <SlotItem
          key={`${i}-${j}`}
          text={item.text}
          color={item.color}
          isBaseColor={item.isBaseColor}
          // isFirst={i === 0 && j === 0} // Only true for the very first item
        />
      ))
    );
  }, [spinBarItems]);

  const easeOutCubic = useCallback((t: number) => 1 - Math.pow(1 - t, 3), []);

  useEffect(() => {
    const candidatePositions: number[] = [];

    spinBarItems.forEach((item, idx) => {
      if (idx === 3) {
        winningIndexRef.current = idx; // Save for snapping later
        console.log(idx, "idx");
        
        for (let loop = 0; loop < 20; loop++) {
          const pos = getMiddleOffset() - ((idx + loop * spinBarItems.length) * rowHeight);
          console.log(pos, "pos");
          
          candidatePositions.push(pos);
        }
      }
    });

    const target = candidatePositions[candidatePositions.length - 1];
    const start = posRef.current;
    const distance = target - start;
    const duration = 500;
    const startTime = Date.now();
    console.log({ target, start, distance }, 'animation start');
    

    const animate = () => {
      const elapsed = Date.now() - startTime;
      const t = Math.min(1, elapsed / duration);
      const eased = easeOutCubic(t);

      posRef.current = start + distance * eased;

      if (reelRef.current) {
        reelRef.current.style.transform = `translateY(${posRef.current % reelLength}px)`;
        console.log(posRef.current % reelLength, 'current pos');
        
      }

      if (t < 1) {
        animRef.current = requestAnimationFrame(animate);
      } else {
        const middleSpan = getMiddleTextElement();
        if (middleSpan) {
          middleSpan.classList.add(styles.resultScale);
          setTimeout(() => middleSpan.classList.remove(styles.resultScale), 4000);
        }
      }
    };

    animRef.current = requestAnimationFrame(animate);

    return () => {
      if (animRef.current) {
        cancelAnimationFrame(animRef.current);
      }
    };
  }, [result, spinBarItems, reelLength, easeOutCubic, getMiddleTextElement]);

  return (
    <>
      <div className={styles.speedlinesWrapper}>
        <div className={styles.speedlines}></div>
      </div>
      <div className={styles.speedlinesBlend}></div>
      <div className={styles.slotContainer}>
        <div ref={reelRef} className={styles.slotReel}>
          {renderedSlotItems}
        </div>
        <WheelHighlight />
      </div>
    </>
  );
};

export default SpinningBarWheel;

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/18.3.1/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/18.3.1/umd/react-dom.production.min.js"></script>

I am a beginner trying to contribute to open-source through cal.com (an open source calendly alternative). The thing is I am trying to setup Prisma on my system by using Yarn. I keep running into this issue.

I ran this syntax yarn add -D prisma@latest

I have installed postgreSQL on my system.

➤ YN0008: │ @prisma/engines@npm:5.22.0 must be rebuilt because its dependency tree changed
➤ YN0007: │ prisma@npm:6.16.1 [f9b2d] must be built because it never has been before or the last one failed
➤ YN0008: │ prisma@npm:6.8.2 [a80c8] must be rebuilt because its dependency tree changed
➤ YN0007: │ calcom-monorepo@workspace:. must be built because it never has been before or the last one failed
➤ YN0008: │ @prisma/client@npm:6.8.2 [a80c8] must be rebuilt because its dependency tree changed
➤ YN0009: │ calcom-monorepo@workspace:. couldn't be built successfully (exit code 1, logs can be found here: C:UsersPCAppDataLocalTempxfs-d1ac6272build.log)
➤ YN0000: └ Completed in 2m 25s
➤ YN0000: Failed with errors in 3m 1s
PS C:UsersPCDocumentsGsoccal.com> npx prisma generate --schema=./prisma/schema.prisma
warn The configuration property `package.json#prisma` is deprecated and will be removed in Prisma 7. Please migrate to a Prisma config file (e.g., `prisma.config.ts`).
For more information, see: https://pris.ly/prisma-config

Environment variables loaded from .env
Error: Could not load `--schema` from provided path `prismaschema.prisma`: file or directory not found

I have an array of objects. From a function on one of those objects is it possible to find the index of the object in the parent array?

Maybe I could add a UID to each object when it’s created and then when I need the index I could look for the relevant UID…?

I have very large Geotiff Files (.tiff) for Flood Data –

$ gdalinfo flood_probability_2023-09-25_88.19823706960149_24.314907220056885.tif
Driver: GTiff/GeoTIFF
Files: flood_probability_2023-09-25_88.19823706960149_24.314907220056885.tif
       flood_probability_2023-09-25_88.19823706960149_24.314907220056885.tif.aux.xml
Size is 30530, 21403
Coordinate System is:
GEOGCRS["WGS 84",
    ENSEMBLE["World Geodetic System 1984 ensemble",
        MEMBER["World Geodetic System 1984 (Transit)"],
        MEMBER["World Geodetic System 1984 (G730)"],
        MEMBER["World Geodetic System 1984 (G873)"],
        MEMBER["World Geodetic System 1984 (G1150)"],
        MEMBER["World Geodetic System 1984 (G1674)"],
        MEMBER["World Geodetic System 1984 (G1762)"],
        MEMBER["World Geodetic System 1984 (G2139)"],
        ELLIPSOID["WGS 84",6378137,298.257223563,
            LENGTHUNIT["metre",1]],
        ENSEMBLEACCURACY[2.0]],
    PRIMEM["Greenwich",0,
        ANGLEUNIT["degree",0.0174532925199433]],
    CS[ellipsoidal,2],
        AXIS["geodetic latitude (Lat)",north,
            ORDER[1],
            ANGLEUNIT["degree",0.0174532925199433]],
        AXIS["geodetic longitude (Lon)",east,
            ORDER[2],
            ANGLEUNIT["degree",0.0174532925199433]],
    USAGE[
        SCOPE["Horizontal component of 3D system."],
        AREA["World."],
        BBOX[-90,-180,90,180]],
    ID["EPSG",4326]]
Data axis to CRS axis mapping: 2,1
Origin = (86.822531536265402,25.270686920623081)
Pixel Size = (0.000089831528412,-0.000089831528412)
Metadata:
  AREA_OR_POINT=Area
Image Structure Metadata:
  INTERLEAVE=PIXEL
Corner Coordinates:
Upper Left  (  86.8225315,  25.2706869) ( 86d49'21.11"E, 25d16'14.47"N)
Lower Left  (  86.8225315,  23.3480227) ( 86d49'21.11"E, 23d20'52.88"N)
Upper Right (  89.5650881,  25.2706869) ( 89d33'54.32"E, 25d16'14.47"N)
Lower Right (  89.5650881,  23.3480227) ( 89d33'54.32"E, 23d20'52.88"N)
Center      (  88.1938098,  24.3093548) ( 88d11'37.72"E, 24d18'33.68"N)
Band 1 Block=30530x1 Type=Float64, ColorInterp=Gray
  Description = flood_label
  Min=0.000 Max=1.000
  NoData Value=nan
  Overviews: 15265x10702, 7633x5351, 3817x2676, 1909x1338, 955x669, 478x335, 239x168, 120x84, 60x42
  Metadata:
    STATISTICS_APPROXIMATE=YES
    STATISTICS_MAXIMUM=1
    STATISTICS_MEAN=0.0611193183464
    STATISTICS_MINIMUM=0
    STATISTICS_STDDEV=0.23954904982336
    STATISTICS_VALID_PERCENT=100
Band 2 Block=30530x1 Type=Float64, ColorInterp=Undefined
  Description = uncertainty
  Min=0.000 Max=0.333
  NoData Value=nan
  Overviews: 15265x10702, 7633x5351, 3817x2676, 1909x1338, 955x669, 478x335, 239x168, 120x84, 60x42
  Metadata:
    STATISTICS_APPROXIMATE=YES
    STATISTICS_MAXIMUM=0.33333333333333
    STATISTICS_MEAN=0.019859184446693
    STATISTICS_MINIMUM=0
    STATISTICS_STDDEV=0.058523799713129
    STATISTICS_VALID_PERCENT=100
Band 3 Block=30530x1 Type=Float64, ColorInterp=Undefined
  Description = flood_prob_1
  Min=0.000 Max=1.000
  NoData Value=nan
  Overviews: 15265x10702, 7633x5351, 3817x2676, 1909x1338, 955x669, 478x335, 239x168, 120x84, 60x42
  Metadata:
    STATISTICS_APPROXIMATE=YES
    STATISTICS_MAXIMUM=1
    STATISTICS_MEAN=0.10656160176136
    STATISTICS_MINIMUM=0
    STATISTICS_STDDEV=0.29088619554382
    STATISTICS_VALID_PERCENT=100
Band 4 Block=30530x1 Type=Float64, ColorInterp=Undefined
  Description = flood_prob_2
  Min=0.000 Max=1.000
  NoData Value=nan
  Overviews: 15265x10702, 7633x5351, 3817x2676, 1909x1338, 955x669, 478x335, 239x168, 120x84, 60x42
  Metadata:
    STATISTICS_APPROXIMATE=YES
    STATISTICS_MAXIMUM=1
    STATISTICS_MEAN=0.075278825662254
    STATISTICS_MINIMUM=0
    STATISTICS_STDDEV=0.25170630724278
    STATISTICS_VALID_PERCENT=100
Band 5 Block=30530x1 Type=Float64, ColorInterp=Undefined
  Description = flood_prob_3
  NoData Value=nan
  Overviews: 15265x10702, 7633x5351, 3817x2676, 1909x1338, 955x669, 478x335, 239x168, 120x84, 60x42

I want to make a web portal to visualize this file but since the data is very large, I’m converting it to Cloud Optimized Geotiff Format first using GDAL to convert it into 512X512 manageable block size.

$ gdal_translate input.tiff output.tiff -of COG -co COMPRESS=DEFLATE -co BIGTIFF=YES

By Doing so, I’m able to get a slightly compressed verion with internal blocking –

$ gdalinfo output_cog.tiff
Driver: GTiff/GeoTIFF
Files: output_cog.tiff
Size is 30530, 21403
Coordinate System is:
GEOGCRS["WGS 84",
    ENSEMBLE["World Geodetic System 1984 ensemble",
        MEMBER["World Geodetic System 1984 (Transit)"],
        MEMBER["World Geodetic System 1984 (G730)"],
        MEMBER["World Geodetic System 1984 (G873)"],
        MEMBER["World Geodetic System 1984 (G1150)"],
        MEMBER["World Geodetic System 1984 (G1674)"],
        MEMBER["World Geodetic System 1984 (G1762)"],
        MEMBER["World Geodetic System 1984 (G2139)"],
        ELLIPSOID["WGS 84",6378137,298.257223563,
            LENGTHUNIT["metre",1]],
        ENSEMBLEACCURACY[2.0]],
    PRIMEM["Greenwich",0,
        ANGLEUNIT["degree",0.0174532925199433]],
    CS[ellipsoidal,2],
        AXIS["geodetic latitude (Lat)",north,
            ORDER[1],
            ANGLEUNIT["degree",0.0174532925199433]],
        AXIS["geodetic longitude (Lon)",east,
            ORDER[2],
            ANGLEUNIT["degree",0.0174532925199433]],
    USAGE[
        SCOPE["Horizontal component of 3D system."],
        AREA["World."],
        BBOX[-90,-180,90,180]],
    ID["EPSG",4326]]
Data axis to CRS axis mapping: 2,1
Origin = (86.822531536265402,25.270686920623081)
Pixel Size = (0.000089831528412,-0.000089831528412)
Metadata:
  AREA_OR_POINT=Area
Image Structure Metadata:
  LAYOUT=COG
  COMPRESSION=LZW
  INTERLEAVE=PIXEL
Corner Coordinates:
Upper Left  (  86.8225315,  25.2706869) ( 86d49'21.11"E, 25d16'14.47"N)
Lower Left  (  86.8225315,  23.3480227) ( 86d49'21.11"E, 23d20'52.88"N)
Upper Right (  89.5650881,  25.2706869) ( 89d33'54.32"E, 25d16'14.47"N)
Lower Right (  89.5650881,  23.3480227) ( 89d33'54.32"E, 23d20'52.88"N)
Center      (  88.1938098,  24.3093548) ( 88d11'37.72"E, 24d18'33.68"N)
Band 1 Block=512x512 Type=Float64, ColorInterp=Gray
  Description = flood_label
  NoData Value=nan
  Overviews: 15265x10701, 7632x5350, 3816x2675, 1908x1337, 954x668, 477x334
Band 2 Block=512x512 Type=Float64, ColorInterp=Undefined
  Description = uncertainty
  NoData Value=nan
  Overviews: 15265x10701, 7632x5350, 3816x2675, 1908x1337, 954x668, 477x334
Band 3 Block=512x512 Type=Float64, ColorInterp=Undefined
  Description = flood_prob_1
  NoData Value=nan
  Overviews: 15265x10701, 7632x5350, 3816x2675, 1908x1337, 954x668, 477x334
Band 4 Block=512x512 Type=Float64, ColorInterp=Undefined
  Description = flood_prob_2
  NoData Value=nan
  Overviews: 15265x10701, 7632x5350, 3816x2675, 1908x1337, 954x668, 477x334
Band 5 Block=512x512 Type=Float64, ColorInterp=Undefined
  Description = flood_prob_3
  NoData Value=nan
  Overviews: 15265x10701, 7632x5350, 3816x2675, 1908x1337, 954x668, 477x334

I am then converting this COG file to Zarr Store using rasterio –

LEVELS = 6  
store_2d = "./output.zarr"
path = "./input.tiff"

# open dataset
ds = (
    xr.open_dataarray(path, engine="rasterio")
    .to_dataset(name="tavg")
    .squeeze()
)

# create the pyramid
dt = pyramid_reproject(ds, levels=LEVELS, clear_attrs=True)

# write to zarr
dt.to_zarr(store_2d, zarr_format=2, consolidated=True)

This is the information of this newly created Zarr folder –

C:UsersBatmanDesktopTechBTPNPyramidTryWithCarbonMaps>gdalinfo C:/Users/Batman/Desktop/Tech/BTP/Data/flood_pyramid.zarr
Driver: Zarr/Zarr
Files: C:/Users/Batman/Desktop/Tech/BTP/Data/flood_pyramid.zarr
Size is 512, 512
Subdatasets:
  SUBDATASET_1_NAME=ZARR:"C:/Users/Batman/Desktop/Tech/BTP/Data/flood_pyramid.zarr":/0/tavg
  SUBDATASET_1_DESC=[5x128x128] /0/tavg (Float32)
  SUBDATASET_2_NAME=ZARR:"C:/Users/Batman/Desktop/Tech/BTP/Data/flood_pyramid.zarr":/1/tavg
  SUBDATASET_2_DESC=[5x256x256] /1/tavg (Float32)
  SUBDATASET_3_NAME=ZARR:"C:/Users/Batman/Desktop/Tech/BTP/Data/flood_pyramid.zarr":/2/tavg
  SUBDATASET_3_DESC=[5x512x512] /2/tavg (Float32)
  SUBDATASET_4_NAME=ZARR:"C:/Users/Batman/Desktop/Tech/BTP/Data/flood_pyramid.zarr":/3/tavg
  SUBDATASET_4_DESC=[5x1024x1024] /3/tavg (Float32)
  SUBDATASET_5_NAME=ZARR:"C:/Users/Batman/Desktop/Tech/BTP/Data/flood_pyramid.zarr":/4/tavg
  SUBDATASET_5_DESC=[5x2048x2048] /4/tavg (Float32)
  SUBDATASET_6_NAME=ZARR:"C:/Users/Batman/Desktop/Tech/BTP/Data/flood_pyramid.zarr":/5/tavg
  SUBDATASET_6_DESC=[5x4096x4096] /5/tavg (Float32)
Corner Coordinates:
Upper Left  (    0.0,    0.0)
Lower Left  (    0.0,  512.0)
Upper Right (  512.0,    0.0)
Lower Right (  512.0,  512.0)
Center      (  256.0,  256.0)

I want to make a web portal to let the client visualize this, I want to serve this dynamically in a tiled way so that depending on the user’s zoom level, data is requested from the server.

I have looked up everything including @carbonmaps, zarrita, zarr-js, but I am unable to do this.
There is no restrictions for Javascript on Frontend, any system works.

This is the code, I am using in @carbonmaps –

'use client';

import { useEffect, useRef } from 'react';
import { Map, Tile, useColormap } from '@carbonplan/maps';

// Simple theme object (mimics CarbonPlan's dark background)
const theme = {
  colors: {
    background: '#1a1a1a', // or '#000'
  },
};

const ZarrMapPage = () => {
  const canvasRef = useRef();

  // Define colormap
  const colormap = useColormap({
    name: 'fire',     // Try 'warm', 'viridis', 'blues', etc.
    flip: false,
    clamp: null,      // Set [min, max] if needed, or leave null
  });

  useEffect(() => {
    const canvas = canvasRef.current;
    if (!canvas) return;

    // Handle HiDPI rendering
    const resize = () => {
      const { offsetWidth, offsetHeight } = canvas;
      canvas.width = offsetWidth * devicePixelRatio;
      canvas.height = offsetHeight * devicePixelRatio;
      canvas.style.width = `${offsetWidth}px`;
      canvas.style.height = `${offsetHeight}px`;
    };
    resize();
    window.addEventListener('resize', resize);

    const gl = canvas.getContext('webgl2');
    if (!gl) {
      console.error('WebGL2 is not supported');
      return;
    }

    // Create Tile layer
    const tile = new Tile({
      gl,
      source: '/data/mydata.zarr',     // Adjust path to your .zarr
      variable: 'temperature',         // Change to your Zarr variable
      colormap: colormap.get(),
      clim: [250, 310],                // Adjust based on your data
      transform: 'identity',
      projection: 'equal-earth',       // Or 'albers-usa', 'mercator'
      onLoadingStatus: (status) => console.log(status),
    });

    // Animation loop
    const loop = () => {
      tile.draw();
      requestAnimationFrame(loop);
    };
    loop();

    // Cleanup
    return () => {
      tile.destroy();
      window.removeEventListener('resize', resize);
    };
  }, [colormap]);

  return (
    <div
      style={{
        width: '100vw',
        height: '100vh',
        position: 'relative',
        background: theme.colors.background,
      }}
    >
      <Map
        settings={{
          projection: 'equal-earth',
          zoom: 1,
          center: [0, 0],
        }}
      >
        <canvas
          ref={canvasRef}
          style={{
            display: 'block',
            width: '100%',
            height: '100%',
            background: theme.colors.background,
          }}
        />
      </Map>
    </div>
  );
};

export default ZarrMapPage;   

But I got this error –

mport trace for requested module:
./app/page.js
 ⨯ TypeError: (0 , _carbonplan_maps__WEBPACK_IMPORTED_MODULE_2__.useColormap) is not a function
    at ZarrMapPage (apppage.js:17:31)
  15 |
  16 |   // Define colormap
> 17 |   const colormap = useColormap({
     |                               ^
  18 |     name: 'fire',     // Try 'warm', 'viridis', 'blues', etc.
  19 |     flip: false,
  20 |     clamp: null,      // Set [min, max] if needed, or leave null {
  digest: '3505414644'

I would like your help in this.

I’m working on a personal project mygamediarys, which is a blog where I share gaming diaries. The site is built using Next.js and hosted on Vercel.

The problem is that when I load long posts with many screenshots, the initial page load feels slow. I tried using Next.js component with loading=”lazy”, but it doesn’t seem to work consistently on mobile browsers.

What’s the best way to implement image lazy loading in Next.js to improve performance on a blog like this? Should I use a third-party library such as react-lazyload, or rely on native browser support?

Added next-optimized-images plugin (but it conflicts with Next.js 13).

Used priority={false} but no visible difference.

Any recommendations for a production-ready setup?

I have single one coding, please HTML, CSS all are normal and fine to my view, while on Js I have 1 Minor issue, if I save students bio go-to admin dashboard like I expect, also when students bio save let it in two dashboard like I wrote in my coding, but only data go-to admin dashboard but not stay too in teacher dashboard students table of summary

I tried to find the issues I can’t