Category: javascript

Category Added in a WPeMatico Campaign

“SyntaxError: Unexpected identifier ‘assert'” on JSON import in Node v22

A Node program of mine that worked fine in Node v21 now immediately crashes with a syntax error in Node v22. The line that triggers the error looks like this:

import config from "./some-config-file.json" assert { type: "json" };

and the error says:

SyntaxError: Unexpected identifier 'assert'
    at compileSourceTextModule (node:internal/modules/esm/utils:337:16)
    at ModuleLoader.moduleStrategy (node:internal/modules/esm/translators:166:18)
    at callTranslator (node:internal/modules/esm/loader:436:14)
    at ModuleLoader.moduleProvider (node:internal/modules/esm/loader:442:30)
    at async ModuleJob._link (node:internal/modules/esm/module_job:106:19)

Why am I getting this error in code that previously worked, and how should I fix it?

‘history.pushState’ and POST method

I am learning about the History (Web) API and how single page application frameworks do it under the hood.

A traditional Website works as follows:-

  • You are on www.example.com/enter_data page.
  • This page contains a form.
  • You enter some data and submit.
  • It submits to www.example.com/data_submitted with a POST request and loads that page.
  • Right now, it shows www.example.com/data_submitted in the browser address bar.
  • If you press the browser refresh button, it shows a confirmation message, asking if you want to re-send the data.
  • Agreeing to it would send another POST request to the same URL with the same data. (Ignore the pitfalls for now.)

A single-page-application-equivalent would work as follows:-

  • You are on www.example.com/enter_data page.
  • This page contains a form.
  • You enter some data and submit.
  • The application makes an Ajax POST request to www.example.com/data_submitted.
  • It replaces the page content with the response received.
  • It changes the URL in the browser address bar to www.example.com/data_submitted, using history.pushState.
  • Right now, it shows www.example.com/data_submitted in the browser address bar.
  • If you press the browser refresh button, it makes a GET request to www.example.com/data_submitted.
  • I want it to make a POST request after asking for confirmation, like in the previous example, as if it were a traditional Website.

Is it possible to “store a POST request” with history.pushState, along with its associated data? If not, is there another way?

How do browsers do it, as in the traditional example above? How do browsers store history entries along with the HTTP method used?

Broken pipe error while ajax request is being send to django

im creating a speedcube timer with django, basically it shows a way to scramble my cube and i can time how long it takes me to solve it. At the moment ive just implemented the timer function with js, after i stop the timer it sends me the time trough an ajax request to a view that creates a solve object wich one of its atributes is the time, the problem being that i get a broken pipe error in the console in the place of the post request even though the function is called and the object is created, also when in the developer tools the fetch request appears as cancelled.
This is my first solo project im not following any tutorial, and i dont know js so please if you have any advice to optimize anything id apreciatte it.

HTML:

{% load static %}
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="{% static 'css/styles.css' %}">
    <title>TimerJS</title>
</head>
<body>
    <div class="container">
        <div class="clock">
            <input class="number" type="text" maxlength="2" value="00" readonly><span>:</span><input class="number" type="text" maxlength="2" value="00" readonly><span>:</span><input class="number" type="text" maxlength="2" value="00" readonly>
        </div>
        <div class="buttons">
            <button id="play" onclick="startTimer()"></button>
            <button id="stop" onclick="stopTimer()"></button>
        </div>
    </div>
    <script src="{% static 'js/timer.js' %}"></script>
</body>
</html>

JS:

let inputs, clock, alarm, minutes = 0, seconds = 0, decseconds = 0,repeater; /* Declaro todas las variables que necesito */

window.addEventListener('load', () => { /* Espero a que cargue el documento */
    clock = document.querySelector('.clock'); /* Busco el reloj */
});

/* Funcion principal */
function startTimer() { 

    setTimer();  /* Seteo el timer visualmente */
    countdown()  /* Arranco el contador */

}

/* Funcion para cambiar el timer en la pantalla y en la pestaña */
function setTimer() {
    /* Cambio la hora en pantalla */
    clock.innerHTML = `<p class="number">${minutes > 9 ? minutes : ('0' + minutes)}</p><span>:</span><p class="number">${seconds > 9 ? seconds : ('0' + seconds)}</p><span>:</span><p class="number">${decseconds > 9 ? decseconds : ('0' + decseconds)}`;
}

/* Funcion que arranca el contador */
function countdown() {
    repeater = setInterval(runner,10);
}

/* Funcion que cuenta */
function runner() {
    /* Si tengo más de 0 segundos, restá segundos */
    /* Si tengo 0 segundos pero tengo más de 0 minutos, poné segundos en 59 y restale 1 a minutos */
    /* Si tengo 0 segundos, 0 minutos pero tengo más de 0 horas, poné segundos en 59, minutos en 59 y restale 1 a horas */
    /* Sino arranca la alarma */
    decseconds++
    if (decseconds%100 == 0) {
        seconds++;
        decseconds = 0
    } else {
        if (seconds == 60) {
            seconds = 0
            minutes++;
        }
    }
    
    setTimer();
}

/* Funcion para detener el timer */
function stopTimer(){
    clearInterval(repeater);
    location.reload();
    sentTime();
}

function sentTime(){

    function getCookie(name) {
        var cookieValue = null;
        if (document.cookie && document.cookie !== '') {
            var cookies = document.cookie.split(';');
            for (var i = 0; i < cookies.length; i++) {
                var cookie = cookies[i].trim();
                // Does this cookie string begin with the name we want?
                if (cookie.substring(0, name.length + 1) === (name + '=')) {
                    cookieValue = decodeURIComponent(cookie.substring(name.length + 1));
                    break;
                }
            }
        }
        return cookieValue;
    }

    const url = "save_solve/";
    var options = {
        method: 'POST',
        headers: {'X-CSRFToken': getCookie('csrftoken')},
        // mode: 'same-origin'
    }

    var formData = new FormData();
    formData.append('minutes', minutes);
    formData.append('seconds', seconds);
    formData.append('decseconds', decseconds);
    options['body'] = formData;

    fetch(url, options)
};

view de python:

def save_time(request):
    ms = int(request.POST.get('decseconds'))*10
    s = int(request.POST.get('seconds'))
    m = int(request.POST.get('minutes'))
    print(f'{m}:{s}:{ms}')
    solve = Solve()
    solve.solve_time = datetime.timedelta(minutes=m, seconds=s, milliseconds=ms)
    solve.save()
    return HttpResponse('Sí se ejecutó la petición')

I tried to remove some code because i think, something is taking too long, but it didnt work im considering taking the part that creates the object and put it in a asynchronous task perhaps with celery.

Next JS production problem with Highlight,js(Can’t use code highlight)

I am trying to implement the Highlight.js with my Next.js website’s blog page which is dynamically fetches data. All seems fine until I push it to production. In production it gives me client side error like :

“Application error: a client-side exception has occurred (see the browser console for more information).”

I can’t find a way how to fix it.
Images : https://imgur.com/a/W7FkxKg

import React, { useEffect, useState } from "react";
import mongoose from "mongoose";
import Blogs from "../../models/blogs";
import Head from "next/head";
import Comments from "@/components/commments";
import hljs from "highlight.js";
import "highlight.js/styles/atom-one-dark.css"; // You can choose any other style from highlight.js styles

const Blog = ({ blogs }) => {
  const [mode, setMode] = useState(true);
  const [isHljsApplied, setisHljsApplied] = useState(false);

  useEffect(() => {
    const darkMode = localStorage.getItem("darkMode");
    setMode(darkMode === "true");
    const codeBlocks = document.querySelectorAll("pre");
    codeBlocks.forEach((codeBlock) => {
      if (!codeBlock.parentNode.classList.contains("code-wrapper")) {
        hljs.highlightElement(codeBlock);
        const preWrapper = document.createElement("div");
        preWrapper.className = "code-wrapper relative";
        codeBlock.parentNode.insertBefore(preWrapper, codeBlock);
        preWrapper.appendChild(codeBlock);
        const copyButton = document.createElement("i");
        copyButton.className =
          "bg-gray-300 hover:bg-gray-400 transition duration-300 px-2 py-1 cursor-pointer rounded-md text-gray-600 copy-button absolute top-0 right-0 m-2 bx bx-copy";
        copyButton.onclick = () =>
          handleCopy(codeBlock.textContent.trim(), copyButton);
        copyButton.textContent = "";
        preWrapper.appendChild(copyButton);
      }
    });
    // Add CSS class to paragraphs containing images
    // const blogContent = document.querySelector(".ql-editor.blog");
    // if (blogContent) {
    //   const paragraphs = blogContent.querySelectorAll("p");
    //   paragraphs.forEach((paragraph) => {
    //     if (paragraph.querySelector("img")) {
    //       paragraph.classList.add("flex", "justify-center");
    //     }
    //   });
    // }
  }, []);
  const handleCopy = (code, copyButton) => {
    navigator.clipboard.writeText(code).then(() => {
      copyButton.classList.remove("bx-copy");
      copyButton.textContent = "Copied!";
      setTimeout(() => {
        copyButton.textContent = "";
        copyButton.classList.add("bx-copy");
      }, 1000);
    });
  };
  
  
  
  


  return (
    <>
      <Head>
        <title>{blogs.title} | Soubhagyajit</title>
        <script
          async
          src="https://www.won't_tell_you.com"
          crossOrigin="anonymous"
        ></script>
        <link rel="canonical" href={`https://www.soubhagyajit.com/blogs/${blogs.slug}`} />
        <meta
          name="description"
          content={`${blogs.content.substring(3, 500)} . . .`}
        />
      </Head>
      {/* {!isHljsApplied && (<><div className="fixed inset-0 flex items-center justify-center bg-black bg-opacity-50 backdrop-blur-2xl">
      <div className="bg-white p-4 rounded-lg">
        <h2 className="text-xl text-red-500 mb-4 text-center">Caution!</h2>
        
        <div className="flex justify-end text-center">
          Something is blocked by your browser.<br/>Try disabling your adblocker.
        </div>
      </div>
    </div></>)} */}
      <main className={mode ? 'dark' : ''}>
        <div className="pt-20 transition-all dark:bg-slate-900">
          <div className="ml-[2%] sm:p-10 p-5 sm:mx-[5%] md:mx-[15%] lg:mx-[30%] sm:py-5 transition-all dark:text-white">
            <h1 className="sm:text-5xl text-3xl font-bold">{blogs.title}</h1>
            <p className="text-gray-500 my-5 text-[16px]">
              <span className="flex items-center">
                <div className="border-2 border-blue-600 w-fit rounded-full mr-2">
                  <img
                    className="object-cover rounded-full "
                    src="https://i.imgur.com/h1huc0w.png"
                    alt="Soubhagyajit Borah"
                    width={50}
                  />
                </div>
                <span className="flex flex-col items-center">
                  Soubhagyajit Borah
                  <span className="text-gray-500 text-[16px]">
                    {new Date(blogs.createdAt).toLocaleDateString("en-US", {
                      year: "numeric",
                      month: "long",
                      day: "numeric",
                    })}
                  </span>
                </span>
              </span>
            </p>
            <hr className="border-none bg-slate-500 h-[1px] my-6" />
            <div className="my-4 text-lg">
              <div
                className="blog"
                dangerouslySetInnerHTML={{ __html: blogs.content }}
              ></div>
            </div>
          </div>
          <Comments blogs={blogs} />
          <style>
            {`h1{
                font-size:2rem;
              }
              h2{
                font-size:1.5rem;
              }
              h3{
                font-size:1.17rem;
              }
              .blog{
                padding:0;
              }
              pre{
                max-height:50vh;
                border-radius: 3px;
                background-color: #23241f;
                overflow: auto;
              }
              pre.ql-syntax {
                margin: 2px 0;
                padding: 10px;
              }
              .blog a{
                color:blue !important;
                text-decoration: underline !important;
              }
              blockquote em{
                margin: 0 10px;
              }
              blockquote {
                font-size: 1.25em;
                width: 100%;
                margin: 64px auto;
                font-family: Open Sans;
                font-style: italic;
                color: #555555;
                padding: 1.2em 30px 1.2em 75px;
                border-left: 6px solid lightgray;
                line-height: 1.6;
                position: relative;
                background: ghostwhite;
                border-radius: 4px;             
              }
              .image-paragraph img {
                max-width: 100%;
                height: auto;
              }
              @media (prefers-color-scheme: dark) {
                .blog a {
                  color: #58b1ff;
                }
              }
            `}
          </style>
        </div>
      </main>
    </>
  );
};

export async function getServerSideProps(context) {
  if (!mongoose.connections[0].readyState) {
    await mongoose.connect(process.env.MONGODB_URI);
  }
  const { slug } = context.query;

  let blogs = null;
  try {
    blogs = await Blogs.findOne({ slug: slug });
  } catch (error) {
    console.error("Error fetching blog data:", error);
  }

  return {
    props: { blogs: JSON.parse(JSON.stringify(blogs)) },
  };
}

export default Blog;

I tried everything from placing console logs on some places, tried other libraries like Prism and react-syntax-highlight. Also tried to render the highlight function after proper loading of the page.

Error when printing map title with ol-ext print dialog Openlayers

I’m using the ol-ext print dialog to enable printing with Openlayers. There was no option to type the map title.

So I added the code:

// Add a title control
map.addControl(new ol.control.CanvasTitle({ 
  title: 'my title', 
  visible: false,
  style: new ol.style.Style({ text: new ol.style.Text({ font: '20px "Lucida Grande",Verdana,Geneva,Lucida,Arial,Helvetica,sans-serif'}) })
}));

After this update, I was no longer able to generate PDF and it shows the error:”Can’t save map canvas…”

Complete code follows.

// Print control
var printControl = new ol.control.PrintDialog({ 
});
printControl.setSize('A4');
map.addControl(printControl);

/* On print > save image file */
printControl.on(['print', 'error'], function(e) {
  // Print success
  if (e.image) {
    if (e.pdf) {
      // Export pdf using the print info
      var pdf = new jsPDF({
        orientation: e.print.orientation,
        unit: e.print.unit,
        format: e.print.size
      });
      pdf.addImage(e.image, 'JPEG', e.print.position[0], e.print.position[0], e.print.imageWidth, e.print.imageHeight);
      pdf.save(e.print.legend ? 'legend.pdf' : 'map.pdf');
    } else  {
      // Save image as file
      e.canvas.toBlob(function(blob) {
        var name = (e.print.legend ? 'legend.' : 'map.')+e.imageType.replace('image/','');
        saveAs(blob, name);
      }, e.imageType, e.quality);
    }
  } else {
    console.warn('No canvas to export');
  }
});

Does anyone know what it could be?

// Add a title control
map.addControl(new ol.control.CanvasTitle({ 
  title: 'my title', 
  visible: false,
  style: new ol.style.Style({ text: new ol.style.Text({ font: '20px "Lucida Grande",Verdana,Geneva,Lucida,Arial,Helvetica,sans-serif'}) })
}));

deleting realm instructions unclear

I was not able to make ‘uuid’ work in my _id, so I changed it to objectId and got:

[Error: The following changes cannot be made in additive-only schema mode:

Property ‘Produit._id’ has been changed from ‘uuid’ to ‘object id’. If your app is running in development mode, you can delete the realm and restart the app to update your schema.]

I tried the troubleshooting, I tried

  const realm = useRealm();
  realm.write(() => {
    // Delete all objects from the realm.
    realm.deleteAll();
  });

I went as far as;

const app = new Realm.App({ id: '<app id here>' });

const realm = await Realm.open({ schema: [Produit]});

Realm.App.Sync.initiateClientReset(app, realm.path);

realm.write(() => {
  realm.deleteAll();
});

const syncConfigWithClientResetFallback = {
  flexible: true,
  clientReset: {
    mode: 'recoverOrDiscardUnsyncedChanges', // or "recoverUnsyncedChanges"
    // can also include `onBefore` and `onAfter` callbacks
    onFallback: (_session, path) => {
      try {
        const didUserConfirmReset = showUserAConfirmationDialog();
        if (didUserConfirmReset) {
          // Close and delete old realm from device
          realm.close();
          Realm.deleteFile(path);
          // Perform client reset
          Realm.App.Sync.initiateClientReset(app, path);
        }
      } catch (err) {
      }
    },
  },
};

export default function App() {
 
  return (
    <AppProvider id={'application-pam2-ceyvopp'}>
    <UserProvider fallback={LogIn}>
      <RealmProvider
        schema={[Produit]}
        sync={syncConfigWithClientResetFallback/*{
          flexible: true,
          initialSubscriptions: {
            update(subs, realm) {
              subs.add(realm.objects(Produit));
            },
          },
        }*/}>
    <Create/>

    </RealmProvider>
    </UserProvider>
    </AppProvider>
  )
}```
after that it just starts saying; [Error: Exception in HostFunction: Compiling JS failed: 26:21:';' expected Buffer size 8428 starts with: 5f5f642866756e6374696f6e2028676c]

and refuses to load. I am at my wit's end.



Alternatively, if any of you know how to make uuid work, I'd welcome that too, because that page is useless. https://www.npmjs.com/package/react-native-get-random-values

Thank you in advance!

How to Handle Dynamic File Inputs in Puppeteer

I’m working with Puppeteer and encountering an issue where I need to interact with multiple elements on a page that are dynamically loaded after clicking an anchor tag. Specifically, I need to click on the second file input after clicking the anchor tag, but it’s not available immediately.

// Click the first anchor tag to trigger content change
await page.click('.file_pm a:first-of-type');

// Wait for the page to update after clicking
await page.waitForTimeout(2500); // Adjust delay as needed

// Ensure the new file inputs are available
await page.waitForSelector('tbody input[type="file"]:nth-of-type(2)', { visible: true });

// Select and upload the first file
const imageUploadHandler1 = await page.$('tbody input[type="file"]:nth-of-type(1)');
if (imageUploadHandler1) {
    await imageUploadHandler1.uploadFile(user.images[0].src);
} else {
    console.error('First file input is not found.');
}

// Re-check for the second file input and upload the file
const imageUploadHandler2 = await page.$('tbody input[type="file"]:nth-of-type(2)');
if (imageUploadHandler2) {
    await imageUploadHandler2.uploadFile(user.images[1].src);
} else {
    console.error('Second file input is not found.');
}

// Click the anchor tag again if needed
await page.click('.file_pm a:first-of-type');

Problem:

After clicking the anchor tag, the second file input is not found immediately. Even with extended time delays, the element appears visible on the page, but my code cannot find it. I suspect this issue is due to the file inputs being loaded dynamically and not being available right after the click action.

Question:

  • What’s the best approach to ensure Puppeteer waits correctly for dynamically loaded elements after an action?
  • Is there a more reliable way to detect when new elements are available and interact with them?
  • Are there best practices for handling dynamic content updates with Puppeteer, especially for file inputs?

Any help or suggestions would be greatly appreciated!

JS Function in HTML says “buy is not defined”, but it is?

I am trying to make a little element that looks like a button execute a js function I defined named “buy()”. For an odd reason, it works for some and doesn’t for others. All buy() does is show a modal.

I tried to put the content of the function in the onclick property but it contains quotes, which would make it go onclick=”$(“.modal”).show()” and i can’t use single quotes, because this is all being echoed by a php script aswell. I tried using backslashes since that is what I am used to in other languages but those don’t work.

buy():

function buy() {
   $(".modalBackground").show();
   $("#promptPurchase").show();
}

html element using buy():
<a class="Button" onclick="buy()">Buy</a>

The script tag is below the a, and when I put it above it, it still returns the same issue.

AVATAR FILE.SVG issue

As you guys can see, the line of clothing goes over the head ( this happens to any shirts/hoodies that i upload )

to anyone that helps i appreciate you so much! what do i do? I am new to coding, what i am trying to do is putting the hood behind the head, click the images to see what i mean. So if you can send me css code or any coding that will fix issue i appreciate!

the issue What i want

<svg aria-label="user avatar" viewBox="-40.94377899169922 -146.29818725585938 68.82828521728516 163.4471893310547" preserveAspectRatio="xMidYMid meet">
            <g><ellipse cy="2.223" style="fill-opacity:0.05;" cx="-5.426" rx="31.834" ry="14.926"></ellipse><ellipse rx="28.774" style="fill-opacity:0.05;" cx="-5.426" cy="2.223" ry="13.491"></ellipse><ellipse cy="2.223" style="fill-opacity:0.1;" cx="-5.426" rx="25.463" ry="11.939"></ellipse><ellipse cy="1.962" style="fill-opacity:0.1;" cx="-5.426" rx="22.649" ry="10.619"></ellipse><ellipse cy="1.962" style="fill-opacity:0.1;" cx="-5.426" rx="20.723" ry="9.716"></ellipse><ellipse cy="1.962" style="fill-opacity:0.1;" cx="-5.426" rx="18.68" ry="8.758"></ellipse><ellipse rx="16.723" style="fill-opacity:0.1;" cx="-5.426" cy="1.962" ry="7.841"></ellipse><ellipse cy="1.962" style="fill-opacity:0.1;" cx="-5.426" rx="14.352" ry="6.729"></ellipse><ellipse cy="1.962" style="fill-opacity:0.1;" cx="-5.426" rx="14.352" ry="6.729"></ellipse><g><g><path fill="#FEE2CA" d="M10.366-67.916c-4.63-1.803-3.469,4.047-1.523,7.045c2.261,3.481,2.458,8.617,4.519,8.182 C16.482-53.349,12.745-66.989,10.366-67.916z"></path><path fill="#EFC1B7" d="M13.052-63.248c-0.821-2.394-1.839-4.338-2.686-4.668c-4.63-1.803-3.469,4.047-1.523,7.045 c0.293,0.451,0.55,0.93,0.782,1.42C9.75-61.833,11.309-63.417,13.052-63.248z"></path></g><path fill="#EFC1B7" d="M2.188-77.313c-0.934-2.642-1.617-5.436,0.438-6.625c1.494-0.863,3.635,0.781,3.956,2.313 C7.363-77.907,14.723-63.998,9.375-64C6.338-64.001,3.835-72.649,2.188-77.313z"></path><path fill="#FEE2CA" d="M16.655-42.371c1.154,0.066,0.91-1.146,1.067-1.767c0.105-0.415,0.241-0.565,0.47-0.943 c0.28-0.462,0.206-2.837-0.196-3.988c-0.494-1.416-1.819-3.438-2.856-4.82c-0.859-3.598-6.128-2.485-3.815,1.413 c0.539,1.938,0.188,4.373,0.856,5.865c0.143,0.32,0.668,1.362,1.258,1.038c0.606-0.332-0.216-1.928,0.149-2.445 c0.41,0.166,0.982,0.413,1.28,0.718C15.223-46.938,16.103-42.891,16.655-42.371z"></path><path fill="#EFC1B7" d="M-0.119-11.38c-1.812,0.319-2.338,2.3-2.021,3.712c-0.674,1.645-0.886,3.685-0.358,4.715 c0.706,1.376,3.173,1.304,4.37,2.192C3.611,0.53,4.513,0.76,6.637,0.516c1.232-0.143,3.977-0.813,3.573-2.825 C9.852-4.1,5.704-4.699,3.327-7.94C3.141-9.455,2.529-11.844-0.119-11.38z"></path><path fill="#EFC1B7" d="M4.438-31.563c-0.612,1.854-0.599,5.153-2.25,6.375C-0.201-23.419-2.217-24.872-2.5-27.5 c-0.283-2.629-0.766-8.479-0.875-11.563c-2.194-6.504,2.5-15,8-11.25c2.457,1.675,2.12,5.081,1.956,7.625 C6.334-38.846,5.663-35.273,4.438-31.563z"></path><path fill="#EFC1B7" d="M-4.487-21.563c-0.024-1.418,1.823-7.051,3.237-7.75c1.532-0.755,3.227-0.474,4.188,1 c1.11,1.702,0.064,3.296-0.25,5.125C2.239-20.59,2.868-8.481,2.875-7.625C2.878-6.537-0.899-5.602-1.56-7.688 c-0.777-2.454-0.219-5.042-1.234-7.438C-3.366-16.473-4.45-19.403-4.487-21.563z"></path><g><path fill="#FEE2CA" d="M-11.888-65.667c-1.194-2.607-3.056-5.393-4.324-8.99c-0.753-2.138-1.121-5.052,0.019-7.524 c0.866-1.878,5.82-3.359,5.82-3.359l0.912-6.023c4.003-4.042,8.345-0.219,8.345-0.219l0.919,6.127c0,0,5.25-0.113,6.438,3.53 c0.754,2.313-0.965,4.106-0.866,5.143C6.066-69.729,3.025-68.113,3-63.337c-0.017,3.283,2.109,7.98,2.833,11.17 c0.566,2.486,0.726,4.84-1.333,6.75c-5.9,5.472-19.339,4.333-20.047-2.598c-0.308-3.015,1.544-6.454,2.312-9.513 C-12.476-60.562-11.266-64.308-11.888-65.667z"></path><path fill="#EFC1B7" d="M-10.374-85.54l0.912-6.023c4.003-4.042,8.345-0.219,8.345-0.219l0.863,5.822 C0.564-82.458-4.808-81.689-10.374-85.54z"></path></g><path fill="#EFC1B7" d="M-10.374-85.54l0.912-6.023c4.003-4.042,8.345-0.219,8.345-0.219l0.863,5.822 C0.564-82.458-4.808-81.689-10.374-85.54z"></path><path fill="#EFC1B7" d="M-6.088-84.868c-0.133,0.815,0.288,1.604,0.547,2.355c-1.589-0.349-3.308-0.733-4.962-0.824 c0.595,0.033,1.508,0.693,2.097,0.904c1.166,0.417,2.345,0.835,3.542,1.153c0.988,0.263,3.119,1.308,4.003,0.678 c0.449-0.32,0.399-0.882,0.834-1.252c0.477-0.406,1.104-0.629,1.558-1.066c-0.049,0.047-1.201-0.134-1.378-0.115 c-1.103,0.115-1.935,1.547-3.116,1.162C-4.224-82.285-5.401-83.789-6.088-84.868z"></path><path fill="#FEE2CA" d="M-2.63-81.815c1.292-0.019,1.629-2.104,1.82-3.093c-1.587,0.997-3.248,0.29-4.844-0.33 C-5.271-83.801-4.25-81.791-2.63-81.815z"></path><path fill="#FEE2CA" d="M-7.963-25.176c-1.762,5.577-6.048,1.982-6.537-1.324c-0.399-2.689-1.28-11.562-0.625-15 c-1.017-3.146,0.14-7.107,2-8.394c4.652-3.22,7.179,1.513,7.714,5.394C-5.05-41.897-7.323-27.193-7.963-25.176z"></path><path fill="#EFC1B7" d="M-14.5-26.5c0.183,1.235,0.896,2.51,1.809,3.332c0.12-0.57,0.305-1.159,0.193-1.749 c-1.136-6-0.835-12.905-0.252-16.169c-0.583-2.498-0.575-4.32-0.472-6.496c0.038-0.803,0.121-1.593,0.21-2.382 c-0.039,0.026-0.074,0.042-0.113,0.069c-1.86,1.287-3.017,5.248-2,8.394C-15.78-38.062-14.899-29.189-14.5-26.5z"></path><path fill="#FEE2CA" d="M-15.503-17.938c0.014-1.508,1.255-7.246,2.687-7.946c1.553-0.761,3.396-1.021,4.316,0.571 c1.066,1.839,0.052,3.939-0.313,5.875C-9.329-16.693-9.108-3.91-9.063-3C-9-1.749-12.833-1.204-13.438-3.438 c-0.713-2.625-0.175-5.426-1.125-8.001C-15.098-12.885-15.524-15.645-15.503-17.938z"></path><path fill="#EFC1B7" d="M-14.563-11.438c0.95,2.575,0.412,5.375,1.125,8.001c0.17,0.63,1.147,1.292,1.672,1.526 c0.018-0.118-0.473-1.146-0.466-1.26c0.037-0.653-1.566-10.386-1.654-13.079c-0.115-3.5,1.412-6.86,1.388-8.667 c-0.005-0.362-0.021-0.724-0.046-1.086c-0.091,0.04-0.183,0.076-0.272,0.119c-1.431,0.7-2.672,6.438-2.687,7.946 C-15.524-15.645-15.098-12.885-14.563-11.438z"></path><path fill="#FEE2CA" d="M-11.544-7.146c-1.893,0.191-2.585,2.196-2.362,3.676c-0.823,1.645-1.196,3.732-0.729,4.836 c0.624,1.472,3.175,1.585,4.341,2.589c1.699,1.463,2.612,1.771,4.818,1.676c1.282-0.055,4.163-0.538,3.898-2.644 C-1.811,1.112-6.046,0.182-8.25-3.34C-8.328-4.916-8.78-7.427-11.544-7.146z"></path><g transform="translate(0, -27) scale(0.7)" preserveAspectRatio="none"><g><path fill="#EFC1B7" d="M-24.264-146.928c17.06-11.301,45.582-5.833,45.634,18.391c1.183,6.835-1.475,12.496-2.472,19.07 c-0.646,4.262-0.646,11.626-4.947,15.585c-5.359,4.934-7.784,8.99-13.509,8.104c-19.084-2.898-27.638-15.839-31.256-23.03 C-35.312-117.747-36.104-139.083-24.264-146.928z"></path><path fill="#FEE2CA" d="M18.899-109.467c-0.646,4.262-0.646,11.626-4.947,15.585c-5.359,4.934-7.784,8.99-13.509,8.104 c-5.906-0.914-11.747-4.16-15.672-8.501c-3.23-3.573-7.69-13.093-8.729-20.122c-2.297-15.556,8.274-36.222,34.478-27.561 c4.012,1.326,9.647,6.469,10.851,13.425C22.554-121.702,19.896-116.042,18.899-109.467z"></path></g><g><path fill="#FEE2CA" d="M-20.873-100.867c-1.804-2.5-3.505-7.273-3.425-9.147c-3.063-5.558-7.912-2.784-7.895,0.563 C-32.174-105.555-27.125-100.096-20.873-100.867z"></path><path fill="#EFC1B7" d="M-25.614-103.754c-0.184,1.826,4.244,0.551,4.244,0.551s-1.19-2.205-1.681-3.248 c-0.965-2.048-2.649-4.4-5.383-4.4c-1.743,0-2.832,1.71-1.833,3.397c-0.095-1.038,0.164-1.923,1.398-1.706 c0.888,0.155,2.041,0.763,2.54,1.481c-1.816-0.146-1.315,1.647-0.37,2.335c1.09,0.792,2.458-0.037,2.909,1.323 C-24.327-103.61-25.006-103.841-25.614-103.754z"></path></g></g><g><path fill="#FEE2CA" d="M-21.054-63.337c4.251-2.525,3.642,4.102,1.429,7.399c-2.826,4.211-1,11.029-4.283,11.029 C-27.563-44.909-24.045-61.56-21.054-63.337z"></path><path fill="#EFC1B7" d="M-20.264-63.72c-0.09,0.034-0.192,0.088-0.288,0.132c-0.295,0.427-0.617,0.864-0.783,1.312 c0.003-0.308,0.029-0.601,0.055-0.894c-2.262,1.878-4.709,11.687-4.089,16.103c1.446-1.969,0.993-4.758,1.601-7.104 c0.286-1.102,0.11-2.434,0.54-3.445c0.526-1.239,1.766-2.068,2.337-3.301C-20.476-61.813-20.307-62.742-20.264-63.72z"></path></g><g><path fill="#FEE2CA" d="M-15.878-81.813c3.666-1.438,4,3.236,2.816,5.938c-1.052,2.404-3.911,12.144-5.313,14.438 c-1.313,1.708-3.74,2.573-3.875-0.688C-22.349-64.561-19.34-80.455-15.878-81.813z"></path><path fill="#EFC1B7" d="M-19.394-71.168c0.395-1.04,0.935-2.043,1.371-3.082c0.208-0.496,0.454-0.88,0.522-1.417 c0.11-0.86-0.004-1.586,0.281-2.433c0.353-1.045,0.841-2.011,1.784-2.819c0.462-0.396,1.055-0.683,1.484-1.036 c-0.5-0.182-1.131-0.171-1.928,0.142c-3.462,1.357-6.471,17.251-6.372,19.688c0.047,1.145,0.38,1.772,0.846,2.042 c0.196-0.262,0.375-0.536,0.513-0.834c0.463-0.999,0.629-2.034,0.646-3.137c-0.343,0.572-0.861,1.166-1.088,1.778 c0.016-1.64,0.39-3.043,0.731-4.641C-20.3-68.341-19.915-69.797-19.394-71.168z"></path></g>
<path fill="#FEE2CA" d="M-21.899-45.582c0.006-0.014,0.979,1.434,1.127,1.835c0.337,0.912,1.172,3.284,0.237,3.822 c-0.625,0.36-0.957-2.333-1.824-1.639c-0.607,0.484-0.842,0.363-1.204,1.848c-0.463,1.902-0.374,4.164-0.852,4.244 c-1.433,0.239-0.61-1.002-0.727-2.437c-0.539,1.942,0.071,2.928-0.54,2.842c-0.643-0.091-0.723-0.797-1.15-1.19 c-0.204-0.188-0.451-0.35-0.6-0.582c-0.052-0.08-0.205-0.774-0.16-0.752c-0.975-0.475-0.66-2.163-0.58-2.968 c0.094-0.935,0.213-1.941,0.582-2.821c0.638-1.524,0.994-1.511,1.437-3.09C-25.002-50.82-21.125-49.494-21.899-45.582z"></path></g>
        </g><g id="shirts-layer" transform="translate(0, 0) scale(1)"><!--00001-00740002600035--><g><path d="M11.719-46.238c-0.959-0.143-1.928-0.289-2.831-0.643c-0.903-0.354-1.748-0.938-2.233-1.779c-0.938-1.626-0.321-3.661-0.372-5.537C6.2-57.281,4.26-60.02,3.767-63.066c-0.472-2.92,0.331-5.775,2.878-7.28c1.527-0.903,3.885-0.527,5.345,0.555s1.935,1.712,3.006,3.18c0.392,0.538,0.805,1.068,1.089,1.67c0.282,0.597,0.431,1.247,0.577,1.891c0.102,0.45,0.204,0.899,0.306,1.349c0.034,0.148,0.052,0.317,0.117,0.458c0.044,0.096,0.114,0.167,0.175,0.251c0.205,0.281,0.373,0.578,0.6,0.845c0.458,0.537,0.999,0.994,1.524,1.462c0.914,0.816,1.786,1.681,2.61,2.589c0.244,0.269,0.488,0.548,0.627,0.883c0.13,0.312,0.162,0.656,0.172,0.994c0.061,2.079-0.696,4.172-2.074,5.73c-0.208,0.236-0.43,0.459-0.665,0.668c-0.204,0.182-0.44,0.337-0.62,0.544c-0.341,0.39-0.88,0.553-1.361,0.72c-0.935,0.325-1.921,0.502-2.91,0.523c-0.497,0.011-0.982-0.06-1.476-0.076c-0.16-0.005-0.31,0.028-0.468,0.045C12.725-46.009,12.202-46.165,11.719-46.238z"></path><path style="" d="M10.767-46.524c0.203,0.607,1.148,3.443,1.688,3.848c0.54,0.405,4.118,1.013,6.885-0.27c2.768-1.283,2.97-3.578,2.835-3.78c-0.135-0.203-0.988-2.431-0.988-2.431s-2.117,1.959-5.627,2.566C12.05-45.984,10.767-46.524,10.767-46.524z" fill="#1C1C1C"></path><path style="" d="M21.993-56.094c-0.824-0.908-1.695-1.772-2.61-2.589c-0.525-0.469-1.066-0.925-1.523-1.462c-0.227-0.267-0.395-0.564-0.6-0.845c-0.061-0.084-0.132-0.155-0.175-0.251c-0.05-0.11-0.073-0.234-0.096-0.354c-1.021,1.891-1.982,3.816-2.841,5.787c-0.114,0.262-0.228,0.532-0.232,0.817c-0.007,0.604,0.499,1.117,1.07,1.316c0.57,0.199,1.193,0.153,1.795,0.104c-0.873,2.419-3.165,4.264-5.715,4.601c2.202,1,4.785,1.78,6.985,0.777c0.905-0.413,1.656-1.093,2.392-1.764c0.855-0.78,1.63-1.945,2.311-3.271c0.031-0.329,0.049-0.659,0.039-0.989c-0.01-0.338-0.042-0.682-0.172-0.994C22.481-55.546,22.237-55.826,21.993-56.094z" fill="#2D2D2D"></path><path d="M14.187-46.4c-2.469,0.266-3.42-0.124-3.42-0.124c0.203,0.607,1.148,3.443,1.688,3.848c0.332,0.249,1.812,0.573,3.546,0.489C15.442-43.442,14.637-45.271,14.187-46.4z"></path></g><!---0004-00870002200030--><g><path d="M11.561-75.551c0.188,1.229,0.175,2.496,0.541,3.684c0.29,0.941,0.808,1.797,1.397,2.587c0.671,0.9,1.474,1.81,1.56,2.93c0.059,0.764-0.236,1.515-0.627,2.173c-0.96,1.614-2.554,2.838-4.361,3.349c-1.807,0.511-3.468,0.31-5.13-0.563c-1.142-0.599-2.24-3.574-2.43-4.527c-0.34-1.701-2.565-8.668-2.9-10.413c-0.336-1.745-0.345-1.667,0.024-2.649c0.368-0.981,2.067-1.244,3.12-1.944c0.912-0.606,1.598-3.779,3.226-2.716c0.371,0.242,0.772,0.46,1.125,0.725c0.754,0.564,1.435,1.223,2.029,1.954c0.596,0.734,1.104,1.541,1.505,2.398c0.401,0.856,0.697,1.762,0.868,2.692C11.526-75.766,11.545-75.659,11.561-75.551z"></path><path style="" d="M12.102-71.867c-0.366-1.188-0.353-2.456-0.541-3.684c-0.017-0.107-0.035-0.214-0.054-0.321c-0.172-0.93-0.467-1.836-0.868-2.691c-0.39-0.831-1.233,7.329-0.352,9.777c0.587,1.63,1.775,3.047,3.248,3.959c0.274,0.17,0.582,0.324,0.903,0.298c0.081-0.007,0.148-0.046,0.22-0.072c0.269-0.549,0.447-1.144,0.401-1.748c-0.086-1.12-0.889-2.029-1.56-2.93C12.91-70.07,12.392-70.926,12.102-71.867z" fill="#2D2D2D"></path></g><!---0025-00980003700057--><g><path style="" d="M7.158-50.085c0.833-0.595,2.306-2.654,2.241-4.692c-0.055-1.705-0.679-3.492-1.209-5.989c-0.133-0.626-0.271-1.228-0.387-1.859c-0.059-0.321-0.043-6.724,0.08-8.067c0.276-2.994,0.743-6.368,0.039-9.48c-0.191-0.844-0.936-3.271-1.017-3.218c-1.626,1.062-5.83,3.035-7.476,4.07c-0.588,0.369-0.749,0.806-1.539,0.517c-0.945-0.345-1.891-0.691-2.801-1.113c-1.218-0.565-2.363-1.263-3.584-1.82c-1.847-0.843-3.049-1.014-5.094-0.907c-2.045,0.107-3.203,0.567-4.599,1.995c-2.236,2.289-0.62,6.22-0.012,9.293c0.608,3.073,1.274,5.228,0.973,8.342c-0.187,1.931-2.669,8.633-2.44,9.544c0.141,0.561,0.463,1.066,0.823,1.531c1.5,1.937,3.762,3.325,6.234,3.824c3.953,0.798,7.974,1.174,11.927,0.381C0.3-47.93,1.382-48.038,2.35-48.298C3.811-48.689,6.325-49.489,7.158-50.085z" fill="#2D2D2D"></path><path d="M7.802-63.801c-0.039-0.296,0.108-7.694,0.108-7.694c-2.424,6.16-5.851,12.35-6.042,13.38C3.182-58.49,6.121-61.589,7.802-63.801z"></path><path d="M-9.437-91.61c-4.669,1.269-6.135,2.652-5.047,3.604c1.088,0.952,4.156,2.424,4.156,2.424L-9.437-91.61z"></path><path d="M-1.08-91.781l0.925,6.096c0,0,3.219,0.171,4.829,1.404c0.793,0.607,1.288-3.045,0.835-3.861s-1.768-1.677-2.584-1.904S-1.08-91.781-1.08-91.781z"></path><path style="" d="M7.259-88.993c-2.794-3.077-7.595-5.256-10.798-5.581c-1.065-0.108-2.242-0.092-3.302-0.039c0.311,0.441,0.622,0.87,0.928,1.29c0.128-0.011,0.245-0.031,0.38-0.035c2.603-0.068,4.273,1.413,4.418,1.576c0.018,0.304,1.169,0.697,1.169,0.697s1.847,0.644,2.721,1.191c1.361,0.85,1.719,1.25,1.932,1.549c0.197,0.277,0.298,0.613,0.341,0.95c0.199,1.586-0.818,3.047-1.839,4.277c-0.994,1.198-2.051,2.343-3.151,3.445c-2.067-0.472-3.78-1.946-5.492-3.235c-2.091-1.575-4.349-2.927-6.723-4.028c-0.726-0.336-1.511-0.692-1.907-1.387c-0.078-0.136-0.139-0.291-0.118-0.447c0.023-0.172,0.142-0.314,0.261-0.441c1.292-1.39,3.594-1.85,4.305-2.063c0.395-0.675,1.497-1.865,3.702-2.05c-0.307-0.419-0.618-0.849-0.928-1.29c-0.376,0.019-0.738,0.043-1.074,0.068l-0.001,0.007c-0.722,0.045-3.078,0.424-3.786,0.623c-2.751,0.776-5.453,1.756-7.629,3.572c-0.288,0.241-0.575,0.508-0.711,0.858c-0.127,0.327-0.109,0.691-0.076,1.04c0.101,1.045,0.325,2.078,0.666,3.07c-0.538,0.629-1.075,1.257-1.613,1.886c-0.106,0.124-0.216,0.256-0.245,0.416c-0.031,0.171,0.036,0.343,0.107,0.502c0.439,0.976,1.107,1.849,1.935,2.528c0.121,0.099,0.248,0.196,0.398,0.238c0.289,0.081,0.589-0.056,0.862-0.181c2.653-1.218,5.664-1.644,8.551-1.209c2.791,0.42,4.971,2.651,7.514,3.877c0.759,0.366,1.547,0.731,2.389,0.763c1.008,0.038,1.991-0.418,2.749-1.084c0.758-0.666,1.317-1.528,1.801-2.413c-0.936,0.223-1.891,0.43-2.846,0.506c2.351-0.524,4.505-1.965,5.814-3.993c0.302-0.468,0.614-1.214,0.706-1.763C8.908-86.71,8.219-87.937,7.259-88.993z" fill="#2D2D2D"></path><g><path style="" d="M-17.154-49.872c-0.066,0.566-0.132,3.582-0.132,3.582s4.682,0.566,7.32,1.383c2.638,0.817,6.594,0.88,10.419,0.44s8.045-2.262,8.045-2.262l-0.132-3.896c0,0-4.814,2.011-9.825,2.514c-2.886,0.29-7.051-0.592-10.353-1.194C-14.244-49.75-17.154-49.872-17.154-49.872z" fill="#2D2D2D"></path><path d="M8.497-46.73l-0.141-4.749c0,0-4.804,2.864-9.816,3.367c-2.886,0.29-7.051-0.592-10.353-1.194c-2.432-0.443-5.361-1.009-5.361-1.009c-0.066,0.566-0.564,3.92-0.564,3.92s2.74,0.383,5.019,0.829c0.027-0.928,0.047-1.523,0.179-2.559c1.048,0.422,1.87,0.6,2.825,0.764c-0.139,0.65-0.209,1.313-0.208,1.976c0,0.168,0.014,0.338,0.047,0.502c0.277,0.083,0.567,0.158,0.87,0.225c-0.081-0.844-0.111-1.693-0.059-2.539c0.862,0.1,1.725,0.2,2.587,0.299c0.064,0.903,0.273,1.794,0.605,2.642c0.248,0.014,0.492,0.032,0.746,0.04C-5.19-45.163-5.212-46-5.201-46.95c2.9,0.217,5.498-0.178,7.408-0.799c-0.228,0.84-0.21,1.839-0.354,3.065c0.328-0.062,0.654-0.132,0.977-0.207c0.048-0.369,0.323-2.213,0.472-3.124c0.823-0.16,1.536-0.325,2.306-0.644c-0.168,1.206-0.222,1.911-0.39,3.117C7.115-46.134,8.497-46.73,8.497-46.73z"></path></g><path d="M-10.537-47.745c0.62,0.096,1.242,0.182,1.864,0.25c0,0,0.001,0,0.001,0c2.286,0.198,4.099,0.562,6.37,0.15c-1.44-0.33-6.928-0.882-10.178-4.851c0.198-0.608,0.401-2.059,1.01-2.639c0.125-0.21,3.421,2.462,7.008,2.255c-2.283-2.279-6.661-10.139-6.661-10.139s-0.086-6.92-0.548-8.73c-0.008-0.403-1.141-4.104-2.539-6.491c-0.845-1.443-2.626-2.613-3.562-3.106c-0.138,0.125-0.275,0.253-0.417,0.398c-2.237,2.289-0.62,6.22-0.012,9.293c0.608,3.073,1.274,5.228,0.973,8.342c-0.018,0.184-0.062,0.422-0.117,0.684c-0.01,0.044-0.017,0.086-0.027,0.13c-0.565,2.543-2.499,7.92-2.295,8.73c0.141,0.561,0.463,1.066,0.823,1.531c1.5,1.937,3.762,3.325,6.234,3.824c0.626,0.126,1.254,0.239,1.882,0.339C-10.665-47.764-10.601-47.755-10.537-47.745z"></path><g><path d="M-14.95-86c0,0-2.051-0.757-4.505-3.465l-0.604,0.066c-0.095,0.305-0.09,0.634-0.059,0.954c0.096,0.994,0.311,1.976,0.626,2.924C-17.543-86.087-14.95-86-14.95-86z"></path></g><path d="M-10.304-83.613c2.775,1.742,4.631,2.229,4.631,2.229s-0.521-0.744-2.115-1.584C-9.55-83.896-10.304-83.613-10.304-83.613z"></path><path d="M4.132-82.011c-1.542,0.597-2.253,0.747-2.568,0.779c-0.483,0.527-0.983,1.037-1.488,1.543l-0.282,0.347c3.202,0.151,6.432-1.504,8.17-4.198c0.302-0.468,0.614-1.214,0.706-1.763c0.179-1.06-0.153-2.031-0.749-2.887C7.768-84.564,6.465-82.914,4.132-82.011z"></path><g><path style="" d="M4.71-73.785C4.622-73.862,4.528-73.928,4.436-74c-0.106,0.088-0.195,0.193-0.266,0.316c0.09,0.071,0.19,0.125,0.277,0.201c1.384,1.211,2.188,2.903,2.264,4.764c0.16,3.932-2.992,7.433-7.028,7.804c-1.992,0.184-3.883-0.412-5.325-1.675c-1.384-1.211-2.188-2.903-2.264-4.764c-0.16-3.932,2.992-7.433,7.028-7.804c0.236-0.022,0.472-0.033,0.705-0.033c1.612,0,3.116,0.536,4.344,1.507C4.241-73.807,4.33-73.912,4.436-74c-1.488-1.182-3.368-1.736-5.352-1.556c-4.244,0.391-7.559,4.078-7.39,8.219c0.081,1.971,0.933,3.764,2.4,5.048c1.346,1.178,3.057,1.806,4.883,1.806c0.246,0,0.493-0.011,0.743-0.034c4.244-0.391,7.559-4.078,7.39-8.219C7.03-70.707,6.177-72.501,4.71-73.785z" fill="#FFFFFF"></path><path style="" d="M6.382-70.828c-0.035-0.071-0.11-0.114-0.191-0.096c-0.015,0.003-1.576,0.274-2.652,0.4c-0.847,0.1-1.652,0.172-1.962,0.199l-0.515-1.372c-0.132,0-0.259,0-0.382,0l0.609,1.623c0.028,0.074,0.102,0.124,0.182,0.115c0.01-0.001,1.025-0.084,2.11-0.212c0.668-0.078,1.519-0.212,2.079-0.304l-3.2,2.949c-0.053,0.049-0.071,0.124-0.047,0.192l1.498,4.14l-3.891-2.18c-0.064-0.036-0.144-0.029-0.202,0.018l-3.844,3.157l1.323-4.646c0.022-0.077-0.011-0.16-0.08-0.202l-1.413-0.843l-2.556-1.526c0.571,0.005,1.43,0.001,2.255-0.04c1.403-0.071,2.483-0.16,2.494-0.161c0.075-0.006,0.138-0.058,0.158-0.13l0.476-1.709c-0.119,0.013-0.239-0.005-0.358-0.049l-0.43,1.542c-0.322,0.025-1.236,0.093-2.358,0.15c-1.394,0.071-2.883,0.029-2.897,0.03c-0.082-0.02-0.154,0.05-0.177,0.128c-0.023,0.078,0.01,0.162,0.08,0.203l3.015,1.8l1.409,0.841l-1.442,5.065c-0.021,0.075,0.009,0.155,0.074,0.198c0.03,0.02,0.064,0.029,0.098,0.029c0.041,0,0.081-0.014,0.114-0.041l4.191-3.443l4.203,2.355c0.066,0.037,0.147,0.03,0.204-0.019c0.057-0.048,0.078-0.127,0.052-0.197l-1.621-4.48l3.554-3.275C6.401-70.672,6.417-70.757,6.382-70.828z" fill="#FFFFFF"></path><path style="" d="M-1.369-71.454l0.912-3.27l1.136,3.028c0.123,0,0.25,0,0.382,0l-1.376-3.667c-0.027-0.073-0.097-0.112-0.176-0.116c-0.077,0.003-0.144,0.056-0.165,0.13l-1.072,3.845C-1.608-71.459-1.489-71.441-1.369-71.454z" fill="#FFFFFF"></path><path style="" d="M2.746-67.458l-1.063-2.688c-0.029-0.073-0.096-0.125-0.18-0.112l-1.513,0.113c0,0.119,0,0.238,0,0.358l1.409-0.105l0.966,2.445l-2.452,2.014l-2.552-1.499l0.744-2.714l1.885-0.141c0-0.119,0-0.238,0-0.358l-2.038,0.152c-0.075,0.006-0.139,0.058-0.159,0.131l-0.813,2.966c-0.021,0.077,0.012,0.16,0.082,0.201l2.778,1.631c0.028,0.016,0.059,0.025,0.091,0.025c0.041,0,0.081-0.014,0.114-0.041l2.649-2.176C2.753-67.304,2.775-67.386,2.746-67.458z" fill="#FFFFFF"></path></g><path d="M-14.617-48.736c2.918,1.463,9.694,2.398,14.967,1.471c5.272-0.927,7.216-2.264,8.035-3.093l-0.029-1.122c0,0-3.413,3.855-11.807,3.904c-8.395,0.049-10.918-1.914-10.918-1.914L-14.617-48.736z"></path><path d="M1.134-77.554c-1.126,0.24-2.299-0.077-3.36-0.525c-2.423-1.024-4.497-2.718-6.806-3.978c-2.309-1.26-5.091-2.079-7.56-1.172c-0.871,0.32-1.679,0.848-2.598,0.976c-0.804,0.113-1.758-0.237-2.067-0.942c-0.018,0.04-0.043,0.078-0.051,0.121c-0.031,0.171,0.036,0.343,0.107,0.502c0.439,0.976,1.107,1.849,1.935,2.528c0.121,0.099,0.722,0.682,1.375,0.387c2.661-1.201,4.212-1.758,7.099-1.323c2.791,0.421,6.308,2.434,8.851,3.66c0.759,0.366,1.547,0.731,2.389,0.763c1.008,0.038,1.991-0.418,2.749-1.084c0.758-0.666,1.317-1.528,1.801-2.413c-0.048,0.011-0.097,0.022-0.144,0.033c-0.046,0.039-0.095,0.075-0.14,0.114C3.622-78.957,2.547-77.855,1.134-77.554z"></path></g><!---0038-00720002700041--><g><path style="" d="M-19.634-39.575c-2.438,1.793-5.826,2.034-8.596,0.813c-2.77-1.22-4.891-3.613-6.338-6.272c-0.029-0.053-0.146-0.237,0.044-0.511c0.581-0.836,2.183-2.458,3.003-3.298c0.133-0.136,0.271-0.283,0.309-0.469c0.039-0.188-0.032-0.38-0.101-0.559c-0.278-0.716-0.557-1.431-0.835-2.147c-0.146-0.376-0.295-0.779-0.21-1.174c0.078-0.361,0.339-0.651,0.601-0.911c1.027-1.021,2.226-1.887,3.074-3.061c1.46-2.022,1.68-4.645,2.223-7.079c0.074-0.332,0.157-0.669,0.33-0.962c0.208-0.352,0.531-0.618,0.859-0.862c0.924-0.685,1.94-1.246,3.012-1.664c1.488-0.58,3.164-0.397,4.504,0.474c1.34,0.87,2.24,2.335,2.573,3.898c0.122,0.569,0.173,1.151,0.229,1.73c0.148,1.529,0.331,3.056,0.64,4.56c0.065,0.318,0.137,0.64,0.109,0.964c-0.041,0.479-0.293,0.912-0.566,1.308c-0.696,1.013-1.574,1.939-1.953,3.108c-0.488,1.509,0.211,3.22,0.426,4.791c0.214,1.564,0.472,3.301-0.427,4.598C-17.042-41.839-18.396-40.485-19.634-39.575z" fill="#2D2D2D"></path><path style="" d="M-30.93-40.442c-0.124,0.87-0.511,4.367-0.263,4.74c0.248,0.373,3.106,2.174,6.087,2.112c2.982-0.062,4.41-0.87,4.41-0.87l0.621-4.845c0,0-1.937,1.393-5.528,0.87C-29.388-38.987-30.93-40.442-30.93-40.442z" fill="#2D2D2D"></path><path d="M-26.471-49.31c-0.612,0.221-1.586,0.349-2.371-0.197c-0.411-0.286-1.761-1.709-2.355-1.98c-0.314-0.143-0.5-0.261-0.844-0.254c0.242,0.624,0.485,1.247,0.727,1.871c0.07,0.179,0.14,0.371,0.101,0.559c-0.038,0.186-0.177,0.333-0.309,0.469c-0.241,0.247-0.481,0.494-0.722,0.74c0.995,1.152,2.191,2.132,3.537,2.842c0.165,0.087,0.343,0.173,0.529,0.16c0.173-0.011,0.328-0.105,0.473-0.202c1.939-1.292,4.274-5.326,4.274-5.326S-25.36-49.711-26.471-49.31z"></path><path d="M-14.953-61.628c-0.044-0.449,0.1-0.256,0.028-0.701c-1.211,3.51-5.401,7.609-7.351,7.481c0.89,0.793,1.65,1.527,2.264,2.645c0.641,1.168,0.656,2.624-0.081,3.734c-0.737,1.11-1.91,1.844-3.069,2.502c-1.159,0.658-2.366,1.297-3.25,2.295c1.243,0.388,2.552,0.561,3.853,0.51c-1.519,1.977-4.443,2.459-6.809,1.671c-2.089-0.696-3.801-2.192-5.241-3.876c-0.034,0.101-0.024,0.217,0.039,0.333c1.447,2.658,3.568,5.052,6.338,6.272c2.77,1.22,6.158,0.98,8.596-0.813c1.238-0.91,2.593-2.265,2.911-2.724c0.899-1.297,0.641-3.035,0.427-4.598c-0.215-1.571-0.914-3.282-0.426-4.791c0.378-1.169,1.257-2.095,1.953-3.108c0.272-0.396,0.525-0.829,0.565-1.308c0.027-0.323-0.044-0.646-0.109-0.964C-14.622-58.572-14.805-60.099-14.953-61.628z"></path><path d="M-23.568-60.629c0.043-0.267-0.118-0.52-0.275-0.741c-0.428-0.601-0.88-1.185-1.355-1.75c-0.357-0.424-0.745-0.851-1.259-1.061c-0.005-0.002-0.011-0.002-0.017-0.004c-0.446,2.02-0.689,4.161-1.598,5.982c0.182-0.006,0.612,0.1,2.013-0.449C-24.655-59.201-23.617-60.328-23.568-60.629z"></path><path d="M-23.044-38.412c-0.021,1.55-0.042,3.1-0.064,4.65c1.623-0.255,2.413-0.698,2.413-0.698l0.621-4.845C-20.073-39.305-21.104-38.621-23.044-38.412z"></path></g><!---0030-00850002100030--><g><path style="" d="M-23.012-71.802c-0.078,0.371-0.243,0.718-0.405,1.06c-0.758,1.597-1.516,3.193-2.274,4.79c-0.177,0.372-0.355,0.752-0.404,1.161c-0.05,0.417,0.04,0.838,0.146,1.244c0.351,1.351,0.895,2.67,1.752,3.772c0.857,1.102,2.047,1.977,3.406,2.296c1.717,0.403,3.529-0.103,5.104-0.895c0.808-0.406,1.229-1.132,1.765-1.86c0.347-0.472,1.955-9.608,1.954-10.096c-0.002-1.069,0.296-2.115,0.393-3.18c0.121-1.328,1.133-3.658-0.936-6.336c-0.58-0.75-2.059-1.383-3.52-1.201c-2.011,0.251-2.869,1.15-3.816,2.097C-21.267-77.528-22.942-72.131-23.012-71.802z" fill="#2D2D2D"></path><path d="M-11.968-70.33c0-0.003,0-0.006,0-0.009c-0.13,0.167-0.259,0.333-0.389,0.5c-0.123,0.158-1.027,0.877-1.368,0.877c-0.342,0-2.112-1.796-3.416-2.168c-0.124-0.031,1.922,5.47,1.983,6.129c0.074,0.791,0.565,1.898,0.226,2.617c-0.724,1.535-1.919,3.35-3.06,4.845c0.592-0.08,1.849-0.605,2.304-0.833c0.808-0.406,1.229-1.132,1.765-1.86C-13.574-60.707-11.967-69.843-11.968-70.33z"></path><path d="M-20.093-78.659c-0.103,0.15-0.208,0.308-0.314,0.473c6.915,0.984,8.129,8.035,8.141,8.107l0.193,0.166c0.089-0.337,0.152-0.741,0.214-1.139C-12.498-73.117-14.603-77.754-20.093-78.659z"></path></g></g></svg>

Handler after press button cancel Login with Google

I have a project with Hapi JS and use Bell for provide Sign in with Oauth Google. In handler for Sign up or Sign in, there problem i found it. If user press Cancel button after choose a account (in case user choose wrong email), but throw error like this

{
"statusCode": 500,
"error": "Internal Server Error",
"message": "An internal server error occurred"
}

this error redirect on path http://localhost:9001/user/auth/google?error=access_denied&state=RNVnZeQdAZoBm5kJyWB79p.

and this is my code

Auth strategy

server.auth.strategy('google', 'bell', {
    provider: 'google',
    password: PASSWORD_STRATEGY_GOOGLE,
    clientId: GOOGLE_CLIENT_ID,
    clientSecret: GOOGLE_CLIENT_SECRET,
    isSecure: false,
  });

this is for my route Sign in or up with Google

{
    method: ['POST', 'GET'],
    path: '/user/auth/google',
    handler: handlerGoogleLoginUsers,
    options: {
      auth: 'google',
      cors: true,
      plugins: {
        'hapi-rate-limit': {
          pathLimit: 1,
          pathCache: {
            expiresIn: 10000,
          },
          authCache: {
            expiresIn: 5000,
          },
        },
      },
    },
  },

and this for my handler

const handlerGoogleLoginUsers = async (request, h) => {
  const { profile } = request.auth.credentials;
  const { error } = request.query;

  try {
    if (error === "access_denied") {
      console.log(error);
      return h.response({
        status: 'fail',
        message: 'User cancel it!',
      }).code(400);
    }

    const dataToken = JSON.stringify(profile.raw);
    return h.redirect(`/user/api/google/callback?raw=${dataToken}&type=web`);
  } catch (err) {
    console.error('Terjadi error saat login google: ', err);
    return h.response({
      status: 'error',
      message: 'Terjadi kesalahan, Coba lagi.',
    }).code(500);
  }
};

"@hapi/bell": "^13.0.2",
"@hapi/hapi": "^21.3.6",

if redirect on http://localhost:9001/user/auth/google?error=access_denied&state=RNVnZeQdAZoBm5kJyWB79p and this path have a params error or state should be catch in my handler.

if (error === "access_denied") {
      console.log(error);
      return h.response({
        status: 'fail',
        message: 'User cancel it!',
      }).code(400);
    }

any idea? or something else?

ERROR
Cancel Login

Struggling using JS to create a HTML element and replace it with new content (document.createElement)

I am currently working on a on a small „project“ if you can call it that way.
It’s pretty simple two buttons which affect a

element that alone works, but now I decided to use Objects and DOM to get a better understanding of it. So I added a ranking below the p which should call 1st, 2nd… and so on depending on which number you are.

—-HTML—-

<body>

<div id="OuterShell">

<div id="ContainsButtons">
<button id="AddPs">Add</button>
<button id="RemovePs">Remove</button>
</div>
<div id="ContainsPs">
<p id="text" class="text">0</p> 
</div>
</div>

<script src="./TestJS.js"></script>
</body>
</html>

——end—-
Now my problem is that it either deletes the new ranking which I currently added, deleting everything or deleting nothing at all and just add more and more paragraphs.

—-JS—-

var Text = document.getElementById("text");
var B1 = document.getElementById("AddPs");
var B2 = document.getElementById("RemovePs");
var div1 = document.getElementsByTagName("div")[2];

var counter = 0;
var x = false;

function AddOne(){
if(counter < 10){
counter++
update();
}
else{
Text.innerText = TextStored.Limit;
}
}

function RemoveOne(){
if(counter > 0){
counter--
update();
}
else{
Text.innerText = TextStored.Limit;
}
}

function update(){
Text.innerText = counter;
var ranking = document.createElement("p");
var ItsText = document.createTextNode(TextStored.Text[counter]);
ranking.appendChild(ItsText);
div1.appendChild(ranking);

if(x){
var deleted = ranking.parentNode;
deleted.removeChild(ranking);
}

x = true;
return ranking;
}

var TextStored = {
Text: [0,"1st","2nd","3rd","4th","5th","6th","7th","8th","9th","10th"],
Limit: "You reached the limit"
};

B1.onclick = AddOne;
B2.onclick = RemoveOne;

—-end—-

I tried it first myself different placing of the code, use different variables even tried to solve it in a complicated way which doesn’t work either then I looked it up online at the end but I didn’t found something useful (or didn’t understand/google it right.
Nothing worked I only got a better understanding why it doesn’t work and how the PC reads the code.

—-Expections—-
When I press one button (for example Add) it should output this

1
1st

When I press Add again it should update both numbers

2
2nd

I am not able to update the second one and don’t know what to do.

Why does does my Blob come up as empty when the data is being pass through?

Ok. I have this code:

const response = await fetch(source, {
            headers: {
                "Content-Type": "application/octet-stream",
            },
        });

        
 const usableThumbnailData = await response.blob();

This frontend code essentially makes a request to an Express server (backend) that I have. The incoming data is an Array Buffer that then gets resolved as a Blob on the frontend.

The blob is then converted to a Data URL and painted to the browser, code shown below:

paintImg = document.createElement("img"); //creates img element
        
paintImg.setAttribute("src", URL.createObjectURL(usableThumbnailData)); //creates data URL from blob and adds it as the src attribute of the img element

paintImg.setAttribute("height", `${height}`); //sets height of the img element

paintImg.setAttribute("width", `${width}`); //sets width of the img element

    
postContainer.append(paintImg); //puts img element into it's appropriate place on the browser document

The problem is that whenever the first Array Buffer comes in, the Blob comes up empty, but when the request is sent again, the first Blob paints where the new Blob should. Then, for every new request, the previous Blob gets painted where the new Blob should. There is a sort of Blob “lag”. Does anyone know why this might be happening?

I have tried everything that I can think of. Too complex to write in brief.

React calling API requests before axios sets auth headers

I am trying to set up AuthContext is react and running into a problem where react calls an API before axios sets the auth headers in the request. This is causes API failures on first render missing authentication parameters.

I will provide smaller examples of AuthContext, AuthService, and App

AuthContext

import React, { createContext, useState, useEffect, useContext, useCallback } from "react";
import AuthService from "./authService";

// Hardcoded token for testing
const hardcodedToken = "your-hardcoded-token-here";

// Create the AuthContext
const AuthContext = createContext(null);

export const AuthContextProvider = ({ children }) => {
  const [token, setToken] = useState(null);
  const [isAuthenticated, setIsAuthenticated] = useState(false);

  const checkIfLogged = useCallback(async () => {
    const token = hardcodedToken;

    if (token) {
      setToken(token);
      setIsAuthenticated(true);

      // Set Axios defaults and mark auth as ready
      authService.setAxiosDefaults(token);
    } else {
      setIsAuthenticated(false);
      authService.TODOLogout();
    }
  }, []);

  useEffect(() => {
    checkIfLogged();
  }, [checkIfLogged]);

  return (
    <AuthContext.Provider value={{ token, isAuthenticated }}>
      {children}
    </AuthContext.Provider>
  );
};

export const useAuth = () => useContext(AuthContext);

AuthService

import axios from "axios";

class AuthService {
  constructor(authRedirectUrlPrefix) {
    this.authRedirectUrlPrefix = authRedirectUrlPrefix;
  }


  /** Set default axios headers and interceptors */
  setAxiosDefaults(token) {
    debugger;
    // Pass auth token in each request
    axios.defaults.headers.common["Authorization"] = `Bearer ${token}`;
    axios.defaults.headers.common["Content-Type"] = "application/json";

    axios.interceptors.response.use(
      (response) => {
        return response; // Ignore successful responses
      },
      (error) => {
        // If response contains auth error, redirect to login
        if (error.response.status === 401) {
          this.redirectToLogout(false);
        }
        return error;
      }
    );
  }
}

export default AuthService;

App

import "./App.css";
import { Route, Switch, Redirect, BrowserRouter } from "react-router-dom";
import { Provider } from "react-redux";

import { createTheme, ThemeProvider } from "@mui/material/styles";
import CssBaseline from "@mui/material/CssBaseline";
import Box from "@mui/material/Box";
import Toolbar from "@mui/material/Toolbar";
import Container from "@mui/material/Container";

import Header from "./layout/Header";
import store from "./store";
import { Home } from "./components/Home";

import { AuthContextProvider } from "./auth/AuthContext";
import { ApiContextProvider } from "./context/ApiContext";

const mdTheme = createTheme();

function App() {
  return (
    <AuthContextProvider>
        <ApiContextProvider>
          <BrowserRouter>
            <ThemeProvider theme={mdTheme}>
              <Box sx={{ display: "flex" }}>
                <CssBaseline />
                <Header />
                <Box
                  component="main"
                  sx={{
                    backgroundColor: (theme) =>
                      theme.palette.mode === "light"
                        ? theme.palette.grey[300]
                        : theme.palette.grey[900],
                    flexGrow: 1,
                    height: "100vh",
                    overflow: "auto",
                  }}
                >
                  <Toolbar />
                  <Container maxWidth="lg" sx={{ mt: 3, mb: 3 }}>
                    <Switch>
                      <Route exact path="/" component={Home} />
                      <Redirect from="*" to="/" />
                    </Switch>
                  </Container>
                </Box>
              </Box>
            </ThemeProvider>
          </BrowserRouter>
        </ApiContextProvider>
    </AuthContextProvider>
  );
}

export default App;

Now given all of that set up, what’s happening is my react app calls this first api request before the auth headers are set. I can tell because I added a debugger here and this is hit first when reloading the app.

import React, { createContext, useContext, useMemo } from "react";
import axios from "axios";
// import config from "../config";

const ApiClient = {
  getData: async () => {
    // debugger;
    const response = await axios.get(/demo/data);
    return response.data;
  },
};

// Create the API Client Context
export const ApiClientContext = createContext(ApiClient);

export const useApiClient = () => {
  return useContext(ApiClientContext);
};

// Provider component to wrap around your app
export const ApiContextProvider = ({ children }) => {
  const value = useMemo(() => {
    return ApiClient;
  }, []);

  return (
    <ApiContextProvider.Provider value={value}>
      {children}
    </ApiContextProvider.Provider>
  );
};

How can i scroll to the new element that’s been added

Aim: Build a chat website using json, js and html, css

CODE: chatroom.js

document.addEventListener('DOMContentLoaded', () => {
    const commentsDiv = document.querySelector('.chats');
    const commentArea = document.getElementById('comment-area');
    const sendButton = document.getElementById('send-button');
    const clearNameButton = document.getElementById('clear-name-button');

    const socket = io();

    let userName = localStorage.getItem('userName');

    if (!userName) {
        userName = prompt('Enter your name:');
        if (userName) {
            localStorage.setItem('userName', userName);
        } else {
            alert('Name is required to participate in the chat.');
            return;
        }
    }

    function displayComment(name, time, text, isNew = false) {
        const commentElement = document.createElement('div');
        commentElement.className = 'comment';
        commentElement.innerHTML = `
            <div class="name-time">${name} ${time}</div>
            <div class="text">${text}</div>
        `;
        commentsDiv.appendChild(commentElement);

        if (isNew) {
            setTimeout(() => {
                commentElement.classList.add('animate__animated', 'animate__fadeIn');
                const y = commentElement.getBoundingClientRect().top + window.scrollY;
                window.scroll({
                    top: y,
                    behavior: 'smooth'
                });
            }, 50);
        }
    }

    async function loadComments() {
        try {
            const response = await fetch('/api/comments');
            if (!response.ok) throw new Error(`HTTP error! Status: ${response.status}`);
            const comments = await response.json();
            commentsDiv.innerHTML = '';
            comments.forEach(comment => displayComment(comment.name, comment.time, comment.text));
        } catch (error) {
            console.error('Error loading comments:', error);
        }
    }

    sendButton.addEventListener('click', async () => {
        const comment = commentArea.value.trim();
        if (comment) {
            const time = new Date().toLocaleTimeString();
            try {
                const response = await fetch('/api/comments', {
                    method: 'POST',
                    headers: { 'Content-Type': 'application/json' },
                    body: JSON.stringify({ name: userName, time, text: comment })
                });
                if (!response.ok) throw new Error(`HTTP error! Status: ${response.status}`);
                commentArea.value = '';
            } catch (error) {
                console.error('Error posting comment:', error);
            }
        } else {
            alert('Please enter a comment.');
        }
    });

    clearNameButton.addEventListener('click', () => {
        localStorage.removeItem('userName');
        location.reload();
    });

    socket.on('updateComments', (comments) => {
        commentsDiv.innerHTML = '';
        comments.forEach(comment => displayComment(comment.name, comment.time, comment.text));
    });

    socket.on('newComment', (comment) => {
        displayComment(comment.name, comment.time, comment.text, true);
    });

    socket.emit('refreshComments');
    loadComments();
});

What’s the error: I tried using scroll to view but it isnt working properly,

What i did: Tried chatgpt, Got recoommended using manual stuff,

fixed or no?: The scroll didnt got fixed but i got extra errors lol

What i want to do:

I want to add scroll to new to the new comments so that the new comments would come to view with animation,

but i tried it with the help of chatgpt but it ended up repeating the animtion every 0.5 seconds to the whole page

Why does Socket.io catch just one connection without client side

So if we implement socket into node server, and add a code (event handler) to follow a connection, it will show the first connection but not the others.
I understand it is working normally if we implement in the html a socket client side but i don’t understand why it is just showing just first connection that has been cought if we dont implement a socket client side.

const express = require("express")
const { readFileSync } = require("fs")
let http = require("http")
const {Server} = require("socket.io")


let app = express()

let server = http.createServer(app)

let socket = new Server(server)



app.get("/", (request, response)=> {
    response.send(`<center>
        <h1>CEKANJE NA DOVOLJAN BROJ KORISNIKA
        </h1>
        </center>`)
})


socket.on("connection", (korisnik)=>{
    console.log(korisnik.id) 
})


server.listen(5000, ()=> {
    console.log("server pokrenut")
})