Category: javascript

Question:

I’m developing a website with the following structure:

• Frontend: Vite + Nunjucks templates + Tailwind CSS + JavaScript
• Backend: C# WebAPI

Goals

Here’s what I want to achieve:

1. Backend returns HTML components – The WebAPI should be able to serve HTML strings.
2. Monorepo for shared code – I’d like to manage everything in a monorepo.
3. Avoid Razor pages – I don’t want to create a full Razor application.
4. Frontend served from a CDN – The frontend should be built and deployed to a CDN, independent from the backend API deployment.

Current Setup

The setup is almost what I need, and works well for building and deploying the frontend separately to a CDN. The backend is a straightforward WebAPI. The main issue is that there’s no easy way to share or reuse templates between the frontend and backend, since I’m currently using separate repositories and Nunjucks for frontend templating.

Desired Solution

Ideally, I’d like a way to:

1. Share templates across frontend and backend within a monorepo.
2. Continue using Vite for frontend building and Nunjucks for templating, or something similarly lightweight.
3. Allow the backend to render or compile HTML templates to strings that it can serve.

The approach I have in mind could involve compiling the templates in such a way that they’re compatible for both the frontend and backend, allowing HTML strings to be served from the backend. I know about server components, but that doesn’t quite fit my requirements.

Is there a feasible way to share templates between a Vite-based frontend and a C# WebAPI backend in this type of setup? Ideally, I’m looking for something that doesn’t add too much complexity.

Any insights or suggestions would be much appreciated!

I wonder if I can set the lines to be hidden in chartjs datasets->segment
like this:

const down = (ctx, value) => ctx.p0.parsed.y > ctx.p1.parsed.y ? value : undefined;
const up = (ctx, value) => ctx.p0.parsed.y < ctx.p1.parsed.y ? value : undefined;

segment: {
          borderColor: ctx => down(ctx , 'rgb(192,75,75)') || up(ctx, 'rgb(0,255,0)'),
          borderDash: ctx => down(ctx, [5,5]),
          hidden: ctx => down(ctx,false),
        }

maybe i should use other styling element

picture of errors, the first time I have seen these types of errors

Below are the code, I am using with vue js modifiers with kepress.enter its not submitting text if I change keyup.enter its working fine but space button is not working anyone please help here need to change anything here.

<input
v-model="query"
class="chat-field-input"
type="text"
autofocus
:placeholder="$t('inputTitle')"
:aria-label="$t('inputTitle')"
:disabled=this.disabledtextbox
@keypress.enter="submit({ text: query })"
@input="$emit('input')"
@blur="$emit('blur')"
@focus="
microphone = false;
should_listen = false;
$emit('typing');
      "/>

Hi my goal is to display a chart using chartjs with plain html/css/js I am not using any framework.
I have my method backend side that returns a context with the following elements:

context = {'client_id' : client_id, 'year' : year, 'spending' : monthly_spending}

The goal is on my frontend to display a bar chart with the spending for each month in a year.
I tried many things but nothing load I get error.
What I did basically /

{% block body %}
    <section>
        <div>
            <canvas id="spendingChart" width="500" height="500"></canvas>
        </div>
    </section>

</main>
{% endblock body %}

{% block script %}
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/4.4.1/chart.min.js"></script>

<script>
    const spendingData= {{ monthly_spending | safe }}
    const myChart = new Chart(document.getElementById('spendingChart').getContext("2d"), {
        type: 'line',
        data: {
            datasets: [{
                label: 'spending Over Time',
                data: spendingData,
                borderColor: 'rgba(75, 192, 192, 1)',
                backgroundColor: 'rgba(75, 192, 192, 0.2)',
                fill: true,
            }]
        },
        options: {
            responsive: true,
            scales: {
                x: { type: 'time', title: { display: true, text: 'Date' } },
                y: { title: { display: true, text: 'spending' } }
            }
        }
    });
</script>
{% endblock %}

Nothing loads and I have 2 errors in my console but I am not sure what to do:

Uncaught SyntaxError: Cannot use import statement outside a module (at chart.min.js:1:1)
Uncaught SyntaxError: Unexpected token 'const' (at 1:50:5)

Good morning everyone, I am writing to you about a strange problem that is happening to me with a web app that I created for work;
I use the web app to make an inventory of my bars.
DESCRIPTION OF THE WEB APP:
written in html, css, and js, it is nothing more than a graphical interface in which you have to load the data from an excel sheet, this data changes from month to month.
I use the web app to bring the excel sheet to my smartphone and fill it in more easily instead of working directly on the excel sheet from my smartphone (which is not very easy to fill in).
The web app, once the excel file with the data has been loaded, allows you to choose which bar to carry out the inventory on (lounge, crystal, green); once the inventory of the chosen bar has been completed, the file is saved as a .xlsx file. At the same time, other operators can do the same inventory on the other 2 remaining bars. once the 3 inventories are completed (but they can also be 2 or 1) the web app merges the three inventories and brings them together in a single .xlsx file so that I can have them all in a single file.
PROBLEM DESCRIPTION: the problem that is created is the following; the web app works perfectly on android devices, on windows, on mac, but on ios devices it does not load the data from the excel sheet to then perform the inventory.
I can’t understand where the problem is.

LIBRARIES USED in head:  
https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">  
https://cdn.jsdelivr.net/npm /[email protected]/dist/exceljs.min.js https://cdn.jsdelivr.net/npm/[email protected]/dist/FileSaver.min.js https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js https://cdnjs.cloudflare.com/ajax/libs/colresizable/1.6.0/colResizable-1.6.min.js

LIBRARIES USED in body:
https://cdn.sheetjs.com/xlsx-latest/package/dist/shim.min.js
https://cdn.sheetjs.com/xlsx-latest/package/dist/xlsx.full.min.js

THESE ARE THE FUNCTIONS THAT DEAL WITH LOADING THE XLSX FILE IN THE WEB APP:

// Function to manage the loading of the Excel file
function handleFile(e) {
const file = e.target.files[0];
if (file) {
originalFileName = file.name;
const reader = new FileReader();
reader.onload = function (e) {
const dataBinary = e.target.result;
const wb = XLSX.read(dataBinary, { type: 'binary' });
processData(wb);
};
reader.readAsBinaryString(file);
}
}

// Function to process the data of the Excel file and convert it to JSON
function processData(workbook) {
const firstSheetName = workbook.SheetNames[0];
const worksheet = workbook.Sheets[firstSheetName];
 const jsonData = XLSX.utils.sheet_to_json(worksheet, { defval: "" });

 data = jsonData;
 renderTable();
 }

A thousand thanks

I need help about Nuxt that would help me prevent some of our SSR (Server-Side Rendered) pages when user information has been fetched and stored in our pinia store being cached.

Problem: Currently, when we do SSR, we fetch user data during page generation and some of the user information gets serialized to __NUXT_DATA__ so it can be picked up during hydration on the client.

We also use a CDN to speed up our pages and prevent the servers from being overloaded with requests. The issue is that the CDN caches the page content and that includes __NUXT_DATA__ which is not good: the __NUXT_DATA__ state that is cached might be the state of another visitor of the website. We can’t disable the CDN cache on pages where this happen as this would disable cache everywhere.

Solutions tried:

• We read nuxt docs & code to find a way of disabling the serialization of the pinia store to __NUXT_DATA__, but couldn’t find any.
• We tried creating a nuxt middleware to check the store & add cache-control headers but we either…:
  • could not get the request (useRequestEvent() would return undefined)
  • would be too early reading the pinia store (even when being the last middleware to run), so the state would be later updated with user info and the proper cache headers not applied (and thus missing).
• We tried to catch the pinia store state at the end of the SSR and add Cache-Control headers if the pinia store state contains user data. When we tried this with a nitro server plugin and hooking on the render:response event, the server would crash as nitro can’t access nuxt or pinia stores (we use composables so we would import useMyStore() in the nitro server plugin.

Question:

• How can we disable pinia getting serialized to __NUXT_DATA__ between SSR and client hydration ?
• OR How can we read a pinia store and add Cache-Control headers conditionally to the response if the store has a given state ?

Thanks for any help or pointers you can have about this !

Additional info:

• nuxt version: 3.10
• pinia version: 2.2.6

I want to take a fullscreen screenshot of a web page. I want it to contain only relevant information. I set the zoom level and scroll the relevant part into view. From this point on, I want to hide the unnecessary scrollbars to exclude them from the screenshot and maximize space for relevant content.

Example screenshot:

I was thinking of a bookmarklet or a snippet of JavaScript to run in the DevTools. For the hiding itself, I can certainly use a solution from Hide scroll bar while still being able to scroll or Hiding the scroll bar on an HTML page and related posts.

But I don’t know which element has the scrollbars, and there may be more than one. How can I find the DOM elements with scrollbars and hide them?

I have a small drawing application where each time the mouse moves, the new coordinates are fed into a buffer in WebGL. I assumed that when I call gl.drawArrays, I only need to draw the new points, not the old ones, because they were rendered previously. However, the old points disappear even though I haven’t called gl.clear. Why is this happening?

// every time feed new points
gl.bindBuffer(gl.ARRAY_BUFFER, positionBuffer)
gl.bufferSubData(gl.ARRAY_BUFFER, index, new Float32Array(points))


// only draw new Points
gl.drawArrays(gl.POINTS, lastDrawnPoints, newPoints.length / 2)

I have two scripts for popup windows. In all cases the arguments for the second script is controlling both. How do I fix this?

    <script>
    function firstPopup(url) { 
    popupWindow = Window.open(url,'popUpWindow','height=300,width=300,left=200,top=200,resizable=yes,scrollbars=no,toolbar=no,menubar=no,location=no,directories=no,status=yes')
}
    </script>
    <a href="JavaScript:newPopup('bitcoin.cfm')" style="color:black">Here.<a href="JavaScript:newPopup('contactpri.cfm')" style="color:black"></a></script>
 <a href="JavaScript:newPopup('bitcoin.cfm')" style="color:black">Here.<a href="JavaScript:newPopup('contactpri.cfm')" style="color:black"></a>

`
Text and other stuff here.

    <script>
    function newPopup(url) {
    popupWindow = window.open(url,'popUpWindow','height=700,width=800,left=10,top=10,resizable=no,scrollbars=no,toolbar=no,menubar=no,location=no,directories=no,status=yes')}
    </script>
    <B>If you want to Contact US <a href="JavaScript:newPopup('contact.cfm')" style="color:#062689;">click here.</a></B>`

Both scripts do work. It is just that the second height and width are overwriting the first argument.

What do I need to change to make them used their own arguments? I have no idea have to differentiate the scripts to make this work

There is an API, from where the data from the database is steamed, which should be displayed on the landing page.

Everything seems to be spelled out correctly, but the landing gives as undefined.

api correct output

landing

What could be the problem?
code:

function Link() {
    let params = useParams();

    try {
        axios.get(`https://api.***/get_link?id=${params.id}`)
        .then(res => {
            if(res.data.error === false) {
                document.title = `${res.data.link.artists} — ${res.data.link.title} ***`
                document.getElementById('title').innerHTML = res.data.link.title
                document.getElementById('artists').innerHTML = res.data.link.artists
                document.getElementById('cover').src = 'https://api.***/' + res.data.link.cover
                let link = res.data.link
                if(link.apple) {
                    document.getElementById('apple').href = link.apple
                    document.getElementById('apple').hidden = ''
                }
                if(link.vk) {
                    document.getElementById('vk').href = link.vk
                    document.getElementById('vk').hidden = ''
                }
                if(link.yandex) {
                    document.getElementById('yandex').href = link.yandex
                    document.getElementById('yandex').hidden = ''
                }
                if(link.yt_music) {
                    document.getElementById('yt').href = link.yt_music
                    document.getElementById('yt').hidden = ''
                }
                if(link.spotify) {
                    document.getElementById('spotify').href = link.spotify
                    document.getElementById('spotify').hidden = ''
                }
                if(link.soundcloud) {
                    document.getElementById('soundcloud').href = link.soundcloud
                    document.getElementById('soundcloud').hidden = ''
                }
                if(link.itunes) {
                    document.getElementById('itunes').href = link.itunes
                    document.getElementById('itunes').hidden = ''
                }
                if(link.tidal) {
                    document.getElementById('tidal').href = link.tidal
                    document.getElementById('tidal').hidden = ''
                }
                if(link.deezer) {
                    document.getElementById('deezer').href = link.deezer
                    document.getElementById('deezer').hidden = ''
                }
            } else {
                redirect()
            }
        })
    } catch {

I’ve already racked my brain xd

The problem however is the only way to do it is using the ws[‘!protect’] attribute to the whole sheet and then traverse through each cell one by one and set it as :

worksheet1[cellAddress].s = { protection: { locked: false } };

This however doesn’t work and it always locks the whole sheet. I need something like to protect an exact cell and not the whole sheet.

Can someone help me on this?

I’m working with Vue.js and Laravel to display information based on user actions logged in a JSON array.

<table class="table table-bordered small">
    <thead>
        <tr>
            <th width="2%">No</th>
            <th width="9%">Data</th>
        </tr>
    </thead>
    <tbody>
        <tr v-for="(index,row) in records.data">
            <td>@{{index+1}}</td>
            <td>
                @{{row.logs}}
                <template v-if="">
                    
                </template>
            </td>
        </tr>
    </tbody>
</table>

row.logs is a JSON-formatted array. Based on the code, in my webpage, it will display:

["[user1][2024-11-07 15:30:36][clicked_ready_for_pickup_email_button]",
 "[user2][2024-11-07 14:50:15][other_action]"
]

I want to check if row.logs contains an entry with [clicked_ready_for_pickup_email_button], and if so, display a specific section in my template. Is there any tips on how I can achieve this?

(Please note that this is not a duplicate of Error C7626: Unnamed class used in typedef name cannot declare members other than non-static data members, since it is happening in an external library, which I cannot modify, and is machine-dependent.)

I’m trying to build this repo: https://github.com/FlameWolf/quip-api, and I get the below error when running npm install:

npm error code 1
npm error path C:Users******sourcereposquip-apinode_modulescld
npm error command failed
npm error command C:Windowssystem32cmd.exe /d /s /c node-gyp rebuild
npm error cldutil.cc
npm error C:Users******sourcereposquip-apinode_modulesclddepscldinternalscoreonescriptspan.h(117,16): error C7626: unnamed class used in typedef name cannot declare members other than non-static data members, member enumerations, or member classes [C:Users******sourcereposquip-apinode_modulescldbuilddepscldcld-c.vcxproj]
npm error   (compiling source file '../../../deps/cld/internal/cldutil.cc')
npm error   
npm error C:Users******sourcereposquip-apinode_modulesclddepscldinternalscoreonescriptspan.h(132,16): error C7626: unnamed class used in typedef name cannot declare members other than non-static data members, member enumerations, or member classes [C:Users******sourcereposquip-apinode_modulescldbuilddepscldcld-c.vcxproj]
npm error   (compiling source file '../../../deps/cld/internal/cldutil.cc')
npm error   
npm error C:Users******sourcereposquip-apinode_modulesclddepscldinternalscoreonescriptspan.h(186,16): error C7626: unnamed class used in typedef name cannot declare members other than non-static data members, member enumerations, or member classes [C:Users******sourcereposquip-apinode_modulescldbuilddepscldcld-c.vcxproj]
npm error   (compiling source file '../../../deps/cld/internal/cldutil.cc')
npm error gyp info it worked if it ends with ok
npm error gyp info using [email protected]
npm error gyp info using [email protected] | win32 | x64
npm error gyp info find Python using Python version 3.12.6 found at "C:Python312python.exe"
npm error (node:6376) ExperimentalWarning: Support for loading ES Module in require() is an experimental feature and might change at any time  
npm error (Use `node --trace-warnings ...` to show where the warning was created)
npm error gyp info find VS using VS2022 (17.11.35327.3) found at:
npm error gyp info find VS "C:Program FilesMicrosoft Visual Studio2022Community"
npm error gyp info find VS run with --verbose for detailed information
npm error gyp info spawn C:Python312python.exe
npm error gyp info spawn args [
npm error gyp info spawn args 'C:\Program Files\nodejs\node_modules\npm\node_modules\node-gyp\gyp\gyp_main.py',
npm error gyp info spawn args 'binding.gyp',
npm error gyp info spawn args '-f',
npm error gyp info spawn args 'msvs',
npm error gyp info spawn args '-I',
npm error gyp info spawn args 'C:\Users\******\source\repos\quip-api\node_modules\cld\build\config.gypi',
npm error gyp info spawn args '-I',
npm error gyp info spawn args 'C:\Program Files\nodejs\node_modules\npm\node_modules\node-gyp\addon.gypi',
npm error gyp info spawn args '-I',
npm error gyp info spawn args 'C:\Users\******\AppData\Local\node-gyp\Cache\23.0.0\include\node\common.gypi',
npm error gyp info spawn args '-Dlibrary=shared_library',
npm error gyp info spawn args '-Dvisibility=default',
npm error gyp info spawn args '-Dnode_root_dir=C:\Users\******\AppData\Local\node-gyp\Cache\23.0.0',
npm error gyp info spawn args '-Dnode_gyp_dir=C:\Program Files\nodejs\node_modules\npm\node_modules\node-gyp',
npm error gyp info spawn args '-Dnode_lib_file=C:\\Users\\******\\AppData\\Local\\node-gyp\\Cache\\23.0.0\\<(target_arch)\\node.lib',
npm error gyp info spawn args '-Dmodule_root_dir=C:\Users\******\source\repos\quip-api\node_modules\cld',
npm error gyp info spawn args '-Dnode_engine=v8',
npm error gyp info spawn args '--depth=.',
npm error gyp info spawn args '--no-parallel',
npm error gyp info spawn args '--generator-output',
npm error gyp info spawn args 'C:\Users\******\source\repos\quip-api\node_modules\cld\build',
npm error gyp info spawn args '-Goutput_dir=.'
npm error gyp info spawn args ]
npm error gyp info spawn C:Program FilesMicrosoft Visual Studio2022CommunityMSBuildCurrentBinMSBuild.exe
npm error gyp info spawn args [
npm error gyp info spawn args 'build\binding.sln',
npm error gyp info spawn args '/clp:Verbosity=minimal',
npm error gyp info spawn args '/nologo',
npm error gyp info spawn args '/p:Configuration=Release;Platform=x64'
npm error gyp info spawn args ]
npm error gyp ERR! build error
npm error gyp ERR! stack Error: `C:Program FilesMicrosoft Visual Studio2022CommunityMSBuildCurrentBinMSBuild.exe` failed with exit code: 1
npm error gyp ERR! stack at ChildProcess.<anonymous> (C:Program Filesnodejsnode_modulesnpmnode_modulesnode-gyplibbuild.js:216:23)      
npm error gyp ERR! stack at ChildProcess.emit (node:events:507:28)
npm error gyp ERR! stack at ChildProcess._handle.onexit (node:internal/child_process:294:12)
npm error gyp ERR! System Windows_NT 10.0.22631
npm error gyp ERR! command "C:\Program Files\nodejs\node.exe" "C:\Program Files\nodejs\node_modules\npm\node_modules\node-gyp\bin\node-gyp.js" "rebuild"
npm error gyp ERR! cwd C:Users******sourcereposquip-apinode_modulescld
npm error gyp ERR! node -v v23.0.0
npm error gyp ERR! node-gyp -v v10.2.0
npm error gyp ERR! not ok
npm error A complete log of this run can be found in: C:Users******AppDataLocalnpm-cache_logs2024-11-06T17_28_31_391Z-debug-0.log

Can anyone help with this?

I got a web page used by 3 diffrent sites and each one requiring a different font. What’s the best approach to loading the fonts? I was thinking of pulling all the fonts at once then let CSS do it’s thing. So something like:

<link href="font-a" rel="stylesheet" />
<link href="font-b" rel="stylesheet" />
<link href="font-c" rel="stylesheet" />

Job done. Versus loading the font as needed. Something like:

<script>
const head = document.head;
let preloadLink;

if website-a {
    preloadLink = document.createElement("link");
    preloadLink.href = "font-a";
    preloadLink.rel = "preload";
    preloadLink.as = "style";
    preloadLink.onload = function() {
        this.rel = "stylesheet";
    };
    head.appendChild(preloadLink);
} else if website-b {
    preloadLink = document.createElement("link");
    preloadLink.href = "font-b";
    preloadLink.rel = "preload";
    preloadLink.as = "style";
    preloadLink.onload = function() {
        this.rel = "stylesheet";
    };
    head.appendChild(preloadLink);
} else if website-c {
    preloadLink = document.createElement("link");
    preloadLink.href = "font-c";
    preloadLink.rel = "preload";
    preloadLink.as = "style";
    preloadLink.onload = function() {
        this.rel = "stylesheet";
    };
    head.appendChild(preloadLink);
}
</script>

Would the 2nd option make the page load faster?