Blancer.com Tutorials and projects

I want to extract the centerline of a character, through client-side JavaScript, from .ttf (TrueType Fonts). TrueType fonts store characters as 2 paths, an inner and outer paths. However, I need the centerline of the character (refer image, I am trying to achieve something similar to this.)

How would I go about implementing this?

I am already able to extract the outer and inner path from fonts using opentype.js

I am building a React Application. I currently have a refactored function designed to validate and submit data. I have two forms that utilise this function. Each form requires a different validation function. This is the current setup:

   const validData = await ValidateVideo(formData);
    if (validData) {
      const res = await onSubmit(formData);

How can I determine the validation function to use, depending on the form, using the function to validate and submit data?

One form gets the refactored function using the following route:
/student/:Username. This route makes a GET request to a student profile.
The other uses the following route:
/students/. This route makes a GET request to a student profile list.

How do I set the ValidateVideo for the student profile route, and the ValidateStudent for the profile list?

The refactored function is on the Client, meaning data is sent to the Server only when considered valid.
I thought about using window location to determine which validation function to set.
Is it the correct way to achieve what I am aiming for?

Basically, I want to put @container class in my div. I wanted to make it center and with breakpoints as it was in tailwind v3 e.g.:

    container: {
        center: true,
        padding: {
            DEFAULT: '1rem',
            sm: '2rem',
        },
        screens: {
            '2xl': '1400px'
        }
    },

but now it’s changed i’m trying this

@theme {
  --breakpoint-default: initial;
  --breakpoint-tablet: 40rem;
  --breakpoint-laptop: 64rem;
  --breakpoint-desktop: 80rem;
}

const Header = () => {
    return (
        <div className="@container/Header">
            <div className="flex w-full justify-between items-center blur-filter-sm bg-0.500">
                <div className="title font-bold">Sensei</div>
                <div className="etc" >
                    <Button className="rounded-full">Contact</Button>

                </div>
            </div>
        </div>
    );
};

however, this doesn’t work as it had been working and I don’t know what to do.

I’ve read new docs but they are not clear for me

I was expecting it to behave as a container(put center, paddings, etc.) but it doesn’t work

here is the header, but it should be with paddings

I am building a chat-like app using next.js. In the app, the text will be read by the app.

I am using two states to store the text for reader, the speechText for the current reading text and the nextSpeechTexts for the texts in the queue.

And I separated the conversation into blocks, and one block may include one or more items (every item would be a balloon in the real app). I want the items in the last block to show one by one with about 1.5s interval.

Now, the problem is the reading and the block showing are not synced since it is not necessary, but while the Tts component finished reading and start reading the next text, the last block would be cleared and show the items one by one in it again.

I suppose it would not be re-rendered since no props passed to it changed, even the references are the same. I just updated the speechText and nextSpeechTexts, both are not used by the ChatItem component.

But why is it now re-rendered (or re-mounted)? And how to make it stable?

The following is a minimal reproduction of the page (I replaced real tts service with a timeout text showing), and also put it onto codepen so you can play with it:

import { memo, useCallback, useEffect, useState } from "react"


const Tts = memo(({text, index, disabled, onStartSpeaking, onEndSpeaking}: {text: string, index: number, disabled?: boolean, onStartSpeaking?: () => void, onEndSpeaking?: () => void}) => {
  useEffect(() => {
    setTimeout(() => {
      onEndSpeaking?.()
    }, 5000)
  })
  const styles = [
    'bg-red-200',
    'bg-yellow-200',
    'bg-green-200',
    'bg-blue-200',
  ]
  return (
    <div className={styles[index % styles.length]}>Reading: {index}-{text}</div>
  )
})

const ChatItem = memo(({items, slowPop}: {items: string[], slowPop?: boolean}) => {
  const [visibleItems, setVisibleItems] = useState<string[]>([])
  useEffect(() => {
    if (slowPop) {
      const timeouts = items.map((item, index) => {
        const delay = 1500 * index
        return setTimeout(() => {
          setVisibleItems(items.slice(0, index + 1))
        }, delay)
      })
      return () => {
        timeouts.forEach(timeout => clearTimeout(timeout))
      }
    } else {
      setVisibleItems(items)
    }
  }, [items, slowPop])

  return (
    <div className="chat-item">
      <ul>
        {visibleItems.map((item, index) => (
          <li key={index} className="chat-item-text animate-fadeIn">
            {item}
          </li>
        ))}
      </ul>
    </div>
  )
})

function Content() {
  type SpeechTextMeta = {
    index: number
    text: string
  }
  const [speechText, setSpeechText] = useState<SpeechTextMeta>({
    index: 0,
    text: 'This is a test, and I will speak for a while.',
  })

  const [nextSpeechTexts, setNextSpeechTexts] = useState<SpeechTextMeta[]>([
    { index: 1, text: 'This is the followed text.' },
  ])

  const chatBlocks = [
    [
      'previous chat history...',
      'previous chat history...',
    ],
    [
      'I am doing well too.',
      'What are you up to today?',
      'Just working on some projects.',
    ],
  ]

  const handleEndSpeaking = useCallback(() => {
    if (nextSpeechTexts.length > 0) {
      const nextText = nextSpeechTexts[0]
      setNextSpeechTexts(nextSpeechTexts.slice(1))
      setSpeechText(nextText)
    }
  }, [nextSpeechTexts])

  return (
    <div>
      <Tts text={speechText.text} index={speechText.index} onEndSpeaking={handleEndSpeaking} disabled={false} />
      <ul>
        {chatBlocks.map((block, index, a) => (
          <li key={index} className="chat-item-title py-2">
            <ChatItem items={block} slowPop={index === a.length - 1} />
          </li>
        ))}
      </ul>
    </div>
  )
}

export default function Page() {
  const [show, setShow] = useState(false)
  return (
    <div>
      <button onClick={() => setShow(!show)} className="border border-gray-400 shadow-lg cursor-pointer active:bg-gray-500">Toggle</button>
      {show && <Content />}
    </div>
  )
}

I’m building a custom DevTools panel and trying to integrate it with an Electron app that uses React for the frontend.

The goal is to trigger a function in the Electron app when a button is clicked inside the custom DevTools panel.

So far, I’ve tried several approaches like accessing window, postMessage, chrome.runtime.sendMessage, and even Electron’s ipcRenderer/ipcMain, but none of them seem to work. In the DevTools context, window is either undefined or does not point to the Electron app’s context, and IPC messages are not received by the app.

If you’ve dealt with something similar or know of a working pattern, I’d appreciate your help or a minimal example!

In my Astro project I need a dynamic height for a certain html element.

I have this <script> tag in my Astro component:

<script>
  let height = 0;

  if (typeof document !== 'undefined') {
    const titleContainer = document.getElementById('my-container');
    height = titleContainer?.offsetHeight ?? 0;
  }
  console.log(height);
</script>

But how then use the variable height in my Astro component HTML like:

<div class=`hidden lg:block pt-[${height}px]`>

When I launch my app on Vercel, I am facing this issue consistently for the last day with fail —

It looks like you’re trying to use TypeScript but do not have the required package(s) installed.
Please install @types/node by running:
npm install –save-dev @types/node
If you are not trying to use TypeScript, please remove the tsconfig.json file from your package root (and any TypeScript files in your app and pages directories).
Next.js build worker exited with code: 1 and signal: null
Error: Command “npm run build” exited with 1

I have done everything known to mankind – clearing cache, uninstall node modules then reinstalling, downgrading typescript version, types/node, types/react, etc, the dependencies are there. I heard people talking about NODE_ENV but I dont have that so all should work but still, the issue persists. My Json and config file is below for reference.

{
  "name": "euphoniczen",
  "version": "0.1.0",
  "private": true,
  "type": "module",
  "scripts": {
    "dev": "next dev --turbopack",
    "build": "prisma generate && next build",
    "start": "next start",
    "lint": "next lint"
  },
  "dependencies": {
    "@auth/prisma-adapter": "^2.8.0",
    "@base-ui-components/react": "^1.0.0-alpha.8",
    "@emotion/react": "^11.14.0",
    "@emotion/styled": "^11.14.0",
    "@mui/icons-material": "^6.4.11",
    "@mui/material": "^6.4.8",
    "@mui/styled-engine-sc": "^6.4.6",
    "@paddle/paddle-js": "^1.4.0",
    "@paddle/paddle-node-sdk": "^2.7.0",
    "@paypal/paypal-server-sdk": "^1.0.0",
    "@paypal/react-paypal-js": "^8.8.3",
    "@prisma/client": "^6.6.0",
    "axios": "^1.8.4",
    "bootstrap-icons": "^1.11.3",
    "date-fns": "^4.1.0",
    "dompurify": "^3.2.5",
    "dotenv": "^8.2.0",
    "flowbite-react": "^0.11.7",
    "gsap": "^3.12.7",
    "lodash": "^4.17.21",
    "lucide-react": "^0.509.0",
    "micro": "^10.0.1",
    "motion": "^12.5.0",
    "next": "15.2.3",
    "next-auth": "^5.0.0-beta.25",
    "polished": "^4.3.1",
    "react": "^19.0.0",
    "react-dom": "^19.0.0",
    "react-spinners-kit": "^1.9.1",
    "styled-components": "^6.1.16",
    "zod": "^3.24.3"
  },
  "devDependencies": {
    "@eslint/eslintrc": "^3",
    "@tailwindcss/postcss": "^4",
    "@types/node": "^20.17.46",
    "@types/react": "^19.1.4",
    "@types/react-dom": "^19.1.5",
    "autoprefixer": "^10.4.21",
    "eslint": "^9",
    "eslint-config-next": "15.2.3",
    "postcss": "^8.5.3",
    "prisma": "^6.6.0",
    "tailwindcss": "^4.0.15",
    "typescript": "^5.8.3"
  }
}

and my typescript config file

{
  "compilerOptions": {
    "target": "ES2017",
    "lib": [
      "dom",
      "dom.iterable",
      "esnext"
    ],
    "allowJs": true,
    "skipLibCheck": true,
    "strict": false,
    "noEmit": true,
    "incremental": true,
    "module": "esnext",
    "esModuleInterop": true,
    "moduleResolution": "node",
    "resolveJsonModule": true,
    "isolatedModules": true,
    "jsx": "preserve",
    "plugins": [
      {
        "name": "next"
      }
    ]
  },
  "include": [
    "next-env.d.ts",
    ".next/types/**/*.ts",
    "**/*.ts",
    "**/*.tsx"
  ],
  "exclude": [
    "node_modules"
  ]
}

I laucnhed it on Vercel and encountering issues of types/etc

I have a problem with ag grid react and that is in some pages or some user browsers, when I scroll the grid horizontally, instead of scrolling whole grid, it just scrolls to header.
expect it to scroll whole grid
does anyone know how to solve this?

I am using AM Charts 4 and have defined a line chart with multiple bullets – a circle bullet and a triangle bullet for each data point (except for the first, which has only the circle bullet). It looks like this:

You can see the code here.

What I would like to do is rotate each of the triangle bullets so that they face the direction of the line.

I have tried adding adjustRotation: true, to the line series config, but it does not seem to do anything. I also tried adding autoRotate: true on the bullet config, but this also does not seem to do anything.

I also tried adding an adapter for rotation, as shown on the AM Charts documentation here.

But this recommends using a valueToPosition method on the date axis (I tried using it with both the date axis and value axis) but I see an error saying that this valueToPosition method does not exist.

I am using the JSON config method of creating the chart and would like to retain this approach as I am working with configs saved on the server and passed to the front-end. I am also using Vue3.

How can I rotate these triangles to face the direction of the line?

I’m trying to create a AI Image Generator App, I’ve been properly studying documentation and checking out YouTube tutorials but I’m unable to fetch API

This error come in my Chrome console

error 
code: null
message: null
param: null
type: "invalid_request_error"

This is my code to generate API :

const response = await fetch("https://api.openai.com/v1/images/generations", {
          method: "POST",
         headers: {
        "Content-Type": "application/json",
        Authorization: "Bearer API_KEY",
    },
    body: JSON.stringify({
        prompt: `${inputRef.current.value}`,
        n: 1,
        size: "512x512",
    }),
});

Always gives 400 Bad Request and responses is

I have a slide component that I want to use to create a carousel in React. I want to use the images in the src/assets/images folder background images for the carousel. I created an array of objects where the image is stored in the “images” property as shown in the code:

import React from "react";
import Slider from "react-slick";
import Python from "../../assets/images/python.jpg";
import HTML from "../../assets/images/html.jpg";
import Javascript from "../../assets/images/js.jpg";
import Programming from "../../assets/images/programming.jpg";
import PHP from "../../assets/images/php.jpg";

const HeroSection = () => {
  const images = [
    { id: 1, src: Python, alt: "Python" },
    { id: 2, src: HTML, alt: "HTML" },
    { id: 3, src: Javascript, alt: "Javascript" },
    { id: 4, src: Programming, alt: "Programming" },
    { id: 5, src: PHP, alt: "PHP" },
  ];

  console.log(PHP);

  const sliderSettings = {
    dots: true,
    fade: true,
    infinite: true,
    speed: 500,
    slidesToShow: 1,
    slidesToScroll: 1,
    waitForAnimate: false,
  };

  return (
    <div className="slider-container container">
      <Slider {...sliderSettings}>
        {images.map((image, index) => (
          <div
            key={index}
            className="slider-slide"
            style={{
              backgroundImage: `url(${image.src})`,
              backgroundSize: "cover",
              backgroundPosition: "center",
              height: "500px",
              width: "100%",
            }}
          >
            <span className="sr-only">{image.alt}</span>
          </div>
        ))}
      </Slider>
    </div>
  );
};

export default HeroSection;

But background images not showing in carousel what is this issue . Kindly resolve it.

I have tried so many time but does not resolve it…

Why sometimes the injection is done through a construction of class and then other times through the new keyword?,

I was watching this tutorial on YouTube and this is how he imports his second service injections into the file. Please help me understand this.