Category: javascript

Symptoms:

• Model renders once, then the next frame throws the error.
• On route change or Collapse/Tab hide, the error repeats.
• Adding viewer.clear() in cleanup removes the message but stops
  rendering completely.

Component code:

import React, { useRef, useEffect } from "react";
import * as $3Dmol from "3dmol";

export default function Protein3DMol({ pdbText }) {
  const divRef = useRef(null);

  useEffect(() => {
    if (!divRef.current || !pdbText) return;

    const viewer = $3Dmol.createViewer(divRef.current, { backgroundColor: "white" });

    viewer.addModel(pdbText, "pdb");
    viewer.setStyle({}, { cartoon: { color: "spectrum" } });
    viewer.zoomTo();
    viewer.render();

    return () => {
      viewer.clear();
      const canvas = divRef.current.querySelector("canvas");
      const gl = canvas?.getContext("webgl") || canvas?.getContext("experimental-webgl");
      gl?.getExtension("WEBGL_lose_context")?.loseContext();
    };
  }, [pdbText]);

  return <div ref={divRef} style={{ width: "100%", height: "100%", minHeight: 300 }} />;
}

Fetch Logic:

fetch("https://two4-cp-backend.onrender.com/filtered_pdbs/{pdb}")
  .then(res => res.text())
  .then(setPdbText);

What I’ve tried:

• Wait for div.clientWidth && clientHeight before calling
  createViewer.
• Set minHeight: 300 on the container.
• Attach WEBGL_lose_context in cleanup.
• Disable GPU hardware acceleration.
  (Error disappears, but 3D is of course disabled.)

How can I safely render a PDB string using 3Dmol.js without triggering GL_INVALID_FRAMEBUFFER_OPERATION in Brave and Firefox? I want to keep the rendering live and interactive, not just a static snapshot.

I have few global styles in my component library, which I am trying to use in a Next.js project. They only get applied as soon as I add the console.log in following snippet.

"use client";

import * as components from 'component-library';
import { FloButton } from 'component-library';

export default function Home() {
  console.log(components); // <--
  return (
    <>
      <FloButton click={() => console.log('clicked')}>Button</FloButton>
    </>
  );
}

What’s my best bet here?

The package.json of the component library:

{
  "name": "component-library",
  "private": true,
  "version": "0.0.0",
  "type": "module",
  "main": "dist/main.js",
  "types": "dist/main.d.ts",
  "files": [
    "dist"
  ],
  "sideEffects": [
    "**/*.css",
    "**/*.scss"
  ],
  "exports": {
    ".": {
      "import": "./dist/main.js",
      "types": "./dist/main.d.ts"
    },
    "./icon/*": {
      "import": "./dist/components/FloIcon/*.js",
      "types": "./dist/components/FloIcon/*.d.ts"
    },
    "./webcomponents": {
      "import": "./dist/webcomponents.js",
      "types": "./dist/webcomponents.d.ts"
    }
  },
  "scripts": {
    "dev": "vite",
    "build": "rm -rf dist && vite build",
    "lint": "eslint .",
    "storybook": "storybook dev -p 6006",
    "build-storybook": "storybook build"
  },
  "peerDependencies": {
    "@floating-ui/react": "^0.27.12",
    "@r2wc/react-to-web-component": "^2.0.4",
    "@types/classnames": "^2.3.4",
    "classnames": "^2.5.1",
    "react-dom": "^19.1.0",
    "react": "^19.1.0"
  },
  "devDependencies": {
    "@eslint/js": "^9.25.0",
    "@storybook/react-vite": "^9.0.12",
    "@types/lodash.kebabcase": "^4.1.9",
    "@types/node": "^24.0.3",
    "@types/react": "^19.1.2",
    "@types/react-dom": "^19.1.2",
    "@vitejs/plugin-react": "^4.4.1",
    "eslint": "^9.25.0",
    "eslint-plugin-react-hooks": "^5.2.0",
    "eslint-plugin-react-refresh": "^0.4.19",
    "eslint-plugin-storybook": "^9.0.12",
    "glob": "^10.4.5",
    "lodash.kebabcase": "^4.1.1",
    "prettier": "^3.6.0",
    "sass-embedded": "^1.89.2",
    "storybook": "^9.0.12",
    "ts-morph": "^26.0.0",
    "typescript": "~5.8.3",
    "typescript-eslint": "^8.30.1",
    "vite": "^6.3.5",
    "vite-plugin-css-injected-by-js": "^3.5.2",
    "vite-plugin-dts": "^4.5.4",
    "vite-plugin-lib-inject-css": "^2.2.2"
  }
}

Thanks!

On our website we currently have the Jquery date picker implemented, but my boss would like it if the calendar could just be active the whole time without the user needing to click on it to get the calendar to pop up. I know I can hide the textbox with the hidden feature, so it will still pass the information the information along. I just can’t figure out how to get it to display just the calendar itself all the time without the textbox being present or needing to toggle something since the code itself never seems to trigger a click event and must be in the base JS of the Jquery calendar.

Our current code:

    {{ '//code.jquery.com/ui/1.9.2/themes/base/jquery-ui.css' | stylesheet_tag }}
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.9.2/jquery-ui.min.js" defer="defer"></script>
<p></p><div style="display: flex; margin-left:auto !important;">
  <div style="width:400px; clear:both; float:right; margin-left:auto !important;">
  
  <p style="float:right;">
    
    <label style="float:right;font-size: 30px;font-weight: bold; position:relative; left: -25px;" for="date">Select Future Delivery Date:</label>
    <input style="float:right; position:relative; left: -35px; width: 365px" id="date" type="text" name="attributes[date]" value="{{ line_item.attributes.date }}" />
    <span class="instructions"> </span>
  </p>
</div>
</div>
<script>
  window.onload = function() {
    if (!window.jQuery) return;
    let $ = window.jQuery;
    
    // 1) List your blocked dates here (in YYYY-MM-DD format)
    const blocked = ["2025-05-26","2025-07-04"];
    
    // 2) Function to calculate dynamic minDate based on current day/time
    function calculateMinDate() {
      const now = new Date();
      
      // Convert to Eastern Time
      const easternTime = new Date(now.toLocaleString("en-US", {timeZone: "America/New_York"}));
      const currentDay = easternTime.getDay(); // 0=Sunday, 1=Monday, ..., 6=Saturday
      const currentHour = easternTime.getHours();
      
      let minDate;
      
      if (currentDay >= 1 && currentDay <= 3) { // Monday (1) through Wednesday (3)
        if (currentHour >= 14) { // 2pm (14:00) or later
          minDate = 3;
        } else { // Before 2pm
          minDate = 2;
        }
      } else if (currentDay === 4) { // Thursday
        if (currentHour >= 14) { // 2pm or later on Thursday
          // Next Tuesday is 5 days from Thursday (Thu->Fri->Sat->Sun->Mon->Tue)
          minDate = 5;
        } else { // Before 2pm on Thursday
          // Next Monday is 4 days from Thursday (Thu->Fri->Sat->Sun->Mon)
          minDate = 4;
        }
      } else if (currentDay === 5) { // Friday
        // Next Tuesday is 4 days from Friday (Fri->Sat->Sun->Mon->Tue)
        minDate = 4;
      } else if (currentDay === 6) { // Saturday
        // Next Tuesday is 3 days from Saturday (Sat->Sun->Mon->Tue)
        minDate = 3;
      } else { // Sunday (0)
        // Next Tuesday is 2 days from Sunday (Sun->Mon->Tue)
        minDate = 2;
      }
      
      return minDate;
    }
    
    // 3) Build a beforeShowDay function
    function customDay(date) {
      // format the date as "YYYY-MM-DD"
      const y = date.getFullYear();
      const m = ("0" + (date.getMonth() + 1)).slice(-2);
      const d = ("0" + date.getDate()).slice(-2);
      const str = `${y}-${m}-${d}`;
      
      // a) block weekends:
      const weekendResult = $.datepicker.noWeekends(date);
      if (!weekendResult[0]) {
        // [false] → disabled weekend
        return weekendResult;
      }
      
      // b) block any dates in your list:
      if (blocked.indexOf(str) !== -1) {
        return [false, "", "Unavailable"];
      }
      
      // otherwise enable
      return [true, ""];
    }
    
    // 4) Initialize datepicker with dynamic minDate
    $(function() {
      const initialMinDate = calculateMinDate();
      
      $("#date").datepicker({
        minDate: initialMinDate,
        maxDate: "+12M",
        beforeShowDay: customDay
      });
      
      // Update minDate every minute to handle time changes
      setInterval(function() {
        const newMinDate = calculateMinDate();
        const currentMinDate = $("#date").datepicker("option", "minDate");
        if (newMinDate !== currentMinDate) {
          $("#date").datepicker("option", "minDate", newMinDate);
        }
      }, 60000); // Check every minute
    });
  };
</script>

const plans = client.listPlans({
  params: { limit: 200 },
});
for await (const plan of plans.each()) {
  planList.push(plan);
}

I have code that looks like this, the return type of listPlans is a class that looks like

    export declare class Pager<T> {
     count(): Promise<number>;
     first(): Promise<T>;
     each(): AsyncIterable<T>;
     eachPage(): AsyncIterable<T[]>;
   }

I am trying to mock the function listPlans, ultimately to mock the each() function.

I am building a simple game where the ground moves when a user pressed a space bar once. My problem is that the ground does not move if I do not press a space bar.

My code:

class Ground {
    constructor(position) {
        this.position = position;
    }

    move() {
        this.position.x--;
    }
}

const ground = new Ground({
    position: {
        y: 135
    }
})


window.addEventListener("keydown", (event) => {
    switch(event.key) {
        case " ": {
            ground.move();
            break;
        };
    };
});

https://codepen.io/BambiTP/pen/OPVrQWm

//creates pixi canvas and app
async function initPixi(){
  app = new PIXI.Application();
    await app.init({ width: 1280, height:800 });
  document.body.appendChild(app.canvas);
};

//caches textures for drawing
function cacheFrame(id,Col,Row) {
      const url ='https://static.koalabeast.com/textures/classic/tiles.png';
      const img = new Image();
      img.crossOrigin = 'anonymous';
      img.src = url;
       img.onload = () => {
    const source = new PIXI.ImageSource({ resource: img });
    const frame = new PIXI.Rectangle(
      Col * 40,
      Row * 40,
      40,
      40
    );
    frameCache[id] = new PIXI.Texture({ source, frame });
  }};
//draws textures in a 30x30 grid
function drawMap(){
    const tex = frameCache[0];
  for (let x = 0; x < 30; x++){
    for (let y = 0; y < 30; y++){
    const sprite = new PIXI.Sprite(tex);

  sprite.x = x * 40;
  sprite.y = y * 40;
  app.stage.addChild(sprite);
}}
}

I am not sure where to even start when trying to fix this.I have tried putting all the sprites into one image and then putting it back onto the canvas but it didn’t make a difference.

This my vite.config.js

import { defineConfig } from 'vite';
import react from '@vitejs/plugin-react';
import path from 'path';
import tsconfigPaths from 'vite-tsconfig-paths';

export default defineConfig({
  plugins: [react(), tsconfigPaths()],
  resolve: {
    alias: {
      '@': path.resolve(__dirname, './src'),
      '@app': path.resolve(__dirname, './src/app'),
      '@assets': path.resolve(__dirname, './src/assets'),
      '@pages': path.resolve(__dirname, './src/pages'),
      '@features': path.resolve(__dirname, './src/features'),
      '@service': path.resolve(__dirname, './src/service'),
      '@slice': path.resolve(__dirname, './src/slice'),
    },
  },
});

this is my jsconfig.json

{
  "compilerOptions": {
    "target": "ES2020",
    "lib": ["dom", "dom.iterable", "ES6"],
    "allowJs": true,
    "skipLibCheck": true,
    "esModuleInterop": false,
    "allowSyntheticDefaultImports": true,
    "strict": false,
    "forceConsistentCasingInFileNames": true,
    "module": "es6",
    "moduleResolution": "node",
    "resolveJsonModule": true,
    "isolatedModules": true,
    "noEmit": true,
    "jsx": "react-jsx",
    "baseUrl": "./src",
    "paths": {
      "@/*": ["./*"],
      "@app/*": ["./app/*"],
      "@assets/*": ["./assets/*"],
      "@pages/*": ["./pages/*"],
      "@features/*": ["./features/*"],
      "@service/*": ["./service/*"],
      "@slice/*": ["./slice/*"]
    }
  },
  "include": ["src/**/*.js", "src/**/*.jsx"],
  "exclude": ["node_modules"]
}

my react struct in image
i have try so many way to config even install extension Path Intellisense
and yet the sugget path still is ../Header

How can i config suggest absolute imports path in this situation ?

I am creating an app which uses next.js and supabase. I want to implement supabase’s passwordless login, and I plan to implement it as follows

1. user enters email into a field
2. user presses “send magic link”
3. a magic link is sent to that email address
4. user opens email
5. user follows the link from the email, which then authenticates them

However, what I don’t totally understand is how this can fit into the framework of playwright. I can write a test up to step 2, but I’m not sure how the rest will be done

test("user should be able to sign in with a magic link", async ({ page }) => {
  await page.goto("/sign-in");
  await page.getByRole("textbox", { name: /email/i }).fill(email);
  await page.getByRole("button", { name: /send magic link/i }).click();
  // now what?
});

How is this conventionally handled with end to end testing in playwright?

I am trying to use AJAX to connect my JavaScript code to my PHP code. Currently, I have the following code:

JS:

$.ajax({
    type: "POST",
    url: "send.php",
    data: {data : jsonArr}, 

    success: function(data){
        // Log received values in console
        console.log(data);
    }
});

PHP:

<?php
$result = "RESULT";
echo $result;
?>

Currently, the code is simply logging my PHP code. Obviously, I am missing something quite simple. Does anyone know what that is? Additionally, if I wanted to access the data variable from the JS code in PHP, how should I go about that?

I’m trying to understand the difference in behavior between let and var inside a for loop, especially when used with setTimeout.

Here’s a simple example:

for (var i = 0; i < 3; i++) {
  setTimeout(() => console.log(i), 1000);
}
// Output: 3, 3, 3

for (let i = 0; i < 3; i++) {
  setTimeout(() => console.log(i), 1000);
}
// Output: 0, 1, 2

I tried using both var and let inside a for loop with setTimeout, expecting them to behave similarly and print numbers 0 to 2 after 1 second. However, I noticed that:

• With let, the output is: 0, 1, 2
• With var, the output is: 3, 3, 3

This behavior confused me, as I thought both would just loop from 0 to 2 and print each value.

I now understand that scoping might be affecting it, but I want to know why exactly this happens and how closures are involved in this behavior.

We have a web page that should be printed. It contains a background image that should be on the printed document and the document should have no margin.

With the @page rule, you can set some of these values:

@page {
    margin: 0; //none does not seem to work?
    size: A4;
    page-orientation: upright; 
}

This seems to set some proper defaults for the print dialog. What should also be by default unchecked are the annoying url and page number information at the top and bottom of the page. I also want the “print background” option to be checked by default when printing.

Is there any way to do that with @page assignments or something I can do to the JS call of window.print(), like by default checking the “print to pdf” option of the “picked device”.

It should be “foolproof” to make our user print what we want them to without having to instruct them how to operate their print dialog.

When I build my Vite project for production, I noticed the output html generated seems to overwrite all my class names with jss{somenumber}. I get this is for performance, but how do I disable this? I need to maintain the original class names for my QA team to run their automated tests against the application. This use to be the case when I used Webpack.

React Input:
<MyComponent className="my-custom-class">Hello World</MyComponent>

Current Build Output:
<div class="jss213">Hello World</div>

Desired Build Output:
<div class="my-custom-class-213">Hello World</div>

I’ve tried the css.modules option in vite config as suggested in this post, but this does not work because I’m using styled components (not css modules). I’ve also tried esbuild.keepnames, and I’ve also tried setting the mode to ‘development’. None of this makes a difference. I can only get Vite to do what I want when I run in dev mode i.e. npx vite

When I build my Vite project for production, I noticed the output html generated seems to overwrite all my class names with jss{somenumber}. I get this is for performance, but how do I disable this? I need to maintain the original class names for my QA team to run their automated tests against the application. This use to be the case when I used Webpack.

React Input:
<MyComponent className="my-custom-class">Hello World</MyComponent>

Current Build Output:
<div class="jss213">Hello World</div>

Desired Build Output:
<div class="my-custom-class-213">Hello World</div>

I’ve tried the css.modules option in vite config, but this does not work. I’ve also tried esbuild.keepnames, and I’ve also tried setting the mode to ‘development’. None of this makes a difference. I can only get Vite to do what I want when I run in dev mode i.e. npx vite

the codes I use inside “test.php”

$url = "http://ts3.paladinsgaming.com/ts3rank/stats/";
$curl = curl_init();
curl_setopt($curl, CURLOPT_URL, $url);
curl_setopt($curl, CURLOPT_RETURNTRANSFER, true);
$data = curl_exec($curl);
curl_close($curl);

$dom = new DOMDocument();
@$dom->loadHTML($data);

$xpath = new DOMXPath($dom);

$servertime = $xpath->query('//input[@id="sut"]');
$uptimeSeconds = (int)$servertime[0]->getAttribute("value");

$seconds = pad($uptimeSeconds % 60);
$minutes = pad(floor((int)($uptimeSeconds / 60) % 60));
$hours = pad(floor((int)($uptimeSeconds / 3600) % 24));
$days = pad(floor($uptimeSeconds / 86400));


function pad($num) {
    return str_pad($num, 2, "0", STR_PAD_LEFT);
}

$formattedUptime = $days." Days, ".$hours." Hours, ".$minutes." Minutes, ".$seconds." Seconds";

html the codes I use inside

<head>
<?php include "test.php";?>

<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script>

$(document).ready(function(){
setInterval(function(){
    $(".refresh").load(window.location.href + " .refresh" );
}, 1000);
});
</script>
</head>
<body>
<div class="refresh">

<h3><?php echo "$formattedUptime"; ?></h3>
<h3><?= date('H:i:s') ?></h3>

</div>
</body>

https://paladinsgaming.com/newsite/view.php test view

i’m shooting the data with the codes above, but it’s updated every 9 seconds, not every second, I wonder why

I want to play a audio automatically on page load. Tried different approach from stackoverflow/google but nothing worked. Autoplay works on firefox by default but doesn’t work on chrome.

Few days ago I came across this site which autoplays audio on load without user interaction and it works on chrome too. I have a little to no javascript knowledge so I cant reverse engineer this workaround, can someone have a look at this? Thanks.