Category: javascript

i am working with next.js
we have a contact page and we dont want bots to get the emails address displayed in the cards.
One of my co-workers found a solution so that they don’t appear in the html source code.
how ever they appear in the js source code along with the rest of the code.
here is what the next.config looks like:

/** @type {import('next').NextConfig} */

const path = require('path');

const nextConfig = {
  reactStrictMode: true,
  productionBrowserSourceMaps: false,
  swcMinify: true,
  sassOptions: {
    includePaths: [path.join(__dirname, 'styles')],
  },
  images: {
    remotePatterns: [
      {
        protocol: 'https',
        hostname: 'images.ctfassets.net',
        pathname: '/4a2bd25mudy4/**',
      },
    ],
  },
  output: 'standalone',
};

module.exports = nextConfig;

Even with productionBrowserSourceMaps, i can find the files and access the source code.
Is it because i didn’t empty cache or navigation data?
I also tried to put it in .env, its not doing anything.
I found some threads talking about sentry. but when i build sentry seems to be depriciated and not supported anymore.

what can i do to hide the source code? or at least hide the email adresses both in the html source code and js source code.

We are building a maintenance page for when we need to do maintenance on our backend and React frontend.

The website is started with index.tsx. We need to check at the top if we are in maintenance mode, route to Maintenance page and don’t go further down the code as it does authentication checks.

if (inMaintenance) {
    history.push('/mainteancepage')

ReactDOM.render(
    <ApolloProvider>
        <AsyncIntlProvider>
            <Router history={history}>
                <App />
            </Router>
        </AsyncIntlProvider>
    </ApolloProvider>,
    document.getElementById("root")

    //need to exit the index.tsx here without going further down
    }

    // if we write " else { " here, we get "Modifiers not allowed here" 
    error at export

// authentication checks and graphQl should not be triggered if in Maintenance mode

// Start of code that must be skipped when in maintenance mode

export const checkErrors = onError({    //with else export gives error
        .........
        .........
}

const auth check = ......


ReactDOM.render(
    <ApolloProvider>
        <AsyncIntlProvider>
            <Router history={history}>
                <App />
            </Router>
        </AsyncIntlProvider>
    </ApolloProvider>,
    document.getElementById("root")
 )

// end of code that must be skipped when in maintenance mode

tried the below already – just after history.push(‘/mainteancepage’) :

window.stop();
debugger
throw new Error(“MaintenanceMode!”);

I want to create and use a simple element without using the Shadow DOM.

I create it like this:

customElements.define('my-card', class extends HTMLElement {
    constructor() {
        super();
        this.innerHTML = `
            <div>
                <slot name="title"></slot>               
            </div>`;
    }
});

And then use it like this:

    <my-card>
        <div slot="title">Some title</div>
    </my-card>

And what I get is:

<my-card>
            <div>
                <slot name="title"></slot>               
            </div>
</my-card>

What am I missing? Everything I find online is using the Shadow DOM but I want this way simpler.

Thanks a lot in advance

I have a value which needs to be interpreted as a string: 20716E510383

Any time I try to define this value JavaScript evaluates it as Infinity. I believe what’s happening is it reads the E in the string and thinks it’s a number like: 20716^510383 which is too big, so it becomes ‘Infinity’.

How can I get around this?

Is there a way I can prevent the automatic type inference or force JavaScript to interpret it as a string?

I have tried:

const a = String(20716E510383)

This does not work, it simply returns 'Infinity'.

We cannot do the below:

const a = '20716E510383'

as we are getting the value from an API response and returning it like this:

public encrypt(data: string): Promise<string> {
    return this.axios
      .get(`${this.url}?order_number=${data}`, {
        timeout: 10000,
      })
      .then(resp => {
        return resp.data; // here is where 'Infinity' is returned
      })
      .catch(err => {
        Core.logError('EncodeClient call failed', err.message);
        throw err;
      });
}

I have problem with my application that involves a non-linear algorithm. The problem involves finding the best solution, if not, the most optimal. I stumbled upon Microsoft Z3 and this might solve my issue.

I want to learn it but all I see is for Javascript or Python. I can’t seem to find a documentation or guide for C#.

This is a App.js file. I am making a react Instagram clone with firestore database (Attributes => username, caption, imageUrl) but with this code it renders a blank page but it works if I use with hard code data.

Please Help. Thanks.

import React, {useState, useEffect} from 'react';
import './App.css';
import Post from './Post';
import {db} from './firebase';
import { collection, onSnapshot } from "firebase/firestore"; //docs


function App() {
  const [posts, setPosts]= useState([]);

// useEffect runs a peice of code based on a specific condition
  useEffect (() => {

    //everytime a new post is added this code fires.
     onSnapshot(
      collection(db, "posts"),
      (snapshot) => { setPosts(snapshot.docs.map(doc => doc.data()));
          // set our posts to(from that snapshot.go get docs.map through every single one(get each doc=> each docs data e.g username etc.))
      }
    );
    
    }, []);

    return (
      <div className="App">
        <div className='app_header'>
          <img className='app_headerImage' src="Logo-Instagram.png" alt="instagram-logo" />

        </div>
        
        <h1>Hi This is Mahad</h1>

        {
          posts.map(post=>(
            <Post username={post.username} caption={post.caption} imageUrl={post.imageUrl} />
          ))
        }

      </div>
    );
}

export default App;

I am expecting that it render posts from firestore and show it on timeline.

let http = new XMLHttpRequest();
    http.open('get', 'json/products.json', true);
    http.send();
    http.onload = function(){
       if(this.readyState == 4 && this.status == 200){
          let products = JSON.parse(this.responseText);
          let output = "";
          for(let item of products){
             output += `
             
                
                <div class="col-md-2">
                        <div class="card" style="width: 18rem;">
                        <img src="${item.image}" class="card-img-top" alt="...">
                        <div class="card-body">
                            <h6 class="text-center"><strong>${item.description}</strong></h6>
                            <h6 class="text-center">Price <i class="fa fa-inr"></i>${item.price}</h6>
                            <div class="d-grid gap-2">
                            <button class="btn btn-danger">Buy Now</button>
                            </div>   
                        </div>
                        </div>
                      </div>
               
             `;
          }
          document.querySelector("#aa").innerHTML = output;
       }
    } 

HTML file

<div class="container-fluid">
        <div class="row mt-4 mb-4">
            <div id="aa"></div>
        </div>
                
</div>
            
      

I want all the cards to be displayed side by side according to the instruction that I applied in bootstrap. It shows in row wise. Please help.

I am developing SPA like Laracast, Udemy, or any other Learning Manage System.
Using Inertia.js and Vue 3
I am sending a Navigator.sendBeacon() before closing/switching tab to control watch the time of the video.

After the first load, it works fine (Sending one rq) but after navigating through the page or redirecting to the next video looks like beacons keep stacking.(https://i.stack.imgur.com/zdJ3w.png)
Only one of these requests should happen here rest of them indicates how many videos I visited before.

I assume that on the none SPA page that problem won’t occur because the page reloads and beacons are clearing.

As I am using lifecycle.js I tried to remove the listener (https://i.stack.imgur.com/od0Ai.png).

Also tried partial reload from inertia.js.

Is there any chance to clear beacons?

Let’s say, I intend to automate tasks like “follow” or “like” on my social media account.

So, the questions are:

1. Can I achieve this with JavaScript or PHP? How?

2. Do I need a third party library or tool/app to achieve this?

I tried writing an automation code for “follow” in the Chrome Dev Tools’s Sources -> New Snippet tab.

However, It didn’t seem very flexible. I intend to write the automation code in an “index.js” file, and then somehow start the automation by calling a function.

Also, Firefox Dev Tools doesn’t seem to have the Sources -> New Snippet tool available in the Chrome Dev Tools, to run code in, in the browser. Any ideas too on how to run code in the Firefox Browser?

I can’t figure out how to make those two buttons appear, I’m not really good with JS yet.

I wanted two additional buttons to appear in my task manager. “Mark all as done” should be disabled if all tasks are marked as done. The other button is “Hide/Show all done” depending if they’re hidden or not. Both buttons should be hidden if there are no tasks. For now, they don’t show up at all so I don’t even know if the rest of my code works. The issue is with JS and possibly in HTML, any help would be appreciated. I’m providing a github link, because I think it’s going to be easier to read this way. https://github.com/JakubJachacz/task-manager I apologise in advance for Polish words, but since classes are still in English I hope it won’t be a problem.

I made JS code to add class into mainDiv when I press on button, and when press again should class removed, but what happen is when press first time the class is added, but when press again the class does not removed

"use strict";
const mainDiv = document.getElementById("main");
const myButton = document.querySelector("button");

if (myButton.textContent === "Add Classs") {
  myButton.onclick = function() {
    mainDiv.classList.add("added-from-js");
    this.textContent = "Remove Class";
  };
} else if (myButton.textContent === "Remove Class") {
  myButton.onclick = function() {
    mainDiv.classList.remove("added-from-js");
    this.textContent = "Add Class";
  };
} else {
  console.log("there is a problem in your code");
}

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8" />
  <meta http-equiv="X-UA-Compatible" content="IE=edge" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>JS training</title>
  <link rel="stylesheet" href="style.css" />
</head>

<body>
  <div id="main" class="show cool main-div zero">Our Main Div</div>
  <button>Add Class</button>
  <script src="main.js"></script>
</body>

</html>

I tried to make toggle for class, without toggle method, to apply if condition and change the value of button each click

My website is rendering the 404 page (NotFound component) first and then the right route.

adminDatas, NOneDatas and graphData have a loading state who is true if the datas are empty

return (
    <Router>
      <AuthenticatedTemplate>
        {loading ? (
          <Loading />
        ) : (
          <>
            <Header />
            {showNav === true && <NavBar />}
            <Routes>
              {
                 adminDatas?.find(
                  (one) => one?.name === graphData?.displayName
                ) ||
                NOneDatas?.find(
                  (one) => one?.name === graphData?.displayName
                ) ||
                graphData?.displayName ===
                  `${process.env.REACT_APP_NAME}` ? (
                  <>
                    <Route path="/home" exact element={<Home />} />
                    <Route path="/intern/new" exact element={<NewOrder />} />
                    <Route
                      path="/intern/new/redirection"
                      exact
                      element={<ThankYou setShowNav={setShowNav} />}
                    />
                    <Route path="/orders" exact element={<Orders />} />
                    <Route path="/oneOrder/:id" exact element={<OneOrder />} />
                    <Route
                      path="/orders/ToValidate"
                      exact
                      element={<ToValidate />}
                    />
                  </>
                ) : (
                  <>
                    <Route path="/home" exact element={<Home />} />
                    <Route path="/intern/new" exact element={<NewOrder />} />
                    <Route
                      path="/intern/new/redirection"
                      exact
                      element={<ThankYou setShowNav={setShowNav} />}
                    />
                  </>
                )
              }
              <Route path="/*" element={<NotFound />} />
            </Routes>
          </>
        )}
      </AuthenticatedTemplate>
      <UnauthenticatedTemplate>
        <Routes>
          <Route path="/*" element={<Login />} />
        </Routes>
      </UnauthenticatedTemplate>
    </Router>
  );

How to not see 404 page(NotFound component) before the right rendering ?

I have checked all the loading state and tried to change the placement of ” <Route path=”/*” element={< NotFound />} />” but with no success

I initialize html video on webview based app. I set atribute autoplay, muted and playinline in video tag. This video plays automatically on some devices, but another not working.
Although the same version and the same Iphone 12

I want to know how it not woking on all device IOS. And how case can’t autoplay video on webview on IOS

Launching the application

An error occurred while launching the application. Ошибка при выполнении команды “adb devices”: Command failed: adb devices “adb” �� ���� ����७��� ��� ���譥� ��������, �ᯮ��塞�� �ணࠬ��� ��� ������ 䠩���. (error code 303)

{
    "version": "0.2.0",
    "configurations": [
        {
            "type": "chrome",
            "request": "launch",
            "name": "Запустить Chrome на localhost",
            "url": "http://localhost:8080",
            "webRoot": "${workspaceFolder}"
        },
        {
            "name": "Debug Android",
            "cwd": "${workspaceFolder}",
            "type": "reactnative",
            "request": "launch",
            "platform": "android",
            "isDynamic": true
        }
    ]
}

There are two inputs and one output.
input 1: Start Date (string type)
input 2: End Date (string type)
output: End Date – Start Date

In input 1 the user selects start date and in input 2, the user selects end date.
End date is optional. So, I want that if the user don’t select an End date, the input 2 should be Current date.

I tried differrent things but didn’t worked.

const startInput = document.querySelector(".exp_start").innerHTML;
const endInput = document.querySelector(".exp_end").innerHTML;
var end = function endCalc() {
    if (endInput == null) {
    new Date();
}
    else {
    endOutput;
}
}; 
const startDate = new Date(startInput);
const endDate = new Date(end);
const time = Math.abs(endDate - startDate);
const years = Math.abs(time / (1000 * 60 * 60 * 24 * 30.5) / 12).toFixed(1);
document.querySelector(".exp_years").innerHTML = years;

I was expecting the output will be the number of years (like “2”). But the output I got was “NaN”.
Don’t know what’s wrong with the code…

The result is this