Iam using playwright with nodejs and trying to solve the following captcha using nopecha without having to install the extension.
Captcha screenshot.
I installed Nopecha using Nodejs command “npm install nopecha” but the rest is a little bit confusing since I don’t even know what’s the type of that captcha.
Thanks,
How to detect users using @twa-dev/sdk for a TMA (Telegram Mini App)?
I want to create a TMA (Telegram Mini App) using @twa-dev/sdk
. I don’t any auth in the app but I need to pass a something like Telegram ID, etc. to my API endpoint to save/retrieve user related data in/from database.
Is there any property in @twa-dev/sdk
to implement this?
How to add custom message on Zod tuple?
I want to return a custom message on a Zod tuple. I did not find any way to do that.
Returned message: Array must contain at least 4 element(s)
Code:
z.tuple([
z.enum(),
z.number(),
z.string(),
z.array(),
],
{ message: "Needs to be an array." })
//.refine, .min, .length will not work here
What I tried
- There are no .min, .length arguments to do a workarround
- .refine will not be called — something else will call the message at first
How to pass a react component to a object property as value in TS
I have a routes.ts file. And I’m declaring my routes object as below –
type PublicRoute = {
path: string,
element: JSX.Element
}
const publicRoutes: Array<PublicRoute> = [
{
path: "/signup",
element: <SignUp />
}
]
But getting a compilation error as
Expected ">" but found "/"
10 | {
11 | path: "/signup",
12 | element: <SignUp /
| ^
13 | ]
I want to use it through a .map
function.
document.getElementById is not a function [closed]
I was watching a name input tutorial from Bro Code. However when I did the same as him, the browser says “document.getElementById is not a function”
I want a button that changes the label to certain text.
document.getElementsById("button").onclick = function buttonFunc() {
username = document.getElementsById("sup").value;
console.log(username);
document.getElementsById("label").innerHTML = "Hello" + username;
}
```
<label id="label">Sup?</label>
<input type="text" id="sup">
<button type="button" id="button">Submit</button>
Handling events on Metronic Tailwind CSS components in Blazor
I am attempting to use Metronic (9.x) with Blazor, and have started a project based on the official sample found here: https://github.com/keenthemes/metronic-tailwind-html-integration/tree/638f04486f737a6c5b86edf51666b8eb72469fb8/metronic-tailwind-blazor-server
Although I have to point out, this hardly qualifies as a “Blazor” sample since it is really just html, served up with Blazor. That is exactly the problem though, since I cannot figure out how to do something as simple as create a dropdown with clickable items that can be captured with @onchange or @onclick events.
For example, if I look at the official Metronic Tailwind CSS docs for Dropdown (https://keenthemes.com/metronic/tailwind/docs/components/dropdown) and Menu (https://keenthemes.com/metronic/tailwind/docs/components/menu/) then I was hoping to be able to do something like this:
@page "/stacks"
<PageTitle>MyPage</PageTitle>
<div class="dropdown" data-dropdown="true" data-dropdown-trigger="click">
<button class="dropdown-toggle btn btn-light">
Show Dropdown
</button>
<div class="dropdown-content w-full max-w-56 py-2">
<div class="menu menu-default flex flex-col w-full">
@foreach (var myItem in allItems)
{
<div class="menu-item">
<a class="menu-link" @onclick="HandleMyClickEvent">
<span class="menu-icon">
<i class="ki-outline ki-badge">
</i>
</span>
<span class="menu-title">
Menu item @myItem.Name
</span>
</a>
</div>
}
</div>
</div>
</div>
@code {
private List<MyClass> allItems = new();
public class MyClass
{
public Guid Id { get; set; }
public string Name { get; set; }
}
protected override async Task OnInitializedAsync()
{
allItems = new List<MyClass>()
{
new MyClass()
{
Id = Guid.NewGuid(),
Name = "foo",
},
new MyClass()
{
Id = Guid.NewGuid(),
Name = "bar",
}
};
}
private async Task HandleMyClickEvent(MouseEventArgs e)
{
Console.WriteLine("Event has been triggered!");
}
}
However, the @onclick
delegation does not trigger. In fact it doesn’t look like any of the built-in Blazor delegators (such as @onchange
etc.) can be triggered anywhere, so I assume that I am supposed to somehow tap into the built-in metronic events. (see https://keenthemes.com/metronic/tailwind/docs/components/menu#events).
How am I supposed to set this up?
Replace default mouse cursor in Gmail and Chromium
I am trying to replace the default (ugly) mouse cursors that Gmail uses within Chromium. This problem does not happen in Firefox.
So far, I have the following code…
- I detect the custom icon
- I replace that icon by local one by appending a property to
head
This does seem to work, but the default icon still appears, as it first needs to be detected.
Is there a better approach to accomplish my goal?
let custom_cursor_a = 'url("https://ssl.gstatic.com/ui/v1/icons/mail/images/2/openhand.cur") 7 5, default';
let custom_cursor_b = 'url("https://ssl.gstatic.com/ui/v1/icons/mail/images/2/closedhand.cur") 7 5, move';
document.addEventListener('mouseover',function(e){
var cursor = getComputedStyle(e.target).cursor;
//console.log(cursor);
const cursorStyle = document.createElement('style');
cursorStyle.id = 'cursor-style';
if (cursor == custom_cursor_a) {
console.log("custom_cursor_a");
cursorStyle.innerHTML = '* {cursor: -webkit-grab !important; cursor: -moz-grab !important; cursor: -o-grab !important; cursor: -ms-grab !important; cursor: grab !important}';
document.head.appendChild(cursorStyle);
} else {
if (cursor == custom_cursor_b) {
console.log("custom_cursor_b");
cursorStyle.innerHTML = '* {cursor: -webkit-grabbing !important; cursor: -moz-grabbing !important; cursor: -o-grabbing !important; cursor: -ms-grabbing !important; cursor: grabbing !important;}';
document.head.appendChild(cursorStyle);
} else {
console.log(cursor);
if (document.getElementById('cursor-style')) { document.getElementById('cursor-style').remove(); }
}
}
});
How could I obtain clickable box ability for every box I have newly created for creating new boxes at the end of boxes row
I want to change my code for obtaining creation of new round box after clicking any box from new created set of them, not only first box. How could I obtain this ability for my code?
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="boxfull.css">
<title>Document</title>
</head>
<body>
<style>
body{
background-color:black;
}
.box{
width:100px;
height:100px;
background-image: linear-gradient(45deg, red, yellow);
border-radius:40px;
transition: box-shadow 0.5s ease;
display:inline-block;
user-select:none;
}
.box:hover{
box-shadow:inset 0px 0px 10px 8px rgba(55, 155, 50), inset 0px 0px 10px 16px rgba(55, 155, 255), inset 0px 0px 10px 24px rgba(155, 55, 255);
transition: box-shadow 0.5s ease;
}
</style>
<div class="box"></div>
<script>
const box = document.querySelector('.box')
box.addEventListener('click', () => {
const setbox = document.createElement('div')
document.body.appendChild(setbox).classList.add('box')
})
</script>
</body>
</html>
third party framework AR to integrate ecom website virtual try clothes [closed]
i want tested third party frameworks for augmented reality to integrate in ecommerce website for virtual try on clothes in 3d. suggest me any third party to integrate for virtual try on clothes.
Formating the date with bootstrap datepicker
I have an input where using bootstrap datepicker, but i want the output format to be like (Day – Month #, year)
ex: Wednesday – January 1, 2025.
<div class="col-md-6">
<div class="form-group">
<label>Date</label>
<div class="date input-group">
<input
type="text"
class="datepicker form-control"
id="date-input"
/>
</div>
</div>
</div>
here is my script for updating the input value
$(document).ready(function () {
$("#date-input").datepicker({
format: "mm/dd/yyyy",
autoclose: true,
});
$(".datepicker").on("changeDate", function (e) {
const selectedDate = e.date; // Get selected date as JavaScript Date object
const options = { weekday: "long", year: "numeric", month: "long", day: "numeric" };
const formattedDate = selectedDate.toLocaleDateString("en-US", options);
$("#date-input").datepicker("update", formattedDate);
});
});
but it does not update the input value. but it shows a correct output on my console.log
change input value on change
I have an input where using bootstrap datepicker, but i want the output format to be like (Day – Month #, year)
ex: Wednesday – January 1, 2025.
<div class="col-md-6">
<div class="form-group">
<label>Date</label>
<div class="date input-group">
<input
type="text"
class="datepicker form-control"
id="date-input"
/>
</div>
</div>
</div>
here is my script for updating the input value
$(document).ready(function () {
$("#date-input").datepicker({
format: "mm/dd/yyyy",
autoclose: true,
});
$(".datepicker").on("changeDate", function (e) {
const selectedDate = e.date; // Get selected date as JavaScript Date object
const options = { weekday: "long", year: "numeric", month: "long", day: "numeric" };
const formattedDate = selectedDate.toLocaleDateString("en-US", options);
$("#date-input").datepicker("update", formattedDate);
});
});
but it does not update the input value. but it shows a correct output on my console.log
Chrome Extension Error Content Security Policy
I am receiving 2 errors in console regarding my chrome extension for an image that follows the cursor around.
This is my manifest.json:
{
"name": "Custom Cursor Extension",
"version": "1.0",
"manifest_version": 3,
"description": "Adds a custom cursor on developer.chrome.com.",
"permissions": ["activeTab", "scripting"],
"background": {
"service_worker": "/background.js"
},
"content_scripts": [
{
"matches": ["<all_urls>"],
"js": ["content.js"],
"css": ["style.css"]
}
],
"action": {
"default_popup": "popup.html",
"default_icon": "image.png"
},
"content_security_policy": {
"script-src": ["'self'", "https://www.gstatic.com", "'unsafe-eval'"],
"object-src": ["'self'"],
"img-src": ["'self'", "data:", "https://www.gstatic.com"]
}
}
Hide the data array from php in javascript [closed]
The problem – hide the data received from php array in a web-page and passed on to a hidden JavaScript.
Current html and JavaScript
<?php
define('MyConst', TRUE);
require_once( "/home/xxxxx/constants.php");
// Create connection
$conn = new mysqli(DB_HOST, DB_USER, DB_PASS, DB_NAME);
$query = "SELECT `field1`, `field2` FROM `datarecords`";
$stmt = $conn->prepare($query);
$stmt->execute();
$stmt->bind_result($field1, $field2);
$resultdata = array();
while($stmt->fetch()){
$toto = array();
$toto['field1'] = $field1;
$toto['field2'] = $field2;
array_push($resultdata, $toto);
}
//print "<pre>";print_r($resultdata);print "</pre>";
//CLOSE the connection
$conn->close();
?>
<!DOCTYPE html>
<html>
<head>
<style>
css code
</style>
</head>
<script>
function execJS(){
var jPass = <?php echo json_encode($resultdata); ?>;
showStatus(jPass);
}
</script>
<script type="text/javascript" src="script/js.js" language="javascript">
</script>
<body onload="execJS()">
<table id="stylewithcss">
</table>
</body>
</html>
When the page is loaded, the javascript gets executed in the order (this method helped me to hide the js.js) –> execJS() and then js.js and all expected results are shown. However on inspect (in Firefox browser), the data inside the ‘$resultdata’ is shown. Would like to hide this data. Any help / suggestion is appreciated.
TypeError: client.query is not a function
Hi I was trying to do a next js project and i got this error while trying to connect database.
I am using neon database.
app/provider.js
"use client";
import React, { useEffect } from "react";
import { useUser } from "@clerk/nextjs";
import { db } from "@/configs/db";
import { eq } from "drizzle-orm";
import { Users } from "@/configs/schema";
function Provider({ children }) {
const { user } = useUser();
const isNewUser = async () => {
try {
const result = await db
.select()
.from(Users)
.where(eq(Users.email, user?.primaryEmailAddress?.emailAddress));
console.log(result);
if (!result.length) {
await db.insert(Users).values({
name: user?.fullName,
email: user?.primaryEmailAddress?.emailAddress,
imageUrl: user?.profileImageUrl,
});
console.log("New user added to the database.");
}
} catch (error) {
console.error("Error during user validation or insertion:", error);
}
};
useEffect(() => {
if (user) {
isNewUser();
}
}, [user]);
return <div>{children}</div>;
}
export default Provider;
configs/db.js
import { neon } from '@neondatabase/serverless';
import { drizzle } from 'drizzle-orm/neon-serverless';
const sql = neon(process.env.NEXT_PUBLIC_DATABASE_URL);
export const db = drizzle(sql);
configs/schema.js
import { boolean, pgTable, serial, varchar } from "drizzle-orm/pg-core";
export const Users = pgTable('users',{
id:serial('id').primaryKey(),
name:varchar('name').notNull(),
email:varchar('email').notNull(),
imageUrl:varchar('imageUrl'),
subscription:boolean('subscription').default(false)
})
I tried making db.js into async function based on some related answers it but still i am getting same error. Thanks in advance
Puppeteer with browser context opens an extra window windows
For some reason, puppeteer seems to open two browser windows with this code. One with just one tab and it’s about:blank. The other one starts with about:blank and redirects to the actually goes to the URL specified.
System : Ubuntu 22.04,
Google Chrome for Testing 131.0.6778.87 (Official Build) (64-bit)
const puppeteer = require('puppeteer-extra')
const fs = require('fs');
const cookiesPath = "cookies.txt";
const StealthPlugin = require('puppeteer-extra-plugin-stealth')
const { createCursor } = require("ghost-cursor")
puppeteer.use(StealthPlugin())
...
cookies = JSON.parse(cookies)
let args = []
if(proxy) {
args.push(`--proxy-server=${proxy}`)
}
puppeteer.launch({ headless: false, args: args }).then(async browser => {
const context = await browser.createBrowserContext()
await context.setCookie(...cookies)
let page = await context.newPage()
let finalUserAgent = userAgent || defaultUserAgent
console.log('Attempting to login w existing session..')
await page.setUserAgent(finalUserAgent)
await page.setDefaultNavigationTimeout(100000); // 90 seconds
await page.goto(url)
//await page.waitForTimeout(5000)
//await browser.close()
console.log(`logged in`)
})
console.log(userAgent, proxy);
res.send("browser launched with session");
Any kind of help is much appreciated.