Chroma npm package keeps crashing between page refreshes

I’m developing an app that uses Chroma to store vectors. I’m running into the problem that initialy an operation is running fine but after a page refresh I’m getting the following notice: Please install chromadb-default-embed as a dependency with, e.g. npm install chromadb-default-embed. Installing it won´t solve the problem though. It just keeps showing the same behavior of running fine at initial load but after a page refresh it gives me this error.

Below is my code for reference (NuxtJs3)

import { getQuery } from 'h3';
import prisma from '~/server/utils/prisma';
import { ChromaClient } from 'chromadb';

const chromaClient = new ChromaClient();

export default defineEventHandler(async (e) => {
    const { userUuid } = getQuery(e);

    try {
        const user = await prisma.user.findUnique({
            where: {
                uuid: userUuid
            }
        });
        
        const { sex, preference, goal } = user;

        console.log(sex, preference, goal);

        let collection = await chromaClient.getCollection({ name: 'bios' });

        const bios = await collection.get({
            ids: [userUuid]
        });

        if (bios.documents.length > 0 && sex && goal) {
            let where = {
                where: {
                    'uuid': {
                        '$ne': userUuid
                    }
                },
                '$and': {
                    'goal': {
                        '$eq': goal
                    }
                }
            };

            if (preference) {
                where['$and'] = {
                    'sex': preference
                }
            }
            else {
                where['$or'] = [{
                    'sex': 'Male'
                }, {
                    'sex': 'Female'
                }];

                where['$or'] = [{
                    'preference': sex
                }, {
                    'preference': null
                }];
            }

            console.log(where);

            const matches = await collection.query({
                queryTexts: [bios.documents[0]],
                where,
                nResults: 3
            });

            console.log(matches);
        }
    } 
    catch (error) {
        console.error(error);
            
        throw createError({
            statusCode: 500,
            message: error
        });
    }
 });

What is the role of writableStrategy and readableStrategy in a TransformStream?

The Web Streams API allows configuring back pressure through queuing strategies. My understanding is that back pressure makes the producer of a stream slow down if the consumer of the stream cannot process the data as fast as they are produced. To allow the producer of the stream to produce data in parallel to the consumer consuming it, a stream has an internal queue where it can cache some chunks before the consumer consumes them. This way, the producer can produce some data in advance, but not too much. The size of this queue can be configured through a queuing strategy. For object streams, the queue size is configured as number of objects (meaning number of chunks); for byte streams, it is configured as a number of bytes (meaning the sum of chunk sizes).

Since web streams are quite new and queuing strategies seem to be considered an advanced use case, there is not much detailed documentation about it online.

TransformStreams allow specifying two strategies: a writableStrategy and a readableStrategy. Does this mean that a TransformStream has two queues? If so, what is the difference between the two? I suspect that the writableStrategy will cache the input chunks before they are sent through the transform function, while the readableStrategy will cache the already transformed output chunks. Is my assumption correct?

how to optimize animation that uses nth-child

I am using the nth-child pseudo-class for an animation that makes the text appear as if it is being typed out. Each time nth-child is used, it is used to delay the animation on that letter. Considering I am going to be using this for longer sequences of text than just “Sample Text” here, and the delay time goes up in a consistent pattern, I was wondering if there is a way to optimize this so I don’t have to deal with writing pretty much the same thing 30 times? Thanks in advance!

const typeDiv = document.getElementById("typer");

typeDiv.addEventListener("animationend", whenEnd);

function whenEnd() {
  document.getElementById("typer").style.color = "black";
}
#typer span {
  animation-name: typing;
  animation-duration: 2s;
  animation-iteration-count: 1;
}


#typer span:nth-child(1) {
  animation-delay: 0s;
}

#typer span:nth-child(2) {
  animation-delay: 0.2s;
}

#typer span:nth-child(3) {
  animation-delay: 0.4s;
}

#typer span:nth-child(4) {
  animation-delay: 0.6s;
}

#typer span:nth-child(5) {
  animation-delay: 0.8s;
}

#typer span:nth-child(6) {
  animation-delay: 1s;
}

#typer span:nth-child(7) {
  animation-delay: 1.2s;
}

#typer span:nth-child(8) {
  animation-delay: 1.4s;
}

#typer span:nth-child(9) {
  animation-delay: 1.6s;
}

#typer span:nth-child(10) {
  animation-delay: 1.8s;
}

#typer span:nth-child(11) {
  animation-delay: 2s;
}


@keyframes typing {

  0%,
  98% {
    color: transparent;
  }

  100% {
    color: black;
  }
}
<p id="typer" style="color:transparent;">
  <span>S</span><span>a</span><span>m</span><span>p</span><span>l</span><span>e</span><span> </span><span>T</span><span>e</span><span>x</span><span>t</span>
</p>

Vertical with autoplay and autoheight has weird jumps

I’m trying to create a “marquee” carousel style with Swiper.

My swiper properties are the following:

{
    loop: true,
    speed: 5000,
    allowTouchMove: false,
    slidesPerView: "auto",
    spaceBetween: 10,
    autoHeight: true,
    direction: "vertical",
    autoplay: {
      delay: 0,
      disableOnInteraction: false,
    },
 };

Also, I’m setting this property to swiper wrapper, so the autoplay runs smoothly without increasing and decreasing speed when reaching the end/star of a new slide item.

.swiper-wrapper{
    transition-timing-function: linear;
}

Sandbox: https://codesandbox.io/p/sandbox/g4yzhx

Initially the carousel runs smoothly and well, but if you wait just for some seconds, you’ll notice the slide starts to gradually have some hard jumps, maybe due to a miss calculaiton problem perphaps, not sure.

I’ve tried dozens of different properties and approaches, using several swiper methods combinations, but had no success yet. Lost count of how many swiper api properties I’ve used.

Access to original E-mail when forwarding

i work with Javascript and i have to develop an Outlook-Web-Addin.

I have been trying to get the received date of an E-Mail.
I need it as an addition to the subject-string (left!).

The function “Office.context.mailbox.item.subject.setAsync” is only available in “composemode”. The composemode means New / Reply / Forward.

But in “composemode” i don’t get the received date anymore.
I need an access to the original E-Mail.

I don’t know, how to continue.
Thanks for advices.

Why do base64 images not appear in Dompdf even though they are correctly generated?

I’m generating a PDF using Dompdf in Laravel.
In my Blade view, I’m capturing parts of the page as images using html2canvas and converting them to base64.

Example of my JavaScript code:

const rondes = await html2canvas(document.querySelector('.rondes'), { scale: 2 });
const veh = await html2canvas(document.querySelector('.veh'), { scale: 2 });

const pictures = [
    rondes.toDataURL('image/png'),
    veh.toDataURL('image/png')
];

Then, I send these base64 images to my Laravel controller, and I inject them into the generated HTML:

$html = '
<img src="' . $images[0] . '" style="max-width:150px;">
<img src="' . $images[1] . '" style="max-width:150px;">
';

Finally, I render the PDF with Dompdf:

$dompdf = App::make('dompdf.wrapper');
$dompdf->loadHtml($html);
$dompdf->setPaper('A4', 'portrait');
$dompdf->render();

What works :

  • The base64 strings seem correct when I console.log(pictures) in the browser.
  • I can see the images in my Blade view if I display them inside .

Problem :

  • In the final PDF, the images don’t appear.
  • Instead, only the image alt attribute shows up or a blank space.
  • No error in the browser or Laravel logs.

Extra :

  • I activated isRemoteEnabled and isHtml5ParserEnabled
  • Dompdf version : 3.1.1

Is there something specific Dompdf requires for base64 images to render correctly ?

How to remove button after switching back to layer? [closed]

Я новичок в leaflet и пытаюсь написать свою карту. В целом, пока получилось сделать все то, что я хотел кроме одного: после перехода на главный слой кнопка назад не удаляется. Как это реализовать, чтобы она удалялась? Скидываю на всякий случай весь код.

<link rel="stylesheet" href="/resources/assets/leaflet.css" />
<script src="/resources/assets/leaflet/js/thereach/leaflet.js"></script>
<link rel="stylesheet" href="/resources/assets/leaflet/Control.FullScreen.css" />
<script src="/resources/assets/leaflet/Control.FullScreen.js"></script>

<div align="center" id="map" style="height: 600px;width: 600px;" allowfullscreen="allowfullscreen"></div>

<script>

    const bounds = [
        [0, 1280],
        [1280, 0]
    ];

    const dungeonIcon = L.icon({
      iconUrl: '/resources/assets/leaflet/icons/dungeon.png',
      iconSize: [48, 48],
      iconAnchor: [22, 14],
    });

    const areafinterestIcon = L.icon({
      iconUrl: '/resources/assets/leaflet/icons/poi_areaofinterest_complete.png',
      iconSize: [48, 48],
      iconAnchor: [22, 14],
    });

    const houseIcon = L.icon({
      iconUrl: '/resources/assets/leaflet/icons/poi_group_house_owned.png',
      iconSize: [48, 48],
      iconAnchor: [22, 14],
    });

    const arenaIcon = L.icon({
      iconUrl: '/resources/assets/leaflet/icons/poi_solotrial_complete.png',
      iconSize: [48, 48],
      iconAnchor: [22, 14],
    });

    const campfireIcon = L.icon({
      iconUrl: '/resources/assets/leaflet/icons/poi_camp_complete.png',
      iconSize: [48, 48],
      iconAnchor: [22, 14],
    });

  const map = L.map('map', {
    crs: L.CRS.Simple,
    minZoom: -1,
    maxZoom: 4,
    maxBounds: bounds,
    center: [640, 640],
    fullscreenControl: true,
    fullscreenControlOptions: {position: 'topleft'},
    forcePseudoFullscreen: true,
    zoom: 0
  }).setView([640, 640], 0);

  const mainBounds = [[0, 0], [1280, 1280]];
  const mainLayer = L.imageOverlay('/images/6/67/Reach_base.jpg', mainBounds).addTo(map);
  map.fitBounds(mainBounds);

// events are fired when entering or exiting fullscreen.
map.on('enterFullscreen', function () {
    console.log('entered fullscreen');
    map.setZoom(0);
});

map.on('exitFullscreen', function () {
    console.log('exited fullscreen');
    map.setZoom(-1);
});

  function addZones() {
L.marker([1064, 478], {icon: dungeonIcon}).addTo(map).bindPopup("<div align=center><a href=/index.php/test>test</a><hr>test</div>");
  }
backButton.disable();
  addZones();

const MarkarthZone = L.polygon([
    [628, 242],
    [635, 243],
    [640, 254],
    [637,275],
    [639,278],
    [657,287],
    [663,296],
    [663,296],
    [659,324],
    [665,337],
    [656,360],
    [647,373],
    [646,384],
    [632,396],
    [616,389],
    [606,369],
    [601,352],
    [596,344],
    [581,351],
    [573,336],
    [572,320],
    [574,302],
    [571,287],
    [574,264],
    [583,249],
    [596,252]
], {className: "leaflet-polygon"}).bindTooltip("Markarth");

MarkarthZone.addTo(map);
MarkarthZone.on('click', function () {
  map.eachLayer(function (layer) {
    map.removeLayer(layer);
  });
  const MarkarthBounds = [[0, 0], [1280, 1280]];
  L.imageOverlay('/images/d/d4/Markarthcity_base.jpg', MarkarthBounds).addTo(map);
  map.fitBounds(MarkarthBounds);

  const backButton = L.control({position: 'topright'});
      backButton.onAdd = function () {
        const div = L.DomUtil.create('div', 'leaflet-bar');
        div.innerHTML = '<a href="#" title="Back">←</a>';
        div.onclick = function () {
          map.eachLayer(layer => map.removeLayer(layer));
          mainLayer.addTo(map);
          map.fitBounds(mainBounds);
          MarkarthZone.addTo(map);
          addZones();
          return false;
          remove();
        };
       return div;
      };
      backButton.addTo(map);
    const MarkarthIcon = L.icon({
      iconUrl: '/resources/assets/leaflet/icons/Markarth.png',
      iconSize: [252, 74],
      iconAnchor: [22, 14],
    });
L.marker([1064, 478], {icon: MarkarthIcon}).addTo(map);

});
</script>

I tried several options with removing the button, but all in vain. The code either breaks or does not work

Don’t match a subdomain / multi-level subdomain that ends with xyz.example.com using regex [closed]

(https?|ftp)://((?!wm.)[^/]+.)*(localhost|win|tplinkwifi.net|tplinkrepeater.net)/

These should be captured
http://win/myprofile
http://localhost/myprofile
http://ss.localhost/myprofile
http://ss.cdsada.win/myprofile

These shouldn't be match
http://wm.win/myprofile
http://das.wm.win/myprofile
http://sadasd.small.wm.win/myprofile

This is my regex and these are my test cases

https://regex101.com/r/avyEpl/1

It works well. But I don’t want last 2 lines to match. How do I fix it?

How to keep the “Previous” button visible in a multi-page Intro.js tutorial?

I have a multi-page Intro.js tutorial, and I need to allow users to navigate between pages. Specifically, I want to make sure that when a page contains only 1 step, the “Previous” button remains visible so users can navigate back to the previous page.

Currently, on pages with only 1 step, the “Previous” button does not appear. I would like to ensure that the “Previous” button is always visible, even on pages with just 1 step, so users can go back to the previous page in the tutorial.

It would also be a nice addition to display the total step count for all pages, not just per page.

Is it possible to have 1 function that holds all steps for my multiple pages, en between selected steps a redirect.,

This is the code that i’m using on page 1, and page 2 is pretty much the same, with the include tutorial=1:

 function startTutorial() {
        introJs().setOptions({
            steps: [
                {
                    title: 'Welcome',
                    intro: "Intro text",
                    position: 'center'
                },
                {
                    element: document.querySelector('[data-step="1"]'),
                    intro: "Step 1"
                }
            ],
            exitOnOverlayClick: true,
            showBullets: false,
            nextLabel: 'Next',
            prevLabel: 'Previous',
            doneLabel: 'Next'
        }).oncomplete(function() {
            window.location.href = '{{ path("app_next_page", {"tutorial": true}) }}';
        }).start();
    }

Angular Tailwind v14 cant find image logo path

I’m using Angular 18 and Tailwind v14, and I have an issue with displaying images (such as a logo). When I set the correct path for the image, Angular can’t seem to find it.

The issue:

I correctly specify the image path in the tag, but it doesn’t display.

The same project worked fine with an older version of Tailwind (before the update).

Code snippets:

Here’s my angular.json configuration for assets:

"assets": [
  {
    "glob": "**/*",
    "input": "public"
  }
]

"styles": [
   "src/styles.css"
],

 "assets": [
{
  "glob": "**/*",
 "input": "public"
}
 ],
"styles": [
   "src/styles.css"
 ],

The image is located in the public folder.

What I’ve checked:

The image path seems correct (public/images/logo.png).

The image was displayed without issues in the older version of Tailwind.

I suspect the issue may be related to Tailwind (v14), but I’m not sure if it’s causing the problem.

Anyone facing the same issue or can point me in the right direction?

Automatic login with Windows user over JS/AngularJS front and C#/OWIN backend

I have a JavaScript/AngularJS fronted with C#/OWIN backend server.

Currently, users go to the login page and send their username/password via POST request and backend server returns a set of permissions for each screen (frontend has multiple tabs) in the GUI if the user is in the Active Directory and if it has an entry in some table.

Is is somehow possible to implement something that would automatically get the current Windows user credentials (username and password) and send it as soon as the login screen is opened (since JS cannot get those information)?

Since I’m not a C# nor a JS developer I tried to use chatGPT and other AI tools to get some info, but almost all sources contain some old code that’s currently obsolete.

Thanks

Lit rendering nested lists out of order?

I’m using Lit to render a nested list. If I push my list elements into an array with the sub-lists pushed as complete Lit html template objects then all is well, I can render the nested list with the template html`<ul>${myArray}</ul>` .

However, if I instead push sub-lists as their individual parts (<ul>, <li>Sub-First, …, </ul>) then the UL elements seem to get rendered out of order as <ul></ul><li>Sub-First.

Complete working example (assuming that you’ve got a copy of the Lit code as lit-all.min.js downloaded):

render-list.html

<!DOCTYPE html>
<html>
<head>
    <script type="module" src="render-list.js"></script>
</head>
<body>
    <render-list type="1"></render-list>
    <render-list type="2"></render-list>
</body>
</html>

render-list.js

import {LitElement, html} from "./lit-all.min.js";

export class RenderList extends LitElement {
    static properties = {
        type: {type: Number}
    };

    constructor() {
        super();
        this.type = 0;
    }

    render() {
        if (this.type == 1) {
            let lst = [];
            lst.push(html`<li>One`);
            lst.push(html`<li>Two`);
            let sublst = [];
            sublst.push(html`<li>Sublist One`);
            sublst.push(html`<li>Sublist Two`);
            lst.push(html`<ul>${sublst}</ul>`);
            lst.push(html`<li>Three`);
            return html`
                <h1>This list rendering works</h1>
                <ul>${lst}</ul>
            `;
        }
        else {
            let lst = [];
            lst.push(html`<li>One`);
            lst.push(html`<li>Two`);
            lst.push(html`<ul>`);
            lst.push(html`<li>Sublist One`);
            lst.push(html`<li>Sublist Two`);
            lst.push(html`</ul>`);
            lst.push(html`<li>Three`);
            return html`
                <h1>This list rendering doesn't work</h1>
                <ul>${lst}</ul>
            `;
        }
    }
}
customElements.define("render-list", RenderList);

This renders as below:

screenshot of browser

And looking in the developer tools shows the second list rendered as:

<ul>
<li>One
<li>Two
<ul></ul>
<li>Sublist One
<li>Sublist Two
<li>Three
<ul>

Clearly I’m not understanding something about the way Lit uses templates here. Why doesn’t the second solution work?

Why Dates are not compared in javascript? [duplicate]

I need to compare Date objects in JS but for some reason the comparison is not available in the standard version

new Date(1) == new Date(1) // return false

I tried converting dates to string format and it worked

new Date(1).toISOString() === new Date(1).toISOString() // return true

But I want to understand why the comparison of the standard Date format does not work


My guess is that the comparison returns “false” because it is not the date values ​​that are being compared, but the object references, even if that is the case I would like to know more about why this happens

Html load website and allow screen shot selection

i am trying to load website into html using js and allow screenshot

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Capture Screenshot</title>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/html2canvas/0.4.1/html2canvas.min.js"></script>
</head>
<body>
  <iframe id="iframe" src="https://stackoverflow.com/questions/31289275/how-to-get-screenshot-of-cross-domain-images-in-a-webpage" width="100%" height="500px"></iframe>
  <button id="capture">Capture Screenshot</button>
  <script>
    document.getElementById('capture').addEventListener('click', function() {
      var iframe = document.getElementById('iframe');
      html2canvas(iframe.contentWindow.document.body).then(function(canvas) {
        document.body.appendChild(canvas);
      });
    });
  </script>
</body>
</html>

but i am facing a cross-origin policy issues can i implement some proxy service which return the html and append it to current page so i can take screen shot?

Best way to parse json and extract attribute values dynamically in Angular [duplicate]

I am working new in Angular and working in a work where REST API returns a complex json entity and dynamically I have to fill html page components with values from the output json. The json structure will be like having mulltiple arrays in it. I need help with identifying json attributes at runtime by comparing json array fields, extract particular array item and attribute values from that and put into html component.
My JSON structure will be like below:

{
    "code": "0",
    "status": "SUCCESS",
    "hasError": false,
    "responsePayload": {
          ......
       "listOfParties": [
            {
                "role": "Primary Contact",
                "fullName": "John  Doe",
                "gender": "Male",
                "dateOfBirth": "01/01/1985",
                "partyCode": "PTYCODE01"
            },
            {
                "role": "Service Manager",
                "fullName": "Smith  Murphy",
                "gender": "Male",
                "partyCode": "PTYCODE02"
            }
        ],
      .......
}

From above json, I need to scan “listOfParties” and match “role” and after it matches with “Primary Contact”, need to get the “partyCode” and set it in input text in html page.

I have tried with: jsonObject[“listOfParties[0].partyCode”, but couldn’t get how to match it with “role” and then get “partyCode”. Can I do it with setting jsonPath or some better way to do it.

Thanks.