Blancer.com Tutorials and projects
Freelance Projects, Design and Programming Tutorials
Category Added in a WPeMatico Campaign
`Hello!
I’m building an application with django and I need to make a clickmap/heatmap to get some statistics from my site.
My problem: almost all the forms are out of date and I don’t want to use Google Analytics or anything like that.
I need a visual map that shows me where users are clicking, the most accessed pages, etc.
Things i tried:
https://django-analytical.readthedocs.io/en/latest/
clickmap.js
https://learn.microsoft.com/en-us/clarity/setup-and-installation/clarity-setup`
I have an array
[
["xl","xxl", "sm"],
["red","white"]
]
and expect outcome what I want:
[
"xl-red",
"xxl-red",
"sm-red",
"xl-white",
"xxl-white",
"sm-white"
]
I have a method in index.js that goes through all the rows in the database and updates the information from a third party api
checkAllApi().then(setTimeout(checkAllApi, 3600000));
This method then checks the UNIX time in the database and should then send a request to replace the last date the data was changed and initialise the data change
let apis = await database.getApi();
if (apis) {
const executePromises = [];
for (const api of apis) {
if (api["next_update"] < Date.now()) {
await database.updateApi(
api["api_id"],
api["update_interval_ms"]
);
let executePromise =
apisControllers[api["api_id"] - 1].execute(api);
executePromises.push(executePromise);
}
}
await Promise.all(executePromises);
Then I send an http request to get an array of objects with data and then do a replacement in the database for each of them.
let allStations = await this.get(api["link"]);
for (const station of allStations) {
await this.executeOne(station, api);
await this.delay(process.env.UPDATE_PING_INTERVAL_MS);
}
And here is my question, how can I make asynchronous code to be added to the microtask stack gradually, so that they are executed not in a row, but in parallel?
To be precise, I need to have requests to each api executed in parallel, but within each class there needs to be a delay for each request, which would not slow down the execution of other requests
Also a little bit of code that’s mentioned in the blocks. Thanks in advance for potential help, I accept even architecture change or npm package installing for that
async delay(ms) {
return new Promise((resolve) => setTimeout(resolve, ms));
}
async get(link, isTriggred = 0, timeout = 10000) {
try {
const result = await axios.get(link, { timeout });
return result.data;
} catch (error) {
if (isTriggred >= 3) {
this.logger.logError(error);
console.log(error);
}
console.log(`Timeout for link "${link}". Reconecting...`);
return await this.get(link, ++isTriggred, timeout);
}
}
I have alredy tried to change it a little, but need some advice and experienced help.
I expect there to be paralell executioning of every apisControllers[api["api_id"] - 1].execute(api);
react native terminal error
When running on Windows, file names are checked against a whitelist to protect against remote code execution attacks. File names may consist only of alphanumeric characters (all languages), periods, dashes, slashes, and underscores.
Loading dependency graph…Failed to construct transformer: Error: error:0308010C:digital envelope routines::unsupported
I want to have the first element opened by default, so the layout is full width. But the element needs to close when hovering over one of the other elements and i cant get it to do that. I tried to work with removeClass() but im not fit with JS.
I can also only use pure JS.
Here is the jsfiddle: https://jsfiddle.net/w4Lbf9h3/
var elems = document.querySelectorAll(".not-active");
[].forEach.call(elems, function(el) {
el.classList.remove("active");
});/* Allgemeine Styles */
.header-font{font-size:32px!important;}
/*Collaborate Styles*/
.collab-item
{
position:relative;
overflow:hidden;
display: inline-block;
width: 25%;
height: 419px;
background-color: green;
margin-right: 10px;
transition: all 0.4s ease;
vertical-align: top;
}
.collab-item:hover
{
width: 40%;
height: 482px;
margin-right: 1%;
}
.collab-item:hover .info-hover{
display:inline-block;
}
.collab-container{
color:black!important;
}
.homepage-content{text-align:left;
padding:10px;
}
.homepage-title{font-size:28px;
font-weight:bold;
}
.homepage-title p{line-height:110%!important;color:black!important;}
.info-hover{
position:absolute;
bottom:0;
width:100%;
padding:15px;
display:none; }
.info-hover p{color:black!important;}
.participate{background-color:red;}
.explore{background-color:green}
.submit{background-color:green;}
.active{width: 40%;
height: 482px;
margin-right: 1%;}<div class="collab-container">
<div class="collab-item participate active">
<div class="homepage-content">
<div class="homepage-title">
<p>Participate in<br />
</p>
</div>
<div class="info-hover">
<p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et.</p>
</div>
</div>
</div>
<div class="collab-item explore not-active">
<div class="homepage-content">
<div class="homepage-title">
<p>Explore<br />
Co-Creation and<br />
Talent Programs</p>
</div>
<div class="info-hover">
<p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et.</p>
</div>
</div>
</div>
<div class="collab-item submit">
<div class="homepage-content">
<div class="homepage-title">
<p>Become part of a<br />
global network</p>
</div>
<div class="info-hover">
<p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et.</p>
</div>
</div>
</div>
</div>I have tried the standard html <input type=color> element color picker.
It creates a basic color picker which is fine but it will apply the color selected to the form element specified in the input event handler function js code that we write.
This means that for example if you specify button type for target in the function code, it will apply the selecetd color to all the buttons. But I want to apply the selected color only to a specific button that I click.
In the color picker input event handler function I have tried addEventListener("click") to identify the button clicked as target, but I could not get it to work. I keep getting CAN NOT POST ‘/’ message on the browser screen.
This message may be caused by something else that is unrelated to the color picker. It looks like I need to figure out why I am getting this message, first. To isolate the problem, I have removed color picker and I only displayed an alert message when I click the button.
The alert message is displayed but then when I click OK on the alert box, I get CAN NOT POST ‘/’ message. Any help will be appreciated.
With a code such as
<Layout pageName={pageName} rightMenu={rightMenu}>
<OrganizationDashboardMembersMetrics
layoutCallback={layoutCallback}
/>
</Layout>
Currently, I’ve got the following to implement the callback
const [pageName, setPageName] = useState<string>("");
const [rightMenu, setRightMenu] = useState<JSX.Element>(<></>);
const layoutCallback = useCallback(
({ pageName = "", rightMenu = <></> }) => {
setPageName(pageName);
setRightMenu(rightMenu);
},
[pageName, rightMenu]
);
But I tried to use simple function callback, or even to strip the callback itself and using the setPageName and setRightMenu directly from the child component. One detail that may be useful is I use useQuery (Apollo) and need the API data to set those data in the layout; it’s dynamic.
It looks like this inside the child component
const pageName: string = `${firstName} ${lastName}`;
const rightMenu: JSX.Element = (
<React.Fragment>
<IconButton
color="inherit"
aria-label="Employee metrics & reports"
onClick={() => {
window.location.assign(
`/organization/dashboard/members/${id}/metrics`
);
}}
>
<BarChartIcon />
</IconButton>
</React.Fragment>
);
layoutCallback({ pageName, rightMenu });
Nothing seems to work, it re-render infinitely the child component whatever strategy I use. How would you approach this issue? I want to have a layout that gets data loaded from a child component without any need for re-rendering the child itself.
Also, I noticed that when using simple text (layout name) it doesn’t reload infinitely, but once I have JSX.Element involved (right menu) it breaks.
Details:
Function: getObject(key) within a SimpleS3Handler class interacts with an S3Client to retrieve an object.
Testing Framework: Using Jest with aws-sdk-client-mock to mock S3 interactions.
Mocked Response: Providing a realistic response with a Body property containing JSON data.
Error: Test fails with the mentioned error, indicating the response object returned by getObject is undefined.
//controller
const { S3Client, GetObjectCommand } = require('@aws-sdk/client-s3');
class SimpleS3Handler {
constructor(region, bucket) {
this.bucket = bucket;
this.s3client = new S3Client({ region });
}
async getObject(key) {
const command = new GetObjectCommand({
Bucket: this.bucket,
Key: key,
});
const data = await this.s3client.send(command);
return data;
}
}
module.exports = SimpleS3Handler;
//testcase
const { mockClient } = require('aws-sdk-client-mock');
const { expect } = require('chai');
const { S3Client, GetObjectCommand } = require('@aws-sdk/client-s3');
const S3Handler = require('../../src/lib/simpleS3Handler');
const config = require('../../src/config');
const { bucketName, region } = config.services.s3;
const s3Mock = mockClient(S3Client);
describe('s3 handler', () => {
beforeEach(() => {
s3Mock.reset();
});
it('fetches JSON object from S3 and parses it', async () => {
const keyName = 'getData';
const expectedData = { dummy: 'data' };
// Mock S3 response with a realistic Body property
s3Mock.on(GetObjectCommand).resolves({
...expectedData,
Body: JSON.stringify(expectedData)
});
console.log(">>>>>><<<")
const S3HandlerInstance = new S3Handler(region, bucketName);
const response = await S3HandlerInstance.getObject(keyName);
expect(response.Body).to.equal(JSON.stringify(expectedData));
});
});
//ERROR
1 failing
1) s3 handler
fetches JSON object from S3 and parses it:
TypeError: Cannot read properties of undefined (reading 'Body')
UNIT TEST FOR GETOBJECT WITH A ERROR TEST CASE
I’m using the ImgUr NPM library to upload my images.
After that I would like to add the uploaded images to an album, say ‘HelloWorld’.
Here is my code:
export async function uploadToImgUr(files: Buffer[]): Promise<string[]> {
const uploadPromises = files.map(async (file) => {
const formData = new FormData();
formData.append('image', file);
const response = await client.upload({
image: file,
type: 'stream',
});
// Add the uploaded image to the album, this is my guess, but not working
const resp = await client.getAlbum(brand);
resp.data.images.push(response.data);
return response.data.link;
});
return Promise.all(uploadPromises);
}
How can I do it?
As the title suggests, does anyone know if deno resolves symlinks correctly while compiling a project to a supported platform :
deno compile -A --target x86_64-unknown-linux-gnu --output ./build/ ./build/gen/main.ts
main.ts imports some symlinked files.
Any knowledge on the topic would be helpful, thanks.
https://monopo.london/
Please help me implement scroll effect for this site.
If you look closely, you can see that the scroll is moving on its own.
enter image description here
please help fast.
after running the file it shows error, which should be not .
in javascript, alert is not working, it is showing not defined error. what to do please help fast. please provide the answer accurately.
I am using the latest Nextjs 13 Version (13.4.12) with React 18.2.0. It’s a clean Nextjs project with the new app directory and Tailwind. If I’m using any of the radix-ui primitives I getting the
app-index.js:32 Warning: Prop `aria-controls` did not match. Server: "radix-:Rlmcq:" Client: "radix-:R2mpj9:
For references image is attached
How to fix this issue?
Everythings added properly ,
yet i am getting the error “Cannot read properties of undefined (reading ‘_parseFont’)” !!!
do i need to change the version of chart.js ?
import React, { useEffect } from ‘react’;
const Chart = ({ data }) => {
useEffect(() => {
const loadScript = (url, callback) => {
const script = document.createElement('script');
script.type = 'text/javascript';
script.src = url;
script.async = true;
script.onload = callback;
document.head.appendChild(script);
};
```
loadScript('https://cdn.jsdelivr.net/npm/[email protected]/dist/chart.min.js', () => {
loadScript('https://cdn.jsdelivr.net/npm/[email protected]', () => {
if (window.Chart && window.Chart.controllers && window.Chart.controllers.treemap) {
const canvas = document.getElementById(‘Canvas’);
const ctx = canvas.getContext(‘2d’);
const config = {
type: 'treemap',
data: {
datasets: [
{
data: data.map((segment) => ({
v: segment.count,
x: segment.a,
y: segment.b,
z: segment.c,
})),
backgroundColor: data.map((segment) => getBackgroundColor(segment.segment)),
labels: data.map((segment) => `${segment.segment} - ${segment.count}`),
},
],
},
options: {
onClick: (event, elements) => {
if (elements && elements.length > 0) {
const clickedIndex = elements[0].index;
console.log('Item clicked', clickedIndex);
}
},
maintainAspectRatio: false,
},
};
new window.Chart(ctx, config); // Note the use of window.Chart
}
});
});
}, [data]);
return <canvas id="canvas" width="800" height="600"></canvas>;
};
export default Chart;
So i made a carousel that show cards of 3 cards subscription. How to move selected card to the middle of the screen automatically. And if i the select card the first or the third, it will show just fully and no need to be in the middle?
Currently if I click the 6-month subs card, it got selected but not fully show up. I want to make it smoothly move to the left so it the card shows up fully like the second picture. I tried the translateX() on CSS but it didn’t make my second selected card straight in the middle.
I’m not sure how to implement this? Please help. Thank you!
import React, {useState} from 'react';
import {default as style} from './SubscriptionCard.scss.json';
import './SubscriptionCard.scss';
import {cl} from 'lincd/lib/utils/ClassNames';
interface SubscriptionCardProps {
review?: string;
month: number;
monthlyPrice: number;
totalPrice: number;
discount?: number;
isSelected: boolean;
onSelect?;
}
const SubscriptionCard = ({
review,
month,
monthlyPrice,
totalPrice,
discount,
isSelected,
onSelect,
}: SubscriptionCardProps) => {
return (
<div
className={cl(style.card, isSelected && style.selected)}
onClick={onSelect}
>
{isSelected && (
<img
className={style.checkmark}
src="images/checkmark_gold.svg"
alt="icon"
/>
)}
{review && <p className={style.review}>{review}</p>}
<div className={style.text}>
<p className={style.priceTitle}>{month} Month</p>
<div className={style.priceContainer}>
<p className={style.monthlyPrice}>${monthlyPrice}/mo</p>
<p className={style.totalPrice}>${totalPrice} total</p>
</div>
{discount && <p className={style.discount}>Save {discount}%</p>}
</div>
</div>
);
};
export default SubscriptionCard;
import CircularProgress from '@mui/material/CircularProgress';
import './UpgradeAccountAction.scss';
import {default as style} from './UpgradeAccountAction.scss.json';
import ActionSheet from './ui/forms/ActionSheet';
import {Button} from './ui/forms/Button';
import {Typography} from './ui/forms/Typography';
import {Server} from 'lincd-server-utils/lib/utils/Server';
import {packageName} from '../package';
import useState from 'react-usestateref';
import {useAuth} from 'lincd-auth/lib/hooks/useAuth';
import {FeatureCounter} from 'lincd-dating/lib/shapes/FeatureCounter';
import {on} from 'events';
import SubscriptionCard from './SubscriptionCard';
import Divider from './Divider';
const SUBSCRIPTION_DATA = [
{
id: 0,
month: 1,
monthlyPrice: 24.99,
totalPrice: 24.99,
},
{
id: 1,
month: 6,
monthlyPrice: 12.5,
totalPrice: 74.99,
discount: 50,
review: 'Popular',
},
{
id: 2,
month: 12,
monthlyPrice: 8.33,
totalPrice: 99.99,
discount: 67,
review: 'Best value',
},
];
interface UpgradeAccountActionProps {
isOpen: boolean;
onUpgraded: () => Promise<boolean>;
onClose: () => void;
}
export const UpgradeAccountAction = ({
isOpen,
onClose,
onUpgraded,
}: UpgradeAccountActionProps) => {
const defaultSelectedCard = SUBSCRIPTION_DATA[0];
const [selectedCard, setSelectedCard] = useState(defaultSelectedCard);
const auth = useAuth();
console.log('selectedCard', selectedCard);
return (
<ActionSheet isOpen={isOpen} onClose={onClose}>
<div className={style.pageContainer}>
<div className={style.header}>
<div className={style.iconContainer}>
<img src="images/sp-premium.svg" alt="sp premium icon" />
</div>
<h1>Spiritual Premium</h1>
</div>
<div className={style.contentContainer}>
<h2>
See Who Lies You and match with them instantly with Spiritual
Premium™️.
</h2>
<div className={style.carouselContainer}>
<p>Select a plan</p>
<div className={style.cardCarousel}>
{SUBSCRIPTION_DATA.map((data, i) => {
return (
<SubscriptionCard
isSelected={selectedCard.id === i}
onSelect={() => setSelectedCard(SUBSCRIPTION_DATA[i])}
month={data.month}
monthlyPrice={data.monthlyPrice}
totalPrice={data.totalPrice}
discount={data.discount}
review={data.review}
/>
);
})}
</div>
</div>
<Divider text="or" />
<div className={style.benefits}>
<h6>Included with Spiritual Premium™️</h6>
<ul>
<li>Unlimited Likes</li>
<li>See Who Likes You</li>
<li>1 Free Boost per month</li>
<li>5 Free Quantum Likes per week</li>
<li>
<p>Passport</p>
<p>Match and chat with people anywhere in the world.</p>
</li>
<li>
<p>Top Picks</p>
<p>Browse through a daily curated selection of profile.</p>
</li>
<li>
<p>Control Your Profile </p>
<p>Only show what you want them to know.</p>
</li>
<li>
<p>Control Who Sees You</p>
<p>Manage who you’re seen by.</p>
</li>
<li>
<p>Control Who You See</p>
<p>Choose the type of people you want to connect with.</p>
</li>
<li>Hide Ads</li>
</ul>
</div>
</div>
<footer className={style.footer}>
<div className={style.footerWrapper}>
<p className={style.footerWrapper__top}>
By tapping Continue, you will be charged, your subscription will
auto-renew for the same price and package length until you cancel
via App Store settings, and you agree to our <a href="#">Terms</a>
.
</p>
{/* fullwidth */}
{/* <Button fullWidth={true} className={style.continueBtn}>
Continue
</Button> */}
<div className={style.footerWrapper__bottom}>
<div className={style.footerWrapper__left}>
<img src="images/sp-premium.svg" alt="sp premium icon" />
<div className={style.text}>
<p>{selectedCard.month} Month</p>
<p>${selectedCard.totalPrice} total</p>
</div>
</div>
<Button
className={style.footerWrapper__right}
onClick={onUpgraded}
>
Continue
</Button>
</div>
</div>
</footer>
</div>
</ActionSheet>
);
};