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.

Problem

I’m trying to build a dynamic questionnaire component in React where users can add and remove question sections. Each section manages its own local state using hooks (like useState or useReducer), and I store each section in an array of React components.

What I tried and expected

I have a QuestionSection component that manages its own state:

function QuestionSection({ id }) {
  const [answer, setAnswer] = useState("");
  return (
    <div>
      <h3>Question {id + 1}</h3>
      <p>Current answer: "{answer}"</p>
      <input 
        type="text" 
        value={answer} 
        onChange={(e) => setAnswer(e.target.value)} 
      />
    </div>
  );
}

And a parent component that manages the list:

function Questionnaire() {
  const [sections, setSections] = useState([0]); // array of section ids
  const add = () => setSections(prev => [...prev, prev.length]);
  const remove = () => setSections(prev => prev.slice(0, -1));

  return (
    <div>
      <button onClick={add}>Add Section</button>
      <button onClick={remove}>Remove Section</button>
      {sections.map(id => (
        <QuestionSection key={id} id={id} />
      ))}
    </div>
  );
}

Expected behavior: Only the removed section should reset; other sections should keep their entered data.

Actual behavior: When I remove a section (especially from the middle), other sections lose their state and reset to empty.

What I’ve tried

• Ensured key={id} is unique and consistent
• Tried using UUID for IDs instead of sequential numbers – same issue
• Wrapped QuestionSection in React.memo() and added debug logs – state still resets

The keys appear stable in my logging, but React still resets the internal hook state. What am I missing about how React reconciliation works with dynamic lists?
Should I be lifting state up instead? Any recommended patterns?

I intend to use IndexedDB for local storage from local HTML.
However, the DB tables were deleted when free space on drive C: decreases to a certain level. For some reason browser won’t let me turn persistent storage ON neither on file:///, nor on localhost, nor on PWA. The same behavior with Notification.permission==granted for the page.
Using Chrome 137, W10-64.

Is there any way to solve the issue? Otherwise it makes IndexedDB useless and I do believe there is some workaround.

async function checkPersistentStorage() {
    if (!('storage' in navigator)) {
        console.log('NO Storage API support');
    }
    try {
        navigator.storage.persisted().then((isPersistent) => {
            console.log("Persistent storage: "+(isPersistent?"ON":"OFF"));
        });
        navigator.storage.persist().then((canPersist) => {
             console.log("Persistent storage can be enabled: "+(canPersist?"YES":"NO")); 
        });
    } catch (error) {
        console.error('Storage API ERROR:', error);
    }
}
checkPersistentStorage();
// console.log:
// Persistent storage: OFF
// Persistent storage can be enabled: NO

enter image description here

let newFont = 9;
let textSize = false;
let longText = false;
let shortText = false;
window.addEventListener('DOMContentLoaded', function() {
  // viewport attributes calculating
  const dpRatio = window.devicePixelRatio;
  const bodyWidth = Math.round(document.documentElement.getBoundingClientRect().width * dpRatio);
  const initScale = Math.round(1000000 / dpRatio) / 1000000;
  // replace viewport tag
  const docHead = document.head;
  const oldTag = document.querySelector('meta[name="viewport"]');
  const newTag = document.createElement('meta');
  newTag.setAttribute('name', 'viewport');
  newTag.setAttribute('content', 'width=' + bodyWidth + ', initial-scale=' + initScale);
  oldTag ? docHead.removeChild(oldTag) : null;
  docHead.appendChild(newTag);
  // apply new page width
  document.body.style.width = bodyWidth + 'px';
  // getting handles
  textSize = document.getElementsByClassName('textSize');
  longText = document.getElementById('longText');
  shortText = document.getElementById('shortText');
  // add font size changing cycle
  setInterval(function() {
    newFont = newFont + 1;
    if (newFont > 100) {
      newFont = 10;
    }
    // apply new font to whole page
    document.body.style.fontSize = newFont + 'px';
    // show real font sizes
    textSize[0].innerHTML = window.getComputedStyle(longText).fontSize;
    textSize[1].innerHTML = window.getComputedStyle(shortText).fontSize;
  }, 1000);
});

div {
  margin: 20px;
}

#longText {
  color: darkred;
}

#shortText {
  color: darkgreen;
  white-space: nowrap;
}

#redBox {
  width: 500px;
  height: 200px;
  font-size: 10px;
  color: white;
  background-color: red;
}

.textSize {
  border: 1px solid;
}

<div id="longText">
  <span class="textSize"></span> This long string should use inherited font size from Body, but real font size is bigger then Body have. This difference becomes very noticeable when the font size goes from 12px to 13px (instant jump). As the font size increases further to 80px, the difference becomes less obvious (smooth, no jump). After 80px to 100px both sizes are stable and correct.
</div>
<div id="shortText">
  <span class="textSize"></span> Correct inherited font size
</div>
<div id="redBox">
  500 * 200 px<br>
                  Make screenshot after zoom out on your <u>mobile device</u> and check my size
</div>

What i do wrong? Can i fix this problem with font size difference? I understand that dynamic changing of viewport tag is not good idea. But very interesting why two simple div-elements have two different sizes inherited from the same body parent element.

Note: this example works normal in desktop browsers, bug is reiterated on mobile browsers only (Chrome, Yandex and etc.).

I’m working on an Angular project where I frequently use the JavaScript

new Date()

function. We have a new requirement to change the timezone of every date to match the timezone specified in the user’s account profile, regardless of the user’s location. To achieve this, I created a reusable function that adjusts the timezone of a date. Below is the implementation:

newTimezoneDate(dateVal?: any): Date {
    let timeZone: string | null = this.configService.getFacilityTimeZone();
    if (!timeZone) {
        timeZone = localStorage.getItem(facilityTimezone);
    }
    let date = new Date();
    if (dateVal) {
        date = new Date(dateVal);
    }
    if (!timeZone) {
        return date; // Return the date object if no timezone is provided
    }
    // Convert the date to the specified timezone
    const formattedDate = this.formatDateToTimeZone(date, timeZone);

    return formattedDate; // Return the converted date
}

formatDateToTimeZone(date: Date, timeZone: string) {
    try {
        return new Date(date.toLocaleString('en-US', { timeZone }));
    } catch (error) {
        // If an error occurs, use the default user's timezone
        return date;
    }
}

Problem
The function works as expected, but I’m facing an issue when I pass a date that has already been created using this function. In such cases, I receive incorrect date values.

Question
How can I modify the newTimezoneDate() function to correctly handle dates that have already been converted to the specified timezone? Is there a way to check if the date being passed is already in the correct timezone, so I can avoid unnecessary conversions?

Any help or suggestions would be greatly appreciated!

I am trying to freeze the first four columns of this datatable when a user is scrolling it horizontally. But the style “dtfc-has-left” style=”position: relative;”” is not applied when I inspect the datatable in the browser, and the feature is not working. Please let me know if anyone can see the reason why the frozen columns is not applied. A minimal working example:

$(document).ready(function() {
  $('#example').DataTable({
    scrollX: true,
    scrollY: '300px',
    scrollCollapse: true,
    paging: true,
    fixedColumns: {
      leftColumns: 4
    },
    columnDefs: [{
      width: 120,
      targets: [0, 1, 2, 3]
    }]
  });
});

body {
  font-family: Arial, sans-serif;
  margin: 20px;
}

/* Container with fixed width and overflow-x auto for horizontal scrolling */
#tableContainer {
  border: 1px solid #ccc;
}

/* Prevent wrapping in table cells */
th,
td {
  white-space: nowrap;
  width: 120px;
}

/* Make DataTables scroll wrapper visible */
div.dataTables_wrapper {
  width: 100%;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>


<!-- DataTables CSS -->
<link rel="stylesheet" href="https://cdn.datatables.net/1.13.4/css/jquery.dataTables.min.css" />
<link rel="stylesheet" href="https://cdn.datatables.net/fixedcolumns/4.2.2/css/fixedColumns.dataTables.min.css" />


<h2>DataTables FixedColumns Minimal Example</h2>

<div id="tableContainer">
  <table id="example" class="display nowrap" style="width:100%;">
    <thead>
      <tr>
        <th>Action</th>
        <th>Estimation ID</th>
        <th>Reference ID</th>
        <th>Project Name</th>
        <th>Status</th>
        <th>Result</th>
        <th>Change Requests</th>
        <th>Client Company</th>
        <th>Company Phone</th>
        <th>Company Email</th>
        <th>Client Budget (£)</th>
        <th>Material Value (£)</th>
        <th>Tender Value (£)</th>
        <th>MarkUp %</th>
        <th>Estimated Duration (Days)</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td><button>Review</button></td>
        <td>101</td>
        <td>EST-001</td>
        <td>Bridge Construction</td>
        <td>Pile Setup Pending</td>
        <td>NAY</td>
        <td>2</td>
        <td>ABC Corp</td>
        <td>+1 555-1234</td>
        <td>[email protected]</td>
        <td>150,000.00</td>
        <td>75,000.00</td>
        <td>120,000.00</td>
        <td>25.00</td>
        <td>90</td>
      </tr>
      <tr>
        <td><button>Proceed</button></td>
        <td>102</td>
        <td>EST-002</td>
        <td>Building Renovation</td>
        <td>Valuation Pending</td>
        <td>NAY</td>
        <td>0</td>
        <td>XYZ Ltd</td>
        <td>+44 207-111-2222</td>
        <td>[email protected]</td>
        <td>NAY</td>
        <td>NAY</td>
        <td>NAY</td>
        <td>NAY</td>
        <td>NAY</td>
      </tr>
      <tr>
        <td><button>Review</button></td>
        <td>103</td>
        <td>EST-003</td>
        <td>New Warehouse</td>
        <td>Completed</td>
        <td>Won</td>
        <td>1</td>
        <td>MegaCorp</td>
        <td>+61 02-1234-5678</td>
        <td>[email protected]</td>
        <td>500,000.00</td>
        <td>200,000.00</td>
        <td>450,000.00</td>
        <td>15.00</td>
        <td>180</td>
      </tr>
    </tbody>
  </table>
</div>

<!-- jQuery -->
<script src="https://code.jquery.com/jquery-3.7.0.min.js"></script>
<!-- DataTables JS -->
<script src="https://cdn.datatables.net/1.13.4/js/jquery.dataTables.min.js"></script>
<!-- FixedColumns JS -->
<script src="https://cdn.datatables.net/fixedcolumns/4.2.2/js/fixedColumns.dataTables.min.js"></script>