Blancer.com Tutorials and projects
Freelance Projects, Design and Programming Tutorials
Category Added in a WPeMatico Campaign
I want to send a file as image or pdf. While I am using Postman, I make POST method and body type is form-data. Liike this screenshot:
. But I can’t receive any body in Express. My Node.js code is like:
And output is like that:
I tried multer and multipart libraries, but it doesn’t work.
How can I solve this problem?
I have an array of obj for employees and when the user tries to delete on of them there is a message popping up asking them if they want to continue with the proccess. If they press yes the employee is deleted. The problem is that in the list tag where the key={index} exists i call the function for the pop-up message, and then my other function for the delete proccess doesnt have access in that variable in order to delete the specific employee.
The code i use is the following:
//for the delete proccess
function handleRemoveYpallilos(index){
setYpalliloi(Y => Y.filter((_,i)=> i!==Y.index));
}
//list-items displayed
<div className='ShowCase'>
<h2>Οι Υπάλληλοι σας:</h2>
<ol>
{Ypalliloi.map((Ypallilos,index)=>
<li className='list-item' key={index}>
<span className='OnomaEpitheto'>{Ypallilos.Yname} {Ypallilos.Yepitheto}</span>
<button className='delete-button' onClick={HandleAddDeleteSure}>Διαγραφή</button>
</li>
)}
</ol>
</div>
//the pop-up message
//handleRemoveDeleteSure --> closes the message
<div className='Delete-SureMSG'>
<span className="icon-close" onClick={HandleRemoveDeleteSure}><IoClose/></span>
<p className='DeleteSureText'>Είστε σίγουρος ότι θέλετε να διαγράψετε αυτόν τον υπάλληλο?</p>
<div className="button-container">
<button className='btnNo' onClick={HandleRemoveDeleteSure}>Όχι</button>
<button className='btnYes' onClick={handleRemoveYpallilos}>Ναι</button>
</div>
</div>
In a web browser, performing file I/O operations involves using the File API and various Web APIs. These APIs provide a way to read from and write to files directly from the browser environment.
write operation on file in client side javascript
MADE A WEBSITE WITH HTML & CSS AND A BUTTON THAT I HAVE DOSENT WORK, I TRIED OTHER BROSWERS AND ALL THE THINGS I FOUND ONLINE
HTML:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Quotes App</title>
<link rel="stylesheet" href="static/style.css">
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script src="static/script.js"></script>
</head>
<body>
<div class="container">
<h1>Need some motivation?</h1>
<button id="quoteButton">Show Quote</button>
<p id="quoteText"></p>
</div>
</body>
</html>
CSS
body {
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
background-color: #f0f0f0;
margin: 0;
font-family: 'Helvetica', sans-serif;
}
.container {
text-align: center;
background: #ffffff;
padding: 20px;
border-radius: 10px;
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
}
h1 {
font-size: 24px;
margin-bottom: 20px;
}
button {
background: #007bff;
color: #ffffff;
padding: 10px 20px;
border: none;
border-radius: 5px;
cursor: pointer;
transition: background 0.3s ease;
}
button:hover {
background: #0056b3;
}
#quoteText {
margin-top: 20px;
font-size: 18px;
opacity: 0;
transition: opacity 0.5s ease-in-out;
}
JS:
$(document).ready(function() {
$('#quoteButton').click(function() {
$.get('/quote', function(data) {
$('#quoteText').fadeOut(function() {
$(this).text(data).fadeIn();
});
});
});
});
PYTHON:
from flask import Flask, jsonify
import random
app = Flask(__name__)
quotes = [
"Η δύναμη στην ζωή δεν έρχεται από τι μπορείς να κάνεις τώρα αλλά έρχεται από να κάνεις τα πραγραμα που πίστευες ότι δεν θα μπορούσες",
"Αυτός που δεν είναι ευχαριστημένος με αυτό που έχει δεν θα είναι ευχαριστημένος με αυτό που θα ήθελε να έχει — Σωκράτης",
"Η ζωή είναι μια βόλτα απόλαυσε την γιατί δεν υπάρχει εισιτήριο επιστροφής",
"Πρέπει καθημερινά Να μην είσαι σκλάβος του εαυτού σου πρέπει να ξεπερνάς τα όρια σου",
"Όλα ξεκινούν και τελειώνουν στο μυαλό σου. Σε ότι δίνεις δύναμη αυτό σε εξουσιάζει.",
"Τα όρια του καθενός είναι αυτά που ο ίδιος βάζει στον εαυτό του",
"Δεν χρειάζεται να λες τι ξέρεις. Είναι όμως απαραίτητο να ξέρεις τι λες",
"Το μεγαλύτερο λάθος που μπορείς να κάνεις στην ζωή σου είναι να ζεις με τον φόβο μήπως κάνεις λάθος",
"Κλείσε το παράθυρο που σε ενοχλεί όσο όμορφη και αν είναι η θέα που βλέπεις.",
"Ο κόσμος δεν έγινε χειρότερος απλά άνοιξαν τα μάτια σου"
]
@app.route('/quote', methods=['GET'])
def quote():
return jsonify(random.choice(quotes))
if __name__ == '__main__':
app.run(debug=True)
Also i used AI to help me and still did not find a solution to my problem as well as asking around in my coding friend group
I want to retrieve an ejs file data and then sending the ejs file content as data in email as AWS SES. For this to get the path of the file I’m using __dirname. The code works on the localhost but when its hosted on aws it does not recognizes __dirname.
export const sendVerificationEmail = async (email: string, token: string, req: Request): Promise<void> => {
// Read the template file for the verification email
const templatePath = path.join(__dirname, '../../../views/verifyEmail.ejs');
// Read the template file for the verification email
const template = fs.readFileSync(templatePath, 'utf-8');
// Render the email content with the verification link and other variables
const emailContent = ejs.render(template, {
verificationUrl: process.env.verificationLink,
logo: process.env.LOGO,
playStore: process.env.GOOGLE_PLAYSTORE,
appleStore: process.env.APPLE_STORE,
});
// Prepare the email parameters
const params = {
Destination: {
ToAddresses: [email],
},
Message: {
Body: {
Html: {
Data: emailContent,
},
},
Subject: {
Charset: 'UTF-8',
Data: 'Email Verification',
},
},
Source: '[email protected]', // Replace with your SES verified email
};
try {
// Send the email using AWS SES
await ses.sendEmail(params).promise();
} catch (error: any) {
logger.error('AWS SES Error', {
message: 'Error sending email',
errorCode: 500,
errorString: error.message,
type: 'sendVerificationEmailError',
});
// Send a 500 status code with an error message.
return res.status(500).send({ message: 'Internal server error: '+ error.message });
}
};
ERROR:
“message”: “Internal server error: __dirname is not defined”
I’m interested in learning TensorFlow.js to develop real-time AI/ML projects. My goal is to understand:
Model Creation: How to create and train machine learning models from scratch using TensorFlow.js.
Pre-trained Models: How to leverage pre-trained models, integrate them into my applications, and utilize them effectively in real-time scenarios.
Real-Time Applications: Best practices for deploying TensorFlow.js models in real-time environments, including handling live data and performance considerations.
I am looking for comprehensive resources such as free courses, tutorials, or official documentation that cover these aspects. Specifically, I’m interested in learning how to:
Build models for tasks like image classification, object detection, or text analysis.
Apply pre-trained models to new data or tasks.
Implement and optimize models for performance in real-time applications.
Any recommendations on resources, tutorials, or best practices would be greatly appreciated. If you have personal experiences or projects that involve TensorFlow.js, I’d love to hear about them too.
Thank you!
I have a React application, and I’ve noticed that when I open Chrome Developer Tools and go to the Sources tab, I can see a folder named static/js. Expanding this folder reveals the entire code of my React project. This seems concerning from a security perspective.
So I went with the GENERATE_SOURCEMAP=false and it works for me for .js files only. I can still see the .css files in the Sources tab in static folder.
build: set "GENERATE_SOURCEMAP=false" && react-scripts build
How can I achieve to minify the css files? Does GENERATE_SOURCEMAP minifes js files only? How can I prevent the source code of my React app from being exposed in this manner? Is there a way to obfuscate or hide the code to enhance security?
Thanks in advance for your help!
so basically, I’m working on a react-native library which exports some components and utilities to improve overall development.
In this library, I have a light and dark Theme, which I want to be able to override in my app code. To make this easier and intuitive, I want to import the type definition of a Theme from my library.
These 2 files comes from my library :
**src/types/CustomTheme.ts
declare type CustomTheme = {
dark: boolean;
colors: {
primary: string;
background: string;
card: string;
text: string;
textOnPrimary: string;
border: string;
variant: string;
notification: string;
inversed: string;
};
text: {
lg: number;
med: number;
sm: number;
};
};
export default CustomTheme;
**src/index.tsx
// Types for theme
import type CustomTheme from './types/CustomTheme';
export type { CustomTheme };
Then in my react-native app i’m doing :
import { type CustomTheme } from 'my-library';
let CustomLightTheme: CustomTheme = {
// Here VScode doesn't tells me that 'CustomLightTheme' is missing a lot of properties
};
Even if there is no errors, type checking is not really done here. For example, VSCode is not telling that my object miss some properties.
How can i have these kind of type checks when importing a type from my library ?
I am following a Full Stack Development Course by freeCodeCamp right here. When I run the command npm start to start React App, the result in browser show me like below
enter image description here
When I back with my code I can see that it gives me a following error:
enter image description here
I have search over the Internet for the solution, and the solution I came up with is that my project is missing a file called getOptions.js in a directory called node-modules/loader-util/lib as well as missing a reference to getOptions in node-modules/loader-utils/lib/index.js. Another solution I have come up with is that my loader-utils package need to be updated to a latest version, which I have updated it, but the error still happen. So, I think the solution depends on the getOptions.js file that my project is missing. My question is why my project is missing that file and how can I get it?
Appreciate for all of your supports. Thank you!
Error: [Slickgrid-Universal] It looks like you are trying to use Tree Data with Pagination and/or a Backend Service (OData, GraphQL) but unfortunately that is simply not supported because of its complexity.
How can I fix the code to prevent this from happening?
We enter and log in and the text and logo appears in the top right corner, we refresh and it disappears.
I think it’s because generally, when the login is successful, the user information needs to be transferred. However, when the page is refreshed, the data in Vuex is reinitialized, causing data loss.
header.vue
<template>
<div>
<div class="columns is-vcentered is-marginless">
<div
v-if="center && color"
class="client-brand"
:style="`background-color: ${color}`"
@mouseover="color = center && center.color ? `${center.color}20` : `#00000020`"
@mouseleave="color = center && center.color ? `${center.color}12` : `#00000012`"
@click="onClickChangeAccessPoint"
>
<img
v-if="showBrandLogo && hasBrandLogo"
:src="getBrandLogo"
alt="logo"
class="logotypeImg"
/>
<img
v-if="showLogoType && hasLogoType"
:src="getLogoType"
alt="logo"
class="logotypeImg"
/>
<div v-if="showText" class="text">
{{ getText }}
</div>
</div>
</div>
</div>
</template>
computed: {
...mapState({
loggedUser: state => state.loggedUser,
center: state => state.center,
isAppsLoading: state => state.isAppsLoading,
banner: state => state.banner,
banner_connection: state => state.banner_connection,
system_settings: state => state.system_settings,
}),
getText() {
return this.hasText ? (this.center?.text || this.center?.name) : null;
},
hasText() {
return this.showText && (this.center?.text || this.center?.name);
},
showText() {
return this.center?.portal_display_mode && (this.center?.portal_display_mode === 'brand_logo_and_text' || this.center?.portal_display_mode === 'text')
},
async created() {
await this.$store.dispatch('getHubCustomization').then(response => {
this.customization = response.data.data.customization;
this.color = this.center ? `${this.center.color}12` : '#00000012';
})
window.addEventListener('popstate', this.appLoaderOnpopstateEvent);
},
index.js
export const state = () => ({
center: null,
});
export const mutations = {
CENTER(state, center) {
state.center = center;
if (center) {
localStorage.setItem('center', center.id);
} else {
localStorage.removeItem('center');
}
},
};
export const getters = {
GET_CENTER(state) {
return state.center;
},
};
async getUserData({commit, dispatch, state}) {
let access_token = window.localStorage.getItem('access_token');
if (!access_token) {
throw 'Access token not found.';
}
try {
dispatch('setCenterAndAccessPointFromStorage');
// console.log("Instalar plugins", state.installed_plugins);
await installPlugins(state.installed_plugins);
} catch (error) {
throw error;
}
},
setCenterAndAccessPointFromStorage({commit, dispatch, store, state}) {
let centerId = Number.parseInt(localStorage.center);
let accessPointId = Number.parseInt(localStorage.accessPoint);
if (!centerId || !accessPointId) {
commit('SET_CENTER', null);
commit('SET_ACCESS_POINT', null);
return;
}
let hasCenters = state.loggedUser.centers.length > 0;
if (!hasCenters) {
commit('SET_CENTER', null);
commit('SET_ACCESS_POINT', null);
return;
}
let index = state.loggedUser.centers.findIndex((center) => {
return center.id === centerId;
});
if (index < 0) {
commit('SET_CENTER', null);
commit('SET_ACCESS_POINT', null);
return;
}
let center = state.loggedUser.centers[index];
let hasAccessPoints = center.access_points.length > 0;
if (!hasAccessPoints) {
commit('SET_CENTER', null);
commit('SET_ACCESS_POINT', null);
return;
}
index = center.access_points.findIndex((accessPoint) => {
return accessPoint.id === accessPointId;
});
if (index < 0) {
commit('SET_CENTER', null);
commit('SET_ACCESS_POINT', null);
return;
}
let accessPoint = center.access_points[index];
commit('SET_CENTER', center);
commit('SET_ACCESS_POINT', accessPoint);
},
0
We have data in the below format. in this we want grouping in phase and origin fields. Grouping with phase column is already there but i want one more grouping in this with origin column.
When we try, grouping is not working properly. below is the screen shot.
Data:
{
“id”: 5,
“phase”: “Design”,
“task”: “E2E data solution design”,
“milestone”: null,
“start”: “07/03/2023”,
“end”: “15/03/2023”,
“completion”: 35,
“origin”: “project”,
“dependencies”: null
},
{
“id”: 6,
“phase”: “Design”,
“task”: “Wireframes”,
“milestone”: null,
“start”: “12/03/2023”,
“end”: “16/03/2023”,
“completion”: 80,
“origin”: “project”,
“dependencies”: “5”
},
{
“id”: 7,
“phase”: “Design”,
“task”: “Prototyping”,
“milestone”: null,
“start”: “13/03/2023”,
“end”: “22/03/2023”,
“completion”: 40,
“origin”: “project”,
“dependencies”: 6
},
{
“id”: 8,
“phase”: “Design”,
“task”: “Design complete”,
“milestone”: true,
“start”: “22/03/2023”,
“end”: “22/03/2023”,
“completion”: 0,
“origin”: “project”,
“dependencies”: 7
},
{
“id”: 9,
“phase”: “Implementation”,
“task”: “ETL”,
“milestone”: null,
“start”: “09/03/2023”,
“end”: “19/03/2023”,
“completion”: 15,
“origin”: “Idea”,
Want to implement more than two grouping with “Phase” and “origin” fields.
I want to chagne the style of markers on the map it’s ugly red i want to change it to a dot or something
function addPoint(location) {
if (points.length < 4) {
// Ajouter un marqueur à l'emplacement cliqué
const marker = new google.maps.Marker({
position: location,
map: map,
draggable: true,
title: 'Déplacez le marqueur pour choisir un emplacement'
});
I have this code to detect the kind of app where I’m running my Android app (desktop, tablet, and phone):
var deviceDetector = (function() {
var userAgent = navigator.userAgent.toLowerCase();
var detectDevice = function(ua) {
ua = ua.toLowerCase();
// Check for ChromeOS specifically
if (/cros/.test(ua)) {
return "desktop";
}
// Check for Android TV specifically
if (/android.*tv/.test(ua)) {
return "desktop";
}
// Check for tablets
if (/ipad|tablet|(android(?!.*mobile))|(windows(?!.*phone)(.*touch))|kindle|playbook|silk|(puffin(?!.*(IP|AP|WP)))/.test(ua)) {
return "tablet";
}
// Check for phones
if (/mobi|ipod|phone|blackberry|opera mini|fennec|minimo|symbian|psp|nintendo ds|archos|skyfire|puffin|blazer|bolt|gobrowser|iris|maemo|semc|teashark|uzard/.test(ua)) {
return "phone";
}
// Default to desktop
return "desktop";
};
var detectedDevice = detectDevice(userAgent);
return {
device: detectedDevice,
detect: detectDevice,
isMobile: detectedDevice !== "desktop",
userAgent: userAgent
};
})();
However, it doesn’t work as expected since in Chromebooks instead of showing the Tablet or Desktop UI, it always displays the Android Mobile one. The app still works and it’s fine, but for the landscape, it loses its main advantages. Do you have any idea how I can fix it? My app is a hybrid app that mixes a Webview with native components, that’s why Ì care about the user agent.
Note:
I already tried to contact the Chromium OS forum without any replies: https://groups.google.com/a/chromium.org/g/chromium-os-discuss
I am creating alerts to broadcast via streamelements. I have my code in HTML, CSS and JS where the text follows a text path (I want the text to follow an L shape) and I want to apply a wobble effect to each letter individually. If you place the text without the svg, the animation works fine, but if you put the text inside the textpath, it stays static. Are they incompatible?
Thank you very much in advance!
PSA: I have the red line on to visualize the path
I put a wobble animation on a path, but I had static text
<div class="text-container">
<div class="image-container">
<video src="https://cdn.streamelements.com/uploads/ee1cb915-a950-4733-aca9-101f5fa53e75.webm" autoplay muted playsinline></video>
</div>
<div>
<div class="awsme-text-container" style="position: relative; top: 458px;">
<svg width="100%" height="900" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 600 900">
<defs>
<path id="text-path" d="M130,100 Q-70,200 -70,350 L-70,650 Q-70,750 130,750 L650,750 Q730,750 730,650 L730,350 Q730,200 650,100 Z" fill="transparent" stroke="blue" stroke-width="4"/>
</defs>
<text font-size="85" font-family="'Caprasimo', sans-serif" text-anchor="end" dy="20" fill="black" letter-spacing="7">
<textPath href="#text-path" startOffset="35%">
<tspan id="username-container">Texto en curva</tspan>
</textPath>
</text>
<path d="M130,100 Q-70,200 -70,350 L-70,650 Q-70,780 130,750 L650,750 Q730,750 730,650 L730,350 Q730,200 650,100 Z" fill="transparent" stroke="red" stroke-width="2"/>
</svg>
</div>
<p>{{message}}</p>
</div>