Blancer.com Tutorials and projects

I have this code:

results = "[ { user_name: 'User 1',
    email: '[email protected]',
    userid: 'HJ10092',
    event_type: 'download',
    country: 'Venezuela',
    doc_type: 'mspowerpoint',
    total: '1' },
  { user_name: 'User 1',
    email: '[email protected]',
    userid: 'HJ10092',
    event_type: 'download',
    country: 'Venezuela',
    doc_type: 'document',
    total: '1' },
  { user_name: 'User 1',
    email: '[email protected]',
    userid: 'HJ10092',
    event_type: 'download',
    country: 'Venezuela',
    doc_type: 'msword',
    total: '2' },
  { user_name: 'User 2',
    email: '[email protected]',
    userid: 'POG0092',
    event_type: 'download',
    country: 'Spain',
    doc_type: 'png',
    total: '3' },
  { user_name: 'User 2',
    email: '[email protected]',
    userid: 'POG0092',
    event_type: 'download',
    country: 'Spain',
    doc_type: 'txt',
    total: '3' }]"


  const groupedDocs = Object.entries(
    results.reduce((acc, { country, email, doc_type, total }) => {
      // Group initialization
      grouping = email[0].v
      if (!acc[grouping]) {
        acc[grouping] = [];
      }
      // Grouping
      // FIX: only pushing the object that contains id and value
      acc[grouping].push({ doc_type, total});
      return acc;
    }, {})

  ).map(([email, count]) => ({ email, count }));
  console.log(".......................>>>>", JSON.stringify(groupedDocs));

It does what I want, but I need to also include the “country” field for each user, and I can’t. Something like that:

[
 { "email": "[email protected]",
  "country":"Venezuela",
  "count":[{"doc_type":"mspowerpoint",
  "total":"1"
},
{
  "doc_type":"document",
  "total":"1"
},
{
  "doc_type":"txt",
  "total":"69"
},
{
  "doc_type":"pdf",
  "total":"328"
   }
  ]
 },
 { "email": "[email protected]",
  "country":"Spain",
  "count":[{"doc_type":"mspowerpoint",
  "total":"1"
},
{
  "doc_type":"document",
  "total":"1"
},
{
  "doc_type":"txt",
  "total":"69"
}]}]

I could add the country field to each document type, but I don’t want to repeat it so many times. I want it to be an additional key just like “email.”
Thanks in advance

When I run my code, I get the following errors on my developers tool:

scriptb.js:9 Uncaught TypeError: Cannot read properties of null (reading 'showModal')
    at HTMLTableCellElement.<anonymous> (scriptb.js:9:46)
(anonymous) @ scriptb.js:9U
scriptb.js:17 Uncaught TypeError: Cannot read properties of null (reading 'close')
    at HTMLDocument.<anonymous> (scriptb.js:17:57)

<dialog id="dialoglist" class="popup"  style="top:50%;">
    <ul class="popuplist">
        <li> chat </li>
        <li> view </li>
        <li> edit </li>
        <li style="color: red;"> delete </li>
       <!---- <li> <button onclick="closedialog('dialoglist')">  close </button> </li> -->
    </ul>
<div class = 'mydiv'>

</div>
</dialog>
<td id="Action"><button class="action">...</button></td>

js

document.addEventListener('DOMContentLoaded', () => {
  var button = document.getElementById("Action");
  var listNo = document.getElementById(dialoglist)
  button.addEventListener('click', () => {
    listNo.showModal();
  });
  {
    const dialogclose =
      document.querySelectorAll('dialoglist')
    for (i = 0; i < dialogclose.length; i++) {
      dialogclose[i].addEventListener('click', () =>
        dialogclose[i].close());
    }
    const myDiv = document.getElementsByClassName("mydiv");
    for (i = 0; i < myDiv.length; i++) {
      myDiv[i].addEventListener('click', (event) => event.stopPropagation());
    }

I have trouble fetching my data into JS, can anyone help me please.
So here is the screenshot of the console:

console

const foodContainer = document.querySelector("#food-container");

function addToeatList() {
    const foodValue = document.getElementById("toeatInput").value.trim();

    if (foodValue === '') {
        alert("You must write something!");
        return;
    }

    fetch(`https://api.calorieninjas.com/v1/nutrition?query=${foodValue}`, {
        method: 'GET',
        headers: {
            'X-Api-Key': 'my api key'
        }
    })
    .then(response => {
        if (!response.ok) {
            throw new Error("Network response was not ok");
        }
        return response.json();
    })
    .then(res => {
        const data = res.items;
        let rows = '';

        data.forEach((item, index) => {
            rows += `
                <li class="card" style="margin-top: 8px;" id="card-${index}">
                    <div class="card-body">
                        <h5 class="card-title">${item.name}</h5>
                        <p class="card-text">Calories: ${item.calories} kcal</p>
                        <p class="card-text">Protein: ${item.protein_g} g</p>
                        <button onclick="closeToeatList('card-${index}')" class="btn btn-primary">Delete food</button>
                    </div>
                </li>
            `;
        });

        foodContainer.innerHTML += rows;
    })
    .catch(error => {
        console.error('Error:', error.message);
        alert("Failed to fetch data. Please try again.");
    });
}

function closeToeatList(cardId) {
    const card = document.getElementById(cardId);
    if (card) {
        card.remove();
    }
}

idk what did i do wrong and i need to finish my project quickly, plz someone help me fix it, thanks.

I want to build a Node.js script (or Git hook) that will only fix ESLint errors on the lines that are changed in staged JavaScript/TypeScript files. The intention is to keep the fixes minimal and limited to just what’s been modified in the current commit.

Specific Requirements:

• Only work on staged files

• Identify exact lines changed (added or modified)

• Use ESLint to detect and fix problems, but only on those changed lines

• Do not fix unrelated parts of the file

• Do not auto-stage or commit files — leave that to the developer

This is useful when multiple developers work on the same file and we want to avoid committing changes that affect lines unrelated to the current change.

What I tried:

• I extracted changed lines using:

  git diff --cached -U0 -- <file>
  
  

• I parsed changed line numbers and filtered eslint --fix-dry-run --format json output based on the line property.

• I tried applying fixes using the fix.range from ESLint’s output with string slicing:

  content = content.slice(0, start) + fix.text + content.slice(end);
  

Problems I faced:

• eslint --fix-dry-run exits with status code 1 even though it gives valid JSON output.

• Applying multiple fix.range edits causes incorrect replacements — likely due to content shifting.

I want a reliable way to fix only the modified lines while preserving line offsets and avoiding side effects.

What I expect:

• A clean solution to apply only ESLint’s fixable errors on changed lines

• Graceful handling of eslint exit codes in dry-run mode

• A method to apply multiple fixes correctly, even when multiple lines are affected

I’m writing a chrome extension. I want to generate three different entry points, but no splits to avoid imports.

I supposed that manualChunks: () => undefined was doing the magic, but it’s starting to create js assets again.

What I should do in this configuration to alwas bundle all the Javascript in one file?

This is my vote config:

export default defineConfig(({mode}) => {
    const env = loadEnv(mode, resolve(__dirname), '')

    const version = env.VITE_APP_VERSION ?? '0.0.0'

    return {
        root: 'src',
        envDir: resolve(__dirname),
        publicDir: '../public',
        plugins: [
            react(),
            tailwindcss(),
            viteStaticCopy({
                targets: [
                    // TODO: If we don't need it, we can remove it.
                    // { src: 'public/manifest.json', dest: '.' },
                    // { src: 'public/background.js', dest: '.' },
                ],
            }),
            {
                name: 'generate-manifest-json',
                apply: 'build',
                closeBundle() {
                    const manifest = createManifest(version)
                    const out = path.resolve(__dirname, 'dist/manifest.json')
                    fs.mkdirSync(path.dirname(out), {recursive: true})
                    fs.writeFileSync(out, JSON.stringify(manifest, null, 2))
                    console.log('✅ manifest.json generado con versión', version)
                },
            }
        ],
        build: {
            rollupOptions: {
                input: {
                    sidepanel: resolve(__dirname, 'src/sidepanel.html'),
                    content: resolve(__dirname, 'src/content/index.ts'),
                    background: resolve(__dirname, 'src/background/index.ts'),
                },
                output: {
                    entryFileNames: '[name].js',
                    // chunkFileNames: '[name].js',
                    // assetFileNames: '[name].[ext]',
                    manualChunks: () => undefined
                },
            },
            outDir: '../dist',
            emptyOutDir: true,
        },
        resolve: {
            alias: {
                "@": path.resolve(__dirname, "./src"),
            },
        },
        test: {
            globals: true,
            environment: 'jsdom',
        },
    }
})

When a user deletes a <p> element (or any DOM element) using browser developer tools/extensions, these changes are local and don’t notify the server. However, if the client specifically wants to make the website owner aware that they deleted that specific element, are there reliable ways to accomplish this? This could be directly notifying the server or making it obvious that the specific <p> element deleted by client when carefully observed from other side. The goal of the client is finding client-side methods to make it obvious to the other side he deleted that element. Are there ways possible to do this?

I was using javascript to make a new website using the course from supersimple.dev and found this issue right at the beginning.

i want to add bubble chart using chart.js to my project and i am trying to show image(PNG Format) background of chart.js bubbles like blow image, i saw this topic already, but doesn’t work for me … I tried this code and got no result. Please help.
Bubble flag Charts

<div class="box">
    <div class="box-header with-border">
        <h3 class="box-title">Users</h3>
        <ul class="box-controls pull-right">
            <li><a class="box-btn-close" href="#"></a></li>
            <li><a class="box-btn-slide" href="#"></a></li>
        </ul>
    </div>
    <div class="box-body">
        <div class="chart">
            <canvas id="chart_6" height="212"></canvas>
        </div>
    </div>
    <!-- /.box-body -->
</div>



  if ($('#chart_6').length > 0) {
        var BehpardakhtIcon = new Image();
        BehpardakhtIcon.src = "~/images/Behpardakht.png";
        BehpardakhtIcon.width = 22;
        BehpardakhtIcon.height = 22;
        var BehsazanIcon = new Image();
        BehsazanIcon.src = "~/images/Behsazan.png";
        BehsazanIcon.width = 22;
        BehsazanIcon.height = 22;
        const data = {
            datasets: [{
                data: [                 
                    { x: 30, y: 50, r: 15 }             
                ],              
                borderWidth: 2,
                pointStyle: BehpardakhtIcon,
                label: 'Company1',              
                hoverBorderWidth: 3,
            }],
        };
        const config = {
            type: 'bubble',
            data: data,
            options: {
                scales: {
                    x: {
                        title: {
                            display: true,
                            text: 'x'
                        }
                    },
                    y: {
                        title: {
                            display: true,
                            text: 'y'
                        }
                    },
                },
                plugins: {                  
                    tooltip: { intersect: true },
                    afterUpdate: function (chart, options) {
                        chart.getDatasetMeta(0).data.forEach((d, i) => {
                            d._model.pointStyle = BehpardakhtIcon;
    
                        })
                    }
                },
            },
        };
        const myBubbleChart =
            new Chart(document.getElementById('chart_6'), config);
        
    }

also i need to know where can i download chart.js plugins and how can i use them?

I am using Next JS version 15.3.2.

At present I am adding an external style sheet as follows in RootLayout file. It works.

But what is the proper way to add it in Next JS v15 now?

import type { Metadata } from 'next';
import './globals.css';
import React from 'react';

export const metadata: Metadata = {
  title: 'Create Next App',
  description: 'Generated by create next app',
};

const RootLayout = ({
  children,
}: Readonly<{
  children: React.ReactNode;
}>) => {
  return (
    <html lang="en">
      <head>
        <link
          rel="stylesheet"
          href="https://some-cdn.com/1.2.3/stylesheets/styles.min.css"
        />
      </head>
      <body>{children}</body>
    </html>
  );
};

export default RootLayout;

Looking at docs, this seems to be the option given but this looks more like a solution for before Nextjs v13.

https://nextjs.org/docs/messages/no-stylesheets-in-head-component

import { Html, Head, Main, NextScript } from 'next/document'
 
export default function Document() {
  return (
    <Html>
      <Head>
        <link rel="stylesheet" href="..." />
      </Head>
      <body>
        <Main />
        <NextScript />
      </body>
    </Html>
  )
}

Doesn’t work.

Complains that I can’t add a _document.js file outside pages folder which sounds outdated.

Nextjs been using app folder for some time now.

Pls advice the correct way to add external stylesheets. Thanks.

Why does Expo show a different IP than the one I set in my .env and why does the app fail to load on my iPhone even though both devices are on the same network?

Why does the Expo app on my iPhone show an error even though I set the correct IP in my .env and expected it to load successfully

I’m currently using Neon Postgres, which works perfectly fine, when I attempt to connect it directly from Windows.

However, as soon as I go to WSL, and try to connect using the pg client, I get the following error:

AggregateError [ETIMEDOUT]: 
    at internalConnectMultiple (node:net:1116:18)
    at internalConnectMultiple (node:net:1184:5)
    at Timeout.internalConnectMultipleTimeout (node:net:1710:5)
    at listOnTimeout (node:internal/timers:575:11)
    at process.processTimers (node:internal/timers:514:7) {
  code: 'ETIMEDOUT',
  [errors]: [
    Error: connect ETIMEDOUT censored;lookslikeipv4
        at createConnectionError (node:net:1646:14)
        at Timeout.internalConnectMultipleTimeout (node:net:1705:38)
        at listOnTimeout (node:internal/timers:575:11)
        at process.processTimers (node:internal/timers:514:7) {
      errno: -110,
      code: 'ETIMEDOUT',
      syscall: 'connect',
      address: 'censored;lookslikeipv4',
      port: 5432
    },
    Error: connect ENETUNREACH censored;lookslikeipv6 - Local (:::0)
        at internalConnectMultiple (node:net:1180:16)
        at Timeout.internalConnectMultipleTimeout (node:net:1710:5)
        at listOnTimeout (node:internal/timers:575:11)
        at process.processTimers (node:internal/timers:514:7) {
      errno: -101,
      code: 'ENETUNREACH',
      syscall: 'connect',
      address: 'censored;lookslikeipv6',
      port: 5432
    },
    Error: connect ETIMEDOUT censored;lookslikeipv4
        at createConnectionError (node:net:1646:14)
        at Timeout.internalConnectMultipleTimeout (node:net:1705:38)
        at listOnTimeout (node:internal/timers:575:11)
        at process.processTimers (node:internal/timers:514:7) {
      errno: -110,
      code: 'ETIMEDOUT',
      syscall: 'connect',
      address: 'censored;lookslikeipv4',
      port: 5432
    },
    Error: connect ENETUNREACH censored;lookslikeipv6 - Local (:::0)
        at internalConnectMultiple (node:net:1180:16)
        at Timeout.internalConnectMultipleTimeout (node:net:1710:5)
        at listOnTimeout (node:internal/timers:575:11)
        at process.processTimers (node:internal/timers:514:7) {
      errno: -101,
      code: 'ENETUNREACH',
      syscall: 'connect',
      address: 'censored;lookslikeipv6',
      port: 5432
    },
    Error: connect ETIMEDOUT censored;lookslikeipv4
        at createConnectionError (node:net:1646:14)
        at Timeout.internalConnectMultipleTimeout (node:net:1705:38)
        at listOnTimeout (node:internal/timers:575:11)
        at process.processTimers (node:internal/timers:514:7) {
      errno: -110,
      code: 'ETIMEDOUT',
      syscall: 'connect',
      address: 'censored;lookslikeipv4',
      port: 5432
    },
    Error: connect ENETUNREACH 2600:censored;lookslikeipv6 - Local (:::0)
        at internalConnectMultiple (node:net:1180:16)
        at Timeout.internalConnectMultipleTimeout (node:net:1710:5)
        at listOnTimeout (node:internal/timers:575:11)
        at process.processTimers (node:internal/timers:514:7) {
      errno: -101,
      code: 'ENETUNREACH',
      syscall: 'connect',
      address: 'censored;lookslikeipv6',
      port: 5432
    }
  ]
}

How can I fix this?

`Hi,

I have wrtitten some php files and a blade file to load the contents of the page. I have incorporated all the styles and javascripts to load the page using Master.blade.php located in the recources/views/layouts folder. When I enter the URL for Ex: localhost/admin/accounts/add_ar, it just keeps loading the page. The only thing I see is the circular page loading icon in the middle. It needs to load the side bar, main bar, header and footer.

When I include @extends(‘layouts.master’) in the welcome.blade.php it loads the top half, but the bottom half does not load.

Can you please help?

I wanted to copy the code here. But this site is asking me to format it and post it. I will paste the required code if needed.

I was expecting it to load a page with a sider bar, header and footer using the styles of the master.blade file.

I have tried to clear the cache and routes.

Thanks
Raj`

I am creating a social media app (React native cli), I am working on post functionality,

for image and video i want to have simple filters like brightness, contrast, sharpness etc.

like we have in gallery where we have slider to adjust above filters.

I am trying to mimic that, I did the research on YouTube and here every thing is old.

i tried gl-react , react-native-image-filter-kit.

but got error after installation(actually i vibe coded this part but it didn’t work).

suggest me with some good library, and if possible share code reference.

also how to save the new edited video/images and upload it cloud or backend.

Shopware version: 6.6.8.2
No major checkout customization.

I’m experiencing an issue on a Shopware 6 storefront during the checkout process.

There is a button labeled “Change delivery address” on the checkout page. When clicked, it opens a modal that lists the customer’s saved addresses. When the user selects an address from the modal to use as the new delivery address, the UI appears to close the modal and shows the newly selected address.

However, this change is not actually applied to the order. The backend still retains the old delivery address until the user manually refreshes the page. After refreshing, the updated address is correctly applied.

Is there a known issue with Shopware 6’s checkout address modal not persisting the selected address to the order without a page reload?

Very rarely, console error appears 1 out of 10 times.

storefront.js?1745976015:1 Uncaught (in promise) Error: The required element "#shipping-edit-addressEditorAccordion" does not exist in parent node!
    at i.querySelector (storefront.js?1745976015:1:3866)
    at address-editor.plugin.241330.js:1:2033
    at NodeList.forEach (<anonymous>)
    at n.iterate (storefront.js?1745976015:1:6862)
    at c._registerCollapseCallback (address-editor.plugin.241330.js:1:1900)
    at c._registerModalEvents (address-editor.plugin.241330.js:1:1660)
    at address-editor.plugin.241330.js:1:1557
querySelector   @   storefront.js?1745976015:1

Any guidance on resolving this would be greatly appreciated!