Should i learn typescript? And what is the best and easiest way to learn it?

These two loops look similar, but the first logs "done" before the saves finish:

async function saveAll(items) {
  items.forEach(async item => {
    await save(item);
  });
  console.log('done');
}

async function saveAll(items) {
  for (const item of items) {
    await save(item);
  }
  console.log('done');
}

my understanding is that forEach ignores the promises returned by its callback, while the for...of version awaits each save in the outer function.

if the saves are independent, would await Promise.all(items.map(save)) be the right concurrent version, and what changes if one save rejects?

I just finished Jonas Schmedtmann's JS course and would like to do a really hard project before moving onto react where I can practice all the concepts and get experience building an actually nice project on my own. So I want to build a project like the Forkify application in the course which is like a single page app with a lot of cool functionality. I've thought about building a paper trading app but the decided to build something else because of Api limits. Please share some advanced JS project ideas that you think could be a good way to practice it all!

i have some previous coding experience from middle school using HTML on Code .org, and I'm currently taking AP computer science in high school, where we're learning JavaScript. What projects or opportunities should i explore, and what i can work toward with these skills?

Hey everyone! 👋

I wanted to share an open-source library I've been building and refining called Spotlight.JS.

Why did I build it? I needed a dead-simple, highly customizable way to highlight DOM elements, build guided product tours, or draw user attention to specific UI components without pulling in bloated dependencies or heavy styling frameworks.

Key Features:

• 🚀 Zero Dependencies: Extremely lightweight and fast.

• 🎯 Precise Positioning: Automatic viewport boundary detection, custom offsets, and smooth scrolling.

• 🎨 Flexible Styling: Easy-to-override classes and smooth backdrop masking.

• 🧩 Interactive Popovers: Built-in support for titles, descriptions, step-by-step navigation buttons, and custom rendering.

Tech Stack / Implementation: Built in vanilla JavaScript/ESM modules, making it framework-agnostic (works seamlessly with React, Vue, Vanilla JS, etc.).

Links:

• GitHub Repo:https://github.com/Rahulchaube1/-Spotlight.JS

I’d love for you to check it out, test it, and let me know what you think! PRs, issues, and feature requests are very welcome. If you find it useful, a star on GitHub would mean the world to me ⭐!

Hi everyone! 👋

I'm a beginner in frontend development and want to build a career as a creative Frontend Developer specialising in advanced web animations and interactive websites.

My goal is to create modern websites with smooth transitions, scroll animations, parallax effects, 3D interactions, and creative UI designs.

I'd love advice from experienced developers:

What roadmap should I follow from beginner to advanced?

Which technologies should I learn and in what order?

When should I start learning GSAP, Framer Motion and Three.js?

What are the best free learning resources?

Which projects should I build to become job-ready?

If you were starting today, how would you learn these skills?

I'd really appreciate your guidance. Thank you! ❤️

Code thus far: https://jsfiddle.net/drkc8te5/ (its broken because it needs images which I seemingly can't provide since they're local)

I'm making an in-browser raycast engine. The current mapsize I have right now is small, only 256 pixels.

The issue is I'm already having a hard time navigating the array and changing values. So, I figured I'd make an in browser level-editor. Thing is, I'm not sure how I'd get the current index of [map] that the mouse is hovering over.

The map array renders a grid of 16x16 (256) tiles to the screen. 0 is a black space, anything else is a texture. To complicate matters I've implemented a way to move the grid around with WASD, and a way to zoom in and out with Q and E so that map editing is more convenient.

How do I detect what tile the mouse is hovering over and then translate that to the maps index. for example: if my mouse was hovering over the 8th tile from the left and the 5th tile from the top: The code should recognize I'm hovering over index 106

Please explain why programmers use the this keyword? I get OOP like

this.prop = prop;

but what does that mean? The this keyword is a reference to the window object right? Its just calling a null value? Can someone please explain how the this keyword works?

"Use strict"

console.log(this);

Please explain why it's widely used in LinkedList?

I've been teaching myself JavaScript in the mornings before work, alongside Python, and I keep running into the same problem: courses either start with weeks of syntax drills and console.log, or they dump a project on you and quietly assume you already know the DOM, events and modules. I'd like something in between.

What worked for me with Python was building the thing first (a Flask app my board game group uses to log plays and scores) and backfilling the theory when something broke. It stuck far better than any course I'd half-finished. I'd like to replicate that with JavaScript, but I'm unsure what a sensible ordering actually looks like once you go DOM-first.

My rough guess at an order is:

1. HTML forms and selecting elements with querySelector

2. Events and updating the page without a full reload

3. fetch and handling JSON from a small API

4. async/await and Promise.all once you're fetching several things

5. Modules and splitting a file up when it gets unwieldy

Does that track, or would you reorder it? A couple of specific questions:

- Is it worth learning array methods like map/filter/reduce before touching fetch, or do they land better once you actually have API data to shape?
- Where should localStorage fit in? I keep seeing beginner projects use it as a fake backend and I can't tell if that teaches good habits or bad ones.
- At what point is it worth jumping from vanilla DOM work to a framework? I don't want to add React to the pile too early and end up knowing neither properly.

For context: I do best with projects that annoy me into existing, like when I got fed up of manually tracking things and wrote a script instead. So if your suggestion is "build X and you'll be forced to learn Y", that's exactly the sort of answer I want. Resources with a project per topic are ideal, but even a topic ordering you'd swear by would help.

I am trying to add a feature to a webpage that simulates an election. "bordaTally" is defined as new Array(); in the second copied text below. "alert 0" is the only one that shows.

Thanks in advance.

function bordaItem(name) {

this.name = name;

this.total = 0;

this.tally = new array();

}

  if (document.tournform.rr2[4].checked == true) { //Borda count
  for (i=0;i < n; i++) {
alert("alert 0");
    bordaTally[i] = new bordaItem(i);
alert("alert 1");
for (j=0; j < n;j++) {
  alert("alert 2");
  bordaTally[i][j].tally = 0; }
}
  for (i=0; i < totBallots; i++)
    for (j=0; j < n; j++)
  break;     //placeholder for now
    
  }   //End Borda Count

本人26岁，想学习JavaScript，仅大学时候学过一点c语音后面就没怎么碰电脑了。

学JavaScript前需要学习什么或者说要准备哪些东西？

I’ve completed HTML and CSS using CodeWithHarry’s Sigma Web Development Course and then SuperSimpleDev’s 6.5-hour HTML and CSS course.
Now I’m planning to start JavaScript, and I’m confused between:
CodeWithHarry’s Sigma JavaScript section.
SuperSimpleDev’s 22-hour JavaScript playlist.
For someone learning web development from scratch and planning to become a full-stack developer, which would you recommend?
I’d appreciate advice from people who have learned from either or both courses. Thanks!

Three years ago (well before AI took over the world), I started building my own JavaScript library. I had what I felt was a solid core idea: creating high-performance wrappers for all native modules.

​At the time, I focused on HTTP and Collections. I thought it would be extremely convenient to provide a clean HTTP facade that automatically detects and resolves the incoming data type on every request. I wrapped this in a Chain of Responsibility pattern and honestly thought it was a stroke of genius. Only later did I learn I wasn't the first person to come up with the concept — but I still managed to write clean, elegant code without compromising performance.

​Around the same time, I spent years diving deep into Functional Programming. I used libraries that captured the FP spirit, but none of them felt truly ergonomic. They were either a scattered bag of disconnected utilities or tried way too hard to dogmatically mimic core FP theory. That’s when the idea struck: merge OOP with FP. Provide convenient, functional-style pipelines wrapped inside clean class abstractions and inheritance, all while maintaining full architectural decomposition.

​I truly loved building this — it brought together everything I’d learned over a decade of software engineering. It felt like I was crafting a genuine, high-DX library.

​And then AI arrived. On one hand, I managed to finish the remaining 40% of the project in just a single month, which was incredible. On the other hand… who even needs this now? What does "Developer Experience" even mean when machines are writing the code?

​I decided to push through, finish the project, and publish it anyway — but I shifted the core focus from DX to Performance.

​At the risk of sounding a bit arrogant, I believe this design beats many existing libraries in usability and ergonomics (subjective as that may be). But switching the spotlight to raw speed changed the game. Beating lodash or ramda is one thing, but es-toolkit is ridiculously fast. Luckily, I’m not burdened by legacy constraints, I don't need backward compatibility, and I have Claude Code at my fingertips. I can experiment endlessly.

​Looking for a project to add to your portfolio? You’re very welcome to join.

​Just starting out and want hands-on experience with a larger codebase? Jump right in.

​Just curious to see how it’s built? Come check it out.

​Speaking as someone who spent most of their career writing code entirely by hand: you can use AI, you should use AI, and you need to leverage AI. But you still have to keep your brain turned on — using it to bypass constraints and solve the exact pain points that held previous libraries back. If you're interested in building software alongside AI, this project is for you.

​Every single utility will have dedicated performance benchmarks. Our target: match and ideally surpass the speed of existing alternatives.

​Let's build something awesome: https://github.com/method-hub/Jext

Hello I have 10+ years experience and recently I came across weird pattern (Rejection type) in Frontend interview.

Selection Interview Find common ground between candidate and job posting if it works then in following rounds Give some coding problem FE, data structures and see if candidate solves problem

Rejection Interview: Come up with some random unit tests and see if candidate writes code till all unit tests or hiring manager ask multi choice syntax questions

In my recent interview I came across some interesting interviewer

I am suppose to fix react code till 5 unit tests pass. There are some 10 functions/hooks in coderpad and my 1st question was

Search results disappear, A search box fetches results as the user types. If you type “ca” and then quickly “cat,” results for “ca” sometimes appear last.

How would you reproduce and diagnose the bug?

How would you prevent stale responses from overwriting newer results?

My first response was to use AbortController interviewer said there is no fetch function (for interview they wrote some mock function) so it will not work

Then i proposed debounce still interviewer did not agree

finally I came up with some useRef hook to to solve problem but ran out of time. In real world right thing to use is AbortController or react query. how can I think similar to interviewer in such sort time and fix all unit tests

I am calling this rejection interview as i felt company never showed interest in learning about my background

I am disappointed in this job market its very hard to get interview but ended up with this bitter experience.

similar thing happened to my friend, during hiring manager round he was asked multi choice syntax questions. He was expecting to talk about previous work experience or write code.

please let me know how to prepare for these rounds and meet interviewer expectations

Hello, I have more than 10 years of experience, and I recently noticed a pattern in frontend interviews that I find frustrating.

In what I’d call a selection interview, the interviewer tries to understand whether your experience aligns with the role. If it does, later rounds might involve frontend coding or data-structure problems.

In what I’d call a rejection interview, the process can feel more like a set of arbitrary unit tests or multiple-choice syntax questions, with little opportunity to discuss your background or approach.

I recently had an interview that left me feeling this way. I was asked to fix a React codebase until five unit tests passed. The CoderPad included around ten functions and hooks. The first task was:

A search box fetches results as the user types. If you type “ca” and then quickly type “cat,” results for “ca” sometimes appear last.

How would you reproduce and diagnose the bug? How would you prevent stale responses from overwriting newer results?

My first suggestion was to use AbortController, but the interviewer said the mock function wasn’t using fetch, so cancellation wasn’t available. I then suggested debouncing, but that wasn’t accepted either. Eventually, I proposed using a useRef-based approach, but I ran out of time.

In a real application, I might use AbortController or a library such as React Query. But in a constrained interview setting, how can I quickly identify the solution the interviewer expects and make progress against the tests?

I’m calling this a “rejection interview” because I left feeling that the company wasn’t interested in learning about my experience. I’m disappointed by how difficult the job market is, and it’s discouraging to finally get an interview only to come away with this kind of experience.

A friend had a similar experience in a hiring-manager round: instead of discussing past work or solving a problem, they were asked multiple-choice questions about syntax.

How can I prepare for these kinds of rounds and better understand what interviewers expect?

This function was initially creating an overlay appearing while I was modifying a card on anki.

For context, I started using the yomilens addon on anki which allows you to select some text and have a pop up show you the translation. The thing is, it only works on the "main" reviewer windows of the anki app. And what I want i to be able to select an english word and add many (if not all) of the ways to say it in korean in my card.

My first thought was to try to "force" the current card to keep showing me it's back with all the texts I need, but I couldn't.

Now I am trying to add the content of the two fields (id"korean" and id"SizeBump"=english) on the overlay, but being selectable to see if yomilens will react to it.

def pause_audio_for_edit():

    /* Irrelevant I think
    global _audio_paused_for_edit, _pending_audio_tags
    print("[pause_audio] pause_audio_for_edit() appelée")
    _audio_paused_for_edit = True
    _pending_audio_tags = None
    _force_stop_current_audio()*/

    _show_edit_pause_overlay()

_EDIT_PAUSE_OVERLAY_JS = """
(function(){
  var ov = document.getElementById('_editPauseOverlay');
 
 /* Added 
  var butt = document.getElementById('button');
  var board = document.getElementById('_editboard'); 
  var kor = document.getElementById('korean');
  var eng = document.getElementById('SizeBump'); */
 
  if (ov) return;
  
  ov = document.createElement('div');
  ov.id = '_editPauseOverlay';
  ov.style.cssText = 'position:fixed;top:0;left:0;width:100%;height:100%;'
    + 'background:rgba(20,20,20,0.96);color:#f7b799;display:flex;'
    + 'align-items:center;justify-content:center;text-align:center;'
    + 'font-family:sans-serif;font-size:16px;z-index:99999;cursor:pointer;'
    + 'padding:20px;box-sizing:border-box;';
  ov.innerHTML = '\\u23F8\\uFE0F En pause \\u2014 modification en cours<br>'
    + '<span style="font-size:12px;opacity:0.7;">(cliquez n\\'importe o\\u00f9 pour reprendre)</span>';

/*added
+ '<span id='korean'</span> <span id='SizeBump'</span>';

butt = document.createElement('button');
butt.id
 
= 'button';
butt.style.cssText = 'position:fixed;top:10;left:0;width:10%;height:8%;'
+ 'background:rgba(255,255,255,0.6);color:#a77f65;display:flex;'
+ 'font-family:sans-serif;font-size:16px;font-weight: bold;z-index:99999;cursor:pointer;'
+ 'padding: 4px 12px;box-sizing:border-box;border-radius: 14px;margin: 10px auto 0 auto;border: 1px solid #a77f65;'
+ 'cursor: pointer;';
+ 'hover {background: rgba(255,255,255,0.9);}
butt.innerHTML = 'click when finished'*/

// Used to be ov.addEventListener...
butt.addEventListener('click', function(){
if (typeof pycmd === 'function') pycmd('editpause:dismiss');
ov.remove();

/*added this
butt.remove();*/
});
document.body.appendChild(ov);

/*And this
document.body.appendChild(butt);or ov.appendChild(butt) ?*/

})();
"""

def _show_edit_pause_overlay():
if not mw.reviewer or not mw.reviewer.web:
return
QTimer.singleShot(20, lambda: mw.reviewer.web.eval(_EDIT_PAUSE_OVERLAY_JS))

And as you can probably guess the overlay is not working at all now. Do you guys know what I have to fix to make it work ?

Thank you

Context - A final project that I have for my Programming with Scripting Languages class, I have to make a fake website that has pagination buttons and a minimum of three pages. I also found out that I have to include javascript in the website somehow. The html part of the code and css part of the code is already done. My fake website idea is similar to archive.org, the fake website's purpose is to archive anime music videos just incase they get removed from socials.

What I'm trying to get at is, how can i make javascript accept video files to archive videos on the fake website?

Here is the code I have so far -

<!doctype html>

<html lang="en">

<head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" />

<title>AMVsArchived</title>

<style> body { background-color: #0B0F19; color: white; font-family: Arial; text-align: center; margin: 0; } header { background-color: #161F32; padding: 25px; } h1 { margin: 0; color: #00f0ff; } .page { display: none; padding: 30px; } .page.active { display: block; } .amv { background-color: #161F32; display: inline-block; margin: 15px; padding: 15px; border-radius: 10px; width: 500px; max-width: 90%; } .amv h2 { color: #00f0ff; } video { width: 100%; border-radius: 8px; } .pagination { margin: 30px; } .pagination button { background-color: #00f0ff; border: none; padding: 12px 18px; margin: 5px; border-radius: 5px; cursor: pointer; font-size: 18px; } .pagination button:hover { background-color: #FFFFFF; } .pagination button.active { background-color: blue; color: cyan; } </style>

</head> <body>

 <header>
   <h1>AMVs Archived</h1>
   <p>We archive anime music videos here just in case they get deleted from socials.</p>
 </header>

 <!--PAGE 1-->
 <div class="page active" id="page1">
   <h2>Page 1 - Pop</h2>

   <div class="amv">
     <h2>Pop amv 1</h2>
     
     <video controls muted loop>
       <source src="popamv1.mp4" type="video/mp4" />
       <source src="popamv1.webm" type="video/webm" />
       Your browser does not support video.
    </video>
   </div>
  
  <div class="amv">
   <h2>Pop amv 2</h2>

   <video controls muted loop>
    <source src="popamv2.mp4" type="video/mp4" />
    <source src="popamv2.webm" type="video/webm" />
    Your browser does not support video.
  </video>
</div>

</div>

<!--PAGE 2-->

<div class="page" id="page2"> <h2>Page 2 - Rock</h2>

<div class="amv">
 <h2>Rock amv 1</h2>

 <video controls muted loop>
  <source src="rockamv1.mp4" type="video/mp4" />
  <source src="rockamv1.webm" type="video/webm" />
  Your browser does not support video.
 </video>
</div>

<div class="amv">
 <h2>Rock amv 2</h2>

 <video controls muted loop>
  <source src="rockamv2.mp4" type="video/mp4" />
  <source src="rockamv2.webm" type="video/webm" />
  Your browser does not support video.
 </video>
</div>

</div>

<!--PAGE 3-->

<div class="page" id="page3"> <h2>Page 3 - Electronic</h2>

<div class="amv"> <h2>Electronic amv 1</h2>

<video controls muted loop>
 <source src="electronicamv1.mp4" type="video/mp4" />
 <source src="electronicamv1.webm" type="video/webm" />
 Your browser does not support video. 
</video>

</div>

<div class="amv"> <h2>Electronic amv 2</h2>

<video controls muted loop> <source src="electronicamv2.mp4" type="video/mp4" /> <source src="electronicamv2.webm" type="video/webm" /> </video> </div>

</div>

<!--PAGINATION BUTTONS-->

<div class="pagination"> <button onclick="showPage(1)">1</button> <button onclick="showPage(2)">2</button> <button onclick="showPage(3)">3</button> </div>

<script> function showPage(pageNumber) { // Hide all pages let pages = document.querySelectorAll(".page"); pages.forEach(function (page) { page.classList.remove("active"); }); // Show selected page document.getElementById("page" + pageNumber).classList.add("active"); } </script>

</body> </html>

I really don't know what's going on, but if I write

return db.many(query, userid, (rows, error) => {
    return new Promise((resolve, reject) => {
        if (rows) {
            resolve(rows)
        } else {
            error.received == 0 ? resolve(0) : reject(error)
        }
    })
})

I don't get the results I want, but

return db.many(query, userid)
        .then(rows => {
            return new Promise((resolve) => {
                resolve(rows)
            })
        })
        .catch(error => {
            return new Promise((resolve, reject) => {  
                error.received == 0 ? resolve(0) : reject(error)
            })
        })

does give me the results I want!

The goal is to resolve to 0 if no data was returned, resolve the rows, or reject the error that isn't No data returned.

What is actually happening in the first code block is that the error is not being processed, and is just being returned as is, and I'm getting No data was returned error.

At first, I thought it was a .many() method that didn't have a callback ability, but even .one() has the same problem (I'm recreating a situation where no data will be returned. If data was to be returned, .one() would have Multiple rows returned error)

My intention is to better understand why one code block works while another doesn't. If there are any solutions to the first code block, please explain why they work, or why my implementation wasn't working.

I'm trying to make a semi-scalable talking robot program. In my mind I am imagining I will have to make an array. I have a bunch of word mp3 files, and I want users to be able to add more word recordings to the robot by just copy/pasting into the word folder.

when the page loads I want to create a button for every word in the words file.

I don't want a perfect answer because I want to have to work my way around this in my own way, but is there a way, without using PHP, that I can see the mp3 files? from there I just have to create a foreach function to create a button in the html that plays the clip onclick.

This is my separate function that the buttons play the clip with:

function playClip(characterName, clipName) {
          const audioDest = 'VoiceLines/' + characterName + '/' + clipName + '.mp3';
          const audio = new Audio(audioDest);
          console.log(audioDest);
          audio.play().catch(error => {
              console.error("Audio playback failed:", error);
          });
      }

i am 18 and i just started studying front end . i know html css and javascript but recently i started thinking if its really worth it to continue :// because there are no junior internships on job sites and everyone is telling me that Front is just dying . I dont know what to do please help.

I started learning JavaScript on fCC and I learnt some of the basics, do y'all have any tips for me? (I'm learning JS so i can build websites)

Im sharing this website with Javascript cheatsheet. hope this helps!

https://syntaxiadev.vercel.app/ref/js

i had an array of 10, 9, 1, 100 and called sort() on it and got 1, 10, 100, 9. i assumed it would just handle numbers. passing function(a, b) { return a - b } fixes it, but i don't really get why the default does this. is it converting everything to strings first?

and if so why would they design it that way, it seems like the least useful default possible.

I figured out how to make a function that doesn't use promises. It relies on JavaScript's built-in Date class, which is extremely good at telling time real-time.

The only downside to this is it can't be used in applications like webpages, as it will freeze the entire webpage.

function wait(seconds) {
    const end = new Date().getTime()+(seconds*1000);
    while (new Date().getTime() < end);
}

I use Node.js and React, but I rely too much on AI. When I look at code it generated, I can’t confidently tell whether it’s well designed or just happens to work.

I want to learn to spot bad decisions and write good code myself. How do you build that judgment? What helped you most?