Blancer.com Tutorials and projects

I have trying my hands out in building my own Discord Bot. I have tuned it to reply on any message from the user. I have built it entirely by reading the documentation on discord.js. The reply thing is working perfectly. However, as per the code in the documentation to register a slash command it’s not working with me:-(

*I have refreshed and pasted the TOKEN in my code and the CLIENT_ID too.

edit:- It’s not showing any error on the console as well.

//Here is my Code

import { REST, Routes } from 'discord.js';
const TOKEN = '**********************************';
const CLIENT_ID = '************';

const commands = [
  {
    name: 'ping',
    description: 'Replies with Pong!',
  },
];

const rest = new REST({ version: '10' }).setToken(TOKEN);

try {
  console.log('Started refreshing application (/) commands.');

  await rest.put(Routes.applicationCommands(CLIENT_ID), { body: commands });

  console.log('Successfully reloaded application (/) commands.');
} catch (error) {
  console.error(error);
}

Trying to duplicate the jQuery toggle() function but to use table-row instead of block as the display value.

I took the existing functions and added a jQuery.fn.extend() as defined below Note: I left showHideRow unmodified from the showHide for the test to ensure it would work as toggle() works now

<script src="/includes/js/jquery.min.js"></script>
<script type="text/javascript">

jQuery.fn.extend( {
    showHideRow: function( elements, show ) {
        var display, elem,
            values = [],
            index = 0,
            length = elements.length;

        // Determine new display value for elements that need to change
        for ( ; index < length; index++ ) {
            elem = elements[ index ];
            if ( !elem.style ) {
                continue;
            }

            display = elem.style.display;
            if ( show ) {

                // Since we force visibility upon cascade-hidden elements, an immediate (and slow)
                // check is required in this first loop unless we have a nonempty display value (either
                // inline or about-to-be-restored)
                if ( display === "none" ) {
                    values[ index ] = dataPriv.get( elem, "display" ) || null;
                    if ( !values[ index ] ) {
                        elem.style.display = "";
                    }
                }
                if ( elem.style.display === "" && isHiddenWithinTree( elem ) ) {
                    values[ index ] = getDefaultDisplay( elem );
                }
            } else {
                if ( display !== "none" ) {
                    values[ index ] = "none";

                    // Remember what we're overwriting
                    dataPriv.set( elem, "display", display );
                }
            }
        }

        // Set the display of the elements in a second loop to avoid constant reflow
        for ( index = 0; index < length; index++ ) {
            if ( values[ index ] != null ) {
                elements[ index ].style.display = values[ index ];
            }
        }

        return elements;
    },
    showRow: function() {
        return showHideRow( this, true );
    },
    hideRow: function() {
        return showHideRow( this );
    },
    toggleRow: function( state ) {
        if ( typeof state === "boolean" ) {
            return state ? this.showRow() : this.hideRow();
        }

        return this.each( function() {
            if ( isHiddenWithinTree( this ) ) {
                jQuery( this ).showRow();
            } else {
                jQuery( this ).hideRow();
            }
        } );
    }
} );

jQuery(function($) {
    $('.expandChildTable').on('click', function() {
        $(this).toggleClass('selected').closest('tr').next().toggleRow();
    })
});
</script>

The error received was: Uncaught ReferenceError: isHiddenWithinTree is not defined?

I noticed I was using the .min version and though that must be it, so I redid things using the .min version as below (*Note: On this one I setup the correct display value to be table-row:

<script src="/includes/js/jquery.min.js"></script>
<script type="text/javascript">

jQuery.fn.extend( {
    showHideRow: function( e, t ) {
        for(var n,r,i,o,a,s,u,l=[],c=0,f=e.length;c<f;c++)(r=e[c]).style&&(n=r.style.display,t?("none"===n&&(l[c]=_.get(r,"display")||null,l[c]||(r.style.display="")),""===r.style.display&&ee(r)&&(l[c]=(u=a=o=void 0,a=(i=r).ownerDocument,s=i.nodeName,(u=ne[s])||(o=a.body.appendChild(a.createElement(s)),u=ce.css(o,"display"),o.parentNode.removeChild(o),"none"===u&&(u="table-row"),ne[s]=u)))):"none"!==n&&(l[c]="none",_.set(r,"display",n)));for(c=0;c<f;c++)null!=l[c]&&(e[c].style.display=l[c]);return e
    },
    showRow: function() {
        return showHideRow( this, true );
    },
    hideRow: function() {
        return showHideRow( this );
    },
    toggleRow:function(e){
        return"boolean"==typeof e?e?this.showRow():this.hideRow():this.each(function(){ee(this)?ce(this).showRow():ce(this).hideRow()})
    }
}); 

jQuery(function($) {
    $('.expandChildTable').on('click', function() {
        $(this).toggleClass('selected').closest('tr').next().toggleRow();
    })
});
</script>

However I still get: Uncaught ReferenceError: ee is not defined

Help!! Why can’t it call those functions since jQuery is already loaded and my new functions are in the jQuery extension?

TIA!!

I am using React-Router-Dom for page routes. I need to separate admin routes from public ones.Can anyone tell me how do i do it.

App.js

import { createBrowserRouter,RouterProvider } from "react-router-dom";
import HomePage from "./Pages/home";
import Contact from './Pages/contact';
import AboutPage from "./Pages/About";
import RootLayout from "./Pages/Root";
import ErrorPage from "./Pages/error";
import ProductPage from "./Pages/Product";
import ProductDetails from "./Pages/ProductDetails";

const router = createBrowserRouter([
  {
      path: '/',
      elements: <RootLayout />,
      errorElement: <ErrorPage />,
      children: [
        {path:'/', element:<HomePage />},
          { path: 'contact', element: <Contact /> },
          { path: 'about', element: <AboutPage /> },
          { path: 'product', element: <ProductPage /> },
          { path: 'product/:productId', element: <ProductDetails /> },
      ],
  },
]);

function App() {
  return (
  <RouterProvider router={router} />
  );
}

export default App;

I want admin Routes that are only accessible to admins only.

Error: Cannot read properties of undefined (reading ‘name’)
at renderWithHooks (/vendors-node_modules_pmmmwh_react-refresh-webpack-plugin_client_ReactRefreshEntry_js-node_mod-b8ae68.iframe.bundle.js:42707:18))
at mountIndeterminateComponent (/vendors-node_modules_pmmmwh_react-refresh-webpack-plugin_client_ReactRefreshEntry_js-node_mod-b8ae68.iframe.bundle.js:48455:13))
at beginWork$1 (/vendors-node_modules_pmmmwh_react-refresh-webpack-plugin_client_ReactRefreshEntry_js-node_mod-b8ae68.iframe.bundle.js:50044:16))
at beginWork (/vendors-node_modules_pmmmwh_react-refresh-webpack-plugin_client_ReactRefreshEntry_js-node_mod-b8ae68.iframe.bundle.js:58513:14))
at performUnitOfWork (/vendors-node_modules_pmmmwh_react-refresh-webpack-plugin_client_ReactRefreshEntry_js-node_mod-b8ae68.iframe.bundle.js:57334:12))
at workLoopSync (/vendors-node_modules_pmmmwh_react-refresh-webpack-plugin_client_ReactRefreshEntry_js-node_mod-b8ae68.iframe.bundle.js:57050:5))
at renderRootSync (/vendors-node_modules_pmmmwh_react-refresh-webpack-plugin_client_ReactRefreshEntry_js-node_mod-b8ae68.iframe.bundle.js:57005:7))
at recoverFromConcurrentError (/vendors-node_modules_pmmmwh_react-refresh-webpack-plugin_client_ReactRefreshEntry_js-node_mod-b8ae68.iframe.bundle.js:56183:20))
at performConcurrentWorkOnRoot (/vendors-node_modules_pmmmwh_react-refresh-webpack-plugin_client_ReactRefreshEntry_js-node_mod-b8ae68.iframe.bundle.js:56128:26))

tried to handle validation in the register components via props from the RegisterForm

I’m trying to understand some details of the following statement:

constructor is a pre-defined [[DontEnum]] property of the object pointed to by the prototype property of a function object and will initially point to the function object itself.

Intuitively, I was trying to rephrase it like this:

Every function object has a prototype property that points to a special object by default. The object has a constructor property (a pre-defined [[DontEnum]] property), which points back to the function object.

But I was told this was wrong. Why? Is it only because we can directly set it to null after creation?

I have a flake.nix with this derivation in the outputs:

packages.svg = pkgs.stdenv.mkDerivation rec {
  name = "generate-svg";
  src = self;
  buildInputs = [ pkgs.nodePackages.nodejs ];
  buildPhase = ''
    export NODE_PATH=${src}/node_modules:${src}
    node ${src}/generate.js
  '';

  installPhase = ''
    mkdir -p $out
    cp output.svg $out/
  '';
};

You can see the whole file (and others) here: https://github.com/MatrixManAtYrService/buildsvg

My goal is that the following command should run generate.js which will use d3.js to build a svg file defined by the contents of generate.js.

$ nix build 'github:MatrixManAtYrService/buildsvg#svg'
$ ls result
    output.svg

Instead, the nix build command fails with this error:

Error: Cannot find package '/nix/store/a76p6qgrxlx0safvxrqx5aknhszvg703-source/node_modules/opentype.js/package.json' imported from /nix/store/a76p6qgrxlx0safvxrqx5aknhszvg703-source/generate.js
    at legacyMainResolve (node:internal/modules/esm/resolve:215:26)
    at packageResolve (node:internal/modules/esm/resolve:841:14)
    at moduleResolve (node:internal/modules/esm/resolve:927:18)
    at defaultResolve (node:internal/modules/esm/resolve:1157:11)
    at ModuleLoader.defaultResolve (node:internal/modules/esm/loader:390:12)
    at ModuleLoader.resolve (node:internal/modules/esm/loader:359:25)
    at ModuleLoader.getModuleJob (node:internal/modules/esm/loader:234:38)
    at ModuleWrap.<anonymous> (node:internal/modules/esm/module_job:87:39)
    at link (node:internal/modules/esm/module_job:86:36) {
  code: 'ERR_MODULE_NOT_FOUND'
}
Node.js v20.12.2

The top of generate.js looks like this:

import fs from 'fs';
import * as d3 from 'd3';
import opentype from 'opentype.js';  // <--- failure is here
import D3Node from 'd3-node';

So I know that some of my modules are being imported correctly.
Also, If I use a nix devshell, it works fine:

devShells.default = pkgs.mkShell {
  buildInputs = [
    pkgs.nodePackages.nodejs
  ];
  shellHook = ''
    export NODE_PATH=$PWD/node_modules
  '';
};

$ nix develop
$ node generate.js
SVG generated successfully.

My package.json indicates these dependencies, and I’ve run npm install which caused them to be downloaded into node_modules (pardon if this is obvious, I’m a nodejs newbie).

I have sprinkled ls statements into the buildPhase and verified that /nix/store/a76p6qgrxlx0safvxrqx5aknhszvg703-source/node_modules/opentype.js/package.json does indeed exist, despite what the error says.

Why is my nix build failing, while the same build works in a devshell?

i have an slack app built in typescript, i’m trying to call a webhook trigger from a slash command the problem that i’m facing is that when i try to get a node from the body it is mapped as an empty string “”, anyone has faced the same?

const trigger: Trigger<typeof PrSendManuallyWorkflow.definition> = {
    type: TriggerTypes.Webhook,
    name: "Trigger when a new PR is received by slash command",
    workflow: `#/workflows/${PrSendManuallyWorkflow.definition.callback_id}`,
    inputs: {
        channel_id: {
            value: "{{data.channel_id}}"
        },
    },
};

Programming Quiz: Pattern Recognition

Write a function that takes a list of integers as input
and returns a new list where each element is the sum of all the elements
in the original list that come after it (including itself).

Examples:

// 1
Input: [2, 3, 8]
Output: [13, 10, 2]

// 2
Input: [6, 2, 3]
Output: [11, 9, 6]

// 3
Input: [4, 7, 2, 8, 6]
Output: [27, 25, 17, 10, 4]

Constraints:

• The input list will contain at least one integer.

const sumElements = (numbers) => {
  let totalSum = 0;
  let firstInput = 0
  let totalSumSubtracted = 0;

  let result = [];
  for (let i = 0; i < numbers.length; i++) {
    totalSum += numbers[i];
    firstInput = numbers[0]
  }

  result.push(totalSum);
  // console.log(result);

  for (let i = 1; i < numbers.length; i++) {
    totalSumSubtracted = totalSum - numbers[i];
    // console.log(totalSumSubtracted);
    result.push(totalSumSubtracted);
  }

  result.pop()
  result.push(firstInput)

  return result
}

console.log(sumElements([2, 3, 8]));
console.log(sumElements([6, 2, 3]));
console.log(sumElements([4, 7, 2, 8, 6]));

.as-console-wrapper { max-height: 100% !important; }

Hello everyone, good morning . I’m doing a programming quiz. I have tried doing by myself and chatGPT as well but it doesn’t make the desired output. I’m stuck
Could u correct my codes above? I’m confused how to handle if the array input elements more than 3.

I am carrying out a technical test for a Frontend position, which consists of developing a SPA, which contains a form and interacts with an API, which allows us to bring information that will be used to fill out said form, the The question is because the select has a different color in the arrow container, you can use html and css or use the Material UI component library, I appreciate your time reading the question and I hope someone can help me.
ejemplo del select

I already tried to work with a native HTML select, I tried to give it the color with CSS classes, but it did not take the entire container, that is, there were around 2 pixels left without taking the color, in the same way I did it with MUI

I am building an web app using nextjs on the frontend and laravel for backend (Api) with CMS. For only home page there are 12 apis getting called. The api data fetching takes about on average 2.5s. So when the data is being fetch header and footer with no content is shown and when the data is fetched then the content is rendered. Now how do I instantly render the contents or is there any alternative so that the user can have a better experience when visiting the site? Also every data must be upto date in the frontend as there is a CMS and user expects to instantly see the updated result in the frontend.

I have tried optimizing the api but doesn’t seem to work.

So I have this script in node.js using Puppeteer. Its supposed to go through a list of urls, and call a puppeteer function for each page (url)….It does work ,sorta but it seems like I could make this code much more optimized and just plain better. I just kinda had to force it all on one page, cause when I tried to modularize the scrape function to another script , it didn’t like it. Probably because I am not getting async like I probably should . I’m not asking for a lecture on async (but it would be appreciated if you were able to do it .). But I want to make this code look right if I was working in a shop I don’t feel this code would be the best way to do this plus the fact it doesn’t work reliably.

Take that back , sometimes it does run through multiple urls, other times it seems if it’s more than 100 or so records, it just makes it quit after one url.

const puppeteer = require('puppeteer');
const fs = require('fs');

  async function scrapeData(url, totalRecords, ctype, pageSize = 24) {
    const browser = await puppeteer.launch();
    const page = await browser.newPage();

    page.setDefaultNavigationTimeout(60000);

        try {
            // Calculate the number of pages needed
            const totalPages = Math.ceil(totalRecords / pageSize);

            const csvRows = []; // Array to store CSV rows

            for (let i = 0; i < totalPages; i++) {
                // Calculate the start parameter for the current page
                const start = i * pageSize;

                // Calculate the size parameter for the current page
                const size = (i === totalPages - 1) ? (totalRecords % pageSize || pageSize) : pageSize;
               const currentPageUrl = `${url}?start=${start}&sz=${size}`;

               await page.goto(currentPageUrl);
               const productUrls = await page.evaluate(() => {
                   const urls = [];
                   document.querySelectorAll('.l-products-grid_item-wrapper').forEach(link =>     {
                   urls.push(link.href);
               });
               return urls;
            });

      productUrls.forEach(productUrl => {
        // Create a CSV row with URL and type
        const csvRow = `"${productUrl}","${ctype}"`;
        csvRows.push(csvRow);
      });

      // Output the product URLs
      console.log(`Product URLs from page ${i + 1}:`);
      productUrls.forEach(productUrl => {
        console.log(productUrl);
      });
    }

    // Write CSV rows to a file
    fs.writeFileSync('product_urls.csv', csvRows.join('n'), 'utf8');

  } catch (error) {
    console.error('An error occurred:', error);
  } finally {
    await browser.close();
  }
}

const urls = [
  { 
     url: 'https://www.xtestf.com/explore-bathrooms', totalRecords: 2891, ctype: bathroom,
     url: 'https://www.xtestf.com/explore-showers', totalRecords: 1817, ctype: 'shower',
     url: 'https://www.xtestf.com/explore-backsplashes', totalRecords: 1067, ctype: 'backsplash',
     url: 'https://www.xtestf.com/explore-kitchens', totalRecords: 2111, ctype: 'kitchen',
// i have a list of about 30 of these 
  },
  
];
// Scrape data for each URL
urls.forEach(async ({ url, totalRecords, ctype }) => {
  console.log(`Scraping data from ${url}`);
  await scrapeData(url, totalRecords, ctype);
});

i tried and wanted to make the scrapeData function a module, but either way I tried I couldnt get it call a list of multiple urls, in succession. very aggravating doing this one at a time. Please any suggestions , hints, anything is appreciated.

Thanks in advance.

My project has 3 parts. Front end (used react with tsx), back end (Javascript), and database (python scripts to generate graphs based queries that are stored in mongodb.)

If I’m using localhost and I run it, my program works perfectly. The server side runs the python scripts that generate graph images. Those are saved in root directory of server. The client takes those images and displays it.

But before deployment to elastic beanstalk in AWS, I have to change localhost to a relative path. So i did this:

enter image description here

baseUrl = '/barGraph'; 
const url = new URL(baseUrl, window.location.origin); // This was: const url = new URL('http://localhost:5000/firstGraph', window.location.origin);

For the image, I did this:

const imageUrl = `${window.location.origin}/image/fossilconsumption.png`; //this was: const imageUrl = 'http://localhost:5000/image/fossilconsumption.png';

But now, the backend is not getting request.
enter image description here

This is the expected result:
enter image description here

I’m looking for a developer to create a Chrome extension that will communicate with a server. The extension should be able to:

• Extract the first value from the first document that is loaded
• Select the second value from the second document that is loaded

The communication between the Chrome extension and the server should be seamless and efficient. The server should be able to receive and process the values extracted by the extension.

Iam using a multiple AWS windows instances upto 16.
So in every instance I use chrome Browser for my Business to customers daily.
So I run a Extension in chrome for Auto click drop-down &radio button
That extension developed by other freelancer

So Every instance& chrome extension has to connect to the server and if we change the radio button and drop-down on the server it has to be clicked as order wise. If first loaded document
Click on 1st value which I had entered in server
If second loaded document click on second value

1st loaded page dropdown and radio button click what we entered in server same order wise fill

I have been testing two methods of array creation and initialization in JavaScript using Node.js. One method involves dynamically pushing elements into the array, while the other method involves pre-allocating the array to a specific size and then setting each element. Surprisingly, the pre-allocated array method performed significantly worse, and I’m unsure why this is the case.

Here is the code I used for testing:

function testPush(size) {
  let start = process.hrtime.bigint();
  let array = [];
  for (let i = 0; i < size; i++) {
    array.push(i);
  }
  let end = process.hrtime.bigint();
  return Number(end - start) / 1e6; // Convert to milliseconds
}

function testPreAllocated(size) {
  let start = process.hrtime.bigint();
  let array = new Array(size);
  //   let array = new Uint32Array(size);
  //   let array = Array.from({ length: size });
  for (let i = 0; i < size; i++) {
    array[i] = i;
  }
  let end = process.hrtime.bigint();
  return Number(end - start) / 1e6; // Convert to milliseconds
}

function compareArrays() {
  const size = 1e8; // 100 million
  console.log(`Testing with array size: ${size}`);

  console.log("Starting push test...");
  let pushTime = testPush(size);
  console.log(`Push test completed in ${pushTime.toFixed(2)} ms`);

  console.log("Starting pre-allocated test...");
  let preAllocatedTime = testPreAllocated(size);
  console.log(`Pre-allocated test completed in ${preAllocatedTime.toFixed(2)} ms`);
}

compareArrays();

Output:

Testing with array size: 100000000
Starting push test...
Push test completed in 1624.93 ms
Starting pre-allocated test...
Pre-allocated test completed in 4824.86 ms

I am using Node.js version 20.12.2. My expectation was that pre-allocating the array would be faster because the JavaScript engine wouldn’t need to resize the array continually. However, the results show the opposite. Why does pre-allocating an array result in worse performance compared to dynamically pushing elements into an array in this case?

I have a set of functions that take care of an animation. As of now, the functions get triggered if I click anywhere else than the targeted HTML element(). I have tried to make an if statement that only allows the function to trigger if the targeted element also contains a specific class, but for some reason, the functions still get triggered, even if I set the even lister to a class that is definitely not apart of my website.
Any ideas of why is this happening?

document.addEventListener("DOMContentLoaded", function() {
  const languageSelectionImg = document.querySelector('.language-selection-img');
  const languageSelection = document.querySelector('.language-selection');
  const languageLogo2 = document.querySelector('.language-logo-2');
  const languageSelectionTexts = document.querySelectorAll('.language-selection-text');
  const languageLogoHidden = document.querySelectorAll('.language-logo-hidden');

  function removeHiddenClass() {
    setTimeout(() => languageSelection.classList.remove('hidden-languege-selecton'), 500);
  }

  function addSelectionAnimationClass() {
    setTimeout(() => {
      languageSelectionTexts.forEach(text => {
        text.style.display = 'block';
        text.classList.add('language-selection-animation');
        text.addEventListener('animationend', () => text.classList.remove('language-selection-hidden', 'language-selection-animation'), {
          once: true
        });
      });
    }, 0);
  }

  function addLogo2AnimationClass() {
    languageLogo2.classList.add('language-logo-2-animation');
  }

  function reverseLanguageTextAnimation() {
    languageSelectionTexts.forEach(text => {
      text.classList.add('reverse-language-text-selection-animation');
      text.addEventListener('animationend', () => text.classList.remove('reverse-language-text-selection-animation'), {
        once: true
      });
    });
  }

  function addHiddenClassToLogos() {
    languageLogoHidden.forEach((logo, index) => {
      setTimeout(() => logo.classList.add('language-logo-hidden'), (index + 1) * 1000);
    });
  }

  function addLanguageSelectionHidden() {
    setTimeout(() => languageSelectionTexts.forEach(text => text.classList.add('language-selection-hidden')), 1085);
  }

  function removeLogo2AnimationClass() {
    languageLogo2.classList.remove('language-logo-2-animation');
    setTimeout(() => languageLogo2.classList.add('reverse-language-logo-2-animation'), 500);
  }

  function removeReverseAnimationClass() {
    languageLogo2.classList.remove('reverse-language-logo-2-animation');
  }

  function addHiddenClassWithDelay() {
    setTimeout(() => languageSelection.classList.add('hidden-languege-selecton'), 1090);
  }

  languageSelectionImg.addEventListener('click', function() {
    removeHiddenClass();
    addSelectionAnimationClass();
    addLogo2AnimationClass();
  });

  document.addEventListener('click', function(event) {
    if (!languageSelectionImg.contains(event.target)) {
      removeLogo2AnimationClass();
      addHiddenClassWithDelay();
      addLanguageSelectionHidden();
      reverseLanguageTextAnimation();
      addHiddenClassToLogos();
    }
  });

  languageLogo2.addEventListener('animationend', removeReverseAnimationClass);
});

<ul class="nav">
  <li class="scroll-to-section"><a href="#homepage">Heim</a>
    <ul class="arrow-up"></ul>
  </li>
  <li class="scroll-to-section"><a href="#about">Geschäft</a>
    <ul class="arrow-up"></ul>
  </li>
  <li class="scroll-to-section"><a href="#services">Dienstleistungen</a>
    <ul class="arrow-up"></ul>
  </li>
  <li class="scroll-to-section"><a href="#contactus">Kontakt</a>
    <ul class="arrow-up"></ul>
  </li>
  <li class="language-selection hidden-languege-selecton">
    <a href="Bushmann-partner.html" style="z-index: 2;"><img class="language-logo language-logo-hidden" src="germany.png"></a>
    <a href="Bushmann-partner.html">
      <h3 class="language-selection-text language-selection-hidden ">English</h3>
    </a>
    <a href="Bushmann-partner-German.html" style="z-index: 1;"><img class="language-logo language-logo-2 language-logo-hidden" src="united-kingdom.png"></a>
    <a href="Bushmann-partner-German.html">
      <h3 class="language-selection-text language-selection-hidden ">Deutsch</h3>
    </a>
  </li>
  <li style="list-style: none;"><img class="language-selection-img " src="germany.png"></li>
</ul>

I added an if statement to the eventlistener, but even if I set the class that supposed to be contained, to something that I defenetly not use on my website the functions gets triggered.