Category: javascript

I am trying to use the Quokka VSCode extension in a vite app and I keep getting the following error.

​​​​​Quokka PRO ‘App.jsx’ (node: v19.6.0)​​​​   Only URLs with a
scheme in: file and data are supported by the default ESM loader. On
Windows, absolute paths must be valid file:// URLs. Received protocol
‘d:’

I am running Quokkajs start on current file on my app.jsx file but no luck. It works on .js files and it works in create-react-app.

I am not really sure what is going on. On Quokka’s website it says to use with vite you need to install the node-vite package so I did. But no luck. Does anyone know what is going on here?

how can I get a ‘then’, or asynchronously return an API response?
I use fastify, but it doesn’t wait for a response if you make a callback inside.
I tried that, but the error: TypeError: a.then is not a function

         const a = await transporter.sendMail(mainOptions);
            a.then((error, result) => {
                if (error) return error
                reply.send({
                  messageId: result.messageId
                })
            })

We have table sorter JS running and it works great, however the count function is counting all cells in the column not just those with data.

Is there a way to configure the count function to ignore empty cells?

The 3rd column should be 0 not 24

$(".sortableTable-totalsRow").tablesorter({
    theme: "bootstrap",
    widgets: ['filter', 'math'],
    widgetOptions: {
        math_data: 'math', // data-math attribute
        math_ignore: [0, 1, ''],
        math_textAttr: '',
        math_none: 'N/A', // no matching math elements found (text added to cell)
        math_complete: function ($cell, wo, result, value, array)
        {
            var textClass = $cell.attr('data-math-textAttr');
            if (textClass == undefined)
            {
                textClass = "align-right";
            }
            var txt = '<span class="' + textClass + '" >' +
                (value === wo.math_none ? '' : ' ') +
                result + '</span>';
            if ($cell.attr('data-math') === 'all-sum') {
                // when the "all-sum" is processed, add a count to the end
                return txt + ' (Sum of ' + array.length + ' cells)';
            }
            return txt;
        },
        math_completed: function (c) {
            // called after all math calculations have completed
        },
        // cell data-attribute containing the math value to use (added v2.31.1)
        // see "Mask Examples" section
        math_mask: '##0.00',
        math_prefix: '', // custom string added before the math_mask value (usually HTML)
        math_suffix: '', // custom string added after the math_mask value
        // event triggered on the table which makes the math widget update all data-math cells (default shown)
        math_event: 'recalculate',
        // math calculation priorities (default shown)... rows are first, then column above/below,
        // then entire column, and lastly "all" which is not included because it should always be last
        math_priority: ['above', 'below', 'col', 'row'],
        // set row filter to limit which table rows are included in the calculation (v2.25.0)
        // e.g. math_rowFilter : ':visible:not(.filtered)' (default behavior when math_rowFilter isn't set)
        // or math_rowFilter : ':visible'; default is an empty string
        math_rowFilter: ''
    }
});



<tfoot class="sticky-bottom">
    <tr style="border-top: double">
        @for (int i = 0; i < (Model.Heading.Count() - 2); i++)
        {
            <th class="text-center" data-math="col-count" data-math-mask="#,###.00">col-count</th>
            <th class="text-right" data-math="col-sum" data-math-mask="#,##0.00">col-sum</th>
        }

    </tr>
</tfoot>

I’m not sure why this code is not working. The Receiver class instance does not return any messages.

const runExample = (messages) => {
  class Emitter {
    constructor(messages = []) {
      this.messages = messages;
      this.event = () => {};
    }

    setEvent(fn) {
      this.event = fn;
    }

    trigger() {
      this.messages.forEach((message) => this.event(message));
    }
  }

  class Receiver {
    constructor() {
      this.messages = [];
    }

    ping(message) {
      this.messages.push(message);
    }
  }

  const myEmitter = new Emitter(messages);
  const myReceiver = new Receiver();

  myEmitter.setEvent(myReceiver.ping);
  myEmitter.trigger();

  return myReceiver.messages;
};

One simple way to fix this is to pass the Receiver instance to the Emitter constructor, and call the ping() method directly. But I feel like there should be a way to call that function without passing the class.

I’m trying to count the number of characters that are unaccented English letters in a string. For example, I would want the count to be 1 for the string “né!”.

I thought I would be able to check if each character is in the range ‘a’-‘z’ or ‘A’-‘Z’, but that would include 'é':

'é' >= 'a' && 'e' <= 'z';
true

Both accented and unaccented letters seem to have the same code point:

"eé".codePointAt(0);
101
"eé".codePointAt(1);
101

I tried using regular expressions, but the string "né!" was treated like the 4-character string "ne'!":

    for (let i = 0; i < len; i++) {
        var c = str.charAt(i);
        if (re.test(c)) {
            console.log("Is a letter: " + c);
            numLetters++;
        } else {
           console.log("Is not a letter: " + c);
        }
    }

Output:

Is a letter: n
Is a letter: e
Is not a letter: ́
Is not a letter: !

How can I find the number of characters that are unaccented English letters?

How to connect websocket through a proxy in native javascript (browser) ?

I tried this with https-proxy-agent in node.js. but i want to do this in native javascript

As the knockout-postbox is not under maintenance and long time since there is no update, we are looking for an alternative option. It would be great if you can suggest a few.

Please note: we are using Oracle JET(https://www.oracle.com/webfolder/technetwork/jet/index.html) and it is using knockout as base architecture. Oracle JET code is using Javascript and Typescript.

The latest knockout-postbox(0.6.0) had been released 6 years ago and no changes since that time.

knockout-postbox for reference: https://www.npmjs.com/package/knockout-postbox

Advance thanks.

this is my first time using StackOverflow, and so far its helped me a loT! I am trying to make a pizza website, and I am running into an error that forEach is not defined. I tried to research this, but i only came out more confused than I was before. How exactly do i define this? Any help would be greatly appreciated!

function getInputValue(inputArray){
  const innerTextArray = [];
  inputArray.forEach(function(element){
    const elementString = element.value;
    innerTextArray.push(elementString);
  });
  return innerTextArray;
}

function Pizza(size, topping) {
this.size = size;
this.topping = topping
}

class Toppings extends Pizza {
  pushToPizza(input){
    this.prices.push(input);
  }
}

Pizza.prototype.totalCost = function(){
  let total = 0.00;
  if (this.size === "Small"){
    total += 10.00;
  } else if (this.size === "Medium"){
    total += 12.00;
  } else if (this.size === "Large"){
    total += 14.00;
  }


this.toppings.forEach(function(element){
      total += 1.50;
  }
)

subtotal = total * 1;
total = subtotal * 1.10
total = total * 1.10
return total;
}

window.onload=function(){
  window.addEventListener("load", function(){
    document.querySelector("form#pizza-form").addEventListener("submit", handleSubmission);
    document.querySelector("form#pizza-form").addEventListener("reset", handleReset);
})
}

function handleSubmission(event){
  event.preventDefault();
  const orderDisplay = document.getElementById("order-list");
  orderDisplay.innerHTML="";
  const size = document.querySelector("input[name='size']:checked").value;
  const toppingsSelected = document.querySelectorAll("input[name='topping']:checked");
  const toppings = getInputValue(toppingsSelected);
  const pizza1 = new Pizza(size, toppings);
  const cost = pizza1.totalCost();
  const myOrder = convertOrder(pizza1);
  const myCost = listCosts(myOrder);
  displayOrder(myOrder, myCost);
  displayCost(cost);
}

function handleReset(){
  const orderDisplay = document.getElementById("order-list");
  const subDisplay = document.querySelector("span#subtotal");
  const taxDisplay = document.querySelector("span#total-tax");
  const costDisplay = document.querySelector("span#total-cost");
  orderDisplay.innerHTML="";
  subDisplay.innerText = "";
  taxDisplay.innerText = "";
  costDisplay.innerText = "";
}

function convertOrder(order){
  const processArray = Object.values(order);
 const convertedArray = [];
  processArray.forEach(function(element){
    if(Array.isArray(element)){
      const subArray = Object.values(element);
      subArray.forEach(function(element){
        convertedArray.push(element);
      });
    } else {
      convertedArray.push(element);
    }
  });
  return convertedArray;
}

function listCosts(convertedArray){
  const listArray = []
  convertedArray.forEach(function(element){
    switch (element) {
      case("pepperoni"):
      case("veggieMix"):
      case("pineapple"):
      case("sausage"):
      case("cheese"):
      case("crust"):
        listArray.push("1.50");
        break;
      case("small"):
        listArray.push("10.00");
        break;
      case("medium"):
        listArray.push("12.00");
        break;
      case("large"):
        listArray.push("14.00");
        break;
      default:
        listArray.push("2.00");
        console.log("pushing " + element)
    }
  });
  return(listArray);
}

Ive looked Up many solutions, but they all seem to break the code more than it already is.

How remove default error message if I don’t pass the validation message parameter, it shows a standard error message, I’m using UI KIT MANTINE

const schema = z.object({
  name: z.string().min(1),
  email: z.string().min(1),
  lastname: z.string().min(1)
})
   

I experienced a very strange issue that I was able to finally resolve, but I don’t understand why it was happening in the first place. As my solution was guesswork, I am hoping to understand the mechanics better.

I have a function called createNewList() which creates a new object from a template object in default.json. This is meant to be repeatable so that multiple new lists can be created and added to this array, and the data from each of these lists can be independently changed. It works fine when I create my first list, but when I create a second list, changing the data in one changes it in both lists, which appear to be the same list.

I spent a long time debugging this problem and narrowed it down to the imported listsData which is being changed. Thus, creating a new list from the template is working correctly, but the template is what is changing.

import listsData from "./assets/data/default.json";

const createNewList = function createNewListData() {
    const { newList } = listsData;
    // Push list to lists array and switch current list index
    const newListIndex = lists.push(newList) - 1;
    switchCurrent(newListIndex);
}

I found this stack overflow question that helped me resolve the issue. I replaced the first line of the function with:

const { newList } = JSON.parse(JSON.stringify(listsData));

As this seems like an inelegant solution to the problem, I am trying to understand why it works and why it is needed in order to not alter the template object I’m using to create new lists?

When I abstract out the title code to a new layout component, the page stops outputting the objects and instead outputs an AsyncGenerator object.

Here is what the broken code looks like where just contains a section tag with some styles and the title.

const categories = [chips, kebab];
---

<SectionLayout title="menu">
  <div
    class="m-auto grid w-9/12 grid-flow-row grid-cols-1 gap-x-40 md:grid-cols-2 lg:w-7/12"
  >
    {
      categories.map((category, index) =>
        category.map(function (item) {
          if (item.name == "title") {
            if (index >= 1) {
              return (
                <h3 class="col-span-1 mt-8 border-t-2 border-orange-600 pt-8 pb-4 text-center text-4xl font-semibold uppercase text-zinc-800 md:col-span-2">
                  {item.description}
                </h3>
              );
            } else {
              return (
                <h3 class="col-span-1 mt-8 text-center text-4xl font-semibold uppercase text-zinc-800 md:col-span-2">
                  {item.description}
                </h3>
              );
            }

This is the before and after applying the section layout block.

Html:

<!DOCTYPE html>
  <html lang="en">
    <head>
      <title>PROFILE PICKER</title>
      <meta charset="UTF-8" />
      <meta http-equiv="X-UA-Compatible" content="IE=edge" />
      <meta name="viewport" content="width=device-width, initial-scale=1.0" />
      <link rel="stylesheet" type="text/css" href="index.css" />
    </head>
    <body>
      <div class="container">
        <div id="content_box" class="content">
          <div id="profiles" class="profiles"></div>
          <div class="slider">
            <input
              type="range"
              min="0"
              max="100"
              value="50"
              class="slider"
              id="mySlider"
            />
          </div>
        </div>
      </div>
      <script src="index.js"></script>
    </body>
  </html>

Css:

body {
    margin: 0;
  }

  div.container {
    height: 100vh;
    width: 100vw;
    background-color: #1f1f21;
    background-size: cover;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
  }

  div.content {
    width: 90%;
    height: 80%;
    display: flex;  
    align-items: center;
    flex-direction: column;
    justify-content: center;
    border-radius: 47px;
    background: #262c30;
    box-shadow: inset 5px 5px 12px #0f1213, inset -5px -5px 12px #3d464d;
  }

  div.profiles {
    height: 60%;
    width: 90%;
    display: flex;
    gap: 10%;
    padding-left: 2%;
    overflow: hidden;
    background-color: transparent;
  }

  div.user_card {
    border-radius: 50px;
    border-radius: 47px;
    border-radius: 47px;
    background: linear-gradient(145deg, #3e3f40, #343536);
    box-shadow: 20px 20px 40px #232425, -20px -20px 40px #515253;
    height: 70%;
    min-width: 30%;
  }

Js:

const addUser = (userJson) => {

    const userImgUrl = userJson.picture.large;

    const container = document.querySelector("#profiles");

    const newUserCard = document.createElement("div");
    const newUserPhoto = document.createElement("img");

    newUserPhoto.src = userImgUrl;
    newUserPhoto.style.borderRadius = "50%";
    newUserCard.appendChild(newUserPhoto);
    newUserCard.classList.add("user_card");
    newUserCard.style.position = 'relative';
    newUserCard.style.zIndex = '1';
    //newUserCard.innerHTML = '<img src="' + userImgUrl + '">'//JSON.stringify(userJson, null, 2);

    container.appendChild(newUserCard)

  }

  //leggiamo un file json
  fetch("https://randomuser.me/api/?results=5")
    .then(function (data) {
      return data.json();
    }).then(function (json) {
      for (let index = 0; index < json.results.length; index++) {
        addUser(json.results[index])
      }

    })

    //leggiamo un file di testo
  /*
  fetch("sample.csv")
    .then(function (data) {
    return data.text();
  }).then(function (txt) {
    //console.log(txt);
  })
  */

The problem is that the background of the profiles overlaps the content, and makes it look awful. I want to avoid that, also if you have any advices or maybe changes regarding the color or anything in general about the program, which I want to remember should be in neumorphism style, please write them down. Thank you in advance

I have got a very irritating problem, that when I want to auto-fill in the function in the console by hitting enter, it does not auto-fill. You can tell that it will not auto-fill since it does not have the blue background behind the selected function. I need first to hit up and down keys to “pre-select” the function and only then the auto-filling is working. to show you what I mean,
this is not pre-selected, but this is preselected (you can tell by the blue background) Can I modify this somewhere in the settings so I dont need to hit up-and-down keys all the time?

I have my own calendar component that always renders three months at a time, each containing 6 weeks, each containing 7 days. Each day has a touchable-opacity, that sets the selected day of the calendar component. That adds up to a lot of views to re-render on every day change. The day components are memoized and shouldn’t re-render unless the day was selected.

I used flipper to diagnose the render times. On react-native 0.66.5, the entire render took around 50ms on 0.73.1 it took over 500ms. I haven’t changed anything else in the code.

I have a Razor page that takes dates as input and displays the dates that have been entered in a table.

To input the date, I use <input type="date" /> which MDN states:

The displayed date format will differ from the actual value — the displayed date is formatted based on the locale of the user’s browser, but the parsed value is always formatted yyyy-MM-dd.

This works as described, showing the date in the User’s choice date format. I can even change my Windows settings, reload the page, and see what I set it to.

The trouble comes from trying to convert the yyyy-MM-dd dates I have stored to the user selected format.

I have tried managing the display format at the server with C# date.ToShortDateString() which looked right on localhost, but displayed the CultureInfo from the server when I deployed to Dev.

I have also tried managing the display format as a last step with JavaScript date.toLocaleDateString() which seems to just pick the standard MM/dd/yyyy for en-US.

This is 2023, the browser knows what the user has selected, it is using with the <input>. How can I format my dates the same? (Preferably without extra libraries that are no longer supported.)