Freelance Projects, Design and Programming Tutorials
in the HMTL code below;
There are 2 inputs in the form,
I want to get the name of the textbox in which the change is made
function chkLen() {
var form = document.querySelector("form");
console.log(form.elements[1].tagName);
}<form action="myPHP.php" name="myForm" method="POST">
<input id="dCell" name="dCel" type="text" onChange="chkLen();" value="" >
<br>
<input name="h1" type="text" onChange="chkLen();" value="">
<br>
</form>I am working on react+vite project using Highcharts . These are the dependencies I am using :
"react": "^18.3.1" "highcharts": "^12.3.0", "highcharts-react-official": "^3.2.2"
This is my code for rendering the Highcharts chart:
import React from 'react';
import Highcharts from 'highcharts';
import HighchartsReact from 'highcharts-react-official';
import 'highcharts/modules/exporting';
import styles from './ExplorationMessageResponse.module.css';
import { IExplorationMessageResponseChart } from './ExplorationMessageResponseChart.type';
const ExplorationMessageResponseChart: React.FC<IExplorationMessageResponseChart> = ({
chartConfig,
}) => {
const isMapChart =
chartConfig?.chart?.type === 'map' ||
Object.keys(chartConfig?.chart || {})?.includes('map');
return (
<HighchartsReact
highcharts={Highcharts}
constructorType={isMapChart ? 'mapChart' : 'chart'}
options={chartConfig}
/>
);
};
export default ExplorationMessageResponseChart;
So I am receiving the options as chartConfig from the props and passing it on to the HighchartsReact.
So I am getting the options to export the chart as JPEG or PNG . But when I am clicking to export, I am getting Highcharts error #28 in the console.
The charts with chartConfig?.chart?.type === ‘map’ are getting exported. Other type of charts are giving an issue. I even tried other type of charts (line, bar) , by changing the import to import Highcharts from 'highcharts'; , but still no success.
Please let me know, how it can be resolved. Thank you
A client recently asked me to add a “pasting functionality” to the website.
They requested that just like how you can upload files using an input, or drag and drop, she requested that I’d add a method for the files to be uploaded by copying them from Gmail or the file system, and then pasting the into the website.
I tried following the mdn documentation to find a secure way to do this that would work on at least a few modern browsers. Sadly, nothing I tried worked on firefox or google (latest versions).
Here is an example of the intended result:
const menu = document.getElementById('custom-menu');
const copyOption = document.getElementById('copy-option');
const pasteOption = document.getElementById('paste-option');
let lastRightClickEvent = null;
document.addEventListener('contextmenu', function(e) {
e.preventDefault();
lastRightClickEvent = e;
menu.style.display = 'block';
menu.style.left = `${e.pageX}px`;
menu.style.top = `${e.pageY}px`;
});
document.addEventListener('click', function() {
menu.style.display = 'none';
});
pasteOption.addEventListener('click', async function() {
menu.style.display = 'none';
const files = await navigator.clipboard.read();
// THIS IS THE PART THAT FAILS
// I need this to show the files in the clipboard
console.log(files);
});<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
/* Basic styles for the custom context menu */
#custom-menu {
display: none;
position: absolute;
background: #fff;
border: 1px solid #ccc;
box-shadow: 2px 2px 6px rgba(0,0,0,0.15);
z-index: 1000;
min-width: 100px;
font-family: sans-serif;
}
#custom-menu ul {
list-style: none;
margin: 0;
padding: 0;
}
#custom-menu li {
padding: 8px 16px;
cursor: pointer;
}
#custom-menu li:hover {
background: #f0f0f0;
}
</style>
</head>
<body>
Right click to see the example context menu.
<div id="custom-menu">
<ul>
<li id="paste-option">Paste</li>
</ul>
</div>
<script src="index.js"></script>
</body>
</html>Sadly, this version doesn’t actually work. If you look at the files, they are completely empty. Is there any way to ‘paste’ a file from the windows file system into a website? and what are the requirements for this to happen in a secure context?
So, I have a mystery bug that is hard to reproduce, and so far my best suspect is this code:
function getMagicElement(root) {
var collection = root.getElementsByTagName('span');
for ( var i = 0; i < collection.length; i++ ) {
if ( collection[i].textContent.indexOf("Magic") != -1 ) {
return collection[i];
}
}
}
The problem is that it seems that sometimes the wrong element gets returned – one that does not have Magic in its contents.
Now, getElementsByTagName() returns a live HTMLCollection, so hypothetically it’s possible that it changes between the two invocations of collection[i]. However, Javascript is famously single-threaded, so I cannot imagine any scenario where this could actually happen. It would mean that some other thread modified the DOM while I was iterating.
Could this actually happen? Or should I look elsewhere for the elusive source of my bug?
I am having issues trying to run my JavaScript file. When I run this command:
"generate:xxx": "node shared/scripts/xxx.js",
So I run the command like so:
yarn run generate:xxx *file path*
It runs the command but then the application doesn’t run. I believe this is because I need the start server and the test runner like the example I have in the package.json:
"ci:test:xxx": "start-server-and-test start-server http://localhost:xxx 'SUITE=Test/xxx TESTS=tests/xxx/xxx.test.ts node test-runner.js'"
So I update my command to this:
"generate:xxx": "start-server-and-test start-server http://localhost:xxx 'node shared/scripts/xxx.js test-runner.js'"
But it now throws me this error when I run the command again:
$ start-server-and-test start-server http://localhost:xxx/mgmt/health 'node shared/scripts/xxx.js test-runner.js' tests/xxx/xxx.test.ts
/Users/xxx/Documents/Repos/xxx/node_modules/lazy-ass/index.js:117
throw err;
^
Error: expected <NPM script name that starts server> <url or port> <NPM script name that runs tests>
example: start-test start 8080 test
see https://github.com/bahmutov/start-server-and-test#use
I even tried this but still getting errors:
"run:xxx": "node shared/scripts/xxx.js test-runner.js",
"generate:xxx": "start-server-and-test start-server http://localhost:xxx/mgmt/health run:generateBaseImage"
I am trying to sort an array of strings. The simplest approach that I have found is using String.prototype.localeCompare. But I realized that it is not working exactly as I expected. I am actually confused how this method works.
I wrote a simple script that compares all English letters (upper and lower cases) and prints a + if first one is greater than second one, a – if first one is lower, and an x if both are the same. It shows that no matter what I set as sensitivity option, it will always compare them without considering the case.
Here is the code:
const C = 'abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ';
let res;
console.log('BASE:');
res = ' ';
for (const c of C) res += c + ' ';
res += 'n';
for (const c of C) {
res += c + ' ';
for (const d of C) {
res +=
['-', 'x', '+'][
c.localeCompare(d, undefined, { sensitivity: 'base' }) + 1
] + ' ';
}
res += 'n';
}
console.log(res);
// Also for case, variant, and accentAnd this is the output:
BASE:
a b c d e f g h i j k l m n o p q r s t u v w x y z A B C D E F G H I J K L M N O P Q R S T U V W X Y Z
a x - - - - - - - - - - - - - - - - - - - - - - - - - x - - - - - - - - - - - - - - - - - - - - - - - - -
b + x - - - - - - - - - - - - - - - - - - - - - - - - + x - - - - - - - - - - - - - - - - - - - - - - - -
c + + x - - - - - - - - - - - - - - - - - - - - - - - + + x - - - - - - - - - - - - - - - - - - - - - - -
d + + + x - - - - - - - - - - - - - - - - - - - - - - + + + x - - - - - - - - - - - - - - - - - - - - - -
e + + + + x - - - - - - - - - - - - - - - - - - - - - + + + + x - - - - - - - - - - - - - - - - - - - - -
f + + + + + x - - - - - - - - - - - - - - - - - - - - + + + + + x - - - - - - - - - - - - - - - - - - - -
g + + + + + + x - - - - - - - - - - - - - - - - - - - + + + + + + x - - - - - - - - - - - - - - - - - - -
h + + + + + + + x - - - - - - - - - - - - - - - - - - + + + + + + + x - - - - - - - - - - - - - - - - - -
i + + + + + + + + x - - - - - - - - - - - - - - - - - + + + + + + + + x - - - - - - - - - - - - - - - - -
j + + + + + + + + + x - - - - - - - - - - - - - - - - + + + + + + + + + x - - - - - - - - - - - - - - - -
k + + + + + + + + + + x - - - - - - - - - - - - - - - + + + + + + + + + + x - - - - - - - - - - - - - - -
l + + + + + + + + + + + x - - - - - - - - - - - - - - + + + + + + + + + + + x - - - - - - - - - - - - - -
m + + + + + + + + + + + + x - - - - - - - - - - - - - + + + + + + + + + + + + x - - - - - - - - - - - - -
n + + + + + + + + + + + + + x - - - - - - - - - - - - + + + + + + + + + + + + + x - - - - - - - - - - - -
o + + + + + + + + + + + + + + x - - - - - - - - - - - + + + + + + + + + + + + + + x - - - - - - - - - - -
p + + + + + + + + + + + + + + + x - - - - - - - - - - + + + + + + + + + + + + + + + x - - - - - - - - - -
q + + + + + + + + + + + + + + + + x - - - - - - - - - + + + + + + + + + + + + + + + + x - - - - - - - - -
r + + + + + + + + + + + + + + + + + x - - - - - - - - + + + + + + + + + + + + + + + + + x - - - - - - - -
s + + + + + + + + + + + + + + + + + + x - - - - - - - + + + + + + + + + + + + + + + + + + x - - - - - - -
t + + + + + + + + + + + + + + + + + + + x - - - - - - + + + + + + + + + + + + + + + + + + + x - - - - - -
u + + + + + + + + + + + + + + + + + + + + x - - - - - + + + + + + + + + + + + + + + + + + + + x - - - - -
v + + + + + + + + + + + + + + + + + + + + + x - - - - + + + + + + + + + + + + + + + + + + + + + x - - - -
w + + + + + + + + + + + + + + + + + + + + + + x - - - + + + + + + + + + + + + + + + + + + + + + + x - - -
x + + + + + + + + + + + + + + + + + + + + + + + x - - + + + + + + + + + + + + + + + + + + + + + + + x - -
y + + + + + + + + + + + + + + + + + + + + + + + + x - + + + + + + + + + + + + + + + + + + + + + + + + x -
z + + + + + + + + + + + + + + + + + + + + + + + + + x + + + + + + + + + + + + + + + + + + + + + + + + + x
A x - - - - - - - - - - - - - - - - - - - - - - - - - x - - - - - - - - - - - - - - - - - - - - - - - - -
B + x - - - - - - - - - - - - - - - - - - - - - - - - + x - - - - - - - - - - - - - - - - - - - - - - - -
C + + x - - - - - - - - - - - - - - - - - - - - - - - + + x - - - - - - - - - - - - - - - - - - - - - - -
D + + + x - - - - - - - - - - - - - - - - - - - - - - + + + x - - - - - - - - - - - - - - - - - - - - - -
E + + + + x - - - - - - - - - - - - - - - - - - - - - + + + + x - - - - - - - - - - - - - - - - - - - - -
F + + + + + x - - - - - - - - - - - - - - - - - - - - + + + + + x - - - - - - - - - - - - - - - - - - - -
G + + + + + + x - - - - - - - - - - - - - - - - - - - + + + + + + x - - - - - - - - - - - - - - - - - - -
H + + + + + + + x - - - - - - - - - - - - - - - - - - + + + + + + + x - - - - - - - - - - - - - - - - - -
I + + + + + + + + x - - - - - - - - - - - - - - - - - + + + + + + + + x - - - - - - - - - - - - - - - - -
J + + + + + + + + + x - - - - - - - - - - - - - - - - + + + + + + + + + x - - - - - - - - - - - - - - - -
K + + + + + + + + + + x - - - - - - - - - - - - - - - + + + + + + + + + + x - - - - - - - - - - - - - - -
L + + + + + + + + + + + x - - - - - - - - - - - - - - + + + + + + + + + + + x - - - - - - - - - - - - - -
M + + + + + + + + + + + + x - - - - - - - - - - - - - + + + + + + + + + + + + x - - - - - - - - - - - - -
N + + + + + + + + + + + + + x - - - - - - - - - - - - + + + + + + + + + + + + + x - - - - - - - - - - - -
O + + + + + + + + + + + + + + x - - - - - - - - - - - + + + + + + + + + + + + + + x - - - - - - - - - - -
P + + + + + + + + + + + + + + + x - - - - - - - - - - + + + + + + + + + + + + + + + x - - - - - - - - - -
Q + + + + + + + + + + + + + + + + x - - - - - - - - - + + + + + + + + + + + + + + + + x - - - - - - - - -
R + + + + + + + + + + + + + + + + + x - - - - - - - - + + + + + + + + + + + + + + + + + x - - - - - - - -
S + + + + + + + + + + + + + + + + + + x - - - - - - - + + + + + + + + + + + + + + + + + + x - - - - - - -
T + + + + + + + + + + + + + + + + + + + x - - - - - - + + + + + + + + + + + + + + + + + + + x - - - - - -
U + + + + + + + + + + + + + + + + + + + + x - - - - - + + + + + + + + + + + + + + + + + + + + x - - - - -
V + + + + + + + + + + + + + + + + + + + + + x - - - - + + + + + + + + + + + + + + + + + + + + + x - - - -
W + + + + + + + + + + + + + + + + + + + + + + x - - - + + + + + + + + + + + + + + + + + + + + + + x - - -
X + + + + + + + + + + + + + + + + + + + + + + + x - - + + + + + + + + + + + + + + + + + + + + + + + x - -
Y + + + + + + + + + + + + + + + + + + + + + + + + x - + + + + + + + + + + + + + + + + + + + + + + + + x -
Z + + + + + + + + + + + + + + + + + + + + + + + + + x + + + + + + + + + + + + + + + + + + + + + + + + + x
CASE:
a b c d e f g h i j k l m n o p q r s t u v w x y z A B C D E F G H I J K L M N O P Q R S T U V W X Y Z
a x - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
b + x - - - - - - - - - - - - - - - - - - - - - - - - + - - - - - - - - - - - - - - - - - - - - - - - - -
c + + x - - - - - - - - - - - - - - - - - - - - - - - + + - - - - - - - - - - - - - - - - - - - - - - - -
d + + + x - - - - - - - - - - - - - - - - - - - - - - + + + - - - - - - - - - - - - - - - - - - - - - - -
e + + + + x - - - - - - - - - - - - - - - - - - - - - + + + + - - - - - - - - - - - - - - - - - - - - - -
f + + + + + x - - - - - - - - - - - - - - - - - - - - + + + + + - - - - - - - - - - - - - - - - - - - - -
g + + + + + + x - - - - - - - - - - - - - - - - - - - + + + + + + - - - - - - - - - - - - - - - - - - - -
h + + + + + + + x - - - - - - - - - - - - - - - - - - + + + + + + + - - - - - - - - - - - - - - - - - - -
i + + + + + + + + x - - - - - - - - - - - - - - - - - + + + + + + + + - - - - - - - - - - - - - - - - - -
j + + + + + + + + + x - - - - - - - - - - - - - - - - + + + + + + + + + - - - - - - - - - - - - - - - - -
k + + + + + + + + + + x - - - - - - - - - - - - - - - + + + + + + + + + + - - - - - - - - - - - - - - - -
l + + + + + + + + + + + x - - - - - - - - - - - - - - + + + + + + + + + + + - - - - - - - - - - - - - - -
m + + + + + + + + + + + + x - - - - - - - - - - - - - + + + + + + + + + + + + - - - - - - - - - - - - - -
n + + + + + + + + + + + + + x - - - - - - - - - - - - + + + + + + + + + + + + + - - - - - - - - - - - - -
o + + + + + + + + + + + + + + x - - - - - - - - - - - + + + + + + + + + + + + + + - - - - - - - - - - - -
p + + + + + + + + + + + + + + + x - - - - - - - - - - + + + + + + + + + + + + + + + - - - - - - - - - - -
q + + + + + + + + + + + + + + + + x - - - - - - - - - + + + + + + + + + + + + + + + + - - - - - - - - - -
r + + + + + + + + + + + + + + + + + x - - - - - - - - + + + + + + + + + + + + + + + + + - - - - - - - - -
s + + + + + + + + + + + + + + + + + + x - - - - - - - + + + + + + + + + + + + + + + + + + - - - - - - - -
t + + + + + + + + + + + + + + + + + + + x - - - - - - + + + + + + + + + + + + + + + + + + + - - - - - - -
u + + + + + + + + + + + + + + + + + + + + x - - - - - + + + + + + + + + + + + + + + + + + + + - - - - - -
v + + + + + + + + + + + + + + + + + + + + + x - - - - + + + + + + + + + + + + + + + + + + + + + - - - - -
w + + + + + + + + + + + + + + + + + + + + + + x - - - + + + + + + + + + + + + + + + + + + + + + + - - - -
x + + + + + + + + + + + + + + + + + + + + + + + x - - + + + + + + + + + + + + + + + + + + + + + + + - - -
y + + + + + + + + + + + + + + + + + + + + + + + + x - + + + + + + + + + + + + + + + + + + + + + + + + - -
z + + + + + + + + + + + + + + + + + + + + + + + + + x + + + + + + + + + + + + + + + + + + + + + + + + + -
A + - - - - - - - - - - - - - - - - - - - - - - - - - x - - - - - - - - - - - - - - - - - - - - - - - - -
B + + - - - - - - - - - - - - - - - - - - - - - - - - + x - - - - - - - - - - - - - - - - - - - - - - - -
C + + + - - - - - - - - - - - - - - - - - - - - - - - + + x - - - - - - - - - - - - - - - - - - - - - - -
D + + + + - - - - - - - - - - - - - - - - - - - - - - + + + x - - - - - - - - - - - - - - - - - - - - - -
E + + + + + - - - - - - - - - - - - - - - - - - - - - + + + + x - - - - - - - - - - - - - - - - - - - - -
F + + + + + + - - - - - - - - - - - - - - - - - - - - + + + + + x - - - - - - - - - - - - - - - - - - - -
G + + + + + + + - - - - - - - - - - - - - - - - - - - + + + + + + x - - - - - - - - - - - - - - - - - - -
H + + + + + + + + - - - - - - - - - - - - - - - - - - + + + + + + + x - - - - - - - - - - - - - - - - - -
I + + + + + + + + + - - - - - - - - - - - - - - - - - + + + + + + + + x - - - - - - - - - - - - - - - - -
J + + + + + + + + + + - - - - - - - - - - - - - - - - + + + + + + + + + x - - - - - - - - - - - - - - - -
K + + + + + + + + + + + - - - - - - - - - - - - - - - + + + + + + + + + + x - - - - - - - - - - - - - - -
L + + + + + + + + + + + + - - - - - - - - - - - - - - + + + + + + + + + + + x - - - - - - - - - - - - - -
M + + + + + + + + + + + + + - - - - - - - - - - - - - + + + + + + + + + + + + x - - - - - - - - - - - - -
N + + + + + + + + + + + + + + - - - - - - - - - - - - + + + + + + + + + + + + + x - - - - - - - - - - - -
O + + + + + + + + + + + + + + + - - - - - - - - - - - + + + + + + + + + + + + + + x - - - - - - - - - - -
P + + + + + + + + + + + + + + + + - - - - - - - - - - + + + + + + + + + + + + + + + x - - - - - - - - - -
Q + + + + + + + + + + + + + + + + + - - - - - - - - - + + + + + + + + + + + + + + + + x - - - - - - - - -
R + + + + + + + + + + + + + + + + + + - - - - - - - - + + + + + + + + + + + + + + + + + x - - - - - - - -
S + + + + + + + + + + + + + + + + + + + - - - - - - - + + + + + + + + + + + + + + + + + + x - - - - - - -
T + + + + + + + + + + + + + + + + + + + + - - - - - - + + + + + + + + + + + + + + + + + + + x - - - - - -
U + + + + + + + + + + + + + + + + + + + + + - - - - - + + + + + + + + + + + + + + + + + + + + x - - - - -
V + + + + + + + + + + + + + + + + + + + + + + - - - - + + + + + + + + + + + + + + + + + + + + + x - - - -
W + + + + + + + + + + + + + + + + + + + + + + + - - - + + + + + + + + + + + + + + + + + + + + + + x - - -
X + + + + + + + + + + + + + + + + + + + + + + + + - - + + + + + + + + + + + + + + + + + + + + + + + x - -
Y + + + + + + + + + + + + + + + + + + + + + + + + + - + + + + + + + + + + + + + + + + + + + + + + + + x -
Z + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + x
VARIANT:
a b c d e f g h i j k l m n o p q r s t u v w x y z A B C D E F G H I J K L M N O P Q R S T U V W X Y Z
a x - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
b + x - - - - - - - - - - - - - - - - - - - - - - - - + - - - - - - - - - - - - - - - - - - - - - - - - -
c + + x - - - - - - - - - - - - - - - - - - - - - - - + + - - - - - - - - - - - - - - - - - - - - - - - -
d + + + x - - - - - - - - - - - - - - - - - - - - - - + + + - - - - - - - - - - - - - - - - - - - - - - -
e + + + + x - - - - - - - - - - - - - - - - - - - - - + + + + - - - - - - - - - - - - - - - - - - - - - -
f + + + + + x - - - - - - - - - - - - - - - - - - - - + + + + + - - - - - - - - - - - - - - - - - - - - -
g + + + + + + x - - - - - - - - - - - - - - - - - - - + + + + + + - - - - - - - - - - - - - - - - - - - -
h + + + + + + + x - - - - - - - - - - - - - - - - - - + + + + + + + - - - - - - - - - - - - - - - - - - -
i + + + + + + + + x - - - - - - - - - - - - - - - - - + + + + + + + + - - - - - - - - - - - - - - - - - -
j + + + + + + + + + x - - - - - - - - - - - - - - - - + + + + + + + + + - - - - - - - - - - - - - - - - -
k + + + + + + + + + + x - - - - - - - - - - - - - - - + + + + + + + + + + - - - - - - - - - - - - - - - -
l + + + + + + + + + + + x - - - - - - - - - - - - - - + + + + + + + + + + + - - - - - - - - - - - - - - -
m + + + + + + + + + + + + x - - - - - - - - - - - - - + + + + + + + + + + + + - - - - - - - - - - - - - -
n + + + + + + + + + + + + + x - - - - - - - - - - - - + + + + + + + + + + + + + - - - - - - - - - - - - -
o + + + + + + + + + + + + + + x - - - - - - - - - - - + + + + + + + + + + + + + + - - - - - - - - - - - -
p + + + + + + + + + + + + + + + x - - - - - - - - - - + + + + + + + + + + + + + + + - - - - - - - - - - -
q + + + + + + + + + + + + + + + + x - - - - - - - - - + + + + + + + + + + + + + + + + - - - - - - - - - -
r + + + + + + + + + + + + + + + + + x - - - - - - - - + + + + + + + + + + + + + + + + + - - - - - - - - -
s + + + + + + + + + + + + + + + + + + x - - - - - - - + + + + + + + + + + + + + + + + + + - - - - - - - -
t + + + + + + + + + + + + + + + + + + + x - - - - - - + + + + + + + + + + + + + + + + + + + - - - - - - -
u + + + + + + + + + + + + + + + + + + + + x - - - - - + + + + + + + + + + + + + + + + + + + + - - - - - -
v + + + + + + + + + + + + + + + + + + + + + x - - - - + + + + + + + + + + + + + + + + + + + + + - - - - -
w + + + + + + + + + + + + + + + + + + + + + + x - - - + + + + + + + + + + + + + + + + + + + + + + - - - -
x + + + + + + + + + + + + + + + + + + + + + + + x - - + + + + + + + + + + + + + + + + + + + + + + + - - -
y + + + + + + + + + + + + + + + + + + + + + + + + x - + + + + + + + + + + + + + + + + + + + + + + + + - -
z + + + + + + + + + + + + + + + + + + + + + + + + + x + + + + + + + + + + + + + + + + + + + + + + + + + -
A + - - - - - - - - - - - - - - - - - - - - - - - - - x - - - - - - - - - - - - - - - - - - - - - - - - -
B + + - - - - - - - - - - - - - - - - - - - - - - - - + x - - - - - - - - - - - - - - - - - - - - - - - -
C + + + - - - - - - - - - - - - - - - - - - - - - - - + + x - - - - - - - - - - - - - - - - - - - - - - -
D + + + + - - - - - - - - - - - - - - - - - - - - - - + + + x - - - - - - - - - - - - - - - - - - - - - -
E + + + + + - - - - - - - - - - - - - - - - - - - - - + + + + x - - - - - - - - - - - - - - - - - - - - -
F + + + + + + - - - - - - - - - - - - - - - - - - - - + + + + + x - - - - - - - - - - - - - - - - - - - -
G + + + + + + + - - - - - - - - - - - - - - - - - - - + + + + + + x - - - - - - - - - - - - - - - - - - -
H + + + + + + + + - - - - - - - - - - - - - - - - - - + + + + + + + x - - - - - - - - - - - - - - - - - -
I + + + + + + + + + - - - - - - - - - - - - - - - - - + + + + + + + + x - - - - - - - - - - - - - - - - -
J + + + + + + + + + + - - - - - - - - - - - - - - - - + + + + + + + + + x - - - - - - - - - - - - - - - -
K + + + + + + + + + + + - - - - - - - - - - - - - - - + + + + + + + + + + x - - - - - - - - - - - - - - -
L + + + + + + + + + + + + - - - - - - - - - - - - - - + + + + + + + + + + + x - - - - - - - - - - - - - -
M + + + + + + + + + + + + + - - - - - - - - - - - - - + + + + + + + + + + + + x - - - - - - - - - - - - -
N + + + + + + + + + + + + + + - - - - - - - - - - - - + + + + + + + + + + + + + x - - - - - - - - - - - -
O + + + + + + + + + + + + + + + - - - - - - - - - - - + + + + + + + + + + + + + + x - - - - - - - - - - -
P + + + + + + + + + + + + + + + + - - - - - - - - - - + + + + + + + + + + + + + + + x - - - - - - - - - -
Q + + + + + + + + + + + + + + + + + - - - - - - - - - + + + + + + + + + + + + + + + + x - - - - - - - - -
R + + + + + + + + + + + + + + + + + + - - - - - - - - + + + + + + + + + + + + + + + + + x - - - - - - - -
S + + + + + + + + + + + + + + + + + + + - - - - - - - + + + + + + + + + + + + + + + + + + x - - - - - - -
T + + + + + + + + + + + + + + + + + + + + - - - - - - + + + + + + + + + + + + + + + + + + + x - - - - - -
U + + + + + + + + + + + + + + + + + + + + + - - - - - + + + + + + + + + + + + + + + + + + + + x - - - - -
V + + + + + + + + + + + + + + + + + + + + + + - - - - + + + + + + + + + + + + + + + + + + + + + x - - - -
W + + + + + + + + + + + + + + + + + + + + + + + - - - + + + + + + + + + + + + + + + + + + + + + + x - - -
X + + + + + + + + + + + + + + + + + + + + + + + + - - + + + + + + + + + + + + + + + + + + + + + + + x - -
Y + + + + + + + + + + + + + + + + + + + + + + + + + - + + + + + + + + + + + + + + + + + + + + + + + + x -
Z + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + x
ACCENT:
a b c d e f g h i j k l m n o p q r s t u v w x y z A B C D E F G H I J K L M N O P Q R S T U V W X Y Z
a x - - - - - - - - - - - - - - - - - - - - - - - - - x - - - - - - - - - - - - - - - - - - - - - - - - -
b + x - - - - - - - - - - - - - - - - - - - - - - - - + x - - - - - - - - - - - - - - - - - - - - - - - -
c + + x - - - - - - - - - - - - - - - - - - - - - - - + + x - - - - - - - - - - - - - - - - - - - - - - -
d + + + x - - - - - - - - - - - - - - - - - - - - - - + + + x - - - - - - - - - - - - - - - - - - - - - -
e + + + + x - - - - - - - - - - - - - - - - - - - - - + + + + x - - - - - - - - - - - - - - - - - - - - -
f + + + + + x - - - - - - - - - - - - - - - - - - - - + + + + + x - - - - - - - - - - - - - - - - - - - -
g + + + + + + x - - - - - - - - - - - - - - - - - - - + + + + + + x - - - - - - - - - - - - - - - - - - -
h + + + + + + + x - - - - - - - - - - - - - - - - - - + + + + + + + x - - - - - - - - - - - - - - - - - -
i + + + + + + + + x - - - - - - - - - - - - - - - - - + + + + + + + + x - - - - - - - - - - - - - - - - -
j + + + + + + + + + x - - - - - - - - - - - - - - - - + + + + + + + + + x - - - - - - - - - - - - - - - -
k + + + + + + + + + + x - - - - - - - - - - - - - - - + + + + + + + + + + x - - - - - - - - - - - - - - -
l + + + + + + + + + + + x - - - - - - - - - - - - - - + + + + + + + + + + + x - - - - - - - - - - - - - -
m + + + + + + + + + + + + x - - - - - - - - - - - - - + + + + + + + + + + + + x - - - - - - - - - - - - -
n + + + + + + + + + + + + + x - - - - - - - - - - - - + + + + + + + + + + + + + x - - - - - - - - - - - -
o + + + + + + + + + + + + + + x - - - - - - - - - - - + + + + + + + + + + + + + + x - - - - - - - - - - -
p + + + + + + + + + + + + + + + x - - - - - - - - - - + + + + + + + + + + + + + + + x - - - - - - - - - -
q + + + + + + + + + + + + + + + + x - - - - - - - - - + + + + + + + + + + + + + + + + x - - - - - - - - -
r + + + + + + + + + + + + + + + + + x - - - - - - - - + + + + + + + + + + + + + + + + + x - - - - - - - -
s + + + + + + + + + + + + + + + + + + x - - - - - - - + + + + + + + + + + + + + + + + + + x - - - - - - -
t + + + + + + + + + + + + + + + + + + + x - - - - - - + + + + + + + + + + + + + + + + + + + x - - - - - -
u + + + + + + + + + + + + + + + + + + + + x - - - - - + + + + + + + + + + + + + + + + + + + + x - - - - -
v + + + + + + + + + + + + + + + + + + + + + x - - - - + + + + + + + + + + + + + + + + + + + + + x - - - -
w + + + + + + + + + + + + + + + + + + + + + + x - - - + + + + + + + + + + + + + + + + + + + + + + x - - -
x + + + + + + + + + + + + + + + + + + + + + + + x - - + + + + + + + + + + + + + + + + + + + + + + + x - -
y + + + + + + + + + + + + + + + + + + + + + + + + x - + + + + + + + + + + + + + + + + + + + + + + + + x -
z + + + + + + + + + + + + + + + + + + + + + + + + + x + + + + + + + + + + + + + + + + + + + + + + + + + x
A x - - - - - - - - - - - - - - - - - - - - - - - - - x - - - - - - - - - - - - - - - - - - - - - - - - -
B + x - - - - - - - - - - - - - - - - - - - - - - - - + x - - - - - - - - - - - - - - - - - - - - - - - -
C + + x - - - - - - - - - - - - - - - - - - - - - - - + + x - - - - - - - - - - - - - - - - - - - - - - -
D + + + x - - - - - - - - - - - - - - - - - - - - - - + + + x - - - - - - - - - - - - - - - - - - - - - -
E + + + + x - - - - - - - - - - - - - - - - - - - - - + + + + x - - - - - - - - - - - - - - - - - - - - -
F + + + + + x - - - - - - - - - - - - - - - - - - - - + + + + + x - - - - - - - - - - - - - - - - - - - -
G + + + + + + x - - - - - - - - - - - - - - - - - - - + + + + + + x - - - - - - - - - - - - - - - - - - -
H + + + + + + + x - - - - - - - - - - - - - - - - - - + + + + + + + x - - - - - - - - - - - - - - - - - -
I + + + + + + + + x - - - - - - - - - - - - - - - - - + + + + + + + + x - - - - - - - - - - - - - - - - -
J + + + + + + + + + x - - - - - - - - - - - - - - - - + + + + + + + + + x - - - - - - - - - - - - - - - -
K + + + + + + + + + + x - - - - - - - - - - - - - - - + + + + + + + + + + x - - - - - - - - - - - - - - -
L + + + + + + + + + + + x - - - - - - - - - - - - - - + + + + + + + + + + + x - - - - - - - - - - - - - -
M + + + + + + + + + + + + x - - - - - - - - - - - - - + + + + + + + + + + + + x - - - - - - - - - - - - -
N + + + + + + + + + + + + + x - - - - - - - - - - - - + + + + + + + + + + + + + x - - - - - - - - - - - -
O + + + + + + + + + + + + + + x - - - - - - - - - - - + + + + + + + + + + + + + + x - - - - - - - - - - -
P + + + + + + + + + + + + + + + x - - - - - - - - - - + + + + + + + + + + + + + + + x - - - - - - - - - -
Q + + + + + + + + + + + + + + + + x - - - - - - - - - + + + + + + + + + + + + + + + + x - - - - - - - - -
R + + + + + + + + + + + + + + + + + x - - - - - - - - + + + + + + + + + + + + + + + + + x - - - - - - - -
S + + + + + + + + + + + + + + + + + + x - - - - - - - + + + + + + + + + + + + + + + + + + x - - - - - - -
T + + + + + + + + + + + + + + + + + + + x - - - - - - + + + + + + + + + + + + + + + + + + + x - - - - - -
U + + + + + + + + + + + + + + + + + + + + x - - - - - + + + + + + + + + + + + + + + + + + + + x - - - - -
V + + + + + + + + + + + + + + + + + + + + + x - - - - + + + + + + + + + + + + + + + + + + + + + x - - - -
W + + + + + + + + + + + + + + + + + + + + + + x - - - + + + + + + + + + + + + + + + + + + + + + + x - - -
X + + + + + + + + + + + + + + + + + + + + + + + x - - + + + + + + + + + + + + + + + + + + + + + + + x - -
Y + + + + + + + + + + + + + + + + + + + + + + + + x - + + + + + + + + + + + + + + + + + + + + + + + + x -
Z + + + + + + + + + + + + + + + + + + + + + + + + + x + + + + + + + + + + + + + + + + + + + + + + + + + x
The results were the same in NodeJS v22 and Microsoft Edge (I know both are using V8 engine)
I am working on a small side project in Java. Since I wanted to keep it simple and kind of have a retro/nostalgic feeling, I am using JavaFX for the UI. However, I think JavaFX is a horrible framework for creating GUIs – thus I thought I could use a WebView and build my frontend with basic html and javascript. Everything seems to work fine so far (I managed to call my java controllers from the javascript by pressing buttons on the WebView), however, the UI is not updating. To just get things rolling I tried fetching some data in the backend and update a list on the frontend with the received results. The data is being fetched correctly (as they are printed to the console from java code) but the list just doesn’t change.
Any Ideas on what might be missing or if my idea just won’t work out at all?
Also: I am still open for recommendations on other UI frameworks for Java.
Code snippets:
public static void main(String[] args) {
launch(args);
}
@Override
public void start(Stage stage) {
WebView webView = new WebView();
WebEngine webEngine = webView.getEngine();
webEngine.setOnError(event -> LOGGER.warning("[Frontend] An error occured on the frontend: " + event.getMessage()));
File htmlFile = new File(getClass().getResource("/html/index.html").getFile());
webEngine.load(htmlFile.toURI().toString());
webEngine.setJavaScriptEnabled(true);
// Wait until WebView is fully loaded before injecting WeaknessController
webEngine.getLoadWorker().stateProperty().addListener((obs, oldState, newState) -> {
if (newState == javafx.concurrent.Worker.State.SUCCEEDED) {
JSObject window = (JSObject) webEngine.executeScript("window");
window.setMember("fileController", FileController.getInstance());
window.setMember("weaknessController", WeaknessController.getInstance());
window.setMember("vulnerabilityController", VulnerabilityController.getInstance());
window.setMember("fileReader", FileReaderUtility.getInstance());
// TODO: remove later - just for debugging purposes
window.setMember("javaConsole", new JSConsoleBridge());
webEngine.executeScript("""
console.log = function(msg) {
javaConsole.log(msg);
};
console.error = function(msg) {
javaConsole.error(msg);
};
""");
}
});
StackPane root = new StackPane(webView);
Scene scene = new Scene(root, 1500, 900);
stage.setScene(scene);
stage.setTitle("Sage UI");
stage.getIcons().add(new Image(getClass().getResourceAsStream("/logos/taskbar_icon.png")));
stage.show();
}
function processFile() {
let filePath = window.fileReader.getFilePath();
console.log("Processing file called");
if (filePath) {
const result = JSON.parse(window.fileController.process(filePath));
console.log(result)
displayStatistics(result);
} else {
console.log(filePath);
}
}
function displayStatistics(statistics) {
console.log(statistics);
let statisticsList = document.getElementById("statistics");
statisticsList.innerHTML = "";
statistics.forEach(severity => {
let li = document.createElement("li");
li.textContent = `${severity.key} ${severity.value}`
statisticsList.appendChild(li);
});
}
function fetchAllVulnerabilities() {
const vulnerabilities = JSON.parse(window.fileController.fetchAllVulnerabilities());
updateList(vulnerabilities);
}
function updateList(entities) {
console.log(entities);
let entityList = document.getElementById("list");
entityList.innerHTML = "";
entities.forEach(entity => {
let li = document.createElement("li");
li.textContent = `${entity.name}`;
entityList.appendChild(li);
});
}
function fetchWeakness(id) {
let list = document.getElementById("weaknessList");
const weakness = JSON.parse(window.weaknessController.fetchById(id));
// TODO: implement
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>SAGE UI</title>
<link rel="stylesheet" href="../css/style.css">
<script src="../js/script.js" defer></script>
</head>
<body>
<div class="header">
<div class="title-sage">SAGE</div>
<div class="title-page">Dashboard</div>
</div>
<ol id="statistics"></ol>
<button onclick="processFile()">
<img src="../icons/add-document.png"/>
Select File
</button>
<button class="secondary" id="fetchBtn" onclick="fetchWeakness()">Fetch</button>
<button disabled onclick="buttonClicked()">Choose File</button>
<ol id="list">
<li>List Item 1</li>
<li>List Item 2</li>
<li>List Item 3</li>
<li>List Item 4</li>
<li>List Item 5</li>
<li>List Item 7</li>
</ol>
<button class="secondary" id="fetchAllVulnBtn" onClick="fetchAllVulnerabilities()">Vulnerabilities</button>
</body>
</html>
PS: calling processFile() will print “Processing file called” but not the result after const result = JSON.parse(window.fileController.process(filePath)); gets called though.
I have a function that changes the transparency of all meshes (except one specified) in a loaded .glb object using THREE.js; according to the position of the mouse scroll. It all works well except that the shadows the object cast remain visible. So the object fades nicely to invisible and back again, but the shadow it casts on the object underneath remains visible. So it looks a bit odd. Can anyone offer any ideas on this? I’m a bit stumped, as you don’t seem to be able to access the shadow except to make it true or false, and I’m fairly new to THREE.js
function lerp(x, y, a) {
return (1 - a) * x + a * y;
}
function scalePercent(start, end, scrollPosY) {
return (scrollPosY - start) / (end - start);
}
export function lerpChangeAllTransparency(name, el, startPer, endPer) {
return {
frame: name, //Keyfram name that the animation plays in
command: el.command, //Animation type
start: startPer, //Scroll percent animation starts
end: endPer, //Scroll percent the animation stops
target: el.target, //Target to be made transparent/not
alphaFrom: el.alphaFrom, //Start transparentcy
alphaTo: el.alphaTo, //End transparency
//Function called from update when animation is playing
func: (loadedObject, scrollPercent, target, from, to) => {
const percent = scalePercent(startPer, endPer, scrollPercent);
const currentAlpha = lerp(from, to, percent);
const targetArray = target.split(',');
loadedObject.traverse((child) => {
if (child.isMesh && child.material) {
// Skip target items that should remain unaffected
if (targetArray.includes(child.name)) return;
// Clone material only once and enable transparency
if (!child.userData.hasTransparentMaterial) {
const cloned = child.material.clone();
cloned.transparent = true;
child.material = cloned;
child.userData.hasTransparentMaterial = true;
}
// Apply lerped opacity
child.material.opacity = currentAlpha;
}
});
},
};
}
I am trying to generate a area charts using high charts with a 3 simple values in x-axis and y axis. But the x-axis starting point and end points are not extending correctly. It is starting in between and ending in the mid way. I tried updating the startOnTick and endOnTick to true. But still its the same. Attached the chart Json for reference.
Highcharts.chart('container', {
title: {
text: 'High chart generation'
},
chart: {
type: 'area',
height: 233,
width: 678,
borderColor: '#cccccc',
borderWidth: 2,
borderRadius: 5
},
xAxis: {
gridLineColor: 'transparent',
labels: {
style: {
color: 'Arial Black',
font: '9pt Arial'
}
},
categories: ['Feb-2024', 'Feb-2025', 'Feb-2026'],
min: 0,
max: 2,
startOnTick: true,
endOnTick: true
},
credits: {
enabled: false
},
yAxis: {
tickInterval: 1,
plotBands: [{
color: '#FFC1C1',
from: 2,
to: 3
}, {
color: '#EE6363',
from: 3,
to: 4
}],
min: 0,
max: 4,
gridLineColor: 'transparent',
labels: {
style: {
color: 'Arial Black',
font: '9pt Trebuchet MS, Arial Black, sans-serif'
}
},
title: {
enabled: false
},
startOnTick: true,
endOnTick: true
},
plotOptions: {
area: {
stacking: 'normal',
step: 'normal'
},
series: {
fillOpacity: 0
}
},
series: [{
name: '',
marker: {
enabled: false
},
data: [0.5, 0.25, 0.25],
color: '#8B4726',
showInLegend: false,
lineWidth: 3
}],
subtitle: {
text: "<span style='background-color: #ff6666;color:black; border-radius: 2px; padding: 1px 2px;'> abc </span> <span style='background-color: #ce2727;color:black; border-radius: 2px; padding: 1px 2px;'> def </span>",
useHTML: true,
verticalAlign: 'bottom'
}
});<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://code.highcharts.com/highcharts-more.js"></script>
<script src="https://code.highcharts.com/highcharts-3d.js"></script>
<script src="https://code.highcharts.com/modules/stock.js"></script>
<script src="https://code.highcharts.com/maps/modules/map.js"></script>
<script src="https://code.highcharts.com/modules/gantt.js"></script>
<script src="https://code.highcharts.com/dashboards/datagrid.js"></script>
<script src="https://code.highcharts.com/dashboards/dashboards.js"></script>
<script src="https://code.highcharts.com/dashboards/modules/layout.js"></script>
<script src="https://code.highcharts.com/modules/exporting.js"></script>
<script src="https://code.highcharts.com/modules/parallel-coordinates.js"></script>
<script src="https://code.highcharts.com/modules/accessibility.js"></script>
<script src="https://code.highcharts.com/modules/annotations-advanced.js"></script>
<script src="https://code.highcharts.com/modules/data.js"></script>
<script src="https://code.highcharts.com/modules/draggable-points.js"></script>
<script src="https://code.highcharts.com/modules/static-scale.js"></script>
<script src="https://code.highcharts.com/modules/broken-axis.js"></script>
<script src="https://code.highcharts.com/modules/heatmap.js"></script>
<script src="https://code.highcharts.com/modules/tilemap.js"></script>
<script src="https://code.highcharts.com/modules/timeline.js"></script>
<script src="https://code.highcharts.com/modules/treemap.js"></script>
<script src="https://code.highcharts.com/modules/treegraph.js"></script>
<script src="https://code.highcharts.com/modules/item-series.js"></script>
<script src="https://code.highcharts.com/modules/drilldown.js"></script>
<script src="https://code.highcharts.com/modules/histogram-bellcurve.js"></script>
<script src="https://code.highcharts.com/modules/bullet.js"></script>
<script src="https://code.highcharts.com/modules/funnel.js"></script>
<script src="https://code.highcharts.com/modules/funnel3d.js"></script>
<script src="https://code.highcharts.com/modules/pyramid3d.js"></script>
<script src="https://code.highcharts.com/modules/networkgraph.js"></script>
<script src="https://code.highcharts.com/modules/pareto.js"></script>
<script src="https://code.highcharts.com/modules/pattern-fill.js"></script>
<script src="https://code.highcharts.com/modules/price-indicator.js"></script>
<script src="https://code.highcharts.com/modules/sankey.js"></script>
<script src="https://code.highcharts.com/modules/arc-diagram.js"></script>
<script src="https://code.highcharts.com/modules/dependency-wheel.js"></script>
<script src="https://code.highcharts.com/modules/series-label.js"></script>
<script src="https://code.highcharts.com/modules/solid-gauge.js"></script>
<script src="https://code.highcharts.com/modules/sonification.js"></script>
<script src="https://code.highcharts.com/modules/streamgraph.js"></script>
<script src="https://code.highcharts.com/modules/sunburst.js"></script>
<script src="https://code.highcharts.com/modules/variable-pie.js"></script>
<script src="https://code.highcharts.com/modules/variwide.js"></script>
<script src="https://code.highcharts.com/modules/vector.js"></script>
<script src="https://code.highcharts.com/modules/venn.js"></script>
<script src="https://code.highcharts.com/modules/windbarb.js"></script>
<script src="https://code.highcharts.com/modules/wordcloud.js"></script>
<script src="https://code.highcharts.com/modules/xrange.js"></script>
<script src="https://code.highcharts.com/modules/no-data-to-display.js"></script>
<script src="https://code.highcharts.com/modules/drag-panes.js"></script>
<script src="https://code.highcharts.com/modules/debugger.js"></script>
<script src="https://code.highcharts.com/modules/dumbbell.js"></script>
<script src="https://code.highcharts.com/modules/lollipop.js"></script>
<script src="https://code.highcharts.com/modules/cylinder.js"></script>
<script src="https://code.highcharts.com/modules/organization.js"></script>
<script src="https://code.highcharts.com/modules/dotplot.js"></script>
<script src="https://code.highcharts.com/modules/marker-clusters.js"></script>
<script src="https://code.highcharts.com/modules/hollowcandlestick.js"></script>
<script src="https://code.highcharts.com/modules/heikinashi.js"></script>
<script src="https://code.highcharts.com/modules/full-screen.js"></script>
<div id="container"></div>Kindly suggest. Thanks in advance!
I’m facing a persistent deployment issue after refactoring my Cloud Functions from a single large index.js file into an organized folder structure as recommended in the documentation. The deployment consistently fails with a Cannot find module error.
My Setup:
firebase-tools: Latest version
firebase-functions: v4.4.1
node: v20
Project Structure:
backend/
├── functions/
│ ├── src/
│ │ ├── index.js <-- Main entry point
│ │ ├── http/
│ │ │ └── myHttpFunction.js
│ │ └── pubsub/
│ │ └── myPubSubFunction.js
│ └── package.json
└── firebase.json
My package.json (functions/package.json):
{
"name": "functions",
"main": "src/index.js",
"engines": { "node": "20" },
...
}
My firebase.json (backend/firebase.json):
{
"functions": {
"source": "functions"
},
...
}
My index.js (functions/src/index.js):
This file loads and re-exports all functions from their individual files.
const admin = require("firebase-admin");
admin.initializeApp();
exports.myHttpFunction = require('./http/myHttpFunction').myHttpFunction;
exports.myPubSubFunction = require('./pubsub/myPubSubFunction').myPubSubFunction;
// ... and so on for all functions
The Error:
When I run firebase deploy –only functions, the deployment fails for every single function with the error:
Error: Cannot find module './http/myHttpFunction'
Require stack: /workspace/src/index.js
This clearly indicates that the src directory is not being uploaded to the Cloud Functions environment, and the require calls in the cloud-side index.js fail.
Things I Have Tried Without Success:
“files” entry in package.json: Adding “files”: [“src/”] to package.json did not solve the issue.
Changing “main” entry: I’ve confirmed “main” points to src/index.js.
Changing firebase.json: I’ve tried both the object syntax (“functions”: { “source”: “functions” }) and the array syntax (“functions”: [{ “source”: “functions”, … }]), neither worked.
Checking firebase-debug.log: The debug log shows that the CLI packages the project, but it seems to ignore the src subdirectory during the upload.
Permissions: All my user and service account permissions are correct (Owner, Cloud Functions Admin, etc.). This is a file packaging issue, not an IAM issue.
It seems the Firebase CLI’s deployment packaging is not correctly including the src directory when the entry point is nested. Has anyone encountered this specific issue and found a reliable configuration fix? I’m trying to avoid deploying 50+ functions one by one from a single, constantly changing index.js file.
Thank you
If a user opens a page that is not one of the routes/pages, nuxt shows the default page, ‘Page temporarily unavailable’ user has to use the url path and edit the page url manually, back to the home page, this is bad user experience, begs the question, how do i create a custom 404 page in nuxt?
At first I tried creating a page called error.vue, but it instead of rendering a 404 page, it navigates to the actual /error page.
I created a custom sheet in react native by following an online tutorial. Beyond the typical scroll view bottom sheet, I decided to add a header and footer component in the bottom sheet with a scroll view in between. The bottom sheet functions as it should, except for one issue. When dragging to close the bottom sheet, the footer remains fixed on the bottom of the sheet until the header collapses onto it.
The behavior that I was expecting is for the footer component to move in tandem with the rest of the sheet when dragging to close. I tried wrapping my footer component in an animated view or animating the footer itself, but the behaviour does not change.
I have attached my code for the custom sheet for reproducability:
import { forwardRef, useCallback, useImperativeHandle, useState } from "react";
import { Dimensions, View } from "react-native";
import { Gesture, GestureDetector } from "react-native-gesture-handler";
import Animated, {
runOnJS,
useAnimatedScrollHandler,
useAnimatedStyle,
useSharedValue,
withSpring,
withTiming,
} from "react-native-reanimated";
import { useSafeAreaInsets } from "react-native-safe-area-context";
import BackDrop from "../Backdrop/BackDrop";
import { styledContainer, styledContentContainer, styledIndicator, styledIndicatorContainer } from "./styles/BottomSheetStyles";
export const BottomSheet = forwardRef(
(
{
snapTo,
backgroundColor,
backdropColour,
type,
children,
headerComponent,
footerComponent,
...props
},
ref
) => {
const insets = useSafeAreaInsets();
const { height } = Dimensions.get("screen");
const percentage = parseFloat(snapTo) / 100;
const openHeight = height - height * percentage;
const closeHeight = height;
const topAnimation = useSharedValue(closeHeight);
const context = useSharedValue(0);
const scrollBegin = useSharedValue(0);
const scrollY = useSharedValue(0);
const [enabledScroll, setEnableScroll] = useState(true);
const expand = useCallback(() => {
"worklet";
topAnimation.value = withTiming(openHeight);
}, [openHeight, topAnimation]);
const close = useCallback(() => {
"worklet";
topAnimation.value = withTiming(closeHeight);
}, [closeHeight, topAnimation]);
useImperativeHandle(ref, () => ({ expand, close }), [expand, close]);
const animationStyle = useAnimatedStyle(() => {
const top = topAnimation.value;
return { top };
});
const pan = Gesture.Pan()
.onBegin(() => {
context.value = topAnimation.value;
})
.onUpdate((event) => {
if (event.translationY < 0) {
topAnimation.value = withSpring(openHeight, {
damping: 100,
stiffness: 400,
});
} else {
topAnimation.value = withSpring(event.translationY + context.value, {
damping: 100,
stiffness: 400,
});
}
})
.onEnd(() => {
if (topAnimation.value > openHeight + 50) {
topAnimation.value = withSpring(closeHeight, {
damping: 100,
stiffness: 400,
});
} else {
topAnimation.value = withSpring(openHeight, {
damping: 100,
stiffness: 400,
});
}
});
const onScroll = useAnimatedScrollHandler({
onBeginDrag: (event) => {
scrollBegin.value = event.contentOffset.y;
},
onScroll: (event) => {
scrollY.value = event.contentOffset.y;
},
});
const panScroll = Gesture.Pan()
.onBegin(() => {
context.value = topAnimation.value;
})
.onUpdate((event) => {
if (event.translationY < 0) {
runOnJS(setEnableScroll)(true);
topAnimation.value = withSpring(openHeight, {
damping: 100,
stiffness: 400,
});
} else if (event.translationY > 0 && scrollY.value === 0) {
runOnJS(setEnableScroll)(false);
topAnimation.value = withSpring(
Math.max(
context.value + event.translationY - scrollBegin.value,
openHeight
),
{
damping: 100,
stiffness: 400,
}
);
}
})
.onEnd(() => {
runOnJS(setEnableScroll)(true);
if (topAnimation.value > openHeight + 50) {
topAnimation.value = withSpring(closeHeight, {
damping: 100,
stiffness: 400,
});
} else {
topAnimation.value = withSpring(openHeight, {
damping: 100,
stiffness: 400,
});
}
});
const scrollViewGesture = Gesture.Native();
return (
<>
<BackDrop
topAnimation={topAnimation}
closeHeight={closeHeight}
openHeight={openHeight}
close={close}
backdropColour={backdropColour}
/>
<GestureDetector gesture={pan}>
<Animated.View
style={[
styledContainer,
animationStyle,
{
backgroundColor: backgroundColor,
paddingBottom: insets.bottom,
},
]}
>
<View style={styledIndicatorContainer}>
<View style={styledIndicator} />
</View>
<View style={styledContentContainer}>
<View>{headerComponent}</View>
{type === "scroll" ? (
<GestureDetector
gesture={Gesture.Simultaneous(panScroll, scrollViewGesture)}
>
<Animated.ScrollView
{...props}
bounces={false}
scrollEventThrottle={16}
onScroll={onScroll}
scrollEnabled={enabledScroll}
>
{children}
</Animated.ScrollView>
</GestureDetector>
) : (
children
)}
<View>{footerComponent}</View>
</View>
</Animated.View>
</GestureDetector>
</>
);
}
);
I have a Blazor Server app that needs to know the local time zone for its work (it’s a scheduling app that uses the DxScheduler). The strategy is to obtain the local time offset from the user’s browser, using the JavaScript new Date() object and sending the offset back to C# code for manipulation.
Through extensive testing, I’ve verified that the C# transformations work as expected. However, the JavaScript call is returning the server’s time zone offset, not the client’s. I’ve verified this by changing the time zone of the server and observing that the output of the code changes predictably in relation to the change in server time zone.
My hypothesis is that the JavaScript is being sandboxed by the Blazor environment, much as I understand Node.js does, which begs the question of how one unsandboxes the JS code.
Here is the JavaScript code, which resides in its own .js file in the /wwwroot folder:
function getTimeZoneOffset() {
var dateString = new Date();
var offset = dateString.getTimezoneOffset();
return offset;
}
Here is the C# code that consumes that script, currently residing in App.razor:
public async Task<string> CAllJS()
{
var offset = await JSRuntime.InvokeAsync<string>("getTimeZoneOffset");
return offset;
}
public async Task<TimeZoneInfo> GetUserTimeZone()
{
string jsNumberOfMinutesOffset = await CAllJS(); // sending the above offset
var timeZones = TimeZoneInfo.GetSystemTimeZones();
var numberOfMinutes = Int32.Parse(jsNumberOfMinutesOffset) * (-1);
var timeSpan = TimeSpan.FromMinutes(numberOfMinutes);
var userTimeZone = timeZones.Where(tz => tz.BaseUtcOffset == timeSpan).FirstOrDefault() ?? timeZones.First();
return userTimeZone;
}
This is about as much separation as I can think of – the caller of GetUserTImeZone() assigns the return value to a static property of a static class, so it can be accessed anywhere it’s needed. Yet, I’m still getting the server’s time zone offset.
Thoughts?
I am using array_udiff function on Multi-dimensional Arrays:
$old_list = Array ( [0] => Array ( [name] => John [src] => S ) [1] => Array ( [name] => Mary [src] => S ) )
$new_list = Array ( [0] => Array ( [name] =>John [src] => S ) [1] => Array ( [name] => Mary [src] => S ) [2] => Array ( [name] => Peter [src] => S ))
$differences = array_udiff($new_list, $old_list, function($a, $b) {
return strcmp($a["name"], $b["name"]);
});
print_r($differences);
The result is
Array ( [2] => Array ( [name] => Peter [src] => S ) )
How can I get the values Peter & S (name and src) from the variable $differences?
I’m working on a WordPress site and I want to hide the /wp-admin URL from users, especially when they try to access something like:
https://example.com/wp-admin/edit.php or https://example.com/wp-admin/edit.php?post_type=page
My Goal:
When someone types or clicks a link to /wp-admin/…, they should be redirected or see a custom-looking URL, like:
https://example.com/custom-admin/edit.php or https://example.com/custom-admin/edit.php?post_type=page
I know that WordPress core uses /wp-admin as the fixed admin area, Is it possible or not.
Bonus if it can be done only for specific roles like Editors.
Question:
Is there any safe and WordPress-compatible method to visually change or redirect /wp-admin URLs?
Can I set up a role-specific dashboard without completely removing access to core admin?
Finally, In WordPress, I want the /wp-admin URL to function normally, but in the browser address bar, I want to show a different custom path (like /custom-admin) instead of showing /wp-admin.
Thanks in advance!