I have all of my code on this website.

On the website (which I strongly suggest using for the issue sampler), All of the headers can be hovered with the mouse and the dropdowns all show up, but when a user tries to interact with the dropdowns, they disappear and do not stay.

This current set of code gives no errors or warnings related to the issue. I also provided a debug variable checker for the Shop dropdown in case if it is of use.

I have tried changing the ID of the dropdown area into a class and controlling the movement that way while only having one ID for the whole element but that did not solve the issue.

Please keep in mind that I am very unskilled at Web Design, especially backend design so please let me know if you can help!

I'm trying to clean up a client's page list by moving all of their forms (of which they have over 90, and all of them currently live on separate pages) into an accordion on one page using WordPress with Elementor's nested accordion widget. I've created the page and have added the following snippet to make the accordion open automatically when the item ID is appended to the URL:

<script>
    jQuery(document).ready(function($) {
        // Function to extract the hash, even when query parameters exist
        function getHashFromUrl() {
            var url = window.location.href;
            var hashIndex = url.indexOf('#');
            return hashIndex !== -1 ? url.substring(hashIndex) : ''; // Return hash if present
        }

        var hash = getHashFromUrl();

        if (hash !== '') {
            var accordionItem = $(hash);

            if (accordionItem.length > 0) {
                // Close the first accordion if it has the 'open' attribute
                var firstAccordionItem = $('.e-n-accordion-item[open]').first();
                if (firstAccordionItem.length > 0) {
                    firstAccordionItem.removeAttr('open'); // Remove the 'open' attribute to close it
                    firstAccordionItem.find('.e-n-accordion-item-title').attr('aria-expanded', 'false'); // Update aria-expanded to false
                }

                // Open the targeted accordion by adding the 'open' attribute
                accordionItem.attr('open', '');
                accordionItem.find('.e-n-accordion-item-title').attr('aria-expanded', 'true'); // Update aria-expanded to true

                // Scroll to the accordion with a 100px top offset once the page fully loads
                $(window).on('load', function() {
                    $('html, body').animate({
                        scrollTop: accordionItem.offset().top - 100 // Subtract 100px for the offset
                    }, 500);
                });
            }
        }

        // Update the hash in the URL and aria-expanded when an accordion is clicked
        $('.e-n-accordion .e-n-accordion-item-title').on('click', function() {
            var clickedItem = $(this).closest('.e-n-accordion-item').attr('id');
            if (clickedItem) {
                window.location.hash = clickedItem;

                // Toggle aria-expanded based on the click event
                var isExpanded = $(this).attr('aria-expanded') === 'true';
                $(this).attr('aria-expanded', !isExpanded ? 'true' : 'false');
            }
        });

        // Prevent the default hash scrolling on page load
        if (hash !== '') {
            window.scrollTo(0, 0); // Scroll to top on page load to prevent default hash scroll
        }
    });
</script>

This is working nicely for me. When an item is clicked, the accordion expands and the ID automatically appends to the URL. If the ID is already appended to the page URL, then the page loads with that item expanded and scrolls to the correct location. My plan is to redirect all of the separate pages to the new master page with the correct element ID at the end. So, for example, https://example.com/form-1/ would redirect to https://example.com/forms#form-1.

The problem that I am running into is that loading 90+ forms on one page is significantly slowing down page load speed. What I want to do is make it so that the accordion content only loads when the item is expanded, but I'm struggling to do this using JS and PHP. It seems like I'd have to use PHP to prevent a resource from loading since JS executes on the browser side, but I'm not very strong with PHP.

My first thought was to grab the hash ID from the URL and then write a function to only load the content if the correct ID was present, but my research is telling me that this will be difficult to do because CSS IDs in the URL function on the browser side. Here's what my HTML output looks like:

<div class="elementor-element elementor-element-656452a elementor-widget elementor-widget-n-accordion" data-id="656452a" data-element_type="widget" data-e-type="widget" data-widget_type="nested-accordion.default">
  <div class="elementor-widget-container">
    <div class="e-n-accordion" aria-label="Accordion. Open links with Enter or Space, close with Escape, and navigate with Arrow Keys">
      <details id="first-item-id" class="e-n-accordion-item" style="" open="">
        <summary class="e-n-accordion-item-title" data-accordion-index="1" tabindex="0" aria-expanded="true">
          <span class="e-n-accordion-item-title-header"><div class="e-n-accordion-item-title-text"> Accordion Item 1 </div></span>
          <span class="e-n-accordion-item-title-icon">
            <span class="e-opened"><i aria-hidden="true" class="fas fa-minus"></i></span>
            <span class="e-closed"><i aria-hidden="true" class="fas fa-plus"></i></span>
          </span>
        </summary>
        <div role="region" aria-labelledby="first-item-id" class="elementor-element elementor-element-e24f83f e-con-full e-flex e-con e-child" data-id="e24f83f" data-element_type="container" data-e-type="container">
            <div class="elementor-element elementor-element-283094e elementor-widget elementor-widget-text-editor" data-id="283094e" data-element_type="widget" data-e-type="widget" data-widget_type="text-editor.default">
            <div class="elementor-widget-container">
                        <div class="gf_browser_gecko gform_wrapper gravity-theme gform-theme--no-framework" data-form-theme="gravity-theme" data-form-index="0" id="gform_wrapper_23" style="">
                <!-- Gravity Forms HTML here -->
              </div>
                </div>
            </div>
        </div>
        </details>
            <details id="second-item-id" class="e-n-accordion-item" style="">
        <summary class="e-n-accordion-item-title" data-accordion-index="2" tabindex="-1" aria-expanded="false">
            <span class="e-n-accordion-item-title-header"><div class="e-n-accordion-item-title-text"> Accordion Item 2 </div></span>
                <span class="e-n-accordion-item-title-icon">
            <span class="e-opened"><i aria-hidden="true" class="fas fa-minus"></i></span>
            <span class="e-closed"><i aria-hidden="true" class="fas fa-plus"></i></span>
          </span>
            </summary>
            <div role="region" aria-labelledby="second-item-id" class="elementor-element elementor-element-3962e30 e-con-full e-flex e-con e-child" data-id="3962e30" data-element_type="container" data-e-type="container">
            <div class="elementor-element elementor-element-9a5addf elementor-widget elementor-widget-text-editor" data-id="9a5addf" data-element_type="widget" data-e-type="widget" data-widget_type="text-editor.default">
                <div class="elementor-widget-container">
                    <div class="gf_browser_gecko gform_wrapper gravity-theme gform-theme--no-framework" data-form-theme="gravity-theme" data-form-index="0" id="gform_wrapper_8">
                <!-- Gravity Forms HTML here -->
              </div>
                </div>
            </div>
        </div>
      </details>
    </div>
  </div>
</div>

Based on all of this info, I think that what I need to do is make it so that the only content inside the accordions that loads is the stuff inside the div with "aria-expanded='true'". Any tips on how I could accomplish this?

// Problem #1

// Problem Statement:

// Create a variable to store "Hello World" and print it to the console.

// Requirements:

// Store a constant message in a variable and display it as output.

// Approach:

// 1. Create a constant variable since this value will not change.

// 2. Wrap the text inside double quotes "" to define it as a string.

// 3. Use the log() method of the built-in console object to print the output.

// Code:

const helloWorld = "Hello World";
console.log(helloWorld);

// Output:

// Hello World

// What I Learned:

// - const: Used for constant variables whose values cannot be reassigned.

// - Strings: Text data wrapped inside double quotes.

// - console.log(): 'console' is a built-in object, and 'log()' is its method used to print output.

I have a custom layer to render raster data using OpenLayers. what I need is a way to be able to replace the rendered image without removing the previous rendered image. what I have tried so far:

• creating a new Source and replacing the layer source. this clears the previous rendered image and adds a new image with a rather long duration of no image in between.

• The current approach is added below. some times it work, other times causes a momentarily flash. this is the best I could come up with.

Is there a way to remove the flash completely?

export class ForecastLayer extends WebGLTileLayer {
  rasterData: Float32Array = new Float32Array(0);

  constructor(style: Style) {
    super({ style: style });
  }

  updateSourceRegion(region: Region) {
    this.setVisible(false);

    const width = region.nx;
    const height = region.ny;
    const extent4326 = region.bbox;
    const extent3857 = transformExtent(extent4326, "EPSG:4326", "EPSG:3857");

    const widthResolution = (extent3857[2] - extent3857[0]) / width;
    const heightResolution = (extent3857[3] - extent3857[1]) / height;

    const resolution = Math.max(widthResolution, heightResolution);

    const tileGrid = new TileGrid({
      extent: extent3857,
      resolutions: [resolution],
      tileSize: [width, height],
    });

    const source = new DataTileSource({
      loader: () => this.rasterData,
      interpolate: true,
      // disable tile opacity transition to avoid flash when tiles update
      transition: 0,
      tileSize: [width, height],
      bandCount: 1,
      tileGrid: tileGrid,
    });

    this.setSource(source);
  }

  setMapData(mapData: MapData) {
    const width = mapData.nx;
    const height = mapData.ny;

    const data = new Float32Array(width * height);
    
    //Flip raster data upside down to fix origin
    for (let j = 0; j < mapData.ny; j++) {
      for (let i = 0; i < mapData.nx; i++) {
        const value = mapData.data[(mapData.ny - j - 1) * mapData.nx + i];
        const index = j * width + i;
        data[index] = value;
      }
    }

    this.rasterData = data;
    this.clearRenderer();
    this.changed();
    this.setVisible(true);
  }
}

and here is how I use it. this is a simplified example and the raster values should be in range (0,1).

const style = {
    color: [
      "interpolate",
      ["linear"],
      ["band", 1],
      0,
      [255,0,0,0.5],
      1,
      [0,255,0,0.5],
    ],
  }
const layer = new ForecastLayer(someStyle)
const region = {
    bbox: [-180, -90, 180, 90],
    nx: 20,
    ny: 10
}
layer.updateSourceRegion(region)
layer.setMapData({nx:20, ny:10, data: new Float32Array(aNumberArrayWith200Values)})

// some time later
// This is where the flash happens
layer.setMapData({
    nx:20, 
    ny:10, 
    data: new Float32Array(anotherNumberArrayWith200Values)
})

Any help would be appreciated.

How to build a large-scale crypto tools website like sevendiv.com (1000+ calculators, analyzers, generators)?

I'm planning to build a website similar to sevendiv.com (also known as CryptoToolbox), which offers 1000+ free crypto tools including calculators, analyzers, converters, generators, and AI prompts. The tools cover various categories like DeFi, Mining, Portfolio, Staking, Trading, Security, and more.

I'd like to understand the architecture and tech stack required to build such a platform. Here are my specific questions:

1. Frontend Architecture

The site uses Tailwind CSS (loaded via CDN) and jQuery for DOM manipulation.

It also uses Google Fonts (Inter) and Material Icons.

The site appears to be a single-page application (SPA) with client-side routing and dynamic tool loading.

What would be the best modern frontend framework for this? React, Vue, or Svelte? Or is vanilla JS + jQuery sufficient for 1000+ tools?

How should I structure the tool components to keep the bundle size small and enable lazy loading?

2. Backend & API Requirements

The site claims "All run locally in your browser. No API key needed".

Does this mean all calculations are done client-side? If so, what's the role of the backend?

Should I use a serverless architecture (e.g., Cloudflare Workers, Vercel) or a traditional backend (Node.js, Django)?

What about caching, rate limiting, and analytics (they use Google Tag Manager & Clarity)?

3. Tool Management & Data Structure

How to manage 1000+ tools with their respective inputs, formulas, and UI configurations?

Should I use a JSON-based configuration system where each tool is defined declaratively?

How to handle complex calculations (e.g., Black-Scholes options pricing, Mean-Variance Optimization) efficiently in the browser?

4. SEO & Performance

The site has meta tags, Open Graph, Twitter Cards, and JSON-LD structured data (WebApplication, FAQPage, Organization, BreadcrumbList).

How to achieve good SEO for a tool-heavy SPA? Should I use SSR (Next.js/Nuxt) or static generation?

Performance optimization for 1000+ tools: code splitting, lazy loading, virtual scrolling?

5. Theming & Dark Mode

The site supports dark/light themes using CSS custom properties and data-theme attribute.

How to implement theme persistence with localStorage?

6. Deployment & Hosting

What's the best hosting strategy for such a site? Static hosting (Netlify/Vercel) or a full-stack solution?

How to handle updates when adding new tools?

Tools & Libraries I'm considering:

Frontend: React + Next.js (SSR) or Vite + React (SPA)

Styling: Tailwind CSS

State Management: Zustand or Redux Toolkit

Charts/Visualization: Chart.js, D3.js, or Recharts

Form Handling: React Hook Form

Icons: Material Icons or Font Awesome

Analytics: Google Analytics, Clarity

Hosting: Vercel, Netlify, or Cloudflare Pages

CDN: Cloudflare

Additional context:

The site has 11 categories and 998 tools.

It includes an AI Prompts Library with 5496+ prompts.

Tools include real-time crypto data (prices, rates, gas fees) - how to fetch and cache this data?

Any guidance on architecture, tech stack decisions, and implementation best practices would be greatly appreciated!

Note: I'm not looking to copy the site, but rather understand the scalable architecture behind a large collection of browser-based tools.

I'm developing a C2C (Consumer-to-Consumer) marketplace where users can discover products and services available near their location . so i try to implement the radius-based location filtering.

what are the approaches through develop the model? learn to best practice , do's and don't.
Techstack using for this site mongodb, node.js,express.js,react.
I would appreciate another tech stacks and plugin, tools also.

I'm looking for a browser JavaScript equivalent of Java's ExecutorService.

Requirements:

• Use Web Workers for real parallelism (not just Promise.all).
• Have a fixed number of workers (similar to Executors.newFixedThreadPool(n)).
• Allow submitting many tasks in a loop.
• Collect results later by awaiting returned promises.
• Results must be processed in the same order as submission, even though tasks execute in parallel.

In Java I would write something like:

ExecutorService executor = Executors.newFixedThreadPool(100);

List<Future<Result>> futures = new ArrayList<>();

for (Chunk chunk : chunks) {
  futures.add(executor.submit(() -> loadChunk(chunk)));
}

for (Future<Result> future : futures) {
  process(future.get());
}

executor.shutdown();

I'd like to achieve a similar pattern in browser JavaScript using Web Workers.

Questions:

• Is there a standard or commonly accepted way to implement a fixed-size worker pool in browser JavaScript? Should each submitted task create a new Worker, or should Workers be reused?
• How can I preserve submission order while still executing tasks in parallel?
• Are there existing libraries that provide an ExecutorService-like abstraction on top of Web Workers?

I'm interested in browser JavaScript only (not Node.js worker threads).

I'm testing playing multiple audio tracks at once on my very slow phone (with very simple html and vanilla JavaScript), and, while the file type matters somewhat (mp3s and m4as have less latency than wavs for example, which hints that maybe I should do some preprocessing), there is much latency in playing multiple audio sources at once, even via the web audio API. Is there anything to mitigate this?

Edit: would using an offline audio context be best for this?

I have a state Array of objects as such:

const [slots, setSlots] = useState([
    {id: 1, name: 'a'},
    {id: 2, name: 'b'},
    {id: 3, name: 'c'},
    {id: 4, name: 'd'},
    {id: 5, name: 'e'},
]);

And I'm trying to swap two objects in the state, but when I swap them, all objects after the swapped ones get set to empty. I've tried shallow cloning and deep cloning the objects and the array but nothing has worked.

Here is the code I use to swap the objects.

const handleChange = (fromIndex, toIndex) => {
    const arr = [...slots];
    const newArr = [];
        for (let i = 0; i < arr.length; i++) {
            const obj = structuredClone(arr[i]);
            newArr.push(obj);
        }
    const temp = newArr[fromIndex];
    newArr[fromIndex] = newArr[toIndex];
    newArr[toIndex] = temp;
    setSlots(newArr);
}

When trying to swap say the 2nd object with the 3rd in the array, the result will be this:

[
    {id: 1, name: 'a'},
    { },
    {id: 2, name: 'b'},
    { },
    { },
]

And when trying to swap the 3rd element with the 2nd the result will be:

[
    {id: 1, name: 'a'},
    {id: 3, name: 'c'},
    {id: 2, name: 'b'},
    { },
    { },
]

I've tried everything I could find online such as mapping the state array etc but to no avail.
I'd appreciate any help possible. Thanks

I'm trying to write it to that if the input includes a term within the maraQuery array, it'll open that page, otherwise, it'll say "No Results" under the input. All with auto-focus on the input and the enter key as a way to call on the function. But, it doesn't seem to register the enter key being pressed or anything. I'm new to HTML and JavaScript. how do I fix this?

<html>
  <link rel="stylesheet" href="Capillarystyle.css" />
    <body>
      <p>&lt;c.o.i informational terminal&gt;<br>this is a local database. be sure to update before each descent.<br>last updated 15:57:15 03/378<br><br> <input type="text" id="name" name="fname"
      autocomplete="off" autofocus="on"><br></p>
          <p id="demo"></p>
        
    <script>
      document.getElementById("name").value.addEventListener("keydown", function(event) {
        if (event.key === "Enter") {
            event.preventDefault();
            return Yes();
        }
    });
        const maraQuery = ["mara", "Mara", "Quintana", "quintana", "Quin", "quin"];
        var queryName = document.getElementById("name").innerHTML;
        
        function Yes(maraQuery, queryName) {
            if (maraQuery.includes(queryName) {
              return window.open("Mara.html", "_self");
              } else {
                return document.getElementById("demo").innerHTML = "No Results";
              }
            }
    </script>
  </body>
</html>

In the screenshot you can see that the y-values are all suppressed to the x-axis. There is a correct curvature though so the values are doing something right. Why are they all so low though?

Here is my code. This code defines a minimal ASP.NET Core web app that generates a PDF report containing a Chart.js line chart using jsreport:

var builder = WebApplication.CreateBuilder(args);
var app = builder.Build();

app.MapGet("/report", async () =>
{
    var rs = new LocalReporting()
        .UseBinary(JsReportBinary.GetBinary())
        .Configure(cfg =>
        {
            cfg.DoTrustUserCode();
            cfg.BaseUrlAsWorkingDirectory();
            return cfg;
        })
        .AsUtility()
        .Create();

    var html = @"
<html>
<head>
    <meta charset='utf-8' />
    <script src='https://cdn.jsdelivr.net/npm/chart.js@3.9.1'></script>
</head>
<body>

<h2>Local jsreport Chart</h2>

<canvas id='myChart' width='500' height='300'></canvas>

<script>
    const xValues = [50, 60, 70, 80, 90, 100, 110, 120, 130, 140, 150];
    const yValues = [7, 8, 8, 9, 9, 9, 10, 11, 14, 14, 15];

    const canvas = document.getElementById('myChart').getContext('2d');

    const chart = new Chart(canvas, {
        type: 'line',
        data: {
            labels: xValues,
            datasets: [{
            backgroundColor: 'rgba(0,0,255,1.0)',
            borderColor: 'rgba(0,0,255,0.1)',
            data: yValues
        }]
    },
    options: {
        responsive: false,
        devicePixelRatio: 1,
        scales: {
            y: {
                min: 0,
                max: 20
            }
        }
    }
    });
</script>
</body>
</html>
";

    var report = await rs.RenderAsync(new RenderRequest
    {
        Template = new Template
        {
            Content = html,
            Engine = Engine.Handlebars,
            Recipe = Recipe.ChromePdf
        }
    });

    var outputPath = Path.Combine(
        Directory.GetCurrentDirectory(),
        "chart-report2.pdf"
    );

    using var file = File.Create(outputPath);
    await report.Content.CopyToAsync(file);

    Console.WriteLine("PDF created:");
    Console.WriteLine(outputPath);
    
});

app.Run();

I used several jalali DatePicker like:

bootstrap:

https://github.com/Mds92/MD.BootstrapPersianDateTimePicker

jquery

https://github.com/majidh1/JalaliDatePicker

in all, on blur, at first selection it return empty string and in next selection return previous date selected.

I need to return a date selected by user to save it in database with AJAX.

it is an example:

jalaliDatepicker.startWatch(); 

@import "https://majidh1.github.io/JalaliDatePicker/assets/demo.css"

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
<script src="https://unpkg.com/@majidh1/jalalidatepicker/dist/jalalidatepicker.min.js"></script>
<link href="https://unpkg.com/@majidh1/jalalidatepicker/dist/jalalidatepicker.min.css" rel="stylesheet"/>
<h1 style="text-align:center">jalali datePicker</h1>
<input type="text" data-jdp onblur="console.log(value);"/>

The following example works as I'd like it to but I do not understand why and would like to know what the scenario is called. I coded it in my application over time without realizing it and, in review, now wonder how it ever worked without ending in some sort of starvation lock.

The example is kicked of by a call to function EventHandler which would be triggered by a user interaction. It awaits a call to async function EventCtrlsRouter which awaits a call to async function Updater. Now, updater awaits a call back to EventCtrlsRouter but runs through a different section of its logic to not call itself again. When EventCtrlsRouter returns to Updater, Updater returns to EventCtlsRouter which then returns to EventHandler.

All works nicely and in the desired order. What I don't understand is how that sort of circular calling and awaiting between EventCtrlsRouter and Updater can work so nicely. Does Updater get something like its own instance of function EventCtrlsRouter separate from that of EventHandler when it called EventCtrlsRouter? And, if so, does that have a name that I can look and read about? It's sort of like recursion via an intermediate function where each step awaits the other.

The output is:

EventHandler triggered and awaiting EventCtrlsRouter
EventCtrlsRouter invoked by caller EventHandler
EventCtrlsRouter awaiting a call to Updater.
In function Updater. Passed arg data of => [object Object]
Updater awaiting a call to EventCtrlsRouter.
EventCtrlsRouter invoked by caller Updater
Handling a call from Updater in EventCtrlsRouter.
Updater done awaiting a call to EventCtrlsRouter.
EventCtrlsRouter done awaiting a call to Updater.
EventHandler done awaiting EventCtrlsRouter
Response is Update successful

async function EventCtrlsRouter (caller, data) {
  console.log(`EventCtrlsRouter invoked by caller ${caller}`);
  switch (caller) {
    case "EventHandler": {
       console.log("EventCtrlsRouter awaiting a call to Updater.");
       let rsp = await Updater({"data":data});
       console.log("EventCtrlsRouter done awaiting a call to Updater.");
       return rsp;
       break;
    }   
    case "Updater":
       console.log("Handling a call from Updater in EventCtrlsRouter.");
       return 0;
       break;
  }
}
async function Updater (data) {
  console.log(`In function Updater. Passed arg data of => ${data}`);
  console.log("Updater awaiting a call to EventCtrlsRouter.");
  let rsp = await EventCtrlsRouter("Updater");
  console.log("Updater done awaiting a call to EventCtrlsRouter.");
  return rsp === 0 ? "Update successful" : "Update failed";
}
async function EventHandler (data) {
  console.log("EventHandler triggered and awaiting EventCtrlsRouter");
  let rsp = await EventCtrlsRouter("EventHandler",data);
  console.log("EventHandler done awaiting EventCtrlsRouter");
  console.log(`Response is ${rsp}`);
}
EventHandler("important stuff to update");

I am currently into MERN Tech Stack, while learning the concept one thing came into my mind that ,
" for executing JavaScript, browser have js engine right, like chrome has v8 and this v8 engine is nothing but some pieces of C++ code right, so when we do run js code that means we provide the js code as an input to v8 which is C++ code and this C++ code have some rules and all for the js written by the some developers or by a developer to execute the code. Here what I think that C++ is complied and during the compilation it also complied the js code and converted into the machine code from high level code and cpu understand the code ,execution happened ."

Is my analogy correct, or am I missing some important details about how JavaScript execution actually works?
note: i do not want the answer from chatgpt or some ai , want from a real developer who actually plays with this concept .

Is there a way to create a script that can invite all users in a LINE group to a target LINE group automatically?

Do you know if it's possible to develop a script that transfers or invites all members from an existing LINE group into another LINE group?

I need to write a pure client side JS function that will take in a potentially very large queue of Google API specs (URL, headers, body, content type, etc.) and fetch them. It will fetch 4 concurrently at a time. The issue is that I know some requests may hit the 429 error. I am trying to figure out how best to architect my code to handle this.

How it will work:

• Each request in the queue is one of two types:
  • solo requests are just single/normal requests
  • batchable requests are requests that can be multipart batched with other requests in the queue for the same endpoint
• Both solo responses, and the individual responses in a batch request may have a nextPageToken. This will result in a new solo or batchable request being added back to the queue.
• There are 3 different 429 possible situations:
  1. solo request could get a 429 response
  2. main batch request could get a 429 response
  3. 1 or more individual items in a batch request could get a 429 response

This is what I have so far:

Start Workers

1. Take the first item from the queue
   • If it is a solo request, call an async function doIt to process it
   • If it is a batchable request, look for the next up to 50 requests in the queue that are for the same API endpoint and create a single batch request and send that single batch request to doIt
2. Repeat #1 until we have maxConcurrentWorkers (4) concurrent executions/workers of doIt or there are no more items in the queue.

doIt

1. Check if we need to wait; if so async wait/sleep (using Promise and setTimeout)
2. Make an await fetch call
3. Check/process the response:
   • For solo requests:
     • If the response is good:
       1. Take the response and send it to a function to be processed
       2. If there is a nextPageToken, add a new solo request to the queue
       3. Start the next worker to keep processing the queue
     • If the response is 429:
       1. Add the request back to the queue as a solo request
       2. Set a global variable that tells the other workers to wait x seconds (#1 step in doIt)
       3. Start the next worker to keep processing the queue
   • For batch requests:
     • If the response is 429 (meaning the entire batch request failed):
       1. Iterate over each individual request in the batch request and readd them back to the queue
       2. set a global variable that tells the other workers to wait x seconds
       3. Start the next worker to keep processing the queue
     • If the response is good, iterate over each individual response and check their HTTP status
       • If the individual batch item response is good:
         1. Take the response and send it to a function to be processed
         2. If there is a nextPageToken, add a new batchable request to the queue
         3. Start the next worker to keep processing the queue
       • If the individual batch item response is 429:
         1. Add that specific request back to the queue as a batchable request
         2. Set a global variable that tells the other workers to wait x seconds
         3. Start the next worker to keep processing the queue

Does this logic make sense? Does it look good? Are there any cases/situations I am not accounting for? If so, what are they and how would/should I account for them?

I need to write all the code for this. I cannot use any libraries, including Google JavaScript client libraries.

I am building a simple static website to learn React, JavaScript, and Tailwind CSS.

I created an audio-player component that can be minimized and restored. The component generally works, but I am seeing unexpected behaviour the first time I click the minimize button.

Expected behaviour

When isMinimized is:

false, the complete audio player should be displayed. true, the complete player should disappear and only the restore/maximize button should be displayed. Actual behaviour

The first time I minimize the player, the minimized control appears, but another maximize/restore control also remains visible.

I need to click the minimize button again before the unwanted control disappears. After that, the component appears to behave normally.

I have attached a screenshot showing the problem.

Because the two versions are conditionally rendered using isMinimized, I expected them to be mutually exclusive:

{!isMinimized && (...)}
{isMinimized && (...)}

I am not sure whether the problem is related to the React state update, the conditional rendering, or my Tailwind CSS positioning.

Component

import { useEffect, useRef, useState } from "react";

function MusicPlayer() {
  const songSrc = `${import.meta.env.BASE_URL}music/song.mp3`;
  const minimizeIconSrc = `${import.meta.env.BASE_URL}icons/close_x_button.png`;
  const maximizeIconSrc = `${import.meta.env.BASE_URL}icons/star_button.png`;
  const playIconSrc = `${import.meta.env.BASE_URL}icons/play_button.png`;
  const pauseIconSrc = `${import.meta.env.BASE_URL}icons/pause_button.png`;
  const vinylIconSrc = `${import.meta.env.BASE_URL}icons/pink_vinyl.png`;

  const [isPlaying, setIsPlaying] = useState(false);
  const [isMinimized, setIsMinimized] = useState(false);

  const audioRef = useRef(null);

  const toggleMinimize = () => {
    setIsMinimized(!isMinimized);
  };

  const togglePlay = () => {
    setIsPlaying(!isPlaying);
  };

  useEffect(() => {
    if (!audioRef.current) {
      return;
    }

    if (isPlaying) {
      audioRef.current.play();
    } else {
      audioRef.current.pause();
    }
  }, [isPlaying]);

  return (
    <div className="fixed bottom-4 left-4 z-50 md:bottom-6 md:left-6">
      <audio ref={audioRef} loop src={songSrc}>
        Your browser does not support the audio element.
      </audio>

      {!isMinimized && (
        <div className="relative flex items-center gap-2 rounded-3xl bg-white/80 p-4 shadow-2xl backdrop-blur-md">
          <div className="h-14 w-14 rounded-full">
            <img
              src={vinylIconSrc}
              alt="Vinyl record"
              className={`h-full w-full object-cover ${
                isPlaying ? "animate-spin" : ""
              }`}
            />
          </div>

          <div>
            <p className="text-sm font-bold text-rose-700">Our Song</p>
            <p className="text-xs text-stone-500">
              {isPlaying ? "Now playing" : "Paused"}
            </p>
          </div>

          <button
            type="button"
            onClick={togglePlay}
            className="flex h-10 w-10 items-center justify-center rounded-full transition duration-300 hover:scale-110 active:scale-95"
          >
            <img
              src={isPlaying ? pauseIconSrc : playIconSrc}
              alt={isPlaying ? "Pause" : "Play"}
              className="pointer-events-none h-7 w-7 object-contain"
            />
          </button>

          <button
            type="button"
            onClick={toggleMinimize}
            className="flex h-10 w-10 items-center justify-center rounded-full transition duration-300 hover:scale-110 active:scale-95"
          >
            <img
              src={minimizeIconSrc}
              alt="Minimize player"
              className="pointer-events-none h-7 w-7 object-contain"
            />
          </button>
        </div>
      )}

      {isMinimized && (
        <button
          type="button"
          onClick={toggleMinimize}
          className="flex h-10 w-10 items-center justify-center rounded-full bg-white/80 shadow-2xl backdrop-blur-md transition duration-300 hover:scale-110 active:scale-95"
        >
          <img
            src={maximizeIconSrc}
            alt="Restore player"
            className="h-6 w-6 translate-y-0.5 object-contain"
          />
        </button>
      )}
    </div>
  );
}

export default MusicPlayer;

Why might both controls appear after the first state change, even though their rendering conditions should be mutually exclusive?

Is there a problem with the way I update isMinimized, or is this more likely caused by the component being rendered more than once elsewhere in the application?

I'm using React Router v7 and trying to understand how route matching works when multiple routes can match the same URL with the same level of specificity.

For example:

<Routes>
  <Route path="/foo/:someVar/baz" element={<A />} />
  <Route path="/foo/bar/:someOtherVar" element={<B />} />
</Routes>

If I navigate to: /foo/bar/baz, both routes appear to match:

/foo/:someVar/baz → { someVar: "bar" }

/foo/bar/:someOtherVar → { someOtherVar: "baz" }

My questions are:

1. Which route will React Router v7 render in this case?
2. If the ranking is the same, how is the tie resolved?

I found the "Ranked Route Matching" documentation, but I couldn't find an explanation for this specific tie case.

Thanks!

I'm trying to rework the dropdown menu of my site when it's in mobile view. First, I added the page view links to it. It took me a while to adjust the spacing with the social links, but now I can't adjust the background menu. First, I tried leaning on AI to generate the code for me, hoping it would be a quick fix, but that just ended up making a massive mess. Then, I decided to take matters into my own hands and try doing it myself from scratch, but that somehow went even worse.

At this point, I have completely and utterly misunderstood the CSS code of my site. Everything is totally tangled up. What I am specifically trying to do is just modify and customize the burger menu in the mobile view of my website so it actually looks and functions the way it's supposed to. However, between trying to tweak the layout and get the toggle functionality to work, I have completely lost the plot and misunderstood both the CSS styling and the JavaScript code behind it. It's just a total mismatch right now, and I don't even know where to look next.

// Handles the mobile burger menu — toggles the social links panel open/closed
// when the burger icon is clicked, and closes it when clicking outside the menu.
const navSlide = () => {
  const burger = document.querySelector('.burger'); // Grabs the burger icon element
  const socialLinks = document.querySelector('.social-links'); // Grabs the social links panel

  // Listen for a click on the burger icon
  burger.addEventListener('click', (e) => {
    e.stopPropagation(); // Stops the click from bubbling up to the document listener below
    socialLinks.classList.toggle('nav-active'); // Adds nav-active if missing, removes it if present
  });

  // Listen for a click anywhere on the page
  document.addEventListener('click', (e) => {
    if (socialLinks.classList.contains('nav-active') && !socialLinks.contains(e.target)) {
      // If the menu is open and the click was outside of it, close it
      socialLinks.classList.remove('nav-active');
    }
  });

  // Listen for clicks inside the social links panel
  socialLinks.addEventListener('click', (e) => {
    e.stopPropagation(); // Stops the click from reaching the document listener, so the menu stays open
  });
}

navSlide(); // Call the function to activate all the listeners

/* RESET */
/* Remove default browser spacing; use border-box so padding doesn't add to element width */
html,
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

/* BODY */
body {
  font-family: system-ui, -apple-system, sans-serif;
  /* Native system font stack */
  background-color: #2e2e2e;
  /* Dark gray background */
  color: #f5f5f5;
  /* Off-white text */
  line-height: 1.6;
  /* Comfortable reading spacing */
  overflow-y: auto;
  /* Allow vertical scroll, prevent horizontal bleed */
}

/* FOOTER */
footer {
  background-color: #1f1f1f;
  /* Slightly darker than body */
  padding: 0.9rem 2rem;
  text-align: center;
}

/* GLOBAL LINKS */
a {
  color: #f5f5f5;
  text-decoration: none;
  transition: color 0.2s ease;
  /* Smooth color fade on hover */
}

a:hover {
  color: #949292;
  /* Muted gray on hover */
}

/* HEADER */
.header {
  position: fixed;
  /* Sticks to top on scroll */
  top: 0;
  left: 0;
  width: 100%;
  background: #1f1f1f;
  padding: 1.25rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.3);
  /* Subtle drop shadow below header */
  z-index: 1000;
  /* Always on top of other content */
  flex-wrap: wrap;
}

/* NAVBAR */
.navbar {
  display: flex;
  align-items: center;
  width: 100%;
  max-width: 1000px;
  margin: 0 auto;
  /* Center the navbar content */
  flex-wrap: wrap;
}

/* Site name / logo — pinned to the left */
.logo {
  font-size: 1.5rem;
  font-weight: bolder;
  position: absolute;
  left: 5%;
}

/* Nav page links — centered with manual left padding to account for the absolute logo */
.nav-links {
  display: flex;
  justify-content: center;
  gap: 3rem;
  padding-left: 435px;
  /* Offsets links to visually center them past the logo */
  align-items: center;
}

.mobile-nav-links {
  display: none;
}

.mobile-nav-links a i {
  font-size: 1.8rem;
}

/* Social icons — pinned to the right */
.social-links {
  font-size: 1.8rem;
  display: flex;
  gap: 1.8rem;
  position: absolute;
  right: 5%;
}

/* Hidden by default via off-screen transform — prevents flash on mobile before JS runs */
.social-links {
  transform: translateX(110%);
  transition: transform 0.3s ease-in;
}

/* Desktop: slide social links back into view */
@media screen and (min-width: 769px) {
  .social-links {
    transform: translateX(0%);
  }
}

/* MAIN CONTENT */
main {
  margin: 80px auto 4rem;
  /* 80px top clears the fixed header */
  max-width: 800px;
  padding: 1.5rem;
  min-height: calc(100vh - 80px);
  /* Keeps footer pushed down on short pages */
}

/* INTRO SECTION */
.intro h1 {
  font-size: 2rem;
  margin-bottom: 1rem;
}

.intro p {
  font-size: 1.05rem;
  max-width: 640px;
  margin-bottom: 1rem;
  line-height: 1.75;
  /* Slightly looser than body for readability */
}

/* BLOG POST BODY TEXT */
.blog-post p {
  margin-bottom: 1em;
  line-height: 1.6;
}

/* RECENT POSTS HEADING */
.recent-posts h2 {
  margin-bottom: 1.5rem;
}

/* PROJECT CARDS */
.project {
  background: #3a3a3a;
  /* Slightly lighter than body — lifts off the page */
  padding: 1.5rem;
  border-radius: 8px;
  margin-bottom: 2rem;
  transition: background 0.3s ease;
}

.project:hover {
  background: #4a4a4a;
  /* Lighten on hover for interactivity feel */
}

/* Project list items — same card style as .project but in a <ul> */
.project-list {
  list-style: none;
  padding: 0;
  margin-top: 2rem;
}

.project-list li {
  background: #3a3a3a;
  margin-bottom: 3.5rem;
  /* Extra gap between list items */
  padding: 1rem;
  border-radius: 6px;
  transition: background 0.3s ease;
}

.project-list li:hover {
  background: #4a4a4a;
}

.project-list a {
  color: #f5f5f5;
  font-weight: bold;
}

/* POST CARDS */
/* Mirror of .project / .project-list — same pattern for blog posts */
.post {
  background: #3a3a3a;
  padding: 1.5rem;
  border-radius: 8px;
  margin-bottom: 2rem;
  transition: background 0.3s ease;
}

.post:hover {
  background: #4a4a4a;
}

.post-list {
  list-style: none;
  padding: 0;
  margin-top: 2rem;
}

.post-list li {
  background: #3a3a3a;
  margin-bottom: 3.5rem;
  padding: 1rem;
  border-radius: 6px;
  transition: background 0.3s ease;
}

.post-list li:hover {
  background: #4a4a4a;
}

.post-list a {
  color: #f5f5f5;
  font-weight: bold;
}

/* INFO GRID (3-column layout below intro) */
.info-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  /* Three equal columns */
  gap: 3em;
  margin-top: 3rem;
  padding-top: 2rem;
  border-top: 2.5px solid #3a3a3a;
  /* Visual divider between intro and grid */
}

/* Column label — small, uppercase, muted */
.info-heading {
  font-weight: 600;
  text-transform: uppercase;
  color: #949292;
}

/* Column body text */
.info-col p {
  line-height: 1.6;
  margin-bottom: 0.4rem;
}

/* Stack columns vertically on mobile */
@media screen and (max-width: 768px) {
  .info-grid {
    grid-template-columns: 1fr;
    gap: 1.5rem;
  }
}

/* BURGER MENU ICON */
/* Hidden on desktop — only shows on mobile */
.burger {
  display: none;
  cursor: pointer;
  width: 25px;
  flex-shrink: 0;
}

/* The three horizontal lines that make up the burger icon */
.burger div {
  width: 100%;
  height: 3px;
  background-color: #f5f5f5;
  margin: 5px 0;
  position: relative;
}

.burger:hover div {
  background-color: #949292;
}

/* MOBILE LAYOUT */
@media screen and (max-width: 768px) {
  body {
    overflow-x: hidden;
    /* Prevents horizontal scroll from off-screen social links */
  }

  .navbar {
    position: relative;
  }

  .logo {
    position: static;
    left: auto;
    padding-left: 5%;
  }

  .nav-links {
    display: none;
  }

  .social-links a,
  .mobile-nav-links a {
    width: 100%;
    display: flex;
    gap: 1rem;
    justify-content: center;
  }

  .mobile-nav-links {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    width: 100%;
    justify-content: center;
    margin-bottom: 0.75rem;
  }

  .social-links {
    gap: 5rem;
    position: absolute;
    right: 5%;
    top: calc(100% + 5rem);
    background-color: #1f1f1f;
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 100px;
    max-height: 200vh;
    padding: 5px;
    row-gap: 1rem;
  }



  /* Show burger icon on mobile */
  .burger {
    display: block;
    position: absolute;
    right: 5%;
    top: 50%;
    transform: translateY(-50%);
  }
}

/* NAV ACTIVE STATE */
/* Toggled by JS — slides the social links panel into view on mobile */
.nav-active {
  transform: translateX(0%);
}

<header class="header">
  <nav class="navbar">
    <a href="/" class="logo">Your Logo/Name</a>

    <div class="nav-links">
      <a href="/blog/"><i class="fa-regular fa-newspaper fa-xl"></i></a>
      <a href="/projects/"><i class="fa-solid fa-code fa-xl"></i></a>
    </div>

    <div class="social-links">
      <div class="mobile-nav-links">
        <a href="/blog/"><i class="fa-regular fa-newspaper fa-xl"></i></a>
        <a href="/projects/"><i class="fa-solid fa-code fa-xl"></i></a>
      </div>

      <a href="https://x.com/yourusername" target="_blank">
            <i class="fa-brands fa-x-twitter"></i>
          </a>
      <a href="https://github.com/yourusername" target="_blank">
            <i class="fa-brands fa-github"></i>
          </a>
    </div>

    <div class="burger">
      <div class="line1"></div>
      <div class="line2"></div>
      <div class="line3"></div>
    </div>
  </nav>
</header>

<main>
  <section class="intro" style="text-align: left;">
    <h1 style="font-size: 22px;"> Based in my country, I'm passionate about building apps and tools that truly serve users. Currently learning, improving, and coming up with new ideas every day, and blogging about tech.</h1>
  </section>

  <div class="info-grid" style="text-align: left;">
    <div class="info-col">
      <p class="info-heading">Experience:</p>
      <p>Independent iOS & Web Developer</p>
      <p>Swift, SwiftUI, Python, HTML/CSS/JS</p>
    </div>

    <div class="info-col" style="text-align: left;">
      <p class="info-heading">Currently:</p>
      <p>Building iOS apps with SwiftUI</p>
      <p>Open to internships &amp; junior roles</p>
    </div>

    <div class="info-col" style="text-align: left;">
      <p class="info-heading">About this site:</p>
      <p>This site is built using raw HTML, CSS, and a bit of JavaScript, to showcase my skills in front-end, projects I'm working on, and blog posts.</p>
    </div>
  </div>
</main>

<footer>
  <p>Designed by Your Name • Made in the Country</p>
  <p>&copy; <script>
      document.write(new Date().getFullYear());
    </script>
  </p>
</footer>
<script src="app.js"></script>

When

customElements.define(name, window.top.customElements.get(name))

is called inside a script (with type="module", in case that is consequential somehow) in an (un-sandboxed) iframe, it always throws an error Uncaught TypeError: custom element constructors must call super() first and must not return a different object in Chrome and Uncaught TypeError: Custom element constructor returned a wrong element in Firefox, even for a very simple web component registered at the top level like:

customElements.define(name, class extends HTMLElement {
  constructor() {
    super();
  }
})

But if I simply copy and paste that class in-place of window.top.customElements.get(name), then it works.

Is there some reason that registering a web component from the parent page is not allowed in an iframe?

Here's a full minimal reproducible example (note that this example will not work in tools like codepen that use an iframe to run your code, as it will change what window.top is. This example needs to be put in an html file to try out):

<script type="module">
  customElements.define(
    "my-el",
    class extends HTMLElement {
      constructor() {
        super();
      }
    }
  );
</script>

<iframe
  srcdoc="
  <my-el></my-el>
  <script>
    customElements.define('my-el', window.top.customElements.get('my-el'))
  </script>"
>
</iframe>

Post answer edit: See also: How we can copy custom elements from parent window inside iframe window? which has answers that talk about new web standards in this area, and how you can just use import on the files that define the custom components inside the top-level page and the iframe. That post does not answer why you can't register a web component defined in the top level page inside an iframe though, this post does.

If I have a Svelte file with two snippets, one of type Snippet<[]> and one Snippet<[string]>, and I want to dynamically render the latter with a pre-defined state variable.

Here is a reproducible example that can be directly placed in Svelte playground:

<script lang="ts">
    let useNoParamSnippet: boolean = $state(true);

    let textToUseInStringParamSnippet: string = $state("Hello");
    
    let snippetToRender = $derived(
        useNoParamSnippet 
            ? noParamSnippet
            : () => stringParamSnippet(textToUseInStringParamSnippet)
    );
</script>

{#snippet noParamSnippet()}
    <p>No parameter snippet.</p>
{/snippet}

{#snippet stringParamSnippet(text: string)}
    <p>Snippet with parameter: {text}</p>
{/snippet}

<button onclick={() => useNoParamSnippet = !useNoParamSnippet}>
    Use other snippet
</button>


{@render snippetToRender()}

{@render stringParamSnippet("This is another, non-dynamic instance of that same snippet.")}

The error that happens when trying to render the stringParamSnippet in this way is:

Uncaught Svelte error: invalid_snippet_arguments.
A snippet function was passed invalid arguments. Snippets should only be instantiated via `{@render ...}`.
https://svelte.dev/e/invalid_snippet_arguments

I don't want to use the variable directly in the snippet and convert it to a no-parameter snippet, as I use the same snippet directly in another place in the template as well.

Is this possible to do in this way?

When implementing the parasitic combination inheritance pattern in ES5, almost every resource (including Nicholas Zakas' book) insists on fixing the constructor property like this:

function inheritPrototype(childSide, parentSide) {
  childSide.prototype = Object.create(parentSide.prototype);
  // Is this line below actually necessary in ES5?
  childSide.prototype.constructor = childSide; 
}

However, from an OLOO (Objects Linking to Other Objects) perspective, the .constructor property seems to be just a fragile, misleading illusion left over from trying to make JavaScript look like a class-based language.

If my architecture explicitly bans the usage of instance.constructor for type checking, and we strictly use modern ES5/ES6 diagnostic tools like:

• Object.getPrototypeOf(instance)

• Parent.prototype.isPrototypeOf(instance)

...then what are the actual technical risks of omitting the constructor correction line entirely?

Are there any hidden edge cases within the JavaScript runtime or standard built-in methods where a missing or "broken" .constructor property will cause a native error, or is it purely a convention for third-party libraries?

Thank you all in advance for sharing your expertise and real-world experience on this historical question!

I have an octahedron whose vertices coordinates came from a computation. I build the object using a BufferGeometry and a MeshStandardMaterial (see the code below).

The resulting object has 4 facets with, apparently, the normals pointing to the inside of the object. I identified these triangles by computing the dot product between the vector from the center of the object to the center of the triangle and the normal vector of the triangle.

I tried three strategies to change the orientation of these triangles, but they change nothing: always three darker triangles in the bottom half and one in the top half. Where is my fault?

const material = new MeshStandardMaterial({
    side: DoubleSide,
    roughness: 0.5,
    metalness: 0.6,
    color: "#00FF00"
});

const geometry = new BufferGeometry();
geometry.setAttribute("position", new Float32BufferAttribute(vertices, 3));

// First strategy: compute the vertex normals and change their sign for the "wrong" triangles
geometry.setAttribute("normal", new Float32BufferAttribute(normals, 3));
const index = [];
for(let i=0; i < 24; ++i) index.push(i);
geometry.setIndex(index);

// Second strategy: let ThreeJS compute the vertex normals but swap two of the triangles vertices index entries
geometry.computeVertexNormals();
const index = [];
for(let i=0; i < 24; i+=3) {
    if(triangle is correct)
        index.push(i, i+1, i+2);
    else
        index.push(i, i+2, i+1);
geometry.setIndex(index);

// Third strategy: like the 2nd one but removed the geometry.computeVertexNormals() call.

const shape = new Mesh(geometry, material);

// To test these are the vertices of the triangles
const vertices = [
    0.08, 0, 0,
    0, 0.08, 0,
    0, 0, 0.08,
    0, 0, 0.08,
    -0.08, 0, 0,
    0, 0.08, 0,
    0, 0, 0.08,
    0, -0.08, 0,
    0.08, 0, 0,
    -0.08, 0, 0,
    0, 0, 0.08,
    0, -0.08, 0,
    -0.08, 0, 0,
    0, 0, -0.08,
    0, -0.08, 0,
    0, -0.08, 0,
    0.08, 0, 0,
    0, 0, -0.08,
    -0.08, 0, 0,
    0, 0.08, 0,
    0, 0, -0.08,
    0, 0.08, 0,
    0, 0, -0.08,
    0.08, 0, 0
];

The issue as of right now is that the "logo-box" (the mask for the logo image) is currently not fully transparent like it is supposed to be. The idea for the logo is for it to be fully visible and the masking box should be fully transparent and cutting out the image, not dimming the image with a cutout.

I am getting no error messages and it doesn't seem to be a surface level issue. To what I have found, there are no CSS variables that make this problem. The opacity variable in animeJS also seems to make the problem worse or does not help at all.

// Animates the logo image's mask.
animate('#mask-box', {
  rotate: 1440, // Rotate's the box 4 times (1440 degrees / 360 degrees = 4 rotations)
  transformOrigin: '50% 50%', // I do not remember ever adding this but it seems to help fix the rotation issue.
  scale: [0, 1, 1, 1, 1, 1, 1, 1, 0], // Scaling and Descaling (0 = 0% size, 1 = 100% size. All the repeated 1's extends the time as 100% size. Sine effect allows the ending effect to be smooth.)
  duration: 20000, // Animation time (20 seconds, 20000 ms): https://animejs.com/documentation/animation/tween-parameters/duration
  loop: true, // Loops the animation forever (true is the same as Infinity): https://animejs.com/documentation/timeline/timeline-playback-settings/loop
  easing: 'easeInOutSine', // Uses the Ease In and Out Sine: https://animejs.com/easing-editor/sine/inoutsine
});

// Each of the following 4 setInterval function checks if header items are hovered. This then triggers arrow animations
const fps = 60;

setInterval(function() {
  if(getComputedStyle(document.getElementById('head-dir-about')).getPropertyValue('--hovered-about') == 1) {
    document.getElementById('headAboutMega').style.zIndex = -10;
    document.getElementById('headAboutMega').style.display = "flex";
    animate('#head-dir-about-arrow',{
      rotate: 0,
      duration: 300,
      loop: false,
      easing: 'easeIn',
    });
    animate('#headAboutMega',{
      y: 0,
      duration: dropdownMovingSpeed,
      loop: false,
      easing: 'easeOut',
    });
  } else {
    document.getElementById('headAboutMega').style.zIndex = -100;
    animate('#head-dir-about-arrow',{
      rotate: -90,
      duration: 300,
      loop: false,
      easing: 'easeIn',
    });
    animate('#headAboutMega',{
      y: dropdownMovingPos/1.5,
      duration: dropdownMovingSpeed,
      loop: false,
      easing: 'easeIn',
    });
  };
}, 1000 / fps);

// getComputedStyle(document.getElementById('headDirMega')).getPropertyValue('--hovered-dir-dd')
setInterval(function() {
  if(getComputedStyle(document.getElementById('head-dir-dir')).getPropertyValue('--hovered-dir') == 1 ) {
    document.getElementById('headDirMega').style.zIndex = -10;
    document.getElementById('headDirMega').style.display = "flex";
    animate('#head-dir-dir-arrow',{
      rotate: 0,
      duration: 300,
      loop: false,
      easing: 'easeIn',
    });
    animate('#headDirMega',{
      y: 0,
      duration: dropdownMovingSpeed,
      loop: false,
      easing: 'easeIn',
    });
  } else {
    document.getElementById('headDirMega').style.zIndex = -100;
    animate('#head-dir-dir-arrow',{
      rotate: -90,
      duration: 300,
      loop: false,
      easing: 'easeIn',
    });
    animate('#headDirMega',{
      y: dropdownMovingPos/1.5,
      duration: dropdownMovingSpeed,
      loop: false,
      easing: 'easeIn',
    });
  };
}, 1000 / fps);

setInterval(function() {
  if(getComputedStyle(document.getElementById('head-dir-shop')).getPropertyValue('--hovered-shop') == 1)  {
    document.getElementById('headShopMega').style.zIndex = -10;
    document.getElementById('headShopMega').style.display = "flex";
    document.getElementById('debugVar').innerHTML = "shop yes";
    animate('#head-dir-shop-arrow',{
      rotate: 0,
      duration: 300,
      loop: false,
      easing: 'easeIn',
    });
    animate('#headShopMega',{
      y: 0,
      duration: 700,
      loop: false,
      easing: 'easeIn',
    });
  } else {
    document.getElementById('headShopMega').style.zIndex = -100;
    document.getElementById('debugVar').innerHTML = "shop no";
    animate('#head-dir-shop-arrow',{
      rotate: -90,
      duration: 300,
      loop: false,
      easing: 'easeIn',
    });
    animate('#headShopMega',{
      y: dropdownMovingPos/1.5,
      duration: dropdownMovingSpeed,
      loop: false,
      easing: 'easeIn',
    });
  };
}, 1000 / fps);

*{
  margin: 0; /* Fixes the header */
  padding: 0; /* Put here for good measure */
  box-sizing: border-box; /* Something to do with preventing an unexpected layout. */
  font-family: MaxwellRegular, MaxwellBold, Minecraft, sans-serif; /* Basic font family order */

  /* Creates a cool gradient that I am going to copy and paste around the website because I am lazy but clean. */
  /* Supports IE6+ with the extra gradient variations. */
  --gradient: linear-gradient(
      45deg,
      rgba(206, 121, 219, 1) 0%,
      rgba(182, 0, 227, 1) 16%,
      rgba(100, 5, 232, 1) 37%,
      rgba(0, 29, 245, 1) 50%,
      rgba(0, 115, 255, 1) 66%,
      rgba(0, 183, 255, 1) 83%,
      rgba(83, 234, 237, 1) 100%
    );
  --m-gradient: -moz-linear-gradient(
      45deg,
      rgba(206, 121, 219, 1) 0%,
      rgba(182, 0, 227, 1) 16%,
      rgba(100, 5, 232, 1) 37%,
      rgba(0, 29, 245, 1) 50%,
      rgba(0, 115, 255, 1) 66%,
      rgba(0, 183, 255, 1) 83%,
      rgba(83, 234, 237, 1) 100%
  );
  --w-gradient: -webkit-linear-gradient(
      45deg,
      rgba(206, 121, 219, 1) 0%,
      rgba(182, 0, 227, 1) 16%,
      rgba(100, 5, 232, 1) 37%,
      rgba(0, 29, 245, 1) 50%,
      rgba(0, 115, 255, 1) 66%,
      rgba(0, 183, 255, 1) 83%,
      rgba(83, 234, 237, 1) 100%
  );
}

/* Import fonts */
@font-face {
  font-family: MaxwellBold;
  src: url("https://rawcdn.githack.com/MindaManOfficial/mindamanofficial.github.io/03db4b61551a2936a785500ad4eb7c7f7d39d86d/MAXWELL%20BOLD.ttf")
  format("truetype");
}
@font-face {
  font-family: MaxwellRegular;
  src: url("https://rawcdn.githack.com/MindaManOfficial/mindamanofficial.github.io/03db4b61551a2936a785500ad4eb7c7f7d39d86d/MAXWELL%20REGULAR.ttf")
  format("truetype");
}
@font-face {
  font-family: MaxwellLight;
  src: url("https://rawcdn.githack.com/MindaManOfficial/mindamanofficial.github.io/03db4b61551a2936a785500ad4eb7c7f7d39d86d/MAXWELL%20LIGHT.ttf")
  format("truetype");
}
@font-face {
  font-family: Minecraft;
  src: url("https://rawcdn.githack.com/MindaManOfficial/mindamanofficial.github.io/07345fe43bd27eeec13f46f411d02efb2a5dd2db/assets/MinecraftRegular-Bmg3.otf")
    format("opentype");
}

/* Checks to see if the CSS file is working or loaded correctly. */
/* If it is not visible, then the CSS file is working as intended. If it is visible, either someone is cheating and being a nerd or I screwed up somewhere. */
.css-checker{
  display: none;
}

header {
  display: flex;
  padding-left: 1.1%;
  padding-right: 1.1%;
  width: 100%;
  background: black;
  justify-content: space-between;
  align-items: center;
  z-index: -998;
}

/* Full Logo Wrapper */
.head-logo{
  position: relative;
  display: flex;
  flex-direction: row;
  text-decoration: none;
}

/* i dont remember what this was lol this comment has been left blank for so long it was annoying */
.head-logo-mask{
  position: absolute;
}

/* General wrapper for the images. Does NOT include the text. */
.head-logo-wrap {
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Ensure the character stays centered within the SVG coordinate system */
.logo-image {
  object-fit: cover;
}

/* This will make the mask rotate around its own center */
#mask-box {
  transform-origin: center;
  transform-box: fill-box;
}

/* Additionally, we make sure that the container does not cut off the edges during rotation. */
.logo-container {
  overflow: visible !important;
}

  /* Sets text styles for the "MindaMan" in the header. */
.head-name{
  padding-left: 0.4vw;
  font-family: MaxwellBold;
  font-size: 3.5vw;
  color: transparent;
  background: #682a9b;
  /* The extra backgrounds / filters add IE6+ compatability. */
  background: var(--gradient);
  background: var(--m-gradient);
  background: var(--w-gradient);
  /* Allows the font to have the gradient rather than just giving a background. */
  background-position: bottom;
  background-size: cover;
  background-clip: text;
}

/* Sets general styles for the head-dir area */
.head-dir{
  display: inline-flex;
  font-size: 2.5vw;
  color: white;
  justify-content: center;
}

.head-dir li{
  list-style: none;
}

/* Controls the individual wrappers for the directory links*/
.head-dir li a{
  font-family: MaxwellBold;
  color: white;
  text-decoration: none;
}

/* Controls the dropdown of the directory tab. */
.head-dir-about-dd{
  display: none;
  margin-left: -15vw;
  padding: 3%;
  background-color: #000000;
  top: 3.7vw;
  position: absolute;
  flex-direction: column;
  border-radius: 2vw;
  z-index: -999;
}

/* Controls the dropdown of the directory tab. */
.head-dir-dir-dd{
  display: none;
  margin-left: -22vw;
  padding: 3%;
  background-color: #000000;
  top: 3.7vw;
  position: absolute;
  flex-direction: column;
  border-radius: 2vw;
  z-index: -998;
}

/* Controls the dropdown of the directory tab. */
.head-dir-shop-dd{
  display: none;
  margin-left: -35vw;
  padding: 3%;
  background-color: #000000;
  top: 3.7vw;
  position: absolute;
  flex-direction: column;
  border-radius: 2vw;
  z-index: -997;
}

.head-dir-dd-head{
  padding-top: 1.5vw;
  font-family: MaxwellBold;
}

.head-dir-dd-head li{
  list-style: none;
}

.head-dir-dd-head li a{
  text-decoration: underline;
}

.head-dd-items{
  display: flex;
  flex-direction: row;
}

.head-dd-items li{
  padding-left: 3vw;
}

.head-dd-items li a{
  font-family: MaxwellRegular;
  font-size: 2vw;
}

/* Defines the part of the header that actually triggers the dropdowns */
.head-dir-main-link{
  padding: 1.4vw;
  list-style: none;
}

.head-dir-main-link li a{
  text-decoration: underline;
}

/* Modifies the images of the directory */
.head-dir a img{
  width: 2vw; 
  padding-right: 0.2vw; 
  image-rendering: pixelated;
}

/* A controller for the About part of head-dir */
#head-dir-about {
  --hovered-about:0;
}

#head-dir-about:hover {
  --hovered-about:1;
}

/* A controller for the Directory part of head-dir */
#head-dir-dir{
  --hovered-dir:0;
}

#head-dir-dir:hover{
  --hovered-dir:1;
}

/* A controller for the Shop part of head-dir */
#head-dir-shop {
  --hovered-shop:0;
}

#head-dir-shop:hover {
  --hovered-shop:1;
}

/* The general wrapper for head-social-dropdown */
.head-social{
  display: flex;
  color: white;
  padding-right: 3vw; /* Fixes some boundary issues */
}

.head-social img{
  width: 3vw;
  image-rendering: pixelated;
}

    <!-- The website stylesheet -->
    <link rel="stylesheet" href="/style.css" />


    <!-- JAVASCRIPT FILES -->
    <!-- The website JavaScript file -->
    <script src="/main.js" type="module"></script>
    <!-- Twitch Stream Embed JavaScript link-->
    <script type="text/javascript" src="https://embed.twitch.tv/embed/v1.js"></script>
    <!-- Latest YouTube Video Grabber JavaScript link-->
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
    <!-- Latest jQuery module-->

<header id="header">
          <!-- Header Logo (Contains both the Logo, Logo Mask Box, and Name which can be changed at any time) -->
          <!-- FIX THE ISSUE WHERE THE MASK DIMS THE IMAGE -->
      <a class="head-logo" id="headLogo" href="https://mindaman.com">
        <div class="head-logo-wrap">
          <svg viewBox="0 0 100 100" class="logo-container" style="width: 3.5vw; height: 3.5vw; overflow: visible;">
            <defs>
              <mask id="logoMask">
                <!-- Create the mask image (Added id directly for animation )-->
                <image 
                  id="mask-box" 
                  href="/logo-box.svg" 
                  width="100" 
                  height="100" 
                  x="0" 
                  y="0"
                />
              </mask>
            </defs>

            <!-- Set the image to get masked -->
            <image 
              id="mindamanChangingLogo"
              class="logo-image"
              href="/little-critter.png" 
              width="100" 
              height="100" 
              mask="url(#logoMask)" 
            />
          </svg>
        </div>
        <div class="head-name" id="mindamanTitle">MindaMan</div> <!-- Add the text back into the header logo -->
      </a>
          <!-- Header Directory (Contains multiple dropnavs for "About", "Directory", and "Shop") -->
          <!-- FUTURE: Consider maybe animating the little icons by the titles -->
        <ul class="head-dir">

          <li class="head-dir-main-link" id="head-dir-about">

            <a href="https://mindaman.com/about"><img src="/about.png"> About<img src="/dir-arrow.svg" id="head-dir-about-arrow"></a>

            <ul class="head-dir-about-dd" id="headAboutMega">
              
              <li class="head-dir-dd-head">
                All About Me
                <ul class="head-dd-items">
                  <li><a href="https://mindaman.com/about">About Me</a></li>
                  <li><a href="https://mindaman.com/timeline">History Timeline</a></li>
                  <li><a href="https://mindaman.com/pronunciation">Pronunciation</a></li>
                  <li><a href="https://mindaman.com/faq">FAQ</a></li>
                </ul>
              </li> 
              
              <li class="head-dir-dd-head">
                Community Info
                <ul class="head-dd-items">
                  <li><a href="https://"></a></li>
                  <li><a href="https://mindaman.com/guidelines">Community Guidelines</a></li>
                  <li><a href="https://mindaman.com/policies">Art Polices</a></li>
                  <li><a href="https://info.mindaman.com/oc">OC Info</a></li>
                  <li><a href="https://info.mindaman.com">MindaMan Info</a></li>
                  <li><a href="https://"></a></li>
                </ul>
              </li> 
              
              <li class="head-dir-dd-head">
                Website Info
                <ul class="head-dd-items">
                  <li><a href="https://mindaman.com/credits">Credits</a></li>
                  <li><a href="https://mindaman.com/log">Devlog</a></li>
                  <li><a href="https://mindaman.com/guide">Website Guide</a></li>
                  <li><a href="https://mindaman.com/cookies">Cookie Information</a></li>
                  <li><a href="https://mindaman.com/resources/deps">Website Dependencies</a></li>
                </ul>
              </li> 

              <li class="head-dir-dd-head-link"><a href="https://mindaman.com/about">See my About Me page...</a></li>

            </ul>
          </li>
          
          <!-- Header Directory Tab -->
          <li class="head-dir-main-link" id="head-dir-dir">

            <a href="https://mindaman.com/dir" ><img src="/dir.png"> Directory<img src="/dir-arrow.svg" id="head-dir-dir-arrow"></a>
            
            <ul class="head-dir-dir-dd" id="headDirMega">
              
              <li class="head-dir-dd-head">
                User / Community Areas
                <ul class="head-dd-items">
                  <li><a href="https://"></a></li>
                  <li><a href="https://"></a></li>
                  <li><a href="https://"></a></li>
                  <li><a href="https://submissions.mindaman.com">MindaMan Submissions</a></li>
                  <li><a href="https://mindaman.com/commands">Stream Commands</a></li>
                  <li><a href="https://mindaman.com/commands/sfx">Stream SFX</a></li>
                </ul>
              </li> 
              
              <li class="head-dir-dd-head">
                Developer Tools / Resources
                <ul class="head-dd-items">
                  <li><a href="https://dev.mindaman.com">Developer Page</a></li>
                  <li><a href="https://api.mindaman.com">MindaMan API</a></li>
                  <li><a href="https://projects.mindaman.com">Projects</a></li>
                  <li><a href="https://mindaman.com/resources">MindaMan Resources</a></li>
                  <li><a href="https://cdn.mindaman.com">CDN</a></li>
                  <li><a href="https://status.mindaman.com">Status</a></li>
                </ul>
              </li> 
              
              <li class="head-dir-dd-head">
                Other Important Sub-domains
                <ul class="head-dd-items">
                  <li><a href="https://"></a></li>
                  <li><a href="https://wiki.mindaman.com">MindaMan Wiki</a></li>
                  <li><a href="https://social.mindaman.com">Official Socials</a></li>
                  <li><a href="https://archive.mindaman.com">MindaMan Archive</a></li>
                  <li><a href="https://assets.mindaman.com">MindaMan Assets</a></li>
                </ul>
              </li> 

              <li class="head-dir-dd-head-link"><a href="https://mindaman.com/dir">See full website directory...</a></li>

            </ul>
            
          </li>
          
          <li class="head-dir-main-link" id="head-dir-shop">
            
            <!-- Header Shop Tab -->
            <a href="https://shop.mindaman.com"><img src="/shop.png"> Shop<img src="/dir-arrow.svg" id="head-dir-shop-arrow"></a>
          
            <ul class="head-dir-shop-dd" id="headShopMega">
              
              <li class="head-dir-dd-head">
                Featured Collections
                <ul class="head-dd-items">
                  <li><a href="https://shop.mindaman.com/collections/mindaman-full-collection">All MindaMan Products</a></li>
                  <li><a href="https://">Critter Chaos</a></li>
                  <li><s><a href="https://shop.mindaman.com/collections/">The Two Steps Collection</a></s></li>
                </ul>
              </li> 
              
              <li class="head-dir-dd-head">
                Featured Merch (Little Critter Themed)
                <ul class="head-dd-items">
                  <li><a href="https://shop.mindaman.com/products/critter-stickers-edition-1">Stickers</a></li>
                  <li><a href="https://shop.mindaman.com/products/embroidered-mindaman-logo-hoodie">Hoodie</a></li>
                  <li><a href="https://shop.mindaman.com/products/helmet-grid-t-shirt">Helmet Grid Shirt</a></li>
                  <li><a href="https://shop.mindaman.com/products/embroidered-mindaman-logo-beanie">Beanie</a></li>
                  <li><a href="https://shop.mindaman.com/products/little-critter-notebook">Notebook</a></li>
                </ul>
              </li> 
              
              <li class="head-dir-dd-head">
                Account Pages & Legal
                <ul class="head-dd-items">
                  <li><a href="https://">Account</a></li>
                  <li><a href="https://shop.mindaman.com/supporters">Members Area</a></li>
                  <li><a href="https://shop.mindaman.com/pages/returns-faq">Return Policy & FAQ</a></li>
                  <li><a href="https://shop.mindaman.com/terms-of-service">ToS</a></li>
                  <li><a href="https://shop.mindaman.com/privacy-policy">Privacy Policy</a></li>
                </ul>
              </li> 

              <li class="head-dir-dd-head-link"><a href="https://shop.mindaman.com">See full store page...</a></li>

            </ul>
          </li>

          <li class="head-dir-main-link"><a href="https://mindaman.com/contact" id="head-dir-contact"><img src="/contact.png"> Contact</a></li>
        </ul>
        
        <!-- Header Social -->
        <!-- FUTURE: Dropdown from one icon, contains a link at the bottom for more social links. When each icon is hovered, it extends out to the left with the social media name, and handle. when clicked it redirects -->
        <div class="head-social">
          <a href="https://youtube.com/@mindaman?sub_confirmation=1"><img src="https://cdn.mindaman.com/website-assets/pixel-social-icons/youtube_icon_bg.png"></a>
          <a href="https://twitch.tv/mindamanreal"><img src="https://cdn.mindaman.com/website-assets/pixel-social-icons/twitch-v2.png"></a>
          <a href="https://redirect.mindaman.com/discord"><img src="https://cdn.mindaman.com/website-assets/pixel-social-icons/discord_icon_bg.png"></a>
          <a href="https://github.com/MindaManOfficial"><img src="https://cdn.mindaman.com/website-assets/pixel-social-icons/github_icon_bg.png"></a>
        </div>  
        

  </header>

Also, if the images or anything else doesn't immediately work, please let me know and I can try to get them on a CDN for testing purposes. If you want to however, you can use your own images and I can switch them out in production.

I'm creating an application that has an embedded web browser. I've been writing Lisp and C (gtk4) for sometime, but I'm brand new with JavaScript. I need to execute JavaScript in the browser to find elements. At the moment I'm testing this functionality generally, and when it works I'll build the specific use case.

Following the documentation, I'm hitting a problem, where the function I'm using to find the element returns null.

My approach is to use the example implementation code for webkit_web_view_evaluate_javascript() from the docs: https://webkitgtk.org/reference/webkitgtk/unstable/method.WebView.evaluate_javascript.html

My only change was to make the function that calls webkit_web_view_evaluate_javascript() instead select an element. All it does is execute the JavaScript window.document.getElementById(''); with an element's ID. Ultimately I'll want to do stuff to the element, this is just a test.

static void
web_view_get_element (WebKitWebView *web_view,
                       const gchar   *uuid)
{
    gchar *script = g_strdup_printf ("window.document.getElementById('%s');", uuid);
    gpointer result;
    webkit_web_view_evaluate_javascript (web_view, script, -1, NULL, NULL, NULL, web_view_javascript_finished, NULL);
    g_free (script);
}

My web_view_javascript_finished() function is just the same as in the documentation.

I have tested this JavaScript manually by in the Console from the embedded browser, and it works fine:

However, when my program runs web_view_get_element(), web_view_javascript_finished() says the value is null.

Any pointers? Thank you!

I've been trying to figure out how to send a message through another site's web socket, and ive heard the best way (WITHOUT AN EXTENSION) to do this would be to run the site through a proxy on a github page with something like a cloudflare worker and change the ws before it loads. I have litterally NO idea how to do this. Help would be greatly appreciated, even if it was just a yt video or some random blog online since i dont know how to look for this.

I started this project two days ago with the intent to slowly learn about audio features while building up a simple audio player, but I can't even get past step one: getting the audio to play. It just keeps throwing the error in browser; "Uncaught (in promise) TypeError: can't access property (insert property the program first encounters here), sound is undefined". I checked pathings, checked my source tags, spelling, put the loadSound command in the setup function instead of the preload. I'm at the point where I'm starting to chase down rabbit holes because I've lost all sense of what the problem could be. The code is basically a barebones minimalist template from a website with a button added:

let sound; 
let ply; 
function preload() { 
 
    // Initialize sound
    sound = loadSound("https://upload.wikimedia.org/wikipedia/commons/8/8a/Computer_Sound_(Gravity_Sound).wav"); 
} 
 
function setup() { 
         
    //Checking playing or not
    var ply = sound.isPlaying();
    console.log(ply);
    
    playStopButton = createButton('Play');
    playStopButton.position(20, 20);
    playStopButton.mousePressed(playStopSound);
} 

function playStopSound() {
    sound.play();
    console.log(getAudioContext().state);
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/2.0.5/p5.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/p5.sound@0.2.0/dist/p5.sound.min.js"></script>

And here is the most recent error:

Uncaught (in promise) TypeError: can't access property "isPlaying", sound is undefined
    setup http://127.0.0.1:5501/sketch.js:43
    #F https://cdnjs.cloudflare.com/ajax/libs/p5.js/2.0.5/p5.min.js:1
    #S https://cdnjs.cloudflare.com/ajax/libs/p5.js/2.0.5/p5.min.js:1
    e https://cdnjs.cloudflare.com/ajax/libs/p5.js/2.0.5/p5.min.js:1
    p5 https://cdnjs.cloudflare.com/ajax/libs/p5.js/2.0.5/p5.min.js:1
    promise callback*p5< https://cdnjs.cloudflare.com/ajax/libs/p5.js/2.0.5/p5.min.js:1
    <anonymous> https://cdnjs.cloudflare.com/ajax/libs/p5.js/2.0.5/p5.min.js:1

To reiterate, all the errors look exactly the same, other than the property. Best I can make out from testing and hacking around is that it seems like the sound just isn't being loaded into the variable properly, but I can't figure out why?

I'm trying to deploy a Babylon.js game using Vite onto Github Pages and I'm running into a couple issues.

- index.html in the built folder is blank.

- Navigating to the deployed Github Page displays the following error:

Failed to load module script: Expected a JavaScript-or-Wasm module script but the server responded with a MIME type of "video/mp2t". Strict MIME type checking is enforced for module scripts per HTML spec.

Vite Config: https://github.com/JungDefiant/defiance-engine/blob/main/vite.config.js

TS Config: https://github.com/JungDefiant/defiance-engine/blob/main/tsconfig.json

package.json: https://github.com/JungDefiant/defiance-engine/blob/main/package.json

Here's what I tried:

1. Setting base in vite.config to '/', './', and blank.

2. Running 'vite build --base=/' to build my dist

3. Removed "build.emptyOutDir" and "server" options in vite.config.

4. Changed file paths in index.html to "/src", "./src" and "src".

Anyone know what I can do? I'm lost at this point.

Github Pages link: https://jungdefiant.github.io/defiance-engine/

I'm debugging WhatsApp Cloud API encrypted media downloads and I'm seeing a very specific failure mode that I cannot explain.

The downloaded .enc file matches the encrypted_hash exactly, but HMAC validation and AES decryption fail.

Expected behavior

For a media download:

1. Download encrypted media from CDN

2. Verify SHA256 against encrypted_hash

3. Validate truncated HMAC-SHA256 (10 bytes)

4. Decrypt using AES-256-CBC

5. Verify SHA256 against plaintext_hash

This pipeline works correctly for many files.

Actual behavior

For some files:

• encrypted_hash matches perfectly

• HMAC validation fails

• AES-256-CBC decryption fails with invalid padding

• decrypted output is invalid

This happens consistently for specific files.

Important detail

The CDN download itself appears correct because:

sha256(downloaded_file.enc) == encrypted_hash

The failure happens only during HMAC validation and decryption.

Failing metadata example

https://mmg.whatsapp.net/v/t62.7118-24/706089249_1331780732389584_8167604156560943205_n.enc?ccb=11-4&oh=01_Q5Aa4gG9_bdUauCQR4cyyCySRvnXjHFjqYgtZE8Ja5HS_53m4A&oe=6A3D527B&_nc_sid=5e03e0&mms3=true

{ 
  "iv": "0QTJ9yk0arNFw6fvb9hmew==", 
  "hmac": "1mbXMF1rq8jwNg==", 
  "hmac_key": "1DpkeR8bopSe7Ni1MvNVAgeBMpnWuoxaTAshtiWOu2A=", 
  "encrypted_hash": "7yATr5GN2a7ZYaVVecICGi86IGPuk0QS5vveQkv8WV4=",  
  "encryption_key": "Ilw2NlRLRQzRrDYmjbImopZ38jBZ1wJEx5VUsto3oX4=", 
  "plaintext_hash": "KWrdZFdytpQngqcDFiG4mBF2zJf7582D9K5xgSQiix0=" 
}

Working metadata example

{
  "iv": "hfN4e7TUwFnNryYoV+DxWQ==",
  "hmac": "W15v7izXCRLP3F8BAOi6DJitVXUOMSUw2maspj7O1KI=",
  "hmac_key": "AufT1DmJ+jmrgni1EwllZIbV0Wj06N46Fcy5aLdbUTo=",
  "encrypted_hash": "Ok4ayjSRabr5FuEMZGZy38Xt51St0tY6nrpYJN3llPI=",
  "encryption_key": "eOXObX/81JkjRi99MgN9g37HTmOtavn6louKjyVMlpg=",
  "plaintext_hash": "hW062e2mBUxE4AMr1t1bQkiz5Pe6OmTfHbKeMht/iX0="
}

Relevant decryption code

const HMAC_LENGTH = 10;

const ciphertext = cdnFile.subarray(0, cdnFile.length - HMAC_LENGTH);
const hmac10 = cdnFile.subarray(cdnFile.length - HMAC_LENGTH);

const hmacInput = Buffer.concat([ivBuffer, ciphertext]);

const calculatedHmac = crypto
  .createHmac("sha256", hmacKeyBuffer)
  .update(hmacInput)
  .digest();

if (
  !crypto.timingSafeEqual(
    calculatedHmac.subarray(0, HMAC_LENGTH),
    hmac10
  )
) {
  throw new Error("HMAC validation failed");
}

const decipher = crypto.createDecipheriv(
  "aes-256-cbc",
  encryptionKeyBuffer,
  ivBuffer
);

decipher.setAutoPadding(true);

const decryptedBuffer = Buffer.concat([
  decipher.update(ciphertext),
  decipher.final(),
]);

Question

If the encrypted file SHA256 matches encrypted_hash, but HMAC validation and AES-CBC decryption fail:

• does this necessarily indicate mismatched metadata?

• or is there any known case where WhatsApp media uses a different HMAC/decryption layout?

Also, the failing files are frequently progressive JPEGs. Is there any difference in WhatsApp encrypted media handling for progressive JPEGs compared to baseline JPEGs?

Notes

According to Meta's media decryption documentation, we are not using the hmac field returned in the webhook metadata for validation.

Meta Decrypt Documentation

I'm trying to export a very large .xlsx file with more than 300k rows and 23 columns. So around 7 million cells. The dataset will increase over the time, so there is no upper limit for the amount of data in the file.

When downloading only in Chrome, I'm getting a Too many properties to enumerate error.

For performance purpose I'm using a web worker.

import type { WorkSheet } from 'xlsx';
import { utils, write } from 'xlsx';

interface AssemblerWorkerContext {
  onmessage: ((event: MessageEvent) => void) | null;
  postMessage: (message: unknown, transfer?: Transferable[]) => void;
}

const workerContext = self as unknown as AssemblerWorkerContext;
const XLSX_MIME_TYPE =
  'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet';

const chunks = new Map<number, WorkSheet>();
let totalChunks: number | null = null;
let mergedFileName: string | undefined;

const mergeSheets = (sheets: WorkSheet[]): WorkSheet => {
  const merged: WorkSheet = {};
  let rowOffset = 0;
  let maxCol = 0;

  for (const ws of sheets) {
    const ref = ws['!ref'] ? utils.decode_range(ws['!ref']) : null;
    const rowCount = ref ? ref.e.r - ref.s.r + 1 : 0;

    for (const key of Object.keys(ws)) {
      if (key.startsWith('!')) continue;
      const cell = utils.decode_cell(key);
      maxCol = Math.max(maxCol, cell.c);
      merged[utils.encode_cell({ r: cell.r + rowOffset, c: cell.c })] = ws[key];
    }

    rowOffset += rowCount;
  }

  if (rowOffset > 0) {
    merged['!ref'] = utils.encode_range({
      s: { r: 0, c: 0 },
      e: { r: rowOffset - 1, c: maxCol },
    });
  }

  return merged;
};

const reset = () => {
  chunks.clear();
  totalChunks = null;
  mergedFileName = undefined;
};

workerContext.onmessage = (event: MessageEvent) => {
  try {
    const {
      sheet,
      idx,
      final = false,
      fileName,
    } = event.data as {
      sheet: string;
      idx: number;
      final?: boolean;
      fileName?: string;
    };

    chunks.set(idx, JSON.parse(sheet) as WorkSheet);

    if (fileName !== undefined) mergedFileName = fileName;
    if (final) totalChunks = idx + 1;

    if (totalChunks !== null && chunks.size === totalChunks) {
      const orderedSheets = Array.from(
        { length: totalChunks },
        (_, i) => chunks.get(i)!,
      );
      const mergedSheet = mergeSheets(orderedSheets);

      const wb = utils.book_new();
      utils.book_append_sheet(wb, mergedSheet, 'Sheet1');

      const arrayBuffer = write(wb, {
        bookType: 'xlsx',
        type: 'array',
        compression: true,
      }) as Uint8Array;
      const blob = new Blob(
        [new Uint8Array(arrayBuffer).buffer as ArrayBuffer],
        {
          type: XLSX_MIME_TYPE,
        },
      );

      workerContext.postMessage({
        success: true,
        blob,
        fileName: mergedFileName,
      });
      reset();
    }
  } catch (error) {
    workerContext.postMessage({
      success: false,
      error: error instanceof Error ? error.message : 'Assembly failed',
    });
    reset();
  }
};

"dependencies": {
    "@emotion/react": "^11.14.0",
    "@emotion/styled": "^11.14.1",
    "@reduxjs/toolkit": "^2.11.2",
    "ag-grid-community": "^35.1.0",
    "ag-grid-enterprise": "^35.1.0",
    "ag-grid-react": "^35.1.0",
    "downloadjs": "^1.4.7",
    "react": "^19.2.4",
    "react-dom": "^19.2.4",
    "react-dropzone": "^15.0.0",
    "react-redux": "^9.2.0",
    "ryuu.js": "^5.1.4",
    "uuid": "^13.0.0",
    "xlsx": "^0.18.5"
  },

Node version is 22.20.0.

I've tried using the CSV format but that may not be good for the customer, same as using multiple sheets.

Are there no other solutions?

Edit: This is the error stack

RangeError: Too many properties to enumerate
    at mergeSheets (xlsxAssemblerWorker.ts?worker_file&type=module:23:11)
    at workerContext.onmessage (xlsxAssemblerWorker.ts?worker_file&type=module:61:27)
    ```

I’m currently working on a technical SEO audit for a website and running into a wall with Core Web Vitals—specifically LCP and INP issues caused by heavy render-blocking resources. Google PageSpeed Insights is heavily flagging our unused and unminified code.

I want to minify our CSS and JavaScript files to compress their file size, but every time I try to run a basic automated minification script, it ends up breaking a critical interactive element on our layout (like our mobile navigation menu or a checkout script).

I'm looking for recommendations on the best workflow or tools for this. If you are working on a custom site, do you prefer build tools like Webpack, Vite, or Gulp for this step? Alternatively, if you are managing this on a CMS like WordPress, what specific plugins (like WP Rocket, Autoptimize, etc.) have you found to be the most stable and least likely to break front-end functionality? I want to optimize our resource delivery safely without constantly causing visual regressions. Thanks for any advice!

Just wanted to know if there are any issues with passing the mysql2.createPool(options) to another function as an argument instead of ending and reopening the pool multiple times

Desired Result:

I want to make multiple mysql queries from the same connectionPool, but all of my queries reside in different functions, if it safe to pass mysql2 pool as an argument to those functions, and finally end the pool after all of those queries are called.

Code:

Database: MySQL, Language: Node/javascript, Other Tools Used: Express

const mysql = require('mysql2/promise');
const mysqlOptions = require('./db/mysqlOptions');

// This is a secondary function that accepts createPool as an arg
async function secondFunc(query, arga, mysF) {
let final = await mysF.execute(query, arga);
return finalResult;
};


//START HERE
// This is the first function, where createPool is initialized
async function mainFunction(query, args) { 
const con = await mysql.createPool(mysqlOptions);
let [results, fields] = await otherFunc(query, arga, con); // Passing pool to secondFunc

await con.end(); // Ending the connection at last
return {result: results, field: fields};
};

I have tried it and it works as expected and the connection is closed at the end.

I just want to know if there are any risks associated with this method, or is it better to just end the pool and restart it at every function.

Thank You in advance.

I want to stop using relative paths and just do a basic absolute path, no @ symbol, just something like "component/General/Button" type thing. Here is what I currently have in my config but it does not seem to resolve any of the paths I have set up:

import react from "@vitejs/plugin-react";
import { defineConfig } from "vite";

import path from "path";


// https://vite.dev/config/
export default defineConfig({
  base: "/",
  plugins: [react()],
  resolve: {
    alias: {
      "api": path.resolve(__dirname, "./src/api/*"),
      "context": path.resolve(__dirname, "./src/context/*"),
      "components": path.resolve(__dirname, "./src/components/*"),
    },
  },
  server: {
    port: 3000,
  },
});

What am I doing wrong or how can I set up my resolver? I just want to start at src and all the paths are set from there how I would like.

I'm converting a latex document to html, and the document contains many annotated code listings, made using tikz. An example is shown below. Currently, I'm just converting these into images to use them in the html document. It would be much better if I could use actual text on the web page, and have the annotations drawn with javascript. Do you know of anything that would let me annotate text with javascript in this way, ideally leaving the annotated text still selectable and copyable?

EDIT Thanks for the suggestions below. For now, I'm experimenting with two ways of displaying the code:

1. Just put the code into a readonly textarea. This makes it easy to cut and paste, and will hopefully be accessible, but it gets rid of the annotations.

2. Display an image of the code with annotations, with alt text saying "click for code". Clicking the image takes you to a .txt file containing the plain text of the program.

I have a view transition:

checkbox.oninput = () => {
  document.startViewTransition(() => {
    checkbox.classList.toggle('checked');
  });
};

.container {
  display: grid;
  grid-template: 100px 100px / 100px 100px;
}

label {
  view-transition-name: foo;
}

:has(.checked) {
  grid-column: 2;
  grid-row: 2;
}

<div class="container">
  <label>
    <input type="checkbox" id="checkbox" oninput="">
    Click here
  </label>
</div>

But I don't like the code. I want to use the :checked pseudo-class in the CSS selector instead of using the redundant .checked class and keeping it in sync. That would be more idiomatic. But when I use :checked instead of .checked, the view transition doesn't happen. How can this problem be fixed?