Blancer.com Tutorials and projects – Page 80 – Freelance Projects, Design and Programming Tutorials

Error accessing Vite preview of LAN on Windows

I’m getting this error:

Failed to load module script: Expected a JavaScript-or-Wasm module script but the server responded with a MIME type of “text/html”. Strict MIME type checking is enforced for module scripts per HTML spec.

This happens when I try to access my Vite preview over my LAN at: http://192.168.x.x:3000/ from any Windows machine on my network.

It works correctly without errors on Linux / Android / IOS over the same network.

My vite.config.js and index.html page are as follows:

export default {
    root: "./src/",
    publicDir: "../public/",
    build: {
        outDir: "../dist/",
        emptyOutDir: true,
        reportCompressedSize: true,
    },
    server: {
        port: 3000,
        host: true,
        open: false,
    },

    worker: {
        format: 'es',
    },
    base: './',
};

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Site Header</title>
    <link rel="stylesheet" href="style.css" />
    <script type="module" src="main.js"></script>
  </head>
  <body>
    <header>
      <h1>Site Header</h1>
    </header>
    <section id="mainSection">
      <div id="canvasContainer"></div>
    </section>
    <footer>Site Footer</footer>
  </body>
</html>

For some reason, it just loads the bare HTML, no CSS and no JS. It generates that error trying to load the JS. At this point I’m not sure what to try; as far as I can tell everything is configured correctly.

TinyMCE : Displaying a record from a MYSQL Database into the tinyMCE form

I successfully write an entry of a tinyMCE form to a MYSQL database with PHP.
I can also retrieve the entry into an HTML table, retaining the formatting as expected.
However I can’t write it back into the tinyMCE editor.

Ive tried the following:
var editor=tinymce.get('tinymce-editor'); editor.setContents(data[0]['JournalEntry']);

but the tinyMCE editor is not populated with the JournalEntry column.

This is the javascript function – please note ‘flex-item-2’ is populated as expected

<script>
            function displayEntriesTable(data) {
                var content =
                    "<table style='background-color:pink;opacity:60%; display:flex;'>.     <tr><th style='width:300px;'> Created</th> <th> Entry </th> </tr>";

                //alert("This is a function to display entries table");
                for (let i = 0; i < data.length; i++) {
                    content +=
                        "<tr><td>" +
                        data[i]["userID"] +
                        "</td><td>" +
                        "<tr><td>" +
                        data[i]["DateCreated"] +
                        "</td><td>" +
                        data[i]["JournalEntry"] +
                        "</td></tr>";
                }

                content += "</table>";

                $("#flex-item-2").append(content);

                var editor=tinymce.get('tinymce-editor');
                editor.setContents(data[0]['JournalEntry']);

                

            }

            const flex1 = document.getElementById("flex-item-1");
            const flex2 = document.getElementById("flex-item-2");
            var br = document.createElement("br");

            document
                .getElementsByClassName("display_items")[0]
                .addEventListener("click", function () {
                    fetch("getJournalEntries-fetch-PDO.php", {
                        method: "POST",
                        headers: {
                            "Content-Type": "application/text",
                        },

                        //body: "request=true",
                        body: (request = true),
                    })
                        .then((response) => response.json()) // .then((data) => flex1.append(data))

                        .then((data) => {
                            displayEntriesTable(data);
                        });
                });
        </script>

This is my HTML for my form:

                    <form id="contentform" action="./includes/create_new_journal_entry.inc.php" method="POST">
                        <label for="content"></label>
                        <tinymce-editor
                        name="content"
                            id="content"
                            class = "tinymce"
                            api-key="My API Key here"
                            height="500"
                            menubar="false"
                            plugins="advlist autolink lists link image charmap preview anchor
                            searchreplace visualblocks code fullscreen
                            insertdatetime media table code help wordcount"
                            toolbar="undo redo | blocks | bold italic backcolor |
                                alignleft aligncenter alignright alignjustify |
                                bullist numlist outdent indent | removeformat | help"
                            content_style="body
      {
        font-family:Helvetica,Arial,sans-serif;
        font-size:14px
      }"
                        >
                            <!-- Adding some initial editor content -->
                            &lt;p&gt;Welcome to the TinyMCE Web Component
                            example!&lt;/p&gt;
                        </tinymce-editor>
                        <input type="submit" value="Write Entry" style="margin-top: 1rem">
                            
                    </input>
                    </form>

I am expecting the tinyMCE editor area be repopulated with the sucessfully queried data.

Thanks in advance

Using NetSuite “saved searches” via the N/search API and search “available filters”

I’m building a restlet that will allow a Saved Search id to be passed in. The restlet will load and run the saved search and build a result from the rows. It’s simple code and it basically works (mostly).

I have so far found no clear way in the N/search API to provide values for any of the “Available Filters” configured into a search. In other words, those filters that in the NS UI show up at the top of the table view, where you can filter on columns etc. I’d like to be able to allow those to be populated in the input parameters to the restlet.

I have of course found how one can create filters and add them to a loaded saved search, but that’s not really what I want.

I acknowledge that this may not be possible.

how to fetch a hiden (dot) file in javascript

I have a script that reads the content of some files using fetch method but when i try to read a dot file then “Cannot GET” is displayed.

async function viewFile(path) {
    const ext = path.split(".").pop().toLowerCase()
    const imageExtensions = ['png', 'jpg', 'jpeg', 'gif', 'svg', 'webp', 'bmp']

    if (imageExtensions.includes(ext)) { // Renderizar imagens no site
        renderImage(path)
    } else {
        const encodedPath = path.split('/').map(encodeURIComponent).join('/');
        const response = await fetch(encodedPath);
        const text = await response.text();

        if (['md', 'markdown', 'txt'].includes(ext)) {
            renderMarkdown(text);
        } else {
            renderCode(text, ext);
        }
    }
}

how can I fix that and display the dot file content?

Typescript/Javascript Language service makes my Laptop BSOD

After more than 8x BSOD, this JS/TS Language Service suddenly crashed and didn’t make my laptop BSOD.
Is there anyone has the similar event like me? How to stop this JS/TS Language Service madness?

I am using JS/TS language service because I am enrolling react coding bootcamp and the edited file cannot be saved, because Typescript/Javascript Language service hold me / review it first and this issue really bothers me.

And I don’t know what happened next time if I restart my PC and somehow it will make BSOD after restart few hours back when I start using VSCode again

Is there a tsconfig flag or eslint rule to disallow unrelated types as function parameter?

Is there a tsconfig flag or eslint rule to disallow this ?

interface Order {
  title?: string;
  orderName?: string;
}

interface Product {
  title?: string;
  productId?: string;
}


var product: Product = {}
function filterOrder(order: Order) {
  if (order.orderName == null) return true;
}

filterOrder(product) // i want an error here

The problem is that passing a Product in filterOrder is a mistake by the developer. filterOrder should only filter Orders, not Products.

I know that based on the type definition, Product is a valid Order.

But in practice, this is just a coincidence that they have the same field name. I don’t want functions that should take Order also take Product

The function uses orderName and products don’t have that.

Strangely

If I comment Product.title, I get the an error Type 'Product' has no properties in common with type 'Order'

Why does Java have a better switch operator than Javascript? Can we have this?

In modern Java, you can use the switch statement like this:


boolean isCool(day, month) {

  var isSad = switch(dayOfWeek) {
    case "Monday", "Tuesday" -> true;
    default -> false;
  };

  return switch (month) {
    case "June", "July", "August" -> true;
    default -> isSad;
  };

}

Quite cool, basically just allowing you to go for return switch and x = switch. Why cannot we do such marvellous thing yet in JS, and could it happen one day?

Why does the style property in JavaScript work even if I didn’t select the element (didn’t make the variable)? [duplicate]

So, I was doing a lesson on Scrimba about JavaScript, when I were told to do this JavaScript challenge involving the style property.

But I forgot to select question via document.getElementById(). Surprisingly it works. The background color of the unselected element got changed when I press the button.

Why does it work?

Here’s a very simplified version of the code containing only the necessary stuff:

const revealBtn = document.getElementById('reveal-btn')
const answer = document.getElementById('answer') //with a selected element
// without a selected 'question' element

revealBtn.addEventListener('click', function() {
  answer.style.display = 'block'
  question.style.backgroundColor = "#68e1fd" // this works without the 'question'
  question.style.color = "#1434A4" // this works too
  revealBtn.style.display = "none"
})

/*
Challenge
1. When the button is clicked and the answer revealed, 
   change the background color to #68e1fd and text color
   to #1434A4 just in the "question" div.
2. When the answer is revealed, make the button disappear.
*/

.answer {
  display: none;
}

<html>

<head>
  <link rel="stylesheet" href="index.css">
</head>

<body>
  <header>
    <h1>Animal Trivia!</h1>
  </header>
  <div class="container">
    <div class="question-container">
      <div class="question" id="question">
        <p>
          How many whiskers does the average rabbit have?
        </p>
      </div>
    </div>
    <div id="answer" class="answer">
      <p>
        The average rabbit has 24 whiskers, 12 on each side!
        Amazingly, no two whiskers are the same length!
      </p>
    </div>
    <button id="reveal-btn">Reveal Answer</button>
  </div>
  <script src="index.js"></script>
</body>

</html>

How to fix this resizable component in React?

React Element Resize Not Working

I’m trying to implement a resizable chat container in React, but the resize functionality isn’t working properly, already spent half of a day. I suspect the issue is in my mouseDownHandler function, specifically with the mouse position detection logic.

The resize functionality doesn’t work properly.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Resize Issue</title>
    <style>
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }
        body { min-height: 100dvh; }
        #root { width: 100%; min-height: inherit; }
    </style>
</head>
<body>
    <div id="root"></div>
    <script type="module" src="main.jsx"></script>
</body>
</html>

.appContainer {
    width: 100vw;
    height: 100dvh;
    padding: 10px;
    display: flex;
    gap: 10px;
    background: #000;
}

.aside {
    background: #aaa;
    height: 100%;
    min-width: 320px;
    width: 500px;
}

.chatContainer {
    width: 100%;
    height: 100%;
    min-width: 400px;
    background: #aaa;
}

import React, { useState, useRef, useLayoutEffect } from "react";
import { createRoot } from "react-dom/client";

import styles from "Chat.module.css";

const root = createRoot(document.querySelector("#root"));

function Chat() {
    const MIN_WIDTH = 400;
    const MAX_WIDTH = 1400;
    const [width, setWidth] = useState(null);
    const container = useRef(null);
    const isMoving = useRef(false);
    const startX = useRef(null);
    const startWidth = useRef(null);

    useLayoutEffect(() => {
        const w = container.current.offsetWidth;
        setWidth(w);

        document.addEventListener("mousedown", mouseDownHandler);
        document.addEventListener("mousemove", mouseMoveHandler);
        document.addEventListener("mouseup", mouseUpHandler);
    }, []);

    function mouseDownHandler(e) {
        e.preventDefault();
        if (e.target !== container.current) return;

        const elem = container.current;
        const rect = elem.getBoundingClientRect();
        const x = e.clientX;

        startX.current = x;
        startWidth.current = elem.offsetWidth;

        if (rect.x - x + 15 >= 0) isMoving.current = true;
    }

    function mouseMoveHandler(e) {
        e.preventDefault();
        if (!isMoving.current) return;

        const delta = e.clientX - startX.current;
        let newWidth = startWidth.current - delta;

        if (newWidth < MIN_WIDTH) newWidth = MIN_WIDTH;
        if (newWidth > MAX_WIDTH) newWidth = MAX_WIDTH;

        setWidth(newWidth);
    }

    function mouseUpHandler(e) {
        e.preventDefault();
        if (isMoving.current) isMoving.current = false;
        startX.current = null;
        startWidth.current = null;
    }

    return (
        <>
            <section className={styles.chatContainer} style={width ? { width: `${width}px` } : null} ref={container}>
                <header className={styles.chatHeader}></header>
                <main className={styles.chat}></main>
                <div className={styles.chatMsgContainer}></div>
            </section>
        </>
    );
}

root.render(
    <main className={styles.appContainer}>
        <aside className={styles.aside}></aside>
        <Chat />
    </main>
);

Why is a Swiper.js slide with a link not clickable when the Navigation module buttons are on top?

I make Swiper.js slides containing a link to the slide specific page, but also use the Navigation module of Swiper to be able to slide through the slides.

I don’t know how I can overcome the issue that with the nav buttons on top i would still be able to click the link inside the slide?

the react code:

<Swiper
    modules={[Navigation]}
    navigation={{
        nextEl: '.swiper-button-next',
        prevEl: '.swiper-button-prev',
    }}
    speed={0}
    loop={true}
>
    {projects.map((project) => (
        <SwiperSlide key={project.id}>
            <div
                className="slider__link"
                // onClick={() => router.push(getSlugPath('projects', project.slug as string))}
            >
                <Link href={getSlugPath('projects', project.slug as string)}>
                    <div className="slider__caption">
                        <RichText data={project.carrousel?.caption} />
                    </div>
                </Link>
        </SwiperSlide>
    ))}
    <div ref={prevButtonRef} className="swiper-button-prev"></div>
    <div ref={nextButtonRef} className="swiper-button-next"></div>
</Swiper>

i have tried different z-index values for link and the buttons but this would render the buttons useless (the take up the whole screen)
also tried other solutions like onClick methods on the slide__link div and so on but this didn’t result in any change either

How to convert a string type API response to a composable (with imports) during runtime?

I am getting a api respose which contains string. basically it contains code for a composable that I have to run in my FormBuilder. I have given a example of what I am trying to do below.

<script setup lang="ts">
import FormBuilder from 'FormBuilder'    
const apiResp = `
  import { ref, computed } from 'vue'
  // might include other imports like store
    
export const useFunc = (model) => {
  const multiLoader = async () => {
    try {
      const resp = await fetch('https://jsonplaceholder.typicode.com/todos/1')
      const data = await resp.json()
      return data
    } catch (error) {
      console.log(error)
    }
    return {}
  }
  const singleLoader1 = async () => {
    const str = ref('singleLoader1 is working properly')
    const test = computed(() => {
    console.log('model in singleLoader1', model)
      return model.input?.fName || 'no name'
    })
    console.log(str.value)
    try {
      const resp = await fetch('https://jsonplaceholder.typicode.com/todos/2')
      const data = await resp.json()
      return data
    } catch (error) {
      console.log(error)
    }
    return {}
  }
  const singleLoader2 = async () => {
    try {
      const resp = await fetch('https://jsonplaceholder.typicode.com/todos/3')
      const data = await resp.json()
      return data
    } catch (error) {
      console.log(error)
    }
    return {}
  }
  const fNameLoader = async () => {
    try {
      const resp = await fetch('https://jsonplaceholder.typicode.com/todos/4')
      const data = await resp.json()
      return data?.title
    } catch (error) {
      console.log(error)
    }
    return {}
  }
  const test = async () => {
    const url = 'https://jsonplaceholder.typicode.com/todos/4'
    try {
      const resp = await fetch(url)
      const data = await resp.json()
      const spl = data?.title?.split(' ')
      return spl.map(op => ({ text: op, value: op }))
    } catch (error) {
      console.log(error)
    }
    return {}
  }
  const test2 = () => 'porro'
  const kubeconfigFunc = () => 'miao miap'
  const scalingRulesLoader = async () => {
    try {
      const resp = await fetch('https://jsonplaceholder.typicode.com/todos/5')
      const data = await resp.json()
      return '1Gi'
    } catch (error) {
      console.log(error)
    }
    return ''
  }
  return {
    multiLoader,
    singleLoader1,
    singleLoader2,
    fNameLoader,
    kubeconfigFunc,
    test,
    test2,
    scalingRulesLoader,
  }
}
`

    const blob = new Blob([apiResp], { type: 'application/javascript' })
    const moduleUrl = URL.createObjectURL(blob)
    const dynamicModule = await import(moduleUrl)
    const { useFunc } = dynamicModule

</script>
<template>
<FormBUilder :logic="useFunc">
</template>

I have tried using Blob, eval, new Function. These works only for function, but if I use a ref or computed or try to import anything in the api response string, it doesn’t work.I do not want to install a separate store in my FormBuilder to keep it light. Is it possible to convert the apiResp to to a js file and then execute it like a normal composable??

Set-Cookie header is found in Response header but not found in Cookies Storage

Context:

Trying to login, the request is working with success login. But for storing refreshToken, the cookie is not being set in Cookies section and not found.
Backend sends set-cookie header with values but it doesn’t store cookie in browser.

Note: – I have mentioned below TECH STACK USED, CODE and REQUEST AND RESPONSE HEADER

Backend Code:

CORS:

cors: {
    origin: 'https://dev.agent.example.in',
    methods: 'GET,HEAD,PUT,PATCH,POST,DELETE,HEAD,OPTIONS',
    preflightContinue: false,
    optionsSuccessStatus: 204,
    maxAge: 86400,
    credentials: true,
}

Set Cookie:

response.cookie("refreshToken", refreshToken, {
    httpOnly: true,
    secure: true, 
    sameSite: 'none',
    path: '/',        
});

Frontend code:

axios.get('https://dev.api.example.com/data', {
    withCredentials: true
});

Update: I tried cookie options domain: example.in, still not working

Frontend uses axios
Environment: Https

Backend:

Tech:Loopback 4,TypeScript
API URL: https://dev.api.example.in/api/v1/ (EXAMPLE)

Frontend:

Tech:Next JS, Axios, TypeScript
URL: https://dev.ui.example.in (EXAMPLE)

RESPONSE Headers

HTTP/2 200 
server: openresty
date: Thu, 28 Aug 2025 07:30:29 GMT
content-type: application/json
content-length: 342
x-powered-by: Express
access-control-allow-origin: https://dev.ui.example.in
vary: Origin
access-control-allow-credentials: true
set-cookie: refreshToken=<value of refreshToken>; Path=/; HttpOnly; Secure; SameSite=None
x-served-by: dev.api.example.in
X-Firefox-Spdy: h2

REQUEST Headers:

POST /api/v1/users/login HTTP/2
Host: dev.api.example.in
User-Agent: Mozilla/5.0 (X11; Ubuntu; Linux x86_64; rv:142.0) Gecko/20100101 Firefox/142.0
Accept: application/json, text/plain, */*
Accept-Language: en-US,en;q=0.5
Accept-Encoding: gzip, deflate, br, zstd
Content-Type: application/json
Content-Length: 63
Origin: https://dev.ui.example.in/
Sec-GPC: 1
Connection: keep-alive
Referer: https://dev.ui.example.in/
Sec-Fetch-Dest: empty
Sec-Fetch-Mode: cors
Sec-Fetch-Site: same-site
Priority: u=0
TE: trailers

Migrations & Seeders & Command for production data [duplicate]

Recently after some research I came up with a question: how to handle default / initial data population in a Laravel project which goes live: should it go into seeders or migrations? I’ve seen two very different schools of thought.

Nuno Maduro says:

Seeders should only be used for environment-specific data (local or test), and not for default system values. Database seeders become outdated over time and may no longer reflect the true state of your production data. This can introduce inconsistencies if you need to re-run migrations to deploy your app elsewhere. In contrast, migrations are inherently reliable because they define the exact structure and transformations that shaped your production data, guaranteeing consistency across environments.

YouTube video in which Nuno talks about seeders
Another developer explained why they always use migrations for default values:
- They support dependencies between tables.
- Easier to revert a release by using down() to remove the inserted data.
- Avoids the risk of someone forgetting to run the seeders, or accidentally running test seeders in production.
On the other hand, many developers say:

Migrations should migrate schema, not seed data.

But they often don’t address the fact that default values are actually part of the schema of the application.

In my project I have two different types of default data:

Roles (user, admin): These is a critical system data, so I’m leaning toward adding them in a migration.
DishCategories & DishSubcategories: Here it gets tricky. I have a large predefined array of categories and subcategories (kind of like a starter set). To avoid bloating the migration file, I moved that array into a separate PHP file and include it when inserting the data.

Is this an acceptable approach?

On the one hand, these are not “test” values, they are part of the actual application logic (used in search). On the other hand, they can evolve later by being managed in the admin panel.

Laravel Daily also mentioned a possible issue when putting data population inside migrations:

During automated tests, when migrations are re-run, the default data might get inserted multiple times unless you use insertOrIgnore or similar safeguards.
This could lead to duplicate rows in test environments.

YouTube video in which Laravel Daily talks about those 2 approaches

Also there is 3 way of seeding data using custom artisan command, but I didn’t make such feature as it is similar to seeders and I’ll need to run this command right after running migrations

A code example of these 2 approaches (Seeder / Migration)

Seeder

class RolesSeeder extends Seeder
{
    public function run(): void
    {
        Role::create(['name' => 'user']);
        Role::create(['name' => 'admin']);
    }
}

Migration

    public function up(): void
    {
        Schema::create('roles', function (Blueprint $table) {
            $table->id();
            $table->string('name')->unique();
            $table->timestamps();
        });

        $roles = [
            'user',
            'admin'
        ];

        foreach ($roles as $role){
            DB::table('roles')->insert([
                'name' => $role,
                'created_at' => now(),
                'updated_at' => now(),
            ]);
        }
    }

There is already Laravel : Migrations & Seeding for production data on this topic, but because the question was asked a long time ago, I decided to raise this topic again

PHP XAMPP Curl Request Slow on Windows 10 for JSON payloads [closed]

I’m sending JSON data to an external API using PHP cURL on Windows 10 with XAMPP (PHP 8.3).

Small JSON payloads (1–2 KB) return a response normally within ~2 seconds.
As soon as the payload gets a few extra characters or items, the request takes a very long time and sometimes errors out.
The same request works instantly in Postman.

Here is a simplified version of my code:

$curl = curl_init();

curl_setopt_array($curl, [
    CURLOPT_URL => 'https://api.example.com/validate',
    CURLOPT_RETURNTRANSFER => true,
    CURLOPT_POST => true,
    CURLOPT_POSTFIELDS => json_encode($data),
    CURLOPT_HTTPHEADER => [
        'Content-Type: application/json',
        'Authorization: Bearer ...'
    ],
]);

$response = curl_exec($curl);

curl_close($curl);

Things I’ve tried:

Increasing post_max_size, memory_limit, max_execution_time in php.ini.
Disabling JSON_PRETTY_PRINT.
Testing with JSON payloads of different sizes.
Running the script via CLI (faster than through browser).

Environment:

Windows 10
XAMPP (Apache + PHP 8.3)
cURL enabled
JSON payloads range from 1 KB to 100+ KB

Symptoms:

PHP cURL is much slower than Postman for slightly larger payloads.

With few more JSON values request may fail or hang even with less few items request complete in under 2 seconds

Questions:

Why does PHP cURL become slow or fail with slightly larger JSON payloads in this environment?
How can I reliably send larger JSON payloads via cURL on XAMPP without long delays or errors?
Are there any Windows/XAMPP/PHP specific settings I need to adjust (DNS, SSL, buffer sizes, timeouts, etc.)?

Shopware 6 – missing Paypal configuration admin panel page [closed]

I’ve installed Shopware 6.7.2 (latest) in Docker. After install and enable plugin Paypal and Stripe, there is no configuration admin panel. I see new payment methods from Stripe and Paypal in channel config, but no way access to configuration page plugin.

In Settings -> Extensions is listed here Paypal and stripe as active, but after click on … should be settings options but – Missing.

In my plugins lists, after click … should be available also settings link, but is only available option “unistall”

I know this is Paypal settings page, …/admin#/swag/paypal/settings/index/general when I try hardcoded access from browser on this page then i see blank page – no logs, no errors in console. I try rebuild administrator panel, cache remove, warmup etc, composer update. I spent 11 hrs today – still not work on docker.