Blancer.com Tutorials and projects
Freelance Projects, Design and Programming Tutorials
Category Added in a WPeMatico Campaign
Can anyone help me? I have a project to work on and some code that needs modification to meet specific requirements in React
i cant understand what should i change in my code
if someone can help me please let me know where is little details to change and modify
I am trying to send a notification using Firebase Cloud Messaging and Firebase Cloud functions. When the cloud function runs it shows that the message is being sent but for some reason, I am not getting the notification on the actual phone.
const functions = require("firebase-functions");
const admin = require("firebase-admin");
admin.initializeApp();
exports.notifySeniorOnTicketAcceptance = functions.firestore
.document("tickets/{ticketId}")
.onUpdate(async (change, context) => {
const newData = change.after.data();
const previousData = change.before.data();
// Check if the isAccepted field changed from false to true
if (newData.isAccepted === true && previousData.isAccepted !== true) {
const seniorUserId = context.params.ticketId;
return await admin // <-use await
.firestore()
.collection("seniors")
.doc(seniorUserId)
.get()
.then(async (seniorSnapshot) => {
if (seniorSnapshot.exists) {
const seniorData = seniorSnapshot.data();
if (seniorData && seniorData.deviceToken) {
// Send notification to the senior
const message = {
data: {
title: "Ticket Accepted",
body: "Your ticket has been accepted.",
},
token: seniorData.deviceToken,
};
try {
const response = await admin.messaging().send(message);
console.log("Successfully sent message:", response);
} catch (error) {
console.log("Error sending message:", error);
}
} else {
console.error("Seniordocument is missing deviceToken field.");
return null;
}
} else {
console.error("Senior document not found.");
return null;
}
})
.catch((error) => {
console.error("Error retrieving senior information:", error);
return null;
});
}
return null;
});
I just downloaded the zip file from the three.js website and was seeing a tutorial on how to use three.js with vscode. In the tutorial, there was a three.js file but when i checked my build folder only three.cjs, three.module.js and three.module.min.js was there. I am very new to this so i would be glad if i can make three.js. to work.
When i tried running the cube html code, i got errors like
Refused to execute script from because its MIME type (‘text/html’) is not executable, and strict MIME type checking is enabled.
No such file or directory: three.js
Error: Relative references must start with either “/”, “./”, or “../”
And a blank white screen
Here is the error
opencv.js:30 Uncaught (in promise) DOMException: Failed to execute 'getImageData' on 'CanvasRenderingContext2D': The canvas has been tainted by cross-origin data." and here is a part form my code that gives me the error " let imageMain = cv.imread("img-main");
I expected that the source image from html file loaded successfully but it didn’t!
I want to show the pagination in this format of 1/4, and the next and previous buttons should work accordingly. I am asking for something like this; you can see the way it shows the pagination “https://jsfiddle.net/x9b2Lqm5/4/”. Also, on the first and last pages, clicks should be disabled. You can see it at the bottom of the table. Please help me in order to accomplish this. I tried but couldn’t do it. That’s why I am looking for expert help.
const paginationNumbers = document.getElementById("pagination-numbers");
const paginatedList = document.getElementById("paginated-list");
const listItems = paginatedList.querySelectorAll("tbody tr");
const nextButton = document.getElementById("next-button");
const prevButton = document.getElementById("prev-button");
const paginationLimit = 2;
const pageCount = Math.ceil(listItems.length / paginationLimit);
let currentPage = 1;
const disableButton = (button) => {
button.classList.add("disabled");
button.setAttribute("disabled", true);
};
const enableButton = (button) => {
button.classList.remove("disabled");
button.removeAttribute("disabled");
};
const handlePageButtonsStatus = () => {
if (currentPage === 1) {
disableButton(prevButton);
} else {
enableButton(prevButton);
}
if (pageCount === currentPage) {
disableButton(nextButton);
} else {
enableButton(nextButton);
}
};
const handleActivePageNumber = () => {
document.querySelectorAll(".pagination-number").forEach((button) => {
button.classList.remove("active");
const pageIndex = Number(button.getAttribute("page-index"));
if (pageIndex == currentPage) {
button.classList.add("active");
}
});
};
const appendPageNumber = (index) => {
const pageNumber = document.createElement("button");
pageNumber.className = "pagination-number";
pageNumber.innerHTML = index;
pageNumber.setAttribute("page-index", index);
pageNumber.setAttribute("aria-label", "Page " + index);
paginationNumbers.appendChild(pageNumber);
};
const getPaginationNumbers = () => {
for (let i = 1; i <= pageCount; i++) {
appendPageNumber(i);
}
};
const setCurrentPage = (pageNum) => {
currentPage = pageNum;
handleActivePageNumber();
handlePageButtonsStatus();
const prevRange = (pageNum - 1) * paginationLimit;
const currRange = pageNum * paginationLimit;
listItems.forEach((item, index) => {
item.classList.add("hidden");
if (index >= prevRange && index < currRange) {
item.classList.remove("hidden");
}
});
};
window.addEventListener("load", () => {
getPaginationNumbers();
setCurrentPage(1);
prevButton.addEventListener("click", () => {
setCurrentPage(currentPage - 1);
});
nextButton.addEventListener("click", () => {
setCurrentPage(currentPage + 1);
});
document.querySelectorAll(".pagination-number").forEach((button) => {
const pageIndex = Number(button.getAttribute("page-index"));
if (pageIndex) {
button.addEventListener("click", () => {
setCurrentPage(pageIndex);
});
}
});
});
</script> .result {
text-align: center;
padding-bottom: 20px;
width: 100%;
}
/* Responsive Table Start */
.rstable {
width: 100%;
margin: 0 auto;
padding: 16px 0px;
}
.rstable table {
font-family: calibri, sans-serif;
border-collapse: collapse;
font-size: 16px;
width: 100%;
font-weight: 400;
}
.rstable tr {
border-bottom: 1px solid #ccc;
}
.rstable tr td {
text-align: left;
padding: 9px;
color: #333;
}
.rstable th {
text-align: left;
padding: 10px 9px;
background: #004287;
color: #fff;
font-weight: 500;
}
.rstable tr:nth-child(even) {
background: #f9fbfdc4;
}
.rstable tr:nth-child(odd) {
background: #dae9f3;
}
.rstable tr td a {
color: #004287;
font-size: 16px;
}
@media (min-width: 768px) and (max-width: 1023px) {
.rstable table {
font-size: 15px;
}
}
@media screen and (max-width: 767px) {
.rstable table {
font-size: 16px;
font-weight: 400;
}
.rstable thead {
display: none;
}
.rstable td:first-child {
text-align: left;
display: inline-grid;
width: 90%;
}
.rstable td {
text-align: left;
display: inline-grid;
width: 26%;
vertical-align: top;
color: #333;
font-weight: 400;
}
.rstable td:before {
content: attr(data-title);
font-weight: 500;
padding-bottom: 5px;
font-size: 16px;
color: #000;
}
}
@media (min-width: 280px) and (max-width: 319px) {
.rstable td {
width: 23%;
}
}
/* Responsive Table Ends */
.arrow-right,
.arrow-left {
display: block;
margin: 10px auto;
width: 8px;
height: 8px;
border-top: 2px solid #000;
border-left: 2px solid #000;
}
.arrow-right {
transform: rotate(135deg);
}
.arrow-left {
transform: rotate(-45deg);
}
.hidden {
display: none;
}
.pagination-container {
width: calc(100% - 0rem);
display: flex;
align-items: center;
position: relative;
bottom: 0;
padding: 0rem 0;
justify-content: right;
/* text-align: center; */
}
.pagination-number, .pagination-button {
font-family: calibri, sans-serif;
font-size: 16px;
background-color: transparent;
border: none;
margin: 0.1rem 0.1rem;
cursor: pointer;
height: 2rem;
width: 2rem;
border-radius: 0.2rem;
}
.pagination-number:hover,
.pagination-button:not(.disabled):hover {
background: #fff;
}
.pagination-number.active {
color: #fff;
background: #0085b6;
} <!-- Result Start -->
<!-- Result Table Starts -->
<div class="rstable">
<table id="paginated-list">
<thead>
<tr>
<th>Train</th>
<th>Type</th>
<th>Zone</th>
<th>From</th>
<th>Dep</th>
<th>To</th>
<th>Arr</th>
<th>Dur</th>
<th>Halts</th>
<th>Runs On</th>
<th>Dist</th>
<th>Speed</th>
<th>Classes</th>
</tr>
</thead>
<tbody>
<tr>
<td data-title="Train">15011 Kashi Express</td>
<td data-title="Type">SuperFast</td>
<td data-title="Zone">CR</td>
<td data-title="From">LTT</td>
<td data-title="Dep">15:30</td>
<td data-title="To">GKP</td>
<td data-title="Arr">06:15 +1 night</td>
<td data-title="Dur">7h 55m</td>
<td data-title="Halts">11</td>
<td data-title="Runs On">S - T - T F -</td>
<td data-title="Dist">632 km</td>
<td data-title="Speed">97 km/hr</td>
<td data-title="Classes">SL | 3A | 2A</td>
</tr>
<tr>
<td data-title="Train">15012 Pushpak Express</td>
<td data-title="Type">SuperFast</td>
<td data-title="Zone">CR</td>
<td data-title="From">LTT</td>
<td data-title="Dep">15:30</td>
<td data-title="To">GKP</td>
<td data-title="Arr">06:15 +1 night</td>
<td data-title="Dur">7h 55m</td>
<td data-title="Halts">11</td>
<td data-title="Runs On">S - T - T F -</td>
<td data-title="Dist">632 km</td>
<td data-title="Speed">96 km/hr</td>
<td data-title="Classes">SL | 3A | 2A</td>
</tr>
<tr>
<td data-title="Train">15013 Godan Express</td>
<td data-title="Type">SuperFast</td>
<td data-title="Zone">CR</td>
<td data-title="From">LTT</td>
<td data-title="Dep">15:30</td>
<td data-title="To">GKP</td>
<td data-title="Arr">06:15 +1 night</td>
<td data-title="Dur">7h 55m</td>
<td data-title="Halts">11</td>
<td data-title="Runs On">S - T - T F -</td>
<td data-title="Dist">632 km</td>
<td data-title="Speed">95 km/hr</td>
<td data-title="Classes">SL | 3A | 2A</td>
</tr>
<tr>
<td data-title="Train">15014 Golden Express</td>
<td data-title="Type">SuperFast</td>
<td data-title="Zone">CR</td>
<td data-title="From">LTT</td>
<td data-title="Dep">15:30</td>
<td data-title="To">GKP</td>
<td data-title="Arr">06:15 +1 night</td>
<td data-title="Dur">7h 55m</td>
<td data-title="Halts">11</td>
<td data-title="Runs On">S - T - T F -</td>
<td data-title="Dist">632 km</td>
<td data-title="Speed">94 km/hr</td>
<td data-title="Classes">SL | 3A | 2A</td>
</tr>
<tr>
<td data-title="Train">15015 Lucknow Express</td>
<td data-title="Type">SuperFast</td>
<td data-title="Zone">CR</td>
<td data-title="From">LTT</td>
<td data-title="Dep">15:30</td>
<td data-title="To">GKP</td>
<td data-title="Arr">06:15 +1 night</td>
<td data-title="Dur">7h 55m</td>
<td data-title="Halts">11</td>
<td data-title="Runs On">S - T - T F -</td>
<td data-title="Dist">632 km</td>
<td data-title="Speed">93 km/hr</td>
<td data-title="Classes">SL | 3A | 2A</td>
</tr>
<tr>
<td data-title="Train">15016 SLN Express</td>
<td data-title="Type">SuperFast</td>
<td data-title="Zone">CR</td>
<td data-title="From">LTT</td>
<td data-title="Dep">15:30</td>
<td data-title="To">GKP</td>
<td data-title="Arr">06:15 +1 night</td>
<td data-title="Dur">7h 55m</td>
<td data-title="Halts">11</td>
<td data-title="Runs On">S - T - T F -</td>
<td data-title="Dist">632 km</td>
<td data-title="Speed">92 km/hr</td>
<td data-title="Classes">SL | 3A | 2A</td>
</tr>
<tr>
<td data-title="Train">15017 Sitapur Express</td>
<td data-title="Type">SuperFast</td>
<td data-title="Zone">CR</td>
<td data-title="From">LTT</td>
<td data-title="Dep">15:30</td>
<td data-title="To">GKP</td>
<td data-title="Arr">06:15 +1 night</td>
<td data-title="Dur">7h 55m</td>
<td data-title="Halts">11</td>
<td data-title="Runs On">S - T - T F -</td>
<td data-title="Dist">632 km</td>
<td data-title="Speed">91 km/hr</td>
<td data-title="Classes">SL | 3A | 2A</td>
</tr>
<tr>
<td data-title="Train">15018 Darbhanga Express</td>
<td data-title="Type">SuperFast</td>
<td data-title="Zone">CR</td>
<td data-title="From">LTT</td>
<td data-title="Dep">15:30</td>
<td data-title="To">GKP</td>
<td data-title="Arr">06:15 +1 night</td>
<td data-title="Dur">7h 55m</td>
<td data-title="Halts">11</td>
<td data-title="Runs On">S - T - T F -</td>
<td data-title="Dist">632 km</td>
<td data-title="Speed">90 km/hr</td>
<td data-title="Classes">SL | 3A | 2A</td>
</tr>
</tbody>
</table>
</div>
<div style="width: 100%; display: flex;align-items: center;">
<div class="pagination-container">
<button class="pagination-button" id="prev-button" aria-label="Previous page" title="Previous page">
<span class="arrow-left"></span>
</button>
<div id="pagination-numbers">
</div>
<button class="pagination-button" id="next-button" aria-label="Next page" title="Next page">
<span class="arrow-right"></span>
</button>
</div>
</div>
<!-- Result Table Ends -->
<!-- Script Starts -->en mi sistema me toco aser una pagina para un salon de belleza ahora nesesito inplemetar la funcionalidad de que el usario se registre para poder agendar citas pedientes pero no se como aser que la ft de perfin y los datos del perfil se mantengan en todas las parte de la pagina por ejemplo si me voy al apartado de ofertas
no e intentado nada simplemente nose por donde comenzar
I’m setting up webpack to my react project using npm and this error appears:
ERROR in ./src/index.jsx 6:12
Module parse failed: Unexpected token (6:12)
You may need an appropriate loader to handle this file type, currently no loaders are configured to process this file. See https://webpack.js.org/concepts#loaders
|
| const root = ReactDOM.createRoot(document.getElementById(‘root’));
> root.render(<App />);
|
webpack.config.js
const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');
module.exports = {
entry: './src/index.jsx',
output: {
filename: 'bundle.js',
path: path.resolve(__dirname, 'build'),
clean: true,
},
plugins: [new HtmlWebpackPlugin()],
devServer: {
contentBase: path.join(__dirname, 'dist'),
compress: true,
port: 9000,
watchContentBase: true,
progress: true,
},
module: {
rules: [
{
test: /.m?js$/,
exclude: /(node_modules|bower_components)/,
use: {
loader: 'babel-loader',
},
},
{
test: /.css$/,
use: [
'style-loader',
{
loader: 'css-loader',
options: {
modules: true,
},
},
],
},
{
test: /.(png|svg|jpg|gif)$/,
use: ['file-loader'],
},
],
},
};
package.json
{
"name": "my-app",
"version": "0.1.0",
"private": true,
"dependencies": {
"@testing-library/jest-dom": "^5.17.0",
"@testing-library/react": "^13.4.0",
"@testing-library/user-event": "^13.5.0",
"react": "^18.2.0",
"react-dom": "^18.2.0",
"react-router-dom": "^6.22.1",
"react-scripts": "5.0.1",
"web-vitals": "^2.1.4"
},
"scripts": {
"serve": "npx webpack --mode development serve",
"build:dev": "npx webpack --mode development",
"build:prod": "npx webpack --mode production"
},
"eslintConfig": {
"extends": [
"react-app",
"react-app/jest"
]
},
"browserslist": {
"production": [
">0.2%",
"not dead",
"not op_mini all"
],
"development": [
"last 1 chrome version",
"last 1 firefox version",
"last 1 safari version"
]
},
"devDependencies": {
"@babel/cli": "^7.23.9",
"@babel/core": "^7.23.9",
"@babel/preset-env": "^7.23.9",
"@babel/preset-react": "^7.23.3",
"babel-loader": "^9.1.3",
"css-loader": "^6.10.0",
"html-webpack-plugin": "^5.6.0",
"style-loader": "^3.3.4",
"webpack": "^5.90.2",
"webpack-cli": "^5.1.4",
"webpack-dev-server": "^4.15.1"
}
}
babel.config.json
{
"presets": [
[
"@babel/preset-env",
{
"targets": {
"edge": "17",
"firefox": "60",
"chrome": "67",
"safari": "11.1"
},
"useBuiltIns": "usage",
"corejs": "3.6.5"
}
]
]
}
index.jsx
import { createRoot } from 'react-dom/client';
const domNode = document.getElementById('root');
const root = createRoot(domNode);
root.render(<App />);
I do not understand what the problem is
I recently finished building an application and would like to deploy it on a PaaS platform such as render. I read that using nginx as reverse proxy is good for production and I followed a tutorial to setup Nginx with docker container. It’s my first time of trying out this process. I tested the nginx setup on postman and it worked fine.
I can make requests to my api via the nginx port. Now, I want to deploy the file to render using docker-compose.
To test this system in my nextjs application, I had to change the server endpoint from:
export const BASE_URL = "http://localhost:4000/api/v1" my server endpoint
to
export const BASE_URL = "http://localhost:80/api/v1";
If I deploy this setup on render, how do I make use of it or ensure that my requests hit the nginx endpoint. Render provides a free domain with option to link your own custom domain.
At this stage, I am lost and confused on next step to take.
Here are my setups:
//docker compose file
version: "3" services: bookingapi: build: . image: kings19/bookingapi ports: - "4000:4000" env_file: - /src/Services/EnvConfig/.env nginx: depends_on: - bookingapi restart: always build: dockerfile: Dockerfile context: ./nginx ports: - "80:80"
//Nginx docker file
FROM nginx COPY ./nginx.conf /etc/nginx/nginx.conf
//Nginx confi file
`
events {}
http {
upstream bookingapi {
server bookingapi:4000;
}
server {
listen [::]:80;
listen 80;
location /api {
proxy_pass http://bookingapi;
proxy_http_version 1.1;
proxy_set_header Connection "";
}
}
}
`
Attach is my project structure:
enter image description here
i dont know why but for some reason when im applying border width style as “transparent” my expo app crashes immediately
<Pressable
style = {{borderWidth:"transparent"}}
>
...some components
</Pressable>
Im using react native expo and experienced this bug in android , it might not crash in an ios device i guess.
i wanted to add this style on some condition
borderWidth: lookingOptions.includes(item?.name) ? "transparent" : 0.7,
but just gave up as i thought it isnt possible , atleast in android , i dont know if its a react native bug or expo bug .
I need your help. I have this code and I want to disable for sometimes. I tried to uncomment some few lines, it was still displaying. Please is there a single line here where i can comment it out to stop displaying on my site.
What if i comment out
// console.log(('1');
wiill it work?
</style>
<script type="text/javascript">
jQuery('document').ready(function($){
setInterval(function(){
var popupCounter = sessionStorage.getItem("popupCounter");
if (popupCounter == '' || popupCounter == null) {
setTimeout(function(){
jQuery('.exit-poup-code-wrap').fadeIn();
sessionStorage.setItem("popupCounter",'1');
}, 1000);
}
if(popupCounter == '1'){
// do nothing
return false;
clearInterval();
}
console.log('1');
}, 1000);
$('body').on('click','.popup_exit_close', function(){
$('.exit-poup-code-wrap').fadeOut();
});
});
</script>```
in wordpress functions.php. The issue is that i don't want it to display/popup for now. And I don't want to delete it cos i will still needs
Please which line should i comment out, so that this popup won't display untill I uncomment the line. My javascript knowledge is below basic.
I uncomment the some lines, but it didn't work, I didn't want to destroy the code, i hired someone to help develop it, but I can't him no longer
a slider to homepage, I have used js within my html to animate. However when i move the js to an external file it stops working. please assist.
html
div class="home-container">
<div class="slider-container">
<div class="mySlides fade">
<img
src="Media/slider/2.jpg"
alt="Roller Coaster">
<div class="text">Teddy Tinkers</div>
</div>
<div class="mySlides fade">
<img
src="Media/slider/7.jpg"
alt="Splash Park"
>
<div class="text">Teddy Tinkers</div>
</div>
<div class="mySlides fade">
<img
src="Media/slider/6.jpg"
alt="Eating Area"
>
<div class="text">Teddy Tinkers</div>
</div>
<div class="mySlides fade">
<img
src="Media/slider/8.jpg"
alt="Park Map"
>
<div class="text">Teddy Tinkers</div>
</div>
<div class="mySlides fade">
<img
src="Media/slider/10.jpg"
alt="Park Map"
>
<div class="text">Teddy Tinkers</div>
</div>
<div class="mySlides fade">
<img
src="Media/slider/11.jpg"
alt="Park Map"
>
<div class="text">Teddy Tinkers</div>
</div>
<div class="mySlides fade">
<img
src="Media/slider/12.jpg"
alt="Park Map"
>
<div class="text">Teddy Tinkers</div>
</div>
</div>
</div>
this is the js i have moved externally and the slider no longer works..
document.getElementById("smallA").onclick = function(){changeSize("small")};
document.getElementById("mediumA").onclick = function(){changeSize("medium")};
document.getElementById("largeA").onclick = function(){changeSize("large")};
function changeSize(c)
{
document.getElementsByTagName("body")[0].className="c"
}
let slideIndex = 0;
showSlides();
function showSlides() {
let i;
let slides = document.getElementsByClassName("mySlides");
for (i = 0; i < slides.length; i++) {
slides[i].style.display = "none";
}
slideIndex++;
if (slideIndex > slides.length) {
slideIndex = 1;
}
slides[slideIndex - 1].style.display = "block";
setTimeout(showSlides, 2000); // Change image every 2 seconds
}
I also want to add it into a thick box and keep it contained at a certain height width on fullwidth mode but keeping responsive for mobiles etc.
If someone could help point me in the right direction I would really appreciate it.
For some reason, my browser cannot read the variable I declared with contents of the HTML DOM. My code doesn’t work when I use Microsoft’s Live Preview extension to open my work in a browser window. However, if I open the html file in a browser window(show preivew(external browser)) and then import the content of my js file into the console instead of having the js file immediately linked, it works.
For the latter situation, I only get this error: ‘Uncaught TypeError: Cannot read properties of null’
My html code
<!DOCTYPE html>
<html lang="en">
<head>
<script src="challenge1Copy.js"></script>
<title>Changing Doc Text</title>
</head>
<body>
<header>
</header>
<p>Some example code</p>
<!--button meant to call event handler-->
<button>Click here!</button>
<footer>
</footer>
</body>
</html>
My js code
//Displays the current time and date
const day = new Date();
//Displays the current hours
let hours = day.getHours();
//Displays the current minutes
const minutes = day.getMinutes();
//Displays the current seconds
const seconds = day.getSeconds();
//Displays the current day as a number value
let currentDay = day.getDay();
//Changes the number value of the day into a word format
switch (currentDay) {
case 0:
currentDay = 'Sunday';
break;
case 1:
currentDay = 'Monday';
break;
case 2:
currentDay = 'Tuesday';
break;
case 3:
currentDay = 'Wednesday';
break;
case 4:
currentDay = 'Thursday';
break;
case 5:
currentDay = 'Friday';
break;
case 6:
currentDay = 'Saturday';
break;
Default:
console.log('currentDay variable is not working')
break;
}
//Declaring and defining a time suffix variable to be able to display am and pm
let timeSuffix = '';
//Setting terms for when to use am and when to use pm
if (hours >= 12) {
timeSuffix = 'PM';
} else {
timeSuffix = 'AM';
}
//Converting 24 hour time to 12 hour time format
if (hours > 12) {
hours = hours - 12;
}
//finds button in html doc
let realButton = document.querySelector('button');
//event to change paragraph content to current date and time
realButton.addEventListener('click', function (e){
let dayAndTime = document.querySelector('p')
dayAndTime.innerText = `Today is : ${currentDay}.nCurrent time is : ${hours} ${timeSuffix} : ${minutes} : ${seconds}`;
})
I just want to figure out why my js code works only when manually injected into the console when the html file is open in a browser. This seems to be the only case in which my code works at all.
Let’s say I import an .env variable using
import { PUBLIC_URL } from '$env/static/public';
If the variable does no exists, it will throw an HTTP 500 Internal Server error and I can read the error in the console.
Now if someone else clones the repository and does not have an .env file, I would like to catch this error message and throw a decent error description.
How can I achieve this?
I tried using fs.exists(), but it seems that I am unable to use fs in Svelte. I also tried importing dotenv and running config. It gives an error process is not defined, when the file does exist.
I have an object that is converted to array for using reduce function, but its returning NaN
Here is the example:
const obj = {
"2024-02-08": {
"mobile": {
"total": 2,
"totalrev": 36
},
"laptop": {
"total": 3,
"totalrev": 535
}
},
"2024-02-09": 0,
"2024-02-10": 0,
"2024-02-11": 0,
"2024-02-12": {
"mobile": {
"total": 5,
"totalrev": 0
},
"laptop": {
"total": 2,
"totalrev": 0
}
},
"2024-02-13": 0,
"2024-02-14": 0,
"2024-02-15": 0,
"2024-02-16": 0
}
Suppose i want to calculate total rev of the laptop , so i am using this reduce function
const totalRevFromLaptop = Object.values(obj).reduce( (acc, cur) => acc + cur?.laptop?.totalrev, 0 );
But its returning NaN
I have a similar issue, but my website is made in WordPress. My developer made some changes to make the site load faster but when someone opens the website first the bad layout appears and then after 5 seconds the website loads. this helped to gain a good score in page speed insights but I don’t want to have the bad layout load first. we tried to put in a page loader plugin, but then the page speed insights showed an error: please refer to the screenshot: https://nimb.ws/TNLdGl
So we had to remove the page loader. Please provide a solution. Refer to the screenshots below, how the site loads initially: please refer to this screenshot link: https://nimb.ws/qHXjQr
Please provide with a solution
I tried to add page loader but then an error occurred in page speed insights.