Blancer.com Tutorials and projects

I’m integrating FastSpring with my WordPress plugin, and I’m using a webhook like this: https://example.com/wp-json/v1/webhook

Whenever a payment is completed in FastSpring, a webhook is triggered — for example, to example.com/wp-json/v1/webhook. This webhook can be called from anywhere, and I can use the data as needed.

Is there any way to insert custom data into this webhook — like siteURL or userID?

For instance, in the plugin code provided, can I somehow get the URL of the site where the plugin is installed, or the current user’s ID, from within the webhook handler?

<?php
/**
 * Plugin Name: Order Info
 * Description: Handle FastSpring payment.
 * Version: 1.0
 * Author: test
 */

if (!defined('ABSPATH')) exit;

/**
 * Admin Menu Page
 */
add_action('admin_menu', function () {
    add_menu_page(
        'Payment Manager',
        'Payment',
        'manage_options',
        'employee-payment-manager',
        'employee_payment_manager_page',
        'dashicons-admin-users',
        6
    );
});

/**
 * Admin Page Callback
 */
function employee_payment_manager_page() {
    ob_start();
    ?>
    <script
        id="fsc-api"
        src="https://d1f8f9xcsvx3ha.cloudfront.net/sbl/0.9.0/fastspring-builder.min.js"
        type="text/javascript"
        data-popup-webhook-received="dataPopupWebhookReceived"
        data-storefront="bwdplugins.test.onfastspring.com/popup-bwdplugins">
    </script>

    <div class="wrap">
        <h1>Payment Manager</h1>
        <p>
            <button onclick="addVariationAndCheckout('pcm-monthly')" class="wpcv-price-btn">
                Pay Monthly per User
            </button>
        </p>
    </div>

    <script>
        function dataPopupWebhookReceived(data) {
            console.log("Webhook received:", data);
        }

        function addVariationAndCheckout(variation) {
            fastspring.builder.reset();

            switch (variation) {
                case 'pcm-monthly':
                    fastspring.builder.add('pcm-monthly');
                    break;
                default:
                    break;
            }
            
            fastspring.builder.checkout();
        }
    </script>
    <?php
    echo ob_get_clean();
}

We are trying to register a service worker in a domain a.abcorp.com. The site architecture is such a way that only the HTML loads from a.abcorp.com. All the other JS files and CSS files are loaded from b.abcorp.com. To optimize the performance, we want to prefetch some of the files from b.abcorp.com to improve page rendering time.

The problem I am facing is, cross-domain registration is not allowed for service workers. As we have a strict policy to load JS files from CDN, I am not able to load the service worker from b.abcorp.com

The second problem is, even if I somehow loaded the file from a.abcorp.com/xx/yy/zz path, I am still not able to intercept the calls to prefetch the files, as I have scope only for /xx/yy/zz

If I have to change the scope, I am getting an error that I cannot register the service worker in the root domain, unless the server side sends a header saying service-worker allowed.

For me to introduce new header, I will have to go to our IAM gateway and make changes.

If someone can help here in this multifold problem , would greatly appreciate.

I’m using Azure AD authentication in a React.js app with MSAL.js (@azure/msal-browser). I’m encountering the following error intermittently (i.e., not every time):

Interaction_required: AADSTS1600231 Application requested user session which does not exist.  Trace ID: xxxx-xxxx-xxxx-xxxxx Correlation IDI xxxx-xxxx-xxxx-xxxxx Timestamp!

authconfig.js

import { LogLevel } from '@azure/msal-browser';

export const msalConfig = {
    auth: {
        clientId: process.env.AD_AUTH_CLIENT_ID,
        authority: 'https://login.microsoftonline.com/xxxx-xxxx-xxxx-xxxx/v2',
        redirectUri: '/',
        postLogoutRedirectUri: '/',
        navigateToLoginRequestUrl: false,
    },
    cache: {
        cacheLocation: 'localStorage',
        storeAuthStateInCookie: false,
    },
};

export const loginRequest = {
    scopes: [`${process.env.AD_AUTH_CLIENT_ID}/.default`],
};

export const graphConfig = {
    graphMeEndpoint: 'https://graph.microsoft.com/v1.0/me',
};

routes.tsx

export const msalInstance = new PublicClientApplication(msalConfig);
const accounts = msalInstance.getAllAccounts();
if (accounts.length > 0) {
    msalInstance.setActiveAccount(accounts[0]);
}

msalInstance.addEventCallback((event: EventMessage) => {
    if (event.eventType === EventType.LOGIN_SUCCESS && event.payload) {
        const payload = event.payload as AuthenticationResult;
        const account = payload.account;
        msalInstance.setActiveAccount(account);
    }
});

export const router = createBrowserRouter([
    {
        path: '/',
        element: <App pca={msalInstance} />,
        children: [myroutes],
    },
]);

We have quite a big project with about 35k files, and many entries.
When we try to upgrade from v3 (3.28) to v4 (4.41) I get the following observations:

Initial build time got better for ~25% (200s => 150s)
The startup got faster for a few seconds as well.
But I get the issue with the rebuild when it runs.

I starts taking 30-40s instead of 5-10s earlier.
It feels like there are some issues with the incremental build or something like that.

Is there something that made things work differently ?
Probably we have tune our plugins/configs/whatever

Any help is appreciated. Thank you!

I am trying to make a chess game . I am using stockfish to play a game with bot. Its working fine .i am using this option along with depth 1 to make stockfish weaker

stockfish.postMessage("setoption name Skill Level value 1);
  stockfish.postMessage("setoption name Skill Level Maximum Error value 250);
  stockfish.postMessage("setoption name Skill Level Probability value 100); 

But when i use above option i get this

No such option: Skill Level Maximum Error
No such option: Skill Level Probability

Maybe i am using wrong javascript file. Please tell me which github stockfish resposrity and which javascript file i should use to play it weaker.currently i am using this github release

https://github.com/lichess-org/stockfish.js/releases/tag/ddugovic-250718

But it always play strong . I want to make some levels to play. But changing depth option doesn’t do much .i want to use it on mobile browser . I tried other stockfish js resposrity too but same problem.please help me

Using Node Js Multer I am uploading an image to the database as a blob. This happens from javascript ajax xmlhttp request to express js endpoint.

index.html uploading image request

var data, xhr;
    data = new FormData();
    data.append('imageProfile',image);
    xhr = new XMLHttpRequest();

    xhr.open('POST', 'http://localhost:3000/upload', true);
    xhr.onreadystatechange = function (response) {
      //  document.getElementById("result").innerHTML = xhr.responseText
    };
    xhr.send(data);

express js image database upload

router.post('/upload', upload.single('imageProfile'),function(req,res){
const imageProfile = req.file;
var image=imageProfile;
var sql='Insert into Uploads (id,image) VALUES("2",cast("'+image+'" AS BINARY));';
connection.query(sql, function (err, data) {
  if (err) {
      // some error occured
      console.log("database error-----------"+err);
  } else {
      // successfully inserted into db
      console.log("database insert sucessfull-----------");
    }
  });
});

so according to my knowledge image gets uploaded as blob to mysql database successfully.

now the problem is fetching and viewing the image from database.

express js fetch image from database

router.get('/getimage',function(req,res){

 var sql = 'SELECT image FROM Uploads';

connection.query(sql, function (err, data) {
  if (err) {
      // some error occured
      console.log("database error-----------"+err);
  } else {
      // successfully inserted into db
      console.log("database select sucessfull-----------"+data.length);
       res.json({'image':data[0].image});
  }

  });
 });

index.html show database from express js endpoint as a object url

$.get("http://localhost:3000/getimage",function(data,status){

        console.log("data---"+JSON.stringify(data));
        let url = URL.createObjectURL( new Blob([data["image"]], { type: 'image/jpeg' 
   }))
        imgtag.src=url;

    });

json response of image blob

{"image":{"type":"Buffer","data": 
[91,111,98,106,101,99,116,32,79,98,106,101,99,116,93]}}

This image is not getting displayed as a ObjectURL in index.html. Anything wrong that is done here?

I am using jsPlumb v2.1.2 (Community Edition) along with farahey.js for flow layout in my project.
Since the project is already live, I cannot change the version.

The issue I am facing is:
When I create a loopback connection (connect a node to itself), the labels and nodes overlap.
I want to make sure that there is no overlap between labels and nodes, especially in self-connections.
I need the fix The self-connection should be displayed clearly without any clutter.

Thanks in advance.Self connection nodes

I’ve created a JavaScript SDK that uses the @vladmandic/human library and TensorFlow.js for ML operations. I bundle the SDK using Webpack v5.94.

Everything works fine when I use the source code directly in my Next.js app. However, when I install the SDK from npm (i.e., the bundled output), I encounter the following error at runtime:

Uncaught ReferenceError: n is not defined at WasmBackendModuleThreadedSimd at self.onmessage

I’m using only one WASM file from MediaPipe via a CDN link, and my Webpack config looks like this:

import path from 'path';
import { fileURLToPath } from 'url';

const __filename = fileURLToPath(import.meta.url);
const __dirname = path.dirname(__filename);

export default {
  experiments: {
    outputModule: true
  },
  entry: './abc.js',
  output: {
    filename: 'abc.js',
    path: path.resolve(__dirname, 'dist'),
    library: {
      type: 'module'
    },
  },
  module: {
    rules: [
      {
        test: /.jsx?$/,
        exclude: /node_modules/,
        use: {
          loader: 'babel-loader',
          options: {
            presets: ['@babel/preset-env', '@babel/preset-react'],
          },
        },
      },
      {
        test: /.css$/,
        use: [
          'style-loader',
          'css-loader'
        ],
      },
    ],
  },
  resolve: {
    extensions: ['.js', '.jsx'],
  },
  mode: 'production',
};

What I’ve tried:

• Using only source code directly – works fine.

• Using the dist/abc.js bundle from npm – throws the error.

• Ensured the WASM file is correctly fetched from the CDN.

How can I bundle my SDK with @vladmandic/human and tensorflow-js with webpack so that it can work properly? Thanks in advance!

  parseAgentFunction(prompt: any, mindernode: any): string {
    prompt = '这个是啥$querySeedTextCaseFromDb()'
    if (prompt.includes("$querySeedTextCaseFromDb")) {
      const regex = /$querySeedTextCaseFromDb((.*?))/g;
      const checkedNodesForQuerySeedTextCaseFromDb = '$querySeedTextCaseFromDb(测试老的关联方式有没有坏，background占位这种)'
      prompt = prompt.replaceAll(
        regex,
        checkedNodesForQuerySeedTextCaseFromDb
      );
    }
    return prompt;
  }

The result is '这个是啥$querySeedTextCaseFromDb(测试老的关联方式有没有坏，background占位这种)$querySeedTextCaseFromDb(测试老的关联方式有没有坏，background占位这种)', which is supposed to be '这个是啥$querySeedTextCaseFromDb(测试老的关联方式有没有坏，background占位这种)'

When I changed replaceAll to replace, result becomes to '这个是啥$querySeedTextCaseFromDb(测试老的关联方式有没有坏，background占位这种)', which is suppoesd to be right.

function parseAgentFunction(prompt, mindernode) {
  prompt = '这个是啥$querySeedTextCaseFromDb()'
  if (prompt.includes("$querySeedTextCaseFromDb")) {
    const regex = /$querySeedTextCaseFromDb((.*?))/g;
    const checkedNodesForQuerySeedTextCaseFromDb = '$querySeedTextCaseFromDb(测试老的关联方式有没有坏，background占位这种)'
    prompt = prompt.replaceAll(
      regex,
      checkedNodesForQuerySeedTextCaseFromDb
    );
  }
  return prompt;
}

console.log(parseAgentFunction());

I’ve been trying to use Vue’s Fallthrough Attributes to pass an event listener down to a button with v-bind="$attrs". After hours of debugging I found out that the event listener is registered twice: on the root element and on the with v-bind. Here’s the minimal repro:

<script setup lang="ts">
import Comp from './Comp.vue'
</script>

<template>
  <Comp @click="console.log('click')" />
</template>

<script setup lang="ts"></script>

<template>
  <div style="padding:20px;">
    triggers event once
    <button v-bind="$attrs">triggers event twice</button>
  </div>
</template>

I’ve also made a more in-depth demo on Vue Playground.

Apparently, Vue passes down the Fallthrough Attributes both to the root element of the component and the one specified with v-bind="$attrs". So, if you pass an id, tailwind class, anything – it will be duplicated.

Is there any reason for this behavior? From my couple dozen hours of experience with Vue it seems like a bug or a really annoying feature.

It works exactly like I’d expect with multi-root templates, so why not single-root?