Category: javascript

If you can recognise this:

<script src="https://www.googletagmanager.com/gtag/js?id=G-TOKENIDHERE"></script>

It is a heavy file for the first second and so it matters.
What I did:

1. List item
2. Used Async/Defer (but it still blocks)
3. Loaded it in worker process via PartyTown, (see this stack answer)and the script loads, but cannot call “collect” calls, so no analytics. Google can detect the tag though.
4. Copied the script contents from the url “googletagmanager.com/gtag/js?id=G-TOKENID” directly unto my page and that removed the blockage time. Although I am not sure this is okay.. There is nothing on the internet that mentions doing or not doing this.

The webpage is fully static and very less content, therefore getting blocked from rendering fast due to a third party analytics like this is undesired.

I want to write a web service (preferably in golang) which, given a URL, would render the page, executing all javascript for dynamic content, in order to save it as static html.

It would be used to collect articles or tutorials, without relying on URL being still readable 10 years later.

Are there any libraries that would act as a virtual browser, to acomplish something like this? Maybe a Javascript engine would be enough.

Alternatively I would use another service, hosting node.js or something similar to apply dynamic content to the given HTML.

So I followed the documentation on how to load fonts in Tamagui: Configuration
and I was able to load my fonts on expo.

apps/expo/app/_layout.tsx:

// ...
import { Glegoo_400Regular, Glegoo_700Bold } from '@expo-google-fonts/glegoo'
import {
  OpenSans_400Regular,
  OpenSans_600SemiBold,
  OpenSans_700Bold,
} from '@expo-google-fonts/open-sans'
import { Nunito_400Regular, Nunito_700Bold } from '@expo-google-fonts/nunito'

export const unstable_settings = {
  // Ensure that reloading on `/user` keeps a back button present.
  initialRouteName: 'Home',
}

// Prevent the splash screen from auto-hiding before asset loading is complete.
SplashScreen.preventAutoHideAsync()

export default function App() {
  const [interLoaded, interError] = useFonts({
    Inter: require('@tamagui/font-inter/otf/Inter-Medium.otf'),
    InterBold: require('@tamagui/font-inter/otf/Inter-Bold.otf'),
    Glegoo: Glegoo_400Regular,
    GlegooBold: Glegoo_700Bold,
    OpenSans: OpenSans_400Regular,
    OpenSansSemiBold: OpenSans_600SemiBold,
    OpenSansBold: OpenSans_700Bold,
    Nunito: Nunito_400Regular,
    NunitoBold: Nunito_700Bold,
  })

  useEffect(() => {
    if (interLoaded || interError) {
      // Hide the splash screen after the fonts have loaded (or an error was returned) and the UI is ready.
      SplashScreen.hideAsync()
    }
  }, [interLoaded, interError])

  if (!interLoaded && !interError) {
    return null
  }

  return <RootLayoutNav />
}

// ...
}

I used Open Sans for font body in my Tamagui config and the changes were reflected on native but not on web.

packages/config/src/tamagui.config.ts:

// ...

// Expo Google Fonts for branding.
const glegooFont = createFont({
  family: 'Glegoo',
  size: {
    1: 12,
    2: 14,
    3: 16,
    4: 18,
    5: 20,
    6: 22,
  },
  weight: {
    3: '700',
  },
  face: {
    700: { normal: 'GlegooBold' },
  },
})

const openSansFont = createFont({
  family: 'OpenSans',
  size: {
    1: 12,
    2: 14,
    3: 16,
    4: 18,
    5: 20,
    6: 22,
  },
  weight: {
    2: '600',
    3: '700',
  },
  face: {
    600: { normal: 'OpenSansSemiBold' },
    700: { normal: 'OpenSansBold' },
  },
})

const nunitoFont = createFont({
  family: 'Nunito',
  size: {
    1: 12,
    2: 14,
    3: 16,
    4: 18,
    5: 20,
    6: 22,
  },
  weight: {
    3: '700',
  },
  face: {
    700: { normal: 'NunitoBold' },
  },
})

// ...

export const config = createTamagui({
  defaultFont: 'body',
  animations,
  shouldAddPrefersColorThemes: true,
  themeClassNameOnRoot: true,

  // ...
 // I used Open Sans for body
  fonts: {
    body: openSansFont, 
    heading: headingFont,
  },
  // ...

The fonts that I loaded are not being shown on the web because I haven’t successfully loaded them yet on the next.js part of the mono repo but I was wondering what is the most appropriate method to load them, as the docs: Configuration haven’t really gone into details on how I should do it.

I tried this based on the docs but it still doesn’t apply my font configs from my tamagui.config.ts in the web.
I also tried using next/google/font method to load fonts but I still haven’t been able to make it work. What additional steps should I do to make sure that my fonts are loaded in Next.js?

app/next/pages/_app.tsx:

function MyApp({ Component, pageProps }: SolitoAppProps) {
  return (
    <>
      <Head>
        <title>Tamagui • Pages Router</title>
        <meta
          name="description"
          content="Tamagui, Solito, Expo & Next.js"
        />
        <link
          rel="icon"
          href="/favicon.ico"
        />
        {/* I tried loading fonts like this in Next.js */}
        <link rel="preconnect" href="https://fonts.googleapis.com" />
        <link rel="preconnect" href="https://fonts.gstatic.com" crossOrigin="anonymous" />
        <link
          href="https://fonts.googleapis.com/css2?family=Glegoo:wght@400;700&family=Nunito:ital,wght@0,200..1000;1,200..1000&family=Open+Sans:ital,wght@0,300..800;1,300..800&display=swap"
          rel="stylesheet"
        />
        <script
          dangerouslySetInnerHTML={{
            // avoid flash of animated things on enter:
            __html: `document.documentElement.classList.add('t_unmounted')`,
          }}
        />
      </Head>
      <ThemeProvider>
        <Component {...pageProps} />
      </ThemeProvider>
    </>
  )
}

In JavaScript, functions can’t be serialized because they close over their parent environment. Is there any way to check/enforce that a function doesn’t use variables from its parent environment?

E.g. something like:

function sum(a, b) {
   return a + b;
}

const greeting = "hello";
function greet() {
   console.log(greeting);
}

usesClosure(sum); // false
usesClosure(greet); // true

I need to convert these lines of code to javascript somehow, can you guys help me ?
(Let me explain what trying to do since you might be wondering this is SoapClient service for hotels to check their client’s id)

try 
  {
    //Cant change the left side of the const because of the SoapClient
    $inputs = array(
    "TCKimlikNo" => $IDN,
    "Ad" => $NAME,
    "Soyad" => $SURNAME,
    "DogumYili" => $BIRTH
    );

    $connect = new SoapClient('https://tckimlik.nvi.gov.tr/Service/KPSPublic.asmx?WSDL');
    $result = $connect->TCKimlikNoDogrula($inputs);

    if ($result->TCKimlikNoDogrulaResult){
    echo 'IDN correct';
    }
    else 
    {
    echo 'IDN incorrect';
    }
  }
catch (Exception $hata)
{
echo '! IDN is not available';
}

WHAT I TRIED :
I got “ReferenceError: SoapClient is not defined” error. This can be custom error message because I couldn’t find the same error on the internet

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8" />
<title>ID Inquiry</title>
</head>
<body>
<form>
<input type="button" onclick="fnc()" value="submit" />
<script>
    function fnc()
    {
        try
        {
            let IDN = parseFloat("");
            //I actually put real info here
            const NAME = "";
            const SURNAME = "";
            const DateOfBirth = "";
            
            const inputs = 
            {
                TCKimlikNo: IDN,
                Ad: NAME,
                Soyad: SURNAME,
                DogumYili: DateOfBirth
            };

            const soapClient = new SoapClient('https://tckimlik.nvi.gov.tr/Service/KPSPublic.asmx?WSDL');
            const resultt = soapClient.IDquestioning(inputs);

            if (resultt.IDquestioningResult) {
                alert('correct');
            } else {
                alert('incorrect');
            }

        } catch (error) {
            alert(error);
        }
    }
</script>
</form>
</body>
</html>

I know this is hard to help (probably) bc since you are not from my country you are not gonna be able to test. But if you have any idea to help I would be very grateful

Not sure if I’m doing an error in the code, but when I try to find the index of the letter z that is in the array I’ve split I will get this error:

TypeError: string "z" is not a function
    at Array.findIndex (<anonymous>)

Here is the code:

const chars: string = "abcdefghilmnopqrstuwxyz0123456789@-_+*(),.#";
let outputMatrix: Array<string> = [];
let outputWord: string = "";

// Split input matrix function 
const splitMatrix = async (inputMatrix: string) => {
  let splitted = inputMatrix.split(''); 
  let uppercaseChars = splitted.findIndex('z');
  console.log(uppercaseChars)
  console.log(splitted)
  return splitted;
}

// Generating random word
const createRandomString = (splittedChars: Array<string>, length?: number) => {
  const defaultLength: number = 12;
  const min: number  = 0;
  const max: number = splittedChars.length;
  let num: number;

  if (length) {
    for(let i: number = 0; i < length; i++) {
      num = Math.floor(Math.random() * (max - min) + min);
      outputWord += splittedChars[num];
    }
    return outputWord;
  } else {
    for(let i: number = 0; i < defaultLength; i++) {
      num = Math.floor(Math.random() * (max - min) + min);
      outputWord += splittedChars[num];
    }
  }
  console.log('Generated password', outputWord);
}

const main = () => {
  splitMatrix(chars)
    .then( (outputMatrix) => {
      createRandomString(outputMatrix);
    });
}

main();

What I want to do is to get the index of the z letter and after this extract all the elements that are before the letter including the letter to uppercase them.

I have a Scheme interpreter written in JavaScript called LIPS. It’s all ES Module. But as part of the standard library I’ve created require function that use code like this:

import { createRequire } from 'module';
const require = createRequire(import.meta.url);

But you can’t import esm package with require. So I need to implement import.

The problem is that import is not global variable. For some reason it’s accessible but not in window or global. So to get access it from scheme you need (using JavaScript syntax)

eval("import")("fs")

But eval don’t create ES context and this throw an error:

Uncaught SyntaxError: Cannot use import statement outside a module

I want to know if you can create ES context with eval, so I can access dynamic import with the need to modify the library JavaScript code.

In the code below, I am trying to use the leaftime package to make a map with a time slider. The idea is to color the countries/regions as the time moves from start date to end date. In addition, I would like the names of the countries (from the column Country) to pop up as labels while hovering over them (after it has been colored). I have looked online, and the examples I find mainly describe how to do this for point data (using the poinToLayer). I would appreciate any ideas how to implement this for polygon or multipolygon layers.

library(sf)
library(leaflet)
library(leaftime)


`# Creating base data frame with spatial polygons and country names`

power <- data.frame(
  "Country" = c("Germany", "Spain", "United Kingdom", "Italy", "United States", 
                "Thailand", "Singapore", "Japan", "France", "Australia"),
  "start" = seq.Date(as.Date("2015-01-01"), by = "day", length.out = 10),
  "end" = rep(as.Date("2015-01-10"), 10)
)


`# Sample polygons (WKT format) for 10 countries (simplified)`


country_polygons <- c(
  "POLYGON ((13.0 52.0, 13.1 52.0, 13.1 52.1, 13.0 52.1, 13.0 52.0))", # Germany
  "POLYGON ((-3.0 40.0, -3.1 40.0, -3.1 40.1, -3.0 40.1, -3.0 40.0))", # Spain
  "POLYGON ((-0.1 51.5, 0.0 51.5, 0.0 51.6, -0.1 51.6, -0.1 51.5))", # UK
  "POLYGON ((12.0 41.9, 12.1 41.9, 12.1 42.0, 12.0 42.0, 12.0 41.9))", # Italy
  "POLYGON ((-74.0 40.7, -74.1 40.7, -74.1 40.8, -74.0 40.8, -74.0 40.7))", # USA
  "POLYGON ((100.5 13.7, 100.6 13.7, 100.6 13.8, 100.5 13.8, 100.5 13.7))", # Thailand
  "POLYGON ((103.8 1.3, 103.9 1.3, 103.9 1.4, 103.8 1.4, 103.8 1.3))", # Singapore
  "POLYGON ((139.7 35.6, 139.8 35.6, 139.8 35.7, 139.7 35.7, 139.7 35.6))", # Japan
  "POLYGON ((2.3 48.8, 2.4 48.8, 2.4 48.9, 2.3 48.9, 2.3 48.8))", # France
  "POLYGON ((144.9 -37.8, 145.0 -37.8, 145.0 -37.7, 144.9 -37.7, 144.9 -37.8))" # Australia
)


`# Converting polygons to sf objects`


power$geometry <- st_as_sfc(country_polygons, crs = 4326)


`# Converting the data frame to an sf object`


power_sf <- st_as_sf(power, sf_column_name = "geometry")


`# Adding the timeline to the leaflet map with country labels using the JS function`


leaflet_map %>%
  addTimeline( data=x,
               sliderOpts = sliderOptions(
                 formatOutput = htmlwidgets::JS(
                   "function(date) {return new Date(date).toDateString()}
      "),
                 position = "bottomright",
                 step = 50,
                 duration = 3000,
                 showTicks = FALSE
               ),
               timelineOpts = timelineOptions(pointToLayer = htmlwidgets::JS(
                 "
        function(data, latlng) {
          return L.polygon(latlng, {
            color: 'black',
            fillColor: 'lightblue',
            fillOpacity: 0.5
          }).bindTooltip(
            'Country: ' + data.properties.Country + '<br/>' +
            'Start: ' + data.properties.start + '<br/>' +
            'End: ' + data.properties.end,
            {permanent: false}
          ).openTooltip()
        }
        "
               ),styleOptions = styleOptions(
                 radius = 3,
                 color = 'red',
                 stroke = F,
                 fill = TRUE,
                 fillColor = NULL,
                 fillOpacity = NULL),
                           ))

The above code only generates the map but not popping labels.

I am looking for a solution to display the dropdown menu under its link in the navbar, the problem here is that the dropdown is too large sometimes, and it goes off screen when it is wide (img below).

The select must be displayed under each link with its arrow and not exceed the screen, i did not know how to go further in my calculations so that the select is displayed in the center if its link is also close to the center of the screen.

This is the html :

<div class="w-100">
<ul id="top_menu" role="menu" class="nav navbar-nav top_menu justify-content-center custom-flex-list">
    
<li role="presentation" class="nav-item">
    <a role="menuitem" href="/" class="nav-link custom_nav_link custom_nav_link_active">
        <span data-oe-model="website.menu" data-oe-id="18" data-oe-field="name" data-oe-type="char" data-oe-expression="submenu.name">Page d'accueil</span>
    </a>
</li>
<li role="presentation" class="nav-item dropdown True">
    <a data-bs-toggle="dropdown" href="#" role="menuitem" class="nav-link custom_nav_link custom_nav_link_active dropdown-toggle o_mega_menu_toggle" data-bs-display="static" aria-expanded="false">
        <span data-oe-xpath="/t[1]/li[2]/a[1]/span[1]" data-oe-model="website.menu" data-oe-id="11" data-oe-field="name" data-oe-type="char" data-oe-expression="submenu.name" class="" style="">Nous connaître</span>
    </a>
    <div data-name="Mega Menu" data-oe-xpath="/t[1]/li[2]/div[1]" class="dropdown-menu o_mega_menu" data-oe-model="website.menu" data-oe-id="11" data-oe-field="mega_menu_content" data-oe-type="html" data-oe-expression="submenu.mega_menu_content" style="width: auto;"><div class="o_mega_menu-arrow" style="left: 111.992px;">
                <img src="/theme_ifpt/static/img/header/arrow_up.svg" alt="Rectangle" loading="lazy" style="">
            </div>
            <section class="o_cc1 ifp_about_us">
                    <div class="d-flex">
                        <div class="heardermenu-inside">
                            <h4 class="navbar-subItem-title text-uppercase h5 fw-bold mt-0">À PROPOS</h4>
                            <nav class="nav flex-column">                   
                                
                                
                                
                                
                                <a href="#" class="nav-link px-0" data-name="Menu Item">
                                    Certifying
                                        body
                                </a>
                                <a href="#" class="nav-link px-0" data-name="Menu Item">
                                    Careers at
                                        IFP Training
                                </a>
                            </nav>
                        </div>
                        <div class="heardermenu-inside"> 
                            <h4 class="navbar-subItem-title text-uppercase h5 fw-bold mt-0">NOS ENGAGEMENT</h4> 
                           <nav class="nav flex-column">
                                <a href="#" class="nav-link px-0" data-name="Menu Item">
                                    Quality
                                </a>
                                <a href="#" class="nav-link px-0" data-name="Menu Item">
                                        Educational commitment
                                </a>
                                
                                
                                
                                
                            </nav>
                        </div>
                </div>
            </section>
        </div>
    </li>
<li role="presentation" class="nav-item dropdown True">
    <a data-bs-toggle="dropdown" href="#" role="menuitem" class="nav-link custom_nav_link custom_nav_link_active dropdown-toggle o_mega_menu_toggle show active" data-bs-display="static" aria-expanded="true">
        <span data-oe-xpath="/t[1]/li[2]/a[1]/span[1]" data-oe-model="website.menu" data-oe-id="12" data-oe-field="name" data-oe-type="char" data-oe-expression="submenu.name" class="underlined" style="color: rgb(42, 176, 119);">Nos solutions</span>
    </a>
    <div data-name="Mega Menu" data-oe-xpath="/t[1]/li[2]/div[1]" class="dropdown-menu o_mega_menu show" data-oe-model="website.menu" data-oe-id="12" data-oe-field="mega_menu_content" data-oe-type="html" data-oe-expression="submenu.mega_menu_content" style="width: auto; left: 0px; right: auto;" data-bs-popper="static"><div class="o_mega_menu-arrow" style="left: 103.531px;">
                <img src="/theme_ifpt/static/img/header/arrow_up.svg" alt="Rectangle" loading="lazy" style="">
            </div>
            <section class="o_cc1 ifp_our_solution">
                    <div class="d-flex ">
                        <div class="heardermenu-inside"> 
                            <h4 class="navbar-subItem-title text-uppercase h5 fw-bold mt-0">EVALUATION AND COMPETENCY-BASED
                                        MANAGEMENT</h4> 
                           <nav class="nav flex-column">
                                <a href="#" class="nav-link px-0" data-name="Menu Item">
                                        
                                            Competency-based management
                                </a>
                                <a href="#" class="nav-link px-0" data-name="Menu Item">
                                        On-the job
                                            skills
                                </a>
                            </nav>
                        </div>
                        <div class="heardermenu-inside"> 
                            <h4 class="navbar-subItem-title text-uppercase h5 fw-bold mt-0">FORMATION PROFESSIONNELLE</h4> 
                           <nav class="nav flex-column">
                                <a href="#" class="nav-link px-0" data-name="Menu Item">
                                        
                                            Inter/Intra/customized
                                </a>
                                
                                
                                <a href="#" class="nav-link px-0" data-name="Menu Item">
                                        Work-linked
                                            training
                                </a>
                            </nav>
                        </div>
                        <div class="heardermenu-inside"> 
                            <h4 class="navbar-subItem-title text-uppercase h5 fw-bold mt-0">FORMATION EN APPRENTISSAGE</h4> 
                           <nav class="nav flex-column">
                                
                                
                                <a href="#" class="nav-link px-0" data-name="Menu Item">
                                        Apprentice
                                            information
                                </a>
                            </nav>
                        </div>
                        <div class="heardermenu-inside">
                            <h4 class="navbar-subItem-title text-uppercase h5 fw-bold mt-0">VALIDATION DES COMPETENCES</h4> 
                           <nav class="nav flex-column">
                                <a href="#" class="nav-link px-0" data-name="Menu Item">
                                        
                                            National and international
                                            certifications
                                </a>
                                <a href="#" class="nav-link px-0" data-name="Menu Item">
                                        
                                            IFP Training Certificate
                                </a>
                            </nav>
                        </div>
                    </div>
            </section>
        </div>
    </li>
<li role="presentation" class="nav-item dropdown True">
    <a data-bs-toggle="dropdown" href="#" role="menuitem" class="nav-link custom_nav_link custom_nav_link_active dropdown-toggle o_mega_menu_toggle" data-bs-display="static" aria-expanded="false">
        <span data-oe-xpath="/t[1]/li[2]/a[1]/span[1]" data-oe-model="website.menu" data-oe-id="14" data-oe-field="name" data-oe-type="char" data-oe-expression="submenu.name" class="" style="">Boutique</span>
    </a>
    <div data-name="Mega Menu" data-oe-xpath="/t[1]/li[2]/div[1]" class="dropdown-menu o_mega_menu" data-oe-model="website.menu" data-oe-id="14" data-oe-field="mega_menu_content" data-oe-type="html" data-oe-expression="submenu.mega_menu_content" style="width: auto; left: 0px; right: auto;">
<div class="o_mega_menu-arrow" style="left: 85.2578px;">
    <img src="/theme_ifpt/static/img/header/arrow_up.svg" alt="Rectangle" loading="lazy" style="">
</div>
<section class="s_mega_menu_odoo_menu o_cc1">
    <div class="container">
        <div class="row">
            <div class="heardermenu-inside">
                <h4 class="navbar-subItem-title text-uppercase h5 fw-bold mt-0">Ordinateurs &amp; Appareils</h4>
                
                <nav class="nav flex-column">
                    <a href="#" class="nav-link px-0" data-name="Menu Item">Ordinateurs portables</a>
                    
                    
                    
                    
                    
                </nav>
            </div>
            <div class="heardermenu-inside">
                <h4 class="navbar-subItem-title text-uppercase h5 fw-bold mt-0">Moniteurs</h4>
                
                <nav class="nav flex-column">
                    <a href="#" class="nav-link px-0" data-name="Menu Item">Télévisions</a>
                    
                    
                </nav>
            </div>
            <div class="heardermenu-inside">
                <h4 class="navbar-subItem-title text-uppercase h5 fw-bold mt-0">Électronique</h4>
                
                <nav class="nav flex-column">
                    <a href="#" class="nav-link px-0" data-name="Menu Item">Caméra</a>
                    
                    
                    
                    
                </nav>
            </div>
            <div class="heardermenu-inside">
                <h4 class="navbar-subItem-title text-uppercase h5 fw-bold mt-0">Promotions</h4>
                
                <nav class="nav flex-column">
                    <a href="#" class="nav-link px-0" data-name="Menu Item">Ordinateurs</a>
                    
                    
                    
                </nav>
            </div>
        </div>
    </div>
    <div class="container-fluid border-top s_mega_menu_odoo_menu_footer">
        <div class="row">
            <div class="col-12 pt8 pb8">
                <div class="s_social_media text-center o_not_editable" data-snippet="s_social_media" data-name="Social Media" contenteditable="false">
                    <h5 class="s_social_media_title d-none" contenteditable="true">Suivez-nous</h5>
                    <a href="/website/social/facebook" class="s_social_media_facebook me-3 ms-3" target="_blank" aria-label="Facebook">
                        <i class="fa fa-2x fa-facebook m-1 o_editable_media"></i>
                    </a>
                    <a href="/website/social/twitter" class="s_social_media_twitter me-3 ms-3" target="_blank" aria-label="Twitter">
                        <i class="fa fa-2x fa-twitter m-1 o_editable_media"></i>
                    </a>
                    <a href="/website/social/linkedin" class="s_social_media_linkedin me-3 ms-3" target="_blank" aria-label="LinkedIn">
                        <i class="fa fa-2x fa-linkedin m-1 o_editable_media"></i>
                    </a>
                    <a href="/website/social/github" class="s_social_media_github me-3 ms-3" target="_blank" aria-label="GitHub">
                        <i class="fa fa-2x fa-github m-1 o_editable_media"></i>
                    </a>
                    <a href="/website/social/youtube" class="s_social_media_youtube me-3 ms-3" target="_blank" aria-label="YouTube">
                        <i class="fa fa-2x fa-youtube m-1 o_editable_media"></i>
                    </a>
                    <a href="/website/social/instagram" class="s_social_media_instagram me-3 ms-3" target="_blank" aria-label="Instagram">
                        <i class="fa fa-2x fa-instagram m-1 o_editable_media"></i>
                    </a>
                    <a href="/website/social/tiktok" class="s_social_media_tiktok me-3 ms-3" target="_blank" aria-label="TikTok">
                        <i class="fa fa-2x fa-tiktok m-1 o_editable_media"></i>
                    </a>
                </div>
            </div>
        </div>
    </div>
</section></div>
    </li>
<li role="presentation" class="nav-item dropdown True">
    <a data-bs-toggle="dropdown" href="#" role="menuitem" class="nav-link custom_nav_link custom_nav_link_active dropdown-toggle o_mega_menu_toggle" data-bs-display="static" aria-expanded="false">
        <span data-oe-xpath="/t[1]/li[2]/a[1]/span[1]" data-oe-model="website.menu" data-oe-id="13" data-oe-field="name" data-oe-type="char" data-oe-expression="submenu.name" class="" style="">Ressources</span>
    </a>
    <div data-name="Mega Menu" data-oe-xpath="/t[1]/li[2]/div[1]" class="dropdown-menu o_mega_menu" data-oe-model="website.menu" data-oe-id="13" data-oe-field="mega_menu_content" data-oe-type="html" data-oe-expression="submenu.mega_menu_content" style="width: auto;"><div class="o_mega_menu-arrow" style="left: 93.8516px;">
                <img src="/theme_ifpt/static/img/header/arrow_up.svg" alt="Rectangle" loading="lazy" style="">
            </div>
            <section class="o_cc1 ifp_resource">
                    <div class="d-flex">
                        <div class="heardermenu-inside"> 
                             <h4 class="navbar-subItem-title text-uppercase h5 fw-bold mt-0">RESSOURCES</h4> 
                           <nav class="nav flex-column">
                                
                                
                                
                                <a href="#" class="nav-link px-0" data-name="Menu Item">
                                        
                                            Case studies
                                </a>
                            </nav>
                        </div>
                    </div>
            </section>
        </div>
    </li>
<li role="presentation" class="nav-item">
    <a role="menuitem" href="/event" class="nav-link custom_nav_link custom_nav_link_active">
        <span data-oe-model="website.menu" data-oe-id="24" data-oe-field="name" data-oe-type="char" data-oe-expression="submenu.name">Événements</span>
    </a>
</li>
<li role="presentation" class="nav-item dropdown True">
    <a data-bs-toggle="dropdown" href="#" role="menuitem" class="nav-link custom_nav_link custom_nav_link_active dropdown-toggle o_mega_menu_toggle" data-bs-display="static" aria-expanded="false">
        <span data-oe-xpath="/t[1]/li[2]/a[1]/span[1]" data-oe-model="website.menu" data-oe-id="21" data-oe-field="name" data-oe-type="char" data-oe-expression="submenu.name" class="" style="">Contactez-nous</span>
    </a>
    <div data-name="Mega Menu" data-oe-xpath="/t[1]/li[2]/div[1]" class="dropdown-menu o_mega_menu" data-oe-model="website.menu" data-oe-id="21" data-oe-field="mega_menu_content" data-oe-type="html" data-oe-expression="submenu.mega_menu_content" style="width: auto; left: auto; right: 0px;">
<div class="o_mega_menu-arrow" style="left: 1190.84px;">
    <img src="/theme_ifpt/static/img/header/arrow_up.svg" alt="Rectangle" loading="lazy" style="">
</div>
<section class="s_mega_menu_odoo_menu o_cc1">
    <div class="container">
        <div class="row">
            <div class="heardermenu-inside">
                <h4 class="navbar-subItem-title text-uppercase h5 fw-bold mt-0">Ordinateurs &amp; Appareils</h4>
                
                <nav class="nav flex-column">
                    <a href="#" class="nav-link px-0" data-name="Menu Item">Ordinateurs portables</a>
                    
                    
                    
                    
                    
                </nav>
            </div>
            <div class="heardermenu-inside">
                <h4 class="navbar-subItem-title text-uppercase h5 fw-bold mt-0">Moniteurs</h4>
                
                <nav class="nav flex-column">
                    <a href="#" class="nav-link px-0" data-name="Menu Item">Télévisions</a>
                    <a href="#" class="nav-link px-0" data-name="Menu Item">Écrans de bureau</a>
                    <a href="#" class="nav-link px-0" data-name="Menu Item">Projecteurs</a>
                </nav>
            </div>
            <div class="heardermenu-inside">
                <h4 class="navbar-subItem-title text-uppercase h5 fw-bold mt-0">Électronique</h4>
                
                <nav class="nav flex-column">
                    <a href="#" class="nav-link px-0" data-name="Menu Item">Caméra</a>
                    
                    
                    
                    
                </nav>
            </div>
            <div class="heardermenu-inside">
                <h4 class="navbar-subItem-title text-uppercase h5 fw-bold mt-0">Promotions</h4>
                
                <nav class="nav flex-column">
                    
                    
                    
                    <a href="#" class="nav-link px-0" data-name="Menu Item">Réseaux</a>
                </nav>
            </div>
        </div>
    </div>
    
</section></div>
    </li>
    <li data-name="Language Selector" class="o_header_language_selector position-relative">
    
        <div class="js_language_selector  dropdown d-print-none">
            <button type="button" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="true" class="btn border-0 dropdown-toggle nav-link btn-sm d-flex align-items-center fw-bold text-uppercase o_nav-link_secondary custom-list-langage">
<img data-oe-model="ir.ui.view" data-oe-id="973" data-oe-field="arch" data-oe-xpath="/t[1]/img[1]" class="o_lang_flag " src="/base/static/img/country_flags/fr.png?height=25" alt=" Français" loading="lazy" style="">
                <span class="align-middle">FR</span>
            </button>
            <div role="menu" class="dropdown-menu dropdown-menu-end">
                    <a class="dropdown-item js_change_lang " role="menuitem" href="/en/shop" data-url_code="en" title="English (US)">
<img data-oe-model="ir.ui.view" data-oe-id="973" data-oe-field="arch" data-oe-xpath="/t[1]/img[1]" class="o_lang_flag " src="/base/static/img/country_flags/us.png?height=25" alt="English (US)" loading="lazy" data-lazy-loading-initial-min-height="" style="min-height: 1px;">
                        <span class="align-middle ">EN</span>
                    </a>
                    <a class="dropdown-item js_change_lang active" role="menuitem" href="/fr/shop" data-url_code="fr" title=" Français">
<img data-oe-model="ir.ui.view" data-oe-id="973" data-oe-field="arch" data-oe-xpath="/t[1]/img[1]" class="o_lang_flag " src="/base/static/img/country_flags/fr.png?height=25" alt=" Français" loading="lazy" style="">
                        <span class="align-middle ">FR</span>
                    </a>
            </div>
        </div>
    
    </li>
                            
</ul>

                        </div>

This is my js :

    document.querySelectorAll(".o_mega_menu_toggle").forEach(function (toggle) {
  toggle.addEventListener("click", function () {
    var dropdownMenu = toggle.nextElementSibling; // Sélectionne le dropdown associé
 
    dropdownMenu.style.width = "auto";
 
    var rect = dropdownMenu.getBoundingClientRect();
 
    if (rect.right > window.innerWidth) {
      dropdownMenu.style.left = "auto"; // Supprime le positionnement par défaut
      dropdownMenu.style.right = "0"; // L'aligne au bord droit de l'écran
    }
 
    if (rect.left < 0) {
      dropdownMenu.style.left = "0"; // L'aligne au bord gauche de l'écran
      dropdownMenu.style.right = "auto"; // Supprime l'alignement à droite
    }
 
    if (rect.width > window.innerWidth) {
      dropdownMenu.style.maxWidth = window.innerWidth - 20 + "px";
      dropdownMenu.style.overflowX = "auto";
    }
 
    var arrow = dropdownMenu.querySelector(".o_mega_menu-arrow");
    var toggleRect = toggle.getBoundingClientRect(); // Position du lien
    var dropdownRect = dropdownMenu.getBoundingClientRect(); // Position du dropdown
 
    var arrowLeft = toggleRect.left + toggleRect.width / 2 - dropdownRect.left;
 
    arrowLeft = Math.max(15, Math.min(arrowLeft, dropdownRect.width - 15));
 
    arrow.style.left = arrowLeft + "px";
  });
});

console.log("firstfffffff");

Hello so i started working with tailwind , doing a small project of a pop up slider, but the tailwind transitions classes dont seem to work, the pop up is triggered and appears but theere is no animations even tho i already set them in my classes with tailwind css , You can check the code bellow.

[JS FILE]
HTML FILE]

i tried adding a transition durations to the pop up sliding but it didnt work

I need a way to decrease the file size of images (to 8kb specifically), and I’m wondering what the best method might be.

• It can be within the least lines or the fastest (preferrably)
• I’d love to maintain the image quality as best as possible, but it’s not the end of the world with lesser quality
• The dimensions should stay as is (though for my case, I do usually fit them in 48×48 containers)

My current approach is to simply decrement image quality until under the limit.

Shown here –

pseudocode - fetching the image
image = fetch(source) -> Filereader.readAsDataUrl(responseBlob) // returns dataUrl
...

// Using a standard HTMLCanvas 
canvas.getContext('2d').drawImage(image, 0,0);
            
let q = 1; // Decrement in quality until under size limit
let imageData = canvas.toDataURL("image/webp", q)

while (imageData.length > 8000 && q != 0) {
    q -= 0.05;
    imageData = canvas.toDataURL("image/webp", q)
}
if (q) return imageData

But I’ve found there may be some better methods –

let response = fetch(originalImageSource)

let responseBlob = await response.blob()
let imageSize = responseBlob.size
if ((imagesize * 1.35) > 8000) { // 1.35* being the (upper bounds) size approximation of the resulting dataUrl
        let bitmap = await createImageBitmap(responseBlob)
    let canvas = new OffscreenCanvas(bitmap.width, bitmap.height)
    canvas.getContext("2d").drawImage(bitmap, 0, 0)

    let q = 1
    let imageBlob = await canvas.convertToBlob({type: "image/webp", quality: q})
    while (imageBlob.size > 8000 && q) {
        q -= 0.05
        imageBlob = await canvas.convertToBlob({type: "image/webp", quality: q})
    }
    
    
    return new Promise((resolve) => {
        let reader = new FileReader()
        reader.onloadend = () => {
            resolve(reader.result)   
        }
        reader.readAsDataURL(imageBlob)
    })

}

Is this even any better? I thought it might be, as I can run it in a service worker, and it doesn’t call canvas.toDataURL. but I’m not sure.
From my preliminary testing, the second method is a little faster. but with smaller images, it appears to be equal.

I’ve seen things like this – HTML5 Canvas Resize (Downscale) Image High Quality?, which I don’t quite understand, but could certainly try (if better than the above)

For my case,

• the result must be a dataURL, as its stored permanently.

(Although, I’ve read that storing binary data in indexedDB may work too, though that’s not something I’m open to just yet) – https://stackoverflow.com/a/59025746

• It should also be able to run in a service worker (but I can forgo that, if there’s an incredible DOM based approach or something)

I have this html page that receives html elements got from javascript as shown in the code below. I aim to display the information in a div called ‘results’. It displays for a second, and then it disappears as if it’s being replaced suddenly.
Why is this happening?
How do I fix it?

    const form = document.getElementById('symptom-form');
    const resultDiv = document.getElementById('result');
    const symptomsInput = document.getElementById('symptoms');

    form.addEventListener('submit', function(event) {
        event.preventDefault();
        const symptoms = symptomsInput.value.trim();

        // Input validation
        if (!symptoms) {
            resultDiv.innerHTML = '<p style="color: red;">Please enter your symptoms.</p>';
            return;
        }
        resultDiv.innerHTML = '<p>Analyzing symptoms...</p>';
        fetch('http://localhost:5000/diagnose', {
            method: 'POST',
            headers: {
                'Content-Type': 'application/json',
            },
            body: JSON.stringify({ 
                symptoms: symptoms,
                email: loggedInUser.email
            }),
        })
        .then(response => {
            if (!response.ok) {
                throw new Error('Network response was not ok');
            }
            return response.json();
        })
        .then(data => {
            resultDiv.style.display= "block";
            displayResults(data, symptoms);
        })
        .catch((error) => {
            console.error('Error:', error);
            resultDiv.innerHTML = '<p style="color: red;">An error occurred while processing your request. Please try again.</p>';
        });        
    });

    function displayResults(data, symptoms) {
        
        resultDiv.innerHTML = `
            <h2>Diagnosis Results</h2>
            <p><strong>Symptoms:</strong> ${symptoms}</p>
            <p><strong>Possible Condition:</strong> ${data.diagnosis}</p>
            <p><strong>Recommended Action:</strong> ${data.recommendation}</p>
            <p><strong>Disclaimer:</strong> This is an educational demonstration only.
            Always consult with a qualified healthcare professional for real medical advice.</p>
        `;

        // Clear the input field for the next entry
        symptomsInput.value = '';
    }

When making a program that gets data from the server in json format, the program works in MS Windows (and on my Mac) but not on Chrome and Safari on IPad

(Putting one tab chrome on Ipad to the URL: chrome://inspect you get access to a very simple debug tool for getting output from errors and console.log() calls accross all tabs from chrome. )

My code:

async function fetchData(){
    console.log('started') //this is the only comment
                           // shown in  chrome://inspect pannel


    const response = await fetch(checkRep, {
        method: 'POST',
        headers: {
           'Content-Type': 'application/json'
        },
    body: JSON.stringify({
        parameter1: 'param1',
        parameter2: 'param2',   

    })   
})
const json= await response.json();
console.log(json) //appears on chrome windows and on mac 
                 //but it does not appear on chrome://inspect on IPad
doSomething(json);


}
function doSomething(json){
    console.log(json+'<br>this comment does not appear on chrome://inspect')
}

I am using the TIKTOK Content Posting API to upload the video to TIKTOK. It is working fine for the videos less than 64MB size but when the video is more than 64MB then it is showing the error on the server.

My node js code is as follows

await downloadFile(videoURL, tempDownloadPath);
const videoStats = fs.statSync(tempDownloadPath);
const videoSize = videoStats.size;

const MIN_CHUNK_SIZE = 5 * 1024 * 1024; // 5 MB
const MAX_CHUNK_SIZE = 64 * 1024 * 1024; // 10 MB - Change this back to 64

let chunkSize = Math.min(MAX_CHUNK_SIZE, videoSize);
if (videoSize < MIN_CHUNK_SIZE) {
  chunkSize = videoSize;
}

const totalChunkCount = Math.ceil(videoSize / chunkSize);

let data = {
  post_info: {
    title: tiktokvideoTitle,
    privacy_level: tiktokaccessSpecifier,
    disable_duet: false,
    disable_comment: false,
    disable_stitch: false,
    video_cover_timestamp_ms: 1000,
    brand_content_toggle: false,
    brand_organic_toggle: false
  },
  source_info: {
    source: "FILE_UPLOAD",
    video_size: videoSize,
    chunk_size: chunkSize,
    total_chunk_count: totalChunkCount
  }
};

console.log("data =====", data);

const initResponse = await axios.post('https://open.tiktokapis.com/v2/post/publish/video/init/', data, {
  headers: {
    'Authorization': 'Bearer ' + accessToken,
    'Content-Type': 'application/json; charset=UTF-8'
  }
}).catch(err => {
  console.error('Error initializing video upload:', err);
  throw new Error('Failed to initialize video upload');
});

I am getting the following error on server

0|socialUploader  | Error initializing video upload: AxiosError: Request failed with status code 400
0|socialUploader  |     at settle (/home/socialuploader-backend/node_modules/axios/dist/node/axios.cjs:1967:12)
0|socialUploader  |     at IncomingMessage.handleStreamEnd (/home/ssemble/socialuploader-backend/node_modules/axios/dist/node/axios.cjs:3062:11)
0|socialUploader  |     at IncomingMessage.emit (node:events:531:35)
0|socialUploader  |     at endReadableNT (node:internal/streams/readable:1696:12)
0|socialUploader  |     at process.processTicksAndRejections (node:internal/process/task_queues:82:21) {
0|socialUploader  |   code: 'ERR_BAD_REQUEST',
0|socialUploader  |   config: {
0|socialUploader  |     transitional: {
0|socialUploader  |       silentJSONParsing: true,
0|socialUploader  |       forcedJSONParsing: true,
0|socialUploader  |       clarifyTimeoutError: false
0|socialUploader  |     },
0|socialUploader  |     adapter: [ 'xhr', 'http' ],
0|socialUploader  |     transformRequest: [ [Function: transformRequest] ],
0|socialUploader  |     transformResponse: [ [Function: transformResponse] ],
0|socialUploader  |     timeout: 0,
0|socialUploader  |     xsrfCookieName: 'XSRF-TOKEN',
0|socialUploader  |     xsrfHeaderName: 'X-XSRF-TOKEN',
0|socialUploader  |     maxContentLength: -1,
0|socialUploader  |     maxBodyLength: -1,
0|socialUploader  |     env: { FormData: [Function], Blob: [class Blob] },
0|socialUploader  |     validateStatus: [Function: validateStatus],
0|socialUploader  |     headers: Object [AxiosHeaders] {
0|socialUploader  |       Accept: 'application/json, text/plain, */*',
0|socialUploader  |       'Content-Type': 'application/json; charset=UTF-8',
0|socialUploader  |       Authorization: 'Bearer act.whzQnXJIBlaAoNXinygTmE4N7iJWu7uYNAvh8TfXxJqAdqETHJ3snkJexaeT!5654.e1',
0|socialUploader  |       'User-Agent': 'axios/1.6.3',
0|socialUploader  |       'Content-Length': '476',
0|socialUploader  |       'Accept-Encoding': 'gzip, compress, deflate, br'
0|socialUploader  |     },
0|socialUploader  |     method: 'post',
0|socialUploader  |     url: 'https://open.tiktokapis.com/v2/post/publish/video/init/',
0|socialUploader  |     data: `{"post_info":{"title":"Unravel the 'nice guy' myth. Discover the truth behind being genuine and attractive without getting walked over. #NiceGuys #DatingAdvice #SelfRespect","privacy_level":"PUBLIC_TO_EVERYONE","disable_duet":false,"disable_comment":false,"disable_stitch":false,"video_cover_timestamp_ms":1000,"brand_content_toggle":false,"brand_organic_toggle":false},"source_info":{"source":"FILE_UPLOAD","video_size":103107045,"chunk_size":67108864,"total_chunk_count":2}}`
0|socialUploader  |   },
0|socialUploader  |   request: <ref *1> ClientRequest {
0|socialUploader  |     _events: [Object: null prototype] {
0|socialUploader  |       abort: [Function (anonymous)],
0|socialUploader  |       aborted: [Function (anonymous)],
0|socialUploader  |       connect: [Function (anonymous)],
0|socialUploader  |       error: [Function (anonymous)],
0|socialUploader  |       socket: [Function (anonymous)],
0|socialUploader  |       timeout: [Function (anonymous)],
0|socialUploader  |       finish: [Function: requestOnFinish]
0|socialUploader  |     },
0|socialUploader  |     _eventsCount: 7,
0|socialUploader  |     _maxListeners: undefined,
0|socialUploader  |     outputData: [],
0|socialUploader  |     outputSize: 0,
0|socialUploader  |     writable: true,
0|socialUploader  |     destroyed: false,
0|socialUploader  |     _last: false,
0|socialUploader  |     chunkedEncoding: false,
0|socialUploader  |     shouldKeepAlive: false,
0|socialUploader  |     maxRequestsOnConnectionReached: false,
0|socialUploader  |     _defaultKeepAlive: true,
0|socialUploader  |     useChunkedEncodingByDefault: true,
0|socialUploader  |     sendDate: false,
0|socialUploader  |     _removedConnection: false,
0|socialUploader  |     _removedContLen: false,
0|socialUploader  |     _removedTE: false,
0|socialUploader  |     strictContentLength: false,
0|socialUploader  |     _contentLength: '476',
0|socialUploader  |     _hasBody: true,
0|socialUploader  |     _trailer: '',
0|socialUploader  |     finished: true,
0|socialUploader  |     _headerSent: true,
0|socialUploader  |     _closed: false,
0|socialUploader  |     socket: TLSSocket {
0|socialUploader  |       _tlsOptions: [Object],
0|socialUploader  |       _secureEstablished: true,
0|socialUploader  |       _securePending: false,
0|socialUploader  |       _newSessionPending: false,
0|socialUploader  |       _controlReleased: true,
0|socialUploader  |       secureConnecting: false,
0|socialUploader  |       _SNICallback: null,
0|socialUploader  |       servername: 'open.tiktokapis.com',
0|socialUploader  |       alpnProtocol: false,
0|socialUploader  |       authorized: true,
0|socialUploader  |       authorizationError: null,
0|socialUploader  |       encrypted: true,
0|socialUploader  |       _events: [Object: null prototype],
0|socialUploader  |       _eventsCount: 10,
0|socialUploader  |       connecting: false,
0|socialUploader  |       _hadError: false,
0|socialUploader  |       _parent: null,
0|socialUploader  |       _host: 'open.tiktokapis.com',
0|socialUploader  |       _closeAfterHandlingError: false,
0|socialUploader  |       _readableState: [ReadableState],
0|socialUploader  |       _writableState: [WritableState],
0|socialUploader  |       allowHalfOpen: false,
0|socialUploader  |       _maxListeners: undefined,
0|socialUploader  |       _sockname: null,
0|socialUploader  |       _pendingData: null,
0|socialUploader  |       _pendingEncoding: '',
0|socialUploader  |       server: undefined,
0|socialUploader  |       _server: null,
0|socialUploader  |       ssl: [TLSWrap],
0|socialUploader  |       _requestCert: true,
0|socialUploader  |       _rejectUnauthorized: true,
0|socialUploader  |       timeout: 5000,
0|socialUploader  |       parser: null,
0|socialUploader  |       _httpMessage: [Circular *1],
0|socialUploader  |       autoSelectFamilyAttemptedAddresses: [Array],
0|socialUploader  |       [Symbol(alpncallback)]: null,
0|socialUploader  |       [Symbol(res)]: [TLSWrap],
0|socialUploader  |       [Symbol(verified)]: true,
0|socialUploader  |       [Symbol(pendingSession)]: null,
0|socialUploader  |       [Symbol(async_id_symbol)]: 22235383,
0|socialUploader  |       [Symbol(kHandle)]: [TLSWrap],
0|socialUploader  |       [Symbol(lastWriteQueueSize)]: 0,
0|socialUploader  |       [Symbol(timeout)]: Timeout {
0|socialUploader  |         _idleTimeout: 5000,
0|socialUploader  |         _idlePrev: [TimersList],
0|socialUploader  |         _idleNext: [Timeout],
0|socialUploader  |         _idleStart: 178692186,
0|socialUploader  |         _onTimeout: [Function: bound ],
0|socialUploader  |         _timerArgs: undefined,
0|socialUploader  |         _repeat: null,
0|socialUploader  |         _destroyed: false,
0|socialUploader  |         [Symbol(refed)]: false,
0|socialUploader  |         [Symbol(kHasPrimitive)]: false,
0|socialUploader  |         [Symbol(asyncId)]: 22186526,
0|socialUploader  |         [Symbol(triggerId)]: 22186524
0|socialUploader  |       },
0|socialUploader  |       [Symbol(kBuffer)]: null,
0|socialUploader  |       [Symbol(kBufferCb)]: null,
0|socialUploader  |       [Symbol(kBufferGen)]: null,
0|socialUploader  |       [Symbol(shapeMode)]: true,
0|socialUploader  |       [Symbol(kCapture)]: false,
0|socialUploader  |       [Symbol(kSetNoDelay)]: false,
0|socialUploader  |       [Symbol(kSetKeepAlive)]: true,
0|socialUploader  |       [Symbol(kSetKeepAliveInitialDelay)]: 60,
0|socialUploader  |       [Symbol(kBytesRead)]: 0,
0|socialUploader  |       [Symbol(kBytesWritten)]: 0,
0|socialUploader  |       [Symbol(connect-options)]: [Object]
0|socialUploader  |     },
0|socialUploader  |     _header: 'POST /v2/post/publish/video/init/ HTTP/1.1rn' +
0|socialUploader  |       'Accept: application/json, text/plain, */*rn' +
0|socialUploader  |       'Content-Type: application/json; charset=UTF-8rn' +
0|socialUploader  |       'Authorization: Bearer act.whzQnXJIBlaAoNXinygTmE4N7iJWu7uYNAvh8TfXxJqAdqETHJ3snkJexaeT!5654.e1rn' +
0|socialUploader  |       'User-Agent: axios/1.6.3rn' +
0|socialUploader  |       'Content-Length: 476rn' +
0|socialUploader  |       'Accept-Encoding: gzip, compress, deflate, brrn' +
0|socialUploader  |       'Host: open.tiktokapis.comrn' +
0|socialUploader  |       'Connection: keep-alivern' +
0|socialUploader  |       'rn',
0|socialUploader  |     _keepAliveTimeout: 0,
0|socialUploader  |     _onPendingData: [Function: nop],
0|socialUploader  |     agent: Agent {
0|socialUploader  |       _events: [Object: null prototype],
0|socialUploader  |       _eventsCount: 2,
0|socialUploader  |       _maxListeners: undefined,
0|socialUploader  |       defaultPort: 443,
0|socialUploader  |       protocol: 'https:',
0|socialUploader  |       options: [Object: null prototype],
0|socialUploader  |       requests: [Object: null prototype] {},
0|socialUploader  |       sockets: [Object: null prototype],
0|socialUploader  |       freeSockets: [Object: null prototype],
0|socialUploader  |       keepAliveMsecs: 1000,
0|socialUploader  |       keepAlive: true,
0|socialUploader  |       maxSockets: Infinity,
0|socialUploader  |       maxFreeSockets: 256,
0|socialUploader  |       scheduling: 'lifo',
0|socialUploader  |       maxTotalSockets: Infinity,
0|socialUploader  |       totalSocketCount: 2,
0|socialUploader  |       maxCachedSessions: 100,
0|socialUploader  |       _sessionCache: [Object],
0|socialUploader  |       [Symbol(shapeMode)]: false,
0|socialUploader  |       [Symbol(kCapture)]: false
0|socialUploader  |     },
0|socialUploader  |     socketPath: undefined,
0|socialUploader  |     method: 'POST',
0|socialUploader  |     maxHeaderSize: undefined,
0|socialUploader  |     insecureHTTPParser: undefined,
0|socialUploader  |     joinDuplicateHeaders: undefined,
0|socialUploader  |     path: '/v2/post/publish/video/init/',
0|socialUploader  |     _ended: true,
0|socialUploader  |     res: IncomingMessage {
0|socialUploader  |       _events: [Object],
0|socialUploader  |       _readableState: [ReadableState],
0|socialUploader  |       _maxListeners: undefined,
0|socialUploader  |       socket: [TLSSocket],
0|socialUploader  |       httpVersionMajor: 1,
0|socialUploader  |       httpVersionMinor: 1,
0|socialUploader  |       httpVersion: '1.1',
0|socialUploader  |       complete: true,
0|socialUploader  |       rawHeaders: [Array],
0|socialUploader  |       rawTrailers: [],
0|socialUploader  |       joinDuplicateHeaders: undefined,
0|socialUploader  |       aborted: false,
0|socialUploader  |       upgrade: false,
0|socialUploader  |       url: '',
0|socialUploader  |       method: null,
0|socialUploader  |       statusCode: 400,
0|socialUploader  |       statusMessage: 'Bad Request',
0|socialUploader  |       client: [TLSSocket],
0|socialUploader  |       _consuming: true,
0|socialUploader  |       _dumped: false,
0|socialUploader  |       req: [Circular *1],
0|socialUploader  |       _eventsCount: 4,
0|socialUploader  |       responseUrl: 'https://open.tiktokapis.com/v2/post/publish/video/init/',
0|socialUploader  |       redirects: [],
0|socialUploader  |       [Symbol(shapeMode)]: true,
0|socialUploader  |       [Symbol(kCapture)]: false,
0|socialUploader  |       [Symbol(kHeaders)]: [Object],
0|socialUploader  |       [Symbol(kHeadersCount)]: 34,
0|socialUploader  |       [Symbol(kTrailers)]: null,
0|socialUploader  |       [Symbol(kTrailersCount)]: 0
0|socialUploader  |     },
0|socialUploader  |     aborted: false,
0|socialUploader  |     timeoutCb: [Function: emitRequestTimeout],
0|socialUploader  |     upgradeOrConnect: false,
0|socialUploader  |     parser: null,
0|socialUploader  |     maxHeadersCount: null,
0|socialUploader  |     reusedSocket: true,
0|socialUploader  |     host: 'open.tiktokapis.com',
0|socialUploader  |     protocol: 'https:',
0|socialUploader  |     _redirectable: Writable {
0|socialUploader  |       _events: [Object],
0|socialUploader  |       _writableState: [WritableState],
0|socialUploader  |       _maxListeners: undefined,
0|socialUploader  |       _options: [Object],
0|socialUploader  |       _ended: true,
0|socialUploader  |       _ending: true,
0|socialUploader  |       _redirectCount: 0,
0|socialUploader  |       _redirects: [],
0|socialUploader  |       _requestBodyLength: 476,
0|socialUploader  |       _requestBodyBuffers: [],
0|socialUploader  |       _eventsCount: 3,
0|socialUploader  |       _onNativeResponse: [Function (anonymous)],
0|socialUploader  |       _currentRequest: [Circular *1],
0|socialUploader  |       _currentUrl: 'https://open.tiktokapis.com/v2/post/publish/video/init/',
0|socialUploader  |       [Symbol(shapeMode)]: true,
0|socialUploader  |       [Symbol(kCapture)]: false
0|socialUploader  |     },
0|socialUploader  |     [Symbol(shapeMode)]: false,
0|socialUploader  |     [Symbol(kCapture)]: false,
0|socialUploader  |     [Symbol(kBytesWritten)]: 0,
0|socialUploader  |     [Symbol(kNeedDrain)]: false,
0|socialUploader  |     [Symbol(corked)]: 0,
0|socialUploader  |     [Symbol(kOutHeaders)]: [Object: null prototype] {
0|socialUploader  |       accept: [Array],
0|socialUploader  |       'content-type': [Array],
0|socialUploader  |       authorization: [Array],
0|socialUploader  |       'user-agent': [Array],
0|socialUploader  |       'content-length': [Array],
0|socialUploader  |       'accept-encoding': [Array],
0|socialUploader  |       host: [Array]
0|socialUploader  |     },
0|socialUploader  |     [Symbol(errored)]: null,
0|socialUploader  |     [Symbol(kHighWaterMark)]: 16384,
0|socialUploader  |     [Symbol(kRejectNonStandardBodyWrites)]: false,
0|socialUploader  |     [Symbol(kUniqueHeaders)]: null
0|socialUploader  |   },
0|socialUploader  |   response: {
0|socialUploader  |     status: 400,
0|socialUploader  |     statusText: 'Bad Request',
0|socialUploader  |     headers: Object [AxiosHeaders] {
0|socialUploader  |       'content-type': 'application/json',
0|socialUploader  |       'content-length': '126',
0|socialUploader  |       'x-janus-info': 'GucksBLCW4ga4RTrAOipfSoEdGQ1f7CQPxXfwQDUQv-0PUVpHehBMf2BH74VA4s6BTJdebptPkQR2ls_-3d9JpWbmmzrbRIzGIrzGG4M9MIJLjt-iuNsuELzR7Z-cIXvu-LrM5h0ad82o44VXc8u51rLkOtkS2LodveVOTzPT0QdrlgSql640NVuVzPnCGjDDTlVt2fg5MTdielv1zjvcmp8uPHdUdaKOriRiLWw_znrd8MawIJX9FC86CC-RFM_4i-gvpg2esp02TSaB5vlXg==',
0|socialUploader  |       'x-tt-logid': '2024101905500118C64F950EF28F73F53F',
0|socialUploader  |       'x-tt-trace-host': '01eb53e39bc3f3bdb889d4ae199ecc6b05080c020ef3bdd5527279803072ef22810f076faa993027f108408d003f84ba12407c7d4ee53347ca43df8174ee268193967b86e8e9ddab04a0df049b493cc2ce2abac446befa59126a3eb4110054e97fa31a5262ff3e5239ec051ada9b1ca8fb',
0|socialUploader  |       'x-tt-trace-id': '00-24101905500118C64F950EF28F73F53F-19D5CB8D2CF8EBC6-00',
0|socialUploader  |       server: 'TLB',
0|socialUploader  |       'x-origin-response-time': '43,104.78.78.101',
0|socialUploader  |       expires: 'Sat, 19 Oct 2024 05:50:02 GMT',
0|socialUploader  |       'cache-control': 'max-age=0, no-cache, no-store',
0|socialUploader  |       pragma: 'no-cache',
0|socialUploader  |       date: 'Sat, 19 Oct 2024 05:50:02 GMT',
0|socialUploader  |       connection: 'close',
0|socialUploader  |       'x-tt-trace-tag': 'id=16;cdn-cache=miss;type=dyn',
0|socialUploader  |       'server-timing': 'cdn-cache; desc=MISS, edge; dur=30, origin; dur=43, inner; dur=38',
0|socialUploader  |       'x-parent-response-time': '67,23.220.105.205'
0|socialUploader  |     },
0|socialUploader  |     config: {
0|socialUploader  |       transitional: [Object],
0|socialUploader  |       adapter: [Array],
0|socialUploader  |       transformRequest: [Array],
0|socialUploader  |       transformResponse: [Array],
0|socialUploader  |       timeout: 0,
0|socialUploader  |       xsrfCookieName: 'XSRF-TOKEN',
0|socialUploader  |       xsrfHeaderName: 'X-XSRF-TOKEN',
0|socialUploader  |       maxContentLength: -1,
0|socialUploader  |       maxBodyLength: -1,
0|socialUploader  |       env: [Object],
0|socialUploader  |       validateStatus: [Function: validateStatus],
0|socialUploader  |       headers: [Object [AxiosHeaders]],
0|socialUploader  |       method: 'post',
0|socialUploader  |       url: 'https://open.tiktokapis.com/v2/post/publish/video/init/',
0|socialUploader  |       data: `{"post_info":{"title":"Unravel the 'nice guy' myth. Discover the truth behind being genuine and attractive without getting walked over. #NiceGuys #DatingAdvice #SelfRespect","privacy_level":"PUBLIC_TO_EVERYONE","disable_duet":false,"disable_comment":false,"disable_stitch":false,"video_cover_timestamp_ms":1000,"brand_content_toggle":false,"brand_organic_toggle":false},"source_info":{"source":"FILE_UPLOAD","video_size":103107045,"chunk_size":67108864,"total_chunk_count":2}}`
0|socialUploader  |     },
0|socialUploader  |     request: <ref *1> ClientRequest {
0|socialUploader  |       _events: [Object: null prototype],
0|socialUploader  |       _eventsCount: 7,
0|socialUploader  |       _maxListeners: undefined,
0|socialUploader  |       outputData: [],
0|socialUploader  |       outputSize: 0,
0|socialUploader  |       writable: true,
0|socialUploader  |       destroyed: false,
0|socialUploader  |       _last: false,
0|socialUploader  |       chunkedEncoding: false,
0|socialUploader  |       shouldKeepAlive: false,
0|socialUploader  |       maxRequestsOnConnectionReached: false,
0|socialUploader  |       _defaultKeepAlive: true,
0|socialUploader  |       useChunkedEncodingByDefault: true,
0|socialUploader  |       sendDate: false,
0|socialUploader  |       _removedConnection: false,
0|socialUploader  |       _removedContLen: false,
0|socialUploader  |       _removedTE: false,
0|socialUploader  |       strictContentLength: false,
0|socialUploader  |       _contentLength: '476',
0|socialUploader  |       _hasBody: true,
0|socialUploader  |       _trailer: '',
0|socialUploader  |       finished: true,
0|socialUploader  |       _headerSent: true,
0|socialUploader  |       _closed: false,
0|socialUploader  |       socket: [TLSSocket],
0|socialUploader  |       _header: 'POST /v2/post/publish/video/init/ HTTP/1.1rn' +
0|socialUploader  |         'Accept: application/json, text/plain, */*rn' +
0|socialUploader  |         'Content-Type: application/json; charset=UTF-8rn' +
0|socialUploader  |         'Authorization: Bearer act.whzQnXJIBlaAoNXinygTmE4N7iJWu7uYNAvh8TfXxJqAdqETHJ3snkJexaeT!5654.e1rn' +
0|socialUploader  |         'User-Agent: axios/1.6.3rn' +
0|socialUploader  |         'Content-Length: 476rn' +
0|socialUploader  |         'Accept-Encoding: gzip, compress, deflate, brrn' +
0|socialUploader  |         'Host: open.tiktokapis.comrn' +
0|socialUploader  |         'Connection: keep-alivern' +
0|socialUploader  |         'rn',
0|socialUploader  |       _keepAliveTimeout: 0,
0|socialUploader  |       _onPendingData: [Function: nop],
0|socialUploader  |       agent: [Agent],
0|socialUploader  |       socketPath: undefined,
0|socialUploader  |       method: 'POST',
0|socialUploader  |       maxHeaderSize: undefined,
0|socialUploader  |       insecureHTTPParser: undefined,
0|socialUploader  |       joinDuplicateHeaders: undefined,
0|socialUploader  |       path: '/v2/post/publish/video/init/',
0|socialUploader  |       _ended: true,
0|socialUploader  |       res: [IncomingMessage],
0|socialUploader  |       aborted: false,
0|socialUploader  |       timeoutCb: [Function: emitRequestTimeout],
0|socialUploader  |       upgradeOrConnect: false,
0|socialUploader  |       parser: null,
0|socialUploader  |       maxHeadersCount: null,
0|socialUploader  |       reusedSocket: true,
0|socialUploader  |       host: 'open.tiktokapis.com',
0|socialUploader  |       protocol: 'https:',
0|socialUploader  |       _redirectable: [Writable],
0|socialUploader  |       [Symbol(shapeMode)]: false,
0|socialUploader  |       [Symbol(kCapture)]: false,
0|socialUploader  |       [Symbol(kBytesWritten)]: 0,
0|socialUploader  |       [Symbol(kNeedDrain)]: false,
0|socialUploader  |       [Symbol(corked)]: 0,
0|socialUploader  |       [Symbol(kOutHeaders)]: [Object: null prototype],
0|socialUploader  |       [Symbol(errored)]: null,
0|socialUploader  |       [Symbol(kHighWaterMark)]: 16384,
0|socialUploader  |       [Symbol(kRejectNonStandardBodyWrites)]: false,
0|socialUploader  |       [Symbol(kUniqueHeaders)]: null
0|socialUploader  |     },
0|socialUploader  |     data: { error: [Object] }
0|socialUploader  |   }
0|socialUploader  | }

If someone faced the problem and have solution.

Thanks

I tried different ways to generate the chunks but nothing worked for me.

How to optimize this kind of code that every movie has its own initialization of mutation.
I know I should put the initialization of mutation on the top of the file of MoviesPage, but that’s not the only page I have movies and I have a lot of mutation like, add to watch list and something else.

export default async function MoviesPage() {
  const movies = await getMovies() // 100 movies
  return (
    <div>
      {movies.map(movie => (
        <Movie key={movie.id} movie={movie} />
      ))}
    </div>
  )
}

// Movie Component
import { useMutation } from '@tanstack/react-query'


function Movie(movie: TMovie) {
  const { mutate } = useMutation({mutationFn:()=> ...})

  return (
    <div onClick={() => mutate(movie)}>
      <image src={movie.posterPath} />
    </div>
  )
}