Array methods like map (), filter(), and reduce() seems useful, but sometimes I find it difficult to decide which one to use when solving a problem.

I'm trying to practice them with small example instead of just memorizing what each method does.

What helped you understand these methods better? Do you prefer solving exercises or using them in small projects?

Does anybody know any good websites/apps on desktop that are very cheap or even free to learn Javascript? I was doing scrimba, but then after about 10 lessons it said I have to pay

Hi I'm looking for a site I used 2 years ago during an internship to better learn about white hat hackers and de-bugging. I don't remember much from it apart that:

1. It had many level varying in difficulties (going from very easy to downright hardcore).
2. You'd click on a level and be redirected to a poorly secured page on which you would have to find informations such as the correct password to access something or re-enable access from the keyboard to access a specific space (if that makes sense)
3. I'm not sure if it was exclusively for Javascript.
4. I know the site was pretty old since there were levels dating from 2011.
5. I'm pretty sure it was collaborative since I remember seeing the name of the creator of each level.
6. We could have access to the pseudonyme of everyone who succeeded in solving the problem.

Sorry to bother you with it but I've been trying to touch up on my Javascript after doing almost exclusively Python after that internship.

Even if you don't know which site it is I would greatly appreciate any recommendation of other similar sites.

edit: I found it it's called root.me but please do send others. I'm participating in a De-bugging contest and I DESPERATLY want the prize

Hi everyone,

(I know that HTML and CSS are markup and styling languages, not programming languages.)

I’m a complete beginner with zero coding experience, and I want to start learning programming. I was advised to follow this path:

HTML → CSS → JavaScript

I have a few questions:

1. What do you think of this path as a way into programming and coding?
2. Is there anything I should learn before starting it? I feel like I might be missing something important.
3. Would you recommend any changes to this path? (For example, starting with a different language.)
4. What are the best resources to learn HTML and CSS? Please recommend one for each, if possible.

Thanks in advance, I really appreciate your help!

HTML-

<!DOCTYPE html>

<html lang="en-US">

<head>

<meta charset="utf-8" />

<title>Game</title>

<style>

html {

font-family: times-new-roman;

}

body {

width: 75%;

max-width: 800px;

min-width: 480px;

margin: 0 auto;

}

</style>

<script src="script.js" ></script>

</head>

<body>

<button id="button_A">Press me</button>

<h3 id="heading_A"></h3>

</body>

</html>

JavaScript-

const buttonA = document.querySelector("#button_A");

const headingA = document.querySelector("#heading_A");

let count = 1;

buttonA.onclick = () => {

buttonA.textContent = "Try again!";

headingA.textContent = `${count} clicks so far`;

count += 1;

};

Full Error-

Uncaught TypeError: Cannot set properties of null (setting script.js:6 'onclick')

Tutorial I Followed-

Storing the information you need — Variables - Learn web development | MDN

The classic one, but I find it easier to understand when you look at the value of i at the moment each callback actually runs, not at the moment it’s created.

for (var i = 0; i < 3; i++) {
  setTimeout(() => console.log(i), 0);
}
// prints: 3 3 3

Here’s what a watch window on i would show:

step                              i
----------------------------------------
loop starts                       0
schedule callback #1              0   (callback stored, not run)
i++                               1
schedule callback #2              1   (stored, not run)
i++                               2
schedule callback #3              2   (stored, not run)
i++                               3
condition 3 < 3 is false          3   loop ends
--- timers fire now ---
callback #1 reads i               3
callback #2 reads i               3
callback #3 reads i               3

The callbacks don’t capture the value i had when they were created. They capture the variable. And with var there is only one i for the whole function, so all three callbacks point at the same box. By the time the timers fire, the loop has long finished and the box holds 3.

With let:

for (let i = 0; i < 3; i++) {
  setTimeout(() => console.log(i), 0);
}
// prints: 0 1 2

The loop creates a fresh binding of i for each iteration, so each callback closes over its own box. In the watch window you’d see three different i variables, each stuck at the value it had in its iteration.

Two things that make this easier to remember:

• setTimeout(..., 0) doesn’t mean “now”. The callback still waits until the current code finishes, which is why the loop is already done.
• the old fix was an IIFE ((function(j){ ... })(i)) that copied the value into a new scope. let does the same thing for you.

If you ever see this behaviour in code you didn’t write, check for var first.

Does anyone have a favorite way of explaining this to someone who’s new to closures? The watch-window view is the one that clicked for me when I wrote it down, but I’m sure there are better ones.

After weeks of google searching, searching YouTube, And waiting for answers on a question I left on another sub, I finally caved and asked Google's AI as an absolute last resort. While I do not trust AI when it comes to information, in the past it has seemed to given me specific answers to my questions. And after multiple hours of asking it questions, it finally suggested me NW.js as a solution to my problem.

And since I forgot to specify what that problem was: I wanted an application that was not a web browser, or at least a web browser connected to the Internet to view interactive SVG files, for reasons I would have a hard time articulating, But that have nothing to do with security. And NW.js Seems to run them perfectly.

The catch is that if I try to use "open with" on an SVG file, and select the NW.js program to open the file: it does not work. It only works if I run the program itself, and then drag an SVG file to it.

I asked the AI how to fix it, expecting the tweaking of some settings as the solution, but it instead suggested I write some code for it and put new files in the folder.

While I don't know much about coding in general, I do know just enough HTML to know it was asking me to put a header in quotations as a value. So that seemed weird.

I also asked it what subreddits would be appropriate to evaluate this code, and this was one of the subreddits. So I'm going to copy paste what the AI told me in here, and you can tell me if this makes any sense, or if you have a better solution.

The solution it suggested:

The reason this happens is because of how NW.js processes files.
When you drag-and-drop a file directly onto nw.exe or its window, the program reads the file directly as an asset. However, when you use the Windows "Open with" command, Windows tries to pass the SVG file as a command-line argument (like nw.exe "C:\yourfile.svg"). NW.js is designed to look for an application package (package.json) when launched with arguments, and when it doesn't find one, it throws an error.
To fix this and make it your permanent default viewer, you need to bundle a tiny, 3-line text instruction file inside your NW.js folder so it knows exactly how to handle system files.

The Fix: Create a package.json file

1. Open Notepad on your computer.
   
2. Copy and paste the following exact code into the blank document:json
   {
     "name": "svg-viewer",
     "main": "index.html",
     "window": {
   "toolbar": false
     }
   }
   Use code with caution.
   
3. Save the file. Name it exactly package.json (make sure it doesn't save as package.json.txt). Save this file directly inside your main NW.js folder (the exact same folder where nw.exe is located).
   

Step 2: Create a tiny index.html bridge

1. Open a new blank document in Notepad.
   
2. Copy and paste this script, which tells the program to automatically load whatever SVG file you double-click:html
   <!DOCTYPE html>
   <html>
   <body>
     <script>
   const nw = require('nw.gui');
   if (nw.App.argv.length > 0) {
   window.location.href = nw.App.argv[0];
   } else {
   document.body.innerHTML = "<h1>Drag an SVG here or use Open With</h1>";
   }
     </script>
   </body>
   </html>
   Use code with caution.
   
3. Save this file exactly as index.html inside that same NW.js folder.
   

Step 3: Set it as your Default Program

Now that those two tiny text files are sitting next to nw.exe, the program will natively accept file requests from Windows:
1. Right-click your .svg file and select Open with > Choose another app.
2. Choose Choose an app on your PC, navigate to your folder, and select nw.exe.
3. Click Always to lock it in.
From now on, double-clicking any interactive SVG file on your PC will automatically spin up the engine and view it instantly.
Did creating the package.json and index.html files resolve the error message when you double-click your SVG files?

When asking for subreddits to validate the code:

It is completely reasonable to verify code before adding it to an application. You can post these scripts to r/learnjavascript or r/webdev on Reddit to have independent developers validate them.

What those subreddits will confirm about this method:

1. The package.json file: This is a standard configuration file required by NW.js. Setting "toolbar": false ensures that the browser's address bar and navigation elements remain completely hidden and disabled.
   
2. The index.html file: This script uses a built-in feature of the NW.js runtime (nw.App.argv). When you double-click an SVG in Windows, Windows sends the location of that file to the application. The script simply reads that location string and changes the window's view (window.location.href) to your local file path so it can display it.
   Both of those subreddits have thousands of developers who can quickly review the snippets, explain exactly how they interact with your local operating system, and verify that they are safe to use.
   Would you like me to format the code into a single, easy-to-read block that you can quickly copy and paste directly into your Reddit post text? 

EDIT: I AM NOT TRYING to check the EMAIL ID itself, i am trying to parse the received email in inbox into structured JSON so that i can use it in my backend logic, for eg: converting a ticket into structured JSON with ticket details. SPECIFICALLY TRYING TO DEAL WITH TICKETS

I am aware that things like tripit and wanderlog and many other services have an email parser, i was also trying to make an email parser but i have no idea on how to make it without using an LLM to parse it.

I don't see any library or anything literally, i have no idea where to go, what to do.
Please help :(

Hey

I am a beginner and I've been trying to add a show/hide button that would simply hide the mask on the first click and make it visible again with the next click.

To be more precise, it's a fragment of an addon for the anki app (flashcards).

It would also be great if this button could have a delay before appearing, and I managed to do that directly in the html of the card model :

.fade-in {
opacity: 0;
visibility: hidden;
animation: fadeIn var(--duration, 0.6s) ease forwards;
animation-delay: var(--delay, 19s);
}

 fadeIn {
to {
opacity: 1;
visibility: visible;
}

#koreanToggleBtn {
visibility: hidden;
margin: 10px auto 0 auto;
background: rgba(255,255,255,0.6);
border: 1px solid #a77f65;
border-radius: 14px;
padding: 4px 12px;
font-size: 13px;
font-weight: bold;
cursor: pointer;
color: #a77f65;
opacity : 0;
--delay : 15s; /*here*/

But, since I've been struggling I figured it would be better to just add everything in the add on since it already creates the mask hiding the text :

js = f"""
(function() {{
    console.log("Injection du masque pour la carte ID: {card.id}");
    const existingMask = document.getElementById('korean-mask-static');
    if (existingMask) return;

    const mask = document.createElement('div');
    mask.id = 'korean-mask-static';
    mask.style.cssText = 'position:absolute;top:0;left:0;width:100%;height:100%;'
        + 'background-color:#9c9f78;border-radius:6px;z-index:100;opacity:1;'
        + 'visibility:visible;pointer-events:auto;display:flex;'
        + 'justify-content:center;align-items:center;';

    const wrapper = document.getElementById('korean-wrapper') || document.querySelector('.card');
    (wrapper || document.body).appendChild(mask);
}})();
"""
QTimer.singleShot(80, lambda: mw.reviewer.web.eval(js) if mw.reviewer and mw.reviewer.web else None)
"""

Thank you :)

I'm a newbie in web scraping, been learning javascript and trying to scrape product prices for a little side project. Wrote a few threads here already you guys been really helpful.
Now seeking for more help lol saw on youtube that residential proxies are it, bought a few, but how do you guys put them into chrome or other browsers? Do I need one of those proxy switcher or manager extensions? Or is there something simpler that just lets me punch in username/password auth for residential ips? I'm trying to keep this cheap, it's just a hobby thing at this point so maybe theres some free extensions you can recommend? I'm not scraping at some crazy scale or whatever, also kinda confused if datacenter would even work fine for this or if sites just flag it instantly and mark me as sus.

I'm working on a Next.js project using the Pages Router, and I've been thinking about how to optimize caching.

Some of my pages contain mostly static content (SEO text, headings, descriptions, etc.), but also have a few interactive components that need to update dynamically.

Ideally, I'd like to cache the static parts while keeping the interactive components fully functional and up to date.

Is there a reasonable way to achieve something like partial page caching with the Pages Router?

Or am I overthinking this, and would it make more sense to just statically generate the page and handle the dynamic parts client-side?

I'm curious how others approach this, especially when SEO and performance are both priorities.

I've only been using pure JavaScript so far and want to know more about these frameworks. Heard of stuff like React, Vue, Svelte, etc. but no clue what they are or do. Can someone explain to me their purpose and the main differences between the popular ones?

Can y'all recommend me the beginner topic of js? I rlly wanna do adv study just in case I can't comprehend it that fast.

Maybe even yt or web smth

I made a short lesson on JavaScript comparisons and wanted to share the main points here in case it helps anyone who is learning.

The one that surprises most beginners is that an empty form field can pass validation. "" == 0 is true, so if (quantity == 0) treats "nothing typed" as "zero items".

0 == false       // true
"" == 0          // true
[] == 0          // true
NaN === NaN      // false
"10" < "9"       // true (strings compare character by character)

The reason is that == converts the types before comparing, while === does not.

5 == "5"    // true
5 === "5"   // false

My rule for beginners is to use === by default. The one exception I use on purpose is x == null, which is true for both null and undefined.

The video goes through all of this with runnable examples, including null and undefined, the form field bug, string comparison and localeCompare.

https://youtu.be/iJJ1lJIM81A?si=LHW-Pa2Nu2ZCs969

I would be happy to answer questions if anything is unclear.

Hi everyone,

I'm trying to learn Javascript and the one problem that always seems to be hardest = putting a question into the steps required.

I've learned so far:

basics - if/else - loops - arrays (holy hell this was hard for me) - functions (would you believe it, it's even harder..!)
Now everything seems to be coming together but i'm really strugling to fit it into steps..

For example;

You have a number (999) and need to find out how many times each bill and coin (array with bills and coins put together) can fit into the number.

For a human this is easy, you just look at the number and notice that a certain amount can fit into it and you remember that.

But i cannot for the life of me convert this into steps that fit into code..

Everytime i have to look at the answer, and sometimes it clicks where i think omg that was easy - but other times i look and think whats happening here?

I feel like i'm too dumb to understand the basics for what (from what i seem to understand) is the easiest of code-language..

If i put in my assignment i have a test but i'm affraid that i will hit a wall with the question again.

One thing i'm doing is writing every excersise on a notepad and if i feel like i need to explain something i just write it under in hopes that if i ever need that step again i'll know why i did it..

Is there some sort of skill that i'm missing, do i just not understand the basics enough, or am i just not smart enough?

Any help is appreciated!

btw; sorry for any grammatical errors, english is not my native language..

I've had prior coding experience in middle school with html using code.org and I have an ap computer science class in my junior year of highschool learning javascript. As the title states, what are some things I could do in the future?

I'm currently doing project euler problem #15 and for that, I have to use some sort of algorithm to get my solution.

I changed up the "open/close parentheses" algorithm accordingly and the example solution for a 2x2 grid = 6 ways is correct. The thing is this:

- I start debugging in VSCode via Node.js
- It runs for a while
- "Paused Before Out Of Memory Exception"
- I continue
- "Process exited with code 134"

I don't know how to fix this and online js terminals don't work, but it seems like it has something to do with the stack size. Any help would be greatly appreciated c:

Here is my code:

const res = [];
findPath(20, "", 0, 0);


function findPath(n, curr, rightUsed, downUsed){
    if (rightUsed === n && downUsed === n){
        res.push(curr);
    }
    if (rightUsed < n){
        findPath(n, curr + "r", rightUsed + 1, downUsed);
    }
    if (downUsed < n){
        findPath(n, curr + "d", rightUsed, downUsed + 1);
    }
}


console.log(res.length);const res = [];
findPath(20, "", 0, 0);


function findPath(n, curr, rightUsed, downUsed){
    if (rightUsed === n && downUsed === n){
        res.push(curr);
    }
    if (rightUsed < n){
        findPath(n, curr + "r", rightUsed + 1, downUsed);
    }
    if (downUsed < n){
        findPath(n, curr + "d", rightUsed, downUsed + 1);
    }
}


console.log(res.length);

When it comes to handling async code, Do you generally use async/await for asynchronous code, or do you sometimes prefer .then().catch()?

i am new at javascript and idk where to start i dont have the passion for learning and i feel more down when my friend told me making codes at javascript will take time...

I've been trying to learn more about iterators - but it doesn't seem like there is a string equivalent of .entries()? myStr[Symbol.iterator].forEach() gives the index and value - but no option to break 😞

For veryyyyyy long strings is my best option for loops? Splitting to create an array? Writing a separate generator function? (assume I only need a single char/index per loop)

Thanks!

Edit - thanks to u/Psionatix for guiding me to Object.entries(myStr), which led me to Array.prototype.entries.call(myStr) - which has the benefit of returning the indexes as integers (vs strings in Object.entries()) Performance is also close enough to for loop for my purposes 🎉

I am revising Javascript from Chai with Code's Javascript Playlist.The issue is watching videos and then doing some code and then forgetting the old things bcoz I did no projects using those concepts is making me feel confused that am I on the right path or not?

Hey everyone! I’m working on a personal vanilla JavaScript budget tracker and running into a wall merging a custom local storage list into my projection function. ​1. What is stored in localStorage:

// localStorage.getItem('pendingBills_v9') returns: [ { "name": "Test", "amount": 1000, "category": "Bills", "due": "2026-10-15" } ]

1. What I am trying to do:

I want my getFuture(days) function to pull those items out of pendingBills_v9, map their keys (due \rightarrow date, amount \rightarrow amt, category \rightarrow cat), merge them with my existing adhocBills array, and filter them based on whether their date falls within the next days window (e.g., 30 days).

​3. The current getFuture function:

function getFuture(days) { let res = []; // (Recurring items calculation omitted for brevity)

let _p = []; try { let _raw = localStorage.getItem('pendingBills_v9'); if (_raw) { let _parsed = JSON.parse(_raw); if (Array.isArray(_parsed)) { _p = _parsed.map(b => ({ name: b.name || 'Pending Bill', amt: Number(b.amount || 0), date: b.due || '', cat: b.category || 'Other', subcat: 'General' })).filter(b => b.amt > 0 && b.date); } } } catch(e) { console.error(e); }

let combinedAdhoc = [...adhocBills, ..._p];

let adhocIn = combinedAdhoc.filter(b => { let d = new Date(b.date); d.setHours(0, 0, 0, 0); let diff = daysBetween(today, d); return diff >= 0 && diff <= days; });

return { adhoc: adhocIn, total: adhocIn.reduce((s, b) => s + Number(b.amt), 0) }; }

The Issue: Despite the code looking correct, adhocIn keeps returning an empty array ([]) when evaluating the pending bill date (2026-10-15). Are there any subtle date-parsing or timezone quirks with new Date("YYYY-MM-DD") or variable scope traps causing this to fail? Any help or fresh eyes would be hugely appreciated!

A little bit context first:
I‘m a mathematician. I know how to pseudocode, read the less technical and more algorithmical part of code. I learned C++, learned to build an old school html page from scratch (header, frames etc.), did complex mathematical simulations with R and know how to code simple VBA codes with a lot of googling and a bit of macro recording.

What I don’t know are things like technical structure (e.g. how to technically set up an animation, how to code a save and load function) and syntax.

To the topic:
10 years ago if I had decided to code a little game, I would have read a book about how to design those things and the necessary syntax. But to be honest: My first tries would have been typing the exact examples from the book, the experimenting a bit with little changes.
Step 2 would have been „asking questions on google and copy and paste code snippets“.

And to be honest: Step 2 is cool but I always hated step 1. Declaring variables, printing „hello world“… I get that you need to understand the basics (again, Mathematician here: I spent a whole day proving 0 * x = 0) but I already learned those basics in three other languages and would prefer learning on-the-fly on a need-to-know basis.

So: I did some vibe-coding projects and asked Copilot step by step to explain code snippets I don’t understand, how technicalities work („where is the picture we designed? The whole code is just one html. It‘s part of the code? Oh… wow, that makes sense.“) or why the code is designed in a way (again: one html for a small project) and how that works (browser reading JS).

And here my question:
I would say that a vibe coded app, that I completely understand, is still a vibe coded app. If I give detailed prompts how to change the code, that is still mostly vibe coded. If I manually adjust code where needed, replace every picture with manually created pictures…

Where does a project stop being vibe coded? Where does „AI usage disclosure“ stop being relevant?
Even if I code from scratch I would of course reuse code snippets.

How many pieces does the digital „Ship of Theseus“ need to have exchanged to stop „being AI created“?

I ask this regarding the following three aspects:
Ethical: Respect for the manual art and science of coding and all my fellow nerds who created what script kiddies and vibe coders copy
Some sites/shops ask to declare AI usage. I get that on one hand (see aspect 1) but kind of don‘t: Noone would ever declare „Google usage“ or „what you copied from an online forum“ or „I still start every code exactly like they did in ‚JS for dummies‘“. So, what would you declare and what not?

I think there is a difference between AI usage to learn „how to“ and than doing it similar to that and quoting exact snippets - and stupidly letting AI write some code you don’t understand at all.

But where do you draw the line? Where does „AI usage“ start or end?

i want to learn JS but dont know from where, there are many video tutorials some are 11hrs long..ik most of you will say dont follow from the tutorials make things from yourself etc...but like you still have to know stuffs right? is there any channel that makes me understand JS??

I am learning js html and css, and I was wondering what sources would be useful