/r/q?req.query.q -- Subreddit Search

267,800 Subscribers

Conditionally using Framers Reorder.

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>

6 Comments

2024/12/21
18:09 UTC

If-else statements in JS (Resource, YT video)

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

0 Comments

2024/12/21
17:59 UTC

Opacity Fader

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>

2 Comments

2024/12/21
17:04 UTC

How to make a variable accessible between multiple executions of a script?

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.

10 Comments

2024/12/21
14:15 UTC

How much does it take to get use to js .

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 .

5 Comments

2024/12/21
10:27 UTC

JS conferences ?

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

5 Comments

2024/12/21
08:00 UTC

How are You to grow if you dont know what to do

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.

12 Comments

2024/12/21
01:18 UTC

What's the next step?

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?

4 Comments

2024/12/20
23:07 UTC

im trying to make two changes to text with the same button

<p id=\*"bob"\*\\>i am disapeer</p>

<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

3 Comments

2024/12/20
22:59 UTC

How to get the most out of project based programming tutorial.

Hello everyone i just want to ask how or what you do to get the most out of project based tutorial.

2 Comments

2024/12/20
22:35 UTC

vscode extension not working right ? I have been debugging for 2 weeks and still could not find a solution

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

0 Comments

2024/12/20
22:05 UTC

JavaScript for auto-populating amount in PDF

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.

1 Comment

2024/12/20
21:37 UTC

rate My FizzBuzz code

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);
    }
}

7 Comments

2024/12/20
20:11 UTC

function naming Problem

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

7 Comments

2024/12/20
20:07 UTC

Open-Source React Icon Picker Built with TailwindCSS & ShadCN – Perfect for Beginners!

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 :)

0 Comments

2024/12/20
18:19 UTC

Need help writing a program

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)

1 Comment

2024/12/20
18:06 UTC

Cloning this impressive website

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?

6 Comments

2024/12/20
16:29 UTC

Digital warzone

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

3 Comments

2024/12/20
15:19 UTC

can someone help me make the buttons chage the background color

<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

7 Comments

2024/12/20
12:18 UTC

What sort of array or object to use to map pair of numerical values to another pair of numerical values?

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!

4 Comments

2024/12/20
12:01 UTC

[beginner] While loop not breaking despite condition met.

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.

5 Comments

2024/12/20
11:31 UTC

Kaboomjs help

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 ?",

" ? ??? ??????????????????????",

" ? ? d @ ?",

" ================================",

[

" --------------------------------",

" ? ? ?",

" ? ? ???????????????? ?",

" ? ? c ? g ?",

" ? ?????????????? ????? ?",

" ? 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 })

0 Comments

2024/12/20
07:55 UTC

Making Things Glow

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>

0 Comments

2024/12/19
21:49 UTC

Why won't this if statement work?

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");

4 Comments

2024/12/19
17:37 UTC

Why is the flow of my code execution distorted?

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

2 Comments

2024/12/19
16:13 UTC

Is ProcessingJS completely useless?

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.

23 Comments

2024/12/19
11:11 UTC

how can i control the speed of link navigation?

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

6 Comments

2024/12/19
10:44 UTC

What is best pratice to manage video frames in Web-based video editor?

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.

3 Comments

2024/12/19
03:47 UTC

Por onde começar no JavaScript?

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).

9 Comments

2024/12/19
03:21 UTC

Anyone knows any tutorial for real-time audio visualizer for mic recording

Or a way to visualizer for the entire audio after its recorded (i know that wavesurfer api does this, but im interested in a manual way with no third party api's).

Ive tried in the past to convert a per wave (sample) visualizer to a visualiser of all the waves of a audio file and it was a complete mess, so any help is very welcome :D

1 Comment

2024/12/19
00:01 UTC

Posting and Commenting Guidelines

267,800 Subscribers

Conditionally using Framers Reorder.

If-else statements in JS (Resource, YT video)

Opacity Fader

How to make a variable accessible between multiple executions of a script?

How much does it take to get use to js .

JS conferences ?

How are You to grow if you dont know what to do

What's the next step?

im trying to make two changes to text with the same button

How to get the most out of project based programming tutorial.

vscode extension not working right ? I have been debugging for 2 weeks and still could not find a solution

JavaScript for auto-populating amount in PDF

rate My FizzBuzz code

function naming Problem

Open-Source React Icon Picker Built with TailwindCSS & ShadCN – Perfect for Beginners!

Need help writing a program

Cloning this impressive website

Digital warzone

can someone help me make the buttons chage the background color

What sort of array or object to use to map pair of numerical values to another pair of numerical values?

[beginner] While loop not breaking despite condition met.

Kaboomjs help

Making Things Glow

Why won't this if statement work?

Why is the flow of my code execution distorted?

Is ProcessingJS completely useless?

how can i control the speed of link navigation?

What is best pratice to manage video frames in Web-based video editor?

Por onde começar no JavaScript?

Anyone knows any tutorial for real-time audio visualizer for mic recording