Blancer.com Tutorials and projects
Freelance Projects, Design and Programming Tutorials
Category Added in a WPeMatico Campaign
Looking for some help on this one. I need to match all double quotes between {} brackets.
(37, "2012 Fall", null, null, 0, 1, "1420", {"canDelete":false, "cantDeleteModes":[2, 3, 5]}, "2020-05-28T18:06:48.000Z", "2020-10-27T19:42:03.000Z", 1, 1);
Here is the reqex I have so far…
/(?<={).*?(?=})/g
but that matches everything between the {} brackets.
Any help would be appreciated ;=)
<!DOCTYPE html>
<html>
<head>
<title>Product Carousel</title>
<link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/[email protected]/slick/slick.css">
<style>
.slick-list {
padding: 0 20% 0 0;
}
.slick-slider {
touch-action: auto;
-ms-touch-action: auto;
}
.card {
text-align: center;
padding: 20px;
margin: 10px;
border: 1px solid #ddd;
border-radius: 4px;
background-color: #f9f9f9;
}
.card img {
width: 200px;
height: auto;
margin-bottom: 10px;
}
</style>
</head>
<body>
<div class="multiple-items">
<div class="card">
<img src="/Eiffel-Tower.png" alt="Product 2">
<h2>Product 2</h2>
<p>Description of Product 2</p>
</div>
<div class="card">
<img src="/Taj-Mahal.png" alt="Product 3">
<h2>Product 3</h2>
<p>Description of Product 3</p>
</div>
<div class="card">
<img src="/Great-Wall-of-China.png" alt="Product 4">
<h2>Product 4</h2>
<p>Description of Product 4</p>
</div>
<div class="card">
<img src="/Statue-of-Liberty.png" alt="Product 5">
<h2>Product 5</h2>
<p>Description of Product 5</p>
</div>
<div class="card">
<img src="/Pyramids-of-Giza.png" alt="Product 6">
<h2>Product 6</h2>
<p>Description of Product 6</p>
</div>
<div class="card">
<img src="/Colosseum.png" alt="Product 7">
<h2>Product 7</h2>
<p>Description of Product 7</p>
</div>
<div class="card">
<img src="/Machu-Picchu.png" alt="Product 8">
<h2>Product 8</h2>
<p>Description of Product 8</p>
</div>
<div class="card">
<img src="/Petra.png" alt="Product 9">
<h2>Product 9</h2>
<p>Description of Product 9</p>
</div>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.4/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/slick/slick.min.js"></script>
<script>
$('.multiple-items').slick({
infinite: false,
slidesToShow: 2.3,
slidesToScroll: 1,
useCSS: true,
});
</script>
</body>
</html>
i am planning to use it on mobile version but when i try on my mobile it dosent work smooth and it lags when changing slide what i am trying to achive is something similar to example-1, Example-2 Example-3
as you can see in these sites in mobile version scrolling is superfast
i tried changing few settings like swipeToSlide: true, but nothing seems to work
even slidestoshow is not working it shows 3 slides in mobile view although i have set to 2.3
i tried changing few settings like swipeToSlide: true, but nothing seems to work
even slidestoshow is not working it shows 3 slides in mobile view although i have set to 2.3
I am wondering if is possible to covert a JS class to a JS Function. The reason I am asking is to have a deeper knowledge and understanding on about JS fcuntions. Here is the sample JS class code:
class Person{
constructor(name, age){
this.name = name;
this.age = age;
}
welcome(){
console.log(`Hello, ${this.name}`)
console.log("You are " + this.age + " years old")
}
}
class Student extends Person{
constructor(name, age, result){
super(name, age)
this.result = result
}
hello(){
super.welcome()
console.log("Your result is a " + this.result + " congratulation!")
}
}
class Teacher extends Person{
constructor(name, age, classSize){
super(name, age)
this.classSize = classSize
}
hello(){
super.welcome()
console.log("Your result is a " + this.result + " congratulation!")
}
}
const student = new Student("John", 18, "Pass");
const teacher = new Teacher("Mary", 30, "20");
student.hello()
teacher.hello()
The reason I am asking is to have a deeper knowledge and understanding on about JS fcuntions.
I was build video call App using webRTC. The app was running smoothly until I tried using safari browser on mac and Chrome browser on Mobile IOS. The error was occur when I get the remote/local stream for my Video Tag sources. The error looks like this :
TypeError: e.getRemoteStreams is not a function. (In 'e.getRemoteStreams()', 'e.getRemoteStreams' is undefined)
I tried in chrome dekstop was work perfectly, Any idea the alternatives to get mediaStream from peerConnection except getRemoteStreams() and getLocalStreams() ?
I’m actually running this project on my VS Code and have already followed the README description. however, I’m encountering errors such as:
MongooseError: Mongoose.prototype.connect() no longer accepts a callback
TypeError: MongoStore.create is not a function
I tried using the suggestions from the ChatGPT and some fixes I found on a forum (stackoverflow). Now, the project is running without any errors, but i cant login nor register.
It doesn’t seem to do anything at all.
i already setup mongodb atlas
this is link in from github
Just an answer
I am trying to attach handleRowMouseDown to the mouseDown event on a row and another event handler to onDoubleClick on a cell
I have a tanstack table where my rows are rendered like this:
const RenderRow = React.useCallback(
({ index, style }: { index: number; style: any }) => {
const row = rows[index];
prepareRow(row);
const isRowSelected = selectedRows.includes(index);
return (
<div
{...row.getRowProps({
style,
})}
key={index}
className={classNames('tr', {
'bg-white dark:bg-zinc-950': !isRowSelected,
'bg-blue-600 text-white': isRowSelected,
})}
onMouseDown={(event) => handleRowMouseDown(event, index)}
onMouseUp={(event) => handleRowMouseUp(event, index)}
onMouseEnter={(event) => handleRowMouseEnter(event, index)}
>
{row.cells.map((cell) => {
let cellClass = classNames('td border-b border-r px-2 py-1 line-clamp-1 truncate dark:text-white ', {
'border-gray-200 dark:border-zinc-800': !isRowSelected,
'border-blue-700': isRowSelected,
});
return (
<div {...cell.getCellProps()} className={cellClass} onDoubleClick={() => console.log('cliiiick')}>
{cell.render('Cell')}
</div>
);
})}
</div>
);
},
[prepareRow, rows, selectedRows],
);
and handleRowMouseDown looks like this:
const handleRowMouseDown = (event: React.MouseEvent<HTMLDivElement>, rowIndex: number) => {
if (event.shiftKey && selectedRows.length > 0) {
const firstSelectedRow = selectedRows[0];
const lastSelectedRow = selectedRows[selectedRows.length - 1];
const start = Math.min(firstSelectedRow, rowIndex);
const end = Math.max(lastSelectedRow, rowIndex);
const newSelectedRows = Array.from({ length: end - start + 1 }, (_, i) => start + i);
setSelectedRows(newSelectedRows);
} else {
setIsDragging(true);
setDragStartIndex(rowIndex);
if (selectedRows.length === 1 && selectedRows[0] === rowIndex) {
setSelectedRows([]);
} else {
setSelectedRows([rowIndex]);
}
}
};
onMouseDown appears to be preventing onDoubleClick (and onClick) from firing on the cell. How can I have both handlers active?
Thanks in advance 🙂
I am receiving the following error when trying to build my React app:
Attempted import error: ‘startTransition’ is not exported from ‘react’ (imported as ‘React’)
It doesn’t show anything else like the file or line that needs to be fixed. The weird thing is that I can build the same project in a different server.
The settings on the two servers are slightly different.
Server that is working has:
Ubuntu 20.02
Node v16.13.2
npm 8.3.2
react 18.2.0
Sever that doesn’t create the build:
Amazon Linux release 2 (Karoo) - centos rhel fedora
Node v16.20.0
npm 8.19.4
react 18.2.0
My package.json has the following dependencies:
package.json
I’m trying to build using: npm run build
Where can I start looking?
thanks
I am creating a program that contains items for a shopping list and then the user can add items to the list. I want the user to able to delete items from the shopping list by simply clicking on the item. When I click on the item, the last item gets deleted no matter which item I click on. I just want to find out why only the last item in my array is getting deleted instead of the item that I am selecting.
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Shopping List</title>
<!-- Link Google Font -->
<link href="https://fonts.googleapis.com/css2?family=Nunito&display=swap" rel="stylesheet">
<!-- External CSS link-->
<link rel="stylesheet" href="./css/styles.css">
</head>
<body>
<div class="container">
<h2>Shopping List</h2>
<div class="header">
<input type="text" id="input" placeholder="Item">
<span onclick="updateList(myArray)" id="addBtn"><button>Add Item</button></span>
</div>
<span value="uOOD7" class="close" onclick="deleteItem(myArray)">
<ul id="itemList">
</ul>
</span>
</div>
<script src="mainForTask2.js"></script>
</body>
</html>
================================================================================================
Javascript
//This is a javascript program which added the items in my array to an unordered list
let myArray = ["Sugar", "Milk", "Bread", "Apples"];
let list1 = document.querySelector("#itemList");
//This function pushed my array items to create the list
arrayList = (arr) => {
let items = arr.forEach(item => {
let li = document.createElement('li');
li.textContent = item;
list1.appendChild(li)
});
}
arrayList(myArray)
//This function changed the background color of two of the list items to show that they are sold
const idSelector = () => {
let idElement = document.getElementsByTagName("li")
idElement[0].style.color = "red"
idElement[3].style.color = "red"
console.log(idElement.value)
}
idSelector()
//This function uses the user input from the form to add items to the list
updateList = (arr) => {
let blue = document.getElementById("input").value;
if (blue === "") {
alert("Please enter a value if you wish to add something to your list.")
} else {
arr.push(blue);
list1.innerHTML = '';
arrayList(myArray)
idSelector()
}
}
//This function is meant to delete the specified item chosen by the user from the shopping list and the array
deleteItem = (arr) => {
let red = document.getElementById("close");
const index = arr.indexOf(red);
const x = arr.splice(index, 1)
console.log(arr)
console.log(x)
list1.innerHTML = '';
arrayList(myArray)
idSelector()
}
I’m trying to create a website where users can submit HTML with inline scripts, styles, etc. From my testing, using a Content Security Policy and a sandboxed iframe seems to block most malicious actions such as sending / receiving data from external sources.
I’m using srcdoc instead of src as src doesn’t seem to inherit the CSP.
My current HTML looks like this:
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Security-Policy" content="default-src 'none'; style-src 'unsafe-inline'; frame-src 'self'; script-src 'unsafe-inline'">
<meta http-equiv="X-Content-Security-Policy" content="default-src 'none'; style-src 'unsafe-inline'; frame-src 'self'; script-src 'unsafe-inline'">
<meta http-equiv="X-WebKit-CSP" content="default-src 'none'; style-src 'unsafe-inline'; frame-src 'self'; script-src 'unsafe-inline'">
</head>
<style>
iframe {
width: 100%;
height: 95vh;
}
</style>
<iframe srcdoc="$$$" sandbox="allow-forms allow-pointer-lock allow-popups allow-scripts">
<p>Your browser does not support iframes</p>
</iframe>
</html>
Where $$$ is replaced by the injected HTML with all quotes replaced with double quotes (I’m aware that this might break '"' as it wil turn into '''). I’m also not using the " as it seems to cause some bugs.
Is this secure enough for user-generated content and can/should I do anything to protect the user’s local files?
I am using github flavored markdown to format my github profile and I wanted to show an image alongside the profile views.
This is what I achieved so far:
With this markdown code:
<details>
<summary>Hello, friend</summary>
<p>
<img src="https://github.com/AleixMT/AleixMT/assets/23342150/a802e799-cfcf-4add-ae22-0aa96bbecb6c" alt="lol-haha" style="height:3.8cm;">
<img src="https://komarev.com/ghpvc/?username=aleixmt&label=Profile%20views&color=0e75b6&style=flat" alt="aleixmt" style="display:inline-block;vertical-align: middle;">
</p>
</details>
This code also adds a dropdown menu to see the images, I actually do not need that.
What I want is the profile view counter to be in the middle of the height of the image, still on its right side, so it is positioned with more height.
I should see it like this:
Can someone please help me? I am completely new with HTML and markdown and I did not know that aligning two elements was going to be so difficult. Bless front-end programmers.
Also note that the two elements must be displayed in the center of the page.
Do not use CSS to format the elements, add the styles in line since in markdown there is no support for explicit CSS. Also please test your solution since I have been using other solutions but they do not work with github flavored markdown:
Thank you very much.
I wanted to redirect from login page to dashboard upon getting a successful response from API & pass the success message fetched through API from one component to another component at the same time. By doing so, I ultimately aim to redirect user from login page to dashboard with displaying toast message received on the success response of login API.
I used the useNavigate,useLocation hooks to implement this. My code does the redirection but not able to catch the data, in “Dashboard” component, which is passed from the “Login” component. I am completely a newbie to React JS. Any help is much appreciated.
Login Component
import { useNavigate } from "react-router-dom";
import { ToastContainer, toast } from 'react-toastify';
export default function Login() {
const nav = useNavigate();
const authenticateUser = () => {
const endpoint = `${baseUrl}/login`;
fetch(endpoint,
{
method: 'POST',
headers: {
'Content-Type': 'application/json'
},
body: JSON.stringify(loginState)
}).then(response => response.json())
.then(data => {
if (data.statusCode === 200) {
let toastMsg = data.message;
nav("/dashboard",{toastMsg: toastMsg});
}
}).catch(error => console.log(error))
}
}
Dashboard Component
import { ToastContainer, toast } from 'react-toastify';
import 'react-toastify/dist/ReactToastify.css';
import {useLocation} from 'react-router-dom';
const Dashboard = () => {
const location = useLocation();
console.log(location)
toast(location.toastMsg);
return (
<div>
<p>Welcome to your Dashboard</p>
<ToastContainer />
</div>
);
};
export default Dashboard;
I wanna switch between two classnames in one element in react by clicking a button. When I click the “Solution” button, the classname of the h1 changes from “solution” to “”, but the classname of “blur” stays. My goal is that the classname of “blur” changes to “unblur” when clicking the “Solution” button.
import React from 'react'
import {useState, useEffect} from "react";
import "./Celeb.css"
import images from "../Index.json"
function Celeb() {
const [image, setImage] = useState();
const [name, setName] = useState();
const [unblur, setUnblur] = useState(true);
const [unblurSolution, setUnblurSolution] = useState(true);
const [imageList, setImageList] = useState(images);
...
return (
<div className='celeb'>
<div className='celeb_buttons'>
<button className='play_button' onClick={handleNext}>Next</button>
<button className='play_button' onClick={()=> setUnblur(!unblur)}>Start</button>
<button className='play_button' onClick={()=> setUnblurSolution(!unblurSolution)}>Solution</button>
</div>
<div className='pic'>
<img className={unblur ? "blur" : "unblur"} {...unblurSolution ? "solution" : "unblur"} src={image} />
<h1 className={unblurSolution ? "solution" : ""}>{name}</h1>
</div>
</div>
)
}
I am trying to build simple full stack application by using T3 (Next – /pages, tRPC, Prisma, Next-Auth).
Because my application is based on user specific data, I am trying to add user preference page for setting user based UI.
I tried to store the preference data to the backend and fetch it to the client with the SSR rendering method to adjust the UI before they got mounted to prevent flickering Issues and such.
But the problem is, I can’t access the client side object (window, document etc) when they are rendered on the server which means I can’t set CSS classnames to any elements.
After this, I tried different approach with the cookie / local storage but the results are almost same because local storage is also client object and for cookie I can’t set CSS classnames.
If I choose to compromise and use useEffect to wait until the client get hydrated with the JS, I get another issue for flickering UI.
I researched about the problem and found some solutions about the injecting script tag before the client script mounted inside _document.tsx but I am not sure if I can utilize this for setting backgrounds inside Layout components (I am thinking for setting animated lottie-backgrounds).
I am completely lost right now and cannot come up with any kind of ideas.
What approach can I take in this situation?
How can I attach client / backend to generate selectable UI?
Should I just give up this features or take different approach the implement?
Thank you for reading!
Researched hours and hours
Read related docs and blogs
i want the options push down other code when they open but it is not working
<select className="text-2xl text-black mt-8 border-b-2 border-grey pb-3 " title={<><TfiServer className="inline-block w-fit" /> سرور ها</>} id="basic-nav-dropdown">
<option className=""> <Link to="/t">سرور ها</Link></option>
<option className=""><Link to="/">اضافه کردن سرور جدید</Link></option>
</select>
<select className="text-2xl text-black mt-8 border-b-2 border-grey pb-3 " title={<><SlWrench className="inline-block w-fit" /> کانفیگ ها</>} id="basic-nav-dropdown">
<option className=""><Link to="/">کل کانفیگ ها</Link> </option>
<option className=""><Link to="/">ایجاد کانفیگ جدید</Link></option>
<option className=""><Link to="/">مشاهده ی لاگ های کانفیگ</Link></option>
</select>
<select className="text-2xl text-black mt-8 border-b-2 border-grey pb-3 " title={<><MdOutlineHomeRepairService className="inline-block w-fit" /> سرویس های من </>} id="basic-nav-dropdown">
<option className=""> <Link to="/">لایسنس ها</Link></option>
<option className=""> <Link to="/">سرویس های بک آپ</Link></option>
<option className=""><Link to="/">سرویس های LookUp</Link></option>
<option className=""><Link to="/">سفارش سرویس جدید</Link></option>
<option className=""><Link to="/">انتقال لایسنس از اکانت دیگر</Link></option>
</select>
i tried to give them display block or position relative but still doesn’t worked i have tried it with bootstrap navbar components and it was okay but now that i am trying to do it with html tag and tailwind it doesn’t worked
I am developping a nodejs web app, one of the features the app should have is launching the scan (send scan job to the printer) from the web app and get back the result (pdf file contains the scanned documents) from the printer.
is there any hints or libraries could help ?
if no, is there a path where I can start to develop it from scratch ?
Thanks in advance.
I have searched for existing libraries but I didn’t find a thing.