Category: javascript

I have a VSCode extension with a dropdown property and I only want a contribution point when a specific setting is chosen.

Is there any way that I can do something like this?

"editor/title": [
            {
                "command": "extension.command",
                "group": "navigation",
                "when": "editorLangId == lua && extension.property == 'foo'"
            }]

I am trying to make a Vue.js app and have the below method. I want to have conversation be returned so I can do the code below that calls it and access the result. My question is how do I make my method return back the value I need? It shows as a promise in the chrome console. Should I make the method into a promise to use .then on it?

method

createConversation(data) {
   let client = data.client
   let conversation = null
   client.on('stateChanged', async (state) => {
   if (state === 'initialized') {
        conversation = client.getConversationBySid(data.sid)
        return conversation
     }
   })
},

code that calls method and how I want to get value back to be used

const fetchedConversation = await this.createConversation({
    sid: conversation.conversation_sid,
    client: conversationsClient
})
console.log(fetchedConversation)

So I have a bit of an issue with by ReactJs production code where it doesn’t seem to recognize my environment variables. This is the error I get:

Uncaught ReferenceError: process is not defined
    <anonymous> webpack://testProject/./src/agent.js?:9
    js http://localhost:8080/src_Admin_MainPage_SessionTimeout_index_js-src_agent_js-node_modules_moment_locale_sync_recursive_.js:29
    __webpack_require__ http://localhost:8080/main.js:2511
    fn http://localhost:8080/main.js:2789
    <anonymous> webpack://coralpanda/./src/Admin/MainPage/Login/index.js?:5
    js http://localhost:8080/src_Admin_MainPage_index_js.js:28
    __webpack_require__ http://localhost:8080/main.js:2511
    fn http://localhost:8080/main.js:2789
    <anonymous> webpack://coralpanda/./src/Admin/MainPage/index.js?:4
    js http://localhost:8080/src_Admin_MainPage_index_js.js:128
    __webpack_require__ http://localhost:8080/main.js:2511
    fn http://localhost:8080/main.js:2789

I followed Webpack’s documentation for passing in environment variables and added them to my package.json file’s build settings, but it didn’t work. Here’s how it looks:

"scripts": {
    "start": "react-scripts start",
    "build": "webpack --mode=production --env REACT_APP_SERVER_URL=https://localhost:3481/project --env NODE_PATH=./src  --node-env=production",
    "test": "react-scripts test",
    "eject": "react-scripts eject",
    "build:dev": "webpack --mode=development",
    "build:prod": "webpack --mode=production --node-env=production",
    "watch": "webpack --watch",
    "serve": "webpack serve"
  },

And here is my webpack.config.js just in case:

// Generated using webpack-cli https://github.com/webpack/webpack-cli

const path = require("path");
const HtmlWebpackPlugin = require("html-webpack-plugin");
const MiniCssExtractPlugin = require("mini-css-extract-plugin");
const WorkboxWebpackPlugin = require("workbox-webpack-plugin");

const isProduction = process.env.NODE_ENV == "production";

const stylesHandler = isProduction
  ? MiniCssExtractPlugin.loader
  : "style-loader";

const config = {
  entry: "./src/index.js",
  output: {
    path: path.resolve(__dirname, "build"),
  },
  devServer: {
    open: true,
    host: "localhost",
  },
  plugins: [
    new HtmlWebpackPlugin({
      template: "index.html",
    }),

    // Add your plugins here
    // Learn more about plugins from https://webpack.js.org/configuration/plugins/
  ],
  module: {
    rules: [
      {
        test: /.(js|jsx)$/i,
        loader: "babel-loader",
      },
      {
        test: /.s[ac]ss$/i,
        use: [stylesHandler, "css-loader", "postcss-loader", "sass-loader"],
      },
      {
        test: /.css$/i,
        use: [stylesHandler, "css-loader", "postcss-loader"],
      },
      {
        test: /.(eot|svg|ttf|woff|woff2|png|jpg|gif)$/i,
        type: "asset",
      },

      // Add your rules for custom modules here
      // Learn more about loaders from https://webpack.js.org/loaders/
    ],
  },
  resolve: {
    alias: {
      assets: path.resolve(__dirname, 'src/assets/'),
      agent: path.resolve(__dirname, 'src/agent.js'),
      "agent.js": path.resolve(__dirname, 'src/agent.js'),
      Admin: path.resolve(__dirname, 'src/Admin'),
    }
  },
};

module.exports = () => {
  if (isProduction) {
    config.mode = "production";

    config.plugins.push(new MiniCssExtractPlugin());

    config.plugins.push(new WorkboxWebpackPlugin.GenerateSW());
  } else {
    config.mode = "development";
  }
  return config;
};

Hello im currently trying to create a digital guitar amp through browser using tone js v14.7.77 that has reverb (freeverb), delay(pingPongDelay), and distortion and i have hard time to set the effect options such as delaytime, distortion, etc dynamically through my client (browser) but as for now im currently trying to change the wet option through buttons but it did not worked out. can anyone have any idea what should i do?

heres my code and im using Vue 2 for my front end framework

this is my store/index.js

import Vue from 'vue'
import Vuex from 'vuex'
import * as Tone from 'tone'
// const audioContext = new AudioContext()

Vue.use(Vuex)

// Volume Setup
const vol = new Tone.Volume({
  volume: 0,
  mute: false,
  wet: 1
}).toDestination()
// Distortion Setup
const dist = new Tone.Distortion({
  distortion: 0.1,
  wet: 0
}).toDestination()
// Reverb Setup
const freeverb = new Tone.Freeverb({
  reverbDampening: 1500,
  wet: 0
}).toDestination()
// Delay Setup
const pingPong = new Tone.PingPongDelay({
  delayTime: '4n',
  feedback: 0.2,
  wet: 0
}).toDestination()

export default new Vuex.Store({
  state: {
    audioState: 'start',
    // Eq setup
    eq: {
      trebleEQ: 1,
      midEQ: 1,
      bassEQ: 1,
      volume: 1
    },
    // reverb setup
    reverb: {
      status: 'off',
      wet: 0,
      reverbDampening: 1500
    },
    // distortion setup
    distortion: {
      dist: 0.8,
      status: 'off',
      wet: 0
    },
    // delay setup
    delay: {
      status: 'off',
      wet: 0,
      times: '4n',
      timeRange: 0.2
    }
  },
  getters: {
  },
  mutations: {
    switchDelay (state, change) {
      console.log(pingPong.context)
      pingPong.PingPongDelay.wet = change.wet
      state.delay.status = change.status
      state.delay.wet = change.wet
    },
    switchReverb (state, change) {
      // freeverb.Freeverb.wet = change.wet
      state.reverb.status = change.status
      state.reverb.wet = change.wet
    }
  },
  actions: {
    setupContext () {
      // Line Input initiate
      const lineInput = new Tone.UserMedia()
      // --- value setup ---
      lineInput
        .connect(vol)
        .connect(dist)
        .connect(freeverb)
        .connect(pingPong)
        .open().then(() => {
        // promise resolves when input is available
          console.log('line open', pingPong.context)
        }).catch(e => {
        // promise is rejected when the user doesn't have or allow delay access
          console.log('line not open', e)
        })
    },
    reverbChanger (context, payload) {
      context.commit('switchReverb', payload)
    },
    delayChanger (context, payload) {
      console.log(payload)
      context.commit('switchDelay', payload)
    }
  }
})

this is my home.vue

<template>
  <div class="home">
    <button @click="reverbSwitch" type="button" class="text-white bg-blue-700 hover:bg-blue-800 focus:ring-4 focus:outline-none focus:ring-blue-300 font-medium rounded-lg text-base px-6 py-3.5 text-center dark:bg-blue-600 dark:hover:bg-blue-700 dark:focus:ring-blue-800">Start Reverb [{{reverb.status}}]</button>
    <button @click="delaySwitch" type="button" class="text-white bg-blue-700 hover:bg-blue-800 focus:ring-4 focus:outline-none focus:ring-blue-300 font-medium rounded-lg text-base px-6 py-3.5 text-center dark:bg-blue-600 dark:hover:bg-blue-700 dark:focus:ring-blue-800">Start Delay [{{delay.status}}]</button>
    <effect-card></effect-card>
  </div>
</template>

<script>
import * as Tone from 'tone'

export default {
  name: 'HomeView',
  data () {
    return {
      delay: {
        status: this.$store.state.delay.status,
        wet: this.$store.state.delay.wet,
        times: this.$store.state.delay.times,
        timeRange: this.$store.state.delay.timeRange
      },
      reverb: {
        status: this.$store.state.reverb.status,
        wet: this.$store.state.reverb.wet,
        reverbDampening: this.$store.state.reverb.reverbDampening
      }
    }
  },
  methods: {
    reverbSwitch () {
      // create a synth and connect it to the main output (your speakers)
      const synth = new Tone.Synth().toDestination()
      if (this.$store.state.reverb.status === 'off') {
        this.$store.commit('reverbChanger', { status: 'on', wet: 1 })
      } else {
        this.$store.commit('switchReverb', { status: 'off', wet: 0 })
      }
      // play a middle 'C' for the duration of an 8th note
      synth.triggerAttackRelease('C2', '8n') // used to trigger web audio api
    },
    delaySwitch () {
      // create a synth and connect it to the main output (your speakers)
      const synth = new Tone.Synth().toDestination()
      console.log(this.$store.state.delay.status)
      if (this.$store.state.delay.status === 'off') {
        console.log('turning on delay')
        this.$store.commit('switchDelay', { status: 'on', wet: 1 })
      } else {
        console.log('turning off delay')
        this.$store.commit('switchDelay', { status: 'off', wet: 0 })
      }
      // play a middle 'C' for the duration of an 8th note
      synth.triggerAttackRelease('C3', '8n') // used to trigger web audio api
    }
  },
  created () {
    // this.$store.dispatch('setupReverb')
    // this.$store.dispatch('setupPingPongDelay')
    this.$store.dispatch('setupContext')
  }
}
</script>

I am having trouble getting my VPS server set up appropriately. I copied all the files recursively from my local server to the remote server, but post & get requests to the server are not functioning appropriately (404 not found error). The routing works perfectly on my localhost server, but unfortunately it doesn’t on the remote.

Server Code:

// getting datastores
const datastore = require('nedb');
const customerRecordsdb = new datastore("CustomerRecords.db");
customerRecordsdb.loadDatabase();

// importing express
const port        = 3000;
const express     = require('express');
const application = express();
const path        = require('path')
const newPath     = path.join(__dirname + '../../..')

application.listen(port, () => console.log("Listening at " + port));
application.use(express.json( {limit: '1mb'} ));
application.use(express.static(newPath));

application.get('/RetrieveCustomerInformation', (request, response) => {
    console.log("SUCCESS!");
    customerRecordsdb.find({}, (error, data) => {
        if (error) {
            response.end();
            return;
        }
        response.json(data);
    })
})

Client Code:

// loading data
let numberRecords = 0;
async function loadClientRecords() {
    const response = await fetch('/RetrieveCustomerInformation');
    const data     = await response.json();

    for (let i = 0; i < data.length; i++) {
        numberRecords++;
        insertNewRecord(data[i]);
    }
}
loadClientRecords()
    .then(response => {
        // was successful
    })
    .catch(error => {
        //console.log(error);
    })

[VPS Page Output]
https://i.stack.imgur.com/ghoIa.png (The server is not outputting anything)

[Local Host Page output]
https://i.stack.imgur.com/I6mqE.png
(The server is outputting “SUCCESS!” on every refresh)

As previously mentioned, I simply copied the directory over to the remote server.

Any help to what the problem could be will be greatly appreciated!

I want to read the price from json, dependent on Room, Season and number of nights.

This is the html used. Each of the 3 form inputs currently fire an alert, showing the chosen value.

<!DOCTYPE html>
<html>
<body>

<script src="showprice.js"></script>
<h3>Daily Rate Calculator</h3>

<form>
<label for="aroom">Choose Room:</label>
<div id="room"></div><br>
<label for="aseason">Choose Season:</label>
<div id="season"></div>



<br>
  <label for="days">Number of days:</label>
  <select name="days" id="days" onchange=loadNumber(this.value)>
    <option value="-">-</option>
    <option value="0">1</option>
    <option value="1">2</option>
    <option value="2">3</option>
    <option value="3">4</option>    
    <option value="4">5</option>
    <option value="5">6</option>
    <option value="6">7+</option>
  </select>
</form>

<br>
<div id="demo"></div>
</body>
</html>

This is showprice.js so far:

var troom
var tseason
var tday

 async function start(){


        const response=await fetch("pricing.json")
        const data=await response.json()
        createRList(data.rooms)
       console.log (data.rooms)
        createSList(data.rooms.map[0].Entries)
        //console.log (data.message.rooms.keys)
        createRate(data.message.troom.tseason[tday])
        console.log (data.message.troom.Entries(tseason)[tday])
      }
      start()

function createRList(rListic){
      document.getElementById("room").innerHTML=`
                    ${Object.keys(rListic).map(function(roomic){
                          return `<input onMouseUp="loadByRoom(this.value)" type="radio" id="${roomic}"
                          name="aroom" value="${roomic}">
                          <label for="${roomic}">${roomic}</label><br>`
                  }).join('')
                
}`
}

function createSList(sList){
  document.getElementById("season").innerHTML=`
                ${Object.keys(sList).map(function(seasonic){
                      return `<input  onClick="loadBySeason(this.value)" type="radio" id="${seasonic}"
                      name="aseason" value="${seasonic}">
                      <label for="${seasonic}">${seasonic}</label><br>`
              }).join('')
            
}`
}




function loadByRoom(roomic) {
 alert (roomic)
 troom=roomic
}
function loadBySeason(seasonic) {
  alert (seasonic)
 tseason=seasonic
 }
 function loadNumber(days) {
  alert (days)
  tday=days
 }

 function createRate(drate) {
  document.getElementById("demo").innerHTML=`Daily Rate: £${drate}`
 }

This is pricing.json:

       { "rooms": {
              "Greek": {  "Peak":[200,190,180,170,160,150,140] ,"Mid":[190,180,170,160,150,140,130],"Off":[180,170,160,150,140,130,120]},
              "Spanish": {  "Peak":[220,210,200,190,180,170,160] ,"Mid":[205,195,185,175,165,155,145],"Off":[200,190,180,170,160,150,140]},
              "Italian": {  "Peak":[210,200,190,180,170,160,150] ,"Mid":[200,190,180,170,160,150,140],"Off":[190,180,170,160,150,140,130]}
                }
        }

I’m hoping I’m not far away as I can console all the data, but I don’t know how to display the specific rate.
Thank you.

My table Example:

Name QTY Rate BL Amount

Pepsi – 330 ML 10 41.50 3.3 415.00
Pepsi – 330 ML 4 41.50 1.32 166.00
Pepsi – 330 ML 4 30.00 1.32 120.00
Fanta – 650 ML 10 97.5 6.5 975.00

All products need to merge rate-wise. which means different rates have different rows and the same rates need to merge in one row according to the products.

If the rates are the same according to individual products that combine the Name of the same product and count the sum of QTY, BL, Amount.

Expected Result:

Name QTY Rate BL Amount

Pepsi – 330 ML 14 41.50 4.62 581.00
Pepsi – 330 ML 4 30.00 1.32 120.00
Fanta – 650 ML 10 97.5 6.5 975.00

I’ve published a TypeScript library onto NPM. On GitHub the dist (Link to Repository Folder) directory contains all the compiled JavaScript and d.ts files. However when running npm i <my_package> the result is a module with a dist folder only containing an index.js, the src folder is still present with the TypeScript files. The dist/src folder along with it’s JavaScript and d.ts files are not found on the installed package consequently my module is not recognized or typed in Vanilla JavaScript projects.

Library tsconfig.json:

{
  "compilerOptions": {
    "target": "es5",
    "module": "commonjs",
    "declaration": true,
    "outDir": "./dist",
    "strict": true,
  },
  "exclude": [
    "node_modules/",
    "dist/"
  ]
}

Library package.json

{
  "name": "easy-trivia",
  "version": "2.0.3",
  "description": "A wrapper for the Open Trivia Database API. Built with TypeScript, works with VanillaJS.",
  "keywords": [
    "trivia",
    "games",
    "fun",
    "api",
    "easy",
    "typescript",
    "small",
    "quiz",
    "opentriviadatabase",
    "opentdb",
    "opentriviadb"
  ],
  "main": "dist/index.js",
  "types": "dist/index.d.ts",
  "scripts": {
    "build": "tsc",
    "prettier": "npm run build && prettier -w src/",
    "prepublish": "npm run prep",
    "exec": "npm run build && node .",
    "test": "npm run build && npx jest",
    "prep": "npm run build && npm run test && npm run prettier"
  },
  "files": [
    "src",
    "typings"
  ],
  "repository": {
    "type": "git",
    "url": "git+https://github.com/Elitezen/easy-trivia.git"
  },
  "author": "Elitezen",
  "license": "ISC",
  "bugs": {
    "url": "https://github.com/Elitezen/easy-trivia/issues"
  },
  "homepage": "https://github.com/Elitezen/easy-trivia#readme",
  "devDependencies": {
    "@types/jest": "^27.0.3",
    "@types/node": "^16.11.7",
    "jest": "^27.5.1",
    "nodemon": "^2.0.12",
    "prettier": "2.4.1",
    "ts-jest": "^27.1.3"
  },
  "engines": {
    "node": ">=14.0.0",
    "npm": ">=7.0.0"
  }
}

I found an example of how to setup an angular app to record audio here:
https://medium.com/@coolchoudharyvijay/use-mic-in-angular-to-record-audio-simplified-1374d89718d3

works like a charm locally, but when I build it and throw it on a server, I get this error:
ERROR TypeError: Cannot read properties of undefined (reading ‘getUserMedia’)
and
ERROR TypeError: Cannot read properties of undefined (reading ‘stop’)

any ideas why it would work locally but not on a server?

here’s the type script code (which can also be found in the article link above):

import { Component } from '@angular/core';
declare var $: any;
import * as RecordRTC from 'recordrtc';
import { DomSanitizer } from '@angular/platform-browser';
@Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.scss']
})
export class AppComponent {
title = 'micRecorder';
//Lets declare Record OBJ
record;
//Will use this flag for toggeling recording
recording = false;
//URL of Blob
url;
error;
constructor(private domSanitizer: DomSanitizer) {}
sanitize(url: string) {
return this.domSanitizer.bypassSecurityTrustUrl(url);
}
/**
* Start recording.
*/
initiateRecording() {
this.recording = true;
let mediaConstraints = {
video: false,
audio: true
};
navigator.mediaDevices.getUserMedia(mediaConstraints).then(this.successCallback.bind(this), this.errorCallback.bind(this));
}
/**
* Will be called automatically.
*/
successCallback(stream) {
var options = {
mimeType: "audio/wav",
numberOfAudioChannels: 1,
sampleRate: 16000,
};
//Start Actuall Recording
var StereoAudioRecorder = RecordRTC.StereoAudioRecorder;
this.record = new StereoAudioRecorder(stream, options);
this.record.record();
}
/**
* Stop recording.
*/
stopRecording() {
this.recording = false;
this.record.stop(this.processRecording.bind(this));
}
/**
* processRecording Do what ever you want with blob
* @param  {any} blob Blog
*/
processRecording(blob) {
this.url = URL.createObjectURL(blob);
console.log("blob", blob);
console.log("url", this.url);
}
/**
* Process Error.
*/
errorCallback(error) {
  this.error = 'Can not play audio in your browser';
}
ngOnInit() {}
}

how would I go about creating a website link to be sent out to clients for a local dinner ordering service.

• clients are sent a link to click on that prompts them what’s for dinner
• answer “yes” or “no”
• input name and email/number that is stored and organized in a separate database for see who wants dinner or not

I’m looking for something that display some links (login & register) if (!userConnected) but if(userConnected) I want to display another informations than login & register.

I will display the elements by changing the states of userConnected bymyself so it doesn’t have to be automatic, just functionnal if I put false to userConnected. Thanks!

I’m using React and react-router-dom in 5.2.0

<Route exact path="/"> {userConnected ? <Home/> : <Register>} </Route>

I’ve tried this but this is with new pages and me I want to be in the same page. So I thought to do the same home page twice and if the user is connected it will display the home page with her profile pic and if he’s not login it will still display the home page but without profile pic and with the login and register links.

I am creating a button programmatically using Javascript, within the ‘then’ part of a promise, like this:

let likeButton = document.createElement("button");
likeButton.innerText = 'Like!';
likeButton.id = 'button-like';
likeButton.addEventListener('click', likePost);
feed.appendChild(likeButton);

And then I define my ‘likePost’ button like this:

function likePost() {
//do something....
}

I want to be able to pass a parameter to this function, like this:

function likePost(userId) {
//do something....
}

But I am not able to add this function to the event listener. I tried something like this:

const userId = 12345;
let likeButton = document.createElement("button");
likeButton.innerText = 'Like!';
likeButton.id = 'button-like';
likeButton.addEventListener('click', likePost(userId));
feed.appendChild(likeButton);

But this actually calls the ‘likePost’ function during button creation, which I don’t want. I want the function to be called only when the button is clicked.

How do I achieve this?

Thank you!

I am a beginner of web programming and trying to get a value of checkbox element by function in js file within script tag, but running the code(submitting the form) generates an error that says “document is not defined.” How can I make use of the document object?

<!DOCTYPE html>

    Registration
    
    <h1>Registration</h1><br><br>
        

    <body>
        <form action="register" post="POST">        
            <label for="username">Username:</label>
            <input type="text" id="username" name="username"><br><br>
        
        
            <label for="password">Password:</label>
            <input type="password" id="password" name="password"><br><br>
        
        
            <label for="passwordConfirm">Confirm Password:</label>
            <input type="password" id="passwordConfirm" name="passwordConfirm"><br><br>
        
        
            <label>?</label>
            <input type="checkbox" id="checkbox" name="checkbox" value="1"><br><br>
        
            <button type="submit">Submit</button>
    
        </form>
        <script src="register.js"></script>
    </body>

register.js

    function getCheckboxValue(){
        return document.getElementById("checkbox").value;
    }
    
    module.exports = {
        getCheckboxValue
    }

I looked up some resources about the DOM and client-side and server-side JavaScript, but I still do not understand what causes the problem. Please help me figure out this problem.

I know that with the method I want to perform, only small shapes can be filled. But I want to fill a small square but still get a stack overflow error.
Why it happens?
Maybe I have problems with functions color() or setcolor()?

function func() {
  var canvas = document.getElementById("image");
  var context = canvas.getContext("2d");

  canvas.width = 100;
  canvas.height = 100;

  var width = 10;
  var height = 10;
  var x = 0;
  var y = 0;
  var imagedata = context.createImageData(width, height);
  var pixelindex = (y * width + x) * 4;

  function color(x, y) {
    let pixelindex = (y * width + x) * 4;
    return imagedata.data[pixelindex] + "," +
      +imagedata.data[pixelindex + 1] + "," +
      +imagedata.data[pixelindex + 2] + "," +
      +imagedata.data[pixelindex + 3];
  }

  function setcolor(x, y, cn) {
    let colors = cn.split(",");
    let pixelindex = (y * width + x) * 4;
    imagedata.data[pixelindex] = colors[0];
    imagedata.data[pixelindex + 1] = colors[1];
    imagedata.data[pixelindex + 2] = colors[2];
    imagedata.data[pixelindex + 3] = colors[3];
  }

  function fill4(x, y, cb = "27,94,32,255", cn = "67,160,71,255") {
    if (color(x, y) !== cb && color(x, y) !== cn) {
      setcolor(x, y, cn);
      fill4(x, y - 1, cb, cn);
      fill4(x, y + 1, cb, cn);
      fill4(x - 1, y, cb, cn);
      fill4(x + 1, y, cb, cn);
    }
  }

  fill4(5, 5);

  context.putImageData(imagedata, x, y);
}

<body onload="func();">
  <canvas id="image"></canvas>
</body>

I’m using Lodash to do some work on our object. So I had a little problem that I can’t solve.

I’m trying to add the result of a query, in the _.transform array. But without success.

The return is empty.

I did some tests using the console.log and the value is shown normally.

const result = _.transform(data.items, async  (r: any, v: any) => {
      let data = await Cliente.query().where('id', '=', v.codiPsv).orderBy('validade', 'asc').first()
      if (data){
        console.log(data.serialize()) --> Show object
        r.push(data.serialize())
        console.log(0)
      }
    })

    console.log(result)   --> empty