Category: javascript

In my project based on the JS dojo framework, I have a standalone component written in react and antd 4 that I can’t directly put my hands on.

In the last period I started to convert widgets written in dojo to react using antd 5, I tried in porting the components to the old part in dojo and everything works, except for numerous styling problems.

The components written in antd 5 are all weird, buttons and other components lose their rounding at the corners or for example switches are warped, appearing longer than they should be and also modals do what they want.
This problem occurs only when I import/use components built within the old project. During development, they don’t have these problems, in the project I can only fix this problem by removing the import of the component CSS written in antd 4.
Does anyone have any idea how I can separate or isolate the two CSS (the one from antd 4 and 5)? Or any solution/idea?

This some examples of antd 5 components combined with the antd4 CSS component:

Same component without the CSS of antd 4 component (Of course, the latter will break without the CSS).:

Below is my Form looks like in return section:

<Form >
<ListGroup >
    <ListGroup.Item className="text-start" >
        <div>
            <Form.Check
                type="radio"
                id="0"
                name="answer"
                label={questionsJSON.questions[num].answers[0]}
                value={questionsJSON.questions[num].answers[0]}
                onChange={e => setSelectedAnswer(e.target.value)}
                {...{ selectedAnswer } != null ? "checked" : null}
            />
        </div>
    </ListGroup.Item>
    <ListGroup.Item className="text-start">
        <Form.Check
            type="radio"
            id="1"
            name="answer"
            label={questionsJSON.questions[num].answers[1]}
            value={questionsJSON.questions[num].answers[1]}
            onChange={e => setSelectedAnswer(e.target.value)}
        />
    </ListGroup.Item>
    <ListGroup.Item className="text-start">
        <Form.Check
            type="radio"
            id="2"
            name="answer"
            label={questionsJSON.questions[num].answers[2]}
            value={questionsJSON.questions[num].answers[2]}
            onChange={e => setSelectedAnswer(e.target.value)}
            {...{ selectedAnswer } != null ? "checked" : null}
        />
    </ListGroup.Item>
    <ListGroup.Item className="text-start">
        <Form.Check
            type="radio"
            id="3"
            name="answer"
            label={questionsJSON.questions[num].answers[3]}
            value={questionsJSON.questions[num].answers[0]}
            onChange={e => setSelectedAnswer(e.target.value)}
            {...{ selectedAnswer } != null ? "checked" : null}
        />
    </ListGroup.Item>
</ListGroup>
<br />
<Button variant="danger" onClick={onClickPassRadio}>submit</Button>

What is happening is first time it works ie all the radio buttons are unchecked once Submit is pressed. But afterwards, useeffect is called and selectedAnswer is being set to null too. But even if I dont click any option, on UI it is shown as checked when it is not as useeffect afterwards shows value as null.

Is there a way to uncheck all the radio buttons once submit is pressed?

    const [selectedAnswer, setSelectedAnswer] = useState("");
const [num, setNum] = useState(0);

const randomNumberInRange = ( max) => {
    return Math.floor(Math.random() 
            * (max  + 1));
};

const onClickPassRadio = (e) => {
    e.preventDefault();
    //console.log(selectedAnswer);
    setNum(randomNumberInRange(10));
};

useEffect(() => {
    setSelectedAnswer(null);
  }, [setNum]);

In my parent component(App.js) i am passing a function as a prop to the child:

import React from "react";
import Win from "./components/Win"

function App() {

  const [squares, setSquares] = React.useState(dices)
  const [allSame, setAllSame] = React.useState(false)

  function Reset() {
    console.log("yes")
  }

  return (
          <Win onClick = {() => Reset} />
}

export default App;

this is my child component(Win.js):

import React from "react"
import reset from "../images/reset.png"
import Confetti from "./Confetti"

export default function Win(props) {
    // function r(){
    //     console.log("lol")
    // }

    return (
        <div className="Win">
            {/* <Confetti /> */}
            <h1  style={{color:"white", fontSize:"4rem"}}>You Won</h1>
                <button onClick={() => props.Reset}>Press ME</button>
        </div>
    )
}

i made the function r just for testing and tried using it when the button is clicked, it worked perfectly fine.

There is a plot with one trace disabled:

Then user select some points using lasso:

And then enables the “trace 1” clicking the legend

Is it possible to get those “new” points from trace 1 in code?

I’m using ReactJS with Vite and trying to make a PWA with vite-plugin-pwa. However, the plugin is not generating all the icons specified in my manifest object.It generate only 4 icons(including favicon.ico).

• apple-touch-icon.png
• mask-icon.svg
• cr.jpg
• and favicon.ico by default

Here is my code:

import { defineConfig } from "vite";
import react from "@vitejs/plugin-react";
import { VitePWA } from "vite-plugin-pwa";

const manifestForPlugin = {
    registerType: "prompt",
    includeAssets: ["favicon.ico", "pwa-icon-512.png", "android-chrome-512x512.png", "apple-touch-icon.png", "mask-icon.svg", "cr.jpg"], //I tried adding/removing icon name from here but , no change, generate the 4 icons only 

    manifest: {
        name: "App name",
        short_name: "short name",
        description: "desc...",
        icons: [
            {
                src: "src/assets/img/pwa-icon-512.png", //dosen't generate

                sizes: "512x512",
                type: "image/png",
                purpose: "any maskable",
            },
            {
                src: "src/assets/img/android-chrome-512x512.png", //dosen't generate
                sizes: "512x512",
                type: "image/png",
                purpose: "any maskable",
            },
            {
                src: "src/assets/img/apple-touch-icon.png",
                sizes: "180x180",
                type: "image/png",
                purpose: "apple touch icon",
            },
            {
                src: "src/assets/img/mask-icon.svg",
                sizes: "144x65",
                type: "image/svg+xml",
                purpose: "any maskable",
            },
            {
                src: "src/assets/img/cr.jpg",
                sizes: "457x450",
                type: "image/jpg",
                purpose: "any maskable",
            }
        ],
        theme_color: "#1e1e1e",
        background_color: "#1e1e1e",
        display: "standalone",
        scope: "/",
        start_url: "/",
        orientation: "portrait",
    },
};
// https://vitejs.dev/config/
export default defineConfig({
    base: "./",
    plugins: [react(), VitePWA(manifestForPlugin)],
    build: {//I also tried adding/removing this build object but still it generate only the 4 icon
        outDir: "dist",
    },
});

I also changed the position of the icon object but no matter what I do It just generate the 4 icon only.

In network tab it throws 404 error for the files that I’m trying to add.

Here is my folder tree:

folder tree

pnpm buld result:

build tree

I tried moving all the icons to public folder and rename the src path but it still generate the 4 icons only.

I put data into plotly bar chart and no matter what parameters I set the bar width stays like 1px.

Bar Chart

Plot config:

 <Plot key={uniqueId}
                              data={[...wrapper.data]}
                              className="ea-plotly-bar-chart"
                              config={{...chartConfig}}
                              layout={{
                                  ...layoutConfig,
                                  width: wrapper.width,
                                  height: extractNumber(props.height),
                                  xaxis: {
                                      showticklabels: true,
                                      tickformat: props.dateFormat || '%Y-%m-%d %H:%M:%S',
                                      domain:[0,1],
                                      type:"date",
                                      autorange:true,
                                      ...commonAxisConfig
                                  },
                                  yaxis: {
                                      showticklabels: true,
                                      title: 'Y-axis Title',
                                      tickformat: 'f',
                                      ...commonAxisConfig
                                  },
                                  showlegend: true,
                                  bargap: 0.05, // Gap between bars
                                  bargroupgap: 0.2, // Gap between bar groups
                                  barmode: 'group',
                                  barnorm: '',
                              }}
                        />

I tried all plot bar configs and nothing worked.

I am Trying to create a text analyzer web app using reactjs

but in a section where i want to display the word count and char count live of text entered, i am getting a garbage value

here is code

<div className="report">
                <h5>Word:{text.trim().split(/s+/).length}</h5>
                <h5>Characters: {text.length}</h5>
            </div>

My Website Link: https://urgensy.com/

My website has animation and effects in JQUERY, Wow JS and Particles JS in it. In Google Chrome, whenever the website tab is idle for a few seconds or I am moving to another tab and coming back to this one, it freezes for a few seconds. Also while scrolling down, it often freezes. This is happening even in the basic pages like Contact Us.

My site works perfectly without any issue in Mozilla, Opera etc. Any suggestion would be much appreciated. (I am using Cloudflare for Caching and SSL Certificate)

Playing around with web crypto, I’ve downloaded argon2.wasm and argon2.js from argon2-browser and am now trying to call them from JS using the introductory example:

argon2.hash({pass: 'password', salt: 'somesalt', distPath: 'dist'}).then(console.log);

However, this results in the following error and warnings (in Firefox):

Uncaught ReferenceError: argon2 is not defined
wasm streaming compile failed: TypeError: WebAssembly: Response has unsupported MIME type '' expected 'application/wasm' argon2.js:1:10104
falling back to ArrayBuffer instantiation

I’ve searched around for a while now but have failed to find an answer. What am I missing?

The image is supposed to be clipped along the SVG path provided but the SVG seems to be oversized. How can the SVG as a whole or its path be adjusted in terms of image positioning/SVG width and height or image background-size in order for it to perfectly clip the image provided?

Perhaps I would also like the size of the image to dictate the dimensions of the SVG so that there’s no need to adjust the SVG to suit the image and merely passing it’s path to the image’s clip-path gets the job done (which is how nearly all tutorials and docs show it’s done).

Please note that I’ve already tried things like adding a viewbox attribute and value to the SVG, switching clipPathUnits to "objectBoundingBox", wrapping the path in <defs> and whole bunch of other things.

<section className={styles.secondaryFeaturedProjectsSection}>
  <img
    className={styles.clip_container}
    src={bgImg}
    alt="Processor chipset image."
  />
  <svg
    xmlns="http://www.w3.org/2000/svg"
    viewBox="0 0 600 550"
    className={styles.svg}
  >
    <defs>
      <clipPath id="one">
        <path
          xmlns="http://www.w3.org/2000/svg"
          d="M484 224.5V281h123V168H484v56.5M1142 914v220h440v441h439.996l.252-220.25.252-220.25 222.75-.252 222.75-.252V694H1142v220M10.669 1613.665c-.368.367-.669 165.068-.669 366.002V2345h242.996l.252-244.25.252-244.25 121.754-.254 121.754-.254-.254-121.246-.254-121.246-242.581-.252c-133.42-.139-242.883.049-243.25.417M826 2048v129h260v-258H826v129m-132 584.067V3000h281v-240.25c-.001-132.137-.3-297.237-.665-366.889l-.665-126.638-31.085-.59c-17.097-.324-80.022-.794-139.835-1.044l-108.75-.454v367.932M1839 2566v88h206v176h414v-64.838c0-35.662-.297-75.037-.66-87.5l-.659-22.662h-46.176c-25.397 0-71.9-.299-103.34-.664l-57.165-.664V2478h-412v88m729 0v88h206v346h206v-522h-412v88"
          fillRule="evenodd"
        />
      </clipPath>
    </defs>
  </svg>
</section>

This is a vite react project and I am well aware of image masking but I need clip-path for an animation. Thanks for your time!

I have a project that consists of a Vue.js frontend (version 2.6.12) and a Laravel backend (version 9.27.0). When I run the project on my localhost, everything works smoothly and I don’t encounter any errors. However, when I deploy the project to production mode, specifically when uploading it to the staging environment on my server, I face an issue.

The problem is that when I try to call APIs or perform certain actions, I receive the following error message on the page: “We’re sorry but officio.work doesn’t work properly without JavaScript enabled. Please enable it to continue.”

I have already made sure that JavaScript is enabled in the browser, and I have cleared the cache as well. Despite these attempts, the error persists.

I’m seeking assistance in understanding why this issue only occurs when the project is in production mode. Is there something specific to the production environment that could be causing this error? Are there any additional configurations or settings that I need to consider?

I appreciate any insights or suggestions that could help me resolve this issue and ensure that my project runs smoothly in the production environment.

Thank you in advance for your assistance!
console

Expected Outcome:
When running the project on the production environment, I expected it to function without any errors and successfully insert data into the database when making API calls.

Actual Outcome:
The project displays the error message “We’re sorry but officio.work doesn’t work properly without JavaScript enabled” on the page. Additionally, although the API requests return a status code of 200, the data is not being inserted into the database.

i want to make my nav sticky when it is scrolled down to 200 px height but it is not being sticky even when scrolled all the way down. I want to make scroll sticky something like this as shown in the following link https://preview.colorlib.com/#cohost

import React,{useState,useEffect} from 'react'


function Nav() {
    const [stickyShow,setStickyShow]=useState(false)
    useEffect(() => {
      window.addEventListener('scroll', handle)
      return () => {
        window.removeEventListener('scroll', handle);
      }
    }, [])
    const handle=()=>{
        if(window.scrollY > 200){
            setStickyShow(true);
        }
        else {
            setStickyShow(false)
        }
    }
    
    const item=[
        {h1:'Home'},
        {h1:'New'},
        {h1:'Blog'},
        {h1:'About us'},
    ]
  return (
    <div>
        <div className={`${stickyShow? 'sticky':'relative'}`}>
        <div className='px-2 py-2 bg-slate-400'>
            <ul className='flex justify-between'>
            {item.map((val,i)=>{
                return <li key={i}>
                    {val.h1}
                </li>
            })}
            </ul>
        </div>
        </div>
        <div className='h-[800px] bg-red-300'>
x   
        </div>
    </div>
    
  )
}   

export default Nav

is my calling the function handle not correct?

I have a TypeScript project that uses a custom wrapper over chrome.runtime.sendMessage to send messages. This custom wrapper makes sure the messages are formatted correctly, are safe, etc.

However there is a lot of turnaround of devs in the codebase and new devs often try to use chrome.runtime.sendMessage directly (and not the wrapper).

Is there any way I can display a warning, either at compile time or in their IDE, when they try to access that method?

*I am trying to integrate my web app with whatsapp cloud api , i am able to send test messages but i want to add variables and api documentation says it can accept it as well but i am not able to pass data . *

**// call for sending message **

const sendMessage = () => {
const body = {
messaging_product: “whatsapp”,
to: “91” + 8872649119,
type: “template”,
template: {
name: “hello_world”,
language: { code: “en_US” },
},
};

axios
  .post(
    "  https://graph.facebook.com/v17.0/100320906470290/messages",
    body,
    header
  )
  .then((res) => console.log("sent successfully", res))
  .catch((err) => console.log("error while sending", err));

};

// ** template**

Welcome and congratulations!! This message demonstrates your ability to send a WhatsApp message notification from the Cloud API, hosted by Meta. Thank you for taking the time to test with us. {{1}}

here template is set and saved on meta’s website(attached screenshot below ) . now suppose i want to send user name in {{1}} how can i do it

whatsapp cloud api template page

I’m following the moralis tutorial to build an authentication and authorization system with moralis and reactJS https://docs.moralis.io/authentication-api/evm/how-to-authenticate-users-with-metamask-using-react. I get this error when i hit this route http://localhost:4000/verify. The code that creates this error is the following:

const { address, profileId } = (
      await Moralis.Auth.verify({
        message,
        signature,
        networkType: "evm",
      })
    ).raw;

This is the full code of the request:

const Moralis = require("moralis").default;

const express = require("express");
const cors = require("cors");
const cookieParser = require("cookie-parser");
const jwt = require("jsonwebtoken");

// to use our .env variables
require("dotenv").config();

const app = express();
const port = 4000;

app.use(express.json());
app.use(cookieParser());

// allow access to React app domain
app.use(
  cors({
    origin: "http://localhost:3000",
    credentials: true,
  })
);

const config = {
  domain: process.env.APP_DOMAIN,
  statement: "Please sign this message to confirm your identity.",
  uri: process.env.REACT_URL,
  timeout: 60,
};

app.post("/verify", async (req, res) => {
  try {
    const { message, signature } = req.body;

    const { address, profileId } = (
      await Moralis.Auth.verify({
        message,
        signature,
        networkType: "evm",
      })
    ).raw;

    const user = { address, profileId, signature };

    // create JWT token
    const token = jwt.sign(user, process.env.AUTH_SECRET);

    // set JWT cookie
    res.cookie("jwt", token, {
      httpOnly: true,
    });

    res.status(200).json(user);
  } catch (error) {
    res.status(400).json({ error: error.message });
    console.error(error);
  }
});

If you have any suggestion please let me know it.