Blancer.com Tutorials and projects

I am using regex in php to get urls from string but need to use same regex in Javascript.
I have converted regex to javascript but getting “Invalid Regular Expression”.

PHP REGEX

$regex = '#b[a-zA-Z0-9_-]{3,}+://[^,s()<>]+(?:([wd]+)|([^,[:punct:]s]|/))}?#';
preg_match_all($regex, $message, $matches);
$urls = $matches[0];

Converted to javascript

const pattern = /b[a-zA-Z0-9_-]{3,}+?://[^,s()<>]+(?:([wd]+)|([^,s()<>]|/))/g;
var result = pattern.exec(message);
console.log(result);

I am not sure what is wrong in javascript regex. please help.

The goal is to have some sort of reusable directive, hook, utility, that would allow me to auto-focus on a component. I chose the approach of a custom directive.

What I got:

<!-- MyForm.vue -->
<template>
  <UiInput v-auto-focus>
  <UiSelect>
  <UiRadio>
  ...
</template>

The component has a wrapper:

<!-- UiInput.vue -->
<template>
  <div class="wrapper">
    <input />
  </div>
</template>

Here’s the directive taken straight from the docs:

import type { Directive } from 'vue';

export const vAutoFocus: Directive = {
  mounted: (el) => el.focus?.(),
};

This setup above won’t work, because the directive is trying to focus on a div element, which is, well, not focusable.

• Making the div focusable with tabindex will reduce a11y and code maintainability and probably behave as expected
• Using props on the component side like autoFocus might end up in prop drilling if I decide to add more wrappers and functionality to the UiInput.vue component.
• Several components require something like this, so I’d like to reuse this functionality, like I would with directives in Angular
• vnode argument of mounted shows the div wrapper, and its component field is null, so I can’t access its properties, even if I defineExpose them

So what do I do?

I’m trying to select multiple charts under each other with Plotly, in JavaScript. The best I could do so far is to create a stacked chart, but it still does not allow selection of multiple rows.
The idea is to detect in which row, at which point did the user start to drag there mouse and at which row, which point it ended. The charts should be selected from start to end. If there are multiple charts between the starting and ending row, the whole chart should be selected. Is there some sort of built-in solution for this in Plotly? I want to avoid HTML Canvases on top of Plotly at all costs, but so far I can’t see any other solution.
My code so far:

var trace1 = {
  x: [0, 1, 2],
  y: [10, 20, 30],
  type: "scatter",
  xaxis: "x",
  yaxis: "y",
};

var trace2 = {
  x: [2, 3, 4],
  y: [10, 20, 30],
  type: "scatter",
  xaxis: "x",
  yaxis: "y2",
};

var trace3 = {
  x: [3, 4, 5],
  y: [10, 20, 30],
  type: "scatter",
  xaxis: "x",
  yaxis: "y3",
};

var dummyTrace = {
  x: [0],
  y: [0],
  xaxis: "x_overlay",
  yaxis: "y_overlay",
  mode: "markers",
  marker: { opacity: 0 }, // invisible dummy trace
  showlegend: false,
  hoverinfo: "skip",
};

var data = [trace1, trace2, trace3, dummyTrace];

var layout = {
  grid: { rows: 3, columns: 1, pattern: "independent" },

  xaxis: { domain: [0, 1] }, // real xaxis
  yaxis: { domain: [0.66, 1] }, // top subplot
  yaxis2: { domain: [0.33, 0.66] }, // middle
  yaxis3: { domain: [0, 0.33] }, // bottom

  // This is the transparent overlay axis (spanning entire figure)
  xaxis_overlay: { domain: [0, 1], overlaying: "x", visible: false },
  yaxis_overlay: { domain: [0, 1], overlaying: "y", visible: false },

  dragmode: "select",
  selectdirection: "any",
  margin: { l: 50, r: 20, t: 20, b: 50 },
};

Plotly.newPlot("myDiv", data, layout);

// Listen to selection events — this works across entire panel now:
document.getElementById("myDiv").on("plotly_selected", function (eventData) {
  if (eventData) {
    console.log("Selected points:", eventData.points);
    // You can now filter which subplot they came from:
    eventData.points.forEach((pt) => {
      console.log(`subplot: ${pt.yaxis}, x: ${pt.x}, y: ${pt.y}`);
    });
  }
});

It looks like this:

In my AntD table, I’ve added a column resizer. But when resizing, accidental clicks triggers the column sorter which is not good. I was trying to limit the sort click only the built-in sort icon of the AntD table. But doesn’t work.

So thought of creating a full custom table header instead. But the required clicks doesn’t actually get triggered on click. Need a global solution due to existing column titles.

const ResizableTableTitle = ({...}) => {
  const {
    title,
    sorter,
    sortOrder = 'descend',
    sortDirections,
    onHeaderCell,
  } = column || {};
  const isSortable = !!sorter;

  if (!width || disableResize) {
    return <th {...restProps} />;
  }

  const renderSorter = () => {
    if (!isSortable) return null;

    return (
      <span
        className="ant-table-column-sorter ant-table-column-sorter-full"
        onClick={() => console.log('render sorter parent span')} // <- This doesn't work
      >
        <span
          onClick={() => console.log('render sorter child span')} // <- This doesn't work
          className="ant-table-column-sorter-inner"
          aria-hidden="true"
        >
          <span
            role="img"
            aria-label="caret-up"
            className="anticon anticon-caret-up ant-table-column-sorter-up"
          >
            <svg
              viewBox="0 0 1024 1024"
              focusable="false"
              data-icon="caret-up"
              width="1em"
              height="1em"
              fill="currentColor"
              aria-hidden="true"
            >
              <path d="M858.9 689L530.5 308.2c-9.4-10.9-27.5-10.9-37 0L165.1 689c-12.2 14.2-1.2 35 18.5 35h656.8c19.7 0 30.7-20.8 18.5-35z" />
            </svg>
          </span>
          <span
            role="img"
            aria-label="caret-down"
            className="anticon anticon-caret-down ant-table-column-sorter-down"
          >
            <svg
              viewBox="0 0 1024 1024"
              focusable="false"
              data-icon="caret-down"
              width="1em"
              height="1em"
              fill="currentColor"
              aria-hidden="true"
            >
              <path d="M840.4 300H183.6c-19.7 0-30.7 20.8-18.5 35l328.4 380.8c9.4 10.9 27.5 10.9 37 0L858.9 335c12.2-14.2 1.2-35-18.5-35z" />
            </svg>
          </span>
        </span>
      </span>
    );
  };

  const content = (
    <div
      className="ant-table-column-sorters"
      style={{...}}
      onClick={() => console.log('Header clicked')} // <- Only this works
    >
      <span className="ant-table-column-title">
        {typeof title === 'function' ? title() : title}
      </span>
      {renderSorter()}
    </div>
  );

  return (
    <Resizable
      width={width}
      height={0}
      handle={(handleAxis, ref) => (
        <div
          role="button"
          tabIndex={0}
          ref={ref}
          className={`handle-${handleAxis}`}
          style={{
            position: 'absolute',
            zIndex: 1,
            cursor: 'ew-resize',
            userSelect: 'none',
            ...
          }}
        >
          <i className="icon core-icon core-drag drag-icon" />
        </div>
      )}
      onResize={onResize}
      onResizeStop={onResizeStop}
      draggableOpts={{
        enableUserSelectHack: true,
        disabled: disableResize,
        grid: [10, 0], // Adjust grid size as needed
      }}
      axis="x"
      resizeHandles={['e']}
    >
      <th {...restProps}>{content}</th>
    </Resizable>
  );
};

In here only the mentioned console log is happening. Others doesn’t

following is part of the common Table Component

  const updatedColumnData = useMemo(() => {
    if (columnResizeDisable) {
      return columnData;
    }
    return columnData.map((column) => {
      ...
      return {
        ...column,
        sorter: false,
        width: finalWidth,
        onHeaderCell: () => ({
          column,
          width: finalWidth,
          onResize: handleResize(column.dataIndex),
          onResizeStop: handleSaveResize(column.dataIndex),
          disableResize,
        }),
      };
    });
  }, [...]);

  return (
    <Table
      columns={updatedColumnData}
      dataSource={dataSource}
      components={{
        header: {
          cell: columnResizeDisable ? undefined : ResizableTableTitle,
        },
        ...components,
      }}
      onChange={onChangeOverride}
      ...
    />
  )

I would like to create a Euler diagram with Highcharts library :

My goal example:

I found this solution, which involves forcing the x attribute of the points.

I would like to do something similar to the example, but I need the dataLabels and I want them to be correctly positioned on each circle.

Please see what I tried

Highcharts.chart('container', {
  chart: {
    events: {
      load: function() {
        var points = this.series[0].points,
          point1R = points[0].shapeArgs.r;

        points[1].graphic.attr({
          y: points[1].graphic.getBBox().y - (point1R - points[1].shapeArgs.r)
        });

        points[2].graphic.attr({
          y: points[2].graphic.getBBox().y - (point1R - points[2].shapeArgs.r)
        });
      }
    }
  },
  series: [{
    type: 'venn',
    dataLabels: {
            inside: true,
            enabled: true,
            verticalAlign: 'top'
        },
    data: [{
      sets: ['A'],
      value: 10
    }, {
      sets: ['B'],
      value: 3
    }, {
      sets: ['C'],
      value: 1,
    }, {
      sets: ['A', 'C'],
      value: 1
    }, {
      sets: ['A', 'B'],
      value: 3
    }, {
      sets: ['B', 'C'],
      value: 1
    }]
  }]
});

Could someone help me to design it ? Thank you in advance !

im developing a project like ChatRoulette or similar & i need help for ideas & coding.

In case you want to hop in with me you can either contact me at:

• X: https://x.com/@ShadyFeliu
• GitHub: https://www.github.com/ShadyFeliu

Also you have the repo at GitHub: https://github.com/ShadyFeliu/chatroulette-app

I appreciate your help & your ideas.

Thank you!

Getting more ideas & collaborate at the project.

I’m working on a web app that generates class routines based on semester and section input. I have an Excel file containing detailed schedules for all semesters at my university.

Each class entry looks like this:

• CSE 328.2 (UDD)

• CSE 328 → Course code

• .2 → Section

• (UDD) → Faculty code Some classes are 1.5 hours, others 2 hours, and they’re arranged by day and time.

Goal
I want to extract this data from Excel and use it to build a website where a user selects their semester and section, and the app generates their full weekly schedule automatically.

enter image description here

Questions:

What’s the best way to extract structured data from this Excel file?

Should I use a database to store the parsed data for faster retrieval, or read directly from Excel?

What technologies/libraries would be ideal for this (Python, JS, etc.)?

I’ve attached a screenshot for reference (note: image available externally).

Any help on parsing strategy, data modeling, or design logic is appreciated

I have a Flutter app using flutter_inappwebview: ^6.1.0. The frontend is built in Flutter, and the backend is Spring Boot (Java).

In the Flutter app, I load a WebView using initialUrlRequest, pointing to a React-based webpage (form.tsx). The React page tries to dynamically load a JavaScript file via an API endpoint, then notifies Flutter when it’s rendered.

React code(form.tsx)

const script: HTMLScriptElement = document.createElement('script');
script.src = formScriptUrl; // loaded via axios blob: "/down?formPath=/resources/example/form-ex.js"
script.defer = true;
script.onload = function () {
  window.flutter_inappwebview.callHandler('formRendered');
};
document.body.appendChild(script);

The JS file is fetched from a Spring API:

return await axios( {
  url: '/down?formPath=/resources/example/form-ex.js',
  method: 'GET',
  responseType: 'blob',
  headers: {
    'Content-Type': 'text/javascript'
    'Accept': 'application/json',
  },
});

Once the formRendered signal is received in Flutter, we run this:

await _webViewController?.evaluateJavascript(source: 'getBodyHtml()');

Where getBodyHtml() is:

const formEl = document.getElementById("body-html-area");
const BodyHtml = formEl?.innerHTML || '';
return BodyHtml;

Problem:

1. No API call is made to /down?formPath=…. The server has no request or error logs.
2. We wrapped the script logic in try-catch, with an alert() in case of errors — but no alert shows.
3. The WebView just shows a blank screen.
4. This issue occurs only for 2~3 users. Most users have no problems.

• Devices include both Android and iOS.
• Minimum Android version observed: 14
• No consistent pattern (e.g., Galaxy S23 works for some, fails for others)

What I’ve tried:

• Confirmed the JS file loads fine when accessed directly in browsers.
• Confirmed window.flutter_inappwebview.callHandler() works for most users.
• Verified getBodyHtml() works in normal conditions.
• Confirmed correct MIME type (text/javascript) and response format (blob).
• Added alert() statements in the script load path — but nothing is triggered for affected users.
• No CORS error is shown (and most users work fine, so it shouldn’t be a policy issue).

What could cause this script loading to silently fail on only a few devices?

Is there something about how blobs, script injection, or WebView caching works differently on a few devices or under rare network conditions?

Here is my code
export default function EventList() {

useEffect(() => {
    const parent = document.querySelector("ul")
    const child = document.querySelectorAll("li")
    if (parent) {
        parent.addEventListener("click", (event) => {

            console.log("parent clicked")
        }, true)
    }

    if (child) {
        child.forEach(function (list) {
            list.addEventListener("click", (event) => {
                event.stopPropagation()
                console.log("child clicked")
            })
        })
    }
    return () => {
        parent.removeEventListener("click", console.log("parent clicked"))
        child.removeEventListener("click", console.log("child clicked"))
    }

}, []);

return (
    <>
        <ul>
            <li>name</li>
            <li>age</li>
            <li>address</li>
        </ul>
    </>
)

}

Above code giving error as below
Uncaught TypeError: child.removeEventListener is not a function

I have a chatbot interface that is loaded inside an iframe. This iframe is embedded on other websites using a script tag and is cross-origin. The problem is, when the user scrolls with the mouse or touchpad while the cursor is over the iframe, both the iframe content and the parent page scroll at the same time. I want to prevent the parent page from scrolling when the cursor is over the iframe, but due to cross-origin restrictions, I cannot access the iframe’s internals directly. I’ve tried a few methods like hiding the parent scroll temporarily, but none are smooth or reliable. Looking for a better, user-friendly solution to this.

I attempted to hide the parent page’s scroll using overflow: hidden on mouse enter and re-enable it on mouse leave. However, these approaches were not smooth and caused UX issues. Since the iframe is cross-origin, I can’t directly listen to scroll or pointer events inside it. I expected that when the user scrolls while hovering over the iframe, only the iframe content would scroll, but in all cases, both the iframe and the parent page scroll at the same time.