Category: javascript

I have a requirement to download a pdf report (created using html table tag) from an html page by clicking of a button.

I do not want to use any 3rd party java script code for this. Is there any way to get this done using plan html and javascript

Any help on this very much appreciated.

Thanks
Shaji

I have a javascript function in snowflake:

returns variant
language javascript
as $$
  return Object.fromEntries(ARR.map(_ => ([_[KEY_FIELD_NAME], _[VALUE_FIELD_NAME]])))
$$;

it takes array of dict and returns dict.

Example input:

[ { "key": "country_code", "value": "ZA" } ]

output:

{'country_code': 'ZA'}

I am calling it as :

select array_to_dict_test(params)

Earlier params was of type variant and the function was working fine, now the type has been changed to
ARRAY(OBJECT(key VARCHAR(16777216), value VARCHAR(16777216)))

and it is throwing me exception Invalid argument types for function ‘ARRAY_TO_DICT’: (ARRAY(OBJECT(key VARCHAR(16777216), value VARCHAR(16777216))), VARCHAR(3), VARCHAR(5))

I have some code which which uses postMessage to display a message in an embedded iFrame. I am wondering if it is possible for the message to be displayed only for a set duration, or whether it can be ‘cleared’ (disappear) after it has been posted.

I’ve been trying to recreate this button hover effect but I just can’t seem to get it working, does anyone know how to make this?

https://web.archive.org/web/20250127215312/https://yummygum.com/#expand – when you hover over start a project or menu in the header, it looks like it’s creating a circle that scales then scales back to 0 on the position of the mouseleave.

I feel like the timing of scale is uneven too, that it starts fast growing and is slower shrinking.

I just can’t seem to get it right.

Has anyone made something like this before? I’d appreciate any help in making this as it’s a really cool effect.

Kind regards

I have YAML 11ty front matter that looks like this:

---
date: 2024-07-16
eleventyComputed: 
  title: "Petra, ({{ date | fullDateToYear }})"
tags:
  - lightboxItem
  - gridItem
portCategories: illustration
portTags: giftArt
---

I use 11ty’s built in tags frontmatter key for top-level content-types of this site I want to be displayed in arrays together. I feel like most 11ty users use the built in tags key for their blog tags. But, this is more of a case where I have multiple types of site content (lightbox items, blog posts, etc.) and I want those to have the top-level tags key, and for each type of site content to have its own set of categories and tags in separate frontmatter keys. (portCategories, portTags. projectCategories, projectTags. blogCategories, blogTags. Etc.)

When it comes to putting this setup into the Eleventy configuration file is where I get stuck. The Eleventy docs provide the example:

// Filter using `Array.filter`
eleventyConfig.addCollection("keyMustExistInData", function (collectionsApi) {
  return collectionsApi.getAll().filter(function (item) {
    // Side-step tags and do your own filtering
    return "myCustomDataKey" in item.data;
  });
});

I infer/understand from the rest of the 11ty Collections API docs page keyMustExistInData is both the name of what this collection will be, and the devs telling me, that the key this custom collection will be based on, must be in the YAML frontmatter data of the items that’ll go into it. In the case of my portfolio categories, portCategories?

Next, the example provides me with a function with which to do my filtering. From what I’m looking at elsewhere on filter(), the return part of a filter is the part where you choose what makes it into the filter. Instead of "myCustomDataKey", do I put in "portCategories: illustration" to get all the portfolio items I’ve given the category of illustration to?

How can I make it so I can swap which portfolio category I’m trying to display?

Tl;dr a walkthrough of the 11ty .addCollection collectionsApi.getAll().filter() filter example, and guidance on how to make custom tags and categories outside of Eleventy’s built in tags front matter key would be extremely helpful.

In windows, the value help dialog is not working properly with long uppercase item values. Below are the issues currently facing.

1. items are not aligned properly with the checkbox
2. ‘No Items or Conditions Selected’ part is not visible
3. scroll is not working properly

Issue snapshot

Question:
I’m using Vega-Lite to visualize a set of sessions with a vertical Y-axis representing asset values and horizontal X-axis for time (arrival=plug in and departure). I have implemented a legend-based selection, allowing users to click on an asset in the legend to filter the chart.

Expected Behavior:

• When I click on a specific asset in the legend, the Y-axis should only show that asset, and it should appear centered in the Y-axis.

Current Behavior:

• The legend selection works, but the Y-axis still shows all assets, even though only the selected asset is visible in the chart.

Sample Vega-Lite Spec:

{
  "$schema": "https://vega.github.io/schema/vega-lite/v2.6.0.json",
  "config": {
    "view": {
      "height": 300,
      "width": 400
    }
  },
  "datasets": {
    "data-sessions": [
      {
        "asset": "1",
        "sensor_id": "100",
        "plug in": "2023-12-04T10:35:00",
        "departure": "2023-12-04T12:00:00"
      },
      {
        "asset": "2",
        "sensor_id": "101",
        "plug in": "2023-12-04T08:45:00",
        "departure": "2023-12-04T10:15:00"
      },
      {
        "asset": "3",
        "sensor_id": "102",
        "plug in": "2023-12-04T09:30:00",
        "departure": "2023-12-04T12:10:00"
      },
      {
        "asset": "1",
        "sensor_id": "100",
        "plug in": "2023-12-04T07:35:00",
        "departure": "2023-12-04T08:33:00"
      },
      {
        "asset": "2",
        "sensor_id": "101",
        "plug in": "2023-12-04T10:45:00",
        "departure": "2023-12-04T12:15:00"
      },
      {
        "asset": "3",
        "sensor_id": "102",
        "plug in": "2023-12-04T08:50:00",
        "departure": "2023-12-04T10:10:00"
      },
    ]
  },
  "layer": [
    {
      "selection": {
        "air" : {"type": "multi", "encodings": ["color"], "fields": ["asset"], "bind": "legend"}
      },
      "data": {
        "name": "data-sessions"
      },
      "encoding": {
        "x": {
          "field": "plug in",
          "type": "temporal",
          "title": "Plug-in Time"
        },
        "x2": {
          "field": "departure",
          "type": "temporal",
          "title": "Departure Time"
        },
        "y": {
          "field": "asset",
          "type": "nominal",
          "title": "Asset",
          "condition":{
            "selection": {
              "field": "air"
            }
          }
        },
        "color": {
          "field": "asset",
          "type": "nominal",
          "legend": {
            "title": "Assets"
          }
        },
        "opacity": {
            "condition": {
              "selection": "air",
              "field": "asset",
              "type": "nominal",
              "legend": null,
              },
          "value": 0
          },
        "tooltip": [
          {"field": "sensor_id", "type": "ordinal", "title": "Sensor ID"},
          {"field": "plug in", "type": "temporal", "title": "Plug-in Time"},
          {"field": "departure", "type": "temporal", "title": "Departure Time"}
        ]
      },
      "mark": {
        "type": "rule",
        "strokeWidth": 3
      }
    }
  ]
}

What I’ve Tried:

• I have used a selection filter on the y axis, but it only changes the visibility, not the axis values.
• I also tried using a transform filter on the data, but it didn’t dynamically update the Y-axis.

When I select any asset from legends, I see all the asset ids on the Y-axis, see the example here:

Question:
How can I rearrange the Y-axis so that only the selected asset appears, and it is centered in the Y-axis when filtered using the legend?

Any help would be appreciated.

I want to extract the centerline of a character, through client-side JavaScript, from .ttf (TrueType Fonts). TrueType fonts store characters as 2 paths, an inner and outer paths. However, I need the centerline of the character (refer image, I am trying to achieve something similar to this.)

How would I go about implementing this?

I am already able to extract the outer and inner path from fonts using opentype.js

I am building a React Application. I currently have a refactored function designed to validate and submit data. I have two forms that utilise this function. Each form requires a different validation function. This is the current setup:

   const validData = await ValidateVideo(formData);
    if (validData) {
      const res = await onSubmit(formData);

How can I determine the validation function to use, depending on the form, using the function to validate and submit data?

One form gets the refactored function using the following route:
/student/:Username. This route makes a GET request to a student profile.
The other uses the following route:
/students/. This route makes a GET request to a student profile list.

How do I set the ValidateVideo for the student profile route, and the ValidateStudent for the profile list?

The refactored function is on the Client, meaning data is sent to the Server only when considered valid.
I thought about using window location to determine which validation function to set.
Is it the correct way to achieve what I am aiming for?

Basically, I want to put @container class in my div. I wanted to make it center and with breakpoints as it was in tailwind v3 e.g.:

    container: {
        center: true,
        padding: {
            DEFAULT: '1rem',
            sm: '2rem',
        },
        screens: {
            '2xl': '1400px'
        }
    },

but now it’s changed i’m trying this

@theme {
  --breakpoint-default: initial;
  --breakpoint-tablet: 40rem;
  --breakpoint-laptop: 64rem;
  --breakpoint-desktop: 80rem;
}

const Header = () => {
    return (
        <div className="@container/Header">
            <div className="flex w-full justify-between items-center blur-filter-sm bg-0.500">
                <div className="title font-bold">Sensei</div>
                <div className="etc" >
                    <Button className="rounded-full">Contact</Button>

                </div>
            </div>
        </div>
    );
};

however, this doesn’t work as it had been working and I don’t know what to do.

I’ve read new docs but they are not clear for me

I was expecting it to behave as a container(put center, paddings, etc.) but it doesn’t work

here is the header, but it should be with paddings

I am building a chat-like app using next.js. In the app, the text will be read by the app.

I am using two states to store the text for reader, the speechText for the current reading text and the nextSpeechTexts for the texts in the queue.

And I separated the conversation into blocks, and one block may include one or more items (every item would be a balloon in the real app). I want the items in the last block to show one by one with about 1.5s interval.

Now, the problem is the reading and the block showing are not synced since it is not necessary, but while the Tts component finished reading and start reading the next text, the last block would be cleared and show the items one by one in it again.

I suppose it would not be re-rendered since no props passed to it changed, even the references are the same. I just updated the speechText and nextSpeechTexts, both are not used by the ChatItem component.

But why is it now re-rendered (or re-mounted)? And how to make it stable?

The following is a minimal reproduction of the page (I replaced real tts service with a timeout text showing), and also put it onto codepen so you can play with it:

import { memo, useCallback, useEffect, useState } from "react"


const Tts = memo(({text, index, disabled, onStartSpeaking, onEndSpeaking}: {text: string, index: number, disabled?: boolean, onStartSpeaking?: () => void, onEndSpeaking?: () => void}) => {
  useEffect(() => {
    setTimeout(() => {
      onEndSpeaking?.()
    }, 5000)
  })
  const styles = [
    'bg-red-200',
    'bg-yellow-200',
    'bg-green-200',
    'bg-blue-200',
  ]
  return (
    <div className={styles[index % styles.length]}>Reading: {index}-{text}</div>
  )
})

const ChatItem = memo(({items, slowPop}: {items: string[], slowPop?: boolean}) => {
  const [visibleItems, setVisibleItems] = useState<string[]>([])
  useEffect(() => {
    if (slowPop) {
      const timeouts = items.map((item, index) => {
        const delay = 1500 * index
        return setTimeout(() => {
          setVisibleItems(items.slice(0, index + 1))
        }, delay)
      })
      return () => {
        timeouts.forEach(timeout => clearTimeout(timeout))
      }
    } else {
      setVisibleItems(items)
    }
  }, [items, slowPop])

  return (
    <div className="chat-item">
      <ul>
        {visibleItems.map((item, index) => (
          <li key={index} className="chat-item-text animate-fadeIn">
            {item}
          </li>
        ))}
      </ul>
    </div>
  )
})

function Content() {
  type SpeechTextMeta = {
    index: number
    text: string
  }
  const [speechText, setSpeechText] = useState<SpeechTextMeta>({
    index: 0,
    text: 'This is a test, and I will speak for a while.',
  })

  const [nextSpeechTexts, setNextSpeechTexts] = useState<SpeechTextMeta[]>([
    { index: 1, text: 'This is the followed text.' },
  ])

  const chatBlocks = [
    [
      'previous chat history...',
      'previous chat history...',
    ],
    [
      'I am doing well too.',
      'What are you up to today?',
      'Just working on some projects.',
    ],
  ]

  const handleEndSpeaking = useCallback(() => {
    if (nextSpeechTexts.length > 0) {
      const nextText = nextSpeechTexts[0]
      setNextSpeechTexts(nextSpeechTexts.slice(1))
      setSpeechText(nextText)
    }
  }, [nextSpeechTexts])

  return (
    <div>
      <Tts text={speechText.text} index={speechText.index} onEndSpeaking={handleEndSpeaking} disabled={false} />
      <ul>
        {chatBlocks.map((block, index, a) => (
          <li key={index} className="chat-item-title py-2">
            <ChatItem items={block} slowPop={index === a.length - 1} />
          </li>
        ))}
      </ul>
    </div>
  )
}

export default function Page() {
  const [show, setShow] = useState(false)
  return (
    <div>
      <button onClick={() => setShow(!show)} className="border border-gray-400 shadow-lg cursor-pointer active:bg-gray-500">Toggle</button>
      {show && <Content />}
    </div>
  )
}

I’m building a custom DevTools panel and trying to integrate it with an Electron app that uses React for the frontend.

The goal is to trigger a function in the Electron app when a button is clicked inside the custom DevTools panel.

So far, I’ve tried several approaches like accessing window, postMessage, chrome.runtime.sendMessage, and even Electron’s ipcRenderer/ipcMain, but none of them seem to work. In the DevTools context, window is either undefined or does not point to the Electron app’s context, and IPC messages are not received by the app.

If you’ve dealt with something similar or know of a working pattern, I’d appreciate your help or a minimal example!

In my Astro project I need a dynamic height for a certain html element.

I have this <script> tag in my Astro component:

<script>
  let height = 0;

  if (typeof document !== 'undefined') {
    const titleContainer = document.getElementById('my-container');
    height = titleContainer?.offsetHeight ?? 0;
  }
  console.log(height);
</script>

But how then use the variable height in my Astro component HTML like:

<div class=`hidden lg:block pt-[${height}px]`>

When I launch my app on Vercel, I am facing this issue consistently for the last day with fail —

It looks like you’re trying to use TypeScript but do not have the required package(s) installed.
Please install @types/node by running:
npm install –save-dev @types/node
If you are not trying to use TypeScript, please remove the tsconfig.json file from your package root (and any TypeScript files in your app and pages directories).
Next.js build worker exited with code: 1 and signal: null
Error: Command “npm run build” exited with 1

I have done everything known to mankind – clearing cache, uninstall node modules then reinstalling, downgrading typescript version, types/node, types/react, etc, the dependencies are there. I heard people talking about NODE_ENV but I dont have that so all should work but still, the issue persists. My Json and config file is below for reference.

{
  "name": "euphoniczen",
  "version": "0.1.0",
  "private": true,
  "type": "module",
  "scripts": {
    "dev": "next dev --turbopack",
    "build": "prisma generate && next build",
    "start": "next start",
    "lint": "next lint"
  },
  "dependencies": {
    "@auth/prisma-adapter": "^2.8.0",
    "@base-ui-components/react": "^1.0.0-alpha.8",
    "@emotion/react": "^11.14.0",
    "@emotion/styled": "^11.14.0",
    "@mui/icons-material": "^6.4.11",
    "@mui/material": "^6.4.8",
    "@mui/styled-engine-sc": "^6.4.6",
    "@paddle/paddle-js": "^1.4.0",
    "@paddle/paddle-node-sdk": "^2.7.0",
    "@paypal/paypal-server-sdk": "^1.0.0",
    "@paypal/react-paypal-js": "^8.8.3",
    "@prisma/client": "^6.6.0",
    "axios": "^1.8.4",
    "bootstrap-icons": "^1.11.3",
    "date-fns": "^4.1.0",
    "dompurify": "^3.2.5",
    "dotenv": "^8.2.0",
    "flowbite-react": "^0.11.7",
    "gsap": "^3.12.7",
    "lodash": "^4.17.21",
    "lucide-react": "^0.509.0",
    "micro": "^10.0.1",
    "motion": "^12.5.0",
    "next": "15.2.3",
    "next-auth": "^5.0.0-beta.25",
    "polished": "^4.3.1",
    "react": "^19.0.0",
    "react-dom": "^19.0.0",
    "react-spinners-kit": "^1.9.1",
    "styled-components": "^6.1.16",
    "zod": "^3.24.3"
  },
  "devDependencies": {
    "@eslint/eslintrc": "^3",
    "@tailwindcss/postcss": "^4",
    "@types/node": "^20.17.46",
    "@types/react": "^19.1.4",
    "@types/react-dom": "^19.1.5",
    "autoprefixer": "^10.4.21",
    "eslint": "^9",
    "eslint-config-next": "15.2.3",
    "postcss": "^8.5.3",
    "prisma": "^6.6.0",
    "tailwindcss": "^4.0.15",
    "typescript": "^5.8.3"
  }
}

and my typescript config file

{
  "compilerOptions": {
    "target": "ES2017",
    "lib": [
      "dom",
      "dom.iterable",
      "esnext"
    ],
    "allowJs": true,
    "skipLibCheck": true,
    "strict": false,
    "noEmit": true,
    "incremental": true,
    "module": "esnext",
    "esModuleInterop": true,
    "moduleResolution": "node",
    "resolveJsonModule": true,
    "isolatedModules": true,
    "jsx": "preserve",
    "plugins": [
      {
        "name": "next"
      }
    ]
  },
  "include": [
    "next-env.d.ts",
    ".next/types/**/*.ts",
    "**/*.ts",
    "**/*.tsx"
  ],
  "exclude": [
    "node_modules"
  ]
}

I laucnhed it on Vercel and encountering issues of types/etc

I have a problem with ag grid react and that is in some pages or some user browsers, when I scroll the grid horizontally, instead of scrolling whole grid, it just scrolls to header.
expect it to scroll whole grid
does anyone know how to solve this?