Category: javascript

I have an app using Langchain.js in Express, Prisma ORM, Postgres and PGVector. I have the below function that performs a similarity search on the DB based on an array of answers that comes through:

const retriever = pgvectorStore.asRetriever({
    verbose: true,
    k: 25,
    searchType: "similarity",
    filter: {
      iron_catergory: answers[4],
      varient_price: { $lt: answers[1] },
      dexterity: answers[0],
      shaft_flex: answers[3],
      length: answers[5],
    },
  });

Below is the Prisma schema:

model golfClubs4Cash_irons_online {
  id                 String @id
  varient_sku        String
  title              String
  varient_price      Int
  price_range        String
  url                String
  image              String
  brand              String
  club_model         String
  set_makeup         String
  iron_catergory     String
  dexterity          String
  condition          String
  shaft_flex         String
  shaft_material     String
  number_of_clubs    String
  shaft_model        String
  location           String
  length_to_standard String
  length_inches      String
  length             String
  store_id           Int
}

The issue is with the varient_price filter. yes, I know it’s spelling of varient is wrong but it is consistently wrong across the code. I am trying to filter all varient_price less than answers[1]. For some reason I cannot figure out is this filter is not working. I think I’m using the right syntax and when I run the program the data comes through as below but returns an empty array:

filter: {
    iron_catergory: 'Midsize Players',
    varient_price: { '$lt': 750 },
    dexterity: 'Right-Handed',
    shaft_flex: 'Stiff',
    length: 'Standard'
  }

If I remove the varient_price filter I get values returned. What am I doing wrong?

Who can help me for npm package install error?

Steps: I’ve tried:
Uninstalled and reinstalled Node.js, but the issue persists.
Deleted the node_modules folder and re-ran npm install, but encountered the same error.
Cleared the npm cache using npm cache clean –force.

Node version: v20
npm version: v10
OS: Windows

npm error path C:UserslenovoDesktophacknode_modulestesseract
npm error command failed
npm error command C:Windowssystem32cmd.exe /d /s /c node-gyp rebuild
npm error Bu ��z�mde projeler tek tek derlenir. Paralel bir derlemeyi etkinle�tirmek i�in l�tfen "-m" anahtar�n� ekleyin.
npm error   tesseract_bindings.cc
npm error C:UserslenovoDesktophacknode_modulestesseractsrctesseract_bindings.cc(7,1): warning C4005: 'BUILDING_NODE_EXTENSION': makro yeniden tan�mlama [C:UserslenovoDesktophacknode_modulestesseractbuildtesseract_bindings.vcxproj]
npm error C:UserslenovoDesktophacknode_modulestesseractsrctesseract_bindings.cc : message : �nceki 'BUILDING_NODE_EXTENSION' tan�m�na bak�n [C:UserslenovoDesktophacknode_modulestesseractbuildtesseract_bindings.vcxproj]
npm error C:UserslenovoDesktophacknode_modulestesseractsrctesseract_baseapi.h(10,10): fatal error C1083: i�erme dosyas� a��lam�yor: 'baseapi.h': No such file or directory [C:UserslenovoDesktophacknode_modulestesseractbuildtesseract_bindings.vcxproj]
npm error gyp info it worked if it ends with ok
npm error gyp info using [email protected]
npm error gyp info using [email protected] | win32 | x64
npm error gyp info find Python using Python version 3.12.6 found at "C:Python312python.exe"
npm error gyp info find VS using VS2019 (16.11.35325.158) found at:
npm error gyp info find VS "C:Program Files (x86)Microsoft Visual Studio2019BuildTools"
npm error gyp info find VS run with --verbose for detailed information
npm error gyp info spawn C:Python312python.exe
npm error gyp info spawn args [
npm error gyp info spawn args 'C:\Program Files\nodejs\node_modules\npm\node_modules\node-gyp\gyp\gyp_main.py',
npm error gyp info spawn args 'binding.gyp',
npm error gyp info spawn args '-f',
npm error gyp info spawn args 'msvs',
npm error gyp info spawn args '-I',
npm error gyp info spawn args 'C:\Users\lenovo\Desktop\hack\node_modules\tesseract\build\config.gypi',
npm error gyp info spawn args '-I',
npm error gyp info spawn args 'C:\Program Files\nodejs\node_modules\npm\node_modules\node-gyp\addon.gypi',
npm error gyp info spawn args '-I',
npm error gyp info spawn args 'C:\Users\lenovo\AppData\Local\node-gyp\Cache\20.18.0\include\node\common.gypi',
npm error gyp info spawn args '-Dlibrary=shared_library',
npm error gyp info spawn args '-Dvisibility=default',
npm error gyp info spawn args '-Dnode_root_dir=C:\Users\lenovo\AppData\Local\node-gyp\Cache\20.18.0',
npm error gyp info spawn args '-Dnode_gyp_dir=C:\Program Files\nodejs\node_modules\npm\node_modules\node-gyp',
npm error gyp info spawn args '-Dnode_lib_file=C:\\Users\\lenovo\\AppData\\Local\\node-gyp\\Cache\\20.18.0\\<(target_arch)\\node.lib',
npm error gyp info spawn args '-Dmodule_root_dir=C:\Users\lenovo\Desktop\hack\node_modules\tesseract',
npm error gyp info spawn args '-Dnode_engine=v8',
npm error gyp info spawn args '--depth=.',
npm error gyp info spawn args '--no-parallel',
npm error gyp info spawn args '--generator-output',
npm error gyp info spawn args 'C:\Users\lenovo\Desktop\hack\node_modules\tesseract\build',
npm error gyp info spawn args '-Goutput_dir=.'
npm error gyp info spawn args ]
npm error gyp info spawn C:Program Files (x86)Microsoft Visual Studio2019BuildToolsMSBuildCurrentBinMSBuild.exe
npm error gyp info spawn args [
npm error gyp info spawn args 'build\binding.sln',
npm error gyp info spawn args '/clp:Verbosity=minimal',
npm error gyp info spawn args '/nologo',
npm error gyp info spawn args '/p:Configuration=Release;Platform=x64'
npm error gyp info spawn args ]
npm error gyp ERR! build error
npm error gyp ERR! stack Error: `C:Program Files (x86)Microsoft Visual Studio2019BuildToolsMSBuildCurrentBinMSBuild.exe` failed with exit code: 1
npm error gyp ERR! stack at ChildProcess.<anonymous> (C:Program Filesnodejsnode_modulesnpmnode_modulesnode-gyplibbuild.js:209:23)
npm error gyp ERR! stack at ChildProcess.emit (node:events:519:28)
npm error gyp ERR! stack at ChildProcess._handle.onexit (node:internal/child_process:294:12)
npm error gyp ERR! System Windows_NT 10.0.22631
npm error gyp ERR! command "C:\Program Files\nodejs\node.exe" "C:\Program Files\nodejs\node_modules\npm\node_modules\node-gyp\bin\node-gyp.js" "rebuild"
npm error gyp ERR! cwd C:UserslenovoDesktophacknode_modulestesseract
npm error gyp ERR! node -v v20.18.0
npm error gyp ERR! node-gyp -v v10.1.0
npm error gyp ERR! not ok
npm error A complete log of this run can be found in: C:UserslenovoAppDataLocalnpm-cache_logs2024-10-25T17_46_03_555Z-debug-0.log```

I thoroughly check my website 100 times in the past few days with google Pagespeed Insights. On the mobile tests, it keeps pointing out that I have long tasks that take roughly 60-70ms to execute. I think their threshold is 50ms. According to their desktop page, I hardly see such an error.

When I investigated my own javascript code, the code that took the longest was concatenating strings together, and I do this to load the background image to my website.

Here’s what I did.

1. I made a picture of a small file size as a background
2. I base64 encoded it
3. I replaced repeating single characters with function calls to generate the repetition (this alone saved a few hundred bytes).

In the end,the total string size (not including repeats) is about 2000 bytes.

My code is roughly the code shown below (except that actual picture data is used):

function copy(x,y){return x.repeat(y)}

console.time("T");
document.body.style.background="url('data:image/png;base64,UNIZQUE"+copy("A",500)+"UNIAQUE"+copy("B",250)+"UNIQUE"+copy("C",150)+"UNIBQUE')";
console.timeEnd("T");

When I measured the time with my web browser, the log reported a time between 250ms and 300ms.

Is there any way I can cut down the timing of the string processing without inflating the size of the HTML?

I investigated different concatenation methods here on stackoverflow, and the stats reported offered no help because I’m already using the recommended form of concatenation (the +).

I guess I’m just looking for feedback really. I’m not a professional QA tester and have no professional experience so I’m not really aware of any standards or conventions, or even professional expectations really. My testing using PlayWright is self taught, although I am a web developer. I’m just curious is there things I did wrong? Could have done better? Were there expectations of me that I wasn’t aware of?

I recently applied for a Junior QA role, there was a take home test in which I was to write a script in Playwright to fetch the first 100 articles for a webpage and check that they were in chronological order but they rejected me after submission.

The following is the script I ended up making.

const { chromium } = require('playwright');
const { expect } = require('playwright/test');
const fs = require('fs');

async function collectHackerNewsArticles() {
  // Launch browser
  const browser = await chromium.launch({ headless: false });
  const context = await browser.newContext();
  const page = await context.newPage();

  let articles = [];

  // Go to Hacker News news page with pagination
  await page.goto(`https://news.ycombinator.com/newest`);

  // Get current datetime
  let dateNow = new Date();
  // Slugify now
  dateNowSlug = dateNow.toString()
    .toLowerCase()
    .replace(/^s+|s+$/g, '')
    .replace(/[^a-z0-9 -]/g, '')
    .replace(/s+/g, '-')
    .replace(/-+/g, '-');


  // Take a screenshot of the page
  await page.screenshot({ path: `screenshots/hackernews-${dateNowSlug}.png` });

  while (articles.length < 100) {
    // Extract articles and their timestamps
    const newArticles = await page.$$eval('.athing', nodes => {
      return nodes.map(node => {
        const id = node.querySelector('.rank').innerText;
        const title = node.querySelector('.titleline a').innerText;
        const age = node.nextElementSibling.querySelector('.age').innerText;
        return { id, title, age };
      });
    });

    articles = articles.concat(newArticles);
    // Click "More" link
    const moreLink = await page.$('.morelink');
    if (moreLink) {
      await moreLink.click();
    } else {
      break;
    }
  }

  // Ensure only the first 100 articles are processed
  articles = articles.slice(0, 100);

  // Parse timestamps
  const articlesColl = articles.map((article) => {
    const timeParts = article.age.split(' ');
    const timeValue = parseInt(timeParts[0]);
    const timeUnit = timeParts[1];
    let date = new Date();

    if (timeUnit.includes('minute')) {
      date.setMinutes(date.getMinutes() - timeValue);
    } else if (timeUnit.includes('hour')) {
      date.setHours(date.getHours() - timeValue);
    } else if (timeUnit.includes('day')) {
      date.setDate(date.getDate() - timeValue);
    }

    return { ...article, date };
  })

  // Write the data to a file
  fs.writeFileSync('articles.json', JSON.stringify(articlesColl, null, 2));

  // Close browser
  await browser.close();
}

(async () => {
  await collectHackerNewsArticles();
  const articles = require('./articles.json');
  // Iterate through the JSON file and make an assertion that the items are sorted chronologically
  for (let i = 1; i < articles.length; i++) {
    const ArticleIsNewer = new Date(articles[i - 1].date) >= new Date(articles[i].date);
    expect(ArticleIsNewer).toBe(true);
  }
})();

The script worked well as far as I’m aware, I’m just curious if they are things that are “expected” of a junior QA that I wasn’t aware of as I have no “professional” experience or specific education on the topic.

Helo All, i want to ask how i add teks about “price” below text “Lihat” i already attached images

or u can see my blogwsjayamotor

How can i add text below text “Lihat” ???

this is my code u can check in my drive my code

I have a type in my TypeScript project

export type Types = "APPLE" | "MANGO" | "BANANA";

Here I want the BANANA to be optional, i.e.,

If I have created a mapping using the keys in Types for example

const MAPPING: { [key in Types]: string } = {
 APPLE: "Here is Apple",
 MANGO: "Here is Mango",
};

This code gives error it’s asking to define mapping for each key if I don’t do it gives error:

Property 'BANANA' is missing in type '{ APPLE: string; MANGO: string; }' but required in type '{ APPLE: string; MANGO: string; 
 BANANA: string; }'

To avoid these types of errors, I want to make the BANANA optional also I don’t want to change the MAPPING itself, it should remain as [key in Types]. I understand that either using Exclude or Types? would work but this requires changes in a lot of files.

Is there any other way to achieve this?

I’m trying to hide part of an image inside a parent div. In the attached image, the orange area represents the card (or “parent div”), the red area is the image with some rotation applied, and the green section is where the image should be “cut off.” I want to achieve an effect where the image is clipped at a certain point in that corner, and when hovering over the card, an animation reveals the hidden part of the image.

The main issue I’m facing is that I don’t know how to make the overflowing part of the image invisible when it exceeds the boundaries of the “parent” div (the card). I’m using Tailwind CSS and HTML for this, but I’m not sure my current code is very helpful. Below is the code I’m working with.

Thank you in advance!

enter image description here

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>Prueba</title>

  <!--Google Fonts -->
  <link rel="preconnect" href="https://fonts.googleapis.com">
  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
  <link href="https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@700&family=JetBrains+Mono&display=swap" rel="stylesheet">

  <!-- CSS de Tailwind -->
  <link href="../tailwind.css" rel="stylesheet">
</head>
<body class="bg-gradient-to-br from-orange-500 to-orange-600 p-9 min-h-screen font-sans text-white">
  <!--Starts Projects Section-->
  <div>
    <h3 class="flex items-center mt-10 mb-4 font-bold text-2xl text-white">
      <span class="text-white/60">04.</span> PROJECTS
    </h3>

    <!--Start card 1-->
    <div class="justify-items-center bg-white/10 mb-4 p-6 rounded-lg min-w-3 h-auto">
      <!--Title and date-->
      <div class="flex justify-between items-center mb-2">
        <h4 class="font-bold text-lg">MINI JAVA VIRTUAL MACHINE</h4>
      </div>

      <!--Subtitle-->
      <div class="mb-4">
        <h5 class="text-base text-white/70">Java</h5>
      </div>

      <!--Project description-->
      <div>
        <p class="font-light">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis ut lectus laoreet, imperdiet nunc tristique.</p>
      </div>

      <!--Project Github Button and Image Container-->
      <div class="flex items-center gap-4 mt-4">
        <button class="relative items-center gap-2 bg-white shadow-lg px-6 py-3 rounded-lg font-medium text-orange-600">
            View Project
          <span class="absolute inset-0 bg-white/20 opacity-0 group-hover:opacity-100 rounded-lg transition-opacity duration-300"></span>
        </button>
        
        <div class="">
            <img class="rounded-lg w-32 " width="40px" src="img/projects_screenshots/root_project.png" alt="Previwe project">
        </div>
      </div>
    </div>
    <!--Ends card 1-->
  </div>
  <!--Ends Projects Section-->

  <script src="animations.js"></script>
</body>
</html>

I tried looking up videos on YouTube, searching for examples online, and even asked ChatGPT and Claude for help, but none of these attempts were successful. I was expecting to find a simple way to hide the overflowing part of the image while keeping the layout responsive with Tailwind CSS. Additionally, I wanted to create a hover effect that smoothly reveals the hidden part of the image, but I’m still struggling with how to handle the image overflow correctly.

Here is the current code and a section of the larger array:

function Initialize() {

    ARR[127][1][0] = {name:"Gl", ss:["Z0",127,"B0",1,[58,0]], delay:{first:60, term:220, slow:240, med:188, fast:188}};
    ARR[127][127][0] = {name:"Gl Co", ss:["Z0",127,"B0",127,[58,0]], delay:{first:60, term:220, slow:240, med:188, fast:188}};
    ARR[127][1][6] = {name:"Gl El", ss:["Z0",127,"B0",1,[58,6]], delay:{first:60, term:310, slow:360, med:245, fast:145}};
    ARR[127][127][6] = {name:"Gl El Co", ss:["Z0",127,"B0",127,[58,6]], delay:{first:60, term:310, slow:330, med:245, fast:145}}

}

var ARR = new Array(128);
for(let val1=0; val1<ARR.length; val1++) {
    ARR[val1] = new Array(128);
    for(let val2=0; val2<ARR[val1].length; val2++) {
        ARR[val1][val2] = new Array(128);
        for(let val3=0; val3<ARR[val1][val2].length; val3++) {
            ARR[val1][val2][val3] = [];
        }
    }
}

Initialize();

I’m looking to find the Largest value in the .delay object – from ALL lines. In this case it’s 360.

I have looked at different methods but they all seem to be for object arrays with the same object, but each object in .delay has a different name.

Thanks!

I am following the below answer for my charting scenario, I have no problem in expected functionality like rendering the chart, filtering the charts.

Editing Google Charts Category Filter

My Problem is I use JQuery button to clear the selectable, Clear Button gets created and disabled. I am trying to enable the button but it’s not working.

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
    <script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>
    <link rel="stylesheet" type="text/css" href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/themes/smoothness/jquery-ui.css"/> 
    <script src="https://www.gstatic.com/charts/loader.js"></script> 
<script type="text/javascript">
var click = 0;

function filter_st_charts(){
      var st_chartview={};
      var st_selectedvalues = [];

      var r_row;
      var r_view = {
            columns: [0]
        };      

      $('.st_selectable li.ui-selected').each(function(index, selected) {        
        st_selectedvalues.push(selected.innerHTML);
      });

      

      if(st_selectedvalues.length > 0){        
        $('.st_selectable').closest('.st_accordion').find('.button-reset').button('enable'); // Button is not enabling here                      
        for (var i = 0; i < st_selectedvalues.length; i++) {            
          r_row = r_columnTable.getFilteredRows([{column: 1, value: st_selectedvalues[i]}])[0];
          r_view.columns.push(r_columnTable.getValue(r_row, 0));
        }        
      }
      st_chart.setView(r_view);
      st_chart.draw();
    }

onload_st_filter_values = st_initState.selectedValues;
google.visualization.events.addListener(st_chart,'ready',function() {
      var filt_values = onload_st_filter_values;
      console.log("Inside ready");
      if(click==0){
        $.each(filt_values.filter(uniquelists), function(index, value) {
        $('.st_selectable').append('<li>' + value + '</li>');
        });
      }
      
    $('.st_accordion').accordion({
      active: false,
      create: function () {
        $('.st_selectable').selectable({
          filter: '*',
          stop: filter_st_charts
        });
      },
      collapsible: true,
      heightStyle: 'content'
    });

    $('.button-reset').button();
    $('.button-reset').button('disable');
    $('.button-reset').on('click', clearFilter);

    click++

    })

function clearFilter(sender) {
      console.log("Inside Clear Filter");
      var accordion;
      sender.preventDefault();
      sender.stopPropagation();

      accordion = $(sender.target).closest('.st_accordion');
      accordion.find('.st_selectable li').removeClass('st_selectable .ui-selected');
      accordion.accordion('option', 'active', false);
      $(sender.target).closest('button').button('disable');
      filter_st_charts();
      return false;
  }
</script>

My HTML Code

<!DOCTYPE html>
<html>  
  <head>
    <base target="_top">  
    <?!= include('page_style'); ?> 
</head>
<body>
<div class="st_accordion">
    <h3>    
      <span>State&nbsp;</span>
      <button class="button-reset ui-button ui-widget ui-corner-all ui-button-icon-only" title="Reset">
        <span class="ui-icon ui-icon-close"></span>
      </button>
    </h3>
    <div><ul class="st_selectable"></ul></div>
    </div>     
    <div id="chart_st_pdiv" class="chart_container1"></div> 
</body>

My page_style CSS

.st_accordion > div.ui-accordion-content {
  padding: 6px 6px 6px 6px;
}
.st_selectable {
  list-style-type: none;
  margin: 0;
  padding: 0;
}
.st_selectable li {
  background-color: #f6f6f6;
  border: 1px solid #c5c5c5;
  cursor: pointer;
  font-size: 8pt;
  margin-top: 2px;
  padding: 6px 8px 6px 8px;
}
.st_selectable .ui-selecting {
  background-color: #99ccff;
    border: 1px solid #809fff;
}
.st_selectable .ui-selected {
  background-color: #007fff;
    border: 1px solid #003eff;
  color: #ffffff;
}
.ui-button-icon-only {
  float: right;
  height: 18px;
  margin: 0px;
  min-width: 18px;
  width: 18px;
  z-index: 1;
}

.ui-widget {
  font-size: 8pt;
}

In ready function, I am creating an button and disabling it, on the function filter_st_charts trying to enable it but its not working.

I tried below to enable it

var btn = $('.st_selectable').closest('.st_accordion').find('.button-reset');
console.log(btn.length) -> returns 1

I tried this

btn.prop('disabled',false) // not working

then this

btn.attr('disabled', false); 
btn.removeAttr("disabled");

None of them working, I would like to understand where I am doing wrong.

I have an question about when will the useLayoutEffect callback be triggered and when will the screen be drawn.

Consider the following code:

export default function CompA() {
  const [count, setCount] = useState(0);

  useLayoutEffect(() => {
    // I'll debug here after initial render 
    console.log('CompA layoutEffectCallback');
  });

  useEffect(() => {
    console.log('CompA updateEffectCallback');
  }, [count]);

  const handleClick = () => {
    setCount(count + 1);
  };

  return (
    <div onClick={handleClick}>
      CompA
      <h1>{count}</h1>
    </div>
  );
}

After the initial render, the screen displays the number 0,then I set a chrome devtool debugger in the callback of the useLayoutEffect hook before I click the div. After click, the function execution is paused at debugger, but I see the screen already shown number 1.

The docs said that useLayoutEffect fires before the browser repaints the screen，but I don’t understand why the screen has updated.

The project works perfectly on localhost, with all CSS, images, and JavaScript files loading correctly. However, when deploying the project on Vercel, the CSS does not render, images fail to load with 404 errors, and some JavaScript files are not executing correctly. I’ve tried multiple approaches to fix the issue, including modifying the paths in index.html and updating the vercel.json configuration, but nothing seems to work.

Repository Link:

Here is the link to my GitHub repository:

https://github.com/FadyFathey/digitalize-v.2.git

Deployment Link:

Here is the link to the latest deployment on Vercel:

https://digitalize-v-2-abanr573a-fadyfatheys-projects.vercel.app

Issue Description:

1. Locally: Everything works perfectly as expected. The CSS, JavaScript, images, and all other static files load and render properly.

   Here is how the page looks locally:

   

2. On Vercel:

After deployment to Vercel, the CSS, images, and some other static files do not load. I receive a basic unstyled version of the webpage without any images.

Here is how the page looks after deployment on Vercel:

I tried several approaches to solve the issue:

1. Modified the file paths:

Initially, I was using relative paths for my CSS, images, and JavaScript files, such as:

<link rel="stylesheet" href="assets/css/main.css">

<img src="assets/img/logo.png" alt="Logo">

I then tried both absolute paths(/assets/css/main.css) and relative paths (./assets/css/main.css), but neither worked on Vercel, although they worked fine locally.

2. Edited vercel.json:

I modified the vercel.json configuration to properly route the static files (CSS, JS, images) and exclude them from the SPA routing.

but Not working

like :

{
  "rewrites": [
    {
      "source": "/(.*)", 
      "destination": "/html/digitalize/index.html"
    }
  ],
  "headers": [
    {
      "source": "/assets/(.*)",
      "headers": [
        {
          "key": "Cache-Control",
          "value": "public, max-age=31536000, immutable"
        }
      ]
    }
  ]
}

3. Checked console errors:

The console showed errors like:

MIME type mismatch: CSS files were served as text/html instead of text/css.

404 errors for images and other static assets.

full console and you and you can check on demo live

The stylesheet https://digitalize-v-2-abanr573a-fadyfatheys-projects.vercel.app/assets/css/bootstrap.min.css was not loaded because its MIME type, "text/html", is not "text/css".

Uncaught SyntaxError: expected expression, got '<' (appearing for every JS file, e.g., bootstrap.bundle.min.js, jquery.js, etc.)

Failed to load resource: the server responded with a status of 404 (Not Found) for images (e.g., https://digitalize-v-2-abanr573a-fadyfatheys-projects.vercel.app/assets/img/logo.png)

I was expecting the website to render properly, with all CSS, images, and JavaScript files loading and functioning correctly, just as they do when running the project locally.

I’m using Toast UI Editor and I’d like to detect when there is a change to the input. Usually I would do something like textarea.addEventListener('change', function) but I haven’t been able to find any documentation as to how I can listen for changes on the editor. If anyone knows, it would be much appreciated.

I’m working on a svelte project where I have a top bar with a few menus. When I hover over the menus a dropdown will appear below with some menu items. Some menu items have subitems that I want to appear to the side when the menu item is clicked. I can’t figure out how to make the subitems appear.

Here is my code so far:

App.svelte

<script lang="ts">
  import TopBar from './lib/TopBar.svelte'
</script>

<main>
  <TopBar/>
</main>

TopBar.svelte

<script>
    let menuItems = [
        {
            text: "item 1",
            subMenus: []
        },
        {
            text: "item 2",
            subMenus: [
                {
                    text: "sub item 1"
                },
                {
                    text: "sub item 2"
                }
            ]
        },

    ]

    let menus  = [
        {
            text: 'Menu 1',
            menuItems: menuItems
        },
        {
            text: 'Menu 2',
            menuItems: menuItems
        }
    ]
</script>

<div id='topbar'>
    {#each menus as menu}
        <!-- svelte-ignore a11y-no-static-element-interactions -->
        <!-- svelte-ignore a11y-mouse-events-have-key-events -->
        <!-- svelte-ignore a11y-click-events-have-key-events -->
        <div class="topbar-menu">
            <p class='menu-text'>{menu.text}</p>
            <div class="dropdown-content rounded-b-lg">
                {#each menu.menuItems as menuItem}
                    <button class='menu-item'>
                        <p class='menu-item-text'>{menuItem.text}</p>
                        {#if menuItem.subMenus.length > 0}
                            <p>&#9654;</p>
                        {/if}
                    </button>
                {/each}
            </div>
        </div>
    {/each}
</div>

<style>
    #topbar {
        position: absolute;
        top: 0;
        width: 100%;
        display: flex;
        justify-content: center;
    }

    .menu-text{
        padding: 0 1rem;
    }

    .topbar-menu:hover{
        background-color: #818181;
    }

    .dropdown-content {
        /*height: 0;*/
        display: flex;
        flex-direction: column;
        position: absolute;
        box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
        z-index: 1;
        background-color: #f9f9f9;
        color: #3a3a3a;
        border: solid 1px #e5e7eb;
        /*transition: height 100ms linear;*/

        clip-path: inset(0% 0% 100% 0%);
        position: absolute;

        transition-property: clip-path;
        transition-duration: 300ms;
        transition-timing-function: ease
    }

    .topbar-menu:hover > .dropdown-content,
    .dropdown-content:hover {
        clip-path: inset(0% 0% 0% 0%);
    }

    .menu-item {
        display: flex;
        background-color: #f9f9f9;
        color: #3a3a3a;
        border: none;
    }

    .menu-item-text{
        margin-right: 1rem
    }
</style>

Anything I have tried just had the submenu confined to the dropdown menu and I can’t get it to appear outside the dropdown.

I saw how fast bun was and generated some random code to compare node.js and bun. I expected bun would execute much faster than node.js but bun takes two times as long as node.js.

[Code]

// 2. Matrix Multiplication Test
function multiplyMatrices(matrixA, matrixB) {
    const result = [];
    for (let i = 0; i < matrixA.length; i++) {
        result[i] = [];
        for (let j = 0; j < matrixB[0].length; j++) {
            let sum = 0;
            for (let k = 0; k < matrixA[0].length; k++) {
                sum += matrixA[i][k] * matrixB[k][j];
            }
            result[i][j] = sum;
        }
    }
    return result;
}

// Generate matrices and run multiplication
const matrixSize = 2000;
const matrixA = Array.from({ length: matrixSize }, () => Array(matrixSize).fill(1));
const matrixB = Array.from({ length: matrixSize }, () => Array(matrixSize).fill(1));
console.time("Matrix Multiplication");
multiplyMatrices(matrixA, matrixB);
console.timeEnd("Matrix Multiplication");

[Result]

% node node.js
Matrix Multiplication: 22.287s
User@user /Users/User/dev/temp/test
% bun node.js
[47.58s] Matrix Multiplication

Do you have any clues why bun outperformed node.js with this code?

I would like to evaluate snippets of JavaScript (to implement a REPL for a dialect of ClojureScript) in a project that runs vite.

Vite translates code like import 'joi' to import '/node_modules/.vite/deps/joi.js?v=53669cbc' but in my snippets I don’t know how to make this translation.

It would be very handy if vite had some endpoint where I could just send the import to, like:

/@resolve-at-runtime/joi

so in my compiler I would just have to add a small prefix to make this work.

Is there such a thing, perhaps as a plugin? Perhaps other approaches that could work?