Category: javascript

I have a webpage (build with react) with embedded youtube music videos.
I want to be able to create various visual effects to the beat of the music in these videos while it’s playing (so if user has stopped the video there shouldn’t be any effects).
Is there a way to do it?

I am currently creating a certain website on replit.com, and during the process, I have found that compilation errors were arising. Replit.com would try to compile, but would be stuck in the compiling process and won’t get out of it. I eventually found the problem to be a sentry.js file, and I can’t seem to see why its corrupting the compilation process. Can you provide me with advice on this situation, as it would be very helpful.

I unfortenently can’t send my entire code because it would be too large, and I can’t pin point the problem inside the code.

I’m trying to apply a middleware that modifies the “req” parameter, it works perfectly until I finally use the next() function. This is the code from the middleware:

auth.js

import jwt from "jsonwebtoken";

export const auth = (req, res, next) => {
    try{
        const token = req.header("x-auth-token");
        if(!token) return res.status(401).json({msg: "No authentication token, access denied"});
        const verified = jwt.verify(token, process.env.JWT_SIGNIN_KEY);
        if(!verified) return res.status(401).json({msg: "Token verification failed, authorization denied"});
        req.user = verified._id;
        next();
    } catch (err) {
        res.status(500).json({ error: err.message });
    }
}

This middleware is executed in the users controller, as follows:

userController.js

export const userIndex = asyncHandler(auth, async (req, res) => {
    const user = await User.findById(req.user);
    res.json({
        displayName: user.displayName,
        id: user._id,
    });
})

And after that I associate this function to the user routes:

userRoutes.js

import { googleLogin, tokenIsValid, userIndex } from "../controllers/userController.js";
import express from 'express'
const router = express.Router()

router.route('/getUser').get(userIndex)
router.route('/googlelogin').post(googleLogin)
router.route('/tokenIsValid').post(tokenIsValid)

export default router

import connectDB from './backend/config/db.js'
import userRoutes from './backend/routes/userRoutes.js'
import dotenv  from 'dotenv'
import express from 'express'

connectDB() // Ejecuto la conexión a la base de datos

dotenv.config() // Llamo a las variables de .env

const app = express() // Defino el servidor

app.use(express.json()); // Permite que el servidor entienda los datos enviados en formato JSON
app.use('/api/users', userRoutes) // Creo las rutas para el usuario

const PORT = process.env.PORT || 5000 // Defino un puerto para el servidor

// Ejecuto el servidor
app.listen(PORT, console.log(`La aplicación está corriendo en entorno de ${process.env.NODE_ENV} sobre el puerto ${PORT}`))

The problem occurs when I call this route, it will always return 404 error:

I think that this error is happening bc of the next() function.

Any clue ?

Thanks guys !!

Me and my team facing one issue of memory in our application. The issue is whenever we trigger jsPDF instance its works but after that it’s holding lot of memory and we facing performance issue because its never release that memory after completion of task. For reference i prepare one example and you can check with that.
https://stackblitz.com/edit/web-platform-vkewvw?file=index.html

So in this example you see my memory footprint its some around 36 MB you can see on first screen shotenter image description here

and after run the code its goes around 56MB and its not releasing the memory you see in the next screen shot.
enter image description here

Can any one help on that how we overcome that problem we tried with iframe itself by not working properly.

Your help is appreciable for us.

I want to draw my image to the following anchored position. How can I achieve this with Context2d::drawImage()? I purposefully placed it (0,0) btw.

anchors.right:  parent.right
anchors.top: parent.top
anchors.rightMargin: -10

---

    Canvas {
        anchors.fill: parent

        onPaint: {

            var ctx = getContext('2d');
            ctx.save();
            ctx.canvas.width = 160;
            ctx.canvas.height = 432;
            ctx.font = "18px Ubuntu";
            ctx.textAlign = "center";
            ctx.fillStyle = "#000000"

            const centerX = 10;
            const centerY = ctx.canvas.height / 2;
            const angle = Math.PI;
            const radius = 130
            ctx.fillStyle = "#000000"
            ctx.restore();
            
      

            ctx.save();
            ctx.drawImage(abcBar, 0, 0, abcBar.width, abcBar.height);
            console.log('loaded')
            ctx.restore();
}

I am trying to recover the images that I saved in the firebase storage, but without success.

<script>

// Get a reference to the storage service, which is used to create references in your storage bucket
var storage = firebase.storage();

// Create a storage reference from our storage service
var storageRef = storage.ref("images");

// Create a reference under which you want to list
var listRef = storageRef.child('/screenshot/c5BRECcYHPOfyLXKzYFNCu9Wd9a2');

</script>

Hi guys just what the title says, I couldn’t find a solution.

Here the cURl:

curl "https://test.api.amadeus.com/v1/security/oauth2/token" 
     -H "Content-Type: application/x-www-form-urlencoded" 
     -d "grant_type=client_credentials&client_id={client_id}&client_secret={client_secret}"

Here is my code that is getting a 400 error from server:

const getToken = async () => {
try {
  const res = await axios.post(
    "https://test.api.amadeus.com/v1/security/oauth2/token",
    null,
    {
      params: {
        client_id: process.env.REACT_APP_AMADEUS_API_KEY,
        client_secret: process.env.REACT_APP_AMADEUS_SECRET_API_KEY,
        grant_type: "client_credentials",
      },
      headers: {
        "Content-Type": "application/x-www-form-urlencoded",
      },
    }
  );
  console.log(res);
} catch (error) {
  console.log(error);
}};

<body>
    <main>
        <div class="main-list">
            <h1 class="main-list__header">My To-Do App</h1>

            <div class="main-list__input">
                <input type="text" class="main-list__INPT">

                <button class="addBTN">
                    <svg width="28" height="34" viewBox="0 0 28 34" fill="none" xmlns="http://www.w3.org/2000/svg">
                        <path d="M25.5 17L2 3L6.5 17L2 31L25.5 17Z" fill="url(#paint0_linear_2_6)" stroke="#F8FFE5"
                            stroke-width="2" />
                        <defs>
                            <linearGradient id="paint0_linear_2_6" x1="1.53796e-08" y1="14" x2="44" y2="13"
                                gradientUnits="userSpaceOnUse">
                                <stop stop-color="#7DDE92" stop-opacity="0.76" />
                                <stop offset="1" stop-color="#F8FFE5" />
                            </linearGradient>
                        </defs>
                    </svg>
                </button>
            </div>
        </div>
    </main>

    <!-- scripts -->
    <script src="./app.js"></script>
</body>

Here’s a preview of the page when no HTML code is injected:

When I click the addBTN it adds a task as it should:

However; after injecting the HTML, the button stops working, the event listener won’t listen anymore.

Here’s the app.js:

let variables = document.documentElement.style
let taskContainer = document.querySelector(".main-list")

let addTaskBTN = document.querySelector(".addBTN")
let userTaskText = document.querySelector(".main-list__task-text")

// add task 
console.log(addTaskBTN);

addTaskBTN.addEventListener("click", e => {
    var userInput = document.querySelector(".main-list__INPT")

    taskContainer.innerHTML += ` <div class="main-list__task">
    <label class="main-list__task-left">
        <span class="main-list__task-text">${userInput.value}</span>
        <input type="checkbox" class="main-list__task-left-checkbox">
        <span class="checkmark"></span>
    </label>
    <div class="main-list__task-right">
        <button class="main-list__task-closeBTN">
            <svg width="26" height="26" viewBox="0 0 26 26" fill="none" xmlns="http://www.w3.org/2000/svg">
                <line x1="1.58579" y1="24.2419" x2="24.2419" y2="1.58579" stroke="#7DDE92" stroke-width="4"/>
                <line x1="24.2419" y1="24.0703" x2="1.58581" y2="1.41422" stroke="#7DDE92" stroke-width="4"/>
            </svg>  
        </button>  
    </div>
</div>`

    let checkBox = document.querySelector(".main-list__task-left-checkbox")
    let taskDelete = document.querySelector(".main-list__task-closeBTN")


    checkBox.addEventListener("click", e => {
        let isChecked = e.currentTarget.checked
    
        isChecked ? (task.classList.add("task-checked"), variables.setProperty("--task-text", "var(--task-checked-text)")) : (task.classList.remove("task-checked"), variables.setProperty("--task-text", "var(--task-unchecked-text)"))
    })
    
    
    // delete task
    let task = document.querySelector(".main-list__task")

    
    taskDelete.addEventListener("click", e => {
        task.remove()
    })

    console.log(userInput.value);
    console.log("You clicked me");
    
    // document.body.innerHTML += `<script src="./task.js"></script>`
})

I tried to debug the issue and it seems like the injected HTML code is causing the button to break. This might be because the code is being injected to the grandparent container of the button.

For instance if I move the button outside of the “main-list” container; the button works as it should:

Any idea why this happens, does adding HTML to an existing container creates a copy of the original container and replaces it with the original + the new code? Any approach to avoid this kind of issues?

hello I’m new to this page and I have problems with javascript, I’m making my discord bot and I was finishing making my commands.js and it gives me an error in the terminal is TypeError: Cannot read properties of undefined (reading ‘get’) someone can you help me I leave you the link of sourcebin and you can edit what you think is wrong and give it to save, or if you tell me here I would appreciate it, no one has been able to help me I hope you can

enter link description here

In my React App I want to use a ReactTooltip around my component such that the content of the tooltip is some text with a link to another website.
My component has a return like this:

  return (
    <>
      <div className="col-xs-6 col-sm-4" >
        <Link to={earnnestLink(deal)} target="_blank" data-tip={'abc<br /> def </br> ghi <a href="www.google.ca"/>'} >
            Request Escrow Funds
          </Link>
      </div>
      <ReactTooltip
        multiline
        html
        id="earnnest-link-tooltip"
        place="bottom"
        border
        effect="solid"
        type="light"
        className="custom-tooltip-large" />
    </>
  )

But then my UI looks like this

So I have 2 questions:

1. How do I get the link to www.google.ca show up properly?
2. As soon as I move the cursor away from the text “Request Escrow Funds” into the tooltip with the intention to click on the embedded link, the tooltip disappears. I think it’s because my cursor is outside of the <Link> component. How do I get it to stay there while I move the cursor into the tooltip?

Thanks!

I am trying to take multiple input before passing the value to the parent component. The goal is the user would input value in 3 fields and once the user is done and presses the enter key all values are submitted at once and passed to the parent but for some reason it’s only sending value for each individual filed at a time when press entered and it only sets value for that entered field for all input values. Please any help would be appreciated, Thank you in advance!

import React, {useState}  from 'react';
import FlowModel from './FlowModel';


const DCF = ({ searchBarText }) => {
    const [growthRateInput, setGrowthRateInput] = useState(""); 
    const [perpGrowthRate, setPerpGrowthRate] = useState(""); 
    const [flowRate, setFlowRate] = useState(""); 

    function keyPress(e){
        
        if(e.keyCode === 13 || e.key === 'Enter'  ){
              
          if(document.getElementById("searchInput")){
            //   console.log('value', e.target.value);
              e.preventDefault();
              setGrowthRateOfFCF(e.target.value)
              setPerpGrowthRate(e.target.value)
              setFlowRate(e.target.value)
              
          }
        }
    }
    return(
        <div>
            <h1> Flow Model</h1>
                    <form className='inputField'>
                    
                        <input 
                            type="number" 
                            placeholder='growth Rate Input'
                            pattern="[0-9]*"
                            onKeyDown={keyPress}
                        />
                        <input 
                            type="number" 
                            placeholder='perpGrowthRate'
                            pattern="[0-9]*"
                            onKeyDown={keyPress}
                        />
                        <input 
                            type="number" 
                            placeholder='Flow Rate'
                            pattern="[0-9]*"
                            onKeyDown={keyPress}
                        />
                    </form>
                    <table className="table mt-5">
                    <tbody>
                        <tr>
                            <th>Input</th>
                            <th>Growth</th>
                            <th>Growth Rate</th>
                            <th>Flow Rate</th>
                        </tr>
                    </tbody>
                    <tbody>
                        <FlowModel 
                            input = {searchBarText} 
                            growth = {growthRateInput/100} 
                            growthRate = {perpGrowthRate} 
                            rate = {flowRate}
                        />
                    </tbody>
                </table>
                
        </div>
    );
}

export default DCF;

I’m having an issue getting my nav bar to pass over the content of my hero and title text. The background image will pass beneath my nav bar as desired, along with any further text that I add. But the title text and button pass over the bar. I think it has something to do either with their positions (absolute), or their z-indeces. I’ve tried manipulating these, but to undesirable effect. Changing the h1’s position to fixed or relative completely distorts its placement. The nav bar should remain fixed at the top and everything should pass beneath it. Can anyone help me with this?

Here is my code:

navbar.js:

import { useState } from "react";
import styles from "../component-css/navbar.module.css";
import { GiHamburgerMenu } from "react-icons/gi";

const NavBar = (props) => {
  return (
    <div className={styles.canvas}>
      <div className={styles.container}>
        <div className={styles.buttonContainer}>
          <a className={styles.navButton} href="#">
            Home
          </a>
        </div>
        <div className={styles.buttonContainer}>
          <a className={styles.navButton} href="#">
            About
          </a>
        </div>
        <div className={styles.buttonContainer}>
          <a className={styles.navButton} href="#">
            Contact
          </a>
        </div>
        <div>
          <div className={styles.void} />
        </div>
        <div className={`${styles.buttonContainer} ${styles.menu}`}>
          <span className={styles.navButton}>
            <GiHamburgerMenu />
          </span>
        </div>
      </div>
      {
        props.logo
        ? <img className={styles.logoSticky} src="/MegaManLogo.png" alt="Mega Man Logo" />
        : null
      }
    </div>
  );
};

export default NavBar;

navbar.module.css:

.canvas {
    position: absolute;
}

.container {
    display: grid;
    width: 100%;
    position: fixed;
    top: 0;
    grid-template-columns: repeat(3, .2fr) 1.3fr .25fr;
    grid-template-rows: .08fr;
    grid-column-gap: 0px;
    grid-row-gap: 0px;
    height: 25px;
    background: rgb(14, 14, 175);
    /* box-shadow: 0px 2px 0px rgba(94, 94, 94, 0.5); */
    overflow: hidden;
}

.buttonContainer {
    background: transparent;
    height: inherit;
    width: 100%;
    text-align: center;
    overflow: hidden;
    transition-duration: 0.5s;
}

.buttonContainer:hover {
    background:rgb(109, 109, 216);
}

.navButton {
    background: transparent;
    color: white;
    text-decoration: none;
    transition-duration: .5s;
    line-height: 1.5rem;
    font-family: sans-serif;
    font-size: .7rem;
    margin-top: 50%;
}

.menu {
    font-size: 1rem;
    line-height: 1.7;
    transform: translateX(20px);
}

.menu:hover {
    background: transparent;
}

.logoSticky {
    margin-left: 44vw;
    margin-top: -100vh;
    position: sticky;
    width: 10vw;
    height: auto;
    z-index: 30;
    transform: translateY(23px);

}

hero.js:

import { useState, useEffect } from 'react';
import styles from "../component-css/hero.module.css"
import { GiHamburgerMenu } from 'react-icons/gi'

const Hero = () => {
    const [scrollPosition, setScrollPosition] = useState(0);
    
    const handleScroll = () => {
    const position = window.pageYOffset;
    setScrollPosition(position);
    };

    useEffect(() => {
        window.addEventListener("scroll", handleScroll);
    
        return () => {
          window.removeEventListener("scroll", handleScroll);
        };
      }, []);

    return (
        <div className={styles.parent}>
            <div className={styles.heroBox} />
            <div className={styles.blackOverlay} />
            <img className={scrollPosition < 63 ? styles.logo : styles.logoSticky} 
                 src="/MegaManLogo.png" 
                 alt="Mega Man Logo" 
            />
            <div className={styles.headerBox}>
                <h1 className={styles.h1}>
                    A Brief History of the <span className={styles.blueBomber}> Blue Bomber</span>
                </h1>
            </div>
            <button 
                className={styles.gamesButton}
            >
                See the Games
            </button>
        </div>
    )
}

export default Hero

hero.module.css:

.parent {
    position: relative;
}

.blackOverlay {
    box-sizing: border-box;
    height: 100vh;
    width: 100vw;
    margin: 0;
    margin-top: -100vh;
    padding: 0;
    background: rgba(0, 0, 0, 0.705);
    max-width: 100%;
    overflow: hidden;
    z-index: 10;
}

.heroBox {
    box-sizing: border-box;
    overflow-y: hidden;
    height: 100vh;
    width: 100vw;
    margin: 0;
    padding: 0;
    background-image: url("../images/hero-background.jpg");
    background-size: 100vw auto;
    background-repeat: no-repeat;
    max-width: 100%;
    overflow: hidden;
    z-index: 1;
}

.logo {
    position: absolute;
    width: 40vw;
    height: auto;
    margin-left: 30vw;
    margin-top: -85vh;
    z-index: 30;
    transition-duration: 0.5s;
}

.logoSticky {
    margin-left: 44vw;
    margin-top: -100vh;
    position: fixed;
    width: 10vw;
    height: auto;
    z-index: 30;
    transition-duration: 0.5s;
}

.headerBox {
    position: absolute;
    margin: 0px;
    margin-top: 8vh;
    margin-left: 30vw;
    margin-bottom: 0px;
    padding-bottom: 5px;
    top: 45vh;
    border-bottom: 2px solid rgb(122, 112, 255);
    z-index: 20;
}

.h1 {
    color: white;
    font-family: Arial Narrow, sans-serif;
    font-weight: 100;
    font-size: 1.7em;
}

.blueBomber {
    color: rgb(122, 112, 255);
    font-family: Arial Narrow, sans-serif;
    font-weight: 400;
    float: right;
    margin-left: 6px;
}

.gamesButton {
    position: absolute;
    top: 67vh;
    left: 43.5vw;
    padding: 7px;
    font-family: Arial Narrow, sans-serif;
    font-weight: 100;
    font-size: 16px;
    color: rgb(122, 112, 255);
    background: transparent;
    border: 2px solid rgb(122, 112, 255);
    border-radius: 200px;
    cursor: pointer;
    transition-duration: 0.3s; 
    z-index: 20;
}

.gamesButton:hover {
    background: rgb(122, 112, 255);
    border: 3px solid rgb(122, 112, 255);
    color: white;
}

.listItem {
    display: inline-block;
    margin-top: 5px;
    font-size: 14px;
    border-bottom: 2px solid transparent;
    transition-duration: 0.5s;
    text-align: center;
}

.listItem:hover {
    color:rgb(122, 112, 255);
    border-bottom: 2px solid rgb(122, 112, 255);
}

App.js:

import './App.css';
import Hero from './components/hero.js'
import NavBar from './components/navbar.js'
import styles from './component-css/App.module.css'

function App() {
  return (
    <div className="App">
      <div className={styles.nav}><NavBar logo={false} /></div>
      <div className={styles.body}><Hero /></div>
      <div style={{height: "100vh"}} />
    </div>
  );
}

export default App;

App.module.css:

.nav {
    position: absolute;
    width: 100%;
    z-index: 10;
}

.body {
    z-index: 1;
}

I am new to npm and javascript but I am trying to use an existing npm project to run and test it locally. I use the command npm run dev to activate serve and client script at the same time. To be able to connect to server url, I used the http://localhost:5200/ as suggested by the counsel from the command above and I get the following message “{“hi”:”there”}” from the browser. I was hoping this command lands me to the website that was created and built for this project. I got warnings but not error. Does the warnings could lead to connectivity issues? How do I resolve this and connect to client server?

I really appreciate any help or pointer to resolve this.

Here is the counsel output when I ran the command:

> [email protected] dev
> concurrently "npm run server" "npm run client"
 
[1]
[1] > [email protected] client
[1] > npm run start --prefix client
[1]
[0]
[0] > [email protected] server
[0] > nodemon index.js
[0]
[1]
[1] > [email protected] start
[1] > react-scripts start
[1]
[0] [nodemon] 1.19.4
[0] [nodemon] to restart at any time, enter `rs`
[0] [nodemon] watching dir(s): *.*
[0] [nodemon] watching extensions: js,mjs,json
[0] [nodemon] starting `node index.js`
[0] devUser
[0] App listening on port 5200
[1] Attempting to bind to HOST environment variable: x86_64-apple-darwin13.4.0
[1] If this was unintentional, check that you haven't mistakenly set it in your shell.
[1]
[1] [HPM] Proxy created: /api/*  ->  http://localhost:5200/
[1] Compiled with warnings.
[1]
[1] ./src/components/searches/QueryHookForm_v3.js
[1]   Line 16:9:    'options1' is assigned a value but never used         no-unused-vars
[1]   Line 22:9:    'options2' is assigned a value but never used         no-unused-vars
[1]   Line 222:25:  'register' is assigned a value but never used         no-unused-vars
[1]   Line 373:7:   'mapStateToProps' is assigned a value but never used  no-unused-vars
[1]
[1] ./src/components/plot/TestPlot_v12.js
[1]   Line 1:17:  'useState' is defined but never used               no-unused-vars
[1]   Line 1:27:  'useEffect' is defined but never used              no-unused-vars
[1]   Line 1:38:  'useRef' is defined but never used                 no-unused-vars
[1]   Line 31:7:  'geneAccessor' is assigned a value but never used  no-unused-vars
[1]   Line 54:9:  'inputData2' is assigned a value but never used    no-unused-vars
[1]
[1] ./src/components/dataset/DataSetDownload_v2.js
[1]   Line 20:67:   Using target="_blank" without rel="noopener noreferrer" is a security risk: see https://mathiasbynens.github.io/rel-noopener  react/jsx-no-target-blank
[1]   Line 23:107:  Using target="_blank" without rel="noopener noreferrer" is a security risk: see https://mathiasbynens.github.io/rel-noopener  react/jsx-no-target-blank
[1]   Line 26:46:   Using target="_blank" without rel="noopener noreferrer" is a security risk: see https://mathiasbynens.github.io/rel-noopener  react/jsx-no-target-blank
[1]
[1] ./src/components/tables/ReactTableContainer_v3.js
[1]   Line 26:25:   Using target="_blank" without rel="noopener noreferrer" is a security risk: see https://mathiasbynens.github.io/rel-noopener                                                                                                                                                                                                                                             react/jsx-no-target-blank
[1]   Line 43:21:   The href attribute is required for an anchor to be keyboard accessible. Provide a valid, navigable address as the href value. If you cannot provide an href, but still need the element to resemble a link, use a button and change it with appropriate styles. Learn more: https://github.com/evcohen/eslint-plugin-jsx-a11y/blob/master/docs/rules/anchor-is-valid.md  jsx-a11y/anchor-is-valid
[1]   Line 93:21:   The href attribute is required for an anchor to be keyboard accessible. Provide a valid, navigable address as the href value. If you cannot provide an href, but still need the element to resemble a link, use a button and change it with appropriate styles. Learn more: https://github.com/evcohen/eslint-plugin-jsx-a11y/blob/master/docs/rules/anchor-is-valid.md  jsx-a11y/anchor-is-valid
[1]   Line 153:21:  The href attribute is required for an anchor to be keyboard accessible. Provide a valid, navigable address as the href value. If you cannot provide an href, but still need the element to resemble a link, use a button and change it with appropriate styles. Learn more: https://github.com/evcohen/eslint-plugin-jsx-a11y/blob/master/docs/rules/anchor-is-valid.md  jsx-a11y/anchor-is-valid
[1]
[1] ./src/components/landing/UseCases/CollapsibleComponent/Panel.js
[1]   Line 27:26:  Expected '===' and instead saw '=='  eqeqeq
[1]   Line 34:26:  Expected '===' and instead saw '=='  eqeqeq
[1]
[1] ./src/components/header/Header_v3.js
[1]   Line 32:33:  Expected '===' and instead saw '=='  eqeqeq
[1]
[1] ./src/components/plot/OptionsGroup/OptionsGroup.js
[1]   Line 3:10:  'fetchGeneSummary' is defined but never used                                                                                               no-unused-vars
[1]   Line 38:7:  React Hook useCallback has missing dependencies: 'option1.name' and 'setGroupOptions'. Either include them or remove the dependency array  react-hooks/exhaustive-deps
[1]   Line 57:7:  React Hook useCallback has missing dependencies: 'option2.name' and 'setGroupOptions'. Either include them or remove the dependency array  react-hooks/exhaustive-deps
[1]
[1] ./src/components/footer/Footer.js
[1]   Line 40:22:  Using target="_blank" without rel="noopener noreferrer" is a security risk: see https://mathiasbynens.github.io/rel-noopener  react/jsx-no-target-blank
[1]
[1] ./src/components/App.js
[1]   Line 4:8:  'ReactGA' is defined but never used  no-unused-vars
[1]
[1] ./src/components/documentation/Documentation_v3.js
[1]   Line 50:75:    Using target="_blank" without rel="noopener noreferrer" is a security risk: see https://mathiasbynens.github.io/rel-noopener  react/jsx-no-target-blank
[1]   Line 641:88:   Using target="_blank" without rel="noopener noreferrer" is a security risk: see https://mathiasbynens.github.io/rel-noopener  react/jsx-no-target-blank
[1]   Line 645:57:   Using target="_blank" without rel="noopener noreferrer" is a security risk: see https://mathiasbynens.github.io/rel-noopener  react/jsx-no-target-blank
[1]   Line 662:103:  Using target="_blank" without rel="noopener noreferrer" is a security risk: see https://mathiasbynens.github.io/rel-noopener  react/jsx-no-target-blank
[1]
[1] ./src/components/plot/PiePlot_v12.js
[1]   Line 6:10:    'elementType' is defined but never used                                                                                                                                                                                                                                                       no-unused-vars
[1]   Line 15:25:   'selectedFilters' is assigned a value but never used                                                                                                                                                                                                                                          no-unused-vars
[1]   Line 15:42:   'setSelectedFilters' is assigned a value but never used                                                                                                                                                                                                                                       no-unused-vars
[1]   Line 28:45:   Expected '===' and instead saw '=='                                                                                                                                                                                                                                                           eqeqeq
[1]   Line 28:61:   Unexpected mix of '&' and '|'                                                                                                                                                                                                                                                                 no-mixed-operators
[1]   Line 28:67:   Unexpected mix of '&' and '|'                                                                                                                                                                                                                                                                 no-mixed-operators
  Line 310:49:  Unexpected string concatenation of literals                                                                                                                                                                                                                                                   no-useless-concat
[1]   Line 332:49:  Unexpected string concatenation of literals                                                                                                                                                                                                                                                   no-useless-concat
[1]   Line 354:16:  'x_coord' is assigned a value but never used                                                                                                                                                                                                                                                  no-unused-vars
[1]   Line 381:5:   React Hook useEffect has missing dependencies: 'colors', 'createArc', 'createArcOver', 'createOuter2Arc', 'createOuterArc', 'createPie', 'filteredData', 'format', 'props.height', 'props.keyID', 'props.outerRadius', and 'props.width'. Either include them or remove the dependency array  react-hooks/exhaustive-deps
[1]
[1] ./src/actions/index.js
[1]   Line 6:10:  'FETCH_WEATHER' is defined but never used  no-unused-vars
[1]
[1] ./src/components/studies/ReactBootstrapTableForStudies.js
[1]   Line 73:15:  'defaultSorted' is assigned a value but never used  no-unused-vars
[1]
[1] ./src/components/fileupload/FileUpload_v2.js
[1]   Line 75:13:  'payload' is assigned a value but never used          no-unused-vars
[1]   Line 151:7:  'setFieldTouched' is assigned a value but never used  no-unused-vars
[1]
[1] Search for the keywords to learn more about each warning.
[1] To ignore, add // eslint-disable-next-line to the line before.
[1]

How can i redirect when click on video?
I tried a href but dont work in ios phone or android.

<link href="https://vjs.zencdn.net/7.17.0/video-js.css" rel="stylesheet" />

<a target="_blank" href="URL">
<video id="my-video" class="video-js" poster="" data-setup='{ "controls": true, "autoplay": true, "preload": "auto" }' >
<source src="VIDEOURL" type="video/mp4" />
</video>
</a>

<script src="https://vjs.zencdn.net/7.17.0/video.min.js"></script>

Trying to figure something to had a delay for my homemade animation.
So i have a little function that animate a container (rotation, pivot)
and i use to move it from the gameloop by pressing arrow key, the problem is the animation speed run way too fast
and if i use a sort of delay function like setTimeout it’s not working for the first time pressing and i can’t basically put
a cycle starter on top cause it’s would play 2x instead of 1. Any idea ?

let step = 0, keyboard = [];

function rotate(){
 switch(step){
     case 0: 
        //first rotation
     break;
     case 1:
        //next rotation 
     break;
     //then add more rotation if you want 
  }
}

function gameLoop(){
 if(keyboard["ArrowLeft"] || keyboard["ArrowRight"])
    // here i need something like delay of 1s for each rotate();
}

window.addEventListener("keydown", event => {
  if(["ArrowLeft", "ArrowRight"].indexOf(event.key) != -1)
    keyboard[event.key] = true;
});
window.addEventListener("keyup", event => {
  if(["ArrowLeft", "ArrowRight"].indexOf(event.key) != -1)
      keyboard[event.key] = false;
});