Category: javascript

i want to download all images of my steam screenshot page https://steamcommunity.com/id/Moerderhoschi/screenshots and i have the following approach.

in my webbrowser i went to my screenshot page and then hit F12 and enter the following code in the console

document.querySelectorAll('a').forEach(link =>
{
    if (link.href.includes("steamcommunity.com/sharedfiles/filedetails/?id="))
    {
        fetch(link.href)
        .then(response => {return response.text();})
        .then(html =>
        {
            let parser = new DOMParser();
            let doc = parser.parseFromString(html, 'text/html');
            doc.querySelectorAll('a').forEach(link =>
            {
                if (link.href.includes("images.steamusercontent.com/ugc/"))
                {
                    link.download = "image.jpg";
                    link.click();
                }
            });
        })
        
        .catch(error =>
        {
            console.error('error cal site:', error);
        });
    }
});

but it wont download the screenshots, i can open the screenshot site with window.open(link.href, “_self”); but then i have to manual download it but i want it automated for every screenshot i parsed on the site.

example screenshot it would open with window.open(link.href, “_self”);
https://images.steamusercontent.com/ugc/32194756041691484/DED70A2DFD08E6E10564A15949C7BEF5A685E41E/

Why is my position_1 not defined in the loop but it is in the menu_position object and it is also in the normal alert call. What’s wrong here? I ran this code in FireFox if that makes any difference

let position_Name = prompt('Enter position name please', 'Coffee');
let price = prompt('Enter price on this position', '3$');


let menu_position = {
    position_1: {
        position_Name,
        price
    }

};
alert(menu_position.position_1.price);
let position_Name2 = prompt('Enter position name please', 'Steak');
let price2 = prompt('Enter price on this position please', '10$');

menu_position.position_2 = {position_Name2, price2};

let question = prompt('Select position please (position_1, position_2)', 'position_1');

alert(menu_position.position_1.position_Name)
if (question == position_1){
    alert(menu_position.position_1.position_Name)
}

Can we import from CommonJS modules in Node now using ESM import syntax?

So if commonjsmodule is a cjs module that exports like this:

exports.add = function() {...}

Can we import from it like this assuming that we are working within ESM?

import { add } from "commonjsmodule";

In this YouTube video the author is demoing the type property and what it does in package.json.

And he does it by creating one cjs file and one mjs file and an app and in the app he’s importing from both using ESM import syntax, and I just assumed that additional tooling would be needed for the cjs file.

I have a list of objects like so

[
  { id: 0, color: 'yellow', fruit: 'banana', },
  { id: 1, color: 'yellow', fruit: 'lemon', },
  { id: 2, color: 'green', fruit: 'lime', },
  { id: 3, color: 'green', fruit: 'grape', },
  { id: 4, color: 'green', fruit: 'avocado', },
  { id: 5, color: 'red', fruit: 'apple', },
  { id: 6, color: 'red', fruit: 'cherry', },
  { id: 7, color: 'red', fruit: 'strawberry', },
  { id: 8, color: 'orange', fruit: 'orange', },
  ...
]

I want two material-ui autocompletes, one on color, the other on fruit.
But the first, I want to have only unique values for color.
Ie, my autocomplete options would include “all” of the values in the json object but it’d only show the unique values for “color”.

Ie, it’d only show ['yellow', 'green', 'red', 'orange'] for options, but behind the scenes, all of the options would be available.

Then in the second autocomplete would be all my fruit. Because they’re all unique, they would all appear. But the two autocompletes would share the same “options” (being the array above).

Then for their values, when I pick “yellow” in the first autocomplete, my “selected” would be (from the above array)

[
  { id: 0, color: 'yellow', fruit: 'banana', },
  { id: 1, color: 'yellow', fruit: 'lemon', },
]

And in my first autocomplete would be only the value “yellow” and in my second autocomplete would be the two values “banana” and “lemon”.

If I removed “lemon” from my second autocomplete, the first autocomplete would still have “yellow” but the second would only have “banana”. And my expected values would now be

[
  { id: 0, color: 'yellow', fruit: 'banana', },
]

Then, if I picked “green” from my first autocomplete, the values would then be

[
  { id: 0, color: 'yellow', fruit: 'banana', },
  { id: 2, color: 'green', fruit: 'lime', },
  { id: 3, color: 'green', fruit: 'grape', },
  { id: 4, color: 'green', fruit: 'avocado', },
]

What would be the most elegant way to go about accomplishing this?

estou começando os estudos em engenharia de software, estou desenvolvendo um site e decidi usar no FRONTEND html, css e JavaScript puro, porém o conteúdo dela é dinâmico e uma API é responsável por alimentar ela. mas algo está me incomodando. se vc inspecionar o código fonte você verá os endpoonts da minha api, msm que as rotas POST estejam protegidas queria proteger elas, mas não sei como. Alguma sugestão????

I am using opentypejs in order to try and fetch specific fonts on my local server (localhost) to iterate through the glyphs for each font.

I have a codesandbox which is throwing an error:

Unsupported OpenType signature <!do

Not something I see in localhost which is making me think on codesandbox I need to be more explicit about headers, mime types etc.

Here is my basic code:

import opentype from "opentype.js";
const htmlElem = document.querySelector("html");

const fontPath = "./resources";

const options = {
  headers: {
    "Content-Type": "application/x-font-opentype",
  },
};

const fontMap = (fontName) => {
  const url = `${fontPath}/${fontName}`;
  const buffer = fetch(url, options).then((res) => res.arrayBuffer());

  buffer.then((data) => {
    const wrapper = htmlElem.querySelector(".characters ul");
    const font = opentype.parse(data);
    const glyphs = font.glyphs.glyphs;
    for (const [key, value] of Object.entries(glyphs)) {
      if (value.name !== null) {
        const template = `<li>${value.name}</li>`;
        wrapper.insertAdjacentHTML("beforeend", template);
        console.log(value);
      }
    }
  });
};

setTimeout(() => {
  fontMap("LoRes-Bold.otf");
}, 300);

It looks like the error is thrown here:

const font = opentype.parse(data);

Initially I wasn’t passing any options to the fetch function, but I tried adding

const options = {
  headers: {
    "Content-Type": "application/x-font-opentype",
  },
};

But I also had to double check on the correct mime type, and have seen font/opentype,font/otf and other variants (none have worked). I have also tried uploading different font files, but that is definitely not the issue.

Does anyone have any idea what might be happening? Hopefully the codesandbox has everything that is needed.

I use Firebase to synchronize all the users, but somehow my popup showed up when I refresh the page. It should be shown when the spin stops.

When I trigger the spin I reset the result as false first

 // Function to trigger the spin in Firebase

function triggerSpinInFirebase() {
  set(ref(database, 'spin-result'), { won: false });  // Reset result first  
  const spinAngle = Math.random() * 360;  
  set(ref(database, 'spin-status'), {
    isSpinning: true,
    spinAngle: spinAngle,
    currentSpinTime: 10  
  });
}

and then I store the result to Firebase and call the popup function after spin

function storeSpinResultInFirebase(result) {
  set(ref(database, 'spin-result'), {
    label: result.label,
    won: true,  // Ensure the spin result is stored properly
  });
}

const resultRef = ref(database, 'spin-result');
onValue(resultRef, (snapshot) => {
  const result = snapshot.val();
  if (result && result.won) {  
    showPopup(result);
  }
});

I have a project I am working on where we are creating standalone javascript files that will get injected into a web page to execute a command. Each script is injected at runtime and called as though it is part of a function. So for instance one file might be a command to run a search on google.com where the command will first select the input field, then set the value, then click the submit button, etc.. These scripts do a variety of things each unique to the page they are going to be injected into.

Each script generally returns a boolean to indicate if the script worked successfully or not. The scripts are written in javascript, but I am looking to improve the readability of these scripts as they can become quite large and would like to move to typescript.

I have currently been exploring using esbuild to compile each typescript file and generate a corresponding javascript file. While this has worked with mostly no issues, I am struggling with how a typescript file can have a return statement without the compiler saying, A 'return' statement can only be used within a function body.ts(1108)

A simple example typescript file could be:

const input document.querySelector('someSelector');
input.value = "someValue";

return true;

When injected into a page it is done like this:

const scriptToInject = loadScript('someScript');
const globalVars = {};

const AsyncFunction = Object.getPrototypeOf(async function(){}).constructor;
const func = new AsyncFunction(globalVars, codeToRun);
const codeResult = await func(globalVars );

People suggested.scrollHeight but it only stores the height of an element, not actual scrollHeight. Im not sure if thats even possible

I am tried to add subdocument https://docs.yjs.dev/api/subdocuments in the yjs sync server side code. when I tried to read content from uint8array like this(this code come from this discuss https://discuss.yjs.dev/t/extend-y-websocket-provider-to-support-sub-docs-synchronization-in-one-websocket-connection/1294):

const preHandleSubDoc = (
  message: Uint8Array,
  conn: Socket,
  targetDoc: WSSharedDoc,
  doc: WSSharedDoc
) => {
  try {
    const subDocDecoder = decoding.createDecoder(message);
    const subDocMessageType: number = decoding.readVarUint(subDocDecoder);
    const docGuid = decoding.readVarString(subDocDecoder);
    if (docGuid !== doc.name) {
      logger.warn(
        "this is an subdocument,subDocMessageType:" +
          subDocMessageType +
          ",doc guid:" +
          docGuid
      );
      handleSubDoc(targetDoc, docGuid, conn, doc);
    }
  } catch (err) {
    logger.error(
      "handle sub doc facing issue" +
        ", msg: " +
        Buffer.from(message).toString("base64"),
      err
    );
  }
};

shows error The encoded data was not valid for encoding utf-8:

// @ts-ignore
import encoding from "lib0/dist/encoding.cjs";
// @ts-ignore
import decoding from "lib0/dist/decoding.cjs";
function base64ToUint8Array(base64String) {
    const buffer = Buffer.from(base64String, 'base64');
    return new Uint8Array(buffer);
  }

const func = () => {
    const b64 ="AAG9AQADxLmwsQgJAB8gHT8dXgloCnUCeAGnAdUCjwQB7cvFkAYCAAQKAaW8jTgxAARPCmownAEoxwEBywEv/AEJhgI3wAIf4QJCpgMBqQMBrAMZ6wMB7QMB7wMBgwSnA/8JNbYKRv4KAoELEJMLJb8LAcELHeALEPILJ6AMF7kMEMsMJ/QMAfYMQ7sNJ+QNCe4NAfANKJoOAZwOHrwOFtQOEOYOFv4OH58PAqIPGb0PBcMPPIEQJ6oQAq0QFsUQAQ==";
    const message = base64ToUint8Array(b64);
    const decoder = decoding.createDecoder(message);
    const subDocMessageType: number = decoding.readVarUint(decoder);
    const docGuid = decoding.readVarString(decoder);
    console.log(docGuid);
}


func();

some update message pass but some messages shows error The encoded data was not valid for encoding utf-8. I have made a minimal reproduce code:

Uncaught TypeError TypeError [ERR_ENCODING_INVALID_ENCODED_DATA]: The encoded data was not valid for encoding utf-8
    at __node_internal_captureLargerStackTrace (<node_internals>/internal/errors:464:5)
    at NodeError (<node_internals>/internal/errors:371:5)
    at decode (<node_internals>/internal/encoding:429:15)
    at _readVarStringNative (/Users/xiaoqiangjiang/source/reddwarf/backend/yjs-explore/node_modules/.pnpm/[email protected]/node_modules/lib0/dist/decoding-2c98f95d.cjs:376:45)
    at func (/Users/xiaoqiangjiang/source/reddwarf/backend/yjs-explore/src/decode/utf8_decode.ts:16:30)
    at <anonymous> (/Users/xiaoqiangjiang/source/reddwarf/backend/yjs-explore/src/decode/utf8_decode.ts:21:1)
    at run (<node_internals>/internal/modules/esm/module_job:197:25)
    --- async function ---
    at runMainESM (<node_internals>/internal/modules/run_main:51:21)
    at executeUserEntryPoint (<node_internals>/internal/modules/run_main:74:5)
    at <anonymous> (<node_internals>/internal/main/run_main_module:17:47)
decoding-2c98f95d.cjs:376
No debugger available, can not send 'variables'
Process exited with code 1

this is the package.json:

{
  "name": "texhub-broadcast",
  "version": "1.0.29",
  "description": "",
  "type": "module",
  "scripts": {
    "test": "echo "Error: no test specified" && exit 1",
    "lint": "eslint --fix",
    "dev-node": "export NODE_ENV=dev && ts-node --esm src/index.ts",
    "dev": "vite --host=0.0.0.0 --port=3003",
    "build": "tsc"
  },
  "exports": {
    ".": {
      "import": "./dist/app.js"
    }
  },
  "dependencies": {
    "@babel/runtime": "^7.26.10",
    "@codemirror/state": "^6.5.2",
    "@codemirror/view": "^6.36.4",
    "@uiw/react-split": "^5.9.3",
    "dotenv": "^16.4.7",
    "lib0": "^0.2.99",
    "pg": "^8.14.1",
    "react": "^18.3.1",
    "react-dom": "^18.3.1",
    "react-split": "^2.0.14",
    "socket.io-client": "^4.8.1",
    "texhub-broadcast": "1.0.41",
    "typescript": "^5.8.2",
    "vite": "^5.4.14",
    "vite-plugin-svgr": "^4.3.0",
    "vite-plugin-top-level-await": "^1.5.0",
    "vite-plugin-wasm": "^3.4.1",
    "web-vitals": "^2.1.4",
    "y-codemirror.next": "^0.3.5",
    "y-protocols": "^1.0.6",
    "yjs": "^13.6.24"
  },
  "devDependencies": {
    "@types/node": "^22.13.10"
  }
}

why some message parse success but some message shows this error? what should I do to fixed this error?

Searching for “download ReadableStream”, I find two questions:

1. Download Readablestream as file
2. How to download a ReadableStream on the browser that has been returned from fetch

Both have answers ending up in collecting all the data in a Blob and using URL.createObjectURL. Yet having a ReadableStream, it is a waste to first create a huge Blob in memory before the browser can start the download operation.

Is there a way to let the client download directly from a ReadableStream, without first collecting all data in memory?

NOTE: this ReadableStream is created by the client from lots of data, so relying on fetch Response objects will hardly be a solution.

I’m encountering the following warning during development:
Deprecation: The legacy JS API is deprecated and will be removed in Dart Sass 2.0.0.
More info: https://sass-lang.com/d/legacy-js-api
This warning appears when processing my SCSS files through the following loader chain:
sass-loader -> css-loader -> postcss-loader -> resolve-url-loader -> sass-loader
LOG from ./node_modules/sass-loader/dist/cjs.js sass-loader ./node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[1].oneOf[7].use[1]!./node_modules/postcss-loader/dist/cjs.js??ruleSet[1].rules[1].oneOf[7].use[2]!./node_modules/resolve-url-loader/index.js??ruleSet[1].rules[1].oneOf[7].use[3]!./node_modules/sass-loader/dist/cjs.js??ruleSet[1].rules[1].oneOf[7].use[4]!./src/styles/scss-style/style.sc

I am developing Mediasoup SFU and client web app, where I am recording client’s stream and sending it to FFmpeg as plain RTP. FFmpeg creates HLS recording (.m3u8 and .ts files), because I need to be able to switch between WebRTC live stream and HLS recording before live stream ends.

My problem is that, when I am testing the app and I rotate my phone 90 degrees, the recording’s aspect ratio stays the same but the image is rotated (as shown on images 1.1, 1.2 and 1.3 below). I need for it to change aspect ratio dynamically according to camera orientation. How can I do that using FFmpeg?

On the live stream it works perfectly fine (as shown on the images – 2.1 and 2.2 below), when the phone is rotated, the aspect ration is changed and video is shown correctly. I think it works on live stream because maybe WebRTC is signaling orientation changes somehow (but it does not project to the recording).

These are my ffmpeg command arguments for recording (version 6.1.1-3ubuntu5):

let commandArgs = [
      "-loglevel", "info",
      "-protocol_whitelist", "pipe,udp,rtp",
      "-fflags", "+genpts+discardcorrupt",
      "-reinit_filter", "1",
      "-strict", "-2",
      "-f", "sdp",
      "-i", "pipe:0",
      "-map", "0:v:0",
      "-c:v", "libx264",
      "-b:v", "1500k",
      "-profile:v", "high",
      "-level:v", "4.1",
      "-pix_fmt", "yuv420p",
      "-g", "30",
      "-map", "0:a:0",
      "-c:a", "aac",
      "-b:a", "128k",
      "-movflags", "+frag_keyframe+empty_moov",
      "-f", "hls",
      "-hls_time", "4",
      "-hls_list_size", "0",
      "-hls_flags", "split_by_time",
      `${filePath}.m3u8`
    ];

• Image 1.1 – Portrait mode in recording:

  

• Image 1.2 – Landscape mode in recording (rotated 90deg to my left side – front camera is on my left side):

  

• Image 1.3 – Landscape mode in recording (rotated 90deg to my right side):

  

• Image 2.1 – Portrait mode in live stream (correct behavior):

  

• Image 2.2 – Landscape mode in live stream (correct behavior):

  

I am going to implement password saving/autofill in my react-native-webview. I implemented to save password when user first enter the username/password and then load that credential and assign the credential to that login form. The username and password are successfully written to the input elements.
The problem is that, when user submits the login form by clicking [Sign In] button, the login page recognizes the username and password elements are empty.
I hope anyone can teach me what should I do to solve this problem.

      var usernameEle = document.querySelector('[autocomplete="username"]');
      if(usernameEle) {

        usernameEle.setAttribute("value", "${ username }");
        usernameEle.value = "${ username }";

        setTimeout(() => {
          usernameEle.focus();
          usernameEle.blur();

          usernameEle.dispatchEvent(new KeyboardEvent("keydown", { key: "e" }));
          usernameEle.dispatchEvent(new Event("change", { bubbles: true }));
          usernameEle.dispatchEvent(new Event("change", { bubbles: true }));

        }, 100);
      }

I am working on a React.js application where I need to render a full LaTeX document. The document is structured like a resume and contains LaTeX commands such as documentclass{article}, section{}, textbf{}, etc.

What I Have Tried

I tried react-latext but it doesnt’ support whole latex rendering

What I Need Help With

1. I am looking for the best way to fully render a LaTeX document inside React.js, preserving all formatting, without requiring users to manually generate a PDF.

2. Is there a better approach to rendering full LaTeX documents dynamically?

3. Are there any libraries that fully support LaTeX syntax inside React?

4. Can I convert LaTeX to HTML with better support for document structure (documentclass, section{})?