Category: javascript

i am tring to create a office js addin, where i can choose a file from input form and then the activesheet will be moved to that workbook and saved, i can do this using vba and vsto addins, but i am not able to find a solution using Js addin? any source or help on this part

i can do this using vba and vsto addins, but i am not able to find a solution using Js addin? any source or help on this part

I am using a JS library in which I can pass 5 numbers through the API and I would like to pass 10.

I can accept some loss of precision.

Is there a clever way to do the following steps in JS:

• convert two f64 numbers to two f32 floats
• cast the two f32 to two i32
• pack the two numbers into an i64
• pass it through the API
• reverse the whole thing later

There wouldn’t be any difficulty to do that in C/C++, but I have no idea how to achieve that in JS.

Previousy, I was using line charts. but now, I want multiple data points on same X-Axis with tooltip, and according to HighCharts behaviour –

“In a line chart, by default, Highcharts will display the tooltip for the last data point when multiple data points share the same x-axis value.”

In order to achieve this behaviour, I have converted my chart to ‘Scatter’.

=> I have a scatter plot (data points connected with a series line). Page load consistently plots correctly, but updating with new series data brings unexpected data points in the graph.

Expected behaviour : Plot consistently when updating with new series data

Actual behaviour : Inconsistent data points show up depending on previous series data.

I have researched about this and found this links which shows this was the issue with HighCharts and a way to resolve the same:

1. https://github.com/highcharts/highcharts/issues/9184

2. https://github.com/highcharts/highcharts/issues/9037

But, I am not able to figured out how can i solve this with ReactJS. Here is my code: https://stackblitz.com/edit/react-9wsnd9?file=index.js

I stumbled upon an example of resetting state in the React docs: https://react.dev/learn/preserving-and-resetting-state#option-1-rendering-a-component-in-different-positions

I simplified my understanding of it into different sandboxes, and I can’t reconcile (pun not intended) what I see.

All of them feature the same implementation of Counter:

function Counter() {
  const [score, setScore] = useState(0);

  useEffect(() => {
    const i = setInterval(() => setScore((n) => n + 1), 200);
    return () => clearInterval(i);
  }, []);
  return <div>{score}</div>;
}

A Counter, once mounted, quickly counts up. If dismounted and remounted, the state is lost and reset to 0.

First, I wrap the Counter in a stateful container: Codesandbox

export default function Scoreboard() {
  const [bool, setBool] = useState(true);
  return (
    <div>
      {bool && <Counter />}
      {!bool && <Counter />}
      <button
        onClick={() => {
          setBool(!bool);
        }}
      >
        Switch
      </button>
    </div>
  );
}

When I click “Switch”, it resets the state of the Counter. I refactored it into something more “Obvious” which maintains this behavior: Codesandbox

export default function Scoreboard() {
  const [bool, setBool] = useState(false);
  return (
    <div>
      {bool ? (
        <>
          <div />
          <Counter />
        </>
      ) : (
        <>
          <Counter />
          <div />
        </>
      )}
      <button
        onClick={() => {
          setBool(!bool);
        }}
      >
        Switch
      </button>
    </div>
  );
}

My takeaway here is that regardless of the “Type” of component, if the position changes (from first to second), then the state is not carried over. So I wondered why I never encountered this before, given that it’s common to write components which have dynamic maps followed by stateful elements.

I wrote an example to test it: Codesandbox

export default function Scoreboard() {
  const [count, setCount] = useState(0);
  return (
    <div>
      <>
        {Array(count)
          .fill(0)
          .map(() => (
            <div>a</div>
          ))}
        <Counter />
      </>
      <button
        onClick={() => {
          setCount((n) => n + 1);
        }}
      >
        Switch
      </button>
    </div>
  );
}

Now very surprisingly, despite the position of Counter changing on every click to Switch, the state is never reset.

Why is this happening? Why is state not preserved in the first two examples, but is in the third.

In all cases, the only thing changing from the perspective of React is the position of the Counter relative to its siblings.

Footnote: In all cases, the key is unspecified and defaults to the index. Reminder: calling an element in JSX in separate positions does NOT give them separate identities. Otherwise the state would not be reset here: https://codesandbox.io/s/counterreset-1-identity-7rxrc2?file=/App.js:127-158

Additionally, I know that giving Counter a key would fix this. I don’t want to “fix” it, I want to understand why the behavior differs.

i have code with me ready and i can share with anyone. my problem is i wrote function in javascript for if two values does not match than generate error code but somehow this function does not generate error text. if anyone can look into this that that will be great.

Thanks

Vite.js clearly mentions this in their dependency pre-bundling section about generating single module when there are multiple internal modules (i.e. deep imports):

Vite converts ESM dependencies with many internal modules into a single module to improve subsequent page load performance.

Some packages ship their ES modules builds as many separate files importing one another. For example, lodash-es has over 600 internal modules! When we do import { debounce } from 'lodash-es', the browser fires off 600+ HTTP requests at the same time! Even though the server has no problem handling them, the large amount of requests create a network congestion on the browser side, causing the page to load noticeably slower.
By pre-bundling lodash-es into a single module, we now only need one HTTP request instead!

Now, I have a similar library that contains SVGs and using the vite-plugin-svgr, I am converting them to the React components. It has close to 1000 icons. However, when I load my app in the browser, it ends up sending 800 network requests (1 for each SVG icon). Ideally, it should have simply pre-bundled the entire package into a single module request but it doesn’t seem to be doing that.

As per documentation, I even specified the library in the optimization section:

export default defineConfig({
  // ... other config
  optimizeDeps: {
    include: [
      '@myorg/svg-icons/**/*.svg',
    ],
  }
});

But this does not have any effect! This causes my browser to slow down, specifically the network inspector on both Firefox and Chrome. Is there any way I can configure Vite.js to send a single module request for this library instead of 800 individual requests?

I am having this error while executing the code.

ERROR  TypeError: Cannot read property 'configure' of undefined, js engine: hermes
 LOG  Running "APP" with {"rootTag":11}
 ERROR  Invariant Violation: "APP" has not been registered. This can happen if:
* Metro (the local dev server) is run from the wrong folder. Check if Metro is running, stop it and restart it in the current project.
* A module failed to load due to an error and `AppRegistry.registerComponent` wasn't called., js engine: hermes

Here’s where I have used ‘configure in my App.js

/**
 * Sample React Native App
 * https://github.com/facebook/react-native
 *
 * @format
 * @flow strict-local
 */

import React from 'react';
import {SafeAreaView, StyleSheet, Text} from 'react-native';
import Navigation from './src/navigation';
import Amplify from 'aws-amplify';
import config from './src/aws-exports'

Amplify.configure(config)

const App = () => {
  // Auth.signOut();
  return (
    <SafeAreaView style={styles.root}>
      <Navigation />
    </SafeAreaView>
  );
};

const styles = StyleSheet.create({
  root: {
    flex: 1,
    backgroundColor: '#F9FBFC',
  },
});

export default App;

I am working with React and AWS-Amplify….I am getting the same error every time I execute the code..

The repo link : https://github.com/Sanjay567-coder/APP

Hello I am basing myself on this demo
https://storage.googleapis.com/tfjs-models/demos/segmentation/index.html?model=blazepose

It works perfectly when I move my hands and I am far way.

But when I tested it with the following script

const selfieSegmentation = new SelfieSegmentation({locateFile: (file) => {return `https://cdn.jsdelivr.net/npm/@mediapipe/selfie_segmentation/${file}`;}});
    selfieSegmentation.setOptions({
      modelSelection: 1,
      effect: 'mask',
      selfieMode: true,
    });
    selfieSegmentation.onResults(onResults);

function onResults(results) {
      console.log(results);
      canvasCtx.save();
      canvasCtx.clearRect(0, 0, canvasElement.width, canvasElement.height);


      canvasCtx.drawImage(results.segmentationMask, 0, 0,canvasElement.width, canvasElement.height);
    
      canvasCtx.globalCompositeOperation = 'source-out';
      //canvasCtx.fillStyle = "#00FF00";
      canvasCtx.fillRect(0, 0, canvasElement.width, canvasElement.height);


      canvasCtx.globalCompositeOperation = 'destination-over';
      canvasCtx.drawImage(results.image, 0, 0, canvasElement.width, canvasElement.height);
      canvasCtx.globalCompositeOperation = 'destination-atop';
      canvasCtx.drawImage(results.segmentationMask, 0, 0, canvasElement.width, canvasElement.height);
      

    
      canvasCtx.restore();
    }

It doesnt work as good. When I move my hands around they become transparent not like the demo. How can I set the visualization settings that are on the demo such as
foregroundThreshold, Maskopacity and Maskblur?

I wonder how I can define some dot function in js like .toupperCase that can call on a string or object without getting any parameters. For example I want to define a function on a string that calls a several function itself like

let ex = "hi .this is  &$234234 a test @#";
let tmp = ex.textformating();

String.prototype.textformating = function (){
    return this.replace(/[^a-z0-9 ]/gi, '  ').trim();
}

i am kinda new to all of this, i started learning JS one week ago but i couldnt find anything about this. So there’s a user in my Discord that is regularly posting CP, even though i banned him 500 times, he’s using VPN and i wanted my bot to remove specific attachments that are sent into a channel. As an example any type of video file extension. I tried this

 if (msg.channel.id == '987356719015424130') { // Valiate a channel

        const attachments = (msg.attachments).values(); // Get list of attachments
        const attachment = attachments[0]; // Take the first attachment

        if (msg.content) return msg.delete() // Delet the message if it has conetnt

        if (attachments.length !== 0) {
            const nameArray = attachment.name.split('.'); //Split the name 
            const attEx = nameArray[nameArray.length - 1] //Grap the last value of the array.
            if (attEx == "mp4" || attEx == "Or what ever fromat you want") {
                // Note this doesn't check the file it check the format of the file.

That’s a code i found here too, but it does not work at all, please help me with it

Described up there, i tried anything but i am kinda new to it so…

I’ve built a static website which at times uses a lot of different javascript functions to make it quite interactive and such.

I developed it on a powerful PC which never lagged (as in dropping frames), when loading and using the site. However it came to my attention from my friend that the website lags a lot specifically on the “about” section of the page. I recreated that on my laptop and went to try fixing the problem, but I have no idea how to do so. At first I thought it was a threejs iframe that I added, but removing that seemed not to fix the issue at hand.

I’ve used google to try and figure out what’s going wrong. I’ve compared the performance tab results of the lagging page (first image) with a normal page (second image). It also doesn’t look like I’m leaking any memory (I checked task manager from google and its on par with most other websites).

It looks like animation is not running as often as it should, so maybe that’s it? I drop a lot of frames and even scrolling is laggy, but I don’t know how to find the exact culprit causing the problem. Is it possible to maybe look for a certain portion of js which might be causing this?

If anyone can help me diagnose the problem, please let me know. The page does not load into google’s PageSpeed Insights as well so I don’t know what’s wrong.

Here is the laggy page: https://nanomotions.org/about.html

and a normal page for comparison: https://nanomotions.org/index.html

I’m attempting to use the same setup as found at this site: https://www.micski.dk/2023/01/18/how-to-show-playing-cards-in-wordpress/

When loading that page on a mobile device, the images appear to re-size automatically and do not wrap like they do on my site, which can be seen here: https://spectrefaxpoker.com/2023/05/01/session-1-33-95/

I’m sure I’m overlooking some simple CSS or something. Can anyone help me out?

Thank you.

Tried multiple CSS edits but couldn’t seem to get the images to stop wrapping on mobile.

I was asked to create a shareholder structure chart in my react app. It should look like this:

I was wondering what would be the best strategy to handle this from a data sctructure point of view? My initial thought would be to create an array of arrays, but then I wonder how I can connect the different levels with each other?

I’m creating a website which is just one page with a navbar that uses fragment links to scroll to different sections of the page. I want the navbar to change color when the section it scrolls to appears on the user’s screen. Is it possible to do this?

The default colors are in the :root and the colors I want it to change to are in #about at the bottom of the css code.

@import url("https://use.typekit.net/cpb3gji.css");

:root {
  --text: #fff;
  --background: #9A031E;
  --nav-bg: #321325;
  --nav-btn: #CB793A;
  --nav-btn-hov: #FCDC4D;
  --nav-btn-shadow: #5F0F40;
}

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  transition: 0.3s ease all;
  list-style-type: none;
  font-family: "DINosaur", sans-serif;
}

body {
  background: var(--background);
  color: var(--text);
}

a {
  text-decoration: none;
  color: var(--text) !important;
}

nav {
  padding: 1rem;
  background-color: var(--nav-bg);
  display: flex;
  align-items: center;
}

nav ul {
  display: flex;
  align-items: center;
}

nav ul a li {
  border-radius: 5px;
  padding: 1rem;
  margin-right: 1rem;
  --shadow1: var(--nav-btn-shadow);
  --shadow2: #000;
  box-shadow: 2px 2px 0 var(--shadow1), 4px 4px 0 var(--shadow1), 6px 6px 0 var(--shadow1), 8px 8px 0 var(--shadow1);
  background: var(--nav-btn);
}

nav ul a img {
  width: 10rem;
}

nav ul a li:hover {
  background: var(--nav-btn-hov);
  color: #fff !important;
  box-shadow: 2px 2px 0 var(--shadow1), 4px 4px 0 var(--shadow1), 6px 6px 0 var(--shadow1), 8px 8px 0 var(--shadow1), 10px 10px 10px var(--shadow2), 12px 12px 10px var(--shadow2);
  transform: translate(-4px, -4px);
}

nav ul a:nth-of-type(1):hover {
  background: none !important;
}

nav ul a:nth-of-type(1) {
  margin-right: 3rem;
}

main section {
  margin-top: 3rem;
  background: var(--accent);
  border-top: solid 3px #000;
  padding: 1rem;
}

main section h1 {
  transform: translateY(-3rem);
  color: #fff;
  text-shadow:
  -1px -1px 0 #000,  
   1px -1px 0 #000,
   -1px 1px 0 #000,
    1px 1px 0 #000;
    font-size: 2.5rem;
    width: 100%;
    text-align: left;
}

main section p {
  font-size: 1.7rem;
  text-align: center;
}

main section:nth-of-type(1) .img-grid {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
}

main section:nth-of-type(1) .img-grid img {
  width: 100%;
}

.back-navigation {
  position: fixed;
  font-size: 2rem;
  user-select: none;
  animation-duration: 0.3s;
  animation-timing-function: linear;
  animation-iteration-count: infinite;
  font-family: "amatic-sc", sans-serif;
  right: 0;
  bottom: 0;
}

.back-navigation:hover {
  animation-name: wobble;
}

@keyframes wobble {
  0% {
    rotate: -5deg;
  }
  50% {
    rotate: 5deg;
  }
  100% {
    rotate: -5deg;
  }
}

.splide img {
  width: 100%;
}

main section {
  display: flex;
  align-items: center;
  flex-direction: column;
}

.splide {
  width: 60%;
}

#about {
  --text: #000;
  --background: #FFE74C;
  --nav-bg: #FF5964;
  --nav-btn: #35A7FF;
  --nav-btn-hov: #FFFFFF;
  --nav-btn-shadow: #38618C;
}

<nav>
  <ul>
    <a href="#about"><li>About</li></a>
    <a href="#solution"><li>Our solution</li></a>
    <a href="#how"><li>How it works</li></a>
    <a href="#use"><li>How to use</li></a>
  </ul>
</nav>
<main>
  <section id="about">
    <h1>Heading</h1>
    <p>
      Blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah
    </p>
  </section>
</main>

Is it possible to achieve this in vanilla js?

I have the following Node component which renders a button element for anchoring an MUI Popper element:

type Props = {
  children?: React.ReactElement;
};

const Node = ({ children }: Props): React.ReactElement => {
  const [anchor, setAnchor] = React.useState(null);
  return (
    <div>
      <button type="button" onClick={(e) => setAnchor(e.currentTarget)}>Anchor</button>
      <Popper open={Boolean(anchor)} anchorEl={anchor}>
        <ClickAwayListener onClickAway={() => setAnchor(null)}>
          <div>{children}</div>
        </ClickAwayListener>
      </Popper>
    </div>
  );
};

I have the following App component which renders multiple nested Node elements:

export const App = (): React.ReactElement => {
  return (
    <Node>
      <Node>
        <Node />
      </Node>
    </Node>
  );
};

The application behaves as expected: opening all the nested Popper elements then closing the root Popper element and reopening it does not also reopen its immediate Popper child.

Full code available here: https://stackblitz.com/edit/stackblitz-starters-vcpsvr?file=src%2FApp.tsx

Now here is an alternative version of the App component which inlines the Node components:

export const App = (): React.ReactElement => {
  const [anchorA, setAnchorA] = React.useState(null);
  const [anchorB, setAnchorB] = React.useState(null);
  const [anchorC, setAnchorC] = React.useState(null);
  return (
    <div>
      <button type="button" onClick={(e) => setAnchorA(e.currentTarget)}>Anchor</button>
      <Popper open={Boolean(anchorA)} anchorEl={anchorA}>
        <ClickAwayListener onClickAway={() => setAnchorA(null)}>
          <div>
            <button type="button" onClick={(e) => setAnchorB(e.currentTarget)}>Anchor</button>
            <Popper open={Boolean(anchorB)} anchorEl={anchorB}>
              <ClickAwayListener onClickAway={() => setAnchorB(null)}>
                <div>
                  <button type="button" onClick={(e) => setAnchorC(e.currentTarget)}>Anchor</button>
                  <Popper open={Boolean(anchorC)} anchorEl={anchorC}>
                    <ClickAwayListener onClickAway={() => setAnchorC(null)}>
                      <div></div>
                    </ClickAwayListener>
                  </Popper>
                </div>
              </ClickAwayListener>
            </Popper>
          </div>
        </ClickAwayListener>
      </Popper>
    </div>
  );
};

In this case, the application does not behave as expected: opening all the nested Popper elements then closing the root Popper element and reopening it also reopens its immediate Popper child and the child is misplaced.

Why?

Full code available here: https://stackblitz.com/edit/stackblitz-starters-bfctmx?file=src%2FApp.tsx