Category: javascript

I have a requirement to change the class of the nominal_currency_id cell based on information from the ch_nominal_currency_id_flag column. I simply want to assign a background color to it.

I could use a renderer in the nominal_currency_id cell, but this is impossible because I have a resolveView that handles changing the ID to one retrieved from the dictionary. The renderer overrides this, and I still see the ID instead of the code value.

Therefore, I would like to add a renderer to the column with the ch_nominal_currency_id_flag flag, but I don’t know how to add to the nominal_currency_id column to assign a class to it. metadata, of course, only works for the column containing the renderer.

In short, I want to apply a red background color to the nominal_currency_id cell based on the value from the true/false ch_nominal_currency_id_flag cell

How should I approach this?

        {
            name: 'nominal_currency_id',
            title: 'Nominal Currency',
            editable: true,
            type: 'string',
            maxLength: 3,
            formSortOrder: 13,
            resolveView: {
                dataProviderId: 'PROVIDER_ID',
                childrenTable: 'pd_currency',
                remote: false,
                valueField: 'currency_id',
                displayField: 'currency_code',
                addBlank: true
            }
        },
        {
            name: 'ch_nominal_currency_id_flag',
            title: 'Ch Nominal Currency Flag',
            editable: true,
            type: 'boolean',
            hidden: true,
            hiddenInForm: true,
            formSortOrder: 45
        },

I also add the code that adds my resolveView, maybe it will help in solving

if (column.resolveView !== undefined) {
        ;(() => {
          const resolveView = column.resolveView
          const columnName = column.name
          let dropDownTemplate
          let dropDownTemplateList

          tempColumnType.filter = {
            type: 'resolver',
            addBlank: false,
            underlyingField: columnName,
            ...resolveView,
            control,
          }

          tempColumnType.renderer = function (value, _metaData, record) {
            if (!_.isNil(value)) {
              const retrivedValue = app.nameResolver.resolve(
                {
                  value,
                  underlyingField: columnName,
                  ...resolveView,
                },
                record?.data,
              )

              return _.isString(retrivedValue)
                ? _.unescape(retrivedValue)
                : retrivedValue
            }
          }

          if (column.editable !== false) {
            tempColumnType.field = {
              xtype: 'resolvercombo',
              underlyingField: columnName,
              ...resolveView,
            }
          }

          if (dropDownTemplate) {
            tempColumnType.field.tpl = dropDownTemplateList
            tempColumnType.field.displayTpl = dropDownTemplate
            tempColumnType.filter.tpl = dropDownTemplateList
            tempColumnType.filter.displayTpl = dropDownTemplate
          }
        })()
      }

why does the .toLocaleString() API, on JavaScript not working for country like Nigeria?

I want to get the current date for my country and state, using the API method. Also, I will like to know more about this date API feature

Problem
I’ve been working on this for a couple of days now, trying to figure out why the frontend keeps displaying the user’s object ID instead of their username. Despite setting up the authentication and role-based logic, the username isn’t rendering as expected, and I suspect the issue might be with how the user data is being fetched or decoded from the token.

Ticket Schema

import mongoose  from 'mongoose'

const Schema = new mongoose.Schema({
    title : {type:String , required : true},
    description : {type : String, required : true},
    status : { type : String , default: 'open'},
    assignedTech: {type: String},
     priority: {
        type: String,
        enum: ['Low', 'Medium', 'High'],
        default: 'Low',
        required: true
        },
    owner: {
    type: mongoose.Schema.Types.ObjectId,
    ref: 'users',
    required: true
  }

    },{timestamps: true})

const TicketModel = mongoose.model("version2",Schema)

export {TicketModel}

Create Ticket Logic

async function PostData(req,res) {
    try{
        const UserId  = req.user.id
        const AssignedTo = await AutoAssign()
        console.log('i am '+AssignedTo)
        const New =  new TicketModel({...req.body, 
                                        assignedTech: AssignedTo,
                                        owner:UserId
                                    })  

        if(req.body.title && req.body.description !== ""){
            await  New.save()
            return sendSuccess(res,200,"Ticket created successfully","","Ticket created successfully")    
        }
        else{
            return sendError(res,401,"Please fill in required fields")
        }
    }
    catch(error){
        return sendError(res,500,"Failed to create ticket",error,error)
    }
}

Get Ticket Logic

async function  GetData(req,res) {
    try{
        const UserID = req.user.id
        const read =  await TicketModel.find().sort({createdAt:-1})

        if(!read){
            return sendError(res,404,"No tickets are currenlty in the database",read,"No tickets currenlty in the database")
        }
        return sendSuccess(res,200,"Tickets retrieved successfully",read,"Tickets retrieved successfully")
    }

    catch(error){
        return sendError(res,500,"Failed to retrieve tickets",error,error)
    }

Front End Logic

 {
            Fetching ? (<h1>Fecthing Tickets....</h1>): 
            fetchingTickets ? fetchingTickets.data.length === 0 ? (<PlayFullMessage/>):
            fetchingTickets?.data?.map(({_id:id,["title"]:title,["description"]:description,["status"]:status,["assignedTech"]:Technician,["priority"]:Priorty,["owner"]:owner}) =>(
                <div onClick={() => navigate(`/home/tickets/${id}`)} key={id} className='w-full m-h-[100px] border-[2px] grid grid-cols-6 p-5 rounded-[10px] text-[1.5rem] bg-secondary dark:border-primaryDark dark:bg-backgroundDark shadow-md hover:shadow-lg hover:scale-105 cursor-pointer gap-6'>
                    <p className='grid grid-rows-2 w-full'>Title  <span className='text-[1.2rem]'>{title}</span></p>
                    <p className='grid grid-rows-2 w-full'>Description  <span className='text-[1.2rem]'>{description}</span></p>
                    <p className='grid grid-rows-2 w-full'>Status  <span className='text-[1.2rem]'>{status}</span></p>
                    <p className='grid grid-rows-2 w-full'>Assigned to  <span className='text-[1.2rem]'>{Technician}</span></p>
                    <p className='grid grid-rows-2 w-full'>
                      Priority  
                      <span className='text-[1.2rem]'>
                        {Priorty === "High" ? (
                          <span className='text-red-500'>{Priorty}</span>
                        ) : Priorty === "Medium" ? (
                          <span className='text-yellow-500'>{Priorty}</span>
                        ) : Priorty === "Low" ? (
                          <span className='text-green-500'>{Priorty}</span>
                        ) : (
                          <span>{Priorty}</span> 
                        )}
                      </span>
                    </p>
                    <p className='grid grid-rows-2 w-full'>Created by  <span className='text-[1.2rem]'>{owner}</span></p>
                </div>
            )
            ):(<h1>Failed to fetch tickets.....</h1>)
        }
      </div>

Output
current output

I’m trying to create a web application with scrolling line chart connected to real-time data coming over websocket. The chart should always show the latest 100 points and move right to reveal new points as they arrive.

I’m using LightningChart JS library (https://www.npmjs.com/package/@lightningchart/lcjs)

The chart is created correctly, and data points even arrive properly, but the only problem is that after 100 data points, the new ones are not revealed and I only see the very first 100.

I found the API to set “scrolling” scroll strategy which sounds like the behavior I want but it doesn’t seem to do anything (even if I comment it out/back)

Here is my current minimal reproduction:

const lc = lcjs.lightningChart()
const chart = lc.ChartXY({ defaultAxisX: { type: 'linear-highPrecision' } })
const series = chart.addLineSeries()

chart.axisX
    .setTickStrategy(lcjs.AxisTickStrategies.DateTime)
    .setScrollStrategy(lcjs.AxisScrollStrategies.scrolling)
    .setInterval({ start: 0, end: 100 })

setInterval(() => {
    series.appendSample({ y: Math.random() })
}, 100)

<script src="https://cdn.jsdelivr.net/npm/@lightningchart/[email protected]/dist/lcjs.iife.js"></script>

I tried a couple things:

• only use “setTickStrategy” -> the axis scrolls, but the time window keeps increasing always (so it displays ALL data points at all times, rather than latest 100)
• comment out “setInterval” -> this is actually the closest to what I want, but it only displays the 10 newest points. Now only remaining problem is how to show 100 last points.

I’ve enabled the password protection feature on my Shopify store, so that only visitors with the password can access the site.

However, I’d like to achieve two things:

Keep one specific page (e.g., /pages/landing-page-become-a-vendor) publicly accessible without requiring the password.

Redirect anyone who visits the homepage (/) to that public page.

Is there a way to configure this in Shopify (through theme code, Liquid, or settings) so that the password protection remains for all other pages, but one page stays accessible and acts as the homepage redirect?

I have a requirement where I need to render a web app that uses oauth to login in an iframe. The iframe setup is for tutorials, where the tutorial content is in one column, and the web app is in another column. The web app is rendered in an iframe. The web apps are deployed by me, I can’t really change them but I do run them in kubernetes so I do proxy their requests/responses and can modify request/response headers. It’s easy enough remove X-Frame-Options headers, and modify CSB headers to allow the web apps to run in an iframe. Now I have a new web app that I need to display, it uses oauth so the user gets redirected to the oauth login page, and back via the redirect link passed at login time. I can’t unfortunately easily proxy the requests/reponses from the oauth provider. It is techincally possible I believe, but I’m reaching out here to find out if anyone has any other ideas on how to meet this requirement.

I’ve tried https://github.com/Rob–W/cors-anywhere, which works more or less the same as the route proxy above, and breaks down as soon as i hit the oauth endpoint.

Only working solution I have so far is a docker image running VNC, noVnc, IceWM and firefox. It’s great, fast and all the redirects work without any extra configuration. Negatives here are memory usage, the container requires 1GB+ of RAM and even then it crashes occasionally. We could have 200-300 users at one time doing the tutorials. While I do have the RAM available, it’s obviously not efficient. And the RAM usuage multiplies when I need more than 1 web app in an iframe.

I have a problem where the ArcGisDynamicLayer disappears when zoomed in and then reappears after a while. It looks super weird and ugly. I looked at the ArcGIS sample, and the situation is the same: https://developers.arcgis.com/esri-leaflet/samples/non-mercator-projection-3/

I noticed that the image itself is not removed from the map, but rather shifted to the side by a bunch of pixels.

I only see this problem when using Proj4 library. Has anyone else encountered this? Maybe they’ve found a solution already.

I went through the Leaflet code and found that this happens on fire(‘zoom’). You can fix it a bit by commenting out the line in _onZoomTransitionEnd, but then the image might shift, which also doesn’t look very good, and I wouldn’t call digging into the library a good solution. I also tried to force a redraw at the end of the zoom, but it didn’t help either.

The server-side application I’m working on stores structured data in a single large file that is continuously encrypted using the ChaCha20 stream cipher. I want to modify parts of the file without having to decrypt and re-encrypt the whole thing.

As I know the structure of the underlying data, I could read specific encrypted parts, decrypt and modify them in-place, and afterwards re-encrypt said parts. However, as far as I understand the ChaCha algorithm, this would effectively break the encryption as I would use the same key+counter combination when re-encrypting the modified parts of the file.

My questions are:

1. Am I correct that this would compromise the ChaCha encryption?
2. If so, is there an alternative algorithm or approach I could use to achieve what I described?

I am very new to javascript, so help is much appreciated! On my website, I want to have seven photos that cycle on click. So every time the photo is clicked, it is replaced by the next photo in the sequence. Here’s the catch: I want the seventh photo to be randomly selected from a folder.

For context, I’m trying to create a fun feature on my blog where the user clicks an image of a cookie to “eat” it. I’ve had success with writing script for the image of the cookie to change onclick, so that every time the user clicks bite marks appear until the cookie disappears.

What I WANT to happen is for a fortune to appear once the cookie has been “eaten.” I want think fortune to be selected randomly from a folder of images of potential fortunes.

The problem I’m facing is I don’t know how to add a random image to the end of a var images sequence.

Here’s what I have for html and java (I left a spot for where I want the random image in the sequence):

<main>
    <img src="folk/cookie1.png" id="image" onclick="change()">
        <script>
          var imgCount = -1;
          var images = ["folk/cookie1.png", "folk/cookie3.png", "folk/cookie4.png", "folk/cookie5.png", "folk/cookie6.png", "RANDOM IMAGE HERE!"];
          function change() {
            if (imgCount !== images.length - 1)
            imgCount++;
            else 
            imgCount = 0;
            var image = document.getElementById('image');
            image.src = images[imgCount];
          }
        </script>
</main>

So, I’m trying an animation where a globe is filled with Indonesian flag colours in slide-down animation when i hover over a button. The mouseenter animation successfully delivers a slide-down animation. However, the mouseleave doesn’t. It does slide-down when i hover over the enter button, but it doesn’t slide up when i take my mouse off. The colors change instantly and doesn’t deliver a slide-up animation. What should I do?

const button = document.querySelector(“button”);
const globeCircle = document.querySelector(“.globe-circle”);

// On hover, change fill to Indonesian flag
button.addEventListener("mouseenter", () => {
  globeCircle.style.fill = "url(#indo-flag)";
});

// Reset when hover ends
button.addEventListener("mouseleave", () => {
  globeCircle.style.fill  = 'lightBlue'
});

const maskRect = document.getElementById(“mask-rect”);

button.addEventListener("mouseenter", () => {maskRect.style.animation = "slide-down 1s forwards";})

button.addEventListener("mouseleave", () => {maskRect.style.animation = "slide-up 1s forwards"})

I am trying to make a very basic proxy just for learning purposes. The PHP file accesses a URL and displays it. I’m trying to block all outgoing HTTP requests from any links in the page displayed. I tried using a service worker but it does nothing – all requests go through.

proxy.php:

<script type="text/javascript">
function sendm(){
  navigator.serviceWorker.controller.postMessage('test');
}

if ('serviceWorker' in navigator) { 
  window.addEventListener('load', function() {
    navigator.serviceWorker.register('sw.js').then(function(registration) {
      console.log('Service worker registered with scope: ', registration.scope);
    }, function(err) {
      console.log('ServiceWorker registration failed: ', err);
    });
  });
}

  
</script>


<!DOCTYPE html>
<html>

<body>

<div class="content">

<?php


    $url = "www.ft.com";
    $curl = curl_init();
    curl_setopt($curl, CURLOPT_URL, $url);

    curl_setopt($curl, CURLOPT_RETURNTRANSFER, true);
    curl_setopt($curl, CURLOPT_FOLLOWLOCATION, true);
    $response = curl_exec($curl);
    echo $response;

?>
</div>
</body>
</html>

service worker:

self.addEventListener('fetch', function(event) {
  event.respondWith(
    //fetch(event.request)
  );
});

What am I doing wrong? The service worker is registered successfully, but just doesn’t block any requests.

The submit button is disabled until recaptcha is solved. But now the form doesn’t validate until the recaptcha is solved. How do I set up so that the form validates before the recaptcha is solved but doesn’t submit the form?

HTML

<div class='g-recaptcha' data-sitekey='" . $recaptcha_user . "' data-callback='enableBtn'></div>
<div class="submit"><input type="submit" id="button" value="submit" disabled>></div>

JAVASCRIPT

function enableBtn() {
  var response = grecaptcha.getResponse();
  var $result = $('#myParagraph');
  if(response.length === 0) { 
    $result.text("reCaptcha not verified"); 
  }
  else { 
    $result.text("reCaptcha Verified");
    document.getElementById("g-recaptcha-response").setAttribute('value', response);
     document.getElementById("button1").disabled = false;
  }
}

THIS IS WHAT I TRIED
HTML

<form id="myForm">
  <input type="text" id="input1" onkeyup="checkInputs()">
  <input type="text" id="input2" onkeyup="checkInputs()">
  <input type="text" id="input3" onkeyup="checkInputs()">
  <button type="submit" id="submitBtn" disabled>Submit</button>
</form>

JAVASCRIPT
f

unction checkInputs() {
  const input1 = document.getElementById('input1').value;
  const input2 = document.getElementById('input2').value;
  const input3 = document.getElementById('input3').value;
  const submitBtn = document.getElementById('submitBtn');

  if (input1.trim() !== '' || input2.trim() !== '' || input3.trim() !== '') {
    submitBtn.disabled = false; // Enable the button
  } else {
    submitBtn.disabled = true; // Keep the button disabled
  }
}

// Initial check when the page loads (in case inputs are pre-filled)
document.addEventListener('DOMContentLoaded', checkInputs);

I got some kind of web video editor, when I add multiple videos, the performance drop, is possible to play 30 videos at the same time?

I am developing a Chrome Extension that needs to display PDF files.

I’ve tried a few approaches, but I’ve hit two major issues:

Some libraries (e.g., pdf.js builds with workers or WASM) require access to external resources, which are not allowed in the Chrome Extension environment.

Other solutions bundle too many files and easily exceed the 5MB package size limit imposed by the Chrome Web Store.

What I’ve tried:

pdf.js full build → works, but too large (~7–8MB).
pdf.js minimal build → still heavy and requires extra setup.
Some lightweight npm libraries → blocked because of external dependencies (CORS / CSP issues).

My requirements:

The reader should work fully inside the extension (no external requests).
Ideally lightweight, so the packaged extension does not exceed the 5MB limit.
Basic PDF rendering is enough (I don’t need advanced features like annotations or editing).

Question:
Are there any recommended lightweight PDF readers/libraries that work inside a Chrome Extension without exceeding the 5MB limit?
Or is there a way to strip down pdf.js (or another library) to only the minimum features needed (basic rendering)?

i am working on JWT Authentication for websockets in springboot. In my JWT filter for WS, I found that Principal is getting null while using other stomp commands such as SEND, SUBSCRIBE. My filter looks like this:

@Component
@RequiredArgsConstructor
public class JWTAuthenticationFilterForWS implements ChannelInterceptor {
    private final JwtUtility jwtUtil; // your existing JWT utility
    private final UsersRepository usersRepository;


    @Override
    public Message<?> preSend(Message<?> message, MessageChannel channel) {
        StompHeaderAccessor accessor = StompHeaderAccessor.wrap(message);

        if (StompCommand.CONNECT.equals(accessor.getCommand())) {

            String token = accessor.getFirstNativeHeader("Authorization");
            if (token != null && token.startsWith("Bearer ")) {
                token = token.substring(7);
                String username = jwtUtil.getUsernameFromToken(token);
                // check user exists
                usersRepository.findByUsername(username)
                        .orElseThrow(() -> new RuntimeException("Invalid JWT"));
                // set user for STOMP session
                 accessor.setUser(new StompPrincipal(username));
            } else {
                throw new RuntimeException("No JWT token provided");
            }
        }else {
            // For other STOMP commands like SEND, SUBSCRIBE, retrieve user safely
            StompHeaderAccessor otherAccessor =
                    MessageHeaderAccessor.getAccessor(message, StompHeaderAccessor.class);
            if (otherAccessor != null) {
                Principal user = otherAccessor.getUser();
                System.out.println("Handling STOMP command " + accessor.getCommand() + " from user: " + user);
                // Add any authorization logic for SEND, SUBSCRIBE here if needed
            }
        }

        System.out.println("WebSocket connection established with user: " + accessor.getUser());
        return message;
    }
}

Whenever stomp calls this filter for send or subscribe, it goes to else block and print “Handling stomp command send null”. That means if i am handling a method for message mapping in controller, i am not able to fetch a principal-its null.
My web socket config:

@Configuration
@EnableWebSocketMessageBroker
@RequiredArgsConstructor
public class WebSocketConfiguration implements WebSocketMessageBrokerConfigurer {

    private final JWTAuthenticationFilterForWS JWTAuthenticationFilterForWS;

    @Override
    public void configureClientInboundChannel(ChannelRegistration registration) {
        registration.interceptors(JWTAuthenticationFilterForWS);
    }

    @Override
    public void registerStompEndpoints(StompEndpointRegistry registry) {
        registry.addEndpoint("/chat").setAllowedOriginPatterns("*").withSockJS();
    }

    @Override
    public void configureMessageBroker(MessageBrokerRegistry registry) {
        registry.enableSimpleBroker("/topic");
        registry.setApplicationDestinationPrefixes("/app");
    }
}

My JS websocket tester code looks like this:

<!DOCTYPE html>
<html>
<head>
    <title>WebSocket Chat Tester</title>
    <script src="https://cdn.jsdelivr.net/npm/sockjs-client@1/dist/sockjs.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/[email protected]/lib/stomp.min.js"></script>
</head>
<body>

<h3>WebSocket Chat</h3>

<label>JWT Token:</label>
<input type="text" id="jwtToken" placeholder="Paste your JWT here" style="width:400px;">
<button onclick="connect()">Connect</button>
<button onclick="disconnect()">Disconnect</button>

<br><br>

<input type="text" id="chatMessage" placeholder="Type a message" style="width:300px;">
<button onclick="sendMessage()">Send</button>

<ul id="messages"></ul>

<script>
    let stompClient = null;

    function connect() {
        const token = document.getElementById("jwtToken").value.trim();
        if (!token) {
            alert("Please enter JWT token");
            return;
        }

        const socket = new SockJS('http://localhost:8080/chat'); // your endpoint
        stompClient = Stomp.over(socket);

        stompClient.connect(
            { Authorization: 'Bearer ' + token },
            function(frame) {
                console.log('Connected: ' + frame);
                alert("Connected!");

                // Subscribe to your chat topic (replace '1' with chatId)
                stompClient.subscribe('/topic/chat', function(messageOutput) {
                    const msg = JSON.parse(messageOutput.body);
                    const li = document.createElement("li");
                    li.innerText = `[${msg.timestamp}] ${msg.sender}: ${msg.content}`;
                    document.getElementById("messages").appendChild(li);
                });
            },
            function(error) {
                console.error('STOMP error: ' + error);
                alert('Error connecting: ' + error);
            }
        );
    }

    function disconnect() {
        if (stompClient !== null) {
            stompClient.disconnect(function() {
                console.log("Disconnected");
                alert("Disconnected!");
            });
            }else {
        alert("Not connected!");
    }
        }


    function sendMessage() {
        const msgInput = document.getElementById("chatMessage").value.trim();
        if (!msgInput) return;

        if (stompClient && stompClient.connected) {
            stompClient.send(
                '/app/message',
                {},
               JSON.stringify({ content: msgInput })
            );
            document.getElementById("chatMessage").value = '';
        } else {
            alert("Not connected!");
        }
    }
</script>

</body>
</html>

Please do help!

I was expecting that after connect command, the session of principal must be stored and used in any other commands, but its not happening