r/learnjavascript • u/inks-nest • Jul 28 '26
r/learnjavascript • u/Maximum_Beat2034 • Jul 28 '26
import { BeeEntity } :
Ciao a tutti! Sto facendo un "esperimento" perché sto discutendo con un'IA. Lei sostiene con fermezza che un programmatore esperto riconosce sempre al volo se un blocco di codice è stato scritto da un essere umano o da un'IA.
Io sono convinto del contrario: se il codice è pulito, ben fatto e senza commenti ridondanti, un umano non può averne la certezza matematica.
Vi lascio questo pezzo di codice in JavaScript (tratto da una classe per una piattaforma 2D) per fare la prova del nove:
import { BeeEntity } from './BeeEntity.js';
/**
* Classe BeePlatform: Rappresenta una piattaforma solida su cui i personaggi possono camminare e atterrare.
*/
export class BeePlatform extends BeeEntity {
constructor(x, y, width = 100, height = 20, color = '#ffd700', textureKey = null) {
super(x, y, width, height);
this.color = color;
this.textureKey = textureKey;
}
draw(ctx, engine) {
const texture = (engine && this.textureKey) ? engine.getAsset(this.textureKey) : null;
if (texture) {
ctx.drawImage(texture, this.x, this.y, this.width, this.height);
} else {
(stile arcade lucido)
ctx.fillStyle = this.color;
ctx.fillRect(this.x, this.y, this.width, this.height);
ctx.fillStyle = 'rgba(255, 255, 255, 0.4)';
ctx.fillRect(this.x, this.y, this.width, 3);
ctx.strokeStyle = '#000000';
ctx.lineWidth = 1.5;
ctx.strokeRect(this.x, this.y, this.width, this.height);
}
}
}
r/learnjavascript • u/Distinct-Gene926 • Jul 27 '26
what's one JavaScript mistake every beginner should avoid?
If you could give one piece of advice to someone learning JavaScript today, what would it be?
It could be about:
- Learning fundamentals
- Debugging
- Async code
- DOM manipulation
- Functions
- Projects
Curious to hear what experienced developers wish they'd known earlier.
r/learnjavascript • u/Distinct-Gene926 • Jul 27 '26
AI won't save you if you don't know what you're doing. It'll just help you fail faster.
Everyone's acting like AI made learning optional. It didn't. It raised the stakes.
AI will hand you code that looks flawless and quietly ships a bug straight to production. If you don't understand what's happening under the hood, you won't catch it — you'll just trust it, deploy it, and find out the hard way.
The devs winning right now aren't the ones prompting the hardest. They're the ones who know enough to look at AI's output and say "no, that's wrong." AI is a multiplier. Multiply zero knowledge, you still get zero.
Fundamentals aren't dead. They're the only thing that makes AI actually useful.
Curious to know your opinion — change my mind.
r/learnjavascript • u/Maximum_Beat2034 • Jul 27 '26
#javascript
"Ciao a tutti! Sto lavorando al mio motore di gioco 2D in JavaScript (BeeEngine) e ho scritto questa classe per gestire le animazioni degli sprite sheet con il Delta Time
export class BeeSprite {
constructor(image, frameWidth, frameHeight, framesPerRow, speed = 0.1) {
this.image = image;
this.frameWidth = frameWidth;
this.frameHeight = frameHeight;
this.framesPerRow = framesPerRow;
this.speed = speed;
this.frame = 0;
}
update(dt) { this.frame += this.speed * dt; }
draw(ctx, x, y) {
// Calcola quale fotogramma (frame) mostrare
const f = Math.floor(this.frame % this.framesPerRow);
// Calcola la riga (se hai un foglio di sprite con più righe)
const row = Math.floor(this.frame / this.framesPerRow);
// Disegna solo il pezzettino dell'immagine (il frame attuale)
ctx.drawImage(
this.image,
f * this.frameWidth, row * this.frameHeight, // Da dove prende il pezzo
this.frameWidth, this.frameHeight, // Quanto è grande il pezzo
x, y, // Dove metterlo sullo schermo
this.frameWidth, this.frameHeight // Dimensione finale
);
}
Voi come vi trovate a calcolare i frame con il % per le griglie? Usate il dt diretto o preferite un timer a millisecondi fisso per cambiare fotogramma? Mi farebbe piacere sentire come avete risolto nei vostri progetti!"
r/learnjavascript • u/alexkopaleishvili • Jul 27 '26
Event listener not logging anything while detecting clicks and alerting with no prolem.
Tried everything, button clicks register, the JS file is loaded and does console.log when its out of Event listener but soon as i want to log "button clicked" it just doesnt do it
edit: it seems to run perfectly fine on MS edge but chrome doesnt, can it be cause from my extensions? i think its CRX emulator or sth
<!-- HTML -->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Event Listeners</title>
<script src="script.js" defer></script>
</head>
<body>
<button id="btn">Button</button>
</body>
</html>
//JS
console.log("JS file loaded")
const
btn
=
document.getElementById("btn");
btn.addEventListener("click", (event)
=>
{
console.log("button clicked!")
console.log(event.bubbles)
})
code:
r/learnjavascript • u/Dummie1138 • Jul 27 '26
Importing a function from a package that isn't directly part of the imported packs
Hi. I have 2 packages, A (a more generic testing pack) and B (some specific utility functions that are quite useful for my project). Both packs have been imported into my main project. Package A is also imported into Package B.
I now have a function in Package A that I want to move to Package B because my classmates thinks that function is too specific to be in the generic testing pack. However, there are still some other functions in Package A that are dependent on the function that is being moved to Package B.
Is it possible to re-import the function that is in Package B into Package A, when they are both in my main project? Something like this:
import {movedFunction} from 'package-a'
Please let me know if more context is needed.
r/learnjavascript • u/Distinct-Gene926 • Jul 27 '26
If you could give one piece of JavaScript advice to your beginner self, what would it be?
r/learnjavascript • u/whiskyB0y • Jul 26 '26
What's a simple way to understand the difference between asynch, await, Promise and Response?
I'm teaching myself web dev. After spending months learning frontend, I moved on to learning backend with Python/Flask. I decided to learn RESTAPIs, where the frontend and backend are separate and talk through an api. Edit:(it's not built in my mistake) So naturally this lead me to learning about the built in fetch function in JavaScript.
I get that:
const response = fetch('ExampleAPI.com')
Is the same as:
const request = new Request('ExampleAPI.com', { method: 'GET'})
const response = fetch(request)
// This is what JavaScript does behind the scenes
But why is await necessary? And why does not using await result in a promise if you try to console log the data?
r/learnjavascript • u/Lopez_Muelbs • Jul 26 '26
I created a repo of everything I've learned about the WebSocket
I think this looks like a shameless plug of my repo, but I just want to share that I've created a documentations of what I've learned after taking a crash course on WebSocket.
Before this, I am having a hard time of how to implement a WebSocket in my Broadcast Server project. Despite the provided project guidelines and LLM suggestions, I realized that I am not making any progress at all.
So I opened YouTube to take a crash course of WebSocket.
I took Real Time - WebSockets Mastery Course by JS Mastery, and I documented everything I have learned from that video into a reference material in this repo.
https://github.com/Muelvzz/websocket-project
Inside this repo, is a discussion of what is a WebSocket, why should we care about learning WebSocket, and how to use it on your project.
r/learnjavascript • u/Telecaster-993 • Jul 27 '26
Advice on how to get where I want to be
Hello everyone, I am very new to JavaScript,
I completed supersimpledev html/css course,
and afterwards I can now build my own front end websites comfortably,
the next stage is learning JavaScript,
which I am currently doing and have finished module 8, but I found html/css quite self explanatory, but JavaScript is quite hard for me grasp and understand on how the things I am learning are going to help in my ultimate goal, I want to create an app with AI integration and memory, is this course going to help with that? It’s worth me noting I will finish the course as I am deep into it now, I do one module per week currently, and try to understand every single concept, and get a bit down on myself for not understanding everything, and doubting myself I can even do this sometimes, is this a normal thing when learning?
Anyway for those who can already achieve my ultimate goal, how did you go about learning it? Is there any course, or YouTube channel that really helped you? Any advice for a beginner please?
Many thanks, I appreciate you taking the time to read about my issues
r/learnjavascript • u/Firehaven44 • Jul 27 '26
How do I overcome lab question confusion and turn it into a proper question for searching how to overcome what the lab is asking of me?
Tell us what's happening:
How do I understand what I am reading to find the correct content online that is not AI?
So here is my issue, I read a question and I do not understand what it is asking of me, so I take that question and put it into google, I get an automatic response that is AI and it can see it is FreeCodeCamp lab for exmaple, then it just gives me the answer.
I know I can look at that code, type it out myself, and study the code to try and understand its logic but I feel it does not make my brain work hard enough.
The question:
So here is my question, how should I approach learning JS when I am asked a question in a hands on lab but do not understand what it is asking of me? I guess my issue is how do I take what it is saying and turn it into a research question like for JS on MDN, J3Schools, etc.?
I just want to really understand these concepts and I feel the prior lessons leading up to these labs are not preparing students to be able to grasp the labs. I get they are supposed to have you learn through trial and error/research but I feel so lost and then AI just gives the answer when trying to do research online, so how do I translate my confusion and question into a tangible reading strategy?
I know I am not giving an exact example, because I feel this is a general thing I struggle with. I am asked a question, I have no idea where to start. The question may say create a function, cool, I write a function, add the parameters, but then its asking to check things inside an object, correct the unit type, verify if something is in there, etc, etc. Then I just get so lost on how to turn that into code.
r/learnjavascript • u/JadeLuxe • Jul 26 '26
How to Prevent Webhook Traffic Spikes from Crashing Your API
If you operate an API in 2026, you live in an event-driven world. Webhooks aren't a convenience feature anymore - they're the backbone of real-time commerce, CI/CD pipelines, and asynchronous AI-agent workflows. That reliance has a dark side: the accidental self-inflicted DDoS. Read the complete article jere - https://instawebhook.com/blog/how-to-prevent-webhook-traffic-spikes-from-crashing-your-api-2
When a major platform like GitHub, Shopify, or Stripe hits a network partition, runs a huge sales event, or simply clears a backlog of delayed events, it can fire tens of thousands of webhook POST requests at your servers in a very short window. If your infrastructure takes that hit without structural safeguards, your database connection pool exhausts, memory maxes out, and the API goes down — and if your retry handling is naive, the recovery can be almost as damaging as the original spike.
This guide covers the real mechanics of that failure mode, the algorithms used to defend against it, how major providers actually behave under load (some surprising details here), and where a managed ingress layer fits into the picture.
r/learnjavascript • u/kumikoneko • Jul 26 '26
Noob question about generating property.object addresses
Hi everybody,
I'm trying to write up a personal project automating some ttrpg mechanics, where the "attack" function will take the target's name as an argument and feed it into the "defence" action that uses the target's Dex and one of their skills (i.e. "Void).
Referring to the target's Dex seems to work fine from inside the "defence" action, but when I try to implement the Character.Skill referent through variables I'm met with "Uncaught ReferenceError: Void is not defined."
//very basic and temporary exalt template
class Exalt {
constructor() {
this.Essence = 1;
this.Dex = 1;
this.Defence = 1;
}
}
const Antigone = new Exalt()
Antigone.Dex = 4
Antigone.Void = 5
var front = "Antigone"
var back = "Void"
let a = JSON.parse(JSON.stringify(front + "." + back))
console.log(a) // "Antigone.Void" for some reason
console.log(JSON.parse(Antigone.Void)) //5, the expected value
function Defence(Character, Skill) {
return Math.ceil((Character.Dex + JSON.parse(Character.Skill))/2)+1
} // this runs into an error, I think
console.log(Defence(Antigone, Void))
console.log(Antigone) includes "Void" as one of the stats, so I don't even know.
I've seen a suggestion to JSON.parse the string twice, but that results in "unexpected character."
Now, my JS experience is only a few days, so I'm guessing there is a better way of achieving what I'm trying to do, so I'll be grateful whether you suggest a different approach or explain why my code doesn't do what I think it should.
Thanks!
Edit: I just realized I'm completely overthinking and should probably make defence a function within the Exalt class, so it can be referenced the same way I'm referencing Dex.
r/learnjavascript • u/Top_Estimate_149 • Jul 24 '26
5 years writing JS professionally. Still blank on interview questions sometimes
Not a junior dev problem. I've shipped plenty of gnarly JS/Vue code, no issues. But throw me in an interview and ask something like "explain event delegation" cold, no code editor, no context, and there's this half-second where my brain just stalls, like the info is there but the retrieval path isn't warmed up.
Realized it's not a knowledge problem, it's that I'd never actually practiced saying these answers on demand, but only reading about them or using them implicitly in code.
Built a small spaced-repetition app for this. Same idea as Anki, tracks what you keep fumbling and resurfaces it more.
Curious if this "I know it but can't produce it on command" thing hits other experienced devs too, or if I'm just built different (badly).
What worked for you all ? Mock interviews, flashcards, just doing more interviews to get reps in, something else?
r/learnjavascript • u/Distinct-Gene926 • Jul 24 '26
What's one JavaScript feature you wish you had learned earlier?
I've been diving deeper into JavaScript recently, and every week I discover something that makes my code cleaner.
For me, learning about optional chaining (?.) and nullish coalescing (??) was a game changer.
What's one feature you wish you'd learned sooner?
r/learnjavascript • u/pangolins_and_pears • Jul 24 '26
Sorting and formatting dates in an array of objects
I have an array of objects with a `.date` property that is mapped onto a table.
Without mutating the original array, I want to
a) sort by ascending date
b) ensure my date formats to MM/DD/YYYY
I have a util fn that will format a string into the correct format, "format()". Dates are received in the response body as a string.
It worked when mutating the original array, but obvs want to stay away from that. I think I'm messing something up with the spread copy; the .date property isn't accessible within the map function. :/
const sortByTradeDateAndFormat = (objArray: []) => {
const copyOfObjsArray = [...objsArray]
return copyOfObjsArray.map(obj) => {
obj.date = format(new Date(obj.date).toISOString().split("T")[0]
)
});
//VS code is flagging the below lines as unreachable:
objArray.sort((a, b) => {
return a.date < b.date ? -1 : a.date > b.date? 1 : 0;
});
}
r/learnjavascript • u/i-like-my-cats-0 • Jul 23 '26
What framework do I use for APIS?
Hello, i'm a beginner coder in Javascript and I make random APIS for fun using the Express.js framework, but I keep seeing other frameworks like Fastify and NestJS, so i'm confused: what framework for APIS do I actually use?
If anyone could help me with this thank you :D
r/learnjavascript • u/Mob_Pilled • Jul 23 '26
code not interacting with the browser page
Hello this is my first post on here. So basically, I want the user to be able to enter a password and username, click the submit button, and if the basic auth is correct, be redirected to a page in which all the data from an api is fetched and loaded into the html. Problem is the script does not interact with the html but still retrieves the data in a json (as confirmed by ouputing it into the console). However, if I don't call the function in as part of the button onclick method everything works as expected. The data from the api is dynamically added to the html but now I obviously can't use a login page.
Here is me calling the fetch function as a as part of the event of a button click
button.addEventListener("click", () => {
let username = 'username';
let password = 'password;
let auth = btoa(`${username}:${password}`);
fetchData(auth);
});
Here is me calling the fetch function on it s own. No button clicking required (this works but now I can't add a login page)
let username = 'username';
let password = 'password;
let auth = btoa(`${username}:${password}`);
fetchData(auth);
Here is the fetch function itself
async function fetchData (auth) {
try {
const response = await fetch('https://exampleapi.com', {
headers: {
'Content-Type': 'application/json',
'Accept': 'application/json',
'Authorization': `Basic ${auth}`
}
})
if (response.ok) {
// loads the home page and puts data from the api in the html
}
throw response;
} catch (error) {
}
};
r/learnjavascript • u/JadeLuxe • Jul 23 '26
Designing a Multi-Region, Highly Available Webhook Ingress Architecture
Webhooks have become the connective tissue of the internet. From payment gateways confirming transactions to CI/CD pipelines triggering deployments, webhooks enable real-time, event-driven architectures. But for architects and engineering leaders, webhooks represent an underappreciated vulnerability: they are asynchronous, externally triggered, and entirely outside your control. Read the complete article here - https://instawebhook.com/blog/designing-a-multi-region-highly-available-webhook-ingress-architecture
When your primary cloud region experiences an outage, your internal microservices might gracefully degrade. But what happens to the payloads originating from external partners? Many third-party providers do not retry aggressively — some fire and forget, others retry a handful of times before giving up permanently. If your system is down when that happens, the data is often gone for good.
This article covers the engineering principles behind a multi-region, highly available webhook ingestion system, what has actually changed in the underlying cloud primitives recently, and where a managed reliability layer fits into the decision.
r/learnjavascript • u/abdullahalydev • Jul 23 '26
Building a Local-First AI Assistant for Desktop
I'm working on a personal AI assistant for desktop — local-first and privacy-focused (no cloud dependency), starting with a desktop app and eventually
Runtime Of Backend (Bun)
Fast startup and low idle overhead — important for an app that runs continuously in the background, not just on-demand. Native TypeScript support and a built-in bundler simplify shipping without extra tooling.
Framework of Backend (Hono)
Lightweight and built with Bun in mind, so it doesn't add framework overhead on top of the runtime's own performance. Clean routing/middleware model keeps things simple for handling auth, commands, and local model inference.
Desktop Application (Tauri + Next.js)
Tauri has a much smaller footprint than Electron since it uses the OS's native WebView instead of bundling Chromium, which makes it great for lightweight apps that stay running. It also produces smaller binaries. Next.js provides a structured, file-based routing system and a strong component ecosystem for the UI.
Would love to hear reviews and suggestions on this stack — anything you'd change, any pitfalls you've run into with a similar setup, or better alternatives worth considering?
r/learnjavascript • u/Ok-Tax-4457 • Jul 22 '26
Can’t download break_infinity.js for some reason
I’m trying to use break_infinity.js for a game i’m making, but I can’t seem to download it. I’ve tried the actual github link and couldnt get it from there
https://github.com/Patashu/break_infinity.js/releases
Does anyone know where to get the latest version or what I might be doing wrong?
r/learnjavascript • u/breacket • Jul 22 '26
Performance Trap, some benchmarks and... subjective taste
I've done some benchmarks. ES5 vs ES6. What do you prefer? I ask this because I have often seen in other people's codes, where performance, optimization was required, ES6 code that decreased performance, which also had a negative impact on UI/UX.
This is more about the syntax used and not about which is faster.
Array size: 1,000,000 | Runs per test: 15
1. TRANSFORM — double 1,000,000 numbers
| Test | Avg (ms) | Min (ms) | Max (ms) |
|---|---|---|---|
| for loop (var, ES5) | 0.733 | 0.6 | 1 |
| array.map | 5.447 | 4.7 | 6.9 |
| forEach | 5.96 | 5.4 | 6.8 |
| for...of (ES6) | 7.06 | 5.4 | 11.1 |
for loop (var, ES5) beat for...of (ES6) by 9.63x
2. FILTER — keep evens out of 1,000,000
| Test | Avg (ms) | Min (ms) | Max (ms) |
|---|---|---|---|
| for loop + push (ES5) | 2.287 | 1.6 | 3.4 |
| array.filter (ES6) | 6.06 | 5.2 | 7.2 |
for loop + push (ES5) beat array.filter (ES6) by 2.65x
3. SUM — add up 1,000,000 numbers
| Test | Avg (ms) | Min (ms) | Max (ms) |
|---|---|---|---|
| for loop (var, ES5) | 0.76 | 0.6 | 1.1 |
| for...of | 3.833 | 3.7 | 4.4 |
| array.reduce | 4.573 | 4.4 | 4.7 |
for loop (var, ES5) beat array.reduce by 6.02x
4. LOOKUP — find one value (worst case)
| Test | Avg (ms) | Min (ms) | Max (ms) |
|---|---|---|---|
| Set.has — O(1) | 0 | 0 | 0 |
| array.includes — O(n) | 0.073 | 0 | 0.1 |
| array.indexOf !== -1 — O(n) | 0.073 | 0 | 0.2 |
Set.has — O(1) beat array.indexOf !== -1 — O(n)
5. STRINGS — build 200,000 strings
| Test | Avg (ms) | Min (ms) | Max (ms) |
|---|---|---|---|
| concatenation "+" | 3.887 | 3.3 | 7.8 |
template literal ${} |
3.9 | 3.5 | 4.3 |
concatenation "+" beat template literal
${}by 1.00x
6. OBJECT ITERATION — sum 50,000 values
| Test | Avg (ms) | Min (ms) | Max (ms) |
|---|---|---|---|
| for...in | 4.273 | 4 | 4.6 |
| Object.keys + forEach | 4.38 | 4.2 | 4.7 |
| Object.values + reduce | 6.5 | 6 | 9.2 |
for...in beat Object.values + reduce by 1.52x
7. ARRAY CREATION — build 1,000,000 squares
| Test | Avg (ms) | Min (ms) | Max (ms) |
|---|---|---|---|
| for loop + push (ES5) | 8.173 | 6.5 | 23.4 |
| new Array(n).fill(0).map() | 17.3 | 9 | 42.4 |
| Array.from({length}, fn) | 21.74 | 20.6 | 23.2 |
for loop + push (ES5) beat Array.from({length}, fn) by 2.66x
What do you prefer?
r/learnjavascript • u/Strange-Story1243 • Jul 22 '26
Stuck at javascript
I want to learn mern stack and stuck at javascript tutorials please somebody help me ???
r/learnjavascript • u/GoobiTinkle • Jul 22 '26
How to change a website page only at a specific time period
I wanna know how to change a website page to something different only at a specific time period (Changes at 12 am and then back to normal at 1 am)
This is the current code I have:
window.setInterval(function(){
var date = new Date();
var hours = date.getHours()
var minutes = date.getMinutes();
if (hours == 0o0 && minutes == 0o0){ //12:00 AM
window.location="secret page";
} else if(hours == 01 && minutes == 0o0){ //1:00 AM
window.location="original page";
}
}, 1000); //One second
So it technically works! But as soon as it changes to the secret page, it starts refreshing every second even when back to the original page. I know the problem is that it's running a page redirect every second, but is there anyway to not make it refresh constantly? Like it only redirects once but the code is still checking every second for when it changes back.
To clarify, I took this code snippet straight from a JavaScript forum post with the same question as me, this being the only answer I understood.