/r/learnjavascript
This subreddit is for anyone who wants to learn JavaScript or help others do so.
Questions and posts about frontend development in general are welcome, as are all posts pertaining to JavaScript on the backend.
This subreddit is a place for people to learn JavaScript together. Everyone should feel comfortable asking any and all JavaScript questions they have here.
With a nod to practicality, questions and posts about HTML, CSS, and web developer tools are also encouraged.
No Self-Promotion. The following are not allowed: Requests for subscribers, asking for "test users" for your new JS course, offering paid mentorships, and/or premium courses. Even if there is a coupon discount, no. If you're in doubt, message the mods first.
Good Titles - Write a descriptive title. Titles that begin with "hey guys" will be removed.
Related Subreddits
If you want to post something self-promotional, please message the mods first. Personal blog posts that are relevant to the subreddit's stated subject matter don't need prior approval (and are encouraged!).
/r/learnjavascript
I'm trying to get better on my own so I tried making this to do list because someone said its good to start with. I'm not sure I'm doing it right or not to consider this "doing it own my own" but wrote what I know and I asked google or GPT what method to use to do "x"
EX. what method can i use to add a btn to a new li , what method can i use to add a class to an element
if i didn't know what do to and asked what my next step should be. I also asked for help because I kept having a problem with my onclick function, it seems it was not my side that the problem was on but the browser so I guess I be ok to copy code in that case.
can you tell me how my code is, and tell me with the info i given if how I gotten this far would be called coding on my own and that I'm some how learning/ this is what a person on the job would also do.
Lastly I'm stuck on removing the li in my list can you tell me what i should do next I tried adding a event to each new button but it only added a button to the newest li and when I clicked it it removes all the other li
Html:
<body>
<div id="container">
<h1>To-Do List </h1>
<input id="newTask" type="text">
<button id="addNewTaskBtn">Add Task</button>
</div>
<ul id="taskUl">
<li>walk the dog <button class="remove">x</button> </li>
</ul>
</div>
<script src="index.js"></script>
</body>
JS:
const newTask = document.getElementById('newTask');
const taskUl = document.getElementById("taskUl")
const addNewTaskBtn = document.getElementById("addNewTaskBtn")
const removeBtn = document.getElementsByClassName("remove")
const newBtn = document.createElement("button");
//originall my button look like <button id="addNewTaskBtn" onclick="addNewTask()">Add
//but it kept given error so gpt said "index.js script is being loaded after the button is //rendered",so it told me to add an evenlistener
addNewTaskBtn.addEventListener("click", function addNewTask(){
const newLi = document.createElement("li");
//newLi.value = newTask.value; got solution from GPT
newLi.textContent = newTask.value;
newBtn.classList.add("remove")
newBtn.textContent = "x"
newLi.appendChild(newBtn)
//newLi.textContent.appendChild(taskUl); got solution from GPT
taskUl.appendChild(newLi)
newTask.value = "";
});
removeBtn.addEventListener("click", function addNewTask(){
});
Hi folks, wonder if anyone give me any ideas on how to to do this in a DRY fashion? It's a React project.
I have a list of objects which I want the user to be able to reorder. This functionality is toggable via a 'reorder' button.
I have my 'ordering' as boolean in state. My basic React components setup is this.
Now this works, but I can't figure out an easy way to apply a conditional to this. Sure I could use a ternary but this would cause massive repetition of the code base. I cant wrap it all in a ternery as nothing would appear when ordering is false.
const [ordering, setOrdering] = useState(false)
<Reorder.Group values={cards} onReorder={handleReorder}>
...code...
<Reorder.Item value={item} key={item.id}>
...map over items....
...lots of code....
</Reorder.Item>
</Reorder.Group>
Released the next part of front end development which is about boolean operations, Conditional Operators and if-else statements. I basically explained about the boolean and how you can perform different logic operations like AND, OR and NOT and also explained about the conditional operators (by taking a simple example of comparison of two numbers).
Check it out here:
https://youtu.be/-OcgYKqSmYQ
Thought Id share some more code I think is cool (updated with text change function)
<html>
<body id="body" style='background-color:rgb(41, 202, 207)'>
<p id="bob" style="font-size:80px; font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;">Watch Me Fade</p>
<button type="button" style="font-size:40px; border-radius: 8px;" onclick="FadeOut()" onmouseover="" >Fade Out</button>
<button type="button" style="font-size:40px; border-radius: 8px;" onclick="FadeIn()" onmouseover="" >Fade In</button>
<button type="button" id="data" style="font-size:40px; border-radius: 8px;" onclick="replace()" onmouseover="" >Change Text</button><br><br>
<div id="replace"></div>
</body>
<script>
let x;
let pushed=[false,false];
let opacity=1;
let set=false;
let input;
function replace()
{
if(set==false)
{
let bob=document.getElementById("bob");
input=document.createElement("input");
input.id="input"
input.setAttribute("style","font-size:30px;width:200px;height:50px; border-radius:8px;");
document.getElementById("replace").appendChild(input);
document.getElementById("data").innerHTML="Click to Save"
set=true;
}
else
{
let textInput=document.getElementById("input");
textInput.remove();
document.getElementById("bob").innerHTML=input.value;
document.getElementById("data").innerHTML="Change Text";
set=false;
}
}
function FadeOut()
{
let bob=document.getElementById("bob");
try{clearInterval(x);}
catch(err){}
function i()
{
opacity=opacity-0.05;
bob.setAttribute("style","font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif; font-size:80px; opacity:"+opacity.toString());
if(opacity<=0)
{
clearInterval(x);
}
}
if(pushed[0]!=true)
{
x=setInterval(i,10);
}
else
{
window.alert("Aleardy Faded");
}
pushed[0]=true;
pushed[1]=false;
}
function FadeIn()
{
let bob=document.getElementById("bob");
try{clearInterval(x);}
catch(err){}
function i()
{
opacity=opacity+0.05;
bob.setAttribute("style","font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif; font-size:80px; opacity:"+opacity.toString());
if(opacity>=1)
{
clearInterval(x);
}
}
if(pushed[1]!=true)
{
x=setInterval(i,10);
}
else
{
window.alert("Already faded in");
}
pushed[1]=true;
pushed[0]=false;
}
</script>
</html>
Hi, I am using JS in a non-browser sort of situation. Just pure JS, no windows variables, no session variables, nothing. It is within Logic Pro on a Mac, which is music production software.
I am trying to make things so that I can have some variable, call it prevID
, and in each call to the script update that variable in my main function, so that across executions I can compare values from one execution to another.
More detail below:
thanks
----
More detail: In Logic Pro I am modifying incoming MIDI notes. With MIDI a note always has a NoteOn and a NoteOff message. Unfortunately, when a NoteOn message is received it doesn't give info about the upcoming NoteOff. At least this Logic API doesn't show such info.
When I get NoteOn, I make various checks, then modify the note, sometimes in a random way. The way one typically does this Logic scripting is to do just have the NoteOn and NoteOff perform the same task. But in my case that doesn't make sense because whatever random action I took for the note in NoteOn handler has to also be applied to NoteOff.
It does seem that from execution to execution variables keep their previous values so things seem to be working. That is, the script looks like
var prevID =0;
function HandleMIDI(event)
{
if (event instanceof NoteOn) {
//set some vars
} else if (event instanceof NoteOff) {
// read previous set vars if not 0 and compare to what we have now, then reset back to 0
}
}
I have things working ok, but there is major problem. There can various MIDI notes at same time, with notes constantly being On then Off. So even though above works for case of one note being at a time, my logic will break once I have multiple notes at once.
I wanna ask how much time does it take any avg begger to make small projects on its own . Bcoz I am trynna do rating component project on my own and it is my first project. But I can't understand some little things so I always need to do chatgpt.
The project has 5 no. if click on no. 3 above them there should be 3 stars
And after clicking submit. One thank you slate will come.
Also there is fear of AI. if I can't even do projects like this how am I gonna keep my job .
Hey, I found out that I didn't visit any conferences after COVID, are they still around? Any recommendations?
I see that a lot of them went online, but curious about the quality..
P.S. would like to hang out with community :) Location Europe
If you been using tutorial to make a project to do list color picker etc. and your suppose to do it on your / make your own project how can you do it if you never done it, how do you know if you need to use a loop a function what methods to use etc.
Basically I can call myself an intermediate javascript dev. I've finished some courses filled in the gaps done plenty of excercises , started react same thing going with the maximillian course and constantly doing excercises and also node js where I'm new in express and trying to learn it at the same time. my goal atm is to learn next and express also become intermediate in React. Are my goals correct, can I build full stack apps with just these 4 frameworks.What's the next step to get hired, where should I put my focus and if I'm studying consistenly can I expect to have a good understanding of full stack dev within 2 years? Can anybody help me with answers?
<button type=*"button"* onclick="document.getElementById('bob').style.display='none'">dissapeer</button>
<button type=*"button"* onclick='document.getElementById("bob").style.display="inline".innerHTML= "i back!"'>reapeerer</button>
im trying to make it so that both .style.display and .innerHTML take place on the same button. What do i do?
EDIT: I FIXED IT
Hello everyone i just want to ask how or what you do to get the most out of project based tutorial.
This is the repo :
https://github.com/Wajih-Wanis/mm-commit-gen
This is the debug console output :
Changes since last commit:
diff --git a/utils/chatbot.py b/utils/chatbot.py
new file mode 100644
index 0000000..962c4c5
--- /dev/null
+++ b/utils/chatbot.py
@@ -0,0 +1 @@
+from utils.model import Model
\ No newline at end of file
extensionHostProcess.js:162commit message Promise {[[PromiseState]]: 'pending', [[PromiseResult]]: undefined, Symbol(async_id_symbol): 21920, Symbol(trigger_async_id_symbol): 21871}
extensionHostProcess.js:162arg1 =Promise {[[PromiseState]]: 'pending', [[PromiseResult]]: undefined, Symbol(async_id_symbol): 21920, Symbol(trigger_async_id_symbol): 21871}Symbol(async_id_symbol) =21920Symbol(trigger_async_id_symbol) =21871[[PromiseResult]] ='Here is a concise commit message based on the changes:\n\n"Initial implementation: added chatbot.py using model from utils/model.py"\n\nThis message summarizes the creation of a new file `chatbot.py` that imports a `Model` class from another utility module, indicating the initial setup for a chatbot functionality.'[[PromiseState]] ='fulfilled'[[Prototype]] =Promise
Forgive me for A.) my ignorance and B.) if this isn't the correct forum to pose this question.
I am creating a PDF form fill and in one section of the document, the subcontractor has to fill in the amount of the bond. They have to write out the number as well as provide the Arabic numerals.
What I would like to know is whether there is a JavaScript that I can use for one of the fields that will auto-populate in one field based upon what is entered into the previous field (Ex. subcontractor types in "seventy-five and fifty" in Field A which in turn causes "75.50" to auto-populate in Field B). I'm not sure this is possible due to the differences in formatting, but nonetheless I thought I'd shoot my shot in the off chance that it were possible.
I tried making a Fizz buzz code I put it in GPT so I know what I did wrong also I realized I skipped over the code the logs buzz. I just want to know how good/bad I did on it
function fizzBuzz(n) {
// Write your code here
if(n / 3 = 0 && n / 5 =0){
console.log('fizzBuzz')
}else(n / 3 =0 && n / 5 != 0){
console.log('Fizz')
}else(n / 3 !=0 && n / 5 != 0){
console.log('i')
}
function fizzBuzz(n) {
if (n % 3 === 0 && n % 5 === 0) {
console.log('fizzBuzz');
}
// Check if divisible by 3 but not by 5
else if (n % 3 === 0) {
console.log('Fizz');
}
// Check if divisible by 5 but not by 3
else if (n % 5 === 0) {
console.log('Buzz');
}
// If not divisible by 3 or 5
else {
console.log(n);
}
}
I was following along to a DIY calculator video here my html
<div id="calculator">
<input type="text" id="display" readonly>
<div id="keys">
<button onclick="appendToDisplay('+')" class="operator-btn">+</button>
<button onclick="appendToDisplay('7')">7</button>
<button onclick="appendToDisplay('8')">8</button>
<button onclick="appendToDisplay('9')">9</button>
<button onclick="appendToDisplay('-')" class="operator-btn">-</button>
<button onclick="appendToDisplay('4')">4</button>
<button onclick="appendToDisplay('5')">5</button>
<button onclick="appendToDisplay('6')">6</button>
<button onclick="appendToDisplay('*')" class="operator-btn">*</button>
<button onclick="appendToDisplay('1')">1</button>
<button onclick="appendToDisplay('2')">2</button>
<button onclick="appendToDisplay('3')">3</button>
<button onclick="appendToDisplay('/')" class="operator-btn">/</button>
<button onclick="appendToDisplay('0')">0</button>
<button onclick="appendToDisplay('.')">.</button>
<button onclick="calculate()">=</button>
<button onclick="clear()" class="operator-btn">C</button>
</div>
</div>
and this is the JS
const display = document.getElementById('display');
function appendToDisplay(input){
display.value += input;
}
function calculate(){
}
function clear(){
display.value ="";
}
when I tried to clear, the function didn't work the only thing I did different then the video was naming the function in the video he had it as
<button onclick="clearDisplay()">C</button>
and
function clearDisplay(){
display.value ="";
}
and when i changed it it worked Can you tell me why?
I have been watching Udemy colt full stack bootcamp and for the most part get what I'm doing following along with the teachers right now we taking what we learned and building a yelp campground website, but I don't feel like I could do it own my own even though we learned it already. Some video on YT say that you need to wright code on your own because you wont have someone guiding you along in the real world, but I'm not sure how to do that, so that's why I did this project. I know 85% of what all the code is and does beforehand but yet I would not be able to make this calculator. To try to make it on my own I would pause after he told us what to do and before he write the code I would try to do it by my self. Is there any suggestion on how and can be able to use the skills I already have to make something own my own
Hi r/learnjavascript community!
I wanted to share an open-source project I’ve been working on: a React Icon Picker that’s lightweight, customizable, and built using modern technologies like ShadCN and TailwindCSS.
Whether you’re just starting out with React or looking to improve your projects, this component is designed to be easy to integrate and use.
https://modall.ca/lab/shadcn-icon-picker-component
Hope some of you find this helpful :)
Will somebody create an application that can automate certain actions on a wildly used CRM. An example, I open my crm on a web browser, run the script to go through all orphan customers to send the same email individually (crm access doesn’t not allow mass email sending for sales reps)
I'm searching about cloning or similar source code for learning purposes for this site about live progress tracking https://deepstatemap.live/ can anyone help me?
Let's turn reddit a digital warzone, your code is your weapon and your keyboard your battleground,,,,slide a text we drop a challenge and see the real ogres
<h1 style='color:*blue*'>Cool Websites!</h1>
<h3>Check these out!</h3>
<a href=*'http://www.neal.fun'*\>Fun games!</a>
<br>
<a href=*'http://www.theuselessweb.com'*\>Useless websites!</a>
<br>
<a href=*'http://www.youtube.com'*\>Cool videos!</a>
<br>
<a href=*'http://www.minecraft.wiki'*\>Minecraft info!</a>
<h3>Button!</h3>
<button onclick='alert("hi!")'>Click Me!</button>
<button onclick="setbg('white')">White mode</button>
<button onclick="setbg('black')">Night mode</button>
</body> <script>
function setbg(col){
document.body.backgroundColor=col;
}
</script> </html>the last two buttons do nothing
Hi, new to JS, trying to figure out sensible way to perform a mapping. What I have is a pair of numbers, such as 42 and 11. When I see those values, I know they should become, say, [44,2].
I was starting to do something like
IDMap.N42[11] = [44, 2];
And likewise for other combos. But then started wondering if a pro developer would ever even do it this way. I don't have large lookup table here, just around 20 mappings.
How would you do this? Is it better to just use arrays such that I look up IDmap[42][11], despite all the wasted space? That is, there are only 20 lookups.
thanks!
I'm experimenting with a variation of a Jonas' course challenge, where I'm trying to use a while loop instead of a for loop.
(This question is not about which kind of loop is better to use, but why the following while loop isn't breaking, so I can better understand this behavior)
The function is supposed to take the array elements and return their average.
const arr = [5, 10, 15, 20]
let i = 0
let sum = 0
const calcAverage = function (arr) {
while (i <= arr.length) {
sum + arr[i];
console.log(\
Sum = ${sum}`)`
i + 1;
}
return sum / arr.length + 1
};
console.log(calcAverage(arr))
I would assume that, as i + 1
executes at the end of the loop, the i
value reaches 4 and then the while loop breaks, as per the i <= arr.length
condition.
Instead, it loops forever.
Additionally, the sum
variable is never updated and always remains 0.
Any insight into the mystery would be great.
Need help with this code im using visual studio code and the player keeps going trough walls and not even chatgpt helps it so everyone know whats the problem and how to fix it?
kaboom({
global: true,
fullscreen: true,
scale: 1,
debug: true,
clearColor: [0, 0, 0, 1],
})
const MOVE_SPEED = 250;
loadRoot("https://i.imgur.com/");
loadSprite("wall", "wM51PWF.png");
loadSprite("floor", "n78B8kf.png");
loadSprite("roof", "qXP3MSf.png");
loadSprite("ninja", "yJPmsve.png");
loadSprite("gate", "smywRbu.png");
loadSprite("cannon-left", "GeIlByT.png");
loadSprite("cannon-right", "Uuvi7RM.png");
loadSprite("cannon-up", "kkfy5JX.png");
loadSprite("cannon-down", "Zs7oPvW.png");
scene("game", ({ level, score }) => {
layers(["bg", "obj", "ui"], "obj")
const maps = [
[
" -------------------------------",
" ? ? ?",
" ? ? ???????????????? ?",
" ? ? c ? g ?",
" ? ?????????????? ????? ?",
" ? c ? ?",
" ? c ? ?",
" ? ?????????????????????? ???",
" ? ? c ?",
" ? ??? ??????????????????????",
" ? ? d @ ?",
" ================================",
],
[
" --------------------------------",
" ? ? ?",
" ? ? ???????????????? ?",
" ? ? c ? g ?",
" ? ?????????????? ????? ?",
" ? c ? ?",
" ? c ? ?",
" ? ?????????????????????? ???",
" ? ? c ?",
" ? ??? ??????????????????????",
" ? ? d @ ?",
" ================================",
]
]
const levelCfg = {
width: 30,
height: 60,
"?": [sprite("wall"), solid(), area(), scale(6.0)],
"=": [sprite("floor"), solid(), area(), scale(6.0)],
"-": [sprite("roof"), solid(), area(), scale(6.0)],
"@": [sprite("gate"), solid(), area(), scale(6.0)],
"c": [sprite("cannon-left"), solid(), area(), scale(6.0)],
"d": [sprite("cannon-right"), solid(), area(), scale(6.0)],
"g": [sprite("cannon-up"), solid(), area(), scale(6.0)],
"e": [sprite("cannon-down"), solid(), area(), scale(6.0)],
}
const scoreLabel = add([
text(score),
pos(30, 6),
scale(6.0),
layer("ui"),
{
value: score,
}
])
add([text("level" + parseInt(level + 1), pos(40, 6))])
const player = add([
sprite("ninja"),
pos(width() / 4.5, height() / 2.1),
scale(6.0),
area(),
solid(),
origin("center"),
])
player.collides("gate", () => {
keyPress("space", () => {
go("game", {
level: (level + 1) % maps.length,
score: scoreLabel.value
})
})
})
keyDown("left", () => {
player.move(-MOVE_SPEED, 0)
})
keyDown("right", () => {
player.move(MOVE_SPEED, 0)
})
keyDown("down", () => {
player.move(0, MOVE_SPEED);
});
keyDown("up", () => {
player.move(0, -MOVE_SPEED);
});
player.overlaps("wall", () => {
destroy("wall")
})
const gameLevel = addLevel(maps[level], levelCfg)
})
scene("lose", ({ score }) => {
add([text(score, 32), origin("center"), pos(width()/2, height()/ 2)])
})
start("game", { level: 0, score: 0 })
Hello, just thought I'd share some code on how to make things glow. Save this into VS code or your favorite editor and learn how things work
<!DOCTYPE html>
<html>
<head>
<title>Glowing Labels</title>
</head>
<body>
<div style="text-align: center; font-family: Impact, Haettenschweiler, 'Arial Narrow Bold', sans-serif;">
<label id="label1" style="font-size:80px; color:rgb(23,97,145)">Hello World</label><br>
<button id="glow" style="font-size:20px; border-radius: 8px;" onclick="glowFunc()">Glow</button>
<button id="stop" style="font-size:20px; border-radius: 8px;" onclick="stopGlowFunc()">Stop Glow</button>
</div>
<script>
let trigger;
let pressed=false;
let red=23;
let green=97;
let blue=145;
let redStore;
function glowFunc()
{
let label=document.getElementById("label1");
let reverse=false;
function glow()
{
//rgb(23, 97, 145)
if(blue<=255 && reverse==false)
{
red=red+5;
green=green+5;
blue=blue+5;
if(blue>=255)
{
reverse=true;
redStore=red;
}
}
if(red<=redStore && reverse==true)
{
red=red-5;
green=green-5;
blue=blue-5;
if(red<=23)
{
reverse=false;
}
}
let redString=red.toString();
let greenString=green.toString();
let blueString=blue.toString();
let rgb="color:rgb("+redString+","+greenString+","+blueString+"); font-size:80px;"
label.setAttribute("style",rgb);
}
if(pressed==false)
{
trigger=setInterval(glow,25);
}
pressed=true;
}
function stopGlowFunc()
{
pressed=false;
clearInterval(trigger);
}
</script>
</body>
</html>
publishBtn.addEventListener("click", function(){
if (!userName.value || userName.value.trim() == "default@gmail.com") {
alert("Please enter your actual email so I can contact you when I see the request.");
console.log("Invalid email entered");
return;
} else {
console.log("Email validation passed");
addPost();
}
});
I made this if statement to check if there is any value on the userName value. the inputs placeholder is also default@gmail.com . Also here is the global variable declarement:
EDIT: turns out I did all of the code in a js file I didn't link to the one needed, a simple beginner mistake haha
const
userName = document.querySelector(".user");
This is react
function SetupStream(stream: MediaStream) {
recorder = new MediaRecorder(stream);
recorder.ondataavailable = (e) => {
chunks.push(e.data);
console.log("Storing Data");
};
recorder.onstop = (e) => {
console.log("Done Storing Data")
const blob = new Blob(chunks, { type: "audio/ogg; codecs=opus" });
chunks = [];
console.log("done recording mic")
}
canRecord.current = true;
console.log("setting canRecord to: " + canRecord.current)
}
function setupAudio() {
console.log("Setup Audio")
if (navigator.mediaDevices && navigator.mediaDevices.getUserMedia != null) {
navigator.mediaDevices.getUserMedia({ audio: true }).then(SetupStream).catch(err => console.error(err));
}
}
function handleOnMic() {
if (!props.hasMicPermissions.current) {
setupAudio();
props.hasMicPermissions.current = true;
}
console.log("HERE0 " + "canRecord = " + canRecord.current)
if (!canRecord.current) { return; }
isRecording = !isRecording;
setIsRecordingState(!isRecordingState)
console.log("HERE1")
if (recorder) {
console.log("HERE2")
if (isRecording) { recorder.start(); console.log("RECORDING START") }
else { recorder.stop(); console.log("RECORDING STOP") }
}
}
The code execution begins on handleOnMic()
when i run this i get console logged:
Setup Audio -> HERE0 canRecord = false -> setting canRecord to: true
Why is it executing the code in this order? It should first do "Setup Audio" then "setting canRecord to: true" (this is the end of SetupStream() which is called in a .then() function call in SetupAudio ) and finaly "HERE0 canRecord = false" ... or "HERE0 canRecord = true" as i was hoping for
So I'm new in coding and are currently learning the absolute programming basics and I started with JavaScript with the processingJS library in Khan Academy cause it's so easy for me to understand the explanations and videos. Is it completely useless if I want to create small games, designs, animations or maybe websites. If so can I still use that knowledge to easier learn the newer libraries like P5.JS? I need to know If I'm on the right track in self learning programming.
When I say link navigation, I mean when I click a link that leads me to another section of the site. right now, when I click the link it just shoots to that section of the page super fast. I just wanna slow it down or at the very least, add a lil transition
I am building a web-based video editor using the Web Codecs API, WebGL (via Pixi.js), and the Web Worker API. Based on the video renderer sample code, I implemented a frame management logic that handles frames in-flight.
However, when users seek a specific timestamp or drag the timeline indicator (representing the current time), rendering the video frames becomes noticeably slow. I suspect the issue lies in how the mp4box.js library is used to seek and extract frames every time these events occur. For example, if a user generates 30 drag events, the seek method from mp4box.js gets called 30 times, which doesn’t seem like an optimal approach for managing video frames.
Recently, I considered pre-extracting all frames from the video that need to be rendered and storing them in an array. Frames could then be fetched from the array by comparing frame.timestamp to the desired time. However, I’m concerned this method might cause memory issues, especially with large videos.
I’ve noticed that other web-based video editors using Canvas can handle rendering multiple videos and timeline dragging very smoothly. I’d like to understand the best practices for managing video frames and how to deliver a smooth UX when users drag the timeline indicator to view results frame by frame.
Olá a todos!
Andei dando uma pesquisada e me interessei pela área de Front-end e li em alguns lugares que uma das melhores maneiras a se começar a desenvolver seria pelo JavaScript. Dito isso, gostaria de saber por onde começar e indicações de cursos ou algo do tipo em que eu possa me inteirar e começar a estudar.
Li também que seria necessário aprimorar meu inglês e pretendo alinhar os estudos do JS junto aos meus estudos sobre a língua inglesa.
Off: Tenho 26 anos e apesar de ainda ser novo, tenho medo que a minha idade seja um fator limitante quando me ingressar no mercado (sei que tenho que aprender outras linguagens antes de procurar uma vaga).