Blancer.com Tutorials and projects
Freelance Projects, Design and Programming Tutorials
Category Added in a WPeMatico Campaign
Hello guys i am working on a google chrome extension and i want to show an alert when the user change the current tab here is my code:
let ischecked=togg.checked
function change_ischecked() {
ischecked = togg.checked;
if (ischecked) {
alert("Checked");
} else {
console.log("Unchecked!");
}
}
togg.addEventListener("change", change_ischecked);```
I currently have a react hook that will return me location search data from history, but I’m running into an issue where sometimes history is not available because it is being called in a modal
What would be the best way to conditional call hooks when it’s arguments (history.location.search or history.listen) can possibly be null?
the main warning I’m running into when trying to come up with a solution is
React Hook "useSyncExternalStore" is called conditionally. React Hooks must be called in the exact same order in every component render.
export default function useQueryParams() {
const history = useHistory();
const getSearch = useCallback(() => history.location.search, [history]);
const search = useSyncExternalStore(history.listen, getSearch, getSearch);
return queryParams(
!search ? null : search,
);
}
Thank you in advance!
Problem:
My Node.js sync server logs show successful product updates in WooCommerce (HTTP 200 responses), but when checking the WooCommerce admin panel:
Some price/name changes aren’t actually saved
Some Poducts are created and then saved differently?
Products occasionally revert to previous states
No errors are logged despite the changes not persisting
Evidence from Logs:
2025-04-04T08:57:53.552Z [INFO]: Updated product O-GOSGP6XXZ05 (ID: 58597)
2025-04-04T08:57:54.018Z [DEBUG]: Updated product: Netzbuchsen Lötarbeiten (ID: 62082)
2025-04-04T08:57:54.871Z [INFO]: Updated product O-MOSMGXXXG4 (ID: 31218)
2025-04-04T08:57:55.391Z [DEBUG]: Updated product: Austausch Display-LCD/LED-Einheit (ID: 30612)
But these changes don’t appear in WooCommerce’s admin UI
Current Sync Flow:
Heres the part of the codes that correspond to the syncing process:
Core Synchronization Logic (from syncService.js):
async function syncProducts() {
try {
// 1. Fetch products from both sources
const sqlProducts = await fetchProducts(); // From SQL
const wooProducts = await fetchWooCommerceProducts(); // From WooCommerce
// 2. Compare products
const { newProducts, updatedProducts } = compareProducts(sqlProducts, wooProducts);
// 3. Process new products
for (const product of newProducts) {
await createWooCommerceProduct({
name: `${product.device_name} - ${product.repair_type}`,
sku: product.sku,
regular_price: product.price.toString(),
stock_quantity: 10
});
}
// 4. Process updates
for (const product of updatedProducts) {
await updateWooCommerceProduct(product.wooId, {
name: product.repair_type,
regular_price: product.price.toString()
});
}
} catch (err) {
logger.error('Sync failed', {
error: err.message,
response: err.response?.data
});
}
}
WooCommerce API Client (from wooService.js):
const wooCommerce = axios.create({
baseURL: `${process.env.WOOCOMMERCE_URL}/wp-json/wc/v3`,
auth: {
username: process.env.WOOCOMMERCE_CONSUMER_KEY,
password: process.env.WOOCOMMERCE_CONSUMER_SECRET
}
});
// Rate limited to 90 requests/minute
const limiter = new Bottleneck({
minTime: 60000 / 90
});
async function updateWooCommerceProduct(productId, product) {
const response = await limiter.schedule(() =>
wooCommerce.put(`/products/${productId}`, product)
);
return response.data;
}
Tried looking at the SKU format to check if it fits out existing WooCommerce format. Seemed fine, also checked the logic of the comparision between SKUS…. nothing was wrong, it detected the updated devices as well as the new ones easily. I was expecting a simple way of comparing the products, then just the code just using a simple ‘PUT’ Request with the new data to the SKU….
I am trying to integrate jbrowse into an existing platform. The current platform provides me with values such as the bin size, bpperpixel and start and end position. Is there a way to adjust jbrowse scale to match this?
i am currently doing this.
view?.setDisplayedRegions([
{
assemblyName: assembly.name,
refName: props?.location?.chromosome.name,
start: props.location.selectedInterval[0] ?? scaleView.start,
end: props.location.selectedInterval[1] ?? scaleView.end,
},
])
view.setScaleFactor(0.7) // <------ Not sure how to calculate the correct scale factor here
view?.setNewView?.(bpPerPx, scaleView.start / scaleView.bpPerPixel);
Any help would be highly appreciated.
I want to generate a map url(google maps or any good alternative for it) with a good number of coordinates (latitude/longitude) entered from the client side using javascript express api.
I tried Leaflet but it did not work very well.
I’m just getting started with web development and I want to find an internship in Toronto as a junior web developer. Where should I look for internships, and how can I prepare myself to increase my chances of getting one?
I’m trying to understand why some of my JavaScript functions return undefined instead of the expected result.
Could someone explain common reasons this happens in simple terms?
I want to use the follwing script to print a PDF file directly in my web application:
const blob = new Blob([fullArray], { type: 'application/pdf' });
const url = URL.createObjectURL(blob);
// printJS(url); // same issue https://printjs.crabbly.com/
var iframe = this._printiframe;
if (!this._printiframe) {
iframe = this._printiframe = document.createElement('iframe');
document.body.appendChild(iframe);
iframe.style.display = 'none';
iframe.onload = function () {
setTimeout(function () {
iframe.focus();
iframe.contentWindow.print();
}, 250);
};
}
iframe.src = url;
The code works perfectly fine with Edge, but Chrome (latest version) appears to have an issue. When I run the code in Chrome, the print dialog opens as expected but the preview loads forever.
Now when I set a breakpoint after the object url gets created and open that url in a separate window and then continue the code, the preview gets loaded almost immediately. I assume this is a bug in Chrome and the object url needs to be “touched” somehow. Is there some workaround for this issue?
I have spent hours on this with no success. I’ve been googling and trying various javascript options but I can’t seem to get any to work?? – I’m probably being a total muppet.
I’m using animate.css and this works great, I’m able to apply to this to various CSS elements and everything works and animates fine.
The bit I can’t seem to get my head around is how to use javascript in combination with animate.css to delay the animation until it comes into view. At present all the animations fire off when the page loads.
Is there a definitive method to use javascript with animate.css? – All I need is something that triggers the CSS animation when it comes into view.
I’ve followed the various options on Stack Overflow without success. I hope someone can help.
Thanks in advance, kind regards
Brian
How exactly was this transaction made?
Number 1,2,3 are caller owned. Number 4 is not.
if you check wallet 3 tx history it shows as incoming transaction from wallet 4
wallet 4 tx history looks like outgoing
tx history full
wallet 3 history
wallet 4 history
I think the code is conflicting with each other if anyone could help that would be great. I ideally would like to keep my hover effect so that when I click more details it pulls up the pop up which I will be adding a slide show onto it to display my work.
let popup = document.getElementById("popup");
function openPopup() {
popup.classList.add("open-popup");
}
function closePopup() {
popup.classList.remove("open-popup");
}
let popup2 = document.getElementById("popup2");
function openPopup() {
popup2.classList.add("open-popup2");
}
function closePopup() {
popup2.classList.remove("open-popup2");
}.popup {
width: 60%;
background-color: #fff;
border-radius: 15px;
position: fixed;
top: 0%;
left: 50%;
transform: translate(-50%, -50%) scale(0.1);
text-align: center;
padding: 0 30px 60px;
color: #333;
visibility: hidden;
z-index: 9002;
box-shadow: 3px 3px 3px 3px #333;
border: solid 3px #333;
transition: transform 0.4s, top 0.4s;
}
.open-popup {
visibility: visible;
top: 50vh;
transform: translate(-50%, -50%) scale(1);
}
.popup2 {
width: 60%;
background-color: #fff;
border-radius: 15px;
position: fixed;
top: 0%;
left: 50%;
transform: translate(-50%, -50%) scale(0.1);
text-align: center;
padding: 0 30px 60px;
color: #333;
visibility: hidden;
z-index: 9002;
box-shadow: 3px 3px 3px 3px #333;
border: solid 3px #333;
transition: transform 0.4s, top 0.4s;
}
.open-popup2 {
visibility: visible;
top: 50vh;
transform: translate(-50%, -50%) scale(1);
}<div class="section group">
<div class="col span_4_of_12">
<div class="item-1">
<img
src="item-1-2000x1333.jpg"
alt="RYA guide to risk assessment text" />
<div class="overlay"></div>
<div class="overlay-content">
<h4>RYA part 1</h4>
<p>A technical problem</p>
<button class="one" type="submit" onclick="openPopup()">
More details
</button>
</div>
</div>
</div>
<!-- pop up -->
<div class="popup" id="popup">
<h3>RYA part 1 - A technical issue</h3>
<!-- image slider-->
<!-- description -->
<p>In this project I was tasked with fixing a project</p>
<button class="one" type="button" onclick="closePopup()">back</button>
</div>
<div class="col span_4_of_12">
<div class="item-1">
<img src="RYA-UAT-2000X1333.jpg" alt="RYA new website" />
<div class="overlay"></div>
<div class="overlay-content">
<h4>RYA part 2</h4>
<p>An overhaul</p>
<button class="one" type="submit" onclick="openPopup2()">
More details
</button>
</div>
</div>
</div>
<div class="popup2" id="popup2">
<h3>RYA part 2 - A new website</h3>
<!-- image slider-->
<!-- description -->
<p>In this project I was tasked with fixing a project</p>
<button class="one" type="button" onclick="closePopup2()">back</button>
</div>
<div class="col span_4_of_12">
<a href=""></a>
<div class="item-1">
<img src="RYA-UAT-2000X1333.jpg" alt="RYA new website" />
<div class="overlay"></div>
<div class="overlay-content">
<h4>RYA part 2</h4>
<p>An overhaul</p>
<button class="one" type="submit">More details</button>
</div>
</div>
</div>
<div class="popup" id="popup">
<h3>RYA part 2 - A new website</h3>
<!-- image slider-->
<!-- description -->
<p>In this project I was tasked with fixing a project</p>
<button class="one" type="button">back</button>
</div>
</div>I tried redoing it from a tutorial instead of copying and pasting but I can’t seem to understand why it is conflicting.
I’m developing a web-based map interface using a sprite sheet to render various elements, as seen in my project https://bambitp.github.io/StraTAGy/ (source: https://github.com/BambiTP/StraTAGy). The intended design is to have sprites drawn from a PNG file. However, when I open the project in Brave, the areas where the sprite should be appear as black squares.
Here are some screenshots for reference:
Brave (Incorrect Rendering): https://i.sstatic.net/53VdWlNH.png
Firefox/Chrome (Correct Rendering): https://i.sstatic.net/wSJK61Y8.png
What I’ve Checked/Tried:
The sprite sheet image loads without errors (confirmed via the network panel).
No errors are reported in the browser’s console.
The issue is isolated to Brave; Firefox and Chrome render the sprite sheet as expected.
Questions:
Has anyone encountered Brave rendering issues where sprite images are replaced with black squares?
Could this be related to Brave’s handling of hardware acceleration or another graphics processing quirk?
What steps can I take to diagnose or work around this problem?
Any insights or suggestions would be greatly appreciated!
I’m creating a reusable Switch component using Material UI (MUI) and react-hook-form. I want the component to:
Be fully controlled using react-hook-form’s Controller.
Accept dynamic props.
Here’s the current implementation:
import { useFormContext, Controller } from "react-hook-form";
// @mui
import { Switch, FormControlLabel } from "@mui/material";
import { JSX } from "@emotion/react/jsx-dev-runtime";
// ----------------------------------------------------------------------
export function RHFSwitch({ name, disabled, ...other }: any): JSX.Element {
const { control } = useFormContext();
return (
<FormControlLabel
control={
<Controller
name={name}
control={control}
render={({ field }) => (
<Switch disabled={disabled} {...field} checked={field.value} />
)}
{...other}
/>
}
{...other}
/>
);
}
Does someone know how to tirgger a JavaScript in an HTML to only load when prompted?
The only thing I came up with is the example below.
Adding the JavaScript like this into HTML:
<div class="unit1">
<style type="text/script">
Some script stuff.
</style>
</div>
And to load the script, rename the “style” tag in the “unit1” div to “script”:
<div class="unit1">
<script>
Some script stuff.
</script>
</div>
I have created a redshift API that my front-end users can use to query the database. For security reasons, The system adds the word Select into before the query returned by user so only select statements can be used, For normal queries it works fine. but since im creating dynamic queries to insert millions of data. My query can be generated as follows.
` ${selectString}
FROM (
SELECT DISTINCT jsonb_array_elements('[${chunk}]'::jsonb) AS obj
) cd
WHERE NOT EXISTS (
SELECT 1
FROM lists_data
WHERE
${whereString}
AND list_id = '${listId}'
AND deleted is false
)`
Similarly i have cases for insert queries as well. where i receive special charecters in different values in the query and it breaks the syntax of my overall query. For example if i get the following value for the above query:
const chunk = [
{
DistributorProductID: "TEST 20'S? OK",
DistributorID: "1000758"
},
{
DistributorProductID: "X\Y\Z 10"",
DistributorID: "1000759"
}
];
Now in the above example, When it will parse the value “TEST 20’S? OK” the query will break because of the single quote, Now one approach is that i can escape the single quote, but i have millions of values, I dont think this is the only approach that i have to escape each value manually. Im handling the exact same situation in postgresql by using dollar signs $$ .. i enclose my query in $$ $$ and no special charecters bother me, but they dont work in redshift. Any help or approach would be appriciated as to how can i encapsulate my string or make it as string literals so i dont have to worry about special charecters in my values.
Btw im using javascript on frontend.
I have tried escaping them for now, but i want a generic and more optimised approach.