Blancer.com Tutorials and projects

Gemini has absolutely no idea what is going on, chatgpt has no idea what is going on, i cant make this work and its driving me insane, i just have a button to write data and it just spits out 400 errors in the console.

Database security is set to public and is set up correctly and I am using anonymous authentication successfully, console shows i am signed in Signed in: DSAytCXHn2XtmYclP6hBdxaJ3eD2, but as soon as i attempt to reach out and do anything to the database I just get 400 errors.

import React, { useEffect, useState } from 'react';
import { initializeApp } from 'firebase/app';
import {
  getFirestore,
  initializeFirestore,
  collection,
  addDoc
} from 'firebase/firestore';
import {
  getAuth,
  signInAnonymously,
  onAuthStateChanged
} from 'firebase/auth';

const firebaseConfig = {
  apiKey: "",
  authDomain: "",
  projectId: "",
  storageBucket: "",
  messagingSenderId: "",
  appId: ""
};

const app = initializeApp(firebaseConfig);

// Explicitly set up Firestore with tuning for region/network issues
const db = initializeFirestore(app, {
  experimentalForceLongPolling: true,
  useFetchStreams: true,
});

const auth = getAuth(app);

function App() {
  const [user, setUser] = useState(null);

  useEffect(() => {
    signInAnonymously(auth).catch((error) => {
      console.error("Anonymous sign-in failed:", error);
    });

    onAuthStateChanged(auth, (firebaseUser) => {
      if (firebaseUser) {
        setUser(firebaseUser);
        console.log("Signed in:", firebaseUser.uid);
      }
    });
  }, []);

  const writeTestDoc = async () => {
    if (!user) {
      alert("Still signing in... try again shortly.");
      return;
    }

    try {
      console.log("Attempting to write...");
      const docRef = await addDoc(collection(db, 'trades'), {
        test: "Hello from minimal app",
        timestamp: new Date().toISOString(),
        uid: user.uid
      });
      console.log("Success! Doc ID:", docRef.id);
      alert("Success! Wrote doc: " + docRef.id);
    } catch (err) {
      console.error("Write failed:", err);
      alert("Failed to write doc: " + err.message);
    }
  };

  return (
    <div style={{ padding: '2rem' }}>
      <h1>Minimal Firestore Test</h1>
      <button onClick={writeTestDoc}>Write a Test Doc</button>
    </div>
  );
}

export default App;

Here is the entire error message

GET https://firestore.googleapis.com/google.firestore.v1.Firestore/Write/channel?gsessionid=ATOAL2H7Jwe5BZ7MpAKV5tSpPpu8RgRzemlnciG-seg&VER=8&database=projects%2Fptd-guardian%2Fdatabases%2F(default)&RID=rpc&SID=cw4ykaMJjgqT5_EZBhAQcA&AID=0&CI=0&TYPE=xmlhttp&zx=z9kgxt5h7g5v&t=1 net::ERR_ABORTED 400 (Bad Request)
e.send @ webchannel_blob_es2018.js:52
e.ea @ webchannel_blob_es2018.js:60
ze @ webchannel_blob_es2018.js:30
on @ webchannel_blob_es2018.js:76
e.Fa @ webchannel_blob_es2018.js:75
R @ webchannel_blob_es2018.js:14
Promise.then
C @ webchannel_blob_es2018.js:14
nn @ webchannel_blob_es2018.js:74
Ge @ webchannel_blob_es2018.js:39
Le.Y @ webchannel_blob_es2018.js:33
Le.ca @ webchannel_blob_es2018.js:30
ie @ webchannel_blob_es2018.js:25
re @ webchannel_blob_es2018.js:23
Bt @ webchannel_blob_es2018.js:62
e.bb @ webchannel_blob_es2018.js:61
e.Ea @ webchannel_blob_es2018.js:61
xt @ webchannel_blob_es2018.js:57
e.Pa @ webchannel_blob_es2018.js:55
Promise.then
Ot @ webchannel_blob_es2018.js:55
e.Sa @ webchannel_blob_es2018.js:55
Promise.then
e.send @ webchannel_blob_es2018.js:52
e.ea @ webchannel_blob_es2018.js:60
ze @ webchannel_blob_es2018.js:29
Ve @ webchannel_blob_es2018.js:28
e.Ga @ webchannel_blob_es2018.js:72
R @ webchannel_blob_es2018.js:14
Promise.then
C @ webchannel_blob_es2018.js:14
Jt @ webchannel_blob_es2018.js:70
e.connect @ webchannel_blob_es2018.js:68
mn.m @ webchannel_blob_es2018.js:82
Io @ webchannel_connection.ts:260
send @ stream_bridge.ts:70
a_ @ persistent_stream.ts:322
p_ @ persistent_stream.ts:861
bu @ remote_store.ts:762
(anonymous) @ persistent_stream.ts:528
(anonymous) @ persistent_stream.ts:595
(anonymous) @ async_queue_impl.ts:136
(anonymous) @ async_queue_impl.ts:187
Promise.then
gu @ async_queue_impl.ts:185
enqueue @ async_queue_impl.ts:130
enqueueAndForget @ async_queue_impl.ts:94
(anonymous) @ persistent_stream.ts:593
(anonymous) @ persistent_stream.ts:508
wo @ stream_bridge.ts:86
(anonymous) @ webchannel_connection.ts:417
setTimeout
Bo @ webchannel_connection.ts:412
T_ @ persistent_stream.ts:801
P_ @ persistent_stream.ts:503
(anonymous) @ persistent_stream.ts:477
Promise.then
auth @ persistent_stream.ts:467
start @ persistent_stream.ts:264
start @ persistent_stream.ts:788
(anonymous) @ persistent_stream.ts:561
(anonymous) @ backoff.ts:137
(anonymous) @ async_queue.ts:196
(anonymous) @ async_queue_impl.ts:136
(anonymous) @ async_queue_impl.ts:187
Promise.then
gu @ async_queue_impl.ts:185
enqueue @ async_queue_impl.ts:130
enqueueAndForget @ async_queue_impl.ts:94
handleDelayElapsed @ async_queue.ts:193
(anonymous) @ async_queue.ts:160
setTimeout
start @ async_queue.ts:160
createAndSchedule @ async_queue.ts:151
enqueueAfterDelay @ async_queue_impl.ts:225
Go @ backoff.ts:132
i_ @ persistent_stream.ts:554
start @ persistent_stream.ts:256
start @ persistent_stream.ts:788
wu @ remote_store.ts:756
Su @ remote_store.ts:825
close @ persistent_stream.ts:419
I_ @ persistent_stream.ts:580
(anonymous) @ persistent_stream.ts:533
(anonymous) @ persistent_stream.ts:595
(anonymous) @ async_queue_impl.ts:136
(anonymous) @ async_queue_impl.ts:187
Promise.then
gu @ async_queue_impl.ts:185
enqueue @ async_queue_impl.ts:130
enqueueAndForget @ async_queue_impl.ts:94
(anonymous) @ persistent_stream.ts:593
(anonymous) @ persistent_stream.ts:532
So @ stream_bridge.ts:94
(anonymous) @ webchannel_connection.ts:332
(anonymous) @ webchannel_connection.ts:294
ie @ webchannel_blob_es2018.js:25
re @ webchannel_blob_es2018.js:23
wn.sa @ webchannel_blob_es2018.js:85
cn @ webchannel_blob_es2018.js:78
ln @ webchannel_blob_es2018.js:77
qe @ webchannel_blob_es2018.js:36
Le.Y @ webchannel_blob_es2018.js:34
Le.ca @ webchannel_blob_es2018.js:30
ie @ webchannel_blob_es2018.js:25
re @ webchannel_blob_es2018.js:23
Bt @ webchannel_blob_es2018.js:62
e.bb @ webchannel_blob_es2018.js:61
e.Ea @ webchannel_blob_es2018.js:61
xt @ webchannel_blob_es2018.js:57
e.Pa @ webchannel_blob_es2018.js:55
Promise.then
Ot @ webchannel_blob_es2018.js:55
e.Sa @ webchannel_blob_es2018.js:55
Promise.then
e.send @ webchannel_blob_es2018.js:52
e.ea @ webchannel_blob_es2018.js:60
ze @ webchannel_blob_es2018.js:30
on @ webchannel_blob_es2018.js:76
e.Fa @ webchannel_blob_es2018.js:75
R @ webchannel_blob_es2018.js:14
Promise.then
C @ webchannel_blob_es2018.js:14
nn @ webchannel_blob_es2018.js:74
Ge @ webchannel_blob_es2018.js:39
Le.Y @ webchannel_blob_es2018.js:33
Le.ca @ webchannel_blob_es2018.js:30
ie @ webchannel_blob_es2018.js:25
re @ webchannel_blob_es2018.js:23
Bt @ webchannel_blob_es2018.js:62
e.bb @ webchannel_blob_es2018.js:61
e.Ea @ webchannel_blob_es2018.js:61
xt @ webchannel_blob_es2018.js:57
e.Pa @ webchannel_blob_es2018.js:55
Promise.then
Ot @ webchannel_blob_es2018.js:55
e.Sa @ webchannel_blob_es2018.js:55
Promise.then
e.send @ webchannel_blob_es2018.js:52
e.ea @ webchannel_blob_es2018.js:60
ze @ webchannel_blob_es2018.js:29
Ve @ webchannel_blob_es2018.js:28
e.Ga @ webchannel_blob_es2018.js:72
R @ webchannel_blob_es2018.js:14
Promise.then
C @ webchannel_blob_es2018.js:14
Jt @ webchannel_blob_es2018.js:70
e.connect @ webchannel_blob_es2018.js:68
mn.m @ webchannel_blob_es2018.js:82
Io @ webchannel_connection.ts:260
send @ stream_bridge.ts:70
a_ @ persistent_stream.ts:322
p_ @ persistent_stream.ts:861
bu @ remote_store.ts:762
(anonymous) @ persistent_stream.ts:528
(anonymous) @ persistent_stream.ts:595
(anonymous) @ async_queue_impl.ts:136
(anonymous) @ async_queue_impl.ts:187
Promise.then
gu @ async_queue_impl.ts:185
enqueue @ async_queue_impl.ts:130
enqueueAndForget @ async_queue_impl.ts:94
(anonymous) @ persistent_stream.ts:593
(anonymous) @ persistent_stream.ts:508
wo @ stream_bridge.ts:86
(anonymous) @ webchannel_connection.ts:417
setTimeout
Bo @ webchannel_connection.ts:412
T_ @ persistent_stream.ts:801
P_ @ persistent_stream.ts:503
(anonymous) @ persistent_stream.ts:477
Promise.then
auth @ persistent_stream.ts:467
start @ persistent_stream.ts:264
start @ persistent_stream.ts:788
(anonymous) @ persistent_stream.ts:561
(anonymous) @ backoff.ts:137
(anonymous) @ async_queue.ts:196
(anonymous) @ async_queue_impl.ts:136
(anonymous) @ async_queue_impl.ts:187
Promise.then
gu @ async_queue_impl.ts:185
enqueue @ async_queue_impl.ts:130
enqueueAndForget @ async_queue_impl.ts:94
handleDelayElapsed @ async_queue.ts:193
(anonymous) @ async_queue.ts:160
setTimeout
start @ async_queue.ts:160
createAndSchedule @ async_queue.ts:151
enqueueAfterDelay @ async_queue_impl.ts:225
Go @ backoff.ts:132
i_ @ persistent_stream.ts:554
start @ persistent_stream.ts:256
start @ persistent_stream.ts:788
wu @ remote_store.ts:756
Su @ remote_store.ts:825
close @ persistent_stream.ts:419
I_ @ persistent_stream.ts:580
(anonymous) @ persistent_stream.ts:533
(anonymous) @ persistent_stream.ts:595
(anonymous) @ async_queue_impl.ts:136
(anonymous) @ async_queue_impl.ts:187
Promise.then
gu @ async_queue_impl.ts:185
enqueue @ async_queue_impl.ts:130
enqueueAndForget @ async_queue_impl.ts:94
(anonymous) @ persistent_stream.ts:593
(anonymous) @ persistent_stream.ts:532
So @ stream_bridge.ts:94
(anonymous) @ webchannel_connection.ts:332
(anonymous) @ webchannel_connection.ts:294
ie @ webchannel_blob_es2018.js:25
re @ webchannel_blob_es2018.js:23
wn.sa @ webchannel_blob_es2018.js:85
cn @ webchannel_blob_es2018.js:78
ln @ webchannel_blob_es2018.js:77
qe @ webchannel_blob_es2018.js:36
Le.Y @ webchannel_blob_es2018.js:34
Le.ca @ webchannel_blob_es2018.js:30
ie @ webchannel_blob_es2018.js:25
re @ webchannel_blob_es2018.js:23
Bt @ webchannel_blob_es2018.js:62
e.bb @ webchannel_blob_es2018.js:61
e.Ea @ webchannel_blob_es2018.js:61
xt @ webchannel_blob_es2018.js:57
e.Pa @ webchannel_blob_es2018.js:55
Promise.then
Ot @ webchannel_blob_es2018.js:55
e.Sa @ webchannel_blob_es2018.js:55
Promise.then
e.send @ webchannel_blob_es2018.js:52
e.ea @ webchannel_blob_es2018.js:60
ze @ webchannel_blob_es2018.js:30
on @ webchannel_blob_es2018.js:76
e.Fa @ webchannel_blob_es2018.js:75
R @ webchannel_blob_es2018.js:14
Promise.then
C @ webchannel_blob_es2018.js:14
nn @ webchannel_blob_es2018.js:74
Ge @ webchannel_blob_es2018.js:39
Le.Y @ webchannel_blob_es2018.js:33
Le.ca @ webchannel_blob_es2018.js:30
ie @ webchannel_blob_es2018.js:25
re @ webchannel_blob_es2018.js:23
Bt @ webchannel_blob_es2018.js:62
e.bb @ webchannel_blob_es2018.js:61
e.Ea @ webchannel_blob_es2018.js:61
xt @ webchannel_blob_es2018.js:57
e.Pa @ webchannel_blob_es2018.js:55
Promise.then
Ot @ webchannel_blob_es2018.js:55
e.Sa @ webchannel_blob_es2018.js:55
Promise.then
e.send @ webchannel_blob_es2018.js:52
e.ea @ webchannel_blob_es2018.js:60
ze @ webchannel_blob_es2018.js:29
Ve @ webchannel_blob_es2018.js:28
e.Ga @ webchannel_blob_es2018.js:72
R @ webchannel_blob_es2018.js:14
Promise.then
C @ webchannel_blob_es2018.js:14
Jt @ webchannel_blob_es2018.js:70
e.connect @ webchannel_blob_es2018.js:68
mn.m @ webchannel_blob_es2018.js:82
Io @ webchannel_connection.ts:260
send @ stream_bridge.ts:70
a_ @ persistent_stream.ts:322
p_ @ persistent_stream.ts:861
bu @ remote_store.ts:762
(anonymous) @ persistent_stream.ts:528
(anonymous) @ persistent_stream.ts:595
(anonymous) @ async_queue_impl.ts:136
(anonymous) @ async_queue_impl.ts:187
Promise.then
gu @ async_queue_impl.ts:185
enqueue @ async_queue_impl.ts:130
enqueueAndForget @ async_queue_impl.ts:94
(anonymous) @ persistent_stream.ts:593
(anonymous) @ persistent_stream.ts:508
wo @ stream_bridge.ts:86
(anonymous) @ webchannel_connection.ts:417
setTimeout
Bo @ webchannel_connection.ts:412
T_ @ persistent_stream.ts:801
P_ @ persistent_stream.ts:503
(anonymous) @ persistent_stream.ts:477
Promise.then
auth @ persistent_stream.ts:467
start @ persistent_stream.ts:264
start @ persistent_stream.ts:788
(anonymous) @ persistent_stream.ts:561
(anonymous) @ backoff.ts:137
(anonymous) @ async_queue.ts:196
(anonymous) @ async_queue_impl.ts:136
(anonymous) @ async_queue_impl.ts:187
Promise.then
gu @ async_queue_impl.ts:185
enqueue @ async_queue_impl.ts:130
enqueueAndForget @ async_queue_impl.ts:94
handleDelayElapsed @ async_queue.ts:193
(anonymous) @ async_queue.ts:160Understand this error
logger.ts:115 [2025-04-10T13:05:45.565Z]  @firebase/firestore: Firestore (10.14.1): WebChannelConnection RPC 'Write' stream 0x51f3d779 transport errored: yn {type: 'c', target: mn, g: mn, defaultPrevented: false, status: 1}

I am working on an Angular application, using Material version 16.
In the design specification the inputs are smaller with less padding, and I need to strictly follow that. How is it possible to reduce the padding of this mat-form-field?

<mat-form-field appearance="outline">
    <mat-label>Outline form field</mat-label>
    <input matInput placeholder="Placeholder">
    <mat-icon matSuffix>sentiment_very_satisfied</mat-icon>
</mat-form-field>

so im trying to implement transparent window with Electron, which should be un-interactable, except of one item, it can be some input or button etc…

So currently, im disabling frame and saying that setIgnoreMouseEvents should be true.

app.disableHardwareAcceleration();    
function createWindow() {
  mainWindow = new BrowserWindow({
    transparent: true,   //<- makes the window transparent
    frame: false,        //<- removes the window frame that i can interact with background
    alwaysOnTop: true,  //<- keeps the window always on top
    resizable: false,
    webPreferences: {
      preload: path.join(__dirname, 'preload.js'),
    }
  mainWindow.setIgnoreMouseEvents(true, { forward: true }); //<- ignores mouse to pass clicks through
  });

With code above i can access background, but not the Electron window and its element, all elements that are provided in it, are also transparent. Does someone have some ideas?

I’m working with React Native 0.78.1 and trying to display a local animated GIF using the standard component like this:

<Image
  source={require('../../assets/images/signup.gif')}
  style={styles.image}
/>

However, the GIF appears as a static image and doesn’t animate on Android.

What I’ve Tried:

1. Added the following Fresco dependencies in android/app/build.gradle:

implementation 'com.facebook.fresco:animated-gif:2.6.0'
implementation 'com.facebook.fresco:animated-webp:2.0.0'
implementation 'com.facebook.fresco:webpsupport:2.0.0'

• Confirmed that signup.gif is a valid animated GIF in assets/images.
• Cannot use react-native-fast-image due to a version mismatch with react-native.

My Environment:

• React Native: 0.78.1

• Android build tools: 35.0.0

• Device: Android

Question: How can I get local GIFs to animate in React Native 0.78.1 using the built-in component or any other compatible method that doesn’t require upgrading to a different version or using react-native-fast-image?

Is there anything else I need to configure in MainApplication.java or elsewhere to make Fresco properly handle GIFs?

Here is what I had created.

.wrap {  color: black;
        animation: anim 1.5s linear 0s infinite normal;
        animation-play-state: var(--animStat);
        }
@keyframes anim {
    from {  color: red;}
    50% {  color: yellow;}
    to {  color: blue;}
}

<p class="wrap" 
    style="--animStat: running" 
    onclick="$(this).style['animStat'] = paused">This is a paragraph.</p>

The idea is that the status of the animation, be it running or stopped, depends on a variable stored in the HTML code and used by the CSS code. By clicking on the paragraph, the small Javascript onclick snippet changes the variable without adding CSS classes or other bothersome things.

Now, the CSS code uses the HTML-defined variable perfectly. The Javascript onclick event, however, does not work. Why? Is it because changing the variable doesn’t dynamically changes the behaviour of the CSS code, or my abysmal knowledge of Javascript has struck once again?

I have installed supabase using

npm install @supabase/supabase-js

I am using Svelte and use

nvm use 16.16.0

In my script I have the line

import { createClient } from '@supabase/supabase-js'

I get the error

RollupError: Invalid value “iife” for option “output.format” – UMD and IIFE output formats are not supported for code-splitting builds.

My rollup.config.js contains

    output: {
        sourcemap: true,
        format: 'iife',
        name: 'app',
        file: 'public/build/bundle.js'
    },

What should I do?

I’m developing a .NET MAUI Hybrid app that uses a Blazor WebView to run a web interface with MediaPipe JS for pose detection. On Windows everything works fine the camera activates and MediaPipe processes frames. But when I deploy the app to Android devices, I continuously get a “camera permission denied” error even though:

I have added the camera permission (e.g. <uses-permission android:name="android.permission.CAMERA" />) in my Android manifest.

I’ve tried implementing a custom WebClient to request permissions programmatically.

I signed and published the app correctly.

Below is a simplified snippet of my JavaScript code (from my mediapipePose.js file) where I request camera access using navigator.mediaDevices.getUserMedia:

if (navigator.mediaDevices && navigator.mediaDevices.getUserMedia) {
    navigator.mediaDevices.getUserMedia({
        video: true
    })
    .then((stream) => {
        videoElement.srcObject = stream;
        videoElement.play();
    })
    .catch((error) => {
        console.error("Error accessing camera:", error);
    });
} else {
    console.error("getUserMedia is not supported in this browser.");
}

Additionally, the HTML includes my custom JS and all MediaPipe scripts in the correct order. Since the same code runs without issues on Windows, I’m not sure what might be causing Android to deny permission.

Has anyone encountered a similar issue or can suggest additional steps to troubleshoot or configure my MAUI Hybrid app so that camera access works on Android?

I am doing work in a monorepo where I have 2 apps. The first is next JS and the second one is React.js. I have recently upgrade tailwind CSS version to the latest one. But, the issue is my below CSS is not applying after upgrading. I have follow multiple docs and did some customization but did not get success. Could you please have a look and guide me.

/* 
@tailwind base;
@tailwind components;
@tailwind utilities; */

@import 'tailwindcss';

@theme {
  /* Typography */
  --h1: 'text-gray-900';
  --h2: 'text-3xl md:text-4xl font-bold text-gray-900';
  --h3: 'text-2xl md:text-3xl font-bold text-gray-900';
  --h4: 'text-xl md:text-2xl font-semibold text-gray-900';
  --h5: 'text-lg md:text-xl font-semibold text-gray-900';
  --h6: 'text-base md:text-lg font-semibold text-gray-900';
  --subtitle: 'text-xl text-gray-600';
  --body: 'text-base text-gray-700';
  --body-sm: 'text-sm text-gray-700';
  --caption: 'text-sm text-gray-500';
  --color-mint-500: oklch(0.72 0.11 178);

  /* Links */
  --link: 'text-gray-600 hover:text-primary-500 font-medium transition-colors duration-200';
  --link-muted: 'text-gray-500 hover:text-gray-700 transition-colors duration-200';
  --link-primary: 'text-primary-500 hover:text-primary-600 font-medium transition-colors duration-200';
  --link-underline: 'text-gray-600 hover:text-primary-500 underline transition-colors duration-200';

  /* Spacing */
  --section: 'py-20';
  --container-padded: 'container mx-auto px-4';

  /* Buttons */
  --btn: 'px-6 py-3 rounded-lg font-medium transition-colors text-center inline-block';
  --btn-sm: 'px-4 py-2 rounded-lg font-medium transition-colors text-center inline-block text-sm';
  --btn-lg: 'px-8 py-4 rounded-lg font-medium transition-colors text-center inline-block text-lg';
  --btn-primary: 'bg-primary-500 text-white hover:bg-primary-600';
  --btn-secondary: 'bg-white text-primary-500 border border-primary-500 hover:bg-gray-50';
  --btn-white: 'bg-white text-primary-500 hover:bg-gray-100';
  --btn-outline: 'bg-transparent text-white border border-white hover:bg-primary-600'; /* Cards */
  --card: 'bg-white rounded-lg shadow-sm overflow-hidden';
  --card-hover: 'transition-all duration-300 hover:shadow-md';

  /* Features */
  --feature-card: 'bg-gray-50 p-8 rounded-lg';
  --feature-icon: 'text-primary-500 mb-4 h-12 w-12';

  /* Sections */
  --hero-section: 'bg-gradient-to-b from-white to-gray-50';
  --section-title-container: 'text-center mb-16';
  --cta-section: 'bg-primary-500 text-white';
}

@layer components {
  /* Typography */
  .h1 {
    @reference text-4xl md:text-5xl font-bold text-gray-900;
  }

  .h2 {
    @reference text-3xl md:text-4xl font-bold text-gray-900;
  }

  .h3 {
    @reference text-2xl md:text-3xl font-bold text-gray-900;
  }

  .h4 {
    @reference text-xl md:text-2xl font-semibold text-gray-900;
  }

  .h5 {
    @reference text-lg md:text-xl font-semibold text-gray-900;
  }

  .h6 {
    @reference text-base md:text-lg font-semibold text-gray-900;
  }

  .subtitle {
    @reference text-xl text-gray-600;
  }

  .body {
    @reference text-base text-gray-700;
  }

  .body-sm {
    @reference text-sm text-gray-700;
  }

  .caption {
    @reference text-sm text-gray-500;
  }

  /* Links */
  .link {
    @reference text-gray-600 hover:text-primary-500 font-medium transition-colors duration-200;
  }

  .link-muted {
    @reference text-gray-500 hover:text-gray-700 transition-colors duration-200;
  }

  .link-primary {
    @reference text-primary-500 hover:text-primary-600 font-medium transition-colors duration-200;
  }

  .link-underline {
    @reference text-gray-600 hover:text-primary-500 underline transition-colors duration-200;
  }

  /* Spacing */
  .section {
    @reference py-20;
  }

  .container-padded {
    @reference container mx-auto px-4;
  }

  /* Buttons */
  .btn {
    @reference px-6 py-3 rounded-lg font-medium transition-colors text-center inline-block;
  }

  .btn-sm {
    @reference px-4 py-2 rounded-lg font-medium transition-colors text-center inline-block text-sm;
  }

  .btn-lg {
    @reference px-8 py-4 rounded-lg font-medium transition-colors text-center inline-block text-lg;
  }

  .btn-primary {
    @reference bg-primary-500 text-white hover:bg-primary-600;
  }

  .btn-secondary {
    @reference bg-white text-primary-500 border border-primary-500 hover:bg-gray-50;
  }

  .btn-white {
    @reference bg-white text-primary-500 hover:bg-gray-100;
  }

  .btn-outline {
    @reference bg-transparent text-white border border-white hover:bg-primary-600;
  }

  /* Cards */
  .card {
    @reference bg-white rounded-lg shadow-sm overflow-hidden;
  }

  .card-hover {
    @reference transition-all duration-300 hover:shadow-md;
  }

  /* Features */
  .feature-card {
    @reference bg-gray-50 p-8 rounded-lg;
  }

  .feature-icon {
    @reference text-primary-500 mb-4 h-12 w-12;
  }

  /* Sections */
  .hero-section {
    @reference bg-gradient-to-b from-white to-gray-50;
  }

  .section-title-container {
    @reference text-center mb-16;
  }

  .cta-section {
    @reference bg-primary-500 text-white;
  }
}

I would like to create an instancedMesh that can handle morphing. I need morph targets because each instance should have different shape so morph targets seems handy. Also each instance should detect rays because I need mouse events on each instance.

instancedMesh is needed because I want to draw large number of objects with the same material but different size.

Mesh approach

First I create a mesh with a geometry that has morph targets to make sure the morphing works as it expected.

The base geometry have four morph targets top, bottom, left and right. Each morph target just move the edges in the given direction.

I manually calculated the boundingBox and boundingSphere to be able to detect cursor on the morphed parts.

InstancedMesh approach

With a single mesh works well the morphing however if I try to use the same geometry it does not work the same.

First issue

Only the original geometry can detect ray intersection. It was a problem on the first example as well but I manually calculated the boundingBox and boundingSphere which is fixed the problem. On instancedMesh does not matter if I change the bounds or not it will work the same.

The first rectangle is the original geometry shape. The second rectangle top and bottom morph targets is 0.5. That means moves the top and bottom edges with 0.5 on the y axes.

Second issue

When I move the second instance out of the original bounding box it somehow still detects ray in the original geometry shape.

My question is how can I detect rays on instancedMesh in morphed parts? My desired result should be a solution that works the same as the first example.

DEMO

I’m encountering a TypeScript error when building an authentication using JWT.

No overload matches this call.
Overload 1 of 5, ‘(payload: string | object | Buffer, secretOrPrivateKey: null, options?: (SignOptions & { algorithm: “none”; }) | undefined): string’, gave the following error.
rgument of type ‘string’ is not assignable to parameter of type ‘null’.
Overload 2 of 5, ‘(payload: string | object | Buffer, secretOrPrivateKey: Buffer | Secret | PrivateKeyInput | JsonWebKeyInput, options?: SignOptions | undefined): string’, gave the following error.
Type ‘string’ is not assignable to type ‘number | StringValue | undefined’.
Overload 3 of 5, ‘(payload: string | object | Buffer, secretOrPrivateKey: Buffer | Secret | PrivateKeyInput | JsonWebKeyInput, callback: SignCallback): void’, gave the following error.
Object literal may only specify known properties, and ‘expiresIn’ does not exist in type ‘SignCallback

This is my code

const JWT_SECRET = process.env.JWT_SECRET;
const JWT_EXPIRES_IN = process.env.JWT_EXPIRES_IN || '1h';

if (!JWT_SECRET) {
    throw new Error("FATAL ERROR: JWT_SECRET is not defined in environment variables.");
}

class AuthService {
    private saltRounds = 10; 

    public async registerUser(userData: UserCreationData): Promise<Omit<User, 'password'>> {
        const { username, password } = userData;

        // Check if user already exists
        const existingUserResult: QueryResult<User> = await pool.query(
            'SELECT * FROM users WHERE username = $1',
            [username]
        );
        if (existingUserResult.rows.length > 0) {
            throw new Error('Username already exists.'); 
        }

        // Hash password
        const hashedPassword = await bcrypt.hash(password, this.saltRounds);
        // Insert new user
        const query = `
            INSERT INTO users (username, password)
            VALUES ($1, $2)
            RETURNING id, username, created_at; -- Return user data without password
        `;
        try {
            const result: QueryResult<Omit<User, 'password'>> = await pool.query(query, [username, hashedPassword]);
            if (result.rows.length > 0) {
                return result.rows[0];
            } else {
                throw new Error("User registration failed, no rows returned.");
            }
        } catch (error) {
            console.error("Error registering user:", error);
            throw new Error("Failed to register user in database.");
        }
    }

    public async loginUser(userData: UserCreationData): Promise<{ token: string; user: Omit<User, 'password'> }> {
        const { username, password } = userData;

        // ... (database query and password check) ...
        const query = 'SELECT * FROM users WHERE username = $1;';
        const result: QueryResult<User> = await pool.query(query, [username]);

        if (result.rows.length === 0) {
            throw new Error('Invalid username or password.');
        }
        const user = result.rows[0];
        const isMatch = await bcrypt.compare(password, user.password);

        if (!isMatch) {
            throw new Error('Invalid username or password.');
        }

        
        const token = jwt.sign(
            {userId: user.id, username: user.username},
            JWT_SECRET as string, 
            { expiresIn: JWT_EXPIRES_IN }
        );

        const { password: _, ...userWithoutPassword } = user;
        return { token, user: userWithoutPassword };
    }
}

export default AuthService;

Why doesn’t the loading=”lazy” attribute of the tag work for lazy loading when used inside an el-carousel component?

Online Demo

Element Plus Playground 1

Example Code

<script setup lang="ts">

</script>

<template>
   <div>
    <div style="width: 100%; height: 2000px; display: block">lazy load header</div>
    <el-carousel height="2000px">
      <el-carousel-item>
        <el-row>
          <el-col :span="24">
            <img
              src="https://dummyimage.com/2000x2000/aaa/fff&text=2000x2000"
              loading="lazy"
            />
          </el-col>
        </el-row>
      </el-carousel-item>
      <el-carousel-item>
        <el-row>
          <el-col :span="24">
            <img
              src="https://dummyimage.com/2000x2000/bbb/fff&text=2000x2000"
              loading="lazy"
            />
          </el-col>
        </el-row>
      </el-carousel-item>
      <el-carousel-item>
        <el-row>
          <el-col :span="24">
            <img
              src="https://dummyimage.com/2000x2000/ccc/fff&text=2000x2000"
              loading="lazy"
            />
          </el-col>
        </el-row>
      </el-carousel-item>
      <el-carousel-item>
        <el-row>
          <el-col :span="24">
            <img
              src="https://dummyimage.com/2000x2000/ddd/fff&text=2000x2000"
              loading="lazy"
            />
          </el-col>
        </el-row>
      </el-carousel-item>
      <el-carousel-item>
        <el-row>
          <el-col :span="24">
            <img
              src="https://dummyimage.com/2000x2000/eee/fff&text=2000x2000"
              loading="lazy"
            />
          </el-col>
        </el-row>
      </el-carousel-item>
    </el-carousel>
  </div>
</template>

<style>
</style>

Currently, I’m not sure how to make an attempt. The expected result is that the loading="lazy" attribute of the <img> tag can work for lazy loading when used inside an el-carousel component.