Category: javascript

I’m mapping the images to display them. I’m using fill prop of Next Image but the images are not showing in the browser. It’s showing the moment I use width and height props.
I could have gone with the height and width props but that doesn’t help in maintaining consistent dimensions for the images.

I’m not getting what’s the issue

Here’s the code:

<div className="grid grid-cols-1 md:grid-cols-3 gap-6 mb-6">
  {japandiImages.map((image, index) => (
    <div key={index} className="relative w-full h-64">
      <Image
        src={image.src}
        alt={image.alt}
        fill
        sizes="(max-width: 768px) 100vw, (max-width: 1200px) 33vw, 33vw"
        className="object-cover rounded-lg shadow"
      />
    </div>
  ))}
</div>

Here’s the link to the GitHub repo in case you wanna see the whole code. The problem is in the route folder named Japandi:
Link to the repo

1. I tried using width and height props of Next Image and it works. However, I can’t use them because they make the dimensions inconsistent for the images.

2. On some YT video, they say to use sizes props along with fill. I tried that too, but it’s still not working.

I recently started learning web development with netcore 8 and i simply want to make a table with CRUD. Im using existing resources on SSMS for the database. But I cant even get the table to be populated.

The table inside my Index.cshtml:

     <!-- Table -->
     <div class="table-responsive">
         <table id="userTable" class="table table-striped table-bordered align-middle">
             <thead class="table-light">
                 <tr>
                     <th>Employee ID</th>
                     <th>Name</th>
                     <th>Role</th>
                     <th>Department</th>
                     <th>Date Created</th>
                     <th style="width: 100px;">Aksi</th>
                 </tr>
             </thead>
             <tbody></tbody> <!-- populated by UserManagement.js-->
         </table>
     </div>

     <!-- Pagination -->
     <nav aria-label="User table pagination">
         <ul class="pagination justify-content-end">
             <li class="page-item disabled"><a class="page-link">«</a></li>
             <li class="page-item active"><a class="page-link" href="#">1</a></li>
             <li class="page-item"><a class="page-link" href="#">2</a></li>
             <li class="page-item"><a class="page-link" href="#">3</a></li>
             <li class="page-item"><a class="page-link" href="#">»</a></li>
         </ul>
     </nav>
 </div>
<!-- ApiBaseUrl is "https://localhost:7043/api/", its originated from "ApiSettings" inside appsettings.json -->
 <script> const API_BASE_URL = '@ViewBag.ApiBaseUrl';</script>

<!-- chatgpt told me to use this, previously i used src="~js/UserManagement.js", but it doesnt work, I put the script inside wwwrooot/js/UserManagement.js-->
<script src="@Url.Content("~/js/UserManagement.js")" asp-append-version="true"></script>

My UserManagement.js:

console.log("JS loaded, API_BASE_URL =", API_BASE_URL);
//I desperately want to see any output that suggest this script is loaded, so you will see a bunch of these, but Console tab in DevTools is totally empty.

document.addEventListener("DOMContentLoaded", function () {
    loadUsers();
    document.querySelector("#btnSearch").addEventListener("click", function () {
        const keyword = document.querySelector("#txtSearch").value;
        loadUsers(1, keyword);
    });
});

// this is the function that should populate the table

function loadUsers(page = 1, search = "") {
    const url = `${API_BASE_URL}Users?page=${page}&pageSize=10&search=${encodeURIComponent(search)}`;
    console.log("Fetching:", url);
    fetch(url)
        .then(response => response.json())
        .then(result => {
            const tbody = document.querySelector("#userTable tbody");
            tbody.innerHTML = "";

            result.users.forEach(user => {
                const row = `
                    <tr>
                        <td>${user.employeeId ?? "-"}</td>
                        <td>${user.name ?? "-"}</td>
                        <td>${user.roleName ?? "-"}</td>
                        <td>${user.dept}</td>
                        <td>${formatDate(user.createDate)}</td>
                        <td>
                            <button class="btn btn-sm btn-light"><i class="si si-pencil"></i></button>
                            <button class="btn btn-sm btn-light text-danger"><i class="si si-trash"></i></button>
                        </td>
                    </tr>`;
                tbody.insertAdjacentHTML("beforeend", row);
            });
        })
        .catch(error => console.error("Error fetching users:", error));
}

function formatDate(dateStr) {
    const date = new Date(dateStr);
    return date.toLocaleString("id-ID", {
        day: "2-digit",
        month: "long",
        year: "numeric",
        hour: "2-digit",
        minute: "2-digit"
    });
}

document.addEventListener("DOMContentLoaded", () => {
    consol.log("DOM fully loaded and parsed");
    loadUsers();
});
console.log("Script loaded");

my UserManagementController.cs:

using Microsoft.AspNetCore.Mvc;
using Microsoft.Extensions.Options;
using MyTableApp.Config;

namespace MyTableApp.Controllers
{
    public class UserManagementController : Controller
    {
        readonly ApiSettings _apiSettings;

        public UserManagementController(IOptions<ApiSettings> apiSettings)
        {
            _apiSettings = apiSettings.Value;
        }

        public IActionResult Index()
        {
            ViewBag.ApiBaseUrl = _apiSettings.BaseUrl;
            return View();
        }
    }
}

and lastly, my UsersController.cs

using Microsoft.AspNetCore.Mvc;
using MyTableApi.Models.Entities.DB_FOR_LEARNING_NET8;

namespace MyTableApi.Controllers
{
    [ApiController]
    [Route("api/[controller]")]
    public class UsersController : ControllerBase
    {
        readonly DbForLearningNet8Context _context;

        public UsersController(DbForLearningNet8 context)
        {
            _context = context;
        }

        [HttpGet]
        public IActionResult GetUsers(
            int page = 1,
            int pageSize = 10,
            string? search = null)
        {
            var query = _context.VwEmployeeDetails.AsQueryable();

            if(!string.IsNullOrWhiteSpace(search))
            {
                query = query.Where(u => u.EmployeeID.Contains(search) || u.Name.Contains(search));
            }

            var totalUsers = query.Count();

            var users = query
                .OrderByDescending(u => u.CreateDate)
                .Skip((page - 1) * pageSize)
                .Take(pageSize)
                .ToList();

            return Ok(new
            {
                totalUsers,
                page,
                pageSize,
                users
            });
        }
    }
}

So when I try to run the api and web app project, the table is empty. Nothing inside of Console on DevTools. The only references to UserManagement.js I can find inside Network tab is this UserManagement.js?v=”some_random_string” with the status 200 and Users?page=1&pageSize=10&search= with the status 404 (fetch).

Im sorry if I send too many codes, I have been trying to fix this for hours and yet nothing seems to fix it, it makes no sense to me as how is it showing that it was able to reference UserManagement.js but not a single console.log is printed in the Console tab?
I appreciate any kind of help or knowledge about Net Core 8!

The pathname URL-part always starts with /. If you omit the / in your regular expression the match will fail

URL Pattern API (pathname matching)

Let leading slash be true if the first code point in value is U+002F (/) and otherwise false

WHATWG (canonicalize a pathname)

The pathname options is an options struct with delimiter code point set “/” and prefix code point set to “/”

WHATWG (pathname options)

Why is the output true if the string doesn’t start with “/”?

console.log(
  new URLPattern({pathname: '*/books'}).test({pathname: '/api/v1/books'})
)

Is it a hidden feature or did I miss some point in MDN or in WHATWG?

I have event bus for mFEs and i want to add filename to each dispatched object to know from where dispatched event comes.

i have solution which looks ugly, in dispatch function every time create Error and find it’s origin:

const err = new Error();
if (!err.stack) {
    return {};
}

const callerLine = err.stack.split("n")[3];

is there better way to do it without writing filename in each file?

In fs.js file

function openSync(path, flags, mode) {

  return binding.open(path, stringToFlags(flags), mode);

}

function readFileSync(path, options) {
const fd = isUserFd ? path : fs.openSync(path, options.flag, 0o666);

//more code
}

why fs.openSync instead of openSync in readFileSync function.

I’m working with Playwright (Node.js) and need to capture notification toasts that appear on the page.
The issue is that the toasts don’t always have the same structure:

• Some have only a message

• Some have a title and a message

• They also change their class (toast-info, toast-warning, toast-error, etc.)

When I try to capture both the title and the message, Playwright sometimes freezes, waiting for .toast-title when it doesn’t exist. I need a safe and generic way to capture all possible cases without running into timeouts.

<!-- example of toast with only message -->
<div id="toast-container" class="toast-top-right" aria-live="polite" role="alert">
  <div class="toast toast-info" style="display: block;">
    <button class="toast-close-button" role="button"><i class="ion-android-close"></i></button>
    <div class="toast-message">Nota Lesión Activa: Lesiones 364</div>
  </div>
</div>

<!-- example of toast with title and message -->
<div id="toast-container" class="toast-top-right" aria-live="polite" role="alert">
  <div class="toast toast-error" style="display: block;">
    <button class="toast-close-button" role="button"><i class="ion-android-close"></i></button>
    <div class="toast-title">Error</div>
    <div class="toast-message">Paciente no encontrado</div>
  </div>
</div>

Error observed

Sometimes my test fails with a timeout when trying to get the toast title:

Get text content(
page.locator('#toast-container .toast').first().locator('.toast-title')
)
— 30.0s
waiting for locator('#toast-container .toast').first().locator('.toast-title')
Timeout 30000ms exceeded.

What I tried

I created two functions: one (boton) that clicks a button and checks for toasts, and another (Capturaerror) that extracts the toast-title and toast-message.

async function boton(page, Accion, indice = 0) {
    await page.getByRole('button', { name: Accion }).nth(indice).click({ timeout: 1000 });
    const toasts = page.locator('#toast-container .toast, #toast-container .toast-error, #toast-container .toast-warning');
    const count = await toasts.count();
    const mensajes = [];

    for (let i = 0; i < count; i++) {
        const toast = toasts.nth(i);
        const clase = await toast.getAttribute('class') || '';
        const mensaje = await toast.locator('.toast-message').textContent().catch(() => '');

        if (clase.includes('toast-error')) {
            if (mensaje && mensaje.trim() !== '') {
                mensajes.push(`${i + 1}.- ${mensaje.trim()}`);
            }
        } else if (clase.includes('toast-warning')) {
            const msj = await Capturaerror(page);
            if (msj && msj.length > 0) {
                throw new Error(`${msj.join('n')}`);
            }
        } 
    }

    if (mensajes.length > 0) {
        throw new Error(mensajes.join("n"));
    }
}

async function Capturaerror(page) {
    const toasts = await page.locator('#toast-container .toast').all();
    const mensajes = [];

    let index = 1;
    for (const toast of toasts) {
        const titulo = await toast.locator('.toast-title').textContent().catch(() => '');
        const mensaje = await toast.locator('.toast-message').textContent().catch(() => '');
        if (titulo || mensaje) {
            mensajes.push(`${index}.- ${titulo.trim()}: ${mensaje.trim()}`);
            index++;
        }            
    }
    return mensajes;
}

What I expected

To always capture the visible text of each toast, regardless of whether it has a title, a message, or both.
The .catch(() => '') should skip missing .toast-title without freezing.

What actually happens

If a toast does not contain a .toast-title, Playwright waits for it until the timeout (30s), which causes the test to freeze.

✅ Notes

• I want a single generic solution that safely captures the title and/or message, or the whole toast text, without timeouts.

• Node.js / Playwright environment.

where to use usememo hook and usecallback hooks

Explanation for the Usememo and usecallback hooks and their usage and main differences between these hooks because this hooks are using for the similar usage (memoization).

I am building an application with Java Spring Boot + Jquery using LiffSDK for my chat application.

  @GetMapping
  public String init(@RequestParam String liffChannelId,
      @RequestParam String messageChannelId,
      @RequestParam String isInit,
      @RequestParam String idToken,
      HttpServletRequest request, Model model) {
    if (Objects.isNull(isInit)) {
      return "chat_ui";
    }

    ChatForm form =chatHelper.init(liffChannelId, messageChannelId, idToken, request);
    model.addAttribute("form", form);

    return "chat_ui";
  }

And in my Js:

$(document).ready(function () {
  const urlParams = new URLSearchParams(window.location.search);
  const isInit = urlParams.get("isInit");
  if (!isInit) {
    initLiffApp();
  }
});

function initLiffApp() {
  const messageChannelId = new URLSearchParams(window.location.search).get("messageChannelId");

  const liffChannelId = new URLSearchParams(window.location.search).get("liffChannelId");

  const liffId = new URLSearchParams(window.location.search).get("liffId");

  liff
    .init({
      liffId: liffId
    })
    .then(() => {
      const idToken = liff.getIDToken();
      if (!idToken) {
        alert("Failed to get ID Token");
        return;
      }
      sendToServer(liffChannelId, messageChannelId, idToken);
    })
    .catch(err => {
      console.error("LIFF error", err);
    });
}

function sendToServer(liffChannelId, messageChannelId, idToken) {
  const redirectUrl = `/chat?liffChannelId=${encodeURIComponent(liffChannelId)}&messageChannelId=${encodeURIComponent(messageChannelId)}&isInit=1&idToken=${encodeURIComponent(idToken)}`;
  window.location.href = redirectUrl;
}

The application being deployed will call the server twice. When initializing, based on whether the isInit variable is passed or not, it will return to the interface. Then in Js, it will call Liff Server to get idToken. At this time, it will call the server a second time with the isInit variable = true and then the server will continue processing.

I tested on Android and it still received normally, but on iOS it kept saying it could not get idToken and displayed an alert cannot get idToken.

Can someone help me with this problem? Thank you very much

I have two virtual key boards codes for two languages other than English. The codes are working perfectly and values of pressed keys transferred to respective input text boxes, The only problem is that functions of keyup() and OnClick() do not work until and unless enter key from manual keyboard is pressed or mouse click done into the input box. Will appreciate if following codes are amended to include in them keyup() and Click() functions, so there should be no need to manually touch any key from manual keyboard or mouse clicked into the text box. thanks.

<input type="text"  id="myInput" onkeyup="myFunction()" onClick="myFunction()" placeholder=>

//First virtual keyboard:
const urduInput = document.getElementById('myInput');
const urduKeyboard = document.getElementById('urduKeyboard');

    for (const key in urduPhoneticMap) {
        const button = document.createElement('button');
        button.className = 'keyboard-button';
        button.textContent = urduPhoneticMap[key];
        button.onclick = () => {
            if (key === 'backspace') {
                urduInput.value = urduInput.value.slice(0, -1);
            } else {
                urduInput.value += urduPhoneticMap[key];
            }
            urduInput.focus(); // Keep focus on the input field
        };
    
        urduKeyboard.appendChild(button);
    
}

// Here it is needed to add some code like ((document.getElementById("myInput").click();)) to make input box clicked automatically plus a similar code for Onkeyup function to generate key pressed automatically.



//Second virtual keyboard:
const arabicInput = document.getElementById('myInput2');
const keyboardContainer = document.getElementById('keyboardContainer');
const phoneticMap = {// keyboards buttons
// Create keyboard keys
function createKeyboard() {
    for (const phonetic in phoneticMap) {
        const keyElement = document.createElement('div');
        keyElement.classList.add('key');
        keyElement.textContent = phoneticMap[phonetic];
        keyElement.dataset.phonetic = phonetic; // Store phonetic value
        keyboardContainer.appendChild(keyElement);
    }
}

// Handle key clicks
keyboardContainer.addEventListener('click', (event) => {
    const target = event.target;
    if (target.classList.contains('key')) {
        const phoneticKey = target.dataset.phonetic;
        if (phoneticKey === 'backspace') {
            arabicInput.value = arabicInput.value.slice(0, -1);
        } else if (phoneticKey === 'enter') {
            arabicInput.value += 'n';
        } else {
            arabicInput.value += phoneticMap[phoneticKey];
        }
        arabicInput.focus(); // Keep focus on the input field
    }
});

// Initialize the keyboard
createKeyboard();

// Here it is needed to add some code like ((document.getElementById("myInput").click();)) to make input box clicked automatically plus a similar code for Onkeyup function to generate key pressed automatically.

I understand that Hooks like useState and useRef are valuable because they allow the user to store and update data that persists through re-renders. In short, useState is for data that should trigger a re-render when it’s updated, while useRef is for data that should not trigger a re-render when updated.

Ref:

// create
const count = useRef(0);
// write
count.current = 5;
// read
console.log(count.current);

State variable:

//create 
const [count, setCount] = useState(0);
// write
setCount(5);
// read
console.log(count);

Is there a design reason why the creators of React made it so reading the persistent value associated with a ref requires .current but reading the persistent value associated with a state variable doesn’t? I’m guessing there’s a good reason for it, but I have not been able to find the answer. Thank you for helping me to better understand.

I am trying to build a Google Chat App that calls a Cloud Run function as the logic. I am assuming the GCP interfaces must have recently changed/updated because a lot of the guides and troubleshooting do not match the UI elements I am seeing in GCP.

I am getting the below two errors in my Log Explorer when I try to send a simple message to the Chat Bot.

Failed to parse JSON as RenderActions, DataActions or Card.
Failed to parse JSON as RenderActions. Failed with error: Cannot find field: cardsV2 in message google.apps.card.v1.RenderActions
Failed to parse JSON as DataActions. Failed with error: Cannot find field: cardsV2 in message google.apps.card.v1.DataActions
Failed to parse JSON as Card. Failed with error: Cannot find field: cardsV2 in message google.apps.card.v1.Card

and

Can't post a reply. The Chat app didn't respond or its response was invalid. If your Chat app is configured as an add-on, see "Build Google Chat interfaces" (https://developers.google.com/workspace/add-ons/chat/build) in the Google Workspace add-ons documentation. Otherwise, see "Receive and respond to Google Chat events" (https://developers.google.com/chat/api/guides/message-formats) in the Chat API documentation.

Below is my Cloud Function (Node.js).

/**
 * Google Chat Bot Echo function.
 *
 * This function is triggered by an HTTP request from Google Chat.
 * It processes the event payload and responds with a structured card message.
 *
 * @param {object} req The HTTP request object.
 * @param {object} res The HTTP response object.
 */
exports.chatBot = (req, res) => {
  // Check if the request method is POST. Google Chat sends POST requests.
  if (req.method !== 'POST') {
    return res.status(403).send('Forbidden');
  }

  const event = req.body;
  console.log('Received event:', JSON.stringify(event, null, 2));

  let responseMessage;

  // Handle different event types from Google Chat.
  switch (event.type) {
    case 'ADDED_TO_SPACE':
      // This event is triggered when the bot is added to a space or a DM.
      const spaceType = event.space.type;
      if (spaceType === 'DM') {
        responseMessage = `Hi ${event.user.displayName}! Thanks for starting a chat. I'll echo back anything you say.`;
      } else {
        responseMessage = `Thanks for adding me to ${event.space.displayName}! I'm ready to echo messages.`;
      }
      break;
    case 'MESSAGE':
      // This event is triggered when a user sends a message to the bot.
      // event.message.argumentText contains the text sent after the bot's @-mention.
      const userMessage = (event.message.argumentText || '').trim();
      if (userMessage) {
        responseMessage = `You said: "${userMessage}"`;
      } else {
        responseMessage = 'Hello! Please mention me and type a message.';
      }
      break;
    case 'REMOVED_FROM_SPACE':
      // This event is triggered when the bot is removed. No response is needed.
      console.log(`Bot removed from ${event.space.displayName}.`);
      return res.status(200).send();
    default:
      // For any other event type, send a default response.
      responseMessage = 'I received an event I don't know how to handle.';
      break;
  }
  
  // For a Google Workspace Add-on responding to a MESSAGE event,
  // the response must be a `renderActions` object.
  const reply = {
    "renderActions": {
      "action": {
        "navigations": [
          {
            "pushCard": {
              "header": {
                "title": "Echo Bot"
              },
              "sections": [
                {
                  "widgets": [
                    {
                      "textParagraph": {
                        "text": responseMessage
                      }
                    }
                  ]
                }
              ]
            }
          }
        ]
      }
    }
  };

  // Send the JSON response back to Google Chat.
  res.status(200).json(reply);
};

I am fairly new to GCP Google Chat API and Cloud Run Functions, so my apologies if this question seems a bit obvious. But I have been stuck for a while and cannot find a resolution anywhere. Any help would be much appreciate!

In the past, we used getSVGForLocalExport() to retrieve svg for multiple charts so we could combine them into one output image (portion of code shown below). It appears getSVGForLocalExport() no longer exists in offline-exporting.js as of 12.3.0. Is there an alternative function that can be used for similar functionality? Thank you.

charts[i].getSVGForLocalExport(options, {}, function() {
        console.log('Failed to get SVG');
     }, function(svg) {
        addSVG(svg);
        // Export next only when this SVG is received
        return exportChart(i + 1);
     });

I’m trying to implement a Depth of Field (DOF) effect in a Three.js scene that includes a point cloud rendered using THREE.Points. I’ve based my implementation on these official examples:

• https://threejs.org/examples/webgl_postprocessing_dof.html

• https://threejs.org/examples/?q=dof#webgl_postprocessing_dof2

These examples work well for standard 3D meshes like spheres or cubes. However, when I apply the DOF effect to a point cloud, the points remain uniformly blurry, regardless of their depth.

I’ve tried tweaking the focus, aperture, and maxblur values, but they don’t seem to have any visible effect on the point cloud.

const bokehPass = new BokehPass(
  scene,
  camera,
  {
    focus: 1.0,
    aperture: 0.025,
    maxblur: 0.01,
  }
);

I also tested the setup by adding a regular 3D sphere at the same position as the point cloud. The DOF effect works correctly on the sphere, but the point cloud remains unaffected.

How can I get DOF to work correctly?

So I want to do a very simple thing, I think. I want to add a image to a 2d platform game I am making. The image itself is the level and after it is added I planned on adding invisble platforms on top of it to make the game playable. But how do you add the image in the first place?

Image: 8000 x 512 px Languages: Javascript, HTML, CSS

Tried EVERYTHING. I expect at least one method to work

Trying to make a cross-origing fetch request with the no-cors mode I found out it is not possible in this case to send any data to the server as a body:

const url = 'http://cross-origin-example.com/post';
const request = new Request(url, {
  method: 'POST',
  mode: 'no-cors',
  headers: {
    'Content-Type': 'text/plain',
  },
  body: 'boo',
});
fetch(url, request).then((response) => console.log(response));

In Chrome, such a request will not be sent at all throwing the following error:

Uncaught (in promise) TypeError: Failed to execute ‘fetch’ on
‘Window’: If request is made from ReadableStream, mode should
be”same-origin” or “cors”

Firefox make the request reach the server but with the body missing.

I know when using the no-cors mode the JS code gets an opaque response, which effectively conceals the result of fetching. However, on what basis the browsers do not allow attach body in this case? Is it standardized behavior (in fact, I failed to find such a restriction somewhere in the fetch spec) or just a browser extra limitation?