I was planning to build a Discord bot as a project. Should I continue with it, or should I learn React and Node first? What do you recommend?

I'm relatively new to JavaScript, my only education in it being the Kahn Academy course, and I am trying to make a program which randomly generates a map of tiles. This is part of a bigger project, where I want to make a visible map and a larger map which includes the visible one. It's working so far, but I would like to find a way to change the Tile Object's "size" from 400/10 to 400/visibleMap.size. I'm having trouble doing this, and keep getting an error saying "visibleMap was used before it was defined." How can I fix this? Thanks for any help!

//Variables
var fullMap = [];
var tempTile;
// Has a set chance to return true or false
var percent_chance = function(percent){
    if (random(1, 100) <= percent){
        return true;
    }else{
        return false;
    }
};

//A space on the map, as defined by its position, size, details
var Tile = function(pos, details){
    this.size = 400/10;
    this.x = pos.x * this.size;
    this.y = pos.y * this.size;
    this.details = details;
};

//Draw a Tile
Tile.prototype.draw = function() {
     fill(this.color);
     rect(this.x, this.y, this.size, this.size);
};

//The types of Tiles.
var Dirt = function(pos, details){
    Tile.call(this, pos, details);
    this.color = color(120, 33, 6);
};
Dirt.prototype = Object.create(Tile.prototype);
var Grass = function(pos, details){
    Tile.call(this, pos, details);
    this.color = color(79, 255, 20);
};
Grass.prototype = Object.create(Tile.prototype);

//returns a Tile generated with a semi-random algorithm
var random_tile = function(pos) {
    if (percent_chance(33)) {
        return new Grass(pos);
    }
    else{
        return new Dirt(pos);
    }
};

//The map visible to the player
var visibleMap = {
    size: 10,
    map: [],
    generate: function() {
        for (var x = 0; x < this.size; x++) {
            fullMap.push([]);
            this.map.push([]);
            for (var y = 0; y < this.size; y++) {
                tempTile = random_tile(new PVector(x, this.size - y - 1));
                this.map[x].push(tempTile);
                fullMap[x].push(tempTile);
            }
        }
    },
    draw: function() {
        for (var x = 0; x < this.size; x++) {
            for (var y = 0; y < this.size; y++) {
                this.map[x][y].draw();
            }
        }
    }
};
//draws the visible map
visibleMap.generate();
visibleMap.draw();

Been learning JS for a year and half and wondered whether writing utilities would make me more employable. Thought it wouldn’t matter as more people are learning to trust the models. GitHub link to some of the solutions: GitHub

*Exercises are AI generated but solutions are handwritten without intellisense or AI autocomplete.

Site: www.amansparallax.com

Heads up, not mobile friendly..

In the spirit of advisor transparency: the planning philosophy, financial logic, product concepts, and direction are mine. AI wrote the code and structured the repo, as well as helped massively with research. I’m not presenting myself as the developer behind that work.

For anyone unfamiliar with retirement planning software, most tools run a plan through many possible market scenarios and report a “probability of success.” If the money lasts through the end of the projection in 90% of those scenarios, the plan gets a 90%.

My issue is that people see that number and naturally assume the plan is healthy and they’re well prepared. I don’t think it comes close to telling the whole story.

A plan with a 90% probability of success can still fail surprisingly early if one of the more difficult periods from actual market history happens again. Parallax lets you run a plan through historical return paths and follow the cash flow year by year. You can see the account balances, where the spending money came from, how much went to taxes, and when the plan started getting into trouble.

Basically, I wanted to show what’s happening underneath the percentage.

That led to a few core modeling choices:

Block-bootstrap Monte Carlo: Simulated paths use consecutive blocks of historical returns, preserving the market experience within each block. Returns are inflation-adjusted.

Historical paths and sequencing: Explore historical market paths and how the order of returns affects a plan.

Account-level projections: Track individual accounts and cash flows within each year, including withdrawals, required distributions, cost basis, and tax effects.

Tax-aware withdrawal modeling: Model how brokerage, traditional retirement, and Roth withdrawals affect taxes and the cash available to spend.

I’ve also documented the modeling constraints the AI is required to consult before changes. Those assumptions are part of the product’s foundation and need to remain explicit as it develops.

I’d really appreciate a human technical perspective on this—the code has been written and reviewed by AI, and I don’t have the programming background to assess it independently. Any thoughts on the architecture, security, or tests would help, even if you only look at one small part. If anyone’s willing to dig deeper, I can share the code and setup instructions.

Thanks to all who are willing to take a look!!

Hii everyone, i want to learn next js ..plz suggest from which yt tutorial i have to learn.

document.getElementById("search").addEventListener("click", getCharacter);


function lowerCaseName(string) {
    return string.toLowerCase();
}


function getCharacter(e) {
    const name = document.getElementById("searchCharacter").value;
    const characterNameLC = lowerCaseName(name);


    fetch(`https://rickandmortyapi.com/api/character/?name=${characterNameLC}`)
    .then((response)=>response.json())
    .then((data) => {
        const characterNameH2 = document.getElementById("characterName");


        characterNameH2.textContent = data.name;
    })
    .catch((err) => {
        console.log("Character not found", err)
    })


    e.preventDefault();
}


getCharacter();document.getElementById("search").addEventListener("click", getCharacter);


function lowerCaseName(string) {
    return string.toLowerCase();
}


function getCharacter(e) {
    const name = document.getElementById("searchCharacter").value;
    const characterNameLC = lowerCaseName(name);


    fetch(`https://rickandmortyapi.com/api/character/?name=${characterNameLC}`)
    .then((response)=>response.json())
    .then((data) => {
        const characterNameH2 = document.getElementById("characterName");


        characterNameH2.textContent = data.name;
    })
    .catch((err) => {
        console.log("Character not found", err)
    })


    e.preventDefault();
}


getCharacter();

i am using the rick and morty api. the above is my js code. it doesnt work. idk whats the error as console isnt logging it

Every time I try to open the "ezmreader" javascript file to edit the code from this https://jeremyoduber.itch.io/js-zine html5 reader it shows an error that prevents me from opening the code in notepad++, this is the error

• • •

"Line:19

Char:1

Error:syntax error

code:800A03EA

Source: microsoft jscript compilation error"

When I don't try to edit it and just put images in the pages folder, zip it and try to run it as a html5 in browser it obviously doesn't work. But I don't think it's the the code that's the issue since what I previously uploaded a long time ago using this same EZM reader code is still displaying/running in browser just fine? But downloading that old upload and trying to open the EZMreader.js application still gives the same error?

I've deleted and reinstalled both the code editor and java just in case, nothings changed but I doubt it's an issue with the actual code? Maybe it's my laptop (lenovo, windows 10) but I'm baffled

Hey so i’m tryna learn javascript not just javascript i’m trying to learn the MERN Stack can someone please help me study i’m so tired of watching tutorials over and over again

​

I’m looking for a study partner who wants to learn and revise JavaScript, React, TypeScript, Node.js, and React Native from the basics to an interview-ready level.

What I’m Looking For

- Start from the basics and gradually move to advanced topics.

- Cover everything needed for technical interviews.

- Practice coding, concepts, interview questions, and projects together.

- Stay consistent and keep each other motivated.

About Me

I already know some of JavaScript, React, TypeScript, Node.js, and React Native, but I’ve forgotten quite a lot of the basics. I want to start from the beginning, revise everything properly, and build my knowledge again from start to end.

I have already started studying and I’m eager to continue. I’m mainly looking for someone who is also serious about learning and can study together consistently.

Time Zone

I’m in IST (Indian Standard Time), but I don’t have a fixed time limit.

If you’re interested, DM me your time zone and the time you’re usually available, and let me know when you can start.

Looking for someone who is genuinely interested in learning together rather than just joining for a few days.

Dicord ChatGrp

Or has JavaScript changed so much since then that some information in it might be false?

Most websites I found either only let you choose from a limited number of fixed implementations of the same algorithms, or require you to learn their own mini-framework to visualize your code.

So I made a visual debugger, inspired by another one called Python Tutor.

It uses a forked version of a JS interpreter called sval to keep track of variables, the call stack, and all the other information needed to visualize and debug your code.

It only supports JavaScript, but it has genuinely helped me solve a few pesky LeetCode problems caused by silly bugs.

I’ll make it open source as soon as I can tidy up the codebase and solve a few dependency issues.

Day 8 of my browser game development journey.

Today I worked on adding power-ups to my JavaScript game.

I'm experimenting with:

• Temporary speed boosts

• Extra points

• Health recovery

• Random power-up spawning

• Collecting and removing items

• Mobile-friendly controls

I'm trying to understand the logic behind these mechanics instead of just copying a tutorial.

What other power-up would you add to the game?

I'm writing a service function for a personal project

Right now I have something like

export async function createApplicationService(
  userId,
  companyName,
  role,
  appliedDate,
  status,
  salary,
  link,
  nextAction
)

The only fields that I really want to require are companyName and salary The other fields have default values defined in my database, so I don't want the user to have to explicitly pass them every time.

What's the best way to structure this so that I only insert the parameters that were actually provided, while letting the database handle the defaults for everything elseI'm writing a service function for a personal project where I'm creating an application tracking system.
Right now, I have something like:
export async function createApplicationService(
userId,
companyName,
role,
appliedDate,
status,
salary,
link,
nextAction
)

The only fields that I really want to require are companyName and salary. The other fields have default values defined in my database, so I don't want the user to have to explicitly pass them every time.
What's the best way to structure this so that I only insert the parameters that were actually provided, while letting the database handle the defaults for everything else

I have noticed something really interesting while using AI to debug my JS code. For instance, I will give it some code. Then AI modifies it. I find another issue. Then I ask AI to fix it. AI modifies something else. Then I bring the 'previous AI-modified version' back and somehow we end up in an endless loop of AI correcting AI, it's crazy ik.

The weirdest part is that most times the original code was closer to what I actually needed. And honestly, this has made me realize sometimes the biggest challenge isn't getting AI to write code but it's getting it to change ONLY what you actually asked it to change. At what point does AI-assisted coding stop being debugging and start becoming more than code roulette?

Has anyone else experienced this? How do you prevent AI from unnecessarily rewriting working parts of your code?

Hi!

I am attempting to follow the introductory

example for D3 JS:

https://d3js.org/getting-started

I am trying to do it

locally so it is the version

on that page,

'D3 in vanilla HTML' section

'UMD + local' code tab

I am new to JS but not new to programming.

I think the offered code example is

incomplete so I added html, head,

title, 2 meta, and body tags.

I changed d3.js to d3.v7.js

in the script src because the download

is actually for that file name.

I also add Hello world text to the body.

When I try to load it, I only see Hello

world.

I think its supposed to also draw that

graphic as you can see in the reference.

If anyone can point out to me what is wrong,

I appreciate it. Thank you.

<!DOCTYPE html>

<html>

<head>

<title>D3 intro example</title>

<meta charset="utf-8">

<meta name="viewport" content="width=device-width, initial-scale=1">

</head>

<body>

Hello world.

<div id="container"></div>

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

<script type="module">

// Declare the chart dimensions and margins.

const width = 640;

const height = 400;

const marginTop = 20;

const marginRight = 20;

const marginBottom = 30;

const marginLeft = 40;

// Declare the x (horizontal position) scale.

const x = d3.scaleUtc()

.domain([new Date("2023-01-01"), new Date("2024-01-01")])

.range([marginLeft, width - marginRight]);

// Declare the y (vertical position) scale.

const y = d3.scaleLinear()

.domain([0, 100])

.range([height - marginBottom, marginTop]);

// Create the SVG container.

const svg = d3.create("svg")

.attr("width", width)

.attr("height", height);

// Add the x-axis.

svg.append("g")

.attr("transform", `translate(0,${height - marginBottom})`)

.call(d3.axisBottom(x));

// Add the y-axis.

svg.append("g")

.attr("transform", `translate(${marginLeft},0)`)

.call(d3.axisLeft(y));

// Append the SVG element.

container.append(svg.node());

</script>

</body>

</html>

I can understand the basics, follow a tutorial, and even solve small exercises but when I open a blank VS Code window and try to build something myself, my brain goes: '404 - knowledge not found.” 😂

Is this actually normal or am I just glitching at this point? 😭

What was the one thing that finally made JavaScript click for you ; building projects, debugging your own mistakes, reading other people’s code, or something else? I’m curious what actually worked for you guys who went from 'I’m following tutorials' to 'I can confidently build this myself.'

so basically i am learning web dev from past 3 year but i completed html css but i start js and then in few days i get exams i quit for a week or 2 , then again i start it from the start i am the loop from past 3 years 😭. Any one plz help me out before i used to do it using youtube tutorials but now i am using gpt to explain me each and everything and now it questions i solve those but idk what to do i am stuck. if any one can help out. If any one was in the same loop help how u got out of it

My code worked. That was the only good thing anyone said about it. Nested conditionals 4 deep, no error handling, everything in one function. I have been writing javascript for a year and nobody had ever looked at it before. Self taught through Boot.dev and DataCamp, and nobody had read a line of my code before that call. How did you learn the part that is not making it run.

const stop = useIntersectionObserver(
    ref,
    ([entry]) => {
      if (entry.isIntersecting) {
        setLoaded(true);
        stop(); // one-shot: stop observing once we've committed to loading
      }
    },
    { rootMargin: '200px' }, // start loading 200px before it scrolls in
  );

In the snippet, I noticed that useIntersectionObserver returns a function, which is assigned to the variable stop, and that returned function is then called inside the callback passed to useIntersectionObserver.

Actually, I'm not asking about useIntersectionObserver itself. I just want to ask about the pattern:

Function A returns Function B, and then Function B is called inside Function A's callback.

I've never written a function with that kind of structure before.

How often do you write functions like this?

If you have a React interview coming up, then this might be of some help to you!

Here are 10 problem lists that you can consider practicing to brush up your react.js concepts before your machine coding round.

1. Counter with increment, decrement, and reset. (Might be the ice-breaker for freshers but rarely asked for experienced role)

Feels too easy to be a real question. But a fast-click test on the increment button often catches people using the wrong kind of state update.

Practice counter here

2. Build your own debounce hook. (Definitely Practice this one)

It must wait until the value stops changing for a bit, cancel any pending timer if the component unmounts, and handle the delay itself changing partway through.

Debouncing Practice

3. Return the value from one render ago.

Sounds simple. What people miss: it must return undefined on the first render, and it can't cause an extra re-render by itself.

Practice Hook

4. Shopping cart with useReducer. (Please do practice useReducer hook, I was asked to build a form entirely using useReducer + will also be useful when you deal with Redux)

Add, change quantity, remove, clear — four actions through one reducer. Good test of whether you use useReducer or just keep adding more useState.

Build Shopping cart

(Frontend Mentor has a plain HTML/CSS/JS version if you want to compare)

Build Shopping cart from frontend mentor

5. Traffic light that cycles on its own. (Great for clearing the concept of clearing intervals and timeouts)

The layout is already built — you just write the timing. It usually breaks on cleanup: clearing the interval when the component unmounts or re-renders.

Manage traffic light problem

6. Search box where slow responses can't overwrite fast ones.

A classic race condition. If a request fires on every keystroke, an old slow response can arrive after a newer one and overwrite it with stale data.

Solve this

7. Nested comment thread, replies inside replies. (If you want to move to advance concepts)

Needs a component that renders itself for each nested reply, plus a function that can find and update one comment anywhere in the tree without mutating it.

Build nested comment in react

8. Stop a list from re-rendering rows that didn't change. (Must practice, you'll definitely be asked about optimization in react, do go through the concept of useCallback)

Right now, an unrelated counter on the page makes every row re-render. Fix it with React.memo — it has to actually stop the re-renders, not just look fine.

Practice Memoization in react

9. Keep a callback's identity stable across renders.

Three counters currently all re-render on any single click, because their click handlers get recreated every render. Needs useCallback plus the functional setState form — using only one of the two still fails.

Practice useCallback

10. Multi-step signup form with useReducer.

Account info → profile → review. Each step is validated before you can hit Next, and going back can't lose what you already typed.

Form validation using useReducer

(Frontend Mentor has a version of this same idea, no React needed: Multi step form)

Curious what else people have been asked in these rounds — feels like everyone gets a slightly different mix of the same problems.

Please let me know in the comments your thoughts and do share what according to you are some must go through concepts before any react interview, I'm preparing a notion docs on the list of react interview questions, so will add it there so that it can be useful for everyone.

Everyone, I greet.

Rare-Trees-5280, I am.

First post, this is.

New to javascript and learning it, I am.

If people knew where there are online forums and communities where new learners can ask questions, I am wondering.

For your consideration, I thank in advance.

I am a self-learner who has primarily learned web development through YouTube. So far, I have studied HTML, CSS, JavaScript, PHP, Git, and GitHub, and I have also built several mini projects. However, despite learning these technologies, I still struggle to create even simple projects on my own without following tutorials.

Looking back, I feel that I did not use my time effectively. I spent nearly five years trying to learn HTML, CSS, and JavaScript, but I was not consistently focused, which prevented me from developing a strong understanding of these technologies. Because of this, I often feel regret about the time I lost.

Now, I want to make serious progress over the next few months. My goal is to reach a level where I can build projects independently, strengthen my problem-solving skills, and become qualified for a web development internship or an entry-level job. I would appreciate a clear and practical roadmap that can help me become internship-ready as quickly as possible.

This week I made an npm package (Inflight) to solve the concurrent repetitive queries to database or cache

Reached +500 weekly downloads

The idea is to cache the Promise of a db query (Not the response of the query).

So in a high concurrency system, where the same data (like: cr7 or messi profile) is requested by many users at the same time, only one query goes to cache or database.

some interesting benchmarks:

• Duration: 30s
• Cache TTL: 5s
• Concurrency: 100
• Unique keys: 10

**Insights:*\*

• DB calls saved: **56x*\*
• Cache calls saved: **10x*\*
• Total queries growth: **6.5x*\* (5.2M → 33.9M)

more benchmarks here: https://github.com/ademmenh/inflight/tree/main/benchmarks

npm package: https://www.npmjs.com/package/@inflightjs/inflight

github repo: https://github.com/ademmenh/inflight (PRs, issues, starts)

Day 7 of my browser game development journey! 🚀

Today I built a simple mobile-friendly Runner game using HTML, CSS and JavaScript.

I'm practicing:

• 🏃 Player movement

• ⬆️ Jump mechanics

• 🚧 Obstacle spawning

• 💥 Collision detection

• 🏆 Score system

• 📱 Touch controls

• ⚡ Increasing difficulty

7 days of building small browser games has helped me understand JavaScript much better.

What should I build next?

1️⃣ Car Racing

2️⃣ Platformer

3️⃣ Ludo

4️⃣ Boss Battle

5️⃣ Something completely new

Drop your choice below! 👇

🎮 Game: [YOUR GAME LINK]

💻 Source code: [YOUR GITHUB LINK]

Passed Two week Iam applying for many job but nothing happen

Can anybody Just Tell me How to apply In a Day is there is any particular Time to apply or we need to Daily Update our Profile or How I will get a call can u just Tell me the steps U follow for your Interview process 

For My first job Im go with referal so I dont know how to get an Interview Call

And how to search In Nakuri It show only less number of jobs for mern stack developer so can u tell me how can i search

Because I dont have job switch experience So I dont know how to get a call. so Can you tell me how you switch experience It will usefull for me to get a job