Category: javascript

I am creating scraping API and yesterday I bumped into a dilemma. When using puppeteer I saw that it takes a long time for certain request to be made and after asking it turned out that there is no need to use puppeteer for static content. For static content cheerio is more appropriate. But then immediately another question arised – if cheerio is better for static websites and puppeteer is better for dynamic websites, is there a way to see programatically if website is dynamic or static and based on that use the appropriate scraping tool. And will this slow the performance of the API? I won’t include any code because it doesn’t seem appropriate.
Thank you all in advance!

Here’s my code

const ReadMore = ({children}) => {
    const text = children;
    const [isReadMore, setIsReadMore] = useState(true);
    const toggleReadMore = () => {
        setIsReadMore(!isReadMore);
    };
    return (
        <>
          <p className={`text ${!isReadMore ? "expanded" : ""}`}>
              {isReadMore  ? text[0] : text}
              <span
                  onClick={toggleReadMore}
                  className={`read-or-hide ${!isReadMore ? "expanded" : ""}`}
                  style={{ color: "#00ADB5", cursor: 'pointer'}}
              >  
                  {isReadMore ? "Position Activities" : " show less"}
              </span>
          </p>
        </>
    );
  };
  
  export default function Experience() {
    
    return (
      <>
        <div className='main_div_experience_section'>
          <div className='experience_h1'>
            <span className='text-6xl font-bold text-white'>
              Experience
            </span>
          </div>
          <div className='parent_section'>
            <div className='rectangle'>
              <div className='grid'>
                <div className='col1'>
                  <div className='years_experience'><p>Sep 2023 - Present</p></div>
                </div>
                <div className='col2'>
                  <div className='text_company'>
                    <div className='grouper_name_and_logo'>
                      <div className='img_div_experience'>
                          <a href="home">
                            <img src={Nymbus} alt="" className='company_img_experience' href="home"/>
                          </a>
                      </div>
                      <h1 className='role_experience text-gray-400 text-xl font-normal'>
                        Full Stack Developer - asdfasdf
                      </h1>
                    </div>
                    <ReadMore>
                      <div className={`role_explanation_experience`}>
                        <ul>
                          <p className='my_p_experience'>Daily Activities:</p>
                          <li>SOMETHING</li>
                          <li>SOMETHING</li>
                          <li>SOMETHING</li>
                          <li>SOMETHING</li>
                          <li>SOMETHING</li>
                          <li>SOMETHING</li>
                          <li>SOMETHING</li>
                          <li>SOMETHING</li>
                          <p className='following_p_experience'>Achievements:</p>
                          <li>SOMETHING</li>
                          <li>SOMETHING</li>
                        </ul>
                      </div>
                    </ReadMore>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </>
    )
  }

The function ReadMore is basically a read more section that can increase or decrease by clicking on the <p> tag. However, I’ve been getting the warning “Warning: validateDOMNesting(…): <ul> cannot appear as a descendant of <p>.” and I’d like to fix that.

Furthermore, I’d like to add the functionality to add a transition for my ReadMore function, but I just can’t get it to work, I’ve been thinking is because of the warning (maybe?)

I’d pretty much appreciate your help or recommendations.

I’ve tried

• Modified ReadMore function
• Added CSS for transition functionality

class cfilewriter{    
    constructor(name){
        this.tempname = this.uuidv4() + '.bin';
        this.stream = null;
        this.name = name;
        fs.unlink(this.name);        
        this.stream = fs.createWriteStream(this.tempname, {'flags':'a'});        
    }
    write(dt){        
        this.stream.write(dt, (err, data) => {
            // finish renaming file
            if(err) throw err;
            alert("write ok !");
            this.close();
        });
    }
    uuidv4() {
        return "10000000-1000-4000-8000-100000000000".replace(/[018]/g, c =>
          (+c ^ crypto.getRandomValues(new Uint8Array(1))[0] & 15 >> +c / 4).toString(16)
        );
    }
    close(){                
        this.stream.end(()=>{
            // finish closing file
            console.log("finish close file");
            fs.rename(this.tempname, this.name, () => {
                // finish renaming file
                console.log("complete save");
            });
        });
    }
}

var gfile = null;
function save2file(blob){
    var reader = new FileReader();  
    var name = blob.name;    
    reader.onload = function () { // here we save variable 'file' in closure      
        console.log(this.result);
        var arrayBuffer=this.result;
        const buffer = mbuffer.Buffer.from(arrayBuffer);
        if (gfile==null) gfile = new cfilewriter(name);
        gfile.write(buffer);
        //gfile.close();
        
    }     
    reader.readAsArrayBuffer(blob);
}

this code demo download large file (4gb) to stream .
but i dont know how i copy that stream to download folder.

detail:

1. function save2file , read blob only demo to write stream.
2. class cfilewwrite used to write stream, save to download.
3. this code work , but file dont save in download folder.

everyone help me, i dont have experience in javascript, nodejs. thanks !

In my text area im using onKeydown event to listen to characters typed by user.
I need to prevent Alt gr + key combination values (ē, r̥, ṭ,…) to avoid accented keys in my text area.

if (event.code === 'AltRight')  {
      console.log('Prevent Accent letters');
      event.preventDefault();
    }

(or)

if (event.code === 17 || event.code === 18)  {
      console.log('Prevent Accent letters');
      event.preventDefault();
    }

Nothing worked. They are entering these if condition but still the accent text is getting printed in my textarea. How can this be prevented

I have 2 promises and i want to make something after both finish, but it doesn’t seem to run

I have this

console.log(loadFilesPromise);
console.log(getBucketAccessPromise);

console.log(111111111);
Promise.allSettled([getBucketAccessPromise, loadFilesPromise])
    .then(results => {
        console.log('FINISH ALL');
        console.log(results);
        this.$store.commit('setLoadingBucket', false);
    })
    .catch(error => {
        console.log('asdasdasdasdasdasdasd');
        reject(error)
    });
console.log(2222222222);

This is the loadFilesPromise

loadFilesPromise = this.loadFiles()

#... this function is inside methods in Vue.js framework
async loadFiles() {
    return api.getDir({
        to: '',
    })
        .then(ret => {
            console.log('Promise loadFilesPromise');
            # more code

#... in another part
getDir(params) {
    return new Promise((resolve, reject) => {
        axios.post('getdir', {
                dir: params.dir,

And this is the getBucketAccessPromise

let getBucketAccessPromise =  new Promise((resolve, reject) => {
                axios.post('getBucketAccess', {
                    username: '_self_'
                })
                .then(res => {
                    console.log('Promise 2');
                    # more code

and the output is

Promise {<pending>}
[[Prototype]]: Promisecatch: ƒ catch()constructor: .....
[[PromiseState]]: "fulfilled"
[[PromiseResult]]: undefined # the undefined result is expected

Promise {<pending>}
[[Prototype]]: Promisecatch: ƒ catch()constructor: .....
[[PromiseState]]: "pending"
[[PromiseResult]]: undefined # the undefined result is expected

111111111
# the FINISH ALL log should be here
2222222222
Promise 1
Promise 2

This is confusing for me, Promise.allSettled should be wait for both promises, but instead this acts like it’s not there

I’ve bene trying to figure out why an async fetch request gets absolutely ignored in my reactjs app. Basically, I am calling integrate() which, if generates a successful status result from its internal call, then awaits the result of a secondary async const call fetchOtherStuff()

Integrate is executing without issues, however for some reason Chrome is entirely ignoring the fetch request within fetchOtherStuff.

I know for a fact it is being called, as THIS WILL LOG logs every time. However there is no record of a network request being made and, predictably, THIS WILL NOT LOG does not log.

No console errors, no network requests, almost like it just aborts the call (as well as any other awaited constants below fetchOtherStuff()

Has anyone encountered this before? I don’t see anything on S.O.

(Calling await integrate() somewhere)

const integrate = async () => {
  const URL = 'https://whatever-endpoint.com';
  try {
    const response = await fetch(URL, {
      method: "GET",
      headers: {
          "Content-Type": "application/json"
      },
      credentials: 'include'
      });

      const responseData = await response.json();
      if (response.status === 200) {
        await fetchOtherStuff();
      }
   } catch (error) {
       return {status:500, body: 'Server Error, Please Try Again'}
      }
    }


  const fetchOtherStuff = async () =>{
  return new Promise(async (resolve,reject)=>{
    try {
      console.log("THIS WILL LOG")
      const orgCodes = await fetch(`https://endpoint-whatever.com`, {
        method: "GET",
        headers: {
          "Content-Type": "application/json"
        },
        credentials: 'include'
      }); 
      const result = await orgCodes.json();
      console.log("THIS WILL NOT LOG ", result)
      setDomainNotReadyCodes(result)
      resolve(result)               
    } catch (error) {
     reject(error)
    }
  })
}

So far this behavior is in Chrome and Firefox (latest versions of each).

Let’s say we set some cookies with the following JavaScript:

document.cookie = "is_halloween=true";
document.cookie = "skeletons=spooky";

Now let’s break the rules and do this:

document.cookie = "BOO";

If we check the value of document.cookie in the console, it looks like this:

is_halloween=true; skeletons=spooky; BOO

What exactly is BOO? If we try to remove it with the following code, nothing happens:

document.cookie = "BOO=;expires=Thu, 01 Jan 1970 00:00:00 GMT;";

document.cookie is still equal to is_halloween=true; skeletons=spooky; BOO

If we set document.cookie to an empty string:

document.cookie = "";

document.cookie is still equal to is_halloween=true; skeletons=spooky; BOO

Questions:

1. Is this special behavior in document.cookie intended to be used as a free text field for custom cookie syntax? If so, is it documented anywhere?

2. How do I get rid of BOO? The normal method of setting the expires field isn’t working.

Edit: BOO can be removed with document.cookie="Boo;expires=Thu, 01 Jan 1970 00:00:00 GMT"

I’m building a web application using React for the frontend and Express for the backend. I have a feature where users can reset their passwords using a unique token sent via email. However, when I try to access the reset password page with a token in the URL (e.g., /reset-password/56ee236da78383854dfb584343d56048259c6977), I’m encountering the error message “Cannot GET /reset-password/56ee236da78383854dfb584343d56048259c6977”.

app.js

        <Route path="/reset-password/:token" element={<ResetPassword />} />

resetpassword.jsx

import React, { useState } from 'react';
import { useParams } from 'react-router-dom';
import axios from 'axios';


const ResetPassword = () => {
  const { token } = useParams();
  const [newPassword, setNewPassword] = useState('');
  const [message, setMessage] = useState('');

  const handleOnSubmit = async (e) => {
    e.preventDefault();
    try {
      const response = await axios.post(
        `http://localhost:3000/auth/reset-password/${token}`,
        { newPassword },
        { headers: { 'Content-Type': 'application/json' } }
      );
      setMessage(response.data.message);
    } catch (error) {
      console.error('Error:', error);
      setMessage('Failed to reset password');
    }
  };

  return (
    <div>
      <h2>Reset Password</h2>
      <form onSubmit={handleOnSubmit}>
        <input
          type="password"
          placeholder="Enter new password"
          value={newPassword}
          onChange={(e) => setNewPassword(e.target.value)}
          required
        />
        <button type="submit">Reset Password</button>
      </form>
      <p>{message}</p>
    </div>
  );
};

export default ResetPassword;

router.js

router.get('/reset-password/:token', (req, res) => {
    const { token } = req.params;
    res.render('reset-password', { token });
});

router.post('/reset-password/:token', async (req, res) => {
    const { token } = req.params;
    const { newPassword } = req.body;

    try {
        // Encontre o usuário com o token de redefinição de senha
        const user = await User.findOne({
            resetPasswordToken: token,
            resetPasswordExpires: { $gt: Date.now() } // Verifique se o token ainda não expirou
        });

        if (!user) {
            return res.status(400).json({ message: 'Invalid or expired token' });
        }

        // Atualize a senha do usuário
        user.password = newPassword;
        user.resetPasswordToken = undefined;
        user.resetPasswordExpires = undefined;
        await user.save();

        res.json({ message: 'Password reset successfully' });
    } catch (error) {
        console.error('Error:', error);
        res.status(500).json({ message: 'Internal server error' });
    }
});

I am trying to create a simple math table of 2 printed out in a

tag, below is my HTML:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <h1>Table of 2</h1>
    <p id="table-goes-here">Goes here</p>

    <script src="script.js"></script>
</body>
</html>

and below is the JS I wrote:

let userNumber = 2;
let tableRow = document.getElementById("table-goes-here");

for(counter = 1; counter <= 12; counter++) {
    tableRow.innerHTML = counter + " x " + userNumber + " = " + counter * userNumber + "<br>";
};

my desired output is:

**Table of 2**

1 x 2 = 2
2 x 2 = 4
3 x 2 = 6
4 x 2 = 8
5 x 2 = 10
6 x 2 = 12
7 x 2 = 14
8 x 2 = 16
9 x 2 = 18
10 x 2 = 20
11 x 2 = 22
12 x 2 = 24

In above output the heading would be and the rest all of the table rows will be in a single

tag, but the output that I am getting is:

**Table of 2**

12 x 2 = 24

I am now thinking that my JS code is just repeating itself within the same line and that’s why it’s displaying just the last line of code, I have google a lot on this and also tried n and r solutions but nothing seems to be working I would really appreciate any help 🙂

with that said, I was able to get the desired output with:

let userNumber = 2;
let tableRow = document.getElementById("table-goes-here");

for(counter = 1; counter <= 12; counter++) {
    document.write(counter + " x " + userNumber + " = " + counter * userNumber + "<br>");
};

but obviously this way I wasn’t able to place the dynamically generated content into the

tags.

I’m having trouble building a Preact widget project,
Before that, I used microbundle to build index.js and index.css files
Then I want to use webpack to build one more time to combine these 2 files into 1 js file to embed into other websites that need to use it.
[enter image description here][1]

// webpack.config.js
const Dotenv = require("dotenv-webpack");
const path = require("path");

module.exports = {
  entry: "./dist/index.js",
  output: {
    filename: "main.js",
    path: path.resolve(__dirname, "dist"),
  },
  module: {
    rules: [
      {
        test: /.jsx?$/,
        exclude: /node_modules/,
        use: {
          loader: "babel-loader",
          options: {
            presets: [
              ["@babel/preset-env", { targets: "defaults" }],
              ["@babel/preset-react", { runtime: "automatic" }],
            ],
          },
        },
      },
    ],
  },
  resolve: {},
  plugins:[
    new Dotenv()
  ]
};

[1]: https://i.stack.imgur.com/Q6HxL.png

I’m developing a web site with [email protected] and Auth.js([email protected]).

I have already configured the provider with the following code, I can sign in with “Sign in” button correctly.

auth.ts

import NextAuth from 'next-auth'
import Cognito from 'next-auth/providers/cognito'

export const { handlers, signIn, signOut, auth } = NextAuth({
  providers: [Cognito],
})

app/login/page.tsx

import { auth, signIn } from '@/auth'

export default async function Login() {
  return (
    <form
      action={async () => {
        'use server'
        return await signIn('cognito')
      }}
    >
      <button type="submit">Sign in</button>
    </form>
  )
}

Problems

I want to use middleware to protect all pages and redirect to Amazon cognito(IdP) sign-in page automatically.
However, the following code does not work. (Stay protected page without session and does not redirect)

Is there any way to redirect to the Cognito sign-in page?

Note: Already I can redirect to /login in my application, but I want to remove a redundant click for the user.

middleware

import { signIn, auth } from "@/auth"

export default auth((request) => {
  if (!request.auth) {
    signIn('cognito')
  }
})

export const config = {
  matcher: ["/((?!api|_next/static|_next/image|favicon.ico|login).*)"],
}

error log

ReadonlyRequestCookiesError: Cookies can only be modified in a Server Action or Route Handler. Read more: https://nextjs.org/docs/app/api-reference/functions/cookies#cookiessetname-value-options
    at Proxy.callable (webpack-internal:///(middleware)/./node_modules/next/dist/esm/server/web/spec-extension/adapters/request-cookies.js:22:15)
    at signIn (webpack-internal:///(middleware)/./node_modules/next-auth/lib/actions.js:53:65)
 ⨯ unhandledRejection: ReadonlyRequestCookiesError: Cookies can only be modified in a Server Action or Route Handler. Read more: https://nextjs.org/docs/app/api-reference/functions/cookies#cookiessetname-value-options
    at Proxy.callable (webpack-internal:///(middleware)/./node_modules/next/dist/esm/server/web/spec-extension/adapters/request-cookies.js:22:15)
    at signIn (webpack-internal:///(middleware)/./node_modules/next-auth/lib/actions.js:53:65)
 ⨯ unhandledRejection: ReadonlyRequestCookiesError: Cookies can only be modified in a Server Action or Route Handler. Read more: https://nextjs.org/docs/app/api-reference/functions/cookies#cookiessetname-value-options
    at Proxy.callable (webpack-internal:///(middleware)/./node_modules/next/dist/esm/server/web/spec-extension/adapters/request-cookies.js:22:15)
    at signIn (webpack-internal:///(middleware)/./node_modules/next-auth/lib/actions.js:53:65)
 GET / 200 in 46ms

When I click on the search box, it doesn’t work. I can‘t type any characters into it. Can someone help me?

device: macbook air
browser: chrome
current_version select2 used: 4.0.7
enter image description here
enter image description here

I want to be able to input characters when clicking on the search box.

var data_filter = data.filter( element => element.zip == "12180")
console.log(data_filter)

I have this so far which gets me 1 zip code match but I have 126, how do I rewrite this to return results for all entries that contain any of those 126 zip codes

I’m not a developer, just trying to run some reports on data in our system

I am enhancing vite-plugin-single-spa. Specifically, I am working issue #120. The PR I have ready pretty much works but I had to take into account something very unexpected in my eyes: A disabled CSS LINK element triggers a network call when re-enabled (which I find OK), but never fires the load event, which is the part I’m not OK with.

A reproduction can be found here, where I used a simple Svelte project to showcase. I could not create a more minimal reproduction because not every CSS link that gets re-enabled triggers a network call. I am guessing this behavior is completely controlled by the cache policy applied to the content. For example, importing Bootstrap from JSDelivr doesn’t trigger a network call when the link element is re-enabled:

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css">

So a regular Vite + Svelte project that imports a CSS file from its /public folder works for the demo: The load event never fires.

My question here since I’m no HTML expert: Am I in the wrong thinking that if there’s a network call there should always be a load event? Furthermore: If I’m correct about how the need for a network call is determined, how could I know if a network call will be made? My use case in vite-plugin-single-spa would need to know this.

I’ve created an accordion component in NextJS. Now I want to open the accordion items automatically one by one with a custom duration for each individual accordion item. Also, the image next to the accordion group should be changed as per the accordion item that is open.

For example: https://www.perspective.co/ (Roughly 4th section on this page)

Current Work

Here’s my code:

Accordion Item

'use client'

const OnboardItem = ({ title, description, duration, isOpen, toggle }:{ title:string, description:string, duration:number, isOpen:boolean, toggle:any }) => {

  return(
    <div className='relative'>
      <div className='w-0.5 bg-neutral-300 dark:bg-neutral-500 absolute left-0 top-0 bottom-0'></div>
      <div className='ps-5 items-center'>
        <p className={`text-2xl leading-[38px] select-none cursor-pointer ${isOpen ? 'text-black dark:text-primary' : 'text-neutral-400 dark:text-neutral-300'}`} onClick={toggle}>{title}</p>
        <div className={`grid mt-1 overflow-hidden ease-in-out ${isOpen ? 'accordion-animate-open pb-1' : 'accordion-animate'}`}>
          <div className='leading-7 min-h-0'><p className='select-none'>{description}</p></div>
        </div>
      </div>
    </div>
  )
}

export default OnboardItem

Accordion Group

const [isOpen, setIsOpen] = useState(0)
    
const toggleOpen = (id:any) => () => setIsOpen(id)
    
  onboardData.forEach((element, index) => {
        
 });
    
 { 
   onboardData.map(({title, description, duration}, index) => (
     <OnboardItem 
       key={index}
       title={title}
       description={description}
       duration={duration}
       isOpen={isOpen === index}
       toggle={toggleOpen(index)}
     />
   ))
 }

Data

export const onboardData = [
  {
    title: 'Discovery Call',
    description: 'How embark on a collaborative project, simply visit our website and access our contact form to get in touch where we collaborate with you to outline the project scope and determine how we can assist you with our services.',
    duration: 5000
  },
  {
    title: 'Prototype Creation',
    description: 'What embark on a collaborative project, simply visit our website and access our contact form to get in touch where we collaborate with you to outline the project scope and determine how we can assist you with our services.',
    duration: 15000
  },
  {
    title: 'Design & Development',
    description: 'How embark on a collaborative project, simply visit our website and access our contact form to get in touch where we collaborate with you to outline the project scope and determine how we can assist you with our services.',
    duration: 10000
  },
  {
    title: 'Testing Modules',
    description: 'Where embark on a collaborative project, simply visit our website and access our contact form to get in touch where we collaborate with you to outline the project scope and determine how we can assist you with our services.',
    duration: 5000
  },
  {
    title: 'Launch',
    description: 'Can embark on a collaborative project, simply visit our website and access our contact form to get in touch where we collaborate with you to outline the project scope and determine how we can assist you with our services.',
    duration: 10000
  },
];