Category: javascript

[email protected] install

node-pre-gyp install –fallback-to-build

node-pre-gyp [##################] – reify:semver: timing reifyNode:node_modules/@mapbox/node-pre-gyp Completed ininfo it worked if it ends with ok

node-pre-gyp info using [email protected]

node-pre-gyp info using [email protected] | android | arm64

node-pre-gyp info check checked for “/data/data/com.termux/files/home/node-test/node_modules/bcrypt/lib/binding/napi-v3/bcrypt_lib.node” (not found)

node-pre-gyp http GET https://github.com/kelektiv/node.bcrypt.js/releases/download/v5.1.1/bcrypt_lib-v5.1.1-napi-v3-android-arm64-unknown.tar.gz

node-pre-gyp ERR! install response status 404 Not Found on https://github.com/kelektiv/node.bcrypt.js/releases/download/v5.1.1/bcrypt_lib-v5.1.1-napi-v3-android-arm64-unknown.tar.gz

node-pre-gyp WARN Pre-built binaries not installable for [email protected] and [email protected] (node-v115 ABI, unknown) (falling back to source compile with node-gyp)

node-pre-gyp WARN Hit error response status 404 Not Found on https://github.com/kelektiv/node.bcrypt.js/releases/download/v5.1.1/bcrypt_lib-v5.1.1-napi-v3-android-arm64-unknown.tar.gz

gyp info it worked if it ends with oktiming reifyNode:node_modules/@mapbox/node-pre-gyp Completed in 1297ms

gyp info using [email protected]

gyp info using [email protected] | android | arm64

gyp info ok #######] – reify:semver: timing reifyNode:node_modules/@mapbox/node-pre-gyp Completed in 1297ms

gyp info it worked if it ends with oktiming reifyNode:node_modules/@mapbox/node-pre-gyp Completed in 1297ms

gyp info using [email protected]

gyp info using [email protected] | android | arm64

gyp info find Python using Python version 3.11.8 found at “/data/data/com.termux/files/usr/bin/python3″97ms

[##################] – reify:semver: timing reifyNode:node_modules/@mapbox/node-pre-gyp Completed in 1297ms

gyp info spawn /data/data/com.termux/files/usr/bin/python3_modules/@mapbox/node-pre-gyp Completed in 1297ms

gyp info spawn args [

gyp info spawn args ‘/data/data/com.termux/files/usr/lib/node_modules/npm/node_modules/node-gyp/gyp/gyp_main.py’,

gyp info spawn args ‘binding.gyp’,

gyp info spawn args ‘-f’,

gyp info spawn args ‘make’,

gyp info spawn args ‘-I’,

gyp info spawn args ‘/data/data/com.termux/files/home/node-test/node_modules/bcrypt/build/config.gypi’,

gyp info spawn args ‘-I’,

gyp info spawn args ‘/data/data/com.termux/files/usr/lib/node_modules/npm/node_modules/node-gyp/addon.gypi’,

gyp info spawn args ‘-I’,

gyp info spawn args ‘/data/data/com.termux/files/home/.cache/node-gyp/20.11.1/include/node/common.gypi’,

gyp info spawn args ‘-Dlibrary=shared_library’,

gyp info spawn args ‘-Dvisibility=default’,

gyp info spawn args ‘-Dnode_root_dir=/data/data/com.termux/files/home/.cache/node-gyp/20.11.1’,

gyp info spawn args ‘-Dnode_gyp_dir=/data/data/com.termux/files/usr/lib/node_modules/npm/node_modules/node-gyp’,

gyp info spawn args ‘-Dnode_lib_file=/data/data/com.termux/files/home/.cache/node-gyp/20.11.1/<(target_arch)/node.lib’,

gyp info spawn args ‘-Dmodule_root_dir=/data/data/com.termux/files/home/node-test/node_modules/bcrypt’,

gyp info spawn args ‘-Dnode_engine=v8’,

gyp info spawn args ‘–depth=.’,

gyp info spawn args ‘–no-parallel’,

gyp info spawn args ‘–generator-output’,

gyp info spawn args ‘build’,

gyp info spawn args ‘-Goutput_dir=.’

gyp info spawn args ]

gyp: Undefined variable android_ndk_path in binding.gyp while trying to load binding.gypCompleted in 1297ms

gyp ERR! configure error ify:semver: timing reifyNode:node_modules/@mapbox/node-pre-gyp Completed in 1297ms

gyp ERR! stack Error: gyp failed with exit code: 1

gyp ERR! stack at ChildProcess. (/data/data/com.termux/files/usr/lib/node_modules/npm/node_modules/node-gyp/lib/configure.js:271:18)

gyp ERR! stack at ChildProcess.emit (node:events:518:28)

gyp ERR! stack at ChildProcess._handle.onexit (node:internal/child_process:294:12)

gyp ERR! System Linux 4.4.146+

gyp ERR! command “/data/data/com.termux/files/usr/bin/node” “/data/data/com.termux/files/usr/lib/node_modules/npm/node_modules/node-gyp/bin/node-gyp.js” “configure” “–fallback-to-build” “–module=/data/data/com.termux/files/home/node-test/node_modules/bcrypt/lib/binding/napi-v3/bcrypt_lib.node” “–module_name=bcrypt_lib” “–module_path=/data/data/com.termux/files/home/node-test/node_modules/bcrypt/lib/binding/napi-v3” “–napi_version=9” “–node_abi_napi=napi” “–napi_build_version=3” “–node_napi_label=napi-v3”

gyp ERR! cwd /data/data/com.termux/files/home/node-test/node_modules/bcrypt

gyp ERR! node -v v20.11.1

gyp ERR! node-gyp -v v10.0.1

gyp ERR! not ok

node-pre-gyp ERR! build error emver: timing reifyNode:node_modules/@mapbox/node-pre-gyp Completed in 1297ms

node-pre-gyp ERR! stack Error: Failed to execute ‘/data/data/com.termux/files/usr/bin/node /data/data/com.termux/files/usr/lib/node_modules/npm/node_modules/node-gyp/bin/node-gyp.js configure –fallback-to-build –module=/data/data/com.termux/files/home/node-test/node_modules/bcrypt/lib/binding/napi-v3/bcrypt_lib.node –module_name=bcrypt_lib –module_path=/data/data/com.termux/files/home/node-test/node_modules/bcrypt/lib/binding/napi-v3 –napi_version=9 –node_abi_napi=napi –napi_build_version=3 –node_napi_label=napi-v3’ (1)

node-pre-gyp ERR! stack at ChildProcess. (/data/data/com.termux/files/home/node-test/node_modules/@mapbox/node-pre-gyp/lib/util/compile.js:89:23)

node-pre-gyp ERR! stack at ChildProcess.emit (node:events:518:28)

node-pre-gyp ERR! stack at maybeClose (node:internal/child_process:1105:16)

node-pre-gyp ERR! stack at ChildProcess._handle.onexit (node:internal/child_process:305:5)

node-pre-gyp ERR! System Linux 4.4.146+

node-pre-gyp ERR! command “/data/data/com.termux/files/usr/bin/node” “/data/data/com.termux/files/home/node-test/node_modules/.bin/node-pre-gyp” “install” “–fallback-to-build”

node-pre-gyp ERR! cwd /data/data/com.termux/files/home/node-test/node_modules/bcrypt

node-pre-gyp ERR! node -v v20.11.1

node-pre-gyp ERR! node-pre-gyp -v v1.0.11

node-pre-gyp ERR! not ok

Failed to execute ‘/data/data/com.termux/files/usr/bin/node /data/data/com.termux/files/usr/lib/node_modules/npm/node_modules/node-gyp/bin/node-gyp.js configure –fallback-to-build –module=/data/data/com.termux/files/home/node-test/node_modules/bcrypt/lib/binding/napi-v3/bcrypt_lib.node –module_name=bcrypt_lib –module_path=/data/data/com.termux/files/home/node-test/node_modules/bcrypt/lib/binding/napi-v3 –napi_version=9 –node_abi_napi=napi –napi_build_version=3 –node_napi_label=napi-v3’ (1)

npm ERR! code 1

npm ERR! path /data/data/com.termux/files/home/node-test/node_modules/bcrypt

npm ERR! command failed

npm ERR! command sh -c node-pre-gyp install –fallback-to-build

npm ERR! A complete log of this run can be found in: /data/data/com.termux/files/home/.npm/_logs/2024-02-27T13_43_53_215Z-debug-0.log`

I hope this command works and installs bcrypt!

I used DOM manipulation to get images to show up when a div and button is clicked. The only problem with it is that I don’t know how to resize the images. When I remove the “style = display: “none”;” line the sizing works but the images aren’t hidden until you clear it and click the div & button again. I don’t know how I would go about fixing this

<h3>Pick an end image</h3>
<div class="box" id="img">
    <div id="end1" class="ending1">Sub End - end 1</div>
    <div id="end2" class="ending2">Knife End - end 2</div>
    <div id="end3" class="ending3">Safe End - end 3</div>
    <br><br>
    <div id="end4" class="ending4">Axe End - end 4</div>
    <div id="end5" class="ending5">Coffin End - end 5</div>
    <div id="end6" class="ending6">True End - end 6</div>

    <br><br>
    <button id="show">Show</button>
    <button id="clear">Clear</button>
</div>

<h3>Result</h3>
<div class="box" id="results">
<img class="endone" id="picture1" src="media/end1.png" style = "display: none;">
<img class="endtwo" id="picture2" src="media/end2.png" style = "display: none;">
<img class="endthree" id="picture1" src="media/end3.png" style = "display: none;">
<img class="endfour" id="picture2" src="media/end4.png" style = "display: none;">
<img class="endfive" id="picture1" src="media/end5.png" style = "display: none;">
<img class="endsix" id="picture2" src="media/end6.png" style = "display: none;">
</div>

/* My JS if needed */

var data = [];

function showEnd1() {
  for (var i = 0; i < data.length; i++) {

    var showImage = document.createElement("img");
    showImage.id = "new" + data[i];
    showImage.classList = ".ending1";
    showImage.innerHTML = data[i];
    showImage.src = src="media/end1.png";

    var results = document.querySelector("#results");
        results.appendChild(showImage); 
  }

 data = [];

}

function showEnd2() {
    for (var i = 0; i < data.length; i++) {
  
      var showImage = document.createElement("img");
      showImage.id = "new" + data[i];
      showImage.classList = ".ending2";
      showImage.innerHTML = data[i];
      showImage.src = src="media/end2.png";
  
      var results = document.querySelector("#results");
          results.appendChild(showImage); 

    }
  
   data = [];
  
  }

  function showEnd3() {
    for (var i = 0; i < data.length; i++) {
  
      var showImage = document.createElement("img");
      showImage.id = "new" + data[i];
      showImage.classList = ".ending3";
      showImage.innerHTML = data[i];
      showImage.src = src="media/end3.png";
  
      var results = document.querySelector("#results");
          results.appendChild(showImage); 

    }
  
   data = [];
  
  }

  function showEnd4() {
    for (var i = 0; i < data.length; i++) {
  
      var showImage = document.createElement("img");
      showImage.id = "new" + data[i];
      showImage.classList = ".ending4";
      showImage.innerHTML = data[i];
      showImage.src = src="media/end4.png";
  
      var results = document.querySelector("#results");
          results.appendChild(showImage);

    }
  
   data = [];
  
  }

  function showEnd5() {
    for (var i = 0; i < data.length; i++) {
  
      var showImage = document.createElement("img");
      showImage.id = "new" + data[i];
      showImage.classList = ".ending5";
      showImage.innerHTML = data[i];
      showImage.src = src="media/end5.png";
  
      var results = document.querySelector("#results");
          results.appendChild(showImage); 

    }
  
   data = [];
  
  }

  function showEnd6() {
    for (var i = 0; i < data.length; i++) {

      var lastLetter = data[i].charAt(data[i].length - 1);
  
      var showImage = document.createElement("img");
      showImage.id = "new" + data[i];
      showImage.classList = ".ending" + lastLetter;
      showImage.innerHTML = data[i];
      showImage.src = src="media/end" + lastLetter + ".png";
  
      var results = document.querySelector("#results");
          results.appendChild(showImage); 

    }
  
   data = [];
  
  }

function clearResult () {
 /* data = []; */

  var results = document.getElementById("results");
    results.innerHTML = "";

}

function addToArray() {
    data.push(this.innerHTML);

}

window.onload = function end6() {
  var btnShow = document.getElementById("show");
  btnShow.addEventListener("click", showEnd6);


  var btnClear = document.getElementById("clear");
  btnClear.addEventListener("click", clearResult)

  var btnEnd = document.querySelectorAll("[class^=ending]");

  for (var i = 0; i < btnEnd.length; i++) {
      btnEnd[i].addEventListener("click", addToArray);
  }
}

Im using React. Installed according to these instructions, used online builder:
Integrating a build from the online builder

I’m trying to add a double click event listener on editor using this instruction: How to listen on a double-click?.

When I try to import: import { DomEventObserver } from 'ckeditor5/src/engine';,
I get an error:Uncaught CKEditorError: ckeditor-duplicated-modules

What am i doing wrong?

 FAIL  tests/index.test.ts
  ● Test suite failed to run

    Jest encountered an unexpected token

    Jest failed to parse a file. This happens e.g. when your code or its dependencies use non-standard JavaScript syntax, or when Jest is not configured to support such syntax.

    Out of the box Jest supports Babel, which will be used to transform your files into valid JS based on your Babel configuration.

    By default "node_modules" folder is ignored by transformers.

    Here's what you can do:
     • If you are trying to use ECMAScript Modules, see https://jestjs.io/docs/ecmascript-modules for how to enable it.
     • If you are trying to use TypeScript, see https://jestjs.io/docs/getting-started#using-typescript
     • To have some of your "node_modules" files transformed, you can specify a custom "transformIgnorePatterns" in your config.
     • If you need a custom transformation specify a "transform" option in your config.
     • If you simply want to mock your non-JS modules (e.g. binary assets) you can stub them out with the "moduleNameMapper" config option.

    You'll find more details and examples of these config options in the docs:
    https://jestjs.io/docs/configuration
    For information about custom transformations, see:
    https://jestjs.io/docs/code-transformation

    Details:

    /Users/bytedance/workspace/bytedance/Actoflow/node_modules/.pnpm/[email protected]/node_modules/globby/index.js:1
    ({"Object.<anonymous>":function(module,exports,require,__dirname,__filename,jest){import process from 'node:process';
                                                                                      ^^^^^^

    SyntaxError: Cannot use import statement outside a module



      at Runtime.createScriptFromCode (node_modules/.pnpm/[email protected]/node_modules/jest-runtime/build/index.js:1505:14)
      at Object.<anonymous> (tests/channelRegistry.ts:33:21)
      at Object.<anonymous> (tests/index.test.ts:25:30)

Test Suites: 1 failed, 1 total
Tests:       0 total
Snapshots:   0 total
Time:        0.719 s
Ran all test suites.

I have tried a lots of methods, but nothing is working.
I have seen those anwsers:
How to make ts-jest work with import/export syntax of the js files that are being imported in my imports?
How to make ts-jest work with import/export syntax of the js files that are being imported in my imports?

jest.config.js:

module.exports = {
  preset: 'ts-jest/presets/js-with-ts',
  testEnvironment: 'node',
  transform: {
    'node_modules/globby/.+\.(j|t)sx?$': ['ts-jest', '<rootDir>/tests/tsconfig.json'],
  },
  transformIgnorePatterns: ['node_modules/(?!globby/.*)'],
};

I had a function to insert values into a DB in expo-sqlite, after I updated my app to v50, my DB execution stopped working. I don’t know why, there is no error in the console. Can someone help me?

Creating tables in useEffect works fine
Here is my useEffect:

useEffect(() => {
        SecureStore.getItemAsync("_id").then((token) => setCurrentUserId(token));
        SecureStore.getItemAsync("_lang").then((token) => setLang(token));

        db.transaction((tx) => {
            tx.executeSql(
                "create table if not exists meters (id integer primary key not null, userID text, serial_number text, description text, bt_address text, supplier text, supplier_id integer, type text, meter_length integer, supplier_price text, pod text);"
            );
            tx.executeSql(
                "create table if not exists readings (id integer primary key not null, metersID text, date integer, volume text, type text, photo text, state integer, rollover integer, rf_adr text, price text, description text);"
            );
            console.log("we are here");
        });
        NetInfo.fetch().then((state) => {
            if (state.isConnected === false) {
                Alert.alert(i18n.t("warning"), i18n.t("checkYourInternetConnection"), [{ text: "OK" }]);
                return false;
            } else {
                try {
                    fetch("...", {
                        method: "GET",
                    }).then(async (response) => {
                        let res = await response.json();
                        setSupplierItems(res.records);
                    });
                } catch (err) {
                    console.log(err.message);
                }
            }
        });
    }, [userID, lang]);

And here is my function that doesn’t work:

NetInfo.fetch().then((state) => {
            console.log(userID);
            if (state.isConnected === false) {
                Alert.alert(i18n.t("warning"), i18n.t("checkYourInternetConnection"), [{ text: "OK" }]);
                return false;
            } else {
                console.log("123");
                db.transaction(
                    (tx) => {
                        console.log("we are here222");
                        tx.executeSql(
                            `select serial_number from meters where serial_number="${serial_number}" AND type="${type}";`,
                            [],
                            (_, { rows }) => {
                                console.log(rows.length);
                                if (JSON.stringify(rows.length) == 0) {
                                    tx.executeSql(
                                        `insert into meters (userID, serial_number, description, bt_address, supplier, supplier_id, type, meter_length, supplier_price, pod) values (?, ?, ?, ?, ?, ?, ?, ?, ?, ?)`,
                                        [
                                            userID,
                                            serial_number,
                                            description,
                                            bt_address,
                                            supplier,
                                            Number(filterValue[0].ID),
                                            type === "Elektrina" ? type + electricitySelectedType : type,
                                            meterLength,
                                            price,
                                            numberOfTheMeasuredLocation,
                                        ],
                                        (transact, resultset) => console.log("we made it", resultset),
                                        (transact, err) => console.log("We have encounter an Error", err)
                                    );
                                    tx.executeSql(
                                        `insert into readings (metersID, date, volume, type, photo, state, rollover, rf_adr, price, description) values (?, ?, ?, ?, ?, ?, ?, ?, ?, ?)`,
                                        [
                                            serial_number,
                                            dateMiliseconds,
                                            volume,
                                            type === "Elektrina" ? type + electricitySelectedType : type,
                                            selectedImage,
                                            0,
                                            0,
                                            bt_address,
                                            price,
                                            "",
                                        ],
                                        (transact, resultset) => console.log("we made it", resultset),
                                        (transact, err) => console.log("We have encounter an Error", err)
                                    );
                                    Alert.alert(i18n.t("success"), i18n.t("yourGaugeHasBeenSuccessfullyAdded"), [
                                        {
                                            text: "OK",
                                            onPress: () => {
                                                router.replace("/home");
                                            },
                                        },
                                    ]);
                                } else {
                                    Alert.alert(i18n.t("warning"), i18n.t("theMeterAlreadyExists"), [{ text: "OK" }]);
                                    return false;
                                }
                            },
                            [serial_number]
                        );
                    },
                    (error) => {
                        // Handle any errors that occur during the transaction
                        console.error("Transaction failed", error);
                    },
                    () => {
                        // This function is called if the transaction is successful
                        console.log("Transaction successful");
                        // forceUpdate;
                    }
                );
            }
        });

The problem is console.log(“123”) is working, but console.log(“we are here222”) not. I don’t understand why.

What is the best method to send data from a child component to the parent in Stencil.js?
I tried using a callback method, but it looks like it is imperative to use Events to accomplish this. It seems to me that we write a lot more to have 2 way data transfer than I would think it is necessary.
I have to mention that I am building a web components library that could be used later in either React or Angular projects.

I have written a React module and I’m trying to write a standalone test page for demonstration purposes.

I have started with examples from: https://dev.to/jeetvora331/write-react-code-with-cdn-in-html-56i9 and https://github.com/Dereje1/Recipe/blob/master/index.html to produce the following. However I can’t seem to get the correct combination of import/exports to make it all work. I get reference errors, unknown require, undefined name and a host of other import/export related problems.

Web page:

<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>React-ImgBox</title>
    <script src="https://unpkg.com/react@18/umd/react.development.js" crossorigin></script>
    <script src="https://unpkg.com/react-dom@18/umd/react-dom.development.js" crossorigin></script>
    <script src="https://unpkg.com/@babel/[email protected]/babel.min.js" crossorigin></script>
    <script type="text/babel" data-type="module" src="reactjs-imgbox.js"></script>
    <script type="text/babel" src="main.js"></script>
</head>

<body>
    <div id="root"></div>

    <script type="text/babel" data-presets="react,stage-3">
        const root = ReactDOM.createRoot(document.getElementById("root"))
        root.render(<Main />);
    </script>
</body>

</html>

Main.js demo code:

'use client'

import ImgBox from './reactjs-imgbox.js'

function Example1(props) {
    return (
        <div className="row">
            <div className="col-sm-6 col-lg-6">
                <div className="panel panel-default">
                    <div className="panel-body">Use x and y co-ordinates with width and height.</div>
                </div>
                <pre id="jack_me_img_code"></pre>
                <pre id="jack_me_js_code"></pre>
            </div>
            <div className="col-sm-6 col-lg-6">
                <ImgBox x="525" y="50" w="300" h="350" name="jack_me" markStyle={{'border': '4px solid red'}}
                    id="jack_me" className="img-fluid"
                    src="//cdn.bigsoft.co.uk/projects/jquery-imgbox/img/jack_me.jpg" />
            </div>
        </div>
    )
}

export function Main(props) {
    return (
        <div>
            <Example1/>
        </div>
    )
}

react-imgbox.js module to be tested:

'use client'

import React, { useCallback, useEffect, useMemo, useRef, useState } from 'react'

    
export default function ImgBox(props) {

    return (
        <div>
            Hello World
        </div>
    )

}

How can I glue them together to get what I want?

The .html and main.js files can be modified for this example but my React module is finished and builds within my (larger) Node project so I don’t really want to change it at this late stage if possible.

I am trying to update the array in firebase which contain some modified and unmodified objects. Now i want to skip the unmodified data to update in firebase. Please help me to do that.

Basically i am getting error

No document to update: projects/…..

updatedList(previousIndex: number, previousContainerData: Card[], currentIndex: number, currentContainerData: Card[]): List[] {

    const previousList = { ...this.listItems[previousIndex] }
    const currentList = { ...this.listItems[currentIndex] }

    if (previousList && currentList) {
      previousList.cards = (previousList.cards as Card[]).filter(card => !previousContainerData.find(c => c.id === card.id));
      currentList.cards = (currentList.cards as Card[]).filter(card => !currentContainerData.find(c => c.id === card.id));

      currentList.cards.push(...previousContainerData);
      previousList.cards.push(...currentContainerData);

      previousList.cards.forEach((card, index) => {
        card.order = index + 1;
      });
      currentList.cards.forEach((card, index) => {
        card.order = index + 1;
      });
    }

    return this.listItems;
  }

this.cardService.update(this.boardId, list).pipe(
     takeUntil(this.destroy$)
).subscribe((res) => {
     console.log(res)
})

  update(boardId: string, lists: List[]): Observable<void> {
    const batch = this.afs.firestore.batch()
    lists.forEach(list => {
      const cardsCollectionRef = this.afs.collection('boards').doc(boardId).collection('list').doc(list.id).collection('cards');
      if (list.cards) {
        list.cards.forEach((card: Card) => {
          const cardRef = cardsCollectionRef.doc(card.id);
          batch.update(cardRef.ref, card);
        });
      }
    });

    return from(batch.commit())
      .pipe(
        catchError(error => {
          console.error('Error during batch update:', error);
          // Handle the error here, potentially retry or notify the user
          return throwError(error);
        }),
        finalize(() => {
          // This block will be executed regardless of success or failure
          console.log('Batch update completed');
        })
      );
  }

Any solution appreciated!

I try to make simple project with React .I have a TodoItem component. My expectation is to change the border color after the checkbox is checked. However, after checking the checkbox, my component doesn’t change color. Am I doing something wrong? What steps should I take?

App.jxs

import './App.css'
import './components/TodoItem/TodoItem.jsx'
import TodoItem from './components/TodoItem/TodoItem.jsx'

function App() {
  return (
    <>
      <TodoItem taskName={'Clean House'} statusInit={true} ></TodoItem>
      <TodoItem taskName={'Read Book'} statusInit={false} ></TodoItem>
      <TodoItem taskName={'Clean Bed'} statusInit ={true} ></TodoItem>
    </>
  )
}

export default App

TodoItem.jsx

import "./TodoItem.css";
import { useState } from "react";

function TodoItem({ taskName, statusInit }) {

  const [status, setStatus] = useState(statusInit);
  const [count, setCount] = useState(0);
  let myClass = statusInit ? 'done' : 'todo-item'
 

  function checkBoxOnChange(e) {
    setStatus(e.target.checked);
    setCount(count + 1);
    statusInit = e.target.checked;
    myClass = statusInit ? 'done' : 'todo-item'
  }
  return (
    <>
      <main className={myClass}>
        <input 
          checked={status}
          type="checkbox"
          onChange={checkBoxOnChange}
          id="todo-item-status"
        />
        <p>{`${status}`}</p>
        <p>{taskName}</p>
        <p>{count}</p>
      </main>
    </>
  );
}

export default TodoItem;

TodoItem.css

.todo-item{
    width: 300px;
    margin: 16px;
    padding: 16px; 
    border: solid royalblue 2px;
    border-radius: 4px;
    display: flex;
    justify-content: space-between;
}

.done{
    width: 300px;
    margin: 16px;
    padding: 16px; 
    border: solid green 2px;
    border-radius: 4px;
    display: flex;
    justify-content: space-between;
}

I am trying to write a javascript function that iterates through the rows of a table, picks up modified input values and builds a concatenated string of pipe delimited values onclick. Here is an example of the table which can vary in the number of rows …

The result is no alertbox … please can someone let me know why the alerts work in the each function but not outside that function and how to build these strings which ultimately will be passed via ajax.

The alert boxes work at the point of collection for each TR, however the concatenation and ultimately the alert outside of the each function does not work.

function test() {
  //alert("The button was clicked.");

  var scf = '';
  var qtyf = '';
  var i = 1;
  var t = document.getElementById('my_id');

  $("#my_id tr").each(function() {
    var sc = $(t.rows[i].cells[0]).text(); //this works and returns the stockcode
    var qty = $(t.rows[i].cells[3]).find("input").val();

    //alert(sc);
    //alert(qty);

    scf = scf + '|' + sc;
    qtyf = qtyf + '|' + qty;
    i++;
  });

  alert(scf);
  alert(qtyf);
};

<table>
  <thead>
    <tr>
      <th class="column-code">Code</th>
      <th class="column-attribute">Colour</th>
      <th class="column-attribute">Size</th>
      <th class="column-qty">Qty</th>
      <th class="column-remove">&nbsp;</th>
    </tr>
  </thead>
  <tbody class="product-queue-rows">
    <tr>
      <td class="product-sku">CZSPRBP32</td>
      <td><span class="swatch swatch-royal-blue"></span> <span class="swatch-title">Royal Blue</span></td>
      <td>32</td>
      <td><label class="fancy-quantity"><input type="number" class="product-quantity" value="1" data-sku="CZSPRBP32"><a href="#" class="fq-up" title="Increase"></a><a href="#" class="fq-down" title="Decrease"></a></label></td>
      <td><a href="#" class="remove-button" title="Remove item" aria-label="Remove item" data-sku="CZSPRBP32"><svg width="24px" height="24px" viewBox="0 0 24 24" version="1.1" xmlns="http://www.w3.org/2000/svg"><polygon class="svg-cross" points="17.744 20 12 14.256 6.256 20 4 17.744 9.744 12 4 6.256 6.256 4 12 9.744 17.744 4 20 6.256 14.256 12 20 17.744"></polygon></svg></a></td>
    </tr>
    <tr>
      <td class="product-sku">CZSPRBP34</td>
      <td><span class="swatch swatch-royal-blue"></span> <span class="swatch-title">Royal Blue</span></td>
      <td>34</td>
      <td><label class="fancy-quantity"><input type="number" class="product-quantity" value="1" data-sku="CZSPRBP34"><a href="#" class="fq-up" title="Increase"></a><a href="#" class="fq-down" title="Decrease"></a></label></td>
      <td><a href="#" class="remove-button" title="Remove item" aria-label="Remove item" data-sku="CZSPRBP34"><svg width="24px" height="24px" viewBox="0 0 24 24" version="1.1" xmlns="http://www.w3.org/2000/svg"><polygon class="svg-cross" points="17.744 20 12 14.256 6.256 20 4 17.744 9.744 12 4 6.256 6.256 4 12 9.744 17.744 4 20 6.256 14.256 12 20 17.744"></polygon></svg></a>
      </td>
    </tr>
  </tbody>
</table>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>

I’m having difficulties passing a var to Ckfinder for it to open the folder matching the currently edited page.

The wanted folder has the same name as my database field “gallery” that I can pass in the url this way :

$url_edit = 'modifier-' . $_GET['page'] . '-' . $data["id"] . '-' . $data['gallery'] . '';
// RewriteRule ^modifier-(.*)-([0-9]+)-(.*)$ admin.php?modif=$1&id=$2&dir=$3 [L]

I think this part of Ckfinder’s config.php could be the best spot to pass my var $_GET['dir'] and point to the specific folder (default : ‘photos’) :

if(isset($_GET['dir'])) {
    die(var_dump('DEBUG')); // DEBUG
    $galleryDir = '/' . $_GET['dir'];
}

$config['resourceTypes'][] = array(
    'name'              => 'Photos',
    'directory'         => 'photos' . $galleryDir . '' ,
    'maxSize'           => 0,
    'allowedExtensions' => 'bmp,gif,jpeg,jpg,png',
    'deniedExtensions'  => '',
    'backend'           => 'default'
);

I’m opening Ckfinder as a modal using this code from the official documentation (I didn’t alter this as I’m not confortable with Javascript) :

var button1 = document.getElementById( 'ckfinder-galerie' );

button1.onclick = function() {
    selectFileWithCKFinder( 'ckfinder-input-1' );
};

function selectFileWithCKFinder( elementId ) {
    CKFinder.modal( {
        chooseFiles: true,
        width: 800,
        height: 600,
        onInit: function( finder ) {
            finder.on( 'files:choose', function( evt ) {
                var file = evt.data.files.first();
                var output = document.getElementById( elementId );
                output.value = file.getUrl();
            } );

            finder.on( 'file:choose:resizedImage', function( evt ) {
                var output = document.getElementById( elementId );
                output.value = evt.data.resizedUrl;
            } );
        }
    } );
}

PROBLEM : $_GET['dir'] doesn’t seem to be passed through the modal, so it currently doesn’t create the needed $galleryDir var (nor the die() function used for debug). Am I doing something wrong here ? I’m also open to other methods if this one isn’t as good as I believe.

Thanks for the future help !

I have a domain and the dns lookup for the spf record is exceeding the limit of 10 and it is coming as 21
how can I reduce the no of dns lookups?
Also give the solution on code level – my backend is in nodejs

spf flattening will also not work as it also has 255 character limit

I am working on implementing a parallax scrolling effect on a website to create an illusion of depth as users scroll. This effect is achieved by moving background images at a slower rate than the foreground content, using a combination of CSS for styling and JavaScript for scroll event handling.

The parallax effect works as expected on desktop browsers like Chrome and Firefox, providing a smooth and visually appealing depth effect. However, I’ve encountered inconsistency across different browsers and devices. Intriguingly, the parallax scrolls as intended when my laptop is connected to an external monitor but not on the laptop’s screen itself, except when using Safari, where it works fine regardless of the display being used.

What I Tried:

CSS Adjustments: I experimented with various CSS properties related to the parallax effect, such as transform, perspective, and background-attachment. My goal was to see if different configurations could improve compatibility or performance across browsers.

JavaScript Optimization: I optimized the scroll event handling in JavaScript to minimize performance overhead and ensure smooth animation. This included debouncing scroll events and using requestAnimationFrame for updating positions to match the scrolling.

Testing Across Devices: I conducted extensive testing across multiple browsers and devices, including desktops, laptops, tablets, and smartphones, to observe the parallax effect’s behavior under different conditions.

External Monitor: Noticing the issue, I also tested the website with an external monitor connected to my laptop to compare the behavior.

Consistency Across Browsers and Devices: My primary expectation was that the parallax effect would work consistently across all browsers and devices, providing users with a seamless and engaging experience regardless of their platform.

Smooth Scrolling on All Screens: Given that the effect worked well on desktop browsers like Chrome and Firefox, I expected similar performance on mobile devices and Safari, as well as consistent behavior regardless of whether the laptop’s screen or an external monitor was used.

No Major Compatibility Issues: Considering the widespread use of parallax effects and the technologies involved (CSS and JavaScript), I did not anticipate encountering significant compatibility issues that could not be resolved with standard web development practices.

Its just very odd that testing it on chrome on my laptop makes it not want to work. Any help would be really appreciated.

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Parallax Demo</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="parallax"></div>
<div class="content">
  <h1>Parallax Effect</h1>
  <p>This is a simple demonstration of a parallax scrolling effect.</p>
  <p>Scroll down to see the effect!</p>
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit...</p>
</div>
<script src="script.js"></script>
</body>
</html>

body, html {
  height: 100%;
  margin: 0;
  overflow-x: hidden;
}

.parallax {
  /* The image used */
  background-image: url('your-image-url-here');

  /* Set a specific height */
  height: 500px; 

  /* Create the parallax scrolling effect */
  background-attachment: fixed;
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
}

.content {
  height: 2000px; /* Added height so you can scroll */
  background-color: rgba(255, 255, 255, 0.8);
  padding: 20px;
}

window.addEventListener('scroll', function() {
  var scrolledHeight= window.pageYOffset;
  var parallax = document.querySelector('.parallax');
  // Adjust the background position based on the scroll position
  parallax.style.backgroundPositionY = -(scrolledHeight * 0.5) + 'px';
});

Let’s say that the number of segment of the winwheel is 8 and the number of pins is 8. In my part, the positions of pins are not in the center of segments. Is there other way to adjust the position of pins so I could locate them to the center of segments?

Here is the code btw:

let theWheel = new Winwheel({
    numSegments: 8,
    outerRadius: 200,
    innerRadius: 75,
    pins: {
        number: 8, // Number of pins
        fillStyle: 'silver', // Pin color
        outerRadius: 5, // Pin outer radius
        margin: 10 // Margin between pins
    }
});

I have an input for getting password from user :
<input name="Password" id="Password" required/>
in most devices browser will try to autocomplete the password input ( based on saved passwords ),
but lets say we don’t want this behavior , **so how could we turn off autocomplete for an input? **

after searching and trying to turn off autocomplete found this solution,
set attribute autocomplete to off :
<input name="Password" id="Password" required autocomplete="off"/>
but it didn’t work, when page loads this will happen , i tried JavaScript too but it didn’t worked neither
$("#Password").val('')