Category: javascript

Category Added in a WPeMatico Campaign

Semantic-release not creating new version for package

I have an NPM package I am trying to set up semantic release for so it will automatically deploy with a version bump.

I recently migrated from an old repo / npm package to a new one and since doing so semantic version wont create a new release for me and just says:

The local branch main is behind the remote one, therefore a new version won't be published.

I have created the v1.0.0 tag in the new repo and that matches the only published version of the package so far.

I have removed the changelog.md so it should start fresh.

My release config is like so:

{
  "branches": ["main"],
  "plugins": [
    [
      "@semantic-release/commit-analyzer",
      {
        "preset": "conventionalcommits"
      }
    ],
    "@semantic-release/release-notes-generator",
    "@semantic-release/changelog",
    [
      "@semantic-release/npm",
      {
        "npmPublish": false
      }
    ],
    [
      "@semantic-release/github",
      {
        "assets": [
          "CHANGELOG.md",
          "dist/*",
          "package.json"
        ]
      }
    ],
    [
      "@semantic-release/git",
      {
        "message": "chore(release): ${nextRelease.version} [skip ci]nn${nextRelease.notes}"
      }
    ]
  ]
}

It’s a public package so you can see the CI for yourself: https://github.com/stretch0/use-feature/actions/runs/3862807130/jobs/6584602017

Repo is here if you’d like to see the rest of the code: https://github.com/stretch0/use-feature

Nextjs and Sequelize Models

Hello fellow problem solvers! I’m working on rebuilding an older project in Nextjs but currently scratching my head over this issue.

I’m attempting to build an association between an order and it’s line items. Using the associations listed below I’m able to create the correct tables with the expected cols in Postbird but when fetching the data I’m getting the following error:

Error Message:

EagerLoadingError [SequelizeEagerLoadingError]: lineItem is not associated to order!

Here’s my associations located in server/index.js:

const conn = require("./conn");
const { Artist, LineItem, Order, Track, User, Vinyl } = require("./models");

//ASSOCIATIONS
User.hasMany(Order);
Order.belongsTo(User);

Order.hasMany(LineItem);
LineItem.belongsTo(Order);

Vinyl.hasMany(LineItem);
LineItem.belongsTo(Vinyl);

Vinyl.hasMany(Track);
Track.belongsTo(Vinyl);

Artist.hasMany(Vinyl);
Vinyl.belongsTo(Artist);

module.exports = { conn, Artist, LineItem, Order, Track, User, Vinyl };

And finally the api route

import { Order, LineItem, Vinyl, Artist } from "../../../../server/models";
import { requireToken } from "../../../../customMiddleware";

const handler = async (req, res) => {
  if (req.method === "GET") {
    try {
      const userOrders = await Order.findAll({
        where: { userId: req.query.id },
        include: {
          model: LineItem,
          attributes: ["id", "qty"],
          include: {
            model: Vinyl,
            attributes: ["id", "name", "stock", "price", "img"],
            include: {
              model: Artist,
              attributes: ["id", "name"],
            },
          },
        },
      });
      userOrders.sort((a, b) => a.id - b.id);
      res.status(200).json({ success: true, userOrders });
    } catch (error) {
      console.log(error);
      res.status(500).json({
        success: false,
        message: `An error has occurred. Unable to fetch user order id# ${req.query.id}.`,
        error,
      });
    }
  }
};

export default requireToken(handler);

I’d also like the mention that of course, this is currently working fine on the old project so I’m a little puzzled over this.

Any suggestions would be appreciated!

I’ve tried building the associations in different orders but nothing changed.

Create button that deletes items from local storage one by one

for a project I need to create a program that from input adds info to separate page, I need to create a button that would delete local storage entry one by one.

My index.html


<body>

    <a href="index.html">Home</a>
    <a href="addItem.html">Create a new task</a>
    <h1>Home</h1>
    <div id="showData"></div>
</body>
</html>

my HTML to which items are placed

</head>
<body>
    <a href="index.html">Home</a>
    <a href="addItem.html">Create a new task</a>

    <h1>Create a Task</h1>
    
    <form id="myForm" action="/data.php" method="post">
        <input type="text" name="user" id="user">
        <input type="submit" value="Add Item">
        <button  id="delete-button" value="Delete"></button>
        
    </form>


</body>

My JS:

let myForm = document.getElementById("myForm");
if (myForm != null) {
    myForm.addEventListener("submit", AddItem);

}

item = JSON.parse(localStorage.getItem("myItem")) || [];

function AddItem(event) {
    event.preventDefault ();
    let getUser = document.getElementById("user").value;
    myObj = {
        user: getUser 
    }
    item.push(myObj);
    localStorage.setItem("myItem", JSON.stringify(item));
}

let getDataDiv = document.getElementById("showData");
item.forEach(element => {
    if (getDataDiv != null) {
    let h3 = document.createElement("h3");
    h3.textContent += element.user;
    getDataDiv.append(h3);
    }
}); 

function removeItem() {
    let deleteButton = document.getElementById('delete-button');
        deleteButton.addEventListener('click', () => {
        localStorage.removeItem('h3');
        });
}

I have tried to add button that would delete it one entry at the time using addEventListener and remove item.

nodemon app crashed – and returning error that ERR MODULE NOT FOUND

i am trying to run the nodemon server for the openAI GPT

here is the .json file

{
  "name": "server",
  "version": "1.0.0",
  "description": "",
  "main": "server.js",
  "type": "module",
  "scripts": {
    "server": "nodemon server"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "dependencies": {
    "cors": "^2.8.5",
    "dotenv": "^16.0.3",
    "nodemon": "^2.0.20",
    "openai": "^3.1.0"
  }
}

this is the server.js file

import express from 'express';
import * as dotenv from 'dotenv';
import cors from 'cors';
import { Configuration, OpenAIApi } from 'openai';

dotenv.config();
const configuration = new Configuration({
    apiKey: process.env.OPENAI_API_KEY,
});

const openai = new OpenAIApi(configuration);
const app = express();
app.use((cors()));
app.use(express.json());

app.get('/', async (req, res) => {
    res.status(200).send({
        message: 'Hello form Codex',
    })
});

app.post('/', async (req, res) => {
    try {
        const prompt = req.body.prompt; //front end

        const response = await openai.createCompletion({
            model: "text-davinci-003",
            prompt: `${prompt}`,
            temperature: 0,
            max_tokens: 3000,
            top_p: 1,
            frequency_penalty: 0.5,
            presence_penalty: 0,
        });
        res.status(200).send({
            bot: response.data.choices[0].text
        })
    } catch (error) {
        console.log(error);
        res.status(500).send({ error })
    }
})

app.listen(5000, ()=> console.log('Server is running on port http://localhost:5000'));

here is my code kindly solve it that which my server is returning the error in the terminal

  code: 'ERR_MODULE_NOT_FOUND'
}

Node.js v18.12.1
[nodemon] app crashed - waiting for file changes before starting...

i am trying to run the server on the terminal with the command = npm run server

but it thorow the error ERR_MODULE_NOT_FOUND and [nodemon] app crashed – waiting for file changes before starting…

i am expecting to run the server and it do not return any error

react JS implement image Drag and Drop

in my react app I’m using a package react-dropzone. and it works quite nice. but I can’t figure out to prevent duplicate images.

const [files, setFiles] = useState([]);
 const [found, setFound] = useState(false);
 const { getRootProps, getInputProps } = useDropzone({
    accept: {
      "image/*": [],
    },

    onDrop: (acceptedFiles) => {
      acceptedFiles.filter(
        (el, idx) =>
          idx ===
          files.findIndex((elm) => elm.name === el.name && setFound(true))
      );
      if (!found) {
        setFiles((prev) => [
          ...prev,
          ...acceptedFiles.map((file) =>
            Object.assign(file, {
              preview: URL.createObjectURL(file),
            })
          ),
        ]);
      }
    },
  });

how can I prevent image duplication? and also make limitations on it? only 4 – 9 images can be uploaded?

How to get auto-suggestion when we style a components inside react.js file?

When we style elements using the app.css or styles.css, vs code simply auto suggest us. example if we type just “back” for background colour, it auto suggest us to complete. but in react.js or index.js it won’t work. Why? is there any idea or solution for this? An extension or something. Please excuse my poor english.

solution for this auto-suggestion/auto-complete of this.

Javascript heap out of memory issue on comparing elements in large for loops

I have huge JSON file to process which holds around 15,00,000 JSON objects.I am performing some searching operation where I am using two for loops under which I am comapring object values

Below is an example:

const data  = [{name:Jon,age:29},{name:Paul,age:27},...,{name:Jon,age:17}];
//This data holds 15,00,000 JSON objects 

const result = [];

for(var i=0;i<data.length;i++) {
  
   for(var j=0;j<data.length;j++) {

         const obj = {};
             
         if(data[i].name == data[j].name) {
              obj.name = data[i].name;
         }
         
          result.push(obj);
  }

} 

console.log(result);

But after running sometime its giving me this error:

[41955:0x523ce90]   162238 ms: Mark-sweep (reduce) 4096.9 (4102.7) -> 4096.9 (4104.7) 
MB, 3481.7 / 0.4 ms  (average mu = 0.092, current mu = 0.000) allocation failure scavenge might not succeed


<--- JS stacktrace --->

FATAL ERROR: Ineffective mark-compacts near heap limit Allocation failed - JavaScript heap out of memory
1: 0xa3ac10 node::Abort() [node]
2: 0x970199 node::FatalError(char const*, char const*) [node]
3: 0xbba58e v8::Utils::ReportOOMFailure(v8::internal::Isolate*, char const*, bool) 
[node]
4: 0xbba907 v8::internal::V8::FatalProcessOutOfMemory(v8::internal::Isolate*, char 
const*, bool) [node]
5: 0xd76b25  [node]
6: 0xd776af  [node]
7: 0xd854eb v8::internal::Heap::CollectGarbage(v8::internal::AllocationSpace, 
v8::internal::GarbageCollectionReason, v8::GCCallbackFlags) [node]
8: 0xd890ac v8::internal::Heap::AllocateRawWithRetryOrFailSlowPath(int, 
v8::internal::AllocationType, v8::internal::AllocationOrigin, 
v8::internal::AllocationAlignment) [node]
9: 0xd5778b v8::internal::Factory::NewFillerObject(int, bool, 
v8::internal::AllocationType, v8::internal::AllocationOrigin) [node]
10: 0x109fd4f v8::internal::Runtime_AllocateInYoungGeneration(int, unsigned long*, 
v8::internal::Isolate*) [node]
11: 0x1448f59  [node]

Aborted (core dumped)

To get rid of this error I even tried node --max-old-space-size=4096 index.js for maximizing memory for node processes.

But still getting the same issue is there any other way round to resolve this issue and get the desired result.Anyone help me out.

Javascript accesing file

I need a function made using pure JS for accessing specific line of text file. I was looking for same questions and answers similar to this one but I couldn’t find anything that matches my problem perfectly. I’m a beginner dev so I can’t modify even the most similar programs (for example some which are returning whole file) so that’s why I’m asking.

Next/Link keeps reload in components

It is said that in next js we don’t need to install react-router-dom because the path of our pages depend on the pages folder. Well, it actually works when I create button to move to another pages. But when I create components folder and create navbar component, it doesn’t work properly as it was. The next/link keeps reloading when it moves to another pages.

import Link from "next/link";

export default function Navbar() {
  return (
    <nav className="bg-black flex justify-between p-5 text-white">
      <h1 className="font-bold text-sky-400">
        <Link href="/">Furniture App</Link>
      </h1>
      <div>
        <Link href="about">About</Link>
        <Link href="promos">Promos</Link>
      </div>
    </nav>
  );
}

Do I have to create components in pages folder in order to make Next/Link works without reload the browser?

Implement Google Maps into blazor component in .NET MAUI

I am trying to implement Google Maps into my Blazor component, but I cannot have Javscript inside the blazor component, how do I manage to get the Map into my Blazor component?

Here is my code:

Map.razor

@page "/map"
@inject IJSRuntime JS

<h3>Map</h3>
<div id="map"></div>
<script>
        let map;

        function initMap() {
            map = new google.maps.Map(document.getElementById("map"), {
                center: { lat: -34.397, lng: 150.644 },
                zoom: 8,
            });
            alert("test");
        }

    </script>
    <script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyAg8GuCi6zrFU1wARf_pKOm6qDvrH9pqW0&callback=initMap&v=weekly"
            defer></script>


}

But that doesnt work, so I tried to move the to the index.html file and then make the Map.raxor file like this:

@page "/map"
@inject IJSRuntime JS

<h3>Map</h3>

@code {
    protected override async Task OnInitializedAsync()
    {
        try
        {
            await JS.InvokeVoidAsync("initMap");
        } catch(Exception ex)
        {
            var test = ex;
        }


    }
}

But I get the exception: Map: Expected mapDiv of type HTMLElement but was passed null.

Extracting a number from a string, how does this function work? [closed]

Can you explain to me step by step how the code in functions.js works from this task? Thanks in advance)

Question:
Extract a number
Implement the function extractNumber(s).
It should accept a string and extract a number from it.
It’s guaranteed that there will be a single number in the string.
Examples: $59.99 -> 59.99, 99 euro only! -> 99, 1 BTC -> 1

//functions.js
    export const extractNumber = (s) => {
    s = s.split('')
    let str = [ ]  
    for(let i = 0; i < s.length; i++)
    if(s[i] <= '9' && s[ i ] >= '0' || s[i] === '.')
    str += s[ i ]
    return parseFloat(str)
    }

//solution.js
import { extractNumber } from './functions.js';

console.log(extractNumber('$59.99'));
console.log(extractNumber('EUR 1.35'));
console.log(extractNumber('1 BTC'));
console.log(extractNumber('agdflhwet galsdf 13245 sdflgkhytaol chalsdf'));

Video Player Controls Hide

Video Controls not hidding when video started full screen can anyone help me to fix this issue?

Video Controls not hidding when video started full screen can anyone help me to fix this issue?

Video Controls not hidding when video started full screen can anyone help me to fix this issue?

Video Controls not hidding when video started full screen can anyone help me to fix this issue?

//mouse move controls

video_player.addEventListener("mouseover", () => {
  controls.classList.add("active");
});

video_player.addEventListener("mouseleave", () => {
  if (video_player.classList.contains("paused")) {
    controls.classList.remove("active");
  } else {
    controls.classList.add("active");
  }
});

//mobile touch controls
video_player.addEventListener("touchstart", () => {
  controls.classList.add("active");
  setTimeout(() => {
    controls.classList.remove("active");
  }, 8000);
});

video_player.addEventListener("touchmove", () => {
  if (video_player.classList.contains("paused")) {
    controls.classList.remove("active");
  } else {
    controls.classList.add("active");
  }
});

try to read a dropdownl list but get an error e.options is not define

I try to read a selected Optionfield but it´s not possible with my code and research woth goolge and Stackoverflow dosn´t helb.

here my HTML text:

`<label for="raum" id="raum">Raum</label>
                                <select name="raum" id="raum">
                                    <option value="wohnzimmer">wohnzimmer</option>
                                    <option value="Küche">Küche</option>
                                    <option value="schlafzimmer">schlalfzimmer</option>
                                </select>`

i use the eventlistener to start a function:

`document.getElementById("eintragen").addEventListener("click", eintragen);


function eintragen(event) {
  event.preventDefault();
  laufendeNummer();


}

function laufendeNummer() {
  var e = document.getElementById('raum');
  var value = e.options[e.selectedIndex].value;

  console.log(value);
}`

but i got always the error

Uncaught TypeError: e.options is undefined

what do i wrong?

ps Sorry for my bad english 🙁

Access the wanted field parameters from the output of facebook ads graph api

I’ve installed Facebook Pixel on my website, and it records purchases made on my site. The script on my site is the normal purchase standard event:

Right now, my query looks like this:

{
  "data": [
    {
      "actions": [
        {
          "action_type": "link_click",
          "value": 19
        },
        {
          "action_type": "offsite_conversion.fb_pixel_purchase",
          "value": 1
        },
        {
          "action_type": "offsite_conversion.fb_pixel_view_content",
          "value": 19
        },
        {
          "action_type": "post_like",
          "value": 88
        },
        {
          "action_type": "page_engagement",
          "value": 107
        },
        {
          "action_type": "post_engagement",
          "value": 107
        },
        {
          "action_type": "offsite_conversion",
          "value": 20
        }
      ],

As you can see, the query returns a lot of parameters that i dont want to track. There are some fields that i only want to record i.e link_click & post_like. Rest other parameters i want to remove them.

Is there any way to get only some required fields rather than whole bunch of metrics

I tried using specific metrics mentioned in the facebook api parameters. like actions.purchase_conversion_value but the output is no such parameters found.

Any text is accepted in the text field, instead of a certain string [duplicate]

The user must enter his username in the text field of the form. The accepted username is retrieved from the server and is ‘Bret’. But everything the user enters in the field is accepted. How can I solve this problem?

app.component.html

<div id="details">
  <form [formGroup]="form" (ngSubmit)="addDetails()">

    <div class="form-group">

      <label for="s_url">URL:</label>
      <br>
      <input style="width:80%" type="text" id="s_url" formControlName="s_url" />
      <div style="color:red" *ngIf="s_url.value && s_url.invalid">
        not a valid URL
      </div>

    </div>
    <br>
    <button type="submit" [disabled]="form.invalid">Submit</button>
    <br>
    
    <hr>

    Form status: 
    <span [style.color]="form.status === 'VALID' ? 'green' : 'red'">
      {{ form.status }}
    </span>

    <hr>
    <pre>Form values: {{ form.value | json }}</pre>
    <hr>

  </form>
</div>

app.component.ts

import { Component } from '@angular/core';
import { FormGroup, FormBuilder, Validators } from '@angular/forms';
import { RouterModule } from '@angular/router';

@Component({
  selector: 'my-app',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css'],
})
export class AppComponent {
  form: FormGroup;

  constructor(private fb: FormBuilder) {
    this.createForm();
  }

  createForm() {
    fetch('https://jsonplaceholder.typicode.com/users')
      .then((response) => response.json())
      .then((json) => {
        console.log(json[0].username);
        this.reg = json[0].username;
      });

    const reg = this.reg;
    this.form = this.fb.group({
      s_url: ['', [Validators.required, Validators.pattern(reg)]],
    });
  }

  // Getter for easy access
  get s_url() {
    return this.form.get('s_url');
  }

  // On submit
  addDetails() {}
}

app.module.ts

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { FormsModule, ReactiveFormsModule } from '@angular/forms';

import { AppComponent } from './app.component';
import { HelloComponent } from './hello.component';

@NgModule({
  imports:      [ BrowserModule, FormsModule, ReactiveFormsModule ],
  declarations: [ AppComponent, HelloComponent ],
  bootstrap:    [ AppComponent ]
})
export class AppModule { }

Here is the live example: https://stackblitz.com/edit/angular-1kyxry