Blancer.com Tutorials and projects
Freelance Projects, Design and Programming Tutorials
Category Added in a WPeMatico Campaign
I would like to overwrite all properties of an object dest by reading their values from a source object source, when they exist. I wonder whether a method in Lodash exists that does exaclty this:
Object.assing(dest,_.pick(source, Object.keys(dest)))
Does it exists?
We’ve got a browser-based application used by multiple clients, and we’re trying to get seamless auto printing working with Epson thermal receipt printers — specifically the TM-M30III model.
Right now, we’re using Epson Server Direct Printing, where each printer polls a server endpoint every 5–10 seconds. It works fine, but it requires manual setup on the client’s side.
The issue is:
Company policy doesn’t allow us to install any local helper app or native software on the client’s PC, tablet, or phone — which really limits our options.
Let clients easily set up printing from our web app
Avoid needing to log into the physical printer’s admin panel (via IP) to set up the polling URL — ideally this step could be automated or handled remotely
Enable auto printing (ideally triggered by the server or browser)
Work over Bluetooth, WiFi, or LAN — the printers support all three
Is there any browser-compatible approach, SDK, or Epson feature that lets us pull off seamless auto printing to TM-M30III from a web app, without installing anything or having to configure the printer manually?
I’ve searched around but most solutions assume you can
when user turns on his laptop, I am trying to check user’s last activity time on mounted in vuejs3, i am using below code for it:
document.addEventListener('visibilitychange', () => {
if (document.visibilityState === 'visible') {
console.log('Tab is active');
this.checkInactivity();
} else {
console.log('Tab is inactive');
}
});
This code is working on Window OS, Apple OS, but It is not working on chromeOS (chromebook) when i turn on the laptop from sleep mode.
Can somebody help ?
Whenever I create new next.Js project on VS code, and run it on server this error appears. I have checked the layout file it has <html> and <body> tags and also my versions are also up-to-date. I also check by inspecting, this is the error
Uncaught Error: invariant expected layout router to be mounted
at OuterLayoutRouter (layout-router.js:366:37)
at OuterLayoutRouter ()
Please let me know what is the origin for that error. Thank you.
All the files code are defaulted
I can’t find fault in my code for that errors. And I googled it but i can’t find any solution for this.
I want to send bulk messages in whatsapp like sending same message at same time to multiple users.So far, I have not found any free api for testing it. I would be grateful if someone were to guide me.I’m new to coding and I’m a mern stack developer.
Help !!
I’m using a Line Chart Component from Cloudscape. I have a line-chart.jsx component that has the below code
export default function LineChart({chartData}} {
return (
<LineChart
series={[
{
title: "Site 1",
type: "line",
data: [chartData]
//rest of code here
}
In another React component I’m importing LineChart – but I’m not able to get the data to show up no matter what I do.
const dummy_data = [{ x: new Date('2025-05-16'), y: 58020 },
{ x: new Date('2025-05-17'), y: 102402 },
{ x: new Date('2025-05-18'), y: 104920 }]
...rest of code
<LineChart chartData = {dummy_data} />
I have tried every iteration of using [] or {}, but I’m not able to get the data to show up no matter what I do. What am I doing wrong?
I recently had an issue where a button was covered by a transparent element (z-index and position absolute issue) making the button visible but not clickable.
Cypress passed these tests and was able to both see and click the button.
Is there a way to get Cypress to check if there is a transparent element sitting over another element?
My code is simply:
cy.get('.btn-main').click();
I added
cy.get('.btn-main').should('be.visible');
but it still passes.
Would anyone know how I can get Cypress to make sure the button is actually clickable?
I want to create a large file(>200GB) and store it in Min.IO store. I deploy my attempts in a web app on a Kubernetes pod.
One attempt was with a modified Redeable stream and csv-writter library using the putObject method. Somethig like this:
const { faker } = require('@faker-js/faker');
const { createObjectCsvStringifier: createCsvStringifier } = require('csv-writer');
const Minio = require('minio');
const { Readable } = require('stream');
const minioClient = new Minio.Client({...});
const csvStringifier = createCsvStringifier({
header: [
{ id: 'userId', title: 'userId' },
{ id: 'username', title: 'username' },
.... ]});
const generateRandomRow = () => ({
userId: faker.database.mongodbObjectId(),
username: faker.person.firstName(),
...});
class csvGenerator extends Readable {
#count = 0;
#headerPushed = false;
#numRows;
constructor(numRows, options) {
super(options);
this.#numRows = numRows;
}
_read(size) {
if (!this.#headerPushed) {
this.push(csvStringifier.getHeaderString());
this.#headerPushed = true;
}
this.push(csvStringifier.stringifyRecords([generateRandomRow()]));
if (++this.#count === this.#numRows) {
this.push(null);
}
}
}
router.options('/BigFileCreation', cors());
router.post('/BigFileCreation', cors(), async (request, response) => {
const NUM_ROWS = parseInt(request.body.numberOfRows, 10);
const NAME_FILE = request.body.nameOfFile;
const BUCKET = request.body.bucket;
response.status(202).json({"Request status": "Reached"});
try {
const requestFile = await minioClient.putObject(BUCKET, NAME_FILE, new csvGenerator(NUM_ROWS, { highWaterMark: 1 }), null, metaData);
console.log(requestFile);
} catch (error) {
console.error(error);
response.status(500).json(error.toString());
}
});
This handles files less than 1GB with no issue, it takes less than 5 min. to create and upload, but when I request a 2 GB file or more my pod just stop, I guess I just get a OOMKilled status on my pod and thats why I don’t get any error msg on the logs.
I also test it with a temporary file on disk with the same csv-writter library and then stream it with fPutObject method on MinioSDK
const csvWriter = createCsvWriter({
path: 'StellarDB.csv',
header: [
{ id: 'userId', title: 'userId' },
{ id: 'username', title: 'username' },
{ id: 'lastName', title: 'lastName' },
{ id: 'email', title: 'Email' },
{ id: 'column', title: 'column' },
{ id: 'float', title: 'float' },
{ id: 'jobArea', title: 'jobArea' },
{ id: 'jobTitle', title: 'jobTitle' },
{ id: 'phone', title: 'phone' },
{ id: 'alpha', title: 'alpha' }
]
});
const writeLargeCsvFile = async (NUM_ROWS) => {
let batchSize = 500;
let batch = [];
for (let i = 0; i < NUM_ROWS; i++) {
batch.push(generateRandomRow());
if (batch.length === batchSize || i === NUM_ROWS - 1) {
await csvWriter.writeRecords(batch);
batch = [];
}
}
};
After more research I notice that probably the issue was on the library I was using for csv, so I changed to fast-csv and my final attempt was something like this:
const { format } = require('fast-csv');
async function generateAndUploadCSV(name, NUM_ROWS, bucketName) {
const pass = new PassThrough();
const uploadPromise = minioClient.putObject(bucketName, name, pass)
.catch(err => {
console.error('Error subiendo objeto:', err);
throw err;
});
const csvStream = format({ headers: [
'userId', 'username', 'lastName', 'email', 'column', 'float', 'jobArea', 'jobTitle', 'phone', 'alpha'
]});
csvStream.pipe(pass);
let i = 0;
function write() {
let ok = true;
while (i < NUM_ROWS && ok) {
i++;
const record = {
userId: i,
username: faker.person.firstName(),
lastName: faker.person.lastName(),
email: faker.internet.email(),
column: faker.database.column(),
float: faker.number.float(3),
jobArea: faker.person.jobArea(),
jobTitle: faker.person.jobTitle(),
phone: faker.phone.imei(),
alpha: faker.string.alpha({ length: { min: 5, max: 10 } }),
};
ok = csvStream.write(record);
if (i < NUM_ROWS) {
csvStream.once('drain', () => setImmediate(write));
} else {
csvStream.end();
}
}
csvStream.on('error', err => {
pass.destroy(err);
});
write();
const objInfo = await uploadPromise;
}
I also assign more resources on my pod (8GB memory and 4 cores). But all of them behave the same, just one file of 1GB and no more.
Also I modified my Dockerfile on the entrypoint with CMD ["node", "--max-old-space-size=6144","index.js"]
I research more about it and found there is this option to upload the file on pieces and the merge it back together when I’m going to use it. This could be useful for csv files but what if I want to use JSON files also.
Creating and storing the file is just my first step in testing tools that should handle large files without overflow issues. All of them run on Kubernetes pods.
Just adding more info my service pod is handled by Knative with a yml file similar to this:
apiVersion: serving.knative.dev/v1
kind: Service
metadata:
name: transformTesting
spec:
template:
spec:
containers:
- image: .../...:transform-testing-SNAPSHOT
env:
- name: FORCE_NEW_REVISION
value: "true"
Wish someone could point me towards a solution or a concept that I’m ignoring.
I’m using straight ASP.NET Standard (not CORE) with a bunch of .js scripts. I have tried several sources of imports such as import RAPIER_IMPORTED_MODULE from ‘https://cdn.jsdelivr.net/npm/@dimforge/[email protected]/+esm’;
but they fall short of “full functionality” because they don’t expose ALL of the necessary API functions to utilize EventQueue, for example. I believe the proper version of Rapier2D to use is 0.17.0. Isn’t there a single-script version available somewhere?
I created the below function numInputFun(...) for using the shinyWidgets::autonumericInput(...) function in various modules of a large App. Note that I included the CSS for the hover-over pop-forward feature in the numInputFun(...) function so I don’t have to keep repeating the same CSS in the UI’s of the various modules that use this function. I also try scoping the CSS per module, using session$userData, which you’ll see in the below examples, and which I believe is a safe way to store per-session, per-module states in Shiny. The numInputFun(...) works fine in most places, including in Module Example #1 below. But for some strange reason, the numInputFun(...) does not work in Module Example #2 below UNLESS I comment out the minimumValue parameter in the input_box section of numInputFun(...). In my more complete version of code that this Module Example #2 derives from, I also have to comment out the maximumValue parameter to get that module working correctly.
Why does numInputFun(...) work fine in Module Example #1 with both minimumValue and maximumValue parameters activated, but not in Module Example #2 unless both minumumValue (and maximumValue in the larger code that Module Example #2 is derived from) parameters are deactivated? Is there a CSS clash? I need to place both lower and upper input limits so I prefer retaining the minimumValue and maximumValue parameters, unless someone know of another way for placing input range limits.
Below I show on the left how Module Example #2 correctly renders when the minimumValue parameter is deactivated, and on the right how the same Module Example #2 example does not correctly render when the minimumValue parameter is activated:
Here is the numInputFun(...) function:
library(shiny)
library(shinyWidgets)
numInputFun <- function(
inputId,
value = 0,
ns = identity,
session = shiny::getDefaultReactiveDomain()
) {
if (missing(inputId)) stop("inputId is required")
# Insert CSS once per module instance
css_key <- paste0("pop_forward_css_added_", ns(""))
insert_css <- NULL
if (is.null(session$userData[[css_key]])) {
insert_css <- singleton(tags$style(HTML("
.pop-forward {
transition: transform 0.2s ease-in-out;
}
.pop-forward:hover {
transform: scale(1.05);
z-index: 2;
}
")))
session$userData[[css_key]] <- TRUE
}
label <- tags$span("Label:")
container_style <- paste0()
input_box <- shinyWidgets::autonumericInput(
inputId = ns(inputId),
label = NULL,
value = value,
minimumValue = 1, ### DEACTIVATE TO RUN MODULE CORRECTLY!!! ###
maximumValue = 10, ### ALSO DEACTIVATE THIS ONE TO RUN MODULE CORRECTLY IN LARGER CODE (NOT SHOWN) ###
modifyValueOnWheel = TRUE,
style = paste0()
)
tagList(
insert_css,
div(
style = container_style,
label,
div(class = "pop-forward", input_box)
)
)
}
Module Example #1:
mod_numberInput_ui <- function(id, session = getDefaultReactiveDomain()) {
ns <- NS(id)
tagList(
numInputFun(
inputId = "periods",
value = 5,
ns = ns
),
verbatimTextOutput(ns("output_text"))
)
}
mod_numberInput_server <- function(id) {
moduleServer(id, function(input, output, session) {
output$output_text <- renderPrint({
paste("Input * 2:", input$periods * 2)
})
})
}
# Dummy parent App for running module independently
ui <- fluidPage(
tags$h3("Example of numInputFun in a Module"),
mod_numberInput_ui("example")
)
server <- function(input, output, session) {
mod_numberInput_server("example")
}
shinyApp(ui, server)
Module Example #2:
mod_curve_ui <- function(id, session = getDefaultReactiveDomain()) {
ns <- NS(id)
tagList(
numInputFun(inputId = "periods",ns = ns),
uiOutput(ns("action_bttns"))
)
}
mod_curve_server <- function(id, test_mode = FALSE) {
moduleServer(id, function(input, output, session) {
ns <- session$ns
rv <- reactiveValues(
rotate_mode = FALSE
)
output$action_bttns <- renderUI({
btn <- actionButton(ns("toggle_rotate"), "Rotate Mode")
reset_btn <- actionButton(ns("reset_curve"), "Reset Curve")
data_btn <- actionButton(ns("open_table_modal"), "View Data")
tagList(btn, reset_btn, data_btn)
})
})
}
# Dummy parent App for running module independently
ui <- fluidPage(
mod_curve_ui("example")
)
server <- function(input, output, session) {
mod_curve_server("example", test_mode = TRUE)
}
shinyApp(ui, server)
I’m writing a Mongoose user schema in TypeScript, and inside the schema methods, I want to generate JWT access tokens and refresh tokens.
I installed the required packages using:
npm i jsonwebtoken
npm i -D @types/jsonwebtoken
However, when I call jwt.sign(), I get this TypeScript error:
No overload matches this call.
Overload 1 of 5, '(payload: string | object | Buffer<ArrayBufferLike>, secretOrPrivateKey: null, options?: (SignOptions & { algorithm: "none"; }) | undefined): string', gave the following error.
Argument of type 'Secret' is not assignable to parameter of type 'null'.
Type 'string' is not assignable to type 'null'.
Overload 2 of 5, '(payload: string | object | Buffer<ArrayBufferLike>, secretOrPrivateKey: Buffer<ArrayBufferLike> | Secret | PrivateKeyInput | JsonWebKeyInput, options?: SignOptions | undefined): string', gave the following error.
Type 'string' is not assignable to type 'number | StringValue | undefined'.
Overload 3 of 5, '(payload: string | object | Buffer<ArrayBufferLike>, secretOrPrivateKey: Buffer<ArrayBufferLike> | Secret | PrivateKeyInput | JsonWebKeyInput, callback: SignCallback): void', gave the following error.
Object literal may only specify known properties, and 'expiresIn' does not exist in type 'SignCallback'.
I’m passing the arguments like this (example):
jwt.sign(payload, process.env.JWT_SECRET, { expiresIn: process.env.ACCESS_TOKEN_EXPIRY });
But TypeScript doesn’t accept it.
What is causing these overload errors? How can I fix the types or usage of jwt.sign in TypeScript to properly generate tokens inside Mongoose schema methods?
I wrote this code inside my Mongoose user schema method to generate an access token:
userSchema.methods.generateAccessToken = function (
this: IUseSchema & mongoose.Document,
): string {
if (!this._id) {
throw new ApiError(400, "Payload ID is missing");
}
if (!env.ACCESS_TOKEN_KEY) {
throw new ApiError(400, "ACCESS_TOKEN_KEY is missing in env");
}
if (!env.ACCESS_TOKEN_EXPIRY) {
throw new ApiError(400, "ACCESS_TOKEN_EXPIRY is missing in env");
}
const secretKey = env.ACCESS_TOKEN_KEY as Secret;
const expiresIn = env.ACCESS_TOKEN_EXPIRY as string;
return jwt.sign({ id: this._id }, secretKey, { expiresIn });
};
But I get an error on the line with jwt.sign.
I don’t understand what type safety I am missing here. Can someone explain what might be wrong?
I was trying to create a boilerplate for Next.js + MDX (https://mdxjs.com/) using the official guide provided on Next.js website (https://nextjs.org/docs/app/guides/mdx) and I have been facing this error
⨯ TypeError: createContext only works in Client Components. Add the "use client" directive at the top of the file to use it. Read more: https://nextjs.org/docs/messages/context-in-server-component
at __webpack_require__ (.next/server/webpack-runtime.js:33:42)
at eval (webpack-internal:///(rsc)/./app/pg/page.mdx:7:85)
at <unknown> (rsc)/./app/pg/page.mdx (/home/baltej/Desktop/files/posts/.next/server/app/pg/page.js:33:1)
at Function.__webpack_require__ (.next/server/webpack-runtime.js:33:42) {
page: '/pg'
}
GET /pg 500 in 501ms
I am using App router + Nextjs
My next.config.js
import createMDX from '@next/mdx'
/** @type {import('next').NextConfig} */
const nextConfig = {
// Configure `pageExtensions` to include markdown and MDX files
pageExtensions: ['js', 'jsx', 'md', 'mdx', 'ts', 'tsx'],
// Optionally, add any other Next.js config below
}
const withMDX = createMDX({
// Add markdown plugins here, as desired
})
// Merge MDX config with Next.js config
export default withMDX(nextConfig)
My source Tree:
.
├── app
│ ├── layout.js
│ ├── md-components.js
│ └── pg
│ └── page.mdx
├── eslint.config.mjs
├── jsconfig.json
├── next.config.js
├── package.json
├── package-lock.json
├── public
│ ├── file.svg
│ ├── globe.svg
│ ├── next.svg
│ ├── vercel.svg
│ └── window.svg
└── README.md
I’m fairly new to javascript, and I’ve been trying to build a small game to learn new concepts. An issue I’m encountering is that projectiles in the game often have a higher velocity than the width of objects they should collide with, and so pass through without colliding when checking for collision every frame.
I’m working on implementing (what I think is called) swept AABB collision, where my program checks the path an object takes and determines if it should have hit something. My current code takes in a rectangle and a circle, along with their x any y velocities, and gets their relative velocity. It then inflates the area of the rectangle in the x and y by 2 times the circle’s radius.
This is then fed into my current sweptAABB function, which I admit I’m not entirely sure how it works (I cobbled it together from several sources):
function sweptAABB(pointx, pointy, velx, vely, deltaTime, rectx, recty, rectw, recth){
//pointx and pointy are the circle's center, velx and vely are the relative velocities
//how far the "point" (this is the circle, but it's a point since we're expanding our rectangle to account for it's radius) will move during the frame:
const movementX = velx*(deltaTime);
const movementY = vely*(deltaTime)
const invMoveX = movementX !== 0 ? 1 / movementX : Infinity;
const invMoveY = movementY !== 0 ? 1 / movementY : Infinity;
//times that the point would enter/exit the rectangle
const tEnterXY = {x: (rectx-pointx)*invMoveX, y:(recty - pointy) * invMoveY}
const tExitXY = {x: (rectx+rectw-pointx)*invMoveX, y:(recty+recth - pointy) * invMoveY};
//the earliest posible enter/exit times
const enterTime = Math.max(Math.min(tEnterXY.x, tExitXY.x), Math.min(tEnterXY.y, tExitXY.y));
const exitTime = Math.min(Math.max(tEnterXY.x, tExitXY.x), Math.max(tEnterXY.y, tExitXY.y));
return enterTime <= exitTime && exitTime >= 0 && enterTime <= 1;
}
The issue I’m seeing is that occasionaly the function will return true if the corner of the rectangle is near but not touching the circle, like this: (I can’t embed images yet lol)
I’m not sure whether the mistake is in the code or a logic error on my part, but any help understanding or fixing this problem would be greatly appreciated.
I’m trying to render an reactstrap Accordion while mapping an array from JSON.
I seem to have the IDs being assigned correctly but none of the AccordionItems will expand (unless of course I remove their tags, then they all expand but won’t ever close again).
I tried bring the Component being used inside the map() loops into the parent Component but that didn’t make any difference.
I can see that the state value is being changed correctly, but it’s not flowing through to any action.
Appreciate any insight as to why this is happening. It’s all a bit crude and confusing at this point.
Component “Posts” executes the map(), and inside the map it is using the Post component to render individual posts.
Posts:
// LIST POSTS COMPONENT
export function Posts({ posts, loading }) {
const [open, setOpen] = useState('2');
const toggle = (id) => {
if (open === id) {
setOpen();
} else {
setOpen(id);
}
};
// TRACE console output
if (process.env.REACT_APP_TRACE === "true") {
console.log('TRACE: Posts: Posts({posts, loading})');
};
if (loading) {
return <Loading />;
};
console.log("!!! open: " + open);
// Set i to the beginning of the loop
i = 1;
console.log("i init:" + i);
return (
<ul>
<Accordion open={open} toggle={toggle}>
{posts.map((post) => (
<Post key={post.post_key}
post_key={post.post_key}
title={post.title}
site_id={post.site_id} id={post.id}
url={post.url} date={post.date}
excerpt={post.excerpt}
/>
))}
</Accordion>
</ul>
)
};
Post:
// POST PRESENTATION COMPONENT
export function Post(props) {
// TRACE console output
if (process.env.REACT_APP_TRACE === "true") {
console.log('TRACE: apiTestWpCom: Post(props)');
};
// Store the current i for use and then iterate for next
let iCurrent = i;
// Two execs for each async call so halving to floor
iCurrent = new String(Math.floor(iCurrent / 2));
// Iterate
i++;
return (
<AccordionItem>
<AccordionHeader targetId={iCurrent}>
{/* <AccordionHeader> */}
<p><a href={props.url}>{props.title}</a><br />Site ID: {props.site_id}</p>
<p>iCurrent: {iCurrent}</p>
</AccordionHeader>
<AccordionBody accordionId={iCurrent}>
{/* <AccordionBody> */}
<p>{props.excerpt}</p>
<p>{iCurrent}</p>
</AccordionBody>
</AccordionItem>
)
};
I can see in the Console that the value of the open state is being modified but there’s absolutely nothing happening on the front-end (all AccordionItems begin and remain collapsed).
I can see in the Console the value of open changing.
TRACE: Posts: Posts({posts, loading}) Posts.js:58
!!! open: 2 Posts.js:65
i init:1 Posts.js:69
TRACE: apiTestWpCom: Post(props) 14 Posts.js:19
TRACE: Posts: Posts({posts, loading}) Posts.js:58
!!! open: 1 Posts.js:65
i init:1 Posts.js:69
TRACE: Posts: Posts({posts, loading}) Posts.js:58
!!! open: 1 Posts.js:65
i init:1 Posts.js:69
TRACE: apiTestWpCom: Post(props) 14 Posts.js:19
TRACE: Posts: Posts({posts, loading}) Posts.js:58
!!! open: 2 Posts.js:65
i init:1 Posts.js:69
TRACE: Posts: Posts({posts, loading}) Posts.js:58
!!! open: 2 Posts.js:65
i init:1 Posts.js:69
TRACE: apiTestWpCom: Post(props)
I seem to have the IDs for AccordionHead and AccordionBody being set sequentially and correctly (albeit in a very crude and offensive way), but I’m really new to this so not sure if those are being absorbed in a static fashion at-render, or if they’re also being reset every time the value of i is reset in Posts.
I’m still kind of learning how states are interacting between Components. Wondering if I need to pass a reference to the state into the internal Post Component, but not sure exactly what to pass it as (I did pass open, setOpen and toggle into Post as properties, but without knowing what it expects the to be called – if anything – of course it didn’t do much).
Little help? 🙂
I’m gonna try my best to explain it. Lets say there’s a video called Pizza Town. I not only want users to be able to find it by searching Pizza Town, but also by searching Town Pizza.
return "" + p1.split(',').filter(word => word.toLowerCase().indexOf(p2.toLowerCase().split(',')) > -1);