Blancer.com Tutorials and projects

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,

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?

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

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.

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>

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?

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…

1. I detect the custom icon
2. 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(); }
    }
  }
});

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>

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.

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

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

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"]
   }
}

Console Error messages

Image not loading

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.

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

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.