i have created a group in konvaJs
ShoulderPatternGroup = new Konva.Group();
Then, I added some shapes to it such as circles and lines:

var circle = new Konva.Circle({
    x: stage.getRelativePointerPosition().x,
    y: stage.getRelativePointerPosition().y,
    radius: 3,
    stroke: '#DCF2F1',
    strokeWidth: 2,
    draggable: true,
});
ShoulderPatternGroup.add(circle);

In another function, after calling ShoulderPatternGroup.hide() or ShoulderPatternGroup.show(), the visibility of the group changes but it does not affect its children (circles and lines).

What is wrong with my code?

i want to disappear all of group elements after calling .hide() and show them after calling .show()

I managed to code in HTML to record videos, which can work in Safari and Edge, but when I test them in Firefox, I can only download webm instead of MP4.
After searching something info, I find the process of MP4 is different from that of wav. Thus, I am there to seek for help.If you need more info, please just inform me~
Any idea would be appreciated !

record codes:

function startRecording() {
            clearRecordedData();
            navigator.mediaDevices.getUserMedia({ video: true, audio: true })
                .then((stream) => {
                    mediaRecorder = new MediaRecorder(stream, recorderOptions);

                    const liveCamera = document.getElementById('liveCamera');
                    liveCamera.srcObject = stream;
                    
                    liveCamera.muted = true;

                    mediaRecorder.ondataavailable = (event) => {
                        if (event.data.size > 0) {
                            recordedChunks.push(event.data);
                        }
                    };

                    mediaRecorder.onstop = () => {
                        recordedBlob = new Blob(recordedChunks, { type: 'video/mp4' }); 

                        console.log(recordedBlob);
                        console.log(recordedBlob.type);


                        recordedVideo.src = URL.createObjectURL(recordedBlob);
                        enableButtons(['startRecord', 'saveRecord', 'playRecord']);
                        disableButtons(['stopRecord']);
                    };

                    mediaRecorder.start();
                    recordedTime = 0;
                    updateRecordedTime();
                    disableButtons(['startRecord']);
                    enableButtons(['stopRecord']);
                })
                .catch((error) => {
                    console.error('getUserMedia error:', error);
                });
        }

save codes:

        function saveRecording() {
            if (recordedBlob) {
                const url = URL.createObjectURL(recordedBlob);
                const a = document.createElement('a');
                a.href = url;
                var urlParams = new URLSearchParams(window.location.search);
                var sourceValue = urlParams.get('source');
                a.download = sourceValue + '.mp4';

                console.log(recordedBlob);
                console.log(a);

                document.body.appendChild(a);
                a.click();
                document.body.removeChild(a);
            }
        }

I try to download the recorded video as MP4 in Firefox but failed ,turn out to be webm.

The eslint-plugin-import and eslint-import-resolver-typescript docs are quite clear that the latter is needed to support tsconfig @-rules (compilerOptions.path).

I have set it up correctly, with these:

settings: {
    "import/parsers": {
       "@typescript-eslint/parser": [".ts", ".tsx"]
    },
    "import/resolver": {
       typescript: {
         project,
       },
    }
}

Where project is resolved as such:

const project = resolve(process.cwd(), "tsconfig.json");

I know that works, it comes from turborepo’s examples.

The issue is when I use JavaScript files (as opposed to TypeScript). import/no-unresolved then throws an error.

Any way to fix this. Ideally, the typescript resolver should also be applied to the JavaScript files.

i’m learning javascrpit and I decided to make a chrome extension that will take a screenshot and send it to a notion page
i make the screenshot from de background.js and send it to the content.js

chrome.runtime.onMessage.addListener(
    function(request, sender, sendResponse) {
    if (request.message === 'capture')
   chrome.tabs.captureVisibleTab(
       null,
       {},
       function(dataUrl)
       {
           sendResponse({imgSrc:dataUrl});

       }
   );
   return true;
});

The problem is that to send the image to notion using the notion api i need the url of the image, how can i get that url ?, is there any way I can convert that screenshot to a url and be able to send it ?

I tried to send the dataURL received by the background.js but it gives me back an error

  const options = {
      method: 'PATCH',
      headers: {
          accept: 'application/json',
          'Notion-Version': '2022-06-28',
          'content-type': 'application/json',
          'Authorization': 'Bearer ' + token.access_token
      },
      body: JSON.stringify({
        "children": [{
          'type': 'image',
          'image': {
              "caption": [],
              'type': 'external',
              'external': {
                  'url': image_url
              }
          }
      }]})
    };
    fetch(`https://api.notion.com/v1/blocks/${page.id}/children`,
    options
   )
      .then(response => response.json())
      .then(response => console.log(response))
      .catch(err => console.error(err));   
  
}

I would like to add an element inside a contenteditable div at a defined position, and after clicking on a button.
I’m currently able to add content right at the end of the document, not at the position where I left the pointer before clicking the button.

<button class="myBtn" id="myBtn">append content</button>
<div contenteditable="true" class="div_edit" id="div_edit"></div>

function append_content(){
    $("#myBtn").click(function(e){
        var getOffset= $("#div_edit").offset(); 
        var relX = getOffset.left.toString() + "px";
        var relY = getOffset.top.toString() + "px";        

        var ii = $('<span class="span-add">Add a link</span>')
                .css({top: relX, left: relY});

        $("#div_edit").append(ii);
    });
}

How to append the content at the position where the pointer was before clicking outside of the specified div ($(“#div_edit”)) ?

I have following a course which used mui v4 and since a lot changed from v4 to v6, I can’t get all the styles although i managed and did my best and i am really stuck here.

This is my FeaturedMovie.jsx component

import React from 'react';
import { Typography, Box, Card, CardContent, CardMedia, styled } from '@mui/material';
import { Link } from 'react-router-dom';

const CardTypography = styled(CardContent)(({ theme }) => ({
  color: '#fff',
  width: '40%',
  backgroundColor: 'transparent',
  [theme.breakpoints.up('sm')]: {
    width: '100%',
  },
}));

function FeaturedMovie({ movie }) {
  if (!movie) return null;
  return (
    <Box sx={{ marginBottom: '20px', display: 'flex', justifyContent: 'center', height: '490px', textDecoration: 'none' }} component={Link} to={`/movie/${movie.id}`}>
      <Card sx={{ ':root': { position: 'relative' }, width: '100%', display: 'flex', justifyContent: 'flex-end', flexDirection: 'column' }}>
        <CardMedia
          sx={{ position: 'relative', top: 0, right: 0, height: '100%', width: '100%', backgroundColor: 'rgba(0,0,0,0.575)', backgroundBlendMode: 'darken' }}
          media="picture"
          alt={movie.title}
          image={`https://image.tmdb.org/t/p/original/${movie?.backdrop_path}`}
          title={movie.title}
        />
        <Box padding="20px" bgcolor="black">
          <CardTypography>
            <Typography variant="h5" gutterBottom>{movie.title}</Typography>
            <Typography variant="body2">{movie.overview}</Typography>
          </CardTypography>
        </Box>
      </Card>
    </Box>
  );
}

export default FeaturedMovie;

I tried changing the bgcolor of the Box but it’s not becoming transparent instead becomes white,
i tried overiding the root styling but nothing seems to work.

I want the CardTypography(CardContent) to have position relative and bgcolor transparent,
in the course the guy overides the root styles using classes prop and gives styles to the root but in v6 the same can’t be done (there is nothing in the documentations).

Help me out here if someone knows how to do this.

i want to make a project in which someone want to cash out amount from my account and he/she does not have my card. i want this like: he/she first select bank from which bank he/she want to cash out after that he/she should select state then branch and after that particular person . after that he/she should enter debit/credit card last 6 digit and then atm pin.procees the new window for otp verification

one time I forget debit card of my father and I used to come back 20km. for debit this idea came from there

You need to go to freelance.habr.com, write a response using js and then use the click() event to click on the submit button.
I have already figured out how to write in the textaria block. But I can’t figure out how to press the button, the button can’t be pressed.
enter image description here

All operations must be done through js

I used terminal to watch json file in the server, but when I tried to get back to react, it was not accessible.
When I go to terminal and start it again, it’s showing error messages only.

npm start in terminal does not open it anymore, what could be the problem.
I just keep getting error message like this one.

Error! Missing script: “start” Error! A complete log of this can be
found in: /path

Note that i’m using NodeJS v16.16.0

When utilizing nexe to compile my file, everything works as expected until I attempt to change the file location at that point, the program ceases to function. Seeking guidance on resolving this issue.

It looks like that is caused by sqlite3 import, so I have still imported it with Nexe using the -r node_sqlite3.node option located in the node_modules folder in this manner, and it still does not work.

"compile": "nexe ./vare.js -r node_modules/sqlite3/build/Release/node_sqlite3.node -o compiled --build"

This line is located at my package.json

When i execute my compiled .exe,
It works when the executable is located at the directory where i builded it so if i change to another directory it shows this error :

C:UsersAdministratorDocuments>compiled.exe
C:UsersAdministratorDocumentsnode_modulesbindingsbindings.js:211
      throw new Error(
      ^

Error: Could not find module root given file: "C:UsersAdministratorDocumentsnode_modulessqlite3libsqlite3-binding.js". Do you have a `package.json` file?
    at Function.getRoot (C:UsersAdministratorDocumentsnode_modules←[4mbindings←[24mbindings.js:211:13)
    at bindings (C:UsersAdministratorDocumentsnode_modules←[4mbindings←[24mbindings.js:82:32)
    at Object.<anonymous> (C:UsersAdministratorDocumentsnode_modules←[4msqlite3←[24mlibsqlite3-binding.js:1:37)
←[90m    at Module._compile (node:internal/modules/cjs/loader:1105:14)←[39m
←[90m    at Object.Module._extensions..js (node:internal/modules/cjs/loader:1159:10)←[39m
←[90m    at Module.load (node:internal/modules/cjs/loader:981:32)←[39m
←[90m    at Function.Module._load (node:internal/modules/cjs/loader:822:12)←[39m
←[90m    at Module.require (node:internal/modules/cjs/loader:1005:19)←[39m
←[90m    at require (node:internal/modules/cjs/helpers:102:18)←[39m
    at Object.<anonymous> (C:UsersAdministratorDocumentsnode_modules←[4msqlite3←[24mlibsqlite3.js:2:17)

I have posted this on the Cesium Community [-> here]

I am not able to extrude a .geojson harvested from a Cesium ION Asset.

Cesium.Ion.defaultAccessToken = ‘YOUR_TOKEN’;

var viewer = new Cesium.Viewer(‘cesiumContainer’);

// Replace ‘YOUR_ASSET_ID’ with the ID of your uploaded GeoJSON asset on Cesium Ion
var assetId = YOUR_ASSET_ID;

async function addBuildingGeoJSON() {
// Load the GeoJSON file from Cesium ion.
const geoJSONURL = await Cesium.IonResource.fromAssetId(assetId);
// Create the geometry from the GeoJSON, and clamp it to the ground.
const geoJSON = await Cesium.GeoJsonDataSource.load(geoJSONURL);

// Access the entities in the GeoJSON data source
const entities = geoJSON.entities.values;

// Extrude the buildings based on a GeoJSON property (e.g., ‘height’)
for (let i = 0; i < entities.length; i++) {
const entity = entities[I];
const heightProperty = entity.properties.getHeightProperty(); // Replace ‘getHeightProperty’ with the actual property name in your GeoJSON

if (heightProperty) {
  // Extrude the building based on the height property
  entity.polygon.extrudedHeight = heightProperty.getValue();;
  entity.polygon.perPositionHeight = true;
}
}

// Add the modified GeoJSON to the scene.
const dataSource = await viewer.dataSources.add(geoJSON);

// Move the camera so that the modified polygons are in view.
viewer.flyTo(dataSource);
}

addBuildingGeoJSON();

The vector displays but does not extrude. The challenge might be the .GeoJSON:

"features": [
    {
      "type": "Feature",
      "properties": {
        "@id": "relation/12212783",
        "addr:city": "Cape Town",
        "addr:housename": "Post Graduate Residence",
        "addr:postcode": "7530",
        "addr:suburb": "Bellville",
        "building": "dormitory",
        "building:levels": "2",
        "residential": "university",
        "type": "multipolygon"
      },
      "geometry": {
        "type": "Polygon",
        "coordinates": [...

As you can see the extrude height is building:levels. I also need this value multiplied by a constant (* 2.5)
How do I get const heightProperty = to harvest entity.properties.building:levels please?

Everytime I run a javascript code, a new terminal gets created. I would so much prefer this not to happen and just make use of my default terminal which is PowerShell.
In a nutshell this is how my workspace has been configured:

{ "terminal.integrated.profiles.windows": { "PowerShell": { "source": "PowerShell", "icon": "terminal-powershell" }, "Command Prompt": { "path": [ "${env:windir}\Sysnative\cmd.exe", "${env:windir}\System32\cmd.exe" ], "args": [], "icon": "terminal-cmd" }, "Git Bash": { "source": "Git Bash" }, "Windows PowerShell": { "path": "C:\Windows\System32\WindowsPowerShell\v1.0\powershell.exe" } "code-runner.runInTerminal": true, "code-runner.clearPreviousOutput": false, "code-runner.executorMap": { "javascript": "node", "java": "cd $dir && javac $fileName && java $fileNameWithoutExt", "c": "cd $dir && gcc $fileName -o $fileNameWithoutExt && $dir$fileNameWithoutExt", "cpp": "cd $dir && g++ $fileName -o $fileNameWithoutExt && $dir$fileNameWithoutExt", } }

What I tried is;

{ "code-runner.executorMap": { "javascript": "node", "java": "cd $dir && javac $fileName && java $fileNameWithoutExt", "c": "clear; cd $dir && gcc $fileName -o $fileNameWithoutExt && $dir$fileNameWithoutExt", "cpp": "clear; cd $dir && g++ $fileName -o $fileNameWithoutExt && $dir$fileNameWithoutExt", } }

I expected the code to work with my default terminal PowerShell but it still created another terminal named code.

I have a js audio player for html5. When playing music in the background in the browser (any) on the iPhone, the tracks do not switch automatically.

1. Go to the page with the audio player
2. Starting the track
3. Rewinding to the end
4. Minimize the browser to the background
5. After the playback of the running track is completed, the music pauses

My js audio player:

  function createTrackItem(index,name,duration){
    var trackItem = document.createElement('div');
    trackItem.setAttribute("class", "playlist-track-ctn");
    trackItem.setAttribute("id", "ptc-"+index);
    trackItem.setAttribute("data-index", index);
    document.querySelector(".playlist-ctn").appendChild(trackItem);

    var playBtnItem = document.createElement('div');
    playBtnItem.setAttribute("class", "playlist-btn-play");
    playBtnItem.setAttribute("id", "pbp-"+index);
    document.querySelector("#ptc-"+index).appendChild(playBtnItem);

    var btnImg = document.createElement('i');
    btnImg.setAttribute("class", "fas fa-play");
    btnImg.setAttribute("height", "40");
    btnImg.setAttribute("width", "40");
    btnImg.setAttribute("id", "p-img-"+index);
    document.querySelector("#pbp-"+index).appendChild(btnImg);

    var trackInfoItem = document.createElement('div');
    trackInfoItem.setAttribute("class", "playlist-info-track");
    trackInfoItem.innerHTML = name
    document.querySelector("#ptc-"+index).appendChild(trackInfoItem);

    var trackDurationItem = document.createElement('div');
    trackDurationItem.setAttribute("class", "playlist-duration");
    trackDurationItem.innerHTML = duration
    document.querySelector("#ptc-"+index).appendChild(trackDurationItem);
  }

  for (var i = 0; i < listAudio.length; i++) {
      createTrackItem(i,listAudio[i].name,listAudio[i].duration);
  }
  var indexAudio = 0;

  function loadNewTrack(index){
    var player = document.querySelector('#source-audio')
    player.src = listAudio[index].file
    document.querySelector('.title').innerHTML = listAudio[index].name
    document.title = listAudio[index].name
    this.currentAudio = document.getElementById("myAudio");
    this.currentAudio.load()
    this.toggleAudio()
    this.updateStylePlaylist(this.indexAudio,index)
    this.indexAudio = index;
  }

  var playListItems = document.querySelectorAll(".playlist-track-ctn");

  for (let i = 0; i < playListItems.length; i++){
    playListItems[i].addEventListener("click", getClickedElement.bind(this));
  }

  function getClickedElement(event) {
    for (let i = 0; i < playListItems.length; i++){
      if(playListItems[i] == event.target){
        var clickedIndex = event.target.getAttribute("data-index")
        if (clickedIndex == this.indexAudio ) { // alert('Same audio');
            this.toggleAudio()
        }else{
            loadNewTrack(clickedIndex);
        }
      }
    }
  }

  document.querySelector('#source-audio').src = listAudio[indexAudio].file
  document.querySelector('.title').innerHTML = listAudio[indexAudio].name


  var currentAudio = document.getElementById("myAudio");

  currentAudio.load()

  currentAudio.onloadedmetadata = function() {
        document.getElementsByClassName('duration')[0].innerHTML = this.getMinutes(this.currentAudio.duration)
  }.bind(this);

  var interval1;

  function toggleAudio() {

    if (this.currentAudio.paused) {
      document.querySelector('#icon-play').style.display = 'none';
      document.querySelector('#icon-pause').style.display = 'block';
      document.querySelector('#ptc-'+this.indexAudio).classList.add("active-track");
      this.playToPause(this.indexAudio)
      this.currentAudio.play();
    }else{
      document.querySelector('#icon-play').style.display = 'block';
      document.querySelector('#icon-pause').style.display = 'none';
      this.pauseToPlay(this.indexAudio)
      this.currentAudio.pause();
    }
  }

  function pauseAudio() {
    this.currentAudio.pause();
    clearInterval(interval1);
  }

  var timer = document.getElementsByClassName('timer')[0]

  var barProgress = document.getElementById("myBar");


  var width = 0;

  function onTimeUpdate() {
    var t = this.currentAudio.currentTime
    timer.innerHTML = this.getMinutes(t);
    this.setBarProgress();
    if (this.currentAudio.ended) {
      document.querySelector('#icon-play').style.display = 'block';
      document.querySelector('#icon-pause').style.display = 'none';
      this.pauseToPlay(this.indexAudio)
      if (this.indexAudio < listAudio.length-1) {
          var index = parseInt(this.indexAudio)+1
          this.loadNewTrack(index)
      }
    }
  }


  function setBarProgress(){
    var progress = (this.currentAudio.currentTime/this.currentAudio.duration)*100;
    document.getElementById("myBar").style.width = progress + "%";
  }


  function getMinutes(t){
    var min = parseInt(parseInt(t)/60);
    var sec = parseInt(t%60);
    if (sec < 10) {
      sec = "0"+sec
    }
    if (min < 10) {
      min = "0"+min
    }
    return min+":"+sec
  }

  var progressbar = document.querySelector('#myProgress')
  progressbar.addEventListener("click", seek.bind(this));


  function seek(event) {
    var percent = event.offsetX / progressbar.offsetWidth;
    this.currentAudio.currentTime = percent * this.currentAudio.duration;
    barProgress.style.width = percent*100 + "%";
  }

  function forward(){
    this.currentAudio.currentTime = this.currentAudio.currentTime + 5
    this.setBarProgress();
  }

  function rewind(){
    this.currentAudio.currentTime = this.currentAudio.currentTime - 5
    this.setBarProgress();
  }


  function next(){
    if (this.indexAudio <listAudio.length-1) {
        var oldIndex = this.indexAudio
        this.indexAudio++;
        updateStylePlaylist(oldIndex,this.indexAudio)
        this.loadNewTrack(this.indexAudio);
    }
  }

  function previous(){
    if (this.indexAudio>0) {
        var oldIndex = this.indexAudio
        this.indexAudio--;
        updateStylePlaylist(oldIndex,this.indexAudio)
        this.loadNewTrack(this.indexAudio);
    }
  }

  function updateStylePlaylist(oldIndex,newIndex){
    document.querySelector('#ptc-'+oldIndex).classList.remove("active-track");
    this.pauseToPlay(oldIndex);
    document.querySelector('#ptc-'+newIndex).classList.add("active-track");
    this.playToPause(newIndex)
  }

  function playToPause(index){
    var ele = document.querySelector('#p-img-'+index)
    ele.classList.remove("fa-play");
    ele.classList.add("fa-pause");
  }

  function pauseToPlay(index){
    var ele = document.querySelector('#p-img-'+index)
    ele.classList.remove("fa-pause");
    ele.classList.add("fa-play");
  }


  function toggleMute(){
    var btnMute = document.querySelector('#toggleMute');
    var volUp = document.querySelector('#icon-vol-up');
    var volMute = document.querySelector('#icon-vol-mute');
    if (this.currentAudio.muted == false) {
       this.currentAudio.muted = true
       volUp.style.display = "none"
       volMute.style.display = "block"
    }else{
      this.currentAudio.muted = false
      volMute.style.display = "none"
      volUp.style.display = "block"
    }
  }

I tried running music in the background on Android 11 tracks switch automatically. I was looking for information about the specifics of safari and js

I am trying to learn javascript and am trying to write a code that perform that solve factorial of any number.

Here is what i have done

function calculateFactorial(n) {
 

  let result = 1;
  for (let i = 1; i <= n; i++) {
    result += i;
  }

  return result;
}

console.log(calculateFactorial(5))

I get 16 instead of 120

How do I get a website icon/favicon from a website URL from the client side? like in Next.js/React.js? currently, my code is only getting the icon of the website if that website only has favicon.ico but with some URLS favicon.ico is not there so what can I do?

function getFaviconUrl(websiteUrl: string) {
    const url = new URL(websiteUrl);
    return `${url.protocol}//${url.hostname}/favicon.ico`;
}