Abrar
KPCKevin Powell - Community
•Created by Abrar on 11/16/2023 in #back-end
mysql
I'm use Ubuntu lts 23.10 version,i have lampp installed in my opt directory, i want to use mysql then when execute this command in my command line mysql -u root -p then it show up the mariaDb not mysql. I want to use mysql but i don't know how to change that mariaDb to mysql
16 replies
KPCKevin Powell - Community
•Created by Abrar on 11/16/2023 in #back-end
serialize and unserialize
I know what serialize and unserialize are where it will change array and object to the string representasion. But what is the purpose and from what I know because Arrays and objects that have been serialized mean that these arrays and objects can be stored in the database or cache which aims to maintain the data structure.
Does this related to the php execution environment,Because it seems like for example :
Just say the user sends data and it is received by PHP. PHP does its job until code execution ends, which means that because the code execution has ended, it is erased by memory Which causes us to not be able to maintain the data structure. Therefore, serialization is needed, whether like this or what
5 replies
KPCKevin Powell - Community
•Created by Abrar on 11/8/2023 in #front-end
pointer event
What is the use of setPointerCapture and releasePointerCapture and also how to use it
11 replies
KPCKevin Powell - Community
•Created by Abrar on 11/4/2023 in #front-end
useMemo,useEffect,useCallback
Does this three hook will be return and execute in the first rendering of the component?
3 replies
KPCKevin Powell - Community
•Created by Abrar on 11/2/2023 in #front-end
useContext react
import React from 'react'
import ReactDOM from 'react-dom'
import { useContext } from 'react'
const konteks = React.createContext(null);
function components(){
return(
<konteks.Provider value="hello world">
<MyComponent />
</konteks.Provider>
);
}
function MyComponent(){
const getcontext = useContext(konteks);
return(
<div>{getcontext}</div>
);
}
const body = ReactDOM.createRoot(document.getElementById("body"));
body.render(<MyComponent/>);
I already know the use of useContext, where we can pass data to other components,But I'm still confused regarding the implementation and the code above doesn't work, where is the error?
3 replies
KPCKevin Powell - Community
•Created by Abrar on 10/25/2023 in #front-end
JS label statement
https://codepen.io/Onii-Sann/pen/mdvJVEe
I'm trying to use label then call the label using continue and break statement without using loop statement, then it doesn't work and throw the runtime error, does the label statement only can be used over loop statement?
7 replies
KPCKevin Powell - Community
•Created by Abrar on 10/23/2023 in #front-end
error handling
<!DOCTYPE html>
<html>
<body>
</body>
<script>
try{
for(a = 2,a < 2;a++){
console.log(a);
} catch (err) {
console.log("Syntax Error Was Occured");
}
</script>
</html>
from above example there was syntax error on for loop then i try to catch the error and it doesn't work
6 replies
KPCKevin Powell - Community
•Created by Abrar on 10/22/2023 in #front-end
web animation API
<!DOCTYPE html>
<html>
<body style="background-color: white;" id="body">
<div id="div1"></div> </body> <style> #div1{ width: 200px; height: 400px; background-color: darkred; } </style> <script> const Divtarget = document.getElementById("div1"); class animasi{ constructor(){ this.effect1 = [ { width: "200px", backgroundColor: "blue" }, { width: "1000px" } ]; this.opsi1 = { duration: 5000, fill: "forwards", easing: "ease-in-out", direction: "normal", delay: 5000 }; } } const getanime = new animasi(); const keyframEffect1 = new KeyframeEffect(Divtarget,getanime.effect1,getanime.opsi1); const animation1 = new Animation(keyframEffect1,document.timeline); animation1.play(); Divtarget.addEventListener("animationend",function change(){ const body = document.getElementById("body"); body.style.backgroundColor = "red"; }); Divtarget.removeEventListener("animationend",function change(){ const body = document.getElementById("body"); body.style.backgroundColor = "red"; }); </script> </html> i want to use animationend event on web animation api but when the animation is ended the call back function is not called why this happened does animation event like animationstart,animationend,animationiteration,animationcancel doesn't work with animation event ?
<div id="div1"></div> </body> <style> #div1{ width: 200px; height: 400px; background-color: darkred; } </style> <script> const Divtarget = document.getElementById("div1"); class animasi{ constructor(){ this.effect1 = [ { width: "200px", backgroundColor: "blue" }, { width: "1000px" } ]; this.opsi1 = { duration: 5000, fill: "forwards", easing: "ease-in-out", direction: "normal", delay: 5000 }; } } const getanime = new animasi(); const keyframEffect1 = new KeyframeEffect(Divtarget,getanime.effect1,getanime.opsi1); const animation1 = new Animation(keyframEffect1,document.timeline); animation1.play(); Divtarget.addEventListener("animationend",function change(){ const body = document.getElementById("body"); body.style.backgroundColor = "red"; }); Divtarget.removeEventListener("animationend",function change(){ const body = document.getElementById("body"); body.style.backgroundColor = "red"; }); </script> </html> i want to use animationend event on web animation api but when the animation is ended the call back function is not called why this happened does animation event like animationstart,animationend,animationiteration,animationcancel doesn't work with animation event ?
8 replies
KPCKevin Powell - Community
•Created by Abrar on 10/22/2023 in #front-end
custom events
What options can I change in the custom event, In the mdn documentation it only mentions 4, namely bubbles, composed, cancleable and detail to pass an object or some data to the call back function parameter, but are there any other options that can be changed ?
1 replies
KPCKevin Powell - Community
•Created by Abrar on 10/21/2023 in #front-end
custom event
I am trying to customize the default javascript event, namely click, code is in below :
<!DOCTYPE html>
<html>
<body style="background-color: white;">
<div id="container">
<div id="parent">
<div id="child"></div>
</div>
</div>
</body>
<style>
#container{
display: flex;
justify-content: center;
align-items: center;
border: 5px solid black;
margin: auto;
width: 850px;
height: 500px;
}
#parent{
display: flex;
justify-content: center;
align-items: center;
border: 5px solid black;
margin: auto;
width: 450px;
height: 300px;
}
#child{
border: 5px solid black;
width: 300px;
height: 150px;
}
</style>
<script>
const container = document.getElementById("container");
const parent = document.getElementById("parent");
const child = document.getElementById("child");
const customClick = new Event("click",{
bubbles : true,
cancleable: false,
compose: false
});
container.addEventListener("click",function change(){
container.style.backgroundColor = "red";
});
container.removeEventListener("click",function change(){
container.style.backgroundColor = "red";
});
parent.addEventListener("click",function change(){
parent.style.backgroundColor = "yellow";
});
parent.removeEventListener("click",function change(){
parent.style.backgroundColor = "yellow";
});
child.addEventListener("click",function change(){
child.style.backgroundColor = "green";
});
child.removeEventListener("click",function change(){
child.style.backgroundColor = "green";
});
container.dispatchEvent(customClick);
parent.dispatchEvent(customClick);
child.dispatchEvent(customClick);
</script>
</html>
What I'm confused about this is how the callback function can be called before the event is being triggered
What I'm confused about this is how the callback function can be called before the event is being triggered
11 replies
KPCKevin Powell - Community
•Created by Abrar on 10/15/2023 in #front-end
Border image
I'm a little confused about image borders regarding what kind of image and image extension that can be used as a border image, because when i try to use background image from this source https://pngtree.com/so/border and I took this border with a black ornate pattern and when I use it as Border image it doesn't work I've confirmed a few things like there are no writing errors in the source.
6 replies
KPCKevin Powell - Community
•Created by Abrar on 10/14/2023 in #front-end
@font-palette-value css
Is font-palette-value only used to change the color of a custom font, Can't font-palette-value be used to set other values such as setting the size of a custom font.
I've tried it and it doesn't work, but on the other hand there are those who say it can I don't understand.
5 replies
KPCKevin Powell - Community
•Created by Abrar on 10/7/2023 in #front-end
Media Query
If there is no standard breakpoint then how can I utilize media queries 100% to make a responsive web
3 replies