Blancer.com Tutorials and projects

I’d need to select a date (on a calendar) via Javascript/Jquery. The user can only choose a date between 50 and 80 years before today date. How can I do that?
Please help

I have communication between background and content scripts

Basically it looks like:

// background script fragment

const url = 'https://www.w3.org/WAI/ER/tests/xhtml/testfiles/resources/pdf/dummy.pdf';
(async () => {
  const tab = await chrome.tabs.create({ url });

  await new Promise(resolve => setTimeout(resolve, 2000));

  if (tab.id !== undefined) {
    const response = await chrome.tabs.sendMessage(tab.id, { action: 'EXTRACT_TAB_DATA', url });
    // case "extract text from PDF" -- undefined
    // case "set text by copy and paste" -- object with key result == "Dummy PDF file copy pasted content"
    console.log(response);
  }
})();

// case "extract text from PDF" content script fragment

import * as pdfjsLib from 'pdfjs-dist';
pdfjsLib.GlobalWorkerOptions.workerSrc = chrome.runtime.getURL('pdf.worker.js');


chrome.runtime.onMessage.addListener(async (message, sender, sendResponse) => {
  if (message.action === 'EXTRACT_TAB_DATA') {
    const pdfData = await fetch(message.url).then(res => res.arrayBuffer());
    const pdf = await pdfjsLib.getDocument({ data: pdfData }).promise;

    let text = '';
    for (let i = 1; i <= pdf.numPages; i++) {
      const page = await pdf.getPage(i);
      const content = await page.getTextContent();
      text += content.items.map((item: any) => item.str).join(' ') + 'n';
    }

    console.log(text); // here everything as expected: text is in console

    sendResponse({ result: text });

    return true;
  }

  return true;
});

// case "set text by copy and paste" content script fragment

import * as pdfjsLib from 'pdfjs-dist';
pdfjsLib.GlobalWorkerOptions.workerSrc = chrome.runtime.getURL('pdf.worker.js');


chrome.runtime.onMessage.addListener(async (message, sender, sendResponse) => {
  if (message.action === 'EXTRACT_TAB_DATA') {
    const text = 'Dummy PDF file copy pasted content';
    sendResponse({ result: text });

    return true;
  }

  return true;
});

used version of pdfjs-dist is ^2.16.105. basically it doesn’t matter the version. matter result of extracting and sending back to background script

my manifest file fragment

{
  "manifest_version": 3,
  "action": {
    "default_title": "Open sidebar",
    "default_icon": "img/logo-48.png"
  },
  "options_page": "options.html",
  "background": {
    "service_worker": "service-worker-loader.js",
    "type": "module"
  },
  "content_scripts": [
    {
      "matches": [
        "http://*/*",
        "https://*/*"
      ],
      "js": [
        "src/contentScript/index.ts-loader.js"
      ]
    }
  ],
  "web_accessible_resources": [
    {
      "resources": [
        "img/logo-16.png",
        "img/logo-32.png",
        "img/logo-48.png",
        "img/logo-128.png"
      ],
      "matches": []
    },
    {
      "matches": [
        "<all_urls>"
      ],
      "resources": [
        "**/*",
        "*"
      ],
      "use_dynamic_url": false
    }
  ],
  "permissions": [
    "sidePanel",
    "storage",
    "identity",
    "activeTab",
    "tabs",
    "scripting"
  ],
  "host_permissions": [
    "<all_urls>"
  ]
}

what is wrong with sending back message from content to background script in case extract from pdf?

I add my nodes in elements and then I want edges to be generated for each node according to certain node attributes (node ID for target, and a new property “origin” for source).

I’m having trouble getting that origin value into the new edge data — trying to use ele.data().

var cy = cytoscape({
  container: document.getElementById('cy'),
  layout: {
    name: 'cose'
  },
  style: [
    {
      selector: 'node',
      style: {
        'label': 'data(label)',
        'color': '#fff'
      }
    },
    {
      selector: 'edge',
      style: {
        'line-color': '#fff'
      }
    }
  ],
   elements: [
    { data: { id: 'n101', label: 'Node 1', origin: 'n104' } }, // Maybe I'm not creating the origin value correctly? No I have to do something else?
    { data: { id: 'n102', label: 'Node 2', origin: 'n101' } },
    { data: { id: 'n103', label: 'Node 3', origin: 'n102' } },
    { data: { id: 'n104', label: 'Node 4', origin: 'n103' } }
  ]
});

cy.nodes().forEach(function( ele ){
    cy.add({
      group: 'edges',
      data: { source: ele.data(origin), target: ele.id() }
      /*  ele.id() works to set the target, but
          I don't know if I'm using ele.data()
          correctly. If I replace it with something
          like 'n101', the edges get made, so I
          assume this is where my issue is? */
    })
});

I have a long experience with virtual tables, my latest implementation in Vue. It’s complex, the table rows have child components, etc. So a virtual table would work for years without seeing re-rendering of the updated rows, for example the new rows at the top or the bottom in Chrome. In Firefox the re-rendering was always visible. In some latest build of Chrome the re-rendering became visible in Chrome too which is greatly ruins UX. No code changes were introduced (in fact, the old version of the virtual grid started behave the same).

So my question: is anybody aware of some recent changes in Chrome’s rendering (especially on a scroll event).

I’ve tried to recreate a vue virtual table in the playground. You could see a heavy scroll listener, so the scrolling is heavy/lagging, BUT no flickering. Unfortunately the very first version of my Vue virtual table flickers so there’s no way to catch with git bisect when it started flickering. So maybe some Chrome hack is available, or at least to understand why Chrome started flickering on scrolling.

Hello Everyone! I have problem with telegram browser. Firstly web site open but 4,5 second after output error (Oops.. Failed to load website)

How to find solution of problem, I cannot open browser console so I’m having trouble finding the error.How can I get rid of the error or how can I find the problem?

I’m experiencing unexpected behavior click and drag events between a div and the body in JavaScript.

Here’s the behavior I’m seeing when I click and drag:

• Start in the floating div, release in body → logs Body Event
• Start and release in floating → logs Floating Event
• Start in body, release in floating → logs Body Event
• Start and release in body → logs Body Event

The surprising case is the third one: Why doesn’t the click event fire on the floating div when I release the mouse over it, even though the mouseup happens on it?

Here’s the setup:

document.getElementById('floating').addEventListener('click', (e) => {
  e.stopPropagation();
  console.log('Floating Event');
});

document.body.addEventListener('click', () => {
  console.log('Body Event');
});

body, html {
  margin: 0;
  padding: 0;
  width: 100%;
  height: 100%;
}

.floating-object {
  position: absolute;
  top: 60px;
  left: 200px;
  width: 150px;
  height: 150px;
  background: orange;
  border-radius: 50%;
  z-index: 1002;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.4);
}

<div class="floating-object" id="floating"></div>

Error I’m facing :

My server file :

const express = require('express');
const cors = require('cors');

const todoRoutes = require('./routes/todoRoutes');

const app = express();
// To remove  res.setHeader('X-Powered-By', 'Express'); error :
app.disable('x-powered-by');

//midlleware 
app.use(cors());
app.use(express.json()); 

// Routers :
app.use('/api/todo', todoRoutes); 


app.listen(5000);  

Router file :

const express = require('express');

const router = express.Router();

const todoController = require('../controller/todoController'); 

router.route('/').post(todoController.addTodo).get(todoController.getTodo);
router.route('/:id').get(todoController.getTodoByID).put(todoController.updateTodo).delete( todoController.deleteTodo);

Controller file :

const pool = require("../db");

const addTodo = async (req, res, next) => {
    try {
        const { description } = req.body;
        const newTodo = await pool.query(
          "INSERT INTO todo (description) VALUES($1) RETURNING *",
          [description]
        );
    
        res.json(newTodo.rows[0]);
      } catch (err) {
        console.error(err.message);
      }
};


module.exports = { addTodo };

I’m unable to understand what’s wrong?

I have a version (eg. diamond-pearl) and want to filter encounters. The encounters return data like diamond. I can do a simple string check (which I currently do), but this is not ideal because it isn’t perfect. I could hard code each one but this defeats the purpose of an API and requires updating any time new data is entered, which is somthing I 100% want to avoid.

Current implementation (svelte 5):

let filteredEncounters = $derived.by(() => {
        console.log(encounters);
        if (version === 'all') return encounters;

        return encounters
            .map((e) => {
                // TODO: Stupid string match: checks if `version` (eg. `diamond-pearl`) includes `version.name` (eg. `diamond`)
                // In the future, we need to map games and versions which are different
                const matchingVersions = e.version_details.filter((v) => version.includes(v.version.name));

                if (matchingVersions.length > 0) {
                    return {
                        ...e,
                        version_details: matchingVersions
                    };
                }

                return null;
            })
            .filter(Boolean);
    });

I’m trying to set up the same ESLint configuration in my new React 19 + Vite app using the modern eslint.config.js format. However, it’s not working — the linter doesn’t show any errors or warnings in the editor.
New eslint.config.js

import pluginReact from "eslint-plugin-react";
import { defineConfig } from "eslint/config";

import reactHooks from "eslint-plugin-react-hooks";
import reactRefresh from "eslint-plugin-react-refresh";
import prettier from "eslint-plugin-prettier";
import importPlugin from "eslint-plugin-import";
import react from "eslint-plugin-react";
import jsxA11y from "eslint-plugin-jsx-a11y";

export default defineConfig([
  { ignores: ["dist"] },
  {
    files: ["**/*.{js,mjs,cjs,jsx}"],
    languageOptions: {
      ecmaVersion: 2020,
      globals: globals.browser,
      parserOptions: {
        ecmaVersion: "latest",
        ecmaFeatures: { jsx: true },
        sourceType: "module",
      },
    },
    plugins: {
      "react-hooks": reactHooks,
      "react-refresh": reactRefresh,
      prettier,
      import: importPlugin,
      react,
      "jsx-a11y": jsxA11y,
    },
    rules: {
      ...js.configs.recommended.rules,
      ...reactHooks.configs.recommended.rules,
      // "no-unused-vars": ["error", { varsIgnorePattern: "^[A-Z_]" }],
      // "no-undef": ["error", { globals: { process: true } }],
      // Vite React specific
      "react-refresh/only-export-components": [
        "warn",
        { allowConstantExport: true },
      ],

      // Your custom rules from old config
      "prettier/prettier": "off",
      "no-nested-ternary": "off",
      "no-underscore-dangle": "off",
      "default-param-last": "off",
      "prefer-arrow-callback": "error",
      camelcase: ["error", { properties: "never", ignoreDestructuring: true }],
      "no-else-return": ["error", { allowElseIf: true }],
      "no-param-reassign": ["error", { props: false }],

      // Import rules
      "import/no-extraneous-dependencies": [
        "error",
        {
          devDependencies: false,
          optionalDependencies: false,
          peerDependencies: false,
        },
      ],
      "import/order": [
        "error",
        {
          pathGroups: [
            {
              pattern: "react",
              group: "external",
              position: "before",
            },
          ],
          pathGroupsExcludedImportTypes: ["builtin"],
        },
      ],
      "import/no-unused-modules": ["error", { unusedExports: true }],

      // React rules
      "react/require-default-props": "off",
      "react/jsx-no-undef": ["error", { allowGlobals: true }],
      "react/jsx-uses-vars": "error",

      // Best Practices
      eqeqeq: "error",
      "no-invalid-this": "error",
      "no-return-assign": "error",
      "no-unused-expressions": ["error", { allowTernary: true }],
      "no-useless-concat": "error",
      "no-useless-return": "error",
      "no-use-before-define": "error",
      "no-duplicate-imports": "error",
      "no-plusplus": ["error", { allowForLoopAfterthoughts: true }],

      // Variable and import rules
      "no-undef": "error",
      "no-unused-vars": [
        "error",
        {
          vars: "all",
          args: "after-used",
          ignoreRestSiblings: true,
          varsIgnorePattern: "^[A-Z_]", // Keep the pattern from new config
        },
      ],
    },
    settings: {
      react: {
        version: "detect",
      },
    },
  },
  pluginReact.configs.recommended,
]);

This is the ESLint config I used successfully in my older CRA app (.eslintrc.js):

  env: {
    browser: true,
    es2021: true,
    node: true,
  },
  extends: ["prettier"],

  plugins: ["prettier", "import", "react", "react-hooks", "jsx-a11y"],
  parserOptions: {
    ecmaFeatures: {
      jsx: true,
    },
    ecmaVersion: 12,
    sourceType: "module",
  },
  rules: {
    "prettier/prettier": "off",
    "no-nested-ternary": "off",
    "react/require-default-props": "off",
    "no-underscore-dangle": ["off"],
    "default-param-last": "off",
    "prefer-arrow-callback": "error",
    camelcase: ["error", { properties: "never", ignoreDestructuring: true }],
    "no-else-return": ["error", { allowElseIf: true }],
    "no-param-reassign": ["error", { props: false }],
    // Best Practices
    "import/no-extraneous-dependencies": [
      "error",
      {
        devDependencies: false,
        optionalDependencies: false,
        peerDependencies: false,
      },
    ],
    eqeqeq: "error",
    "no-invalid-this": "error",
    "no-return-assign": "error",
    "no-unused-expressions": ["error", { allowTernary: true }],
    "no-useless-concat": "error",
    "no-useless-return": "error",
    "no-use-before-define": "error",
    "no-duplicate-imports": "error",
    "no-plusplus": ["error", { allowForLoopAfterthoughts: true }],
    "import/order": [
      "error",
      {
        pathGroups: [
          {
            pattern: "react",
            group: "external",
            position: "before",
          },
        ],
        pathGroupsExcludedImportTypes: ["builtin"],
      },
    ],
    // Ensure components are imported if used
    "react/jsx-no-undef": ["error", { allowGlobals: true }],
    // Ensure all variables are declared before use
    "no-undef": "error",
    // Ensure there are no unused variables
    "no-unused-vars": ["error", { vars: "all", args: "after-used", ignoreRestSiblings: true }],
    // Ensure there are no unused imports
    "import/no-unused-modules": ["error", { unusedExports: true }],
    // Mark variables used in JSX as used
    "react/jsx-uses-vars": "error",
  },
  settings: {
    react: {
      version: "detect",
    },
  },
};

I did try npm run lint but I get this
Oops! Something went wrong! 🙁

ESLint: 9.28.0

ESLint couldn’t find a configuration file. To set up a configuration file for this project, please run:

`npm init @eslint/config@latest`

And if I run this command, it resets full eslint.config.js file

But I’m not sure how to properly convert or apply it to the new flat config (eslint.config.js).
Any ideas on how to correctly set it up so ESLint works in the new environment?

The following is part of a script to dynamically add lines to a form:

                '<div class="col-15">'+
                    '<label <?php echo $participant_name_'+ x +'_err;?>>Name*</label>'+
                '</div>'+

The middle line causes the error. If I remove the line, the page loads normal.

Help appreciated, thanks in advance.

Richard