Blancer.com Tutorials and projects
Freelance Projects, Design and Programming Tutorials
Category Added in a WPeMatico Campaign
To replicate the scenario please check this, as Add Age button is click whem memoization is not there it re-renders and updates the table but when I introduce memo, my table does not get updated. What to do?
https://codesandbox.io/p/sandbox/tyv23h
I tried using isEqual for deep comparison, but my prevProps and nextProps always come equal. They should be different.
Explaination
Tools: Bootstrap v5.3.3, VS2022, C# Razor Pages, MSSQL Server
I am using some form-check-input to show which services are enabled, with data retrieved from the MSSQL Server database.
If a service is enabled and i want to disable it, through a popup, submit button form.
PS: The client’s list and the services are shown into a table and through a edit button the values are passed to the ‘Edit’ popup.
What i have tried so far, but they do not show a checked checkbox:
value=”1″; value=”true”; value=”True”;
From the database i get a bool value (true/false).
Question
What value can i assign to the form-check-input for it to show checked?
The code
<div class="form-group form-check text-center w-25">
<label class="form-check-label border rounded-2 ">
<input class="form-check-input " asp-for="ClienteServices.Serv1" id="Serv1" value="true" /> Service_1
</label>
</div>
I have some components that I build with Vite which works fine
import './bootstrap'
import { createApp } from 'vue'
const app = createApp({});
app.mount('#app')
I also have this piece of code that I need to add in but I’ve got no idea how to do it. It doesn’t have a template and the html is already declared elsewhere. I just want Vue to be able to detect click events in the DOM.
I’ve seen ways where you use a CDN to grab Vue but seeing as I already build with it, it seems pointless. I just need a way I can add this code to the build.
new Vue({
el: '#app',
data() {
return {
windowWidth: window.innerWidth,
windowHeight: window.innerHeight,
};
},
mounted() {
// Add a global event listener
// for window resize
window.addEventListener('resize', this.handleWindowSizeChange);
document.getElementsByClassName('.arrow-collapse')
.addEventListener('click', this.handleArrowCollapseClick(e));
document.getElementsByClassName('.js-menu-toggle')
.addEventListener('click', this.handleJsMenuToggleClick(e));
window.addEventListener('mouseup', this.handleMouseUpEvent(e));
},
beforeDestroy() {
// Remove the event listener when
// the component is destroyed
window.removeEventListener('resize', this.handleWindowSizeChange);
window.removeEventListener('click', this.handleArrowCollapseClick);
window.removeEventListener('click', this.handleJsMenuToggleClick);
window.removeEventListener('mouseup', this.handleMouseUpEvent);
},
methods: {
handleWindowSizeChange() {
// Update data properties with
// new window dimensions
this.windowWidth = window.innerWidth;
this.windowHeight = window.innerHeight;
if(transferableAbortSignal.windowWidth > 768) {
if(document.body.classList.contains('offcanvas-menu')) {
document.body.classList.remove('offcanvas-menu')
}
}
},
handleArrowCollapseClick(e) {
if(e.closest('li')
.querySelector('.collapse')
.classList.contains('show')) {
document.querySelector('.arrow-collapse').classList.remove('active')
} else {
document.querySelector('.arrow-collapse').classList.add('active')
}
e.preventDefault();
},
handleJsMenuToggleClick(e) {
if(document.body.classList.contains('offcanvas-menu')) {
document.body.classList.remove('offcanvas-menu');
e.target.classList.remove('active')
} else {
document.body.classList.add('offcanvas-menu');
e.target.classList.add('active')
}
e.preventDefault();
},
handleMouseUpEvent() {
var container = document.querySelector('.site-mobile-menu');
if (!container.is(e.target) && container.has(e.target).length === 0) {
if(document.body.classList.contains('offcanvas-menu')) {
document.body.classList.remove('offcanvas-menu');
}
}
}
},
});
I did think about trying to create a plugin but not sure if I’ve done it right.
const MyPlugin = {
// eslint-disable-next-line no-unused-vars
install(Vue, options) {
Vue.mixin({
Vue.handleWindowSizeChange = function() {
// Update data properties with
// new window dimensions
this.windowWidth = window.innerWidth;
this.windowHeight = window.innerHeight;
if(transferableAbortSignal.windowWidth > 768) {
if(document.body.classList.contains('offcanvas-menu')) {
document.body.classList.remove('offcanvas-menu')
}
}
},
Vue.handleArrowCollapseClick = function(e) {
if(e.closest('li')
.querySelector('.collapse')
.classList.contains('show')) {
document.querySelector('.arrow-collapse').classList.remove('active')
} else {
document.querySelector('.arrow-collapse').classList.add('active')
}
e.preventDefault();
},
Vue.handleArrowCollapseClick = function(e) {
if(e.closest('li')
.querySelector('.collapse')
.classList.contains('show')) {
document.querySelector('.arrow-collapse').classList.remove('active')
} else {
document.querySelector('.arrow-collapse').classList.add('active')
}
e.preventDefault();
},
Vue.handleJsMenuToggleClick = function(e) {
if(document.body.classList.contains('offcanvas-menu')) {
document.body.classList.remove('offcanvas-menu');
e.target.classList.remove('active')
} else {
document.body.classList.add('offcanvas-menu');
e.target.classList.add('active')
}
e.preventDefault();
},
Vue.handleMouseUpEvent = function() {
var container = document.querySelector('.site-mobile-menu');
if (!container.is(e.target) && container.has(e.target).length === 0) {
if(document.body.classList.contains('offcanvas-menu')) {
document.body.classList.remove('offcanvas-menu');
}
}
},
mounted() {
// Add a global event listener
// for window resize
window.addEventListener('resize', this.handleWindowSizeChange);
document.getElementsByClassName('.arrow-collapse')
.addEventListener('click', this.handleArrowCollapseClick(e));
document.getElementsByClassName('.js-menu-toggle')
.addEventListener('click', this.handleJsMenuToggleClick(e));
window.addEventListener('mouseup', this.handleMouseUpEvent(e));
},
});
}
};
export default MyPlugin;
Here is source code: https://github.com/puncika/interactive_invoice_project
Hi everyone!
I’m working on a project where I’m generating invoices in PDF format using jsPDF, and I’ve run into an issue with custom fonts and UTF-8 encoding.
I’ve added a custom font to jsPDF, and it works for standard text. However, when I try to include special characters like č, š, ž, or accents (á, é, etc.), they don’t render correctly in the downloaded PDF. It seems the encoding isn’t being applied properly.
Here’s what I’ve tried so far:
Vue/React with jsPDF, and the special characters like (č, š, ž) and (á, é, etc.) rendered correctly in the PDF. I’d like to know if there’s something I might be missing or if their setup differs from mine.(using the addFileToVFS and addFont methods).These pricing rules will enable publishers to boost CPMs and fill rates for their inventory.
By setting up these rules, bids received from the advertisers for an ad request chosen to be eligible or ineligible to participate in the auction i.e., any bid below the UPR floor will not be eligible to serve.
It allows publishers to protect their ad inventory from being sold at a price at which they were intended to sell.
Inventory by Ad Unit
Geography
Position
Device Category
Inventory Type – Display, Video, Mobile App
Video Position – Pre/Mid/Post Roll
Custom key-value targeting
Operating System
Fold
Browser
Inventory Format
Where do UPR rules apply?
Unified rules are neither omni-present nor can be used everywhere as per our choice. It has some restrictions which are mentioned below:
UPR applies here ✅ UPR Doesn’t Apply here ❌
Private Auctions Direct
Open Auction Programmatic Guaranteed
First Look demand Programmatic deals
Third party exchanges that participates in Open Bidding House line item
Remnant line item types Price priority, Network & Bulk Remnant line items with a zero rate
Ad Exchange linked accounts May not apply to CPC line items on all requests
AdSense backfill
Different Types of Floors in UPR:
There are 3 different types of floors namely Hard floor, Soft floor (Target CPM) and Google optimized floors.
Hard Floor: In this, if we fix a floor that becomes static. Anything below that value will be rejected.
For ex: If we set the floor at $4, even $3.9 or $3.95 can be rejected.
Soft Floor (Target CPM): Here if we fix a floor, the nearest to the floor will be accepted in case if the bid value is less and the highest bid will be considered in case if the bid value crosses the floor.
For ex: If we set the floor at $4, among $4.5, $4.0, $4.9 – the bid value of $4.9 will be selected. And among $3.2, $3.6, & $2.8 – the bid value of $3.6 will be selected.
Google optimized floor: Google automatically sets floors based on bidder behavior
It’s a feature of Google Ad Manager that uses machine learning to automatically increase auction floor prices to more accurately reflect and protect your inventory value. Optimized pricing is enabled by default, but can be disabled via your network settings.
Once upon a time, there was a method called “Second Price Auction” which allowed the winner to pay a cent higher than the second highest bid.
Ex: A bids a price of $7 while B bids $8. Here, B comes out as the winner who won the auction but pays only $7.01
Understanding the logic, many Bs started to bid at higher and higher values only to pay the second highest bid.
Some good guys in town wanted to create a fair marketplace by checking them with First Price Auction & UPR.
In the First Price Auction, the winner should pay the value of what exactly they bid. It made the buyers cautious about what they were bidding.
There isn’t such a thing as called Ideal set up because of the fact that ‘one size doesn’t fit for all’. Wait, but we can work on setting up an almost ideal UPR set up by understanding………Read More
UPR & its Ideal setup to maximize yield
I am creating an animated html, css and jacavaript nav toggler for a therapy website which I have finally got working on all devices-but I am having trouble making it smaller without affecting the alignment of the cross after activating the toggler. This is my code:
<!Doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<!-- Bootstrap CSS-5.3.3 -->
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-QWTKZyjpPEjISv5WaRU9OFeRpok6YctnYmDr5pNlyT2bRjXh0JMhjY6hW+ALEwIH" crossorigin="anonymous">
<!--Font Awesome-->
<link rel="stylesheet" type="text/css" href="assets/css/font-awesome.css">
<!-- Latest jQuery library for plugins that require it-->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
<style type="text/css">
/*=========================Header========================*/
/*Navbar*/
.navbar{
position: absolute;
width: 100%;
top: 0;
}
/*hero banner*/
.hero-image{
/* Set a specific height */
height: 267px;
background-color:green;
/* Position and center the image to scale nicely on all screens */
background-position: center;
background-repeat: no-repeat;
background-size: cover;
position: relative;
}
/* Place text in the middle of the image */
.hero-text {
text-align: center;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
color: white;
}
/*Hamburger toggler*/
button {
cursor: pointer;
background: none;
border: none;
outline: none;
appearance: none;
}
.btns {
display: flex;
flex-wrap: wrap;
justify-content: center;
}
.btns_item {
margin: 0 20px;
text-align: center;
}
/* ------------------------------------------------------------ * #02 * ------------------------------------------------------------ */
.btnMenu02 {
width: 100px;
height: 100px;
background-color: #000;
}
.btnMenu02 > span {
display: block;
transition: all 0.4s ease-in-out;
}
.btnMenu02 > span > span, .btnMenu02 > span::before, .btnMenu02 > span::after {
display: block;
width: 70%;
height: 8px;
margin: 12px auto;
content: '';
background-color: #fff;
border-radius: 4px;
transition: all 0.2s ease-in-out;
}
.btnMenu02.is-open > span {
transform: rotate(180deg);
}
.btnMenu02.is-open > span > span {
opacity: 0;
}
.btnMenu02.is-open > span::before {
transform: translateY(20px) rotate(-45deg);
}
.btnMenu02.is-open > span::after {
transform: translateY(-20px) rotate(45deg);
}
/*//Hamburger toggler*/
</style>
</head>
<body>
<header>
<div class="hero-image">
<img class="hero-image" src="assets/images/banner.png" alt="">
<div class="hero-text">
<h2 style="font-size: 20px">Natural Therapist</h2>
<button>Hire me</button>
</div>
</div>
<!--Nav-->
<nav class="navbar navbar-default navbar-expand-lg ">
<div class="container-fluid">
<a class="navbar-brand " href="#">Logo</a>
<button class="navbar-toggler btnMenu02 js-btnMenu" type="button" data-bs-toggle="collapse" data-bs-target="#navbarToggler" aria-controls="navbarTogglerDemo" aria-expanded="false" aria-label="Toggle navigation">
<span><span></span></span>
</button>
<div class="collapse navbar-collapse " id="navbarToggler">
<ul class="navbar-nav mb-2 mb-lg-0">
<li class="nav-item">
<a class="nav-link active" aria-current="page" href="#">Home</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Link</a>
</li>
<li class="nav-item">
<a class="nav-link disabled" href="#" tabindex="-1" aria-disabled="true">Disabled</a>
</li>
</ul>
</div>
</div>
</nav>
<!--/Nav-->
</header>
<script type="text/javascript">
$(function() {
$('.js-btnMenu').on('click', function() {
$(this).toggleClass('is-open');
});
});
</script>
<!--//Header
==================================-->
<!-- javascript (necessary for Bootstrap's JavaScript plugins) -->
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-YvpcrYf0tY3lHB60NNkmXc5s9fDVZLESaAA55NDzOxhy9GkcIdslK1eN7N6jIeHz" crossorigin="anonymous"></script>
<!--personal javascripts-->
<script src="assets/js/main.js"></script>
</body>
</html>
Basically, I am wanting this hamburger toggler to be of a smaller size suitable for a website or mobile. After much research and modifying the codes, I just find that altering the width and height of the .btnMenu02 abd changing the height of the span linesof the .btnMenu02 > span > span, .btnMenu02 > span::before, .btnMenu02 > span::after makes the cross icon kind of wonky and out of alignment.
Is there a trick to resizing this toggler and making it smaller without affecting the alignment of the cross icon?
I have a working javascript I use that goes through a folder of indd files and finds tables with a certain word, and then extracts the text from specified cells in the table. It’s worked perfectly (shout out to Yuri Khristich!), but I’ve come across a series of documents where the table has merged cells, which is causing errors.
I’d like to modify the script so that once it finds the table, it selects all of the cells and performs the Unmerge function. We run this script on duplicates as a precautionary measure, so I have no need to re-merge the cells after completion.
I found this snippet in my searches, but it only works on a single file that is already open. It seems like it’s what I need I just don’t know what I need to change on it to make it work within my other script:
app.activeDocument.stories.everyItem().tables.everyItem().cells.everyItem().unmerge();
Below is the extraction script that I need to modify.
// dialog to select a folder if there are no open documents
if (app.documents.length == 0) {
var from_folder = true;
var folder = Folder.selectDialog('Select a folder with INDD files...');
var files = folder.getFiles('*.indd');
if (files.length == 0) {
alert('No INDD files was found in the folder')
exit();
}
}
// if there are open documents process them
else {
var from_folder = false;
var files = app.documents;
}
// get the data from all tables in each of the documents
var all_data = [];
for (var i = 0; i < files.length; i++) {
if (from_folder) var doc = app.open(files[i]);
else var doc = files[i];
var data = get_data_from_doc(doc);
if (data) while (data.length) all_data.push(data.shift());
if (from_folder) doc.close();
}
// if there is data, put it on the page of a new document
if (all_data.length > 0) {
var doc = app.documents.add();
var frame = doc.pages[0].textFrames.add();
frame.geometricBounds = doc.pages[0].bounds;
frame.contents = all_data.join('r');
frame.parentStory.texts[0].convertToTable();
} else {
alert('No data was found');
}
// functions ------------------------------------------------------------------
function get_data_from_doc(doc) {
var tables = get_all_tables_from_doc(doc);
if (!tables || tables.length == 0) return;
var data = get_data_from_all_tables(tables, doc);
if (data && data.length > 0) return data;
}
function get_all_tables_from_doc(doc) {
var stories = doc.stories;
var all_tables = [];
for (var i = 0; i < stories.length; i++) {
var tables = stories[i].tables;
for (var j = 0; j < tables.length; j++) all_tables.push(tables[j]);
}
if (all_tables.length > 0) return all_tables;
}
function get_data_from_all_tables(tables, doc) {
var data = [];
for (var i = 0; i < tables.length; i++) {
var table = tables[i];
var data_row = get_data_from_table(table, doc);
if (data_row) data.push(data_row);
}
if (data.length > 0) return data;
}
function get_data_from_table(table, doc) {
var cell = get_cell_with_word(table, 'CHARACTERISTICS');
if (cell) {
var index = cell.parentRow.index;
var cell_1 = table.rows[index+5].cells[1].contents;
var cell_2 = table.rows[index+6].cells[1].contents;
var cell_3 = table.rows[index+1].cells[3].contents;
var cell_4 = table.rows[index+1].cells[3].contents;
var cell_5 = table.rows[index+2].cells[3].contents;
var cell_6 = table.rows[index+3].cells[3].contents;
var cell_7 = table.rows[index+5].cells[3].contents;
var cell_8 = table.rows[index+6].cells[3].contents;
var cell_9 = table.rows[index+7].cells[3].contents;
var cell_10 = table.rows[index+8].cells[3].contents;
var cell_11 = table.rows[index+9].cells[3].contents;
return [doc.name, cell_1, cell_2, cell_3, cell_4, cell_5, cell_6, cell_7, cell_8, cell_9, cell_10, cell_11].join('t');
}
}
function get_cell_with_word(table, word) {
var cells = table.cells;
for (var i = 0; i < cells.length; i++) {
if (cells[i].contents.toUpperCase() == word) return cells[i];
}
}
And here is a screenshot of one of the tables if it helps visualize what I’m working with.
I know that it is possible to get innerText values with javascript in an HTA file, like in the example below:
<html>
<head>
<style>
.testCss::after {
content: "I want to pull this with javascript";
}
</style>
<HTA:APPLICATION
ID="testApp"
BORDER="thin"
CAPTION="yes"
SHOWINTASKBAR="yes"
SINGLEINSTANCE="yes"
SCROLL="no"
/>
<meta http-equiv="x-ua-compatible" content="IE=edge">
</head>
<body>
<div id="example_of_id">Some inner text that will be pulled</div>
</body>
<script language="javascript">
var test2 = document.getElementById("example_of_id").innerText;
// what about getting a css value though?
</script>
</html>
This will successfully pull the inner text from the id specified.
I was wondering if the same can be done to pull css values like the one in the example, because until now I did not have any luck finding examples regarding this issue nor did my manual attempts lead to any luck.
P.S. I know that probably this is pointless, but I just had this idea the other day because I have never seen anything like that.
I see some use:
var dom = document.getElementById('id');
var myChart = echarts.init(dom);
and others:
myChart = echarts.init(document.getElementById('id'));
Is one preferable for some reason or is it just a matter of choice? I prefer the second as it saves a line of code
I have written a simple iterator that I’d like to break from when a specific condition is met. However, it does not do so when the condition is met. Below is the iterator and skeleton classes to show how it is implemented and called by searchByDate function. The issue is that is does not break even though it goes into the loop and the value 15 is always printed, which is the limit for the Order searches. It should break when it find the current Order, but it doesn’t even though the order is found
import { plusDays} from "./dateUtils.ts";
import {
isEmpty,
} from "./collection-utils";
export class DateIterator {
date: Date
limit = 15
currentCount = 0
constructor(date:Date) {
this.date = date
}
next() {
if (this.currentCount <= this.limit) {
const search = plusDays(this.date.toDateString(),1)
console.warn({currentNumberOfDays: this.currentCount}, 'Number of days iterated')
this.currentCount++
return { done: false, value: search}
}
else
{
return {
done: true,
value: this.date
}
}
}
}
export class DateIncrementor {
initDate: Date
constructor(initialDate:Date) {
this.initDate = initialDate
}
[Symbol.iterator]() {
return new DateIterator(this.initDate);
}
}
class Order {
//...
orderItems = ()
}
class OrderService {
getOrdersForDate = async(date:string) =>{
return new Order()
}
isCurrentOrder = (orderDetails:Order) =>{
return true
}
}
const searchByDate = async(date:Date) => {
const orderService = new OrderService()
const nextDaySearchIterator = new DateIncrementor(date)
let count = 0
let result = {} as Order
for await (let currentDate of new DateIncrementor(date) ){
count+=1
if(date){
const orderDetails:Order = await orderService.getOrdersForDate(currentDate)
if(orderService.isCurrentOrder(orderDetails)) {
if(!isEmpty(orderDetails.orderItems)){
result = orderDetails
break
}
}
}
}
console.log('Number of executions of iterator',count)
return result? result : null
}
I’m trying to make carousel with 3 items displayed that the width scales of 100%/3 of its parent.
The next prev button works fine and the show-hide function works well if only they reach the edge of the element [0] and [1].
If I start from [0] the prev button still hidden and when I press the next button, the item will be scrolled perfectly and the prev button will be shown, but when I reach the last item the next button doesn’t hide immediately unless I press once again, then it will be hidden, same as the prev button, if I go back to the first element it won’t immediately hidden, unless I press once again.
I want the next prev button to be hidden as soon as I have displayed the first/last 3 items
const carousel = document.querySelector(".container5-carousel");
const firstDiv = carousel.querySelectorAll(".carousel-item")[0];
const carouselBtn = document.querySelectorAll(".carousel-button i");
let firstDivWidth = firstDiv.clientWidth + 14;
let scrollWidth = carousel.scrollWidth - carousel.clientWidth;
const showHideButton = () => {
carouselBtn[0].style.display = carousel.scrollLeft == 0 ? "none" : "block";
carouselBtn[1].style.display = carousel.scrollLeft == scrollWidth ? "none" : "block";
}
carouselBtn.forEach(btn => {
btn.addEventListener("click", () => {
if (btn.id == "prev") {
carousel.scrollLeft -= firstDivWidth;
} else {
carousel.scrollLeft += firstDivWidth;
}
setTimeout(() => showHideButton(), 60);
})
});.container5 {
width: 100%;
margin: auto;
align-items: center;
background-color: #fdd8d8;
padding: 2rem 0;
}
.container5-subcontainer {
width: 100%;
position: relative;
}
.carousel-wrapper {
width: 80%;
max-width: 1200px;
height: fit-content;
margin: 0 auto;
position: relative;
padding: 1rem 0;
}
.container5-carousel {
margin: 0 auto;
display: grid;
grid-auto-flow: column;
grid-auto-columns: calc((100%/3) - 2rem);
overflow: hidden;
padding: 2rem 0;
gap: 3rem;
white-space: nowrap;
scroll-behavior: smooth;
overflow-x: auto;
scroll-snap-type: x mandatory;
scroll-padding: 0;
}
.carousel-item {
border-radius: 15px;
background-color: #ffffff;
box-shadow: 0 -0.4rem 1rem 0.2rem rgba(0, 0, 0, 0.12);
scroll-snap-align: center;
}
.carousel-button i {
font-size: 1.5rem;
color: #222222;
width: 50px;
height: 50px;
line-height: 50px;
text-align: center;
border-radius: 50%;
background-color: #ffffffc4;
margin: 0;
box-shadow: 3px 3px 9px 5px rgba(0, 0, 0, 0.12);
position: absolute;
min-width: 50px;
min-height: 50px;
cursor: pointer;
}
.carousel-button i:first-child {
left: 0;
display: none;
}
.carousel-button i:last-child {
right: 0;
}<div class="container5">
<h1>Portfolio!</h1>
<div class="container5-subcontainer">
<div class="carousel-wrapper">
<div class="carousel-button">
<i id="prev" class="fa-solid fa-angle-left"></i>
<i id="next" class="fa-solid fa-angle-right"></i>
</div>
<div class="container5-carousel">
<div class="carousel-item">
<img class="carousel-img" src="assets/img/sample2.jpg" alt="">
<h2>Product Title</h2>
<p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Accusantium recusandae deleniti voluptates pariatur modi illo corporis obcaecati repudiandae perferendis tempore dolor consequatur dolorem, alias magni id sequi libero amet eaque!</p>
</div>
<div class="carousel-item">
<img class="carousel-img" src="assets/img/sample3.jpg" alt="">
<h2>Product Title</h2>
<p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Accusantium recusandae deleniti voluptates pariatur modi illo corporis obcaecati repudiandae perferendis tempore dolor consequatur dolorem, alias magni id sequi libero amet eaque!</p>
</div>
<div class="carousel-item">
<img class="carousel-img" src="assets/img/sample4.jpg" alt="">
<h2>Product Title</h2>
<p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Accusantium recusandae deleniti voluptates pariatur modi illo corporis obcaecati repudiandae perferendis tempore dolor consequatur dolorem, alias magni id sequi libero amet eaque!</p>
</div>
<div class="carousel-item">
<img class="carousel-img" src="assets/img/sample5.jpg" alt="">
<h2>Product Title</h2>
<p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Accusantium recusandae deleniti voluptates pariatur modi illo corporis obcaecati repudiandae perferendis tempore dolor consequatur dolorem, alias magni id sequi libero amet eaque!</p>
</div>
<div class="carousel-item">
<img class="carousel-img" src="assets/img/sample6.jpg" alt="">
<h2>Product Title</h2>
<p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Accusantium recusandae deleniti voluptates pariatur modi illo corporis obcaecati repudiandae perferendis tempore dolor consequatur dolorem, alias magni id sequi libero amet eaque!</p>
</div>
<div class="carousel-item">
<img class="carousel-img" src="assets/img/sample2.jpg" alt="">
<h2>Product Title</h2>
<p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Accusantium recusandae deleniti voluptates pariatur modi illo corporis obcaecati repudiandae perferendis tempore dolor consequatur dolorem, alias magni id sequi libero amet eaque!</p>
</div>
<div class="carousel-item">
<img class="carousel-img" src="assets/img/sample3.jpg" alt="">
<h2>Product Title</h2>
<p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Accusantium recusandae deleniti voluptates pariatur modi illo corporis obcaecati repudiandae perferendis tempore dolor consequatur dolorem, alias magni id sequi libero amet eaque!</p>
</div>
<div class="carousel-item">
<img class="carousel-img" src="assets/img/sample4.jpg" alt="">
<h2>Product Title</h2>
<p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Accusantium recusandae deleniti voluptates pariatur modi illo corporis obcaecati repudiandae perferendis tempore dolor consequatur dolorem, alias magni id sequi libero amet eaque!</p>
</div>
<div class="carousel-item">
<img class="carousel-img" src="assets/img/sample5.jpg" alt="">
<h2>Product Title</h2>
<p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Accusantium recusandae deleniti voluptates pariatur modi illo corporis obcaecati repudiandae perferendis tempore dolor consequatur dolorem, alias magni id sequi libero amet eaque!</p>
</div>
<div class="carousel-item">
<img class="carousel-img" src="assets/img/sample6.jpg" alt="">
<h2>Product Title</h2>
<p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Accusantium recusandae deleniti voluptates pariatur modi illo corporis obcaecati repudiandae perferendis tempore dolor consequatur dolorem, alias magni id sequi libero amet eaque!</p>
</div>
<div class="carousel-item">
<img class="carousel-img" src="assets/img/sample2.jpg" alt="">
<h2>Product Title</h2>
<p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Accusantium recusandae deleniti voluptates pariatur modi illo corporis obcaecati repudiandae perferendis tempore dolor consequatur dolorem, alias magni id sequi libero amet eaque!</p>
</div>
</div>
<div class="container5-vm flex-grow">
<a class="content5-button" href="#">View More → </a>
</div>
</div>
</div>
</div>Clearly explain your issue, for example:
I’m working on a project in plain HTML, CSS, and JavaScript. I use an image hosted on Imgur (https://i.imgur.com/JiwDusX.jpeg) as the background for a canvas.
The image loads fine on desktop browsers and some mobile devices.
However, it fails to load on certain phones (e.g., iPhones or specific Android devices).
Problem encountered:
When the image doesn’t load, it doesn’t appear at all. There are no specific error messages in the browser console.
Hypotheses:
It could be a compatibility issue with Imgur hosting.
It might be related to CORS restrictions or the image format.
Describe what you’ve already tried, for example:
Checked the image URL directly in mobile browsers:
It works fine on desktops but inconsistently on some phones.
Added crossOrigin = “Anonymous” when loading the image in JavaScript, but the issue persists.
Tested different browsers (Chrome, Safari, etc.), but the results vary.
Expected result:
I expected the image to load correctly on all devices.
app on live: https://forex-flyer.vercel.app/
load image function
---javascript
async loadFlyerBase() {
try {
const flyerUrlJpg = 'https://i.imgur.com/JiwDusX.jpeg';
const flyerUrlWebP = '/forex.webp';
// Détection support WebP
const isWebPSupported = this.isWebPSupported();
const flyerUrl = isWebPSupported ? flyerUrlWebP : flyerUrlJpg;
// Tentative de récupération depuis le cache
if ('caches' in window) {
const cache = await caches.open('flyer-cache-v2');
let cachedResponse = await cache.match(flyerUrl);
if (!cachedResponse) {
await cache.add(flyerUrl);
cachedResponse = await cache.match(flyerUrl);
}
if (cachedResponse) {
const blob = await cachedResponse.blob();
this.flyerBase = await this.loadImage(URL.createObjectURL(blob));
}
}
// Si pas de cache, chargement direct
if (!this.flyerBase) {
this.flyerBase = await this.loadImage(flyerUrl);
}
await this.renderFlyer();
this.showProgress(100);
} catch (error) {
console.error('Erreur chargement base:', error);
this.showMessage('Erreur lors du chargement du modèle', 'error');
throw error;
}
}
// Méthode de détection WebP
isWebPSupported() {
try {
return document.createElement('canvas')
.toDataURL('image/webp')
.indexOf('data:image/webp') === 0;
} catch(err) {
return false;
}
}
loadImage(src) {
return new Promise((resolve, reject) => {
const img = new Image();
img.onload = () => resolve(img);
img.onerror = () => reject(new Error(`Chargement image échoué: ${src}`));
img.crossOrigin = 'Anonymous';
img.src = src;
});
}
async handleImageUpload(event) {
const file = event.target.files[0];
if (!file) return;
// Validation du format
const validTypes = ['image/jpeg', 'image/png', 'image/webp'];
if (!validTypes.includes(file.type)) {
this.showMessage('Format non supporté. Utilisez JPG, PNG ou WebP', 'error');
return;
}
// Validation de la taille
if (file.size > 10 * 1024 * 1024) {
this.showMessage('Image trop volumineuse (max 10 Mo)', 'error');
return;
}
this.loadingOverlay.style.display = 'flex';
this.showProgress(0);
try {
// Compression de l'image avant traitement
const compressedFile = await this.compressImage(file);
const imageUrl = URL.createObjectURL(compressedFile);
this.cropperImage.onload = () => {
this.previewPlaceholder.style.display = 'none';
this.cropperImage.style.display = 'block';
if (this.cropper) {
this.cropper.destroy();
}
// Configuration du cropper
this.cropper = new Cropper(this.cropperImage, {
aspectRatio: 1,
viewMode: 2,
dragMode: 'move',
autoCropArea: 0.8,
restore: false,
guides: true,
center: true,
highlight: false,
cropBoxMovable: true,
cropBoxResizable: true,
toggleDragModeOnDblclick: false,
minContainerWidth: 250,
minContainerHeight: 250,
});
this.cropBtn.disabled = false;
this.loadingOverlay.style.display = 'none';
this.showMessage('Image chargée avec succès', 'success');
};
this.cropperImage.src = imageUrl;
} catch (error) {
console.error('Erreur traitement image:', error);
this.showMessage('Erreur lors du traitement de l'image', 'error');
this.loadingOverlay.style.display = 'none';
}
}
I have a Vue.js application and I would like to know how to read and use the external properties file. Then I need to use this properties inside the components.
I would also like to know if is it possible in Vue.js to use service files as per Angular and call them inside the components. I think I need to use the service because it should be used by all components.
For Example: I have Vue.js component and inside it I need to retrieve a property from the external file. I would like to call the service function for getting the property by passing its name.
I want to specify that I cannot use .env or any of its variations like .env.production for this.
I’m a ReactJS developer I decided to enhance my knowledge in Web Development in general it led me into diping my toe in water and trying Angular by developing an application that relies on RxDB.
I’m trying to make RxDB database accessible globally first thing I did is wrapping RxDB database inside an Angular service:
import { Injectable } from '@angular/core';
import { createRxDatabase, RxDatabase } from 'rxdb';
import { ItemCollection, itemSchema } from '../items/items.schema';
import { getRxStorageMemory } from 'rxdb/plugins/storage-memory';
type MyDatabaseCollections = {
items: ItemCollection;
};
type MyDatabase = RxDatabase<MyDatabaseCollections>;
@Injectable({
providedIn: 'root',
})
export class DatabaseService {
private static database: MyDatabase;
constructor() {}
async initDatabase(): Promise<void> {
if (!DatabaseService.database) {
const db = await createRxDatabase<MyDatabaseCollections>({
name: 'mydb',
storage: getRxStorageMemory(),
});
await db.addCollections({
items: {
schema: itemSchema,
},
});
DatabaseService.database = db;
}
}
getDatabase(): MyDatabase {
if (!DatabaseService.database) {
throw new Error('Database not initialized yet');
}
return DatabaseService.database;
}
}
and inside the root app app.config.ts is where the initializing of the service happens:
providers: [
DatabaseService,
provideAppInitializer(() => inject(DatabaseService).initDatabase()),
],
Finally inside items.component.ts which is where I’m accessing the data the earliest:
@Component({
selector: 'app-items',
imports: [ToastModule],
templateUrl: './items.component.html',
})
export class ItemsComponent {
items: ItemType[] = [];
constructor(
private toastService: ToastService,
private databaseService: DatabaseService,
) {
this.getItems();
}
getItems() {
const db = this.databaseService.getDatabase();
const items = db.items.find().$;
items.subscribe((docs) => {
console.log(docs);
});
}
Is returning an error:
Database not initialized yet
“I want to create a sticky navigation bar that remains visible at the top of the page as the user scrolls. The navbar should adjust for different screen sizes and maintain its functionality on both desktop and mobile devices.”
I created a simple navigation bar with an id=”navbar” and used a ul and li structure for navigation links.
I expect the navigation bar to remain fixed at the top of the viewport when I scroll down the page, ensuring it’s always visible to the user.