Blancer.com Tutorials and projects
Freelance Projects, Design and Programming Tutorials
Category Added in a WPeMatico Campaign
I want to dynamically change a specific parameter in the navigation bar.
I have this url and want to change “pedro” by “max”:
http://mywebsite.com/?par1=mynameis&par2=pedro&par3=nicetomeetyou
By using this, it removes all my parameters.
hello = "max"
window.history.replaceState(null, null, "?par2="+hello);
This is what I want:
http://mywebsite.com/?par1=mynameis&par2=max&par3=nicetomeetyou
and not
http://mywebsite.com/?par1=mynameis&par2=max
I have created an appsync api and i wanted to intregate with cognito and Azure-AD for SSO. but in an not able to find any resources for that ho to setup SAML and URLs in azure-AD. right now i am not using Amplify. I wanted to do it without Amplify. just a basic call for graphql api with SSO and have restriction manipulation for data for diff AD-Group like viewer and admin
secure call to access graphql api from simple JS calls
I need to know the small small concepts before getting into web development. For example.. Developer tools, API, JSON values etc., I need a source that will be helpful for me to begin. I have been searching youtube etc., I cant able to find. Provide me some links which will be helpful to me
I searched a lot. There are many resources but i cant get a perfect one for me..
I have something like:
router.get("/", users)
const users = (req, res) => {
const begin = new Date().getTime()
// rest of the code
const end = new Date().getTime()
const duration = (begin - end) / 1000
res.send("something")
}
So I don’t want to repeat my self each time in every route like this, is there a way to make HOC/middleware to handle this? I tried several things, but can’t get my head around how to make it.
i have created a website speicifically for mobile devices using just html,css and javascript. The website is working fine in android devices when opened in any browser,
the live url is : [text] (https://thebrandchimp.com/cocofit/mobile)
i have set the viewport like this:
<meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1" />
the website is not aligned in iphone devices, can anyone please tell me how to fix this, thanks in advance
I’m on a project for which I had to learn the basics of React and Typescript. I’ve coded almost all the useful functions, but I could use some help on the very last function.
It’s a web extension that relies on ChatGPT to provide a chat interface. The project is here: https://github.com/VMirebeau/PhiloGPT/tree/master
It is heavily based on this project : https://github.com/chathub-dev/chathub
Here is what I would like to do: in the image below, you can see the “Hello” button in the left menu. When you click on this button, the text “Hello world” should be automatically filled in the text box at the bottom.
What I tried:
$.ajax({
url: //urlpart
method: 'POST',
data: {},
xhrFields: {
responseType: 'arraybuffer'
},
}).success(function(data) {
})
i am getting error like this “Failed to read the ‘responseText’ property from ‘XMLHttpRequest’: The value is only accessible if the object’s ‘responseType’ is ” or ‘text’ (was ‘arraybuffer’).”
I have a project for uni where i need to build a movie ticket website. I currently have a flexbox on the homepage with in it a series of flexboxes displaying a movie title, its poster and its duration. I now have the problem that the titles are of variable length giving issues with positioning. For example:
I want to align the images with the titles then moved up, how can I do this in css. I had the idea of using fixed positions, but because the flexbox is scrollable and of variable length, I cant use that. I’m looking for a way to set the y value of the img position to a fixed value, keeping the x free to change.
Code:
.content{
background: fixed;
background-image: url("/images/homepage_background.jpg");
background-position: center;
background-size: cover;
min-height: 100vh;
}
#movie-slider {
display: flex;
flex-direction: row;
overflow: auto;
gap: 10px;
padding: 0% 10%;
}
#movie-slider::-webkit-scrollbar {
height: 0;
}
.movie-banner {
margin-top: 150px;
flex-basis: 250px;
flex-shrink: 0;
display: flex;
flex-direction: column;
}
.movie-banner__image{
object-fit: cover;
height: 400px;
}
.movie-banner__title{
color: wheat;
text-align: center;
font-family: 'Bebas Neue', cursive;
font-size: 2em;
padding: 10px
}
.movie-banner__desc{
color: wheat;
font-size: 1.3em;
text-align: center;
}<html lang="en"><head>
<meta charset="UTF-8">
<title>Movie Tickets</title>
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin="">
<link href="https://fonts.googleapis.com/css2?family=Bebas+Neue&family=Teko:wght@300&display=swap" rel="stylesheet">
<link rel="stylesheet" href="/css/index.css">
<link rel="stylesheet" href="/css/general.css">
<!--<link rel="icon" href="../images/general/logo.jpg">-->
<style data-emotion="css"></style></head>
<body cz-shortcut-listen="true">
<label class="hamburger">
<i class="hamburger__icon"></i>
<i class="hamburger__icon"></i>
<i class="hamburger__icon"></i>
</label>
<nav class="nav-bar">
<div class="nav-bar__header">
<!--<img class="nav-bar__header-logo" src="#" alt="our logo">-->
</div>
<div class="nav-bar__menu">
<ul class="nav-bar__page-list">
<li class="nav-bar__page nav-bar__link--highlight"><a class="nav-bar__link" href="/">Home</a></li>
<li class="nav-bar__page"><a class="nav-bar__link" href="/movies">Movies</a></li>
<li class="nav-bar__page"><a class="nav-bar__link" href="#">Iets anders</a></li>
<li class="nav-bar__page float-right"><a class="nav-bar__link" href="/login">Login</a></li>
</ul>
</div>
</nav>
<article class="content">
<section id="movie-slider">
<div class="movie-banner"><span class="movie-banner__title">Mummies (NL) </span><img class="movie-banner__image" src="https://media.pathe.nl/nocropthumb/180x254/gfx_content//api/filmdepot/v1/movie/download/34431/34431_158303_ps_sd-high.jpg"><span class="movie-banner__desc">89 minuten</span></div><div class="movie-banner"><span class="movie-banner__title">All Inclusive </span><img class="movie-banner__image" src="https://media.pathe.nl/nocropthumb/180x254/gfx_content//api/filmdepot/v1/movie/download/34475/34475_159431_ps_sd-high.jpg"><span class="movie-banner__desc">115 minuten</span></div><div class="movie-banner"><span class="movie-banner__title">John Wick 4 </span><img class="movie-banner__image" src="https://media.pathe.nl/nocropthumb/180x254/gfx_content//api/filmdepot/v1/movie/download/34482/34482_157906_ps_sd-high.jpg"><span class="movie-banner__desc">169 minuten</span></div><div class="movie-banner"><span class="movie-banner__title">Scream VI </span><img class="movie-banner__image" src="https://media.pathe.nl/nocropthumb/180x254/gfx_content//api/filmdepot/v1/movie/download/34462/34462_161265_ps_sd-high.jpg"><span class="movie-banner__desc">123 minuten</span></div><div class="movie-banner"><span class="movie-banner__title">Hunt </span><img class="movie-banner__image" src="https://media.pathe.nl/nocropthumb/180x254/gfx_content//api/filmdepot/v1/movie/download/34899/34899_158694_ps_sd-high.jpg"><span class="movie-banner__desc">131 minuten</span></div><div class="movie-banner"><span class="movie-banner__title">Bholaa </span><img class="movie-banner__image" src="https://media.pathe.nl/gfx_content/PathePartners/movie-26600-ajaydevgan postal.jpg"><span class="movie-banner__desc">150 minuten</span></div><div class="movie-banner"><span class="movie-banner__title">Creed III </span><img class="movie-banner__image" src="https://media.pathe.nl/nocropthumb/180x254/gfx_content//api/filmdepot/v1/movie/download/34734/34734_160130_ps_sd-high.jpg"><span class="movie-banner__desc">117 minuten</span></div><div class="movie-banner"><span class="movie-banner__title">Shazam! Fury of the Gods </span><img class="movie-banner__image" src="https://media.pathe.nl/nocropthumb/180x254/gfx_content/posterhr/Shazam-Fury-of-the-Gods_ps_1_jpg_sd-high.jpg"><span class="movie-banner__desc">130 minuten</span></div><div class="movie-banner"><span class="movie-banner__title">Cocaine Bear </span><img class="movie-banner__image" src="https://media.pathe.nl/nocropthumb/180x254/gfx_content//api/filmdepot/v1/movie/download/34514/34514_157684_ps_sd-high.jpg"><span class="movie-banner__desc">95 minuten</span></div><div class="movie-banner"><span class="movie-banner__title">Missing </span><img class="movie-banner__image" src="https://media.pathe.nl/nocropthumb/180x254/gfx_content//api/filmdepot/v1/movie/download/34797/34797_159349_ps_sd-high.jpg"><span class="movie-banner__desc">111 minuten</span></div><div class="movie-banner"><span class="movie-banner__title">Dungeons &amp; Dragons: Honor Among Thieves </span><img class="movie-banner__image" src="https://media.pathe.nl/nocropthumb/180x254/gfx_content//api/filmdepot/v1/movie/download/23699/23699_161216_ps_sd-high.jpg"><span class="movie-banner__desc">134 minuten</span></div><div class="movie-banner"><span class="movie-banner__title">Beautiful Disaster </span><img class="movie-banner__image" src="https://media.pathe.nl/nocropthumb/180x254/gfx_content//api/filmdepot/v1/movie/download/34360/34360_160383_ps_sd-high.jpg"><span class="movie-banner__desc">105 minuten</span></div><div class="movie-banner"><span class="movie-banner__title">Maybe I Do </span><img class="movie-banner__image" src="https://media.pathe.nl/nocropthumb/180x254/gfx_content//api/filmdepot/v1/movie/download/34819/34819_160344_ps_sd-high.jpg"><span class="movie-banner__desc">93 minuten</span></div><div class="movie-banner"><span class="movie-banner__title">Avatar: The Way of Water </span><img class="movie-banner__image" src="https://media.pathe.nl/nocropthumb/180x254/gfx_content//api/filmdepot/v1/movie/download/23360/23360_156419_ps_sd-high.jpg"><span class="movie-banner__desc">192 minuten</span></div><div class="movie-banner"><span class="movie-banner__title">65 </span><img class="movie-banner__image" src="https://media.pathe.nl/nocropthumb/180x254/gfx_content//api/filmdepot/v1/movie/download/34035/34035_159187_ps_sd-high.jpg"><span class="movie-banner__desc">93 minuten</span></div></section>
</article>
<script src="/js/index.js" type="module"></script>
<script src="/js/general.js" type="module"></script>
<div id="8c6afee6-0069-4332-aa69-7a7fcdc5d854-quickmenu"></div></body></html>Created a chat application, i have used websockets in it.
[...wss.clients].forEach((client) => {
client.send(
JSON.stringify({
online: [...wss.clients].map((c) => ({
userId: c.userId._id,
userName: c.userId.userName,
})),
})
);
This code sends userId and username in edge successfully but in firefox, it returns undefined.
When I console logged the request data then I found that in Edge the userId and userName are included in the request data but in firefox they are not included.
Hello Dev’s i need your help.
When displaying events in a calendar view, it is important to show the events from their start to end date. However, in JavaScript, it can be tricky to loop through the dates in between the start and end date of an event.
Can u help how to display events from start to end date in a calendar view in JavaScript.
here is the code.
I try to make output Of Calendar needs to look like this.
I want to sign data, return the signature and the public key ( and “forget” the private key ). I want to use the Webcrypto API
Based on the docs I started with the following
const generateKeyPair = async function() {
return crypto.subtle.generateKey(
{
name: "ECDSA",
namedCurve: "P-384",
},
true,
["sign", "verify"]
);
}
const sign = async function(privateKey: CryptoKey, buffer: BufferSource) {
return crypto.subtle.sign(privateKey.algorithm, privateKey, buffer);
}
Based on my tests I think the function generateKeyPair is fine. But when I try the sign function like so
import { describe, it, expect } from "vitest";
import { generateKeyPair, sign } from "../../src";
describe("sign", () => {
it('returns a signature.', async () => {
const { privateKey } = await generateKeyPair();
const data = { foo: 'bar' };
const stringifiedData = JSON.stringify(data);
const buffer = Buffer.from(stringifiedData);
await expect(sign(privateKey, buffer)).resolves.toBeTruthy() // expect signature here
});
});
the test fails with the error
Error: promise rejected “TypeError [ERR_MISSING_OPTION]: algorithm.hash is required” instead of resolving
so I guess privateKey.algorithm is lacking the internal hash field. Am I using the wrong algorithm? I also tried to add "hash": "SHA-512" to the options in generateKeyPair.
I basically want to generate a key pair and use the private one for signing and the public one for reading.
Do you have any ideas?
I have following 6 fields for address on my from
Now, none of the fields are mandate so created following new fields
named Alt_Address__1, 2, 3, 4, 5 and 6 (Not visible on the form) But
OnSave (Using JavaSCript)
Each of the above 6 invoice address fields will be considered, in this order – Street 1, Street 2, Street 3, City, County, Post Code.
The first populated field will be saved into Alt_Invoice_Address_1
The second populated field will be saved into Alt_Invoice_Address 2
and so on through the 6 fields.
I am unable to come up with a smart logic for this, Any suggestion on how can I write JavaScript Function to implement above requirements
I am using react-boilerplate and I want to call getProjects on page loading time but I am getting error getProjects is not a function while calling inside useEffect:-
export function Projects({getProjects}) {
useEffect(() => {
// Dispatch getProjects action on component mount
getProjects()
}, []);
return (
<div>
<p>Testing Projects</p>
</div>
);
}
Projects.propTypes = {
dispatch: PropTypes.func.isRequired,
};
const mapStateToProps = createStructuredSelector({
projects: makeSelectProjects(),
});
function mapDispatchToProps(dispatch) {
return {
dispatch,
getProjects: () => dispatch(getProjects()),
};
}
const withConnect = connect(mapStateToProps, mapDispatchToProps);
const withReducer = injectReducer({ key: 'projects', reducer });
const withSaga = injectSaga({ key: 'projects', saga });
export default compose(
withReducer,
withSaga,
withConnect
)(Projects);
Here is my my action.js file’s content:-
import {GET_PROJECTS } from './constants';
export function getProjects() {
console.log("getProjects called")
return {
type: GET_PROJECTS
}
}
Is it possible to implement an async version of “modify“?
Modify method does not look to support async callback.
I have tried overriding the “then” method of the query builder instance,
running my async code before the real “then” method. But the resulting object looks like to not be fully compatible with knex (for example clone method seems to not work)
I want to use an approach shown in Single-spa’s docs:
Another option of deploying and making sure the latests javascript files are beeing used is making use of redirect (HTTP status code 302). The single-spa import map uses the unhashed url of the javascript file. eg: dist/app.js. Then when the requests for this file comes to the server it is redirected to the actual deployed file eg. dist/app.123abc.js and this is then served to the client. This way the import map never has to be updated and the microfrontend can be separately deployed.
How can I define such redirect in nginx if I don’t know the current “123abc” hashed part?
I set up a redirect, but it only worked once, while that hash was correct:
location /spa/main.js { return 301 /spa/main.58321d0246d99a5aeaaa.js; }