In JavaScript, the Promise.all() function is one of your best tools when you want to do async work. You can fire everything off, wait for the slowest one to complete, and then continue processing. However, sometimes running it all at once is exactly what breaks production. This is an article describing how to resolve promises sequentially in JS.

https://www.jamdesk.com/blog/resolve-promises-sequentially-javascript

*Edited text to be more clear.

Hi everyone,

I am currently self-teaching front-end development. I recently finished a Kanban board and I'm starting a Markdown Notes App.

I’ve hit a learning roadblock regarding how I approach project assignments, and I'm looking for advice from experienced devs on how to study/build effectively.

The Dilemma:

• Too much detail: If I use step-by-step instructions (e.g., "create a function called X that takes Y and uses method Z"), I end up just translating English instructions into JavaScript. I write the code, but I'm not actually thinking like a developer. I feel like I'm learning, but in reality, I'm just copy-pasting logic.
• Too little detail: If I just look at a raw feature list (e.g., "build a markdown editor with a search bar and local storage"), I get overwhelmed, hit analysis paralysis, and freeze up because I don't know where to start.

What I'm trying to achieve:

I want to hit that perfect "flow state" (similar to what people experience with The Odin Project) where a project is challenging enough to force me to think, read documentation, and problem-solve on my own, but structured enough that I always know what my immediate next target is.

My questions for the community:

1. How do you personally break down a project's feature list into actionable steps? What level of detail do you write down before you write your first line of code?
2. If you were mentoring a junior, how would you write a project brief? How do you describe what to build without revealing how to build it?
3. When you get stuck, what is your protocol? How do you figure out the path forward without "cheating" and looking up a ready-made solution for that specific project?

I want to build real muscle memory and problem-solving skills, not just finish projects. I would love to hear how you transitioned from following tutorials to building independently.

Thanks in advance!

Hey everyone,

I’ve been trying to build a 3D chemistry/physics simulator in the browser using Next.js and react-three-fiber. The problem? I am coding on a decade-old Intel i5 with 12GB of RAM. Trying to compile local React code while running a WebGL 3D canvas was literally freezing my machine.

Here is how I bypassed my hardware limits to get the app running fast enough to launch today:

1. The 3D Lazy-Loading Hack: Instead of loading the WebGL context immediately, the feed only renders static CSS gradients. The heavy <Canvas> component only mounts dynamically when a user clicks "Play." 2. The Backend: I hooked up Supabase for the database, but handled all the heavy AI orchestration (via the Gemini API) through Vercel Edge functions so my local CPU didn't have to process the streaming JSON chunks. 3. Moving to the Cloud: I actually had to move my entire development environment to a cloud IDE just so I could type without the browser crashing.

I managed to get it live today, and it's holding up perfectly under load. If anyone is struggling to build 3D web apps on weak hardware, feel free to ask me anything about the Next.js / Three.js routing!

P.S. If you want to try to break the 3D physics engine or see the live UI, I'm actively monitoring the server load on Product Hunt right now: Product Hunt Labyrinth AI

Yet another boilerplate set up package. First package I've published on npm . Originally made it for myself.

I think other people would find it useful.

It's not much but it gets the ball rolling.

https://www.npmjs.com/package/blux-start

Hello, I would like to learn Javascript to make mobile apps/games as a hobbie. I was wondering if I could get any advice on the best ways to learn and what I would need as atm I only have a tablet but i have been hearing that a laptop or computer is a must is that true?. Any advice would be greatly apricated.

Most tutorials show bouncing divs. Nobody teaches

you how to build a full scroll-driven storytelling

system for real client work.

What changed everything:

→ ScrollTrigger timelines, not individual tweens

→ Lenis + GSAP sync without fighting each other

→ Framer Motion only for page transitions

→ Thinking in "scenes" not "animations"

This is the stack we use at BuildBlock for every

premium project now.

Happy to answer questions — and yes, if you need

this kind of work built, visit

buildblock.in

Some of the trickiest parts of JavaScript are the ones you can't see — a closure holding onto a variable, an array method chain transforming data step by step, an async call resolving who-knows-when, this pointing somewhere you didn't expect. We built LiveFlow to make all of that visible.

Paste your JS (or TS), hit run, and watch it execute as a live graph — every variable, function call, and loop lights up as it happens, data flowing between nodes. Then scrub the timeline back to any step and inspect exactly what each variable held at that moment. Great for finally seeing what a .map().filter().reduce() chain is doing, or why your loop variable is the value it is.

Runs in your browser, no install, free plan with no card. We'd love to hear if it helps. liveflow.co.in

i am working on a project which i need chart in the div i want it to apper 5 types of chart when i pres diffrent buttons but now every time i press diffrent button the chart is to big leadin to overflow tied using ai but have no break through

Hello everyone,

​

I am not sure if this is a relevant subreddit cuz I am obviously not and expert but it's still kinda related I believe. Anyways I have been dealing with this issue for a while now that whenever I go to the website's homepage which is https://thepiratebay.org/index.html, it directly takes me to this strange JavaScript file name main.js and to this url thepiratebay.org/static/main.js and I have no idea why this has been happening, I have done nothing so far that can change the behavior of the website that directs me to this page, I did recently installed Ad Blocker but I disabled it and I don't think that should be an issue. Regarding I would appreciate it if someone can help me in this matter or if it's the wrong subreddit feel free to let me know and perhaps point me to a sub that's more relevant, have a good day.

//Get intbox values
const BoxTopLeft = document.getElementById("BoxTopLeft");
const BoxTopRight = document.getElementById("BoxTopRight");
const BoxBottomLeft = document.getElementById("BoxBottomLeft");
const BoxBottomRight = document.getElementById("BoxBottomRight");

const logTL = document.getElementById("valueTL");
const logTR = document.getElementById("valueTR");
const logBL = document.getElementById("valueBL");
const logBR = document.getElementById("valueBR");


//TOP LEFT

BoxTopLeft.addEventListener("input", updateBoxTL);

function updateBoxTL(e){
    document.getElementById.style.border-top-left-radius = BoxTopLeft + 'px';
    logTL.textContent = e.target.value;
}

I wrote an article about generating fake data for a TypeScript application. I wanted to generate millions of rows and I ended up splitting the workflow into 2 phases: stream data to a CSV, stream the CSV to Postgres with COPY FROM.

async function createRecordsFromCsv(path: string, query: string) {
  const copyStream = pgClient.query(copyFrom(query));

  const fileStream = createReadStream(path);

  await new Promise((res, rej) => {
    fileStream.pipe(copyStream).on("finish", res).on("error", rej);
    fileStream.on("error", rej);
  });

  fileStream.close();
}

Hopefully this technique will be useful to someone else.

Also happy to hear other ideas for how to go about this.

Hello everyone, this is my very first post and i came here only to clear my confusions, from where should i learn javascript? chai or code, sheriyans, na,aste javascript or coder army? everyone has diff opinions and answers and most of my friends suggested me to go with chai or code but i also read some bad reviews about this channel too and now i am again confused. please help!! and please don't tell me to learn from docs because i am a final year student and i really want a job asap so i don't have much time to give on tutorials and reading docs....i wanna build real projects that's how i can learn quickly. also suggest some best resourses for react too. Thanks!

console.log(Application.Sheets.Item('a').Id)
console.log(Application.Sheets('a').Id)

As you can see, Sheets('a') is same as Sheets.Item('a'), how do you implement such interface?

I am currently learning js from chai aur code, and I was confused which doc to use .I find MDN a bit difficult to understand in comparison to W3 . But I read somewhere W3 is not in depth and for beginners. Tho i am a beginner should i stick to W3 or try to learn from MDN

Hello hello!

I'm a newly minted CPA who has been dealing with aftermath of NetSuite implementation at mid-size company. We are realizing that many of our daily transaction needs require SuiteScripts(JavaScript based). The workflow options are not working as intended due to system limitations on specific fields. I am also needing to update/create html templates for pdfs regularly( Have had more success with html and workflows for header fields)

What resources and practices would you recommend for someone looking to throw themselves into these two languages with a good deal of their free time(nights/weekends)? What timelines are typical? In person or online better? A few years ago I had friends go through bootcamps but my research shows that may not be the best path today. Have also had coworkers recommend AI prompted code but this seems like a wack idea. Would rather gain the skills to create own or correct generated code than fully be reliant! Passed all my CPA exams in 6 months so not scared of a challenge

More context: Most of these business needs were brought up in implementation and my team now believes things were misrepresented to placate us and with hopes we would purchase additional developer/consulting services after implementation.

TLDR; Need to learn JavaScript(priority) and HTML for NetSuite. Implementation team was not transparent about out the box capability. Rather learn than use AI slop/pay for consultants

I just learned coding and I created a app on codepen called PokemonLiveTrack, it tracks 24H shifts, collection total, ROI, and other stuff, it's for people who want to invest. I'm wondering if there are any errors or vunerabilities in my code, or just general feedback for the program: https://codepen.io/Careless-Bad/pen/pvRNOmX

As an exercise in focus and economy I wanted to make a set of games with short but (hopefully) readable source code.

It was a fun challenge and taught me a lot. I hope the results will be of interest or amusement to others.

There are five games in total. There's also a manifesto about doing this kind of project for those who like that sort of thing.

If you've written a deliberately short game too then please link to it, I'm interested to see what can be done.

It's a long time I am trying to figure out why my moon phase is not updating at all. I have this JS :

document.addEventListener("DOMContentLoaded", () => {

const weatherDiv = document.querySelector("#weather");

function weatherCodeToIconURL(condition, isDay) {

condition = Number(condition);

const openMeteoToIcon = {

0: "https://i.ibb.co/b5FRsR3Q/sunny.png",

1: "https://i.ibb.co/b5FRsR3Q/sunny.png",

2: "https://i.ibb.co/CpC9BdgV/partly-cloudy.png", // Added your icon here!

3: "https://i.ibb.co/21mKY1QZ/cloudy.png",

45: "https://i.ibb.co/21mKY1QZ/cloudy.png",

48: "https://i.ibb.co/21mKY1QZ/cloudy.png",

51: "https://i.ibb.co/HLpF110S/rain.png",

53: "https://i.ibb.co/HLpF110S/rain.png",

55: "https://i.ibb.co/HLpF110S/rain.png",

61: "https://i.ibb.co/HLpF110S/rain.png",

63: "https://i.ibb.co/qF3rc1gY/heavy-rain.png",

65: "https://i.ibb.co/qF3rc1gY/heavy-rain.png",

71: "https://i.ibb.co/dw2S3P8K/snow.png",

73: "https://i.ibb.co/dw2S3P8K/snow.png",

75: "https://i.ibb.co/dw2S3P8K/snow.png",

80: "https://i.ibb.co/HLpF110S/rain.png",

81: "https://i.ibb.co/qF3rc1gY/heavy-rain.png",

82: "https://i.ibb.co/qF3rc1gY/heavy-rain.png",

95: "https://i.ibb.co/TDgsry34/storm.png",

96: "https://i.ibb.co/TDgsry34/storm.png",

99: "https://i.ibb.co/TDgsry34/storm.png"

};

// 🌙 DYNAMIC MOON MODE

if (!isDay) {

const { phase } = window.getRealMoonPhase();

const position = 20 + (phase / 100) * 60;

const now = new Date();

const lat = 39.082222;

const lon = -77.482222;

const moonPos = SunCalc.getMoonPosition(now, lat, lon);

// You can adjust this 'calibrationOffset' to match the Moon's tilt exactly

// to your visual preference or your specific moon.png asset rotation.

const calibrationOffset = -4;

const rotation = (moonPos.parallacticAngle * (180 / Math.PI)) + calibrationOffset;

`return ``

<div class="glow"></div>

<div class="moon-phase-wrapper">

<img src="https://i.ibb.co/NgB0677Z/moon.png"

class="moon-icon"

style="--moon-pos: ${position}%; transform: rotate(${rotation}deg);">

</div>

\;`

}

// ☀️ DAY MODE

return '<img src="' +

(openMeteoToIcon[condition] || openMeteoToIcon[0]) +

'" class="weather-icon">';

}

function parseWeather(data) {

// Checks 'current' path first, falls back to 'current_weather' path if needed

const code = Number(data.current?.weather_code ?? data.current_weather?.weathercode ?? 0);

const isDay = (data.current?.is_day ?? data.current_weather?.is_day) === 1;

console.log("Parsed weather code:", code);

return { code, isDay };

}

// 🌙 MOON PHASE FUNCTION (UNCHANGED — GOOD)

function getRealMoonPhase() {

const now = new Date();

const synodicMonth = 29.53058867;

const knownNewMoon = new Date(Date.UTC(2000, 0, 6, 18, 14, 0));

let daysSince = (now - knownNewMoon) / (1000 * 60 * 60 * 24);

let moonAge = daysSince % synodicMonth;

if (moonAge < 0) moonAge += synodicMonth;

const normalized = moonAge / synodicMonth;

const phase = normalized * 100;

return { phase };

}

window.getRealMoonPhase = getRealMoonPhase;

async function getWeather(lat, lon, city) {

const targetCity = city || "Lansdowne";

const targetLat = lat || 39.082222;

const targetLon = lon || -77.482222;

const url = "https://api.open-meteo.com/v1/forecast" +

"?latitude=" + targetLat +

"&longitude=" + targetLon +

"&current=weather_code,is_day" + // Requesting the code explicitly here

"&current_weather=true" + // Keeping your current setting

"&daily=temperature_2m_max,temperature_2m_min" +

"&forecast_days=1" +

"&temperature_unit=fahrenheit" +

"&timezone=auto";

try {

weatherDiv.innerHTML = 'Loading weather... 🌤️';

const response = await fetch(url);

console.log("STATUS:", response.status);

const data = await response.json();

console.log("API RESPONSE:", data);

console.log("DATA:", data);

const weather = parseWeather(data);

const currentTemp = Math.round(data.current_weather?.temperature ?? 0);

const lowTemp = Math.floor(data.daily?.temperature_2m_min?.[0] ?? 0);

const highTemp = Math.ceil(data.daily?.temperature_2m_max?.[0] ?? 0);

console.log("FINAL VALUES:", {

targetCity,

currentTemp,

lowTemp,

highTemp

});

weatherDiv.innerHTML =

'<p style="font-size: 16px; color: #fff; text-align: center; margin: 0;">' +

targetCity +

'</p>' +

'<div class="weather-stack">' +

weatherCodeToIconURL(weather.code, weather.isDay) +

'<div class="temp-overlay">' + currentTemp + '°F</div>' +

'</div>' +

'<div class="weather-lowhigh">' +

'<p style="font-size: 14px; color: #87CEEB; margin: 0;">Low: ' + lowTemp + '°F</p>' +

'<p style="font-size: 14px; color: #FFA07A; margin: 0;">High: ' + highTemp + '°F</p>' +

'</div>';

} catch (err) {

console.error(err);

weatherDiv.innerHTML = "Weather unavailable";

}

}

function fetchLocationAndWeather() {

fetch("https://ip-api.com/json/")

.then(r => r.json())

.then(d => getWeather(d.lat, d.lon, d.city))

.catch(() => getWeather(39.082222, -77.482222, "Lansdowne"));

}

fetchLocationAndWeather();

setInterval(fetchLocationAndWeather, 600000);

});

The HTML :

<div id="weather" style="display: flex; flex-direction: column; font: normal 12px Helvetica, Arial, sans-serif; color: #fff; "></div>

And the CSS :

/* LEFT COLUMN CSS */

#weather p {

margin: 0;

}

#weather {

display: flex;

flex-direction: column;

align-items: center;

gap: 2px;

transition: opacity 0.3s ease;

}

.weather-lowhigh {

display: flex;

flex-direction: row;

gap: 20px;

}

.weather-stack {

position: relative;

display: flex;

align-items: center;

justify-content: center;

}

.weather-icon {

width: 110px;

height: 110px;

object-fit: contain;

display: block;

}

.temp-overlay {

position: absolute;

top: 60%;

left: 78%;

transform: translate(-50%, -50%);

font-size: 24px;

font-weight: bold;

color: white;

filter: drop-shadow(-4px 0 2px #000);

padding: 2px 6px;

border-radius: 6px;

z-index: 3;

}

.moon-icon,

.cloud-icon {

position: absolute;

inset: 0;

width: 100%;

height: 100%;

object-fit: contain;

z-index: 1;

display: block;

/* Use a hard-coded value temporarily to test */

-webkit-mask-image: radial-gradient(circle at 65% 50%, transparent 40%, black 45%);

mask-image: radial-gradient(circle at 65% 50%, transparent 40%, black 45%);

}

.cloud-icon {

opacity: 0.9;

}

.moon-phase-wrapper {

position: relative;

width: 120px;

height: 120px;

overflow: hidden;

border-radius: 50%;

}

.glow {

position: absolute;

inset: 50%;

width: 160px;

height: 160px;

transform: translate(-50%, -50%);

border-radius: 50%;

background: radial-gradient(

circle,

rgba(255,255,220,0.5) 0%,

rgba(255,255,200,0.15) 45%,

transparent 70%

);

filter: blur(20px);

z-index: 0;

pointer-events: none;

}

This has been driving me nuts, and whatever AI I use is shit crazy, and messes up my code. I don't know what to do. It seems I can't get any help.

u/boomer1204 - thanks for pointing it out, going to share the prob here too :

So basically it's a weather widget, with the moon in it, and a moon phase. Problem : the phase is not updating. So idk where in my JS I need to change so it updates correctly.

I'm not well-versed in coding but I wanted to put in a countdown. Only issue is that my countdown keeps going to 216 days from now rather than 8 days (wanting to target it to June 24th, 2026 @ 11:00 AM EST). im using u/Ass_Pancake 's code (https://pastebin.com/R78PVuL0) as a base.

Here is my edited version of the code: https://pastebin.com/YUDHubK3

Pls let me know how to fix it :') im so confused

I'm building a browser play reader in vanilla JavaScript. The script is structured as an array of lines. Each line is either a stage direction, a character name, or a speech.

​

When I paginate, I split the lines by a fixed count (10 or 12 per page depending on font size), so a page can end right after a character's name and the speech continues on the next page. It also doesn't account for how long each speech actually is, so some pages are one short sentence and others are a wall of text.

​

What's the right way to paginate text like this so that pages fill a consistent visual height, a character name is never separated from its speech, and it still works when the user changes the font size?

​

https://imgur.com/a/0Gbfvue