I am using Node.js v24.1.0 to execute a JavaScript file in Terminal on macOS Sonoma 14.7.7.

node javascript/FizzBuzz.js

I noticed that Node.js created package files and directories, and I am curious about how they are managed.

Package files:

package-lock.json
package.json

Package directories:

node_modules/ansi-regex
node_modules/prompt-sync
node_modules/strip-ansi

Based on the timestamps, I observed that package-lock.json and package.json do not update every time that I execute my JavaScript file with node.

Will Node.js update the package files and directories if I use a new package in my JavaScript file and then execute it?

I’m trying to build a simple isometric cube with pure HTML and CSS (no WebGL).

At some rotation/frame, some faces of the cube are not shown. They are in the DOM, and they don’t have any of these properties (visibillity: hidden or dislplay: none).

I think this is related to perspective: none;. But I need it isometric.

Is there a way to prevent faces from disappearing?

The slider is just for debugging. Normally it is an on scroll animation.

(() => {
  const onReady = (fn) => {
    const wait = () => (window.anime && document.readyState !== 'loading') ? fn() : setTimeout(wait, 40);
    wait();
  };

  onReady(() => {
    const stage = document.querySelector('.stage');
    const cube = stage.querySelector('#cube');
    const topFace = stage.querySelector('#top');
    const leftFace = stage.querySelector('#left');
    const rightFace = stage.querySelector('#right');
    const backFace = stage.querySelector('#back');
    const range = stage.querySelector('#progress');
    const out = stage.querySelector('#progressOut');

    if (!cube || !topFace || !leftFace || !rightFace || !backFace || !range) return;

    const getS = () => parseFloat(getComputedStyle(document.documentElement).getPropertyValue('--s')) || 280;
    const S = getS();
    const LIFT_PX = Math.round(S * 0.7);
    const FOLD_DEG = 90;

    topFace.style.setProperty('--lift-top', '0px');
    leftFace.style.setProperty('--fold-left', '0deg');
    rightFace.style.setProperty('--fold-right', '0deg');
    backFace.style.setProperty('--fold-back', '0deg');

    const makeVarTL = (el, name, from, to, unit, duration = 1000, easing = 'linear') => {
      const holder = {
        v: from
      };
      return anime.timeline({
          autoplay: false,
          duration,
          easing
        })
        .add({
          targets: holder,
          v: to,
          update: () => el.style.setProperty(name, holder.v + unit)
        });
    };

    const tlRotate = anime.timeline({
        autoplay: false,
        duration: 1600,
        easing: 'linear'
      })
      .add({
        targets: cube,
        rotateX: [0, 360],
        rotateY: [0, 360]
      });

    const tlTopLift = makeVarTL(topFace, '--lift-top', 0, LIFT_PX, 'px', 900);
    const tlLeft = makeVarTL(leftFace, '--fold-left', 0, -FOLD_DEG, 'deg', 700);
    const tlRight = makeVarTL(rightFace, '--fold-right', 0, FOLD_DEG, 'deg', 700);
    const tlBack = makeVarTL(backFace, '--fold-back', 0, FOLD_DEG, 'deg', 700);

    const seg = (g, a, b) => {
      if (g <= a) return 0;
      if (g >= b) return 1;
      return (g - a) / (b - a);
    };

    const seekAll = (g) => {
      const p1 = seg(g, 0.00, 0.25);
      const p2 = seg(g, 0.25, 0.50);
      const p3 = seg(g, 0.50, 0.75);
      const p4 = seg(g, 0.75, 1.00);

      tlRotate.seek(p1 * tlRotate.duration);
      tlTopLift.seek(p2 * tlTopLift.duration);
      tlLeft.seek(p3 * tlLeft.duration);
      tlRight.seek(p3 * tlRight.duration);
      tlBack.seek(p4 * tlBack.duration);
    };

    const onInput = () => {
      const g = (parseFloat(range.value) || 0) / 100;
      out.value = Math.round(g * 100) + '%';
      seekAll(g);
    };
    range.addEventListener('input', onInput);
    onInput();
  });
})();

:root {
  --s: min(20vmin, 340px);
  --isoX: -35.264deg;
  --isoY: 45deg;
  --lift-top: 0px;
  --fold-left: 0deg;
  --fold-right: 0deg;
  --fold-back: 0deg;
  --glass-rgb: 47 107 255;
  --glass-blur: 8px;
  --glass-sat: 160%;
  --glass-bright: 1.05;
}

.stage {
  width: 100%;
  height: 70vh;
  display: block;
  padding: 12px;
  box-sizing: border-box;
}

.controls {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 10px;
  font: 14px system-ui, sans-serif
}

.controls input[type="range"] {
  width: 320px
}

.cube-viewport {
  position: relative;
  width: 100%;
  height: calc(100% - 42px);
  overflow: visible;
  perspective: none;
}

.cube-camera {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  transform-style: preserve-3d;
  transform: rotateX(var(--isoX)) rotateY(var(--isoY));
}

.cube-world {
  position: relative;
  width: var(--s);
  height: var(--s);
  transform-style: preserve-3d;
}

.cube {
  position: absolute;
  inset: 0;
  transform-style: preserve-3d;
  will-change: transform;
}

.face {
  position: absolute;
  top: 50%;
  left: 50%;
  width: var(--s);
  height: var(--s);
  transform-origin: center;
  transform-style: preserve-3d;
  backface-visibility: hidden;
  border-radius: 12px;
  overflow: hidden;
  background:
    linear-gradient(135deg, rgb(var(--glass-rgb) / 0.22), rgb(var(--glass-rgb) / 0.08)),
    radial-gradient(120% 120% at 0% 0%, rgb(255 255 255 / 0.28), transparent 60%);
  backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-sat)) brightness(var(--glass-bright));
  box-shadow: 0 8px 24px rgb(0 0 0 / 0.28), inset 0 0 0 1px rgb(255 255 255 / 0.06);
}

.face::after {
  content: "";
  position: absolute;
  inset: 0;
  box-shadow: inset 0 0 0 1px rgb(255 255 255 / 0.06);
  pointer-events: none;
}

/* Face-Positionen */
#right {
  transform: translate(-50%, -50%) rotateY(-90deg) translateZ(calc(var(--s) * -0.5)) rotateX(var(--fold-right));
  transform-origin: 50% 100% 0;
}

#left {
  transform: translate(-50%, -50%) rotateY(-90deg) translateZ(calc(var(--s) * 0.5)) rotateX(var(--fold-left));
  transform-origin: 50% 100% 0;
}

#top {
  transform: translate(-50%, -50%) rotateX(90deg) translateZ(calc(var(--s) * 0.5 + var(--lift-top)));
}

#bottom {
  transform: translate(-50%, -50%) rotateX(90deg) translateZ(calc(var(--s) * -0.5));
}

#back {
  transform: translate(-50%, -50%) rotateX(0deg) translateZ(calc(var(--s) * -0.5)) rotateX(var(--fold-back));
  transform-origin: 50% 100% 0;
}

<main class="stage">
  <div class="controls">
    <label for="progress">Progress</label>
    <input id="progress" type="range" min="0" max="100" value="0" step="0.1" />
    <output id="progressOut">0%</output>
  </div>

  <div class="cube-viewport">
    <div class="cube-camera">
      <div class="cube-world">
        <div class="cube" id="cube">
          <div id="top" class="face">
            <div class="face-inner"></div>
          </div>
          <div id="bottom" class="face">
            <div class="face-inner"></div>
          </div>
          <div id="left" class="face">
            <div class="face-inner"></div>
          </div>
          <div id="right" class="face">
            <div class="face-inner"></div>
          </div>
          <div id="back" class="face">
            <div class="face-inner"></div>
          </div>
        </div>
      </div>
    </div>
  </div>
</main>

<!-- anime.js -->
<script src="https://unpkg.com/[email protected]/lib/anime.min.js"></script>

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