Category: javascript

How does “qwik-react” convert a React component to a Qwik component? Does it simply make it compatible with Qwik or does it transform it into a true Qwik component? Is there any advantage for developers to build Qwik components and libraries?

For example, if I want to use Chakra UI as my UI kit, according to the Qwik website documentation, should I create a file named “chakra-ui-qwik” and export each component I want to use in the following manner:

import { qwikify$ } from '@builder.io/qwik-react';
import { Box, Container, Divider, Link, Text } from "@chakra-ui/react";

export const QBox = qwikify$(Box);
export const QContainer = qwikify$(Container);
export const QDivider = qwikify$(Divider);
export const QLink = qwikify$(Link);
export const QText = qwikify$(Text);

So there is no need for developers to develop @chakra-ui/qwik library and @chakra-ui/react is enough?

I want to toggle a class to a svg inside a button tag on click of this exact button.

Here is the html code for my button:

<button class="control-btn" id="control-btn-edit">
                    <svg id="edit-svg" version="1.1" id="Capa_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 528.899 528.899" xml:space="preserve"><g id="SVGRepo_bgCarrier" stroke-width="0"></g><g id="SVGRepo_tracerCarrier" stroke-linecap="round" stroke-linejoin="round"></g><g id="SVGRepo_iconCarrier"> <g> <path d="M328.883,89.125l107.59,107.589l-272.34,272.34L56.604,361.465L328.883,89.125z M518.113,63.177l-47.981-47.981 c-18.543-18.543-48.653-18.543-67.259,0l-45.961,45.961l107.59,107.59l53.611-53.611 C532.495,100.753,532.495,77.559,518.113,63.177z M0.3,512.69c-1.958,8.812,5.998,16.708,14.811,14.565l119.891-29.069 L27.473,390.597L0.3,512.69z"></path> </g> </g></svg>
                </button>

Here is the css code of the class I want to add to the svg:

.pressed {
  fill: #19ba00;
}

And lastly here is the javascript code for the function i want to add (the function contains code referring to a different element):

const tableCell = document.querySelector(".divTableCell");
const cellInput = document.querySelector(".cellInput");
const table = document.querySelector(".divTable");
const display = document.querySelector(".display");
const navButton = document.querySelector(".nav-button");
const addButton = document.querySelector("#control-btn-add");
const genButton = document.querySelector("#control-btn-generate");
const editButton = document.querySelector("#control-btn-edit");
const editButtonSvg = document.querySelector("#edit-svg");

editButton.addEventListener("click", () => {
    let allCellInputs = document.querySelectorAll(".cellInput");
    for (let i = 0; i < allCellInputs.length; i++) {
        allCellInputs[i].toggleAttribute("disabled");
    }
    editButtonSvg.classList.toggle("pressed");
});

As you can see I’ve already tried using the classList.toggle() method but it doesn’t work. When I add the class to the html svg element manually, it’s also not working.

I’ve tried changing the class into a id and use the toggleAttribute() method but it didn’t work as well.

I’ve figured out though that when I’m using the setAttribute() method it works just fine, but I’m not getting the toggle effect I want.

Regex Chinese Word Count – JS

for example: 我是好孩子 – i ‘ m good boy

const chineseWords = text.match(/[u4e00-u9fff]+/g) || []; 

const chineseWords = text.match(/[u4e00-u9fa5]+/g) || [];

I tried both but wrong result = 1

I need Regex JS which count number of Chinese words only

and character length working fine

const chineseCharacters = text.match(/[u4e00-u9fff]/g) || [];

chineseCharacterCount.textContent = chineseCharacters.length; // result 5 

thanks

I am trying to make so that when I click or hover over a Link tag it plays a sound effect but it isn’t working.

document.addEventListener('DOMContentLoaded', init);

let allowSound = true;

export function init() {
    let a = document.querySelector('Link');
    a.addEventListener('click', select);
    a.addEventListener('mouseover', hover);
}
export function select(){
    var audioS = new Audio("./media/select.mp3");
    audioS.play();
}

export function hover(){
    var audioH = new Audio("./media/hover.mp3");
    audioH.play();
}

Help?

I am trying to use Handlebars to return all distinct values in a column.
The following Handlebars template returns all the values in the column “hostname” of my dataframe.

{{#each data}} {{"hostname.keyword"}} {{/each}}

This contains duplicate values and so I defined a helper to remove those duplicates.

handlebars.registerHelper("unique", (context) =>
  [...new Set(context)]);

I’m not able to figure out how to pass the result returned by the Handlebars #each block as an argument to the helper. For instance,

<div>{{unique ({{#each data}} {{"hostname.keyword"}} {{/each}})}}</div>

results in the following error:

    Parse error on line 2:
.../h5><div>{{unique ({{#each data}} {{"ho
----------------------^
Expecting 'ID', 'STRING', 'NUMBER', 'BOOLEAN', 'UNDEFINED', 'NULL', 'DATA', got 'OPEN_BLOCK'

The following does not produce any error, but it returns nothing:

<div>{{unique data "hostname.keyword"}}</div>

Is it possible to do this? And if so, what’s the correct syntax?

TypeError: Cannot read properties of undefined (reading ‘line_items’)

I have a problem in this code could someone help me to solve it this is my code

``import React from 'react';
import { Typography, List, ListItem, ListItemText } from '@material-ui/core';

const Review = ({ checkoutToken }) => (
  <>
    <Typography variant="h6" gutterBottom>Order summary</Typography>
    <List disablePadding>
      {checkoutToken.live.line_items.map((product) => (
        <ListItem style={{ padding: '10px 0' }} key={product.name}>
          <ListItemText primary={product.name} secondary={`Quantity: ${product.quantity}`} />
          <Typography variant="body2">{product.line_total.formatted_with_symbol}</Typography>
        </ListItem>
      ))}
      <ListItem style={{ padding: '10px 0' }}>
        <ListItemText primary="Total" />
        <Typography variant="subtitle1" style={{ fontWeight: 700 }}>
          {checkoutToken.live.subtotal.formatted_with_symbol}
        </Typography>
      </ListItem>
    </List>
  </>
);`

export default Review;`

I hope this solve as soon as possible

I am trying to change the color of a warning error in a span tag under a form. I wrote toggle in JS using style.color or classList to change the color, but unable to change the color. Due to the space problem, I am not writing here the JS toggle code.

Here is the code:

PHP:

 $nameErr = "";
 $fname = "";
 if ( $_SERVER[ "REQUEST_METHOD" ] == "POST" ) {
      if ( empty( $_POST[ "fname" ] ) ) {
           $nameErr = "Name is required";
      } else {
           $fname = cleanvar( $_POST[ "fname" ] );
           if ( !preg_match( "/^[a-zA-Z ]*$/", $fname ) ) {
                $nameErr = "Only letters allowed";
           }
      }
 }

 function cleanvar( $userinput ) {
      $inp = trim( $userinput );
      $inp = stripslashes( $userinput );
      $inp = htmlspecialchars( $userinput );
      return $inp;
 }

HTML:

  <form method="post" class="formbox" action="<?php echo htmlspecialchars($_SERVER["PHP_SELF"]);?>">
      <div>
           <label for="fname"> First Name</label>
           <br />
           <input type="text" name="fname" value="<?php echo $fname;?>" required>
           <br />
           <span style="font-size:14px;color:#063701;"> Only letters allowed </span> <span style="font-size:14px;color:#FF0000;" >
           <?php echo $nameErr;?>
           </span> </div>
 </form>

I am using React and Redux toolkit for frontend and I have implemented jwt authentication with user roles.

The application has a sidebar which contains two pages (profile, lottery) for employee and (admin lottery) for admin user only.

The problem is that I can only access the lottery page or admin lottery when i click on sidebar button that redirects to the desired page, otherwise react always redirect back to profile page, even if i write the lottery page url on browser, it will also redirects to profile page.

Also if I am on lottery page and I refresh the page, it will redirect back to profile page, and this is wrong, it should return to the lottery page instead.

This behaviour happens when i added the authentication feature, but I didn’t know which line of code causes this issue.

If anyone could help me, it will be highly appreciated.

App.js

const App = () => {
  const authData = useSelector((store) => store.authReducer)
  const dispatch = useDispatch()

  return (
    <div className="App">
      <BrowserRouter>
        <Routes>
          {/* Authentication */}
          <Route path="/" element={<FullScreenlayout />}>
            <Route path="/" element={<Navigate to="/connecter" replace />} />
            <Route
              path="connecter"
              element={
                authData.isAuthenticated ? (
                  <Navigate to="/employee/profil" replace />
                ) : (
                  <Login />
                )
              }
            />
          </Route>

          {/* Employee space */}
          <Route path="/employee/" element={<MainLayout />}>
            <Route
              path="/employee/"
              element={<Navigate to="/employee/profil" replace />}
            />

            {/* Allow for all employees */}
            <Route
              path="profil"
              element={
                <ProtectedRoute
                  element={<Profile />}
                  isAllowed={true}
                  link={"/connecter"}
                  isAuthenticated={authData.isAuthenticated}
                />
              }
            />
            <Route
              path="tirage"
              element={
                <ProtectedRoute
                  element={<Lottery />}
                  isAllowed={true}
                  link={"/connecter"}
                  isAuthenticated={authData.isAuthenticated}
                />
              }
            />
          </Route>

          {/* Admin space */}
          <Route path="/admin/" element={<MainLayout />}>
            {/* Allow only for lottery admin */}
            <Route
              path="tirage"
              element={
                <ProtectedRoute
                  element={<AdminLottery />}
                  isAllowed={authData.currentUser.role?.includes(
                    CONSTANTS.roles.lottery
                  )}
                  link={"/employee/profil"}
                  isAuthenticated={authData.isAuthenticated}
                />
              }
            />
          </Route>

          {/* Not found url path */}
          <Route
            path="*"
            element={
              <ProtectedRoute
                element={<Navigate to="/employee/profil" replace />}
                isAllowed={true}
                link={"/connecter"}
                isAuthenticated={authData.isAuthenticated}
              />
            }
          />
        </Routes>
      </BrowserRouter>
    </div>
  )
}

export default App

ProtectedRoute.js

const ProtectedRoute = (props) => {
    if (props.isAllowed && props.isAuthenticated) {
        return props.element
    } else {
        return <Navigate to={props.link} replace />
    }
  
}

export default ProtectedRoute

Please see this video to get an idea about the problem.

I have my form

    <form class="newsletter" action="https://sendy.thegoodfellas.net/sendy/subscribe" method="POST" accept-charset="utf-8">
  <span class="container active">
    <label for="name">What's your name?</label>

    <input class="required" type="text" name="name" id="name"/>
    <span class="next" title="next"></span>
  </span>
  <span class="container">
    <label for="email">What's your email?</label>
    <input class="required" type="email" name="email" id="email"/>
  </span>
  <span class="submit" type="submit" name="submit" id="submit"></span>
</form>

and the JS

$('.next').click(function(){
  var nextTarget = $(this).parent().siblings('span');
  var currentTarget = $(this).parent();
  currentTarget.removeClass('active');
  nextTarget.addClass('active').find('input').focus();
});

$('input#email').on('keydown',function(e){
  var keyCode = e.keyCode || e.which; 
  if (keyCode == 13) {
    $('.submit').trigger('click');
  }
})

$('.submit').click(function(){
  var target = $(this);
  var lastInputContainerLabel = target.parent().find('.container.active label');
  target.addClass('submitted');
  lastInputContainerLabel.addClass('fadeOut');
})

But for some reason, when the form is submitted i do not see the post call in network. Nothing is sent.

https://thegoodfellas.net/beatsoutsideblockparty/

Please help debug. Not a master of JS.

I’m currently researching how the V8 engine processes JavaScript source code. However, something has caught my attention. In all these medium articles, they explain it as follows:

source code -> parser -> abstract syntax tree (AST) -> interpreter -> bytecode

They say that when bytecode is generated, the code is executed at that stage. Is there no baseline compiler? I know that there is an optimizing compiler that collects profiling data, etc., but why is there no mention of a baseline compiler?

I came across an article called ‘Sparkplug’ on this website: https://v8.dev/blog/sparkplug. Is Sparkplug the baseline compiler?

To summarize:

• Does the V8 engine have a baseline compiler? If not, how is bytecode executed? Doesn’t it need to be translated into machine code?
• Why is bytecode needed?

I am curious whether there is a baseline compiler or not.

could you see where I would add code to display -1 if knife or fork is not present in the array?

This is the question I am trying to solve – The function’s return value should be an object with two properties, knife and fork, which contain the index positions of the knife and fork from the input array. If either the knife and/or fork are not present in the input array, that property’s value should be -1.

    function findKnifeAndFork(utensils) {
    console.log(utensils)
    let knife = 0;
    let fork = 0;
    let obj ={};

    for(let i = 0; i<utensils.length; i++){
         if(utensils[i] === 'knife'){
            knife = i
            obj.knife=knife    
    };

    for(let i = 0; i<utensils.length; i++){
    if(utensils[i] === 'fork'){
    fork = i
    obj.fork=fork    
    }
    
    } 
    }   return obj
    }

I have added it within each for loop as an else and outside both loops as a standalone for loop and neither are working. ( the below is currently working to display the index code of knife and fork – when they are both present in the array)

I’m doing a statistic on etherscan.io

In https://etherscan.io/accounts there are 10000 addresses, but they are divided into pages of 25, 50 or at most 100 items per page.

So I am required to manually load each next page up to 100 times to get the next pages data.

This is tiring and too time consuming.

When moving to the next pages the links look like this:

Page 1 = https://etherscan.io/accounts/1?ps=100

Page 2 = https://etherscan.io/accounts/2?ps=100

Where "/1" is the page number, and "ps=100" is the number of items on the page.

Even if I manually change the link to for example "ps=10000" nothing will take effect.

I need to see all the pages in just a single page on load to get all the data in a single long page.

If anyone knows how to do this through Chrome Browser I would be very grateful.

I am working on a project in JavaScript where I must generate 24 random and different numbers from 1-24. Whenever I run this code, I get this error in Safari, Firefox, and Chrome RangeError: Maximum Call Stack Size Exceeded. I don’t have much experience/knowledge about the call stack, but I do know that if there are too many instructions/recursions run, it will give you an error. If you are looking at the code below, note that the error happens when you look at the if statement in the function generated24()

I have already found a few other solutions for other people, but I don’t quite understand how to apply them in my situation. I have already tried a few other very basic things, such as splitting it into two if statements/functions, but it still gives the same error. I am still new to JS and don’t have full knowledge of it, so please don’t get angry if I sound like I have no idea what I am talking about. Thank you for any help!

Here is the code I was working on. I removed a few things that aren’t necessary.

let d1 = 0
let d2 = 0
let d3 = 0
let d4 = 0
let d5 = 0
let d6 = 0
let d7 = 0
let d8 = 0
let d9 = 0
let d10 = 0
let d11 = 0
let d12 = 0
let d13 = 0
let d14 = 0
let d15 = 0
let d16 = 0
let d17 = 0
let d18 = 0
let d19 = 0
let d20 = 0
let d21 = 0
let d22 = 0
let d23 = 0
let d24 = 0

function getRandomInt(max) {
    return Math.floor(Math.random() * max);
}

function generated1() {
    d1 = getRandomInt(24)
    if (d1 == 0) {
        generated1()
    } else {
        generated2()
    }
}

function generated2() {
    d2 = getRandomInt(24)
    if (d2 == d1) {
        generated2()
    } else if (d2 == 0) {
        generated2()
    } else {
        generated3()
    }
}

function generated3() {
    d3 = getRandomInt(24)
    if (d3 == d2 || d3 == d1 || d3 == 0) {
        generated3()
    } else {
        generated4()
    }
}

function generated4() {
    d4 = getRandomInt(24)
    if (d4 == d3 || d4 == d2 || d4 == d1 || d4 == 0) {
        generated4()
    } else {
        generated5()
    }
}

function generated5() {
    d5 = getRandomInt(24)
    if (d5 == d4 || d5 == d3 || d5 == d2 || d5 == d1 || d5 == 0) {
        generated5()
    } else {
        generated6()
    }
}

function generated6() {
    d6 = getRandomInt(24)
    if (d6 == d5 || d6 == d4 || d6 == d3 || d6 == d2 || d6 == d1 || d6 == 0) {
        generated6()
    } else {
        generated7()
    }
}

function generated7() {
    d7 = getRandomInt(24)
    if (d7 == d6 || d7 == d5 || d7 == d4 || d7 == d3 || d7 == d2 || d7 == d1 || d7 == 0) {
        generated7()
    } else {
        generated8()
    }
}

function generated8() {
    d8 = getRandomInt(24)
    if (d8 == d7 || d8 == d6 || d8 == d5 || d8 == d4 || d8 == d3 || d8 == d2 || d8 == d1 || d8 == 0) {
        generated8()
    } else {
        generated9()
    }
}

function generated9() {
    d9 = getRandomInt(24)
    if (d9 == d8 || d9 == d7 || d9 == d6 || d9 == d5 || d9 == d4 || d9 == d3 || d9 == d2 || d9 == d1 || d9 == 0) {
        generated9()
    } else {
        generated10()
    }
}

function generated10() {
    d10 = getRandomInt(24)
    if (d10 == d9 || d10 == d8 || d10 == d7 || d10 == d6 || d10 == d5 || d10 == d4 || d10 == d3 || d10 == d2 || d10 == d1 || d10 == 0) {
        generated10()
    } else {
        generated11()
    }
}

function generated11() {
    d11 = getRandomInt(24)
    if (d11 == d10 || d11 == d9 || d11 == d8 || d11 == d7 || d11 == d6 || d11 == d5 || d11 == d4 || d11 == d3 || d11 == d2 || d11 == d1 || d11 == 0) {
        generated11()
    } else {
        generated12()
    }
}

function generated12() {
    d12 = getRandomInt(24)
    if (d12 == d11 || d12 == d10 || d12 == d9 || d12 == d8 || d12 == d7 || d12 == d6 || d12 == d5 || d12 == d4 || d12 == d3 || d12 == d2 || d12 == d1 || d12 == 0) {
        generated12()
    } else {
        generated13()
    }
}

function generated13() {
    d13 = getRandomInt(24)
    if (d13 == d12 || d13 == d11 || d13 == d10 || d13 == d9 || d13 == d8 || d13 == d7 || d13 == d6 || d13 == d5 || d13 == d4 || d13 == d3 || d13 == d2 || d13 == d1 || d13 == 0) {
        generated13()
    } else {
        generated14()
    }
}

function generated14() {
    d14 = getRandomInt(24)
    if (d14 == d13 || d14 == d12 || d14 == d11 || d14 == d10 || d14 == d9 || d14 == d8 || d14 == d7 || d14 == d6 || d14 == d5 || d14 == d4 || d14 == d3 || d14 == d2 || d14 == d1 || d14 == 0) {
        generated14()
    } else {
        generated15()
    }
}

function generated15() {
    d15 = getRandomInt(24)
    if (d15 == d14 || d15 == d13 || d15 == d12 || d15 == d11 || d15 == d10 || d15 == d9 || d15 == d8 || d15 == d7 || d15 == d6 || d15 == d5 || d15 == d4 || d15 == d3 || d15 == d2 || d15 == d1 || d15 == 0) {
        generated15()
    } else {
        generated16()
    }
}

function generated16() {
    d16 = getRandomInt(24)
    if (d16 == d15 || d16 == d14 || d16 == d13 || d16 == d12 || d16 == d11 || d16 == d10 || d16 == d9 || d16 == d8 || d16 == d7 || d16 == d6 || d16 == d5 || d16 == d4 || d16 == d3 || d16 == d2 || d16 == d1 || d16 == 0) {
        generated16()
    } else {
        generated17()
    }
}

function generated17() {
    d17 = getRandomInt(24)
    if (d17 == d16 || d17 == d15 || d17 == d14 || d17 == d13 || d17 == d12 || d17 == d11 || d17 == d10 || d17 == d9 || d17 == d8 || d17 == d7 || d17 == d6 || d17 == d5 || d17 == d4 || d17 == d3 || d17 == d2 || d17 == d1 || d17 == 0) {
        generated17()
    } else {
        generated18()
    }
}

function generated18() {
    d18 = getRandomInt(24)
    if (d18 == d17 || d18 == d16 || d18 == d15 || d18 == d14 || d18 == d13 || d18 == d12 || d18 == d11 || d18 == d10 || d18 == d9 || d18 == d8 || d18 == d7 || d18 == d6 || d18 == d5 || d18 == d4 || d18 == d3 || d18 == d2 || d18 == d1 || d18 == 0) {
        generated18()
    } else {
        generated19()
    }
}

function generated19() {
    d19 = getRandomInt(24)
    if (d19 == d18 || d19 == d17 || d19 == d16 || d19 == d15 || d19 == d14 || d19 == d13 || d19 == d12 || d19 == d11 || d19 == d10 || d19 == d9 || d19 == d8 || d19 == d7 || d19 == d6 || d19 == d5 || d19 == d4 || d19 == d3 || d19 == d2 || d19 == d1 || d19 == 0) {
        generated19()
    } else {
        generated20()
    }
}

function generated20() {
    d20 = getRandomInt(24)
    if (d20 == d19 || d20 == d18 || d20 == d17 || d20 == d16 || d20 == d15 || d20 == d14 || d20 == d13 || d20 == d12 || d20 == d11 || d20 == d10 || d20 == d9 || d20 == d8 || d20 == d7 || d20 == d6 || d20 == d5 || d20 == d4 || d20 == d3 || d20 == d2 || d20 == d1 || d20 == 0) {
        generated20()
    } else {
        generated21()
    }
}

function generated21() {
    d21 = getRandomInt(24)
    if (d21 == d20 || d21 == d19 || d21 == d18 || d21 == d17 || d21 == d16 || d21 == d15 || d21 == d14 || d21 == d13 || d21 == d12 || d21 == d11 || d21 == d10 || d21 == d9 || d21 == d8 || d21 == d7 || d21 == d6 || d21 == d5 || d21 == d4 || d21 == d3 || d21 == d2 || d21 == d1 || d21 == 0) {
        generated21()
    } else {
        generated22()
    }
}

function generated22() {
    d22 = getRandomInt(24)
    if (d22 == d21 || d22 == d20 || d22 == d19 || d22 == d18 || d22 == d17 || d22 == d16 || d22 == d15 || d22 == d14 || d22 == d13 || d22 == d12 || d22 == d11 || d22 == d10 || d22 == d9 || d22 == d8 || d22 == d7 || d22 == d6 || d22 == d5 || d22 == d4 || d22 == d3 || d22 == d2 || d22 == d1 || d22 == 0) {
        generated22()
    } else {
        generated23()
    }
}

function generated23() {
    d23 = getRandomInt(24)
    if (d23 == d22 || d23 == d21 || d23 == d20 || d23 == d19 || d23 == d18 || d23 == d17 || d23 == d16 || d23 == d15 || d23 == d14 || d23 == d13 || d23 == d12 || d23 == d11 || d23 == d10) {
        generated23()
    }
    if (d23 == d9 || d23 == d8 || d23 == d7 || d23 == d6 || d23 == d5 || d23 == d4 || d23 == d3 || d23 == d2 || d23 == d1 || d23 == 0) {
        generated23()
    } else {
        generated24()
    }
}

function generated24() {
    d24 = getRandomInt(24)
    if (d24 == d23 || d24 == d22 || d24 == d21 || d24 == d20 || d24 == d19 || d24 == d18 || d24 == d17 || d24 == d16 || d24 == d15 || d24 == d14 || d24 == d13 || d24 == d12 || d24 == d11 || d24 == d10 || d24 == d9 || d24 == d8 || d24 == d7 || d24 == d6 || d24 == d5 || d24 == d4 || d24 == d3 || d24 == d2 || d24 == d1 || d24 == 0) {
        generated24()
    } else {
        printAll()
    }
}

function printAll() {
    console.log(d1)
    console.log(d2)
    console.log(d3)
    console.log(d4)
    console.log(d5)
    console.log(d6)
    console.log(d7)
    console.log(d8)
    console.log(d9)
    console.log(d10)
    console.log(d11)
    console.log(d12)
    console.log(d13)
    console.log(d14)
    console.log(d15)
    console.log(d16)
    console.log(d17)
    console.log(d18)
    console.log(d19)
    console.log(d20)
    console.log(d21)
    console.log(d22)
    console.log(d23)
    console.log(d24)
}

There are plenty of tutorials out there – it’s just that none of them work for me. Even when copying the code to the letter, GEE will throw a multitude of errors. Even when I get it to export a TIF file, that just bugs out when opened in Google Earth Pro.

I have tried too many scripts to recount here. All I’m looking for is some basic code to export an image collection that works. The closest I have gotten is this:

var batch = require('users/fitoprincipe/geetools:batch')

// Load Landsat 8 imagery and filter it  
var collection = ee.ImageCollection("ASTER/AST_L1T_003") 
  .filter(ee.Filter.date('2013-10-01', '2013-12-01'))
  .filterBounds(geometry)
  .select(['B01', 'B02'])

// export collection to google drive
batch.Download.ImageCollection.toDrive(
  collection, 
 'Folder', 
  {name: 'ntl_{system:index}',
  crs: 'EPSG:4326',
  type: 'float',
  scale: 100,
  region: geometry});

This allows me to download a batch of TIF files into my Google Drive. The problem is that when I open these files in Google Earth Pro I get an internal error and the screen just becoming a large black rectangle.

My geometry is defined in the imports section, I chose a small rectangle of Kansas to try out my code.

What am I doing wrong?

My MongoDB/React project all of a sudden stopped working on localhost and immediately falls into an infinite refresh loop on localhost start-up. This started immediately after I deleted a required “name” field that I no longer wanted in the user model/controller.
Funny enough, the live link in Heroku still works. I have lost weeks on this issue.

What I have tried:

• Reset to the last working commit.
• Used a different machine without the changed code.
• Deleted and re-installing node_modules and package-lock.json files in both backend and
  frontend directories.
• Creating a whole new database and adding it to the MONGO_URI environment variable.

PC error:

JsonWebToken: JWT Malformed.

Mac error:

JsonWebToken: JWT Expired

This is my authMiddleware.js folder:

const jwt = require("jsonwebtoken");
const asyncHandler = require("express-async-handler");
const User = require("../model/userModel");

const protect = asyncHandler(async(req, res, next) => {
    let token;

    if(req.headers.authorization && req.headers.authorization.startsWith("Bearer")) {
        try {
            token = req.headers.authorization.split(" ")[1]

            const decoded = jwt.verify(token, process.env.JWT_SECRET)
            req.user = await User.findById(decoded.id).select("-password")

            next()
        } catch (error) {
            console.log(error);
            res.status(401)
            throw new Error("Not authorized");
        }
    }

    if (!token) {
        res.status(401)
        throw new Error("Not authorized, no token")
    }
});

module.exports = { protect };

This is my User Model:

const mongoose = require("mongoose");

const userSchema = mongoose.Schema({
    email: {
        type: String,
        required: [true, "Please add an email"],
        unique: true
    },
    password: {
        type: String,
        required: [true, "Please add a password"]
    }
}, {
    timestamps: true
})


module.exports = mongoose.model("User", userSchema)

Please let me know if I need to add any more information here before you decide to delete my post. That is really annoying. Thank you.