Blancer.com Tutorials and projects
Freelance Projects, Design and Programming Tutorials
Category Added in a WPeMatico Campaign
my microsoft edge appearance is Light theme
But my extensions manifest version v3 sidepanel is Dark. For example:
I don’t know how to solve it?
Micosoft Edge Version
Macos:
Microsoft Edge
Version 129.0.2792.65 (正式版本) (arm64)
CSS cannot solve this question
html, body {
background: #fff
}
I have a number input. While typing on it, if you press dot (‘.’), you change to decimal part. But if you press comma (‘,’), nothing happens. I want it to also change to decimal typing, just like when you press dot.
Is it possible to do this?
It is hard for me to explain my problem, so; hard to search for a solution too.
As noted above, this is the error I receive when trying to pull from a raspberry pi serving up info via API. When I remove Access-Control-Allow-Origin, it then says that it’s missing.
export default axios.create({
baseURL: `http://${wlanIP}`,
headers: {
'Accept': 'application/json',
'Content-Type': 'application/json',
'Access-Control-Allow-Origin': "*",
"Access-Control-Allow-Headers": "Access-Control-Allow-Headers, Origin, Accept, X-Requested-With, Content-Type, Access-Control-Request-Method, Access-Control-Request-Headers, Access-Control-Allow-Origin",
"Access-Control-Allow-Credentials" : "true",
"Access-Control-Allow-Methods": "GET,HEAD,OPTIONS,POST,PUT",
}
})
I don’t have a backend configured as of yet because the backend for the project has not been decided. Would prefer not to just demonstrate it working in a particular backend if that’s not going to be the long term solution.
Already tried: adjusting value of Access-Control-Allow-Origin, changing what’s included in Access-Control-Allow-Headers, as well as adjusting the config of the 3rd party software I’m using on the raspberry pi to allow CORS. Any help would be greatly appreciated.
I want to take an existing array and add it to the existing array of Objects. I want to add a new key with values from reasons. Please help.
Array:
const reasons = [‘a’, ‘b’, ‘c’];
Object of arrays that look like:
[{
id: 1,
Data: ‘yes’
active: true
},
{id: 2,
Data: ‘yes’
active: false
},
{id: 3,
Data: ‘data’
active: false
}]
Result want:
[{
id: 1,
Data: ‘yes’,
active: true,
reason: a
},
{id: 2,
Data: ‘yes’,
active: false,
reason: b
},
{id: 3,
Data: ‘data’
active: false
reason: c
}]
I’ve been having a problem with react-pdf in my next js, i’ve been following multiple tutorial and it seems like still have an error.
I get this error
⨯ Instead change the require of react-pdf.js in C:UsersTCET
ADMINDesktopnext.nextserverapp(client)page.js to a dynamic
import() which is available in all CommonJS modules.
at @react-pdf/renderer (C:UsersTCET ADMINDesktopnext.nextserverapp(client)page.js:110:18)
at webpack_require (C:UsersTCET ADMINDesktopnext.nextserverwebpack-runtime.js:33:43)
at eval (_components/CreateAppointmentPdf.tsx:7:77)
at (ssr)/./app/(client)/_components/CreateAppointmentPdf.tsx (C:UsersTCET
ADMINDesktopnext.nextserverapp(client)page.js:419:1)
at webpack_require (C:UsersTCET ADMINDesktopnext.nextserverwebpack-runtime.js:33:43)
at eval (_components/downloadbutton.tsx:10:79)
at (ssr)/./app/(client)/_components/downloadbutton.tsx (C:UsersTCET
ADMINDesktopnext.nextserverapp(client)page.js:463:1)
at webpack_require (C:UsersTCET ADMINDesktopnext.nextserverwebpack-runtime.js:33:43)
at eval (_components/create-schedule-dialog.tsx:38:74)
at (ssr)/./app/(client)/_components/create-schedule-dialog.tsx (C:UsersTCET
ADMINDesktopnext.nextserverapp(client)page.js:452:1)
at webpack_require (C:UsersTCET ADMINDesktopnext.nextserverwebpack-runtime.js:33:43)
at eval (_components/left-calendar.tsx:10:81)
at (ssr)/./app/(client)/_components/left-calendar.tsx (C:UsersTCET
ADMINDesktopnext.nextserverapp(client)page.js:496:1)
at webpack_require (C:UsersTCET ADMINDesktopnext.nextserverwebpack-runtime.js:33:43)
at eval (page.tsx:9:83)
at (ssr)/./app/(client)/page.tsx (C:UsersTCET ADMINDesktopnext.nextserverapp(client)page.js:540:1)
at Object.webpack_require [as require] (C:UsersTCET ADMINDesktopnext.nextserverwebpack-runtime.js:33:43)
at JSON.parse () digest: “2904845551”
I tried multiple tutorial, and I tried it to make it like this. I created a custom components and I just pass on different props on it.
MainComponent.tsx
<DownloadButton
disabledButton={!confirmAgreement}
onClick={form.handleSubmit(onSubmit)}
isPending={isPending}
form={form} />
</DialogClose>
DownloadButton.tsx
'use client'
import React from 'react'
import CreateDocumentPDF from './CreateAppointmentPdf'
import dynamic from 'next/dynamic'
const DownloadButton = ({ form, onClick, disabledButton, isPending }: any) => {
const [isClient, setIsClient] = useState(false)
const PDFDownloadLink = dynamic(
() => import("@react-pdf/renderer").then((mod) => mod.PDFDownloadLink),
{
ssr: false,
loading: () => <p>Loading...</p>,
}
);
useEffect(() => {
setIsClient(true)
}, [])
return (
<PDFDownloadLink
fileName='Appointment'
document={
<CreateDocumentPDF form={form} />
}
>
<Button>
</Button>
</PDFDownloadLink>
)
}
export default DownloadButton
And then this my CreateAppointmendPDF.tsx. The problem here is when I use the feature coming from @react-pdf/renderer. I get the error.
import { Document, Font, Page, Text, View } from '@react-pdf/renderer'
const CreateDocumentPDF = ({
form
}: any) => {
return (
<Document>
</Document>
)
}
export default CreateDocumentPDF
Planning to use below json-rules-engine JavaScript library within ASP.NET core web api . Looking into compilers such as Bridge but seems like it is not uptodate. Are there any alternatives to invoke the below js library in c#?
https://github.com/CacheControl/json-rules-engine/blob/master/docs/rules.md
I am currently creating a sign-in page where the customer can sign in using their username and password.
I have two files, sign-in.html and sign-in.js. I believe that the html file is working well and there is no problems with it.
import { sessionStore } from './session-store.js';
/* global Vue, axios */
const app = Vue.createApp({
data() {
return {
// Initialize customer object
customer: {
username: '',
password: ''
}
};
},
,
methods: {
signIn() {
axios.post('/api/customers/' + this.customer.username, {
password: this.customer.password
})
.then(() => {
sessionStore.commit('signIn', this.customer);
alert('Sign in successful!');
window.location = 'view-products.html';
})
.catch(error => {
console.error(error);
alert('Invalid username or password. Please try again.');
});
}
}
});
app.use(sessionStore);
app.component('navmenu', navigationMenu);
app.mount("main");
Here is the part of the html file that is failing
<input type="text" id="username" v-model="customer.username" required><br /><br />
<label>Password:</label>
<input type="password" id="password" v-model="customer.password" required><br /><br />
I know the html works well as when I remove the customer.username and customer.password to just username and password it appears, but when i have the customer. in front of it, it no longer shows and I get a blank page. I also get an error which says customer is not defined.
This makes me think that the problem is the data customer in the js file but everything else I have tried has not worked.
Is my code correct or could the problem be from another file in my program.
When I added some debugging to my code to see the problem it just wouldn’t run that file, it wouldn’t give me an error either it was just simply providing a blank page without even using the navigation bar which would have no effect on the customer. things.
This is what I see in the console log when I open the sign-in.html page
[Vue warn]: Failed to resolve component: navmenu
If this is a native custom element, make sure to exclude it from component resolution via compilerOptions.isCustomElement.
at <App> vue.global.js:1516:15
[Vue warn]: Property "customer" was accessed during render but is not defined on instance.
at <App> vue.global.js:1516:15
[Vue warn]: Unhandled error during execution of render function
at <App> vue.global.js:1516:15
Uncaught TypeError: customer is undefined
I understand that the problem is the customer is undefined, I am just confused where it is meant to be defined, is it a problem with a separate file altogether?
I want to track custom events in GA4 via GTM. I have setup a GA4 custom event tags which works fine. See screenshot below for example, it’s not 100% correct to be working as described here but it’s just for illustration. I was able to confirm my custom events triggered in GTM via the dataLayer.push() are passed to GA4.
Here’s how I push the event data to the dataLayer:
dataLayer.push({
"event": "GA4Event",
"ga4EventName": "view_item_list",
"ga4EventParameters": {
"item_list_name":"Homepage",
"items":[{
"item_id":"8888888",
"item_name":"A product",
"item_brand":"a brand",
"price":220.4892,
"currency":"USD",
"index":0
}]
}
});
My gripe with this is that I need to list all event parameters (attributes from the ga4EventParameters object) one by one in the GA4 event tag configuration. See section circled in red in the screenshot. I honestly don’t want to do this. It is tedious (we have multiple custom events with their own attributes), and will break as soon as we introduce a new attribute and we don’t put it in that list.
I’ve created my own tag template to make it so that the entire ga4EventParameters object gets passed to GA4 without having to list all of its attributes. It works some of the time, but not all the time, which is where I need help.
Here’s the template code (short version, removed init. code and imports):
const gtag = copyFromWindow('gtag');
// The GA4 tag id
const measurementId = data.measurementId;
if (measurementId) {
const ga4EventName = copyFromDataLayer('ga4EventName');
if (ga4EventName) {
let ga4EventParameters = copyFromDataLayer('ga4EventParameters');
if (!ga4EventParameters) {
ga4EventParameters = {};
}
// Set the GA4 property id to send the custom event to
ga4EventParameters.send_to = measurementId;
log('GA4 event data:', ga4EventName, ga4EventParameters, gtag);
if (gtag) {
gtag('event', ga4EventName, ga4EventParameters);
log('gtag called');
} else {
log('gtag not avail.');
}
}
} else {
log('Tag is missing at least one of its configuration parameters');
}
My issue is with gtag, it’s only present in window once all the GTM events have occurred:
dataLayer.push() with my custom event once the page is entirely loaded and GTM has completely run (like after 3-4seconds), it works completely fine, everything’s great.dataLayer.push() in the HTML of my page. This means it gets executed early. My custom GTM tag gets triggered by it, but gtag doesn’t exist in window yet, so I can’t send the event to GA4.I tried triggering my custom tag template on the Window Loaded event that GTM has, but same thing, gtag isn’t available yet.
I’m at a loss, I don’t know how to solve this. Sure I could just use setTimeout to delay my dataLayer.push() call on the page but it would be unreliable as that delay would vary depending on device, network speed and script execution speed.
On a side note, I have no idea what script exposes gtag to window, and no idea why it gets set so late.
I am trying to replicate the Nintendo Wii Menu separating bar with CSS on React JS and Tailwind (the blue one, sorry for the bad resolution):
As you can see, the bar goes straight, then down, then straight, then up and straight again.
I tried separating the bar in three. First, the left part, then the middle and then the right part, using border radius and box-shadow, but my main problem is that the radius gets thinner on edges and when combining it with the other bar, the edges don’t merge together. Here’s the code of the left and middle part (I didn’t bother making the right part) and part of the clock and date:
.mm-left-box {
width: calc(50% - 8rem);
height: 100px;
background-color: rgb(209 213 219 / var(--tw-bg-opacity));
transform: translateX(-17rem);
position: absolute;
border-bottom-right-radius: 50%;
padding-bottom: 1rem;
padding-top: 1rem;
}
.mm-left-bar {
border-top: 4px solid #00c4ff;
border-radius: 50px;
box-shadow: 0 -2px #00c4ff;
}
.mm-bar {
border-top: none;
border-bottom: 6px solid #00c4ff;
border-bottom-left-radius: 50px;
border-bottom-right-radius: 50px;
}
<footer className="relative">
{/* Left Line */}
<div className="left-0 top-0">
<div className="mm-left-box mm-left-bar"></div>
</div>
{/* Current Date and Time and Middle Line*/}
<div className="flex justify-center items-center">
<div className="pb-16 relative z-10 bg-gray-300">
<div className="mm-bar mm-striped-bg bg-white font-mono pb-3 text-gray-400 text-5xl px-80">
{formattedTime}
</div>
<div className="font-rodin text-4xl text-gray-500 text-center ">
<strong>{currentDate}</strong>
</div>
</div>
</div>
</footer>
I’m trying to set up a node attach config in VSCode that allows me to debug a running node program, but it cannot find the sources for the js. The file structure is the following:
project
| build
| app.js
| app.map.js
| src
| app.ts
My current launch config is this:
{
"name": "Attach by Process ID",
"processId": "${command:PickProcess}",
"request": "attach",
"skipFiles": [
"<node_internals>/**"
],
"type": "node"
}
My tsconfig is:
{
"compilerOptions": {
"target": "es2019",
"lib": ["es2019", "esnext.asynciterable"],
"typeRoots": ["./src/types", "./node_modules/@types"],
"allowSyntheticDefaultImports": true,
"experimentalDecorators": true,
"emitDecoratorMetadata": true,
"forceConsistentCasingInFileNames": true,
"moduleResolution": "node",
"module": "commonjs",
"resolveJsonModule": true,
"pretty": true,
"sourceMap": true,
"outDir": "./build",
"sourceRoot": "./src",
"allowJs": true,
"noEmit": false,
"esModuleInterop": true,
"skipLibCheck": true,
"paths": {}
},
"include": ["./src/**/*"],
"exclude": ["node_modules", "tests"]
}
When I debug with --inspect-brk specified, it shows that it’s looking for /build/src/app.ts.' Is there a way to fix this? I have tried all the sourceMap related props in VSCodes config, but honestly I can't seem to get them to have any effect. The one thing that works is setting sourceRoot` to be the absolute path to my project source, but this is on a shared project, so id rather not have a solution that causes these files to be local.
I want to give ability to paste a date into EDITABLE_DATE_COL_DEF defined below:
// columns.ts
export const EDITABLE_DATE_COL_DEF: AgGrid.ColDef = {
...columns.DEFAULT_COL_DEF,
cellDataType: "dateString",
cellEditor: "agDateStringCellEditor",
cellEditorParams: {
min: columns.formatDate(columns.addDays(columns.dateInTimeZone(new Date()), -180)),
max: columns.formatDate(columns.dateInTimeZone(new Date())),
},
editable: true,
};
The EDITABLE_DATE_COL_DEF is used in the buildGrid in my controller.ts:
function buildGrid($grid: HTMLElement, dataCallbacks: datasource.DatasourceCallbacks, ctrlCallbacks: CtrlCallbacks) {
// (...)
const colDefs: AgGrid.ColDef[] = [
{ field: "payment_date", ...EDITABLE_DATE_COL_DEF, ...DATE_FILTER_COL_DEF, sortable: true },
// (...) other fields
I can’t find anything relevant in the AG-Grid docs. Is there a way to do this without loosing build-in AG-Grid datepicker?
I want to make a website where people upload file and they’re given a link which they can share and the ones who click it can download the file.
I know the front end but I can’t figure out the back end how does it work and what do I need?
I tried asking chatgpt and browsing the web but it gives me so much answers I seem to get overwhelmed and don’t know where to start.
I am currently trying to teach myself D3 so that I can create some cool data visualizations, however, I am having difficulty getting past the beginning setup. I would be incredibly grateful for any help.
I’ve taken the steps to properly link my HTML and Javascript files, I’ve imported d3 correctly, I’ve linked my JSON file correctly, and I’ve setup a live server using Node.js.
Here is what I have so far:
I’ve created an HTML file within a folder entitled daft, the code is as follows:
<!DOCTYPE html>
<html lang="en">
<head>
<title>My Timeline</title>
</head>
<body>
<div id="wrapper"></div>
<script src="./../../d3.v6.js"></script>
<script src="./chart.js"></script>
</body>
</html>I’ve created a Javascript file (chart.js), also in draft folder, that my HTML file points to, the code is as follows:
async function drawLineChart() {
// 1. Access data
const dataset = await d3.json("./../../my_weather_data.json")
console.table(dataset[0])
}
drawLineChart()Additional information: Before trying to run my code I setup a live server using node.js. Also, I’m using Visual Code Studio.
Here are the error messages I’m receiving:
When I try to run my HTML code:
HTML Error
When I try to run my Javascript code (I am confused why d3 is not defined):
Javascript Error
I’m following Amelia Wattenberger’s Fullstack D3 course and this is the initial setup she suggested. I am open to other text editors or methods for linking my HTML and Javascript files.
THANKS SO MUCH
Im trying to use @google/generative-ai in Javascript with in-memory images. My server gets the images from Http Requests. In google documentation it shows that:
// TODO Make these files available on the local file system
// You may need to update the file paths
const files = [
await uploadToGemini("file_path", "image/jpeg"),
];
async function uploadToGemini(path, mimeType) {
const uploadResult = await fileManager.uploadFile(path, {
mimeType,
displayName: path,
});
const file = uploadResult.file;
console.log(`Uploaded file ${file.displayName} as: ${file.name}`);
return file;
}
const fileManager = new GoogleAIFileManager(apiKey);
So it expects a file path. So now I need to
It seems unnecessary. The image is being sent in base64 format anyway, why should I save it to the local file instead of directly sending the image from memory. As far as documentation goes, I couldn’t find a way to achieve that. Is there a workaround for this?
I looked at the source code of GoogleAIFileManager it only accepts filePath as parameter.
I am trying to test some unobtrusive javascript code that needs to make an axios.get call to pre-populate a express handlebars form. The javascript code is running and I am able to make it to the axios.get line, but once it executes it falls right to the catch and I get a generic “Network Error”. If I change the url in the get to “http://www.google.com” it works. If I try to call the endpoint directly from the browser it hit the endpoint. I am on a new macbook pro that I just purchased, not sure if that makes a difference. What do I need to change for this to work?
apiLibrary.js:
const retrieveInfo = async (data) => {
try {
const res = await axios.get(`http://localhost:3000/car/location/${data.id}`);
debugger;
return {
data: res.data
};
} catch (err) {
debugger;
if (err.response) {
// There is an error response from the server
// You can anticipate error.response.data here
if (err.response.data && err.response.data.errors[0]) {
return {
errorMessage: err.response.data.errors[0]
};
}
} else if (err.request) {
// The request was made but no response was received
// Error details are stored in error.reqeust
return {
errorMessage: err.request
};
} else {
return {
errorMessage: "Something went wrong."
}
}
}
}
excerpt from carLocation.js (unobtrusive javascript file)
retrieveInfo({id: carLocationId}).then((data) => {
address.value = data.address;
city.value = data.city;
state.value = data.state;
zipCode.value = data.zipCode;
}).catch(({errorMessage}) => {
carLocationServerErrorMessage.innerText = errorMessage;
})
bottom of handlebars layout file:
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
<script src="../javascripts/jquery-3.6.0.min.js"></script>
<script src="../javascripts/bootstrap.bundle.min.js"></script>
<script src="../javascripts/jquery.validate.min.js"></script>
<script src="../javascripts/apis.js"></script>
<script src="../javascripts/carLocation.js"></script>