Blancer.com Tutorials and projects
Freelance Projects, Design and Programming Tutorials
Category Added in a WPeMatico Campaign
This is the App.jsx file
import { Canvas } from "@react-three/fiber"
import Experience from "./components/Experience"
function App() {
return (
<Canvas>
<Experience />
</Canvas>
)
}
export default App
This is Experience.jsx file I add boxBufferGeometry and it is not workink
const Experience = () => {
return (
<mesh>
<boxBufferGeometry />
<meshNormalMaterial />
</mesh>
)
}
export default Experience
We are currently modifying the code that changes the amount according to each option.
However, I would like to modify the ‘value’ of option 2 and ‘value’ of option 3 to change according to option 1.
For example, if option 1-1 is selected, the amount of 2-2 is -1, but if option 1-2 is selected, the amount of 2-2 is -2.
I would like the amount of the final TOTAL to be revised according to the revised value value.
$('.form-item input').on('change', function() {
// addition and subtraction here
var $this;
var sum = 0;
$('.form-item input').each(function() {
$this = $(this);
if ($this[0].checked == true) {
sum += parseInt($this.val());
}
$('.total span').html(sum.toLocaleString('en-US'));
})
});.form-wrap {
display: block;
margin: 0 auto;
width: 480px;
}
.form-text {
text-align: left;
font-size: 20px;
font-weight: 400;
line-height: 1.3;
margin-bottom: 15px;
color: #bbb;
padding: 0 5px;
}
#fm-title {
color: #444;
font-weight: 600;
}
#op-title {
font-weight: 600;
font-size: 20px;
color: #444;
}
.form-item {
margin-bottom: 5px;
}
.form-item input[type=radio] {
display: none;
}
.form-type-radio {
text-align: center;
margin-bottom: 35px;
}
.form-item input[type=radio]+label {
display: inline-block;
cursor: pointer;
height: 115px;
width: 480px;
border: 2px solid #ddd;
line-height: 1.5;
text-align: left;
font-weight: 400;
font-size: 16px;
padding: 26px 45px;
border-radius: 20px;
}
.form-item input[type=radio]+label {
background-color: #fff;
color: #bbb;
font-weight: 400;
}
.form-item input[type=radio]:checked+label {
background-color: #fff;
color: #bbb;
border-color: #444;
}
.total {
font-size: 22px;
font-weight: 600;
height: 65px;
padding: 15px 15px;
text-align: center;
color: #555;
}
#bm-text {
font-size: 18px;
width: 100%;
font-weight: 400;
color: #555;
padding: 0 5px;
margin-bottom: 40px;
}
#bm-text p {
margin-bottom: 20px;
}
@media (max-width: 991px) {
.form-wrap {
width: 100%;
}
.form-item input[type=radio]+label {
width: 100%;
height: 70px;
line-height: 1.4;
padding: 17px 25px;
font-size: 12px;
border: 1px solid #ddd;
}
.form-text {
font-size: 14px;
margin-bottom: 10px;
}
#op-title {
font-size: 13px;
}
.form-item {
margin-bottom: 1px;
}
.form-type-radio {
margin-bottom: 20px;
}
.total {
font-size: 17px;
font-weight: 500;
padding: 10px 10px;
color: #444;
}
#bm-text {
font-size: 12px;
margin-bottom: 20px;
}
#bm-text p {
margin-bottom: 15px;
}
}<div class="form-wrap">
<div class="form-type-radio">
<div class="form-text">OPTION 1</div>
<div class="form-item">
<input type="radio" id="radio-1" name="samename" value="1800000" class="form-radio" checked="checked">
<label class="option" for="radio-1"><span id="op-title">1-1</span></label>
</div>
<div class="form-item">
<input type="radio" id="radio-2" name="samename" value="2500000" class="form-radio">
<label class="option" for="radio-2"><span id="op-title">1-2</span></label>
</div>
<div class="form-item">
<input type="radio" id="radio-3" name="samename" value="6000000" class="form-radio">
<label class="option" for="radio-3"><span id="op-title">1-3</span></label>
</div>
</div>
<div class="form-type-radio">
<div class="form-text">OPTION 2</div>
<div class="form-item">
<input type="radio" id="radio-4" name="samename1" value="0" class="form-radio" checked="checked">
<label class="option" for="radio-4"><span id="op-title">2-1</span></label>
</div>
<div class="form-item">
<input type="radio" id="radio-5" name="samename1" value="-700000" class="form-radio">
<label class="option" for="radio-5"><span id="op-title">2-2</span></label>
</div>
</div>
<div class="form-type-radio">
<div class="form-text">OPTION 3</div>
<div class="form-item">
<input type="radio" id="radio-6" name="samename2" value="0" class="form-radio" checked="checked">
<label class="option" for="radio-6"><span id="op-title">3-1</span></label>
</div>
<div class="form-item">
<input type="radio" id="radio-7" name="samename2" value="2000000" class="form-radio">
<label class="option" for="radio-7"><span id="op-title">3-2</span></label>
</div>
<div class="form-item">
<input type="radio" id="radio-8" name="samename2" value="-1300000" class="form-radio">
<label class="option" for="radio-8"><span id="op-title">3-3</span></label>
</div>
<div class="form-item">
<input type="radio" id="radio-9" name="samename2" value="-600000" class="form-radio">
<label class="option" for="radio-9"><span id="op-title">3-4</span></label>
</div>
</div>
<div class="form-type-radio">
<div class="form-text">OPTION 4</div>
<div class="form-item">
<input type="radio" id="radio-10" name="samename3" value="0" class="form-radio" checked="checked">
<label class="option" for="radio-10"><span id="op-title">4-1</span></label>
</div>
<div class="form-item">
<input type="radio" id="radio-11" name="samename3" value="100000" class="form-radio">
<label class="option" for="radio-11"><span id="op-title">4-2</span></label>
</div>
<div class="form-item">
<input type="radio" id="radio-12" name="samename3" value="300000" class="form-radio">
<label class="option" for="radio-12"><span id="op-title">4-3</span></label>
</div>
</div>
<div class="form-type-radio">
<div class="form-text">OPTION 5</div>
<div class="form-item">
<input type="radio" id="radio-13" name="samename4" value="0" class="form-radio" checked="checked">
<label class="option" for="radio-13"><span id="op-title">5-1</span></label>
</div>
<div class="form-item">
<input type="radio" id="radio-14" name="samename4" value="300000" class="form-radio">
<label class="option" for="radio-14"><span id="op-title">5-2</span></label>
</div>
</div>
<div class="total">TOTAL <span>0</span></div>
</div>In the picture below you can see a line-chart (created with Chart.js). I just have one item with different values from time to time. This item have a reference range.
As example:
Now I would like to display this reference range without data points in the chart, that the user can see if a value is out of the reference range.
My question is how I can do that. I’ve already looked for possible ways to do that, but haven’t found a solution.
I have this error when I upload my GitHub proyect to Vercel:
Error: Please install mysql2 package manually
at ConnectionManager._loadDialectModule (/var/task/node_modules/sequelize/lib/dialects/abstract/connection-manager.js:55:15)
at new ConnectionManager (/var/task/node_modules/sequelize/lib/dialects/mysql/connection-manager.js:30:21)
at new MysqlDialect (/var/task/node_modules/sequelize/lib/dialects/mysql/index.js:13:30)
at new Sequelize (/var/task/node_modules/sequelize/lib/sequelize.js:194:20)
at Object. (/var/task/database/models/index.js:16:15)
at Module._compile (node:internal/modules/cjs/loader:1356:14)
at Module._extensions..js (node:internal/modules/cjs/loader:1414:10)
at Module.load (node:internal/modules/cjs/loader:1197:32)
at Module._load (node:internal/modules/cjs/loader:1013:12)
at exports.b (/var/task/___vc/__launcher/chunk-5UAC7W5H.js:1:1142)
INIT_REPORT Init Duration: 790.86 ms Phase: invoke Status: error Error Type: Runtime.ExitError
Error: Runtime exited with error: exit status 1
Runtime.ExitError
This is my index.js
// -------------------- REQUIREMENTS --------------------
const express = require("express")
const mainRouter = require("./src/routers/mainRouter")
const methodOverride = require("method-override");
const session = require ('express-session');
// ---------- MIDDLEWARES ----------
const error404Middleware = require("./src/middlewares/error404Middleware")
const sessionExists = require("./src/middlewares/sessionExists")
// -------------------- APP --------------------
const app = express()
// -------------------- CORS --------------------
const cors = require("cors");
app.use(
cors(
(corsOptions = {
origin: "*",
})
)
);
// -------------------- SETTINGS --------------------
app.set("view engine", "ejs")
app.set("views", __dirname + "/src/views")
// -------------------- USES --------------------
app.use(express.static(__dirname + "/public"))
app.use(methodOverride("_method"))
app.use(
session({
secret:"sessionGeneral",
resave:false,
saveUninitialized:false,
})
)
app.use(express.urlencoded({extended: false}))
app.use(sessionExists)
// -------------------- ROUTERS --------------------
app.use(mainRouter)
app.use(error404Middleware)
// -------------------- SERVER --------------------
const PORT = process.env.PORT || 3024
app.listen(PORT, () => console.log(`running server on port ${PORT}`))
I tried to reinstall mysql2 and exempt mysql2 folder from node_modules on .gitignore file but still I have the same error.
I expect to remove the error to upload this proyect to Vercel.
I am building an Electron application with Vue, Tailwind, and Flowbite for components. However, I am encountering an issue when using Flowbite components that rely on JavaScript. I have followed the documentation and installed Flowbite in the project, importing it as follows:
src/main.js:
import { createApp } from 'vue'
import App from './App.vue'
import router from './router'
import { initFlowbite } from 'flowbite';
import 'flowbite/dist/flowbite.min.css';
import './assets/css/imports.css'
const app = createApp(App)
app.use(initFlowbite)
app.use(router)
app.mount('#app')
./assets/css/imports.css:
@tailwind base;
@tailwind components;
@tailwind utilities;
@import url('animations.css');
@import url('fonts.css');
@import url('reset.css');
tailwind.config.js:
/** @type {import('tailwindcss').Config} */
module.exports = {
content: [
"./index.html",
"./src/**/*.{vue,js,ts,jsx,tsx}",
"./node_modules/flowbite/**/*.js"
],
darkMode: true,
theme: {
extend: {
colors: {
'syer-primary': '#8B5FED',
'syer-secondary': '#3F88D3',
},
},
},
plugins: [
require('flowbite/plugin')
]
}
Within this setup, when I run the project, the visual aspects and CSS of the components work normally. However, components requiring JavaScript, such as a modal, do not function as expected. Interestingly, if I make a change and save the src/main.js file, triggering a Vue server reload, the Flowbite JavaScript seems to be imported, and the components work correctly.
I have attempted the following solutions to address the issue:
import { initFlowbite, /* other necessary modules */ } from 'flowbite';
<script src="https://cdn.jsdelivr.net/npm/flowbite@latest/dist/flowbite.min.js"></script>
import 'flowbite/dist/flowbite.min.js';
// Sample middleware implementation
const flowbiteMiddleware = (to, from, next) => {
import('flowbite/dist/flowbite.min.js').then(() => {
// Continue navigation
next();
}).catch((error) => {
console.error('Failed to load Flowbite:', error);
// Handle error and proceed with navigation
next();
});
};
//Vue router middleware implementation
router.beforeEach(flowbiteMiddleware);
None of the above solutions have resolved the issue for me.
I have used the following JSFIDDLE gauge chart. I am looking for to add new plotBand at spesific range of (from ,to).
But, when i add new plotBand, by the followind command:
chart.yAxis[0].addPlotBand({
from: 0,
to: 100,
color: "#E0E0E0",
thickness: "10%",
});
the new added plotBand does not completely cover the old plotBand and the old one’s border is visible!. How can hide completely the old one?
I must say that, using addPlotBand function is my only approach to add plotband.
I noticed a strange bug (or a shortcoming) of the JavaScript Range API. Once attached, the range object cannot be released manually in any way. There is a detach() method, but according to the docs it does nothing and is left for compatibility.
The issue becomes apparent when you try attaching large quantities of ranges to nodes (easily observable on 10000+ nodes). Subsequent removals of any node from the DOM suffer from more than 50% increases of processing times for removal methods, such as setting innerHTML, using removeChild(),replaceChildren() etc.
With no way to release the range objects, is there any way to remedy this slow down of node removal? Or am I better suited opening an issue report for Chromium and Firefox?
// Create test nodes
let html = "";
for (let i = 0; i < 50000; i++) {
html += "<p>Test paragraph</p>";
}
document.body.innerHTML += html;
// Attach ranges
for (const paragraph of document.querySelectorAll("p")) {
let range = new Range();
range.setStart(paragraph.childNodes[0], 0);
range.setEnd(paragraph.childNodes[0], 2);
}
// Log the performance result of trying to delete nodes after attaching a range
document.querySelector("button").onclick = () => {
console.log("beginning delete...");
console.time("perftest");
document.body.innerHTML = "";
console.timeEnd("perftest");
};<button>Click me to delete</button>What I mean by that is if Im scrolling down, my character will move along the path, but the view will ALWAYS show him in the center of my view. I need this to see upcoming obstacles in my way.
Here is my code (html):
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1" />
</head>
<body>
<div style="height: 175px"></div>
<div class="container">
<div style="position: relative">
<img
class="crossLine"
src="/public/pngegg.png"
width="580"
height="1500"
alt=""
/>
<svg
width="540"
height="2990"
viewBox="0 0 540 2990"
fill="none"
xmlns="http://www.w3.org/2000/svg"
class="middlePath"
>
<defs>
<path
id="Path_440"
d="M253.744 2C253.744 2 8.36236 68.4995 17.2435 261C26.1246 453.5 380.243 311.5 380.243 531C380.243 750.5 15.2436 631.5 2.24357 826C-10.7564 1020.5 500.798 1091 535.244 1258.5C569.689 1426 296.243 1473 279.744 1460.5"
stroke="#F39029"
stroke-width="4"
/>
</defs>
<use href="#Path_440" stroke-dasharray="20 10" />
<use id="theFill" href="#Path_440" />
</svg>
<svg
id="pathIcon"
viewBox="0 0 100 191"
fill="none"
xmlns="http://www.w3.org/2000/svg"
xmlns:xlink="http://www.w3.org/1999/xlink"
>
<rect width="100" height="191" fill="url(#pattern0)" />
<defs>
<pattern
id="pattern0"
patternContentUnits="objectBoundingBox"
width="1"
height="1"
>
<use
xlink:href="#image0_126_965"
transform="matrix(0.00376726 0 0 0.00197239 -0.00104536 0)"
/>
</pattern>
<image
id="image0_126_965"
width="266"
height="507"
xlink:href="data:image/png;base64,iVBORw0KGgoAAAANSUh"
/>
</defs>
</svg>
</div>
</div>
</body>
</html>
Here is my code (css):
height: 500vh;
background: #f1f1f1;
}
.container {
display: flex;
justify-content: center;
}
#pathIcon {
position: absolute;
inset: 0;
width: 100px;
height: 100px;
offset-rotate: 0rad;
}
.middlePath {
position: absolute;
}
.crossLine {
position: absolute;
}
Here is my code (js):
pathIcon.style.offsetPath = `path('${Path_440.getAttribute("d")}')`;
const pathLength = Path_440.getTotalLength();
function clamp(min, val, max) {
return Math.min(Math.max(min, val), max);
}
function updatePath() {
const docElt = document.documentElement;
const pathBox = theFill.getBoundingClientRect();
// calculates scroll progress based on viewport progress
const scrollProgress = clamp(
0,
-pathBox.y / (pathBox.height - docElt.clientHeight),
1
);
pathIcon.style.offsetDistance = `${scrollProgress * 100}%`;
// These lines fill in the dashes as you scroll down.
const drawLength = pathLength * scrollProgress;
const rest = pathLength - drawLength;
theFill.style.strokeDasharray = `${drawLength}px ${rest}px`;
}
updatePath();
window.addEventListener("scroll", () => updatePath());
I want to see the character move center of viewport but alway move along the path. Please help me
i have my text area initalized in a form.after submiting the data in the form i want to empty the text area which has ck editor plugin.my issue here is when i try to empty it using this code i get an error in the console log Uncaught ReferenceError: CKEDITOR is not defined
here is my ajax code where am trying to empty the data in the textarea.
$.ajax({
url: 'create-book',
method: 'POST',
processData: false,
contentType: false,
data: formdata,
success: function(response) {
CKEDITOR.instances['bookDesc'].setData('')
}
});
already i have intitalized the editor this way when loading the page
$(document).ready(function() {
let theEditor;
ClassicEditor.create( document.querySelector( '#bookDesc' ),
{
toolbar: ['heading', '|', 'bold', 'italic', 'link', 'bulletedList', 'numberedList', 'blockQuote','|',
'undo', 'redo',]
})
.then(editor => {
theEditor = editor;
})
.catch( error => {
console.error( error );
});
});
in the layout file i have placed the links this way
<script src="{{ asset('assets/jquery/jquery-3.7.1.min.js') }}"></script>
<script src="https://cdn.ckeditor.com/ckeditor5/41.1.0/classic/ckeditor.js"></script>
<script src="{{ asset('assets/admin_js/script.js') }}"></script>```
i have tried a couple of solutions but none is working.which part might i be missing the point here
Is there any way to prevent browser from searching inside a specific input/textarea during CTRL+F search?
I have a simple JSON parser (enter data on the left in a textarea and it get’s beautified on the right) and I want to search some string only on the right beautified side, not in the textarea too. I can think of some hacks (hiding the textarea/text after parse), but I don’t want any of that, I want the textarea to remain visible and with my text so I can dynamically update it
How to disconnec the db connection in node js
This topic has been discussed a lot but here is my problem.
I receive from my api an object containing a script
[
{
"script": "<script src=xxx.js></script>",
"onScriptHead": true,
"onScriptOnLoad": false,
},
{
"script": "<script type="application/javascript">do something else</script>",
"onScriptHead": true,
"onScriptOnLoad": false,
}
]
Now my aim is to inject those script based on onScriptHead / onScriptLoad value.
I managed to create a code that can push a script on the head but only if there are no args inside the script tag
here is the code mentionned above
export const createScript = (scriptToInject: string, scriptSettings?: scriptSettingsProps) => {
const { onScriptHead } = scriptSettings ?? {};
const regexHTMLTag = /<([a-z]+)>/gi;
const inverseScriptRegex = /<[^>]*script/gi;
const addScriptTagToDom = (
retrieveScriptData: RegExpExecArray | string | null,
scriptTag?: any
) => {
const newScript = scriptTag
? document.createElement(`${scriptTag}`)
: document.createElement('script');
if (Array.isArray(retrieveScriptData)) {
const [, scriptData] = retrieveScriptData;
newScript.innerHTML = scriptData;
} else if (typeof retrieveScriptData === 'string') {
newScript.innerHTML = retrieveScriptData;
}
document.head.append(newScript);
};
let match = regexHTMLTag.exec(scriptToInject);
while (match !== null) {
const scriptTag = match[1];
const scriptRegex = new RegExp(`<${scriptTag}[^>]*>([\s\S]*?)</${scriptTag}>`);
const finalScript = scriptRegex.exec(scriptToInject) ? scriptRegex.exec(scriptToInject) : '';
if (onScriptHead) {
addScriptTagToDom(finalScript, scriptTag);
}
match = regexHTMLTag.exec(scriptToInject);
}
};
I cannot find a way to get the script, strip it down, then remount it using js document.xxx to use it in my dom
I have tried multiple regex and online solutions, but cannot find a dynamic way to inject my script after getting it from my api
In setInterval, I’m trying to add constantly changing data to the useState hook, but it always shows the first value.
I don’t want to use spread operator or prev constructs (it works with these), because the data will be updated every 1 second. Since these structures constantly copy data to memory, memory usage constantly increases.
Is there any other method to update the useState value continuously.
example code;
const [getData, setData] = useState(data);
const exData = [] // Constantly Updating
useEffect(() => {
const interval = setInterval(() => {
setData(exData);
}, 1000);
return () => clearInterval(interval);
}, []);
useEffect(() => {
console.log(getData);
}, [getData]);
dynamic pagesI have some large pages in my Next.js app currently (app router style), and am trying to debug why the pages are so large, and it’s hard to say the least.
Route (app) Size First Load JS
┌ ○ / 3.29 kB 846 kB
├ ○ /_not-found 142 B 86.5 kB
├ ○ /my/first/page 1.56 kB 414 kB
├ λ /my/dynamic/page/[x] 57.8 kB 636 kB
├ λ /my/other/page 326 kB 1.32 MB
...
+ First Load JS shared by all 86.3 kB
├ chunks/4422-2c92fefc06002e18.js 30.3 kB
├ chunks/65b6c8ea-4ad97acde17233b9.js 53.6 kB
└ other shared chunks (total) 2.38 kB
One of my pages, the /my/dynamic/page/[x], has this in it:
import dynamic from 'next/dynamic'
const ACTUAL_PAGE = {
a: dynamic(() => import("~/components/page/A")),
b: dynamic(() => import("~/components/page/B")),
c: dynamic(() => import("~/components/page/C")),
d: dynamic(() => import("~/components/page/D")),
// .. up to t, 20 different styles of pages, under the same URL.
};
export default function Page({ params }) {
const ActualPage = ACTUAL_PAGE[params.x]
return <ActualPage />
}
I need this because I have these routes:
/convert/ttf/otf
/convert/png/jpg
/convert/rgb/hex
/convert/other/stuff
So I have a FontConverter page, ImageConverter, etc., 20 different types of converters, using the same URL system. I could do this:
/convert/font/ttf/otf
/convert/image/png/jpg
/convert/color/rgb/hex
/convert/some/other/stuff
But I don’t want to do that… I like the simplicity of the URL structure I have.
dynamic subpages add to build sizeWhen I comment out all but 1 ACTUAL_PAGE from above, it goes down to 400kb (still have more to figure out why my pages are so large). Each page I comment back in, it goes up by roughly 80kb:
dynamic pages aren’t included in the build?I assumed that all my dynamic pages weren’t included in the build? But obviously they are somehow… Because commenting one in at a time slowly increases the final First Load JS in the top λ /my/dynamic/page/[x] log.
How does dynamic work with the output bundles? How does it change First Load JS? Also, what exactly is the difference between Size and First Load JS? (I haven’t seen that in the docs yet).
I noticed that using const Component = await import("~/components/page/A"); in a switch statement, like:
switch (params.x) {
case "a": {
const Component = (await import("~/components/page/A")).default;
return <Component />;
}
case "b": {
const Component = (await import("~/components/page/B")).default;
return <Component />;
}
// ...
}
Also resulted in the same behavior, of First Load JS incrementing every page I added. So somehow the build/bundle is including my sub-imports intelligently.
How does it work?
I’m pretty new to php.
I have a sign up form with username, email and password, when the user clicks sign up I want to send an email for confirmation, and after that send the data to the database, i want to avoid using storing the password in a session variable
I can do these things separately, but i don’t know how to use them all together