Blancer.com Tutorials and projects

I want to create a SurveyJS matrix with rows that contain a text & HTML element. Thus, the HTML content should change in each row. The Survey is a reasoning test that contains a text statement and a symbol pattern that I create by combining HTML code with some CSS. In the remaining columns it contains the response if the statement correctly describes the symbol pattern.

Below is an example of creating the matrix with the correct column types and row information. If I pass a static HTML to the HTML column it gets displayed correctly. But I am stuck at accessing the pattern property of each row to dynamically change the HTML.

const matrix_dynamic_html = {
    "elements": [
      {
        type: "matrixdropdown",
        name: "Test",
        title: "my_title",
        description: "my_pattern",
        columns: [
          {
            name: "pattern",
            title: "Pattern",
            cellType: "html",
            // here we have to access the HTML for each row 
            html: "{row.pattern}"
          },
          {
            name: "response",
            title: "response",
            cellType: "radiogroup",
            "choices": [
              {
                "value": 0,
                "text": "Incorrect"
              },
              {
                "value": 1,
                "text": "Correct"
              }
            ],
            "showInMultipleColumns": true,
            "colCount": 1
          }
        ],
        rows: [
          {
            value: "question_1",
            text: "This is question 1.",
            pattern: generate_html("ques_1"),
          },
          {
            value: "question_2",
            text: "This is question 2.",
            pattern: generate_html("ques_2"),
          },
          {
            value: "question_3",
            text: "This is question 3.",
            pattern: generate_html("ques_3"),
          },
          {
            value: "question_4",
            text: "This is question 4.",
            pattern: generate_html("ques_4"),
          }
        ],
        rowTitleWidth: "50%",
      }
    ],
    "showQuestionNumbers": false
  };

I use the generate_html function to generate the HTML and have checked that this works properly.

I appreciate any input on how to access the pattern property or adapt the setup of the matrix to be able to dynamically change the HTML. Any help is welcome.

I’m working on a feature where I send a request to a server and receive a response. The response may or may not include a URL. If a URL is present in the response:

1. I need to open that URL in a new browser tab.
2. Simultaneously, I want to redirect the current tab to another page.

However, I’m facing issues with mobile browsers blocking the new tab because the window.open action doesn’t occur as a direct result of the user’s interaction (e.g., a click).

Additionally, opening a tab ahead of time (before the response is received) isn’t an option. The request is triggered by a form button, which also switches steps in the form. Since the response may not always contain a URL, I can’t open a new tab in advance for every button click.

1. Here’s what I’ve tried so far:

fetch('/api/some-endpoint')
  .then(response => response.json())
  .then(data => {
    if (data.url) {
      window.open(data.url, '_blank');
    }
    window.location.href = '/another-page';
  });

• Expectation: Open the URL in a new tab and redirect the current tab.
• Result: Works on desktop, but mobile browsers block the new tab.

2. Creating a link dynamically and emulating a click:

const link = document.createElement('a');
link.href = data.url;
link.target = '_blank';
link.click();

• Expectation: Avoid triggering popup blockers.
• Result: Did not work; the new tab is still blocked.

Is there a reliable way to achieve this functionality, especially on mobile browsers? Or any alternative approaches to handle this scenario?

I have a component named Messages defined inside this path: components/src/components/common/messages/index.jsx like the below image

I imported the Messages component as shown below image

When I use Ctrl + click on the component name in the import statement, it goes to the place where it is used. In the place where it is used When I use Ctrl + click on the component name, it goes back to the import statement. Let’s see the image below

I added a jsconfig.json file into my project, this is its content:

{
    "compilerOptions": {
        "baseUrl": "./components/src",
        "module": "es6",
        "jsx": "react"
    },
    "include": [
        "./components/src"
    ]
}

I can use Ctrl + Click to go to the definition of the Messages component if I update the above import statement from src/components/common/messages to src/components/common/messages/index. But I don’t want to do it. This way of importing worked with this command npx webpack serve -c config/webpack.serve.js, but it doesn’t work with Go to definition command of vscode. Does anyone know how to configure the project to be able to use Go to definition command of vscode with this way of importing?

I am attempting to integrate the OneDrive FilePicker V8 in my application. I followed the official documentation: https://learn.microsoft.com/en-us/onedrive/developer/controls/file-pickers/?view=odsp-graph-online
and used the provided sample code : https://github.com/OneDrive/samples (File-picking/Javascript-basic).
However, i’m facing few issues while running the provided sample.

When i run the file by including the correct base_url : i.e https://{tenant-name}-my.sharepoint.com, The login/signup popup opens briefly and closes automatically and
the picker does not initialize, and no further steps execute.
When i try to instead run the file without msal param login and include hard-coded accessToken, the picker opens up saying : “Invalid Client ID” (even though the correct Client ID and credentials are provided), followed by a message suggesting refreshing the page, which doesn’t resolve the issue.

Providing the entire code below:

      const baseUrl = "https://{TENANT_NAME}-my.sharepoint.com";

      function combine(...paths) {
        return paths
          .map((path) => path.replace(/^[\|/]/, "").replace(/[\|/]$/, ""))
          .join("/")
          .replace(/\/g, "/");
      }

      const params = {
        sdk: "8.0",
        entry: {
          oneDrive: {
            files: {},
          },
        },
        authentication: {},
        messaging: {
          origin: "http://localhost:3000",
          channelId: "27",
        },
        typesAndSources: {
          mode: "files",
          pivots: {
            oneDrive: true,
            recent: true,
            sharedLibraries: false,
          },
        },
        selection: {
          mode: "single",
        },
        search: {
          enabled: true,
        },
      };

      let win = null;
      let port = null;

      async function launchPicker(e) {
        e.preventDefault();

        win = window.open("", "Picker", "width=800,height=600");

        const queryString = new URLSearchParams({
          filePicker: JSON.stringify(params),
          cid: "CLIENT_ID",
        });

        const url = `${baseUrl}?${queryString}`;

        const form = win.document.createElement("form");
        form.setAttribute("action", url);
        form.setAttribute("method", "POST");
        win.document.body.append(form);

        const input = win.document.createElement("input");
        input.setAttribute("type", "hidden");
        input.setAttribute("name", "access_token");
        input.setAttribute("value", ACCESS_TOKEN);
        form.appendChild(input);

        form.submit();

I would appreciate if someone with more knowledge about how the OneDrive file picker works could provide some insight on just what is going on with my issue.

My product tracks the user’s stock portfolio. I have created a Firebase function that is called every 24 hours. This function goes over the user’s stock data and makes a call to a 3rd party API to get the latest stock prices etc. My code used to work fine until recently when the API vendor imposed a max 5 calls per minute rate limit. Now, with the current code, I start getting failures after the first 5 calls. How do I re-architect my code to add this wait after every 5 calls I make? Below is what the code looks like

exports.dailyNetworth = onSchedule("every 24 hours", async (event:any) => {
  ...

   for(let uid of validUsers.keys()){
      const finColRef = db.collection("users/" + uid + "/finance")
      const fQuerySnapshot = await finColRef.orderBy("Date",'desc').limit(1).get()
      fQuerySnapshot.forEach(async(doc:any) => {
        let data:any 
        data = doc.data()        
          const finance = new Finance()
          finance.assets = data.assets
               
          for(let ast of Object.keys(finance.assets['Stocks'])){
              const asset:Stock = finance.assets['Stocks'][ast]
              let lastUpdateDate = asset.lastUpdateDate.seconds

              const stkPrice:any = await findStockPrice(asset.Name, asset["Share Count"])
              if(stkPrice !== null){
                finance.assets[astClass][ast].value = stkPrice
                finance.assets[astClass][ast].lastUpdateDate = Timestamp.now()
              }
          }
      });
   }
});

The third-party API call method is like the below:

async function findStockPrice(symbol:string, quantity:number){
    let value = null
    try {
      const url = 'https://someurl.com?' + symbol
      const  header = {
        ...
      }

      const response = await fetch(url, {headers: header})
      const json = await response.json()

      const rate = json["rate"]
      value = quantity*rate

    } catch (error:any) {
      logger.error(error);
    }

  return value
}

I am creating a section in Elementor that has five buttons. Each one changes the content inside an adjacent section using Javascript. The functioning code is:

var $ = jQuery

$(document).ready(function() {
  $('[data-showme]').on('click', function() {
    var showme = $(this).attr('data-showme')

    $('.all-content').hide()
    $('#' + showme).show()
  })
})

.all-content {
  display: none;
}

#professionals-content {
  display: block;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>

There is also an attribute that doesn’t seem to fit into this forum’s code structure:

data-showme|ID-NAME-content

The attribute tells the content which button to respond to. I already have css code working to tell the button how to react to hover, but I couldn’t get any css to make the button that is currently active to remain in a style, until another one is clicked and that one gains the active style. I know it likely requires javascript so I came here. Something like what the hover code has:

selector a:hover {
  border-width: 0px 0px 0px 3px;
}

How can I make this work?

I am making a chat application using PHP on backend and React.js on frontend. However, I am encountering a problem with fetch API.

My fetch that calls an endpoint

    fetch('http://localhost/registration-processing',{
                    method:'POST',
                    headers:{
                        'Content-Type':'application/json'
                    },
                    body:JSON.stringify({
                        firstName:firstName,
                        lastName:lastName,
                        username:username,
                        email:email,
                        password:password
                    })
                })
                .then((response)=>{
                    if(response.ok){ 
                        return response.json();
                    }
                })
                .then((data)=>{
                    console.log('Response:'+data);
                })
                .catch((err)=>{
                    console.error('Error is this:'+err);
                })

I didn’t explicitly write the port in ‘localhost’ since Apache runs on port 80.Fetch worked absolutely fine before installing React, where I used plain JS. Now I get message: Access to fetch at 'http://localhost/registration-processing' from origin 'http://localhost:3000' has been blocked by CORS policy: Response to preflight request doesn't pass access control check: No 'Access-Control-Allow-Origin' header is present on the requested resource. If an opaque response serves your needs, set the request's mode to 'no-cors' to fetch the resource with CORS disabled.

But I tried with using mode:'no-cors' in fetch, and I get successful response(.then is executed, not catch) but result is Response:undefined,even after I tried with echo json_encode(object) to return value , because I think that app.php is unreachable, which is made for handling all routes and fetch requests.

I tried with configuring .htaccess like this, but no results

RewriteEngine On
RewriteCond %{REQUEST_FILENAME} !-f
RewriteCond %{REQUEST_FILENAME} !-d
RewriteRule ^(.*)$ /back-end/app.php [QSA,L]

This is my project structure:

├── back-end/
│   ├── app.php
│   └── .htaccess
├── front-end/
│   ├── react-environment(where fetch is)

So, I don’t know what could be a problem and how to fix this. Also one note: There are not problems when I use php -S localhost:8000, but errors keep showing when I use Apache server via Laragon.

I am using DOCX.js to generate a word document which has an address section. I am trying to create a paragraph that always shows the first paragraph with the text “Address” and then insert a paragraph below to build the address. I am using a conditional statement to enter a new paragraph if a PO Box is supplied or skip if no PO Box is supplied. Here is the code:

//...Other Paragraphs
new TableRow({
        children: [
          new TableCell({
            children: [
              new Paragraph({
                spacing: {
                  before: 200,
                },
                children: [
                  new TextRun({
                    text: "Address",
                    size: 24,
                    color: "848484",
                  }),
                ],
              }),
              element["BO/RLE/DBO/CT PO Box"] &&
                new Paragraph({
                  children: [
                    new TextRun({
                      text: element["BO/RLE/DBO/CT PO Box"],
                      size: 24,
                      color: "000000",
                    }),
                  ],
                }),
                ],
              }),
            ],
          }),
//...Other Paragraphs

The problem I’m having is that the Paragraph with the “Address” TextRun is also acting conditionally, even though it’s outside of the conditional statement below it (i.e. If there is no PO Box, the “Address” paragraph also doesn’t appear.)

Is there anything wrong with my code?

TIA

MDN documentation for RTCPeerConnection.addIceCandidate() says that it returns a promise.
So an ice-candidate will likely is being processed yet when this methods returns.
I get several ice-candidates from a remote and do not wait – whether addIceCandidate() gets resolved or not.

The question is: should I necessarily wait when the previous promise p = addIceCandidate will be rejected or resolved ? Or it doesn’t matter ?

I am using the POST method on a Phone Pe Web API endpoint to get a list of transactions. I include cookies for authorization, but I’m encountering a 412 Precondition Failed error after a few hours. Specifically, the cookies _X52F70K3N and _CKB2N1BHVZ refresh every time, and I’m able to get the transaction list for about 2-4 hours. After that, the cookies expire, and I have to manually refresh them.

Here is the code I am using to make the request, along with the response I’m getting:

Code I am using:

   
const axios = require('axios');
const mysql = require('mysql2');
require('dotenv').config(); // Load environment variables from .env file

   
const dbConfig = {
    host: process.env.DB_HOST,
    user: process.env.DB_USER,
    password: process.env.DB_PASSWORD,
    database: process.env.DB_NAME
};

// PhonePe API URL and headers
const PHONEPE_API_URL = 'https://web-api.phonepe.com/apis/mi-web/v3/transactions/list';
const headers = {
    'Host': 'web-api.phonepe.com',
    'Content-Type': 'application/json',
    'Accept': 'application/json, text/plain, */*',
    'X-Csrf-Token': 'X7M1l************YQhI', // Use the actual CSRF token here
    'X-App-Id': 'oculus',
    'X-Source-Type': 'WEB',
    'User-Agent': 'Mozilla/5.0',
    'Namespace': 'insights',
    'X-Source-Platform': 'WEB',
    'Sec-Fetch-Site': 'same-site',
    'Sec-Fetch-Mode': 'cors',
    'Sec-Fetch-Dest': 'empty',
    'Referer': 'https://business.phonepe.com/',
    'Accept-Encoding': 'gzip, deflate, br',
    'Priority': 'u=4, i',
    'Cookie': '_ppabwduref=PA***********00; MERCHANT_USER_A_TOKEN=eyJ0*************9.ey*****************************************bSgo***M-y90******wg; MERCHANT_USER_R_TOKEN=f8*******-1****-4****-a***3-6*****3; _ppabwdcid=ZX***********FRR*********************WV************************zhFVU********==; _ppabwdsid=*****-***-****-***-****; _CKB2N1BHVZ=1s**************************xKStt/S*****kQ; _X52F70K3N=X7M*******QhI' // Replace with actual cookies // Replace with actual cookies
};

// Calculate timestamps for "from" and "to"
const now = Date.now();
const fromTimestamp = now - 24 * 60 * 60 * 1000; // 24 hours before now
const toTimestamp = now;

// API request payload
const requestData = {
    offset: 0,
    size: 10,
    filters: {},
    transactionType: "FORWARD",
    from: fromTimestamp,
    to: toTimestamp,
    selectedDateType: "today"
};

// Function to fetch transaction data from PhonePe API
async function fetchTransactionData() {
    try {
        const response = await axios.post(PHONEPE_API_URL, requestData, { headers });
        if (response.data.success) {
            console.log("Transaction Data Retrieved Successfully");
            return response.data.data.results || []; // Extract results from the response
        } else {
            console.error("Failed to fetch transaction data.");
            return [];
        }
    } catch (error) {
        console.error("Error during API request:", error);
        return [];
    }
}

// Function to check if a transaction ID exists in the database
async function transactionExists(transactionId, connection) {
    const query = 'SELECT COUNT(*) AS count FROM transactions WHERE transaction_id = ?';
    try {
        const [rows] = await connection.promise().query(query, [transactionId]);
        return rows[0].count > 0;
    } catch (error) {
        console.error('Error checking transaction existence:', error);
        return false;
    }
}

// Function to insert transaction data into the database
async function insertTransaction(transaction, connection) {
    const transactionData = {
        transaction_id: transaction.transactionId,
        transaction_type: transaction.transactionType,
        payment_state: transaction.paymentState,
        amount: transaction.amount / 100, // Convert paise to rupees
        merchant_transaction_id: transaction.merchantTransactionId,
        instrument_type: transaction.instrumentDetails[0]?.instrumentType || null,
        vpa: transaction.instrumentDetails[0]?.vpa || null,
        transaction_note: transaction.transactionNote,
        transaction_date: new Date(transaction.transactionDate).toISOString(),
        customer_name: transaction.customerDetails?.userName || null,
        payment_app: transaction.paymentApp?.paymentApp || null,
        settlement_status: transaction.settlement?.status || null,
        settlement_text: transaction.settlement?.settlementText || null,
        utr: transaction.utr || null
    };

    const query = `
        INSERT INTO transactions (transaction_id, transaction_type, payment_state, amount, 
            merchant_transaction_id, instrument_type, vpa, transaction_note, transaction_date, 
            customer_name, payment_app, settlement_status, settlement_text, utr)
        VALUES (?, ?, ?, ?, ?, ?, ?, ?, ?, ?, ?, ?, ?, ?);
    `;

    try {
        await connection.promise().query(query, [
            transactionData.transaction_id,
            transactionData.transaction_type,
            transactionData.payment_state,
            transactionData.amount,
            transactionData.merchant_transaction_id,
            transactionData.instrument_type,
            transactionData.vpa,
            transactionData.transaction_note,
            transactionData.transaction_date,
            transactionData.customer_name,
            transactionData.payment_app,
            transactionData.settlement_status,
            transactionData.settlement_text,
            transactionData.utr
        ]);
        console.log(`Transaction ID ${transactionData.transaction_id} inserted successfully.`);
    } catch (error) {
        console.error(`Error inserting transaction ID ${transactionData.transaction_id}:`, error);
    }
}

// Main function to fetch and update transaction data
async function main() {
    const transactions = await fetchTransactionData();
    if (!transactions.length) {
        console.log("No transactions found.");
        return;
    }

    const connection = mysql.createConnection(dbConfig);

    try {
        for (const transaction of transactions) {
            const exists = await transactionExists(transaction.transactionId, connection);
            if (exists) {
                console.log(`Transaction ID ${transaction.transactionId} already exists. Skipping.`);
            } else {
                await insertTransaction(transaction, connection);
            }
        }
    } catch (error) {
        console.error("Error processing transactions:", error);
    } finally {
        connection.end();
    }
}

main();

Response of 412 is

config: {
  transitional: [Object],
  adapter: [Array],
  transformRequest: [Array],
  transformResponse: [Array],
  timeout: 0,
  xsrfCookieName: 'XSRF-TOKEN',
  xsrfHeaderName: 'X-XSRF-TOKEN',
  maxContentLength: -1,
  maxBodyLength: -1,
  env: [Object],
  validateStatus: [Function: validateStatus],
  headers: [Object [AxiosHeaders]],
  method: 'post',
  url: 'https://web-api.phonepe.com/apis/mi-web/v3/transactions/list',
  data: '{"offset":0,"size":10,"filters":{},"transactionType":"FORWARD","from":1734776412434,"to":1734862812434,"selectedDateType":"today"}'
},
request: <ref *1> ClientRequest {
  _events: [Object: null prototype],
  _eventsCount: 7,
  _maxListeners: undefined,
  outputData: [],
  outputSize: 0,
  writable: true,
  destroyed: false,
  _last: true,
  chunkedEncoding: false,
  shouldKeepAlive: false,
  maxRequestsOnConnectionReached: false,
  _defaultKeepAlive: true,
  useChunkedEncodingByDefault: true,
  sendDate: false,
  _removedConnection: false,
  _removedContLen: false,
  _removedTE: false,
  strictContentLength: false,
  _contentLength: '130',
  _hasBody: true,
  _trailer: '',
  finished: true,
  _headerSent: true,
  _closed: false,
  socket: [TLSSocket],
  _header: 'POST /apis/mi-web/v3/transactions/list HTTP/1.1rn' +
    'Accept: application/json, text/plain, */*rn' +
    'Content-Type: application/jsonrn' +
    'Host: web-api.phonepe.comrn' +
    'X-Csrf-Token: X7M1l************YQhIrn' +
    'X-App-Id: oculusrn' +
    'X-Source-Type: WEBrn' +
    'User-Agent: Mozilla/5.0rn' +
    'Namespace: insightsrn' +
    'X-Source-Platform: WEBrn' +
    'Sec-Fetch-Site: same-sitern' +
    'Sec-Fetch-Mode: corsrn' +
    'Sec-Fetch-Dest: emptyrn' +
    'Referer: https://business.phonepe.com/rn' +
    'Accept-Encoding: gzip, deflate, brrn' +
    'Priority: u=4, irn' +
    'Cookie: __ppabwduref=PA***********00; MERCHANT_USER_A_TOKEN=eyJ0*************9.ey*****************************************bSgo***M-y90******wg; MERCHANT_USER_R_TOKEN=f8*******-1****-4****-a***3-6*****3; _ppabwdcid=ZX***********FRR*********************WV************************zhFVU********==; _ppabwdsid=*****-***-****-***-****; _CKB2N1BHVZ=1s**************************xKStt/S*****kQ; _X52F70K3N=X7M*******QhI
    'Content-Length: 130rn' +
    'Connection: closern' +
    'rn',
  _keepAliveTimeout: 0,
  _onPendingData: [Function: nop],
  agent: [Agent],
  socketPath: undefined,
  method: 'POST',
  maxHeaderSize: undefined,
  insecureHTTPParser: undefined,
  joinDuplicateHeaders: undefined,
  path: '/apis/mi-web/v3/transactions/list',
  _ended: true,
  res: [IncomingMessage],
  aborted: false,
  timeoutCb: null,
  upgradeOrConnect: false,
  parser: null,
  maxHeadersCount: null,
  reusedSocket: false,
  host: 'web-api.phonepe.com',
  protocol: 'https:',
  _redirectable: [Writable],
  [Symbol(kCapture)]: false,
  [Symbol(kBytesWritten)]: 0,
  [Symbol(kNeedDrain)]: false,
  [Symbol(corked)]: 0,
  [Symbol(kOutHeaders)]: [Object: null prototype],
  [Symbol(errored)]: null,
  [Symbol(kHighWaterMark)]: 16384,
  [Symbol(kRejectNonStandardBodyWrites)]: false,
  [Symbol(kUniqueHeaders)]: null
},
data: ''

},
status: 412
}

i am trying to upload docx file to cloudinary with multer-storage-cloudinary.

here is the code i use

const storage = new CloudinaryStorage({
    cloudinary,
    params: async (req, file) => ({
        folder: 'client-documents',
        resource_type: 'raw',
        allowed_formats: ['jpg', 'jpeg', 'png', 'pdf', 'doc', 'docx'],
        public_id: `${Date.now()}`
    })
});

const upload = multer({
    storage,
    limits: { fileSize: 10 * 1024 * 1024 } // 10 MB limit
});

but when try with postman i get error

{
    "status": "error",
    "error": {
        "message": "An unknown file format not allowed",
        "name": "Error",
        "http_code": 400,
        "storageErrors": [],
        "statusCode": 500,
        "status": "error"
    },
    "message": "An unknown file format not allowed"
}

and see below my preset:
preset screenshot

what should i do? thanks