I’ve created a small function that uses the ioredis nodejs package to read from my Redis server. I am able to write to the cache but while reading I am not getting the result I want. The function is here:

static async getString(key: string): Promise<string> {
    await redis.get(key, (err, result) => {
        if (err) {
            console.log(err)
            return ''
        }
        else
            return result
    })
    return 'q'
}

For some reason, the last return statement is being run (return ‘q’) before my redis.get function returns my result. Even if an error occurred, the last return statement should actually never execute right? I think I may be understanding something wrong about async await. The string with the key I am testing does exist though. When I return the result with a console.log(result), I am getting what I expect. But the function itself is returning ‘q’.

I was trying to use “react-social-media-embed” in my Next TS project. I did the following:

npm i react-social-media-embed

my page.tsx looks like this:

import { InstagramEmbed } from 'react-social-media-embed';

export default function Home() {
  return (
    <>
      <main className={`${styles.main} max-w-screen-xl font-serif font-thin`}>
        <div style={{ display: 'flex', justifyContent: 'center' }}>
          <InstagramEmbed url="https://www.instagram.com/p/CUbHfhpswxt/" width={328} />
        </div>
      </main>
    </>
  )
}

All very simple, but when compiling I got this error in browser:

Server Error
TypeError: Class extends value undefined is not a constructor or null

This might be caused by a React Class Component being rendered in a Server Component, React Class Components only works in Client Components. Read more: https://nextjs.org/docs/messages/class-component-in-server-component

This error happened while generating the page. Any console logs will be displayed in the terminal window.
Call Stack
Component
node_modules/react-youtube/dist/YouTube.js (144:50)
(sc_server)/./node_modules/react-youtube/dist/YouTube.js
file:///Users/xiaohandu/sanctum-wellbeing/.next/server/app/page.js (2491:1)
__webpack_require__
file:///Users/xiaohandu/sanctum-wellbeing/.next/server/webpack-runtime.js (33:42)
require
node_modules/react-social-media-embed/dist/components/embeds/YouTubeEmbed.js (43:40)
(sc_server)/./node_modules/react-social-media-embed/dist/components/embeds/YouTubeEmbed.js
file:///Users/xiaohandu/sanctum-wellbeing/.next/server/app/page.js (2382:1)
__webpack_require__
file:///Users/xiaohandu/sanctum-wellbeing/.next/server/webpack-runtime.js (33:42)
require
node_modules/react-social-media-embed/dist/index.js (23:13)
(sc_server)/./node_modules/react-social-media-embed/dist/index.js
file:///Users/xiaohandu/sanctum-wellbeing/.next/server/app/page.js (2459:1)
__webpack_require__
file:///Users/xiaohandu/sanctum-wellbeing/.next/server/webpack-runtime.js (33:42)
eval
webpack-internal:///(sc_server)/./src/app/page.tsx (9:82)

Any idea why and how to fix it?

I am trying to create a supabase edge function to read a file from an URL and return its text, however I can’t find any working libraries for Deno environment.

This is what I tried so far:

import { PDFDocument } from 'https://cdn.skypack.dev/pdf-lib';

async function fetchPDF(url: string): Promise<Uint8Array> {
    const response = await fetch(url);
    const data = await response.arrayBuffer();
    return new Uint8Array(data);
}

async function readPDFText(url: string): Promise<string> {
    const pdfBytes = await fetchPDF(url);
    const pdfDoc = await PDFDocument.load(pdfBytes);
    const pages = pdfDoc.getPages();

    let text = '';
    for (const page of pages) {
        const content = await page.extractText();
        text += content;
    }

    return text;
}

const pdfUrl = 'URL_GOES_HERE';
const pdfText = await readPDFText(pdfUrl);
console.log(pdfText);

however, I get a TypeError that .extractText() is not a function, I also tried getTextContent(), same error.

How can I make this application logic work:
I get data coming in via { method: ["ONE", "TWO"] },
I need to make a master controller for the rest of the functions (ASYNC), if the right method comes in it starts the function with the right parameters, the functions are not named as methods they are different. If anyone has an example how to do help.

Please look at my bad example below. It works what argument will come that function will work, but the name of the function from the methods is different. Or advise a library for my problem

Once again, the function has unique parameters, and the methods are not named as functions

const _ = require('lodash');

const externalData = {
   test: 'Hello',
   test1: 'World',
};

async function test(data) {
   console.log('Function test called with data:', data);
}

async function test1(data) {
   console.log('Function test1 called with data:', data);
}

const functions = {
   test,
   test1,
};

async function main() {
   const input = JSON.parse('{"method": ["test","test1"]}');
   for (const methodName of input.method) {
      await _.invoke(functions, methodName, externalData[methodName]);
   }
}

main();

I am trying to implement a simple game in JavaScript where the game itself is one class and the info about the game is the other. The info must be updated after each time the user clicks the mouse.
I have two classes. The Grid class is the game itself. This is simplification:

class Grid {
  constructor(container) {
    this.container = container;
    this.myEvent = new Event("myCustomEvent")
    this.container.addEventListener('click', () => {
      this.container.addEventListener("myCustomEvent", e => {
        console.log(e)
      })
    })
  }

And this is the Info class.

class Info {
  constructor(grid, container) {
    this.container = container;
    this.grid = grid;
    this.container.dispatchEvent(this.myEvent)
  }

I then create the instances of the two classes:

const grid = new Grid(document.querySelector(".container"));
const info = new Info(grid, document.querySelector(".container"));

However this does nothing. Is there a way to dynamically update and display the information that exists in one class but must be passed to another? I don’t want to mix these two classes into one.

I can see that this works. It logs out the event:

class Grid {
  constructor(container) {
    this.container = container;
    this.myEvent = new Event("myCustomEvent")
    this.container.addEventListener("myCustomEvent", e => {
      console.log(e)
    })
    this.container.dispatchEvent(this.myEvent)
  }
const grid = new Grid(document.querySelector(".container"));

However not when I dispatch the event in a different class.

`

header 1	header 2
cell 1	cell 2
cell 3	cell 4

“your *ext`how can i written a program with javascript or jquery , that i convert text to voise.*

i want that in program my text convert to voise,
and more like to human voise
thanks a lot.//

i want this program run to in video

I am trying to add a svg gradient background image to my website, however, When adding the SVG as a background it just seems to duplicate it multiple times randomly. I have never had this issue before when adding background images, not sure why it is not working now.

I have tried adding background no repeat on the line after. However this doesn’t fix the issue.

HTML:

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <meta http-equiv="X-UA-Compatible" content="ie=edge">
        <title>Website</title>
        <link rel="stylesheet" href="style.css">
    </head>
<body>
    
    <header class="header">
        <a href="#" class="logo">Matt</a>

        <nav class="navbar">
            <a href="#">Home</a>
            <a href="#">About</a>
            <a href="#">Contact</a>
            <a href="#">Projects</a>
        </nav>
    </header>


    <div class="container">
        <p class="text">Hello, Matt Here.</p>
    </div>
    
    
</body>
</html>

CSS:

    * {
      color: white;
      text-align: center;
      box-sizing: border-box;
      margin: 0;
      padding: 0;
    }
    
    body {
      
      background-image: url(./color-morph.svg);
    }
    
    .header {
      position: fixed;
      top: 0;
      left: 0;
      width: 100%;
      padding: 20px 100px;
      background: rgba(255,255,255,.1);
      display: flex;
      justify-content: space-between;
      align-items: center;
      backdrop-filter: blur(10px);
      border-bottom: 2px solid rgba(255,255,255, .2);
    }
    
    .navbar a {
      font-size: 18px;
      text-decoration: none;
      margin-left: 35px;
      transition: .3s;
    }
    
    .navbar a:hover {
      color: black;
      -webkit-text-stroke: 1px white;
    }
    
    .container {
      display: inline-block;
      margin: 0 auto;
      padding-top: 15%;
    }
    
    .text {
      font-size: 30px;
      font-weight: 900;
      letter-spacing: 5px;
      border-right: 5px solid;
      width: 100%;
      white-space: nowrap;
      overflow: hidden;
      animation:
        typing 2s steps(17),
        cursor .4s step-end infinite alternate;
    }
    
    /* cursor blinking effect */
    @keyframes cursor {
      50% { border-color: transparent; }
    }
    
    /* Typewriter effect */
    @keyframes typing {
      from { width: 0 }
    }

I am building a server side project in Node Js with Express and when creating the tokens for the users I find out by checking in Postman that the token is always the same

I would expect him to give me a different token each time

In CSS, I have a .group class that is a parent to an .opt class. When animating, the y-scaling part works completely fine but it will not animate at all if the max-height is set to a percentage value. By that, I mean it will just jump to its end position instantly.

.group {
    opacity: 1;
}

.group:hover > .opt{
    --tw-scale-y: 1;
    max-height: 100%;
    transform: scaleY(var(--tw-scale-y));
}
  
.opt {
    --tw-scale-y: 0;
    max-height: 0px;
    transform: scaleY(var(--tw-scale-y));
}

The actual value for 100% works as it fits perfectly in its parent container but weirdly, changing the value to a fixed pixel value works perfectly.

.group:hover > .opt{
    --tw-scale-y: 1;
    max-height: 200px;
    transform: scaleY(var(--tw-scale-y));
}

So this works perfectly fine. The issue is that I don’t know exactly how big the parent container is going to be, so I’d like to avoid using a fixed value. Any fix to this issue is fine, thanks!

Here is the form:

let User = document.getElementsByClassName(".input");
let inpUser = document.getElementsByClassName(".input").value;
//let nodeText = document.createTextNode(inpUser);
let taskSection = document.querySelector(".tasks");
let submitBtn = document.querySelector(".add");

onsubmit = function() {
  if (inpUser !== "") {
    console.log(inpUser);
    let nodeText = document.createTextNode(inpUser);
    taskSection.appendChild(nodeText);
  }

}

<body>
  <center>
    <form action="">
      <input type="text" class="input">
      <input type="submit" class="add" value="add task">
    </form>
    <div class="tasks"></div>
  </center>
  <script src="testing.js"></script>
</body>

The problem is that I can’t get the input from user and put that value into local storage.

I’ve got this string values for post API

const dataPower = {}
dataPower[values.id]= [values.parameters]

    const ReportData ={
         "data":dataPower
      "dateRange": {
        "startDate": startDate,
        "endDate": endDate
      }
    }

it work good but I should create this format and pass to Api :

{
      "data": {
        "id1": [
          "temp",
          "power"
        ],
        "id2": [
          "irradiance"
        ]
      },
      "dateRange": {
        "startDate": "2023-05-08T00:00:00.000+00:00",
        "endDate": "2023-05-08T12:00:00.000+00:00"
      }
    }

How should I develop my code ?

I have a similar question to this post: “Add choice” button for respondents in Qualtrics

But when I add this javascript to my question, nothing changes when I preview the question. Should I be adding it more specifically to the form fields?

Qualtrics.SurveyEngine.addOnload(function() {
    var cs = jQuery("#"+this.questionId+" .ChoiceStructure");
    cs.find("tr:not(:lt(1))").hide();
    cs.append("<input type='button' id='add' value='Add field' name='+' />");
    jQuery("#add").on('click',function(){
        var c = cs.find("tr:visible").length;
        cs.find("tr:eq("+c+")").show(); 
    });
});

I’m working on a project. I moved to the frontend part and I’m trying to open it in my browser but when I do it doesn’t render. I opened the console so I could have some clues how to solve this problem and I find this error:

I started my journey on February so I don’t know how to solve it honestly. I would like detailed instructions on how to solve it so I can understand and then help anyone else who encounters this problem. Thank you very much for your help.

I have created this react chrome extension using vite react, when I open extension it redirects me to login route and if I remove login route it opens blank page without any element inside root div. It should render GetStarted page at first. Here is my App.jsx code :

import { Routes, Route, useLocation } from "react-router-dom";
import { AnimatePresence } from "framer-motion";
import Auth from "./screens/Auth";
import CreateAccount from "./screens/CreateAccount";
import CreateUsername from "./screens/CreateUsername";
import Dashboard from "./screens/Dashboard";
import GetStarted from "./screens/GetStarted";
import Login from "./screens/Login";
import SeedPharse from "./screens/SeedPharse";
import Transaction from "./screens/Transaction";
import VerifyEmail from "./screens/VerifyEmail";

function App() {
  const location = useLocation();

  return (
    <div className="pb-5">
      <AnimatePresence mode="wait">
        <Routes location={location} key={location.key}>
          <Route exact path="/" element={<GetStarted />} />
          <Route exact path="/auth" element={<Auth />} />
          <Route exact path="/register" element={<CreateAccount />} />
          <Route exact path="/createUsername" element={<CreateUsername />} />
          <Route exact path="/verify" element={<VerifyEmail />} />
          <Route exact path="/dashboard" element={<Dashboard />} />
          <Route exact path="/seedPharse" element={<SeedPharse />} />
          <Route exact path="/transaction" element={<Transaction />} />
          <Route exact path="/login" element={<Login />} />
        </Routes>
      </AnimatePresence>
    </div>
  );
}

export default App;

I am trying to import an enum from a TypeScript file in the root directory, into a content script. However, when I attempt, this, I get the error message:
Uncaught SyntaxError: Cannot use import statement outside a module.

Is there any way to solve this?