Category: javascript

I am trying to just edit the index.js

export default function Home() {
  return (
    <div>
      <h1>Hello</h1>
    </div>
  );
}

/styles/globals.css has

:root {
  --background: #ffffff;
  --foreground: #171717;
}

@theme inline {
  --color-background: var(--background);
  --color-foreground: var(--foreground);
  --font-sans: var(--font-geist-sans);
  --font-mono: var(--font-geist-mono);
}

@media (prefers-color-scheme: dark) {
  :root {
    --background: #0a0a0a;
    --foreground: #ededed;
  }
}

body {
  background: var(--background);
  color: var(--foreground);
  font-family: Arial, Helvetica, sans-serif;
}

_app.js has:

import "@/styles/globals.css";

export default function App({ Component, pageProps }) {
  return <Component {...pageProps} />;
}

When I do npm run build it is showing a blank page in console the error

Failed to load resource: net::ERR_INCOMPLETE_CHUNKED_ENCODING 

pops up. Tried hard reset, removing and adding all node modules, clearing .next cache and npm cache as well. node and next are up to date

From my 64-bit machine, when I am in node REPL, I get a certain result with the below javascript code

> const asBinary = BigInt(7306822938861727746).toString(2)
undefined
> asBinary
'110010101100111000011001011111111101011100001110111000000000000' -- (A)

The same when tried from Github CoPilot goes like this

Me
Convert 7306822938861727746 to binary treating it as a 64-bit decimal

GitHub Copilot
The binary representation of 7306822938861727746 treated as a 64-bit decimal is:

0110010101011111010101101011110011111101000000000000000010 -- (B)

Me
Convert 7306822938861727746 to binary treating it as a BigInt in Javascript

GitHub Copilot
To convert 7306822938861727746 to binary treating it as a BigInt in JavaScript, you can use the following code:

const binaryRepresentation = BigInt("7306822938861727746").toString(2);
console.log(binaryRepresentation);// Output: 
11001010101111101010110101111001111110100000000000000010  -- (C)

Github CoPilot is consistent in its responses (B) and (C), when you exclude the leading zero in its first result (B).

(A) differs from both (B) and (C) when starting with the 9th place from the left.

How can this be explained?

So Im trying to make a function what searches for empty cell. Funny enough it works perfectly in other script but refuses in main one. It seemes like for some reason when I call a function which requires Sheet and Range in order to work, Range is taken by function correctly (example: ‘C4:C34’). But the sheet is not. It becomes just “Sheet” in log. But I do give a function “sheet3”. Ive tried to give sheet`s name with ‘ ‘, to rename “sheet3” to “sheettrd” but nothing seems to help.

Here is the function itself:

function findEmptyCell(sheet, range) {
  var checkRange = transformCords(range);
  Logger.log(sheet);
  Logger.log(range);
  Logger.log(checkRange);
  for (var i = checkRange[1][0]; i < checkRange[1][1]; i++) {
    if ((sheet.getRange(checkRange[0][0] + i).isBlank())) {
      return sheet.getRange(checkRange[0][0] + i).getA1Notation();
    }
  }
}

And where I call it:

var startPos = transformCords(findEmptyCell(sheet3, 'С4:С34'));
for (let i = 0; i < 4; i++) {
  sheet3.getRange(arrDay[i]+startPos[1])
  .setValue(sheet1.getRange('K' + (40 + i)).getValue());
}

And if its important:

var ss = SpreadsheetApp.getActiveSpreadsheet();
var sheet1 = ss.getSheetByName('Журнал');  
var sheet2 = ss.getSheetByName('Бар');  
var sheet3 = ss.getSheetByName('Итоги');

I want to set each button to display a specific text, I don’t know what I’m doing wrong if someone can help me. When I press any button it only gives me the text text for btn 3

for (let i = 0; i < btnOpenPage.length; i++) {
btnOpenPage[i].addEventListener("click", openPage);
}

if (document.getElementsByClassName("first").length > 0) {
document.querySelector(".continut").textContent = `text for btn 1`;
}

if (document.getElementsByClassName("second").length > 0) {
document.querySelector(".continut").innerHTML = `text for btn 2`;
}

if (document.getElementsByClassName("third").length > 0) {
document.querySelector(".continut").innerHTML = `text for btn 3`;
}

I have a react component, which gets some data from backend and shows the result in a piechart.

function SiteInfo() {

    const [url, setUrl] = React.useState('Loading...')
    const [title, setTitle] = React.useState('Loading...')
    const [uptime, setUptime] = React.useState(0)
    const [uptimeData, setUptimeData] = React.useState([])
    const [online, setOnline] = React.useState(false)
    const [latency, setLatency] = React.useState(-1)

    const [searchParams, _] = useSearchParams()
    const siteid = searchParams.get('siteid')

    React.useEffect(() => {
        (async () => {
            const response = await fetch(`http://localhost:3000/siteinfo/${siteid}`, {
                method: 'GET',
                headers: {
                    'Content-Type': 'application/json',
                    'Authorization': `Bearer ${localStorage.getItem('auth_token')}`
                }
            })
            const siteinfo = await response.json()
            const sitedata = siteinfo.sitedata
            console.log(sitedata.uptimeData)
            setUrl(sitedata.site)
            setTitle(sitedata.title)
            setUptime(sitedata.uptime)
            setUptimeData(sitedata.uptimeData)
            setOnline(sitedata.uptimeData.at(-1).up)
            setLatency(sitedata.uptimeData.at(-1).latency)
        })()
    }, [siteid])
    
    return (
        // ...
                <div>
                    <PieChart width={500} height={300} >
                        <Pie
                            cx='50%'
                            cy='50%'
                            data={[
                                {
                                    name: 'Up',
                                    value: uptime,
                                    fill: '#3CFF60',
                                    stroke: '#29D849',
                                },
                                {
                                    name: 'Down',
                                    value: 100 - uptime,
                                    fill: '#FA8080',
                                    stroke: '#F82D2D',
                                }
                            ]}
                            dataKey='value'
                        >
                        <LabelList dataKey='name' position='outside' />
                        </Pie>
                        <Tooltip />
                    </PieChart>
                </div>
         // ...
    )
}

There is an animation associated with the piechart which appears normally when I remove the line setUptimeData(sitedata.uptimeData), but when the line is present, the animation does not play. Even though uptimeData is not related to the Pie chart in any way.

One thing to be noted is that the field sitedata.uptimeData is a big array of objects (almost 20 elements), maybe it is somehow taking long to set the state and resetting the animation midway. However I cannot find a way to confirm this or an alternative way to set the state.

I am using recharts for the piechart.

Any help will be greatly appreciated.

I’ve been trying to develop an extension called Mod Tamer (https://github.com/KittenCoder/mod-tamer) for Taming.IO. It is a mod store that partially relies on the downloading of JavaScript from the repository. I’ve been wanting to make it work on the latest versions of Chrome so I have to do it in MV3 but according to the developer docs, you can’t run “remote JavaScript” from an extension. Is there any way I could get around this? Like, could I somehow have the script execute the other script or should I take a userscript installer (TamperMonkey) sort of approach or just add the new mod to the source code and update each time? (I haven’t actually done the extension yet.)

I haven’t actually tried anything but according to everything I’ve seen on the web, you can’t do it.

I have a programming question around the project architecture for geolocated data on a map.
My goal is to have a map that displays realtime data (timeframe: days/weeks) as markers on a map.
As example lets use traffic reports (incidents, jams, blockages, …) around the driver of a vehicle.
The map has no bounds, so all datapoints can be located all around the world.

The user has the option to pan and zoom the map and see a selection of markers most relevant to the current bounds.
But now I’m wondering how to efficiently load this data initially and update on panning/zooming.

Therefore, my question is:
Are there architectures/approaches already documented (papers, packages, documentation) on how to tackle this problem? My main point of concern is the server side of things.

Context

There are too many datapoints to load all markers at once and do the calculations on the client. Clustering or prioritisation would therefore have to be made dynamically on the server side.

Users are able to like/dislike datapoints which should change their visibility.

Current approach

Client

At first I initialise the map and center it on the user.
Based on the current zoom level I split the map in different tiles and calculate which of them are currently in the viewport. Then I make a call to the api to fetch all data relevant to these tiles.
On panning I calculate which tiles are added to the viewport and selectively load more data on demand.

For zooming I’m not yet sure.
When zooming out, I can probably keep the existing markers and hide those which are not relevant at the new zoom level.
For zooming in, I’ll probably have to make a complete refetch of data for all tiles, to load data for more detailed zoom levels.

Server

For the server side, I’m honestly a bit unsure at this point in time. I have ideas, but feel like I should not reinvent the wheel.

Priority at zoom levels

My main problem is the calculation of the priority at different zoom levels.
Because users can vote on each datapoint, the marker visibilities are pretty dynamic and keep changing every few minutes/hours. Voting effects the markers own visibility as well as its priority relative to others. Therefore the visibility of markers would either need to be calculated every time a tile is requested or an index that stores the visibilities would constantly be updated.

Querying of tiles

I currently calculate different sized tiles for different zoom levels. In order to be able to move data between different sized tiles, the tile sizes are always doubled and halved.
The next higher level therefore always combines 2×2 smaller tiles and a smaller level splits the current tile in 4 parts (2×2).

But I’m not yet sure, how to connect lat/long positions to all the different sizes of tiles in the db/queries. Theoretically I could only store the smallest tile for each datapoint, because larger tiles can be calculated based on it. But this would lead to large WHERE tileId IN (2x10, 3x10, 4x10, 5x10, ...) queries. Alternatively I could have one individual column for each tile size and query the current column for the current tile size, but this would increase the size of each row in database.

Environment

• API: PHP, Laravel, (maybe EleasticSearch)
• Client: Angular, Google / Apple Maps / Open Streetmap

Conclusion

So far.. this is my status quo. Currently I feel like I could start and build a system that would work, but reach its limitations quickly.

And I feel like this is a relatively common problem and I don’t want to reinvent the wheel. I was wondering if there are any infos how the big guys solved this, like:

• Google Maps
• Apple Maps
• Open Streetmap
• …
  They have integrated location markers which are rendered based on zoom levels.
  Most of their places are less dynamic, but at some point in time their visibility needs to be calculated. And data needs to be queried constantly.

Therefore, I would really appreciate any inputs that could help me expand my concept and build a reasonable architecture. Preferably one that is not too complex to initially set up, but can be extended / scaled on demand, in case more and datapoints/-types are added.

Everything helps:

• Keywords to search the web with – I already did a lot of researching, but feel like there are resources which I was so far not able to find
• Concepts to tackle this problem
• Packages or services that provide help (preferably open source and free to use)

I have made a footer.html file

<!--====Footer start====-->
<footer class="footer">
  <!--====Footer(1/4) start====-->
  <section class="footer-1">
    ...
  </section>
  <!--====Footer(1/4) end======-->
  <!--====Footer(2/4) start====-->
  <section class="footer-2">
    ...
  </section>
  <!--====Footer(2/4) end======-->
  <!--====Footer(3/4) start====-->
  <section class="footer-3">
    ...
  </section>
  <!--====Footer(3/4) end======-->
  <!--====Footer(4/4) start====-->
  <section class="footer-4">
    ...
  </section>
  <!--====Footer(4/4) end======-->
</footer>
<!--====Footer end====-->

and I have linked it to for example index.html page by JS code as below:

//footer repetition in each page
fetch('footer.html')
  .then((res) => res.text())
  .then((data) => {
    document.getElementById('footer-container').innerHTML = data;
    console.log('Footer loaded:', data);
  })
  .catch((error) => {
    console.error('Error loading footer:', error);
  });

As my footer has four section elements, the last section (footer (4/4)) disappears when I ‘open page with live server’!
I hope I have conveyed my point correctly.
I would appreciate your guidance.

I am following radix ui dialog docs:

https://www.radix-ui.com/primitives/docs/components/dialog

and for some reason i can’t get the “your dialog” to work:

// your-dialog.jsx
import * as React from "react";
import { Dialog as DialogPrimitive } from "radix-ui";
import { Cross1Icon } from "@radix-ui/react-icons";

export const DialogContent = React.forwardRef(
    ({ children, ...props }, forwardedRef) => (
        <DialogPrimitive.Portal>
            <DialogPrimitive.Overlay />
            <DialogPrimitive.Content {...props} ref={forwardedRef}>
                {children}
                <DialogPrimitive.Close aria-label="Close">
                    <Cross1Icon />
                </DialogPrimitive.Close>
            </DialogPrimitive.Content>
        </DialogPrimitive.Portal>
    ),
);

export const Dialog = DialogPrimitive.Root;
export const DialogTrigger = DialogPrimitive.Trigger;

and than use it across my app:

import { Dialog, DialogTrigger, DialogContent } from "./your-dialog";

export default () => (
    <Dialog>
        <DialogTrigger>Dialog trigger</DialogTrigger>
        <DialogContent>Dialog Content</DialogContent>
    </Dialog>
);

the basic idea here is that you design a dialog once, and than export parts like trigger and content and dialog.root and this way you can feed dynamic content and reuse the design.

but for some odd reason, i can’t get it to work! it won’t popup. no errors, no noting.

I have connected db in the below file
backend/db-connect.js

const { Client } = require('pg');

const client = new Client({
    user: 'postgres',
    host: 'localhost',
    database: 'students-db',
    password: 'admin',
    port: 5432,
});

client.connect();

module.exports = client;

and I hit the query using the below statement from my server.js file

const data = await client.query(query);

The problem here is lets say the query formed is
SELECT * FROM public.students WHERE name ILIKE 'THOMAS'
(or)
SELECT * FROM public.students WHERE name = 'THOMAS'

It works on pgadmin whereas when hit via code

The no of rows fetched are empty

The response always comes like

 {"command":"SELECT","rowCount":0,"oid":null,"rows":[],"fields": [...],
  ....
 }

Could someone help me with this and let me know what has to be fixed.

Thanks in advance

[In this reference link the video starts on hover ,I wants to know how ?]

I want to build the diamond using nested for loops, what I do?

Here is my code:

for(var i = 1; i <= 5; i++){
var pattern = "";
for(var j = 5; j >= i; j++){
    pattern = pattern + " *";
}
console.log(pattern);

}

I recorded a short video of my problem.
When the modal window is opened and closed, the dropdown button isn’t working, but when I open and close the modal window again, it works as expected. How to fix it?

https://drive.google.com/file/d/1Qw-9EiK6PakD3QNzotu0GLQCs3bv0nGx/view?usp=drive_link

Script to show modal window

showInPopup = (url, title) => {
    $.ajax({
        type: "GET",
        url: url,
        success: function (res) {
            $("#form-modal .modal-body").html(res);
            $("#form-modal .modal-title").html(title);
            $("#form-modal").modal('show');
        }
    })
}

The button to trigger script

<a onclick="showInPopup('@Url.Action("AddOrEditSet", "Home", null, Context.Request.Scheme)', 'New set')">
    <i class="bi bi-plus-lg"></i> Add new set   
</a>

The modal popup menu (didn’t know where to put it, so I put it in the default layout view, for some reason putting it in a specific view disables the possability to use it in another view)

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

<head>
    <partial name="_MetaPartial" />
    <partial name="_CssPartial" />
</head>

<body class="background-normal">
    <partial name="_HeaderPartial" />

    <div class="container">
        <partial name="_NotificationPartial" />
        @RenderBody()
    </div>

    @* Add/Edit set popup menu *@
    <div class="modal fade" id="form-modal" tabindex="-1" data-bs-backdrop="static" data-bs-keyboard="false" aria-labelledby="pop" aria-hidden="true" data-bs-theme="dark">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <h2 class="modal-title text-light" id="pop"></h2>
                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                </div>
                <div class="modal-body">

                </div>
            </div>
        </div>
    </div>


    <partial name="_ScriptsPartial" />
    @await RenderSectionAsync("Scripts", required: false)
</body>
</html>

Just in case the issue in a dropdown button itself here is the code of a view.

@inject UserManager<ApplicationUser> userManager

@{
    var user = await userManager.GetUserAsync(User);
}
<header>
    <nav class="navbar navbar-dark bg-primary border-bottom box-shadow mb-3">

        <div class="container-fluid">

            <a asp-area="Sets" asp-controller="Home" asp-action="Index" class="navbar-brand ms-5">Flashcards</a>

            @if (user is not null)
            {
                <div class="dropdown me-5">

                    @if (@user.ImageURL is null)
                    {
                        <button class="btn dropdown-toggle text-bg-dark" data-bs-auto-close="outside"
                                type="button" id="dropdownMenu1" data-bs-toggle="dropdown" aria-expanded="false">
                            @user.UserName

                        </button>
                    }
                    else
                    {
                        <a class="btn dropdown-toggle avatar-container-header" id="dropdownMenu1" data-bs-auto-close="outside" data-bs-toggle="dropdown" aria-expanded="false">
                            <img class="user-link-photo" src="@user.ImageURL" />
                        </a>
                    }

                    <ul class="dropdown-menu dropdown-menu-end dropdown-menu-dark" aria-labelledby="dropdownMenu1">
                        <li class="justify-content-center" style="display: flex">
                            @if (@user.ImageURL is not null)
                            {
                                <img class="user-link-photo ms-2" src="@user.ImageURL" />
                            }
                            <div class="text-center align-content-center mx-2 text-nowrap">
                                <p class="m-0">@user.UserName</p>
                                <p class="m-0">@user.Email</p>
                            </div>
                        </li>
                        <li class="dropdown-divider"></li>
                        <li class="text-center text-big">
                            <a asp-area="Account" asp-controller="Account" asp-action="Settings" class="dropdown-item">
                                <i class="bi bi-gear"></i> Achievements
                            </a>
                        </li>
                        <li class="text-center text-big">
                            <a asp-area="Account" asp-controller="Account" asp-action="Settings" class="dropdown-item">
                                <i class="bi bi-gear"></i> Settings
                            </a>
                        </li>
                        <li class="dropdown-divider"></li>
                        <li class="text-center text-big">
                            <form method="post" asp-area="Account" asp-controller="Account" asp-action="Logout">
                                <button type="submit" class="dropdown-item">
                                    <i class="bi bi-x-circle"></i> Logout
                                </button>
                            </form>
                        </li>
                    </ul>

                </div>
            }
        </div>
    </nav>
</header>

I am trying to fix the following error for both Android and iOS Simulator on Snack Expo Snack Error. The error says this: Unable to resolve module ‘module://react-dom.js’. I have used the dnd kit so that I can drag and drop smoothly in my code. It somehow works for web but when I try to get the output as an android or iOS app, the error appears. I have tried to fix this by adding react and react-dom to my dependencies as the following:

package.json:

  "dependencies": {
    "@dnd-kit/core": "*",
    "@dnd-kit/sortable": "*",
    "@expo/vector-icons": "^14.0.2",
    "react-native-paper": "4.9.2",
    "react": "^19.0.0",
    "react-dom": "^19.1.0"
  }
} 

In the end, it said the same error. I’m not sure if it is just that Snack does not support dnd kit that I have used in my App.js

DnD kit in my App.js:

import React, { useState } from 'react';
import { View, Text, StyleSheet, Image, TouchableOpacity, ScrollView } from 'react-native';
import {
  DndContext,
  closestCenter,
  PointerSensor,
  TouchSensor,
  useSensor,
  useSensors,
} from '@dnd-kit/core';
import {
  SortableContext,
  arrayMove,
  rectSortingStrategy,
  useSortable,
} from '@dnd-kit/sortable';

I do not know what to do, so if you could give me an answer that would be great.

I want to make a website where people can order paintings. I want to make an order inquiry with a form and a back end to send me the message the user sent through that form and the ID of the painting they wanted to buy. Is there any plugins for this?

Thank you!