Blancer.com Tutorials and projects

I need to make custom modifications to the @kitware/vtk.js library for my project. I have forked the official repository, cloned it to my local machine, and made my changes.
Now, I’m struggling to use this modified local version in my main application.

I have my project structure set up like this: /my-dev-folder
|– /my-vtk-clone (The forked and modified vtk.js repo)
|– /my-app (The project where I want to use the modified vtk.js)

In my my-app project, I modified my package.json to point to my local clone:

“@kitware/vtk.js”: “file:../my-vtk-clone”

Then I ran npm install. The installation completed without errors, and the my-vtk-clone folder was linked into node_modules. However, when I try to run my application, I get module resolution errors, for example:

Method 2: npm pack
I went into my my-vtk-clone directory and ran npm pack. This generated a kitware-vtk.js-29.10.2.tgz file (version may vary).
Then, in my my-app project, I tried installing from this packed file:

npm install ../my-vtk-clone/kitware-vtk.js-29.10.2.tgz

This also seemed to install correctly, but I ran into the same module resolution errors at runtime.

After inspecting the node_modules directory, I noticed a major difference between the official package and my local version.

When I install the official package (npm install @kitware/vtk.js):

The directory structure inside node_modules/@kitware/vtk.js looks something like this (simplified):
|– /Common
|– /Filters

When I use my local version (via npm install file:… or npm pack):

|– /Sources
| |– /Common
| |– /Filters
| |– …etc

My local version has the raw Sources directory, and it seems my application’s bundler (Webpack/Vite) doesn’t know how to resolve imports from it. The official package on NPM is clearly a built or published version, not the raw source code.

My Question:
What is the correct process to build my forked vtk.js repository so that it generates the same distributable file structure (dist/, esm/, etc.) as the official NPM package? Is there a specific npm run command I am missing?

While creating a custom widget for visualizing dynamic table data, I encountered some issues and would like to share a minimal working example to illustrate the problem.

JS:

self.ctx.$scope.showAlert = function() {
window.alert("my device");
};

self.ctx.$scope.var = [
"id: 1, name: 'Batch A'",
"id: 2, name: 'Batch B'"
];

self.ctx.$scope.datasourceData = [];

self.ctx.detectChanges();
};

HTML:

<div class="mainCard">
<h3>Hello World</h3>
<button mat-raised-button color="primary" (click)="showAlert()">Click me</button>

<p>{{ctx.$scope.var}}</p>

<ul>
<li ng-repeat="item in ctx.$scope.var">
Wert: {{item}}
</li>
</ul>

<h3>Einzelne Werte</h3>
<p>Erster Wert: {{ctx.$scope.var}}</p>
</div>

What works:

• The alert button (showAlert) works correctly.
• Displaying the entire array ({{ctx.$scope.var}}) also works.

Problems:

• Accessing array items directly (e.g. {{ctx.$scope.var[1]}}) throws an error:
  “Widget Error: can’t access property 1, ctx.ctx.$scope.var is undefined”
  -ng-repeat does not render any list items, although the array is initialized as expected in onInit.

Is there a recommended way to bind and access dynamic arrays within ThingsBoard widgets—especially when aiming to use ng-repeat or direct indexing?

I am working in react, with a section in three.js where you can move forward with WASD and not the arrow because the arrows affect the scroll, to turn the camera, you have to drag the mouse, I have tried adding code, removing it for the WASD part but the same glitch is repeating itself. Would you have an idea why?

import React, { useEffect, useRef, useState } from "react";
import * as THREE from "three";
import { GLTFLoader }      from "three/examples/jsm/loaders/GLTFLoader.js";
import { Water }           from "three/examples/jsm/objects/Water.js";
import { OrbitControls }   from "three/examples/jsm/controls/OrbitControls.js";

export default function ExhibitionSection() {
  const mount   = useRef(null);
  const [showUI, setShowUI] = useState(true);       // overlay flag

  useEffect(() => {
    /* ---------- renderer / scene / camera ---------- */
    const { innerWidth: W, innerHeight: H } = window;
    const scene = new THREE.Scene();
    scene.fog   = new THREE.FogExp2(0x8a5000, 0.0005);   // lighter fog

    const cam = new THREE.PerspectiveCamera(75, W / H, 0.1, 1e6);
    cam.position.set(0, 400, 400);   // eye-level = 400, looking straight

    const renderer = new THREE.WebGLRenderer({ antialias: true });
    renderer.setSize(W, H);
    renderer.outputEncoding = THREE.sRGBEncoding;
    mount.current.appendChild(renderer.domElement);

    /* ---------- orbit controls ---------- */
    const controls = new OrbitControls(cam, renderer.domElement);
    controls.enableZoom   = false;
    controls.enablePan    = false;
    controls.dampingFactor = 0.05;
    controls.enableDamping = true;
    controls.target.set(0, 400, 0);      // same Y as camera → level view
    controls.update();
    renderer.domElement.addEventListener("wheel", e => e.preventDefault(), { passive:false });

    /* ---------- skybox ---------- */
    scene.background = new THREE.CubeTextureLoader().load([
      "/images/yellowcloud_ft.jpg","/images/yellowcloud_bk.jpg",
      "/images/yellowcloud_up.jpg","/images/yellowcloud_dn.jpg",
      "/images/yellowcloud_rt.jpg","/images/yellowcloud_lf.jpg",
    ]);

    /* ---------- water ---------- */
    const water = new Water(
      new THREE.PlaneGeometry(50000, 50000),
      {
        textureWidth:512, textureHeight:1024,
        waterNormals: new THREE.TextureLoader().load("/images/waterNormals.jpg", t=>{
          t.wrapS = t.wrapT = THREE.RepeatWrapping;
        }),
        sunDirection:new THREE.Vector3(), sunColor:0xffffff,
        waterColor:0x001e0f, distortionScale:3.7, fog:true,
      }
    );
    water.rotation.x = -Math.PI/2;
    water.rotation.z = -Math.PI/2;
    scene.add(water);

    /* ---------- model ---------- */
    new GLTFLoader().setPath("/models/")
      .load("photography-museum.glb", gltf=>{
        const m = gltf.scene;
        m.scale.set(10,10,10);
        m.position.set(0,-200,0);
        scene.add(m);
      });

    /* ---------- lights ---------- */
    scene.add(new THREE.AmbientLight(0x8a5000,2.5));
    const dir = new THREE.DirectionalLight(0x8a5000,1);
    dir.position.set(1300,1000,1000);
    scene.add(dir);

    /* ---------- keyboard / physics ---------- */
const keys = {};
let   vy   = 0;           // vertical velocity
const GRAVITY  = 2000;    // world-units / s²
const WALK     = 350;     // walk speed
const EYE_Y    = 400;     // ground level (eye height)

window.addEventListener("keydown", e => { keys[e.code] = true; });
window.addEventListener("keyup",   e => { keys[e.code] = false; });

// jump
window.addEventListener("keydown", e => {
  if (e.code === "Space") {
    e.preventDefault();
    if (Math.abs(cam.position.y - EYE_Y) < 1) vy = 700;   // only if on ground
  }
});


   /* ---------- main loop ---------- */
const clock = new THREE.Clock();
(function animate() {
  requestAnimationFrame(animate);
  const dt = clock.getDelta();

  /* WASD movement */
  const dir = new THREE.Vector3(
    (keys.KeyD ? 1 : 0) - (keys.KeyA ? 1 : 0), // x
    0,
    (keys.KeyS ? 1 : 0) - (keys.KeyW ? 1 : 0)  // z
  );
  if (dir.lengthSq() > 0) {
    dir.normalize()
       .applyQuaternion(cam.quaternion)  // local → world
       .setY(0)                          // stay horizontal
       .normalize();

    const speed = (keys.ShiftLeft || keys.ShiftRight) ? WALK * 2 : WALK;
    cam.position.addScaledVector(dir, speed * dt);
  }

  /* jump / gravity */
  vy -= GRAVITY * dt;
  cam.position.y += vy * dt;
  if (cam.position.y < EYE_Y) { cam.position.y = EYE_Y; vy = 0; }

  /* keep the look-at target at eye level */
  controls.target.y = cam.position.y;

  controls.update();
  water.material.uniforms.time.value += dt;
  renderer.render(scene, cam);
})();


    /* ---------- resize ---------- */
    function onResize(){
      cam.aspect = window.innerWidth/window.innerHeight;
      cam.updateProjectionMatrix();
      renderer.setSize(window.innerWidth,window.innerHeight);
    }
    window.addEventListener("resize", onResize);

    return ()=> {
      window.removeEventListener("resize", onResize);
      controls.dispose(); renderer.dispose();
      mount.current.removeChild(renderer.domElement);
    };
  }, []);

  return (
    <div ref={mount} className="relative w-full h-screen">
      {showUI && (
        <div className="absolute inset-0 z-50 flex flex-col items-center justify-center bg-black/70 text-white px-6 text-center space-y-6">
          <h2 className="text-3xl md:text-4xl font-bold tracking-wide">
            Explore&nbsp;LA&nbsp;DISCONNECT&nbsp;1.0
          </h2>
          <p className="max-w-md text-sm opacity-80 leading-relaxed">
            Click + drag to look around.<br/>
            Move with&nbsp;W&nbsp;A&nbsp;S&nbsp;D, hold&nbsp;Shift&nbsp;to run,
            press&nbsp;Space&nbsp;to jump.
          </p>
          <button
            onClick={() => {
              setShowUI(false);
              // ensure canvas gets keyboard focus after overlay closes
              setTimeout(()=> mount.current?.focus(), 50);
            }}
            className="border border-white px-6 py-3 uppercase text-sm hover:bg-white hover:text-black transition"
          >
            Visit the exhibition
          </button>
        </div>
      )}
    </div>
  );
}

https://github.com/mosescompworld/TRAVEL-AGENCY-PROJECT-CODECAMP/pull/1

I’m currently learning web development and Git.
I need help from experienced developers with the following:

Making the site mobile responsive
helping me in detailed process completing frontend
testing and also the backend of this project
To make this travel agency website a functioning
Improving design (modern layout, animations)
Adding JavaScript interactivity (e.g., sliders, contact forms)
General code review and folder structure tips
Looking for Collaborators

My page has two blocks

<div class=texts"></div>
<div class="tablewrapper"></div>

What I want to do is

• no scroll bar on whole page.
• div class="texts" height is not fixed.
• use scroll bar for div class="tablewrapper" if it overflow.

However the code below doesn’t work.

Does anyone help?

.pagewrapper{
  height:100vh;
  overflow:hidden;
}
.tablewrapper{
overflow-y:scroll;
/*height:calc(100vh-textsheight)*/
}

.table{
width:"100vh";
}

<div class="pagewrapper">
<div class="texts">
Thse texts are chanable.<br>
Thse texts are chanable..<br>
Thse texts are chanable..<br>
Thse texts are chanable..<br>
Thse texts are chanable..<br>
Thse texts are chanable..<br>
Thse texts are chanable..<br>
</div>
<div class="tablewrapper">
<table class="table" border>
<tr><td>1</td></tr>
<tr><td>2</td></tr>
<tr><td>3</td></tr>
<tr><td>4</td></tr>
<tr><td>5</td></tr>
<tr><td>6</td></tr>
<tr><td>7</td></tr>
<tr><td>8</td></tr>
</table>
</div>
</div>

    const loading = [1];
    console.log('====before catch', loading);
    try {
      await Promise.reject(new Error('error'));
    } catch (e) {
      return false;
    } finally {
      console.log('====finally', loading);
    }

Why the console result of the above code snippets is error not [1] ?

const loading = [1];
try {
  await Promise.reject(new Error('error'));
} catch (e) {
  return false;
} finally {
  console.log('====finally', loading);
}

const loading = [1];
try {
  await Promise.reject(new Error('error'));
} catch (e) {
  // return false;
} finally {
  console.log('====finally', loading);
}

But these code snippets consoles correct!
It only happens in iOS. RN version 0.7x, it ok in 0.6x

see the details above

I’m experiencing a runtime error when using the three-loader-3dtiles library.

“Uncaught TypeError: can’t access property ‘elements”, m is undefined”. The error occurs when I try to update the runtime using the

  useFrame(({ size, camera }, dt) => {
    if (runtime) runtime.update(dt, size.height, camera);
  });

But If I comment out above line, the error goes away, but the 3D tiles are not rendered.

here is my code
loader-3dtiles-rf3.tsx

import { Loader3DTiles, LoaderProps, Runtime } from 'three-loader-3dtiles';
import { useLoader, useThree, useFrame } from '@react-three/fiber';
import { Loader, Vector2 } from 'three';

class Loader3DTilesBridge extends Loader {
  props: LoaderProps;

  load(url, onLoad, onProgress, onError) {
    const loadTileset = async () => {
      try {
        const result = await Loader3DTiles.load({
          url,
          ...this.props,
          onProgress,
        });
        onLoad(result);
        console.log('result', result);
      } catch (e) {
        console.log('Error loading 3d tiles!', e);
        onError(e);
      }
    };
    loadTileset();
  }
  setProps(props) {
    this.props = props;
  }
}

function Loader3DTilesR3FAsset(props) {
  const threeState = useThree();
  const loaderProps = {
    renderer: threeState.gl,
    viewport: getViewport(threeState.gl),
    options: {
      ...props,
    },
  };

  // TODO: Getting type error
  // @ts-ignore
  const { model, runtime } = useLoader(Loader3DTilesBridge, props.url, (loader: Loader3DTilesBridge) => {
    loader.setProps(loaderProps);
  });

  useFrame(({ size, camera }, dt) => {
    if (runtime) runtime.update(dt, size.height, camera);
  });

  return (
    <group {...props} dispose={runtime.dispose}>
      <primitive object={model} />
    </group>
  );
}
function getViewport(renderer) {
  const viewSize = renderer.getSize(new Vector2());
  return {
    width: viewSize.x,
    height: viewSize.y,
    devicePixelRatio: renderer.getPixelRatio(),
  };
}

export { Loader3DTilesR3FAsset };
import { Loader3DTiles, LoaderProps, Runtime } from 'three-loader-3dtiles';
import { useLoader, useThree, useFrame } from '@react-three/fiber';
import { Loader, Vector2 } from 'three';


class Loader3DTilesBridge extends Loader {
  props: LoaderProps;


  load(url, onLoad, onProgress, onError) {
    const loadTileset = async () => {
      try {
        const result = await Loader3DTiles.load({
          url,
          ...this.props,
          onProgress,
        });
        onLoad(result);
        console.log('result', result);
      } catch (e) {
        console.log('Error loading 3d tiles!', e);
        onError(e);
      }
    };
    loadTileset();
  }
  setProps(props) {
    this.props = props;
  }
}


function Loader3DTilesR3FAsset(props) {
  const threeState = useThree();
  const loaderProps = {
    renderer: threeState.gl,
    viewport: getViewport(threeState.gl),
    options: {
      ...props,
    },
  };


  // TODO: Getting type error
  // @ts-ignore
  const { model, runtime } = useLoader(Loader3DTilesBridge, props.url, (loader: Loader3DTilesBridge) => {
    loader.setProps(loaderProps);
  });


  useFrame(({ size, camera }, dt) => {
    if (runtime) runtime.update(dt, size.height, camera);
  });


  return (
    <group {...props} dispose={runtime.dispose}>
      <primitive object={model} />
    </group>
  );
}
function getViewport(renderer) {
  const viewSize = renderer.getSize(new Vector2());
  return {
    width: viewSize.x,
    height: viewSize.y,
    devicePixelRatio: renderer.getPixelRatio(),
  };
}


export { Loader3DTilesR3FAsset };

and I’m rendering in canva bu rf3 this way

<Canvas shadows style={{ background: '#272730' }}>
        <PerspectiveCamera ref={camera}>
          <Suspense fallback={null}>
            <Loader3DTilesR3FAsset
              dracoDecoderPath={'https://unpkg.com/[email protected]/examples/jsm/libs/draco'}
              basisTranscoderPath={'https://unpkg.com/[email protected]/examples/jsm/libs/basis'}
              rotation={new THREE.Euler(-Math.PI / 2, 0, 0)}
              url="https://int.nyt.com/data/3dscenes/ONA360/TILESET/0731_FREEMAN_ALLEY_10M_A_36x8K__10K-PN_50P_DB/tileset_tileset.json"
              maximumScreenSpaceError={48}
            />
          </Suspense>
        </PerspectiveCamera>
        <OrbitControls camera={camera.current} />
     </Canvas>

I am getting this error in my console and I use unique for the OrderID, I have tried using UUID, counter and MongoDB code, after I create a first receipt any other one that follows return this message in the console and display internal
Server error

“ Receipt created successfully: ORD00001
About to save receipt with ID: ORD00002
Duplicate orderId ORD00002 detected, retrying…
About to save receipt with ID: ORD00003
Duplicate orderId ORD00003 detected, retrying…
About to save receipt with ID: ORD00004
Duplicate orderId ORD00004 detected, retrying…
About to save receipt with ID: ORD00005
Duplicate orderId ORD00005 detected, retrying…
About to save receipt with ID: ORD00006
Duplicate orderId ORD00006 detected, retrying…””

What is the difference between these types of tools in programming: libraries and frameworks? Is there a best one for a specific project, or does it depend on what I am comfortable with?

I see the canvas tag and element inside the DOM, but I don’t see anything. I’ve searched online everywhere but nothing seems to fix it. I have a mouse glow effect so I tried turning that off since the canvas for that might’ve interfered but it’s still not working.

I am using react and tsparticles

This is my jsx:

import styles from './Hero.module.css';
import { useEffect, useRef } from 'react';
import Typed from 'typed.js';
import Particles from '@tsparticles/react';
import { loadSlim } from '@tsparticles/slim';

export default function Hero() {
    const typedRef = useRef(null);
    const typedInstance = useRef(null);

    const particlesInit = async(main) => {
        await loadSlim(main);
    };

    const particlesLoaded = (container) => {
        console.log(container);

    }

    useEffect(() => {
        typedInstance.current = new Typed(typedRef.current, {
        strings: ['software engineer.', ' student.'],
        typeSpeed: 90,
        backSpeed: 30,
        backDelay: 1000,
        loop: true,
        cursorChar: '|'
    });

    return () => {
      typedInstance.current.destroy();
    };
  }, []);
    return (
        <div className={styles.heroContainer}>
            <Particles
                id="tsparticles"
                init={particlesInit}
                loaded={particlesLoaded}
                options={{
                    background: {
                        color: {
                            value: "transparent",
                        },
                    },
                    fpsLimit: 120,
                    interactivity: {
                        events: {
                            onClick: {
                                enable: false,
                                mode: "push",
                            },
                            onHover: {
                                enable: false,
                                mode: "repulse",
                            },
                            resize: true,
                        },
                        modes: {
                            push: {
                                quantity: 4,
                            },
                            repulse: {
                                distance: 200,
                                duration: 0.4,
                            },
                        },
                    },
                    particles: {
                        color: {
                            value: "#ffffff",
                        },
                        links: {
                            color: "#ffffff",
                            distance: 150,
                            enable: true,
                            opacity: 0.5,
                            width: 1,
                        },
                        collisions: {
                            enable: false,
                        },
                        move: {
                            direction: "none",
                            enable: true,
                            outModes: {
                                default: "bounce",
                            },
                            random: true,
                            speed: 0.5,
                            straight: false,
                        },
                        number: {
                            density: {
                                enable: true,
                                area: 800,
                            },
                            value: 80,
                        },
                        opacity: {
                            value: 0.5,
                        },
                        shape: {
                            type: "circle",
                        },
                        size: {
                            value: { min: 1, max: 3 },
                            random: true,
                        },
                    },
                    detectRetina: true,
                }}
            />
            <div className={styles.main}>
                <p className={styles.greeting}>Hi, I am</p>
                <h1 className={styles.nameContainer}><span className={styles.name}>bob</span></h1>
                <h2 className={styles.secondaryText}>I am a <span ref={typedRef}></span></h2>
            </div>
        </div>
    );
}

and this is my CSS

.heroContainer {
    position:relative;
    overflow:hidden;

    display:flex;
    flex-direction:column;
    justify-content: center;

    max-width:100%;
    height:100vh;
    background-color:#171b22;
}

#tsparticles {
    position:absolute;
    top:0;
    left:0;

    width:100%;
    height:100%;
    z-index:-1;
}

.main {
    position: relative;
    z-index: 2;

    display:flex;
    flex-direction:column;
    justify-content:center;
    width:100%;
    max-width:clamp(600px, 1200px, 1500px);
    
    margin-left:auto;
    margin-right: auto;
    padding-left: 16px;
    padding-right: 16px;

    text-align:left;
    color:#e0e0e0;

}

.greeting, .nameContainer, .secondaryText{
    padding: 0px;
    margin: 0px;
    transition: transform 0.3s ease-in-out;
}

.greeting:hover, .nameContainer:hover, .secondaryText:hover {
    transform: scale(1.05);
}

h1 {
    font-size: 80px;
}

.secondaryText {
    font-size: 25px;
    color:#e0e0e0;
}


p {
    font-size:20px;
    color:#e0e0e0;
}

.name {
    background:linear-gradient(90deg, #ffde0e 10%, #e4a053 60%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;

    text-shadow: 0 0 3px rgba(255, 222, 14, 0.4), 0 0 5px rgba(228, 160, 83, 0.4);
}

h1, h2, p {
    margin: 0px;
}