Category: javascript

These days, I studied about sync, async in Javascript.
And then now, I’m gonna make a crawling program using Puppeteer.

There are many example code in crawling as Puppeteer.
But, I have one question.
Why do they use a ‘async’ in basic example script?

Can’t I use ‘sync’ programming in crawling as Puppeteer?
Is there a issue that I don’t know?

It doesn’t seem useful if I don’t use multi-threads(multi crawling).

I want to know about that

So I am creating a line chart where I have displayed the x axis with time in ‘HH:mm’ format but in the tooltip I want to show the time in ‘HH:mm:ss’. If I am trying to customize my tooltip it takes every second as 0. Is there any way to customize the tooltip so that the seconds are visible properly?

x-axis: ["11:05", "11:06", "11:06", "11:07", "11:07", "11:08", "11:08", "11:09"]
If I convert it to seconds then the data will be ["11:05:30", "11:06:00", "11:06:30", "11:07:00", "11:07:30", "11:08:00", "11:08:30", "11:09:00"] but I need to display my x axis only in hours and minutes.

callback function: 
tooltips: {
                callbacks: {
                    title:  (tooltipItems, data) => {
                        let label = tooltipItems[0].label;
                        label = momentInstance(labelText, 'hh:mm:ss').format(MMM DD - hh:mm:ss A');
                        return label;
                    },
                }

It is displaying as "11:05:00", "11:06:00", "11:06:00", "11:07:00", "11:07:00", "11:08:00", "11:08:00", "11:09:00" for each data point. 

var get=document.getElementById("nameholder").value;
var submit=document.getElementById("submit");

submit.addEventListener("click",function(){
    console.log(get);
});

I have a Laravel project for API and a VueJS project for the front end. I need to upload large video files to the server. My first question is, what is the best way to upload large files to the server with minimum failure?

I have decided to upload the file in chunks and for this purpose, I have tried two different ways.

Using resumablejs:

this.r = new Resumable({
  target:process.env.API_URL+'upload',
  query:{upload_token:'my_token'},
  headers:{
    Authorization: 'Bearer '
  },
  maxChunkRetries: 1,
  simultaneousUploads: 1,
  testChunks: false,
});
// Resumable.js isn't supported, fall back on a different method
if(!this.r.support) return alert('Your browser doesn't support chunked uploads. Get a better browser.');
this.r.assignBrowse(this.$refs.videodropzone);
this.r.assignDrop(this.$refs.videodropzone);
// set up event listeners to feed into vues reactivity
this.r.on('fileAdded', (file, event) => {
  file.hasUploaded = false
  console.log('this.files', this.files)
  // keep a list of files with some extra data that we can use as props
  this.files.push({
    file,
    status: 'uploading',
    progress: 0
  })
  this.r.upload()
})
this.r.on('fileSuccess', (file, event) => {
  this.findFile(file).status = 'success'
})
this.r.on('fileError', (file, event) => {
  this.findFile(file).status = 'error'
})
this.r.on('fileRetry', (file, event) => {
  this.findFile(file).status = 'retrying'
})
this.r.on('fileProgress', (file) => {
  // console.log('fileProgress', progress)
  const localFile = this.findFile(file)
  // if we are doing multiple chunks we may get a lower progress number if one chunk response comes back early
  const progress = file.progress()
  if( progress > localFile.progress)
    localFile.progress = progress
})

Creating manual chunk:

upload() {
  const url = 'upload'
  this.$axios.post(url, this.formData).then(() => {
    this.chunks.shift()
  }).catch((error) => {
  })
},
createChunks() {
  let size = 1024 * 1000, chunks = Math.ceil(this.file.size / size)

  for (let i = 0; i < chunks; i++) {
    this.chunks.push(this.file.slice(
      i * size, Math.min(i * size + size, this.file.size), this.file.type
    ))
  }
}

Both codes give me the same output in the backend. The next part is to append the chunk files into one final file. For this, I have written the following code in Laravel-

public function upload(Request $request)
{
    $file = $request->file('file');
    Storage::disk('local')->append('output/' . $file->getClientOriginalName(), $file->get());
}

Now, here is my problem. I can upload large files using the code above. But the output is not right I think although the output and input file size is the same. The output video file is not playable. It plays first few seconds then it stops. I think only the first chunk is playable. I have tested with a 10MB video file.
Then I have tested with a 10MB pdf file, after uploading the pdf file, I can open the output file and the output is ok. But for the video file, I cannot play the whole video. What is the problem here?

I am making an autocomplete function. When I type the ID of the user. The other textbox should fetched the name. For example, `

I typed “4” then the other textbox should have the value of
“hwoarang”.

My current function is working for first textbox only. It is not dynamic. Is there a way where i can do it dynamically? I think i need to autoincrement my ID in controller because in Ajax i’m just calling the ID which is only good for 1 textbox.

Ajax:

                $(document).ready(function(){


                    var list =$('#list').DataTable({  // This is for fetching my data
      dom: 'lBfrtip',
        buttons: [
            'print', 'csv', 'copy', 'excel', 'pdfHtml5'
        ],columnDefs: [ {
targets: [0,1,2,3,4,5,6,7,8,9,10,11,12],
className: 'bolded'
}
],

        "processing": false, //Feature control the processing indicator.
        "serverSide": true, //Feature control DataTables' server-side processing mode.    
        "order": [], //Initial no order.
        "paging":false,
        
 
        // Load data for the table's content from an Ajax source
        "ajax": {
              "url": "<?php echo site_url('controller/lists')?>",
            "type": "POST",
            "data": function ( data ) {
                
        
     
            }
    
           
        },

 
    });


               $(document).on('keyup', '#id', function(event){   // This is my autocomplete function
               event.preventDefault();
                   
               var id= $('.id').val();
    
               
                    $.ajax({
                           url:"<?=site_url('controller/lists')?>",
                           method:"GET",
                           data:{id:id},
                           dataType:"json",
                           success:function(data){
                               $('#id').val(data.id); 
                               $('#user').val(data.user);      

                                    
                           }
                           })
                     
               
               });
               
                   });

Controller

public function lists()
{
    
    
    $list = $this->controller->fetching_function();
    $data = array();
    $no = $_POST['start'];
    
    foreach ($list as $person1) {
        $no++;
        

        
        
        $row = array();
        $row[] = '<tr><input type="text" style="width:50px; height:20px;"   id="user" name="user" ></td>';
        $row[] = '<tr><input type="text" style="width:50px; height:20px;"   id="id" name="id" ></td>'; // If i type the id "4", then the textbox for name should be "hwoarang"
        $data[] = $row;

    }
    
    $output = array(
        "draw" => $_POST['draw'],
        "recordsTotal" => $this->controller->count_all(),
        "recordsFiltered" => $this->controller->count_filtered(),
        "data" => $data,
    );
    //output to json format
    echo json_encode($output);
}


function autocomplete(){
    $output=array();
    $id=$this->input->get('id');

    
    $data = $this->model->getdetails($id);
    
    
    
    foreach($data as $row){

        $output['id']     = $row->id;
        $output['user']   = $row->user;

    }
    echo json_encode($output);
}

Model:

function getdetails($id){
        
        
    $this->db->where('id',$id);
    $query=$this->db->get('users');
    
    return $query->result();
    
}

I created a modal component in react, but it only shows the backdrop and not the main content of the modal. In the component tree, the component has a height of 0px. I increased the height but still, it is 0 only. This modal component works when used on some empty window, but not when there is already a lot of content on the window. Is it regarding the z-index?

Following is the code for Modal component:

import React, { useState } from 'react';
 function Pay(props) {
 return (
    <div>
     <div className="backdrop" onClick={props.onConfirm}></div>
     <div className="modal">
       <header className="header">
         <h2>Payment Section</h2>
       </header>
       <div className="content">
         <p>lorem ipsum dolor sit amet
            lorem ipsum dolor sit amet
            lorem ipsum doolr sit amet
         </p>
       </div>
       <footer className="action">
         <button onClick={props.onConfirm}>Pay</button>
       </footer>
     </div>
    </div>
  );
}
export default Pay;

The CSS file:

.backdrop {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100vh;
  z-index: 200;
  background-color: rgba(0, 0, 0, 0.75);
}

.modal {
  position: fixed;
  top: 20vh;
  left: 5%;
  height:400px;
  width: 90%;
  background-color: white;
  padding: 1rem;
  border-radius: 14px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.25);
  z-index: 3000;
}


.header {
  background: #4f005f;
  padding: 1rem;
}

.header h2 {
  margin: 0;
  color: white;
}

.content {
  padding: 1rem;
}

.actions {
  padding: 1rem;
  display: flex;
  justify-content: flex-end;
}

This is where I call the Modal:

function Navigate(props){
  const [show,setShow]=useState(false);

  function pinch(){
    console.log("info from navigation");
    setShow(true);
  }
  function hidePay(){
    setShow(false);
  }
  return(

    <div className = "container1" >
      {show && <Pay onConfirm={hidePay}/>}
      <nav className="navbar navbar-expand-lg navbar-light">
        <button className="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
          <span className="navbar-toggler-icon"></span>
        </button>
        <div className="collapse navbar-collapse" id="navbarSupportedContent">
          <ul className="navbar-nav ml-auto">
            <li className="nav-item doosri">
              <i className="fas fa-search fa-1x"></i>
            </li>

            <li className="nav-item doosri">
              <button onClick={pinch}><i className="fas fa-shopping-cart fa-1x"></i></button>
            </li>

          </ul>
        </div>
      </nav>
    </div>
  );
}

I am new in this field.

1. I have some problem when we refersh the webpage the table data is clear. what i want is when we refesh the page the table data is remain same.

2. When we update the the record in the table it create new field in the localstorage. what i want is when we update field in localstorage it does not create new field only update this field.

3. When we delete the any field in the table the localstorage data is remain same. what i want is when we delete any field in the table the corresponding field in the localstorage is also delete. Thank You

   Employee Data

   Employee Record

   Employee ID

   Enter Employee ID

   Employee Name

   Enter Employee Name

   Employee Designation

   Enter Employee Designation

   Employee Mobile Number

   Enter Employee Mobile Number

   Employee Salary

   Enter Employee Salary

   Sort By ID

   Employee ID
   Full Name
   Designation
   Mobile
   Salary
   Edit / delete

   * {
   margin: 0;
   padding: 0;
   

   }
   .table-heading {
   text-align: center;
   margin: 1% 0 1% 0;
   }
   .employpage {
   display: flex;
   flex-wrap: wrap;
   width: 76%;
   margin: auto;
   font-size: 16px;
   border: solid 2px #f1f1f1;
   -webkit-border-radius: 5px;
   -moz-border-radius: 5px;
   -ms-border-radius: 5px;
   -o-border-radius: 5px;
   border-radius: 5px;
   }
   .employpage .formdata {
   width: 40%;
   padding: 15px;
   }
   .employpage .display_table {
   padding: 15px;
   width: 52%;
   }
   .employpage .display_table table {
   border: solid 1px #ccc;
   border-collapse: collapse;
   }
   .employpage .display_table td,
   .employpage .display_table th {
   border-left: solid 1px #ccc;
   border-bottom: solid 1px #ccc;
   padding: 10px 5px;
   text-align: left;
   font-size: 13px;
   }
   .employpage .display_table td:first-child,
   .employpage .display_table th:first-child {
   border-left: none;
   }
   .employpage .display_table tr {
   border-bottom: solid 1px #ccc;
   }
   .employpage .display_table tr:last-child td {
   border-bottom: none;
   }
   .formdata form {
   display: flex;
   flex-wrap: wrap;
   background: #f1f1f1;
   padding: 15px;
   }
   .formdata form label{
   display: block;
   text-align: center;
   }
   .formdata form .employee-fields{
   width: 100%;
   margin-bottom: 10px;
   }
   .formdata form input {
   outline: none;
   width: 80%;
   display: block;
   margin: auto ;
   padding: 7px;
   box-sizing: border-box;
   outline: none;
   border: 1px solid #444;
   border-radius: 4px;
   -webkit-border-radius: 4px;
   -moz-border-radius: 4px;
   -ms-border-radius: 4px;
   -o-border-radius: 4px;
   }
   .formdata form .error{
   text-align: center;
   margin-top: 3px;
   font-size: 14px;
   visibility: hidden;
   }
   .formdata th {
   background: #f1f1f1;
   font-size: 14px;
   font-weight: bold;
   text-align: left;
   }
   .formdata .button {
   background: #000;
   padding: 5px 10px;
   font-size: 20px;
   margin: 25px auto;
   display: table;
   color: #fff;
   width: 50%;
   border-radius: 4px;
   -webkit-border-radius: 4px;
   -moz-border-radius: 4px;
   -ms-border-radius: 4px;
   -o-border-radius: 4px;
   }
   .formdata .button:hover {
   cursor: pointer;
   }
   td {
   font-family: “Roboto-Regular”;
   font-size: 11px;
   text-align: center !important;
   }
   .edt {
   color: #0000ff;
   cursor: pointer;
   }
   .dlt {
   color: #ff0000;
   cursor: pointer;
   }
   .sort-table {
   display: block;
   background-color: transparent;
   width: 50%;
   margin: auto;
   padding: 5px 0;
   border: 1px solid #4169e1;
   color: #4169e1;
   border-radius: 4px;
   -webkit-border-radius: 4px;
   -moz-border-radius: 4px;
   -ms-border-radius: 4px;
   -o-border-radius: 4px;
   }
   .sort-table:hover {
   background-color: #4169e1;
   color: #fff;
   cursor: pointer;
   }

   var selectedRow = null;
   var btn = document.querySelector(“.button”)
   btn.addEventListener(“click”, employdata);
   function employdata() {
   let empID = document.getElementById(’empID’).value.trim();
   let empName = document.getElementById(’empname’).value.trim();
   let empDes = document.getElementById(’empdes’).value.trim();
   let empMob = document.getElementById(’empmob’).value.trim();
   let empSal = document.getElementById(’empsal’).value.trim();
   if(empID === ”){
   document.getElementById(‘id-error’).style.visibility = “visible”;
   document.getElementById(’empID’).style.border = “2px solid red”;
   return false;
   }
   if(empName === “”){
   document.getElementById(‘name-err’).style.visibility = “visible”;
   document.getElementById(’empname’).style.border = “2px solid red”;
   return false;
   }
   if(empDes === “”){
   document.getElementById(‘des-err’).style.visibility = “visible”;
   document.getElementById(’empdes’).style.border = “2px solid red”;
   return false;
   }
   if(empMob === “”){
   document.getElementById(‘mob-err’).style.visibility = “visible”;
   document.getElementById(’empmob’).style.border = “2px solid red”;
   return false;
   }
   if(empSal === ”){
   document.getElementById(‘sal-err’).style.visibility = “visible”;
   document.getElementById(’empsal’).style.border = “2px solid red”;
   return false;
   }
   else{
   alert(‘Data Added Succesfully’);
   // return true;
   }
   var ax = read_Input_Value();
   if (selectedRow == null) {
   create_Tr_Td(ax);
   remove_input_value()
   }
   else {
   updatefunc(ax);
   remove_input_value();
   selectedRow = null;
   }
   }
   function read_Input_Value() {
   var redemp = {}
   redemp[“empID”] = document.querySelector(‘.empID’).value
   redemp[“ename”] = document.querySelector(“.empname”).value;
   redemp[“des”] = document.querySelector(“.designation”).value;
   redemp[“mob”] = document.querySelector(“.mobile”).value;
   redemp[“salary”] = document.querySelector(“.empsalary”).value;
   let user_records = new Array();
   user_records = JSON.parse(localStorage.getItem(“users”)) ? JSON.parse(localStorage.getItem(“users”)) : []
   user_records.push({
   “EmpID”: redemp[“empID”],
   “Name”: redemp[“ename”],
   “Designation”: redemp[“des”],
   “Mobile”: redemp[“mob”],
   “Salary”: redemp[“salary”]
   })
   localStorage.setItem(“users”, JSON.stringify(user_records));
   return redemp
   }
   function create_Tr_Td(x) {
   var empTable = document.querySelector(“.list”);
   var emp_tr = empTable.insertRow(empTable.length);
   var emp_td1 = emp_tr.insertCell(0);
   var emp_td2 = emp_tr.insertCell(1);
   var emp_td3 = emp_tr.insertCell(2);
   var emp_td4 = emp_tr.insertCell(3);
   var emp_td5 = emp_tr.insertCell(4);
   var emp_td6 = emp_tr.insertCell(5);
   var totalRowCount = document.querySelector(“.list tr”).length;
   emp_td1.innerHTML = x.empID;
   emp_td2.innerHTML = x.ename;
   emp_td3.innerHTML = x.des;
   emp_td4.innerHTML = x.mob;
   emp_td5.innerHTML = x.salary;
   emp_td6.innerHTML = ‘Edit / Delete’;
   }
   function remove_input_value() {
   document.querySelector(‘.empID’).value = ” “;
   document.querySelector(“.empname”).value = ” “;
   document.querySelector(“.designation”).value = ” “;
   document.querySelector(“.mobile”).value = ” “;
   document.querySelector(“.empsalary”).value = ” “;
   document.getElementById(‘id-error’).style.visibility = “hidden”;
   document.getElementById(‘name-err’).style.visibility = “hidden”;
   document.getElementById(‘des-err’).style.visibility = “hidden”;
   document.getElementById(‘mob-err’).style.visibility = “hidden”;
   document.getElementById(‘sal-err’).style.visibility = “hidden”;
   }
   function onEdit(y) {
   selectedRow = y.parentElement.parentElement;
   document.querySelector(‘.empID’).value = selectedRow.cells[0].innerHTML;
   document.querySelector(“.empname”).value = selectedRow.cells[1].innerHTML;
   document.querySelector(“.designation”).value = selectedRow.cells[2].innerHTML;
   document.querySelector(“.mobile”).value = selectedRow.cells[3].innerHTML;
   document.querySelector(“.empsalary”).value = selectedRow.cells[4].innerHTML;
   }
   function updatefunc(redemp) {
   selectedRow.cells[0].innerHTML = redemp.empID;
   selectedRow.cells[1].innerHTML = redemp.ename;
   selectedRow.cells[2].innerHTML = redemp.des;
   selectedRow.cells[3].innerHTML = redemp.mob;
   selectedRow.cells[4].innerHTML = redemp.salary;
   }
   function onDelete() {
   if (confirm(‘Are you sure to delete this record ?’)) {
   var selectdelete = document.querySelector(“a.dlt”);
   selectdelete = selectdelete.parentElement.parentElement.remove(0);
   }
   }
   function sortTable() {
   var table, rows, switching, i, x, y, shouldSwitch;
   table = document.getElementById(“employeeList”);
   switching = true;
   while (switching) {
   switching = false;
   rows = table.rows;
   for (i = 1; i < (rows.length – 1); i++) {
   shouldSwitch = false;
   x = rows[i].getElementsByTagName(“TD”)[0];
   y = rows[i + 1].getElementsByTagName(“TD”)[0];
   if (x.innerHTML.toLowerCase() > y.innerHTML.toLowerCase()) {
   shouldSwitch = true;
   break;
   }
   }
   if (shouldSwitch) {
   rows[i].parentNode.insertBefore(rows[i + 1], rows[i]);
   switching = true;
   }
   }
   }

/////Question///////////////////////////////
Fancyapps carousel that changes image and text: I have been attempting a carousel that when clicked change the image and text. I have the text sorta… it at least moves like it should// it just wont take up the full width for some reason. Same with my images. They are both squeezing into the full width at the same time. I don’t think I put any of my code in here the right way but I have included some screenshots of what everything currently looks like with code below and some of what it should look like (from my other sections just without the carousel currently).[current-mobile][1][current-tablet/desktop][2] [final-mobile][3][final-tablet/mobile][4]
Any and all thoughts would be appreciated! I am very much a newbie just trying my best!!! Thanks!

window.addEventListener('load', function() {

  // Initialise Carousel
  const myCarousel = new Carousel(document.querySelector("#pub-carousel"), {
    'center': false,
    slidesPerPage: 1,
    on: {
      change: (carousel, to) => {
        // Clear active elements
        document.querySelectorAll("#pub-carousel .is-active").forEach((el) => {
          el.classList.remove("is-active");
        });

        // Mark current elements as active
        document.querySelectorAll(`#pub-carousel [data-for="${to}"], #publication-text [data-for="${to}"]`).forEach((el) => {
          el.classList.add("is-active");
        });
      },
    },
  });
});

Fancybox.bind('[data-fancybox="inspire"]', {
  Carousel: {
    on: {
      change: (that) => {
        myCarousel.slideTo(myCarousel.findPageForSlide(that.page), {
          friction: 0,
        });
      },
    },
  },
});

  #publication {
  width: 100vw;
  height: 100%;
  background-color: var(--white);
  #publication-container {
    height: 100%;
    width: 100%;
    //overflow: hidden;
    display: grid;
    grid-template-areas: "publication-image-1" "publication-text";
    @include md {
      grid-template-areas: "publication-image-1 publication-text";
      grid-template-columns: repeat(1, 1fr);
      grid-template-rows: repeat(1, 100%);
      gap: 30px;
    }
    #publication-image-container {
      grid-area: publication-image-1;
      height: 100%;
      width: 100%;
      display: flex;
      align-items: center;
      justify-content: center;
      ul {
        width: 100%;
        height: 609px;
        display: flex;
        align-items: center;
        justify-content: center;
        @include md {
          height: 750px;
        }
        li {
          background-position: center;
          background-size: cover;
          border: 5px red solid;
          height: 100%;
          width: 100%;
          a:link,
          a:visited {
            height: 609px;
            width: 100%;
            display: inline-block;
            @include md {
              height: 750px;
            }
          }
        }
      }
      .carousel {
        height: 100%;
        width: 100%;
        color: #170724;
        --carousel-button-svg-width: 20px;
        --carousel-button-svg-height: 20px;
        --carousel-button-svg-stroke-width: 2.5;
        .carousel__viewport {
          width: 100%;
          height: 100%;
        }
        .carousel__slide {
          // width: var(--carousel-slide-width, 100%)!important;
          //min-width: 100% !important;
          width: 100%;
          height: 100%;
          display: flex;
          align-items: center;
          justify-content: center;
        }
        .carousel__button {
          z-index: 2;
        }
        .carousel__button.is-prev {
          left: 10rem;
          top: 45rem;
        }
        .carousel__button.is-next {
          right: 10rem;
          top: 45rem;
        }
        .carousel__dots {
          top: calc(100% - 22px);
          color: #000;
          z-index: 300;
          //position: static;
          .has-dots {
            margin-bottom: 0px;
          }
        }
        .carousel__image-container {
          position: absolute;
          top: 0;
          left: 0;
          right: 55%;
          bottom: 0;
          z-index: 1;
          //overflow: hidden;
        }
        .carousel__image-container ul {
          margin: 0;
          padding: 0;
          //overflow: hidden;
          height: 100%;
          width: 100%;
        }
        .carousel__image-container li {
          position: absolute;
          width: 100%;
          height: 100%;
          opacity: 0;
          transition: opacity 0.35s;
          user-select: none;
        }
        .carousel__image-container li a:link a:visited {
          position: absolute;
          top: 0;
          left: 0;
          width: 100%;
          height: 100%;
          object-fit: cover;
        }
        .carousel__image-container li.is-active {
          opacity: 1;
        }
      }
      #publication-1 {
        background-image: url('http://www.birds.com/wp-content/uploads/home/bird4.jpg');
        ;
        // position: absolute;
        // width: 100%;
        // max-height: 609px;
      }
      #publication-2 {
        background-image: url('http://www.birds.com/wp-content/uploads/home/bird4.jpg');
        ;
        // position: absolute;
        // width: 100%;
        // max-height: 609px;
      }
      #publication-text-container {
        grid-area: publication-text;
        height: 100%;
        width: 100%;
        display: flex;
        justify-content: center;
        align-items: flex-end;
        padding-bottom: 30px;
        padding-top: 5%;
        @include md {
          padding-top: 0%;
        }
        #publication-text {
          max-width: 450px;
          color: var(--black);
          @include md {
            max-width: 325px;
            padding-right: 30px;
          }
          @include lg {
            //max-width: 400px;
          }
          h1 {
            font-weight: 800;
            font-size: rem-calc(26);
            padding-bottom: 10px;
            @include md {
              font-size: rem-calc(40);
            }
          }
          h3 {
            font-weight: 800;
            font-size: rem-calc(20);
            padding-bottom: 10px;
            @include md {
              padding-bottom: 20px;
            }
          }
          p {
            font-weight: 400;
            font-size: rem-calc(16);
            line-height: 1.3em;
            @include md {
              font-size: rem-calc(20);
            }
          }
        }
      }
    }
  }

<section id="publication">
  <div id="pub-carousel" class="carousel">
    <div id="publication-container">
      <div id="publication-image-container" class="carousel__image-container" class="carousel__slide">
        <ul id="publication-carousel">
          <li id="publication-1" class="is-active" class="pub-image" data-for="0">
            <a href='http://www.birds.com/wp-content/uploads/home/bird4.jpg' data-fancybox="inspire"></a>
          </li>
          <li id="publication-4" class="pub-image" data-for="1">
            <a href='http://www.birds.com/wp-content/uploads/home/bird4.jpg' data-fancybox="inspire"></a>
          </li>


          <li id="publication-2" style="display:none; visibility: hidden">
            <a href="img/Inspirespread.jpg" data-fancybox="inspire"></a>
          </li>
          <li id="publication-3" style="display:none; visibility: hidden">
            <a href="img/inspirelast.jpg" data-fancybox="inspire"></a>
          </li>
        </ul>
      </div>

      <div id="publication-text-container" class="carousel__viewport">
        <div class="carousel__track">
          <div id="publication-text" class="carousel__slide">
            <h1 id="publication-h1" class="project-topic">
              Publication Design
            </h1>

            <h3 id="publication-h3" class="project-title">
              Inspire Magazine
            </h3>

            <p id="publication-p1" class="project-text">
              This publication design is called Inspire, a magazine about achieving luxury interior design for everyone. This publication is a large format with a quarterly subscription. It has a strict three-column grid with the top third of the magazine dedicated
              to image space and or textures. The masthead has the ability to move locations and interact with the cover, and the masthead applications can be seen within the magazine.
            </p>
          </div>

          <div id="publication-text" class="carousel__slide">
            <h1 id="publication-h1" class="project-topic">
              Publication Design
            </h1>

            <h3 id="publication-h3" class="project-title">
              Mercury and the Workmen
            </h3>

            <p id="publication-p1" class="project-text">
              This publication design is called Inspire, a magazine about achieving luxury interior design for everyone. This publication is a large format with a quarterly subscription. It has a strict three-column grid with the top third of the magazine dedicated
              to image space and or textures. The masthead has the ability to move locations and interact with the cover, and the masthead applications can be seen within the magazine.
            </p>
          </div>
        </div>
      </div>
    </div>
  </div>
</section>

///////JS//////////////////////////////////

import { Fancybox } from "@fancyapps/ui";
import { Carousel } from "@fancyapps/ui";

window.addEventListener('load', function(){

    // Initialise Carousel
    const myCarousel = new Carousel(document.querySelector("#pub-carousel"), {
        'center': false,
         slidesPerPage: 1,
      on: {
        change: (carousel, to) => {
          // Clear active elements
          document.querySelectorAll("#pub-carousel .is-active").forEach((el) => {
              el.classList.remove("is-active");
          });
  
          // Mark current elements as active
          document.querySelectorAll(`#pub-carousel [data-for="${to}"], #publication-text [data-for="${to}"]`).forEach((el) => {
              el.classList.add("is-active");
          });
        },
      },
    });
});

Fancybox.bind('[data-fancybox="inspire"]', {
    Carousel: {
      on: {
        change: (that) => {
          myCarousel.slideTo(myCarousel.findPageForSlide(that.page), {
            friction: 0,
          });
        },
      },
    },
});


  [1]: https://i.stack.imgur.com/ILM9E.jpg
  [2]: https://i.stack.imgur.com/HgX71.png
  [3]: https://i.stack.imgur.com/mTrBs.jpg
  [4]: https://i.stack.imgur.com/5arYK.jpg

Hi I am trying to fetch a local JSON file I used localhost for this but the problem I am having is when I fetch it using:

const endpoint = "http://127.0.0.1:5500/appendixA.json"

const fetchedItems = fetch(endpoint)
    .then(res => res.json())
    .then(result => result.appendix_a)
    .catch(e => console.log("error: ", e))

or using async await

const fetchFunc = async () => {
     let response = await fetch(endpoint);
     let jsonResponse = await response.json()
     return jsonResponse.appendix_a;
}

So when I console.log either of them
console.log(fetchedItems)
console.log(fetchFunc())
I am not getting result as a variable array ie [ //results ]
But instead I am getting just a [Promise]

Here is a sample off the JSON file

    {
        "appendix_a": [
            {
                "id": 1,
                "stakeholder": "Commercial Director",
                "user_story": "As a user I need to be able to insert my name into the form"
            },
            {
                "id": 2,
                "stakeholder": "Commercial Director",
                "user_story": "As a user I need to be able to insert my email into the form"
            }
        ]
    }

Why is this happening as I have done res.json() on the initial .then call as well as I have done await res.json() inside the async function

Please clarify for me that.

As I plan to insert the fetch data into a ul element like this which obviously wont work because of the Promise

const ul = document.querySelector('ul');
let li = document.createElement('li');

fetchedItems.map(pa => {
        li.innerHTML = '<span>${pa.id}</span> <p>${pa.stakeholder}></p> <p>${pa.user_story}</p> '
        return ul.appendChild(li);            
});

enter image description here@And(“Click Test Box and Verify”)
public void Click_Test_Box_and_Verify(DataTable ClickTestBoxandVerify ) throws Throwable {
Thread.sleep(3000);
driver.findElement(By.xpath(“//*[@id=”item-0″]/span”)).click();

    // " Test Box and Verify":// Test Field 
    
    Map<String, String> ClickTestBoxandVerifyList = ClickTestBoxandVerify.asMap(String.class, String.class);
    
    
    // "Full Name":// Test Field 
    element = driver.findElement(By.xpath("//*[@id="userName"]"));
    element.clear();
    element.sendKeys(ClickTestBoxandVerify.get);
            
    

}enter image description here

I have a dispatch in one of my components that calls by form submission:

const handleSubmit = (values) => {
    dispatch(resetPassActionCreator(values.email));
  };

and this is resetPassActionCreator function:

export const resetPassActionCreator = username => dispatch => {
    const url = PASSWORD_RESET_GET_EMAIL;
    dispatch(
        apiCallBegan({
            url,
            method: "POST",
            onStart: passwordResetSlice.actions.resetPassword.type,
            onSuccess: passwordResetSlice.actions.resetPasswordSuccess.type,
            onError: passwordResetSlice.actions.resetPasswordFail.type,
            data: {
                username,
            },
        })
    );
};

and I check the url and it does not have ‘/‘ at the end.
can anyone tell me why the browser sends get request instead of post?

Problem

Docker image compiles successfully, however fails when ran from Lambda because of its read only file system.

Summary

Luminati-proxy has a docker integration for their proxy manager. I copied over their docker file and appended it to my own docker file for pushing out a script to AWS Lambda. The building of the docker image was successful, but when pushed off to Lambda, it failed because of a read only file system error:

Failed to create directory /home/sbx_user1051/proxy_manager: [code=EROFS] Error: EROFS: read-only file system, mkdir '/home/sbx_user1051'
2022-02-28 19:37:22.049 FILE (8): Failed to create directory /home/sbx_user1051/proxy_manager: [code=EROFS] Error: EROFS: read-only file system, mkdir '/home/sbx_user1051' 

Analysis

Upon examining the trackback, the error is focused on the proxy_manager installation and fails with directory changes (mkdir, mk_work_dir …). These changes are made within the .js files of the GitHub which is pulled from the docker file as the proxy_manager installation. Obviously the only mutable directory on Lambda is the /tmp directory, but is there a workaround for getting this set up without resorting to putting everything under the /tmp directory as it wipes itself upon runtime? Reinstalling a proxy_manager each run is not at all ideal…

Answer?

Could this be as simple as setting environment stipulations such as:

ENV PATH=...
ENV LD_LIBRARY_PATH=...

If so, I how should they be configured? I am adding the docker file below for quick reference:

FROM node:14.18.1
RUN wget -q -O - https://dl-ssl.google.com/linux/linux_signing_key.pub | apt-key add - 
    && sh -c 'echo "deb [arch=amd64] http://dl.google.com/linux/chrome/deb/ stable main" >> /etc/apt/sources.list.d/google.list' 
    && apt-get update 
    && apt-get install -y google-chrome-stable fonts-ipafont-gothic fonts-wqy-zenhei fonts-thai-tlwg fonts-kacst fonts-freefont-ttf 
      --no-install-recommends 
    && rm -rf /var/lib/apt/lists/*

USER root
RUN npm config set user root
RUN npm install -g [email protected]
RUN npm install -g @luminati-io/luminati-proxy
ENV DOCKER 1
CMD ["luminati", "--help"]

I appreciate the insight!

Attempting to map data to create elements – elements are not appearing.
When the elements are hard coded in, (Markers) they work fine. When I attempt to abstract it, the Markers are not rendered. Codebox is below.

https://codesandbox.io/s/lucid-leakey-hckm2k?file=/src/App.js

I’m getting this error I read some ways to fix it , but nothing worked

<View style={styles.container}>
        <StatusBar
          backgroundColor="transparent"
          translucent
          barStyle={theme.dark ? 'light-content' : 'light-content'}
        />
        {open ? (
          <DateTimePicker
            style={{width: '100%', margin: 5}}
            mode="date"
            value={date}
            dateFormat="day month year"
            display="calendar"
            onChange={handleDate}
          />
        ) : (
          <Button
            style={{margin: 5}}
            color="#17E5C2"
            onPress={() => {
              setOpen(true);
            }}>
            Filtrar por data
          </Button>
        )}
        {Object.values(JSON.parse(route.params.paramKey).message).map(item =>
          Object.values(item.createdAt[0]).filter(actualDate =>
            actualDate.includes(dateFilter) ? (
              <Card mode="outlined" key={uuidv4()}>
                <Title>{item?.createdAt[0].value}</Title>
                <Button
                  style={{alignItems: 'flex-start'}}
                  color="#17E5C2"
                  icon={
                    infoVisible
                      ? 'arrow-up-bold-outline'
                      : 'arrow-down-bold-outline'
                  }
                  mode="outlined"
                  onPress={() => {
                    handleInfo();
                  }}>
                  Ver detalhes
                </Button>
                {delete item._id}
                {Object.keys(item).map(data => (
                  <Card.Content
                    key={uuidv4()}
                    style={infoVisible ? {display: 'flex'} : {display: 'none'}}
                    accessible={false}>
                    <Paragraph style={{fontWeight: 'bold'}}>{data}</Paragraph>
                    <Paragraph>{item[data][0]?.value}</Paragraph>
                  </Card.Content>
                ))}
                <Card.Actions>
                  <Button color={'#17E5C2'}>Edit</Button>
                </Card.Actions>
              </Card>
            ) : (
              console.log('NO ACTUAL DATA')
            ),
          ),
        )}
      </View>

The error appear’s when I choose a date that has data.
I tried to put console.log besids react child , and when I put it appears to me the data.
So I tought the error could be in my react childs.

I tried to fix my jsx conditional , but not worked , also tried to remove some commas , but also not worked,
and I tried to use <> </> at the top and the end , but also not worked

I tried the entire day so…. it’s been dificulty , I want some tips about how to fix it.