Category: javascript

I am using AM Charts 4 and have defined a line chart with multiple bullets – a circle bullet and a triangle bullet for each data point (except for the first, which has only the circle bullet). It looks like this:

You can see the code here.

What I would like to do is rotate each of the triangle bullets so that they face the direction of the line.

I have tried adding adjustRotation: true, to the line series config, but it does not seem to do anything. I also tried adding autoRotate: true on the bullet config, but this also does not seem to do anything.

I also tried adding an adapter for rotation, as shown on the AM Charts documentation here.

But this recommends using a valueToPosition method on the date axis (I tried using it with both the date axis and value axis) but I see an error saying that this valueToPosition method does not exist.

I am using the JSON config method of creating the chart and would like to retain this approach as I am working with configs saved on the server and passed to the front-end. I am also using Vue3.

How can I rotate these triangles to face the direction of the line?

I’m trying to create a AI Image Generator App, I’ve been properly studying documentation and checking out YouTube tutorials but I’m unable to fetch API

This error come in my Chrome console

error 
code: null
message: null
param: null
type: "invalid_request_error"

This is my code to generate API :

const response = await fetch("https://api.openai.com/v1/images/generations", {
          method: "POST",
         headers: {
        "Content-Type": "application/json",
        Authorization: "Bearer API_KEY",
    },
    body: JSON.stringify({
        prompt: `${inputRef.current.value}`,
        n: 1,
        size: "512x512",
    }),
});

Always gives 400 Bad Request and responses is

I have a slide component that I want to use to create a carousel in React. I want to use the images in the src/assets/images folder background images for the carousel. I created an array of objects where the image is stored in the “images” property as shown in the code:

import React from "react";
import Slider from "react-slick";
import Python from "../../assets/images/python.jpg";
import HTML from "../../assets/images/html.jpg";
import Javascript from "../../assets/images/js.jpg";
import Programming from "../../assets/images/programming.jpg";
import PHP from "../../assets/images/php.jpg";

const HeroSection = () => {
  const images = [
    { id: 1, src: Python, alt: "Python" },
    { id: 2, src: HTML, alt: "HTML" },
    { id: 3, src: Javascript, alt: "Javascript" },
    { id: 4, src: Programming, alt: "Programming" },
    { id: 5, src: PHP, alt: "PHP" },
  ];

  console.log(PHP);

  const sliderSettings = {
    dots: true,
    fade: true,
    infinite: true,
    speed: 500,
    slidesToShow: 1,
    slidesToScroll: 1,
    waitForAnimate: false,
  };

  return (
    <div className="slider-container container">
      <Slider {...sliderSettings}>
        {images.map((image, index) => (
          <div
            key={index}
            className="slider-slide"
            style={{
              backgroundImage: `url(${image.src})`,
              backgroundSize: "cover",
              backgroundPosition: "center",
              height: "500px",
              width: "100%",
            }}
          >
            <span className="sr-only">{image.alt}</span>
          </div>
        ))}
      </Slider>
    </div>
  );
};

export default HeroSection;

But background images not showing in carousel what is this issue . Kindly resolve it.

I have tried so many time but does not resolve it…

Why sometimes the injection is done through a construction of class and then other times through the new keyword?,

I was watching this tutorial on YouTube and this is how he imports his second service injections into the file. Please help me understand this.

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?