Iframe creation with input src [closed]

I (an inexperienced coder) have been trying to make user made iframes but I’m struggling with making it work. Would anyone know what the issue is.
Here’s the code:

function create() {
  var url = document.getElementById('input').value;
  var iframe = document.createElement('iframe');
  iframe.src = 'url';
  iframe.style.border = 'none';
  iframe.style.height = '100%';
  iframe.style.width = '100%';
  document.body.appendChild(iframe);
}
<html>
</body>
<input type=text value=https:// tag="input" </text>
<button on.click='create()'> create iframe </button>
</body>

How to get fetch TOWARDS localhost to FUNCTION on CARDOVA Android

My question is simple.

I make a call using fetch in my CARDOVA app like so, from the ./www/js/index.js script:

const response = await fetch('http://localhost:3000/poc3/convert', {
  method: 'POST',
  body: formData,
  headers: { 'Accept': 'audio/mpeg' },
});

I get this in the logs:

Error: TypeError: Failed to fetch

I know the API endpoint works 100%.

I know the system works with a fetch towards the prod URL endpoint (https://mywebsite/poc3/convert).

I think this fetch error is because I need to enable something from the config.xml file.

Below are all the versions and configs I am running:

   Cordova Packages:
    
        cli: 12.0.0
            common: 5.0.1
            create: 5.0.0
            lib: 12.0.2
                common: 5.0.1
                fetch: 4.0.0
                serve: 4.0.1
    
    Project Installed Platforms:
    
        android: 14.0.0
    
    Project Installed Plugins:
    
        cordova-plugin-advanced-http: 3.3.1
        cordova-plugin-file: 8.1.3
        cordova-plugin-file-transfer: 2.0.0
    
    Environment:
    
        OS: Ventura 13.1 (22C65) (darwin 22.2.0) x64
        Node: v18.19.0
        npm: 10.2.3
    
    android Environment:
    
        android:
    [=======================================] 100% Fetch remote repository...       
    Available Android targets:
    ----------
    id: 1 or "android-35"
         Name: Android API 35, extension level 13
         Type: Platform
         API level: 35
         Revision: 2
    
    
    Project Setting Files:
    
        config.xml:
    <?xml version='1.0' encoding='utf-8'?>
    <widget id="com.mywebsite" version="1.0.0" xmlns="http://www.w3.org/ns/widgets"
        xmlns:cdv="http://cordova.apache.org/ns/1.0"
        xmlns:android="http://schemas.android.com/apk/res/android">
        <name>mywebsite</name>
        <description>Sample Apache Cordova App</description>
        <author email="[email protected]" href="https://cordova.apache.org">
            Apache Cordova Team
        </author>
        <content src="index.html" />
        <allow-intent href="https://mywebsite.com/*" />
    
        <!-- Localhost API calls enabled in development for testing search code: #000 for all enables -->
        <access origin="http://localhost:3000" />
        <!-- <access origin="http://*/*" /> -->
    
        <access origin="https://mywebsite.com" />
    
        <allow-navigation href="https://mywebsite.com/*" />
    
        <preference name="AndroidInsecureFileModeEnabled" value="true" />
        <preference name="AndroidExtraFilesystems" value="files,files-external,cache" />
        <preference name="AndroidPersistentFileLocation" value="Compatibility" />
        <platform name="android">
    
            <config-file target="AndroidManifest.xml" parent="/manifest">
                <uses-permission android:name="android.permission.INTERNET" />
                <uses-permission android:name="android.permission.READ_EXTERNAL_STORAGE" />
                <uses-permission android:name="android.permission.WRITE_EXTERNAL_STORAGE"
                    android:maxSdkVersion="28" />
                <uses-permission android:name="android.permission.MANAGE_EXTERNAL_STORAGE"
                    android:maxSdkVersion="30" />
            </config-file>
    
        </platform>
    </widget>
    
        package.json:
    --- Start of Cordova JSON Snippet ---
    {
      "platforms": [
        "android"
      ],
      "plugins": {
        "cordova-plugin-file": {
          "ANDROIDX_WEBKIT_VERSION": "1.4.0"
        },
        "cordova-plugin-advanced-http": {
          "ANDROIDBLACKLISTSECURESOCKETPROTOCOLS": "SSLv3,TLSv1"
        },
        "cordova-plugin-file-transfer": {}
      }
    }
    --- End of Cordova JSON Snippet ---

Extra notes:

  1. The HTML meta is set like so: connect-src 'self' http://localhost:3000 https://mywebsite.com;
  2. I tried to editing the inner configuration files in .xml in these files: ./platforms/android/app/src/main/AndroidManifest.xml and ./platforms/android/app/src/main/res/xml/config.xml, but the build process RESETS the configurations to DEFAULT. (no effect)
  3. I tried to add BELOW in the main ./config.xml. And it did not work either

BELOW:

<platform name="android">
    <!-- Allow HTTP (cleartext) traffic -->
    <edit-config file="AndroidManifest.xml" mode="merge" target="/manifest/application">
        <application android:usesCleartextTraffic="true" />
    </edit-config>

    <!-- Define network security config (for Android 9+) -->
    <config-file parent="/*" target="res/xml/config.xml">
        <network-security-config>
            <base-config cleartextTrafficPermitted="true">
                <trust-anchors>
                    <certificates src="system" />
                </trust-anchors>
            </base-config>
        </network-security-config>
    </config-file>

    <!-- Whitelist HTTP/HTTPS domains -->
    <allow-navigation href="http://localhost:3000/*" />
    <allow-navigation href="https://mywebsite.com/*" />
    <access origin="http://localhost:3000" />
    <access origin="https://mywebsite.com" />
</platform>

Is there anyway to create CSS rules in a local page in Chrome? [duplicate]

I’m using this code to add CSS rules into the page. It worked wonderfully when the page was requested from my webserver. However when the page is local – ie on my C: drive – it throws a “Cannot access rules” error

Is there a modification I can make to get it working?

if (!document.styleSheets.length) {
    document.head.insertAdjacentHTML("beforeend", '<style crossorigin="anonymous"></style>');
}

var sheet = document.styleSheets[0];
for (var i=0; i<obj.defaultCss.length; ++i) {
    sheet.insertRule(obj.defaultCss[i], sheet.cssRules.length);
}

Turn on flashlight on a Windows 10 tablet programmatically

I have a Electron app with a camera view. I want to be able to turn on the flashlight.
I’m using navigator.mediaDevices.getUserMedia to control the camera with JavaScript.
Unfortunately the torch capability is not available on Windows devices.
Are there any alternative ways to achieve this?
I was thinking maybe to run a console app or powershell script from nodejs, but it seems the flashlight control is only available in the Windows UWP api’s.

Adaptive Card filled required fields blocking submit

I have the following adaptive card that is getting rendered by a custom react web chat. When I have required fields they are blocking the submit, even though there are values in the fields.

{
    "$schema": "http://adaptivecards.io/schemas/adaptive-card.json",
    "type": "AdaptiveCard",
    "version": "1.5",
    "body": [
        {
            "type": "Input.Text",
            "id": "firstName",
            "label": "First name",
            "isRequired": true,
            "errorMessage": "Please enter your first name"
        },
        {
            "type": "Input.Text",
            "id": "lastName",
            "label": "Last name",
            "isRequired": true,
            "errorMessage": "Please enter your last name"
        },
        {
            "type": "Input.Date",
            "id": "dob",
            "label": "Date of Birth",
            "isRequired": true,
            "errorMessage": "Please enter a valid date of birth"
        },
        {
            "type": "ActionSet",
            "actions": [
                {
                    "type": "Action.Submit",
                    "title": "Submit",
                    "style": "positive"
                }
            ]
        }
    ]
}

It’s rendering the input elements with a surrounding div tag, with the id defined in the card JSON, and the input underneath.

<div id="firstName" style="display: flex; flex-direction: column; box-sizing: border-box; flex: 0 0 auto;">
    <label
        for="__ac-4fb6e584-5ef0-4533-803c-a3f7b3426e9e" class="ac-richTextBlock"
        id="__ac-def2aa06-5f74-4bb7-9174-22f4c6b34d34"
        style="text-align: start; box-sizing: border-box; flex: 0 0 auto; margin-bottom: 3px;">
        <span class="ac-textRun" style="font-family: Calibri, &quot;Helvetica Neue&quot;, Arial, &quot;sans-serif&quot;; font-size: 14px; color: black; font-weight: 400; box-sizing: border-box; flex: 0 0 auto;">
            First name
        </span>
        <span class="ac-textRun" aria-hidden="true" style="font-family: Calibri, &quot;Helvetica Neue&quot;, Arial, &quot;sans-serif&quot;; font-size: 14px; color: rgb(209, 52, 56); font-weight: 400; box-sizing: border-box; flex: 0 0 auto;">*</span>
    </label>
    <div class="ac-input-container" style="display: flex;">
        <input class="ac-input ac-textInput ac-input-required" type="text" tabindex="0" maxlength="30" id="__ac-4fb6e584-5ef0-4533-803c-a3f7b3426e9e" aria-required="true" aria-labelledby="__ac-def2aa06-5f74-4bb7-9174-22f4c6b34d34" style="flex: 1 1 auto; min-width: 0px;">
    </div>
</div>

It looks like because of this when it tries to validate the input its failing because it can’t find the value of the input field.

Stepping through the JS, on submit I can see that it finds the Input elements but there is no value even though it’s populated. It looks like its finding it at the div level and not the level of the input field.

I started from the Minimizable Web Chat sample: Minimizable Web Chat
And the AdaptiveCard is getting sent from a Copilot Studio bot.

Has anyone experienced this before?

Getting `Automatic publicPath is not supported in this browser` when using KokoroJS

I am trying to make a simple HTML page that uses Kokoro JS for Text-to-Speech. I am looking over the demo for KokoroJS from here: https://github.com/xenova/kokoro-web/tree/main

I am then building a simple HTML page where I have a TS class named “TextToSpeech”:

import { BaseTool, ToolName } from "../BaseTool";
import { KokoroTTS, TextSplitterStream } from "kokoro-js";

export class TextToSpeech {
    async init(containerElement: HTMLElement) {
        super.init(containerElement);

        // Device detection
        const device = (await detectWebGPU()) ? "webgpu" : "wasm";
        self.postMessage({ status: "device", device });

        // Load the model
        const model_id = "onnx-community/Kokoro-82M-v1.0-ONNX";
        const tts = await KokoroTTS.from_pretrained(model_id, {
            dtype: device === "wasm" ? "q8" : "fp32",
            device,
        }).catch((e: Error) => {
            self.postMessage({ status: "error", error: e.message });
            throw e;
        });
        self.postMessage({ status: "ready", voices: tts.voices, device });

        // Listen for messages from the main thread
        self.addEventListener("message", async (e) => {
            const { text, voice, speed } = e.data;

            const streamer = new TextSplitterStream();
            streamer.push(text);
            streamer.close(); // Indicate we won't add more text

            const stream = tts.stream(streamer, { voice, speed });

            const chunks = [];
            for await (const { text, audio } of stream) {
                self.postMessage({
                    status: "stream",
                    chunk: {
                        audio: audio.toBlob(),
                        text,
                    },
                });
                chunks.push(audio);
            }

            // Merge chunks
            let audio;
            if (chunks.length > 0) {
                const sampling_rate = chunks[0].sampling_rate;
                const length = chunks.reduce((sum, chunk) => sum + chunk.audio.length, 0);
                const waveform = new Float32Array(length);
                let offset = 0;
                for (const { audio } of chunks) {
                    waveform.set(audio, offset);
                    offset += audio.length;
                }

                // Create a new merged RawAudio
                audio = new chunks[0].constructor(waveform, sampling_rate);
            }

            self.postMessage({ status: "complete", audio: audio.toBlob() });
        });
    }
}

export async function detectWebGPU() {
    try {
        const adapter = await navigator.gpu.requestAdapter();
        return !!adapter;
    } catch {
        return false;
    }
}

My tsconfig.json is like this:

{
    "compilerOptions": {
        "target": "ES2020",
        "module": "ESNext",
        "strict": true,
        "esModuleInterop": true,
        "skipLibCheck": true,
        "forceConsistentCasingInFileNames": true,
        "outDir": "dist",
        "rootDir": ".",
        "declaration": false,
        "sourceMap": false,
        "useDefineForClassFields": true,


        "moduleResolution": "bundler",
        "allowImportingTsExtensions": true,
        "isolatedModules": true,
        "moduleDetection": "force",
        "noEmit": true,
        "jsx": "react-jsx",

        "lib": [
            "dom",
            "dom.iterable",
            "es6",
            "es2020"
        ],
        "baseUrl": ".",
        "paths": {
            "@/*": [
                "./*"
            ]
        }
    },
    "include": [
        "**/*.ts"
    ],
    "exclude": [
        "node_modules",
        "publish",
        "dist"
    ]
}

I have a script.ts that in the adds an event to a link which build the UI for TTS when clicked, which initializes the TextToSpeech class.

Everything is compiled using this command:

# Find entry point TypeScript files
ENTRY_POINTS=$(find . -name "*.ts" -not -path "./node_modules/*" -not -path "./publish/*" -not -path "./chrome_extension/*" -not -path "./dist/*")

# Build esbuild command
ESBUILD_CMD="esbuild"

ESBUILD_ARGS="--outdir=$OUTPUT_DIR --platform=browser --target=es6 --bundle --format=iife --splitting --format=esm --chunk-names=chunks/[name]-[hash]"
$ESBUILD_CMD $ENTRY_POINTS $ESBUILD_ARGS

When I load the HTML page, I get this error:

script.js:19211 Uncaught Error: Automatic publicPath is not supported in this browser
    at script.js:19211:82

Can anyone please advice what I am doing wrong? Thanks.

Reliably detect pen, hand or mouse

Use case:
User should be able to draw hand signature on any tablet using web app, however only a digital pen should be allowed for drawing.

Can the aforementioned requirement be reliably implemented using PointerEvent?
If not then what other options are available?

PointerEvent.pointerType, PointerEvent.width or PointerEvent.height properties cannot be trusted since on my device with Samsung S Pen they are not recognized.

Google auth is not available in vercel

import NextAuth from 'next-auth';
import GoogleProvider from 'next-auth/providers/google';
import { UserInfoQuery } from '@/utils/query';
import * as db from '@/utils/db';

export const dynamic = 'force-dynamic';

const handler = NextAuth({
  providers: [
    GoogleProvider({
      clientId: process.env.GOOGLE_CLIENT_ID as string,
      clientSecret: process.env.GOOGLE_CLIENT_SECRET as string,
      authorization: {
        params: {
          prompt: "select_account",
          access_type: "offline",
          response_type: "code"
        }
      }
    }),
  ],
  debug: process.env.NODE_ENV === 'production',
  useSecureCookies: process.env.NODE_ENV === 'production',
  cookies: {
    sessionToken: {
      name: `next-auth.session-token`,
      options: {
        httpOnly: true,
        sameSite: process.env.NODE_ENV === 'production' ? 'none' : 'lax',
        path: '/',
        secure: process.env.NODE_ENV === 'production' ? true : false,
        domain: process.env.NODE_ENV === 'production' ? 'assistsales.vercel.app' : undefined
      }
    },
    callbackUrl: {
      name: `next-auth.callback-url`,
      options: {
        httpOnly: true,
        sameSite: process.env.NODE_ENV === 'production' ? 'none' : 'lax',
        path: '/',
        secure: process.env.NODE_ENV === 'production' ? true : false,
        domain: process.env.NODE_ENV === 'production' ? 'assistsales.vercel.app' : undefined
      }
    },
    csrfToken: {
      name: `next-auth.csrf-token`,
      options: {
        httpOnly: true,
        sameSite: process.env.NODE_ENV === 'production' ? 'none' : 'lax',
        path: '/',
        secure: process.env.NODE_ENV === 'production' ? true : false,
        domain: process.env.NODE_ENV === 'production' ? 'assistsales.vercel.app' : undefined
      }
    },
    pkceCodeVerifier: {
      name: 'next-auth.pkce.code_verifier',
      options: {
        httpOnly: true,
        sameSite: process.env.NODE_ENV === 'production' ? 'none' : 'lax',
        path: '/',
        secure: process.env.NODE_ENV === 'production' ? true : false,
        domain: process.env.NODE_ENV === 'production' ? 'assistsales.vercel.app' : undefined
      }
    }
  },
  callbacks: {
    async signIn({ user, account, profile }) {
      if (account?.provider === 'google' && profile) {
        try {
          if (!user.email) {
            return false;
          }
          
          const now = new Date();
          
          try {
            const dbCheck = await db.query('SELECT NOW() as time');
            if (!dbCheck.rows?.length) {
              console.error('Database connection check failed');
              return false;
            }
          } catch (dbError) {
            console.error('Database connection error:', dbError);
            return false;
          }
          
          let existingUser;
          try {
            existingUser = await UserInfoQuery.getUserByEmail(user.email as string);
          } catch (getUserError) {
            console.error('Error getting user:', getUserError);
            return false;
          }
          
          if (!existingUser) {
            try {
              const userData = {
                user_name: user.name || (profile as any).name || 'Google User',
                email: user.email as string,
                passwordhash: 'google_oauth_user',
                phone: (profile as any).phone_number || undefined,
                profile_image: user.image || undefined,
                last_login_at: now,
                created_at: now,
                modified_at: now,
              };
              
              const insertQuery = `
                INSERT INTO user_info (
                  id, user_name, email, passwordhash, phone, profile_image, 
                  last_login_at, created_at, modified_at
                ) VALUES (
                  gen_random_uuid(), $1, $2, $3, $4, $5, $6, $7, $8
                )
                RETURNING *
              `;
              
              const insertParams = [
                userData.user_name, 
                userData.email, 
                userData.passwordhash,
                userData.phone,
                userData.profile_image,
                userData.last_login_at,
                userData.created_at,
                userData.modified_at
              ];
              
              const result = await db.query(insertQuery, insertParams);
              
              if (result.rows.length === 0) {
                console.error('User creation failed');
                return false;
              }
            } catch (createError) {
              console.error('Error creating user:', createError);
              try {
                const fallbackUserData = {
                  user_name: user.name || (profile as any).name || 'Google User',
                  email: user.email as string,
                  passwordhash: 'google_oauth_user',
                  phone: (profile as any).phone_number || undefined,
                  profile_image: user.image || undefined,
                  last_login_at: now,
                  created_at: now,
                  modified_at: now,
                };
                
                const createdUser = await UserInfoQuery.createUser(fallbackUserData);
                
                if (!createdUser) {
                  console.error('Fallback user creation failed');
                  return false;
                }
              } catch (fallbackError) {
                console.error('Fallback creation error:', fallbackError);
                return false;
              }
            }
          } else {
            try {
              const updateData = {
                user_name: user.name || existingUser.user_name,
                profile_image: user.image || existingUser.profile_image,
              };
              
              await UserInfoQuery.updateUserInfo(existingUser.id, updateData);
              
              const loginQuery = 'UPDATE user_info SET last_login_at = $1 WHERE id = $2 RETURNING *';
              const loginResult = await db.query(loginQuery, [now, existingUser.id]);
              
              if (loginResult.rows.length === 0) {
                console.error('Login time update failed');
                // 업데이트 실패해도 로그인은 성공으로 처리
              }
            } catch (updateError) {
              console.error('Error updating user:', updateError);
              // 업데이트 실패해도 로그인은 성공으로 처리
            }
          }
          
          return true;
        } catch (error) {
          console.error('Sign in process error:', error);
          return false;
        }
      }
      
      return true;
    },
    async session({ session, token }) {
      if (session.user?.email) {
        try {
          const dbUser = await UserInfoQuery.getUserByEmail(session.user.email);
          
          if (!dbUser) {
            console.error('User not found in database');
            throw new Error('User not found');
          }

          session.user.id = String(dbUser.id);
          
          if (!session.user.name && dbUser.user_name) {
            session.user.name = dbUser.user_name;
          }
          
          if (!session.user.image && dbUser.profile_image) {
            session.user.image = dbUser.profile_image;
          }
          
          return session;
        } catch (error) {
          console.error('Session callback error:', error);
          // 세션 데이터 업데이트 실패 시에도 기본 세션 정보는 유지
          return session;
        }
      }
      
      return session;
    }
  },
  pages: {
    signIn: '/login',
    error: '/login',
    signOut: '/',
  },
  events: {
    signOut: async () => {
      console.log('로그아웃 이벤트가 발생했습니다.');
    },
  },
  session: {
    strategy: 'jwt',
    maxAge: 30 * 24 * 60 * 60, // 30일
  },
  secret: process.env.NEXTAUTH_SECRET,
});

export { handler as GET, handler as POST };

I’m a person who can do development like vibecoding.
I’m trying to create the program I want with my cursor recently, and I’m having a problem implementing Google login, so I’m asking.

It works fine on http://localhost:3000, but Google login does not work on https://mydomain.vercel.app.

We also double-checked the setting of the vercel environment variable,
I also checked redirecturi on google console.

I think it’s a matter of cookies, so I modified the options.

Symptoms 1.
As soon as the page is loaded, the error “Unexpected token ‘<‘, “<!DOCTYPE”…is not valid JSON” appears.

Symptoms 2.
When I try to log in, I go to the login page, but when I click Google login, I go to the first page and I don’t log in.

  • The next-auth.callback-url, next-auth.csrf-token, and next-auth.session-token are not created in the cookie at this time.
  • In addition, there is no Google related content in session storage.

Things I’ve done before

  • Modify cookie options for route.ts in […nextauth]
  • Modifying NEXTAUTH_URL to the changed domain by changing the domain in vercel
  • Apply environmental variables after creating GOOGLE_CLIENT_ID and GOOGLE_CLIENT_SECRET for production separately
  • Adding middleware.ts for CORS settings

What could be the problem? So far I have no idea about how fix it.

Plz give me an advice.

Can’t write to Firebase, getting 400 errors

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}

How is it possible to reduce the large default padding in mat-form-field?

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>

Electon, how to enable interaction only for one item and disable for others

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?

React Native 0.78.1 — Local GIF Not Animating on Android with , even after adding Fresco dependencies

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?

Stopping CSS animations using the least Javascript code

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?

How to solve iife/umd conflict with supabase

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?