Category: javascript

So I was wondering how I can convert a DocumentNode back to a query string in graphql-js.

I thought at first it should be a simple var.toString() but it turns out that it is not like that at all.

We are using software that registers its own protocol. We can run application from browser then by link like:

customprotocol://do_this.

but is there a way to check is such custom protocol supported by user`s system? If not we would like to ask user to install software first.

if (canHandle ('customprotocol')) {
// run software
}
else {
// ask to install
}

I know this question exists, but it is very old and dates back to 2010

I tried with window.onblur, with a timeout function, but I wasn’t successful. I know that iframe doesn’t have an error callback, so all options were unsuccessful.

Really stumped with this one.

I have a gulp file, full files/code below, which is working fine. I’m basically:

• proxying a website
• so I can load it locally, on localhost
• and inject my compiled JS and SCSS files into the page, when it initially loads. (This is what you see happening in the function browsersyncServe().

The issue I have is, when I proxy the website from the url WWW.MYSITE.COM, (basically the PROD site), the page loads fine in localhost:3000. But it seems none of the JavaScript/UI is working, on the proxied site.

• So for example, there is a searchpod/form, where you can type in values. The form does not recognise the values.
• If I click submit, the page just reloads.
• If I hover the navigation menu, it does not open on hover.

This is all JS from the proxied site. (Not JS I am injected on top of this).

Now, if I proxy the website from url TEST.MYSITE.COM, everything works fine. The website UI operates as it should. Menu nav hover works and I can interact with form fields and submit it.

I’m not sure what could stop this page from working/loading fully, or at least all the JS files to load fully as this should?

One difference I noticed in chrome console, is that the following error was appearing in PROD. But not TEST:

I get this error in PROD, which doesnt appear on the test env:

No UI will be shown. CanMakePayment and hasEnrolledInstrument will always return false. Show will be rejected with NotSupportedError.

After googling, I realised this was being caused the the localhost https not being secured. So I spent time installing the node package mkcert, which install SSL certificate locally for localhost, to bypass this issue.

But, I’m still facing the same problem. And I have no more issues in console.

Wondered if anyone else has faced this problem?

If it helps, the website is built in react, but I dont think that has anything to do with the issue.

const gulp         = require("gulp");
const concat       = require("gulp-concat");
const browserify   = require("browserify");
const source       = require("vinyl-source-stream");
const buffer       = require("vinyl-buffer");
const babelify     = require("babelify");
const uglify       = require("gulp-uglify");
const sass         = require("gulp-sass")(require("sass"));
const browserSync  = require("browser-sync");
const autoprefixer = require("gulp-autoprefixer");
const fs           = require("fs");
const yargs        = require("yargs");


// Termainal (Yargs) Arguments - Values from terminal input
const page         = yargs.argv.page;
const abTest       = yargs.argv.abTest;
const cssVariant   = yargs.argv.cssVariant;
const jsVariant    = yargs.argv.jsVariant
const directory    = findFolder(abTest);


function findFolder(argument)
{
    // Get a list of all directories in the current directory
    const directories = fs.readdirSync(".").filter((file) =>
    {
        return fs.statSync(file).isDirectory();
    });

    // Find the folder that starts with the provided argument
    const targetFolder = directories.find((dir) => dir.startsWith(argument));

    if (targetFolder)
    {
        return targetFolder;
    }
    else
    {
        throw new Error(`Folder starting with '${argument}' not found.`);
    }
};

// Browserify is being used to bundle our Variant JS code.
// Buffer() is transforming our code, so it can be further manipulated.
// Bablify is being used to transpile our JS code.
// Uglify is miniziming our code.
// Pipe() is used to chain operations
// Entries pulls through the vriant js file name and compiles that variant file.
function buildJSFiles()
{
    return browserify({
        entries: [`${directory}/js/${jsVariant}.js`],
        transform: [babelify.configure({ presets: ["@babel/preset-env"] })],
        debug: true
    })
        .bundle()
        .pipe(source(`${jsVariant}.js`))
        .pipe(buffer())
        .pipe(uglify({
            mangle: true,
            compress: true
        }))
        .pipe(gulp.dest(`${directory}/dist/js`));
};

// OutputStyle is compressing our CSS, with no whitespaces
// Autoprexixer is used to automatically add CSS vendor prefixes, to ensure cross-browser compatibility.
// .src pulls through the vriant scss file name and compiles that variant file.
// .pipe compiles the Global styles that are used in builds and copiles them to the variant_*.css file.
function buildSCSSFiles()
{
    return gulp
        .src(`${directory}/scss/**/${cssVariant}.scss`)
        .pipe(sass({
            includePaths: [`src/scss/Global.scss`], // Include global styles mxins, colours, fonts.....
            outputStyle: "compressed"
        }).on("error", sass.logError))
        .pipe(autoprefixer({
            overrideBrowserslist: [
                "last 20 chrome versions, last 15 safari versions"
            ]
        }))
        .pipe(concat(`${cssVariant}.css`))
        .pipe(gulp.dest(`${directory}/dist/css`));
};


// BrowsersyncServe sets up a development server using BrowserSync.
// BrowserSync is used to facilitate live reloading locally.
// Proxy specifies a proxy URL. BrowserSync will act as a middleman between the local env and URL.
// Requests to the local server will be forwarded to this URL.
function browsersyncServe()
{
    browserSync.init({
        port: 3000,
        https: {
            key: "./ssl/localhost-key.pem", // mkcert key
            cert: "./ssl/localhost.pem" // mkcert certificate
        },
        proxy: `https://www.example.com/${page}`,
        serveStatic: [`${directory}`],
        snippetOptions: {
            rule: {
                match: /</head>/i,
                fn: function (snippet, match)
                {
                    return `<script src="https://localhost:3000/dist/js/${jsVariant}.js"></script> <link rel="stylesheet" type="text/css" href="https://localhost:3000/dist/css/${cssVariant}.css"/> ${snippet} ${match}`;
                }
            }
        }
    });
};

// Monitors changes in these folders and refires the functions above and reloads the page.
function watchFiles()
{
    gulp.watch(`${directory}/scss/**/*`, gulp.series(buildSCSSFiles)).on("change", browserSync.reload);
    gulp.watch(`${directory}/js/**/*`, gulp.series(buildJSFiles)).on("change", browserSync.reload);
};

exports.default = exports.build = gulp.series(
    gulp.parallel(buildJSFiles, buildSCSSFiles, browsersyncServe, watchFiles)
);

I am encountering several TypeScript errors when trying to build my project using pnpm. The errors seem to be related to the drizzle-orm package. Here is the relevant part of the output:

> [email protected] dev /Users/dxphilo/Desktop/kikao/kikao-back
> pnpm run build && pnpm run concurrently "pnpm run build -w" "pnpm nodemon"


> [email protected] build /Users/dxphilo/Desktop/kikao/kikao-back
> pnpm tsc

node_modules/.pnpm/[email protected]_@[email protected][email protected][email protected][email protected]/node_modules/drizzle-orm/mysql-core/query-builders/delete.d.ts:36:22 - error TS2420: Class 'MySqlDeleteBase<TTable, TQueryResult, TPreparedQueryHKT, TDynamic, TExcludedMethods>' incorrectly implements interface 'SQLWrapper'.
  Property 'getSQL' is missing in type 'MySqlDeleteBase<TTable, TQueryResult, TPreparedQueryHKT, TDynamic, TExcludedMethods>' but required in type 'SQLWrapper'.

36 export declare class MySqlDeleteBase<TTable extends MySqlTable, TQueryResult extends MySqlQueryResultHKT, TPreparedQueryHKT extends PreparedQueryHKTBase, TDynamic extends boolean = false, TExcludedMethods extends string = never> extends QueryPromise<MySqlQueryResultKind<TQueryResult, never>> implements SQLWrapper {
                        ~~~~~~~~~~~~~~~

  node_modules/.pnpm/[email protected]_@[email protected][email protected][email protected][email protected]/node_modules/drizzle-orm/sql/sql.d.ts:50:5
    50     getSQL(): SQL;
           ~~~~~~~~~~~~~~
    'getSQL' is declared here.
...

I have the following setup:

• Node.js version: v20.x
• TypeScript version: 4.x
• drizzle-orm version: 0.38.2
• pnpm version: 6.x
  Here is a snippet of my package.json:

{
  "name": "kikao-back",
  "version": "1.0.0",
  "private": true,
  "scripts": {
    "dev": "pnpm run build && pnpm run concurrently "pnpm run build -w" "pnpm nodemon"",
    "build": "pnpm tsc"
  },
  "dependencies": {
    "aws-sdk": "2.1692.0",
    "body-parser": "1.20.3",
    "cloudinary": "2.5.1",
    "compression": "1.7.5",
    "cookie-session": "2.1.0",
    "cors": "2.8.5",
    "dotenv": "16.4.7",
    "drizzle-orm": "0.38.2",
    "express": "4.21.2",
    "express-rate-limit": "7.5.0",
    "express-session": "1.18.1",
    "express-validator": "7.2.0",
    "jsonwebtoken": "9.0.2",
    "multer": "1.4.5-lts.1",
    "mysql2": "3.11.5",
    "nodemon": "3.1.9",
    "openai": "4.77.0",
    "passport": "0.7.0",
    "passport-google-oidc": "0.1.0",
    "pg": "8.13.1",
    "postgres": "3.4.5",
    "superstruct": "2.0.2",
    "zod": "3.24.1"
  },
  "devDependencies": {
    "@types/bcryptjs": "2.4.6",
    "@types/body-parser": "1.19.5",
    "@types/compression": "1.7.5",
    "@types/cookie-session": "2.0.49",
    "@types/cors": "2.8.17",
    "@types/express": "5.0.0",
    "@types/express-session": "1.18.1",
    "@types/jsonwebtoken": "9.0.7",
    "@types/multer": "1.4.12",
    "@types/passport": "1.0.17",
    "@types/pg": "8.11.10",
    "@typescript-eslint/eslint-plugin": "8.18.1",
    "@typescript-eslint/parser": "8.18.1",
    "concurrently": "^7.6.0",
    "drizzle-kit": "0.30.1",
    "eslint": "9.17.0",
    "eslint-config-prettier": "9.1.0",
    "eslint-plugin-prettier": "5.2.1",
    "prettier": "3.4.2",
    "tsx": "4.19.2"
  }
}

The errors seem to imply missing or incorrectly implemented interfaces in drizzle-orm. I have tried updating and downgrading the package, but the issue persists.

What could be causing these TypeScript errors, and how can I resolve them?

Additional Context:

• I am using PostgreSQL as my database.
• The project builds fine without drizzle-orm.

Any help or guidance on how to fix these errors would be greatly appreciated!

I have a react app that must execute a long running process when a certain page is loaded. This process is currently blocking the page from being rendered while it is running.

What I have tried:

  useEffect(() => {
    async function async_wrapper() {

        new Promise((resolve, reject) => {
          execut_long_running_process();
        });

    }

    async_wrapper();

  }, []);

This also does not work:

  useEffect(() => {
    async function async_wrapper() {

        await new Promise((resolve, reject) => {
          execut_long_running_process();
        });

    }

    async_wrapper();

  }, []);

I am facing problem since monday. And I used ChatGPT alot. But did’nt get the solution.

I have few section in my template.

section1
section2
section3
section4
section5.

I want that each section visible 90% once on scroll. (should be response two).
I want to apply a specific animation classes.

I did’t alot from my side.
But I did’nt.

Here is my current code. on scroll (please have a look).

 window.addEventListener('scroll', () => {
      // I am checking that i am at the top of the div-3 or not ?
      const _section: any = document.getElementById('div-3');
      const _sectionTop: any = _section.offsetTop;
      const _sectionBottom: any = _sectionTop + _section.offsetHeight;
      const _scrollPosition = window.scrollY + window.innerHeight;

      // Check if the top of the section is in view
      if (_scrollPosition >= _sectionTop && window.scrollY < _sectionBottom) {
          console.log('I am at the top of the div-3 section!');
          div6.style.display = 'block';
          div7.style.display = 'none';
      } else {
        console.log('Not I am not at the top of the div-3 section.');
      }

      // --------- DIV 4 ---------
      // ------ Statistics -------
      // -------------------------
      const scrollPosition = window.scrollY + window.innerHeight;
      const div4Start = div3.offsetTop;
      let expandThreshold = div4Start - (window.innerHeight * 0.1);

      if (scrollPosition >= expandThreshold) {
        div4.querySelectorAll('.card').forEach((card: any) => {
          // Add animation classes again
          card.classList.add('animate__animated', 'animate__zoomIn');
          // Remove animation classes after animation ends
          card.addEventListener('animationend', () => {
            card.classList.remove('animate__animated', 'animate__zoomIn');
          }, { once: true });
        });
      } else {
        div4.querySelectorAll('.card').forEach((card: any) => {
          // Add animation classes again
          card.classList.remove('animate__animated', 'animate__zoomIn');
        });
      }

      // -------- DIV 6 --------
      // A Legacy of Exploration
      // -----------------------
      const div6Headings: any = document.getElementById('div-6-headings');
      const div6Start = div6.offsetTop;
      expandThreshold = div6Start - window.innerHeight * 0.1;
      if (scrollPosition >= expandThreshold) {
        // Trigger the class removal and margin change after a delay or an event
        setTimeout(() => {
          globe.classList.add('globe-animate');
          setTimeout(() => {
            map.style.display = 'block';
            div6Headings.style.display = 'block';
            map.classList.add('animate__zoomIn');
            div6Headings.classList.add('animate__fadeIn');
          }, 800);
        }, 800); // Start after 1 second (adjust timing as needed)

      } else {
        map.style.display = 'none';
        div6Headings.style.display = 'none';

        map.classList.remove('animate__zoomIn');
        globe.classList.remove('globe-animate');
        div6Headings.classList.remove('animate__fadeIn');
      }

      // -------- DIV 7 --------
      // A Gateway to Growth
      // -----------------------
      const div7Headings: any = document.getElementById('div-7-headings');
      const div7Start = div7.offsetTop;
      expandThreshold = div7Start - window.innerHeight * 0.01;
      if (scrollPosition >= expandThreshold) {
      } else {
      }

      // --------- DIV 8 ---------
      // Unlock Untapped Potential
      // -------------------------
      const div8: any = document.getElementById('div-8');
      const div8Headings: any = document.getElementById('div-8-headings');
      const div8Start = div8.offsetTop;
      expandThreshold = div8Start - window.innerHeight * 0.1;
      if (scrollPosition >= expandThreshold) {
        div6.style.display = 'none';

        div7.classList.add('animate__animated', 'animate__fadeIn');
        div7.style.display = 'block';

        map2.classList.add('animate__zoomIn');
        div7Headings.classList.add('animate__slideInUp');
      } else {
        map2.classList.remove('animate__zoomIn');
        div7Headings.classList.remove('animate__slideInUp');
        // div8Headings.classList.remove('animate__slideInRight');
      }

      // -------- DIV 9 ---------
      // Eligibility Requirements
      // ------------------------
      const div9: any = document.getElementById('div-9');
      const div9Headings: any = document.getElementById('div-9-headings');
      const div9Start = div9.offsetTop;
      expandThreshold = div9Start - window.innerHeight * 0.1;
      if (scrollPosition >= expandThreshold) {
        // Trigger the class removal and margin change after a delay or an event
        setTimeout(() => {
          div8Headings.classList.add('animate__slideInRight');
          div9Headings.classList.add('animate__slideInRight');
        }, 250); // Start after 1 second (adjust timing as needed)
      } else {
        div8Headings.classList.remove('animate__slideInRight');
        div9Headings.classList.remove('animate__slideInRight');
      }
    });

I’m trying to block the RouteReuseStrategy based on some conditions but this is not happening. I’ve a route name as comp-a which is called in two different ways. 1 time is from a back button and the other time from a button in header.

Case 1:
If there’s something happened in Component A and then user goes to Component B and there the user clicks on back button the data should persist in Component A. This case is achieved perfectly by using RouteReuseStrategy.

Case 2:
If there’s something happened in Component A and then user goes to Component B and there the user clicks on the button from header then when the user lands on Component A, the page should load from start i.e. ngOnInit() should get called.

My issue is for the Case 2 which is not working.

I tried to pass data in the route and access it from ActivatedRouteSnapshot in the shouldDetach() function but this is not helping. I took reference from here.

In app-routing.module.ts,

const route: Routes = [
  { path: 'comp-a', component: CompAComponent, data: { test: true } }
];

In app.component.ts

// Click event on "Goto Comp A from Comp B" button
navigate() {
  this.router.navigate(['../comp-a'], { state: { data: { test: false } } });
}

In custom-reuse-strategy.ts,

shouldDetach(route: ActivatedRouteSnapshot) {
  return route.routeConfig?.path === 'comp-a' && (route.data as any)?.test; // I've accessed "test" variable here
}

I’ve tried this in this stackblitz example.

In the above example, the button Goto Comp A from Comp B is for the Case 2 example and the button Go to Comp B is for Case 1.

How should I modify the route-reuse code or is there any other way to achieve this?

According to the layout, the shader should be divided into 6 columns and 3 rows with dimensions of 100vw up by 100vh. The sizes of the rows should be divided evenly proportionally by height. The problem is that the width of the shader segments is different and should be in proportions of 17.65vw, 16.25vw, 16.32vw, 16.32vw, 16.25vw, 17.15vw from left to right. At the moment they are the same width and I can not achieve the desired result.

I had never worked with three.js before and the initial code was given me by web-designer, but it was only squared segments of shader in it, which cannot be turned into other shapes and sizes. I did some reading on three.js and went through given code, but couldn’t succeed. Here is my code:

const canvas = document.getElementById('canvas');
    const renderer = new THREE.WebGLRenderer({ canvas });
    renderer.setPixelRatio(window.devicePixelRatio);
    renderer.setSize(window.innerWidth, window.innerHeight);
    const scene = new THREE.Scene();

    const camera = new THREE.OrthographicCamera(
        window.innerWidth / -2, window.innerWidth / 2,
        window.innerHeight / 2, window.innerHeight / -2,
        0.1, 1000
    );
    camera.position.z = 1;

    window.addEventListener('resize', () => {
        const width = window.innerWidth;
        const height = window.innerHeight;
        renderer.setSize(width, height);
        camera.left = width / -2;
        camera.right = width / 2;
        camera.top = height / 2;
        camera.bottom = height / -2;
        camera.updateProjectionMatrix();
    });

    const vertexShader = `
        varying vec2 vUv;
        void main() {
            vUv = uv;
            vec4 modelPosition = modelMatrix * vec4(position, 1.0);
            vec4 viewPosition = viewMatrix * modelPosition;
            vec4 projectionPosition = projectionMatrix * viewPosition;
            gl_Position = projectionPosition;
        }
    `;

    const fragmentShader = `
        uniform float time;
        uniform vec2 resolution;
        uniform vec2 pointer;
        varying vec2 vUv;

        vec3 palette(float t) {
            vec3 a = vec3(0.5, 0.5, 0.5);
            vec3 b = vec3(0.5, 0.5, 0.5);
            vec3 c = vec3(1.0, 1.0, 1.0);
            vec3 d = vec3(0.263, 0.416, 0.557);
            return a + b * cos(6.28318 * (c * t + d));
        }

        void main() {
            vec2 uv = (gl_FragCoord.xy * 2.0 - resolution.xy) / resolution.y;
            vec2 uv0 = uv;
            vec3 finalColor = vec3(0.0);
            vec2 gridSize = vec2(6.0, 3.0);
            vec2 gridPos = floor(vUv * gridSize);
            vec2 localUv = fract(vUv * gridSize) - 0.5;
            uv = sin(localUv * 0.5) - pointer;
            float d = length(uv) * exp(-length(uv0));
            vec3 col = palette(length(uv0) + time * 0.4);
            d = sin(d * 8.0 + time) / 8.0;
            d = abs(d);
            d = pow(0.02 / d, 2.0);
            finalColor += col * d;
            gl_FragColor = vec4(finalColor, 1.0);
        }
    `;

    const uniforms = {
        time: { value: 0 },
        resolution: { value: new THREE.Vector2(window.innerWidth, window.innerHeight) },
        pointer: { value: new THREE.Vector2(0, 0) }
    };

    const material = new THREE.ShaderMaterial({
        vertexShader,
        fragmentShader,
        uniforms
    });

    const geometry = new THREE.PlaneGeometry(window.innerWidth, window.innerHeight);
    const plane = new THREE.Mesh(geometry, material);
    scene.add(plane);

    const clock = new THREE.Clock();
    function animate() {
        uniforms.time.value += clock.getDelta();
        renderer.render(scene, camera);
        requestAnimationFrame(animate);
    }

    animate();

#canvas {
  display: block; 
  position: absolute; 
  top: 0; 
  left: 0; 
  width: 100vw; 
  height: 100vh;
}

<canvas id="canvas"></canvas>
<script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/r128/three.min.js"></script>

Can you please help me solve this problem and make shader’s column (segments’) width adjustable and different from each other

This is my code. I am getting 2 tooltips in Safari. I want one tooltip that I have already prepared.

Can you kindly let me know how to make the default browser tooltip disappear?

<div  
  [attr.id]="'nodeRow-'+node.id" 
  [ngClass]="selectedID===node.id?'node-title-active':'node-title-inactive'" 
  class="row node-title" 
  (mouseenter)="overlayEffecton(node)" 
  (mouseleave)="overlayEffectoff(node)" 
  matTooltip="{{node.name}}" 
  matTooltipPosition="right" 
  matTooltipHideDelay="3" 
  matTooltipClass="right">

Modal1 is long enough to traverse the screen.

If I scroll Modal1 down and show Modal2, Modal1’s scroll will unintentionally move to the top.

After that, if Modal2 is shown, the scroll of Modal1 will not move to the top.

But if I close Modal1 and show Modal2 again, the scroll of Modal1 moves to the top.

I would like to prevent Modal1 scroll from moving when Modal2 is shown.

$(document).ready(() => {
  $('#openExampleModalToggle').on('click', () => {
    $('#exampleModalToggle').modal('show');
  });
  $('#openExampleModalToggle2').on('click', () => {
    //$('#exampleModalToggle2').modal('show');
    $('#exampleModalToggle2').modal('show');
  });
});

<script src="https://code.jquery.com/jquery-1.12.4.js" integrity="sha256-Qw82+bXyGq6MydymqBxNPYTaUXXq7c8v3CwiYwLLNXU=" crossorigin="anonymous"></script>
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-QWTKZyjpPEjISv5WaRU9OFeRpok6YctnYmDr5pNlyT2bRjXh0JMhjY6hW+ALEwIH" crossorigin="anonymous">
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-YvpcrYf0tY3lHB60NNkmXc5s9fDVZLESaAA55NDzOxhy9GkcIdslK1eN7N6jIeHz" crossorigin="anonymous"></script>

<div class="modal fade" id="exampleModalToggle" aria-hidden="true" aria-labelledby="exampleModalToggleLabel" tabindex="-1">
  <div class="modal-dialog modal-dialog-centered">
    <div class="modal-content">
      <div class="modal-header">
        <h1 class="modal-title fs-5" id="exampleModalToggleLabel">Modal 1</h1>
        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
      </div>
      <div class="modal-body">
        Show a second modal and hide this one with the button below.
        <br>
        <br>
        <br>
        <br>
        <br>
        <br>
        <br>
        <br>
        <br>
        <br>
        <br>
        <br>
        <br>
        <br>
        Show a second modal and hide this one with the button below.
      </div>
      <div class="modal-footer">
        <button class="btn btn-primary" id="openExampleModalToggle2">Open second modal</button>
      </div>
    </div>
  </div>
</div>
<div class="modal fade" id="exampleModalToggle2" aria-hidden="true" aria-labelledby="exampleModalToggleLabel2" tabindex="-1">
  <div class="modal-dialog modal-dialog-centered">
    <div class="modal-content">
      <div class="modal-header">
        <h1 class="modal-title fs-5" id="exampleModalToggleLabel2">Modal 2</h1>
        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
      </div>
      <div class="modal-body">
        Hide this modal and show the first with the button below.
      </div>
      <div class="modal-footer">
      </div>
    </div>
  </div>
</div>
<button class="btn btn-primary" id="openExampleModalToggle">Open first modal</button>

We have an app which is built on react native with new architecture enabled. We have turbo modules which interacts with c++ functions for inference. We have situation where the c++ functions takes up to 1 GB of memory and we are optimising the same. But the critical part is to optimise the js functions which are interacting with realm DB. Now we want to understand which block of code occupies memory in the JS side.

Options which we tried already.

• Hermes debugger – It is able to profile and show the objects. But we are unable to relate it with the JS code
• Memory profiler in Android – It helped us in identifying exact c++ functions which takes more memory. but not at the JS level.

So I’m trying to make a signup/login system. The signup page works, when I click the sign up button it sends me to the homepage (RAB.html). But when I go to the log in page and click the log in button, it errors. “This page isn’t working, HTTP ERROR 405”. What seems to be the problem?

I’m using firebase btw
this is my code:

// Import the functions you need from the SDKs you need
import { initializeApp } from "https://www.gstatic.com/firebasejs/11.1.0/firebase-app.js";
import { getAnalytics } from "https://www.gstatic.com/firebasejs/11.1.0/firebase-analytics.js";
import {getAuth, createUserWithEmailAndPassword, signInWithEmailAndPassword} from "https://www.gstatic.com/firebasejs/11.1.0/firebase-auth.js"
import {getFirestore, setDoc, doc} from "https://www.gstatic.com/firebasejs/11.1.0/firebase-firestore.js"

const firebaseConfig = {
  apiKey: "AIzaSyBhDkEUta73LDAm-Zah0vU-uGpVRTN6PaA",
  authDomain: "rabp-6ae41.firebaseapp.com",
  projectId: "rabp-6ae41",
  storageBucket: "rabp-6ae41.firebasestorage.app",
  messagingSenderId: "124825740643",
  appId: "1:124825740643:web:1b888d74e3adfd15575f56",
  measurementId: "G-EYVYX974MD"
};

const app = initializeApp(firebaseConfig);
const analytics = getAnalytics(app);

function showMessage(message, divId) {
  var messageDiv=document.getElementById(divId);
  messageDiv.style.display="block";
  messageDiv.innerHTML=message;
  messageDiv.style.opacity=1;
  setTimeout(function(){
    messageDiv.style.opacity=0;
  },5000);
}

const signUp=document.getElementById('submitSignUp');
signUp.addEventListener('click', (event)=>{
  event.preventDefault();
  const email=document.getElementById('rEmail').value;
  const password=document.getElementById('rPassword').value;
  const firstName=document.getElementById('fName').value;
  const lastName=document.getElementById('lName').value;
  const address=document.getElementById('rAddress').value;
  const number=document.getElementById('rNumber').value;

  const auth=getAuth();
  const db=getFirestore();

  createUserWithEmailAndPassword(auth, email, password)
  .then((userCredential)=>{
    const user=userCredential.user;
    const userData= {
      email: email, 
      firstName: firstName,
      lastName: lastName,
      address: address,
      number: number
    };
    showMessage('Account Created Successfully', 'signUpMessage');
    const docRef=doc(db, "users", user.uid);
    setDoc(docRef,userData)
    .then(()=>{
      window.location.href='RAB.html';
    })
    .catch((error)=>{
      console.error("error writing document", error);

    });
  })
  .catch((error)=> {
    const errorCode=error.code;
    if(errorCode=='auth/email-already-in-use'){
      showMessage('Email Address Already Exists !!!', 'signUpMessage')
    } else {
      showMessage('unable to create User', 'signUpMessage');
    }
  })
})

const signIn = document.getElementById('submitSignIn');
signIn.addEventListener('click', (event)=>{                                                                                                                 
  event.preventDefault();
  const email = document.getElementById('email').value;
  const password = document.getElementById('password').value;
  
  const auth = getAuth();

  signInWithEmailAndPassword(auth, email, password)
  .then((userCredential)=>{
    showMessage('login is successful', 'signInMessage');
    const user=userCredential.user;
    localStorage.setItem('loggedInUserId', user.uid); 
    window.location.href='RAB.html';
  })
  .catch((error)=>{
    const errorCode=error.code;
    if(errorCode ==='auth/invalid-credential'){
      showMessage('Incorrect Email or Password', 'signInMessage');
    } else {
      showMessage('Account does not Exist', 'signInMessage')
    }
  })
})

I am programming a Rails app with a view with inline JavaScript also using jquery. When clicking the button with Id="ReloadPlaceholders" the script is executed which is fine, wanted and works.

The script itself doesnt work. It is supposed to:

1. load data from the server [WORKS]
2. select a drop down [WORKS]
3. empty the drop down with [DOESN’T WORK – The drop down options remain unchanged (but the drop down flickers shortly…dunno why)
4. Populate the drop down with the new options. To test this I added an Option [DOESN’T WORK] (later the options from the var will be loaded)

My code in the view:

<script>
                      document.getElementById("ReloadPlaceholders").addEventListener("click",
                          function(){
                            const xmlHttp = new XMLHttpRequest();
                            xmlHttp.open( "GET", "/home/companies/<%= current_company.id %>/disbursements/placeholders", true ); // false for synchronous request
                            xmlHttp.onload = (e) => {
                              var options = xmlHttp.responseText;
                              let newOption = new Option('Option Text','Option Value');
                              const select = document.querySelector('#disbursement_disbursement_positions_attributes_0_placeholder_id');
                              select.empty();
                              select.add(newOption, undefined);
                            };
                            xmlHttp.onerror = (e) => {
                                console.error(xmlHttp.statusText);
                            };
                          }
                      );
                  </script>

I tried for multiple hours also using plain vanilla JS but it doesnt work.

I am trying to run a Node.js application using TypeScript and Express. However, I am encountering the following issues:

1.When I use the command npm run dev, I get the error: TypeError: Unknown file extension '.ts'
2.When I try ts-node src/app.ts, I also receive: TypeError: Unknown file extension '.ts'
3.When I try ts-node dist/app.js, I get: Error: Cannot find module

What I Have Tried :
I have installed all necessary dependencies as listed in my package.json.
My TypeScript configuration (tsconfig.json) is set up with “module”: “ESNext” and “target”: “ESNext”.
My nodemon.json is configured to watch .ts files and use ts-node.
I ensured that reflect-metadata is imported at the top of my app.ts.
Despite this, the application is not working.

My Package.json File:

{
  "name": "Testing",
  "version": "1.0.0",
  "description": "",
  "main": "src/app.ts",
  "type": "module",
  "scripts": {
    "test": "echo "Error: no test specified" && exit 1",
    "start": "node dist/app.ts",
    "dev": "nodemon",
    "build": "tsc"
  },
  "dependencies": {
    "dotenv": "^16.4.5",
    "express": "^4.19.2",
    "npm": "^11.0.0",
    "reflect-metadata": "^0.1.13",
    "routing-controllers": "^0.10.4",
    "typeorm": "^0.3.20"
  },
  "devDependencies": {
    "@types/express": "^4.17.21",
    "@types/node": "^20.17.10",
    "@types/request": "^2.48.12",
    "nodemon": "^3.1.9",
    "ts-node": "^10.9.2",
    "typescript": "^5.7.2"
  }
}

My tsconfig File:
    "compilerOptions": {
        "module": "ESNext",
        "target": "ESNext",
        "moduleResolution": "node",
        "esModuleInterop": true,
        "emitDecoratorMetadata": true,
        "experimentalDecorators": true,
        "outDir": "./dist",
        "rootDir": "./src"
    }

My nodemon.json File :

 {
      "watch": ["src"],
      "execMap": {
        "ts": "ts-node"
      },
      "ext": "ts",
      "ignore": ["src/**/*.spec.ts"]
    }

Environment :
Node.js version: 20.12.2
npm version: 6.14.11

How can I resolve the errors I am encountering and run my TypeScript and Express application correctly? Are there any issues with my configuration, or am I missing something critical?

I am building a vertical card carousel where each card has a video background. It works perfectly on desktop browsers (videos autoplay and play inline as expected), but on mobile browsers the videos fail to autoplay reliably.

I have ensured the following:

HTML attributes: The muted, playsinline, and preload="auto" attributes are set on each <video> tag.
Explicit muting in JavaScript: I programmatically set video.muted = true for each video.
Autoplay attempt in JavaScript: Using video.play() after a user interaction or on page load.

Despite these efforts, videos don’t show until interacted with on a phone.

Autoplay: Ensure videos autoplay seamlessly on smaller devices.
Play inline: Prevent videos from opening in fullscreen on mobile.
Inactive cards: Ensure inactive cards show the first frame of the video as a still image while paused.

const cards = document.querySelectorAll('.card');
const body = document.body;
const elementsToChange = document.querySelectorAll('.elementor-button, .elementor-widget-container a img');
let currentIndex = 0;
let isScrolling = false;
let touchStartY = 0;
let touchEndY = 0;

const bodyColors = ['#191d1c', '#534d3f', '#959185', '#bdb8b4', '#bec5bd'];

// Funksjon for å oppdatere styling på spesifikke elementer
function updateElementStyles() {
  const activeCard = cards[currentIndex];
  const cardTitle = activeCard.querySelector('h2').textContent.trim();
  const highlightCards = ['Om oss', 'Kultur']; // Kortene som skal trigge effekten

  if (highlightCards.includes(cardTitle)) {
    // Endre utseendet for de valgte elementene
    elementsToChange.forEach((el) => {
      if (el.tagName === 'IMG') {
        el.style.filter = 'invert(1)'; // Øk lysstyrken for bilder
      } else {
        el.style.color = '#ffffff'; // Sett tekstfarge til hvit
        el.style.transition = 'color 0.5s ease, filter 0.5s ease'; // Glatt overgang
      }
    });
  } else {
    // Tilbakestill til standard utseende
    elementsToChange.forEach((el) => {
      if (el.tagName === 'IMG') {
        el.style.filter = 'invert(0)'; // Tilbakestill lysstyrken
      } else {
        el.style.color = ''; // Tilbakestill tekstfarge
      }
    });
  }
}

function updateCards() {
  cards.forEach((card, index) => {
    const relativeIndex = (index - currentIndex + cards.length) % cards.length;
    const video = card.querySelector('video');

    if (relativeIndex === 0) {
      card.className = 'card active';
      video.play();
      body.style.backgroundColor = bodyColors[index];
    } else {
      card.className =
        relativeIndex === 1 ? 'card behind' :
        relativeIndex === 2 ? 'card behind-2' :
        relativeIndex === 3 ? 'card behind-3' :
        relativeIndex === 4 ? 'card behind-4' :
        'card ahead';
      video.pause();
    }
  });

  updateElementStyles(); // Oppdater styling på de valgte elementene
}

function handleScroll(direction) {
  if (isScrolling) return;
  isScrolling = true;

  if (direction === 'down') {
    currentIndex = (currentIndex + 1) % cards.length;
  } else if (direction === 'up') {
    currentIndex = (currentIndex - 1 + cards.length) % cards.length;
  }

  updateCards();
  setTimeout(() => (isScrolling = false), 600); // Prevent rapid scroll/swipe
}

window.addEventListener('wheel', (e) => {
  handleScroll(e.deltaY > 0 ? 'down' : 'up');
});

// Touch events for mobile
window.addEventListener('touchstart', (e) => {
  touchStartY = e.touches[0].clientY;
});

window.addEventListener('touchend', (e) => {
  touchEndY = e.changedTouches[0].clientY;
  if (touchStartY > touchEndY + 50) {
    handleScroll('down'); // Swipe up
  } else if (touchStartY < touchEndY - 50) {
    handleScroll('up'); // Swipe down
  }
});

updateCards();

body {
  margin: 0;
  padding: 0;
  height: 100vh;
  overflow: hidden;
  font-family: "Neue Montreal", sans-serif;
  background: #f0f0f0;
  transition: background 0.5s ease;
}

.carousel {
  position: relative;
  perspective: 1000px;
  height: 100vh;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  overflow: hidden;
}

.cards {
  position: relative;
  height: 70%;
  width: 70%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

.card {
  position: absolute;
  height: 100%;
  width: 100%;
  border-radius: 30px 30px 0 0;
  box-shadow: 0 10px 20px rgba(0, 0, 0, 0.2);
  transform-origin: center;
  transition: transform 0.5s ease;
  display: flex;
  overflow: hidden;
}

.card .c-cards__media {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: -1;
  overflow: hidden;
  background-size: cover;
  background-position: center;
}

.card .c-cards__media video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  pointer-events: none;
}

.card .c-cards__media-overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 2;
}

.card a {
  text-decoration: none;
  color: inherit;
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  align-items: center;
  position: relative;
  z-index: 3;
  padding-bottom: 40px;
}

.card h2,
.card h3,
.card h4 {
  color: white;
  text-transform: uppercase;
  margin: 10px 0;
  text-align: center;
}

.card h2 {
  font-size: 18px;
}

.card h3 {
  font-size: 120px;
}

.card h4 {
  font-size: 18px;
}

.card {
  transform: translateY(50px) scale(0.8);
}

.card.active {
  transform: translateY(0) scale(1);
  z-index: 5;
}

.card.behind {
  transform: translateY(-80px) scale(0.9);
  z-index: 4;
}

.card.behind-2 {
  transform: translateY(-150px) scale(0.8);
  z-index: 3;
}

.card.behind-3 {
  transform: translateY(-215px) scale(0.7);
  z-index: 2;
}

.card.behind-4 {
  transform: translateY(-275px) scale(0.6);
  z-index: 1;
}

.card.ahead {
  transform: translateY(300px) scale(0.9);
  z-index: 0;
}

<div class="carousel">
  <div class="cards">
    <a href="https://ozeta.loddo.no/om-oss/" class="card">
      <div class="c-cards__media">
        <video muted="true" loop playsinline preload="auto">
            <source src="https://ozeta.loddo.no/wp-content/uploads/2024/12/about.mp4" type="video/mp4">
        </video>
        <div class="c-cards__media-overlay"></div>
      </div>
      <div class="c-cards__content">
        <h2>Om oss</h2>
        <h3>About Us</h3>
        <h4>Learn More</h4>
      </div>
    </a>
    <a href="https://ozeta.loddo.no/kultur/" class="card">
      <div class="c-cards__media">
        <video muted="true" loop playsinline preload="auto">
          <source src="https://ozeta.loddo.no/wp-content/uploads/2024/12/culture.mp4" type="video/mp4">
        </video>
        <div class="c-cards__media-overlay"></div>
      </div>
      <div class="c-cards__content">
        <h2>Kultur</h2>
        <h3>Culture</h3>
        <h4>Explore More</h4>
      </div>
    </a>
    <a href="https://ozeta.loddo.no/prototype/" class="card">
      <div class="c-cards__media">
        <video muted="true" loop playsinline preload="auto">
          <source src="https://ozeta.loddo.no/wp-content/uploads/2024/12/prototyping.mp4" type="video/mp4">
        </video>
        <div class="c-cards__media-overlay"></div>
      </div>
      <div class="c-cards__content">
        <h2>Prototyping</h2>
        <h3>Prototype</h3>
        <h4>Discover</h4>
      </div>
    </a>
    <a href="https://ozeta.loddo.no/produksjon/" class="card">
      <div class="c-cards__media">
        <video muted="true" loop playsinline preload="auto">
          <source src="https://ozeta.loddo.no/wp-content/uploads/2024/12/production-1.mp4" type="video/mp4">
        </video>
        <div class="c-cards__media-overlay"></div>
      </div>
      <div class="c-cards__content">
        <h2>Produksjon</h2>
        <h3>Production</h3>
        <h4>Details</h4>
      </div>
    </a>
    <a href="https://ozeta.loddo.no/baerekraft/" class="card">
      <div class="c-cards__media">
        <video muted="true" loop playsinline preload="auto">
          <source src="https://ozeta.loddo.no/wp-content/uploads/2024/12/production-1.mp4" type="video/mp4">
        </video>
        <div class="c-cards__media-overlay"></div>
      </div>
      <div class="c-cards__content">
        <h2>Bærekraft</h2>
        <h3>Bærekraft</h3>
        <h4>Details</h4>
      </div>
    </a>
  </div>
</div>