Category: javascript

I Made a code to make a website that asks you to choose the language and go to the site, but the opacity animation with transition…

var Lang;


setTimeout(function() {
  document.getElementById("SelectLanguage-text").style.filter = "opacity(100%)";
  document.getElementById("SelectLanguage-text").style.top = "0";
  document.getElementsByClassName("EN")[0].style.display = "block";
  document.getElementsByClassName("AR")[0].style.display = "block";
}, 1000);
setTimeout(function() {
  document.getElementById("SelectLanguage-text-ar").style.filter = "opacity(100%)";
  document.getElementById("SelectLanguage-text-ar").style.top = "0";
  document.getElementsByClassName("EN")[0].style.filter = "opacity(100%)";
  document.getElementsByClassName("EN")[0].style.top = "0";
}, 1100);
setTimeout(function() {
  document.getElementsByClassName("AR")[0].style.filter = "opacity(100%)";
  document.getElementsByClassName("AR")[0].style.top = "0";
}, 1200);

document.getElementsByClassName("AR")[0].onclick = function() {
  Lang = "AR";
  Start();
}
document.getElementsByClassName("EN")[0].onclick = function() {
  Lang = "EN";
  Start();
}
document.getElementById("Switch").onclick = function() {
  if (Lang == "AR") {
    Lang = "EN";
    Start();
  } else {
    Lang = "AR";
    Start();
  }
}

document.getElementById("Return").onclick = function() {
  location.reload();
}

function Start() {
  document.getElementById("select-language").style.filter = "opacity(0%)";
  setTimeout(function() {
    document.getElementById("select-language").style.display = "none";
    document.getElementById("AllOtherSects").style.display = "block";
    document.getElementById("AllOtherSects").style.filter = "opacity(100%)";
    document.getElementById("AllOtherSects").style.top = "0";
    document.getElementsByTagName("nav")[0].style.display = "flex";
    document.getElementsByTagName("nav")[0].style.filter = "opacity(100%)";
  }, 500)

  if (Lang == "AR") {
    document.getElementsByTagName("nav")[0].style.direction = "rtl";
    document.getElementsByTagName("nav")[0].style.textAlign = "right";
    document.getElementsByTagName("h1")[0].innerHTML = "تعلم البرمجة";
    document.getElementsByTagName("h1")[0].style.fontFamily = "Arabic";
    document.getElementsByTagName("a")[0].innerHTML = "الرئيسية";
    document.getElementsByTagName("a")[1].innerHTML = "عن";
    document.getElementsByTagName("a")[2].innerHTML = "اتصل بنا";
    document.getElementsByTagName("h1")[3].innerHTML = "تعلم البرمجة";
    document.getElementById("OR").innerHTML = "أو";
    document.getElementById("Switch").innerHTML = "تبديل اللغة";
    document.getElementById("Return").innerHTML = "العودة للتحديد";
  } else {
    document.getElementsByTagName("nav")[0].style.direction = "ltr";
    document.getElementsByTagName("nav")[0].style.textAlign = "left";
    document.getElementsByTagName("h1")[0].innerHTML = "Learn Code";
    document.getElementsByTagName("h1")[0].style.fontFamily = "Title";
    document.getElementsByTagName("a")[0].innerHTML = "Home";
    document.getElementsByTagName("a")[1].innerHTML = "About";
    document.getElementsByTagName("a")[2].innerHTML = "Contact";
    document.getElementsByTagName("h1")[3].innerHTML = "Learn Code";
    document.getElementById("OR").innerHTML = "OR";
    document.getElementById("Switch").innerHTML = "Switch Language";
    document.getElementById("Return").innerHTML = "Return To Setup";
  }
}

@font-face {
  font-family: Title;
  src: url(Fonts/cream_beige/Cream Beige.ttf);
}

@font-face {
  font-family: Arabic;
  src: url(Fonts/Rubik/static/Rubik-Regular.ttf);
}

.Flex {
  display: flex;
}


/* to make every div with this class flex*/

* {
  transition: 0.5s;
  font-family: Rubik;
}

body {
  background-image: linear-gradient(rgba(0, 0, 0, 0.57), rgba(0, 0, 0, 0.57)), url("https://i.ytimg.com/vi/PIhVTAdmouw/maxresdefault.jpg");
  background-repeat: no-repeat;
  background-attachment: fixed;
  background-size: cover;
  animation: BackgroundAnimation 20s infinite ease-in-out;
  color: white;
  margin: 0;
  padding: 0;
}

@keyframes BackgroundAnimation {
  0% {
    background-position: left;
  }
  50% {
    background-position: right;
  }
  100% {
    background-position: left;
  }
}

section {
  height: 100vh;
}

nav {
  padding: 20px;
  display: none;
  filter: opacity(0);
  align-items: center;
  position: fixed;
  width: 100%;
}

nav h1 {
  margin: 10px;
  font-size: xx-large;
  font-family: Title;
  font-weight: 100;
}

nav a {
  margin: 0 20px;
  font-size: 20px;
}

a {
  text-decoration: none;
  color: white;
}

#select-language {
  height: 97vh;
  width: 100%;
  text-align: center;
  align-content: center;
}

#SelectLanguage-text {
  margin-bottom: 0;
  position: relative;
  top: 30px;
  filter: opacity(0);
}

#SelectLanguage-text-ar {
  letter-spacing: 2px;
  margin-top: 0;
  position: relative;
  top: 30px;
  filter: opacity(0);
  font-family: Arabic;
}

#select-language button {
  background-color: rgba(0, 0, 0, 0.61);
  color: white;
  border: 10px white solid;
  padding: 20px 70px;
  font-size: large;
  margin: 20px;
}

#select-language button:hover {
  /*padding: 30px 100px;*/
  transform: scale(1.2);
}

.AR,
.EN {
  top: 30px;
  display: none;
  position: relative;
  filter: opacity(0);
}

#AllOtherSects {
  display: none;
  position: relative;
  filter: opacity(0);
  top: 30px
}

#S1 {
  color: white;
  text-align: center;
  align-content: center;
}

#S1 h1 {
  font-size: 100px;
}

.transparent {
  background-color: transparent;
  border: none;
  color: white;
  font-size: large;
  margin: 20px;
}

.transparent:hover {
  /*padding: 30px 100px;*/
  transform: scale(1.2);
}

<!DOCTYPE html>
<html>

<head>
  <title>Home</title>
  <link rel="stylesheet" href="style.css">
  <link rel="preconnect" href="https://fonts.googleapis.com">
  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
  <link href="https://fonts.googleapis.com/css2?family=Rubik:ital,wght@0,300..900;1,300..900&display=swap" rel="stylesheet">

</head>

<body>
  <nav>
    <img src="Images/code-slash.svg" alt="">
    <h1>Learn Code</h1>
    <a href="Home.html">Home</a>
    <a href="About.html">About</a>
    <a href="Contact.html">Contact</a>
  </nav>
  <section id="select-language">
    <h1 style="font-size: 40px; font-weight: 300;" id="SelectLanguage-text">Select Language</h1>
    <h1 style="font-size: 40px; font-weight: 300;" id="SelectLanguage-text-ar">اختر اللغة</h1>
    <div class="Flex" style="justify-content: center; flex-wrap: wrap;">
      <button class="AR" onclick="">العربية</button>
      <button class="EN" onclick="">English</button>
    </div>
  </section>
  <div id="AllOtherSects">
    <section id="S1">
      <h1>The Coding</h1>
      <button id="Switch" class="transparent">Switch Language</button><label id="OR"> OR </label><button id="Return" class="transparent">Return To Setup</button>
    </section>
  </div>
  <script src="Script.js"></script>
</body>

</html>

You Will Notice That the body when you click on English Or العربية Appears Instantly Without An Opacity Animation. But It Works Only at the start.

I Tried To Replace The Opacity With Scale, So The code looks like this:

@font-face {
    font-family: Title;
    src: url(Fonts/cream_beige/Cream Beige.ttf);
}
@font-face {
    font-family: Arabic;
    src: url(Fonts/Rubik/static/Rubik-Regular.ttf);
}
.Flex {
    display: flex;
}
/* to make every div with this class flex*/
* {
    transition: 0.5s;
    font-family: Arabic;
}
body {
    background-image: linear-gradient(rgba(0, 0, 0, 0.57),rgba(0, 0, 0, 0.57)),url(Images/Background.jpg);
    background-repeat: no-repeat;
    background-attachment: fixed;
    background-size: cover;
    animation: BackgroundAnimation 20s infinite ease-in-out;
    color: white;
    margin: 0;
    padding: 0;
}
@keyframes BackgroundAnimation {
    0% {
        background-position: left;
    }
    50% {
        background-position: right;
    }
    100% {
        background-position: left;
    }
}
section {
    height: 100vh;
}
nav {
    padding: 20px;
    display: none;
    filter: opacity(0);
    align-items: center;
    position: fixed;
    width: 100%;
}
nav h1 {
    margin: 10px;
    font-size: xx-large;
    font-family: Title;
    font-weight: 100;
}
nav a {
    margin: 0 20px;
    font-size: 20px;
}
a {
    text-decoration: none;
    color: white;
}
#select-language {
    height: 97vh;
    width: 100%;
    text-align: center;
    align-content: center;
}
#SelectLanguage-text {
    margin-bottom: 0;
    position: relative;
    top: 30px;
    filter: opacity(0);
}
#SelectLanguage-text-ar {
    letter-spacing: 2px;
    margin-top: 0;
    position: relative;
    top: 30px;
    filter: opacity(0);
    font-family: Arabic;
}
#select-language button {
    background-color: rgba(0, 0, 0, 0.61);
    color: white;
    border: 10px white solid;
    padding: 20px 70px;
    font-size: large;
    margin: 20px;
}
#select-language button:hover {
    /*padding: 30px 100px;*/
    transform: scale(1.2);
}
.AR,.EN {
    top: 30px;
    display: none;
    position: relative;
    filter: opacity(0);
}
#AllOtherSects {
    display: none;
    position: relative;
    filter: opacity(0);
    top: 30px
}
#S1 {
    color: white;
    text-align: center;
    align-content: center;
}
#S1 h1 {
    font-size: 100px;
}
.transparent {
    background-color: transparent;
    border: none;
    color: white;
    font-size: large;
    margin: 20px;
}
.transparent:hover {
    /*padding: 30px 100px;*/
    transform: scale(1.2);
}

document.getElementById("select-language").style.transform = "scale(1)";
    setTimeout(function(){
    document.getElementById("select-language").style.display = "none"; 
    document.getElementById("AllOtherSects").style.display = "block";
    document.getElementById("AllOtherSects").style.transform = "scale(1)";
    document.getElementById("AllOtherSects").style.top = "0";   
    document.getElementsByTagName("nav")[0].style.display = "flex";
    document.getElementsByTagName("nav")[0].style.transform = "scale(1)";  
    },500)

But It Also Didn’t Work!

Problem Description

In my Angular project, I’m using PrimeNG’s radio button component (p-radioButton) within my custom wrapper component (x-radio-button). This wrapper component implements the ControlValueAccessor interface.

Issue:
Everything works fine when using ngModel.
However, when I add a formControl, it correctly selects the default value, but when I select the other option, both radio buttons appear to be selected.

import { CommonModule } from '@angular/common';
import { FormsModule, NG_VALUE_ACCESSOR, ControlValueAccessor } from '@angular/forms';
import { Component, EventEmitter, Input, Output, forwardRef } from '@angular/core';
import { RadioButtonModule } from 'primeng/radiobutton';

@Component({
   selector: 'x-radio-button',
   standalone: true,
   imports: [CommonModule, FormsModule, RadioButtonModule],
   templateUrl: './radio-button.component.html',
   styleUrls: ['./radio-button.component.scss'],
   providers: [
       {
           provide: NG_VALUE_ACCESSOR,
           useExisting: forwardRef(() => RadioButtonComponent),
           multi: true,
       },
   ],
})
export class RadioButtonComponent implements ControlValueAccessor {
   @Input() name: string;
   @Input() value: any;
   @Input() label: string;
   @Input() inputId: string;
   @Output() select = new EventEmitter<any>();

   checked: boolean = false;

   public _internalValue: any;

   onChange = (value: any) => {};
   onTouched = () => {};

   // Value accessor interface
   writeValue(value: any): void {
       this._internalValue = value;
       this.checked = this._internalValue === this.value;
   }

   registerOnChange(fn: any): void {
       this.onChange = fn;
   }

   registerOnTouched(fn: any): void {
       this.onTouched = fn;
   }

   setDisabledState(isDisabled: boolean): void {
       // Implement if necessary for disabled state
   }

   onRadioChange(): void {
       this.checked = true;
       this.onChange(this.value);
       this.select.emit(this.value);
   }
}

<p-radioButton
    [name]="name"
    [value]="value"
    [(ngModel)]="_internalValue"
    [inputId]="inputId"
    (ngModelChange)="onRadioChange()">
</p-radioButton>

<label class="ml-2">{{ label }}</label>

Usage Scenario

<div>
   <x-radio-button
       [inputId]="'2'"
       [value]="'http'"
       formControlName="protocol">
   </x-radio-button>
   <x-radio-button
       [inputId]="'1'"
       [value]="'https'"
       formControlName="protocol">
   </x-radio-button>
</div>



this.parentForm.addControl(
   'protocol',
   new UntypedFormControl('http', Validators.required),
);

Expected Behavior

I expect only one of the radio buttons to be selected. When using the FormControl, I want the other button to automatically be disabled when one button is selected.
Help Needed

How can I fix this issue? I’m open to suggestions.

I have a autoplaying, continuously looping and click/draggable carousel I’ve created using Keen Slider.

This works well, however on mobile the carousel content jumps horizontally when I scroll down the page. This only occurs on the first scroll and is fine after. Tested on iPhone 15 Pro in Safari and Chrome, same result in each.

After some research it looks as though this is in relation to the origin recalculating as the viewport resizes. You can actually see this on desktop if you shrink/enlarge your browser horizontally. The content jumps, which I don’t mind. But on mobile I think this looks like a bug as it’s just a page scroll – but I imagine caused by the dynamic resizing of the URL bar.

Slides/Origin Doc: https://keen-slider.io/docs#slides-object–number–function–null

I’ve included a code example, where you can see the jump/shift on desktop if you resize your browser. I know my issue is on mobile but hopefully this helps to see the issue and test.

I’m not sure if disabling this is the correct approach but basically I don’t want the content to realign to the left edge (or centre, which is another option) on resize.

I’d really appreciate some help and ideas on the best way to resolve this issue – or at least make it more deliberate.

/* Lazy Load Effect */

const pixelImage = document.querySelectorAll(".pixel-load")

pixelImage.forEach(div => {
    const img = div.querySelector("img")

    function loaded() {
        div.classList.add("loaded")
    }

    if (img.complete) {
        loaded()
    } else {
        img.addEventListener("load", loaded)
    }
})


/* Keen Slider */

var animation = { duration: 40000, easing: (t) => t }
new KeenSlider("#gallery-slider", {
    loop: true,
    mode: "free",
    slides: {
        perView: 1.5,
        renderMode: "precision",
        spacing: 8
    },
    breakpoints: {
        '(min-width: 768px)': {
            slides: {
                perView: 3,
                spacing: 8
            }
        },
        '(min-width: 1024px)': {
            slides: {
                perView: 4,
                spacing: 8
            }
        }
    },
    created(s) {
        document.getElementById("gallery-slider").classList.add("loaded");
        s.moveToIdx(4, true, animation);
    },
    updated(s) {
        s.moveToIdx(s.track.details.abs + 4, true, animation);
    },
    animationEnded(s) {
        s.moveToIdx(s.track.details.abs + 4, true, animation);
    }
})

/* ==========================================================================
   #BASE
   ========================================================================== */

html {
  font-size: 62.5%;
  margin: 0;
  padding: 0;
}

body {
  font-size: 12px;
  font-family: "Arial", sans-serif;
  margin: 0;
  padding: 64px 0 0;
  text-transform: uppercase;
}

h2 {
  font-size: 12px;
  font-weight: 400;
  margin: 0 16px 16px;
  padding: 0;
}

figure {
  margin: 0;
  padding: 0;
}

img {
  height: auto;
  width: 100%;
  max-width: 100%;
}


/* ==========================================================================
   #KEEN SLIDER
   ========================================================================== */

.keen-slider {
    display: flex;
    align-content: flex-start;
    overflow: hidden;
    position: relative;
    touch-action: pan-y;
    user-select: none;
    width: 100%;
    -webkit-tap-highlight-color: transparent;
}

.keen-slider .keen-slider__slide {
    min-height: 100%;
    overflow: hidden;
    position: relative;
    width: 100%;
}


/* ==========================================================================
   #GALLERY
   ========================================================================== */


/**
 * My overrides for the Keen Slider gallery.
 *
 * 1. Remove `overflow: hidden` from the slider and add it to the parent. This
 *    allows the slider to align with the grid but also bleed off the edges of
 *    the page.
 * 2. Align container with the global grid.
 */

.gallery {
  margin-bottom: 64px;
  overflow: hidden; /* [1] */
  padding: 0 16px; /* [2] */
}

.gallery .keen-slider {
  overflow: visible; /* [1] */
}


/**
 * As the widths for each slide are set in Javascript. We add widths to slides
 * before `.keen-slider` has loaded to keep the layout consistent and help with
 * the Cumulative Layout Shift (CLS) and performance.
 */

.keen-slider:not(.loaded) .keen-slider__slide {
  width: calc((100vw / 1.5) - 24px);
}

@media(min-width: 48em) {
  .keen-slider:not(.loaded) .keen-slider__slide {
    width: calc((100vw - 48px) / 3);
  }
}

@media(min-width: 64rem) {
  .keen-slider:not(.loaded) .keen-slider__slide {
    width: calc((100vw - 56px) / 4);
  }
}


/* ==========================================================================
   #PIXEL LOAD
   ========================================================================== */


/**
 * Add a pixelated effect to images while the load.
 */

.pixel-load {
  overflow: hidden;
  position: relative;
}

.pixel-load__preload img {
  image-rendering: pixelated;
    position: absolute;
    inset: 0;
    opacity: 1;
    pointer-events: none;
}

.loaded .pixel-load__preload img {
  animation: loaded .32s .16s steps(1, end) both;
}

@keyframes loaded {
  0%      {scale: 2;}
  33%     {scale: 1.5;}
  66%     {scale: 1;}
  100%    {opacity: 0; z-index: 1;}
}

<script src="https://cdn.jsdelivr.net/npm/[email protected]/keen-slider.min.js"></script>
<!-- Keen Slider -->
<div class="gallery">
  <div id="gallery-slider" class="keen-slider">
    <div class="keen-slider__slide">
      <figure data-label="Hover Label 1" class="has-label">
        <div class="pixel-load">
          <div class="pixel-load__preload">
            <img src="https://placebeard.it/18/24" width="18" height="24" loading="eager">
          </div>
          <img src="https://placebeard.it/768/1024" width="768" height="1024" loading="lazy" />
        </div>
        <figcaption>Slide 1</figcaption>
      </figure>
    </div>
    <div class="keen-slider__slide">
      <figure data-label="Hover Label 2" class="has-label">
        <div class="pixel-load">
          <div class="pixel-load__preload">
            <img src="https://placebeard.it/18/24" width="18" height="24" loading="eager">
          </div>
          <img src="https://placebeard.it/768/1024" width="768" height="1024" loading="lazy" />
        </div>
        <figcaption>Slide 2</figcaption>
      </figure>
    </div>
    <div class="keen-slider__slide">
      <figure data-label="Hover Label 3" class="has-label">
        <div class="pixel-load">
          <div class="pixel-load__preload">
            <img src="https://placebeard.it/18/24" width="18" height="24" loading="eager">
          </div>
          <img src="https://placebeard.it/768/1024" width="768" height="1024" loading="lazy" />
        </div>
        <figcaption>Slide 3</figcaption>
      </figure>
    </div>
    <div class="keen-slider__slide">
      <figure data-label="Hover Label 4" class="has-label">
        <div class="pixel-load">
          <div class="pixel-load__preload">
            <img src="https://placebeard.it/18/24" width="18" height="24" loading="eager">
          </div>
          <img src="https://placebeard.it/768/1024" width="768" height="1024" loading="lazy" />
        </div>
        <figcaption>Slide 4</figcaption>
      </figure>
    </div>
    <div class="keen-slider__slide">
      <figure data-label="Hover Label 5" class="has-label">
        <div class="pixel-load">
          <div class="pixel-load__preload">
            <img src="https://placebeard.it/18/24" width="18" height="24" loading="eager">
          </div>
          <img src="https://placebeard.it/768/1024" width="768" height="1024" loading="lazy" />
        </div>
        <figcaption>Slide 5</figcaption>
      </figure>
    </div>
    <div class="keen-slider__slide">
      <figure data-label="Hover Label 6" class="has-label">
        <div class="pixel-load">
          <div class="pixel-load__preload">
            <img src="https://placebeard.it/18/24" width="18" height="24" loading="eager">
          </div>
          <img src="https://placebeard.it/768/1024" width="768" height="1024" loading="lazy" />
        </div>
        <figcaption>Slide 6</figcaption>
      </figure>
    </div>
    <div class="keen-slider__slide">
      <figure data-label="Hover Label 7" class="has-label">
        <div class="pixel-load">
          <div class="pixel-load__preload">
            <img src="https://placebeard.it/18/24" width="18" height="24" loading="eager">
          </div>
          <img src="https://placebeard.it/768/1024" width="768" height="1024" loading="lazy" />
        </div>
        <figcaption>Slide 7</figcaption>
      </figure>
    </div>
    <div class="keen-slider__slide">
      <figure data-label="Hover Label 8" class="has-label">
        <div class="pixel-load">
          <div class="pixel-load__preload">
            <img src="https://placebeard.it/18/24" width="18" height="24" loading="eager">
          </div>
          <img src="https://placebeard.it/768/1024" width="768" height="1024" loading="lazy" />
        </div>
        <figcaption>Slide 8</figcaption>
      </figure>
    </div>
  </div>
</div>
<!-- End Keen Slider -->

So this is my first time programming, I’m trying to create a scraper that pulls text, I’m trying to follow along with a YouTube video but I’m getting different results, when running my code it only gives this:

PS C:Usersbasje> & 'g:codingvs codefilesDiscord Gta Botscrapers.js'

which is just the file location of the file.
i ran the code by clicking the 3 dots on the terminal and pressing “Run Active File”
i did import puppeteer and made an empty packaged json
here are the code and YouTube video for reference

const puppeteer = require('puppeteer');

async function scrapeProduct(url) {
    const browser = await puppeteer.launch();
    const page = await browser.newPage()
    await page.goto(url)

    const[el] = await page.$x('//*[@id="productTitle"]')
    const txt = await el.getProperty('textContent');
    const rawTxt = await txt.JsonValue();

    console.log({srcTxt, rawTxt});


}

scrapeProduct('https://www.amazon.nl/SKYLEO-Bureaulamp-Aanraakbediening-helderheidsniveaus-          
geheugenfunctie/dp/B0CG17QTVS?ref_=ast_slp_dp&th=1&psc=1'); 

https://www.youtube.com/watch?v=TzZ3YOUhCxo

For some reason, I can display boxes and all, but everytime I try to display a DIV after a select has been chosen, nothing happens… Please advice.

JS:

$(document).ready(function () {
            var divs = document.getElementById('showRef');
            divs.style.display = 'none';
            $('.selRef').on('change', function () {

                var refValid = (this.value == "Yes");
                $(txtWeek).prop('required', refValid);
                if (refValid) {
                    divs.style.display = 'block';
                }
                else {
                    divs.style.display = 'none';
                }
            })
        });

ASP:

                                    <div class="col-md-12">
                                        <div class="input-group">
                                            <select id='selRef'
                                            required runat="server" clientidmode="Static" class="form-control selRef">
                                            <option value="No" selected>No</option>
                                            <option value="Yes">Yes</option>
                                        </select>
                                        </div>
                                    </div>
                                </div>

                            </div>
                            <div id="showRef" runat="server">
                            <div class="row mt-3">
                    ....

Everytime I click or change the dropdownvalue, nothing happens…

I have several div boxes on a page. I want to check to see if I can scroll to the end of the page. There was a bug yesterday on the website where the user couldn’t scroll to the end of the page. How can I check this using playwright?

i am running the react native app. It was good till yesterday, but today i am getting the error as below, while I am trying to install the modules listed in the package.json using the
yarn install command, not sure what is happening, but if i upgrade the yarn to berry version it works though, but unable to install the app, though i was able to install the modules. not sure what is happening:

FATAL ERROR: Reached heap limit Allocation failed - JavaScript heap out of memory
----- Native stack trace -----

 1: 0x1001a7eb8 node::OOMErrorHandler(char const*, v8::OOMDetails const&) [/Users/riktam/.nvm/versions/node/v20.18.0/bin/node]
 2: 0x10033662c v8::internal::V8::FatalProcessOutOfMemory(v8::internal::Isolate*, char const*, v8::OOMDetails const&) [/Users/riktam/.nvm/versions/node/v20.18.0/bin/node]
 3: 0x10050ad00 v8::internal::Heap::GarbageCollectionReasonToString(v8::internal::GarbageCollectionReason) [/Users/riktam/.nvm/versions/node/v20.18.0/bin/node]
 4: 0x1005097dc v8::internal::Heap::CollectGarbage(v8::internal::AllocationSpace, v8::internal::GarbageCollectionReason, v8::GCCallbackFlags) [/Users/riktam/.nvm/versions/node/v20.18.0/bin/node]
 5: 0x1004ffff4 v8::internal::HeapAllocator::AllocateRawWithLightRetrySlowPath(int, v8::internal::AllocationType, v8::internal::AllocationOrigin, v8::internal::AllocationAlignment) [/Users/riktam/.nvm/versions/node/v20.18.0/bin/node]
 6: 0x100500854 v8::internal::HeapAllocator::AllocateRawWithRetryOrFailSlowPath(int, v8::internal::AllocationType, v8::internal::AllocationOrigin, v8::internal::AllocationAlignment) [/Users/riktam/.nvm/versions/node/v20.18.0/bin/node]
 7: 0x1004e58c4 v8::internal::Factory::NewFillerObject(int, v8::internal::AllocationAlignment, v8::internal::AllocationType, v8::internal::AllocationOrigin) [/Users/riktam/.nvm/versions/node/v20.18.0/bin/node]
 8: 0x1008cd5d4 v8::internal::Runtime_AllocateInYoungGeneration(int, unsigned long*, v8::internal::Isolate*) [/Users/riktam/.nvm/versions/node/v20.18.0/bin/node]
 9: 0x100c2cc44 Builtins_CEntry_Return1_ArgvOnStack_NoBuiltinExit [/Users/riktam/.nvm/versions/node/v20.18.0/bin/node]
10: 0x100c48664 Builtins_ArrayPrototypeJoin [/Users/riktam/.nvm/versions/node/v20.18.0/bin/node]
11: 0x105fee3d4 
12: 0x105ff7d04 
13: 0x105fdc654 
14: 0x100ba43e4 Builtins_InterpreterEntryTrampoline [/Users/riktam/.nvm/versions/node/v20.18.0/bin/node]
15: 0x100ba43e4 Builtins_InterpreterEntryTrampoline [/Users/riktam/.nvm/versions/node/v20.18.0/bin/node]
16: 0x100bdd4c4 Builtins_GeneratorPrototypeNext [/Users/riktam/.nvm/versions/node/v20.18.0/bin/node]
17: 0x105f50610 
18: 0x105ddeb2c 
19: 0x100ba43e4 Builtins_InterpreterEntryTrampoline [/Users/riktam/.nvm/versions/node/v20.18.0/bin/node]
20: 0x100ba43e4 Builtins_InterpreterEntryTrampoline [/Users/riktam/.nvm/versions/node/v20.18.0/bin/node]
21: 0x100bdd4c4 Builtins_GeneratorPrototypeNext [/Users/riktam/.nvm/versions/node/v20.18.0/bin/node]
22: 0x105f50610 
23: 0x105ddeb2c 
24: 0x100ba43e4 Builtins_InterpreterEntryTrampoline [/Users/riktam/.nvm/versions/node/v20.18.0/bin/node]
25: 0x100ba43e4 Builtins_InterpreterEntryTrampoline [/Users/riktam/.nvm/versions/node/v20.18.0/bin/node]
26: 0x100bdd4c4 Builtins_GeneratorPrototypeNext [/Users/riktam/.nvm/versions/node/v20.18.0/bin/node]
27: 0x105f65944 
28: 0x100c88fb8 Builtins_PromiseFulfillReactionJob [/Users/riktam/.nvm/versions/node/v20.18.0/bin/node]
29: 0x100bcab94 Builtins_RunMicrotasks [/Users/riktam/.nvm/versions/node/v20.18.0/bin/node]
30: 0x100ba23f4 Builtins_JSRunMicrotasksEntry [/Users/riktam/.nvm/versions/node/v20.18.0/bin/node]
31: 0x100478180 v8::internal::(anonymous namespace)::Invoke(v8::internal::Isolate*, v8::internal::(anonymous namespace)::InvokeParams const&) [/Users/riktam/.nvm/versions/node/v20.18.0/bin/node]
32: 0x10047866c v8::internal::(anonymous namespace)::InvokeWithTryCatch(v8::internal::Isolate*, v8::internal::(anonymous namespace)::InvokeParams const&) [/Users/riktam/.nvm/versions/node/v20.18.0/bin/node]
33: 0x100478848 v8::internal::Execution::TryRunMicrotasks(v8::internal::Isolate*, v8::internal::MicrotaskQueue*) [/Users/riktam/.nvm/versions/node/v20.18.0/bin/node]
34: 0x10049fa14 v8::internal::MicrotaskQueue::RunMicrotasks(v8::internal::Isolate*) [/Users/riktam/.nvm/versions/node/v20.18.0/bin/node]
35: 0x1004a01b0 v8::internal::MicrotaskQueue::PerformCheckpoint(v8::Isolate*) [/Users/riktam/.nvm/versions/node/v20.18.0/bin/node]
36: 0x1000d0c4c node::InternalCallbackScope::Close() [/Users/riktam/.nvm/versions/node/v20.18.0/bin/node]
37: 0x1000d0fe4 node::InternalMakeCallback(node::Environment*, v8::Local<v8::Object>, v8::Local<v8::Object>, v8::Local<v8::Function>, int, v8::Local<v8::Value>*, node::async_context) [/Users/riktam/.nvm/versions/node/v20.18.0/bin/node]
38: 0x1000e7070 node::AsyncWrap::MakeCallback(v8::Local<v8::Function>, int, v8::Local<v8::Value>*) [/Users/riktam/.nvm/versions/node/v20.18.0/bin/node]
39: 0x1001ad2f0 node::fs::FSReqCallback::Reject(v8::Local<v8::Value>) [/Users/riktam/.nvm/versions/node/v20.18.0/bin/node]
40: 0x1001adb9c node::fs::FSReqAfterScope::Reject(uv_fs_s*) [/Users/riktam/.nvm/versions/node/v20.18.0/bin/node]
41: 0x1001addc0 node::fs::AfterNoArgs(uv_fs_s*) [/Users/riktam/.nvm/versions/node/v20.18.0/bin/node]
42: 0x1001a1d44 node::MakeLibuvRequestCallback<uv_fs_s, void (*)(uv_fs_s*)>::Wrapper(uv_fs_s*) [/Users/riktam/.nvm/versions/node/v20.18.0/bin/node]
43: 0x100b7e0e0 uv__work_done [/Users/riktam/.nvm/versions/node/v20.18.0/bin/node]
44: 0x100b81b30 uv__async_io [/Users/riktam/.nvm/versions/node/v20.18.0/bin/node]
45: 0x100b93c08 uv__io_poll [/Users/riktam/.nvm/versions/node/v20.18.0/bin/node]
46: 0x100b820f4 uv_run [/Users/riktam/.nvm/versions/node/v20.18.0/bin/node]
47: 0x1000d16f0 node::SpinEventLoopInternal(node::Environment*) [/Users/riktam/.nvm/versions/node/v20.18.0/bin/node]
48: 0x1001e7b64 node::NodeMainInstance::Run(node::ExitCode*, node::Environment*) [/Users/riktam/.nvm/versions/node/v20.18.0/bin/node]
49: 0x1001e7878 node::NodeMainInstance::Run() [/Users/riktam/.nvm/versions/node/v20.18.0/bin/node]
50: 0x10016f654 node::Start(int, char**) [/Users/riktam/.nvm/versions/node/v20.18.0/bin/node]
51: 0x194084274 start [/usr/lib/dyld]
zsh: abort      yarn install

I’m using Full Calendar and rrule plug in .net 8 core project. I’m trying to add the exdate to recurring events. Here is my code

events: function (fetchInfo, successCallback, failureCallback) {
$.ajax({
    url: "@Url.Action("GetCalendarEvents", "CalendarEvents")",
    method: 'GET',
    dataType: 'json',
    success: function (response) {
        var events = [];

        $.each(response, function () {
            var e = "'2024-11-05T13:30:00','2024-11-07T13:30:00'";
            var temp = '';
            if (this.dtstart !== null) {
                temp = this.dtstart.replace(/-/g, '');
                temp = temp.replace(/:/g, '');
                var r = 'DTSTART:' + temp + 'nRRULE:' + this.rrule;
            }
            events.push({
                title: this.title,
                start: this.event_start,
                end: this.event_end,
                backgroundColor: this.color,
                borderColor: this.color,
                textColor: '#ffffff',
                rrule: r,
                extendedProps: {
                    description: this.description,
                    start: this.start,
                    end: this.end,
                    color: this.color,
                    start_time: this.start_time,
                    end_time: this.end_time,
                    recurring: this.recurring,
                    id: this.id
                }
                //exdate: [e]
                //exdate: ['2024-11-05T13:30:00', '2024-11-07T13:30:00']
            });
        });
        successCallback(events);
    },
    error: function (jqXHR, textStatus, errorThrown) {
        console.log('Error: ' + textStatus);
        //failureCallback();
    }
});
}

If I pass exdate: [‘2024-11-05T13:30:00’, ‘2024-11-07T13:30:00’], all works well. but if I pass exdate as a variable like this

var e = "'2024-11-05T13:30:00','2024-11-07T13:30:00'";
exdate: [e]

I get TypeError: Cannot read properties of null (reading ‘timeZoneOffset’) error. Any idea what mistake I’m making?

The reason I’m using variable is because the exdates will come from an ajax call to database.

I’m working on a very old legacy app that is on the way of getting replaced with a modern solution, but that should work as intended for the remaining time until this new solution is finished.

This Xamarin app uses Web views to render some data, and more precisely, it builds a webview inside the app using a solution very similar to the one described in this tutorial.

There is a few steps to build such a webview, starting from a script building method that will progressively add some script tags inside of the webview. Some of those tags implies that they will need to trigger CS methods from the JS code via Invoke methods.

Before I ever started working on the app, this system was working just fine, and was able to trigger CS methods from within the JS scripts of the webview, via a Export tag above the said methods.

My job was to make the app usable on Android 12 and above, as it was targeting mostly android 6 and 4.4 in the multiple subprojects of the solution, with a MinTargetVersion targeting android 2.3. And this was the parameter that needed to change to make it installable on modern devices (with a bit of extra work on some methods, like permissions for example).

But when I change the MinTargetVersion, it can indeed run even on Android 14, but every single webview using script injection that should trigger CS methods completely stopped working, with this kind of errors :

"Uncaught TypeError: JS2CS.CallCS is not a function", source: file:///android_res/ (1)

I tested with a way simpler webview, just loading a bit of text and css, and everything works properly, it’s really just when calling external methods. There’s no warnings, no deprecation on any part of the involved code, and I just can’t understand why changing the MinTargetVersion only makes such a difference.

Is there a JavaScript library or anything else that allows me to embed a Power BI PBIX file into an HTML? I have a web system made in laravel and I would like to embed some reports in .pbix

I couldn’t find anything, I appreciate the help.

Here is a code:

Problem:
Children is a text typed by user, for example:
22. Test1
44. Test2
66. Test3

Edit: Even here (while creating this question), when I tried to write ordered list, the preview automatically convert to own numbering from 1 – that’s way this is in single line.

The TextDisplay component returns:

1. Test1
2. Test2
3. Test3

So component ignores my own numbering (22,44,66) and start counting from 1.

Question: How to keep numbering 22,44,66? Is it normal behaviour / default when we use ordered list? Can I do something to avoid overwriting numbering by user with default 1,2,3..

import React from 'react';
import ReactMarkdown from 'react-markdown';

import * as Styled from './TextDisplay.styles';

const allowedElements = ['br', 'p', 'em', 'strong', 'a', 'img', 'ul', 'ol', 'li', 'hr'];

type Props = {
  children: string;
  className?: string;
};

const TextDisplay = ({ children, className }: Props) => (
  <Styled.TextDisplay className={className}>
    <ReactMarkdown
      allowedElements={allowedElements}
      components={{
        p: Styled.Paragraph,
        strong: Styled.Strong,
        em: Styled.Emphasis,
        ul: Styled.List,
        li: Styled.ListItem,
        ol: Styled.OrderedList,
        a: Styled.Link,
        hr: Styled.HorizontalLine,
      }}
    >
      {children}
    </ReactMarkdown>
  </Styled.TextDisplay>
);

export default TextDisplay;


const List = styled.ul`
  display: block;
  list-style-type: disc;
  margin-block-start: 1em;
  margin-block-end: 1em;
  margin-inline-start: 0;
  margin-inline-end: 0;
  padding-inline-start: 20px;
`;

const OrderedList = styled(List).attrs({ as: 'ol' })`
  list-style-type: decimal;
`;

const ListItem = styled.li`
  display: list-item;
  text-align: match-parent;
`;

I’m working on a custom tab bar in a React Native (Expo) application using react-native-reanimated and react-native-svg. I want to create a circular cutout effect that aligns with the tab items, but I’m struggling to achieve smooth transitions on both sides of the cutout without increasing the depth of the circle.

Current Code

import React, { useState, useEffect, useMemo } from 'react';
import { View, StyleSheet, LayoutChangeEvent, useWindowDimensions } from 'react-native';
import { BottomTabBarProps } from '@react-navigation/bottom-tabs';
import Animated, {
    useAnimatedStyle,
    useSharedValue,
    useAnimatedProps,
    Easing,
    withTiming,
} from 'react-native-reanimated';
import Svg, { Path } from 'react-native-svg';
import TabBarAnimation from './TabBarAnimation';
import { SafeAreaView } from 'react-native-safe-area-context';

const AnimatedSvg = Animated.createAnimatedComponent(Svg);
const AnimatedPath = Animated.createAnimatedComponent(Path);

const CIRCLE_VERTICAL_OFFSET = -35;

const TabBar = ({ state, descriptors, navigation }: BottomTabBarProps) => {
    const { width } = useWindowDimensions();
    const [dimensions, setDimensions] = useState({ width: width, height: 60 });

    const tabWidth = dimensions.width / state.routes.length;
    const buttonWidth = dimensions.width / state.routes.length;

    const onTabbarLayout = (e: LayoutChangeEvent) => {
        setDimensions({
            height: e.nativeEvent.layout.height,
            width: e.nativeEvent.layout.width,
        });
    };

    const tabPositionX = useSharedValue(0);
    const circleY = useSharedValue(0);
    const animatedStyle = useAnimatedStyle(() => {
        return {
            transform: [{ translateX: tabPositionX.value + 2 }, { translateY: circleY.value }],
        };
    });

    useEffect(() => {
        tabPositionX.value = withTiming(tabWidth * state.index, { duration: 300 });
    }, [state.index, tabWidth]);

    // This part is responsible for creating SVG
    const animatedPathProps = useAnimatedProps(() => {
        const cutoutCenter = tabPositionX.value + tabWidth / 2 + 2; // Center of the cutout
        const cutoutRadius = 30; // Radius of the cutout
        const smoothingFactor = 10; // Factor for smoothing the edges

        return {
            d: `
            M0 0
            H${cutoutCenter - cutoutRadius - smoothingFactor}
            Q${cutoutCenter - cutoutRadius} 0, ${cutoutCenter - cutoutRadius} ${smoothingFactor}
            A${cutoutRadius} ${cutoutRadius} 0 0 0 ${cutoutCenter + cutoutRadius} ${smoothingFactor}
            Q${cutoutCenter + cutoutRadius} 0, ${cutoutCenter + cutoutRadius + smoothingFactor} 0
            H${dimensions.width}
            V${dimensions.height}
            H0
            V0
            Z
          `,
        };
    });

    const circleSize = Math.min(dimensions.height * 0.8, buttonWidth * 0.8);
    const circleMargin = (buttonWidth - circleSize) / 2;

    return (
        <SafeAreaView style={styles.safeArea} edges={['bottom']}>
            <View style={styles.container}>
                <View onLayout={onTabbarLayout} style={styles.tabbar}>
                    <Animated.View
                        style={[styles.circleContainer, animatedStyle, { width: tabWidth }]}
                    >
                        <View
                            style={[
                                styles.circle,
                                {
                                    width: circleSize,
                                    height: circleSize,
                                    borderRadius: circleSize / 2,
                                    top: `${CIRCLE_VERTICAL_OFFSET}%`,
                                },
                            ]}
                        />
                    </Animated.View>
                    <AnimatedSvg
                        width={dimensions.width}
                        height={dimensions.height}
                        style={StyleSheet.absoluteFill}
                    >
                        <AnimatedPath animatedProps={animatedPathProps} fill="black" />
                    </AnimatedSvg>
                    {state.routes.map((route, index) => {
                        const { options } = descriptors[route.key];
                        const label: string =
                            typeof options.tabBarLabel === 'string'
                                ? options.tabBarLabel
                                : typeof options.title === 'string'
                                  ? options.title
                                  : route.name;

                        const isFocused = state.index === index;

                        const onPress = () => {
                            const event = navigation.emit({
                                type: 'tabPress',
                                target: route.key,
                                canPreventDefault: true,
                            });

                            if (!isFocused && !event.defaultPrevented) {
                                navigation.navigate(route.name, route.params);
                            }
                        };

                        const onLongPress = () => {
                            navigation.emit({
                                type: 'tabLongPress',
                                target: route.key,
                            });
                        };

                        return (
                            <TabBarAnimation
                                key={route.name}
                                onPress={onPress}
                                onLongPress={onLongPress}
                                isFocused={isFocused}
                                routeName={route.name}
                                label={label}
                            />
                        );
                    })}
                </View>
            </View>
        </SafeAreaView>
    );
};

const styles = StyleSheet.create({
    container: {
        position: 'absolute',
        bottom: 0,
        left: 0,
        right: 0,
    },
    tabbar: {
        flexDirection: 'row',
        height: 60,
    },
    safeArea: {
        backgroundColor: 'transparent',
    },
    circleContainer: {
        position: 'absolute',
        top: 0,
        bottom: 0,
        justifyContent: 'center',
        alignItems: 'center',
    },
    circle: {
        backgroundColor: '#000',
        position: 'absolute',
    },
});

export default TabBar;

Issue

When I increase the smoothingFactor for the edges of the tab bar, it also increases the depth of the circular cutout but I want to have smooth transitions on both sides of the cutout without affecting the cutout’s depth or height if you want to call it that.

Question

What should I do to achieve smooth transitions at the edges leading to the circular cutout without changing its depth?

Desired result

This is what I want to achieve

Current State

This is what it currently looks like

Thank you for your help!

I have two pieces of code that look almost identical, but when I build them with webpack, I notice a key difference in the resulting bundles.
In one case, the module is included in the bundle, while in the other case, it is excluded.
I expected that webpack would include all modules with potential side effects in the bundle, regardless of any conditional logic.
However, it seems this isn’t always the case. Could anyone explain why this difference occurs?

• Case where the module is included in the bundle

const flag = false;
if (flag) {
  require("./myModule");
}

• Case where the module is excluded from the bundle

if (false) {
  require("./myModule");
}

I have a parent element with two inner elements:

<div data-controller="text">
  <p id="child1" data-text-max-length-value="100" contenteditable=true>
    Some text
  </p>
  <p id="child2" data-text-max-length-value="200" contenteditable=true>
    Some text
  </p>
</div>

Each child element sets a value. My understanding is the value should be assigned to its specific element. In my controller, however, the element is being identified as the outer div and the maxLength value is reading the default value.

export default class extends Controller {
  static values = {
    originalFontSize: String,
    maxLength: Number
  }

  limitLength() {
    console.log(this.element, this.maxLengthValue)
  }
 }

As you can see, I can access the element through event.target. Through that, I can find event.target.dataset.textMaxLengthValue. Is there a way to do this with stimulus though, and not just vanilla js? Or is it not possible for the same value to be set on multiple child elements. And why is this.element returning the parent instead of the child?

I’ve got a problem where I want a child component to call a function given to it as a prop from the parent. I have done it before with other components, but with this it just doesn’t work.

Here are the relevant parts of my parent component:

<template>
  <DataTable
    :on-double-click="goToDevicePage"
  />
</template>

And here are the relevant parts of my child component:

<template>
  <TableRow
    v-for="(row, index) in filteredRows"
    :key="row.id"
    @dblclick="() => handleDoubleClick(row)"
  />
</template>

<script setup lang="ts">
const props = defineProps<{
  onDoubleClick?: (cells: any[]) => void;
}>();

function handleDoubleClick(row: any) {
  const cells = row.getVisibleCells();
  if (props.onDoubleClick !== undefined) {
    props.onDoubleClick(cells);
    console.log("onDoubleClick is defined and called with cells:", cells);
  } else {
    console.log("onDoubleClick is undefined");
  }
}
</script>

This always logs that the function is undefined and I’m not sure why.

I have tried making the function in the parent component to an arrow function like so:

:on-double-click="(cells: any[]) => goToDevicePage(cells)"

I have also tried things like setting the prop to required in the child component and typescript gives me no error, but it still logs that its undefined and if I remove the check, it just throws an error. I also tried some things like adding .prop to the parent component prop and removing the ‘on’ in the name of the prop because chatgpt said vue may be thinking it’s an event listener, but literally nothing works.