Author: Blancer

I’m experiencing a weird problem with printing 24-bit colors in the Git Bash terminal using Node.js. When I run a simple JavaScript script that uses ANSI codes to print 24-bit (true color) text, only the basic 16 colors are displayed. However, when I run a direct ANSI command in the Git Bash terminal, the 24-bit colors display perfectly. This problem doesn’t happen with other terminals(windows cmd in my case).

It seems that the issue might be related specifically to Node.js in Git Bash. Has anyone else encountered this, or is there a known workaround to get Node to display 24-bit colors in Git Bash?

Expanding on tests and context:
my node version is v20.10.0, my git version is 2.47.0.windows.2 and my OS is Windows.

This is a simple JavaScript code to test the colors:

console.log("x1b[38;2;255;0;0m█x1b[38;2;200;0;0m█")
process.stdout.write("x1b[38;2;255;0;0m█x1b[38;2;200;0;0m█")
process.stdout.write('x1b[0mn');

Executing through Git Bash it display only one basic color (console.log and process.stdout.write present the same result):
bash doesn’t display the full colors

If I execute the same command in a Windows cmd terminal it gives the correct colors:
cmd display the full colors

However! If I do the equivalent code directly into bash terminal, it gives the expected result:
bash displays the colors with direct code

_{These test imply that the code works on other terminals and that bash is capable of displaying the correct colors.}
I feel that it has to have an obvious reason. But, I wasn’t able to find any mention to this specific problem.

I’m making a note sequencer web application and I am currently trying to implement the function of playing a note on pressing a button corresponding to the note. I am currently using a test sound to understand how playing audio works as this is my first time dealing with audio in HTML.

I am also using webpack, and my problem at first was getting webpack to recognize the mp3 file, but I quickly solved that by using file-loader.

Now my problem lies in the fact that the test audio I am using does not play on the click of a button, but does play perfectly fine onload of the site. There are no errors given to me by the console.

Here is script.js: (note: this may be poorly written for the meantime of me understanding this issue)

import "./style.css";
import myAudioResource from './click-234708.mp3';

const CONTROL_BAR = document.createElement("div");
CONTROL_BAR.id = "control-bar";

const MAIN_BAR = document.createElement("div");
MAIN_BAR.id = "main-bar";

const testbutton = document.createElement("button");
const testaudio = new Audio();
testaudio.src = myAudioResource;
testbutton.addEventListener('click', testaudio.play())
MAIN_BAR.appendChild(testbutton);

const SCALE_BAR = document.createElement("div");
SCALE_BAR.id = "scale-bar";

const MAIN = document.createElement("div");
MAIN.id = "main";

MAIN.appendChild(CONTROL_BAR);
MAIN.appendChild(MAIN_BAR);
MAIN.appendChild(SCALE_BAR);
document.body.appendChild(MAIN);

I want to make testaudio play on clicking testbutton, and NOT onload of the site.

Here is webpack.config.js:

const HtmlWebpackPlugin = require('html-webpack-plugin');
const path = require('path');

module.exports = {
  mode: 'development',
  entry: "./src/script.js",
  devtool: 'inline-source-map',
  output: {
    filename: "main.js",
    path: path.resolve(__dirname, 'dist'),
    clean: true,
  },
  plugins: [
    new HtmlWebpackPlugin({
      title: 'Leitmotif',
      filename: 'index.html',
      template: './src/template.html',
    })
  ],
  module: {
    rules: [
      {
        test: /.css$/,
        use: ['style-loader', 'css-loader'],
      },
      {
        test: /.mp3/,
        loader: 'file-loader',
      },
    ],
  },
};

I attempted some of the solutions in this forum but to no avail.

I do believe this could be a problem with the way I’ve written my program, considering I have to also ensure everything works well with webpack. I have tried different syntaxes and creating separate functions to play the audio, but all of it just ended up playing the audio on load again.

Can anyone help out here?

I partially divided the asp mvc net8 html component into communication parts in the form of createmessage. The default index directory is not saved in any way.

[Messagecontroller](https://i.sstatic.net/eAdEnZFv.png)
[/views/message/createmessage.cshtml](https://i.sstatic.net/lGYdQQq9.png)
[main.js](https://i.sstatic.net/ClTZBgrk.png)
[default/index](https://i.sstatic.net/pwlXpQfg.png)
[solution explorer](https://i.sstatic.net/pBCCttvf.png)
[sendEmail.php errors](https://i.sstatic.net/Aj47Rz8J.png)

I changed the path of sendemail.php in the javascript file and tried createmessage, but it didn’t work.
When I open the page from the createmessage view, the theme does not appear, but the boxes appear. When I fill the boxes with information and send the data, the data is stored in my database. This storage process is not in the default index.

How can I make the “Jump to 1:30” text link jump to the embedded SharePoint video above and start autoplay at 1:30, without modifying the default start time of the embedded video? Youtube has this feature where user can post comments and link to the video above that starts at a specific time. Is it possible with SharePoint?
Here is my code

<iframe id="videoEmbed" src="abc.sharepoint.com/sites/"></iframe>

<script>   document.getElementById('jumpLink').addEventListener('click', function (e) {
    e.preventDefault(); // Prevent the default link behavior

    const videoIframe = document.getElementById('videoEmbed');
    const startTime = 90; // 1:30 in seconds

    // Send the seek command to the iframe via postMessage
    videoIframe.contentWindow.postMessage(JSON.stringify({
      event: "command",
      func: "seek",
      args: [startTime]
    }), "*");   }); </script>

I’m using FullCalendar for React. Instead of a regular calendar year, I would like to use a fiscal calendar. For instance, the current fiscal year (FY25) should begin on Sep 29, 2024 and end on Sep 27, 2025. The fiscal month of October should display 9/29 through 11/2. The current fiscal week should be 5.

Is there a way to change the underlying calendar object in this way?

I’m working on task automation, so my solution can’t be a manual one. I am moving HTML content from one webpage to another, but I need to get a name list of all images shown on the page. The URLs for the images only have the location down to the folder (e.g. www.whatever.com/abcdefg/archive).

In this case, abcdefg is the name of the image file, but it could be JPG PNG GIF etc. I don’t see anywhere to find that information. If I manually save or drag the image to a folder, then the extension becomes apparent, but I can’t find it without manually interacting with the file.

Ultimately, the user will drag/save the image files out of the HTML page, which can be done fairly quickly, but if they have to go back to the webpage that imported the files and select file extensions, there’s no longer any point in trying to automate the process. It will be too tedious.

I know there are a ton of other ways to get this done, but for this effort, I’m stuck with native JavaScript and HTML only. I can’t access the FSO in native JS, and I can’t use a manual solution like going into the work folder and looking at the files. Anybody? Thanks.

So far, I have not tried anything because I don’t know of any way to do this. Native JS simply does not interact with the FSO.

The dark mode is being saved via local storage, but it’s not being applied to all the site’s pages automatically. How can I make sure that when I choose dark mode, it is applied to all pages of the website automatically? How do I apply what I’ve saved in localstorage?

let trilho = document.getElementById('trilho');
let body = document.querySelector('body');

// Check local storage for the user's theme preference
const theme = window.localStorage.getItem("theme");

// Set the initial theme based on localStorage
if (theme === "dark") {
    body.classList.add("dark");
    trilho.classList.add("dark"); // Ensure the button reflects dark mode
} else {
    trilho.classList.remove("dark"); // Ensure the button reflects light mode
}

// Add event listener to toggle dark mode
trilho.addEventListener('click', () => {
    trilho.classList.toggle('dark');
    body.classList.toggle('dark');

    // Update localStorage with the current theme
    if (body.classList.contains("dark")) {
        window.localStorage.setItem("theme", "dark");
        trilho.classList.add("dark"); // Dark mode button
    } else {
        window.localStorage.setItem("theme", "light");
        trilho.classList.remove("dark"); // Light mode button
    }
});

Billing error while deploying cloud functions onDocumentCreated trigger with v2 api for cloud functions.

I tried to deploy the below function, got this error:”Write access to project ‘xxxxx’ was denied: please check billing account associated and retry“**. Not sure why it does not let me when I can easily upload V1 functions.

const { onDocumentCreated } = require("firebase-functions/v2/firestore");
const { getMessaging } = require('firebase-admin/messaging');
const { initializeApp } = require('firebase-admin/app');

initializeApp();


exports.sendNotificationOnSales = onDocumentCreated('sales/{docId}', async (event) => {
  const newData = event.data.data();

  const itemName=newData['Item name'];
  const itemPrice=newData['Price'];

  const message = {
    topic: 'sale',
    notification: {
      title: 'New item for sale has been added',
      body: `${itemName} ${itemPrice}`,
    },
  };

  try {
    await getMessaging().send(message);
    console.log('Notification sent successfully');
  } catch (error) {
    console.error('Error sending notification:', error);
  }
});

I have a Tabulator 6.3 page I am building to display data from ValKey. I’m trying to figure out how to save certain aspects of the table. My data is sorted by groups. Each row has a radio button and only one row per group can have this radio button enabled. There are also two other buttons in each row that essentially act as a checkbox, but a row can only have one checkbox checked. To clarify, I’m not talking about saving data back to ValKey per se. I can already do that. This is about saving the temporary state of the table as it relates to the rows of data.

I looked into the data persistence features of Tabulator. It save stuff like sorting, filtering, column resizing etc., and while it does have the ability to extend this, I’m not sure if my use case is a good fit for this, as it seems to be meant for columns, not rows. I also looked at the Reactive Data module a bit. That might be useful but I’m still looking into it. I just want to leverage what Tabulator already offers as much as I can before I code my own solution. I’d appreciate any suggestions or feedback.

I am trying to implement a bluetooth printer functionality directly from browser.
The app has an intent option that can be used to print from browser “bprint://”

When I call the function window.open(“bprint://” + “https://www.example.com”,’_blank’)
It actually tries to open bprint://https//www.example.com which then breaks the functionality because of the removed colon after https.

I also tried creating a link and set its href attribute, which has the same result.

Is there any way to open this URL intent maintaning the original url?

i just use any other html template and i want to use that template in my nextJS admin template so i just convert my html code in JSX and add assets folder in my nextJS public directory all asset’s CSS code successfully render on browser but also assets JS file render in browser but template no any functionality add in my theme while when i run my HTML template with only assets then that is easily run with whole JS functionality .

import localFont from "next/font/local";
import "./globals.css";

const geistSans = localFont({
  src: "./fonts/GeistVF.woff",
  variable: "--font-geist-sans",
  weight: "100 900",
});

const geistMono = localFont({
  src: "./fonts/GeistMonoVF.woff",
  variable: "--font-geist-mono",
  weight: "100 900",
});

export const metadata = {
  title: `Metronic - the world's #1 selling Bootstrap Admin Theme Ecosystem for HTML, Vue, React, Angular & Laravel
          by Keenthemes`,
  description: "Generated by create next app",
};

export default function RootLayout({ children }) {
  return (
    <html lang="en">
      <head>
        <meta charSet="utf-8" />
        <meta name="description"
          content="The most advanced Bootstrap Admin Theme on Themeforest trusted by 94,000 beginners and professionals. Multi-demo, Dark Mode, RTL support and complete React, Angular, Vue &amp; Laravel versions. Grab your copy now and get life-time updates for free." />
        <meta name="keywords"
          content="Metronic, bootstrap, bootstrap 5, Angular, VueJs, React, Laravel, admin themes, web design, figma, web development, free templates, free admin themes, bootstrap theme, bootstrap template, bootstrap dashboard, bootstrap dak mode, bootstrap button, bootstrap datepicker, bootstrap timepicker, fullcalendar, datatables, flaticon" />
        <meta name="viewport" content="width=device-width, initial-scale=1" />
        <meta property="og:locale" content="en_US" />
        <meta property="og:type" content="article" />
        <meta property="og:title"
          content="Metronic - Bootstrap 5 HTML, VueJS, React, Angular &amp; Laravel Admin Dashboard Theme" />
        <meta property="og:url" content="https://keenthemes.com/metronic" />
        <meta property="og:site_name" content="Keenthemes | Metronic" />
        <link rel="canonical" href="https://preview.keenthemes.com/metronic8" />
        <link rel="shortcut icon" href="assets/media/logos/favicon.ico" />
        <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Poppins:300,400,500,600,700" />
        <link href="assets/plugins/custom/fullcalendar/fullcalendar.bundle.css" rel="stylesheet" type="text/css" />
        <link href="assets/plugins/custom/datatables/datatables.bundle.css" rel="stylesheet" type="text/css" />
        <link href="assets/plugins/global/plugins.bundle.css" rel="stylesheet" type="text/css" />
        <link href="assets/css/style.bundle.css" rel="stylesheet" type="text/css" />
      </head>
      <body
        className={`${geistSans.variable} ${geistMono.variable} antialiased home blog wp-custom-logo dark-background dark-version main-layout-boxed disable-floating-video header-vid-default beeteam368 elementor-default elementor-kit-12 header-fixed header-tablet-and-mobile-fixed toolbar-enabled toolbar-fixed aside-enabled aside-fixed`}
        id="kt_body"
        style={{ height: 'var(--kt-toolbar-height)' }}
      >
        {children}

        <script src="assets/plugins/custom/fullcalendar/fullcalendar.bundle.js"></script>
        <script src="assets/plugins/custom/datatables/datatables.bundle.js"></script>
        <script src="assets/js/widgets.bundle.js"></script>
        <script src="assets/js/custom/widgets.js"></script>
        <script src="assets/js/custom/apps/chat/chat.js"></script>
        <script src="assets/js/custom/utilities/modals/upgrade-plan.js"></script>
        <script src="assets/js/custom/utilities/modals/create-app.js"></script>
        <script src="assets/js/custom/utilities/modals/users-search.js"></script>
      </body>
    </html>
  );
}

i try to use a ready made HTML template with his all functionlity in NEXTJS.

I’m using FullCalendar 6.1 with rrule plugin. I have set editable:true so that I can drag existing events. I’m not planing on dropping external events. The documentation says evenChange is called after eventDrop and eventResize, so I’m guessing I need to make ajax call in eventChange to update database. After the Ajax call to update database, how do I render calendar? I looked around but I cannot seem to find an example that uses eventChange. I was wondering how definition of function looks like e.g

eventChange: function (info) {
...
}

I have component that looks like this

const TrainingProgressBar = ({ id }) => {
  const { classes } = useStyles();
  const dispatch = useDispatch();

  const { success } = useSelector(state => state.app.contents).statusById[id];
  const content = useSelector(state => selectContent(state, { id }));
  const { notStarted, started, completed } = content.trainingProgress || {};

  const refic = useRef();

  useEffect(() => {
    if (success || JSON.stringify(refic.current) !== JSON.stringify(content)) {
     dispatch(getContent({
       id,
       query: {
         calculateTrainingProgress: true,
         management: true
       }
     }));
     refic.current = content;
    }
  }, [dispatch, id, success, content]);

  const total = notStarted + started + completed;
  const totalPercentage = Math.round((completed / total) * 100) || 0;

  return (
    <>
      some code
    </>
  );
};

Where content depends on the ID that is passed to this component. I’m trying to achieve that dispatch is called when content is loaded, success is true, and content is changed. In the second case, success is not changed. The problem I have is that the Maximum update depth is exceeded. It’s caused by content in the dependency array, but if I don’t put it in there, dispatch will not be called if the content is changed. What am I doing wrong?

Bcrypt.compare returns false. I checked about 10 questions in here, but still couldn’t figure it out. My user model doesn’t trim passwords. Mongodb used to store hashed password. Implemented step by step checks. Hashed password is returned correctly. Ensured that the correct password is used as an input. Consulted with genAI with no success. Please help.

    userLogin: async (parent, { email, password }, context) => {
  try {
    // Check if the rate limit has been exceeded
    if (context.req.rateLimit && context.req.rateLimit.remaining <= 0) {
      // Log rate limit exceeded
      logWarn(`Rate limit exceeded for email: ${email}`);
      // Throw an error if the rate limit has been exceeded
      throw new Error('Too many login attempts, please try again later.');
    }

    // Find the user by email
    const user = await User.findOne({ email });

    // Log the user object
    logInfo(`User found: ${JSON.stringify(user)}`);

    // Check if the user exists
    if (!user) {
      // Log failed login attempt
      logError(`Failed login attempt for email: ${email}`);
      // Throw an error if the user does not exist
      throw new Error('User not found');
    }

    // Log the hashed password stored in the database
    logInfo(`Hashed password from database: ${user.password}`);

    // Log the provided password
    logInfo(`Provided password: ${password}`);

    // Check if the provided password matches the hashed password stored in the database
    const isMatch = await bcrypt.compare(password, user.password);

    // Log the password comparison result
    logInfo(`Password match: ${isMatch}`);

    if (!isMatch) {
      // Log failed login attempt
      logError(`Failed login attempt for email: ${email}`);
      // Throw an error if the password is incorrect
      throw new Error('Invalid email or password');
    }

    // Generate a JWT token
    const token = jwt.sign({ userId: user._id }, 'your_jwt_secret_here', {
      expiresIn: '1h',
    });

    // Log successful login
    logInfo(`User logged in: ${user.email}`);

    // Return the token and the user ID
    return {
      token,
      userId: user._id,
    };
  } catch (error) {
    // Log the error
    logError(`Error during login: ${error.message}`);
    throw error;
  }
},

I try to save the content of ‘textarea’ for perplexity.ai.

The website can trigger a Cloudfare captcha when you submit, then you loose what you have written in the box.

I tried this, which is wrong, there’s nothing restored by example when I refresh the page.

// ==UserScript==
// @name         Sauvegarde Textarea
// @namespace    http://tampermonkey.net/
// @version      1.3
// @description  Sauvegarde le contenu d'un textarea et le restaure après un rafraîchissement de la page.
// @match        https://www.perplexity.ai/search/*
// @grant        none
// ==/UserScript==

(function() {
    'use strict';

    // Sélectionner le textarea
    const textareas = document.querySelectorAll('textarea');
    let textarea;

    // Vérifier si des textareas existent
    if (textareas.length > 0) {
        // Choisir le bon textarea (ajuster selon la structure de la page)
        textarea = textareas.length === 3 ? textareas[2] : textareas[0];
    } else {
        console.error("Aucun textarea trouvé.");
        return;
    }

    // Charger le contenu sauvegardé depuis le localStorage
    const savedContent = localStorage.getItem('textareaContent');
    if (savedContent) {
        textarea.value = savedContent; // Restaurer le contenu sauvegardé
    }

    // Fonction pour sauvegarder le contenu dans localStorage
    function saveContent() {
        localStorage.setItem('textareaContent', textarea.value);
    }

    // Écouter les événements de changement sur le textarea
    textarea.addEventListener('input', saveContent);

    // Écouter l'événement de perte de focus pour sauvegarder une dernière fois
    textarea.addEventListener('blur', saveContent);

    // Écouter l'événement de déchargement de la page pour sauvegarder une dernière fois
    window.addEventListener('beforeunload', saveContent);
})();