esbuild is faster but Webpack offers a larger interface and more fine-grained control. That's my take. What do you recommed. I want real people because AI responses are not enough for me.

Hi. the next code snippet shows how to code a web server with Nodejs and Express. The idea is creating an HTML form to input user data and after pressing the button a new HTML page displays which contains the input data only. You can move back and forth between the pages and the data will persist due to sessions.

👀 Requirements :

Nodejs v22.13.0

Npm v10.9.2

Expressjs v5.3.0

Express-session v1.19.0

Ejs v7.0.2

👀 File Structure :

-- Project-folder/

---- node_modules/

---- views/

------ index.ejs

------ profile.ejs

---- package.json

---- server.js

🤔 Server.js:

const express = require('express');
const app = express();
const path = require('path');
const ejs = require('ejs');
const session = require('express-session');


app.set('view engine','ejs');


app.use(session({
    secret : "some random string here bla bla",
    resave: false,
    saveUninitialized: true
}));


app.use(express.urlencoded({extended : true}));


app.get("/",( request, response )=>{


    if(request.session.profile){


        return  response.render('index',{profile :{
               fullname : request.session.profile.fullname,
               occupation : request.session.profile.occupation
         }});
    }


    response.render('index',{profile : {
          fullname : "",
          occupation : ""
    }});


   
});


app.post("/handle_form_data",( request, response )=>{


    console.log(request.body);


    if (!request.session.profile) {
        request.session.profile = {};
    }


    request.session.profile.fullname = request.body.fullname;


    request.session.profile.occupation = request.body.occupation;


    console.log(request.session);


    response.render('profile',{
           profile : {
              fullname : request.body.fullname,
              occupation : request.body.occupation
           }
    });




});


app.listen(3000, ()=>{


    console.log('Listening at port : ' + 3000);
});

🚀 index.ejs :

<!DOCTYPE html>
<html>
    <head>
        <title>Profile Data</title>
    </head>
    <body>
        <div>
            <form method="post"  action="/handle_form_data">
                <label for="fullname">
                    Full Name : 
                    <input 
                      name="fullname" 
                      id="fullname"
                      value="<% (profile.fullname) ? profile.fullname : ''; %>" />
                </label><br/>
                <label for="occupation">
                    Occupation : 
                    <input 
                     name="occupation" 
                     id="occupation"
                       value="<% (profile.occupation) ? profile.occupation : ''; %>"
                      />
                </label><br/>
                <button type="submit">
                    Send Profile
                </button>
            </form>
        </div>
    </body>
</html>

🚀 profile.ejs :

<!DOCTYPE html>
<html>
  <head>
      <title>Profile Data</title>
  </head>
  <body>
      <h1>Profile Data</h1>
      <h2>
         Fullname : <%= profile.fullname %>
      </h2>
      <h2>
         Occupation : <%= profile.occupation  %>
      </h2>
  </body>
</html>

Well, I hope it provides some guidance to the Nodejs developers somehow. Share your thoughts in the comments. Thanks. 😄

Hi!

First of all, I am not sure if this is the right sub.

But I was wondering if there was a way to add a function in an addon for an app (anki) that would let me know the "name" of the element I selected or clicked on, just like when pressing f12 on a web page.

The thing is that some elements I want to "find" come from an addon and not from anki directly.

I'm working with Node and Express to create a simple API, but I'm running into 404 errors when trying to access my endpoints. I set up the routes and thought I had everything right, but requests to those endpoints are failing. I'm testing locally and my middleware seems fine. Is there something I'm missing regarding route handling, or could it be an issue with the order of middleware? Any tips for troubleshooting this would be appreciated.

I'm a huge Marvel fan, and I'm trying to create a timeline of the entire MCU. I want to use the table from this link:
https://marvelcinematicuniverse.fandom.com/wiki/Chronological_Order/Viewing_Timeline
and enter the Checkbox/Watched Column into column 1 Names column into column 2, Medium into column 3, and Dates column into column 4, and the Release column into column 5.

I was going to read the 2nd ed version of You Don't Know JS: Async & Performance, but it's still in "todo".
Is it worth reading the 1st ed?
It was written 9 years ago.
I know it predates async/await, but I'm keen to learn how things work behind the scenes, so I'm hoping in that regard, things haven't changed too much and async/await is just syntactic sugar.

I am learning Javascript. Can someone please recommend me some learning resources?
What would you recommend for beginner projects? Are arcade web games suitable for a beginner?

Hello everyone! I am learning Javascript and at the moment I wanna have practice. Where can I have this?

I've been learning more about Javascript lately and keep finding features that make coding easier and cleaner.

For me optional chaining (?.) and nullish coalescing (??) were really useful discoveries.

What feature made the biggest difference in your coding experience?

Hey everyone!

I'm currently learning frontend development and building a Steam-like gaming storefront as a practice project.

I'm using the RAWG API, but I'm having some issues with the data. Important details like full game descriptions, system requirements, and pricing are sometimes missing. I'm also making around 40 API calls, which feels inefficient for a frontend project.

I'm looking for a free API or open-source alternative that provides:

• Game details and full descriptions
• Minimum and recommended system requirements
• Current game prices and discounts
• Game cover images and screenshots
• Genres, ratings, release dates, and platforms
• A reasonable free request limit

Since this is a learning project, I'd prefer something free for personal, non-commercial use.

What API would you recommend for this use case? Is there a good alternative to RAWG, or is there a better way to reduce the number of API calls?

Any suggestions, documentation links, or examples would be really helpful. Thanks!

I've been learning js for about two months, I know how to order arrays with find, filter, map, reduce & some more basic stuff. I also understand data structures, object management ,arrow functions, DOM manipulation, asynchronous timers, local storage, loops. I've been thinking of learning React.js but it seems pretty advanced and I'm not sure if I should master more of JavaScript before moving on

I've made a fake restaurant website where you can order items and add them to your cart, clear cart, make a fake reservation, clear reservation and view reservation.

I also made a really simple shop sim where customers come every five seconds to order random quantities of random stuff with their patience decreasing every second. The user can also close and open the store. It's really simple and extremely repetitive

This is an unfinished project but I started on a pantry simulator, right now I've coded that you can add ingredients in your pantry, filter by category/sort/search through them, edit their amount and delete them. I got pretty bored though.

Hey guys, I'm just starting to learn about variables, but I'm finding it hard to understand the difference between var and let.

For example:

let goodDay = true;
console.log(goodDay);

this should print true.

But if we just add this:

let goodDay = true;
console.log(goodDay);
goodDay = false;
console.log(goodDay);

It prints:

true
false

The same goes for var.

However, people say there's a difference; what is it?

Understanding the concepts like functions, objects, arrays etc has been easy so far but promises are making my head hurt. Is it supposed to be this confusing? Did u guys struggle with it too when u were first learning it.

Is there a way I can skip this page to bypass the content prompt box?

https://pastebin.com/0LtzYb7g

This is a simple Nodejs server which is ideal for beginners. 😄

The next code snippet runs a web server which sends an HTML form to the web browser. The user inputs a random text and when the HTML form data is submitted then the input text is returned to the web browser as a JSON object.

Requirements:

Nodejs v23.3.0

Npm v11.0.0

Express v5.3.0

File Structure :

--Project folder/

---- node_modules/

---- Public/

-------- index.html

---- package.json

---- server.js

server.js file :

const express = require('express');
const path = require('path');
const app = express();
const port = 3000;

//This allows the HTML form data to be processed
app.use(express.urlencoded({extended : true })); 


//an HTML form is displayed when visiting localhost:3000

app.get("/",( request, response )=>{


      response.sendFile('index.html',{
          root : path.join(__dirname,"public")
      });
});

//This request handler gets the HTML form data and displays it to the web browser and also to the console

app.post("/handle",( request, response )=>{


      console.log(request.body);

      response.json(request.body);
});

//This line spins up the web server
app.listen(port, ()=>{

    console.log('Listening at port:' + port);
});

HTML file :

<html>
    <head>
        <title>Test File</title>
    </head>
    <body>
        <h1>Simple Form</h1>
        <form action="/handle" method="post">
            <label for="randomString">
                <input type="text" name="randomString" id="randomString"><br/>
            </label>
            <button type="submit">
                    Send random string
                </button>
        </form>
    </body>
</html>

if (windowStatus == 1) 
        {
            windowStatus = 1
        }

I noticed that many students struggle with the question of "if I update this slot, field or variable, what else will change in my program".

I wrote a little puzzle game to help you build this intuition over time. It is very mobile friendly, so you can play it at a bus stop or during a commercial break or wherever. Puzzles scale in difficulty.

You can use it in Python, JavaScript or TypeScript modes.

http://prescod.github.io/memory-mapper-game

Please respond with changes you would like to see, or bug reports, or whatever. There is also an in-app feedback button.

There are no ads in the game or any monetization at all. This is not an ad for a product!

Does anyone know what could be causing a button i added on a card html/css template to stop being clickable after a few seconds (like 8 maybe) ? what is more annoying is that it stays in this state for the next card shown so it only works once.

<style>
#toggler {
    visibility: hidden;
    display: block;
    margin: 10px auto 0 auto;
    background: rgba(255,255,255,0.6);
    border: 1px solid #a77f65;
    border-radius: 14px;
    padding: 4px 12px;
    font-size: 18px;
    font-weight: bold;
    cursor: pointer;
    color: #a77f65;
    opacity : 0;
    z-index : 5;
    --delay : 5s;
} 

#toggler:hover {
    background: rgba(255,255,255,0.9);
}
#toggler.show {
    animation: showtoggler 1.6s ease backwards; 
    animation-delay: 0s; 
}
.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;
    }
}
</style>



<button id="toggler"  class="fade-in">
        <type="button"> Hide/Show</button>





<script>
(function(){
    const backupp = document.getElementById("Backupp");
    const audio = document.querySelector("#audio-container audio");
    const korean = document.getElementById("korean");
    const backback = document.getElementById("backback");
    const toggler = document.getElementById("toggler");

    if(backupp && (!audio || audio.src === "")) {
        Backupp.classList.add("show");
        if(korean) korean.style.visibility = "hidden";
    }
    else {
        if(korean) korean.classList.add("show");
        if(backupp) backupp.style.visibility = "hidden";
    }

   toggler.addEventListener('click', () => { 
        if(backback) backback.classList.toggle("show");
        if(korean) korean.style.color = "red";
        <!--reload(); // tried this 
        });

  })();

</script> 

this button appears after some time and only in the front side.

My college program is 2 years and my first semester has JavaScript and second semester has python. I am a month into my program and I'm doing well in SQL and HTML courses, but JavaScript is making me annoyed constantly and want to drop the program. I understand the different topics on their own but the second I'm asked to do anything or explain when they're put together I'm lost and have no clue what to do, I have no interest in programming but need it if I want to pass this program and potentially do my last two years for cybersecurity. How can I better understand JavaScript since my mid term is in two weeks for it?

**Anyone learning JavaScript interested in a small study group?**

Hey everyone! I’m learning JavaScript independently and would love to connect with a few people at a similar stage.
I’m comfortable with HTML, still learning CSS, and currently working through JavaScript fundamentals like loops and conditionals.

Studying alone can get a little isolating, so I thought it would help to have people to practise with, ask questions, and share progress.
I’m thinking of a small group of around 3–5 people where
we can:

Work through coding challenges and compare solutions.
Help each other understand concepts when we get stuck.
Build small projects together.
Have regular study sessions and keep each other accountable.

I’m a learner too, so this would be us figuring things out together. No pressure to know everything—just be willing to participate and keep learning.
I’m based in Jamaica (UTC−5 year-round) and work alongside studying, so we can figure out times that suit everyone.

If you’re interested, comment or send me a DM with your time zone and what you’re currently learning!

How would you people learn js and it's libraries if you started all over again?

Hi everyone

I just started learning Node.js just a few hours ago, and I'm really confused (wanted to cry too). Could someone help me clarify a few things?

After I initialized a Node.js project, I see the following in package.json:

"type": "commonjs"

Then I run this code:

console.log('sync');
process.nextTick(() => console.log('nextTick'));
Promise.resolve().then(() => console.log('promise'));

The output is:

sync
nextTick
promise

Then I installed TypeScript and executed the same code again, but in a .ts file. This time, the output is:

sync
promise
nextTick

Interestingly, I get the same output when I set "type": "module" in package.json.

So I asked ChatGPT:

1. Does the TypeScript compiler change the execution order to behave like an ES module?

ChatGPT answered:

"Your tsx example produced ESM-style ordering, but you shouldn't assume every tsx file or situation will behave the same way."

Now I'm even more confused! Could someone help me clarify this?

ChatGPT's answer seems that the output when using TypeScript with CommonJS does not necessarily match the output of either CommonJS or ESM....

I also have a few related questions about the Node.js event loop:

2. As far as I know, the Node.js event loop has several phases, including:

1. Timers (setTimeout callback)

2. Poll (I/O-related callbacks, such as reading files or receiving network data)

3. Check (setImmediate callback)

Is this correct? If so, which phase runs first?

3. Are Promise callbacks handled separately from the Node.js event loop? Is the following execution sequence correct?

1. Drain the process.nextTick() queue.
2. Drain the Promise microtask queue.
3. Execute the next event loop callback (setTimeout, readFile, setImmediate, etc.)

4. Back to 1

In https://github.com/getify/You-Dont-Know-JS/blob/2nd-ed/types-grammar/ch1.md it says:

JS originally provided a global function called isNaN(..) for NaN checking, but it unfortunately has a long-standing coercion bug. isNaN("Kyle") returns true, even though the string value "Kyle" is most definitely not the NaN value. This is because the global isNaN(..) function forces any non-number argument to coerce to a number first, before checking for NaN. Coercing "Kyle" to a number produces NaN, so now the function sees a NaN and returns true! This buggy global isNaN(..) still exists in JS, but should never be used. When NaN checking, always use Number.isNaN(..), Object.is(..), etc.

But to me the fact that using a string like "Kyle" in any mathematical operation would return NaN, means it would make sense that isNaN("Kyle") is true.

What's your opinion on this?

I saw Lingo's own Reddit is restricted and isn't active so I'm asking here in case anyone can help.

I have my translations sorted out for my personal worldbuilding language, BUT, when I use code to change the translator's font to my own custom symbols it ignores the translations and instead applies the symbols to what is written in English (see below):

https://file.garden/Znqz2UubgS78Hiaz/image.png (Without the font, using = as an example)
https://file.garden/Znqz2UubgS78Hiaz/image2.png (With the font, ignores the set translation '=' entirely)

The code I'm using comes from this thread:
How to add a custom font to your translator that's not on Google webfonts [FIXED!] : r/lingojam .
I do not know Javascript or code at all so this is very alien to me.

I need to have the code work in a way that makes the symbols apply to the translated text, not mirror the text on the English/input side.

Any feedback is appreciated.

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?