Track users browser activity against specified web application

I want to track users’ real-time interaction against the specific site(web app) page and scrap the data he/she views and extract it.

Note: The application is not owned by us so we can’t use google analytics or other libraries similar to it.

Is this possible to implement? and what is the best way to do this?
Any existing tools which we can use to support this requirement??
Any available browser extension or can we develop such an extension? (Note: We can install the extension on our user’s browser)

A similar question is also raised on StackOverflow Tracking user activity with Chrome extension but no answers against the same

How to extend the response of an api in react by adding a new property based on a condition?

I want to call an API and extend the response by adding a new ‘category’ prop to each
categories [‘thirds’, ‘fifths’, ‘magic’]

  • if the id is divisible by 3 => thirds
  • if the id is divisible by 5 => fifths
  • if the id is divisibly by 3 and 5 => magic

The url is https://jsonplaceholder.typicode.com/posts

How do i do that?

async function getData() {
    const response = await fetch("https://jsonplaceholder.typicode.com/posts");
    const data = await response.json();
  }

{contacts.map((contact) => (
             {contact.id}
              {contact.userId}
            {contact.title}
              {contact.body}
           
            ))}

Fabric js can objects delimitate the selection box?

I am creating a drawing program with fabric js and I have noticed that the selection area is related to the start and end of the biggest line point , meaning if I make a horizontal or vertical line I will get a small selection box , if I do a diagonal line the selection box will be a square.
My question is , is there a way to calculate a bounding box of these object to change the selection box like those you see on drawing svg layer software like krita or a selection tool like the laso tool from photoshop. Something that does not show such huge selection box on diagonal or figure drawings

how po print number after a delay in js

It’s beginner’s question. I’m trying to understand setTimeout. I want to print each number after a delay of 2 seconds. However, I can only delay the whole function, not the numbers. Can anyone tell me how to do it?

function print() {
  for (let i = 10; i >= 0; i--) {
    console.log(i);
  }
}

setTimeout(print, 2000);

How to display the Phaser Game Screen only in a Route React?

I want that my game screen only been displayed in ‘/game’ route, but when I give the boot with method “new Phaser.Game(config)” he start shows in every route ‘/home’, default rote ‘/’, ‘/error’, ‘/game’ and etc.

game.js

import Phaser from 'phaser';
import LoadScene from './scenes/LoadScene.js';
import MenuScene from './scenes/MenuScene.js';

export const config = {
  type: Phaser.AUTO,
  width: 800,
  height: 600,
  scene: [ MenuScene, LoadScene]
};

const game = new Phaser.Game(config);

gamepage.js

import config from '../../phaser/game.js';
import React from 'react';

export default class GamePage extends React.Component {
    render() {
        return <>
            <Game />
        </>;
    }
}

routes.js

import React from 'react';
import { BrowserRouter as Router, Route, Routes } from "react-router-dom";
import ErrorPage from '../pages/error/index.js';
import Home from '../pages/home/index.js';
import GamePage from '../pages/game/index.js';

export default class Rotas extends React.Component {
    render() {
        return <>
            <Router>
                <Routes>
                    <Route path="/" element={<Home />} />
                    <Route path="/game" elememnt={<GamePage />} />
                    <Route path="*" element={<ErrorPage />} />
                </Routes>
            </Router>
        </>
    };
}

How to use Props to jQuery in React component

I hope you understand this simple example.

I tried to change the background color of my HTML element on first render by handling it in React Component with a bit help of jQuery.

This is the code inside my React Component (the props is passed from state of Parent Component):

class QuoteBox extends React.Component {
  constructor(props) {
    super(props)
  }
  
  
  componentDidMount() {
    $('#root').css('background-color', this.props.color); 
    $('#text').css('color', this.props.color);
    $('#author').css('color', this.props.color);
  }

  render() {   
    return (
      <div>
          <div id="quote-box" className="quote-box">
            <div className="quote">
              <span id="text" class="quote-text">{this.props.quote}</span>
            </div>
            <div id="author" className="quote-author">
              <span>- {this.props.author}</span>
            </div>
      </div>
    )
  }

The code inside componentDidMount() seem doesn’t recognize the this.props.color. But if change to $('#root').css('background-color', 'green'); it’s immediately change the background to green on first render.

But in render() it recognize another props.

So what did I do wrong? Is there a way to target HTML element using jQuery inside React?

Having problem with retrieving first 5 words from input

I have the following script which functionality should be to retrieve the first 5 words from one input and type them in a second input but it isn’t working as expected.

$('#review_content').on('keyup change paste click input', function () {
    
    var contentVal = $('#review_content').val();
    var contentValSplit = $('#review_content').val().split(' ');
    
    var headerValSplit = $('#review_header').val().split(' ');
    
    if(headerValSplit.length < 6) {
        if(contentValSplit.length > 6) {
            var $five = contentValSplit[0] + ' ' + contentValSplit[1] + ' ' + contentValSplit[2] + ' ' + contentValSplit[3] + ' ' + contentValSplit[4];
            $('#review_header').val($five + "...");
        } else {
            $('#review_header').val(contentVal + "...");
        }
    } 

});

When I paste longer text (longer than 5 words) the script is just pasting the same text in the second input but that’s not how it should work. It should get only the first 5 words from the whole text and paste only them in the second input. Or if the text is smaller than 5 words it should synchronously type the letters from the first input in the second one and stop after finishing the fifth word. Any ideas how to do that?

Adding thickness to lines in threejs

This is my demo, i want to add linewidth to give more thickness to my circle

I have looked to this question and i have tried to understand how i can use LineGeometry, LineMaterial and Line2

This is the relevant code

const curve = new THREE.EllipseCurve(
  0,
  0, // ax, aY
  10,
  10, // xRadius, yRadius
  0,
  2 * Math.PI, // aStartAngle, aEndAngle
  false, // aClockwise
  0 // aRotation
);

const points = curve.getPoints(50);
const geometryCircle = new THREE.BufferGeometry().setFromPoints(points);

const materialCircle = new THREE.LineBasicMaterial({
  color: 0xdddddd
});

const ellipse = new THREE.Line(geometryCircle, materialCircle);

How can i use these classes in the demo to give more thickness?

Any edit in the codesandbox it would be great to show me

TypeError: db.collection is not a function Firestore

TypeError: db.collection is not a function Firestore

I was presented this error in an attempt to import Firestore from the Firebase Admin SDK. Can’t find anything that helped, or if I imported it incorrectly

Code; index.js (main file)

var admin = require("firebase-admin");
var serviceAccount = require("./firebase/key.json");

admin.initializeApp({
  credential: admin.credential.cert(serviceAccount)
});

var db = admin.firestore()

Code; validate.js (import)

var db = require('../../../index')```

what is error create-react-app Unexpected error. Please report it as a bug:

what is showing error showing on reactjs Aborting installation. Unexpected error. Please report it as a bug:?

Aborting installation.
    Unexpected error. Please report it as a bug:
    Error: spawn UNKNOWN
        at ChildProcess.spawn (node:internal/child_process:412:11)
        at Object.spawn (node:child_process:698:9)
        at spawn (D:ankitnode_modulescross-spawnindex.js:12:24)
        at D:ankitnode_modulescreate-react-appcreateReactApp.js:390:19
        at new Promise (<anonymous>)
        at install (D:ankitnode_modulescreate-react-appcreateReactApp.js:341:10)
        at D:ankitnode_modulescreate-react-appcreateReactApp.js:468:16
        at processTicksAndRejections (node:internal/process/task_queues:96:5) {
      errno: -4094,
      code: 'UNKNOWN',
      syscall: 'spawn'
    }
    
    Deleting generated file... package.json
    Deleting react-app/ from D:ankit
    Done.

Website hangs in mobile but runs well in desktop

The home page of https://inscignis.in/ runs well in desktop but in mobile devices, when we scroll down to the bottom and try to scroll up, it kind of gets stuck in the motion and the experience isn’t smooth. Couldn’t figure out any possible bugs. it will be really helpful if anyone can give any general solutions to it.

Sorry couldn’t post the website code here as it is owned by my university.
Thanks in advance.

Javascript image onload fails on Firefox and Chrome

I am trying to load my images with a fade in effect that will be triggered once the image is loaded. I noticed that onload works properly in Chrome, but in Firefox or Safari it is called some hundred miliseconds before the image is rendered, so any animation below that duration will be skipped.

I’ have been reading other questions, as:

Didn’t find an answer in any of them.

Here I created a snippet demonstrating the problem using Picsum heavy images —3000 x 3000—. Notice that, when opening this question on Chrome and running this snippet, on load the image is faded; but when opening this same question on Firefox or Safari the image is rendered without fade in.

const imgElement = new Image();
const rootElement = document.getElementById("root");

rootElement.append(imgElement);
imgElement.className = "image";
imgElement.src = "https://picsum.photos/3000/3000";

imgElement.onload = function () {
  imgElement.classList.add("loaded");
};
.image {
  border: 2px solid gray;
  max-width: 100%;
  opacity: 0;
  transition: opacity 0.3s ease;
}

.image.loaded {
  opacity: 1;
}
<div id="root"></div>

I don’t think also that it is related to the browsers cache, as is pointed out [here][5], because we are rendering a new image every time.

Any idea will be welcome!

How can you register global components in Svelte?

Vue (at least Vue 2) allows developers to register components globally:

import MyComponent from '@/components/MyComponent'
Vue.component('my-component-name', MyComponent)

Which then results into:

  • You can write or use component libraries (like Vuetify, Quasar, Ant etc.) without needing to import their components explicitly.
  • You can easily override other global components by just calling Vue.component(…) when you want to extend or change their respective codebase without having direct access to the source code.

I read in another SO post that Svelte does not support global component registration. However, I would still like to achieve the same results as given above.

How would I approach this in Svelte?

CDN import not getting mounted on window

I’m working a SPFX module for SharePoint, and I’m having weird behaviors while trying to dynamically import a script form a CDN.

The code create an new script element and add it to the body of the page when needed. The onload method is properly called and the method onerror is not. However nothing is attached to window.

For example, I’m trying to dynamically add bootstrap to the page with the following CDN URL : https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js. The script element is properly added, onload is called, but window.bootstrap is undefined.

If I try to import a very basic script like the following :

console.log("I'm loaded");

The script element will be added and “I’m loaded” will appear in the console which mean that the loaded script is properly run.

What could cause such a behavior; where a CDN script is imported, loaded and run yet not mounted on window ?

Error on “apidoc” lib while run on Docker

I am getting error on apidoc (apidoc-0.50.3 version) while run in Docker and I am using Node v12.22.7

Command :

RUN npm install apidoc -g
RUN apidoc -e node_modules

Error :

node_modules/apidoc/lib/writer.js:136
const title = projectInfo.title ?? projectInfo.name ?? 'Loading...';
SyntaxError: Unexpected token '?'

Help me to find out a solution.