Category: javascript

I have an ascii art that is displayed in the {{ name }} of the component. During development, I got a vue warn:

Hydration text content mismatch in <pre>

And an error:

Hydration completed but contains mismatches. in runtime-core.esm-bundler.js:4525:14

During build, I get this error:

Hydration completed but contains mismatches.

The error is found in dist/assets/index.js

<template>
            <div class="ascii">
                <pre id="ascii-art">{{ name }}</pre>
            </div>
    </template>
        
    <script>
    export default {
        name: "Header",
        components: {
            Prompt
        },
    
    data() {
                try {
                    return {
                        name: // ascii art
                    };
                } catch (error) {
                    // Handle the error
                    console.error("Error occurred while initializing 'name':", error);
                    return {
                        name: 'Error occurred while initializing name property',
                    };
                }
            }
    }
    </script>

I have tried putting it in a try catch block and console.log the error but it is not working

I’m currently facing an issue with hiding specific options from a dropdown in Safari on iOS for our Magento application. After researching potential solutions, I found a hack that involves wrapping the options in a element. Here’s the code I’ve tried:

Hide for iOS with jQuery:
if (!($(this).parent().is('span'))) $(this).wrap('<span>');

Unhide for iOS with jQuery:
if ($(this).parent().is('span')) $(this).unwrap();

This hack successfully hides the desired options; however, it interferes with other JavaScript handlers in our Magento application, causing them to malfunction.

Upon further investigation, I discovered a comment suggesting that Safari uses an overlay for dropdowns and that the recommended approach is to remove the options completely. However, this approach is not feasible for us since we need to show back the hidden options based on other actions.

I also came across another comment proposing an alternative solution. It suggests creating a hidden select with all the options and cloning only the relevant ones to the visible select. This way, we can display the desired options while keeping a record of the other options in a hidden list. Unfortunately, this approach poses challenges due to the multiple dependencies among our dropdowns.

Considering these circumstances, I wanted to seek your expertise and experiences regarding this issue. Have any of you encountered a similar situation and found a reliable solution that effectively hides dropdown options in Safari on iOS without conflicting with other JavaScript code? I would greatly appreciate any insights, alternative approaches, or potential workarounds you may have to offer.

// const prompt = require('prompt-sync')();

const num1= parseInt(prompt("Enter the 1st number:"));
const num2= parseInt(prompt("Enter the 2nd number:"));
const op= prompt ("Enter an operation eg: +,-,*,/: ");
let result;

switch (op){
     case '+':
         result= num1+num2;
         break;

     case '-':
         result= num1-num2;
         break;
     case '*':
         result=num1*num2;
         break;
     case '/':
         result=num1/num2;
         break;
     default:
         console.log("Operator is invalid.");
}
    
console.log ("The answer is",result);

Its treating both the numbers as strings and appending them when i use the + operator. I added parseInt but the problem still remains. All other operations work smoothly.

I am moving from dygraphs to chartsjs but am stuck with trying to show minor grid lines in a log scale chart. The chart with chartjs is in the first image below (with no minor grid lines). I would like it to have grid lines like in the second image. Reading the documentation several times has not yielded an answer to me.

I am a beginner in coding, and I can’t seem to display the map in my react website

I don’t know what I am doing wrong, but the map is not previewing without text

If I insert a text inside the block, it becomes like this: with text

APP.JS

import React, { useState, useEffect } from "react";
import ReactMapGL from "react-map-gl";

export default function App() {
  const [viewport, setViewport] = useState({
    latitude: 45.4211,
    longitude: -75.6903,
    width: "100vw",
    height: "100vh",
    zoom: 10
  });

  return (
    <div>
      <ReactMapGL
        {...viewport}
        mapboxAccessToken='pk.eyJ1IjoiYWNlZG9taW5nbyIsImEiOiJjbGpvOTB3ZjMwMWFiM2dxbDc5cjU0Y2FvIn0.aJC6z1-KjLBiG15MUfzO4Q'
        mapStyle="mapbox://styles/mapbox/light-v11"
        onViewportChange={viewport => {
          setViewport(viewport);
        }}
      >
      </ReactMapGL>
    </div>
  );
}

I have a Git repository with a submodule named ‘Backend’. However, I’m encountering an issue where the ‘Backend’ folder cannot be opened in my repository. Instead, it displays a right arrow icon on the folder’s icon. I am the owner of the repository.

I have already checked the following:

1. Verified that I am the repository owner.

2. Confirmed the submodule configuration in the .gitmodules file.

3. Ensured that the submodule URL is correct.

4. Checked that the submodule repository is accessible and not renamed or deleted.

Despite these checks, the issue persists. I would appreciate any insights or suggestions on how to resolve this problem and access the ‘Backend’ submodule in my Git repository.

Here is my GitHub repository link:

https://github.com/aarontauro/iNotebook

I was expecting the Backend folder could be opened. But I cant open it.

Thank you in advance for your help!

I have two applications – frontend and backend. Frontend is written in VueJS and backend in Java.
I’m trying to make a POST request with a file attached from frontend to backend. I keep encountering several issues when doing so. My current code looks like this:

import axios from 'axios';
import https from 'https';

export default {
  data() {
    return {
      selectedFile: null,
      uploadResult: null,
    };
  },
  methods: {
    onFileSelected(event) {
      this.selectedFile = event.target.files[0];
    },
    async uploadFile() {
      const formData = new FormData();
      formData.append('file', this.selectedFile);
      try {
        const agentOptions = {
          rejectUnauthorized: false,
        };

        const agent = new https.Agent(agentOptions);
        const response = await axios.post("backend-endpoint", formData, {
          headers: {
            'Content-Type': 'multipart/form-data',
          },
          httpsAgent: agent,
        });

        this.uploadResult = response.data;
      } catch (error) {
        this.uploadResult = `Error: ${error.message}`;
      }
    },
  },
};

With the above code I keep getting the following error:

Error: xf.Agent is not a constructor

When I remove the following bits

import https from 'https';
const agentOptions = {
       rejectUnauthorized: false,
};

const agent = new https.Agent(agentOptions);
httpsAgent: agent,

I get this error

Mixed Content: The page at 'https://backend-endpoint' was loaded over HTTPS, but requested an insecure XMLHttpRequest endpoint 'http://backend-endpoint'. This request has been blocked; the content must be served over HTTPS

I tried adding insecure as a parameter to the post request as well:

const response = await axios.post("backend-endpoint", formData, {
      headers: {
        'Content-Type': 'multipart/form-data',
      },
      insecure: true,
    });

But to no avail.

To avoid any suggestions to use https I need to be able to use http.

I am using axios 1.3.3. I tried looking up how to use the constructor in this version of axios and the above code is what I got.
How can I make this work over http only

I am beginner webdeveloper. I make my website in Angular 16.

I use angular mat-datepicker. I need remove default text in input: dd.mm.rrrr.

How can i make it?

This is my code:

<input 
    #input
    matInput 
    class="form-control"  
    [matDatepicker]="picker" 
    required 
    [ngModel]="dateParser.date" 
    [class]="'datepicker-'" 
    [max]="max_date_today ? today : max_date"
    [min]="min_date_today ? today : min_date"
    (input)="onTextFieldChange()"
    (dateChange)="valueChanged()"
    (focusout)="markAsTouched()"
    (click)="textFieldDateFragmentSelection()"
    [readonly]="readonly === true"
    [matDatepickerFilter]="filterDates"
    (keydown)="preventUnallowedChars($event)"
  >
  <mat-datepicker-toggle *ngIf="readonly !== true" matSuffix [for]="picker"></mat-datepicker-toggle>
  <mat-datepicker #picker ></mat-datepicker>

I am using chakra-ui and I have a horizontal tablist that allows overflow, like so:

<Tabs
  index={index}
  align="center">
  <Box overflow="auto" style={webkit}>
    <TabList
     position="relative"
     w="max-content">
       {tabs.map((tab) => (
         <Box id={tab.id} key={tab.id}>
           <Tab
            as={Link}
            href={tab.href}>
              {tab.name}
            </Tab>
         </Box>
       ))}
   </TabList>
</Tabs>

However, when the rightmost tab goes off the screen, it is simply cut off, and if it is cut off between two tabs it is not obvious that there are more tabs that are off the screen. What I would like to do is make arrows that show up on the sides if there is more content. I am imagining the edge of the hscroll fading to reveal an arrow, and if the user clicks the arrow it scrolls over. Then when they scroll all the way to the side, the arrow disappears. I imagine that this must exist somewhere, but I have been unable to find it. Could anyone point me in the right direction or give me tips on how to achieve this?

I am trying to use Autocomplete MUI example, it throws me typescript error

[TypeScript] ‘event’ is declared but its value is never read.

import * as React from 'react';
import TextField from '@mui/material/TextField';
import Autocomplete from '@mui/material/Autocomplete';

const options = ['Option 1', 'Option 2'];

export default function ControllableStates() {
  const [value, setValue] = React.useState<string | null>(options[0]);
  const [inputValue, setInputValue] = React.useState('');

  return (
    <div>
      <div>{`value: ${value !== null ? `'${value}'` : 'null'}`}</div>
      <div>{`inputValue: '${inputValue}'`}</div>
      <br />
      <Autocomplete
        value={value}
        onChange={(event: any, newValue: string | null) => {
          setValue(newValue);
        }}
        inputValue={inputValue}
        onInputChange={(event, newInputValue) => {
          setInputValue(newInputValue);
        }}`your text`
        id="controllable-states-demo"
        options={options}
        sx={{ width: 300 }}
        renderInput={(params) => <TextField {...params} label="Controllable" />}
      />
    </div>
  );
}

I don’t see, what is going wrong, as I just used the MUI example without any changes. Do I need to do any tsconfig change?

I previously posted a question explaining how every method of getting Y scroll position in Javascript on Android browsers was typically returning zero, or some significantly wrong low number. Literally every possible way of getting Y scroll position that I found was broken.

I’ve since established that it was only happening when I included jQuery. It seems to completely break the functionality.

Is this a known bug? Is there a fix? I’d look at trying to fix the bug in jQuery but that would be way too advanced for my abilities.

I’m just amazed that such a widespread framework would produce such a disastrous bug in such a large proportion of browsers without being rapidly fixed.

It would affect anyone trying to do any common technique like dynamic loading on scrolling, animations on scrolling, etc etc etc

I have a task create a timeline in editvideo in react such as https://clideo.com/editor/ or https://www.canva.com/design/ .(I just need the timeline cursor is run correct with time video). Can you can give a idea to do it, thanks you every much.I was trying do this by many way such as “setinterval”, “window.requestAnimationFrame”,.. but it failed

I am a beginner and picked a selfmade RPG talent calculator as my first project. I am seemingly stuck and dont know how to proceed.

So i have figured out how to add background pictures, talent pictures and even how to have only those shown that actually have assigned pictures. I also have a bit of js code that adds an unlocked class to the talent-boxes in the grid and make them colored from a basic greyscale.

What i am failing at is adding a counter in the bottom right corner of the talent-box in the grid that displays how many points are assigned. I dont have the code actually written yet that provides mouseclick context but i would like to at least figure out how to add a small box in the corner that says (0) which will later be changed by js code.

Example how it should end up working see here: https://wotlk.evowow.com/?talent#h

.talent-image {
  filter: grayscale(100%);
  border: 2px solid #888; /* Grey border */
  border-radius: 6px; /* Corner radius */
}

.talent-box.unlocked .talent-image {
  filter: none;
  border-color: #00ff00; /* Green border */
}

I was making this program on asynchronously typer? Where every line typed asynchronously?
This is my html

<h1 data-type data-type-min="100" data-type-max="300">How are you</h1>
 <h2 data-type data-type-min="20" data-type-max="80">What are you doing?Lorem ipsum dolor sit amet. </h2>
  <h3 data-type>whats up?</h3>

Here is my JS
This is my callback for aync typing-

async function draw(el) {
  const text = el.textContent;
  let soFar = '';
  for (const letter of text) {
    soFar += letter;
    el.textContent = soFar;
    await wait(1000);
  }
}

here I attach this callback with a forEach method.

document.querySelectorAll('[data-type]').forEach(draw);

I can’t understand that why those 3 lines are not start typing concurrently. First and third line started typing first and then after some time second line start typing. How this callback is working?

Recently we have started migrating from vue2 to vue3 and components have larger data() objects.
How to consider changing them to refs or toRefs? Any help is appreciated.

I have tried changing into refs but still trying to figure if i should really consider changing to refs or not?