Category: javascript

I want to make a simple browser extension that would do the following:

Replace hjkl vim keys with jkl; at compiler explorer’s vim-mode.

I figured out that I can open devtools, put a breakpoint somewhere here and
paste the following code in the console

monacoVim.VimMode.Vim.noremap(';', 'l');
monacoVim.VimMode.Vim.noremap('l', 'k');
monacoVim.VimMode.Vim.noremap('k', 'j');
monacoVim.VimMode.Vim.noremap('j', 'h');
monacoVim.VimMode.Vim.noremap('h', ';');

This has the desired effect, however I would like not to have any manual steps. So I would like to write an extension that achieves the same effect.

Apart from compiler explorer I need the approach to be applicable for closed-source sites like hackerrank, so commiting to opensource is not applicable in my case.

How can I write an extension that would modify site’s js the way I described? Or are there any other ways to achieve the desired effect?

I have a simple Astro project and I’m using the Cloudinary integration to sync a folder from my Cloudinary library to mi project.

---
import Carousel from "@components/Carousel.astro";
import { CldImage } from "astro-cloudinary";
import { getCollection } from "astro:content";
const images = await getCollection("images");

console.log("Gallery", images);
---

<section class="web__version">
    <ul>
        {
            images.map((elem) => {
                return (
                    <li>
                        <CldImage
                            id="image-events"
                            src={elem.data.public_id}
                            width={elem.data.width}
                            height={elem.data.height}
                            alt="ok"
                        />
                    </li>
                );
            })
        }
    </ul>

</section>

I retrieve all the images, and it’s works fine, but when I delete some images, and I restart the project, all the images seems to be keeping in memory and stills appearing in my Gallery, even when the url in the src of the images is broken.

I have my collection configuration like this:

import { cldAssetsLoader } from 'astro-cloudinary/loaders';
import { defineCollection } from 'astro:content';

export const collections = {
    images: defineCollection({
      loader: cldAssetsLoader({
        folder: 'salem-uploads'
      })
    })
  }

I’m uncertain about how to retrieve all images correctly. I’ve conducted some tests, and it seems that if I upload a new photo and delete others, the deleted images remain in my gallery while the new ones also appear.

If I console the images object, appears in console all the images and the urls seems to be broken, except for the photos that actually exists in my Cloudinary library.

i have developed a scientific calculator using javaScript with no eval but now i am facing issues of the DMAS rule method as i do not know how to implement it in the calculator so kindly help me solve this issue

i want to know how to implement the DMAS rule for calculator.

I’m querying a Searchkick endpoint where I want to find all results where a field is nil.

The query in the console

Product.search('*', where: { category_id: nil })

correctly returns results.

When passed from the client nil, null and all others are interpreted as strings so my query becomes

Product.search('*', where: { category_id: 'nil' })

Is there a rails way or a specific encoding to use for query strings to allow it to be correctly parsed as nil without diving into the params hash and searching for strings?

Trying to develop a full stack app with a python backend that runs langgraph. I’m using Remix as the JavaScript framework, and I’m not sure how to structure the app to connect to the python backend. My plan is to use FastAPI as a service, but I’m confused on how to add it to the project structure. Any help would be much appreciated.

I’m working on an Addin for Powerpoint and I’m having some problems with context.sync() and I Don’t understand why.

A little explanation of what I want to do: With a function I have created an image and inserted it in my slide. At some point, I want to replace the image I’ve created with a new one. To identify the image I put it a name. So I find the old image, get it’s position, create the new image at same position, remove the old image and set the name to the image. But when I remove the old one, I have to sync the context and sometime the function just never end. It looked like stopped, and no error is throw.

There is the code I’m working on:

/*
* Function to add the image in the slide    
* https://learn.microsoft.com/en-us/office/dev/add-ins/develop/read-and-write-data-to-the-active-selection-in-a-document-or-spreadsheet
* @param {string} image The string image code to create
* @param {{left:number,top:number}} position The position of the image
* @returns {Promise<boolean>}
*/
async function importImage(
    image: string,
    position: {
        left: number,
        top: number
    },
) {
    return new Promise((resolve, reject) => {
        Office.context.document.setSelectedDataAsync(
            image,
            {
                coercionType: Office.CoercionType.Image,
                imageLeft: position.left,
                imageTop: position.top,
            },
            (result) => {
                if (result.status === Office.AsyncResultStatus.Failed) {
                    return reject(result.error.message)
                }

                return resolve(true)
            })
    })
}

/**
* Function to replace the image with id given id
* @param {string} uuid The id of the image to replace. If no shape with this name, the image will not be created
* @param {string} image The code of the image
* @returns {Promise<boolean>}
*/
async function replaceImage(
    uuid: string,
    image: string
): Promise<boolean> {
    if (!Office.context.document) throw new Error('Can't get context of Office Document')

    return PowerPoint.run(async (context) => {
        // Get the current slide
        let slides = context.presentation.getSelectedSlides()
        let currentSlide = slides.getItemAt(0)
        currentSlide.load('shapes, shapes/name')
        await context.sync()

        // Get the shape to update
        const shape = currentSlide.shapes.items.find(shape => {
            return shape.name === uuid
        })

        if(!shape) return Promise.resolve(false)

        // Load position of the shape to replace
        shape.load('left, top')
        await context.sync()

        // Create the new image and remove the old one
        await importImage(image, {left: shape.left, top: shape.top })
        shape.delete()

        // ! Problem here. Sometimes it just never end
        // The new shape is Added and old one deleted
        // but haven't set the name yet so if want to replace it again I can't.
        await context.sync()

        // get again all shapes
        slides = context.presentation.getSelectedSlides()
        currentSlide = slides.getItemAt(0)
        currentSlide.load('items')
        await context.sync()

        // The new one is the last in the currenSlide
        const newShape = currentSlide.shapes.items[currentSlide.shapes.items.length - 1]
        // Set the name to get it again if I want
        newShape.name = uuid

        await context.sync()

        return Promise.resolve(true)
    }).catch((error) => {
        console.error(error)
        return Promise.resolve(false)
    })
}

I Don’t know why but after the shape.delete(), the await context.sync() struggle. It just never end and so my function never return anything. And I’ve check, no error is throw. All is stopped and I Don’t get why. I hope someone could help me!

Thank’s in advance!

I am a student, and I am doing a project for school.
While I was working on it, I encountered a problem and discovered something weird.

I needed to check if a something is null or a empty string, but for some reason it didn’t work.
Here’s the code snippet:
if(!data.data == null && !data.data == 'null' && !data.data == ''){ // Some code here... }

It didn’t work, so I tried this:

console.log(!data.data == null)
console.log(!data.data == 'null')
console.log(!data.data == '')

and when the data.data wasn’t empty, the output was this:Console output: false false true

So i change it to:

console.log(data.data == null)
console.log(data.data == 'null')
console.log(data.data == '')

(the data.data value is the same)
the output changed to this:Console output: false false false

So I tried to test this in consoleJavascript console

Here’s it copied:

var data = 'aaa'
console.log(data)
aaa
console.log(data == null)
false
console.log(!data == null)
false
console.log(!data == '')
true
console.log(data == '')
false
console.log(!data === null)
false
console.log(data === null)
false
data = null
null
console.log(data === null)
true
console.log(!data === null)

So the question is, When the value is not null, why does it always output false, even when I negate it, but when the value is null, negating it works?

PS: I am sorry if this is a stupid question, or not too clear, but I am not that good, and really confused right now

I am trying to create an envelope distortion effect in HTML5 Canvas, similar to the effect seen in image manipulation software like Photoshop. The idea is to warp text based on a set of control points, and I want to apply this effect dynamically to various text objects.

Here is an example of the effect I am trying to achieve:

In the image, you can see that the word “WORD” is distorted according to an irregular quadrilateral shape. The top word remains unaffected, while the bottom word is warped. I’m looking to implement this type of transformation on text within HTML5 Canvas.

I’m new to JS, jQuery, Foundation, Abide. (I speak a little bit PHP.)

I’m trying to implement a uniqueValidator in Abide. When I try to follow the documentation that says:

Just add foundation.abide.js AFTER the foundation.js file.

When I do so, the console says: foundation.abide.js is not found. After long search I find at https://cdnjs.com/libraries/foundation a link only to foundation.abide.min.js

Is the documentation wrong, or do we need foundation.abide.js at all?

I have managed to implement a unique validator using an alert, but I would like to show the error message the way the normal Abide validation shows, directly at the fields.

I have tried it in many different ways, unfortunately none of them seems to be working.

So there is a simple form with some fields, and with a button we can clone the row, and we have more item fields. I want to make sure that no item field has the same value as another, and in case, show the Abide error at the fields themselves.

My last try:

<script>
function uniqueItemValidator($el, required, parent) {
    let newItemValue = $el.val();
    let isUnique = true;

    $('.item').not($el).each(function() {
        if ($(this).val() === newItemValue) {
            isUnique = false;
        }
    });
}

$(document).foundation();
...

$('#form').on('submit', function (event) {
    ...
    $('.item').foundation('uniqueItemValidator', $el, required, parent);
    ...
});
<script>

and the console says:

Uncaught TypeError: _this7.options.validator[v] is not a function

and that leads to endless depths of the net.

UPDATE: I have found foundation.abide.js after clicking on Some files are hidden, click to show all files at https://cdnjs.com/libraries/foundation

now after adding it to the code I’m getting:

Uncaught TypeError: Cannot read properties of undefined (reading ‘Plugin’)

I have a Primevue Select element in my Nuxt3/Vue3 app.
I want to change the selected option programatically, but I can’t find information on how to do that. There is not “.value” I can set.

This is my element:

              <Select id="Gage" v-model="selectedGageValue" filter :options="getGageOptionsList" optionLabel="name"
            optionValue="description" placeholder=" ... " :virtualScrollerOptions="{ itemSize: 50 }"
            @change="onGageSelectionChange" class=""></Select>

friends. Using Google Apps Script, I created a system that creates a Google document and a PDF document from the data entered in a Google table. I need to make it so that after the PDF document is created, it is sent via a link to a webhook. I implemented this through a method ‘UrlFetchApp.fetch’, but when I enter data into the table and run the script, nothing works with this method, even documents do not want to be created. I tried everything possible, nothing works, please help.

const pdfBlob = DriveApp.getFileById(copy.getId()).getAs('application/pdf');
  const pdfFile = destinationFolder.createFile(pdfBlob);
  pdfFile.setName(`Document ${rowData[3]} ${rowData[4]} ${rowData[5]}.pdf`);

  const docUrl = doc.getUrl();
  const pdfUrl = pdfFile.getUrl();

  sheet.getRange(row, 14).setValue(docUrl);
  sheet.getRange(row, 15).setValue(pdfUrl);

  const webhookUrl = 'https://webhook.site/cef34a00-844b-4f51-8c72-dae4bcf79239';
  const fileBlob = pdfBlob.getBlob();

  var options = {
    method: 'post',
    contentType: 'application/pdf',
    payload: fileBlob.getBytes(),
    //payload: pdfBlob.getBytes() //also doesnt work
    muteHttpExceptions: true
  };

  try {
    var response = UrlFetchApp.fetch(webhookUrl, options);
    Logger.log('Response code: ' + response.getResponseCode());
    Logger.log('Response content: ' + response.getContentText());
  } catch (error) {
    Logger.log('Error: ' + error.message);
  }

The issue i am facing is the i don’t seem to find any information about deselect the default date(current day).

flatpickr("#datepicker", {
    defaultDate: '',
    dateFormat: "d-m-Y H:i",
    enableTime: true,
    open: true,
    inline: true,
    minDate: "today",
});

I try to use the “defaultDate” as many examples in the web but nothing seems to work. I have not find any information in the documentation except “defaultDate”.

I try as well to use onChange , onReady and onOpen nothing seems to work.

 onChange: function(selectedDates, dateStr, instance) {
                    instance.clear(); 

Why does the browser does not show the tests which i tested

on my html I loaded the script type but the browser still showed a blank page and yet i have done all the imports .I loaded this on my html

  <script src="utilities/currencyTest.js" type="module"></script>
and this was my tests import { modifyCents } from "../../functs/utilities/currency.js";

describe("test suite:modifyCents", () => {
  it("converts cents into dollars", () => {
    expect(modifyCents(2095)).toEqual("20.95");
  });
});

I have an e-commerce page, in the page I have multiple forms each with a different name and id but every button has the same id and name., e.g;

<form method="post" name="form12345" id="form12345" action="..."> 
    <input type="button" class="btn-BuyOff" value="Acquista" id="addtocart" name="addtocart">
</form>

How can I modify the visibility of the button in a specific form using the instruction in Javascript:

document.getElementById('addtocart').style.visibility = 'hidden';

the code above modify only the first button in the page, I need to address a specific button in the page.

Note: I can not modify the id or name of the buttons because the original code is automatically generate by the e-commerce.

Example:

<form name="form1" id="form1">
    form content
    <input type="button" name="addtocart" id="addtocart">
</form>
<form name="form2" id="form2">
    form content
    <input type="button" name="addtocart" id="addtocart">
</form>
<form name="form3" id="form3">
    form content
    <input type="button" name="addtocart" id="addtocart"> // this is the button to hide
</form>
<form name="form4" id="form4">
    form content
    <input type="button" name="addtocart" id="addtocart">
</form>

I need to get rid of hidden HTML elements in widgets that are generated by the CMS my agency is using (Duda CMS). They get loaded in even if they have no values assigned (like empty h3s for images in the gallery widget, which is terrible for SEO obviously)…

I tried to remove them with JavaScript (element.remove();), but that didn’t work out.
Also this method would be useless from an SEO-perspective anyways bc if I got this correctly JavaScript can only handle elements that are already loaded right?

I checked the code in the backend so maybe I can intercept the source but there are just a bunch of divs with data-binding-metadata filled with random numbers. So editing it out there is no option as well…

My question is: Is there a way to inspect the mechanisms of the elements being generated in the code in the inspector so I can understand the source better and maybe intercept it?

Or is there a method to prevent it from being loaded at all?

Here’s an example of unused “hidden” gallery rows I want to get rid of:

<div class="photogallery-row" data-index="0">...</div>
<div class="photogallery-row photogallery-hidden-row" data-index="1">...</div>
<div class="photogallery-row photogallery-hidden-row" data-index="2">...</div>
<div class="photogallery-row photogallery-hidden-row" data-index="3">...</div>
<div class="photogallery-row photogallery-hidden-row" data-index="4">...</div>
<div class="photogallery-row photogallery-hidden-row" data-index="5">...</div>