Category: javascript

I tried to hash password 1000 times. Then hash the result again, but I get a different final result than password hashed 1001 times despite having the same salt

import {pbkdf2Sync} from "pbkdf2";

const hash = (password: string, iterations: number) => {
    const salt = "salt"
    let hashedNTimes = pbkdf2Sync(password, salt, iterations, 64, 'sha256')
    let hashedNTimesAndOnceAgain = pbkdf2Sync(hashedNTimes, salt, 1, 64, 'sha256')
    let hashedNPlus1Times = pbkdf2Sync(password, salt, iterations + 1, 64, 'sha256')

    console.log(hashedNTimes.toString('hex'))
    console.log(hashedNTimesAndOnceAgain.toString('hex'))
    console.log(hashedNPlus1Times.toString('hex'))
}

If Object.create makes new deep copy of the object, what should happen post deleting the property from the newly created object?

Expected Output: Undefined

Actual Output: Karna

Code

var obj1 = {name:"Karna",loc:"Bengaluru"};

var obj2 = Object.create(obj1);

delete obj2.name;

console.log(obj2.name);

Could you please help me to understand why obj2.name still referring to obj1’s property?

I want to develop an offline capable progressive web application.

Looking into an example of such an app – airhorner I find that it uses specific version of the application to make sure correct version is loaded.

https://github.com/GoogleChromeLabs/airhorn/blob/main/app/sw.js#L21

However what happens with older version? Do I need to cleanup it? My app is rather large because it contains lots of data (html+js ~1.5MB) and from what I read on iOS there is limit of 50MB of cache per app.

So I wonder if I need to make sure I remove cache of older versions or I can just assume it is cache and it will be removed because it is too old?

if I do need to remove older version, where is the correct place to call it?

I see in https://stackoverflow.com/a/45468998/66522 that it is called for activate event. Can I just add another event listener on this event in addition to this one? https://github.com/GoogleChromeLabs/airhorn/blob/main/app/sw.js#L40

I have a Robot Framework test that generates a pop-up HTML report. Right now I’m just testing against a image/video database. Here is a screen grab.

The issue is the images. That link is supposed to navigate to the image. No dice. A thumbnail is supposed to be in that 50×50 square. I can inspect the code, see that the URL is right and even verify the image exists at that location.

When I follow the link, I get this blocked message. No idea why.

I tried it in multiple browsers, so it has to be the way I’m dynamically building the page.

All I’m doing is taking the image file URL from the Robot Framework test results and creating some HTML text in the new window. Later that get’s put into the table in lieu of text or other data. I tried that same approach on the parent window and it works fine.

Why isn’t the image loading in the popup?

I’ve been creating a JS website where it tells you your age in days. I wrote the code, so that, if you were born before 1990, the website says “Yikes you’re old”. I styled that text apart from the other text but the output was on another line. I want to bring both texts on the same line. I don’t know how to do that, so your help is greatly appreciated. Here’s the JS code:

function ageInDays() {
  // variables
    var birthYear = prompt("What Year Were You Born In?");
    var ageInDayss = (2021 - birthYear) * 365;

  //text

    if (birthYear>1990) {
        var h1 = document.createElement('h1');
        var textAnswer = document.createTextNode("You are " + ageInDayss + " days 
        old.");
        h1.setAttribute('id', 'ageInDays');
        h1.appendChild(textAnswer);
        document.getElementById('flex-box-result').appendChild(h1);

   } else {
       var h1 = document.createElement('h1');
       var h2 = document.createElement('h2');
       var textAnswer = document.createTextNode("You are " + ageInDayss + " days old.");
       var textAnswer1 = document.createTextNode(" Yikes... that's old.");
       h1.setAttribute('id', 'ageInDays');
       h2.setAttribute('id', 'yikes');
       h1.appendChild(textAnswer);
       h2.appendChild(textAnswer1);
       document.getElementById('flex-box-result').appendChild(h1).appendChild(h2);
    }


}

How do I bring the “else” output on one line?

I have a accordion which is side-by-side but the problem is when i open the first accordion on right side ( Section 5) its going to bottom on the below (Section 4) but i don,’t want this and also when the page will open in browser it should be below the (section 4). on left .
i have try with different code ….there are different different issue is comming.

here is the link

https://codepen.io/soumenework/full/gOGwmaP

 // Get all Accordion and Panel
 let accHeading = document.querySelectorAll(".ttb .accordion");
 let accPanel = document.querySelectorAll(".ttb .accordion-panel");
 
 for (let i = 0; i < accHeading.length; i++) {
     // Execute whenever an accordion is clicked 
     accHeading[i].onclick = function() {
         if (this.nextElementSibling.style.maxHeight) {
            hidePanels();     // Hide All open Panels 
         } else {
            showPanel(this);  // Show the panel
         } 
     };
 }
 
 // Function to Show a Panel
 function showPanel(elem) {
   hidePanels();
   elem.classList.add("active");
   elem.nextElementSibling.style.maxHeight = elem.nextElementSibling.scrollHeight + "px";
 }
 
 // Function to Hide all shown Panels
 function hidePanels() {
   for (let i = 0; i < accPanel.length; i++) {
       accPanel[i].style.maxHeight = null;
       accHeading[i].classList.remove("active");
   }
 }

  * {box-sizing: border-box;}
            
           
  .accordion {
    background-color: #eee;
    color: #444;
    cursor: pointer;
    padding: 18px;
    margin: 0;
    font-weight: 300;
  }
  
  
  .active, .accordion:hover, .accordion:hover::after {
    background-color: #007eff;
    color: white;
  }
  
 
  .ttb .accordion::after {
    content: '02B';
    color: #777;
    font-weight: bold;
    float: right;
  }
  

  .ttb .active::after {
    content: "2212";
    color: white;
  }
  
 
  .accordion-panel {
    padding: 0 18px;
    overflow: hidden;
    max-height: 0;
    transition: max-height 0.2s ease-out;
  }
  

.dw {
box-sizing: border-box;
-moz-column-gap: 0;
column-gap:10px;

-moz-column-count: 2;
column-count: 2;
}

.dw-pnl {
-moz-column-break-inside: avoid;
break-inside: avoid;
}
@media (max-width: 768px) {
.dw {
-moz-column-count: 1;
column-count: 1;
}
}

 <div class="dw">
   
    <div class="dw-pnl dw-pnl--fcs ttb ">
        <h2 class="accordion active">Section  1</h2>
        <div  class="accordion-panel" style="max-height: 68px;">
          <p>aaa Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
        </div> 
      
    </div>
 
    <div class="dw-pnl dw-pnl--fcs ttb">
        <h2 class="accordion ">Section 2</h2>
        <div  class="accordion-panel">
          <p>aaa Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
        </div> 
      
    </div>
   
    <div class="dw-pnl dw-pnl--fcs ttb">
        <h2 class="accordion ">Section 3</h2>
        <div  class="accordion-panel">
          <p>aaa Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
        </div>       
    </div>
 
    <div class="dw-pnl dw-pnl--fcs ttb">
        <h2 class="accordion ">Section 4</h2>
        <div  class="accordion-panel">
          <p>aaa Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
        </div>       
    </div>
 
    <div class="dw-pnl dw-pnl--fcs ttb">
        <h2 class="accordion ">Section 5</h2>
        <div  class="accordion-panel">
          <p>aaa Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
        </div>       
    </div>
 
    <div class="dw-pnl dw-pnl--fcs ttb">
        <h2 class="accordion ">Section 6</h2>
        <div  class="accordion-panel">
          <p>aaa Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
        </div>       
    </div>
 
  
    <div class="dw-pnl dw-pnl--fcs ttb">
        <h2 class="accordion ">Section 7</h2>
        <div  class="accordion-panel">
          <p>aaa Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
        </div>       
    </div>
 
  
    <div class="dw-pnl dw-pnl--fcs ttb no_opcity">
        <h2 class="accordion ">Section 8</h2>
        <div  class="accordion-panel">
          <p>aaa Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
        </div>       
    </div>
 
    <div class="dw-pnl dw-pnl--fcs ttb no_opcity">
        <h2 class="accordion ">Section  9</h2>
        <div  class="accordion-panel">
          <p>aaa Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
        </div>       
    </div>
 
    <div class="dw-pnl dw-pnl--fcs ttb no_opcity">
        <h2 class="accordion ">Section  10</h2>
        <div  class="accordion-panel">
          <p>aaa Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
        </div>       
    </div>
 
  
   
   
    
   
    </div>

please help
thank you

In React, or JavaScript in general, if I make an HTTP GET request to a REST API route that responds with a file, e.g. a png image, how can I then get the browser to download that file?

axios.get('https:/myapi.com/download/cat.png')
  .then((response) => {
    console.log(response);
  });

Is it possible to convert ‘dd/mm/yy 00:00:00’ format to normal Date format eg(Sun Nov 28 2021 00:00:00 GMT+0530 (India Standard Time))

eg date - ""10/12/2021 23:59:59""
convert to - (Fri Dec 10 2021 00:00:00 GMT+0530 (India Standard Time))

can omit time zone

I’m using this little js application found here: https://www.youtube.com/watch?v=u7R7yuQ6g9Y

const excel_file = document.getElementById('excel_file');

excel_file.addEventListener('change', (event) => {

      if (!['application/vnd.openxmlformats-officedocument.spreadsheetml.sheet', 'application/vnd.ms-excel'].includes(event.target.files[0].type)) {
            document.getElementById('excel_data').innerHTML = '<div class="alert alert-danger">Only .xlsx or .xls file format are allowed</div>';

            excel_file.value = '';

            return false;
      }

      var reader = new FileReader();

      reader.readAsArrayBuffer(event.target.files[0]);

      reader.onload = function (event) {

            var data = new Uint8Array(reader.result);

            var work_book = XLSX.read(data, { type: 'array' });

            var sheet_name = work_book.SheetNames;

            var sheet_data = XLSX.utils.sheet_to_json(work_book.Sheets[sheet_name[0]], { header: 1 });

            if (sheet_data.length > 0) {
                  var table_output = '<table class="listViewTable table-sortable" id="listViewTable">';

                  for (var row = 0; row < sheet_data.length; row++) {

                        table_output += '<tr class="ce1 colorYellow">';

                        for (var cell = 0; cell < sheet_data[row].length; cell++) {

                              if (row == 0) {

                                    table_output += '<th class="name1 hsText">' + sheet_data[row][cell] + '</th>';

                              }
                              else {

                                    table_output += '<td class="entry1 hsText">' + sheet_data[row][cell] + '</td>';

                              }

                        }

                        table_output += '</tr>';

                  }

                  table_output += '</table>';

                  document.getElementById('excel_data').innerHTML = table_output;
            }

            excel_file.value = '';

      }

});

<!DOCTYPE HTML>
<html>
<head>
    <meta charset="utf-8" />
    <title>Convert Excel to HTML Table using JavaScript</title>
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">

    <script type="text/javascript" src="https://unpkg.com/[email protected]/dist/xlsx.full.min.js"></script>
</head>
<body>
    <div class="container">
        <h2 class="text-center mt-4 mb-4">Convert Excel to HTML Table using JavaScript</h2>
        <div class="card">
            <div class="card-header"><b>Select Excel File</b></div>
            <div class="card-body">
                
                <input type="file" id="excel_file" />

            </div>
        </div>
        <div id="excel_data" class="mt-5"></div>
    </div>
    <script src="excel.js"></script>
</body>
</html>

I have a questions to this:

1. Some tr and td elements need different styling. How can I get an output like this:

<tr class="row-one">
<td class="column-one-data-cell"></td>
<td class="column-two-data-cell"></td>
<td class="column-three-data-cell"></td>
</tr>

and in a different case something like:

<tr class="row-one">
  <td class="row-one-data-cell"></td>
</tr>
<tr class="row-two">
  <td class="row-two-data-cell"></td>
</tr>
<tr class="row-three">
  <td class="row-three-data-cell"></td>
</tr>

That would make it possible to do so much more with it, like also write the data in a bootstrap grid system with different styles for different cols etc.

Your help would be very much apprechiated!

I would need to find a solution to send via a single axios POST request both of the following:

1. json structure
2. binary file (excel file)

How can I achieve this?

  let files = event.target.files;
  const fileReader = new FileReader();
  fileReader.readAsText(files[0], null);
  fileReader.onload = () => {
    this.fileContent = fileReader.result;

  let binaryDataForObject = this.fileContent;

  let referenceDataStructure = {
    textData: textDataForObject,
    binaryData: binaryDataForObject,
    referenceDataFileExtension: this.referenceDataFileExtension,
    userProvidedDataTypes: this.columnTypes
  };
  }

  this.axios
    .post(
      "http://url,
      referenceDataStructure
  )

This works technically but on the java side I couldn’t figure out, how to decode the binary data (encoded as a string) so that it is treated as an excel file.

Thank You in advance for any meaningful responses.
Lubos.

I am currently setting up a microservice project and I am running into some issues with building and running it.

So in essence I have a UI, a graphQL gateway, a couple of “leaf nodes”, and some utility packages that keep our logging libraries etc.

All of these apps/services builds fine if I open a terminal for each and every one of them, which is less than ideal.

I thought it would make sense if I create a docker image for every service, but the issue is that it would need to follow symlinks.

The reason for it needing to follow symlinks is because that is how npm installs local packages. And I don’t want to/cannot publish the packages anywhere.

So is there any common way of handling multiple servers in multiple node packages with dependencies to one another like this?

I’ve got a JSON object with the office hours / working hours specified for each day of the week.
My objective is to be able to simplify the textual output of the object without the need for repeating unnecessary days’ working hours that are the same as the previous day’s working hours.

The current output is as followed:

Monday: 08:00 AM - 21:00 PM
Tuesday: 08:00 AM - 21:00 PM
Wednesday: 08:00 AM - 21:00 PM
Thursday: 08:00 AM - 21:00 PM
Friday: 08:00 AM - 21:00 PM
Saturday: 08:00 AM - 18:00 PM

I’m doing the following to display the textual output of the working hours for each day (it should skip any days with the start and end time set to 00:00 AM - such as Sunday):

// Office hours object
const json_office_hours = '{"Monday":{"start":"08:00 AM","end":"21:00 PM"},"Tuesday":{"start":"08:00 AM","end":"21:00 PM"},"Wednesday":{"start":"08:00 AM","end":"21:00 PM"},"Thursday":{"start":"08:00 AM","end":"21:00 PM"},"Friday":{"start":"08:00 AM","end":"21:00 PM"},"Saturday":{"start":"08:00 AM","end":"18:00 PM"},"Sunday":{"start":"00:00 AM","end":"00:00 AM"}}';
const office_hours = JSON.parse(json_office_hours);


// Iteration
let office_hours_text = "";
let oh_prev_day = "Monday";
for(let day in office_hours) {
    if(office_hours.hasOwnProperty(day)) {
        let oh_start = office_hours[day].start;
        let oh_end = office_hours[day].end;

        if(oh_start !== '00:00 AM' && oh_end !== '00:00 AM') {
            office_hours_text += day + ": " + oh_start + " - " + oh_end + 'n';
        }
        oh_prev_day = day;
    }
}

console.log(office_hours_text);

The simplified output I’m trying to achieve, is the following:

Monday - Friday: 08:00 AM - 21:00 PM
Saturday: 08:00 AM - 18:00 PM

For some reason, I cannot wrap my head around simplifying the output.

Your assistance would be greatly appreciate – and thank you.

13. Write a function that takes a list of strings and prints them, one per line, in a rectangular frame. For example the list [“Hello”, “World”, “in”, “a”, “frame”] gets printed as:

• Hello *
• World *
• in *
• a *
• frame *

I am creating email form to get email from the people who visit my sites and I want to use my components with mui but I cant solve this problem of not knowing where to put in order according to mui docs. Please help me how should I sole this with mui textform components

import Head from "next/head";
import React, { useRef } from "react";
import Typography from "@mui/material/Typography";
import TextField from "@mui/material/TextField";
import Button from "@mui/material/Button";
import FormControl from "@mui/material/FormControl";
import Input from "@mui/material/Input";

import emailjs from "emailjs-com";

const Contact = () => {
  const formRef = useRef();
  const handleSubmit = (e) => {
    e.preventDefault();
    emailjs
      .sendForm(
        "service_8k2gokc",
        "template_4jnr2mo",
        formRef.current,
        "user_Fjp6kF1HqDs8hirWaxf8S"
      )
      .then(
        (result) => {
          console.log(result.text);
        },
        (error) => {
          console.log(error.text);
        }
      );
  };
  return (
    <>
      <Head>
        <title>Contact Me</title>
      </Head>
      <div>
        <Typography variant="h4" align="center">
          Start Your Journey With Mee!
        </Typography>
        <FormControl ref={formRef} onSubmit={handleSubmit}>
          <TextField type="text" placeholder="Name" name="user_name" />
          <TextField type="text" placeholder="Subject" name="user_subject" />
          <TextField type="text" placeholder="Email" name="user_email" />
          <TextField rows="5" name="message" placeholder="Message" />
          <Button>Submit</Button>
        </FormControl>
      </div>
    </>
  );
};

export default Contact;

I found this function:

function sliceIntoChunks(arr, chunkSize) {
  const res = [];
  for (let i = 0; i < arr.length; i += chunkSize) {
    const chunk = arr.slice(i, i + chunkSize);
    res.push(chunk);
  }
  return res;
}

and I want to type it:

export const sliceIntoChunks = <T>(
  arr: Array<T>,
  chunkSize: number
): Array<T> => {
  const res: T[] = [];

  for (let i = 0; i < arr.length; i += chunkSize) {
    const chunk = arr.slice(i, i + chunkSize);
    res.push(chunk);
  }
  return res;
};

Getting an error here: res.push(chunk);

error:

Argument of type ‘T[]’ is not assignable to parameter of type ‘T’.
‘T’ could be instantiated with an arbitrary type which could be
unrelated to ‘T[]’.

How do I implement this correctly?