Category: javascript

I am trying to have a table update in a react application but it doesn’t update when the variable that it depends on changes, this is where I create the state, It is an array of objects.

const [leaderboard, setLeaderboard] = useState([]);

This is how I alter it:

setLeaderboard(rankings)

This is the table section within my return

<table>
      <tbody>
        <tr>
          <th>Rank</th>
          <th>Name</th>
          <th>Stars</th>
          <th>Percentage</th>
        </tr>
        {leaderboard.map((val, key) => {
          return (
            <tr key={key}>
              <td>{key+1}</td>
              <td>{val.name}</td>
              <td>{val.stars}</td>
              <td>{val.percentage}</td>
            </tr>
          )
        })}
      </tbody>
    </table>

I tried making another state that was an int in case this was being caused due to it being an array but that didnt help.

The table just remains empty even though the rankings variable has data. If I put the data that is in the rankings variable into the constructor the table looks as intended so I don’t think that the data is a problem

I’m working on generating and inserting data into the existing pdf, and applying font size and font family to the text field of PDF.
this is my code snippet to attach the font.

const { PDFDocument, StandardFonts } = require("pdf-lib");
const fontFile = join(__dirname, '../ARIALBD.TTF')
const { join } = require("path");
// array of forms with schema
      for (const iterator of forms) {
          let formName = iterator.url;
          const source = join(__dirname, `../public/forms/${formName}.pdf`);
          const pdfData = fs.readFileSync(source);
          const pdfDoc = await PDFDocument.load(pdfData);
          pdfDoc.registerFontkit(fontkit);
          const fontBytes = fs.readFileSync(fontFile);
          let font = await pdfDoc.embedFont(fontBytes);

          let formSchema = pdfDoc.getForm();
          const fields = formSchema.getFields();
          fields.forEach((field) => {
          if (field.constructor.name == "PDFTextField") {
             textField = formSchema.getTextField(field.getName())
             textField.setText("sample text")
             textField.acroField.setDefaultAppearance('/F3 0 Tf 0 g')
          }
       });
      const pdfBytes = await pdfDoc.save();
      let des = destination + `${docName.join("_")}.pdf`;
      fs.writeFileSync(des, pdfBytes);
}

It works fine to scale font in PDF, but after generating a PDF with pdf-lib, I’m updating some data into the field and after changing data my font family is changing to Curior new bold and font size is getting larger.
below image is from my working module.
I’ve been trying this for a long time not getting any solution. Thanks in advance for any help.

after testing the two links:
How to access the :root’s element in ReactJS to edit CSS variables? and Accessing a CSS custom property (aka CSS variable) through JavaScript I am trying to access my css variables that I have created but I’m unable to access them.

here is a snippet of my variables:

:root {
    --circle-diameter: 500px;
    --circle-radius: 250px;
    --circle-transpose: -250px;
    --branch-length: 100px;
    --icon-size: 20px;
    --terminal-colour: orange;
    --overlay-size: 1500px;

}

from there I try to access this value in a .ts file but the return is empty

const root = document.body;
export const TERMINAL_COLOUR =
    getComputedStyle(root).getPropertyValue("--terminal-colour");
console.log(TERMINAL_COLOUR)

when looking at the console.log there is nothing and just returns nothing in the console. I thought this was originally a package issue so I also tried installing

npm install styled-components

but it did nothing (and I don’t think it was really relevant)

edit:

When letting the application run on npm start if I comment the code then uncomment it, the orange will appear, but if I refresh the page, the console will do an empty log.

Let’s say we have a function that makes expensive calculation and an array of source values for which we do the calculation. We want to get a first return value of the function that is not null and return it.

function expensiveFunction(params) {...}

// this is how it can be achieved using ordinary for loop
let paramsCollection = ["params1", "params2" /*, ...*/];
let result;
for (let i=0; i<paramsCollection.length; i++) {
    result = expensiveFunction(paramsCollection[i]);
    if (result) {
        break;
    }
}

I’d like to do it using Array methods.

Array.find will only return the element for which function returns something.

Array.map will run expensive calculations for all elements even if first one was ok.

Array.reduce can do the job, but it will iterate over an array anyway – even if it doesn’t call the expensiveFunction it feels bad..

let paramsCollection = ["params1", "params2" /*, ...*/];
let result = paramsCollection.reduce((acc, cur) => acc ? acc : expensiveFunction(cur), null);

Any idea how to make it this way but w/out drawbacks from above examples?

How to make rounded cut-out corners of image using html/css or js. I have Figma design with vary lot different cut-out corners like this. We need universal solution for fast create rounded cut-out corners with different with, height and position.

I try do this:

.box {
  background: #000 url('https://i.pinimg.com/736x/a3/05/ab/a305ab1dc86e2af580cadec3513e2365.jpg') center no-repeat;
  background-size: cover;
  width: 500px;
  height: 300px;
  border-radius: 20px;
  position: relative;
}
.box:before,
.box:after {
  content: '';
  position: absolute;
  background: #fff;
  height: 20%;
  width: 30%;
}
.box:before {
  top: 0;
  left: 0;
  border-radius: 0 0 20px 0;
}
.box:after {
  bottom: 0;
  right: 0;
  border-radius: 20px 0 0 0;
}

<div class="box"></div>

var obj = {
    method : () =>{
        console.log(this)
    }
}
obj.method.apply(obj)

“I’m trying to use .call or .apply to set the this context for an arrow function, but this remains undefined. I understand that arrow functions have a lexical this binding, but I was hoping .call or .apply would still allow me to change the context. Can someone explain why this is happening or suggest an alternative approach?”

A page has multiple forms.
Each form has just one field, but the forms have a logical sequence to them and their processing should be sequential.

The form is generated as such:
<%= form.text_field :value_base, onchange: "this.form.requestSubmit()" %> which outputs
<input onchange="this.form.requestSubmit()" type="text" name="value_base" id="value_base">

The onchange function does submit the value and it is properly processed on the back-end.

However the focus is returned to the first field of the sequence. how can the cursor be sent to the next available field?

So I’m working with Laravel for the first time and then using vue for component building. I’ve used vue to build one or two things. I’ve got an issue where I’m trying to pass changeable data to different components using ref(), v-model & defineModel.

Component one:

<script setup>
    import { ref } from 'vue'
    import Component2 from './Component2.vue'

    let budget = ref(500)
    console.log('Initial budget check:', budget.value)

    budget.value = 600
    console.log('Updated budget check:', budget.value)
    
    // change is working fine
    
</script>

<template>

  <div>{{ budget }}</div>
  
  <Component2
    v-model:budget = "budget"
  />

</template>

Component2:

<script setup>
  import { defineModel } from 'vue'
  const budget = defineModel('budget')
  console.log('check budget:', budget.value)
  
  // laravel error
</script>

<template>
  <div>{{ budget }}</div>
</template>

At this point saving the project the component disappears and I get this console error:

Uncaught (in promise) TypeError: (0 , vue__WEBPACK_IMPORTED_MODULE_0__.defineModel) is not a function

This has all been fine when I’ve worked with similar not in Laravel and I don’t quite understand the issue could be or what to do to sort it. I would appreciate any help please? Thanks

I have a component in Angular, and I need to extract the full HTML content along with the computed CSS styles of a specific element using ViewChild. I’m currently able to get the HTML content using:

@ViewChild('mySelector', { static: false }) mySelector!: ElementRef;
const htmlContent = this.mySelector?.nativeElement?.innerHTML;

the html code is missing some css styles

link here is the link to stackblitz

I am building my final year project where I want to integrate google auth with traditional Sign up and Login auth, but the problem is that whenever i watch a passport.js tutorial or docs they start it from the scratch and just use passport.js but I want to keep my jwt authentication alive and just add on sign in with google.

After going through a lot of docs I came up with that schema If any one tell me if I am going in the right direction and what docs or tutorial should I follow next.

Schema:

    enum AuthProvider {
      LOCAL
      OAUTH
    }

    model User {
      id String @id @default(uuid()) 
      name String
      email String @unique
      password String?
      avatar String?
      resume String?
      skills Json?
      authProvider AuthProvider @default(LOCAL)
      oAuthId String? @unique 
      passwordResetToken String? 
      passwordResetExpiry DateTime?
      emailVerificationToken String?
      emailVerificationExpiry DateTime? 
      savedJobs Job[] @relation("UserSavedJobs")
      createdAt DateTime @default(now())
    }

I am trying to use both python and js in my firebase cloud functions.
One folder that I have in the project and that works is called /functions and contains only js code. This deploys and run fine.
I use firebase deploy --only functions:whateverNameOfFunction to deploy.
Now I have create a second folder which is called /python which I want to have python code in.
I have created a file inside with working code which I have tasted locally.

I want to deploy this python cloud function now. I do not wish to start a new project and use the new generation so that I can just select Python at the start of project creation when prompted.
What can I do? I have read the documentation and some examples but I do not see command examples of how this should be deployed. Is it possible at all?

After Chrome updated to 130 version my extension stopped to show notification created by chrome.notifications.create. The code is called, but the notification is not shown and the console do not have errors. Not only on my device, the extension’s users report me about that too.

I have created a bug report on issues.chromium.org. But the testers can not reproduce the bug. Can you please run the test extension and let me know if you can reproduce the bug with the hidden notification?

Steps

1. Launch chrome browser 130+ version
2. Download test notification and extract it
3. Open chrome://extensions, developer mode ON and drag the file
4. You should be able to see the notification

Expect

Every 2 seconds you should see a new notification

Real

The notification is never shown

I have an angular project “anne” depending on “bob”, both of them cloned on my local machine.

I want to run “anne” in a debbugger envieronment so that I can put a breakpoint inside bob, preferibly using vscode’s chrome or firefox debuggers

If I try to ctrl+click bob’s component vscode bring me to the .d.ts file, without any of the implementation

If I try the plain old chrome’s debugger bob’s files are all minified in a single .mjs file

I tried with this launch.json

{
  "version": "0.2.0",
  "configurations": [
      {
          "type": "chrome",
          "request": "launch",
          "name": "Debug Euservices",
          "url": "http://localhost:4212",
          "webRoot": "${workspaceFolder}",
          "sourceMaps": true,
          "sourceMapPathOverrides": {
              "webpack:///./projects/bob-core/*": "${workspaceFolder}/../bob/projects/bob-core/*"
          },
          "preLaunchTask": "npm: start"
      }
  ]
}

but it still doesn’t map correctly bob’s package

I’ve tried in package.json

"bob": "file:../bob/projects/bob-core"

but this break the build

Help me receive data from Yandex Forms. Beck is not mine.

It is necessary to display this data in the form of a general and specific graph for the region separately. Now I update manually. There is a map and mechanics for the appearance of the name of the region (Codepen). The map must be scaled.

<svg xmlns:svg="http://www.w3.org/2000/svg" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.2" baseProfile="tiny" x="0px" y="0px" viewBox="0 0 1000 600" xml:space="preserve" xmlns:xml="http://www.w3.org/XML/1998/namespace">          <path d="m 130.24729,259.26463 -0.71301,-1.3323 -0.83965,1.13893 -1.20312,0.61639 -0.3652,1.98343 -2.7566,-1.20341 -1.29507,1.2557 -1.79887,-1.96928 -0.51738,2.08913 -1.70104,0.51357 0.48353,2.36036 1.41813,-1.06374 1.07846,1.34199 2.31013,-0.11587 0.63117,-1.4221 0.77636,1.28888 1.63087,-0.86752 1.60105,1.08107 2.52028,-0.21377 0.38854,-1.63667 -0.76508,-2.45949 0.30997,-0.96605 c -0.75062,0.0982 -0.83803,-0.13605 -1.19347,-0.41925 z"
    data-title="Москва" 
    data-code="RU-MOW"
></path><path d="m 136.30673,181.67516 -2.95955,-0.98651 -3.94605,0.98651 -0.98652,3.94606 0.98652,2.95954 3.94605,1.97303 2.95955,-1.97303 1.97302,-2.95954 -1.97302,-3.94606 z" 
    data-title="Санкт-Петербург" 
    data-code="RU-SPE"
></path>

Consider a scenario where a piece of JavaScript code uses a for…of loop to iterate over an array, and within that loop, a switch statement is used. Each case performs the same operation to calculate the sum of the array elements using the reduce method:

const arr = [1, 2, 3, 10, 20, 30];

for (const el of arr) {
    switch (el) {
        case 1:
            const sum1 = arr.reduce((acc, curr) => acc + curr, 0);
            // ...
            break;

        case 2:
            const sum2 = arr.reduce((acc, curr) => acc + curr, 0);
            // ...
            break;

        case 3:
            const sum3 = arr.reduce((acc, curr) => acc + curr, 0);
            // ...
            break;

        // ...

        default:
            break;
    };
};

In this example, the reduce method is called in each case to compute the sum of the array elements. My question is: does the V8 optimize this repeated traversal in any way, or will it execute the array traversal independently for each case every time?

I understand that it is possible to refactor the code to perform the array traversal outside of the loop, which would prevent the repeated traversal. However, in that case, the traversal would always occur, even when it might not be necessary (e.g., if the loop does not reach certain cases).

What are the performance implications of this approach, and how do V8 handle such scenarios?

I want to know how to efficiently handle repeated array traversals in multiple switch cases, especially when some cases might not need the traversal at all.