Blancer.com Tutorials and projects
Freelance Projects, Design and Programming Tutorials
Category Added in a WPeMatico Campaign
I have Cypress 13.1.0 integrated with Allure (allure-cypress v.3.0.4).
Each test step in the generated html report is displayed truncated to 132 chars maximum (see attachment).
Is there a way to display full response and request body in each step?
Tried to play with cy logs and put the request/response body as an attachment. No luck.
I am getting this error – ” Error: Only plain objects, and a few built-ins, can be passed to Client Components from Server Components. Classes or null prototypes are not supported.”
This is my signup.tsx –
'use client';
import { Button } from '@/components/ui/button';
import {
Form,
FormControl,
FormDescription,
FormField,
FormItem,
FormMessage,
} from '@/components/ui/form';
import { Input } from '@/components/ui/input';
import { zodResolver } from '@hookform/resolvers/zod';
import clsx from 'clsx';
import Image from 'next/image';
import Link from 'next/link';
import { useRouter, useSearchParams } from 'next/navigation';
import React, { useMemo, useState } from 'react';
import { useForm } from 'react-hook-form';
import { z } from 'zod';
import Logo from '../../../../public/cypresslogo.svg';
import Loader from '@/components/global/Loader';
import { Alert, AlertDescription, AlertTitle } from '@/components/ui/alert';
import { MailCheck } from 'lucide-react';
import { FormSchema } from '@/lib/types';
import { actionSignUpUser } from '@/lib/server-actions/auth-actions';
const SignUpFormSchema = z
.object({
email: z.string().describe('Email').email({ message: 'Invalid Email' }),
password: z
.string()
.describe('Password')
.min(6, 'Password must be minimum 6 characters'),
confirmPassword: z
.string()
.describe('Confirm Password')
.min(6, 'Password must be minimum 6 characters'),
})
.refine((data) => data.password === data.confirmPassword, {
message: "Passwords don't match.",
path: ['confirmPassword'],
});
const Signup = () => {
const router = useRouter();
const searchParams = useSearchParams();
const [submitError, setSubmitError] = useState('');
const [confirmation, setConfirmation] = useState(false);
const codeExchangeError = useMemo(() => {
if (!searchParams) return '';
return searchParams.get('error_description');
}, [searchParams]);
const confirmationAndErrorStyles = useMemo(
() =>
clsx('bg-primary', {
'bg-red-500/10': codeExchangeError,
'border-red-500/50': codeExchangeError,
'text-red-700': codeExchangeError,
}),
[codeExchangeError]
);
const form = useForm<z.infer<typeof SignUpFormSchema>>({
mode: 'onChange',
resolver: zodResolver(SignUpFormSchema),
defaultValues: { email: '', password: '', confirmPassword: '' },
});
const isLoading = form.formState.isSubmitting;
const onSubmit = async ({ email, password }: z.infer<typeof FormSchema>) => {
const { error } = await actionSignUpUser({ email, password });
if (error) {
setSubmitError(error.message);
form.reset();
return;
}
setConfirmation(true);
};
return (
<Form {...form}>
<form
onChange={() => {
if (submitError) setSubmitError('');
}}
onSubmit={form.handleSubmit(onSubmit)}
className="w-full sm:justify-center sm:w-[400px]
space-y-6 flex
flex-col
"
>
<Link
href="/"
className="
w-full
flex
justify-left
items-center"
>
<Image
src={Logo}
alt="cypress Logo"
width={50}
height={50}
/>
<span
className="font-semibold
dark:text-white text-4xl first-letter:ml-2"
>
cypress.
</span>
</Link>
<FormDescription
className="
text-foreground/60"
>
An all-In-One Collaboration and Productivity Platform
</FormDescription>
{!confirmation && !codeExchangeError && (
<>
<FormField
disabled={isLoading}
control={form.control}
name="email"
render={({ field }) => (
<FormItem>
<FormControl>
<Input
type="email"
placeholder="Email"
{...field}
/>
</FormControl>
<FormMessage />
</FormItem>
)}
/>
<FormField
disabled={isLoading}
control={form.control}
name="password"
render={({ field }) => (
<FormItem>
<FormControl>
<Input
type="password"
placeholder="Password"
{...field}
/>
</FormControl>
<FormMessage />
</FormItem>
)}
/>
<FormField
disabled={isLoading}
control={form.control}
name="confirmPassword"
render={({ field }) => (
<FormItem>
<FormControl>
<Input
type="password"
placeholder="Confirm Password"
{...field}
/>
</FormControl>
<FormMessage />
</FormItem>
)}
/>
<Button
type="submit"
className="w-full p-6"
disabled={isLoading}
>
{!isLoading ? 'Create Account' : <Loader />}
</Button>
</>
)}
{submitError && <FormMessage>{submitError}</FormMessage>}
<span className="self-container">
Already have an account?{' '}
<Link
href="/login"
className="text-primary"
>
Login
</Link>
</span>
{(confirmation || codeExchangeError) && (
<>
<Alert className={confirmationAndErrorStyles}>
{!codeExchangeError && <MailCheck className="h-4 w-4" />}
<AlertTitle>
{codeExchangeError ? 'Invalid Link' : 'Check your email.'}
</AlertTitle>
<AlertDescription>
{codeExchangeError || 'An email confirmation has been sent.'}
</AlertDescription>
</Alert>
</>
)}
</form>
</Form>
);
};
export default Signup;
I expect it to run normally and for all of it to work with absolutly no errors. If you need any more of my code just ask
I have 2 mp3 files i want to switch between based on a checkbox called beat.
But i can’t get it to work, here is my javascript and html.
HTML:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>RapGPT</title>
<link rel="stylesheet" href="{{ url_for('static', filename='style.css') }}">
<link rel="icon" href="./favicon.ico" type="image/x-icon">
</head>
<body>
<main class="main-content">
<h1 class="hallo">RapGPT</h1>
<div class="top">
<!-- <img src="{{ url_for('static', filename='recordicon.png') }}" id="recordButton" class="record-icon"> -->
<p id="status" class="status-text">Not Recording</p>
<button id="recordButton" class="record-btn">
<p>Record</p>
</button>
</div>
<div class="middle">
<label for="beatcb" class="checkbox-label">
<input type="checkbox" id="beatcb"> Beat
</label>
<label for="clonecb" class="checkbox-label">
<input type="checkbox" id="clonecb"> Clone
</label>
</div>
<div class="bottom">
<audio controls id="audioControls" preload="auto">
<source src="{{ url_for('static', filename='uploads/final_audio.mp3') }}" type="audio/mp3" id="srcAudio">
</audio>
</div>
</main>
<script src="{{ url_for('static', filename='index.js') }}"></script>
</body>
</html>
Javascript:
const recordButton = document.getElementById('recordButton');
const beatButton = document.getElementById('beatcb');
const cloneButton = document.getElementById('clonecb');
const sourceAudio = document.getElementById('srcAudio');
const status = document.getElementById('status');
let mediaRecorder;
let audioChunks = [];
let recording = false
recordButton.addEventListener('click', () => {
if (recording === false) {
recording = true
startRecording();
} else {
recording = false
stopRecording();
}
});
beatButton.addEventListener('click', () => {
if (beatButton.checked) {
sourceAudio.src = "{{ url_for('static', filename='uploads/merged_audio.mp3') }}";
console.log("Playing merged audio (beat)");
} else {
sourceAudio.src = "{{ url_for('static', filename='uploads/final_audio.mp3') }}";
console.log("Playing final audio (no beat)");
}
sourceAudio.load();
sourceAudio.play();
});
function startRecording() {
navigator.mediaDevices.getUserMedia({ audio: true })
.then(stream => {
mediaRecorder = new MediaRecorder(stream);
mediaRecorder.start();
recordButton.textContent = "Stop Recording";
status.textContent = "Recording...";
mediaRecorder.ondataavailable = event => {
audioChunks.push(event.data);
};
mediaRecorder.onstop = () => {
const audioBlob = new Blob(audioChunks, { type: 'audio/webm' });
const formData = new FormData();
formData.append('audio', audioBlob, 'recording.webm');
fetch('/save', {
method: 'POST',
body: formData
})
.then(response => response.text())
.then(data => {
status.textContent = "Generating rap...";
console.log("Audio saved:", data);
})
.catch(error => {
status.textContent = "Error saving recording.";
console.error("Error:", error);
});
audioChunks = [];
};
})
.catch(error => {
console.error("Error accessing microphone:", error);
});
}
function stopRecording() {
mediaRecorder.stop();
recordButton.textContent = "Start Recording";
status.textContent = "Processing...";
}
In the JavaScript code i have tried making a listener but it doesn’t switch to the merged audio. I have looked in the developer tools when i run it and it says in the code that it is switched to merged audio but not in network. And this is a flask app.
I am trying to display an iframe that resizes based on its content. As of now I am just using an interval to test the scrollHeight of the iframe, however it always comes back as 150 even though there is a scrollbar.
Running the following in the developer tools outputs 150 (when the scroll content is actually around 1200px):
document.querySelector('iframe').contentWindow.document.body.scrollHeight;
However, as seen in this image, that is the height of the iframe excluding its scroll. What am I missing that is not allowinging me to get it’s full scrollHeight so that I can resize the iframe?
Not sure if it is relavant, but here is how I am creating the iframe using React.
// iframe.tsx
export function Iframe({ src, title }) {
const url = useMemo(() => src.toString(), [src]);
const [currentHeight, setCurrentHeight] = useState('150');
const resizer = useCallback((node) => {
if (node) {
setInterval(() => {
setCurrentHeight(node.contentWindow?.document.body.scrollHeight.toString() ?? '100%');
}, 200);
}
}, []);
return (
<iframe
ref={resizer}
src={url}
title={title}
height={currentHeight}
className="w-full"
/>
);
}
While searching for a JavaScript snippet, I have found a piece of code that called a function without parenthesis around arguments.
Basically, from what i tried the syntax is like this:
{function name} `{string contents}`
So as an example, this code will display an alert saying “Hello, world!”:
window.alert `Hello, world!`My question is, what is this feature and is this just an alias for the regular syntax with parenthesis?
I’m having a hard time trying to figure out how to make JS slider/carousel libraries to work with WooCommerce products shortcode display. From what I understand most of sliders/carousels js libraries work similarly, Keen, Embla, Glide, Swiper, Slick… It needs specific HTML markups and then the JS initializer. The one I’m trying to use is Blaze Slider: https://blaze-slider.dev/docs/Tutorial/setup/
Example HTML markup:
<div class="blaze-slider">
<div class="blaze-container">
<div class="blaze-track-container">
<div class="blaze-track">
<div>slide 1</div>
<div>slide 2</div>
<div>slide 3</div>
<div>slide 4</div>
</div>
</div>
</div>
</div>
Using this HTML structure it works fine, but I need to use with WooCommerce Products Shortcode, that’s where I can’t get it to work. According to Blaze Slider’s documentation, the slides need to be directly inside the blaze-track HTML markup class, the other HTML markup classes are also needed to format and hide the other slides like the black-track-container and the blaze-slider HTML markup class is the one that wraps them all and is the initializer.
[products limit=”8″ columns=”4″ best_selling=”true”]
Using this WooCommerce shortcode I get this structure:
<div class="blaze-slider static" style="--slides-to-show: 1; --slide-gap: 15px;">
<div class="blaze-container">
<div class="blaze-track-container">
<div class="blaze-track" style="transition-property: transform; transition-timing-function: ease; transition-duration: 500ms; transform: translate3d(0px, 0px, 0px);">
<div class="woocommerce columns-4 "><ul class="products columns-4">
<li class="product type-product post-224728 status-publish first outofstock product_cat-bicicletas product_cat-mountain-bike-aro-29 product_tag-oggi has-post-thumbnail shipping-taxable purchasable product-type-variable has-default-attributes woo-variation-gallery-product">
<a href="https://www.bikeshop.com.br/loja/bicicleta-oggi-hacker-sport/" class="woocommerce-LoopProduct-link woocommerce-loop-product__link"><span class="et_shop_image"><img fetchpriority="high" decoding="async" width="600" height="600" src="https://www.bikeshop.com.br/wp-content/uploads/2021/03/hacker-sport-preta-azul-1-600x600.jpg" class="attachment-woocommerce_thumbnail size-woocommerce_thumbnail" alt="Bicicleta OGGI Hacker Sport"><span class="et_overlay"></span></span><h2 class="woocommerce-loop-product__title">Bicicleta OGGI Hacker Sport</h2>
<span class="price"><span class="woocommerce-Price-amount amount"><bdi><span class="woocommerce-Price-currencySymbol">R$</span>1.999,00</bdi></li>
</ul>
</div>
</div>
</div>
</div>
<div class="controls">
<button class="blaze-prev">prev</button>
<div class="blaze-pagination"></div>
<button class="blaze-next">next</button>
</div>
</div>
I tried appending the class blaze-track to this line: <ul class="products columns-4"> and appending the class blaze-track-container to this line: <div class="woocommerce columns-4 "> so then the structure would like like the required one, but it doesn’t work. I’m no programmer so I don’t know how to think like a programmer and troubleshoot this, any help?
I tried the help of AI, no solutions provided were successful, tried everything I could, given my limited capabilities.
In some JavaScript, I hide an element by doing this:
element.style.display = 'none';
When I want to display it again, I could do that same thing and set it to block. However, I won’t know what it was before I changed it. It could have been inline-block for all I know.
This means that I can’t really use this method, unless I wanted to store the prior value first. (Something I could conceivably do…)
I thought about moving to some hidden area (like a template tag or something), but then I’d have to have some way of remembering exactly where it came from.
Is there another way to remove an element from the layout (so display, not visibility), without changing the display style property, so that I don’t have to worry about getting it back to what it was?
I have a cypress test which has started to fail after the angular upgrade. Its complaining that the element to be clicked is covered by another element when actually it is not. I have attached the screenshot of the error on cypress runner and also of the dom. Any suggestion what is going wrong over here. thanks
Dom
I am using a function to select the dropdown option
selectOptionByOptionValue(formField, valueToFind) {
formField.then(($el) => {
if ($el.attr('aria-owns') !== undefined) {
console.log('use aria-owns');
formField
.invoke('attr', 'aria-owns')
.then(id => {
cy.get(`#${id}`)
.contains(valueToFind)
.click();
});
} else {
console.log("use aria-control?")
formField
.click()
.invoke('attr', 'aria-controls')
.then(id => {
cy.get(`#${id}`)
.contains(valueToFind)
.click();
});
}
})I am trying to scrape data from the betting site etipos.sk. The API response includes a Base64-encoded Protobuf string in the ReturnValue field.
Here’s an example of the API response:
{
"Result": 1,
"Token": "42689e76c6c32ed9f44ba75cf4678732",
"ReturnValue": "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"
}
The value I need is hidden in the ReturnValue field. I can decode the Base64 string, but I’m unable to parse the resulting Protobuf data without a schema.
Here’s the JavaScript code I’ve tried:
const response = {
"Result": 1,
"Token": "42689e76c6c32ed9f44ba75cf4678732",
"ReturnValue": "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"
};
const base64String = response.ReturnValue;
const decodedString = atob(base64String); // Decode Base64
console.log(decodedString); // Output the decoded string
Despite successfully decoding the Base64 string, I cannot parse the resulting Protobuf data without knowing the schema. Any assistance on how to achieve this would be greatly appreciated!
I am trying to go on my angular site from a link in my other web site. Like this:
somebody’s login page site
<html>
<body>
...
<a href="my-angular-site.com/home/45">
</body>
</html>
*** my angular ***
cunstructor(private router: ActivateRoute){
//here or ngOnInit() I tried
cunst id = This.router.snapshot.paramMap.get('id')
// or subscribed it correctly
console.log('id') //output = undefined
}
Router config is already set correctly
home/:id in path
Actualy I want to open my angular login page by a link which is located in another any-frameworked website.
My homepage is -> myangularsite.com/home
My login page is -> myangularsite.com/login
which all set correct and work fine. But when I want to get an “id” parameter from external link I get that id and rout.navigate([‘/login’])
Please forget about my syntax
I have a canvases ~850×153 and I’m drawing a chart!
the data are two files each file has ~5800 points from 0.00 to 1.00
/**@type {Array<Float32Array>} data */
var data = new Array(2);
The Performance are good for all canvases, but when I open Devtools the performance droops really bad
This Gif image to show the difference between closed Devtools and open:
Thank you.
I was trying to make a grabbing mechanic for my game where you click and you pick up what you clicked on but instead of it just picking up one of the objects it picks up the entire group (I am using group()) and me nor my computer science teacher knows what to do.
Here is some of my code –
function interact(e) {
if (getElementAt(e.getX(), e.getY()) == interactable || currentGrabbedObject != null) {
getDistanceBetween(cursorX, cursorY, ball.getX(), ball.getY());
if (distance < 100) {
grabObject(e);
}
}
}
function grabObject(e) {
if (currentGrabbedObject == null) {
currentGrabbedObject = getElementAt(e.getX(), e.getY());
console.log(getElementAt(e.getX(), e.getY()).checkDimensions());
setTimer(lockObjToCursor, 100);
} else {
currentGrabbedObject = null;
stopTimer(lockObjToCursor);
}
}
the variables are –
e = mouse, ball = player, interactable = group of interactable elements, cursorX and cursorY = the X and Y of the cursor, distance = the distance between the mouse and player, and currentGrabbedObject = the object currently being held.
Things I have tried – getElementAt(), getWidth(), getHeight(), and checkDimensions().
All I want is to grab an element and put it somewhere else by itself but it grabbed the group of items.
Summary: Somehow, window.opener of an opened tab stopped being populated, while not long ago (couple of months), it still worked.
I have a flow in my app in which the user is redirected to a Stripe payment screen in a new tab. Lets say my shop is hosted on https://shop.com
Because the checkout url is only generated after the user presses the “buy” button, I first open a new tab with const ref = window.open(). After that, I call ref.document?.write("Please wait...") to make sure the user sees something in the new tab.
When the promise resolves with the checkout url, I call ref.location = checkoutUrl, which redirects the tab to the Stripe checkout url on https://stripe.com.
When the checkout is done, Stripe redirects the page to another page inside my domain, namely https://shop.com/redirect. This redirect determines based on query params whether the payment succeeded or failed.
What I’ve been doing for ages, is call window?.opener?.postMessage('payment-success', '*'); on the opened tab to notify the original tab that the payment succeeded. After that, I call window.close() on the opened tab, to redirect the user back to the original page.
Now, quite recently, the window?.opener?.postMessage(...) call doesn’t work anymore, because window?.opener is null. This has been working for ages, but now, it’s not anymore. I looked up the last time I deployed my app, which was 177 days ago, and back then, it still worked.
Did something change regarding security policies? Both Chrome and Safari refuse to populate window?.opener. Does anybody have an idea what changed, and what I can do to fix this?
I have an Ionic + Vue project and I’m using Capacitor to add the Android platform to my project. The app runs correctly both on the Virtual Device and on my Xiaomi Mi A2, as it shows my Login screen I created. However, when I enter my credentials, it doesn’t connect to the server I’m trying to log into.
This is my login method:
async login() {
try {
const response = await axios.post('http://secure.example.com/login', {
email: this.email,
password: this.password
});
if (response.data.success) {
const token = response.data.data.token;
localStorage.setItem('token', token);
this.showToast('Has iniciado sesión');
this.$router.push('/Home');
} else {
this.showToast('Credenciales inválidas. Inténtalo de nuevo');
}
} catch (error) {
console.error('Error en el login:', error);
this.showToast('El login ha fallado. Inténtalo de nuevo más tarde');
}
},
showToast(message) {
this.toast.message = message;
this.toast.isOpen = true;
}
Details:
Things I’ve tried:
Adding android:usesCleartextTraffic="true" to AndroidManifest.xml.
Creating a security_network_config.xml file:
<?xml version="1.0" encoding="utf-8"?>
<network-security-config>
<domain-config cleartextTrafficPermitted="true">
<domain includeSubdomains="true">secure.example.com</domain>
</domain-config>
</network-security-config>
and adding <application ... android:networkSecurityConfig="@xml/network_security_config" ...>
to the AndroidManifest.xml.
None of this has worked for me. What should I do?
Note: I’m trying to learn, so probably my code is not optimal or may have errors, so any detailed answer would be very much appreciated. Thank you!
I use bootstrap-toogle for fancy checkbox.
It works on page load, but if I insert an input element on the fly via JS it shows the default checkbox.
<link rel="stylesheet" href="https://gitcdn.github.io/bootstrap-toggle/2.2.2/css/bootstrap-toggle.min.css">
<script src="https://gitcdn.github.io/bootstrap-toggle/2.2.2/js/bootstrap-toggle.min.js"></script>
<div class="row"><label for="button_1">Button 1 </label><input type="checkbox" id="button_1" name="button_1" checked="checked" data-toggle="toggle"></div>
<div id="add">ADD button</div>
<script type="text/javascript">
$(document).on("click", "#add", function() {
var number = $("div.row").length + 1;
var content = "<div class="row"><label for="button_"+number+"">Button "+number+" </label><input type="checkbox" id="button_"+number+"" name="button_"+number+"" checked="checked" data-toggle="toggle"></div>";
$("div.row").last().after(content);
});
</script>
Here is a fiddle: https://jsfiddle.net/8w3dk264/
Is there a way I can fire bootstrap-toogle code after inserting element on the fly?
Thanks,