I have a CSV file that contains:
Name of Company; Complete Address(street name zip code etc)
And some other data.

I need to somehow extract a phone number in an automatic way since there are 30k rows.
I could search it up on google and get the usual company banner from google where there is the phone number but since there are 30k records I wanted to automate it also for future uses.

At first sight I thought of using Google API with Python/JavaScript/jquery and search up the place and retrieve from the JSON the details of the company with the phone number.
By for example doing an https request or a curl:

https://maps.googleapis.com/maps/api/place/findplacefromtext/json?fields=formatted_address%2Cname%2Crating%2Copening_hours%2Cgeometry&input=AGENZIA+DI+FORMAZIONE+PROFESSIONALE+DELLE+COLLINE+ASTIGIANE+SIGLA+BILE+A.F.P.+COLLINE+ASTIGIANE+S.C.R.L.REGIONE+SAN+ROCCO+74+14041+AGLIANO+TERME+-+AT&inputtype=textquery&key="YOUR_API_KEY"

But the results are not what I’ve expected:

{
   "candidates" : 
   [
      {
         "formatted_address" : "Regione S. Rocco, 74, 14041 Agliano AT, Italia",
         "geometry" : 
         {
            "location" : 
            {
               "lat" : 44.8032127,
               "lng" : 8.248341099999999
            },
            "viewport" : 
            {
               "northeast" : 
               {
                  "lat" : 44.80456222989272,
                  "lng" : 8.24969852989272
               },
               "southwest" : 
               {
                  "lat" : 44.80186257010728,
                  "lng" : 8.246998870107277
               }
            }
         },
         "name" : "Agenzia di Formazione Professionale delle Colline Astigiane",
         "opening_hours" : 
         {
            "open_now" : false
         },
         "rating" : 4.6
      }
   ],
   "status" : "OK"
}

Or at least it seemed it found the place but not the info I need.

I learned on this Site
Google Sheets IMPORTDATA for xlsx files How to importdata from xlsx to Google Sheet

Someone worked.
[e.g.]https://www.cmu.edu/blackboard/files/evaluate/tests-example.xls

But someone doesn’t worked.
Show error message 【Exceeded maximum execution time (line 0)】
[e.g]www1.hornington.com/quotation/msi.xlsx
https://www.cmu.edu/blackboard/files/evaluate/tests-example.xls

How can I solve this problem?
Sorry, I don’t know programming language.
Hope someone can help me.
Thank you, thank you again.

I’m trying to implement an additional newsletter subscription option in the Shopware Storefront, where users can opt-in or opt-out of a secondary newsletter. I’ve created or modified the following files to handle this functionality:

1. newsletter.html.twig: Extends the base newsletter template and adds a new checkbox form.
2. handleAdditionalOptionSubmission() in controller: Handles the form submission via a POST request to the frontend.account.additionalOption route.
3. index.js: Adds an event listener to the form and makes the AJAX request.

When I tick the checkbox and submit the form, I’m getting an AccessDeniedHttpException with the message “PageController can’t be requested via XmlHttpRequest.”
Here’s the relevant code:

newsletter.html.twig

{% sw_extends '@Storefront/storefront/page/account/newsletter.html.twig' %}
{% block page_account_overview_newsletter_content_form %}
    {{ parent() }}
    <form name="additionalOptionForm"
          method="post"
          action="{{ path('frontend.account.additionalOption') }}"
          data-form-auto-submit="true"
          data-form-auto-submit-options='{"useAjax": true, "ajaxContainerSelector": ".js-additional-option-wrapper"}'>
        {# ... form content ... #}
    </form>
{% endblock %}

function in controller

#[Route(path: '/account/newsletter/additional-option', name: 'frontend.account.additionalOption', methods: ['POST'], defaults: ['_loginRequired' => true, '_storefront' => true])]
public function handleAdditionalOptionSubmission(Request $request, RequestDataBag $dataBag, SalesChannelContext $context, CustomerEntity $customer): Response {
    // ... controller logic ...
}

index.js

document.querySelectorAll('form[name="additionalOptionForm"]').forEach(form => {
    form.addEventListener('submit', this.additionalOptionFormSubmit.bind(this));
});

additionalOptionFormSubmit(e) {
    e.preventDefault();
    var form = e.target;
    var data = new FormData(form);
    data.append('additionalOption', document.querySelector('#newsletterAdditionalOption').checked ? 'agreed' : 'not-asked');
    data.append('csrf_token', document.querySelector('meta[name="csrf-token"]').getAttribute('content'));
    this._client.post(form.getAttribute('action'), data, (response) => {
        this.handleFormResponse(response);
    });
    return false;
}

Where am I going wrong, and how can I fix the AccessDeniedHttpException issue when submitting the form via AJAX?

Using connected accounts on Stripe, and using javascript,
I need to show user the total amount that he will pay for an invoice from a net amount.
For example, user has an invoice of 1500$ to pay, and I need to include Stripe fee and the application fee (my fee), and I need to show user that he will be charged 1500$ plus 68.68$ in fees which makes it a total of 1568.68$. I need this amount to match exactly what Stripe will charge to process the payment.

For that, I currently have this small script:

    const stripeCommissionRate = 0.029;
    const stripeFixedFee = 0.30;
    const myFeeRate = 0.0146;

    function calculateFees(netAmount) {
      // Calculate gross amount to do calculations (reverse engeneering from Stripe's math) 
      let grossAmount = (netAmount + stripeFixedFee) / (1 - stripeCommissionRate - myFeeRate);

      // Calculate individual fees
      let stripeFee = stripeFixedFee + (grossAmount * stripeCommissionRate);
      let myFee = grossAmount * myFeeRate;

      // Round individual fees
      stripeFee = parseFloat(stripeFee.toFixed(2));
      myFee = parseFloat(myFee.toFixed(2));

      // Calculate total fees
      let totalFees = stripeFee + myFee;

      // Calculate final gross amount from rounded amounts
      grossAmount = netAmount + stripeFee + myFee;

      return {
        grossAmount: grossAmount,
        stripeFee: stripeFee,
        myFee: myFee,
        totalFees: totalFees,
      };
    }

However, this is not matching all the time. There’s got to be some special roundings or another way to do the math and that is the help I’m hoping to find here.

Examples:

Working example 1

For a net amount of 1500.00$, that returns
grossAmount: 1568.69
stripeFee: 45.79,
myAppFee: 22.90,
totalFees: 68.69

Working example 2

For a net amount of 1000.00$, that returns
grossAmount: 1045.90
stripeFee: 30.63,
myAppFee: 15.27,
totalFees: 45.90

Failing example 1

For a net amount of 49.99$, that returns
grossAmount: 52.58 <– on Stripe is 52.59
stripeFee: 1.83,
myAppFee: 0.77,
totalFees: 2.59 <– on Stripe is 2.60

Failing example 2

For a net amount of 299.98$, that returns
grossAmount: 313.97 <– on Stripe is 313.98
stripeFee: 9.41, <– on Stripe is 9.40
myAppFee: 4.58,
totalFees: 13.99 <– on Stripe is 13.98

Whenever I try to adjust something to fix one failing example, it ends up breaking something that is now working.

I’m building a portfolio website where I want to show or hide different sections (like About, Projects, Contact) based on the navigation link the user clicks. I want to avoid including all sections in the HTML at once, and instead, manage this dynamically.

How can I achieve this using JavaScript? Should I load the content of each section from external files when a navigation link is clicked, or is there a better approach?

Any example code or guidance would be appreciated!

I used document. query Selector to hide and show elements by toggling a hidden class, but this only works if all sections are preloaded in the HTML.
I attempted to use the fetch API to load content dynamically from separate files, but it felt slower and didn’t seem efficient.

I am doing data scraping, and it requires submitting a form on my target website. but there is a captcha, how do I handle the captcha? when I want to do scraping by directly doing endpoint counting using ajax

noting to excpext, help meeeee

I am working on an application that allows upload of HTML files. I know it’s usually a bad idea, but it’s not up to me. Say a user uses Burp Suite to change the Content-Type from “text/plain” to “text/html” and changes the Payload to “alert(document.domain)”. I would want to encode this, but do not of course want to do that for legitimate files. How can I distinguish between good HTML and HTML with XSS attacks?

StoreModule.forRoot({
    counter: counterReducer
})

In above code when I am importing reducer it is giving me error like assignable type ‘readonly any[] | Type’.

I can not importing counterReducer successfully.

I have checked solutions from chat GPT and and google but, I cannot get any solution.

i cant get the video game cover image from my html document to be displayed when the game title is displayed using my javascript function. im not sure what to do and couldnt find anything similar enough to my problem when googling for help.

here is my Html:

    <!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <link rel="stylesheet" href="style.css" />
    <title>Game Generator</title>
  </head>
  <body>
    <header id="header">
      <div id="title">Video Game Generator</div>
    </header>
    <section>
      <div id="container">
        <img src="images/helldivers2-cover.avif" id="game0" />
        <img src="images/skyrim-cover.jpg" id="game1" />
        <img src="images/cyberpunk2077-cover.png" id="game2" />
        <img src="images/witcher3-cover.jpg" id="game3" />
        <img src="images/gtav-cover.png" id="game4" />
        <img src="images/starfield-cover.webp" id="game5" />
        <img src="images/dbd-cover.avif" id="game6" />
        <img src="images/arkse-cover.jpg" id="game7" />
        <img src="images/acv-cover.jpg" id="game8" />
        <img src="images/rdr2-cover.jpg" id="game9" />
        <ul id="game"></ul>
      </div>
      <div id="btn">
        <button onclick="generateGames()">Generate</button>
      </div>
    </section>

    <script src="script.js"></script>
  </body>
</html>

here is my Css:

    @import url('https://fonts.googleapis.com/css?family=Poppins:200,300,400,500,600,700,800,900&display=swap');

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  font-family: 'Poppins', sans-serif;
  background-color: rgb(37, 37, 37);
}

#header {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 150px;
}

#title {
  color: white;
  font-size: 50px;
}

#container {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 550px;
}

#game0 {
  display: none;
  padding-top: 50px;
  height: 500px;
  width: 300px;
}

#game1 {
  display: none;
  padding-top: 50px;
  height: 500px;
  width: 300px;
}

#game2 {
  display: none;
  padding-top: 50px;
  height: 500px;
  width: 300px;
}

#game3 {
  display: none;
  padding-top: 50px;
  height: 500px;
  width: 300px;
}

#game4 {
  display: none;
  padding-top: 50px;
  height: 500px;
  width: 300px;
}

#game5 {
  display: none;
  padding-top: 50px;
  height: 500px;
  width: 300px;
}

#game6 {
  display: none;
  padding-top: 50px;
  height: 500px;
  width: 300px;
}

#game7 {
  display: none;
  padding-top: 50px;
  height: 500px;
  width: 300px;
}

#game8 {
  display: none;
  padding-top: 50px;
  height: 500px;
  width: 300px;
}

#game9 {
  display: none;
  padding-top: 50px;
  height: 500px;
  width: 300px;
}

#game {
  color: white;
  font-size: 25px;
  padding: 50px;
}

#btn {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 250px;
} 

button {
  height: 100px;
  width: 300px;
  font-size: 35px;
  font-weight: 600;
  cursor: pointer;
  border: 2px solid black;
  border-radius: 25px;
}

here is my Javascript:

   //list of games to generate//

const games = [
  'Helldivers 2',
  'The Elder Scrolls V: Skyrim Special Edition',
  'Cyberpunk 2077',
  'The Witcher 3: Wild Hunt',
  'Grand Theft Auto V',
  'Starfield',
  'Dead By Daylight',
  'Ark: Survival Evolved',
  'Assassins Creed Valhalla',
  'Red Dead Redemption 2',
];

//list of games are stored in this//

const usedGames = new Set();

//getting the game element//

const gameElement = document.getElementById('game');

//function to make the games generate randomly//

function generateGames() {

  //if the index of the listed games exceeds the length of the set, then clear the set and start again//

  if (usedGames.size >= games.length) {
    usedGames.clear();
  }

   //if the set still has a game left, continue to generate//

   while (true) {
    const randomGame = Math.floor(Math.random() * games.length);
    if (usedGames.has(randomGame)) continue;

    //set the html element of game to = the value of a random game//

    const game = games[randomGame];
    gameElement.innerHTML = game;
    usedGames.add(randomGame);
    break;
  }
}

//function to set the cover of the game to be visible when = to the title of the game//

function cover() {
  const game0 = document.getElementById('game0');
  if (games == games[0]) {
    game0.style.display = '';
  }
}

at the moment i only have the first game in the array set up to be displayed but it wont show the cover when the title is generated. any ideas as to what im doing wrong?

its supposed to display the video game cover when the randomGame index is equal to game0 which is the first game in the array. so when the button is clicked and it finally gets to index 0, it should display ‘Helldivers 2’ and the games cover image.

“I am trying to create a JavaScript function that fetches data from an API and returns the result. However, when i call the function, it returnd undefined.
show me the errors in code,and if possible give me the explanation aswell

I’m trying to implement a Facebook share button in my Next.js application with a pre-filled Arabic hashtag, but I’m running into an issue.

Here is the code I’m using:

const handleShare = (e) => {
  e.preventDefault();
  if (score) {
    const shareParams = new URLSearchParams({
      u: shareUrl,
      hashtag: "#هاشتاگێکی_دیاریکراو",
    }).toString();

    const fbShareUrl = `https://www.facebook.com/sharer/sharer.php?${shareParams}`;

    // Open share dialog
    window.open(
      fbShareUrl,
      "_blank",
      "width=600,height=400,left=" +
        (window.innerWidth - 600) / 2 +
        ",top=" +
        (window.innerHeight - 400) / 2
    );
  }
};

The issue is that when I click the hashtag in Facebook after sharing the post, the URL of the hashtag changes. For example, this is what I get:

http://facebook.com/hashtag/هاشتاگێکی_دیاریکراو?__eep__=6

The added ?__eep__=6 parameter breaks the hashtag. If I manually remove ?eep=6 from the URL in the browser, the hashtag works correctly.

I am using faceapi.js in a react project. While importing, the console gives some warnings and error of files missing from the node modules folder.
As I am a beginner I am not sure about using the same in my react project and can use it for production or not!

Errors

WARNING in ./node_modules/face-api.js/build/es6/xception/TinyXception.js

Module Warning (from ./node_modules/source-map-loader/dist/cjs.js):

Failed to parse source map from 'D:\D\Git\Temp\face-api\node_modules\face-api.js\src\xception\TinyXception.ts' file: Error: ENOENT: no such file or directory, open 'D:\D\Git\Temp\face-api\node_modules\face-api.js\src\xception\TinyXception.ts'

WARNING in ./node_modules/face-api.js/build/es6/xception/extractParams.js

Module Warning (from ./node_modules/source-map-loader/dist/cjs.js):

Failed to parse source map from 'D:\D\Git\Temp\face-api\node_modules\face-api.js\src\xception\extractParams.ts' file: Error: ENOENT: no such file or directory, open 'D:\D\Git\Temp\face-api\node_modules\face-api.js\src\xception\extractParams.ts'

WARNING in ./node_modules/face-api.js/build/es6/xception/extractParamsFromWeigthMap.js

Module Warning (from ./node_modules/source-map-loader/dist/cjs.js):

Failed to parse source map from 'D:\D\Git\Temp\face-api\node_modules\face-api.js\src\xception\extractParamsFromWeigthMap.ts' file: Error: ENOENT: no such file or directory, open 'D:\D\Git\Temp\face-api\node_modules\face-api.js\src\xception\extractParamsFromWeigthMap.ts'

Also I made a build and checked. It was working as required. But I am not sure whether to be used in production or not.

Looking for guidance!
Thanks in advance!

The following sample code has two callbacks:

let e = 0, r = 0;
new ResizeObserver(() => {
  console.log('resized from observer', r++)
}).observe(document.documentElement);
window.addEventListener('resize', () => {
  console.log('resized from event', e++);
});

Both of them run the same number of times and at the same timestamps. As an example, the following image shows the output I get in Chrome 130 DevTools when resizing a window very quickly:

(Note: the values are off by one because the ResizeObserver runs once on initialisation, before any resize happens)

Now, it is a well known claim that the ResizeObserver is a more efficient approach to observe resizes. This claim is almost always discussed in the context of layout thrashing – where we read/write layout properties from inside the callback. However, that claim is not applicable to the above case.

Similarly, there is previous discussion about ResizeObserver being more efficient to EventTarget APIs, but it is in the context of a <div> HTML element, not the Window object itself. So, I do not think that it is applicable in this case.

Question: is the ResizeObserver really more efficient compared to the Window ‘resize’ event in the case of callbacks that don’t have layout recalculation (like the one above)? If yes, how can we verify that using code?

Given the above sample output, I think both are equally efficient. But I am not confident about it.

Here’s my old .eslintrc

{
  "env": {
    "browser": true,
    "es6": true,
    "node": true
  },
  "extends": [
    "eslint:recommended",
    "plugin:react/recommended",
    "plugin:@typescript-eslint/eslint-recommended",
    "plugin:@typescript-eslint/recommended",
    "plugin:import/errors",
    "plugin:import/warnings"
  ],
  "parser": "@typescript-eslint/parser",
  "settings": {
    "import/resolver": {
      "node": {
        "extensions": [".js", ".jsx", ".ts", ".tsx"]
      },
      "alias": {
        "map": [
          ["@renderer", "./src/renderer"],
          ["@components", "./src/renderer/components"],
          ["@common", "./src/common"],
          ["@main", "./src/main"],
          ["@src", "./src"],
          ["@misc", "./misc"],
          ["@assets", "./assets"]
        ],
        "extensions": [".js", ".jsx", ".ts", ".tsx"]
      }
    },
    "react": {
      "version": "detect"
    }
  },
  "rules": {
    "react/prop-types": "off",
    "@typescript-eslint/no-var-requires": "off"
  }
}

Here’s my new eslint.config.mjs

// eslint.config.js
import globals from 'globals'
import eslintPluginReact from 'eslint-plugin-react'
import typescriptEslint from '@typescript-eslint/eslint-plugin'

const filesList = ['src/**/*.js', 'src/**/*.jsx', 'src/**/*.ts', 'src/**/*.tsx']

export default [
  'eslint:recommended',
  /*
  {
    files: filesList,
    plugins: {
      react: eslintPluginReact
    },
    rules: {
      ...eslintPluginReact.configs.recommended.rules
    }
  },
  */
  typescriptEslint.recommended,
  {
    files: filesList,
    languageOptions: {
      ecmaVersion: 2022,
      sourceType: 'module',
      globals: {
        ...globals.browser,
        ...globals.node
      }
    },
    extends: [
      'eslint:recommended',
      'plugin:react/recommended',
      'plugin:@typescript-eslint/eslint-recommended',
      'plugin:@typescript-eslint/recommended',
      'plugin:import/errors',
      'plugin:import/warnings'
    ],
    parser: '@typescript-eslint/parser',
    settings: {
      'import/resolver': {
        node: {
          extensions: ['.js', '.jsx', '.ts', '.tsx']
        },
        alias: {
          map: [
            ['@renderer', './src/renderer'],
            ['@components', './src/renderer/components'],
            ['@common', './src/common'],
            ['@main', './src/main'],
            ['@src', './src'],
            ['@misc', './misc'],
            ['@assets', './assets']
          ],
          extensions: ['.js', '.jsx', '.ts', '.tsx']
        }
      },
      react: {
        version: 'detect'
      }
    },
    rules: {
      'react/prop-types': 'off',
      '@typescript-eslint/no-var-requires': 'off'
    }
  }
]

eslint doesn’t like it:

“TypeError: Config (unnamed): Unexpected non-object config at user-defined index 0.”

to any external configuration that used to be inside “extends”.

I guess that I miss something but there’s neither documentation nor examples how to do it.

I am using ChartJs v3.9.1 in my Angular project. I need to create a timeline and I am trying to create it using horizontal bar chart.

I did horizontal bar chart with time axes but I have a json data. I know I can set value to axes using ‘parsing’ object like below.

 parsing: {
              xAxisKey: 'startTime',
              yAxisKey: 'ticketId'
            }

But I need to set time range to x axes like [startTime, endTime].
How to set an time array to axes by parsing? Is it possible?

data:any =  [
   {
     "id" : "1",
     "startTime" : "2024-11-19T12:00:00+03:00",
     "endTime" : "2024-11-19T18:00:00+03:00",
     "user" : "person1"
      .
      .
    },
    {
      "id" : "2",
      "startTime" : "2024-11-19T15:00:00+03:00",
      "endTime" : "2024-11-19T17:00:00+03:00",
      "user" : "person2"
       .
       .
    },
    .
    .
]

this.chart = new Chart("canvas", {
      type: 'bar',
      data: {
        datasets: [{
          data: this.data
        }]
      },
      options: {
        indexAxis: 'y',
        scales: {
          xAxis: 
                {
                    type: 'time',
                    time: 
                    {
                        unit: 'second',
                        displayFormats: { second: 'HH:mm' }
                        
                    },
                    max: '2024-11-19 18:43:53',
                    min: '2024-11-19 08:43:53',
                    stacked: true
                }
        },
        parsing: {
          xAxisKey: ??,
          yAxisKey: 'id'
        }
      }
  });