Blancer.com Tutorials and projects
Freelance Projects, Design and Programming Tutorials
Category Added in a WPeMatico Campaign
I have a string value e.g.:
var keyword_custType = '[Private customer|PRIVATE, Corporate customer|COMPANY, Sole trader|SOLETRADER, Corporate Group|CORPGROUP]';
I would like to create a javascript object from it (array). I tried:
var obj = JSON.parse(keyword_custType);
But then I get an error: Uncaught SyntaxError: Unexpected token P in JSON at position 1 at JSON.parse ().
What should I do to create a js array from the string?
I have the following code that builds buttons in a Workspace Add-On.
function createCard(text) {
var buttonSet = CardService.newButtonSet()
.addButton(createButton('doStuff','Do Stuff'));
var section = CardService.newCardSection()
.addWidget(buttonSet);
var card = CardService.newCardBuilder()
.addSection(section);
return card.build();
}
function createButton(functionName, text) {
var action = CardService.newAction()
.setFunctionName(functionName);
var button = CardService.newTextButton()
.setText(text)
.setOnClickAction(action)
.setTextButtonStyle(CardService.TextButtonStyle.FILLED);
return button;
}
function doStuff() {
// Heavy work on Google Doc
}
The doStuff() function I previously made in Apps Script takes normally 5 minutes to run, and fits in the Google Apps Script quota, but when I copied it into the Workspace Add-On it gives Error with the add-on. Run time error. Exceeded maximum execution time, so it needs to fit into the Card Service quota (45 seconds).
I noticed that, in the standalone Script, the execution log differs from an add-on trigger or an “Unknown” trigger (when I run it normally).
How can I call the "doStuff()" function as “Unknown” so it uses the 6 minutes script runtime quota?
There is a problem with deleting several string parameters. Only the last parameter is being deleted now.
this code does not work correctly:
const updateFiltersSearchParams = (paramKey, newValue) => {
const isParamExist = searchParams.getAll(paramKey).includes(newValue);
if (!isParamExist) {
searchParams.append(paramKey, newValue);
setSearchParams(searchParams);
} else {
const updatedSearchParams = new URLSearchParams(
[...searchParams].filter(
([key, value]) => key !== paramKey || value !== newValue
)
);
setSearchParams(updatedSearchParams);
}
};
const handleDeleteParams = () => {
[...checkboxParams].forEach((param) => {
updateFiltersSearchParams("selected", param);
});
};
I have two contracts ERC20, and ERC721.
and everytime erc721 transferFrom function is called, I want to send some erc20 tokens to the creator (minter) of the ERC721.
After some research, I’ve found that I have to do two things.
it seems like the second is giving me some problems. Please see my code below:
Your help will be very much appreciated.
++ I am also not so sure if I am calling ERC20.transferFrom correctly from ERC721 contract. Is this the correct way to do it?
ERC721 contract:
import "../openzeppelin-contracts/contracts/token/ERC721/IERC721.sol";
import "../openzeppelin-contracts/contracts/token/ERC721/ERC721.sol";
import "../openzeppelin-contracts/contracts/token/ERC721/IERC721Receiver.sol";
import "../openzeppelin-contracts/contracts/math/SafeMath.sol";
import "../openzeppelin-contracts/contracts/utils/Address.sol";
import "../openzeppelin-contracts/contracts/utils/Counters.sol";
import "./ERC20Token.sol";
contract NFTtoken is ERC721 {
.
.
.
ERC20Token Erc20Contract;
constructor(address tokenAddress) ERC721("NC NFT example", "NCNFT") {
owner = msg.sender;
decimals = 0;
Erc20Contract = ERC20Token(tokenAddress);
}
function mint(string calldata nftName) external payable {
uint256 newItemId = _tokenIds.current();
_mint(msg.sender, newItemId);
nftInfo[msg.sender].name = nftName;
nftInfo[msg.sender].creator = msg.sender;
allValidTokenIndex[newItemId] = allValidTokenIds.length;
allValidTokenIds.push(newItemId);
_tokenIds.increment();
}
function transferNFT(address from, address to, uint256 tokenId) public returns (bool){
transferFrom(from, to, tokenId);
Erc20Contract.transferFrom(to, nftInfo[from].creator, 10);
}
}
.
.
.
app.js
transferNFT: function() {
NFTContract.deployed().then(function(contractInstance) {
let toAddress = $("#to-address").val();
// function transferFrom(address _from, address _to, uint256 _tokenId) public payable {
let NFTid_temp = $("#nft-id").val();
let NFTid = NFTid_temp.substring(7);
console.log("to = " + toAddress);
console.log("nftid = " + NFTid);
Voting.deployed().then(function(votingcontractInstance) { votingcontractInstance.approve(contractInstance.address, votingcontractInstance.balanceOf(web3.eth.accounts[1]))});
contractInstance.transferNFT(web3.currentProvider.selectedAddress, toAddress, NFTid, {gas: 140000, from: web3.eth.accounts[0]});
})
}
error message
app.js:10169 Uncaught (in promise) BigNumber Error: new BigNumber() not a number: [object Object]
at raise (http://localhost:8080/app.js:10169:25)
at http://localhost:8080/app.js:10157:33
at new BigNumber (http://localhost:8080/app.js:9184:67)
at new BigNumber (http://localhost:8080/app.js:9194:25)
at toBigNumber (http://localhost:8080/app.js:2084:12)
at Object.toTwosComplement (http://localhost:8080/app.js:2095:21)
at SolidityTypeAddress.formatInputInt [as _inputFormatter] (http://localhost:8080/app.js:2995:38)
at SolidityTypeAddress.SolidityType.encode (http://localhost:8080/app.js:3648:17)
at http://localhost:8080/app.js:15577:29
at Array.map (<anonymous>)
I try to download a file using nodejs and Javascript.
When I call the URL in the Browser, the file gets downloaded.
When I call this Endpoint in my javascript file using fetch, the download doesn’t work
NodeJS Endpoint
app.get("/download", function (req, res, next) {
res.download(
filepath
);
});
Javascript Call
const downloadFile = async (path) => {
await fetch("http://localhost:8080/download", {
method: "Get",
})
.then((response) => {
console.log(response);
})
.catch((error) => {
console.log(error);
});
};
Do you have any suggestions?
Thank you very much!
I’m building a ballot app and I want to dynamically generate a radio group based on a list of candidates in an object. The object looks like this.
{
"districtAttorney": [{
"name": "Candidate1",
"politics": "Dem-District 21",
"img": "./Candidates/uncleruckus.jpg"
},
{
"name": "Candidate2",
"politics": "Dem-District 21",
"img": "./Candidates/uncleruckus.jpg"
}
]
}
I want to generate a radio group that looks like this
<div onChange={this.onChangeValue}>
<input type="radio" value="Candidate1" name="gender" /> Male
<input type="radio" value="Candidate2" name="gender" /> Female
<input type="radio" value="Candidate3" name="gender" /> Other
</div>
How would I go about this? Thanks in advance.
How to achieve a consistent version and Git Workflow when working in multiple languages.
I currently have 20 open source ruby GEM’s KlueLess that I regularly work on.
I’m moving into Javascript Apps, mostly Nuxt/Vue3, but also some packages.
I can see my self also writing a few Python Spiders.
I’m a single developer, and my scenario does not include team members, but of course that should be supported.
In the past I have used Git Flow and most of my pushes are done via hotfixes and I have a hooks/update-version file which takes care of updating my Ruby GEM version numbers whenever a new GEM is released.
My current solution is very efficient for the ruby GEMs, I just do hf 'some message' and a new Hot Fix is created, merged into master, pushed and the patch number is automatically updated both as a git tag and as VERSION constant that shows up in the gemspec
I don’t tend to do PR’s on my own GEMs, I just hotfix straight into master and that works well for me.
I want to keep a simple branching strategy and also use SemVer (Major, Minor & Patch) across Ruby, Javascript, Python while having very simple tooling.
I find that git flow has too many features that I don’t use, and so I am looking at github flow, but the issue around updating package.json versions, gemspec versions and other languages is still in question for me.
I guess I can write my own /hooks template and have a template per scenario (aka language). But I thought there might be an existing tool that is well suited to my use case.
I’ve had a look at GitVersion which seems to be well featured for SemVer but seams aimed at dotnet code bases.
Would anyone know a solution that performs the following:
I have an HTML page that I have to print as PDF and attach it to email.
When I click the print button it should create a PDF and attaches that to the email.
Any javascript solutions?
i made this with html,css,js,jq
So here is my scene:
I am getting data from api and api tells me how much office, truck (plate license) and user i have
I have to make a line between the user and it’s office with canvas
And then with the animation i have to move the plate license between the office and user.
How can i make the line between the user and office? I set the body tag position:relative; and canvas and images are position:absolute; so i get the coordinate of office and user and i give the coordinate to canvas to make line
Here is my code:
css:
#companies {
}
.customer {
margin: 0 0 1px 1px;
flex: 1;
width: 50px;
border-radius: 50%;
}
.col-6 {
margin: 0;
padding: 0;
}
img {
width: 100px;
margin: auto;
text-align: center;
}
.customer img {
width: 100%;
}
.company img {
text-align: center;
justify-content: center;
display: flex;
}
canvas {
position: absolute;
top: 0;
left: 0;
z-index: 3000;
width: 500px;
height: 500px;
}
body{
position:relative;
}
html:
<div class="container-fluid">
<div class="row">
<div class="col-6">
<div style="box-shadow: 0 0 9px 2px #eee;height: 100vh;width: 100%;border: none" class="card p-3">
<p class="text-center pt-3" style="font-family: 'IRANSansWeb(FaNum) UltraLight';font-size: 25px">مشاهده
بار های ارسالی</p>
<div id="companies" style="display: flex;padding: 100px 20px 0 20px">
</div>
<div id="trucks">
<img id="truck1" src="img/plate.png" width="100" style="position:absolute;"
alt="">
</div>
<div id="customers" class="mt-3" style=";padding: 200px 20px 0 20px;display: flex">
</div>
<div id="canvases">
</div>
</div>
</div>
<div class="col-6">
<div id="map" style="width: 100%; height: 100vh; background: #eee; box-shadow: 0 0 9px 2px #eee;"></div>
</div>
</div>
</div>
js:
var myMap = new L.Map('map', {
key: 'web.wB4tHXmSnCW6HSBtvoOefGvDobZ8mDuUId7gNWxk',
maptype: 'dreamy',
poi: true,
traffic: false,
center: [32.661343, 51.680374],
zoom: 14,
zoomControl: false,
});
axios({
method: 'get',
url: 'http://sale.bbi.co.ir/API/Navy',
}).then(function (response) {
// console.debug(response.data.factory)
let factory = response.data.factory;
for (let i = 0; i < factory.length; i++) {
for (let j = 0; j < factory[i].Car_input.length; j++) {
let latitude_longitude = [];
latitude_longitude = factory[i].Car_input[j].Coordinates.split(',');
L.marker([latitude_longitude[0].trim(), latitude_longitude[1].trim()]).addTo(myMap)
}
}
let canvas_number = 0
for (let i = 0; i < 4; i++) {
let image = document.createElement('img')
image.src = 'img/office.svg'
image.width = 100
image.style.left = '0'
image.style.top = '0'
let div = document.createElement('div')
div.style.margin = '0 0 1px 1px'
div.style.width = '100px'
div.style.height = '100px'
div.style.flex = '1'
div.id = 'company' + i
div.appendChild(image)
document.getElementById('companies').appendChild(div);
document.getElementById('customers').innerHTML += `<div id="customer${canvas_number}" class="customer"
style="margin:0 0 1px 1px;flex: 1; width: 50px;">
<img src="img/user.svg" alt="">
</div>
`
let canvas = document.createElement('canvas')
canvas.id = 'canvas' + canvas_number
document.getElementById('canvases').appendChild(canvas)
canvas = document.getElementById('canvas' + i);
if (canvas.getContext) {
let centerXCompany = document.getElementById('company' + i).offsetLeft + document.getElementById('company' + i).offsetWidth / 2;
let centerYCompany = document.getElementById('company' + i).offsetTop + document.getElementById('company' + i).offsetHeight / 2;
let centerXCustomer = document.getElementById('customer' + i).offsetLeft + document.getElementById('customer' + i).offsetWidth / 2;
let centerYCustomer = document.getElementById('customer' + i).offsetTop + document.getElementById('customer' + i).offsetHeight / 2;
// console.debug(document.getElementById('canvas4'))
console.debug('#company' + i + ' x: ' + centerXCompany + ' y: ' + centerYCompany)
console.debug('#customer' + i + ' x: ' + centerXCustomer + ' y: ' + centerYCustomer)
let context = canvas.getContext('2d');
console.debug(centerXCompany, centerYCompany, centerXCustomer, centerYCustomer)
// Reset the current path
context.beginPath();
// Staring point (10,45)
context.strokeStyle = '#f9ab00'
context.moveTo(centerXCompany, centerYCompany);
// End point (180,47)
context.lineTo(centerXCustomer, centerYCustomer);
// Make the line visible
context.stroke();
}
canvas_number++;
}
});
Where is my problem?
When i make the canvas and images statically it works like a charm. but when i used for and get the data from api i can not show the canvases and canvases are hide (IDK Why)
Here is a picture when i use dynamically:
Really appreciate. Thanks in advance
In my interview I was asked what will be the output when this javascript code runs.
setTimeout(function() {
console.log(`Set time out`);
}, 0)
while (true) {
console.log("While")
}
I knew that setTimeout adds the callback after the time provided in the argument.
So I thought as queue is initially empty then setTimeout callback will be added then then while loop will be added. So first timeout will run as the wait time is 0ms, then infinite loop will run.
But the interviewer said first while loop will start and it will never end so setTimeout will never execute.
But I tried googeling to find why while is executed before setTimeout even thought it is after the setTimeout but didn’t found anything appropriate.
Can anyone provide me with explanation
there are two rows of data row
<tr v-for="(data, index) in result_estimate.item_tabel" :key="index">
<td>
<pre> sub total : {{ambilaja(formatPrice(ambilPrice[index] - (ambilPrice[index] * subtotalRow[index])))}}</pre>
</td>
<tr>
<div> total : {{this.totals}}</div>
the result of the above value is the total of each of each row, here I pass the value into the function ambilaja().
return {
totals : 0
},
computed : (){
ambilaja: function(){
return (value) => this.lempar(value)
},
},
method : {
lempar(data){
console.log(data)
result console
30002 -> total row index 0
2003 -> total row index 1
}
}
how to add up the total ? ex : 30002 + 2003 = this.totals
I am trying to write a mini-blog app, and I am trying to make a delete button to delete posts, but It doesn’t work. It shows no any errors. I am confusing what I should do. I have seen many relevant posts, seems not helpful for my situation.
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">
<!-- style file -->
<!-- CSS only -->
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
<!-- editorjs adn -->
<script src="https://cdn.jsdelivr.net/npm/@editorjs/editorjs@latest"></script>
<script src="https://cdn.jsdelivr.net/npm/@editorjs/header@latest"></script>
<script src="https://cdn.jsdelivr.net/npm/@editorjs/list@latest"></script>
<script src="https://cdn.jsdelivr.net/npm/@editorjs/checklist@latest"></script>
<script src="https://cdn.jsdelivr.net/npm/@editorjs/quote@latest"></script>
<script src="https://cdn.jsdelivr.net/npm/@editorjs/code@latest"></script>
<script src="https://cdn.jsdelivr.net/npm/@editorjs/table@latest"></script>
<script src="https://cdn.jsdelivr.net/npm/@editorjs/embed@latest"></script>
<!-- CSS -->
<style>
body {
margin: auto;
max-width: 900px;
}
#editor {
border: 1px solid;
}
.inserted_time {
font-style: italic;
font-size: 8px;
text-align: right;
}
</style>
</head>
<body>
<h2>Create a Blog</h2>
<button onclick="toggleBlogForm()" id="switchbutton">Create Post</button>
<div id="allblogs"></div>
<div id="editor"></div>
<div id="conversion"></div>
<button id="post_to_blog">Submit</button>
<div id="message"></div>
<script>
function toggleBlogForm() {
var x = document.getElementById("switchbutton");
if (x.innerHTML == "Create Post") {
x.innerHTML = "View Post";
document.getElementById("allblogs").style.visibility = "hidden";
} else {
x.innerHTML = "Create Post";
}
}
// saved posts
const blogs = [{"time":1641955404060,"blocks":[{"id":"t_39IX2iIH","type":"header","data":{"text":"First Blog Post","level":2}},{"id":"jBunZLMaJC","type":"paragraph","data":{"text":"gogogo"}}],"version":"2.22.2"},{"time":1641955680472,"blocks":[{"id":"fbfQo5o1_y","type":"list","data":{"style":"ordered","items":["ABC","DEF","HIJ"]}}],"version":"2.22.2"},{"time":1641955749893,"blocks":[{"id":"idQrTDXnzJ","type":"checklist","data":{"items":[{"text":"English","checked":true},{"text":"French","checked":false},{"text":"German","checked":false}]}}],"version":"2.22.2"},{"time":1641957539439,"blocks":[{"id":"ztUBHu3HHg","type":"table","data":{"withHeadings":false,"content":[["Category","Language"],["1","Java"],["2","Python"]]}}],"version":"2.22.2"},{"time":1641959106166,"blocks":[{"id":"Q6Z-TKWLup","type":"embed","data":{"service":"youtube","source":"https://youtu.be/tbXpX4dAqjg","embed":"https://www.youtube.com/embed/tbXpX4dAqjg","width":580,"height":320,"caption":"This is a tutorial for learning PHP Symfony framework."}}],"version":"2.22.2"}]
const blog_inserted_time = ["11:43:24 12/1/2022", "11:43:24 12/1/2022", "11:43:24 12/1/2022", "12:18:59 12/1/2022", "12:45:6 12/1/2022"]
// retrieve posts when loading the page
console.log(blogs.length);
loadingPosts();
console.log('retrieved!')
// constructor for the blog
const editor = new EditorJS({
holder: 'editor',
tools: {
header: Header,
list: List,
checklist: Checklist,
quote: Quote,
code: CodeTool,
table: Table,
embed: {
class: Embed,
inlineToolbar: true,
config: {
services: {
youtube: true,
coub: true
}
}
}
}
});
// saving the new post
let saveBtn = document.getElementById('post_to_blog');
saveBtn.addEventListener('click', function() {
editor.save().then((outputData) => {
// save to local variable
const jsondata = outputData;
blogs.push(jsondata);
console.log(blogs);
// get and save time
var currentdate = new Date();
var datetime = currentdate.getHours() + ":"
+ currentdate.getMinutes() + ":"
+ currentdate.getSeconds() + " "
+ currentdate.getDate() + "/"
+ (currentdate.getMonth()+1) + "/"
+ currentdate.getFullYear();
blog_inserted_time.push(datetime);
console.log("inserted time: " + currentdate);
// reload all posts
var divForReset = document.getElementById('allblogs');
while(divForReset.firstChild){
divForReset.removeChild(divForReset.firstChild);
}
loadingPosts();
}).catch((error) => {
console.log('Failed: ', error)
});
});
function loadingPosts() {
for(var i = 0; i < blogs.length; i++) {
var getBlocks = blogs[i]['blocks'];
//console.log('retrieving');
//console.log(getBlocks);
for(var y = 0; y < getBlocks.length; y++) {
console.log('printing text.......');
console.log(getBlocks[y]);
var msg = convertDataToHtml(getBlocks);
console.log(msg);
}
// create a div for a post
var addblog = document.createElement('div');
// get post data from json array
var textmsg = document.createTextNode(msg);
//addblog.appendChild(textmsg);
var addblog = document.createElement('div');
// deleteButton
const deleteButton = document.createElement('button');
deleteButton.innerHTML = 'delete';
addblog.appendChild(deleteButton);
deleteButton.addEventListener('click', evt => {
evt.preventDefault();
alert('it does not work!!!');
});
// get time
addblog.innerHTML += "<p class='inserted_time'>"+blog_inserted_time[i]+"</p>";
// get post
addblog.innerHTML += msg;
addblog.style.cssText = "border: 1px solid; padding: 10px";
document.getElementById('allblogs').appendChild(addblog);
msg = '';
}
}
function convertDataToHtml(blocks) {
var convertedHtml = "";
blocks.map(block => {
switch (block.type) {
case "header":
convertedHtml += `<h${block.data.level}>${block.data.text}</h${block.data.level}>`;
break;
case "embed":
convertedHtml += `<div><iframe width="560" height="315" src="${block.data.embed}" frameborder="0" allow="autoplay; encrypted-media" allowfullscreen></iframe>`;
convertedHtml += `<p>${block.data.caption}</p></div>`;
break;
case "paragraph":
convertedHtml += `<p>${block.data.text}</p>`;
break;
case "delimiter":
convertedHtml += "<hr />";
break;
case "image":
convertedHtml += `<img class="img-fluid" src="${block.data.file.url}" title="${block.data.caption}" /><br /><em>${block.data.caption}</em>`;
break;
case "list":
convertedHtml += "<ul>";
block.data.items.forEach(function(li) {
convertedHtml += `<li>${li}</li>`;
});
convertedHtml += "</ul>";
break;
case "checklist":
convertedHtml += "<ul>";
block.data.items.forEach(function(li) {
if (li["checked"] == true) {
convertedHtml += `<ol>✓ ${li["text"]}</ol>`;
} else {
convertedHtml += `<ol> ${li["text"]}</ol>`;
}
});
convertedHtml += "</ul>";
break;
case "table":
convertedHtml += "<table class='table table-striped table-hover'>";
block.data.content.forEach(function(tdata) {
convertedHtml += "<tr>";
for (a = 0; a < tdata.length; a++) {
convertedHtml += "<td>" + tdata[a] + "</td>";
}
convertedHtml += "</tr>";
});
convertedHtml += "</table>";
break;
case "code":
convertedHtml += `<code>${block.data.code}</code>`;
default:
console.log("Unknown block type", block.type);
break;
}
});
return convertedHtml;
}
</script>
</body>
</html>
Here is my code-file.kldfxkvndlkxncvlksdvmlkx
xcnvlnxclvxvc
xcvkjnxvxc
i have a react select input using checkboxes and a list item text to denote selected values.
When i use the ListItemText, the selected values get displayed as objects but when i just display the {option.title} in the menu item the actual text gets displayed. Is there another specific way i should display text in the ListItemText? Any advise will be appreciated.
Code :
{
"id": 288,
"category_id": 3,
"title": "Test",
"kpi_unit_of_measure": "%>",
"updated_by": 9,
"created_by": 9,
"date_created": "2021-12-15T21:00:00.000+0000",
"date_updated": "2022-01-09T21:00:00.000+0000",
"user_id": 9,
"account": "Revenue",
"variance": "green",
"target": "70",
"actualYTD": "10",
"plannedYTD": "10",
"rootCause": null,
"action": null,
"supportRequired": null,
"categories": {
"id": 3,
"description": "Talent and Culture"
}
}
When i use ListItemText, my selected values get displayed like an object : Image here
error
Code :
{kpis && kpis.map((option) => (
<MenuItem key={option.id} value={option.id}
classes={{
root: classes.selectMenuItem,
selected: classes.selectMenuItemSelectedMultiple,
}}>
<ListItemIcon>
<Checkbox checked={kpi_id.includes(option.id)} />
</ListItemIcon>
<ListItemText primary={option.title} title={option.title}> {option.title}</ListItemText>
</MenuItem>
))}
But when i remove the checkbox i can view the title of the option , shouldi display the text in the ListItemText differently?
Image here : expected
Code :
{kpis && kpis.map((option) => (
<MenuItem key={option.id} value={option.id}
classes={{
root: classes.selectMenuItem,
selected: classes.selectMenuItemSelectedMultiple,
}}>
{option.title}
</MenuItem>
))}
I was following this tutorial to import a GLTF model and keep getting http:localhost:5000/kick.glb 404 (Not Found) Error. If I import it on CodeBox, the animation comes up and everything works fine, but on VS Code, I get the error.
The glb file is in my public folder. Folder Structure
Is there something else that I’m missing?
Webpack:
const path = require("path");
const entryFile = path.resolve(__dirname, "client", "src", "index.js");
const outputDir = path.resolve(__dirname, "client", "dist");
const webpack = require("webpack");
module.exports = {
entry: ["@babel/polyfill", entryFile],
output: {
path: outputDir,
publicPath: "/",
filename: "bundle.js",
},
devtool: "inline-source-map",
module: {
rules: [
{
test: /.(js|jsx)$/,
loader: "babel-loader",
exclude: /node_modules/,
},
{
test: /.(scss|css)$/,
use: [
{
loader: "style-loader",
},
{
loader: "css-loader",
},
],
},
{
test: /.(png|svg|jpg|gif)$/,
use: [
{
loader: "url-loader",
},
],
},
],
},
resolve: {
extensions: ["*", ".js", ".jsx"],
},
plugins: [new webpack.HotModuleReplacementPlugin()],
devServer: {
historyApiFallback: true,
static: "./client/dist",
hot: true,
proxy: {
"/api": "http://localhost:3000",
"/socket.io/*": {
target: "http://localhost:3000",
ws: true,
},
},
},
};
Kick.js
/*
Auto-generated by: https://github.com/pmndrs/gltfjsx
*/
import React, { useRef } from 'react'
import { useGLTF, useAnimations } from '@react-three/drei'
export default function Model({ ...props }) {
const group = useRef()
// const path = path.resolve()
const { nodes, materials, animations } = useGLTF('/kick.glb')
const { actions } = useAnimations(animations, group)
return (
<group ref={group} {...props} dispose={null}>
<group rotation={[Math.PI / 2, 0, 0]} scale={0.01}>
<primitive object={nodes.mixamorigHips} />
<skinnedMesh geometry={nodes.Ch03.geometry} material={materials.Ch03_Body} skeleton={nodes.Ch03.skeleton} />
</group>
</group>
)
}
useGLTF.preload('/kick.glb')
I’m building a Web App on the Google Apps Script platform
When I summon JavaScript alerts e.g.
window.alert('Thankyou for submitting your details. You will now be taken to the grammar test')
it will give me a message at the top of the alert saying randomString scripts.googleusercontent.com says
This looks messy and unprofessional so I would like to get rid of it before giving to my client
Does anyone know how to override it?
Thanks