Category: javascript

My coworker implemented FullCalendar on windows 10 and everything works correctly. However, when I pulled the project and tried to run it on my Ubuntu machine, FullCalendar doesn’t work.
Is there any known compatibility issue with FullCalendar on Ubuntu, or could it be something related to my setup? What steps should I take to troubleshoot this?

I haven’t taken any steps to resolve the issue yet. I reviewed the code, and everything seems to be correct.

On my page I have a block “child_database” and I would to retrieve the database but I don’t have the id of this database

I retrieve my page

const page = notion.pages.retrieve({
                page_id: page_id,
            })

I retrieve the blocks

const blocks = notion.blocks.children.list({
            block_id: pageId,
            page_size: 50,
        })

I have this metadata from block

{
"object": "block",
"created_time": "2024-10-14T13:27:00.000000Z",
"last_edited_time": "2024-10-14T13:27:00.000000Z",
"archived": false,
"has_children": false,
"type": "child_database",
"id": "11f4c8f5-1876-8039-91ce-e32596eddb99",
"child_database": {
"title": ""
}
}

I try to retrieve the block and the children

const block  = notion.blocks.retrieve({
                block_id: block.id,
            });
const children =   notion.blocks.children.list({
        block_id: blockId,
    });

But the children list is empty, and no more information with a retrieve.block

The database is integrate in the api because I can retrieve it from the api

Thanks

When having a set of data (json, ts) in a dynamic group: app/(blog-articles)/first.ts if you want to dynamically import it: let’s say that you’re using a useEffect with the dynamic import, Next.js throws an error

I’ve tried:

useEffect(()=>{
  const blogFound = await import(`./(blog-articles)/${params['blog-id'].ts`});

but it doesn’t work as Next.js throws an error, I’m actually figuring out the answer, check bellow.

<Tabs aria-label="Tabs with underline" variant="underline">
            <Tabs.Item active title="Profile" icon={HiUserCircle}>
              This is <span className="font-medium text-gray-800 dark:text-white">Profile tab's associated content</span>.
              Clicking another tab will toggle the visibility of this one for the next. The tab JavaScript swaps classes to
              control the content visibility and styling.
            </Tabs.Item>
            <Tabs.Item title="Dashboard" icon={MdDashboard}>
              This is <span className="font-medium text-gray-800 dark:text-white">Dashboard tab's associated content</span>.
              Clicking another tab will toggle the visibility of this one for the next. The tab JavaScript swaps classes to
              control the content visibility and styling.
            </Tabs.Item>
            <Tabs.Item title="Settings" icon={HiAdjustments}>
              This is <span className="font-medium text-gray-800 dark:text-white">Settings tab's associated content</span>.
              Clicking another tab will toggle the visibility of this one for the next. The tab JavaScript swaps classes to
              control the content visibility and styling.
            </Tabs.Item>
            <Tabs.Item title="Contacts" icon={HiClipboardList}>
              This is <span className="font-medium text-gray-800 dark:text-white">Contacts tab's associated content</span>.
              Clicking another tab will toggle the visibility of this one for the next. The tab JavaScript swaps classes to
              control the content visibility and styling.
            </Tabs.Item>
          </Tabs>

I want to change base style of icons, text next to them and outline, when clicked from blue to #80143c
Also interested in how can I change other colors, cause classname doesn’t work here
here’s how it looks like now

-tried to change color with a classname(had no effect, also tried class)
-tried to do it through root(crash)
-tried inner color property(no effect again)

My goal is to capture the current state of the map (including the legend) and download it as a PNG image file named “map.png”. So, i used the html2canvas library to capture the map as an image first, and then create a download link for it,”downloadBtn”, for triggering the download.

Here is the my complete code :

<!DOCTYPE html>
<html>
<head>
    <title>Leaflet Map with Rainbow Legend and Download</title>
    <link rel="stylesheet" href="https://unpkg.com/[email protected]/dist/leaflet.css" />
    <style>
        #map {
            height: 600px;
            width: 100%;
        }
        .legend {
            background-color: white;
            padding: 10px;
            line-height: 18px;
            color: #555;
        }
        .legend i {
            width: 18px;
            height: 18px;
            float: left;
            margin-right: 8px;
            opacity: 0.7;
        }
        #downloadBtn {
            position: absolute;
            top: 10px;
            right: 10px;
            z-index: 1000;
            background-color: white;
            border: 2px solid rgba(0,0,0,0.2);
            border-radius: 4px;
            padding: 5px 10px;
            font-size: 14px;
            cursor: pointer;
        }
    </style>
</head>
<body>
    <div id="map"></div>
    <button id="downloadBtn">Download Map</button>

    <script src="https://unpkg.com/[email protected]/dist/leaflet.js"></script>
    <script src="https://html2canvas.hertzen.com/dist/html2canvas.min.js"></script>
    <script>
        // Initialize the map
        var map = L.map('map').setView([51.505, -0.09], 13);
        // Add a base layer (e.g., OpenStreetMap)
        L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
            attribution: '© OpenStreetMap contributors'
        }).addTo(map);
        // Function to generate rainbow color based on a value between 0 and 1
        function getRainbowColor(value) {
            var hue = Math.floor((1 - value) * 240);  // 240 for blue, 0 for red
            return "hsl(" + hue + ", 100%, 50%)";     // Use HSL for hue-based color
        }
        // Create a custom legend control
        var legend = L.control({ position: 'bottomright' });
        legend.onAdd = function(map) {
            var div = L.DomUtil.create('div', 'legend');
            var labels = [];
            var grades = [0, 0.25, 0.5, 0.75, 1];  // Define the range for the legend
            // Loop through the grades and generate labels with a rainbow color
            for (var i = 0; i < grades.length; i++) {
                var color = getRainbowColor(grades[i]);
                div.innerHTML +=
                    '<i style="background:' + color + '"></i> ' +
                    grades[i] + (grades[i + 1] ? '&ndash;' + grades[i + 1] + '<br>' : '+');
            }
            return div;
        };
        // Add the legend to the map
        legend.addTo(map);

        // Function to download the map as an image
        function downloadMap() {
            html2canvas(document.getElementById('map')).then(function(canvas) {
                var link = document.createElement('a');
                link.download = 'map.png';
                link.href = canvas.toDataURL();
                link.click();
            });
        }

        // Add click event listener to the download button
        document.getElementById('downloadBtn').addEventListener('click', downloadMap);
    </script>
</body>
</html>

The downloaded image file shows a map with no actual map content loaded.
Result :

I’d like to create/use/store an SQLite (or any SQL) DB locally on the client, from the browser. This used to be impossible until approx late 2022 / early 2023, but now the File System Access API allows for direct file read/writes and is supported in most/all browsers.

(FYI my primary goals: my app works with data that users do not want transferred off their machine (for their own reasons), and it works with data that users want to manage backup/restore themselves – e.g. they’re already storing similar data in their own SCM, and they want it together)

All I can find so far:

1. SQLite has a VFS backend that uses File System Access API – but only uses the cutdown “OPFS” sub-system. (I don’t understand why they chose this – maybe OPFS gives better performance? – but it removes a lot of the core power of FSSA. e.g. OPFS does not store to hard-disk, it stores to a proprietary virtual location within the browser. OPFS by design prevents you from backup/restore/synch the database file. It also has a history of ‘accidentally’ deleting files occasionally – not common but reported by multiple people)
2. Using the File System Access API to wrap an SQLite DB – OK, works in theory, but used directly it only allows read-all/write-all semantics, so your SQL DB is going to be extremely slow (you’re manually copying the whole thing to/from disk on every transaction?).
3. Using the API directly – write your own database library, reinventing the wheel, and spending years trying to implement a complete SQL.

Is there an option I’m missing, or something I’ve misunderstood? Is there another way to achieve this?

node -v 20.18.0
npm -v 10.9.0

Hello, I have a problem, when I am trying to use any npx init command, I get error. for example npx init prisma
same I get when trying to init husky.

PS C:UsersUserDesktopNew folder (5)> npx prisma init
npm error code EINVALIDTAGNAME
npm error Invalid tag name “scripts.build=tsc” of package “scripts.build=tsc”: Tags may not have any characters that encodeURIComponent encodes.
npm error A complete log of this run can be found in: C:UsersUserAppDataLocalnpm-cache_logs2024-10-15T10_09_14_591Z-debug-0.log
PS C:UsersUserDesktopNew folder (5)>

tried update nodejs, uninstalled and reinstalled all global packages, also created another empty nodejs project, but I got same error

var sanitizeHtml = require("sanitize-html");

const ALLOWED_SCHEMES = ['http', 'https'];

const htmlStr = ''"><meta http-equiv="refresh" content="0;url=file:///etc/passwd" />';

const cleanedHTML = sanitizeHtml(htmlStr, {
    allowedAttributes: false,
    allowedTags: false,
    allowVulnerableTags: true,
    allowedSchemes: ALLOWED_SCHEMES,
    allowProtocolRelative: false,
    disallowedTagsMode: 'completelyDiscard',
    allowedSchemesByTag: {
        img: [...ALLOWED_SCHEMES, 'data']
    },
});

console.log(cleanedHTML);

Actual behavior

'"&gt;<meta http-equiv="refresh" content="0;url=file:///etc/passwd" />

Expected behavior

'"&gt;<meta http-equiv="refresh" content="0" />

**Description of the issue: **
Even though I have configured to allow only ‘http’ and ‘https’ schemes, ‘file’ scheme is getting allowed in content="0;url=file:///etc/passwd attribute

Details:

Version of Node.js: 18 LTS

2.13.1 version of sanitize-html npm dependency https://www.npmjs.com/package/sanitize-html

Works perfectly in FF and Chrome. Here is my code, the expected output and the Safari output:

HTML:

<!doctype html>
<html>
  <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <script src="https://cdn.tailwindcss.com"></script>
  </head>
  <body>
     <div class="mt-2">
       <input type="text" id="timezone-search" autofocus placeholder="Search for timezone" class="w-full z-50 px-4 py-2 text-sm border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:border-indigo-500" />
       <div  id="timezone-dropdown" class="z-50 mt-1 w-full bg-white rounded-md shadow-lg max-h-40 overflow-auto border border-gray-300">
         <ul id="timezone-options" class="py-1 text-sm text-gray-700">
            <option class="px-4 py-2 hover:bg-indigo-600 hover:text-white cursor-pointer">Here's an option</option>
         </ul>
       </div>
    </div>
  </body>
</html>

JS:

const options  = [
  "Andorra", "Dubai", "Kabul" ]
const tZOptions = document.getElementById("timezone-options");
for(var i = 0; i < options.length; i++) {
    var el = document.createElement("option");
    el.textContent = options[i];
    el.value = values[i];
    el.classList.add("px-4", "py-2", "hover:bg-indigo-600", "hover:text-white", "cursor-pointer");
    tZOptions.appendChild(el);
  }

Expected behavior (working in FF and Chrome):

Safari behavior:

const handleCharacterChange = (value,event) => {

    const plainText = value.replace(/</?[^>]+(>|$)/g, '');
    
    if (plainText?.length <= 250) {
        console.log(plainText,"jkldnaslkndlkas")
        setText(value)
    }else{
        console.log("aklsndakslmdlamsdlasmd  else ")
        document.getElementById("quill")?.addEventListener('keydown', (e) => handlePasteData(e));
    }

}

The Event Listener isn’t calling the first time

if user input exceeded from the max value it should prevent function

When using MediaRecorder on Chrome (Javascript on windows) with the avc1 option on chrome the generated blob is truncated as opposed to the vp9 option,

Here are the 2 options as explained in Recording video from webcam in MP4 format with MediaRecorder,

//const recorder = new MediaRecorder(stream, { mimeType: "video/mp4;codecs=avc1,mp4a.40.2" });
//const recorder = new MediaRecorder(stream, { mimeType: "video/mp4;codecs=vp9,opus" }

When using

var blob=new Blob(cF.chunks,typeOption);

This one is truncated:

Blob {size: 581270, type: 'video/mp4;codecs=avc1,mp4a.40.2'}

This one is fine:

Blob {size: 1028223, type: 'video/mp4;codecs=vp9,opus'}

Any idea why the file is truncated in the first option?

I have a website that uses threeJS. It is rendering to a canvas and it has a white clear color (renderer.setClearColor(0xffffff)).

I also have a div that gets rendered on top of it as an overlay for a drawer.
This overlay is animated onto the screen.

The problem is that when this runs on safari, the overlay gets rendered in a weird fashion

notice how the overlay effect is rendered differently for the canvas that threeJS is connected to in comparison with the canvas below it that I am copying the result into.

I would assume that this has something to do with how safari handles webGL connections, but is there any way around it?

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title></title>
        <style>
            body { margin: 0; }
            canvas { display: block; }
        </style>
        <script type="importmap">
            {
            "imports": {
                "three": "https://cdn.jsdelivr.net/npm/[email protected]/build/three.module.js"
            }
            }
        </script>
    </head>
    <body>
        <style>
            #overlay {
                position: fixed;
                left: 0px;
                top: 0px;
                width: 100vw;
                height: 100vh;
                background-color: rgba(0,0,0,0.2);
                pointer-events: none;
                opacity: 0;
                animation: fadein 0.3s ease-in-out forwards;
            }
            @keyframes fadein {
                0% {
                    opacity: 0;
                }
                100% {
                    opacity: 1;
                }
            }
        </style>
        <div id="container">

        </div>
        <canvas id="static"></canvas>
        <button id="button">test</button>
        <script>
            document.querySelector("#button").addEventListener("click", () => {
                if(document.querySelector("#overlay")) {
                    document.body.removeChild(document.querySelector("#overlay"))
                    return;
                }
                const div = document.createElement("div");
                div.id = "overlay";
                document.body.appendChild(div);
            })
        </script>
        <script type="module">
            import * as THREE from 'three';

            let camera, scene, renderer;
            let mesh;

            init();

            function init() {

                camera = new THREE.PerspectiveCamera( 70, window.innerWidth / window.innerHeight, 0.1, 100 );
                camera.position.z = 2;

                scene = new THREE.Scene();


                const geometry = new THREE.BoxGeometry();
                const material = new THREE.MeshBasicMaterial( { color: 0xff00ff } );

                mesh = new THREE.Mesh( geometry, material );
                scene.add( mesh );

                renderer = new THREE.WebGLRenderer( { antialias: true } );
                renderer.setClearColor(0xffffff)
                renderer.setPixelRatio( window.devicePixelRatio );
                renderer.setSize( 300, 300 );
                animate()
                //renderer.setAnimationLoop( animate );
                document.querySelector("#container").appendChild( renderer.domElement );

            }

            function animate() {

                mesh.rotation.x += 0.005;
                mesh.rotation.y += 0.01;

                renderer.render( scene, camera );

                document.querySelector("#static").getContext("2d").drawImage(renderer.domElement,0,0)

            }
        </script>
    </body>
</html>

I have this animation on GSAP with morphSVG: https://codepen.io/asssc/pen/VwopGqL

document.querySelector('.buttons_start').addEventListener('click', () => {
  // Green - Online
  gsap.to(".test.is-online path", { duration: 1, overwrite: true, morphSVG: "M.5,5.5C3.36,5.5,2.41,1,6.21,1s3.8,9,5.71,9,0-4.5,4.76-4.5S21.43,1,24.29,1s1.9,4.5,4.76,4.5" });
  
  // Red - Online
  gsap.to(".test.is-offline path", { duration: 1, overwrite: true, morphSVG: "M.5,5.5c2.85,0,1.9,3.16,5.71,3.16S10.01,1.88,14.77,1.88s4.4,6.64,8.76,6.77c2.85,0,2.65-3.16,5.51-3.16" });
})

document.querySelector('.buttons_stop').addEventListener('click', () => {
  // Geen - Offline
  gsap.to(".test.is-online path", { duration: 0.5, overwrite: true, morphSVG: "M.5,5.5H29.04" });

  // Red - Offline
  gsap.to(".test.is-offline path", { duration: 0.5, overwrite: true, morphSVG: "M.5,5.5H29.04" });
})

I need to use Anime.js, but I can’t start it smoothly, how do I make this animation exactly the same as on GSAP?
Anime.js example: https://codepen.io/asssc/pen/ExqWpbv

  const onlinePath = "M.5,5.5C3.36,5.5,2.41,1,6.21,1s3.8,9,5.71,9,0-4.5,4.76-4.5S21.43,1,24.29,1s1.9,4.5,4.76,4.5";
  const offlinePath = "M.5,5.5H29.04";
  const offlinePathRed = "M.5,5.5c2.85,0,1.9,3.16,5.71,3.16S10.01,1.88,14.77,1.88s4.4,6.64,8.76,6.77c2.85,0,2.65-3.16,5.51-3.16";

  document.querySelector('.buttons_start').addEventListener('click', () => {
    anime({
      targets: '.test.is-online path',
      d: [{ value: onlinePath }],
      duration: 1000,
      easing: 'easeInOutQuad'
    });

    anime({
      targets: '.test.is-offline path',
      d: [{ value: offlinePathRed }],
      duration: 1000,
      easing: 'easeInOutQuad'
    });
  });

  document.querySelector('.buttons_stop').addEventListener('click', () => {
    anime({
      targets: '.test.is-online path',
      d: [{ value: offlinePath }],
      duration: 500,
      easing: 'easeInOutQuad'
    });

    anime({
      targets: '.test.is-offline path',
      d: [{ value: offlinePath }],
      duration: 500,
      easing: 'easeInOutQuad'
    });
  });

I’ve read through the docs in Froala Editor and got no luck from the support email. Searches on google have produced few results and I’ve already looked through a number of subreddits to find an answer but anything I find is 4+ years old.

We use Froala in the company and there is no way I can switch out of it so I need to find a solution to this.

I am writing a plugin and I need it to perform an action on the html when the editor is initialized and the initial content is set.

I am using the editor thusly:

<template>
    <div>
        <textarea v-model="textContent" :name="name" style="display: none;" ></textarea>
        <froala v-model="textContent" :config="config"></froala>
    </div>
</template>

I am listening to the editor.initialized event in my plugin but there is no html content through editor.html.get() at this point.

The contentChanged event triggers on every content change but resets the caret to the start of the text area every time, which is not ideal.

Once my content is cleaned up I then write it back to the editor with editor.html.set(content)

Is there a specific event to listen for which will fire when the initial content load on the editor has finished?

Failing this I’m going to have to be dirty and set a flag somehow so that I can use the contentChanged event only once. But that feels like a hack!

The plugin is designed to run some custom cleanup on the html that is pasted into the editor so that we can conform fonts to only our fonts, colours to our colours, etc.
It also needs to run on initialization so that those who have already pasted content with incorrect fonts and colours will have it ‘conformed’ when they load up the editor.

Here’s the plugin code:

        function _init() {

            editor.events.on('initialized', function (e) {
                _cleanup();
            });

            editor.events.on('paste.after', function () {
                _cleanup();
            });
        }

Any help would be appreciated

I’ve already tried using initialized event but that doesn’t have any html content in the editor at this point.

I have also tried using contentChanged which works on init but then resets the caret to the beginning of the editor whenever anything is typed.

I have tried html.afterGet which doesn’t fire on init so doesn’t work for this. Likewise for html.afterSet.

basically fence view means, the document gets blurred but the small area near the mouse gets cleared, as the mouse moves that specific area is visible and rest document is blurred.

I have done it before using backdrop-filter , but now as i am implementing it on word file in the code i am using an iFrame for document to get load. As backdrop filter works on parent div and iFrame doesn’t have parent div so its not working.

I tried using filter: blur() but using this the word file gets blurred but the circle with clear view is not able to achieve.

here is the image reference that i want to achieve-
[1]: https://i.sstatic.net/OUEMuR18.png

the jsp code that i have in frontend –

<div style="margin-bottom: -36px; z-index: -1;" id="iframeDiv" name="iframeDiv">
  <div style="display: flex; background-color: #fff; width: 100%; marin-top: 79px; height: 70px; z-index: 0; position: relative">
     <iframe ng-src="{{getIframeDocSrc(this)}}" height="640px" width="100%" id="iframeDoc" name="iframeDoc" style="border: 0px;">
     </iframe>
   </div>
 </div>

js code that i use earlier to get that effect –

 element.css({ "backdrop-filter": "blur(8px)", "transition": "backdrop-filter 0.5s ease", "display": "block" });
element.mousemove(function (event) {
        let x = event.pageX - $(this).offset().left;
        let y = event.pageY - $(this).offset().top;
        let px = (x / $(this).width()) * 100;
        let py = (y / $(this).height()) * 100;
        this.style.webkitMaskImage = `-webkit-gradient(radial, ${px}% ${py}%, 0, ${px}% ${py}%, 150px, from(transparent), to(black))`;
        this.style.maskImage = `radial-gradient(circle 150px at ${px}% ${py}%, transparent, black)`;
      });