I am working on a Chrome Extension that requires a background service-worker in javascript and I want to use Angular and typescript for the rest of the extension. The service-worker has to be a separate javascript file that is named in the Chrome Extension configuration.

Can somebody point me to how to call my Angular typescript code from the service-worker.js?

Thanks

I’m working with AgGrid, and I want to achieve the following column layout and behavior:

• Have a rowGroup on one column (e.g., “Category”)
• Then a regular column that shows the sum of Quantity (aggregated by the grouping)
• Then another rowGroup on a different column (e.g., “SubCategory”)
• Crucially, I want to keep the order of these columns as declared — so
  the first rowGroup stays where it is, the sum column stays in the
  middle, and the second rowGroup stays after it.
• I do not want the two rowGroups to be forced to the left side of the grid, as AgGrid
  normally moves grouped columns to the left automatically and hides
  the original grouped columns. Is there a way to configure AgGrid so
  that multiple rowGroups can be displayed inline in the grid without
  moving them to the left, and still be able to show an aggregation
  column like sum of Quantity between them?

Thanks in advance!

What is the best way to get code coverage for a service worker? I looked around for a while and it really seems like the only thing to do is instrument the service worker with istanbul. This is unchanged since 2018 (and before). That seems insane, like I must have missed something, but I can’t find it (yet).

Anyways, due to time constraints, I just ran with this technique and implemented it in my latest application reference, and integrated it with the reporting strategy. Here it is (link below) in case I didn’t miss something and it is helpful. I’m hoping the world of web development has NOT been stuck in this area for a ~decade.

https://github.com/localnerve/jam-build

If I did miss it, I would really appreciate someone letting me know.

Having coverage is key to give ppl the confidence in their tests. Tests give ppl confidence in solution paths, encouraging off-path exploration. Having a high barrier to service worker coverage is stifling independent service worker development/solutions, driving ppl to frameworks that dictate solution boundaries, and better web development in general, imo.

I have been trying to get access to an image I uploaded to Cloudinary and later made it restricted. The method I want to use is using it’s URL but for some reason no URL works and it’s documentation doesn’t mention how to get it using API key/Secret/token.
The URL will be in a React.JS img component (as will be in the code snippet).
so far I get 404 or 401 errors.

These are the code samples I use:

This is a function for the deployment server that supposed to get me the URL of the image.

const cloudinary = require("cloudinary").v2;

cloudinary.config({
  cloud_name: process.env.CLOUDINARY_CLOUD_NAME,
  api_key:    process.env.CLOUDINARY_API_KEY,
  api_secret: process.env.CLOUDINARY_API_SECRET,
  secure: true,
});

exports.handler = async (event, context) => {
  try {
    const { public_id } = JSON.parse(event.body || "{}");

    const url = cloudinary.url(public_id, {
      type: "authenticated",
      sign_url: true,
      transformation: [
        {
          width: 500,
          height: 500,
          crop: "fill",
          gravity: "auto",
          fetch_format: "auto",
          quality: "auto",
        },
      ],
    });

    return {
      statusCode: 200,
      body: JSON.stringify({ url }),
    };
  } catch (err) {
    return {
      statusCode: 500,
      body: JSON.stringify({ error: err.message }),
    };
  }
};

This is the code that create the img and return it:

import { AdvancedImage } from "@cloudinary/react";
import { useEffect, useState } from "react";

const SecureCloudinaryImage = () => {
  const [imgUrl, setImgUrl] = useState("");

  useEffect(() => {
    try{
    fetch("/.netlify/functions/<function_name_here>", {
      method: "POST",
      body: JSON.stringify({ public_id: "<img_name_goes_here>.jpg" }),
    })
      .then((res) => res.json())
      .then((data) => setImgUrl(data.url));
  }
  catch(err){
    console.log(err.message)
  }
  }, []);

  if (!imgUrl) return <p>Loading...</p>;

  return (
  <>
  {console.log("This is the url " + imgUrl)}
  <img src={imgUrl} alt="Profile not found" />
  </>);
};

export default SecureCloudinaryImage;

When I run this code the console.log("This is the url " + imgUrl) shows the URL so I know that the URL isn’t empty.
I tried to remove the “.jpg” from the image name extension but got 401 error.

for refference this is the URL structure:
https://res.cloudinary.com/<cloud_name>/image/authenticated/<string_created_by_code>/c_fill,f_auto,g_auto,h_500,q_auto,w_500/<img_name_goes_here>.jpg?_a=BAMAK+ZU0

I tried going over Cloudinary documentation but couldn’t find any good suggestion for how to do it with restricted image.

I’m trying the NPM canvas package (“node-canvas”) to draw an image inside a rectangle from Node.js, but when downscaling the image gets blinear/blurry.

I’m using [email protected].

const iconPath = path.resolve(iconsBaseDirectory, icon.source);
const image = await loadImage(fs.readFileSync(iconPath));
for (const size of sizes) {
    const canvas = createCanvas(size, size);
    const ctx = canvas.getContext("2d");
    ctx.imageSmoothingEnabled = true;
    ctx.quality = "best";
    if (icon.tile ?? true) {
        const marginX = 3;
        const marginY = 3;
        const tileWidth = size - 2*marginX;
        const tileHeight = size - 2*marginY;
        ctx.fillStyle = icon.color ?? this.defaultColor;
        ctx.fillRect(marginX, marginY, tileWidth, tileHeight);
        const tileIconSize =
            icon.size == "smaller" ? 0.6 :
            icon.size == "extraSmaller" ? 0.4 : 0.8;
        const tileIconWidth = tileWidth * tileIconSize;
        const tileIconHeight = tileHeight * tileIconSize;
        ctx.drawImage(image, marginX + tileWidth/2 - tileIconWidth/2, marginY + tileHeight/2 - tileIconHeight/2, tileIconWidth, tileIconHeight);
    } else {
        ctx.drawImage(image, 0, 0, size, size);
    }
    const buf = canvas.toBuffer("image/png");
    for (const dest1 of icon.dest) {
        const dest2 = path.resolve(outputDirectory, dest1.replace("{size}", size.toString()) + ".png");
        const p = path.resolve(dest2, "..");
        fs.mkdirSync(p, {
            recursive: true,
        });
        fs.writeFileSync(dest2, buf);
    }
}

I’ve tried other alternatives like sharp and skia-canvas.

I am building a website, where users can enter a stream URL (usually Icecast) to play on a custom device. Before trying to play it, I want to check whether the stream will be able to play on the device. To do that, I need to look at the HTTP headers of the stream, but when I try to make a request – it gets blocked by CORS policy.

I thought of using a proxy to send the request through my server, which avoids CORS and lets me inspect headers/bytes. But then requests come from my server’s IP — and that breaks for geo-blocked streams. For example, a US-only stream will appear “unplayable” if my server is outside the US, even though it would work for the user.

I also tried using the built-in Web Audio API, but it can only analyze audio data and doesn’t show me any useful information. And playing the stream in an audio tag can only tell me if the browser supports it, which is not useful to me.

What I’m trying to solve is this:

• Is there a browser-only way to get info about a stream (codec, protocol, format, etc.)?
• If using a proxy is unavoidable, what’s the best way to handle the geo-blocking problem?

I’ve developed an internal extension to be used by a small number of team members.
Due the usage, I often need to do updates to make members changes, disable members if in vacations or even change categories.

I though would be amazing if I could remotely edit a TXT file and make the extension read the TXT file based in the json/array in the file instead of hard coding it. With this idea, come new problems.

• It seems Chrome FileSystem API only allows files inside the extension folder. Than means every team member needed to update the text file each time there are changes;
• Can’t read the file directly by JS due CORS policy, using fetch ou XMLHttpReq;
• The new file system API isn’t possible to use without asking the user to select the file, which is almost the same as making an update every week or so;

I’m trying to figure a method where would be easy to edit those fields (mainly context menu items) without needing to hard code that and every week pack a new version of the extension.

I just need to read the file. I don’t need to write or create.
The file would be directly edited in the shared folder to be read by the extension.

Any suggestions in how I could achieve this in a Chrome Extension?
I’ve read the documentation but seems I can’t find a way to do it.

demo,
https://codepen.io/uxjzbmxq-the-sans/pen/KwdGJLm?editors=1111

the internet sends me to a link…
https://developer.chrome.com/blog/web-audio-faq
but there is a solution that is not on my topic

var auCtx = new AudioContext();

var source = auCtx.createBufferSource();

var gain = auCtx.createGain();

var osc = auCtx.createOscillator();

var dest = auCtx.destination;

....
sh it site...

*this text is written simply because this stupid site has too many requirements for questions on how to write a letter description here knocking millions of people every second now he told me that there is too little text, at least 220 characters are needed before that he told me that he doesn’t like an external link without code and more Earlier he told me that there is too much code in your text, add more

*

I want to scan wwwroot folder contents using GHAS for Azure DevOps in my Asp .Net Core MVC app.
I have a pipeline that looks as follows:

trigger: myBranch

pool:
  vmImage: 'windows-latest'

steps:
- checkout: self

- task: AdvancedSecurity-Codeql-Init@1
  inputs:
    languages: 'csharp, javascript'
    codeqlpathstoignore: 'bin,obj'
    codeqlpathstoinclude: 'wwwroot/js,wwwroot/lib'
  displayName: Initialize CodeQL
...
...
...

My question contains three parts:

1. Why GHAS does not scan wwwroot/js and wwwroot/lib folders?
2. If I add codeqlpathstoinclude property to the .yml file, does it exclude other default folders or it simply tells the code scanner to scan additional folders?
   By reading the official documentation about AdvancedSecurity-Codeql-Init@1, it is not quite clear to me, which of the above is correct: https://learn.microsoft.com/en-us/azure/devops/pipelines/tasks/reference/advanced-security-codeql-init-v1?view=azure-pipelines
3. The wwwroot/lib folder contains many old JS libraries. What would be the recommended way to manage library versions and keep them up to date (e.g., using npm or LibMan)?

Thank you in advance

Actually i am getting my content of this “import.meta.env” but not getting “import.meta.env.VITE_APPWRITE_URL” It come as undefined

This is a sample of my .ENV file

env file

VITE_APPWRITE_URL=https://cloud.appwrite.io/v1
VITE_APPWRITE_PROJECT_ID=6sjkfiownvklsnfiwj
VITE_APPWRITE_DATABASE_ID=6bdjkvnsknv
VITE_APPWRITE_COLLECTION_ID=mega-pro-collection
VITE_APPWRITE_BUCKET_ID=6bsjknselnrkn

I do console log but. It come as undefined.

console.log(import.meta.env);

const config = {
    appwriteUrl : import.meta.env.VITE_APPWRITE_URL,
    appwriteprojectId : (import.meta.env.VITE_APPWRITE_PROJECT_ID),
    appwritedatabaseId : (import.meta.env.VITE_APPWRITE_DATABASE_ID),
    appwritecollectionId : (import.meta.env.VITE_APPWRITE_COLLECTION_ID),
    appwritebucketId : (import.meta.env.VITE_APPWRITE_BUCKET_ID)
}
console.log(config.appwriteUrl);

export default config

i got error

Application error: a client-side exception has occurred

and in the browser console is like this

Uncaught SyntaxError: Unexpected token ‘<‘
ChunkLoadError: Loading chunk 9772 failed.

how to fix this? this error will happend after i update code and deploy to production

I’m making a call to an API and retrieving information in json format. I would like to use list.js for this data so I can implement pagination. I’m struggling to understand how to create a list and pass the json data as the values of this list.

I’ve been through the list.js documentation but I can’t find a clear answer that I’m able to understand.

I have a table with six tds and in it are approximately 7000 entries. The table is filtered by six input text boxes with
six javascript codes and each code containing the desired number of corresponding td such as (td = tr[i].getElementsByTagName(“td”)[0];),
(td = tr[i].getElementsByTagName(“td”)[1];), (td = tr[i].getElementsByTagName(“td”)[2];) etc etc. Due to presumeably many Script codes on the page,
the page becomes unresponsive and takes a longer time to become active. In order to avoid this problem, is it possible to filter the table
with only one input box instead of six input boxes but with an option box to enter the desired td number**[0]**, [1], [2], etc etc to filter the
data from the required td only. Thanks

<span style="Float:Left">Total/Searched:</span><div id="statistic" style="float: Left"></div>
<br><br><br>
 <input type="text" id="myInput" onkeyup="filterTable()"  onClick="filterTable()" placeholder="Search...">
    <table id="myTable">
      <thead>
        <tr>
          <th>Name</th>
          <th>Country</th>
          <th>City</th>
    <th>Street</th>
          <th>House No</th>
          <th>Neighbour</th>
        </tr>
      </thead>
      <tbody>
       <tr>

<td>Mario Resende</td>
<td>Argentina</td>
<td>Buenos Aires</td>
<td>Belgrano Calle</td>
<td>2:3</td>
<td>Cristina Rodriguez</td>
</tr>
<tr>

<td>Philips Douglas</td>
<td>United Kingdom</td>
<td>London</td>
<td>Oxford Avenue</td>
<td>17:25</td>
<td>Sophie Loren</td>
</tr>

<tr>

<td>Ramesh Bugatapa</td>
<td>India</td>
<td>New Delhi</td>
<td>Golochand road</td>
<td>1:2</td>
<td>Kiran Johr</td>
</tr>


</Table>


function filterTable() {
  var input, filter, table, tr, td, i, txtValue;
  input = document.getElementById("myInput");
  filter = input.value.toUpperCase();
  table = document.getElementById("myTable");
  tr = table.getElementsByTagName("tr");
   rowsFound =[];
  for (i = 0; i < tr.length; i++) {
    td = tr[i].getElementsByTagName("td")[4];
    if (td) {
      txtValue = td.textContent || td.innerText;
      // EDIT Check for match at beginning of string
      // if (txtValue.toUpperCase().indexOf(filter) > -1) {
      if (txtValue.toUpperCase().indexOf(filter) == 0) {
        tr[i].style.display = "";
    rowsFound.push(1)
      } else {
        tr[i].style.display = "none";
      }
    }
  }

There is a task: add an animation file to a Vue3 web application and embed a variable in a specific place in the animation. The variable is a changing number that should be bound to a specific visual element of the animation during playback (in my case, it’s a 2D sign that moves and shakes for 5 seconds). The variable should be part of the animation itself and move according to the movement of the element in the animation. What options are possible?

For WebP animation, how to determine the coordinates of a moving element to bind a variable to the element’s coordinates?
Are there other ways to embed a variable in an animation? Other animation formats or libraries that allow using variables in animations?

What am I missing here?
I am just trying to see if a file exists

xhttp.open("GET", "/file.ext", true);
xhttp.send();   
if (xhttp.status!=404) {alert("file found");} else {alert("file not found");};

I also thought about trying

xhttp.open("GET", "/file.ext", true);
catch(err);
alert(err.message);

but nothing happens