Category: javascript

I’m working on an extension which can save a window tab and you can name the group.
So, the problem is if I save another grp and enter the same name how should i handle naming conflict. I’m looking for adding number suffix on the entered name.

The problem is at runtime i store all the data in dictionary and want to avoid any additional computation period to whole process.

So, I would appreciate any ideas on what to do.

User get a URL from me . before they get I want to run this URL in my webpage backend. after run I want to get the exact URL . I do this because first URL is redirected I want to get the redirected URL

I am trying do deploy a NX Monorepo Next.js project via Gitlab CI to Vercel.
Here is .yml file.

image: node:lts
stages:
  - build
  - web-test
  - deploy
cache:
  key: ${CI_COMMIT_REF_SLUG}
  paths:
    - node_modules/
build website:
  stage: build
  script:
    - npm install
    - npm i @nrwl/cli -g
    - nx run shop-wine:build
  artifacts:
    paths:
      - ./dist
test website:
  stage: web-test
  script:
    - npm install
    - npm i @nrwl/cli -g
    - nx run shop-wine:serve &
    - sleep 60
    - curl "http://localhost:4200" | grep -q "Welcome shop-wine"
deploy-to-vercel:
  stage: deploy

  variables:
    PREVIEW_URL: $CI_PROJECT_NAME-$CI_COMMIT_REF_SLUG.$VERCEL_USER.vercel.app
    VERCEL_ORG_ID: $VERCEL_ORG_ID
    VERCEL_PROJECT_ID: $VERCEL_PROJECT_ID

  rules:
    - if: $CI_COMMIT_TAG
    - if: $CI_COMMIT_BRANCH == 'main'

  environment:
    name: vercel/$CI_COMMIT_REF_NAME
    url: https://$PREVIEW_URL

  script:
    - npm i -g vercel
    - DEPLOYMENT_URL=$(VERCEL_ORG_ID=$VERCEL_ORG_ID VERCEL_PROJECT_ID=$VERCEL_PROJECT_ID vercel --confirm -t $VERCEL_TOKEN --scope $VERCEL_USER)
    - vercel alias set $DEPLOYMENT_URL $PREVIEW_URL -t $VERCEL_TOKEN --scope $VERCEL_USER 

There are no problems with build and web-test stages but when I get to manual deploy-to-vercel stage I am getting the following error from GitLab:

Here are the overrides on Vercel:

I am also using a plugin to automaticaly deploy to Vercel. As you can see it is deployed with success ahead of build test and manual deploy-to vercel stages.

But when it gets to manual deploy-to-vercel here is Vercel error. Let me know if I am doing something wrong.

I have called an api which gives me somewhat of a response like this,

manufacturers: [{,…}, {,…}, {,…}, {,…}, {,…}, {,…}, {,…}, {,…}, {,…}, {,…}]
0: {,…}
1: {,…}
2: {,…}
3: {,…}
4: {,…}
5: {,…}
6: {,…}
7: {,…}
8: {,…}
9: {,…}

then I stored this in an array, which is like this (in console this gives me a single element array, which has an array of 10 elements ):

const arrOfProducts = [];

  axios
      .get(url)
      .then((response) => {
        arrOfProducts.push(response.data.result.manufacturers);
        console.log(arrOfProducts); //in console this gives me a single element array, which has an array of 10 elements 
      })
      .catch((error) => {
        console.log(error);
      });

Then I tried to map it in my React component Like this:

<Box
      display='flex'
      flexDirection='row'
      alignItems='center'
      justifyContent='space-evenly'
    >
      {arrOfProducts.map((items,index)=>{
        return <Box key={index}>{items.city}</Box>  //it has multiple keys like city,name etc
      })}
    </Box>

which doesn’t render anything.
Please tell me what I am doing wrong. Also please can suggest a better approach than this to store an api.

I am trying to create various shapes in p5.js and fill them with specific patterns/drawings. Each shape will have a unique pattern generated using createGraphics. Since my different shapes won’t cover all of my base canvas, I am thinking of creating smaller-sized graphics for my patterns to improve performance. For example, if my base canvas is 1000 * 1000 pixels and my shape only takes 50 * 50 pixels and I want to fill it with a rectangular pattern, I do not see the point in creating a 1000 * 1000 pixels pattern graphics and masking it with my 50 * 50 pixels shape.

I am trying to work on a proof of concept using a single shape and pattern:

1. Determine the width and height of a rectangle that would contain my entire shape. Note that I know what my shape will look like before drawing it (pre-determined points to draw vertices).
2. Create my pattern graphics using the dimensions determined in 1.
3. Create my shape.
4. Mask the pattern graphics created in 2 with the shape created in 3.
5. Display the resulting image in my base canvas.

Please also note that a shape can be located at any position within my base canvas and that its position is determined by the first point used to draw the shape. The process will have to be repeated many times to generate the desired output.

function setup() {
  
    createCanvas(1000, 1000);
    background(200, 255, 255);
    
    var ptrn;
    var myShape;
    var msk;

    let ptrn_w = 1000;
    let ptrn_h = 1000;
    
    ptrn = createGraphics(ptrn_w, ptrn_h);
    ptrn.background(120, 0, 150);
    ptrn.fill(255, 255, 255);
    ptrn.noStroke();

    for (let i = 0; i < 500; i++){
        let x = random(0, ptrn_w);
        let y = random(0, ptrn_h);
        ptrn.rect(x, y, 20, 5);
    }

    msk = createGraphics(ptrn_w, ptrn_h);
    msk.beginShape();
    msk.vertex(250, 920);
    msk.vertex(300, 15);
    msk.vertex(325, 75);
    msk.vertex(350, 840);
    msk.endShape(CLOSE);
    
    ( myShape = ptrn.get() ).mask( msk.get() );
    
    image(myShape, 0, 0);
    
}

function draw() {  
    
}

The code listed above works since ptrn_w and ptrn_h are equal to the width and height of the base canvas. However, we are generating patterns/graphics for the whole canvas and a high % of that area is not used. If we are generating hundreds of different shapes with complex patterns, I can see how limiting the area in which we generate our patterns could be beneficial from a performance standpoint.

Changing ptrn_w and ptrn_h to ptrn_w = 100 and ptrn_h = 905 is problematic since the mask would be applied outside of the pattern graphics ptrn.

Is there a way to translate the position of ptrn so that it aligns with the position of msk? Would image(myShape, 0, 0) be problematic if we are zeroing the position of our image?

Another idea I had was to zero the position of my mask and reposition it when calling image(myShape, x_pos, y_pos).

What is the best approach to achieve such behavior? Any creative ideas are welcomed.

When I dynamically change button text which is a inline div, the screen reader cannot read aria-label which I add to button. How should I do to make screen reader read aria-label context.
My code is blew,

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="en-US" xml:lang="en-US">
<head>
    <title>
        Create custom shape button
    </title>
</head>
<body>  
    <p>
        <input name="name" class="b_input" id="b_input" value="butterfly"></input>
        <button class="b_create_text" onclick="Func()" width="100px" aria-label="Search for butterfly">click me</button>
    </p>
    <button class="b_button">
        <div class="b_button_label">@("show me more information")</div>
    </button>
    <script>
        function Func() {
            let dir="ltr";
            let inputB = document.getElementById("b_input");
            let inputText = inputB.value;
            let searchDescription = "Search for " + inputText;

            var sideBarLabelNodes = document.getElementsByClassName("b_button_label");
            if (sideBarLabelNodes.length == 1) {
                sideBarLabelNodes[0].textContent = searchDescription;
            }

            let el = document.getElementsByClassName('b_button');
            if(el.length == 1) {
                if(!!searchDescription) {
                    el[0].setAttribute("aria-label", text);
                }
            }
        }
    </script>
</body>

</html>

Thank you for your help.

I want to add table rows one after one… but when I add a new row it appears on the top of the list…

How to implement this in javascript

I’m creating a blog with Next.js and GraphCMS, and I have an ArticleList component that appears on multiple pages (e.g. on my homepage, under each article as a recommendation, etc.).

However, since the article list is being populated from my CMS, I’m using getStaticProps. And since I can’t use getStaticProps on the component-level, I’m re-writing the same getStaticProps function on every single page. Is there any way for me to easily reuse this code and share it across pages?

Would love to know if there are any best practices for this. Thanks!

I’m trying to write a regular expression that needs to return every tag name, attribute name, and attribute value

Here is the code example

Hello, My name is Jack, This is my selfie:
[img id='4' src="imageurl"]
Below is the quick-link to my profile
[profile username='jackisbest']

I need to get any text enclosed in [ ]

Also I need javascript regex to parse them and match them this way

> Match 1: img

> Match 2: id='4'
  Group 1: id
  Group 2: 4

> Match 3: src="imageurl"
  Group 1: src
  Group 2: imageurl

This is the regex I am using, but it can only match attributes and value

(S+)=["']?((?:.(?!["']?s+(?:S+)=|[>"']))+.)["']

Thanks!!

I’m working on a browser-based music app which has an onscreen keyboard. When I test the keyboard on my android phone in chrome browser it keeps randomly popping up some kind of search overlay. It doesn’t do it consistently. It doesn’t seem to be tied to long or short taps. It probably only happens about once every 20+ taps. I haven’t been able to figure out any pattern or gesture to predict when it’s going to happen yet.

I’m not even sure where it’s getting its search terms from as the keyboard does not contain text. Sometimes the terms seem to match some of my css class names. For example it once searched for “notation” which is a class name used in the notation area of my app, but not on the keyboard where I was tapping.

I have set the CSS for my keyboard to user-select: none but that did not resolve the issue.

I’m not sure if this is a feature in chrome on android, or if it is specific to my device, but I definitely don’t want random searches popping up for my users and I’m hoping there is a way I can prevent this from the app itself and not some device settings.

Is anyone familiar with this search “feature” and how to stop it from “helping”?

Thanks in advance!

Heroku says it successfully deployed my app but when I visit the page it says “application error” I tested my app in visual studio and it works fine there.
Here is my node.js code

//code based off of:
// https://medium.com/@dtkatz/3-ways-to-fix-the-cors-error-and-how-access-control-allow-origin-works-d97d55946d9

const express = require('express');
const request = require('request');

const app = express();
const apiKey = 'api-key';
const PORT = process.env.PORT || 5000;

app.use((req, res, next) => {
  res.header('Access-Control-Allow-Origin', '*');
  next();
});

if(process.env.NODE_ENV === 'production'){
    app.use(express.static('build'));
    app.get('*', (req, res) =>{
        req.sendFile(path.resolve(__dirname, 'build','index.html'))
    })
}

app.get('/getCoinInfo', (req, res) => {
  console.log('The request has been received!!')
  request(
    { url: 'https://pro-api.coinmarketcap.com/v1/cryptocurrency/listings/latest?CMC_PRO_API_KEY=' + apiKey},
    (error, response, body) => {
      if (error || response.statusCode !== 200) {
        return res.status(500).json({ type: 'error', message: err.message });
      }

      res.json(JSON.parse(body));
    }
  )
});


app.listen(PORT, () => console.log(`listening on ${PORT}`));

Here is also my Json File

{
  "name": "cryptoreactv2",
  "version": "0.1.0",
  "private": true,
  "proxy": "http://localhost:5000",
  "dependencies": {
    "@testing-library/jest-dom": "^5.16.2",
    "@testing-library/react": "^12.1.2",
    "@testing-library/user-event": "^13.5.0",
    "cors": "^2.8.5",
    "express": "^4.17.2",
    "react": "^17.0.2",
    "react-dom": "^17.0.2",
    "react-scripts": "5.0.0",
    "request": "^2.88.2",
    "serve": "^13.0.2",
    "web-vitals": "^2.1.4"
  },
  "scripts": {
    "startOLD": "node app",
    "startOLD": "react-scripts start",
    "dev": "react-scripts start",
    "start": "serve -s build",
    "build": "react-scripts build",
    "test": "react-scripts test --env=jsdom",
    "eject": "react-scripts eject",
    "heroku-postbuild": "npm run build"
  },
  "eslintConfig": {
    "extends": [
      "react-app",
      "react-app/jest"
    ]
  },
  "browserslist": {
    "production": [
      ">0.2%",
      "not dead",
      "not op_mini all"
    ],
    "development": [
      "last 1 chrome version",
      "last 1 firefox version",
      "last 1 safari version"
    ]
  },
  "devDependencies": {
    "nodemon": "^2.0.15"
  }
}

I tried looking at different tutorials but nothing appears to work. Again, my app works in visual studio but not in Heroku.

Trying to understand why the first eval expression doesn’t work, but the second does.

It is for a macro parser my values are “AM” and “ABC”.

eval('"AM\"!="ABC"');
> Error: Unexpected identifier

eval('"AM\\"!="ABC"');
> true

Can someone explain why you need four backslashes

console.log(eval('"AM\\"')); 
> "AM" 

In my node backend, this is how I send the error message to the front end:

catch (err) {
    res.status(500).json("UNEXPECTED ERROR. Please try again later.");
  }

How do I access the error message in the backend? Is this correct?

catch (err) {
  err.response.data;
}

having a problem when running two tests using this code, test 1 returns the whole array, test2 returns the appropriate index. (the point in the array in which it stops decreasing or increasing and starts the reverse) if there is only one sequence it should return -1

the test cases are
Input: [-4, -2, 9, 10]
Output: -1
Input: [5, 4, 3, 2, 10, 11]
Output: 3

for (i = 0; i < arr.length; i++) {
    while (arr[i] < arr[i + 1]) {
      i++;
      if (arr[i] < arr[i - 1]) {
        return -1
      }
      else if (arr[i] > arr[i + 1]) {
        return i
      }
    } while (arr[i] > arr[i + 1]) {
      i++;
      if (arr[i] > arr[i - 1]) {
        return -1
      } else if (arr[i] < arr[i + 1]) {
        return i
      }
    }
  }
  return arr;

}

I’m trying to create a web app, and I need to know the user input from form.

<form action="" method="get" class="settings">
    <div class="settings">
      <label for="length">length of character(s): </label>
      <input type="number" name="length" id="length" placeholder="5" required>
      <input type="submit" value="Change">
    </div>
  </form>

I need the form to run a js func foo()
so I assume that I need to put it

<form action="" method="get" class="settings">
              ↑

how do I get the value of id=”length” and use it in form action"foo()"?