Blancer.com Tutorials and projects

I’m using AG Grid in a Salesforce LWC project and have implemented a custom header checkbox for select-all functionality. The checkbox is rendered in the header using a custom class (not AG Grid’s built-in select-all). Here’s a simplified version of my code:

class CustomHeaderCheckbox {
    init(params) {
        this.eGui = document.createElement("div");
        const checkbox = document.createElement("input");
        checkbox.type = "checkbox";
        checkbox.setAttribute("tabindex", "0");
        checkbox.setAttribute("aria-label", "Select All");
        this.eGui.appendChild(checkbox);
        // ... event listeners, etc ...
    }
    getGui() { return this.eGui; }
    destroy() { /* cleanup */ }
}

The problem:
The checkbox is visible and works with the mouse.
Keyboard users cannot tab to or interact with the checkbox.
When tabbing through the grid headers, focus lands on the header cell container, not the checkbox.
Pressing Tab again skips to the next header cell, not into the checkbox.
I want keyboard users to be able to tab to the checkbox and toggle it with Space/Enter, just like AG Grid’s built-in select-all.

What I’ve tried:

1. Setting tabindex=”0″ on the checkbox and tabindex=”-1″ on the
   container.
2. Programmatically moving focus to the checkbox when the
   container receives focus.
3. Implementing a focus() method on the
   custom header class (as AG Grid docs suggest). Using
   MutationObserver to force focus.

None of these approaches result in keyboard users being able to tab to and toggle the checkbox as they can with AG Grid’s built-in select-all.
Questions:
Is there a supported way to make a custom AG Grid header checkbox fully accessible to keyboard users (tab, space, enter)?
Is it possible to mimic the accessibility behavior of AG Grid’s built-in select-all checkbox in a custom header?
Are there any workarounds or best practices for making custom header controls accessible in AG Grid?

Any code samples or accessibility tips would be greatly appreciated!

I am currently using flowbite version 1.2.0 on my svelte app.

The issue I have is that I am unable to remove the padding from the AccordionItems contents since I want to control this myself. Looks like by default is at 5 (p-5).

I have tried applying custom class on the global app.css

@layer components {
  .no-pad-accordion [data-accordion-content] {
    @apply p-0 !important;
  }
}

To wrap the component but this doesn’t work

And also with:

<Accordion class="my-accordion">
  <AccordionItem>
    {#snippet header()}My Header{/snippet}
    <p>My content here…</p>
  </AccordionItem>
  <!-- more items… -->
</Accordion>
<style>
  /* Remove body padding */
  :global(.my-accordion [data-accordion-content]) {
    @apply !p-0;
  }
</style>

I am trying to web scrape listings from the site, https://www.xiaohongshu.com/ with a search term. However, i notice that a pop out will appear requiring me to register whenever a search is invoked. Hence, the web scraping is not successful and did not achieve the desired results.

I used Apify’s web scraper with the following code in page function. However, it did not manage to scrap successfully. I suspect the cause is due to the registration pop up when it tried to access the site. I tried existing Xiao hong shu scrapers from Apify’s store but it did not manage to get the listing details that I want.

async function pageFunction(context) {
    // This statement works as a breakpoint when you're trying to debug your code. Works only with Run mode: DEVELOPMENT!
    // debugger; 

    // jQuery is handy for finding DOM elements and extracting data from them.
    // To use it, make sure to enable the "Inject jQuery" option.
    const $ = context.jQuery;
    //const pageTitle = $('title').first().text();
    //const itemList = $('item-list');

    //const body_text_from_the_page = $('p').text();


    // Print some information to actor log
    //context.log.info(`URL: ${context.request.url}, TITLE: ${pageTitle}`);
    //context.log.info(`print item-list, ${itemList}`);


    const listings = document.querySelectorAll('.note-item'); // Each listing is within note items
    const results = [];

    listings.forEach(listing => {
        const hrefElement = listing.querySelector('.cover mask ld');

        const titleElement = listing.querySelector('.title');
        const nameElement = listing.querySelector('.name');
        const timeElement = listing.querySelector('.item-location span');

        const href = hrefElement ? hrefElement.textContent.trim() : "N/A";
        const title = titleElement ? titleElement.textContent.trim() : "N/A";
        const name = nameElement ? nameElement.textContent.trim() : "N/A";
        const time = timeElement ? timeElement.textContent.trim() : "N/A";

        context.log.info('print', title);

        results.push({
            href,
            title,
            name,
            time
        });
    });

    return results;

Previously, I used only Context API for handling my state and business logic. However, now I see the pain of managing the state in nested Contexts. So, I am shifting to using Redux for state management. But I am getting stuck on one question.

Where should my business logic go? Where to put things like my API calls, Websocket calls (which have to be inside useEffect as far as I know), request and response formatting, etc.?

I am thinking of using Contexts for storing the logic (and dispatching actions) and storing the state in Redux Store. Is my approach correct? If not, what to do?

I have the same problem as how to get React chartjs to resize back down with window. I can’t seem to get the chart to resize when the parent div is resized. After consulting the documentation, I’ve set responsive to true and the parent div’s postition to relative but I’m having no luck. Here is my component, currently using tailwind for css:

export const Stats = ({ stats }: MyStatsProps) => {
  ChartJS.register(RadialLinearScale,
    PointElement,
    LineElement,
    Filler,
    Tooltip,
    Legend
  );

  const genres = stats.map(s => s.genre);
  const listens = stats.map(s => s.listens);


  const _data = {
    labels: genres,
    datasets: [
      {
        label: '# of Votes',
        data: listens,
        backgroundColor: 'rgba(255, 99, 132, 0.2)',
        borderColor: 'rgba(255, 99, 132, 1)',
        borderWidth: 1,
      },
    ],
  };
  return (
    <>
      <div className='flex w-screen'>
        <div className='w-1/2 flex-none' >
            <div className='relative'>
              <Radar
                data={_data}
                options={{
                  scales: {
                    r: {
                      min: 0,
                    }
                  },
                  responsive: true,
                  maintainAspectRatio: true
                }}
            />
          </div>
        </div>
        <div className='w-1/2 flex-none'>
          Here's some stuff here
        </div>
      </div>
    </>
  );
}

How to make Cesium billboard invisible when they are blocked by terrain ?

When there’s terrain in the front, billboard icons are still visible. And here’s the code:

map3d.entities.add({
        position: Cesium.Cartesian3.fromDegrees(_latlng[0], _latlng[1], 0), 
        billboard: {
          image: "./img/map/icon/zzw.png", 
          width: 40, 
          height: 40, 
          pixelOffset: new Cesium.Cartesian2(0, 0),
          verticalOrigin: Cesium.VerticalOrigin.BOTTOM,
          heightReference: Cesium.HeightReference.CLAMP_TO_GROUND,
        },
        clampToGround: true,
      });

click here to see the photo that shows the problem

I’ve tried to make it clamped to ground, but it doesn’t work.

I want the part of the billboard icon that is blocked by terrain to be invisible.

Thanks in advance!

In Node.js, the event loop is divided into several macrotask phases (or queues), such as:

1. timers
2. pending callbacks
3. idle/prepare
4. poll
5. check
6. close callbacks

These phases are processed in order during each iteration of the event loop. Each phase contains a queue of callbacks to execute.

My understanding is that after each individual callback from a macrotask queue is executed, the microtask queue (e.g., for Promises and queueMicrotask) is drained completely, and only then does the event loop continue to the next callback in the same macrotask phase.

Is this correct?

I’m trying to fully understand the priority and timing of microtasks in relation to the different phases of the event loop.

Connected questions.

If I schedule a new microtask while the current microtask queue is being processed, will it be added to the same queue and run in the same turn?

Also, if I keep adding microtasks during the execution of other microtasks, could this prevent the microtask queue from ever emptying, effectively blocking the event loop from moving on to the next phase?

I started a new project using React 19. After setting up the project, I installed react-router-dom, but my application stopped working. I’m not sure what’s going wrong.

Here’s what I did:

Created a React project (React 19).

Installed React Router DOM using:

npm install react-router-dom  

Can anyone help me figure out what the issue is with using react-router-dom in React 19? Do I need a specific version or configuration?

I started creating an editor for creating Android applications in html5. For now, I can change the file assets/index.html via jsZip. But I would also like to be able to edit xml. The problem is that the xml file is decoded to some axml and dex is a binary format. I wonder if there is a way to somehow skip this and give the possibility of providing a zip with the assets folders and the mainactivity.java and androidmanifest.xml files on the page. Even pretending that, for example, AndroidManifest.xml in the application would download content from app/androidmanifest.xml and also mainactivity.java from app/ is this possible and how can it be done?

When i try to hit this api

const response = await api.get(
  `/upload/file?fileName=${file.name}&fileType=${
    file.type.split('/')[1]
  }&ocr=true&resource=presc`,
  {
    headers: {
      'Content-Type': 'multipart/form-data',
    },
    data: formData,
  }
);

I get upload error

HeroSection.tsx:96 Upload error:
AxiosError {message: ‘Request failed with status code 500’, name: ‘AxiosError’, code: ‘ERR_BAD_RESPONSE’, config: {…}, request: XMLHttpRequest, …}’,

It works fine in postman just have to pass formdata with key “file” and upload a file

I have text like

.box {
border:black 1px solid;
user-select: text;
}

<div class="box" draggable="true">
     ABCDE AAA
    </div>
    <div class="box" draggable="true" >    
     FGHIJ BBB
     </div>

Now when I double click the ABCDE ,ABCDE will be selected
and I double click the AAA, AAA will be selected

However what I want to do is

when double click either ABCDE or AAA, ABCDE AAA is selected (and copyed at the same time )

Is it possoble?

I’m making a website where people can browse data by region. Basically, it shows a bar chart, and there’s a dropdown menu at the top that updates the data based on the selection.

One detail I’m having trouble with: I’d like the area of the chart to be identical regardless of the data shown. However, depending on the magnitude of the data, the area beside the y-axis will be wider or narrower. You can see what I mean in the simplified example below. The second image has more space to the left of the chart to accommodate the larger numbers, which slightly squishes the area of the actual chart. I would like the chart area to be identical between charts.

I’ve looked into the “padding” option, but it just seems to add white space around the chart, which isn’t quite what I want. Here’s some sample code. Anyone have any ideas?

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <script src="https://cdn.jsdelivr.net/npm/d3@7"></script>
        <script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
    </head>

    <body>

        <select name="nation_select" id="nation_dropdown" onchange=update_plot()>
            <option value="nation_1">Nation 1</option>
            <option value="nation_2">Nation 2</option>
        </select>
        <div><canvas id="canvas_national_ts" width="1000" height="480"></canvas></div>

        <script>

            // Make plot
            function update_plot() {
                nation_selected = document.getElementById('nation_dropdown').value;

                // Set the data
                var time = [1,2,3,4,5];
                if (nation_selected == 'nation_1') {var data = [1,2,1,3,2];}
                if (nation_selected == 'nation_2') {var data = [1000000,1040000,970000,1200000,900000];}

                // Make a plot
                const ctx_national_ts = document.getElementById('canvas_national_ts');
                if (Chart.getChart(ctx_national_ts)) {
                    Chart.getChart(ctx_national_ts).destroy();
                };
                var chart_national_ts = new Chart(ctx_national_ts, {
                    type: 'bar',
                    data: {
                        labels: time,
                        datasets: [{
                            data: data,
                        }]
                    }
                })
            }

            // Initial plot
            update_plot();

        </script>
    </body>
</html>

I’m building a REST API using Express (Node.js), and I’m trying to handle a POST request to /api/users. However, every time I send the request, I get a 404 error saying the route doesn’t exist.

I’m trying to understand how asynchronous programming works in JavaScript. Can someone explain how async/await works with a simple example?

For example:

function fetchData() {
  return new Promise(resolve => {
    setTimeout(() => {
      resolve('Data loaded');
    }, 1000);
  });
}

async function main() {
  const result = await fetchData();
  console.log(result);
}

main();

How does the async/await syntax help with handling asynchronous operations compared to using plain promises?