Category: javascript

I am running into an issue where in Playwright I am getting this error every 15 or so requests
Error: apiRequestContext.post: getaddrinfo ENOTFOUND
for the URL I am using an https:// development server endpoint. The same exact request can pass and then fail, and when I debug the tests they are always passing. Here is a helper function where it is running the post that is throwing the error:

public static async postJSONX_Access(request: APIRequestContext, endpoint: string,body: object, xAccessToken: string | undefined ) : Promise<any> 
{
        const response = await request.post(endpoint, {
            data:body,
            headers: {
            'X-Access-Token' : xAccessToken!
            },
        });
        expect(response.ok());
        return await response.json();
    }

Full error log here:

Error: apiRequestContext.post: getaddrinfo ENOTFOUND d-api.company.com
Call log:

• → POST d-api.company.com/post/data
• user-agent: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/127.0.6533.17 Safari/537.36
• accept: /
• accept-encoding: gzip,deflate,br
• X-Access-Token: tokenGoesHere
• content-type: application/json
• content-length: 2

I am testing two APIs and only running into this issue on one of them. Any help would be appreciated, I tried the solution from this question API GET Request test using Playwright on adding

import dns from "dns"; dns.setDefaultResultOrder("ipv4first");

To my playwright.config.js folder and it didn’t work to resolve the issue.

I am expecting what happens most of the time where the POST request goes through and the response is returned. I have tried removing https:// from the baseURL, I have tried adding
import dns from "dns"; dns.setDefaultResultOrder("ipv4first");
To the config file, I have tried running ipconfig /flushdns. When I restart my computer it is working to pass all the tests but over time these failures start popping up.

I’m building a gallery component in where clicking on an image opens a <dialog> containing an embla-carousel. The problem is that when I click on an image, the carousel always opens at index 1, regardless of which image was clicked. I tried to fix this by using emblaMainApi.scrollTo(selectedIdx.value) to get to the carousel’s position based on the clicked image index, but this causes an scrolling animation from slide 1 to the selected slide, which looks weird.

I want the selected image to appear instantly in the carousel without any scrolling animation.

I’m looking for a possible solution.

<template>
<div>
  <ItemModal ref="modalRef" :imgs="imgs" />
  <div v-for="(item, idx) in imgs" :key="item">
    <NuxtImg
    :src="`${item}`"
     :alt="`gallery image ${idx}`"
    @click="showImg(idx)"
    />
  </div>
</div>
</template>

// *script*

// gallery.vue
const imgs = [
  "/images/gallery/gallery-1.jpg",
  "/images/gallery/gallery-2.jpg",
  "/images/gallery/gallery-3.jpg",
];

const modalRef = ref(null);

const showImg = (index) => {
  if (modalRef.value) {
    modalRef.value.show(index);
  }
};

// modal.vue. Here I expose the 'show' method to the 'gallery' parent component so I can use it there
defineExpose({
  show: (index: number) => {
    selectedIdx.value = index;
    isOpen.value = true;
    dialog.value?.showModal(); // showModal() is a native `dialog`'s method
  },
});

I want to embed a chatbot in a website by pasting two lines of code.

For this, I have written a script.js that is hosted on

raw.githubusercontent.com/vikas70607/Botpress/main/Script.js

But this script is blocked by CORS as it is coming from an external source.
But others platform provides uses similar concept like

<script src="https://cdn.botpress.cloud/webchat/v1/inject.js"></script> 

and this works too.

Any help or Advice Regarding this.

I tried using only Vanilla JS, am I missing something? or should I be using node.

I am using viewer.js and trying to print pdf file with highlighted text in it.

I have tried to print pdf file by selecting background graphic, but it did not work. I have also used
-webkit-print-color-adjust: exact; in @media print but it also did not work.

Print Container

Note: I might be doing in wrong way. Suggesting me to solve in the right directions would be appreciable.

I have to create a map for my game;
The problem is that the map is an array with 100×100 spots. If i use an Image and load it into every cell, it makes the game very memory intensive and slow.

Any way i can use CSS to speed it up? Im looking for a ground/rocks/dirt effect for my map. Has anyone made one before?

I am trying to reposition an absolutely positioned element. If it appears partially or fully beyond the viewpoint then I want to reposition it to appear within the viewpoint. For that, I am trying to get the data using getBoundingClientRect() to know its position and checking the DOMRect bottom value against value of window.innerHeight.

Also, the absolute element’s parent is not positioned as relative also nothing in the hierarchy.

If I do,

let pos = el.getBoundingClientRect();
if (window.innerHeight < pos['bottom']) {
 style = `botton:${window.innerHeight}`; // set this to the style property of the element.
}

The above does not work and the absolutely positioned element appears in undesired location or does not appear at all. But meanwhile what I have noticed that there are some difference in values that I have got from getBoundingClientRect() and the values displayed in Chrome’s DevTools -> Elements -> Computed.

So for test, if I use values from the Chrome’s Computed window and try to set those values in the DevTools: left: 1047.3px – value from the Chrome; it appears exactly where it was positioned originally but when I try left: pos['left'] it displaces the element from its original position.

DOMRect:

  {
    'bottom': 377.68751525878906,
    'height': 159.1354217529297,
    'left': 1075.3333740234375,
    'right': 1231.3333740234375,
    'top': 218.55209350585938,
    'width': 156,
    'x': 1075.3333740234375,
    'y': 218.55209350585938,
  }

Positions from Chrome:

After all, I did not get why those values are different and how to calculate the values to position it within the viewpoint if it goes beyond the bottom edge of the screen.

i need help for this script.

I would like the global variable to be updated when an element of the array is clicked. But this doesn’t work and I can’t find the way.

const img = document.querySelectorAll("#img");
let imgPos = 1;

img.forEach((element) => {
  element.addEventListener("click", () => {
    carousel.style.visibility = "visible";
    imgPos = parseInt(element.dataset.counter);
    return imgPos;
  });

carouselSlide.style.transform = "translateX(" + -size * imgPos + "px)";

in the final string the value of ImgPos remains at 1.

Thanks

I expect the value of ImgPos to change every time the array event executes.

So I made a JavaScript clone of Flappy Bird. It runs beautifully on my 2021 M1 iMac, almost perfect…

It also runs fairly well on my 2023 M2 MacBook Pro, minus some minor glitches. HOWEVER, this is only the case when I use Safari. Opening the game in Chrome on this MacBook makes it run seemingly twice as fast.

Different mobile devices also have various glitches but other identical models using the same browser don’t.

I’m perplexed. Appreciate your help.

This is my gravity function:

function startGravity() {

    function gravity() {
        velocity += gravityConstant;
        let position = parseInt(getComputedStyle(bird).top) + velocity;
        bird.style.top = `${position}px`;

        loops.gravityAnimation = requestAnimationFrame(gravity);
    }

    loops.gravityAnimation = requestAnimationFrame(gravity);
}

And this is the function which slides the obstacles across the screen:

function runShips() {
    //create random ship every 5 seconds
    generateShipsInterval();

    function slideShipsAnimation() {
        document.querySelectorAll('.ships').forEach(ship => {
            ship.style.left = `${parseInt(getComputedStyle(ship).left) - 3}px`;
        });
        loops.slideShipsAnimation = requestAnimationFrame(slideShipsAnimation);
    }
    //run all ships across the screen
    loops.slideShipsAnimation = requestAnimationFrame(slideShipsAnimation);
}

I know it has something to do with the frame rate because trying to implement delta time changes the speed but gives rise to inconsistencies across devices and more glitches.

Minimum reproducible example:

https://github.com/folsze/capacitor-v6-sqlite-x-is-not-a-function

capacitor community sqlite: TypeError: x is not a function upon startup, after upgrading to capacitor version 6

when I start my angular ionic capacitor community sqlite app, I get:

ERROR TypeError: x is not a function

in the browser console

Steps to reproduce the behavior:

1. clone this repo: https://github.com/folsze/capacitor-v6-sqlite-x-is-not-a-function
2. start the app in the desktop browser with npm start
3. check the console, you will see the error “TypeError: x is not a function”
4. Expected behavior: No error

Desktop (please complete the following information):

• MacOS: 14.5 (23F79)
• Browser: Chrome
• Version 126.0.6478.183 (Official Build) (arm64)

related github issue:

https://github.com/capacitor-community/sqlite/issues/574

I’m generating text based tables. In each cell I need a symbol. That symbol is associated with data listed after the table. Example

┌───┬───┬───┬───┬───┬───┬───┬───┐
│ a │   │   │   │   │   │ b │   │
├───┼───┼───┼───┼───┼───┼───┼───┤
│   │   │ c │   │   │   │   │   │
└───┴───┴───┴───┴───┴───┴───┴───┘

a: 0.123
b: 0.751
c: 0.914

The issue I’m running into is once in awhile I need lots of symbols. My current code is

const symbol = (idx: number) => String.fromCodePoint(idx < 30 ? 97 + idx : idx + 9600 - 30);

That works until it gets to symbols 9776. In that range, there are 8 symbols that don’t fit

 ┌───┬───┬───┬───┬───┬───┬───┬───┐
 │ ☢ │ ☣ │ ☤ │ ☥ │ ☦ │ ☧ │ ☨ │ ☩ │
 ├───┼───┼───┼───┼───┼───┼───┼───┤
 │ ☪ │ ☫ │ ☬ │ ☭ │ ☮ │ ☯ │ ☰ │ ☱ │
 ├───┼───┼───┼───┼───┼───┼───┼───┤
 │ ☲ │ ☳ │ ☴ │ ☵ │ ☶ │ ☷ │ ☸ │ ☹ │
 ├───┼───┼───┼───┼───┼───┼───┼───┤
 │ ☺ │ ☻ │ ☼ │ ☽ │ ☾ │ ☿ │ ♀ │ ♁ │
 └───┴───┴───┴───┴───┴───┴───┴───┘

I’m using the default font used for <pre> in Chrome on MacOS. I’m not sure about other browsers or other OSes.

Is there a list, ideally part of some web spec, of which code points work to maintain monospacing (or are supposed to work)?

PS: I suppose I could try to generate a list on demand using canvas 2d’s measureText function or other web API that lets me get the size. That would possible work in more situations.

I have a bar chart that looks like this:

And I want to make it look like this:

I managed to remove the labels, set the correct column width, column radius, color and so on, but the position and spacing are quite odd…

As you can see, there is a big margin around the chart, and it does not fit 100% the width nor it has the correct height, even with the chart.height and chart.width options set

This is my chart component:

<script setup lang="ts">
import BaseCard from '~/shared/components/molecules/BaseCard.vue'
import { CardType } from '~/shared/components/molecules/BaseCardProps'
import { useCurrencyFormatter } from '~/shared/composables/useCurrency'
import { addMoney, type Money } from '~/shared/models/Money'

const props = defineProps<{
  title: string,
  dataSeries: number[]
}>()
const chartOptions = {
  dataLabels: {
    enabled: false
  },
  chart: {
    toolbar: {
      show: false
    },
    zoom: {
      enabled: false
    },
    height: '32px',
    width: '100%'
  },
  colors: ['var(--color-bg-brand-primary)'],
  plotOptions: {
    bar: {
      columnWidth: 4,
      borderRadius: 1
    }
  },
  legend: {
    show: false
  },
  grid: {
    padding: {
      left: 0,
      right: 0,
      top: 0,
      bottom: 0
    },
    yaxis: {
      lines: {
        show: false
      }
    },
    xaxis: {
      lines: {
        show: false
      }
    }
  },
  yaxis: {
    labels: {
      show: false
    }
  },
  xaxis: {
    labels: {
      show: false
    },
    axisBorder: {
      show: false
    },
    axisTicks: {
      show: false
    }
  }
}
const series = [
  {
    data: props.dataSeries
  }
]

const total = computed<Money>(() => {
  return props.dataSeries.map((value) => { return { amount: value, currency: 'BRL' } }).reduce((acc, current) => addMoney(acc, current) ?? acc, { amount: 0, currency: 'BRL' })
})
</script>

<template>
  <BaseCard class="chart-card" :type="CardType.Elevated">
    <div class="title-small color-text-default">
      {{ props.title }}
    </div>
    <div class="headline6-strong color-text-default">
      {{ useCurrencyFormatter(total) }}
    </div>
    <apexchart
      type="bar"
      :options="chartOptions"
      :series="series"
    />
  </BaseCard>
</template>

<style lang="scss" scoped>
.chart-card {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
}

</style>

I’m trying to make a random code generator that has a date attached to it when goes into one object like

let Object = {
  ed45gf : date
}

but for some reason whenever I try to log it in console it does code is not defined idk why its defined

document.addEventListener("DOMContentLoaded", function() {
  let codes = {
    happy: "69"
  };

  function generate() {
    let length = 6;
    let result = '';
    const characters = 'ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789';
    const charactersLength = characters.length;
    let counter = 0;
    while (counter < length) {
      result += characters.charAt(Math.floor(Math.random() * charactersLength));
      counter += 1;
    }
    let date = new Date();
    codes[result] = `${date}`
    console.log(result);
  }

  function Submit() {

  }

  document.querySelectorAll('button').forEach(button => {
    button.addEventListener("click", function(event) {
      const target = event.target;
      switch (target.id) {
        case "generate":
          generate();
          break;
        case "submit":
          Submit();
          break;
      }
    });
  });
});

<button id="generate">Click me</button>

i was expecting the result to add itself to the object but it seems the object is not defined the object being codes

I need help with CKEditor. I have dosamigos/ckeditor on this project. I need to upload local video, and show them on the editor like downloading images. How I can do this?

I tried to download plagin video and added extraplugin on editor.

I’m trying to make a code with python but I’m having some problems; for example, I log in to the cloudflare protected site using nodriver and I can print the values of the elements on the page. but my goal is to change them or execute javascript code from the console (it can be one of the 2, it doesn’t matter)

Note: if there’s any other way to bypassing cloudflare (I’ve already tried undetected-chromedriver but it’s not able to bypass) and executing console scripts / changing values ?

this one is for executing script (i thought chatgpt might know)

import keyboard
import asyncio
import nodriver as uc
from time import sleep


url = "https://example.com/"

async def main():
    # Nodriver ile sayfa aç
    driver = await uc.start()
    
    tab = await driver.get(url)
    while True:
        if keyboard.is_pressed('g'):
            script = """
            document.title = 'New Topic';
            """
            driver.execute_script(script) 
asyncio.run(main())

I am using Web Speech API to read a text (documentation link here).

Is there a way of displaying this kind of progress control?

The idea is that user sees the progress of the read, and can jump to any point of it.

Any free alternative is also welcomed.

Thanks in advance!