Category: javascript

I have need to create html to pdf in Node JS (Typescript).
I have used Puppeeter but in production there is chromium dependency which we need to install in our Linux server. I don’t want to install any browser dependency like chromium.

Please let me know if we can use any node package as per our requirement.

Thanks in Advance!

I am trying to develop a custom gutenberg block.
I have a form in save.js:

export default function save() {
return (
    <div {...useBlockProps.save()}>
            <form onSubmit={handleSubmit}></form>
</div>);}

File view.js is defined in block.json (“viewScript”: “file:./view.js”,)

const handleSubmit = async (event) => {
event.preventDefault();

const formData = new FormData(event.target);
...
};

But when the block renders, it fails.

Uncaught ReferenceError: handleSubmit is not defined

Its all nice if i use “traditional” javascript (e.g. jQuery, console.log), so enqueueing is not the problem.
I am pretty new with “modern” javascript (React, Angular…) and the question is surely pretty dumb, but i am looking for a proper way to coding and not only looking for a functional solution.

I would like to modify the price based on the selected Model.

const options = {
  'Toyota': {
    cars: ['Camry', 'Corolla', 'Yaris Sedan']
  },
  'Nissan': {
    cars: ['bluebird', 'Murano', 'Tiida']
  },
  'Volkswagen': {
    cars: ['MarkX', 'Avensis']
  },

}

function updateCarByBrand() {
  carselect.innerHTML = "";
  options[brandselect.value].cars.forEach(e => carselect.innerHTML += `<option value=${e}">${e}</option>`)
}
brandselect.addEventListener('change', updateCarByBrand);
updateCarByBrand();



if (cars = 'Camry') {
  document.getElementById("washing").innerHTML = 20;
  document.getElementById("polishing").innerHTML = 20;
} else {
  document.getElementById("washing").innerHTML = 0;
  document.getElementById("polishing").innerHTML = 0;
}

if (cars = 'Corolla') {
  document.getElementById("washing").innerHTML = 30;
  document.getElementById("polishing").innerHTML = 30;
} else {
  document.getElementById("washing").innerHTML = 0;
  document.getElementById("polishing").innerHTML = 0;
}

<p>Factory <br>

  <select id="brandselect">
    <option value="Toyota"> Toyota</option>
    <option value="Nissan"> Nissan</option>
    <option value="Volkswagen"> Volkswagen</option>
  </select>
</p>
<p>Model <br>
  <select id="carselect">
  </select>
</p>
<table>
  <tr>
    <th>Choice </th>
    <th>Service </th>
    <th>Price $ </th>
  </tr>
  <tr>
    <td><input type="checkbox"></td>
    <td>Washing</td>
    <td>
      <p id="washing"></p>
    </td>
  </tr>
  <tr>
    <td><input type="checkbox"></td>
    <td>Polishing</td>
    <td>
      <p id="polishing"></p>
    </td>
  </tr>

</table>

I need a Javascript regex pattern to test the Docker Image URL.

According to my research, the Docker image URL pattern is:
<registry>/<repository>/<image>:<tag>

Here are the components explained:

registry (optional): The URL of the registry where the Docker image is hosted. This is optional, and if not provided, Docker assumes the image is on Docker Hub. Examples include docker.io, gcr.io, or a custom registry URL.

repository (optional): The repository is a grouping for related Docker images. This is optional, and if not provided, it implies the “library” namespace on Docker Hub. Examples include nginx, ubuntu, or a custom repository.

image: The name of the Docker image within the repository. Examples include nginx, ubuntu, or a custom image name.

tag (optional): The tag specifies a particular version or variant of the image. This is optional, and if not provided, Docker assumes the “latest” tag. Examples include **latest**, 1.0, v1, 020921, or a custom tag.

Here are some common patterns for Docker image URLs with related test cases (examples) that should check with Javascript regex:

1. Docker Hub:

• <image>
• <user>/<image>
• <user>/<repository>/<image>
• <registry>/<user>/<repository>/<image>

Example:

• nginx
• username/nginx
• username/myrepo/nginx
• registry.example.com/username/myrepo/nginx

2. Private Registry:

• <registry>/<image>
• <registry>/<repository>/<image>

Example:

• registry.example.com/myimage
• registry.example.com/myrepo/myimage

3. With Tag:

• <image>:<tag>
• <user>/<image>:<tag>
• <registry>/<user>/<repository>/<image>:<tag>

Example:

• nginx:latest
• username/nginx:1.0
• registry.example.com/username/myrepo/nginx:2.0

4. Digest:

• <image>@<digest>
• <registry>/<image>@<digest>

Example:

• nginx@sha256:abc123def456...
• registry.example.com/myimage@sha256:xyz789uvw123...

5. URLs for Specific Registries:

• quay.io/<user>/<image>
• ghcr.io/<user>/<repository>/<image>

Example:

• quay.io/username/myimage
• ghcr.io/username/myrepo/myimage

6. Local Images:

• <image>:<tag>
• <repository>/<image>:<tag>

Example:

• myimage:latest
• myrepo/myimage:1.0

Actually I’ve tried following regex to test Docker image URLs:

const dockerImage = /^(?<repository>[w.-_]+((?::d+|)(?=/[a-z0-9._-]+/[a-z0-9._-]+))|)(?:/|)(?<image>[a-z0-9.-_]+(?:/[a-z0-9.-_]+|))(:(?<tag>[w.-_]{1,127})|)$/gim; 

But it didn’t work properly in following situations:

dockerImage.test('http://example.example.com/ai-ocr:v1') //output: false , expected: true
dockerImage.test('example.example.com/crazymax/yasu') //output: false , expected: true

And it worked properly in this cases:

dockerImage.test('example.example.com/face-anonymizer:020921') //output: true , expected: true
dockerImage.test('example.example.com/operation_service_images/mohammad-mohammad') //output: true , expected: true

I am currently working on a Vue 3 project where the requirement is to implement the ability to paste images into CKEditor 5. While exploring CKEditor, I noticed that there are three plans available. My specific question pertains to whether the coveted copy-paste image feature is accessible in the free version of CKEditor.

If any of you have hands-on experience or knowledge regarding the implementation of this feature, I would greatly appreciate your guidance. In particular, I’m looking for detailed insights into the process of enabling the copy-paste image functionality within CKEditor version 5, specifically in the context of a Vue 3 application.

If possible, please provide code snippets, configuration steps, or any additional dependencies that might be necessary to seamlessly integrate this feature into CKEditor within the Vue 3 framework. Your expertise and assistance will not only help me in achieving the project requirements but will also contribute to the broader knowledge base of the community.

I’m eager to learn from your experiences and appreciate any support you can offer.

I have explored the CKEditor 5 documentation and tried configuring the editor within my Vue 3 project. I’ve reviewed the available plans and features but couldn’t find explicit details on enabling the copy-paste image functionality in the free version.

I attempted to implement basic copy-paste functionalities, but the specific integration with image pasting remains elusive. My expectation is to receive guidance or insights from the community members who have successfully implemented or have knowledge about enabling the copy-paste image feature in CKEditor 5 within the context of a Vue 3 application

I can’t seem to be able to pass in options when updating data in mongoose, I just get an error saying Expected 0-2 arguments, but got 3.ts(2554)

The code I’m using is almost identical to the docs. I am using the latest version (8.0.3) of mongoose.

const guild = await guildSchema.findOne({ id: interaction.guildId })
await guild?.updateOne(
        {
            id: interaction.user.id 
        },
        {
            $set: {
                "some.value": true
            }
        },
        {
            arrayFilters: [
                {
                    "i.recipe": "Fried rice",
                    "i.item": { $not: { $regex: "oil" } },
                }
            ]
        }
    )

What makes me so frustrated is that acording to the docs (https://mongoosejs.com/docs/api/query.html#Query.prototype.updateOne()) this code is fine, but it’ still throwing errors.

This method should even take 4 arguments according to the docs:

Parameters:

    [filter] «Object»
    [update] «Object|Array» the update command

    [options] «Object»
        [options.multipleCastError] «Boolean» by default, mongoose only returns the first error that occurred in casting the query. Turn on this option to aggregate all the cast errors.

        [options.strict] «Boolean|String» overwrites the schemas strict mode option

        [options.upsert=false] «Boolean» if true, and no documents found, insert a new document

        [options.writeConcern=null] «Object» sets the write concern for replica sets. Overrides the schema-level write concern

        [options.timestamps=null] «Boolean» If set to false and schema-level timestamps are enabled, skip timestamps for this update. Note that this allows you to overwrite timestamps. Does nothing if schema-level timestamps are not set.

        [options.translateAliases=null] «Boolean» If set to true, translates any schema-defined aliases in filter, projection, update, and distinct. Throws an error if there are any conflicts where both alias and raw property are defined on the same object.

    [callback] «Function» params are (error, writeOpResult)

So I’m aware that this code is meant to return an array from the start number to the end number. The book I am reading did not cover what is happening on line 1, I can imagine that it is there so that the start and the end values could be interchanged, but I do not understand how to replicate this.

I just want to know more about this problem. I understand why the line works, but I do not understand the characters or how to use them in my next project. This is my first Stackoverflow post so please give me any advice on how my future posts should look.

I am not aware if this is a well justified and intentional. I’ve Googled around and the docs are incredibly scant, I’m aware there is bitrate but I’ve played around with all sorts of values and still the result is the same. The text is barely legible.

const stream = await navigator.mediaDevices.getDisplayMedia({video: {width: {ideal: 4096}, height: {ideal: 2160}, frameRate: 30}, audio: true});

const options = {
   // audioBitsPerSecond: 128000,
      videoBitsPerSecond: 14000000 /* 14,000Kbps bitrate should be enough for HD video */
};

Is it completely impossible to obtain HD screen recording through this?

getConstraints() gives me: {"aspectRatio":1.7777777777777777,"cursor":"always","deviceId":"window:18067:0","displaySurface":"window","frameRate":30,"height":1080,"logicalSurface":true,"resizeMode":"crop-and-scale","width":1920} before I provide the options.

Thanks.

I was digging through the mutation concept in javascript and I have encountered scenario where no-primitive data types like string or number declared using const keyword won’t be able to re-assign values whereas Objects or arrays are able to mutate regardless of whether its declared using const ,let or var. Why so? Is there any in-depth explanation for this?

Eg:

let num = 10; // able to re-assign values
num = 11;
const n = 15; // Wont be able to re-assign
n = 16; // will throw error

//Non-primitive data-type
const arr = [1,2,3]; //  will be able to modify 
arr.push(4); // [1,2,3,4]

While running my cube js dashboard I could only load values in some part of the dashboard while others values were not loaded. Rather they were giving error: error: type “double” does not exist.
After this for the dashboard to load all the values I had to comment out the preaggregation part in my schema.js file (A file where we define all sql queries, measures, dimensions and pre-aggregations). After disabling pre-aggregation all values loaded. But I want to achieve this with pre-aggreagation as well.
Adding to above, I am fetching data from athena and using postgres for pre-aggregation.
Can anyone help me with this?

I was trying to load all values in dashboard with pre-aggregation but got above error. I was only able to load the whole dashboard with all values when preaggregation part was commented out in schema.js file. I want to achieve with pre-aggregation also.

I have created this custom atom that uses the idb-keyval library to get and set values from indexeddb:

export function atomWithAsyncStorage<T>(key: string, initial?: T) {
  const store = createStore("conexsys-db", "keyval-store");

  return atomWithStorage<T>(key, initial, {
    setItem: (key, newValue) => set(key, newValue, store),
    getItem: (key) =>
      get<T>(key, store).then((value) => {
        if (value !== undefined) {
          return value;
        }
        if (initial !== undefined) {
          set(key, initial, store);
        }
        return initial;
      }),
    removeItem: (key) => del(key),
  });
}

This atom can then be created this way:

export const contextsAtom = atomWithAsyncStorage("CONTEXTS", []);

const [contexts, setContexts] = useAtom(contextsAtom);

The thing about the above atom is it uses the “CONTEXTS” value in the indexedDB store, but how can I dynamically from my react component set any value to indexedDB using Jotai too?

For example, if I have a URL id, how can I do something like:

  const [contexts, setContexts] = useAtom(contextsAtom, "usethisid"); OR
  const [contexts, setContexts] = useAtom(contextsAtom("usethisid"));

We have a dropdown which had 3 values, out of which one value is removed now, so two values are left for the user to select now. But if the user searches an item which has that value in the dropdown which we deleted. So, on the initial load of page, the dropdown must show the third value as SELECTED, but if the user expands the dropdown, it should show only the two values not the third values

We are using “oi-select” element to populate the dropdown and i tried using “ng-show” property but it did not work

I have an existing nest application, built with postgres and typeorm, I have used passport for authentication, I have also used passport strategies for social login with google, facebook, github and twitter.
Now I need to shift all the authentication to AWS cognito. Is it possible to do so? if which approach should i go for.

I have installed two libraries “@aws-sdk/client-cognito-identity-provider” and “amazon-cognito-identity-js” in order to interact with cognito in my backend. I was able to register users in aws cognito but I am a bit confused with social login.

How can I achieve social login with this approach? Do I need to use hosted UI of cognito in order to do the same?

I’m working on a Vue.js project using Vuetify, and I’m encountering an issue with the default date format of the v-text-field with the type “date.” Currently, the format is mm/dd/yyyy, but I need it to be yyyy/mm/dd.

Here’s the code for the date field:

<v-text-field
  type="date"
  label="From Date"
  v-model="from_date"
  ref="fromDateField"
></v-text-field>

I am having some issue with aligning Divs side by side. For example, here is an image of the issue I am seeing: .

As you can see, the first “This is about Tennis” is aligned with “This is about Basketball” but the second “This is about Basketball” is NOT aligned with “This is about Tennis”.

I think the issue is because the description for “This is about Tennis” is lesser than the description about “This is about Basketball”.

I have tried using the display: grid or flex property, on .newsLetterDiv class, but that didn’t resolve the issue.

Is there a way using JavaScript to always align the left and right divs on the same line, no matter if the description for one is shorter or longer than the other?

To address this issue, I have tried the following JS, but the divs are still not aligned properly. How can I fix this issue?

$('.TwoColumnUnit').each(function() {
  var pairs = [$(this).find('.TwoColumnUnit_Left'), $(this).find('.TwoColumnUnit_Right')];
  pairs.forEach(function(pair) {
      if (pair.length > 0) {
          var boxes = pair.find('.newsLetterDiv > div');
          var maxHeight = 0;
          boxes.each(function() {
              $(this).css('height', '');
              maxHeight = Math.max(maxHeight, $(this).height());
          });
          boxes.css('height', maxHeight + 'px');
      }
  });
});

HTML:

<div class="TwoColumnUnit">
    <div class="col-md-6 col-xs-12 TwoColumnUnit_Left">
        <div class="newsLetterDiv">
            <div class="col-sm-12 col-md-12">
                <div class="left_Side">
                    <i class="fas fas fa-route"></i>
                    <h3>This is about Tennis</h3>
                </div>
                <div class="right_Side">
                    <p><span>Tennis is a racket sport that is played either individually against a single opponent or between two teams of two players each.&nbsp;</span></p>
                </div>
            </div>
        </div>
        <div class="newsLetterDiv">
            <div class="col-sm-12 col-md-12">
                <div class="left_Side">
                    <i class="fas fas fa-basketball"></i>
                    <h3>This is about Basketball</h3>
                </div>
                <div class="right_Side">
                    <p><span>Basketball is a team sport in which two teams, most commonly of five players each, opposing one another on a rectangular court, compete with the primary objective of shooting a basketball through the defender's hoop, while preventing the opposing team from shooting through their own hoop.Basketball is a team sport in which two teams, most commonly of five players each, opposing one another on a rectangular court, compete with the primary objective of shooting a basketball through the defender's hoop, while preventing the opposing team from shooting through their own hoop.</span></p>
                </div>
            </div>
        </div>
    </div>
    <div class="col-md-6 col-xs-12 TwoColumnUnit_Right">    
        <div class="newsLetterDiv">
            <div class="col-sm-12 col-md-12">
                <div class="left_Side">
                    <i class="fas fas fa-basketball"></i>
                    <h3>This is about Basketball</h3>
                </div>
                <div class="right_Side">
                    <p><span>Basketball is a team sport in which two teams, most commonly of five players each, opposing one another on a rectangular court, compete with the primary objective of shooting a basketball through the defender's hoop, while preventing the opposing team from shooting through their own hoop.Basketball is a team sport in which two teams, most commonly of five players each, opposing one another on a rectangular court, compete with the primary objective of shooting a basketball through the defender's hoop, while preventing the opposing team from shooting through their own hoop.</span></p>
                </div>
            </div>
        </div>
        <div class="newsLetterDiv">
            <div class="col-sm-12 col-md-12">
                <div class="left_Side">
                    <i class="fas fas fa-route"></i>
                    <h3>This is about Tennis</h3>
                </div>
                <div class="right_Side">
                    <p><span>Tennis is a racket sport that is played either individually against a single opponent or between two teams of two players each.&nbsp;</span></p>
                </div>
            </div>
        </div>
    </div>
</div>