Category: javascript

Given the code snippet, including a simple tsx string of a React component:

// test.ts

    import j from "jscodeshift";

    const code = `
    const words: string[] = ["hello", "world"];
    
    export default function(){
        return <div>{words.map(word => <span>{word}</span>)}</div>;
    }
    `;

    const ast = j(code);

    console.log(ast.toSource());

When that file is executed with node ts-node test.ts it errors like this:

.../jscodeshift/node_modules/@babel/parser/src/parser/error.js:97
    const err: SyntaxError & ErrorContext = new SyntaxError(message);
                                            ^
SyntaxError: Const declarations require an initialization value (1:11)
...

How can I use the j options to use a parser that successfully parses the .tsx code?

I expect something like

const ast = j(code, { parser: something, plugins: [somethingElse]});

But I couldn’t make it work, so far

I’m trying to compare two passwords , one from DB and other is user entered. The one from db is hashed and stored in binary format. So I have to conver it to string before comparing.

 console.log(
      user.PasswordHash.toString('base64') ===
        '$2a$10$UZptbo5h4lQFYmK352CPf.jDvPZh1pm3uC3Nb0wEVjF/RUCw2OU2G'
    ); //false

When I look in console user.PasswordHash.toString(‘base64’) evaluates to $2a$10$UZptbo5h4lQFYmK352CPf.jDvPZh1pm3uC3Nb0wEVjF/RUCw2OU2G which is the same value.

What is happening?

bcrypt.compareSync(
      password,
      user.PasswordHash.toString('base64')); //false

Any help is appreciated.

So I’ve created a JS function that filters specific rows in the table away, but since It’s only a hide/show filter, the odd/even rows gets mixed up.

This is how my JS filter works.

var hide_info_checkbox = document.getElementById("hide_info");
var hide_debug_checkbox = document.getElementById("hide_debug");

hide_info_checkbox.addEventListener('change', function() {
  var info_td = document.getElementsByClassName("info");
  if (this.checked) {
    for (var i = 0; i < info_td.length; i++) {
      info_td[i].classList.add("ftp_hide_row");
    }
  } else {
    for (var i = 0; i < info_td.length; i++) {
      info_td[i].classList.remove("ftp_hide_row");
    }
  }
});

hide_debug_checkbox.addEventListener('change', function() {
  debug_td = document.getElementsByClassName("debug");
  if (this.checked) {
    for (var i = 0; i < debug_td.length; i++) {
      debug_td[i].classList.add("ftp_hide_row");
    }
  } else {
    for (var i = 0; i < debug_td.length; i++) {
      debug_td[i].classList.remove("ftp_hide_row");
    }
  }
});

/*
    FTP styling
*/

.ftp_table {
  border-collapse: collapse;
  width: 100%;
  table-layout: fixed;
  overflow-wrap: break-word;
}

.ftp_table tr:nth-child(even) {
  background-color: #d8d8d8;
}

.ftp_hide_row {
  display: none;
}

<input type="checkbox" id="hide_info" name="hide_info" value="hide_info">
<label for="hide_info"> Hide INFO</label>
<input type="checkbox" id="hide_debug" name="hide_debug" value="hide_debug">
<label for="hide_debug"> Hide DEBUG</label>
<table class="ftp_table" id="ftp_table">
  <tbody>
    <tr>
      <th>Log</th>
    </tr>
    <tr class="info">
      <td>2021-10-06 12:38:15.946 INFO [conftest:101] -------------- Global Fixture Setup Started --------------</td>
    </tr>
    <tr class="debug">
      <td>2021-10-06 12:38:16.009 DEBUG [Geni:37] Initializing </td>
    </tr>
    <tr class="info">
      <td>2021-10-06 12:38:16.059 INFO [ArtifactoryWrapper:21] Downloading</td>
    </tr>
    <tr class="info">
      <td>2021-10-06 12:38:16.061 INFO [ArtifactHandler:55] Art</td>
    </tr>
    <tr class="debug">
      <td>2021-10-06 12:38:16.063 DEBUG [SessionManager:84] GET</td>
    </tr>
    <tr class="debug">
      <td>2021-10-06 12:38:16.070 DEBUG [connectionpool:227] Starting new HTTP connection (1)</td>
    </tr>
    <tr class="debug">
      <td>2021-10-06 12:38:17.422 DEBUG [connectionpool:452] 200 None</td>
    </tr>
    <tr class="info">
      <td>2021-10-06 12:38:17.561 INFO [SessionManager:52] No application/json Content-Type header in GET response</td>
    </tr>
    <tr class="debug">
      <td>2021-10-06 12:38:17.422 DEBUG [connectionpool:452] 200 None</td>
    </tr>
  </tbody>
</table>

As you can see, the odd/even gets mixed up, since I only add a class which hides the rows, and doesn’t delete them:

Is there a way to fix this, so the odd/even is as expected?

If you’ve got something like this:

const someObjectArray = [
  {property: 'foo', property2: 'bar', property3: 'baz'},
  {property: 'fooDiff', property2: 'barDiff', property3: 'bazDiff'}
]

const someOtherObjectArray = someObjectArray
  .map(({property2, property3}) => ({property2, property3}))

Is there a kind of short-form-syntax to express this?

map(({property2, property3}) => ({property2, property3}))

this is the error always comes up, so is there is another solution or i have to learn about error boundaries plz help as soon as possible

I’m using PlyrJS with vimeo and it works just fine on PC but not mobile.

When I change devices in chrome dev tools to phone there is an error “The AudioContext was not allowed to start. It must be resumed (or created) after a user gesture on the page” that I can’t solve.

Important: I’m not trying to autoplay the video, only play on click. My html looks like this:

<div class="plyr__video-embed">
 <iframe src="https://player.vimeo.com/video/148751763" allow=""></iframe>
</div>

and the plyr-part script:

const players = Plyr.setup('.plyr__video-embed', {
    controls: [],
    ratio: '9:16',
    autoplay: false
});

Can someone give me a clue on how to fix this?

let myRole = message.guild.roles.cache.find(role => role.name === "Admin");
  message.guild.channels.create(
                           channelName2, 
                          {
                            type: "GUILD_TEXT",
                            permissionOverwrites: [
                              {
                                id: myRole.id,
                                allow: ["SEND_MESSAGES", "VIEW_CHANNEL", "READ_MESSAGE_HISTORY"],
                              },
                              {
                                id: myRole.id,
                                deny: ["VIEW_CHANNEL"]
                              }
                            ]           
                          }

Bot creates the text channel but has no permissions edited and it ignored almost whatever I write in “id: XXXXXX”

So was trying to make a cross for my menu but it doesn’t seem to be working. Here is the code and i am also using js to rotate it by 45 deg: Thank You in advance!! even after changing the origin it is not working and refuses to make a perfect cross

JS:

document.addEventListener('DOMContentLoaded', function(){
                let nav = document.getElementById('nav-toogle')
                let bars = document.querySelectorAll(".open")
                let active = false;
                document.querySelector('#nav_menu').addEventListener('click', function(){
                    if(!active){
                        bars[0].style.transform = "rotate(45deg)"
                        bars[1].style.opacity = "0"
                        bars[2].style.transform = "rotate(-45deg)"
                        nav.style.maxHeight = "0vh";
                        nav.style.minHeight = "100vh";
                        active = true;
                    }
                    else{
                        bars[0].style.transform = "rotate(0deg)"
                        bars[1].style.opacity = "1"
                        bars[2].style.transform = "rotate(0deg)"
                        nav.style.minHeight = "0vh";
                        nav.style.maxHeight = "0vh";
                        active = false; 

HTML

<div class="menu" id="nav_menu">
       <span class="open"></span>
       <span class="open"></span>
       <span class="open"></span>
</div>

CSS

.open{
   width: 30px;
   height: 1px;
   background-color: var(--secondary);
   margin-bottom: 5px;
   transform-origin: left;
   }

.menu{
   position: fixed;
   top: 3.5em;
   right: 3.5em;
   width: 30px;
   height: 30px;
   display:none;
   cursor: pointer;
   justify-content: center;
   align-items: center;
}

let selected_user = '11';
const arrayOfUsers = ['11', '12', '13'];
console.log(arrayOfUsers); // ['11', '12', '13']
let indexMainUser = arrayOfUsers.indexOf(selected_user);
arrayOfUsers.splice(indexMainUser, 1);
console.log(arrayOfUsers); //  ['12', '13']

I have the above code in JavaScript and I am wondering why does a constant array gets modified with splice method?

I am doing a Soduko Solver website which i am hosting on github for personal use however i get this error and it wont display the soduko solver which i am integrating/getting from another online source, locally the website displays as it should but on github it doesnt, i tried several methods including putting the

 <meta http-equiv="Content-Security-Policy" content="upgrade-insecure-requests">

But it doesnt seem to work and i am stuck with the same error “Mixed content: load all resources via HTTPS to improve the security of your site”
Its blocking the “embed.html” found at http://sudokusolver.net/embed.html

My current code opens up an input via a click by adding a class. I’m having trouble adding a second click that removes the added class when the user clicks off the input. I added a second click event but it just stops my first click event from working.

Is there a different way to approach this using pure JavaScript?

(Commented out failed attempt.)

let searchElement = document.querySelector('#searchElement');
let offCanvas = document.querySelector('#main');

searchElement.addEventListener('click', () => {
  searchElement.classList.add('extendInputSearch');
});


// offCanvas.addEventListener('click', () => {
  // searchElement.classList.remove('extendInputSearch');
// });

* {
  padding: 0;
  margin: 0;
}

html,
body {
  height: 100%;
  width: 100%;
}

main {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100%;
  background-color: #e1e2f1;
}

form {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
}

input {
  width: 100%;
  height: 32px;
  border: none;
  outline: none;
  font-size: 1rem;
}

.inputSearch {
  display: flex;
  align-items: center;
  width: 100%;
  max-width: 15px;
  padding: 8px 20px;
  background-color: #ffffff;
  border: 1px solid transparent;
  border-radius: 6px;
  transition: all 0.6s cubic-bezier(0.16, 1, 0.3, 1);
}

.inputSearch:hover {
  border: 1px solid #7e51fa;
}

.inputSearch i {
  color: #7e51fa;
  margin-right: 20px;
}

.extendInputSearch {
  max-width: 400px;
}

<link rel="stylesheet" href="https://pro.fontawesome.com/releases/v5.10.0/css/all.css" integrity="sha384-AYmEC3Yw5cVb3ZcuHtOA93w35dYTsvhLPVnYs9eStHfGJvOvKxVfELGroGkvsg+p" crossorigin="anonymous"/>

<main id="main">
    <form>
      <div id="searchElement" class="inputSearch">
        <i class="fas fa-search"></i>
        <input type="text" placeholder="Search">
      </div>
    </form>
  </main>

I want to get an image from a blob. And I want to pass the parameter imageToShow in createImageFromBlob , but the function does not see it

Where is the error?

imageToShow: any;
    
...
this.createImageFromBlob(data, this.imageToShow);
...


createImageFromBlob(image: Blob, imageToShow: any) {
  let reader = new FileReader();
  reader.onload = () => {
    imageToShow = reader.result;
  };
  reader.readAsDataURL(image);
}

What’s is the cookies? And what’s its benefits? And me as web dev how to use it?
like I always see it on a lot of sites and I heard about it in lectures.

I wrote a simple page on js and php to live record audio from microphone. Logic is simple:

JS

1. Get chunk of data from mic;
2. Base64 encode it and urlencode it;
3. Send it via POST request;

PHP

4. Base64 decode data;
5. (re)Write to .ogg file;
6. Repeat 1 after delay.

The data is successfully written to file, but when I try to play it, player says that file is broken.

The blob solution from Mozilla guide is worked for me, I want exactly PHP solution with saving (rewriting) to file.

The full code below, what am I doing wrong?

<?php
if(isset($_POST["data"]))
{
file_put_contents("r.ogg", base64_decode($_POST["data"]));
exit;   
}
?>

<script>
var mediaRecorder = null;
let chunks = [];

if (navigator.mediaDevices &amp;&amp; navigator.mediaDevices.getUserMedia) {
   console.log('getUserMedia supported.');
   navigator.mediaDevices.getUserMedia (
      {
         audio: true
      })
      .then(function(stream) {
        mediaRecorder = new MediaRecorder(stream);
        mediaRecorder.start(2000);
        
        mediaRecorder.ondataavailable = function(e) {
            chunks.push(e.data);
            const blob = new Blob(chunks, { 'type' : 'audio/ogg; codecs=opus' });
            chunks = [];
            var reader = new FileReader();
            reader.readAsDataURL(blob); 
            reader.onloadend = function() {
            var data = reader.result.split(";base64,")[1]; 
            requestp2("a.php", "data="+encodeURIComponent(data));
            }
}
      })
      .catch(function(err) {
         console.log('The following getUserMedia error occurred: ' + err);
      }
   );
} else {
   console.log('getUserMedia not supported on your browser!');
}

function requestp2(path, data)
{
var http = new XMLHttpRequest();
http.open('POST', path, true);
http.setRequestHeader('Content-type', 'application/x-www-form-urlencoded');
http.send(data);
}
</script>

I want to call function with paramter from child compponent, i pass the function as a props and when i call this function its get to her but the paramter that i pass to the function is undiffend.

how can i call this function and send to her parmetrs?

here is my code:

perent function:

  async function doSomething(param){
//here i see in debug that param is undiffend
var do = param*2
console.log(do)
}

the call of the child componnet:

<child doSomething ={()=>doSomething()}/>

child:

export default function child(props) {
    const { doSomething} = props;
return (
            <div  onClick={() => doSomething(3)}>
           <button></button>
            </div>
    
)
 }