Blancer.com Tutorials and projects

I am having a number of localFonts created using next/font/local library. I want to export all these localfont object . So to avoid so many exports I am trying to creat a single javascript object with font name as key and value as localfont object. but it is showing error : “Error: × Font loaders must be called and assigned to a const in the module scope”.
my hsciifonts.js code is:

// hsciifonts.js
import localFont from "next/font/local";
export const allhfonts = {
binarywenglosoftw8asc:localFont({ src: "./fonts/hscii/binarywenglosoftw8asc.woff2", display: "swap", }),
heksenglosoftw8asc:localFont({ src: "./fonts/hscii/heksenglosoftw8asc.woff2", display: "swap", }),
inglishenglosoftw8asc:localFont({ src: "./fonts/hscii/inglishenglosoftw8asc.woff2", display: "swap", }),
koreanenglosoftw8asc:localFont({ src: "./fonts/hscii/koreanenglosoftw8asc.woff2", display: "swap", }),
russianenglosoftw8asc:localFont({ src: "./fonts/hscii/russianenglosoftw8asc.woff2", display: "swap", }),
hindienglosoftw8asc:localFont({ src: "./fonts/hscii/hindienglosoftw8asc.woff2", display: "swap", }),
//// ...... more fonts
}

I’ve developped a small dash app that allows user to plot several charts depending on dropdown inputs.

I first used bootstrap dropdowns, but it could not handle my huge amount of options (~7000)
That’s when I learned about Mantine multiselect and it’s “limit” attribute that works juste fine !

The only issue I have right now is with the inner search fonction.
My options have this kind of format:

• This_is_my_option_A
• This_is_my_bigger_option_A

On bootstrap dropdown:
writting “is my” would show both options
because each word is seen as a unique input. I am please with this kind of behaviour

On default mantine multiselect, it requires user to write down the “_”, and you cannot several pieces of the options.

I’ve seen here this should work for you: https://mantine.dev/core/multi-select/#options-filtering
that it is possible to change the filtering options, the example shows exactly what i’m looking for.

My problem is the following: “How do I do that from my Python Dash App?
I have not found a way to pass that filtering function as props from my python script.
(I have no experience in JS)

I want to make the log in button disappear after you’re signed into your account, but I can’t seem to get it right. I’ve tried with localStorage and sessionStorage, but neither have worked. What am I doing wrong?

Login:

var objPeople = [{
    username: "#",
    password: "#"
  },
  {
    username: "#",
    password: "#"
  },
  {
    username: "test",
    password: "123"
  }
]

function getInfo() {
  var username = document.getElementById("username").value
  var password = document.getElementById("password").value

  for (var i = 0; i < objPeople.length; i++) {
    if (username == objPeople[i].username && password == objPeople[i].password) {
      console.log(username + "is logged in.")
      window.location.href = "homepage.html"
      localStorage.setItem("signedIn", 1);
    }

  }
  console.log("Username/password is incorrect.")
}

Homepage:

const signedInTrue = localStorage.setItem("signedIn")
if (signedInTrue= 1) {
    document.getElementById("topNav").style.display = "block"
}

I’m currently creating a Simple Pomodoro timer. I have a function to start the countdown, and it only works on the first 25 minute timer. When I use it for the others (break times), it does not work. Not only the startCountdown() function but also the functions which activates an icon.

HTML:

   <div id="break" style="display: none">
            <div id="outerBorder">
                <div id="bodybg"> 
                    <div class="absButtonBreak">
                            <img id="fiveMin" src="Objects/buttonsBreak/5m.png" onclick="showPage('forFive')">
                        <img id="ftnMin" src="Objects/buttonsBreak/15m.png" onclick="showPage('forFifteen')">
                        <img id="thrtMin" src="Objects/buttonsBreak/30m.png" onclick="showPage('forTwenty')">
                    </div>
                        <img src="Objects/Back.png" class="buttonBack" onclick="showPage('pg1')">
                    </div>
                </div>
            </div>
        </div>
<!-- There's a page called "break" where "forFive" is in-->
    <div id="forFive" style="display: none;">
        <div id="outerBorder">
            <div id="bodybg">
                <img id="catBus" src="Objects/Icon_CatBus/catBus1.png" class="icon_CB">
                <div id="timer">
                    <img id="minTens" class="digit">
                    <img id="minOnes" class="digit">
                    <span>:</span>
                    <img id="secTens" class="digit">
                    <img id="secOnes" class="digit">
                </div>
                <div class="buttonsTimer">
                    <img id="strtBtn5" src="Objects/Strt.png" class="buttonStart">
                    <img id="stop" src="Objects/Stop.png" class="buttonStop" onclick="showPage('break')">
                </div>
                <img id="back" src="Objects/Back.png" class="buttonBack" >
            </div>
        </div>
    </div>`

JS:

let timer;
let mins = 0;
let secs = 0;

function startCountdown(m, s) {
  clearInterval(timer);
  mins = m;
  secs = s;

  setDigit("minTens", Math.floor(mins / 10));
  setDigit("minOnes", mins % 10);
  setDigit("secTens", Math.floor(secs / 10));
  setDigit("secOnes", secs % 10);

  timer = setInterval (() => {
    if (secs === 0 && mins === 0) {
      clearInterval(timer);
      const icon = document.getElementById("catBus");
      icon.src = "Objects/Icon_CatBus/catBus1.png";
    } else {
      if (secs === 0) {
        mins--;
        secs = 59;
      } else {
        secs--;
      }
      setDigit("minTens", Math.floor(mins / 10));
      setDigit("minOnes", mins % 10);
      setDigit("secTens", Math.floor(secs / 10));
      setDigit("secOnes", secs % 10);
    }
  }, 1000);
}

//some other things

  

This is what I did in order to categorize it by time:

  document.getElementById("strtBtn25").addEventListener("click", () => {
    startCountdown(25,0);
    activateIconCB();
  })

  document.getElementById("strtBtn5").addEventListener("click", () => {
    startCountdown(5,0);
    activateIconCB();
  })

How do I make the functions to work for other divs/ids or whatever you call them? (trying to make strtBtn5 also work like strtBtn25)

I need to change the Information on a site, i have to login to my already and still existing account with my phone number but the site doesnt officially support my Region anymore if i try to login, the Textfield where my phone number has to be written, has a fixed “+XX” region code which is different to mine…

Hello, a few years ago i saw a Tutorial where someone explained how to Change the Price Value of a Shoppingbasket. So he added as example 1x eBook with a price of 1,99$, then he went to the basket, goes to payment and wenn the “Final”, “Pay Now” Button came he did somethin with a tool which i suddenly forgot the name of -.-‘…so he pressed the Button and then changed the price which gets send to PayPal i think it was, then the PayPal Payment Window opens with a price of 0,01$…so i dont want to do that exactly but ive registered on a webpage a few years Ago, I used to be able to register with my regional cell phone number, which is unfortunately no longer the case. However, I can no longer enter my cell phone number for verification to log in because the text field has a fixed region code (“+XX”). I would like to circumvent this by using the method described at the beginning and sending my cell phone number and region code to the server so that I can at least log in. I’m also interested in the process after thinking about it.

I hope my English isn’t too bad and someone can help me with my problem.

Regards

If today is 04/27, the user can input today and previous dates but not 04/28. if today is 04/28, the user can input today and previous dates but not 04/29 and so forth.

This is the form (without styles) I’ve been doing. The only thing that doesn’t work is the date

The user inputs the date through an input type date

function validform() {

  const nombre = document.getElementById("nombre").value;
  const apellido1 = document.getElementById("apellido1").value;
  const movil = document.getElementById("movil").value;
  const dni = document.getElementById("dni").value;
  const cumple = document.getElementById("cumple").value;

  const nombreErr = document.getElementById("nombreErr");
  const apellidoError = document.getElementById("apellidoError");
  const movilError = document.getElementById("movilError");
  const dniError = document.getElementById("dniError");
  const cumpleError = document.getElementById("cumpleError")

  const regexMovil = /^[6789]d{8}$/;
  const regexdni = /^[0-9]{8}[TRWAGMYFPDXBNJZSQVHLCKE-trawagmyfpdxbnjzsqvhlcke]$/;
  const hoy = new Date();

  nombreErr.textContent = "";
  apellidoError.textContent = "";
  movilError.textContent = "";
  dniError.textContent = "";
  cumpleError.textContent = "";

  let Valido = true;

  if (nombre === "") {
    nombreErr.textContent = "Introduce un nombre!!";
    Valido = false;
  }

  if (apellido1 === "") {
    apellidoError.textContent = "Introduce el primer apellido!!";
    Valido = false;
  }

  if (!regexMovil.test(movil)) {
    movilError.textContent = "Introduce un móvil válido!!";
    valido = false;
  }

  if (!regexdni.test(dni)) {
    dniError.textContent = "Introduce un DNI válido!!";
    valido = false;
  }

  if (cumple > hoy) {
    cumpleError.textContent = "Introduce una fecha que no sea mayor a la de hoy!!";
    valido = false;
  }

  if (Valido) {
    alert("formulario enviado correctamente");
    return true;
  } else {
    return false;
  }
}

<div class="formulario">
  <form id="formulario" name="formulario" onsubmit="return validform()" onreset="resetform()">
    <fieldset>
      <legend>Formulario de registro</legend>
      <p>Los campos marcados con asterisco(*) son obligatorios</p>
      <h1>Nombre y apellidos</h1>

      <label for="nombre">Nombre*</label><br>
      <input type="text" id="nombre" name="nombre"><br>
      <span id="nombreErr" class="error"></span><br>

      <label for="apellido1">Primer apellido*</label><br>
      <input type="text" id="apellido1" name="apellido1"><br>
      <span id="apellidoError" class="error"></span><br>

      <label for="apellido2">Segundo apellido</label><br>
      <input type="text" id="apellido2" name="apellido2"><br>

      <h1>Número de teléfono</h1>
      <label for="movil">Teléfono movi*</label><br>
      <input type="text" id="movil" name="movil"><br>
      <span id="movilError" class="error"></span><br>
      <label for="fijo">Teléfono fijo</label><br>
      <input type="text" id="fijo" name="fijo"><br>

      <h1>DNI</h1>
      <label for="dni">Número de DNI*</label><br>
      <input type="text" id="dni" name="dni"><br>
      <span id="dniError" class="error"></span><br>

      <h1>Cumpleaños</h1>
      <label for="cumple">Fecha de nacimiento</label><br>
      <input type="date" id="cumple" name="cumple">
      <span id="cumpleError" class="error"></span><br>

      <div class="botones2">
        <input type="checkbox" name="terminoss" id="terminoss">Acepto los términos y blah, blah, blah<br>
        <input type="checkbox" name="spam" id="spam">Quiero que me llenéis el correo de spam<br>
      </div>
      <div class="botones">
        <input type="reset" value="Reset" id="Reset">
        <input type="submit" value="Enviar" id="Enviar">
      </div>
    </fieldset>
  </form>
</div>

I’m working on a Node.js project and express is not found when I use it in server.js.

This is what I see when I run pm2 logs. In pm2 the only active process is server.js

/home/ec2-user/.pm2/logs/server-error.log last 15 lines:
0|server   | Require stack:
0|server   | - /home/ec2-user/Large-eCommerce-website-in-progress-/server.js
0|server   |     at Module._resolveFilename (node:internal/modules/cjs/loader:1140:15)
0|server   |     at Hook._require.Module.require (/usr/lib/nodejs18/lib/node_modules/pm2/node_modules/require-in-the-middle/index.js:81:25)
0|server   |     at require (node:internal/modules/helpers:177:18)
0|server   |     at Object.<anonymous> (/home/ec2-user/Large-eCommerce-website-in-progress-/server.js:1:17)
0|server   |     at Module._compile (node:internal/modules/cjs/loader:1364:14)
0|server   |     at Module._extensions..js (node:internal/modules/cjs/loader:1422:10)
0|server   |     at Module.load (node:internal/modules/cjs/loader:1203:32)
0|server   |     at Module._load (node:internal/modules/cjs/loader:1019:12)
0|server   |     at Object.<anonymous> (/usr/lib/nodejs18/lib/node_modules/pm2/lib/ProcessContainerFork.js:33:23)
0|server   |     at Module._compile (node:internal/modules/cjs/loader:1364:14) {
0|server   |   code: 'MODULE_NOT_FOUND',
0|server   |   requireStack: [ '/home/ec2-user/Large-eCommerce-website-in-progress-/server.js' ]
0|server   | }

This is what I get when I run node server.js:

node:internal/modules/cjs/loader:1143
  throw err;
  ^

Error: Cannot find module 'express'
Require stack:
- /home/ec2-user/Large-eCommerce-website-in-progress-/server.js
    at Module._resolveFilename (node:internal/modules/cjs/loader:1140:15)
    at Module._load (node:internal/modules/cjs/loader:981:27)
    at Module.require (node:internal/modules/cjs/loader:1231:19)
    at require (node:internal/modules/helpers:177:18)
    at Object.<anonymous> (/home/ec2-user/Large-eCommerce-website-in-progress-/server.js:1:17)
    at Module._compile (node:internal/modules/cjs/loader:1364:14)
    at Module._extensions..js (node:internal/modules/cjs/loader:1422:10)
    at Module.load (node:internal/modules/cjs/loader:1203:32)
    at Module._load (node:internal/modules/cjs/loader:1019:12)
    at Function.executeUserEntryPoint [as runMain] (node:internal/modules/run_main:128:12) {
  code: 'MODULE_NOT_FOUND',
  requireStack: [ '/home/ec2-user/Large-eCommerce-website-in-progress-/server.js' ]
}

This is the content of the json package:

{
  "name": "devsite",
  "version": "1.0.0",
  "main": "server.js",
  "scripts": {
    "test": "echo "Error: no test specified" && exit 1",
    "start": "node server.js",
    "build": "echo 'No build step required for backend'"
  },
  "author": "bogdan",
  "license": "ISC",
  "description": "",
  "dependencies": {
    "@aws-sdk/client-s3": "^3.772.0",
    "aws-amplify": "^6.13.6",
    "aws-sdk": "^2.1692.0",
    "bcryptjs": "^2.4.3",
    "body-parser": "^1.20.3",
    "chokidar": "^4.0.3",
    "cookie-parser": "^1.4.7",
    "cors": "^2.8.5",
    "crypto": "^1.0.1",
    "dotenv": "^16.4.7",
    "express": "^5.1.0",
    "express-session": "^1.18.1",
    "jsonwebtoken": "^9.0.2",
    "mime": "^4.0.7",
    "multer": "^1.4.5-lts.1",
    "multer-s3": "^3.0.1",
    "passport": "^0.7.0",
    "passport-apple": "^2.0.2",
    "passport-facebook": "^3.0.0",
    "passport-google-oauth20": "^2.0.0",
    "pg": "^8.13.1",
    "react": "^18.3.1",
    "react-dom": "^18.3.1",
    "sharp": "^0.34.1",
    "stripe": "^17.6.0",
    "uuid": "^11.0.5"
  },
  "devDependencies": {
    "@aws-amplify/backend": "^1.14.3",
    "@aws-amplify/backend-cli": "^1.5.0",
    "aws-cdk": "^2.1003.0",
    "aws-cdk-lib": "^2.180.0",
    "constructs": "^10.4.2",
    "esbuild": "^0.25.1",
    "tsx": "^4.19.3",
    "typescript": "^5.8.2"
  }
}

This line of code causes the error:

const express = require('express');

This happens regardless of whether I use import or require.

The required modules, including express, are listed in my package.json under dependencies, and I’ve run npm install several times to ensure they are installed. Additionally, when I used import, the type field in package.json was set to module.

Despite these efforts, the error persists. I’ve also tried clearing the npm cache and restarting the server, but it hasn’t resolved the issue.

Steps taken:

-Switched from import to require.

-Verified that express is listed in package.json under dependencies.

-Installed dependencies using npm install.

-Restarted the app and cleared npm cache.

-I also used

ls node_modules/express 

and it shows:

LICENSE lib node_modules.

-I also used:

rm -rf node_modules package-lock.json
npm install

All this for nothing

Environment:

-Node.js version: v18.20.6

-PM2 version: 6.0.5

-Express version: 5.1.0

-NPM version: 10.8.2

I’ve been struggling with this problem for a few days and I still haven’t found a solution. I’d deeply appreciate any help. I’ve posted this question before but unfortunately I haven’t found a solution yet. Thanks!

I am trying to research how a webpage is working. There is an a element with no href:

<a class="shared_profile_name" data-automations="SharedMatchProfileName">Marie Lis</a>

When I click on this link I am navigated to another web page actually. This element has click event but it references to an empty function (file VM2802 reactDomLibrary.min_v7effa9d01eba88a013b14d6c4c01b23c.js, obfuscated):

function Jr() {}

I want to understand how web page dynamically builds the url to navigate? Most of all I want to know the id of the item users clicks on.

Actually this is https://www.myheritage.com.ua/ page and the link is when I have a list of shared DNA matches with one of my DNA match I click on the name of such match.

Im using this script for Mousewheel. What i have tried only works one way …instead of scroll up and down it just Scrolls forward. What i want it to do is change the cursor Forwards and Backwards. Here is what i have tried.

    body {
        background-color: #ffffff;
        overflow: hidden;
    }

    html,
    body {
        height: 100%;
    }

    .box {
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
    }

<div class="box"></div>
    var clicked = 0;
    window.addEventListener('wheel', function (event) {
        if (clicked == 0) {
            document.getElementsByTagName("body")[0].style.cursor = "url('https://tim-school.com/codepen/mouser/1.png'), auto";
            clicked = 1;
        }
        else if (clicked == 1) {
            document.getElementsByTagName("body")[0].style.cursor = "url('https://tim-school.com/codepen/mouser/2.png'), auto";
            clicked = 2;
        }
        else if (clicked == 2) {
            document.getElementsByTagName("body")[0].style.cursor = "url('https://tim-school.com/codepen/mouser/3.png'), auto";
            clicked = 3;
        }
        else if (clicked == 3) {
            document.getElementsByTagName("body")[0].style.cursor = "url('https://tim-school.com/codepen/mouser/4.png'), auto";
            clicked = 4;
        }
        else if (clicked == 4) {
            document.getElementsByTagName("body")[0].style.cursor = "url('https://tim-school.com/codepen/mouser/5.png'), auto";
            clicked = 5;
        }
        else if (clicked == 5) {
            document.getElementsByTagName("body")[0].style.cursor = "url('https://tim-school.com/codepen/mouser/6.png'), auto";
            clicked = 0;
        }
    });

I’ve also tried the DeltaY method, But could not figure it out.

so I’m trying to build an extension manager page and I solved an issue where when I try to activate/deactivate one of the extension it works when I flip the switch right after the page loads, however once one of the filter buttons is clicked, the toggle stops working

const cards = document.querySelector(".cards");
const all = document.getElementById("all");
const inactive = document.getElementById("inactive");
const active = document.getElementById("active");
const modeToggle = document.getElementById("mode-toggle");

let extensions = [];
let activated = [];
let inactivated = [];

fetch("./data.json")
    .then(response => response.json())
    .then(data => {
        extensions = data;
        showData(extensions);
        console.log(extensions);
    })
    .catch(error => {
        console.log("Error fetching data");
    });

class Extension {
    display(dataArr) {
        cards.innerHTML = `
            ${dataArr.map(extension => `
            <div class="card extension-card">
                <div class="ext-info">
                    <img src="${extension.logo}" alt="Extension logo" width="60">
                    <div class="text">
                        <h3 class="extension-title">${extension.name}</h3>
                        <p class="extension-description">${extension.description}</p>
                    </div>
                </div>
                <div class="functions">
                    <button class="btn btn-outline-secondary remove" id="remove">Remove</button>
                    <label class="switch">
                        <input type="checkbox" class="activate" data-id="${extension.id}">
                        <span class="slider"></span>
                    </label>
                </div>
            </div>
            `).join("")}
        `;
    }

    setCheckboxState(dataArr) {
        const activateToggles = document.getElementsByClassName("activate");

        dataArr.forEach(extension => {
            [...activateToggles].forEach(toggle => {
                if (toggle.getAttribute("data-id") === extension.id) {
                    toggle.checked = extension.isActive;
                }
            });
        });
    }

    static updateArrays() {
        activated = extensions.filter(ext => ext.isActive);
        inactivated = extensions.filter(ext => !ext.isActive);
    }
}

const showData = (dataArr) => {
    dataArr.forEach((extensionData) => {
        const extension = new Extension();
        extension.display(dataArr);
        extension.setCheckboxState(dataArr);

        const activateToggles = document.getElementsByClassName("activate");
        [...activateToggles].forEach(toggle => {
            const extensionId = toggle.getAttribute("data-id");
            const extension = extensions.find(ext => ext.id === extensionId);

            toggle.addEventListener("change", () => {
                extension.isActive = toggle.checked;
                Extension.updateArrays(); // Update arrays after each toggle
            });
        });

        // Event listeners for filtering
        all.addEventListener("click", () => {
            cards.innerHTML = "";
            extension.display(extensions);
            extension.setCheckboxState(extensions);
        });

        active.addEventListener("click", () => {
            cards.innerHTML = "";
            Extension.updateArrays(); // Update arrays before filtering
            extension.display(activated);
            extension.setCheckboxState(activated);
        });

        inactive.addEventListener("click", () => {
            cards.innerHTML = "";
            Extension.updateArrays(); // Update arrays before filtering
            extension.display(inactivated);
            extension.setCheckboxState(inactivated);
        });
    });
};

does anyone have an idea of how to solve this issue?

`import EventForm from ‘@/components/shared/EventForm’
import { auth } from ‘@clerk/nextjs/server’
import React from ‘react’

const CreateEvent = () => {
const {sessionClaims} = auth();
return (
<>

Create Event

</>
)
}

export default CreateEvent`

I tried to add new event and use the client session id but the clerk its return error when I import the auth from @clerk/next

I recently tried implementing Partytown to offload Google Tag Manager (GTM) to a web worker. GTM itself loads successfully via Partytown. However, the tags managed by GTM — specifically Google Analytics and Facebook Pixel — are throwing CORS errors when they attempt to fire network requests.

I am using Next 12 with React 17 ( Node v18 ) and installed Partytown using npm install @builder.io/partytown. Loaded the GTM script using . GTM loads successfully via the worker, however, tags inside GTM (like Google Analytics and Facebook Pixel) throw CORS errors when they try to send network requests.

Is additional configuration required to allow scripts loaded inside GTM (like GA, Facebook Pixel) to work with Partytown? How can I fix or work around the CORS issues triggered by these third-party tags?

I am working with the Mistral AI API to return a stream to the frontend but the frontend keeps repeating itself so instead of just streaming the whole text on screen it just starts again when it’s done. I’m using Nuxt 3.

Backend code

import { Mistral } from '@mistralai/mistralai';
import { getQuery } from 'h3';

export default defineEventHandler(async (e) => {
    const { songs } = getQuery(e);
    const config = useRuntimeConfig();

    const messages = [{ 
        role: 'system', 
        content: `
        You are a helpful creative psychiatrist who determines peoples personalities by looking at the songs they listen to. Besides that, 
        give an in-depth analasys of who I might prefer as a romantic partner and why. Mention a few songs on which you based the analysis.
        Respond in markdown and do not ask if you can assist any further.
        `
    },{ 
        role: 'user', 
        content: `${songs}`
    }];

    try {
        const mistral = new Mistral({ apiKey: config.mistralAiApiKey });

        const stream = await mistral.chat.stream({
            model: 'mistral-small-latest',
            messages
        });

        setHeader(e, 'Content-Type', 'text/event-stream');
        setHeader(e, 'Cache-Control', 'no-cache');
        setHeader(e, 'Connection', 'keep-alive');

        for await (const chunk of stream) {
            e.node.res.write(`data: ${chunk.data.choices[0].delta.content}nn`);
        }

        e.node.res.end();
    } 
    catch (error) {
        console.error(error);
            
        throw createError({
            statusCode: 500,
            message: error
        });
    }
});

Frontend code

const eventSource = new EventSource(`/api/mistral/analysis?songs=${songs}`);

eventSource.onmessage = (event) => {
    console.log(event.data);
    bio.value += event.data;
};

Does anyone know how I can fix this error? It’s making my site run slowly!

https://primavera-agentur.at/

image-psd.jpg

image-psd-1.jpg

I’m trying to create a bot that monitors the stock of specific products. I wanted to avoid puppets to make it as efficient as possible. I found different documentation on Amazon’s public APIs online but I noticed that they have request limits. I would like to monitor the products continuously once a second. By analyzing the site, I realized that there is an ajax API with which I can retrieve the info but only for products with variants. Can anyone give me better direction on what is best to do?