hey i wirte a code that does moving a square is a player and There is a collision between the player and the other block and In another project I wrote function which draws every time the player moves a new image in an animation loop when my to project is done i try to connect the two project my animation funcion isn’t
show that image on the player
here my animation funcion

function animzia() {
    it++;
    if (it == 11) {
        it = 1;
    }

    var brb = new Image(100,100); 
    brb.src = 'Walk (' + it.toString() + ').png';
    brb.onload = function () {
        c.clearRect(0, 0, canvas.width, canvas.height);  // Clear the canvas before drawing
        c.drawImage(brb, parseInt(player.style.left), parseInt(player.style.top), parseInt(player.width), parseInt(player.height));
    };

   
    console.log(brb);
    console.log(c);
}

here the top that I define all the rule variables

 var canvas = document.querySelector('canvas')
        var c = canvas.getContext('2d'); 
        var playerC = canvas.getContext('2d')
        canvas.width = window.innerWidth;
        canvas.height = window.innerHeight;
        var player = document.getElementById("player");
        var block = document.getElementById('block');
        var images = [];
            images.length = 10;
        var it = Number

here that canvas

 <canvas id="player" class="cube cube2"></canvas>
    <div id="block" class="cube cube1"></div>

here i load that picture

 it = 0;
            while(it < 10){
               animzia();
            }
       

I tried to search on google it didn’t work I tried to do CONSOL LOG and it didn’t work what I hope to get is a direction how to do it

Im trying to make a memory card game and I need that every div the for loop creates in the function (createCards()) to create 2 more div inside each div(.indvCard)so I could flip them on click event
Thank you !

const cards = ['A', 'B', 'C', 'D', 'E', 'F', 'G', 'H', 'I'];
const cardsArry = [...cards, ...cards];
//let idex_card1 = [];
//let idex_card2 = [];
const innerCard = [];

const bigD = document.getElementById("bigDId");

function createCards() {
    for (i = 0; i < 18; i++) {
        const indvCard = document.createElement('div');

        indvCard.innerText = "card";
        indvCard.attribute = cards[i];
        bigD.append(indvCard);

        indvCard.classList.add('cardClass');
        indvCard.setAttribute("data-cards", cardsArry[i]/*or funtion shuffle*/);

        // indvCard.addEventListener('click', appendDivs)

    }
}

cards.forEach(element => {
    const newDivs = cardsArry.map(appendDivs);
});

I’m having problems with Laravel Websockets. I build a chat app using Laravel Websockets, Vue.JS and Laravel-Echo. The web app works correctly, so I started working in a Mobile version with React Native, but I can’t connect to private/presence channels.

I can connect to public channels withour problems. I have the following code:

    useEffect(() => {
        const echo = new Echo({
            broadcaster: 'pusher',
            key: 'pusher-app-key',
            cluster: 'mt1',
            wsHost: 'my-domain.com',
            wsPort: 6001,
            wssPort: 6001,
            encrypted: true,
            forceTLS: false,
            enabledTransports: ['ws', 'wss'],
            authEndpoint: 'https://my-domain.com/broadcasting/auth',
            auth: {
                headers: {
                    Authorization: authToken,
                },
            },
        });

        const channel = echo.private(channelUri);
        channel.subscribed(() => {
            console.log("connected");
        }).listen(eventName, (event) => {
            console.log(event);
        }).error((error) => {
            console.log(error);
        });
    }, []);

If I change my channel URI to a public one, it connects and I can listen to events without problems. But, using the same configuration for a private channel, I can not connect. I got the following error:

{"error": "Unable to retrieve auth string from channel-authorization endpoint - received status: 403 from https://my-domain.com/broadcasting/auth. Clients must be authorized to join private or presence channels. See: https://pusher.com/docs/channels/server_api/authorizing-users/", "status": 403, "type": "AuthError"}

I am sending my Bearer token in Authorization like this: “Bearer ${token}” and it works for HTTP requests, it is not expired.

Other stuff tried:
-CORS configuration
-SSL is configured, web app is working.

Any suggestions that I could try? Thanks a lot.

More info:
-PHP 8.1
-Laravel 10
-laravel-websockets 1.14
-Inertia

Suddenly setting height and width of an inner div box doesnt work.The box always stays the same size, no matter what I change in the CSS file. Happened mid project. I searched and uncomment a lot but with the code below the problem still exists:

App.js:

import Header from "./Components/Header";
function App() {
    return (
        <Header/>
    );
}
export default App;

Header.js:

import React from 'react';
import "./Header.css";

function Header() {
  return (
    <div className="header">
      <div className='logo'></div>
    </div>   
  );
}

export default Header;

Header.css:

.header {
    height: 60px;
    width: 100%;
    background-color: black;
  }

  
  .logo {
    width: 200px;
    height: 50px;
    border-style: solid;
    border-color: red;
  }

uncommended all unnecessary stuff and tried different display settings

I have a Rails on Ruby project. In the javascript folder I have application.js and home.js.

app
|- javascript
    |- application.js
    |- home.js
|- ...

When I try to import an npm module into home.js, and request home.html.erb from the server, I get this error in my browsers console:

Uncaught SyntaxError: import declarations may only appear at top level of a module

When I import npm modules into application.js (using import something from "somewhere"), Everything works as expected.

I suspect the reason why I get this error is because Sprockets minifies all the js that needs to be sent into a single file. After minification, the import is no longer “at the top level”. So I get an error.

How do I correctly import a module into home.js?

I fetched nfts of solana by using shyft api.
But I can not fetch all nfts.
For example,

https://magiceden.io/u/FCRqWMHBgaX2Bff2KsNXtYMeH7KVVvhWQz6xi4aTmcvg

In this, there is a lot of nfts but when I use shyft api, I can fetch only 7 nfts.
Someone said quicknodes api is good.
but I can not understand documentation.
Can anybody post sample code for it?
Many thanks.

I fetched nfts of solana by using shyft api.

But I need to fetch all nfts by using quicknodes api.

I’m encountering a problem with dynamic file removal in a JavaScript file upload script. Here’s a breakdown of the issue:

Initially, I upload 4 files.
After removing one file, the file count correctly updates to 3.
However, when I subsequently add 3 more files, bringing the total to 6, and attempt to remove one file, it unexpectedly removes the files added initially, plus the new file if I attempted to remove one new file. After this initial behavior, the code works perfectly, removing just one file at a time.

let data=[{

  profile1: <a href="facebook.com">facebook</a>,
  name: 'Name',
  profile2: <a href="google.com">google</a>,
  age:23,
  country:'ABc'
}]

Need to view above data as pdf report with hyperlinks as well. I tried using jspdf, jsautotable and react-pdf packages as well but no luck. Please help

I have been looking high and low for correct and efficiently designed Regular Expressions (RegEx, RegExp), for various purposes, but in this post, I’m focusing on IPv4 and IPv6 address validation.

The target environments for the regular expressions in this particular case are JavaScript (Web Browser, NodeJS) as well as HTML5 pattern attribute usage.

The regular expressions I have found online so far, have not met either the correctness and/or efficiency criteria very well, so far. I will proceed to give some examples of these issues and an incomplete set of test cases below, in order to describe the problems encountered.

Goals – Regular Expressions

• Backtracking should be minimized, where possible.
• Classes and portions of patterns should be ordered based on expected frequency, if possible.
• Any other performance and conciseness considerations should be followed, where possible.

Goals – IPv6:

• Leading zeros should be allowed if and only if the address is completely uncollapsed (completely expanded).
• Single segment zero sequences should not be collapsed.
• If a sequence of zeros is collapsed, the complete sequence of adjacent zero segments should be collapsed (just a portion of such a sequence should not be collapsed, and there should be no remaining adjacent zero segments by the collapsed sequence).
• As per specification, if two separate equal length sequences of zero segments that are the longest exist, only the first such sequence should be collapsed.

Goals – IPv6 dual-stack:

• Deprecated compatible syntax should be allowed.
• As per specification, should start with a sequence of six zero segments for compatible, and a sequence of five zero segments and an FFFF segment for mapped address notation. (Many existing solutions get this wrong.)
• Last collapsed sequence :: omission should be optional (both variants should be allowed).

Patterns already tried

• (([0-9a-fA-F]{1,4}:){7,7}[0-9a-fA-F]{1,4}|([0-9a-fA-F]{1,4}:){1,7}:|([0-9a-fA-F]{1,4}:){1,6}:[0-9a-fA-F]{1,4}|([0-9a-fA-F]{1,4}:){1,5}(:[0-9a-fA-F]{1,4}){1,2}|([0-9a-fA-F]{1,4}:){1,4}(:[0-9a-fA-F]{1,4}){1,3}|([0-9a-fA-F]{1,4}:){1,3}(:[0-9a-fA-F]{1,4}){1,4}|([0-9a-fA-F]{1,4}:){1,2}(:[0-9a-fA-F]{1,4}){1,5}|[0-9a-fA-F]{1,4}:((:[0-9a-fA-F]{1,4}){1,6})|:((:[0-9a-fA-F]{1,4}){1,7}|:)|fe80:(:[0-9a-fA-F]{0,4}){0,4}%[0-9a-zA-Z]{1,}|::(ffff(:0{1,4}){0,1}:){0,1}((25[0-5]|(2[0-4]|1{0,1}[0-9]){0,1}[0-9]).){3,3}(25[0-5]|(2[0-4]|1{0,1}[0-9]){0,1}[0-9])|([0-9a-fA-F]{1,4}:){1,4}:((25[0-5]|(2[0-4]|1{0,1}[0-9]){0,1}[0-9]).){3,3}(25[0-5]|(2[0-4]|1{0,1}[0-9]){0,1}[0-9])) from Here. While this doesn’t even pass all of the test cases, there are many other fails not included in the current set of test-cases such as multiple sequence collapsing.
• (?:(?:(?:[0-9A-Fa-f]{1,4}:){6}|::(?:[0-9A-Fa-f]{1,4}:){5}|(?:[0-9A-Fa-f]{1,4})?::(?:[0-9A-Fa-f]{1,4}:){4}|(?:(?:[0-9A-Fa-f]{1,4}:){0,1}[0-9A-Fa-f]{1,4})?::(?:[0-9A-Fa-f]{1,4}:){3}|(?:(?:[0-9A-Fa-f]{1,4}:){0,2}[0-9A-Fa-f]{1,4})?::(?:[0-9A-Fa-f]{1,4}:){2}|(?:(?:[0-9A-Fa-f]{1,4}:){0,3}[0-9A-Fa-f]{1,4})?::[0-9A-Fa-f]{1,4}:|(?:(?:[0-9A-Fa-f]{1,4}:){0,4}[0-9A-Fa-f]{1,4})?::)(?:[0-9A-Fa-f]{1,4}:[0-9A-Fa-f]{1,4}|(?:(?:25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?).){3}(?:25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?))|(?:(?:[0-9A-Fa-f]{1,4}:){0,5}[0-9A-Fa-f]{1,4})?::[0-9A-Fa-f]{1,4}|(?:(?:[0-9A-Fa-f]{1,4}:){0,6}[0-9A-Fa-f]{1,4})?::) from Here
• and many others…

Test Cases

The following were derived in part based on These, but are used differently in many cases.

let ipv6Valid = [
    '0000:0000:0000:0000:0000:0000:0000:0000/128',
    '0000:0000:0000:0000:0000:0000:0000:0000',
    '0000:0000:0000:0000:0000:0000:0000:0001',
    '0:0:0:0:0:0:0:0',
    '0:0:0:0:0:0:0:1',
    '0:0:0:0:1:0:0:0',
    '0:1:2:3:4:5:6:7/128',
    '0:1:2:3:4:5:6:7',
    '1080:0:0:0:8:800:200c:417a',
    '1080::8:800:200c:417a',
    '1111:2222:3333:4444:5555:6666:7777:8888',
    '1111:2222:3333:4444:5555:6666::',
    '1111:2222:3333:4444:5555::',
    '1111:2222:3333:4444:5555::8888',
    '1111:2222:3333:4444::',
    '1111:2222:3333:4444::7777:8888',
    '1111:2222:3333:4444::8888',
    '1111:2222:3333::',
    '1111:2222:3333::6666:7777:8888',
    '1111:2222:3333::7777:8888',
    '1111:2222:3333::8888',
    '1111:2222::',
    '1111:2222::5555:6666:7777:8888',
    '1111:2222::6666:7777:8888',
    '1111:2222::7777:8888',
    '1111:2222::8888',
    '1111::',
    '1111::4444:5555:6666:7777:8888',
    '1111::5555:6666:7777:8888',
    '1111::6666:7777:8888',
    '1111::7777:8888',
    '1111::8888',
    '1:2:3:4:5:6:7:8',
    '1:2:3:4:5:6::',
    '1:2:3:4:5::',
    '1:2:3:4:5::8',
    '1:2:3:4::',
    '1:2:3:4::7:8',
    '1:2:3:4::8',
    '1:2:3::',
    '1:2:3::7:8',
    '1:2:3::8',
    '1:2::',
    '1:2::7:8',
    '1:2::8',
    '1::',
    '1::2:3',
    '1::2:3:4',
    '1::2:3:4:5',
    '1::2:3:4:5:6',
    '1::7:8',
    '1::8',
    '2001:0000:1234:0000:0000:C1C0:ABCD:0876',
    '2001:0000:4136:e378:8000:63bf:3fff:fdd2',
    '2001:0DB8:0000:CD30:0000:0000:0000:0000/60',
    '2001:DB8:0:CD30::/60',
    '2001:DB8:0:CD30/60',
    '2001:0db8:0000:0000:0000:0000:1428:57ab',
    '2001:0db8:0:0:0:0:1428:57ab',
    '2001:0db8:1234:0000:0000:0000:0000:0000',
    '2001:db8:1234::',
    '2001:0db8:1234:ffff:ffff:ffff:ffff:ffff',
    '2001:0db8:85a3:0000:0000:8a2e:0370:7334',
    '2001:db8::1428:57ab',
    '2001:DB8:0:0:8:800:200C:417A',
    '2001:DB8::8:800:200C:417A',
    '2001:db8:85a3:0:0:8a2e:370:7334',
    '2001:db8:85a3::8a2e:370:7334',
    '2001:db8::',
    '2001:db8::1428:57ab',
    '2001:db8:a::123',
    '2002::',
    '2608::3:5',
    '2608:af09:30:0:0:0:0:134',
    '2::10',
    '3ffe:0b00:0000:0000:0001:0000:0000:000a',
    '7:6:5:4:3:2:1:0',
    '::',
    '::/128',
    '::1',
    '::1/128',
    '::2:3',
    '::2:3:4',
    '::2:3:4:5',
    '::2:3:4:5:6',
    '::2:3:4:5:6:7',
    '::3333:4444:5555:6666:7777:8888',
    '::4444:5555:6666:7777:8888',
    '::5555:6666:7777:8888',
    '::6666:7777:8888',
    '::7777:8888',
    '::8',
    '::8888',
    '::ffff:0:0',
    '::ffff:c000:280',
    'FE80::/10',
    'FEC0::/10',
    'FF00::/8',
    'FF01:0:0:0:0:0:0:101',
    'FF01::101',
    'FF02:0000:0000:0000:0000:0000:0000:0001',
    'fe80:0000:0000:0000:0204:61ff:fe9d:f156',
    'fe80:0:0:0:204:61ff:fe9d:f156',
    'fe80::',
    'fe80::1',
    'fe80::204:61ff:fe9d:f156',
    'fe80::217:f2ff:fe07:ed62',
    'fedc:ba98:7654:3210:fedc:ba98:7654:3210',
    'ff02::1',
    'ffff::',
    'ffff::3:5',
    'ffff:ffff:ffff:ffff:ffff:ffff:ffff:ffff',
]

let ipv6Invalid = [
    '1:0:0:0:1::1',
    '10.0.0.1',
    '-1',
    '::1 ::1',
    '02001:0000:1234:0000:0000:C1C0:ABCD:0876',
    '1.2.3.4',
    '1.2.3.4:1111:2222:3333:4444::5555',
    '1.2.3.4:1111:2222:3333::5555',
    '1.2.3.4:1111:2222::5555',
    '1.2.3.4:1111::5555',
    '1.2.3.4::',
    '1.2.3.4::5555',
    '1111',
    '11112222:3333:4444:5555:6666:1.2.3.4',
    '11112222:3333:4444:5555:6666:7777:8888',
    '::1//64',
    '::1/0001',
    '1111:',
    '1111:1.2.3.4',
    '1111:2222',
    '1111:22223333:4444:5555:6666:1.2.3.4',
    '1111:22223333:4444:5555:6666:7777:8888',
    '1111:2222:',
    '1111:2222:1.2.3.4',
    '1111:2222:3333',
    '1111:2222:33334444:5555:6666:1.2.3.4',
    '1111:2222:33334444:5555:6666:7777:8888',
    '1111:2222:3333:',
    '1111:2222:3333:1.2.3.4',
    '1111:2222:3333:4444',
    '1111:2222:3333:44445555:6666:1.2.3.4',
    '1111:2222:3333:44445555:6666:7777:8888',
    '1111:2222:3333:4444:',
    '1111:2222:3333:4444:1.2.3.4',
    '1111:2222:3333:4444:5555',
    '1111:2222:3333:4444:55556666:1.2.3.4',
    '1111:2222:3333:4444:55556666:7777:8888',
    '1111:2222:3333:4444:5555:',
    '1111:2222:3333:4444:5555:1.2.3.4',
    '1111:2222:3333:4444:5555:6666',
    '1111:2222:3333:4444:5555:66661.2.3.4',
    '1111:2222:3333:4444:5555:66667777:8888',
    '1111:2222:3333:4444:5555:6666:',
    '1111:2222:3333:4444:5555:6666:00.00.00.00',
    '1111:2222:3333:4444:5555:6666:000.000.000.000',
    '1111:2222:3333:4444:5555:6666:1.2.3.4.5',
    '1111:2222:3333:4444:5555:6666:255.255.255255',
    '1111:2222:3333:4444:5555:6666:255.255255.255',
    '1111:2222:3333:4444:5555:6666:255255.255.255',
    '1111:2222:3333:4444:5555:6666:256.256.256.256',
    '1111:2222:3333:4444:5555:6666:7777',
    '1111:2222:3333:4444:5555:6666:77778888',
    '1111:2222:3333:4444:5555:6666:7777:',
    '1111:2222:3333:4444:5555:6666:7777:1.2.3.4',
    '1111:2222:3333:4444:5555:6666:7777:8888:',
    '1111:2222:3333:4444:5555:6666:7777:8888:1.2.3.4',
    '1111:2222:3333:4444:5555:6666:7777:8888:9999',
    '1111:2222:3333:4444:5555:6666:7777:8888::',
    '1111:2222:3333:4444:5555:6666:7777:::',
    '1111:2222:3333:4444:5555:6666::1.2.3.4',
    '1111:2222:3333:4444:5555:6666::8888:',
    '1111:2222:3333:4444:5555:6666:::',
    '1111:2222:3333:4444:5555:6666:::8888',
    '1111:2222:3333:4444:5555::7777:8888:',
    '1111:2222:3333:4444:5555::7777::',
    '1111:2222:3333:4444:5555::8888:',
    '1111:2222:3333:4444:5555:::',
    '1111:2222:3333:4444:5555:::1.2.3.4',
    '1111:2222:3333:4444:5555:::7777:8888',
    '1111:2222:3333:4444::5555:',
    '1111:2222:3333:4444::6666:7777:8888:',
    '1111:2222:3333:4444::6666:7777::',
    '1111:2222:3333:4444::6666::8888',
    '1111:2222:3333:4444::7777:8888:',
    '1111:2222:3333:4444::8888:',
    '1111:2222:3333:4444:::',
    '1111:2222:3333:4444:::6666:1.2.3.4',
    '1111:2222:3333:4444:::6666:7777:8888',
    '1111:2222:3333::5555:',
    '1111:2222:3333::5555:6666:7777:8888:',
    '1111:2222:3333::5555:6666:7777::',
    '1111:2222:3333::5555:6666::8888',
    '1111:2222:3333::5555::1.2.3.4',
    '1111:2222:3333::5555::7777:8888',
    '1111:2222:3333::6666:7777:8888:',
    '1111:2222:3333::7777:8888:',
    '1111:2222:3333::8888:',
    '1111:2222:3333:::',
    '1111:2222:3333:::5555:6666:1.2.3.4',
    '1111:2222:3333:::5555:6666:7777:8888',
    '1111:2222::4444:5555:6666:7777:8888:',
    '1111:2222::4444:5555:6666:7777::',
    '1111:2222::4444:5555:6666::8888',
    '1111:2222::4444:5555::1.2.3.4',
    '1111:2222::4444:5555::7777:8888',
    '1111:2222::4444::6666:1.2.3.4',
    '1111:2222::4444::6666:7777:8888',
    '1111:2222::5555:',
    '1111:2222::5555:6666:7777:8888:',
    '1111:2222::6666:7777:8888:',
    '1111:2222::7777:8888:',
    '1111:2222::8888:',
    '1111:2222:::',
    '1111:2222:::4444:5555:6666:1.2.3.4',
    '1111:2222:::4444:5555:6666:7777:8888',
    '1111::3333:4444:5555:6666:7777:8888:',
    '1111::3333:4444:5555:6666:7777::',
    '1111::3333:4444:5555:6666::8888',
    '1111::3333:4444:5555::1.2.3.4',
    '1111::3333:4444:5555::7777:8888',
    '1111::3333:4444::6666:1.2.3.4',
    '1111::3333:4444::6666:7777:8888',
    '1111::3333::5555:6666:1.2.3.4',
    '1111::3333::5555:6666:7777:8888',
    '1111::4444:5555:6666:7777:8888:',
    '1111::5555:',
    '1111::5555:6666:7777:8888:',
    '1111::6666:7777:8888:',
    '1111::7777:8888:',
    '1111::8888:',
    '1111:::',
    '1111:::3333:4444:5555:6666:1.2.3.4',
    '1111:::3333:4444:5555:6666:7777:8888',
    '123',
    '12345::6:7:8',
    '124.15.6.89/60',
    '1:2:3:4:5:6:7:8:9',
    '1:2:3::4:5:6:7:8:9',
    '1:2:3::4:5::7:8',
    '1::1.2.256.4',
    '1::1.2.3.256',
    '1::1.2.3.300',
    '1::1.2.3.900',
    '1::1.2.300.4',
    '1::1.2.900.4',
    '1::1.256.3.4',
    '1::1.300.3.4',
    '1::1.900.3.4',
    '1::256.2.3.4',
    '1::260.2.3.4',
    '1::2::3',
    '1::300.2.3.4',
    '1::300.300.300.300',
    '1::3000.30.30.30',
    '1::400.2.3.4',
    '1::5:1.2.256.4',
    '1::5:1.2.3.256',
    '1::5:1.2.3.300',
    '1::5:1.2.3.900',
    '1::5:1.2.300.4',
    '1::5:1.2.900.4',
    '1::5:1.256.3.4',
    '1::5:1.300.3.4',
    '1::5:1.900.3.4',
    '1::5:256.2.3.4',
    '1::5:260.2.3.4',
    '1::5:300.2.3.4',
    '1::5:300.300.300.300',
    '1::5:3000.30.30.30',
    '1::5:400.2.3.4',
    '1::5:900.2.3.4',
    '1::900.2.3.4',
    '1:::3:4:5',
    '2001:0000:1234: 0000:0000:C1C0:ABCD:0876',
    '2001:0000:1234:0000:00001:C1C0:ABCD:0876',
    '2001:0000:1234:0000:0000:C1C0:ABCD:0876  0',
    '2001:1:1:1:1:1:255Z255X255Y255',
    '2001::FFD3::57ab',
    '2001:DB8:0:0:8:800:200C:417A:221',
    '2001:db8:85a3::8a2e:37023:7334',
    '2001:db8:85a3::8a2e:370k:7334',
    '3ffe:0b00:0000:0001:0000:0000:000a',
    '3ffe:b00::1::a',
    ':',
    ':1.2.3.4',
    ':1111:2222:3333:4444:5555:6666:1.2.3.4',
    ':1111:2222:3333:4444:5555:6666:7777:8888',
    ':1111:2222:3333:4444:5555:6666:7777::',
    ':1111:2222:3333:4444:5555:6666::',
    ':1111:2222:3333:4444:5555:6666::8888',
    ':1111:2222:3333:4444:5555::',
    ':1111:2222:3333:4444:5555::1.2.3.4',
    ':1111:2222:3333:4444:5555::7777:8888',
    ':1111:2222:3333:4444:5555::8888',
    ':1111:2222:3333:4444::',
    ':1111:2222:3333:4444::1.2.3.4',
    ':1111:2222:3333:4444::5555',
    ':1111:2222:3333:4444::6666:1.2.3.4',
    ':1111:2222:3333:4444::6666:7777:8888',
    ':1111:2222:3333:4444::7777:8888',
    ':1111:2222:3333:4444::8888',
    ':1111:2222:3333::',
    ':1111:2222:3333::1.2.3.4',
    ':1111:2222:3333::5555',
    ':1111:2222:3333::5555:6666:1.2.3.4',
    ':1111:2222:3333::5555:6666:7777:8888',
    ':1111:2222:3333::6666:1.2.3.4',
    ':1111:2222:3333::6666:7777:8888',
    ':1111:2222:3333::7777:8888',
    ':1111:2222:3333::8888',
    ':1111:2222::',
    ':1111:2222::1.2.3.4',
    ':1111:2222::4444:5555:6666:1.2.3.4',
    ':1111:2222::4444:5555:6666:7777:8888',
    ':1111:2222::5555',
    ':1111:2222::5555:6666:1.2.3.4',
    ':1111:2222::5555:6666:7777:8888',
    ':1111:2222::6666:1.2.3.4',
    ':1111:2222::6666:7777:8888',
    ':1111:2222::7777:8888',
    ':1111:2222::8888',
    ':1111::',
    ':1111::1.2.3.4',
    ':1111::3333:4444:5555:6666:1.2.3.4',
    ':1111::3333:4444:5555:6666:7777:8888',
    ':1111::4444:5555:6666:1.2.3.4',
    ':1111::4444:5555:6666:7777:8888',
    ':1111::5555',
    ':1111::5555:6666:1.2.3.4',
    ':1111::5555:6666:7777:8888',
    ':1111::6666:1.2.3.4',
    ':1111::6666:7777:8888',
    ':1111::7777:8888',
    ':1111::8888',
    ':2222:3333:4444:5555:6666:1.2.3.4',
    ':2222:3333:4444:5555:6666:7777:8888',
    ':3333:4444:5555:6666:1.2.3.4',
    ':3333:4444:5555:6666:7777:8888',
    ':4444:5555:6666:1.2.3.4',
    ':4444:5555:6666:7777:8888',
    ':5555:6666:1.2.3.4',
    ':5555:6666:7777:8888',
    ':6666:1.2.3.4',
    ':6666:7777:8888',
    ':7777:8888',
    ':8888',
    '::-1',
    '::.',
    '::..',
    '::...',
    '::...4',
    '::..3.',
    '::..3.4',
    '::.2..',
    '::.2.3.',
    '::.2.3.4',
    '::1...',
    '::1.2..',
    '::1.2.256.4',
    '::1.2.3.',
    '::1.2.3.256',
    '::1.2.3.300',
    '::1.2.3.900',
    '::1.2.300.4',
    '::1.2.900.4',
    '::1.256.3.4',
    '::1.300.3.4',
    '::1.900.3.4',
    '::1111:2222:3333:4444:5555:6666::',
    '::2222:3333:4444:5555:6666:7777:1.2.3.4',
    '::2222:3333:4444:5555:6666:7777:8888:',
    '::2222:3333:4444:5555:6666:7777:8888:9999',
    '::2222:3333:4444:5555:7777:8888::',
    '::2222:3333:4444:5555:7777::8888',
    '::2222:3333:4444:5555::1.2.3.4',
    '::2222:3333:4444:5555::7777:8888',
    '::2222:3333:4444::6666:1.2.3.4',
    '::2222:3333:4444::6666:7777:8888',
    '::2222:3333::5555:6666:1.2.3.4',
    '::2222:3333::5555:6666:7777:8888',
    '::2222::4444:5555:6666:1.2.3.4',
    '::2222::4444:5555:6666:7777:8888',
    '::256.2.3.4',
    '::260.2.3.4',
    '::300.2.3.4',
    '::300.300.300.300',
    '::3000.30.30.30',
    '::3333:4444:5555:6666:7777:8888:',
    '::400.2.3.4',
    '::4444:5555:6666:7777:8888:',
    '::5555:',
    '::5555:6666:7777:8888:',
    '::6666:7777:8888:',
    '::7777:8888:',
    '::8888:',
    '::900.2.3.4',
    ':::',
    ':::1.2.3.4',
    ':::2222:3333:4444:5555:6666:1.2.3.4',
    ':::2222:3333:4444:5555:6666:7777:8888',
    ':::3333:4444:5555:6666:7777:8888',
    ':::4444:5555:6666:1.2.3.4',
    ':::4444:5555:6666:7777:8888',
    ':::5555',
    ':::5555:6666:1.2.3.4',
    ':::5555:6666:7777:8888',
    ':::6666:1.2.3.4',
    ':::6666:7777:8888',
    ':::7777:8888',
    ':::8888',
    '::ffff:192x168.1.26',
    '::ffff:2.3.4',
    '::ffff:257.1.2.3',
    'FF01::101::2',
    'FF02:0000:0000:0000:0000:0000:0000:0000:0001',
    'XXXX:XXXX:XXXX:XXXX:XXXX:XXXX:1.2.3.4',
    'XXXX:XXXX:XXXX:XXXX:XXXX:XXXX:XXXX:XXXX',
    'a::b::c',
    'a::g',
    'a:a:a:a:a:a:a:a:a',
    'a:aaaaa::',
    'a:b',
    'a:b:c:d:e:f:g:0',
    'fe80:0000:0000:0000:0204:61ff:254.157.241.086',
    'ffff:',
    'ffff::ffff::ffff',
    'ffgg:ffff:ffff:ffff:ffff:ffff:ffff:ffff',
    'ldkfj',
    '::/129',
    '1000:://32',
    '::/',
    '0:0:0:0:0:0:0::',
    '0:0:0:0:0:0::',
    '0:0:0:0:0::',
    '0:0:0:0::',
    '0:0:0::',
    '0:0::',
    '0::',
    '0:a:b:c:d:e:f::',
    '1111:2222:3333:4444:5555:6666:123.123.123.123',
    '1111:2222:3333:4444:5555:6666:7777::',
    '1111:2222:3333:4444:5555:6666::8888',
    '1111:2222:3333:4444:5555::123.123.123.123',
    '1111:2222:3333:4444:5555::7777:8888',
    '1111:2222:3333:4444::6666:7777:8888',
    '1111:2222:3333::5555:6666:7777:8888',
    '1111:2222::4444:5555:6666:7777:8888',
    '1111::3333:4444:5555:6666:7777:8888',
    '::2222:3333:4444:5555:6666:7777:8888',
    '1:2:3:4:5:6::8',
    '1:2:3:4:5::7:8',
    '1::2:3:4:5:6:7',
    '2001:0db8:0000:0000:0000::1428:57ab',
    '2001::CE49:7601:2CAD:DFFF:7C94:FFFE',
    '2001::CE49:7601:E866:EFFF:62C3:FFFE',
    '2608:af09:30::102a:7b91:c239:baff',
    '::0',
    '::0:0',
    '::0:0:0',
    '::0:0:0:0',
    '::0:0:0:0:0',
    '::0:0:0:0:0:0',
    '::0:0:0:0:0:0:0',
    '::0:a:b:c:d:e:f',
    'a:b:c:d:e:f:0::',
    'a:0::0:b',
    'a:0:0::0:b',
    'a:0::0:0:b',
    'a::0:0:b',
    'a::0:b',
    'a:0::b',
    'a:0:0::b',
    '::ffff:0c22:384e',
    '::2:3:4:5:6:7:8',
    '2001:0DB8::CD30:0:0:0:0/60',
    '2001:0db8:0:0::1428:57ab',
    '0:1:2:3:4:5:6:7/001',
]

Test Cases – Dual-stack

let ipv6HybridValid = [
    '0:0:0:0:0:0:13.1.68.3',
    '0:0:0:0:0:FFFF:129.144.52.38',
    '::FFFF:129.144.52.38',
    '::ffff:12.34.56.78',
    '::ffff:192.0.2.128',
    '::ffff:192.168.1.1',
    '::ffff:192.168.1.26',
    '::123.123.123.123',
    '::13.1.68.3',
]

let ipv6HybridInvalid = [
    '1111:2222:3333:4444:5555::123.123.123.123',
    '1111:2222:3333:4444::123.123.123.123',
    '1111:2222:3333:4444::6666:123.123.123.123',
    '1111:2222:3333::123.123.123.123',
    '1111:2222:3333::5555:6666:123.123.123.123',
    '1111:2222:3333::6666:123.123.123.123',
    '1111:2222::123.123.123.123',
    '1111:2222::4444:5555:6666:123.123.123.123',
    '1111:2222::5555:6666:123.123.123.123',
    '1111:2222::6666:123.123.123.123',
    '1111::123.123.123.123',
    '1111::3333:4444:5555:6666:123.123.123.123',
    '1111::4444:5555:6666:123.123.123.123',
    '1111::5555:6666:123.123.123.123',
    '1111::6666:123.123.123.123',
    '1:2:3:4:5:6:1.2.3.4',
    '1:2:3:4:5::1.2.3.4',
    '1:2:3:4::1.2.3.4',
    '1:2:3:4::5:1.2.3.4',
    '1:2:3::1.2.3.4',
    '1:2:3::5:1.2.3.4',
    '1:2::1.2.3.4',
    '1:2::5:1.2.3.4',
    '1::1.2.3.4',
    '1::5:1.2.3.4',
    '1::5:11.22.33.44',
    '::4444:5555:6666:123.123.123.123',
    '::5555:6666:123.123.123.123',
    '::6666:123.123.123.123',
    'fe80:0:0:0:204:61ff:254.157.241.86',
    'fe80::204:61ff:254.157.241.86',
    'fe80::217:f2ff:254.7.237.98',
]

I may have missed mentioning a few points/goals above, but if I notice such, I will try to edit and update.

If anything is unclear about the requirements, please inquire in comments.

I already have written a complex regular expression in an attempt to meet these goals, but esp. due to the incompleteness of test-cases, I’m still unsure if the goals are achieved. I will try to post my solution as an answer below, for anyone who encountered the same issues as I have.

This question was intended to be a Q&A pair (self-answering), but I’m also asking the community about the correctness of the test-cases and my own solutions.

If any bugs/errata/issues are discovered after posting, I will try to update my question and answer accordingly, attempting to address those.

`import { jwtDecode } from “jwt-decode”;
import { createContext, useEffect, useState } from “react”;
import { Navigate } from “react-router-dom”;

export let UserToken = createContext(null);

export default function UserTokenProvider({ children }) {

let [isLogin, setIsLogin] = useState(null)
let [UserId, setUserId] = useState(null)

if (localStorage.getItem('UserToken') !== null){<Navigate to={"/Login"}></Navigate>}else{}
useEffect(() => {
    if (localStorage.getItem('UserToken') !== null) {
        let { id } = jwtDecode(localStorage.getItem('UserToken'));
        setUserId(id)}
}, [])
// console.log(isLogin);
return <UserToken.Provider value={{ isLogin, setIsLogin, UserId }}>
    {children}
</UserToken.Provider>

}`

I I tried a lot and searched on the Internet but did not find what I was looking for

Hi i wanted to extract some information about S&P 500 companies(website used https://www.sec.gov/edgar/search/) using puppeteer for a small side-project.

const getData = async () => {
  const browser = await puppeteer.launch({
    headless: false,
    defaultViewport: null,
  });

  const page = await browser.newPage();

  await page.goto("https://www.sec.gov/edgar/search/#/category=custom&entityName=0001551152&forms=10-K%252C11-K", {
    waitUntil: "domcontentloaded",
  });

  const data = await page.evaluate(() => {
    const tableBody = document.querySelector('tbody');
    const records = [];

    // Example: Extracting text content from each row in the table
    tableBody.querySelectorAll('tr').forEach((row) => {
      const rowData = [];
      row.querySelectorAll('td').forEach((cell) => {
        rowData.push(cell.textContent.trim());
      });
      records.push(rowData);
    });

    return records;
  });

  console.log(data);

  await browser.close();
};

getData();

I am getting the tablebody but when i am not able to parse.

I’ve loaded bunch of configs and want to generate checkboxes based on loaded configs. The problem i’m having is that the first element does not get event handler attached to it, while others do. Any thoughts?

let selectedProducts = [];
function addToSelector(name,key){
    let selectorCode = `<div class="form-check">
                            <input class="form-check-input" type="checkbox" value="${key}" id="${key}">
                            <label class="form-check-label" for="${key}">${name}</label>
                        </div>`;
    let productElem = document.getElementById("products");
    productElem.innerHTML += selectorCode;
    let checkboxElem = document.getElementById(key);
    log(checkboxElem);
    checkboxElem.addEventListener("click", (e) => {
        log(`Click on checkbox: ${key} with a name ${name}`);
        let target = e.target;
        if (target.checked){
            selectedProducts.push(key);
        }
        else {
            selectedProducts = selectedProducts.splice(selectedProducts.indexOf(key), 1);
        }
        
    });
}

Log reveals two created elements:

Event handlers for both:

I have a protected route using middleware which only allows access if the token sent by the client matches with the one that exists in the database. The issue that i am facing is even after successful token match the middleware is not allowing access to the protected route. The middleware code works fine by protecting the route if user tries to access it directly or without/wrong token. But when request with correct token is sent it only return status code 200 and not redirect to profile page. Wondering what is wrong?

Route:

Route::middleware('token_verify')->group(function () {
  Route::get('/profile', [AppHttpControllersUserProfileController::class, 'profile_page']);
});

Controller:

namespace AppHttpControllersUser;

use IlluminateHttpRequest;
use AppHttpControllersController;
use AppModelsUser;

class ProfileController extends Controller {

public function profile_page() {
    return view('partials.user.profile_page');
  }

}

Middleware:

namespace AppHttpMiddleware;

use Closure;
use IlluminateHttpRequest;
use AppModelsUser;

class TokenVerify
{
    public function handle(Request $request, Closure $next)
    {        

        $token = $request->bearerToken();

        if (!$token) {
            return response()->json(['message' => 'Unauthorized No Token'], 401);          
        }

        $user = User::where('userToken', $token)->first();

        if (!$user) {
            return response()->json(['message' => 'Unauthorized Invalid Token'], 401);
            
        } 

        return $next($request);

    }
}

Client Request in Javascript:

function showProfile() {

  const baseUrl = `www.mywebsite.com`;
  const token = localStorage.getItem('userToken');

  if(!token) {
    window.location.href = `${baseUrl}` + '/login';
    return;
  }
    const requestOptions = {
        method: 'GET',
        headers: {
          'Content-Type': 'application/json',
          'Authorization': `Bearer ${token}`
        }
      };
    
      // Make a GET request using Fetch API
      fetch(`${baseUrl}/profile`, requestOptions).then(response => {      
          if(response.status === 200) {
            console.log(`response ok`);        
          } else if(response.status === 401) {
            window.location.href = `${baseUrl}` + '/login';
          } 
        }).then(data => {      
          console.log(data);
        }).catch(error => {
          console.error(error);
        });
}

App.jsx

import { useState } from 'react';
import './App.css';
import { FaFacebook } from 'react-icons/fa';
import { Link, Routes, Route } from 'react-router-dom';


function App() {
  const [username, setUsername] = useState('');
  const [password, setPassword] = useState('');

      
  return (
    <div className='outer'>
      <div className='inner'>
        <h2 className='heading'>Instagram</h2>
        <input
          id="username"
          type="text"
          placeholder='Phone number, username, or email'
          value={username}
          onChange={(e) => {
            setUsername(e.target.value);
          }}
        />
        <input
          id="password"
          type="password"
          placeholder="Password"
          value={password}
          onChange={(e) => { setPassword(e.target.value) }}
        />
        <button className='btn'>Login</button>
        <p style={{ margin: '19px 37px', color: '#ccc', }}>-----------------------OR-----------------------</p>
        <a href="https://facebook.com" target="_blank" rel="noopener noreferrer" className="link">
          <FaFacebook size={18} color="#1877f2" className='icon' style={{ marginRight: '8px' }} />
          Login with Facebook
        </a>

        <a href="/" style={{ color: 'black', margin: '10px 40px 0 129px' }}>forgot password?</a>
      </div>

      {/* Routes should be wrapped around your content */}

      <div className='second-div'>
        Don't have an account? <Link to="/signup">Sign up</Link>
      </div>
    </div>
  );
}

export default App;

Main.jsx

import React from 'react'
import ReactDOM from 'react-dom/client'
import App from './App.jsx'
import './index.css'
import { BrowserRouter,Routes,Route } from 'react-router-dom'
import Signup from '../component/Signup.jsx'

<Routes>
  {/* Use Route to render content when the path matches */}
  <Route path="/signup" element={<Signup />} />

</Routes>


ReactDOM.createRoot(document.getElementById('root')).render(
  <BrowserRouter>
    <App />
  </BrowserRouter>
)

Singup.jsx

import React from 'react'

export default function Signup() {
    return (
        <h1 style={{backgroundColor:'green'}}>hey folks you are in singup page</h1>
    )
}

Trying to create instagram login clone, these are my files what’s happening is when i click on the Signup link
(<div className='second-div'>Don't have an account? <Link to="/signup">Sign up</Link></div>) in the App.jsx it is showing that the url is changed in address bar but it isn’t rendering the signup component. And i can’t seem to find why i am very new to this react routing thing and appreciate any help.

I’m using AWS param store to load a string dynamically. This string contains string literals, and I’m trying to use lodash _.template to evaluate those literals at runtime.

The problem I’m having is not being able to pass this template as a string parameter to another method. When I console.log it, it writes it just fine.

// string coming in: 'hello ${ user }!'
console.log(compiled({ 'user': 'pebbles' }));
await sendSMSParamStore(
  Phone, 
  compiled({ 'user': 'pebbles' }));

Outputs:

Console.log:

2024-02-04T15:30:20.995Z 66687ba6-42ea-4a2b-9578-e4270ff68f0c INFO hello
pebbles!

From within sendSMSParamStore:

2024-02-04T15:30:20.996Z 66687ba6-42ea-4a2b-9578-e4270ff68f0c INFO [sendSMS2] Sending SMS message : [Function (anonymous)] { source:
‘function(obj) {n’ +
‘obj || (obj = {});n’ +
“var __t, __p = ”;n” +
‘with (obj) {n’ +
“__p += ‘hello ‘ +n” +
“((__t = ( user )) == null ? ” : __t) +n” +
“‘!’;n” +
‘n’ +
‘}n’ +
‘return __pn’ +
‘}’ }

I tried to use JSON.stringify(), but that didn’t work either.

Any idea how can I send this as a string to another method?