Blancer.com Tutorials and projects
Freelance Projects, Design and Programming Tutorials
Category Added in a WPeMatico Campaign
I am working on a React project where I need to pass data from a parent component to a child, but the child component keeps showing undefined. Problem: Even though I pass the prop like <Child data={myData} />, it doesn’t render correctly in the child.
Defined myData in state and passed it as a prop. What I expected: The child should receive and render the value, but instead it shows undefined. How can I fix this?
Description
I have implemented a print report feature in Angular.
When the user clicks the Print button, the browser’s print dialog opens (using window.print()).
At the same time, I also have a ping mechanism to check if the connection between Angular (frontend) and .NET (backend) is active. If no ping response is received within 30 seconds, the UI shows an error message:
“Lost connection to server”
The problem is: when the print window is open, all JavaScript execution is paused (including the ping mechanism). If the user leaves the print window open for more than 30 seconds, Angular displays the “Lost connection to server” error even though the connection is fine.
Steps to Reproduce
Expected Behavior
The ping/heartbeat mechanism should continue working in the background (or resume seamlessly after print dialog is closed) so that the app does not incorrectly show Lost connection to server.
Actual Behavior
When the print dialog is open, JavaScript execution halts (including setInterval, setTimeout, and HTTP calls).
As a result, the ping never executes, and Angular incorrectly shows a server disconnection error after 30 seconds.
Environment
Angular version: 18
Browser(s): Chrome, Edge, etc.
OS: Windows 11
Question
Is there any Angular-recommended workaround or best practice to handle this scenario where background tasks (like ping/heartbeat) stop working when the print window is open?
Description
I have a use case where the backend sends me the date/time.
On the UI side (Angular), I need to display this date/time and keep incrementing it every second, so that the user always sees the current server time.
I implemented this with setInterval(), but when I minimize the browser or switch to another tab, the timer stops updating because of browser throttling. This results in the displayed time lagging or freezing until the tab becomes active again.
Steps to Reproduce
Receive a date string from backend.
Start a timer that increments the date every second and displays it
in the UI.
updateDateTime(inputDate: string) {
setInterval(() => {
this.incrementDate(inputDate);
}, 1000);
}
incrementDate(inputDate: Date) {
inputDate.setSeconds(inputDate.getSeconds() + 1);
this.formattedDateTimeSubject.next(this.formatDate(inputDate));
}
3.Minimize the browser or switch to another tab.
4.Observe that the timer stops firing (UI stops updating).
Expected Behavior
The timer should continue updating every second even when the tab is inactive or minimized, so that the displayed time always reflects the correct running server time.
Actual Behavior
Due to browser throttling, the setInterval() callback is delayed or stopped when the tab is not active, and the UI clock freezes.
Environment
Angular version: 18
Browser(s): Chrome, Edge, etc.
Operating System: Windows 11
What is the recommended Angular way (or workaround) to avoid browser throttling issues for such a use case where we need continuous UI updates (like a clock) even if the tab is inactive?
I am struggling with ics.js (https://github.com/nwcell/ics.js/)
It is ignoring rules for repeat events set up in rrules
It is not allowing me to add another event from another .ics file after I have added a first one. However, if I delete the first one, I can add the second one.
I am unable to add a calendar event using a JavaScript object.
var myfunc = function(e) {
var myfunc = function(e) {
let target = e.currentTarget;
if (target.tagName != 'X-EVENT') {
throw "downloadEvent is for use on x-events only";
}
let form = target.querySelector("form");
let fd = new FormData(form);
//console.log(fd.has('subject'));
let recur = fd.get("freq") != "none";
let rRule = recur ? {"freq" : fd.get("freq"), "interval" : fd.get("interval"), "byday" : fd.getAll("byday"), "until" : fd.get('until') } : null;
let cal = ics();
// cal.addEvent(eventData);
cal.addEvent(fd.get("subject"),fd.get("description"), fd.get("location"), fd.get("start"), fd.get("end"), rRule);
cal.download(fd.get("subject"));
}
As you can infer from the code snippet above, I create adding an event as an object but that failed.
How can I fix this code so that the reoccurrence instructions in rRule are obeyed?
I’m trying a small start with flaks and web tools, but the html, css does not show in the page, just a blank page, I need an explanation please, I’m using VSCode, this is my code :
Project structure :
FLASKTEST/
│ test.py
│
├── templates/
│ index.html
└── static/
style.css
script.js
test.py file :
from flask import Flask, render_template
app = Flask(__name__)
@app.route("/")
def home():
return render_template("index.html")
if __name__ == "__main__":
app.run(debug=True)
index.html file :
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Small Example</title>
<link rel="stylesheet" href="{{ url_for('static', filename='style.css') }}">
</head>
<body>
<h1>Welcome to Flask</h1>
<p>This is a small example combining HTML + CSS + JS + Flask</p>
<button onclick="showMessage()">Click here</button>
<script src="{{ url_for('static', filename='script.js') }}"></script>
</body>
</html>
style.css file :
body {
background-color: #396e9d;
font-family: Arial, sans-serif;
text-align: center;
padding-top: 50px;
}
h1 {
color: darkblue;
}
button {
padding: 10px 20px;
font-size: 16px;
cursor: pointer;
}
script.js file :
function showMessage() {
alert("Hello");
}
In my project, I am trying to create a chat room. In the chat room, I need to send different kind of data about other sections of my app. I use web sockets to that.
To send same data to every client in the room they are inside of, I need to iterate over like, all of the clients. And if like, I have 1000 clients, it could create lag, so messages or other datas could be laggy. To prevent this, I can actually create a map object and set room name, to that key(room name) name I can use set object as value that is having an instance of client object of web socket itself. So thanks to that global variable map object I saved performance of iterating through all clients to just to send to the clients in the same room.
Code for the loop I am currently using to avoid global variable:
ws.communityName = communityName;
// Send to all clients in the same community
webSocket.clients.forEach((client) => {
if(client.communityName === communityName) {
client.send(stringifiedActiveUsers);
// Send only to owner of the community within user's community
if(client.userid === communityOwnerId) {
client.send(suspendedUsersData);
}
}
});
That is my logic on how to send data to all clients in the same room. But I am using global variable, which I shouldnt because it could create memory leak problems etc…
Do you think there is a more efficient solution to this problem? Should I use global variable to save performance?
For a security compliance reason I had to update the js-dom libray to version 27.0.0 from 23.0.0 after that few unit tests failed.
This is a Vue.js project and use these libries for testing
import { expect } from 'chai';
import { mount } from '@vue/test-utils';
This is the unit test getting failed. After updating.
console.log(wrapper.find('.myclass')); // Output [Object: null prototype] {}
expect(wrapper.find('.myclass').exists()).to.be.false;
Error message I am getting here is
AssertionError: expected false to be true
Even though the console.log prints the same output, I am wondering why this is failing. What am I missing here?
clockBtn.classList.add(..., "opacity-0", "hover:opacity-100");
The clockBtn button is dynamically created in a function defined in .js file.
I am trying to use hover:opacity-100 so that the button, which is usually not visible, shows up upon hovering over the button.
But, the button stays invisible even when the cursor is over the button.
Is this the right way to add this hover Tailwind class in Javascript?
In my project, I am trying to create a chat room. In the chat room, I need to send different kind of data about other sections of my app. I use web sockets to that.
To send same data to every client in the room they are inside of, I need to iterate over like, all of the clients. And if like, I have 1000 clients, it could create lag, so messages or other datas could be laggy. To prevent this, I can actually create a map object and set room name, to that key(room name) name I can use set object as value that is having an instance of client object of web socket itself. So thanks to that global variable map object I saved performance of iterating through all clients to just to send to the clients in the same room.
Code for the loop I am currently using to avoid global variable:
ws.communityName = communityName;
// Send to all clients in the same community
webSocket.clients.forEach((client) => {
if(client.communityName === communityName) {
client.send(stringifiedActiveUsers);
// Send only to owner of the community within user's community
if(client.userid === communityOwnerId) {
client.send(suspendedUsersData);
}
}
});
That is my logic on how to send data to all clients in the same room. But I am using global variable, which I shouldnt because it could create memory leak problems etc…
Do you think there is a more efficient solution to this problem? Should I use global variable to save performance?
With THREE.js and GLTFLoader I’m loading models. After the model is loaded I’d like to cache it in a dictionary. The only hold of the model I seem to get in the loader callback. I need to pass the key-string to the loader to save the loaded object in the dictionary.
How do I pass a string to the GLTFLoader callback?
Code:
var modelSources = { car: "resources/models/my-model.glb" };
modelSources.length = 0;
var dictionary = {};
for (var key in modelSources)
{
var value = modelSources[key];
if (typeof(value) === "string")
{
if (value.startsWith("http") || value.startsWith("resources/"))
{
modelSources.length++;
var loader = new GLTFLoader();
loader.load(value, function (group)
{
var obj = group.scene.children[0];
// need key or at least value
dictionary[key] = obj;
});
}
}
}
This is part of a large Tampermonkey userscript i’m writing.
It changes window.visualViewport.scale and use the resize event to show the new value.
In the snippet it doesn’t do anything, but on the page it works (using the debug tools with the device toolbar activated)
// ==UserScript==
// @name provaui
// @namespace http://tampermonkey.net/
// @version 2025-09-20
// @description try to take over the world!
// @author You
// @match https://www.soundcraft.com/ui24-software-demo/mixer.html
// @icon https://www.google.com/s2/favicons?sz=64&domain=soundcraft.com
// @grant none
// ==/UserScript==
let UserScale=1; // current scale variable
let dbgLog="";
function setViewportScale(ViewScale) {
console.log(dbgLog+"setViewportScale Start"); dbgLog=dbgLog+"....";
let NewScale = Number(ViewScale);
CurrentScale=NewScale;
console.log(dbgLog+"NewScale: "+NewScale);
console.log(dbgLog+"Applying new scale");
let vpElement = document.querySelector("meta[name=viewport]");
if (!vpElement){
vpElement=document.createElement('meta');
vpElement.name = "viewport";
document.getElementsByTagName('head')[0].appendChild(vpElement);
}
let content = 'width=device-width, initial-scale=' + NewScale + ', maximum-scale=1.5, minimum-scale=0.5, user-scalable=yes';
vpElement.setAttribute('content', content);
console.log(dbgLog+"VP Scale is "+ window.visualViewport.scale);
dbgLog=dbgLog.replace("....",""); console.log(dbgLog+"setViewportScale End");
}
// =============================================================
function updateSize() {
console.log(dbgLog+"updateSize Start"); dbgLog=dbgLog+"....";
console.log(dbgLog+"VP Scale is "+ window.visualViewport.scale);
dbgLog=dbgLog.replace("....",""); console.log(dbgLog+"updateSize End");
}
// =============================================================
// zoom button
let aDiv = document.createElement ('div');
aDiv.setAttribute ('id', 'ZoomButtonContainer');
aDiv.style = 'position:absolute; top: 12px; left: 10px; z-index: 99998; background-color: orange; display: flex; justify-content: center; align-items: center; padding: 5px;'
aDiv.innerHTML = ''
+ '<button id="bZoom" type="button" style="width:130px !important;">Zoom</button>'
+ '<button id="bLog" type="button" style="width:130px !important;">Log</button>'
;
document.body.appendChild (aDiv);
document.getElementById('bZoom').addEventListener('click', function(event) {
event.stopPropagation();
if (UserScale==1) {
UserScale = 0.7;
}else{
UserScale = 1;
}
setViewportScale(UserScale);
});
document.getElementById('bLog').addEventListener('click', function(event) {
console.log(dbgLog+"Log Button: VP Scale is "+ window.visualViewport.scale);
});
// Add an event listener for window resize
window.addEventListener('resize', updateSize);
(function() {
'use strict';
// Your code here...
})();This same exact code, on the page declared in the userscript header, produces this output:
Log Button: VP Scale is 1
setViewportScale Start
....NewScale: 0.7
....Applying new scale
....VP Scale is 1
setViewportScale End
updateSize Start
....VP Scale is 1
updateSize End
Log Button: VP Scale is 0.7002456784248352
setViewportScale Start
....NewScale: 1
....Applying new scale
....VP Scale is 0.7002456784248352
setViewportScale End
updateSize Start
....VP Scale is 0.7002456784248352
updateSize End
Log Button: VP Scale is 1
As you can see, the resize event still shows the old scale value, even if the scaling works flawlessy.
What am i doing wrong? How can i read the updated scale value?
I’m building a Tamil Spell Checker Chrome Extension. I want to highlight incorrect words in text input fields or on web pages.
I have a list of correct Tamil words in a dictionary (JavaScript array), and I want to compare each word on the page with this list.
Problem: I’m not sure how to efficiently check each word and highlight only the wrong ones in real-time without slowing down the page.
I looped through each word and checked against my dictionary.
Used innerHTML to wrap wrong words in tags with red color.
Issue: This sometimes breaks the page formatting and is slow on large paragraphs.
I’m building a React Native app with Expo Router and NativeWind. Most of my Tailwind classes work fine, but for some reason, the text-white class does not apply on one particular element, while other texts with text-white work correctly.
import '../../global.css'
import {Text, View, Image, ScrollView, ActivityIndicator} from "react-native";
import {images} from "@/constants/images";
import {icons} from "@/constants/icons";
import SearchBar from "@/components/SearchBar";
import { useRouter } from "expo-router";
import useFetch from "@/services/useFetch";
import {fetchMovies} from "@/services/api";
export default function Index() {
const router = useRouter();
const { data: movies,
loading: moviesLoading,
error: moviesError } = useFetch(() => fetchMovies({ query: '' }))
return (
<View className="flex-1 bg-primary">
<Image source={images.bg} className={"absolute w-full z-0"}></Image>
<ScrollView className="flex-1 px-5" showsVerticalScrollIndicator={false} contentContainerStyle={{minHeight: "100%", paddingBottom: 10}}>
<Image source={icons.logo} className="w-12 h-10 mt-20 mb-5 mx-auto"/>
{moviesLoading ? (
<ActivityIndicator
size="large"
color="#0000ff"
className="mt-10 self-center"
/>
) : moviesError ? (
<Text>Error: {moviesError?.message}</Text>
) : (
<View className="flex-1 mt-5">
<SearchBar
onPress={() => router.push("/search")}
placeholder="Search for a movie"
/>
<>
<Text className="text-lg font-bold mt-5 mb-3 text-white">Latest Movies</Text>
</>
</View>
)}
</ScrollView>
</View>
);
}The line in subject is;
<Text className="text-lg font-bold mt-5 mb-3 text-white">Latest Movies</Text>
I couldn’t figure out why it is not working.
I am working on an api project, and I need to gather the contents of the li using my javascript. There can be multiple of these li‘s
My html (just a small section)
<div>
<button id="roomListButton">Click me to see what rooms your in</button>
<ul id="roomsList">
</ul>
</div>
My javascript (not everything)
const roomsListR = document.querySelector('#roomsList');
const delRoomButTEMPLATE = document.createElement('button')
delRoomButTEMPLATE.classList.add('deleteRoomBtn');
delRoomButTEMPLATE.innerHTML = `Leave this room`;
const fetchRoomsAndProcess = async (event) => {
console.log('fetching rooms')
event.preventDefault();
const response = await fetch('/getRooms');
const jsonResponse = await response.json();
const result = jsonResponse.result
// Preparatory clean of the rooms list
roomsListR.innerHTML = ``
for (let i = 5; i != 0; i--) {
let currentRoom = result.splice(0, 1)
let currentRoom2 = currentRoom[0]
let currentRoom3 = currentRoom2['roomname']
console.log('currentRoom3 : ', currentRoom3);
// Now do the stuff with currentRoom
const li = document.createElement('li');
li.innerHTML = `${currentRoom3} ${delRoomButTEMPLATE.outerHTML}`
li.addEventListener('click', (event) => {
console.log('button clicked.')
const parent = event.target.parentNode
console.log(parent.innerHTML)
})
roomsListR.appendChild(li)
if (result.length == 0) {
break
}
}
}
The syntax: li.textContent does not work as it returns the text content of the button element inside it as well. li.innerText for some reason does the same thing. And li.innerHTML includes the tag which is not what I want.
Is there a shortcut for retrieving just the text in the node, not including any tags or anything inside of those tags?
i am new to nextjs and i am trying to build a small website. I am trying to make it multilingual with /it and /el so right now i have a locale folder with all my nested folders and pages. my main page.tsx is now in locale folder so the domain/ redirects me to domain/el as el is the default. but the main issue is that the only route in root is “domain”/Admin and nothing else and here is the problem: if i write “domain”/ssadsdha which means something random word the app gets me to domain/random but it shows me the homepage and not the not-found.tsx i tried using a custom notfound page and the default but still. the weird thing is that the notfound.tsx works if i write domain/random/random etc.. but not in domain/kfndk , I even tried adding a root page.tsx to redirect all users to the /el domain but still doesnt work