Category: javascript

In my tracker sheet, I have a column titled: Completion Date.
Now my employees are changing this date and I want to track how many times the dates have been revised for a particular task.
I guess AppScript can be used here to track this, I’m not handy with it please help here.

Couldn’t try as I’m not handy with AppScript

So I want to create a grid layout which looks something like this Desired Layout. So all of the data inside each box of the image is dynamic so i am not sure about the size of every box. I am using tailwind css and plain HTML, CSS, JS.

I am creating a parent with class = grid grid-cols-3 and very column has a class = col-span-1. With this the body is evenly divided into 3 columns but the box of the next line is starting from the end of the longest element of the previous line, i.e. each row height is determined by the longest box of that row. So this is how it is turning out to beActual layout. I can use class = row-span-2 at the longest box but as said I don’t know what will be the size of each box so I cant use class = row-span-2.
Here is what I have. Please assume Box x has all the html and css code for that desired box.

<div class=" grid grid-cols-3 m-12 gap-12 justify-center">
    <div id="post" class="max-h-fit h-fit rounded-xl overflow-hidden">
        <Box 1/>
    </div>
    <div id="post2" class="max-h-fit h-fit rounded-xl overflow-hidden">
        <Box 2/>
    </div>
    <div id="post3" class="max-h-fit h-fit rounded-xl overflow-hidden">
        <Box 3/>
    </div>
    <div id="post4" class="max-h-fit h-fit rounded-xl overflow-hidden">
        <Box 4/>
    </div>
    <div id="post5" class="max-h-fit h-fit rounded-xl overflow-hidden">
        <Box 5/>
    </div>
    <div id="pos6t" class="max-h-fit h-fit rounded-xl overflow-hidden">
        <Box 6/>
    </div>
</div>

Looking for a regex to select a string that starts with http and ends with apostrophe ' but last characters of the selection does not have characters href=

Given the string below

:a[http://www.test.com/AXYWINBO-Dinnerwaredp/B09ZDR4T67/ref=sr_1_1]{href='http://www.test.com/AXY-Piece-Modern-/dest/B09ZDR4T67/ref=sr_1_1' target='_blank' rel='noreferrer noopener'}

I am using this regex – http://www.test.com/S[^']+

I am getting 2 matches http://www.test.com/AXYWINBO-Dinnerwaredp/B09ZDR4T67/ref=sr_1_1]{href= and http://www.test.com/AXY-Piece-Modern-/dest/B09ZDR4T67/ref=sr_1_1

I only want to select the second match but not the first as the first one contains href= before apostrophe.

Thanks folks

I’m learning web development, frontend and backend, please don’t be rude with me.

I found about Bootstrap CSS framework, but I quickly figure out that if I start relying on Bootstrap too much, then the websites will look all the same, or quite “generic”. and the code (please correct me if I’m wrong here) will be too bloated and unoptimized if I just use the templates, and I also LOVE coding and creating stuff from scratch, this introduction leads to my question itself which would be: What’s a good or optimal way to use Bootstrap?, without bloating my code and making the websites look generic?, in a way that it is both a shortcut-help but not too intrusive

What if I use Bootstrap as a shortcut to create stuff like, navbars, headers, or banners and then modify them as I seem them fit?, could this be a good approach without making the WHOLE website be a cookie cutter of Bootstrap, maybe I’m just being dumb, please correct me if I’m mistaken!

[This is the design][1]
[1]: https://i.stack.imgur.com/kuASw.png
When I click on the remove button, the item is not removed. But when I click on the remove button hold it and drag the grid item it works and the item is removed. I want the item to be removed when I click on the remove button.

import React, { useState } from "react";
>     import GridLayout from "react-grid-layout";
>     import { times, reject } from "lodash";
> 
>    
>     const Grid = () => {
>       const length = 5;
>       const [items, setItems] = useState(
>         times(length)?.map((i, key) => ({
>           i: key.toString(),
>           layout: {
>             x: i * 2,
>             y: 0,
>             w: 2,
>             h: 2,
>           },
>         }))
>       );
> 
>       const onRemoveItem = (id, e) => {
>         console.log("on remove:", id);
>         setItems(reject(items, { i: id }));
>       };
>       const onAddNewItem = () => {
>         const id = items?.length;
>         const newItem = {
>           i: id.toString(),
>           layout: {
>             x: id * 2,
>             y: 0,
>             w: 2,
>             h: 2,
>           },
>         };
>         setItems([...items, newItem]);
>       };
>     
>       return (
>         <div>
>           <button onClick={onAddNewItem}>Add New</button>
>           <GridLayout className="layout" cols={12} rowHeight={30} width={1200}>
>             {items?.map((item, index) => (
>               <div
>                 key={item?.i}
>                 data-grid={item?.layout}
>                 className="bg-red-500"
>                 onClick={(e) => {
>                   e.stopPropagation();
>                   console.log("grid");
>                 }}
>               >
>                 <div>
>                   <button onClick={(e) => onRemoveItem(item?.i, e)}>Remove</button>
>                 </div>
>               </div>
>             ))}
>           </GridLayout>
>         </div>
>       );
>     };
>     
>     export default Grid;

I am building a website using Astro in which i share database data in many different pages. I have a members.json.ts file in the project root from which i then fetch data as such:

let response = await fetch(`${Astro.url.origin}/members.json`)
let data: any = await response.json();

I can’t seem to find anything about build order in the Astro documentation. Is there any way i can ensure that my members.json.ts file has finished building when i fetch the data from each page? Or is there any other preferred way of doing this?

I have noticed some tiny compression after using canvas and javascript to process the image.

The left side is processed and the right side is raw, they are both in jpeg format. What I do is load the raw image to canvas then read data from the canvas and save it as a file.

I need to make some edits to the image like adding a watermark. Currently, I’m using canvas but my project is sensitive to image quality, so I tried to avoid any unexpected compression.

I’m looking for a method that can avoid this kind of compression. My project is mainly written in JavaScript, so having a solution based on JS would be the best option (frontend solutions and serverside solutions are both ok for me).

THANKS.

I had installed the react-native-razorpay package using

$ npm i react-native-razorpay –save

I have imported the RazorpayCheckout on the top:

import RazorpayCheckout from “react-native-razorpay”;

then I have created a function named paymentRazor, which has been called to an onPress functionality of a button.

var options = {
          "description": 'Payment for XYZ',
          image: 'https://imgur.com/3g7nmJC',
          "currency": 'INR',
          "key": 'API_KEY',
          "amount": amount, 
          "name": 'PAYMENT',
          "payment receipt": customer_code,
          "order_id": orderid,
          "prefill": {
            "email": '[email protected]',
            "contact": '9999999999',
            "name": 'John Doe',
          },
          "theme": { "color": '#F37254' },
          "notes": {
            "address": "Razorpay Corporate Office",
            "customer_code": customer_code
          },
        };
        console.log(options);
        RazorpayCheckout.open(options)
        .then((data) => {
          console.log(`Success: ${data}`);
        }).catch((error) => {
          console.log(`Error: ${error} | ${error}`);
        });

Error: TypeError: Cannot read property ‘open’ of null | TypeError: Cannot read property ‘open’ of null

I’m trying to take a screenshot of my vue app using html2canvas. My code is running correctly but my screenshot have weird padding/margin on the text.

"vue": "^3.4.21"
"html2canvas": "^1.4.1"

Here’s my code:

html2canvas(document.body, {
      width: 400,
      height: 200,
    }).then((canvas) => {
      document.body.appendChild(canvas);
    });

What the part screenshot look like in my app

Result

I’m using brave, but same issue on safari and chrome.

i need to change pagelanguage of google translate element. For example :

<div id="google_translate_element"></div>

<script type="text/javascript">
    function googleTranslateElementInit() {
        new google.translate.TranslateElement({pageLanguage: 'en'},'google_translate_element');
    }
</script>

<script type="text/javascript" src="//translate.google.com/translate_a/element.js?cb=googleTranslateElementInit"></script>

As you see here the pagelanguage of the translateElement is english. How can i change it to something else in the project.

I’m working on a project where I need to serve a React component (plugin.js) from an HTTP server (e.g., http://example.com) and then use this component inside another React application.

The goal is to load and integrate the plugin.js file dynamically into my React app as a plugin or external module. However, I’m encountering some errors while attempting this integration.

Has anyone successfully implemented this kind of setup before? I would appreciate any guidance, tips, or examples on how to serve and use a React component from an external HTTP server within a React application.

Thank you!

I am currently facing the following problem:

I have a table component (consisting of CustomBody, CustomHead etc.)

Dummy markup:

<custom-table>
    <custom-table-head>
        ....
    </custom-table-head>
    <custom-table-body>
        <SLOT>
            <custom-table-row>
                <custom-table-cell></custom-table-cell>
                ....
                <custom-table-cell></custom-table-cell>
            <custom-table-row>
        </SLOT>
    </custom-table-body>
</custom-table>

The slot in custom-table-body is filled with custom-table-rows.
The content of the slot is written to a state and should be output in the template without a wrapper div.

    @Element() host: HTMLElement;

    @State() private rows = [];

    private onSlotChange(event: Event) {
        const slot = event.target as HTMLSlotElement;
        const elements = slot.assignedElements();

        for (const foo of elements) {
            this.rows = [...this.rows, foo];
        }
    }

    render() {
        return (
            <Host role="rowgroup">
                <slot onSlotchange={(e) => this.onSlotChange(e)} />
                {this.rows.map((item) => item)} <-- Should render content of this.rows as Element 
            </Host>
        );
    }

Unfortunately I only get undefined output, does anyone know how to render native nodes in JSX/TSX correctly?

I’m using Javascript. I have following example texts:
Asperges – Glo. - 2a S. Simeonis. 3a A cunctis - Tractus (longior!) - Cre. - Praef. de quadr.

I want to remove a text between the first number and the following dash, i.e. this:
2a S. Simeonis. 3a A cunctis -

So I’m using this RegEx:
var.replace(/2.* -/,"");
But for some reason, it doesn’t really work. Well, it kind of does, but it chews out a much larger portion of the above mentioned chain, it ends at the last and not first dash (-)…

Could someone help me to change it, so it works as it’s intended to?
Thanks a lot!

postman stuck at sending request
while i try to get video comments postman is stuck on sending request,
related code :
getVideoComments
this is code to fetch video comments.
i should clarify that all routes are set perfectly and there video exist in db with associated comments

plz correct me.

thanks in advance

the getVideoComment function should return
cosole.log(comments)

I have understood that in Angular 17 there is a tendency not to use modules even if they still exist and to make applications exclusively with Standalone components, so it is more similar to Vuejs or React where there is no module in the concept. Additionally, a component
Standalone in the compilation, it seems that the loading is more gradual and improves the performance of the Angular application, is this true?

My question is the following, is there a limit of Standalone components to use in a component?

For example in my component “app.component.ts” I have the following:

@Component({
  selector: 'app-root',
  standalone: true,
  imports: [RouterOutlet, NavbarComponent, ButtonsBarComponent, FooterComponent],
  templateUrl: './app.component.html',
  styleUrl: './app.component.scss'
})
export class AppComponent {
  title = 'front-end';

  constructor(private http: HttpClient) {

  }
}

In the array of the “imports” property, can I continue importing Standalone components or do Angular’s good practices impose any limits?

NOTE: If I do not create modules manually because I exclusively use Standalone components, it would be feasible to use library modules such as Angular Material to use its UI components.

Thank you,