I found a java script url file that contains the function cameraOffset and increasecameraOffset and i dont know what they are and what they are used for
are they used to turn webcam on ??
or they are not related to webcam
please tell me
Thanks
If you want the url to check it i will put it
Category: javascript
Category Added in a WPeMatico Campaign
JavaScript Webstite Logging : Logging on Kibana,eslastic,splunk or Server Side
How do we log JavaScript based website code, what are the best practices and solution.
Currently we do not have any logging in Javascript code, we started with small but now it has become humongous and very difficult to debug.
Since, it is not best to use console.log developers avoided to use but now it is next to impossible to track what is happening in the code since that code has several sdk calls and different modules within Javascript.
I have spent time to search on this but looking for more insights on what can we use, my findings are on the below lines
- console.log them and send to Kibana,Elastic,Splunk or a VSI and dump log file there.
- Elegant way to do the above approach
- Use some 3rd party logging framework who can handle this efficiently and elegantly
NOTE: The site is already developed and it would be tough to go to each of the function and add console.log, also want to persist the logs in server or splunk etc
Object passed changes every render
I am trying to define a global state provider for an app I am building with react. But I keep getting the error
The object passed as the value prop to the Context provider (at line 19) changes every render. To fix this consider wrapping it in a useMemo hook
Here is my file structure. state.ts
export default interface State {
data: boolean
}
export const initialState: State = {
data: false,
}
action.ts
type Action = {
type: "SET_DATA"
value: boolean
}
export default Action
context.ts
import { Context, createContext, Dispatch } from "react"
import Action from "./actions"
import State, { initialState } from "./state"
const GlobalContext: Context<{
globalState: State
dispatch: Dispatch<Action>
// eslint-disable-next-line @typescript-eslint/no-unused-vars
}> = createContext({ globalState: initialState, dispatch: (_: Action) => {} })
export default GlobalContext
provider.tsx
import * as React from "react"
import { ReactNode, ReactElement, useReducer } from "react"
import GlobalContext from "./context"
import Reducer from "./reducer"
import State, { initialState as defaultInitialState } from "./state"
export default function GlobalStateProvider({
children,
initialState = defaultInitialState,
}: {
children: ReactNode
initialState?: State
}): ReactElement {
const [globalState, dispatch] = useReducer(Reducer, initialState)
return (
<GlobalContext.Provider value={{ dispatch, globalState }}>
{children}
</GlobalContext.Provider>
)
}
GlobalStateProvider.defaultProps = {
initialState: defaultInitialState,
}
I have gone through the code multiple times and I cannot seem to figure out what is wrong and why I am getting this error.
If someone can further explain why this is happening and perhaps and solution that would be helpful.
Unpacking object to display it’s content with innerHTML
On this page you can order tickets by clicking on the list items.
Clicked items get grouped and then put in an empty container
on the page. I added a sample view to clarify what the result should
be.
At this point I am stuck. I’m able to insert objects, but I don’t know
how to unpack whats inside the object. That should be the tickets
one clicked. Hopefully someone here can point me in the right
direction to solve this.
<!DOCTYPE html>
<html>
<head>
<meta charset='utf-8'>
<title>Page Title</title>
<style>
/* Styling bullets list items */
li {
list-style: none;
}
li:before {
content: "1F3B8";
margin-right: 10px;
}
/* Styling for tickets ordered */
#order {
background-color: #b0c4de;
font-size: 120%;
}
.sample {
background-color: #b0c4de;
font-size: 120%;
}
</style>
</head>
<body>
<p>Here you'll find the prices for the tickets:</p>
<ul>
<li onclick="push(tckt1)">Saturday: €110</li>
<li onclick="push(tckt2)">Sunday: €110</li>
<li onclick="push(tckt3)">Monday: €110</li>
<li onclick="push(tckt4)">Weekend: €230</li>
</ul>
<div id="order">
</div>
<br>
// This is a sample of how the output should look.
<div class="sample">
Your order:<br>
3 Weekend-tickets à €230 = € 690<br>
1 Sunday-tickets à €110 = € 110<br>
Totaalbedrag: €800 - 10% korting à €80 = €720
</div>
<script>
const order = document.getElementById("order")
let tickets = [];
const tckt1 = {id: 1, name: "Saturday-tickets à €110", price: 110};
const tckt2 = {id: 2, name: "Sunday-tickets à €110", price: 110};
const tckt3 = {id: 3, name: "Monday-tickets à €110", price: 110};
const tckt4 = {id: 4, name: "Weekend-tickets à €230", price: 230};
// Push object in array tickets
function push(temp){
tickets.push(temp);
let res = tickets.reduce(function (x,cur){
let item = cur.id + cur.name + cur.price
if (!x[item]) x[item] = 0;
x[item] = x[item] + 1
return x
}, {})
let results = []
for (const key in res) {
const count = res[key];
const id = key.slice(0, 1)
const day = key.slice(1, 24)
const price = key.slice(24)
results.push({
id: id,
name: day,
price: price,
count: count
})
}
console.log(results)
order.innerHTML+=results[0];
}
</script>
</body>
</html>
SCSS if with v-bind in Vue 3
Is it possible to write if conditions in SCSS with v-bind in Vue 3?
<script setup lang="ts"
interface Props {
hoverEnabled: boolean;
}
const { hoverEnabled = false } = defineProps<Props>();
</script>
<div class="layout-block">
<slot />
</div>
<style lang="scss" scoped>
.layout-block {
background-color: red;
transition: background-color 0.2s ease-in-out;
//@if v-bind(hoverEnabled) == "true" - as i know v-bind returns string so tried this too
@if v-bind(hoverEnabled) {
&:hover {
background-color: blue;
}
}
}
</style>
I know i can do this with class, but I’m curios if this is possible and how it’s done
Get value from push key generated
I want to get points of respectived logged in user to be displayed from database corresponding to its push key i tried many ways but i just couldn’t make it possible here is my code
const autoid=firebase.database().ref("user").push().key;
firebase.database().ref("/").child(autoid).set({
email :email,
password : password,
points :"500",
Id:autoid
})
And below is my firebase realtime database picture
Realtime database
Making cursor skip disabled textform
Im making a site, with a lot of user registration, needed in practice, where the least amount of clicks is needed. Im making text input fields, which only need 1 charachter, before jumping to the next registration. However, these text input fields needs to be able to disable. This have I solved by using checked boxes and a function. My problem now comes, when needing to skip disabled text input fields: Lets say text input 2 is disabled, the cursor needs to jump from text input 1 to text input 3.
<form >
<input type="text" id="yourText1" enabled maxlength="1" onkeyup="jump(this,'yourText2')"/>
<input type="checkbox" id="yourBox1" checked onmousedown="this.form.yourText1.disabled=this.checked"/>
</form>
<form >
<input type="text" id="yourText2" enabled maxlength="1" onkeyup="jump(this,'yourText3')"/>
<input type="checkbox" id="yourBox2" checked onmousedown="this.form.yourText2.disabled=this.checked"/>
</form>
<form >
<input type="text" id="yourText3" enabled maxlength="1" onkeyup="jump(this,'yourText4')"/>
<input type="checkbox" id="yourBox3" checked onmousedown="this.form.yourText3.disabled=this.checked"/>
</form>
<form >
<input type="text" id="yourText4" enabled maxlength="1" onkeyup="jump(this,'yourText1')"/>
<input type="checkbox" id="yourBox4" checked onmousedown="this.form.yourText4.disabled=this.checked"/>
</form>
<script>
function jump(field, automove) {
if (field.value.length >= field.maxLength)
{document.getElementById(automove).focus();}
}
</script>Cookie not expiring in JS after setting date to 1970
I am trying to delete some cookies BEFORE MY REQUEST IS SENT to my backend so I set expiration date for those cookies to be Thu, 01 Jan 1970 00:00:00 UTC, expecting for my backend service to not see any of those cookies when handling the request.
The process to delete cookies, as far as I know, is to set the expiration date of the cookies to be a past date (As I am doing) but for some reason cookies seem to be still alive.
This is what I currently have:
let badCookies = ['cookieName1', 'cookieName2', 'cookieName3'];
badCookies.forEach((cookieName) => {
document.cookie = `${cookieName}=; expires=Thu, 01 Jan 1970 00:00:00 UTC; path=/;`;
});
if(GetCookie('cookieName1') === null) {
// Must fall here since cookieName1 has been forced to expire
} else {
// ERROR: cookie still alive, I am actually falling here that's the main issue
}
I don’t really know what can be wrong, a simple process keeps causing problems and I cannot find any solution for this. I have searched in several websites but the answer for delete the cookies are always the same, setting the expiration date to force cookie to be deleted before making a request.
The process is described here:
and also here:
https://www.w3schools.com/js/js_cookies.asp
I have tried both strings without success.
I am using this to check for cookie to see if it is still valid:
Check if cookie is still valid
Sorry if this question seems like duplicate but none of the answers in similar stack overflow posts could help me that’s why I decided to post my own question.
Thanks in advance.
Practical example where micro task queue is useful in Event Loop
I learn that there are three queue in Event Loop.
- macrotaskqueue
- related with setTimeout, setInterval, event(user gesture) task, event handler, network response etc..
- microtaskqueue
- related with MutationObserver, Object.observe, Promise
- have higher priority than mactotask queue
- main thread work on this queue until it is empty
- rendering will be delayed until this queue is empty
- a task inserted into microtaskqueue in processing microtask will be executed at that iteration ( = microtaskqueue should be empty before going next iteration or rendering)
- animationframequeue
- callback function of requestAnimationFrame() is inserted in this queue
- a task inserted into animationframequeue will be executed at next iteraction(unlike microtaskqueue)
- tasks in this queue will be processed right before rendering
Yes,, But What I want to know is that
- Is microtaskqueue really needed?
- What is practical(useful) example of using microtaskqueue?
- Why the computer guys made this queue? what’s the motivation?
Check please, I need your helps
Eval command works properly, but when it errors it doesn’t use `catch {`
I use eval for some testing outside of the code or console. However, it doesn’t tell me if it errored or the result with the error. It just shows the error in the console, without telling me. As a result, whenever the bot doesn’t respond to my eval, I have to go all the way to the coding place and restart it to have the bot online again.
I’ve tried to modify the catch script, like removing (err) in catch (err).
Here’s my code:
const args = message.content.split(" ").slice(1);
if (message.content.startsWith(`${p}eval`)) {
if (message.author.id !== "821682594830614578") {
message.channel.send(`Eval command can't be used by users, since the command can do anything, even deleting the files of code from a bot.`)
} else {
try {
const evaled = eval(args.join(" "));
let cleaned = await clean(client, evaled);
const embedEval = new MessageEmbed()
.setTitle('Eval succeeded')
.setColor('#00ff8f')
.addField('Result:', ````jsn${cleaned}n````, false)
.setTimestamp()
.setFooter({ text: 'Eval has been succeded.' })
message.channel.send({ embeds: [embedEval] });
} catch {
message.channel.send(``ERROR` ```xln${cleaned}n````);
}
}
}
Fill upload field on submit action and save
I have an HTML form with an upload field that should be filled programmatically with JavaScript. I have written a function that works as desired, when I use this for test:
this.on('click', 'h2', this.fillField);
The field is filled upon the click on the header and upon manual clicking on submit button, everything is saved.
Then, I have only changed the trigger for the function
this.on('submit', 'form', this.fillField);
Upon clicking on submit, I can see how the field is filled, no errors in the console, the form is submitted, but the field is not saved. Just empty.
Why?
Age Verification Popup Show Only Once BY Account instead of by Cookie Memory
Greeting,
I am doing an age verification popup targeted only to the landing page of login.
The show-only-once function was set but only for cookie memory of the browser. That is- if I login to the same account in other device or incognito/ inPrivate, it will show up anyway, and vise versa.
Here are the script code for the age verification. Not sure if there is options for account-based show-only-once.
jQuery(document).ready(function($){
if (sessionStorage.getItem('advertOnce') !== 'true') {
//sessionStorage.setItem('advertOnce','true');
$('.box').show();
}else{
$('.box').hide();
}
$('#refresh-page').on('click',function(){
$('.box').hide();
sessionStorage.setItem('advertOnce','true');
});
$('#reset-session').on('click',function(){
$('.box').show();
sessionStorage.setItem('advertOnce','');
});
if (sessionStorage.getItem('advertOnce') !== 'true') {
//sessionStorage.setItem('advertOnce','true');
$('.overlay-verify ').show();
}else{
$('.overlay-verify ').hide();
}
$('#refresh-page').on('click',function(){
$('.overlay-verify ').hide();
sessionStorage.setItem('advertOnce','true');
});
$('#reset-session').on('click',function(){
$('.overlay-verify ').show();
sessionStorage.setItem('advertOnce','');
});
});
Many thanks
how can i get connection from edge of circle insted of center of circle in d3.js force layout
Here im added the link from circle center to circle center but i want to connect from circle edge to edge
I want to connect the links from node edge to edge but im getting node center to center
is i did mistake in my code please help me out if any one know answer for this problem
here is my full working code
const VocabularyGraphh = () => {
const svgRef = useRef(null);
React.useEffect(() => {
const svg = d3.select(svgRef.current),
diameter = +svg.attr("width"),
g = svg.append("g").attr("transform", "translate(2,2)"),
format = d3.format(",d");
const links = [
{ source: "animate1", target: "animate4" },
{ source: "animate6", target: "animate9" },
// { source: "animate9", target: "animate6" },
{ source: "animate3", target: "animate2" },
{ source: "animate1", target: "animate8" },
{ source: "animate3", target: "animate5" },
// { source: "analytics1", target: "analytics2" },
];
let root = {
children: [
{
name: "analytics1",
children: [
{
name: "animate1",
size: 1500,
},
{
name: "animate2",
size: 1500,
},
{
name: "animate3",
size: 1500,
},
{
name: "animate33",
size: 1500,
},
{
name: "animate23",
size: 1500,
},
{
name: "animate32",
size: 1500,
},
{
name: "animate11",
size: 1500,
},
{
name: "animate22",
size: 1500,
},
{
name: "animate34",
size: 1500,
},
{
name: "animate16",
size: 1500,
},
{
name: "animate20",
size: 1500,
},
{
name: "animate3",
size: 1500,
},
],
},
{
name: "analytics2",
children: [
{
name: "animate4",
size: 1500,
},
{
name: "animate5",
size: 1500,
},
{
name: "animate6",
size: 1500,
},
],
},
{
name: "analytics3",
children: [
{
name: "animate7",
size: 1500,
},
{
name: "animate8",
size: 1500,
},
{
name: "animate9",
size: 1500,
},
],
},
],
};
// svg
// .append("svg:defs")
// .append("svg:marker")
// .attr("id", "arrow")
// .attr("viewBox", "0 0 10 10")
// .attr("refX", 10)
// .attr("refY", 5)
// .attr("markerUnits", "strokeWidth")
// .attr("markerWidth", 6)
// .attr("markerHeight", 3)
// .attr("orient", "auto")
// .append("svg:path")
// .style("stroke", "none")
// .attr("d", "M 0 0 L 10 5 L 0 10 z");
const pack = d3
.pack()
.size([diameter / 2, diameter / 2])
.padding(100);
root = d3
.hierarchy(root)
.sum(function (d) {
return d.size;
})
.sort(function (a, b) {
return b.value - a.value;
});
const node = g
.selectAll(".node")
.data(pack(root).descendants())
.enter()
.filter(function (d) {
return !!d.data.name;
})
.append("g")
.attr("id", function (d) {
return d.data.name;
})
.attr("class", function (d) {
return d.children ? "node" : "leaf node";
})
.attr("transform", function (d) {
return "translate(" + d.x + "," + d.y + ")";
});
node.append("title").text(function (d) {
return d.data.name + "n" + format(d.value);
});
const arrow = svg.selectAll("path.arrow").data(links, JSON.stringify);
arrow
.enter()
.append("path")
.attr("class", "arrow")
.attr("x1", function (d) {
console.log(d);
let translate = getTranslate(d.source);
console.log(translate);
return translate[0];
})
.attr("x2", function (d) {
let translate = getTranslate(d.target);
return translate[0];
})
.attr("y1", function (d) {
let translate = getTranslate(d.source);
return translate[1];
})
.attr("y2", function (d) {
let translate = getTranslate(d.target);
return translate[1];
})
.attr("d", function (d) {
// console.log(d);
let source = getTranslate(d.source),
target = getTranslate(d.target),
x1 = source[0],
x2 = target[0],
y1 = source[1],
y2 = target[1];
console.log(source);
console.log(target);
// let dx = x1 - x2,
// dy = y1 - y2,
// dr = Math.sqrt(dx * dx + dy * dy);
return (
"M" + x1 + "," + y1 + "A" + 0 + "," + 0 + " 0 0,1 " + x2 + "," + y2
);
})
.style("stroke", "black")
.style("fill", "none")
.style("stroke-width", 1)
.attr("marker-end", "url(#arrow)")
.attr("class", "hidden-arrow ");
// .attr("stroke-width", 1);
node
.append("circle")
.attr("r", function (d) {
console.log(d);
return d.r;
})
.attr("class", "pink");
node.filter(function (d) {
return !d.children;
});
// .append("text")
// .attr("dy", "0.3em")
// .text(function (d) {
// return d.data.name.substring(0, d.r / 3);
// });
function getTranslate(datum) {
const circle = d3.select("#" + datum);
const string = circle.attr("transform");
const translate = string
.substring(string.indexOf("(") + 1, string.indexOf(")"))
.split(",");
return translate;
}
}, []);
return (
<div>
<svg ref={svgRef} width="960" height="960"></svg>
</div>
);
};
export default VocabularyGraphh;
if anyone give this solution thats so appreciatable
Google map api. search nearby not getting respond back seem link axios getting skip
Hello guys I am working on google map api to search all the gym near by me using Vue Js and laravel. The problem is I am not getting an error back and also not getting an respond back here is my code.
<template>
<div class="container mb-5">
<div class="row justify-content-center">
<div class="col-md-12 text-center">
<h1 class="">Find</h1>
</div>
<div class="row mt-5">
<form>
<div class="form-group">
<label>Email address</label>
<input
type="text"
class="form-control"
placeholder="Address"
v-model="coordinates"
/>
<a @click="locatorButtonPressed"> get location</a>
</div>
<select class="form-control" v-model="type">
<option value="gym">gym</option>
</select>
<select
class="form-control"
v-model="radius"
aria-placeholder="Distance"
>
<option value="10">10 KM</option>
<option value="50">50 KM</option>
<option value="100">100 KM</option>
<option value="200">200 KM</option>
</select>
<button class="ui button" @click="findCloseBuyButtonPressed()">
Find Gym
</button>
</form>
</div>
</div>
</div>
</template>
<script>
import axios from "axios";
export default {
name: "App",
data() {
return {
lat: 0,
lng: 0,
type: "",
radius: "",
places: [],
};
},
computed: {
coordinates() {
return `${this.lat}, ${this.lng}`;
},
},
methods: {
locatorButtonPressed() {
navigator.geolocation.getCurrentPosition(
(position) => {
this.lat = position.coords.latitude;
this.lng = position.coords.longitude;
},
(error) => {
console.log("Error getting location");
}
);
},
findCloseBuyButtonPressed() {
var axios = require('axios');
var config = {
method: 'get',
url: `https://maps.googleapis.com/maps/api/place/nearbysearch/json?location=${
this.lat
},${this.lng}&type=${this.type}&radius=${
this.radius * 1000
}&key={my-api-key}`,
headers: { }
};
alert(config.url)
axios(config)
.then(function (response) {
console.log(JSON.stringify(response.data ));
})
.catch(function (error) {
console.log(error);
});
alert("hello")
},
}
};
</script>
<style>
</style>
I have try to debug this code by putting alert() it pop us both but it seems that it skipped this part because there is not respond or error in console
axios(config)
.then(function (response) {
console.log(JSON.stringify(response.data ));
})
.catch(function (error) {
console.log(error);
});
So I try changed alert to console.log() this time it just refresh a page and return noting in a console.
I have try my google map api key with example from document on website it still work fine.
How do I let the browser allow me to use imports? (TypeScript)
Context
I have these two TypeScript files:
// something.ts
let x = 3;
export default x;
// index.ts
import x from "./something";
console.log(x);
under these tsconfig.json settings:
{
...
"target": "es2016",
...
// "module": "commonjs" /* <- commented out */
}
when I compile this into JavaScript, I get these two files (which is what I expect):
// something.js
let x = 3;
export default x;
// index.js
import x from "./something";
console.log(x);
Now, I’ve linked the index.js file from my HTML file like so:
<script src="./dist/index.js"></script>
Problem
When I try opening this up using Live Server, I get this error in the console:
Uncaught SyntaxError: Cannot use import statement outside a module
So, how do I fix this?
What I’ve tried
- Adding back the
"module": "commonjs"line in mytsconfig.jsonfile
This results in a different error message appearing in the console:
Uncaught ReferenceError: exports is not defined
As per this SO post, a suggested solution is to comment out the "module": "commonjs" line, which essentially throws my situation into an infinite loop…
- Adding
"type": "module"to the<script>tag andpackage.json
From this SO post, a suggested solution is to add "type": "module" to the <script> tag:
<script type="module" src="./dist/index.js"></script>
but now I get this error message:
GET http://127.0.0.1:5501/dist/something net::ERR_ABORTED 404 (Not Found).
In the same post, another suggestion was to add “type”: “module” to the package.json file:
{
"type": "module",
"dependencies": {
"typescript": "^4.6.2"
}
}
and from what I’ve observed, this doesn’t really do anything.