Blancer.com Tutorials and projects – Page 491 – Freelance Projects, Design and Programming Tutorials

8 day to daily temporal resolution in google earth engine

Hello I am trying to change the temporal resolution of the LAI dataset from 8 day to daily in google earth engine. Would appreciate help with code

[link]https://code.earthengine.google.com/e3e994dbfa2d4d1b133de7fb46ca90e0

var point = ee.Geometry.Point([-94.73665965557193, 35.915990354302]);

print('Point Geometry:', point);
var startDate = '2019-01-01';
var endDate = '2019-12-31';

var LAIdataset = ee.ImageCollection('NASA/VIIRS/002/VNP15A2H')
                  .filterDate(startDate, endDate)
                  .filterBounds(point)
                  .map(function(image) { return image.clip(point); });
print("LAIdataset", LAIdataset)  ```

How do i change query params on page referesh?

I have a reports page. This page contains a view company page button, when users click on this button they are redirected to “company/candidates?jobId=xyz” . JobId is used to filter candidates. Now when user refreshes the page i want the url in address bar to be “company/candidates” i.e. no filtering.

Note that when first time candidates page is loaded i want the jobid to be visible. but when user refreshes the page it should go away.

I am using nextjs with redux if this helps at all ?

I have looked in useeffect this leads to force refresh which i dont want and then react router using shallow . this removes the jobid when candidates page is first loaded.

Issues with downloading PDF using jsPDF on Android via WebIntoApp: No default filename/extension and file not visible in Downloads folder

I’m encountering two issues when using jsPDF in a web application that I transformed into an Android app using WebIntoApp. Here’s the relevant code snippet:

<html lang="it">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Tabella PDF</title>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jspdf/2.5.1/jspdf.umd.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jspdf-autotable/3.5.23/jspdf.plugin.autotable.min.js"></script>
</head>
<body>
    <button onclick="scaricaPDF()">Scarica PDF</button>
    <script>
        function scaricaPDF() {
            const { jsPDF } = window.jspdf;
            const doc = new jsPDF();
            doc.autoTable({
                head: [['Colonna 1', 'Colonna 2', 'Colonna 3']],
                body: [
                    ['Dato 1', 'Dato 2', 'Dato 3'],
                    ['Dato 4', 'Dato 5', 'Dato 6'],
                    ['Dato 7', 'Dato 8', 'Dato 9']
                ]
            });
            doc.save("tabella.pdf");
        }
    </script>
</body>
</html>

Issue 1:
On Android, when the user clicks the “Scarica PDF” button, the download dialog does not automatically set a filename or extension (e.g., .pdf), and the user must manually enter both.

Issue 2:
The file is saved in the “Downloads” folder correctly, but Android does not display it properly in the Downloads app. The user has to manually navigate the file system to locate the file.

I’ve tried using FileSaver.js and converting the data into a Blob, but the issues still persist. As I’m not an Android developer and have no knowledge of Java, I wonder if these issues can be addressed by modifying the JavaScript function, or if they are inherent to using WebIntoApp.

Thank you in advance for your help!

Controlling Announcement Sequence for Screen Readers in Vue Form Validation (Vuetify v-form)

Problem

I’m developing an accessible form in Vue with proper form validation. When a user submits an invalid form, I want to:

Announce all validation errors to screen reader users
Move focus to the first invalid field

However, the current implementation causes confusion for screen reader users. When focus moves to the invalid field, the screen reader announces Firstly, the field’s own error message and its aria labels (automatically when focus moves)
then my custom announcement with all form errors

This creates a redundant and confusing experience where the same error is announced twice but in different contexts.

Current Implementation

I’m using a combination of form validation, error collection, and programmatic focus management. When validation fails:

I collect all error messages
Announce them via an aria-live region
Move focus to the first invalid field

But with this implementation it is not working in order. I want to have the errors announced first and then the trigger the current field announcements like mentioned with aria attributes.

The problematic code:

const submit = async (event) => {
  event.preventDefault();
  const { valid: isValid } = await myForm.value.validate();

  if (!isValid) {
    // Get all form items with errors
    const formItems = myForm.value.items;
    
    // Collect all error messages
    const errors = formItems.reduce((acc, item) => {
      if (item.errorMessages?.length > 0) {
        acc.push(...item.errorMessages);
      }
      return acc;
    }, []);
    
    // Announce all errors
    if (errors.length > 0) {
      announceToScreenReader(`Please correct the following errors: ${errors.join('. ')}`);
    }
    
    // Find and focus the first invalid field
    const firstInvalidField = formItems.find(item => 
      item.errorMessages?.length > 0
    );
    
    if (firstInvalidField) {
      const inputElement = document.getElementById(firstInvalidField.id);
      if (inputElement) {
        inputElement.focus();
        inputElement.scrollIntoView({ behavior: 'smooth' });
      }
    }
  }
};

const announceToScreenReader = (message) => {
  const announcer = document.getElementById('sr-announcer');
  if (!announcer) {
    const newAnnouncer = document.createElement('div');
    newAnnouncer.id = 'sr-announcer';
    newAnnouncer.setAttribute('aria-live', 'polite');
    newAnnouncer.setAttribute('aria-atomic', 'true');
    newAnnouncer.classList.add('sr-only');
    document.body.appendChild(newAnnouncer);
    setTimeout(() => {
      newAnnouncer.textContent = message;
    }, 100);
  } else {
    announcer.textContent = '';
    setTimeout(() => {
      announcer.textContent = message;
    }, 100);
  }
};

And the template

<v-form ref="myForm" @submit.prevent="submit">
  <v-text-field 
    v-model="firstName"
    :rules="[nameValidation.required, nameValidation.min]"
    :aria-label="'First Name'"
  >
    <template #message="arg">
      <div aria-live="off" id="firstNameError">{{ arg.message }}</div>
    </template>
  </v-text-field>
  
  <!-- Other form fields... -->
  
  <v-btn type="submit">Submit</v-btn>
</v-form>

How can I properly sequence these announcements so that:

The screen reader first announces the complete list of errors (via the aria-live region),
Then trigger announcements for first invalid field which is focused

Fastest way to randomly shuffle an array based on probabilities in PHP?

I have an array with values and probabilities (or in PHP, keys and values):

Value   Probability
John    3
Peter   2
Paul    1

I want to shuffle this array but have the order be influenced by the probability. That is, on average John should appear at the top of the list half the time, Peter a third of the time, and Paul one sixth of the time. The average order over thousands of shuffles should be the one given above.

I have thought to

Create an array in which each value appears as often as indicated by the probability:
```
John
John
John
Peter
Peter
Paul
```
Shuffle this array, e.g.:
```
John
Paul
Peter
John
John
Peter
```
Remove the duplicates, leaving the first instance:
```
John
Paul
Peter
```

In PHP code this might look something like this:

$items = array(
    'John' => 3,
    'Peter' => 2,
    'Paul' => 1
);

$probabilities = array();
foreach($items as $item => $value){
    $interim = array_fill(1, $value, $item);
    $probabilities = array_merge($probabilities, $interim);
}

shuffle($probabilities);

$result = array_unique($probabilities);

print("<pre>".print_r($result,true)."</pre>");

Is there a faster way to do this?

The real array contains a few hundred values and this probability-based shuffling has to be done everytime a webpage is called, so it should be lightning quick.

Issue with WP_Session_Tokens::destroy() – Nothing happen

I have an issue with this code:

$manager = WP_Session_Tokens::get_instance(get_current_user_id());
$manager->destroy(0);

I want to destroy the session at index 0, but it’s not working. How can I properly remove a specific session?
If destroying a session is only possible with a token, how can I get the token of a specific session to remove it?

I can’t receive events via reverb on the local network

I created an application with reverb where I made a simple channel and an event that receives a message and transmits it to the subscribers on the reverb channel. It turns out that when I tried to make a connection with the frontend in react using echo.js I ended up not receiving any type of information from the channel. How can I implement reverb correctly? The documentation does not have the information I am looking for.

Laravel Event:

<?php

namespace AppEvents;

use IlluminateBroadcastingChannel;
use IlluminateBroadcastingInteractsWithSockets;
use IlluminateBroadcastingPresenceChannel;
use IlluminateBroadcastingPrivateChannel;
use IlluminateContractsBroadcastingShouldBroadcast;
use IlluminateContractsBroadcastingShouldBroadcastNow;
use IlluminateFoundationEventsDispatchable;
use IlluminateQueueSerializesModels;

class Chat implements ShouldBroadcastNow
{
    use Dispatchable, InteractsWithSockets, SerializesModels;

    public $msg;
    /**
     * Create a new event instance.
     */
    public function __construct($msg)
    {
        //
        $this->msg = $msg;
    }

    /**
     * Get the channels the event should broadcast on.
     *
     * @return array<int, IlluminateBroadcastingChannel>
     */
    public function broadcastOn(): array
    {
        return [
            new Channel('chat'),
        ];
    }
}

Laravel Channel:

<?php

use IlluminateSupportFacadesBroadcast;

Broadcast::channel('App.Models.User.{id}', function ($user, $id) {
    return (int) $user->id === (int) $id;
});

Broadcast::channel('Chat', function () {
});

Call:

Route::get('/ws', function(){
    Broadcast(new Chat('test'));
});

Echo.js front-react

import Echo from 'laravel-echo';
import Pusher from 'pusher-js';

const echo = new Echo({
    broadcaster: 'pusher',
    key: process.env.REACT_APP_PUSHER_APP_KEY, // Chave do Pusher
    wsHost: '192.168.1.69', // Host do Reverb
    wsPort: 8080, // Porta do Reverb
    forceTLS: false, 
    disableStats: true,
});

export default echo;

app.js
“’
import React, { useEffect, useState } from ‘react’;
import echo from ‘./echo’; // Importe o Echo configurado

function App() {
const [mensagem, setMensagem] = useState(”);

useEffect(() => {
    // Ouvir um canal público
    echo.channel('chat')
        .listen('Chat', (e) => {
            setMensagem(e.mensagem); // Atualize o estado com a mensagem recebida
            console.log('Evento recebido:', e);
        });

    // Limpar a inscrição ao desmontar o componente
    return () => {
        echo.leaveChannel('canal-reverb');
    };
}, []);

return (
    <div>
        <h1>Mensagem Recebida:</h1>
        <p>{mensagem}</p>
    </div>
);

}

export default App;




I can successfully receive connections from the machine where the local server is located, but when I try to make connections with other machines, Reverb does not identify connections.

Cannot fetch from Spring backend due to CORS

I have a backend using Spring and a frontend using React.
I already have many controllers and all methods work with current CORS:

@Configuration
public class Cors {

    @Bean
    public CorsFilter corsFilter() {
        UrlBasedCorsConfigurationSource source = new UrlBasedCorsConfigurationSource();
        CorsConfiguration config = new CorsConfiguration();
        config.addAllowedOrigin("http://localhost:5173");
        config.addAllowedHeader("*");
        config.addAllowedMethod("*");
        config.setAllowCredentials(true);
        source.registerCorsConfiguration("/**", config);
        return new CorsFilter(source);
    }

}

It’s worth noting that I don’t use Spring Security.
This is my pom:

<dependencies>

        <dependency>
            <groupId>org.springframework.boot</groupId>
            <artifactId>spring-boot-starter-web</artifactId>
        </dependency>

        <dependency>
            <groupId>org.springframework.security</groupId>
            <artifactId>spring-security-crypto</artifactId>
            <version>6.1.4</version>
        </dependency>

        <dependency>
            <groupId>org.springframework.boot</groupId>
            <artifactId>spring-boot-starter-data-jpa</artifactId>
        </dependency>

        <dependency>
            <groupId>org.postgresql</groupId>
            <artifactId>postgresql</artifactId>
            <version>42.7.2</version>
        </dependency>

        <dependency>
            <groupId>org.projectlombok</groupId>
            <artifactId>lombok</artifactId>
            <version>1.18.36</version>
            <scope>provided</scope>
        </dependency>

    </dependencies>

Now I have this controller and the only method that doesn’t work:

Dto and controller method (/edit doesn’t work):

@Builder
@AllArgsConstructor
@NoArgsConstructor
@Data
@Jacksonized
public class EditCommentRequest {
    private long commentId;
    private boolean isPublished;
}

@RestController
@RequestMapping("/api/comment")
public class CommentController {

    final CommentService commentService;

    public CommentController(CommentService commentService) {
        this.commentService = commentService;
    }

    @GetMapping("/get-all")
    public ResponseEntity<?> getAllComments() {
        List<CommentDto> comments = commentService.getAll();
        return ResponseEntity.status(HttpStatus.OK).body(comments);
    }
    
    @PostMapping("/edit")
    public ResponseEntity<?> editComment(
            @RequestBody EditCommentRequest request,
            HttpSession session) {
        
        commentService.updateCommentStatus(request, (Long) session.getAttribute(USER_ID));
        return ResponseEntity.status(HttpStatus.OK).build();
    }
}

The thing is that it is the @PostMapping("/edit") method that does not work when fetching from the frontend (all other works good, the problem exactly in this)

This is fetch from React:

const handleSendEditCommentData = async (event) => {
        event.preventDefault();

        const requestData = {
            commentId: data.id,
            isPublished: isCommentShowCheckbox,
        };

        console.log(requestData);

        try {
            const response = await fetch(API_ENDPOINTS.COMMENT_EDIT, {
                method: 'POST',
                credentials: 'include',
                headers: {
                    'Content-Type': 'application/json',
                },
                body: JSON.stringify(requestData),
            });

            if (response.ok) {
                onClose();
                getAllData();
                toast.success("Comment edited successfully.");
            } else {
                const errorData = await response.json();
                switch (response.status) {
                    case 401:
                        toast.error(errorData.message || "401");
                        break;
                    case 404:
                        toast.error(errorData.message || "404");
                        break;
                    case 409:
                        toast.error(errorData.message || `409`);
                        break;
                    case 500:
                        toast.error(errorData.message || "500");
                        break;
                    default:
                        toast.error(`Else error`);
                        break;
                }
            }

        } catch (error) {
            console.error("Fetch Error:", error);
            toast.error("catch error: " + error.message);
        }

This method is called by clicking on the button (onClick={handleSendEditCommentData})
All data that is put in the body is: commentId (long), isPublished (bool), are put normally, commentId is simply an id via props, and isPublished is a simple bool useState that is set by the user.

This fetch method always crashes in catch: catch error: Failed to fetch
Console log:

Access to fetch at 'http://localhost:21001/api/comment/edit' from origin 'http://localhost:5173' has been blocked by CORS policy: Response to preflight request doesn't pass access control check: No 'Access-Control-Allow-Origin' header is present on the requested resource. If an opaque response serves your needs, set the request's mode to 'no-cors' to fetch the resource with CORS disabled.

POST http://localhost:21001/api/comment/edit net::ERR_FAILED

Fetch Error: TypeError: Failed to fetch
    at handleSendEditCommentData (EditCommentModal.jsx:29:36)
    at HTMLUnknownElement.callCallback2 (chunk-3F5266CN.js?v=a9e8ce0e:3680:22)
    at Object.invokeGuardedCallbackDev (chunk-3F5266CN.js?v=a9e8ce0e:3705:24)
    at invokeGuardedCallback (chunk-3F5266CN.js?v=a9e8ce0e:3739:39)
    at invokeGuardedCallbackAndCatchFirstError (chunk-3F5266CN.js?v=a9e8ce0e:3742:33)
    at executeDispatch (chunk-3F5266CN.js?v=a9e8ce0e:7046:11)
    at processDispatchQueueItemsInOrder (chunk-3F5266CN.js?v=a9e8ce0e:7066:15)
    at processDispatchQueue (chunk-3F5266CN.js?v=a9e8ce0e:7075:13)
    at dispatchEventsForPlugins (chunk-3F5266CN.js?v=a9e8ce0e:7083:11)
    at chunk-3F5266CN.js?v=a9e8ce0e:7206:20

Here two requests are sent, and both of them do not receive a response, in devtools they are marked in red,

FIRST – Status: CORS error, type: fetch

Request URL:
http://localhost:21001/api/comment/edit
Referrer Policy:
strict-origin-when-cross-origin

RESPONE HEADERS:
none

REQUEST HEADDERS:
content-type:
application/json
referer:
http://localhost:5173/
sec-ch-ua:
"Not(A:Brand";v="99", "Google Chrome";v="133", "Chromium";v="133"
sec-ch-ua-mobile:
?0
sec-ch-ua-platform:
"Windows"
user-agent:
Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/133.0.0.0 Safari/537.36

PAYLOAD:
{commentId: 5, isPublished: true}
commentId: 5
isPublished: true

SECOND – Status: 401, type: preflight

Request URL:
http://localhost:21001/api/comment/edit
Request Method:
OPTIONS
Status Code:
401 Unauthorized
Remote Address:
[::1]:21001
Referrer Policy:
strict-origin-when-cross-origin

RESPONE HEADERS:
connection:
keep-alive
content-length:
0
date:
Sat, 08 Mar 2025 08:40:32 GMT
keep-alive:
timeout=60

REQUEST HEADDERS:
accept:
*/*
accept-encoding:
gzip, deflate, br, zstd
accept-language:
ru,ru-RU;q=0.9
access-control-request-headers:
content-type
access-control-request-method:
POST
cache-control:
no-cache
connection:
keep-alive
host:
localhost:21001
origin:
http://localhost:5173
pragma:
no-cache
referer:
http://localhost:5173/
sec-fetch-dest:
empty
sec-fetch-mode:
cors
sec-fetch-site:
same-site
user-agent:
Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/133.0.0.0 Safari/537.36

Postman response headers:

Vary Origin
Vary Access-Control-Request-Method
Vary Access-Control-Request-HeadersContent-Length 0
Date Sat, 08 Mar 2025 08:59:19 GMT
Keep-Alive timeout=60
Connection keep-alive

The request URL is correct, I tried different options for sending fetch – it doesn’t help, serializes body: JSON.stringify(requestData) in the DTO class in spring, it seems to be correct. CORS with all other methods and from other controllers and from this one works and everything is fine, but I have already messed around with this method and I just don’t understand what is wrong here. And I don’t use Spring Security. Also, all URL paths are correct, the data is also set correctly in the body on the frontend, the DTO on the backend also seems to be correct, HttpSession also takes the data correctly, but this is not the problem.

If you need any additional information, please write.
And help me solve this problem, I really have already spent a lot of time and am sitting in one place trying to figure it out. Those who know, help.

It is necessary that the method does not go into catch, as if CORS blocked this method.

How do you reduce lag/processing power from scrolling?

I have created a mandelbrot set explorer with HTML/CSS/JS. I click and drag to move around and scroll up and down (or use = and - keys) to zoom. Scrolling is creating tons of lag; it reduces it to around 5fps, when dragging and using the keys is a relatively smooth experience (+20fps).

My friend also has a little project that does a decent amount (but not nearly as much) computation, and his entire js loop/setInterval() pauses when scrolling.

How can we reduce the computational toll of scrolling to get better performance? In my case, I don’t even need the scrolling to look smooth, I just need more than 10fps. I would also like to minimise the use of external libraries, unless they’re deemed so necessary.

how to setup puppeteer in my chrome extension

I unable to understand or use the documentation given by puppeteer to implement it into my chrome extension

How i want my extention to work:
1)User opens a specific webpage

2)Then the extension extracts details from this webpage

3)Uses the extracted details as inputs in a site opened by puppeteer and returns the output value

4)The output value is injected into the webpage

I am currently struggling to implement step 3 as i cant seem to use puppeteer in the script.
Can someone provide an explanation on how to use it or point me to sources that explain how to implement it properly

How can I change the color of the grid in this chart using Chart.js

Im trying to change the color of the grid lines since my background is dark. I have managed to change the color of the ticks, and the line itself. However I’ve been trying to change the grid color for almost two hours and haven’t succeeded yet. Any help would be appreciated. Thanks!

<script>
                const <?php echo $info['alias'] . "xValues"?> = [1,2,3,4,5,6,7,8,9,10,11,12,13,14,15,16,17,18,19,20,21,22,23,24];
                const <?php echo $info['alias'] . "yValues"?> = [80, 60, 80, 60, 100, 80];
                new Chart("<?php echo $info['alias'] ?>", {
                type: "line",
                data: {
                    labels: <?php echo $info['alias'] . "xValues"?>,
                    datasets: [{
                    fill: false,
                    lineTension: 0,
                    backgroundColor: "white",
                    borderColor: "white",
                    data:  [{
                                x: 4,
                                y: <?php echo $nivel1?>
                            }, {
                                x: 8,
                                y: <?php echo $nivel2?>
                            }, {
                                x: 12,
                                y: <?php echo $nivel3?>
                            }, {
                                x: 16,
                                y: <?php echo $nivel4?>
                            }, {
                                x: 20,
                                y: <?php echo $nivel5?>
                            }, {
                                x: 24,
                                y: <?php echo $nivel6?>
                            }]
                    }]
                },
                options: {
                    legend: {display: false},
                    scales: {
                    yAxes: [{ticks: {min: 0, max:100, fontColor: 'white'}, gridLines: {display: false ,color: 'white'}}],
                    xAxes: [{ticks: {fontColor: 'white'}}],
                    y: {
                        grid: {
                            color: 'white'
                        }
                    }
                    }
                }
                });
            </script>

PostMessage between windows works on Windows but not on macOS (Chrome Extension)

I am developing a simple Chrome extension that opens a new window (newWindow.html) and sends a message using postMessage. This works perfectly on Windows, but on Chrome in macOS the new window always displays “Waiting for message…”.

Here is a minimal example of the code:

popup.js

document.getElementById('openWindowButton').addEventListener('click', () => {
    var newWindow = window.open('newWindow.html');   
    newWindow.addEventListener('load', () => {
        newWindow.postMessage({ test: 'Hello from the popup!' }, '*');
    });
});

newWindow.js

window.addEventListener('message', (event) => {
    document.getElementById('messageDisplay').textContent = 'Message received: ' + event.data.test;
});

newWindow.html

<!DOCTYPE html>
<html>
<head>
  <title>New Window</title>
  <script src="newWindow.js" defer></script>
</head>
<body>
  <h1>New Window</h1>
  <p id="messageDisplay">Waiting for message...</p>
</body>
</html>

Expected Behavior:
When clicking the button in popup.html, the new window should open and display “Message received: Hello from the popup!”.

Actual Behavior:
On Windows: Everything works as expected, the message is displayed correctly.
On macOS: The new window remains stuck on “Waiting for message…”, and no errors appear in the console.

array.prototype is being applied to a non-array object (?)

I have a library with the following addition for Array types –

Array.prototype.top = function() {
    return (this.length > 0) ? this[this.length-1] : null;
    }

It seems to be applied to non-Array objects – e.g.,

for (key in myrecordset) {
    alert(key);                // will iterate and alert "top";
    }

In the debugger console:

> myrecordset.length
< undefined
> typeof myrecordset
< 'object'
> myrecordset instanceof(Array)
< false
> myrecordset['top']
< f() {
      return (this.length ...
      }

So, what the ?
The object is not a javascript array
(ie, no length, not an instance of, …) but the Array.prototype.top seems to have been applied?

Note: in addition, trying to follow the prototype chain I get

> myrecordset.constructor()
< {}
    [[ Prototype ]]: Object

SCOPE: screen shot with myrecordset

In JavaScript and browser mode, how to dump an object into a variable?

I’d like to dump the mouse click event into a variable. One purpose is to demonstrate the event’s internal structure on the web page.

I am aware of a few ways that are close to my goal.

// this only prints to console, 
// not onto web page or into a variable   
console.log(`event = %o`, event); 

// this only works in NodeJS, not in browser mode
let dump1 = util.format(`event = %o`, event);

// this only prints limited attributes
let dump2 = JSON.stringify(event);

This is a small test html file to show that JSON.stringify doesn’t dump as much as console.log;

<!DOCTYPE html>
<html lang="en">
<body>
    <script>
        window.addEventListener("click", (event) => {
            let d = JSON.stringify(event);
            console.log(`event = ${d}`);
            console.log(`event = %o`, event);
        });
    </script>
</body>
</html>

when I load this html to my chrome browser and click the blank page, I see the following in the devtools console

you can see the first event dump by console.log has much more attributes than the second dump by JSON.stringify.

Is there a way that I can get the console.log’s output into a variable?

Thank you

my browser is
Chrome, Version 133.0.6943.142 (Official Build) (64-bit)

How to log winow.innerWidth as it changes?

I am having a situation where I can only log window.innerWidth as the window size width changes inside the scope of the written function from where it is returned, but returning the value and logging it outside of that scope isn’t working as it only logs the initial value of window.innerWidth but doesn’t keep logging the value as it changes. I am unsure how to do this correctly. I tested these two approaches in my project and on codepen, neither will allow logging window.innerWidth from the return value of the function in real time.

    const logWindow_width = window.onresize = function () {
        console.log(window.innerWidth);
        return window.innerWidth;
    }
    window.addEventListener('resize', logWindowWidth);
    function logWindowWidth() {
        console.log(window.innerWidth);
        return window.innerWidth;
    }
    console.log(logWindow_width());
    console.log(logWindowWidth());