Category: javascript

I’ve searched around, and most examples I found are either in Python, PHP, or rely on full birth date/time (including the year or even hour of birth).
What I’m looking for is something much simpler:

I want to calculate someone’s Western zodiac sign based only on the day and month of birth, using plain JavaScript (no external libraries or APIs).

Example input: April 15 → output: Aries.

Is there a clean and reliable way to do this in JS, without relying on libraries?

I’m trying to write a chrome extension to grab some stored data and POST it to a remote db table. I’m trying to testing the post functionality using https://www.postb.in/. I am using a devtools panel that I’ve added. I’ve stepped through the code and it seems to be working up until about line 37 in background.js. What am I doing wrong?

Panel.js contains:

const toDbBtn = document.getElementById("toDbBtn");

toDbBtn.addEventListener("click", async () => {
  const dbName = document.getElementById("textBox").value;

  try {
    const result = await chrome.storage.local.get(["yourKey"]);

    if (result.yourKey) {
      const savedArray = JSON.parse(result.yourKey);
      console.log(result.yourKey);
      console.log("Saved Array:", savedArray);
      console.log("DB Name:", dbName);
      console.log("Type of result.yourKey:", typeof result.yourKey);
      console.log("Type of savedArray:", typeof savedArray);
      console.log("Is savedArray an array?", Array.isArray(savedArray));

      // Send message to background script
      const response = await chrome.runtime.sendMessage({
        action: "sendToDB",
        data: { dbName: dbName, savedArray: result.yourKey },
      });

      if (response.error) {
        console.error("Error:", response.error);
      } else {
        console.log("Success:", response.result);
      }
    } else {
      console.log("No data found in storage to send.");
    }
  } catch (error) {
    console.error("Error during storage or message sending:", error);
  }
});

background.js:

chrome.runtime.onConnect.addListener(port => {});

chrome.runtime.onMessage.addListener(async (request, sender, sendResponse) => {
  if (request.action === "sendToDB") {
    const { dbName, savedArray } = request.data;

    if (typeof dbName !== 'string' || typeof savedArray !== 'string') {
      sendResponse({ error: 'Invalid data types' });
      return false;
    }

    let parsedArray;
    try {
      parsedArray = JSON.parse(savedArray);
    } catch (e) {
      sendResponse({ error: 'Invalid JSON string for savedArray' });
      return false;
    }

    const data = {
      dbName: dbName,
      savedArray: parsedArray,
    };

    const postable = JSON.stringify(data);
    console.log("postable", postable);

    try {
      const response = await fetch("https://www.postb.in/1743970496740-3388752799946", {
        method: "POST",
        headers: {
          "Content-Type": "application/json",
        },
        body: postable,
      });

      const result = await response.json();
      console.log("Response from server:", result);
      sendResponse({ result: result });
    } catch (error) {
      sendResponse({ error: error.message });
    }

    return true; // Required for asynchronous response
  }
  return false; // Required if the message is not for this listener
});

manifest.json:

{
  "manifest_version": 3,
  "name": "myDevTools",
  "version": "1.0",
  "description": "Description of your extension",
  "devtools_page": "devtools.html",

  "host_permissions": [
    "*://*.cnn.com/",
    "https://www.postb.in/*"
  ],
  "permissions": [
    "storage",
    "activeTab",
    "scripting",
    "webNavigation",
    "tabs",
    "unlimitedStorage",
    "cookies",
    "alarms",
    "notifications",
    "contextMenus",
    "offscreen",
    "identity",
    "identity.email",
    "nativeMessaging",
    "browsingData"
  ],
  "background": {
    "service_worker": "background.js"
  }
}

I’m using the Fetch API for the first time, running some code within a (recent version of) Thunderbird:

let uri = whatever();
window.fetch(uri)
  .then((response) => {
    console.log(`got response with status ${response.status}`);
    if (!response.ok) {
      throw new Error(`thrown response status: ${response.status}`);
    }
    return response.text();
  })
  .then((xhtml) => doStuff(xhtml))
  .catch((err) => console.error(`fetching failed: ${err}`));

When I run this with a URI at which a relevant resource exists, it works (i.e. doStuff() does its stuff). But when I run this with a URI with a valid server, but with a path to a missing page – I don’t really get what I expected… the error console shows me:

fetching failed: TypeError: NetworkError when attempting to fetch resource.

So, I’m hitting the catch block, but not with the error I threw in the then block.

My question: Why is that the case? And – what can I do to be able to distinguish the situation of the resource being missing from other errors (like: Can’t connect to server, timeout, etc.)?

Note: If any additional information is necessary, please ask in a comment.

I’m trying to bundle the makeTLSClient function from here https://github.com/vkrot-cell/tls to make sure the claims are true and correct and to eventually use as described here https://github.com/explainers-by-googlers/verifyTLSServerCertificateForIWA?tab=readme-ov-file#example-with-direct-sockets-and-tls, mainly for the server that is implemented in the browser as described here https://github.com/digitalbazaar/forge?tab=readme-ov-file#transports-1.

This is what bun build spits out

bun build --target=browser lib/make-tls-client.js --outfile=bun-browser-bundle.js 
4 | import { createDecipheriv } from 'crypto';
             ^
error: Browser polyfill for module "node:crypto" doesn't have a matching export named "createDecipheriv"
    at /home/user/bin/wt/tls/lib/crypto/aes-cbc.js:4:10

4 | import { createDecipheriv } from 'crypto';
             ^
note: Bun's bundler defaults to browser builds instead of node or bun builds. If you want to use node or bun builds, you can set the target to "node" or "bun" in the transpiler options.
   at /home/user/bin/wt/tls/lib/crypto/aes-cbc.js:4:10

tsc does compile the source to JavaScript. I don’t think tsc ever handles the fact that the target is the browser where node:crypto is not defined.

I’ve ran in to this before, where I found out it’s impossble to polyfill node:crypto because internal node code is used that can’t be exported, something like the use of primordials in Node.js source code.

I think I might be able to use the forge browser code. However, I’m still wondering how the author managed to compile the source code in https://github.com/vkrot-cell/tls to a script that can be used in the browser?

I’ve compiled tsc nightly to a standalone executable previously.

All of a sudden deno is panicking, apparently due to the @next in npm:typescript@next/tsc.

Is deno compile really panicking just because of that @ symbol in npm:typescript@next/tsc?

RUST_BACKTRACE=full deno compile -A --node-modules-dir=auto --allow-scripts npm:typescript@next/tsc

============================================================
Deno has panicked. This is a bug in Deno. Please report this
at https://github.com/denoland/deno/issues/new.
If you can reliably reproduce this panic, include the
reproduction steps and re-run with the RUST_BACKTRACE=1 env
var set and include the backtrace in your report.

Platform: linux x86_64
Version: 2.2.8+6f406c1
Args: ["deno", "compile", "-A", "--node-modules-dir=auto", "--allow-scripts", "npm:typescript@next/tsc"]

View stack trace at:
https://panic.deno.com/v2.2.8+6f406c1/x86_64-unknown-linux-gnu/i9j8tEu8i16Fgztm7Fgytm7Fgn7m7Fgg-rwEmiuprFmpgpnEo03krEs_v2uE4hy2_Dsgt2_Dkx4opEqzzopEsi1opEq_jwrEkiw4tE61z4kEklo8tEmvi8hEgll8uEg94Jgo5JggwltCA

thread 'main' panicked at /home/runner/.cargo/registry/src/index.crates.io-1949cf8c6b5b557f/deno_semver-0.7.1/src/lib.rs:313:32:
programming error: cannot use matches with a tag: next
stack backtrace:
   0:     0x5605ba046a39 - <unknown>
   1:     0x5605b8b227a3 - <unknown>
   2:     0x5605ba045a92 - <unknown>
   3:     0x5605ba046893 - <unknown>
   4:     0x5605ba046036 - <unknown>
   5:     0x5605b89e1b1c - <unknown>
   6:     0x5605ba0457ac - <unknown>
   7:     0x5605ba08abc8 - <unknown>
   8:     0x5605ba08ab29 - <unknown>
   9:     0x5605ba08c68c - <unknown>
  10:     0x5605b8b20c1f - <unknown>
  11:     0x5605b9896c85 - <unknown>
  12:     0x5605b8698beb - <unknown>
  13:     0x5605b8884318 - <unknown>
  14:     0x5605b8a4b25c - <unknown>
  15:     0x5605b82cc172 - <unknown>
  16:     0x5605b82caf81 - <unknown>
  17:     0x5605b8794ef4 - <unknown>
  18:     0x5605b879380b - <unknown>
  19:     0x5605b8793ad0 - <unknown>
  20:     0x5605b88b2309 - <unknown>
  21:     0x5605b89d31d6 - <unknown>
  22:     0x5605b85537de - <unknown>
  23:     0x5605b89e38ea - <unknown>
  24:     0x5605b83e14f9 - <unknown>
  25:     0x5605b8a61ed5 - <unknown>
  26:     0x7ff3eb7bb24a - <unknown>
  27:     0x7ff3eb7bb305 - __libc_start_main
  28:     0x5605b6987029 - <unknown>
  29:                0x0 - <unknown>

Helo
In my file functions.js, i have code:

$(document).ready(function(){ 
    $("#menu-responsive div.menu").hide(); 
    $('#menu-responsive').click(function(){
    $("#menu-responsive div.menu").slideToggle();
    }); 
});
<script>
var $container = $('.memberlist-grid');
// initialize
$container.masonry({
  itemSelector: 'li'
});
</script>

Validate chrome is error:

Uncaught SyntaxError: Unexpected token '<' (at functions.js:7:1)

What should be a good code? Please help me 🙂

Helo
In my file functions.js, i have code:

$(document).ready(function(){ 
    $("#menu-responsive div.menu").hide(); 
    $('#menu-responsive').click(function(){
    $("#menu-responsive div.menu").slideToggle();
    }); 
});
<script>
var $container = $('.memberlist-grid');
// initialize
$container.masonry({
  itemSelector: 'li'
});
</script>

Validate chrome is error:

Uncaught SyntaxError: Unexpected token '<' (at functions.js:7:1)

What should be a good code? Please help me 🙂

I have bar chart like this,

const data = {
    labels:['book','desk'],
    datasets: [
      {
        label: 'My Data',
        data: [10,20],
        backgroundColor: 'rgba(255, 99, 132, 0.5)',
      },
    ],
 }

 <div style={{width:"800px"}}><Bar options={bar_options} data={data} /></div>

It shows the bar charts which has label book and desk

However I want to change the label to image, so I use options like this but in vain.

const bar_options = {
  responsive: true,
  indexAxis: 'y',
  plugins: {
    labels:{
      render: 'image',
      images: [{
        src:"book.jpg",
        height:25,
        width:25
      },{
        src:"desk.jpg",
        height:25,
        width:25
      }
     ]
    },
  },
};

How can I use book.jpg and desk.jpg instead of book and desk

Or if possible I want to render not only image using dom component such as

<div><p>book</p><img src="book.jpg></div>

I have bar chart like this,

const data = {
        labels:['book','desk']
        datasets: [
          {
            label: 'My Data',
            data: [10,20],
            backgroundColor: 'rgba(255, 99, 132, 0.5)',
          },
        ],
      };
 }

 <div style={{width:"800px"}}><Bar options={bar_options} data={data} /></div>

It shows the bar charts which has label book and desk

However I want to change the label to image, so I use options like this but in vain.

const bar_options = {
  responsive: true,
  indexAxis: 'y',
  plugins: {
    labels:{
      render: 'image',
      images: [{
        src:"book.jpg",
        height:25,
        width:25
      },{
        src:"desk.jpg",
        height:25,
        width:25
      }
     ]
    },
  },
};

How can I use book.jpg and desk.jpg instead of book and desk

Or if possible I want to render not only image using dom component such as

<div><p>book</p><img src="book.jpg></div>

ola, estoy teniendo un problema al llamar a la API https://restcountries.com/v3.1/all. Cuando accedo a esta URL directamente desde mi navegador Google Chrome, recibo una respuesta JSON/ARRAY con la información de todos los países.

Sin embargo, cuando intento hacer la misma llamada desde mi entorno de desarrollo en VS Code, utilizando git bash, la solicitud no funciona o recibo un error.

Este es el código que estoy utilizando: lo dejo en un imagen

El error exacto que estoy recibiendo en mi consola de VS Code es

{
“error”: “abortar”
}

I’m presently trying to use Dash AG-Grid for a use-case in my org. One of those is to have filters through DateTime format (“YYYY-MM-DD HH:mm”). Since, the pre-configured agDateColumnFilter doesn’t allow inputs through the aforementioned format, I’m now working on a custom script for the same. A snippet of it goes like this (I’m obscuring certain aspects of it to maintain confidentiality):

ABC.py:

# Dynamically generate columnDefs
columnDefs = []
for column in table_column_info:
    col_name = column["col_name"]
    data_type = column["data_type"]

    # Add the column definition
    column_def = {
        "field": col_name,
        "cellRenderer": "SpinnerCellRenderer",
        "sortable": True,
        "resizable": True,
        "headerClass": "abcd",
        "cellStyle": {"whiteSpace": "normal", "wordWrap": "break-word"},
        "floatingFilter": True,
    }

    # Determine the filter type based on the data type

    if "datetime" in data_type.lower():
        column_def["filter"] = "DateTimeFilter"
   
    elif data_type.lower() in ["string", "object"]:
        column_def["filter"] = "agTextColumnFilter"
    elif "int" or "float" or "double" in data_type.lower():
        column_def["filter"] = "agNumberColumnFilter"

    # if filter_type:
    #     column_def["filter"] = filter_type

    columnDefs.append(column_def)

# Render the AgGrid component
return dag.AgGrid(
    id="table-grid-view",
    columnDefs=columnDefs,
    defaultColDef={
        "flex": 1,
        "minWidth": 150,
        "sortable": True,
        "resizable": True,
    },
    rowModelType="infinite",  # Use infinite row model
    dashGridOptions={
        "rowBuffer": 0,
        "maxBlocksInCache": 2,
        "cacheBlockSize": 100,
        "cacheOverflowSize": 2,
        "maxConcurrentDatasourceRequests": 2,
        "infiniteInitialRowCount": 1,
        "pagination": True,
        "rowHeight": 30,
    },
)

dashAgGridComponentFunctions.js: (in assets folder)

var dagcomponentfuncs = window.dashAgGridComponentFunctions = window.dashAgGridComponentFunctions || {};
const [useImperativeHandle, useState, useEffect, forwardRef] = [
    React.useImperativeHandle,
    React.useState,
    React.useEffect,
    React.forwardRef,
];

dagcomponentfuncs.DateTimeFilter = forwardRef((props, ref) => {
    const [filterType, setFilterType] = useState("equals"); // Default filter type
    const [dateFrom, setDateFrom] = useState(""); // Start date
    const [dateTo, setDateTo] = useState(""); // End date (for "inRange")

// Expose AG Grid Filter Lifecycle callbacks
useImperativeHandle(ref, () => ({
    doesFilterPass(params) {
        const cellValue = params.data[props.column.colId];
        if (!cellValue) return false;

        const cellDate = new Date(cellValue);
        const fromDate = dateFrom ? new Date(dateFrom) : null;
        const toDate = dateTo ? new Date(dateTo) : null;

        switch (filterType) {
            case "equals":
                return fromDate && cellDate.getTime() === fromDate.getTime();
            case "notEqual":
                return fromDate && cellDate.getTime() !== fromDate.getTime();
            case "lessThan":
                return fromDate && cellDate < fromDate;
            case "greaterThan":
                return fromDate && cellDate > fromDate;
            case "inRange":
                return fromDate && toDate && cellDate >= fromDate && cellDate <= toDate;
            default:
                return true;
        }
    },

    isFilterActive() {
        return !!dateFrom || !!dateTo;
    },

    getModel() {
        if (!this.isFilterActive()) {
            return null;
        }
        return {
            [props.column.colId]: { // Use the column ID as the key
                type: filterType,
                dateFrom: dateFrom,
                dateTo: filterType === "inRange" ? dateTo : null,
                filterType: "date",
            },
        };
    },

    setModel(model) {
        if (model && model[props.column.colId]) {
            const filterDetails = model[props.column.colId];
            setFilterType(filterDetails.type || "equals");
            setDateFrom(filterDetails.dateFrom || "");
            setDateTo(filterDetails.dateTo || "");
        } else {
            setFilterType("equals");
            setDateFrom("");
            setDateTo("");
        }
    },
}));

// Notify Ag-Grid when the filter changes
useEffect(() => {
    props.filterChangedCallback();
}, [filterType, dateFrom, dateTo]);

// Handle changes to the filter type
function onFilterTypeChange(event) {
    setFilterType(event.target.value);
}

// Handle changes to the "dateFrom" input
function onDateFromChange(event) {
    setDateFrom(event.target.value);
}

// Handle changes to the "dateTo" input (only for "inRange")
function onDateToChange(event) {
    setDateTo(event.target.value);
}

return React.createElement(
    "div",
    { style: { display: "flex", flexDirection: "column", padding: "5px" } },
    React.createElement(
        "select",
        {
            value: filterType,
            onChange: onFilterTypeChange,
            style: { marginBottom: "5px", padding: "5px", width: "100%" },
        },
        React.createElement("option", { value: "equals" }, "Equals"),
        React.createElement("option", { value: "notEqual" }, "Does not equal"),
        React.createElement("option", { value: "lessThan" }, "Before"),
        React.createElement("option", { value: "greaterThan" }, "After"),
        React.createElement("option", { value: "inRange" }, "Between")
    ),
    React.createElement("input", {
        type: "datetime-local", // HTML5 date-time picker
        value: dateFrom,
        onChange: onDateFromChange,
        style: { width: "100%", padding: "5px", marginBottom: "5px" },
    }),
    filterType === "inRange" &&
        React.createElement("input", {
            type: "datetime-local", // HTML5 date-time picker
            value: dateTo,
            onChange: onDateToChange,
            style: { width: "100%", padding: "5px" },
        })
); });

So now I’m getting the intended UI for DateTime filter. It is also getting triggered as soon as I start typing. However, I’m not able to get data from that input. For reference, I want my data to be parsed/captured like this for my filterModel : {'XXX_YY': {'dateFrom': '2025-04-02 00:00:00', 'dateTo': None, 'filterType': 'date', 'type': 'equals'}} where ‘XXX_YY’ is the name of column on which filter is being applied. Instead, at the moment, it just returns this: {}.

What mistake might I be committing here? I am at my wit’s end to figure out this conundrum. Or is there an easier alternative to my need – something like extending the functionality of “agDateColumnFilter” to have date-time input (instead of only date input) and the rest UI as is?

I’m using dash_ag_grid==31.2.0, plotly==5.23.0 & Python 3.12.4 and operating in Chrome browser.

I need to organize the display in my Nest js application. I’m using the @mappers/nest library, who can tell me how to use DI in mapping profiles?

Hello everyone I need to organize mapping in my Nest js application, but I can’t find the right libraries. The ability to access DI and declarativeness is necessary.

Given a ReadableStream on Chromium-based browsers, with possible initiators such as

• fetch()
• WebSocketStream
• WebTransport
• User-defined, for example the readable side of a TransformStream which might not necessarily involve local or remote networking at all

WebSocket has a message (or frame) size limit. So do HTTP/2 and HTTP/3 frames. I don’t think fetch() or WebTransport will, generally, have a single read more than 65536 bytes when using pipeTo() or reading aReadableStreamDefaultReader.

Do you think you can distinguish between possible initiators/sources of the ReadableStream, by any means?

I have built a stacked vertical bar chart using Highcharts
for some odd reason all the data is squished in the middle instead of spreading to the full width of the chart

let depthChart;

    const buildDepthChart = (bidPrices, askPrices, bidsData, asksData) => {
        const maxAbsValue = Math.max(
            ...bidsData.map(item => Math.abs(item.y)),
            ...asksData.map(item => Math.abs(item.y))
        );

        // Combine and sort prices
        const allPrices = [...bidPrices, ...askPrices].sort((a, b) => a - b);
        const uniquePrices = [...new Set(allPrices)];

        depthChart = Highcharts.chart('marketDepthContainer', {
            chart: {
                type: 'column'
            },
            title: {
                text: 'עומק שוק'
            },
            xAxis: {
                categories: uniquePrices, // Sorted unique prices
                title: {
                    text: 'Price'
                },
                labels: {
                    step: 1
                },
                // tickInterval: 0.001, // Try tickInterval
                // min: 1.18, // Explicit min
                // max: 1.4, // Explicit max
            },
            yAxis: {
                title: {
                    text: 'Volume'
                },
                min: -maxAbsValue,
                max: maxAbsValue
            },
            plotOptions: {
                column: {
                    stacking: 'normal',
                    // pointWidth: 2,
                    borderRadius: '5%'
                }
            },
            tooltip: {
                useHTML: true,
                formatter: function () {
                    const price = this.x;
                    const volume = this.y;
                    return `<span><b>Price:</b> ${price}</span><br><span><b>${this.series.name}:</b> ${volume}</span>`;
                }
            },
            series: [{
                name: 'bids',
                data: bidsData,
                color: 'rgba(47, 171, 126, 0.2)'
            }, {
                name: 'asks',
                data: asksData,
                color: 'rgba(255, 88, 67, 0.2)'
            }]
        });
    };

here is a codepen snippet of my code with some stuff removed

image of said chart

and as can be seen in the image, and in the codepen they are all overlapping eachother in the middle, instead of spreading around the x-axis
i’m fairly new to highcharts but i did create a similar horizontal chart that works fine so i have no idea if it’s specific to column charts or i’m missing something