Invalid_client when using sign in with apple in browser

I am new to sign in wtih apple. When I trying to call sign in method, it will show a popup window, and show me the invalid_client error, here is my steps:

  1. create app id: com.yuhan.test.app
    create app id
  2. create service id: com.yuhan.test.service
    create service id
  3. configure my domain and returnURLs
    domain: tts.perterpon.com
    returnURL: https://tts.perterpon.com/login
    domain and returnURLs
  4. create keys for sign in with apple.
    keys
  5. code html, you can visit it here: https://tts.perterpon.com/login.html

Does anybody has some ideas? Thank you so so so much.

<html lang="en">
  <head>
    <meta charset="UTF-8">
    <meta name="description" content="">
    <meta name="keywords" content="">
    <title>Apple Login</title>
  </head>
  <body>
    <script type="text/javascript"
            src="https://appleid.cdn-apple.com/appleauth/static/jsapi/appleid/1/en_US/appleid.auth.js"></script>
    <div id="appleid-signin"
         data-color="black"
         data-border="true"
         data-type="sign in"></div>
    <script type="text/javascript">
    AppleID.auth.init({
      clientId: 'com.yuhan.test.service',
      scope: 'name email',
      redirectURI: 'https://tts.perterpon.com/login',
      usePopup: true
    });

    const buttonElementNew = document.getElementById('appleid-signin');
    buttonElementNew.addEventListener('click', async () => {
      try {
        const data = await AppleID.auth.signIn()

        console.log('Try/Catch Data', data.authorization.id_token);
        const formData = new FormData();
        formData.append("token", data.authorization.id_token);
        await fetch("", {
            method: "POST",
            body: formData,
        });          
        // Handle successful response.
      } catch (error) {
        // Handle error.
      }
    });
    </script>
  </body>
</html>

How can Redux-Toolkit Query send a variable to request headers?

I currently want to add meta data to the RKT Query request header and it’s a variable. I want to pass it from the API request.

export const api = createApi({
  reducerPath: 'api',
  baseQuery: fetchBaseQuery({
    baseUrl: '/api/',
    prepareHeaders: (headers, api) => {
      const { apiSource } = api
      // currently want to pass apiSource from the request somewhere, 
      // then get this value and add it to header
      headers.set('api-source', apiSource);
      return headers;
    },
  }),
  endpoints: (builder) => ({
    getUsers: builder.query({
      query: () => `/getUsers`,
    }),
  }),
});

I want to have some ways I can pass it from the request, like:

// but this is not working now, I can't pass the variable
const { data } = useGetUsers(body, {apiSource})

On my scenario, I have multiple APIs, not only this getUsers. That’s why I want to find a way on prepareHeaders.

Is there a way can to this?

How can RTK Query send an variable to header

I currently want to add a meta data to the RKT Query header and it’s an variable and want to pass it from the api request.

export const api = createApi({
    reducerPath: 'api',
    baseQuery: fetchBaseQuery({
        baseUrl: '/api/',
        prepareHeaders: (headers, api) => {
            const {apiSource} = api
            // currently want to pass apiSource from the request somewhere, 
            // then get this value and add it to header
            headers.set('api-source', apiSource);
            return headers;
        },
    }),
    endpoints: (builder) => ({
        getUsers: builder.query({
            query: () => `/getUsers`,
        }),
    }),
});

So want to have some ways can pass it from the request, like

// but this is not working now, I can't pass the variable
const { data } = useGetUsers(body, {apiSource})

Is there a way can to this?

How to copy google map marker design?

I am writing a JavaScript code using Google Map API. I want to display specific places using pins and I want the pins to be like in the actual google maps. How do I achieve it?

enter image description here

Basically, what I’m trying to do is draw every location in my array of static locations and that’s it.

Example code:

const map = new google.maps.Map(document.getElementById("map"), { zoom: 4, { lat: 8.3450235, lng: 124.430038}});
let places = [
    {
        displayName: 'Bukidnon Province Welcome Marker',
        lat: 8.395121,
        long: 124.7823285
    },
    {
        displayName: 'Ogaong View Deck',
        lat: 8.395121,
        lng: 124.7823285
    }
];

places.forEach((place) => {
    new google.maps.Marker({
        position: { lat: place.lat, lng: place.lng },
        map,
        title: "Hello World!",
    });
});

JS execution in Chromium slower than PhantomJS

I’m migrating from PhantomJS to Chromium headless (via Puppeteer) for HTML/CSS manipulation. Surprisingly, the JS execution in Chromium are is about 10x slower than in PhantomJS.

  • The code primarily iterates through the DOM and calls simple functions (I have commented out browser API calls)
  • JS execution is direct in PhantomJS
  • In Chromium, TypeScript is compiled to JS using webpack (not minified/obfuscated)
  • Performance testing shows operations are ~10x slower in Chromium

Additional Observation

The Puppeteer auto-downloaded Chromium binary performs about 2x faster than my locally built version on Linux. I am building with is_debug = false.

Questions

  1. Why is Chromium significantly slower than PhantomJS for these operations?
  2. What could explain the performance difference between the auto-downloaded and locally built Chromium?

Angular stand alone components with nested child and routing

I am refactoring my existing code base to standalone architecture. I am facing issue with the routing. Below is my current route module

  const ROUTES: Routes = [
  {
    path: '',
    component: ParentComponent,
    children: [
      {
        path: 'alt',
        component: HomePageComponent,
        children: [
          {
            path: 'abc',
            loadChildren: () =>
              import(
                '<path to ABC Module>'
              ).then((m) => m.AbcModule)
          },
          {
            path: 'xyz',
            loadChildren: () =>
              import('path to xyz module').then(
                (m) => m.XyzModule
              )
          },
          
        ]
      }
    ]
  }
];

ABC module routing

  const ROUTES: Routes = [
  {
    path: '',
    component: AbcComponent,
    children: [
      {
        path: 'Child1',
        component: Child1Component
      },
      {
        path: 'child2',
        component: Child2Component
      },
      {
        path: '',
        pathMatch: 'full',
        redirectTo: 'child1'
      }
    ]
  }
];

The above two are part of my MFE and have a side bar which is in the parent project with the following routing configuration

[
    {
      label: 'ABC',
      route: `/alt/abc`,
    },
    {
      label: 'Xyz',
      route: `/alt/xyz`,
    }
  ];

This is working as expected in the existing ngModule architecture. Issue comes when I changed it to standalone architecture with the following routes and main.ts

app.route.ts

export const APP_ROUTES: Routes = [
  {
    path: '',
    component: AppComponent,
    children: [
      {
        path: 'alt',
        loadChildren: () =>
          import('<path to parent component>').then((m) => m.PARENT_ROUTES)
      }
    ]
  }
];

Parent Component route

export const PARENT_ROUTES: Routes = [
  {
    path: '',
    loadComponent: () =>
      import('./parent.component').then((m) => m.ParentComponent),
    children: [
      {
        path: 'abc',
        loadChildren: () =>
          import('<path to ABC route>').then((m) => m.ROUTES)
      },
      {
        path: '',
        redirectTo: 'abc',
        pathMatch: 'full'
      },
      {
        path: '**',
        redirectTo: 'error',
        pathMatch: 'full'
      }
    ]
  }
];

ABC Component Route

export const ROUTES: Routes = [{
  path: '',
  loadComponent: () =>
  import('<Path to ABC component >').then(
    (m) => m.ABCComponent
  ),
  children: [
    {
        path: '',
        pathMatch: 'full',
        redirectTo: 'child1'
      },

    {
      path: 'child1',
      loadComponent: () =>
        import('path to child 1 component').then((m) => m.Child 1 component),
    }
  ]
}
];

I just added the routes only for ABC and its child child1.

Expectation and Current behaviour

When the user clicks on ABC from the side bar it should navigate to the ABC component and load its child child1 with the route alt/abc/child1. but its navigating only till alt/abc. I have added <router-outlet></router-outlet> in ParentCOmponent, ABC components as well.

main.ts

bootstrapApplication(AppComponent, appConfig)

Also I have added provideRouter(APP_ROUTES) in app.config.ts.

A new web framework Canonicaljs [closed]

I heard about a new web framework called CanonicalJS, I would like to download it and try it out. where could I find it ?

I tried canonicaljs.com but it seems they didn’t put the download link yet, after downloading it, I would like to create a hello word project, what steps should I follow?

I tried the following steps:

  1. Create a folder under www I named it hello_word
  2. I unzipped canonicaljs inside it
  3. I created an index.html file with the html, head and body tags in it

What else?

placing clickable element on top of google map (created with google maps api) and beneath infoWindow

i’m creating a map with google maps api. i have a custom button that i need to hover over top of the map, but i also need for any infoWindows that are opened to be displayed in a higher stacking order than this button. i have tried creating it as an overlay, but when i do, it is displayed in the vertical center of the map due to one of the parent div’s transform. i tried adding it to the maps controls array and, it is displayed on top of the infoWindow.

This is the closest I’ve come where I insert it into the layer with the infoWindow just beneath it in the stacking order. While this displays correctly, all clicks are intercepted by the map object.

  _setupMapModeOverlay() {
    if (!this.isMobile) return;
    const $overlay = document.createElement('div');
    $overlay.className = 'map-mode-overlay-bar';
    $overlay.innerHTML = `<p><strong>Enhanced Map View</strong> active. <button aria-label="exit map view">Back to default page view</button></p>`;

    google.maps.event.addListenerOnce(this.map, 'idle', () => {
      const gmStyleDiv = this.$mapwrap.querySelector(
        '.gm-style > div:nth-child(1)'
      );
      if (gmStyleDiv) {
        gmStyleDiv.appendChild($overlay);
        google.maps.OverlayView.preventMapHitsFrom($overlay);
        google.maps.OverlayView.preventMapHitsAndGesturesFrom($overlay);
        console.log('Map mode overlay added to the target map pane.');
        $overlay.addEventListener('click', (e) => {
          e.stopPropagation(); // Prevent map click event
          document.body.classList.remove('isMapMode');
        });
      } else {
        console.warn('Could not find the target map pane.');
      }
    });
  }

I’m kind of out of ideas – anyone have any suggestions?

How do I process an image as a R2Object Body in areact-router loader function?

I have built a react-router “framework mode” application to test some Cloudflare bindings. The KV and D1 bindings work great and I was able to pull a text file from R2 in loader() and process it fine. I am not able to come up with the secret sauce to work with an image file however. I have this working fine in a React SPA, the Cloudflare fetch() just processes the file in client mode. But on the server side, there is no URL.createObjectURL().

My current code is pasted below, with some typescript errors inline. What do I need to do to make the image file available in component code?

import type { Route } from "./+types/r2_image";

export function meta({ }: Route.MetaArgs) {
  return [
    { title: "Data Tests: R2 image file" },
    { name: "description", content: "Testing cloudflare bindings." },
  ];
}

export async function loader({ context }: Route.LoaderArgs) {

  // Type 'R2ObjectBody | null' is not assignable to type 'R2ObjectBody'.
  // Type 'null' is not assignable to type 'R2ObjectBody'.ts(2322)
  //    vvvvvvv
  const r2Image: R2ObjectBody = await context.cloudflare.env.CROMR2.get('conan.png');

  var image = await r2Image.blob();
  return { data: image };

}

export default function R2Image({ loaderData }: Route.ComponentProps) {

  // Types of property 'arrayBuffer' are incompatible.
  //   Type 'undefined' is not assignable to type '() => Promise<ArrayBuffer>'.ts(2345)
  //                                vvvvvvvvvv
  const image = URL.createObjectURL(loaderData.data);
  // or
  // const image = URL.createObjectURL(loaderData.arrayBuffer);


  return (
    <>
      <h1>R2 Image File</h1>
      <div>
        <img src={image} />
      </div>
    </>
  )
}

This code dumps an error to the console. I believe it is due to the type mismatch in the argument to createObjectUrl()?

Failed to execute 'createObjectURL' on 'URL': Overload resolution failed.

Note: The cloudflare worker fetch() does not seem to be available to clientLoader(). Plus, I would rather get this right from the server side.

Getting 401 on reddit auth

const encodedHeader = Buffer.from(
      `${process.env.REDDIT_CLIENT_ID}:${process.env.REDDIT_CLIENT_SECRET}`,
    ).toString('base64');
    
    const response = await fetch(`https://www.reddit.com/api/v1/access_token`, {
      method: 'POST',
      body: `grant_type=authorization_code&code=${code}&redirect_uri=http://localhost:5173/auth/reddit/callback`,
      headers: {
        authorization: `Basic ${encodedHeader}`,
        'Content-Type': 'application/x-www-form-urlencoded',
        'User
headers: {
        authorization: `Basic ${encodedHeader}`,
        'Content-Type': 'application/x-www-form-urlencoded',
        'User-Agent': process.env.REDDIT_USER_AGENT || '',
      },
    });
    const body = await response.json();
    console.log(body);

im trying to authenticate reddit with my reactjs app but im getting 401 on this api call, any resources i can refer to ?
P.S i have double checked by REDDIT_CLIENT_ID and REDDIT_CLIENT_SECRET and they are correct.

Logo not aligning with Nav Bar

I’ve spent hours and days on this bug I’ve come across. Just a heads up, I’m using Bootstrap for the framework for a simpler workflow. The problem started once I added the logo to the Nav bar for my website. I’ve tried implementing different functions, but they never worked. In the index.html file, I added:

    <nav class="navbar-expand-lg bg-custom">

Which didn’t work either, here’s the index.html code:

I’ll also attach the CSS code:

<!doctype html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Real Estate - Home</title>
    <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-QWTKZyjpPEjISv5WaRU9OFeRpok6YctnYmDr5pNlyT2bRjXh0JMhjY6hW+ALEwIH" crossorigin="anonymous">
    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
    <link href="https://fonts.googleapis.com/css2?family=Alice&family=Quicksand:wght@400;600&display=swap" rel="stylesheet">
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/font/bootstrap-icons.min.css">
    <link rel="stylesheet" href="css/style.css">
</head>
  <body>
    <nav class="navbar-expand-lg bg-custom">
        <div class="container-fluid">
          <a class="navbar-brand" href="index.html"><img src="images/ai-home-america-realty-logo.svg" alt="Home America Realty" class="logo"</a>
          <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
            <span class="navbar-toggler-icon"></span>
          </button>
          <div class="collapse navbar-collapse" id="navbarSupportedContent">
            <ul class="navbar-nav me-auto mb-2 mb-lg-0 nav nav-underline">
              <li class="nav-item">
                <a class="nav-link" href="index.html">Home</a>
              </li>
              <li class="nav-item">
                <a class="nav-link" href="about.html">About</a>
              </li>
              <li class="nav-item">
                <a class="nav-link" href="services.html">Services</a>
              </li>
              <li class="nav-item">
                <a class="nav-link" href="agents.html">Agents</a>
              </li>
              <li class="nav-item">
                <a class="nav-link" href="contact.html">Contact</a>
              </li>
            </ul>
            <form class="d-flex" role="search">
              <input class="form-control me-2" type="search" placeholder="Search" aria-label="Search">
              <button class="btn btn-outline-success" type="submit">Search</button>
            </form>
          </div>
        </div>
      </nav>

      <footer class="footer mt-auto-py3 fixed-bottom">
        <div class="container text-center">
         
        </div>
      </footer>

      <link rel="canonical" href="https://getbootstrap.com/docs/5.3/examples/sticky-footer-navbar/">

    

    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@docsearch/css@3">

<link href="style.css" rel="stylesheet">

    <style>
      .bd-placeholder-img {
        font-size: 1.125rem;
        text-anchor: middle;
        -webkit-user-select: none;
        -moz-user-select: none;
        user-select: none;
      }

      @media (min-width: 768px) {
        .bd-placeholder-img-lg {
          font-size: 3.5rem;
        }
      }

      .b-example-divider {
        width: 100%;
        height: 3rem;
        background-color: rgba(0, 0, 0, .1);
        border: solid rgba(0, 0, 0, .15);
        border-width: 1px 0;
        box-shadow: inset 0 .5em 1.5em rgba(0, 0, 0, .1), inset 0 .125em .5em rgba(0, 0, 0, .15);
      }

      .b-example-vr {
        flex-shrink: 0;
        width: 1.5rem;
        height: 100vh;
      }

      .bi {
        vertical-align: -.125em;
        fill: currentColor;
      }

      .nav-scroller {
        position: relative;
        z-index: 2;
        height: 2.75rem;
        overflow-y: hidden;
      }

      .nav-scroller .nav {
        display: flex;
        flex-wrap: nowrap;
        padding-bottom: 1rem;
        margin-top: -1px;
        overflow-x: auto;
        text-align: center;
        white-space: nowrap;
        -webkit-overflow-scrolling: touch;
      }

      .btn-bd-primary {
        --bd-violet-bg: #3333ff;
        --bd-violet-rgb: 112.520718, 44.062154, 249.437846;

        --bs-btn-font-weight: 600;
        --bs-btn-color: var(--bs-white);
        --bs-btn-bg: var(--bd-violet-bg);
        --bs-btn-border-color: var(--bd-violet-bg);
        --bs-btn-hover-color: var(--bs-white);
        --bs-btn-hover-bg: #6528e0;
        --bs-btn-hover-border-color: #6528e0;
        --bs-btn-focus-shadow-rgb: var(--bd-violet-rgb);
        --bs-btn-active-color: var(--bs-btn-hover-color);
        --bs-btn-active-bg: #5a23c8;
        --bs-btn-active-border-color: #5a23c8;
      }

      .bd-mode-toggle {
        z-index: 1500;
      }

      .bd-mode-toggle .dropdown-menu .active .bi {
        display: block !important;
      }
    </style>

      
      <link href="style.css" rel="stylesheet">
    </head>
    <body class="d-flex flex-column h-100">
      <svg xmlns="http://www.w3.org/2000/svg" class="d-none">
        <symbol id="check2" viewBox="0 0 16 16">
          <path d="M13.854 3.646a.5.5 0 0 1 0 .708l-7 7a.5.5 0 0 1-.708 0l-3.5-3.5a.5.5 0 1 1 .708-.708L6.5 10.293l6.646-6.647a.5.5 0 0 1 .708 0z"/>
        </symbol>
        <symbol id="circle-half" viewBox="0 0 16 16">
          <path d="M8 15A7 7 0 1 0 8 1v14zm0 1A8 8 0 1 1 8 0a8 8 0 0 1 0 16z"/>
        </symbol>
        <symbol id="moon-stars-fill" viewBox="0 0 16 16">
          <path d="M6 .278a.768.768 0 0 1 .08.858 7.208 7.208 0 0 0-.878 3.46c0 4.021 3.278 7.277 7.318 7.277.527 0 1.04-.055 1.533-.16a.787.787 0 0 1 .81.316.733.733 0 0 1-.031.893A8.349 8.349 0 0 1 8.344 16C3.734 16 0 12.286 0 7.71 0 4.266 2.114 1.312 5.124.06A.752.752 0 0 1 6 .278z"/>
          <path d="M10.794 3.148a.217.217 0 0 1 .412 0l.387 1.162c.173.518.579.924 1.097 1.097l1.162.387a.217.217 0 0 1 0 .412l-1.162.387a1.734 1.734 0 0 0-1.097 1.097l-.387 1.162a.217.217 0 0 1-.412 0l-.387-1.162A1.734 1.734 0 0 0 9.31 6.593l-1.162-.387a.217.217 0 0 1 0-.412l1.162-.387a1.734 1.734 0 0 0 1.097-1.097l.387-1.162zM13.863.099a.145.145 0 0 1 .274 0l.258.774c.115.346.386.617.732.732l.774.258a.145.145 0 0 1 0 .274l-.774.258a1.156 1.156 0 0 0-.732.732l-.258.774a.145.145 0 0 1-.274 0l-.258-.774a1.156 1.156 0 0 0-.732-.732l-.774-.258a.145.145 0 0 1 0-.274l.774-.258c.346-.115.617-.386.732-.732L13.863.1z"/>
        </symbol>
        <symbol id="sun-fill" viewBox="0 0 16 16">
          <path d="M8 12a4 4 0 1 0 0-8 4 4 0 0 0 0 8zM8 0a.5.5 0 0 1 .5.5v2a.5.5 0 0 1-1 0v-2A.5.5 0 0 1 8 0zm0 13a.5.5 0 0 1 .5.5v2a.5.5 0 0 1-1 0v-2A.5.5 0 0 1 8 13zm8-5a.5.5 0 0 1-.5.5h-2a.5.5 0 0 1 0-1h2a.5.5 0 0 1 .5.5zM3 8a.5.5 0 0 1-.5.5h-2a.5.5 0 0 1 0-1h2A.5.5 0 0 1 3 8zm10.657-5.657a.5.5 0 0 1 0 .707l-1.414 1.415a.5.5 0 1 1-.707-.708l1.414-1.414a.5.5 0 0 1 .707 0zm-9.193 9.193a.5.5 0 0 1 0 .707L3.05 13.657a.5.5 0 0 1-.707-.707l1.414-1.414a.5.5 0 0 1 .707 0zm9.193 2.121a.5.5 0 0 1-.707 0l-1.414-1.414a.5.5 0 0 1 .707-.707l1.414 1.414a.5.5 0 0 1 0 .707zM4.464 4.465a.5.5 0 0 1-.707 0L2.343 3.05a.5.5 0 1 1 .707-.707l1.414 1.414a.5.5 0 0 1 0 .708z"/>
        </symbol>
      </svg>
      <div class="dropdown position-fixed bottom-0 end-0 mb-3 me-3 bd-mode-toggle">
        <button class="btn btn-bd-primary py-2 dropdown-toggle d-flex align-items-center"
                id="bd-theme"
                type="button"
                aria-expanded="false"
                data-bs-toggle="dropdown"
                aria-label="Toggle theme (auto)">
          <svg class="bi my-1 theme-icon-active" width="1em" height="1em"><use href="#circle-half"></use></svg>
          <span class="visually-hidden" id="bd-theme-text">Toggle theme</span>
        </button>
        <ul class="dropdown-menu dropdown-menu-end shadow" aria-labelledby="bd-theme-text">
          <li>
            <button type="button" class="dropdown-item d-flex align-items-center" data-bs-theme-value="light" aria-pressed="false">
              <svg class="bi me-2 opacity-50" width="1em" height="1em"><use href="#sun-fill"></use></svg>
              Light
              <svg class="bi ms-auto d-none" width="1em" height="1em"><use href="#check2"></use></svg>
            </button>
          </li>
          <li>
            <button type="button" class="dropdown-item d-flex align-items-center" data-bs-theme-value="dark" aria-pressed="false">
              <svg class="bi me-2 opacity-50" width="1em" height="1em"><use href="#moon-stars-fill"></use></svg>
              Dark
              <svg class="bi ms-auto d-none" width="1em" height="1em"><use href="#check2"></use></svg>
            </button>
          </li>
          <li>
            <button type="button" class="dropdown-item d-flex align-items-center active" data-bs-theme-value="auto" aria-pressed="true">
              <svg class="bi me-2 opacity-50" width="1em" height="1em"><use href="#circle-half"></use></svg>
              Auto
              <svg class="bi ms-auto d-none" width="1em" height="1em"><use href="#check2"></use></svg>
            </button>
          </li>
        </ul>
      </div>

    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-YvpcrYf0tY3lHB60NNkmXc5s9fDVZLESaAA55NDzOxhy9GkcIdslK1eN7N6jIeHz" crossorigin="anonymous"></script>
  </body>
</html>

I’m not sure what else to do or try. Can anyone assist?

Select tag to change both link and text of a

I am interested in using form “select” dropdowns to change both the URL and the text from each “select”, both in a <p> tag.

Below is a bad example, but want to use select items to change the link text and URL.

<div class="price">
    <strong>2.00</strong>
    <span>per month</span>
</div>

<select id="planOne">
  <option value="google.com">Google</option>
  <option value="microsoft.com">Microsoft</option>
  <option value="yahoo.com">Yahoo</option>
</select>
<a id="OrderLinkOne" href="google.com">Link</a> 



$(document).ready(function(){
  $("#planOne").change(function () {
    console.log(this.value);
    $("#OrderLinkOne").attr('href', this.value);
    $(".price").children("strong").text("3.00");
    $("span").text("per week");
  });
});

How to prevent pages from closing when out of memory

Scrolling down instagram peaks cpu after ~10000 posts

im trying to scroll down an Instagram tagged page to find the oldest posts; the page has ~15000 posts but when i reach ~10000 posts, loading new posts peaks my cpu (ryzen 5 5500U) causing the page to close due to being out of memory. also seems that the ram usage of 1 tab is capped at 4.5 gb for whatever reason despite having 20gb of ram. tried restricting the cpu affinity on a few browsers – chrome, edge – to fewer cores but the page still closed due to being out of memory after ~10000 posts. is there a means to reach the bottom of the page

is there a way to circumvent the out of memory error such as rendering the page in a lower-memory mode or preventing the webpage from closing when out of memory, or any other means of reaching the bottom of the page

Why are the transparent sprites not being drawn correctly Pixi.js v8.6.6

The code separates a tiles sheet into 40×40 sections and places them onto the pixi canvas. But the transparent tiles are not being drawn correctly. I have tried looking through the documentation but I can’t find out what is causing it.

  const tiles = 'https://static.koalabeast.com/textures/musclescupgradients/tiles.png';

  (async () => {
    const app = new PIXI.Application();
    await app.init({ width: 640, height: 440 });
    document.body.appendChild(app.view);

    const sheetTexture = await PIXI.Assets.load(tiles);
    const w = 40;
    const sheetBase = sheetTexture.baseTexture;

    const cols = Math.floor(sheetBase.width / w);
    const rows = Math.floor(sheetBase.height / w);

    const tileTextures = [];

    for (let row = 0; row < rows; row++) {
      for (let col = 0; col < cols; col++) {
        const x = col * w;
        const y = row * w;
        const frame = new PIXI.Rectangle(x, y, w, w);

        const tileTex = new PIXI.Texture({ source: sheetBase, frame });
        tileTextures.push(tileTex);

        const sprite = new PIXI.Sprite(tileTex);
        sprite.x = col * w;
        sprite.y = row * w;
        app.stage.addChild(sprite);
      }
    }
  })();

Pixi Drawn Image

Original Image

Updating HTML element causes PointerLockControls to stutter in three.js

For quite some time, I’ve had in issue in three.js where when putting any HTML element updates in my animation loop, my PointerLockControls always have a strange stutter. For example:

function animate() {
  renderer.render(scene, camera);
  requestAnimationFrame(animate);
}

Works completely normal. PointerLockControls feel smooth, responsive, and my framerate is normal.

But if I do this:

function animate() {
  document.querySelector("#some-element").textContent = "foobar";
  renderer.render(scene, camera);
  requestAnimationFrame(animate);
}

Suddenly, the PointerLockControls have a strange stutter effect, whereas if I point my cursor up slowly, the controls are stuck, but if I point my cursor up slightly faster, the controls completely jerk to the top of the screen.

Strangely enough, the framerate is not affected by this. It is just the PointerLockControls, nothing else.

Why does this issue happen, and how can I fix it? Also, I need to constantly update the element’s textContent, so “updating it only when I need to” doesn’t work.