javascript – Page 7092 – Blancer.com Tutorials and projects

ARjs: Camera Video not centered / wrong image ratio

This problem arises using aframe v1.2.0 and ARjs master branch

Hey everyone:

Is there a way to center the camera image in ARjs?
I am currently using the version from the master branch, but the video is shifted, when using aframe version 1.2.0.
I know that the newest version of aframe is 1.3.0 but there are known incompatibilities with ARjs master branch. When using the dev branch the errors are resolved, but the video is still not centered.

Image from Android Studio:
Video not centered – Android Studio

The desired video should look like this:
Video centered – Android Studio

Script imports:

src=”https://aframe.io/releases/1.3.0/aframe.min.js”

src=”https://unpkg.com/[email protected]/dist/aframe-look-at-component.min.js”

src=”https://raw.githack.com/AR-js-org/AR.js/dev/aframe/build/aframe-ar-nft.js”

Kind regards

Angular swiper is not working Nothing is displayed

I have such a file with markup
HTML

    <div class="reviews__inner">
      <swiper [pagination]="{ type: 'fraction'}" [navigation]="true" class="mySwiper">
        <div class="slider__one">
          <div class="wrapper__one">
            <ng-template swiperSlide>
              <div *ngFor="let slide of slides" class="slide__one">
                <div class="slide__wrap">
                  <img src="{{ slide.image }}" alt="stars" class="stars">
                  <div class="slide__title_size_s">{{ slide.title }}</div>
                  <div class="slide__subtitle_size_s">{{ slide.subtitle }}</div>
                </div>
              </div>
            </ng-template>
          </div>
        </div>
      </swiper>
    </div>

.TS

...
SwiperCore.use([Navigation, Pagination]);
...

I connected the swiper module and nothing is displayed when the page loads, and there are no errors in the console. I did everything according to the official documentation

How to push a container from one HTML page to another one using Vue.js?

To make the HTML code shorter, I decided to put some of the elements outside the main file and then load them from there like a template.
I’ve read through all tutorials I could find but I didn’t find any information about how to do this using Vue.js.

So, here is an example of my problem:

Main file:

<body>
   <span>Here is the place where I want to add an element</span>
</body>

New File:

<h3 @click="SomeFunction()">Hello, {{someVariable}}!</h3>

Is it possible to somehow put the code from the New file to the Main one and then render the page?

How to optimize performance in a list with thousands of items?

I’m building a Chat, the case is as follows.
As users send more messages, more items are added to a list that contains the chat messages, it can reach thousands of thousands (100k for example), my question is if I have to use some lazyload library or js code, to that the browser is not overloaded with so many items.

Maybe the browser supports hundreds of thousands of items (more than 100k) without adding anything, or if I really have to use lazyload or some js code, help me please.

My code is simple:

<div class="chat__content" id="chat-content">
   <div class="message">
       <span class="message__user">Bill Gates</span>
       <span class="message__content">Hello World!</span>
   </div>
</div>

And a socket that is responsible for listening to incoming messages (socket.io)

socket.on("chat:message", function (message) {
  var div = document.createElement("div");
  div.classList.add("message");
  div.innerHTML = '<span class="message__user">' + message.user + '</span><span class="message__content">' + message.content + "</span>";

  const chatContent = document.getElementById('chat-content')
  chatContent.appendChild(div)
  chatContent.scrollTop = chatContent.scrollHeight - chatContent.clientHeight
});

Uncaught SyntaxError: Unexpected token y in JSON at position 0? – Leads Tracker Chrome Extension

I’m trying to do a leads tracker chrome extension from a tutorial, and I’m following the code to a T. Here is my Code:

**HTML**
     <html>
      <head>
        <link rel="stylesheet" href="Practice.css" />
      </head>
      <body>
        <input type="text" id="input-el" />
        <button id="input-btn">SAVE INPUT</button>
        <button id="tab-btn">SAVE TAB</button>
        <button id="delete-btn">DELETE ALL</button>
        <ul id="ul-l"></ul>
        <script src="Practice.js"></script>
      </body>
    </html>


**javascript**
    let myLeads = [];
    let oldLeads = [];
    
    const inputEl = document.getElementById("input-el");
    const InputBtn = document.getElementById("input-btn");
    const ulEl = document.getElementById("ul-l");
    const DeleteBtn = document.getElementById("delete-btn");
    const TabBTN = document.getElementById("tab-btn");
    
    let LeadsFromLocalStorage = JSON.parse(localStorage.getItem("myLeads"));
    
    if (LeadsFromLocalStorage) {
      myLeads = LeadsFromLocalStorage;
      Render(myLeads);
    }
    
    function Render(Leads) {
      let ListItems = "";
      for (let i = 0; i < Leads.length; i++) {
        ListItems += `
        <li> 
          <a target = blank href = ${Leads[i]}>
            ${Leads[i]} 
          </a>
        </li>`;
      }
      ulEl.innerHTML = ListItems;
    }
    
    TabBTN.addEventListener("click", function () {
      chrome.tabs.query({ active: true, currentWindow: true }, function (tabs) {
        myLeads.push(tabs[0].url);
        localStorage.setItem("myLeads", JSON.stringify(myLeads));
        Render(myLeads);
      });
    });
    
    DeleteBtn.addEventListener("dblclick", function () {
      localStorage.clear("myLeads");
      myLeads.length = 0;
      Render(myLeads);
    });
    
    InputBtn.addEventListener("click", function () {
      myLeads.push(inputEl.value);
      inputEl.value = "";
      localStorage.setItem("myLeads", JSON.stringify(myLeads));
      Render(myLeads);
    });


**JSON**
    {
      "manifest_version": 3,
      "version": "1",
      "name": "Leads Tracker",
      "action": {
        "default_popup": "Practice.html",
        "default_icon": "AmongUs.png"
      },
      "permissions": ["tabs"]
    }

Every time I’m entering a link into the text box it won’t show up on the extension itself. If I open it in a tab by itself it will work just fine. Honestly don’t understand what is wrong.

More error info from chrome

How to reuse props used previously to navigate to url using react router v6

I have this route <Route path="/edit/:id" exact element={<Editar />} /> where i can redirect from <Dashboard>. I dont have any error redirecting to /edit/idClickedOnDashboard but once i redirected to <Editar> i want to reuse this idClickedOnDashboard (to make an url to call API) using props.match.params.id but error says props.match is undefined

Routes:

<BrowserRouter>
        <Routes>
          <Route path="/" exact element={<Login  />} />
          <Route path="/dashboard" exact element={<Dashboard  />} />
          <Route path="/new" exact element={<Nuevo  />} />
          <Route path="/edit/:id" exact element={<Editar />} />
        </Routes>
      </BrowserRouter>

On Dashboard

export const Dashboard = (props) => {
  const [paciente, setPaciente] = useState([]);
  const navigate = useNavigate();
  useEffect(() => {
    let url = `${Apiurl}pacientes?page=1`;
    axios.get(url).then((response) => {
      setPaciente(response.data);
    });
  }, []);

  const handleClick = (id) => {
    navigate(`/edit/${id}`);
  };

  return (
    <>
      <Header />
      <div className="container">
        <table className="table table-dark table-hover">
          <thead>
            <tr>
              <th scope="col">ID</th>
              <th scope="col">DNI</th>
              <th scope="col">NOMBRE</th>
              <th scope="col">TELEFONO</th>
              <th scope="col">CORREO</th>
            </tr>
          </thead>
          <tbody>
            {paciente.map((data, i) => {
              return (
                <tr key={i} onClick={() => handleClick(data.PacienteId)}>
                  <td>{data.PacienteId}</td>
                  <td>{data.DNI}</td>
                  <td>{data.Nombre}</td>
                  <td>{data.Telefono}</td>
                  <td>{data.Correo}</td>
                </tr>
              );
            })}
          </tbody>
        </table>
      </div>
    </>
  );
};

Finally where i get error Editar.jsx

import React, { useEffect } from "react";
import { useParams } from "react-router-dom";

import { Apiurl } from "../services/api";

export const Editar = (props) => {
  //const { id } = useParams();
  useEffect(() => {
    let pacienteId = props.match.params.id;
    let url =`${Apiurl}pacientes?id=${pacienteId}`;
    console.log(url);
  }, []);





  return <div>Editar</div>;
};

Error

What are the aspects of JS binding?

Have the following simpliest component.

class App extends Component {
  constructor(props) {
    super(props);
    console.log(this);
    this.state = {
      name: "John"
    }
  }

  clickHandler() {
    this.setState({
      name: "Mark"
    })
  };

  render() {
    return (
      <div className="App">
        {this.state.name}
        <button onClick={this.clickHandler.bind(this)}></button>
      </div>
    )
  };
}

export default App;

If I write that

<button onClick={this.clickHandler}></button>

it says that this in

this.setState({
      name: "Mark"
    })

is undefined.
That row

<button onClick={console.log(this)}></button>

shows that this is App.
So if this is App why clickHandler does not bind automatically to that object before the dot?

<button onClick={this.clickHandler}></button>

As far as I understand in “context.function” the context should be bound to the function. Or it only works for “context.function()”?

Async function in another component returns promise when returned instead of data (react.js) [duplicate]

I have a function calling an api and I’m using that funciton inside of another component using useEffect and when I’m returning that data it’s coming in Promise state. How do I get only the data after it’s done fetching it from the api?

Code snippet – https://codesandbox.io/live/f895fd5c8f7

How to add item to array with useState hook in React? [duplicate]

I am new to React and I searched examples for this questions but I could not achieve to do this.

I make 2 separate calls to backend and getting 2 different dto and I want to put them into one table data instead of 2 separate ones.

Here is my code:

const [lensTableData, setLensTableData] = useState<InternalDTO>();
    const [dbsaTableData, setDbsaTableData] = useState<InternalDTO>();
    
useEffect(() => {
        context.services.adapterStatus.getLensAdapterStatus()
            .then((resp) => setLensTableData(resp));

        context.services.adapterStatus.getDbsaAdapterStatus()
            .then((resp) => setDbsaTableData(resp));
    }, [])

It is working but what I want to do is to make just 1 array instead of 2 different and I want to add 2nd one into array after the first one. How can I combine them ?

How to inspect and display JS and React info from console ? (compared to Python)

I would like to know why this question (How to view Javascript documentation from console?) was closed. In fact, it’s what I’m looking for. Since I don’t find any explanation but the answers given to the question I suppose that is a matter of words.

I would like to know which functions (or properties) has JS and React to display info about themself (like JS modules, built-ins, etc, or in the case of React, for instance, a hook definition).

Let me explain better with a few examples:

Recently I found the console.dir() method that belongs to JS and let you displays an interactive list of the properties of the specified JavaScript object
Python has: built-in functions like dir() and help() or modules like inspect, dis or pkgutil.
Finally, I upload an image with an example that VS gives me when I hover on a hook but when I go to the docs I didn’t find that hook definition. I tried googling it but I only found this that is useful but it’s not the same.

What’s the criteria for output determinism in Javascript

const x = [1,2,3]
x.splice(0,1)//[1]
x.splice(0,1)//[2]
x.splice(0,1)//[3]

I know that pure functions should not mutate things and should be deterministic.

And I know that .splice is impure because of (at least) the mutation that it does. But how about determinism, is splice considered indeterministic (same for push, unshift…)? If we thought about the params as only 0 and 1 then it’s indeterministic, but if we thought of x as input too, then it’s deterministic, no?

Because I’m thinking of this Array.prototype.splice.call(x, 0, 1) which will make it deterministic.

In other words, what is the criteria for output determinism are in a function which sits on the prototype and does something with this, like splice.

More specifically what constitutes the input (is this included as an input?)?

“Invalid validator function: unique” shows up even though I register as a new user

This is my code

User.init({
    email: {
      type: DataTypes.STRING,
      validate: {
        isEmail: {
          args: true,
          msg: "Invalid email format"
        },
        notEmpty: {
          args: true,  
          msg: 'Cannot be blank'
        },
        unique: {
          args: true,
          msg: "Email must be unique"
        }
      },
    }

I check using Postman. I register as a new user but the “Invalid validator function: unique” shows up instead of being registered.

Returning value from stream to parent function

I have a stream for writing some text to a cloud storage bucket.
On finish I want a message to be returned to the parent function.

I tried returning the bufferstream but this gives me the whole bufferstream object. I just want the message to be returned.

e.g. if I have another function calling toBucket I want the message that the file has been uploaded being returned so I can show it in the browser.

How can I fix this?

const toBucket = (message, filename) => {
  const storage = new Storage();
  // Initiate the source
  const bufferStream = new stream.PassThrough();
  // Write your buffer
  bufferStream.end(Buffer.from(message));

  const myBucket = storage.bucket(process.env.BUCKET);
  const file = myBucket.file(filename);
  // Pipe the 'bufferStream' into a 'file.createWriteStream' method.
  bufferStream
    .pipe(
      file.createWriteStream({
        validation: 'md5',
      })
    )
    .on('error', (err) => {
      // eslint-disable-next-line no-console
      console.error(err);
    })
    .on('finish', () => {
      // The file upload is complete.
      const message = `${filename} is uploaded!`;
      // eslint-disable-next-line no-console
      console.log(message);
      return message;
    });
};

for use in

() => async {
await things happening...

const saved = toBucket(message,filename);

sendToBrowser(saved);

}

How to generate a PDF with javascript

I have my javascript code that generates the rows of my table as follows:

    var row = table.insertRow();                        
    row.innerHTML = "<tr><td>"+ms+"</td><td id='cuota' name ='cuota' class='col-xs-7'>"+cuota+"</td><td id='interes' name='interes'>"+interes+"</td><td id='amorti' name='amorti'>"+amortizacion+
    "</td><td id='capital' name='capital'>"+capital+"</td><td id='segurodesgrav' name='segurodesgrav'>"+segurodesgrav+"</td><td  id='seguroinmobil' name='seguroinmobil'>"+seguroinmobil+"</td><td id='gastosadm' name='gastosadm'>"+gastosadm+"</td><td id='cuotafinal' name='cuotafinal'>"+cuotafinal+"</td></tr>";

In my html I use this script to generate my pdf, but it generates it wrong, how can I fix it, or in another simpler way I can create the pdf, without losing the css, I don’t want to use canvas, because the previous programmer used it, but it has problems when generating the pdf on screens such as cell phones and it comes out cut off at the mid (width), the height is correct.

<script>  
  function demoFromHTML() {
        var pdf = new jsPDF('p', 'pt', 'letter'); 
        source = $('#visibletabla')[0];

        specialElementHandlers = { 
            '#bypassme': function (element, renderer) { 
                return true
            }
        };
        margins = {
            top: 80,
            bottom: 60,
            left: 20,
            width: 8000,
            border:0 
        }; 
        pdf.fromHTML(
            source, // HTML string or DOM elem ref.
            margins.left, // x coord
            margins.top, { // y coord
                'width': margins.width, // max width of content on PDF
                'elementHandlers': specialElementHandlers
            },

            function (dispose) { 
                pdf.save('silmulador_planahorrocasa.pdf');
            }, margins
        );
  }
</script>

How to switch to dark mode on click event in Javascript

I’m building a web page and I am trying to toggle the prefers-color-scheme on a click event. That is, when the button is clicked I wish that the windows detect the media query @media (prefers-color-scheme:dark)

theme.addEventListener("click", () => {
   // event to switch theme
}

Is this possible?